@acontplus/ng-components 4.0.0 → 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -1
- package/fesm2022/acontplus-ng-components.mjs +480 -299
- package/fesm2022/acontplus-ng-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/components/alert/_m3-alert.scss +57 -54
- package/src/lib/components/alert/alert.scss +87 -36
- package/src/lib/components/badge/_m3-badge.scss +6 -1
- package/src/lib/components/badge/badge.scss +18 -6
- package/src/lib/components/grid/grid.scss +61 -0
- package/types/acontplus-ng-components.d.ts +141 -115
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { input, booleanAttribute, numberAttribute, output, signal, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, contentChild, TemplateRef, InjectionToken, inject, NgZone, Injector, Service, ElementRef, EventEmitter, HostListener, Output, Input, Directive, ViewChild, effect, ViewContainerRef, Renderer2, afterRenderEffect, untracked, makeEnvironmentProviders, viewChild, isSignal, Injectable, model, Pipe, KeyValueDiffers, ChangeDetectorRef, CSP_NONCE, DOCUMENT as DOCUMENT$1, afterNextRender, ContentChildren, forwardRef, ANIMATION_MODULE_TYPE, ApplicationRef, ContentChild, LOCALE_ID, PLATFORM_ID, DestroyRef, SecurityContext } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/material/button';
|
|
4
4
|
import { MatIconButton, MatButton, MatMiniFabButton, MatFabButton, MatButtonModule } from '@angular/material/button';
|
|
5
|
+
import * as i2 from '@angular/material/icon';
|
|
6
|
+
import { MatIcon, MatIconModule } from '@angular/material/icon';
|
|
5
7
|
import * as i1 from '@angular/common';
|
|
6
8
|
import { NgClass, NgTemplateOutlet, DOCUMENT, CommonModule, AsyncPipe, CurrencyPipe, DatePipe, DecimalPipe, PercentPipe, NgStyle, isPlatformBrowser, SlicePipe } from '@angular/common';
|
|
7
9
|
import * as i1$8 from '@angular/router';
|
|
8
10
|
import { RouterLink, RouterModule, Router, NavigationEnd, RouterLinkActive, RouterOutlet } from '@angular/router';
|
|
9
11
|
import { MatChipSet, MatChip, MatChipAvatar, MatChipTrailingIcon, MatChipRemove, MatChipRow, MatChipGrid, MatChipInput, MatChipListbox } from '@angular/material/chips';
|
|
10
|
-
import * as i2 from '@angular/material/icon';
|
|
11
|
-
import { MatIconModule, MatIcon } from '@angular/material/icon';
|
|
12
12
|
import * as i4 from '@angular/cdk/overlay';
|
|
13
13
|
import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
|
|
14
14
|
import { ComponentPortal, CdkPortalOutlet, TemplatePortal, DomPortalOutlet } from '@angular/cdk/portal';
|
|
15
|
-
import { Subject, firstValueFrom, from, isObservable, catchError, of, merge, combineLatest, Observable,
|
|
16
|
-
import { takeUntil, take, switchMap, mapTo, startWith, pairwise, distinctUntilChanged, share,
|
|
15
|
+
import { Subject, firstValueFrom, from, isObservable, catchError, of, merge, combineLatest, Observable, defer, Subscription, map as map$1, BehaviorSubject, filter as filter$1, tap, debounceTime } from 'rxjs';
|
|
16
|
+
import { map, filter, takeUntil, take, switchMap, mapTo, startWith, pairwise, distinctUntilChanged, share, skip } from 'rxjs/operators';
|
|
17
17
|
import * as i3 from '@angular/material/progress-spinner';
|
|
18
18
|
import { MatProgressSpinnerModule, MatProgressSpinner } from '@angular/material/progress-spinner';
|
|
19
19
|
import { CdkTrapFocus, LiveAnnouncer, _IdGenerator, FocusMonitor, isFakeMousedownFromScreenReader } from '@angular/cdk/a11y';
|
|
@@ -21,7 +21,7 @@ import * as i1$2 from '@angular/material/dialog';
|
|
|
21
21
|
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule, MatDialog, MatDialogConfig } from '@angular/material/dialog';
|
|
22
22
|
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
|
23
23
|
import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
24
|
-
import { REPORT_FORMAT, DEFAULT_ICONS, FALLBACK_ICON } from '@acontplus/ui-kit';
|
|
24
|
+
import { REPORT_FORMAT, DEFAULT_ICONS as DEFAULT_ICONS$1, FALLBACK_ICON } from '@acontplus/ui-kit';
|
|
25
25
|
import { CdkDrag, CdkDragHandle, moveItemInArray, CdkDropList } from '@angular/cdk/drag-drop';
|
|
26
26
|
import * as i1$4 from '@angular/forms';
|
|
27
27
|
import { FormControl, ReactiveFormsModule, NgControl, NgForm, FormGroupDirective, FormsModule, NG_VALUE_ACCESSOR, FormGroup, Validators } from '@angular/forms';
|
|
@@ -76,43 +76,72 @@ import * as i4$2 from '@angular/material/tabs';
|
|
|
76
76
|
import { MatTabsModule } from '@angular/material/tabs';
|
|
77
77
|
import { TranslocoService } from '@jsverse/transloco';
|
|
78
78
|
|
|
79
|
+
const DEFAULT_ICONS = {
|
|
80
|
+
default: null,
|
|
81
|
+
info: 'info',
|
|
82
|
+
success: 'check_circle',
|
|
83
|
+
warning: 'warning',
|
|
84
|
+
danger: 'error',
|
|
85
|
+
};
|
|
79
86
|
class AcpAlert {
|
|
80
|
-
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
81
|
-
get hostClassList() {
|
|
82
|
-
return `acp-alert acp-alert-${this.type} mat-elevation-z${this.elevation}`;
|
|
83
|
-
}
|
|
84
87
|
/** The alert's type. Can be `default`, `info`, `success`, `warning` or `danger`. */
|
|
85
|
-
type = 'default'
|
|
88
|
+
type = input('default', /* @ts-ignore */
|
|
89
|
+
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
90
|
+
/** Visual style: `soft` (default), `outlined` or `filled`. */
|
|
91
|
+
variant = input('soft', /* @ts-ignore */
|
|
92
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
93
|
+
/** Optional bold heading shown above the content. */
|
|
94
|
+
heading = input(/* @ts-ignore */
|
|
95
|
+
...(ngDevMode ? [undefined, { debugName: "heading" }] : /* istanbul ignore next */ []));
|
|
96
|
+
/** Material icon name. Defaults to an icon per type (none for `default`). */
|
|
97
|
+
icon = input(/* @ts-ignore */
|
|
98
|
+
...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
99
|
+
/** Whether to show the icon. */
|
|
100
|
+
showIcon = input(true, { ...(ngDevMode ? { debugName: "showIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
86
101
|
/** Whether to display an inline close button. */
|
|
87
|
-
dismissible = false;
|
|
102
|
+
dismissible = input(false, { ...(ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
103
|
+
/** Accessible label of the close button. */
|
|
104
|
+
closeLabel = input('Cerrar', /* @ts-ignore */
|
|
105
|
+
...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
|
|
88
106
|
/** The alert's elevation (0~24). */
|
|
89
|
-
elevation = 0;
|
|
90
|
-
/** Event emitted when the alert closed. */
|
|
91
|
-
closed =
|
|
92
|
-
|
|
93
|
-
|
|
107
|
+
elevation = input(0, { ...(ngDevMode ? { debugName: "elevation" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
108
|
+
/** Event emitted when the alert is closed. */
|
|
109
|
+
closed = output();
|
|
110
|
+
_open = signal(true, /* @ts-ignore */
|
|
111
|
+
...(ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []));
|
|
112
|
+
/** Whether the alert is visible. */
|
|
113
|
+
isOpen = this._open.asReadonly();
|
|
114
|
+
resolvedIcon = computed(() => this.showIcon() ? (this.icon() ?? DEFAULT_ICONS[this.type()]) : null, /* @ts-ignore */
|
|
115
|
+
...(ngDevMode ? [{ debugName: "resolvedIcon" }] : /* istanbul ignore next */ []));
|
|
116
|
+
/** Errors and warnings interrupt screen readers; the rest are announced politely. */
|
|
117
|
+
role = computed(() => this.type() === 'danger' || this.type() === 'warning' ? 'alert' : 'status', /* @ts-ignore */
|
|
118
|
+
...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
|
|
119
|
+
hostClassList = computed(() => `acp-alert acp-alert-${this.type()} acp-alert--${this.variant()} mat-elevation-z${this.elevation()}`, /* @ts-ignore */
|
|
120
|
+
...(ngDevMode ? [{ debugName: "hostClassList" }] : /* istanbul ignore next */ []));
|
|
121
|
+
/** Hides the alert and emits `closed`. */
|
|
122
|
+
close() {
|
|
123
|
+
if (!this._open()) {
|
|
124
|
+
return;
|
|
125
|
+
}
|
|
126
|
+
this._open.set(false);
|
|
94
127
|
this.closed.emit(this);
|
|
95
128
|
}
|
|
129
|
+
/** Shows the alert again after it was closed. */
|
|
130
|
+
open() {
|
|
131
|
+
this._open.set(true);
|
|
132
|
+
}
|
|
96
133
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
97
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpAlert, isStandalone: true, selector: "acp-alert", inputs: { type: "type",
|
|
134
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpAlert, isStandalone: true, selector: "acp-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class": "hostClassList()", "class.acp-alert-dismissible": "dismissible()", "attr.role": "role()", "attr.hidden": "isOpen() ? null : \"\"" } }, exportAs: ["acpAlert"], ngImport: i0, template: "@if (resolvedIcon(); as iconName) {\n<mat-icon class=\"acp-alert-icon\" aria-hidden=\"true\">{{ iconName }}</mat-icon>\n}\n<div class=\"acp-alert-body\">\n @if (heading()) {\n <div class=\"acp-alert-title\">{{ heading() }}</div>\n }\n <div class=\"acp-alert-content\"><ng-content></ng-content></div>\n <div class=\"acp-alert-actions\"><ng-content select=\"[acpAlertActions]\"></ng-content></div>\n</div>\n@if (dismissible()) {\n<button\n class=\"acp-alert-close\"\n matIconButton\n type=\"button\"\n [attr.aria-label]=\"closeLabel()\"\n (click)=\"close()\"\n>\n <svg viewBox=\"0 0 24 24\" width=\"20px\" height=\"20px\" fill=\"currentColor\" focusable=\"false\">\n <path\n d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\"\n />\n </svg>\n</button>\n}\n", styles: [".acp-alert{--acp-alert-bg: var(--acp-alert-background-color, var(--mat-sys-surface-container));--acp-alert-fg: var(--acp-alert-text-color, var(--mat-sys-on-surface));--acp-alert-border: var(--acp-alert-outline-color, var(--mat-sys-outline-variant));--acp-alert-icon: var(--acp-alert-icon-color, var(--mat-sys-on-surface-variant));--acp-alert-solid-bg: var(--acp-alert-solid-background-color, var(--mat-sys-inverse-surface));--acp-alert-solid-fg: var(--acp-alert-solid-text-color, var(--mat-sys-inverse-on-surface));position:relative;display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 1rem;box-sizing:border-box;line-height:1.5;border:1px solid var(--acp-alert-border);border-radius:var(--acp-alert-container-shape, var(--mat-sys-corner-small));background-color:var(--acp-alert-bg);color:var(--acp-alert-fg)}.acp-alert[hidden]{display:none}.acp-alert.acp-alert-info{--acp-alert-bg: var(--acp-alert-info-background-color, color-mix(in srgb, light-dark(#005cbb, color-mix(in oklab, #abc7ff 70%, white)) 12%, var(--mat-sys-surface)));--acp-alert-fg: var(--acp-alert-info-text-color, var(--mat-sys-on-surface));--acp-alert-border: var(--acp-alert-info-outline-color, color-mix(in srgb, light-dark(#005cbb, color-mix(in oklab, #abc7ff 70%, white)) 35%, var(--mat-sys-surface)));--acp-alert-icon: var(--acp-alert-info-icon-color, light-dark(#005cbb, color-mix(in oklab, #abc7ff 70%, white)));--acp-alert-solid-bg: var(--acp-alert-info-solid-background-color, light-dark(#005cbb, #00458f));--acp-alert-solid-fg: var(--acp-alert-info-solid-text-color, #ffffff)}.acp-alert.acp-alert-success{--acp-alert-bg: var(--acp-alert-success-background-color, color-mix(in srgb, light-dark(#026e00, color-mix(in oklab, #02e600 70%, white)) 12%, var(--mat-sys-surface)));--acp-alert-fg: var(--acp-alert-success-text-color, var(--mat-sys-on-surface));--acp-alert-border: var(--acp-alert-success-outline-color, color-mix(in srgb, light-dark(#026e00, color-mix(in oklab, #02e600 70%, white)) 35%, var(--mat-sys-surface)));--acp-alert-icon: var(--acp-alert-success-icon-color, light-dark(#026e00, color-mix(in oklab, #02e600 70%, white)));--acp-alert-solid-bg: var(--acp-alert-success-solid-background-color, light-dark(#026e00, #015300));--acp-alert-solid-fg: var(--acp-alert-success-solid-text-color, #ffffff)}.acp-alert.acp-alert-warning{--acp-alert-bg: var(--acp-alert-warning-background-color, color-mix(in srgb, light-dark(#964900, color-mix(in oklab, #ffb787 70%, white)) 12%, var(--mat-sys-surface)));--acp-alert-fg: var(--acp-alert-warning-text-color, var(--mat-sys-on-surface));--acp-alert-border: var(--acp-alert-warning-outline-color, color-mix(in srgb, light-dark(#964900, color-mix(in oklab, #ffb787 70%, white)) 35%, var(--mat-sys-surface)));--acp-alert-icon: var(--acp-alert-warning-icon-color, light-dark(#964900, color-mix(in oklab, #ffb787 70%, white)));--acp-alert-solid-bg: var(--acp-alert-warning-solid-background-color, light-dark(#964900, #723600));--acp-alert-solid-fg: var(--acp-alert-warning-solid-text-color, #ffffff)}.acp-alert.acp-alert-danger{--acp-alert-bg: var(--acp-alert-danger-background-color, color-mix(in srgb, light-dark(#c00100, color-mix(in oklab, #ffb4a8 70%, white)) 12%, var(--mat-sys-surface)));--acp-alert-fg: var(--acp-alert-danger-text-color, var(--mat-sys-on-surface));--acp-alert-border: var(--acp-alert-danger-outline-color, color-mix(in srgb, light-dark(#c00100, color-mix(in oklab, #ffb4a8 70%, white)) 35%, var(--mat-sys-surface)));--acp-alert-icon: var(--acp-alert-danger-icon-color, light-dark(#c00100, color-mix(in oklab, #ffb4a8 70%, white)));--acp-alert-solid-bg: var(--acp-alert-danger-solid-background-color, light-dark(#c00100, #930100));--acp-alert-solid-fg: var(--acp-alert-danger-solid-text-color, #ffffff)}.acp-alert.acp-alert--outlined{border-color:var(--acp-alert-icon);background-color:var(--acp-alert-outlined-background-color, var(--mat-sys-surface));color:var(--acp-alert-outlined-text-color, var(--mat-sys-on-surface))}.acp-alert:not(.acp-alert--filled) .acp-alert-title{color:var(--acp-alert-icon)}.acp-alert.acp-alert--filled{--acp-alert-icon: currentColor;border-color:transparent;background-color:var(--acp-alert-solid-bg);color:var(--acp-alert-solid-fg)}.acp-alert.acp-alert-dismissible{padding-right:.25rem}[dir=rtl] .acp-alert.acp-alert-dismissible{padding-right:1rem;padding-left:.25rem}.acp-alert-icon{flex-shrink:0;width:1.5rem;height:1.5rem;font-size:1.5rem;color:var(--acp-alert-icon)}.acp-alert-body{flex:1;min-width:0;padding-top:calc((1.5rem - 1lh)/2)}.acp-alert-title{margin-bottom:.125rem;font-weight:600}.acp-alert-content:empty,.acp-alert-actions:empty{display:none}.acp-alert-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.acp-alert-close.mat-mdc-icon-button{--mat-icon-button-icon-color: currentColor;--mat-icon-button-state-layer-color: currentColor;--mat-icon-button-state-layer-size: 2.25rem;flex-shrink:0;margin-top:-.375rem;padding:.5rem;color:inherit}\n"], dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
98
135
|
}
|
|
99
136
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpAlert, decorators: [{
|
|
100
137
|
type: Component,
|
|
101
138
|
args: [{ selector: 'acp-alert', exportAs: 'acpAlert', host: {
|
|
102
|
-
'[class]': 'hostClassList',
|
|
103
|
-
'[class.acp-alert-dismissible]': 'dismissible',
|
|
104
|
-
role: '
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
}], dismissible: [{
|
|
109
|
-
type: Input,
|
|
110
|
-
args: [{ transform: booleanAttribute }]
|
|
111
|
-
}], elevation: [{
|
|
112
|
-
type: Input
|
|
113
|
-
}], closed: [{
|
|
114
|
-
type: Output
|
|
115
|
-
}] } });
|
|
139
|
+
'[class]': 'hostClassList()',
|
|
140
|
+
'[class.acp-alert-dismissible]': 'dismissible()',
|
|
141
|
+
'[attr.role]': 'role()',
|
|
142
|
+
'[attr.hidden]': 'isOpen() ? null : ""',
|
|
143
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconButton, MatIcon], template: "@if (resolvedIcon(); as iconName) {\n<mat-icon class=\"acp-alert-icon\" aria-hidden=\"true\">{{ iconName }}</mat-icon>\n}\n<div class=\"acp-alert-body\">\n @if (heading()) {\n <div class=\"acp-alert-title\">{{ heading() }}</div>\n }\n <div class=\"acp-alert-content\"><ng-content></ng-content></div>\n <div class=\"acp-alert-actions\"><ng-content select=\"[acpAlertActions]\"></ng-content></div>\n</div>\n@if (dismissible()) {\n<button\n class=\"acp-alert-close\"\n matIconButton\n type=\"button\"\n [attr.aria-label]=\"closeLabel()\"\n (click)=\"close()\"\n>\n <svg viewBox=\"0 0 24 24\" width=\"20px\" height=\"20px\" fill=\"currentColor\" focusable=\"false\">\n <path\n d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\"\n />\n </svg>\n</button>\n}\n", styles: [".acp-alert{--acp-alert-bg: var(--acp-alert-background-color, var(--mat-sys-surface-container));--acp-alert-fg: var(--acp-alert-text-color, var(--mat-sys-on-surface));--acp-alert-border: var(--acp-alert-outline-color, var(--mat-sys-outline-variant));--acp-alert-icon: var(--acp-alert-icon-color, var(--mat-sys-on-surface-variant));--acp-alert-solid-bg: var(--acp-alert-solid-background-color, var(--mat-sys-inverse-surface));--acp-alert-solid-fg: var(--acp-alert-solid-text-color, var(--mat-sys-inverse-on-surface));position:relative;display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 1rem;box-sizing:border-box;line-height:1.5;border:1px solid var(--acp-alert-border);border-radius:var(--acp-alert-container-shape, var(--mat-sys-corner-small));background-color:var(--acp-alert-bg);color:var(--acp-alert-fg)}.acp-alert[hidden]{display:none}.acp-alert.acp-alert-info{--acp-alert-bg: var(--acp-alert-info-background-color, color-mix(in srgb, light-dark(#005cbb, color-mix(in oklab, #abc7ff 70%, white)) 12%, var(--mat-sys-surface)));--acp-alert-fg: var(--acp-alert-info-text-color, var(--mat-sys-on-surface));--acp-alert-border: var(--acp-alert-info-outline-color, color-mix(in srgb, light-dark(#005cbb, color-mix(in oklab, #abc7ff 70%, white)) 35%, var(--mat-sys-surface)));--acp-alert-icon: var(--acp-alert-info-icon-color, light-dark(#005cbb, color-mix(in oklab, #abc7ff 70%, white)));--acp-alert-solid-bg: var(--acp-alert-info-solid-background-color, light-dark(#005cbb, #00458f));--acp-alert-solid-fg: var(--acp-alert-info-solid-text-color, #ffffff)}.acp-alert.acp-alert-success{--acp-alert-bg: var(--acp-alert-success-background-color, color-mix(in srgb, light-dark(#026e00, color-mix(in oklab, #02e600 70%, white)) 12%, var(--mat-sys-surface)));--acp-alert-fg: var(--acp-alert-success-text-color, var(--mat-sys-on-surface));--acp-alert-border: var(--acp-alert-success-outline-color, color-mix(in srgb, light-dark(#026e00, color-mix(in oklab, #02e600 70%, white)) 35%, var(--mat-sys-surface)));--acp-alert-icon: var(--acp-alert-success-icon-color, light-dark(#026e00, color-mix(in oklab, #02e600 70%, white)));--acp-alert-solid-bg: var(--acp-alert-success-solid-background-color, light-dark(#026e00, #015300));--acp-alert-solid-fg: var(--acp-alert-success-solid-text-color, #ffffff)}.acp-alert.acp-alert-warning{--acp-alert-bg: var(--acp-alert-warning-background-color, color-mix(in srgb, light-dark(#964900, color-mix(in oklab, #ffb787 70%, white)) 12%, var(--mat-sys-surface)));--acp-alert-fg: var(--acp-alert-warning-text-color, var(--mat-sys-on-surface));--acp-alert-border: var(--acp-alert-warning-outline-color, color-mix(in srgb, light-dark(#964900, color-mix(in oklab, #ffb787 70%, white)) 35%, var(--mat-sys-surface)));--acp-alert-icon: var(--acp-alert-warning-icon-color, light-dark(#964900, color-mix(in oklab, #ffb787 70%, white)));--acp-alert-solid-bg: var(--acp-alert-warning-solid-background-color, light-dark(#964900, #723600));--acp-alert-solid-fg: var(--acp-alert-warning-solid-text-color, #ffffff)}.acp-alert.acp-alert-danger{--acp-alert-bg: var(--acp-alert-danger-background-color, color-mix(in srgb, light-dark(#c00100, color-mix(in oklab, #ffb4a8 70%, white)) 12%, var(--mat-sys-surface)));--acp-alert-fg: var(--acp-alert-danger-text-color, var(--mat-sys-on-surface));--acp-alert-border: var(--acp-alert-danger-outline-color, color-mix(in srgb, light-dark(#c00100, color-mix(in oklab, #ffb4a8 70%, white)) 35%, var(--mat-sys-surface)));--acp-alert-icon: var(--acp-alert-danger-icon-color, light-dark(#c00100, color-mix(in oklab, #ffb4a8 70%, white)));--acp-alert-solid-bg: var(--acp-alert-danger-solid-background-color, light-dark(#c00100, #930100));--acp-alert-solid-fg: var(--acp-alert-danger-solid-text-color, #ffffff)}.acp-alert.acp-alert--outlined{border-color:var(--acp-alert-icon);background-color:var(--acp-alert-outlined-background-color, var(--mat-sys-surface));color:var(--acp-alert-outlined-text-color, var(--mat-sys-on-surface))}.acp-alert:not(.acp-alert--filled) .acp-alert-title{color:var(--acp-alert-icon)}.acp-alert.acp-alert--filled{--acp-alert-icon: currentColor;border-color:transparent;background-color:var(--acp-alert-solid-bg);color:var(--acp-alert-solid-fg)}.acp-alert.acp-alert-dismissible{padding-right:.25rem}[dir=rtl] .acp-alert.acp-alert-dismissible{padding-right:1rem;padding-left:.25rem}.acp-alert-icon{flex-shrink:0;width:1.5rem;height:1.5rem;font-size:1.5rem;color:var(--acp-alert-icon)}.acp-alert-body{flex:1;min-width:0;padding-top:calc((1.5rem - 1lh)/2)}.acp-alert-title{margin-bottom:.125rem;font-weight:600}.acp-alert-content:empty,.acp-alert-actions:empty{display:none}.acp-alert-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.acp-alert-close.mat-mdc-icon-button{--mat-icon-button-icon-color: currentColor;--mat-icon-button-state-layer-color: currentColor;--mat-icon-button-state-layer-size: 2.25rem;flex-shrink:0;margin-top:-.375rem;padding:.5rem;color:inherit}\n"] }]
|
|
144
|
+
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
116
145
|
|
|
117
146
|
const TREND_CONFIGS = {
|
|
118
147
|
up: { value: '↑', icon: 'trending_up', color: 'success' },
|
|
@@ -260,7 +289,7 @@ class AcpBadge {
|
|
|
260
289
|
this.removed.emit();
|
|
261
290
|
}
|
|
262
291
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
263
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpBadge, isStandalone: true, selector: "acp-badge", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingSvgIcon: { classPropertyName: "trailingSvgIcon", publicName: "trailingSvgIcon", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelOverride: { classPropertyName: "ariaLabelOverride", publicName: "ariaLabelOverride", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", removed: "removed" }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ["icon"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "trailingIconTemplate", first: true, predicate: ["trailingIcon"], descendants: true, read: TemplateRef, isSignal: true }], exportAs: ["acpBadge"], ngImport: i0, template: "<mat-chip-set\n class=\"acp-badge__set\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n>\n <mat-chip\n class=\"acp-badge__chip\"\n [ngClass]=\"chipClasses()\"\n [disabled]=\"isDisabled()\"\n [removable]=\"removable()\"\n [highlighted]=\"isHighlighted()\"\n [value]=\"value()\"\n [routerLink]=\"routerLink()\"\n [attr.href]=\"href()\"\n (removed)=\"onRemove($event)\"\n (click)=\"onChipClick($event)\"\n >\n @if (loading()) {\n <span class=\"acp-badge__loader\" aria-hidden=\"true\"></span>\n } @if (iconTemplate()) {\n <span matChipAvatar class=\"acp-badge__avatar\">\n <ng-container [ngTemplateOutlet]=\"iconTemplate()!\"></ng-container>\n </span>\n } @else if (effectiveSvgIcon()) {\n <mat-icon\n matChipAvatar\n class=\"acp-badge__icon\"\n [svgIcon]=\"effectiveSvgIcon()!\"\n aria-hidden=\"true\"\n ></mat-icon>\n } @else if (effectiveIcon()) {\n <mat-icon matChipAvatar class=\"acp-badge__icon\" aria-hidden=\"true\"\n >{{ effectiveIcon() }}</mat-icon\n >\n } @if (label()) {\n <span class=\"acp-badge__label\">{{ label() }}</span>\n } @if (label() && effectiveValue()) {\n <span class=\"acp-badge__separator\" aria-hidden=\"true\">|</span>\n } @if (effectiveValue()) {\n <span class=\"acp-badge__value\">{{ effectiveValue() }}</span>\n } @if (trailingIconTemplate()) {\n <span matChipTrailingIcon class=\"acp-badge__trailing-icon\">\n <ng-container [ngTemplateOutlet]=\"trailingIconTemplate()!\"></ng-container>\n </span>\n } @else if (effectiveTrailingSvgIcon()) {\n <mat-icon\n matChipTrailingIcon\n class=\"acp-badge__trailing-icon\"\n [svgIcon]=\"effectiveTrailingSvgIcon()!\"\n aria-hidden=\"true\"\n ></mat-icon>\n } @else if (effectiveTrailingIcon()) {\n <mat-icon matChipTrailingIcon class=\"acp-badge__trailing-icon\" aria-hidden=\"true\"\n >{{ effectiveTrailingIcon() }}</mat-icon\n >\n } @if (removable()) {\n <button\n matChipRemove\n type=\"button\"\n class=\"acp-badge__remove\"\n aria-label=\"Remove\"\n (click)=\"onRemove($event)\"\n >\n <mat-icon aria-hidden=\"true\">cancel</mat-icon>\n </button>\n }\n </mat-chip>\n</mat-chip-set>\n", styles: [".acp-badge{--acp-badge-bg: var(--acp-badge-primary-bg, var(--mat-sys-primary));--acp-badge-fg: var(--acp-badge-primary-color, var(--mat-sys-on-primary));display:inline-flex;vertical-align:middle;max-width:100%}.acp-badge__set{display:inline-flex;max-width:100%}.acp-badge__chip.mat-mdc-chip{position:relative;max-width:100%}.acp-badge__label,.acp-badge__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acp-badge__separator{margin:0 6px;opacity:.6}.acp-badge__loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:inherit;border-radius:inherit;z-index:1}.acp-badge__loader:after{content:\"\";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:acp-badge-spin .75s linear infinite}.acp-badge__remove{cursor:pointer}.acp-badge__remove:focus-visible{outline:2px solid currentColor;outline-offset:1px}@keyframes acp-badge-spin{to{transform:rotate(360deg)}}.acp-badge.acp-badge--primary{--acp-badge-bg: var(--acp-badge-primary-bg, var(--mat-sys-primary));--acp-badge-fg: var(--acp-badge-primary-color, var(--mat-sys-on-primary))}.acp-badge.acp-badge--secondary{--acp-badge-bg: var(--acp-badge-secondary-bg, var(--mat-sys-secondary));--acp-badge-fg: var(--acp-badge-secondary-color, var(--mat-sys-on-secondary))}.acp-badge.acp-badge--tertiary{--acp-badge-bg: var(--acp-badge-tertiary-bg, var(--mat-sys-tertiary));--acp-badge-fg: var(--acp-badge-tertiary-color, var(--mat-sys-on-tertiary))}.acp-badge.acp-badge--success{--acp-badge-bg: var(--acp-badge-success-bg, light-dark(#026e00, #02e600));--acp-badge-fg: var(--acp-badge-success-fg, light-dark(#cbffb8, #013a00))}.acp-badge.acp-badge--warning{--acp-badge-bg: var(--acp-badge-warning-bg, light-dark(#964900, #ffb787));--acp-badge-fg: var(--acp-badge-warning-fg, light-dark(#ffede4, #502400))}.acp-badge.acp-badge--danger{--acp-badge-bg: var(--acp-badge-danger-bg, light-dark(#c00100, #ffb4a8));--acp-badge-fg: var(--acp-badge-danger-fg, light-dark(#ffedea, #690100))}.acp-badge.acp-badge--info{--acp-badge-bg: var(--acp-badge-info-bg, light-dark(#005cbb, #abc7ff));--acp-badge-fg: var(--acp-badge-info-fg, light-dark(#ecf0ff, #002f65))}.acp-badge.acp-badge--neutral{--acp-badge-bg: var(--acp-badge-neutral-bg, var(--mat-sys-surface-variant));--acp-badge-fg: var(--acp-badge-neutral-color, var(--mat-sys-on-surface-variant))}.acp-badge.acp-badge--custom{--acp-badge-bg: var(--acp-badge-custom-bg, var(--acp-badge-custom-bg, var(--mat-sys-surface-container)));--acp-badge-fg: var(--acp-badge-custom-fg, var(--acp-badge-custom-color, var(--mat-sys-on-surface)))}.acp-badge.acp-badge--filled .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: var(--acp-badge-bg);--mat-chip-elevated-selected-container-color: var(--acp-badge-bg);--mat-chip-label-text-color: var(--acp-badge-fg);--mat-chip-selected-label-text-color: var(--acp-badge-fg);--mat-chip-with-icon-icon-color: var(--acp-badge-fg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-fg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-fg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-fg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--outlined .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: transparent;--mat-chip-elevated-selected-container-color: transparent;--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: var(--acp-badge-bg);--mat-chip-outline-width: 1px}.acp-badge.acp-badge--soft .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: color-mix(in srgb, var(--acp-badge-bg) 12%, transparent);--mat-chip-elevated-selected-container-color: color-mix(in srgb, var(--acp-badge-bg) 12%, transparent);--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--tonal .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: color-mix(in srgb, var(--acp-badge-bg) 22%, transparent);--mat-chip-elevated-selected-container-color: color-mix(in srgb, var(--acp-badge-bg) 22%, transparent);--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--text .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: transparent;--mat-chip-elevated-selected-container-color: transparent;--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--xs .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 20px;--mat-chip-label-text-size: 10px}.acp-badge.acp-badge--xs .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 12px}.acp-badge.acp-badge--sm .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 24px;--mat-chip-label-text-size: 11px}.acp-badge.acp-badge--sm .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 14px}.acp-badge.acp-badge--md .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 28px;--mat-chip-label-text-size: 12px}.acp-badge.acp-badge--md .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 16px}.acp-badge.acp-badge--lg .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 32px;--mat-chip-label-text-size: 14px}.acp-badge.acp-badge--lg .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 18px}.acp-badge.acp-badge--rounded .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: var(--acp-badge-container-shape, var(--mat-sys-corner-small))}.acp-badge.acp-badge--pill .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: var(--acp-badge-pill-shape, var(--mat-sys-corner-full))}.acp-badge.acp-badge--square .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: 0}.acp-badge__chip.mat-mdc-chip .mat-icon{width:var(--acp-badge-icon-size, 18px);height:var(--acp-badge-icon-size, 18px);font-size:var(--acp-badge-icon-size, 18px);line-height:var(--acp-badge-icon-size, 18px)}.acp-badge.acp-badge--interactive .acp-badge__chip.mat-mdc-chip{cursor:pointer}.acp-badge.acp-badge--disabled .acp-badge__chip.mat-mdc-chip{cursor:not-allowed;opacity:.5}.acp-badge.acp-badge--loading .acp-badge__chip.mat-mdc-chip{pointer-events:none}.acp-badge.acp-badge--selected .acp-badge__chip.mat-mdc-chip.mdc-evolution-chip--selected,.acp-badge.acp-badge--selected .acp-badge__chip.mat-mdc-chip.mat-mdc-chip-highlighted{box-shadow:inset 0 0 0 2px currentColor}@media(prefers-reduced-motion:reduce){.acp-badge__loader:after{animation:none}}@media(prefers-contrast:more){.acp-badge__chip.mat-mdc-chip{outline:2px solid currentColor;outline-offset:1px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
292
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpBadge, isStandalone: true, selector: "acp-badge", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingSvgIcon: { classPropertyName: "trailingSvgIcon", publicName: "trailingSvgIcon", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelOverride: { classPropertyName: "ariaLabelOverride", publicName: "ariaLabelOverride", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", removed: "removed" }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ["icon"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "trailingIconTemplate", first: true, predicate: ["trailingIcon"], descendants: true, read: TemplateRef, isSignal: true }], exportAs: ["acpBadge"], ngImport: i0, template: "<mat-chip-set\n class=\"acp-badge__set\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n>\n <mat-chip\n class=\"acp-badge__chip\"\n [ngClass]=\"chipClasses()\"\n [disabled]=\"isDisabled()\"\n [removable]=\"removable()\"\n [highlighted]=\"isHighlighted()\"\n [value]=\"value()\"\n [routerLink]=\"routerLink()\"\n [attr.href]=\"href()\"\n (removed)=\"onRemove($event)\"\n (click)=\"onChipClick($event)\"\n >\n @if (loading()) {\n <span class=\"acp-badge__loader\" aria-hidden=\"true\"></span>\n } @if (iconTemplate()) {\n <span matChipAvatar class=\"acp-badge__avatar\">\n <ng-container [ngTemplateOutlet]=\"iconTemplate()!\"></ng-container>\n </span>\n } @else if (effectiveSvgIcon()) {\n <mat-icon\n matChipAvatar\n class=\"acp-badge__icon\"\n [svgIcon]=\"effectiveSvgIcon()!\"\n aria-hidden=\"true\"\n ></mat-icon>\n } @else if (effectiveIcon()) {\n <mat-icon matChipAvatar class=\"acp-badge__icon\" aria-hidden=\"true\"\n >{{ effectiveIcon() }}</mat-icon\n >\n } @if (label()) {\n <span class=\"acp-badge__label\">{{ label() }}</span>\n } @if (label() && effectiveValue()) {\n <span class=\"acp-badge__separator\" aria-hidden=\"true\">|</span>\n } @if (effectiveValue()) {\n <span class=\"acp-badge__value\">{{ effectiveValue() }}</span>\n } @if (trailingIconTemplate()) {\n <span matChipTrailingIcon class=\"acp-badge__trailing-icon\">\n <ng-container [ngTemplateOutlet]=\"trailingIconTemplate()!\"></ng-container>\n </span>\n } @else if (effectiveTrailingSvgIcon()) {\n <mat-icon\n matChipTrailingIcon\n class=\"acp-badge__trailing-icon\"\n [svgIcon]=\"effectiveTrailingSvgIcon()!\"\n aria-hidden=\"true\"\n ></mat-icon>\n } @else if (effectiveTrailingIcon()) {\n <mat-icon matChipTrailingIcon class=\"acp-badge__trailing-icon\" aria-hidden=\"true\"\n >{{ effectiveTrailingIcon() }}</mat-icon\n >\n } @if (removable()) {\n <button\n matChipRemove\n type=\"button\"\n class=\"acp-badge__remove\"\n aria-label=\"Remove\"\n (click)=\"onRemove($event)\"\n >\n <mat-icon aria-hidden=\"true\">cancel</mat-icon>\n </button>\n }\n </mat-chip>\n</mat-chip-set>\n", styles: [".acp-badge{--acp-badge-bg: var(--acp-badge-primary-bg, var(--mat-sys-primary));--acp-badge-fg: var(--acp-badge-primary-color, var(--mat-sys-on-primary));display:inline-flex;vertical-align:middle;max-width:100%}.acp-badge__set{display:inline-flex;max-width:100%}.acp-badge__chip.mat-mdc-chip{position:relative;max-width:100%}.acp-badge__label,.acp-badge__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acp-badge__separator{margin:0 6px;opacity:.6}.acp-badge__loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:inherit;border-radius:inherit;z-index:1}.acp-badge__loader:after{content:\"\";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:acp-badge-spin .75s linear infinite}.acp-badge__remove{cursor:pointer}.acp-badge__remove:focus-visible{outline:2px solid currentColor;outline-offset:1px}@keyframes acp-badge-spin{to{transform:rotate(360deg)}}.acp-badge.acp-badge--primary{--acp-badge-bg: var(--acp-badge-primary-bg, var(--mat-sys-primary));--acp-badge-fg: var(--acp-badge-primary-color, var(--mat-sys-on-primary))}.acp-badge.acp-badge--secondary{--acp-badge-bg: var(--acp-badge-secondary-bg, var(--mat-sys-secondary));--acp-badge-fg: var(--acp-badge-secondary-color, var(--mat-sys-on-secondary))}.acp-badge.acp-badge--tertiary{--acp-badge-bg: var(--acp-badge-tertiary-bg, var(--mat-sys-tertiary));--acp-badge-fg: var(--acp-badge-tertiary-color, var(--mat-sys-on-tertiary))}.acp-badge.acp-badge--success{--acp-badge-bg: var(--acp-badge-success-bg, light-dark(#026e00, color-mix(in oklab, #02e600 70%, white)));--acp-badge-fg: var(--acp-badge-success-fg, light-dark(#cbffb8, #013a00))}.acp-badge.acp-badge--warning{--acp-badge-bg: var(--acp-badge-warning-bg, light-dark(#964900, color-mix(in oklab, #ffb787 70%, white)));--acp-badge-fg: var(--acp-badge-warning-fg, light-dark(#ffede4, #502400))}.acp-badge.acp-badge--danger{--acp-badge-bg: var(--acp-badge-danger-bg, light-dark(#c00100, color-mix(in oklab, #ffb4a8 70%, white)));--acp-badge-fg: var(--acp-badge-danger-fg, light-dark(#ffedea, #690100))}.acp-badge.acp-badge--info{--acp-badge-bg: var(--acp-badge-info-bg, light-dark(#005cbb, color-mix(in oklab, #abc7ff 70%, white)));--acp-badge-fg: var(--acp-badge-info-fg, light-dark(#ecf0ff, #002f65))}.acp-badge.acp-badge--neutral{--acp-badge-bg: var(--acp-badge-neutral-bg, var(--mat-sys-surface-variant));--acp-badge-fg: var(--acp-badge-neutral-color, var(--mat-sys-on-surface-variant))}.acp-badge.acp-badge--neutral:not(.acp-badge--filled){--acp-badge-bg: var(--acp-badge-neutral-color, var(--mat-sys-on-surface-variant))}.acp-badge.acp-badge--custom{--acp-badge-bg: var(--acp-badge-custom-bg, var(--acp-badge-custom-bg, var(--mat-sys-surface-container)));--acp-badge-fg: var(--acp-badge-custom-fg, var(--acp-badge-custom-color, var(--mat-sys-on-surface)))}.acp-badge.acp-badge--filled .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: var(--acp-badge-bg);--mat-chip-elevated-selected-container-color: var(--acp-badge-bg);--mat-chip-label-text-color: var(--acp-badge-fg);--mat-chip-selected-label-text-color: var(--acp-badge-fg);--mat-chip-with-icon-icon-color: var(--acp-badge-fg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-fg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-fg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-fg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--outlined .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: transparent;--mat-chip-elevated-selected-container-color: transparent;--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: var(--acp-badge-bg);--mat-chip-outline-width: 1px}.acp-badge.acp-badge--soft .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: color-mix(in srgb, var(--acp-badge-bg) 12%, transparent);--mat-chip-elevated-selected-container-color: color-mix(in srgb, var(--acp-badge-bg) 12%, transparent);--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--tonal .acp-badge__chip.mat-mdc-chip{--acp-badge-tonal-fg: light-dark( color-mix(in oklab, var(--acp-badge-bg) 80%, black), var(--acp-badge-bg) );--mat-chip-elevated-container-color: color-mix(in srgb, var(--acp-badge-bg) 22%, transparent);--mat-chip-elevated-selected-container-color: color-mix(in srgb, var(--acp-badge-bg) 22%, transparent);--mat-chip-label-text-color: var(--acp-badge-tonal-fg);--mat-chip-selected-label-text-color: var(--acp-badge-tonal-fg);--mat-chip-with-icon-icon-color: var(--acp-badge-tonal-fg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-tonal-fg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-tonal-fg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-tonal-fg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--text .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: transparent;--mat-chip-elevated-selected-container-color: transparent;--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--xs .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 20px;--mat-chip-label-text-size: 10px}.acp-badge.acp-badge--xs .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 12px}.acp-badge.acp-badge--sm .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 24px;--mat-chip-label-text-size: 11px}.acp-badge.acp-badge--sm .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 14px}.acp-badge.acp-badge--md .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 28px;--mat-chip-label-text-size: 12px}.acp-badge.acp-badge--md .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 16px}.acp-badge.acp-badge--lg .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 32px;--mat-chip-label-text-size: 14px}.acp-badge.acp-badge--lg .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 18px}.acp-badge.acp-badge--rounded .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: var(--acp-badge-container-shape, var(--mat-sys-corner-small))}.acp-badge.acp-badge--pill .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: var(--acp-badge-pill-shape, var(--mat-sys-corner-full))}.acp-badge.acp-badge--square .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: 0}.acp-badge__chip.mat-mdc-chip .mat-icon{width:var(--acp-badge-icon-size, 18px);height:var(--acp-badge-icon-size, 18px);font-size:var(--acp-badge-icon-size, 18px);line-height:var(--acp-badge-icon-size, 18px)}.acp-badge.acp-badge--interactive .acp-badge__chip.mat-mdc-chip{cursor:pointer}.acp-badge.acp-badge--disabled .acp-badge__chip.mat-mdc-chip{cursor:not-allowed;opacity:.5}.acp-badge.acp-badge--loading .acp-badge__chip.mat-mdc-chip{pointer-events:none}.acp-badge.acp-badge--selected .acp-badge__chip.mat-mdc-chip.mdc-evolution-chip--selected,.acp-badge.acp-badge--selected .acp-badge__chip.mat-mdc-chip.mat-mdc-chip-highlighted{box-shadow:inset 0 0 0 2px currentColor}@media(prefers-reduced-motion:reduce){.acp-badge__loader:after{animation:none}}@media(prefers-contrast:more){.acp-badge__chip.mat-mdc-chip{outline:2px solid currentColor;outline-offset:1px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
264
293
|
}
|
|
265
294
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpBadge, decorators: [{
|
|
266
295
|
type: Component,
|
|
@@ -276,7 +305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
276
305
|
MatIconModule,
|
|
277
306
|
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
278
307
|
'[class]': 'hostClasses()',
|
|
279
|
-
}, template: "<mat-chip-set\n class=\"acp-badge__set\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n>\n <mat-chip\n class=\"acp-badge__chip\"\n [ngClass]=\"chipClasses()\"\n [disabled]=\"isDisabled()\"\n [removable]=\"removable()\"\n [highlighted]=\"isHighlighted()\"\n [value]=\"value()\"\n [routerLink]=\"routerLink()\"\n [attr.href]=\"href()\"\n (removed)=\"onRemove($event)\"\n (click)=\"onChipClick($event)\"\n >\n @if (loading()) {\n <span class=\"acp-badge__loader\" aria-hidden=\"true\"></span>\n } @if (iconTemplate()) {\n <span matChipAvatar class=\"acp-badge__avatar\">\n <ng-container [ngTemplateOutlet]=\"iconTemplate()!\"></ng-container>\n </span>\n } @else if (effectiveSvgIcon()) {\n <mat-icon\n matChipAvatar\n class=\"acp-badge__icon\"\n [svgIcon]=\"effectiveSvgIcon()!\"\n aria-hidden=\"true\"\n ></mat-icon>\n } @else if (effectiveIcon()) {\n <mat-icon matChipAvatar class=\"acp-badge__icon\" aria-hidden=\"true\"\n >{{ effectiveIcon() }}</mat-icon\n >\n } @if (label()) {\n <span class=\"acp-badge__label\">{{ label() }}</span>\n } @if (label() && effectiveValue()) {\n <span class=\"acp-badge__separator\" aria-hidden=\"true\">|</span>\n } @if (effectiveValue()) {\n <span class=\"acp-badge__value\">{{ effectiveValue() }}</span>\n } @if (trailingIconTemplate()) {\n <span matChipTrailingIcon class=\"acp-badge__trailing-icon\">\n <ng-container [ngTemplateOutlet]=\"trailingIconTemplate()!\"></ng-container>\n </span>\n } @else if (effectiveTrailingSvgIcon()) {\n <mat-icon\n matChipTrailingIcon\n class=\"acp-badge__trailing-icon\"\n [svgIcon]=\"effectiveTrailingSvgIcon()!\"\n aria-hidden=\"true\"\n ></mat-icon>\n } @else if (effectiveTrailingIcon()) {\n <mat-icon matChipTrailingIcon class=\"acp-badge__trailing-icon\" aria-hidden=\"true\"\n >{{ effectiveTrailingIcon() }}</mat-icon\n >\n } @if (removable()) {\n <button\n matChipRemove\n type=\"button\"\n class=\"acp-badge__remove\"\n aria-label=\"Remove\"\n (click)=\"onRemove($event)\"\n >\n <mat-icon aria-hidden=\"true\">cancel</mat-icon>\n </button>\n }\n </mat-chip>\n</mat-chip-set>\n", styles: [".acp-badge{--acp-badge-bg: var(--acp-badge-primary-bg, var(--mat-sys-primary));--acp-badge-fg: var(--acp-badge-primary-color, var(--mat-sys-on-primary));display:inline-flex;vertical-align:middle;max-width:100%}.acp-badge__set{display:inline-flex;max-width:100%}.acp-badge__chip.mat-mdc-chip{position:relative;max-width:100%}.acp-badge__label,.acp-badge__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acp-badge__separator{margin:0 6px;opacity:.6}.acp-badge__loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:inherit;border-radius:inherit;z-index:1}.acp-badge__loader:after{content:\"\";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:acp-badge-spin .75s linear infinite}.acp-badge__remove{cursor:pointer}.acp-badge__remove:focus-visible{outline:2px solid currentColor;outline-offset:1px}@keyframes acp-badge-spin{to{transform:rotate(360deg)}}.acp-badge.acp-badge--primary{--acp-badge-bg: var(--acp-badge-primary-bg, var(--mat-sys-primary));--acp-badge-fg: var(--acp-badge-primary-color, var(--mat-sys-on-primary))}.acp-badge.acp-badge--secondary{--acp-badge-bg: var(--acp-badge-secondary-bg, var(--mat-sys-secondary));--acp-badge-fg: var(--acp-badge-secondary-color, var(--mat-sys-on-secondary))}.acp-badge.acp-badge--tertiary{--acp-badge-bg: var(--acp-badge-tertiary-bg, var(--mat-sys-tertiary));--acp-badge-fg: var(--acp-badge-tertiary-color, var(--mat-sys-on-tertiary))}.acp-badge.acp-badge--success{--acp-badge-bg: var(--acp-badge-success-bg, light-dark(#026e00, #02e600));--acp-badge-fg: var(--acp-badge-success-fg, light-dark(#cbffb8, #013a00))}.acp-badge.acp-badge--warning{--acp-badge-bg: var(--acp-badge-warning-bg, light-dark(#964900, #ffb787));--acp-badge-fg: var(--acp-badge-warning-fg, light-dark(#ffede4, #502400))}.acp-badge.acp-badge--danger{--acp-badge-bg: var(--acp-badge-danger-bg, light-dark(#c00100, #ffb4a8));--acp-badge-fg: var(--acp-badge-danger-fg, light-dark(#ffedea, #690100))}.acp-badge.acp-badge--info{--acp-badge-bg: var(--acp-badge-info-bg, light-dark(#005cbb, #abc7ff));--acp-badge-fg: var(--acp-badge-info-fg, light-dark(#ecf0ff, #002f65))}.acp-badge.acp-badge--neutral{--acp-badge-bg: var(--acp-badge-neutral-bg, var(--mat-sys-surface-variant));--acp-badge-fg: var(--acp-badge-neutral-color, var(--mat-sys-on-surface-variant))}.acp-badge.acp-badge--custom{--acp-badge-bg: var(--acp-badge-custom-bg, var(--acp-badge-custom-bg, var(--mat-sys-surface-container)));--acp-badge-fg: var(--acp-badge-custom-fg, var(--acp-badge-custom-color, var(--mat-sys-on-surface)))}.acp-badge.acp-badge--filled .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: var(--acp-badge-bg);--mat-chip-elevated-selected-container-color: var(--acp-badge-bg);--mat-chip-label-text-color: var(--acp-badge-fg);--mat-chip-selected-label-text-color: var(--acp-badge-fg);--mat-chip-with-icon-icon-color: var(--acp-badge-fg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-fg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-fg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-fg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--outlined .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: transparent;--mat-chip-elevated-selected-container-color: transparent;--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: var(--acp-badge-bg);--mat-chip-outline-width: 1px}.acp-badge.acp-badge--soft .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: color-mix(in srgb, var(--acp-badge-bg) 12%, transparent);--mat-chip-elevated-selected-container-color: color-mix(in srgb, var(--acp-badge-bg) 12%, transparent);--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--tonal .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: color-mix(in srgb, var(--acp-badge-bg) 22%, transparent);--mat-chip-elevated-selected-container-color: color-mix(in srgb, var(--acp-badge-bg) 22%, transparent);--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--text .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: transparent;--mat-chip-elevated-selected-container-color: transparent;--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--xs .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 20px;--mat-chip-label-text-size: 10px}.acp-badge.acp-badge--xs .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 12px}.acp-badge.acp-badge--sm .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 24px;--mat-chip-label-text-size: 11px}.acp-badge.acp-badge--sm .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 14px}.acp-badge.acp-badge--md .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 28px;--mat-chip-label-text-size: 12px}.acp-badge.acp-badge--md .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 16px}.acp-badge.acp-badge--lg .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 32px;--mat-chip-label-text-size: 14px}.acp-badge.acp-badge--lg .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 18px}.acp-badge.acp-badge--rounded .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: var(--acp-badge-container-shape, var(--mat-sys-corner-small))}.acp-badge.acp-badge--pill .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: var(--acp-badge-pill-shape, var(--mat-sys-corner-full))}.acp-badge.acp-badge--square .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: 0}.acp-badge__chip.mat-mdc-chip .mat-icon{width:var(--acp-badge-icon-size, 18px);height:var(--acp-badge-icon-size, 18px);font-size:var(--acp-badge-icon-size, 18px);line-height:var(--acp-badge-icon-size, 18px)}.acp-badge.acp-badge--interactive .acp-badge__chip.mat-mdc-chip{cursor:pointer}.acp-badge.acp-badge--disabled .acp-badge__chip.mat-mdc-chip{cursor:not-allowed;opacity:.5}.acp-badge.acp-badge--loading .acp-badge__chip.mat-mdc-chip{pointer-events:none}.acp-badge.acp-badge--selected .acp-badge__chip.mat-mdc-chip.mdc-evolution-chip--selected,.acp-badge.acp-badge--selected .acp-badge__chip.mat-mdc-chip.mat-mdc-chip-highlighted{box-shadow:inset 0 0 0 2px currentColor}@media(prefers-reduced-motion:reduce){.acp-badge__loader:after{animation:none}}@media(prefers-contrast:more){.acp-badge__chip.mat-mdc-chip{outline:2px solid currentColor;outline-offset:1px}}\n"] }]
|
|
308
|
+
}, template: "<mat-chip-set\n class=\"acp-badge__set\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n>\n <mat-chip\n class=\"acp-badge__chip\"\n [ngClass]=\"chipClasses()\"\n [disabled]=\"isDisabled()\"\n [removable]=\"removable()\"\n [highlighted]=\"isHighlighted()\"\n [value]=\"value()\"\n [routerLink]=\"routerLink()\"\n [attr.href]=\"href()\"\n (removed)=\"onRemove($event)\"\n (click)=\"onChipClick($event)\"\n >\n @if (loading()) {\n <span class=\"acp-badge__loader\" aria-hidden=\"true\"></span>\n } @if (iconTemplate()) {\n <span matChipAvatar class=\"acp-badge__avatar\">\n <ng-container [ngTemplateOutlet]=\"iconTemplate()!\"></ng-container>\n </span>\n } @else if (effectiveSvgIcon()) {\n <mat-icon\n matChipAvatar\n class=\"acp-badge__icon\"\n [svgIcon]=\"effectiveSvgIcon()!\"\n aria-hidden=\"true\"\n ></mat-icon>\n } @else if (effectiveIcon()) {\n <mat-icon matChipAvatar class=\"acp-badge__icon\" aria-hidden=\"true\"\n >{{ effectiveIcon() }}</mat-icon\n >\n } @if (label()) {\n <span class=\"acp-badge__label\">{{ label() }}</span>\n } @if (label() && effectiveValue()) {\n <span class=\"acp-badge__separator\" aria-hidden=\"true\">|</span>\n } @if (effectiveValue()) {\n <span class=\"acp-badge__value\">{{ effectiveValue() }}</span>\n } @if (trailingIconTemplate()) {\n <span matChipTrailingIcon class=\"acp-badge__trailing-icon\">\n <ng-container [ngTemplateOutlet]=\"trailingIconTemplate()!\"></ng-container>\n </span>\n } @else if (effectiveTrailingSvgIcon()) {\n <mat-icon\n matChipTrailingIcon\n class=\"acp-badge__trailing-icon\"\n [svgIcon]=\"effectiveTrailingSvgIcon()!\"\n aria-hidden=\"true\"\n ></mat-icon>\n } @else if (effectiveTrailingIcon()) {\n <mat-icon matChipTrailingIcon class=\"acp-badge__trailing-icon\" aria-hidden=\"true\"\n >{{ effectiveTrailingIcon() }}</mat-icon\n >\n } @if (removable()) {\n <button\n matChipRemove\n type=\"button\"\n class=\"acp-badge__remove\"\n aria-label=\"Remove\"\n (click)=\"onRemove($event)\"\n >\n <mat-icon aria-hidden=\"true\">cancel</mat-icon>\n </button>\n }\n </mat-chip>\n</mat-chip-set>\n", styles: [".acp-badge{--acp-badge-bg: var(--acp-badge-primary-bg, var(--mat-sys-primary));--acp-badge-fg: var(--acp-badge-primary-color, var(--mat-sys-on-primary));display:inline-flex;vertical-align:middle;max-width:100%}.acp-badge__set{display:inline-flex;max-width:100%}.acp-badge__chip.mat-mdc-chip{position:relative;max-width:100%}.acp-badge__label,.acp-badge__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acp-badge__separator{margin:0 6px;opacity:.6}.acp-badge__loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:inherit;border-radius:inherit;z-index:1}.acp-badge__loader:after{content:\"\";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:acp-badge-spin .75s linear infinite}.acp-badge__remove{cursor:pointer}.acp-badge__remove:focus-visible{outline:2px solid currentColor;outline-offset:1px}@keyframes acp-badge-spin{to{transform:rotate(360deg)}}.acp-badge.acp-badge--primary{--acp-badge-bg: var(--acp-badge-primary-bg, var(--mat-sys-primary));--acp-badge-fg: var(--acp-badge-primary-color, var(--mat-sys-on-primary))}.acp-badge.acp-badge--secondary{--acp-badge-bg: var(--acp-badge-secondary-bg, var(--mat-sys-secondary));--acp-badge-fg: var(--acp-badge-secondary-color, var(--mat-sys-on-secondary))}.acp-badge.acp-badge--tertiary{--acp-badge-bg: var(--acp-badge-tertiary-bg, var(--mat-sys-tertiary));--acp-badge-fg: var(--acp-badge-tertiary-color, var(--mat-sys-on-tertiary))}.acp-badge.acp-badge--success{--acp-badge-bg: var(--acp-badge-success-bg, light-dark(#026e00, color-mix(in oklab, #02e600 70%, white)));--acp-badge-fg: var(--acp-badge-success-fg, light-dark(#cbffb8, #013a00))}.acp-badge.acp-badge--warning{--acp-badge-bg: var(--acp-badge-warning-bg, light-dark(#964900, color-mix(in oklab, #ffb787 70%, white)));--acp-badge-fg: var(--acp-badge-warning-fg, light-dark(#ffede4, #502400))}.acp-badge.acp-badge--danger{--acp-badge-bg: var(--acp-badge-danger-bg, light-dark(#c00100, color-mix(in oklab, #ffb4a8 70%, white)));--acp-badge-fg: var(--acp-badge-danger-fg, light-dark(#ffedea, #690100))}.acp-badge.acp-badge--info{--acp-badge-bg: var(--acp-badge-info-bg, light-dark(#005cbb, color-mix(in oklab, #abc7ff 70%, white)));--acp-badge-fg: var(--acp-badge-info-fg, light-dark(#ecf0ff, #002f65))}.acp-badge.acp-badge--neutral{--acp-badge-bg: var(--acp-badge-neutral-bg, var(--mat-sys-surface-variant));--acp-badge-fg: var(--acp-badge-neutral-color, var(--mat-sys-on-surface-variant))}.acp-badge.acp-badge--neutral:not(.acp-badge--filled){--acp-badge-bg: var(--acp-badge-neutral-color, var(--mat-sys-on-surface-variant))}.acp-badge.acp-badge--custom{--acp-badge-bg: var(--acp-badge-custom-bg, var(--acp-badge-custom-bg, var(--mat-sys-surface-container)));--acp-badge-fg: var(--acp-badge-custom-fg, var(--acp-badge-custom-color, var(--mat-sys-on-surface)))}.acp-badge.acp-badge--filled .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: var(--acp-badge-bg);--mat-chip-elevated-selected-container-color: var(--acp-badge-bg);--mat-chip-label-text-color: var(--acp-badge-fg);--mat-chip-selected-label-text-color: var(--acp-badge-fg);--mat-chip-with-icon-icon-color: var(--acp-badge-fg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-fg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-fg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-fg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--outlined .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: transparent;--mat-chip-elevated-selected-container-color: transparent;--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: var(--acp-badge-bg);--mat-chip-outline-width: 1px}.acp-badge.acp-badge--soft .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: color-mix(in srgb, var(--acp-badge-bg) 12%, transparent);--mat-chip-elevated-selected-container-color: color-mix(in srgb, var(--acp-badge-bg) 12%, transparent);--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--tonal .acp-badge__chip.mat-mdc-chip{--acp-badge-tonal-fg: light-dark( color-mix(in oklab, var(--acp-badge-bg) 80%, black), var(--acp-badge-bg) );--mat-chip-elevated-container-color: color-mix(in srgb, var(--acp-badge-bg) 22%, transparent);--mat-chip-elevated-selected-container-color: color-mix(in srgb, var(--acp-badge-bg) 22%, transparent);--mat-chip-label-text-color: var(--acp-badge-tonal-fg);--mat-chip-selected-label-text-color: var(--acp-badge-tonal-fg);--mat-chip-with-icon-icon-color: var(--acp-badge-tonal-fg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-tonal-fg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-tonal-fg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-tonal-fg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--text .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: transparent;--mat-chip-elevated-selected-container-color: transparent;--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--xs .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 20px;--mat-chip-label-text-size: 10px}.acp-badge.acp-badge--xs .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 12px}.acp-badge.acp-badge--sm .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 24px;--mat-chip-label-text-size: 11px}.acp-badge.acp-badge--sm .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 14px}.acp-badge.acp-badge--md .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 28px;--mat-chip-label-text-size: 12px}.acp-badge.acp-badge--md .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 16px}.acp-badge.acp-badge--lg .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 32px;--mat-chip-label-text-size: 14px}.acp-badge.acp-badge--lg .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 18px}.acp-badge.acp-badge--rounded .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: var(--acp-badge-container-shape, var(--mat-sys-corner-small))}.acp-badge.acp-badge--pill .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: var(--acp-badge-pill-shape, var(--mat-sys-corner-full))}.acp-badge.acp-badge--square .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: 0}.acp-badge__chip.mat-mdc-chip .mat-icon{width:var(--acp-badge-icon-size, 18px);height:var(--acp-badge-icon-size, 18px);font-size:var(--acp-badge-icon-size, 18px);line-height:var(--acp-badge-icon-size, 18px)}.acp-badge.acp-badge--interactive .acp-badge__chip.mat-mdc-chip{cursor:pointer}.acp-badge.acp-badge--disabled .acp-badge__chip.mat-mdc-chip{cursor:not-allowed;opacity:.5}.acp-badge.acp-badge--loading .acp-badge__chip.mat-mdc-chip{pointer-events:none}.acp-badge.acp-badge--selected .acp-badge__chip.mat-mdc-chip.mdc-evolution-chip--selected,.acp-badge.acp-badge--selected .acp-badge__chip.mat-mdc-chip.mat-mdc-chip-highlighted{box-shadow:inset 0 0 0 2px currentColor}@media(prefers-reduced-motion:reduce){.acp-badge__loader:after{animation:none}}@media(prefers-contrast:more){.acp-badge__chip.mat-mdc-chip{outline:2px solid currentColor;outline-offset:1px}}\n"] }]
|
|
280
309
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], svgIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "svgIcon", required: false }] }], trailingSvgIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingSvgIcon", required: false }] }], trend: [{ type: i0.Input, args: [{ isSignal: true, alias: "trend", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], highlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlighted", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], ariaLabelOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelOverride", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], removed: [{ type: i0.Output, args: ["removed"] }], iconTemplate: [{ type: i0.ContentChild, args: ['icon', { ...{ read: TemplateRef }, isSignal: true }] }], trailingIconTemplate: [{ type: i0.ContentChild, args: ['trailingIcon', { ...{ read: TemplateRef }, isSignal: true }] }] } });
|
|
281
310
|
|
|
282
311
|
const ACP_BADGE_COLORS = [
|
|
@@ -324,28 +353,42 @@ class AcpContextMenuService {
|
|
|
324
353
|
...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
|
|
325
354
|
contextData = signal(null, /* @ts-ignore */
|
|
326
355
|
...(ngDevMode ? [{ debugName: "contextData" }] : /* istanbul ignore next */ []));
|
|
327
|
-
|
|
356
|
+
escapeCloses = signal(true, /* @ts-ignore */
|
|
357
|
+
...(ngDevMode ? [{ debugName: "escapeCloses" }] : /* istanbul ignore next */ []));
|
|
358
|
+
outsideClickCloses = true;
|
|
359
|
+
openOwner = null;
|
|
360
|
+
/** @internal Items rendered by the open panel. */
|
|
361
|
+
activeItems = this.menuItems.asReadonly();
|
|
362
|
+
/** @internal Data passed to the open panel. */
|
|
363
|
+
activeData = this.contextData.asReadonly();
|
|
364
|
+
/** @internal Whether Escape closes the open panel. */
|
|
365
|
+
closeOnEscape = this.escapeCloses.asReadonly();
|
|
328
366
|
itemSelected$ = new Subject();
|
|
367
|
+
closed$ = new Subject();
|
|
329
368
|
constructor() {
|
|
330
|
-
|
|
331
|
-
this.setupOutsideClickHandler();
|
|
369
|
+
this.listenForOutsideClicks();
|
|
332
370
|
}
|
|
333
371
|
/**
|
|
334
372
|
* Open a context menu at the specified position
|
|
335
373
|
*/
|
|
336
|
-
async open(items, config) {
|
|
374
|
+
async open(items, config, owner) {
|
|
337
375
|
// Close any existing menu
|
|
338
376
|
this.closeAll();
|
|
339
377
|
// Dynamically import the component to avoid circular dependency
|
|
340
378
|
const { AcpContextMenuPanel } = await Promise.resolve().then(function () { return contextMenuPanel; });
|
|
379
|
+
// A newer menu may have been opened while the panel was loading
|
|
380
|
+
this.closeAll();
|
|
341
381
|
// Create overlay reference
|
|
342
382
|
const overlayRef = this.createOverlay(config);
|
|
343
|
-
//
|
|
344
|
-
overlayRef.attach(new ComponentPortal(AcpContextMenuPanel, null, this.createInjector(items, config)));
|
|
345
|
-
// Store reference
|
|
383
|
+
// Store before attaching so the panel reads the new items and data
|
|
346
384
|
this.openMenuRef.set(overlayRef);
|
|
347
385
|
this.menuItems.set(items);
|
|
348
386
|
this.contextData.set(config.data);
|
|
387
|
+
this.escapeCloses.set(config.closeOnEscape !== false);
|
|
388
|
+
this.outsideClickCloses = config.closeOnOutsideClick !== false;
|
|
389
|
+
this.openOwner = owner ?? null;
|
|
390
|
+
// Create and attach component
|
|
391
|
+
overlayRef.attach(new ComponentPortal(AcpContextMenuPanel, null, this.createInjector(items, config)));
|
|
349
392
|
// Return menu reference
|
|
350
393
|
return this.createMenuRef(overlayRef);
|
|
351
394
|
}
|
|
@@ -355,8 +398,19 @@ class AcpContextMenuService {
|
|
|
355
398
|
closeAll() {
|
|
356
399
|
const menuRef = this.openMenuRef();
|
|
357
400
|
if (menuRef) {
|
|
401
|
+
const owner = this.openOwner;
|
|
358
402
|
menuRef.dispose();
|
|
359
403
|
this.openMenuRef.set(null);
|
|
404
|
+
this.openOwner = null;
|
|
405
|
+
this.closed$.next(owner);
|
|
406
|
+
}
|
|
407
|
+
}
|
|
408
|
+
closeOverlay(overlayRef) {
|
|
409
|
+
if (this.openMenuRef() === overlayRef) {
|
|
410
|
+
this.closeAll();
|
|
411
|
+
}
|
|
412
|
+
else {
|
|
413
|
+
overlayRef.dispose();
|
|
360
414
|
}
|
|
361
415
|
}
|
|
362
416
|
/**
|
|
@@ -369,13 +423,25 @@ class AcpContextMenuService {
|
|
|
369
423
|
* Get the item selection subject
|
|
370
424
|
*/
|
|
371
425
|
getItemSelected$() {
|
|
372
|
-
return this.itemSelected$.
|
|
426
|
+
return this.itemSelected$.pipe(map(({ context }) => context));
|
|
427
|
+
}
|
|
428
|
+
/**
|
|
429
|
+
* Item selections of menus opened by the given owner
|
|
430
|
+
*/
|
|
431
|
+
itemSelectedFor$(owner) {
|
|
432
|
+
return this.itemSelected$.pipe(filter(event => event.owner === owner), map(({ context }) => context));
|
|
433
|
+
}
|
|
434
|
+
/**
|
|
435
|
+
* Emits when a menu opened by the given owner closes, for any reason
|
|
436
|
+
*/
|
|
437
|
+
closedFor$(owner) {
|
|
438
|
+
return this.closed$.pipe(filter(closedOwner => closedOwner === owner), map(() => undefined));
|
|
373
439
|
}
|
|
374
440
|
/**
|
|
375
441
|
* Emit item selection
|
|
376
442
|
*/
|
|
377
443
|
selectItem(context) {
|
|
378
|
-
this.itemSelected$.next(context);
|
|
444
|
+
this.itemSelected$.next({ context, owner: this.openOwner });
|
|
379
445
|
// Execute command if provided
|
|
380
446
|
if (context.item.command) {
|
|
381
447
|
context.item.command(context);
|
|
@@ -403,8 +469,6 @@ class AcpContextMenuService {
|
|
|
403
469
|
}
|
|
404
470
|
return this.overlay.create({
|
|
405
471
|
positionStrategy,
|
|
406
|
-
hasBackdrop: config.closeOnOutsideClick !== false,
|
|
407
|
-
backdropClass: 'cdk-overlay-transparent-backdrop',
|
|
408
472
|
panelClass: panelClasses,
|
|
409
473
|
scrollStrategy: this.overlay.scrollStrategies.block(),
|
|
410
474
|
maxHeight: '80vh',
|
|
@@ -472,46 +536,41 @@ class AcpContextMenuService {
|
|
|
472
536
|
*/
|
|
473
537
|
createMenuRef(overlayRef) {
|
|
474
538
|
return {
|
|
475
|
-
close: () =>
|
|
476
|
-
overlayRef.dispose();
|
|
477
|
-
this.openMenuRef.set(null);
|
|
478
|
-
},
|
|
539
|
+
close: () => this.closeOverlay(overlayRef),
|
|
479
540
|
updateItems: (newItems) => {
|
|
480
|
-
this.
|
|
541
|
+
if (this.openMenuRef() === overlayRef) {
|
|
542
|
+
this.menuItems.set(newItems);
|
|
543
|
+
}
|
|
481
544
|
},
|
|
482
545
|
getItems: () => this.menuItems(),
|
|
483
546
|
updateData: (data) => {
|
|
484
|
-
this.
|
|
547
|
+
if (this.openMenuRef() === overlayRef) {
|
|
548
|
+
this.contextData.set(data);
|
|
549
|
+
}
|
|
485
550
|
},
|
|
486
551
|
getData: () => this.contextData(),
|
|
487
552
|
isOpen: () => overlayRef.hasAttached(),
|
|
488
553
|
};
|
|
489
554
|
}
|
|
490
555
|
/**
|
|
491
|
-
*
|
|
556
|
+
* Single outside-click mechanism. A backdrop is not used: CDK renders overlays as popovers, so
|
|
557
|
+
* the backdrop does not cover the page, and without it a right-click on another element reaches
|
|
558
|
+
* that element directly (opening its own menu).
|
|
492
559
|
*/
|
|
493
|
-
|
|
560
|
+
listenForOutsideClicks() {
|
|
561
|
+
const onOutside = (event) => {
|
|
562
|
+
const menuRef = this.openMenuRef();
|
|
563
|
+
if (menuRef &&
|
|
564
|
+
this.outsideClickCloses &&
|
|
565
|
+
!menuRef.overlayElement.contains(event.target)) {
|
|
566
|
+
this.ngZone.run(() => this.closeAll());
|
|
567
|
+
}
|
|
568
|
+
};
|
|
494
569
|
this.ngZone.runOutsideAngular(() => {
|
|
495
|
-
this.document.addEventListener('click',
|
|
496
|
-
|
|
497
|
-
if (menuRef && !this.isClickInsideMenu(event)) {
|
|
498
|
-
this.ngZone.run(() => {
|
|
499
|
-
this.closeAll();
|
|
500
|
-
});
|
|
501
|
-
}
|
|
502
|
-
});
|
|
570
|
+
this.document.addEventListener('click', onOutside);
|
|
571
|
+
this.document.addEventListener('contextmenu', onOutside);
|
|
503
572
|
});
|
|
504
573
|
}
|
|
505
|
-
/**
|
|
506
|
-
* Check if click is inside the menu
|
|
507
|
-
*/
|
|
508
|
-
isClickInsideMenu(event) {
|
|
509
|
-
const menuRef = this.openMenuRef();
|
|
510
|
-
if (!menuRef)
|
|
511
|
-
return false;
|
|
512
|
-
const menuElement = menuRef.overlayElement;
|
|
513
|
-
return menuElement.contains(event.target);
|
|
514
|
-
}
|
|
515
574
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpContextMenuService, deps: [], target: i0.ɵɵFactoryTarget.Service });
|
|
516
575
|
static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.0", ngImport: i0, type: AcpContextMenuService });
|
|
517
576
|
}
|
|
@@ -562,12 +621,17 @@ class AcpContextMenuDirective {
|
|
|
562
621
|
/** Emitted when menu is closed */
|
|
563
622
|
contextMenuClosed = new EventEmitter();
|
|
564
623
|
constructor() {
|
|
565
|
-
//
|
|
624
|
+
// Only react to menus opened by this instance
|
|
625
|
+
this.contextMenuService
|
|
626
|
+
.itemSelectedFor$(this)
|
|
627
|
+
.pipe(takeUntil(this.destroy$))
|
|
628
|
+
.subscribe(context => this.contextMenuItemSelected.emit(context));
|
|
566
629
|
this.contextMenuService
|
|
567
|
-
.
|
|
630
|
+
.closedFor$(this)
|
|
568
631
|
.pipe(takeUntil(this.destroy$))
|
|
569
|
-
.subscribe(
|
|
570
|
-
this.
|
|
632
|
+
.subscribe(() => {
|
|
633
|
+
this.menuRef = null;
|
|
634
|
+
this.contextMenuClosed.emit();
|
|
571
635
|
});
|
|
572
636
|
}
|
|
573
637
|
ngOnDestroy() {
|
|
@@ -624,12 +688,7 @@ class AcpContextMenuDirective {
|
|
|
624
688
|
this.hoverTimeout = null;
|
|
625
689
|
}
|
|
626
690
|
const delay = this.contextMenuTrigger.hoverLeaveDelay ?? 300;
|
|
627
|
-
setTimeout(() =>
|
|
628
|
-
if (this.menuRef?.isOpen()) {
|
|
629
|
-
this.menuRef.close();
|
|
630
|
-
this.contextMenuClosed.emit();
|
|
631
|
-
}
|
|
632
|
-
}, delay);
|
|
691
|
+
setTimeout(() => this.menuRef?.close(), delay);
|
|
633
692
|
}
|
|
634
693
|
/**
|
|
635
694
|
* Open the context menu
|
|
@@ -639,7 +698,7 @@ class AcpContextMenuDirective {
|
|
|
639
698
|
return;
|
|
640
699
|
}
|
|
641
700
|
// Use provided row data or fall back to contextMenuData
|
|
642
|
-
const data = rowData
|
|
701
|
+
const data = rowData ?? this.contextMenuData;
|
|
643
702
|
const config = {
|
|
644
703
|
x,
|
|
645
704
|
y,
|
|
@@ -648,7 +707,7 @@ class AcpContextMenuDirective {
|
|
|
648
707
|
closeOnOutsideClick: this.contextMenuTrigger.closeOnOutsideClick !== false,
|
|
649
708
|
closeOnEscape: this.contextMenuTrigger.closeOnEscape !== false,
|
|
650
709
|
};
|
|
651
|
-
this.contextMenuService.open(this.acpContextMenu, config).then(menuRef => {
|
|
710
|
+
this.contextMenuService.open(this.acpContextMenu, config, this).then(menuRef => {
|
|
652
711
|
this.menuRef = menuRef;
|
|
653
712
|
this.contextMenuOpened.emit(this.menuRef);
|
|
654
713
|
});
|
|
@@ -657,10 +716,7 @@ class AcpContextMenuDirective {
|
|
|
657
716
|
* Close the context menu
|
|
658
717
|
*/
|
|
659
718
|
closeMenu() {
|
|
660
|
-
|
|
661
|
-
this.menuRef.close();
|
|
662
|
-
this.contextMenuClosed.emit();
|
|
663
|
-
}
|
|
719
|
+
this.menuRef?.close();
|
|
664
720
|
}
|
|
665
721
|
/**
|
|
666
722
|
* Update menu items
|
|
@@ -730,9 +786,12 @@ class AcpContextMenuPanel {
|
|
|
730
786
|
elementRef = inject(ElementRef);
|
|
731
787
|
menuContainer;
|
|
732
788
|
// Input signals - initialized from injected tokens
|
|
733
|
-
|
|
789
|
+
initialItems = inject(CONTEXT_MENU_ITEMS, { optional: true }) ?? [];
|
|
790
|
+
initialData = inject(CONTEXT_MENU_DATA, { optional: true }) ?? null;
|
|
791
|
+
// Read from the service so AcpContextMenuRef.updateItems/updateData reach the open panel
|
|
792
|
+
items = computed(() => this.contextMenuService.isOpen() ? this.contextMenuService.activeItems() : this.initialItems, /* @ts-ignore */
|
|
734
793
|
...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
735
|
-
contextData =
|
|
794
|
+
contextData = computed(() => this.contextMenuService.isOpen() ? this.contextMenuService.activeData() : this.initialData, /* @ts-ignore */
|
|
736
795
|
...(ngDevMode ? [{ debugName: "contextData" }] : /* istanbul ignore next */ []));
|
|
737
796
|
// State signals
|
|
738
797
|
selectedIndex = signal(-1, /* @ts-ignore */
|
|
@@ -782,8 +841,10 @@ class AcpContextMenuPanel {
|
|
|
782
841
|
this.activateSelected();
|
|
783
842
|
break;
|
|
784
843
|
case 'Escape':
|
|
785
|
-
|
|
786
|
-
|
|
844
|
+
if (this.contextMenuService.closeOnEscape()) {
|
|
845
|
+
event.preventDefault();
|
|
846
|
+
this.contextMenuService.closeAll();
|
|
847
|
+
}
|
|
787
848
|
break;
|
|
788
849
|
case 'Home':
|
|
789
850
|
event.preventDefault();
|
|
@@ -805,7 +866,8 @@ class AcpContextMenuPanel {
|
|
|
805
866
|
return;
|
|
806
867
|
}
|
|
807
868
|
if (item.children && item.children.length > 0) {
|
|
808
|
-
|
|
869
|
+
const index = this.visibleItems().indexOf(item);
|
|
870
|
+
this.expandedIndex.set(this.expandedIndex() === index ? -1 : index);
|
|
809
871
|
return;
|
|
810
872
|
}
|
|
811
873
|
const context = {
|
|
@@ -842,36 +904,34 @@ class AcpContextMenuPanel {
|
|
|
842
904
|
[item.class || '']: !!item.class,
|
|
843
905
|
};
|
|
844
906
|
}
|
|
907
|
+
isSelectable(item) {
|
|
908
|
+
return !!item && !item.separator && !item.disabled;
|
|
909
|
+
}
|
|
845
910
|
/**
|
|
846
|
-
*
|
|
911
|
+
* Move the selection to the next selectable item in the given direction, wrapping around
|
|
847
912
|
*/
|
|
848
|
-
|
|
913
|
+
moveSelection(from, direction) {
|
|
849
914
|
const items = this.visibleItems();
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
915
|
+
for (let step = 1; step <= items.length; step++) {
|
|
916
|
+
const index = (((from + direction * step) % items.length) + items.length) % items.length;
|
|
917
|
+
if (this.isSelectable(items[index])) {
|
|
918
|
+
this.selectedIndex.set(index);
|
|
919
|
+
return;
|
|
920
|
+
}
|
|
921
|
+
}
|
|
922
|
+
}
|
|
923
|
+
selectNext() {
|
|
924
|
+
this.moveSelection(this.selectedIndex(), 1);
|
|
853
925
|
}
|
|
854
|
-
/**
|
|
855
|
-
* Select previous item
|
|
856
|
-
*/
|
|
857
926
|
selectPrevious() {
|
|
858
|
-
const
|
|
859
|
-
|
|
860
|
-
const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
|
|
861
|
-
this.selectedIndex.set(prevIndex);
|
|
927
|
+
const current = this.selectedIndex();
|
|
928
|
+
this.moveSelection(current < 0 ? 0 : current, -1);
|
|
862
929
|
}
|
|
863
|
-
/**
|
|
864
|
-
* Select first item
|
|
865
|
-
*/
|
|
866
930
|
selectFirst() {
|
|
867
|
-
this.
|
|
931
|
+
this.moveSelection(-1, 1);
|
|
868
932
|
}
|
|
869
|
-
/**
|
|
870
|
-
* Select last item
|
|
871
|
-
*/
|
|
872
933
|
selectLast() {
|
|
873
|
-
|
|
874
|
-
this.selectedIndex.set(Math.max(0, items.length - 1));
|
|
934
|
+
this.moveSelection(this.visibleItems().length, -1);
|
|
875
935
|
}
|
|
876
936
|
/**
|
|
877
937
|
* Expand selected item
|
|
@@ -962,12 +1022,30 @@ class AcpContextMenu {
|
|
|
962
1022
|
/** Emitted when a menu item is selected */
|
|
963
1023
|
itemSelected = output();
|
|
964
1024
|
constructor() {
|
|
965
|
-
//
|
|
1025
|
+
// Only react to menus opened by this instance
|
|
966
1026
|
this.contextMenuService
|
|
967
|
-
.
|
|
1027
|
+
.itemSelectedFor$(this)
|
|
968
1028
|
.pipe(takeUntil(this.destroy$))
|
|
969
|
-
.subscribe(context =>
|
|
970
|
-
|
|
1029
|
+
.subscribe(context => this.itemSelected.emit(context));
|
|
1030
|
+
this.contextMenuService
|
|
1031
|
+
.closedFor$(this)
|
|
1032
|
+
.pipe(takeUntil(this.destroy$))
|
|
1033
|
+
.subscribe(() => {
|
|
1034
|
+
this.menuRef = null;
|
|
1035
|
+
this.hide.emit();
|
|
1036
|
+
});
|
|
1037
|
+
// Open the menu when the target element is right-clicked
|
|
1038
|
+
effect(onCleanup => {
|
|
1039
|
+
const target = this.target();
|
|
1040
|
+
if (!target) {
|
|
1041
|
+
return;
|
|
1042
|
+
}
|
|
1043
|
+
const listener = (event) => {
|
|
1044
|
+
event.preventDefault();
|
|
1045
|
+
this.show(event);
|
|
1046
|
+
};
|
|
1047
|
+
target.addEventListener('contextmenu', listener);
|
|
1048
|
+
onCleanup(() => target.removeEventListener('contextmenu', listener));
|
|
971
1049
|
});
|
|
972
1050
|
}
|
|
973
1051
|
ngOnDestroy() {
|
|
@@ -988,9 +1066,9 @@ class AcpContextMenu {
|
|
|
988
1066
|
.open(this.model(), {
|
|
989
1067
|
x,
|
|
990
1068
|
y,
|
|
991
|
-
data: data
|
|
1069
|
+
data: data ?? null,
|
|
992
1070
|
element: this.target(),
|
|
993
|
-
})
|
|
1071
|
+
}, this)
|
|
994
1072
|
.then(menuRef => {
|
|
995
1073
|
this.menuRef = menuRef;
|
|
996
1074
|
});
|
|
@@ -1007,9 +1085,9 @@ class AcpContextMenu {
|
|
|
1007
1085
|
.open(this.model(), {
|
|
1008
1086
|
x: rect.right,
|
|
1009
1087
|
y: rect.top,
|
|
1010
|
-
data: data
|
|
1088
|
+
data: data ?? null,
|
|
1011
1089
|
element,
|
|
1012
|
-
})
|
|
1090
|
+
}, this)
|
|
1013
1091
|
.then(menuRef => {
|
|
1014
1092
|
this.menuRef = menuRef;
|
|
1015
1093
|
});
|
|
@@ -1018,11 +1096,7 @@ class AcpContextMenu {
|
|
|
1018
1096
|
* Close the context menu
|
|
1019
1097
|
*/
|
|
1020
1098
|
close() {
|
|
1021
|
-
|
|
1022
|
-
this.menuRef.close();
|
|
1023
|
-
this.menuRef = null;
|
|
1024
|
-
this.hide.emit();
|
|
1025
|
-
}
|
|
1099
|
+
this.menuRef?.close();
|
|
1026
1100
|
}
|
|
1027
1101
|
/**
|
|
1028
1102
|
* Check if the menu is currently open
|
|
@@ -2904,7 +2978,7 @@ class AcpSearchSelect {
|
|
|
2904
2978
|
this.onChange(value);
|
|
2905
2979
|
}
|
|
2906
2980
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpSearchSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2907
|
-
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) {
|
|
2981
|
+
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) {\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 } } @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 });
|
|
2908
2982
|
}
|
|
2909
2983
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpSearchSelect, decorators: [{
|
|
2910
2984
|
type: Component,
|
|
@@ -2916,7 +2990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
2916
2990
|
MatButtonModule,
|
|
2917
2991
|
MatIconModule,
|
|
2918
2992
|
MatProgressSpinnerModule,
|
|
2919
|
-
], 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) {
|
|
2993
|
+
], 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) {\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 } } @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"] }]
|
|
2920
2994
|
}], 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 }] }] } });
|
|
2921
2995
|
|
|
2922
2996
|
class UserIcon {
|
|
@@ -3126,7 +3200,7 @@ class SvgIcon {
|
|
|
3126
3200
|
const registeredIcons = this.iconRegistry.getRegisteredIcons();
|
|
3127
3201
|
if (registeredIcons.length === 0) {
|
|
3128
3202
|
// Register default icons
|
|
3129
|
-
this.iconRegistry.registerIcons(DEFAULT_ICONS);
|
|
3203
|
+
this.iconRegistry.registerIcons(DEFAULT_ICONS$1);
|
|
3130
3204
|
// Configure with fallback icon
|
|
3131
3205
|
this.iconRegistry.configure({
|
|
3132
3206
|
fallbackIcon: FALLBACK_ICON,
|
|
@@ -3860,7 +3934,7 @@ class AcpGridCell {
|
|
|
3860
3934
|
btn.click?.(rowData, event);
|
|
3861
3935
|
}
|
|
3862
3936
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3863
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpGridCell, isStandalone: true, selector: "acp-grid-cell", inputs: { rowData: "rowData", colDef: "colDef", data: "data", summary: "summary", placeholder: "placeholder" }, outputs: { rowDataChange: "rowDataChange" }, exportAs: ["acpGridCell"], ngImport: i0, template: "@if (summary) {\n<span\n [title]=\"_getFormatterTooltip(data | cellSummary: colDef)\"\n [innerHTML]=\"_getText(data | cellSummary: colDef)\"\n></span>\n} @else {\n<!-- Custom formatting -->\n@if (colDef.formatter) {\n<span\n [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\"\n></span>\n} @else {\n<!-- Default formatting -->\n@switch (colDef.type) {\n<!-- Buttons -->\n@case ('button') { @for ( btn of colDef.buttons | cellActions : rowData : rowChangeRecord :\n$safeNavigationMigration(rowChangeRecord?.currentValue); track btn ) { @if (!btn.iif ||\nbtn.iif(rowData)) { @if (btn.children && btn.children.length > 0) { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} } @else { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n} } } } }\n<!-- Tag -->\n@case ('tag') { @if (colDef.tag && colDef.tag[_value]) {\n<mat-chip-listbox>\n <mat-chip color=\"primary\" [class]=\"'bg-' + colDef.tag[_value].color\">\n {{ colDef.tag[_value].text }}\n </mat-chip>\n</mat-chip-listbox>\n} @else { {{ _value }} } }\n<!-- Link -->\n@case ('link') {\n<a [href]=\"_value\" target=\"_blank\">{{ _value }}</a>\n}\n<!-- Image -->\n\n<!-- Image -->\n@case ('image') { @if (_value) {\n<!-- Imagen real -->\n<img class=\"acp-placeholder-image\" [src]=\"_value\" alt=\"img\" />\n} @else {\n<!-- Placeholder -->\n<div class=\"acp-placeholder-box\">\n <svg class=\"acp-placeholder-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M4 16l4.586-4.586a2 2 0 012.828 0L15 14m-12 5h16a1 1 0 001-1V5a1 1 0 00-1-1H3a1 1 0 00-1 1v14a1 1 0 001 1z\"\n />\n </svg>\n</div>\n} }\n\n<!-- Boolean -->\n@case ('boolean') {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n}\n<!-- Number -->\n@case ('number') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | number\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | number : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Currency -->\n@case ('currency') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | currency\n : $safeNavigationMigration(colDef.typeParameter?.currencyCode)\n : $safeNavigationMigration(colDef.typeParameter?.display)\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | currency : $safeNavigationMigration(colDef.typeParameter?.currencyCode) :\n $safeNavigationMigration(colDef.typeParameter?.display) :\n $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | percent\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | percent : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | date\n : $safeNavigationMigration(colDef.typeParameter?.format)\n : $safeNavigationMigration(colDef.typeParameter?.timezone)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | date : $safeNavigationMigration(colDef.typeParameter?.format) :\n $safeNavigationMigration(colDef.typeParameter?.timezone) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n @if (btn.icon) {\n <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n } @else if (btn.fontIcon) {\n <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\"></mat-icon>\n } @else if (btn.svgIcon) {\n <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\"></mat-icon>\n }\n</ng-template>\n", styles: [".acp-placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#4b5563;font-size:.85rem;gap:8px}.acp-placeholder-icon{width:32px;height:32px;color:#3b82f6}.acp-placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: AcpGridMenu, selector: "acp-grid-menu", inputs: ["items", "data"], exportAs: ["acpGridMenu"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AcpGridCellActionsPipe, name: "cellActions" }, { kind: "pipe", type: AcpGridCellSummaryPipe, name: "cellSummary" }, { kind: "pipe", type: AcpGridCellActionDisablePipe, name: "cellActionDisable" }, { kind: "pipe", type: AcpGridCellActionTooltipPipe, name: "cellActionTooltip" }, { kind: "pipe", type: AcpGridCellActionBadgePipe, name: "cellActionBadge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3937
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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 : (colDef.typeParameter?.display ?? 'symbol')\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | currency : $safeNavigationMigration(colDef.typeParameter?.currencyCode) :\n (colDef.typeParameter?.display ?? 'symbol') :\n $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | percent\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | percent : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | date\n : $safeNavigationMigration(colDef.typeParameter?.format)\n : $safeNavigationMigration(colDef.typeParameter?.timezone)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | date : $safeNavigationMigration(colDef.typeParameter?.format) :\n $safeNavigationMigration(colDef.typeParameter?.timezone) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n @if (btn.icon) {\n <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n } @else if (btn.fontIcon) {\n <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\"></mat-icon>\n } @else if (btn.svgIcon) {\n <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\"></mat-icon>\n }\n</ng-template>\n", styles: [".acp-placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#4b5563;font-size:.85rem;gap:8px}.acp-placeholder-icon{width:32px;height:32px;color:#3b82f6}.acp-placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: AcpGridMenu, selector: "acp-grid-menu", inputs: ["items", "data"], exportAs: ["acpGridMenu"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AcpGridCellActionsPipe, name: "cellActions" }, { kind: "pipe", type: AcpGridCellSummaryPipe, name: "cellSummary" }, { kind: "pipe", type: AcpGridCellActionDisablePipe, name: "cellActionDisable" }, { kind: "pipe", type: AcpGridCellActionTooltipPipe, name: "cellActionTooltip" }, { kind: "pipe", type: AcpGridCellActionBadgePipe, name: "cellActionBadge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3864
3938
|
}
|
|
3865
3939
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCell, decorators: [{
|
|
3866
3940
|
type: Component,
|
|
@@ -3886,7 +3960,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
3886
3960
|
AcpGridCellActionTooltipPipe,
|
|
3887
3961
|
AcpGridCellActionBadgePipe,
|
|
3888
3962
|
AcpGridMenu,
|
|
3889
|
-
], template: "@if (summary) {\n<span\n [title]=\"_getFormatterTooltip(data | cellSummary: colDef)\"\n [innerHTML]=\"_getText(data | cellSummary: colDef)\"\n></span>\n} @else {\n<!-- Custom formatting -->\n@if (colDef.formatter) {\n<span\n [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\"\n></span>\n} @else {\n<!-- Default formatting -->\n@switch (colDef.type) {\n<!-- Buttons -->\n@case ('button') { @for ( btn of colDef.buttons | cellActions : rowData : rowChangeRecord :\n$safeNavigationMigration(rowChangeRecord?.currentValue); track btn ) { @if (!btn.iif ||\nbtn.iif(rowData)) { @if (btn.children && btn.children.length > 0) { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} } @else { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n} } } } }\n<!-- Tag -->\n@case ('tag') { @if (colDef.tag && colDef.tag[_value]) {\n<mat-chip-listbox>\n <mat-chip color=\"primary\" [class]=\"'bg-' + colDef.tag[_value].color\">\n {{ colDef.tag[_value].text }}\n </mat-chip>\n</mat-chip-listbox>\n} @else { {{ _value }} } }\n<!-- Link -->\n@case ('link') {\n<a [href]=\"_value\" target=\"_blank\">{{ _value }}</a>\n}\n<!-- Image -->\n\n<!-- Image -->\n@case ('image') { @if (_value) {\n<!-- Imagen real -->\n<img class=\"acp-placeholder-image\" [src]=\"_value\" alt=\"img\" />\n} @else {\n<!-- Placeholder -->\n<div class=\"acp-placeholder-box\">\n <svg class=\"acp-placeholder-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M4 16l4.586-4.586a2 2 0 012.828 0L15 14m-12 5h16a1 1 0 001-1V5a1 1 0 00-1-1H3a1 1 0 00-1 1v14a1 1 0 001 1z\"\n />\n </svg>\n</div>\n} }\n\n<!-- Boolean -->\n@case ('boolean') {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n}\n<!-- Number -->\n@case ('number') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | number\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | number : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Currency -->\n@case ('currency') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | currency\n : $safeNavigationMigration(colDef.typeParameter?.currencyCode)\n : $safeNavigationMigration(colDef.typeParameter?.display)\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | currency : $safeNavigationMigration(colDef.typeParameter?.currencyCode) :\n $safeNavigationMigration(colDef.typeParameter?.display) :\n $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | percent\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | percent : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | date\n : $safeNavigationMigration(colDef.typeParameter?.format)\n : $safeNavigationMigration(colDef.typeParameter?.timezone)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | date : $safeNavigationMigration(colDef.typeParameter?.format) :\n $safeNavigationMigration(colDef.typeParameter?.timezone) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n @if (btn.icon) {\n <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n } @else if (btn.fontIcon) {\n <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\"></mat-icon>\n } @else if (btn.svgIcon) {\n <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\"></mat-icon>\n }\n</ng-template>\n", styles: [".acp-placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#4b5563;font-size:.85rem;gap:8px}.acp-placeholder-icon{width:32px;height:32px;color:#3b82f6}.acp-placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"] }]
|
|
3963
|
+
], 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 : (colDef.typeParameter?.display ?? 'symbol')\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | currency : $safeNavigationMigration(colDef.typeParameter?.currencyCode) :\n (colDef.typeParameter?.display ?? 'symbol') :\n $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | percent\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | percent : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | date\n : $safeNavigationMigration(colDef.typeParameter?.format)\n : $safeNavigationMigration(colDef.typeParameter?.timezone)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | date : $safeNavigationMigration(colDef.typeParameter?.format) :\n $safeNavigationMigration(colDef.typeParameter?.timezone) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n @if (btn.icon) {\n <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n } @else if (btn.fontIcon) {\n <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\"></mat-icon>\n } @else if (btn.svgIcon) {\n <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\"></mat-icon>\n }\n</ng-template>\n", styles: [".acp-placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#4b5563;font-size:.85rem;gap:8px}.acp-placeholder-icon{width:32px;height:32px;color:#3b82f6}.acp-placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"] }]
|
|
3890
3964
|
}], propDecorators: { rowData: [{
|
|
3891
3965
|
type: Input
|
|
3892
3966
|
}], colDef: [{
|
|
@@ -4801,7 +4875,7 @@ class AcpGridColumnMenu {
|
|
|
4801
4875
|
sortable = true;
|
|
4802
4876
|
pinnable = true;
|
|
4803
4877
|
get buttonText() {
|
|
4804
|
-
const defaultText =
|
|
4878
|
+
const defaultText = this.selectableChecked === 'show' ? 'Columnas' : 'Columnas ocultas';
|
|
4805
4879
|
return this._buttonText ? this._buttonText : defaultText;
|
|
4806
4880
|
}
|
|
4807
4881
|
set buttonText(value) {
|
|
@@ -5198,11 +5272,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
5198
5272
|
|
|
5199
5273
|
const DATA_GRID_DEFAULT_OPTIONS = new InjectionToken('acp-grid-default-options');
|
|
5200
5274
|
class DataGrid {
|
|
5201
|
-
|
|
5275
|
+
/** Densidad de la tabla. `'normal'` está obsoleto y equivale a `'medium'`. */
|
|
5276
|
+
size = input('medium', /* @ts-ignore */
|
|
5202
5277
|
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
5278
|
+
_size = computed(() => this.size() === 'normal' ? 'medium' : this.size(), /* @ts-ignore */
|
|
5279
|
+
...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
|
|
5203
5280
|
_animationsDisabled = _animationsDisabled();
|
|
5204
5281
|
_utils = inject(DataGridUtils);
|
|
5205
5282
|
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
5283
|
+
_elementRef = inject(ElementRef);
|
|
5284
|
+
_injector = inject(Injector);
|
|
5285
|
+
static _nextId = 0;
|
|
5286
|
+
/** Unique id of the grid, used for row ids and `aria-controls`. */
|
|
5287
|
+
gridId = `acp-grid-${DataGrid._nextId++}`;
|
|
5288
|
+
_activeRow = signal(null, /* @ts-ignore */
|
|
5289
|
+
...(ngDevMode ? [{ debugName: "_activeRow" }] : /* istanbul ignore next */ []));
|
|
5290
|
+
_focusFirstRowOnRender = false;
|
|
5291
|
+
/** @internal Set by `acpGridNavigationFor` to activate the first row when data changes. */
|
|
5292
|
+
_activateFirstRowOnDataChange = false;
|
|
5206
5293
|
_defaultOptions = inject(DATA_GRID_DEFAULT_OPTIONS, {
|
|
5207
5294
|
optional: true,
|
|
5208
5295
|
});
|
|
@@ -5379,12 +5466,23 @@ class DataGrid {
|
|
|
5379
5466
|
noResultText = this._defaultOptions?.noResultText ?? 'No records found';
|
|
5380
5467
|
/** The template for the empty data. */
|
|
5381
5468
|
noResultTemplate;
|
|
5382
|
-
// Keyboard Navigation
|
|
5383
|
-
|
|
5384
|
-
|
|
5385
|
-
|
|
5469
|
+
// ===== Keyboard Navigation =====
|
|
5470
|
+
/**
|
|
5471
|
+
* Whether rows can be navigated with the keyboard: arrows, Home/End, PageUp/PageDown,
|
|
5472
|
+
* Enter (same as a click), Space (toggle selection) and Ctrl+A (select all).
|
|
5473
|
+
*/
|
|
5474
|
+
keyboardNavigation = input(this._defaultOptions?.keyboardNavigation ?? true, { ...(ngDevMode ? { debugName: "keyboardNavigation" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5475
|
+
/** Index (within the rendered page) of the row to mark as active. */
|
|
5386
5476
|
highlightedRowIndex = input(-1, /* @ts-ignore */
|
|
5387
5477
|
...(ngDevMode ? [{ debugName: "highlightedRowIndex" }] : /* istanbul ignore next */ []));
|
|
5478
|
+
_highlightedRowEffect = effect(() => {
|
|
5479
|
+
const index = this.highlightedRowIndex();
|
|
5480
|
+
if (index >= 0) {
|
|
5481
|
+
untracked(() => afterNextRender(() => this.setActiveRow(index), { injector: this._injector }));
|
|
5482
|
+
}
|
|
5483
|
+
}, /* @ts-ignore */
|
|
5484
|
+
...(ngDevMode ? [{ debugName: "_highlightedRowEffect" }] : /* istanbul ignore next */ []));
|
|
5485
|
+
/** Event emitted when the active row changes. */
|
|
5388
5486
|
focusedRowChange = output();
|
|
5389
5487
|
get _hasNoResult() {
|
|
5390
5488
|
return (!this.dataSource.data || this.dataSource.data.length === 0) && !this.loading;
|
|
@@ -5475,6 +5573,7 @@ class DataGrid {
|
|
|
5475
5573
|
// Only scroll top with data change
|
|
5476
5574
|
if (changes['data']) {
|
|
5477
5575
|
this.scrollTop(0);
|
|
5576
|
+
this._syncActiveRowWithData();
|
|
5478
5577
|
}
|
|
5479
5578
|
}
|
|
5480
5579
|
ngAfterViewInit() {
|
|
@@ -5518,6 +5617,192 @@ class DataGrid {
|
|
|
5518
5617
|
.reduce((acc, cur) => acc + Number.parseFloat(cur.width || '80px'), 0) + 'px';
|
|
5519
5618
|
});
|
|
5520
5619
|
}
|
|
5620
|
+
// ===== Keyboard Navigation =====
|
|
5621
|
+
/** Rows currently rendered (after sorting and front-end paging). */
|
|
5622
|
+
get renderedRows() {
|
|
5623
|
+
return this.dataSource.connect().value;
|
|
5624
|
+
}
|
|
5625
|
+
/** Index of the active row within the rendered rows, or -1. */
|
|
5626
|
+
get activeRowIndex() {
|
|
5627
|
+
const row = this._activeRow();
|
|
5628
|
+
return row === null ? -1 : this.renderedRows.indexOf(row);
|
|
5629
|
+
}
|
|
5630
|
+
/** The active row, or `null`. */
|
|
5631
|
+
get activeRow() {
|
|
5632
|
+
return this.activeRowIndex === -1 ? null : this._activeRow();
|
|
5633
|
+
}
|
|
5634
|
+
/**
|
|
5635
|
+
* Marks a rendered row as active.
|
|
5636
|
+
* @param focus Whether to move the browser focus to the row.
|
|
5637
|
+
*/
|
|
5638
|
+
setActiveRow(index, focus = false) {
|
|
5639
|
+
const rows = this.renderedRows;
|
|
5640
|
+
if (rows.length === 0) {
|
|
5641
|
+
this._setActiveRow(null);
|
|
5642
|
+
return;
|
|
5643
|
+
}
|
|
5644
|
+
const target = Math.min(Math.max(index, 0), rows.length - 1);
|
|
5645
|
+
this._setActiveRow(rows[target]);
|
|
5646
|
+
const element = this._rowElement(target);
|
|
5647
|
+
if (focus) {
|
|
5648
|
+
element?.focus({ preventScroll: true });
|
|
5649
|
+
}
|
|
5650
|
+
element?.scrollIntoView?.({ block: 'nearest' });
|
|
5651
|
+
}
|
|
5652
|
+
/** Moves the active row by `delta` rows; starts at the first row when none is active. */
|
|
5653
|
+
moveActiveRow(delta, focus = false) {
|
|
5654
|
+
const current = this.activeRowIndex;
|
|
5655
|
+
this.setActiveRow(current === -1 ? 0 : current + delta, focus);
|
|
5656
|
+
}
|
|
5657
|
+
/** Runs the click behavior (selection and `rowClick`) on the active row. */
|
|
5658
|
+
activateActiveRow(event) {
|
|
5659
|
+
const index = this.activeRowIndex;
|
|
5660
|
+
if (index === -1) {
|
|
5661
|
+
return false;
|
|
5662
|
+
}
|
|
5663
|
+
this._selectRow(event, this.renderedRows[index], index);
|
|
5664
|
+
return true;
|
|
5665
|
+
}
|
|
5666
|
+
/** Goes to the next page, if there is one, and activates its first row. */
|
|
5667
|
+
nextPage(focus = false) {
|
|
5668
|
+
this._changePage(1, focus);
|
|
5669
|
+
}
|
|
5670
|
+
/** Goes to the previous page, if there is one, and activates its first row. */
|
|
5671
|
+
previousPage(focus = false) {
|
|
5672
|
+
this._changePage(-1, focus);
|
|
5673
|
+
}
|
|
5674
|
+
_rowId(index) {
|
|
5675
|
+
return `${this.gridId}-row-${index}`;
|
|
5676
|
+
}
|
|
5677
|
+
_activeRowId() {
|
|
5678
|
+
const index = this.activeRowIndex;
|
|
5679
|
+
return index === -1 ? null : this._rowId(index);
|
|
5680
|
+
}
|
|
5681
|
+
_isActiveRow(row) {
|
|
5682
|
+
return this._activeRow() === row;
|
|
5683
|
+
}
|
|
5684
|
+
_rowTabIndex(row, index) {
|
|
5685
|
+
if (!this.keyboardNavigation()) {
|
|
5686
|
+
return null;
|
|
5687
|
+
}
|
|
5688
|
+
const activeIndex = this.activeRowIndex;
|
|
5689
|
+
return (activeIndex === -1 ? index === 0 : this._activeRow() === row) ? 0 : -1;
|
|
5690
|
+
}
|
|
5691
|
+
_onRowFocus(row) {
|
|
5692
|
+
if (this.keyboardNavigation() && this._activeRow() !== row) {
|
|
5693
|
+
this._setActiveRow(row);
|
|
5694
|
+
}
|
|
5695
|
+
}
|
|
5696
|
+
_setActiveRow(row) {
|
|
5697
|
+
if (this._activeRow() === row) {
|
|
5698
|
+
return;
|
|
5699
|
+
}
|
|
5700
|
+
this._activeRow.set(row);
|
|
5701
|
+
if (row !== null) {
|
|
5702
|
+
this.focusedRowChange.emit({ row, index: this.renderedRows.indexOf(row) });
|
|
5703
|
+
}
|
|
5704
|
+
}
|
|
5705
|
+
_rowElement(index) {
|
|
5706
|
+
return this._elementRef.nativeElement.querySelector(`#${this._rowId(index)}`);
|
|
5707
|
+
}
|
|
5708
|
+
_changePage(delta, focus) {
|
|
5709
|
+
const paginator = this.paginator;
|
|
5710
|
+
if (!this.showPaginator || !paginator) {
|
|
5711
|
+
return;
|
|
5712
|
+
}
|
|
5713
|
+
const canMove = delta === 1 ? paginator.hasNextPage() : paginator.hasPreviousPage();
|
|
5714
|
+
if (!canMove) {
|
|
5715
|
+
return;
|
|
5716
|
+
}
|
|
5717
|
+
this._focusFirstRowOnRender = focus;
|
|
5718
|
+
this._setActiveRow(null);
|
|
5719
|
+
if (delta === 1) {
|
|
5720
|
+
paginator.nextPage();
|
|
5721
|
+
}
|
|
5722
|
+
else {
|
|
5723
|
+
paginator.previousPage();
|
|
5724
|
+
}
|
|
5725
|
+
// Front-end paging re-renders synchronously; server paging activates on the next data change
|
|
5726
|
+
if (this.pageOnFront) {
|
|
5727
|
+
this._activateFirstRowAfterRender();
|
|
5728
|
+
}
|
|
5729
|
+
}
|
|
5730
|
+
_syncActiveRowWithData() {
|
|
5731
|
+
const rows = this.renderedRows;
|
|
5732
|
+
if (this._focusFirstRowOnRender || this._activateFirstRowOnDataChange) {
|
|
5733
|
+
this._activateFirstRowAfterRender();
|
|
5734
|
+
}
|
|
5735
|
+
else {
|
|
5736
|
+
const activeRow = this._activeRow();
|
|
5737
|
+
if (activeRow !== null && !rows.includes(activeRow)) {
|
|
5738
|
+
this._activeRow.set(null);
|
|
5739
|
+
}
|
|
5740
|
+
}
|
|
5741
|
+
}
|
|
5742
|
+
_activateFirstRowAfterRender() {
|
|
5743
|
+
const focus = this._focusFirstRowOnRender;
|
|
5744
|
+
this._focusFirstRowOnRender = false;
|
|
5745
|
+
this._activeRow.set(null);
|
|
5746
|
+
afterNextRender(() => this.setActiveRow(0, focus), { injector: this._injector });
|
|
5747
|
+
}
|
|
5748
|
+
_isEditableTarget(target) {
|
|
5749
|
+
if (target instanceof HTMLInputElement) {
|
|
5750
|
+
return !['checkbox', 'radio', 'button', 'submit', 'reset'].includes(target.type);
|
|
5751
|
+
}
|
|
5752
|
+
return (target instanceof HTMLElement &&
|
|
5753
|
+
(target.isContentEditable || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT'));
|
|
5754
|
+
}
|
|
5755
|
+
_handleRowKeyDown(event, row, index) {
|
|
5756
|
+
if (this._isEditableTarget(event.target)) {
|
|
5757
|
+
return;
|
|
5758
|
+
}
|
|
5759
|
+
const onRow = event.target === event.currentTarget;
|
|
5760
|
+
const rowCount = this.renderedRows.length;
|
|
5761
|
+
switch (event.key) {
|
|
5762
|
+
case 'ArrowDown':
|
|
5763
|
+
this.setActiveRow(index + 1, true);
|
|
5764
|
+
break;
|
|
5765
|
+
case 'ArrowUp':
|
|
5766
|
+
this.setActiveRow(index - 1, true);
|
|
5767
|
+
break;
|
|
5768
|
+
case 'Home':
|
|
5769
|
+
this.setActiveRow(0, true);
|
|
5770
|
+
break;
|
|
5771
|
+
case 'End':
|
|
5772
|
+
this.setActiveRow(rowCount - 1, true);
|
|
5773
|
+
break;
|
|
5774
|
+
case 'PageDown':
|
|
5775
|
+
this.nextPage(true);
|
|
5776
|
+
break;
|
|
5777
|
+
case 'PageUp':
|
|
5778
|
+
this.previousPage(true);
|
|
5779
|
+
break;
|
|
5780
|
+
case 'Enter':
|
|
5781
|
+
if (!onRow) {
|
|
5782
|
+
return;
|
|
5783
|
+
}
|
|
5784
|
+
this._selectRow(event, row, index);
|
|
5785
|
+
break;
|
|
5786
|
+
case ' ':
|
|
5787
|
+
if (!onRow || !this.rowSelectable || this.rowSelectionFormatter.disabled?.(row, index)) {
|
|
5788
|
+
return;
|
|
5789
|
+
}
|
|
5790
|
+
this._toggleNormalCheckbox(row);
|
|
5791
|
+
break;
|
|
5792
|
+
case 'a':
|
|
5793
|
+
case 'A':
|
|
5794
|
+
if (!(event.ctrlKey || event.metaKey) || !this.rowSelectable || !this.multiSelectable) {
|
|
5795
|
+
return;
|
|
5796
|
+
}
|
|
5797
|
+
if (!this._isAllSelected()) {
|
|
5798
|
+
this._toggleMasterCheckbox();
|
|
5799
|
+
}
|
|
5800
|
+
break;
|
|
5801
|
+
default:
|
|
5802
|
+
return;
|
|
5803
|
+
}
|
|
5804
|
+
event.preventDefault();
|
|
5805
|
+
}
|
|
5521
5806
|
_getIndex(index, dataIndex) {
|
|
5522
5807
|
return index === undefined ? dataIndex : index;
|
|
5523
5808
|
}
|
|
@@ -5604,6 +5889,9 @@ class DataGrid {
|
|
|
5604
5889
|
}
|
|
5605
5890
|
_onRowKeyDown(event, row, index) {
|
|
5606
5891
|
this.rowKeyDown.emit({ event, row, index });
|
|
5892
|
+
if (this.keyboardNavigation() && !event.defaultPrevented) {
|
|
5893
|
+
this._handleRowKeyDown(event, row, index);
|
|
5894
|
+
}
|
|
5607
5895
|
}
|
|
5608
5896
|
_onRowKeyUp(event, row, index) {
|
|
5609
5897
|
this.rowKeyUp.emit({ event, row, index });
|
|
@@ -5660,7 +5948,7 @@ class DataGrid {
|
|
|
5660
5948
|
this.rowContextMenu.emit({ event, rowData, index });
|
|
5661
5949
|
}
|
|
5662
5950
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5663
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGrid, isStandalone: true, selector: "acp-data-grid", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: false, isRequired: false, transformFunction: null }, columnResizable: { classPropertyName: "columnResizable", publicName: "columnResizable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, emptyValuePlaceholder: { classPropertyName: "emptyValuePlaceholder", publicName: "emptyValuePlaceholder", isSignal: false, isRequired: false, transformFunction: null }, pageOnFront: { classPropertyName: "pageOnFront", publicName: "pageOnFront", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, pageDisabled: { classPropertyName: "pageDisabled", publicName: "pageDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showFirstLastButtons: { classPropertyName: "showFirstLastButtons", publicName: "showFirstLastButtons", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: false, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: false, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, paginationTemplate: { classPropertyName: "paginationTemplate", publicName: "paginationTemplate", isSignal: false, isRequired: false, transformFunction: null }, sortOnFront: { classPropertyName: "sortOnFront", publicName: "sortOnFront", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sortActive: { classPropertyName: "sortActive", publicName: "sortActive", isSignal: false, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: false, isRequired: false, transformFunction: null }, sortDisableClear: { classPropertyName: "sortDisableClear", publicName: "sortDisableClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sortDisabled: { classPropertyName: "sortDisabled", publicName: "sortDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sortStart: { classPropertyName: "sortStart", publicName: "sortStart", isSignal: false, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rowStriped: { classPropertyName: "rowStriped", publicName: "rowStriped", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, expansionTemplate: { classPropertyName: "expansionTemplate", publicName: "expansionTemplate", isSignal: false, isRequired: false, transformFunction: null }, closeOthersOnExpand: { classPropertyName: "closeOthersOnExpand", publicName: "closeOthersOnExpand", isSignal: true, isRequired: false, transformFunction: null }, multiSelectable: { classPropertyName: "multiSelectable", publicName: "multiSelectable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, multiSelectionWithClick: { classPropertyName: "multiSelectionWithClick", publicName: "multiSelectionWithClick", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rowSelectable: { classPropertyName: "rowSelectable", publicName: "rowSelectable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, hideRowSelectionCheckbox: { classPropertyName: "hideRowSelectionCheckbox", publicName: "hideRowSelectionCheckbox", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, disableRowClickSelection: { classPropertyName: "disableRowClickSelection", publicName: "disableRowClickSelection", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rowSelectionFormatter: { classPropertyName: "rowSelectionFormatter", publicName: "rowSelectionFormatter", isSignal: false, isRequired: false, transformFunction: null }, rowClassFormatter: { classPropertyName: "rowClassFormatter", publicName: "rowClassFormatter", isSignal: false, isRequired: false, transformFunction: null }, rowSelected: { classPropertyName: "rowSelected", publicName: "rowSelected", isSignal: false, isRequired: false, transformFunction: null }, cellSelectable: { classPropertyName: "cellSelectable", publicName: "cellSelectable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, toolbarTitle: { classPropertyName: "toolbarTitle", publicName: "toolbarTitle", isSignal: false, isRequired: false, transformFunction: null }, toolbarTemplate: { classPropertyName: "toolbarTemplate", publicName: "toolbarTemplate", isSignal: false, isRequired: false, transformFunction: null }, columnHideable: { classPropertyName: "columnHideable", publicName: "columnHideable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnHideableChecked: { classPropertyName: "columnHideableChecked", publicName: "columnHideableChecked", isSignal: false, isRequired: false, transformFunction: null }, columnSortable: { classPropertyName: "columnSortable", publicName: "columnSortable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnPinnable: { classPropertyName: "columnPinnable", publicName: "columnPinnable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnPinOptions: { classPropertyName: "columnPinOptions", publicName: "columnPinOptions", isSignal: false, isRequired: false, transformFunction: null }, showColumnMenuButton: { classPropertyName: "showColumnMenuButton", publicName: "showColumnMenuButton", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnMenuButtonText: { classPropertyName: "columnMenuButtonText", publicName: "columnMenuButtonText", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonType: { classPropertyName: "columnMenuButtonType", publicName: "columnMenuButtonType", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonColor: { classPropertyName: "columnMenuButtonColor", publicName: "columnMenuButtonColor", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonClass: { classPropertyName: "columnMenuButtonClass", publicName: "columnMenuButtonClass", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonIcon: { classPropertyName: "columnMenuButtonIcon", publicName: "columnMenuButtonIcon", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonFontIcon: { classPropertyName: "columnMenuButtonFontIcon", publicName: "columnMenuButtonFontIcon", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonSvgIcon: { classPropertyName: "columnMenuButtonSvgIcon", publicName: "columnMenuButtonSvgIcon", isSignal: false, isRequired: false, transformFunction: null }, showColumnMenuHeader: { classPropertyName: "showColumnMenuHeader", publicName: "showColumnMenuHeader", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnMenuHeaderText: { classPropertyName: "columnMenuHeaderText", publicName: "columnMenuHeaderText", isSignal: false, isRequired: false, transformFunction: null }, columnMenuHeaderTemplate: { classPropertyName: "columnMenuHeaderTemplate", publicName: "columnMenuHeaderTemplate", isSignal: false, isRequired: false, transformFunction: null }, showColumnMenuFooter: { classPropertyName: "showColumnMenuFooter", publicName: "showColumnMenuFooter", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnMenuFooterText: { classPropertyName: "columnMenuFooterText", publicName: "columnMenuFooterText", isSignal: false, isRequired: false, transformFunction: null }, columnMenuFooterTemplate: { classPropertyName: "columnMenuFooterTemplate", publicName: "columnMenuFooterTemplate", isSignal: false, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: false, isRequired: false, transformFunction: null }, noResultTemplate: { classPropertyName: "noResultTemplate", publicName: "noResultTemplate", isSignal: false, isRequired: false, transformFunction: null }, keyboardNavigation: { classPropertyName: "keyboardNavigation", publicName: "keyboardNavigation", isSignal: true, isRequired: false, transformFunction: null }, highlightedRowIndex: { classPropertyName: "highlightedRowIndex", publicName: "highlightedRowIndex", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: false, isRequired: false, transformFunction: null }, headerExtraTemplate: { classPropertyName: "headerExtraTemplate", publicName: "headerExtraTemplate", isSignal: false, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: false, isRequired: false, transformFunction: null }, useContentRowTemplate: { classPropertyName: "useContentRowTemplate", publicName: "useContentRowTemplate", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, useContentHeaderRowTemplate: { classPropertyName: "useContentHeaderRowTemplate", publicName: "useContentHeaderRowTemplate", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, useContentFooterRowTemplate: { classPropertyName: "useContentFooterRowTemplate", publicName: "useContentFooterRowTemplate", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showSummary: { classPropertyName: "showSummary", publicName: "showSummary", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, summaryTemplate: { classPropertyName: "summaryTemplate", publicName: "summaryTemplate", isSignal: false, isRequired: false, transformFunction: null }, showSidebar: { classPropertyName: "showSidebar", publicName: "showSidebar", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sidebarTemplate: { classPropertyName: "sidebarTemplate", publicName: "sidebarTemplate", isSignal: false, isRequired: false, transformFunction: null }, showStatusbar: { classPropertyName: "showStatusbar", publicName: "showStatusbar", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, statusbarTemplate: { classPropertyName: "statusbarTemplate", publicName: "statusbarTemplate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { page: "page", sortChange: "sortChange", rowClick: "rowClick", rowContextMenu: "rowContextMenu", expansionChange: "expansionChange", rowSelectedChange: "rowSelectedChange", checkboxKeyDown: "checkboxKeyDown", checkboxKeyUp: "checkboxKeyUp", checkboxKeyPress: "checkboxKeyPress", rowKeyDown: "rowKeyDown", rowKeyUp: "rowKeyUp", rowKeyPress: "rowKeyPress", cellSelectedChange: "cellSelectedChange", columnChange: "columnChange", focusedRowChange: "focusedRowChange" }, host: { properties: { "class.acp-grid-animations-enabled": "!_animationsDisabled", "class.acp-grid-size-small": "size() === \"small\"", "class.acp-grid-size-medium": "size() === \"medium\"", "class.acp-grid-size-normal": "size() === \"normal\"", "attr.tabindex": "0" }, classAttribute: "acp-grid" }, queries: [{ propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "headerRowDefs", predicate: MatHeaderRowDef }, { propertyName: "footerRowDefs", predicate: MatFooterRow }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "columnResize", first: true, predicate: ColumnResize, descendants: true }, { propertyName: "columnMenu", first: true, predicate: AcpGridColumnMenu, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], exportAs: ["dataGrid"], usesOnChanges: true, ngImport: i0, template: "<!-- Progress bar-->\n@if (loading) {\n<div class=\"acp-grid-progress\">\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n</div>\n}\n\n<!-- Toolbar -->\n@if (showToolbar) {\n<div class=\"acp-grid-toolbar\">\n <div class=\"acp-grid-toolbar-content\">\n @if (toolbarTemplate) {\n <ng-template [ngTemplateOutlet]=\"toolbarTemplate\"></ng-template>\n } @else { @if (toolbarTitle) {\n <div class=\"acp-grid-toolbar-title\">{{ toolbarTitle }}</div>\n } }\n </div>\n <div class=\"acp-grid-toolbar-actions\">\n @if (showColumnMenuButton) {\n <acp-grid-column-menu\n [columns]=\"columns\"\n [buttonText]=\"columnMenuButtonText\"\n [buttonType]=\"columnMenuButtonType\"\n [buttonColor]=\"columnMenuButtonColor\"\n [buttonClass]=\"columnMenuButtonClass\"\n [buttonIcon]=\"columnMenuButtonIcon\"\n [buttonFontIcon]=\"columnMenuButtonFontIcon\"\n [buttonSvgIcon]=\"columnMenuButtonSvgIcon\"\n [selectable]=\"columnHideable\"\n [selectableChecked]=\"columnHideableChecked\"\n [sortable]=\"columnSortable\"\n [pinnable]=\"columnPinnable\"\n [showHeader]=\"showColumnMenuHeader\"\n [headerText]=\"columnMenuHeaderText\"\n [headerTemplate]=\"columnMenuHeaderTemplate\"\n [showFooter]=\"showColumnMenuFooter\"\n [footerText]=\"columnMenuFooterText\"\n [footerTemplate]=\"columnMenuFooterTemplate\"\n [pinOptions]=\"columnPinOptions\"\n (columnChange)=\"_onColumnChange($event)\"\n ></acp-grid-column-menu>\n }\n </div>\n</div>\n}\n\n<div class=\"acp-grid-main acp-grid-layout\">\n <!-- Table content -->\n <div class=\"acp-grid-content acp-grid-layout\">\n <div #tableContainer class=\"mat-table-container\" [class.mat-table-with-data]=\"!_hasNoResult\">\n @if (!columnResizable) {\n <table\n mat-table\n [class.mat-table-hover]=\"rowHover\"\n [class.mat-table-striped]=\"rowStriped\"\n [class.mat-table-expandable]=\"expandable\"\n [dataSource]=\"dataSource\"\n [multiTemplateDataRows]=\"expandable\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n [matSortDisableClear]=\"sortDisableClear\"\n [matSortDisabled]=\"sortDisabled\"\n [matSortStart]=\"sortStart\"\n (matSortChange)=\"_onSortChange($event)\"\n [trackBy]=\"trackBy\"\n >\n @if (rowSelectable && !hideRowSelectionCheckbox) {\n <ng-container matColumnDef=\"acpGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"acp-grid-checkbox-cell\">\n @if (multiSelectable) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n (change)=\"$event ? _toggleMasterCheckbox() : null\"\n ></mat-checkbox>\n }\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n class=\"acp-grid-checkbox-cell\"\n >\n @if ( !( rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row,\n _getIndex(index, dataIndex)) ) ) {\n <mat-checkbox\n [disabled]=\"\n rowSelectionFormatter.disabled &&\n rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\n \"\n [checked]=\"rowSelection.isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\"\n (keydown)=\"_onCheckboxKeyDown($event)\"\n (keyup)=\"_onCheckboxKeyUp($event)\"\n (keypress)=\"_onCheckboxKeyPress($event)\"\n ></mat-checkbox>\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"acp-grid-checkbox-cell\"></td>\n </ng-container>\n } @for (col of columns; track col.field) {\n <ng-container\n [matColumnDef]=\"col.field\"\n [sticky]=\"col.pinned === 'left'\"\n [stickyEnd]=\"col.pinned === 'right'\"\n >\n <th\n mat-header-cell\n *matHeaderCellDef\n [class]=\"col | colClass\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n <div class=\"mat-header-cell-inner\">\n @if (headerTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(headerTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else {\n <div\n [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n [arrowPosition]=\"$safeNavigationMigration(col.sortProp?.arrowPosition)!\"\n [start]=\"$safeNavigationMigration(col.sortProp?.start)!\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n }\n <span>{{ col.header | toObservable | async }}</span>\n @if (col.sortable) {\n <svg\n class=\"acp-grid-icon mat-sort-header-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n </svg>\n }\n </div>\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTplBase\"\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\"\n ></ng-template>\n } }\n </div>\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [class]=\"\n col\n | colClass\n : row\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n acpGridSelectableCell\n [cellSelectable]=\"cellSelectable\"\n (cellSelectedChange)=\"_selectCell($event, row, col)\"\n >\n @if (cellTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(cellTemplate)?.[col.field]) |\n isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.cellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.cellTemplate!\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.showExpand) {\n <button\n class=\"acp-grid-row-expand-button\"\n matIconButton\n acpGridExpansionToggle\n type=\"button\"\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex)\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-row-expand-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n }\n <acp-grid-cell\n [rowData]=\"row\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n (rowDataChange)=\"_onRowDataChange($event)\"\n ></acp-grid-cell>\n } } }\n </td>\n <td\n mat-footer-cell\n *matFooterCellDef\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n } @if (summaryTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(summaryTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: _getColData(data, col),\n colData: _getColData(data, col),\n colDef: col,\n }\"\n ></ng-template>\n } @else {\n <acp-grid-cell\n [summary]=\"true\"\n [data]=\"data\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n ></acp-grid-cell>\n } }\n </td>\n </ng-container>\n } @if (!useContentHeaderRowTemplate) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (!useContentRowTemplate) {\n <tr\n mat-row\n *matRowDef=\"\n let row;\n let index = index;\n let dataIndex = dataIndex;\n columns: displayedColumns\n \"\n [class]=\"row | rowClass: index : dataIndex : rowClassFormatter\"\n [class.selected]=\"rowSelection.isSelected(row)\"\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\"\n (keydown)=\"_onRowKeyDown($event, row, _getIndex(index, dataIndex))\"\n (keyup)=\"_onRowKeyUp($event, row, _getIndex(index, dataIndex))\"\n (keypress)=\"_onRowKeyPress($event, row, _getIndex(index, dataIndex))\"\n ></tr>\n } @if (_whetherShowSummary) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (expandable) {\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"acpGridExpansionColumnDef\">\n <td\n mat-cell\n *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns.length\"\n >\n <div class=\"acp-grid-expansion-detail-wrapper\">\n <div class=\"acp-grid-expansion-detail\">\n <ng-template\n [ngTemplateOutlet]=\"expansionTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: dataIndex,\n expanded: expansionRowStates[dataIndex].expanded,\n }\"\n ></ng-template>\n </div>\n </div>\n </td>\n </ng-container>\n <tr\n mat-row\n *matRowDef=\"\n let row;\n columns: ['acpGridExpansionColumnDef'];\n let dataIndex = dataIndex\n \"\n class=\"acp-grid-expansion\"\n [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n ></tr>\n }\n </table>\n } @else {\n <!-- TODO: Use flexbox-based mat-table -->\n <table\n mat-table\n columnResize\n [class.mat-table-hover]=\"rowHover\"\n [class.mat-table-striped]=\"rowStriped\"\n [class.mat-table-expandable]=\"expandable\"\n [dataSource]=\"dataSource\"\n [multiTemplateDataRows]=\"expandable\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n [matSortDisableClear]=\"sortDisableClear\"\n [matSortDisabled]=\"sortDisabled\"\n [matSortStart]=\"sortStart\"\n (matSortChange)=\"_onSortChange($event)\"\n [trackBy]=\"trackBy\"\n >\n @if (rowSelectable && !hideRowSelectionCheckbox) {\n <ng-container matColumnDef=\"acpGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"acp-grid-checkbox-cell\">\n @if (multiSelectable) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n (change)=\"$event ? _toggleMasterCheckbox() : null\"\n ></mat-checkbox>\n }\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n class=\"acp-grid-checkbox-cell\"\n >\n @if ( !( rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row,\n _getIndex(index, dataIndex)) ) ) {\n <mat-checkbox\n [disabled]=\"\n rowSelectionFormatter.disabled &&\n rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\n \"\n [checked]=\"rowSelection.isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\"\n (keydown)=\"_onCheckboxKeyDown($event)\"\n (keyup)=\"_onCheckboxKeyUp($event)\"\n (keypress)=\"_onCheckboxKeyPress($event)\"\n ></mat-checkbox>\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"acp-grid-checkbox-cell\"></td>\n </ng-container>\n } @for (col of columns; track col.field) {\n <ng-container\n [matColumnDef]=\"col.field\"\n [sticky]=\"col.pinned === 'left'\"\n [stickyEnd]=\"col.pinned === 'right'\"\n >\n <th\n mat-header-cell\n *matHeaderCellDef\n [class]=\"col | colClass\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n [resizable]=\"col.resizable\"\n [matResizableMinWidthPx]=\"col.minWidth\"\n [matResizableMaxWidthPx]=\"col.maxWidth\"\n >\n <div class=\"mat-header-cell-inner\">\n @if (headerTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(headerTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else {\n <div\n [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n [arrowPosition]=\"$safeNavigationMigration(col.sortProp?.arrowPosition)!\"\n [start]=\"$safeNavigationMigration(col.sortProp?.start)!\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n }\n <span>{{ col.header | toObservable | async }}</span>\n @if (col.sortable) {\n <svg\n class=\"acp-grid-icon mat-sort-header-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n </svg>\n }\n </div>\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTplBase\"\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\"\n ></ng-template>\n } }\n </div>\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [class]=\"\n col\n | colClass\n : row\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n acpGridSelectableCell\n [cellSelectable]=\"cellSelectable\"\n (cellSelectedChange)=\"_selectCell($event, row, col)\"\n >\n @if (cellTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(cellTemplate)?.[col.field]) |\n isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.cellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.cellTemplate!\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.showExpand) {\n <button\n class=\"acp-grid-row-expand-button\"\n matIconButton\n acpGridExpansionToggle\n type=\"button\"\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex)\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-row-expand-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n }\n <acp-grid-cell\n [rowData]=\"row\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n (rowDataChange)=\"_onRowDataChange($event)\"\n ></acp-grid-cell>\n } } }\n </td>\n <td\n mat-footer-cell\n *matFooterCellDef\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n } @if (summaryTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(summaryTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: _getColData(data, col),\n colData: _getColData(data, col),\n colDef: col,\n }\"\n ></ng-template>\n } @else {\n <acp-grid-cell\n [summary]=\"true\"\n [data]=\"data\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n ></acp-grid-cell>\n } }\n </td>\n </ng-container>\n } @if (!useContentHeaderRowTemplate) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (!useContentRowTemplate) {\n <tr\n mat-row\n *matRowDef=\"\n let row;\n let index = index;\n let dataIndex = dataIndex;\n columns: displayedColumns\n \"\n [class]=\"row | rowClass: index : dataIndex : rowClassFormatter\"\n [class.selected]=\"rowSelection.isSelected(row)\"\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\"\n (keydown)=\"_onRowKeyDown($event, row, _getIndex(index, dataIndex))\"\n (keyup)=\"_onRowKeyUp($event, row, _getIndex(index, dataIndex))\"\n (keypress)=\"_onRowKeyPress($event, row, _getIndex(index, dataIndex))\"\n ></tr>\n } @if (_whetherShowSummary) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (expandable) {\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"acpGridExpansionColumnDef\">\n <td\n mat-cell\n *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns.length\"\n >\n <div class=\"acp-grid-expansion-detail-wrapper\">\n <div class=\"acp-grid-expansion-detail\">\n <ng-template\n [ngTemplateOutlet]=\"expansionTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: dataIndex,\n expanded: expansionRowStates[dataIndex].expanded,\n }\"\n ></ng-template>\n </div>\n </div>\n </td>\n </ng-container>\n <tr\n mat-row\n *matRowDef=\"\n let row;\n columns: ['acpGridExpansionColumnDef'];\n let dataIndex = dataIndex\n \"\n class=\"acp-grid-expansion\"\n [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n ></tr>\n }\n </table>\n }\n </div>\n\n <!-- No result -->\n @if (_hasNoResult) {\n <div class=\"acp-grid-no-result\">\n @if (noResultTemplate) {\n <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\n } @else { {{ noResultText }} }\n </div>\n }\n </div>\n\n <!-- Tool sidebar -->\n @if (showSidebar) {\n <div class=\"acp-grid-sidebar\">\n @if (sidebarTemplate) {\n <ng-template [ngTemplateOutlet]=\"sidebarTemplate\"></ng-template>\n }\n </div>\n }\n</div>\n\n<div class=\"acp-grid-footer\">\n <!-- Status Bar -->\n @if (showStatusbar) {\n <div class=\"acp-grid-statusbar\">\n @if (statusbarTemplate) {\n <ng-template [ngTemplateOutlet]=\"statusbarTemplate\"></ng-template>\n }\n </div>\n }\n\n <!-- Pagination -->\n <div class=\"acp-grid-pagination\">\n @if (paginationTemplate) {\n <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\n } @else {\n <mat-paginator\n [class.mat-paginator-hidden]=\"!showPaginator\"\n [showFirstLastButtons]=\"showFirstLastButtons\"\n [length]=\"length\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [hidePageSize]=\"hidePageSize\"\n (page)=\"_onPage($event)\"\n [disabled]=\"pageDisabled\"\n ></mat-paginator>\n }\n </div>\n</div>\n\n<!-- Header template for extra content -->\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\n @if (headerExtraTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(headerExtraTemplate)?.[col.field]) | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } }\n</ng-template>\n", styles: [".mat-column-resize-table.cdk-column-resize-with-resized-column{table-layout:fixed}.mat-column-resize-flex .mat-mdc-header-cell,.mat-column-resize-flex .mat-mdc-cell{box-sizing:border-box;min-width:32px}.mat-mdc-header-cell{position:relative}.mat-resizable{box-sizing:border-box}.mat-mdc-header-cell:not(.mat-resizable):after,.mat-resizable-handle{position:absolute;bottom:0;top:0;right:0;width:1px;background:transparent;transition:background .3s cubic-bezier(.55,0,.55,.2)}.mat-mdc-header-cell:not(.mat-resizable):after{content:\"\"}[dir=rtl] .mat-mdc-header-cell:not(.mat-resizable):after,[dir=rtl] .mat-resizable-handle{left:0;right:auto}[dir=rtl] .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-header-cell,[dir=rtl] .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell{border-left:none}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell{border-right:none}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell:not(.mat-resizable):after{background-color:var(--acp-grid-resizable-handle-disabled-background-color, var(--mat-sys-outline-variant))}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle{background-color:var(--acp-grid-resizable-handle-hover-background-color, var(--mat-sys-primary))}.mat-resizable.cdk-resizable-overlay-thumb-active>.mat-resizable-handle{opacity:0;transition:none}.mat-resizable-handle:focus,.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus{outline:none;background-color:var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary))}.mat-column-resize-overlay-thumb{background:transparent;cursor:col-resize;width:100%;height:100%;transition:background .3s cubic-bezier(.55,0,.55,.2);-webkit-user-select:none;user-select:none}.mat-column-resize-overlay-thumb:active{will-change:transform;background:linear-gradient(90deg,transparent,transparent 7px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 7px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 9px,transparent 9px,transparent)}.mat-column-resize-overlay-thumb:active .mat-column-resize-overlay-thumb-top{background:linear-gradient(90deg,transparent,transparent 4px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 4px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 12px,transparent 12px,transparent)}.mat-column-resize-overlay-thumb-top{width:100%}.acp-grid{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant));border-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium))}.acp-grid .mat-mdc-table{--mat-table-row-item-outline-color: var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid .mat-mdc-table.mat-table-striped .mat-row-odd{background-color:var(--acp-grid-table-row-striped-background-color, var(--mat-sys-surface-container))}.acp-grid .mat-mdc-table.mat-table-hover .mat-mdc-row:hover{background-color:var(--acp-grid-table-row-hover-background-color, var(--mat-sys-secondary-container))}.acp-grid .mat-mdc-table.mat-table-hover .mat-mdc-row.selected:hover{background-color:var(--acp-grid-table-row-selected-hover-background-color, var(--mat-sys-primary-container))}.acp-grid .mat-mdc-table .mat-mdc-row.selected{background-color:var(--acp-grid-table-row-selected-background-color, var(--mat-sys-secondary-container))}.acp-grid .mat-mdc-table .mat-mdc-cell.selected{box-shadow:inset 0 0 0 1px var(--acp-grid-table-cell-selected-outline-color, var(--mat-sys-primary))}.acp-grid .mat-table-container{overflow:auto}.acp-grid .mat-table-container.mat-table-with-data{flex:1}.acp-grid .mat-mdc-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-header-cell:not(.acp-grid-checkbox-cell),.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-footer-cell:not(.acp-grid-checkbox-cell),.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-cell:not(.acp-grid-checkbox-cell){min-width:var(--acp-grid-table-cell-min-width, 80px)}.acp-grid .mat-table-sticky-left{border-right:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .acp-grid .mat-table-sticky-left{border-right-width:0;border-left:1px solid var(--mat-table-row-item-outline-color)}.acp-grid .mat-table-sticky-right{border-left:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .acp-grid .mat-table-sticky-right{border-left-width:0;border-right:1px solid var(--mat-table-row-item-outline-color)}.acp-grid .mat-mdc-footer-cell{border-top:1px solid var(--mat-table-row-item-outline-color);background-color:var(--acp-grid-table-footer-background-color, var(--mat-sys-surface-container))}.acp-grid .mat-mdc-row.acp-grid-expansion{height:0;overflow:hidden}.acp-grid .mat-mdc-row.acp-grid-expansion .mat-mdc-cell{padding-top:0;padding-bottom:0}.acp-grid .mat-mdc-row.acp-grid-expansion.collapsed .mat-mdc-cell{border-bottom-width:0}.acp-grid .mat-sort-header-icon{margin-left:4px}[dir=rtl] .acp-grid .mat-sort-header-icon{margin-left:0;margin-right:4px}.acp-grid .mat-header-cell-inner{display:inline-flex;align-items:center;vertical-align:middle}.acp-grid .mat-mdc-paginator{border-top:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant));border-bottom-left-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium));border-bottom-right-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium))}.acp-grid .mat-paginator-hidden{display:none}.acp-grid .acp-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mat-checkbox-state-layer-size, 40px)) / 2)}.acp-grid-progress{position:absolute;top:0;z-index:120;width:100%}.acp-grid-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-bottom:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-toolbar-content{flex:1;width:0;padding:0 8px}.acp-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.acp-grid-content{flex-direction:column;width:0}.acp-grid-sidebar{max-width:50%;border-left:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}[dir=rtl] .acp-grid-sidebar{border-left-width:0;border-right:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-footer{position:relative;z-index:1}.acp-grid-statusbar{display:flex;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-top:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.acp-grid-expansion-placeholder{display:inline-block;vertical-align:middle;width:var(--mat-icon-button-state-layer-size, var(--acp-grid-row-expand-button-size, 40px));height:var(--mat-icon-button-state-layer-size, var(--acp-grid-row-expand-button-size, 40px))}.acp-grid-expansion-detail-wrapper{display:grid;grid-template-rows:0fr;grid-template-columns:100%;padding:0;overflow:hidden}.acp-grid-expansion.expanded .acp-grid-expansion-detail-wrapper{grid-template-rows:1fr;padding:calc((var(--mat-table-row-item-container-height, 52px) - 20px) / 2) 0}.acp-grid-expansion-detail{min-height:0}.acp-grid-animations-enabled .acp-grid-expansion-detail-wrapper{transition:all 225ms cubic-bezier(.4,0,.2,1)}.acp-grid-row-expand-button.expanded .acp-grid-row-expand-icon{transform:rotate(90deg)}.acp-grid-row-expand-button.mat-mdc-icon-button,.acp-grid-row-expand-button+acp-grid-cell{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: MatResizable, selector: "mat-header-cell[resizable], th[mat-header-cell][resizable]", inputs: ["matResizableMinWidthPx", "matResizableMaxWidthPx", "resizable"] }, { kind: "directive", type: MatColumnResize, selector: "table[mat-table][columnResize]" }, { kind: "component", type: AcpGridCell, selector: "acp-grid-cell", inputs: ["rowData", "colDef", "data", "summary", "placeholder"], outputs: ["rowDataChange"], exportAs: ["acpGridCell"] }, { kind: "component", type: AcpGridColumnMenu, selector: "acp-grid-column-menu", inputs: ["columns", "selectable", "selectableChecked", "sortable", "pinnable", "buttonText", "buttonType", "buttonColor", "buttonClass", "buttonIcon", "buttonFontIcon", "buttonSvgIcon", "showHeader", "headerText", "headerTemplate", "showFooter", "footerText", "footerTemplate", "pinOptions"], outputs: ["columnChange"], exportAs: ["acpGridColumnMenu"] }, { kind: "directive", type: AcpGridSelectableCell, selector: "[acpGridSelectableCell]", inputs: ["cellSelectable"], outputs: ["cellSelectedChange"] }, { kind: "directive", type: AcpGridExpansionToggle, selector: "[acpGridExpansionToggle]", inputs: ["opened", "expandableRow", "expansionRowTpl"], outputs: ["openedChange", "toggleChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AcpIsTemplateRefPipe, name: "isTemplateRef" }, { kind: "pipe", type: AcpGridColClassPipe, name: "colClass" }, { kind: "pipe", type: AcpGridRowClassPipe, name: "rowClass" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5951
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGrid, isStandalone: true, selector: "acp-data-grid", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: false, isRequired: false, transformFunction: null }, columnResizable: { classPropertyName: "columnResizable", publicName: "columnResizable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, emptyValuePlaceholder: { classPropertyName: "emptyValuePlaceholder", publicName: "emptyValuePlaceholder", isSignal: false, isRequired: false, transformFunction: null }, pageOnFront: { classPropertyName: "pageOnFront", publicName: "pageOnFront", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, pageDisabled: { classPropertyName: "pageDisabled", publicName: "pageDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showFirstLastButtons: { classPropertyName: "showFirstLastButtons", publicName: "showFirstLastButtons", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: false, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: false, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, paginationTemplate: { classPropertyName: "paginationTemplate", publicName: "paginationTemplate", isSignal: false, isRequired: false, transformFunction: null }, sortOnFront: { classPropertyName: "sortOnFront", publicName: "sortOnFront", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sortActive: { classPropertyName: "sortActive", publicName: "sortActive", isSignal: false, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: false, isRequired: false, transformFunction: null }, sortDisableClear: { classPropertyName: "sortDisableClear", publicName: "sortDisableClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sortDisabled: { classPropertyName: "sortDisabled", publicName: "sortDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sortStart: { classPropertyName: "sortStart", publicName: "sortStart", isSignal: false, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rowStriped: { classPropertyName: "rowStriped", publicName: "rowStriped", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, expansionTemplate: { classPropertyName: "expansionTemplate", publicName: "expansionTemplate", isSignal: false, isRequired: false, transformFunction: null }, closeOthersOnExpand: { classPropertyName: "closeOthersOnExpand", publicName: "closeOthersOnExpand", isSignal: true, isRequired: false, transformFunction: null }, multiSelectable: { classPropertyName: "multiSelectable", publicName: "multiSelectable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, multiSelectionWithClick: { classPropertyName: "multiSelectionWithClick", publicName: "multiSelectionWithClick", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rowSelectable: { classPropertyName: "rowSelectable", publicName: "rowSelectable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, hideRowSelectionCheckbox: { classPropertyName: "hideRowSelectionCheckbox", publicName: "hideRowSelectionCheckbox", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, disableRowClickSelection: { classPropertyName: "disableRowClickSelection", publicName: "disableRowClickSelection", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rowSelectionFormatter: { classPropertyName: "rowSelectionFormatter", publicName: "rowSelectionFormatter", isSignal: false, isRequired: false, transformFunction: null }, rowClassFormatter: { classPropertyName: "rowClassFormatter", publicName: "rowClassFormatter", isSignal: false, isRequired: false, transformFunction: null }, rowSelected: { classPropertyName: "rowSelected", publicName: "rowSelected", isSignal: false, isRequired: false, transformFunction: null }, cellSelectable: { classPropertyName: "cellSelectable", publicName: "cellSelectable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, toolbarTitle: { classPropertyName: "toolbarTitle", publicName: "toolbarTitle", isSignal: false, isRequired: false, transformFunction: null }, toolbarTemplate: { classPropertyName: "toolbarTemplate", publicName: "toolbarTemplate", isSignal: false, isRequired: false, transformFunction: null }, columnHideable: { classPropertyName: "columnHideable", publicName: "columnHideable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnHideableChecked: { classPropertyName: "columnHideableChecked", publicName: "columnHideableChecked", isSignal: false, isRequired: false, transformFunction: null }, columnSortable: { classPropertyName: "columnSortable", publicName: "columnSortable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnPinnable: { classPropertyName: "columnPinnable", publicName: "columnPinnable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnPinOptions: { classPropertyName: "columnPinOptions", publicName: "columnPinOptions", isSignal: false, isRequired: false, transformFunction: null }, showColumnMenuButton: { classPropertyName: "showColumnMenuButton", publicName: "showColumnMenuButton", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnMenuButtonText: { classPropertyName: "columnMenuButtonText", publicName: "columnMenuButtonText", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonType: { classPropertyName: "columnMenuButtonType", publicName: "columnMenuButtonType", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonColor: { classPropertyName: "columnMenuButtonColor", publicName: "columnMenuButtonColor", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonClass: { classPropertyName: "columnMenuButtonClass", publicName: "columnMenuButtonClass", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonIcon: { classPropertyName: "columnMenuButtonIcon", publicName: "columnMenuButtonIcon", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonFontIcon: { classPropertyName: "columnMenuButtonFontIcon", publicName: "columnMenuButtonFontIcon", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonSvgIcon: { classPropertyName: "columnMenuButtonSvgIcon", publicName: "columnMenuButtonSvgIcon", isSignal: false, isRequired: false, transformFunction: null }, showColumnMenuHeader: { classPropertyName: "showColumnMenuHeader", publicName: "showColumnMenuHeader", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnMenuHeaderText: { classPropertyName: "columnMenuHeaderText", publicName: "columnMenuHeaderText", isSignal: false, isRequired: false, transformFunction: null }, columnMenuHeaderTemplate: { classPropertyName: "columnMenuHeaderTemplate", publicName: "columnMenuHeaderTemplate", isSignal: false, isRequired: false, transformFunction: null }, showColumnMenuFooter: { classPropertyName: "showColumnMenuFooter", publicName: "showColumnMenuFooter", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnMenuFooterText: { classPropertyName: "columnMenuFooterText", publicName: "columnMenuFooterText", isSignal: false, isRequired: false, transformFunction: null }, columnMenuFooterTemplate: { classPropertyName: "columnMenuFooterTemplate", publicName: "columnMenuFooterTemplate", isSignal: false, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: false, isRequired: false, transformFunction: null }, noResultTemplate: { classPropertyName: "noResultTemplate", publicName: "noResultTemplate", isSignal: false, isRequired: false, transformFunction: null }, keyboardNavigation: { classPropertyName: "keyboardNavigation", publicName: "keyboardNavigation", isSignal: true, isRequired: false, transformFunction: null }, highlightedRowIndex: { classPropertyName: "highlightedRowIndex", publicName: "highlightedRowIndex", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: false, isRequired: false, transformFunction: null }, headerExtraTemplate: { classPropertyName: "headerExtraTemplate", publicName: "headerExtraTemplate", isSignal: false, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: false, isRequired: false, transformFunction: null }, useContentRowTemplate: { classPropertyName: "useContentRowTemplate", publicName: "useContentRowTemplate", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, useContentHeaderRowTemplate: { classPropertyName: "useContentHeaderRowTemplate", publicName: "useContentHeaderRowTemplate", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, useContentFooterRowTemplate: { classPropertyName: "useContentFooterRowTemplate", publicName: "useContentFooterRowTemplate", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showSummary: { classPropertyName: "showSummary", publicName: "showSummary", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, summaryTemplate: { classPropertyName: "summaryTemplate", publicName: "summaryTemplate", isSignal: false, isRequired: false, transformFunction: null }, showSidebar: { classPropertyName: "showSidebar", publicName: "showSidebar", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sidebarTemplate: { classPropertyName: "sidebarTemplate", publicName: "sidebarTemplate", isSignal: false, isRequired: false, transformFunction: null }, showStatusbar: { classPropertyName: "showStatusbar", publicName: "showStatusbar", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, statusbarTemplate: { classPropertyName: "statusbarTemplate", publicName: "statusbarTemplate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { page: "page", sortChange: "sortChange", rowClick: "rowClick", rowContextMenu: "rowContextMenu", expansionChange: "expansionChange", rowSelectedChange: "rowSelectedChange", checkboxKeyDown: "checkboxKeyDown", checkboxKeyUp: "checkboxKeyUp", checkboxKeyPress: "checkboxKeyPress", rowKeyDown: "rowKeyDown", rowKeyUp: "rowKeyUp", rowKeyPress: "rowKeyPress", cellSelectedChange: "cellSelectedChange", columnChange: "columnChange", focusedRowChange: "focusedRowChange" }, host: { properties: { "class.acp-grid-animations-enabled": "!_animationsDisabled", "class.acp-grid-size-small": "_size() === \"small\"", "class.acp-grid-size-medium": "_size() === \"medium\"", "class.acp-grid-size-large": "_size() === \"large\"", "attr.tabindex": "keyboardNavigation() ? null : 0" }, classAttribute: "acp-grid" }, queries: [{ propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "headerRowDefs", predicate: MatHeaderRowDef }, { propertyName: "footerRowDefs", predicate: MatFooterRow }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "columnResize", first: true, predicate: ColumnResize, descendants: true }, { propertyName: "columnMenu", first: true, predicate: AcpGridColumnMenu, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], exportAs: ["dataGrid"], usesOnChanges: true, ngImport: i0, template: "<!-- Progress bar-->\n@if (loading) {\n<div class=\"acp-grid-progress\">\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n</div>\n}\n\n<!-- Toolbar -->\n@if (showToolbar) {\n<div class=\"acp-grid-toolbar\">\n <div class=\"acp-grid-toolbar-content\">\n @if (toolbarTemplate) {\n <ng-template [ngTemplateOutlet]=\"toolbarTemplate\"></ng-template>\n } @else { @if (toolbarTitle) {\n <div class=\"acp-grid-toolbar-title\">{{ toolbarTitle }}</div>\n } }\n </div>\n <div class=\"acp-grid-toolbar-actions\">\n @if (showColumnMenuButton) {\n <acp-grid-column-menu\n [columns]=\"columns\"\n [buttonText]=\"columnMenuButtonText\"\n [buttonType]=\"columnMenuButtonType\"\n [buttonColor]=\"columnMenuButtonColor\"\n [buttonClass]=\"columnMenuButtonClass\"\n [buttonIcon]=\"columnMenuButtonIcon\"\n [buttonFontIcon]=\"columnMenuButtonFontIcon\"\n [buttonSvgIcon]=\"columnMenuButtonSvgIcon\"\n [selectable]=\"columnHideable\"\n [selectableChecked]=\"columnHideableChecked\"\n [sortable]=\"columnSortable\"\n [pinnable]=\"columnPinnable\"\n [showHeader]=\"showColumnMenuHeader\"\n [headerText]=\"columnMenuHeaderText\"\n [headerTemplate]=\"columnMenuHeaderTemplate\"\n [showFooter]=\"showColumnMenuFooter\"\n [footerText]=\"columnMenuFooterText\"\n [footerTemplate]=\"columnMenuFooterTemplate\"\n [pinOptions]=\"columnPinOptions\"\n (columnChange)=\"_onColumnChange($event)\"\n ></acp-grid-column-menu>\n }\n </div>\n</div>\n}\n\n<div class=\"acp-grid-main acp-grid-layout\">\n <!-- Table content -->\n <div class=\"acp-grid-content acp-grid-layout\">\n <div #tableContainer class=\"mat-table-container\" [class.mat-table-with-data]=\"!_hasNoResult\">\n @if (!columnResizable) {\n <table\n mat-table\n [class.mat-table-hover]=\"rowHover\"\n [class.mat-table-striped]=\"rowStriped\"\n [class.mat-table-expandable]=\"expandable\"\n [dataSource]=\"dataSource\"\n [multiTemplateDataRows]=\"expandable\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n [matSortDisableClear]=\"sortDisableClear\"\n [matSortDisabled]=\"sortDisabled\"\n [matSortStart]=\"sortStart\"\n (matSortChange)=\"_onSortChange($event)\"\n [trackBy]=\"trackBy\"\n >\n @if (rowSelectable && !hideRowSelectionCheckbox) {\n <ng-container matColumnDef=\"acpGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"acp-grid-checkbox-cell\">\n @if (multiSelectable) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n (change)=\"$event ? _toggleMasterCheckbox() : null\"\n ></mat-checkbox>\n }\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n class=\"acp-grid-checkbox-cell\"\n >\n @if ( !( rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row,\n _getIndex(index, dataIndex)) ) ) {\n <mat-checkbox\n [disabled]=\"\n rowSelectionFormatter.disabled &&\n rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\n \"\n [checked]=\"rowSelection.isSelected(row)\"\n [tabIndex]=\"keyboardNavigation() ? -1 : 0\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\"\n (keydown)=\"_onCheckboxKeyDown($event)\"\n (keyup)=\"_onCheckboxKeyUp($event)\"\n (keypress)=\"_onCheckboxKeyPress($event)\"\n ></mat-checkbox>\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"acp-grid-checkbox-cell\"></td>\n </ng-container>\n } @for (col of columns; track col.field) {\n <ng-container\n [matColumnDef]=\"col.field\"\n [sticky]=\"col.pinned === 'left'\"\n [stickyEnd]=\"col.pinned === 'right'\"\n >\n <th\n mat-header-cell\n *matHeaderCellDef\n [class]=\"col | colClass\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n <div class=\"mat-header-cell-inner\">\n @if (headerTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(headerTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else {\n <div\n [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n [arrowPosition]=\"$safeNavigationMigration(col.sortProp?.arrowPosition)!\"\n [start]=\"$safeNavigationMigration(col.sortProp?.start)!\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n }\n <span>{{ col.header | toObservable | async }}</span>\n @if (col.sortable) {\n <svg\n class=\"acp-grid-icon mat-sort-header-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n </svg>\n }\n </div>\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTplBase\"\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\"\n ></ng-template>\n } }\n </div>\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [class]=\"\n col\n | colClass\n : row\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n acpGridSelectableCell\n [cellSelectable]=\"cellSelectable\"\n (cellSelectedChange)=\"_selectCell($event, row, col)\"\n >\n @if (cellTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(cellTemplate)?.[col.field]) |\n isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.cellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.cellTemplate!\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.showExpand) {\n <button\n class=\"acp-grid-row-expand-button\"\n matIconButton\n acpGridExpansionToggle\n type=\"button\"\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex)\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-row-expand-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n }\n <acp-grid-cell\n [rowData]=\"row\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n (rowDataChange)=\"_onRowDataChange($event)\"\n ></acp-grid-cell>\n } } }\n </td>\n <td\n mat-footer-cell\n *matFooterCellDef\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n } @if (summaryTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(summaryTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: _getColData(data, col),\n colData: _getColData(data, col),\n colDef: col,\n }\"\n ></ng-template>\n } @else {\n <acp-grid-cell\n [summary]=\"true\"\n [data]=\"data\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n ></acp-grid-cell>\n } }\n </td>\n </ng-container>\n } @if (!useContentHeaderRowTemplate) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (!useContentRowTemplate) {\n <tr\n mat-row\n *matRowDef=\"\n let row;\n let index = index;\n let dataIndex = dataIndex;\n columns: displayedColumns\n \"\n [class]=\"row | rowClass: index : dataIndex : rowClassFormatter\"\n [class.selected]=\"rowSelection.isSelected(row)\"\n [class.acp-grid-row-active]=\"_isActiveRow(row)\"\n [attr.id]=\"_rowId(_getIndex(index, dataIndex))\"\n [attr.tabindex]=\"_rowTabIndex(row, _getIndex(index, dataIndex))\"\n (focus)=\"_onRowFocus(row)\"\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\"\n (keydown)=\"_onRowKeyDown($event, row, _getIndex(index, dataIndex))\"\n (keyup)=\"_onRowKeyUp($event, row, _getIndex(index, dataIndex))\"\n (keypress)=\"_onRowKeyPress($event, row, _getIndex(index, dataIndex))\"\n ></tr>\n } @if (_whetherShowSummary) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (expandable) {\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"acpGridExpansionColumnDef\">\n <td\n mat-cell\n *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns.length\"\n >\n <div class=\"acp-grid-expansion-detail-wrapper\">\n <div class=\"acp-grid-expansion-detail\">\n <ng-template\n [ngTemplateOutlet]=\"expansionTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: dataIndex,\n expanded: expansionRowStates[dataIndex].expanded,\n }\"\n ></ng-template>\n </div>\n </div>\n </td>\n </ng-container>\n <tr\n mat-row\n *matRowDef=\"\n let row;\n columns: ['acpGridExpansionColumnDef'];\n let dataIndex = dataIndex\n \"\n class=\"acp-grid-expansion\"\n [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n ></tr>\n }\n </table>\n } @else {\n <!-- TODO: Use flexbox-based mat-table -->\n <table\n mat-table\n columnResize\n [class.mat-table-hover]=\"rowHover\"\n [class.mat-table-striped]=\"rowStriped\"\n [class.mat-table-expandable]=\"expandable\"\n [dataSource]=\"dataSource\"\n [multiTemplateDataRows]=\"expandable\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n [matSortDisableClear]=\"sortDisableClear\"\n [matSortDisabled]=\"sortDisabled\"\n [matSortStart]=\"sortStart\"\n (matSortChange)=\"_onSortChange($event)\"\n [trackBy]=\"trackBy\"\n >\n @if (rowSelectable && !hideRowSelectionCheckbox) {\n <ng-container matColumnDef=\"acpGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"acp-grid-checkbox-cell\">\n @if (multiSelectable) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n (change)=\"$event ? _toggleMasterCheckbox() : null\"\n ></mat-checkbox>\n }\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n class=\"acp-grid-checkbox-cell\"\n >\n @if ( !( rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row,\n _getIndex(index, dataIndex)) ) ) {\n <mat-checkbox\n [disabled]=\"\n rowSelectionFormatter.disabled &&\n rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\n \"\n [checked]=\"rowSelection.isSelected(row)\"\n [tabIndex]=\"keyboardNavigation() ? -1 : 0\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\"\n (keydown)=\"_onCheckboxKeyDown($event)\"\n (keyup)=\"_onCheckboxKeyUp($event)\"\n (keypress)=\"_onCheckboxKeyPress($event)\"\n ></mat-checkbox>\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"acp-grid-checkbox-cell\"></td>\n </ng-container>\n } @for (col of columns; track col.field) {\n <ng-container\n [matColumnDef]=\"col.field\"\n [sticky]=\"col.pinned === 'left'\"\n [stickyEnd]=\"col.pinned === 'right'\"\n >\n <th\n mat-header-cell\n *matHeaderCellDef\n [class]=\"col | colClass\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n [resizable]=\"col.resizable\"\n [matResizableMinWidthPx]=\"col.minWidth\"\n [matResizableMaxWidthPx]=\"col.maxWidth\"\n >\n <div class=\"mat-header-cell-inner\">\n @if (headerTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(headerTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else {\n <div\n [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n [arrowPosition]=\"$safeNavigationMigration(col.sortProp?.arrowPosition)!\"\n [start]=\"$safeNavigationMigration(col.sortProp?.start)!\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n }\n <span>{{ col.header | toObservable | async }}</span>\n @if (col.sortable) {\n <svg\n class=\"acp-grid-icon mat-sort-header-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n </svg>\n }\n </div>\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTplBase\"\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\"\n ></ng-template>\n } }\n </div>\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [class]=\"\n col\n | colClass\n : row\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n acpGridSelectableCell\n [cellSelectable]=\"cellSelectable\"\n (cellSelectedChange)=\"_selectCell($event, row, col)\"\n >\n @if (cellTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(cellTemplate)?.[col.field]) |\n isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.cellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.cellTemplate!\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.showExpand) {\n <button\n class=\"acp-grid-row-expand-button\"\n matIconButton\n acpGridExpansionToggle\n type=\"button\"\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex)\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-row-expand-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n }\n <acp-grid-cell\n [rowData]=\"row\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n (rowDataChange)=\"_onRowDataChange($event)\"\n ></acp-grid-cell>\n } } }\n </td>\n <td\n mat-footer-cell\n *matFooterCellDef\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n } @if (summaryTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(summaryTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: _getColData(data, col),\n colData: _getColData(data, col),\n colDef: col,\n }\"\n ></ng-template>\n } @else {\n <acp-grid-cell\n [summary]=\"true\"\n [data]=\"data\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n ></acp-grid-cell>\n } }\n </td>\n </ng-container>\n } @if (!useContentHeaderRowTemplate) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (!useContentRowTemplate) {\n <tr\n mat-row\n *matRowDef=\"\n let row;\n let index = index;\n let dataIndex = dataIndex;\n columns: displayedColumns\n \"\n [class]=\"row | rowClass: index : dataIndex : rowClassFormatter\"\n [class.selected]=\"rowSelection.isSelected(row)\"\n [class.acp-grid-row-active]=\"_isActiveRow(row)\"\n [attr.id]=\"_rowId(_getIndex(index, dataIndex))\"\n [attr.tabindex]=\"_rowTabIndex(row, _getIndex(index, dataIndex))\"\n (focus)=\"_onRowFocus(row)\"\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\"\n (keydown)=\"_onRowKeyDown($event, row, _getIndex(index, dataIndex))\"\n (keyup)=\"_onRowKeyUp($event, row, _getIndex(index, dataIndex))\"\n (keypress)=\"_onRowKeyPress($event, row, _getIndex(index, dataIndex))\"\n ></tr>\n } @if (_whetherShowSummary) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (expandable) {\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"acpGridExpansionColumnDef\">\n <td\n mat-cell\n *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns.length\"\n >\n <div class=\"acp-grid-expansion-detail-wrapper\">\n <div class=\"acp-grid-expansion-detail\">\n <ng-template\n [ngTemplateOutlet]=\"expansionTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: dataIndex,\n expanded: expansionRowStates[dataIndex].expanded,\n }\"\n ></ng-template>\n </div>\n </div>\n </td>\n </ng-container>\n <tr\n mat-row\n *matRowDef=\"\n let row;\n columns: ['acpGridExpansionColumnDef'];\n let dataIndex = dataIndex\n \"\n class=\"acp-grid-expansion\"\n [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n ></tr>\n }\n </table>\n }\n </div>\n\n <!-- No result -->\n @if (_hasNoResult) {\n <div class=\"acp-grid-no-result\">\n @if (noResultTemplate) {\n <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\n } @else { {{ noResultText }} }\n </div>\n }\n </div>\n\n <!-- Tool sidebar -->\n @if (showSidebar) {\n <div class=\"acp-grid-sidebar\">\n @if (sidebarTemplate) {\n <ng-template [ngTemplateOutlet]=\"sidebarTemplate\"></ng-template>\n }\n </div>\n }\n</div>\n\n<div class=\"acp-grid-footer\">\n <!-- Status Bar -->\n @if (showStatusbar) {\n <div class=\"acp-grid-statusbar\">\n @if (statusbarTemplate) {\n <ng-template [ngTemplateOutlet]=\"statusbarTemplate\"></ng-template>\n }\n </div>\n }\n\n <!-- Pagination -->\n <div class=\"acp-grid-pagination\">\n @if (paginationTemplate) {\n <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\n } @else {\n <mat-paginator\n [class.mat-paginator-hidden]=\"!showPaginator\"\n [showFirstLastButtons]=\"showFirstLastButtons\"\n [length]=\"length\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [hidePageSize]=\"hidePageSize\"\n (page)=\"_onPage($event)\"\n [disabled]=\"pageDisabled\"\n ></mat-paginator>\n }\n </div>\n</div>\n\n<!-- Header template for extra content -->\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\n @if (headerExtraTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(headerExtraTemplate)?.[col.field]) | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } }\n</ng-template>\n", styles: [".mat-column-resize-table.cdk-column-resize-with-resized-column{table-layout:fixed}.mat-column-resize-flex .mat-mdc-header-cell,.mat-column-resize-flex .mat-mdc-cell{box-sizing:border-box;min-width:32px}.mat-mdc-header-cell{position:relative}.mat-resizable{box-sizing:border-box}.mat-mdc-header-cell:not(.mat-resizable):after,.mat-resizable-handle{position:absolute;bottom:0;top:0;right:0;width:1px;background:transparent;transition:background .3s cubic-bezier(.55,0,.55,.2)}.mat-mdc-header-cell:not(.mat-resizable):after{content:\"\"}[dir=rtl] .mat-mdc-header-cell:not(.mat-resizable):after,[dir=rtl] .mat-resizable-handle{left:0;right:auto}[dir=rtl] .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-header-cell,[dir=rtl] .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell{border-left:none}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell{border-right:none}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell:not(.mat-resizable):after{background-color:var(--acp-grid-resizable-handle-disabled-background-color, var(--mat-sys-outline-variant))}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle{background-color:var(--acp-grid-resizable-handle-hover-background-color, var(--mat-sys-primary))}.mat-resizable.cdk-resizable-overlay-thumb-active>.mat-resizable-handle{opacity:0;transition:none}.mat-resizable-handle:focus,.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus{outline:none;background-color:var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary))}.mat-column-resize-overlay-thumb{background:transparent;cursor:col-resize;width:100%;height:100%;transition:background .3s cubic-bezier(.55,0,.55,.2);-webkit-user-select:none;user-select:none}.mat-column-resize-overlay-thumb:active{will-change:transform;background:linear-gradient(90deg,transparent,transparent 7px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 7px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 9px,transparent 9px,transparent)}.mat-column-resize-overlay-thumb:active .mat-column-resize-overlay-thumb-top{background:linear-gradient(90deg,transparent,transparent 4px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 4px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 12px,transparent 12px,transparent)}.mat-column-resize-overlay-thumb-top{width:100%}.acp-grid{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant));border-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium))}.acp-grid .mat-mdc-table{--mat-table-row-item-outline-color: var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid .mat-mdc-table.mat-table-striped .mat-row-odd{background-color:var(--acp-grid-table-row-striped-background-color, var(--mat-sys-surface-container))}.acp-grid .mat-mdc-table.mat-table-hover .mat-mdc-row:hover{background-color:var(--acp-grid-table-row-hover-background-color, var(--mat-sys-secondary-container))}.acp-grid .mat-mdc-table.mat-table-hover .mat-mdc-row.selected:hover{background-color:var(--acp-grid-table-row-selected-hover-background-color, var(--mat-sys-primary-container))}.acp-grid .mat-mdc-table .mat-mdc-row.acp-grid-row-active{background-color:var(--acp-grid-table-row-hover-background-color, var(--mat-sys-secondary-container))}.acp-grid .mat-mdc-table .mat-mdc-row.selected{background-color:var(--acp-grid-table-row-selected-background-color, var(--mat-sys-secondary-container))}.acp-grid .mat-mdc-table .mat-mdc-row:focus{outline:none}.acp-grid .mat-mdc-table .mat-mdc-row:focus-visible,.acp-grid .mat-mdc-table .mat-mdc-row.acp-grid-row-active:not(:focus){outline:2px solid var(--acp-grid-table-cell-selected-outline-color, var(--mat-sys-primary));outline-offset:-2px}.acp-grid .mat-mdc-table .mat-mdc-cell.selected{box-shadow:inset 0 0 0 1px var(--acp-grid-table-cell-selected-outline-color, var(--mat-sys-primary))}.acp-grid .mat-table-container{overflow:auto}.acp-grid .mat-table-container.mat-table-with-data{flex:1}.acp-grid .mat-mdc-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-header-cell:not(.acp-grid-checkbox-cell),.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-footer-cell:not(.acp-grid-checkbox-cell),.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-cell:not(.acp-grid-checkbox-cell){min-width:var(--acp-grid-table-cell-min-width, 80px)}.acp-grid .mat-table-sticky-left{border-right:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .acp-grid .mat-table-sticky-left{border-right-width:0;border-left:1px solid var(--mat-table-row-item-outline-color)}.acp-grid .mat-table-sticky-right{border-left:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .acp-grid .mat-table-sticky-right{border-left-width:0;border-right:1px solid var(--mat-table-row-item-outline-color)}.acp-grid .mat-mdc-footer-cell{border-top:1px solid var(--mat-table-row-item-outline-color);background-color:var(--acp-grid-table-footer-background-color, var(--mat-sys-surface-container))}.acp-grid .mat-mdc-row.acp-grid-expansion{height:0;overflow:hidden}.acp-grid .mat-mdc-row.acp-grid-expansion .mat-mdc-cell{padding-top:0;padding-bottom:0}.acp-grid .mat-mdc-row.acp-grid-expansion.collapsed .mat-mdc-cell{border-bottom-width:0}.acp-grid .mat-sort-header-icon{margin-left:4px}[dir=rtl] .acp-grid .mat-sort-header-icon{margin-left:0;margin-right:4px}.acp-grid .mat-header-cell-inner{display:inline-flex;align-items:center;vertical-align:middle}.acp-grid .mat-mdc-paginator{border-top:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant));border-bottom-left-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium));border-bottom-right-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium))}.acp-grid .mat-paginator-hidden{display:none}.acp-grid .acp-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mat-checkbox-state-layer-size, 40px)) / 2)}.acp-grid-progress{position:absolute;top:0;z-index:120;width:100%}.acp-grid-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-bottom:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-toolbar-content{flex:1;width:0;padding:0 8px}.acp-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.acp-grid-content{flex-direction:column;width:0}.acp-grid-sidebar{max-width:50%;border-left:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}[dir=rtl] .acp-grid-sidebar{border-left-width:0;border-right:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-footer{position:relative;z-index:1}.acp-grid-statusbar{display:flex;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-top:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.acp-grid-expansion-placeholder{display:inline-block;vertical-align:middle;width:var(--mat-icon-button-state-layer-size, var(--acp-grid-row-expand-button-size, 40px));height:var(--mat-icon-button-state-layer-size, var(--acp-grid-row-expand-button-size, 40px))}.acp-grid-expansion-detail-wrapper{display:grid;grid-template-rows:0fr;grid-template-columns:100%;padding:0;overflow:hidden}.acp-grid-expansion.expanded .acp-grid-expansion-detail-wrapper{grid-template-rows:1fr;padding:calc((var(--mat-table-row-item-container-height, 52px) - 20px) / 2) 0}.acp-grid-expansion-detail{min-height:0}.acp-grid-animations-enabled .acp-grid-expansion-detail-wrapper{transition:all 225ms cubic-bezier(.4,0,.2,1)}.acp-grid-row-expand-button.expanded .acp-grid-row-expand-icon{transform:rotate(90deg)}.acp-grid-row-expand-button.mat-mdc-icon-button,.acp-grid-row-expand-button+acp-grid-cell{vertical-align:middle}.acp-grid-size-small{--mat-table-header-container-height: 40px;--mat-table-row-item-container-height: 36px;--mat-table-footer-container-height: 36px;--mat-table-header-headline-size: .8125rem;--mat-table-row-item-label-text-size: .8125rem;--mat-table-footer-supporting-text-size: .8125rem;--mat-icon-button-state-layer-size: 32px;--mat-checkbox-state-layer-size: 32px;--mat-paginator-container-size: 48px;--mat-button-outlined-container-height: 32px;--mat-button-filled-container-height: 32px;--mat-button-protected-container-height: 32px;--mat-button-text-container-height: 32px;--mat-button-tonal-container-height: 32px}.acp-grid-size-small :is(.mat-mdc-header-cell,.mat-mdc-footer-cell,.mat-mdc-cell):not(.acp-grid-checkbox-cell){padding-left:8px;padding-right:8px}.acp-grid-size-small .acp-grid-toolbar,.acp-grid-size-small .acp-grid-statusbar{padding:4px}.acp-grid-size-large{--mat-table-header-container-height: 64px;--mat-table-row-item-container-height: 60px;--mat-table-footer-container-height: 60px;--mat-table-header-headline-size: 1rem;--mat-table-row-item-label-text-size: 1rem;--mat-table-footer-supporting-text-size: 1rem;--mat-paginator-container-size: 64px}.acp-grid-size-large :is(.mat-mdc-header-cell,.mat-mdc-footer-cell,.mat-mdc-cell):not(.acp-grid-checkbox-cell){padding-left:20px;padding-right:20px}.acp-grid-size-large .acp-grid-toolbar,.acp-grid-size-large .acp-grid-statusbar{padding:12px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: MatResizable, selector: "mat-header-cell[resizable], th[mat-header-cell][resizable]", inputs: ["matResizableMinWidthPx", "matResizableMaxWidthPx", "resizable"] }, { kind: "directive", type: MatColumnResize, selector: "table[mat-table][columnResize]" }, { kind: "component", type: AcpGridCell, selector: "acp-grid-cell", inputs: ["rowData", "colDef", "data", "summary", "placeholder"], outputs: ["rowDataChange"], exportAs: ["acpGridCell"] }, { kind: "component", type: AcpGridColumnMenu, selector: "acp-grid-column-menu", inputs: ["columns", "selectable", "selectableChecked", "sortable", "pinnable", "buttonText", "buttonType", "buttonColor", "buttonClass", "buttonIcon", "buttonFontIcon", "buttonSvgIcon", "showHeader", "headerText", "headerTemplate", "showFooter", "footerText", "footerTemplate", "pinOptions"], outputs: ["columnChange"], exportAs: ["acpGridColumnMenu"] }, { kind: "directive", type: AcpGridSelectableCell, selector: "[acpGridSelectableCell]", inputs: ["cellSelectable"], outputs: ["cellSelectedChange"] }, { kind: "directive", type: AcpGridExpansionToggle, selector: "[acpGridExpansionToggle]", inputs: ["opened", "expandableRow", "expansionRowTpl"], outputs: ["openedChange", "toggleChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AcpIsTemplateRefPipe, name: "isTemplateRef" }, { kind: "pipe", type: AcpGridColClassPipe, name: "colClass" }, { kind: "pipe", type: AcpGridRowClassPipe, name: "rowClass" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5664
5952
|
}
|
|
5665
5953
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGrid, decorators: [{
|
|
5666
5954
|
type: Component,
|
|
@@ -5700,11 +5988,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
5700
5988
|
], host: {
|
|
5701
5989
|
class: 'acp-grid',
|
|
5702
5990
|
'[class.acp-grid-animations-enabled]': '!_animationsDisabled',
|
|
5703
|
-
'[class.acp-grid-size-small]': '
|
|
5704
|
-
'[class.acp-grid-size-medium]': '
|
|
5705
|
-
'[class.acp-grid-size-
|
|
5706
|
-
'[attr.tabindex]': '0',
|
|
5707
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Progress bar-->\n@if (loading) {\n<div class=\"acp-grid-progress\">\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n</div>\n}\n\n<!-- Toolbar -->\n@if (showToolbar) {\n<div class=\"acp-grid-toolbar\">\n <div class=\"acp-grid-toolbar-content\">\n @if (toolbarTemplate) {\n <ng-template [ngTemplateOutlet]=\"toolbarTemplate\"></ng-template>\n } @else { @if (toolbarTitle) {\n <div class=\"acp-grid-toolbar-title\">{{ toolbarTitle }}</div>\n } }\n </div>\n <div class=\"acp-grid-toolbar-actions\">\n @if (showColumnMenuButton) {\n <acp-grid-column-menu\n [columns]=\"columns\"\n [buttonText]=\"columnMenuButtonText\"\n [buttonType]=\"columnMenuButtonType\"\n [buttonColor]=\"columnMenuButtonColor\"\n [buttonClass]=\"columnMenuButtonClass\"\n [buttonIcon]=\"columnMenuButtonIcon\"\n [buttonFontIcon]=\"columnMenuButtonFontIcon\"\n [buttonSvgIcon]=\"columnMenuButtonSvgIcon\"\n [selectable]=\"columnHideable\"\n [selectableChecked]=\"columnHideableChecked\"\n [sortable]=\"columnSortable\"\n [pinnable]=\"columnPinnable\"\n [showHeader]=\"showColumnMenuHeader\"\n [headerText]=\"columnMenuHeaderText\"\n [headerTemplate]=\"columnMenuHeaderTemplate\"\n [showFooter]=\"showColumnMenuFooter\"\n [footerText]=\"columnMenuFooterText\"\n [footerTemplate]=\"columnMenuFooterTemplate\"\n [pinOptions]=\"columnPinOptions\"\n (columnChange)=\"_onColumnChange($event)\"\n ></acp-grid-column-menu>\n }\n </div>\n</div>\n}\n\n<div class=\"acp-grid-main acp-grid-layout\">\n <!-- Table content -->\n <div class=\"acp-grid-content acp-grid-layout\">\n <div #tableContainer class=\"mat-table-container\" [class.mat-table-with-data]=\"!_hasNoResult\">\n @if (!columnResizable) {\n <table\n mat-table\n [class.mat-table-hover]=\"rowHover\"\n [class.mat-table-striped]=\"rowStriped\"\n [class.mat-table-expandable]=\"expandable\"\n [dataSource]=\"dataSource\"\n [multiTemplateDataRows]=\"expandable\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n [matSortDisableClear]=\"sortDisableClear\"\n [matSortDisabled]=\"sortDisabled\"\n [matSortStart]=\"sortStart\"\n (matSortChange)=\"_onSortChange($event)\"\n [trackBy]=\"trackBy\"\n >\n @if (rowSelectable && !hideRowSelectionCheckbox) {\n <ng-container matColumnDef=\"acpGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"acp-grid-checkbox-cell\">\n @if (multiSelectable) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n (change)=\"$event ? _toggleMasterCheckbox() : null\"\n ></mat-checkbox>\n }\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n class=\"acp-grid-checkbox-cell\"\n >\n @if ( !( rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row,\n _getIndex(index, dataIndex)) ) ) {\n <mat-checkbox\n [disabled]=\"\n rowSelectionFormatter.disabled &&\n rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\n \"\n [checked]=\"rowSelection.isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\"\n (keydown)=\"_onCheckboxKeyDown($event)\"\n (keyup)=\"_onCheckboxKeyUp($event)\"\n (keypress)=\"_onCheckboxKeyPress($event)\"\n ></mat-checkbox>\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"acp-grid-checkbox-cell\"></td>\n </ng-container>\n } @for (col of columns; track col.field) {\n <ng-container\n [matColumnDef]=\"col.field\"\n [sticky]=\"col.pinned === 'left'\"\n [stickyEnd]=\"col.pinned === 'right'\"\n >\n <th\n mat-header-cell\n *matHeaderCellDef\n [class]=\"col | colClass\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n <div class=\"mat-header-cell-inner\">\n @if (headerTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(headerTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else {\n <div\n [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n [arrowPosition]=\"$safeNavigationMigration(col.sortProp?.arrowPosition)!\"\n [start]=\"$safeNavigationMigration(col.sortProp?.start)!\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n }\n <span>{{ col.header | toObservable | async }}</span>\n @if (col.sortable) {\n <svg\n class=\"acp-grid-icon mat-sort-header-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n </svg>\n }\n </div>\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTplBase\"\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\"\n ></ng-template>\n } }\n </div>\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [class]=\"\n col\n | colClass\n : row\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n acpGridSelectableCell\n [cellSelectable]=\"cellSelectable\"\n (cellSelectedChange)=\"_selectCell($event, row, col)\"\n >\n @if (cellTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(cellTemplate)?.[col.field]) |\n isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.cellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.cellTemplate!\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.showExpand) {\n <button\n class=\"acp-grid-row-expand-button\"\n matIconButton\n acpGridExpansionToggle\n type=\"button\"\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex)\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-row-expand-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n }\n <acp-grid-cell\n [rowData]=\"row\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n (rowDataChange)=\"_onRowDataChange($event)\"\n ></acp-grid-cell>\n } } }\n </td>\n <td\n mat-footer-cell\n *matFooterCellDef\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n } @if (summaryTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(summaryTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: _getColData(data, col),\n colData: _getColData(data, col),\n colDef: col,\n }\"\n ></ng-template>\n } @else {\n <acp-grid-cell\n [summary]=\"true\"\n [data]=\"data\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n ></acp-grid-cell>\n } }\n </td>\n </ng-container>\n } @if (!useContentHeaderRowTemplate) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (!useContentRowTemplate) {\n <tr\n mat-row\n *matRowDef=\"\n let row;\n let index = index;\n let dataIndex = dataIndex;\n columns: displayedColumns\n \"\n [class]=\"row | rowClass: index : dataIndex : rowClassFormatter\"\n [class.selected]=\"rowSelection.isSelected(row)\"\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\"\n (keydown)=\"_onRowKeyDown($event, row, _getIndex(index, dataIndex))\"\n (keyup)=\"_onRowKeyUp($event, row, _getIndex(index, dataIndex))\"\n (keypress)=\"_onRowKeyPress($event, row, _getIndex(index, dataIndex))\"\n ></tr>\n } @if (_whetherShowSummary) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (expandable) {\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"acpGridExpansionColumnDef\">\n <td\n mat-cell\n *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns.length\"\n >\n <div class=\"acp-grid-expansion-detail-wrapper\">\n <div class=\"acp-grid-expansion-detail\">\n <ng-template\n [ngTemplateOutlet]=\"expansionTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: dataIndex,\n expanded: expansionRowStates[dataIndex].expanded,\n }\"\n ></ng-template>\n </div>\n </div>\n </td>\n </ng-container>\n <tr\n mat-row\n *matRowDef=\"\n let row;\n columns: ['acpGridExpansionColumnDef'];\n let dataIndex = dataIndex\n \"\n class=\"acp-grid-expansion\"\n [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n ></tr>\n }\n </table>\n } @else {\n <!-- TODO: Use flexbox-based mat-table -->\n <table\n mat-table\n columnResize\n [class.mat-table-hover]=\"rowHover\"\n [class.mat-table-striped]=\"rowStriped\"\n [class.mat-table-expandable]=\"expandable\"\n [dataSource]=\"dataSource\"\n [multiTemplateDataRows]=\"expandable\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n [matSortDisableClear]=\"sortDisableClear\"\n [matSortDisabled]=\"sortDisabled\"\n [matSortStart]=\"sortStart\"\n (matSortChange)=\"_onSortChange($event)\"\n [trackBy]=\"trackBy\"\n >\n @if (rowSelectable && !hideRowSelectionCheckbox) {\n <ng-container matColumnDef=\"acpGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"acp-grid-checkbox-cell\">\n @if (multiSelectable) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n (change)=\"$event ? _toggleMasterCheckbox() : null\"\n ></mat-checkbox>\n }\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n class=\"acp-grid-checkbox-cell\"\n >\n @if ( !( rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row,\n _getIndex(index, dataIndex)) ) ) {\n <mat-checkbox\n [disabled]=\"\n rowSelectionFormatter.disabled &&\n rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\n \"\n [checked]=\"rowSelection.isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\"\n (keydown)=\"_onCheckboxKeyDown($event)\"\n (keyup)=\"_onCheckboxKeyUp($event)\"\n (keypress)=\"_onCheckboxKeyPress($event)\"\n ></mat-checkbox>\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"acp-grid-checkbox-cell\"></td>\n </ng-container>\n } @for (col of columns; track col.field) {\n <ng-container\n [matColumnDef]=\"col.field\"\n [sticky]=\"col.pinned === 'left'\"\n [stickyEnd]=\"col.pinned === 'right'\"\n >\n <th\n mat-header-cell\n *matHeaderCellDef\n [class]=\"col | colClass\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n [resizable]=\"col.resizable\"\n [matResizableMinWidthPx]=\"col.minWidth\"\n [matResizableMaxWidthPx]=\"col.maxWidth\"\n >\n <div class=\"mat-header-cell-inner\">\n @if (headerTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(headerTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else {\n <div\n [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n [arrowPosition]=\"$safeNavigationMigration(col.sortProp?.arrowPosition)!\"\n [start]=\"$safeNavigationMigration(col.sortProp?.start)!\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n }\n <span>{{ col.header | toObservable | async }}</span>\n @if (col.sortable) {\n <svg\n class=\"acp-grid-icon mat-sort-header-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n </svg>\n }\n </div>\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTplBase\"\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\"\n ></ng-template>\n } }\n </div>\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [class]=\"\n col\n | colClass\n : row\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n acpGridSelectableCell\n [cellSelectable]=\"cellSelectable\"\n (cellSelectedChange)=\"_selectCell($event, row, col)\"\n >\n @if (cellTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(cellTemplate)?.[col.field]) |\n isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.cellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.cellTemplate!\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.showExpand) {\n <button\n class=\"acp-grid-row-expand-button\"\n matIconButton\n acpGridExpansionToggle\n type=\"button\"\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex)\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-row-expand-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n }\n <acp-grid-cell\n [rowData]=\"row\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n (rowDataChange)=\"_onRowDataChange($event)\"\n ></acp-grid-cell>\n } } }\n </td>\n <td\n mat-footer-cell\n *matFooterCellDef\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n } @if (summaryTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(summaryTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: _getColData(data, col),\n colData: _getColData(data, col),\n colDef: col,\n }\"\n ></ng-template>\n } @else {\n <acp-grid-cell\n [summary]=\"true\"\n [data]=\"data\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n ></acp-grid-cell>\n } }\n </td>\n </ng-container>\n } @if (!useContentHeaderRowTemplate) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (!useContentRowTemplate) {\n <tr\n mat-row\n *matRowDef=\"\n let row;\n let index = index;\n let dataIndex = dataIndex;\n columns: displayedColumns\n \"\n [class]=\"row | rowClass: index : dataIndex : rowClassFormatter\"\n [class.selected]=\"rowSelection.isSelected(row)\"\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\"\n (keydown)=\"_onRowKeyDown($event, row, _getIndex(index, dataIndex))\"\n (keyup)=\"_onRowKeyUp($event, row, _getIndex(index, dataIndex))\"\n (keypress)=\"_onRowKeyPress($event, row, _getIndex(index, dataIndex))\"\n ></tr>\n } @if (_whetherShowSummary) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (expandable) {\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"acpGridExpansionColumnDef\">\n <td\n mat-cell\n *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns.length\"\n >\n <div class=\"acp-grid-expansion-detail-wrapper\">\n <div class=\"acp-grid-expansion-detail\">\n <ng-template\n [ngTemplateOutlet]=\"expansionTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: dataIndex,\n expanded: expansionRowStates[dataIndex].expanded,\n }\"\n ></ng-template>\n </div>\n </div>\n </td>\n </ng-container>\n <tr\n mat-row\n *matRowDef=\"\n let row;\n columns: ['acpGridExpansionColumnDef'];\n let dataIndex = dataIndex\n \"\n class=\"acp-grid-expansion\"\n [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n ></tr>\n }\n </table>\n }\n </div>\n\n <!-- No result -->\n @if (_hasNoResult) {\n <div class=\"acp-grid-no-result\">\n @if (noResultTemplate) {\n <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\n } @else { {{ noResultText }} }\n </div>\n }\n </div>\n\n <!-- Tool sidebar -->\n @if (showSidebar) {\n <div class=\"acp-grid-sidebar\">\n @if (sidebarTemplate) {\n <ng-template [ngTemplateOutlet]=\"sidebarTemplate\"></ng-template>\n }\n </div>\n }\n</div>\n\n<div class=\"acp-grid-footer\">\n <!-- Status Bar -->\n @if (showStatusbar) {\n <div class=\"acp-grid-statusbar\">\n @if (statusbarTemplate) {\n <ng-template [ngTemplateOutlet]=\"statusbarTemplate\"></ng-template>\n }\n </div>\n }\n\n <!-- Pagination -->\n <div class=\"acp-grid-pagination\">\n @if (paginationTemplate) {\n <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\n } @else {\n <mat-paginator\n [class.mat-paginator-hidden]=\"!showPaginator\"\n [showFirstLastButtons]=\"showFirstLastButtons\"\n [length]=\"length\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [hidePageSize]=\"hidePageSize\"\n (page)=\"_onPage($event)\"\n [disabled]=\"pageDisabled\"\n ></mat-paginator>\n }\n </div>\n</div>\n\n<!-- Header template for extra content -->\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\n @if (headerExtraTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(headerExtraTemplate)?.[col.field]) | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } }\n</ng-template>\n", styles: [".mat-column-resize-table.cdk-column-resize-with-resized-column{table-layout:fixed}.mat-column-resize-flex .mat-mdc-header-cell,.mat-column-resize-flex .mat-mdc-cell{box-sizing:border-box;min-width:32px}.mat-mdc-header-cell{position:relative}.mat-resizable{box-sizing:border-box}.mat-mdc-header-cell:not(.mat-resizable):after,.mat-resizable-handle{position:absolute;bottom:0;top:0;right:0;width:1px;background:transparent;transition:background .3s cubic-bezier(.55,0,.55,.2)}.mat-mdc-header-cell:not(.mat-resizable):after{content:\"\"}[dir=rtl] .mat-mdc-header-cell:not(.mat-resizable):after,[dir=rtl] .mat-resizable-handle{left:0;right:auto}[dir=rtl] .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-header-cell,[dir=rtl] .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell{border-left:none}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell{border-right:none}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell:not(.mat-resizable):after{background-color:var(--acp-grid-resizable-handle-disabled-background-color, var(--mat-sys-outline-variant))}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle{background-color:var(--acp-grid-resizable-handle-hover-background-color, var(--mat-sys-primary))}.mat-resizable.cdk-resizable-overlay-thumb-active>.mat-resizable-handle{opacity:0;transition:none}.mat-resizable-handle:focus,.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus{outline:none;background-color:var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary))}.mat-column-resize-overlay-thumb{background:transparent;cursor:col-resize;width:100%;height:100%;transition:background .3s cubic-bezier(.55,0,.55,.2);-webkit-user-select:none;user-select:none}.mat-column-resize-overlay-thumb:active{will-change:transform;background:linear-gradient(90deg,transparent,transparent 7px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 7px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 9px,transparent 9px,transparent)}.mat-column-resize-overlay-thumb:active .mat-column-resize-overlay-thumb-top{background:linear-gradient(90deg,transparent,transparent 4px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 4px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 12px,transparent 12px,transparent)}.mat-column-resize-overlay-thumb-top{width:100%}.acp-grid{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant));border-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium))}.acp-grid .mat-mdc-table{--mat-table-row-item-outline-color: var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid .mat-mdc-table.mat-table-striped .mat-row-odd{background-color:var(--acp-grid-table-row-striped-background-color, var(--mat-sys-surface-container))}.acp-grid .mat-mdc-table.mat-table-hover .mat-mdc-row:hover{background-color:var(--acp-grid-table-row-hover-background-color, var(--mat-sys-secondary-container))}.acp-grid .mat-mdc-table.mat-table-hover .mat-mdc-row.selected:hover{background-color:var(--acp-grid-table-row-selected-hover-background-color, var(--mat-sys-primary-container))}.acp-grid .mat-mdc-table .mat-mdc-row.selected{background-color:var(--acp-grid-table-row-selected-background-color, var(--mat-sys-secondary-container))}.acp-grid .mat-mdc-table .mat-mdc-cell.selected{box-shadow:inset 0 0 0 1px var(--acp-grid-table-cell-selected-outline-color, var(--mat-sys-primary))}.acp-grid .mat-table-container{overflow:auto}.acp-grid .mat-table-container.mat-table-with-data{flex:1}.acp-grid .mat-mdc-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-header-cell:not(.acp-grid-checkbox-cell),.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-footer-cell:not(.acp-grid-checkbox-cell),.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-cell:not(.acp-grid-checkbox-cell){min-width:var(--acp-grid-table-cell-min-width, 80px)}.acp-grid .mat-table-sticky-left{border-right:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .acp-grid .mat-table-sticky-left{border-right-width:0;border-left:1px solid var(--mat-table-row-item-outline-color)}.acp-grid .mat-table-sticky-right{border-left:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .acp-grid .mat-table-sticky-right{border-left-width:0;border-right:1px solid var(--mat-table-row-item-outline-color)}.acp-grid .mat-mdc-footer-cell{border-top:1px solid var(--mat-table-row-item-outline-color);background-color:var(--acp-grid-table-footer-background-color, var(--mat-sys-surface-container))}.acp-grid .mat-mdc-row.acp-grid-expansion{height:0;overflow:hidden}.acp-grid .mat-mdc-row.acp-grid-expansion .mat-mdc-cell{padding-top:0;padding-bottom:0}.acp-grid .mat-mdc-row.acp-grid-expansion.collapsed .mat-mdc-cell{border-bottom-width:0}.acp-grid .mat-sort-header-icon{margin-left:4px}[dir=rtl] .acp-grid .mat-sort-header-icon{margin-left:0;margin-right:4px}.acp-grid .mat-header-cell-inner{display:inline-flex;align-items:center;vertical-align:middle}.acp-grid .mat-mdc-paginator{border-top:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant));border-bottom-left-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium));border-bottom-right-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium))}.acp-grid .mat-paginator-hidden{display:none}.acp-grid .acp-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mat-checkbox-state-layer-size, 40px)) / 2)}.acp-grid-progress{position:absolute;top:0;z-index:120;width:100%}.acp-grid-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-bottom:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-toolbar-content{flex:1;width:0;padding:0 8px}.acp-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.acp-grid-content{flex-direction:column;width:0}.acp-grid-sidebar{max-width:50%;border-left:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}[dir=rtl] .acp-grid-sidebar{border-left-width:0;border-right:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-footer{position:relative;z-index:1}.acp-grid-statusbar{display:flex;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-top:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.acp-grid-expansion-placeholder{display:inline-block;vertical-align:middle;width:var(--mat-icon-button-state-layer-size, var(--acp-grid-row-expand-button-size, 40px));height:var(--mat-icon-button-state-layer-size, var(--acp-grid-row-expand-button-size, 40px))}.acp-grid-expansion-detail-wrapper{display:grid;grid-template-rows:0fr;grid-template-columns:100%;padding:0;overflow:hidden}.acp-grid-expansion.expanded .acp-grid-expansion-detail-wrapper{grid-template-rows:1fr;padding:calc((var(--mat-table-row-item-container-height, 52px) - 20px) / 2) 0}.acp-grid-expansion-detail{min-height:0}.acp-grid-animations-enabled .acp-grid-expansion-detail-wrapper{transition:all 225ms cubic-bezier(.4,0,.2,1)}.acp-grid-row-expand-button.expanded .acp-grid-row-expand-icon{transform:rotate(90deg)}.acp-grid-row-expand-button.mat-mdc-icon-button,.acp-grid-row-expand-button+acp-grid-cell{vertical-align:middle}\n"] }]
|
|
5991
|
+
'[class.acp-grid-size-small]': '_size() === "small"',
|
|
5992
|
+
'[class.acp-grid-size-medium]': '_size() === "medium"',
|
|
5993
|
+
'[class.acp-grid-size-large]': '_size() === "large"',
|
|
5994
|
+
'[attr.tabindex]': 'keyboardNavigation() ? null : 0',
|
|
5995
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Progress bar-->\n@if (loading) {\n<div class=\"acp-grid-progress\">\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n</div>\n}\n\n<!-- Toolbar -->\n@if (showToolbar) {\n<div class=\"acp-grid-toolbar\">\n <div class=\"acp-grid-toolbar-content\">\n @if (toolbarTemplate) {\n <ng-template [ngTemplateOutlet]=\"toolbarTemplate\"></ng-template>\n } @else { @if (toolbarTitle) {\n <div class=\"acp-grid-toolbar-title\">{{ toolbarTitle }}</div>\n } }\n </div>\n <div class=\"acp-grid-toolbar-actions\">\n @if (showColumnMenuButton) {\n <acp-grid-column-menu\n [columns]=\"columns\"\n [buttonText]=\"columnMenuButtonText\"\n [buttonType]=\"columnMenuButtonType\"\n [buttonColor]=\"columnMenuButtonColor\"\n [buttonClass]=\"columnMenuButtonClass\"\n [buttonIcon]=\"columnMenuButtonIcon\"\n [buttonFontIcon]=\"columnMenuButtonFontIcon\"\n [buttonSvgIcon]=\"columnMenuButtonSvgIcon\"\n [selectable]=\"columnHideable\"\n [selectableChecked]=\"columnHideableChecked\"\n [sortable]=\"columnSortable\"\n [pinnable]=\"columnPinnable\"\n [showHeader]=\"showColumnMenuHeader\"\n [headerText]=\"columnMenuHeaderText\"\n [headerTemplate]=\"columnMenuHeaderTemplate\"\n [showFooter]=\"showColumnMenuFooter\"\n [footerText]=\"columnMenuFooterText\"\n [footerTemplate]=\"columnMenuFooterTemplate\"\n [pinOptions]=\"columnPinOptions\"\n (columnChange)=\"_onColumnChange($event)\"\n ></acp-grid-column-menu>\n }\n </div>\n</div>\n}\n\n<div class=\"acp-grid-main acp-grid-layout\">\n <!-- Table content -->\n <div class=\"acp-grid-content acp-grid-layout\">\n <div #tableContainer class=\"mat-table-container\" [class.mat-table-with-data]=\"!_hasNoResult\">\n @if (!columnResizable) {\n <table\n mat-table\n [class.mat-table-hover]=\"rowHover\"\n [class.mat-table-striped]=\"rowStriped\"\n [class.mat-table-expandable]=\"expandable\"\n [dataSource]=\"dataSource\"\n [multiTemplateDataRows]=\"expandable\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n [matSortDisableClear]=\"sortDisableClear\"\n [matSortDisabled]=\"sortDisabled\"\n [matSortStart]=\"sortStart\"\n (matSortChange)=\"_onSortChange($event)\"\n [trackBy]=\"trackBy\"\n >\n @if (rowSelectable && !hideRowSelectionCheckbox) {\n <ng-container matColumnDef=\"acpGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"acp-grid-checkbox-cell\">\n @if (multiSelectable) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n (change)=\"$event ? _toggleMasterCheckbox() : null\"\n ></mat-checkbox>\n }\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n class=\"acp-grid-checkbox-cell\"\n >\n @if ( !( rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row,\n _getIndex(index, dataIndex)) ) ) {\n <mat-checkbox\n [disabled]=\"\n rowSelectionFormatter.disabled &&\n rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\n \"\n [checked]=\"rowSelection.isSelected(row)\"\n [tabIndex]=\"keyboardNavigation() ? -1 : 0\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\"\n (keydown)=\"_onCheckboxKeyDown($event)\"\n (keyup)=\"_onCheckboxKeyUp($event)\"\n (keypress)=\"_onCheckboxKeyPress($event)\"\n ></mat-checkbox>\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"acp-grid-checkbox-cell\"></td>\n </ng-container>\n } @for (col of columns; track col.field) {\n <ng-container\n [matColumnDef]=\"col.field\"\n [sticky]=\"col.pinned === 'left'\"\n [stickyEnd]=\"col.pinned === 'right'\"\n >\n <th\n mat-header-cell\n *matHeaderCellDef\n [class]=\"col | colClass\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n <div class=\"mat-header-cell-inner\">\n @if (headerTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(headerTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else {\n <div\n [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n [arrowPosition]=\"$safeNavigationMigration(col.sortProp?.arrowPosition)!\"\n [start]=\"$safeNavigationMigration(col.sortProp?.start)!\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n }\n <span>{{ col.header | toObservable | async }}</span>\n @if (col.sortable) {\n <svg\n class=\"acp-grid-icon mat-sort-header-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n </svg>\n }\n </div>\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTplBase\"\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\"\n ></ng-template>\n } }\n </div>\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [class]=\"\n col\n | colClass\n : row\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n acpGridSelectableCell\n [cellSelectable]=\"cellSelectable\"\n (cellSelectedChange)=\"_selectCell($event, row, col)\"\n >\n @if (cellTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(cellTemplate)?.[col.field]) |\n isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.cellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.cellTemplate!\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.showExpand) {\n <button\n class=\"acp-grid-row-expand-button\"\n matIconButton\n acpGridExpansionToggle\n type=\"button\"\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex)\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-row-expand-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n }\n <acp-grid-cell\n [rowData]=\"row\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n (rowDataChange)=\"_onRowDataChange($event)\"\n ></acp-grid-cell>\n } } }\n </td>\n <td\n mat-footer-cell\n *matFooterCellDef\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n } @if (summaryTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(summaryTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: _getColData(data, col),\n colData: _getColData(data, col),\n colDef: col,\n }\"\n ></ng-template>\n } @else {\n <acp-grid-cell\n [summary]=\"true\"\n [data]=\"data\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n ></acp-grid-cell>\n } }\n </td>\n </ng-container>\n } @if (!useContentHeaderRowTemplate) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (!useContentRowTemplate) {\n <tr\n mat-row\n *matRowDef=\"\n let row;\n let index = index;\n let dataIndex = dataIndex;\n columns: displayedColumns\n \"\n [class]=\"row | rowClass: index : dataIndex : rowClassFormatter\"\n [class.selected]=\"rowSelection.isSelected(row)\"\n [class.acp-grid-row-active]=\"_isActiveRow(row)\"\n [attr.id]=\"_rowId(_getIndex(index, dataIndex))\"\n [attr.tabindex]=\"_rowTabIndex(row, _getIndex(index, dataIndex))\"\n (focus)=\"_onRowFocus(row)\"\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\"\n (keydown)=\"_onRowKeyDown($event, row, _getIndex(index, dataIndex))\"\n (keyup)=\"_onRowKeyUp($event, row, _getIndex(index, dataIndex))\"\n (keypress)=\"_onRowKeyPress($event, row, _getIndex(index, dataIndex))\"\n ></tr>\n } @if (_whetherShowSummary) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (expandable) {\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"acpGridExpansionColumnDef\">\n <td\n mat-cell\n *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns.length\"\n >\n <div class=\"acp-grid-expansion-detail-wrapper\">\n <div class=\"acp-grid-expansion-detail\">\n <ng-template\n [ngTemplateOutlet]=\"expansionTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: dataIndex,\n expanded: expansionRowStates[dataIndex].expanded,\n }\"\n ></ng-template>\n </div>\n </div>\n </td>\n </ng-container>\n <tr\n mat-row\n *matRowDef=\"\n let row;\n columns: ['acpGridExpansionColumnDef'];\n let dataIndex = dataIndex\n \"\n class=\"acp-grid-expansion\"\n [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n ></tr>\n }\n </table>\n } @else {\n <!-- TODO: Use flexbox-based mat-table -->\n <table\n mat-table\n columnResize\n [class.mat-table-hover]=\"rowHover\"\n [class.mat-table-striped]=\"rowStriped\"\n [class.mat-table-expandable]=\"expandable\"\n [dataSource]=\"dataSource\"\n [multiTemplateDataRows]=\"expandable\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n [matSortDisableClear]=\"sortDisableClear\"\n [matSortDisabled]=\"sortDisabled\"\n [matSortStart]=\"sortStart\"\n (matSortChange)=\"_onSortChange($event)\"\n [trackBy]=\"trackBy\"\n >\n @if (rowSelectable && !hideRowSelectionCheckbox) {\n <ng-container matColumnDef=\"acpGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"acp-grid-checkbox-cell\">\n @if (multiSelectable) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n (change)=\"$event ? _toggleMasterCheckbox() : null\"\n ></mat-checkbox>\n }\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n class=\"acp-grid-checkbox-cell\"\n >\n @if ( !( rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row,\n _getIndex(index, dataIndex)) ) ) {\n <mat-checkbox\n [disabled]=\"\n rowSelectionFormatter.disabled &&\n rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\n \"\n [checked]=\"rowSelection.isSelected(row)\"\n [tabIndex]=\"keyboardNavigation() ? -1 : 0\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\"\n (keydown)=\"_onCheckboxKeyDown($event)\"\n (keyup)=\"_onCheckboxKeyUp($event)\"\n (keypress)=\"_onCheckboxKeyPress($event)\"\n ></mat-checkbox>\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"acp-grid-checkbox-cell\"></td>\n </ng-container>\n } @for (col of columns; track col.field) {\n <ng-container\n [matColumnDef]=\"col.field\"\n [sticky]=\"col.pinned === 'left'\"\n [stickyEnd]=\"col.pinned === 'right'\"\n >\n <th\n mat-header-cell\n *matHeaderCellDef\n [class]=\"col | colClass\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n [resizable]=\"col.resizable\"\n [matResizableMinWidthPx]=\"col.minWidth\"\n [matResizableMaxWidthPx]=\"col.maxWidth\"\n >\n <div class=\"mat-header-cell-inner\">\n @if (headerTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(headerTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else {\n <div\n [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n [arrowPosition]=\"$safeNavigationMigration(col.sortProp?.arrowPosition)!\"\n [start]=\"$safeNavigationMigration(col.sortProp?.start)!\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n }\n <span>{{ col.header | toObservable | async }}</span>\n @if (col.sortable) {\n <svg\n class=\"acp-grid-icon mat-sort-header-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n </svg>\n }\n </div>\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTplBase\"\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\"\n ></ng-template>\n } }\n </div>\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [class]=\"\n col\n | colClass\n : row\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n acpGridSelectableCell\n [cellSelectable]=\"cellSelectable\"\n (cellSelectedChange)=\"_selectCell($event, row, col)\"\n >\n @if (cellTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(cellTemplate)?.[col.field]) |\n isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.cellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.cellTemplate!\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.showExpand) {\n <button\n class=\"acp-grid-row-expand-button\"\n matIconButton\n acpGridExpansionToggle\n type=\"button\"\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex)\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-row-expand-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n }\n <acp-grid-cell\n [rowData]=\"row\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n (rowDataChange)=\"_onRowDataChange($event)\"\n ></acp-grid-cell>\n } } }\n </td>\n <td\n mat-footer-cell\n *matFooterCellDef\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n } @if (summaryTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(summaryTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: _getColData(data, col),\n colData: _getColData(data, col),\n colDef: col,\n }\"\n ></ng-template>\n } @else {\n <acp-grid-cell\n [summary]=\"true\"\n [data]=\"data\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n ></acp-grid-cell>\n } }\n </td>\n </ng-container>\n } @if (!useContentHeaderRowTemplate) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (!useContentRowTemplate) {\n <tr\n mat-row\n *matRowDef=\"\n let row;\n let index = index;\n let dataIndex = dataIndex;\n columns: displayedColumns\n \"\n [class]=\"row | rowClass: index : dataIndex : rowClassFormatter\"\n [class.selected]=\"rowSelection.isSelected(row)\"\n [class.acp-grid-row-active]=\"_isActiveRow(row)\"\n [attr.id]=\"_rowId(_getIndex(index, dataIndex))\"\n [attr.tabindex]=\"_rowTabIndex(row, _getIndex(index, dataIndex))\"\n (focus)=\"_onRowFocus(row)\"\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\"\n (keydown)=\"_onRowKeyDown($event, row, _getIndex(index, dataIndex))\"\n (keyup)=\"_onRowKeyUp($event, row, _getIndex(index, dataIndex))\"\n (keypress)=\"_onRowKeyPress($event, row, _getIndex(index, dataIndex))\"\n ></tr>\n } @if (_whetherShowSummary) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (expandable) {\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"acpGridExpansionColumnDef\">\n <td\n mat-cell\n *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns.length\"\n >\n <div class=\"acp-grid-expansion-detail-wrapper\">\n <div class=\"acp-grid-expansion-detail\">\n <ng-template\n [ngTemplateOutlet]=\"expansionTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: dataIndex,\n expanded: expansionRowStates[dataIndex].expanded,\n }\"\n ></ng-template>\n </div>\n </div>\n </td>\n </ng-container>\n <tr\n mat-row\n *matRowDef=\"\n let row;\n columns: ['acpGridExpansionColumnDef'];\n let dataIndex = dataIndex\n \"\n class=\"acp-grid-expansion\"\n [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n ></tr>\n }\n </table>\n }\n </div>\n\n <!-- No result -->\n @if (_hasNoResult) {\n <div class=\"acp-grid-no-result\">\n @if (noResultTemplate) {\n <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\n } @else { {{ noResultText }} }\n </div>\n }\n </div>\n\n <!-- Tool sidebar -->\n @if (showSidebar) {\n <div class=\"acp-grid-sidebar\">\n @if (sidebarTemplate) {\n <ng-template [ngTemplateOutlet]=\"sidebarTemplate\"></ng-template>\n }\n </div>\n }\n</div>\n\n<div class=\"acp-grid-footer\">\n <!-- Status Bar -->\n @if (showStatusbar) {\n <div class=\"acp-grid-statusbar\">\n @if (statusbarTemplate) {\n <ng-template [ngTemplateOutlet]=\"statusbarTemplate\"></ng-template>\n }\n </div>\n }\n\n <!-- Pagination -->\n <div class=\"acp-grid-pagination\">\n @if (paginationTemplate) {\n <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\n } @else {\n <mat-paginator\n [class.mat-paginator-hidden]=\"!showPaginator\"\n [showFirstLastButtons]=\"showFirstLastButtons\"\n [length]=\"length\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [hidePageSize]=\"hidePageSize\"\n (page)=\"_onPage($event)\"\n [disabled]=\"pageDisabled\"\n ></mat-paginator>\n }\n </div>\n</div>\n\n<!-- Header template for extra content -->\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\n @if (headerExtraTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(headerExtraTemplate)?.[col.field]) | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } }\n</ng-template>\n", styles: [".mat-column-resize-table.cdk-column-resize-with-resized-column{table-layout:fixed}.mat-column-resize-flex .mat-mdc-header-cell,.mat-column-resize-flex .mat-mdc-cell{box-sizing:border-box;min-width:32px}.mat-mdc-header-cell{position:relative}.mat-resizable{box-sizing:border-box}.mat-mdc-header-cell:not(.mat-resizable):after,.mat-resizable-handle{position:absolute;bottom:0;top:0;right:0;width:1px;background:transparent;transition:background .3s cubic-bezier(.55,0,.55,.2)}.mat-mdc-header-cell:not(.mat-resizable):after{content:\"\"}[dir=rtl] .mat-mdc-header-cell:not(.mat-resizable):after,[dir=rtl] .mat-resizable-handle{left:0;right:auto}[dir=rtl] .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-header-cell,[dir=rtl] .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell{border-left:none}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell{border-right:none}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell:not(.mat-resizable):after{background-color:var(--acp-grid-resizable-handle-disabled-background-color, var(--mat-sys-outline-variant))}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle{background-color:var(--acp-grid-resizable-handle-hover-background-color, var(--mat-sys-primary))}.mat-resizable.cdk-resizable-overlay-thumb-active>.mat-resizable-handle{opacity:0;transition:none}.mat-resizable-handle:focus,.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus{outline:none;background-color:var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary))}.mat-column-resize-overlay-thumb{background:transparent;cursor:col-resize;width:100%;height:100%;transition:background .3s cubic-bezier(.55,0,.55,.2);-webkit-user-select:none;user-select:none}.mat-column-resize-overlay-thumb:active{will-change:transform;background:linear-gradient(90deg,transparent,transparent 7px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 7px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 9px,transparent 9px,transparent)}.mat-column-resize-overlay-thumb:active .mat-column-resize-overlay-thumb-top{background:linear-gradient(90deg,transparent,transparent 4px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 4px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 12px,transparent 12px,transparent)}.mat-column-resize-overlay-thumb-top{width:100%}.acp-grid{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant));border-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium))}.acp-grid .mat-mdc-table{--mat-table-row-item-outline-color: var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid .mat-mdc-table.mat-table-striped .mat-row-odd{background-color:var(--acp-grid-table-row-striped-background-color, var(--mat-sys-surface-container))}.acp-grid .mat-mdc-table.mat-table-hover .mat-mdc-row:hover{background-color:var(--acp-grid-table-row-hover-background-color, var(--mat-sys-secondary-container))}.acp-grid .mat-mdc-table.mat-table-hover .mat-mdc-row.selected:hover{background-color:var(--acp-grid-table-row-selected-hover-background-color, var(--mat-sys-primary-container))}.acp-grid .mat-mdc-table .mat-mdc-row.acp-grid-row-active{background-color:var(--acp-grid-table-row-hover-background-color, var(--mat-sys-secondary-container))}.acp-grid .mat-mdc-table .mat-mdc-row.selected{background-color:var(--acp-grid-table-row-selected-background-color, var(--mat-sys-secondary-container))}.acp-grid .mat-mdc-table .mat-mdc-row:focus{outline:none}.acp-grid .mat-mdc-table .mat-mdc-row:focus-visible,.acp-grid .mat-mdc-table .mat-mdc-row.acp-grid-row-active:not(:focus){outline:2px solid var(--acp-grid-table-cell-selected-outline-color, var(--mat-sys-primary));outline-offset:-2px}.acp-grid .mat-mdc-table .mat-mdc-cell.selected{box-shadow:inset 0 0 0 1px var(--acp-grid-table-cell-selected-outline-color, var(--mat-sys-primary))}.acp-grid .mat-table-container{overflow:auto}.acp-grid .mat-table-container.mat-table-with-data{flex:1}.acp-grid .mat-mdc-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-header-cell:not(.acp-grid-checkbox-cell),.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-footer-cell:not(.acp-grid-checkbox-cell),.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-cell:not(.acp-grid-checkbox-cell){min-width:var(--acp-grid-table-cell-min-width, 80px)}.acp-grid .mat-table-sticky-left{border-right:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .acp-grid .mat-table-sticky-left{border-right-width:0;border-left:1px solid var(--mat-table-row-item-outline-color)}.acp-grid .mat-table-sticky-right{border-left:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .acp-grid .mat-table-sticky-right{border-left-width:0;border-right:1px solid var(--mat-table-row-item-outline-color)}.acp-grid .mat-mdc-footer-cell{border-top:1px solid var(--mat-table-row-item-outline-color);background-color:var(--acp-grid-table-footer-background-color, var(--mat-sys-surface-container))}.acp-grid .mat-mdc-row.acp-grid-expansion{height:0;overflow:hidden}.acp-grid .mat-mdc-row.acp-grid-expansion .mat-mdc-cell{padding-top:0;padding-bottom:0}.acp-grid .mat-mdc-row.acp-grid-expansion.collapsed .mat-mdc-cell{border-bottom-width:0}.acp-grid .mat-sort-header-icon{margin-left:4px}[dir=rtl] .acp-grid .mat-sort-header-icon{margin-left:0;margin-right:4px}.acp-grid .mat-header-cell-inner{display:inline-flex;align-items:center;vertical-align:middle}.acp-grid .mat-mdc-paginator{border-top:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant));border-bottom-left-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium));border-bottom-right-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium))}.acp-grid .mat-paginator-hidden{display:none}.acp-grid .acp-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mat-checkbox-state-layer-size, 40px)) / 2)}.acp-grid-progress{position:absolute;top:0;z-index:120;width:100%}.acp-grid-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-bottom:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-toolbar-content{flex:1;width:0;padding:0 8px}.acp-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.acp-grid-content{flex-direction:column;width:0}.acp-grid-sidebar{max-width:50%;border-left:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}[dir=rtl] .acp-grid-sidebar{border-left-width:0;border-right:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-footer{position:relative;z-index:1}.acp-grid-statusbar{display:flex;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-top:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.acp-grid-expansion-placeholder{display:inline-block;vertical-align:middle;width:var(--mat-icon-button-state-layer-size, var(--acp-grid-row-expand-button-size, 40px));height:var(--mat-icon-button-state-layer-size, var(--acp-grid-row-expand-button-size, 40px))}.acp-grid-expansion-detail-wrapper{display:grid;grid-template-rows:0fr;grid-template-columns:100%;padding:0;overflow:hidden}.acp-grid-expansion.expanded .acp-grid-expansion-detail-wrapper{grid-template-rows:1fr;padding:calc((var(--mat-table-row-item-container-height, 52px) - 20px) / 2) 0}.acp-grid-expansion-detail{min-height:0}.acp-grid-animations-enabled .acp-grid-expansion-detail-wrapper{transition:all 225ms cubic-bezier(.4,0,.2,1)}.acp-grid-row-expand-button.expanded .acp-grid-row-expand-icon{transform:rotate(90deg)}.acp-grid-row-expand-button.mat-mdc-icon-button,.acp-grid-row-expand-button+acp-grid-cell{vertical-align:middle}.acp-grid-size-small{--mat-table-header-container-height: 40px;--mat-table-row-item-container-height: 36px;--mat-table-footer-container-height: 36px;--mat-table-header-headline-size: .8125rem;--mat-table-row-item-label-text-size: .8125rem;--mat-table-footer-supporting-text-size: .8125rem;--mat-icon-button-state-layer-size: 32px;--mat-checkbox-state-layer-size: 32px;--mat-paginator-container-size: 48px;--mat-button-outlined-container-height: 32px;--mat-button-filled-container-height: 32px;--mat-button-protected-container-height: 32px;--mat-button-text-container-height: 32px;--mat-button-tonal-container-height: 32px}.acp-grid-size-small :is(.mat-mdc-header-cell,.mat-mdc-footer-cell,.mat-mdc-cell):not(.acp-grid-checkbox-cell){padding-left:8px;padding-right:8px}.acp-grid-size-small .acp-grid-toolbar,.acp-grid-size-small .acp-grid-statusbar{padding:4px}.acp-grid-size-large{--mat-table-header-container-height: 64px;--mat-table-row-item-container-height: 60px;--mat-table-footer-container-height: 60px;--mat-table-header-headline-size: 1rem;--mat-table-row-item-label-text-size: 1rem;--mat-table-footer-supporting-text-size: 1rem;--mat-paginator-container-size: 64px}.acp-grid-size-large :is(.mat-mdc-header-cell,.mat-mdc-footer-cell,.mat-mdc-cell):not(.acp-grid-checkbox-cell){padding-left:20px;padding-right:20px}.acp-grid-size-large .acp-grid-toolbar,.acp-grid-size-large .acp-grid-statusbar{padding:12px}\n"] }]
|
|
5708
5996
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], table: [{
|
|
5709
5997
|
type: ViewChild,
|
|
5710
5998
|
args: [MatTable]
|
|
@@ -5911,176 +6199,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
5911
6199
|
}] } });
|
|
5912
6200
|
|
|
5913
6201
|
/**
|
|
5914
|
-
*
|
|
5915
|
-
*
|
|
6202
|
+
* Lets a text input drive the rows of an `acp-data-grid` while keeping the focus in the input,
|
|
6203
|
+
* like an autocomplete: ArrowDown/ArrowUp move the active row, PageDown/PageUp change page and
|
|
6204
|
+
* Enter runs the row click (selection and `rowClick`) on the active row.
|
|
6205
|
+
*
|
|
6206
|
+
* @example
|
|
6207
|
+
* ```html
|
|
6208
|
+
* <input matInput [acpGridNavigationFor]="grid" />
|
|
6209
|
+
* <acp-data-grid #grid [data]="results" [columns]="columns" (rowClick)="pick($event.rowData)" />
|
|
6210
|
+
* ```
|
|
5916
6211
|
*/
|
|
5917
|
-
class
|
|
5918
|
-
/**
|
|
5919
|
-
|
|
5920
|
-
/**
|
|
5921
|
-
|
|
5922
|
-
|
|
5923
|
-
|
|
5924
|
-
|
|
5925
|
-
// --- Signals Públicos para Exponer el Estado ---
|
|
5926
|
-
/**
|
|
5927
|
-
* Signal público que expone el índice de la fila enfocada (usado por componentes como DataGrid).
|
|
5928
|
-
* Es un signal escribible porque el componente hijo (DataGrid) es quien actualiza su valor.
|
|
5929
|
-
*/
|
|
5930
|
-
focusedRowIndex = signal(-1, /* @ts-ignore */
|
|
5931
|
-
...(ngDevMode ? [{ debugName: "focusedRowIndex" }] : /* istanbul ignore next */ []));
|
|
5932
|
-
/**
|
|
5933
|
-
* Signal público que expone el nombre del elemento actualmente enfocado.
|
|
5934
|
-
* Es un signal `computed` que se deriva automáticamente del `currentFocusIndex` privado.
|
|
5935
|
-
*/
|
|
5936
|
-
focusedElementName = computed(() => {
|
|
5937
|
-
const index = this.currentFocusIndex();
|
|
5938
|
-
if (index >= 0 && index < this.focusableElements.length) {
|
|
5939
|
-
return this.focusableElements[index].name;
|
|
5940
|
-
}
|
|
5941
|
-
return '';
|
|
5942
|
-
}, /* @ts-ignore */
|
|
5943
|
-
...(ngDevMode ? [{ debugName: "focusedElementName" }] : /* istanbul ignore next */ []));
|
|
5944
|
-
/**
|
|
5945
|
-
* Registra un nuevo elemento en el sistema de navegación por teclado.
|
|
5946
|
-
* @param element El objeto FocusableElement a registrar.
|
|
5947
|
-
*/
|
|
5948
|
-
registerElement(element) {
|
|
5949
|
-
if (!element || !element.element) {
|
|
5950
|
-
console.error('KeyboardNavigationService: No se puede registrar el elemento. El ElementRef es undefined o nulo. ' +
|
|
5951
|
-
'Asegúrate de que el @ViewChild esté correctamente configurado y que el elemento exista en el DOM cuando ngAfterViewInit se ejecute.', element);
|
|
5952
|
-
return; // Salimos del método para evitar el crash
|
|
5953
|
-
}
|
|
5954
|
-
this.focusableElements.push(element);
|
|
5955
|
-
// Configurar eventos de teclado para este elemento
|
|
5956
|
-
fromEvent(element.element?.nativeElement, 'keydown')
|
|
5957
|
-
.pipe(takeUntil(this.destroy$), filter(event => ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)))
|
|
5958
|
-
.subscribe(event => {
|
|
5959
|
-
event.preventDefault(); // Prevenir el comportamiento por defecto del navegador (scroll, etc.)
|
|
5960
|
-
this.handleKeyNavigation(event.key);
|
|
5961
|
-
});
|
|
5962
|
-
// Configurar eventos de foco para este elemento
|
|
5963
|
-
fromEvent(element.element?.nativeElement, 'focus')
|
|
5964
|
-
.pipe(takeUntil(this.destroy$))
|
|
5965
|
-
.subscribe(() => {
|
|
5966
|
-
const index = this.focusableElements.findIndex(e => e.element === element.element);
|
|
5967
|
-
this.currentFocusIndex.set(index);
|
|
5968
|
-
// Ejecutar el callback onFocus si está definido
|
|
5969
|
-
if (element.onFocus) {
|
|
5970
|
-
element.onFocus(index);
|
|
5971
|
-
}
|
|
6212
|
+
class AcpGridNavigationFor {
|
|
6213
|
+
/** The grid controlled by this input. */
|
|
6214
|
+
grid = input.required({ ...(ngDevMode ? { debugName: "grid" } : /* istanbul ignore next */ {}), alias: 'acpGridNavigationFor' });
|
|
6215
|
+
/** Whether the first row becomes active each time the grid data changes. */
|
|
6216
|
+
acpGridNavigationActivateFirstRow = input(true, { ...(ngDevMode ? { debugName: "acpGridNavigationActivateFirstRow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
6217
|
+
constructor() {
|
|
6218
|
+
effect(() => {
|
|
6219
|
+
this.grid()._activateFirstRowOnDataChange = this.acpGridNavigationActivateFirstRow();
|
|
5972
6220
|
});
|
|
5973
6221
|
}
|
|
5974
|
-
|
|
5975
|
-
|
|
5976
|
-
|
|
5977
|
-
*/
|
|
5978
|
-
unregisterElement(element) {
|
|
5979
|
-
const index = this.focusableElements.findIndex(e => e.element === element);
|
|
5980
|
-
if (index !== -1) {
|
|
5981
|
-
this.focusableElements.splice(index, 1);
|
|
5982
|
-
// Si el elemento eliminado estaba enfocado, resetear el estado del foco
|
|
5983
|
-
if (this.currentFocusIndex() === index) {
|
|
5984
|
-
this.currentFocusIndex.set(-1);
|
|
5985
|
-
}
|
|
5986
|
-
}
|
|
5987
|
-
}
|
|
5988
|
-
/**
|
|
5989
|
-
* Mueve el foco a un elemento específico por su nombre.
|
|
5990
|
-
* @param name El nombre único del elemento al que se quiere mover el foco.
|
|
5991
|
-
* @param index Opcional: el índice interno a enfocar (ej: el índice de una fila en una tabla).
|
|
5992
|
-
*/
|
|
5993
|
-
focusElement(name, index) {
|
|
5994
|
-
const elementIndex = this.focusableElements.findIndex(e => e.name === name);
|
|
5995
|
-
if (elementIndex !== -1) {
|
|
5996
|
-
this.currentFocusIndex.set(elementIndex);
|
|
5997
|
-
// Forzar el foco en el elemento del DOM
|
|
5998
|
-
this.focusableElements[elementIndex].element.nativeElement.focus();
|
|
5999
|
-
// Si el elemento tiene un callback de cambio de foco, llamarlo
|
|
6000
|
-
if (this.focusableElements[elementIndex].onFocusedChange && index !== undefined) {
|
|
6001
|
-
this.focusableElements[elementIndex].onFocusedChange(index);
|
|
6002
|
-
}
|
|
6003
|
-
}
|
|
6004
|
-
}
|
|
6005
|
-
/**
|
|
6006
|
-
* Actualiza el índice enfocado (usado por componentes internos como una tabla).
|
|
6007
|
-
* @param index El nuevo índice enfocado.
|
|
6008
|
-
*/
|
|
6009
|
-
updateFocusedIndex(index) {
|
|
6010
|
-
this.focusedRowIndex.set(index);
|
|
6011
|
-
// Obtener el elemento actualmente enfocado y llamar a su callback
|
|
6012
|
-
const currentElement = this.focusableElements[this.currentFocusIndex()];
|
|
6013
|
-
if (currentElement?.onFocusedChange) {
|
|
6014
|
-
currentElement.onFocusedChange(index);
|
|
6015
|
-
}
|
|
6016
|
-
}
|
|
6017
|
-
/**
|
|
6018
|
-
* Maneja la lógica de navegación basada en la tecla presionada.
|
|
6019
|
-
* @param key La tecla presionada ('ArrowUp', 'ArrowDown', etc.).
|
|
6020
|
-
*/
|
|
6021
|
-
handleKeyNavigation(key) {
|
|
6022
|
-
if (this.currentFocusIndex() === -1)
|
|
6222
|
+
_onKeydown(event) {
|
|
6223
|
+
const grid = this.grid();
|
|
6224
|
+
if (!grid.keyboardNavigation() || event.altKey) {
|
|
6023
6225
|
return;
|
|
6024
|
-
|
|
6025
|
-
switch (key) {
|
|
6226
|
+
}
|
|
6227
|
+
switch (event.key) {
|
|
6228
|
+
case 'ArrowDown':
|
|
6229
|
+
grid.moveActiveRow(1);
|
|
6230
|
+
break;
|
|
6026
6231
|
case 'ArrowUp':
|
|
6027
|
-
|
|
6028
|
-
// Moverse al elemento anterior en la lista
|
|
6029
|
-
this.currentFocusIndex.set(this.currentFocusIndex() - 1);
|
|
6030
|
-
this.focusableElements[this.currentFocusIndex()].element.nativeElement.focus();
|
|
6031
|
-
}
|
|
6032
|
-
else if (currentElement.onArrowUp) {
|
|
6033
|
-
// Si no hay más elementos arriba, ejecutar el callback personalizado
|
|
6034
|
-
currentElement.onArrowUp();
|
|
6035
|
-
}
|
|
6232
|
+
grid.moveActiveRow(-1);
|
|
6036
6233
|
break;
|
|
6037
|
-
case '
|
|
6038
|
-
|
|
6039
|
-
// Moverse al siguiente elemento en la lista
|
|
6040
|
-
this.currentFocusIndex.set(this.currentFocusIndex() + 1);
|
|
6041
|
-
this.focusableElements[this.currentFocusIndex()].element.nativeElement.focus();
|
|
6042
|
-
}
|
|
6043
|
-
else if (currentElement.onArrowDown) {
|
|
6044
|
-
// Si no hay más elementos abajo, ejecutar el callback personalizado
|
|
6045
|
-
currentElement.onArrowDown();
|
|
6046
|
-
}
|
|
6234
|
+
case 'PageDown':
|
|
6235
|
+
grid.nextPage();
|
|
6047
6236
|
break;
|
|
6048
|
-
case '
|
|
6049
|
-
|
|
6050
|
-
currentElement.onArrowLeft();
|
|
6051
|
-
}
|
|
6237
|
+
case 'PageUp':
|
|
6238
|
+
grid.previousPage();
|
|
6052
6239
|
break;
|
|
6053
|
-
case '
|
|
6054
|
-
if (
|
|
6055
|
-
|
|
6240
|
+
case 'Enter':
|
|
6241
|
+
if (!grid.activateActiveRow(event)) {
|
|
6242
|
+
return;
|
|
6056
6243
|
}
|
|
6057
6244
|
break;
|
|
6245
|
+
default:
|
|
6246
|
+
return;
|
|
6058
6247
|
}
|
|
6248
|
+
event.preventDefault();
|
|
6059
6249
|
}
|
|
6060
|
-
|
|
6061
|
-
|
|
6062
|
-
* Útil cuando los datos de un componente cambian y el foco anterior ya no es válido.
|
|
6063
|
-
*/
|
|
6064
|
-
resetFocusedRowIndex() {
|
|
6065
|
-
this.focusedRowIndex.set(-1);
|
|
6066
|
-
}
|
|
6067
|
-
/**
|
|
6068
|
-
* Método de limpieza para ser llamado cuando el servicio se destruye.
|
|
6069
|
-
* Cierra el Subject `destroy$` para completar todas las suscripciones activas.
|
|
6070
|
-
*/
|
|
6071
|
-
onDestroy() {
|
|
6072
|
-
this.destroy$.next();
|
|
6073
|
-
this.destroy$.complete();
|
|
6074
|
-
}
|
|
6075
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KeyboardNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
6076
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KeyboardNavigationService, providedIn: 'root' });
|
|
6250
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridNavigationFor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
6251
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: AcpGridNavigationFor, isStandalone: true, selector: "[acpGridNavigationFor]", inputs: { grid: { classPropertyName: "grid", publicName: "acpGridNavigationFor", isSignal: true, isRequired: true, transformFunction: null }, acpGridNavigationActivateFirstRow: { classPropertyName: "acpGridNavigationActivateFirstRow", publicName: "acpGridNavigationActivateFirstRow", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "_onKeydown($event)" }, properties: { "attr.aria-controls": "grid().gridId", "attr.aria-activedescendant": "grid()._activeRowId()" } }, exportAs: ["acpGridNavigationFor"], ngImport: i0 });
|
|
6077
6252
|
}
|
|
6078
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type:
|
|
6079
|
-
type:
|
|
6253
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridNavigationFor, decorators: [{
|
|
6254
|
+
type: Directive,
|
|
6080
6255
|
args: [{
|
|
6081
|
-
|
|
6256
|
+
selector: '[acpGridNavigationFor]',
|
|
6257
|
+
exportAs: 'acpGridNavigationFor',
|
|
6258
|
+
host: {
|
|
6259
|
+
'[attr.aria-controls]': 'grid().gridId',
|
|
6260
|
+
'[attr.aria-activedescendant]': 'grid()._activeRowId()',
|
|
6261
|
+
'(keydown)': '_onKeydown($event)',
|
|
6262
|
+
},
|
|
6082
6263
|
}]
|
|
6083
|
-
}] });
|
|
6264
|
+
}], ctorParameters: () => [], propDecorators: { grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "acpGridNavigationFor", required: true }] }], acpGridNavigationActivateFirstRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "acpGridNavigationActivateFirstRow", required: false }] }] } });
|
|
6084
6265
|
|
|
6085
6266
|
/* ============================
|
|
6086
6267
|
HELPERS
|
|
@@ -12440,5 +12621,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
12440
12621
|
* Generated bundle index. Do not edit.
|
|
12441
12622
|
*/
|
|
12442
12623
|
|
|
12443
|
-
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,
|
|
12624
|
+
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, AcpGridNavigationFor, 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, NavAccordionDirective, NavAccordionItemDirective, NavAccordionToggleDirective, OverlayService, Pagination, SidemenuComponent, Spinner, StatusDisplayPipe, SvgIcon, TREND_CONFIGS, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, UserMenu, UserPanel, _AcpPopoverContentBase, acpSearchSelectLooseEquals, acpSearchSelectNormalize, inferKpiTrend, provideAcpCardDefaults, provideAcpDialogDefaults };
|
|
12444
12625
|
//# sourceMappingURL=acontplus-ng-components.mjs.map
|