@acontplus/ng-components 3.2.1 → 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +122 -21
- package/fesm2022/acontplus-ng-components.mjs +1112 -720
- package/fesm2022/acontplus-ng-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/components/alert/_m3-alert.scss +57 -54
- package/src/lib/components/alert/alert.scss +87 -36
- package/src/lib/components/badge/_m3-badge.scss +6 -1
- package/src/lib/components/badge/badge.scss +18 -6
- package/src/lib/components/card/card.scss +189 -176
- package/src/lib/components/grid/grid.scss +61 -0
- package/src/lib/components/kpi-card/_m3-kpi-card.scss +44 -59
- package/src/lib/components/kpi-card/kpi-card.scss +250 -573
- package/types/acontplus-ng-components.d.ts +452 -379
- package/src/lib/components/cards/dynamic-card/dynamic-card.scss +0 -0
|
@@ -1,117 +1,147 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { input, booleanAttribute, numberAttribute, output, signal, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, contentChild, TemplateRef, InjectionToken, inject, NgZone, Injector, Service, ElementRef, EventEmitter, HostListener, Output, Input, Directive, ViewChild, effect, ViewContainerRef, Renderer2, afterRenderEffect, untracked, makeEnvironmentProviders, viewChild, isSignal, Injectable, model, Pipe, KeyValueDiffers, ChangeDetectorRef, CSP_NONCE, DOCUMENT as DOCUMENT$1, afterNextRender, ContentChildren, forwardRef, ANIMATION_MODULE_TYPE, ApplicationRef, ContentChild, LOCALE_ID, PLATFORM_ID, DestroyRef, SecurityContext } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/material/button';
|
|
4
|
-
import { MatIconButton,
|
|
5
|
-
import * as
|
|
4
|
+
import { MatIconButton, MatButton, MatMiniFabButton, MatFabButton, MatButtonModule } from '@angular/material/button';
|
|
5
|
+
import * as i2 from '@angular/material/icon';
|
|
6
|
+
import { MatIcon, MatIconModule } from '@angular/material/icon';
|
|
7
|
+
import * as i1 from '@angular/common';
|
|
6
8
|
import { NgClass, NgTemplateOutlet, DOCUMENT, CommonModule, AsyncPipe, CurrencyPipe, DatePipe, DecimalPipe, PercentPipe, NgStyle, isPlatformBrowser, SlicePipe } from '@angular/common';
|
|
7
|
-
import * as i1$
|
|
9
|
+
import * as i1$8 from '@angular/router';
|
|
8
10
|
import { RouterLink, RouterModule, Router, NavigationEnd, RouterLinkActive, RouterOutlet } from '@angular/router';
|
|
9
11
|
import { MatChipSet, MatChip, MatChipAvatar, MatChipTrailingIcon, MatChipRemove, MatChipRow, MatChipGrid, MatChipInput, MatChipListbox } from '@angular/material/chips';
|
|
10
|
-
import * as
|
|
11
|
-
import { MatIconModule, MatIcon } from '@angular/material/icon';
|
|
12
|
-
import * as i1 from '@angular/material/card';
|
|
13
|
-
import { MatCardModule, MatCard, MatCardHeader, MatCardContent } from '@angular/material/card';
|
|
14
|
-
import * as i3$1 from '@angular/cdk/overlay';
|
|
12
|
+
import * as i4 from '@angular/cdk/overlay';
|
|
15
13
|
import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
|
|
16
14
|
import { ComponentPortal, CdkPortalOutlet, TemplatePortal, DomPortalOutlet } from '@angular/cdk/portal';
|
|
17
|
-
import { Subject, firstValueFrom, from, isObservable, catchError, of, merge, combineLatest, Observable,
|
|
18
|
-
import { takeUntil, take, switchMap, mapTo, startWith, pairwise, distinctUntilChanged, share,
|
|
15
|
+
import { Subject, firstValueFrom, from, isObservable, catchError, of, merge, combineLatest, Observable, defer, Subscription, map as map$1, BehaviorSubject, filter as filter$1, tap, debounceTime } from 'rxjs';
|
|
16
|
+
import { map, filter, takeUntil, take, switchMap, mapTo, startWith, pairwise, distinctUntilChanged, share, skip } from 'rxjs/operators';
|
|
19
17
|
import * as i3 from '@angular/material/progress-spinner';
|
|
20
18
|
import { MatProgressSpinnerModule, MatProgressSpinner } from '@angular/material/progress-spinner';
|
|
21
19
|
import { CdkTrapFocus, LiveAnnouncer, _IdGenerator, FocusMonitor, isFakeMousedownFromScreenReader } from '@angular/cdk/a11y';
|
|
22
|
-
import * as i1$
|
|
20
|
+
import * as i1$2 from '@angular/material/dialog';
|
|
23
21
|
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule, MatDialog, MatDialogConfig } from '@angular/material/dialog';
|
|
24
22
|
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
|
25
23
|
import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
26
|
-
import { REPORT_FORMAT, DEFAULT_ICONS, FALLBACK_ICON } from '@acontplus/ui-kit';
|
|
24
|
+
import { REPORT_FORMAT, DEFAULT_ICONS as DEFAULT_ICONS$1, FALLBACK_ICON } from '@acontplus/ui-kit';
|
|
27
25
|
import { CdkDrag, CdkDragHandle, moveItemInArray, CdkDropList } from '@angular/cdk/drag-drop';
|
|
28
|
-
import * as i1$
|
|
29
|
-
import { FormControl, ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR, FormGroup, Validators } from '@angular/forms';
|
|
30
|
-
import * as i1$
|
|
26
|
+
import * as i1$4 from '@angular/forms';
|
|
27
|
+
import { FormControl, ReactiveFormsModule, NgControl, NgForm, FormGroupDirective, FormsModule, NG_VALUE_ACCESSOR, FormGroup, Validators } from '@angular/forms';
|
|
28
|
+
import * as i1$3 from '@ng-select/ng-select';
|
|
31
29
|
import { NgSelectModule } from '@ng-select/ng-select';
|
|
30
|
+
import * as i3$1 from '@angular/material/autocomplete';
|
|
31
|
+
import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
32
|
+
import * as i1$5 from '@angular/material/form-field';
|
|
33
|
+
import { MatFormFieldModule, MatFormField, MatLabel, MatHint } from '@angular/material/form-field';
|
|
34
|
+
import * as i2$1 from '@angular/material/input';
|
|
35
|
+
import { MatInput, MatInputModule } from '@angular/material/input';
|
|
32
36
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
33
37
|
import { HttpClient } from '@angular/common/http';
|
|
34
|
-
import { MatFormField, MatLabel, MatHint, MatFormFieldModule } from '@angular/material/form-field';
|
|
35
38
|
import { ENTER, COMMA, ESCAPE, hasModifierKey, SPACE } from '@angular/cdk/keycodes';
|
|
36
39
|
import { Tabulator, PageModule, ReactiveDataModule, FormatModule, EditModule, ValidateModule, ColumnCalcsModule, SortModule, TooltipModule, DataTreeModule, MoveRowsModule, SelectRowModule, PopupModule, InteractionModule } from 'tabulator-tables';
|
|
37
40
|
import { MatTableDataSource, MatTable, MatColumnDef, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatFooterRowDef, MatFooterRow, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatFooterCellDef, MatFooterCell } from '@angular/material/table';
|
|
38
41
|
import { MatPaginator } from '@angular/material/paginator';
|
|
39
42
|
import { MatSort, MatSortHeader } from '@angular/material/sort';
|
|
40
43
|
import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
|
|
41
|
-
import * as i4 from '@angular/material/progress-bar';
|
|
44
|
+
import * as i4$1 from '@angular/material/progress-bar';
|
|
42
45
|
import { MatProgressBar, MatProgressBarModule } from '@angular/material/progress-bar';
|
|
43
46
|
import { SelectionModel } from '@angular/cdk/collections';
|
|
44
47
|
import { MatBadge, MatBadgeModule } from '@angular/material/badge';
|
|
45
48
|
import * as i3$2 from '@angular/material/menu';
|
|
46
49
|
import { MatMenu, MatMenuItem, MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
|
|
47
|
-
import * as
|
|
50
|
+
import * as i8 from '@angular/material/tooltip';
|
|
48
51
|
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
|
|
49
52
|
import * as i3$3 from '@angular/material/core';
|
|
50
53
|
import { _animationsDisabled, MatNativeDateModule, MatRippleModule } from '@angular/material/core';
|
|
51
54
|
import { CdkTable, CdkColumnDef } from '@angular/cdk/table';
|
|
52
55
|
import { coerceCssPixelValue } from '@angular/cdk/coercion';
|
|
53
|
-
import * as i1$
|
|
56
|
+
import * as i1$b from '@angular/cdk/bidi';
|
|
54
57
|
import { Directionality, BidiModule } from '@angular/cdk/bidi';
|
|
55
58
|
import { SPANISH_LOCALE, MATERIAL_LIGHT_THEME, NgxDatex } from 'ngx-datex';
|
|
56
59
|
export { MATERIAL_LIGHT_THEME, NgxDatex, SPANISH_LOCALE } from 'ngx-datex';
|
|
57
60
|
import { tzDate, format, monthStart, addDay, monthEnd, weekStart, weekEnd } from '@formkit/tempo';
|
|
58
61
|
import { CdkDialogContainer, Dialog, DialogConfig } from '@angular/cdk/dialog';
|
|
59
62
|
import { DateRange, MatCalendar, MatDatepickerModule } from '@angular/material/datepicker';
|
|
60
|
-
import
|
|
61
|
-
import * as i2$1 from '@angular/material/input';
|
|
62
|
-
import { MatInputModule } from '@angular/material/input';
|
|
63
|
-
import * as i6 from '@angular/material/list';
|
|
63
|
+
import * as i7 from '@angular/material/list';
|
|
64
64
|
import { MatListModule } from '@angular/material/list';
|
|
65
|
-
import
|
|
66
|
-
import
|
|
65
|
+
import * as i1$6 from '@angular/material/card';
|
|
66
|
+
import { MatCardModule, MatCard, MatCardHeader, MatCardContent } from '@angular/material/card';
|
|
67
|
+
import * as i1$7 from '@angular/material/toolbar';
|
|
67
68
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
68
|
-
import * as i1$
|
|
69
|
+
import * as i1$9 from 'ngx-permissions';
|
|
69
70
|
import { NgxPermissionsModule } from 'ngx-permissions';
|
|
70
|
-
import * as i1$
|
|
71
|
+
import * as i1$a from '@angular/material/slide-toggle';
|
|
71
72
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
72
73
|
import * as i2$2 from '@angular/material/sidenav';
|
|
73
74
|
import { MatSidenavModule } from '@angular/material/sidenav';
|
|
74
|
-
import * as i4$
|
|
75
|
+
import * as i4$2 from '@angular/material/tabs';
|
|
75
76
|
import { MatTabsModule } from '@angular/material/tabs';
|
|
76
77
|
import { TranslocoService } from '@jsverse/transloco';
|
|
77
78
|
|
|
79
|
+
const DEFAULT_ICONS = {
|
|
80
|
+
default: null,
|
|
81
|
+
info: 'info',
|
|
82
|
+
success: 'check_circle',
|
|
83
|
+
warning: 'warning',
|
|
84
|
+
danger: 'error',
|
|
85
|
+
};
|
|
78
86
|
class AcpAlert {
|
|
79
|
-
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
80
|
-
get hostClassList() {
|
|
81
|
-
return `acp-alert acp-alert-${this.type} mat-elevation-z${this.elevation}`;
|
|
82
|
-
}
|
|
83
87
|
/** The alert's type. Can be `default`, `info`, `success`, `warning` or `danger`. */
|
|
84
|
-
type = 'default'
|
|
88
|
+
type = input('default', /* @ts-ignore */
|
|
89
|
+
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
90
|
+
/** Visual style: `soft` (default), `outlined` or `filled`. */
|
|
91
|
+
variant = input('soft', /* @ts-ignore */
|
|
92
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
93
|
+
/** Optional bold heading shown above the content. */
|
|
94
|
+
heading = input(/* @ts-ignore */
|
|
95
|
+
...(ngDevMode ? [undefined, { debugName: "heading" }] : /* istanbul ignore next */ []));
|
|
96
|
+
/** Material icon name. Defaults to an icon per type (none for `default`). */
|
|
97
|
+
icon = input(/* @ts-ignore */
|
|
98
|
+
...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
99
|
+
/** Whether to show the icon. */
|
|
100
|
+
showIcon = input(true, { ...(ngDevMode ? { debugName: "showIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
85
101
|
/** Whether to display an inline close button. */
|
|
86
|
-
dismissible = false;
|
|
102
|
+
dismissible = input(false, { ...(ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
103
|
+
/** Accessible label of the close button. */
|
|
104
|
+
closeLabel = input('Cerrar', /* @ts-ignore */
|
|
105
|
+
...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
|
|
87
106
|
/** The alert's elevation (0~24). */
|
|
88
|
-
elevation = 0;
|
|
89
|
-
/** Event emitted when the alert closed. */
|
|
90
|
-
closed =
|
|
91
|
-
|
|
92
|
-
|
|
107
|
+
elevation = input(0, { ...(ngDevMode ? { debugName: "elevation" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
108
|
+
/** Event emitted when the alert is closed. */
|
|
109
|
+
closed = output();
|
|
110
|
+
_open = signal(true, /* @ts-ignore */
|
|
111
|
+
...(ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []));
|
|
112
|
+
/** Whether the alert is visible. */
|
|
113
|
+
isOpen = this._open.asReadonly();
|
|
114
|
+
resolvedIcon = computed(() => this.showIcon() ? (this.icon() ?? DEFAULT_ICONS[this.type()]) : null, /* @ts-ignore */
|
|
115
|
+
...(ngDevMode ? [{ debugName: "resolvedIcon" }] : /* istanbul ignore next */ []));
|
|
116
|
+
/** Errors and warnings interrupt screen readers; the rest are announced politely. */
|
|
117
|
+
role = computed(() => this.type() === 'danger' || this.type() === 'warning' ? 'alert' : 'status', /* @ts-ignore */
|
|
118
|
+
...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
|
|
119
|
+
hostClassList = computed(() => `acp-alert acp-alert-${this.type()} acp-alert--${this.variant()} mat-elevation-z${this.elevation()}`, /* @ts-ignore */
|
|
120
|
+
...(ngDevMode ? [{ debugName: "hostClassList" }] : /* istanbul ignore next */ []));
|
|
121
|
+
/** Hides the alert and emits `closed`. */
|
|
122
|
+
close() {
|
|
123
|
+
if (!this._open()) {
|
|
124
|
+
return;
|
|
125
|
+
}
|
|
126
|
+
this._open.set(false);
|
|
93
127
|
this.closed.emit(this);
|
|
94
128
|
}
|
|
129
|
+
/** Shows the alert again after it was closed. */
|
|
130
|
+
open() {
|
|
131
|
+
this._open.set(true);
|
|
132
|
+
}
|
|
95
133
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
96
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpAlert, isStandalone: true, selector: "acp-alert", inputs: { type: "type",
|
|
134
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpAlert, isStandalone: true, selector: "acp-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class": "hostClassList()", "class.acp-alert-dismissible": "dismissible()", "attr.role": "role()", "attr.hidden": "isOpen() ? null : \"\"" } }, exportAs: ["acpAlert"], ngImport: i0, template: "@if (resolvedIcon(); as iconName) {\n<mat-icon class=\"acp-alert-icon\" aria-hidden=\"true\">{{ iconName }}</mat-icon>\n}\n<div class=\"acp-alert-body\">\n @if (heading()) {\n <div class=\"acp-alert-title\">{{ heading() }}</div>\n }\n <div class=\"acp-alert-content\"><ng-content></ng-content></div>\n <div class=\"acp-alert-actions\"><ng-content select=\"[acpAlertActions]\"></ng-content></div>\n</div>\n@if (dismissible()) {\n<button\n class=\"acp-alert-close\"\n matIconButton\n type=\"button\"\n [attr.aria-label]=\"closeLabel()\"\n (click)=\"close()\"\n>\n <svg viewBox=\"0 0 24 24\" width=\"20px\" height=\"20px\" fill=\"currentColor\" focusable=\"false\">\n <path\n d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\"\n />\n </svg>\n</button>\n}\n", styles: [".acp-alert{--acp-alert-bg: var(--acp-alert-background-color, var(--mat-sys-surface-container));--acp-alert-fg: var(--acp-alert-text-color, var(--mat-sys-on-surface));--acp-alert-border: var(--acp-alert-outline-color, var(--mat-sys-outline-variant));--acp-alert-icon: var(--acp-alert-icon-color, var(--mat-sys-on-surface-variant));--acp-alert-solid-bg: var(--acp-alert-solid-background-color, var(--mat-sys-inverse-surface));--acp-alert-solid-fg: var(--acp-alert-solid-text-color, var(--mat-sys-inverse-on-surface));position:relative;display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 1rem;box-sizing:border-box;line-height:1.5;border:1px solid var(--acp-alert-border);border-radius:var(--acp-alert-container-shape, var(--mat-sys-corner-small));background-color:var(--acp-alert-bg);color:var(--acp-alert-fg)}.acp-alert[hidden]{display:none}.acp-alert.acp-alert-info{--acp-alert-bg: var(--acp-alert-info-background-color, color-mix(in srgb, light-dark(#005cbb, color-mix(in oklab, #abc7ff 70%, white)) 12%, var(--mat-sys-surface)));--acp-alert-fg: var(--acp-alert-info-text-color, var(--mat-sys-on-surface));--acp-alert-border: var(--acp-alert-info-outline-color, color-mix(in srgb, light-dark(#005cbb, color-mix(in oklab, #abc7ff 70%, white)) 35%, var(--mat-sys-surface)));--acp-alert-icon: var(--acp-alert-info-icon-color, light-dark(#005cbb, color-mix(in oklab, #abc7ff 70%, white)));--acp-alert-solid-bg: var(--acp-alert-info-solid-background-color, light-dark(#005cbb, #00458f));--acp-alert-solid-fg: var(--acp-alert-info-solid-text-color, #ffffff)}.acp-alert.acp-alert-success{--acp-alert-bg: var(--acp-alert-success-background-color, color-mix(in srgb, light-dark(#026e00, color-mix(in oklab, #02e600 70%, white)) 12%, var(--mat-sys-surface)));--acp-alert-fg: var(--acp-alert-success-text-color, var(--mat-sys-on-surface));--acp-alert-border: var(--acp-alert-success-outline-color, color-mix(in srgb, light-dark(#026e00, color-mix(in oklab, #02e600 70%, white)) 35%, var(--mat-sys-surface)));--acp-alert-icon: var(--acp-alert-success-icon-color, light-dark(#026e00, color-mix(in oklab, #02e600 70%, white)));--acp-alert-solid-bg: var(--acp-alert-success-solid-background-color, light-dark(#026e00, #015300));--acp-alert-solid-fg: var(--acp-alert-success-solid-text-color, #ffffff)}.acp-alert.acp-alert-warning{--acp-alert-bg: var(--acp-alert-warning-background-color, color-mix(in srgb, light-dark(#964900, color-mix(in oklab, #ffb787 70%, white)) 12%, var(--mat-sys-surface)));--acp-alert-fg: var(--acp-alert-warning-text-color, var(--mat-sys-on-surface));--acp-alert-border: var(--acp-alert-warning-outline-color, color-mix(in srgb, light-dark(#964900, color-mix(in oklab, #ffb787 70%, white)) 35%, var(--mat-sys-surface)));--acp-alert-icon: var(--acp-alert-warning-icon-color, light-dark(#964900, color-mix(in oklab, #ffb787 70%, white)));--acp-alert-solid-bg: var(--acp-alert-warning-solid-background-color, light-dark(#964900, #723600));--acp-alert-solid-fg: var(--acp-alert-warning-solid-text-color, #ffffff)}.acp-alert.acp-alert-danger{--acp-alert-bg: var(--acp-alert-danger-background-color, color-mix(in srgb, light-dark(#c00100, color-mix(in oklab, #ffb4a8 70%, white)) 12%, var(--mat-sys-surface)));--acp-alert-fg: var(--acp-alert-danger-text-color, var(--mat-sys-on-surface));--acp-alert-border: var(--acp-alert-danger-outline-color, color-mix(in srgb, light-dark(#c00100, color-mix(in oklab, #ffb4a8 70%, white)) 35%, var(--mat-sys-surface)));--acp-alert-icon: var(--acp-alert-danger-icon-color, light-dark(#c00100, color-mix(in oklab, #ffb4a8 70%, white)));--acp-alert-solid-bg: var(--acp-alert-danger-solid-background-color, light-dark(#c00100, #930100));--acp-alert-solid-fg: var(--acp-alert-danger-solid-text-color, #ffffff)}.acp-alert.acp-alert--outlined{border-color:var(--acp-alert-icon);background-color:var(--acp-alert-outlined-background-color, var(--mat-sys-surface));color:var(--acp-alert-outlined-text-color, var(--mat-sys-on-surface))}.acp-alert:not(.acp-alert--filled) .acp-alert-title{color:var(--acp-alert-icon)}.acp-alert.acp-alert--filled{--acp-alert-icon: currentColor;border-color:transparent;background-color:var(--acp-alert-solid-bg);color:var(--acp-alert-solid-fg)}.acp-alert.acp-alert-dismissible{padding-right:.25rem}[dir=rtl] .acp-alert.acp-alert-dismissible{padding-right:1rem;padding-left:.25rem}.acp-alert-icon{flex-shrink:0;width:1.5rem;height:1.5rem;font-size:1.5rem;color:var(--acp-alert-icon)}.acp-alert-body{flex:1;min-width:0;padding-top:calc((1.5rem - 1lh)/2)}.acp-alert-title{margin-bottom:.125rem;font-weight:600}.acp-alert-content:empty,.acp-alert-actions:empty{display:none}.acp-alert-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.acp-alert-close.mat-mdc-icon-button{--mat-icon-button-icon-color: currentColor;--mat-icon-button-state-layer-color: currentColor;--mat-icon-button-state-layer-size: 2.25rem;flex-shrink:0;margin-top:-.375rem;padding:.5rem;color:inherit}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
97
135
|
}
|
|
98
136
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpAlert, decorators: [{
|
|
99
137
|
type: Component,
|
|
100
138
|
args: [{ selector: 'acp-alert', exportAs: 'acpAlert', host: {
|
|
101
|
-
'[class]': 'hostClassList',
|
|
102
|
-
'[class.acp-alert-dismissible]': 'dismissible',
|
|
103
|
-
role: '
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
}], dismissible: [{
|
|
108
|
-
type: Input,
|
|
109
|
-
args: [{ transform: booleanAttribute }]
|
|
110
|
-
}], elevation: [{
|
|
111
|
-
type: Input
|
|
112
|
-
}], closed: [{
|
|
113
|
-
type: Output
|
|
114
|
-
}] } });
|
|
139
|
+
'[class]': 'hostClassList()',
|
|
140
|
+
'[class.acp-alert-dismissible]': 'dismissible()',
|
|
141
|
+
'[attr.role]': 'role()',
|
|
142
|
+
'[attr.hidden]': 'isOpen() ? null : ""',
|
|
143
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconButton, MatIcon], template: "@if (resolvedIcon(); as iconName) {\n<mat-icon class=\"acp-alert-icon\" aria-hidden=\"true\">{{ iconName }}</mat-icon>\n}\n<div class=\"acp-alert-body\">\n @if (heading()) {\n <div class=\"acp-alert-title\">{{ heading() }}</div>\n }\n <div class=\"acp-alert-content\"><ng-content></ng-content></div>\n <div class=\"acp-alert-actions\"><ng-content select=\"[acpAlertActions]\"></ng-content></div>\n</div>\n@if (dismissible()) {\n<button\n class=\"acp-alert-close\"\n matIconButton\n type=\"button\"\n [attr.aria-label]=\"closeLabel()\"\n (click)=\"close()\"\n>\n <svg viewBox=\"0 0 24 24\" width=\"20px\" height=\"20px\" fill=\"currentColor\" focusable=\"false\">\n <path\n d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\"\n />\n </svg>\n</button>\n}\n", styles: [".acp-alert{--acp-alert-bg: var(--acp-alert-background-color, var(--mat-sys-surface-container));--acp-alert-fg: var(--acp-alert-text-color, var(--mat-sys-on-surface));--acp-alert-border: var(--acp-alert-outline-color, var(--mat-sys-outline-variant));--acp-alert-icon: var(--acp-alert-icon-color, var(--mat-sys-on-surface-variant));--acp-alert-solid-bg: var(--acp-alert-solid-background-color, var(--mat-sys-inverse-surface));--acp-alert-solid-fg: var(--acp-alert-solid-text-color, var(--mat-sys-inverse-on-surface));position:relative;display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 1rem;box-sizing:border-box;line-height:1.5;border:1px solid var(--acp-alert-border);border-radius:var(--acp-alert-container-shape, var(--mat-sys-corner-small));background-color:var(--acp-alert-bg);color:var(--acp-alert-fg)}.acp-alert[hidden]{display:none}.acp-alert.acp-alert-info{--acp-alert-bg: var(--acp-alert-info-background-color, color-mix(in srgb, light-dark(#005cbb, color-mix(in oklab, #abc7ff 70%, white)) 12%, var(--mat-sys-surface)));--acp-alert-fg: var(--acp-alert-info-text-color, var(--mat-sys-on-surface));--acp-alert-border: var(--acp-alert-info-outline-color, color-mix(in srgb, light-dark(#005cbb, color-mix(in oklab, #abc7ff 70%, white)) 35%, var(--mat-sys-surface)));--acp-alert-icon: var(--acp-alert-info-icon-color, light-dark(#005cbb, color-mix(in oklab, #abc7ff 70%, white)));--acp-alert-solid-bg: var(--acp-alert-info-solid-background-color, light-dark(#005cbb, #00458f));--acp-alert-solid-fg: var(--acp-alert-info-solid-text-color, #ffffff)}.acp-alert.acp-alert-success{--acp-alert-bg: var(--acp-alert-success-background-color, color-mix(in srgb, light-dark(#026e00, color-mix(in oklab, #02e600 70%, white)) 12%, var(--mat-sys-surface)));--acp-alert-fg: var(--acp-alert-success-text-color, var(--mat-sys-on-surface));--acp-alert-border: var(--acp-alert-success-outline-color, color-mix(in srgb, light-dark(#026e00, color-mix(in oklab, #02e600 70%, white)) 35%, var(--mat-sys-surface)));--acp-alert-icon: var(--acp-alert-success-icon-color, light-dark(#026e00, color-mix(in oklab, #02e600 70%, white)));--acp-alert-solid-bg: var(--acp-alert-success-solid-background-color, light-dark(#026e00, #015300));--acp-alert-solid-fg: var(--acp-alert-success-solid-text-color, #ffffff)}.acp-alert.acp-alert-warning{--acp-alert-bg: var(--acp-alert-warning-background-color, color-mix(in srgb, light-dark(#964900, color-mix(in oklab, #ffb787 70%, white)) 12%, var(--mat-sys-surface)));--acp-alert-fg: var(--acp-alert-warning-text-color, var(--mat-sys-on-surface));--acp-alert-border: var(--acp-alert-warning-outline-color, color-mix(in srgb, light-dark(#964900, color-mix(in oklab, #ffb787 70%, white)) 35%, var(--mat-sys-surface)));--acp-alert-icon: var(--acp-alert-warning-icon-color, light-dark(#964900, color-mix(in oklab, #ffb787 70%, white)));--acp-alert-solid-bg: var(--acp-alert-warning-solid-background-color, light-dark(#964900, #723600));--acp-alert-solid-fg: var(--acp-alert-warning-solid-text-color, #ffffff)}.acp-alert.acp-alert-danger{--acp-alert-bg: var(--acp-alert-danger-background-color, color-mix(in srgb, light-dark(#c00100, color-mix(in oklab, #ffb4a8 70%, white)) 12%, var(--mat-sys-surface)));--acp-alert-fg: var(--acp-alert-danger-text-color, var(--mat-sys-on-surface));--acp-alert-border: var(--acp-alert-danger-outline-color, color-mix(in srgb, light-dark(#c00100, color-mix(in oklab, #ffb4a8 70%, white)) 35%, var(--mat-sys-surface)));--acp-alert-icon: var(--acp-alert-danger-icon-color, light-dark(#c00100, color-mix(in oklab, #ffb4a8 70%, white)));--acp-alert-solid-bg: var(--acp-alert-danger-solid-background-color, light-dark(#c00100, #930100));--acp-alert-solid-fg: var(--acp-alert-danger-solid-text-color, #ffffff)}.acp-alert.acp-alert--outlined{border-color:var(--acp-alert-icon);background-color:var(--acp-alert-outlined-background-color, var(--mat-sys-surface));color:var(--acp-alert-outlined-text-color, var(--mat-sys-on-surface))}.acp-alert:not(.acp-alert--filled) .acp-alert-title{color:var(--acp-alert-icon)}.acp-alert.acp-alert--filled{--acp-alert-icon: currentColor;border-color:transparent;background-color:var(--acp-alert-solid-bg);color:var(--acp-alert-solid-fg)}.acp-alert.acp-alert-dismissible{padding-right:.25rem}[dir=rtl] .acp-alert.acp-alert-dismissible{padding-right:1rem;padding-left:.25rem}.acp-alert-icon{flex-shrink:0;width:1.5rem;height:1.5rem;font-size:1.5rem;color:var(--acp-alert-icon)}.acp-alert-body{flex:1;min-width:0;padding-top:calc((1.5rem - 1lh)/2)}.acp-alert-title{margin-bottom:.125rem;font-weight:600}.acp-alert-content:empty,.acp-alert-actions:empty{display:none}.acp-alert-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.acp-alert-close.mat-mdc-icon-button{--mat-icon-button-icon-color: currentColor;--mat-icon-button-state-layer-color: currentColor;--mat-icon-button-state-layer-size: 2.25rem;flex-shrink:0;margin-top:-.375rem;padding:.5rem;color:inherit}\n"] }]
|
|
144
|
+
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
115
145
|
|
|
116
146
|
const TREND_CONFIGS = {
|
|
117
147
|
up: { value: '↑', icon: 'trending_up', color: 'success' },
|
|
@@ -259,7 +289,7 @@ class AcpBadge {
|
|
|
259
289
|
this.removed.emit();
|
|
260
290
|
}
|
|
261
291
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
262
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpBadge, isStandalone: true, selector: "acp-badge", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingSvgIcon: { classPropertyName: "trailingSvgIcon", publicName: "trailingSvgIcon", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelOverride: { classPropertyName: "ariaLabelOverride", publicName: "ariaLabelOverride", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", removed: "removed" }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ["icon"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "trailingIconTemplate", first: true, predicate: ["trailingIcon"], descendants: true, read: TemplateRef, isSignal: true }], exportAs: ["acpBadge"], ngImport: i0, template: "<mat-chip-set\n class=\"acp-badge__set\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n>\n <mat-chip\n class=\"acp-badge__chip\"\n [ngClass]=\"chipClasses()\"\n [disabled]=\"isDisabled()\"\n [removable]=\"removable()\"\n [highlighted]=\"isHighlighted()\"\n [value]=\"value()\"\n [routerLink]=\"routerLink()\"\n [attr.href]=\"href()\"\n (removed)=\"onRemove($event)\"\n (click)=\"onChipClick($event)\"\n >\n @if (loading()) {\n <span class=\"acp-badge__loader\" aria-hidden=\"true\"></span>\n } @if (iconTemplate()) {\n <span matChipAvatar class=\"acp-badge__avatar\">\n <ng-container [ngTemplateOutlet]=\"iconTemplate()!\"></ng-container>\n </span>\n } @else if (effectiveSvgIcon()) {\n <mat-icon\n matChipAvatar\n class=\"acp-badge__icon\"\n [svgIcon]=\"effectiveSvgIcon()!\"\n aria-hidden=\"true\"\n ></mat-icon>\n } @else if (effectiveIcon()) {\n <mat-icon matChipAvatar class=\"acp-badge__icon\" aria-hidden=\"true\"\n >{{ effectiveIcon() }}</mat-icon\n >\n } @if (label()) {\n <span class=\"acp-badge__label\">{{ label() }}</span>\n } @if (label() && effectiveValue()) {\n <span class=\"acp-badge__separator\" aria-hidden=\"true\">|</span>\n } @if (effectiveValue()) {\n <span class=\"acp-badge__value\">{{ effectiveValue() }}</span>\n } @if (trailingIconTemplate()) {\n <span matChipTrailingIcon class=\"acp-badge__trailing-icon\">\n <ng-container [ngTemplateOutlet]=\"trailingIconTemplate()!\"></ng-container>\n </span>\n } @else if (effectiveTrailingSvgIcon()) {\n <mat-icon\n matChipTrailingIcon\n class=\"acp-badge__trailing-icon\"\n [svgIcon]=\"effectiveTrailingSvgIcon()!\"\n aria-hidden=\"true\"\n ></mat-icon>\n } @else if (effectiveTrailingIcon()) {\n <mat-icon matChipTrailingIcon class=\"acp-badge__trailing-icon\" aria-hidden=\"true\"\n >{{ effectiveTrailingIcon() }}</mat-icon\n >\n } @if (removable()) {\n <button\n matChipRemove\n type=\"button\"\n class=\"acp-badge__remove\"\n aria-label=\"Remove\"\n (click)=\"onRemove($event)\"\n >\n <mat-icon aria-hidden=\"true\">cancel</mat-icon>\n </button>\n }\n </mat-chip>\n</mat-chip-set>\n", styles: [".acp-badge{--acp-badge-bg: var(--acp-badge-primary-bg, var(--mat-sys-primary));--acp-badge-fg: var(--acp-badge-primary-color, var(--mat-sys-on-primary));display:inline-flex;vertical-align:middle;max-width:100%}.acp-badge__set{display:inline-flex;max-width:100%}.acp-badge__chip.mat-mdc-chip{position:relative;max-width:100%}.acp-badge__label,.acp-badge__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acp-badge__separator{margin:0 6px;opacity:.6}.acp-badge__loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:inherit;border-radius:inherit;z-index:1}.acp-badge__loader:after{content:\"\";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:acp-badge-spin .75s linear infinite}.acp-badge__remove{cursor:pointer}.acp-badge__remove:focus-visible{outline:2px solid currentColor;outline-offset:1px}@keyframes acp-badge-spin{to{transform:rotate(360deg)}}.acp-badge.acp-badge--primary{--acp-badge-bg: var(--acp-badge-primary-bg, var(--mat-sys-primary));--acp-badge-fg: var(--acp-badge-primary-color, var(--mat-sys-on-primary))}.acp-badge.acp-badge--secondary{--acp-badge-bg: var(--acp-badge-secondary-bg, var(--mat-sys-secondary));--acp-badge-fg: var(--acp-badge-secondary-color, var(--mat-sys-on-secondary))}.acp-badge.acp-badge--tertiary{--acp-badge-bg: var(--acp-badge-tertiary-bg, var(--mat-sys-tertiary));--acp-badge-fg: var(--acp-badge-tertiary-color, var(--mat-sys-on-tertiary))}.acp-badge.acp-badge--success{--acp-badge-bg: var(--acp-badge-success-bg, light-dark(#026e00, #02e600));--acp-badge-fg: var(--acp-badge-success-fg, light-dark(#cbffb8, #013a00))}.acp-badge.acp-badge--warning{--acp-badge-bg: var(--acp-badge-warning-bg, light-dark(#964900, #ffb787));--acp-badge-fg: var(--acp-badge-warning-fg, light-dark(#ffede4, #502400))}.acp-badge.acp-badge--danger{--acp-badge-bg: var(--acp-badge-danger-bg, light-dark(#c00100, #ffb4a8));--acp-badge-fg: var(--acp-badge-danger-fg, light-dark(#ffedea, #690100))}.acp-badge.acp-badge--info{--acp-badge-bg: var(--acp-badge-info-bg, light-dark(#005cbb, #abc7ff));--acp-badge-fg: var(--acp-badge-info-fg, light-dark(#ecf0ff, #002f65))}.acp-badge.acp-badge--neutral{--acp-badge-bg: var(--acp-badge-neutral-bg, var(--mat-sys-surface-variant));--acp-badge-fg: var(--acp-badge-neutral-color, var(--mat-sys-on-surface-variant))}.acp-badge.acp-badge--custom{--acp-badge-bg: var(--acp-badge-custom-bg, var(--acp-badge-custom-bg, var(--mat-sys-surface-container)));--acp-badge-fg: var(--acp-badge-custom-fg, var(--acp-badge-custom-color, var(--mat-sys-on-surface)))}.acp-badge.acp-badge--filled .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: var(--acp-badge-bg);--mat-chip-elevated-selected-container-color: var(--acp-badge-bg);--mat-chip-label-text-color: var(--acp-badge-fg);--mat-chip-selected-label-text-color: var(--acp-badge-fg);--mat-chip-with-icon-icon-color: var(--acp-badge-fg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-fg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-fg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-fg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--outlined .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: transparent;--mat-chip-elevated-selected-container-color: transparent;--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: var(--acp-badge-bg);--mat-chip-outline-width: 1px}.acp-badge.acp-badge--soft .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: color-mix(in srgb, var(--acp-badge-bg) 12%, transparent);--mat-chip-elevated-selected-container-color: color-mix(in srgb, var(--acp-badge-bg) 12%, transparent);--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--tonal .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: color-mix(in srgb, var(--acp-badge-bg) 22%, transparent);--mat-chip-elevated-selected-container-color: color-mix(in srgb, var(--acp-badge-bg) 22%, transparent);--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--text .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: transparent;--mat-chip-elevated-selected-container-color: transparent;--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--xs .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 20px;--mat-chip-label-text-size: 10px}.acp-badge.acp-badge--xs .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 12px}.acp-badge.acp-badge--sm .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 24px;--mat-chip-label-text-size: 11px}.acp-badge.acp-badge--sm .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 14px}.acp-badge.acp-badge--md .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 28px;--mat-chip-label-text-size: 12px}.acp-badge.acp-badge--md .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 16px}.acp-badge.acp-badge--lg .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 32px;--mat-chip-label-text-size: 14px}.acp-badge.acp-badge--lg .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 18px}.acp-badge.acp-badge--rounded .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: var(--acp-badge-container-shape, var(--mat-sys-corner-small))}.acp-badge.acp-badge--pill .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: var(--acp-badge-pill-shape, var(--mat-sys-corner-full))}.acp-badge.acp-badge--square .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: 0}.acp-badge__chip.mat-mdc-chip .mat-icon{width:var(--acp-badge-icon-size, 18px);height:var(--acp-badge-icon-size, 18px);font-size:var(--acp-badge-icon-size, 18px);line-height:var(--acp-badge-icon-size, 18px)}.acp-badge.acp-badge--interactive .acp-badge__chip.mat-mdc-chip{cursor:pointer}.acp-badge.acp-badge--disabled .acp-badge__chip.mat-mdc-chip{cursor:not-allowed;opacity:.5}.acp-badge.acp-badge--loading .acp-badge__chip.mat-mdc-chip{pointer-events:none}.acp-badge.acp-badge--selected .acp-badge__chip.mat-mdc-chip.mdc-evolution-chip--selected,.acp-badge.acp-badge--selected .acp-badge__chip.mat-mdc-chip.mat-mdc-chip-highlighted{box-shadow:inset 0 0 0 2px currentColor}@media(prefers-reduced-motion:reduce){.acp-badge__loader:after{animation:none}}@media(prefers-contrast:more){.acp-badge__chip.mat-mdc-chip{outline:2px solid currentColor;outline-offset:1px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
292
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpBadge, isStandalone: true, selector: "acp-badge", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingSvgIcon: { classPropertyName: "trailingSvgIcon", publicName: "trailingSvgIcon", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelOverride: { classPropertyName: "ariaLabelOverride", publicName: "ariaLabelOverride", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", removed: "removed" }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ["icon"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "trailingIconTemplate", first: true, predicate: ["trailingIcon"], descendants: true, read: TemplateRef, isSignal: true }], exportAs: ["acpBadge"], ngImport: i0, template: "<mat-chip-set\n class=\"acp-badge__set\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n>\n <mat-chip\n class=\"acp-badge__chip\"\n [ngClass]=\"chipClasses()\"\n [disabled]=\"isDisabled()\"\n [removable]=\"removable()\"\n [highlighted]=\"isHighlighted()\"\n [value]=\"value()\"\n [routerLink]=\"routerLink()\"\n [attr.href]=\"href()\"\n (removed)=\"onRemove($event)\"\n (click)=\"onChipClick($event)\"\n >\n @if (loading()) {\n <span class=\"acp-badge__loader\" aria-hidden=\"true\"></span>\n } @if (iconTemplate()) {\n <span matChipAvatar class=\"acp-badge__avatar\">\n <ng-container [ngTemplateOutlet]=\"iconTemplate()!\"></ng-container>\n </span>\n } @else if (effectiveSvgIcon()) {\n <mat-icon\n matChipAvatar\n class=\"acp-badge__icon\"\n [svgIcon]=\"effectiveSvgIcon()!\"\n aria-hidden=\"true\"\n ></mat-icon>\n } @else if (effectiveIcon()) {\n <mat-icon matChipAvatar class=\"acp-badge__icon\" aria-hidden=\"true\"\n >{{ effectiveIcon() }}</mat-icon\n >\n } @if (label()) {\n <span class=\"acp-badge__label\">{{ label() }}</span>\n } @if (label() && effectiveValue()) {\n <span class=\"acp-badge__separator\" aria-hidden=\"true\">|</span>\n } @if (effectiveValue()) {\n <span class=\"acp-badge__value\">{{ effectiveValue() }}</span>\n } @if (trailingIconTemplate()) {\n <span matChipTrailingIcon class=\"acp-badge__trailing-icon\">\n <ng-container [ngTemplateOutlet]=\"trailingIconTemplate()!\"></ng-container>\n </span>\n } @else if (effectiveTrailingSvgIcon()) {\n <mat-icon\n matChipTrailingIcon\n class=\"acp-badge__trailing-icon\"\n [svgIcon]=\"effectiveTrailingSvgIcon()!\"\n aria-hidden=\"true\"\n ></mat-icon>\n } @else if (effectiveTrailingIcon()) {\n <mat-icon matChipTrailingIcon class=\"acp-badge__trailing-icon\" aria-hidden=\"true\"\n >{{ effectiveTrailingIcon() }}</mat-icon\n >\n } @if (removable()) {\n <button\n matChipRemove\n type=\"button\"\n class=\"acp-badge__remove\"\n aria-label=\"Remove\"\n (click)=\"onRemove($event)\"\n >\n <mat-icon aria-hidden=\"true\">cancel</mat-icon>\n </button>\n }\n </mat-chip>\n</mat-chip-set>\n", styles: [".acp-badge{--acp-badge-bg: var(--acp-badge-primary-bg, var(--mat-sys-primary));--acp-badge-fg: var(--acp-badge-primary-color, var(--mat-sys-on-primary));display:inline-flex;vertical-align:middle;max-width:100%}.acp-badge__set{display:inline-flex;max-width:100%}.acp-badge__chip.mat-mdc-chip{position:relative;max-width:100%}.acp-badge__label,.acp-badge__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acp-badge__separator{margin:0 6px;opacity:.6}.acp-badge__loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:inherit;border-radius:inherit;z-index:1}.acp-badge__loader:after{content:\"\";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:acp-badge-spin .75s linear infinite}.acp-badge__remove{cursor:pointer}.acp-badge__remove:focus-visible{outline:2px solid currentColor;outline-offset:1px}@keyframes acp-badge-spin{to{transform:rotate(360deg)}}.acp-badge.acp-badge--primary{--acp-badge-bg: var(--acp-badge-primary-bg, var(--mat-sys-primary));--acp-badge-fg: var(--acp-badge-primary-color, var(--mat-sys-on-primary))}.acp-badge.acp-badge--secondary{--acp-badge-bg: var(--acp-badge-secondary-bg, var(--mat-sys-secondary));--acp-badge-fg: var(--acp-badge-secondary-color, var(--mat-sys-on-secondary))}.acp-badge.acp-badge--tertiary{--acp-badge-bg: var(--acp-badge-tertiary-bg, var(--mat-sys-tertiary));--acp-badge-fg: var(--acp-badge-tertiary-color, var(--mat-sys-on-tertiary))}.acp-badge.acp-badge--success{--acp-badge-bg: var(--acp-badge-success-bg, light-dark(#026e00, color-mix(in oklab, #02e600 70%, white)));--acp-badge-fg: var(--acp-badge-success-fg, light-dark(#cbffb8, #013a00))}.acp-badge.acp-badge--warning{--acp-badge-bg: var(--acp-badge-warning-bg, light-dark(#964900, color-mix(in oklab, #ffb787 70%, white)));--acp-badge-fg: var(--acp-badge-warning-fg, light-dark(#ffede4, #502400))}.acp-badge.acp-badge--danger{--acp-badge-bg: var(--acp-badge-danger-bg, light-dark(#c00100, color-mix(in oklab, #ffb4a8 70%, white)));--acp-badge-fg: var(--acp-badge-danger-fg, light-dark(#ffedea, #690100))}.acp-badge.acp-badge--info{--acp-badge-bg: var(--acp-badge-info-bg, light-dark(#005cbb, color-mix(in oklab, #abc7ff 70%, white)));--acp-badge-fg: var(--acp-badge-info-fg, light-dark(#ecf0ff, #002f65))}.acp-badge.acp-badge--neutral{--acp-badge-bg: var(--acp-badge-neutral-bg, var(--mat-sys-surface-variant));--acp-badge-fg: var(--acp-badge-neutral-color, var(--mat-sys-on-surface-variant))}.acp-badge.acp-badge--neutral:not(.acp-badge--filled){--acp-badge-bg: var(--acp-badge-neutral-color, var(--mat-sys-on-surface-variant))}.acp-badge.acp-badge--custom{--acp-badge-bg: var(--acp-badge-custom-bg, var(--acp-badge-custom-bg, var(--mat-sys-surface-container)));--acp-badge-fg: var(--acp-badge-custom-fg, var(--acp-badge-custom-color, var(--mat-sys-on-surface)))}.acp-badge.acp-badge--filled .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: var(--acp-badge-bg);--mat-chip-elevated-selected-container-color: var(--acp-badge-bg);--mat-chip-label-text-color: var(--acp-badge-fg);--mat-chip-selected-label-text-color: var(--acp-badge-fg);--mat-chip-with-icon-icon-color: var(--acp-badge-fg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-fg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-fg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-fg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--outlined .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: transparent;--mat-chip-elevated-selected-container-color: transparent;--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: var(--acp-badge-bg);--mat-chip-outline-width: 1px}.acp-badge.acp-badge--soft .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: color-mix(in srgb, var(--acp-badge-bg) 12%, transparent);--mat-chip-elevated-selected-container-color: color-mix(in srgb, var(--acp-badge-bg) 12%, transparent);--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--tonal .acp-badge__chip.mat-mdc-chip{--acp-badge-tonal-fg: light-dark( color-mix(in oklab, var(--acp-badge-bg) 80%, black), var(--acp-badge-bg) );--mat-chip-elevated-container-color: color-mix(in srgb, var(--acp-badge-bg) 22%, transparent);--mat-chip-elevated-selected-container-color: color-mix(in srgb, var(--acp-badge-bg) 22%, transparent);--mat-chip-label-text-color: var(--acp-badge-tonal-fg);--mat-chip-selected-label-text-color: var(--acp-badge-tonal-fg);--mat-chip-with-icon-icon-color: var(--acp-badge-tonal-fg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-tonal-fg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-tonal-fg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-tonal-fg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--text .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: transparent;--mat-chip-elevated-selected-container-color: transparent;--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--xs .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 20px;--mat-chip-label-text-size: 10px}.acp-badge.acp-badge--xs .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 12px}.acp-badge.acp-badge--sm .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 24px;--mat-chip-label-text-size: 11px}.acp-badge.acp-badge--sm .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 14px}.acp-badge.acp-badge--md .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 28px;--mat-chip-label-text-size: 12px}.acp-badge.acp-badge--md .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 16px}.acp-badge.acp-badge--lg .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 32px;--mat-chip-label-text-size: 14px}.acp-badge.acp-badge--lg .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 18px}.acp-badge.acp-badge--rounded .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: var(--acp-badge-container-shape, var(--mat-sys-corner-small))}.acp-badge.acp-badge--pill .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: var(--acp-badge-pill-shape, var(--mat-sys-corner-full))}.acp-badge.acp-badge--square .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: 0}.acp-badge__chip.mat-mdc-chip .mat-icon{width:var(--acp-badge-icon-size, 18px);height:var(--acp-badge-icon-size, 18px);font-size:var(--acp-badge-icon-size, 18px);line-height:var(--acp-badge-icon-size, 18px)}.acp-badge.acp-badge--interactive .acp-badge__chip.mat-mdc-chip{cursor:pointer}.acp-badge.acp-badge--disabled .acp-badge__chip.mat-mdc-chip{cursor:not-allowed;opacity:.5}.acp-badge.acp-badge--loading .acp-badge__chip.mat-mdc-chip{pointer-events:none}.acp-badge.acp-badge--selected .acp-badge__chip.mat-mdc-chip.mdc-evolution-chip--selected,.acp-badge.acp-badge--selected .acp-badge__chip.mat-mdc-chip.mat-mdc-chip-highlighted{box-shadow:inset 0 0 0 2px currentColor}@media(prefers-reduced-motion:reduce){.acp-badge__loader:after{animation:none}}@media(prefers-contrast:more){.acp-badge__chip.mat-mdc-chip{outline:2px solid currentColor;outline-offset:1px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
263
293
|
}
|
|
264
294
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpBadge, decorators: [{
|
|
265
295
|
type: Component,
|
|
@@ -275,7 +305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
275
305
|
MatIconModule,
|
|
276
306
|
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
277
307
|
'[class]': 'hostClasses()',
|
|
278
|
-
}, template: "<mat-chip-set\n class=\"acp-badge__set\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n>\n <mat-chip\n class=\"acp-badge__chip\"\n [ngClass]=\"chipClasses()\"\n [disabled]=\"isDisabled()\"\n [removable]=\"removable()\"\n [highlighted]=\"isHighlighted()\"\n [value]=\"value()\"\n [routerLink]=\"routerLink()\"\n [attr.href]=\"href()\"\n (removed)=\"onRemove($event)\"\n (click)=\"onChipClick($event)\"\n >\n @if (loading()) {\n <span class=\"acp-badge__loader\" aria-hidden=\"true\"></span>\n } @if (iconTemplate()) {\n <span matChipAvatar class=\"acp-badge__avatar\">\n <ng-container [ngTemplateOutlet]=\"iconTemplate()!\"></ng-container>\n </span>\n } @else if (effectiveSvgIcon()) {\n <mat-icon\n matChipAvatar\n class=\"acp-badge__icon\"\n [svgIcon]=\"effectiveSvgIcon()!\"\n aria-hidden=\"true\"\n ></mat-icon>\n } @else if (effectiveIcon()) {\n <mat-icon matChipAvatar class=\"acp-badge__icon\" aria-hidden=\"true\"\n >{{ effectiveIcon() }}</mat-icon\n >\n } @if (label()) {\n <span class=\"acp-badge__label\">{{ label() }}</span>\n } @if (label() && effectiveValue()) {\n <span class=\"acp-badge__separator\" aria-hidden=\"true\">|</span>\n } @if (effectiveValue()) {\n <span class=\"acp-badge__value\">{{ effectiveValue() }}</span>\n } @if (trailingIconTemplate()) {\n <span matChipTrailingIcon class=\"acp-badge__trailing-icon\">\n <ng-container [ngTemplateOutlet]=\"trailingIconTemplate()!\"></ng-container>\n </span>\n } @else if (effectiveTrailingSvgIcon()) {\n <mat-icon\n matChipTrailingIcon\n class=\"acp-badge__trailing-icon\"\n [svgIcon]=\"effectiveTrailingSvgIcon()!\"\n aria-hidden=\"true\"\n ></mat-icon>\n } @else if (effectiveTrailingIcon()) {\n <mat-icon matChipTrailingIcon class=\"acp-badge__trailing-icon\" aria-hidden=\"true\"\n >{{ effectiveTrailingIcon() }}</mat-icon\n >\n } @if (removable()) {\n <button\n matChipRemove\n type=\"button\"\n class=\"acp-badge__remove\"\n aria-label=\"Remove\"\n (click)=\"onRemove($event)\"\n >\n <mat-icon aria-hidden=\"true\">cancel</mat-icon>\n </button>\n }\n </mat-chip>\n</mat-chip-set>\n", styles: [".acp-badge{--acp-badge-bg: var(--acp-badge-primary-bg, var(--mat-sys-primary));--acp-badge-fg: var(--acp-badge-primary-color, var(--mat-sys-on-primary));display:inline-flex;vertical-align:middle;max-width:100%}.acp-badge__set{display:inline-flex;max-width:100%}.acp-badge__chip.mat-mdc-chip{position:relative;max-width:100%}.acp-badge__label,.acp-badge__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acp-badge__separator{margin:0 6px;opacity:.6}.acp-badge__loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:inherit;border-radius:inherit;z-index:1}.acp-badge__loader:after{content:\"\";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:acp-badge-spin .75s linear infinite}.acp-badge__remove{cursor:pointer}.acp-badge__remove:focus-visible{outline:2px solid currentColor;outline-offset:1px}@keyframes acp-badge-spin{to{transform:rotate(360deg)}}.acp-badge.acp-badge--primary{--acp-badge-bg: var(--acp-badge-primary-bg, var(--mat-sys-primary));--acp-badge-fg: var(--acp-badge-primary-color, var(--mat-sys-on-primary))}.acp-badge.acp-badge--secondary{--acp-badge-bg: var(--acp-badge-secondary-bg, var(--mat-sys-secondary));--acp-badge-fg: var(--acp-badge-secondary-color, var(--mat-sys-on-secondary))}.acp-badge.acp-badge--tertiary{--acp-badge-bg: var(--acp-badge-tertiary-bg, var(--mat-sys-tertiary));--acp-badge-fg: var(--acp-badge-tertiary-color, var(--mat-sys-on-tertiary))}.acp-badge.acp-badge--success{--acp-badge-bg: var(--acp-badge-success-bg, light-dark(#026e00, #02e600));--acp-badge-fg: var(--acp-badge-success-fg, light-dark(#cbffb8, #013a00))}.acp-badge.acp-badge--warning{--acp-badge-bg: var(--acp-badge-warning-bg, light-dark(#964900, #ffb787));--acp-badge-fg: var(--acp-badge-warning-fg, light-dark(#ffede4, #502400))}.acp-badge.acp-badge--danger{--acp-badge-bg: var(--acp-badge-danger-bg, light-dark(#c00100, #ffb4a8));--acp-badge-fg: var(--acp-badge-danger-fg, light-dark(#ffedea, #690100))}.acp-badge.acp-badge--info{--acp-badge-bg: var(--acp-badge-info-bg, light-dark(#005cbb, #abc7ff));--acp-badge-fg: var(--acp-badge-info-fg, light-dark(#ecf0ff, #002f65))}.acp-badge.acp-badge--neutral{--acp-badge-bg: var(--acp-badge-neutral-bg, var(--mat-sys-surface-variant));--acp-badge-fg: var(--acp-badge-neutral-color, var(--mat-sys-on-surface-variant))}.acp-badge.acp-badge--custom{--acp-badge-bg: var(--acp-badge-custom-bg, var(--acp-badge-custom-bg, var(--mat-sys-surface-container)));--acp-badge-fg: var(--acp-badge-custom-fg, var(--acp-badge-custom-color, var(--mat-sys-on-surface)))}.acp-badge.acp-badge--filled .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: var(--acp-badge-bg);--mat-chip-elevated-selected-container-color: var(--acp-badge-bg);--mat-chip-label-text-color: var(--acp-badge-fg);--mat-chip-selected-label-text-color: var(--acp-badge-fg);--mat-chip-with-icon-icon-color: var(--acp-badge-fg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-fg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-fg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-fg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--outlined .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: transparent;--mat-chip-elevated-selected-container-color: transparent;--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: var(--acp-badge-bg);--mat-chip-outline-width: 1px}.acp-badge.acp-badge--soft .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: color-mix(in srgb, var(--acp-badge-bg) 12%, transparent);--mat-chip-elevated-selected-container-color: color-mix(in srgb, var(--acp-badge-bg) 12%, transparent);--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--tonal .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: color-mix(in srgb, var(--acp-badge-bg) 22%, transparent);--mat-chip-elevated-selected-container-color: color-mix(in srgb, var(--acp-badge-bg) 22%, transparent);--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--text .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: transparent;--mat-chip-elevated-selected-container-color: transparent;--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--xs .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 20px;--mat-chip-label-text-size: 10px}.acp-badge.acp-badge--xs .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 12px}.acp-badge.acp-badge--sm .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 24px;--mat-chip-label-text-size: 11px}.acp-badge.acp-badge--sm .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 14px}.acp-badge.acp-badge--md .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 28px;--mat-chip-label-text-size: 12px}.acp-badge.acp-badge--md .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 16px}.acp-badge.acp-badge--lg .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 32px;--mat-chip-label-text-size: 14px}.acp-badge.acp-badge--lg .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 18px}.acp-badge.acp-badge--rounded .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: var(--acp-badge-container-shape, var(--mat-sys-corner-small))}.acp-badge.acp-badge--pill .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: var(--acp-badge-pill-shape, var(--mat-sys-corner-full))}.acp-badge.acp-badge--square .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: 0}.acp-badge__chip.mat-mdc-chip .mat-icon{width:var(--acp-badge-icon-size, 18px);height:var(--acp-badge-icon-size, 18px);font-size:var(--acp-badge-icon-size, 18px);line-height:var(--acp-badge-icon-size, 18px)}.acp-badge.acp-badge--interactive .acp-badge__chip.mat-mdc-chip{cursor:pointer}.acp-badge.acp-badge--disabled .acp-badge__chip.mat-mdc-chip{cursor:not-allowed;opacity:.5}.acp-badge.acp-badge--loading .acp-badge__chip.mat-mdc-chip{pointer-events:none}.acp-badge.acp-badge--selected .acp-badge__chip.mat-mdc-chip.mdc-evolution-chip--selected,.acp-badge.acp-badge--selected .acp-badge__chip.mat-mdc-chip.mat-mdc-chip-highlighted{box-shadow:inset 0 0 0 2px currentColor}@media(prefers-reduced-motion:reduce){.acp-badge__loader:after{animation:none}}@media(prefers-contrast:more){.acp-badge__chip.mat-mdc-chip{outline:2px solid currentColor;outline-offset:1px}}\n"] }]
|
|
308
|
+
}, template: "<mat-chip-set\n class=\"acp-badge__set\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n>\n <mat-chip\n class=\"acp-badge__chip\"\n [ngClass]=\"chipClasses()\"\n [disabled]=\"isDisabled()\"\n [removable]=\"removable()\"\n [highlighted]=\"isHighlighted()\"\n [value]=\"value()\"\n [routerLink]=\"routerLink()\"\n [attr.href]=\"href()\"\n (removed)=\"onRemove($event)\"\n (click)=\"onChipClick($event)\"\n >\n @if (loading()) {\n <span class=\"acp-badge__loader\" aria-hidden=\"true\"></span>\n } @if (iconTemplate()) {\n <span matChipAvatar class=\"acp-badge__avatar\">\n <ng-container [ngTemplateOutlet]=\"iconTemplate()!\"></ng-container>\n </span>\n } @else if (effectiveSvgIcon()) {\n <mat-icon\n matChipAvatar\n class=\"acp-badge__icon\"\n [svgIcon]=\"effectiveSvgIcon()!\"\n aria-hidden=\"true\"\n ></mat-icon>\n } @else if (effectiveIcon()) {\n <mat-icon matChipAvatar class=\"acp-badge__icon\" aria-hidden=\"true\"\n >{{ effectiveIcon() }}</mat-icon\n >\n } @if (label()) {\n <span class=\"acp-badge__label\">{{ label() }}</span>\n } @if (label() && effectiveValue()) {\n <span class=\"acp-badge__separator\" aria-hidden=\"true\">|</span>\n } @if (effectiveValue()) {\n <span class=\"acp-badge__value\">{{ effectiveValue() }}</span>\n } @if (trailingIconTemplate()) {\n <span matChipTrailingIcon class=\"acp-badge__trailing-icon\">\n <ng-container [ngTemplateOutlet]=\"trailingIconTemplate()!\"></ng-container>\n </span>\n } @else if (effectiveTrailingSvgIcon()) {\n <mat-icon\n matChipTrailingIcon\n class=\"acp-badge__trailing-icon\"\n [svgIcon]=\"effectiveTrailingSvgIcon()!\"\n aria-hidden=\"true\"\n ></mat-icon>\n } @else if (effectiveTrailingIcon()) {\n <mat-icon matChipTrailingIcon class=\"acp-badge__trailing-icon\" aria-hidden=\"true\"\n >{{ effectiveTrailingIcon() }}</mat-icon\n >\n } @if (removable()) {\n <button\n matChipRemove\n type=\"button\"\n class=\"acp-badge__remove\"\n aria-label=\"Remove\"\n (click)=\"onRemove($event)\"\n >\n <mat-icon aria-hidden=\"true\">cancel</mat-icon>\n </button>\n }\n </mat-chip>\n</mat-chip-set>\n", styles: [".acp-badge{--acp-badge-bg: var(--acp-badge-primary-bg, var(--mat-sys-primary));--acp-badge-fg: var(--acp-badge-primary-color, var(--mat-sys-on-primary));display:inline-flex;vertical-align:middle;max-width:100%}.acp-badge__set{display:inline-flex;max-width:100%}.acp-badge__chip.mat-mdc-chip{position:relative;max-width:100%}.acp-badge__label,.acp-badge__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acp-badge__separator{margin:0 6px;opacity:.6}.acp-badge__loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:inherit;border-radius:inherit;z-index:1}.acp-badge__loader:after{content:\"\";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:acp-badge-spin .75s linear infinite}.acp-badge__remove{cursor:pointer}.acp-badge__remove:focus-visible{outline:2px solid currentColor;outline-offset:1px}@keyframes acp-badge-spin{to{transform:rotate(360deg)}}.acp-badge.acp-badge--primary{--acp-badge-bg: var(--acp-badge-primary-bg, var(--mat-sys-primary));--acp-badge-fg: var(--acp-badge-primary-color, var(--mat-sys-on-primary))}.acp-badge.acp-badge--secondary{--acp-badge-bg: var(--acp-badge-secondary-bg, var(--mat-sys-secondary));--acp-badge-fg: var(--acp-badge-secondary-color, var(--mat-sys-on-secondary))}.acp-badge.acp-badge--tertiary{--acp-badge-bg: var(--acp-badge-tertiary-bg, var(--mat-sys-tertiary));--acp-badge-fg: var(--acp-badge-tertiary-color, var(--mat-sys-on-tertiary))}.acp-badge.acp-badge--success{--acp-badge-bg: var(--acp-badge-success-bg, light-dark(#026e00, color-mix(in oklab, #02e600 70%, white)));--acp-badge-fg: var(--acp-badge-success-fg, light-dark(#cbffb8, #013a00))}.acp-badge.acp-badge--warning{--acp-badge-bg: var(--acp-badge-warning-bg, light-dark(#964900, color-mix(in oklab, #ffb787 70%, white)));--acp-badge-fg: var(--acp-badge-warning-fg, light-dark(#ffede4, #502400))}.acp-badge.acp-badge--danger{--acp-badge-bg: var(--acp-badge-danger-bg, light-dark(#c00100, color-mix(in oklab, #ffb4a8 70%, white)));--acp-badge-fg: var(--acp-badge-danger-fg, light-dark(#ffedea, #690100))}.acp-badge.acp-badge--info{--acp-badge-bg: var(--acp-badge-info-bg, light-dark(#005cbb, color-mix(in oklab, #abc7ff 70%, white)));--acp-badge-fg: var(--acp-badge-info-fg, light-dark(#ecf0ff, #002f65))}.acp-badge.acp-badge--neutral{--acp-badge-bg: var(--acp-badge-neutral-bg, var(--mat-sys-surface-variant));--acp-badge-fg: var(--acp-badge-neutral-color, var(--mat-sys-on-surface-variant))}.acp-badge.acp-badge--neutral:not(.acp-badge--filled){--acp-badge-bg: var(--acp-badge-neutral-color, var(--mat-sys-on-surface-variant))}.acp-badge.acp-badge--custom{--acp-badge-bg: var(--acp-badge-custom-bg, var(--acp-badge-custom-bg, var(--mat-sys-surface-container)));--acp-badge-fg: var(--acp-badge-custom-fg, var(--acp-badge-custom-color, var(--mat-sys-on-surface)))}.acp-badge.acp-badge--filled .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: var(--acp-badge-bg);--mat-chip-elevated-selected-container-color: var(--acp-badge-bg);--mat-chip-label-text-color: var(--acp-badge-fg);--mat-chip-selected-label-text-color: var(--acp-badge-fg);--mat-chip-with-icon-icon-color: var(--acp-badge-fg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-fg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-fg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-fg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--outlined .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: transparent;--mat-chip-elevated-selected-container-color: transparent;--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: var(--acp-badge-bg);--mat-chip-outline-width: 1px}.acp-badge.acp-badge--soft .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: color-mix(in srgb, var(--acp-badge-bg) 12%, transparent);--mat-chip-elevated-selected-container-color: color-mix(in srgb, var(--acp-badge-bg) 12%, transparent);--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--tonal .acp-badge__chip.mat-mdc-chip{--acp-badge-tonal-fg: light-dark( color-mix(in oklab, var(--acp-badge-bg) 80%, black), var(--acp-badge-bg) );--mat-chip-elevated-container-color: color-mix(in srgb, var(--acp-badge-bg) 22%, transparent);--mat-chip-elevated-selected-container-color: color-mix(in srgb, var(--acp-badge-bg) 22%, transparent);--mat-chip-label-text-color: var(--acp-badge-tonal-fg);--mat-chip-selected-label-text-color: var(--acp-badge-tonal-fg);--mat-chip-with-icon-icon-color: var(--acp-badge-tonal-fg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-tonal-fg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-tonal-fg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-tonal-fg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--text .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: transparent;--mat-chip-elevated-selected-container-color: transparent;--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--xs .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 20px;--mat-chip-label-text-size: 10px}.acp-badge.acp-badge--xs .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 12px}.acp-badge.acp-badge--sm .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 24px;--mat-chip-label-text-size: 11px}.acp-badge.acp-badge--sm .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 14px}.acp-badge.acp-badge--md .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 28px;--mat-chip-label-text-size: 12px}.acp-badge.acp-badge--md .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 16px}.acp-badge.acp-badge--lg .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 32px;--mat-chip-label-text-size: 14px}.acp-badge.acp-badge--lg .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 18px}.acp-badge.acp-badge--rounded .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: var(--acp-badge-container-shape, var(--mat-sys-corner-small))}.acp-badge.acp-badge--pill .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: var(--acp-badge-pill-shape, var(--mat-sys-corner-full))}.acp-badge.acp-badge--square .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: 0}.acp-badge__chip.mat-mdc-chip .mat-icon{width:var(--acp-badge-icon-size, 18px);height:var(--acp-badge-icon-size, 18px);font-size:var(--acp-badge-icon-size, 18px);line-height:var(--acp-badge-icon-size, 18px)}.acp-badge.acp-badge--interactive .acp-badge__chip.mat-mdc-chip{cursor:pointer}.acp-badge.acp-badge--disabled .acp-badge__chip.mat-mdc-chip{cursor:not-allowed;opacity:.5}.acp-badge.acp-badge--loading .acp-badge__chip.mat-mdc-chip{pointer-events:none}.acp-badge.acp-badge--selected .acp-badge__chip.mat-mdc-chip.mdc-evolution-chip--selected,.acp-badge.acp-badge--selected .acp-badge__chip.mat-mdc-chip.mat-mdc-chip-highlighted{box-shadow:inset 0 0 0 2px currentColor}@media(prefers-reduced-motion:reduce){.acp-badge__loader:after{animation:none}}@media(prefers-contrast:more){.acp-badge__chip.mat-mdc-chip{outline:2px solid currentColor;outline-offset:1px}}\n"] }]
|
|
279
309
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], svgIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "svgIcon", required: false }] }], trailingSvgIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingSvgIcon", required: false }] }], trend: [{ type: i0.Input, args: [{ isSignal: true, alias: "trend", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], highlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlighted", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], ariaLabelOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelOverride", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], removed: [{ type: i0.Output, args: ["removed"] }], iconTemplate: [{ type: i0.ContentChild, args: ['icon', { ...{ read: TemplateRef }, isSignal: true }] }], trailingIconTemplate: [{ type: i0.ContentChild, args: ['trailingIcon', { ...{ read: TemplateRef }, isSignal: true }] }] } });
|
|
280
310
|
|
|
281
311
|
const ACP_BADGE_COLORS = [
|
|
@@ -299,168 +329,6 @@ const ACP_BADGE_VARIANTS = [
|
|
|
299
329
|
const ACP_BADGE_SIZES = ['xs', 'sm', 'md', 'lg'];
|
|
300
330
|
const ACP_BADGE_SHAPES = ['rounded', 'pill', 'square'];
|
|
301
331
|
|
|
302
|
-
/**
|
|
303
|
-
* A versatile card component that wraps Angular Material's mat-card with additional functionality
|
|
304
|
-
* and customization options. This component provides a consistent card layout with configurable
|
|
305
|
-
* header, content, and action areas.
|
|
306
|
-
*/
|
|
307
|
-
class DynamicCard {
|
|
308
|
-
// Header inputs
|
|
309
|
-
/**
|
|
310
|
-
* The title text to display in the card header.
|
|
311
|
-
* @default null
|
|
312
|
-
*/
|
|
313
|
-
cardTitle = input(null, /* @ts-ignore */
|
|
314
|
-
...(ngDevMode ? [{ debugName: "cardTitle" }] : /* istanbul ignore next */ []));
|
|
315
|
-
/**
|
|
316
|
-
* The subtitle text to display in the card header.
|
|
317
|
-
* @default null
|
|
318
|
-
*/
|
|
319
|
-
cardSubtitle = input(null, /* @ts-ignore */
|
|
320
|
-
...(ngDevMode ? [{ debugName: "cardSubtitle" }] : /* istanbul ignore next */ []));
|
|
321
|
-
/**
|
|
322
|
-
* URL for the avatar image to display in the card header.
|
|
323
|
-
* @default null
|
|
324
|
-
*/
|
|
325
|
-
avatarImageUrl = input(null, /* @ts-ignore */
|
|
326
|
-
...(ngDevMode ? [{ debugName: "avatarImageUrl" }] : /* istanbul ignore next */ []));
|
|
327
|
-
/**
|
|
328
|
-
* Whether to show the card header section.
|
|
329
|
-
* @default false
|
|
330
|
-
*/
|
|
331
|
-
isHeaderVisible = input(false, { ...(ngDevMode ? { debugName: "isHeaderVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
332
|
-
// Content inputs
|
|
333
|
-
/**
|
|
334
|
-
* CSS padding value for the card content area.
|
|
335
|
-
* @default '1rem'
|
|
336
|
-
*/
|
|
337
|
-
contentPadding = input('1rem', /* @ts-ignore */
|
|
338
|
-
...(ngDevMode ? [{ debugName: "contentPadding" }] : /* istanbul ignore next */ []));
|
|
339
|
-
/**
|
|
340
|
-
* Whether to show a divider between the header and content sections.
|
|
341
|
-
* @default false
|
|
342
|
-
*/
|
|
343
|
-
hasDivider = input(false, { ...(ngDevMode ? { debugName: "hasDivider" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
344
|
-
// Action inputs
|
|
345
|
-
/**
|
|
346
|
-
* Whether to show the action buttons section.
|
|
347
|
-
* @default false
|
|
348
|
-
*/
|
|
349
|
-
areActionsVisible = input(false, { ...(ngDevMode ? { debugName: "areActionsVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
350
|
-
/**
|
|
351
|
-
* Text for the primary action button.
|
|
352
|
-
* @default 'Confirm'
|
|
353
|
-
*/
|
|
354
|
-
primaryButtonText = input('Confirm', /* @ts-ignore */
|
|
355
|
-
...(ngDevMode ? [{ debugName: "primaryButtonText" }] : /* istanbul ignore next */ []));
|
|
356
|
-
/**
|
|
357
|
-
* Text for the secondary action button.
|
|
358
|
-
* @default 'Cancel'
|
|
359
|
-
*/
|
|
360
|
-
secondaryButtonText = input('Cancel', /* @ts-ignore */
|
|
361
|
-
...(ngDevMode ? [{ debugName: "secondaryButtonText" }] : /* istanbul ignore next */ []));
|
|
362
|
-
/**
|
|
363
|
-
* Material icon name for the primary button.
|
|
364
|
-
* @default null
|
|
365
|
-
*/
|
|
366
|
-
primaryButtonIcon = input(null, /* @ts-ignore */
|
|
367
|
-
...(ngDevMode ? [{ debugName: "primaryButtonIcon" }] : /* istanbul ignore next */ []));
|
|
368
|
-
/**
|
|
369
|
-
* Material icon name for the secondary button.
|
|
370
|
-
* @default null
|
|
371
|
-
*/
|
|
372
|
-
secondaryButtonIcon = input(null, /* @ts-ignore */
|
|
373
|
-
...(ngDevMode ? [{ debugName: "secondaryButtonIcon" }] : /* istanbul ignore next */ []));
|
|
374
|
-
/**
|
|
375
|
-
* Alignment of the action buttons.
|
|
376
|
-
* @default 'end'
|
|
377
|
-
*/
|
|
378
|
-
buttonsPosition = input('end', /* @ts-ignore */
|
|
379
|
-
...(ngDevMode ? [{ debugName: "buttonsPosition" }] : /* istanbul ignore next */ []));
|
|
380
|
-
// Output events
|
|
381
|
-
/**
|
|
382
|
-
* Event emitted when the primary button is clicked.
|
|
383
|
-
*/
|
|
384
|
-
primaryButtonClicked = output();
|
|
385
|
-
/**
|
|
386
|
-
* Event emitted when the secondary button is clicked.
|
|
387
|
-
*/
|
|
388
|
-
secondaryButtonClicked = output();
|
|
389
|
-
/**
|
|
390
|
-
* Event emitted when the card is clicked.
|
|
391
|
-
*/
|
|
392
|
-
cardClicked = output();
|
|
393
|
-
/**
|
|
394
|
-
* Event emitted when a key is pressed down on the card.
|
|
395
|
-
*/
|
|
396
|
-
keyDown = output();
|
|
397
|
-
/**
|
|
398
|
-
* Event emitted when a key is released on the card.
|
|
399
|
-
*/
|
|
400
|
-
keyUp = output();
|
|
401
|
-
/**
|
|
402
|
-
* Event emitted when a key is pressed on the card.
|
|
403
|
-
*/
|
|
404
|
-
keyPress = output();
|
|
405
|
-
// Methods
|
|
406
|
-
/**
|
|
407
|
-
* Handles the primary button click event.
|
|
408
|
-
* Stops event propagation and emits the primaryButtonClicked event.
|
|
409
|
-
* @param event The click event
|
|
410
|
-
*/
|
|
411
|
-
handlePrimaryButtonClick(event) {
|
|
412
|
-
event.stopPropagation();
|
|
413
|
-
this.primaryButtonClicked.emit();
|
|
414
|
-
}
|
|
415
|
-
/**
|
|
416
|
-
* Handles the secondary button click event.
|
|
417
|
-
* Stops event propagation and emits the secondaryButtonClicked event.
|
|
418
|
-
* @param event The click event
|
|
419
|
-
*/
|
|
420
|
-
handleSecondaryButtonClick(event) {
|
|
421
|
-
event.stopPropagation();
|
|
422
|
-
this.secondaryButtonClicked.emit();
|
|
423
|
-
}
|
|
424
|
-
/**
|
|
425
|
-
* Handles the card click event.
|
|
426
|
-
* Emits the cardClicked event with the original event.
|
|
427
|
-
* @param event The click event
|
|
428
|
-
*/
|
|
429
|
-
handleCardClick(event) {
|
|
430
|
-
this.cardClicked.emit(event);
|
|
431
|
-
}
|
|
432
|
-
/**
|
|
433
|
-
* Handles the key down event on the card.
|
|
434
|
-
* Emits the keyDown event with the original keyboard event.
|
|
435
|
-
* @param event The keyboard event
|
|
436
|
-
*/
|
|
437
|
-
handleKeyDown(event) {
|
|
438
|
-
this.keyDown.emit(event);
|
|
439
|
-
}
|
|
440
|
-
/**
|
|
441
|
-
* Handles the key up event on the card.
|
|
442
|
-
* Emits the keyUp event with the original keyboard event.
|
|
443
|
-
* @param event The keyboard event
|
|
444
|
-
*/
|
|
445
|
-
handleKeyUp(event) {
|
|
446
|
-
this.keyUp.emit(event);
|
|
447
|
-
}
|
|
448
|
-
/**
|
|
449
|
-
* Handles the key press event on the card.
|
|
450
|
-
* Emits the keyPress event with the original keyboard event.
|
|
451
|
-
* @param event The keyboard event
|
|
452
|
-
*/
|
|
453
|
-
handleKeyPress(event) {
|
|
454
|
-
this.keyPress.emit(event);
|
|
455
|
-
}
|
|
456
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DynamicCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
457
|
-
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 });
|
|
458
|
-
}
|
|
459
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DynamicCard, decorators: [{
|
|
460
|
-
type: Component,
|
|
461
|
-
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" }]
|
|
462
|
-
}], 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"] }] } });
|
|
463
|
-
|
|
464
332
|
/**
|
|
465
333
|
* Context Menu Types and Interfaces
|
|
466
334
|
* Defines the API contract for the ContextMenu component
|
|
@@ -485,28 +353,42 @@ class AcpContextMenuService {
|
|
|
485
353
|
...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
|
|
486
354
|
contextData = signal(null, /* @ts-ignore */
|
|
487
355
|
...(ngDevMode ? [{ debugName: "contextData" }] : /* istanbul ignore next */ []));
|
|
488
|
-
|
|
356
|
+
escapeCloses = signal(true, /* @ts-ignore */
|
|
357
|
+
...(ngDevMode ? [{ debugName: "escapeCloses" }] : /* istanbul ignore next */ []));
|
|
358
|
+
outsideClickCloses = true;
|
|
359
|
+
openOwner = null;
|
|
360
|
+
/** @internal Items rendered by the open panel. */
|
|
361
|
+
activeItems = this.menuItems.asReadonly();
|
|
362
|
+
/** @internal Data passed to the open panel. */
|
|
363
|
+
activeData = this.contextData.asReadonly();
|
|
364
|
+
/** @internal Whether Escape closes the open panel. */
|
|
365
|
+
closeOnEscape = this.escapeCloses.asReadonly();
|
|
489
366
|
itemSelected$ = new Subject();
|
|
367
|
+
closed$ = new Subject();
|
|
490
368
|
constructor() {
|
|
491
|
-
|
|
492
|
-
this.setupOutsideClickHandler();
|
|
369
|
+
this.listenForOutsideClicks();
|
|
493
370
|
}
|
|
494
371
|
/**
|
|
495
372
|
* Open a context menu at the specified position
|
|
496
373
|
*/
|
|
497
|
-
async open(items, config) {
|
|
374
|
+
async open(items, config, owner) {
|
|
498
375
|
// Close any existing menu
|
|
499
376
|
this.closeAll();
|
|
500
377
|
// Dynamically import the component to avoid circular dependency
|
|
501
378
|
const { AcpContextMenuPanel } = await Promise.resolve().then(function () { return contextMenuPanel; });
|
|
379
|
+
// A newer menu may have been opened while the panel was loading
|
|
380
|
+
this.closeAll();
|
|
502
381
|
// Create overlay reference
|
|
503
382
|
const overlayRef = this.createOverlay(config);
|
|
504
|
-
//
|
|
505
|
-
overlayRef.attach(new ComponentPortal(AcpContextMenuPanel, null, this.createInjector(items, config)));
|
|
506
|
-
// Store reference
|
|
383
|
+
// Store before attaching so the panel reads the new items and data
|
|
507
384
|
this.openMenuRef.set(overlayRef);
|
|
508
385
|
this.menuItems.set(items);
|
|
509
386
|
this.contextData.set(config.data);
|
|
387
|
+
this.escapeCloses.set(config.closeOnEscape !== false);
|
|
388
|
+
this.outsideClickCloses = config.closeOnOutsideClick !== false;
|
|
389
|
+
this.openOwner = owner ?? null;
|
|
390
|
+
// Create and attach component
|
|
391
|
+
overlayRef.attach(new ComponentPortal(AcpContextMenuPanel, null, this.createInjector(items, config)));
|
|
510
392
|
// Return menu reference
|
|
511
393
|
return this.createMenuRef(overlayRef);
|
|
512
394
|
}
|
|
@@ -516,8 +398,19 @@ class AcpContextMenuService {
|
|
|
516
398
|
closeAll() {
|
|
517
399
|
const menuRef = this.openMenuRef();
|
|
518
400
|
if (menuRef) {
|
|
401
|
+
const owner = this.openOwner;
|
|
519
402
|
menuRef.dispose();
|
|
520
403
|
this.openMenuRef.set(null);
|
|
404
|
+
this.openOwner = null;
|
|
405
|
+
this.closed$.next(owner);
|
|
406
|
+
}
|
|
407
|
+
}
|
|
408
|
+
closeOverlay(overlayRef) {
|
|
409
|
+
if (this.openMenuRef() === overlayRef) {
|
|
410
|
+
this.closeAll();
|
|
411
|
+
}
|
|
412
|
+
else {
|
|
413
|
+
overlayRef.dispose();
|
|
521
414
|
}
|
|
522
415
|
}
|
|
523
416
|
/**
|
|
@@ -530,13 +423,25 @@ class AcpContextMenuService {
|
|
|
530
423
|
* Get the item selection subject
|
|
531
424
|
*/
|
|
532
425
|
getItemSelected$() {
|
|
533
|
-
return this.itemSelected$.
|
|
426
|
+
return this.itemSelected$.pipe(map(({ context }) => context));
|
|
427
|
+
}
|
|
428
|
+
/**
|
|
429
|
+
* Item selections of menus opened by the given owner
|
|
430
|
+
*/
|
|
431
|
+
itemSelectedFor$(owner) {
|
|
432
|
+
return this.itemSelected$.pipe(filter(event => event.owner === owner), map(({ context }) => context));
|
|
433
|
+
}
|
|
434
|
+
/**
|
|
435
|
+
* Emits when a menu opened by the given owner closes, for any reason
|
|
436
|
+
*/
|
|
437
|
+
closedFor$(owner) {
|
|
438
|
+
return this.closed$.pipe(filter(closedOwner => closedOwner === owner), map(() => undefined));
|
|
534
439
|
}
|
|
535
440
|
/**
|
|
536
441
|
* Emit item selection
|
|
537
442
|
*/
|
|
538
443
|
selectItem(context) {
|
|
539
|
-
this.itemSelected$.next(context);
|
|
444
|
+
this.itemSelected$.next({ context, owner: this.openOwner });
|
|
540
445
|
// Execute command if provided
|
|
541
446
|
if (context.item.command) {
|
|
542
447
|
context.item.command(context);
|
|
@@ -564,8 +469,6 @@ class AcpContextMenuService {
|
|
|
564
469
|
}
|
|
565
470
|
return this.overlay.create({
|
|
566
471
|
positionStrategy,
|
|
567
|
-
hasBackdrop: config.closeOnOutsideClick !== false,
|
|
568
|
-
backdropClass: 'cdk-overlay-transparent-backdrop',
|
|
569
472
|
panelClass: panelClasses,
|
|
570
473
|
scrollStrategy: this.overlay.scrollStrategies.block(),
|
|
571
474
|
maxHeight: '80vh',
|
|
@@ -633,46 +536,41 @@ class AcpContextMenuService {
|
|
|
633
536
|
*/
|
|
634
537
|
createMenuRef(overlayRef) {
|
|
635
538
|
return {
|
|
636
|
-
close: () =>
|
|
637
|
-
overlayRef.dispose();
|
|
638
|
-
this.openMenuRef.set(null);
|
|
639
|
-
},
|
|
539
|
+
close: () => this.closeOverlay(overlayRef),
|
|
640
540
|
updateItems: (newItems) => {
|
|
641
|
-
this.
|
|
541
|
+
if (this.openMenuRef() === overlayRef) {
|
|
542
|
+
this.menuItems.set(newItems);
|
|
543
|
+
}
|
|
642
544
|
},
|
|
643
545
|
getItems: () => this.menuItems(),
|
|
644
546
|
updateData: (data) => {
|
|
645
|
-
this.
|
|
547
|
+
if (this.openMenuRef() === overlayRef) {
|
|
548
|
+
this.contextData.set(data);
|
|
549
|
+
}
|
|
646
550
|
},
|
|
647
551
|
getData: () => this.contextData(),
|
|
648
552
|
isOpen: () => overlayRef.hasAttached(),
|
|
649
553
|
};
|
|
650
554
|
}
|
|
651
555
|
/**
|
|
652
|
-
*
|
|
556
|
+
* Single outside-click mechanism. A backdrop is not used: CDK renders overlays as popovers, so
|
|
557
|
+
* the backdrop does not cover the page, and without it a right-click on another element reaches
|
|
558
|
+
* that element directly (opening its own menu).
|
|
653
559
|
*/
|
|
654
|
-
|
|
560
|
+
listenForOutsideClicks() {
|
|
561
|
+
const onOutside = (event) => {
|
|
562
|
+
const menuRef = this.openMenuRef();
|
|
563
|
+
if (menuRef &&
|
|
564
|
+
this.outsideClickCloses &&
|
|
565
|
+
!menuRef.overlayElement.contains(event.target)) {
|
|
566
|
+
this.ngZone.run(() => this.closeAll());
|
|
567
|
+
}
|
|
568
|
+
};
|
|
655
569
|
this.ngZone.runOutsideAngular(() => {
|
|
656
|
-
this.document.addEventListener('click',
|
|
657
|
-
|
|
658
|
-
if (menuRef && !this.isClickInsideMenu(event)) {
|
|
659
|
-
this.ngZone.run(() => {
|
|
660
|
-
this.closeAll();
|
|
661
|
-
});
|
|
662
|
-
}
|
|
663
|
-
});
|
|
570
|
+
this.document.addEventListener('click', onOutside);
|
|
571
|
+
this.document.addEventListener('contextmenu', onOutside);
|
|
664
572
|
});
|
|
665
573
|
}
|
|
666
|
-
/**
|
|
667
|
-
* Check if click is inside the menu
|
|
668
|
-
*/
|
|
669
|
-
isClickInsideMenu(event) {
|
|
670
|
-
const menuRef = this.openMenuRef();
|
|
671
|
-
if (!menuRef)
|
|
672
|
-
return false;
|
|
673
|
-
const menuElement = menuRef.overlayElement;
|
|
674
|
-
return menuElement.contains(event.target);
|
|
675
|
-
}
|
|
676
574
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpContextMenuService, deps: [], target: i0.ɵɵFactoryTarget.Service });
|
|
677
575
|
static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.0", ngImport: i0, type: AcpContextMenuService });
|
|
678
576
|
}
|
|
@@ -723,12 +621,17 @@ class AcpContextMenuDirective {
|
|
|
723
621
|
/** Emitted when menu is closed */
|
|
724
622
|
contextMenuClosed = new EventEmitter();
|
|
725
623
|
constructor() {
|
|
726
|
-
//
|
|
624
|
+
// Only react to menus opened by this instance
|
|
625
|
+
this.contextMenuService
|
|
626
|
+
.itemSelectedFor$(this)
|
|
627
|
+
.pipe(takeUntil(this.destroy$))
|
|
628
|
+
.subscribe(context => this.contextMenuItemSelected.emit(context));
|
|
727
629
|
this.contextMenuService
|
|
728
|
-
.
|
|
630
|
+
.closedFor$(this)
|
|
729
631
|
.pipe(takeUntil(this.destroy$))
|
|
730
|
-
.subscribe(
|
|
731
|
-
this.
|
|
632
|
+
.subscribe(() => {
|
|
633
|
+
this.menuRef = null;
|
|
634
|
+
this.contextMenuClosed.emit();
|
|
732
635
|
});
|
|
733
636
|
}
|
|
734
637
|
ngOnDestroy() {
|
|
@@ -785,12 +688,7 @@ class AcpContextMenuDirective {
|
|
|
785
688
|
this.hoverTimeout = null;
|
|
786
689
|
}
|
|
787
690
|
const delay = this.contextMenuTrigger.hoverLeaveDelay ?? 300;
|
|
788
|
-
setTimeout(() =>
|
|
789
|
-
if (this.menuRef?.isOpen()) {
|
|
790
|
-
this.menuRef.close();
|
|
791
|
-
this.contextMenuClosed.emit();
|
|
792
|
-
}
|
|
793
|
-
}, delay);
|
|
691
|
+
setTimeout(() => this.menuRef?.close(), delay);
|
|
794
692
|
}
|
|
795
693
|
/**
|
|
796
694
|
* Open the context menu
|
|
@@ -800,7 +698,7 @@ class AcpContextMenuDirective {
|
|
|
800
698
|
return;
|
|
801
699
|
}
|
|
802
700
|
// Use provided row data or fall back to contextMenuData
|
|
803
|
-
const data = rowData
|
|
701
|
+
const data = rowData ?? this.contextMenuData;
|
|
804
702
|
const config = {
|
|
805
703
|
x,
|
|
806
704
|
y,
|
|
@@ -809,7 +707,7 @@ class AcpContextMenuDirective {
|
|
|
809
707
|
closeOnOutsideClick: this.contextMenuTrigger.closeOnOutsideClick !== false,
|
|
810
708
|
closeOnEscape: this.contextMenuTrigger.closeOnEscape !== false,
|
|
811
709
|
};
|
|
812
|
-
this.contextMenuService.open(this.acpContextMenu, config).then(menuRef => {
|
|
710
|
+
this.contextMenuService.open(this.acpContextMenu, config, this).then(menuRef => {
|
|
813
711
|
this.menuRef = menuRef;
|
|
814
712
|
this.contextMenuOpened.emit(this.menuRef);
|
|
815
713
|
});
|
|
@@ -818,10 +716,7 @@ class AcpContextMenuDirective {
|
|
|
818
716
|
* Close the context menu
|
|
819
717
|
*/
|
|
820
718
|
closeMenu() {
|
|
821
|
-
|
|
822
|
-
this.menuRef.close();
|
|
823
|
-
this.contextMenuClosed.emit();
|
|
824
|
-
}
|
|
719
|
+
this.menuRef?.close();
|
|
825
720
|
}
|
|
826
721
|
/**
|
|
827
722
|
* Update menu items
|
|
@@ -891,9 +786,12 @@ class AcpContextMenuPanel {
|
|
|
891
786
|
elementRef = inject(ElementRef);
|
|
892
787
|
menuContainer;
|
|
893
788
|
// Input signals - initialized from injected tokens
|
|
894
|
-
|
|
789
|
+
initialItems = inject(CONTEXT_MENU_ITEMS, { optional: true }) ?? [];
|
|
790
|
+
initialData = inject(CONTEXT_MENU_DATA, { optional: true }) ?? null;
|
|
791
|
+
// Read from the service so AcpContextMenuRef.updateItems/updateData reach the open panel
|
|
792
|
+
items = computed(() => this.contextMenuService.isOpen() ? this.contextMenuService.activeItems() : this.initialItems, /* @ts-ignore */
|
|
895
793
|
...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
896
|
-
contextData =
|
|
794
|
+
contextData = computed(() => this.contextMenuService.isOpen() ? this.contextMenuService.activeData() : this.initialData, /* @ts-ignore */
|
|
897
795
|
...(ngDevMode ? [{ debugName: "contextData" }] : /* istanbul ignore next */ []));
|
|
898
796
|
// State signals
|
|
899
797
|
selectedIndex = signal(-1, /* @ts-ignore */
|
|
@@ -943,8 +841,10 @@ class AcpContextMenuPanel {
|
|
|
943
841
|
this.activateSelected();
|
|
944
842
|
break;
|
|
945
843
|
case 'Escape':
|
|
946
|
-
|
|
947
|
-
|
|
844
|
+
if (this.contextMenuService.closeOnEscape()) {
|
|
845
|
+
event.preventDefault();
|
|
846
|
+
this.contextMenuService.closeAll();
|
|
847
|
+
}
|
|
948
848
|
break;
|
|
949
849
|
case 'Home':
|
|
950
850
|
event.preventDefault();
|
|
@@ -966,7 +866,8 @@ class AcpContextMenuPanel {
|
|
|
966
866
|
return;
|
|
967
867
|
}
|
|
968
868
|
if (item.children && item.children.length > 0) {
|
|
969
|
-
|
|
869
|
+
const index = this.visibleItems().indexOf(item);
|
|
870
|
+
this.expandedIndex.set(this.expandedIndex() === index ? -1 : index);
|
|
970
871
|
return;
|
|
971
872
|
}
|
|
972
873
|
const context = {
|
|
@@ -1003,36 +904,34 @@ class AcpContextMenuPanel {
|
|
|
1003
904
|
[item.class || '']: !!item.class,
|
|
1004
905
|
};
|
|
1005
906
|
}
|
|
907
|
+
isSelectable(item) {
|
|
908
|
+
return !!item && !item.separator && !item.disabled;
|
|
909
|
+
}
|
|
1006
910
|
/**
|
|
1007
|
-
*
|
|
911
|
+
* Move the selection to the next selectable item in the given direction, wrapping around
|
|
1008
912
|
*/
|
|
1009
|
-
|
|
913
|
+
moveSelection(from, direction) {
|
|
1010
914
|
const items = this.visibleItems();
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
915
|
+
for (let step = 1; step <= items.length; step++) {
|
|
916
|
+
const index = (((from + direction * step) % items.length) + items.length) % items.length;
|
|
917
|
+
if (this.isSelectable(items[index])) {
|
|
918
|
+
this.selectedIndex.set(index);
|
|
919
|
+
return;
|
|
920
|
+
}
|
|
921
|
+
}
|
|
922
|
+
}
|
|
923
|
+
selectNext() {
|
|
924
|
+
this.moveSelection(this.selectedIndex(), 1);
|
|
1014
925
|
}
|
|
1015
|
-
/**
|
|
1016
|
-
* Select previous item
|
|
1017
|
-
*/
|
|
1018
926
|
selectPrevious() {
|
|
1019
|
-
const
|
|
1020
|
-
|
|
1021
|
-
const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
|
|
1022
|
-
this.selectedIndex.set(prevIndex);
|
|
927
|
+
const current = this.selectedIndex();
|
|
928
|
+
this.moveSelection(current < 0 ? 0 : current, -1);
|
|
1023
929
|
}
|
|
1024
|
-
/**
|
|
1025
|
-
* Select first item
|
|
1026
|
-
*/
|
|
1027
930
|
selectFirst() {
|
|
1028
|
-
this.
|
|
931
|
+
this.moveSelection(-1, 1);
|
|
1029
932
|
}
|
|
1030
|
-
/**
|
|
1031
|
-
* Select last item
|
|
1032
|
-
*/
|
|
1033
933
|
selectLast() {
|
|
1034
|
-
|
|
1035
|
-
this.selectedIndex.set(Math.max(0, items.length - 1));
|
|
934
|
+
this.moveSelection(this.visibleItems().length, -1);
|
|
1036
935
|
}
|
|
1037
936
|
/**
|
|
1038
937
|
* Expand selected item
|
|
@@ -1068,7 +967,7 @@ class AcpContextMenuPanel {
|
|
|
1068
967
|
return index;
|
|
1069
968
|
}
|
|
1070
969
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpContextMenuPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1071
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpContextMenuPanel, isStandalone: true, selector: "acp-context-menu-panel", host: { attributes: { "role": "menu" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.aria-label": "\"Context Menu\"" }, classAttribute: "acp-context-menu-panel-host" }, viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n #menuContainer\n class=\"acp-context-menu-container\"\n role=\"menu\"\n tabindex=\"0\"\n cdkTrapFocus\n cdkTrapFocusAutoCapture\n>\n <div class=\"acp-context-menu-list\">\n @for (item of visibleItems(); track $index; let i = $index) { @if (item.separator) {\n <div class=\"acp-context-menu-separator\" role=\"separator\" aria-orientation=\"horizontal\"></div>\n } @if (!item.separator) {\n <button\n [ngClass]=\"getItemClasses(item, i)\"\n (click)=\"onItemClick(item, $event)\"\n (mouseenter)=\"onItemHover(i)\"\n [disabled]=\"item.disabled || false\"\n [attr.aria-label]=\"item.label\"\n [attr.aria-disabled]=\"item.disabled || false\"\n [attr.aria-haspopup]=\"hasChildren(item) ? 'menu' : 'false'\"\n [attr.aria-expanded]=\"expandedIndex() === i && hasChildren(item)\"\n [title]=\"item.tooltip || null\"\n role=\"menuitem\"\n type=\"button\"\n >\n @if (item.icon) {\n <span class=\"acp-context-menu-item-icon\">\n @if (!item.icon.includes('/')) {\n <mat-icon [attr.aria-hidden]=\"true\"> {{ item.icon }} </mat-icon>\n } @if (item.icon.includes('/')) {\n <img [src]=\"item.icon\" alt=\"\" aria-hidden=\"true\" />\n }\n </span>\n }\n\n <span class=\"acp-context-menu-item-label\"> {{ item.label }} </span>\n\n @if (item.badge) {\n <span class=\"acp-context-menu-item-badge\"> {{ item.badge }} </span>\n } @if (item.shortcut) {\n <span class=\"acp-context-menu-item-shortcut\"> {{ item.shortcut }} </span>\n } @if (item.loading) {\n <mat-spinner class=\"acp-context-menu-item-loader\" [diameter]=\"16\" [strokeWidth]=\"2\">\n </mat-spinner>\n } @if (hasChildren(item)) {\n <mat-icon class=\"acp-context-menu-item-arrow\" [attr.aria-hidden]=\"true\">\n chevron_right\n </mat-icon>\n }\n </button>\n } @if (hasChildren(item) && expandedIndex() === i) {\n <div class=\"acp-context-menu-submenu\" role=\"menu\">\n @for (subitem of item.children; track $index; let j = $index) { @if (subitem.separator) {\n <div class=\"acp-context-menu-separator\" role=\"separator\" aria-orientation=\"horizontal\"></div>\n } @if (!subitem.separator) {\n <button\n class=\"acp-context-menu-item\"\n [class.acp-context-menu-item--disabled]=\"subitem.disabled || false\"\n [class.acp-context-menu-item--danger]=\"subitem.danger || false\"\n [class.acp-context-menu-item--selected]=\"false\"\n (click)=\"onItemClick(subitem, $event)\"\n [disabled]=\"subitem.disabled || false\"\n [attr.aria-label]=\"subitem.label\"\n [attr.aria-disabled]=\"subitem.disabled || false\"\n [title]=\"subitem.tooltip || null\"\n role=\"menuitem\"\n type=\"button\"\n >\n @if (subitem.icon) {\n <span class=\"acp-context-menu-item-icon\">\n @if (!subitem.icon.includes('/')) {\n <mat-icon [attr.aria-hidden]=\"true\"> {{ subitem.icon }} </mat-icon>\n } @if (subitem.icon.includes('/')) {\n <img [src]=\"subitem.icon\" alt=\"\" aria-hidden=\"true\" />\n }\n </span>\n }\n\n <span class=\"acp-context-menu-item-label\"> {{ subitem.label }} </span>\n\n @if (subitem.badge) {\n <span class=\"acp-context-menu-item-badge\"> {{ subitem.badge }} </span>\n } @if (subitem.shortcut) {\n <span class=\"acp-context-menu-item-shortcut\"> {{ subitem.shortcut }} </span>\n } @if (subitem.loading) {\n <mat-spinner class=\"acp-context-menu-item-loader\" [diameter]=\"16\" [strokeWidth]=\"2\">\n </mat-spinner>\n }\n </button>\n } }\n </div>\n } }\n </div>\n</div>\n", styles: [".acp-context-menu-panel-host{display:block;outline:none}.acp-context-menu-container{display:flex;flex-direction:column;min-width:200px;max-width:400px;max-height:80vh;background-color:var(--mat-sys-surface-container);border-radius:var(--acp-context-menu-border-radius, 4px);box-shadow:var(--acp-context-menu-shadow, 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12));outline:none;animation:acp-context-menu-enter .2s cubic-bezier(.4,0,.2,1);overflow:hidden}@media(prefers-reduced-motion:reduce){.acp-context-menu-container{animation:none}}@media(max-width:600px){.acp-context-menu-container{min-width:180px;max-width:300px}}@media(max-width:480px){.acp-context-menu-container{min-width:160px;max-width:280px}}.acp-context-menu-list{display:flex;flex-direction:column;padding:var(--acp-context-menu-padding, 8px 0);list-style:none;margin:0;overflow-y:auto;max-height:calc(80vh - 16px)}.acp-context-menu-list::-webkit-scrollbar{width:6px}.acp-context-menu-list::-webkit-scrollbar-track{background:transparent}.acp-context-menu-list::-webkit-scrollbar-thumb{background:var(--acp-context-menu-scrollbar-color, #bdbdbd);border-radius:3px}.acp-context-menu-list::-webkit-scrollbar-thumb:hover{background:var(--acp-context-menu-scrollbar-hover-color, #9e9e9e)}.acp-context-menu-item{display:flex;align-items:center;gap:12px;padding:var(--acp-context-menu-item-padding, 8px 16px);min-height:40px;background:none;border:none;color:var(--mat-sys-on-surface);font-size:var(--acp-context-menu-item-font-size, 14px);font-weight:500;text-align:left;cursor:pointer;transition:background-color .15s cubic-bezier(.4,0,.2,1);white-space:nowrap;position:relative}@media(prefers-reduced-motion:reduce){.acp-context-menu-item{transition:none}}@media(max-width:600px){.acp-context-menu-item{padding:6px 12px;min-height:36px;font-size:13px;gap:10px}}@media(max-width:480px){.acp-context-menu-item{padding:6px 10px;min-height:34px;font-size:12px;gap:8px}}.acp-context-menu-item:hover:not(.acp-context-menu-item--disabled){background-color:var(--mat-sys-surface-container-highest)}.acp-context-menu-item:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:-2px}.acp-context-menu-item--selected:not(.acp-context-menu-item--disabled){background-color:var(--mat-sys-surface-container-highest)}.acp-context-menu-item--disabled{color:var(--mat-sys-on-surface-variant);cursor:not-allowed;opacity:.6}.acp-context-menu-item--disabled:hover{background-color:transparent}.acp-context-menu-item--danger{color:var(--mat-sys-error)}.acp-context-menu-item--danger:hover:not(.acp-context-menu-item--disabled){background-color:var(--mat-sys-error-container)}.acp-context-menu-item--separator{padding:0;min-height:auto;cursor:default;background:none}.acp-context-menu-item--separator:hover{background:none}.acp-context-menu-item--expanded{background-color:var(--mat-sys-surface-container-highest)}.acp-context-menu-item-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0}.acp-context-menu-item-icon mat-icon{font-size:20px;width:20px;height:20px}.acp-context-menu-item-icon img{width:100%;height:100%;object-fit:contain}.acp-context-menu-item-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acp-context-menu-item-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary);border-radius:10px;font-size:12px;font-weight:600;flex-shrink:0}.acp-context-menu-item-shortcut{display:inline-block;color:var(--mat-sys-on-surface-variant);font-size:12px;font-weight:400;margin-left:12px;flex-shrink:0}.acp-context-menu-item-loader{display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-left:8px;flex-shrink:0}.acp-context-menu-item-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:8px;flex-shrink:0;color:var(--mat-sys-on-surface-variant);font-size:20px}.acp-context-menu-separator{height:1px;background-color:var(--mat-sys-outline-variant);margin:4px 0}.acp-context-menu-submenu{display:flex;flex-direction:column;padding:4px 0;background-color:var(--mat-sys-surface-container-high);border-left:2px solid var(--mat-sys-outline-variant);margin-left:8px;animation:acp-context-menu-slide-in .15s cubic-bezier(.4,0,.2,1)}@media(prefers-reduced-motion:reduce){.acp-context-menu-submenu{animation:none}}.acp-context-menu-submenu .acp-context-menu-item{padding-left:12px;font-size:13px}@keyframes acp-context-menu-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes acp-context-menu-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1
|
|
970
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpContextMenuPanel, isStandalone: true, selector: "acp-context-menu-panel", host: { attributes: { "role": "menu" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.aria-label": "\"Context Menu\"" }, classAttribute: "acp-context-menu-panel-host" }, viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n #menuContainer\n class=\"acp-context-menu-container\"\n role=\"menu\"\n tabindex=\"0\"\n cdkTrapFocus\n cdkTrapFocusAutoCapture\n>\n <div class=\"acp-context-menu-list\">\n @for (item of visibleItems(); track $index; let i = $index) { @if (item.separator) {\n <div class=\"acp-context-menu-separator\" role=\"separator\" aria-orientation=\"horizontal\"></div>\n } @if (!item.separator) {\n <button\n [ngClass]=\"getItemClasses(item, i)\"\n (click)=\"onItemClick(item, $event)\"\n (mouseenter)=\"onItemHover(i)\"\n [disabled]=\"item.disabled || false\"\n [attr.aria-label]=\"item.label\"\n [attr.aria-disabled]=\"item.disabled || false\"\n [attr.aria-haspopup]=\"hasChildren(item) ? 'menu' : 'false'\"\n [attr.aria-expanded]=\"expandedIndex() === i && hasChildren(item)\"\n [title]=\"item.tooltip || null\"\n role=\"menuitem\"\n type=\"button\"\n >\n @if (item.icon) {\n <span class=\"acp-context-menu-item-icon\">\n @if (!item.icon.includes('/')) {\n <mat-icon [attr.aria-hidden]=\"true\"> {{ item.icon }} </mat-icon>\n } @if (item.icon.includes('/')) {\n <img [src]=\"item.icon\" alt=\"\" aria-hidden=\"true\" />\n }\n </span>\n }\n\n <span class=\"acp-context-menu-item-label\"> {{ item.label }} </span>\n\n @if (item.badge) {\n <span class=\"acp-context-menu-item-badge\"> {{ item.badge }} </span>\n } @if (item.shortcut) {\n <span class=\"acp-context-menu-item-shortcut\"> {{ item.shortcut }} </span>\n } @if (item.loading) {\n <mat-spinner class=\"acp-context-menu-item-loader\" [diameter]=\"16\" [strokeWidth]=\"2\">\n </mat-spinner>\n } @if (hasChildren(item)) {\n <mat-icon class=\"acp-context-menu-item-arrow\" [attr.aria-hidden]=\"true\">\n chevron_right\n </mat-icon>\n }\n </button>\n } @if (hasChildren(item) && expandedIndex() === i) {\n <div class=\"acp-context-menu-submenu\" role=\"menu\">\n @for (subitem of item.children; track $index; let j = $index) { @if (subitem.separator) {\n <div class=\"acp-context-menu-separator\" role=\"separator\" aria-orientation=\"horizontal\"></div>\n } @if (!subitem.separator) {\n <button\n class=\"acp-context-menu-item\"\n [class.acp-context-menu-item--disabled]=\"subitem.disabled || false\"\n [class.acp-context-menu-item--danger]=\"subitem.danger || false\"\n [class.acp-context-menu-item--selected]=\"false\"\n (click)=\"onItemClick(subitem, $event)\"\n [disabled]=\"subitem.disabled || false\"\n [attr.aria-label]=\"subitem.label\"\n [attr.aria-disabled]=\"subitem.disabled || false\"\n [title]=\"subitem.tooltip || null\"\n role=\"menuitem\"\n type=\"button\"\n >\n @if (subitem.icon) {\n <span class=\"acp-context-menu-item-icon\">\n @if (!subitem.icon.includes('/')) {\n <mat-icon [attr.aria-hidden]=\"true\"> {{ subitem.icon }} </mat-icon>\n } @if (subitem.icon.includes('/')) {\n <img [src]=\"subitem.icon\" alt=\"\" aria-hidden=\"true\" />\n }\n </span>\n }\n\n <span class=\"acp-context-menu-item-label\"> {{ subitem.label }} </span>\n\n @if (subitem.badge) {\n <span class=\"acp-context-menu-item-badge\"> {{ subitem.badge }} </span>\n } @if (subitem.shortcut) {\n <span class=\"acp-context-menu-item-shortcut\"> {{ subitem.shortcut }} </span>\n } @if (subitem.loading) {\n <mat-spinner class=\"acp-context-menu-item-loader\" [diameter]=\"16\" [strokeWidth]=\"2\">\n </mat-spinner>\n }\n </button>\n } }\n </div>\n } }\n </div>\n</div>\n", styles: [".acp-context-menu-panel-host{display:block;outline:none}.acp-context-menu-container{display:flex;flex-direction:column;min-width:200px;max-width:400px;max-height:80vh;background-color:var(--mat-sys-surface-container);border-radius:var(--acp-context-menu-border-radius, 4px);box-shadow:var(--acp-context-menu-shadow, 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12));outline:none;animation:acp-context-menu-enter .2s cubic-bezier(.4,0,.2,1);overflow:hidden}@media(prefers-reduced-motion:reduce){.acp-context-menu-container{animation:none}}@media(max-width:600px){.acp-context-menu-container{min-width:180px;max-width:300px}}@media(max-width:480px){.acp-context-menu-container{min-width:160px;max-width:280px}}.acp-context-menu-list{display:flex;flex-direction:column;padding:var(--acp-context-menu-padding, 8px 0);list-style:none;margin:0;overflow-y:auto;max-height:calc(80vh - 16px)}.acp-context-menu-list::-webkit-scrollbar{width:6px}.acp-context-menu-list::-webkit-scrollbar-track{background:transparent}.acp-context-menu-list::-webkit-scrollbar-thumb{background:var(--acp-context-menu-scrollbar-color, #bdbdbd);border-radius:3px}.acp-context-menu-list::-webkit-scrollbar-thumb:hover{background:var(--acp-context-menu-scrollbar-hover-color, #9e9e9e)}.acp-context-menu-item{display:flex;align-items:center;gap:12px;padding:var(--acp-context-menu-item-padding, 8px 16px);min-height:40px;background:none;border:none;color:var(--mat-sys-on-surface);font-size:var(--acp-context-menu-item-font-size, 14px);font-weight:500;text-align:left;cursor:pointer;transition:background-color .15s cubic-bezier(.4,0,.2,1);white-space:nowrap;position:relative}@media(prefers-reduced-motion:reduce){.acp-context-menu-item{transition:none}}@media(max-width:600px){.acp-context-menu-item{padding:6px 12px;min-height:36px;font-size:13px;gap:10px}}@media(max-width:480px){.acp-context-menu-item{padding:6px 10px;min-height:34px;font-size:12px;gap:8px}}.acp-context-menu-item:hover:not(.acp-context-menu-item--disabled){background-color:var(--mat-sys-surface-container-highest)}.acp-context-menu-item:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:-2px}.acp-context-menu-item--selected:not(.acp-context-menu-item--disabled){background-color:var(--mat-sys-surface-container-highest)}.acp-context-menu-item--disabled{color:var(--mat-sys-on-surface-variant);cursor:not-allowed;opacity:.6}.acp-context-menu-item--disabled:hover{background-color:transparent}.acp-context-menu-item--danger{color:var(--mat-sys-error)}.acp-context-menu-item--danger:hover:not(.acp-context-menu-item--disabled){background-color:var(--mat-sys-error-container)}.acp-context-menu-item--separator{padding:0;min-height:auto;cursor:default;background:none}.acp-context-menu-item--separator:hover{background:none}.acp-context-menu-item--expanded{background-color:var(--mat-sys-surface-container-highest)}.acp-context-menu-item-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0}.acp-context-menu-item-icon mat-icon{font-size:20px;width:20px;height:20px}.acp-context-menu-item-icon img{width:100%;height:100%;object-fit:contain}.acp-context-menu-item-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acp-context-menu-item-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary);border-radius:10px;font-size:12px;font-weight:600;flex-shrink:0}.acp-context-menu-item-shortcut{display:inline-block;color:var(--mat-sys-on-surface-variant);font-size:12px;font-weight:400;margin-left:12px;flex-shrink:0}.acp-context-menu-item-loader{display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-left:8px;flex-shrink:0}.acp-context-menu-item-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:8px;flex-shrink:0;color:var(--mat-sys-on-surface-variant);font-size:20px}.acp-context-menu-separator{height:1px;background-color:var(--mat-sys-outline-variant);margin:4px 0}.acp-context-menu-submenu{display:flex;flex-direction:column;padding:4px 0;background-color:var(--mat-sys-surface-container-high);border-left:2px solid var(--mat-sys-outline-variant);margin-left:8px;animation:acp-context-menu-slide-in .15s cubic-bezier(.4,0,.2,1)}@media(prefers-reduced-motion:reduce){.acp-context-menu-submenu{animation:none}}.acp-context-menu-submenu .acp-context-menu-item{padding-left:12px;font-size:13px}@keyframes acp-context-menu-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes acp-context-menu-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1072
971
|
}
|
|
1073
972
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpContextMenuPanel, decorators: [{
|
|
1074
973
|
type: Component,
|
|
@@ -1123,12 +1022,30 @@ class AcpContextMenu {
|
|
|
1123
1022
|
/** Emitted when a menu item is selected */
|
|
1124
1023
|
itemSelected = output();
|
|
1125
1024
|
constructor() {
|
|
1126
|
-
//
|
|
1025
|
+
// Only react to menus opened by this instance
|
|
1127
1026
|
this.contextMenuService
|
|
1128
|
-
.
|
|
1027
|
+
.itemSelectedFor$(this)
|
|
1129
1028
|
.pipe(takeUntil(this.destroy$))
|
|
1130
|
-
.subscribe(context =>
|
|
1131
|
-
|
|
1029
|
+
.subscribe(context => this.itemSelected.emit(context));
|
|
1030
|
+
this.contextMenuService
|
|
1031
|
+
.closedFor$(this)
|
|
1032
|
+
.pipe(takeUntil(this.destroy$))
|
|
1033
|
+
.subscribe(() => {
|
|
1034
|
+
this.menuRef = null;
|
|
1035
|
+
this.hide.emit();
|
|
1036
|
+
});
|
|
1037
|
+
// Open the menu when the target element is right-clicked
|
|
1038
|
+
effect(onCleanup => {
|
|
1039
|
+
const target = this.target();
|
|
1040
|
+
if (!target) {
|
|
1041
|
+
return;
|
|
1042
|
+
}
|
|
1043
|
+
const listener = (event) => {
|
|
1044
|
+
event.preventDefault();
|
|
1045
|
+
this.show(event);
|
|
1046
|
+
};
|
|
1047
|
+
target.addEventListener('contextmenu', listener);
|
|
1048
|
+
onCleanup(() => target.removeEventListener('contextmenu', listener));
|
|
1132
1049
|
});
|
|
1133
1050
|
}
|
|
1134
1051
|
ngOnDestroy() {
|
|
@@ -1149,9 +1066,9 @@ class AcpContextMenu {
|
|
|
1149
1066
|
.open(this.model(), {
|
|
1150
1067
|
x,
|
|
1151
1068
|
y,
|
|
1152
|
-
data: data
|
|
1069
|
+
data: data ?? null,
|
|
1153
1070
|
element: this.target(),
|
|
1154
|
-
})
|
|
1071
|
+
}, this)
|
|
1155
1072
|
.then(menuRef => {
|
|
1156
1073
|
this.menuRef = menuRef;
|
|
1157
1074
|
});
|
|
@@ -1168,9 +1085,9 @@ class AcpContextMenu {
|
|
|
1168
1085
|
.open(this.model(), {
|
|
1169
1086
|
x: rect.right,
|
|
1170
1087
|
y: rect.top,
|
|
1171
|
-
data: data
|
|
1088
|
+
data: data ?? null,
|
|
1172
1089
|
element,
|
|
1173
|
-
})
|
|
1090
|
+
}, this)
|
|
1174
1091
|
.then(menuRef => {
|
|
1175
1092
|
this.menuRef = menuRef;
|
|
1176
1093
|
});
|
|
@@ -1179,11 +1096,7 @@ class AcpContextMenu {
|
|
|
1179
1096
|
* Close the context menu
|
|
1180
1097
|
*/
|
|
1181
1098
|
close() {
|
|
1182
|
-
|
|
1183
|
-
this.menuRef.close();
|
|
1184
|
-
this.menuRef = null;
|
|
1185
|
-
this.hide.emit();
|
|
1186
|
-
}
|
|
1099
|
+
this.menuRef?.close();
|
|
1187
1100
|
}
|
|
1188
1101
|
/**
|
|
1189
1102
|
* Check if the menu is currently open
|
|
@@ -1864,7 +1777,7 @@ class AcpDialogActions {
|
|
|
1864
1777
|
<ng-container [ngTemplateOutlet]="actionsTemplate" />
|
|
1865
1778
|
</mat-dialog-actions>
|
|
1866
1779
|
}
|
|
1867
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$
|
|
1780
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: AcpButton, selector: "acp-button" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1868
1781
|
}
|
|
1869
1782
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDialogActions, decorators: [{
|
|
1870
1783
|
type: Component,
|
|
@@ -2060,7 +1973,7 @@ class AcpDialogTitlebar {
|
|
|
2060
1973
|
@if (renderInline()) {
|
|
2061
1974
|
<ng-container [ngTemplateOutlet]="titlebarTemplate" />
|
|
2062
1975
|
}
|
|
2063
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$
|
|
1976
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: AcpButton, selector: "acp-button" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2064
1977
|
}
|
|
2065
1978
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDialogTitlebar, decorators: [{
|
|
2066
1979
|
type: Component,
|
|
@@ -2259,7 +2172,7 @@ class AcpDialogContainer {
|
|
|
2259
2172
|
});
|
|
2260
2173
|
}
|
|
2261
2174
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDialogContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2262
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpDialogContainer, isStandalone: true, selector: "acp-dialog-container", viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "actionOutlet", first: true, predicate: ["actionOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "titlebarOutletRef", first: true, predicate: ["titlebarOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "stringTemplate", first: true, predicate: ["stringContent"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (headerConfig(); as header) { @if (config.showHeader !== false && !hasDeclarativeTitlebar()) {\n<acp-dialog-titlebar\n [title]=\"header.title\"\n [subtitle]=\"header.subtitle\"\n [icon]=\"header.icon\"\n [closable]=\"header.closable ?? true\"\n [closeLabel]=\"header.closeLabel ?? 'Close dialog'\"\n [draggable]=\"header.draggable ?? true\"\n [color]=\"header.color\"\n [colorClass]=\"header.colorClass\"\n [closeColor]=\"header.closeColor\"\n/>\n} }\n\n<ng-template #titlebarOutlet />\n\n<mat-dialog-content class=\"acp-dialog-content\">\n <ng-template #contentHost />\n <ng-template #stringContent let-content>\n <div class=\"acp-dialog-message\">{{ content }}</div>\n </ng-template>\n</mat-dialog-content>\n\n@if ((config.actions?.length && config.showActions !== false) || hasDeclarativeActions()) {\n<acp-dialog-actions\n [align]=\"resolvedActionsAlign()\"\n [actions]=\"hasDeclarativeActions() ? undefined : config.actions\"\n [dialogTitle]=\"resolvedDialogTitle()\"\n>\n <ng-template #actionOutlet />\n</acp-dialog-actions>\n}\n", styles: [".acp-dialog-header{cursor:move;border-bottom:1px solid var(--acp-dialog-header-border-color, var(--mat-sys-outline-variant, #dee2e6));color:var(--acp-dialog-header-text-color, var(--mat-sys-on-surface, #212529));position:relative}.acp-dialog-header.acp-dialog-header--primary{background-color:var(--acp-dialog-primary-header-background-color, var(--mat-sys-primary, #1976d2));color:var(--acp-dialog-primary-header-text-color, var(--mat-sys-on-primary, #fff))}.acp-dialog-header.acp-dialog-header--secondary{background-color:var(--acp-dialog-secondary-header-background-color, var(--mat-sys-secondary, #9c27b0));color:var(--acp-dialog-secondary-header-text-color, var(--mat-sys-on-secondary, #fff))}.acp-dialog-header.acp-dialog-header--accent{background-color:var(--acp-dialog-accent-header-background-color, var(--mat-sys-tertiary, #7c4dff));color:var(--acp-dialog-accent-header-text-color, var(--mat-sys-on-tertiary, #fff))}.acp-dialog-header.acp-dialog-header--error,.acp-dialog-header.acp-dialog-header--danger{background-color:var(--acp-dialog-error-header-background-color, var(--mat-sys-error, #b3261e));color:var(--acp-dialog-error-header-text-color, var(--mat-sys-on-error, #fff))}.acp-dialog-header.acp-dialog-header--success{background-color:var(--acp-dialog-success-header-background-color, #22c55e);color:var(--acp-dialog-success-header-text-color, #fff)}.acp-dialog-header.acp-dialog-header--warning{background-color:var(--acp-dialog-warning-header-background-color, #f59e0b);color:var(--acp-dialog-warning-header-text-color, #212529)}.acp-dialog-header.acp-dialog-header--info{background-color:var(--acp-dialog-info-header-background-color, #0ea5e9);color:var(--acp-dialog-info-header-text-color, #fff)}.acp-dialog-header.acp-dialog-header--dark{background-color:var(--acp-dialog-dark-header-background-color, #212529);color:var(--acp-dialog-dark-header-text-color, #fff)}.acp-dialog-header[class*=acp-dialog-header--] .acp-dialog-subtitle{color:inherit;opacity:.85}h6[mat-dialog-title].acp-dialog-title{display:flex;align-items:center;font-size:var(--acp-dialog-title-font-size, 1.2rem);font-weight:var(--acp-dialog-title-font-weight, 500);margin:0;width:100%;padding-right:48px;color:currentColor}.acp-dialog-title-icon{margin-right:var(--acp-dialog-title-icon-gap, 12px);vertical-align:middle}h6[mat-dialog-title].acp-dialog-title span{flex-grow:1}.acp-dialog-close-btn{position:absolute;top:8px;right:16px}.acp-dialog-subtitle{margin:0;padding:0 var(--acp-dialog-subtitle-padding, 24px) var(--acp-dialog-subtitle-padding, 16px);font-size:var(--acp-dialog-subtitle-font-size, .875rem);color:var(--acp-dialog-subtitle-color, var(--mat-sys-on-surface-variant, #6c757d))}.acp-dialog-message{padding:var(--acp-dialog-message-padding, 24px);color:var(--acp-dialog-message-text-color, var(--mat-sys-on-surface, #212529))}.acp-dialog-message-actions{display:flex;justify-content:flex-end;gap:8px;padding:0 var(--acp-dialog-message-padding, 24px) var(--acp-dialog-message-padding, 24px)}.acp-dialog-actions{display:flex;align-items:center;gap:var(--acp-dialog-actions-gap, 8px);padding:var(--acp-dialog-actions-padding, 16px 24px);border-top:1px solid var(--acp-dialog-actions-border-color, var(--mat-sys-outline-variant, #dee2e6))}.acp-dialog-full-screen .mat-mdc-dialog-surface{height:100vh}.acp-dialog-full-screen acp-dialog-container{min-height:100vh}.acp-dialog-full-screen .acp-dialog-content.mat-mdc-dialog-content{max-height:100%;height:100%}.acp-dialog-full-screen .acp-dialog-actions,.acp-dialog-full-screen .mat-mdc-dialog-actions{margin-top:auto}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$
|
|
2175
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpDialogContainer, isStandalone: true, selector: "acp-dialog-container", viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "actionOutlet", first: true, predicate: ["actionOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "titlebarOutletRef", first: true, predicate: ["titlebarOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "stringTemplate", first: true, predicate: ["stringContent"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (headerConfig(); as header) { @if (config.showHeader !== false && !hasDeclarativeTitlebar()) {\n<acp-dialog-titlebar\n [title]=\"header.title\"\n [subtitle]=\"header.subtitle\"\n [icon]=\"header.icon\"\n [closable]=\"header.closable ?? true\"\n [closeLabel]=\"header.closeLabel ?? 'Close dialog'\"\n [draggable]=\"header.draggable ?? true\"\n [color]=\"header.color\"\n [colorClass]=\"header.colorClass\"\n [closeColor]=\"header.closeColor\"\n/>\n} }\n\n<ng-template #titlebarOutlet />\n\n<mat-dialog-content class=\"acp-dialog-content\">\n <ng-template #contentHost />\n <ng-template #stringContent let-content>\n <div class=\"acp-dialog-message\">{{ content }}</div>\n </ng-template>\n</mat-dialog-content>\n\n@if ((config.actions?.length && config.showActions !== false) || hasDeclarativeActions()) {\n<acp-dialog-actions\n [align]=\"resolvedActionsAlign()\"\n [actions]=\"hasDeclarativeActions() ? undefined : config.actions\"\n [dialogTitle]=\"resolvedDialogTitle()\"\n>\n <ng-template #actionOutlet />\n</acp-dialog-actions>\n}\n", styles: [".acp-dialog-header{cursor:move;border-bottom:1px solid var(--acp-dialog-header-border-color, var(--mat-sys-outline-variant, #dee2e6));color:var(--acp-dialog-header-text-color, var(--mat-sys-on-surface, #212529));position:relative}.acp-dialog-header.acp-dialog-header--primary{background-color:var(--acp-dialog-primary-header-background-color, var(--mat-sys-primary, #1976d2));color:var(--acp-dialog-primary-header-text-color, var(--mat-sys-on-primary, #fff))}.acp-dialog-header.acp-dialog-header--secondary{background-color:var(--acp-dialog-secondary-header-background-color, var(--mat-sys-secondary, #9c27b0));color:var(--acp-dialog-secondary-header-text-color, var(--mat-sys-on-secondary, #fff))}.acp-dialog-header.acp-dialog-header--accent{background-color:var(--acp-dialog-accent-header-background-color, var(--mat-sys-tertiary, #7c4dff));color:var(--acp-dialog-accent-header-text-color, var(--mat-sys-on-tertiary, #fff))}.acp-dialog-header.acp-dialog-header--error,.acp-dialog-header.acp-dialog-header--danger{background-color:var(--acp-dialog-error-header-background-color, var(--mat-sys-error, #b3261e));color:var(--acp-dialog-error-header-text-color, var(--mat-sys-on-error, #fff))}.acp-dialog-header.acp-dialog-header--success{background-color:var(--acp-dialog-success-header-background-color, #22c55e);color:var(--acp-dialog-success-header-text-color, #fff)}.acp-dialog-header.acp-dialog-header--warning{background-color:var(--acp-dialog-warning-header-background-color, #f59e0b);color:var(--acp-dialog-warning-header-text-color, #212529)}.acp-dialog-header.acp-dialog-header--info{background-color:var(--acp-dialog-info-header-background-color, #0ea5e9);color:var(--acp-dialog-info-header-text-color, #fff)}.acp-dialog-header.acp-dialog-header--dark{background-color:var(--acp-dialog-dark-header-background-color, #212529);color:var(--acp-dialog-dark-header-text-color, #fff)}.acp-dialog-header[class*=acp-dialog-header--] .acp-dialog-subtitle{color:inherit;opacity:.85}h6[mat-dialog-title].acp-dialog-title{display:flex;align-items:center;font-size:var(--acp-dialog-title-font-size, 1.2rem);font-weight:var(--acp-dialog-title-font-weight, 500);margin:0;width:100%;padding-right:48px;color:currentColor}.acp-dialog-title-icon{margin-right:var(--acp-dialog-title-icon-gap, 12px);vertical-align:middle}h6[mat-dialog-title].acp-dialog-title span{flex-grow:1}.acp-dialog-close-btn{position:absolute;top:8px;right:16px}.acp-dialog-subtitle{margin:0;padding:0 var(--acp-dialog-subtitle-padding, 24px) var(--acp-dialog-subtitle-padding, 16px);font-size:var(--acp-dialog-subtitle-font-size, .875rem);color:var(--acp-dialog-subtitle-color, var(--mat-sys-on-surface-variant, #6c757d))}.acp-dialog-message{padding:var(--acp-dialog-message-padding, 24px);color:var(--acp-dialog-message-text-color, var(--mat-sys-on-surface, #212529))}.acp-dialog-message-actions{display:flex;justify-content:flex-end;gap:8px;padding:0 var(--acp-dialog-message-padding, 24px) var(--acp-dialog-message-padding, 24px)}.acp-dialog-actions{display:flex;align-items:center;gap:var(--acp-dialog-actions-gap, 8px);padding:var(--acp-dialog-actions-padding, 16px 24px);border-top:1px solid var(--acp-dialog-actions-border-color, var(--mat-sys-outline-variant, #dee2e6))}.acp-dialog-full-screen .mat-mdc-dialog-surface{height:100vh}.acp-dialog-full-screen acp-dialog-container{min-height:100vh}.acp-dialog-full-screen .acp-dialog-content.mat-mdc-dialog-content{max-height:100%;height:100%}.acp-dialog-full-screen .acp-dialog-actions,.acp-dialog-full-screen .mat-mdc-dialog-actions{margin-top:auto}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: AcpDialogTitlebar, selector: "acp-dialog-titlebar", inputs: ["title", "subtitle", "icon", "closable", "closeLabel", "draggable", "color", "colorClass", "closeColor"], outputs: ["closed"] }, { kind: "component", type: AcpDialogActions, selector: "acp-dialog-actions", inputs: ["align", "actions", "dialogTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2263
2176
|
}
|
|
2264
2177
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDialogContainer, decorators: [{
|
|
2265
2178
|
type: Component,
|
|
@@ -2727,7 +2640,7 @@ class DialogWrapper {
|
|
|
2727
2640
|
}
|
|
2728
2641
|
}
|
|
2729
2642
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2730
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DialogWrapper, isStandalone: true, selector: "acp-dialog-wrapper", viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "header", first: true, predicate: ["dialogHeader"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!config.hideHeader) {\n<div\n class=\"acp-dialog-header\"\n cdkDrag\n cdkDragRootElement=\".cdk-overlay-pane\"\n cdkDragHandle\n #dialogHeader\n (mousedown)=\"bringToFront()\"\n>\n <h6 mat-dialog-title class=\"acp-dialog-title\">\n @if (config.icon) {\n <mat-icon class=\"acp-dialog-title-icon\" aria-hidden=\"true\">{{ config.icon }}</mat-icon>\n }\n <span>{{ config.title }}</span>\n @if (config.showCloseButton !== false) {\n <acp-button\n [customClass]=\"'acp-dialog-close-btn'\"\n matStyle=\"icon\"\n icon=\"close\"\n (handleClick)=\"onClose()\"\n [ariaLabel]=\"config.closeAriaLabel ?? 'Close dialog'\"\n />\n }\n </h6>\n</div>\n}\n\n<ng-template #contentHost />\n", styles: [".acp-dialog-header{cursor:move;border-bottom:1px solid var(--mat-sys-outline-variant, #dee2e6);color:var(--mat-sys-on-surface, #212529);position:relative}h6[mat-dialog-title].acp-dialog-title{display:flex;align-items:center;font-size:1.2rem;font-weight:500;margin:0;width:100%;padding-right:48px}.acp-dialog-title-icon{margin-right:12px;vertical-align:middle}h6[mat-dialog-title].acp-dialog-title span{flex-grow:1}.acp-dialog-close-btn{position:absolute;top:8px;right:16px}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$
|
|
2643
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DialogWrapper, isStandalone: true, selector: "acp-dialog-wrapper", viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "header", first: true, predicate: ["dialogHeader"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!config.hideHeader) {\n<div\n class=\"acp-dialog-header\"\n cdkDrag\n cdkDragRootElement=\".cdk-overlay-pane\"\n cdkDragHandle\n #dialogHeader\n (mousedown)=\"bringToFront()\"\n>\n <h6 mat-dialog-title class=\"acp-dialog-title\">\n @if (config.icon) {\n <mat-icon class=\"acp-dialog-title-icon\" aria-hidden=\"true\">{{ config.icon }}</mat-icon>\n }\n <span>{{ config.title }}</span>\n @if (config.showCloseButton !== false) {\n <acp-button\n [customClass]=\"'acp-dialog-close-btn'\"\n matStyle=\"icon\"\n icon=\"close\"\n (handleClick)=\"onClose()\"\n [ariaLabel]=\"config.closeAriaLabel ?? 'Close dialog'\"\n />\n }\n </h6>\n</div>\n}\n\n<ng-template #contentHost />\n", styles: [".acp-dialog-header{cursor:move;border-bottom:1px solid var(--mat-sys-outline-variant, #dee2e6);color:var(--mat-sys-on-surface, #212529);position:relative}h6[mat-dialog-title].acp-dialog-title{display:flex;align-items:center;font-size:1.2rem;font-weight:500;margin:0;width:100%;padding-right:48px}.acp-dialog-title-icon{margin-right:12px;vertical-align:middle}h6[mat-dialog-title].acp-dialog-title span{flex-grow:1}.acp-dialog-close-btn{position:absolute;top:8px;right:16px}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: Button, selector: "acp-button", inputs: ["variant", "text", "icon", "disabled", "type", "matStyle", "customClass", "reportFormat", "extended", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2731
2644
|
}
|
|
2732
2645
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogWrapper, decorators: [{
|
|
2733
2646
|
type: Component,
|
|
@@ -2840,13 +2753,246 @@ class DynamicSelect {
|
|
|
2840
2753
|
this._onDestroy.complete();
|
|
2841
2754
|
}
|
|
2842
2755
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DynamicSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2843
|
-
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$
|
|
2756
|
+
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 });
|
|
2844
2757
|
}
|
|
2845
2758
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DynamicSelect, decorators: [{
|
|
2846
2759
|
type: Component,
|
|
2847
2760
|
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" }]
|
|
2848
2761
|
}], 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"] }] } });
|
|
2849
2762
|
|
|
2763
|
+
const read = (item, accessor) => typeof accessor === 'function' ? accessor(item) : item[accessor];
|
|
2764
|
+
const toKey = (v) => typeof v === 'string' || typeof v === 'number' ? String(v).trim() : null;
|
|
2765
|
+
/** Matches `1` with `'1'`, useful when ids come as strings from forms or query params. */
|
|
2766
|
+
const acpSearchSelectLooseEquals = (a, b) => a === b || (toKey(a) !== null && toKey(a) === toKey(b));
|
|
2767
|
+
/** Lowercase and strip accents, so "camion" matches "Camión". */
|
|
2768
|
+
const acpSearchSelectNormalize = (text) => text.normalize('NFD').replace(/\p{M}/gu, '').toLowerCase().trim();
|
|
2769
|
+
/**
|
|
2770
|
+
* Searchable select built on `mat-autocomplete`. Accepts flat or one-level tree lists:
|
|
2771
|
+
* an item whose `children` is an array renders as a group.
|
|
2772
|
+
* Works with `ngModel`, reactive forms and `[(value)]`.
|
|
2773
|
+
*/
|
|
2774
|
+
class AcpSearchSelect {
|
|
2775
|
+
document = inject(DOCUMENT);
|
|
2776
|
+
ngControl = inject(NgControl, { self: true, optional: true });
|
|
2777
|
+
parentForm = inject(NgForm, { optional: true });
|
|
2778
|
+
parentFormGroup = inject(FormGroupDirective, { optional: true });
|
|
2779
|
+
// Data
|
|
2780
|
+
items = input.required(/* @ts-ignore */
|
|
2781
|
+
...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
2782
|
+
bindLabel = input('value', /* @ts-ignore */
|
|
2783
|
+
...(ngDevMode ? [{ debugName: "bindLabel" }] : /* istanbul ignore next */ []));
|
|
2784
|
+
bindValue = input('id', /* @ts-ignore */
|
|
2785
|
+
...(ngDevMode ? [{ debugName: "bindValue" }] : /* istanbul ignore next */ []));
|
|
2786
|
+
children = input('children', /* @ts-ignore */
|
|
2787
|
+
...(ngDevMode ? [{ debugName: "children" }] : /* istanbul ignore next */ []));
|
|
2788
|
+
groupLabel = input('value', /* @ts-ignore */
|
|
2789
|
+
...(ngDevMode ? [{ debugName: "groupLabel" }] : /* istanbul ignore next */ []));
|
|
2790
|
+
compareWith = input(acpSearchSelectLooseEquals, /* @ts-ignore */
|
|
2791
|
+
...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
|
|
2792
|
+
/** Custom match. Receives the item and the normalized query. */
|
|
2793
|
+
filterFn = input(null, /* @ts-ignore */
|
|
2794
|
+
...(ngDevMode ? [{ debugName: "filterFn" }] : /* istanbul ignore next */ []));
|
|
2795
|
+
/** Set to `false` when `items` already come filtered from the server (see `searchChange`). */
|
|
2796
|
+
localFilter = input(true, { ...(ngDevMode ? { debugName: "localFilter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2797
|
+
/** Value written when the field is cleared, e.g. `0` for "all". */
|
|
2798
|
+
emptyValue = input(null, /* @ts-ignore */
|
|
2799
|
+
...(ngDevMode ? [{ debugName: "emptyValue" }] : /* istanbul ignore next */ []));
|
|
2800
|
+
// Field
|
|
2801
|
+
label = input('', /* @ts-ignore */
|
|
2802
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
2803
|
+
placeholder = input('Buscar...', /* @ts-ignore */
|
|
2804
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
2805
|
+
hint = input('', /* @ts-ignore */
|
|
2806
|
+
...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
2807
|
+
errorText = input('', /* @ts-ignore */
|
|
2808
|
+
...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
|
|
2809
|
+
noResultsText = input('Sin resultados', /* @ts-ignore */
|
|
2810
|
+
...(ngDevMode ? [{ debugName: "noResultsText" }] : /* istanbul ignore next */ []));
|
|
2811
|
+
loadingText = input('Buscando...', /* @ts-ignore */
|
|
2812
|
+
...(ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []));
|
|
2813
|
+
clearLabel = input('Limpiar', /* @ts-ignore */
|
|
2814
|
+
...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
|
|
2815
|
+
appearance = input('outline', /* @ts-ignore */
|
|
2816
|
+
...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
2817
|
+
required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2818
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2819
|
+
clearable = input(true, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2820
|
+
loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2821
|
+
value = model(null, /* @ts-ignore */
|
|
2822
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
2823
|
+
optionSelected = output();
|
|
2824
|
+
cleared = output();
|
|
2825
|
+
/** Raw text typed by the user; debounce it in the consumer for server-side search. */
|
|
2826
|
+
searchChange = output();
|
|
2827
|
+
input = viewChild(MatInput, /* @ts-ignore */
|
|
2828
|
+
...(ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []));
|
|
2829
|
+
trigger = viewChild(MatAutocompleteTrigger, /* @ts-ignore */
|
|
2830
|
+
...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
|
|
2831
|
+
inputEl = viewChild('field', /* @ts-ignore */
|
|
2832
|
+
...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
|
|
2833
|
+
optionTemplate = contentChild('option', /* @ts-ignore */
|
|
2834
|
+
...(ngDevMode ? [{ debugName: "optionTemplate" }] : /* istanbul ignore next */ []));
|
|
2835
|
+
/** Text typed by the user; `null` while not searching. */
|
|
2836
|
+
query = signal(null, /* @ts-ignore */
|
|
2837
|
+
...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
|
|
2838
|
+
formDisabled = signal(false, /* @ts-ignore */
|
|
2839
|
+
...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
|
|
2840
|
+
isDisabled = computed(() => this.disabled() || this.formDisabled(), /* @ts-ignore */
|
|
2841
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
2842
|
+
onChange = () => undefined;
|
|
2843
|
+
onTouched = () => undefined;
|
|
2844
|
+
errorStateMatcher = {
|
|
2845
|
+
isErrorState: () => {
|
|
2846
|
+
const control = this.ngControl;
|
|
2847
|
+
if (!control?.invalid)
|
|
2848
|
+
return false;
|
|
2849
|
+
const submitted = this.parentFormGroup?.submitted || this.parentForm?.submitted;
|
|
2850
|
+
return !!(control.touched || submitted);
|
|
2851
|
+
},
|
|
2852
|
+
};
|
|
2853
|
+
constructor() {
|
|
2854
|
+
if (this.ngControl)
|
|
2855
|
+
this.ngControl.valueAccessor = this;
|
|
2856
|
+
}
|
|
2857
|
+
/** The inner `matInput` has no `NgControl`, so it never refreshes its error state by itself. */
|
|
2858
|
+
ngDoCheck() {
|
|
2859
|
+
this.input()?.updateErrorState();
|
|
2860
|
+
}
|
|
2861
|
+
groups = computed(() => {
|
|
2862
|
+
const children = this.children();
|
|
2863
|
+
const groupLabel = this.groupLabel();
|
|
2864
|
+
const bindLabel = this.bindLabel();
|
|
2865
|
+
const bindValue = this.bindValue();
|
|
2866
|
+
const toOption = (item, group, index) => {
|
|
2867
|
+
const value = read(item, bindValue);
|
|
2868
|
+
return {
|
|
2869
|
+
key: toKey(value) ?? `#${index}`,
|
|
2870
|
+
label: String(read(item, bindLabel) ?? ''),
|
|
2871
|
+
value,
|
|
2872
|
+
source: item,
|
|
2873
|
+
group,
|
|
2874
|
+
};
|
|
2875
|
+
};
|
|
2876
|
+
const result = [];
|
|
2877
|
+
let index = 0;
|
|
2878
|
+
for (const item of this.items() ?? []) {
|
|
2879
|
+
const nested = read(item, children);
|
|
2880
|
+
if (Array.isArray(nested)) {
|
|
2881
|
+
result.push({
|
|
2882
|
+
label: String(read(item, groupLabel) ?? ''),
|
|
2883
|
+
options: nested.map(child => toOption(child, item, index++)),
|
|
2884
|
+
});
|
|
2885
|
+
continue;
|
|
2886
|
+
}
|
|
2887
|
+
const last = result.at(-1);
|
|
2888
|
+
const option = toOption(item, null, index++);
|
|
2889
|
+
if (last && last.label === null)
|
|
2890
|
+
last.options.push(option);
|
|
2891
|
+
else
|
|
2892
|
+
result.push({ label: null, options: [option] });
|
|
2893
|
+
}
|
|
2894
|
+
return result;
|
|
2895
|
+
}, /* @ts-ignore */
|
|
2896
|
+
...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
|
|
2897
|
+
filteredGroups = computed(() => {
|
|
2898
|
+
const query = acpSearchSelectNormalize(this.query() ?? '');
|
|
2899
|
+
if (!query || !this.localFilter())
|
|
2900
|
+
return this.groups();
|
|
2901
|
+
const custom = this.filterFn();
|
|
2902
|
+
const match = (option) => custom
|
|
2903
|
+
? custom(option.source, query)
|
|
2904
|
+
: acpSearchSelectNormalize(option.label).includes(query);
|
|
2905
|
+
return this.groups()
|
|
2906
|
+
.map(group => ({ ...group, options: group.options.filter(match) }))
|
|
2907
|
+
.filter(group => group.options.length > 0);
|
|
2908
|
+
}, /* @ts-ignore */
|
|
2909
|
+
...(ngDevMode ? [{ debugName: "filteredGroups" }] : /* istanbul ignore next */ []));
|
|
2910
|
+
selected = computed(() => {
|
|
2911
|
+
const value = this.value();
|
|
2912
|
+
const compare = this.compareWith();
|
|
2913
|
+
return this.groups()
|
|
2914
|
+
.flatMap(group => group.options)
|
|
2915
|
+
.find(option => compare(option.value, value));
|
|
2916
|
+
}, /* @ts-ignore */
|
|
2917
|
+
...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
|
|
2918
|
+
text = computed(() => this.query() ?? this.selected()?.label ?? '', /* @ts-ignore */
|
|
2919
|
+
...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
|
|
2920
|
+
hasValue = computed(() => {
|
|
2921
|
+
const value = this.value();
|
|
2922
|
+
return value !== null && value !== undefined && value !== this.emptyValue();
|
|
2923
|
+
}, /* @ts-ignore */
|
|
2924
|
+
...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
|
|
2925
|
+
displayWith = (option) => typeof option === 'string' ? option : (option?.label ?? '');
|
|
2926
|
+
/** Clears the selection and the search text. */
|
|
2927
|
+
clear() {
|
|
2928
|
+
this.query.set(null);
|
|
2929
|
+
this.setValue(this.emptyValue());
|
|
2930
|
+
this.cleared.emit();
|
|
2931
|
+
}
|
|
2932
|
+
selectAll(event) {
|
|
2933
|
+
event.target.select();
|
|
2934
|
+
}
|
|
2935
|
+
onInput(event) {
|
|
2936
|
+
const text = event.target.value;
|
|
2937
|
+
this.query.set(text);
|
|
2938
|
+
this.searchChange.emit(text);
|
|
2939
|
+
if (!text.trim() && this.hasValue()) {
|
|
2940
|
+
this.setValue(this.emptyValue());
|
|
2941
|
+
this.cleared.emit();
|
|
2942
|
+
}
|
|
2943
|
+
}
|
|
2944
|
+
/** Leaving the field without picking drops the typed text and shows the selection again. */
|
|
2945
|
+
onBlur() {
|
|
2946
|
+
this.onTouched();
|
|
2947
|
+
if (!this.trigger()?.panelOpen)
|
|
2948
|
+
this.query.set(null);
|
|
2949
|
+
}
|
|
2950
|
+
/** The panel also closes while typing (e.g. no results yet); keep the text in that case. */
|
|
2951
|
+
onClosed() {
|
|
2952
|
+
if (this.document.activeElement !== this.inputEl()?.nativeElement)
|
|
2953
|
+
this.query.set(null);
|
|
2954
|
+
}
|
|
2955
|
+
onSelected(event) {
|
|
2956
|
+
const option = event.option.value;
|
|
2957
|
+
this.query.set(null);
|
|
2958
|
+
this.setValue(option.value);
|
|
2959
|
+
this.optionSelected.emit({ value: option.value, item: option.source, group: option.group });
|
|
2960
|
+
}
|
|
2961
|
+
writeValue(value) {
|
|
2962
|
+
this.query.set(null);
|
|
2963
|
+
this.value.set(value ?? this.emptyValue());
|
|
2964
|
+
}
|
|
2965
|
+
registerOnChange(fn) {
|
|
2966
|
+
this.onChange = fn;
|
|
2967
|
+
}
|
|
2968
|
+
registerOnTouched(fn) {
|
|
2969
|
+
this.onTouched = fn;
|
|
2970
|
+
}
|
|
2971
|
+
setDisabledState(isDisabled) {
|
|
2972
|
+
this.formDisabled.set(isDisabled);
|
|
2973
|
+
}
|
|
2974
|
+
setValue(value) {
|
|
2975
|
+
if (value === this.value())
|
|
2976
|
+
return;
|
|
2977
|
+
this.value.set(value);
|
|
2978
|
+
this.onChange(value);
|
|
2979
|
+
}
|
|
2980
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpSearchSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2981
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpSearchSelect, isStandalone: true, selector: "acp-search-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null }, groupLabel: { classPropertyName: "groupLabel", publicName: "groupLabel", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, localFilter: { classPropertyName: "localFilter", publicName: "localFilter", isSignal: true, isRequired: false, transformFunction: null }, emptyValue: { classPropertyName: "emptyValue", publicName: "emptyValue", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", optionSelected: "optionSelected", cleared: "cleared", searchChange: "searchChange" }, host: { properties: { "attr.title": "null" }, classAttribute: "acp-search-select" }, queries: [{ propertyName: "optionTemplate", first: true, predicate: ["option"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: MatAutocompleteTrigger, descendants: true, isSignal: true }, { propertyName: "inputEl", first: true, predicate: ["field"], descendants: true, isSignal: true }], exportAs: ["acpSearchSelect"], ngImport: i0, template: "<mat-form-field class=\"acp-search-select__field\" [appearance]=\"appearance()\">\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n <input\n #field\n matInput\n type=\"text\"\n autocomplete=\"off\"\n [placeholder]=\"placeholder()\"\n [value]=\"text()\"\n [required]=\"required()\"\n [disabled]=\"isDisabled()\"\n [errorStateMatcher]=\"errorStateMatcher\"\n [matAutocomplete]=\"auto\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n (click)=\"selectAll($event)\"\n />\n\n @if (loading()) {\n <mat-spinner matSuffix diameter=\"18\" />\n } @else if (clearable() && hasValue() && !isDisabled()) {\n <button\n mat-icon-button\n matSuffix\n type=\"button\"\n [attr.aria-label]=\"clearLabel()\"\n (click)=\"clear()\"\n >\n <mat-icon>close</mat-icon>\n </button>\n } @if (hint()) {\n <mat-hint>{{ hint() }}</mat-hint>\n } @if (errorText()) {\n <mat-error>{{ errorText() }}</mat-error>\n }\n\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n autoActiveFirstOption\n [displayWith]=\"displayWith\"\n (optionSelected)=\"onSelected($event)\"\n (closed)=\"onClosed()\"\n >\n @for (group of filteredGroups(); track (group.label ?? $index)) { @if (group.label === null) {\n @for (option of group.options; track option.key) {\n <mat-option [value]=\"option\">\n <ng-container\n [ngTemplateOutlet]=\"optionContent\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\"\n />\n </mat-option>\n } } @else {\n <mat-optgroup [label]=\"group.label\">\n @for (option of group.options; track option.key) {\n <mat-option [value]=\"option\">\n <ng-container\n [ngTemplateOutlet]=\"optionContent\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\"\n />\n </mat-option>\n }\n </mat-optgroup>\n } } @empty {\n <mat-option disabled>{{ loading() ? loadingText() : noResultsText() }}</mat-option>\n }\n </mat-autocomplete>\n</mat-form-field>\n\n<ng-template #optionContent let-option>\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: option.source, group: option.group }\"\n />\n } @else { {{ option.label }} }\n</ng-template>\n", styles: [":host{display:block}.acp-search-select__field{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i3$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2982
|
+
}
|
|
2983
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpSearchSelect, decorators: [{
|
|
2984
|
+
type: Component,
|
|
2985
|
+
args: [{ selector: 'acp-search-select', exportAs: 'acpSearchSelect', imports: [
|
|
2986
|
+
NgTemplateOutlet,
|
|
2987
|
+
MatFormFieldModule,
|
|
2988
|
+
MatInputModule,
|
|
2989
|
+
MatAutocompleteModule,
|
|
2990
|
+
MatButtonModule,
|
|
2991
|
+
MatIconModule,
|
|
2992
|
+
MatProgressSpinnerModule,
|
|
2993
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'acp-search-select', '[attr.title]': 'null' }, template: "<mat-form-field class=\"acp-search-select__field\" [appearance]=\"appearance()\">\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n <input\n #field\n matInput\n type=\"text\"\n autocomplete=\"off\"\n [placeholder]=\"placeholder()\"\n [value]=\"text()\"\n [required]=\"required()\"\n [disabled]=\"isDisabled()\"\n [errorStateMatcher]=\"errorStateMatcher\"\n [matAutocomplete]=\"auto\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n (click)=\"selectAll($event)\"\n />\n\n @if (loading()) {\n <mat-spinner matSuffix diameter=\"18\" />\n } @else if (clearable() && hasValue() && !isDisabled()) {\n <button\n mat-icon-button\n matSuffix\n type=\"button\"\n [attr.aria-label]=\"clearLabel()\"\n (click)=\"clear()\"\n >\n <mat-icon>close</mat-icon>\n </button>\n } @if (hint()) {\n <mat-hint>{{ hint() }}</mat-hint>\n } @if (errorText()) {\n <mat-error>{{ errorText() }}</mat-error>\n }\n\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n autoActiveFirstOption\n [displayWith]=\"displayWith\"\n (optionSelected)=\"onSelected($event)\"\n (closed)=\"onClosed()\"\n >\n @for (group of filteredGroups(); track (group.label ?? $index)) { @if (group.label === null) {\n @for (option of group.options; track option.key) {\n <mat-option [value]=\"option\">\n <ng-container\n [ngTemplateOutlet]=\"optionContent\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\"\n />\n </mat-option>\n } } @else {\n <mat-optgroup [label]=\"group.label\">\n @for (option of group.options; track option.key) {\n <mat-option [value]=\"option\">\n <ng-container\n [ngTemplateOutlet]=\"optionContent\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\"\n />\n </mat-option>\n }\n </mat-optgroup>\n } } @empty {\n <mat-option disabled>{{ loading() ? loadingText() : noResultsText() }}</mat-option>\n }\n </mat-autocomplete>\n</mat-form-field>\n\n<ng-template #optionContent let-option>\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: option.source, group: option.group }\"\n />\n } @else { {{ option.label }} }\n</ng-template>\n", styles: [":host{display:block}.acp-search-select__field{width:100%}\n"] }]
|
|
2994
|
+
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], children: [{ type: i0.Input, args: [{ isSignal: true, alias: "children", required: false }] }], groupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupLabel", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], localFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "localFilter", required: false }] }], emptyValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyValue", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], input: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatInput), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatAutocompleteTrigger), { isSignal: true }] }], inputEl: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], optionTemplate: [{ type: i0.ContentChild, args: ['option', { isSignal: true }] }] } });
|
|
2995
|
+
|
|
2850
2996
|
class UserIcon {
|
|
2851
2997
|
size = input('35', /* @ts-ignore */
|
|
2852
2998
|
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
@@ -3054,7 +3200,7 @@ class SvgIcon {
|
|
|
3054
3200
|
const registeredIcons = this.iconRegistry.getRegisteredIcons();
|
|
3055
3201
|
if (registeredIcons.length === 0) {
|
|
3056
3202
|
// Register default icons
|
|
3057
|
-
this.iconRegistry.registerIcons(DEFAULT_ICONS);
|
|
3203
|
+
this.iconRegistry.registerIcons(DEFAULT_ICONS$1);
|
|
3058
3204
|
// Configure with fallback icon
|
|
3059
3205
|
this.iconRegistry.configure({
|
|
3060
3206
|
fallbackIcon: FALLBACK_ICON,
|
|
@@ -3788,7 +3934,7 @@ class AcpGridCell {
|
|
|
3788
3934
|
btn.click?.(rowData, event);
|
|
3789
3935
|
}
|
|
3790
3936
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3791
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpGridCell, isStandalone: true, selector: "acp-grid-cell", inputs: { rowData: "rowData", colDef: "colDef", data: "data", summary: "summary", placeholder: "placeholder" }, outputs: { rowDataChange: "rowDataChange" }, exportAs: ["acpGridCell"], ngImport: i0, template: "@if (summary) {\n<span\n [title]=\"_getFormatterTooltip(data | cellSummary: colDef)\"\n [innerHTML]=\"_getText(data | cellSummary: colDef)\"\n></span>\n} @else {\n<!-- Custom formatting -->\n@if (colDef.formatter) {\n<span\n [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\"\n></span>\n} @else {\n<!-- Default formatting -->\n@switch (colDef.type) {\n<!-- Buttons -->\n@case ('button') { @for ( btn of colDef.buttons | cellActions : rowData : rowChangeRecord :\n$safeNavigationMigration(rowChangeRecord?.currentValue); track btn ) { @if (!btn.iif ||\nbtn.iif(rowData)) { @if (btn.children && btn.children.length > 0) { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} } @else { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n} } } } }\n<!-- Tag -->\n@case ('tag') { @if (colDef.tag && colDef.tag[_value]) {\n<mat-chip-listbox>\n <mat-chip color=\"primary\" [class]=\"'bg-' + colDef.tag[_value].color\">\n {{ colDef.tag[_value].text }}\n </mat-chip>\n</mat-chip-listbox>\n} @else { {{ _value }} } }\n<!-- Link -->\n@case ('link') {\n<a [href]=\"_value\" target=\"_blank\">{{ _value }}</a>\n}\n<!-- Image -->\n\n<!-- Image -->\n@case ('image') { @if (_value) {\n<!-- Imagen real -->\n<img class=\"acp-placeholder-image\" [src]=\"_value\" alt=\"img\" />\n} @else {\n<!-- Placeholder -->\n<div class=\"acp-placeholder-box\">\n <svg class=\"acp-placeholder-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M4 16l4.586-4.586a2 2 0 012.828 0L15 14m-12 5h16a1 1 0 001-1V5a1 1 0 00-1-1H3a1 1 0 00-1 1v14a1 1 0 001 1z\"\n />\n </svg>\n</div>\n} }\n\n<!-- Boolean -->\n@case ('boolean') {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n}\n<!-- Number -->\n@case ('number') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | number\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | number : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Currency -->\n@case ('currency') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | currency\n : $safeNavigationMigration(colDef.typeParameter?.currencyCode)\n : $safeNavigationMigration(colDef.typeParameter?.display)\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | currency : $safeNavigationMigration(colDef.typeParameter?.currencyCode) :\n $safeNavigationMigration(colDef.typeParameter?.display) :\n $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | percent\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | percent : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | date\n : $safeNavigationMigration(colDef.typeParameter?.format)\n : $safeNavigationMigration(colDef.typeParameter?.timezone)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | date : $safeNavigationMigration(colDef.typeParameter?.format) :\n $safeNavigationMigration(colDef.typeParameter?.timezone) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n @if (btn.icon) {\n <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n } @else if (btn.fontIcon) {\n <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\"></mat-icon>\n } @else if (btn.svgIcon) {\n <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\"></mat-icon>\n }\n</ng-template>\n", styles: [".acp-placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#4b5563;font-size:.85rem;gap:8px}.acp-placeholder-icon{width:32px;height:32px;color:#3b82f6}.acp-placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: AcpGridMenu, selector: "acp-grid-menu", inputs: ["items", "data"], exportAs: ["acpGridMenu"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AcpGridCellActionsPipe, name: "cellActions" }, { kind: "pipe", type: AcpGridCellSummaryPipe, name: "cellSummary" }, { kind: "pipe", type: AcpGridCellActionDisablePipe, name: "cellActionDisable" }, { kind: "pipe", type: AcpGridCellActionTooltipPipe, name: "cellActionTooltip" }, { kind: "pipe", type: AcpGridCellActionBadgePipe, name: "cellActionBadge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3937
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpGridCell, isStandalone: true, selector: "acp-grid-cell", inputs: { rowData: "rowData", colDef: "colDef", data: "data", summary: "summary", placeholder: "placeholder" }, outputs: { rowDataChange: "rowDataChange" }, exportAs: ["acpGridCell"], ngImport: i0, template: "@if (summary) {\n<span\n [title]=\"_getFormatterTooltip(data | cellSummary: colDef)\"\n [innerHTML]=\"_getText(data | cellSummary: colDef)\"\n></span>\n} @else {\n<!-- Custom formatting -->\n@if (colDef.formatter) {\n<span\n [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\"\n></span>\n} @else {\n<!-- Default formatting -->\n@switch (colDef.type) {\n<!-- Buttons -->\n@case ('button') { @for ( btn of colDef.buttons | cellActions : rowData : rowChangeRecord :\n$safeNavigationMigration(rowChangeRecord?.currentValue); track btn ) { @if (!btn.iif ||\nbtn.iif(rowData)) { @if (btn.children && btn.children.length > 0) { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} } @else { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n} } } } }\n<!-- Tag -->\n@case ('tag') { @if (colDef.tag && colDef.tag[_value]) {\n<mat-chip-listbox>\n <mat-chip color=\"primary\" [class]=\"'bg-' + colDef.tag[_value].color\">\n {{ colDef.tag[_value].text }}\n </mat-chip>\n</mat-chip-listbox>\n} @else { {{ _value }} } }\n<!-- Link -->\n@case ('link') {\n<a [href]=\"_value\" target=\"_blank\">{{ _value }}</a>\n}\n<!-- Image -->\n\n<!-- Image -->\n@case ('image') { @if (_value) {\n<!-- Imagen real -->\n<img class=\"acp-placeholder-image\" [src]=\"_value\" alt=\"img\" />\n} @else {\n<!-- Placeholder -->\n<div class=\"acp-placeholder-box\">\n <svg class=\"acp-placeholder-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M4 16l4.586-4.586a2 2 0 012.828 0L15 14m-12 5h16a1 1 0 001-1V5a1 1 0 00-1-1H3a1 1 0 00-1 1v14a1 1 0 001 1z\"\n />\n </svg>\n</div>\n} }\n\n<!-- Boolean -->\n@case ('boolean') {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n}\n<!-- Number -->\n@case ('number') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | number\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | number : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Currency -->\n@case ('currency') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | currency\n : $safeNavigationMigration(colDef.typeParameter?.currencyCode)\n : (colDef.typeParameter?.display ?? 'symbol')\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | currency : $safeNavigationMigration(colDef.typeParameter?.currencyCode) :\n (colDef.typeParameter?.display ?? 'symbol') :\n $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | percent\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | percent : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | date\n : $safeNavigationMigration(colDef.typeParameter?.format)\n : $safeNavigationMigration(colDef.typeParameter?.timezone)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | date : $safeNavigationMigration(colDef.typeParameter?.format) :\n $safeNavigationMigration(colDef.typeParameter?.timezone) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n @if (btn.icon) {\n <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n } @else if (btn.fontIcon) {\n <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\"></mat-icon>\n } @else if (btn.svgIcon) {\n <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\"></mat-icon>\n }\n</ng-template>\n", styles: [".acp-placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#4b5563;font-size:.85rem;gap:8px}.acp-placeholder-icon{width:32px;height:32px;color:#3b82f6}.acp-placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: AcpGridMenu, selector: "acp-grid-menu", inputs: ["items", "data"], exportAs: ["acpGridMenu"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AcpGridCellActionsPipe, name: "cellActions" }, { kind: "pipe", type: AcpGridCellSummaryPipe, name: "cellSummary" }, { kind: "pipe", type: AcpGridCellActionDisablePipe, name: "cellActionDisable" }, { kind: "pipe", type: AcpGridCellActionTooltipPipe, name: "cellActionTooltip" }, { kind: "pipe", type: AcpGridCellActionBadgePipe, name: "cellActionBadge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3792
3938
|
}
|
|
3793
3939
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCell, decorators: [{
|
|
3794
3940
|
type: Component,
|
|
@@ -3814,7 +3960,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
3814
3960
|
AcpGridCellActionTooltipPipe,
|
|
3815
3961
|
AcpGridCellActionBadgePipe,
|
|
3816
3962
|
AcpGridMenu,
|
|
3817
|
-
], template: "@if (summary) {\n<span\n [title]=\"_getFormatterTooltip(data | cellSummary: colDef)\"\n [innerHTML]=\"_getText(data | cellSummary: colDef)\"\n></span>\n} @else {\n<!-- Custom formatting -->\n@if (colDef.formatter) {\n<span\n [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\"\n></span>\n} @else {\n<!-- Default formatting -->\n@switch (colDef.type) {\n<!-- Buttons -->\n@case ('button') { @for ( btn of colDef.buttons | cellActions : rowData : rowChangeRecord :\n$safeNavigationMigration(rowChangeRecord?.currentValue); track btn ) { @if (!btn.iif ||\nbtn.iif(rowData)) { @if (btn.children && btn.children.length > 0) { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} } @else { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n} } } } }\n<!-- Tag -->\n@case ('tag') { @if (colDef.tag && colDef.tag[_value]) {\n<mat-chip-listbox>\n <mat-chip color=\"primary\" [class]=\"'bg-' + colDef.tag[_value].color\">\n {{ colDef.tag[_value].text }}\n </mat-chip>\n</mat-chip-listbox>\n} @else { {{ _value }} } }\n<!-- Link -->\n@case ('link') {\n<a [href]=\"_value\" target=\"_blank\">{{ _value }}</a>\n}\n<!-- Image -->\n\n<!-- Image -->\n@case ('image') { @if (_value) {\n<!-- Imagen real -->\n<img class=\"acp-placeholder-image\" [src]=\"_value\" alt=\"img\" />\n} @else {\n<!-- Placeholder -->\n<div class=\"acp-placeholder-box\">\n <svg class=\"acp-placeholder-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M4 16l4.586-4.586a2 2 0 012.828 0L15 14m-12 5h16a1 1 0 001-1V5a1 1 0 00-1-1H3a1 1 0 00-1 1v14a1 1 0 001 1z\"\n />\n </svg>\n</div>\n} }\n\n<!-- Boolean -->\n@case ('boolean') {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n}\n<!-- Number -->\n@case ('number') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | number\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | number : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Currency -->\n@case ('currency') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | currency\n : $safeNavigationMigration(colDef.typeParameter?.currencyCode)\n : $safeNavigationMigration(colDef.typeParameter?.display)\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | currency : $safeNavigationMigration(colDef.typeParameter?.currencyCode) :\n $safeNavigationMigration(colDef.typeParameter?.display) :\n $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | percent\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | percent : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | date\n : $safeNavigationMigration(colDef.typeParameter?.format)\n : $safeNavigationMigration(colDef.typeParameter?.timezone)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | date : $safeNavigationMigration(colDef.typeParameter?.format) :\n $safeNavigationMigration(colDef.typeParameter?.timezone) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n @if (btn.icon) {\n <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n } @else if (btn.fontIcon) {\n <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\"></mat-icon>\n } @else if (btn.svgIcon) {\n <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\"></mat-icon>\n }\n</ng-template>\n", styles: [".acp-placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#4b5563;font-size:.85rem;gap:8px}.acp-placeholder-icon{width:32px;height:32px;color:#3b82f6}.acp-placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"] }]
|
|
3963
|
+
], template: "@if (summary) {\n<span\n [title]=\"_getFormatterTooltip(data | cellSummary: colDef)\"\n [innerHTML]=\"_getText(data | cellSummary: colDef)\"\n></span>\n} @else {\n<!-- Custom formatting -->\n@if (colDef.formatter) {\n<span\n [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\"\n></span>\n} @else {\n<!-- Default formatting -->\n@switch (colDef.type) {\n<!-- Buttons -->\n@case ('button') { @for ( btn of colDef.buttons | cellActions : rowData : rowChangeRecord :\n$safeNavigationMigration(rowChangeRecord?.currentValue); track btn ) { @if (!btn.iif ||\nbtn.iif(rowData)) { @if (btn.children && btn.children.length > 0) { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} } @else { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n} } } } }\n<!-- Tag -->\n@case ('tag') { @if (colDef.tag && colDef.tag[_value]) {\n<mat-chip-listbox>\n <mat-chip color=\"primary\" [class]=\"'bg-' + colDef.tag[_value].color\">\n {{ colDef.tag[_value].text }}\n </mat-chip>\n</mat-chip-listbox>\n} @else { {{ _value }} } }\n<!-- Link -->\n@case ('link') {\n<a [href]=\"_value\" target=\"_blank\">{{ _value }}</a>\n}\n<!-- Image -->\n\n<!-- Image -->\n@case ('image') { @if (_value) {\n<!-- Imagen real -->\n<img class=\"acp-placeholder-image\" [src]=\"_value\" alt=\"img\" />\n} @else {\n<!-- Placeholder -->\n<div class=\"acp-placeholder-box\">\n <svg class=\"acp-placeholder-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M4 16l4.586-4.586a2 2 0 012.828 0L15 14m-12 5h16a1 1 0 001-1V5a1 1 0 00-1-1H3a1 1 0 00-1 1v14a1 1 0 001 1z\"\n />\n </svg>\n</div>\n} }\n\n<!-- Boolean -->\n@case ('boolean') {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n}\n<!-- Number -->\n@case ('number') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | number\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | number : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Currency -->\n@case ('currency') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | currency\n : $safeNavigationMigration(colDef.typeParameter?.currencyCode)\n : (colDef.typeParameter?.display ?? 'symbol')\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | currency : $safeNavigationMigration(colDef.typeParameter?.currencyCode) :\n (colDef.typeParameter?.display ?? 'symbol') :\n $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | percent\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | percent : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | date\n : $safeNavigationMigration(colDef.typeParameter?.format)\n : $safeNavigationMigration(colDef.typeParameter?.timezone)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | date : $safeNavigationMigration(colDef.typeParameter?.format) :\n $safeNavigationMigration(colDef.typeParameter?.timezone) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n @if (btn.icon) {\n <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n } @else if (btn.fontIcon) {\n <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\"></mat-icon>\n } @else if (btn.svgIcon) {\n <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\"></mat-icon>\n }\n</ng-template>\n", styles: [".acp-placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#4b5563;font-size:.85rem;gap:8px}.acp-placeholder-icon{width:32px;height:32px;color:#3b82f6}.acp-placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"] }]
|
|
3818
3964
|
}], propDecorators: { rowData: [{
|
|
3819
3965
|
type: Input
|
|
3820
3966
|
}], colDef: [{
|
|
@@ -4729,7 +4875,7 @@ class AcpGridColumnMenu {
|
|
|
4729
4875
|
sortable = true;
|
|
4730
4876
|
pinnable = true;
|
|
4731
4877
|
get buttonText() {
|
|
4732
|
-
const defaultText =
|
|
4878
|
+
const defaultText = this.selectableChecked === 'show' ? 'Columnas' : 'Columnas ocultas';
|
|
4733
4879
|
return this._buttonText ? this._buttonText : defaultText;
|
|
4734
4880
|
}
|
|
4735
4881
|
set buttonText(value) {
|
|
@@ -4782,7 +4928,7 @@ class AcpGridColumnMenu {
|
|
|
4782
4928
|
}
|
|
4783
4929
|
}
|
|
4784
4930
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridColumnMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4785
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpGridColumnMenu, isStandalone: true, selector: "acp-grid-column-menu", inputs: { columns: "columns", selectable: "selectable", selectableChecked: "selectableChecked", sortable: "sortable", pinnable: "pinnable", buttonText: "buttonText", buttonType: "buttonType", buttonColor: "buttonColor", buttonClass: "buttonClass", buttonIcon: "buttonIcon", buttonFontIcon: "buttonFontIcon", buttonSvgIcon: "buttonSvgIcon", showHeader: "showHeader", headerText: "headerText", headerTemplate: "headerTemplate", showFooter: "showFooter", footerText: "footerText", footerTemplate: "footerTemplate", pinOptions: "pinOptions" }, outputs: { columnChange: "columnChange" }, viewQueries: [{ propertyName: "menuPanel", first: true, predicate: MatMenu, descendants: true, static: true }, { propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], exportAs: ["acpGridColumnMenu"], ngImport: i0, template: "@if (buttonType === 'icon') {\n<button\n [class]=\"buttonClass\"\n matIconButton\n type=\"button\"\n [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl\"></mat-icon>\n</button>\n} @else {\n<button\n [class]=\"buttonClass\"\n [matButton]=\"buttonType\"\n type=\"button\"\n [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl\"></mat-icon>\n {{ buttonText }}\n</button>\n}\n\n<ng-template #iconTpl>\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n } @else if(buttonFontIcon) {\n <mat-icon [fontIcon]=\"buttonFontIcon\"></mat-icon>\n } @else if(buttonSvgIcon) {\n <mat-icon [svgIcon]=\"buttonSvgIcon\"></mat-icon>\n }\n</ng-template>\n\n<mat-menu #menu=\"matMenu\" class=\"acp-grid-column-menu\">\n <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n <div\n class=\"acp-grid-column-menu-content\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n >\n @if (showHeader) {\n <div class=\"acp-grid-column-menu-header\">\n @if (headerTemplate) {\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n } @else { {{headerText}} }\n </div>\n }\n\n <div class=\"acp-grid-column-menu-body\">\n @if (sortable) {\n <div\n class=\"acp-grid-column-menu-list\"\n cdkDropList\n (cdkDropListDropped)=\"_handleDroped($event)\"\n >\n @for (col of columns; track col.field) {\n <div\n class=\"acp-grid-column-menu-item\"\n cdkDrag\n [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-column-drag-handle-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path\n d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\"\n />\n </svg>\n <ng-template\n [ngTemplateOutlet]=\"checkboxList\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\"\n >\n </ng-template>\n </div>\n }\n </div>\n } @if (!sortable) {\n <div class=\"acp-grid-column-menu-list\">\n @for (col of columns; track col.field) {\n <div class=\"acp-grid-column-menu-item\">\n <ng-template\n [ngTemplateOutlet]=\"checkboxList\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\"\n >\n </ng-template>\n </div>\n }\n </div>\n }\n </div>\n\n @if (showFooter) {\n <div class=\"acp-grid-column-menu-footer\">\n @if (footerTemplate) {\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n } @else { {{footerText}} }\n </div>\n }\n </div>\n</mat-menu>\n\n<ng-template #checkboxList let-col>\n @if (pinnable) {\n <button\n class=\"acp-grid-column-pin-button\"\n matIconButton\n type=\"button\"\n [matMenuTriggerFor]=\"pinList\"\n >\n @if (col.pinned) {\n <svg\n class=\"acp-grid-icon acp-grid-column-pin-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\n </svg>\n } @if (!col.pinned) {\n <svg\n class=\"acp-grid-icon acp-grid-column-pin-off-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path\n d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\"\n />\n </svg>\n }\n </button>\n <mat-menu #pinList=\"matMenu\" class=\"acp-grid-column-pin-list\">\n @for (item of pinOptions; track item) {\n <button\n class=\"acp-grid-column-pin-option\"\n type=\"button\"\n mat-menu-item\n (click)=\"_handlePinSelect(col, item.value)\"\n >\n <span class=\"acp-grid-column-pin-option-placeholder\">\n <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n @if (col.pinned==item.value) {\n <svg\n class=\"acp-grid-icon acp-grid-column-pin-check-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n </svg>\n }\n </span>\n <span class=\"acp-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\n </button>\n }\n </mat-menu>\n } @if (selectable) {\n <mat-checkbox\n class=\"acp-grid-column-menu-item-label\"\n [(ngModel)]=\"col[selectableChecked]\"\n [disabled]=\"col.disabled\"\n (change)=\"_handleChecked(col)\"\n >{{col.header | toObservable | async}}</mat-checkbox\n >\n } @else {\n <span class=\"acp-grid-column-menu-item-label\">{{col.header | toObservable | async}}</span>\n }\n</ng-template>\n", styles: [".acp-grid-column-menu,.acp-grid-column-pin-list{color:var(--acp-grid-column-menu-text-color, var(--mat-sys-on-surface-variant))}.acp-grid-column-menu .mat-mdc-menu-content{padding:0}.acp-grid-column-menu-body{max-height:65vh;padding:8px 16px;overflow:auto}.acp-grid-column-menu-header,.acp-grid-column-menu-footer{position:sticky;z-index:1;padding:8px 16px}.acp-grid-column-menu-header{top:0;border-bottom:1px solid var(--acp-grid-column-menu-divider-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-footer{bottom:0;border-top:1px solid var(--acp-grid-column-menu-divider-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-list{display:block;max-width:100%}.acp-grid-column-menu-list.cdk-drop-list-dragging .acp-grid-column-menu-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.acp-grid-column-menu-item{display:flex;flex-direction:row;align-items:center}.acp-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{opacity:.35;cursor:no-drop}.acp-grid-column-menu-item .cdk-drag-handle{cursor:move}.acp-grid-column-menu-item.cdk-drag-preview{border-radius:4px;box-shadow:0 0 0 1px var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-item.cdk-drag-placeholder{opacity:0}.acp-grid-column-menu-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.acp-grid-column-pin-button.mat-mdc-icon-button .mat-mdc-button-touch-target{width:100%;height:100%}.acp-grid-column-pin-option.mat-menu-item{display:flex;align-items:center;height:32px}.acp-grid-column-pin-option-placeholder{display:inline-block;width:20px;height:20px;line-height:20px;vertical-align:middle}.acp-grid-column-pin-option-text{padding:0 8px;vertical-align:middle}.acp-grid-column-drag-handle-icon:hover{cursor:move}.acp-grid-column-menu-item-label.mat-mdc-checkbox .mat-mdc-checkbox-touch-target{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4931
|
+
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 });
|
|
4786
4932
|
}
|
|
4787
4933
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridColumnMenu, decorators: [{
|
|
4788
4934
|
type: Component,
|
|
@@ -5126,11 +5272,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
5126
5272
|
|
|
5127
5273
|
const DATA_GRID_DEFAULT_OPTIONS = new InjectionToken('acp-grid-default-options');
|
|
5128
5274
|
class DataGrid {
|
|
5129
|
-
|
|
5275
|
+
/** Densidad de la tabla. `'normal'` está obsoleto y equivale a `'medium'`. */
|
|
5276
|
+
size = input('medium', /* @ts-ignore */
|
|
5130
5277
|
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
5278
|
+
_size = computed(() => this.size() === 'normal' ? 'medium' : this.size(), /* @ts-ignore */
|
|
5279
|
+
...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
|
|
5131
5280
|
_animationsDisabled = _animationsDisabled();
|
|
5132
5281
|
_utils = inject(DataGridUtils);
|
|
5133
5282
|
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
5283
|
+
_elementRef = inject(ElementRef);
|
|
5284
|
+
_injector = inject(Injector);
|
|
5285
|
+
static _nextId = 0;
|
|
5286
|
+
/** Unique id of the grid, used for row ids and `aria-controls`. */
|
|
5287
|
+
gridId = `acp-grid-${DataGrid._nextId++}`;
|
|
5288
|
+
_activeRow = signal(null, /* @ts-ignore */
|
|
5289
|
+
...(ngDevMode ? [{ debugName: "_activeRow" }] : /* istanbul ignore next */ []));
|
|
5290
|
+
_focusFirstRowOnRender = false;
|
|
5291
|
+
/** @internal Set by `acpGridNavigationFor` to activate the first row when data changes. */
|
|
5292
|
+
_activateFirstRowOnDataChange = false;
|
|
5134
5293
|
_defaultOptions = inject(DATA_GRID_DEFAULT_OPTIONS, {
|
|
5135
5294
|
optional: true,
|
|
5136
5295
|
});
|
|
@@ -5307,12 +5466,23 @@ class DataGrid {
|
|
|
5307
5466
|
noResultText = this._defaultOptions?.noResultText ?? 'No records found';
|
|
5308
5467
|
/** The template for the empty data. */
|
|
5309
5468
|
noResultTemplate;
|
|
5310
|
-
// Keyboard Navigation
|
|
5311
|
-
|
|
5312
|
-
|
|
5313
|
-
|
|
5469
|
+
// ===== Keyboard Navigation =====
|
|
5470
|
+
/**
|
|
5471
|
+
* Whether rows can be navigated with the keyboard: arrows, Home/End, PageUp/PageDown,
|
|
5472
|
+
* Enter (same as a click), Space (toggle selection) and Ctrl+A (select all).
|
|
5473
|
+
*/
|
|
5474
|
+
keyboardNavigation = input(this._defaultOptions?.keyboardNavigation ?? true, { ...(ngDevMode ? { debugName: "keyboardNavigation" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5475
|
+
/** Index (within the rendered page) of the row to mark as active. */
|
|
5314
5476
|
highlightedRowIndex = input(-1, /* @ts-ignore */
|
|
5315
5477
|
...(ngDevMode ? [{ debugName: "highlightedRowIndex" }] : /* istanbul ignore next */ []));
|
|
5478
|
+
_highlightedRowEffect = effect(() => {
|
|
5479
|
+
const index = this.highlightedRowIndex();
|
|
5480
|
+
if (index >= 0) {
|
|
5481
|
+
untracked(() => afterNextRender(() => this.setActiveRow(index), { injector: this._injector }));
|
|
5482
|
+
}
|
|
5483
|
+
}, /* @ts-ignore */
|
|
5484
|
+
...(ngDevMode ? [{ debugName: "_highlightedRowEffect" }] : /* istanbul ignore next */ []));
|
|
5485
|
+
/** Event emitted when the active row changes. */
|
|
5316
5486
|
focusedRowChange = output();
|
|
5317
5487
|
get _hasNoResult() {
|
|
5318
5488
|
return (!this.dataSource.data || this.dataSource.data.length === 0) && !this.loading;
|
|
@@ -5403,6 +5573,7 @@ class DataGrid {
|
|
|
5403
5573
|
// Only scroll top with data change
|
|
5404
5574
|
if (changes['data']) {
|
|
5405
5575
|
this.scrollTop(0);
|
|
5576
|
+
this._syncActiveRowWithData();
|
|
5406
5577
|
}
|
|
5407
5578
|
}
|
|
5408
5579
|
ngAfterViewInit() {
|
|
@@ -5446,6 +5617,192 @@ class DataGrid {
|
|
|
5446
5617
|
.reduce((acc, cur) => acc + Number.parseFloat(cur.width || '80px'), 0) + 'px';
|
|
5447
5618
|
});
|
|
5448
5619
|
}
|
|
5620
|
+
// ===== Keyboard Navigation =====
|
|
5621
|
+
/** Rows currently rendered (after sorting and front-end paging). */
|
|
5622
|
+
get renderedRows() {
|
|
5623
|
+
return this.dataSource.connect().value;
|
|
5624
|
+
}
|
|
5625
|
+
/** Index of the active row within the rendered rows, or -1. */
|
|
5626
|
+
get activeRowIndex() {
|
|
5627
|
+
const row = this._activeRow();
|
|
5628
|
+
return row === null ? -1 : this.renderedRows.indexOf(row);
|
|
5629
|
+
}
|
|
5630
|
+
/** The active row, or `null`. */
|
|
5631
|
+
get activeRow() {
|
|
5632
|
+
return this.activeRowIndex === -1 ? null : this._activeRow();
|
|
5633
|
+
}
|
|
5634
|
+
/**
|
|
5635
|
+
* Marks a rendered row as active.
|
|
5636
|
+
* @param focus Whether to move the browser focus to the row.
|
|
5637
|
+
*/
|
|
5638
|
+
setActiveRow(index, focus = false) {
|
|
5639
|
+
const rows = this.renderedRows;
|
|
5640
|
+
if (rows.length === 0) {
|
|
5641
|
+
this._setActiveRow(null);
|
|
5642
|
+
return;
|
|
5643
|
+
}
|
|
5644
|
+
const target = Math.min(Math.max(index, 0), rows.length - 1);
|
|
5645
|
+
this._setActiveRow(rows[target]);
|
|
5646
|
+
const element = this._rowElement(target);
|
|
5647
|
+
if (focus) {
|
|
5648
|
+
element?.focus({ preventScroll: true });
|
|
5649
|
+
}
|
|
5650
|
+
element?.scrollIntoView?.({ block: 'nearest' });
|
|
5651
|
+
}
|
|
5652
|
+
/** Moves the active row by `delta` rows; starts at the first row when none is active. */
|
|
5653
|
+
moveActiveRow(delta, focus = false) {
|
|
5654
|
+
const current = this.activeRowIndex;
|
|
5655
|
+
this.setActiveRow(current === -1 ? 0 : current + delta, focus);
|
|
5656
|
+
}
|
|
5657
|
+
/** Runs the click behavior (selection and `rowClick`) on the active row. */
|
|
5658
|
+
activateActiveRow(event) {
|
|
5659
|
+
const index = this.activeRowIndex;
|
|
5660
|
+
if (index === -1) {
|
|
5661
|
+
return false;
|
|
5662
|
+
}
|
|
5663
|
+
this._selectRow(event, this.renderedRows[index], index);
|
|
5664
|
+
return true;
|
|
5665
|
+
}
|
|
5666
|
+
/** Goes to the next page, if there is one, and activates its first row. */
|
|
5667
|
+
nextPage(focus = false) {
|
|
5668
|
+
this._changePage(1, focus);
|
|
5669
|
+
}
|
|
5670
|
+
/** Goes to the previous page, if there is one, and activates its first row. */
|
|
5671
|
+
previousPage(focus = false) {
|
|
5672
|
+
this._changePage(-1, focus);
|
|
5673
|
+
}
|
|
5674
|
+
_rowId(index) {
|
|
5675
|
+
return `${this.gridId}-row-${index}`;
|
|
5676
|
+
}
|
|
5677
|
+
_activeRowId() {
|
|
5678
|
+
const index = this.activeRowIndex;
|
|
5679
|
+
return index === -1 ? null : this._rowId(index);
|
|
5680
|
+
}
|
|
5681
|
+
_isActiveRow(row) {
|
|
5682
|
+
return this._activeRow() === row;
|
|
5683
|
+
}
|
|
5684
|
+
_rowTabIndex(row, index) {
|
|
5685
|
+
if (!this.keyboardNavigation()) {
|
|
5686
|
+
return null;
|
|
5687
|
+
}
|
|
5688
|
+
const activeIndex = this.activeRowIndex;
|
|
5689
|
+
return (activeIndex === -1 ? index === 0 : this._activeRow() === row) ? 0 : -1;
|
|
5690
|
+
}
|
|
5691
|
+
_onRowFocus(row) {
|
|
5692
|
+
if (this.keyboardNavigation() && this._activeRow() !== row) {
|
|
5693
|
+
this._setActiveRow(row);
|
|
5694
|
+
}
|
|
5695
|
+
}
|
|
5696
|
+
_setActiveRow(row) {
|
|
5697
|
+
if (this._activeRow() === row) {
|
|
5698
|
+
return;
|
|
5699
|
+
}
|
|
5700
|
+
this._activeRow.set(row);
|
|
5701
|
+
if (row !== null) {
|
|
5702
|
+
this.focusedRowChange.emit({ row, index: this.renderedRows.indexOf(row) });
|
|
5703
|
+
}
|
|
5704
|
+
}
|
|
5705
|
+
_rowElement(index) {
|
|
5706
|
+
return this._elementRef.nativeElement.querySelector(`#${this._rowId(index)}`);
|
|
5707
|
+
}
|
|
5708
|
+
_changePage(delta, focus) {
|
|
5709
|
+
const paginator = this.paginator;
|
|
5710
|
+
if (!this.showPaginator || !paginator) {
|
|
5711
|
+
return;
|
|
5712
|
+
}
|
|
5713
|
+
const canMove = delta === 1 ? paginator.hasNextPage() : paginator.hasPreviousPage();
|
|
5714
|
+
if (!canMove) {
|
|
5715
|
+
return;
|
|
5716
|
+
}
|
|
5717
|
+
this._focusFirstRowOnRender = focus;
|
|
5718
|
+
this._setActiveRow(null);
|
|
5719
|
+
if (delta === 1) {
|
|
5720
|
+
paginator.nextPage();
|
|
5721
|
+
}
|
|
5722
|
+
else {
|
|
5723
|
+
paginator.previousPage();
|
|
5724
|
+
}
|
|
5725
|
+
// Front-end paging re-renders synchronously; server paging activates on the next data change
|
|
5726
|
+
if (this.pageOnFront) {
|
|
5727
|
+
this._activateFirstRowAfterRender();
|
|
5728
|
+
}
|
|
5729
|
+
}
|
|
5730
|
+
_syncActiveRowWithData() {
|
|
5731
|
+
const rows = this.renderedRows;
|
|
5732
|
+
if (this._focusFirstRowOnRender || this._activateFirstRowOnDataChange) {
|
|
5733
|
+
this._activateFirstRowAfterRender();
|
|
5734
|
+
}
|
|
5735
|
+
else {
|
|
5736
|
+
const activeRow = this._activeRow();
|
|
5737
|
+
if (activeRow !== null && !rows.includes(activeRow)) {
|
|
5738
|
+
this._activeRow.set(null);
|
|
5739
|
+
}
|
|
5740
|
+
}
|
|
5741
|
+
}
|
|
5742
|
+
_activateFirstRowAfterRender() {
|
|
5743
|
+
const focus = this._focusFirstRowOnRender;
|
|
5744
|
+
this._focusFirstRowOnRender = false;
|
|
5745
|
+
this._activeRow.set(null);
|
|
5746
|
+
afterNextRender(() => this.setActiveRow(0, focus), { injector: this._injector });
|
|
5747
|
+
}
|
|
5748
|
+
_isEditableTarget(target) {
|
|
5749
|
+
if (target instanceof HTMLInputElement) {
|
|
5750
|
+
return !['checkbox', 'radio', 'button', 'submit', 'reset'].includes(target.type);
|
|
5751
|
+
}
|
|
5752
|
+
return (target instanceof HTMLElement &&
|
|
5753
|
+
(target.isContentEditable || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT'));
|
|
5754
|
+
}
|
|
5755
|
+
_handleRowKeyDown(event, row, index) {
|
|
5756
|
+
if (this._isEditableTarget(event.target)) {
|
|
5757
|
+
return;
|
|
5758
|
+
}
|
|
5759
|
+
const onRow = event.target === event.currentTarget;
|
|
5760
|
+
const rowCount = this.renderedRows.length;
|
|
5761
|
+
switch (event.key) {
|
|
5762
|
+
case 'ArrowDown':
|
|
5763
|
+
this.setActiveRow(index + 1, true);
|
|
5764
|
+
break;
|
|
5765
|
+
case 'ArrowUp':
|
|
5766
|
+
this.setActiveRow(index - 1, true);
|
|
5767
|
+
break;
|
|
5768
|
+
case 'Home':
|
|
5769
|
+
this.setActiveRow(0, true);
|
|
5770
|
+
break;
|
|
5771
|
+
case 'End':
|
|
5772
|
+
this.setActiveRow(rowCount - 1, true);
|
|
5773
|
+
break;
|
|
5774
|
+
case 'PageDown':
|
|
5775
|
+
this.nextPage(true);
|
|
5776
|
+
break;
|
|
5777
|
+
case 'PageUp':
|
|
5778
|
+
this.previousPage(true);
|
|
5779
|
+
break;
|
|
5780
|
+
case 'Enter':
|
|
5781
|
+
if (!onRow) {
|
|
5782
|
+
return;
|
|
5783
|
+
}
|
|
5784
|
+
this._selectRow(event, row, index);
|
|
5785
|
+
break;
|
|
5786
|
+
case ' ':
|
|
5787
|
+
if (!onRow || !this.rowSelectable || this.rowSelectionFormatter.disabled?.(row, index)) {
|
|
5788
|
+
return;
|
|
5789
|
+
}
|
|
5790
|
+
this._toggleNormalCheckbox(row);
|
|
5791
|
+
break;
|
|
5792
|
+
case 'a':
|
|
5793
|
+
case 'A':
|
|
5794
|
+
if (!(event.ctrlKey || event.metaKey) || !this.rowSelectable || !this.multiSelectable) {
|
|
5795
|
+
return;
|
|
5796
|
+
}
|
|
5797
|
+
if (!this._isAllSelected()) {
|
|
5798
|
+
this._toggleMasterCheckbox();
|
|
5799
|
+
}
|
|
5800
|
+
break;
|
|
5801
|
+
default:
|
|
5802
|
+
return;
|
|
5803
|
+
}
|
|
5804
|
+
event.preventDefault();
|
|
5805
|
+
}
|
|
5449
5806
|
_getIndex(index, dataIndex) {
|
|
5450
5807
|
return index === undefined ? dataIndex : index;
|
|
5451
5808
|
}
|
|
@@ -5532,6 +5889,9 @@ class DataGrid {
|
|
|
5532
5889
|
}
|
|
5533
5890
|
_onRowKeyDown(event, row, index) {
|
|
5534
5891
|
this.rowKeyDown.emit({ event, row, index });
|
|
5892
|
+
if (this.keyboardNavigation() && !event.defaultPrevented) {
|
|
5893
|
+
this._handleRowKeyDown(event, row, index);
|
|
5894
|
+
}
|
|
5535
5895
|
}
|
|
5536
5896
|
_onRowKeyUp(event, row, index) {
|
|
5537
5897
|
this.rowKeyUp.emit({ event, row, index });
|
|
@@ -5588,7 +5948,7 @@ class DataGrid {
|
|
|
5588
5948
|
this.rowContextMenu.emit({ event, rowData, index });
|
|
5589
5949
|
}
|
|
5590
5950
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5591
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGrid, isStandalone: true, selector: "acp-data-grid", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: false, isRequired: false, transformFunction: null }, columnResizable: { classPropertyName: "columnResizable", publicName: "columnResizable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, emptyValuePlaceholder: { classPropertyName: "emptyValuePlaceholder", publicName: "emptyValuePlaceholder", isSignal: false, isRequired: false, transformFunction: null }, pageOnFront: { classPropertyName: "pageOnFront", publicName: "pageOnFront", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, pageDisabled: { classPropertyName: "pageDisabled", publicName: "pageDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showFirstLastButtons: { classPropertyName: "showFirstLastButtons", publicName: "showFirstLastButtons", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: false, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: false, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, paginationTemplate: { classPropertyName: "paginationTemplate", publicName: "paginationTemplate", isSignal: false, isRequired: false, transformFunction: null }, sortOnFront: { classPropertyName: "sortOnFront", publicName: "sortOnFront", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sortActive: { classPropertyName: "sortActive", publicName: "sortActive", isSignal: false, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: false, isRequired: false, transformFunction: null }, sortDisableClear: { classPropertyName: "sortDisableClear", publicName: "sortDisableClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sortDisabled: { classPropertyName: "sortDisabled", publicName: "sortDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sortStart: { classPropertyName: "sortStart", publicName: "sortStart", isSignal: false, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rowStriped: { classPropertyName: "rowStriped", publicName: "rowStriped", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, expansionTemplate: { classPropertyName: "expansionTemplate", publicName: "expansionTemplate", isSignal: false, isRequired: false, transformFunction: null }, closeOthersOnExpand: { classPropertyName: "closeOthersOnExpand", publicName: "closeOthersOnExpand", isSignal: true, isRequired: false, transformFunction: null }, multiSelectable: { classPropertyName: "multiSelectable", publicName: "multiSelectable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, multiSelectionWithClick: { classPropertyName: "multiSelectionWithClick", publicName: "multiSelectionWithClick", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rowSelectable: { classPropertyName: "rowSelectable", publicName: "rowSelectable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, hideRowSelectionCheckbox: { classPropertyName: "hideRowSelectionCheckbox", publicName: "hideRowSelectionCheckbox", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, disableRowClickSelection: { classPropertyName: "disableRowClickSelection", publicName: "disableRowClickSelection", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rowSelectionFormatter: { classPropertyName: "rowSelectionFormatter", publicName: "rowSelectionFormatter", isSignal: false, isRequired: false, transformFunction: null }, rowClassFormatter: { classPropertyName: "rowClassFormatter", publicName: "rowClassFormatter", isSignal: false, isRequired: false, transformFunction: null }, rowSelected: { classPropertyName: "rowSelected", publicName: "rowSelected", isSignal: false, isRequired: false, transformFunction: null }, cellSelectable: { classPropertyName: "cellSelectable", publicName: "cellSelectable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, toolbarTitle: { classPropertyName: "toolbarTitle", publicName: "toolbarTitle", isSignal: false, isRequired: false, transformFunction: null }, toolbarTemplate: { classPropertyName: "toolbarTemplate", publicName: "toolbarTemplate", isSignal: false, isRequired: false, transformFunction: null }, columnHideable: { classPropertyName: "columnHideable", publicName: "columnHideable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnHideableChecked: { classPropertyName: "columnHideableChecked", publicName: "columnHideableChecked", isSignal: false, isRequired: false, transformFunction: null }, columnSortable: { classPropertyName: "columnSortable", publicName: "columnSortable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnPinnable: { classPropertyName: "columnPinnable", publicName: "columnPinnable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnPinOptions: { classPropertyName: "columnPinOptions", publicName: "columnPinOptions", isSignal: false, isRequired: false, transformFunction: null }, showColumnMenuButton: { classPropertyName: "showColumnMenuButton", publicName: "showColumnMenuButton", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnMenuButtonText: { classPropertyName: "columnMenuButtonText", publicName: "columnMenuButtonText", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonType: { classPropertyName: "columnMenuButtonType", publicName: "columnMenuButtonType", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonColor: { classPropertyName: "columnMenuButtonColor", publicName: "columnMenuButtonColor", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonClass: { classPropertyName: "columnMenuButtonClass", publicName: "columnMenuButtonClass", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonIcon: { classPropertyName: "columnMenuButtonIcon", publicName: "columnMenuButtonIcon", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonFontIcon: { classPropertyName: "columnMenuButtonFontIcon", publicName: "columnMenuButtonFontIcon", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonSvgIcon: { classPropertyName: "columnMenuButtonSvgIcon", publicName: "columnMenuButtonSvgIcon", isSignal: false, isRequired: false, transformFunction: null }, showColumnMenuHeader: { classPropertyName: "showColumnMenuHeader", publicName: "showColumnMenuHeader", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnMenuHeaderText: { classPropertyName: "columnMenuHeaderText", publicName: "columnMenuHeaderText", isSignal: false, isRequired: false, transformFunction: null }, columnMenuHeaderTemplate: { classPropertyName: "columnMenuHeaderTemplate", publicName: "columnMenuHeaderTemplate", isSignal: false, isRequired: false, transformFunction: null }, showColumnMenuFooter: { classPropertyName: "showColumnMenuFooter", publicName: "showColumnMenuFooter", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnMenuFooterText: { classPropertyName: "columnMenuFooterText", publicName: "columnMenuFooterText", isSignal: false, isRequired: false, transformFunction: null }, columnMenuFooterTemplate: { classPropertyName: "columnMenuFooterTemplate", publicName: "columnMenuFooterTemplate", isSignal: false, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: false, isRequired: false, transformFunction: null }, noResultTemplate: { classPropertyName: "noResultTemplate", publicName: "noResultTemplate", isSignal: false, isRequired: false, transformFunction: null }, keyboardNavigation: { classPropertyName: "keyboardNavigation", publicName: "keyboardNavigation", isSignal: true, isRequired: false, transformFunction: null }, highlightedRowIndex: { classPropertyName: "highlightedRowIndex", publicName: "highlightedRowIndex", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: false, isRequired: false, transformFunction: null }, headerExtraTemplate: { classPropertyName: "headerExtraTemplate", publicName: "headerExtraTemplate", isSignal: false, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: false, isRequired: false, transformFunction: null }, useContentRowTemplate: { classPropertyName: "useContentRowTemplate", publicName: "useContentRowTemplate", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, useContentHeaderRowTemplate: { classPropertyName: "useContentHeaderRowTemplate", publicName: "useContentHeaderRowTemplate", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, useContentFooterRowTemplate: { classPropertyName: "useContentFooterRowTemplate", publicName: "useContentFooterRowTemplate", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showSummary: { classPropertyName: "showSummary", publicName: "showSummary", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, summaryTemplate: { classPropertyName: "summaryTemplate", publicName: "summaryTemplate", isSignal: false, isRequired: false, transformFunction: null }, showSidebar: { classPropertyName: "showSidebar", publicName: "showSidebar", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sidebarTemplate: { classPropertyName: "sidebarTemplate", publicName: "sidebarTemplate", isSignal: false, isRequired: false, transformFunction: null }, showStatusbar: { classPropertyName: "showStatusbar", publicName: "showStatusbar", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, statusbarTemplate: { classPropertyName: "statusbarTemplate", publicName: "statusbarTemplate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { page: "page", sortChange: "sortChange", rowClick: "rowClick", rowContextMenu: "rowContextMenu", expansionChange: "expansionChange", rowSelectedChange: "rowSelectedChange", checkboxKeyDown: "checkboxKeyDown", checkboxKeyUp: "checkboxKeyUp", checkboxKeyPress: "checkboxKeyPress", rowKeyDown: "rowKeyDown", rowKeyUp: "rowKeyUp", rowKeyPress: "rowKeyPress", cellSelectedChange: "cellSelectedChange", columnChange: "columnChange", focusedRowChange: "focusedRowChange" }, host: { properties: { "class.acp-grid-animations-enabled": "!_animationsDisabled", "class.acp-grid-size-small": "size() === \"small\"", "class.acp-grid-size-medium": "size() === \"medium\"", "class.acp-grid-size-normal": "size() === \"normal\"", "attr.tabindex": "0" }, classAttribute: "acp-grid" }, queries: [{ propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "headerRowDefs", predicate: MatHeaderRowDef }, { propertyName: "footerRowDefs", predicate: MatFooterRow }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "columnResize", first: true, predicate: ColumnResize, descendants: true }, { propertyName: "columnMenu", first: true, predicate: AcpGridColumnMenu, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], exportAs: ["dataGrid"], usesOnChanges: true, ngImport: i0, template: "<!-- Progress bar-->\n@if (loading) {\n<div class=\"acp-grid-progress\">\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n</div>\n}\n\n<!-- Toolbar -->\n@if (showToolbar) {\n<div class=\"acp-grid-toolbar\">\n <div class=\"acp-grid-toolbar-content\">\n @if (toolbarTemplate) {\n <ng-template [ngTemplateOutlet]=\"toolbarTemplate\"></ng-template>\n } @else { @if (toolbarTitle) {\n <div class=\"acp-grid-toolbar-title\">{{ toolbarTitle }}</div>\n } }\n </div>\n <div class=\"acp-grid-toolbar-actions\">\n @if (showColumnMenuButton) {\n <acp-grid-column-menu\n [columns]=\"columns\"\n [buttonText]=\"columnMenuButtonText\"\n [buttonType]=\"columnMenuButtonType\"\n [buttonColor]=\"columnMenuButtonColor\"\n [buttonClass]=\"columnMenuButtonClass\"\n [buttonIcon]=\"columnMenuButtonIcon\"\n [buttonFontIcon]=\"columnMenuButtonFontIcon\"\n [buttonSvgIcon]=\"columnMenuButtonSvgIcon\"\n [selectable]=\"columnHideable\"\n [selectableChecked]=\"columnHideableChecked\"\n [sortable]=\"columnSortable\"\n [pinnable]=\"columnPinnable\"\n [showHeader]=\"showColumnMenuHeader\"\n [headerText]=\"columnMenuHeaderText\"\n [headerTemplate]=\"columnMenuHeaderTemplate\"\n [showFooter]=\"showColumnMenuFooter\"\n [footerText]=\"columnMenuFooterText\"\n [footerTemplate]=\"columnMenuFooterTemplate\"\n [pinOptions]=\"columnPinOptions\"\n (columnChange)=\"_onColumnChange($event)\"\n ></acp-grid-column-menu>\n }\n </div>\n</div>\n}\n\n<div class=\"acp-grid-main acp-grid-layout\">\n <!-- Table content -->\n <div class=\"acp-grid-content acp-grid-layout\">\n <div #tableContainer class=\"mat-table-container\" [class.mat-table-with-data]=\"!_hasNoResult\">\n @if (!columnResizable) {\n <table\n mat-table\n [class.mat-table-hover]=\"rowHover\"\n [class.mat-table-striped]=\"rowStriped\"\n [class.mat-table-expandable]=\"expandable\"\n [dataSource]=\"dataSource\"\n [multiTemplateDataRows]=\"expandable\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n [matSortDisableClear]=\"sortDisableClear\"\n [matSortDisabled]=\"sortDisabled\"\n [matSortStart]=\"sortStart\"\n (matSortChange)=\"_onSortChange($event)\"\n [trackBy]=\"trackBy\"\n >\n @if (rowSelectable && !hideRowSelectionCheckbox) {\n <ng-container matColumnDef=\"acpGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"acp-grid-checkbox-cell\">\n @if (multiSelectable) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n (change)=\"$event ? _toggleMasterCheckbox() : null\"\n ></mat-checkbox>\n }\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n class=\"acp-grid-checkbox-cell\"\n >\n @if ( !( rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row,\n _getIndex(index, dataIndex)) ) ) {\n <mat-checkbox\n [disabled]=\"\n rowSelectionFormatter.disabled &&\n rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\n \"\n [checked]=\"rowSelection.isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\"\n (keydown)=\"_onCheckboxKeyDown($event)\"\n (keyup)=\"_onCheckboxKeyUp($event)\"\n (keypress)=\"_onCheckboxKeyPress($event)\"\n ></mat-checkbox>\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"acp-grid-checkbox-cell\"></td>\n </ng-container>\n } @for (col of columns; track col.field) {\n <ng-container\n [matColumnDef]=\"col.field\"\n [sticky]=\"col.pinned === 'left'\"\n [stickyEnd]=\"col.pinned === 'right'\"\n >\n <th\n mat-header-cell\n *matHeaderCellDef\n [class]=\"col | colClass\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n <div class=\"mat-header-cell-inner\">\n @if (headerTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(headerTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else {\n <div\n [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n [arrowPosition]=\"$safeNavigationMigration(col.sortProp?.arrowPosition)!\"\n [start]=\"$safeNavigationMigration(col.sortProp?.start)!\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n }\n <span>{{ col.header | toObservable | async }}</span>\n @if (col.sortable) {\n <svg\n class=\"acp-grid-icon mat-sort-header-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n </svg>\n }\n </div>\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTplBase\"\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\"\n ></ng-template>\n } }\n </div>\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [class]=\"\n col\n | colClass\n : row\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n acpGridSelectableCell\n [cellSelectable]=\"cellSelectable\"\n (cellSelectedChange)=\"_selectCell($event, row, col)\"\n >\n @if (cellTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(cellTemplate)?.[col.field]) |\n isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.cellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.cellTemplate!\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.showExpand) {\n <button\n class=\"acp-grid-row-expand-button\"\n matIconButton\n acpGridExpansionToggle\n type=\"button\"\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex)\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-row-expand-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n }\n <acp-grid-cell\n [rowData]=\"row\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n (rowDataChange)=\"_onRowDataChange($event)\"\n ></acp-grid-cell>\n } } }\n </td>\n <td\n mat-footer-cell\n *matFooterCellDef\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n } @if (summaryTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(summaryTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: _getColData(data, col),\n colData: _getColData(data, col),\n colDef: col,\n }\"\n ></ng-template>\n } @else {\n <acp-grid-cell\n [summary]=\"true\"\n [data]=\"data\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n ></acp-grid-cell>\n } }\n </td>\n </ng-container>\n } @if (!useContentHeaderRowTemplate) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (!useContentRowTemplate) {\n <tr\n mat-row\n *matRowDef=\"\n let row;\n let index = index;\n let dataIndex = dataIndex;\n columns: displayedColumns\n \"\n [class]=\"row | rowClass: index : dataIndex : rowClassFormatter\"\n [class.selected]=\"rowSelection.isSelected(row)\"\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\"\n (keydown)=\"_onRowKeyDown($event, row, _getIndex(index, dataIndex))\"\n (keyup)=\"_onRowKeyUp($event, row, _getIndex(index, dataIndex))\"\n (keypress)=\"_onRowKeyPress($event, row, _getIndex(index, dataIndex))\"\n ></tr>\n } @if (_whetherShowSummary) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (expandable) {\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"acpGridExpansionColumnDef\">\n <td\n mat-cell\n *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns.length\"\n >\n <div class=\"acp-grid-expansion-detail-wrapper\">\n <div class=\"acp-grid-expansion-detail\">\n <ng-template\n [ngTemplateOutlet]=\"expansionTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: dataIndex,\n expanded: expansionRowStates[dataIndex].expanded,\n }\"\n ></ng-template>\n </div>\n </div>\n </td>\n </ng-container>\n <tr\n mat-row\n *matRowDef=\"\n let row;\n columns: ['acpGridExpansionColumnDef'];\n let dataIndex = dataIndex\n \"\n class=\"acp-grid-expansion\"\n [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n ></tr>\n }\n </table>\n } @else {\n <!-- TODO: Use flexbox-based mat-table -->\n <table\n mat-table\n columnResize\n [class.mat-table-hover]=\"rowHover\"\n [class.mat-table-striped]=\"rowStriped\"\n [class.mat-table-expandable]=\"expandable\"\n [dataSource]=\"dataSource\"\n [multiTemplateDataRows]=\"expandable\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n [matSortDisableClear]=\"sortDisableClear\"\n [matSortDisabled]=\"sortDisabled\"\n [matSortStart]=\"sortStart\"\n (matSortChange)=\"_onSortChange($event)\"\n [trackBy]=\"trackBy\"\n >\n @if (rowSelectable && !hideRowSelectionCheckbox) {\n <ng-container matColumnDef=\"acpGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"acp-grid-checkbox-cell\">\n @if (multiSelectable) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n (change)=\"$event ? _toggleMasterCheckbox() : null\"\n ></mat-checkbox>\n }\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n class=\"acp-grid-checkbox-cell\"\n >\n @if ( !( rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row,\n _getIndex(index, dataIndex)) ) ) {\n <mat-checkbox\n [disabled]=\"\n rowSelectionFormatter.disabled &&\n rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\n \"\n [checked]=\"rowSelection.isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\"\n (keydown)=\"_onCheckboxKeyDown($event)\"\n (keyup)=\"_onCheckboxKeyUp($event)\"\n (keypress)=\"_onCheckboxKeyPress($event)\"\n ></mat-checkbox>\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"acp-grid-checkbox-cell\"></td>\n </ng-container>\n } @for (col of columns; track col.field) {\n <ng-container\n [matColumnDef]=\"col.field\"\n [sticky]=\"col.pinned === 'left'\"\n [stickyEnd]=\"col.pinned === 'right'\"\n >\n <th\n mat-header-cell\n *matHeaderCellDef\n [class]=\"col | colClass\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n [resizable]=\"col.resizable\"\n [matResizableMinWidthPx]=\"col.minWidth\"\n [matResizableMaxWidthPx]=\"col.maxWidth\"\n >\n <div class=\"mat-header-cell-inner\">\n @if (headerTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(headerTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else {\n <div\n [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n [arrowPosition]=\"$safeNavigationMigration(col.sortProp?.arrowPosition)!\"\n [start]=\"$safeNavigationMigration(col.sortProp?.start)!\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n }\n <span>{{ col.header | toObservable | async }}</span>\n @if (col.sortable) {\n <svg\n class=\"acp-grid-icon mat-sort-header-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n </svg>\n }\n </div>\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTplBase\"\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\"\n ></ng-template>\n } }\n </div>\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [class]=\"\n col\n | colClass\n : row\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n acpGridSelectableCell\n [cellSelectable]=\"cellSelectable\"\n (cellSelectedChange)=\"_selectCell($event, row, col)\"\n >\n @if (cellTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(cellTemplate)?.[col.field]) |\n isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.cellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.cellTemplate!\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.showExpand) {\n <button\n class=\"acp-grid-row-expand-button\"\n matIconButton\n acpGridExpansionToggle\n type=\"button\"\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex)\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-row-expand-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n }\n <acp-grid-cell\n [rowData]=\"row\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n (rowDataChange)=\"_onRowDataChange($event)\"\n ></acp-grid-cell>\n } } }\n </td>\n <td\n mat-footer-cell\n *matFooterCellDef\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n } @if (summaryTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(summaryTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: _getColData(data, col),\n colData: _getColData(data, col),\n colDef: col,\n }\"\n ></ng-template>\n } @else {\n <acp-grid-cell\n [summary]=\"true\"\n [data]=\"data\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n ></acp-grid-cell>\n } }\n </td>\n </ng-container>\n } @if (!useContentHeaderRowTemplate) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (!useContentRowTemplate) {\n <tr\n mat-row\n *matRowDef=\"\n let row;\n let index = index;\n let dataIndex = dataIndex;\n columns: displayedColumns\n \"\n [class]=\"row | rowClass: index : dataIndex : rowClassFormatter\"\n [class.selected]=\"rowSelection.isSelected(row)\"\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\"\n (keydown)=\"_onRowKeyDown($event, row, _getIndex(index, dataIndex))\"\n (keyup)=\"_onRowKeyUp($event, row, _getIndex(index, dataIndex))\"\n (keypress)=\"_onRowKeyPress($event, row, _getIndex(index, dataIndex))\"\n ></tr>\n } @if (_whetherShowSummary) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (expandable) {\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"acpGridExpansionColumnDef\">\n <td\n mat-cell\n *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns.length\"\n >\n <div class=\"acp-grid-expansion-detail-wrapper\">\n <div class=\"acp-grid-expansion-detail\">\n <ng-template\n [ngTemplateOutlet]=\"expansionTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: dataIndex,\n expanded: expansionRowStates[dataIndex].expanded,\n }\"\n ></ng-template>\n </div>\n </div>\n </td>\n </ng-container>\n <tr\n mat-row\n *matRowDef=\"\n let row;\n columns: ['acpGridExpansionColumnDef'];\n let dataIndex = dataIndex\n \"\n class=\"acp-grid-expansion\"\n [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n ></tr>\n }\n </table>\n }\n </div>\n\n <!-- No result -->\n @if (_hasNoResult) {\n <div class=\"acp-grid-no-result\">\n @if (noResultTemplate) {\n <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\n } @else { {{ noResultText }} }\n </div>\n }\n </div>\n\n <!-- Tool sidebar -->\n @if (showSidebar) {\n <div class=\"acp-grid-sidebar\">\n @if (sidebarTemplate) {\n <ng-template [ngTemplateOutlet]=\"sidebarTemplate\"></ng-template>\n }\n </div>\n }\n</div>\n\n<div class=\"acp-grid-footer\">\n <!-- Status Bar -->\n @if (showStatusbar) {\n <div class=\"acp-grid-statusbar\">\n @if (statusbarTemplate) {\n <ng-template [ngTemplateOutlet]=\"statusbarTemplate\"></ng-template>\n }\n </div>\n }\n\n <!-- Pagination -->\n <div class=\"acp-grid-pagination\">\n @if (paginationTemplate) {\n <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\n } @else {\n <mat-paginator\n [class.mat-paginator-hidden]=\"!showPaginator\"\n [showFirstLastButtons]=\"showFirstLastButtons\"\n [length]=\"length\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [hidePageSize]=\"hidePageSize\"\n (page)=\"_onPage($event)\"\n [disabled]=\"pageDisabled\"\n ></mat-paginator>\n }\n </div>\n</div>\n\n<!-- Header template for extra content -->\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\n @if (headerExtraTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(headerExtraTemplate)?.[col.field]) | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } }\n</ng-template>\n", styles: [".mat-column-resize-table.cdk-column-resize-with-resized-column{table-layout:fixed}.mat-column-resize-flex .mat-mdc-header-cell,.mat-column-resize-flex .mat-mdc-cell{box-sizing:border-box;min-width:32px}.mat-mdc-header-cell{position:relative}.mat-resizable{box-sizing:border-box}.mat-mdc-header-cell:not(.mat-resizable):after,.mat-resizable-handle{position:absolute;bottom:0;top:0;right:0;width:1px;background:transparent;transition:background .3s cubic-bezier(.55,0,.55,.2)}.mat-mdc-header-cell:not(.mat-resizable):after{content:\"\"}[dir=rtl] .mat-mdc-header-cell:not(.mat-resizable):after,[dir=rtl] .mat-resizable-handle{left:0;right:auto}[dir=rtl] .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-header-cell,[dir=rtl] .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell{border-left:none}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell{border-right:none}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell:not(.mat-resizable):after{background-color:var(--acp-grid-resizable-handle-disabled-background-color, var(--mat-sys-outline-variant))}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle{background-color:var(--acp-grid-resizable-handle-hover-background-color, var(--mat-sys-primary))}.mat-resizable.cdk-resizable-overlay-thumb-active>.mat-resizable-handle{opacity:0;transition:none}.mat-resizable-handle:focus,.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus{outline:none;background-color:var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary))}.mat-column-resize-overlay-thumb{background:transparent;cursor:col-resize;width:100%;height:100%;transition:background .3s cubic-bezier(.55,0,.55,.2);-webkit-user-select:none;user-select:none}.mat-column-resize-overlay-thumb:active{will-change:transform;background:linear-gradient(90deg,transparent,transparent 7px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 7px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 9px,transparent 9px,transparent)}.mat-column-resize-overlay-thumb:active .mat-column-resize-overlay-thumb-top{background:linear-gradient(90deg,transparent,transparent 4px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 4px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 12px,transparent 12px,transparent)}.mat-column-resize-overlay-thumb-top{width:100%}.acp-grid{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant));border-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium))}.acp-grid .mat-mdc-table{--mat-table-row-item-outline-color: var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid .mat-mdc-table.mat-table-striped .mat-row-odd{background-color:var(--acp-grid-table-row-striped-background-color, var(--mat-sys-surface-container))}.acp-grid .mat-mdc-table.mat-table-hover .mat-mdc-row:hover{background-color:var(--acp-grid-table-row-hover-background-color, var(--mat-sys-secondary-container))}.acp-grid .mat-mdc-table.mat-table-hover .mat-mdc-row.selected:hover{background-color:var(--acp-grid-table-row-selected-hover-background-color, var(--mat-sys-primary-container))}.acp-grid .mat-mdc-table .mat-mdc-row.selected{background-color:var(--acp-grid-table-row-selected-background-color, var(--mat-sys-secondary-container))}.acp-grid .mat-mdc-table .mat-mdc-cell.selected{box-shadow:inset 0 0 0 1px var(--acp-grid-table-cell-selected-outline-color, var(--mat-sys-primary))}.acp-grid .mat-table-container{overflow:auto}.acp-grid .mat-table-container.mat-table-with-data{flex:1}.acp-grid .mat-mdc-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-header-cell:not(.acp-grid-checkbox-cell),.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-footer-cell:not(.acp-grid-checkbox-cell),.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-cell:not(.acp-grid-checkbox-cell){min-width:var(--acp-grid-table-cell-min-width, 80px)}.acp-grid .mat-table-sticky-left{border-right:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .acp-grid .mat-table-sticky-left{border-right-width:0;border-left:1px solid var(--mat-table-row-item-outline-color)}.acp-grid .mat-table-sticky-right{border-left:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .acp-grid .mat-table-sticky-right{border-left-width:0;border-right:1px solid var(--mat-table-row-item-outline-color)}.acp-grid .mat-mdc-footer-cell{border-top:1px solid var(--mat-table-row-item-outline-color);background-color:var(--acp-grid-table-footer-background-color, var(--mat-sys-surface-container))}.acp-grid .mat-mdc-row.acp-grid-expansion{height:0;overflow:hidden}.acp-grid .mat-mdc-row.acp-grid-expansion .mat-mdc-cell{padding-top:0;padding-bottom:0}.acp-grid .mat-mdc-row.acp-grid-expansion.collapsed .mat-mdc-cell{border-bottom-width:0}.acp-grid .mat-sort-header-icon{margin-left:4px}[dir=rtl] .acp-grid .mat-sort-header-icon{margin-left:0;margin-right:4px}.acp-grid .mat-header-cell-inner{display:inline-flex;align-items:center;vertical-align:middle}.acp-grid .mat-mdc-paginator{border-top:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant));border-bottom-left-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium));border-bottom-right-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium))}.acp-grid .mat-paginator-hidden{display:none}.acp-grid .acp-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mat-checkbox-state-layer-size, 40px)) / 2)}.acp-grid-progress{position:absolute;top:0;z-index:120;width:100%}.acp-grid-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-bottom:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-toolbar-content{flex:1;width:0;padding:0 8px}.acp-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.acp-grid-content{flex-direction:column;width:0}.acp-grid-sidebar{max-width:50%;border-left:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}[dir=rtl] .acp-grid-sidebar{border-left-width:0;border-right:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-footer{position:relative;z-index:1}.acp-grid-statusbar{display:flex;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-top:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.acp-grid-expansion-placeholder{display:inline-block;vertical-align:middle;width:var(--mat-icon-button-state-layer-size, var(--acp-grid-row-expand-button-size, 40px));height:var(--mat-icon-button-state-layer-size, var(--acp-grid-row-expand-button-size, 40px))}.acp-grid-expansion-detail-wrapper{display:grid;grid-template-rows:0fr;grid-template-columns:100%;padding:0;overflow:hidden}.acp-grid-expansion.expanded .acp-grid-expansion-detail-wrapper{grid-template-rows:1fr;padding:calc((var(--mat-table-row-item-container-height, 52px) - 20px) / 2) 0}.acp-grid-expansion-detail{min-height:0}.acp-grid-animations-enabled .acp-grid-expansion-detail-wrapper{transition:all 225ms cubic-bezier(.4,0,.2,1)}.acp-grid-row-expand-button.expanded .acp-grid-row-expand-icon{transform:rotate(90deg)}.acp-grid-row-expand-button.mat-mdc-icon-button,.acp-grid-row-expand-button+acp-grid-cell{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: MatResizable, selector: "mat-header-cell[resizable], th[mat-header-cell][resizable]", inputs: ["matResizableMinWidthPx", "matResizableMaxWidthPx", "resizable"] }, { kind: "directive", type: MatColumnResize, selector: "table[mat-table][columnResize]" }, { kind: "component", type: AcpGridCell, selector: "acp-grid-cell", inputs: ["rowData", "colDef", "data", "summary", "placeholder"], outputs: ["rowDataChange"], exportAs: ["acpGridCell"] }, { kind: "component", type: AcpGridColumnMenu, selector: "acp-grid-column-menu", inputs: ["columns", "selectable", "selectableChecked", "sortable", "pinnable", "buttonText", "buttonType", "buttonColor", "buttonClass", "buttonIcon", "buttonFontIcon", "buttonSvgIcon", "showHeader", "headerText", "headerTemplate", "showFooter", "footerText", "footerTemplate", "pinOptions"], outputs: ["columnChange"], exportAs: ["acpGridColumnMenu"] }, { kind: "directive", type: AcpGridSelectableCell, selector: "[acpGridSelectableCell]", inputs: ["cellSelectable"], outputs: ["cellSelectedChange"] }, { kind: "directive", type: AcpGridExpansionToggle, selector: "[acpGridExpansionToggle]", inputs: ["opened", "expandableRow", "expansionRowTpl"], outputs: ["openedChange", "toggleChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AcpIsTemplateRefPipe, name: "isTemplateRef" }, { kind: "pipe", type: AcpGridColClassPipe, name: "colClass" }, { kind: "pipe", type: AcpGridRowClassPipe, name: "rowClass" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5951
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGrid, isStandalone: true, selector: "acp-data-grid", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: false, isRequired: false, transformFunction: null }, columnResizable: { classPropertyName: "columnResizable", publicName: "columnResizable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, emptyValuePlaceholder: { classPropertyName: "emptyValuePlaceholder", publicName: "emptyValuePlaceholder", isSignal: false, isRequired: false, transformFunction: null }, pageOnFront: { classPropertyName: "pageOnFront", publicName: "pageOnFront", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, pageDisabled: { classPropertyName: "pageDisabled", publicName: "pageDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showFirstLastButtons: { classPropertyName: "showFirstLastButtons", publicName: "showFirstLastButtons", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: false, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: false, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, paginationTemplate: { classPropertyName: "paginationTemplate", publicName: "paginationTemplate", isSignal: false, isRequired: false, transformFunction: null }, sortOnFront: { classPropertyName: "sortOnFront", publicName: "sortOnFront", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sortActive: { classPropertyName: "sortActive", publicName: "sortActive", isSignal: false, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: false, isRequired: false, transformFunction: null }, sortDisableClear: { classPropertyName: "sortDisableClear", publicName: "sortDisableClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sortDisabled: { classPropertyName: "sortDisabled", publicName: "sortDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sortStart: { classPropertyName: "sortStart", publicName: "sortStart", isSignal: false, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rowStriped: { classPropertyName: "rowStriped", publicName: "rowStriped", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, expansionTemplate: { classPropertyName: "expansionTemplate", publicName: "expansionTemplate", isSignal: false, isRequired: false, transformFunction: null }, closeOthersOnExpand: { classPropertyName: "closeOthersOnExpand", publicName: "closeOthersOnExpand", isSignal: true, isRequired: false, transformFunction: null }, multiSelectable: { classPropertyName: "multiSelectable", publicName: "multiSelectable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, multiSelectionWithClick: { classPropertyName: "multiSelectionWithClick", publicName: "multiSelectionWithClick", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rowSelectable: { classPropertyName: "rowSelectable", publicName: "rowSelectable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, hideRowSelectionCheckbox: { classPropertyName: "hideRowSelectionCheckbox", publicName: "hideRowSelectionCheckbox", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, disableRowClickSelection: { classPropertyName: "disableRowClickSelection", publicName: "disableRowClickSelection", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rowSelectionFormatter: { classPropertyName: "rowSelectionFormatter", publicName: "rowSelectionFormatter", isSignal: false, isRequired: false, transformFunction: null }, rowClassFormatter: { classPropertyName: "rowClassFormatter", publicName: "rowClassFormatter", isSignal: false, isRequired: false, transformFunction: null }, rowSelected: { classPropertyName: "rowSelected", publicName: "rowSelected", isSignal: false, isRequired: false, transformFunction: null }, cellSelectable: { classPropertyName: "cellSelectable", publicName: "cellSelectable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, toolbarTitle: { classPropertyName: "toolbarTitle", publicName: "toolbarTitle", isSignal: false, isRequired: false, transformFunction: null }, toolbarTemplate: { classPropertyName: "toolbarTemplate", publicName: "toolbarTemplate", isSignal: false, isRequired: false, transformFunction: null }, columnHideable: { classPropertyName: "columnHideable", publicName: "columnHideable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnHideableChecked: { classPropertyName: "columnHideableChecked", publicName: "columnHideableChecked", isSignal: false, isRequired: false, transformFunction: null }, columnSortable: { classPropertyName: "columnSortable", publicName: "columnSortable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnPinnable: { classPropertyName: "columnPinnable", publicName: "columnPinnable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnPinOptions: { classPropertyName: "columnPinOptions", publicName: "columnPinOptions", isSignal: false, isRequired: false, transformFunction: null }, showColumnMenuButton: { classPropertyName: "showColumnMenuButton", publicName: "showColumnMenuButton", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnMenuButtonText: { classPropertyName: "columnMenuButtonText", publicName: "columnMenuButtonText", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonType: { classPropertyName: "columnMenuButtonType", publicName: "columnMenuButtonType", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonColor: { classPropertyName: "columnMenuButtonColor", publicName: "columnMenuButtonColor", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonClass: { classPropertyName: "columnMenuButtonClass", publicName: "columnMenuButtonClass", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonIcon: { classPropertyName: "columnMenuButtonIcon", publicName: "columnMenuButtonIcon", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonFontIcon: { classPropertyName: "columnMenuButtonFontIcon", publicName: "columnMenuButtonFontIcon", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonSvgIcon: { classPropertyName: "columnMenuButtonSvgIcon", publicName: "columnMenuButtonSvgIcon", isSignal: false, isRequired: false, transformFunction: null }, showColumnMenuHeader: { classPropertyName: "showColumnMenuHeader", publicName: "showColumnMenuHeader", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnMenuHeaderText: { classPropertyName: "columnMenuHeaderText", publicName: "columnMenuHeaderText", isSignal: false, isRequired: false, transformFunction: null }, columnMenuHeaderTemplate: { classPropertyName: "columnMenuHeaderTemplate", publicName: "columnMenuHeaderTemplate", isSignal: false, isRequired: false, transformFunction: null }, showColumnMenuFooter: { classPropertyName: "showColumnMenuFooter", publicName: "showColumnMenuFooter", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnMenuFooterText: { classPropertyName: "columnMenuFooterText", publicName: "columnMenuFooterText", isSignal: false, isRequired: false, transformFunction: null }, columnMenuFooterTemplate: { classPropertyName: "columnMenuFooterTemplate", publicName: "columnMenuFooterTemplate", isSignal: false, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: false, isRequired: false, transformFunction: null }, noResultTemplate: { classPropertyName: "noResultTemplate", publicName: "noResultTemplate", isSignal: false, isRequired: false, transformFunction: null }, keyboardNavigation: { classPropertyName: "keyboardNavigation", publicName: "keyboardNavigation", isSignal: true, isRequired: false, transformFunction: null }, highlightedRowIndex: { classPropertyName: "highlightedRowIndex", publicName: "highlightedRowIndex", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: false, isRequired: false, transformFunction: null }, headerExtraTemplate: { classPropertyName: "headerExtraTemplate", publicName: "headerExtraTemplate", isSignal: false, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: false, isRequired: false, transformFunction: null }, useContentRowTemplate: { classPropertyName: "useContentRowTemplate", publicName: "useContentRowTemplate", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, useContentHeaderRowTemplate: { classPropertyName: "useContentHeaderRowTemplate", publicName: "useContentHeaderRowTemplate", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, useContentFooterRowTemplate: { classPropertyName: "useContentFooterRowTemplate", publicName: "useContentFooterRowTemplate", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showSummary: { classPropertyName: "showSummary", publicName: "showSummary", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, summaryTemplate: { classPropertyName: "summaryTemplate", publicName: "summaryTemplate", isSignal: false, isRequired: false, transformFunction: null }, showSidebar: { classPropertyName: "showSidebar", publicName: "showSidebar", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sidebarTemplate: { classPropertyName: "sidebarTemplate", publicName: "sidebarTemplate", isSignal: false, isRequired: false, transformFunction: null }, showStatusbar: { classPropertyName: "showStatusbar", publicName: "showStatusbar", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, statusbarTemplate: { classPropertyName: "statusbarTemplate", publicName: "statusbarTemplate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { page: "page", sortChange: "sortChange", rowClick: "rowClick", rowContextMenu: "rowContextMenu", expansionChange: "expansionChange", rowSelectedChange: "rowSelectedChange", checkboxKeyDown: "checkboxKeyDown", checkboxKeyUp: "checkboxKeyUp", checkboxKeyPress: "checkboxKeyPress", rowKeyDown: "rowKeyDown", rowKeyUp: "rowKeyUp", rowKeyPress: "rowKeyPress", cellSelectedChange: "cellSelectedChange", columnChange: "columnChange", focusedRowChange: "focusedRowChange" }, host: { properties: { "class.acp-grid-animations-enabled": "!_animationsDisabled", "class.acp-grid-size-small": "_size() === \"small\"", "class.acp-grid-size-medium": "_size() === \"medium\"", "class.acp-grid-size-large": "_size() === \"large\"", "attr.tabindex": "keyboardNavigation() ? null : 0" }, classAttribute: "acp-grid" }, queries: [{ propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "headerRowDefs", predicate: MatHeaderRowDef }, { propertyName: "footerRowDefs", predicate: MatFooterRow }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "columnResize", first: true, predicate: ColumnResize, descendants: true }, { propertyName: "columnMenu", first: true, predicate: AcpGridColumnMenu, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], exportAs: ["dataGrid"], usesOnChanges: true, ngImport: i0, template: "<!-- Progress bar-->\n@if (loading) {\n<div class=\"acp-grid-progress\">\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n</div>\n}\n\n<!-- Toolbar -->\n@if (showToolbar) {\n<div class=\"acp-grid-toolbar\">\n <div class=\"acp-grid-toolbar-content\">\n @if (toolbarTemplate) {\n <ng-template [ngTemplateOutlet]=\"toolbarTemplate\"></ng-template>\n } @else { @if (toolbarTitle) {\n <div class=\"acp-grid-toolbar-title\">{{ toolbarTitle }}</div>\n } }\n </div>\n <div class=\"acp-grid-toolbar-actions\">\n @if (showColumnMenuButton) {\n <acp-grid-column-menu\n [columns]=\"columns\"\n [buttonText]=\"columnMenuButtonText\"\n [buttonType]=\"columnMenuButtonType\"\n [buttonColor]=\"columnMenuButtonColor\"\n [buttonClass]=\"columnMenuButtonClass\"\n [buttonIcon]=\"columnMenuButtonIcon\"\n [buttonFontIcon]=\"columnMenuButtonFontIcon\"\n [buttonSvgIcon]=\"columnMenuButtonSvgIcon\"\n [selectable]=\"columnHideable\"\n [selectableChecked]=\"columnHideableChecked\"\n [sortable]=\"columnSortable\"\n [pinnable]=\"columnPinnable\"\n [showHeader]=\"showColumnMenuHeader\"\n [headerText]=\"columnMenuHeaderText\"\n [headerTemplate]=\"columnMenuHeaderTemplate\"\n [showFooter]=\"showColumnMenuFooter\"\n [footerText]=\"columnMenuFooterText\"\n [footerTemplate]=\"columnMenuFooterTemplate\"\n [pinOptions]=\"columnPinOptions\"\n (columnChange)=\"_onColumnChange($event)\"\n ></acp-grid-column-menu>\n }\n </div>\n</div>\n}\n\n<div class=\"acp-grid-main acp-grid-layout\">\n <!-- Table content -->\n <div class=\"acp-grid-content acp-grid-layout\">\n <div #tableContainer class=\"mat-table-container\" [class.mat-table-with-data]=\"!_hasNoResult\">\n @if (!columnResizable) {\n <table\n mat-table\n [class.mat-table-hover]=\"rowHover\"\n [class.mat-table-striped]=\"rowStriped\"\n [class.mat-table-expandable]=\"expandable\"\n [dataSource]=\"dataSource\"\n [multiTemplateDataRows]=\"expandable\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n [matSortDisableClear]=\"sortDisableClear\"\n [matSortDisabled]=\"sortDisabled\"\n [matSortStart]=\"sortStart\"\n (matSortChange)=\"_onSortChange($event)\"\n [trackBy]=\"trackBy\"\n >\n @if (rowSelectable && !hideRowSelectionCheckbox) {\n <ng-container matColumnDef=\"acpGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"acp-grid-checkbox-cell\">\n @if (multiSelectable) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n (change)=\"$event ? _toggleMasterCheckbox() : null\"\n ></mat-checkbox>\n }\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n class=\"acp-grid-checkbox-cell\"\n >\n @if ( !( rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row,\n _getIndex(index, dataIndex)) ) ) {\n <mat-checkbox\n [disabled]=\"\n rowSelectionFormatter.disabled &&\n rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\n \"\n [checked]=\"rowSelection.isSelected(row)\"\n [tabIndex]=\"keyboardNavigation() ? -1 : 0\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\"\n (keydown)=\"_onCheckboxKeyDown($event)\"\n (keyup)=\"_onCheckboxKeyUp($event)\"\n (keypress)=\"_onCheckboxKeyPress($event)\"\n ></mat-checkbox>\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"acp-grid-checkbox-cell\"></td>\n </ng-container>\n } @for (col of columns; track col.field) {\n <ng-container\n [matColumnDef]=\"col.field\"\n [sticky]=\"col.pinned === 'left'\"\n [stickyEnd]=\"col.pinned === 'right'\"\n >\n <th\n mat-header-cell\n *matHeaderCellDef\n [class]=\"col | colClass\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n <div class=\"mat-header-cell-inner\">\n @if (headerTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(headerTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else {\n <div\n [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n [arrowPosition]=\"$safeNavigationMigration(col.sortProp?.arrowPosition)!\"\n [start]=\"$safeNavigationMigration(col.sortProp?.start)!\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n }\n <span>{{ col.header | toObservable | async }}</span>\n @if (col.sortable) {\n <svg\n class=\"acp-grid-icon mat-sort-header-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n </svg>\n }\n </div>\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTplBase\"\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\"\n ></ng-template>\n } }\n </div>\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [class]=\"\n col\n | colClass\n : row\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n acpGridSelectableCell\n [cellSelectable]=\"cellSelectable\"\n (cellSelectedChange)=\"_selectCell($event, row, col)\"\n >\n @if (cellTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(cellTemplate)?.[col.field]) |\n isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.cellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.cellTemplate!\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.showExpand) {\n <button\n class=\"acp-grid-row-expand-button\"\n matIconButton\n acpGridExpansionToggle\n type=\"button\"\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex)\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-row-expand-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n }\n <acp-grid-cell\n [rowData]=\"row\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n (rowDataChange)=\"_onRowDataChange($event)\"\n ></acp-grid-cell>\n } } }\n </td>\n <td\n mat-footer-cell\n *matFooterCellDef\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n } @if (summaryTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(summaryTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: _getColData(data, col),\n colData: _getColData(data, col),\n colDef: col,\n }\"\n ></ng-template>\n } @else {\n <acp-grid-cell\n [summary]=\"true\"\n [data]=\"data\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n ></acp-grid-cell>\n } }\n </td>\n </ng-container>\n } @if (!useContentHeaderRowTemplate) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (!useContentRowTemplate) {\n <tr\n mat-row\n *matRowDef=\"\n let row;\n let index = index;\n let dataIndex = dataIndex;\n columns: displayedColumns\n \"\n [class]=\"row | rowClass: index : dataIndex : rowClassFormatter\"\n [class.selected]=\"rowSelection.isSelected(row)\"\n [class.acp-grid-row-active]=\"_isActiveRow(row)\"\n [attr.id]=\"_rowId(_getIndex(index, dataIndex))\"\n [attr.tabindex]=\"_rowTabIndex(row, _getIndex(index, dataIndex))\"\n (focus)=\"_onRowFocus(row)\"\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\"\n (keydown)=\"_onRowKeyDown($event, row, _getIndex(index, dataIndex))\"\n (keyup)=\"_onRowKeyUp($event, row, _getIndex(index, dataIndex))\"\n (keypress)=\"_onRowKeyPress($event, row, _getIndex(index, dataIndex))\"\n ></tr>\n } @if (_whetherShowSummary) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (expandable) {\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"acpGridExpansionColumnDef\">\n <td\n mat-cell\n *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns.length\"\n >\n <div class=\"acp-grid-expansion-detail-wrapper\">\n <div class=\"acp-grid-expansion-detail\">\n <ng-template\n [ngTemplateOutlet]=\"expansionTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: dataIndex,\n expanded: expansionRowStates[dataIndex].expanded,\n }\"\n ></ng-template>\n </div>\n </div>\n </td>\n </ng-container>\n <tr\n mat-row\n *matRowDef=\"\n let row;\n columns: ['acpGridExpansionColumnDef'];\n let dataIndex = dataIndex\n \"\n class=\"acp-grid-expansion\"\n [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n ></tr>\n }\n </table>\n } @else {\n <!-- TODO: Use flexbox-based mat-table -->\n <table\n mat-table\n columnResize\n [class.mat-table-hover]=\"rowHover\"\n [class.mat-table-striped]=\"rowStriped\"\n [class.mat-table-expandable]=\"expandable\"\n [dataSource]=\"dataSource\"\n [multiTemplateDataRows]=\"expandable\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n [matSortDisableClear]=\"sortDisableClear\"\n [matSortDisabled]=\"sortDisabled\"\n [matSortStart]=\"sortStart\"\n (matSortChange)=\"_onSortChange($event)\"\n [trackBy]=\"trackBy\"\n >\n @if (rowSelectable && !hideRowSelectionCheckbox) {\n <ng-container matColumnDef=\"acpGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"acp-grid-checkbox-cell\">\n @if (multiSelectable) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n (change)=\"$event ? _toggleMasterCheckbox() : null\"\n ></mat-checkbox>\n }\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n class=\"acp-grid-checkbox-cell\"\n >\n @if ( !( rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row,\n _getIndex(index, dataIndex)) ) ) {\n <mat-checkbox\n [disabled]=\"\n rowSelectionFormatter.disabled &&\n rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\n \"\n [checked]=\"rowSelection.isSelected(row)\"\n [tabIndex]=\"keyboardNavigation() ? -1 : 0\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\"\n (keydown)=\"_onCheckboxKeyDown($event)\"\n (keyup)=\"_onCheckboxKeyUp($event)\"\n (keypress)=\"_onCheckboxKeyPress($event)\"\n ></mat-checkbox>\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"acp-grid-checkbox-cell\"></td>\n </ng-container>\n } @for (col of columns; track col.field) {\n <ng-container\n [matColumnDef]=\"col.field\"\n [sticky]=\"col.pinned === 'left'\"\n [stickyEnd]=\"col.pinned === 'right'\"\n >\n <th\n mat-header-cell\n *matHeaderCellDef\n [class]=\"col | colClass\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n [resizable]=\"col.resizable\"\n [matResizableMinWidthPx]=\"col.minWidth\"\n [matResizableMaxWidthPx]=\"col.maxWidth\"\n >\n <div class=\"mat-header-cell-inner\">\n @if (headerTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(headerTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else {\n <div\n [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n [arrowPosition]=\"$safeNavigationMigration(col.sortProp?.arrowPosition)!\"\n [start]=\"$safeNavigationMigration(col.sortProp?.start)!\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n }\n <span>{{ col.header | toObservable | async }}</span>\n @if (col.sortable) {\n <svg\n class=\"acp-grid-icon mat-sort-header-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n </svg>\n }\n </div>\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTplBase\"\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\"\n ></ng-template>\n } }\n </div>\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [class]=\"\n col\n | colClass\n : row\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n acpGridSelectableCell\n [cellSelectable]=\"cellSelectable\"\n (cellSelectedChange)=\"_selectCell($event, row, col)\"\n >\n @if (cellTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(cellTemplate)?.[col.field]) |\n isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.cellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.cellTemplate!\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.showExpand) {\n <button\n class=\"acp-grid-row-expand-button\"\n matIconButton\n acpGridExpansionToggle\n type=\"button\"\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex)\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-row-expand-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n }\n <acp-grid-cell\n [rowData]=\"row\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n (rowDataChange)=\"_onRowDataChange($event)\"\n ></acp-grid-cell>\n } } }\n </td>\n <td\n mat-footer-cell\n *matFooterCellDef\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n } @if (summaryTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(summaryTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: _getColData(data, col),\n colData: _getColData(data, col),\n colDef: col,\n }\"\n ></ng-template>\n } @else {\n <acp-grid-cell\n [summary]=\"true\"\n [data]=\"data\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n ></acp-grid-cell>\n } }\n </td>\n </ng-container>\n } @if (!useContentHeaderRowTemplate) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (!useContentRowTemplate) {\n <tr\n mat-row\n *matRowDef=\"\n let row;\n let index = index;\n let dataIndex = dataIndex;\n columns: displayedColumns\n \"\n [class]=\"row | rowClass: index : dataIndex : rowClassFormatter\"\n [class.selected]=\"rowSelection.isSelected(row)\"\n [class.acp-grid-row-active]=\"_isActiveRow(row)\"\n [attr.id]=\"_rowId(_getIndex(index, dataIndex))\"\n [attr.tabindex]=\"_rowTabIndex(row, _getIndex(index, dataIndex))\"\n (focus)=\"_onRowFocus(row)\"\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\"\n (keydown)=\"_onRowKeyDown($event, row, _getIndex(index, dataIndex))\"\n (keyup)=\"_onRowKeyUp($event, row, _getIndex(index, dataIndex))\"\n (keypress)=\"_onRowKeyPress($event, row, _getIndex(index, dataIndex))\"\n ></tr>\n } @if (_whetherShowSummary) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (expandable) {\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"acpGridExpansionColumnDef\">\n <td\n mat-cell\n *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns.length\"\n >\n <div class=\"acp-grid-expansion-detail-wrapper\">\n <div class=\"acp-grid-expansion-detail\">\n <ng-template\n [ngTemplateOutlet]=\"expansionTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: dataIndex,\n expanded: expansionRowStates[dataIndex].expanded,\n }\"\n ></ng-template>\n </div>\n </div>\n </td>\n </ng-container>\n <tr\n mat-row\n *matRowDef=\"\n let row;\n columns: ['acpGridExpansionColumnDef'];\n let dataIndex = dataIndex\n \"\n class=\"acp-grid-expansion\"\n [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n ></tr>\n }\n </table>\n }\n </div>\n\n <!-- No result -->\n @if (_hasNoResult) {\n <div class=\"acp-grid-no-result\">\n @if (noResultTemplate) {\n <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\n } @else { {{ noResultText }} }\n </div>\n }\n </div>\n\n <!-- Tool sidebar -->\n @if (showSidebar) {\n <div class=\"acp-grid-sidebar\">\n @if (sidebarTemplate) {\n <ng-template [ngTemplateOutlet]=\"sidebarTemplate\"></ng-template>\n }\n </div>\n }\n</div>\n\n<div class=\"acp-grid-footer\">\n <!-- Status Bar -->\n @if (showStatusbar) {\n <div class=\"acp-grid-statusbar\">\n @if (statusbarTemplate) {\n <ng-template [ngTemplateOutlet]=\"statusbarTemplate\"></ng-template>\n }\n </div>\n }\n\n <!-- Pagination -->\n <div class=\"acp-grid-pagination\">\n @if (paginationTemplate) {\n <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\n } @else {\n <mat-paginator\n [class.mat-paginator-hidden]=\"!showPaginator\"\n [showFirstLastButtons]=\"showFirstLastButtons\"\n [length]=\"length\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [hidePageSize]=\"hidePageSize\"\n (page)=\"_onPage($event)\"\n [disabled]=\"pageDisabled\"\n ></mat-paginator>\n }\n </div>\n</div>\n\n<!-- Header template for extra content -->\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\n @if (headerExtraTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(headerExtraTemplate)?.[col.field]) | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } }\n</ng-template>\n", styles: [".mat-column-resize-table.cdk-column-resize-with-resized-column{table-layout:fixed}.mat-column-resize-flex .mat-mdc-header-cell,.mat-column-resize-flex .mat-mdc-cell{box-sizing:border-box;min-width:32px}.mat-mdc-header-cell{position:relative}.mat-resizable{box-sizing:border-box}.mat-mdc-header-cell:not(.mat-resizable):after,.mat-resizable-handle{position:absolute;bottom:0;top:0;right:0;width:1px;background:transparent;transition:background .3s cubic-bezier(.55,0,.55,.2)}.mat-mdc-header-cell:not(.mat-resizable):after{content:\"\"}[dir=rtl] .mat-mdc-header-cell:not(.mat-resizable):after,[dir=rtl] .mat-resizable-handle{left:0;right:auto}[dir=rtl] .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-header-cell,[dir=rtl] .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell{border-left:none}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell{border-right:none}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell:not(.mat-resizable):after{background-color:var(--acp-grid-resizable-handle-disabled-background-color, var(--mat-sys-outline-variant))}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle{background-color:var(--acp-grid-resizable-handle-hover-background-color, var(--mat-sys-primary))}.mat-resizable.cdk-resizable-overlay-thumb-active>.mat-resizable-handle{opacity:0;transition:none}.mat-resizable-handle:focus,.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus{outline:none;background-color:var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary))}.mat-column-resize-overlay-thumb{background:transparent;cursor:col-resize;width:100%;height:100%;transition:background .3s cubic-bezier(.55,0,.55,.2);-webkit-user-select:none;user-select:none}.mat-column-resize-overlay-thumb:active{will-change:transform;background:linear-gradient(90deg,transparent,transparent 7px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 7px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 9px,transparent 9px,transparent)}.mat-column-resize-overlay-thumb:active .mat-column-resize-overlay-thumb-top{background:linear-gradient(90deg,transparent,transparent 4px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 4px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 12px,transparent 12px,transparent)}.mat-column-resize-overlay-thumb-top{width:100%}.acp-grid{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant));border-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium))}.acp-grid .mat-mdc-table{--mat-table-row-item-outline-color: var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid .mat-mdc-table.mat-table-striped .mat-row-odd{background-color:var(--acp-grid-table-row-striped-background-color, var(--mat-sys-surface-container))}.acp-grid .mat-mdc-table.mat-table-hover .mat-mdc-row:hover{background-color:var(--acp-grid-table-row-hover-background-color, var(--mat-sys-secondary-container))}.acp-grid .mat-mdc-table.mat-table-hover .mat-mdc-row.selected:hover{background-color:var(--acp-grid-table-row-selected-hover-background-color, var(--mat-sys-primary-container))}.acp-grid .mat-mdc-table .mat-mdc-row.acp-grid-row-active{background-color:var(--acp-grid-table-row-hover-background-color, var(--mat-sys-secondary-container))}.acp-grid .mat-mdc-table .mat-mdc-row.selected{background-color:var(--acp-grid-table-row-selected-background-color, var(--mat-sys-secondary-container))}.acp-grid .mat-mdc-table .mat-mdc-row:focus{outline:none}.acp-grid .mat-mdc-table .mat-mdc-row:focus-visible,.acp-grid .mat-mdc-table .mat-mdc-row.acp-grid-row-active:not(:focus){outline:2px solid var(--acp-grid-table-cell-selected-outline-color, var(--mat-sys-primary));outline-offset:-2px}.acp-grid .mat-mdc-table .mat-mdc-cell.selected{box-shadow:inset 0 0 0 1px var(--acp-grid-table-cell-selected-outline-color, var(--mat-sys-primary))}.acp-grid .mat-table-container{overflow:auto}.acp-grid .mat-table-container.mat-table-with-data{flex:1}.acp-grid .mat-mdc-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-header-cell:not(.acp-grid-checkbox-cell),.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-footer-cell:not(.acp-grid-checkbox-cell),.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-cell:not(.acp-grid-checkbox-cell){min-width:var(--acp-grid-table-cell-min-width, 80px)}.acp-grid .mat-table-sticky-left{border-right:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .acp-grid .mat-table-sticky-left{border-right-width:0;border-left:1px solid var(--mat-table-row-item-outline-color)}.acp-grid .mat-table-sticky-right{border-left:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .acp-grid .mat-table-sticky-right{border-left-width:0;border-right:1px solid var(--mat-table-row-item-outline-color)}.acp-grid .mat-mdc-footer-cell{border-top:1px solid var(--mat-table-row-item-outline-color);background-color:var(--acp-grid-table-footer-background-color, var(--mat-sys-surface-container))}.acp-grid .mat-mdc-row.acp-grid-expansion{height:0;overflow:hidden}.acp-grid .mat-mdc-row.acp-grid-expansion .mat-mdc-cell{padding-top:0;padding-bottom:0}.acp-grid .mat-mdc-row.acp-grid-expansion.collapsed .mat-mdc-cell{border-bottom-width:0}.acp-grid .mat-sort-header-icon{margin-left:4px}[dir=rtl] .acp-grid .mat-sort-header-icon{margin-left:0;margin-right:4px}.acp-grid .mat-header-cell-inner{display:inline-flex;align-items:center;vertical-align:middle}.acp-grid .mat-mdc-paginator{border-top:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant));border-bottom-left-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium));border-bottom-right-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium))}.acp-grid .mat-paginator-hidden{display:none}.acp-grid .acp-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mat-checkbox-state-layer-size, 40px)) / 2)}.acp-grid-progress{position:absolute;top:0;z-index:120;width:100%}.acp-grid-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-bottom:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-toolbar-content{flex:1;width:0;padding:0 8px}.acp-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.acp-grid-content{flex-direction:column;width:0}.acp-grid-sidebar{max-width:50%;border-left:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}[dir=rtl] .acp-grid-sidebar{border-left-width:0;border-right:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-footer{position:relative;z-index:1}.acp-grid-statusbar{display:flex;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-top:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.acp-grid-expansion-placeholder{display:inline-block;vertical-align:middle;width:var(--mat-icon-button-state-layer-size, var(--acp-grid-row-expand-button-size, 40px));height:var(--mat-icon-button-state-layer-size, var(--acp-grid-row-expand-button-size, 40px))}.acp-grid-expansion-detail-wrapper{display:grid;grid-template-rows:0fr;grid-template-columns:100%;padding:0;overflow:hidden}.acp-grid-expansion.expanded .acp-grid-expansion-detail-wrapper{grid-template-rows:1fr;padding:calc((var(--mat-table-row-item-container-height, 52px) - 20px) / 2) 0}.acp-grid-expansion-detail{min-height:0}.acp-grid-animations-enabled .acp-grid-expansion-detail-wrapper{transition:all 225ms cubic-bezier(.4,0,.2,1)}.acp-grid-row-expand-button.expanded .acp-grid-row-expand-icon{transform:rotate(90deg)}.acp-grid-row-expand-button.mat-mdc-icon-button,.acp-grid-row-expand-button+acp-grid-cell{vertical-align:middle}.acp-grid-size-small{--mat-table-header-container-height: 40px;--mat-table-row-item-container-height: 36px;--mat-table-footer-container-height: 36px;--mat-table-header-headline-size: .8125rem;--mat-table-row-item-label-text-size: .8125rem;--mat-table-footer-supporting-text-size: .8125rem;--mat-icon-button-state-layer-size: 32px;--mat-checkbox-state-layer-size: 32px;--mat-paginator-container-size: 48px;--mat-button-outlined-container-height: 32px;--mat-button-filled-container-height: 32px;--mat-button-protected-container-height: 32px;--mat-button-text-container-height: 32px;--mat-button-tonal-container-height: 32px}.acp-grid-size-small :is(.mat-mdc-header-cell,.mat-mdc-footer-cell,.mat-mdc-cell):not(.acp-grid-checkbox-cell){padding-left:8px;padding-right:8px}.acp-grid-size-small .acp-grid-toolbar,.acp-grid-size-small .acp-grid-statusbar{padding:4px}.acp-grid-size-large{--mat-table-header-container-height: 64px;--mat-table-row-item-container-height: 60px;--mat-table-footer-container-height: 60px;--mat-table-header-headline-size: 1rem;--mat-table-row-item-label-text-size: 1rem;--mat-table-footer-supporting-text-size: 1rem;--mat-paginator-container-size: 64px}.acp-grid-size-large :is(.mat-mdc-header-cell,.mat-mdc-footer-cell,.mat-mdc-cell):not(.acp-grid-checkbox-cell){padding-left:20px;padding-right:20px}.acp-grid-size-large .acp-grid-toolbar,.acp-grid-size-large .acp-grid-statusbar{padding:12px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: MatResizable, selector: "mat-header-cell[resizable], th[mat-header-cell][resizable]", inputs: ["matResizableMinWidthPx", "matResizableMaxWidthPx", "resizable"] }, { kind: "directive", type: MatColumnResize, selector: "table[mat-table][columnResize]" }, { kind: "component", type: AcpGridCell, selector: "acp-grid-cell", inputs: ["rowData", "colDef", "data", "summary", "placeholder"], outputs: ["rowDataChange"], exportAs: ["acpGridCell"] }, { kind: "component", type: AcpGridColumnMenu, selector: "acp-grid-column-menu", inputs: ["columns", "selectable", "selectableChecked", "sortable", "pinnable", "buttonText", "buttonType", "buttonColor", "buttonClass", "buttonIcon", "buttonFontIcon", "buttonSvgIcon", "showHeader", "headerText", "headerTemplate", "showFooter", "footerText", "footerTemplate", "pinOptions"], outputs: ["columnChange"], exportAs: ["acpGridColumnMenu"] }, { kind: "directive", type: AcpGridSelectableCell, selector: "[acpGridSelectableCell]", inputs: ["cellSelectable"], outputs: ["cellSelectedChange"] }, { kind: "directive", type: AcpGridExpansionToggle, selector: "[acpGridExpansionToggle]", inputs: ["opened", "expandableRow", "expansionRowTpl"], outputs: ["openedChange", "toggleChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AcpIsTemplateRefPipe, name: "isTemplateRef" }, { kind: "pipe", type: AcpGridColClassPipe, name: "colClass" }, { kind: "pipe", type: AcpGridRowClassPipe, name: "rowClass" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5592
5952
|
}
|
|
5593
5953
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGrid, decorators: [{
|
|
5594
5954
|
type: Component,
|
|
@@ -5628,11 +5988,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
5628
5988
|
], host: {
|
|
5629
5989
|
class: 'acp-grid',
|
|
5630
5990
|
'[class.acp-grid-animations-enabled]': '!_animationsDisabled',
|
|
5631
|
-
'[class.acp-grid-size-small]': '
|
|
5632
|
-
'[class.acp-grid-size-medium]': '
|
|
5633
|
-
'[class.acp-grid-size-
|
|
5634
|
-
'[attr.tabindex]': '0',
|
|
5635
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Progress bar-->\n@if (loading) {\n<div class=\"acp-grid-progress\">\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n</div>\n}\n\n<!-- Toolbar -->\n@if (showToolbar) {\n<div class=\"acp-grid-toolbar\">\n <div class=\"acp-grid-toolbar-content\">\n @if (toolbarTemplate) {\n <ng-template [ngTemplateOutlet]=\"toolbarTemplate\"></ng-template>\n } @else { @if (toolbarTitle) {\n <div class=\"acp-grid-toolbar-title\">{{ toolbarTitle }}</div>\n } }\n </div>\n <div class=\"acp-grid-toolbar-actions\">\n @if (showColumnMenuButton) {\n <acp-grid-column-menu\n [columns]=\"columns\"\n [buttonText]=\"columnMenuButtonText\"\n [buttonType]=\"columnMenuButtonType\"\n [buttonColor]=\"columnMenuButtonColor\"\n [buttonClass]=\"columnMenuButtonClass\"\n [buttonIcon]=\"columnMenuButtonIcon\"\n [buttonFontIcon]=\"columnMenuButtonFontIcon\"\n [buttonSvgIcon]=\"columnMenuButtonSvgIcon\"\n [selectable]=\"columnHideable\"\n [selectableChecked]=\"columnHideableChecked\"\n [sortable]=\"columnSortable\"\n [pinnable]=\"columnPinnable\"\n [showHeader]=\"showColumnMenuHeader\"\n [headerText]=\"columnMenuHeaderText\"\n [headerTemplate]=\"columnMenuHeaderTemplate\"\n [showFooter]=\"showColumnMenuFooter\"\n [footerText]=\"columnMenuFooterText\"\n [footerTemplate]=\"columnMenuFooterTemplate\"\n [pinOptions]=\"columnPinOptions\"\n (columnChange)=\"_onColumnChange($event)\"\n ></acp-grid-column-menu>\n }\n </div>\n</div>\n}\n\n<div class=\"acp-grid-main acp-grid-layout\">\n <!-- Table content -->\n <div class=\"acp-grid-content acp-grid-layout\">\n <div #tableContainer class=\"mat-table-container\" [class.mat-table-with-data]=\"!_hasNoResult\">\n @if (!columnResizable) {\n <table\n mat-table\n [class.mat-table-hover]=\"rowHover\"\n [class.mat-table-striped]=\"rowStriped\"\n [class.mat-table-expandable]=\"expandable\"\n [dataSource]=\"dataSource\"\n [multiTemplateDataRows]=\"expandable\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n [matSortDisableClear]=\"sortDisableClear\"\n [matSortDisabled]=\"sortDisabled\"\n [matSortStart]=\"sortStart\"\n (matSortChange)=\"_onSortChange($event)\"\n [trackBy]=\"trackBy\"\n >\n @if (rowSelectable && !hideRowSelectionCheckbox) {\n <ng-container matColumnDef=\"acpGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"acp-grid-checkbox-cell\">\n @if (multiSelectable) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n (change)=\"$event ? _toggleMasterCheckbox() : null\"\n ></mat-checkbox>\n }\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n class=\"acp-grid-checkbox-cell\"\n >\n @if ( !( rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row,\n _getIndex(index, dataIndex)) ) ) {\n <mat-checkbox\n [disabled]=\"\n rowSelectionFormatter.disabled &&\n rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\n \"\n [checked]=\"rowSelection.isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\"\n (keydown)=\"_onCheckboxKeyDown($event)\"\n (keyup)=\"_onCheckboxKeyUp($event)\"\n (keypress)=\"_onCheckboxKeyPress($event)\"\n ></mat-checkbox>\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"acp-grid-checkbox-cell\"></td>\n </ng-container>\n } @for (col of columns; track col.field) {\n <ng-container\n [matColumnDef]=\"col.field\"\n [sticky]=\"col.pinned === 'left'\"\n [stickyEnd]=\"col.pinned === 'right'\"\n >\n <th\n mat-header-cell\n *matHeaderCellDef\n [class]=\"col | colClass\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n <div class=\"mat-header-cell-inner\">\n @if (headerTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(headerTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else {\n <div\n [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n [arrowPosition]=\"$safeNavigationMigration(col.sortProp?.arrowPosition)!\"\n [start]=\"$safeNavigationMigration(col.sortProp?.start)!\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n }\n <span>{{ col.header | toObservable | async }}</span>\n @if (col.sortable) {\n <svg\n class=\"acp-grid-icon mat-sort-header-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n </svg>\n }\n </div>\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTplBase\"\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\"\n ></ng-template>\n } }\n </div>\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [class]=\"\n col\n | colClass\n : row\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n acpGridSelectableCell\n [cellSelectable]=\"cellSelectable\"\n (cellSelectedChange)=\"_selectCell($event, row, col)\"\n >\n @if (cellTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(cellTemplate)?.[col.field]) |\n isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.cellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.cellTemplate!\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.showExpand) {\n <button\n class=\"acp-grid-row-expand-button\"\n matIconButton\n acpGridExpansionToggle\n type=\"button\"\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex)\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-row-expand-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n }\n <acp-grid-cell\n [rowData]=\"row\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n (rowDataChange)=\"_onRowDataChange($event)\"\n ></acp-grid-cell>\n } } }\n </td>\n <td\n mat-footer-cell\n *matFooterCellDef\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n } @if (summaryTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(summaryTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: _getColData(data, col),\n colData: _getColData(data, col),\n colDef: col,\n }\"\n ></ng-template>\n } @else {\n <acp-grid-cell\n [summary]=\"true\"\n [data]=\"data\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n ></acp-grid-cell>\n } }\n </td>\n </ng-container>\n } @if (!useContentHeaderRowTemplate) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (!useContentRowTemplate) {\n <tr\n mat-row\n *matRowDef=\"\n let row;\n let index = index;\n let dataIndex = dataIndex;\n columns: displayedColumns\n \"\n [class]=\"row | rowClass: index : dataIndex : rowClassFormatter\"\n [class.selected]=\"rowSelection.isSelected(row)\"\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\"\n (keydown)=\"_onRowKeyDown($event, row, _getIndex(index, dataIndex))\"\n (keyup)=\"_onRowKeyUp($event, row, _getIndex(index, dataIndex))\"\n (keypress)=\"_onRowKeyPress($event, row, _getIndex(index, dataIndex))\"\n ></tr>\n } @if (_whetherShowSummary) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (expandable) {\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"acpGridExpansionColumnDef\">\n <td\n mat-cell\n *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns.length\"\n >\n <div class=\"acp-grid-expansion-detail-wrapper\">\n <div class=\"acp-grid-expansion-detail\">\n <ng-template\n [ngTemplateOutlet]=\"expansionTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: dataIndex,\n expanded: expansionRowStates[dataIndex].expanded,\n }\"\n ></ng-template>\n </div>\n </div>\n </td>\n </ng-container>\n <tr\n mat-row\n *matRowDef=\"\n let row;\n columns: ['acpGridExpansionColumnDef'];\n let dataIndex = dataIndex\n \"\n class=\"acp-grid-expansion\"\n [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n ></tr>\n }\n </table>\n } @else {\n <!-- TODO: Use flexbox-based mat-table -->\n <table\n mat-table\n columnResize\n [class.mat-table-hover]=\"rowHover\"\n [class.mat-table-striped]=\"rowStriped\"\n [class.mat-table-expandable]=\"expandable\"\n [dataSource]=\"dataSource\"\n [multiTemplateDataRows]=\"expandable\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n [matSortDisableClear]=\"sortDisableClear\"\n [matSortDisabled]=\"sortDisabled\"\n [matSortStart]=\"sortStart\"\n (matSortChange)=\"_onSortChange($event)\"\n [trackBy]=\"trackBy\"\n >\n @if (rowSelectable && !hideRowSelectionCheckbox) {\n <ng-container matColumnDef=\"acpGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"acp-grid-checkbox-cell\">\n @if (multiSelectable) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n (change)=\"$event ? _toggleMasterCheckbox() : null\"\n ></mat-checkbox>\n }\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n class=\"acp-grid-checkbox-cell\"\n >\n @if ( !( rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row,\n _getIndex(index, dataIndex)) ) ) {\n <mat-checkbox\n [disabled]=\"\n rowSelectionFormatter.disabled &&\n rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\n \"\n [checked]=\"rowSelection.isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\"\n (keydown)=\"_onCheckboxKeyDown($event)\"\n (keyup)=\"_onCheckboxKeyUp($event)\"\n (keypress)=\"_onCheckboxKeyPress($event)\"\n ></mat-checkbox>\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"acp-grid-checkbox-cell\"></td>\n </ng-container>\n } @for (col of columns; track col.field) {\n <ng-container\n [matColumnDef]=\"col.field\"\n [sticky]=\"col.pinned === 'left'\"\n [stickyEnd]=\"col.pinned === 'right'\"\n >\n <th\n mat-header-cell\n *matHeaderCellDef\n [class]=\"col | colClass\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n [resizable]=\"col.resizable\"\n [matResizableMinWidthPx]=\"col.minWidth\"\n [matResizableMaxWidthPx]=\"col.maxWidth\"\n >\n <div class=\"mat-header-cell-inner\">\n @if (headerTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(headerTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else {\n <div\n [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n [arrowPosition]=\"$safeNavigationMigration(col.sortProp?.arrowPosition)!\"\n [start]=\"$safeNavigationMigration(col.sortProp?.start)!\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n }\n <span>{{ col.header | toObservable | async }}</span>\n @if (col.sortable) {\n <svg\n class=\"acp-grid-icon mat-sort-header-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n </svg>\n }\n </div>\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTplBase\"\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\"\n ></ng-template>\n } }\n </div>\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [class]=\"\n col\n | colClass\n : row\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n acpGridSelectableCell\n [cellSelectable]=\"cellSelectable\"\n (cellSelectedChange)=\"_selectCell($event, row, col)\"\n >\n @if (cellTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(cellTemplate)?.[col.field]) |\n isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.cellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.cellTemplate!\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.showExpand) {\n <button\n class=\"acp-grid-row-expand-button\"\n matIconButton\n acpGridExpansionToggle\n type=\"button\"\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex)\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-row-expand-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n }\n <acp-grid-cell\n [rowData]=\"row\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n (rowDataChange)=\"_onRowDataChange($event)\"\n ></acp-grid-cell>\n } } }\n </td>\n <td\n mat-footer-cell\n *matFooterCellDef\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n } @if (summaryTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(summaryTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: _getColData(data, col),\n colData: _getColData(data, col),\n colDef: col,\n }\"\n ></ng-template>\n } @else {\n <acp-grid-cell\n [summary]=\"true\"\n [data]=\"data\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n ></acp-grid-cell>\n } }\n </td>\n </ng-container>\n } @if (!useContentHeaderRowTemplate) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (!useContentRowTemplate) {\n <tr\n mat-row\n *matRowDef=\"\n let row;\n let index = index;\n let dataIndex = dataIndex;\n columns: displayedColumns\n \"\n [class]=\"row | rowClass: index : dataIndex : rowClassFormatter\"\n [class.selected]=\"rowSelection.isSelected(row)\"\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\"\n (keydown)=\"_onRowKeyDown($event, row, _getIndex(index, dataIndex))\"\n (keyup)=\"_onRowKeyUp($event, row, _getIndex(index, dataIndex))\"\n (keypress)=\"_onRowKeyPress($event, row, _getIndex(index, dataIndex))\"\n ></tr>\n } @if (_whetherShowSummary) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (expandable) {\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"acpGridExpansionColumnDef\">\n <td\n mat-cell\n *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns.length\"\n >\n <div class=\"acp-grid-expansion-detail-wrapper\">\n <div class=\"acp-grid-expansion-detail\">\n <ng-template\n [ngTemplateOutlet]=\"expansionTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: dataIndex,\n expanded: expansionRowStates[dataIndex].expanded,\n }\"\n ></ng-template>\n </div>\n </div>\n </td>\n </ng-container>\n <tr\n mat-row\n *matRowDef=\"\n let row;\n columns: ['acpGridExpansionColumnDef'];\n let dataIndex = dataIndex\n \"\n class=\"acp-grid-expansion\"\n [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n ></tr>\n }\n </table>\n }\n </div>\n\n <!-- No result -->\n @if (_hasNoResult) {\n <div class=\"acp-grid-no-result\">\n @if (noResultTemplate) {\n <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\n } @else { {{ noResultText }} }\n </div>\n }\n </div>\n\n <!-- Tool sidebar -->\n @if (showSidebar) {\n <div class=\"acp-grid-sidebar\">\n @if (sidebarTemplate) {\n <ng-template [ngTemplateOutlet]=\"sidebarTemplate\"></ng-template>\n }\n </div>\n }\n</div>\n\n<div class=\"acp-grid-footer\">\n <!-- Status Bar -->\n @if (showStatusbar) {\n <div class=\"acp-grid-statusbar\">\n @if (statusbarTemplate) {\n <ng-template [ngTemplateOutlet]=\"statusbarTemplate\"></ng-template>\n }\n </div>\n }\n\n <!-- Pagination -->\n <div class=\"acp-grid-pagination\">\n @if (paginationTemplate) {\n <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\n } @else {\n <mat-paginator\n [class.mat-paginator-hidden]=\"!showPaginator\"\n [showFirstLastButtons]=\"showFirstLastButtons\"\n [length]=\"length\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [hidePageSize]=\"hidePageSize\"\n (page)=\"_onPage($event)\"\n [disabled]=\"pageDisabled\"\n ></mat-paginator>\n }\n </div>\n</div>\n\n<!-- Header template for extra content -->\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\n @if (headerExtraTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(headerExtraTemplate)?.[col.field]) | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } }\n</ng-template>\n", styles: [".mat-column-resize-table.cdk-column-resize-with-resized-column{table-layout:fixed}.mat-column-resize-flex .mat-mdc-header-cell,.mat-column-resize-flex .mat-mdc-cell{box-sizing:border-box;min-width:32px}.mat-mdc-header-cell{position:relative}.mat-resizable{box-sizing:border-box}.mat-mdc-header-cell:not(.mat-resizable):after,.mat-resizable-handle{position:absolute;bottom:0;top:0;right:0;width:1px;background:transparent;transition:background .3s cubic-bezier(.55,0,.55,.2)}.mat-mdc-header-cell:not(.mat-resizable):after{content:\"\"}[dir=rtl] .mat-mdc-header-cell:not(.mat-resizable):after,[dir=rtl] .mat-resizable-handle{left:0;right:auto}[dir=rtl] .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-header-cell,[dir=rtl] .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell{border-left:none}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell{border-right:none}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell:not(.mat-resizable):after{background-color:var(--acp-grid-resizable-handle-disabled-background-color, var(--mat-sys-outline-variant))}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle{background-color:var(--acp-grid-resizable-handle-hover-background-color, var(--mat-sys-primary))}.mat-resizable.cdk-resizable-overlay-thumb-active>.mat-resizable-handle{opacity:0;transition:none}.mat-resizable-handle:focus,.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus{outline:none;background-color:var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary))}.mat-column-resize-overlay-thumb{background:transparent;cursor:col-resize;width:100%;height:100%;transition:background .3s cubic-bezier(.55,0,.55,.2);-webkit-user-select:none;user-select:none}.mat-column-resize-overlay-thumb:active{will-change:transform;background:linear-gradient(90deg,transparent,transparent 7px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 7px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 9px,transparent 9px,transparent)}.mat-column-resize-overlay-thumb:active .mat-column-resize-overlay-thumb-top{background:linear-gradient(90deg,transparent,transparent 4px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 4px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 12px,transparent 12px,transparent)}.mat-column-resize-overlay-thumb-top{width:100%}.acp-grid{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant));border-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium))}.acp-grid .mat-mdc-table{--mat-table-row-item-outline-color: var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid .mat-mdc-table.mat-table-striped .mat-row-odd{background-color:var(--acp-grid-table-row-striped-background-color, var(--mat-sys-surface-container))}.acp-grid .mat-mdc-table.mat-table-hover .mat-mdc-row:hover{background-color:var(--acp-grid-table-row-hover-background-color, var(--mat-sys-secondary-container))}.acp-grid .mat-mdc-table.mat-table-hover .mat-mdc-row.selected:hover{background-color:var(--acp-grid-table-row-selected-hover-background-color, var(--mat-sys-primary-container))}.acp-grid .mat-mdc-table .mat-mdc-row.selected{background-color:var(--acp-grid-table-row-selected-background-color, var(--mat-sys-secondary-container))}.acp-grid .mat-mdc-table .mat-mdc-cell.selected{box-shadow:inset 0 0 0 1px var(--acp-grid-table-cell-selected-outline-color, var(--mat-sys-primary))}.acp-grid .mat-table-container{overflow:auto}.acp-grid .mat-table-container.mat-table-with-data{flex:1}.acp-grid .mat-mdc-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-header-cell:not(.acp-grid-checkbox-cell),.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-footer-cell:not(.acp-grid-checkbox-cell),.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-cell:not(.acp-grid-checkbox-cell){min-width:var(--acp-grid-table-cell-min-width, 80px)}.acp-grid .mat-table-sticky-left{border-right:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .acp-grid .mat-table-sticky-left{border-right-width:0;border-left:1px solid var(--mat-table-row-item-outline-color)}.acp-grid .mat-table-sticky-right{border-left:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .acp-grid .mat-table-sticky-right{border-left-width:0;border-right:1px solid var(--mat-table-row-item-outline-color)}.acp-grid .mat-mdc-footer-cell{border-top:1px solid var(--mat-table-row-item-outline-color);background-color:var(--acp-grid-table-footer-background-color, var(--mat-sys-surface-container))}.acp-grid .mat-mdc-row.acp-grid-expansion{height:0;overflow:hidden}.acp-grid .mat-mdc-row.acp-grid-expansion .mat-mdc-cell{padding-top:0;padding-bottom:0}.acp-grid .mat-mdc-row.acp-grid-expansion.collapsed .mat-mdc-cell{border-bottom-width:0}.acp-grid .mat-sort-header-icon{margin-left:4px}[dir=rtl] .acp-grid .mat-sort-header-icon{margin-left:0;margin-right:4px}.acp-grid .mat-header-cell-inner{display:inline-flex;align-items:center;vertical-align:middle}.acp-grid .mat-mdc-paginator{border-top:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant));border-bottom-left-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium));border-bottom-right-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium))}.acp-grid .mat-paginator-hidden{display:none}.acp-grid .acp-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mat-checkbox-state-layer-size, 40px)) / 2)}.acp-grid-progress{position:absolute;top:0;z-index:120;width:100%}.acp-grid-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-bottom:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-toolbar-content{flex:1;width:0;padding:0 8px}.acp-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.acp-grid-content{flex-direction:column;width:0}.acp-grid-sidebar{max-width:50%;border-left:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}[dir=rtl] .acp-grid-sidebar{border-left-width:0;border-right:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-footer{position:relative;z-index:1}.acp-grid-statusbar{display:flex;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-top:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.acp-grid-expansion-placeholder{display:inline-block;vertical-align:middle;width:var(--mat-icon-button-state-layer-size, var(--acp-grid-row-expand-button-size, 40px));height:var(--mat-icon-button-state-layer-size, var(--acp-grid-row-expand-button-size, 40px))}.acp-grid-expansion-detail-wrapper{display:grid;grid-template-rows:0fr;grid-template-columns:100%;padding:0;overflow:hidden}.acp-grid-expansion.expanded .acp-grid-expansion-detail-wrapper{grid-template-rows:1fr;padding:calc((var(--mat-table-row-item-container-height, 52px) - 20px) / 2) 0}.acp-grid-expansion-detail{min-height:0}.acp-grid-animations-enabled .acp-grid-expansion-detail-wrapper{transition:all 225ms cubic-bezier(.4,0,.2,1)}.acp-grid-row-expand-button.expanded .acp-grid-row-expand-icon{transform:rotate(90deg)}.acp-grid-row-expand-button.mat-mdc-icon-button,.acp-grid-row-expand-button+acp-grid-cell{vertical-align:middle}\n"] }]
|
|
5991
|
+
'[class.acp-grid-size-small]': '_size() === "small"',
|
|
5992
|
+
'[class.acp-grid-size-medium]': '_size() === "medium"',
|
|
5993
|
+
'[class.acp-grid-size-large]': '_size() === "large"',
|
|
5994
|
+
'[attr.tabindex]': 'keyboardNavigation() ? null : 0',
|
|
5995
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Progress bar-->\n@if (loading) {\n<div class=\"acp-grid-progress\">\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n</div>\n}\n\n<!-- Toolbar -->\n@if (showToolbar) {\n<div class=\"acp-grid-toolbar\">\n <div class=\"acp-grid-toolbar-content\">\n @if (toolbarTemplate) {\n <ng-template [ngTemplateOutlet]=\"toolbarTemplate\"></ng-template>\n } @else { @if (toolbarTitle) {\n <div class=\"acp-grid-toolbar-title\">{{ toolbarTitle }}</div>\n } }\n </div>\n <div class=\"acp-grid-toolbar-actions\">\n @if (showColumnMenuButton) {\n <acp-grid-column-menu\n [columns]=\"columns\"\n [buttonText]=\"columnMenuButtonText\"\n [buttonType]=\"columnMenuButtonType\"\n [buttonColor]=\"columnMenuButtonColor\"\n [buttonClass]=\"columnMenuButtonClass\"\n [buttonIcon]=\"columnMenuButtonIcon\"\n [buttonFontIcon]=\"columnMenuButtonFontIcon\"\n [buttonSvgIcon]=\"columnMenuButtonSvgIcon\"\n [selectable]=\"columnHideable\"\n [selectableChecked]=\"columnHideableChecked\"\n [sortable]=\"columnSortable\"\n [pinnable]=\"columnPinnable\"\n [showHeader]=\"showColumnMenuHeader\"\n [headerText]=\"columnMenuHeaderText\"\n [headerTemplate]=\"columnMenuHeaderTemplate\"\n [showFooter]=\"showColumnMenuFooter\"\n [footerText]=\"columnMenuFooterText\"\n [footerTemplate]=\"columnMenuFooterTemplate\"\n [pinOptions]=\"columnPinOptions\"\n (columnChange)=\"_onColumnChange($event)\"\n ></acp-grid-column-menu>\n }\n </div>\n</div>\n}\n\n<div class=\"acp-grid-main acp-grid-layout\">\n <!-- Table content -->\n <div class=\"acp-grid-content acp-grid-layout\">\n <div #tableContainer class=\"mat-table-container\" [class.mat-table-with-data]=\"!_hasNoResult\">\n @if (!columnResizable) {\n <table\n mat-table\n [class.mat-table-hover]=\"rowHover\"\n [class.mat-table-striped]=\"rowStriped\"\n [class.mat-table-expandable]=\"expandable\"\n [dataSource]=\"dataSource\"\n [multiTemplateDataRows]=\"expandable\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n [matSortDisableClear]=\"sortDisableClear\"\n [matSortDisabled]=\"sortDisabled\"\n [matSortStart]=\"sortStart\"\n (matSortChange)=\"_onSortChange($event)\"\n [trackBy]=\"trackBy\"\n >\n @if (rowSelectable && !hideRowSelectionCheckbox) {\n <ng-container matColumnDef=\"acpGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"acp-grid-checkbox-cell\">\n @if (multiSelectable) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n (change)=\"$event ? _toggleMasterCheckbox() : null\"\n ></mat-checkbox>\n }\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n class=\"acp-grid-checkbox-cell\"\n >\n @if ( !( rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row,\n _getIndex(index, dataIndex)) ) ) {\n <mat-checkbox\n [disabled]=\"\n rowSelectionFormatter.disabled &&\n rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\n \"\n [checked]=\"rowSelection.isSelected(row)\"\n [tabIndex]=\"keyboardNavigation() ? -1 : 0\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\"\n (keydown)=\"_onCheckboxKeyDown($event)\"\n (keyup)=\"_onCheckboxKeyUp($event)\"\n (keypress)=\"_onCheckboxKeyPress($event)\"\n ></mat-checkbox>\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"acp-grid-checkbox-cell\"></td>\n </ng-container>\n } @for (col of columns; track col.field) {\n <ng-container\n [matColumnDef]=\"col.field\"\n [sticky]=\"col.pinned === 'left'\"\n [stickyEnd]=\"col.pinned === 'right'\"\n >\n <th\n mat-header-cell\n *matHeaderCellDef\n [class]=\"col | colClass\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n <div class=\"mat-header-cell-inner\">\n @if (headerTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(headerTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else {\n <div\n [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n [arrowPosition]=\"$safeNavigationMigration(col.sortProp?.arrowPosition)!\"\n [start]=\"$safeNavigationMigration(col.sortProp?.start)!\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n }\n <span>{{ col.header | toObservable | async }}</span>\n @if (col.sortable) {\n <svg\n class=\"acp-grid-icon mat-sort-header-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n </svg>\n }\n </div>\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTplBase\"\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\"\n ></ng-template>\n } }\n </div>\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [class]=\"\n col\n | colClass\n : row\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n acpGridSelectableCell\n [cellSelectable]=\"cellSelectable\"\n (cellSelectedChange)=\"_selectCell($event, row, col)\"\n >\n @if (cellTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(cellTemplate)?.[col.field]) |\n isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.cellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.cellTemplate!\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.showExpand) {\n <button\n class=\"acp-grid-row-expand-button\"\n matIconButton\n acpGridExpansionToggle\n type=\"button\"\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex)\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-row-expand-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n }\n <acp-grid-cell\n [rowData]=\"row\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n (rowDataChange)=\"_onRowDataChange($event)\"\n ></acp-grid-cell>\n } } }\n </td>\n <td\n mat-footer-cell\n *matFooterCellDef\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n } @if (summaryTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(summaryTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: _getColData(data, col),\n colData: _getColData(data, col),\n colDef: col,\n }\"\n ></ng-template>\n } @else {\n <acp-grid-cell\n [summary]=\"true\"\n [data]=\"data\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n ></acp-grid-cell>\n } }\n </td>\n </ng-container>\n } @if (!useContentHeaderRowTemplate) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (!useContentRowTemplate) {\n <tr\n mat-row\n *matRowDef=\"\n let row;\n let index = index;\n let dataIndex = dataIndex;\n columns: displayedColumns\n \"\n [class]=\"row | rowClass: index : dataIndex : rowClassFormatter\"\n [class.selected]=\"rowSelection.isSelected(row)\"\n [class.acp-grid-row-active]=\"_isActiveRow(row)\"\n [attr.id]=\"_rowId(_getIndex(index, dataIndex))\"\n [attr.tabindex]=\"_rowTabIndex(row, _getIndex(index, dataIndex))\"\n (focus)=\"_onRowFocus(row)\"\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\"\n (keydown)=\"_onRowKeyDown($event, row, _getIndex(index, dataIndex))\"\n (keyup)=\"_onRowKeyUp($event, row, _getIndex(index, dataIndex))\"\n (keypress)=\"_onRowKeyPress($event, row, _getIndex(index, dataIndex))\"\n ></tr>\n } @if (_whetherShowSummary) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (expandable) {\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"acpGridExpansionColumnDef\">\n <td\n mat-cell\n *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns.length\"\n >\n <div class=\"acp-grid-expansion-detail-wrapper\">\n <div class=\"acp-grid-expansion-detail\">\n <ng-template\n [ngTemplateOutlet]=\"expansionTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: dataIndex,\n expanded: expansionRowStates[dataIndex].expanded,\n }\"\n ></ng-template>\n </div>\n </div>\n </td>\n </ng-container>\n <tr\n mat-row\n *matRowDef=\"\n let row;\n columns: ['acpGridExpansionColumnDef'];\n let dataIndex = dataIndex\n \"\n class=\"acp-grid-expansion\"\n [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n ></tr>\n }\n </table>\n } @else {\n <!-- TODO: Use flexbox-based mat-table -->\n <table\n mat-table\n columnResize\n [class.mat-table-hover]=\"rowHover\"\n [class.mat-table-striped]=\"rowStriped\"\n [class.mat-table-expandable]=\"expandable\"\n [dataSource]=\"dataSource\"\n [multiTemplateDataRows]=\"expandable\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n [matSortDisableClear]=\"sortDisableClear\"\n [matSortDisabled]=\"sortDisabled\"\n [matSortStart]=\"sortStart\"\n (matSortChange)=\"_onSortChange($event)\"\n [trackBy]=\"trackBy\"\n >\n @if (rowSelectable && !hideRowSelectionCheckbox) {\n <ng-container matColumnDef=\"acpGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"acp-grid-checkbox-cell\">\n @if (multiSelectable) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n (change)=\"$event ? _toggleMasterCheckbox() : null\"\n ></mat-checkbox>\n }\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n class=\"acp-grid-checkbox-cell\"\n >\n @if ( !( rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row,\n _getIndex(index, dataIndex)) ) ) {\n <mat-checkbox\n [disabled]=\"\n rowSelectionFormatter.disabled &&\n rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\n \"\n [checked]=\"rowSelection.isSelected(row)\"\n [tabIndex]=\"keyboardNavigation() ? -1 : 0\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\"\n (keydown)=\"_onCheckboxKeyDown($event)\"\n (keyup)=\"_onCheckboxKeyUp($event)\"\n (keypress)=\"_onCheckboxKeyPress($event)\"\n ></mat-checkbox>\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"acp-grid-checkbox-cell\"></td>\n </ng-container>\n } @for (col of columns; track col.field) {\n <ng-container\n [matColumnDef]=\"col.field\"\n [sticky]=\"col.pinned === 'left'\"\n [stickyEnd]=\"col.pinned === 'right'\"\n >\n <th\n mat-header-cell\n *matHeaderCellDef\n [class]=\"col | colClass\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n [resizable]=\"col.resizable\"\n [matResizableMinWidthPx]=\"col.minWidth\"\n [matResizableMaxWidthPx]=\"col.maxWidth\"\n >\n <div class=\"mat-header-cell-inner\">\n @if (headerTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(headerTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else {\n <div\n [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n [arrowPosition]=\"$safeNavigationMigration(col.sortProp?.arrowPosition)!\"\n [start]=\"$safeNavigationMigration(col.sortProp?.start)!\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n }\n <span>{{ col.header | toObservable | async }}</span>\n @if (col.sortable) {\n <svg\n class=\"acp-grid-icon mat-sort-header-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n </svg>\n }\n </div>\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTplBase\"\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\"\n ></ng-template>\n } }\n </div>\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [class]=\"\n col\n | colClass\n : row\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n acpGridSelectableCell\n [cellSelectable]=\"cellSelectable\"\n (cellSelectedChange)=\"_selectCell($event, row, col)\"\n >\n @if (cellTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(cellTemplate)?.[col.field]) |\n isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.cellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.cellTemplate!\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.showExpand) {\n <button\n class=\"acp-grid-row-expand-button\"\n matIconButton\n acpGridExpansionToggle\n type=\"button\"\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex)\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-row-expand-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n }\n <acp-grid-cell\n [rowData]=\"row\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n (rowDataChange)=\"_onRowDataChange($event)\"\n ></acp-grid-cell>\n } } }\n </td>\n <td\n mat-footer-cell\n *matFooterCellDef\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n } @if (summaryTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(summaryTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: _getColData(data, col),\n colData: _getColData(data, col),\n colDef: col,\n }\"\n ></ng-template>\n } @else {\n <acp-grid-cell\n [summary]=\"true\"\n [data]=\"data\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n ></acp-grid-cell>\n } }\n </td>\n </ng-container>\n } @if (!useContentHeaderRowTemplate) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (!useContentRowTemplate) {\n <tr\n mat-row\n *matRowDef=\"\n let row;\n let index = index;\n let dataIndex = dataIndex;\n columns: displayedColumns\n \"\n [class]=\"row | rowClass: index : dataIndex : rowClassFormatter\"\n [class.selected]=\"rowSelection.isSelected(row)\"\n [class.acp-grid-row-active]=\"_isActiveRow(row)\"\n [attr.id]=\"_rowId(_getIndex(index, dataIndex))\"\n [attr.tabindex]=\"_rowTabIndex(row, _getIndex(index, dataIndex))\"\n (focus)=\"_onRowFocus(row)\"\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\"\n (keydown)=\"_onRowKeyDown($event, row, _getIndex(index, dataIndex))\"\n (keyup)=\"_onRowKeyUp($event, row, _getIndex(index, dataIndex))\"\n (keypress)=\"_onRowKeyPress($event, row, _getIndex(index, dataIndex))\"\n ></tr>\n } @if (_whetherShowSummary) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (expandable) {\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"acpGridExpansionColumnDef\">\n <td\n mat-cell\n *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns.length\"\n >\n <div class=\"acp-grid-expansion-detail-wrapper\">\n <div class=\"acp-grid-expansion-detail\">\n <ng-template\n [ngTemplateOutlet]=\"expansionTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: dataIndex,\n expanded: expansionRowStates[dataIndex].expanded,\n }\"\n ></ng-template>\n </div>\n </div>\n </td>\n </ng-container>\n <tr\n mat-row\n *matRowDef=\"\n let row;\n columns: ['acpGridExpansionColumnDef'];\n let dataIndex = dataIndex\n \"\n class=\"acp-grid-expansion\"\n [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n ></tr>\n }\n </table>\n }\n </div>\n\n <!-- No result -->\n @if (_hasNoResult) {\n <div class=\"acp-grid-no-result\">\n @if (noResultTemplate) {\n <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\n } @else { {{ noResultText }} }\n </div>\n }\n </div>\n\n <!-- Tool sidebar -->\n @if (showSidebar) {\n <div class=\"acp-grid-sidebar\">\n @if (sidebarTemplate) {\n <ng-template [ngTemplateOutlet]=\"sidebarTemplate\"></ng-template>\n }\n </div>\n }\n</div>\n\n<div class=\"acp-grid-footer\">\n <!-- Status Bar -->\n @if (showStatusbar) {\n <div class=\"acp-grid-statusbar\">\n @if (statusbarTemplate) {\n <ng-template [ngTemplateOutlet]=\"statusbarTemplate\"></ng-template>\n }\n </div>\n }\n\n <!-- Pagination -->\n <div class=\"acp-grid-pagination\">\n @if (paginationTemplate) {\n <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\n } @else {\n <mat-paginator\n [class.mat-paginator-hidden]=\"!showPaginator\"\n [showFirstLastButtons]=\"showFirstLastButtons\"\n [length]=\"length\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [hidePageSize]=\"hidePageSize\"\n (page)=\"_onPage($event)\"\n [disabled]=\"pageDisabled\"\n ></mat-paginator>\n }\n </div>\n</div>\n\n<!-- Header template for extra content -->\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\n @if (headerExtraTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(headerExtraTemplate)?.[col.field]) | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } }\n</ng-template>\n", styles: [".mat-column-resize-table.cdk-column-resize-with-resized-column{table-layout:fixed}.mat-column-resize-flex .mat-mdc-header-cell,.mat-column-resize-flex .mat-mdc-cell{box-sizing:border-box;min-width:32px}.mat-mdc-header-cell{position:relative}.mat-resizable{box-sizing:border-box}.mat-mdc-header-cell:not(.mat-resizable):after,.mat-resizable-handle{position:absolute;bottom:0;top:0;right:0;width:1px;background:transparent;transition:background .3s cubic-bezier(.55,0,.55,.2)}.mat-mdc-header-cell:not(.mat-resizable):after{content:\"\"}[dir=rtl] .mat-mdc-header-cell:not(.mat-resizable):after,[dir=rtl] .mat-resizable-handle{left:0;right:auto}[dir=rtl] .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-header-cell,[dir=rtl] .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell{border-left:none}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell{border-right:none}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell:not(.mat-resizable):after{background-color:var(--acp-grid-resizable-handle-disabled-background-color, var(--mat-sys-outline-variant))}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle{background-color:var(--acp-grid-resizable-handle-hover-background-color, var(--mat-sys-primary))}.mat-resizable.cdk-resizable-overlay-thumb-active>.mat-resizable-handle{opacity:0;transition:none}.mat-resizable-handle:focus,.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus{outline:none;background-color:var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary))}.mat-column-resize-overlay-thumb{background:transparent;cursor:col-resize;width:100%;height:100%;transition:background .3s cubic-bezier(.55,0,.55,.2);-webkit-user-select:none;user-select:none}.mat-column-resize-overlay-thumb:active{will-change:transform;background:linear-gradient(90deg,transparent,transparent 7px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 7px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 9px,transparent 9px,transparent)}.mat-column-resize-overlay-thumb:active .mat-column-resize-overlay-thumb-top{background:linear-gradient(90deg,transparent,transparent 4px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 4px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 12px,transparent 12px,transparent)}.mat-column-resize-overlay-thumb-top{width:100%}.acp-grid{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant));border-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium))}.acp-grid .mat-mdc-table{--mat-table-row-item-outline-color: var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid .mat-mdc-table.mat-table-striped .mat-row-odd{background-color:var(--acp-grid-table-row-striped-background-color, var(--mat-sys-surface-container))}.acp-grid .mat-mdc-table.mat-table-hover .mat-mdc-row:hover{background-color:var(--acp-grid-table-row-hover-background-color, var(--mat-sys-secondary-container))}.acp-grid .mat-mdc-table.mat-table-hover .mat-mdc-row.selected:hover{background-color:var(--acp-grid-table-row-selected-hover-background-color, var(--mat-sys-primary-container))}.acp-grid .mat-mdc-table .mat-mdc-row.acp-grid-row-active{background-color:var(--acp-grid-table-row-hover-background-color, var(--mat-sys-secondary-container))}.acp-grid .mat-mdc-table .mat-mdc-row.selected{background-color:var(--acp-grid-table-row-selected-background-color, var(--mat-sys-secondary-container))}.acp-grid .mat-mdc-table .mat-mdc-row:focus{outline:none}.acp-grid .mat-mdc-table .mat-mdc-row:focus-visible,.acp-grid .mat-mdc-table .mat-mdc-row.acp-grid-row-active:not(:focus){outline:2px solid var(--acp-grid-table-cell-selected-outline-color, var(--mat-sys-primary));outline-offset:-2px}.acp-grid .mat-mdc-table .mat-mdc-cell.selected{box-shadow:inset 0 0 0 1px var(--acp-grid-table-cell-selected-outline-color, var(--mat-sys-primary))}.acp-grid .mat-table-container{overflow:auto}.acp-grid .mat-table-container.mat-table-with-data{flex:1}.acp-grid .mat-mdc-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-header-cell:not(.acp-grid-checkbox-cell),.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-footer-cell:not(.acp-grid-checkbox-cell),.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-cell:not(.acp-grid-checkbox-cell){min-width:var(--acp-grid-table-cell-min-width, 80px)}.acp-grid .mat-table-sticky-left{border-right:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .acp-grid .mat-table-sticky-left{border-right-width:0;border-left:1px solid var(--mat-table-row-item-outline-color)}.acp-grid .mat-table-sticky-right{border-left:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .acp-grid .mat-table-sticky-right{border-left-width:0;border-right:1px solid var(--mat-table-row-item-outline-color)}.acp-grid .mat-mdc-footer-cell{border-top:1px solid var(--mat-table-row-item-outline-color);background-color:var(--acp-grid-table-footer-background-color, var(--mat-sys-surface-container))}.acp-grid .mat-mdc-row.acp-grid-expansion{height:0;overflow:hidden}.acp-grid .mat-mdc-row.acp-grid-expansion .mat-mdc-cell{padding-top:0;padding-bottom:0}.acp-grid .mat-mdc-row.acp-grid-expansion.collapsed .mat-mdc-cell{border-bottom-width:0}.acp-grid .mat-sort-header-icon{margin-left:4px}[dir=rtl] .acp-grid .mat-sort-header-icon{margin-left:0;margin-right:4px}.acp-grid .mat-header-cell-inner{display:inline-flex;align-items:center;vertical-align:middle}.acp-grid .mat-mdc-paginator{border-top:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant));border-bottom-left-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium));border-bottom-right-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium))}.acp-grid .mat-paginator-hidden{display:none}.acp-grid .acp-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mat-checkbox-state-layer-size, 40px)) / 2)}.acp-grid-progress{position:absolute;top:0;z-index:120;width:100%}.acp-grid-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-bottom:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-toolbar-content{flex:1;width:0;padding:0 8px}.acp-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.acp-grid-content{flex-direction:column;width:0}.acp-grid-sidebar{max-width:50%;border-left:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}[dir=rtl] .acp-grid-sidebar{border-left-width:0;border-right:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-footer{position:relative;z-index:1}.acp-grid-statusbar{display:flex;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-top:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.acp-grid-expansion-placeholder{display:inline-block;vertical-align:middle;width:var(--mat-icon-button-state-layer-size, var(--acp-grid-row-expand-button-size, 40px));height:var(--mat-icon-button-state-layer-size, var(--acp-grid-row-expand-button-size, 40px))}.acp-grid-expansion-detail-wrapper{display:grid;grid-template-rows:0fr;grid-template-columns:100%;padding:0;overflow:hidden}.acp-grid-expansion.expanded .acp-grid-expansion-detail-wrapper{grid-template-rows:1fr;padding:calc((var(--mat-table-row-item-container-height, 52px) - 20px) / 2) 0}.acp-grid-expansion-detail{min-height:0}.acp-grid-animations-enabled .acp-grid-expansion-detail-wrapper{transition:all 225ms cubic-bezier(.4,0,.2,1)}.acp-grid-row-expand-button.expanded .acp-grid-row-expand-icon{transform:rotate(90deg)}.acp-grid-row-expand-button.mat-mdc-icon-button,.acp-grid-row-expand-button+acp-grid-cell{vertical-align:middle}.acp-grid-size-small{--mat-table-header-container-height: 40px;--mat-table-row-item-container-height: 36px;--mat-table-footer-container-height: 36px;--mat-table-header-headline-size: .8125rem;--mat-table-row-item-label-text-size: .8125rem;--mat-table-footer-supporting-text-size: .8125rem;--mat-icon-button-state-layer-size: 32px;--mat-checkbox-state-layer-size: 32px;--mat-paginator-container-size: 48px;--mat-button-outlined-container-height: 32px;--mat-button-filled-container-height: 32px;--mat-button-protected-container-height: 32px;--mat-button-text-container-height: 32px;--mat-button-tonal-container-height: 32px}.acp-grid-size-small :is(.mat-mdc-header-cell,.mat-mdc-footer-cell,.mat-mdc-cell):not(.acp-grid-checkbox-cell){padding-left:8px;padding-right:8px}.acp-grid-size-small .acp-grid-toolbar,.acp-grid-size-small .acp-grid-statusbar{padding:4px}.acp-grid-size-large{--mat-table-header-container-height: 64px;--mat-table-row-item-container-height: 60px;--mat-table-footer-container-height: 60px;--mat-table-header-headline-size: 1rem;--mat-table-row-item-label-text-size: 1rem;--mat-table-footer-supporting-text-size: 1rem;--mat-paginator-container-size: 64px}.acp-grid-size-large :is(.mat-mdc-header-cell,.mat-mdc-footer-cell,.mat-mdc-cell):not(.acp-grid-checkbox-cell){padding-left:20px;padding-right:20px}.acp-grid-size-large .acp-grid-toolbar,.acp-grid-size-large .acp-grid-statusbar{padding:12px}\n"] }]
|
|
5636
5996
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], table: [{
|
|
5637
5997
|
type: ViewChild,
|
|
5638
5998
|
args: [MatTable]
|
|
@@ -5839,176 +6199,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
5839
6199
|
}] } });
|
|
5840
6200
|
|
|
5841
6201
|
/**
|
|
5842
|
-
*
|
|
5843
|
-
*
|
|
6202
|
+
* Lets a text input drive the rows of an `acp-data-grid` while keeping the focus in the input,
|
|
6203
|
+
* like an autocomplete: ArrowDown/ArrowUp move the active row, PageDown/PageUp change page and
|
|
6204
|
+
* Enter runs the row click (selection and `rowClick`) on the active row.
|
|
6205
|
+
*
|
|
6206
|
+
* @example
|
|
6207
|
+
* ```html
|
|
6208
|
+
* <input matInput [acpGridNavigationFor]="grid" />
|
|
6209
|
+
* <acp-data-grid #grid [data]="results" [columns]="columns" (rowClick)="pick($event.rowData)" />
|
|
6210
|
+
* ```
|
|
5844
6211
|
*/
|
|
5845
|
-
class
|
|
5846
|
-
/**
|
|
5847
|
-
|
|
5848
|
-
/**
|
|
5849
|
-
|
|
5850
|
-
|
|
5851
|
-
|
|
5852
|
-
|
|
5853
|
-
// --- Signals Públicos para Exponer el Estado ---
|
|
5854
|
-
/**
|
|
5855
|
-
* Signal público que expone el índice de la fila enfocada (usado por componentes como DataGrid).
|
|
5856
|
-
* Es un signal escribible porque el componente hijo (DataGrid) es quien actualiza su valor.
|
|
5857
|
-
*/
|
|
5858
|
-
focusedRowIndex = signal(-1, /* @ts-ignore */
|
|
5859
|
-
...(ngDevMode ? [{ debugName: "focusedRowIndex" }] : /* istanbul ignore next */ []));
|
|
5860
|
-
/**
|
|
5861
|
-
* Signal público que expone el nombre del elemento actualmente enfocado.
|
|
5862
|
-
* Es un signal `computed` que se deriva automáticamente del `currentFocusIndex` privado.
|
|
5863
|
-
*/
|
|
5864
|
-
focusedElementName = computed(() => {
|
|
5865
|
-
const index = this.currentFocusIndex();
|
|
5866
|
-
if (index >= 0 && index < this.focusableElements.length) {
|
|
5867
|
-
return this.focusableElements[index].name;
|
|
5868
|
-
}
|
|
5869
|
-
return '';
|
|
5870
|
-
}, /* @ts-ignore */
|
|
5871
|
-
...(ngDevMode ? [{ debugName: "focusedElementName" }] : /* istanbul ignore next */ []));
|
|
5872
|
-
/**
|
|
5873
|
-
* Registra un nuevo elemento en el sistema de navegación por teclado.
|
|
5874
|
-
* @param element El objeto FocusableElement a registrar.
|
|
5875
|
-
*/
|
|
5876
|
-
registerElement(element) {
|
|
5877
|
-
if (!element || !element.element) {
|
|
5878
|
-
console.error('KeyboardNavigationService: No se puede registrar el elemento. El ElementRef es undefined o nulo. ' +
|
|
5879
|
-
'Asegúrate de que el @ViewChild esté correctamente configurado y que el elemento exista en el DOM cuando ngAfterViewInit se ejecute.', element);
|
|
5880
|
-
return; // Salimos del método para evitar el crash
|
|
5881
|
-
}
|
|
5882
|
-
this.focusableElements.push(element);
|
|
5883
|
-
// Configurar eventos de teclado para este elemento
|
|
5884
|
-
fromEvent(element.element?.nativeElement, 'keydown')
|
|
5885
|
-
.pipe(takeUntil(this.destroy$), filter(event => ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)))
|
|
5886
|
-
.subscribe(event => {
|
|
5887
|
-
event.preventDefault(); // Prevenir el comportamiento por defecto del navegador (scroll, etc.)
|
|
5888
|
-
this.handleKeyNavigation(event.key);
|
|
5889
|
-
});
|
|
5890
|
-
// Configurar eventos de foco para este elemento
|
|
5891
|
-
fromEvent(element.element?.nativeElement, 'focus')
|
|
5892
|
-
.pipe(takeUntil(this.destroy$))
|
|
5893
|
-
.subscribe(() => {
|
|
5894
|
-
const index = this.focusableElements.findIndex(e => e.element === element.element);
|
|
5895
|
-
this.currentFocusIndex.set(index);
|
|
5896
|
-
// Ejecutar el callback onFocus si está definido
|
|
5897
|
-
if (element.onFocus) {
|
|
5898
|
-
element.onFocus(index);
|
|
5899
|
-
}
|
|
6212
|
+
class AcpGridNavigationFor {
|
|
6213
|
+
/** The grid controlled by this input. */
|
|
6214
|
+
grid = input.required({ ...(ngDevMode ? { debugName: "grid" } : /* istanbul ignore next */ {}), alias: 'acpGridNavigationFor' });
|
|
6215
|
+
/** Whether the first row becomes active each time the grid data changes. */
|
|
6216
|
+
acpGridNavigationActivateFirstRow = input(true, { ...(ngDevMode ? { debugName: "acpGridNavigationActivateFirstRow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
6217
|
+
constructor() {
|
|
6218
|
+
effect(() => {
|
|
6219
|
+
this.grid()._activateFirstRowOnDataChange = this.acpGridNavigationActivateFirstRow();
|
|
5900
6220
|
});
|
|
5901
6221
|
}
|
|
5902
|
-
|
|
5903
|
-
|
|
5904
|
-
|
|
5905
|
-
*/
|
|
5906
|
-
unregisterElement(element) {
|
|
5907
|
-
const index = this.focusableElements.findIndex(e => e.element === element);
|
|
5908
|
-
if (index !== -1) {
|
|
5909
|
-
this.focusableElements.splice(index, 1);
|
|
5910
|
-
// Si el elemento eliminado estaba enfocado, resetear el estado del foco
|
|
5911
|
-
if (this.currentFocusIndex() === index) {
|
|
5912
|
-
this.currentFocusIndex.set(-1);
|
|
5913
|
-
}
|
|
5914
|
-
}
|
|
5915
|
-
}
|
|
5916
|
-
/**
|
|
5917
|
-
* Mueve el foco a un elemento específico por su nombre.
|
|
5918
|
-
* @param name El nombre único del elemento al que se quiere mover el foco.
|
|
5919
|
-
* @param index Opcional: el índice interno a enfocar (ej: el índice de una fila en una tabla).
|
|
5920
|
-
*/
|
|
5921
|
-
focusElement(name, index) {
|
|
5922
|
-
const elementIndex = this.focusableElements.findIndex(e => e.name === name);
|
|
5923
|
-
if (elementIndex !== -1) {
|
|
5924
|
-
this.currentFocusIndex.set(elementIndex);
|
|
5925
|
-
// Forzar el foco en el elemento del DOM
|
|
5926
|
-
this.focusableElements[elementIndex].element.nativeElement.focus();
|
|
5927
|
-
// Si el elemento tiene un callback de cambio de foco, llamarlo
|
|
5928
|
-
if (this.focusableElements[elementIndex].onFocusedChange && index !== undefined) {
|
|
5929
|
-
this.focusableElements[elementIndex].onFocusedChange(index);
|
|
5930
|
-
}
|
|
5931
|
-
}
|
|
5932
|
-
}
|
|
5933
|
-
/**
|
|
5934
|
-
* Actualiza el índice enfocado (usado por componentes internos como una tabla).
|
|
5935
|
-
* @param index El nuevo índice enfocado.
|
|
5936
|
-
*/
|
|
5937
|
-
updateFocusedIndex(index) {
|
|
5938
|
-
this.focusedRowIndex.set(index);
|
|
5939
|
-
// Obtener el elemento actualmente enfocado y llamar a su callback
|
|
5940
|
-
const currentElement = this.focusableElements[this.currentFocusIndex()];
|
|
5941
|
-
if (currentElement?.onFocusedChange) {
|
|
5942
|
-
currentElement.onFocusedChange(index);
|
|
5943
|
-
}
|
|
5944
|
-
}
|
|
5945
|
-
/**
|
|
5946
|
-
* Maneja la lógica de navegación basada en la tecla presionada.
|
|
5947
|
-
* @param key La tecla presionada ('ArrowUp', 'ArrowDown', etc.).
|
|
5948
|
-
*/
|
|
5949
|
-
handleKeyNavigation(key) {
|
|
5950
|
-
if (this.currentFocusIndex() === -1)
|
|
6222
|
+
_onKeydown(event) {
|
|
6223
|
+
const grid = this.grid();
|
|
6224
|
+
if (!grid.keyboardNavigation() || event.altKey) {
|
|
5951
6225
|
return;
|
|
5952
|
-
|
|
5953
|
-
switch (key) {
|
|
6226
|
+
}
|
|
6227
|
+
switch (event.key) {
|
|
6228
|
+
case 'ArrowDown':
|
|
6229
|
+
grid.moveActiveRow(1);
|
|
6230
|
+
break;
|
|
5954
6231
|
case 'ArrowUp':
|
|
5955
|
-
|
|
5956
|
-
// Moverse al elemento anterior en la lista
|
|
5957
|
-
this.currentFocusIndex.set(this.currentFocusIndex() - 1);
|
|
5958
|
-
this.focusableElements[this.currentFocusIndex()].element.nativeElement.focus();
|
|
5959
|
-
}
|
|
5960
|
-
else if (currentElement.onArrowUp) {
|
|
5961
|
-
// Si no hay más elementos arriba, ejecutar el callback personalizado
|
|
5962
|
-
currentElement.onArrowUp();
|
|
5963
|
-
}
|
|
6232
|
+
grid.moveActiveRow(-1);
|
|
5964
6233
|
break;
|
|
5965
|
-
case '
|
|
5966
|
-
|
|
5967
|
-
// Moverse al siguiente elemento en la lista
|
|
5968
|
-
this.currentFocusIndex.set(this.currentFocusIndex() + 1);
|
|
5969
|
-
this.focusableElements[this.currentFocusIndex()].element.nativeElement.focus();
|
|
5970
|
-
}
|
|
5971
|
-
else if (currentElement.onArrowDown) {
|
|
5972
|
-
// Si no hay más elementos abajo, ejecutar el callback personalizado
|
|
5973
|
-
currentElement.onArrowDown();
|
|
5974
|
-
}
|
|
6234
|
+
case 'PageDown':
|
|
6235
|
+
grid.nextPage();
|
|
5975
6236
|
break;
|
|
5976
|
-
case '
|
|
5977
|
-
|
|
5978
|
-
currentElement.onArrowLeft();
|
|
5979
|
-
}
|
|
6237
|
+
case 'PageUp':
|
|
6238
|
+
grid.previousPage();
|
|
5980
6239
|
break;
|
|
5981
|
-
case '
|
|
5982
|
-
if (
|
|
5983
|
-
|
|
6240
|
+
case 'Enter':
|
|
6241
|
+
if (!grid.activateActiveRow(event)) {
|
|
6242
|
+
return;
|
|
5984
6243
|
}
|
|
5985
6244
|
break;
|
|
6245
|
+
default:
|
|
6246
|
+
return;
|
|
5986
6247
|
}
|
|
6248
|
+
event.preventDefault();
|
|
5987
6249
|
}
|
|
5988
|
-
|
|
5989
|
-
|
|
5990
|
-
* Útil cuando los datos de un componente cambian y el foco anterior ya no es válido.
|
|
5991
|
-
*/
|
|
5992
|
-
resetFocusedRowIndex() {
|
|
5993
|
-
this.focusedRowIndex.set(-1);
|
|
5994
|
-
}
|
|
5995
|
-
/**
|
|
5996
|
-
* Método de limpieza para ser llamado cuando el servicio se destruye.
|
|
5997
|
-
* Cierra el Subject `destroy$` para completar todas las suscripciones activas.
|
|
5998
|
-
*/
|
|
5999
|
-
onDestroy() {
|
|
6000
|
-
this.destroy$.next();
|
|
6001
|
-
this.destroy$.complete();
|
|
6002
|
-
}
|
|
6003
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KeyboardNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
6004
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KeyboardNavigationService, providedIn: 'root' });
|
|
6250
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridNavigationFor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
6251
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: AcpGridNavigationFor, isStandalone: true, selector: "[acpGridNavigationFor]", inputs: { grid: { classPropertyName: "grid", publicName: "acpGridNavigationFor", isSignal: true, isRequired: true, transformFunction: null }, acpGridNavigationActivateFirstRow: { classPropertyName: "acpGridNavigationActivateFirstRow", publicName: "acpGridNavigationActivateFirstRow", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "_onKeydown($event)" }, properties: { "attr.aria-controls": "grid().gridId", "attr.aria-activedescendant": "grid()._activeRowId()" } }, exportAs: ["acpGridNavigationFor"], ngImport: i0 });
|
|
6005
6252
|
}
|
|
6006
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type:
|
|
6007
|
-
type:
|
|
6253
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridNavigationFor, decorators: [{
|
|
6254
|
+
type: Directive,
|
|
6008
6255
|
args: [{
|
|
6009
|
-
|
|
6256
|
+
selector: '[acpGridNavigationFor]',
|
|
6257
|
+
exportAs: 'acpGridNavigationFor',
|
|
6258
|
+
host: {
|
|
6259
|
+
'[attr.aria-controls]': 'grid().gridId',
|
|
6260
|
+
'[attr.aria-activedescendant]': 'grid()._activeRowId()',
|
|
6261
|
+
'(keydown)': '_onKeydown($event)',
|
|
6262
|
+
},
|
|
6010
6263
|
}]
|
|
6011
|
-
}] });
|
|
6264
|
+
}], ctorParameters: () => [], propDecorators: { grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "acpGridNavigationFor", required: true }] }], acpGridNavigationActivateFirstRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "acpGridNavigationActivateFirstRow", required: false }] }] } });
|
|
6012
6265
|
|
|
6013
6266
|
/* ============================
|
|
6014
6267
|
HELPERS
|
|
@@ -6297,7 +6550,7 @@ class DateRangePicker {
|
|
|
6297
6550
|
[startDate]="startDate()"
|
|
6298
6551
|
[endDate]="endDate()"
|
|
6299
6552
|
></ngx-datex>
|
|
6300
|
-
`, 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$
|
|
6553
|
+
`, 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 });
|
|
6301
6554
|
}
|
|
6302
6555
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DateRangePicker, decorators: [{
|
|
6303
6556
|
type: Component,
|
|
@@ -9275,7 +9528,7 @@ class AcpDateRangeInput {
|
|
|
9275
9528
|
this._dateOptions.set(options);
|
|
9276
9529
|
}
|
|
9277
9530
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDateRangeInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9278
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpDateRangeInput, isStandalone: true, selector: "acp-date-range-input", inputs: { inputLabel: { classPropertyName: "inputLabel", publicName: "inputLabel", isSignal: false, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showRangeRequired: { classPropertyName: "showRangeRequired", publicName: "showRangeRequired", isSignal: true, isRequired: false, transformFunction: null }, isRangeRequired: { classPropertyName: "isRangeRequired", publicName: "isRangeRequired", isSignal: true, isRequired: false, transformFunction: null }, staticOptionId: { classPropertyName: "staticOptionId", publicName: "staticOptionId", isSignal: false, isRequired: false, transformFunction: null }, dynamicOptionId: { classPropertyName: "dynamicOptionId", publicName: "dynamicOptionId", isSignal: false, isRequired: false, transformFunction: null }, calendarId: { classPropertyName: "calendarId", publicName: "calendarId", isSignal: false, isRequired: false, transformFunction: null }, enableDefaultOptions: { classPropertyName: "enableDefaultOptions", publicName: "enableDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: false, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: false, isRequired: false, transformFunction: null }, isShowStaticDefaultOptions: { classPropertyName: "isShowStaticDefaultOptions", publicName: "isShowStaticDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, hideDefaultOptions: { classPropertyName: "hideDefaultOptions", publicName: "hideDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayOffsetX: { classPropertyName: "cdkConnectedOverlayOffsetX", publicName: "cdkConnectedOverlayOffsetX", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayOffsetY: { classPropertyName: "cdkConnectedOverlayOffsetY", publicName: "cdkConnectedOverlayOffsetY", isSignal: false, isRequired: false, transformFunction: null }, listCdkConnectedOverlayOffsetY: { classPropertyName: "listCdkConnectedOverlayOffsetY", publicName: "listCdkConnectedOverlayOffsetY", isSignal: false, isRequired: false, transformFunction: null }, listCdkConnectedOverlayOffsetX: { classPropertyName: "listCdkConnectedOverlayOffsetX", publicName: "listCdkConnectedOverlayOffsetX", isSignal: false, isRequired: false, transformFunction: null }, selectedOptionIndex: { classPropertyName: "selectedOptionIndex", publicName: "selectedOptionIndex", isSignal: false, isRequired: false, transformFunction: null }, displaySelectedLabel: { classPropertyName: "displaySelectedLabel", publicName: "displaySelectedLabel", isSignal: false, isRequired: false, transformFunction: null }, displaySelectedExpression: { classPropertyName: "displaySelectedExpression", publicName: "displaySelectedExpression", isSignal: false, isRequired: false, transformFunction: null }, enableEditableDates: { classPropertyName: "enableEditableDates", publicName: "enableEditableDates", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayPush: { classPropertyName: "cdkConnectedOverlayPush", publicName: "cdkConnectedOverlayPush", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayPositions: { classPropertyName: "cdkConnectedOverlayPositions", publicName: "cdkConnectedOverlayPositions", isSignal: false, isRequired: false, transformFunction: null }, allowSingleDateSelection: { classPropertyName: "allowSingleDateSelection", publicName: "allowSingleDateSelection", isSignal: false, isRequired: false, transformFunction: null }, autoSelectOption: { classPropertyName: "autoSelectOption", publicName: "autoSelectOption", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, dateDropDownOptions: { classPropertyName: "dateDropDownOptions", publicName: "dateDropDownOptions", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dateSelectionChanged: "dateSelectionChanged", dateListOptions: "dateListOptions", rangeRequiredChange: "rangeRequiredChange" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "<!--\n AcpDateRangeInput Component Template\n @author AcontPlus S.A.S\n @version 1.0.0\n\n Comprehensive date range picker with predefined options, custom calendar selection,\n and support for human-readable date expressions.\n-->\n<div class=\"date-picker-main ndp-main\" cdkOverlayOrigin #trigger>\n <mat-form-field\n class=\"w-full\"\n [class]=\"{ 'display-hidden': isShowStaticDefaultOptions }\"\n (click)=\"toggleDateOptionSelectionList($event)\"\n >\n <mat-label (click)=\"toggleDateOptionSelectionList($event)\">{{ inputLabel }}</mat-label>\n <input\n matInput\n #dateInput\n class=\"cursor-pointer\"\n id=\"date-input-field\"\n (input)=\"onMainInputChange(dateInput)\"\n />\n <ng-container matSuffix>\n @if (showClearButton() && !!dateInput.value) {\n <button\n mat-icon-button\n class=\"cursor-pointer pe-0 ps-0\"\n matTooltip=\"Clear\"\n (click)=\"clearSelection($event)\"\n >\n <mat-icon>clear</mat-icon>\n </button>\n } @if (showCalendarIcon()) {\n <button mat-icon-button class=\"cursor-pointer\">\n <mat-icon>date_range</mat-icon>\n </button>\n } @if (showRangeRequired()) {\n <button\n mat-icon-button\n class=\"cursor-pointer\"\n [class.checked]=\"isRangeRequired()\"\n (click)=\"toggleRangeSelection($event)\"\n matTooltip=\"Rango de fechas obligatorio\"\n >\n <mat-icon [color]=\"isRangeRequired() ? 'accent' : ''\">\n {{ isRangeRequired() ? 'check_box' : 'check_box_outline_blank' }}\n </mat-icon>\n </button>\n }\n </ng-container>\n </mat-form-field>\n\n @if (dateDropDownOptions.length && isShowStaticDefaultOptions) {\n <ng-container\n *ngTemplateOutlet=\"\n dateOptionList;\n context: {\n $implicit: visibleOptions(),\n dateInput: dateInput,\n optionId: staticOptionId,\n className: 'w-full custom-ckd-container ndp-cdk-container range-input',\n }\n \"\n />\n }\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isDateOptionList\"\n [cdkConnectedOverlayPush]=\"cdkConnectedOverlayPush\"\n [cdkConnectedOverlayOffsetX]=\"listCdkConnectedOverlayOffsetX\"\n [cdkConnectedOverlayOffsetY]=\"listCdkConnectedOverlayOffsetY\"\n (backdropClick)=\"isDateOptionList = false\"\n >\n @if (dateDropDownOptions.length && !isShowStaticDefaultOptions) {\n <ng-container\n *ngTemplateOutlet=\"\n dateOptionList;\n context: {\n $implicit: visibleOptions(),\n dateInput: dateInput,\n optionId: dynamicOptionId,\n className: 'w-full custom-ckd-container ndp-cdk-container range-input',\n }\n \"\n />\n }\n </ng-template>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isCustomRange\"\n [cdkConnectedOverlayPush]=\"cdkConnectedOverlayPush\"\n [cdkConnectedOverlayPositions]=\"cdkConnectedOverlayPositions\"\n [cdkConnectedOverlayOffsetX]=\"cdkConnectedOverlayOffsetX\"\n [cdkConnectedOverlayOffsetY]=\"cdkConnectedOverlayOffsetY\"\n (backdropClick)=\"isCustomRange = false\"\n >\n <div\n class=\"custom-ckd-container ndp-cdk-container custom-calendar-container ndp-calendar-container\"\n [class]=\"{ 'without-default-opt': hideDefaultOptions }\"\n >\n <div class=\"row-1\">\n @if (!hideDefaultOptions) {\n <div class=\"pt-custom column-1\">\n <ng-container\n *ngTemplateOutlet=\"\n dateOptionList;\n context: {\n $implicit: visibleOptions(),\n dateInput: dateInput,\n }\n \"\n />\n </div>\n <div class=\"ndp-column-separator\"></div>\n }\n <div class=\"mt-2 column-2\">\n <acp-date-range-calendar\n [selectedDates]=\"selectedDates\"\n #calendar\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n (selectedDatesChange)=\"onCalendarSelectionChange($event)\"\n />\n </div>\n </div>\n <div class=\"row-2 br-top\">\n <div class=\"footer-content ndp-footer-content\">\n @if (enableEditableDates) {\n <form class=\"ndp-date-inputs\" [formGroup]=\"editableForm\">\n <mat-form-field class=\"ndp-date-field\" subscriptSizing=\"dynamic\">\n <mat-label>Start</mat-label>\n <input\n matInput\n formControlName=\"start\"\n placeholder=\"e.g. now-7d\"\n (blur)=\"commitEditableDates(calendar)\"\n (keydown.enter)=\"applyEditableDates(dateInput, calendar)\"\n />\n @if (editableForm.controls.start.hasError('required')) {\n <mat-error>Required</mat-error>\n } @else if (editableForm.controls.start.hasError('invalidDate')) {\n <mat-error>Invalid date or expression</mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"ndp-date-field\" subscriptSizing=\"dynamic\">\n <mat-label>End</mat-label>\n <input\n matInput\n formControlName=\"end\"\n placeholder=\"e.g. now\"\n (blur)=\"commitEditableDates(calendar)\"\n (keydown.enter)=\"applyEditableDates(dateInput, calendar)\"\n />\n @if (editableForm.controls.end.hasError('required')) {\n <mat-error>Required</mat-error>\n } @else if (editableForm.controls.end.hasError('invalidDate')) {\n <mat-error>Invalid date or expression</mat-error>\n } @else if (editableForm.hasError('rangeOrder')) {\n <mat-error>Start must be before end</mat-error>\n }\n </mat-form-field>\n </form>\n } @else {\n <span id=\"range-label-text\" class=\"ndp-range-label-text\">\n {{ calendar.selectedDates?.start | date: dateFormat }} @if (calendar.selectedDates?.end)\n {\n <span> - {{ calendar.selectedDates?.end | date: dateFormat }} </span>\n }\n </span>\n }\n <div class=\"buttons\">\n <acp-button\n type=\"button\"\n appearance=\"filled\"\n color=\"primary\"\n size=\"small\"\n [class.disabled]=\"\n enableEditableDates\n ? editableForm.invalid\n : !(calendar.selectedDates?.start && calendar.selectedDates?.end)\n \"\n (clicked)=\"\n enableEditableDates && commitEditableDates(calendar);\n updateCustomRange(dateInput, calendar.selectedDates)\n \"\n >\n Aplicar \n </acp-button>\n <acp-button\n type=\"button\"\n appearance=\"text\"\n color=\"error\"\n size=\"small\"\n (clicked)=\"isCustomRange = false\"\n >Cancelar</acp-button\n >\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n</div>\n\n<ng-template\n #dateOptionList\n let-options\n let-input=\"dateInput\"\n let-optionId=\"optionId\"\n let-className=\"className\"\n>\n <mat-action-list [ngClass]=\"className\" [id]=\"optionId\">\n @for (option of options; track option.optionLabel) {\n <mat-list-item [activated]=\"option.isSelected\" (click)=\"updateSelection(option, input)\">\n {{ option.optionLabel }}\n </mat-list-item>\n }\n </mat-action-list>\n</ng-template>\n", styles: ["mat-list-item.mat-mdc-list-item{height:40px}mat-list-item.mdc-list-item--activated{background-color:var(--ndp-selected-option-bg, var(--mat-sys-secondary-container, rgba(0, 0, 0, .08)))}::ng-deep .cdk-overlay-pane:has(.custom-ckd-container),::ng-deep .cdk-overlay-pane:has(.ndp-cdk-container){width:100%;background-color:var(--mat-sys-surface-container);max-height:100vh;overflow-y:auto;overflow-x:hidden;max-width:700px;margin-top:0;border:1px solid var(--mat-sys-surface-container)}::ng-deep .cdk-overlay-pane:has(.range-input){max-width:250px}.br-top{border-top:1px solid var(--mat-sys-surface-container)}.br-right{border-right:1px solid var(--mat-sys-surface-container)}.disabled{pointer-events:none;opacity:.5}.mat-button,.mdc-button{font-family:var(--mat-list-list-item-label-text-font);line-height:var(--mat-list-list-item-label-text-line-height);font-size:var(--mat-list-list-item-label-text-size);font-weight:var(--mat-list-list-item-label-text-weight);letter-spacing:var(--mat-list-list-item-label-text-tracking)}.w-full{width:100%}.display-hidden{display:none}.custom-calendar-container,.ndp-calendar-container{width:100%}.row-1,.row-2{width:100%;box-sizing:border-box}.row-1{display:flex;align-items:stretch}.row-2{padding:16px}.ndp-column-separator{flex:0 0 1px;background-color:var(--mat-sys-surface-container)}.footer-content,.ndp-footer-content{align-items:center;display:flex;text-align:right;justify-content:end;gap:16px;text-overflow:ellipsis}.footer-content .buttons,.ndp-footer-content .buttons{display:flex;gap:8px}.ndp-date-inputs{display:flex;gap:8px;margin-right:auto;align-items:flex-start}.ndp-date-field{width:150px}.column-1{flex:0 0 25%;overflow:auto}.column-2{flex:1 1 auto;min-width:0}.without-default-opt .column-1{display:none}@media(max-width:400px){.footer-content,.ndp-footer-content{display:block}.footer-content .buttons,.ndp-footer-content .buttons{justify-content:flex-end;margin-top:20px}#range-label-text{margin-right:1.5rem}}@media(max-width:650px){.row-1{flex-direction:column}.column-1{flex-basis:auto}.column-separator{display:none}}.pe-0{padding-right:0}.ps-0{padding-left:0}button.checked{color:var(--mat-sys-primary);border-radius:4px}.ndp-range-label-text{color:var(--mat-sys-on-surface)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i6.MatActionList, selector: "mat-action-list", exportAs: ["matActionList"] }, { kind: "component", type: i6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AcpDateRangeCalendar, selector: "acp-date-range-calendar", inputs: ["minDate", "maxDate", "selectedDates"], outputs: ["selectedDatesChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AcpButton, selector: "acp-button" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9531
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpDateRangeInput, isStandalone: true, selector: "acp-date-range-input", inputs: { inputLabel: { classPropertyName: "inputLabel", publicName: "inputLabel", isSignal: false, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showRangeRequired: { classPropertyName: "showRangeRequired", publicName: "showRangeRequired", isSignal: true, isRequired: false, transformFunction: null }, isRangeRequired: { classPropertyName: "isRangeRequired", publicName: "isRangeRequired", isSignal: true, isRequired: false, transformFunction: null }, staticOptionId: { classPropertyName: "staticOptionId", publicName: "staticOptionId", isSignal: false, isRequired: false, transformFunction: null }, dynamicOptionId: { classPropertyName: "dynamicOptionId", publicName: "dynamicOptionId", isSignal: false, isRequired: false, transformFunction: null }, calendarId: { classPropertyName: "calendarId", publicName: "calendarId", isSignal: false, isRequired: false, transformFunction: null }, enableDefaultOptions: { classPropertyName: "enableDefaultOptions", publicName: "enableDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: false, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: false, isRequired: false, transformFunction: null }, isShowStaticDefaultOptions: { classPropertyName: "isShowStaticDefaultOptions", publicName: "isShowStaticDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, hideDefaultOptions: { classPropertyName: "hideDefaultOptions", publicName: "hideDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayOffsetX: { classPropertyName: "cdkConnectedOverlayOffsetX", publicName: "cdkConnectedOverlayOffsetX", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayOffsetY: { classPropertyName: "cdkConnectedOverlayOffsetY", publicName: "cdkConnectedOverlayOffsetY", isSignal: false, isRequired: false, transformFunction: null }, listCdkConnectedOverlayOffsetY: { classPropertyName: "listCdkConnectedOverlayOffsetY", publicName: "listCdkConnectedOverlayOffsetY", isSignal: false, isRequired: false, transformFunction: null }, listCdkConnectedOverlayOffsetX: { classPropertyName: "listCdkConnectedOverlayOffsetX", publicName: "listCdkConnectedOverlayOffsetX", isSignal: false, isRequired: false, transformFunction: null }, selectedOptionIndex: { classPropertyName: "selectedOptionIndex", publicName: "selectedOptionIndex", isSignal: false, isRequired: false, transformFunction: null }, displaySelectedLabel: { classPropertyName: "displaySelectedLabel", publicName: "displaySelectedLabel", isSignal: false, isRequired: false, transformFunction: null }, displaySelectedExpression: { classPropertyName: "displaySelectedExpression", publicName: "displaySelectedExpression", isSignal: false, isRequired: false, transformFunction: null }, enableEditableDates: { classPropertyName: "enableEditableDates", publicName: "enableEditableDates", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayPush: { classPropertyName: "cdkConnectedOverlayPush", publicName: "cdkConnectedOverlayPush", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayPositions: { classPropertyName: "cdkConnectedOverlayPositions", publicName: "cdkConnectedOverlayPositions", isSignal: false, isRequired: false, transformFunction: null }, allowSingleDateSelection: { classPropertyName: "allowSingleDateSelection", publicName: "allowSingleDateSelection", isSignal: false, isRequired: false, transformFunction: null }, autoSelectOption: { classPropertyName: "autoSelectOption", publicName: "autoSelectOption", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, dateDropDownOptions: { classPropertyName: "dateDropDownOptions", publicName: "dateDropDownOptions", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dateSelectionChanged: "dateSelectionChanged", dateListOptions: "dateListOptions", rangeRequiredChange: "rangeRequiredChange" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "<!--\n AcpDateRangeInput Component Template\n @author AcontPlus S.A.S\n @version 1.0.0\n\n Comprehensive date range picker with predefined options, custom calendar selection,\n and support for human-readable date expressions.\n-->\n<div class=\"date-picker-main ndp-main\" cdkOverlayOrigin #trigger>\n <mat-form-field\n class=\"w-full\"\n [class]=\"{ 'display-hidden': isShowStaticDefaultOptions }\"\n (click)=\"toggleDateOptionSelectionList($event)\"\n >\n <mat-label (click)=\"toggleDateOptionSelectionList($event)\">{{ inputLabel }}</mat-label>\n <input\n matInput\n #dateInput\n class=\"cursor-pointer\"\n id=\"date-input-field\"\n (input)=\"onMainInputChange(dateInput)\"\n />\n <ng-container matSuffix>\n @if (showClearButton() && !!dateInput.value) {\n <button\n mat-icon-button\n class=\"cursor-pointer pe-0 ps-0\"\n matTooltip=\"Clear\"\n (click)=\"clearSelection($event)\"\n >\n <mat-icon>clear</mat-icon>\n </button>\n } @if (showCalendarIcon()) {\n <button mat-icon-button class=\"cursor-pointer\">\n <mat-icon>date_range</mat-icon>\n </button>\n } @if (showRangeRequired()) {\n <button\n mat-icon-button\n class=\"cursor-pointer\"\n [class.checked]=\"isRangeRequired()\"\n (click)=\"toggleRangeSelection($event)\"\n matTooltip=\"Rango de fechas obligatorio\"\n >\n <mat-icon [color]=\"isRangeRequired() ? 'accent' : ''\">\n {{ isRangeRequired() ? 'check_box' : 'check_box_outline_blank' }}\n </mat-icon>\n </button>\n }\n </ng-container>\n </mat-form-field>\n\n @if (dateDropDownOptions.length && isShowStaticDefaultOptions) {\n <ng-container\n *ngTemplateOutlet=\"\n dateOptionList;\n context: {\n $implicit: visibleOptions(),\n dateInput: dateInput,\n optionId: staticOptionId,\n className: 'w-full custom-ckd-container ndp-cdk-container range-input',\n }\n \"\n />\n }\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isDateOptionList\"\n [cdkConnectedOverlayPush]=\"cdkConnectedOverlayPush\"\n [cdkConnectedOverlayOffsetX]=\"listCdkConnectedOverlayOffsetX\"\n [cdkConnectedOverlayOffsetY]=\"listCdkConnectedOverlayOffsetY\"\n (backdropClick)=\"isDateOptionList = false\"\n >\n @if (dateDropDownOptions.length && !isShowStaticDefaultOptions) {\n <ng-container\n *ngTemplateOutlet=\"\n dateOptionList;\n context: {\n $implicit: visibleOptions(),\n dateInput: dateInput,\n optionId: dynamicOptionId,\n className: 'w-full custom-ckd-container ndp-cdk-container range-input',\n }\n \"\n />\n }\n </ng-template>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isCustomRange\"\n [cdkConnectedOverlayPush]=\"cdkConnectedOverlayPush\"\n [cdkConnectedOverlayPositions]=\"cdkConnectedOverlayPositions\"\n [cdkConnectedOverlayOffsetX]=\"cdkConnectedOverlayOffsetX\"\n [cdkConnectedOverlayOffsetY]=\"cdkConnectedOverlayOffsetY\"\n (backdropClick)=\"isCustomRange = false\"\n >\n <div\n class=\"custom-ckd-container ndp-cdk-container custom-calendar-container ndp-calendar-container\"\n [class]=\"{ 'without-default-opt': hideDefaultOptions }\"\n >\n <div class=\"row-1\">\n @if (!hideDefaultOptions) {\n <div class=\"pt-custom column-1\">\n <ng-container\n *ngTemplateOutlet=\"\n dateOptionList;\n context: {\n $implicit: visibleOptions(),\n dateInput: dateInput,\n }\n \"\n />\n </div>\n <div class=\"ndp-column-separator\"></div>\n }\n <div class=\"mt-2 column-2\">\n <acp-date-range-calendar\n [selectedDates]=\"selectedDates\"\n #calendar\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n (selectedDatesChange)=\"onCalendarSelectionChange($event)\"\n />\n </div>\n </div>\n <div class=\"row-2 br-top\">\n <div class=\"footer-content ndp-footer-content\">\n @if (enableEditableDates) {\n <form class=\"ndp-date-inputs\" [formGroup]=\"editableForm\">\n <mat-form-field class=\"ndp-date-field\" subscriptSizing=\"dynamic\">\n <mat-label>Start</mat-label>\n <input\n matInput\n formControlName=\"start\"\n placeholder=\"e.g. now-7d\"\n (blur)=\"commitEditableDates(calendar)\"\n (keydown.enter)=\"applyEditableDates(dateInput, calendar)\"\n />\n @if (editableForm.controls.start.hasError('required')) {\n <mat-error>Required</mat-error>\n } @else if (editableForm.controls.start.hasError('invalidDate')) {\n <mat-error>Invalid date or expression</mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"ndp-date-field\" subscriptSizing=\"dynamic\">\n <mat-label>End</mat-label>\n <input\n matInput\n formControlName=\"end\"\n placeholder=\"e.g. now\"\n (blur)=\"commitEditableDates(calendar)\"\n (keydown.enter)=\"applyEditableDates(dateInput, calendar)\"\n />\n @if (editableForm.controls.end.hasError('required')) {\n <mat-error>Required</mat-error>\n } @else if (editableForm.controls.end.hasError('invalidDate')) {\n <mat-error>Invalid date or expression</mat-error>\n } @else if (editableForm.hasError('rangeOrder')) {\n <mat-error>Start must be before end</mat-error>\n }\n </mat-form-field>\n </form>\n } @else {\n <span id=\"range-label-text\" class=\"ndp-range-label-text\">\n {{ calendar.selectedDates?.start | date: dateFormat }} @if (calendar.selectedDates?.end)\n {\n <span> - {{ calendar.selectedDates?.end | date: dateFormat }} </span>\n }\n </span>\n }\n <div class=\"buttons\">\n <acp-button\n type=\"button\"\n appearance=\"filled\"\n color=\"primary\"\n size=\"small\"\n [class.disabled]=\"\n enableEditableDates\n ? editableForm.invalid\n : !(calendar.selectedDates?.start && calendar.selectedDates?.end)\n \"\n (clicked)=\"\n enableEditableDates && commitEditableDates(calendar);\n updateCustomRange(dateInput, calendar.selectedDates)\n \"\n >\n Aplicar \n </acp-button>\n <acp-button\n type=\"button\"\n appearance=\"text\"\n color=\"error\"\n size=\"small\"\n (clicked)=\"isCustomRange = false\"\n >Cancelar</acp-button\n >\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n</div>\n\n<ng-template\n #dateOptionList\n let-options\n let-input=\"dateInput\"\n let-optionId=\"optionId\"\n let-className=\"className\"\n>\n <mat-action-list [ngClass]=\"className\" [id]=\"optionId\">\n @for (option of options; track option.optionLabel) {\n <mat-list-item [activated]=\"option.isSelected\" (click)=\"updateSelection(option, input)\">\n {{ option.optionLabel }}\n </mat-list-item>\n }\n </mat-action-list>\n</ng-template>\n", styles: ["mat-list-item.mat-mdc-list-item{height:40px}mat-list-item.mdc-list-item--activated{background-color:var(--ndp-selected-option-bg, var(--mat-sys-secondary-container, rgba(0, 0, 0, .08)))}::ng-deep .cdk-overlay-pane:has(.custom-ckd-container),::ng-deep .cdk-overlay-pane:has(.ndp-cdk-container){width:100%;background-color:var(--mat-sys-surface-container);max-height:100vh;overflow-y:auto;overflow-x:hidden;max-width:700px;margin-top:0;border:1px solid var(--mat-sys-surface-container)}::ng-deep .cdk-overlay-pane:has(.range-input){max-width:250px}.br-top{border-top:1px solid var(--mat-sys-surface-container)}.br-right{border-right:1px solid var(--mat-sys-surface-container)}.disabled{pointer-events:none;opacity:.5}.mat-button,.mdc-button{font-family:var(--mat-list-list-item-label-text-font);line-height:var(--mat-list-list-item-label-text-line-height);font-size:var(--mat-list-list-item-label-text-size);font-weight:var(--mat-list-list-item-label-text-weight);letter-spacing:var(--mat-list-list-item-label-text-tracking)}.w-full{width:100%}.display-hidden{display:none}.custom-calendar-container,.ndp-calendar-container{width:100%}.row-1,.row-2{width:100%;box-sizing:border-box}.row-1{display:flex;align-items:stretch}.row-2{padding:16px}.ndp-column-separator{flex:0 0 1px;background-color:var(--mat-sys-surface-container)}.footer-content,.ndp-footer-content{align-items:center;display:flex;text-align:right;justify-content:end;gap:16px;text-overflow:ellipsis}.footer-content .buttons,.ndp-footer-content .buttons{display:flex;gap:8px}.ndp-date-inputs{display:flex;gap:8px;margin-right:auto;align-items:flex-start}.ndp-date-field{width:150px}.column-1{flex:0 0 25%;overflow:auto}.column-2{flex:1 1 auto;min-width:0}.without-default-opt .column-1{display:none}@media(max-width:400px){.footer-content,.ndp-footer-content{display:block}.footer-content .buttons,.ndp-footer-content .buttons{justify-content:flex-end;margin-top:20px}#range-label-text{margin-right:1.5rem}}@media(max-width:650px){.row-1{flex-direction:column}.column-1{flex-basis:auto}.column-separator{display:none}}.pe-0{padding-right:0}.ps-0{padding-left:0}button.checked{color:var(--mat-sys-primary);border-radius:4px}.ndp-range-label-text{color:var(--mat-sys-on-surface)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i4.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i4.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i7.MatActionList, selector: "mat-action-list", exportAs: ["matActionList"] }, { kind: "component", type: i7.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AcpDateRangeCalendar, selector: "acp-date-range-calendar", inputs: ["minDate", "maxDate", "selectedDates"], outputs: ["selectedDatesChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AcpButton, selector: "acp-button" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9279
9532
|
}
|
|
9280
9533
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDateRangeInput, decorators: [{
|
|
9281
9534
|
type: Component,
|
|
@@ -9585,7 +9838,7 @@ class AcpCheckboxGroup {
|
|
|
9585
9838
|
useExisting: forwardRef(() => AcpCheckboxGroup),
|
|
9586
9839
|
multi: true,
|
|
9587
9840
|
},
|
|
9588
|
-
], 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$
|
|
9841
|
+
], 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 });
|
|
9589
9842
|
}
|
|
9590
9843
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCheckboxGroup, decorators: [{
|
|
9591
9844
|
type: Component,
|
|
@@ -9617,170 +9870,314 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
9617
9870
|
args: [{ transform: booleanAttribute }]
|
|
9618
9871
|
}], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
|
|
9619
9872
|
|
|
9873
|
+
/**
|
|
9874
|
+
* Defaults for every `acp-card` in the injector tree. Mirrors `MAT_CARD_CONFIG`.
|
|
9875
|
+
* Can also be provided at component level: `providers: [{ provide: ACP_CARD_DEFAULT_OPTIONS, useValue }]`.
|
|
9876
|
+
*/
|
|
9877
|
+
const ACP_CARD_DEFAULT_OPTIONS = new InjectionToken('ACP_CARD_DEFAULT_OPTIONS');
|
|
9878
|
+
/**
|
|
9879
|
+
* Registers application-wide card defaults, e.g.:
|
|
9880
|
+
* `provideAcpCardDefaults({ appearance: 'outlined', rounded: 16 })`.
|
|
9881
|
+
*/
|
|
9882
|
+
function provideAcpCardDefaults(defaults) {
|
|
9883
|
+
return makeEnvironmentProviders([{ provide: ACP_CARD_DEFAULT_OPTIONS, useValue: defaults }]);
|
|
9884
|
+
}
|
|
9885
|
+
|
|
9886
|
+
/**
|
|
9887
|
+
* Typed slot directives for `acp-card`. Preferred over `#title`-style template refs:
|
|
9888
|
+
* they are type-checked, discoverable and never collide with refs of nested components.
|
|
9889
|
+
*
|
|
9890
|
+
* @example
|
|
9891
|
+
* ```html
|
|
9892
|
+
* <acp-card>
|
|
9893
|
+
* <ng-template acpCardTitle>Order #123</ng-template>
|
|
9894
|
+
* <p>Body</p>
|
|
9895
|
+
* <ng-template acpCardActions><acp-button text="Open" /></ng-template>
|
|
9896
|
+
* </acp-card>
|
|
9897
|
+
* ```
|
|
9898
|
+
*/
|
|
9899
|
+
class AcpCardHeader {
|
|
9900
|
+
templateRef = inject(TemplateRef);
|
|
9901
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
9902
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AcpCardHeader, isStandalone: true, selector: "ng-template[acpCardHeader]", ngImport: i0 });
|
|
9903
|
+
}
|
|
9904
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardHeader, decorators: [{
|
|
9905
|
+
type: Directive,
|
|
9906
|
+
args: [{ selector: 'ng-template[acpCardHeader]' }]
|
|
9907
|
+
}] });
|
|
9908
|
+
class AcpCardMedia {
|
|
9909
|
+
templateRef = inject(TemplateRef);
|
|
9910
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardMedia, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
9911
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AcpCardMedia, isStandalone: true, selector: "ng-template[acpCardMedia]", ngImport: i0 });
|
|
9912
|
+
}
|
|
9913
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardMedia, decorators: [{
|
|
9914
|
+
type: Directive,
|
|
9915
|
+
args: [{ selector: 'ng-template[acpCardMedia]' }]
|
|
9916
|
+
}] });
|
|
9917
|
+
class AcpCardAvatar {
|
|
9918
|
+
templateRef = inject(TemplateRef);
|
|
9919
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
9920
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AcpCardAvatar, isStandalone: true, selector: "ng-template[acpCardAvatar]", ngImport: i0 });
|
|
9921
|
+
}
|
|
9922
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardAvatar, decorators: [{
|
|
9923
|
+
type: Directive,
|
|
9924
|
+
args: [{ selector: 'ng-template[acpCardAvatar]' }]
|
|
9925
|
+
}] });
|
|
9926
|
+
class AcpCardTitle {
|
|
9927
|
+
templateRef = inject(TemplateRef);
|
|
9928
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
9929
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AcpCardTitle, isStandalone: true, selector: "ng-template[acpCardTitle]", ngImport: i0 });
|
|
9930
|
+
}
|
|
9931
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardTitle, decorators: [{
|
|
9932
|
+
type: Directive,
|
|
9933
|
+
args: [{ selector: 'ng-template[acpCardTitle]' }]
|
|
9934
|
+
}] });
|
|
9935
|
+
class AcpCardSubtitle {
|
|
9936
|
+
templateRef = inject(TemplateRef);
|
|
9937
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardSubtitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
9938
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AcpCardSubtitle, isStandalone: true, selector: "ng-template[acpCardSubtitle]", ngImport: i0 });
|
|
9939
|
+
}
|
|
9940
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardSubtitle, decorators: [{
|
|
9941
|
+
type: Directive,
|
|
9942
|
+
args: [{ selector: 'ng-template[acpCardSubtitle]' }]
|
|
9943
|
+
}] });
|
|
9944
|
+
class AcpCardActions {
|
|
9945
|
+
templateRef = inject(TemplateRef);
|
|
9946
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
9947
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AcpCardActions, isStandalone: true, selector: "ng-template[acpCardActions]", ngImport: i0 });
|
|
9948
|
+
}
|
|
9949
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardActions, decorators: [{
|
|
9950
|
+
type: Directive,
|
|
9951
|
+
args: [{ selector: 'ng-template[acpCardActions]' }]
|
|
9952
|
+
}] });
|
|
9953
|
+
class AcpCardFooter {
|
|
9954
|
+
templateRef = inject(TemplateRef);
|
|
9955
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
9956
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AcpCardFooter, isStandalone: true, selector: "ng-template[acpCardFooter]", ngImport: i0 });
|
|
9957
|
+
}
|
|
9958
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardFooter, decorators: [{
|
|
9959
|
+
type: Directive,
|
|
9960
|
+
args: [{ selector: 'ng-template[acpCardFooter]' }]
|
|
9961
|
+
}] });
|
|
9962
|
+
const ACP_CARD_SLOTS = [
|
|
9963
|
+
AcpCardHeader,
|
|
9964
|
+
AcpCardMedia,
|
|
9965
|
+
AcpCardAvatar,
|
|
9966
|
+
AcpCardTitle,
|
|
9967
|
+
AcpCardSubtitle,
|
|
9968
|
+
AcpCardActions,
|
|
9969
|
+
AcpCardFooter,
|
|
9970
|
+
];
|
|
9971
|
+
|
|
9972
|
+
const optionalBoolean = (value) => value == null ? undefined : booleanAttribute(value);
|
|
9620
9973
|
class AcpCard {
|
|
9621
|
-
|
|
9622
|
-
|
|
9623
|
-
|
|
9624
|
-
|
|
9625
|
-
|
|
9626
|
-
...(ngDevMode ? [{ debugName: "
|
|
9627
|
-
//
|
|
9628
|
-
|
|
9629
|
-
...(ngDevMode ? [{ debugName: "
|
|
9630
|
-
|
|
9631
|
-
|
|
9632
|
-
|
|
9974
|
+
defaults = inject(ACP_CARD_DEFAULT_OPTIONS, { optional: true }) ?? {};
|
|
9975
|
+
// Content shortcuts (use the slot directives for rich content)
|
|
9976
|
+
title = input(/* @ts-ignore */
|
|
9977
|
+
...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
9978
|
+
subtitle = input(/* @ts-ignore */
|
|
9979
|
+
...(ngDevMode ? [undefined, { debugName: "subtitle" }] : /* istanbul ignore next */ []));
|
|
9980
|
+
// Appearance
|
|
9981
|
+
appearance = input(/* @ts-ignore */
|
|
9982
|
+
...(ngDevMode ? [undefined, { debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
9983
|
+
color = input(/* @ts-ignore */
|
|
9984
|
+
...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
|
|
9985
|
+
elevation = input(/* @ts-ignore */
|
|
9986
|
+
...(ngDevMode ? [undefined, { debugName: "elevation" }] : /* istanbul ignore next */ []));
|
|
9987
|
+
/** `true` = theme radius, `false` = square, number = radius in px. */
|
|
9988
|
+
rounded = input(/* @ts-ignore */
|
|
9989
|
+
...(ngDevMode ? [undefined, { debugName: "rounded" }] : /* istanbul ignore next */ []));
|
|
9990
|
+
padding = input(/* @ts-ignore */
|
|
9991
|
+
...(ngDevMode ? [undefined, { debugName: "padding" }] : /* istanbul ignore next */ []));
|
|
9992
|
+
hoverable = input(undefined, { ...(ngDevMode ? { debugName: "hoverable" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
|
|
9993
|
+
actionsAlign = input(/* @ts-ignore */
|
|
9994
|
+
...(ngDevMode ? [undefined, { debugName: "actionsAlign" }] : /* istanbul ignore next */ []));
|
|
9995
|
+
/** Aspect ratio applied to the media slot. Media keeps its natural size when unset. */
|
|
9996
|
+
imageRatio = input(/* @ts-ignore */
|
|
9997
|
+
...(ngDevMode ? [undefined, { debugName: "imageRatio" }] : /* istanbul ignore next */ []));
|
|
9998
|
+
// State
|
|
9633
9999
|
clickable = input(false, { ...(ngDevMode ? { debugName: "clickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
9634
|
-
// Outlined style
|
|
9635
|
-
outlined = input(false, { ...(ngDevMode ? { debugName: "outlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
9636
|
-
// Disabled state
|
|
9637
10000
|
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
9638
|
-
|
|
9639
|
-
|
|
9640
|
-
...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
|
|
9641
|
-
// Image aspect ratio
|
|
9642
|
-
imageRatio = input('16:9', /* @ts-ignore */
|
|
9643
|
-
...(ngDevMode ? [{ debugName: "imageRatio" }] : /* istanbul ignore next */ []));
|
|
9644
|
-
// Full height
|
|
10001
|
+
loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
10002
|
+
// Layout
|
|
9645
10003
|
fullHeight = input(false, { ...(ngDevMode ? { debugName: "fullHeight" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
9646
|
-
// Full width
|
|
9647
10004
|
fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
9648
|
-
|
|
9649
|
-
|
|
9650
|
-
...(ngDevMode ? [{ debugName: "backgroundColor" }] : /* istanbul ignore next */ []));
|
|
9651
|
-
// Pass Through options for styling customization
|
|
10005
|
+
ariaLabel = input(/* @ts-ignore */
|
|
10006
|
+
...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
9652
10007
|
passThrough = input({}, /* @ts-ignore */
|
|
9653
10008
|
...(ngDevMode ? [{ debugName: "passThrough" }] : /* istanbul ignore next */ []));
|
|
9654
|
-
|
|
9655
|
-
|
|
9656
|
-
|
|
9657
|
-
|
|
9658
|
-
|
|
9659
|
-
|
|
9660
|
-
|
|
9661
|
-
|
|
9662
|
-
|
|
9663
|
-
|
|
9664
|
-
}
|
|
9665
|
-
|
|
9666
|
-
|
|
10009
|
+
/** Emitted on click, Enter or Space when `clickable` and not disabled/loading. */
|
|
10010
|
+
clicked = output();
|
|
10011
|
+
// Slots: directive (`<ng-template acpCardTitle>`) first, legacy `#title` ref as fallback
|
|
10012
|
+
headerDir = contentChild(AcpCardHeader, { ...(ngDevMode ? { debugName: "headerDir" } : /* istanbul ignore next */ {}), descendants: false });
|
|
10013
|
+
mediaDir = contentChild(AcpCardMedia, { ...(ngDevMode ? { debugName: "mediaDir" } : /* istanbul ignore next */ {}), descendants: false });
|
|
10014
|
+
avatarDir = contentChild(AcpCardAvatar, { ...(ngDevMode ? { debugName: "avatarDir" } : /* istanbul ignore next */ {}), descendants: false });
|
|
10015
|
+
titleDir = contentChild(AcpCardTitle, { ...(ngDevMode ? { debugName: "titleDir" } : /* istanbul ignore next */ {}), descendants: false });
|
|
10016
|
+
subtitleDir = contentChild(AcpCardSubtitle, { ...(ngDevMode ? { debugName: "subtitleDir" } : /* istanbul ignore next */ {}), descendants: false });
|
|
10017
|
+
actionsDir = contentChild(AcpCardActions, { ...(ngDevMode ? { debugName: "actionsDir" } : /* istanbul ignore next */ {}), descendants: false });
|
|
10018
|
+
footerDir = contentChild(AcpCardFooter, { ...(ngDevMode ? { debugName: "footerDir" } : /* istanbul ignore next */ {}), descendants: false });
|
|
10019
|
+
headerRef = contentChild('header', { ...(ngDevMode ? { debugName: "headerRef" } : /* istanbul ignore next */ {}), read: TemplateRef, descendants: false });
|
|
10020
|
+
mediaRef = contentChild('media', { ...(ngDevMode ? { debugName: "mediaRef" } : /* istanbul ignore next */ {}), read: TemplateRef, descendants: false });
|
|
10021
|
+
avatarRef = contentChild('avatar', { ...(ngDevMode ? { debugName: "avatarRef" } : /* istanbul ignore next */ {}), read: TemplateRef, descendants: false });
|
|
10022
|
+
titleRef = contentChild('title', { ...(ngDevMode ? { debugName: "titleRef" } : /* istanbul ignore next */ {}), read: TemplateRef, descendants: false });
|
|
10023
|
+
subtitleRef = contentChild('subtitle', { ...(ngDevMode ? { debugName: "subtitleRef" } : /* istanbul ignore next */ {}), read: TemplateRef,
|
|
10024
|
+
descendants: false });
|
|
10025
|
+
actionsRef = contentChild('actions', { ...(ngDevMode ? { debugName: "actionsRef" } : /* istanbul ignore next */ {}), read: TemplateRef, descendants: false });
|
|
10026
|
+
footerRef = contentChild('footer', { ...(ngDevMode ? { debugName: "footerRef" } : /* istanbul ignore next */ {}), read: TemplateRef, descendants: false });
|
|
10027
|
+
headerTpl = computed(() => this.headerDir()?.templateRef ?? this.headerRef(), /* @ts-ignore */
|
|
10028
|
+
...(ngDevMode ? [{ debugName: "headerTpl" }] : /* istanbul ignore next */ []));
|
|
10029
|
+
mediaTpl = computed(() => this.mediaDir()?.templateRef ?? this.mediaRef(), /* @ts-ignore */
|
|
10030
|
+
...(ngDevMode ? [{ debugName: "mediaTpl" }] : /* istanbul ignore next */ []));
|
|
10031
|
+
avatarTpl = computed(() => this.avatarDir()?.templateRef ?? this.avatarRef(), /* @ts-ignore */
|
|
10032
|
+
...(ngDevMode ? [{ debugName: "avatarTpl" }] : /* istanbul ignore next */ []));
|
|
10033
|
+
titleTpl = computed(() => this.titleDir()?.templateRef ?? this.titleRef(), /* @ts-ignore */
|
|
10034
|
+
...(ngDevMode ? [{ debugName: "titleTpl" }] : /* istanbul ignore next */ []));
|
|
10035
|
+
subtitleTpl = computed(() => this.subtitleDir()?.templateRef ?? this.subtitleRef(), /* @ts-ignore */
|
|
10036
|
+
...(ngDevMode ? [{ debugName: "subtitleTpl" }] : /* istanbul ignore next */ []));
|
|
10037
|
+
actionsTpl = computed(() => this.actionsDir()?.templateRef ?? this.actionsRef(), /* @ts-ignore */
|
|
10038
|
+
...(ngDevMode ? [{ debugName: "actionsTpl" }] : /* istanbul ignore next */ []));
|
|
10039
|
+
footerTpl = computed(() => this.footerDir()?.templateRef ?? this.footerRef(), /* @ts-ignore */
|
|
10040
|
+
...(ngDevMode ? [{ debugName: "footerTpl" }] : /* istanbul ignore next */ []));
|
|
10041
|
+
hasTitleGroup = computed(() => !!(this.avatarTpl() ||
|
|
10042
|
+
this.titleTpl() ||
|
|
10043
|
+
this.subtitleTpl() ||
|
|
10044
|
+
this.title() ||
|
|
10045
|
+
this.subtitle()), /* @ts-ignore */
|
|
10046
|
+
...(ngDevMode ? [{ debugName: "hasTitleGroup" }] : /* istanbul ignore next */ []));
|
|
10047
|
+
resolvedAppearance = computed(() => this.appearance() ?? this.defaults.appearance ?? 'elevated', /* @ts-ignore */
|
|
10048
|
+
...(ngDevMode ? [{ debugName: "resolvedAppearance" }] : /* istanbul ignore next */ []));
|
|
10049
|
+
matAppearance = computed(() => {
|
|
10050
|
+
const appearance = this.resolvedAppearance();
|
|
10051
|
+
return appearance === 'elevated' ? 'raised' : appearance;
|
|
10052
|
+
}, /* @ts-ignore */
|
|
10053
|
+
...(ngDevMode ? [{ debugName: "matAppearance" }] : /* istanbul ignore next */ []));
|
|
10054
|
+
resolvedPadding = computed(() => this.padding() ?? this.defaults.padding ?? 'medium', /* @ts-ignore */
|
|
10055
|
+
...(ngDevMode ? [{ debugName: "resolvedPadding" }] : /* istanbul ignore next */ []));
|
|
10056
|
+
resolvedColor = computed(() => this.color() ?? this.defaults.color, /* @ts-ignore */
|
|
10057
|
+
...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
|
|
10058
|
+
resolvedHoverable = computed(() => this.hoverable() ?? this.defaults.hoverable ?? false, /* @ts-ignore */
|
|
10059
|
+
...(ngDevMode ? [{ debugName: "resolvedHoverable" }] : /* istanbul ignore next */ []));
|
|
10060
|
+
resolvedActionsAlign = computed(() => this.actionsAlign() ?? this.defaults.actionsAlign ?? 'start', /* @ts-ignore */
|
|
10061
|
+
...(ngDevMode ? [{ debugName: "resolvedActionsAlign" }] : /* istanbul ignore next */ []));
|
|
10062
|
+
mediaRatio = computed(() => (this.imageRatio() ?? this.defaults.imageRatio)?.replace(':', ' / '), /* @ts-ignore */
|
|
10063
|
+
...(ngDevMode ? [{ debugName: "mediaRatio" }] : /* istanbul ignore next */ []));
|
|
10064
|
+
interactive = computed(() => this.clickable() && !this.disabled() && !this.loading(), /* @ts-ignore */
|
|
10065
|
+
...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
|
|
10066
|
+
shape = computed(() => {
|
|
10067
|
+
const rounded = this.rounded() ?? this.defaults.rounded ?? true;
|
|
10068
|
+
if (rounded === true)
|
|
10069
|
+
return null;
|
|
10070
|
+
return rounded === false ? '0px' : `${rounded}px`;
|
|
10071
|
+
}, /* @ts-ignore */
|
|
10072
|
+
...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
|
|
10073
|
+
elevationShadow = computed(() => {
|
|
10074
|
+
const level = this.elevation() ?? this.defaults.elevation;
|
|
10075
|
+
if (level === undefined)
|
|
10076
|
+
return null;
|
|
10077
|
+
return level === 0 ? 'none' : `var(--mat-sys-level${level})`;
|
|
10078
|
+
}, /* @ts-ignore */
|
|
10079
|
+
...(ngDevMode ? [{ debugName: "elevationShadow" }] : /* istanbul ignore next */ []));
|
|
10080
|
+
hostClasses = computed(() => {
|
|
10081
|
+
const classes = [
|
|
10082
|
+
'acp-card-wrapper',
|
|
10083
|
+
`acp-card--${this.resolvedAppearance()}`,
|
|
10084
|
+
`acp-card--padding-${this.resolvedPadding()}`,
|
|
10085
|
+
];
|
|
10086
|
+
const color = this.resolvedColor();
|
|
10087
|
+
if (color)
|
|
10088
|
+
classes.push(`acp-card--${color}`);
|
|
10089
|
+
if (this.resolvedHoverable())
|
|
10090
|
+
classes.push('acp-card--hover');
|
|
10091
|
+
if (this.clickable())
|
|
10092
|
+
classes.push('acp-card--clickable');
|
|
10093
|
+
if (this.disabled())
|
|
10094
|
+
classes.push('acp-card--disabled');
|
|
10095
|
+
if (this.loading())
|
|
10096
|
+
classes.push('acp-card--loading');
|
|
10097
|
+
if (this.fullHeight())
|
|
10098
|
+
classes.push('acp-card--full-height');
|
|
10099
|
+
if (this.fullWidth())
|
|
10100
|
+
classes.push('acp-card--full-width');
|
|
10101
|
+
return classes.join(' ');
|
|
10102
|
+
}, /* @ts-ignore */
|
|
10103
|
+
...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
10104
|
+
onActivate(event) {
|
|
10105
|
+
if (!this.interactive())
|
|
10106
|
+
return;
|
|
10107
|
+
const host = event.currentTarget;
|
|
10108
|
+
const nested = event.target?.closest('.mat-mdc-card-actions, a, button, input, select, textarea');
|
|
10109
|
+
if (nested && nested !== host && host.contains(nested))
|
|
10110
|
+
return;
|
|
10111
|
+
this.clicked.emit(event);
|
|
9667
10112
|
}
|
|
9668
|
-
|
|
9669
|
-
|
|
10113
|
+
onKeyActivate(event) {
|
|
10114
|
+
if (!this.interactive() || event.target !== event.currentTarget)
|
|
10115
|
+
return;
|
|
10116
|
+
event.preventDefault();
|
|
10117
|
+
this.clicked.emit(event);
|
|
9670
10118
|
}
|
|
9671
10119
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9672
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpCard, isStandalone: true, selector: "acp-card", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, imageRatio: { classPropertyName: "imageRatio", publicName: "imageRatio", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, passThrough: { classPropertyName: "passThrough", publicName: "passThrough", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.acp-card--rounded": "rounded() === true", "class.acp-card--rounded-4": "rounded() === 4", "class.acp-card--rounded-8": "rounded() === 8", "class.acp-card--rounded-12": "rounded() === 12", "class.acp-card--rounded-16": "rounded() === 16", "class.acp-card--rounded-20": "rounded() === 20", "class.acp-card--rounded-24": "rounded() === 24", "class.acp-card--hover": "hover()", "class.acp-card--clickable": "clickable()", "class.acp-card--disabled": "disabled()", "class.acp-card--padding-small": "padding() === \"small\"", "class.acp-card--padding-medium": "padding() === \"medium\"", "class.acp-card--padding-large": "padding() === \"large\"", "class.acp-card--full-height": "fullHeight()", "class.acp-card--full-width": "fullWidth()", "attr.role": "this.role", "attr.tabindex": "this.tabindex", "attr.aria-disabled": "this.ariaDisabled" }, classAttribute: "acp-card-wrapper" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true, read: TemplateRef }, { propertyName: "mediaTemplate", first: true, predicate: ["media"], descendants: true, read: TemplateRef }, { propertyName: "avatarTemplate", first: true, predicate: ["avatar"], descendants: true, read: TemplateRef }, { propertyName: "titleTemplate", first: true, predicate: ["title"], descendants: true, read: TemplateRef }, { propertyName: "subtitleTemplate", first: true, predicate: ["subtitle"], descendants: true, read: TemplateRef }, { propertyName: "actionsTemplate", first: true, predicate: ["actions"], descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<mat-card\n class=\"acp-card\"\n [ngClass]=\"passThrough().root?.class\"\n [ngStyle]=\"passThrough().root?.style\"\n [class]=\"backgroundColor() ? 'acp-card--' + backgroundColor() : ''\"\n>\n @if (headerTemplate) {\n <mat-card-header [ngClass]=\"passThrough().header?.class\" [ngStyle]=\"passThrough().header?.style\">\n <ng-template [ngTemplateOutlet]=\"headerTemplate\" />\n </mat-card-header>\n } @if (mediaTemplate) {\n <ng-template [ngTemplateOutlet]=\"mediaTemplate\" />\n } @if (titleTemplate || subtitleTemplate || avatarTemplate) {\n <mat-card-header [ngClass]=\"passThrough().header?.class\" [ngStyle]=\"passThrough().header?.style\">\n @if (avatarTemplate) {\n <div\n mat-card-avatar\n [ngClass]=\"passThrough().avatar?.class\"\n [ngStyle]=\"passThrough().avatar?.style\"\n >\n <ng-template [ngTemplateOutlet]=\"avatarTemplate\" />\n </div>\n } @if (titleTemplate) {\n <mat-card-title [ngClass]=\"passThrough().title?.class\" [ngStyle]=\"passThrough().title?.style\">\n <ng-template [ngTemplateOutlet]=\"titleTemplate\" />\n </mat-card-title>\n } @if (subtitleTemplate) {\n <mat-card-subtitle\n [ngClass]=\"passThrough().subtitle?.class\"\n [ngStyle]=\"passThrough().subtitle?.style\"\n >\n <ng-template [ngTemplateOutlet]=\"subtitleTemplate\" />\n </mat-card-subtitle>\n }\n </mat-card-header>\n }\n\n <mat-card-content\n [ngClass]=\"passThrough().content?.class\"\n [ngStyle]=\"passThrough().content?.style\"\n >\n <ng-content />\n </mat-card-content>\n\n @if (actionsTemplate) {\n <mat-card-actions\n [ngClass]=\"passThrough().actions?.class\"\n [ngStyle]=\"passThrough().actions?.style\"\n >\n <ng-template [ngTemplateOutlet]=\"actionsTemplate\" />\n </mat-card-actions>\n } @if (footerTemplate) {\n <mat-card-footer [ngClass]=\"passThrough().footer?.class\" [ngStyle]=\"passThrough().footer?.style\">\n <ng-template [ngTemplateOutlet]=\"footerTemplate\" />\n </mat-card-footer>\n }\n</mat-card>\n", styles: [".acp-card{--mat-card-elevated-container-color: light-dark(#ffffff, #1a1b1f);--mat-card-outlined-container-color: light-dark(#ffffff, #1a1b1f);--mat-card-title-text-line-height: 1.6rem;--mat-card-title-text-weight: 500;--mat-card-subtitle-text-weight: 400;--mat-card-elevated-container-shape: var(--mat-sys-corner-small);--mat-card-outlined-container-shape: var(--mat-sys-corner-small);--mat-card-outlined-outline-color: var(--mat-sys-outline-variant);--mat-card-filled-container-color: var(--mat-sys-surface-container-highest);--mat-card-title-text-size: var(--mat-sys-title-large);--mat-card-subtitle-text-size: var(--mat-sys-body-medium);--mat-card-subtitle-text-color: var(--mat-sys-on-surface-variant);--mat-card-elevated-container-elevation: 0 4px 12px rgba(0, 0, 0, .08)}.acp-card-media{width:100%;object-fit:cover;border-radius:var(--mat-sys-corner-large) var(--mat-sys-corner-large) 0 0}.mat-mdc-card-footer{padding:16px}.mat-mdc-card-actions{gap:8px}.acp-card-wrapper{display:block;transition:box-shadow .2s ease-in-out}.acp-card-wrapper.acp-card--hover:hover{box-shadow:var(--mat-sys-level3)}.acp-card-wrapper.acp-card--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.acp-card-wrapper.acp-card--clickable:hover{box-shadow:var(--mat-sys-level2)}.acp-card-wrapper.acp-card--clickable:active{box-shadow:var(--mat-sys-level1)}.acp-card-wrapper.acp-card--disabled{opacity:.6;pointer-events:none}.acp-card-wrapper.acp-card--rounded-4 .acp-card,.acp-card-wrapper.acp-card--rounded-4 .acp-card-media{border-radius:4px}.acp-card-wrapper.acp-card--rounded-8 .acp-card,.acp-card-wrapper.acp-card--rounded-8 .acp-card-media{border-radius:8px}.acp-card-wrapper.acp-card--rounded-12 .acp-card,.acp-card-wrapper.acp-card--rounded-12 .acp-card-media{border-radius:12px}.acp-card-wrapper.acp-card--rounded-16 .acp-card,.acp-card-wrapper.acp-card--rounded-16 .acp-card-media{border-radius:16px}.acp-card-wrapper.acp-card--rounded-20 .acp-card,.acp-card-wrapper.acp-card--rounded-20 .acp-card-media{border-radius:20px}.acp-card-wrapper.acp-card--rounded-24 .acp-card,.acp-card-wrapper.acp-card--rounded-24 .acp-card-media{border-radius:24px}.acp-card-wrapper.acp-card--padding-small .mat-mdc-card-content{padding:12px}.acp-card-wrapper.acp-card--padding-medium .mat-mdc-card-content{padding:16px}.acp-card-wrapper.acp-card--padding-large .mat-mdc-card-content{padding:24px}.acp-card-wrapper.acp-card--full-height{height:100%}.acp-card-wrapper.acp-card--full-width{width:100%}.acp-card--primary{color:var(--mat-sys-on-primary);background-color:var(--mat-sys-primary)}.acp-card--primary-container{color:var(--mat-sys-on-primary-container);background-color:var(--mat-sys-primary-container)}.acp-card--secondary{color:var(--mat-sys-on-secondary);background-color:var(--mat-sys-secondary)}.acp-card--secondary-container{color:var(--mat-sys-on-secondary-container);background-color:var(--mat-sys-secondary-container)}.acp-card--error{color:var(--mat-sys-on-error);background-color:var(--mat-sys-error)}.acp-card--error-container{color:var(--mat-sys-on-error-container);background-color:var(--mat-sys-error-container)}.acp-card--surface{color:var(--mat-sys-on-surface);background-color:var(--mat-sys-surface)}.acp-card--surface-variant{color:var(--mat-sys-on-surface-variant);background-color:var(--mat-sys-surface-variant)}.acp-card--surface-container-highest{color:var(--mat-sys-on-surface);background-color:var(--mat-sys-surface-container-highest)}.acp-card--surface-container-high{color:var(--mat-sys-on-surface);background-color:var(--mat-sys-surface-container-high)}.acp-card--surface-container{color:var(--mat-sys-on-surface);background-color:var(--mat-sys-surface-container)}.acp-card--surface-container-low{color:var(--mat-sys-on-surface);background-color:var(--mat-sys-surface-container-low)}.acp-card--surface-container-lowest{background-color:var(--mat-sys-surface-container-lowest)}.acp-card--inverse-surface{color:var(--mat-sys-inverse-on-surface);background-color:var(--mat-sys-inverse-surface)}.acp-card--disabled-bg{background-color:color-mix(in srgb,var(--mat-sys-on-surface) 12%,transparent)}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "directive", type: i1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1.MatCardFooter, selector: "mat-card-footer" }, { kind: "component", type: i1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10120
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpCard, isStandalone: true, selector: "acp-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, actionsAlign: { classPropertyName: "actionsAlign", publicName: "actionsAlign", isSignal: true, isRequired: false, transformFunction: null }, imageRatio: { classPropertyName: "imageRatio", publicName: "imageRatio", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, passThrough: { classPropertyName: "passThrough", publicName: "passThrough", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "onActivate($event)", "keydown.enter": "onKeyActivate($event)", "keydown.space": "onKeyActivate($event)" }, properties: { "class": "hostClasses()", "style.--acp-card-shape": "shape()", "style.--acp-card-elevation": "elevationShadow()", "attr.title": "null", "attr.role": "clickable() ? \"button\" : \"article\"", "attr.tabindex": "interactive() ? 0 : null", "attr.aria-label": "ariaLabel() ?? null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-busy": "loading() ? \"true\" : null" } }, queries: [{ propertyName: "headerDir", first: true, predicate: AcpCardHeader, isSignal: true }, { propertyName: "mediaDir", first: true, predicate: AcpCardMedia, isSignal: true }, { propertyName: "avatarDir", first: true, predicate: AcpCardAvatar, isSignal: true }, { propertyName: "titleDir", first: true, predicate: AcpCardTitle, isSignal: true }, { propertyName: "subtitleDir", first: true, predicate: AcpCardSubtitle, isSignal: true }, { propertyName: "actionsDir", first: true, predicate: AcpCardActions, isSignal: true }, { propertyName: "footerDir", first: true, predicate: AcpCardFooter, isSignal: true }, { propertyName: "headerRef", first: true, predicate: ["header"], read: TemplateRef, isSignal: true }, { propertyName: "mediaRef", first: true, predicate: ["media"], read: TemplateRef, isSignal: true }, { propertyName: "avatarRef", first: true, predicate: ["avatar"], read: TemplateRef, isSignal: true }, { propertyName: "titleRef", first: true, predicate: ["title"], read: TemplateRef, isSignal: true }, { propertyName: "subtitleRef", first: true, predicate: ["subtitle"], read: TemplateRef, isSignal: true }, { propertyName: "actionsRef", first: true, predicate: ["actions"], read: TemplateRef, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footer"], read: TemplateRef, isSignal: true }], exportAs: ["acpCard"], ngImport: i0, template: "<mat-card\n class=\"acp-card\"\n [appearance]=\"matAppearance()\"\n [ngClass]=\"passThrough().root?.class\"\n [ngStyle]=\"passThrough().root?.style\"\n>\n @if (loading()) {\n <mat-progress-bar class=\"acp-card__progress\" mode=\"indeterminate\" />\n } @if (headerTpl(); as header) {\n <mat-card-header [ngClass]=\"passThrough().header?.class\" [ngStyle]=\"passThrough().header?.style\">\n <ng-container [ngTemplateOutlet]=\"header\" />\n </mat-card-header>\n } @if (mediaTpl(); as media) {\n <div\n class=\"acp-card__media\"\n [class.acp-card__media--ratio]=\"!!mediaRatio()\"\n [style.aspect-ratio]=\"mediaRatio()\"\n [ngClass]=\"passThrough().media?.class\"\n [ngStyle]=\"passThrough().media?.style\"\n >\n <ng-container [ngTemplateOutlet]=\"media\" />\n </div>\n } @if (hasTitleGroup()) {\n <mat-card-header [ngClass]=\"passThrough().header?.class\" [ngStyle]=\"passThrough().header?.style\">\n @if (avatarTpl(); as avatar) {\n <div\n mat-card-avatar\n [ngClass]=\"passThrough().avatar?.class\"\n [ngStyle]=\"passThrough().avatar?.style\"\n >\n <ng-container [ngTemplateOutlet]=\"avatar\" />\n </div>\n } @if (titleTpl() || title()) {\n <mat-card-title [ngClass]=\"passThrough().title?.class\" [ngStyle]=\"passThrough().title?.style\">\n @if (titleTpl(); as titleTemplate) {\n <ng-container [ngTemplateOutlet]=\"titleTemplate\" />\n } @else { {{ title() }} }\n </mat-card-title>\n } @if (subtitleTpl() || subtitle()) {\n <mat-card-subtitle\n [ngClass]=\"passThrough().subtitle?.class\"\n [ngStyle]=\"passThrough().subtitle?.style\"\n >\n @if (subtitleTpl(); as subtitleTemplate) {\n <ng-container [ngTemplateOutlet]=\"subtitleTemplate\" />\n } @else { {{ subtitle() }} }\n </mat-card-subtitle>\n }\n </mat-card-header>\n }\n\n <mat-card-content\n [ngClass]=\"passThrough().content?.class\"\n [ngStyle]=\"passThrough().content?.style\"\n >\n <ng-content />\n </mat-card-content>\n\n @if (actionsTpl(); as actions) {\n <mat-card-actions\n [align]=\"resolvedActionsAlign()\"\n [ngClass]=\"passThrough().actions?.class\"\n [ngStyle]=\"passThrough().actions?.style\"\n >\n <ng-container [ngTemplateOutlet]=\"actions\" />\n </mat-card-actions>\n } @if (footerTpl(); as footer) {\n <mat-card-footer [ngClass]=\"passThrough().footer?.class\" [ngStyle]=\"passThrough().footer?.style\">\n <ng-container [ngTemplateOutlet]=\"footer\" />\n </mat-card-footer>\n }\n</mat-card>\n", styles: [":host{--acp-card-padding: 16px;display:block;border-radius:var(--acp-card-shape, var(--mat-sys-corner-small))}:host:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:2px}.acp-card{--mat-card-elevated-container-color: var(--acp-card-container-color, var(--mat-sys-surface-container-low));--mat-card-outlined-container-color: var(--acp-card-container-color, var(--mat-sys-surface));--mat-card-filled-container-color: var(--acp-card-container-color, var(--mat-sys-surface-container-highest));--mat-card-elevated-container-shape: var(--acp-card-shape, var(--mat-sys-corner-small));--mat-card-outlined-container-shape: var(--acp-card-shape, var(--mat-sys-corner-small));--mat-card-filled-container-shape: var(--acp-card-shape, var(--mat-sys-corner-small));--mat-card-elevated-container-elevation: var(--acp-card-elevation, var(--mat-sys-level1));--mat-card-outlined-outline-color: var(--acp-card-outline-color, var(--mat-sys-outline-variant));--mat-card-title-text-size: var(--mat-sys-title-large-size);--mat-card-title-text-line-height: var(--mat-sys-title-large-line-height);--mat-card-title-text-weight: 500;--mat-card-subtitle-text-size: var(--mat-sys-body-medium-size);--mat-card-subtitle-text-weight: 400;--mat-card-subtitle-text-color: var(--acp-card-subtitle-color, var(--mat-sys-on-surface-variant));color:var(--acp-card-on-color, var(--mat-sys-on-surface));transition:box-shadow .2s ease-in-out}.acp-card .mat-mdc-card-content{padding:var(--acp-card-padding)}.acp-card .mat-mdc-card-actions{gap:8px}.acp-card .mat-mdc-card-footer{padding:16px}.acp-card__progress{position:absolute;inset:0 0 auto;z-index:1;border-top-left-radius:inherit;border-top-right-radius:inherit;overflow:hidden}.acp-card__media{overflow:hidden}.acp-card__media:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.acp-card__media--ratio>:is(img,video,picture,iframe){display:block;width:100%;height:100%;object-fit:cover}:host(.acp-card--padding-none){--acp-card-padding: 0}:host(.acp-card--padding-small){--acp-card-padding: 12px}:host(.acp-card--padding-large){--acp-card-padding: 24px}:host(.acp-card--hover) .acp-card:hover{box-shadow:var(--mat-sys-level3)}:host(.acp-card--clickable){cursor:pointer;-webkit-user-select:none;user-select:none}:host(.acp-card--clickable) .acp-card:hover{box-shadow:var(--mat-sys-level2)}:host(.acp-card--clickable) .acp-card:active{box-shadow:var(--mat-sys-level1)}:host(.acp-card--disabled){opacity:.6;pointer-events:none}:host(.acp-card--loading){cursor:progress}:host(.acp-card--full-height){height:100%}:host(.acp-card--full-height) .acp-card{height:100%}:host(.acp-card--full-width){width:100%}:host(.acp-card--primary){--acp-card-container-color: var(--mat-sys-primary);--acp-card-on-color: var(--mat-sys-on-primary);--acp-card-subtitle-color: var(--mat-sys-on-primary);--acp-card-outline-color: transparent}:host(.acp-card--primary-container){--acp-card-container-color: var(--mat-sys-primary-container);--acp-card-on-color: var(--mat-sys-on-primary-container);--acp-card-subtitle-color: var(--mat-sys-on-primary-container);--acp-card-outline-color: transparent}:host(.acp-card--secondary){--acp-card-container-color: var(--mat-sys-secondary);--acp-card-on-color: var(--mat-sys-on-secondary);--acp-card-subtitle-color: var(--mat-sys-on-secondary);--acp-card-outline-color: transparent}:host(.acp-card--secondary-container){--acp-card-container-color: var(--mat-sys-secondary-container);--acp-card-on-color: var(--mat-sys-on-secondary-container);--acp-card-subtitle-color: var(--mat-sys-on-secondary-container);--acp-card-outline-color: transparent}:host(.acp-card--tertiary){--acp-card-container-color: var(--mat-sys-tertiary);--acp-card-on-color: var(--mat-sys-on-tertiary);--acp-card-subtitle-color: var(--mat-sys-on-tertiary);--acp-card-outline-color: transparent}:host(.acp-card--tertiary-container){--acp-card-container-color: var(--mat-sys-tertiary-container);--acp-card-on-color: var(--mat-sys-on-tertiary-container);--acp-card-subtitle-color: var(--mat-sys-on-tertiary-container);--acp-card-outline-color: transparent}:host(.acp-card--error){--acp-card-container-color: var(--mat-sys-error);--acp-card-on-color: var(--mat-sys-on-error);--acp-card-subtitle-color: var(--mat-sys-on-error);--acp-card-outline-color: transparent}:host(.acp-card--error-container){--acp-card-container-color: var(--mat-sys-error-container);--acp-card-on-color: var(--mat-sys-on-error-container);--acp-card-subtitle-color: var(--mat-sys-on-error-container);--acp-card-outline-color: transparent}:host(.acp-card--surface){--acp-card-container-color: var(--mat-sys-surface);--acp-card-on-color: var(--mat-sys-on-surface);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--surface-variant){--acp-card-container-color: var(--mat-sys-surface-variant);--acp-card-on-color: var(--mat-sys-on-surface-variant);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--surface-container-highest){--acp-card-container-color: var(--mat-sys-surface-container-highest);--acp-card-on-color: var(--mat-sys-on-surface);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--surface-container-high){--acp-card-container-color: var(--mat-sys-surface-container-high);--acp-card-on-color: var(--mat-sys-on-surface);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--surface-container){--acp-card-container-color: var(--mat-sys-surface-container);--acp-card-on-color: var(--mat-sys-on-surface);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--surface-container-low){--acp-card-container-color: var(--mat-sys-surface-container-low);--acp-card-on-color: var(--mat-sys-on-surface);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--surface-container-lowest){--acp-card-container-color: var(--mat-sys-surface-container-lowest);--acp-card-on-color: var(--mat-sys-on-surface);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--inverse-surface){--acp-card-container-color: var(--mat-sys-inverse-surface);--acp-card-on-color: var(--mat-sys-inverse-on-surface);--acp-card-subtitle-color: var(--mat-sys-inverse-on-surface);--acp-card-outline-color: transparent}:host(.acp-card--disabled-bg){--acp-card-container-color: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent);--acp-card-on-color: color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent);--acp-card-subtitle-color: var(--acp-card-on-color)}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$6.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$6.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1$6.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "directive", type: i1$6.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1$6.MatCardFooter, selector: "mat-card-footer" }, { kind: "component", type: i1$6.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1$6.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i1$6.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9673
10121
|
}
|
|
9674
10122
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCard, decorators: [{
|
|
9675
10123
|
type: Component,
|
|
9676
|
-
args: [{ selector: 'acp-card', standalone: true, imports: [MatCardModule, NgTemplateOutlet, NgClass, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
9677
|
-
class: '
|
|
9678
|
-
'[
|
|
9679
|
-
'[
|
|
9680
|
-
'[
|
|
9681
|
-
'[
|
|
9682
|
-
'[
|
|
9683
|
-
'[
|
|
9684
|
-
'[
|
|
9685
|
-
'[
|
|
9686
|
-
'
|
|
9687
|
-
'
|
|
9688
|
-
'
|
|
9689
|
-
|
|
9690
|
-
|
|
9691
|
-
|
|
9692
|
-
|
|
9693
|
-
|
|
9694
|
-
}], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], imageRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageRatio", required: false }] }], fullHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullHeight", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], passThrough: [{ type: i0.Input, args: [{ isSignal: true, alias: "passThrough", required: false }] }], headerTemplate: [{
|
|
9695
|
-
type: ContentChild,
|
|
9696
|
-
args: ['header', { read: TemplateRef }]
|
|
9697
|
-
}], mediaTemplate: [{
|
|
9698
|
-
type: ContentChild,
|
|
9699
|
-
args: ['media', { read: TemplateRef }]
|
|
9700
|
-
}], avatarTemplate: [{
|
|
9701
|
-
type: ContentChild,
|
|
9702
|
-
args: ['avatar', { read: TemplateRef }]
|
|
9703
|
-
}], titleTemplate: [{
|
|
9704
|
-
type: ContentChild,
|
|
9705
|
-
args: ['title', { read: TemplateRef }]
|
|
9706
|
-
}], subtitleTemplate: [{
|
|
9707
|
-
type: ContentChild,
|
|
9708
|
-
args: ['subtitle', { read: TemplateRef }]
|
|
9709
|
-
}], actionsTemplate: [{
|
|
9710
|
-
type: ContentChild,
|
|
9711
|
-
args: ['actions', { read: TemplateRef }]
|
|
9712
|
-
}], footerTemplate: [{
|
|
9713
|
-
type: ContentChild,
|
|
9714
|
-
args: ['footer', { read: TemplateRef }]
|
|
9715
|
-
}], role: [{
|
|
9716
|
-
type: HostBinding,
|
|
9717
|
-
args: ['attr.role']
|
|
9718
|
-
}], tabindex: [{
|
|
9719
|
-
type: HostBinding,
|
|
9720
|
-
args: ['attr.tabindex']
|
|
9721
|
-
}], ariaDisabled: [{
|
|
9722
|
-
type: HostBinding,
|
|
9723
|
-
args: ['attr.aria-disabled']
|
|
9724
|
-
}] } });
|
|
10124
|
+
args: [{ selector: 'acp-card', exportAs: 'acpCard', standalone: true, imports: [MatCardModule, MatProgressBar, NgTemplateOutlet, NgClass, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
10125
|
+
'[class]': 'hostClasses()',
|
|
10126
|
+
'[style.--acp-card-shape]': 'shape()',
|
|
10127
|
+
'[style.--acp-card-elevation]': 'elevationShadow()',
|
|
10128
|
+
'[attr.title]': 'null',
|
|
10129
|
+
'[attr.role]': 'clickable() ? "button" : "article"',
|
|
10130
|
+
'[attr.tabindex]': 'interactive() ? 0 : null',
|
|
10131
|
+
'[attr.aria-label]': 'ariaLabel() ?? null',
|
|
10132
|
+
'[attr.aria-disabled]': 'disabled() ? "true" : null',
|
|
10133
|
+
'[attr.aria-busy]': 'loading() ? "true" : null',
|
|
10134
|
+
'(click)': 'onActivate($event)',
|
|
10135
|
+
'(keydown.enter)': 'onKeyActivate($event)',
|
|
10136
|
+
'(keydown.space)': 'onKeyActivate($event)',
|
|
10137
|
+
}, template: "<mat-card\n class=\"acp-card\"\n [appearance]=\"matAppearance()\"\n [ngClass]=\"passThrough().root?.class\"\n [ngStyle]=\"passThrough().root?.style\"\n>\n @if (loading()) {\n <mat-progress-bar class=\"acp-card__progress\" mode=\"indeterminate\" />\n } @if (headerTpl(); as header) {\n <mat-card-header [ngClass]=\"passThrough().header?.class\" [ngStyle]=\"passThrough().header?.style\">\n <ng-container [ngTemplateOutlet]=\"header\" />\n </mat-card-header>\n } @if (mediaTpl(); as media) {\n <div\n class=\"acp-card__media\"\n [class.acp-card__media--ratio]=\"!!mediaRatio()\"\n [style.aspect-ratio]=\"mediaRatio()\"\n [ngClass]=\"passThrough().media?.class\"\n [ngStyle]=\"passThrough().media?.style\"\n >\n <ng-container [ngTemplateOutlet]=\"media\" />\n </div>\n } @if (hasTitleGroup()) {\n <mat-card-header [ngClass]=\"passThrough().header?.class\" [ngStyle]=\"passThrough().header?.style\">\n @if (avatarTpl(); as avatar) {\n <div\n mat-card-avatar\n [ngClass]=\"passThrough().avatar?.class\"\n [ngStyle]=\"passThrough().avatar?.style\"\n >\n <ng-container [ngTemplateOutlet]=\"avatar\" />\n </div>\n } @if (titleTpl() || title()) {\n <mat-card-title [ngClass]=\"passThrough().title?.class\" [ngStyle]=\"passThrough().title?.style\">\n @if (titleTpl(); as titleTemplate) {\n <ng-container [ngTemplateOutlet]=\"titleTemplate\" />\n } @else { {{ title() }} }\n </mat-card-title>\n } @if (subtitleTpl() || subtitle()) {\n <mat-card-subtitle\n [ngClass]=\"passThrough().subtitle?.class\"\n [ngStyle]=\"passThrough().subtitle?.style\"\n >\n @if (subtitleTpl(); as subtitleTemplate) {\n <ng-container [ngTemplateOutlet]=\"subtitleTemplate\" />\n } @else { {{ subtitle() }} }\n </mat-card-subtitle>\n }\n </mat-card-header>\n }\n\n <mat-card-content\n [ngClass]=\"passThrough().content?.class\"\n [ngStyle]=\"passThrough().content?.style\"\n >\n <ng-content />\n </mat-card-content>\n\n @if (actionsTpl(); as actions) {\n <mat-card-actions\n [align]=\"resolvedActionsAlign()\"\n [ngClass]=\"passThrough().actions?.class\"\n [ngStyle]=\"passThrough().actions?.style\"\n >\n <ng-container [ngTemplateOutlet]=\"actions\" />\n </mat-card-actions>\n } @if (footerTpl(); as footer) {\n <mat-card-footer [ngClass]=\"passThrough().footer?.class\" [ngStyle]=\"passThrough().footer?.style\">\n <ng-container [ngTemplateOutlet]=\"footer\" />\n </mat-card-footer>\n }\n</mat-card>\n", styles: [":host{--acp-card-padding: 16px;display:block;border-radius:var(--acp-card-shape, var(--mat-sys-corner-small))}:host:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:2px}.acp-card{--mat-card-elevated-container-color: var(--acp-card-container-color, var(--mat-sys-surface-container-low));--mat-card-outlined-container-color: var(--acp-card-container-color, var(--mat-sys-surface));--mat-card-filled-container-color: var(--acp-card-container-color, var(--mat-sys-surface-container-highest));--mat-card-elevated-container-shape: var(--acp-card-shape, var(--mat-sys-corner-small));--mat-card-outlined-container-shape: var(--acp-card-shape, var(--mat-sys-corner-small));--mat-card-filled-container-shape: var(--acp-card-shape, var(--mat-sys-corner-small));--mat-card-elevated-container-elevation: var(--acp-card-elevation, var(--mat-sys-level1));--mat-card-outlined-outline-color: var(--acp-card-outline-color, var(--mat-sys-outline-variant));--mat-card-title-text-size: var(--mat-sys-title-large-size);--mat-card-title-text-line-height: var(--mat-sys-title-large-line-height);--mat-card-title-text-weight: 500;--mat-card-subtitle-text-size: var(--mat-sys-body-medium-size);--mat-card-subtitle-text-weight: 400;--mat-card-subtitle-text-color: var(--acp-card-subtitle-color, var(--mat-sys-on-surface-variant));color:var(--acp-card-on-color, var(--mat-sys-on-surface));transition:box-shadow .2s ease-in-out}.acp-card .mat-mdc-card-content{padding:var(--acp-card-padding)}.acp-card .mat-mdc-card-actions{gap:8px}.acp-card .mat-mdc-card-footer{padding:16px}.acp-card__progress{position:absolute;inset:0 0 auto;z-index:1;border-top-left-radius:inherit;border-top-right-radius:inherit;overflow:hidden}.acp-card__media{overflow:hidden}.acp-card__media:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.acp-card__media--ratio>:is(img,video,picture,iframe){display:block;width:100%;height:100%;object-fit:cover}:host(.acp-card--padding-none){--acp-card-padding: 0}:host(.acp-card--padding-small){--acp-card-padding: 12px}:host(.acp-card--padding-large){--acp-card-padding: 24px}:host(.acp-card--hover) .acp-card:hover{box-shadow:var(--mat-sys-level3)}:host(.acp-card--clickable){cursor:pointer;-webkit-user-select:none;user-select:none}:host(.acp-card--clickable) .acp-card:hover{box-shadow:var(--mat-sys-level2)}:host(.acp-card--clickable) .acp-card:active{box-shadow:var(--mat-sys-level1)}:host(.acp-card--disabled){opacity:.6;pointer-events:none}:host(.acp-card--loading){cursor:progress}:host(.acp-card--full-height){height:100%}:host(.acp-card--full-height) .acp-card{height:100%}:host(.acp-card--full-width){width:100%}:host(.acp-card--primary){--acp-card-container-color: var(--mat-sys-primary);--acp-card-on-color: var(--mat-sys-on-primary);--acp-card-subtitle-color: var(--mat-sys-on-primary);--acp-card-outline-color: transparent}:host(.acp-card--primary-container){--acp-card-container-color: var(--mat-sys-primary-container);--acp-card-on-color: var(--mat-sys-on-primary-container);--acp-card-subtitle-color: var(--mat-sys-on-primary-container);--acp-card-outline-color: transparent}:host(.acp-card--secondary){--acp-card-container-color: var(--mat-sys-secondary);--acp-card-on-color: var(--mat-sys-on-secondary);--acp-card-subtitle-color: var(--mat-sys-on-secondary);--acp-card-outline-color: transparent}:host(.acp-card--secondary-container){--acp-card-container-color: var(--mat-sys-secondary-container);--acp-card-on-color: var(--mat-sys-on-secondary-container);--acp-card-subtitle-color: var(--mat-sys-on-secondary-container);--acp-card-outline-color: transparent}:host(.acp-card--tertiary){--acp-card-container-color: var(--mat-sys-tertiary);--acp-card-on-color: var(--mat-sys-on-tertiary);--acp-card-subtitle-color: var(--mat-sys-on-tertiary);--acp-card-outline-color: transparent}:host(.acp-card--tertiary-container){--acp-card-container-color: var(--mat-sys-tertiary-container);--acp-card-on-color: var(--mat-sys-on-tertiary-container);--acp-card-subtitle-color: var(--mat-sys-on-tertiary-container);--acp-card-outline-color: transparent}:host(.acp-card--error){--acp-card-container-color: var(--mat-sys-error);--acp-card-on-color: var(--mat-sys-on-error);--acp-card-subtitle-color: var(--mat-sys-on-error);--acp-card-outline-color: transparent}:host(.acp-card--error-container){--acp-card-container-color: var(--mat-sys-error-container);--acp-card-on-color: var(--mat-sys-on-error-container);--acp-card-subtitle-color: var(--mat-sys-on-error-container);--acp-card-outline-color: transparent}:host(.acp-card--surface){--acp-card-container-color: var(--mat-sys-surface);--acp-card-on-color: var(--mat-sys-on-surface);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--surface-variant){--acp-card-container-color: var(--mat-sys-surface-variant);--acp-card-on-color: var(--mat-sys-on-surface-variant);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--surface-container-highest){--acp-card-container-color: var(--mat-sys-surface-container-highest);--acp-card-on-color: var(--mat-sys-on-surface);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--surface-container-high){--acp-card-container-color: var(--mat-sys-surface-container-high);--acp-card-on-color: var(--mat-sys-on-surface);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--surface-container){--acp-card-container-color: var(--mat-sys-surface-container);--acp-card-on-color: var(--mat-sys-on-surface);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--surface-container-low){--acp-card-container-color: var(--mat-sys-surface-container-low);--acp-card-on-color: var(--mat-sys-on-surface);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--surface-container-lowest){--acp-card-container-color: var(--mat-sys-surface-container-lowest);--acp-card-on-color: var(--mat-sys-on-surface);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--inverse-surface){--acp-card-container-color: var(--mat-sys-inverse-surface);--acp-card-on-color: var(--mat-sys-inverse-on-surface);--acp-card-subtitle-color: var(--mat-sys-inverse-on-surface);--acp-card-outline-color: transparent}:host(.acp-card--disabled-bg){--acp-card-container-color: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent);--acp-card-on-color: color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent);--acp-card-subtitle-color: var(--acp-card-on-color)}\n"] }]
|
|
10138
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], actionsAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsAlign", required: false }] }], imageRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageRatio", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullHeight", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], passThrough: [{ type: i0.Input, args: [{ isSignal: true, alias: "passThrough", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], headerDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AcpCardHeader), { ...{ descendants: false }, isSignal: true }] }], mediaDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AcpCardMedia), { ...{ descendants: false }, isSignal: true }] }], avatarDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AcpCardAvatar), { ...{ descendants: false }, isSignal: true }] }], titleDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AcpCardTitle), { ...{ descendants: false }, isSignal: true }] }], subtitleDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AcpCardSubtitle), { ...{ descendants: false }, isSignal: true }] }], actionsDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AcpCardActions), { ...{ descendants: false }, isSignal: true }] }], footerDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AcpCardFooter), { ...{ descendants: false }, isSignal: true }] }], headerRef: [{ type: i0.ContentChild, args: ['header', { ...{ read: TemplateRef, descendants: false }, isSignal: true }] }], mediaRef: [{ type: i0.ContentChild, args: ['media', { ...{ read: TemplateRef, descendants: false }, isSignal: true }] }], avatarRef: [{ type: i0.ContentChild, args: ['avatar', { ...{ read: TemplateRef, descendants: false }, isSignal: true }] }], titleRef: [{ type: i0.ContentChild, args: ['title', { ...{ read: TemplateRef, descendants: false }, isSignal: true }] }], subtitleRef: [{ type: i0.ContentChild, args: ['subtitle', { ...{
|
|
10139
|
+
read: TemplateRef,
|
|
10140
|
+
descendants: false,
|
|
10141
|
+
}, isSignal: true }] }], actionsRef: [{ type: i0.ContentChild, args: ['actions', { ...{ read: TemplateRef, descendants: false }, isSignal: true }] }], footerRef: [{ type: i0.ContentChild, args: ['footer', { ...{ read: TemplateRef, descendants: false }, isSignal: true }] }] } });
|
|
9725
10142
|
|
|
9726
10143
|
const KPI_CARD_TREND_CONFIGS = {
|
|
9727
|
-
up: {
|
|
9728
|
-
|
|
9729
|
-
|
|
9730
|
-
|
|
9731
|
-
},
|
|
9732
|
-
down: {
|
|
9733
|
-
icon: 'trending_down',
|
|
9734
|
-
color: 'error',
|
|
9735
|
-
ariaLabel: 'Trending down',
|
|
9736
|
-
},
|
|
9737
|
-
neutral: {
|
|
9738
|
-
icon: 'trending_flat',
|
|
9739
|
-
color: 'info',
|
|
9740
|
-
ariaLabel: 'Neutral trend',
|
|
9741
|
-
},
|
|
9742
|
-
none: {
|
|
9743
|
-
icon: '',
|
|
9744
|
-
color: 'neutral',
|
|
9745
|
-
ariaLabel: '',
|
|
9746
|
-
},
|
|
10144
|
+
up: { icon: 'trending_up', ariaLabel: 'Increase' },
|
|
10145
|
+
down: { icon: 'trending_down', ariaLabel: 'Decrease' },
|
|
10146
|
+
neutral: { icon: 'trending_flat', ariaLabel: 'No change' },
|
|
10147
|
+
none: { icon: '', ariaLabel: '' },
|
|
9747
10148
|
};
|
|
9748
|
-
|
|
9749
|
-
|
|
9750
|
-
|
|
9751
|
-
if (
|
|
9752
|
-
return
|
|
9753
|
-
|
|
9754
|
-
case 'currency':
|
|
9755
|
-
return new Intl.NumberFormat('en-US', {
|
|
9756
|
-
style: 'currency',
|
|
9757
|
-
currency: 'USD',
|
|
9758
|
-
minimumFractionDigits: 0,
|
|
9759
|
-
maximumFractionDigits: 0,
|
|
9760
|
-
}).format(value);
|
|
9761
|
-
case 'percent':
|
|
9762
|
-
return `${value.toFixed(1)}%`;
|
|
9763
|
-
case 'number':
|
|
9764
|
-
return new Intl.NumberFormat('en-US').format(value);
|
|
9765
|
-
case 'decimal':
|
|
9766
|
-
return value.toFixed(2);
|
|
9767
|
-
default:
|
|
9768
|
-
return value.toString();
|
|
9769
|
-
}
|
|
10149
|
+
/** Infers the trend direction from a numeric or numeric-string delta (`'+12.5'`, `-3`). */
|
|
10150
|
+
function inferKpiTrend(delta) {
|
|
10151
|
+
const n = typeof delta === 'number' ? delta : Number.parseFloat(String(delta ?? ''));
|
|
10152
|
+
if (Number.isNaN(n))
|
|
10153
|
+
return 'none';
|
|
10154
|
+
return n > 0 ? 'up' : n < 0 ? 'down' : 'neutral';
|
|
9770
10155
|
}
|
|
9771
10156
|
|
|
10157
|
+
const isBlank = (value) => value === null || value === undefined || value === '';
|
|
9772
10158
|
class AcpKpiCard {
|
|
10159
|
+
defaultLocale = inject(LOCALE_ID);
|
|
9773
10160
|
// Content
|
|
9774
10161
|
title = input(/* @ts-ignore */
|
|
9775
10162
|
...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
9776
10163
|
subtitle = input(/* @ts-ignore */
|
|
9777
10164
|
...(ngDevMode ? [undefined, { debugName: "subtitle" }] : /* istanbul ignore next */ []));
|
|
10165
|
+
/** Numbers are formatted with `Intl.NumberFormat`; strings are shown as-is. */
|
|
9778
10166
|
value = input(/* @ts-ignore */
|
|
9779
10167
|
...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
10168
|
+
valueFormat = input(/* @ts-ignore */
|
|
10169
|
+
...(ngDevMode ? [undefined, { debugName: "valueFormat" }] : /* istanbul ignore next */ []));
|
|
10170
|
+
prefix = input(/* @ts-ignore */
|
|
10171
|
+
...(ngDevMode ? [undefined, { debugName: "prefix" }] : /* istanbul ignore next */ []));
|
|
10172
|
+
suffix = input(/* @ts-ignore */
|
|
10173
|
+
...(ngDevMode ? [undefined, { debugName: "suffix" }] : /* istanbul ignore next */ []));
|
|
9780
10174
|
description = input(/* @ts-ignore */
|
|
9781
10175
|
...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
|
|
9782
10176
|
footer = input(/* @ts-ignore */
|
|
9783
10177
|
...(ngDevMode ? [undefined, { debugName: "footer" }] : /* istanbul ignore next */ []));
|
|
10178
|
+
/** BCP 47 locale for number formatting. Defaults to the app `LOCALE_ID`. */
|
|
10179
|
+
locale = input(/* @ts-ignore */
|
|
10180
|
+
...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
|
|
9784
10181
|
// Styling
|
|
9785
10182
|
variant = input('default', /* @ts-ignore */
|
|
9786
10183
|
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
@@ -9788,7 +10185,9 @@ class AcpKpiCard {
|
|
|
9788
10185
|
...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
9789
10186
|
size = input('md', /* @ts-ignore */
|
|
9790
10187
|
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
9791
|
-
|
|
10188
|
+
align = input('start', /* @ts-ignore */
|
|
10189
|
+
...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
|
|
10190
|
+
// Icons & avatar
|
|
9792
10191
|
icon = input(/* @ts-ignore */
|
|
9793
10192
|
...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
9794
10193
|
svgIcon = input(/* @ts-ignore */
|
|
@@ -9797,18 +10196,26 @@ class AcpKpiCard {
|
|
|
9797
10196
|
...(ngDevMode ? [undefined, { debugName: "avatar" }] : /* istanbul ignore next */ []));
|
|
9798
10197
|
avatarInitials = input(/* @ts-ignore */
|
|
9799
10198
|
...(ngDevMode ? [undefined, { debugName: "avatarInitials" }] : /* istanbul ignore next */ []));
|
|
9800
|
-
//
|
|
9801
|
-
trend = input('none', /* @ts-ignore */
|
|
9802
|
-
...(ngDevMode ? [{ debugName: "trend" }] : /* istanbul ignore next */ []));
|
|
10199
|
+
// Change vs. previous period
|
|
9803
10200
|
percentage = input(/* @ts-ignore */
|
|
9804
10201
|
...(ngDevMode ? [undefined, { debugName: "percentage" }] : /* istanbul ignore next */ []));
|
|
9805
10202
|
percentageFormat = input('percent', /* @ts-ignore */
|
|
9806
10203
|
...(ngDevMode ? [{ debugName: "percentageFormat" }] : /* istanbul ignore next */ []));
|
|
10204
|
+
/** Direction of the change. Inferred from the sign of `percentage` when unset. */
|
|
10205
|
+
trend = input(/* @ts-ignore */
|
|
10206
|
+
...(ngDevMode ? [undefined, { debugName: "trend" }] : /* istanbul ignore next */ []));
|
|
10207
|
+
/** Invert the badge color for metrics where a decrease is good (costs, churn, errors). */
|
|
10208
|
+
lowerIsBetter = input(false, { ...(ngDevMode ? { debugName: "lowerIsBetter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
10209
|
+
/** Comparison context shown next to the change, e.g. "vs last month". */
|
|
10210
|
+
trendLabel = input(/* @ts-ignore */
|
|
10211
|
+
...(ngDevMode ? [undefined, { debugName: "trendLabel" }] : /* istanbul ignore next */ []));
|
|
10212
|
+
/** Show the trend arrow inside the change badge. */
|
|
10213
|
+
showTrendIcon = input(true, { ...(ngDevMode ? { debugName: "showTrendIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
9807
10214
|
// Progress
|
|
9808
10215
|
progress = input(/* @ts-ignore */
|
|
9809
10216
|
...(ngDevMode ? [undefined, { debugName: "progress" }] : /* istanbul ignore next */ []));
|
|
9810
|
-
progressColor = input(
|
|
9811
|
-
...(ngDevMode ? [{ debugName: "progressColor" }] : /* istanbul ignore next */ []));
|
|
10217
|
+
progressColor = input(/* @ts-ignore */
|
|
10218
|
+
...(ngDevMode ? [undefined, { debugName: "progressColor" }] : /* istanbul ignore next */ []));
|
|
9812
10219
|
// States
|
|
9813
10220
|
loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
9814
10221
|
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
@@ -9817,56 +10224,78 @@ class AcpKpiCard {
|
|
|
9817
10224
|
// Navigation
|
|
9818
10225
|
routerLink = input(null, /* @ts-ignore */
|
|
9819
10226
|
...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
|
|
9820
|
-
|
|
9821
|
-
...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
|
|
9822
|
-
// Aria
|
|
10227
|
+
// Accessibility
|
|
9823
10228
|
ariaLabel = input(/* @ts-ignore */
|
|
9824
10229
|
...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
9825
|
-
|
|
10230
|
+
menuAriaLabel = input('More options', /* @ts-ignore */
|
|
10231
|
+
...(ngDevMode ? [{ debugName: "menuAriaLabel" }] : /* istanbul ignore next */ []));
|
|
9826
10232
|
tooltip = input(/* @ts-ignore */
|
|
9827
10233
|
...(ngDevMode ? [undefined, { debugName: "tooltip" }] : /* istanbul ignore next */ []));
|
|
9828
|
-
|
|
10234
|
+
/** Emitted on click, Enter or Space when `clickable`. */
|
|
9829
10235
|
clicked = output();
|
|
9830
|
-
actionClicked = output();
|
|
9831
|
-
// Internal state for hover
|
|
9832
|
-
isHovered = signal(false, /* @ts-ignore */
|
|
9833
|
-
...(ngDevMode ? [{ debugName: "isHovered" }] : /* istanbul ignore next */ []));
|
|
9834
|
-
// Content children
|
|
9835
10236
|
iconTemplate = contentChild('icon', { ...(ngDevMode ? { debugName: "iconTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
9836
10237
|
avatarTemplate = contentChild('avatar', { ...(ngDevMode ? { debugName: "avatarTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
9837
10238
|
footerTemplate = contentChild('footer', { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
9838
10239
|
actionsTemplate = contentChild('actions', { ...(ngDevMode ? { debugName: "actionsTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
9839
|
-
|
|
9840
|
-
|
|
9841
|
-
|
|
9842
|
-
|
|
9843
|
-
|
|
9844
|
-
|
|
9845
|
-
|
|
9846
|
-
|
|
9847
|
-
|
|
9848
|
-
return this.icon();
|
|
10240
|
+
resolvedLocale = computed(() => this.locale() ?? this.defaultLocale, /* @ts-ignore */
|
|
10241
|
+
...(ngDevMode ? [{ debugName: "resolvedLocale" }] : /* istanbul ignore next */ []));
|
|
10242
|
+
formattedValue = computed(() => {
|
|
10243
|
+
const value = this.value();
|
|
10244
|
+
if (isBlank(value))
|
|
10245
|
+
return null;
|
|
10246
|
+
if (typeof value !== 'number')
|
|
10247
|
+
return String(value);
|
|
10248
|
+
return new Intl.NumberFormat(this.resolvedLocale(), this.valueFormat()).format(value);
|
|
9849
10249
|
}, /* @ts-ignore */
|
|
9850
|
-
...(ngDevMode ? [{ debugName: "
|
|
9851
|
-
|
|
9852
|
-
|
|
9853
|
-
if (
|
|
9854
|
-
return
|
|
9855
|
-
|
|
10250
|
+
...(ngDevMode ? [{ debugName: "formattedValue" }] : /* istanbul ignore next */ []));
|
|
10251
|
+
formattedDelta = computed(() => {
|
|
10252
|
+
const delta = this.percentage();
|
|
10253
|
+
if (isBlank(delta))
|
|
10254
|
+
return null;
|
|
10255
|
+
const isPercent = this.percentageFormat() === 'percent';
|
|
10256
|
+
if (typeof delta !== 'number') {
|
|
10257
|
+
const text = String(delta);
|
|
10258
|
+
return isPercent && !text.endsWith('%') ? `${text}%` : text;
|
|
10259
|
+
}
|
|
10260
|
+
return new Intl.NumberFormat(this.resolvedLocale(), {
|
|
10261
|
+
style: isPercent ? 'percent' : 'decimal',
|
|
10262
|
+
maximumFractionDigits: 2,
|
|
10263
|
+
signDisplay: 'exceptZero',
|
|
10264
|
+
}).format(isPercent ? delta / 100 : delta);
|
|
10265
|
+
}, /* @ts-ignore */
|
|
10266
|
+
...(ngDevMode ? [{ debugName: "formattedDelta" }] : /* istanbul ignore next */ []));
|
|
10267
|
+
resolvedTrend = computed(() => this.trend() ?? inferKpiTrend(this.percentage()), /* @ts-ignore */
|
|
10268
|
+
...(ngDevMode ? [{ debugName: "resolvedTrend" }] : /* istanbul ignore next */ []));
|
|
10269
|
+
trendConfig = computed(() => KPI_CARD_TREND_CONFIGS[this.resolvedTrend()], /* @ts-ignore */
|
|
10270
|
+
...(ngDevMode ? [{ debugName: "trendConfig" }] : /* istanbul ignore next */ []));
|
|
10271
|
+
sentiment = computed(() => {
|
|
10272
|
+
const trend = this.resolvedTrend();
|
|
10273
|
+
if (trend !== 'up' && trend !== 'down')
|
|
10274
|
+
return 'neutral';
|
|
10275
|
+
return (trend === 'up') !== this.lowerIsBetter() ? 'positive' : 'negative';
|
|
9856
10276
|
}, /* @ts-ignore */
|
|
9857
|
-
...(ngDevMode ? [{ debugName: "
|
|
9858
|
-
hasHeader = computed(() => !!(this.title() ||
|
|
10277
|
+
...(ngDevMode ? [{ debugName: "sentiment" }] : /* istanbul ignore next */ []));
|
|
10278
|
+
hasHeader = computed(() => !!(this.title() ||
|
|
10279
|
+
this.subtitle() ||
|
|
10280
|
+
this.icon() ||
|
|
10281
|
+
this.svgIcon() ||
|
|
10282
|
+
this.iconTemplate() ||
|
|
10283
|
+
this.avatar() ||
|
|
10284
|
+
this.avatarInitials() ||
|
|
10285
|
+
this.avatarTemplate() ||
|
|
10286
|
+
this.actionsTemplate()), /* @ts-ignore */
|
|
9859
10287
|
...(ngDevMode ? [{ debugName: "hasHeader" }] : /* istanbul ignore next */ []));
|
|
9860
|
-
hasFooter = computed(() => !!(this.footer() || this.footerTemplate()
|
|
10288
|
+
hasFooter = computed(() => !!(this.footer() || this.footerTemplate()), /* @ts-ignore */
|
|
9861
10289
|
...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
|
|
9862
|
-
|
|
9863
|
-
...(ngDevMode ? [{ debugName: "
|
|
10290
|
+
interactive = computed(() => this.clickable() && !this.disabled() && !this.loading(), /* @ts-ignore */
|
|
10291
|
+
...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
|
|
9864
10292
|
hostClasses = computed(() => {
|
|
9865
10293
|
const classes = [
|
|
9866
10294
|
'acp-kpi-card',
|
|
9867
10295
|
`acp-kpi-card--${this.variant()}`,
|
|
9868
10296
|
`acp-kpi-card--${this.color()}`,
|
|
9869
10297
|
`acp-kpi-card--${this.size()}`,
|
|
10298
|
+
`acp-kpi-card--align-${this.align()}`,
|
|
9870
10299
|
];
|
|
9871
10300
|
if (this.clickable())
|
|
9872
10301
|
classes.push('acp-kpi-card--clickable');
|
|
@@ -9880,24 +10309,17 @@ class AcpKpiCard {
|
|
|
9880
10309
|
}, /* @ts-ignore */
|
|
9881
10310
|
...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
9882
10311
|
onCardClick() {
|
|
9883
|
-
if (
|
|
10312
|
+
if (this.interactive())
|
|
9884
10313
|
this.clicked.emit();
|
|
9885
|
-
}
|
|
9886
|
-
}
|
|
9887
|
-
onActionClick(action, event) {
|
|
9888
|
-
event.stopPropagation();
|
|
9889
|
-
this.actionClicked.emit(action);
|
|
9890
10314
|
}
|
|
9891
|
-
|
|
9892
|
-
if (this.
|
|
9893
|
-
|
|
9894
|
-
|
|
9895
|
-
|
|
9896
|
-
onMouseLeave() {
|
|
9897
|
-
this.isHovered.set(false);
|
|
10315
|
+
onCardKey(event) {
|
|
10316
|
+
if (!this.interactive() || event.target !== event.currentTarget)
|
|
10317
|
+
return;
|
|
10318
|
+
event.preventDefault();
|
|
10319
|
+
this.clicked.emit();
|
|
9898
10320
|
}
|
|
9899
10321
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpKpiCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9900
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpKpiCard, isStandalone: true, selector: "acp-kpi-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, avatarInitials: { classPropertyName: "avatarInitials", publicName: "avatarInitials", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, percentage: { classPropertyName: "percentage", publicName: "percentage", isSignal: true, isRequired: false, transformFunction: null }, percentageFormat: { classPropertyName: "percentageFormat", publicName: "percentageFormat", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, progressColor: { classPropertyName: "progressColor", publicName: "progressColor", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", actionClicked: "actionClicked" }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ["icon"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "avatarTemplate", first: true, predicate: ["avatar"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actions"], descendants: true, read: TemplateRef, isSignal: true }], exportAs: ["acpKpiCard"], ngImport: i0, template: "<mat-card\n class=\"acp-kpi-card__card\"\n [routerLink]=\"routerLink()\"\n [attr.aria-label]=\"ariaLabel()\"\n [matTooltip]=\"tooltip()\"\n [matTooltipDisabled]=\"!tooltip()\"\n (click)=\"onCardClick()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n>\n <!-- Loading Skeleton -->\n @if (loading()) {\n <div class=\"acp-kpi-card__skeleton\">\n <div class=\"acp-kpi-card__skeleton-header\"></div>\n <div class=\"acp-kpi-card__skeleton-value\"></div>\n <div class=\"acp-kpi-card__skeleton-text\"></div>\n </div>\n } @else {\n <!-- Header -->\n @if (hasHeader()) {\n <mat-card-header class=\"acp-kpi-card__header\">\n <div class=\"acp-kpi-card__header-content\">\n <!-- Icon or Avatar -->\n <div class=\"acp-kpi-card__icon-container\">\n @if (iconTemplate()) {\n <ng-container [ngTemplateOutlet]=\"iconTemplate()!\"></ng-container>\n } @else if (svgIcon()) {\n <mat-icon class=\"acp-kpi-card__icon\" [svgIcon]=\"svgIcon()!\" aria-hidden=\"true\"></mat-icon>\n } @else if (effectiveIcon()) {\n <mat-icon class=\"acp-kpi-card__icon\" aria-hidden=\"true\">{{ effectiveIcon() }}</mat-icon>\n } @else if (avatarTemplate()) {\n <div class=\"acp-kpi-card__avatar\">\n <ng-container [ngTemplateOutlet]=\"avatarTemplate()!\"></ng-container>\n </div>\n } @else if (avatar()) {\n <img class=\"acp-kpi-card__avatar-image\" [src]=\"avatar()\" [alt]=\"title() || 'Avatar'\" />\n } @else if (avatarInitials()) {\n <div class=\"acp-kpi-card__avatar-initials\">{{ avatarInitials() }}</div>\n }\n </div>\n\n <!-- Title & Subtitle -->\n <div class=\"acp-kpi-card__title-container\">\n @if (title()) {\n <h3 class=\"acp-kpi-card__title\">{{ title() }}</h3>\n } @if (subtitle()) {\n <p class=\"acp-kpi-card__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n </div>\n\n <!-- Menu Button (optional) - Only show if actions template exists -->\n @if (hasActions()) {\n <button\n mat-icon-button\n [matMenuTriggerFor]=\"menu\"\n class=\"acp-kpi-card__menu-button\"\n aria-label=\"More options\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\" class=\"acp-kpi-card__menu\">\n <ng-container [ngTemplateOutlet]=\"actionsTemplate()!\"></ng-container>\n </mat-menu>\n }\n </mat-card-header>\n }\n\n <!-- Content -->\n <mat-card-content class=\"acp-kpi-card__content\">\n <!-- Main Value -->\n @if (value()) {\n <div class=\"acp-kpi-card__value-section\">\n <div class=\"acp-kpi-card__value\">{{ value() }}</div>\n\n <!-- Percentage & Trend -->\n @if (percentage() !== undefined) {\n <div class=\"acp-kpi-card__metric\">\n @if (isTrending()) {\n <mat-icon class=\"acp-kpi-card__trend-icon\" [attr.aria-label]=\"trendConfig().ariaLabel\">\n {{ trendConfig().icon }}\n </mat-icon>\n }\n <span class=\"acp-kpi-card__percentage\">\n {{ percentageFormat() === 'percent' ? (percentage() + '%') : percentage() }}\n </span>\n </div>\n }\n </div>\n }\n\n <!-- Description -->\n @if (description()) {\n <p class=\"acp-kpi-card__description\">{{ description() }}</p>\n }\n\n <!-- Progress Bar -->\n @if (progress() !== undefined) {\n <mat-progress-bar\n class=\"acp-kpi-card__progress\"\n mode=\"determinate\"\n [value]=\"progress()\"\n [color]=\"progressColor()\"\n ></mat-progress-bar>\n }\n </mat-card-content>\n\n <!-- Footer -->\n @if (hasFooter()) {\n <mat-divider></mat-divider>\n <div class=\"acp-kpi-card__footer\">\n @if (footerTemplate()) {\n <ng-container [ngTemplateOutlet]=\"footerTemplate()!\"></ng-container>\n } @else if (footer()) {\n <p class=\"acp-kpi-card__footer-text\">{{ footer() }}</p>\n }\n </div>\n } }\n</mat-card>\n", styles: [".acp-kpi-card{--acp-kpi-card-bg: var(--acp-kpi-card-primary-bg, var(--mat-sys-primary));--acp-kpi-card-fg: var(--acp-kpi-card-primary-color, var(--mat-sys-on-primary));display:flex;vertical-align:middle;width:100%;max-width:100%}.acp-kpi-card__card{width:100%;display:flex;flex-direction:column;border-radius:12px;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;background-color:#fff}.acp-kpi-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px;gap:12px}.acp-kpi-card__header-content{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.acp-kpi-card__icon-container{display:flex;align-items:center;justify-content:center;flex-shrink:0}.acp-kpi-card__icon{font-size:24px;width:24px;height:24px;color:var(--acp-kpi-card-fg)}.acp-kpi-card__avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--acp-kpi-card-bg) 30%,transparent);color:var(--acp-kpi-card-fg);font-weight:500;font-size:14px;flex-shrink:0}.acp-kpi-card__avatar-image{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}.acp-kpi-card__avatar-initials{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--acp-kpi-card-bg) 30%,transparent);color:var(--acp-kpi-card-fg);font-weight:500;font-size:14px;flex-shrink:0}.acp-kpi-card__title-container{flex:1;min-width:0}.acp-kpi-card__title{margin:0;font-size:14px;font-weight:500;letter-spacing:.25px;color:var(--acp-kpi-card-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acp-kpi-card__subtitle{margin:2px 0 0;font-size:12px;font-weight:400;letter-spacing:.4px;color:rgba(var(--acp-kpi-card-fg),.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acp-kpi-card__menu-button{flex-shrink:0;opacity:.7;transition:opacity .2s ease-in-out}.acp-kpi-card__menu-button:hover{opacity:1}.acp-kpi-card__menu-button:focus-visible{outline:2px solid currentColor;outline-offset:2px}.acp-kpi-card__menu{will-change:transform}.acp-kpi-card__content{flex:1;padding:16px;display:flex;flex-direction:column;gap:12px}.acp-kpi-card__value-section{display:flex;align-items:baseline;gap:8px}.acp-kpi-card__value{font-size:28px;font-weight:600;letter-spacing:-.5px;color:var(--acp-kpi-card-fg);line-height:1.2}.acp-kpi-card__metric{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:500;letter-spacing:.25px;color:rgba(var(--acp-kpi-card-fg),.8)}.acp-kpi-card__trend-icon{font-size:16px;width:16px;height:16px}.acp-kpi-card__percentage{white-space:nowrap}.acp-kpi-card.acp-kpi-card--success .acp-kpi-card__metric{color:var(--acp-kpi-card-success-color, light-dark(#ffffff, #013a00))}.acp-kpi-card.acp-kpi-card--success-light .acp-kpi-card__metric{color:var(--acp-kpi-card-success-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--warning .acp-kpi-card__metric{color:var(--acp-kpi-card-warning-color, light-dark(#ffffff, #502400))}.acp-kpi-card.acp-kpi-card--warning-light .acp-kpi-card__metric{color:var(--acp-kpi-card-warning-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--error .acp-kpi-card__metric{color:var(--acp-kpi-card-error-color, var(--mat-sys-on-error))}.acp-kpi-card.acp-kpi-card--error-light .acp-kpi-card__metric{color:var(--acp-kpi-card-error-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--info .acp-kpi-card__metric{color:var(--acp-kpi-card-info-color, light-dark(#ffffff, #002f65))}.acp-kpi-card.acp-kpi-card--info-light .acp-kpi-card__metric{color:var(--acp-kpi-card-info-light-color, var(--mat-sys-on-surface))}.acp-kpi-card__description{margin:0;font-size:12px;font-weight:400;letter-spacing:.4px;color:rgba(var(--acp-kpi-card-fg),.6);line-height:1.5}.acp-kpi-card__progress{height:4px;border-radius:2px;background-color:rgba(var(--acp-kpi-card-fg),.12)}.acp-kpi-card__footer{padding:12px 16px;font-size:12px;font-weight:400;letter-spacing:.4px;color:rgba(var(--acp-kpi-card-fg),.6)}.acp-kpi-card__footer-text{margin:0}.acp-kpi-card__skeleton{padding:16px;display:flex;flex-direction:column;gap:12px}.acp-kpi-card__skeleton-header{width:60%;height:16px;background:linear-gradient(90deg,#0000001a 25%,#0000000d,#0000001a 75%);background-size:200% 100%;animation:loading 1.5s infinite;border-radius:4px}.acp-kpi-card__skeleton-value{width:40%;height:28px;background:linear-gradient(90deg,#0000001a 25%,#0000000d,#0000001a 75%);background-size:200% 100%;animation:loading 1.5s infinite;border-radius:4px}.acp-kpi-card__skeleton-text{width:80%;height:12px;background:linear-gradient(90deg,#0000001a 25%,#0000000d,#0000001a 75%);background-size:200% 100%;animation:loading 1.5s infinite;border-radius:4px}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.acp-kpi-card.acp-kpi-card--primary{--acp-kpi-card-bg: var(--acp-kpi-card-primary-bg, var(--mat-sys-primary));--acp-kpi-card-fg: var(--acp-kpi-card-primary-color, var(--mat-sys-on-primary))}.acp-kpi-card.acp-kpi-card--secondary{--acp-kpi-card-bg: var(--acp-kpi-card-secondary-bg, var(--mat-sys-secondary));--acp-kpi-card-fg: var(--acp-kpi-card-secondary-color, var(--mat-sys-on-secondary))}.acp-kpi-card.acp-kpi-card--success{--acp-kpi-card-bg: var(--acp-kpi-card-success-bg, light-dark(#038b00, #03c700));--acp-kpi-card-fg: var(--acp-kpi-card-success-color, light-dark(#ffffff, #013a00))}.acp-kpi-card.acp-kpi-card--success-light{--acp-kpi-card-bg: var(--acp-kpi-card-success-light-bg, light-dark(#cbffb8, #014600));--acp-kpi-card-fg: var(--acp-kpi-card-success-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--warning{--acp-kpi-card-bg: var(--acp-kpi-card-warning-bg, light-dark(#e37100, #ffb787));--acp-kpi-card-fg: var(--acp-kpi-card-warning-color, light-dark(#ffffff, #502400))}.acp-kpi-card.acp-kpi-card--warning-light{--acp-kpi-card-bg: var(--acp-kpi-card-warning-light-bg, light-dark(#ffede4, #612d00));--acp-kpi-card-fg: var(--acp-kpi-card-warning-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--error{--acp-kpi-card-bg: var(--acp-kpi-card-error-bg, var(--mat-sys-error));--acp-kpi-card-fg: var(--acp-kpi-card-error-color, var(--mat-sys-on-error))}.acp-kpi-card.acp-kpi-card--error-light{--acp-kpi-card-bg: var(--acp-kpi-card-error-light-bg, light-dark(#ffedea, #7e0100));--acp-kpi-card-fg: var(--acp-kpi-card-error-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--info{--acp-kpi-card-bg: var(--acp-kpi-card-info-bg, light-dark(#0074e9, #7cabff));--acp-kpi-card-fg: var(--acp-kpi-card-info-color, light-dark(#ffffff, #002f65))}.acp-kpi-card.acp-kpi-card--info-light{--acp-kpi-card-bg: var(--acp-kpi-card-info-light-bg, light-dark(#ecf0ff, #003a7a));--acp-kpi-card-fg: var(--acp-kpi-card-info-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--neutral{--acp-kpi-card-bg: var(--acp-kpi-card-neutral-bg, var(--mat-sys-surface-variant));--acp-kpi-card-fg: var(--acp-kpi-card-neutral-color, var(--mat-sys-on-surface-variant))}.acp-kpi-card.acp-kpi-card--white{--acp-kpi-card-bg: #ffffff;--acp-kpi-card-fg: #1f2937}.acp-kpi-card.acp-kpi-card--custom{--acp-kpi-card-bg: var( --acp-kpi-card-custom-bg, var(--acp-kpi-card-custom-bg, var(--mat-sys-surface-container)) );--acp-kpi-card-fg: var( --acp-kpi-card-custom-fg, var(--acp-kpi-card-custom-color, var(--mat-sys-on-surface)) )}.acp-kpi-card.acp-kpi-card--default .acp-kpi-card__card{background:var(--acp-kpi-card-bg);color:var(--acp-kpi-card-fg);border:1px solid rgba(var(--acp-kpi-card-fg),.12)}.acp-kpi-card.acp-kpi-card--elevated .acp-kpi-card__card{background:var(--acp-kpi-card-bg);color:var(--acp-kpi-card-fg);box-shadow:0 3px 8px #00000014,0 1px 3px #0000000a}.acp-kpi-card.acp-kpi-card--outlined .acp-kpi-card__card{background:transparent;color:var(--acp-kpi-card-fg);border:2px solid rgba(var(--acp-kpi-card-fg),.2)}.acp-kpi-card.acp-kpi-card--filled .acp-kpi-card__card{background:var(--acp-kpi-card-bg);color:var(--acp-kpi-card-fg)}.acp-kpi-card.acp-kpi-card--tonal .acp-kpi-card__card{background:color-mix(in srgb,var(--acp-kpi-card-bg) 12%,transparent);color:var(--acp-kpi-card-fg);border:1px solid rgba(var(--acp-kpi-card-fg),.08)}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card{cursor:pointer}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card:hover{box-shadow:0 6px 12px #0000001a,0 2px 4px #0000000f;transform:translateY(-1px)}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card:active{transform:translateY(0);box-shadow:0 2px 4px #00000014}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card:focus-visible{outline:2px solid currentColor;outline-offset:2px}.acp-kpi-card.acp-kpi-card--disabled .acp-kpi-card__card{opacity:.6;cursor:not-allowed;pointer-events:none}.acp-kpi-card.acp-kpi-card--selected .acp-kpi-card__card{border:2px solid var(--acp-kpi-card-fg)}.acp-kpi-card.acp-kpi-card--loading .acp-kpi-card__card{pointer-events:none;opacity:.8}@media(max-width:768px){.acp-kpi-card__header,.acp-kpi-card__content{padding:12px}.acp-kpi-card__value{font-size:24px}.acp-kpi-card__title{font-size:13px}}@media(prefers-reduced-motion:reduce){.acp-kpi-card__card{transition:none}.acp-kpi-card__skeleton-header,.acp-kpi-card__skeleton-value,.acp-kpi-card__skeleton-text{animation:none}}@media(prefers-contrast:more){.acp-kpi-card__card{border-width:2px}}@media(max-width:768px){.acp-kpi-card__header,.acp-kpi-card__content{padding:12px;gap:8px}.acp-kpi-card__footer{padding:12px}.acp-kpi-card__icon{font-size:20px;width:20px;height:20px}.acp-kpi-card__avatar,.acp-kpi-card__avatar-image,.acp-kpi-card__avatar-initials{width:32px;height:32px;font-size:12px}.acp-kpi-card__title{font-size:13px}.acp-kpi-card__subtitle{font-size:11px}.acp-kpi-card__value{font-size:24px}}.acp-kpi-card__card.acp-kpi-card--xs{min-height:96px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__content{padding:8px;gap:6px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__footer{padding:8px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__icon{font-size:16px;width:16px;height:16px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__avatar-initials{width:28px;height:28px;font-size:11px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__title{font-size:12px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__subtitle{font-size:10px;margin-top:1px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__value{font-size:18px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__percentage{font-size:10px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__description{font-size:11px}.acp-kpi-card__card.acp-kpi-card--sm{min-height:128px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__content{padding:12px;gap:8px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__footer{padding:12px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__icon{font-size:20px;width:20px;height:20px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__avatar-initials{width:32px;height:32px;font-size:12px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__title{font-size:13px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__subtitle{font-size:11px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__value{font-size:22px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__percentage{font-size:11px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__description{font-size:12px}.acp-kpi-card__card.acp-kpi-card--md{min-height:160px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__content{padding:16px;gap:12px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__footer{padding:16px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__icon{font-size:24px;width:24px;height:24px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__avatar-initials{width:40px;height:40px;font-size:14px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__title{font-size:14px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__subtitle{font-size:12px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__value{font-size:28px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__percentage{font-size:12px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__description{font-size:13px}.acp-kpi-card__card.acp-kpi-card--lg{min-height:224px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__content{padding:20px;gap:16px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__footer{padding:20px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__icon{font-size:32px;width:32px;height:32px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__avatar-initials{width:48px;height:48px;font-size:16px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__title{font-size:16px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__subtitle{font-size:13px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__value{font-size:36px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__percentage,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__description{font-size:14px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10322
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpKpiCard, isStandalone: true, selector: "acp-kpi-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, avatarInitials: { classPropertyName: "avatarInitials", publicName: "avatarInitials", isSignal: true, isRequired: false, transformFunction: null }, percentage: { classPropertyName: "percentage", publicName: "percentage", isSignal: true, isRequired: false, transformFunction: null }, percentageFormat: { classPropertyName: "percentageFormat", publicName: "percentageFormat", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, lowerIsBetter: { classPropertyName: "lowerIsBetter", publicName: "lowerIsBetter", isSignal: true, isRequired: false, transformFunction: null }, trendLabel: { classPropertyName: "trendLabel", publicName: "trendLabel", isSignal: true, isRequired: false, transformFunction: null }, showTrendIcon: { classPropertyName: "showTrendIcon", publicName: "showTrendIcon", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, progressColor: { classPropertyName: "progressColor", publicName: "progressColor", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, menuAriaLabel: { classPropertyName: "menuAriaLabel", publicName: "menuAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class": "hostClasses()", "attr.title": "null", "attr.aria-busy": "loading() ? \"true\" : null" } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ["icon"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "avatarTemplate", first: true, predicate: ["avatar"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actions"], descendants: true, read: TemplateRef, isSignal: true }], exportAs: ["acpKpiCard"], ngImport: i0, template: "<mat-card\n class=\"acp-kpi-card__card\"\n [routerLink]=\"routerLink()\"\n [attr.role]=\"clickable() ? 'button' : null\"\n [attr.tabindex]=\"interactive() ? 0 : null\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-pressed]=\"clickable() && selected() ? 'true' : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [matTooltip]=\"tooltip() ?? ''\"\n [matTooltipDisabled]=\"!tooltip()\"\n (click)=\"onCardClick()\"\n (keydown.enter)=\"onCardKey($event)\"\n (keydown.space)=\"onCardKey($event)\"\n>\n @if (loading()) {\n <div class=\"acp-kpi-card__skeleton\" aria-hidden=\"true\">\n <span></span>\n <span></span>\n <span></span>\n </div>\n } @else { @if (hasHeader()) {\n <mat-card-header class=\"acp-kpi-card__header\">\n <div class=\"acp-kpi-card__header-content\">\n <div class=\"acp-kpi-card__icon-container\">\n @if (iconTemplate(); as tpl) {\n <ng-container [ngTemplateOutlet]=\"tpl\" />\n } @else if (svgIcon()) {\n <mat-icon class=\"acp-kpi-card__icon\" [svgIcon]=\"svgIcon()!\" aria-hidden=\"true\" />\n } @else if (icon()) {\n <mat-icon class=\"acp-kpi-card__icon\" aria-hidden=\"true\">{{ icon() }}</mat-icon>\n } @else if (avatarTemplate(); as tpl) {\n <div class=\"acp-kpi-card__avatar\">\n <ng-container [ngTemplateOutlet]=\"tpl\" />\n </div>\n } @else if (avatar()) {\n <img class=\"acp-kpi-card__avatar-image\" [src]=\"avatar()\" alt=\"\" />\n } @else if (avatarInitials()) {\n <div class=\"acp-kpi-card__avatar-initials\" aria-hidden=\"true\">{{ avatarInitials() }}</div>\n }\n </div>\n\n <div class=\"acp-kpi-card__title-container\">\n @if (title()) {\n <h3 class=\"acp-kpi-card__title\">{{ title() }}</h3>\n } @if (subtitle()) {\n <p class=\"acp-kpi-card__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n </div>\n\n @if (actionsTemplate(); as actions) {\n <button\n mat-icon-button\n class=\"acp-kpi-card__menu-button\"\n [matMenuTriggerFor]=\"menu\"\n [attr.aria-label]=\"menuAriaLabel()\"\n (click)=\"$event.stopPropagation()\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\" class=\"acp-kpi-card__menu\">\n <ng-container [ngTemplateOutlet]=\"actions\" />\n </mat-menu>\n }\n </mat-card-header>\n }\n\n <mat-card-content class=\"acp-kpi-card__content\">\n @if (formattedValue() !== null || formattedDelta() !== null) {\n <div class=\"acp-kpi-card__value-section\">\n @if (formattedValue() !== null) {\n <span class=\"acp-kpi-card__value\">\n @if (prefix()) {\n <span class=\"acp-kpi-card__affix\">{{ prefix() }}</span>\n } {{ formattedValue() }} @if (suffix()) {\n <span class=\"acp-kpi-card__affix\">{{ suffix() }}</span>\n }\n </span>\n } @if (formattedDelta() !== null) {\n <span class=\"acp-kpi-card__delta\" [class]=\"'acp-kpi-card__delta--' + sentiment()\">\n @if (showTrendIcon() && trendConfig().icon) {\n <mat-icon class=\"acp-kpi-card__trend-icon\" aria-hidden=\"true\">\n {{ trendConfig().icon }}\n </mat-icon>\n } @if (trendConfig().ariaLabel) {\n <span class=\"cdk-visually-hidden\">{{ trendConfig().ariaLabel }}</span>\n } {{ formattedDelta() }}\n </span>\n @if (trendLabel()) {\n <span class=\"acp-kpi-card__trend-label\">{{ trendLabel() }}</span>\n } }\n </div>\n } @if (description()) {\n <p class=\"acp-kpi-card__description\">{{ description() }}</p>\n } @if (progress() !== undefined) {\n <mat-progress-bar\n class=\"acp-kpi-card__progress\"\n [class]=\"progressColor() ? 'acp-kpi-card__progress--' + progressColor() : ''\"\n mode=\"determinate\"\n [value]=\"progress()\"\n [attr.aria-label]=\"title() ?? null\"\n />\n }\n </mat-card-content>\n\n @if (hasFooter()) {\n <div class=\"acp-kpi-card__footer\">\n @if (footerTemplate(); as tpl) {\n <ng-container [ngTemplateOutlet]=\"tpl\" />\n } @else {\n <p class=\"acp-kpi-card__footer-text\">{{ footer() }}</p>\n }\n </div>\n } }\n</mat-card>\n", styles: [".acp-kpi-card{display:block;width:100%;container:acp-kpi-card/inline-size}.acp-kpi-card .acp-kpi-card__card{--acp-kpi-card-emphasis: var(--acp-kpi-card-fg);--acp-kpi-card-muted: color-mix(in srgb, currentColor 72%, transparent);display:flex;flex-direction:column;width:100%;overflow:hidden;border-radius:var(--acp-kpi-card-container-shape, var(--mat-sys-corner-medium));border:1px solid transparent;background:var(--acp-kpi-card-bg);color:var(--acp-kpi-card-fg);transition:box-shadow .2s cubic-bezier(.2,0,0,1),transform .2s cubic-bezier(.2,0,0,1)}.acp-kpi-card__header .mat-mdc-card-header-text{display:none}.acp-kpi-card .acp-kpi-card__card .acp-kpi-card__header{display:flex;align-items:center;justify-content:space-between;gap:var(--acp-kpi-card-gap);padding:var(--acp-kpi-card-padding) var(--acp-kpi-card-padding) 0}.acp-kpi-card__header-content{display:flex;flex:1;align-items:center;justify-content:var(--acp-kpi-card-justify);gap:var(--acp-kpi-card-gap);min-width:0}.acp-kpi-card__icon-container{display:flex;flex-shrink:0;align-items:center;justify-content:center;color:var(--acp-kpi-card-emphasis)}.acp-kpi-card__icon-container:empty{display:none}.acp-kpi-card__icon{width:var(--acp-kpi-card-icon-size);height:var(--acp-kpi-card-icon-size);font-size:var(--acp-kpi-card-icon-size)}.acp-kpi-card__avatar,.acp-kpi-card__avatar-image,.acp-kpi-card__avatar-initials{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--acp-kpi-card-avatar-size);height:var(--acp-kpi-card-avatar-size);border-radius:50%;font-size:var(--acp-kpi-card-meta-size);font-weight:500}.acp-kpi-card__avatar,.acp-kpi-card__avatar-initials{background:color-mix(in srgb,var(--acp-kpi-card-emphasis) 16%,transparent)}.acp-kpi-card__avatar-image{object-fit:cover}.acp-kpi-card__title-container{min-width:0}.acp-kpi-card__title,.acp-kpi-card__subtitle{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.acp-kpi-card__title{margin:0;font:var(--mat-sys-title-small);font-size:var(--acp-kpi-card-title-size)}.acp-kpi-card__subtitle{margin:2px 0 0;font:var(--mat-sys-body-small);font-size:var(--acp-kpi-card-subtitle-size);color:var(--acp-kpi-card-muted)}.acp-kpi-card__menu-button{flex-shrink:0;color:inherit}.acp-kpi-card .acp-kpi-card__card .acp-kpi-card__content{display:flex;flex:1;flex-direction:column;gap:var(--acp-kpi-card-gap);padding:var(--acp-kpi-card-padding)}.acp-kpi-card__value-section{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:var(--acp-kpi-card-justify);gap:4px 8px}.acp-kpi-card__value{font-family:var(--mat-sys-headline-small-font);font-size:min(var(--acp-kpi-card-value-size),14cqi);font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2;letter-spacing:-.5px;color:var(--acp-kpi-card-emphasis)}.acp-kpi-card__affix{font-size:.6em;font-weight:500}.acp-kpi-card__delta{display:inline-flex;align-items:center;gap:2px;padding:2px 8px;border-radius:999px;font:var(--mat-sys-label-medium);font-size:var(--acp-kpi-card-meta-size);font-variant-numeric:tabular-nums;white-space:nowrap}.acp-kpi-card__delta--positive{background:var(--acp-kpi-card-delta-positive-bg, color-mix(in srgb, light-dark(#026e00, #02e600) 16%, var(--mat-sys-surface-container-lowest)));color:var(--acp-kpi-card-delta-positive-color, light-dark(#015300, #77ff61))}.acp-kpi-card__delta--negative{background:var(--acp-kpi-card-delta-negative-bg, var(--mat-sys-error-container));color:var(--acp-kpi-card-delta-negative-color, var(--mat-sys-on-error-container))}.acp-kpi-card__delta--neutral{background:var(--acp-kpi-card-delta-neutral-bg, var(--mat-sys-surface-container-highest));color:var(--acp-kpi-card-delta-neutral-color, var(--mat-sys-on-surface-variant))}.acp-kpi-card__trend-icon{width:16px;height:16px;font-size:16px}.acp-kpi-card__trend-label{font-size:var(--acp-kpi-card-meta-size);color:var(--acp-kpi-card-muted)}.acp-kpi-card__description{margin:0;font:var(--mat-sys-body-small);font-size:var(--acp-kpi-card-meta-size);color:var(--acp-kpi-card-muted)}.acp-kpi-card__progress{--mat-progress-bar-active-indicator-color: var(--acp-kpi-card-emphasis);--mat-progress-bar-track-color: color-mix(in srgb, currentColor 16%, transparent);--mat-progress-bar-track-shape: 2px}.acp-kpi-card__progress[class*=acp-kpi-card__progress--]{--mat-progress-bar-active-indicator-color: var(--acp-kpi-card-accent)}.acp-kpi-card__footer{padding:calc(var(--acp-kpi-card-padding) * .75) var(--acp-kpi-card-padding);border-top:1px solid color-mix(in srgb,currentColor 12%,transparent);font:var(--mat-sys-body-small);font-size:var(--acp-kpi-card-meta-size);color:var(--acp-kpi-card-muted)}.acp-kpi-card__footer-text{margin:0}.acp-kpi-card__skeleton{display:flex;flex-direction:column;gap:var(--acp-kpi-card-gap);padding:var(--acp-kpi-card-padding)}.acp-kpi-card__skeleton>span{display:block;height:12px;border-radius:4px;background:linear-gradient(90deg,color-mix(in srgb,currentColor 14%,transparent) 25%,color-mix(in srgb,currentColor 6%,transparent),color-mix(in srgb,currentColor 14%,transparent) 75%);background-size:200% 100%;animation:acp-kpi-card-shimmer 1.5s infinite}.acp-kpi-card__skeleton>span:nth-child(1){width:60%;height:16px}.acp-kpi-card__skeleton>span:nth-child(2){width:40%;height:var(--acp-kpi-card-value-size)}.acp-kpi-card__skeleton>span:nth-child(3){width:80%}.acp-kpi-card--xs{--acp-kpi-card-padding: 8px;--acp-kpi-card-gap: 6px;--acp-kpi-card-icon-size: 16px;--acp-kpi-card-avatar-size: 28px;--acp-kpi-card-title-size: 12px;--acp-kpi-card-subtitle-size: 10px;--acp-kpi-card-value-size: 18px;--acp-kpi-card-meta-size: 11px}.acp-kpi-card--sm{--acp-kpi-card-padding: 12px;--acp-kpi-card-gap: 8px;--acp-kpi-card-icon-size: 20px;--acp-kpi-card-avatar-size: 32px;--acp-kpi-card-title-size: 13px;--acp-kpi-card-subtitle-size: 11px;--acp-kpi-card-value-size: 22px;--acp-kpi-card-meta-size: 12px}.acp-kpi-card--md{--acp-kpi-card-padding: 16px;--acp-kpi-card-gap: 12px;--acp-kpi-card-icon-size: 24px;--acp-kpi-card-avatar-size: 40px;--acp-kpi-card-title-size: 14px;--acp-kpi-card-subtitle-size: 12px;--acp-kpi-card-value-size: 28px;--acp-kpi-card-meta-size: 13px}.acp-kpi-card--lg{--acp-kpi-card-padding: 20px;--acp-kpi-card-gap: 16px;--acp-kpi-card-icon-size: 32px;--acp-kpi-card-avatar-size: 48px;--acp-kpi-card-title-size: 16px;--acp-kpi-card-subtitle-size: 13px;--acp-kpi-card-value-size: 36px;--acp-kpi-card-meta-size: 14px}.acp-kpi-card--align-start{--acp-kpi-card-justify: flex-start}.acp-kpi-card--align-center{--acp-kpi-card-justify: center;text-align:center}.acp-kpi-card--align-end{--acp-kpi-card-justify: flex-end;text-align:end}.acp-kpi-card--primary,.acp-kpi-card__progress--primary{--acp-kpi-card-bg: var(--acp-kpi-card-primary-bg, var(--mat-sys-primary));--acp-kpi-card-fg: var(--acp-kpi-card-primary-color, var(--mat-sys-on-primary));--acp-kpi-card-accent: var(--acp-kpi-card-primary-accent, var(--mat-sys-primary))}.acp-kpi-card--secondary,.acp-kpi-card__progress--secondary{--acp-kpi-card-bg: var(--acp-kpi-card-secondary-bg, var(--mat-sys-secondary));--acp-kpi-card-fg: var(--acp-kpi-card-secondary-color, var(--mat-sys-on-secondary));--acp-kpi-card-accent: var(--acp-kpi-card-secondary-accent, var(--mat-sys-secondary))}.acp-kpi-card--success,.acp-kpi-card__progress--success{--acp-kpi-card-bg: var(--acp-kpi-card-success-bg, light-dark(#038b00, #03c700));--acp-kpi-card-fg: var(--acp-kpi-card-success-color, light-dark(#ffffff, #013a00));--acp-kpi-card-accent: var(--acp-kpi-card-success-accent, light-dark(#026e00, #02e600))}.acp-kpi-card--success-light,.acp-kpi-card__progress--success-light{--acp-kpi-card-bg: var(--acp-kpi-card-success-light-bg, light-dark(#cbffb8, #014600));--acp-kpi-card-fg: var(--acp-kpi-card-success-light-color, var(--mat-sys-on-surface));--acp-kpi-card-accent: var(--acp-kpi-card-success-accent, light-dark(#026e00, #02e600))}.acp-kpi-card--warning,.acp-kpi-card__progress--warning{--acp-kpi-card-bg: var(--acp-kpi-card-warning-bg, light-dark(#bc5d00, #ff8e36));--acp-kpi-card-fg: var(--acp-kpi-card-warning-color, light-dark(#ffffff, #502400));--acp-kpi-card-accent: var(--acp-kpi-card-warning-accent, light-dark(#964900, #ffb787))}.acp-kpi-card--warning-light,.acp-kpi-card__progress--warning-light{--acp-kpi-card-bg: var(--acp-kpi-card-warning-light-bg, light-dark(#ffede4, #612d00));--acp-kpi-card-fg: var(--acp-kpi-card-warning-light-color, var(--mat-sys-on-surface));--acp-kpi-card-accent: var(--acp-kpi-card-warning-accent, light-dark(#964900, #ffb787))}.acp-kpi-card--error,.acp-kpi-card__progress--error{--acp-kpi-card-bg: var(--acp-kpi-card-error-bg, var(--mat-sys-error));--acp-kpi-card-fg: var(--acp-kpi-card-error-color, var(--mat-sys-on-error));--acp-kpi-card-accent: var(--acp-kpi-card-error-accent, var(--mat-sys-error))}.acp-kpi-card--error-light,.acp-kpi-card__progress--error-light{--acp-kpi-card-bg: var(--acp-kpi-card-error-light-bg, light-dark(#ffedea, #7e0100));--acp-kpi-card-fg: var(--acp-kpi-card-error-light-color, var(--mat-sys-on-surface));--acp-kpi-card-accent: var(--acp-kpi-card-error-accent, var(--mat-sys-error))}.acp-kpi-card--info,.acp-kpi-card__progress--info{--acp-kpi-card-bg: var(--acp-kpi-card-info-bg, light-dark(#0074e9, #7cabff));--acp-kpi-card-fg: var(--acp-kpi-card-info-color, light-dark(#ffffff, #002f65));--acp-kpi-card-accent: var(--acp-kpi-card-info-accent, light-dark(#005cbb, #abc7ff))}.acp-kpi-card--info-light,.acp-kpi-card__progress--info-light{--acp-kpi-card-bg: var(--acp-kpi-card-info-light-bg, light-dark(#ecf0ff, #003a7a));--acp-kpi-card-fg: var(--acp-kpi-card-info-light-color, var(--mat-sys-on-surface));--acp-kpi-card-accent: var(--acp-kpi-card-info-accent, light-dark(#005cbb, #abc7ff))}.acp-kpi-card--neutral,.acp-kpi-card__progress--neutral{--acp-kpi-card-bg: var(--acp-kpi-card-neutral-bg, var(--mat-sys-surface-variant));--acp-kpi-card-fg: var(--acp-kpi-card-neutral-color, var(--mat-sys-on-surface-variant));--acp-kpi-card-accent: var(--acp-kpi-card-neutral-accent, var(--mat-sys-on-surface-variant))}.acp-kpi-card--surface,.acp-kpi-card__progress--surface{--acp-kpi-card-bg: var(--acp-kpi-card-surface-bg, var(--mat-sys-surface-container-lowest));--acp-kpi-card-fg: var(--acp-kpi-card-surface-color, var(--mat-sys-on-surface));--acp-kpi-card-accent: var(--acp-kpi-card-surface-accent, var(--mat-sys-primary))}.acp-kpi-card--custom{--acp-kpi-card-bg: var(--acp-kpi-card-custom-bg, var(--acp-kpi-card-custom-bg, var(--mat-sys-surface-container)));--acp-kpi-card-fg: var(--acp-kpi-card-custom-fg, var(--acp-kpi-card-custom-color, var(--mat-sys-on-surface)));--acp-kpi-card-accent: var(--acp-kpi-card-custom-accent, var(--acp-kpi-card-custom-accent, var(--mat-sys-primary)))}.acp-kpi-card--default .acp-kpi-card__card{box-shadow:var(--mat-sys-level1)}.acp-kpi-card--elevated .acp-kpi-card__card{box-shadow:var(--mat-sys-level2)}.acp-kpi-card--filled .acp-kpi-card__card{box-shadow:none}.acp-kpi-card--outlined .acp-kpi-card__card,.acp-kpi-card--tonal .acp-kpi-card__card{--acp-kpi-card-emphasis: var(--acp-kpi-card-accent);box-shadow:none;color:var(--mat-sys-on-surface)}.acp-kpi-card--outlined .acp-kpi-card__card{background:var(--mat-sys-surface);border-color:color-mix(in srgb,var(--acp-kpi-card-accent) 40%,transparent)}.acp-kpi-card--tonal .acp-kpi-card__card{background:color-mix(in srgb,var(--acp-kpi-card-accent) 12%,var(--mat-sys-surface))}.acp-kpi-card--clickable .acp-kpi-card__card{cursor:pointer}.acp-kpi-card--clickable .acp-kpi-card__card:hover{box-shadow:var(--mat-sys-level3);transform:translateY(-1px)}.acp-kpi-card--clickable .acp-kpi-card__card:active{box-shadow:var(--mat-sys-level1);transform:none}.acp-kpi-card__card:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:2px}.acp-kpi-card--selected .acp-kpi-card__card{border-color:var(--acp-kpi-card-emphasis);box-shadow:inset 0 0 0 1px var(--acp-kpi-card-emphasis)}.acp-kpi-card--disabled .acp-kpi-card__card{opacity:.6;pointer-events:none}@media(prefers-reduced-motion:reduce){.acp-kpi-card__card{transition:none}.acp-kpi-card--clickable .acp-kpi-card__card:hover{transform:none}.acp-kpi-card__skeleton>span{animation:none}}@keyframes acp-kpi-card-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i4$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
9901
10323
|
}
|
|
9902
10324
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpKpiCard, decorators: [{
|
|
9903
10325
|
type: Component,
|
|
@@ -9911,43 +10333,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
9911
10333
|
MatButtonModule,
|
|
9912
10334
|
MatMenuModule,
|
|
9913
10335
|
MatProgressBarModule,
|
|
9914
|
-
MatDividerModule,
|
|
9915
10336
|
MatTooltipModule,
|
|
9916
10337
|
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
9917
10338
|
'[class]': 'hostClasses()',
|
|
9918
|
-
}, 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"] }]
|
|
9919
|
-
|
|
9920
|
-
|
|
9921
|
-
|
|
9922
|
-
// Sizes
|
|
9923
|
-
SIZE_SM: 'sm',
|
|
9924
|
-
SIZE_MD: 'md',
|
|
9925
|
-
SIZE_LG: 'lg',
|
|
9926
|
-
// Variants
|
|
9927
|
-
VARIANT_DEFAULT: 'default',
|
|
9928
|
-
VARIANT_ELEVATED: 'elevated',
|
|
9929
|
-
VARIANT_OUTLINED: 'outlined',
|
|
9930
|
-
VARIANT_FILLED: 'filled',
|
|
9931
|
-
VARIANT_TONAL: 'tonal',
|
|
9932
|
-
// Colors
|
|
9933
|
-
COLOR_PRIMARY: 'primary',
|
|
9934
|
-
COLOR_SECONDARY: 'secondary',
|
|
9935
|
-
COLOR_SUCCESS: 'success',
|
|
9936
|
-
COLOR_SUCCESS_LIGHT: 'success-light',
|
|
9937
|
-
COLOR_WARNING: 'warning',
|
|
9938
|
-
COLOR_WARNING_LIGHT: 'warning-light',
|
|
9939
|
-
COLOR_ERROR: 'error',
|
|
9940
|
-
COLOR_ERROR_LIGHT: 'error-light',
|
|
9941
|
-
COLOR_INFO: 'info',
|
|
9942
|
-
COLOR_INFO_LIGHT: 'info-light',
|
|
9943
|
-
COLOR_NEUTRAL: 'neutral',
|
|
9944
|
-
COLOR_CUSTOM: 'custom',
|
|
9945
|
-
// Trends
|
|
9946
|
-
TREND_UP: 'up',
|
|
9947
|
-
TREND_DOWN: 'down',
|
|
9948
|
-
TREND_NEUTRAL: 'neutral',
|
|
9949
|
-
TREND_NONE: 'none',
|
|
9950
|
-
};
|
|
10339
|
+
'[attr.title]': 'null',
|
|
10340
|
+
'[attr.aria-busy]': 'loading() ? "true" : null',
|
|
10341
|
+
}, template: "<mat-card\n class=\"acp-kpi-card__card\"\n [routerLink]=\"routerLink()\"\n [attr.role]=\"clickable() ? 'button' : null\"\n [attr.tabindex]=\"interactive() ? 0 : null\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-pressed]=\"clickable() && selected() ? 'true' : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [matTooltip]=\"tooltip() ?? ''\"\n [matTooltipDisabled]=\"!tooltip()\"\n (click)=\"onCardClick()\"\n (keydown.enter)=\"onCardKey($event)\"\n (keydown.space)=\"onCardKey($event)\"\n>\n @if (loading()) {\n <div class=\"acp-kpi-card__skeleton\" aria-hidden=\"true\">\n <span></span>\n <span></span>\n <span></span>\n </div>\n } @else { @if (hasHeader()) {\n <mat-card-header class=\"acp-kpi-card__header\">\n <div class=\"acp-kpi-card__header-content\">\n <div class=\"acp-kpi-card__icon-container\">\n @if (iconTemplate(); as tpl) {\n <ng-container [ngTemplateOutlet]=\"tpl\" />\n } @else if (svgIcon()) {\n <mat-icon class=\"acp-kpi-card__icon\" [svgIcon]=\"svgIcon()!\" aria-hidden=\"true\" />\n } @else if (icon()) {\n <mat-icon class=\"acp-kpi-card__icon\" aria-hidden=\"true\">{{ icon() }}</mat-icon>\n } @else if (avatarTemplate(); as tpl) {\n <div class=\"acp-kpi-card__avatar\">\n <ng-container [ngTemplateOutlet]=\"tpl\" />\n </div>\n } @else if (avatar()) {\n <img class=\"acp-kpi-card__avatar-image\" [src]=\"avatar()\" alt=\"\" />\n } @else if (avatarInitials()) {\n <div class=\"acp-kpi-card__avatar-initials\" aria-hidden=\"true\">{{ avatarInitials() }}</div>\n }\n </div>\n\n <div class=\"acp-kpi-card__title-container\">\n @if (title()) {\n <h3 class=\"acp-kpi-card__title\">{{ title() }}</h3>\n } @if (subtitle()) {\n <p class=\"acp-kpi-card__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n </div>\n\n @if (actionsTemplate(); as actions) {\n <button\n mat-icon-button\n class=\"acp-kpi-card__menu-button\"\n [matMenuTriggerFor]=\"menu\"\n [attr.aria-label]=\"menuAriaLabel()\"\n (click)=\"$event.stopPropagation()\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\" class=\"acp-kpi-card__menu\">\n <ng-container [ngTemplateOutlet]=\"actions\" />\n </mat-menu>\n }\n </mat-card-header>\n }\n\n <mat-card-content class=\"acp-kpi-card__content\">\n @if (formattedValue() !== null || formattedDelta() !== null) {\n <div class=\"acp-kpi-card__value-section\">\n @if (formattedValue() !== null) {\n <span class=\"acp-kpi-card__value\">\n @if (prefix()) {\n <span class=\"acp-kpi-card__affix\">{{ prefix() }}</span>\n } {{ formattedValue() }} @if (suffix()) {\n <span class=\"acp-kpi-card__affix\">{{ suffix() }}</span>\n }\n </span>\n } @if (formattedDelta() !== null) {\n <span class=\"acp-kpi-card__delta\" [class]=\"'acp-kpi-card__delta--' + sentiment()\">\n @if (showTrendIcon() && trendConfig().icon) {\n <mat-icon class=\"acp-kpi-card__trend-icon\" aria-hidden=\"true\">\n {{ trendConfig().icon }}\n </mat-icon>\n } @if (trendConfig().ariaLabel) {\n <span class=\"cdk-visually-hidden\">{{ trendConfig().ariaLabel }}</span>\n } {{ formattedDelta() }}\n </span>\n @if (trendLabel()) {\n <span class=\"acp-kpi-card__trend-label\">{{ trendLabel() }}</span>\n } }\n </div>\n } @if (description()) {\n <p class=\"acp-kpi-card__description\">{{ description() }}</p>\n } @if (progress() !== undefined) {\n <mat-progress-bar\n class=\"acp-kpi-card__progress\"\n [class]=\"progressColor() ? 'acp-kpi-card__progress--' + progressColor() : ''\"\n mode=\"determinate\"\n [value]=\"progress()\"\n [attr.aria-label]=\"title() ?? null\"\n />\n }\n </mat-card-content>\n\n @if (hasFooter()) {\n <div class=\"acp-kpi-card__footer\">\n @if (footerTemplate(); as tpl) {\n <ng-container [ngTemplateOutlet]=\"tpl\" />\n } @else {\n <p class=\"acp-kpi-card__footer-text\">{{ footer() }}</p>\n }\n </div>\n } }\n</mat-card>\n", styles: [".acp-kpi-card{display:block;width:100%;container:acp-kpi-card/inline-size}.acp-kpi-card .acp-kpi-card__card{--acp-kpi-card-emphasis: var(--acp-kpi-card-fg);--acp-kpi-card-muted: color-mix(in srgb, currentColor 72%, transparent);display:flex;flex-direction:column;width:100%;overflow:hidden;border-radius:var(--acp-kpi-card-container-shape, var(--mat-sys-corner-medium));border:1px solid transparent;background:var(--acp-kpi-card-bg);color:var(--acp-kpi-card-fg);transition:box-shadow .2s cubic-bezier(.2,0,0,1),transform .2s cubic-bezier(.2,0,0,1)}.acp-kpi-card__header .mat-mdc-card-header-text{display:none}.acp-kpi-card .acp-kpi-card__card .acp-kpi-card__header{display:flex;align-items:center;justify-content:space-between;gap:var(--acp-kpi-card-gap);padding:var(--acp-kpi-card-padding) var(--acp-kpi-card-padding) 0}.acp-kpi-card__header-content{display:flex;flex:1;align-items:center;justify-content:var(--acp-kpi-card-justify);gap:var(--acp-kpi-card-gap);min-width:0}.acp-kpi-card__icon-container{display:flex;flex-shrink:0;align-items:center;justify-content:center;color:var(--acp-kpi-card-emphasis)}.acp-kpi-card__icon-container:empty{display:none}.acp-kpi-card__icon{width:var(--acp-kpi-card-icon-size);height:var(--acp-kpi-card-icon-size);font-size:var(--acp-kpi-card-icon-size)}.acp-kpi-card__avatar,.acp-kpi-card__avatar-image,.acp-kpi-card__avatar-initials{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--acp-kpi-card-avatar-size);height:var(--acp-kpi-card-avatar-size);border-radius:50%;font-size:var(--acp-kpi-card-meta-size);font-weight:500}.acp-kpi-card__avatar,.acp-kpi-card__avatar-initials{background:color-mix(in srgb,var(--acp-kpi-card-emphasis) 16%,transparent)}.acp-kpi-card__avatar-image{object-fit:cover}.acp-kpi-card__title-container{min-width:0}.acp-kpi-card__title,.acp-kpi-card__subtitle{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.acp-kpi-card__title{margin:0;font:var(--mat-sys-title-small);font-size:var(--acp-kpi-card-title-size)}.acp-kpi-card__subtitle{margin:2px 0 0;font:var(--mat-sys-body-small);font-size:var(--acp-kpi-card-subtitle-size);color:var(--acp-kpi-card-muted)}.acp-kpi-card__menu-button{flex-shrink:0;color:inherit}.acp-kpi-card .acp-kpi-card__card .acp-kpi-card__content{display:flex;flex:1;flex-direction:column;gap:var(--acp-kpi-card-gap);padding:var(--acp-kpi-card-padding)}.acp-kpi-card__value-section{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:var(--acp-kpi-card-justify);gap:4px 8px}.acp-kpi-card__value{font-family:var(--mat-sys-headline-small-font);font-size:min(var(--acp-kpi-card-value-size),14cqi);font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2;letter-spacing:-.5px;color:var(--acp-kpi-card-emphasis)}.acp-kpi-card__affix{font-size:.6em;font-weight:500}.acp-kpi-card__delta{display:inline-flex;align-items:center;gap:2px;padding:2px 8px;border-radius:999px;font:var(--mat-sys-label-medium);font-size:var(--acp-kpi-card-meta-size);font-variant-numeric:tabular-nums;white-space:nowrap}.acp-kpi-card__delta--positive{background:var(--acp-kpi-card-delta-positive-bg, color-mix(in srgb, light-dark(#026e00, #02e600) 16%, var(--mat-sys-surface-container-lowest)));color:var(--acp-kpi-card-delta-positive-color, light-dark(#015300, #77ff61))}.acp-kpi-card__delta--negative{background:var(--acp-kpi-card-delta-negative-bg, var(--mat-sys-error-container));color:var(--acp-kpi-card-delta-negative-color, var(--mat-sys-on-error-container))}.acp-kpi-card__delta--neutral{background:var(--acp-kpi-card-delta-neutral-bg, var(--mat-sys-surface-container-highest));color:var(--acp-kpi-card-delta-neutral-color, var(--mat-sys-on-surface-variant))}.acp-kpi-card__trend-icon{width:16px;height:16px;font-size:16px}.acp-kpi-card__trend-label{font-size:var(--acp-kpi-card-meta-size);color:var(--acp-kpi-card-muted)}.acp-kpi-card__description{margin:0;font:var(--mat-sys-body-small);font-size:var(--acp-kpi-card-meta-size);color:var(--acp-kpi-card-muted)}.acp-kpi-card__progress{--mat-progress-bar-active-indicator-color: var(--acp-kpi-card-emphasis);--mat-progress-bar-track-color: color-mix(in srgb, currentColor 16%, transparent);--mat-progress-bar-track-shape: 2px}.acp-kpi-card__progress[class*=acp-kpi-card__progress--]{--mat-progress-bar-active-indicator-color: var(--acp-kpi-card-accent)}.acp-kpi-card__footer{padding:calc(var(--acp-kpi-card-padding) * .75) var(--acp-kpi-card-padding);border-top:1px solid color-mix(in srgb,currentColor 12%,transparent);font:var(--mat-sys-body-small);font-size:var(--acp-kpi-card-meta-size);color:var(--acp-kpi-card-muted)}.acp-kpi-card__footer-text{margin:0}.acp-kpi-card__skeleton{display:flex;flex-direction:column;gap:var(--acp-kpi-card-gap);padding:var(--acp-kpi-card-padding)}.acp-kpi-card__skeleton>span{display:block;height:12px;border-radius:4px;background:linear-gradient(90deg,color-mix(in srgb,currentColor 14%,transparent) 25%,color-mix(in srgb,currentColor 6%,transparent),color-mix(in srgb,currentColor 14%,transparent) 75%);background-size:200% 100%;animation:acp-kpi-card-shimmer 1.5s infinite}.acp-kpi-card__skeleton>span:nth-child(1){width:60%;height:16px}.acp-kpi-card__skeleton>span:nth-child(2){width:40%;height:var(--acp-kpi-card-value-size)}.acp-kpi-card__skeleton>span:nth-child(3){width:80%}.acp-kpi-card--xs{--acp-kpi-card-padding: 8px;--acp-kpi-card-gap: 6px;--acp-kpi-card-icon-size: 16px;--acp-kpi-card-avatar-size: 28px;--acp-kpi-card-title-size: 12px;--acp-kpi-card-subtitle-size: 10px;--acp-kpi-card-value-size: 18px;--acp-kpi-card-meta-size: 11px}.acp-kpi-card--sm{--acp-kpi-card-padding: 12px;--acp-kpi-card-gap: 8px;--acp-kpi-card-icon-size: 20px;--acp-kpi-card-avatar-size: 32px;--acp-kpi-card-title-size: 13px;--acp-kpi-card-subtitle-size: 11px;--acp-kpi-card-value-size: 22px;--acp-kpi-card-meta-size: 12px}.acp-kpi-card--md{--acp-kpi-card-padding: 16px;--acp-kpi-card-gap: 12px;--acp-kpi-card-icon-size: 24px;--acp-kpi-card-avatar-size: 40px;--acp-kpi-card-title-size: 14px;--acp-kpi-card-subtitle-size: 12px;--acp-kpi-card-value-size: 28px;--acp-kpi-card-meta-size: 13px}.acp-kpi-card--lg{--acp-kpi-card-padding: 20px;--acp-kpi-card-gap: 16px;--acp-kpi-card-icon-size: 32px;--acp-kpi-card-avatar-size: 48px;--acp-kpi-card-title-size: 16px;--acp-kpi-card-subtitle-size: 13px;--acp-kpi-card-value-size: 36px;--acp-kpi-card-meta-size: 14px}.acp-kpi-card--align-start{--acp-kpi-card-justify: flex-start}.acp-kpi-card--align-center{--acp-kpi-card-justify: center;text-align:center}.acp-kpi-card--align-end{--acp-kpi-card-justify: flex-end;text-align:end}.acp-kpi-card--primary,.acp-kpi-card__progress--primary{--acp-kpi-card-bg: var(--acp-kpi-card-primary-bg, var(--mat-sys-primary));--acp-kpi-card-fg: var(--acp-kpi-card-primary-color, var(--mat-sys-on-primary));--acp-kpi-card-accent: var(--acp-kpi-card-primary-accent, var(--mat-sys-primary))}.acp-kpi-card--secondary,.acp-kpi-card__progress--secondary{--acp-kpi-card-bg: var(--acp-kpi-card-secondary-bg, var(--mat-sys-secondary));--acp-kpi-card-fg: var(--acp-kpi-card-secondary-color, var(--mat-sys-on-secondary));--acp-kpi-card-accent: var(--acp-kpi-card-secondary-accent, var(--mat-sys-secondary))}.acp-kpi-card--success,.acp-kpi-card__progress--success{--acp-kpi-card-bg: var(--acp-kpi-card-success-bg, light-dark(#038b00, #03c700));--acp-kpi-card-fg: var(--acp-kpi-card-success-color, light-dark(#ffffff, #013a00));--acp-kpi-card-accent: var(--acp-kpi-card-success-accent, light-dark(#026e00, #02e600))}.acp-kpi-card--success-light,.acp-kpi-card__progress--success-light{--acp-kpi-card-bg: var(--acp-kpi-card-success-light-bg, light-dark(#cbffb8, #014600));--acp-kpi-card-fg: var(--acp-kpi-card-success-light-color, var(--mat-sys-on-surface));--acp-kpi-card-accent: var(--acp-kpi-card-success-accent, light-dark(#026e00, #02e600))}.acp-kpi-card--warning,.acp-kpi-card__progress--warning{--acp-kpi-card-bg: var(--acp-kpi-card-warning-bg, light-dark(#bc5d00, #ff8e36));--acp-kpi-card-fg: var(--acp-kpi-card-warning-color, light-dark(#ffffff, #502400));--acp-kpi-card-accent: var(--acp-kpi-card-warning-accent, light-dark(#964900, #ffb787))}.acp-kpi-card--warning-light,.acp-kpi-card__progress--warning-light{--acp-kpi-card-bg: var(--acp-kpi-card-warning-light-bg, light-dark(#ffede4, #612d00));--acp-kpi-card-fg: var(--acp-kpi-card-warning-light-color, var(--mat-sys-on-surface));--acp-kpi-card-accent: var(--acp-kpi-card-warning-accent, light-dark(#964900, #ffb787))}.acp-kpi-card--error,.acp-kpi-card__progress--error{--acp-kpi-card-bg: var(--acp-kpi-card-error-bg, var(--mat-sys-error));--acp-kpi-card-fg: var(--acp-kpi-card-error-color, var(--mat-sys-on-error));--acp-kpi-card-accent: var(--acp-kpi-card-error-accent, var(--mat-sys-error))}.acp-kpi-card--error-light,.acp-kpi-card__progress--error-light{--acp-kpi-card-bg: var(--acp-kpi-card-error-light-bg, light-dark(#ffedea, #7e0100));--acp-kpi-card-fg: var(--acp-kpi-card-error-light-color, var(--mat-sys-on-surface));--acp-kpi-card-accent: var(--acp-kpi-card-error-accent, var(--mat-sys-error))}.acp-kpi-card--info,.acp-kpi-card__progress--info{--acp-kpi-card-bg: var(--acp-kpi-card-info-bg, light-dark(#0074e9, #7cabff));--acp-kpi-card-fg: var(--acp-kpi-card-info-color, light-dark(#ffffff, #002f65));--acp-kpi-card-accent: var(--acp-kpi-card-info-accent, light-dark(#005cbb, #abc7ff))}.acp-kpi-card--info-light,.acp-kpi-card__progress--info-light{--acp-kpi-card-bg: var(--acp-kpi-card-info-light-bg, light-dark(#ecf0ff, #003a7a));--acp-kpi-card-fg: var(--acp-kpi-card-info-light-color, var(--mat-sys-on-surface));--acp-kpi-card-accent: var(--acp-kpi-card-info-accent, light-dark(#005cbb, #abc7ff))}.acp-kpi-card--neutral,.acp-kpi-card__progress--neutral{--acp-kpi-card-bg: var(--acp-kpi-card-neutral-bg, var(--mat-sys-surface-variant));--acp-kpi-card-fg: var(--acp-kpi-card-neutral-color, var(--mat-sys-on-surface-variant));--acp-kpi-card-accent: var(--acp-kpi-card-neutral-accent, var(--mat-sys-on-surface-variant))}.acp-kpi-card--surface,.acp-kpi-card__progress--surface{--acp-kpi-card-bg: var(--acp-kpi-card-surface-bg, var(--mat-sys-surface-container-lowest));--acp-kpi-card-fg: var(--acp-kpi-card-surface-color, var(--mat-sys-on-surface));--acp-kpi-card-accent: var(--acp-kpi-card-surface-accent, var(--mat-sys-primary))}.acp-kpi-card--custom{--acp-kpi-card-bg: var(--acp-kpi-card-custom-bg, var(--acp-kpi-card-custom-bg, var(--mat-sys-surface-container)));--acp-kpi-card-fg: var(--acp-kpi-card-custom-fg, var(--acp-kpi-card-custom-color, var(--mat-sys-on-surface)));--acp-kpi-card-accent: var(--acp-kpi-card-custom-accent, var(--acp-kpi-card-custom-accent, var(--mat-sys-primary)))}.acp-kpi-card--default .acp-kpi-card__card{box-shadow:var(--mat-sys-level1)}.acp-kpi-card--elevated .acp-kpi-card__card{box-shadow:var(--mat-sys-level2)}.acp-kpi-card--filled .acp-kpi-card__card{box-shadow:none}.acp-kpi-card--outlined .acp-kpi-card__card,.acp-kpi-card--tonal .acp-kpi-card__card{--acp-kpi-card-emphasis: var(--acp-kpi-card-accent);box-shadow:none;color:var(--mat-sys-on-surface)}.acp-kpi-card--outlined .acp-kpi-card__card{background:var(--mat-sys-surface);border-color:color-mix(in srgb,var(--acp-kpi-card-accent) 40%,transparent)}.acp-kpi-card--tonal .acp-kpi-card__card{background:color-mix(in srgb,var(--acp-kpi-card-accent) 12%,var(--mat-sys-surface))}.acp-kpi-card--clickable .acp-kpi-card__card{cursor:pointer}.acp-kpi-card--clickable .acp-kpi-card__card:hover{box-shadow:var(--mat-sys-level3);transform:translateY(-1px)}.acp-kpi-card--clickable .acp-kpi-card__card:active{box-shadow:var(--mat-sys-level1);transform:none}.acp-kpi-card__card:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:2px}.acp-kpi-card--selected .acp-kpi-card__card{border-color:var(--acp-kpi-card-emphasis);box-shadow:inset 0 0 0 1px var(--acp-kpi-card-emphasis)}.acp-kpi-card--disabled .acp-kpi-card__card{opacity:.6;pointer-events:none}@media(prefers-reduced-motion:reduce){.acp-kpi-card__card{transition:none}.acp-kpi-card--clickable .acp-kpi-card__card:hover{transform:none}.acp-kpi-card__skeleton>span{animation:none}}@keyframes acp-kpi-card-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
|
|
10342
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], svgIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "svgIcon", required: false }] }], avatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatar", required: false }] }], avatarInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarInitials", required: false }] }], percentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentage", required: false }] }], percentageFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentageFormat", required: false }] }], trend: [{ type: i0.Input, args: [{ isSignal: true, alias: "trend", required: false }] }], lowerIsBetter: [{ type: i0.Input, args: [{ isSignal: true, alias: "lowerIsBetter", required: false }] }], trendLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendLabel", required: false }] }], showTrendIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrendIcon", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], progressColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressColor", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], menuAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuAriaLabel", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], iconTemplate: [{ type: i0.ContentChild, args: ['icon', { ...{ read: TemplateRef }, isSignal: true }] }], avatarTemplate: [{ type: i0.ContentChild, args: ['avatar', { ...{ read: TemplateRef }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: ['footer', { ...{ read: TemplateRef }, isSignal: true }] }], actionsTemplate: [{ type: i0.ContentChild, args: ['actions', { ...{ read: TemplateRef }, isSignal: true }] }] } });
|
|
9951
10343
|
|
|
9952
10344
|
class Branding {
|
|
9953
10345
|
logo = input(null, /* @ts-ignore */
|
|
@@ -10018,7 +10410,7 @@ class AcpHeader {
|
|
|
10018
10410
|
<div class="acp-header__spacer"></div>
|
|
10019
10411
|
<ng-content select="acp-header-end" />
|
|
10020
10412
|
</mat-toolbar>
|
|
10021
|
-
`, isInline: true, styles: [".acontplus-header{--mat-toolbar-container-background-color: transparent;position:relative;z-index:200;display:block;height:60px;background-color:var(--acp-header-background-color, var(--mat-sys-surface));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);--mat-icon-color: #ffffff}.acp-header__region{display:flex;align-items:center;gap:8px}.acp-header__region--left{flex:0 0 auto}.acp-header__region--center{flex:0 1 auto;justify-content:center}.acp-header__region--end{display:flex;flex:0 0 auto;margin-left:auto}.acp-header__spacer{flex:1 1 auto}.acp-header__branding{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;transition:opacity .2s ease}.acp-header__branding:hover{opacity:.8}.acp-header__logo{height:32px;width:auto;max-width:120px;object-fit:contain}.acp-header__brand-name{font-size:1.125rem;font-weight:500;line-height:1.2}.acp-header__avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}.acp-header__badge{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;font-size:10px;font-weight:600;line-height:16px;text-align:center;border-radius:8px;background-color:var(--mat-sys-error);color:var(--mat-sys-on-error)}.acp-header__user-menu{position:relative}.acp-header__search{display:flex;align-items:center;gap:8px;padding:0 8px;background-color:#ffffff1a;border-radius:4px;transition:background-color .2s ease}.acp-header__search:hover{background-color:#ffffff26}.acp-header__search-icon{font-size:20px;color:#ffffffb3}.acp-header__search-input{background:transparent;border:none;outline:none;color:#fff;font-size:14px;width:200px;padding:4px 0}.acp-header__search-input::placeholder{color:#ffffff80}.acp-header__search-clear{width:24px;height:24px}.acp-header__search-clear .mat-icon{font-size:18px}@media(max-width:768px){.acp-header{padding:0 12px;min-height:56px}.acp-header__brand-name{display:none}.acp-header__logo{max-width:100px}.acp-header__search-input{width:120px}}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i1$
|
|
10413
|
+
`, isInline: true, styles: [".acontplus-header{--mat-toolbar-container-background-color: transparent;position:relative;z-index:200;display:block;height:60px;background-color:var(--acp-header-background-color, var(--mat-sys-surface));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);--mat-icon-color: #ffffff}.acp-header__region{display:flex;align-items:center;gap:8px}.acp-header__region--left{flex:0 0 auto}.acp-header__region--center{flex:0 1 auto;justify-content:center}.acp-header__region--end{display:flex;flex:0 0 auto;margin-left:auto}.acp-header__spacer{flex:1 1 auto}.acp-header__branding{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;transition:opacity .2s ease}.acp-header__branding:hover{opacity:.8}.acp-header__logo{height:32px;width:auto;max-width:120px;object-fit:contain}.acp-header__brand-name{font-size:1.125rem;font-weight:500;line-height:1.2}.acp-header__avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}.acp-header__badge{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;font-size:10px;font-weight:600;line-height:16px;text-align:center;border-radius:8px;background-color:var(--mat-sys-error);color:var(--mat-sys-on-error)}.acp-header__user-menu{position:relative}.acp-header__search{display:flex;align-items:center;gap:8px;padding:0 8px;background-color:#ffffff1a;border-radius:4px;transition:background-color .2s ease}.acp-header__search:hover{background-color:#ffffff26}.acp-header__search-icon{font-size:20px;color:#ffffffb3}.acp-header__search-input{background:transparent;border:none;outline:none;color:#fff;font-size:14px;width:200px;padding:4px 0}.acp-header__search-input::placeholder{color:#ffffff80}.acp-header__search-clear{width:24px;height:24px}.acp-header__search-clear .mat-icon{font-size:18px}@media(max-width:768px){.acp-header{padding:0 12px;min-height:56px}.acp-header__brand-name{display:none}.acp-header__logo{max-width:100px}.acp-header__search-input{width:120px}}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i1$7.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10022
10414
|
}
|
|
10023
10415
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpHeader, decorators: [{
|
|
10024
10416
|
type: Component,
|
|
@@ -10231,7 +10623,7 @@ class AcpHeaderActions {
|
|
|
10231
10623
|
</button>
|
|
10232
10624
|
}
|
|
10233
10625
|
}
|
|
10234
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type:
|
|
10626
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
|
|
10235
10627
|
}
|
|
10236
10628
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpHeaderActions, decorators: [{
|
|
10237
10629
|
type: Component,
|
|
@@ -11025,7 +11417,7 @@ class UserMenu {
|
|
|
11025
11417
|
</div>
|
|
11026
11418
|
</div>
|
|
11027
11419
|
</mat-menu>
|
|
11028
|
-
`, isInline: true, styles: [".acp-user-menu__trigger{width:40px;height:40px;border-radius:50%;overflow:hidden}.acp-user-menu__avatar{width:100%;height:100%;object-fit:cover;border-radius:calc(infinity * 1px)}.acp-user-menu__panel .mat-mdc-menu-panel{border-radius:20px!important;background:var(--mat-sys-surface-container)!important;box-shadow:0 8px 32px #0000001f!important;min-width:280px;max-width:320px;padding:0;overflow:hidden}.acp-user-menu__panel .mat-mdc-menu-content{padding:0!important}.acp-user-menu__content{display:flex;flex-direction:column;color:var(--mat-sys-on-surface)}.acp-user-menu__items{display:flex;flex-direction:column;padding:var(--mat-sys-spacing-small, 8px);gap:4px}@media(prefers-color-scheme:dark){.acp-user-menu__panel .mat-mdc-menu-panel{background:var(--mat-sys-surface-container-high)!important;box-shadow:0 8px 32px #0006!important}}.acp-user-menu-header__content{padding-block:calc(var(--acp-spacing, .25rem) * 4);padding-inline:calc(var(--acp-spacing, .25rem) * 5);display:flex;align-items:center;gap:calc(var(--acp-spacing) * 4)}.acp-user-menu-header__avatar{flex-shrink:0;width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--mat-sys-surface-container-highest)}.acp-user-menu-header__avatar-img{width:100%;height:100%;object-fit:cover}.acp-user-menu-header__info{flex:1;min-width:0}.acp-user-menu-header__name-row{display:flex;align-items:center;gap:var(--mat-sys-spacing-small, 8px);margin-bottom:2px}.acp-user-menu-header__name{margin:0;font:var(--mat-sys-typescale-body-large);color:var(--mat-sys-on-surface);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acp-user-menu-header__badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:12px;font:var(--mat-sys-typescale-label-small);font-weight:600;background:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);text-transform:uppercase;letter-spacing:.5px;font-size:10px}.acp-user-menu-header__email{margin:0;font:var(--mat-sys-typescale-body-small);color:var(--mat-sys-on-surface-variant);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acp-user-menu-header__divider{height:1px;margin-top:var(--mat-sys-spacing-medium, 16px);background:var(--acp-color-border, var(--mat-sys-outline-variant))}.acp-user-menu-item{width:100%}.acp-user-menu-item__link{display:flex;align-items:center;gap:var(--mat-sys-spacing-medium, 16px);width:100%;padding:var(--mat-sys-spacing-medium, 8px);border:none;background:transparent;cursor:pointer;text-decoration:none;font:var(--mat-sys-typescale-body-large);color:var(--mat-sys-on-surface);border-radius:12px;transition:background-color .15s cubic-bezier(.4,0,.2,1)}.acp-user-menu-item__link:hover{background:var(--mat-sys-surface-container-highest)}.acp-user-menu-item__link:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:2px}.acp-user-menu-item__link--danger{color:var(--mat-sys-error)}.acp-user-menu-item__link--danger:hover{background:var(--mat-sys-error-container);color:var(--mat-sys-on-error-container)}.acp-user-menu-item__icon{font-size:20px;width:20px;height:20px;color:var(--mat-sys-on-surface-variant)}.acp-user-menu-item__label{flex:1;text-align:left}.acp-user-menu-item__badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;font:var(--mat-sys-typescale-label-small);font-weight:600;background:var(--mat-sys-error);color:var(--mat-sys-on-error)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$
|
|
11420
|
+
`, isInline: true, styles: [".acp-user-menu__trigger{width:40px;height:40px;border-radius:50%;overflow:hidden}.acp-user-menu__avatar{width:100%;height:100%;object-fit:cover;border-radius:calc(infinity * 1px)}.acp-user-menu__panel .mat-mdc-menu-panel{border-radius:20px!important;background:var(--mat-sys-surface-container)!important;box-shadow:0 8px 32px #0000001f!important;min-width:280px;max-width:320px;padding:0;overflow:hidden}.acp-user-menu__panel .mat-mdc-menu-content{padding:0!important}.acp-user-menu__content{display:flex;flex-direction:column;color:var(--mat-sys-on-surface)}.acp-user-menu__items{display:flex;flex-direction:column;padding:var(--mat-sys-spacing-small, 8px);gap:4px}@media(prefers-color-scheme:dark){.acp-user-menu__panel .mat-mdc-menu-panel{background:var(--mat-sys-surface-container-high)!important;box-shadow:0 8px 32px #0006!important}}.acp-user-menu-header__content{padding-block:calc(var(--acp-spacing, .25rem) * 4);padding-inline:calc(var(--acp-spacing, .25rem) * 5);display:flex;align-items:center;gap:calc(var(--acp-spacing) * 4)}.acp-user-menu-header__avatar{flex-shrink:0;width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--mat-sys-surface-container-highest)}.acp-user-menu-header__avatar-img{width:100%;height:100%;object-fit:cover}.acp-user-menu-header__info{flex:1;min-width:0}.acp-user-menu-header__name-row{display:flex;align-items:center;gap:var(--mat-sys-spacing-small, 8px);margin-bottom:2px}.acp-user-menu-header__name{margin:0;font:var(--mat-sys-typescale-body-large);color:var(--mat-sys-on-surface);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acp-user-menu-header__badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:12px;font:var(--mat-sys-typescale-label-small);font-weight:600;background:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);text-transform:uppercase;letter-spacing:.5px;font-size:10px}.acp-user-menu-header__email{margin:0;font:var(--mat-sys-typescale-body-small);color:var(--mat-sys-on-surface-variant);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acp-user-menu-header__divider{height:1px;margin-top:var(--mat-sys-spacing-medium, 16px);background:var(--acp-color-border, var(--mat-sys-outline-variant))}.acp-user-menu-item{width:100%}.acp-user-menu-item__link{display:flex;align-items:center;gap:var(--mat-sys-spacing-medium, 16px);width:100%;padding:var(--mat-sys-spacing-medium, 8px);border:none;background:transparent;cursor:pointer;text-decoration:none;font:var(--mat-sys-typescale-body-large);color:var(--mat-sys-on-surface);border-radius:12px;transition:background-color .15s cubic-bezier(.4,0,.2,1)}.acp-user-menu-item__link:hover{background:var(--mat-sys-surface-container-highest)}.acp-user-menu-item__link:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:2px}.acp-user-menu-item__link--danger{color:var(--mat-sys-error)}.acp-user-menu-item__link--danger:hover{background:var(--mat-sys-error-container);color:var(--mat-sys-on-error-container)}.acp-user-menu-item__icon{font-size:20px;width:20px;height:20px;color:var(--mat-sys-on-surface-variant)}.acp-user-menu-item__label{flex:1;text-align:left}.acp-user-menu-item__badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;font:var(--mat-sys-typescale-label-small);font-weight:600;background:var(--mat-sys-error);color:var(--mat-sys-on-error)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$8.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: AcpButton, selector: "acp-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11029
11421
|
}
|
|
11030
11422
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UserMenu, decorators: [{
|
|
11031
11423
|
type: Component,
|
|
@@ -11337,7 +11729,7 @@ class SidemenuComponent {
|
|
|
11337
11729
|
}}</mat-icon>
|
|
11338
11730
|
}
|
|
11339
11731
|
</ng-template>
|
|
11340
|
-
`, isInline: true, styles: [".acp-sidemenu{padding:0;margin:0;list-style:none}.acp-sidemenu .menu-item{overflow:hidden;border-radius:1.5rem;transition:background 225ms cubic-bezier(.4,0,.2,1)}.acp-sidemenu .menu-item>.submenu{visibility:hidden;height:0;transition:all 225ms cubic-bezier(.4,0,.2,1)}.acp-sidemenu .menu-item>.menu-heading:hover,.acp-sidemenu .menu-item>.menu-heading:focus{background-color:var(--acp-sidemenu-heading-hover-background-color)}.acp-sidemenu .menu-item.active>.menu-heading{color:var(--acp-sidemenu-active-heading-text-color);background-color:var(--acp-sidemenu-active-heading-background-color)}.acp-sidemenu .menu-item.active>.menu-heading:hover,.acp-sidemenu .menu-item.active>.menu-heading:focus{background-color:var(--acp-sidemenu-active-heading-hover-background-color)}.acp-sidemenu .menu-item.expanded{background-color:var(--acp-sidemenu-expanded-background-color)}.acp-sidemenu .menu-item.expanded>.submenu{visibility:visible;height:auto;height:calc-size(auto,size)}.acp-sidemenu .menu-item.expanded>.menu-toggle>.menu-caret{transform:rotate(-180deg)}.acp-sidemenu .menu-item:has(.active)>.menu-heading{color:var(--acp-sidemenu-active-heading-text-color)}.acp-sidemenu .menu-heading{position:relative;display:flex;align-items:center;width:calc(var(--acp-sidenav-width) - 1rem);padding:.75rem;font-size:inherit;color:inherit;text-decoration:none;cursor:pointer;outline:none;background-color:transparent;border:none;border-radius:1.5rem}.acp-sidemenu .menu-icon{width:1.5rem;height:1.5rem;margin-right:.75rem;font-size:1.25rem;line-height:1.5rem;text-align:center}[dir=rtl] .acp-sidemenu .menu-icon{margin-right:0;margin-left:.75rem}.acp-sidemenu .menu-icon.submenu-icon{position:absolute;left:.75rem;width:1.5rem;height:1.5rem;font-size:1rem;line-height:1.5rem;opacity:0}[dir=rtl] .acp-sidemenu .menu-icon.submenu-icon{right:.75rem;left:0}.acp-sidemenu .menu-caret{display:block;width:1.5rem;height:1.5rem;font-size:1.5rem;line-height:1.5rem;text-align:center;transition:transform .4s cubic-bezier(.25,.8,.25,1)}.acp-sidemenu .menu-name{flex:1;overflow:hidden;text-overflow:ellipsis;text-align:initial}.acp-sidemenu .menu-icon,.acp-sidemenu .menu-name,.acp-sidemenu .menu-label,.acp-sidemenu .menu-badge{transition:opacity .4s cubic-bezier(.25,.8,.25,1)}.acp-sidemenu .menu-label,.acp-sidemenu .menu-badge{padding:.25rem .5rem;font-size:.75rem;font-weight:700;line-height:1;color:#fff;background-color:#757575;border-radius:.375rem}.acp-sidemenu .menu-badge{border-radius:50rem}.acp-sidemenu.level-1>li>.menu-heading{padding-left:3rem}[dir=rtl] .acp-sidemenu.level-1>li>.menu-heading{padding-right:3rem;padding-left:1rem}.acp-sidemenu.level-2>li>.menu-heading{padding-left:4rem}[dir=rtl] .acp-sidemenu.level-2>li>.menu-heading{padding-right:4rem;padding-left:1rem}.acp-sidemenu.level-2 [class^=level-]>li>.menu-heading{padding-left:5rem}[dir=rtl] .acp-sidemenu.level-2 [class^=level-]>li>.menu-heading{padding-right:5rem;padding-left:1rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: NgxPermissionsModule }, { kind: "directive", type: i1$
|
|
11732
|
+
`, isInline: true, styles: [".acp-sidemenu{padding:0;margin:0;list-style:none}.acp-sidemenu .menu-item{overflow:hidden;border-radius:1.5rem;transition:background 225ms cubic-bezier(.4,0,.2,1)}.acp-sidemenu .menu-item>.submenu{visibility:hidden;height:0;transition:all 225ms cubic-bezier(.4,0,.2,1)}.acp-sidemenu .menu-item>.menu-heading:hover,.acp-sidemenu .menu-item>.menu-heading:focus{background-color:var(--acp-sidemenu-heading-hover-background-color)}.acp-sidemenu .menu-item.active>.menu-heading{color:var(--acp-sidemenu-active-heading-text-color);background-color:var(--acp-sidemenu-active-heading-background-color)}.acp-sidemenu .menu-item.active>.menu-heading:hover,.acp-sidemenu .menu-item.active>.menu-heading:focus{background-color:var(--acp-sidemenu-active-heading-hover-background-color)}.acp-sidemenu .menu-item.expanded{background-color:var(--acp-sidemenu-expanded-background-color)}.acp-sidemenu .menu-item.expanded>.submenu{visibility:visible;height:auto;height:calc-size(auto,size)}.acp-sidemenu .menu-item.expanded>.menu-toggle>.menu-caret{transform:rotate(-180deg)}.acp-sidemenu .menu-item:has(.active)>.menu-heading{color:var(--acp-sidemenu-active-heading-text-color)}.acp-sidemenu .menu-heading{position:relative;display:flex;align-items:center;width:calc(var(--acp-sidenav-width) - 1rem);padding:.75rem;font-size:inherit;color:inherit;text-decoration:none;cursor:pointer;outline:none;background-color:transparent;border:none;border-radius:1.5rem}.acp-sidemenu .menu-icon{width:1.5rem;height:1.5rem;margin-right:.75rem;font-size:1.25rem;line-height:1.5rem;text-align:center}[dir=rtl] .acp-sidemenu .menu-icon{margin-right:0;margin-left:.75rem}.acp-sidemenu .menu-icon.submenu-icon{position:absolute;left:.75rem;width:1.5rem;height:1.5rem;font-size:1rem;line-height:1.5rem;opacity:0}[dir=rtl] .acp-sidemenu .menu-icon.submenu-icon{right:.75rem;left:0}.acp-sidemenu .menu-caret{display:block;width:1.5rem;height:1.5rem;font-size:1.5rem;line-height:1.5rem;text-align:center;transition:transform .4s cubic-bezier(.25,.8,.25,1)}.acp-sidemenu .menu-name{flex:1;overflow:hidden;text-overflow:ellipsis;text-align:initial}.acp-sidemenu .menu-icon,.acp-sidemenu .menu-name,.acp-sidemenu .menu-label,.acp-sidemenu .menu-badge{transition:opacity .4s cubic-bezier(.25,.8,.25,1)}.acp-sidemenu .menu-label,.acp-sidemenu .menu-badge{padding:.25rem .5rem;font-size:.75rem;font-weight:700;line-height:1;color:#fff;background-color:#757575;border-radius:.375rem}.acp-sidemenu .menu-badge{border-radius:50rem}.acp-sidemenu.level-1>li>.menu-heading{padding-left:3rem}[dir=rtl] .acp-sidemenu.level-1>li>.menu-heading{padding-right:3rem;padding-left:1rem}.acp-sidemenu.level-2>li>.menu-heading{padding-left:4rem}[dir=rtl] .acp-sidemenu.level-2>li>.menu-heading{padding-right:4rem;padding-left:1rem}.acp-sidemenu.level-2 [class^=level-]>li>.menu-heading{padding-left:5rem}[dir=rtl] .acp-sidemenu.level-2 [class^=level-]>li>.menu-heading{padding-right:5rem;padding-left:1rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: NgxPermissionsModule }, { kind: "directive", type: i1$9.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i3$3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: NavAccordionDirective, selector: "[acpNavAccordion]", exportAs: ["acpNavAccordion"] }, { kind: "directive", type: NavAccordionItemDirective, selector: "[acpNavAccordionItem]", inputs: ["route"], exportAs: ["acpNavAccordionItem"] }, { kind: "directive", type: NavAccordionToggleDirective, selector: "[acpNavAccordionToggle]", exportAs: ["acpNavAccordionToggle"] }, { kind: "pipe", type: SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11341
11733
|
}
|
|
11342
11734
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SidemenuComponent, decorators: [{
|
|
11343
11735
|
type: Component,
|
|
@@ -11515,7 +11907,7 @@ class AcpSidebarHeader {
|
|
|
11515
11907
|
|
|
11516
11908
|
<ng-content select="[end]"></ng-content>
|
|
11517
11909
|
</mat-toolbar>
|
|
11518
|
-
`, isInline: true, styles: [".acontplus-sidebar-header{overflow:hidden}.acontplus-sidebar-header mat-toolbar{width:var(--acp-sidenav-width);padding:0 .5rem}.acontplus-sidebar-header mat-slide-toggle .mdc-label{display:none}.acp-spacer{flex:1 1 auto!important}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i1$
|
|
11910
|
+
`, isInline: true, styles: [".acontplus-sidebar-header{overflow:hidden}.acontplus-sidebar-header mat-toolbar{width:var(--acp-sidenav-width);padding:0 .5rem}.acontplus-sidebar-header mat-slide-toggle .mdc-label{display:none}.acp-spacer{flex:1 1 auto!important}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i1$7.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] });
|
|
11519
11911
|
}
|
|
11520
11912
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpSidebarHeader, decorators: [{
|
|
11521
11913
|
type: Component,
|
|
@@ -11648,7 +12040,7 @@ class AcpSidebarToggle {
|
|
|
11648
12040
|
<mat-icon>close</mat-icon>
|
|
11649
12041
|
</button>
|
|
11650
12042
|
}
|
|
11651
|
-
`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1$
|
|
12043
|
+
`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1$a.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "fullWidth", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatToolbarModule }] });
|
|
11652
12044
|
}
|
|
11653
12045
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpSidebarToggle, decorators: [{
|
|
11654
12046
|
type: Component,
|
|
@@ -11935,7 +12327,7 @@ class AcpShellLayout {
|
|
|
11935
12327
|
this.content().scrollTo({ top: 0 });
|
|
11936
12328
|
}
|
|
11937
12329
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpShellLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11938
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpShellLayout, isStandalone: true, selector: "acp-shell-layout", inputs: { navPos: { classPropertyName: "navPos", publicName: "navPos", isSignal: true, isRequired: false, transformFunction: null }, headerPos: { classPropertyName: "headerPos", publicName: "headerPos", isSignal: true, isRequired: false, transformFunction: null }, sidenavOpened: { classPropertyName: "sidenavOpened", publicName: "sidenavOpened", isSignal: true, isRequired: false, transformFunction: null }, sidenavCollapsed: { classPropertyName: "sidenavCollapsed", publicName: "sidenavCollapsed", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sidenavOpenedChange: "sidenavOpenedChange" }, host: { classAttribute: "acp-shell-layout-host" }, queries: [{ propertyName: "headerSlot", first: true, predicate: AcpShellSlotHeader, descendants: true, isSignal: true }, { propertyName: "sidebarSlot", first: true, predicate: AcpShellSlotSidebar, descendants: true, isSignal: true }, { propertyName: "sidebarFooterSlot", first: true, predicate: AcpShellSlotSidebarFooter, descendants: true, isSignal: true }, { propertyName: "toolbarSlot", first: true, predicate: AcpShellSlotToolbar, descendants: true, isSignal: true }, { propertyName: "topmenuSlot", first: true, predicate: AcpShellSlotTopmenu, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"acontplus-container-wrap\"\n [class.acontplus-sidenav-collapsed]=\"sidenavCollapsed() && navPos() !== 'top'\"\n [class.acontplus-navbar-side]=\"navPos() === 'side'\"\n [class.acontplus-navbar-top]=\"navPos() === 'top'\"\n [class.acontplus-header-above]=\"headerPos() === 'above'\"\n [class.acontplus-header-fixed]=\"headerPos() === 'fixed'\"\n [dir]=\"dir()\"\n>\n <!-- \u2500\u2500 SLOT: Header ABOVE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n Rendered outside the sidenav container so it spans the full width.\n Only active when headerPos === 'above'.\n The app projects its own header via <ng-template acpShellHeader>.\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (showHeaderAbove() && headerSlot()) {\n <ng-container *ngTemplateOutlet=\"headerSlot()!.templateRef\" />\n }\n\n <!-- \u2500\u2500 Sidenav container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <mat-sidenav-container class=\"acontplus-container\" autosize autoFocus>\n <!-- Primary sidenav -->\n <mat-sidenav\n #sidenav\n class=\"acontplus-sidenav\"\n [mode]=\"sidenavMode()\"\n [opened]=\"navPos() === 'side' && sidenavOpened() && !isMobile()\"\n (openedChange)=\"sidenavOpenedChange.emit($event)\"\n >\n <!-- \u2500\u2500 SLOT: Sidebar body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n The app projects its own sidebar via <ng-template acpShellSidebar>.\n If no slot is provided the sidenav is still rendered (empty).\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (sidebarSlot()) {\n <ng-container *ngTemplateOutlet=\"sidebarSlot()!.templateRef\" />\n }\n\n <!-- \u2500\u2500 SLOT: Sidebar footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n Optional content pinned to the bottom of the sidebar.\n Project via <ng-template acpShellSidebarFooter>.\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (sidebarFooterSlot()) {\n <div class=\"acp-shell-sidebar-footer\">\n <ng-container *ngTemplateOutlet=\"sidebarFooterSlot()!.templateRef\" />\n </div>\n }\n </mat-sidenav>\n\n <!-- \u2500\u2500 Main content area \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <mat-sidenav-content #content class=\"acontplus-content\">\n <!-- \u2500\u2500 SLOT: Header inside content (fixed / below) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n Rendered inside the scrollable content area.\n Only active when headerPos !== 'above'.\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (showHeaderInContent() && headerSlot()) {\n <ng-container *ngTemplateOutlet=\"headerSlot()!.templateRef\" />\n }\n\n <!-- \u2500\u2500 SLOT: Toolbar (center region inside header) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n Optional extra content (breadcrumb, search bar\u2026) rendered\n below the header bar, above the page content.\n Project via <ng-template acpShellToolbar>.\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (toolbarSlot()) {\n <ng-container *ngTemplateOutlet=\"toolbarSlot()!.templateRef\" />\n }\n\n <!-- \u2500\u2500 SLOT: Top menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n Optional horizontal top navigation projected above page content.\n Project via <ng-template acpShellTopmenu>.\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (topmenuSlot() && navPos() === 'top') {\n <ng-container *ngTemplateOutlet=\"topmenuSlot()!.templateRef\" />\n }\n\n <!-- \u2500\u2500 DEFAULT SLOT: Page content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n Plain children (e.g. <router-outlet />) land here.\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <main class=\"acontplus-page-content\">\n <router-outlet />\n </main>\n </mat-sidenav-content>\n </mat-sidenav-container>\n</div>\n", styles: [".acontplus-container-wrap,.acontplus-container{--mat-sidenav-content-background-color: transparent;height:100%}.acontplus-sidenav{--mat-sidenav-container-width: var(--acp-sidenav-width);position:absolute;overflow-x:hidden;border-width:0!important;transition-property:transform,width!important}.acontplus-header-above .acontplus-container{height:calc(100% - var(--mat-toolbar-standard-height))!important}@media(max-width:599px){.acontplus-header-above .acontplus-container{height:calc(100% - var(--mat-toolbar-mobile-height))!important}}.acontplus-header-above .acontplus-sidebar-main{height:100%!important;padding-top:.5rem}.acontplus-sidenav-collapsed .acontplus-sidenav{width:var(--acp-sidenav-collapsed-width)}.acontplus-sidenav-collapsed .acontplus-sidenav .menu-name,.acontplus-sidenav-collapsed .acontplus-sidenav .menu-label,.acontplus-sidenav-collapsed .acontplus-sidenav .menu-badge,.acontplus-sidenav-collapsed .acontplus-sidenav .menu-caret,.acontplus-sidenav-collapsed .acontplus-sidenav .acontplus-user-panel-info{opacity:0}.acontplus-sidenav-collapsed .acontplus-sidenav .menu-icon.submenu-icon{opacity:1}.acontplus-sidenav-collapsed .acontplus-sidenav .acontplus-user-panel-avatar{transform:scale(.5)}.acontplus-sidenav-collapsed .acontplus-sidenav:hover{width:var(--acp-sidenav-width)}.acontplus-sidenav-collapsed .acontplus-sidenav:hover .menu-name,.acontplus-sidenav-collapsed .acontplus-sidenav:hover .menu-label,.acontplus-sidenav-collapsed .acontplus-sidenav:hover .menu-badge,.acontplus-sidenav-collapsed .acontplus-sidenav:hover .menu-caret,.acontplus-sidenav-collapsed .acontplus-sidenav:hover .acontplus-user-panel-info{opacity:1}.acontplus-sidenav-collapsed .acontplus-sidenav:hover .menu-icon.submenu-icon{opacity:0}.acontplus-sidenav-collapsed .acontplus-sidenav:hover .acontplus-user-panel-avatar{transform:scale(1)}.acontplus-sidenav-collapsed .acontplus-content{margin-left:var(--acp-sidenav-collapsed-width)!important}[dir=rtl] .acontplus-sidenav-collapsed .acontplus-content,.acontplus-sidenav-collapsed[dir=rtl] .acontplus-content{margin-right:var(--acp-sidenav-collapsed-width)!important;margin-left:auto!important}.acontplus-navbar-top .acontplus-topmenu{top:0}.acontplus-navbar-top .acontplus-branding{margin-left:1rem}[dir=rtl] .acontplus-navbar-top .acontplus-branding{margin-right:1rem;margin-left:auto}.acontplus-header-fixed .acontplus-header{position:sticky;top:0}.acontplus-header-fixed .acontplus-topmenu{top:var(--mat-toolbar-standard-height)}@media(max-width:599px){.acontplus-header-fixed .acontplus-topmenu{top:var(--mat-toolbar-mobile-height)}}.acontplus-page-content{position:relative;padding:var(--acp-gutter)}.acontplus-header+.acontplus-page-content,.acontplus-header-above .acontplus-page-content,.acontplus-navbar-top .acontplus-page-content{padding-top:0}.acp-shell-content{display:flex;flex-direction:column;height:100%}.acp-shell-page-content{position:relative;flex:1 1 auto;padding:var(--acp-gutter, 1rem);overflow:auto}.acp-shell--header-above{display:flex;flex-direction:column}.acp-shell--header-above .acp-shell-sidenav-container{flex:1 1 auto;height:calc(100% - var(--mat-toolbar-standard-height))}@media(max-width:599px){.acp-shell--header-above .acp-shell-sidenav-container{height:calc(100% - var(--mat-toolbar-mobile-height))}}.acp-shell--header-above .acp-shell-page-content{padding-top:0}.acp-shell--sidenav-collapsed .acp-shell-sidenav{width:var(--acp-sidenav-collapsed-width)}.acp-shell--sidenav-collapsed .acp-shell-sidenav .menu-name,.acp-shell--sidenav-collapsed .acp-shell-sidenav .menu-label,.acp-shell--sidenav-collapsed .acp-shell-sidenav .menu-badge,.acp-shell--sidenav-collapsed .acp-shell-sidenav .menu-caret,.acp-shell--sidenav-collapsed .acp-shell-sidenav .acp-sidebar-user-panel-info{opacity:0;pointer-events:none}.acp-shell--sidenav-collapsed .acp-shell-sidenav .menu-icon.submenu-icon{opacity:1}.acp-shell--sidenav-collapsed .acp-shell-sidenav .acp-sidebar-user-panel-avatar{transform:scale(.5)}.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover{width:var(--acp-sidenav-width)}.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .menu-name,.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .menu-label,.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .menu-badge,.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .menu-caret,.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .acp-sidebar-user-panel-info{opacity:1;pointer-events:auto}.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .menu-icon.submenu-icon{opacity:0}.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .acp-sidebar-user-panel-avatar{transform:scale(1)}.acp-shell--sidenav-collapsed .acp-shell-content{margin-left:var(--acp-sidenav-collapsed-width)!important}[dir=rtl] .acp-shell--sidenav-collapsed .acp-shell-content{margin-right:var(--acp-sidenav-collapsed-width)!important;margin-left:auto!important}.acp-shell--navbar-top .acp-shell-page-content,.acp-shell--header-fixed .acp-shell-page-content{padding-top:0}\n"], dependencies: [{ kind: "ngmodule", type: BidiModule }, { kind: "directive", type: i1$a.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i2$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i2$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i2$2.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
12330
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpShellLayout, isStandalone: true, selector: "acp-shell-layout", inputs: { navPos: { classPropertyName: "navPos", publicName: "navPos", isSignal: true, isRequired: false, transformFunction: null }, headerPos: { classPropertyName: "headerPos", publicName: "headerPos", isSignal: true, isRequired: false, transformFunction: null }, sidenavOpened: { classPropertyName: "sidenavOpened", publicName: "sidenavOpened", isSignal: true, isRequired: false, transformFunction: null }, sidenavCollapsed: { classPropertyName: "sidenavCollapsed", publicName: "sidenavCollapsed", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sidenavOpenedChange: "sidenavOpenedChange" }, host: { classAttribute: "acp-shell-layout-host" }, queries: [{ propertyName: "headerSlot", first: true, predicate: AcpShellSlotHeader, descendants: true, isSignal: true }, { propertyName: "sidebarSlot", first: true, predicate: AcpShellSlotSidebar, descendants: true, isSignal: true }, { propertyName: "sidebarFooterSlot", first: true, predicate: AcpShellSlotSidebarFooter, descendants: true, isSignal: true }, { propertyName: "toolbarSlot", first: true, predicate: AcpShellSlotToolbar, descendants: true, isSignal: true }, { propertyName: "topmenuSlot", first: true, predicate: AcpShellSlotTopmenu, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"acontplus-container-wrap\"\n [class.acontplus-sidenav-collapsed]=\"sidenavCollapsed() && navPos() !== 'top'\"\n [class.acontplus-navbar-side]=\"navPos() === 'side'\"\n [class.acontplus-navbar-top]=\"navPos() === 'top'\"\n [class.acontplus-header-above]=\"headerPos() === 'above'\"\n [class.acontplus-header-fixed]=\"headerPos() === 'fixed'\"\n [dir]=\"dir()\"\n>\n <!-- \u2500\u2500 SLOT: Header ABOVE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n Rendered outside the sidenav container so it spans the full width.\n Only active when headerPos === 'above'.\n The app projects its own header via <ng-template acpShellHeader>.\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (showHeaderAbove() && headerSlot()) {\n <ng-container *ngTemplateOutlet=\"headerSlot()!.templateRef\" />\n }\n\n <!-- \u2500\u2500 Sidenav container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <mat-sidenav-container class=\"acontplus-container\" autosize autoFocus>\n <!-- Primary sidenav -->\n <mat-sidenav\n #sidenav\n class=\"acontplus-sidenav\"\n [mode]=\"sidenavMode()\"\n [opened]=\"navPos() === 'side' && sidenavOpened() && !isMobile()\"\n (openedChange)=\"sidenavOpenedChange.emit($event)\"\n >\n <!-- \u2500\u2500 SLOT: Sidebar body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n The app projects its own sidebar via <ng-template acpShellSidebar>.\n If no slot is provided the sidenav is still rendered (empty).\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (sidebarSlot()) {\n <ng-container *ngTemplateOutlet=\"sidebarSlot()!.templateRef\" />\n }\n\n <!-- \u2500\u2500 SLOT: Sidebar footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n Optional content pinned to the bottom of the sidebar.\n Project via <ng-template acpShellSidebarFooter>.\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (sidebarFooterSlot()) {\n <div class=\"acp-shell-sidebar-footer\">\n <ng-container *ngTemplateOutlet=\"sidebarFooterSlot()!.templateRef\" />\n </div>\n }\n </mat-sidenav>\n\n <!-- \u2500\u2500 Main content area \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <mat-sidenav-content #content class=\"acontplus-content\">\n <!-- \u2500\u2500 SLOT: Header inside content (fixed / below) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n Rendered inside the scrollable content area.\n Only active when headerPos !== 'above'.\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (showHeaderInContent() && headerSlot()) {\n <ng-container *ngTemplateOutlet=\"headerSlot()!.templateRef\" />\n }\n\n <!-- \u2500\u2500 SLOT: Toolbar (center region inside header) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n Optional extra content (breadcrumb, search bar\u2026) rendered\n below the header bar, above the page content.\n Project via <ng-template acpShellToolbar>.\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (toolbarSlot()) {\n <ng-container *ngTemplateOutlet=\"toolbarSlot()!.templateRef\" />\n }\n\n <!-- \u2500\u2500 SLOT: Top menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n Optional horizontal top navigation projected above page content.\n Project via <ng-template acpShellTopmenu>.\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (topmenuSlot() && navPos() === 'top') {\n <ng-container *ngTemplateOutlet=\"topmenuSlot()!.templateRef\" />\n }\n\n <!-- \u2500\u2500 DEFAULT SLOT: Page content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n Plain children (e.g. <router-outlet />) land here.\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <main class=\"acontplus-page-content\">\n <router-outlet />\n </main>\n </mat-sidenav-content>\n </mat-sidenav-container>\n</div>\n", styles: [".acontplus-container-wrap,.acontplus-container{--mat-sidenav-content-background-color: transparent;height:100%}.acontplus-sidenav{--mat-sidenav-container-width: var(--acp-sidenav-width);position:absolute;overflow-x:hidden;border-width:0!important;transition-property:transform,width!important}.acontplus-header-above .acontplus-container{height:calc(100% - var(--mat-toolbar-standard-height))!important}@media(max-width:599px){.acontplus-header-above .acontplus-container{height:calc(100% - var(--mat-toolbar-mobile-height))!important}}.acontplus-header-above .acontplus-sidebar-main{height:100%!important;padding-top:.5rem}.acontplus-sidenav-collapsed .acontplus-sidenav{width:var(--acp-sidenav-collapsed-width)}.acontplus-sidenav-collapsed .acontplus-sidenav .menu-name,.acontplus-sidenav-collapsed .acontplus-sidenav .menu-label,.acontplus-sidenav-collapsed .acontplus-sidenav .menu-badge,.acontplus-sidenav-collapsed .acontplus-sidenav .menu-caret,.acontplus-sidenav-collapsed .acontplus-sidenav .acontplus-user-panel-info{opacity:0}.acontplus-sidenav-collapsed .acontplus-sidenav .menu-icon.submenu-icon{opacity:1}.acontplus-sidenav-collapsed .acontplus-sidenav .acontplus-user-panel-avatar{transform:scale(.5)}.acontplus-sidenav-collapsed .acontplus-sidenav:hover{width:var(--acp-sidenav-width)}.acontplus-sidenav-collapsed .acontplus-sidenav:hover .menu-name,.acontplus-sidenav-collapsed .acontplus-sidenav:hover .menu-label,.acontplus-sidenav-collapsed .acontplus-sidenav:hover .menu-badge,.acontplus-sidenav-collapsed .acontplus-sidenav:hover .menu-caret,.acontplus-sidenav-collapsed .acontplus-sidenav:hover .acontplus-user-panel-info{opacity:1}.acontplus-sidenav-collapsed .acontplus-sidenav:hover .menu-icon.submenu-icon{opacity:0}.acontplus-sidenav-collapsed .acontplus-sidenav:hover .acontplus-user-panel-avatar{transform:scale(1)}.acontplus-sidenav-collapsed .acontplus-content{margin-left:var(--acp-sidenav-collapsed-width)!important}[dir=rtl] .acontplus-sidenav-collapsed .acontplus-content,.acontplus-sidenav-collapsed[dir=rtl] .acontplus-content{margin-right:var(--acp-sidenav-collapsed-width)!important;margin-left:auto!important}.acontplus-navbar-top .acontplus-topmenu{top:0}.acontplus-navbar-top .acontplus-branding{margin-left:1rem}[dir=rtl] .acontplus-navbar-top .acontplus-branding{margin-right:1rem;margin-left:auto}.acontplus-header-fixed .acontplus-header{position:sticky;top:0}.acontplus-header-fixed .acontplus-topmenu{top:var(--mat-toolbar-standard-height)}@media(max-width:599px){.acontplus-header-fixed .acontplus-topmenu{top:var(--mat-toolbar-mobile-height)}}.acontplus-page-content{position:relative;padding:var(--acp-gutter)}.acontplus-header+.acontplus-page-content,.acontplus-header-above .acontplus-page-content,.acontplus-navbar-top .acontplus-page-content{padding-top:0}.acp-shell-content{display:flex;flex-direction:column;height:100%}.acp-shell-page-content{position:relative;flex:1 1 auto;padding:var(--acp-gutter, 1rem);overflow:auto}.acp-shell--header-above{display:flex;flex-direction:column}.acp-shell--header-above .acp-shell-sidenav-container{flex:1 1 auto;height:calc(100% - var(--mat-toolbar-standard-height))}@media(max-width:599px){.acp-shell--header-above .acp-shell-sidenav-container{height:calc(100% - var(--mat-toolbar-mobile-height))}}.acp-shell--header-above .acp-shell-page-content{padding-top:0}.acp-shell--sidenav-collapsed .acp-shell-sidenav{width:var(--acp-sidenav-collapsed-width)}.acp-shell--sidenav-collapsed .acp-shell-sidenav .menu-name,.acp-shell--sidenav-collapsed .acp-shell-sidenav .menu-label,.acp-shell--sidenav-collapsed .acp-shell-sidenav .menu-badge,.acp-shell--sidenav-collapsed .acp-shell-sidenav .menu-caret,.acp-shell--sidenav-collapsed .acp-shell-sidenav .acp-sidebar-user-panel-info{opacity:0;pointer-events:none}.acp-shell--sidenav-collapsed .acp-shell-sidenav .menu-icon.submenu-icon{opacity:1}.acp-shell--sidenav-collapsed .acp-shell-sidenav .acp-sidebar-user-panel-avatar{transform:scale(.5)}.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover{width:var(--acp-sidenav-width)}.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .menu-name,.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .menu-label,.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .menu-badge,.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .menu-caret,.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .acp-sidebar-user-panel-info{opacity:1;pointer-events:auto}.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .menu-icon.submenu-icon{opacity:0}.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .acp-sidebar-user-panel-avatar{transform:scale(1)}.acp-shell--sidenav-collapsed .acp-shell-content{margin-left:var(--acp-sidenav-collapsed-width)!important}[dir=rtl] .acp-shell--sidenav-collapsed .acp-shell-content{margin-right:var(--acp-sidenav-collapsed-width)!important;margin-left:auto!important}.acp-shell--navbar-top .acp-shell-page-content,.acp-shell--header-fixed .acp-shell-page-content{padding-top:0}\n"], dependencies: [{ kind: "ngmodule", type: BidiModule }, { kind: "directive", type: i1$b.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i2$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i2$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i2$2.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11939
12331
|
}
|
|
11940
12332
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpShellLayout, decorators: [{
|
|
11941
12333
|
type: Component,
|
|
@@ -11982,7 +12374,7 @@ class AcpTopmenuPanel {
|
|
|
11982
12374
|
.subscribe();
|
|
11983
12375
|
}
|
|
11984
12376
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpTopmenuPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11985
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpTopmenuPanel, isStandalone: true, selector: "acp-topmenu-panel", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, parentRoute: { classPropertyName: "parentRoute", publicName: "parentRoute", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, buildRoute: { classPropertyName: "buildRoute", publicName: "buildRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { routeChange: "routeChange" }, viewQueries: [{ propertyName: "menuPanel", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-menu class=\"acontplus-topmenu-panel\">\n @for (item of items(); track $index) {\n <ng-template\n [ngxPermissionsOnly]=\"$safeNavigationMigration(item.permissions?.only)!\"\n [ngxPermissionsExcept]=\"$safeNavigationMigration(item.permissions?.except)!\"\n >\n @if (item.type === 'link') {\n <a\n mat-menu-item\n [routerLink]=\"buildRoute()(parentRoute().concat([item.route]))\"\n routerLinkActive=\"active\"\n #rla=\"routerLinkActive\"\n (click)=\"onRouterLinkClick(rla)\"\n >\n {{ item.name }}\n </a>\n } @if (item.type === 'extLink') {\n <a mat-menu-item [href]=\"item.route\">\n <span class=\"menu-name\">{{ item.name }}</span>\n <mat-icon>launch</mat-icon>\n </a>\n } @if (item.type === 'extTabLink') {\n <a mat-menu-item [href]=\"item.route\" target=\"_blank\">\n <span class=\"menu-name\">{{ item.name }}</span>\n <mat-icon>launch</mat-icon>\n </a>\n } @if (item.type === 'sub') {\n <button\n mat-menu-item\n [matMenuTriggerFor]=\"submenu.menuPanel()\"\n [class.active]=\"item.active?.()\"\n >\n {{ item.name }}\n\n <acp-topmenu-panel\n #submenu\n [items]=\"item.children || []\"\n [parentRoute]=\"parentRoute().concat([item.route])\"\n [level]=\"level() + 1\"\n [buildRoute]=\"buildRoute()\"\n (routeChange)=\"onRouteChange($event.rla, item)\"\n />\n </button>\n }\n </ng-template>\n }\n</mat-menu>\n", dependencies: [{ kind: "component", type: AcpTopmenuPanel, selector: "acp-topmenu-panel", inputs: ["items", "parentRoute", "level", "buildRoute"], outputs: ["routeChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: NgxPermissionsModule }, { kind: "directive", type: i1$
|
|
12377
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpTopmenuPanel, isStandalone: true, selector: "acp-topmenu-panel", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, parentRoute: { classPropertyName: "parentRoute", publicName: "parentRoute", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, buildRoute: { classPropertyName: "buildRoute", publicName: "buildRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { routeChange: "routeChange" }, viewQueries: [{ propertyName: "menuPanel", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-menu class=\"acontplus-topmenu-panel\">\n @for (item of items(); track $index) {\n <ng-template\n [ngxPermissionsOnly]=\"$safeNavigationMigration(item.permissions?.only)!\"\n [ngxPermissionsExcept]=\"$safeNavigationMigration(item.permissions?.except)!\"\n >\n @if (item.type === 'link') {\n <a\n mat-menu-item\n [routerLink]=\"buildRoute()(parentRoute().concat([item.route]))\"\n routerLinkActive=\"active\"\n #rla=\"routerLinkActive\"\n (click)=\"onRouterLinkClick(rla)\"\n >\n {{ item.name }}\n </a>\n } @if (item.type === 'extLink') {\n <a mat-menu-item [href]=\"item.route\">\n <span class=\"menu-name\">{{ item.name }}</span>\n <mat-icon>launch</mat-icon>\n </a>\n } @if (item.type === 'extTabLink') {\n <a mat-menu-item [href]=\"item.route\" target=\"_blank\">\n <span class=\"menu-name\">{{ item.name }}</span>\n <mat-icon>launch</mat-icon>\n </a>\n } @if (item.type === 'sub') {\n <button\n mat-menu-item\n [matMenuTriggerFor]=\"submenu.menuPanel()\"\n [class.active]=\"item.active?.()\"\n >\n {{ item.name }}\n\n <acp-topmenu-panel\n #submenu\n [items]=\"item.children || []\"\n [parentRoute]=\"parentRoute().concat([item.route])\"\n [level]=\"level() + 1\"\n [buildRoute]=\"buildRoute()\"\n (routeChange)=\"onRouteChange($event.rla, item)\"\n />\n </button>\n }\n </ng-template>\n }\n</mat-menu>\n", dependencies: [{ kind: "component", type: AcpTopmenuPanel, selector: "acp-topmenu-panel", inputs: ["items", "parentRoute", "level", "buildRoute"], outputs: ["routeChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: NgxPermissionsModule }, { kind: "directive", type: i1$9.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
|
|
11986
12378
|
}
|
|
11987
12379
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpTopmenuPanel, decorators: [{
|
|
11988
12380
|
type: Component,
|
|
@@ -12020,7 +12412,7 @@ class AcpTopmenu {
|
|
|
12020
12412
|
.subscribe();
|
|
12021
12413
|
}
|
|
12022
12414
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpTopmenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12023
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpTopmenu, isStandalone: true, selector: "acp-topmenu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, buildRoute: { classPropertyName: "buildRoute", publicName: "buildRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { routeChange: "routeChange" }, host: { classAttribute: "acp-topmenu" }, ngImport: i0, template: "<nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n @for (menuItem of items(); track $index) {\n <ng-template\n [ngxPermissionsOnly]=\"$safeNavigationMigration(menuItem.permissions?.only)!\"\n [ngxPermissionsExcept]=\"$safeNavigationMigration(menuItem.permissions?.except)!\"\n >\n @if (menuItem.type === 'link') {\n <a matButton [routerLink]=\"buildRoute()([menuItem.route])\" routerLinkActive=\"active\">\n <ng-container\n [ngTemplateOutlet]=\"linkTypeTpl\"\n [ngTemplateOutletContext]=\"{ item: menuItem }\"\n />\n </a>\n } @if (menuItem.type === 'extLink') {\n <a matButton [href]=\"menuItem.route\">\n <ng-container\n [ngTemplateOutlet]=\"linkTypeTpl\"\n [ngTemplateOutletContext]=\"{ item: menuItem }\"\n />\n </a>\n } @if (menuItem.type === 'extTabLink') {\n <a matButton [href]=\"menuItem.route\" target=\"_blank\">\n <ng-container\n [ngTemplateOutlet]=\"linkTypeTpl\"\n [ngTemplateOutletContext]=\"{ item: menuItem }\"\n />\n </a>\n } @if (menuItem.type === 'sub') {\n <button\n matButton\n [matMenuTriggerFor]=\"submenu.menuPanel()\"\n [class.active]=\"menuItem.active?.()\"\n >\n <ng-container\n [ngTemplateOutlet]=\"linkTypeTpl\"\n [ngTemplateOutletContext]=\"{ item: menuItem }\"\n />\n\n <acp-topmenu-panel\n #submenu\n [items]=\"menuItem.children || []\"\n [parentRoute]=\"[menuItem.route]\"\n [level]=\"1\"\n [buildRoute]=\"buildRoute()\"\n (routeChange)=\"onRouteChange($event.rla, menuItem)\"\n />\n </button>\n }\n </ng-template>\n }\n</nav>\n\n<mat-tab-nav-panel #tabPanel />\n\n<ng-template #linkTypeTpl let-item=\"item\" let-level=\"level\">\n <mat-icon class=\"menu-icon\">{{ item.icon }}</mat-icon>\n <span class=\"menu-name\">{{ item.name }}</span>\n @if (item.label) {\n <span class=\"menu-label bg-{{ item.label.color }}\">{{ item.label.value }}</span>\n } @if (item.badge) {\n <span class=\"menu-badge bg-{{ item.badge.color }}\">{{ item.badge.value }}</span>\n } @if (item.type !== 'link') {\n <mat-icon class=\"menu-caret\">{{ item.type === 'sub' ? 'arrow_drop_down' : 'launch' }}</mat-icon>\n }\n</ng-template>\n", styles: [".acp-topmenu{--mat-tab-divider-height: 0;--mat-button-text-label-text-color: var(--acp-topmenu-text-color);position:sticky;z-index:200;display:block;padding:.5rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.acp-topmenu .mat-mdc-button{padding:0 1rem;white-space:nowrap}.acp-topmenu .mat-mdc-button.active{background-color:var(--acp-topmenu-item-active-background-color)}.acp-topmenu .menu-icon,.acp-topmenu .menu-caret,.acp-topmenu .menu-name{vertical-align:middle}.acp-topmenu .mat-icon.menu-icon{width:1.125rem;height:1.125rem;margin-right:.5rem;font-size:1.125rem;line-height:1.125rem}[dir=rtl] .acp-topmenu .mat-icon.menu-icon{margin-right:auto;margin-left:.5rem}.acp-topmenu .mat-icon.menu-caret{margin-right:-.5rem}[dir=rtl] .acp-topmenu .mat-icon.menu-caret{margin-right:auto;margin-left:-.5rem}.acp-topmenu .menu-label,.acp-topmenu .menu-badge{padding:.25rem .5rem;margin-left:.5rem;font-size:.75rem;font-weight:700;line-height:1;color:#fff;background-color:#757575;border-radius:.375rem}[dir=rtl] .acp-topmenu .menu-label,[dir=rtl] .acp-topmenu .menu-badge{margin-right:.5rem;margin-left:auto}.acp-topmenu .menu-badge{border-radius:50rem}.acp-topmenu .mat-tab-nav-bar,.acp-topmenu .mat-tab-header{border-bottom:none}.acontplus-topmenu-panel .mat-mdc-menu-item.active{color:var(--acp-topmenu-dropdown-item-active-text-color)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i4$
|
|
12415
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpTopmenu, isStandalone: true, selector: "acp-topmenu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, buildRoute: { classPropertyName: "buildRoute", publicName: "buildRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { routeChange: "routeChange" }, host: { classAttribute: "acp-topmenu" }, ngImport: i0, template: "<nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n @for (menuItem of items(); track $index) {\n <ng-template\n [ngxPermissionsOnly]=\"$safeNavigationMigration(menuItem.permissions?.only)!\"\n [ngxPermissionsExcept]=\"$safeNavigationMigration(menuItem.permissions?.except)!\"\n >\n @if (menuItem.type === 'link') {\n <a matButton [routerLink]=\"buildRoute()([menuItem.route])\" routerLinkActive=\"active\">\n <ng-container\n [ngTemplateOutlet]=\"linkTypeTpl\"\n [ngTemplateOutletContext]=\"{ item: menuItem }\"\n />\n </a>\n } @if (menuItem.type === 'extLink') {\n <a matButton [href]=\"menuItem.route\">\n <ng-container\n [ngTemplateOutlet]=\"linkTypeTpl\"\n [ngTemplateOutletContext]=\"{ item: menuItem }\"\n />\n </a>\n } @if (menuItem.type === 'extTabLink') {\n <a matButton [href]=\"menuItem.route\" target=\"_blank\">\n <ng-container\n [ngTemplateOutlet]=\"linkTypeTpl\"\n [ngTemplateOutletContext]=\"{ item: menuItem }\"\n />\n </a>\n } @if (menuItem.type === 'sub') {\n <button\n matButton\n [matMenuTriggerFor]=\"submenu.menuPanel()\"\n [class.active]=\"menuItem.active?.()\"\n >\n <ng-container\n [ngTemplateOutlet]=\"linkTypeTpl\"\n [ngTemplateOutletContext]=\"{ item: menuItem }\"\n />\n\n <acp-topmenu-panel\n #submenu\n [items]=\"menuItem.children || []\"\n [parentRoute]=\"[menuItem.route]\"\n [level]=\"1\"\n [buildRoute]=\"buildRoute()\"\n (routeChange)=\"onRouteChange($event.rla, menuItem)\"\n />\n </button>\n }\n </ng-template>\n }\n</nav>\n\n<mat-tab-nav-panel #tabPanel />\n\n<ng-template #linkTypeTpl let-item=\"item\" let-level=\"level\">\n <mat-icon class=\"menu-icon\">{{ item.icon }}</mat-icon>\n <span class=\"menu-name\">{{ item.name }}</span>\n @if (item.label) {\n <span class=\"menu-label bg-{{ item.label.color }}\">{{ item.label.value }}</span>\n } @if (item.badge) {\n <span class=\"menu-badge bg-{{ item.badge.color }}\">{{ item.badge.value }}</span>\n } @if (item.type !== 'link') {\n <mat-icon class=\"menu-caret\">{{ item.type === 'sub' ? 'arrow_drop_down' : 'launch' }}</mat-icon>\n }\n</ng-template>\n", styles: [".acp-topmenu{--mat-tab-divider-height: 0;--mat-button-text-label-text-color: var(--acp-topmenu-text-color);position:sticky;z-index:200;display:block;padding:.5rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.acp-topmenu .mat-mdc-button{padding:0 1rem;white-space:nowrap}.acp-topmenu .mat-mdc-button.active{background-color:var(--acp-topmenu-item-active-background-color)}.acp-topmenu .menu-icon,.acp-topmenu .menu-caret,.acp-topmenu .menu-name{vertical-align:middle}.acp-topmenu .mat-icon.menu-icon{width:1.125rem;height:1.125rem;margin-right:.5rem;font-size:1.125rem;line-height:1.125rem}[dir=rtl] .acp-topmenu .mat-icon.menu-icon{margin-right:auto;margin-left:.5rem}.acp-topmenu .mat-icon.menu-caret{margin-right:-.5rem}[dir=rtl] .acp-topmenu .mat-icon.menu-caret{margin-right:auto;margin-left:-.5rem}.acp-topmenu .menu-label,.acp-topmenu .menu-badge{padding:.25rem .5rem;margin-left:.5rem;font-size:.75rem;font-weight:700;line-height:1;color:#fff;background-color:#757575;border-radius:.375rem}[dir=rtl] .acp-topmenu .menu-label,[dir=rtl] .acp-topmenu .menu-badge{margin-right:.5rem;margin-left:auto}.acp-topmenu .menu-badge{border-radius:50rem}.acp-topmenu .mat-tab-nav-bar,.acp-topmenu .mat-tab-header{border-bottom:none}.acontplus-topmenu-panel .mat-mdc-menu-item.active{color:var(--acp-topmenu-dropdown-item-active-text-color)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i4$2.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i4$2.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "ngmodule", type: NgxPermissionsModule }, { kind: "directive", type: i1$9.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }, { kind: "component", type: AcpTopmenuPanel, selector: "acp-topmenu-panel", inputs: ["items", "parentRoute", "level", "buildRoute"], outputs: ["routeChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
|
|
12024
12416
|
}
|
|
12025
12417
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpTopmenu, decorators: [{
|
|
12026
12418
|
type: Component,
|
|
@@ -12229,5 +12621,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
12229
12621
|
* Generated bundle index. Do not edit.
|
|
12230
12622
|
*/
|
|
12231
12623
|
|
|
12232
|
-
export { ACP_ACTIVE_DATE_DEBOUNCE, ACP_BADGE_COLORS, ACP_BADGE_SHAPES, ACP_BADGE_SIZES, ACP_BADGE_VARIANTS, ACP_DATE_OPTION_TYPE, ACP_DEFAULT_DATE_OPTIONS, ACP_DIALOG_ACTIONS, ACP_DIALOG_DATA, ACP_DIALOG_DEFAULT_OPTIONS, ACP_DIALOG_TITLEBAR, ACP_DRAWER_DATA, ACP_DRAWER_DEFAULT_OPTIONS, ACP_POPOVER_CONTENT, ACP_POPOVER_DEFAULT_OPTIONS, ACP_POPOVER_SCROLL_STRATEGY, AcpAlert, AcpBadge, AcpButton, AcpCard, AcpCheckboxBase, AcpCheckboxGroup, AcpContextMenu, AcpContextMenuDirective, AcpContextMenuPanel, AcpContextMenuService, AcpDateRangeInput, AcpDialog, AcpDialogActions, AcpDialogContainer, AcpDialogContent, AcpDialogRef, AcpDialogService, AcpDialogTitlebar, AcpDrawer, AcpDrawerConfig, AcpDrawerContainer, AcpDrawerRef, AcpHeader, AcpHeaderActions, AcpHeaderBranding, AcpHeaderCenter, AcpHeaderEnd, AcpHeaderLanguage, AcpHeaderNotifications, AcpHeaderStart, AcpHeaderTheme, AcpHeaderWorkspace, AcpKpiCard, AcpPopover, AcpPopoverContent, AcpPopoverTarget, AcpPopoverTrigger, AcpSelectDateOption, AcpShellLayout, AcpShellSlotHeader, AcpShellSlotSidebar, AcpShellSlotSidebarFooter, AcpShellSlotToolbar, AcpShellSlotTopmenu, AcpSidebar, AcpSidebarBranding, AcpSidebarContent, AcpSidebarHeader, AcpSidebarToggle, AcpSidebarUserPanel, AcpTopmenu, AcpTopmenuPanel, AdvancedDialogService, Branding, Button, CONTEXT_MENU_DATA, CONTEXT_MENU_ITEMS, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DialogZIndexService,
|
|
12624
|
+
export { ACP_ACTIVE_DATE_DEBOUNCE, ACP_BADGE_COLORS, ACP_BADGE_SHAPES, ACP_BADGE_SIZES, ACP_BADGE_VARIANTS, ACP_CARD_DEFAULT_OPTIONS, ACP_CARD_SLOTS, ACP_DATE_OPTION_TYPE, ACP_DEFAULT_DATE_OPTIONS, ACP_DIALOG_ACTIONS, ACP_DIALOG_DATA, ACP_DIALOG_DEFAULT_OPTIONS, ACP_DIALOG_TITLEBAR, ACP_DRAWER_DATA, ACP_DRAWER_DEFAULT_OPTIONS, ACP_POPOVER_CONTENT, ACP_POPOVER_DEFAULT_OPTIONS, ACP_POPOVER_SCROLL_STRATEGY, AcpAlert, AcpBadge, AcpButton, AcpCard, AcpCardActions, AcpCardAvatar, AcpCardFooter, AcpCardHeader, AcpCardMedia, AcpCardSubtitle, AcpCardTitle, AcpCheckboxBase, AcpCheckboxGroup, AcpContextMenu, AcpContextMenuDirective, AcpContextMenuPanel, AcpContextMenuService, AcpDateRangeInput, AcpDialog, AcpDialogActions, AcpDialogContainer, AcpDialogContent, AcpDialogRef, AcpDialogService, AcpDialogTitlebar, AcpDrawer, AcpDrawerConfig, AcpDrawerContainer, AcpDrawerRef, AcpGridNavigationFor, AcpHeader, AcpHeaderActions, AcpHeaderBranding, AcpHeaderCenter, AcpHeaderEnd, AcpHeaderLanguage, AcpHeaderNotifications, AcpHeaderStart, AcpHeaderTheme, AcpHeaderWorkspace, AcpKpiCard, AcpPopover, AcpPopoverContent, AcpPopoverTarget, AcpPopoverTrigger, AcpSearchSelect, AcpSelectDateOption, AcpShellLayout, AcpShellSlotHeader, AcpShellSlotSidebar, AcpShellSlotSidebarFooter, AcpShellSlotToolbar, AcpShellSlotTopmenu, AcpSidebar, AcpSidebarBranding, AcpSidebarContent, AcpSidebarHeader, AcpSidebarToggle, AcpSidebarUserPanel, AcpTopmenu, AcpTopmenuPanel, AdvancedDialogService, Branding, Button, CONTEXT_MENU_DATA, CONTEXT_MENU_ITEMS, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DialogZIndexService, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, KPI_CARD_TREND_CONFIGS, NavAccordionDirective, NavAccordionItemDirective, NavAccordionToggleDirective, OverlayService, Pagination, SidemenuComponent, Spinner, StatusDisplayPipe, SvgIcon, TREND_CONFIGS, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, UserMenu, UserPanel, _AcpPopoverContentBase, acpSearchSelectLooseEquals, acpSearchSelectNormalize, inferKpiTrend, provideAcpCardDefaults, provideAcpDialogDefaults };
|
|
12233
12625
|
//# sourceMappingURL=acontplus-ng-components.mjs.map
|