@acontplus/ng-components 2.3.0 → 2.4.1
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/fesm2022/acontplus-ng-components.mjs +717 -1196
- package/fesm2022/acontplus-ng-components.mjs.map +1 -1
- package/package.json +7 -7
- package/src/_index.scss +5 -0
- package/src/core/theming/_all-theme.scss +6 -0
- package/src/core/tokens/_system.scss +2 -6
- package/src/lib/components/badge/_badge-theme.scss +58 -0
- package/src/lib/components/badge/_m3-badge.scss +52 -0
- package/src/lib/components/badge/badge.scss +318 -0
- package/src/lib/components/kpi-card/_kpi-card-theme.scss +41 -0
- package/src/lib/components/kpi-card/_m3-kpi-card.scss +98 -0
- package/src/lib/components/kpi-card/kpi-card.scss +741 -0
- package/types/acontplus-ng-components.d.ts +223 -317
- package/src/lib/components/autocomplete-wrapper/autocomplete-wrapper.scss +0 -677
- package/src/lib/styles/_elevation.scss +0 -168
- package/src/lib/styles/_token-utils.scss +0 -115
- package/src/styles/_custom-dialog.scss +0 -37
- package/src/styles/_mixins.scss +0 -12
- package/src/styles/index.scss +0 -4
|
@@ -1,46 +1,49 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, ChangeDetectorRef, EventEmitter, booleanAttribute, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, input, output, computed, Directive, ViewContainerRef, Renderer2, signal, afterRenderEffect, untracked, Injectable, viewChild, effect, PLATFORM_ID, Pipe,
|
|
2
|
+
import { inject, ChangeDetectorRef, EventEmitter, booleanAttribute, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, input, output, contentChild, TemplateRef, computed, Directive, ViewContainerRef, Renderer2, signal, afterRenderEffect, untracked, Injectable, viewChild, effect, PLATFORM_ID, Pipe, ViewChild, KeyValueDiffers, InjectionToken, NgZone, CSP_NONCE, DOCUMENT, ElementRef, Injector, ContentChildren, model, forwardRef, ANIMATION_MODULE_TYPE, ApplicationRef, ContentChild, HostListener, SecurityContext } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/material/button';
|
|
4
4
|
import { MatIconButton, MatButtonModule, MatButton, MatMiniFabButton, MatFabButton } from '@angular/material/button';
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
5
|
+
import { NgClass, NgTemplateOutlet, isPlatformBrowser, AsyncPipe, CurrencyPipe, DatePipe, DecimalPipe, PercentPipe } from '@angular/common';
|
|
6
|
+
import { RouterLink } from '@angular/router';
|
|
7
|
+
import { MatChipSet, MatChip, MatChipAvatar, MatChipTrailingIcon, MatChipRemove, MatChipRow, MatChipGrid, MatChipInput, MatChipListbox } from '@angular/material/chips';
|
|
7
8
|
import * as i2 from '@angular/material/icon';
|
|
8
9
|
import { MatIconModule, MatIcon } from '@angular/material/icon';
|
|
10
|
+
import * as i1 from '@angular/material/card';
|
|
11
|
+
import { MatCardModule, MatCard, MatCardHeader, MatCardContent } from '@angular/material/card';
|
|
9
12
|
import { CdkDrag, CdkDragHandle, moveItemInArray, CdkDropList } from '@angular/cdk/drag-drop';
|
|
10
13
|
import * as i1$2 from '@angular/material/dialog';
|
|
11
14
|
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule, MatDialog, MatDialogConfig } from '@angular/material/dialog';
|
|
12
|
-
import { NgClass, NgTemplateOutlet, isPlatformBrowser, AsyncPipe, CurrencyPipe, DatePipe, DecimalPipe, PercentPipe } from '@angular/common';
|
|
13
15
|
import { REPORT_FORMAT, DEFAULT_ICONS, FALLBACK_ICON } from '@acontplus/ui-kit';
|
|
14
16
|
import { MatProgressSpinner } from '@angular/material/progress-spinner';
|
|
15
17
|
import * as i1$4 from '@angular/forms';
|
|
16
18
|
import { FormControl, ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR, FormGroup, Validators } from '@angular/forms';
|
|
17
19
|
import * as i1$3 from '@ng-select/ng-select';
|
|
18
20
|
import { NgSelectModule } from '@ng-select/ng-select';
|
|
19
|
-
import { Subject, firstValueFrom, catchError, of, map, BehaviorSubject,
|
|
21
|
+
import { Subject, firstValueFrom, catchError, of, map, BehaviorSubject, isObservable, merge, combineLatest, Observable, fromEvent, defer, Subscription } from 'rxjs';
|
|
20
22
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
21
23
|
import { HttpClient } from '@angular/common/http';
|
|
22
|
-
import { MatChipRow, MatChipGrid, MatChipInput, MatChipListbox, MatChip } from '@angular/material/chips';
|
|
23
24
|
import { MatFormField, MatLabel, MatHint, MatFormFieldModule } from '@angular/material/form-field';
|
|
24
25
|
import { LiveAnnouncer, _IdGenerator, CdkTrapFocus, FocusMonitor, isFakeMousedownFromScreenReader } from '@angular/cdk/a11y';
|
|
25
26
|
import { ENTER, COMMA, ESCAPE, hasModifierKey, SPACE } from '@angular/cdk/keycodes';
|
|
26
27
|
import { Tabulator, PageModule, ReactiveDataModule, FormatModule, EditModule, ValidateModule, ColumnCalcsModule, SortModule, TooltipModule, DataTreeModule, MoveRowsModule, SelectRowModule, PopupModule, InteractionModule } from 'tabulator-tables';
|
|
27
28
|
import { toSignal } from '@angular/core/rxjs-interop';
|
|
28
|
-
import * as
|
|
29
|
-
import { Overlay,
|
|
29
|
+
import * as i3 from '@angular/cdk/overlay';
|
|
30
|
+
import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
|
|
30
31
|
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
|
31
32
|
import { ComponentPortal, CdkPortalOutlet, TemplatePortal, DomPortalOutlet } from '@angular/cdk/portal';
|
|
32
33
|
import * as i7 from '@angular/material/tooltip';
|
|
33
34
|
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
|
|
34
|
-
import { MatProgressBarModule, MatProgressBar } from '@angular/material/progress-bar';
|
|
35
|
-
import { switchMap, catchError as catchError$1, mapTo, take, takeUntil as takeUntil$1, startWith, pairwise, distinctUntilChanged, share, map as map$1, skip, filter } from 'rxjs/operators';
|
|
36
35
|
import { MatTableDataSource, MatTable, MatColumnDef, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatFooterRowDef, MatFooterRow, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatFooterCellDef, MatFooterCell } from '@angular/material/table';
|
|
37
36
|
import { MatPaginator } from '@angular/material/paginator';
|
|
38
37
|
import { MatSort, MatSortHeader } from '@angular/material/sort';
|
|
39
38
|
import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
|
|
39
|
+
import * as i4 from '@angular/material/progress-bar';
|
|
40
|
+
import { MatProgressBar, MatProgressBarModule } from '@angular/material/progress-bar';
|
|
40
41
|
import { SelectionModel } from '@angular/cdk/collections';
|
|
41
42
|
import { MatBadge } from '@angular/material/badge';
|
|
42
|
-
import
|
|
43
|
+
import * as i3$1 from '@angular/material/menu';
|
|
44
|
+
import { MatMenu, MatMenuItem, MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
|
|
43
45
|
import { _animationsDisabled, MatNativeDateModule } from '@angular/material/core';
|
|
46
|
+
import { mapTo, take, takeUntil, startWith, pairwise, distinctUntilChanged, share, map as map$1, skip, filter } from 'rxjs/operators';
|
|
44
47
|
import { CdkTable, CdkColumnDef } from '@angular/cdk/table';
|
|
45
48
|
import { coerceCssPixelValue } from '@angular/cdk/coercion';
|
|
46
49
|
import { Directionality } from '@angular/cdk/bidi';
|
|
@@ -54,6 +57,7 @@ import * as i2$1 from '@angular/material/input';
|
|
|
54
57
|
import { MatInputModule } from '@angular/material/input';
|
|
55
58
|
import * as i6 from '@angular/material/list';
|
|
56
59
|
import { MatListModule } from '@angular/material/list';
|
|
60
|
+
import { MatDividerModule } from '@angular/material/divider';
|
|
57
61
|
import { TranslocoService } from '@jsverse/transloco';
|
|
58
62
|
|
|
59
63
|
class AcpAlert {
|
|
@@ -73,10 +77,10 @@ class AcpAlert {
|
|
|
73
77
|
this._changeDetectorRef.markForCheck();
|
|
74
78
|
this.closed.emit(this);
|
|
75
79
|
}
|
|
76
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
77
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0
|
|
80
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
81
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpAlert, isStandalone: true, selector: "acp-alert", inputs: { type: "type", dismissible: ["dismissible", "dismissible", booleanAttribute], elevation: "elevation" }, outputs: { closed: "closed" }, host: { attributes: { "role": "alert" }, properties: { "class": "hostClassList", "class.acp-alert-dismissible": "dismissible" } }, exportAs: ["acpAlert"], ngImport: i0, template: "<ng-content></ng-content>\n@if (dismissible) {\n<div class=\"acp-alert-close\">\n <button matIconButton type=\"button\" aria-label=\"Close\" (click)=\"_onClosed()\">\n <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" 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</div>\n}\n", styles: [".acp-alert{position:relative;display:block;padding:.75rem 1rem;margin-bottom:1rem;line-height:1.5;border:1px solid var(--acp-alert-outline-color, var(--mat-sys-outline-variant));border-radius:var(--acp-alert-container-shape, var(--mat-sys-corner-small));background-color:var(--acp-alert-background-color, var(--mat-sys-surface-container));color:var(--acp-alert-text-color, var(--mat-sys-on-surface))}.acp-alert.acp-alert-info{border-color:var(--acp-alert-info-outline-color, light-dark(#abc7ff, #005cbb));background-color:var(--acp-alert-info-background-color, light-dark(#d7e3ff, #002f65));color:var(--acp-alert-info-text-color, light-dark(#002f65, #d7e3ff))}.acp-alert.acp-alert-success{border-color:var(--acp-alert-success-outline-color, light-dark(#02e600, #026e00));background-color:var(--acp-alert-success-background-color, light-dark(#cbffb8, #013a00));color:var(--acp-alert-success-text-color, light-dark(#013a00, #cbffb8))}.acp-alert.acp-alert-warning{border-color:var(--acp-alert-warning-outline-color, light-dark(#cdcd00, #626200));background-color:var(--acp-alert-warning-background-color, light-dark(#fffeac, #323200));color:var(--acp-alert-warning-text-color, light-dark(#323200, #fffeac))}.acp-alert.acp-alert-danger{border-color:var(--acp-alert-danger-outline-color, light-dark(#ffb4a8, #c00100));background-color:var(--acp-alert-danger-background-color, light-dark(#ffdad4, #690100));color:var(--acp-alert-danger-text-color, light-dark(#690100, #ffdad4))}.acp-alert-close{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem}[dir=rtl] .acp-alert-close{right:auto;left:0}.acp-alert-dismissible{padding-right:3rem}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
78
82
|
}
|
|
79
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
83
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpAlert, decorators: [{
|
|
80
84
|
type: Component,
|
|
81
85
|
args: [{ selector: 'acp-alert', exportAs: 'acpAlert', host: {
|
|
82
86
|
'[class]': 'hostClassList',
|
|
@@ -94,6 +98,192 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
|
|
|
94
98
|
type: Output
|
|
95
99
|
}] } });
|
|
96
100
|
|
|
101
|
+
const TREND_CONFIGS = {
|
|
102
|
+
up: { value: '↑', icon: 'trending_up', color: 'success' },
|
|
103
|
+
down: { value: '↓', icon: 'trending_down', color: 'danger' },
|
|
104
|
+
neutral: { value: '→', icon: 'trending_flat', color: 'neutral' },
|
|
105
|
+
none: { value: '', icon: '', color: 'neutral' },
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
class AcpBadge {
|
|
109
|
+
label = input(/* @ts-ignore */
|
|
110
|
+
...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
111
|
+
value = input(/* @ts-ignore */
|
|
112
|
+
...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
113
|
+
variant = input('filled', /* @ts-ignore */
|
|
114
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
115
|
+
color = input('primary', /* @ts-ignore */
|
|
116
|
+
...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
117
|
+
size = input('md', /* @ts-ignore */
|
|
118
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
119
|
+
shape = input('rounded', /* @ts-ignore */
|
|
120
|
+
...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
|
|
121
|
+
icon = input(/* @ts-ignore */
|
|
122
|
+
...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
123
|
+
trailingIcon = input(/* @ts-ignore */
|
|
124
|
+
...(ngDevMode ? [undefined, { debugName: "trailingIcon" }] : /* istanbul ignore next */ []));
|
|
125
|
+
svgIcon = input(/* @ts-ignore */
|
|
126
|
+
...(ngDevMode ? [undefined, { debugName: "svgIcon" }] : /* istanbul ignore next */ []));
|
|
127
|
+
trailingSvgIcon = input(/* @ts-ignore */
|
|
128
|
+
...(ngDevMode ? [undefined, { debugName: "trailingSvgIcon" }] : /* istanbul ignore next */ []));
|
|
129
|
+
trend = input('none', /* @ts-ignore */
|
|
130
|
+
...(ngDevMode ? [{ debugName: "trend" }] : /* istanbul ignore next */ []));
|
|
131
|
+
clickable = input(false, { ...(ngDevMode ? { debugName: "clickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
132
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
133
|
+
loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
134
|
+
selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
135
|
+
highlighted = input(false, { ...(ngDevMode ? { debugName: "highlighted" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
136
|
+
removable = input(false, { ...(ngDevMode ? { debugName: "removable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
137
|
+
routerLink = input(null, /* @ts-ignore */
|
|
138
|
+
...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
|
|
139
|
+
href = input(null, /* @ts-ignore */
|
|
140
|
+
...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
|
|
141
|
+
ariaLabelOverride = input(null, /* @ts-ignore */
|
|
142
|
+
...(ngDevMode ? [{ debugName: "ariaLabelOverride" }] : /* istanbul ignore next */ []));
|
|
143
|
+
clicked = output();
|
|
144
|
+
removed = output();
|
|
145
|
+
iconTemplate = contentChild('icon', { ...(ngDevMode ? { debugName: "iconTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
146
|
+
trailingIconTemplate = contentChild('trailingIcon', { ...(ngDevMode ? { debugName: "trailingIconTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
147
|
+
isTrending = computed(() => this.trend() !== 'none', /* @ts-ignore */
|
|
148
|
+
...(ngDevMode ? [{ debugName: "isTrending" }] : /* istanbul ignore next */ []));
|
|
149
|
+
trendConfig = computed(() => TREND_CONFIGS[this.trend()], /* @ts-ignore */
|
|
150
|
+
...(ngDevMode ? [{ debugName: "trendConfig" }] : /* istanbul ignore next */ []));
|
|
151
|
+
effectiveColor = computed(() => {
|
|
152
|
+
if (this.isTrending())
|
|
153
|
+
return this.trendConfig().color;
|
|
154
|
+
return this.color();
|
|
155
|
+
}, /* @ts-ignore */
|
|
156
|
+
...(ngDevMode ? [{ debugName: "effectiveColor" }] : /* istanbul ignore next */ []));
|
|
157
|
+
effectiveIcon = computed(() => {
|
|
158
|
+
if (this.isTrending())
|
|
159
|
+
return this.trendConfig().icon;
|
|
160
|
+
return this.icon();
|
|
161
|
+
}, /* @ts-ignore */
|
|
162
|
+
...(ngDevMode ? [{ debugName: "effectiveIcon" }] : /* istanbul ignore next */ []));
|
|
163
|
+
effectiveSvgIcon = computed(() => {
|
|
164
|
+
if (this.isTrending())
|
|
165
|
+
return undefined;
|
|
166
|
+
return this.svgIcon();
|
|
167
|
+
}, /* @ts-ignore */
|
|
168
|
+
...(ngDevMode ? [{ debugName: "effectiveSvgIcon" }] : /* istanbul ignore next */ []));
|
|
169
|
+
effectiveTrailingIcon = computed(() => {
|
|
170
|
+
if (this.removable())
|
|
171
|
+
return undefined;
|
|
172
|
+
return this.trailingIcon();
|
|
173
|
+
}, /* @ts-ignore */
|
|
174
|
+
...(ngDevMode ? [{ debugName: "effectiveTrailingIcon" }] : /* istanbul ignore next */ []));
|
|
175
|
+
effectiveTrailingSvgIcon = computed(() => {
|
|
176
|
+
if (this.removable())
|
|
177
|
+
return undefined;
|
|
178
|
+
return this.trailingSvgIcon();
|
|
179
|
+
}, /* @ts-ignore */
|
|
180
|
+
...(ngDevMode ? [{ debugName: "effectiveTrailingSvgIcon" }] : /* istanbul ignore next */ []));
|
|
181
|
+
effectiveValue = computed(() => {
|
|
182
|
+
if (this.isTrending())
|
|
183
|
+
return this.value() ?? this.trendConfig().value;
|
|
184
|
+
return this.value();
|
|
185
|
+
}, /* @ts-ignore */
|
|
186
|
+
...(ngDevMode ? [{ debugName: "effectiveValue" }] : /* istanbul ignore next */ []));
|
|
187
|
+
isLink = computed(() => this.href() !== null || this.routerLink() !== null, /* @ts-ignore */
|
|
188
|
+
...(ngDevMode ? [{ debugName: "isLink" }] : /* istanbul ignore next */ []));
|
|
189
|
+
isInteractive = computed(() => this.clickable() || this.removable() || this.isLink(), /* @ts-ignore */
|
|
190
|
+
...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
|
|
191
|
+
isDisabled = computed(() => this.disabled() || this.loading(), /* @ts-ignore */
|
|
192
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
193
|
+
isHighlighted = computed(() => this.highlighted() || this.selected(), /* @ts-ignore */
|
|
194
|
+
...(ngDevMode ? [{ debugName: "isHighlighted" }] : /* istanbul ignore next */ []));
|
|
195
|
+
chipClasses = computed(() => [
|
|
196
|
+
`acp-badge--${this.variant()}`,
|
|
197
|
+
`acp-badge--${this.size()}`,
|
|
198
|
+
`acp-badge--${this.shape()}`,
|
|
199
|
+
].join(' '), /* @ts-ignore */
|
|
200
|
+
...(ngDevMode ? [{ debugName: "chipClasses" }] : /* istanbul ignore next */ []));
|
|
201
|
+
hostClasses = computed(() => {
|
|
202
|
+
const classes = [
|
|
203
|
+
'acp-badge',
|
|
204
|
+
`acp-badge--${this.variant()}`,
|
|
205
|
+
`acp-badge--${this.effectiveColor()}`,
|
|
206
|
+
`acp-badge--${this.size()}`,
|
|
207
|
+
`acp-badge--${this.shape()}`,
|
|
208
|
+
];
|
|
209
|
+
if (this.isInteractive())
|
|
210
|
+
classes.push('acp-badge--interactive');
|
|
211
|
+
if (this.isDisabled())
|
|
212
|
+
classes.push('acp-badge--disabled');
|
|
213
|
+
if (this.selected())
|
|
214
|
+
classes.push('acp-badge--selected');
|
|
215
|
+
if (this.loading())
|
|
216
|
+
classes.push('acp-badge--loading');
|
|
217
|
+
if (this.removable())
|
|
218
|
+
classes.push('acp-badge--removable');
|
|
219
|
+
if (this.isTrending())
|
|
220
|
+
classes.push('acp-badge--trend');
|
|
221
|
+
return classes.join(' ');
|
|
222
|
+
}, /* @ts-ignore */
|
|
223
|
+
...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
224
|
+
ariaLabel = computed(() => {
|
|
225
|
+
const override = this.ariaLabelOverride();
|
|
226
|
+
if (override)
|
|
227
|
+
return override;
|
|
228
|
+
const label = this.label() ?? '';
|
|
229
|
+
const value = this.effectiveValue() ?? '';
|
|
230
|
+
const separator = label && value ? ' ' : '';
|
|
231
|
+
return `${label}${separator}${value}`.trim() || null;
|
|
232
|
+
}, /* @ts-ignore */
|
|
233
|
+
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
234
|
+
onChipClick(event) {
|
|
235
|
+
if (this.isDisabled()) {
|
|
236
|
+
event.preventDefault();
|
|
237
|
+
return;
|
|
238
|
+
}
|
|
239
|
+
this.clicked.emit();
|
|
240
|
+
}
|
|
241
|
+
onRemove(_event) {
|
|
242
|
+
if (this.isDisabled())
|
|
243
|
+
return;
|
|
244
|
+
this.removed.emit();
|
|
245
|
+
}
|
|
246
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
247
|
+
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 });
|
|
248
|
+
}
|
|
249
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpBadge, decorators: [{
|
|
250
|
+
type: Component,
|
|
251
|
+
args: [{ selector: 'acp-badge', exportAs: 'acpBadge', standalone: true, imports: [
|
|
252
|
+
NgClass,
|
|
253
|
+
NgTemplateOutlet,
|
|
254
|
+
RouterLink,
|
|
255
|
+
MatChipSet,
|
|
256
|
+
MatChip,
|
|
257
|
+
MatChipAvatar,
|
|
258
|
+
MatChipTrailingIcon,
|
|
259
|
+
MatChipRemove,
|
|
260
|
+
MatIconModule,
|
|
261
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
262
|
+
'[class]': 'hostClasses()',
|
|
263
|
+
}, 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"] }]
|
|
264
|
+
}], 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 }] }] } });
|
|
265
|
+
|
|
266
|
+
const ACP_BADGE_COLORS = [
|
|
267
|
+
'primary',
|
|
268
|
+
'secondary',
|
|
269
|
+
'tertiary',
|
|
270
|
+
'success',
|
|
271
|
+
'warning',
|
|
272
|
+
'danger',
|
|
273
|
+
'info',
|
|
274
|
+
'neutral',
|
|
275
|
+
'custom',
|
|
276
|
+
];
|
|
277
|
+
const ACP_BADGE_VARIANTS = [
|
|
278
|
+
'filled',
|
|
279
|
+
'outlined',
|
|
280
|
+
'soft',
|
|
281
|
+
'tonal',
|
|
282
|
+
'text',
|
|
283
|
+
];
|
|
284
|
+
const ACP_BADGE_SIZES = ['xs', 'sm', 'md', 'lg'];
|
|
285
|
+
const ACP_BADGE_SHAPES = ['rounded', 'pill', 'square'];
|
|
286
|
+
|
|
97
287
|
/**
|
|
98
288
|
* A versatile card component that wraps Angular Material's mat-card with additional functionality
|
|
99
289
|
* and customization options. This component provides a consistent card layout with configurable
|
|
@@ -248,10 +438,10 @@ class DynamicCard {
|
|
|
248
438
|
handleKeyPress(event) {
|
|
249
439
|
this.keyPress.emit(event);
|
|
250
440
|
}
|
|
251
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
252
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0
|
|
441
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DynamicCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
442
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DynamicCard, isStandalone: true, selector: "acp-dynamic-card", inputs: { cardTitle: { classPropertyName: "cardTitle", publicName: "cardTitle", isSignal: true, isRequired: false, transformFunction: null }, cardSubtitle: { classPropertyName: "cardSubtitle", publicName: "cardSubtitle", isSignal: true, isRequired: false, transformFunction: null }, avatarImageUrl: { classPropertyName: "avatarImageUrl", publicName: "avatarImageUrl", isSignal: true, isRequired: false, transformFunction: null }, isHeaderVisible: { classPropertyName: "isHeaderVisible", publicName: "isHeaderVisible", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null }, hasDivider: { classPropertyName: "hasDivider", publicName: "hasDivider", isSignal: true, isRequired: false, transformFunction: null }, areActionsVisible: { classPropertyName: "areActionsVisible", publicName: "areActionsVisible", isSignal: true, isRequired: false, transformFunction: null }, primaryButtonText: { classPropertyName: "primaryButtonText", publicName: "primaryButtonText", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonText: { classPropertyName: "secondaryButtonText", publicName: "secondaryButtonText", isSignal: true, isRequired: false, transformFunction: null }, primaryButtonIcon: { classPropertyName: "primaryButtonIcon", publicName: "primaryButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonIcon: { classPropertyName: "secondaryButtonIcon", publicName: "secondaryButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, buttonsPosition: { classPropertyName: "buttonsPosition", publicName: "buttonsPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { primaryButtonClicked: "primaryButtonClicked", secondaryButtonClicked: "secondaryButtonClicked", cardClicked: "cardClicked", keyDown: "keyDown", keyUp: "keyUp", keyPress: "keyPress" }, ngImport: i0, template: "<mat-card\n appearance=\"outlined\"\n (click)=\"handleCardClick($event)\"\n (keydown)=\"handleKeyDown($event)\"\n (keyup)=\"handleKeyUp($event)\"\n (keypress)=\"handleKeyPress($event)\"\n [class.mat-card-divider]=\"hasDivider()\"\n>\n @if (isHeaderVisible()) {\n <mat-card-header>\n @if (avatarImageUrl()) {\n <img mat-card-avatar [src]=\"avatarImageUrl()\" alt=\"Card avatar\" />\n } @if (cardTitle()) {\n <mat-card-title>{{ cardTitle() }}</mat-card-title>\n } @if (cardSubtitle()) {\n <mat-card-subtitle>{{ cardSubtitle() }}</mat-card-subtitle>\n }\n </mat-card-header>\n }\n\n <mat-card-content [style.padding]=\"contentPadding()\">\n <ng-content />\n </mat-card-content>\n\n @if (areActionsVisible()) {\n <mat-card-actions [align]=\"buttonsPosition()\">\n @if (secondaryButtonText()) {\n <button mat-button color=\"warn\" (click)=\"handleSecondaryButtonClick($event)\">\n @if (secondaryButtonIcon()) {\n <mat-icon>{{ secondaryButtonIcon() }}</mat-icon>\n } {{ secondaryButtonText() }}\n </button>\n } @if (primaryButtonText()) {\n <button mat-button color=\"primary\" (click)=\"handlePrimaryButtonClick($event)\">\n @if (primaryButtonIcon()) {\n <mat-icon>{{ primaryButtonIcon() }}</mat-icon>\n } {{ primaryButtonText() }}\n </button>\n }\n </mat-card-actions>\n }\n</mat-card>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "directive", type: i1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
|
|
253
443
|
}
|
|
254
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
444
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DynamicCard, decorators: [{
|
|
255
445
|
type: Component,
|
|
256
446
|
args: [{ selector: 'acp-dynamic-card', standalone: true, imports: [MatCardModule, MatButtonModule, MatIconModule], changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, template: "<mat-card\n appearance=\"outlined\"\n (click)=\"handleCardClick($event)\"\n (keydown)=\"handleKeyDown($event)\"\n (keyup)=\"handleKeyUp($event)\"\n (keypress)=\"handleKeyPress($event)\"\n [class.mat-card-divider]=\"hasDivider()\"\n>\n @if (isHeaderVisible()) {\n <mat-card-header>\n @if (avatarImageUrl()) {\n <img mat-card-avatar [src]=\"avatarImageUrl()\" alt=\"Card avatar\" />\n } @if (cardTitle()) {\n <mat-card-title>{{ cardTitle() }}</mat-card-title>\n } @if (cardSubtitle()) {\n <mat-card-subtitle>{{ cardSubtitle() }}</mat-card-subtitle>\n }\n </mat-card-header>\n }\n\n <mat-card-content [style.padding]=\"contentPadding()\">\n <ng-content />\n </mat-card-content>\n\n @if (areActionsVisible()) {\n <mat-card-actions [align]=\"buttonsPosition()\">\n @if (secondaryButtonText()) {\n <button mat-button color=\"warn\" (click)=\"handleSecondaryButtonClick($event)\">\n @if (secondaryButtonIcon()) {\n <mat-icon>{{ secondaryButtonIcon() }}</mat-icon>\n } {{ secondaryButtonText() }}\n </button>\n } @if (primaryButtonText()) {\n <button mat-button color=\"primary\" (click)=\"handlePrimaryButtonClick($event)\">\n @if (primaryButtonIcon()) {\n <mat-icon>{{ primaryButtonIcon() }}</mat-icon>\n } {{ primaryButtonText() }}\n </button>\n }\n </mat-card-actions>\n }\n</mat-card>\n" }]
|
|
257
447
|
}], propDecorators: { cardTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardTitle", required: false }] }], cardSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardSubtitle", required: false }] }], avatarImageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarImageUrl", required: false }] }], isHeaderVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHeaderVisible", required: false }] }], contentPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPadding", required: false }] }], hasDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDivider", required: false }] }], areActionsVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "areActionsVisible", required: false }] }], primaryButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryButtonText", required: false }] }], secondaryButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryButtonText", required: false }] }], primaryButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryButtonIcon", required: false }] }], secondaryButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryButtonIcon", required: false }] }], buttonsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonsPosition", required: false }] }], primaryButtonClicked: [{ type: i0.Output, args: ["primaryButtonClicked"] }], secondaryButtonClicked: [{ type: i0.Output, args: ["secondaryButtonClicked"] }], cardClicked: [{ type: i0.Output, args: ["cardClicked"] }], keyDown: [{ type: i0.Output, args: ["keyDown"] }], keyUp: [{ type: i0.Output, args: ["keyUp"] }], keyPress: [{ type: i0.Output, args: ["keyPress"] }] } });
|
|
@@ -425,10 +615,10 @@ class Button {
|
|
|
425
615
|
}
|
|
426
616
|
return this.text();
|
|
427
617
|
}
|
|
428
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
429
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: Button, isStandalone: true, selector: "acp-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, matStyle: { classPropertyName: "matStyle", publicName: "matStyle", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, reportFormat: { classPropertyName: "reportFormat", publicName: "reportFormat", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { handleClick: "handleClick" }, ngImport: i0, template: "@switch (matStyle()) { @case ('text') {\n<button\n matButton\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('elevated') {\n<button\n matButton=\"elevated\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('outlined') {\n<button\n matButton=\"outlined\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('tonal') {\n<button\n matButton=\"tonal\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('icon') {\n<button\n matIconButton\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('fab') {\n<button\n matFab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('mini-fab') {\n<button\n matMiniFab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('extended-fab') {\n<button\n matFab\n extended\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @default {\n<button\n matButton=\"filled\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} }\n\n<ng-template #buttonContent>\n @if (getIcon()) {\n <mat-icon>{{ getIcon() }}</mat-icon>\n } @if (getDisplayText()) { {{ getDisplayText() }} }\n\n <ng-content />\n</ng-template>\n", styles: [":root{--acp-secondary: #e0e0e0;--acp-secondary-on: #000000;--acp-success: #4caf50;--acp-success-on: #ffffff;--acp-danger: #ba1a1a;--acp-danger-on: #ffffff;--acp-warning: #ff9800;--acp-warning-on: #000000;--acp-info: #2196f3;--acp-info-on: #ffffff;--acp-dark: #212121;--acp-dark-on: #ffffff}.dark-theme{--acp-secondary: #424242;--acp-secondary-on: #ffffff;--acp-success: #81c784;--acp-success-on: #1b5e20;--acp-danger: #ef5350;--acp-danger-on: #b71c1c;--acp-warning: #ffb74d;--acp-warning-on: #e65100;--acp-info: #64b5f6;--acp-info-on: #0d47a1;--acp-dark: #616161;--acp-dark-on: #ffffff}acp-button{display:inline-block}.mat-mdc-button .mdc-button__label,.mat-mdc-unelevated-button .mdc-button__label,.mat-mdc-raised-button .mdc-button__label,.mat-mdc-outlined-button .mdc-button__label,button[matbutton=tonal] .mdc-button__label,.mat-mdc-fab.mdc-fab--extended .mdc-button__label{display:flex;align-items:center;gap:8px}.mat-mdc-button.mat-btn-secondary,.mat-mdc-unelevated-button.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-button.mat-btn-secondary:hover,.mat-mdc-unelevated-button.mat-btn-secondary:hover{background-color:color-mix(in srgb,var(--acp-secondary) 80%,black)!important}.mat-mdc-button.mat-btn-success,.mat-mdc-unelevated-button.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-button.mat-btn-danger,.mat-mdc-unelevated-button.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-button.mat-btn-warning,.mat-mdc-unelevated-button.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-button.mat-btn-info,.mat-mdc-unelevated-button.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-button.mat-btn-dark,.mat-mdc-unelevated-button.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}button[matbutton=tonal].mat-btn-success{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important;color:var(--acp-success)!important}button[matbutton=tonal].mat-btn-danger{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important;color:var(--acp-danger)!important}button[matbutton=tonal].mat-btn-warning{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important;color:var(--acp-warning)!important}button[matbutton=tonal].mat-btn-info{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important;color:var(--acp-info)!important}button[matbutton=tonal].mat-btn-dark{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important;color:var(--acp-dark)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-success{color:var(--acp-success)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-info{color:var(--acp-info)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-dark{color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-secondary{background-color:var(--mat-sys-surface-container-low)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-raised-button.mat-btn-success{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-success)!important}.mat-mdc-raised-button.mat-btn-success:hover{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-danger{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-danger)!important}.mat-mdc-raised-button.mat-btn-danger:hover{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-warning{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-warning)!important}.mat-mdc-raised-button.mat-btn-warning:hover{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-info{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-info)!important}.mat-mdc-raised-button.mat-btn-info:hover{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-dark{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-dark:hover{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important}.mat-mdc-outlined-button.mat-btn-secondary{border-color:var(--mat-sys-outline)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-outlined-button.mat-btn-success{border-color:var(--acp-success)!important;color:var(--acp-success)!important}.mat-mdc-outlined-button.mat-btn-danger{border-color:var(--acp-danger)!important;color:var(--acp-danger)!important}.mat-mdc-outlined-button.mat-btn-warning{border-color:var(--acp-warning)!important;color:var(--acp-warning)!important}.mat-mdc-outlined-button.mat-btn-info{border-color:var(--acp-info)!important;color:var(--acp-info)!important}.mat-mdc-outlined-button.mat-btn-dark{border-color:var(--acp-dark)!important;color:var(--acp-dark)!important}.mat-mdc-fab.mat-btn-secondary,.mat-mdc-mini-fab.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-fab.mat-btn-success,.mat-mdc-mini-fab.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-fab.mat-btn-danger,.mat-mdc-mini-fab.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-fab.mat-btn-warning,.mat-mdc-mini-fab.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-fab.mat-btn-info,.mat-mdc-mini-fab.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-fab.mat-btn-dark,.mat-mdc-mini-fab.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}.mat-mdc-icon-button.mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-icon-button.mat-btn-success{color:var(--acp-success)!important}.mat-mdc-icon-button.mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-icon-button.mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-icon-button.mat-btn-info{color:var(--acp-info)!important}.mat-mdc-icon-button.mat-btn-dark{color:var(--acp-dark)!important}\n"], dependencies: [{ 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", 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: MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
|
|
618
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
619
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Button, isStandalone: true, selector: "acp-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, matStyle: { classPropertyName: "matStyle", publicName: "matStyle", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, reportFormat: { classPropertyName: "reportFormat", publicName: "reportFormat", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { handleClick: "handleClick" }, ngImport: i0, template: "@switch (matStyle()) { @case ('text') {\n<button\n matButton\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('elevated') {\n<button\n matButton=\"elevated\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('outlined') {\n<button\n matButton=\"outlined\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('tonal') {\n<button\n matButton=\"tonal\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('icon') {\n<button\n matIconButton\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('fab') {\n<button\n matFab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('mini-fab') {\n<button\n matMiniFab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('extended-fab') {\n<button\n matFab\n extended\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @default {\n<button\n matButton=\"filled\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} }\n\n<ng-template #buttonContent>\n @if (getIcon()) {\n <mat-icon>{{ getIcon() }}</mat-icon>\n } @if (getDisplayText()) { {{ getDisplayText() }} }\n\n <ng-content />\n</ng-template>\n", styles: [":root{--acp-secondary: #e0e0e0;--acp-secondary-on: #000000;--acp-success: #4caf50;--acp-success-on: #ffffff;--acp-danger: #ba1a1a;--acp-danger-on: #ffffff;--acp-warning: #ff9800;--acp-warning-on: #000000;--acp-info: #2196f3;--acp-info-on: #ffffff;--acp-dark: #212121;--acp-dark-on: #ffffff}.dark-theme{--acp-secondary: #424242;--acp-secondary-on: #ffffff;--acp-success: #81c784;--acp-success-on: #1b5e20;--acp-danger: #ef5350;--acp-danger-on: #b71c1c;--acp-warning: #ffb74d;--acp-warning-on: #e65100;--acp-info: #64b5f6;--acp-info-on: #0d47a1;--acp-dark: #616161;--acp-dark-on: #ffffff}acp-button{display:inline-block}.mat-mdc-button .mdc-button__label,.mat-mdc-unelevated-button .mdc-button__label,.mat-mdc-raised-button .mdc-button__label,.mat-mdc-outlined-button .mdc-button__label,button[matbutton=tonal] .mdc-button__label,.mat-mdc-fab.mdc-fab--extended .mdc-button__label{display:flex;align-items:center;gap:8px}.mat-mdc-button.mat-btn-secondary,.mat-mdc-unelevated-button.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-button.mat-btn-secondary:hover,.mat-mdc-unelevated-button.mat-btn-secondary:hover{background-color:color-mix(in srgb,var(--acp-secondary) 80%,black)!important}.mat-mdc-button.mat-btn-success,.mat-mdc-unelevated-button.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-button.mat-btn-danger,.mat-mdc-unelevated-button.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-button.mat-btn-warning,.mat-mdc-unelevated-button.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-button.mat-btn-info,.mat-mdc-unelevated-button.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-button.mat-btn-dark,.mat-mdc-unelevated-button.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}button[matbutton=tonal].mat-btn-success{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important;color:var(--acp-success)!important}button[matbutton=tonal].mat-btn-danger{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important;color:var(--acp-danger)!important}button[matbutton=tonal].mat-btn-warning{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important;color:var(--acp-warning)!important}button[matbutton=tonal].mat-btn-info{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important;color:var(--acp-info)!important}button[matbutton=tonal].mat-btn-dark{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important;color:var(--acp-dark)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-success{color:var(--acp-success)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-info{color:var(--acp-info)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-dark{color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-secondary{background-color:var(--mat-sys-surface-container-low)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-raised-button.mat-btn-success{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-success)!important}.mat-mdc-raised-button.mat-btn-success:hover{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-danger{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-danger)!important}.mat-mdc-raised-button.mat-btn-danger:hover{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-warning{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-warning)!important}.mat-mdc-raised-button.mat-btn-warning:hover{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-info{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-info)!important}.mat-mdc-raised-button.mat-btn-info:hover{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-dark{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-dark:hover{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important}.mat-mdc-outlined-button.mat-btn-secondary{border-color:var(--mat-sys-outline)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-outlined-button.mat-btn-success{border-color:var(--acp-success)!important;color:var(--acp-success)!important}.mat-mdc-outlined-button.mat-btn-danger{border-color:var(--acp-danger)!important;color:var(--acp-danger)!important}.mat-mdc-outlined-button.mat-btn-warning{border-color:var(--acp-warning)!important;color:var(--acp-warning)!important}.mat-mdc-outlined-button.mat-btn-info{border-color:var(--acp-info)!important;color:var(--acp-info)!important}.mat-mdc-outlined-button.mat-btn-dark{border-color:var(--acp-dark)!important;color:var(--acp-dark)!important}.mat-mdc-fab.mat-btn-secondary,.mat-mdc-mini-fab.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-fab.mat-btn-success,.mat-mdc-mini-fab.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-fab.mat-btn-danger,.mat-mdc-mini-fab.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-fab.mat-btn-warning,.mat-mdc-mini-fab.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-fab.mat-btn-info,.mat-mdc-mini-fab.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-fab.mat-btn-dark,.mat-mdc-mini-fab.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}.mat-mdc-icon-button.mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-icon-button.mat-btn-success{color:var(--acp-success)!important}.mat-mdc-icon-button.mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-icon-button.mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-icon-button.mat-btn-info{color:var(--acp-info)!important}.mat-mdc-icon-button.mat-btn-dark{color:var(--acp-dark)!important}\n"], dependencies: [{ 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", 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: MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
|
|
430
620
|
}
|
|
431
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
621
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Button, decorators: [{
|
|
432
622
|
type: Component,
|
|
433
623
|
args: [{ selector: 'acp-button', imports: [
|
|
434
624
|
MatButton,
|
|
@@ -478,10 +668,10 @@ class BaseButton {
|
|
|
478
668
|
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
479
669
|
pointerEvents = computed(() => (this.isDisabled() ? 'none' : 'auto'), /* @ts-ignore */
|
|
480
670
|
...(ngDevMode ? [{ debugName: "pointerEvents" }] : /* istanbul ignore next */ []));
|
|
481
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
482
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0
|
|
671
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: BaseButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
672
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: BaseButton, isStandalone: true, inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", focused: "focused", blurred: "blurred" }, host: { properties: { "style.pointer-events": "pointerEvents()" } }, ngImport: i0 });
|
|
483
673
|
}
|
|
484
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
674
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: BaseButton, decorators: [{
|
|
485
675
|
type: Directive,
|
|
486
676
|
args: [{
|
|
487
677
|
host: {
|
|
@@ -539,10 +729,10 @@ class ButtonLoaderDirective {
|
|
|
539
729
|
this.spinner?.destroy();
|
|
540
730
|
this.spinner = null;
|
|
541
731
|
}
|
|
542
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
543
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0
|
|
732
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ButtonLoaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
733
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: ButtonLoaderDirective, isStandalone: true, selector: "button[acpLoading]", inputs: { acpLoading: { classPropertyName: "acpLoading", publicName: "acpLoading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
544
734
|
}
|
|
545
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
735
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ButtonLoaderDirective, decorators: [{
|
|
546
736
|
type: Directive,
|
|
547
737
|
args: [{
|
|
548
738
|
selector: 'button[acpLoading]',
|
|
@@ -550,10 +740,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
|
|
|
550
740
|
}], ctorParameters: () => [], propDecorators: { acpLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "acpLoading", required: false }] }] } });
|
|
551
741
|
|
|
552
742
|
class AcpButton extends BaseButton {
|
|
553
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
554
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpButton, isStandalone: true, selector: "acp-button", usesInheritance: true, ngImport: i0, template: "@if (variant() === 'icon') {\n<button\n matIconButton\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), squareClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else if (variant() === 'fab') {\n<button\n matFab\n [extended]=\"extended()\"\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (extended()) { @if (hasText()) { {{text()}} }\n @else { <ng-content></ng-content> } }\n</button>\n} @else if (variant() === 'mini-fab') {\n<button\n matMiniFab\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else {\n<button\n [matButton]=\"appearance()\"\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), squareClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (hasText()) { {{text()}} } @else {\n <ng-content></ng-content> } @if (suffixIcon()) {\n <mat-icon iconPositionEnd>{{suffixIcon()}}</mat-icon> }\n</button>\n}\n", styles: [".acp-primary{--mat-button-filled-container-color: var(--theme-primary-color);--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: var(--theme-primary-color);--mat-button-protected-label-text-color: var(--theme-primary-color);--mat-button-text-label-text-color: var(--theme-primary-color);--mat-button-text-state-layer-color: var(--theme-primary-color)}.acp-secondary{--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary)}.acp-accent{--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary)}.acp-error{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-protected-label-text-color: var(--mat-sys-error);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error)}.acp-success{--mat-button-filled-container-color: #4caf50;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #4caf50;--mat-button-protected-label-text-color: #4caf50;--mat-button-text-label-text-color: #4caf50;--mat-button-text-state-layer-color: #4caf50}.acp-warning{--mat-button-filled-container-color: #f59e0b;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #f59e0b;--mat-button-protected-label-text-color: #f59e0b;--mat-button-text-label-text-color: #f59e0b;--mat-button-text-state-layer-color: #f59e0b}.acp-info{--mat-button-filled-container-color: #3b82f6;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #3b82f6;--mat-button-protected-label-text-color: #3b82f6;--mat-button-text-label-text-color: #3b82f6;--mat-button-text-state-layer-color: #3b82f6}.acp-dark{--mat-button-filled-container-color: #1f2937;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #1f2937;--mat-button-protected-label-text-color: #1f2937;--mat-button-text-label-text-color: #1f2937;--mat-button-text-state-layer-color: #1f2937}[matIconButton].acp-primary{--mat-icon-color: var(--theme-primary-color)}[matIconButton].acp-secondary{--mat-icon-color: var(--mat-sys-secondary)}[matIconButton].acp-accent{--mat-icon-color: var(--mat-sys-tertiary)}[matIconButton].acp-error{--mat-icon-color: var(--mat-sys-error)}[matIconButton].acp-success{--mat-icon-color: #10b981}[matIconButton].acp-warning{--mat-icon-color: #f59e0b}[matIconButton].acp-info{--mat-icon-color: #3b82f6}[matIconButton].acp-dark{--mat-icon-color: #1f2937}.acp-square{--mat-button-filled-container-shape: 8px;--mat-button-outlined-container-shape: 8px;--mat-button-protected-container-shape: 8px;--mat-button-text-container-shape: 8px;--mat-button-tonal-container-shape: 8px;--mat-icon-button-container-shape: 8px}.acp-medium{--mat-checkbox-touch-target-display: block;--mat-checkbox-state-layer-size: 36px;--mat-chip-container-height: 28px;--mat-expansion-header-collapsed-state-height: 44px;--mat-expansion-header-expanded-state-height: 60px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: block;--mat-button-filled-touch-target-display: block;--mat-button-filled-container-height: 36px;--mat-button-outlined-container-height: 36px;--mat-button-outlined-touch-target-display: block;--mat-button-protected-touch-target-display: block;--mat-button-protected-container-height: 36px;--mat-button-text-touch-target-display: block;--mat-button-text-container-height: 36px;--mat-button-tonal-container-height: 36px;--mat-button-tonal-touch-target-display: block;--mat-form-field-container-height: 52px;--mat-form-field-filled-label-display: block;--mat-form-field-container-vertical-padding: 14px;--mat-form-field-filled-with-label-container-padding-top: 22px;--mat-form-field-filled-with-label-container-padding-bottom: 6px;--mat-icon-button-touch-target-display: block;--mat-icon-button-state-layer-size: 36px;--mat-list-list-item-leading-icon-start-space: 12px;--mat-list-list-item-leading-icon-end-space: 12px;--mat-list-list-item-one-line-container-height: 44px;--mat-list-list-item-two-line-container-height: 60px;--mat-list-list-item-three-line-container-height: 84px;--mat-paginator-container-size: 52px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: block;--mat-radio-touch-target-display: block;--mat-radio-state-layer-size: 36px;--mat-tab-container-height: 44px;--mat-select-arrow-transform: translateY(-8px);--mat-button-toggle-height: 40px;--mat-stepper-header-height: 68px;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-toolbar-standard-height: 60px;--mat-toolbar-mobile-height: 52px;--mat-tree-node-min-height: 44px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 20px;--mat-button-outlined-horizontal-padding: 20px;--mat-button-protected-horizontal-padding: 20px;--mat-button-text-horizontal-padding: 20px;--mat-button-tonal-horizontal-padding: 20px;--mat-button-toggle-height: 36px}.acp-small{--mat-checkbox-touch-target-display: none;--mat-checkbox-state-layer-size: 32px;--mat-chip-container-height: 24px;--mat-expansion-header-collapsed-state-height: 40px;--mat-expansion-header-expanded-state-height: 56px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: none;--mat-button-filled-touch-target-display: none;--mat-button-filled-container-height: 32px;--mat-button-outlined-container-height: 32px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-touch-target-display: none;--mat-button-protected-container-height: 32px;--mat-button-text-touch-target-display: none;--mat-button-text-container-height: 32px;--mat-button-tonal-container-height: 32px;--mat-button-tonal-touch-target-display: none;--mat-form-field-container-height: 48px;--mat-form-field-filled-label-display: none;--mat-form-field-container-vertical-padding: 12px;--mat-form-field-filled-with-label-container-padding-top: 12px;--mat-form-field-filled-with-label-container-padding-bottom: 12px;--mat-icon-button-touch-target-display: none;--mat-icon-button-state-layer-size: 32px;--mat-list-list-item-leading-icon-start-space: 8px;--mat-list-list-item-leading-icon-end-space: 8px;--mat-list-list-item-one-line-container-height: 40px;--mat-list-list-item-two-line-container-height: 56px;--mat-list-list-item-three-line-container-height: 80px;--mat-paginator-container-size: 48px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: none;--mat-radio-touch-target-display: none;--mat-radio-state-layer-size: 32px;--mat-tab-container-height: 40px;--mat-select-arrow-transform: none;--mat-button-toggle-height: 40px;--mat-stepper-header-height: 64px;--mat-table-header-container-height: 48px;--mat-table-footer-container-height: 44px;--mat-table-row-item-container-height: 44px;--mat-toolbar-standard-height: 56px;--mat-toolbar-mobile-height: 48px;--mat-tree-node-min-height: 40px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 16px;--mat-button-outlined-horizontal-padding: 16px;--mat-button-protected-horizontal-padding: 16px;--mat-button-text-horizontal-padding: 16px;--mat-button-tonal-horizontal-padding: 16px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ButtonLoaderDirective, selector: "button[acpLoading]", inputs: ["acpLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
743
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpButton, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
744
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpButton, isStandalone: true, selector: "acp-button", usesInheritance: true, ngImport: i0, template: "@if (variant() === 'icon') {\n<button\n matIconButton\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), squareClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else if (variant() === 'fab') {\n<button\n matFab\n [extended]=\"extended()\"\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (extended()) { @if (hasText()) { {{text()}} }\n @else { <ng-content></ng-content> } }\n</button>\n} @else if (variant() === 'mini-fab') {\n<button\n matMiniFab\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else {\n<button\n [matButton]=\"appearance()\"\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), squareClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (hasText()) { {{text()}} } @else {\n <ng-content></ng-content> } @if (suffixIcon()) {\n <mat-icon iconPositionEnd>{{suffixIcon()}}</mat-icon> }\n</button>\n}\n", styles: [".acp-primary{--mat-button-filled-container-color: var(--theme-primary-color);--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: var(--theme-primary-color);--mat-button-protected-label-text-color: var(--theme-primary-color);--mat-button-text-label-text-color: var(--theme-primary-color);--mat-button-text-state-layer-color: var(--theme-primary-color)}.acp-secondary{--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary)}.acp-accent{--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary)}.acp-error{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-protected-label-text-color: var(--mat-sys-error);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error)}.acp-success{--mat-button-filled-container-color: #4caf50;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #4caf50;--mat-button-protected-label-text-color: #4caf50;--mat-button-text-label-text-color: #4caf50;--mat-button-text-state-layer-color: #4caf50}.acp-warning{--mat-button-filled-container-color: #f59e0b;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #f59e0b;--mat-button-protected-label-text-color: #f59e0b;--mat-button-text-label-text-color: #f59e0b;--mat-button-text-state-layer-color: #f59e0b}.acp-info{--mat-button-filled-container-color: #3b82f6;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #3b82f6;--mat-button-protected-label-text-color: #3b82f6;--mat-button-text-label-text-color: #3b82f6;--mat-button-text-state-layer-color: #3b82f6}.acp-dark{--mat-button-filled-container-color: #1f2937;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #1f2937;--mat-button-protected-label-text-color: #1f2937;--mat-button-text-label-text-color: #1f2937;--mat-button-text-state-layer-color: #1f2937}[matIconButton].acp-primary{--mat-icon-color: var(--theme-primary-color)}[matIconButton].acp-secondary{--mat-icon-color: var(--mat-sys-secondary)}[matIconButton].acp-accent{--mat-icon-color: var(--mat-sys-tertiary)}[matIconButton].acp-error{--mat-icon-color: var(--mat-sys-error)}[matIconButton].acp-success{--mat-icon-color: #10b981}[matIconButton].acp-warning{--mat-icon-color: #f59e0b}[matIconButton].acp-info{--mat-icon-color: #3b82f6}[matIconButton].acp-dark{--mat-icon-color: #1f2937}.acp-square{--mat-button-filled-container-shape: 8px;--mat-button-outlined-container-shape: 8px;--mat-button-protected-container-shape: 8px;--mat-button-text-container-shape: 8px;--mat-button-tonal-container-shape: 8px;--mat-icon-button-container-shape: 8px}.acp-medium{--mat-checkbox-touch-target-display: block;--mat-checkbox-state-layer-size: 36px;--mat-chip-container-height: 28px;--mat-expansion-header-collapsed-state-height: 44px;--mat-expansion-header-expanded-state-height: 60px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: block;--mat-button-filled-touch-target-display: block;--mat-button-filled-container-height: 36px;--mat-button-outlined-container-height: 36px;--mat-button-outlined-touch-target-display: block;--mat-button-protected-touch-target-display: block;--mat-button-protected-container-height: 36px;--mat-button-text-touch-target-display: block;--mat-button-text-container-height: 36px;--mat-button-tonal-container-height: 36px;--mat-button-tonal-touch-target-display: block;--mat-form-field-container-height: 52px;--mat-form-field-filled-label-display: block;--mat-form-field-container-vertical-padding: 14px;--mat-form-field-filled-with-label-container-padding-top: 22px;--mat-form-field-filled-with-label-container-padding-bottom: 6px;--mat-icon-button-touch-target-display: block;--mat-icon-button-state-layer-size: 36px;--mat-list-list-item-leading-icon-start-space: 12px;--mat-list-list-item-leading-icon-end-space: 12px;--mat-list-list-item-one-line-container-height: 44px;--mat-list-list-item-two-line-container-height: 60px;--mat-list-list-item-three-line-container-height: 84px;--mat-paginator-container-size: 52px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: block;--mat-radio-touch-target-display: block;--mat-radio-state-layer-size: 36px;--mat-tab-container-height: 44px;--mat-select-arrow-transform: translateY(-8px);--mat-button-toggle-height: 40px;--mat-stepper-header-height: 68px;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-toolbar-standard-height: 60px;--mat-toolbar-mobile-height: 52px;--mat-tree-node-min-height: 44px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 20px;--mat-button-outlined-horizontal-padding: 20px;--mat-button-protected-horizontal-padding: 20px;--mat-button-text-horizontal-padding: 20px;--mat-button-tonal-horizontal-padding: 20px;--mat-button-toggle-height: 36px}.acp-small{--mat-checkbox-touch-target-display: none;--mat-checkbox-state-layer-size: 32px;--mat-chip-container-height: 24px;--mat-expansion-header-collapsed-state-height: 40px;--mat-expansion-header-expanded-state-height: 56px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: none;--mat-button-filled-touch-target-display: none;--mat-button-filled-container-height: 32px;--mat-button-outlined-container-height: 32px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-touch-target-display: none;--mat-button-protected-container-height: 32px;--mat-button-text-touch-target-display: none;--mat-button-text-container-height: 32px;--mat-button-tonal-container-height: 32px;--mat-button-tonal-touch-target-display: none;--mat-form-field-container-height: 48px;--mat-form-field-filled-label-display: none;--mat-form-field-container-vertical-padding: 12px;--mat-form-field-filled-with-label-container-padding-top: 12px;--mat-form-field-filled-with-label-container-padding-bottom: 12px;--mat-icon-button-touch-target-display: none;--mat-icon-button-state-layer-size: 32px;--mat-list-list-item-leading-icon-start-space: 8px;--mat-list-list-item-leading-icon-end-space: 8px;--mat-list-list-item-one-line-container-height: 40px;--mat-list-list-item-two-line-container-height: 56px;--mat-list-list-item-three-line-container-height: 80px;--mat-paginator-container-size: 48px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: none;--mat-radio-touch-target-display: none;--mat-radio-state-layer-size: 32px;--mat-tab-container-height: 40px;--mat-select-arrow-transform: none;--mat-button-toggle-height: 40px;--mat-stepper-header-height: 64px;--mat-table-header-container-height: 48px;--mat-table-footer-container-height: 44px;--mat-table-row-item-container-height: 44px;--mat-toolbar-standard-height: 56px;--mat-toolbar-mobile-height: 48px;--mat-tree-node-min-height: 40px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 16px;--mat-button-outlined-horizontal-padding: 16px;--mat-button-protected-horizontal-padding: 16px;--mat-button-text-horizontal-padding: 16px;--mat-button-tonal-horizontal-padding: 16px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ButtonLoaderDirective, selector: "button[acpLoading]", inputs: ["acpLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
555
745
|
}
|
|
556
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
746
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpButton, decorators: [{
|
|
557
747
|
type: Component,
|
|
558
748
|
args: [{ selector: 'acp-button', imports: [NgClass, MatButtonModule, MatIconModule, ButtonLoaderDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (variant() === 'icon') {\n<button\n matIconButton\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), squareClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else if (variant() === 'fab') {\n<button\n matFab\n [extended]=\"extended()\"\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (extended()) { @if (hasText()) { {{text()}} }\n @else { <ng-content></ng-content> } }\n</button>\n} @else if (variant() === 'mini-fab') {\n<button\n matMiniFab\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else {\n<button\n [matButton]=\"appearance()\"\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), squareClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (hasText()) { {{text()}} } @else {\n <ng-content></ng-content> } @if (suffixIcon()) {\n <mat-icon iconPositionEnd>{{suffixIcon()}}</mat-icon> }\n</button>\n}\n", styles: [".acp-primary{--mat-button-filled-container-color: var(--theme-primary-color);--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: var(--theme-primary-color);--mat-button-protected-label-text-color: var(--theme-primary-color);--mat-button-text-label-text-color: var(--theme-primary-color);--mat-button-text-state-layer-color: var(--theme-primary-color)}.acp-secondary{--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary)}.acp-accent{--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary)}.acp-error{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-protected-label-text-color: var(--mat-sys-error);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error)}.acp-success{--mat-button-filled-container-color: #4caf50;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #4caf50;--mat-button-protected-label-text-color: #4caf50;--mat-button-text-label-text-color: #4caf50;--mat-button-text-state-layer-color: #4caf50}.acp-warning{--mat-button-filled-container-color: #f59e0b;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #f59e0b;--mat-button-protected-label-text-color: #f59e0b;--mat-button-text-label-text-color: #f59e0b;--mat-button-text-state-layer-color: #f59e0b}.acp-info{--mat-button-filled-container-color: #3b82f6;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #3b82f6;--mat-button-protected-label-text-color: #3b82f6;--mat-button-text-label-text-color: #3b82f6;--mat-button-text-state-layer-color: #3b82f6}.acp-dark{--mat-button-filled-container-color: #1f2937;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #1f2937;--mat-button-protected-label-text-color: #1f2937;--mat-button-text-label-text-color: #1f2937;--mat-button-text-state-layer-color: #1f2937}[matIconButton].acp-primary{--mat-icon-color: var(--theme-primary-color)}[matIconButton].acp-secondary{--mat-icon-color: var(--mat-sys-secondary)}[matIconButton].acp-accent{--mat-icon-color: var(--mat-sys-tertiary)}[matIconButton].acp-error{--mat-icon-color: var(--mat-sys-error)}[matIconButton].acp-success{--mat-icon-color: #10b981}[matIconButton].acp-warning{--mat-icon-color: #f59e0b}[matIconButton].acp-info{--mat-icon-color: #3b82f6}[matIconButton].acp-dark{--mat-icon-color: #1f2937}.acp-square{--mat-button-filled-container-shape: 8px;--mat-button-outlined-container-shape: 8px;--mat-button-protected-container-shape: 8px;--mat-button-text-container-shape: 8px;--mat-button-tonal-container-shape: 8px;--mat-icon-button-container-shape: 8px}.acp-medium{--mat-checkbox-touch-target-display: block;--mat-checkbox-state-layer-size: 36px;--mat-chip-container-height: 28px;--mat-expansion-header-collapsed-state-height: 44px;--mat-expansion-header-expanded-state-height: 60px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: block;--mat-button-filled-touch-target-display: block;--mat-button-filled-container-height: 36px;--mat-button-outlined-container-height: 36px;--mat-button-outlined-touch-target-display: block;--mat-button-protected-touch-target-display: block;--mat-button-protected-container-height: 36px;--mat-button-text-touch-target-display: block;--mat-button-text-container-height: 36px;--mat-button-tonal-container-height: 36px;--mat-button-tonal-touch-target-display: block;--mat-form-field-container-height: 52px;--mat-form-field-filled-label-display: block;--mat-form-field-container-vertical-padding: 14px;--mat-form-field-filled-with-label-container-padding-top: 22px;--mat-form-field-filled-with-label-container-padding-bottom: 6px;--mat-icon-button-touch-target-display: block;--mat-icon-button-state-layer-size: 36px;--mat-list-list-item-leading-icon-start-space: 12px;--mat-list-list-item-leading-icon-end-space: 12px;--mat-list-list-item-one-line-container-height: 44px;--mat-list-list-item-two-line-container-height: 60px;--mat-list-list-item-three-line-container-height: 84px;--mat-paginator-container-size: 52px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: block;--mat-radio-touch-target-display: block;--mat-radio-state-layer-size: 36px;--mat-tab-container-height: 44px;--mat-select-arrow-transform: translateY(-8px);--mat-button-toggle-height: 40px;--mat-stepper-header-height: 68px;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-toolbar-standard-height: 60px;--mat-toolbar-mobile-height: 52px;--mat-tree-node-min-height: 44px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 20px;--mat-button-outlined-horizontal-padding: 20px;--mat-button-protected-horizontal-padding: 20px;--mat-button-text-horizontal-padding: 20px;--mat-button-tonal-horizontal-padding: 20px;--mat-button-toggle-height: 36px}.acp-small{--mat-checkbox-touch-target-display: none;--mat-checkbox-state-layer-size: 32px;--mat-chip-container-height: 24px;--mat-expansion-header-collapsed-state-height: 40px;--mat-expansion-header-expanded-state-height: 56px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: none;--mat-button-filled-touch-target-display: none;--mat-button-filled-container-height: 32px;--mat-button-outlined-container-height: 32px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-touch-target-display: none;--mat-button-protected-container-height: 32px;--mat-button-text-touch-target-display: none;--mat-button-text-container-height: 32px;--mat-button-tonal-container-height: 32px;--mat-button-tonal-touch-target-display: none;--mat-form-field-container-height: 48px;--mat-form-field-filled-label-display: none;--mat-form-field-container-vertical-padding: 12px;--mat-form-field-filled-with-label-container-padding-top: 12px;--mat-form-field-filled-with-label-container-padding-bottom: 12px;--mat-icon-button-touch-target-display: none;--mat-icon-button-state-layer-size: 32px;--mat-list-list-item-leading-icon-start-space: 8px;--mat-list-list-item-leading-icon-end-space: 8px;--mat-list-list-item-one-line-container-height: 40px;--mat-list-list-item-two-line-container-height: 56px;--mat-list-list-item-three-line-container-height: 80px;--mat-paginator-container-size: 48px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: none;--mat-radio-touch-target-display: none;--mat-radio-state-layer-size: 32px;--mat-tab-container-height: 40px;--mat-select-arrow-transform: none;--mat-button-toggle-height: 40px;--mat-stepper-header-height: 64px;--mat-table-header-container-height: 48px;--mat-table-footer-container-height: 44px;--mat-table-row-item-container-height: 44px;--mat-toolbar-standard-height: 56px;--mat-toolbar-mobile-height: 48px;--mat-tree-node-min-height: 40px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 16px;--mat-button-outlined-horizontal-padding: 16px;--mat-button-protected-horizontal-padding: 16px;--mat-button-text-horizontal-padding: 16px;--mat-button-tonal-horizontal-padding: 16px}\n"] }]
|
|
559
749
|
}] });
|
|
@@ -678,10 +868,10 @@ class DialogZIndexService {
|
|
|
678
868
|
}
|
|
679
869
|
}, 0);
|
|
680
870
|
}
|
|
681
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
682
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
871
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogZIndexService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
872
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogZIndexService, providedIn: 'root' });
|
|
683
873
|
}
|
|
684
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
874
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogZIndexService, decorators: [{
|
|
685
875
|
type: Injectable,
|
|
686
876
|
args: [{
|
|
687
877
|
providedIn: 'root',
|
|
@@ -702,9 +892,7 @@ class DialogWrapper {
|
|
|
702
892
|
* A template reference that acts as an anchor for dynamic content.
|
|
703
893
|
* This is where the component specified in the config will be rendered.
|
|
704
894
|
*/
|
|
705
|
-
contentHost = viewChild.required('contentHost', {
|
|
706
|
-
read: ViewContainerRef,
|
|
707
|
-
});
|
|
895
|
+
contentHost = viewChild.required('contentHost', { ...(ngDevMode ? { debugName: "contentHost" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
|
|
708
896
|
/**
|
|
709
897
|
* A reference to the header element for the z-index focus logic.
|
|
710
898
|
* Used to bring the dialog to the front when clicked.
|
|
@@ -765,10 +953,10 @@ class DialogWrapper {
|
|
|
765
953
|
this.zIndexService.bringToFront(headerElement);
|
|
766
954
|
}
|
|
767
955
|
}
|
|
768
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
769
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0
|
|
956
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
957
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DialogWrapper, isStandalone: true, selector: "acp-dialog-wrapper", viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "header", first: true, predicate: ["dialogHeader"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!config.hideHeader) {\n<div\n class=\"acp-dialog-header\"\n cdkDrag\n cdkDragRootElement=\".cdk-overlay-pane\"\n cdkDragHandle\n #dialogHeader\n (mousedown)=\"bringToFront()\"\n>\n <h6 mat-dialog-title class=\"acp-dialog-title\">\n @if (config.icon) {\n <mat-icon class=\"acp-dialog-title-icon\" aria-hidden=\"true\">{{ config.icon }}</mat-icon>\n }\n <span>{{ config.title }}</span>\n @if (config.showCloseButton !== false) {\n <acp-button\n [customClass]=\"'acp-dialog-close-btn'\"\n matStyle=\"icon\"\n icon=\"close\"\n (handleClick)=\"onClose()\"\n ariaLabel=\"Close Dialog\"\n />\n }\n </h6>\n</div>\n}\n\n<ng-template #contentHost />\n", styles: [".acp-dialog-header{cursor:move;border-bottom:1px solid var(--mat-sys-outline-variant, #dee2e6);color:var(--mat-sys-on-surface, #212529);position:relative}h6[mat-dialog-title].acp-dialog-title{display:flex;align-items:center;font-size:1.2rem;font-weight:500;margin:0;width:100%;padding-right:48px}.acp-dialog-title-icon{margin-right:12px;vertical-align:middle}h6[mat-dialog-title].acp-dialog-title span{flex-grow:1}mat-dialog-content{padding:24px}.acp-dialog-close-btn{position:absolute;top:8px;right:16px}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: Button, selector: "acp-button", inputs: ["variant", "text", "icon", "disabled", "type", "matStyle", "customClass", "reportFormat", "extended", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
770
958
|
}
|
|
771
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
959
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogWrapper, decorators: [{
|
|
772
960
|
type: Component,
|
|
773
961
|
args: [{ selector: 'acp-dialog-wrapper', standalone: true, imports: [CdkDrag, CdkDragHandle, MatDialogModule, MatIconModule, Button], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (!config.hideHeader) {\n<div\n class=\"acp-dialog-header\"\n cdkDrag\n cdkDragRootElement=\".cdk-overlay-pane\"\n cdkDragHandle\n #dialogHeader\n (mousedown)=\"bringToFront()\"\n>\n <h6 mat-dialog-title class=\"acp-dialog-title\">\n @if (config.icon) {\n <mat-icon class=\"acp-dialog-title-icon\" aria-hidden=\"true\">{{ config.icon }}</mat-icon>\n }\n <span>{{ config.title }}</span>\n @if (config.showCloseButton !== false) {\n <acp-button\n [customClass]=\"'acp-dialog-close-btn'\"\n matStyle=\"icon\"\n icon=\"close\"\n (handleClick)=\"onClose()\"\n ariaLabel=\"Close Dialog\"\n />\n }\n </h6>\n</div>\n}\n\n<ng-template #contentHost />\n", styles: [".acp-dialog-header{cursor:move;border-bottom:1px solid var(--mat-sys-outline-variant, #dee2e6);color:var(--mat-sys-on-surface, #212529);position:relative}h6[mat-dialog-title].acp-dialog-title{display:flex;align-items:center;font-size:1.2rem;font-weight:500;margin:0;width:100%;padding-right:48px}.acp-dialog-title-icon{margin-right:12px;vertical-align:middle}h6[mat-dialog-title].acp-dialog-title span{flex-grow:1}mat-dialog-content{padding:24px}.acp-dialog-close-btn{position:absolute;top:8px;right:16px}\n"] }]
|
|
774
962
|
}], ctorParameters: () => [], propDecorators: { contentHost: [{ type: i0.ViewChild, args: ['contentHost', { ...{
|
|
@@ -878,10 +1066,10 @@ class DynamicSelect {
|
|
|
878
1066
|
this._onDestroy.next();
|
|
879
1067
|
this._onDestroy.complete();
|
|
880
1068
|
}
|
|
881
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
882
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0
|
|
1069
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DynamicSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1070
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: DynamicSelect, isStandalone: true, selector: "acp-dynamic-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, hideSelected: { classPropertyName: "hideSelected", publicName: "hideSelected", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectOnTab: { classPropertyName: "selectOnTab", publicName: "selectOnTab", isSignal: true, isRequired: false, transformFunction: null }, openOnEnter: { classPropertyName: "openOnEnter", publicName: "openOnEnter", isSignal: true, isRequired: false, transformFunction: null }, selectableGroup: { classPropertyName: "selectableGroup", publicName: "selectableGroup", isSignal: true, isRequired: false, transformFunction: null }, selectableGroupAsModel: { classPropertyName: "selectableGroupAsModel", publicName: "selectableGroupAsModel", isSignal: true, isRequired: false, transformFunction: null }, clearOnBackspace: { classPropertyName: "clearOnBackspace", publicName: "clearOnBackspace", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, searchWhileComposing: { classPropertyName: "searchWhileComposing", publicName: "searchWhileComposing", isSignal: true, isRequired: false, transformFunction: null }, minTermLength: { classPropertyName: "minTermLength", publicName: "minTermLength", isSignal: true, isRequired: false, transformFunction: null }, editableSearchTerm: { classPropertyName: "editableSearchTerm", publicName: "editableSearchTerm", isSignal: true, isRequired: false, transformFunction: null }, typeToSearchText: { classPropertyName: "typeToSearchText", publicName: "typeToSearchText", isSignal: true, isRequired: false, transformFunction: null }, addTagText: { classPropertyName: "addTagText", publicName: "addTagText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAllText: { classPropertyName: "clearAllText", publicName: "clearAllText", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<ng-select\n [items]=\"filteredOptions\"\n bindLabel=\"viewValue\"\n bindValue=\"value\"\n [searchable]=\"searchable()\"\n [clearable]=\"clearable()\"\n [formControl]=\"selectControl\"\n [placeholder]=\"placeholder() || label()\"\n [loading]=\"loading\"\n [virtualScroll]=\"virtualScroll()\"\n [dropdownPosition]=\"dropdownPosition()\"\n [closeOnSelect]=\"closeOnSelect()\"\n [hideSelected]=\"hideSelected()\"\n [multiple]=\"multiple()\"\n [selectOnTab]=\"selectOnTab()\"\n [openOnEnter]=\"openOnEnter()\"\n [selectableGroup]=\"selectableGroup()\"\n [selectableGroupAsModel]=\"selectableGroupAsModel()\"\n [clearOnBackspace]=\"clearOnBackspace()\"\n [readonly]=\"readonly()\"\n [searchWhileComposing]=\"searchWhileComposing()\"\n [minTermLength]=\"minTermLength()\"\n [editableSearchTerm]=\"editableSearchTerm()\"\n [typeToSearchText]=\"typeToSearchText()\"\n [addTagText]=\"addTagText()\"\n [loadingText]=\"loadingText()\"\n [clearAllText]=\"clearAllText()\"\n [notFoundText]=\"notFoundText()\"\n (change)=\"onSelectionChange($event)\"\n [ngClass]=\"className()\"\n/>\n", dependencies: [{ kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i1$3.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "removeText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "clearKeepsDisabledOptions", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "popover", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
883
1071
|
}
|
|
884
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1072
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DynamicSelect, decorators: [{
|
|
885
1073
|
type: Component,
|
|
886
1074
|
args: [{ selector: 'acp-dynamic-select', imports: [NgSelectModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-select\n [items]=\"filteredOptions\"\n bindLabel=\"viewValue\"\n bindValue=\"value\"\n [searchable]=\"searchable()\"\n [clearable]=\"clearable()\"\n [formControl]=\"selectControl\"\n [placeholder]=\"placeholder() || label()\"\n [loading]=\"loading\"\n [virtualScroll]=\"virtualScroll()\"\n [dropdownPosition]=\"dropdownPosition()\"\n [closeOnSelect]=\"closeOnSelect()\"\n [hideSelected]=\"hideSelected()\"\n [multiple]=\"multiple()\"\n [selectOnTab]=\"selectOnTab()\"\n [openOnEnter]=\"openOnEnter()\"\n [selectableGroup]=\"selectableGroup()\"\n [selectableGroupAsModel]=\"selectableGroupAsModel()\"\n [clearOnBackspace]=\"clearOnBackspace()\"\n [readonly]=\"readonly()\"\n [searchWhileComposing]=\"searchWhileComposing()\"\n [minTermLength]=\"minTermLength()\"\n [editableSearchTerm]=\"editableSearchTerm()\"\n [typeToSearchText]=\"typeToSearchText()\"\n [addTagText]=\"addTagText()\"\n [loadingText]=\"loadingText()\"\n [clearAllText]=\"clearAllText()\"\n [notFoundText]=\"notFoundText()\"\n (change)=\"onSelectionChange($event)\"\n [ngClass]=\"className()\"\n/>\n" }]
|
|
887
1075
|
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], dropdownPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownPosition", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], hideSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSelected", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], selectOnTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOnTab", required: false }] }], openOnEnter: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnEnter", required: false }] }], selectableGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableGroup", required: false }] }], selectableGroupAsModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableGroupAsModel", required: false }] }], clearOnBackspace: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearOnBackspace", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], searchWhileComposing: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchWhileComposing", required: false }] }], minTermLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTermLength", required: false }] }], editableSearchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "editableSearchTerm", required: false }] }], typeToSearchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeToSearchText", required: false }] }], addTagText: [{ type: i0.Input, args: [{ isSignal: true, alias: "addTagText", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], clearAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAllText", required: false }] }], notFoundText: [{ type: i0.Input, args: [{ isSignal: true, alias: "notFoundText", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
|
|
@@ -889,10 +1077,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
|
|
|
889
1077
|
class UserIcon {
|
|
890
1078
|
size = input('35', /* @ts-ignore */
|
|
891
1079
|
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
892
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
893
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0
|
|
1080
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UserIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1081
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: UserIcon, isStandalone: true, selector: "acp-user-icon", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg\n [attr.width]=\"size()\"\n [attr.height]=\"size()\"\n version=\"1.1\"\n id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n viewBox=\"0 0 480 480\"\n xml:space=\"preserve\"\n fill=\"#000000\"\n>\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n <g id=\"SVGRepo_iconCarrier\">\n <g>\n <g>\n <circle style=\"fill: #b8bac0\" cx=\"240\" cy=\"240\" r=\"240\"></circle>\n </g>\n <g>\n <g>\n <path\n style=\"fill: #ffffff\"\n d=\"M240,360.07c-27.944,0-53.297-11.991-72.003-31.372c-0.014,11.615-0.436,28.379-3.516,40.611 c2.02,1.235,3.588,3.262,3.894,5.784c3.992,32.484,34.781,56.977,71.625,56.977c36.836,0,67.625-24.496,71.625-56.977 c0.31-2.525,1.844-4.549,3.895-5.78c-3.08-12.233-3.503-28.999-3.517-40.615C293.297,348.079,267.944,360.07,240,360.07z\"\n ></path>\n </g>\n </g>\n <g>\n <g>\n <path\n style=\"fill: #d7dbe0\"\n d=\"M310.44,330.174c-18.549,18.477-43.242,29.896-70.44,29.896 c-27.944,0-53.297-11.991-72.003-31.372c-0.014,11.615-0.436,28.379-3.516,40.611c2.02,1.235,3.588,3.262,3.894,5.784 c1.765,14.359,8.778,27.144,19.223,36.954C235.766,405.265,290.437,357.702,310.44,330.174z\"\n ></path>\n </g>\n </g>\n <g>\n <g>\n <path\n style=\"fill: #ffffff\"\n d=\"M312,160.07H176c-22.055,0-40,17.945-40,40v48c0,61.758,46.656,112,104,112s104-50.242,104-112 v-56C344,174.426,329.648,160.07,312,160.07z\"\n ></path>\n </g>\n </g>\n <g>\n <g>\n <path\n style=\"fill: #5c546a\"\n d=\"M296,72.07H192c-15.047,0-27.695,10.438-31.102,24.449C133.359,100.02,112,123.598,112,152.07v40 c0,20.617,8.752,39.851,24,53.52v-45.52c0-22.055,17.945-40,40-40h136c17.648,0,32,14.355,32,32v53.511 c15.251-13.667,24-32.899,24-53.511v-48C368,104.371,335.703,72.07,296,72.07z\"\n ></path>\n </g>\n </g>\n <g>\n <path\n style=\"fill: #5c546a\"\n d=\"M61.632,400.544C105.562,449.319,169.191,480,240,480s134.438-30.681,178.368-79.456 c-7.66-10.356-18.462-18.77-32.352-22.659c-0.32-0.09-0.641-0.16-0.969-0.207l-63.859-9.582c-0.391-0.059-1.227-0.09-1.625-0.09 c-4.039,0-7.445,3.012-7.938,7.023c-4,32.48-34.789,56.977-71.625,56.977c-36.844,0-67.633-24.492-71.625-56.977 c-0.5-4.129-4.219-7.234-8.141-7.02c-0.469-0.027-0.93,0.012-1.422,0.086l-63.859,9.582c-0.328,0.047-0.648,0.117-0.969,0.207 C80.094,381.775,69.292,390.188,61.632,400.544z\"\n ></path>\n </g>\n </g>\n </g>\n</svg>\n", changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
|
|
894
1082
|
}
|
|
895
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1083
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UserIcon, decorators: [{
|
|
896
1084
|
type: Component,
|
|
897
1085
|
args: [{ selector: 'acp-user-icon', imports: [], changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, template: "<svg\n [attr.width]=\"size()\"\n [attr.height]=\"size()\"\n version=\"1.1\"\n id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n viewBox=\"0 0 480 480\"\n xml:space=\"preserve\"\n fill=\"#000000\"\n>\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n <g id=\"SVGRepo_iconCarrier\">\n <g>\n <g>\n <circle style=\"fill: #b8bac0\" cx=\"240\" cy=\"240\" r=\"240\"></circle>\n </g>\n <g>\n <g>\n <path\n style=\"fill: #ffffff\"\n d=\"M240,360.07c-27.944,0-53.297-11.991-72.003-31.372c-0.014,11.615-0.436,28.379-3.516,40.611 c2.02,1.235,3.588,3.262,3.894,5.784c3.992,32.484,34.781,56.977,71.625,56.977c36.836,0,67.625-24.496,71.625-56.977 c0.31-2.525,1.844-4.549,3.895-5.78c-3.08-12.233-3.503-28.999-3.517-40.615C293.297,348.079,267.944,360.07,240,360.07z\"\n ></path>\n </g>\n </g>\n <g>\n <g>\n <path\n style=\"fill: #d7dbe0\"\n d=\"M310.44,330.174c-18.549,18.477-43.242,29.896-70.44,29.896 c-27.944,0-53.297-11.991-72.003-31.372c-0.014,11.615-0.436,28.379-3.516,40.611c2.02,1.235,3.588,3.262,3.894,5.784 c1.765,14.359,8.778,27.144,19.223,36.954C235.766,405.265,290.437,357.702,310.44,330.174z\"\n ></path>\n </g>\n </g>\n <g>\n <g>\n <path\n style=\"fill: #ffffff\"\n d=\"M312,160.07H176c-22.055,0-40,17.945-40,40v48c0,61.758,46.656,112,104,112s104-50.242,104-112 v-56C344,174.426,329.648,160.07,312,160.07z\"\n ></path>\n </g>\n </g>\n <g>\n <g>\n <path\n style=\"fill: #5c546a\"\n d=\"M296,72.07H192c-15.047,0-27.695,10.438-31.102,24.449C133.359,100.02,112,123.598,112,152.07v40 c0,20.617,8.752,39.851,24,53.52v-45.52c0-22.055,17.945-40,40-40h136c17.648,0,32,14.355,32,32v53.511 c15.251-13.667,24-32.899,24-53.511v-48C368,104.371,335.703,72.07,296,72.07z\"\n ></path>\n </g>\n </g>\n <g>\n <path\n style=\"fill: #5c546a\"\n d=\"M61.632,400.544C105.562,449.319,169.191,480,240,480s134.438-30.681,178.368-79.456 c-7.66-10.356-18.462-18.77-32.352-22.659c-0.32-0.09-0.641-0.16-0.969-0.207l-63.859-9.582c-0.391-0.059-1.227-0.09-1.625-0.09 c-4.039,0-7.445,3.012-7.938,7.023c-4,32.48-34.789,56.977-71.625,56.977c-36.844,0-67.633-24.492-71.625-56.977 c-0.5-4.129-4.219-7.234-8.141-7.02c-0.469-0.027-0.93,0.012-1.422,0.086l-63.859,9.582c-0.328,0.047-0.648,0.117-0.969,0.207 C80.094,381.775,69.292,390.188,61.632,400.544z\"\n ></path>\n </g>\n </g>\n </g>\n</svg>\n" }]
|
|
898
1086
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
@@ -1023,10 +1211,10 @@ class IconRegistryService {
|
|
|
1023
1211
|
removeIcon(name) {
|
|
1024
1212
|
return this.registry.delete(name);
|
|
1025
1213
|
}
|
|
1026
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
1027
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
1214
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IconRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1215
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IconRegistryService, providedIn: 'root' });
|
|
1028
1216
|
}
|
|
1029
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1217
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IconRegistryService, decorators: [{
|
|
1030
1218
|
type: Injectable,
|
|
1031
1219
|
args: [{
|
|
1032
1220
|
providedIn: 'root',
|
|
@@ -1102,10 +1290,10 @@ class SvgIcon {
|
|
|
1102
1290
|
}
|
|
1103
1291
|
}, { allowSignalWrites: true });
|
|
1104
1292
|
}
|
|
1105
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
1106
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0
|
|
1293
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SvgIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1294
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: SvgIcon, isStandalone: true, selector: "acp-svg-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, useFallback: { classPropertyName: "useFallback", publicName: "useFallback", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"acp-svg-icon\"\n [style.width]=\"computedWidth()\"\n [style.height]=\"computedHeight()\"\n [style.color]=\"color()\"\n [innerHTML]=\"iconSvg()\"\n></div>\n", styles: [".acp-svg-icon{display:inline-flex;align-items:center;justify-content:center}.acp-svg-icon svg{width:100%;height:100%;fill:currentColor}.acp-svg-icon:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
|
|
1107
1295
|
}
|
|
1108
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1296
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SvgIcon, decorators: [{
|
|
1109
1297
|
type: Component,
|
|
1110
1298
|
args: [{ selector: 'acp-svg-icon', imports: [], changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"acp-svg-icon\"\n [style.width]=\"computedWidth()\"\n [style.height]=\"computedHeight()\"\n [style.color]=\"color()\"\n [innerHTML]=\"iconSvg()\"\n></div>\n", styles: [".acp-svg-icon{display:inline-flex;align-items:center;justify-content:center}.acp-svg-icon svg{width:100%;height:100%;fill:currentColor}.acp-svg-icon:empty{display:none}\n"] }]
|
|
1111
1299
|
}], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], useFallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "useFallback", required: false }] }] } });
|
|
@@ -1149,19 +1337,19 @@ class InputChip {
|
|
|
1149
1337
|
this.chips()[index] = value.replace(/\s+/g, '');
|
|
1150
1338
|
}
|
|
1151
1339
|
}
|
|
1152
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
1153
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0
|
|
1340
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: InputChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1341
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: InputChip, isStandalone: true, selector: "acp-input-chip", inputs: { chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: true, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: true, transformFunction: null }, placelholder: { classPropertyName: "placelholder", publicName: "placelholder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-form-field class=\"w-100\" appearance=\"outline\">\n <mat-label>{{ labelText() }}</mat-label>\n <mat-chip-grid #chipGrid aria-label=\"Enter fruits\">\n @for (chip of chips(); track $index) {\n <mat-chip-row\n (removed)=\"remove(chip)\"\n [editable]=\"true\"\n (edited)=\"edit(chip, $event)\"\n [aria-description]=\"'press enter to edit ' + chip\"\n >\n {{ chip }}\n <button matChipRemove [attr.aria-label]=\"'remove ' + chip\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n <input\n [placeholder]=\"placelholder()\"\n [matChipInputFor]=\"chipGrid\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matChipInputAddOnBlur]=\"addOnBlur\"\n (matChipInputTokenEnd)=\"add($event)\"\n />\n </mat-chip-grid>\n <mat-hint align=\"start\"><strong>Ingrese {{ labelText() }} y dale \"Enter\"</strong> </mat-hint>\n</mat-form-field>\n", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
|
|
1154
1342
|
}
|
|
1155
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1343
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: InputChip, decorators: [{
|
|
1156
1344
|
type: Component,
|
|
1157
1345
|
args: [{ selector: 'acp-input-chip', imports: [MatFormField, MatLabel, MatChipRow, MatIcon, MatHint, MatChipGrid, MatChipInput], changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, template: "<mat-form-field class=\"w-100\" appearance=\"outline\">\n <mat-label>{{ labelText() }}</mat-label>\n <mat-chip-grid #chipGrid aria-label=\"Enter fruits\">\n @for (chip of chips(); track $index) {\n <mat-chip-row\n (removed)=\"remove(chip)\"\n [editable]=\"true\"\n (edited)=\"edit(chip, $event)\"\n [aria-description]=\"'press enter to edit ' + chip\"\n >\n {{ chip }}\n <button matChipRemove [attr.aria-label]=\"'remove ' + chip\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n <input\n [placeholder]=\"placelholder()\"\n [matChipInputFor]=\"chipGrid\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matChipInputAddOnBlur]=\"addOnBlur\"\n (matChipInputTokenEnd)=\"add($event)\"\n />\n </mat-chip-grid>\n <mat-hint align=\"start\"><strong>Ingrese {{ labelText() }} y dale \"Enter\"</strong> </mat-hint>\n</mat-form-field>\n" }]
|
|
1158
1346
|
}], propDecorators: { chips: [{ type: i0.Input, args: [{ isSignal: true, alias: "chips", required: true }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: true }] }], placelholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placelholder", required: false }] }] } });
|
|
1159
1347
|
|
|
1160
1348
|
class Spinner {
|
|
1161
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
1162
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0
|
|
1349
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1350
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: Spinner, isStandalone: true, selector: "acp-spinner", ngImport: i0, template: "<div class=\"acp-spinner\">\n <mat-spinner />\n</div>\n", styles: [".acp-spinner{display:flex;justify-content:center;align-items:center;height:100%}\n"], dependencies: [{ kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
|
|
1163
1351
|
}
|
|
1164
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1352
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Spinner, decorators: [{
|
|
1165
1353
|
type: Component,
|
|
1166
1354
|
args: [{ selector: 'acp-spinner', imports: [MatProgressSpinner], changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, template: "<div class=\"acp-spinner\">\n <mat-spinner />\n</div>\n", styles: [".acp-spinner{display:flex;justify-content:center;align-items:center;height:100%}\n"] }]
|
|
1167
1355
|
}] });
|
|
@@ -1384,12 +1572,12 @@ class TabulatorTable {
|
|
|
1384
1572
|
}
|
|
1385
1573
|
};
|
|
1386
1574
|
}
|
|
1387
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
1388
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0
|
|
1575
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TabulatorTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1576
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: TabulatorTable, isStandalone: true, selector: "acp-tabulator-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, dataTree: { classPropertyName: "dataTree", publicName: "dataTree", isSignal: true, isRequired: false, transformFunction: null }, dataTreeChildField: { classPropertyName: "dataTreeChildField", publicName: "dataTreeChildField", isSignal: true, isRequired: false, transformFunction: null }, dataTreeStartExpanded: { classPropertyName: "dataTreeStartExpanded", publicName: "dataTreeStartExpanded", isSignal: true, isRequired: false, transformFunction: null }, dataTreeSelectPropagate: { classPropertyName: "dataTreeSelectPropagate", publicName: "dataTreeSelectPropagate", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, reactiveData: { classPropertyName: "reactiveData", publicName: "reactiveData", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, selectableRows: { classPropertyName: "selectableRows", publicName: "selectableRows", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, rowFormatter: { classPropertyName: "rowFormatter", publicName: "rowFormatter", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowDeleted: "rowDeleted", cellEdited: "cellEdited", rowClick: "rowClick", rowSelected: "rowSelected", tableReady: "tableReady" }, usesOnChanges: true, ngImport: i0, template: "<div [id]=\"containerId\" class=\"acp-tabulator-table-container\"></div>\n", styles: [".tabulator{font-size:12px;border-collapse:collapse;width:100%}.acp-tabulator-table{display:block}.acp-tabulator-table-container{width:100%}.acp-tabulator-table-container .tabulator-row.tabulator-selectable:hover{background-color:#0000000a;cursor:pointer;transition:background-color .2s ease}.acp-tabulator-table-container .tabulator-row.tabulator-selected{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .12))}@media(max-width:768px){.acp-tabulator-table-container .tabulator-header{font-size:.875rem}.acp-tabulator-table-container .tabulator-cell{font-size:.875rem;padding:8px 6px}}.acp-tabulator-table-container .tabulator-loader{background:var(--mat-sys-surface-container, rgba(255, 255, 255, .8));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar{width:8px;height:8px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-track{background:var(--mat-sys-surface-variant, #f1f1f1);border-radius:4px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-thumb{background:var(--mat-sys-outline, #c1c1c1);border-radius:4px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-on-surface-variant, #a8a8a8)}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
|
|
1389
1577
|
}
|
|
1390
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1578
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TabulatorTable, decorators: [{
|
|
1391
1579
|
type: Component,
|
|
1392
|
-
args: [{ selector: 'acp-tabulator-table', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, template: "<div [id]=\"containerId\" class=\"acp-tabulator-table-container\"></div>\n", styles: [".tabulator{font-size:12px;border-collapse:collapse;width:100%}.acp-tabulator-table{display:block}.acp-tabulator-table-container{width:100%}.acp-tabulator-table-container .tabulator-row.tabulator-selectable:hover{background-color:#0000000a;cursor:pointer;transition:background-color .2s ease}.acp-tabulator-table-container .tabulator-row.tabulator-selected{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .12))}@media(max-width:768px){.acp-tabulator-table-container .tabulator-header{font-size:.875rem}.acp-tabulator-table-container .tabulator-cell{font-size:.875rem;padding:8px 6px}}.acp-tabulator-table-container .tabulator-loader{background:var(--mat-sys-surface-container, rgba(255, 255, 255, .8));backdrop-filter:blur(2px)}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar{width:8px;height:8px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-track{background:var(--mat-sys-surface-variant, #f1f1f1);border-radius:4px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-thumb{background:var(--mat-sys-outline, #c1c1c1);border-radius:4px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-on-surface-variant, #a8a8a8)}\n"] }]
|
|
1580
|
+
args: [{ selector: 'acp-tabulator-table', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, template: "<div [id]=\"containerId\" class=\"acp-tabulator-table-container\"></div>\n", styles: [".tabulator{font-size:12px;border-collapse:collapse;width:100%}.acp-tabulator-table{display:block}.acp-tabulator-table-container{width:100%}.acp-tabulator-table-container .tabulator-row.tabulator-selectable:hover{background-color:#0000000a;cursor:pointer;transition:background-color .2s ease}.acp-tabulator-table-container .tabulator-row.tabulator-selected{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .12))}@media(max-width:768px){.acp-tabulator-table-container .tabulator-header{font-size:.875rem}.acp-tabulator-table-container .tabulator-cell{font-size:.875rem;padding:8px 6px}}.acp-tabulator-table-container .tabulator-loader{background:var(--mat-sys-surface-container, rgba(255, 255, 255, .8));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar{width:8px;height:8px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-track{background:var(--mat-sys-surface-variant, #f1f1f1);border-radius:4px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-thumb{background:var(--mat-sys-outline, #c1c1c1);border-radius:4px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-on-surface-variant, #a8a8a8)}\n"] }]
|
|
1393
1581
|
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], dataTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataTree", required: false }] }], dataTreeChildField: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataTreeChildField", required: false }] }], dataTreeStartExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataTreeStartExpanded", required: false }] }], dataTreeSelectPropagate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataTreeSelectPropagate", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], reactiveData: [{ type: i0.Input, args: [{ isSignal: true, alias: "reactiveData", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], selectableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableRows", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], rowFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowFormatter", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], rowDeleted: [{ type: i0.Output, args: ["rowDeleted"] }], cellEdited: [{ type: i0.Output, args: ["cellEdited"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowSelected: [{ type: i0.Output, args: ["rowSelected"] }], tableReady: [{ type: i0.Output, args: ["tableReady"] }] } });
|
|
1394
1582
|
|
|
1395
1583
|
class AdvancedDialogService {
|
|
@@ -1516,10 +1704,10 @@ class AdvancedDialogService {
|
|
|
1516
1704
|
};
|
|
1517
1705
|
return sizeMap[size];
|
|
1518
1706
|
}
|
|
1519
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
1520
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
1707
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AdvancedDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1708
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AdvancedDialogService, providedIn: 'root' });
|
|
1521
1709
|
}
|
|
1522
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1710
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AdvancedDialogService, decorators: [{
|
|
1523
1711
|
type: Injectable,
|
|
1524
1712
|
args: [{
|
|
1525
1713
|
providedIn: 'root',
|
|
@@ -1545,10 +1733,10 @@ class OverlayService {
|
|
|
1545
1733
|
this.overlayRef = null;
|
|
1546
1734
|
}
|
|
1547
1735
|
}
|
|
1548
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
1549
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
1736
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1737
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OverlayService, providedIn: 'root' });
|
|
1550
1738
|
}
|
|
1551
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1739
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OverlayService, decorators: [{
|
|
1552
1740
|
type: Injectable,
|
|
1553
1741
|
args: [{
|
|
1554
1742
|
providedIn: 'root',
|
|
@@ -1590,440 +1778,10 @@ class ThemeSwitcher {
|
|
|
1590
1778
|
return;
|
|
1591
1779
|
document.documentElement.classList.toggle('dark-theme', isDark);
|
|
1592
1780
|
}
|
|
1593
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
1594
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
1781
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ThemeSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1782
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ThemeSwitcher, providedIn: 'root' });
|
|
1595
1783
|
}
|
|
1596
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1597
|
-
type: Injectable,
|
|
1598
|
-
args: [{
|
|
1599
|
-
providedIn: 'root',
|
|
1600
|
-
}]
|
|
1601
|
-
}], ctorParameters: () => [] });
|
|
1602
|
-
|
|
1603
|
-
// Configuraciones predefinidas mejoradas
|
|
1604
|
-
const AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG = {
|
|
1605
|
-
placeholder: 'Buscar...',
|
|
1606
|
-
disabled: false,
|
|
1607
|
-
debounceTime: 300,
|
|
1608
|
-
minSearchLength: 2,
|
|
1609
|
-
maxHistoryItems: 10,
|
|
1610
|
-
itemsPerPage: 10,
|
|
1611
|
-
enableStockFilter: true,
|
|
1612
|
-
stockProperty: 'stock',
|
|
1613
|
-
enablePagination: true,
|
|
1614
|
-
enableFilters: true,
|
|
1615
|
-
enableFooterActions: true,
|
|
1616
|
-
overlayWidth: '100%',
|
|
1617
|
-
overlayMaxHeight: '500px',
|
|
1618
|
-
noResultsText: 'No se encontraron resultados',
|
|
1619
|
-
sectionTitle: 'Resultados',
|
|
1620
|
-
searchMode: 'remote',
|
|
1621
|
-
searchFields: [
|
|
1622
|
-
{ value: 'description', label: 'Descripción', property: 'description' },
|
|
1623
|
-
{ value: 'code', label: 'Código', property: 'code' },
|
|
1624
|
-
{ value: 'barcode', label: 'Código de Barras', property: 'barcode' },
|
|
1625
|
-
{ value: 'auxCode', label: 'Código Auxiliar', property: 'auxCode' },
|
|
1626
|
-
],
|
|
1627
|
-
stockOptions: [
|
|
1628
|
-
{ value: 'all', label: 'Todos' },
|
|
1629
|
-
{ value: 'with-stock', label: 'Con Stock' },
|
|
1630
|
-
{ value: 'without-stock', label: 'Sin Stock' },
|
|
1631
|
-
],
|
|
1632
|
-
};
|
|
1633
|
-
const AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG = {
|
|
1634
|
-
...AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG,
|
|
1635
|
-
placeholder: 'Buscar productos...',
|
|
1636
|
-
enableStockFilter: true,
|
|
1637
|
-
enableFooterActions: true,
|
|
1638
|
-
sectionTitle: 'Productos',
|
|
1639
|
-
noResultsText: 'No se encontraron productos',
|
|
1640
|
-
};
|
|
1641
|
-
const AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG = {
|
|
1642
|
-
...AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG,
|
|
1643
|
-
placeholder: 'Buscar clientes...',
|
|
1644
|
-
enableStockFilter: false,
|
|
1645
|
-
enableFooterActions: false,
|
|
1646
|
-
sectionTitle: 'Clientes',
|
|
1647
|
-
noResultsText: 'No se encontraron clientes',
|
|
1648
|
-
searchFields: [
|
|
1649
|
-
{ value: 'name', label: 'Nombre', property: 'name' },
|
|
1650
|
-
{ value: 'email', label: 'Email', property: 'email' },
|
|
1651
|
-
{ value: 'phone', label: 'Teléfono', property: 'phone' },
|
|
1652
|
-
{ value: 'document', label: 'Documento', property: 'document' },
|
|
1653
|
-
],
|
|
1654
|
-
};
|
|
1655
|
-
const AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG = {
|
|
1656
|
-
...AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG,
|
|
1657
|
-
placeholder: 'Buscar...',
|
|
1658
|
-
enableStockFilter: false,
|
|
1659
|
-
enableFilters: false,
|
|
1660
|
-
enableFooterActions: false,
|
|
1661
|
-
enablePagination: false,
|
|
1662
|
-
itemsPerPage: 50,
|
|
1663
|
-
sectionTitle: 'Resultados',
|
|
1664
|
-
overlayMaxHeight: '300px',
|
|
1665
|
-
};
|
|
1666
|
-
// Configuración para búsqueda local
|
|
1667
|
-
const AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG = {
|
|
1668
|
-
...AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG,
|
|
1669
|
-
searchMode: 'local',
|
|
1670
|
-
debounceTime: 150, // Menos tiempo para búsqueda local
|
|
1671
|
-
minSearchLength: 1,
|
|
1672
|
-
};
|
|
1673
|
-
// Configuración para listas grandes con paginación
|
|
1674
|
-
const AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG = {
|
|
1675
|
-
...AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG,
|
|
1676
|
-
itemsPerPage: 20,
|
|
1677
|
-
enablePagination: true,
|
|
1678
|
-
overlayMaxHeight: '400px',
|
|
1679
|
-
};
|
|
1680
|
-
// Helper para crear configuración personalizada
|
|
1681
|
-
function createAutocompleteWrapperConfig(overrides) {
|
|
1682
|
-
return {
|
|
1683
|
-
...AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG,
|
|
1684
|
-
...overrides,
|
|
1685
|
-
};
|
|
1686
|
-
}
|
|
1687
|
-
|
|
1688
|
-
class AutocompleteWrapperService {
|
|
1689
|
-
historySubject = new BehaviorSubject([]);
|
|
1690
|
-
history$ = this.historySubject.asObservable();
|
|
1691
|
-
constructor() {
|
|
1692
|
-
this.loadHistoryFromStorage();
|
|
1693
|
-
}
|
|
1694
|
-
// Búsqueda local (sin API)
|
|
1695
|
-
searchLocal(items, query, filters, config) {
|
|
1696
|
-
const filtered = this.filterItems(items, query, filters, config);
|
|
1697
|
-
const page = 1; // Para búsqueda local, asumimos página 1
|
|
1698
|
-
const pageSize = config.itemsPerPage || 10;
|
|
1699
|
-
const startIndex = (page - 1) * pageSize;
|
|
1700
|
-
const pageItems = filtered.slice(startIndex, startIndex + pageSize);
|
|
1701
|
-
return of({
|
|
1702
|
-
items: pageItems,
|
|
1703
|
-
totalCount: filtered.length,
|
|
1704
|
-
hasMore: filtered.length > startIndex + pageSize,
|
|
1705
|
-
});
|
|
1706
|
-
}
|
|
1707
|
-
// Filtrar elementos basado en query y filtros
|
|
1708
|
-
filterItems(items, query, filters, config = AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG) {
|
|
1709
|
-
if (!query || query.length < (config.minSearchLength || 2)) {
|
|
1710
|
-
return [];
|
|
1711
|
-
}
|
|
1712
|
-
let filteredItems = items.filter(item => {
|
|
1713
|
-
if (item && typeof item === 'string') {
|
|
1714
|
-
return true;
|
|
1715
|
-
}
|
|
1716
|
-
// Buscar por el campo seleccionado
|
|
1717
|
-
const searchValue = this.getSearchValue(item, filters.searchBy, config);
|
|
1718
|
-
return searchValue.toLowerCase().includes(query.toLowerCase());
|
|
1719
|
-
});
|
|
1720
|
-
// Aplicar filtro de stock si está habilitado
|
|
1721
|
-
if (config.enableStockFilter && filters.stockFilter !== 'all') {
|
|
1722
|
-
filteredItems = filteredItems.filter(item => {
|
|
1723
|
-
if (typeof item === 'string')
|
|
1724
|
-
return true;
|
|
1725
|
-
const stockValue = item[config.stockProperty || 'stock'];
|
|
1726
|
-
const hasStock = stockValue !== undefined && stockValue !== null && stockValue > 0;
|
|
1727
|
-
return filters.stockFilter === 'with-stock' ? hasStock : !hasStock;
|
|
1728
|
-
});
|
|
1729
|
-
}
|
|
1730
|
-
return filteredItems;
|
|
1731
|
-
}
|
|
1732
|
-
// Simular búsqueda asíncrona
|
|
1733
|
-
searchAsync(items, query, filters, config = AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG) {
|
|
1734
|
-
const results = this.filterItems(items, query, filters, config);
|
|
1735
|
-
return of(results).pipe(delay(100)); // Simular delay de API
|
|
1736
|
-
}
|
|
1737
|
-
// Obtener valor de búsqueda según el campo seleccionado
|
|
1738
|
-
getSearchValue(item, searchBy, config) {
|
|
1739
|
-
const searchField = config.searchFields?.find(field => field.value === searchBy);
|
|
1740
|
-
if (searchField) {
|
|
1741
|
-
return item[searchField.property] || '';
|
|
1742
|
-
}
|
|
1743
|
-
// Fallback a la lógica anterior
|
|
1744
|
-
switch (searchBy) {
|
|
1745
|
-
case 'description':
|
|
1746
|
-
return item['description'] || '';
|
|
1747
|
-
case 'code':
|
|
1748
|
-
return item['code'] || item.id?.toString() || '';
|
|
1749
|
-
case 'barcode':
|
|
1750
|
-
return item['barcode'] || '';
|
|
1751
|
-
case 'auxCode':
|
|
1752
|
-
return item['auxCode'] || '';
|
|
1753
|
-
case 'email':
|
|
1754
|
-
return item['email'] || '';
|
|
1755
|
-
case 'phone':
|
|
1756
|
-
return item['phone'] || '';
|
|
1757
|
-
case 'document':
|
|
1758
|
-
return item['document'] || '';
|
|
1759
|
-
case 'name':
|
|
1760
|
-
default:
|
|
1761
|
-
return item.name || item.value || '';
|
|
1762
|
-
}
|
|
1763
|
-
}
|
|
1764
|
-
// Gestión de historial específico del wrapper
|
|
1765
|
-
addToHistory(item, maxItems = 10) {
|
|
1766
|
-
const currentHistory = this.historySubject.value;
|
|
1767
|
-
// Remover si ya existe
|
|
1768
|
-
const filteredHistory = currentHistory.filter(historyItem => {
|
|
1769
|
-
if (typeof item === 'string' && typeof historyItem === 'string') {
|
|
1770
|
-
return item !== historyItem;
|
|
1771
|
-
}
|
|
1772
|
-
else if (typeof item === 'object' && typeof historyItem === 'object') {
|
|
1773
|
-
return (item.id || item.name) !== (historyItem.id || historyItem.name);
|
|
1774
|
-
}
|
|
1775
|
-
return true;
|
|
1776
|
-
});
|
|
1777
|
-
// Agregar al inicio
|
|
1778
|
-
const newHistory = [item, ...filteredHistory].slice(0, maxItems);
|
|
1779
|
-
this.historySubject.next(newHistory);
|
|
1780
|
-
this.saveHistoryToStorage(newHistory);
|
|
1781
|
-
}
|
|
1782
|
-
removeFromHistory(index) {
|
|
1783
|
-
const currentHistory = this.historySubject.value;
|
|
1784
|
-
currentHistory.splice(index, 1);
|
|
1785
|
-
this.historySubject.next([...currentHistory]);
|
|
1786
|
-
this.saveHistoryToStorage(currentHistory);
|
|
1787
|
-
}
|
|
1788
|
-
clearHistory() {
|
|
1789
|
-
this.historySubject.next([]);
|
|
1790
|
-
this.saveHistoryToStorage([]);
|
|
1791
|
-
}
|
|
1792
|
-
getHistory() {
|
|
1793
|
-
return this.historySubject.value;
|
|
1794
|
-
}
|
|
1795
|
-
// Gestión de almacenamiento específico del wrapper
|
|
1796
|
-
loadHistoryFromStorage() {
|
|
1797
|
-
try {
|
|
1798
|
-
const stored = localStorage.getItem('autocomplete_wrapper_history');
|
|
1799
|
-
if (stored) {
|
|
1800
|
-
const history = JSON.parse(stored);
|
|
1801
|
-
this.historySubject.next(history);
|
|
1802
|
-
}
|
|
1803
|
-
}
|
|
1804
|
-
catch (error) {
|
|
1805
|
-
console.warn('Error loading autocomplete wrapper history:', error);
|
|
1806
|
-
}
|
|
1807
|
-
}
|
|
1808
|
-
saveHistoryToStorage(history) {
|
|
1809
|
-
try {
|
|
1810
|
-
localStorage.setItem('autocomplete_wrapper_history', JSON.stringify(history));
|
|
1811
|
-
}
|
|
1812
|
-
catch (error) {
|
|
1813
|
-
console.warn('Error saving autocomplete wrapper history:', error);
|
|
1814
|
-
}
|
|
1815
|
-
}
|
|
1816
|
-
// Paginación
|
|
1817
|
-
paginateItems(items, page, itemsPerPage) {
|
|
1818
|
-
const startIndex = (page - 1) * itemsPerPage;
|
|
1819
|
-
const endIndex = startIndex + itemsPerPage;
|
|
1820
|
-
return items.slice(startIndex, endIndex);
|
|
1821
|
-
}
|
|
1822
|
-
getTotalPages(totalItems, itemsPerPage) {
|
|
1823
|
-
return Math.ceil(totalItems / itemsPerPage) || 1;
|
|
1824
|
-
}
|
|
1825
|
-
// Validaciones
|
|
1826
|
-
isValidPage(page, totalPages) {
|
|
1827
|
-
return page >= 1 && page <= totalPages;
|
|
1828
|
-
}
|
|
1829
|
-
// Utilidades para templates
|
|
1830
|
-
highlightText(text, query) {
|
|
1831
|
-
if (!query || !text)
|
|
1832
|
-
return text;
|
|
1833
|
-
const regex = new RegExp(`(${query})`, 'gi');
|
|
1834
|
-
return text.replace(regex, '<mark>$1</mark>');
|
|
1835
|
-
}
|
|
1836
|
-
getItemDisplayText(item, displayField = 'nombre') {
|
|
1837
|
-
if (typeof item === 'string')
|
|
1838
|
-
return item;
|
|
1839
|
-
return item[displayField] || item.name || item.value || item.id?.toString() || '';
|
|
1840
|
-
}
|
|
1841
|
-
// Configuración dinámica
|
|
1842
|
-
mergeConfig(userConfig) {
|
|
1843
|
-
return { ...AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, ...userConfig };
|
|
1844
|
-
}
|
|
1845
|
-
// Factory para crear función de búsqueda genérica
|
|
1846
|
-
createGenericSearchFunction(config) {
|
|
1847
|
-
return (query, filters, page = 1, pageSize = 10) => {
|
|
1848
|
-
const { searchBy, ...rest } = filters;
|
|
1849
|
-
const params = {
|
|
1850
|
-
[config.queryParam || 'q']: query,
|
|
1851
|
-
[config.searchByParam || 'searchBy']: searchBy,
|
|
1852
|
-
[config.pageParam || 'page']: page,
|
|
1853
|
-
[config.pageSizeParam || 'pageSize']: pageSize,
|
|
1854
|
-
...rest,
|
|
1855
|
-
};
|
|
1856
|
-
return config.search(params).pipe(map(response => {
|
|
1857
|
-
if (config.responseMapper) {
|
|
1858
|
-
return config.responseMapper(response);
|
|
1859
|
-
}
|
|
1860
|
-
// Mapper por defecto
|
|
1861
|
-
const items = response.data || response.items || response;
|
|
1862
|
-
const totalRecords = response.totalRecords || response.totalCount || response.total || 0;
|
|
1863
|
-
return {
|
|
1864
|
-
items,
|
|
1865
|
-
totalCount: totalRecords,
|
|
1866
|
-
hasMore: response.hasMore || false,
|
|
1867
|
-
};
|
|
1868
|
-
}));
|
|
1869
|
-
};
|
|
1870
|
-
}
|
|
1871
|
-
// Función para crear datos de ejemplo/mock específicos del wrapper
|
|
1872
|
-
createMockData() {
|
|
1873
|
-
return [
|
|
1874
|
-
{
|
|
1875
|
-
id: 1,
|
|
1876
|
-
name: 'iPhone 14 Pro 128GB',
|
|
1877
|
-
description: 'Smartphone Apple con chip A16 Bionic y cámara Pro',
|
|
1878
|
-
code: 'IP14P-128',
|
|
1879
|
-
barcode: '1234567890123',
|
|
1880
|
-
auxCode: 'APL-IP14P-128',
|
|
1881
|
-
stock: 15,
|
|
1882
|
-
category: 'Smartphones',
|
|
1883
|
-
brand: 'Apple',
|
|
1884
|
-
unit: 'unidad',
|
|
1885
|
-
prices: [
|
|
1886
|
-
{
|
|
1887
|
-
id: 1,
|
|
1888
|
-
type: 'retail',
|
|
1889
|
-
label: 'Público',
|
|
1890
|
-
value: 999,
|
|
1891
|
-
currency: 'USD',
|
|
1892
|
-
includesTax: true,
|
|
1893
|
-
isDefault: true,
|
|
1894
|
-
isActive: true,
|
|
1895
|
-
},
|
|
1896
|
-
{
|
|
1897
|
-
id: 2,
|
|
1898
|
-
type: 'wholesale',
|
|
1899
|
-
label: 'Mayorista',
|
|
1900
|
-
value: 850,
|
|
1901
|
-
currency: 'USD',
|
|
1902
|
-
minQuantity: 5,
|
|
1903
|
-
includesTax: false,
|
|
1904
|
-
isActive: true,
|
|
1905
|
-
},
|
|
1906
|
-
{
|
|
1907
|
-
id: 3,
|
|
1908
|
-
type: 'vip',
|
|
1909
|
-
label: 'VIP',
|
|
1910
|
-
value: 899,
|
|
1911
|
-
currency: 'USD',
|
|
1912
|
-
includesTax: true,
|
|
1913
|
-
isActive: true,
|
|
1914
|
-
},
|
|
1915
|
-
{
|
|
1916
|
-
id: 4,
|
|
1917
|
-
type: 'promotional',
|
|
1918
|
-
label: 'Black Friday',
|
|
1919
|
-
value: 749,
|
|
1920
|
-
currency: 'USD',
|
|
1921
|
-
validFrom: new Date('2024-11-24'),
|
|
1922
|
-
validTo: new Date('2024-11-30'),
|
|
1923
|
-
includesTax: true,
|
|
1924
|
-
isActive: true,
|
|
1925
|
-
},
|
|
1926
|
-
],
|
|
1927
|
-
},
|
|
1928
|
-
{
|
|
1929
|
-
id: 2,
|
|
1930
|
-
name: 'Samsung Galaxy S23 256GB',
|
|
1931
|
-
description: 'Flagship Android con cámara de 200MP',
|
|
1932
|
-
code: 'SGS23-256',
|
|
1933
|
-
barcode: '2345678901234',
|
|
1934
|
-
auxCode: 'SAM-GS23-256',
|
|
1935
|
-
stock: 0,
|
|
1936
|
-
category: 'Smartphones',
|
|
1937
|
-
brand: 'Samsung',
|
|
1938
|
-
unit: 'unidad',
|
|
1939
|
-
images: [
|
|
1940
|
-
{
|
|
1941
|
-
id: 1,
|
|
1942
|
-
url: 'https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=400',
|
|
1943
|
-
thumbnailUrl: 'https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=200',
|
|
1944
|
-
alt: 'Samsung Galaxy S23 frontal',
|
|
1945
|
-
type: 'main',
|
|
1946
|
-
isPrimary: true,
|
|
1947
|
-
order: 1,
|
|
1948
|
-
},
|
|
1949
|
-
{
|
|
1950
|
-
id: 2,
|
|
1951
|
-
url: 'https://images.unsplash.com/photo-1574755393849-623942496936?w=400',
|
|
1952
|
-
thumbnailUrl: 'https://images.unsplash.com/photo-1574755393849-623942496936?w=200',
|
|
1953
|
-
alt: 'Samsung Galaxy S23 trasero',
|
|
1954
|
-
type: 'gallery',
|
|
1955
|
-
order: 2,
|
|
1956
|
-
},
|
|
1957
|
-
],
|
|
1958
|
-
badges: [{ type: 'new', text: 'NUEVO' }, { type: 'bestseller' }],
|
|
1959
|
-
prices: [
|
|
1960
|
-
{
|
|
1961
|
-
id: 5,
|
|
1962
|
-
type: 'retail',
|
|
1963
|
-
label: 'Público',
|
|
1964
|
-
value: 799,
|
|
1965
|
-
currency: 'USD',
|
|
1966
|
-
includesTax: true,
|
|
1967
|
-
isDefault: true,
|
|
1968
|
-
isActive: true,
|
|
1969
|
-
},
|
|
1970
|
-
{
|
|
1971
|
-
id: 6,
|
|
1972
|
-
type: 'wholesale',
|
|
1973
|
-
label: 'Mayorista',
|
|
1974
|
-
value: 679,
|
|
1975
|
-
currency: 'USD',
|
|
1976
|
-
minQuantity: 3,
|
|
1977
|
-
includesTax: false,
|
|
1978
|
-
isActive: true,
|
|
1979
|
-
},
|
|
1980
|
-
],
|
|
1981
|
-
},
|
|
1982
|
-
];
|
|
1983
|
-
}
|
|
1984
|
-
// Métodos específicos para diferentes tipos de búsqueda
|
|
1985
|
-
searchProducts(query, filters = {}) {
|
|
1986
|
-
const defaultFilters = {
|
|
1987
|
-
searchBy: 'description',
|
|
1988
|
-
stockFilter: 'all',
|
|
1989
|
-
...filters,
|
|
1990
|
-
};
|
|
1991
|
-
const mockData = this.createMockData();
|
|
1992
|
-
return this.searchLocal(mockData, query, defaultFilters, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG);
|
|
1993
|
-
}
|
|
1994
|
-
// Crear configuración específica para diferentes casos de uso
|
|
1995
|
-
createProductSearchConfig() {
|
|
1996
|
-
return this.mergeConfig({
|
|
1997
|
-
placeholder: 'Buscar productos...',
|
|
1998
|
-
enableStockFilter: true,
|
|
1999
|
-
enableFooterActions: true,
|
|
2000
|
-
sectionTitle: 'Productos',
|
|
2001
|
-
searchFields: [
|
|
2002
|
-
{ value: 'description', label: 'Descripción', property: 'description' },
|
|
2003
|
-
{ value: 'code', label: 'Código', property: 'code' },
|
|
2004
|
-
{ value: 'barcode', label: 'Código de Barras', property: 'barcode' },
|
|
2005
|
-
{ value: 'auxCode', label: 'Código Auxiliar', property: 'auxCode' },
|
|
2006
|
-
],
|
|
2007
|
-
});
|
|
2008
|
-
}
|
|
2009
|
-
createCustomerSearchConfig() {
|
|
2010
|
-
return this.mergeConfig({
|
|
2011
|
-
placeholder: 'Buscar clientes...',
|
|
2012
|
-
enableStockFilter: false,
|
|
2013
|
-
enableFooterActions: false,
|
|
2014
|
-
sectionTitle: 'Clientes',
|
|
2015
|
-
searchFields: [
|
|
2016
|
-
{ value: 'name', label: 'Nombre', property: 'name' },
|
|
2017
|
-
{ value: 'email', label: 'Email', property: 'email' },
|
|
2018
|
-
{ value: 'phone', label: 'Teléfono', property: 'phone' },
|
|
2019
|
-
{ value: 'document', label: 'Documento', property: 'document' },
|
|
2020
|
-
],
|
|
2021
|
-
});
|
|
2022
|
-
}
|
|
2023
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AutocompleteWrapperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2024
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AutocompleteWrapperService, providedIn: 'root' });
|
|
2025
|
-
}
|
|
2026
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AutocompleteWrapperService, decorators: [{
|
|
1784
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ThemeSwitcher, decorators: [{
|
|
2027
1785
|
type: Injectable,
|
|
2028
1786
|
args: [{
|
|
2029
1787
|
providedIn: 'root',
|
|
@@ -2065,507 +1823,24 @@ class ThemeToggle {
|
|
|
2065
1823
|
toggleDarkMode() {
|
|
2066
1824
|
this.themeSwitcher.toggleDarkMode();
|
|
2067
1825
|
}
|
|
2068
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2069
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0
|
|
1826
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ThemeToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1827
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: ThemeToggle, isStandalone: true, selector: "acp-theme-toggle", inputs: { lightModeIcon: { classPropertyName: "lightModeIcon", publicName: "lightModeIcon", isSignal: true, isRequired: false, transformFunction: null }, darkModeIcon: { classPropertyName: "darkModeIcon", publicName: "darkModeIcon", isSignal: true, isRequired: false, transformFunction: null }, lightModeLabel: { classPropertyName: "lightModeLabel", publicName: "lightModeLabel", isSignal: true, isRequired: false, transformFunction: null }, darkModeLabel: { classPropertyName: "darkModeLabel", publicName: "darkModeLabel", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "acp-theme-toggle" }, ngImport: i0, template: "<button\n mat-icon-button\n type=\"button\"\n (click)=\"toggleDarkMode()\"\n [attr.aria-label]=\"currentLabel()\"\n [attr.aria-pressed]=\"isDarkMode()\"\n [matTooltip]=\"currentLabel()\"\n [attr.data-testid]=\"testId() || null\"\n>\n <mat-icon>{{ currentIcon() }}</mat-icon>\n</button>\n", styles: [".acp-theme-toggle{display:inline-block}\n"], 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"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2070
1828
|
}
|
|
2071
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1829
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ThemeToggle, decorators: [{
|
|
2072
1830
|
type: Component,
|
|
2073
1831
|
args: [{ selector: 'acp-theme-toggle', imports: [MatIconButton, MatIcon, MatTooltip], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2074
1832
|
class: 'acp-theme-toggle',
|
|
2075
1833
|
}, template: "<button\n mat-icon-button\n type=\"button\"\n (click)=\"toggleDarkMode()\"\n [attr.aria-label]=\"currentLabel()\"\n [attr.aria-pressed]=\"isDarkMode()\"\n [matTooltip]=\"currentLabel()\"\n [attr.data-testid]=\"testId() || null\"\n>\n <mat-icon>{{ currentIcon() }}</mat-icon>\n</button>\n", styles: [".acp-theme-toggle{display:inline-block}\n"] }]
|
|
2076
1834
|
}], propDecorators: { lightModeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "lightModeIcon", required: false }] }], darkModeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "darkModeIcon", required: false }] }], lightModeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lightModeLabel", required: false }] }], darkModeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "darkModeLabel", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }] } });
|
|
2077
1835
|
|
|
2078
|
-
class Pagination {
|
|
2079
|
-
totalRecords;
|
|
2080
|
-
pageSize;
|
|
2081
|
-
pageIndex;
|
|
2082
|
-
pageSizeOptions;
|
|
2083
|
-
hidePageSize;
|
|
2084
|
-
showPageSizeOptions;
|
|
2085
|
-
showFirstLastButtons;
|
|
2086
|
-
disabled;
|
|
2087
|
-
/**
|
|
2088
|
-
* @param pageIndex Current page index (0-based for MatPaginator compatibility)
|
|
2089
|
-
* @param pageSize Number of records per page
|
|
2090
|
-
* @param totalRecords Total number of records
|
|
2091
|
-
* @param pageSizeOptions Available page size options
|
|
2092
|
-
* @param options Display and behavior options
|
|
2093
|
-
*/
|
|
2094
|
-
constructor(pageIndex = 0, // MatPaginator starts at 0
|
|
2095
|
-
pageSize = 25, totalRecords = 0, pageSizeOptions = [25, 50, 75, 100], options = {}) {
|
|
2096
|
-
this.pageIndex = pageIndex;
|
|
2097
|
-
this.pageSize = pageSize;
|
|
2098
|
-
this.totalRecords = totalRecords;
|
|
2099
|
-
this.pageSizeOptions = pageSizeOptions;
|
|
2100
|
-
this.hidePageSize = options.hidePageSize ?? false;
|
|
2101
|
-
this.showPageSizeOptions = options.showPageSizeOptions ?? true;
|
|
2102
|
-
this.showFirstLastButtons = options.showFirstLastButtons ?? true;
|
|
2103
|
-
this.disabled = options.disabled ?? false;
|
|
2104
|
-
}
|
|
2105
|
-
/**
|
|
2106
|
-
* Calculates the total number of pages.
|
|
2107
|
-
*/
|
|
2108
|
-
getTotalPages() {
|
|
2109
|
-
return Math.ceil(this.totalRecords / this.pageSize);
|
|
2110
|
-
}
|
|
2111
|
-
/**
|
|
2112
|
-
* Handles page event similar to Angular Material example.
|
|
2113
|
-
* @param event MatPaginator PageEvent
|
|
2114
|
-
*/
|
|
2115
|
-
handlePageEvent(event) {
|
|
2116
|
-
this.totalRecords = event.length;
|
|
2117
|
-
this.pageSize = event.pageSize;
|
|
2118
|
-
this.pageIndex = event.pageIndex;
|
|
2119
|
-
}
|
|
2120
|
-
}
|
|
2121
|
-
|
|
2122
|
-
class ReusableAutocompleteComponent {
|
|
2123
|
-
static inputIdCounter = 0;
|
|
2124
|
-
inputId = `acp-autocomplete-search-input-${++ReusableAutocompleteComponent.inputIdCounter}`;
|
|
2125
|
-
dataSource = input([], /* @ts-ignore */
|
|
2126
|
-
...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ [])); // Para búsqueda local
|
|
2127
|
-
config = AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG;
|
|
2128
|
-
itemTemplate = input(/* @ts-ignore */
|
|
2129
|
-
...(ngDevMode ? [undefined, { debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
|
|
2130
|
-
searchFunction = input(/* @ts-ignore */
|
|
2131
|
-
...(ngDevMode ? [undefined, { debugName: "searchFunction" }] : /* istanbul ignore next */ []));
|
|
2132
|
-
notFoundTemplate = input(/* @ts-ignore */
|
|
2133
|
-
...(ngDevMode ? [undefined, { debugName: "notFoundTemplate" }] : /* istanbul ignore next */ []));
|
|
2134
|
-
overlayWidth = input('auto', /* @ts-ignore */
|
|
2135
|
-
...(ngDevMode ? [{ debugName: "overlayWidth" }] : /* istanbul ignore next */ []));
|
|
2136
|
-
overlayMaxHeight = input('400px', /* @ts-ignore */
|
|
2137
|
-
...(ngDevMode ? [{ debugName: "overlayMaxHeight" }] : /* istanbul ignore next */ []));
|
|
2138
|
-
itemSelected = output();
|
|
2139
|
-
searchChanged = output();
|
|
2140
|
-
searchRequested = output(); // Nuevo evento
|
|
2141
|
-
pageChanged = output();
|
|
2142
|
-
filterChanged = output();
|
|
2143
|
-
advancedSearchClicked = output();
|
|
2144
|
-
allResultsClicked = output();
|
|
2145
|
-
createClicked = output();
|
|
2146
|
-
searchInput = viewChild.required('searchInput');
|
|
2147
|
-
historyListElement = viewChild('historyListElement', /* @ts-ignore */
|
|
2148
|
-
...(ngDevMode ? [{ debugName: "historyListElement" }] : /* istanbul ignore next */ []));
|
|
2149
|
-
resultsListElement = viewChild('resultsListElement', /* @ts-ignore */
|
|
2150
|
-
...(ngDevMode ? [{ debugName: "resultsListElement" }] : /* istanbul ignore next */ []));
|
|
2151
|
-
// State
|
|
2152
|
-
query = '';
|
|
2153
|
-
isLoading = signal(false, /* @ts-ignore */
|
|
2154
|
-
...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
|
|
2155
|
-
overlayOpen = signal(false, /* @ts-ignore */
|
|
2156
|
-
...(ngDevMode ? [{ debugName: "overlayOpen" }] : /* istanbul ignore next */ []));
|
|
2157
|
-
selectedIndex = signal(-1, /* @ts-ignore */
|
|
2158
|
-
...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
|
|
2159
|
-
currentPage = signal(1, /* @ts-ignore */
|
|
2160
|
-
...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
|
|
2161
|
-
filteredItems = signal([], /* @ts-ignore */
|
|
2162
|
-
...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
|
|
2163
|
-
historyList = signal([], /* @ts-ignore */
|
|
2164
|
-
...(ngDevMode ? [{ debugName: "historyList" }] : /* istanbul ignore next */ []));
|
|
2165
|
-
totalCount = signal(0, /* @ts-ignore */
|
|
2166
|
-
...(ngDevMode ? [{ debugName: "totalCount" }] : /* istanbul ignore next */ []));
|
|
2167
|
-
// Filters
|
|
2168
|
-
filters = {
|
|
2169
|
-
searchBy: 'name',
|
|
2170
|
-
stockFilter: 'all',
|
|
2171
|
-
};
|
|
2172
|
-
// Computed properties
|
|
2173
|
-
isHistoryVisible = computed(() => {
|
|
2174
|
-
return this.query.length < (this.config.minSearchLength || 2) && this.historyList().length > 0;
|
|
2175
|
-
}, /* @ts-ignore */
|
|
2176
|
-
...(ngDevMode ? [{ debugName: "isHistoryVisible" }] : /* istanbul ignore next */ []));
|
|
2177
|
-
totalItems = computed(() => this.filteredItems().length, /* @ts-ignore */
|
|
2178
|
-
...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
|
|
2179
|
-
totalPages = computed(() => {
|
|
2180
|
-
const total = this.totalCount();
|
|
2181
|
-
return total > 0 ? Math.ceil(total / (this.config.itemsPerPage || 10)) : 1;
|
|
2182
|
-
}, /* @ts-ignore */
|
|
2183
|
-
...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
|
|
2184
|
-
currentPageItems = computed(() => {
|
|
2185
|
-
return this.filteredItems();
|
|
2186
|
-
}, /* @ts-ignore */
|
|
2187
|
-
...(ngDevMode ? [{ debugName: "currentPageItems" }] : /* istanbul ignore next */ []));
|
|
2188
|
-
startItem = computed(() => {
|
|
2189
|
-
const total = this.totalItems();
|
|
2190
|
-
if (total === 0)
|
|
2191
|
-
return 0;
|
|
2192
|
-
return (this.currentPage() - 1) * (this.config.itemsPerPage || 10) + 1;
|
|
2193
|
-
}, /* @ts-ignore */
|
|
2194
|
-
...(ngDevMode ? [{ debugName: "startItem" }] : /* istanbul ignore next */ []));
|
|
2195
|
-
endItem = computed(() => {
|
|
2196
|
-
const total = this.totalItems();
|
|
2197
|
-
const calculated = this.currentPage() * (this.config.itemsPerPage || 10);
|
|
2198
|
-
return Math.min(calculated, total);
|
|
2199
|
-
}, /* @ts-ignore */
|
|
2200
|
-
...(ngDevMode ? [{ debugName: "endItem" }] : /* istanbul ignore next */ []));
|
|
2201
|
-
sectionTitle = computed(() => {
|
|
2202
|
-
const total = this.totalItems();
|
|
2203
|
-
return `Resultados (${total})`;
|
|
2204
|
-
}, /* @ts-ignore */
|
|
2205
|
-
...(ngDevMode ? [{ debugName: "sectionTitle" }] : /* istanbul ignore next */ []));
|
|
2206
|
-
isNoResults = computed(() => {
|
|
2207
|
-
return (this.totalItems() === 0 &&
|
|
2208
|
-
!this.isLoading() &&
|
|
2209
|
-
this.query.length >= (this.config.minSearchLength || 2));
|
|
2210
|
-
}, /* @ts-ignore */
|
|
2211
|
-
...(ngDevMode ? [{ debugName: "isNoResults" }] : /* istanbul ignore next */ []));
|
|
2212
|
-
// Private
|
|
2213
|
-
destroy$ = new Subject();
|
|
2214
|
-
searchSubject = new Subject();
|
|
2215
|
-
autocompleteService = inject(AutocompleteWrapperService);
|
|
2216
|
-
ngOnInit() {
|
|
2217
|
-
this.mergeDefaultConfig();
|
|
2218
|
-
this.setupSearch();
|
|
2219
|
-
this.loadHistory();
|
|
2220
|
-
}
|
|
2221
|
-
ngOnDestroy() {
|
|
2222
|
-
this.destroy$.next();
|
|
2223
|
-
this.destroy$.complete();
|
|
2224
|
-
}
|
|
2225
|
-
mergeDefaultConfig() {
|
|
2226
|
-
this.config = this.autocompleteService.mergeConfig(this.config);
|
|
2227
|
-
this.filters.searchBy = this.config.searchFields?.[0]?.value || 'name';
|
|
2228
|
-
this.filters.stockFilter = this.config.stockOptions?.[0]?.value || 'all';
|
|
2229
|
-
}
|
|
2230
|
-
setupSearch() {
|
|
2231
|
-
this.filteredItems.set([]);
|
|
2232
|
-
this.searchSubject
|
|
2233
|
-
.pipe(debounceTime(this.config.debounceTime || 300),
|
|
2234
|
-
// distinctUntilChanged(),
|
|
2235
|
-
// distinctUntilChanged((prev, curr) => {
|
|
2236
|
-
// console.log(prev);
|
|
2237
|
-
// console.log(curr);
|
|
2238
|
-
// return prev.query === curr.query &&
|
|
2239
|
-
// JSON.stringify(prev.filters) === JSON.stringify(curr.filters) &&
|
|
2240
|
-
// prev.page === curr.page
|
|
2241
|
-
//
|
|
2242
|
-
// }
|
|
2243
|
-
//
|
|
2244
|
-
// ),
|
|
2245
|
-
takeUntil(this.destroy$), switchMap(({ query }) => this.performSearch(query)))
|
|
2246
|
-
.subscribe(result => {
|
|
2247
|
-
this.filteredItems.set(result.items);
|
|
2248
|
-
this.totalCount.set(result.totalCount);
|
|
2249
|
-
this.isLoading.set(false);
|
|
2250
|
-
});
|
|
2251
|
-
}
|
|
2252
|
-
performSearch(query) {
|
|
2253
|
-
if (query.length < (this.config.minSearchLength || 2)) {
|
|
2254
|
-
return of({ items: [], totalCount: 0 });
|
|
2255
|
-
}
|
|
2256
|
-
// ESTRATEGIA A: Función de búsqueda personalizada
|
|
2257
|
-
const searchFunction = this.searchFunction();
|
|
2258
|
-
if (searchFunction) {
|
|
2259
|
-
return searchFunction(query, this.filters, this.currentPage(), this.config.itemsPerPage || 10).pipe(catchError$1(() => of({ items: [], totalCount: 0 })));
|
|
2260
|
-
}
|
|
2261
|
-
// ESTRATEGIA B: Emit evento para que el padre maneje
|
|
2262
|
-
if (this.config.searchMode === 'remote') {
|
|
2263
|
-
this.searchRequested.emit({
|
|
2264
|
-
query,
|
|
2265
|
-
filters: this.filters,
|
|
2266
|
-
page: this.currentPage(),
|
|
2267
|
-
});
|
|
2268
|
-
return of({ items: [], totalCount: 0 }); // El padre actualizará los datos
|
|
2269
|
-
}
|
|
2270
|
-
// ESTRATEGIA C: Búsqueda local (fallback)
|
|
2271
|
-
return this.autocompleteService.searchLocal(this.dataSource(), query, this.filters, this.config);
|
|
2272
|
-
}
|
|
2273
|
-
loadHistory() {
|
|
2274
|
-
this.autocompleteService.history$.pipe(takeUntil(this.destroy$)).subscribe(history => {
|
|
2275
|
-
this.historyList.set(history);
|
|
2276
|
-
});
|
|
2277
|
-
}
|
|
2278
|
-
searchSubjectNext() {
|
|
2279
|
-
this.searchSubject.next({
|
|
2280
|
-
query: this.query,
|
|
2281
|
-
filters: this.filters,
|
|
2282
|
-
page: this.currentPage(),
|
|
2283
|
-
});
|
|
2284
|
-
}
|
|
2285
|
-
// Event Handlers
|
|
2286
|
-
onInput(event) {
|
|
2287
|
-
const target = event.target;
|
|
2288
|
-
this.query = target.value;
|
|
2289
|
-
this.selectedIndex.set(-1);
|
|
2290
|
-
this.currentPage.set(1);
|
|
2291
|
-
if (this.query.length >= (this.config.minSearchLength || 2)) {
|
|
2292
|
-
this.isLoading.set(true);
|
|
2293
|
-
this.searchSubjectNext();
|
|
2294
|
-
}
|
|
2295
|
-
else {
|
|
2296
|
-
this.filteredItems.set([]);
|
|
2297
|
-
this.isLoading.set(false);
|
|
2298
|
-
}
|
|
2299
|
-
this.showOverlay();
|
|
2300
|
-
this.searchChanged.emit(this.query);
|
|
2301
|
-
}
|
|
2302
|
-
onKeyDown(event) {
|
|
2303
|
-
const currentList = this.isHistoryVisible() ? this.historyList() : this.currentPageItems();
|
|
2304
|
-
const maxIndex = currentList.length - 1;
|
|
2305
|
-
switch (event.key) {
|
|
2306
|
-
case 'ArrowDown':
|
|
2307
|
-
this.handleArrowDown(maxIndex, event);
|
|
2308
|
-
break;
|
|
2309
|
-
case 'ArrowUp':
|
|
2310
|
-
this.handleArrowUp(maxIndex, event);
|
|
2311
|
-
break;
|
|
2312
|
-
case 'Enter':
|
|
2313
|
-
this.handleEnter(currentList, maxIndex, event);
|
|
2314
|
-
break;
|
|
2315
|
-
case 'Escape':
|
|
2316
|
-
this.handleEscape(event);
|
|
2317
|
-
break;
|
|
2318
|
-
case 'PageDown':
|
|
2319
|
-
this.handlePageDown(event);
|
|
2320
|
-
break;
|
|
2321
|
-
case 'PageUp':
|
|
2322
|
-
this.handlePageUp(event);
|
|
2323
|
-
break;
|
|
2324
|
-
}
|
|
2325
|
-
}
|
|
2326
|
-
handleArrowDown(maxIndex, event) {
|
|
2327
|
-
event?.preventDefault();
|
|
2328
|
-
if (maxIndex >= 0) {
|
|
2329
|
-
const nextIndex = this.selectedIndex() < maxIndex ? this.selectedIndex() + 1 : 0;
|
|
2330
|
-
this.selectedIndex.set(nextIndex);
|
|
2331
|
-
this.scrollToSelected();
|
|
2332
|
-
}
|
|
2333
|
-
}
|
|
2334
|
-
handleArrowUp(maxIndex, event) {
|
|
2335
|
-
event?.preventDefault();
|
|
2336
|
-
if (maxIndex >= 0) {
|
|
2337
|
-
const prevIndex = this.selectedIndex() > 0 ? this.selectedIndex() - 1 : maxIndex;
|
|
2338
|
-
this.selectedIndex.set(prevIndex);
|
|
2339
|
-
this.scrollToSelected();
|
|
2340
|
-
}
|
|
2341
|
-
}
|
|
2342
|
-
handleEnter(currentList, maxIndex, event) {
|
|
2343
|
-
event?.preventDefault();
|
|
2344
|
-
if (this.selectedIndex() >= 0 && this.selectedIndex() <= maxIndex) {
|
|
2345
|
-
this.selectItem(currentList[this.selectedIndex()]);
|
|
2346
|
-
}
|
|
2347
|
-
}
|
|
2348
|
-
handleEscape(event) {
|
|
2349
|
-
event?.preventDefault();
|
|
2350
|
-
this.hideOverlay();
|
|
2351
|
-
}
|
|
2352
|
-
handlePageDown(event) {
|
|
2353
|
-
event?.preventDefault();
|
|
2354
|
-
if (!this.isHistoryVisible() && this.config.enablePagination) {
|
|
2355
|
-
this.goToNextPage();
|
|
2356
|
-
}
|
|
2357
|
-
}
|
|
2358
|
-
handlePageUp(event) {
|
|
2359
|
-
event?.preventDefault();
|
|
2360
|
-
if (!this.isHistoryVisible() && this.config.enablePagination) {
|
|
2361
|
-
this.goToPreviousPage();
|
|
2362
|
-
}
|
|
2363
|
-
}
|
|
2364
|
-
onFilterChange() {
|
|
2365
|
-
this.currentPage.set(1);
|
|
2366
|
-
if (this.query.length >= (this.config.minSearchLength || 2)) {
|
|
2367
|
-
this.performSearch(this.query);
|
|
2368
|
-
this.searchSubjectNext();
|
|
2369
|
-
}
|
|
2370
|
-
}
|
|
2371
|
-
// Método público para actualizar resultados desde el padre
|
|
2372
|
-
updateSearchResults(result) {
|
|
2373
|
-
this.filteredItems.set(result.items);
|
|
2374
|
-
this.totalCount.set(result.totalCount);
|
|
2375
|
-
this.isLoading.set(false);
|
|
2376
|
-
}
|
|
2377
|
-
// Overlay Methods
|
|
2378
|
-
showOverlay() {
|
|
2379
|
-
this.overlayOpen.set(true);
|
|
2380
|
-
}
|
|
2381
|
-
hideOverlay() {
|
|
2382
|
-
this.overlayOpen.set(false);
|
|
2383
|
-
this.selectedIndex.set(-1);
|
|
2384
|
-
}
|
|
2385
|
-
isType(item) {
|
|
2386
|
-
return typeof item === 'string';
|
|
2387
|
-
}
|
|
2388
|
-
// Selection Methods
|
|
2389
|
-
selectItem(item) {
|
|
2390
|
-
if (this.config.clearInput) {
|
|
2391
|
-
this.query = '';
|
|
2392
|
-
}
|
|
2393
|
-
else {
|
|
2394
|
-
this.query = this.getItemDisplayText(item);
|
|
2395
|
-
}
|
|
2396
|
-
this.hideOverlay();
|
|
2397
|
-
this.currentPage.set(1);
|
|
2398
|
-
this.autocompleteService.addToHistory(item, this.config.maxHistoryItems);
|
|
2399
|
-
this.itemSelected.emit(item);
|
|
2400
|
-
setTimeout(() => {
|
|
2401
|
-
this.searchInput()?.nativeElement?.focus();
|
|
2402
|
-
}, 100);
|
|
2403
|
-
}
|
|
2404
|
-
clearSearch() {
|
|
2405
|
-
this.query = '';
|
|
2406
|
-
this.filteredItems.set([]);
|
|
2407
|
-
this.selectedIndex.set(-1);
|
|
2408
|
-
this.currentPage.set(1);
|
|
2409
|
-
this.searchInput()?.nativeElement?.focus();
|
|
2410
|
-
this.searchChanged.emit('');
|
|
2411
|
-
}
|
|
2412
|
-
// History Methods
|
|
2413
|
-
removeHistoryItem(index, event) {
|
|
2414
|
-
event.stopPropagation();
|
|
2415
|
-
this.autocompleteService.removeFromHistory(index);
|
|
2416
|
-
}
|
|
2417
|
-
clearHistory() {
|
|
2418
|
-
this.autocompleteService.clearHistory();
|
|
2419
|
-
}
|
|
2420
|
-
// Pagination Methods
|
|
2421
|
-
goToPage(event) {
|
|
2422
|
-
const target = event.target;
|
|
2423
|
-
const page = Number.parseInt(target.value);
|
|
2424
|
-
if (this.autocompleteService.isValidPage(page, this.totalPages())) {
|
|
2425
|
-
this.currentPage.set(page);
|
|
2426
|
-
this.selectedIndex.set(-1);
|
|
2427
|
-
this.pageChanged.emit(page);
|
|
2428
|
-
this.searchSubjectNext();
|
|
2429
|
-
}
|
|
2430
|
-
else {
|
|
2431
|
-
target.value = this.currentPage().toString();
|
|
2432
|
-
}
|
|
2433
|
-
}
|
|
2434
|
-
goToFirstPage() {
|
|
2435
|
-
if (this.currentPage() !== 1) {
|
|
2436
|
-
this.currentPage.set(1);
|
|
2437
|
-
this.selectedIndex.set(-1);
|
|
2438
|
-
this.pageChanged.emit(1);
|
|
2439
|
-
this.searchSubjectNext();
|
|
2440
|
-
}
|
|
2441
|
-
}
|
|
2442
|
-
goToPreviousPage() {
|
|
2443
|
-
const prevPage = this.currentPage() - 1;
|
|
2444
|
-
if (prevPage >= 1) {
|
|
2445
|
-
this.currentPage.set(prevPage);
|
|
2446
|
-
this.selectedIndex.set(-1);
|
|
2447
|
-
this.pageChanged.emit(prevPage);
|
|
2448
|
-
this.searchSubjectNext();
|
|
2449
|
-
}
|
|
2450
|
-
}
|
|
2451
|
-
goToNextPage() {
|
|
2452
|
-
const nextPage = this.currentPage() + 1;
|
|
2453
|
-
if (nextPage <= this.totalPages()) {
|
|
2454
|
-
this.currentPage.set(nextPage);
|
|
2455
|
-
this.selectedIndex.set(-1);
|
|
2456
|
-
this.pageChanged.emit(nextPage);
|
|
2457
|
-
this.searchSubjectNext();
|
|
2458
|
-
}
|
|
2459
|
-
}
|
|
2460
|
-
goToLastPage() {
|
|
2461
|
-
const lastPage = this.totalPages();
|
|
2462
|
-
if (this.currentPage() !== lastPage) {
|
|
2463
|
-
this.currentPage.set(lastPage);
|
|
2464
|
-
this.selectedIndex.set(-1);
|
|
2465
|
-
this.pageChanged.emit(lastPage);
|
|
2466
|
-
this.searchSubjectNext();
|
|
2467
|
-
}
|
|
2468
|
-
}
|
|
2469
|
-
// Footer Actions
|
|
2470
|
-
onCreateNew(_$event) {
|
|
2471
|
-
this.createClicked.emit(this.query);
|
|
2472
|
-
}
|
|
2473
|
-
onAdvancedSearch() {
|
|
2474
|
-
this.hideOverlay();
|
|
2475
|
-
this.advancedSearchClicked.emit();
|
|
2476
|
-
}
|
|
2477
|
-
onShowAllResults() {
|
|
2478
|
-
this.hideOverlay();
|
|
2479
|
-
this.allResultsClicked.emit(this.query);
|
|
2480
|
-
}
|
|
2481
|
-
// Utility Methods
|
|
2482
|
-
getItemDisplayText(item) {
|
|
2483
|
-
return this.autocompleteService.getItemDisplayText(item);
|
|
2484
|
-
}
|
|
2485
|
-
noResultsText() {
|
|
2486
|
-
return `No se encontraron resultados para "${this.query}"`;
|
|
2487
|
-
}
|
|
2488
|
-
scrollToSelected() {
|
|
2489
|
-
const listElement = this.isHistoryVisible()
|
|
2490
|
-
? this.historyListElement()?.nativeElement
|
|
2491
|
-
: this.resultsListElement()?.nativeElement;
|
|
2492
|
-
if (listElement) {
|
|
2493
|
-
const selectedElement = listElement.children[this.selectedIndex()];
|
|
2494
|
-
if (selectedElement) {
|
|
2495
|
-
selectedElement.scrollIntoView({
|
|
2496
|
-
block: 'nearest',
|
|
2497
|
-
behavior: 'smooth',
|
|
2498
|
-
});
|
|
2499
|
-
}
|
|
2500
|
-
}
|
|
2501
|
-
}
|
|
2502
|
-
// Public API
|
|
2503
|
-
getState() {
|
|
2504
|
-
return {
|
|
2505
|
-
query: this.query,
|
|
2506
|
-
isLoading: this.isLoading(),
|
|
2507
|
-
overlayOpen: this.overlayOpen(),
|
|
2508
|
-
selectedIndex: this.selectedIndex(),
|
|
2509
|
-
pagination: {
|
|
2510
|
-
currentPage: this.currentPage(),
|
|
2511
|
-
totalPages: this.totalPages(),
|
|
2512
|
-
totalItems: this.totalItems(),
|
|
2513
|
-
itemsPerPage: this.config.itemsPerPage || 10,
|
|
2514
|
-
startItem: this.startItem(),
|
|
2515
|
-
endItem: this.endItem(),
|
|
2516
|
-
hasNextPage: this.currentPage() < this.totalPages(),
|
|
2517
|
-
hasPreviousPage: this.currentPage() > 1,
|
|
2518
|
-
},
|
|
2519
|
-
hasResults: this.totalItems() > 0,
|
|
2520
|
-
isHistoryVisible: this.isHistoryVisible(),
|
|
2521
|
-
historyCount: this.historyList().length,
|
|
2522
|
-
filters: this.filters,
|
|
2523
|
-
};
|
|
2524
|
-
}
|
|
2525
|
-
setQuery(query) {
|
|
2526
|
-
this.query = query;
|
|
2527
|
-
this.currentPage.set(1);
|
|
2528
|
-
if (query.length >= (this.config.minSearchLength || 2)) {
|
|
2529
|
-
this.performSearch(query);
|
|
2530
|
-
this.showOverlay();
|
|
2531
|
-
}
|
|
2532
|
-
else {
|
|
2533
|
-
this.filteredItems.set([]);
|
|
2534
|
-
if (query.length === 0) {
|
|
2535
|
-
this.hideOverlay();
|
|
2536
|
-
}
|
|
2537
|
-
}
|
|
2538
|
-
this.searchChanged.emit(query);
|
|
2539
|
-
}
|
|
2540
|
-
focus() {
|
|
2541
|
-
this.searchInput()?.nativeElement?.focus();
|
|
2542
|
-
}
|
|
2543
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ReusableAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2544
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ReusableAutocompleteComponent, isStandalone: true, selector: "acp-autocomplete-wrapper", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, searchFunction: { classPropertyName: "searchFunction", publicName: "searchFunction", isSignal: true, isRequired: false, transformFunction: null }, notFoundTemplate: { classPropertyName: "notFoundTemplate", publicName: "notFoundTemplate", isSignal: true, isRequired: false, transformFunction: null }, overlayWidth: { classPropertyName: "overlayWidth", publicName: "overlayWidth", isSignal: true, isRequired: false, transformFunction: null }, overlayMaxHeight: { classPropertyName: "overlayMaxHeight", publicName: "overlayMaxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected", searchChanged: "searchChanged", searchRequested: "searchRequested", pageChanged: "pageChanged", filterChanged: "filterChanged", advancedSearchClicked: "advancedSearchClicked", allResultsClicked: "allResultsClicked", createClicked: "createClicked" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "historyListElement", first: true, predicate: ["historyListElement"], descendants: true, isSignal: true }, { propertyName: "resultsListElement", first: true, predicate: ["resultsListElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"acp-autocomplete-wrapper\" [class.acp-autocomplete-wrapper-active]=\"overlayOpen()\">\n @if (config.label) {\n <label class=\"acp-autocomplete-wrapper-label\" [for]=\"inputId\">{{ config.label }}</label>\n }\n <!-- Input Container -->\n <div\n class=\"acp-autocomplete-wrapper-input-container\"\n cdkOverlayOrigin\n #overlayPosition=\"cdkOverlayOrigin\"\n >\n <div class=\"acp-autocomplete-wrapper-input-wrapper\">\n <mat-icon class=\"acp-autocomplete-wrapper-search-icon\">search</mat-icon>\n <input\n #searchInput\n [id]=\"inputId\"\n type=\"text\"\n class=\"acp-autocomplete-wrapper-input-field\"\n [placeholder]=\"config.placeholder\"\n [(ngModel)]=\"query\"\n (input)=\"onInput($event)\"\n (click)=\"showOverlay()\"\n (keydown)=\"onKeyDown($event)\"\n [disabled]=\"config.disabled || false\"\n autocomplete=\"off\"\n />\n @if (query && query.length > 0 && !isLoading()) {\n <button\n mat-icon-button\n (click)=\"clearSearch()\"\n type=\"button\"\n class=\"acp-autocomplete-wrapper-clear-button\"\n >\n <mat-icon>clear</mat-icon>\n </button>\n }\n <button mat-icon-button type=\"button\">\n <mat-icon>add</mat-icon>\n </button>\n </div>\n\n @if (isLoading()) {\n <div class=\"acp-autocomplete-wrapper-loading-spinner\">\n <mat-spinner diameter=\"20\" />\n </div>\n }\n </div>\n\n <!-- Overlay -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayPosition\"\n [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n [cdkConnectedOverlayHeight]=\"overlayMaxHeight()\"\n (overlayOutsideClick)=\"hideOverlay()\"\n (backdropClick)=\"hideOverlay()\"\n >\n <div class=\"autocomplete-wrapper-dropdown\" [class.autocomplete-wrapper-active]=\"overlayOpen()\">\n <div class=\"autocomplete-wrapper-dropdown-content\">\n <!-- History Section -->\n @if (isHistoryVisible() && historyList().length > 0) {\n <div class=\"autocomplete-wrapper-section\">\n <div class=\"autocomplete-wrapper-section-header\">\n <span class=\"autocomplete-wrapper-section-title\">B\u00FAsquedas recientes</span>\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"clearHistory()\"\n class=\"autocomplete-wrapper-clear-history-button\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n </div>\n <ul\n class=\"autocomplete-wrapper-items-list autocomplete-wrapper-scrollable-list\"\n #historyListElement\n >\n @for (item of historyList(); track $index) {\n <li class=\"autocomplete-wrapper-list-item autocomplete-wrapper-history-item\">\n <button\n type=\"button\"\n class=\"autocomplete-wrapper-item-content\"\n [class.autocomplete-wrapper-selected]=\"$index === selectedIndex()\"\n (click)=\"selectItem(item)\"\n (keydown.enter)=\"selectItem(item)\"\n >\n <mat-icon class=\"autocomplete-wrapper-history-icon\">history</mat-icon>\n <div class=\"autocomplete-wrapper-item-details\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate() || defaultItemTemplate;\n context: { $implicit: item }\n \"\n />\n </div>\n </button>\n <button\n type=\"button\"\n mat-icon-button\n class=\"autocomplete-wrapper-remove-button\"\n (click)=\"removeHistoryItem($index, $event)\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </li>\n }\n </ul>\n </div>\n }\n\n <!-- Results Section -->\n @if (!isHistoryVisible()) {\n <div class=\"autocomplete-wrapper-section\">\n <!-- Header with filters and pagination -->\n @if (config.enableFilters || config.enablePagination) {\n <div class=\"autocomplete-wrapper-section-header\">\n <span class=\"autocomplete-wrapper-section-title\">{{ sectionTitle() }}</span>\n\n <!-- Filters -->\n @if (config.enableFilters) {\n <div class=\"autocomplete-wrapper-filter-controls\">\n @if (config.searchFields && config.searchFields.length > 1) {\n <div class=\"autocomplete-wrapper-filter-group\">\n <label class=\"autocomplete-wrapper-filter-label\" for=\"searchBySelect\"\n >Buscar por:</label\n >\n <select\n id=\"searchBySelect\"\n class=\"autocomplete-wrapper-filter-select\"\n [(ngModel)]=\"filters.searchBy\"\n (change)=\"onFilterChange()\"\n >\n @for (field of config.searchFields; track $index) {\n <option [value]=\"field.value\">{{ field.label }}</option>\n }\n </select>\n </div>\n } @if (config.enableStockFilter && config.stockOptions) {\n <div class=\"autocomplete-wrapper-filter-group\">\n <label class=\"autocomplete-wrapper-filter-label\" for=\"stockSelect\">Stock:</label>\n <select\n id=\"stockSelect\"\n class=\"autocomplete-wrapper-filter-select\"\n [(ngModel)]=\"filters.stockFilter\"\n (change)=\"onFilterChange()\"\n >\n @for (option of config.stockOptions; track $index) {\n <option [value]=\"option.value\">{{ option.label }}</option>\n }\n </select>\n </div>\n }\n </div>\n }\n\n <!-- Pagination Controls -->\n @if (config.enablePagination && totalPages() > 1) {\n <div class=\"autocomplete-wrapper-pagination-header\">\n <div class=\"autocomplete-wrapper-pagination-info\">\n <span>P\u00E1gina {{ currentPage() }} de {{ totalPages() }}</span>\n </div>\n <div class=\"autocomplete-wrapper-pagination-controls\">\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToFirstPage()\"\n [disabled]=\"currentPage() === 1\"\n >\n <mat-icon>first_page</mat-icon>\n </button>\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToPreviousPage()\"\n [disabled]=\"currentPage() === 1\"\n >\n <mat-icon>chevron_left</mat-icon>\n </button>\n <label class=\"acp-autocomplete-wrapper-page-label\" [for]=\"inputId + '-page'\"\n >P\u00E1gina</label\n >\n <input\n [id]=\"inputId + '-page'\"\n type=\"number\"\n class=\"autocomplete-wrapper-page-input\"\n [value]=\"currentPage()\"\n [min]=\"1\"\n [max]=\"totalPages()\"\n (change)=\"goToPage($event)\"\n />\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToNextPage()\"\n [disabled]=\"currentPage() === totalPages()\"\n >\n <mat-icon>chevron_right</mat-icon>\n </button>\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToLastPage()\"\n [disabled]=\"currentPage() === totalPages()\"\n >\n <mat-icon>last_page</mat-icon>\n </button>\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"autocomplete-wrapper-section-header\">\n <span class=\"autocomplete-wrapper-section-title\">{{ sectionTitle() }}</span>\n </div>\n }\n\n <!-- Items List -->\n @if (totalItems()) {\n <ul\n class=\"autocomplete-wrapper-items-list autocomplete-wrapper-scrollable-list\"\n #resultsListElement\n >\n @for (item of currentPageItems(); track $index) {\n <li class=\"autocomplete-wrapper-list-item autocomplete-wrapper-result-item\">\n <button\n type=\"button\"\n class=\"autocomplete-wrapper-item-content\"\n [class.autocomplete-wrapper-selected]=\"$index === selectedIndex()\"\n (click)=\"selectItem(item)\"\n (keydown.enter)=\"selectItem(item)\"\n >\n <div class=\"autocomplete-wrapper-item-info\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate() || defaultItemTemplate;\n context: { $implicit: item }\n \"\n />\n </div>\n </button>\n </li>\n }\n </ul>\n }\n </div>\n }\n\n <!-- No Results -->\n @if (!isLoading() && isNoResults()) {\n <div class=\"autocomplete-wrapper-no-results\">\n <mat-icon class=\"autocomplete-wrapper-no-results-icon\">search_off</mat-icon>\n <div class=\"autocomplete-wrapper-no-results-content\">\n <ng-container\n *ngTemplateOutlet=\"\n notFoundTemplate() || defaultNotFoundTemplate;\n context: { $implicit: noResultsText() }\n \"\n />\n </div>\n </div>\n }\n\n <!-- Footer -->\n @if (overlayOpen() && totalItems() > 0) {\n <div class=\"autocomplete-wrapper-footer\">\n @if (!isHistoryVisible() && totalItems() > 0 && config.enablePagination) {\n <div class=\"autocomplete-wrapper-pagination-footer\">\n <div class=\"autocomplete-wrapper-pagination-summary\">\n Mostrando {{ startItem() }}-{{ endItem() }} de {{ totalCount() }} resultados\n </div>\n <div class=\"autocomplete-wrapper-pagination-controls-footer\">\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToPreviousPage()\"\n [disabled]=\"currentPage() === 1\"\n >\n <mat-icon>chevron_left</mat-icon>\n </button>\n <span class=\"autocomplete-wrapper-page-indicator\"\n >{{ currentPage() }} / {{ totalPages() }}</span\n >\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToNextPage()\"\n [disabled]=\"currentPage() === totalPages()\"\n >\n <mat-icon>chevron_right</mat-icon>\n </button>\n </div>\n </div>\n } @if (config.enableFooterActions) {\n <div class=\"autocomplete-wrapper-footer-actions\">\n <button\n class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-create-button\"\n (click)=\"onCreateNew($event)\"\n >\n <mat-icon>add</mat-icon>\n <span class=\"autocomplete-wrapper-button-text\">Crear</span>\n </button>\n <button\n class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-search-button\"\n (click)=\"onAdvancedSearch()\"\n >\n <mat-icon>tune</mat-icon>\n <span class=\"autocomplete-wrapper-button-text\">Avanzada</span>\n </button>\n @if (!isHistoryVisible() && totalItems() > 0) {\n <button\n class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-results-button\"\n (click)=\"onShowAllResults()\"\n >\n <mat-icon>list</mat-icon>\n <span class=\"autocomplete-wrapper-button-text\">Todos</span>\n </button>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Default Templates -->\n <ng-template #defaultItemTemplate let-item>\n <div class=\"autocomplete-wrapper-default-item\">\n <div class=\"autocomplete-wrapper-item-name\">{{ getItemDisplayText(item) }}</div>\n @if (item.description && typeof item === 'object') {\n <div class=\"autocomplete-wrapper-item-description\">{{ item.description }}</div>\n }\n </div>\n </ng-template>\n\n <ng-template #defaultNotFoundTemplate let-text>\n <div class=\"autocomplete-wrapper-default-no-results\">\n <p>{{ text }}</p>\n <p>Intenta con otros t\u00E9rminos de b\u00FAsqueda</p>\n </div>\n </ng-template>\n</div>\n", styles: [".acp-autocomplete-wrapper{display:block;position:relative;width:100%;max-width:100%}.acp-autocomplete-wrapper.acp-autocomplete-wrapper-active .acp-autocomplete-wrapper-input-wrapper{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.acp-autocomplete-wrapper-input-container{position:relative;width:100%}.acp-autocomplete-wrapper-input-wrapper{position:relative;display:flex;align-items:center;background:var(--mat-sys-surface, white);border:1px solid var(--mat-sys-outline-variant, #e0e0e0);border-radius:8px;padding:0 12px;transition:all .3s ease}.acp-autocomplete-wrapper-input-wrapper:focus-within{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.acp-autocomplete-wrapper-search-icon{color:var(--mat-sys-on-surface-variant, #666);margin-right:8px;font-size:20px}.acp-autocomplete-wrapper-label{display:block;font-size:12px;color:var(--mat-sys-on-surface-variant, #666);margin-bottom:4px}.acp-autocomplete-wrapper-input-field{flex:1;border:none;outline:none;font-size:16px;padding:7px 0;background:transparent;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-input-field::placeholder{color:var(--mat-sys-on-surface-variant, #999)}.acp-autocomplete-wrapper-input-field:disabled{opacity:.6;cursor:not-allowed}.acp-autocomplete-wrapper-clear-button{margin-left:8px;color:var(--mat-sys-on-surface-variant, #666);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.acp-autocomplete-wrapper-clear-button:hover{background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-loading-spinner{position:absolute;right:12px;top:50%;transform:translateY(-50%)}.acp-autocomplete-wrapper-dropdown{background:var(--mat-sys-surface-container, white);border-radius:8px;box-shadow:0 4px 20px #00000026;border:1px solid var(--mat-sys-outline-variant, #e0e0e0);overflow:hidden;max-height:500px;min-width:300px;display:flex;flex-direction:column}.acp-autocomplete-wrapper-dropdown.acp-autocomplete-wrapper-active{animation:reusableAutocompleteSlideIn .2s ease-out}@keyframes reusableAutocompleteSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.acp-autocomplete-wrapper-dropdown-content{display:flex;flex-direction:column;height:100%;max-height:500px}.acp-autocomplete-wrapper-section{display:flex;flex-direction:column;height:100%;min-height:0}.acp-autocomplete-wrapper-section-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 8px;border-bottom:1px solid var(--mat-sys-outline-variant, #f0f0f0);background:var(--mat-sys-surface-variant, #fafafa);flex-shrink:0;min-height:56px;flex-wrap:wrap;gap:12px}.acp-autocomplete-wrapper-section-title{font-size:13px;font-weight:500;color:var(--mat-sys-on-surface-variant, #666);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.acp-autocomplete-wrapper-clear-history-button{color:var(--mat-sys-on-surface-variant, #666);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.acp-autocomplete-wrapper-clear-history-button:hover{background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-filter-controls{display:flex;align-items:center;gap:16px;flex:1;justify-content:center}.acp-autocomplete-wrapper-filter-group{display:flex;align-items:center;gap:6px}.acp-autocomplete-wrapper-filter-label{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);font-weight:500;white-space:nowrap}.acp-autocomplete-wrapper-filter-select{padding:4px 8px;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;font-size:12px;background:var(--mat-sys-surface, white);color:var(--mat-sys-on-surface, #333);cursor:pointer;min-width:120px}.acp-autocomplete-wrapper-filter-select:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 1px #1976d233}.acp-autocomplete-wrapper-filter-select:hover{border-color:#bbb}.acp-autocomplete-wrapper-pagination-header{display:flex;align-items:center;gap:12px;margin-left:auto}.acp-autocomplete-wrapper-pagination-info{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);white-space:nowrap}.acp-autocomplete-wrapper-pagination-controls{display:flex;align-items:center;gap:4px}.acp-autocomplete-wrapper-pagination-button{min-width:32px;height:32px;line-height:32px;padding:0;color:var(--mat-sys-on-surface-variant, #666);background:none;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.acp-autocomplete-wrapper-pagination-button:hover:not(:disabled){background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-pagination-button:disabled{opacity:.5;cursor:not-allowed}.acp-autocomplete-wrapper-pagination-button mat-icon{font-size:18px;width:18px;height:18px}.acp-autocomplete-wrapper-page-label{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);margin-right:4px}.acp-autocomplete-wrapper-page-input{width:50px;height:32px;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;text-align:center;font-size:12px;padding:4px;margin:0 4px}.acp-autocomplete-wrapper-page-input:focus{outline:none;border-color:#1976d2}.acp-autocomplete-wrapper-items-list{list-style:none;margin:0;padding:0;flex:1;min-height:0}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{overflow-y:auto}.acp-autocomplete-wrapper-list-item{display:flex;align-items:center;border-bottom:1px solid var(--mat-sys-outline-variant, #f5f5f5);transition:background-color .2s ease}.acp-autocomplete-wrapper-list-item:last-child{border-bottom:none}.acp-autocomplete-wrapper-list-item:hover{background-color:var(--mat-sys-surface-variant, #f8f9fa)}.acp-autocomplete-wrapper-item-content{flex:1;display:flex;align-items:center;padding:12px 16px;cursor:pointer;min-height:48px;transition:all .2s ease}.acp-autocomplete-wrapper-item-content.acp-autocomplete-wrapper-selected{background-color:var(--mat-sys-primary-container, #e3f2fd);color:var(--mat-sys-on-primary-container, #1976d2)}.acp-autocomplete-wrapper-history-item .acp-autocomplete-wrapper-item-content{padding-left:12px}.acp-autocomplete-wrapper-history-icon{color:var(--mat-sys-on-surface-variant, #999);margin-right:12px;font-size:18px}.acp-autocomplete-wrapper-item-details{flex:1;display:flex;align-items:center}.acp-autocomplete-wrapper-remove-button{margin-right:8px}.acp-autocomplete-wrapper-result-item{position:relative}.acp-autocomplete-wrapper-item-info{flex:1;display:flex;align-items:center}.acp-autocomplete-wrapper-default-item{flex:1}.acp-autocomplete-wrapper-default-item .acp-autocomplete-wrapper-item-name{font-weight:500;font-size:14px;margin-bottom:2px;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-default-item .acp-autocomplete-wrapper-item-description{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acp-autocomplete-wrapper-no-results{display:flex;flex-direction:column;align-items:center;padding:32px 16px;text-align:center;color:var(--mat-sys-on-surface-variant, #666)}.acp-autocomplete-wrapper-no-results-icon{font-size:48px;color:var(--mat-sys-outline, #ccc);margin-bottom:16px;width:45px;height:45px}.acp-autocomplete-wrapper-no-results-content{font-size:14px;line-height:1.5}.acp-autocomplete-wrapper-default-no-results{text-align:center}.acp-autocomplete-wrapper-default-no-results p:first-child{font-weight:500;margin-bottom:8px}.acp-autocomplete-wrapper-footer{border-top:1px solid var(--mat-sys-outline-variant, #f0f0f0);background:var(--mat-sys-surface-variant, #fafafa);flex-shrink:0;padding:12px 16px;display:flex;flex-direction:column;gap:12px}.acp-autocomplete-wrapper-pagination-footer{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px}.acp-autocomplete-wrapper-pagination-summary{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);white-space:nowrap}.acp-autocomplete-wrapper-pagination-controls-footer{display:flex;align-items:center;gap:8px}.acp-autocomplete-wrapper-page-indicator{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);min-width:40px;text-align:center}.acp-autocomplete-wrapper-footer-actions{display:flex;gap:8px;flex-wrap:wrap}.acp-autocomplete-wrapper-footer-button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;font-size:13px;text-transform:none;white-space:nowrap;background:none;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;cursor:pointer;padding:8px 12px;transition:all .2s ease}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-create-button{background-color:#4caf501f;border-color:#4caf50;color:#2e7d32}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-create-button:hover{background-color:#4caf5033}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button{background-color:#ff98001f;border-color:#ff9800;color:#e65100}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button:hover{background-color:#ff980033}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button{background-color:#3f51b51f;border-color:#3f51b5;color:#283593}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button:hover{background-color:#3f51b533}.acp-autocomplete-wrapper-button-text{display:inline}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar{width:6px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-track{background:var(--mat-sys-surface-variant, #f1f1f1);border-radius:3px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-thumb{background:var(--mat-sys-outline, #c1c1c1);border-radius:3px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-on-surface-variant, #a8a8a8)}@media(max-width:768px){.acp-autocomplete-wrapper-dropdown{min-width:280px;max-height:60vh}.acp-autocomplete-wrapper-dropdown-content{max-height:60vh}.acp-autocomplete-wrapper-input-field{font-size:16px}.acp-autocomplete-wrapper-footer{padding:8px 12px}.acp-autocomplete-wrapper-footer-actions{flex-direction:column;gap:6px}.acp-autocomplete-wrapper-footer-button{width:100%;min-height:44px}.acp-autocomplete-wrapper-pagination-footer{flex-direction:column;gap:8px}.acp-autocomplete-wrapper-section-header{flex-direction:column;align-items:flex-start;min-height:80px;gap:8px}.acp-autocomplete-wrapper-filter-controls{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:12px}.acp-autocomplete-wrapper-filter-select{min-width:100px;font-size:11px}.acp-autocomplete-wrapper-filter-label{font-size:11px}.acp-autocomplete-wrapper-pagination-header{width:100%;justify-content:space-between}.acp-autocomplete-wrapper-pagination-header .acp-autocomplete-wrapper-pagination-info{display:none}.acp-autocomplete-wrapper-pagination-controls{gap:2px}.acp-autocomplete-wrapper-page-input{width:40px}.acp-autocomplete-wrapper-item-content{padding:16px 12px;min-height:52px}.acp-autocomplete-wrapper-button-text{font-size:12px}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{max-height:250px}}@media(max-width:480px){.acp-autocomplete-wrapper-dropdown{min-width:260px;max-height:50vh}.acp-autocomplete-wrapper-section-header{padding:8px 12px 6px;min-height:70px;gap:6px}.acp-autocomplete-wrapper-filter-controls{gap:8px}.acp-autocomplete-wrapper-filter-group{gap:4px}.acp-autocomplete-wrapper-filter-select{min-width:90px;padding:3px 6px}.acp-autocomplete-wrapper-item-content{padding:14px 12px}.acp-autocomplete-wrapper-pagination-header{gap:8px}.acp-autocomplete-wrapper-pagination-button{min-width:28px;height:28px}.acp-autocomplete-wrapper-page-input{width:35px;height:28px}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{max-height:200px}.acp-autocomplete-wrapper-footer-actions{gap:4px}.acp-autocomplete-wrapper-footer-button{font-size:12px;padding:8px 12px;min-height:40px}.acp-autocomplete-wrapper-button-text{display:none}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
|
|
2545
|
-
}
|
|
2546
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ReusableAutocompleteComponent, decorators: [{
|
|
2547
|
-
type: Component,
|
|
2548
|
-
args: [{ selector: 'acp-autocomplete-wrapper', imports: [
|
|
2549
|
-
MatIcon,
|
|
2550
|
-
NgTemplateOutlet,
|
|
2551
|
-
OverlayModule,
|
|
2552
|
-
MatProgressBarModule,
|
|
2553
|
-
MatProgressSpinner,
|
|
2554
|
-
FormsModule,
|
|
2555
|
-
MatIconButton,
|
|
2556
|
-
], changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, template: "<div class=\"acp-autocomplete-wrapper\" [class.acp-autocomplete-wrapper-active]=\"overlayOpen()\">\n @if (config.label) {\n <label class=\"acp-autocomplete-wrapper-label\" [for]=\"inputId\">{{ config.label }}</label>\n }\n <!-- Input Container -->\n <div\n class=\"acp-autocomplete-wrapper-input-container\"\n cdkOverlayOrigin\n #overlayPosition=\"cdkOverlayOrigin\"\n >\n <div class=\"acp-autocomplete-wrapper-input-wrapper\">\n <mat-icon class=\"acp-autocomplete-wrapper-search-icon\">search</mat-icon>\n <input\n #searchInput\n [id]=\"inputId\"\n type=\"text\"\n class=\"acp-autocomplete-wrapper-input-field\"\n [placeholder]=\"config.placeholder\"\n [(ngModel)]=\"query\"\n (input)=\"onInput($event)\"\n (click)=\"showOverlay()\"\n (keydown)=\"onKeyDown($event)\"\n [disabled]=\"config.disabled || false\"\n autocomplete=\"off\"\n />\n @if (query && query.length > 0 && !isLoading()) {\n <button\n mat-icon-button\n (click)=\"clearSearch()\"\n type=\"button\"\n class=\"acp-autocomplete-wrapper-clear-button\"\n >\n <mat-icon>clear</mat-icon>\n </button>\n }\n <button mat-icon-button type=\"button\">\n <mat-icon>add</mat-icon>\n </button>\n </div>\n\n @if (isLoading()) {\n <div class=\"acp-autocomplete-wrapper-loading-spinner\">\n <mat-spinner diameter=\"20\" />\n </div>\n }\n </div>\n\n <!-- Overlay -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayPosition\"\n [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n [cdkConnectedOverlayHeight]=\"overlayMaxHeight()\"\n (overlayOutsideClick)=\"hideOverlay()\"\n (backdropClick)=\"hideOverlay()\"\n >\n <div class=\"autocomplete-wrapper-dropdown\" [class.autocomplete-wrapper-active]=\"overlayOpen()\">\n <div class=\"autocomplete-wrapper-dropdown-content\">\n <!-- History Section -->\n @if (isHistoryVisible() && historyList().length > 0) {\n <div class=\"autocomplete-wrapper-section\">\n <div class=\"autocomplete-wrapper-section-header\">\n <span class=\"autocomplete-wrapper-section-title\">B\u00FAsquedas recientes</span>\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"clearHistory()\"\n class=\"autocomplete-wrapper-clear-history-button\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n </div>\n <ul\n class=\"autocomplete-wrapper-items-list autocomplete-wrapper-scrollable-list\"\n #historyListElement\n >\n @for (item of historyList(); track $index) {\n <li class=\"autocomplete-wrapper-list-item autocomplete-wrapper-history-item\">\n <button\n type=\"button\"\n class=\"autocomplete-wrapper-item-content\"\n [class.autocomplete-wrapper-selected]=\"$index === selectedIndex()\"\n (click)=\"selectItem(item)\"\n (keydown.enter)=\"selectItem(item)\"\n >\n <mat-icon class=\"autocomplete-wrapper-history-icon\">history</mat-icon>\n <div class=\"autocomplete-wrapper-item-details\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate() || defaultItemTemplate;\n context: { $implicit: item }\n \"\n />\n </div>\n </button>\n <button\n type=\"button\"\n mat-icon-button\n class=\"autocomplete-wrapper-remove-button\"\n (click)=\"removeHistoryItem($index, $event)\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </li>\n }\n </ul>\n </div>\n }\n\n <!-- Results Section -->\n @if (!isHistoryVisible()) {\n <div class=\"autocomplete-wrapper-section\">\n <!-- Header with filters and pagination -->\n @if (config.enableFilters || config.enablePagination) {\n <div class=\"autocomplete-wrapper-section-header\">\n <span class=\"autocomplete-wrapper-section-title\">{{ sectionTitle() }}</span>\n\n <!-- Filters -->\n @if (config.enableFilters) {\n <div class=\"autocomplete-wrapper-filter-controls\">\n @if (config.searchFields && config.searchFields.length > 1) {\n <div class=\"autocomplete-wrapper-filter-group\">\n <label class=\"autocomplete-wrapper-filter-label\" for=\"searchBySelect\"\n >Buscar por:</label\n >\n <select\n id=\"searchBySelect\"\n class=\"autocomplete-wrapper-filter-select\"\n [(ngModel)]=\"filters.searchBy\"\n (change)=\"onFilterChange()\"\n >\n @for (field of config.searchFields; track $index) {\n <option [value]=\"field.value\">{{ field.label }}</option>\n }\n </select>\n </div>\n } @if (config.enableStockFilter && config.stockOptions) {\n <div class=\"autocomplete-wrapper-filter-group\">\n <label class=\"autocomplete-wrapper-filter-label\" for=\"stockSelect\">Stock:</label>\n <select\n id=\"stockSelect\"\n class=\"autocomplete-wrapper-filter-select\"\n [(ngModel)]=\"filters.stockFilter\"\n (change)=\"onFilterChange()\"\n >\n @for (option of config.stockOptions; track $index) {\n <option [value]=\"option.value\">{{ option.label }}</option>\n }\n </select>\n </div>\n }\n </div>\n }\n\n <!-- Pagination Controls -->\n @if (config.enablePagination && totalPages() > 1) {\n <div class=\"autocomplete-wrapper-pagination-header\">\n <div class=\"autocomplete-wrapper-pagination-info\">\n <span>P\u00E1gina {{ currentPage() }} de {{ totalPages() }}</span>\n </div>\n <div class=\"autocomplete-wrapper-pagination-controls\">\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToFirstPage()\"\n [disabled]=\"currentPage() === 1\"\n >\n <mat-icon>first_page</mat-icon>\n </button>\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToPreviousPage()\"\n [disabled]=\"currentPage() === 1\"\n >\n <mat-icon>chevron_left</mat-icon>\n </button>\n <label class=\"acp-autocomplete-wrapper-page-label\" [for]=\"inputId + '-page'\"\n >P\u00E1gina</label\n >\n <input\n [id]=\"inputId + '-page'\"\n type=\"number\"\n class=\"autocomplete-wrapper-page-input\"\n [value]=\"currentPage()\"\n [min]=\"1\"\n [max]=\"totalPages()\"\n (change)=\"goToPage($event)\"\n />\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToNextPage()\"\n [disabled]=\"currentPage() === totalPages()\"\n >\n <mat-icon>chevron_right</mat-icon>\n </button>\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToLastPage()\"\n [disabled]=\"currentPage() === totalPages()\"\n >\n <mat-icon>last_page</mat-icon>\n </button>\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"autocomplete-wrapper-section-header\">\n <span class=\"autocomplete-wrapper-section-title\">{{ sectionTitle() }}</span>\n </div>\n }\n\n <!-- Items List -->\n @if (totalItems()) {\n <ul\n class=\"autocomplete-wrapper-items-list autocomplete-wrapper-scrollable-list\"\n #resultsListElement\n >\n @for (item of currentPageItems(); track $index) {\n <li class=\"autocomplete-wrapper-list-item autocomplete-wrapper-result-item\">\n <button\n type=\"button\"\n class=\"autocomplete-wrapper-item-content\"\n [class.autocomplete-wrapper-selected]=\"$index === selectedIndex()\"\n (click)=\"selectItem(item)\"\n (keydown.enter)=\"selectItem(item)\"\n >\n <div class=\"autocomplete-wrapper-item-info\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate() || defaultItemTemplate;\n context: { $implicit: item }\n \"\n />\n </div>\n </button>\n </li>\n }\n </ul>\n }\n </div>\n }\n\n <!-- No Results -->\n @if (!isLoading() && isNoResults()) {\n <div class=\"autocomplete-wrapper-no-results\">\n <mat-icon class=\"autocomplete-wrapper-no-results-icon\">search_off</mat-icon>\n <div class=\"autocomplete-wrapper-no-results-content\">\n <ng-container\n *ngTemplateOutlet=\"\n notFoundTemplate() || defaultNotFoundTemplate;\n context: { $implicit: noResultsText() }\n \"\n />\n </div>\n </div>\n }\n\n <!-- Footer -->\n @if (overlayOpen() && totalItems() > 0) {\n <div class=\"autocomplete-wrapper-footer\">\n @if (!isHistoryVisible() && totalItems() > 0 && config.enablePagination) {\n <div class=\"autocomplete-wrapper-pagination-footer\">\n <div class=\"autocomplete-wrapper-pagination-summary\">\n Mostrando {{ startItem() }}-{{ endItem() }} de {{ totalCount() }} resultados\n </div>\n <div class=\"autocomplete-wrapper-pagination-controls-footer\">\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToPreviousPage()\"\n [disabled]=\"currentPage() === 1\"\n >\n <mat-icon>chevron_left</mat-icon>\n </button>\n <span class=\"autocomplete-wrapper-page-indicator\"\n >{{ currentPage() }} / {{ totalPages() }}</span\n >\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToNextPage()\"\n [disabled]=\"currentPage() === totalPages()\"\n >\n <mat-icon>chevron_right</mat-icon>\n </button>\n </div>\n </div>\n } @if (config.enableFooterActions) {\n <div class=\"autocomplete-wrapper-footer-actions\">\n <button\n class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-create-button\"\n (click)=\"onCreateNew($event)\"\n >\n <mat-icon>add</mat-icon>\n <span class=\"autocomplete-wrapper-button-text\">Crear</span>\n </button>\n <button\n class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-search-button\"\n (click)=\"onAdvancedSearch()\"\n >\n <mat-icon>tune</mat-icon>\n <span class=\"autocomplete-wrapper-button-text\">Avanzada</span>\n </button>\n @if (!isHistoryVisible() && totalItems() > 0) {\n <button\n class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-results-button\"\n (click)=\"onShowAllResults()\"\n >\n <mat-icon>list</mat-icon>\n <span class=\"autocomplete-wrapper-button-text\">Todos</span>\n </button>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Default Templates -->\n <ng-template #defaultItemTemplate let-item>\n <div class=\"autocomplete-wrapper-default-item\">\n <div class=\"autocomplete-wrapper-item-name\">{{ getItemDisplayText(item) }}</div>\n @if (item.description && typeof item === 'object') {\n <div class=\"autocomplete-wrapper-item-description\">{{ item.description }}</div>\n }\n </div>\n </ng-template>\n\n <ng-template #defaultNotFoundTemplate let-text>\n <div class=\"autocomplete-wrapper-default-no-results\">\n <p>{{ text }}</p>\n <p>Intenta con otros t\u00E9rminos de b\u00FAsqueda</p>\n </div>\n </ng-template>\n</div>\n", styles: [".acp-autocomplete-wrapper{display:block;position:relative;width:100%;max-width:100%}.acp-autocomplete-wrapper.acp-autocomplete-wrapper-active .acp-autocomplete-wrapper-input-wrapper{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.acp-autocomplete-wrapper-input-container{position:relative;width:100%}.acp-autocomplete-wrapper-input-wrapper{position:relative;display:flex;align-items:center;background:var(--mat-sys-surface, white);border:1px solid var(--mat-sys-outline-variant, #e0e0e0);border-radius:8px;padding:0 12px;transition:all .3s ease}.acp-autocomplete-wrapper-input-wrapper:focus-within{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.acp-autocomplete-wrapper-search-icon{color:var(--mat-sys-on-surface-variant, #666);margin-right:8px;font-size:20px}.acp-autocomplete-wrapper-label{display:block;font-size:12px;color:var(--mat-sys-on-surface-variant, #666);margin-bottom:4px}.acp-autocomplete-wrapper-input-field{flex:1;border:none;outline:none;font-size:16px;padding:7px 0;background:transparent;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-input-field::placeholder{color:var(--mat-sys-on-surface-variant, #999)}.acp-autocomplete-wrapper-input-field:disabled{opacity:.6;cursor:not-allowed}.acp-autocomplete-wrapper-clear-button{margin-left:8px;color:var(--mat-sys-on-surface-variant, #666);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.acp-autocomplete-wrapper-clear-button:hover{background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-loading-spinner{position:absolute;right:12px;top:50%;transform:translateY(-50%)}.acp-autocomplete-wrapper-dropdown{background:var(--mat-sys-surface-container, white);border-radius:8px;box-shadow:0 4px 20px #00000026;border:1px solid var(--mat-sys-outline-variant, #e0e0e0);overflow:hidden;max-height:500px;min-width:300px;display:flex;flex-direction:column}.acp-autocomplete-wrapper-dropdown.acp-autocomplete-wrapper-active{animation:reusableAutocompleteSlideIn .2s ease-out}@keyframes reusableAutocompleteSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.acp-autocomplete-wrapper-dropdown-content{display:flex;flex-direction:column;height:100%;max-height:500px}.acp-autocomplete-wrapper-section{display:flex;flex-direction:column;height:100%;min-height:0}.acp-autocomplete-wrapper-section-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 8px;border-bottom:1px solid var(--mat-sys-outline-variant, #f0f0f0);background:var(--mat-sys-surface-variant, #fafafa);flex-shrink:0;min-height:56px;flex-wrap:wrap;gap:12px}.acp-autocomplete-wrapper-section-title{font-size:13px;font-weight:500;color:var(--mat-sys-on-surface-variant, #666);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.acp-autocomplete-wrapper-clear-history-button{color:var(--mat-sys-on-surface-variant, #666);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.acp-autocomplete-wrapper-clear-history-button:hover{background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-filter-controls{display:flex;align-items:center;gap:16px;flex:1;justify-content:center}.acp-autocomplete-wrapper-filter-group{display:flex;align-items:center;gap:6px}.acp-autocomplete-wrapper-filter-label{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);font-weight:500;white-space:nowrap}.acp-autocomplete-wrapper-filter-select{padding:4px 8px;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;font-size:12px;background:var(--mat-sys-surface, white);color:var(--mat-sys-on-surface, #333);cursor:pointer;min-width:120px}.acp-autocomplete-wrapper-filter-select:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 1px #1976d233}.acp-autocomplete-wrapper-filter-select:hover{border-color:#bbb}.acp-autocomplete-wrapper-pagination-header{display:flex;align-items:center;gap:12px;margin-left:auto}.acp-autocomplete-wrapper-pagination-info{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);white-space:nowrap}.acp-autocomplete-wrapper-pagination-controls{display:flex;align-items:center;gap:4px}.acp-autocomplete-wrapper-pagination-button{min-width:32px;height:32px;line-height:32px;padding:0;color:var(--mat-sys-on-surface-variant, #666);background:none;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.acp-autocomplete-wrapper-pagination-button:hover:not(:disabled){background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-pagination-button:disabled{opacity:.5;cursor:not-allowed}.acp-autocomplete-wrapper-pagination-button mat-icon{font-size:18px;width:18px;height:18px}.acp-autocomplete-wrapper-page-label{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);margin-right:4px}.acp-autocomplete-wrapper-page-input{width:50px;height:32px;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;text-align:center;font-size:12px;padding:4px;margin:0 4px}.acp-autocomplete-wrapper-page-input:focus{outline:none;border-color:#1976d2}.acp-autocomplete-wrapper-items-list{list-style:none;margin:0;padding:0;flex:1;min-height:0}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{overflow-y:auto}.acp-autocomplete-wrapper-list-item{display:flex;align-items:center;border-bottom:1px solid var(--mat-sys-outline-variant, #f5f5f5);transition:background-color .2s ease}.acp-autocomplete-wrapper-list-item:last-child{border-bottom:none}.acp-autocomplete-wrapper-list-item:hover{background-color:var(--mat-sys-surface-variant, #f8f9fa)}.acp-autocomplete-wrapper-item-content{flex:1;display:flex;align-items:center;padding:12px 16px;cursor:pointer;min-height:48px;transition:all .2s ease}.acp-autocomplete-wrapper-item-content.acp-autocomplete-wrapper-selected{background-color:var(--mat-sys-primary-container, #e3f2fd);color:var(--mat-sys-on-primary-container, #1976d2)}.acp-autocomplete-wrapper-history-item .acp-autocomplete-wrapper-item-content{padding-left:12px}.acp-autocomplete-wrapper-history-icon{color:var(--mat-sys-on-surface-variant, #999);margin-right:12px;font-size:18px}.acp-autocomplete-wrapper-item-details{flex:1;display:flex;align-items:center}.acp-autocomplete-wrapper-remove-button{margin-right:8px}.acp-autocomplete-wrapper-result-item{position:relative}.acp-autocomplete-wrapper-item-info{flex:1;display:flex;align-items:center}.acp-autocomplete-wrapper-default-item{flex:1}.acp-autocomplete-wrapper-default-item .acp-autocomplete-wrapper-item-name{font-weight:500;font-size:14px;margin-bottom:2px;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-default-item .acp-autocomplete-wrapper-item-description{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acp-autocomplete-wrapper-no-results{display:flex;flex-direction:column;align-items:center;padding:32px 16px;text-align:center;color:var(--mat-sys-on-surface-variant, #666)}.acp-autocomplete-wrapper-no-results-icon{font-size:48px;color:var(--mat-sys-outline, #ccc);margin-bottom:16px;width:45px;height:45px}.acp-autocomplete-wrapper-no-results-content{font-size:14px;line-height:1.5}.acp-autocomplete-wrapper-default-no-results{text-align:center}.acp-autocomplete-wrapper-default-no-results p:first-child{font-weight:500;margin-bottom:8px}.acp-autocomplete-wrapper-footer{border-top:1px solid var(--mat-sys-outline-variant, #f0f0f0);background:var(--mat-sys-surface-variant, #fafafa);flex-shrink:0;padding:12px 16px;display:flex;flex-direction:column;gap:12px}.acp-autocomplete-wrapper-pagination-footer{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px}.acp-autocomplete-wrapper-pagination-summary{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);white-space:nowrap}.acp-autocomplete-wrapper-pagination-controls-footer{display:flex;align-items:center;gap:8px}.acp-autocomplete-wrapper-page-indicator{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);min-width:40px;text-align:center}.acp-autocomplete-wrapper-footer-actions{display:flex;gap:8px;flex-wrap:wrap}.acp-autocomplete-wrapper-footer-button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;font-size:13px;text-transform:none;white-space:nowrap;background:none;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;cursor:pointer;padding:8px 12px;transition:all .2s ease}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-create-button{background-color:#4caf501f;border-color:#4caf50;color:#2e7d32}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-create-button:hover{background-color:#4caf5033}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button{background-color:#ff98001f;border-color:#ff9800;color:#e65100}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button:hover{background-color:#ff980033}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button{background-color:#3f51b51f;border-color:#3f51b5;color:#283593}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button:hover{background-color:#3f51b533}.acp-autocomplete-wrapper-button-text{display:inline}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar{width:6px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-track{background:var(--mat-sys-surface-variant, #f1f1f1);border-radius:3px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-thumb{background:var(--mat-sys-outline, #c1c1c1);border-radius:3px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-on-surface-variant, #a8a8a8)}@media(max-width:768px){.acp-autocomplete-wrapper-dropdown{min-width:280px;max-height:60vh}.acp-autocomplete-wrapper-dropdown-content{max-height:60vh}.acp-autocomplete-wrapper-input-field{font-size:16px}.acp-autocomplete-wrapper-footer{padding:8px 12px}.acp-autocomplete-wrapper-footer-actions{flex-direction:column;gap:6px}.acp-autocomplete-wrapper-footer-button{width:100%;min-height:44px}.acp-autocomplete-wrapper-pagination-footer{flex-direction:column;gap:8px}.acp-autocomplete-wrapper-section-header{flex-direction:column;align-items:flex-start;min-height:80px;gap:8px}.acp-autocomplete-wrapper-filter-controls{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:12px}.acp-autocomplete-wrapper-filter-select{min-width:100px;font-size:11px}.acp-autocomplete-wrapper-filter-label{font-size:11px}.acp-autocomplete-wrapper-pagination-header{width:100%;justify-content:space-between}.acp-autocomplete-wrapper-pagination-header .acp-autocomplete-wrapper-pagination-info{display:none}.acp-autocomplete-wrapper-pagination-controls{gap:2px}.acp-autocomplete-wrapper-page-input{width:40px}.acp-autocomplete-wrapper-item-content{padding:16px 12px;min-height:52px}.acp-autocomplete-wrapper-button-text{font-size:12px}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{max-height:250px}}@media(max-width:480px){.acp-autocomplete-wrapper-dropdown{min-width:260px;max-height:50vh}.acp-autocomplete-wrapper-section-header{padding:8px 12px 6px;min-height:70px;gap:6px}.acp-autocomplete-wrapper-filter-controls{gap:8px}.acp-autocomplete-wrapper-filter-group{gap:4px}.acp-autocomplete-wrapper-filter-select{min-width:90px;padding:3px 6px}.acp-autocomplete-wrapper-item-content{padding:14px 12px}.acp-autocomplete-wrapper-pagination-header{gap:8px}.acp-autocomplete-wrapper-pagination-button{min-width:28px;height:28px}.acp-autocomplete-wrapper-page-input{width:35px;height:28px}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{max-height:200px}.acp-autocomplete-wrapper-footer-actions{gap:4px}.acp-autocomplete-wrapper-footer-button{font-size:12px;padding:8px 12px;min-height:40px}.acp-autocomplete-wrapper-button-text{display:none}}\n"] }]
|
|
2557
|
-
}], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], config: [{
|
|
2558
|
-
type: Input
|
|
2559
|
-
}], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], searchFunction: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFunction", required: false }] }], notFoundTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "notFoundTemplate", required: false }] }], overlayWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayWidth", required: false }] }], overlayMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayMaxHeight", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], searchChanged: [{ type: i0.Output, args: ["searchChanged"] }], searchRequested: [{ type: i0.Output, args: ["searchRequested"] }], pageChanged: [{ type: i0.Output, args: ["pageChanged"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], advancedSearchClicked: [{ type: i0.Output, args: ["advancedSearchClicked"] }], allResultsClicked: [{ type: i0.Output, args: ["allResultsClicked"] }], createClicked: [{ type: i0.Output, args: ["createClicked"] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], historyListElement: [{ type: i0.ViewChild, args: ['historyListElement', { isSignal: true }] }], resultsListElement: [{ type: i0.ViewChild, args: ['resultsListElement', { isSignal: true }] }] } });
|
|
2560
|
-
|
|
2561
1836
|
class AcpToObservablePipe {
|
|
2562
1837
|
transform(value) {
|
|
2563
1838
|
return isObservable(value) ? value : of(value);
|
|
2564
1839
|
}
|
|
2565
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2566
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0
|
|
1840
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpToObservablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
1841
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: AcpToObservablePipe, isStandalone: true, name: "toObservable" });
|
|
2567
1842
|
}
|
|
2568
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1843
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpToObservablePipe, decorators: [{
|
|
2569
1844
|
type: Pipe,
|
|
2570
1845
|
args: [{ name: 'toObservable' }]
|
|
2571
1846
|
}] });
|
|
@@ -2574,10 +1849,10 @@ class AcpIsTemplateRefPipe {
|
|
|
2574
1849
|
transform(obj) {
|
|
2575
1850
|
return obj instanceof TemplateRef;
|
|
2576
1851
|
}
|
|
2577
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2578
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0
|
|
1852
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpIsTemplateRefPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
1853
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: AcpIsTemplateRefPipe, isStandalone: true, name: "isTemplateRef" });
|
|
2579
1854
|
}
|
|
2580
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1855
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpIsTemplateRefPipe, decorators: [{
|
|
2581
1856
|
type: Pipe,
|
|
2582
1857
|
args: [{ name: 'isTemplateRef' }]
|
|
2583
1858
|
}] });
|
|
@@ -2610,10 +1885,10 @@ class AcpGridSelectableCell {
|
|
|
2610
1885
|
this._selected = !this._selected;
|
|
2611
1886
|
this.cellSelectedChange.emit(this);
|
|
2612
1887
|
}
|
|
2613
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2614
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
1888
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridSelectableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1889
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AcpGridSelectableCell, isStandalone: true, selector: "[acpGridSelectableCell]", inputs: { cellSelectable: "cellSelectable" }, outputs: { cellSelectedChange: "cellSelectedChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.selected": "selected" } }, ngImport: i0 });
|
|
2615
1890
|
}
|
|
2616
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1891
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridSelectableCell, decorators: [{
|
|
2617
1892
|
type: Directive,
|
|
2618
1893
|
args: [{
|
|
2619
1894
|
selector: '[acpGridSelectableCell]',
|
|
@@ -2673,10 +1948,10 @@ class DataGridUtils {
|
|
|
2673
1948
|
isContainHTML(value) {
|
|
2674
1949
|
return /<\/?[a-z][\s\S]*>/i.test(value);
|
|
2675
1950
|
}
|
|
2676
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2677
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
1951
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridUtils, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1952
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridUtils, providedIn: 'root' });
|
|
2678
1953
|
}
|
|
2679
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1954
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridUtils, decorators: [{
|
|
2680
1955
|
type: Injectable,
|
|
2681
1956
|
args: [{ providedIn: 'root' }]
|
|
2682
1957
|
}] });
|
|
@@ -2697,10 +1972,10 @@ class AcpGridColClassPipe {
|
|
|
2697
1972
|
}
|
|
2698
1973
|
return '';
|
|
2699
1974
|
}
|
|
2700
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2701
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0
|
|
1975
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridColClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
1976
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: AcpGridColClassPipe, isStandalone: true, name: "colClass" });
|
|
2702
1977
|
}
|
|
2703
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1978
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridColClassPipe, decorators: [{
|
|
2704
1979
|
type: Pipe,
|
|
2705
1980
|
args: [{ name: 'colClass' }]
|
|
2706
1981
|
}] });
|
|
@@ -2717,10 +1992,10 @@ class AcpGridRowClassPipe {
|
|
|
2717
1992
|
}
|
|
2718
1993
|
return classList.join(' ');
|
|
2719
1994
|
}
|
|
2720
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2721
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0
|
|
1995
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridRowClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
1996
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: AcpGridRowClassPipe, isStandalone: true, name: "rowClass" });
|
|
2722
1997
|
}
|
|
2723
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1998
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridRowClassPipe, decorators: [{
|
|
2724
1999
|
type: Pipe,
|
|
2725
2000
|
args: [{ name: 'rowClass' }]
|
|
2726
2001
|
}] });
|
|
@@ -2740,10 +2015,10 @@ class AcpGridCellActionsPipe {
|
|
|
2740
2015
|
}
|
|
2741
2016
|
return [];
|
|
2742
2017
|
}
|
|
2743
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2744
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0
|
|
2018
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellActionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
2019
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellActionsPipe, isStandalone: true, name: "cellActions" });
|
|
2745
2020
|
}
|
|
2746
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2021
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellActionsPipe, decorators: [{
|
|
2747
2022
|
type: Pipe,
|
|
2748
2023
|
args: [{ name: 'cellActions' }]
|
|
2749
2024
|
}] });
|
|
@@ -2756,10 +2031,10 @@ class AcpGridCellActionTooltipPipe {
|
|
|
2756
2031
|
return btn.tooltip || { message: '' };
|
|
2757
2032
|
}
|
|
2758
2033
|
}
|
|
2759
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2760
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0
|
|
2034
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellActionTooltipPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
2035
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellActionTooltipPipe, isStandalone: true, name: "cellActionTooltip" });
|
|
2761
2036
|
}
|
|
2762
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2037
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellActionTooltipPipe, decorators: [{
|
|
2763
2038
|
type: Pipe,
|
|
2764
2039
|
args: [{ name: 'cellActionTooltip' }]
|
|
2765
2040
|
}] });
|
|
@@ -2772,10 +2047,10 @@ class AcpGridCellActionBadgePipe {
|
|
|
2772
2047
|
return btn.badge || { content: '' };
|
|
2773
2048
|
}
|
|
2774
2049
|
}
|
|
2775
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2776
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0
|
|
2050
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellActionBadgePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
2051
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellActionBadgePipe, isStandalone: true, name: "cellActionBadge" });
|
|
2777
2052
|
}
|
|
2778
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2053
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellActionBadgePipe, decorators: [{
|
|
2779
2054
|
type: Pipe,
|
|
2780
2055
|
args: [{ name: 'cellActionBadge' }]
|
|
2781
2056
|
}] });
|
|
@@ -2797,10 +2072,10 @@ class AcpGridCellActionDisablePipe {
|
|
|
2797
2072
|
return false;
|
|
2798
2073
|
}
|
|
2799
2074
|
}
|
|
2800
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2801
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0
|
|
2075
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellActionDisablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
2076
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellActionDisablePipe, isStandalone: true, name: "cellActionDisable" });
|
|
2802
2077
|
}
|
|
2803
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2078
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellActionDisablePipe, decorators: [{
|
|
2804
2079
|
type: Pipe,
|
|
2805
2080
|
args: [{ name: 'cellActionDisable' }]
|
|
2806
2081
|
}] });
|
|
@@ -2814,10 +2089,10 @@ class AcpGridCellSummaryPipe {
|
|
|
2814
2089
|
return colDef.summary(this.utils.getColData(data, colDef), colDef);
|
|
2815
2090
|
}
|
|
2816
2091
|
}
|
|
2817
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2818
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0
|
|
2092
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellSummaryPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
2093
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellSummaryPipe, isStandalone: true, name: "cellSummary" });
|
|
2819
2094
|
}
|
|
2820
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2095
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellSummaryPipe, decorators: [{
|
|
2821
2096
|
type: Pipe,
|
|
2822
2097
|
args: [{ name: 'cellSummary' }]
|
|
2823
2098
|
}] });
|
|
@@ -2826,8 +2101,8 @@ class AcpGridMenu {
|
|
|
2826
2101
|
menu;
|
|
2827
2102
|
items = [];
|
|
2828
2103
|
data = {};
|
|
2829
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2830
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0
|
|
2104
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2105
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpGridMenu, isStandalone: true, selector: "acp-grid-menu", inputs: { items: "items", data: "data" }, viewQueries: [{ propertyName: "menu", first: true, predicate: MatMenu, descendants: true, static: true }], exportAs: ["acpGridMenu"], ngImport: i0, template: `
|
|
2831
2106
|
<mat-menu class="acp-grid-menu">
|
|
2832
2107
|
@for (item of items; track $index) {
|
|
2833
2108
|
@if (!item.iif || item.iif(data)) {
|
|
@@ -2870,7 +2145,7 @@ class AcpGridMenu {
|
|
|
2870
2145
|
</ng-template>
|
|
2871
2146
|
`, isInline: true, dependencies: [{ kind: "component", type: AcpGridMenu, selector: "acp-grid-menu", inputs: ["items", "data"], exportAs: ["acpGridMenu"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { 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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AcpGridCellActionDisablePipe, name: "cellActionDisable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2872
2147
|
}
|
|
2873
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2148
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridMenu, decorators: [{
|
|
2874
2149
|
type: Component,
|
|
2875
2150
|
args: [{
|
|
2876
2151
|
selector: 'acp-grid-menu',
|
|
@@ -2992,10 +2267,10 @@ class AcpGridCell {
|
|
|
2992
2267
|
event.stopPropagation();
|
|
2993
2268
|
btn.click?.(rowData);
|
|
2994
2269
|
}
|
|
2995
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2996
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpGridCell, isStandalone: true, selector: "acp-grid-cell", inputs: { rowData: "rowData", colDef: "colDef", data: "data", summary: "summary", placeholder: "placeholder" }, outputs: { rowDataChange: "rowDataChange" }, exportAs: ["acpGridCell"], ngImport: i0, template: "@if (summary) {\n<span\n [title]=\"_getFormatterTooltip(data | cellSummary: colDef)\"\n [innerHTML]=\"_getText(data | cellSummary: colDef)\"\n></span>\n} @else {\n<!-- Custom formatting -->\n@if (colDef.formatter) {\n<span\n [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\"\n></span>\n} @else {\n<!-- Default formatting -->\n@switch (colDef.type) {\n<!-- Buttons -->\n@case ('button') { @for ( btn of colDef.buttons | cellActions : rowData : rowChangeRecord :\n$safeNavigationMigration(rowChangeRecord?.currentValue); track btn ) { @if (!btn.iif ||\nbtn.iif(rowData)) { @if (btn.children && btn.children.length > 0) { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} } @else { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n} } } } }\n<!-- Tag -->\n@case ('tag') { @if (colDef.tag && colDef.tag[_value]) {\n<mat-chip-listbox>\n <mat-chip color=\"primary\" [class]=\"'bg-' + colDef.tag[_value].color\">\n {{ colDef.tag[_value].text }}\n </mat-chip>\n</mat-chip-listbox>\n} @else { {{ _value }} } }\n<!-- Link -->\n@case ('link') {\n<a [href]=\"_value\" target=\"_blank\">{{ _value }}</a>\n}\n<!-- Image -->\n\n<!-- Image -->\n@case ('image') { @if (_value) {\n<!-- Imagen real -->\n<img class=\"acp-placeholder-image\" [src]=\"_value\" alt=\"img\" />\n} @else {\n<!-- Placeholder -->\n<div class=\"acp-placeholder-box\">\n <svg class=\"acp-placeholder-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M4 16l4.586-4.586a2 2 0 012.828 0L15 14m-12 5h16a1 1 0 001-1V5a1 1 0 00-1-1H3a1 1 0 00-1 1v14a1 1 0 001 1z\"\n />\n </svg>\n</div>\n} }\n\n<!-- Boolean -->\n@case ('boolean') {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n}\n<!-- Number -->\n@case ('number') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | number\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | number : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Currency -->\n@case ('currency') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | currency\n : $safeNavigationMigration(colDef.typeParameter?.currencyCode)\n : $safeNavigationMigration(colDef.typeParameter?.display)\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | currency : $safeNavigationMigration(colDef.typeParameter?.currencyCode) :\n $safeNavigationMigration(colDef.typeParameter?.display) :\n $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | percent\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | percent : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | date\n : $safeNavigationMigration(colDef.typeParameter?.format)\n : $safeNavigationMigration(colDef.typeParameter?.timezone)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | date : $safeNavigationMigration(colDef.typeParameter?.format) :\n $safeNavigationMigration(colDef.typeParameter?.timezone) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n @if (btn.icon) {\n <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n } @else if (btn.fontIcon) {\n <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\"></mat-icon>\n } @else if (btn.svgIcon) {\n <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\"></mat-icon>\n }\n</ng-template>\n", styles: [".acp-placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#4b5563;font-size:.85rem;gap:8px}.acp-placeholder-icon{width:32px;height:32px;color:#3b82f6}.acp-placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: AcpGridMenu, selector: "acp-grid-menu", inputs: ["items", "data"], exportAs: ["acpGridMenu"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AcpGridCellActionsPipe, name: "cellActions" }, { kind: "pipe", type: AcpGridCellSummaryPipe, name: "cellSummary" }, { kind: "pipe", type: AcpGridCellActionDisablePipe, name: "cellActionDisable" }, { kind: "pipe", type: AcpGridCellActionTooltipPipe, name: "cellActionTooltip" }, { kind: "pipe", type: AcpGridCellActionBadgePipe, name: "cellActionBadge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2270
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2271
|
+
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 });
|
|
2997
2272
|
}
|
|
2998
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2273
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCell, decorators: [{
|
|
2999
2274
|
type: Component,
|
|
3000
2275
|
args: [{ selector: 'acp-grid-cell', exportAs: 'acpGridCell', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3001
2276
|
AsyncPipe,
|
|
@@ -3120,14 +2395,14 @@ class ColumnResize {
|
|
|
3120
2395
|
}
|
|
3121
2396
|
_listenForResizeActivity() {
|
|
3122
2397
|
merge(this.eventDispatcher.overlayHandleActiveForCell.pipe(mapTo(undefined)), this.notifier.triggerResize.pipe(mapTo(undefined)), this.notifier.resizeCompleted.pipe(mapTo(undefined)))
|
|
3123
|
-
.pipe(take(1), takeUntil
|
|
2398
|
+
.pipe(take(1), takeUntil(this.destroyed))
|
|
3124
2399
|
.subscribe(() => {
|
|
3125
2400
|
this.setResized();
|
|
3126
2401
|
});
|
|
3127
2402
|
}
|
|
3128
2403
|
_listenForHoverActivity() {
|
|
3129
2404
|
this.eventDispatcher.headerRowHoveredOrActiveDistinct
|
|
3130
|
-
.pipe(startWith(null), pairwise(), takeUntil
|
|
2405
|
+
.pipe(startWith(null), pairwise(), takeUntil(this.destroyed))
|
|
3131
2406
|
.subscribe(([previousRow, hoveredRow]) => {
|
|
3132
2407
|
if (hoveredRow) {
|
|
3133
2408
|
hoveredRow.classList.add(HOVER_OR_ACTIVE_CLASS);
|
|
@@ -3137,10 +2412,10 @@ class ColumnResize {
|
|
|
3137
2412
|
}
|
|
3138
2413
|
});
|
|
3139
2414
|
}
|
|
3140
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
3141
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
2415
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColumnResize, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2416
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: ColumnResize, isStandalone: true, inputs: { liveResizeUpdates: "liveResizeUpdates" }, ngImport: i0 });
|
|
3142
2417
|
}
|
|
3143
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2418
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColumnResize, decorators: [{
|
|
3144
2419
|
type: Directive
|
|
3145
2420
|
}], propDecorators: { liveResizeUpdates: [{
|
|
3146
2421
|
type: Input
|
|
@@ -3157,10 +2432,10 @@ class ColumnResizeNotifierSource {
|
|
|
3157
2432
|
resizeCompleted = new Subject();
|
|
3158
2433
|
/** Triggers a resize action. */
|
|
3159
2434
|
triggerResize = new Subject();
|
|
3160
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
3161
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
2435
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColumnResizeNotifierSource, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2436
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColumnResizeNotifierSource });
|
|
3162
2437
|
}
|
|
3163
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2438
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColumnResizeNotifierSource, decorators: [{
|
|
3164
2439
|
type: Injectable
|
|
3165
2440
|
}] });
|
|
3166
2441
|
/** Service for triggering column resizes imperatively or being notified of them. */
|
|
@@ -3177,10 +2452,10 @@ class ColumnResizeNotifier {
|
|
|
3177
2452
|
isStickyColumn: true,
|
|
3178
2453
|
});
|
|
3179
2454
|
}
|
|
3180
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
3181
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
2455
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColumnResizeNotifier, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2456
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColumnResizeNotifier });
|
|
3182
2457
|
}
|
|
3183
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2458
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColumnResizeNotifier, decorators: [{
|
|
3184
2459
|
type: Injectable
|
|
3185
2460
|
}] });
|
|
3186
2461
|
|
|
@@ -3239,10 +2514,10 @@ class HeaderRowEventDispatcher {
|
|
|
3239
2514
|
complete: () => observer.complete(),
|
|
3240
2515
|
}));
|
|
3241
2516
|
}
|
|
3242
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
3243
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
2517
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: HeaderRowEventDispatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2518
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: HeaderRowEventDispatcher });
|
|
3244
2519
|
}
|
|
3245
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2520
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: HeaderRowEventDispatcher, decorators: [{
|
|
3246
2521
|
type: Injectable
|
|
3247
2522
|
}] });
|
|
3248
2523
|
|
|
@@ -3305,10 +2580,10 @@ class _CoalescedStyleScheduler {
|
|
|
3305
2580
|
this._currentSchedule = null;
|
|
3306
2581
|
}));
|
|
3307
2582
|
}
|
|
3308
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
3309
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
2583
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: _CoalescedStyleScheduler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2584
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: _CoalescedStyleScheduler });
|
|
3310
2585
|
}
|
|
3311
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2586
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: _CoalescedStyleScheduler, decorators: [{
|
|
3312
2587
|
type: Injectable
|
|
3313
2588
|
}] });
|
|
3314
2589
|
|
|
@@ -3331,10 +2606,10 @@ class ResizeStrategy {
|
|
|
3331
2606
|
getElementWidth(element) {
|
|
3332
2607
|
return coercePixelsFromCssValue(element.style.width) || element.offsetWidth;
|
|
3333
2608
|
}
|
|
3334
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
3335
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
2609
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ResizeStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2610
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ResizeStrategy });
|
|
3336
2611
|
}
|
|
3337
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2612
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ResizeStrategy, decorators: [{
|
|
3338
2613
|
type: Injectable
|
|
3339
2614
|
}] });
|
|
3340
2615
|
class TableLayoutFixedResizeStrategy extends ResizeStrategy {
|
|
@@ -3361,10 +2636,10 @@ class TableLayoutFixedResizeStrategy extends ResizeStrategy {
|
|
|
3361
2636
|
const newWidth = Math.min(currentWidth, sizeInPx);
|
|
3362
2637
|
this.applyColumnSize(_, columnHeader, newWidth, currentWidth);
|
|
3363
2638
|
}
|
|
3364
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
3365
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
2639
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TableLayoutFixedResizeStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
2640
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TableLayoutFixedResizeStrategy });
|
|
3366
2641
|
}
|
|
3367
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2642
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TableLayoutFixedResizeStrategy, decorators: [{
|
|
3368
2643
|
type: Injectable
|
|
3369
2644
|
}] });
|
|
3370
2645
|
class CdkFlexTableResizeStrategy extends ResizeStrategy {
|
|
@@ -3468,10 +2743,10 @@ class CdkFlexTableResizeStrategy extends ResizeStrategy {
|
|
|
3468
2743
|
const body = propertyKeys.map(key => `${key}:${properties.get(key)}`).join(';');
|
|
3469
2744
|
this._getStyleSheet().insertRule(`${selector} {${body}}`, index);
|
|
3470
2745
|
}
|
|
3471
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
3472
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
2746
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CdkFlexTableResizeStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
2747
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CdkFlexTableResizeStrategy });
|
|
3473
2748
|
}
|
|
3474
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2749
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CdkFlexTableResizeStrategy, decorators: [{
|
|
3475
2750
|
type: Injectable
|
|
3476
2751
|
}] });
|
|
3477
2752
|
/** Converts CSS pixel values to numbers, eg "123px" to 123. Returns NaN for non pixel values. */
|
|
@@ -3513,8 +2788,8 @@ class CdkColumnResize extends ColumnResize {
|
|
|
3513
2788
|
ngZone = inject(NgZone);
|
|
3514
2789
|
notifier = inject(ColumnResizeNotifierSource);
|
|
3515
2790
|
table = inject(CdkTable);
|
|
3516
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
3517
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
2791
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CdkColumnResize, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
2792
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: CdkColumnResize, isStandalone: true, selector: "table[cdk-table][columnResize]", providers: [
|
|
3518
2793
|
...TABLE_PROVIDERS$1,
|
|
3519
2794
|
{
|
|
3520
2795
|
provide: ColumnResize,
|
|
@@ -3522,7 +2797,7 @@ class CdkColumnResize extends ColumnResize {
|
|
|
3522
2797
|
},
|
|
3523
2798
|
], usesInheritance: true, ngImport: i0 });
|
|
3524
2799
|
}
|
|
3525
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2800
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CdkColumnResize, decorators: [{
|
|
3526
2801
|
type: Directive,
|
|
3527
2802
|
args: [{
|
|
3528
2803
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -3544,10 +2819,10 @@ class CdkColumnResizeFlex extends ColumnResize {
|
|
|
3544
2819
|
ngZone = inject(NgZone);
|
|
3545
2820
|
notifier = inject(ColumnResizeNotifierSource);
|
|
3546
2821
|
table = inject(CdkTable);
|
|
3547
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
3548
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
2822
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CdkColumnResizeFlex, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
2823
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: CdkColumnResizeFlex, isStandalone: true, selector: "cdk-table[columnResize]", providers: [...FLEX_PROVIDERS$1, { provide: ColumnResize, useExisting: CdkColumnResizeFlex }], usesInheritance: true, ngImport: i0 });
|
|
3549
2824
|
}
|
|
3550
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2825
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CdkColumnResizeFlex, decorators: [{
|
|
3551
2826
|
type: Directive,
|
|
3552
2827
|
args: [{
|
|
3553
2828
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -3560,10 +2835,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
|
|
|
3560
2835
|
* Can be provided by the host application to enable persistence of column resize state.
|
|
3561
2836
|
*/
|
|
3562
2837
|
class ColumnSizeStore {
|
|
3563
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
3564
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
2838
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColumnSizeStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2839
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColumnSizeStore });
|
|
3565
2840
|
}
|
|
3566
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2841
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColumnSizeStore, decorators: [{
|
|
3567
2842
|
type: Injectable
|
|
3568
2843
|
}] });
|
|
3569
2844
|
|
|
@@ -3674,7 +2949,7 @@ class Resizable {
|
|
|
3674
2949
|
}
|
|
3675
2950
|
_listenForRowHoverEvents() {
|
|
3676
2951
|
const element = this.elementRef.nativeElement;
|
|
3677
|
-
const takeUntilDestroyed = takeUntil
|
|
2952
|
+
const takeUntilDestroyed = takeUntil(this.destroyed);
|
|
3678
2953
|
this.eventDispatcher
|
|
3679
2954
|
.resizeOverlayVisibleForHeaderRow(closest(element, HEADER_ROW_SELECTOR))
|
|
3680
2955
|
.pipe(takeUntilDestroyed)
|
|
@@ -3692,7 +2967,7 @@ class Resizable {
|
|
|
3692
2967
|
});
|
|
3693
2968
|
}
|
|
3694
2969
|
_listenForResizeEvents() {
|
|
3695
|
-
const takeUntilDestroyed = takeUntil
|
|
2970
|
+
const takeUntilDestroyed = takeUntil(this.destroyed);
|
|
3696
2971
|
merge(this.resizeNotifier.resizeCanceled, this.resizeNotifier.triggerResize)
|
|
3697
2972
|
.pipe(takeUntilDestroyed, filter(columnSize => columnSize.columnId === this.columnDef.name))
|
|
3698
2973
|
.subscribe(({ size, previousSize, completeImmediately }) => {
|
|
@@ -3766,10 +3041,10 @@ class Resizable {
|
|
|
3766
3041
|
this.elementRef.nativeElement.appendChild(this.inlineHandle);
|
|
3767
3042
|
});
|
|
3768
3043
|
}
|
|
3769
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
3770
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
3044
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Resizable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3045
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: Resizable, isStandalone: true, ngImport: i0 });
|
|
3771
3046
|
}
|
|
3772
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
3047
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Resizable, decorators: [{
|
|
3773
3048
|
type: Directive
|
|
3774
3049
|
}] });
|
|
3775
3050
|
|
|
@@ -3787,13 +3062,13 @@ class ResizeOverlayHandle {
|
|
|
3787
3062
|
_listenForMouseEvents() {
|
|
3788
3063
|
this.ngZone.runOutsideAngular(() => {
|
|
3789
3064
|
this._observableFromEvent(this.elementRef.nativeElement, 'mouseenter')
|
|
3790
|
-
.pipe(mapTo(this.resizeRef.origin.nativeElement), takeUntil
|
|
3065
|
+
.pipe(mapTo(this.resizeRef.origin.nativeElement), takeUntil(this.destroyed))
|
|
3791
3066
|
.subscribe(cell => this.eventDispatcher.headerCellHovered.next(cell));
|
|
3792
3067
|
this._observableFromEvent(this.elementRef.nativeElement, 'mouseleave')
|
|
3793
|
-
.pipe(map$1(event => event.relatedTarget && closest(event.relatedTarget, HEADER_CELL_SELECTOR)), takeUntil
|
|
3068
|
+
.pipe(map$1(event => event.relatedTarget && closest(event.relatedTarget, HEADER_CELL_SELECTOR)), takeUntil(this.destroyed))
|
|
3794
3069
|
.subscribe(cell => this.eventDispatcher.headerCellHovered.next(cell));
|
|
3795
3070
|
this._observableFromEvent(this.elementRef.nativeElement, 'mousedown')
|
|
3796
|
-
.pipe(takeUntil
|
|
3071
|
+
.pipe(takeUntil(this.destroyed))
|
|
3797
3072
|
.subscribe(mousedownEvent => {
|
|
3798
3073
|
this._dragStarted(mousedownEvent);
|
|
3799
3074
|
});
|
|
@@ -3815,16 +3090,16 @@ class ResizeOverlayHandle {
|
|
|
3815
3090
|
let overshot = 0;
|
|
3816
3091
|
this._cumulativeDeltaX = 0;
|
|
3817
3092
|
this.updateResizeActive(true);
|
|
3818
|
-
mouseup.pipe(takeUntil
|
|
3093
|
+
mouseup.pipe(takeUntil(merge(escape, this.destroyed))).subscribe(({ screenX }) => {
|
|
3819
3094
|
this.styleScheduler.scheduleEnd(() => {
|
|
3820
3095
|
this._notifyResizeEnded(size, screenX !== startX);
|
|
3821
3096
|
});
|
|
3822
3097
|
});
|
|
3823
|
-
escape.pipe(takeUntil
|
|
3098
|
+
escape.pipe(takeUntil(merge(mouseup, this.destroyed))).subscribe(() => {
|
|
3824
3099
|
this._notifyResizeEnded(initialSize);
|
|
3825
3100
|
});
|
|
3826
3101
|
mousemove
|
|
3827
|
-
.pipe(map$1(({ screenX }) => screenX), startWith(startX), distinctUntilChanged(), pairwise(), takeUntil
|
|
3102
|
+
.pipe(map$1(({ screenX }) => screenX), startWith(startX), distinctUntilChanged(), pairwise(), takeUntil(merge(mouseup, escape, this.destroyed)))
|
|
3828
3103
|
.subscribe(([prevX, currX]) => {
|
|
3829
3104
|
let deltaX = currX - prevX;
|
|
3830
3105
|
if (!this.resizeRef.liveUpdates) {
|
|
@@ -3918,10 +3193,10 @@ class ResizeOverlayHandle {
|
|
|
3918
3193
|
};
|
|
3919
3194
|
});
|
|
3920
3195
|
}
|
|
3921
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
3922
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
3196
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ResizeOverlayHandle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3197
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: ResizeOverlayHandle, isStandalone: true, ngImport: i0 });
|
|
3923
3198
|
}
|
|
3924
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
3199
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ResizeOverlayHandle, decorators: [{
|
|
3925
3200
|
type: Directive
|
|
3926
3201
|
}] });
|
|
3927
3202
|
|
|
@@ -3986,10 +3261,10 @@ class AcpGridColumnMenu {
|
|
|
3986
3261
|
this.columnChange.emit(this.columns);
|
|
3987
3262
|
}
|
|
3988
3263
|
}
|
|
3989
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
3990
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpGridColumnMenu, isStandalone: true, selector: "acp-grid-column-menu", inputs: { columns: "columns", selectable: "selectable", selectableChecked: "selectableChecked", sortable: "sortable", pinnable: "pinnable", buttonText: "buttonText", buttonType: "buttonType", buttonColor: "buttonColor", buttonClass: "buttonClass", buttonIcon: "buttonIcon", buttonFontIcon: "buttonFontIcon", buttonSvgIcon: "buttonSvgIcon", showHeader: "showHeader", headerText: "headerText", headerTemplate: "headerTemplate", showFooter: "showFooter", footerText: "footerText", footerTemplate: "footerTemplate", pinOptions: "pinOptions" }, outputs: { columnChange: "columnChange" }, viewQueries: [{ propertyName: "menuPanel", first: true, predicate: MatMenu, descendants: true, static: true }, { propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], exportAs: ["acpGridColumnMenu"], ngImport: i0, template: "@if (buttonType === 'icon') {\n<button\n [class]=\"buttonClass\"\n matIconButton\n type=\"button\"\n [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl\"></mat-icon>\n</button>\n} @else {\n<button\n [class]=\"buttonClass\"\n [matButton]=\"buttonType\"\n type=\"button\"\n [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl\"></mat-icon>\n {{ buttonText }}\n</button>\n}\n\n<ng-template #iconTpl>\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n } @else if(buttonFontIcon) {\n <mat-icon [fontIcon]=\"buttonFontIcon\"></mat-icon>\n } @else if(buttonSvgIcon) {\n <mat-icon [svgIcon]=\"buttonSvgIcon\"></mat-icon>\n }\n</ng-template>\n\n<mat-menu #menu=\"matMenu\" class=\"acp-grid-column-menu\">\n <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n <div\n class=\"acp-grid-column-menu-content\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n >\n @if (showHeader) {\n <div class=\"acp-grid-column-menu-header\">\n @if (headerTemplate) {\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n } @else { {{headerText}} }\n </div>\n }\n\n <div class=\"acp-grid-column-menu-body\">\n @if (sortable) {\n <div\n class=\"acp-grid-column-menu-list\"\n cdkDropList\n (cdkDropListDropped)=\"_handleDroped($event)\"\n >\n @for (col of columns; track col.field) {\n <div\n class=\"acp-grid-column-menu-item\"\n cdkDrag\n [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-column-drag-handle-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path\n d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\"\n />\n </svg>\n <ng-template\n [ngTemplateOutlet]=\"checkboxList\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\"\n >\n </ng-template>\n </div>\n }\n </div>\n } @if (!sortable) {\n <div class=\"acp-grid-column-menu-list\">\n @for (col of columns; track col.field) {\n <div class=\"acp-grid-column-menu-item\">\n <ng-template\n [ngTemplateOutlet]=\"checkboxList\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\"\n >\n </ng-template>\n </div>\n }\n </div>\n }\n </div>\n\n @if (showFooter) {\n <div class=\"acp-grid-column-menu-footer\">\n @if (footerTemplate) {\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n } @else { {{footerText}} }\n </div>\n }\n </div>\n</mat-menu>\n\n<ng-template #checkboxList let-col>\n @if (pinnable) {\n <button\n class=\"acp-grid-column-pin-button\"\n matIconButton\n type=\"button\"\n [matMenuTriggerFor]=\"pinList\"\n >\n @if (col.pinned) {\n <svg\n class=\"acp-grid-icon acp-grid-column-pin-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\n </svg>\n } @if (!col.pinned) {\n <svg\n class=\"acp-grid-icon acp-grid-column-pin-off-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path\n d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\"\n />\n </svg>\n }\n </button>\n <mat-menu #pinList=\"matMenu\" class=\"acp-grid-column-pin-list\">\n @for (item of pinOptions; track item) {\n <button\n class=\"acp-grid-column-pin-option\"\n type=\"button\"\n mat-menu-item\n (click)=\"_handlePinSelect(col, item.value)\"\n >\n <span class=\"acp-grid-column-pin-option-placeholder\">\n <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n @if (col.pinned==item.value) {\n <svg\n class=\"acp-grid-icon acp-grid-column-pin-check-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n </svg>\n }\n </span>\n <span class=\"acp-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\n </button>\n }\n </mat-menu>\n } @if (selectable) {\n <mat-checkbox\n class=\"acp-grid-column-menu-item-label\"\n [(ngModel)]=\"col[selectableChecked]\"\n [disabled]=\"col.disabled\"\n (change)=\"_handleChecked(col)\"\n >{{col.header | toObservable | async}}</mat-checkbox\n >\n } @else {\n <span class=\"acp-grid-column-menu-item-label\">{{col.header | toObservable | async}}</span>\n }\n</ng-template>\n", styles: [".acp-grid-column-menu,.acp-grid-column-pin-list{color:var(--acp-grid-column-menu-text-color, var(--mat-sys-on-surface-variant))}.acp-grid-column-menu .mat-mdc-menu-content{padding:0}.acp-grid-column-menu-body{max-height:65vh;padding:8px 16px;overflow:auto}.acp-grid-column-menu-header,.acp-grid-column-menu-footer{position:sticky;z-index:1;padding:8px 16px}.acp-grid-column-menu-header{top:0;border-bottom:1px solid var(--acp-grid-column-menu-divider-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-footer{bottom:0;border-top:1px solid var(--acp-grid-column-menu-divider-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-list{display:block;max-width:100%}.acp-grid-column-menu-list.cdk-drop-list-dragging .acp-grid-column-menu-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.acp-grid-column-menu-item{display:flex;flex-direction:row;align-items:center}.acp-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{opacity:.35;cursor:no-drop}.acp-grid-column-menu-item .cdk-drag-handle{cursor:move}.acp-grid-column-menu-item.cdk-drag-preview{border-radius:4px;box-shadow:0 0 0 1px var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-item.cdk-drag-placeholder{opacity:0}.acp-grid-column-menu-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.acp-grid-column-pin-button.mat-mdc-icon-button .mat-mdc-button-touch-target{width:100%;height:100%}.acp-grid-column-pin-option.mat-menu-item{display:flex;align-items:center;height:32px}.acp-grid-column-pin-option-placeholder{display:inline-block;width:20px;height:20px;line-height:20px;vertical-align:middle}.acp-grid-column-pin-option-text{padding:0 8px;vertical-align:middle}.acp-grid-column-drag-handle-icon:hover{cursor:move}.acp-grid-column-menu-item-label.mat-mdc-checkbox .mat-mdc-checkbox-touch-target{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3264
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridColumnMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3265
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpGridColumnMenu, isStandalone: true, selector: "acp-grid-column-menu", inputs: { columns: "columns", selectable: "selectable", selectableChecked: "selectableChecked", sortable: "sortable", pinnable: "pinnable", buttonText: "buttonText", buttonType: "buttonType", buttonColor: "buttonColor", buttonClass: "buttonClass", buttonIcon: "buttonIcon", buttonFontIcon: "buttonFontIcon", buttonSvgIcon: "buttonSvgIcon", showHeader: "showHeader", headerText: "headerText", headerTemplate: "headerTemplate", showFooter: "showFooter", footerText: "footerText", footerTemplate: "footerTemplate", pinOptions: "pinOptions" }, outputs: { columnChange: "columnChange" }, viewQueries: [{ propertyName: "menuPanel", first: true, predicate: MatMenu, descendants: true, static: true }, { propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], exportAs: ["acpGridColumnMenu"], ngImport: i0, template: "@if (buttonType === 'icon') {\n<button\n [class]=\"buttonClass\"\n matIconButton\n type=\"button\"\n [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl\"></mat-icon>\n</button>\n} @else {\n<button\n [class]=\"buttonClass\"\n [matButton]=\"buttonType\"\n type=\"button\"\n [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl\"></mat-icon>\n {{ buttonText }}\n</button>\n}\n\n<ng-template #iconTpl>\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n } @else if(buttonFontIcon) {\n <mat-icon [fontIcon]=\"buttonFontIcon\"></mat-icon>\n } @else if(buttonSvgIcon) {\n <mat-icon [svgIcon]=\"buttonSvgIcon\"></mat-icon>\n }\n</ng-template>\n\n<mat-menu #menu=\"matMenu\" class=\"acp-grid-column-menu\">\n <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n <div\n class=\"acp-grid-column-menu-content\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n >\n @if (showHeader) {\n <div class=\"acp-grid-column-menu-header\">\n @if (headerTemplate) {\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n } @else { {{headerText}} }\n </div>\n }\n\n <div class=\"acp-grid-column-menu-body\">\n @if (sortable) {\n <div\n class=\"acp-grid-column-menu-list\"\n cdkDropList\n (cdkDropListDropped)=\"_handleDroped($event)\"\n >\n @for (col of columns; track col.field) {\n <div\n class=\"acp-grid-column-menu-item\"\n cdkDrag\n [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-column-drag-handle-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path\n d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\"\n />\n </svg>\n <ng-template\n [ngTemplateOutlet]=\"checkboxList\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\"\n >\n </ng-template>\n </div>\n }\n </div>\n } @if (!sortable) {\n <div class=\"acp-grid-column-menu-list\">\n @for (col of columns; track col.field) {\n <div class=\"acp-grid-column-menu-item\">\n <ng-template\n [ngTemplateOutlet]=\"checkboxList\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\"\n >\n </ng-template>\n </div>\n }\n </div>\n }\n </div>\n\n @if (showFooter) {\n <div class=\"acp-grid-column-menu-footer\">\n @if (footerTemplate) {\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n } @else { {{footerText}} }\n </div>\n }\n </div>\n</mat-menu>\n\n<ng-template #checkboxList let-col>\n @if (pinnable) {\n <button\n class=\"acp-grid-column-pin-button\"\n matIconButton\n type=\"button\"\n [matMenuTriggerFor]=\"pinList\"\n >\n @if (col.pinned) {\n <svg\n class=\"acp-grid-icon acp-grid-column-pin-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\n </svg>\n } @if (!col.pinned) {\n <svg\n class=\"acp-grid-icon acp-grid-column-pin-off-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path\n d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\"\n />\n </svg>\n }\n </button>\n <mat-menu #pinList=\"matMenu\" class=\"acp-grid-column-pin-list\">\n @for (item of pinOptions; track item) {\n <button\n class=\"acp-grid-column-pin-option\"\n type=\"button\"\n mat-menu-item\n (click)=\"_handlePinSelect(col, item.value)\"\n >\n <span class=\"acp-grid-column-pin-option-placeholder\">\n <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n @if (col.pinned==item.value) {\n <svg\n class=\"acp-grid-icon acp-grid-column-pin-check-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n </svg>\n }\n </span>\n <span class=\"acp-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\n </button>\n }\n </mat-menu>\n } @if (selectable) {\n <mat-checkbox\n class=\"acp-grid-column-menu-item-label\"\n [(ngModel)]=\"col[selectableChecked]\"\n [disabled]=\"col.disabled\"\n (change)=\"_handleChecked(col)\"\n >{{col.header | toObservable | async}}</mat-checkbox\n >\n } @else {\n <span class=\"acp-grid-column-menu-item-label\">{{col.header | toObservable | async}}</span>\n }\n</ng-template>\n", styles: [".acp-grid-column-menu,.acp-grid-column-pin-list{color:var(--acp-grid-column-menu-text-color, var(--mat-sys-on-surface-variant))}.acp-grid-column-menu .mat-mdc-menu-content{padding:0}.acp-grid-column-menu-body{max-height:65vh;padding:8px 16px;overflow:auto}.acp-grid-column-menu-header,.acp-grid-column-menu-footer{position:sticky;z-index:1;padding:8px 16px}.acp-grid-column-menu-header{top:0;border-bottom:1px solid var(--acp-grid-column-menu-divider-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-footer{bottom:0;border-top:1px solid var(--acp-grid-column-menu-divider-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-list{display:block;max-width:100%}.acp-grid-column-menu-list.cdk-drop-list-dragging .acp-grid-column-menu-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.acp-grid-column-menu-item{display:flex;flex-direction:row;align-items:center}.acp-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{opacity:.35;cursor:no-drop}.acp-grid-column-menu-item .cdk-drag-handle{cursor:move}.acp-grid-column-menu-item.cdk-drag-preview{border-radius:4px;box-shadow:0 0 0 1px var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-item.cdk-drag-placeholder{opacity:0}.acp-grid-column-menu-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.acp-grid-column-pin-button.mat-mdc-icon-button .mat-mdc-button-touch-target{width:100%;height:100%}.acp-grid-column-pin-option.mat-menu-item{display:flex;align-items:center;height:32px}.acp-grid-column-pin-option-placeholder{display:inline-block;width:20px;height:20px;line-height:20px;vertical-align:middle}.acp-grid-column-pin-option-text{padding:0 8px;vertical-align:middle}.acp-grid-column-drag-handle-icon:hover{cursor:move}.acp-grid-column-menu-item-label.mat-mdc-checkbox .mat-mdc-checkbox-touch-target{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3991
3266
|
}
|
|
3992
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
3267
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridColumnMenu, decorators: [{
|
|
3993
3268
|
type: Component,
|
|
3994
3269
|
args: [{ selector: 'acp-grid-column-menu', exportAs: 'acpGridColumnMenu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3995
3270
|
AsyncPipe,
|
|
@@ -4086,10 +3361,10 @@ class AcpGridExpansionToggle {
|
|
|
4086
3361
|
this.opened = !this.opened;
|
|
4087
3362
|
this.toggleChange.emit(this);
|
|
4088
3363
|
}
|
|
4089
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
4090
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
3364
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridExpansionToggle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3365
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AcpGridExpansionToggle, isStandalone: true, selector: "[acpGridExpansionToggle]", inputs: { opened: "opened", expandableRow: "expandableRow", expansionRowTpl: "expansionRowTpl" }, outputs: { openedChange: "openedChange", toggleChange: "toggleChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.expanded": "opened" } }, ngImport: i0 });
|
|
4091
3366
|
}
|
|
4092
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
3367
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridExpansionToggle, decorators: [{
|
|
4093
3368
|
type: Directive,
|
|
4094
3369
|
args: [{
|
|
4095
3370
|
selector: '[acpGridExpansionToggle]',
|
|
@@ -4120,10 +3395,10 @@ class MatFlexTableResizeStrategy extends CdkFlexTableResizeStrategy {
|
|
|
4120
3395
|
getColumnCssClass(cssFriendlyColumnName) {
|
|
4121
3396
|
return `mat-column-${cssFriendlyColumnName}`;
|
|
4122
3397
|
}
|
|
4123
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
4124
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
3398
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MatFlexTableResizeStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
3399
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MatFlexTableResizeStrategy });
|
|
4125
3400
|
}
|
|
4126
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
3401
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MatFlexTableResizeStrategy, decorators: [{
|
|
4127
3402
|
type: Injectable
|
|
4128
3403
|
}] });
|
|
4129
3404
|
const FLEX_RESIZE_STRATEGY_PROVIDER = {
|
|
@@ -4174,10 +3449,10 @@ class MatColumnResize extends AbstractMatColumnResize {
|
|
|
4174
3449
|
eventDispatcher = inject(HeaderRowEventDispatcher);
|
|
4175
3450
|
ngZone = inject(NgZone);
|
|
4176
3451
|
notifier = inject(ColumnResizeNotifierSource);
|
|
4177
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
4178
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
3452
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MatColumnResize, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
3453
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: MatColumnResize, isStandalone: true, selector: "table[mat-table][columnResize]", host: { classAttribute: "mat-column-resize-table" }, providers: [...TABLE_PROVIDERS, { provide: ColumnResize, useExisting: MatColumnResize }], usesInheritance: true, ngImport: i0 });
|
|
4179
3454
|
}
|
|
4180
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
3455
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MatColumnResize, decorators: [{
|
|
4181
3456
|
type: Directive,
|
|
4182
3457
|
args: [{
|
|
4183
3458
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -4204,10 +3479,10 @@ class MatColumnResizeFlex extends AbstractMatColumnResize {
|
|
|
4204
3479
|
eventDispatcher = inject(HeaderRowEventDispatcher);
|
|
4205
3480
|
ngZone = inject(NgZone);
|
|
4206
3481
|
notifier = inject(ColumnResizeNotifierSource);
|
|
4207
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
4208
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
3482
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MatColumnResizeFlex, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
3483
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: MatColumnResizeFlex, isStandalone: true, selector: "mat-table[columnResize]", host: { classAttribute: "mat-column-resize-flex" }, providers: [...FLEX_PROVIDERS, { provide: ColumnResize, useExisting: MatColumnResizeFlex }], usesInheritance: true, ngImport: i0 });
|
|
4209
3484
|
}
|
|
4210
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
3485
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MatColumnResizeFlex, decorators: [{
|
|
4211
3486
|
type: Directive,
|
|
4212
3487
|
args: [{
|
|
4213
3488
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -4243,10 +3518,10 @@ class MatColumnResizeOverlayHandle extends ResizeOverlayHandle {
|
|
|
4243
3518
|
: originHeight,
|
|
4244
3519
|
});
|
|
4245
3520
|
}
|
|
4246
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
4247
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0
|
|
3521
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MatColumnResizeOverlayHandle, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3522
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: MatColumnResizeOverlayHandle, isStandalone: true, selector: "ng-component", host: { classAttribute: "mat-column-resize-overlay-thumb" }, viewQueries: [{ propertyName: "topElement", first: true, predicate: ["top"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: '<div #top class="mat-column-resize-overlay-thumb-top"></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4248
3523
|
}
|
|
4249
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
3524
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MatColumnResizeOverlayHandle, decorators: [{
|
|
4250
3525
|
type: Component,
|
|
4251
3526
|
args: [{
|
|
4252
3527
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
@@ -4311,10 +3586,10 @@ class MatResizable extends AbstractMatResizable {
|
|
|
4311
3586
|
set resizable(newValue) {
|
|
4312
3587
|
this.isResizable = newValue == null || newValue === '' || newValue;
|
|
4313
3588
|
}
|
|
4314
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
4315
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
3589
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MatResizable, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
3590
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: MatResizable, isStandalone: true, selector: "mat-header-cell[resizable], th[mat-header-cell][resizable]", inputs: { minWidthPx: ["matResizableMinWidthPx", "minWidthPx"], maxWidthPx: ["matResizableMaxWidthPx", "maxWidthPx"], resizable: "resizable" }, host: { properties: { "class": "resizableClass" } }, usesInheritance: true, ngImport: i0 });
|
|
4316
3591
|
}
|
|
4317
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
3592
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MatResizable, decorators: [{
|
|
4318
3593
|
type: Directive,
|
|
4319
3594
|
args: [{
|
|
4320
3595
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -4383,7 +3658,7 @@ class DataGrid {
|
|
|
4383
3658
|
/** Whether to hide the page size selection UI from the user. */
|
|
4384
3659
|
hidePageSize = this._defaultOptions?.hidePageSize ?? false;
|
|
4385
3660
|
/** Event emitted when the paginator changes the page size or page index. */
|
|
4386
|
-
page =
|
|
3661
|
+
page = output();
|
|
4387
3662
|
/** The template for the pagination. */
|
|
4388
3663
|
paginationTemplate;
|
|
4389
3664
|
// ===== Sort =====
|
|
@@ -4406,16 +3681,16 @@ class DataGrid {
|
|
|
4406
3681
|
*/
|
|
4407
3682
|
sortStart = this._defaultOptions?.sortStart ?? 'asc';
|
|
4408
3683
|
/** Event emitted when the user changes either the active sort or sort direction. */
|
|
4409
|
-
sortChange =
|
|
3684
|
+
sortChange = output();
|
|
4410
3685
|
// ===== Row =====
|
|
4411
3686
|
/** Whether to use the row hover style. */
|
|
4412
3687
|
rowHover = this._defaultOptions?.rowHover ?? false;
|
|
4413
3688
|
/** Whether to use the row striped style. */
|
|
4414
3689
|
rowStriped = this._defaultOptions?.rowStriped ?? false;
|
|
4415
3690
|
/** Event emitted when the user clicks the row. */
|
|
4416
|
-
rowClick =
|
|
3691
|
+
rowClick = output();
|
|
4417
3692
|
/** Event emitted when the user attempts to open a context menu. */
|
|
4418
|
-
rowContextMenu =
|
|
3693
|
+
rowContextMenu = output();
|
|
4419
3694
|
// ===== Expandable Row =====
|
|
4420
3695
|
expansionRowStates = [];
|
|
4421
3696
|
/** Whether the row is expandable. */
|
|
@@ -4423,7 +3698,7 @@ class DataGrid {
|
|
|
4423
3698
|
/** The template for the expandable row. */
|
|
4424
3699
|
expansionTemplate;
|
|
4425
3700
|
/** Event emitted when the user toggles the expandable row. */
|
|
4426
|
-
expansionChange =
|
|
3701
|
+
expansionChange = output();
|
|
4427
3702
|
closeOthersOnExpand = input(false, /* @ts-ignore */
|
|
4428
3703
|
...(ngDevMode ? [{ debugName: "closeOthersOnExpand" }] : /* istanbul ignore next */ []));
|
|
4429
3704
|
// ===== Row Selection =====
|
|
@@ -4445,19 +3720,19 @@ class DataGrid {
|
|
|
4445
3720
|
/** The selected row items. */
|
|
4446
3721
|
rowSelected = [];
|
|
4447
3722
|
/** Event emitted when the row is selected. */
|
|
4448
|
-
rowSelectedChange =
|
|
4449
|
-
checkboxKeyDown =
|
|
4450
|
-
checkboxKeyUp =
|
|
4451
|
-
checkboxKeyPress =
|
|
4452
|
-
rowKeyDown =
|
|
4453
|
-
rowKeyUp =
|
|
4454
|
-
rowKeyPress =
|
|
3723
|
+
rowSelectedChange = output();
|
|
3724
|
+
checkboxKeyDown = output();
|
|
3725
|
+
checkboxKeyUp = output();
|
|
3726
|
+
checkboxKeyPress = output();
|
|
3727
|
+
rowKeyDown = output();
|
|
3728
|
+
rowKeyUp = output();
|
|
3729
|
+
rowKeyPress = output();
|
|
4455
3730
|
// ===== Cell Selection =====
|
|
4456
3731
|
cellSelection = [];
|
|
4457
3732
|
/** Whether the cell is selectable. */
|
|
4458
3733
|
cellSelectable = this._defaultOptions?.cellSelectable ?? true;
|
|
4459
3734
|
/** Event emitted when the cell is selected. */
|
|
4460
|
-
cellSelectedChange =
|
|
3735
|
+
cellSelectedChange = output();
|
|
4461
3736
|
_selectedCell;
|
|
4462
3737
|
// ===== Toolbar =====
|
|
4463
3738
|
/** Whether to show the toolbar. */
|
|
@@ -4476,7 +3751,7 @@ class DataGrid {
|
|
|
4476
3751
|
/** Whether the column is pinnable. */
|
|
4477
3752
|
columnPinnable = this._defaultOptions?.columnPinnable ?? true;
|
|
4478
3753
|
/** Event emitted when the column is hided or is sorted. */
|
|
4479
|
-
columnChange =
|
|
3754
|
+
columnChange = output();
|
|
4480
3755
|
/** The options for the column pin list. */
|
|
4481
3756
|
columnPinOptions = this._defaultOptions?.columnPinOptions ?? [];
|
|
4482
3757
|
/** Whether to show the column menu button. */
|
|
@@ -4598,8 +3873,6 @@ class DataGrid {
|
|
|
4598
3873
|
this.rowSelection = new SelectionModel(this.multiSelectable, this.rowSelected);
|
|
4599
3874
|
}
|
|
4600
3875
|
this.dataSource = new MatTableDataSource(this.data);
|
|
4601
|
-
this.dataSource.paginator = this.pageOnFront ? this.paginator : null;
|
|
4602
|
-
this.dataSource.sort = this.sortOnFront ? this.sort : null;
|
|
4603
3876
|
// Only scroll top with data change
|
|
4604
3877
|
if (changes['data']) {
|
|
4605
3878
|
this.scrollTop(0);
|
|
@@ -4609,9 +3882,15 @@ class DataGrid {
|
|
|
4609
3882
|
if (this.pageOnFront) {
|
|
4610
3883
|
this.dataSource.paginator = this.paginator;
|
|
4611
3884
|
}
|
|
3885
|
+
else {
|
|
3886
|
+
this.dataSource.paginator = null;
|
|
3887
|
+
}
|
|
4612
3888
|
if (this.sortOnFront) {
|
|
4613
3889
|
this.dataSource.sort = this.sort;
|
|
4614
3890
|
}
|
|
3891
|
+
else {
|
|
3892
|
+
this.dataSource.sort = null;
|
|
3893
|
+
}
|
|
4615
3894
|
if (this.rowDefs?.length > 0 && this.useContentRowTemplate) {
|
|
4616
3895
|
this.rowDefs.forEach(rowDef => this.table.addRowDef(rowDef));
|
|
4617
3896
|
}
|
|
@@ -4781,10 +4060,10 @@ class DataGrid {
|
|
|
4781
4060
|
_contextmenu(event, rowData, index) {
|
|
4782
4061
|
this.rowContextMenu.emit({ event, rowData, index });
|
|
4783
4062
|
}
|
|
4784
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
4785
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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 });
|
|
4063
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4064
|
+
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 });
|
|
4786
4065
|
}
|
|
4787
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
4066
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGrid, decorators: [{
|
|
4788
4067
|
type: Component,
|
|
4789
4068
|
args: [{ selector: 'acp-data-grid', exportAs: 'dataGrid', imports: [
|
|
4790
4069
|
AsyncPipe,
|
|
@@ -4893,9 +4172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
|
|
|
4893
4172
|
}], hidePageSize: [{
|
|
4894
4173
|
type: Input,
|
|
4895
4174
|
args: [{ transform: booleanAttribute }]
|
|
4896
|
-
}], page: [{
|
|
4897
|
-
type: Output
|
|
4898
|
-
}], paginationTemplate: [{
|
|
4175
|
+
}], page: [{ type: i0.Output, args: ["page"] }], paginationTemplate: [{
|
|
4899
4176
|
type: Input
|
|
4900
4177
|
}], sortOnFront: [{
|
|
4901
4178
|
type: Input,
|
|
@@ -4912,26 +4189,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
|
|
|
4912
4189
|
args: [{ transform: booleanAttribute }]
|
|
4913
4190
|
}], sortStart: [{
|
|
4914
4191
|
type: Input
|
|
4915
|
-
}], sortChange: [{
|
|
4916
|
-
type: Output
|
|
4917
|
-
}], rowHover: [{
|
|
4192
|
+
}], sortChange: [{ type: i0.Output, args: ["sortChange"] }], rowHover: [{
|
|
4918
4193
|
type: Input,
|
|
4919
4194
|
args: [{ transform: booleanAttribute }]
|
|
4920
4195
|
}], rowStriped: [{
|
|
4921
4196
|
type: Input,
|
|
4922
4197
|
args: [{ transform: booleanAttribute }]
|
|
4923
|
-
}], rowClick: [{
|
|
4924
|
-
type: Output
|
|
4925
|
-
}], rowContextMenu: [{
|
|
4926
|
-
type: Output
|
|
4927
|
-
}], expandable: [{
|
|
4198
|
+
}], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowContextMenu: [{ type: i0.Output, args: ["rowContextMenu"] }], expandable: [{
|
|
4928
4199
|
type: Input,
|
|
4929
4200
|
args: [{ transform: booleanAttribute }]
|
|
4930
4201
|
}], expansionTemplate: [{
|
|
4931
4202
|
type: Input
|
|
4932
|
-
}], expansionChange: [{
|
|
4933
|
-
type: Output
|
|
4934
|
-
}], closeOthersOnExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOthersOnExpand", required: false }] }], multiSelectable: [{
|
|
4203
|
+
}], expansionChange: [{ type: i0.Output, args: ["expansionChange"] }], closeOthersOnExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOthersOnExpand", required: false }] }], multiSelectable: [{
|
|
4935
4204
|
type: Input,
|
|
4936
4205
|
args: [{ transform: booleanAttribute }]
|
|
4937
4206
|
}], multiSelectionWithClick: [{
|
|
@@ -4952,26 +4221,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
|
|
|
4952
4221
|
type: Input
|
|
4953
4222
|
}], rowSelected: [{
|
|
4954
4223
|
type: Input
|
|
4955
|
-
}], rowSelectedChange: [{
|
|
4956
|
-
type: Output
|
|
4957
|
-
}], checkboxKeyDown: [{
|
|
4958
|
-
type: Output
|
|
4959
|
-
}], checkboxKeyUp: [{
|
|
4960
|
-
type: Output
|
|
4961
|
-
}], checkboxKeyPress: [{
|
|
4962
|
-
type: Output
|
|
4963
|
-
}], rowKeyDown: [{
|
|
4964
|
-
type: Output
|
|
4965
|
-
}], rowKeyUp: [{
|
|
4966
|
-
type: Output
|
|
4967
|
-
}], rowKeyPress: [{
|
|
4968
|
-
type: Output
|
|
4969
|
-
}], cellSelectable: [{
|
|
4224
|
+
}], rowSelectedChange: [{ type: i0.Output, args: ["rowSelectedChange"] }], checkboxKeyDown: [{ type: i0.Output, args: ["checkboxKeyDown"] }], checkboxKeyUp: [{ type: i0.Output, args: ["checkboxKeyUp"] }], checkboxKeyPress: [{ type: i0.Output, args: ["checkboxKeyPress"] }], rowKeyDown: [{ type: i0.Output, args: ["rowKeyDown"] }], rowKeyUp: [{ type: i0.Output, args: ["rowKeyUp"] }], rowKeyPress: [{ type: i0.Output, args: ["rowKeyPress"] }], cellSelectable: [{
|
|
4970
4225
|
type: Input,
|
|
4971
4226
|
args: [{ transform: booleanAttribute }]
|
|
4972
|
-
}], cellSelectedChange: [{
|
|
4973
|
-
type: Output
|
|
4974
|
-
}], showToolbar: [{
|
|
4227
|
+
}], cellSelectedChange: [{ type: i0.Output, args: ["cellSelectedChange"] }], showToolbar: [{
|
|
4975
4228
|
type: Input,
|
|
4976
4229
|
args: [{ transform: booleanAttribute }]
|
|
4977
4230
|
}], toolbarTitle: [{
|
|
@@ -4989,9 +4242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
|
|
|
4989
4242
|
}], columnPinnable: [{
|
|
4990
4243
|
type: Input,
|
|
4991
4244
|
args: [{ transform: booleanAttribute }]
|
|
4992
|
-
}], columnChange: [{
|
|
4993
|
-
type: Output
|
|
4994
|
-
}], columnPinOptions: [{
|
|
4245
|
+
}], columnChange: [{ type: i0.Output, args: ["columnChange"] }], columnPinOptions: [{
|
|
4995
4246
|
type: Input
|
|
4996
4247
|
}], showColumnMenuButton: [{
|
|
4997
4248
|
type: Input,
|
|
@@ -5104,14 +4355,14 @@ class KeyboardNavigationService {
|
|
|
5104
4355
|
this.focusableElements.push(element);
|
|
5105
4356
|
// Configurar eventos de teclado para este elemento
|
|
5106
4357
|
fromEvent(element.element?.nativeElement, 'keydown')
|
|
5107
|
-
.pipe(takeUntil
|
|
4358
|
+
.pipe(takeUntil(this.destroy$), filter(event => ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)))
|
|
5108
4359
|
.subscribe(event => {
|
|
5109
4360
|
event.preventDefault(); // Prevenir el comportamiento por defecto del navegador (scroll, etc.)
|
|
5110
4361
|
this.handleKeyNavigation(event.key);
|
|
5111
4362
|
});
|
|
5112
4363
|
// Configurar eventos de foco para este elemento
|
|
5113
4364
|
fromEvent(element.element?.nativeElement, 'focus')
|
|
5114
|
-
.pipe(takeUntil
|
|
4365
|
+
.pipe(takeUntil(this.destroy$))
|
|
5115
4366
|
.subscribe(() => {
|
|
5116
4367
|
const index = this.focusableElements.findIndex(e => e.element === element.element);
|
|
5117
4368
|
this.currentFocusIndex.set(index);
|
|
@@ -5222,10 +4473,10 @@ class KeyboardNavigationService {
|
|
|
5222
4473
|
this.destroy$.next();
|
|
5223
4474
|
this.destroy$.complete();
|
|
5224
4475
|
}
|
|
5225
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
5226
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
4476
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KeyboardNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
4477
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KeyboardNavigationService, providedIn: 'root' });
|
|
5227
4478
|
}
|
|
5228
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
4479
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KeyboardNavigationService, decorators: [{
|
|
5229
4480
|
type: Injectable,
|
|
5230
4481
|
args: [{
|
|
5231
4482
|
providedIn: 'root',
|
|
@@ -5477,8 +4728,8 @@ class DateRangePicker {
|
|
|
5477
4728
|
toggle() {
|
|
5478
4729
|
// NgxDatex handles show/hide through its own API
|
|
5479
4730
|
}
|
|
5480
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
5481
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0
|
|
4731
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4732
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: DateRangePicker, isStandalone: true, selector: "acp-date-range-picker", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholderText: { classPropertyName: "placeholderText", publicName: "placeholderText", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, inputReadonly: { classPropertyName: "inputReadonly", publicName: "inputReadonly", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, formatOutputAsString: { classPropertyName: "formatOutputAsString", publicName: "formatOutputAsString", isSignal: true, isRequired: false, transformFunction: null }, calendarIcon: { classPropertyName: "calendarIcon", publicName: "calendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showCalendarButton: { classPropertyName: "showCalendarButton", publicName: "showCalendarButton", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, checkboxChecked: { classPropertyName: "checkboxChecked", publicName: "checkboxChecked", isSignal: true, isRequired: false, transformFunction: null }, checkboxPosition: { classPropertyName: "checkboxPosition", publicName: "checkboxPosition", isSignal: true, isRequired: false, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, singleDatePicker: { classPropertyName: "singleDatePicker", publicName: "singleDatePicker", isSignal: true, isRequired: false, transformFunction: null }, timePicker: { classPropertyName: "timePicker", publicName: "timePicker", isSignal: true, isRequired: false, transformFunction: null }, timePicker24Hour: { classPropertyName: "timePicker24Hour", publicName: "timePicker24Hour", isSignal: true, isRequired: false, transformFunction: null }, timePickerSeconds: { classPropertyName: "timePickerSeconds", publicName: "timePickerSeconds", isSignal: true, isRequired: false, transformFunction: null }, timePickerIncrement: { classPropertyName: "timePickerIncrement", publicName: "timePickerIncrement", isSignal: true, isRequired: false, transformFunction: null }, autoApply: { classPropertyName: "autoApply", publicName: "autoApply", isSignal: true, isRequired: false, transformFunction: null }, showDropdowns: { classPropertyName: "showDropdowns", publicName: "showDropdowns", isSignal: true, isRequired: false, transformFunction: null }, linkedCalendars: { classPropertyName: "linkedCalendars", publicName: "linkedCalendars", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowCalendars: { classPropertyName: "alwaysShowCalendars", publicName: "alwaysShowCalendars", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkboxChecked: "checkboxCheckedChange", dateRangeSelected: "dateRangeSelected", pickerShow: "pickerShow", pickerHide: "pickerHide", pickerApply: "pickerApply", pickerCancel: "pickerCancel", checkboxChange: "checkboxChange" }, providers: [
|
|
5482
4733
|
{
|
|
5483
4734
|
provide: NG_VALUE_ACCESSOR,
|
|
5484
4735
|
useExisting: forwardRef(() => DateRangePicker),
|
|
@@ -5521,7 +4772,7 @@ class DateRangePicker {
|
|
|
5521
4772
|
></ngx-datex>
|
|
5522
4773
|
`, isInline: true, dependencies: [{ kind: "component", type: NgxDatex, selector: "ngx-datex", inputs: ["config", "locale", "theme", "appearance", "floatLabel", "label", "placeholder", "calendarIcon", "showCalendarIcon", "calendarIconPosition", "showCheckbox", "checkboxChecked", "checkboxPosition", "readonly", "disabled", "showHeader", "showFooter", "singleDatePicker", "autoApply", "showDropdowns", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "linkedCalendars", "autoUpdateInput", "alwaysShowCalendars", "showCustomRangeLabel", "startDate", "endDate", "minDate", "maxDate", "maxSpan", "showWeekNumbers", "showISOWeekNumbers", "buttonClasses", "applyButtonClasses", "cancelButtonClasses", "isInvalidDate", "isCustomDate", "minYear", "maxYear", "ranges", "opens", "drops", "headerTemplate", "footerTemplate", "dayTemplate", "ariaLabel", "ariaDescribedBy"], outputs: ["dateChange", "rangeChange", "openEvent", "closeEvent", "monthChange", "yearChange", "dateHover", "validationError", "checkboxChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
5523
4774
|
}
|
|
5524
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
4775
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DateRangePicker, decorators: [{
|
|
5525
4776
|
type: Component,
|
|
5526
4777
|
args: [{
|
|
5527
4778
|
selector: 'acp-date-range-picker',
|
|
@@ -5769,10 +5020,10 @@ class AcpDrawerContainer extends CdkDialogContainer {
|
|
|
5769
5020
|
_captureInitialFocus() {
|
|
5770
5021
|
// Intentionally empty - focus is handled by the enter animation
|
|
5771
5022
|
}
|
|
5772
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
5773
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0
|
|
5023
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDrawerContainer, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5024
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: AcpDrawerContainer, isStandalone: true, selector: "acp-drawer-container", host: { attributes: { "tabindex": "-1" }, listeners: { "animationstart": "_handleAnimationEvent(true, $event.animationName)", "animationend": "_handleAnimationEvent(false, $event.animationName)", "animationcancel": "_handleAnimationEvent(false, $event.animationName)" }, properties: { "class": "_drawerPosition", "class.acp-drawer-container-animations-enabled": "!_animationsDisabled", "class.acp-drawer-container-enter": "_animationState === \"visible\"", "class.acp-drawer-container-exit": "_animationState === \"hidden\"", "class.acp-drawer-fullscreen": "_config.fullScreen", "id": "_config.id", "attr.role": "_config.role", "attr.aria-modal": "_config.ariaModal", "attr.aria-label": "_config.ariaLabel" }, classAttribute: "acp-drawer-container" }, usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\n", styles: ["@keyframes _acp-drawer-enter{0%{box-shadow:none;visibility:hidden}to{transform:none;visibility:visible}}@keyframes _acp-drawer-exit{0%{transform:none;visibility:visible}to{box-shadow:none;visibility:hidden}}.acp-drawer-container{display:block;width:100%;padding:8px 16px;overflow:auto;outline:0;box-sizing:border-box;position:relative;background-color:var(--acp-drawer-container-background-color, var(--mat-sys-surface));color:var(--acp-drawer-container-text-color, var(--mat-sys-on-surface-variant));box-shadow:var(--acp-drawer-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12))}@media(forced-colors:active){.acp-drawer-container{outline:1px solid}}.acp-drawer-container-animations-enabled.acp-drawer-container-enter{animation:_acp-drawer-enter .15s cubic-bezier(0,0,.2,1) forwards}.acp-drawer-container-animations-enabled.acp-drawer-container-exit{animation:_acp-drawer-exit .4s cubic-bezier(.25,.8,.25,1) backwards}.acp-drawer-container-animations-enabled.acp-drawer-right{transform:translate(100%)}.acp-drawer-container-animations-enabled.acp-drawer-left{transform:translate(-100%)}.acp-drawer-container-animations-enabled.acp-drawer-bottom{transform:translateY(100%)}.acp-drawer-container-animations-enabled.acp-drawer-top{transform:translateY(-100%)}.acp-drawer-right{border-top-left-radius:var(--acp-drawer-container-shape, var(--mat-sys-corner-large));border-bottom-left-radius:var(--acp-drawer-container-shape, var(--mat-sys-corner-large))}.acp-drawer-left{border-top-right-radius:var(--acp-drawer-container-shape, var(--mat-sys-corner-large));border-bottom-right-radius:var(--acp-drawer-container-shape, var(--mat-sys-corner-large))}.acp-drawer-bottom{border-top-left-radius:var(--acp-drawer-container-shape, var(--mat-sys-corner-large));border-top-right-radius:var(--acp-drawer-container-shape, var(--mat-sys-corner-large))}.acp-drawer-top{border-bottom-left-radius:var(--acp-drawer-container-shape, var(--mat-sys-corner-large));border-bottom-right-radius:var(--acp-drawer-container-shape, var(--mat-sys-corner-large))}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
|
|
5774
5025
|
}
|
|
5775
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
5026
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDrawerContainer, decorators: [{
|
|
5776
5027
|
type: Component,
|
|
5777
5028
|
args: [{ selector: 'acp-drawer-container', changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, host: {
|
|
5778
5029
|
class: 'acp-drawer-container',
|
|
@@ -6093,10 +5344,10 @@ class AcpDrawer {
|
|
|
6093
5344
|
drawers[i].dismiss();
|
|
6094
5345
|
}
|
|
6095
5346
|
}
|
|
6096
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
6097
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
5347
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDrawer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
5348
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDrawer, providedIn: 'root' });
|
|
6098
5349
|
}
|
|
6099
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
5350
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDrawer, decorators: [{
|
|
6100
5351
|
type: Injectable,
|
|
6101
5352
|
args: [{ providedIn: 'root' }]
|
|
6102
5353
|
}] });
|
|
@@ -6158,20 +5409,20 @@ class _AcpPopoverContentBase {
|
|
|
6158
5409
|
this._outlet.dispose();
|
|
6159
5410
|
}
|
|
6160
5411
|
}
|
|
6161
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
6162
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
5412
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: _AcpPopoverContentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
5413
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: _AcpPopoverContentBase, isStandalone: true, ngImport: i0 });
|
|
6163
5414
|
}
|
|
6164
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
5415
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: _AcpPopoverContentBase, decorators: [{
|
|
6165
5416
|
type: Directive
|
|
6166
5417
|
}] });
|
|
6167
5418
|
/**
|
|
6168
5419
|
* Popover content that will be rendered lazily once the popover is opened.
|
|
6169
5420
|
*/
|
|
6170
5421
|
class AcpPopoverContent extends _AcpPopoverContentBase {
|
|
6171
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
6172
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
5422
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpPopoverContent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
5423
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AcpPopoverContent, isStandalone: true, selector: "ng-template[acpPopoverContent]", providers: [{ provide: ACP_POPOVER_CONTENT, useExisting: AcpPopoverContent }], usesInheritance: true, ngImport: i0 });
|
|
6173
5424
|
}
|
|
6174
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
5425
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpPopoverContent, decorators: [{
|
|
6175
5426
|
type: Directive,
|
|
6176
5427
|
args: [{
|
|
6177
5428
|
selector: 'ng-template[acpPopoverContent]',
|
|
@@ -6554,10 +5805,10 @@ class AcpPopover {
|
|
|
6554
5805
|
}
|
|
6555
5806
|
this._changeDetectorRef.markForCheck();
|
|
6556
5807
|
}
|
|
6557
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
6558
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0
|
|
5808
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5809
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpPopover, isStandalone: true, selector: "acp-popover", inputs: { backdropClass: "backdropClass", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], triggerEvent: "triggerEvent", enterDelay: "enterDelay", leaveDelay: "leaveDelay", position: "position", xOffset: "xOffset", yOffset: "yOffset", arrowWidth: "arrowWidth", arrowHeight: "arrowHeight", arrowOffsetX: "arrowOffsetX", arrowOffsetY: "arrowOffsetY", hideArrow: ["hideArrow", "hideArrow", booleanAttribute], closeOnPanelClick: ["closeOnPanelClick", "closeOnPanelClick", booleanAttribute], closeOnBackdropClick: ["closeOnBackdropClick", "closeOnBackdropClick", booleanAttribute], focusTrapEnabled: ["focusTrapEnabled", "focusTrapEnabled", booleanAttribute], focusTrapAutoCaptureEnabled: ["focusTrapAutoCaptureEnabled", "focusTrapAutoCaptureEnabled", booleanAttribute], hasBackdrop: ["hasBackdrop", "hasBackdrop", booleanAttribute], panelClass: "panelClass" }, outputs: { closed: "closed" }, queries: [{ propertyName: "lazyContent", first: true, predicate: ACP_POPOVER_CONTENT, descendants: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["acpPopover"], ngImport: i0, template: "<ng-template>\n <!-- eslint-disable @angular-eslint/template/mouse-events-have-key-events -->\n <div\n [id]=\"panelId\"\n class=\"acp-popover-panel\"\n [class]=\"_classList\"\n [class.acp-popover-panel-animations-disabled]=\"_animationsDisabled\"\n [class.acp-popover-panel-exit-animation]=\"_panelAnimationState === 'void'\"\n [class.acp-popover-panel-animating]=\"_isAnimating\"\n [class.acp-popover-panel-without-arrow]=\"hideArrow\"\n (keydown)=\"_handleKeydown($event)\"\n (click)=\"_handleClick()\"\n (mouseover)=\"_handleMouseOver()\"\n (mouseleave)=\"_handleMouseLeave()\"\n tabindex=\"-1\"\n role=\"dialog\"\n (animationstart)=\"_onAnimationStart($event.animationName)\"\n (animationend)=\"_onAnimationDone($event.animationName)\"\n (animationcancel)=\"_onAnimationDone($event.animationName)\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby || null\"\n [attr.aria-describedby]=\"ariaDescribedby || null\"\n [cdkTrapFocus]=\"focusTrapEnabled\"\n [cdkTrapFocusAutoCapture]=\"focusTrapAutoCaptureEnabled\"\n >\n <div class=\"acp-popover-content\">\n <ng-content></ng-content>\n </div>\n @if (!hideArrow) {\n <div class=\"acp-popover-direction-arrow\" [style]=\"arrowStyles\"></div>\n }\n </div>\n</ng-template>\n", styles: ["@keyframes _acp-popover-enter{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}@keyframes _acp-popover-exit{0%{opacity:1}to{opacity:0}}.acp-popover-panel{position:relative;max-height:calc(100vh - 48px);padding:8px;font-size:inherit;outline:0;animation:_acp-popover-enter .12s cubic-bezier(0,0,.2,1);border-radius:var(--acp-popover-container-shape, var(--mat-sys-corner-extra-small));background-color:var(--acp-popover-background-color, var(--mat-sys-surface-container));color:var(--acp-popover-text-color, var(--mat-sys-on-surface))}.acp-popover-panel.acp-popover-panel-exit-animation{animation:_acp-popover-exit .1s 25ms linear forwards}.acp-popover-panel.acp-popover-panel-animations-disabled{animation:none}.acp-popover-panel.acp-popover-panel-animating{pointer-events:none}.acp-popover-panel[class*=acp-popover-below]{margin-top:calc(.5em + 2px)}.acp-popover-panel[class*=acp-popover-above]{margin-bottom:calc(.5em + 2px)}.acp-popover-panel[class*=acp-popover-before]{margin-right:calc(.5em + 2px)}[dir=rtl] .acp-popover-panel[class*=acp-popover-before]{margin-right:auto;margin-left:calc(.5em + 2px)}.acp-popover-panel[class*=acp-popover-after]{margin-left:calc(.5em + 2px)}[dir=rtl] .acp-popover-panel[class*=acp-popover-after]{margin-left:auto;margin-right:calc(.5em + 2px)}.acp-popover-panel.acp-popover-panel-without-arrow{margin:0}.acp-popover-direction-arrow{position:absolute}.acp-popover-direction-arrow:before,.acp-popover-direction-arrow:after{position:absolute;display:inline-block;content:\"\";border-width:.5em;border-style:solid}.acp-popover-direction-arrow:before{border-color:var(--acp-popover-outline-color, var(--mat-sys-surface-container))}.acp-popover-direction-arrow:after{border-width:calc(.5em - 1px);border-color:var(--acp-popover-background-color, var(--mat-sys-surface-container))}[class*=acp-popover-below] .acp-popover-direction-arrow,[class*=acp-popover-above] .acp-popover-direction-arrow{width:1em}[class*=acp-popover-below] .acp-popover-direction-arrow:before,[class*=acp-popover-below] .acp-popover-direction-arrow:after,[class*=acp-popover-above] .acp-popover-direction-arrow:before,[class*=acp-popover-above] .acp-popover-direction-arrow:after{border-left-color:transparent;border-right-color:transparent}[class*=acp-popover-below] .acp-popover-direction-arrow:after,[class*=acp-popover-above] .acp-popover-direction-arrow:after{left:1px}[dir=rtl] [class*=acp-popover-below] .acp-popover-direction-arrow:after,[dir=rtl] [class*=acp-popover-above] .acp-popover-direction-arrow:after{right:1px;left:auto}[class*=acp-popover-below] .acp-popover-direction-arrow{top:0}[class*=acp-popover-below] .acp-popover-direction-arrow:before,[class*=acp-popover-below] .acp-popover-direction-arrow:after{bottom:0;border-top-width:0}[class*=acp-popover-above] .acp-popover-direction-arrow{bottom:0}[class*=acp-popover-above] .acp-popover-direction-arrow:before,[class*=acp-popover-above] .acp-popover-direction-arrow:after{top:0;border-bottom-width:0}[class*=acp-popover-before] .acp-popover-direction-arrow,[class*=acp-popover-after] .acp-popover-direction-arrow{height:1em}[class*=acp-popover-before] .acp-popover-direction-arrow:before,[class*=acp-popover-before] .acp-popover-direction-arrow:after,[class*=acp-popover-after] .acp-popover-direction-arrow:before,[class*=acp-popover-after] .acp-popover-direction-arrow:after{border-top-color:transparent;border-bottom-color:transparent}[class*=acp-popover-before] .acp-popover-direction-arrow:after,[class*=acp-popover-after] .acp-popover-direction-arrow:after{top:1px}[class*=acp-popover-before] .acp-popover-direction-arrow{right:0}[class*=acp-popover-before] .acp-popover-direction-arrow:before,[class*=acp-popover-before] .acp-popover-direction-arrow:after{left:0;border-right-width:0}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow{right:auto;left:0}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:before,[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:after{left:auto;right:0;border-left-width:0}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:before{border-right-width:.5em}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:after{border-right-width:calc(.5em - 1px)}[class*=acp-popover-after] .acp-popover-direction-arrow{left:0}[class*=acp-popover-after] .acp-popover-direction-arrow:before,[class*=acp-popover-after] .acp-popover-direction-arrow:after{right:0;border-left-width:0}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow{left:auto;right:0}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:before,[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:after{right:auto;left:0;border-right-width:0}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:before{border-left-width:.5em}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:after{border-left-width:calc(.5em - 1px)}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6559
5810
|
}
|
|
6560
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
5811
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpPopover, decorators: [{
|
|
6561
5812
|
type: Component,
|
|
6562
5813
|
args: [{ selector: 'acp-popover', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'acpPopover', imports: [CdkTrapFocus], template: "<ng-template>\n <!-- eslint-disable @angular-eslint/template/mouse-events-have-key-events -->\n <div\n [id]=\"panelId\"\n class=\"acp-popover-panel\"\n [class]=\"_classList\"\n [class.acp-popover-panel-animations-disabled]=\"_animationsDisabled\"\n [class.acp-popover-panel-exit-animation]=\"_panelAnimationState === 'void'\"\n [class.acp-popover-panel-animating]=\"_isAnimating\"\n [class.acp-popover-panel-without-arrow]=\"hideArrow\"\n (keydown)=\"_handleKeydown($event)\"\n (click)=\"_handleClick()\"\n (mouseover)=\"_handleMouseOver()\"\n (mouseleave)=\"_handleMouseLeave()\"\n tabindex=\"-1\"\n role=\"dialog\"\n (animationstart)=\"_onAnimationStart($event.animationName)\"\n (animationend)=\"_onAnimationDone($event.animationName)\"\n (animationcancel)=\"_onAnimationDone($event.animationName)\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby || null\"\n [attr.aria-describedby]=\"ariaDescribedby || null\"\n [cdkTrapFocus]=\"focusTrapEnabled\"\n [cdkTrapFocusAutoCapture]=\"focusTrapAutoCaptureEnabled\"\n >\n <div class=\"acp-popover-content\">\n <ng-content></ng-content>\n </div>\n @if (!hideArrow) {\n <div class=\"acp-popover-direction-arrow\" [style]=\"arrowStyles\"></div>\n }\n </div>\n</ng-template>\n", styles: ["@keyframes _acp-popover-enter{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}@keyframes _acp-popover-exit{0%{opacity:1}to{opacity:0}}.acp-popover-panel{position:relative;max-height:calc(100vh - 48px);padding:8px;font-size:inherit;outline:0;animation:_acp-popover-enter .12s cubic-bezier(0,0,.2,1);border-radius:var(--acp-popover-container-shape, var(--mat-sys-corner-extra-small));background-color:var(--acp-popover-background-color, var(--mat-sys-surface-container));color:var(--acp-popover-text-color, var(--mat-sys-on-surface))}.acp-popover-panel.acp-popover-panel-exit-animation{animation:_acp-popover-exit .1s 25ms linear forwards}.acp-popover-panel.acp-popover-panel-animations-disabled{animation:none}.acp-popover-panel.acp-popover-panel-animating{pointer-events:none}.acp-popover-panel[class*=acp-popover-below]{margin-top:calc(.5em + 2px)}.acp-popover-panel[class*=acp-popover-above]{margin-bottom:calc(.5em + 2px)}.acp-popover-panel[class*=acp-popover-before]{margin-right:calc(.5em + 2px)}[dir=rtl] .acp-popover-panel[class*=acp-popover-before]{margin-right:auto;margin-left:calc(.5em + 2px)}.acp-popover-panel[class*=acp-popover-after]{margin-left:calc(.5em + 2px)}[dir=rtl] .acp-popover-panel[class*=acp-popover-after]{margin-left:auto;margin-right:calc(.5em + 2px)}.acp-popover-panel.acp-popover-panel-without-arrow{margin:0}.acp-popover-direction-arrow{position:absolute}.acp-popover-direction-arrow:before,.acp-popover-direction-arrow:after{position:absolute;display:inline-block;content:\"\";border-width:.5em;border-style:solid}.acp-popover-direction-arrow:before{border-color:var(--acp-popover-outline-color, var(--mat-sys-surface-container))}.acp-popover-direction-arrow:after{border-width:calc(.5em - 1px);border-color:var(--acp-popover-background-color, var(--mat-sys-surface-container))}[class*=acp-popover-below] .acp-popover-direction-arrow,[class*=acp-popover-above] .acp-popover-direction-arrow{width:1em}[class*=acp-popover-below] .acp-popover-direction-arrow:before,[class*=acp-popover-below] .acp-popover-direction-arrow:after,[class*=acp-popover-above] .acp-popover-direction-arrow:before,[class*=acp-popover-above] .acp-popover-direction-arrow:after{border-left-color:transparent;border-right-color:transparent}[class*=acp-popover-below] .acp-popover-direction-arrow:after,[class*=acp-popover-above] .acp-popover-direction-arrow:after{left:1px}[dir=rtl] [class*=acp-popover-below] .acp-popover-direction-arrow:after,[dir=rtl] [class*=acp-popover-above] .acp-popover-direction-arrow:after{right:1px;left:auto}[class*=acp-popover-below] .acp-popover-direction-arrow{top:0}[class*=acp-popover-below] .acp-popover-direction-arrow:before,[class*=acp-popover-below] .acp-popover-direction-arrow:after{bottom:0;border-top-width:0}[class*=acp-popover-above] .acp-popover-direction-arrow{bottom:0}[class*=acp-popover-above] .acp-popover-direction-arrow:before,[class*=acp-popover-above] .acp-popover-direction-arrow:after{top:0;border-bottom-width:0}[class*=acp-popover-before] .acp-popover-direction-arrow,[class*=acp-popover-after] .acp-popover-direction-arrow{height:1em}[class*=acp-popover-before] .acp-popover-direction-arrow:before,[class*=acp-popover-before] .acp-popover-direction-arrow:after,[class*=acp-popover-after] .acp-popover-direction-arrow:before,[class*=acp-popover-after] .acp-popover-direction-arrow:after{border-top-color:transparent;border-bottom-color:transparent}[class*=acp-popover-before] .acp-popover-direction-arrow:after,[class*=acp-popover-after] .acp-popover-direction-arrow:after{top:1px}[class*=acp-popover-before] .acp-popover-direction-arrow{right:0}[class*=acp-popover-before] .acp-popover-direction-arrow:before,[class*=acp-popover-before] .acp-popover-direction-arrow:after{left:0;border-right-width:0}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow{right:auto;left:0}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:before,[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:after{left:auto;right:0;border-left-width:0}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:before{border-right-width:.5em}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:after{border-right-width:calc(.5em - 1px)}[class*=acp-popover-after] .acp-popover-direction-arrow{left:0}[class*=acp-popover-after] .acp-popover-direction-arrow:before,[class*=acp-popover-after] .acp-popover-direction-arrow:after{right:0;border-left-width:0}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow{left:auto;right:0}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:before,[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:after{right:auto;left:0;border-right-width:0}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:before{border-left-width:.5em}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:after{border-left-width:calc(.5em - 1px)}\n"] }]
|
|
6563
5814
|
}], propDecorators: { backdropClass: [{
|
|
@@ -7040,10 +6291,10 @@ class AcpPopoverTrigger {
|
|
|
7040
6291
|
}
|
|
7041
6292
|
return this._portal;
|
|
7042
6293
|
}
|
|
7043
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
7044
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
6294
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpPopoverTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
6295
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AcpPopoverTrigger, isStandalone: true, selector: "[acp-popover-trigger-for], [acpPopoverTriggerFor]", inputs: { popover: ["acpPopoverTriggerFor", "popover"], popoverData: "popoverData", targetElement: "targetElement", triggerEvent: "triggerEvent" }, outputs: { popoverOpened: "popoverOpened", popoverClosed: "popoverClosed" }, host: { attributes: { "aria-haspopup": "true" }, listeners: { "click": "_handleClick($event)", "mouseenter": "_handleMouseEnter($event)", "mouseleave": "_handleMouseLeave($event)", "mousedown": "_handleMousedown($event)", "keydown": "_handleKeydown($event)" }, properties: { "attr.aria-expanded": "popoverOpen", "attr.aria-controls": "popoverOpen ? popover.panelId : null" } }, exportAs: ["acpPopoverTrigger"], ngImport: i0 });
|
|
7045
6296
|
}
|
|
7046
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
6297
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpPopoverTrigger, decorators: [{
|
|
7047
6298
|
type: Directive,
|
|
7048
6299
|
args: [{
|
|
7049
6300
|
selector: '[acp-popover-trigger-for], [acpPopoverTriggerFor]',
|
|
@@ -7092,10 +6343,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
|
|
|
7092
6343
|
class AcpPopoverTarget {
|
|
7093
6344
|
/** Reference to the target element. */
|
|
7094
6345
|
elementRef = inject(ElementRef);
|
|
7095
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
7096
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
6346
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpPopoverTarget, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
6347
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AcpPopoverTarget, isStandalone: true, selector: "acp-popover-target, [acpPopoverTarget]", exportAs: ["acpPopoverTarget"], ngImport: i0 });
|
|
7097
6348
|
}
|
|
7098
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
6349
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpPopoverTarget, decorators: [{
|
|
7099
6350
|
type: Directive,
|
|
7100
6351
|
args: [{
|
|
7101
6352
|
selector: 'acp-popover-target, [acpPopoverTarget]',
|
|
@@ -7855,10 +7106,10 @@ class AcpDateRangeCalendar {
|
|
|
7855
7106
|
// this.firstCalendarView._changeDetectorRef.markForCheck();
|
|
7856
7107
|
// this.secondCalendarView._changeDetectorRef.markForCheck();
|
|
7857
7108
|
}
|
|
7858
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
7859
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0
|
|
7109
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDateRangeCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7110
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: AcpDateRangeCalendar, isStandalone: true, selector: "acp-date-range-calendar", inputs: { minDate: "minDate", maxDate: "maxDate", selectedDates: "selectedDates" }, outputs: { selectedDatesChange: "selectedDatesChange" }, viewQueries: [{ propertyName: "firstCalendarView", first: true, predicate: ["firstCalendarView"], descendants: true }, { propertyName: "secondCalendarView", first: true, predicate: ["secondCalendarView"], descendants: true }], ngImport: i0, template: "<!--\n * AcpDateRangeCalendar Component Template\n *\n * Dual-calendar view for date range selection with navigation controls.\n * @author AcontPlus S.A.S\n * @version 2.0.0\n -->\n<div class=\"calendar-container\">\n <div class=\"first-view\">\n <mat-calendar\n id=\"firstCalendarView\"\n #firstCalendarView\n [startAt]=\"firstViewStartDate()\"\n [selected]=\"selectedDates\"\n (selectedChange)=\"updateDateRangeSelection($event)\"\n (monthSelected)=\"monthSelected('firstCalendarView')\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n />\n </div>\n <div class=\"second-view\">\n <mat-calendar\n id=\"secondCalendarView\"\n #secondCalendarView\n [startAt]=\"secondViewStartDate()\"\n [minDate]=\"secondViewMinDate()\"\n [maxDate]=\"maxDate\"\n [selected]=\"selectedDates\"\n (selectedChange)=\"updateDateRangeSelection($event)\"\n (monthSelected)=\"monthSelected('secondCalendarView')\"\n />\n </div>\n</div>\n", styles: [".mat-calendar{min-width:250px}.calendar-container{width:100%;display:flex}.first-view,.second-view{flex:1 1 50%;min-width:0;margin-top:.5rem}@media(max-width:490px){.calendar-container{flex-direction:column}}\n"], dependencies: [{ kind: "component", type: MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7860
7111
|
}
|
|
7861
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
7112
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDateRangeCalendar, decorators: [{
|
|
7862
7113
|
type: Component,
|
|
7863
7114
|
args: [{ selector: 'acp-date-range-calendar', imports: [MatCalendar], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n * AcpDateRangeCalendar Component Template\n *\n * Dual-calendar view for date range selection with navigation controls.\n * @author AcontPlus S.A.S\n * @version 2.0.0\n -->\n<div class=\"calendar-container\">\n <div class=\"first-view\">\n <mat-calendar\n id=\"firstCalendarView\"\n #firstCalendarView\n [startAt]=\"firstViewStartDate()\"\n [selected]=\"selectedDates\"\n (selectedChange)=\"updateDateRangeSelection($event)\"\n (monthSelected)=\"monthSelected('firstCalendarView')\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n />\n </div>\n <div class=\"second-view\">\n <mat-calendar\n id=\"secondCalendarView\"\n #secondCalendarView\n [startAt]=\"secondViewStartDate()\"\n [minDate]=\"secondViewMinDate()\"\n [maxDate]=\"maxDate\"\n [selected]=\"selectedDates\"\n (selectedChange)=\"updateDateRangeSelection($event)\"\n (monthSelected)=\"monthSelected('secondCalendarView')\"\n />\n </div>\n</div>\n", styles: [".mat-calendar{min-width:250px}.calendar-container{width:100%;display:flex}.first-view,.second-view{flex:1 1 50%;min-width:0;margin-top:.5rem}@media(max-width:490px){.calendar-container{flex-direction:column}}\n"] }]
|
|
7864
7115
|
}], propDecorators: { minDate: [{
|
|
@@ -8494,10 +7745,10 @@ class AcpDateRangeInput {
|
|
|
8494
7745
|
}));
|
|
8495
7746
|
this._dateOptions.set(options);
|
|
8496
7747
|
}
|
|
8497
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
8498
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpDateRangeInput, isStandalone: true, selector: "acp-date-range-input", inputs: { inputLabel: { classPropertyName: "inputLabel", publicName: "inputLabel", isSignal: false, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showRangeRequired: { classPropertyName: "showRangeRequired", publicName: "showRangeRequired", isSignal: true, isRequired: false, transformFunction: null }, isRangeRequired: { classPropertyName: "isRangeRequired", publicName: "isRangeRequired", isSignal: true, isRequired: false, transformFunction: null }, staticOptionId: { classPropertyName: "staticOptionId", publicName: "staticOptionId", isSignal: false, isRequired: false, transformFunction: null }, dynamicOptionId: { classPropertyName: "dynamicOptionId", publicName: "dynamicOptionId", isSignal: false, isRequired: false, transformFunction: null }, calendarId: { classPropertyName: "calendarId", publicName: "calendarId", isSignal: false, isRequired: false, transformFunction: null }, enableDefaultOptions: { classPropertyName: "enableDefaultOptions", publicName: "enableDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: false, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: false, isRequired: false, transformFunction: null }, isShowStaticDefaultOptions: { classPropertyName: "isShowStaticDefaultOptions", publicName: "isShowStaticDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, hideDefaultOptions: { classPropertyName: "hideDefaultOptions", publicName: "hideDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayOffsetX: { classPropertyName: "cdkConnectedOverlayOffsetX", publicName: "cdkConnectedOverlayOffsetX", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayOffsetY: { classPropertyName: "cdkConnectedOverlayOffsetY", publicName: "cdkConnectedOverlayOffsetY", isSignal: false, isRequired: false, transformFunction: null }, listCdkConnectedOverlayOffsetY: { classPropertyName: "listCdkConnectedOverlayOffsetY", publicName: "listCdkConnectedOverlayOffsetY", isSignal: false, isRequired: false, transformFunction: null }, listCdkConnectedOverlayOffsetX: { classPropertyName: "listCdkConnectedOverlayOffsetX", publicName: "listCdkConnectedOverlayOffsetX", isSignal: false, isRequired: false, transformFunction: null }, selectedOptionIndex: { classPropertyName: "selectedOptionIndex", publicName: "selectedOptionIndex", isSignal: false, isRequired: false, transformFunction: null }, displaySelectedLabel: { classPropertyName: "displaySelectedLabel", publicName: "displaySelectedLabel", isSignal: false, isRequired: false, transformFunction: null }, displaySelectedExpression: { classPropertyName: "displaySelectedExpression", publicName: "displaySelectedExpression", isSignal: false, isRequired: false, transformFunction: null }, enableEditableDates: { classPropertyName: "enableEditableDates", publicName: "enableEditableDates", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayPush: { classPropertyName: "cdkConnectedOverlayPush", publicName: "cdkConnectedOverlayPush", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayPositions: { classPropertyName: "cdkConnectedOverlayPositions", publicName: "cdkConnectedOverlayPositions", isSignal: false, isRequired: false, transformFunction: null }, allowSingleDateSelection: { classPropertyName: "allowSingleDateSelection", publicName: "allowSingleDateSelection", isSignal: false, isRequired: false, transformFunction: null }, autoSelectOption: { classPropertyName: "autoSelectOption", publicName: "autoSelectOption", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, dateDropDownOptions: { classPropertyName: "dateDropDownOptions", publicName: "dateDropDownOptions", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dateSelectionChanged: "dateSelectionChanged", dateListOptions: "dateListOptions", rangeRequiredChange: "rangeRequiredChange" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "<!--\n AcpDateRangeInput Component Template\n @author AcontPlus S.A.S\n @version 1.0.0\n\n Comprehensive date range picker with predefined options, custom calendar selection,\n and support for human-readable date expressions.\n-->\n<div class=\"date-picker-main ndp-main\" cdkOverlayOrigin #trigger>\n <mat-form-field\n class=\"w-full\"\n [class]=\"{ 'display-hidden': isShowStaticDefaultOptions }\"\n (click)=\"toggleDateOptionSelectionList($event)\"\n >\n <mat-label (click)=\"toggleDateOptionSelectionList($event)\">{{ inputLabel }}</mat-label>\n <input\n matInput\n #dateInput\n class=\"cursor-pointer\"\n id=\"date-input-field\"\n (input)=\"onMainInputChange(dateInput)\"\n />\n <ng-container matSuffix>\n @if (showClearButton() && !!dateInput.value) {\n <button\n mat-icon-button\n class=\"cursor-pointer pe-0 ps-0\"\n matTooltip=\"Clear\"\n (click)=\"clearSelection($event)\"\n >\n <mat-icon>clear</mat-icon>\n </button>\n } @if (showCalendarIcon()) {\n <button mat-icon-button class=\"cursor-pointer\">\n <mat-icon>date_range</mat-icon>\n </button>\n } @if (showRangeRequired()) {\n <button\n mat-icon-button\n class=\"cursor-pointer\"\n [class.checked]=\"isRangeRequired()\"\n (click)=\"toggleRangeSelection($event)\"\n matTooltip=\"Rango de fechas obligatorio\"\n >\n <mat-icon [color]=\"isRangeRequired() ? 'accent' : ''\">\n {{ isRangeRequired() ? 'check_box' : 'check_box_outline_blank' }}\n </mat-icon>\n </button>\n }\n </ng-container>\n </mat-form-field>\n\n @if (dateDropDownOptions.length && isShowStaticDefaultOptions) {\n <ng-container\n *ngTemplateOutlet=\"\n dateOptionList;\n context: {\n $implicit: visibleOptions(),\n dateInput: dateInput,\n optionId: staticOptionId,\n className: 'w-full custom-ckd-container ndp-cdk-container range-input',\n }\n \"\n />\n }\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isDateOptionList\"\n [cdkConnectedOverlayPush]=\"cdkConnectedOverlayPush\"\n [cdkConnectedOverlayOffsetX]=\"listCdkConnectedOverlayOffsetX\"\n [cdkConnectedOverlayOffsetY]=\"listCdkConnectedOverlayOffsetY\"\n (backdropClick)=\"isDateOptionList = false\"\n >\n @if (dateDropDownOptions.length && !isShowStaticDefaultOptions) {\n <ng-container\n *ngTemplateOutlet=\"\n dateOptionList;\n context: {\n $implicit: visibleOptions(),\n dateInput: dateInput,\n optionId: dynamicOptionId,\n className: 'w-full custom-ckd-container ndp-cdk-container range-input',\n }\n \"\n />\n }\n </ng-template>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isCustomRange\"\n [cdkConnectedOverlayPush]=\"cdkConnectedOverlayPush\"\n [cdkConnectedOverlayPositions]=\"cdkConnectedOverlayPositions\"\n [cdkConnectedOverlayOffsetX]=\"cdkConnectedOverlayOffsetX\"\n [cdkConnectedOverlayOffsetY]=\"cdkConnectedOverlayOffsetY\"\n (backdropClick)=\"isCustomRange = false\"\n >\n <div\n class=\"custom-ckd-container ndp-cdk-container custom-calendar-container ndp-calendar-container\"\n [class]=\"{ 'without-default-opt': hideDefaultOptions }\"\n >\n <div class=\"row-1\">\n @if (!hideDefaultOptions) {\n <div class=\"pt-custom column-1\">\n <ng-container\n *ngTemplateOutlet=\"\n dateOptionList;\n context: {\n $implicit: visibleOptions(),\n dateInput: dateInput,\n }\n \"\n />\n </div>\n <div class=\"ndp-column-separator\"></div>\n }\n <div class=\"mt-2 column-2\">\n <acp-date-range-calendar\n [selectedDates]=\"selectedDates\"\n #calendar\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n (selectedDatesChange)=\"onCalendarSelectionChange($event)\"\n />\n </div>\n </div>\n <div class=\"row-2 br-top\">\n <div class=\"footer-content ndp-footer-content\">\n @if (enableEditableDates) {\n <form class=\"ndp-date-inputs\" [formGroup]=\"editableForm\">\n <mat-form-field class=\"ndp-date-field\" subscriptSizing=\"dynamic\">\n <mat-label>Start</mat-label>\n <input\n matInput\n formControlName=\"start\"\n placeholder=\"e.g. now-7d\"\n (blur)=\"commitEditableDates(calendar)\"\n (keydown.enter)=\"applyEditableDates(dateInput, calendar)\"\n />\n @if (editableForm.controls.start.hasError('required')) {\n <mat-error>Required</mat-error>\n } @else if (editableForm.controls.start.hasError('invalidDate')) {\n <mat-error>Invalid date or expression</mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"ndp-date-field\" subscriptSizing=\"dynamic\">\n <mat-label>End</mat-label>\n <input\n matInput\n formControlName=\"end\"\n placeholder=\"e.g. now\"\n (blur)=\"commitEditableDates(calendar)\"\n (keydown.enter)=\"applyEditableDates(dateInput, calendar)\"\n />\n @if (editableForm.controls.end.hasError('required')) {\n <mat-error>Required</mat-error>\n } @else if (editableForm.controls.end.hasError('invalidDate')) {\n <mat-error>Invalid date or expression</mat-error>\n } @else if (editableForm.hasError('rangeOrder')) {\n <mat-error>Start must be before end</mat-error>\n }\n </mat-form-field>\n </form>\n } @else {\n <span id=\"range-label-text\" class=\"ndp-range-label-text\">\n {{ calendar?.selectedDates?.start | date: dateFormat }} @if\n (calendar?.selectedDates?.end) {\n <span> - {{ calendar.selectedDates?.end | date: dateFormat }} </span>\n }\n </span>\n }\n <div class=\"buttons\">\n <acp-button\n type=\"button\"\n variant=\"danger\"\n matStyle=\"filled\"\n (handleClick)=\"isCustomRange = false\"\n >Cancelar</acp-button\n >\n <acp-button\n type=\"button\"\n variant=\"primary\"\n matStyle=\"filled\"\n [class.disabled]=\"\n enableEditableDates\n ? editableForm.invalid\n : !(calendar?.selectedDates?.start && calendar?.selectedDates?.end)\n \"\n (handleClick)=\"\n enableEditableDates && commitEditableDates(calendar);\n updateCustomRange(dateInput, calendar.selectedDates)\n \"\n >\n Aplicar \n </acp-button>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n</div>\n\n<ng-template\n #dateOptionList\n let-options\n let-input=\"dateInput\"\n let-optionId=\"optionId\"\n let-className=\"className\"\n>\n <mat-action-list [ngClass]=\"className\" [id]=\"optionId\">\n @for (option of options; track option.optionLabel) {\n <mat-list-item [activated]=\"option.isSelected\" (click)=\"updateSelection(option, input)\">\n {{ option.optionLabel }}\n </mat-list-item>\n }\n </mat-action-list>\n</ng-template>\n", styles: ["::ng-deep .cdk-overlay-dark-backdrop{background:none}mat-list-item.mat-mdc-list-item{height:40px}mat-list-item.mdc-list-item--activated{background-color:var(--ndp-selected-option-bg, var(--mat-sys-secondary-container, rgba(0, 0, 0, .08)))}::ng-deep .cdk-overlay-pane:has(.custom-ckd-container),::ng-deep .cdk-overlay-pane:has(.ndp-cdk-container){width:100%;background-color:var(--mat-sys-surface-container);max-height:100vh;overflow-y:auto;overflow-x:hidden;max-width:700px;margin-top:-22px;border:1px solid var(--mat-sys-surface-container)}::ng-deep .cdk-overlay-pane:has(.range-input){max-width:250px}.br-top{border-top:1px solid var(--mat-sys-surface-container)}.br-right{border-right:1px solid var(--mat-sys-surface-container)}.disabled{pointer-events:none;opacity:.5}.mat-button,.mdc-button{font-family:var(--mat-list-list-item-label-text-font);line-height:var(--mat-list-list-item-label-text-line-height);font-size:var(--mat-list-list-item-label-text-size);font-weight:var(--mat-list-list-item-label-text-weight);letter-spacing:var(--mat-list-list-item-label-text-tracking)}.w-full{width:100%}.display-hidden{display:none}.custom-calendar-container,.ndp-calendar-container{width:100%}.row-1,.row-2{width:100%;box-sizing:border-box}.row-1{display:flex;align-items:stretch}.row-2{padding:16px}.ndp-column-separator{flex:0 0 1px;background-color:var(--mat-sys-surface-container)}.footer-content,.ndp-footer-content{align-items:center;display:flex;text-align:right;justify-content:end;gap:16px;text-overflow:ellipsis}.footer-content .buttons,.ndp-footer-content .buttons{display:flex;gap:8px}.ndp-date-inputs{display:flex;gap:8px;margin-right:auto;align-items:flex-start}.ndp-date-field{width:150px}.column-1{flex:0 0 25%;overflow:auto}.column-2{flex:1 1 auto;min-width:0}.without-default-opt .column-1{display:none}@media(max-width:400px){.footer-content,.ndp-footer-content{display:block}.footer-content .buttons,.ndp-footer-content .buttons{justify-content:flex-end;margin-top:20px}#range-label-text{margin-right:1.5rem}}@media(max-width:650px){.row-1{flex-direction:column}.column-1{flex-basis:auto}.column-separator{display:none}}.pe-0{padding-right:0}.ps-0{padding-left:0}button.checked{color:var(--mat-sys-primary);border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i6.MatActionList, selector: "mat-action-list", exportAs: ["matActionList"] }, { kind: "component", type: i6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AcpDateRangeCalendar, selector: "acp-date-range-calendar", inputs: ["minDate", "maxDate", "selectedDates"], outputs: ["selectedDatesChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Button, selector: "acp-button", inputs: ["variant", "text", "icon", "disabled", "type", "matStyle", "customClass", "reportFormat", "extended", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7748
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDateRangeInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7749
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpDateRangeInput, isStandalone: true, selector: "acp-date-range-input", inputs: { inputLabel: { classPropertyName: "inputLabel", publicName: "inputLabel", isSignal: false, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showRangeRequired: { classPropertyName: "showRangeRequired", publicName: "showRangeRequired", isSignal: true, isRequired: false, transformFunction: null }, isRangeRequired: { classPropertyName: "isRangeRequired", publicName: "isRangeRequired", isSignal: true, isRequired: false, transformFunction: null }, staticOptionId: { classPropertyName: "staticOptionId", publicName: "staticOptionId", isSignal: false, isRequired: false, transformFunction: null }, dynamicOptionId: { classPropertyName: "dynamicOptionId", publicName: "dynamicOptionId", isSignal: false, isRequired: false, transformFunction: null }, calendarId: { classPropertyName: "calendarId", publicName: "calendarId", isSignal: false, isRequired: false, transformFunction: null }, enableDefaultOptions: { classPropertyName: "enableDefaultOptions", publicName: "enableDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: false, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: false, isRequired: false, transformFunction: null }, isShowStaticDefaultOptions: { classPropertyName: "isShowStaticDefaultOptions", publicName: "isShowStaticDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, hideDefaultOptions: { classPropertyName: "hideDefaultOptions", publicName: "hideDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayOffsetX: { classPropertyName: "cdkConnectedOverlayOffsetX", publicName: "cdkConnectedOverlayOffsetX", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayOffsetY: { classPropertyName: "cdkConnectedOverlayOffsetY", publicName: "cdkConnectedOverlayOffsetY", isSignal: false, isRequired: false, transformFunction: null }, listCdkConnectedOverlayOffsetY: { classPropertyName: "listCdkConnectedOverlayOffsetY", publicName: "listCdkConnectedOverlayOffsetY", isSignal: false, isRequired: false, transformFunction: null }, listCdkConnectedOverlayOffsetX: { classPropertyName: "listCdkConnectedOverlayOffsetX", publicName: "listCdkConnectedOverlayOffsetX", isSignal: false, isRequired: false, transformFunction: null }, selectedOptionIndex: { classPropertyName: "selectedOptionIndex", publicName: "selectedOptionIndex", isSignal: false, isRequired: false, transformFunction: null }, displaySelectedLabel: { classPropertyName: "displaySelectedLabel", publicName: "displaySelectedLabel", isSignal: false, isRequired: false, transformFunction: null }, displaySelectedExpression: { classPropertyName: "displaySelectedExpression", publicName: "displaySelectedExpression", isSignal: false, isRequired: false, transformFunction: null }, enableEditableDates: { classPropertyName: "enableEditableDates", publicName: "enableEditableDates", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayPush: { classPropertyName: "cdkConnectedOverlayPush", publicName: "cdkConnectedOverlayPush", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayPositions: { classPropertyName: "cdkConnectedOverlayPositions", publicName: "cdkConnectedOverlayPositions", isSignal: false, isRequired: false, transformFunction: null }, allowSingleDateSelection: { classPropertyName: "allowSingleDateSelection", publicName: "allowSingleDateSelection", isSignal: false, isRequired: false, transformFunction: null }, autoSelectOption: { classPropertyName: "autoSelectOption", publicName: "autoSelectOption", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, dateDropDownOptions: { classPropertyName: "dateDropDownOptions", publicName: "dateDropDownOptions", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dateSelectionChanged: "dateSelectionChanged", dateListOptions: "dateListOptions", rangeRequiredChange: "rangeRequiredChange" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "<!--\n AcpDateRangeInput Component Template\n @author AcontPlus S.A.S\n @version 1.0.0\n\n Comprehensive date range picker with predefined options, custom calendar selection,\n and support for human-readable date expressions.\n-->\n<div class=\"date-picker-main ndp-main\" cdkOverlayOrigin #trigger>\n <mat-form-field\n class=\"w-full\"\n [class]=\"{ 'display-hidden': isShowStaticDefaultOptions }\"\n (click)=\"toggleDateOptionSelectionList($event)\"\n >\n <mat-label (click)=\"toggleDateOptionSelectionList($event)\">{{ inputLabel }}</mat-label>\n <input\n matInput\n #dateInput\n class=\"cursor-pointer\"\n id=\"date-input-field\"\n (input)=\"onMainInputChange(dateInput)\"\n />\n <ng-container matSuffix>\n @if (showClearButton() && !!dateInput.value) {\n <button\n mat-icon-button\n class=\"cursor-pointer pe-0 ps-0\"\n matTooltip=\"Clear\"\n (click)=\"clearSelection($event)\"\n >\n <mat-icon>clear</mat-icon>\n </button>\n } @if (showCalendarIcon()) {\n <button mat-icon-button class=\"cursor-pointer\">\n <mat-icon>date_range</mat-icon>\n </button>\n } @if (showRangeRequired()) {\n <button\n mat-icon-button\n class=\"cursor-pointer\"\n [class.checked]=\"isRangeRequired()\"\n (click)=\"toggleRangeSelection($event)\"\n matTooltip=\"Rango de fechas obligatorio\"\n >\n <mat-icon [color]=\"isRangeRequired() ? 'accent' : ''\">\n {{ isRangeRequired() ? 'check_box' : 'check_box_outline_blank' }}\n </mat-icon>\n </button>\n }\n </ng-container>\n </mat-form-field>\n\n @if (dateDropDownOptions.length && isShowStaticDefaultOptions) {\n <ng-container\n *ngTemplateOutlet=\"\n dateOptionList;\n context: {\n $implicit: visibleOptions(),\n dateInput: dateInput,\n optionId: staticOptionId,\n className: 'w-full custom-ckd-container ndp-cdk-container range-input',\n }\n \"\n />\n }\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isDateOptionList\"\n [cdkConnectedOverlayPush]=\"cdkConnectedOverlayPush\"\n [cdkConnectedOverlayOffsetX]=\"listCdkConnectedOverlayOffsetX\"\n [cdkConnectedOverlayOffsetY]=\"listCdkConnectedOverlayOffsetY\"\n (backdropClick)=\"isDateOptionList = false\"\n >\n @if (dateDropDownOptions.length && !isShowStaticDefaultOptions) {\n <ng-container\n *ngTemplateOutlet=\"\n dateOptionList;\n context: {\n $implicit: visibleOptions(),\n dateInput: dateInput,\n optionId: dynamicOptionId,\n className: 'w-full custom-ckd-container ndp-cdk-container range-input',\n }\n \"\n />\n }\n </ng-template>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isCustomRange\"\n [cdkConnectedOverlayPush]=\"cdkConnectedOverlayPush\"\n [cdkConnectedOverlayPositions]=\"cdkConnectedOverlayPositions\"\n [cdkConnectedOverlayOffsetX]=\"cdkConnectedOverlayOffsetX\"\n [cdkConnectedOverlayOffsetY]=\"cdkConnectedOverlayOffsetY\"\n (backdropClick)=\"isCustomRange = false\"\n >\n <div\n class=\"custom-ckd-container ndp-cdk-container custom-calendar-container ndp-calendar-container\"\n [class]=\"{ 'without-default-opt': hideDefaultOptions }\"\n >\n <div class=\"row-1\">\n @if (!hideDefaultOptions) {\n <div class=\"pt-custom column-1\">\n <ng-container\n *ngTemplateOutlet=\"\n dateOptionList;\n context: {\n $implicit: visibleOptions(),\n dateInput: dateInput,\n }\n \"\n />\n </div>\n <div class=\"ndp-column-separator\"></div>\n }\n <div class=\"mt-2 column-2\">\n <acp-date-range-calendar\n [selectedDates]=\"selectedDates\"\n #calendar\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n (selectedDatesChange)=\"onCalendarSelectionChange($event)\"\n />\n </div>\n </div>\n <div class=\"row-2 br-top\">\n <div class=\"footer-content ndp-footer-content\">\n @if (enableEditableDates) {\n <form class=\"ndp-date-inputs\" [formGroup]=\"editableForm\">\n <mat-form-field class=\"ndp-date-field\" subscriptSizing=\"dynamic\">\n <mat-label>Start</mat-label>\n <input\n matInput\n formControlName=\"start\"\n placeholder=\"e.g. now-7d\"\n (blur)=\"commitEditableDates(calendar)\"\n (keydown.enter)=\"applyEditableDates(dateInput, calendar)\"\n />\n @if (editableForm.controls.start.hasError('required')) {\n <mat-error>Required</mat-error>\n } @else if (editableForm.controls.start.hasError('invalidDate')) {\n <mat-error>Invalid date or expression</mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"ndp-date-field\" subscriptSizing=\"dynamic\">\n <mat-label>End</mat-label>\n <input\n matInput\n formControlName=\"end\"\n placeholder=\"e.g. now\"\n (blur)=\"commitEditableDates(calendar)\"\n (keydown.enter)=\"applyEditableDates(dateInput, calendar)\"\n />\n @if (editableForm.controls.end.hasError('required')) {\n <mat-error>Required</mat-error>\n } @else if (editableForm.controls.end.hasError('invalidDate')) {\n <mat-error>Invalid date or expression</mat-error>\n } @else if (editableForm.hasError('rangeOrder')) {\n <mat-error>Start must be before end</mat-error>\n }\n </mat-form-field>\n </form>\n } @else {\n <span id=\"range-label-text\" class=\"ndp-range-label-text\">\n {{ calendar?.selectedDates?.start | date: dateFormat }} @if\n (calendar?.selectedDates?.end) {\n <span> - {{ calendar.selectedDates?.end | date: dateFormat }} </span>\n }\n </span>\n }\n <div class=\"buttons\">\n <acp-button\n type=\"button\"\n variant=\"danger\"\n matStyle=\"filled\"\n (handleClick)=\"isCustomRange = false\"\n >Cancelar</acp-button\n >\n <acp-button\n type=\"button\"\n variant=\"primary\"\n matStyle=\"filled\"\n [class.disabled]=\"\n enableEditableDates\n ? editableForm.invalid\n : !(calendar?.selectedDates?.start && calendar?.selectedDates?.end)\n \"\n (handleClick)=\"\n enableEditableDates && commitEditableDates(calendar);\n updateCustomRange(dateInput, calendar.selectedDates)\n \"\n >\n Aplicar \n </acp-button>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n</div>\n\n<ng-template\n #dateOptionList\n let-options\n let-input=\"dateInput\"\n let-optionId=\"optionId\"\n let-className=\"className\"\n>\n <mat-action-list [ngClass]=\"className\" [id]=\"optionId\">\n @for (option of options; track option.optionLabel) {\n <mat-list-item [activated]=\"option.isSelected\" (click)=\"updateSelection(option, input)\">\n {{ option.optionLabel }}\n </mat-list-item>\n }\n </mat-action-list>\n</ng-template>\n", styles: ["::ng-deep .cdk-overlay-dark-backdrop{background:none}mat-list-item.mat-mdc-list-item{height:40px}mat-list-item.mdc-list-item--activated{background-color:var(--ndp-selected-option-bg, var(--mat-sys-secondary-container, rgba(0, 0, 0, .08)))}::ng-deep .cdk-overlay-pane:has(.custom-ckd-container),::ng-deep .cdk-overlay-pane:has(.ndp-cdk-container){width:100%;background-color:var(--mat-sys-surface-container);max-height:100vh;overflow-y:auto;overflow-x:hidden;max-width:700px;margin-top:-22px;border:1px solid var(--mat-sys-surface-container)}::ng-deep .cdk-overlay-pane:has(.range-input){max-width:250px}.br-top{border-top:1px solid var(--mat-sys-surface-container)}.br-right{border-right:1px solid var(--mat-sys-surface-container)}.disabled{pointer-events:none;opacity:.5}.mat-button,.mdc-button{font-family:var(--mat-list-list-item-label-text-font);line-height:var(--mat-list-list-item-label-text-line-height);font-size:var(--mat-list-list-item-label-text-size);font-weight:var(--mat-list-list-item-label-text-weight);letter-spacing:var(--mat-list-list-item-label-text-tracking)}.w-full{width:100%}.display-hidden{display:none}.custom-calendar-container,.ndp-calendar-container{width:100%}.row-1,.row-2{width:100%;box-sizing:border-box}.row-1{display:flex;align-items:stretch}.row-2{padding:16px}.ndp-column-separator{flex:0 0 1px;background-color:var(--mat-sys-surface-container)}.footer-content,.ndp-footer-content{align-items:center;display:flex;text-align:right;justify-content:end;gap:16px;text-overflow:ellipsis}.footer-content .buttons,.ndp-footer-content .buttons{display:flex;gap:8px}.ndp-date-inputs{display:flex;gap:8px;margin-right:auto;align-items:flex-start}.ndp-date-field{width:150px}.column-1{flex:0 0 25%;overflow:auto}.column-2{flex:1 1 auto;min-width:0}.without-default-opt .column-1{display:none}@media(max-width:400px){.footer-content,.ndp-footer-content{display:block}.footer-content .buttons,.ndp-footer-content .buttons{justify-content:flex-end;margin-top:20px}#range-label-text{margin-right:1.5rem}}@media(max-width:650px){.row-1{flex-direction:column}.column-1{flex-basis:auto}.column-separator{display:none}}.pe-0{padding-right:0}.ps-0{padding-left:0}button.checked{color:var(--mat-sys-primary);border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i6.MatActionList, selector: "mat-action-list", exportAs: ["matActionList"] }, { kind: "component", type: i6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AcpDateRangeCalendar, selector: "acp-date-range-calendar", inputs: ["minDate", "maxDate", "selectedDates"], outputs: ["selectedDatesChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Button, selector: "acp-button", inputs: ["variant", "text", "icon", "disabled", "type", "matStyle", "customClass", "reportFormat", "extended", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8499
7750
|
}
|
|
8500
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
7751
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDateRangeInput, decorators: [{
|
|
8501
7752
|
type: Component,
|
|
8502
7753
|
args: [{ selector: 'acp-date-range-input', imports: [
|
|
8503
7754
|
FormsModule,
|
|
@@ -8798,8 +8049,8 @@ class AcpCheckboxGroup {
|
|
|
8798
8049
|
_trackBy = (index, item) => {
|
|
8799
8050
|
return this.trackBy ? this.trackBy(index, item) : item;
|
|
8800
8051
|
};
|
|
8801
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
8802
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0
|
|
8052
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCheckboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8053
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpCheckboxGroup, isStandalone: true, selector: "acp-checkbox-group", inputs: { trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: false, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { selectionChange: "selectionChange" }, host: { classAttribute: "acp-checkbox-group" }, providers: [
|
|
8803
8054
|
{
|
|
8804
8055
|
provide: NG_VALUE_ACCESSOR,
|
|
8805
8056
|
useExisting: forwardRef(() => AcpCheckboxGroup),
|
|
@@ -8807,7 +8058,7 @@ class AcpCheckboxGroup {
|
|
|
8807
8058
|
},
|
|
8808
8059
|
], queries: [{ propertyName: "_checkboxes", predicate: i0.forwardRef(() => MatCheckbox), descendants: true }], exportAs: ["acpCheckboxGroup"], ngImport: i0, template: "@if (showSelectAll) {\n<mat-checkbox\n class=\"acp-checkbox-master\"\n [checked]=\"selectAll\"\n [(indeterminate)]=\"selectAllIndeterminate\"\n [disabled]=\"disabled\"\n (change)=\"_updateMasterCheckboxState($event, -1)\"\n>\n {{ selectAllLabel }}\n</mat-checkbox>\n} @for (option of items; track _trackBy($index, option); let i = $index) {\n<mat-checkbox\n class=\"acp-checkbox-normal\"\n [(ngModel)]=\"option.checked\"\n [aria-describedby]=\"option.ariaDescribedby\"\n [aria-label]=\"option.ariaLabel\"\n [aria-labelledby]=\"option.ariaLabelledby\"\n [color]=\"option.color\"\n [disabled]=\"option.disabled || disabled\"\n [disableRipple]=\"option.disableRipple\"\n [labelPosition]=\"option.labelPosition\"\n [required]=\"option.required\"\n (change)=\"_updateNormalCheckboxState($event, i)\"\n>\n {{ option[bindLabel()] | toObservable | async }}\n</mat-checkbox>\n}\n", styles: [".acp-checkbox-group{display:flex;flex-direction:column;gap:.5rem}.acp-checkbox-group .acp-checkbox-master{margin-bottom:.5rem;font-weight:500}.acp-checkbox-group .acp-checkbox-normal{margin-left:1rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8809
8060
|
}
|
|
8810
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
8061
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCheckboxGroup, decorators: [{
|
|
8811
8062
|
type: Component,
|
|
8812
8063
|
args: [{ selector: 'acp-checkbox-group', exportAs: 'acpCheckboxGroup', host: {
|
|
8813
8064
|
class: 'acp-checkbox-group',
|
|
@@ -8837,6 +8088,232 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
|
|
|
8837
8088
|
args: [{ transform: booleanAttribute }]
|
|
8838
8089
|
}], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
|
|
8839
8090
|
|
|
8091
|
+
const KPI_CARD_TREND_CONFIGS = {
|
|
8092
|
+
up: {
|
|
8093
|
+
icon: 'trending_up',
|
|
8094
|
+
color: 'success',
|
|
8095
|
+
ariaLabel: 'Trending up',
|
|
8096
|
+
},
|
|
8097
|
+
down: {
|
|
8098
|
+
icon: 'trending_down',
|
|
8099
|
+
color: 'error',
|
|
8100
|
+
ariaLabel: 'Trending down',
|
|
8101
|
+
},
|
|
8102
|
+
neutral: {
|
|
8103
|
+
icon: 'trending_flat',
|
|
8104
|
+
color: 'info',
|
|
8105
|
+
ariaLabel: 'Neutral trend',
|
|
8106
|
+
},
|
|
8107
|
+
none: {
|
|
8108
|
+
icon: '',
|
|
8109
|
+
color: 'neutral',
|
|
8110
|
+
ariaLabel: '',
|
|
8111
|
+
},
|
|
8112
|
+
};
|
|
8113
|
+
function formatValue(value, format) {
|
|
8114
|
+
if (typeof value === 'string')
|
|
8115
|
+
return value;
|
|
8116
|
+
if (!format)
|
|
8117
|
+
return value.toString();
|
|
8118
|
+
switch (format) {
|
|
8119
|
+
case 'currency':
|
|
8120
|
+
return new Intl.NumberFormat('en-US', {
|
|
8121
|
+
style: 'currency',
|
|
8122
|
+
currency: 'USD',
|
|
8123
|
+
minimumFractionDigits: 0,
|
|
8124
|
+
maximumFractionDigits: 0,
|
|
8125
|
+
}).format(value);
|
|
8126
|
+
case 'percent':
|
|
8127
|
+
return `${value.toFixed(1)}%`;
|
|
8128
|
+
case 'number':
|
|
8129
|
+
return new Intl.NumberFormat('en-US').format(value);
|
|
8130
|
+
case 'decimal':
|
|
8131
|
+
return value.toFixed(2);
|
|
8132
|
+
default:
|
|
8133
|
+
return value.toString();
|
|
8134
|
+
}
|
|
8135
|
+
}
|
|
8136
|
+
|
|
8137
|
+
class AcpKpiCard {
|
|
8138
|
+
// Content
|
|
8139
|
+
title = input(/* @ts-ignore */
|
|
8140
|
+
...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
8141
|
+
subtitle = input(/* @ts-ignore */
|
|
8142
|
+
...(ngDevMode ? [undefined, { debugName: "subtitle" }] : /* istanbul ignore next */ []));
|
|
8143
|
+
value = input(/* @ts-ignore */
|
|
8144
|
+
...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
8145
|
+
description = input(/* @ts-ignore */
|
|
8146
|
+
...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
|
|
8147
|
+
footer = input(/* @ts-ignore */
|
|
8148
|
+
...(ngDevMode ? [undefined, { debugName: "footer" }] : /* istanbul ignore next */ []));
|
|
8149
|
+
// Styling
|
|
8150
|
+
variant = input('default', /* @ts-ignore */
|
|
8151
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
8152
|
+
color = input('primary', /* @ts-ignore */
|
|
8153
|
+
...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
8154
|
+
size = input('md', /* @ts-ignore */
|
|
8155
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
8156
|
+
// Icons & Avatar
|
|
8157
|
+
icon = input(/* @ts-ignore */
|
|
8158
|
+
...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
8159
|
+
svgIcon = input(/* @ts-ignore */
|
|
8160
|
+
...(ngDevMode ? [undefined, { debugName: "svgIcon" }] : /* istanbul ignore next */ []));
|
|
8161
|
+
avatar = input(/* @ts-ignore */
|
|
8162
|
+
...(ngDevMode ? [undefined, { debugName: "avatar" }] : /* istanbul ignore next */ []));
|
|
8163
|
+
avatarInitials = input(/* @ts-ignore */
|
|
8164
|
+
...(ngDevMode ? [undefined, { debugName: "avatarInitials" }] : /* istanbul ignore next */ []));
|
|
8165
|
+
// Trend & Metrics
|
|
8166
|
+
trend = input('none', /* @ts-ignore */
|
|
8167
|
+
...(ngDevMode ? [{ debugName: "trend" }] : /* istanbul ignore next */ []));
|
|
8168
|
+
percentage = input(/* @ts-ignore */
|
|
8169
|
+
...(ngDevMode ? [undefined, { debugName: "percentage" }] : /* istanbul ignore next */ []));
|
|
8170
|
+
percentageFormat = input('percent', /* @ts-ignore */
|
|
8171
|
+
...(ngDevMode ? [{ debugName: "percentageFormat" }] : /* istanbul ignore next */ []));
|
|
8172
|
+
// Progress
|
|
8173
|
+
progress = input(/* @ts-ignore */
|
|
8174
|
+
...(ngDevMode ? [undefined, { debugName: "progress" }] : /* istanbul ignore next */ []));
|
|
8175
|
+
progressColor = input('primary', /* @ts-ignore */
|
|
8176
|
+
...(ngDevMode ? [{ debugName: "progressColor" }] : /* istanbul ignore next */ []));
|
|
8177
|
+
// States
|
|
8178
|
+
loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
8179
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
8180
|
+
clickable = input(false, { ...(ngDevMode ? { debugName: "clickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
8181
|
+
selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
8182
|
+
// Navigation
|
|
8183
|
+
routerLink = input(null, /* @ts-ignore */
|
|
8184
|
+
...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
|
|
8185
|
+
href = input(null, /* @ts-ignore */
|
|
8186
|
+
...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
|
|
8187
|
+
// Aria
|
|
8188
|
+
ariaLabel = input(/* @ts-ignore */
|
|
8189
|
+
...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
8190
|
+
// Tooltip
|
|
8191
|
+
tooltip = input(/* @ts-ignore */
|
|
8192
|
+
...(ngDevMode ? [undefined, { debugName: "tooltip" }] : /* istanbul ignore next */ []));
|
|
8193
|
+
// Outputs
|
|
8194
|
+
clicked = output();
|
|
8195
|
+
actionClicked = output();
|
|
8196
|
+
// Internal state for hover
|
|
8197
|
+
isHovered = signal(false, /* @ts-ignore */
|
|
8198
|
+
...(ngDevMode ? [{ debugName: "isHovered" }] : /* istanbul ignore next */ []));
|
|
8199
|
+
// Content children
|
|
8200
|
+
iconTemplate = contentChild('icon', { ...(ngDevMode ? { debugName: "iconTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
8201
|
+
avatarTemplate = contentChild('avatar', { ...(ngDevMode ? { debugName: "avatarTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
8202
|
+
footerTemplate = contentChild('footer', { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
8203
|
+
actionsTemplate = contentChild('actions', { ...(ngDevMode ? { debugName: "actionsTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
8204
|
+
// Computed properties
|
|
8205
|
+
isTrending = computed(() => this.trend() !== 'none', /* @ts-ignore */
|
|
8206
|
+
...(ngDevMode ? [{ debugName: "isTrending" }] : /* istanbul ignore next */ []));
|
|
8207
|
+
trendConfig = computed(() => KPI_CARD_TREND_CONFIGS[this.trend()], /* @ts-ignore */
|
|
8208
|
+
...(ngDevMode ? [{ debugName: "trendConfig" }] : /* istanbul ignore next */ []));
|
|
8209
|
+
// Effective icon shows trend icon if trending, otherwise shows provided icon
|
|
8210
|
+
effectiveIcon = computed(() => {
|
|
8211
|
+
if (this.isTrending())
|
|
8212
|
+
return this.trendConfig().icon;
|
|
8213
|
+
return this.icon();
|
|
8214
|
+
}, /* @ts-ignore */
|
|
8215
|
+
...(ngDevMode ? [{ debugName: "effectiveIcon" }] : /* istanbul ignore next */ []));
|
|
8216
|
+
// Trend color is only for the trend indicator (icon and percentage)
|
|
8217
|
+
trendColor = computed(() => {
|
|
8218
|
+
if (this.isTrending())
|
|
8219
|
+
return this.trendConfig().color;
|
|
8220
|
+
return this.color();
|
|
8221
|
+
}, /* @ts-ignore */
|
|
8222
|
+
...(ngDevMode ? [{ debugName: "trendColor" }] : /* istanbul ignore next */ []));
|
|
8223
|
+
hasHeader = computed(() => !!(this.title() || this.subtitle() || this.icon() || this.avatar()), /* @ts-ignore */
|
|
8224
|
+
...(ngDevMode ? [{ debugName: "hasHeader" }] : /* istanbul ignore next */ []));
|
|
8225
|
+
hasFooter = computed(() => !!(this.footer() || this.footerTemplate() || this.progress() !== undefined), /* @ts-ignore */
|
|
8226
|
+
...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
|
|
8227
|
+
hasActions = computed(() => !!this.actionsTemplate(), /* @ts-ignore */
|
|
8228
|
+
...(ngDevMode ? [{ debugName: "hasActions" }] : /* istanbul ignore next */ []));
|
|
8229
|
+
hostClasses = computed(() => {
|
|
8230
|
+
const classes = [
|
|
8231
|
+
'acp-kpi-card',
|
|
8232
|
+
`acp-kpi-card--${this.variant()}`,
|
|
8233
|
+
`acp-kpi-card--${this.color()}`,
|
|
8234
|
+
`acp-kpi-card--${this.size()}`,
|
|
8235
|
+
];
|
|
8236
|
+
if (this.clickable())
|
|
8237
|
+
classes.push('acp-kpi-card--clickable');
|
|
8238
|
+
if (this.disabled())
|
|
8239
|
+
classes.push('acp-kpi-card--disabled');
|
|
8240
|
+
if (this.loading())
|
|
8241
|
+
classes.push('acp-kpi-card--loading');
|
|
8242
|
+
if (this.selected())
|
|
8243
|
+
classes.push('acp-kpi-card--selected');
|
|
8244
|
+
return classes.join(' ');
|
|
8245
|
+
}, /* @ts-ignore */
|
|
8246
|
+
...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
8247
|
+
onCardClick() {
|
|
8248
|
+
if (!this.disabled() && this.clickable()) {
|
|
8249
|
+
this.clicked.emit();
|
|
8250
|
+
}
|
|
8251
|
+
}
|
|
8252
|
+
onActionClick(action, event) {
|
|
8253
|
+
event.stopPropagation();
|
|
8254
|
+
this.actionClicked.emit(action);
|
|
8255
|
+
}
|
|
8256
|
+
onMouseEnter() {
|
|
8257
|
+
if (this.clickable()) {
|
|
8258
|
+
this.isHovered.set(true);
|
|
8259
|
+
}
|
|
8260
|
+
}
|
|
8261
|
+
onMouseLeave() {
|
|
8262
|
+
this.isHovered.set(false);
|
|
8263
|
+
}
|
|
8264
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpKpiCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8265
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpKpiCard, isStandalone: true, selector: "acp-kpi-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, avatarInitials: { classPropertyName: "avatarInitials", publicName: "avatarInitials", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, percentage: { classPropertyName: "percentage", publicName: "percentage", isSignal: true, isRequired: false, transformFunction: null }, percentageFormat: { classPropertyName: "percentageFormat", publicName: "percentageFormat", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, progressColor: { classPropertyName: "progressColor", publicName: "progressColor", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", actionClicked: "actionClicked" }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ["icon"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "avatarTemplate", first: true, predicate: ["avatar"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actions"], descendants: true, read: TemplateRef, isSignal: true }], exportAs: ["acpKpiCard"], ngImport: i0, template: "<mat-card\n class=\"acp-kpi-card__card\"\n [routerLink]=\"routerLink()\"\n [attr.aria-label]=\"ariaLabel()\"\n [matTooltip]=\"tooltip()\"\n [matTooltipDisabled]=\"!tooltip()\"\n (click)=\"onCardClick()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n>\n <!-- Loading Skeleton -->\n @if (loading()) {\n <div class=\"acp-kpi-card__skeleton\">\n <div class=\"acp-kpi-card__skeleton-header\"></div>\n <div class=\"acp-kpi-card__skeleton-value\"></div>\n <div class=\"acp-kpi-card__skeleton-text\"></div>\n </div>\n } @else {\n <!-- Header -->\n @if (hasHeader()) {\n <mat-card-header class=\"acp-kpi-card__header\">\n <div class=\"acp-kpi-card__header-content\">\n <!-- Icon or Avatar -->\n <div class=\"acp-kpi-card__icon-container\">\n @if (iconTemplate()) {\n <ng-container [ngTemplateOutlet]=\"iconTemplate()!\"></ng-container>\n } @else if (svgIcon()) {\n <mat-icon class=\"acp-kpi-card__icon\" [svgIcon]=\"svgIcon()!\" aria-hidden=\"true\"></mat-icon>\n } @else if (effectiveIcon()) {\n <mat-icon class=\"acp-kpi-card__icon\" aria-hidden=\"true\">{{ effectiveIcon() }}</mat-icon>\n } @else if (avatarTemplate()) {\n <div class=\"acp-kpi-card__avatar\">\n <ng-container [ngTemplateOutlet]=\"avatarTemplate()!\"></ng-container>\n </div>\n } @else if (avatar()) {\n <img class=\"acp-kpi-card__avatar-image\" [src]=\"avatar()\" [alt]=\"title() || 'Avatar'\" />\n } @else if (avatarInitials()) {\n <div class=\"acp-kpi-card__avatar-initials\">{{ avatarInitials() }}</div>\n }\n </div>\n\n <!-- Title & Subtitle -->\n <div class=\"acp-kpi-card__title-container\">\n @if (title()) {\n <h3 class=\"acp-kpi-card__title\">{{ title() }}</h3>\n } @if (subtitle()) {\n <p class=\"acp-kpi-card__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n </div>\n\n <!-- Menu Button (optional) - Only show if actions template exists -->\n @if (hasActions()) {\n <button\n mat-icon-button\n [matMenuTriggerFor]=\"menu\"\n class=\"acp-kpi-card__menu-button\"\n aria-label=\"More options\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\" class=\"acp-kpi-card__menu\">\n <ng-container [ngTemplateOutlet]=\"actionsTemplate()!\"></ng-container>\n </mat-menu>\n }\n </mat-card-header>\n }\n\n <!-- Content -->\n <mat-card-content class=\"acp-kpi-card__content\">\n <!-- Main Value -->\n @if (value()) {\n <div class=\"acp-kpi-card__value-section\">\n <div class=\"acp-kpi-card__value\">{{ value() }}</div>\n\n <!-- Percentage & Trend -->\n @if (percentage() !== undefined) {\n <div class=\"acp-kpi-card__metric\">\n @if (isTrending()) {\n <mat-icon class=\"acp-kpi-card__trend-icon\" [attr.aria-label]=\"trendConfig().ariaLabel\">\n {{ trendConfig().icon }}\n </mat-icon>\n }\n <span class=\"acp-kpi-card__percentage\">\n {{ percentageFormat() === 'percent' ? (percentage() + '%') : percentage() }}\n </span>\n </div>\n }\n </div>\n }\n\n <!-- Description -->\n @if (description()) {\n <p class=\"acp-kpi-card__description\">{{ description() }}</p>\n }\n\n <!-- Progress Bar -->\n @if (progress() !== undefined) {\n <mat-progress-bar\n class=\"acp-kpi-card__progress\"\n mode=\"determinate\"\n [value]=\"progress()\"\n [color]=\"progressColor()\"\n ></mat-progress-bar>\n }\n </mat-card-content>\n\n <!-- Footer -->\n @if (hasFooter()) {\n <mat-divider></mat-divider>\n <div class=\"acp-kpi-card__footer\">\n @if (footerTemplate()) {\n <ng-container [ngTemplateOutlet]=\"footerTemplate()!\"></ng-container>\n } @else if (footer()) {\n <p class=\"acp-kpi-card__footer-text\">{{ footer() }}</p>\n }\n </div>\n } }\n</mat-card>\n", styles: [".acp-kpi-card{--acp-kpi-card-bg: var(--acp-kpi-card-primary-bg, var(--mat-sys-primary));--acp-kpi-card-fg: var(--acp-kpi-card-primary-color, var(--mat-sys-on-primary));display:flex;vertical-align:middle;width:100%;max-width:100%}.acp-kpi-card__card{width:100%;display:flex;flex-direction:column;border-radius:12px;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;background-color:#fff}.acp-kpi-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px;gap:12px}.acp-kpi-card__header-content{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.acp-kpi-card__icon-container{display:flex;align-items:center;justify-content:center;flex-shrink:0}.acp-kpi-card__icon{font-size:24px;width:24px;height:24px;color:var(--acp-kpi-card-fg)}.acp-kpi-card__avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--acp-kpi-card-bg) 30%,transparent);color:var(--acp-kpi-card-fg);font-weight:500;font-size:14px;flex-shrink:0}.acp-kpi-card__avatar-image{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}.acp-kpi-card__avatar-initials{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--acp-kpi-card-bg) 30%,transparent);color:var(--acp-kpi-card-fg);font-weight:500;font-size:14px;flex-shrink:0}.acp-kpi-card__title-container{flex:1;min-width:0}.acp-kpi-card__title{margin:0;font-size:14px;font-weight:500;letter-spacing:.25px;color:var(--acp-kpi-card-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acp-kpi-card__subtitle{margin:2px 0 0;font-size:12px;font-weight:400;letter-spacing:.4px;color:rgba(var(--acp-kpi-card-fg),.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acp-kpi-card__menu-button{flex-shrink:0;opacity:.7;transition:opacity .2s ease-in-out}.acp-kpi-card__menu-button:hover{opacity:1}.acp-kpi-card__menu-button:focus-visible{outline:2px solid currentColor;outline-offset:2px}.acp-kpi-card__menu{will-change:transform}.acp-kpi-card__content{flex:1;padding:16px;display:flex;flex-direction:column;gap:12px}.acp-kpi-card__value-section{display:flex;align-items:baseline;gap:8px}.acp-kpi-card__value{font-size:28px;font-weight:600;letter-spacing:-.5px;color:var(--acp-kpi-card-fg);line-height:1.2}.acp-kpi-card__metric{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:500;letter-spacing:.25px;color:rgba(var(--acp-kpi-card-fg),.8)}.acp-kpi-card__trend-icon{font-size:16px;width:16px;height:16px}.acp-kpi-card__percentage{white-space:nowrap}.acp-kpi-card.acp-kpi-card--success .acp-kpi-card__metric{color:var(--acp-kpi-card-success-color, light-dark(#ffffff, #013a00))}.acp-kpi-card.acp-kpi-card--success-light .acp-kpi-card__metric{color:var(--acp-kpi-card-success-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--warning .acp-kpi-card__metric{color:var(--acp-kpi-card-warning-color, light-dark(#ffffff, #502400))}.acp-kpi-card.acp-kpi-card--warning-light .acp-kpi-card__metric{color:var(--acp-kpi-card-warning-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--error .acp-kpi-card__metric{color:var(--acp-kpi-card-error-color, var(--mat-sys-on-error))}.acp-kpi-card.acp-kpi-card--error-light .acp-kpi-card__metric{color:var(--acp-kpi-card-error-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--info .acp-kpi-card__metric{color:var(--acp-kpi-card-info-color, light-dark(#ffffff, #002f65))}.acp-kpi-card.acp-kpi-card--info-light .acp-kpi-card__metric{color:var(--acp-kpi-card-info-light-color, var(--mat-sys-on-surface))}.acp-kpi-card__description{margin:0;font-size:12px;font-weight:400;letter-spacing:.4px;color:rgba(var(--acp-kpi-card-fg),.6);line-height:1.5}.acp-kpi-card__progress{height:4px;border-radius:2px;background-color:rgba(var(--acp-kpi-card-fg),.12)}.acp-kpi-card__footer{padding:12px 16px;font-size:12px;font-weight:400;letter-spacing:.4px;color:rgba(var(--acp-kpi-card-fg),.6)}.acp-kpi-card__footer-text{margin:0}.acp-kpi-card__skeleton{padding:16px;display:flex;flex-direction:column;gap:12px}.acp-kpi-card__skeleton-header{width:60%;height:16px;background:linear-gradient(90deg,#0000001a 25%,#0000000d,#0000001a 75%);background-size:200% 100%;animation:loading 1.5s infinite;border-radius:4px}.acp-kpi-card__skeleton-value{width:40%;height:28px;background:linear-gradient(90deg,#0000001a 25%,#0000000d,#0000001a 75%);background-size:200% 100%;animation:loading 1.5s infinite;border-radius:4px}.acp-kpi-card__skeleton-text{width:80%;height:12px;background:linear-gradient(90deg,#0000001a 25%,#0000000d,#0000001a 75%);background-size:200% 100%;animation:loading 1.5s infinite;border-radius:4px}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.acp-kpi-card.acp-kpi-card--primary{--acp-kpi-card-bg: var(--acp-kpi-card-primary-bg, var(--mat-sys-primary));--acp-kpi-card-fg: var(--acp-kpi-card-primary-color, var(--mat-sys-on-primary))}.acp-kpi-card.acp-kpi-card--secondary{--acp-kpi-card-bg: var(--acp-kpi-card-secondary-bg, var(--mat-sys-secondary));--acp-kpi-card-fg: var(--acp-kpi-card-secondary-color, var(--mat-sys-on-secondary))}.acp-kpi-card.acp-kpi-card--success{--acp-kpi-card-bg: var(--acp-kpi-card-success-bg, light-dark(#038b00, #03c700));--acp-kpi-card-fg: var(--acp-kpi-card-success-color, light-dark(#ffffff, #013a00))}.acp-kpi-card.acp-kpi-card--success-light{--acp-kpi-card-bg: var(--acp-kpi-card-success-light-bg, light-dark(#cbffb8, #014600));--acp-kpi-card-fg: var(--acp-kpi-card-success-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--warning{--acp-kpi-card-bg: var(--acp-kpi-card-warning-bg, light-dark(#e37100, #ffb787));--acp-kpi-card-fg: var(--acp-kpi-card-warning-color, light-dark(#ffffff, #502400))}.acp-kpi-card.acp-kpi-card--warning-light{--acp-kpi-card-bg: var(--acp-kpi-card-warning-light-bg, light-dark(#ffede4, #612d00));--acp-kpi-card-fg: var(--acp-kpi-card-warning-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--error{--acp-kpi-card-bg: var(--acp-kpi-card-error-bg, var(--mat-sys-error));--acp-kpi-card-fg: var(--acp-kpi-card-error-color, var(--mat-sys-on-error))}.acp-kpi-card.acp-kpi-card--error-light{--acp-kpi-card-bg: var(--acp-kpi-card-error-light-bg, light-dark(#ffedea, #7e0100));--acp-kpi-card-fg: var(--acp-kpi-card-error-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--info{--acp-kpi-card-bg: var(--acp-kpi-card-info-bg, light-dark(#0074e9, #7cabff));--acp-kpi-card-fg: var(--acp-kpi-card-info-color, light-dark(#ffffff, #002f65))}.acp-kpi-card.acp-kpi-card--info-light{--acp-kpi-card-bg: var(--acp-kpi-card-info-light-bg, light-dark(#ecf0ff, #003a7a));--acp-kpi-card-fg: var(--acp-kpi-card-info-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--neutral{--acp-kpi-card-bg: var(--acp-kpi-card-neutral-bg, var(--mat-sys-surface-variant));--acp-kpi-card-fg: var(--acp-kpi-card-neutral-color, var(--mat-sys-on-surface-variant))}.acp-kpi-card.acp-kpi-card--white{--acp-kpi-card-bg: #ffffff;--acp-kpi-card-fg: #1f2937}.acp-kpi-card.acp-kpi-card--custom{--acp-kpi-card-bg: var( --acp-kpi-card-custom-bg, var(--acp-kpi-card-custom-bg, var(--mat-sys-surface-container)) );--acp-kpi-card-fg: var( --acp-kpi-card-custom-fg, var(--acp-kpi-card-custom-color, var(--mat-sys-on-surface)) )}.acp-kpi-card.acp-kpi-card--default .acp-kpi-card__card{background:var(--acp-kpi-card-bg);color:var(--acp-kpi-card-fg);border:1px solid rgba(var(--acp-kpi-card-fg),.12)}.acp-kpi-card.acp-kpi-card--elevated .acp-kpi-card__card{background:var(--acp-kpi-card-bg);color:var(--acp-kpi-card-fg);box-shadow:0 3px 8px #00000014,0 1px 3px #0000000a}.acp-kpi-card.acp-kpi-card--outlined .acp-kpi-card__card{background:transparent;color:var(--acp-kpi-card-fg);border:2px solid rgba(var(--acp-kpi-card-fg),.2)}.acp-kpi-card.acp-kpi-card--filled .acp-kpi-card__card{background:var(--acp-kpi-card-bg);color:var(--acp-kpi-card-fg)}.acp-kpi-card.acp-kpi-card--tonal .acp-kpi-card__card{background:color-mix(in srgb,var(--acp-kpi-card-bg) 12%,transparent);color:var(--acp-kpi-card-fg);border:1px solid rgba(var(--acp-kpi-card-fg),.08)}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card{cursor:pointer}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card:hover{box-shadow:0 6px 12px #0000001a,0 2px 4px #0000000f;transform:translateY(-1px)}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card:active{transform:translateY(0);box-shadow:0 2px 4px #00000014}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card:focus-visible{outline:2px solid currentColor;outline-offset:2px}.acp-kpi-card.acp-kpi-card--disabled .acp-kpi-card__card{opacity:.6;cursor:not-allowed;pointer-events:none}.acp-kpi-card.acp-kpi-card--selected .acp-kpi-card__card{border:2px solid var(--acp-kpi-card-fg)}.acp-kpi-card.acp-kpi-card--loading .acp-kpi-card__card{pointer-events:none;opacity:.8}@media(max-width:768px){.acp-kpi-card__header,.acp-kpi-card__content{padding:12px}.acp-kpi-card__value{font-size:24px}.acp-kpi-card__title{font-size:13px}}@media(prefers-reduced-motion:reduce){.acp-kpi-card__card{transition:none}.acp-kpi-card__skeleton-header,.acp-kpi-card__skeleton-value,.acp-kpi-card__skeleton-text{animation:none}}@media(prefers-contrast:more){.acp-kpi-card__card{border-width:2px}}@media(max-width:768px){.acp-kpi-card__header,.acp-kpi-card__content{padding:12px;gap:8px}.acp-kpi-card__footer{padding:12px}.acp-kpi-card__icon{font-size:20px;width:20px;height:20px}.acp-kpi-card__avatar,.acp-kpi-card__avatar-image,.acp-kpi-card__avatar-initials{width:32px;height:32px;font-size:12px}.acp-kpi-card__title{font-size:13px}.acp-kpi-card__subtitle{font-size:11px}.acp-kpi-card__value{font-size:24px}}.acp-kpi-card__card.acp-kpi-card--xs{min-height:96px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__content{padding:8px;gap:6px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__footer{padding:8px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__icon{font-size:16px;width:16px;height:16px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__avatar-initials{width:28px;height:28px;font-size:11px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__title{font-size:12px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__subtitle{font-size:10px;margin-top:1px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__value{font-size:18px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__percentage{font-size:10px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__description{font-size:11px}.acp-kpi-card__card.acp-kpi-card--sm{min-height:128px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__content{padding:12px;gap:8px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__footer{padding:12px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__icon{font-size:20px;width:20px;height:20px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__avatar-initials{width:32px;height:32px;font-size:12px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__title{font-size:13px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__subtitle{font-size:11px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__value{font-size:22px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__percentage{font-size:11px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__description{font-size:12px}.acp-kpi-card__card.acp-kpi-card--md{min-height:160px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__content{padding:16px;gap:12px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__footer{padding:16px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__icon{font-size:24px;width:24px;height:24px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__avatar-initials{width:40px;height:40px;font-size:14px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__title{font-size:14px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__subtitle{font-size:12px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__value{font-size:28px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__percentage{font-size:12px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__description{font-size:13px}.acp-kpi-card__card.acp-kpi-card--lg{min-height:224px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__content{padding:20px;gap:16px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__footer{padding:20px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__icon{font-size:32px;width:32px;height:32px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__avatar-initials{width:48px;height:48px;font-size:16px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__title{font-size:16px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__subtitle{font-size:13px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__value{font-size:36px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__percentage,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__description{font-size:14px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8266
|
+
}
|
|
8267
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpKpiCard, decorators: [{
|
|
8268
|
+
type: Component,
|
|
8269
|
+
args: [{ selector: 'acp-kpi-card', exportAs: 'acpKpiCard', standalone: true, imports: [
|
|
8270
|
+
NgTemplateOutlet,
|
|
8271
|
+
RouterLink,
|
|
8272
|
+
MatCard,
|
|
8273
|
+
MatCardHeader,
|
|
8274
|
+
MatCardContent,
|
|
8275
|
+
MatIconModule,
|
|
8276
|
+
MatButtonModule,
|
|
8277
|
+
MatMenuModule,
|
|
8278
|
+
MatProgressBarModule,
|
|
8279
|
+
MatDividerModule,
|
|
8280
|
+
MatTooltipModule,
|
|
8281
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
8282
|
+
'[class]': 'hostClasses()',
|
|
8283
|
+
}, template: "<mat-card\n class=\"acp-kpi-card__card\"\n [routerLink]=\"routerLink()\"\n [attr.aria-label]=\"ariaLabel()\"\n [matTooltip]=\"tooltip()\"\n [matTooltipDisabled]=\"!tooltip()\"\n (click)=\"onCardClick()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n>\n <!-- Loading Skeleton -->\n @if (loading()) {\n <div class=\"acp-kpi-card__skeleton\">\n <div class=\"acp-kpi-card__skeleton-header\"></div>\n <div class=\"acp-kpi-card__skeleton-value\"></div>\n <div class=\"acp-kpi-card__skeleton-text\"></div>\n </div>\n } @else {\n <!-- Header -->\n @if (hasHeader()) {\n <mat-card-header class=\"acp-kpi-card__header\">\n <div class=\"acp-kpi-card__header-content\">\n <!-- Icon or Avatar -->\n <div class=\"acp-kpi-card__icon-container\">\n @if (iconTemplate()) {\n <ng-container [ngTemplateOutlet]=\"iconTemplate()!\"></ng-container>\n } @else if (svgIcon()) {\n <mat-icon class=\"acp-kpi-card__icon\" [svgIcon]=\"svgIcon()!\" aria-hidden=\"true\"></mat-icon>\n } @else if (effectiveIcon()) {\n <mat-icon class=\"acp-kpi-card__icon\" aria-hidden=\"true\">{{ effectiveIcon() }}</mat-icon>\n } @else if (avatarTemplate()) {\n <div class=\"acp-kpi-card__avatar\">\n <ng-container [ngTemplateOutlet]=\"avatarTemplate()!\"></ng-container>\n </div>\n } @else if (avatar()) {\n <img class=\"acp-kpi-card__avatar-image\" [src]=\"avatar()\" [alt]=\"title() || 'Avatar'\" />\n } @else if (avatarInitials()) {\n <div class=\"acp-kpi-card__avatar-initials\">{{ avatarInitials() }}</div>\n }\n </div>\n\n <!-- Title & Subtitle -->\n <div class=\"acp-kpi-card__title-container\">\n @if (title()) {\n <h3 class=\"acp-kpi-card__title\">{{ title() }}</h3>\n } @if (subtitle()) {\n <p class=\"acp-kpi-card__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n </div>\n\n <!-- Menu Button (optional) - Only show if actions template exists -->\n @if (hasActions()) {\n <button\n mat-icon-button\n [matMenuTriggerFor]=\"menu\"\n class=\"acp-kpi-card__menu-button\"\n aria-label=\"More options\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\" class=\"acp-kpi-card__menu\">\n <ng-container [ngTemplateOutlet]=\"actionsTemplate()!\"></ng-container>\n </mat-menu>\n }\n </mat-card-header>\n }\n\n <!-- Content -->\n <mat-card-content class=\"acp-kpi-card__content\">\n <!-- Main Value -->\n @if (value()) {\n <div class=\"acp-kpi-card__value-section\">\n <div class=\"acp-kpi-card__value\">{{ value() }}</div>\n\n <!-- Percentage & Trend -->\n @if (percentage() !== undefined) {\n <div class=\"acp-kpi-card__metric\">\n @if (isTrending()) {\n <mat-icon class=\"acp-kpi-card__trend-icon\" [attr.aria-label]=\"trendConfig().ariaLabel\">\n {{ trendConfig().icon }}\n </mat-icon>\n }\n <span class=\"acp-kpi-card__percentage\">\n {{ percentageFormat() === 'percent' ? (percentage() + '%') : percentage() }}\n </span>\n </div>\n }\n </div>\n }\n\n <!-- Description -->\n @if (description()) {\n <p class=\"acp-kpi-card__description\">{{ description() }}</p>\n }\n\n <!-- Progress Bar -->\n @if (progress() !== undefined) {\n <mat-progress-bar\n class=\"acp-kpi-card__progress\"\n mode=\"determinate\"\n [value]=\"progress()\"\n [color]=\"progressColor()\"\n ></mat-progress-bar>\n }\n </mat-card-content>\n\n <!-- Footer -->\n @if (hasFooter()) {\n <mat-divider></mat-divider>\n <div class=\"acp-kpi-card__footer\">\n @if (footerTemplate()) {\n <ng-container [ngTemplateOutlet]=\"footerTemplate()!\"></ng-container>\n } @else if (footer()) {\n <p class=\"acp-kpi-card__footer-text\">{{ footer() }}</p>\n }\n </div>\n } }\n</mat-card>\n", styles: [".acp-kpi-card{--acp-kpi-card-bg: var(--acp-kpi-card-primary-bg, var(--mat-sys-primary));--acp-kpi-card-fg: var(--acp-kpi-card-primary-color, var(--mat-sys-on-primary));display:flex;vertical-align:middle;width:100%;max-width:100%}.acp-kpi-card__card{width:100%;display:flex;flex-direction:column;border-radius:12px;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;background-color:#fff}.acp-kpi-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px;gap:12px}.acp-kpi-card__header-content{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.acp-kpi-card__icon-container{display:flex;align-items:center;justify-content:center;flex-shrink:0}.acp-kpi-card__icon{font-size:24px;width:24px;height:24px;color:var(--acp-kpi-card-fg)}.acp-kpi-card__avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--acp-kpi-card-bg) 30%,transparent);color:var(--acp-kpi-card-fg);font-weight:500;font-size:14px;flex-shrink:0}.acp-kpi-card__avatar-image{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}.acp-kpi-card__avatar-initials{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--acp-kpi-card-bg) 30%,transparent);color:var(--acp-kpi-card-fg);font-weight:500;font-size:14px;flex-shrink:0}.acp-kpi-card__title-container{flex:1;min-width:0}.acp-kpi-card__title{margin:0;font-size:14px;font-weight:500;letter-spacing:.25px;color:var(--acp-kpi-card-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acp-kpi-card__subtitle{margin:2px 0 0;font-size:12px;font-weight:400;letter-spacing:.4px;color:rgba(var(--acp-kpi-card-fg),.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acp-kpi-card__menu-button{flex-shrink:0;opacity:.7;transition:opacity .2s ease-in-out}.acp-kpi-card__menu-button:hover{opacity:1}.acp-kpi-card__menu-button:focus-visible{outline:2px solid currentColor;outline-offset:2px}.acp-kpi-card__menu{will-change:transform}.acp-kpi-card__content{flex:1;padding:16px;display:flex;flex-direction:column;gap:12px}.acp-kpi-card__value-section{display:flex;align-items:baseline;gap:8px}.acp-kpi-card__value{font-size:28px;font-weight:600;letter-spacing:-.5px;color:var(--acp-kpi-card-fg);line-height:1.2}.acp-kpi-card__metric{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:500;letter-spacing:.25px;color:rgba(var(--acp-kpi-card-fg),.8)}.acp-kpi-card__trend-icon{font-size:16px;width:16px;height:16px}.acp-kpi-card__percentage{white-space:nowrap}.acp-kpi-card.acp-kpi-card--success .acp-kpi-card__metric{color:var(--acp-kpi-card-success-color, light-dark(#ffffff, #013a00))}.acp-kpi-card.acp-kpi-card--success-light .acp-kpi-card__metric{color:var(--acp-kpi-card-success-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--warning .acp-kpi-card__metric{color:var(--acp-kpi-card-warning-color, light-dark(#ffffff, #502400))}.acp-kpi-card.acp-kpi-card--warning-light .acp-kpi-card__metric{color:var(--acp-kpi-card-warning-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--error .acp-kpi-card__metric{color:var(--acp-kpi-card-error-color, var(--mat-sys-on-error))}.acp-kpi-card.acp-kpi-card--error-light .acp-kpi-card__metric{color:var(--acp-kpi-card-error-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--info .acp-kpi-card__metric{color:var(--acp-kpi-card-info-color, light-dark(#ffffff, #002f65))}.acp-kpi-card.acp-kpi-card--info-light .acp-kpi-card__metric{color:var(--acp-kpi-card-info-light-color, var(--mat-sys-on-surface))}.acp-kpi-card__description{margin:0;font-size:12px;font-weight:400;letter-spacing:.4px;color:rgba(var(--acp-kpi-card-fg),.6);line-height:1.5}.acp-kpi-card__progress{height:4px;border-radius:2px;background-color:rgba(var(--acp-kpi-card-fg),.12)}.acp-kpi-card__footer{padding:12px 16px;font-size:12px;font-weight:400;letter-spacing:.4px;color:rgba(var(--acp-kpi-card-fg),.6)}.acp-kpi-card__footer-text{margin:0}.acp-kpi-card__skeleton{padding:16px;display:flex;flex-direction:column;gap:12px}.acp-kpi-card__skeleton-header{width:60%;height:16px;background:linear-gradient(90deg,#0000001a 25%,#0000000d,#0000001a 75%);background-size:200% 100%;animation:loading 1.5s infinite;border-radius:4px}.acp-kpi-card__skeleton-value{width:40%;height:28px;background:linear-gradient(90deg,#0000001a 25%,#0000000d,#0000001a 75%);background-size:200% 100%;animation:loading 1.5s infinite;border-radius:4px}.acp-kpi-card__skeleton-text{width:80%;height:12px;background:linear-gradient(90deg,#0000001a 25%,#0000000d,#0000001a 75%);background-size:200% 100%;animation:loading 1.5s infinite;border-radius:4px}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.acp-kpi-card.acp-kpi-card--primary{--acp-kpi-card-bg: var(--acp-kpi-card-primary-bg, var(--mat-sys-primary));--acp-kpi-card-fg: var(--acp-kpi-card-primary-color, var(--mat-sys-on-primary))}.acp-kpi-card.acp-kpi-card--secondary{--acp-kpi-card-bg: var(--acp-kpi-card-secondary-bg, var(--mat-sys-secondary));--acp-kpi-card-fg: var(--acp-kpi-card-secondary-color, var(--mat-sys-on-secondary))}.acp-kpi-card.acp-kpi-card--success{--acp-kpi-card-bg: var(--acp-kpi-card-success-bg, light-dark(#038b00, #03c700));--acp-kpi-card-fg: var(--acp-kpi-card-success-color, light-dark(#ffffff, #013a00))}.acp-kpi-card.acp-kpi-card--success-light{--acp-kpi-card-bg: var(--acp-kpi-card-success-light-bg, light-dark(#cbffb8, #014600));--acp-kpi-card-fg: var(--acp-kpi-card-success-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--warning{--acp-kpi-card-bg: var(--acp-kpi-card-warning-bg, light-dark(#e37100, #ffb787));--acp-kpi-card-fg: var(--acp-kpi-card-warning-color, light-dark(#ffffff, #502400))}.acp-kpi-card.acp-kpi-card--warning-light{--acp-kpi-card-bg: var(--acp-kpi-card-warning-light-bg, light-dark(#ffede4, #612d00));--acp-kpi-card-fg: var(--acp-kpi-card-warning-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--error{--acp-kpi-card-bg: var(--acp-kpi-card-error-bg, var(--mat-sys-error));--acp-kpi-card-fg: var(--acp-kpi-card-error-color, var(--mat-sys-on-error))}.acp-kpi-card.acp-kpi-card--error-light{--acp-kpi-card-bg: var(--acp-kpi-card-error-light-bg, light-dark(#ffedea, #7e0100));--acp-kpi-card-fg: var(--acp-kpi-card-error-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--info{--acp-kpi-card-bg: var(--acp-kpi-card-info-bg, light-dark(#0074e9, #7cabff));--acp-kpi-card-fg: var(--acp-kpi-card-info-color, light-dark(#ffffff, #002f65))}.acp-kpi-card.acp-kpi-card--info-light{--acp-kpi-card-bg: var(--acp-kpi-card-info-light-bg, light-dark(#ecf0ff, #003a7a));--acp-kpi-card-fg: var(--acp-kpi-card-info-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--neutral{--acp-kpi-card-bg: var(--acp-kpi-card-neutral-bg, var(--mat-sys-surface-variant));--acp-kpi-card-fg: var(--acp-kpi-card-neutral-color, var(--mat-sys-on-surface-variant))}.acp-kpi-card.acp-kpi-card--white{--acp-kpi-card-bg: #ffffff;--acp-kpi-card-fg: #1f2937}.acp-kpi-card.acp-kpi-card--custom{--acp-kpi-card-bg: var( --acp-kpi-card-custom-bg, var(--acp-kpi-card-custom-bg, var(--mat-sys-surface-container)) );--acp-kpi-card-fg: var( --acp-kpi-card-custom-fg, var(--acp-kpi-card-custom-color, var(--mat-sys-on-surface)) )}.acp-kpi-card.acp-kpi-card--default .acp-kpi-card__card{background:var(--acp-kpi-card-bg);color:var(--acp-kpi-card-fg);border:1px solid rgba(var(--acp-kpi-card-fg),.12)}.acp-kpi-card.acp-kpi-card--elevated .acp-kpi-card__card{background:var(--acp-kpi-card-bg);color:var(--acp-kpi-card-fg);box-shadow:0 3px 8px #00000014,0 1px 3px #0000000a}.acp-kpi-card.acp-kpi-card--outlined .acp-kpi-card__card{background:transparent;color:var(--acp-kpi-card-fg);border:2px solid rgba(var(--acp-kpi-card-fg),.2)}.acp-kpi-card.acp-kpi-card--filled .acp-kpi-card__card{background:var(--acp-kpi-card-bg);color:var(--acp-kpi-card-fg)}.acp-kpi-card.acp-kpi-card--tonal .acp-kpi-card__card{background:color-mix(in srgb,var(--acp-kpi-card-bg) 12%,transparent);color:var(--acp-kpi-card-fg);border:1px solid rgba(var(--acp-kpi-card-fg),.08)}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card{cursor:pointer}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card:hover{box-shadow:0 6px 12px #0000001a,0 2px 4px #0000000f;transform:translateY(-1px)}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card:active{transform:translateY(0);box-shadow:0 2px 4px #00000014}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card:focus-visible{outline:2px solid currentColor;outline-offset:2px}.acp-kpi-card.acp-kpi-card--disabled .acp-kpi-card__card{opacity:.6;cursor:not-allowed;pointer-events:none}.acp-kpi-card.acp-kpi-card--selected .acp-kpi-card__card{border:2px solid var(--acp-kpi-card-fg)}.acp-kpi-card.acp-kpi-card--loading .acp-kpi-card__card{pointer-events:none;opacity:.8}@media(max-width:768px){.acp-kpi-card__header,.acp-kpi-card__content{padding:12px}.acp-kpi-card__value{font-size:24px}.acp-kpi-card__title{font-size:13px}}@media(prefers-reduced-motion:reduce){.acp-kpi-card__card{transition:none}.acp-kpi-card__skeleton-header,.acp-kpi-card__skeleton-value,.acp-kpi-card__skeleton-text{animation:none}}@media(prefers-contrast:more){.acp-kpi-card__card{border-width:2px}}@media(max-width:768px){.acp-kpi-card__header,.acp-kpi-card__content{padding:12px;gap:8px}.acp-kpi-card__footer{padding:12px}.acp-kpi-card__icon{font-size:20px;width:20px;height:20px}.acp-kpi-card__avatar,.acp-kpi-card__avatar-image,.acp-kpi-card__avatar-initials{width:32px;height:32px;font-size:12px}.acp-kpi-card__title{font-size:13px}.acp-kpi-card__subtitle{font-size:11px}.acp-kpi-card__value{font-size:24px}}.acp-kpi-card__card.acp-kpi-card--xs{min-height:96px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__content{padding:8px;gap:6px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__footer{padding:8px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__icon{font-size:16px;width:16px;height:16px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__avatar-initials{width:28px;height:28px;font-size:11px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__title{font-size:12px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__subtitle{font-size:10px;margin-top:1px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__value{font-size:18px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__percentage{font-size:10px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__description{font-size:11px}.acp-kpi-card__card.acp-kpi-card--sm{min-height:128px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__content{padding:12px;gap:8px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__footer{padding:12px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__icon{font-size:20px;width:20px;height:20px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__avatar-initials{width:32px;height:32px;font-size:12px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__title{font-size:13px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__subtitle{font-size:11px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__value{font-size:22px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__percentage{font-size:11px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__description{font-size:12px}.acp-kpi-card__card.acp-kpi-card--md{min-height:160px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__content{padding:16px;gap:12px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__footer{padding:16px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__icon{font-size:24px;width:24px;height:24px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__avatar-initials{width:40px;height:40px;font-size:14px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__title{font-size:14px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__subtitle{font-size:12px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__value{font-size:28px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__percentage{font-size:12px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__description{font-size:13px}.acp-kpi-card__card.acp-kpi-card--lg{min-height:224px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__content{padding:20px;gap:16px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__footer{padding:20px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__icon{font-size:32px;width:32px;height:32px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__avatar-initials{width:48px;height:48px;font-size:16px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__title{font-size:16px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__subtitle{font-size:13px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__value{font-size:36px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__percentage,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__description{font-size:14px}\n"] }]
|
|
8284
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], svgIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "svgIcon", required: false }] }], avatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatar", required: false }] }], avatarInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarInitials", required: false }] }], trend: [{ type: i0.Input, args: [{ isSignal: true, alias: "trend", required: false }] }], percentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentage", required: false }] }], percentageFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentageFormat", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], progressColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressColor", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], actionClicked: [{ type: i0.Output, args: ["actionClicked"] }], iconTemplate: [{ type: i0.ContentChild, args: ['icon', { ...{ read: TemplateRef }, isSignal: true }] }], avatarTemplate: [{ type: i0.ContentChild, args: ['avatar', { ...{ read: TemplateRef }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: ['footer', { ...{ read: TemplateRef }, isSignal: true }] }], actionsTemplate: [{ type: i0.ContentChild, args: ['actions', { ...{ read: TemplateRef }, isSignal: true }] }] } });
|
|
8285
|
+
|
|
8286
|
+
const KPI_CARD_TOKENS = {
|
|
8287
|
+
// Sizes
|
|
8288
|
+
SIZE_SM: 'sm',
|
|
8289
|
+
SIZE_MD: 'md',
|
|
8290
|
+
SIZE_LG: 'lg',
|
|
8291
|
+
// Variants
|
|
8292
|
+
VARIANT_DEFAULT: 'default',
|
|
8293
|
+
VARIANT_ELEVATED: 'elevated',
|
|
8294
|
+
VARIANT_OUTLINED: 'outlined',
|
|
8295
|
+
VARIANT_FILLED: 'filled',
|
|
8296
|
+
VARIANT_TONAL: 'tonal',
|
|
8297
|
+
// Colors
|
|
8298
|
+
COLOR_PRIMARY: 'primary',
|
|
8299
|
+
COLOR_SECONDARY: 'secondary',
|
|
8300
|
+
COLOR_SUCCESS: 'success',
|
|
8301
|
+
COLOR_SUCCESS_LIGHT: 'success-light',
|
|
8302
|
+
COLOR_WARNING: 'warning',
|
|
8303
|
+
COLOR_WARNING_LIGHT: 'warning-light',
|
|
8304
|
+
COLOR_ERROR: 'error',
|
|
8305
|
+
COLOR_ERROR_LIGHT: 'error-light',
|
|
8306
|
+
COLOR_INFO: 'info',
|
|
8307
|
+
COLOR_INFO_LIGHT: 'info-light',
|
|
8308
|
+
COLOR_NEUTRAL: 'neutral',
|
|
8309
|
+
COLOR_CUSTOM: 'custom',
|
|
8310
|
+
// Trends
|
|
8311
|
+
TREND_UP: 'up',
|
|
8312
|
+
TREND_DOWN: 'down',
|
|
8313
|
+
TREND_NEUTRAL: 'neutral',
|
|
8314
|
+
TREND_NONE: 'none',
|
|
8315
|
+
};
|
|
8316
|
+
|
|
8840
8317
|
class ToUpperCase {
|
|
8841
8318
|
el = inject(ElementRef);
|
|
8842
8319
|
renderer = inject(Renderer2);
|
|
@@ -8863,8 +8340,8 @@ class ToUpperCase {
|
|
|
8863
8340
|
registerOnTouched(fn) {
|
|
8864
8341
|
this.onTouched = fn;
|
|
8865
8342
|
}
|
|
8866
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
8867
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
8343
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ToUpperCase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
8344
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: ToUpperCase, isStandalone: true, selector: "[acpToUpperCase]", host: { listeners: { "input": "onInput()" } }, providers: [
|
|
8868
8345
|
{
|
|
8869
8346
|
provide: NG_VALUE_ACCESSOR,
|
|
8870
8347
|
useExisting: ToUpperCase,
|
|
@@ -8872,7 +8349,7 @@ class ToUpperCase {
|
|
|
8872
8349
|
},
|
|
8873
8350
|
], ngImport: i0 });
|
|
8874
8351
|
}
|
|
8875
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
8352
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ToUpperCase, decorators: [{
|
|
8876
8353
|
type: Directive,
|
|
8877
8354
|
args: [{
|
|
8878
8355
|
selector: '[acpToUpperCase]',
|
|
@@ -8889,6 +8366,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
|
|
|
8889
8366
|
args: ['input']
|
|
8890
8367
|
}] } });
|
|
8891
8368
|
|
|
8369
|
+
class Pagination {
|
|
8370
|
+
totalRecords;
|
|
8371
|
+
pageSize;
|
|
8372
|
+
pageIndex;
|
|
8373
|
+
pageSizeOptions;
|
|
8374
|
+
hidePageSize;
|
|
8375
|
+
showPageSizeOptions;
|
|
8376
|
+
showFirstLastButtons;
|
|
8377
|
+
disabled;
|
|
8378
|
+
/**
|
|
8379
|
+
* @param pageIndex Current page index (0-based for MatPaginator compatibility)
|
|
8380
|
+
* @param pageSize Number of records per page
|
|
8381
|
+
* @param totalRecords Total number of records
|
|
8382
|
+
* @param pageSizeOptions Available page size options
|
|
8383
|
+
* @param options Display and behavior options
|
|
8384
|
+
*/
|
|
8385
|
+
constructor(pageIndex = 0, // MatPaginator starts at 0
|
|
8386
|
+
pageSize = 25, totalRecords = 0, pageSizeOptions = [25, 50, 75, 100], options = {}) {
|
|
8387
|
+
this.pageIndex = pageIndex;
|
|
8388
|
+
this.pageSize = pageSize;
|
|
8389
|
+
this.totalRecords = totalRecords;
|
|
8390
|
+
this.pageSizeOptions = pageSizeOptions;
|
|
8391
|
+
this.hidePageSize = options.hidePageSize ?? false;
|
|
8392
|
+
this.showPageSizeOptions = options.showPageSizeOptions ?? true;
|
|
8393
|
+
this.showFirstLastButtons = options.showFirstLastButtons ?? true;
|
|
8394
|
+
this.disabled = options.disabled ?? false;
|
|
8395
|
+
}
|
|
8396
|
+
/**
|
|
8397
|
+
* Calculates the total number of pages.
|
|
8398
|
+
*/
|
|
8399
|
+
getTotalPages() {
|
|
8400
|
+
return Math.ceil(this.totalRecords / this.pageSize);
|
|
8401
|
+
}
|
|
8402
|
+
/**
|
|
8403
|
+
* Handles page event similar to Angular Material example.
|
|
8404
|
+
* @param event MatPaginator PageEvent
|
|
8405
|
+
*/
|
|
8406
|
+
handlePageEvent(event) {
|
|
8407
|
+
this.totalRecords = event.length;
|
|
8408
|
+
this.pageSize = event.pageSize;
|
|
8409
|
+
this.pageIndex = event.pageIndex;
|
|
8410
|
+
}
|
|
8411
|
+
}
|
|
8412
|
+
|
|
8892
8413
|
class GetTotalPipe {
|
|
8893
8414
|
transform(colName, dataSource) {
|
|
8894
8415
|
return this.getTotal(colName, dataSource) || '';
|
|
@@ -8902,10 +8423,10 @@ class GetTotalPipe {
|
|
|
8902
8423
|
.reduce((acc, value) => (value ? acc + Number(value) : acc), 0);
|
|
8903
8424
|
return total?.toFixed(2);
|
|
8904
8425
|
}
|
|
8905
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
8906
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0
|
|
8426
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: GetTotalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
8427
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: GetTotalPipe, isStandalone: true, name: "getTotal" });
|
|
8907
8428
|
}
|
|
8908
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
8429
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: GetTotalPipe, decorators: [{
|
|
8909
8430
|
type: Pipe,
|
|
8910
8431
|
args: [{
|
|
8911
8432
|
name: 'getTotal',
|
|
@@ -8969,10 +8490,10 @@ class StatusDisplayPipe {
|
|
|
8969
8490
|
// This prevents CSS injection through class names
|
|
8970
8491
|
return className.replace(/[^a-zA-Z0-9_-\s]/g, '');
|
|
8971
8492
|
}
|
|
8972
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
8973
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0
|
|
8493
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StatusDisplayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
8494
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: StatusDisplayPipe, isStandalone: true, name: "statusDisplay" });
|
|
8974
8495
|
}
|
|
8975
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
8496
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StatusDisplayPipe, decorators: [{
|
|
8976
8497
|
type: Pipe,
|
|
8977
8498
|
args: [{
|
|
8978
8499
|
name: 'statusDisplay',
|
|
@@ -8983,5 +8504,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
|
|
|
8983
8504
|
* Generated bundle index. Do not edit.
|
|
8984
8505
|
*/
|
|
8985
8506
|
|
|
8986
|
-
export { ACP_ACTIVE_DATE_DEBOUNCE,
|
|
8507
|
+
export { ACP_ACTIVE_DATE_DEBOUNCE, ACP_BADGE_COLORS, ACP_BADGE_SHAPES, ACP_BADGE_SIZES, ACP_BADGE_VARIANTS, ACP_DATE_OPTION_TYPE, ACP_DEFAULT_DATE_OPTIONS, ACP_DRAWER_DATA, ACP_DRAWER_DEFAULT_OPTIONS, ACP_POPOVER_CONTENT, ACP_POPOVER_DEFAULT_OPTIONS, ACP_POPOVER_SCROLL_STRATEGY, AcpAlert, AcpBadge, AcpButton, AcpCheckboxBase, AcpCheckboxGroup, AcpDateRangeInput, AcpDrawer, AcpDrawerConfig, AcpDrawerContainer, AcpDrawerRef, AcpKpiCard, AcpPopover, AcpPopoverContent, AcpPopoverTarget, AcpPopoverTrigger, AcpSelectDateOption, AdvancedDialogService, Button, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DialogZIndexService, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, KPI_CARD_TOKENS, KPI_CARD_TREND_CONFIGS, KeyboardNavigationService, OverlayService, Pagination, Spinner, StatusDisplayPipe, SvgIcon, TREND_CONFIGS, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, _AcpPopoverContentBase, formatValue };
|
|
8987
8508
|
//# sourceMappingURL=acontplus-ng-components.mjs.map
|