@acontplus/ng-components 2.1.6 → 2.1.8
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, booleanAttribute, output, ViewEncapsulation, Component, inject, viewChild, ViewContainerRef, ChangeDetectionStrategy, effect, Injectable, computed, PLATFORM_ID, signal, Input, TemplateRef, Pipe, Directive, ViewChild, KeyValueDiffers, ChangeDetectorRef, InjectionToken, ANIMATION_MODULE_TYPE, HostListener, ContentChildren, model, forwardRef, ElementRef, Renderer2 } from '@angular/core';
|
|
2
|
+
import { input, booleanAttribute, output, ViewEncapsulation, Component, inject, viewChild, ViewContainerRef, ChangeDetectionStrategy, effect, Injectable, computed, PLATFORM_ID, signal, Input, TemplateRef, Pipe, Directive, ViewChild, KeyValueDiffers, ChangeDetectorRef, InjectionToken, ANIMATION_MODULE_TYPE, HostListener, ContentChildren, model, forwardRef, EventEmitter, ApplicationRef, Injector, DOCUMENT, ElementRef, NgZone, ContentChild, Output, Renderer2 } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/material/card';
|
|
4
4
|
import { MatCardModule } from '@angular/material/card';
|
|
5
5
|
import * as i2 from '@angular/material/button';
|
|
@@ -15,25 +15,25 @@ import * as i2$1 from '@angular/forms';
|
|
|
15
15
|
import { FormControl, ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
16
16
|
import * as i1$2 from '@ng-select/ng-select';
|
|
17
17
|
import { NgSelectModule } from '@ng-select/ng-select';
|
|
18
|
-
import { Subject, firstValueFrom, catchError, of, map, BehaviorSubject, delay, debounceTime, takeUntil, isObservable, fromEvent, filter as filter$1 } from 'rxjs';
|
|
18
|
+
import { Subject, firstValueFrom, catchError, of, map, BehaviorSubject, delay, debounceTime, takeUntil, isObservable, fromEvent, filter as filter$1, merge, defer, Subscription } from 'rxjs';
|
|
19
19
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
20
20
|
import { HttpClient } from '@angular/common/http';
|
|
21
21
|
import { MatChipRow, MatChipGrid, MatChipInput, MatChipListbox, MatChip } from '@angular/material/chips';
|
|
22
22
|
import * as i1$5 from '@angular/material/form-field';
|
|
23
23
|
import { MatFormField, MatLabel, MatHint, MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-field';
|
|
24
|
-
import { LiveAnnouncer } from '@angular/cdk/a11y';
|
|
25
|
-
import { ENTER, COMMA } from '@angular/cdk/keycodes';
|
|
24
|
+
import { LiveAnnouncer, CdkTrapFocus, FocusMonitor, isFakeMousedownFromScreenReader } from '@angular/cdk/a11y';
|
|
25
|
+
import { ENTER, COMMA, ESCAPE, hasModifierKey, SPACE } from '@angular/cdk/keycodes';
|
|
26
26
|
import { MatProgressSpinner } from '@angular/material/progress-spinner';
|
|
27
27
|
import { Tabulator, PageModule, ReactiveDataModule, FormatModule, EditModule, ValidateModule, ColumnCalcsModule, SortModule, TooltipModule, DataTreeModule, MoveRowsModule, SelectRowModule, PopupModule, InteractionModule } from 'tabulator-tables';
|
|
28
28
|
import { toSignal } from '@angular/core/rxjs-interop';
|
|
29
29
|
import * as i1$3 from '@angular/cdk/overlay';
|
|
30
|
-
import { Overlay, OverlayModule } from '@angular/cdk/overlay';
|
|
30
|
+
import { Overlay, OverlayModule, OverlayConfig } from '@angular/cdk/overlay';
|
|
31
31
|
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
|
32
|
-
import { ComponentPortal } from '@angular/cdk/portal';
|
|
32
|
+
import { ComponentPortal, CdkPortalOutlet, TemplatePortal, DomPortalOutlet } from '@angular/cdk/portal';
|
|
33
33
|
import * as i2$2 from '@angular/material/tooltip';
|
|
34
34
|
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
|
|
35
35
|
import { MatProgressBarModule, MatProgressBar } from '@angular/material/progress-bar';
|
|
36
|
-
import { switchMap, catchError as catchError$1, takeUntil as takeUntil$1, filter } from 'rxjs/operators';
|
|
36
|
+
import { switchMap, catchError as catchError$1, takeUntil as takeUntil$1, filter, take, startWith } from 'rxjs/operators';
|
|
37
37
|
import { MatTableDataSource, MatTable, MatColumnDef, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatFooterRowDef, MatFooterRow, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatFooterCellDef, MatFooterCell } from '@angular/material/table';
|
|
38
38
|
import { MatPaginator } from '@angular/material/paginator';
|
|
39
39
|
import { MatSort, MatSortHeader } from '@angular/material/sort';
|
|
@@ -49,6 +49,10 @@ import { MatInputModule } from '@angular/material/input';
|
|
|
49
49
|
import { Datex, SPANISH_LOCALE, DEFAULT_THEME, MATERIAL_THEME, BOOTSTRAP_THEME } from 'datex-ui';
|
|
50
50
|
export { BOOTSTRAP_THEME, DEFAULT_THEME, Datex, MATERIAL_THEME, SPANISH_LOCALE, SPANISH_LOCALE_WITH_TIME } from 'datex-ui';
|
|
51
51
|
import { tzDate, format, monthStart, addDay, monthEnd, weekStart, weekEnd } from '@formkit/tempo';
|
|
52
|
+
import { coerceCssPixelValue } from '@angular/cdk/coercion';
|
|
53
|
+
import { CdkDialogContainer, Dialog, DialogConfig } from '@angular/cdk/dialog';
|
|
54
|
+
import { _animationsDisabled } from '@angular/material/core';
|
|
55
|
+
import { Directionality } from '@angular/cdk/bidi';
|
|
52
56
|
import { TranslocoService } from '@jsverse/transloco';
|
|
53
57
|
|
|
54
58
|
/**
|
|
@@ -322,7 +326,7 @@ class Button {
|
|
|
322
326
|
return this.text();
|
|
323
327
|
}
|
|
324
328
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
325
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: Button, isStandalone: true, selector: "acp-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, matStyle: { classPropertyName: "matStyle", publicName: "matStyle", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, reportFormat: { classPropertyName: "reportFormat", publicName: "reportFormat", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { handleClick: "handleClick" }, ngImport: i0, template: "@switch (matStyle()) { @case ('text') {\n<button\n matButton\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('elevated') {\n<button\n matButton=\"elevated\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('outlined') {\n<button\n matButton=\"outlined\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('tonal') {\n<button\n matButton=\"tonal\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('icon') {\n<button\n matIconButton\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('fab') {\n<button\n matFab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('mini-fab') {\n<button\n matMiniFab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('extended-fab') {\n<button\n matFab\n extended\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @default {\n<button\n matButton=\"filled\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} }\n\n<ng-template #buttonContent>\n @if (getIcon()) {\n <mat-icon>{{ getIcon() }}</mat-icon>\n } @if (getDisplayText()) { {{ getDisplayText() }} }\n\n <ng-content />\n</ng-template>\n", styles: [":root{--acp-secondary: #e0e0e0;--acp-secondary-on: #000000;--acp-success: #4caf50;--acp-success-on: #ffffff;--acp-danger: #ba1a1a;--acp-danger-on: #ffffff;--acp-warning: #ff9800;--acp-warning-on: #000000;--acp-info: #2196f3;--acp-info-on: #ffffff;--acp-dark: #212121;--acp-dark-on: #ffffff}.dark-theme{--acp-secondary: #424242;--acp-secondary-on: #ffffff;--acp-success: #81c784;--acp-success-on: #1b5e20;--acp-danger: #ef5350;--acp-danger-on: #b71c1c;--acp-warning: #ffb74d;--acp-warning-on: #e65100;--acp-info: #64b5f6;--acp-info-on: #0d47a1;--acp-dark: #616161;--acp-dark-on: #ffffff}acp-button{display:inline-block;margin:4px}.mat-mdc-button .mdc-button__label,.mat-mdc-unelevated-button .mdc-button__label,.mat-mdc-raised-button .mdc-button__label,.mat-mdc-outlined-button .mdc-button__label,button[matbutton=tonal] .mdc-button__label,.mat-mdc-fab.mdc-fab--extended .mdc-button__label{display:flex;align-items:center;gap:8px}.mat-mdc-button.mat-btn-secondary,.mat-mdc-unelevated-button.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-button.mat-btn-secondary:hover,.mat-mdc-unelevated-button.mat-btn-secondary:hover{background-color:color-mix(in srgb,var(--acp-secondary) 80%,black)!important}.mat-mdc-button.mat-btn-success,.mat-mdc-unelevated-button.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-button.mat-btn-danger,.mat-mdc-unelevated-button.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-button.mat-btn-warning,.mat-mdc-unelevated-button.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-button.mat-btn-info,.mat-mdc-unelevated-button.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-button.mat-btn-dark,.mat-mdc-unelevated-button.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}button[matbutton=tonal].mat-btn-success{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important;color:var(--acp-success)!important}button[matbutton=tonal].mat-btn-danger{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important;color:var(--acp-danger)!important}button[matbutton=tonal].mat-btn-warning{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important;color:var(--acp-warning)!important}button[matbutton=tonal].mat-btn-info{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important;color:var(--acp-info)!important}button[matbutton=tonal].mat-btn-dark{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important;color:var(--acp-dark)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-success{color:var(--acp-success)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-info{color:var(--acp-info)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-dark{color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-secondary{background-color:var(--mat-sys-surface-container-low)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-raised-button.mat-btn-success{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-success)!important}.mat-mdc-raised-button.mat-btn-success:hover{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-danger{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-danger)!important}.mat-mdc-raised-button.mat-btn-danger:hover{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-warning{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-warning)!important}.mat-mdc-raised-button.mat-btn-warning:hover{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-info{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-info)!important}.mat-mdc-raised-button.mat-btn-info:hover{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-dark{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-dark:hover{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important}.mat-mdc-outlined-button.mat-btn-secondary{border-color:var(--mat-sys-outline)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-outlined-button.mat-btn-success{border-color:var(--acp-success)!important;color:var(--acp-success)!important}.mat-mdc-outlined-button.mat-btn-danger{border-color:var(--acp-danger)!important;color:var(--acp-danger)!important}.mat-mdc-outlined-button.mat-btn-warning{border-color:var(--acp-warning)!important;color:var(--acp-warning)!important}.mat-mdc-outlined-button.mat-btn-info{border-color:var(--acp-info)!important;color:var(--acp-info)!important}.mat-mdc-outlined-button.mat-btn-dark{border-color:var(--acp-dark)!important;color:var(--acp-dark)!important}.mat-mdc-fab.mat-btn-secondary,.mat-mdc-mini-fab.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-fab.mat-btn-success,.mat-mdc-mini-fab.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-fab.mat-btn-danger,.mat-mdc-mini-fab.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-fab.mat-btn-warning,.mat-mdc-mini-fab.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-fab.mat-btn-info,.mat-mdc-mini-fab.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-fab.mat-btn-dark,.mat-mdc-mini-fab.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}.mat-mdc-icon-button.mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-icon-button.mat-btn-success{color:var(--acp-success)!important}.mat-mdc-icon-button.mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-icon-button.mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-icon-button.mat-btn-info{color:var(--acp-info)!important}.mat-mdc-icon-button.mat-btn-dark{color:var(--acp-dark)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
329
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: Button, isStandalone: true, selector: "acp-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, matStyle: { classPropertyName: "matStyle", publicName: "matStyle", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, reportFormat: { classPropertyName: "reportFormat", publicName: "reportFormat", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { handleClick: "handleClick" }, ngImport: i0, template: "@switch (matStyle()) { @case ('text') {\n<button\n matButton\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('elevated') {\n<button\n matButton=\"elevated\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('outlined') {\n<button\n matButton=\"outlined\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('tonal') {\n<button\n matButton=\"tonal\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('icon') {\n<button\n matIconButton\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('fab') {\n<button\n matFab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('mini-fab') {\n<button\n matMiniFab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('extended-fab') {\n<button\n matFab\n extended\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @default {\n<button\n matButton=\"filled\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} }\n\n<ng-template #buttonContent>\n @if (getIcon()) {\n <mat-icon>{{ getIcon() }}</mat-icon>\n } @if (getDisplayText()) { {{ getDisplayText() }} }\n\n <ng-content />\n</ng-template>\n", styles: [":root{--acp-secondary: #e0e0e0;--acp-secondary-on: #000000;--acp-success: #4caf50;--acp-success-on: #ffffff;--acp-danger: #ba1a1a;--acp-danger-on: #ffffff;--acp-warning: #ff9800;--acp-warning-on: #000000;--acp-info: #2196f3;--acp-info-on: #ffffff;--acp-dark: #212121;--acp-dark-on: #ffffff}.dark-theme{--acp-secondary: #424242;--acp-secondary-on: #ffffff;--acp-success: #81c784;--acp-success-on: #1b5e20;--acp-danger: #ef5350;--acp-danger-on: #b71c1c;--acp-warning: #ffb74d;--acp-warning-on: #e65100;--acp-info: #64b5f6;--acp-info-on: #0d47a1;--acp-dark: #616161;--acp-dark-on: #ffffff}acp-button{display:inline-block}.mat-mdc-button .mdc-button__label,.mat-mdc-unelevated-button .mdc-button__label,.mat-mdc-raised-button .mdc-button__label,.mat-mdc-outlined-button .mdc-button__label,button[matbutton=tonal] .mdc-button__label,.mat-mdc-fab.mdc-fab--extended .mdc-button__label{display:flex;align-items:center;gap:8px}.mat-mdc-button.mat-btn-secondary,.mat-mdc-unelevated-button.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-button.mat-btn-secondary:hover,.mat-mdc-unelevated-button.mat-btn-secondary:hover{background-color:color-mix(in srgb,var(--acp-secondary) 80%,black)!important}.mat-mdc-button.mat-btn-success,.mat-mdc-unelevated-button.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-button.mat-btn-danger,.mat-mdc-unelevated-button.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-button.mat-btn-warning,.mat-mdc-unelevated-button.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-button.mat-btn-info,.mat-mdc-unelevated-button.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-button.mat-btn-dark,.mat-mdc-unelevated-button.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}button[matbutton=tonal].mat-btn-success{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important;color:var(--acp-success)!important}button[matbutton=tonal].mat-btn-danger{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important;color:var(--acp-danger)!important}button[matbutton=tonal].mat-btn-warning{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important;color:var(--acp-warning)!important}button[matbutton=tonal].mat-btn-info{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important;color:var(--acp-info)!important}button[matbutton=tonal].mat-btn-dark{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important;color:var(--acp-dark)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-success{color:var(--acp-success)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-info{color:var(--acp-info)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-dark{color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-secondary{background-color:var(--mat-sys-surface-container-low)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-raised-button.mat-btn-success{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-success)!important}.mat-mdc-raised-button.mat-btn-success:hover{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-danger{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-danger)!important}.mat-mdc-raised-button.mat-btn-danger:hover{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-warning{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-warning)!important}.mat-mdc-raised-button.mat-btn-warning:hover{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-info{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-info)!important}.mat-mdc-raised-button.mat-btn-info:hover{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-dark{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-dark:hover{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important}.mat-mdc-outlined-button.mat-btn-secondary{border-color:var(--mat-sys-outline)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-outlined-button.mat-btn-success{border-color:var(--acp-success)!important;color:var(--acp-success)!important}.mat-mdc-outlined-button.mat-btn-danger{border-color:var(--acp-danger)!important;color:var(--acp-danger)!important}.mat-mdc-outlined-button.mat-btn-warning{border-color:var(--acp-warning)!important;color:var(--acp-warning)!important}.mat-mdc-outlined-button.mat-btn-info{border-color:var(--acp-info)!important;color:var(--acp-info)!important}.mat-mdc-outlined-button.mat-btn-dark{border-color:var(--acp-dark)!important;color:var(--acp-dark)!important}.mat-mdc-fab.mat-btn-secondary,.mat-mdc-mini-fab.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-fab.mat-btn-success,.mat-mdc-mini-fab.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-fab.mat-btn-danger,.mat-mdc-mini-fab.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-fab.mat-btn-warning,.mat-mdc-mini-fab.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-fab.mat-btn-info,.mat-mdc-mini-fab.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-fab.mat-btn-dark,.mat-mdc-mini-fab.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}.mat-mdc-icon-button.mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-icon-button.mat-btn-success{color:var(--acp-success)!important}.mat-mdc-icon-button.mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-icon-button.mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-icon-button.mat-btn-info{color:var(--acp-info)!important}.mat-mdc-icon-button.mat-btn-dark{color:var(--acp-dark)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
326
330
|
}
|
|
327
331
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Button, decorators: [{
|
|
328
332
|
type: Component,
|
|
@@ -334,7 +338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
334
338
|
MatIconButton,
|
|
335
339
|
MatFabButton,
|
|
336
340
|
NgTemplateOutlet,
|
|
337
|
-
], encapsulation: ViewEncapsulation.None, template: "@switch (matStyle()) { @case ('text') {\n<button\n matButton\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('elevated') {\n<button\n matButton=\"elevated\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('outlined') {\n<button\n matButton=\"outlined\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('tonal') {\n<button\n matButton=\"tonal\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('icon') {\n<button\n matIconButton\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('fab') {\n<button\n matFab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('mini-fab') {\n<button\n matMiniFab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('extended-fab') {\n<button\n matFab\n extended\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @default {\n<button\n matButton=\"filled\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} }\n\n<ng-template #buttonContent>\n @if (getIcon()) {\n <mat-icon>{{ getIcon() }}</mat-icon>\n } @if (getDisplayText()) { {{ getDisplayText() }} }\n\n <ng-content />\n</ng-template>\n", styles: [":root{--acp-secondary: #e0e0e0;--acp-secondary-on: #000000;--acp-success: #4caf50;--acp-success-on: #ffffff;--acp-danger: #ba1a1a;--acp-danger-on: #ffffff;--acp-warning: #ff9800;--acp-warning-on: #000000;--acp-info: #2196f3;--acp-info-on: #ffffff;--acp-dark: #212121;--acp-dark-on: #ffffff}.dark-theme{--acp-secondary: #424242;--acp-secondary-on: #ffffff;--acp-success: #81c784;--acp-success-on: #1b5e20;--acp-danger: #ef5350;--acp-danger-on: #b71c1c;--acp-warning: #ffb74d;--acp-warning-on: #e65100;--acp-info: #64b5f6;--acp-info-on: #0d47a1;--acp-dark: #616161;--acp-dark-on: #ffffff}acp-button{display:inline-block;margin:4px}.mat-mdc-button .mdc-button__label,.mat-mdc-unelevated-button .mdc-button__label,.mat-mdc-raised-button .mdc-button__label,.mat-mdc-outlined-button .mdc-button__label,button[matbutton=tonal] .mdc-button__label,.mat-mdc-fab.mdc-fab--extended .mdc-button__label{display:flex;align-items:center;gap:8px}.mat-mdc-button.mat-btn-secondary,.mat-mdc-unelevated-button.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-button.mat-btn-secondary:hover,.mat-mdc-unelevated-button.mat-btn-secondary:hover{background-color:color-mix(in srgb,var(--acp-secondary) 80%,black)!important}.mat-mdc-button.mat-btn-success,.mat-mdc-unelevated-button.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-button.mat-btn-danger,.mat-mdc-unelevated-button.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-button.mat-btn-warning,.mat-mdc-unelevated-button.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-button.mat-btn-info,.mat-mdc-unelevated-button.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-button.mat-btn-dark,.mat-mdc-unelevated-button.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}button[matbutton=tonal].mat-btn-success{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important;color:var(--acp-success)!important}button[matbutton=tonal].mat-btn-danger{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important;color:var(--acp-danger)!important}button[matbutton=tonal].mat-btn-warning{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important;color:var(--acp-warning)!important}button[matbutton=tonal].mat-btn-info{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important;color:var(--acp-info)!important}button[matbutton=tonal].mat-btn-dark{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important;color:var(--acp-dark)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-success{color:var(--acp-success)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-info{color:var(--acp-info)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-dark{color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-secondary{background-color:var(--mat-sys-surface-container-low)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-raised-button.mat-btn-success{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-success)!important}.mat-mdc-raised-button.mat-btn-success:hover{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-danger{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-danger)!important}.mat-mdc-raised-button.mat-btn-danger:hover{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-warning{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-warning)!important}.mat-mdc-raised-button.mat-btn-warning:hover{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-info{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-info)!important}.mat-mdc-raised-button.mat-btn-info:hover{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-dark{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-dark:hover{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important}.mat-mdc-outlined-button.mat-btn-secondary{border-color:var(--mat-sys-outline)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-outlined-button.mat-btn-success{border-color:var(--acp-success)!important;color:var(--acp-success)!important}.mat-mdc-outlined-button.mat-btn-danger{border-color:var(--acp-danger)!important;color:var(--acp-danger)!important}.mat-mdc-outlined-button.mat-btn-warning{border-color:var(--acp-warning)!important;color:var(--acp-warning)!important}.mat-mdc-outlined-button.mat-btn-info{border-color:var(--acp-info)!important;color:var(--acp-info)!important}.mat-mdc-outlined-button.mat-btn-dark{border-color:var(--acp-dark)!important;color:var(--acp-dark)!important}.mat-mdc-fab.mat-btn-secondary,.mat-mdc-mini-fab.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-fab.mat-btn-success,.mat-mdc-mini-fab.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-fab.mat-btn-danger,.mat-mdc-mini-fab.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-fab.mat-btn-warning,.mat-mdc-mini-fab.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-fab.mat-btn-info,.mat-mdc-mini-fab.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-fab.mat-btn-dark,.mat-mdc-mini-fab.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}.mat-mdc-icon-button.mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-icon-button.mat-btn-success{color:var(--acp-success)!important}.mat-mdc-icon-button.mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-icon-button.mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-icon-button.mat-btn-info{color:var(--acp-info)!important}.mat-mdc-icon-button.mat-btn-dark{color:var(--acp-dark)!important}\n"] }]
|
|
341
|
+
], encapsulation: ViewEncapsulation.None, template: "@switch (matStyle()) { @case ('text') {\n<button\n matButton\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('elevated') {\n<button\n matButton=\"elevated\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('outlined') {\n<button\n matButton=\"outlined\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('tonal') {\n<button\n matButton=\"tonal\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('icon') {\n<button\n matIconButton\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('fab') {\n<button\n matFab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('mini-fab') {\n<button\n matMiniFab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('extended-fab') {\n<button\n matFab\n extended\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @default {\n<button\n matButton=\"filled\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} }\n\n<ng-template #buttonContent>\n @if (getIcon()) {\n <mat-icon>{{ getIcon() }}</mat-icon>\n } @if (getDisplayText()) { {{ getDisplayText() }} }\n\n <ng-content />\n</ng-template>\n", styles: [":root{--acp-secondary: #e0e0e0;--acp-secondary-on: #000000;--acp-success: #4caf50;--acp-success-on: #ffffff;--acp-danger: #ba1a1a;--acp-danger-on: #ffffff;--acp-warning: #ff9800;--acp-warning-on: #000000;--acp-info: #2196f3;--acp-info-on: #ffffff;--acp-dark: #212121;--acp-dark-on: #ffffff}.dark-theme{--acp-secondary: #424242;--acp-secondary-on: #ffffff;--acp-success: #81c784;--acp-success-on: #1b5e20;--acp-danger: #ef5350;--acp-danger-on: #b71c1c;--acp-warning: #ffb74d;--acp-warning-on: #e65100;--acp-info: #64b5f6;--acp-info-on: #0d47a1;--acp-dark: #616161;--acp-dark-on: #ffffff}acp-button{display:inline-block}.mat-mdc-button .mdc-button__label,.mat-mdc-unelevated-button .mdc-button__label,.mat-mdc-raised-button .mdc-button__label,.mat-mdc-outlined-button .mdc-button__label,button[matbutton=tonal] .mdc-button__label,.mat-mdc-fab.mdc-fab--extended .mdc-button__label{display:flex;align-items:center;gap:8px}.mat-mdc-button.mat-btn-secondary,.mat-mdc-unelevated-button.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-button.mat-btn-secondary:hover,.mat-mdc-unelevated-button.mat-btn-secondary:hover{background-color:color-mix(in srgb,var(--acp-secondary) 80%,black)!important}.mat-mdc-button.mat-btn-success,.mat-mdc-unelevated-button.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-button.mat-btn-danger,.mat-mdc-unelevated-button.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-button.mat-btn-warning,.mat-mdc-unelevated-button.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-button.mat-btn-info,.mat-mdc-unelevated-button.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-button.mat-btn-dark,.mat-mdc-unelevated-button.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}button[matbutton=tonal].mat-btn-success{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important;color:var(--acp-success)!important}button[matbutton=tonal].mat-btn-danger{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important;color:var(--acp-danger)!important}button[matbutton=tonal].mat-btn-warning{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important;color:var(--acp-warning)!important}button[matbutton=tonal].mat-btn-info{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important;color:var(--acp-info)!important}button[matbutton=tonal].mat-btn-dark{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important;color:var(--acp-dark)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-success{color:var(--acp-success)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-info{color:var(--acp-info)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-dark{color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-secondary{background-color:var(--mat-sys-surface-container-low)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-raised-button.mat-btn-success{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-success)!important}.mat-mdc-raised-button.mat-btn-success:hover{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-danger{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-danger)!important}.mat-mdc-raised-button.mat-btn-danger:hover{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-warning{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-warning)!important}.mat-mdc-raised-button.mat-btn-warning:hover{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-info{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-info)!important}.mat-mdc-raised-button.mat-btn-info:hover{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-dark{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-dark:hover{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important}.mat-mdc-outlined-button.mat-btn-secondary{border-color:var(--mat-sys-outline)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-outlined-button.mat-btn-success{border-color:var(--acp-success)!important;color:var(--acp-success)!important}.mat-mdc-outlined-button.mat-btn-danger{border-color:var(--acp-danger)!important;color:var(--acp-danger)!important}.mat-mdc-outlined-button.mat-btn-warning{border-color:var(--acp-warning)!important;color:var(--acp-warning)!important}.mat-mdc-outlined-button.mat-btn-info{border-color:var(--acp-info)!important;color:var(--acp-info)!important}.mat-mdc-outlined-button.mat-btn-dark{border-color:var(--acp-dark)!important;color:var(--acp-dark)!important}.mat-mdc-fab.mat-btn-secondary,.mat-mdc-mini-fab.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-fab.mat-btn-success,.mat-mdc-mini-fab.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-fab.mat-btn-danger,.mat-mdc-mini-fab.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-fab.mat-btn-warning,.mat-mdc-mini-fab.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-fab.mat-btn-info,.mat-mdc-mini-fab.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-fab.mat-btn-dark,.mat-mdc-mini-fab.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}.mat-mdc-icon-button.mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-icon-button.mat-btn-success{color:var(--acp-success)!important}.mat-mdc-icon-button.mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-icon-button.mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-icon-button.mat-btn-info{color:var(--acp-info)!important}.mat-mdc-icon-button.mat-btn-dark{color:var(--acp-dark)!important}\n"] }]
|
|
338
342
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], matStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "matStyle", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], reportFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "reportFormat", required: false }] }], extended: [{ type: i0.Input, args: [{ isSignal: true, alias: "extended", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], handleClick: [{ type: i0.Output, args: ["handleClick"] }] } });
|
|
339
343
|
|
|
340
344
|
/**
|
|
@@ -2794,8 +2798,9 @@ class DataGrid {
|
|
|
2794
2798
|
_keyboardNavService = inject(KeyboardNavigationService);
|
|
2795
2799
|
_destroy$ = new Subject();
|
|
2796
2800
|
// ViewChild & ContentChildren
|
|
2801
|
+
paginator = viewChild(MatPaginator, ...(ngDevMode ? [{ debugName: "paginator" }] : []));
|
|
2797
2802
|
table;
|
|
2798
|
-
|
|
2803
|
+
paginator1;
|
|
2799
2804
|
sort;
|
|
2800
2805
|
tableContainer;
|
|
2801
2806
|
rowDefs;
|
|
@@ -2942,8 +2947,12 @@ class DataGrid {
|
|
|
2942
2947
|
});
|
|
2943
2948
|
}
|
|
2944
2949
|
ngAfterViewInit() {
|
|
2945
|
-
|
|
2946
|
-
|
|
2950
|
+
if (this.pageOnFront()) {
|
|
2951
|
+
this.dataSource.paginator = this.paginator();
|
|
2952
|
+
}
|
|
2953
|
+
if (this.sortOnFront()) {
|
|
2954
|
+
this.dataSource.sort = this.sort;
|
|
2955
|
+
}
|
|
2947
2956
|
if (this.rowDefs?.length > 0 && this.useContentRowTemplate()) {
|
|
2948
2957
|
this.rowDefs.forEach(rowDef => this.table.addRowDef(rowDef));
|
|
2949
2958
|
}
|
|
@@ -3203,7 +3212,7 @@ class DataGrid {
|
|
|
3203
3212
|
if (changes['rowSelectable'] && this.rowSelectable()) {
|
|
3204
3213
|
this.rowSelection = new SelectionModel(this.multiSelectable(), this.rowSelected());
|
|
3205
3214
|
}
|
|
3206
|
-
this.dataSource.paginator = this.pageOnFront() ? this.paginator : null;
|
|
3215
|
+
// this.dataSource.paginator = this.pageOnFront() ? this.paginator() : null;
|
|
3207
3216
|
this.dataSource.sort = this.sortOnFront() ? this.sort : null;
|
|
3208
3217
|
if (changes['infiniteScroll'] && this.infiniteScroll()) {
|
|
3209
3218
|
this.setupInfiniteScroll();
|
|
@@ -3268,7 +3277,7 @@ class DataGrid {
|
|
|
3268
3277
|
return index === undefined ? dataIndex : index;
|
|
3269
3278
|
}
|
|
3270
3279
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DataGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3271
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DataGrid, isStandalone: true, selector: "acp-data-grid", inputs: { showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showColumnMenuButton: { classPropertyName: "showColumnMenuButton", publicName: "showColumnMenuButton", isSignal: true, isRequired: false, transformFunction: null }, toolbarTitle: { classPropertyName: "toolbarTitle", publicName: "toolbarTitle", isSignal: true, isRequired: false, transformFunction: null }, toolbarTemplate: { classPropertyName: "toolbarTemplate", publicName: "toolbarTemplate", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyValuePlaceholder: { classPropertyName: "emptyValuePlaceholder", publicName: "emptyValuePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, headerExtraTemplate: { classPropertyName: "headerExtraTemplate", publicName: "headerExtraTemplate", isSignal: true, isRequired: false, transformFunction: null }, noResultTemplate: { classPropertyName: "noResultTemplate", publicName: "noResultTemplate", isSignal: true, isRequired: false, transformFunction: null }, paginationTemplate: { classPropertyName: "paginationTemplate", publicName: "paginationTemplate", isSignal: true, isRequired: false, transformFunction: null }, summaryTemplate: { classPropertyName: "summaryTemplate", publicName: "summaryTemplate", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, headerCellTemplate: { classPropertyName: "headerCellTemplate", publicName: "headerCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expansionTemplate: { classPropertyName: "expansionTemplate", publicName: "expansionTemplate", isSignal: true, isRequired: false, transformFunction: null }, closeOthersOnExpand: { classPropertyName: "closeOthersOnExpand", publicName: "closeOthersOnExpand", isSignal: true, isRequired: false, transformFunction: null }, pageOnFront: { classPropertyName: "pageOnFront", publicName: "pageOnFront", isSignal: true, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, pageDisabled: { classPropertyName: "pageDisabled", publicName: "pageDisabled", isSignal: true, isRequired: false, transformFunction: null }, showFirstLastButtons: { classPropertyName: "showFirstLastButtons", publicName: "showFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "infiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrollThreshold: { classPropertyName: "infiniteScrollThreshold", publicName: "infiniteScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrollDisabled: { classPropertyName: "infiniteScrollDisabled", publicName: "infiniteScrollDisabled", isSignal: true, 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 }, sortOnFront: { classPropertyName: "sortOnFront", publicName: "sortOnFront", isSignal: true, isRequired: false, transformFunction: null }, sortActive: { classPropertyName: "sortActive", publicName: "sortActive", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, sortDisableClear: { classPropertyName: "sortDisableClear", publicName: "sortDisableClear", isSignal: true, isRequired: false, transformFunction: null }, sortDisabled: { classPropertyName: "sortDisabled", publicName: "sortDisabled", isSignal: true, isRequired: false, transformFunction: null }, sortStart: { classPropertyName: "sortStart", publicName: "sortStart", isSignal: true, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: true, isRequired: false, transformFunction: null }, rowStriped: { classPropertyName: "rowStriped", publicName: "rowStriped", isSignal: true, isRequired: false, transformFunction: null }, rowSelectable: { classPropertyName: "rowSelectable", publicName: "rowSelectable", isSignal: true, isRequired: false, transformFunction: null }, multiSelectable: { classPropertyName: "multiSelectable", publicName: "multiSelectable", isSignal: true, isRequired: false, transformFunction: null }, multiSelectionWithClick: { classPropertyName: "multiSelectionWithClick", publicName: "multiSelectionWithClick", isSignal: true, isRequired: false, transformFunction: null }, hideRowSelectionCheckbox: { classPropertyName: "hideRowSelectionCheckbox", publicName: "hideRowSelectionCheckbox", isSignal: true, isRequired: false, transformFunction: null }, disableRowClickSelection: { classPropertyName: "disableRowClickSelection", publicName: "disableRowClickSelection", isSignal: true, isRequired: false, transformFunction: null }, rowClassFormatter: { classPropertyName: "rowClassFormatter", publicName: "rowClassFormatter", isSignal: true, isRequired: false, transformFunction: null }, rowSelected: { classPropertyName: "rowSelected", publicName: "rowSelected", isSignal: true, isRequired: false, transformFunction: null }, rowSelectionFormatter: { classPropertyName: "rowSelectionFormatter", publicName: "rowSelectionFormatter", isSignal: true, isRequired: false, transformFunction: null }, cellSelectable: { classPropertyName: "cellSelectable", publicName: "cellSelectable", isSignal: true, isRequired: false, transformFunction: null }, useContentRowTemplate: { classPropertyName: "useContentRowTemplate", publicName: "useContentRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, useContentHeaderRowTemplate: { classPropertyName: "useContentHeaderRowTemplate", publicName: "useContentHeaderRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, useContentFooterRowTemplate: { classPropertyName: "useContentFooterRowTemplate", publicName: "useContentFooterRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, showSummary: { classPropertyName: "showSummary", publicName: "showSummary", isSignal: true, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "page", sortChange: "sortChange", rowClick: "rowClick", rowSelectedChange: "rowSelectedChange", selectionChange: "selectionChange", cellClick: "cellClick", cellSelectedChange: "cellSelectedChange", expansionChange: "expansionChange", rowContextMenu: "rowContextMenu", infiniteScrollLoad: "infiniteScrollLoad", focusedRowChange: "focusedRowChange" }, host: { listeners: { "document:keydown": "handleKeyDown($event)" }, properties: { "class.data-grid-animations-enabled": "!_animationsDisabled", "class.data-grid-size-small": "size() === \"small\"", "class.data-grid-size-medium": "size() === \"medium\"", "class.data-grid-size-normal": "size() === \"normal\"", "attr.tabindex": "0" }, classAttribute: "data-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: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], exportAs: ["dataGrid"], usesOnChanges: true, ngImport: i0, template: "<!-- src/app/shared/components/data-grid/data-grid.component.html -->\n@if (loading()) {\n<div class=\"data-grid-progress\">\n <mat-progress-bar mode=\"indeterminate\" />\n</div>\n} @if (showToolbar()) {\n<div class=\"data-grid-toolbar\">\n <div class=\"data-grid-toolbar-content\">\n @if (toolbarTemplate()) {\n <ng-template [ngTemplateOutlet]=\"toolbarTemplate()\" />\n } @else if (toolbarTitle()) {\n <div class=\"data-grid-toolbar-title\">{{ toolbarTitle() }}</div>\n }\n </div>\n <div class=\"data-grid-toolbar-actions\"></div>\n</div>\n}\n\n<div class=\"data-grid-main data-grid-layout\">\n <div class=\"data-grid-content data-grid-layout\">\n <div #tableContainer class=\"mat-table-container\" [class.mat-table-with-data]=\"!hasNoResult()\">\n <table\n mat-table\n [class.mat-table-hover]=\"rowHover()\"\n [class.mat-table-striped]=\"rowStriped()\"\n [class.mat-table-expandable]=\"expandable()\"\n [class.mat-table-keyboard-navigation]=\"keyboardNavigation()\"\n [dataSource]=\"dataSource\"\n multiTemplateDataRows\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 <!-- Selection Column -->\n @if (rowSelectable() && !hideRowSelectionCheckbox()) {\n <ng-container matColumnDef=\"DataGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"data-grid-checkbox-cell\">\n @if (multiSelectable()) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !isAllSelected()\"\n (change)=\"$event ? toggleAllRows() : null\"\n />\n }\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n class=\"data-grid-checkbox-cell\"\n >\n @if (!shouldHideCheckbox(row, getIndex(index, dataIndex))) {\n <mat-checkbox\n [disabled]=\"isRowDisabled(row, getIndex(index, dataIndex))\"\n [checked]=\"rowSelection.isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? toggleNormalCheckbox(row) : null\"\n />\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"data-grid-checkbox-cell\"></td>\n </ng-container>\n }\n\n <!-- Data Columns -->\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 <!-- Header Cell -->\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 <!-- Prioridad 1: Template espec\u00EDfico de la columna -->\n @if (col.headerCellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.headerCellTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n />\n } @else if ($any(headerCellTemplate())?.[col.field] | isTemplateRef) {\n <!-- Prioridad 2: Template general por campo -->\n <ng-template\n [ngTemplateOutlet]=\"$any(headerCellTemplate())[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n />\n } @else if (headerCellTemplate() | isTemplateRef) {\n <!-- Prioridad 3: Template general -->\n <ng-template\n [ngTemplateOutlet]=\"$any(headerCellTemplate())\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n />\n } @else if ($any(headerTemplate())?.[col.field] | isTemplateRef) {\n <!-- Prioridad 4: Template por campo en headerTemplate -->\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate())[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n />\n } @else if (headerTemplate() | isTemplateRef) {\n <!-- Prioridad 5: Template general en headerTemplate -->\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate())\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n />\n } @else {\n <!-- Comportamiento por defecto -->\n <div class=\"mat-header-cell-inner\">\n <div\n [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear()\"\n [arrowPosition]=\"col.sortProp?.arrowPosition!\"\n [start]=\"col.sortProp?.start!\"\n >\n @if (col.showExpand) {\n <span class=\"data-grid-expansion-placeholder\"></span>\n }\n <span>{{ col.header | toObservable | async }}</span>\n @if (col.sortable) {\n <svg\n class=\"data-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 />\n </div>\n }\n </th>\n\n <!-- Data Cell -->\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [class]=\"col | colClass: row : rowChangeRecord : rowChangeRecord?.currentValue\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [class.focused]=\"keyboardNavigation() && focusedRowIndex() === dataIndex\"\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 />\n } @else { @if ($any(cellTemplate())?.[col.field] | 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 />\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 />\n } @else { @if (col.showExpand) {\n <button\n class=\"data-grid-row-expand-button\"\n mat-icon-button\n acpDataGridExpansionToggle\n type=\"button\"\n [(opened)]=\"expansionRowStates()[dataIndex].expanded\"\n (toggleChange)=\"onExpansionChange($event, row, col, dataIndex)\"\n >\n <svg\n class=\"data-grid-icon data-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-data-grid-cell\n [rowData]=\"row\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder()\"\n (rowDataChange)=\"onRowDataChange($event)\"\n />\n } } }\n </td>\n\n <!-- Footer Cell -->\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=\"data-grid-expansion-placeholder\"></span>\n } @if (summaryTemplate() | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate())\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data() }\"\n />\n } @else { @if ($any(summaryTemplate())?.[col.field] | 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 />\n } @else {\n <acp-data-grid-cell\n [summary]=\"true\"\n [data]=\"data()\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder()\"\n />\n } }\n </td>\n </ng-container>\n }\n\n <!-- Header Row -->\n @if (!useContentHeaderRowTemplate()) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: true\"></tr>\n }\n\n <!-- Data Rows -->\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.focused]=\"keyboardNavigation() && focusedRowIndex() === dataIndex\"\n [class.highlighted]=\"highlightedRowIndex() === dataIndex\"\n (click)=\"selectRow($event, row, getIndex(index, dataIndex))\"\n (contextmenu)=\"contextmenu($event, row, getIndex(index, dataIndex))\"\n ></tr>\n }\n\n <!-- Summary Row -->\n @if (whetherShowSummary()) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\"></tr>\n }\n\n <!-- Expansion Row -->\n @if (expandable()) {\n <ng-container matColumnDef=\"DataGridExpansionColumnDef\">\n <td\n mat-cell\n *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns().length\"\n >\n <div class=\"data-grid-expansion-detail-wrapper\">\n <div class=\"data-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 />\n </div>\n </div>\n </td>\n </ng-container>\n <tr\n mat-row\n *matRowDef=\"let row; columns: ['DataGridExpansionColumnDef']; let dataIndex = dataIndex\"\n class=\"data-grid-expansion\"\n [class]=\"expansionRowStates()[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n ></tr>\n }\n </table>\n </div>\n\n <!-- No result -->\n @if (hasNoResult()) {\n <div class=\"data-grid-no-result\">\n @if (noResultTemplate()) {\n <ng-template [ngTemplateOutlet]=\"noResultTemplate()\" />\n } @else { {{ noResultText() }} }\n </div>\n }\n\n <!-- Infinite Scroll Loading Indicator -->\n @if (infiniteScroll() && isLoadingMore()) {\n <div class=\"data-grid-infinite-scroll-loading\">\n <mat-progress-bar mode=\"indeterminate\" />\n </div>\n }\n </div>\n</div>\n\n<div class=\"data-grid-footer\">\n <!-- Pagination -->\n @if (!infiniteScroll() && showPaginator()) {\n <div class=\"data-grid-pagination\">\n @if (paginationTemplate()) {\n <ng-template [ngTemplateOutlet]=\"paginationTemplate()\" />\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 />\n }\n </div>\n }\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 />\n } @else { @if ($any(headerExtraTemplate)?.[col.field] | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n />\n } }\n</ng-template>\n", styles: [".data-grid{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid #c4c6d0;border-radius:12px}.data-grid .mat-table-container{overflow:auto}.data-grid .mat-table-container.mat-table-with-data{flex:1}.data-grid .mat-mdc-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.data-grid .mat-table-sticky-left{border-right:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .data-grid .mat-table-sticky-left{border-right-width:0;border-left:1px solid var(--mat-table-row-item-outline-color)}.data-grid .mat-table-sticky-right{border-left:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .data-grid .mat-table-sticky-right{border-left-width:0;border-right:1px solid var(--mat-table-row-item-outline-color)}.data-grid .mat-mdc-footer-cell{border-top:1px solid var(--mat-table-row-item-outline-color)}.data-grid .mat-mdc-row.highlighted{background-color:var(--mat-sys-surface-container-highest, #e6e1e5)}.data-grid .mat-mdc-row.data-grid-expansion{height:0;overflow:hidden}.data-grid .mat-mdc-row.data-grid-expansion .mat-mdc-cell{padding-top:0;padding-bottom:0}.data-grid .mat-mdc-row.data-grid-expansion.collapsed .mat-mdc-cell{border-bottom-width:0}.data-grid .mat-sort-header-icon{margin-left:4px}[dir=rtl] .data-grid .mat-sort-header-icon{margin-left:0;margin-right:4px}.data-grid .mat-header-cell-inner{display:inline-flex;align-items:center;vertical-align:middle}.data-grid .mat-paginator-hidden{display:none}.data-grid .data-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mat-checkbox-state-layer-size, 40px)) / 2)}.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-header-row,.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-footer-cell,.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-row{padding:4px 8px;font-size:12px;height:32px}.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-header-cell{height:32px}.data-grid.data-grid-size-small .data-grid-checkbox-cell{width:40px;min-width:40px;padding:0 calc((40px - var(--mat-checkbox-state-layer-size, 32px)) / 2)}.data-grid.data-grid-size-small .data-grid-row-expand-button{width:28px;height:28px}.data-grid.data-grid-size-small .data-grid-row-expand-button .data-grid-icon{width:18px;height:18px}.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-header-row,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-header-cell,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-footer-cell,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-row,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-cell{padding:8px 12px;font-size:13px;height:40px}.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-header-cell{height:48px}.data-grid.data-grid-size-medium .data-grid-checkbox-cell{width:50px;min-width:50px;padding:0 calc((50px - var(--mat-checkbox-state-layer-size, 36px)) / 2)}.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-header-cell,.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-footer-cell,.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-cell{padding:12px 16px;font-size:14px;height:48px}.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-header-cell{height:56px}.data-grid.data-grid-size-normal .data-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mat-checkbox-state-layer-size, 40px)) / 2)}.data-grid-progress{position:absolute;top:0;z-index:120;width:100%}.data-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}.data-grid-toolbar-content{flex:1;width:0;padding:0 8px}.data-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.data-grid-content{flex-direction:column;width:0}.data-grid-footer{position:relative;z-index:1}.data-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.data-grid-expansion-placeholder{display:inline-block;vertical-align:middle;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size)}.data-grid-expansion-detail-wrapper{display:grid;grid-template-rows:0fr;grid-template-columns:100%;padding:0;overflow:hidden}.data-grid-expansion.expanded .data-grid-expansion-detail-wrapper{grid-template-rows:1fr;padding:calc((var(--mat-table-row-item-container-height, 52px) - 20px) / 2) 0}.data-grid-expansion-detail{min-height:0}.data-grid-animations-enabled .data-grid-expansion-detail-wrapper{transition:all 225ms cubic-bezier(.4,0,.2,1)}.data-grid-row-expand-button.expanded .data-grid-row-expand-icon{transform:rotate(90deg)}.data-grid-row-expand-button.mat-mdc-icon-button,.data-grid-row-expand-button+data-grid-cell{vertical-align:middle}.mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused{background-color:#3f51b514!important;position:relative}.mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused:after{content:\"\";position:absolute;inset:0;border:2px solid #3f51b5;pointer-events:none;z-index:1}.mat-table-keyboard-navigation .mat-mdc-row:hover:not(.focused){background-color:#0000000a}.mat-app-background .mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused{background-color:rgba(var(--mat-primary-color),.08)!important}.mat-app-background .mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused:after{border-color:rgba(var(--mat-primary-color),1)}.data-grid-infinite-scroll-loading{width:100%;position:relative;height:4px}\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: DataGridSelectableCell, selector: "[acpGridSelectableCell]", inputs: ["cellSelectable"], outputs: ["cellSelectedChange"] }, { kind: "directive", type: DataGridExpansionToggle, selector: "[acpDataGridExpansionToggle]", inputs: ["opened", "expandableRow", "expansionRowTpl"], outputs: ["openedChange", "toggleChange"] }, { kind: "component", type: DataGridCell, selector: "acp-data-grid-cell", inputs: ["rowData", "colDef", "summary", "data", "placeholder"], outputs: ["rowDataChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DataGridColClassPipe, name: "colClass" }, { kind: "pipe", type: AcpIsTemplateRefPipe, name: "isTemplateRef" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: DataGridRowClassPipe, name: "rowClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3280
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DataGrid, isStandalone: true, selector: "acp-data-grid", inputs: { showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showColumnMenuButton: { classPropertyName: "showColumnMenuButton", publicName: "showColumnMenuButton", isSignal: true, isRequired: false, transformFunction: null }, toolbarTitle: { classPropertyName: "toolbarTitle", publicName: "toolbarTitle", isSignal: true, isRequired: false, transformFunction: null }, toolbarTemplate: { classPropertyName: "toolbarTemplate", publicName: "toolbarTemplate", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyValuePlaceholder: { classPropertyName: "emptyValuePlaceholder", publicName: "emptyValuePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, headerExtraTemplate: { classPropertyName: "headerExtraTemplate", publicName: "headerExtraTemplate", isSignal: true, isRequired: false, transformFunction: null }, noResultTemplate: { classPropertyName: "noResultTemplate", publicName: "noResultTemplate", isSignal: true, isRequired: false, transformFunction: null }, paginationTemplate: { classPropertyName: "paginationTemplate", publicName: "paginationTemplate", isSignal: true, isRequired: false, transformFunction: null }, summaryTemplate: { classPropertyName: "summaryTemplate", publicName: "summaryTemplate", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, headerCellTemplate: { classPropertyName: "headerCellTemplate", publicName: "headerCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expansionTemplate: { classPropertyName: "expansionTemplate", publicName: "expansionTemplate", isSignal: true, isRequired: false, transformFunction: null }, closeOthersOnExpand: { classPropertyName: "closeOthersOnExpand", publicName: "closeOthersOnExpand", isSignal: true, isRequired: false, transformFunction: null }, pageOnFront: { classPropertyName: "pageOnFront", publicName: "pageOnFront", isSignal: true, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, pageDisabled: { classPropertyName: "pageDisabled", publicName: "pageDisabled", isSignal: true, isRequired: false, transformFunction: null }, showFirstLastButtons: { classPropertyName: "showFirstLastButtons", publicName: "showFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "infiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrollThreshold: { classPropertyName: "infiniteScrollThreshold", publicName: "infiniteScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrollDisabled: { classPropertyName: "infiniteScrollDisabled", publicName: "infiniteScrollDisabled", isSignal: true, 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 }, sortOnFront: { classPropertyName: "sortOnFront", publicName: "sortOnFront", isSignal: true, isRequired: false, transformFunction: null }, sortActive: { classPropertyName: "sortActive", publicName: "sortActive", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, sortDisableClear: { classPropertyName: "sortDisableClear", publicName: "sortDisableClear", isSignal: true, isRequired: false, transformFunction: null }, sortDisabled: { classPropertyName: "sortDisabled", publicName: "sortDisabled", isSignal: true, isRequired: false, transformFunction: null }, sortStart: { classPropertyName: "sortStart", publicName: "sortStart", isSignal: true, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: true, isRequired: false, transformFunction: null }, rowStriped: { classPropertyName: "rowStriped", publicName: "rowStriped", isSignal: true, isRequired: false, transformFunction: null }, rowSelectable: { classPropertyName: "rowSelectable", publicName: "rowSelectable", isSignal: true, isRequired: false, transformFunction: null }, multiSelectable: { classPropertyName: "multiSelectable", publicName: "multiSelectable", isSignal: true, isRequired: false, transformFunction: null }, multiSelectionWithClick: { classPropertyName: "multiSelectionWithClick", publicName: "multiSelectionWithClick", isSignal: true, isRequired: false, transformFunction: null }, hideRowSelectionCheckbox: { classPropertyName: "hideRowSelectionCheckbox", publicName: "hideRowSelectionCheckbox", isSignal: true, isRequired: false, transformFunction: null }, disableRowClickSelection: { classPropertyName: "disableRowClickSelection", publicName: "disableRowClickSelection", isSignal: true, isRequired: false, transformFunction: null }, rowClassFormatter: { classPropertyName: "rowClassFormatter", publicName: "rowClassFormatter", isSignal: true, isRequired: false, transformFunction: null }, rowSelected: { classPropertyName: "rowSelected", publicName: "rowSelected", isSignal: true, isRequired: false, transformFunction: null }, rowSelectionFormatter: { classPropertyName: "rowSelectionFormatter", publicName: "rowSelectionFormatter", isSignal: true, isRequired: false, transformFunction: null }, cellSelectable: { classPropertyName: "cellSelectable", publicName: "cellSelectable", isSignal: true, isRequired: false, transformFunction: null }, useContentRowTemplate: { classPropertyName: "useContentRowTemplate", publicName: "useContentRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, useContentHeaderRowTemplate: { classPropertyName: "useContentHeaderRowTemplate", publicName: "useContentHeaderRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, useContentFooterRowTemplate: { classPropertyName: "useContentFooterRowTemplate", publicName: "useContentFooterRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, showSummary: { classPropertyName: "showSummary", publicName: "showSummary", isSignal: true, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "page", sortChange: "sortChange", rowClick: "rowClick", rowSelectedChange: "rowSelectedChange", selectionChange: "selectionChange", cellClick: "cellClick", cellSelectedChange: "cellSelectedChange", expansionChange: "expansionChange", rowContextMenu: "rowContextMenu", infiniteScrollLoad: "infiniteScrollLoad", focusedRowChange: "focusedRowChange" }, host: { listeners: { "document:keydown": "handleKeyDown($event)" }, properties: { "class.data-grid-animations-enabled": "!_animationsDisabled", "class.data-grid-size-small": "size() === \"small\"", "class.data-grid-size-medium": "size() === \"medium\"", "class.data-grid-size-normal": "size() === \"normal\"", "attr.tabindex": "0" }, classAttribute: "data-grid" }, queries: [{ propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "headerRowDefs", predicate: MatHeaderRowDef }, { propertyName: "footerRowDefs", predicate: MatFooterRow }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "paginator1", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], exportAs: ["dataGrid"], usesOnChanges: true, ngImport: i0, template: "<!-- src/app/shared/components/data-grid/data-grid.component.html -->\n@if (loading()) {\n<div class=\"data-grid-progress\">\n <mat-progress-bar mode=\"indeterminate\" />\n</div>\n} @if (showToolbar()) {\n<div class=\"data-grid-toolbar\">\n <div class=\"data-grid-toolbar-content\">\n @if (toolbarTemplate()) {\n <ng-template [ngTemplateOutlet]=\"toolbarTemplate()\" />\n } @else if (toolbarTitle()) {\n <div class=\"data-grid-toolbar-title\">{{ toolbarTitle() }}</div>\n }\n </div>\n <div class=\"data-grid-toolbar-actions\"></div>\n</div>\n}\n\n<div class=\"data-grid-main data-grid-layout\">\n <div class=\"data-grid-content data-grid-layout\">\n <div #tableContainer class=\"mat-table-container\" [class.mat-table-with-data]=\"!hasNoResult()\">\n <table\n mat-table\n [class.mat-table-hover]=\"rowHover()\"\n [class.mat-table-striped]=\"rowStriped()\"\n [class.mat-table-expandable]=\"expandable()\"\n [class.mat-table-keyboard-navigation]=\"keyboardNavigation()\"\n [dataSource]=\"dataSource\"\n multiTemplateDataRows\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 <!-- Selection Column -->\n @if (rowSelectable() && !hideRowSelectionCheckbox()) {\n <ng-container matColumnDef=\"DataGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"data-grid-checkbox-cell\">\n @if (multiSelectable()) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !isAllSelected()\"\n (change)=\"$event ? toggleAllRows() : null\"\n />\n }\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n class=\"data-grid-checkbox-cell\"\n >\n @if (!shouldHideCheckbox(row, getIndex(index, dataIndex))) {\n <mat-checkbox\n [disabled]=\"isRowDisabled(row, getIndex(index, dataIndex))\"\n [checked]=\"rowSelection.isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? toggleNormalCheckbox(row) : null\"\n />\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"data-grid-checkbox-cell\"></td>\n </ng-container>\n }\n\n <!-- Data Columns -->\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 <!-- Header Cell -->\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 <!-- Prioridad 1: Template espec\u00EDfico de la columna -->\n @if (col.headerCellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.headerCellTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n />\n } @else if ($any(headerCellTemplate())?.[col.field] | isTemplateRef) {\n <!-- Prioridad 2: Template general por campo -->\n <ng-template\n [ngTemplateOutlet]=\"$any(headerCellTemplate())[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n />\n } @else if (headerCellTemplate() | isTemplateRef) {\n <!-- Prioridad 3: Template general -->\n <ng-template\n [ngTemplateOutlet]=\"$any(headerCellTemplate())\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n />\n } @else if ($any(headerTemplate())?.[col.field] | isTemplateRef) {\n <!-- Prioridad 4: Template por campo en headerTemplate -->\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate())[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n />\n } @else if (headerTemplate() | isTemplateRef) {\n <!-- Prioridad 5: Template general en headerTemplate -->\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate())\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n />\n } @else {\n <!-- Comportamiento por defecto -->\n <div class=\"mat-header-cell-inner\">\n <div\n [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear()\"\n [arrowPosition]=\"col.sortProp?.arrowPosition!\"\n [start]=\"col.sortProp?.start!\"\n >\n @if (col.showExpand) {\n <span class=\"data-grid-expansion-placeholder\"></span>\n }\n <span>{{ col.header | toObservable | async }}</span>\n @if (col.sortable) {\n <svg\n class=\"data-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 />\n </div>\n }\n </th>\n\n <!-- Data Cell -->\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [class]=\"col | colClass: row : rowChangeRecord : rowChangeRecord?.currentValue\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [class.focused]=\"keyboardNavigation() && focusedRowIndex() === dataIndex\"\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 />\n } @else { @if ($any(cellTemplate())?.[col.field] | 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 />\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 />\n } @else { @if (col.showExpand) {\n <button\n class=\"data-grid-row-expand-button\"\n mat-icon-button\n acpDataGridExpansionToggle\n type=\"button\"\n [(opened)]=\"expansionRowStates()[dataIndex].expanded\"\n (toggleChange)=\"onExpansionChange($event, row, col, dataIndex)\"\n >\n <svg\n class=\"data-grid-icon data-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-data-grid-cell\n [rowData]=\"row\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder()\"\n (rowDataChange)=\"onRowDataChange($event)\"\n />\n } } }\n </td>\n\n <!-- Footer Cell -->\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=\"data-grid-expansion-placeholder\"></span>\n } @if (summaryTemplate() | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate())\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data() }\"\n />\n } @else { @if ($any(summaryTemplate())?.[col.field] | 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 />\n } @else {\n <acp-data-grid-cell\n [summary]=\"true\"\n [data]=\"data()\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder()\"\n />\n } }\n </td>\n </ng-container>\n }\n\n <!-- Header Row -->\n @if (!useContentHeaderRowTemplate()) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: true\"></tr>\n }\n\n <!-- Data Rows -->\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.focused]=\"keyboardNavigation() && focusedRowIndex() === dataIndex\"\n [class.highlighted]=\"highlightedRowIndex() === dataIndex\"\n (click)=\"selectRow($event, row, getIndex(index, dataIndex))\"\n (contextmenu)=\"contextmenu($event, row, getIndex(index, dataIndex))\"\n ></tr>\n }\n\n <!-- Summary Row -->\n @if (whetherShowSummary()) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\"></tr>\n }\n\n <!-- Expansion Row -->\n @if (expandable()) {\n <ng-container matColumnDef=\"DataGridExpansionColumnDef\">\n <td\n mat-cell\n *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns().length\"\n >\n <div class=\"data-grid-expansion-detail-wrapper\">\n <div class=\"data-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 />\n </div>\n </div>\n </td>\n </ng-container>\n <tr\n mat-row\n *matRowDef=\"let row; columns: ['DataGridExpansionColumnDef']; let dataIndex = dataIndex\"\n class=\"data-grid-expansion\"\n [class]=\"expansionRowStates()[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n ></tr>\n }\n </table>\n </div>\n\n <!-- No result -->\n @if (hasNoResult()) {\n <div class=\"data-grid-no-result\">\n @if (noResultTemplate()) {\n <ng-template [ngTemplateOutlet]=\"noResultTemplate()\" />\n } @else { {{ noResultText() }} }\n </div>\n }\n\n <!-- Infinite Scroll Loading Indicator -->\n @if (infiniteScroll() && isLoadingMore()) {\n <div class=\"data-grid-infinite-scroll-loading\">\n <mat-progress-bar mode=\"indeterminate\" />\n </div>\n }\n </div>\n</div>\n\n<div class=\"data-grid-footer\">\n <!-- Pagination -->\n @if (!infiniteScroll() && showPaginator()) {\n <div class=\"data-grid-pagination\">\n @if (paginationTemplate()) {\n <ng-template [ngTemplateOutlet]=\"paginationTemplate()\" />\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 />\n }\n </div>\n }\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 />\n } @else { @if ($any(headerExtraTemplate)?.[col.field] | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n />\n } }\n</ng-template>\n", styles: [".data-grid{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid #c4c6d0;border-radius:12px}.data-grid .mat-table-container{overflow:auto}.data-grid .mat-table-container.mat-table-with-data{flex:1}.data-grid .mat-mdc-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.data-grid .mat-table-sticky-left{border-right:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .data-grid .mat-table-sticky-left{border-right-width:0;border-left:1px solid var(--mat-table-row-item-outline-color)}.data-grid .mat-table-sticky-right{border-left:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .data-grid .mat-table-sticky-right{border-left-width:0;border-right:1px solid var(--mat-table-row-item-outline-color)}.data-grid .mat-mdc-footer-cell{border-top:1px solid var(--mat-table-row-item-outline-color)}.data-grid .mat-mdc-row.highlighted{background-color:var(--mat-sys-surface-container-highest, #e6e1e5)}.data-grid .mat-mdc-row.data-grid-expansion{height:0;overflow:hidden}.data-grid .mat-mdc-row.data-grid-expansion .mat-mdc-cell{padding-top:0;padding-bottom:0}.data-grid .mat-mdc-row.data-grid-expansion.collapsed .mat-mdc-cell{border-bottom-width:0}.data-grid .mat-sort-header-icon{margin-left:4px}[dir=rtl] .data-grid .mat-sort-header-icon{margin-left:0;margin-right:4px}.data-grid .mat-header-cell-inner{display:inline-flex;align-items:center;vertical-align:middle}.data-grid .mat-paginator-hidden{display:none}.data-grid .data-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mat-checkbox-state-layer-size, 40px)) / 2)}.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-header-row,.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-footer-cell,.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-row{padding:4px 8px;font-size:12px;height:32px}.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-header-cell{height:32px}.data-grid.data-grid-size-small .data-grid-checkbox-cell{width:40px;min-width:40px;padding:0 calc((40px - var(--mat-checkbox-state-layer-size, 32px)) / 2)}.data-grid.data-grid-size-small .data-grid-row-expand-button{width:28px;height:28px}.data-grid.data-grid-size-small .data-grid-row-expand-button .data-grid-icon{width:18px;height:18px}.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-header-row,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-header-cell,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-footer-cell,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-row,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-cell{padding:8px 12px;font-size:13px;height:40px}.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-header-cell{height:48px}.data-grid.data-grid-size-medium .data-grid-checkbox-cell{width:50px;min-width:50px;padding:0 calc((50px - var(--mat-checkbox-state-layer-size, 36px)) / 2)}.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-header-cell,.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-footer-cell,.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-cell{padding:12px 16px;font-size:14px;height:48px}.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-header-cell{height:56px}.data-grid.data-grid-size-normal .data-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mat-checkbox-state-layer-size, 40px)) / 2)}.data-grid-progress{position:absolute;top:0;z-index:120;width:100%}.data-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}.data-grid-toolbar-content{flex:1;width:0;padding:0 8px}.data-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.data-grid-content{flex-direction:column;width:0}.data-grid-footer{position:relative;z-index:1}.data-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.data-grid-expansion-placeholder{display:inline-block;vertical-align:middle;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size)}.data-grid-expansion-detail-wrapper{display:grid;grid-template-rows:0fr;grid-template-columns:100%;padding:0;overflow:hidden}.data-grid-expansion.expanded .data-grid-expansion-detail-wrapper{grid-template-rows:1fr;padding:calc((var(--mat-table-row-item-container-height, 52px) - 20px) / 2) 0}.data-grid-expansion-detail{min-height:0}.data-grid-animations-enabled .data-grid-expansion-detail-wrapper{transition:all 225ms cubic-bezier(.4,0,.2,1)}.data-grid-row-expand-button.expanded .data-grid-row-expand-icon{transform:rotate(90deg)}.data-grid-row-expand-button.mat-mdc-icon-button,.data-grid-row-expand-button+data-grid-cell{vertical-align:middle}.mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused{background-color:#3f51b514!important;position:relative}.mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused:after{content:\"\";position:absolute;inset:0;border:2px solid #3f51b5;pointer-events:none;z-index:1}.mat-table-keyboard-navigation .mat-mdc-row:hover:not(.focused){background-color:#0000000a}.mat-app-background .mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused{background-color:rgba(var(--mat-primary-color),.08)!important}.mat-app-background .mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused:after{border-color:rgba(var(--mat-primary-color),1)}.data-grid-infinite-scroll-loading{width:100%;position:relative;height:4px}\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: DataGridSelectableCell, selector: "[acpGridSelectableCell]", inputs: ["cellSelectable"], outputs: ["cellSelectedChange"] }, { kind: "directive", type: DataGridExpansionToggle, selector: "[acpDataGridExpansionToggle]", inputs: ["opened", "expandableRow", "expansionRowTpl"], outputs: ["openedChange", "toggleChange"] }, { kind: "component", type: DataGridCell, selector: "acp-data-grid-cell", inputs: ["rowData", "colDef", "summary", "data", "placeholder"], outputs: ["rowDataChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DataGridColClassPipe, name: "colClass" }, { kind: "pipe", type: AcpIsTemplateRefPipe, name: "isTemplateRef" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: DataGridRowClassPipe, name: "rowClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3272
3281
|
}
|
|
3273
3282
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DataGrid, decorators: [{
|
|
3274
3283
|
type: Component,
|
|
@@ -3311,10 +3320,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
3311
3320
|
'[attr.tabindex]': '0',
|
|
3312
3321
|
// '(keydown)': 'handleKeyDown($event)'
|
|
3313
3322
|
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- src/app/shared/components/data-grid/data-grid.component.html -->\n@if (loading()) {\n<div class=\"data-grid-progress\">\n <mat-progress-bar mode=\"indeterminate\" />\n</div>\n} @if (showToolbar()) {\n<div class=\"data-grid-toolbar\">\n <div class=\"data-grid-toolbar-content\">\n @if (toolbarTemplate()) {\n <ng-template [ngTemplateOutlet]=\"toolbarTemplate()\" />\n } @else if (toolbarTitle()) {\n <div class=\"data-grid-toolbar-title\">{{ toolbarTitle() }}</div>\n }\n </div>\n <div class=\"data-grid-toolbar-actions\"></div>\n</div>\n}\n\n<div class=\"data-grid-main data-grid-layout\">\n <div class=\"data-grid-content data-grid-layout\">\n <div #tableContainer class=\"mat-table-container\" [class.mat-table-with-data]=\"!hasNoResult()\">\n <table\n mat-table\n [class.mat-table-hover]=\"rowHover()\"\n [class.mat-table-striped]=\"rowStriped()\"\n [class.mat-table-expandable]=\"expandable()\"\n [class.mat-table-keyboard-navigation]=\"keyboardNavigation()\"\n [dataSource]=\"dataSource\"\n multiTemplateDataRows\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 <!-- Selection Column -->\n @if (rowSelectable() && !hideRowSelectionCheckbox()) {\n <ng-container matColumnDef=\"DataGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"data-grid-checkbox-cell\">\n @if (multiSelectable()) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !isAllSelected()\"\n (change)=\"$event ? toggleAllRows() : null\"\n />\n }\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n class=\"data-grid-checkbox-cell\"\n >\n @if (!shouldHideCheckbox(row, getIndex(index, dataIndex))) {\n <mat-checkbox\n [disabled]=\"isRowDisabled(row, getIndex(index, dataIndex))\"\n [checked]=\"rowSelection.isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? toggleNormalCheckbox(row) : null\"\n />\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"data-grid-checkbox-cell\"></td>\n </ng-container>\n }\n\n <!-- Data Columns -->\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 <!-- Header Cell -->\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 <!-- Prioridad 1: Template espec\u00EDfico de la columna -->\n @if (col.headerCellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.headerCellTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n />\n } @else if ($any(headerCellTemplate())?.[col.field] | isTemplateRef) {\n <!-- Prioridad 2: Template general por campo -->\n <ng-template\n [ngTemplateOutlet]=\"$any(headerCellTemplate())[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n />\n } @else if (headerCellTemplate() | isTemplateRef) {\n <!-- Prioridad 3: Template general -->\n <ng-template\n [ngTemplateOutlet]=\"$any(headerCellTemplate())\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n />\n } @else if ($any(headerTemplate())?.[col.field] | isTemplateRef) {\n <!-- Prioridad 4: Template por campo en headerTemplate -->\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate())[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n />\n } @else if (headerTemplate() | isTemplateRef) {\n <!-- Prioridad 5: Template general en headerTemplate -->\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate())\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n />\n } @else {\n <!-- Comportamiento por defecto -->\n <div class=\"mat-header-cell-inner\">\n <div\n [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear()\"\n [arrowPosition]=\"col.sortProp?.arrowPosition!\"\n [start]=\"col.sortProp?.start!\"\n >\n @if (col.showExpand) {\n <span class=\"data-grid-expansion-placeholder\"></span>\n }\n <span>{{ col.header | toObservable | async }}</span>\n @if (col.sortable) {\n <svg\n class=\"data-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 />\n </div>\n }\n </th>\n\n <!-- Data Cell -->\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [class]=\"col | colClass: row : rowChangeRecord : rowChangeRecord?.currentValue\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [class.focused]=\"keyboardNavigation() && focusedRowIndex() === dataIndex\"\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 />\n } @else { @if ($any(cellTemplate())?.[col.field] | 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 />\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 />\n } @else { @if (col.showExpand) {\n <button\n class=\"data-grid-row-expand-button\"\n mat-icon-button\n acpDataGridExpansionToggle\n type=\"button\"\n [(opened)]=\"expansionRowStates()[dataIndex].expanded\"\n (toggleChange)=\"onExpansionChange($event, row, col, dataIndex)\"\n >\n <svg\n class=\"data-grid-icon data-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-data-grid-cell\n [rowData]=\"row\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder()\"\n (rowDataChange)=\"onRowDataChange($event)\"\n />\n } } }\n </td>\n\n <!-- Footer Cell -->\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=\"data-grid-expansion-placeholder\"></span>\n } @if (summaryTemplate() | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate())\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data() }\"\n />\n } @else { @if ($any(summaryTemplate())?.[col.field] | 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 />\n } @else {\n <acp-data-grid-cell\n [summary]=\"true\"\n [data]=\"data()\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder()\"\n />\n } }\n </td>\n </ng-container>\n }\n\n <!-- Header Row -->\n @if (!useContentHeaderRowTemplate()) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: true\"></tr>\n }\n\n <!-- Data Rows -->\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.focused]=\"keyboardNavigation() && focusedRowIndex() === dataIndex\"\n [class.highlighted]=\"highlightedRowIndex() === dataIndex\"\n (click)=\"selectRow($event, row, getIndex(index, dataIndex))\"\n (contextmenu)=\"contextmenu($event, row, getIndex(index, dataIndex))\"\n ></tr>\n }\n\n <!-- Summary Row -->\n @if (whetherShowSummary()) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\"></tr>\n }\n\n <!-- Expansion Row -->\n @if (expandable()) {\n <ng-container matColumnDef=\"DataGridExpansionColumnDef\">\n <td\n mat-cell\n *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns().length\"\n >\n <div class=\"data-grid-expansion-detail-wrapper\">\n <div class=\"data-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 />\n </div>\n </div>\n </td>\n </ng-container>\n <tr\n mat-row\n *matRowDef=\"let row; columns: ['DataGridExpansionColumnDef']; let dataIndex = dataIndex\"\n class=\"data-grid-expansion\"\n [class]=\"expansionRowStates()[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n ></tr>\n }\n </table>\n </div>\n\n <!-- No result -->\n @if (hasNoResult()) {\n <div class=\"data-grid-no-result\">\n @if (noResultTemplate()) {\n <ng-template [ngTemplateOutlet]=\"noResultTemplate()\" />\n } @else { {{ noResultText() }} }\n </div>\n }\n\n <!-- Infinite Scroll Loading Indicator -->\n @if (infiniteScroll() && isLoadingMore()) {\n <div class=\"data-grid-infinite-scroll-loading\">\n <mat-progress-bar mode=\"indeterminate\" />\n </div>\n }\n </div>\n</div>\n\n<div class=\"data-grid-footer\">\n <!-- Pagination -->\n @if (!infiniteScroll() && showPaginator()) {\n <div class=\"data-grid-pagination\">\n @if (paginationTemplate()) {\n <ng-template [ngTemplateOutlet]=\"paginationTemplate()\" />\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 />\n }\n </div>\n }\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 />\n } @else { @if ($any(headerExtraTemplate)?.[col.field] | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n />\n } }\n</ng-template>\n", styles: [".data-grid{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid #c4c6d0;border-radius:12px}.data-grid .mat-table-container{overflow:auto}.data-grid .mat-table-container.mat-table-with-data{flex:1}.data-grid .mat-mdc-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.data-grid .mat-table-sticky-left{border-right:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .data-grid .mat-table-sticky-left{border-right-width:0;border-left:1px solid var(--mat-table-row-item-outline-color)}.data-grid .mat-table-sticky-right{border-left:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .data-grid .mat-table-sticky-right{border-left-width:0;border-right:1px solid var(--mat-table-row-item-outline-color)}.data-grid .mat-mdc-footer-cell{border-top:1px solid var(--mat-table-row-item-outline-color)}.data-grid .mat-mdc-row.highlighted{background-color:var(--mat-sys-surface-container-highest, #e6e1e5)}.data-grid .mat-mdc-row.data-grid-expansion{height:0;overflow:hidden}.data-grid .mat-mdc-row.data-grid-expansion .mat-mdc-cell{padding-top:0;padding-bottom:0}.data-grid .mat-mdc-row.data-grid-expansion.collapsed .mat-mdc-cell{border-bottom-width:0}.data-grid .mat-sort-header-icon{margin-left:4px}[dir=rtl] .data-grid .mat-sort-header-icon{margin-left:0;margin-right:4px}.data-grid .mat-header-cell-inner{display:inline-flex;align-items:center;vertical-align:middle}.data-grid .mat-paginator-hidden{display:none}.data-grid .data-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mat-checkbox-state-layer-size, 40px)) / 2)}.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-header-row,.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-footer-cell,.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-row{padding:4px 8px;font-size:12px;height:32px}.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-header-cell{height:32px}.data-grid.data-grid-size-small .data-grid-checkbox-cell{width:40px;min-width:40px;padding:0 calc((40px - var(--mat-checkbox-state-layer-size, 32px)) / 2)}.data-grid.data-grid-size-small .data-grid-row-expand-button{width:28px;height:28px}.data-grid.data-grid-size-small .data-grid-row-expand-button .data-grid-icon{width:18px;height:18px}.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-header-row,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-header-cell,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-footer-cell,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-row,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-cell{padding:8px 12px;font-size:13px;height:40px}.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-header-cell{height:48px}.data-grid.data-grid-size-medium .data-grid-checkbox-cell{width:50px;min-width:50px;padding:0 calc((50px - var(--mat-checkbox-state-layer-size, 36px)) / 2)}.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-header-cell,.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-footer-cell,.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-cell{padding:12px 16px;font-size:14px;height:48px}.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-header-cell{height:56px}.data-grid.data-grid-size-normal .data-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mat-checkbox-state-layer-size, 40px)) / 2)}.data-grid-progress{position:absolute;top:0;z-index:120;width:100%}.data-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}.data-grid-toolbar-content{flex:1;width:0;padding:0 8px}.data-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.data-grid-content{flex-direction:column;width:0}.data-grid-footer{position:relative;z-index:1}.data-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.data-grid-expansion-placeholder{display:inline-block;vertical-align:middle;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size)}.data-grid-expansion-detail-wrapper{display:grid;grid-template-rows:0fr;grid-template-columns:100%;padding:0;overflow:hidden}.data-grid-expansion.expanded .data-grid-expansion-detail-wrapper{grid-template-rows:1fr;padding:calc((var(--mat-table-row-item-container-height, 52px) - 20px) / 2) 0}.data-grid-expansion-detail{min-height:0}.data-grid-animations-enabled .data-grid-expansion-detail-wrapper{transition:all 225ms cubic-bezier(.4,0,.2,1)}.data-grid-row-expand-button.expanded .data-grid-row-expand-icon{transform:rotate(90deg)}.data-grid-row-expand-button.mat-mdc-icon-button,.data-grid-row-expand-button+data-grid-cell{vertical-align:middle}.mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused{background-color:#3f51b514!important;position:relative}.mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused:after{content:\"\";position:absolute;inset:0;border:2px solid #3f51b5;pointer-events:none;z-index:1}.mat-table-keyboard-navigation .mat-mdc-row:hover:not(.focused){background-color:#0000000a}.mat-app-background .mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused{background-color:rgba(var(--mat-primary-color),.08)!important}.mat-app-background .mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused:after{border-color:rgba(var(--mat-primary-color),1)}.data-grid-infinite-scroll-loading{width:100%;position:relative;height:4px}\n"] }]
|
|
3314
|
-
}], ctorParameters: () => [], propDecorators: { table: [{
|
|
3323
|
+
}], ctorParameters: () => [], propDecorators: { paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }], table: [{
|
|
3315
3324
|
type: ViewChild,
|
|
3316
3325
|
args: [MatTable]
|
|
3317
|
-
}],
|
|
3326
|
+
}], paginator1: [{
|
|
3318
3327
|
type: ViewChild,
|
|
3319
3328
|
args: [MatPaginator]
|
|
3320
3329
|
}], sort: [{
|
|
@@ -3602,7 +3611,7 @@ class DateRangePicker {
|
|
|
3602
3611
|
@if (showCheckbox() && checkboxPosition() === 'prefix') {
|
|
3603
3612
|
<mat-checkbox
|
|
3604
3613
|
matPrefix
|
|
3605
|
-
[
|
|
3614
|
+
[(ngModel)]="checkboxChecked"
|
|
3606
3615
|
[disabled]="checkboxReadonly()"
|
|
3607
3616
|
[aria-label]="checkboxAriaLabel()"
|
|
3608
3617
|
(change)="onCheckboxToggle($event)"
|
|
@@ -3623,7 +3632,7 @@ class DateRangePicker {
|
|
|
3623
3632
|
@if (showCheckbox() && checkboxPosition() === 'suffix') {
|
|
3624
3633
|
<mat-checkbox
|
|
3625
3634
|
matSuffix
|
|
3626
|
-
[
|
|
3635
|
+
[(ngModel)]="checkboxChecked"
|
|
3627
3636
|
[disabled]="checkboxReadonly()"
|
|
3628
3637
|
[aria-label]="checkboxAriaLabel()"
|
|
3629
3638
|
(change)="onCheckboxToggle($event)"
|
|
@@ -3639,11 +3648,18 @@ class DateRangePicker {
|
|
|
3639
3648
|
<mat-error>{{ errorMessage() }}</mat-error>
|
|
3640
3649
|
}
|
|
3641
3650
|
</mat-form-field>
|
|
3642
|
-
`, isInline: true, styles: [".full-width{width:100%}\n"], dependencies: [{ 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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$3.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: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$2.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"] }] });
|
|
3651
|
+
`, isInline: true, styles: [".full-width{width:100%}\n"], dependencies: [{ 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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$3.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: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$2.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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
3643
3652
|
}
|
|
3644
3653
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DateRangePicker, decorators: [{
|
|
3645
3654
|
type: Component,
|
|
3646
|
-
args: [{ selector: 'acp-date-range-picker', standalone: true, imports: [
|
|
3655
|
+
args: [{ selector: 'acp-date-range-picker', standalone: true, imports: [
|
|
3656
|
+
MatFormFieldModule,
|
|
3657
|
+
MatInputModule,
|
|
3658
|
+
MatButtonModule,
|
|
3659
|
+
MatIconModule,
|
|
3660
|
+
MatCheckboxModule,
|
|
3661
|
+
FormsModule,
|
|
3662
|
+
], providers: [
|
|
3647
3663
|
{
|
|
3648
3664
|
provide: NG_VALUE_ACCESSOR,
|
|
3649
3665
|
useExisting: forwardRef(() => DateRangePicker),
|
|
@@ -3666,7 +3682,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
3666
3682
|
@if (showCheckbox() && checkboxPosition() === 'prefix') {
|
|
3667
3683
|
<mat-checkbox
|
|
3668
3684
|
matPrefix
|
|
3669
|
-
[
|
|
3685
|
+
[(ngModel)]="checkboxChecked"
|
|
3670
3686
|
[disabled]="checkboxReadonly()"
|
|
3671
3687
|
[aria-label]="checkboxAriaLabel()"
|
|
3672
3688
|
(change)="onCheckboxToggle($event)"
|
|
@@ -3687,7 +3703,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
3687
3703
|
@if (showCheckbox() && checkboxPosition() === 'suffix') {
|
|
3688
3704
|
<mat-checkbox
|
|
3689
3705
|
matSuffix
|
|
3690
|
-
[
|
|
3706
|
+
[(ngModel)]="checkboxChecked"
|
|
3691
3707
|
[disabled]="checkboxReadonly()"
|
|
3692
3708
|
[aria-label]="checkboxAriaLabel()"
|
|
3693
3709
|
(change)="onCheckboxToggle($event)"
|
|
@@ -3711,6 +3727,1619 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
3711
3727
|
|
|
3712
3728
|
// Angular component
|
|
3713
3729
|
|
|
3730
|
+
/**
|
|
3731
|
+
* Configuration used when opening a drawer.
|
|
3732
|
+
*
|
|
3733
|
+
* This class provides all the configuration options available when opening
|
|
3734
|
+
* a drawer, including positioning, sizing, behavior, and accessibility options.
|
|
3735
|
+
*
|
|
3736
|
+
* @template D The type of data to be injected into the drawer component
|
|
3737
|
+
*
|
|
3738
|
+
* @example
|
|
3739
|
+
* ```typescript
|
|
3740
|
+
* const config: AcpDrawerConfig = {
|
|
3741
|
+
* position: 'right',
|
|
3742
|
+
* width: '400px',
|
|
3743
|
+
* hasBackdrop: true,
|
|
3744
|
+
* disableClose: false,
|
|
3745
|
+
* data: { message: 'Hello from drawer!' },
|
|
3746
|
+
* ariaLabel: 'Settings drawer'
|
|
3747
|
+
* };
|
|
3748
|
+
*
|
|
3749
|
+
* this.drawer.open(MyDrawerComponent, config);
|
|
3750
|
+
* ```
|
|
3751
|
+
*/
|
|
3752
|
+
class AcpDrawerConfig {
|
|
3753
|
+
/** The view container to place the overlay for the drawer into. */
|
|
3754
|
+
viewContainerRef;
|
|
3755
|
+
/** ID for the drawer. If omitted, a unique one will be generated. */
|
|
3756
|
+
id;
|
|
3757
|
+
/** The ARIA role of the dialog element. */
|
|
3758
|
+
role = 'dialog';
|
|
3759
|
+
/** Extra CSS classes to be added to the drawer container. */
|
|
3760
|
+
panelClass;
|
|
3761
|
+
/** Text layout direction for the drawer. */
|
|
3762
|
+
direction;
|
|
3763
|
+
/** Data being injected into the child component. */
|
|
3764
|
+
data = null;
|
|
3765
|
+
/** Whether the drawer has a backdrop. */
|
|
3766
|
+
hasBackdrop = true;
|
|
3767
|
+
/** Custom class for the backdrop. */
|
|
3768
|
+
backdropClass;
|
|
3769
|
+
/** Whether the user can use escape or clicking outside to close the drawer. */
|
|
3770
|
+
disableClose = false;
|
|
3771
|
+
/** Aria label to assign to the drawer element. */
|
|
3772
|
+
ariaLabel = null;
|
|
3773
|
+
/**
|
|
3774
|
+
* Whether this is a modal dialog. Used to set the `aria-modal` attribute. Off by default,
|
|
3775
|
+
* because it can interfere with other overlay-based components (e.g. `mat-select`) and because
|
|
3776
|
+
* it is redundant since the dialog marks all outside content as `aria-hidden` anyway.
|
|
3777
|
+
*/
|
|
3778
|
+
ariaModal = false;
|
|
3779
|
+
/**
|
|
3780
|
+
* Whether the drawer should close when the user goes backwards/forwards in history.
|
|
3781
|
+
* Note that this usually doesn't include clicking on links (unless the user is using
|
|
3782
|
+
* the `HashLocationStrategy`).
|
|
3783
|
+
*/
|
|
3784
|
+
closeOnNavigation = true;
|
|
3785
|
+
/**
|
|
3786
|
+
* Where the drawer should focus on open.
|
|
3787
|
+
* @breaking-change 14.0.0 Remove boolean option from autoFocus. Use string or
|
|
3788
|
+
* AutoFocusTarget instead.
|
|
3789
|
+
*/
|
|
3790
|
+
autoFocus = 'first-tabbable';
|
|
3791
|
+
/**
|
|
3792
|
+
* Whether the drawer should restore focus to the
|
|
3793
|
+
* previously-focused element, after it's closed.
|
|
3794
|
+
*/
|
|
3795
|
+
restoreFocus = true;
|
|
3796
|
+
/** Scroll strategy to be used for the drawer. */
|
|
3797
|
+
scrollStrategy;
|
|
3798
|
+
/** Position of the drawer. */
|
|
3799
|
+
position = 'right';
|
|
3800
|
+
/** Width of the drawer. */
|
|
3801
|
+
width;
|
|
3802
|
+
/** Height of the drawer. */
|
|
3803
|
+
height;
|
|
3804
|
+
/** Whether the drawer should take the full screen. */
|
|
3805
|
+
fullScreen = false;
|
|
3806
|
+
/** Min-width of the drawer. If a number is provided, assumes pixel units. */
|
|
3807
|
+
minWidth;
|
|
3808
|
+
/** Min-height of the drawer. If a number is provided, assumes pixel units. */
|
|
3809
|
+
minHeight;
|
|
3810
|
+
/** Max-width of the drawer. If a number is provided, assumes pixel units. */
|
|
3811
|
+
maxWidth;
|
|
3812
|
+
/** Max-height of the drawer. If a number is provided, assumes pixel units. */
|
|
3813
|
+
maxHeight;
|
|
3814
|
+
}
|
|
3815
|
+
|
|
3816
|
+
const ENTER_ANIMATION$1 = '_acp-drawer-enter';
|
|
3817
|
+
const EXIT_ANIMATION$1 = '_acp-drawer-exit';
|
|
3818
|
+
/**
|
|
3819
|
+
* Internal component that wraps user-provided drawer content.
|
|
3820
|
+
*
|
|
3821
|
+
* This component handles the drawer's animations, positioning, and lifecycle.
|
|
3822
|
+
* It extends the CDK's DialogContainer to provide drawer-specific behavior
|
|
3823
|
+
* including slide-in/slide-out animations and proper focus management.
|
|
3824
|
+
*
|
|
3825
|
+
* @docs-private
|
|
3826
|
+
*/
|
|
3827
|
+
class AcpDrawerContainer extends CdkDialogContainer {
|
|
3828
|
+
/** Whether animations are disabled in the current environment. */
|
|
3829
|
+
_animationsDisabled = inject(ANIMATION_MODULE_TYPE, { optional: true }) === 'NoopAnimations';
|
|
3830
|
+
/** The state of the drawer animations. */
|
|
3831
|
+
_animationState = 'void';
|
|
3832
|
+
/** Emits whenever the state of the animation changes. */
|
|
3833
|
+
_animationStateChanged = new EventEmitter();
|
|
3834
|
+
/** Whether the component has been destroyed. */
|
|
3835
|
+
_destroyed = false;
|
|
3836
|
+
/**
|
|
3837
|
+
* Gets the CSS class for the drawer position.
|
|
3838
|
+
* @returns CSS class name based on the drawer's position
|
|
3839
|
+
*/
|
|
3840
|
+
get _drawerPosition() {
|
|
3841
|
+
return `acp-drawer-${this._config.position}`;
|
|
3842
|
+
}
|
|
3843
|
+
/**
|
|
3844
|
+
* Called when content is attached to the container.
|
|
3845
|
+
* Initializes the dialog container and starts the entrance animation.
|
|
3846
|
+
*/
|
|
3847
|
+
_contentAttached() {
|
|
3848
|
+
// Delegate to the original dialog-container initialization (i.e. saving the
|
|
3849
|
+
// previous element, setting up the focus trap and moving focus to the container).
|
|
3850
|
+
super._contentAttached();
|
|
3851
|
+
this.enter();
|
|
3852
|
+
}
|
|
3853
|
+
/**
|
|
3854
|
+
* Begin animation of drawer entrance into view.
|
|
3855
|
+
* Sets the animation state to visible and triggers change detection.
|
|
3856
|
+
*/
|
|
3857
|
+
enter() {
|
|
3858
|
+
if (!this._destroyed) {
|
|
3859
|
+
this._animationState = 'visible';
|
|
3860
|
+
this._changeDetectorRef.markForCheck();
|
|
3861
|
+
this._changeDetectorRef.detectChanges();
|
|
3862
|
+
if (this._animationsDisabled) {
|
|
3863
|
+
this._simulateAnimation(ENTER_ANIMATION$1);
|
|
3864
|
+
}
|
|
3865
|
+
}
|
|
3866
|
+
}
|
|
3867
|
+
/**
|
|
3868
|
+
* Begin animation of the drawer exiting from view.
|
|
3869
|
+
* Sets the animation state to hidden and triggers the exit animation.
|
|
3870
|
+
*/
|
|
3871
|
+
exit() {
|
|
3872
|
+
if (!this._destroyed) {
|
|
3873
|
+
this._animationState = 'hidden';
|
|
3874
|
+
this._changeDetectorRef.markForCheck();
|
|
3875
|
+
if (this._animationsDisabled) {
|
|
3876
|
+
this._simulateAnimation(EXIT_ANIMATION$1);
|
|
3877
|
+
}
|
|
3878
|
+
}
|
|
3879
|
+
}
|
|
3880
|
+
/**
|
|
3881
|
+
* Lifecycle hook called when the component is destroyed.
|
|
3882
|
+
* Marks the component as destroyed and calls the parent's ngOnDestroy.
|
|
3883
|
+
*/
|
|
3884
|
+
ngOnDestroy() {
|
|
3885
|
+
super.ngOnDestroy();
|
|
3886
|
+
this._destroyed = true;
|
|
3887
|
+
}
|
|
3888
|
+
/**
|
|
3889
|
+
* Simulates animation events when animations are disabled.
|
|
3890
|
+
* @param name The animation name to simulate
|
|
3891
|
+
*/
|
|
3892
|
+
_simulateAnimation(name) {
|
|
3893
|
+
this._ngZone.run(() => {
|
|
3894
|
+
this._handleAnimationEvent(true, name);
|
|
3895
|
+
setTimeout(() => this._handleAnimationEvent(false, name));
|
|
3896
|
+
});
|
|
3897
|
+
}
|
|
3898
|
+
/**
|
|
3899
|
+
* Handles animation events for both start and end phases.
|
|
3900
|
+
* @param isStart Whether this is the start or end of the animation
|
|
3901
|
+
* @param animationName The name of the animation
|
|
3902
|
+
*/
|
|
3903
|
+
_handleAnimationEvent(isStart, animationName) {
|
|
3904
|
+
const isEnter = animationName === ENTER_ANIMATION$1;
|
|
3905
|
+
const isExit = animationName === EXIT_ANIMATION$1;
|
|
3906
|
+
if (isEnter) {
|
|
3907
|
+
this._trapFocus();
|
|
3908
|
+
}
|
|
3909
|
+
if (isEnter || isExit) {
|
|
3910
|
+
this._animationStateChanged.emit({
|
|
3911
|
+
toState: isEnter ? 'visible' : 'hidden',
|
|
3912
|
+
phase: isStart ? 'start' : 'done',
|
|
3913
|
+
});
|
|
3914
|
+
}
|
|
3915
|
+
}
|
|
3916
|
+
/**
|
|
3917
|
+
* Override to prevent automatic focus capture.
|
|
3918
|
+
* Focus is handled by the enter animation instead.
|
|
3919
|
+
*/
|
|
3920
|
+
_captureInitialFocus() {
|
|
3921
|
+
// Intentionally empty - focus is handled by the enter animation
|
|
3922
|
+
}
|
|
3923
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcpDrawerContainer, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3924
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: AcpDrawerContainer, isStandalone: true, selector: "acp-drawer-container", host: { attributes: { "tabindex": "-1" }, listeners: { "animationstart": "_handleAnimationEvent(true, $event.animationName)", "animationend": "_handleAnimationEvent(false, $event.animationName)", "animationcancel": "_handleAnimationEvent(false, $event.animationName)" }, properties: { "class": "_drawerPosition", "class.acp-drawer-container-animations-enabled": "!_animationsDisabled", "class.acp-drawer-container-enter": "_animationState === \"visible\"", "class.acp-drawer-container-exit": "_animationState === \"hidden\"", "class.acp-drawer-fullscreen": "_config.fullScreen", "id": "_config.id", "attr.role": "_config.role", "attr.aria-modal": "_config.ariaModal", "attr.aria-label": "_config.ariaLabel" }, classAttribute: "acp-drawer-container" }, usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\n", styles: ["@keyframes _acp-drawer-enter{0%{box-shadow:none;visibility:hidden}to{transform:none;visibility:visible}}@keyframes _acp-drawer-exit{0%{transform:none;visibility:visible}to{box-shadow:none;visibility:hidden}}.acp-drawer-container{display:block;width:100%;padding:8px 16px;overflow:auto;outline:0;box-sizing:border-box;position:relative;background-color:var(--mat-sys-surface-container-low, #f7f2fa);color:var(--mat-sys-on-surface, #1d1b20);box-shadow:var(--mat-sys-elevation-level2, 0px 2px 4px rgba(0, 0, 0, .14))}@media(forced-colors:active){.acp-drawer-container{outline:1px solid}}.acp-drawer-container.acp-drawer-fullscreen{width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;border-radius:0!important}.acp-drawer-container.acp-drawer-fullscreen.acp-drawer-top,.acp-drawer-container.acp-drawer-fullscreen.acp-drawer-right,.acp-drawer-container.acp-drawer-fullscreen.acp-drawer-bottom,.acp-drawer-container.acp-drawer-fullscreen.acp-drawer-left{border-radius:0!important}.acp-drawer-container-animations-enabled.acp-drawer-container-enter{animation:_acp-drawer-enter .15s cubic-bezier(0,0,.2,1) forwards}.acp-drawer-container-animations-enabled.acp-drawer-container-exit{animation:_acp-drawer-exit .4s cubic-bezier(.25,.8,.25,1) backwards}.acp-drawer-container-animations-enabled.acp-drawer-right{transform:translate(100%)}.acp-drawer-container-animations-enabled.acp-drawer-left{transform:translate(-100%)}.acp-drawer-container-animations-enabled.acp-drawer-bottom{transform:translateY(100%)}.acp-drawer-container-animations-enabled.acp-drawer-top{transform:translateY(-100%)}.acp-drawer-right{border-top-left-radius:var(--mat-sys-corner-large, 16px);border-bottom-left-radius:var(--mat-sys-corner-large, 16px)}.acp-drawer-left{border-top-right-radius:var(--mat-sys-corner-large, 16px);border-bottom-right-radius:var(--mat-sys-corner-large, 16px)}.acp-drawer-bottom{border-top-left-radius:var(--mat-sys-corner-large, 16px);border-top-right-radius:var(--mat-sys-corner-large, 16px)}.acp-drawer-top{border-bottom-left-radius:var(--mat-sys-corner-large, 16px);border-bottom-right-radius:var(--mat-sys-corner-large, 16px)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
|
|
3925
|
+
}
|
|
3926
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcpDrawerContainer, decorators: [{
|
|
3927
|
+
type: Component,
|
|
3928
|
+
args: [{ selector: 'acp-drawer-container', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, host: {
|
|
3929
|
+
class: 'acp-drawer-container',
|
|
3930
|
+
'[class]': '_drawerPosition',
|
|
3931
|
+
'[class.acp-drawer-container-animations-enabled]': '!_animationsDisabled',
|
|
3932
|
+
'[class.acp-drawer-container-enter]': '_animationState === "visible"',
|
|
3933
|
+
'[class.acp-drawer-container-exit]': '_animationState === "hidden"',
|
|
3934
|
+
'[class.acp-drawer-fullscreen]': '_config.fullScreen',
|
|
3935
|
+
tabindex: '-1',
|
|
3936
|
+
'[id]': '_config.id',
|
|
3937
|
+
'[attr.role]': '_config.role',
|
|
3938
|
+
'[attr.aria-modal]': '_config.ariaModal',
|
|
3939
|
+
'[attr.aria-label]': '_config.ariaLabel',
|
|
3940
|
+
'(animationstart)': '_handleAnimationEvent(true, $event.animationName)',
|
|
3941
|
+
'(animationend)': '_handleAnimationEvent(false, $event.animationName)',
|
|
3942
|
+
'(animationcancel)': '_handleAnimationEvent(false, $event.animationName)',
|
|
3943
|
+
}, imports: [CdkPortalOutlet], template: "<ng-template cdkPortalOutlet></ng-template>\n", styles: ["@keyframes _acp-drawer-enter{0%{box-shadow:none;visibility:hidden}to{transform:none;visibility:visible}}@keyframes _acp-drawer-exit{0%{transform:none;visibility:visible}to{box-shadow:none;visibility:hidden}}.acp-drawer-container{display:block;width:100%;padding:8px 16px;overflow:auto;outline:0;box-sizing:border-box;position:relative;background-color:var(--mat-sys-surface-container-low, #f7f2fa);color:var(--mat-sys-on-surface, #1d1b20);box-shadow:var(--mat-sys-elevation-level2, 0px 2px 4px rgba(0, 0, 0, .14))}@media(forced-colors:active){.acp-drawer-container{outline:1px solid}}.acp-drawer-container.acp-drawer-fullscreen{width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;border-radius:0!important}.acp-drawer-container.acp-drawer-fullscreen.acp-drawer-top,.acp-drawer-container.acp-drawer-fullscreen.acp-drawer-right,.acp-drawer-container.acp-drawer-fullscreen.acp-drawer-bottom,.acp-drawer-container.acp-drawer-fullscreen.acp-drawer-left{border-radius:0!important}.acp-drawer-container-animations-enabled.acp-drawer-container-enter{animation:_acp-drawer-enter .15s cubic-bezier(0,0,.2,1) forwards}.acp-drawer-container-animations-enabled.acp-drawer-container-exit{animation:_acp-drawer-exit .4s cubic-bezier(.25,.8,.25,1) backwards}.acp-drawer-container-animations-enabled.acp-drawer-right{transform:translate(100%)}.acp-drawer-container-animations-enabled.acp-drawer-left{transform:translate(-100%)}.acp-drawer-container-animations-enabled.acp-drawer-bottom{transform:translateY(100%)}.acp-drawer-container-animations-enabled.acp-drawer-top{transform:translateY(-100%)}.acp-drawer-right{border-top-left-radius:var(--mat-sys-corner-large, 16px);border-bottom-left-radius:var(--mat-sys-corner-large, 16px)}.acp-drawer-left{border-top-right-radius:var(--mat-sys-corner-large, 16px);border-bottom-right-radius:var(--mat-sys-corner-large, 16px)}.acp-drawer-bottom{border-top-left-radius:var(--mat-sys-corner-large, 16px);border-top-right-radius:var(--mat-sys-corner-large, 16px)}.acp-drawer-top{border-bottom-left-radius:var(--mat-sys-corner-large, 16px);border-bottom-right-radius:var(--mat-sys-corner-large, 16px)}\n"] }]
|
|
3944
|
+
}] });
|
|
3945
|
+
|
|
3946
|
+
/**
|
|
3947
|
+
* Reference to a drawer dispatched from the drawer service.
|
|
3948
|
+
*
|
|
3949
|
+
* This class provides methods and properties to interact with an open drawer,
|
|
3950
|
+
* including dismissing it, accessing its component instance, and subscribing
|
|
3951
|
+
* to lifecycle events like opening and closing.
|
|
3952
|
+
*
|
|
3953
|
+
* @template T The type of the component opened in the drawer
|
|
3954
|
+
* @template R The type of the result returned when the drawer is dismissed
|
|
3955
|
+
*
|
|
3956
|
+
* @example
|
|
3957
|
+
* ```typescript
|
|
3958
|
+
* const drawerRef = this.drawer.open(MyComponent);
|
|
3959
|
+
*
|
|
3960
|
+
* // Access component instance
|
|
3961
|
+
* drawerRef.instance.someProperty = 'value';
|
|
3962
|
+
*
|
|
3963
|
+
* // Listen for dismissal
|
|
3964
|
+
* drawerRef.afterDismissed().subscribe(result => {
|
|
3965
|
+
* console.log('Drawer dismissed with:', result);
|
|
3966
|
+
* });
|
|
3967
|
+
*
|
|
3968
|
+
* // Dismiss programmatically
|
|
3969
|
+
* drawerRef.dismiss('some result');
|
|
3970
|
+
* ```
|
|
3971
|
+
*/
|
|
3972
|
+
class AcpDrawerRef {
|
|
3973
|
+
_ref;
|
|
3974
|
+
/** Instance of the component making up the content of the drawer. */
|
|
3975
|
+
get instance() {
|
|
3976
|
+
return this._ref.componentInstance;
|
|
3977
|
+
}
|
|
3978
|
+
/**
|
|
3979
|
+
* `ComponentRef` of the component opened into the drawer. Will be
|
|
3980
|
+
* null when the drawer is opened using a `TemplateRef`.
|
|
3981
|
+
*/
|
|
3982
|
+
get componentRef() {
|
|
3983
|
+
return this._ref.componentRef;
|
|
3984
|
+
}
|
|
3985
|
+
/**
|
|
3986
|
+
* Instance of the component into which the drawer content is projected.
|
|
3987
|
+
* @docs-private
|
|
3988
|
+
*/
|
|
3989
|
+
containerInstance;
|
|
3990
|
+
/** Whether the user is allowed to close the drawer. */
|
|
3991
|
+
disableClose;
|
|
3992
|
+
/** Unique ID for the drawer. */
|
|
3993
|
+
id;
|
|
3994
|
+
/** Subject for notifying the user that the drawer has been dismissed. */
|
|
3995
|
+
_afterDismissed = new Subject();
|
|
3996
|
+
/** Subject for notifying the user that the drawer has opened and appeared. */
|
|
3997
|
+
_afterOpened = new Subject();
|
|
3998
|
+
/** Result to be passed down to the `afterDismissed` stream. */
|
|
3999
|
+
_result;
|
|
4000
|
+
/** Handle to the timeout that's running as a fallback in case the exit animation doesn't fire. */
|
|
4001
|
+
_closeFallbackTimeout;
|
|
4002
|
+
/**
|
|
4003
|
+
* Creates a new drawer reference.
|
|
4004
|
+
* @param _ref The underlying CDK dialog reference
|
|
4005
|
+
* @param config Configuration options for the drawer
|
|
4006
|
+
* @param containerInstance The drawer container instance
|
|
4007
|
+
*/
|
|
4008
|
+
constructor(_ref, config, containerInstance) {
|
|
4009
|
+
this._ref = _ref;
|
|
4010
|
+
this.containerInstance = containerInstance;
|
|
4011
|
+
this.disableClose = config.disableClose;
|
|
4012
|
+
this.id = _ref.id;
|
|
4013
|
+
// Emit when opening animation completes
|
|
4014
|
+
containerInstance._animationStateChanged
|
|
4015
|
+
.pipe(filter(event => event.phase === 'done' && event.toState === 'visible'), take(1))
|
|
4016
|
+
.subscribe(() => {
|
|
4017
|
+
this._afterOpened.next();
|
|
4018
|
+
this._afterOpened.complete();
|
|
4019
|
+
});
|
|
4020
|
+
// Dispose overlay when closing animation is complete
|
|
4021
|
+
containerInstance._animationStateChanged
|
|
4022
|
+
.pipe(filter(event => event.phase === 'done' && event.toState === 'hidden'), take(1))
|
|
4023
|
+
.subscribe(() => {
|
|
4024
|
+
clearTimeout(this._closeFallbackTimeout);
|
|
4025
|
+
this._ref.close(this._result);
|
|
4026
|
+
});
|
|
4027
|
+
_ref.overlayRef.detachments().subscribe(() => {
|
|
4028
|
+
this._ref.close(this._result);
|
|
4029
|
+
});
|
|
4030
|
+
merge(this.backdropClick(), this.keydownEvents().pipe(filter(event => event.keyCode === ESCAPE))).subscribe(event => {
|
|
4031
|
+
if (!this.disableClose &&
|
|
4032
|
+
(event.type !== 'keydown' || !hasModifierKey(event))) {
|
|
4033
|
+
event.preventDefault();
|
|
4034
|
+
this.dismiss();
|
|
4035
|
+
}
|
|
4036
|
+
});
|
|
4037
|
+
}
|
|
4038
|
+
/**
|
|
4039
|
+
* Dismisses the drawer.
|
|
4040
|
+
* @param result Data to be passed back to the drawer opener.
|
|
4041
|
+
*/
|
|
4042
|
+
dismiss(result) {
|
|
4043
|
+
if (this.containerInstance && !this._afterDismissed.closed) {
|
|
4044
|
+
// Transition the backdrop in parallel to the drawer.
|
|
4045
|
+
this.containerInstance._animationStateChanged
|
|
4046
|
+
.pipe(filter(event => event.phase === 'start'), take(1))
|
|
4047
|
+
.subscribe(_event => {
|
|
4048
|
+
// The logic that disposes of the overlay depends on the exit animation completing, however
|
|
4049
|
+
// it isn't guaranteed if the parent view is destroyed while it's running. Add a fallback
|
|
4050
|
+
// timeout which will clean everything up if the animation hasn't fired within the specified
|
|
4051
|
+
// amount of time plus 100ms. We don't need to run this outside the NgZone, because for the
|
|
4052
|
+
// vast majority of cases the timeout will have been cleared before it has fired.
|
|
4053
|
+
this._closeFallbackTimeout = setTimeout(() => this._ref.close(this._result), 500);
|
|
4054
|
+
this._ref.overlayRef.detachBackdrop();
|
|
4055
|
+
});
|
|
4056
|
+
this._result = result;
|
|
4057
|
+
this.containerInstance.exit();
|
|
4058
|
+
this.containerInstance = null;
|
|
4059
|
+
}
|
|
4060
|
+
}
|
|
4061
|
+
/**
|
|
4062
|
+
* Gets an observable that is notified when the drawer is finished closing.
|
|
4063
|
+
* @returns Observable that emits the result passed to dismiss() or undefined
|
|
4064
|
+
*/
|
|
4065
|
+
afterDismissed() {
|
|
4066
|
+
return this._ref.closed;
|
|
4067
|
+
}
|
|
4068
|
+
/**
|
|
4069
|
+
* Gets an observable that is notified when the drawer has opened and appeared.
|
|
4070
|
+
* @returns Observable that emits when the drawer is fully visible
|
|
4071
|
+
*/
|
|
4072
|
+
afterOpened() {
|
|
4073
|
+
return this._afterOpened;
|
|
4074
|
+
}
|
|
4075
|
+
/**
|
|
4076
|
+
* Gets an observable that emits when the overlay's backdrop has been clicked.
|
|
4077
|
+
* @returns Observable that emits mouse events from backdrop clicks
|
|
4078
|
+
*/
|
|
4079
|
+
backdropClick() {
|
|
4080
|
+
return this._ref.backdropClick;
|
|
4081
|
+
}
|
|
4082
|
+
/**
|
|
4083
|
+
* Gets an observable that emits when keydown events are targeted on the overlay.
|
|
4084
|
+
* @returns Observable that emits keyboard events
|
|
4085
|
+
*/
|
|
4086
|
+
keydownEvents() {
|
|
4087
|
+
return this._ref.keydownEvents;
|
|
4088
|
+
}
|
|
4089
|
+
}
|
|
4090
|
+
|
|
4091
|
+
/** Injection token that can be used to access the data that was passed in to a drawer. */
|
|
4092
|
+
const ACP_DRAWER_DATA = new InjectionToken('AcpDrawerData');
|
|
4093
|
+
/** Injection token that can be used to specify default drawer options. */
|
|
4094
|
+
const ACP_DRAWER_DEFAULT_OPTIONS = new InjectionToken('acp-drawer-default-options');
|
|
4095
|
+
/** Counter for unique drawer ids. */
|
|
4096
|
+
let uniqueId = 0;
|
|
4097
|
+
/**
|
|
4098
|
+
* Service to trigger ACP drawer components.
|
|
4099
|
+
*
|
|
4100
|
+
* The AcpDrawer service provides methods to open, manage, and dismiss drawer panels
|
|
4101
|
+
* that slide in from any side of the screen. It's built on top of Angular CDK Dialog
|
|
4102
|
+
* and provides a flexible way to display additional content without navigating away
|
|
4103
|
+
* from the current page.
|
|
4104
|
+
*
|
|
4105
|
+
* @example
|
|
4106
|
+
* ```typescript
|
|
4107
|
+
* constructor(private drawer: AcpDrawer) {}
|
|
4108
|
+
*
|
|
4109
|
+
* openDrawer() {
|
|
4110
|
+
* const drawerRef = this.drawer.open(MyDrawerComponent, {
|
|
4111
|
+
* position: 'right',
|
|
4112
|
+
* width: '400px',
|
|
4113
|
+
* data: { message: 'Hello from drawer!' }
|
|
4114
|
+
* });
|
|
4115
|
+
*
|
|
4116
|
+
* drawerRef.afterDismissed().subscribe(result => {
|
|
4117
|
+
* console.log('Drawer closed with result:', result);
|
|
4118
|
+
* });
|
|
4119
|
+
* }
|
|
4120
|
+
* ```
|
|
4121
|
+
*/
|
|
4122
|
+
class AcpDrawer {
|
|
4123
|
+
_overlay = inject(Overlay);
|
|
4124
|
+
_parentDrawer = inject(AcpDrawer, { optional: true, skipSelf: true });
|
|
4125
|
+
_defaultOptions = inject(ACP_DRAWER_DEFAULT_OPTIONS, { optional: true });
|
|
4126
|
+
_openDrawersAtThisLevel = [];
|
|
4127
|
+
_afterAllDismissedAtThisLevel = new Subject();
|
|
4128
|
+
_afterOpenedAtThisLevel = new Subject();
|
|
4129
|
+
_dialog = inject(Dialog);
|
|
4130
|
+
/** Keeps track of the currently-open dialogs. */
|
|
4131
|
+
get openDrawers() {
|
|
4132
|
+
return this._parentDrawer ? this._parentDrawer.openDrawers : this._openDrawersAtThisLevel;
|
|
4133
|
+
}
|
|
4134
|
+
/** Stream that emits when a drawer has been opened. */
|
|
4135
|
+
get afterOpened() {
|
|
4136
|
+
return this._parentDrawer ? this._parentDrawer.afterOpened : this._afterOpenedAtThisLevel;
|
|
4137
|
+
}
|
|
4138
|
+
/**
|
|
4139
|
+
* Gets the subject for tracking when all drawers are dismissed.
|
|
4140
|
+
* @returns Subject that emits when all drawers at this level are closed
|
|
4141
|
+
*/
|
|
4142
|
+
_getAfterAllDismissed() {
|
|
4143
|
+
const parent = this._parentDrawer;
|
|
4144
|
+
return parent ? parent._getAfterAllDismissed() : this._afterAllDismissedAtThisLevel;
|
|
4145
|
+
}
|
|
4146
|
+
/**
|
|
4147
|
+
* Stream that emits when all open drawer have finished closing.
|
|
4148
|
+
* Will emit on subscribe if there are no open drawers to begin with.
|
|
4149
|
+
*/
|
|
4150
|
+
afterAllDismissed = defer(() => this.openDrawers.length
|
|
4151
|
+
? this._getAfterAllDismissed()
|
|
4152
|
+
: this._getAfterAllDismissed().pipe(startWith(undefined)));
|
|
4153
|
+
open(componentOrTemplateRef, config) {
|
|
4154
|
+
let drawerRef;
|
|
4155
|
+
const _config = { ...(this._defaultOptions || new AcpDrawerConfig()), ...config };
|
|
4156
|
+
_config.id = _config.id || `acp-drawer-${uniqueId++}`;
|
|
4157
|
+
if (_config.fullScreen) {
|
|
4158
|
+
_config.width = '100vw';
|
|
4159
|
+
_config.height = '100vh';
|
|
4160
|
+
}
|
|
4161
|
+
else {
|
|
4162
|
+
_config.width =
|
|
4163
|
+
_config.position === 'left' || _config.position === 'right'
|
|
4164
|
+
? coerceCssPixelValue(_config.width)
|
|
4165
|
+
: '100vw';
|
|
4166
|
+
_config.height =
|
|
4167
|
+
_config.position === 'top' || _config.position === 'bottom'
|
|
4168
|
+
? coerceCssPixelValue(_config.height)
|
|
4169
|
+
: '100vh';
|
|
4170
|
+
}
|
|
4171
|
+
this._dialog.open(componentOrTemplateRef, {
|
|
4172
|
+
..._config,
|
|
4173
|
+
// Disable closing since we need to sync it up to the animation ourselves.
|
|
4174
|
+
disableClose: true,
|
|
4175
|
+
// Disable closing on detachments so that we can sync up the animation.
|
|
4176
|
+
closeOnOverlayDetachments: false,
|
|
4177
|
+
container: {
|
|
4178
|
+
type: AcpDrawerContainer,
|
|
4179
|
+
providers: () => [
|
|
4180
|
+
// Provide our config as the CDK config as well since it has the same interface as the
|
|
4181
|
+
// CDK one, but it contains the actual values passed in by the user for things like
|
|
4182
|
+
// `disableClose` which we disable for the CDK dialog since we handle it ourselves.
|
|
4183
|
+
{ provide: AcpDrawerConfig, useValue: _config },
|
|
4184
|
+
{ provide: DialogConfig, useValue: _config },
|
|
4185
|
+
],
|
|
4186
|
+
},
|
|
4187
|
+
scrollStrategy: _config.scrollStrategy || this._overlay.scrollStrategies.block(),
|
|
4188
|
+
positionStrategy: this._overlay.position().global()[_config.position]('0'),
|
|
4189
|
+
templateContext: () => ({ drawerRef }),
|
|
4190
|
+
providers: (cdkRef, _cdkConfig, container) => {
|
|
4191
|
+
drawerRef = new AcpDrawerRef(cdkRef, _config, container);
|
|
4192
|
+
return [
|
|
4193
|
+
{ provide: AcpDrawerRef, useValue: drawerRef },
|
|
4194
|
+
{ provide: ACP_DRAWER_DATA, useValue: _config.data },
|
|
4195
|
+
];
|
|
4196
|
+
},
|
|
4197
|
+
});
|
|
4198
|
+
this.openDrawers.push(drawerRef);
|
|
4199
|
+
this.afterOpened.next(drawerRef);
|
|
4200
|
+
drawerRef.afterDismissed().subscribe(() => {
|
|
4201
|
+
const index = this.openDrawers.indexOf(drawerRef);
|
|
4202
|
+
if (index > -1) {
|
|
4203
|
+
this.openDrawers.splice(index, 1);
|
|
4204
|
+
if (!this.openDrawers.length) {
|
|
4205
|
+
this._getAfterAllDismissed().next();
|
|
4206
|
+
}
|
|
4207
|
+
}
|
|
4208
|
+
});
|
|
4209
|
+
return drawerRef;
|
|
4210
|
+
}
|
|
4211
|
+
/**
|
|
4212
|
+
* Dismisses all of the currently-open drawers.
|
|
4213
|
+
* This will close all drawers at the current level and emit the afterAllDismissed event.
|
|
4214
|
+
*/
|
|
4215
|
+
dismissAll() {
|
|
4216
|
+
this._dismissDrawers(this.openDrawers);
|
|
4217
|
+
}
|
|
4218
|
+
/**
|
|
4219
|
+
* Finds an open drawer by its id.
|
|
4220
|
+
* @param id ID to use when looking up the drawer.
|
|
4221
|
+
* @returns The drawer reference if found, undefined otherwise.
|
|
4222
|
+
*/
|
|
4223
|
+
getDrawerById(id) {
|
|
4224
|
+
return this.openDrawers.find(drawer => drawer.id === id);
|
|
4225
|
+
}
|
|
4226
|
+
/**
|
|
4227
|
+
* Lifecycle hook that is called when the service is destroyed.
|
|
4228
|
+
* Dismisses all drawers at this level and completes observables.
|
|
4229
|
+
*/
|
|
4230
|
+
ngOnDestroy() {
|
|
4231
|
+
// Only dismiss the drawers at this level on destroy
|
|
4232
|
+
// since the parent service may still be active.
|
|
4233
|
+
this._dismissDrawers(this._openDrawersAtThisLevel);
|
|
4234
|
+
this._afterAllDismissedAtThisLevel.complete();
|
|
4235
|
+
this._afterOpenedAtThisLevel.complete();
|
|
4236
|
+
}
|
|
4237
|
+
/**
|
|
4238
|
+
* Dismisses multiple drawers.
|
|
4239
|
+
* @param drawers Array of drawer references to dismiss
|
|
4240
|
+
*/
|
|
4241
|
+
_dismissDrawers(drawers) {
|
|
4242
|
+
let i = drawers.length;
|
|
4243
|
+
while (i--) {
|
|
4244
|
+
drawers[i].dismiss();
|
|
4245
|
+
}
|
|
4246
|
+
}
|
|
4247
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcpDrawer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
4248
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcpDrawer, providedIn: 'root' });
|
|
4249
|
+
}
|
|
4250
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcpDrawer, decorators: [{
|
|
4251
|
+
type: Injectable,
|
|
4252
|
+
args: [{ providedIn: 'root' }]
|
|
4253
|
+
}] });
|
|
4254
|
+
|
|
4255
|
+
/**
|
|
4256
|
+
* Injection token that can be used to reference instances of `AcpPopoverContent`. It serves
|
|
4257
|
+
* as alternative token to the actual `AcpPopoverContent` class which could cause unnecessary
|
|
4258
|
+
* retention of the class and its directive metadata.
|
|
4259
|
+
*/
|
|
4260
|
+
const ACP_POPOVER_CONTENT = new InjectionToken('AcpPopoverContent');
|
|
4261
|
+
/**
|
|
4262
|
+
* Base class for popover content that provides common functionality.
|
|
4263
|
+
*
|
|
4264
|
+
* This abstract class handles the attachment and detachment of popover content
|
|
4265
|
+
* using Angular CDK portals. It manages the DOM manipulation required to display
|
|
4266
|
+
* popover content in an overlay.
|
|
4267
|
+
*
|
|
4268
|
+
* @docs-private
|
|
4269
|
+
*/
|
|
4270
|
+
class _AcpPopoverContentBase {
|
|
4271
|
+
_template = inject((TemplateRef));
|
|
4272
|
+
_appRef = inject(ApplicationRef);
|
|
4273
|
+
_injector = inject(Injector);
|
|
4274
|
+
_viewContainerRef = inject(ViewContainerRef);
|
|
4275
|
+
_document = inject(DOCUMENT);
|
|
4276
|
+
_changeDetectorRef = inject(ChangeDetectorRef, { optional: true });
|
|
4277
|
+
_portal;
|
|
4278
|
+
_outlet;
|
|
4279
|
+
/** Emits when the popover content has been attached. */
|
|
4280
|
+
_attached = new Subject();
|
|
4281
|
+
/**
|
|
4282
|
+
* Attaches the content with a particular context.
|
|
4283
|
+
* @param context Context data to pass to the template
|
|
4284
|
+
* @docs-private
|
|
4285
|
+
*/
|
|
4286
|
+
attach(context = {}) {
|
|
4287
|
+
if (!this._portal) {
|
|
4288
|
+
this._portal = new TemplatePortal(this._template, this._viewContainerRef);
|
|
4289
|
+
}
|
|
4290
|
+
this.detach();
|
|
4291
|
+
if (!this._outlet) {
|
|
4292
|
+
this._outlet = new DomPortalOutlet(this._document.createElement('div'), this._appRef, this._injector);
|
|
4293
|
+
}
|
|
4294
|
+
const element = this._template.elementRef.nativeElement;
|
|
4295
|
+
// Because we support opening the same popover from different triggers (which in turn have their
|
|
4296
|
+
// own `OverlayRef` panel), we have to re-insert the host element every time, otherwise we
|
|
4297
|
+
// risk it staying attached to a pane that's no longer in the DOM.
|
|
4298
|
+
element.parentNode.insertBefore(this._outlet.outletElement, element);
|
|
4299
|
+
// When `AcpPopoverContent` is used in an `OnPush` component, the insertion of the popover
|
|
4300
|
+
// content via `createEmbeddedView` does not cause the content to be seen as "dirty"
|
|
4301
|
+
// by Angular. This causes the `@ContentChildren` for popover items within the popover to
|
|
4302
|
+
// not be updated by Angular. By explicitly marking for check here, we tell Angular that
|
|
4303
|
+
// it needs to check for new popover items and update the `@ContentChild` in `AcpPopover`.
|
|
4304
|
+
// @breaking-change 9.0.0 Make change detector ref required
|
|
4305
|
+
if (this._changeDetectorRef) {
|
|
4306
|
+
this._changeDetectorRef.markForCheck();
|
|
4307
|
+
}
|
|
4308
|
+
this._portal.attach(this._outlet, context);
|
|
4309
|
+
this._attached.next();
|
|
4310
|
+
}
|
|
4311
|
+
/**
|
|
4312
|
+
* Detaches the content from the DOM.
|
|
4313
|
+
* @docs-private
|
|
4314
|
+
*/
|
|
4315
|
+
detach() {
|
|
4316
|
+
if (this._portal.isAttached) {
|
|
4317
|
+
this._portal.detach();
|
|
4318
|
+
}
|
|
4319
|
+
}
|
|
4320
|
+
/**
|
|
4321
|
+
* Lifecycle hook called when the component is destroyed.
|
|
4322
|
+
* Cleans up the portal outlet to prevent memory leaks.
|
|
4323
|
+
*/
|
|
4324
|
+
ngOnDestroy() {
|
|
4325
|
+
if (this._outlet) {
|
|
4326
|
+
this._outlet.dispose();
|
|
4327
|
+
}
|
|
4328
|
+
}
|
|
4329
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: _AcpPopoverContentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
4330
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: _AcpPopoverContentBase, isStandalone: true, ngImport: i0 });
|
|
4331
|
+
}
|
|
4332
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: _AcpPopoverContentBase, decorators: [{
|
|
4333
|
+
type: Directive
|
|
4334
|
+
}] });
|
|
4335
|
+
/**
|
|
4336
|
+
* Popover content that will be rendered lazily once the popover is opened.
|
|
4337
|
+
*
|
|
4338
|
+
* This directive allows you to define content that should be rendered inside
|
|
4339
|
+
* a popover panel. The content is only created when the popover is actually
|
|
4340
|
+
* opened, which can improve performance for complex content.
|
|
4341
|
+
*
|
|
4342
|
+
* @example
|
|
4343
|
+
* ```html
|
|
4344
|
+
* <ng-template acpPopoverContent>
|
|
4345
|
+
* <div>This content will be shown in the popover</div>
|
|
4346
|
+
* </ng-template>
|
|
4347
|
+
* ```
|
|
4348
|
+
*/
|
|
4349
|
+
class AcpPopoverContent extends _AcpPopoverContentBase {
|
|
4350
|
+
constructor() {
|
|
4351
|
+
super();
|
|
4352
|
+
}
|
|
4353
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcpPopoverContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
4354
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: AcpPopoverContent, isStandalone: true, selector: "ng-template[acpPopoverContent]", providers: [{ provide: ACP_POPOVER_CONTENT, useExisting: AcpPopoverContent }], usesInheritance: true, ngImport: i0 });
|
|
4355
|
+
}
|
|
4356
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcpPopoverContent, decorators: [{
|
|
4357
|
+
type: Directive,
|
|
4358
|
+
args: [{
|
|
4359
|
+
selector: 'ng-template[acpPopoverContent]',
|
|
4360
|
+
standalone: true,
|
|
4361
|
+
providers: [{ provide: ACP_POPOVER_CONTENT, useExisting: AcpPopoverContent }],
|
|
4362
|
+
}]
|
|
4363
|
+
}], ctorParameters: () => [] });
|
|
4364
|
+
|
|
4365
|
+
/**
|
|
4366
|
+
* Throws an exception for the case when popover trigger doesn't have a valid acp-popover instance
|
|
4367
|
+
*/
|
|
4368
|
+
function throwAcpPopoverMissingError() {
|
|
4369
|
+
throw Error(`acp-popover-trigger: must pass in an acp-popover instance.
|
|
4370
|
+
|
|
4371
|
+
Example:
|
|
4372
|
+
<acp-popover #popover="acpPopover"></acp-popover>
|
|
4373
|
+
<button [acpPopoverTriggerFor]="popover"></button>`);
|
|
4374
|
+
}
|
|
4375
|
+
/**
|
|
4376
|
+
* Throws an exception for the case when popover's acpPopoverPosition[0] value isn't valid.
|
|
4377
|
+
* In other words, it doesn't match 'above', 'below', 'before' or 'after'.
|
|
4378
|
+
*/
|
|
4379
|
+
function throwAcpPopoverInvalidPositionStart() {
|
|
4380
|
+
throw Error(`acpPopoverPosition[0] value must be either 'above', 'below', 'before' or 'after'.
|
|
4381
|
+
Example: <acp-popover [position]="['below', 'after']" #popover="acpPopover"></acp-popover>`);
|
|
4382
|
+
}
|
|
4383
|
+
/**
|
|
4384
|
+
* Throws an exception for the case when popover's acpPopoverPosition[1] value isn't valid.
|
|
4385
|
+
* In other words, it doesn't match 'above', 'below', 'before', 'after' or 'center'.
|
|
4386
|
+
*/
|
|
4387
|
+
function throwAcpPopoverInvalidPositionEnd() {
|
|
4388
|
+
throw Error(`acpPopoverPosition[1] value must be either 'above', 'below', 'before', 'after' or 'center'.
|
|
4389
|
+
Example: <acp-popover [position]="['below', 'after']" #popover="acpPopover"></acp-popover>`);
|
|
4390
|
+
}
|
|
4391
|
+
|
|
4392
|
+
/** Injection token to be used to override the default options for `acp-popover`. */
|
|
4393
|
+
const ACP_POPOVER_DEFAULT_OPTIONS = new InjectionToken('acp-popover-default-options', {
|
|
4394
|
+
providedIn: 'root',
|
|
4395
|
+
factory: () => ({
|
|
4396
|
+
backdropClass: 'cdk-overlay-transparent-backdrop',
|
|
4397
|
+
}),
|
|
4398
|
+
});
|
|
4399
|
+
let popoverPanelUid = 0;
|
|
4400
|
+
/** Name of the enter animation `@keyframes`. */
|
|
4401
|
+
const ENTER_ANIMATION = '_acp-popover-enter';
|
|
4402
|
+
/** Name of the exit animation `@keyframes`. */
|
|
4403
|
+
const EXIT_ANIMATION = '_acp-popover-exit';
|
|
4404
|
+
/**
|
|
4405
|
+
* ACP Popover component that displays content in an overlay panel.
|
|
4406
|
+
*
|
|
4407
|
+
* The popover can be triggered by hover or click events and supports
|
|
4408
|
+
* various positioning options. It's built on top of Angular CDK Overlay
|
|
4409
|
+
* and provides a flexible way to display contextual information.
|
|
4410
|
+
*
|
|
4411
|
+
* @example
|
|
4412
|
+
* ```html
|
|
4413
|
+
* <acp-popover #popover="acpPopover" [position]="['below', 'after']">
|
|
4414
|
+
* <div>Popover content goes here</div>
|
|
4415
|
+
* </acp-popover>
|
|
4416
|
+
*
|
|
4417
|
+
* <button [acpPopoverTriggerFor]="popover">Show popover</button>
|
|
4418
|
+
* ```
|
|
4419
|
+
*/
|
|
4420
|
+
class AcpPopover {
|
|
4421
|
+
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
4422
|
+
_elementRef = inject(ElementRef);
|
|
4423
|
+
_unusedNgZone = inject(NgZone);
|
|
4424
|
+
_defaultOptions = inject(ACP_POPOVER_DEFAULT_OPTIONS);
|
|
4425
|
+
_previousElevation;
|
|
4426
|
+
_elevationPrefix = 'mat-elevation-z';
|
|
4427
|
+
_baseElevation = null;
|
|
4428
|
+
_exitFallbackTimeout;
|
|
4429
|
+
_mouseleaveTimer;
|
|
4430
|
+
/** Whether animations are currently disabled. */
|
|
4431
|
+
_animationsDisabled = _animationsDisabled();
|
|
4432
|
+
/** Config object to be passed into the popover's class. */
|
|
4433
|
+
_classList = {};
|
|
4434
|
+
/** Current state of the panel animation. */
|
|
4435
|
+
_panelAnimationState = 'void';
|
|
4436
|
+
/** Emits whenever an animation on the popover completes. */
|
|
4437
|
+
_animationDone = new Subject();
|
|
4438
|
+
/** Whether the popover is animating. */
|
|
4439
|
+
_isAnimating = false;
|
|
4440
|
+
/** Closing disabled on popover */
|
|
4441
|
+
closeDisabled = false;
|
|
4442
|
+
/** Config object to be passed into the popover's arrow style */
|
|
4443
|
+
arrowStyles;
|
|
4444
|
+
/** Layout direction of the popover. */
|
|
4445
|
+
direction;
|
|
4446
|
+
/** Class or list of classes to be added to the overlay panel. */
|
|
4447
|
+
overlayPanelClass = this._defaultOptions.overlayPanelClass || '';
|
|
4448
|
+
/** Class to be added to the backdrop element. */
|
|
4449
|
+
backdropClass = this._defaultOptions.backdropClass;
|
|
4450
|
+
/** aria-label for the popover panel. */
|
|
4451
|
+
ariaLabel;
|
|
4452
|
+
/** aria-labelledby for the popover panel. */
|
|
4453
|
+
ariaLabelledby;
|
|
4454
|
+
/** aria-describedby for the popover panel. */
|
|
4455
|
+
ariaDescribedby;
|
|
4456
|
+
/** Popover's trigger event. */
|
|
4457
|
+
triggerEvent = this._defaultOptions.triggerEvent ?? 'hover';
|
|
4458
|
+
/** Popover's enter delay. */
|
|
4459
|
+
enterDelay = this._defaultOptions.enterDelay ?? 100;
|
|
4460
|
+
/** Popover's leave delay. */
|
|
4461
|
+
leaveDelay = this._defaultOptions.leaveDelay ?? 100;
|
|
4462
|
+
/** Popover's position. */
|
|
4463
|
+
get position() {
|
|
4464
|
+
return this._position;
|
|
4465
|
+
}
|
|
4466
|
+
set position(value) {
|
|
4467
|
+
if (!['before', 'after', 'above', 'below'].includes(value[0])) {
|
|
4468
|
+
throwAcpPopoverInvalidPositionStart();
|
|
4469
|
+
}
|
|
4470
|
+
if (!['before', 'after', 'above', 'below', 'center'].includes(value[1])) {
|
|
4471
|
+
throwAcpPopoverInvalidPositionEnd();
|
|
4472
|
+
}
|
|
4473
|
+
this._position = value;
|
|
4474
|
+
this.setPositionClasses();
|
|
4475
|
+
}
|
|
4476
|
+
_position = this._defaultOptions.position ?? ['below', 'after'];
|
|
4477
|
+
/** Popover-panel's X offset. */
|
|
4478
|
+
xOffset = this._defaultOptions.xOffset ?? 0;
|
|
4479
|
+
/** Popover-panel's Y offset. */
|
|
4480
|
+
yOffset = this._defaultOptions.yOffset ?? 0;
|
|
4481
|
+
/** Popover-arrow's width. */
|
|
4482
|
+
arrowWidth = this._defaultOptions.arrowWidth ?? 16;
|
|
4483
|
+
/** Popover-arrow's height. */
|
|
4484
|
+
arrowHeight = this._defaultOptions.arrowHeight ?? 16;
|
|
4485
|
+
/** Popover-arrow's X offset. */
|
|
4486
|
+
arrowOffsetX = this._defaultOptions.arrowOffsetX ?? 20;
|
|
4487
|
+
/** Popover-arrow's Y offset. */
|
|
4488
|
+
arrowOffsetY = this._defaultOptions.arrowOffsetY ?? 20;
|
|
4489
|
+
/** Whether the popover arrow should be hidden. */
|
|
4490
|
+
hideArrow = this._defaultOptions.hideArrow ?? false;
|
|
4491
|
+
/** Whether popover can be closed when click the popover-panel. */
|
|
4492
|
+
closeOnPanelClick = this._defaultOptions.closeOnPanelClick ?? false;
|
|
4493
|
+
/** Whether popover can be closed when click the backdrop. */
|
|
4494
|
+
closeOnBackdropClick = this._defaultOptions.closeOnBackdropClick ?? true;
|
|
4495
|
+
/** Whether enable focus trap using `cdkTrapFocus`. */
|
|
4496
|
+
focusTrapEnabled = this._defaultOptions.focusTrapEnabled ?? false;
|
|
4497
|
+
/** Whether enable focus trap auto capture using `cdkTrapFocusAutoCapture`. */
|
|
4498
|
+
focusTrapAutoCaptureEnabled = this._defaultOptions.focusTrapAutoCaptureEnabled ?? false;
|
|
4499
|
+
/** Whether the popover has a backdrop. It will always be false if the trigger event is hover. */
|
|
4500
|
+
hasBackdrop = this._defaultOptions.hasBackdrop;
|
|
4501
|
+
/**
|
|
4502
|
+
* This method takes classes set on the host acp-popover element and applies them on the
|
|
4503
|
+
* popover template that displays in the overlay container. Otherwise, it's difficult
|
|
4504
|
+
* to style the containing popover from outside the component.
|
|
4505
|
+
* @param classes list of class names
|
|
4506
|
+
*/
|
|
4507
|
+
set panelClass(classes) {
|
|
4508
|
+
const previousPanelClass = this._previousPanelClass;
|
|
4509
|
+
const newClassList = { ...this._classList };
|
|
4510
|
+
if (previousPanelClass && previousPanelClass.length) {
|
|
4511
|
+
previousPanelClass.split(' ').forEach((className) => {
|
|
4512
|
+
newClassList[className] = false;
|
|
4513
|
+
});
|
|
4514
|
+
}
|
|
4515
|
+
this._previousPanelClass = classes;
|
|
4516
|
+
if (classes && classes.length) {
|
|
4517
|
+
classes.split(' ').forEach((className) => {
|
|
4518
|
+
newClassList[className] = true;
|
|
4519
|
+
});
|
|
4520
|
+
this._elementRef.nativeElement.className = '';
|
|
4521
|
+
this.setPositionClasses();
|
|
4522
|
+
}
|
|
4523
|
+
this._classList = newClassList;
|
|
4524
|
+
}
|
|
4525
|
+
_previousPanelClass;
|
|
4526
|
+
/**
|
|
4527
|
+
* This method takes classes set on the host acp-popover element and applies them on the
|
|
4528
|
+
* popover template that displays in the overlay container. Otherwise, it's difficult
|
|
4529
|
+
* to style the containing popover from outside the component.
|
|
4530
|
+
* @deprecated Use `panelClass` instead.
|
|
4531
|
+
* @breaking-change 8.0.0
|
|
4532
|
+
*/
|
|
4533
|
+
get classList() {
|
|
4534
|
+
return this.panelClass;
|
|
4535
|
+
}
|
|
4536
|
+
set classList(classes) {
|
|
4537
|
+
this.panelClass = classes;
|
|
4538
|
+
}
|
|
4539
|
+
/** Event emitted when the popover is closed. */
|
|
4540
|
+
closed = new EventEmitter();
|
|
4541
|
+
/** @docs-private */
|
|
4542
|
+
templateRef;
|
|
4543
|
+
/**
|
|
4544
|
+
* Popover content that will be rendered lazily.
|
|
4545
|
+
* @docs-private
|
|
4546
|
+
*/
|
|
4547
|
+
lazyContent;
|
|
4548
|
+
panelId = `acp-popover-panel-${popoverPanelUid++}`;
|
|
4549
|
+
/**
|
|
4550
|
+
* Lifecycle hook called when the component is initialized.
|
|
4551
|
+
* Sets up the initial position classes for the popover.
|
|
4552
|
+
*/
|
|
4553
|
+
ngOnInit() {
|
|
4554
|
+
this.setPositionClasses();
|
|
4555
|
+
}
|
|
4556
|
+
/**
|
|
4557
|
+
* Lifecycle hook called when the component is destroyed.
|
|
4558
|
+
* Cleans up subscriptions and timers.
|
|
4559
|
+
*/
|
|
4560
|
+
ngOnDestroy() {
|
|
4561
|
+
this.closed.complete();
|
|
4562
|
+
clearTimeout(this._exitFallbackTimeout);
|
|
4563
|
+
clearTimeout(this._mouseleaveTimer);
|
|
4564
|
+
}
|
|
4565
|
+
/**
|
|
4566
|
+
* Handle a keyboard event from the popover, delegating to the appropriate action.
|
|
4567
|
+
* @param event The keyboard event to handle
|
|
4568
|
+
*/
|
|
4569
|
+
_handleKeydown(event) {
|
|
4570
|
+
const keyCode = event.keyCode;
|
|
4571
|
+
switch (keyCode) {
|
|
4572
|
+
case ESCAPE:
|
|
4573
|
+
if (!hasModifierKey(event)) {
|
|
4574
|
+
event.preventDefault();
|
|
4575
|
+
this.closed.emit('keydown');
|
|
4576
|
+
}
|
|
4577
|
+
break;
|
|
4578
|
+
}
|
|
4579
|
+
}
|
|
4580
|
+
/**
|
|
4581
|
+
* Close popover on click if `closeOnPanelClick` is true.
|
|
4582
|
+
*/
|
|
4583
|
+
_handleClick() {
|
|
4584
|
+
if (this.closeOnPanelClick) {
|
|
4585
|
+
this.closed.emit('click');
|
|
4586
|
+
}
|
|
4587
|
+
}
|
|
4588
|
+
/**
|
|
4589
|
+
* Disables close of popover when leaving trigger element and mouse over the popover.
|
|
4590
|
+
*/
|
|
4591
|
+
_handleMouseOver() {
|
|
4592
|
+
if (this.triggerEvent === 'hover') {
|
|
4593
|
+
// Cancel any pending close timer
|
|
4594
|
+
if (this._mouseleaveTimer) {
|
|
4595
|
+
clearTimeout(this._mouseleaveTimer);
|
|
4596
|
+
this._mouseleaveTimer = undefined;
|
|
4597
|
+
}
|
|
4598
|
+
this.closeDisabled = true;
|
|
4599
|
+
}
|
|
4600
|
+
}
|
|
4601
|
+
/**
|
|
4602
|
+
* Enables close of popover when mouse leaving popover element.
|
|
4603
|
+
*/
|
|
4604
|
+
_handleMouseLeave() {
|
|
4605
|
+
if (this.triggerEvent === 'hover') {
|
|
4606
|
+
this._mouseleaveTimer = setTimeout(() => {
|
|
4607
|
+
this.closeDisabled = false;
|
|
4608
|
+
this.closed.emit();
|
|
4609
|
+
}, this.leaveDelay);
|
|
4610
|
+
}
|
|
4611
|
+
}
|
|
4612
|
+
/**
|
|
4613
|
+
* Sets the current styles for the popover to allow for dynamically changing settings.
|
|
4614
|
+
* @param pos The position to set styles for, defaults to current position
|
|
4615
|
+
*/
|
|
4616
|
+
setCurrentStyles(pos = this.position) {
|
|
4617
|
+
const left = pos[1] === 'after'
|
|
4618
|
+
? `${this.arrowOffsetX - this.arrowWidth / 2}px`
|
|
4619
|
+
: pos[1] === 'center'
|
|
4620
|
+
? `calc(50% - ${this.arrowWidth / 2}px)`
|
|
4621
|
+
: '';
|
|
4622
|
+
const right = pos[1] === 'before' ? `${this.arrowOffsetX - this.arrowWidth / 2}px` : '';
|
|
4623
|
+
const bottom = pos[1] === 'above'
|
|
4624
|
+
? `${this.arrowOffsetY - this.arrowHeight / 2}px`
|
|
4625
|
+
: pos[1] === 'center'
|
|
4626
|
+
? `calc(50% - ${this.arrowHeight / 2}px)`
|
|
4627
|
+
: '';
|
|
4628
|
+
const top = pos[1] === 'below' ? `${this.arrowOffsetY - this.arrowHeight / 2}px` : '';
|
|
4629
|
+
this.arrowStyles =
|
|
4630
|
+
pos[0] === 'above' || pos[0] === 'below'
|
|
4631
|
+
? {
|
|
4632
|
+
left: this.direction === 'ltr' ? left : right,
|
|
4633
|
+
right: this.direction === 'ltr' ? right : left,
|
|
4634
|
+
}
|
|
4635
|
+
: { top, bottom };
|
|
4636
|
+
}
|
|
4637
|
+
/**
|
|
4638
|
+
* It's necessary to set position-based classes to ensure the popover panel animation
|
|
4639
|
+
* folds out from the correct direction.
|
|
4640
|
+
* @param pos The position to set classes for, defaults to current position
|
|
4641
|
+
*/
|
|
4642
|
+
setPositionClasses(pos = this.position) {
|
|
4643
|
+
this._classList = {
|
|
4644
|
+
...this._classList,
|
|
4645
|
+
['acp-popover-before-above']: pos[0] === 'before' && pos[1] === 'above',
|
|
4646
|
+
['acp-popover-before-center']: pos[0] === 'before' && pos[1] === 'center',
|
|
4647
|
+
['acp-popover-before-below']: pos[0] === 'before' && pos[1] === 'below',
|
|
4648
|
+
['acp-popover-after-above']: pos[0] === 'after' && pos[1] === 'above',
|
|
4649
|
+
['acp-popover-after-center']: pos[0] === 'after' && pos[1] === 'center',
|
|
4650
|
+
['acp-popover-after-below']: pos[0] === 'after' && pos[1] === 'below',
|
|
4651
|
+
['acp-popover-above-before']: pos[0] === 'above' && pos[1] === 'before',
|
|
4652
|
+
['acp-popover-above-center']: pos[0] === 'above' && pos[1] === 'center',
|
|
4653
|
+
['acp-popover-above-after']: pos[0] === 'above' && pos[1] === 'after',
|
|
4654
|
+
['acp-popover-below-before']: pos[0] === 'below' && pos[1] === 'before',
|
|
4655
|
+
['acp-popover-below-center']: pos[0] === 'below' && pos[1] === 'center',
|
|
4656
|
+
['acp-popover-below-after']: pos[0] === 'below' && pos[1] === 'after',
|
|
4657
|
+
};
|
|
4658
|
+
this._changeDetectorRef.markForCheck();
|
|
4659
|
+
}
|
|
4660
|
+
/**
|
|
4661
|
+
* Sets the popover-panel's elevation.
|
|
4662
|
+
* Applies Material Design elevation classes based on the base elevation level.
|
|
4663
|
+
*/
|
|
4664
|
+
setElevation() {
|
|
4665
|
+
// The base elevation depends on which version of the spec
|
|
4666
|
+
// we're running so we have to resolve it at runtime.
|
|
4667
|
+
if (this._baseElevation === null) {
|
|
4668
|
+
const styles = typeof getComputedStyle === 'function'
|
|
4669
|
+
? getComputedStyle(this._elementRef.nativeElement)
|
|
4670
|
+
: null;
|
|
4671
|
+
const value = styles?.getPropertyValue('--acp-popover-base-elevation-level') || '8';
|
|
4672
|
+
this._baseElevation = parseInt(value);
|
|
4673
|
+
}
|
|
4674
|
+
// The elevation starts at the base and increases by one for each level.
|
|
4675
|
+
// Capped at 24 because that's the maximum elevation defined in the Material design spec.
|
|
4676
|
+
const elevation = Math.min(this._baseElevation, 24);
|
|
4677
|
+
const newElevation = `${this._elevationPrefix}${elevation}`;
|
|
4678
|
+
const customElevation = Object.keys(this._classList).find(className => {
|
|
4679
|
+
return className.startsWith(this._elevationPrefix);
|
|
4680
|
+
});
|
|
4681
|
+
if (!customElevation || customElevation === this._previousElevation) {
|
|
4682
|
+
const newClassList = { ...this._classList };
|
|
4683
|
+
if (this._previousElevation) {
|
|
4684
|
+
newClassList[this._previousElevation] = false;
|
|
4685
|
+
}
|
|
4686
|
+
newClassList[newElevation] = true;
|
|
4687
|
+
this._previousElevation = newElevation;
|
|
4688
|
+
this._classList = newClassList;
|
|
4689
|
+
}
|
|
4690
|
+
}
|
|
4691
|
+
/**
|
|
4692
|
+
* Callback that is invoked when the panel animation completes.
|
|
4693
|
+
* @param state The animation state that completed
|
|
4694
|
+
*/
|
|
4695
|
+
_onAnimationDone(state) {
|
|
4696
|
+
const isExit = state === EXIT_ANIMATION;
|
|
4697
|
+
if (isExit || state === ENTER_ANIMATION) {
|
|
4698
|
+
if (isExit) {
|
|
4699
|
+
clearTimeout(this._exitFallbackTimeout);
|
|
4700
|
+
this._exitFallbackTimeout = undefined;
|
|
4701
|
+
}
|
|
4702
|
+
this._animationDone.next(isExit ? 'void' : 'enter');
|
|
4703
|
+
this._isAnimating = false;
|
|
4704
|
+
}
|
|
4705
|
+
}
|
|
4706
|
+
/**
|
|
4707
|
+
* Callback that is invoked when the panel animation starts.
|
|
4708
|
+
* @param state The animation state that started
|
|
4709
|
+
*/
|
|
4710
|
+
_onAnimationStart(state) {
|
|
4711
|
+
if (state === ENTER_ANIMATION || state === EXIT_ANIMATION) {
|
|
4712
|
+
this._isAnimating = true;
|
|
4713
|
+
}
|
|
4714
|
+
}
|
|
4715
|
+
/**
|
|
4716
|
+
* Sets the open state of the popover and manages animations.
|
|
4717
|
+
* @param isOpen Whether the popover should be open
|
|
4718
|
+
*/
|
|
4719
|
+
_setIsOpen(isOpen) {
|
|
4720
|
+
this._panelAnimationState = isOpen ? 'enter' : 'void';
|
|
4721
|
+
if (isOpen) {
|
|
4722
|
+
//
|
|
4723
|
+
}
|
|
4724
|
+
else if (!this._animationsDisabled) {
|
|
4725
|
+
// Some apps do `* { animation: none !important; }` in tests which will prevent the
|
|
4726
|
+
// `animationend` event from firing. Since the exit animation is loading-bearing for
|
|
4727
|
+
// removing the content from the DOM, add a fallback timer.
|
|
4728
|
+
this._exitFallbackTimeout = setTimeout(() => this._onAnimationDone(EXIT_ANIMATION), 200);
|
|
4729
|
+
}
|
|
4730
|
+
// Animation events won't fire when animations are disabled so we simulate them.
|
|
4731
|
+
if (this._animationsDisabled) {
|
|
4732
|
+
setTimeout(() => {
|
|
4733
|
+
this._onAnimationDone(isOpen ? ENTER_ANIMATION : EXIT_ANIMATION);
|
|
4734
|
+
});
|
|
4735
|
+
}
|
|
4736
|
+
this._changeDetectorRef.markForCheck();
|
|
4737
|
+
}
|
|
4738
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcpPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4739
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcpPopover, isStandalone: true, selector: "acp-popover", inputs: { backdropClass: "backdropClass", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], triggerEvent: "triggerEvent", enterDelay: "enterDelay", leaveDelay: "leaveDelay", position: "position", xOffset: "xOffset", yOffset: "yOffset", arrowWidth: "arrowWidth", arrowHeight: "arrowHeight", arrowOffsetX: "arrowOffsetX", arrowOffsetY: "arrowOffsetY", hideArrow: ["hideArrow", "hideArrow", booleanAttribute], closeOnPanelClick: ["closeOnPanelClick", "closeOnPanelClick", booleanAttribute], closeOnBackdropClick: ["closeOnBackdropClick", "closeOnBackdropClick", booleanAttribute], focusTrapEnabled: ["focusTrapEnabled", "focusTrapEnabled", booleanAttribute], focusTrapAutoCaptureEnabled: ["focusTrapAutoCaptureEnabled", "focusTrapAutoCaptureEnabled", booleanAttribute], hasBackdrop: ["hasBackdrop", "hasBackdrop", booleanAttribute], panelClass: "panelClass", classList: "classList" }, outputs: { closed: "closed" }, queries: [{ propertyName: "lazyContent", first: true, predicate: ACP_POPOVER_CONTENT, descendants: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["acpPopover"], ngImport: i0, template: "<ng-template>\n <!-- eslint-disable @angular-eslint/template/mouse-events-have-key-events -->\n <div\n [id]=\"panelId\"\n class=\"acp-popover-panel\"\n [class]=\"_classList\"\n [class.acp-popover-panel-animations-disabled]=\"_animationsDisabled\"\n [class.acp-popover-panel-exit-animation]=\"_panelAnimationState === 'void'\"\n [class.acp-popover-panel-animating]=\"_isAnimating\"\n [class.acp-popover-panel-without-arrow]=\"hideArrow\"\n (keydown)=\"_handleKeydown($event)\"\n (click)=\"_handleClick()\"\n (mouseover)=\"_handleMouseOver()\"\n (mouseleave)=\"_handleMouseLeave()\"\n tabindex=\"-1\"\n role=\"dialog\"\n (animationstart)=\"_onAnimationStart($event.animationName)\"\n (animationend)=\"_onAnimationDone($event.animationName)\"\n (animationcancel)=\"_onAnimationDone($event.animationName)\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby || null\"\n [attr.aria-describedby]=\"ariaDescribedby || null\"\n [cdkTrapFocus]=\"focusTrapEnabled\"\n [cdkTrapFocusAutoCapture]=\"focusTrapAutoCaptureEnabled\"\n >\n <div class=\"acp-popover-content\">\n <ng-content></ng-content>\n </div>\n @if (!hideArrow) {\n <div class=\"acp-popover-direction-arrow\" [style]=\"arrowStyles\"></div>\n }\n </div>\n</ng-template>\n", styles: ["@keyframes _acp-popover-enter{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}@keyframes _acp-popover-exit{0%{opacity:1}to{opacity:0}}.acp-popover-panel{position:relative;max-height:calc(100vh - 48px);padding:8px;font-size:inherit;outline:0;animation:_acp-popover-enter .12s cubic-bezier(0,0,.2,1);border-radius:var(--mat-sys-corner-medium, 12px);background-color:var(--mat-sys-surface-container, #f3f3f3);color:var(--mat-sys-on-surface, #1d1b20)}.acp-popover-panel.acp-popover-panel-exit-animation{animation:_acp-popover-exit .1s 25ms linear forwards}.acp-popover-panel.acp-popover-panel-animations-disabled{animation:none}.acp-popover-panel.acp-popover-panel-animating{pointer-events:none}.acp-popover-panel[class*=acp-popover-below]{margin-top:calc(.5em + 2px)}.acp-popover-panel[class*=acp-popover-above]{margin-bottom:calc(.5em + 2px)}.acp-popover-panel[class*=acp-popover-before]{margin-right:calc(.5em + 2px)}[dir=rtl] .acp-popover-panel[class*=acp-popover-before]{margin-right:auto;margin-left:calc(.5em + 2px)}.acp-popover-panel[class*=acp-popover-after]{margin-left:calc(.5em + 2px)}[dir=rtl] .acp-popover-panel[class*=acp-popover-after]{margin-left:auto;margin-right:calc(.5em + 2px)}.acp-popover-panel.acp-popover-panel-without-arrow{margin:0}.acp-popover-direction-arrow{position:absolute}.acp-popover-direction-arrow:before,.acp-popover-direction-arrow:after{position:absolute;display:inline-block;content:\"\";border-width:.5em;border-style:solid}.acp-popover-direction-arrow:before{border-color:var(--mat-sys-outline, #79747e)}.acp-popover-direction-arrow:after{border-width:calc(.5em - 1px);border-color:var(--mat-sys-surface-container, #f3f3f3)}[class*=acp-popover-below] .acp-popover-direction-arrow,[class*=acp-popover-above] .acp-popover-direction-arrow{width:1em}[class*=acp-popover-below] .acp-popover-direction-arrow:before,[class*=acp-popover-below] .acp-popover-direction-arrow:after,[class*=acp-popover-above] .acp-popover-direction-arrow:before,[class*=acp-popover-above] .acp-popover-direction-arrow:after{border-left-color:transparent;border-right-color:transparent}[class*=acp-popover-below] .acp-popover-direction-arrow:after,[class*=acp-popover-above] .acp-popover-direction-arrow:after{left:1px}[dir=rtl] [class*=acp-popover-below] .acp-popover-direction-arrow:after,[dir=rtl] [class*=acp-popover-above] .acp-popover-direction-arrow:after{right:1px;left:auto}[class*=acp-popover-below] .acp-popover-direction-arrow{top:0}[class*=acp-popover-below] .acp-popover-direction-arrow:before,[class*=acp-popover-below] .acp-popover-direction-arrow:after{bottom:0;border-top-width:0}[class*=acp-popover-above] .acp-popover-direction-arrow{bottom:0}[class*=acp-popover-above] .acp-popover-direction-arrow:before,[class*=acp-popover-above] .acp-popover-direction-arrow:after{top:0;border-bottom-width:0}[class*=acp-popover-before] .acp-popover-direction-arrow,[class*=acp-popover-after] .acp-popover-direction-arrow{height:1em}[class*=acp-popover-before] .acp-popover-direction-arrow:before,[class*=acp-popover-before] .acp-popover-direction-arrow:after,[class*=acp-popover-after] .acp-popover-direction-arrow:before,[class*=acp-popover-after] .acp-popover-direction-arrow:after{border-top-color:transparent;border-bottom-color:transparent}[class*=acp-popover-before] .acp-popover-direction-arrow:after,[class*=acp-popover-after] .acp-popover-direction-arrow:after{top:1px}[class*=acp-popover-before] .acp-popover-direction-arrow{right:0}[class*=acp-popover-before] .acp-popover-direction-arrow:before,[class*=acp-popover-before] .acp-popover-direction-arrow:after{left:0;border-right-width:0}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow{right:auto;left:0}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:before,[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:after{left:auto;right:0;border-left-width:0}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:before{border-right-width:.5em}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:after{border-right-width:calc(.5em - 1px)}[class*=acp-popover-after] .acp-popover-direction-arrow{left:0}[class*=acp-popover-after] .acp-popover-direction-arrow:before,[class*=acp-popover-after] .acp-popover-direction-arrow:after{right:0;border-left-width:0}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow{left:auto;right:0}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:before,[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:after{right:auto;left:0;border-right-width:0}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:before{border-left-width:.5em}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:after{border-left-width:calc(.5em - 1px)}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4740
|
+
}
|
|
4741
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcpPopover, decorators: [{
|
|
4742
|
+
type: Component,
|
|
4743
|
+
args: [{ selector: 'acp-popover', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'acpPopover', standalone: true, imports: [CdkTrapFocus], template: "<ng-template>\n <!-- eslint-disable @angular-eslint/template/mouse-events-have-key-events -->\n <div\n [id]=\"panelId\"\n class=\"acp-popover-panel\"\n [class]=\"_classList\"\n [class.acp-popover-panel-animations-disabled]=\"_animationsDisabled\"\n [class.acp-popover-panel-exit-animation]=\"_panelAnimationState === 'void'\"\n [class.acp-popover-panel-animating]=\"_isAnimating\"\n [class.acp-popover-panel-without-arrow]=\"hideArrow\"\n (keydown)=\"_handleKeydown($event)\"\n (click)=\"_handleClick()\"\n (mouseover)=\"_handleMouseOver()\"\n (mouseleave)=\"_handleMouseLeave()\"\n tabindex=\"-1\"\n role=\"dialog\"\n (animationstart)=\"_onAnimationStart($event.animationName)\"\n (animationend)=\"_onAnimationDone($event.animationName)\"\n (animationcancel)=\"_onAnimationDone($event.animationName)\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby || null\"\n [attr.aria-describedby]=\"ariaDescribedby || null\"\n [cdkTrapFocus]=\"focusTrapEnabled\"\n [cdkTrapFocusAutoCapture]=\"focusTrapAutoCaptureEnabled\"\n >\n <div class=\"acp-popover-content\">\n <ng-content></ng-content>\n </div>\n @if (!hideArrow) {\n <div class=\"acp-popover-direction-arrow\" [style]=\"arrowStyles\"></div>\n }\n </div>\n</ng-template>\n", styles: ["@keyframes _acp-popover-enter{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}@keyframes _acp-popover-exit{0%{opacity:1}to{opacity:0}}.acp-popover-panel{position:relative;max-height:calc(100vh - 48px);padding:8px;font-size:inherit;outline:0;animation:_acp-popover-enter .12s cubic-bezier(0,0,.2,1);border-radius:var(--mat-sys-corner-medium, 12px);background-color:var(--mat-sys-surface-container, #f3f3f3);color:var(--mat-sys-on-surface, #1d1b20)}.acp-popover-panel.acp-popover-panel-exit-animation{animation:_acp-popover-exit .1s 25ms linear forwards}.acp-popover-panel.acp-popover-panel-animations-disabled{animation:none}.acp-popover-panel.acp-popover-panel-animating{pointer-events:none}.acp-popover-panel[class*=acp-popover-below]{margin-top:calc(.5em + 2px)}.acp-popover-panel[class*=acp-popover-above]{margin-bottom:calc(.5em + 2px)}.acp-popover-panel[class*=acp-popover-before]{margin-right:calc(.5em + 2px)}[dir=rtl] .acp-popover-panel[class*=acp-popover-before]{margin-right:auto;margin-left:calc(.5em + 2px)}.acp-popover-panel[class*=acp-popover-after]{margin-left:calc(.5em + 2px)}[dir=rtl] .acp-popover-panel[class*=acp-popover-after]{margin-left:auto;margin-right:calc(.5em + 2px)}.acp-popover-panel.acp-popover-panel-without-arrow{margin:0}.acp-popover-direction-arrow{position:absolute}.acp-popover-direction-arrow:before,.acp-popover-direction-arrow:after{position:absolute;display:inline-block;content:\"\";border-width:.5em;border-style:solid}.acp-popover-direction-arrow:before{border-color:var(--mat-sys-outline, #79747e)}.acp-popover-direction-arrow:after{border-width:calc(.5em - 1px);border-color:var(--mat-sys-surface-container, #f3f3f3)}[class*=acp-popover-below] .acp-popover-direction-arrow,[class*=acp-popover-above] .acp-popover-direction-arrow{width:1em}[class*=acp-popover-below] .acp-popover-direction-arrow:before,[class*=acp-popover-below] .acp-popover-direction-arrow:after,[class*=acp-popover-above] .acp-popover-direction-arrow:before,[class*=acp-popover-above] .acp-popover-direction-arrow:after{border-left-color:transparent;border-right-color:transparent}[class*=acp-popover-below] .acp-popover-direction-arrow:after,[class*=acp-popover-above] .acp-popover-direction-arrow:after{left:1px}[dir=rtl] [class*=acp-popover-below] .acp-popover-direction-arrow:after,[dir=rtl] [class*=acp-popover-above] .acp-popover-direction-arrow:after{right:1px;left:auto}[class*=acp-popover-below] .acp-popover-direction-arrow{top:0}[class*=acp-popover-below] .acp-popover-direction-arrow:before,[class*=acp-popover-below] .acp-popover-direction-arrow:after{bottom:0;border-top-width:0}[class*=acp-popover-above] .acp-popover-direction-arrow{bottom:0}[class*=acp-popover-above] .acp-popover-direction-arrow:before,[class*=acp-popover-above] .acp-popover-direction-arrow:after{top:0;border-bottom-width:0}[class*=acp-popover-before] .acp-popover-direction-arrow,[class*=acp-popover-after] .acp-popover-direction-arrow{height:1em}[class*=acp-popover-before] .acp-popover-direction-arrow:before,[class*=acp-popover-before] .acp-popover-direction-arrow:after,[class*=acp-popover-after] .acp-popover-direction-arrow:before,[class*=acp-popover-after] .acp-popover-direction-arrow:after{border-top-color:transparent;border-bottom-color:transparent}[class*=acp-popover-before] .acp-popover-direction-arrow:after,[class*=acp-popover-after] .acp-popover-direction-arrow:after{top:1px}[class*=acp-popover-before] .acp-popover-direction-arrow{right:0}[class*=acp-popover-before] .acp-popover-direction-arrow:before,[class*=acp-popover-before] .acp-popover-direction-arrow:after{left:0;border-right-width:0}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow{right:auto;left:0}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:before,[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:after{left:auto;right:0;border-left-width:0}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:before{border-right-width:.5em}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:after{border-right-width:calc(.5em - 1px)}[class*=acp-popover-after] .acp-popover-direction-arrow{left:0}[class*=acp-popover-after] .acp-popover-direction-arrow:before,[class*=acp-popover-after] .acp-popover-direction-arrow:after{right:0;border-left-width:0}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow{left:auto;right:0}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:before,[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:after{right:auto;left:0;border-right-width:0}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:before{border-left-width:.5em}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:after{border-left-width:calc(.5em - 1px)}\n"] }]
|
|
4744
|
+
}], propDecorators: { backdropClass: [{
|
|
4745
|
+
type: Input
|
|
4746
|
+
}], ariaLabel: [{
|
|
4747
|
+
type: Input,
|
|
4748
|
+
args: ['aria-label']
|
|
4749
|
+
}], ariaLabelledby: [{
|
|
4750
|
+
type: Input,
|
|
4751
|
+
args: ['aria-labelledby']
|
|
4752
|
+
}], ariaDescribedby: [{
|
|
4753
|
+
type: Input,
|
|
4754
|
+
args: ['aria-describedby']
|
|
4755
|
+
}], triggerEvent: [{
|
|
4756
|
+
type: Input
|
|
4757
|
+
}], enterDelay: [{
|
|
4758
|
+
type: Input
|
|
4759
|
+
}], leaveDelay: [{
|
|
4760
|
+
type: Input
|
|
4761
|
+
}], position: [{
|
|
4762
|
+
type: Input
|
|
4763
|
+
}], xOffset: [{
|
|
4764
|
+
type: Input
|
|
4765
|
+
}], yOffset: [{
|
|
4766
|
+
type: Input
|
|
4767
|
+
}], arrowWidth: [{
|
|
4768
|
+
type: Input
|
|
4769
|
+
}], arrowHeight: [{
|
|
4770
|
+
type: Input
|
|
4771
|
+
}], arrowOffsetX: [{
|
|
4772
|
+
type: Input
|
|
4773
|
+
}], arrowOffsetY: [{
|
|
4774
|
+
type: Input
|
|
4775
|
+
}], hideArrow: [{
|
|
4776
|
+
type: Input,
|
|
4777
|
+
args: [{ transform: booleanAttribute }]
|
|
4778
|
+
}], closeOnPanelClick: [{
|
|
4779
|
+
type: Input,
|
|
4780
|
+
args: [{ transform: booleanAttribute }]
|
|
4781
|
+
}], closeOnBackdropClick: [{
|
|
4782
|
+
type: Input,
|
|
4783
|
+
args: [{ transform: booleanAttribute }]
|
|
4784
|
+
}], focusTrapEnabled: [{
|
|
4785
|
+
type: Input,
|
|
4786
|
+
args: [{ transform: booleanAttribute }]
|
|
4787
|
+
}], focusTrapAutoCaptureEnabled: [{
|
|
4788
|
+
type: Input,
|
|
4789
|
+
args: [{ transform: booleanAttribute }]
|
|
4790
|
+
}], hasBackdrop: [{
|
|
4791
|
+
type: Input,
|
|
4792
|
+
args: [{ transform: booleanAttribute }]
|
|
4793
|
+
}], panelClass: [{
|
|
4794
|
+
type: Input
|
|
4795
|
+
}], classList: [{
|
|
4796
|
+
type: Input
|
|
4797
|
+
}], closed: [{
|
|
4798
|
+
type: Output
|
|
4799
|
+
}], templateRef: [{
|
|
4800
|
+
type: ViewChild,
|
|
4801
|
+
args: [TemplateRef]
|
|
4802
|
+
}], lazyContent: [{
|
|
4803
|
+
type: ContentChild,
|
|
4804
|
+
args: [ACP_POPOVER_CONTENT]
|
|
4805
|
+
}] } });
|
|
4806
|
+
|
|
4807
|
+
/** Injection token that determines the scroll handling while the popover is open. */
|
|
4808
|
+
const ACP_POPOVER_SCROLL_STRATEGY = new InjectionToken('acp-popover-scroll-strategy', {
|
|
4809
|
+
providedIn: 'root',
|
|
4810
|
+
factory: () => {
|
|
4811
|
+
const overlay = inject(Overlay);
|
|
4812
|
+
return () => overlay.scrollStrategies.reposition();
|
|
4813
|
+
},
|
|
4814
|
+
});
|
|
4815
|
+
/**
|
|
4816
|
+
* This directive is intended to be used in conjunction with an `acp-popover` tag. It is
|
|
4817
|
+
* responsible for toggling the display of the provided popover instance.
|
|
4818
|
+
*
|
|
4819
|
+
* The trigger handles various events (click, hover) and manages the popover's lifecycle,
|
|
4820
|
+
* including opening, closing, positioning, and focus management.
|
|
4821
|
+
*
|
|
4822
|
+
* @example
|
|
4823
|
+
* ```html
|
|
4824
|
+
* <acp-popover #popover="acpPopover">
|
|
4825
|
+
* <div>Popover content</div>
|
|
4826
|
+
* </acp-popover>
|
|
4827
|
+
*
|
|
4828
|
+
* <button [acpPopoverTriggerFor]="popover">
|
|
4829
|
+
* Show popover
|
|
4830
|
+
* </button>
|
|
4831
|
+
* ```
|
|
4832
|
+
*/
|
|
4833
|
+
class AcpPopoverTrigger {
|
|
4834
|
+
_overlay = inject(Overlay);
|
|
4835
|
+
_elementRef = inject(ElementRef);
|
|
4836
|
+
_viewContainerRef = inject(ViewContainerRef);
|
|
4837
|
+
_dir = inject(Directionality, { optional: true });
|
|
4838
|
+
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
4839
|
+
_focusMonitor = inject(FocusMonitor);
|
|
4840
|
+
_portal;
|
|
4841
|
+
_overlayRef = null;
|
|
4842
|
+
_popoverOpen = false;
|
|
4843
|
+
_halt = false;
|
|
4844
|
+
_positionSubscription = Subscription.EMPTY;
|
|
4845
|
+
_popoverCloseSubscription = Subscription.EMPTY;
|
|
4846
|
+
_pendingRemoval;
|
|
4847
|
+
_closingActionsSubscription = Subscription.EMPTY;
|
|
4848
|
+
_scrollStrategy = inject(ACP_POPOVER_SCROLL_STRATEGY);
|
|
4849
|
+
_mouseoverTimer;
|
|
4850
|
+
_mouseleaveTimer;
|
|
4851
|
+
// Tracking input type is necessary so it's possible to only auto-focus
|
|
4852
|
+
// the first item of the list when the popover is opened via the keyboard
|
|
4853
|
+
_openedBy = undefined;
|
|
4854
|
+
/** References the popover instance that the trigger is associated with. */
|
|
4855
|
+
get popover() {
|
|
4856
|
+
return this._popover;
|
|
4857
|
+
}
|
|
4858
|
+
set popover(popover) {
|
|
4859
|
+
if (popover === this._popover) {
|
|
4860
|
+
return;
|
|
4861
|
+
}
|
|
4862
|
+
this._popover = popover;
|
|
4863
|
+
this._popoverCloseSubscription.unsubscribe();
|
|
4864
|
+
if (popover) {
|
|
4865
|
+
this._popoverCloseSubscription = popover.closed.subscribe((reason) => {
|
|
4866
|
+
this._destroyPopover(reason);
|
|
4867
|
+
});
|
|
4868
|
+
}
|
|
4869
|
+
}
|
|
4870
|
+
_popover;
|
|
4871
|
+
/** Data to be passed along to any lazily-rendered content. */
|
|
4872
|
+
popoverData;
|
|
4873
|
+
/** References the popover target instance that the trigger is associated with. */
|
|
4874
|
+
targetElement;
|
|
4875
|
+
/** Popover trigger event */
|
|
4876
|
+
triggerEvent;
|
|
4877
|
+
/** Event emitted when the associated popover is opened. */
|
|
4878
|
+
popoverOpened = new EventEmitter();
|
|
4879
|
+
/** Event emitted when the associated popover is closed. */
|
|
4880
|
+
popoverClosed = new EventEmitter();
|
|
4881
|
+
/**
|
|
4882
|
+
* Lifecycle hook called after content initialization.
|
|
4883
|
+
* Validates the popover reference and sets up initial configuration.
|
|
4884
|
+
*/
|
|
4885
|
+
ngAfterContentInit() {
|
|
4886
|
+
this._checkPopover();
|
|
4887
|
+
this._setCurrentConfig();
|
|
4888
|
+
}
|
|
4889
|
+
/**
|
|
4890
|
+
* Lifecycle hook called when the component is destroyed.
|
|
4891
|
+
* Cleans up subscriptions and overlay references.
|
|
4892
|
+
*/
|
|
4893
|
+
ngOnDestroy() {
|
|
4894
|
+
this._halt = true;
|
|
4895
|
+
this._positionSubscription.unsubscribe();
|
|
4896
|
+
this._pendingRemoval?.unsubscribe();
|
|
4897
|
+
this._popoverCloseSubscription.unsubscribe();
|
|
4898
|
+
this._closingActionsSubscription.unsubscribe();
|
|
4899
|
+
if (this._mouseoverTimer) {
|
|
4900
|
+
clearTimeout(this._mouseoverTimer);
|
|
4901
|
+
this._mouseoverTimer = null;
|
|
4902
|
+
}
|
|
4903
|
+
if (this._mouseleaveTimer) {
|
|
4904
|
+
clearTimeout(this._mouseleaveTimer);
|
|
4905
|
+
this._mouseleaveTimer = null;
|
|
4906
|
+
}
|
|
4907
|
+
if (this._overlayRef) {
|
|
4908
|
+
this._overlayRef.dispose();
|
|
4909
|
+
this._overlayRef = null;
|
|
4910
|
+
}
|
|
4911
|
+
}
|
|
4912
|
+
/**
|
|
4913
|
+
* Sets the current configuration for the popover.
|
|
4914
|
+
* Updates trigger event and applies current styles.
|
|
4915
|
+
*/
|
|
4916
|
+
_setCurrentConfig() {
|
|
4917
|
+
if (this.triggerEvent) {
|
|
4918
|
+
this.popover.triggerEvent = this.triggerEvent;
|
|
4919
|
+
}
|
|
4920
|
+
this.popover.setCurrentStyles();
|
|
4921
|
+
}
|
|
4922
|
+
/** Whether the popover is open. */
|
|
4923
|
+
get popoverOpen() {
|
|
4924
|
+
return this._popoverOpen;
|
|
4925
|
+
}
|
|
4926
|
+
/** The text direction of the containing app. */
|
|
4927
|
+
get dir() {
|
|
4928
|
+
return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
|
|
4929
|
+
}
|
|
4930
|
+
/**
|
|
4931
|
+
* Handles mouse click on the trigger.
|
|
4932
|
+
* @param _event The mouse event
|
|
4933
|
+
*/
|
|
4934
|
+
_handleClick(_event) {
|
|
4935
|
+
if (this.popover.triggerEvent === 'click') {
|
|
4936
|
+
this.togglePopover();
|
|
4937
|
+
}
|
|
4938
|
+
}
|
|
4939
|
+
/**
|
|
4940
|
+
* Handles mouse enter on the trigger.
|
|
4941
|
+
* @param _event The mouse event
|
|
4942
|
+
*/
|
|
4943
|
+
_handleMouseEnter(_event) {
|
|
4944
|
+
this._halt = false;
|
|
4945
|
+
if (this.popover.triggerEvent === 'hover') {
|
|
4946
|
+
this._mouseoverTimer = setTimeout(() => {
|
|
4947
|
+
this.openPopover();
|
|
4948
|
+
}, this.popover.enterDelay);
|
|
4949
|
+
}
|
|
4950
|
+
}
|
|
4951
|
+
/**
|
|
4952
|
+
* Handles mouse leave on the trigger.
|
|
4953
|
+
* @param _event The mouse event
|
|
4954
|
+
*/
|
|
4955
|
+
_handleMouseLeave(_event) {
|
|
4956
|
+
if (this.popover.triggerEvent === 'hover') {
|
|
4957
|
+
if (this._mouseoverTimer) {
|
|
4958
|
+
clearTimeout(this._mouseoverTimer);
|
|
4959
|
+
this._mouseoverTimer = null;
|
|
4960
|
+
}
|
|
4961
|
+
if (this._popoverOpen) {
|
|
4962
|
+
this._mouseleaveTimer = setTimeout(() => {
|
|
4963
|
+
if (!this.popover.closeDisabled) {
|
|
4964
|
+
this.closePopover();
|
|
4965
|
+
}
|
|
4966
|
+
}, this.popover.leaveDelay);
|
|
4967
|
+
}
|
|
4968
|
+
else {
|
|
4969
|
+
this._halt = true;
|
|
4970
|
+
}
|
|
4971
|
+
}
|
|
4972
|
+
}
|
|
4973
|
+
/** Handles mouse presses on the trigger. */
|
|
4974
|
+
_handleMousedown(event) {
|
|
4975
|
+
if (!isFakeMousedownFromScreenReader(event)) {
|
|
4976
|
+
// Since right or middle button clicks won't trigger the `click` event,
|
|
4977
|
+
// we shouldn't consider the popover as opened by mouse in those cases.
|
|
4978
|
+
this._openedBy = event.button === 0 ? 'mouse' : undefined;
|
|
4979
|
+
}
|
|
4980
|
+
}
|
|
4981
|
+
/** Handles key presses on the trigger. */
|
|
4982
|
+
_handleKeydown(event) {
|
|
4983
|
+
const keyCode = event.keyCode;
|
|
4984
|
+
// Pressing enter on the trigger will trigger the click handler later.
|
|
4985
|
+
if (keyCode === ENTER || keyCode === SPACE) {
|
|
4986
|
+
this._openedBy = 'keyboard';
|
|
4987
|
+
}
|
|
4988
|
+
}
|
|
4989
|
+
/** Toggles the popover between the open and closed states. */
|
|
4990
|
+
togglePopover() {
|
|
4991
|
+
return this._popoverOpen ? this.closePopover() : this.openPopover();
|
|
4992
|
+
}
|
|
4993
|
+
/** Opens the popover. */
|
|
4994
|
+
openPopover() {
|
|
4995
|
+
if (this._popoverOpen || this._halt) {
|
|
4996
|
+
return;
|
|
4997
|
+
}
|
|
4998
|
+
this._checkPopover();
|
|
4999
|
+
this._pendingRemoval?.unsubscribe();
|
|
5000
|
+
const overlayRef = this._createOverlay();
|
|
5001
|
+
const overlayConfig = overlayRef.getConfig();
|
|
5002
|
+
this._setPosition(overlayConfig.positionStrategy);
|
|
5003
|
+
if (this.popover.triggerEvent === 'click') {
|
|
5004
|
+
overlayConfig.hasBackdrop = this.popover.hasBackdrop ?? true;
|
|
5005
|
+
}
|
|
5006
|
+
overlayRef.attach(this._getPortal());
|
|
5007
|
+
if (this.popover.lazyContent) {
|
|
5008
|
+
this.popover.lazyContent.attach(this.popoverData);
|
|
5009
|
+
}
|
|
5010
|
+
this._closingActionsSubscription = this._popoverClosingActions().subscribe(() => this.closePopover());
|
|
5011
|
+
this._initPopover();
|
|
5012
|
+
if (this.popover instanceof AcpPopover) {
|
|
5013
|
+
this.popover._setIsOpen(true);
|
|
5014
|
+
}
|
|
5015
|
+
}
|
|
5016
|
+
/** Closes the popover. */
|
|
5017
|
+
closePopover() {
|
|
5018
|
+
this.popover.closed.emit();
|
|
5019
|
+
}
|
|
5020
|
+
/**
|
|
5021
|
+
* Focuses the popover trigger.
|
|
5022
|
+
* @param origin Source of the popover trigger's focus.
|
|
5023
|
+
*/
|
|
5024
|
+
focus(origin, options) {
|
|
5025
|
+
if (this._focusMonitor && origin) {
|
|
5026
|
+
this._focusMonitor.focusVia(this._elementRef, origin, options);
|
|
5027
|
+
}
|
|
5028
|
+
else {
|
|
5029
|
+
this._elementRef.nativeElement.focus(options);
|
|
5030
|
+
}
|
|
5031
|
+
}
|
|
5032
|
+
/** Removes the popover from the DOM. */
|
|
5033
|
+
_destroyPopover(_reason) {
|
|
5034
|
+
const overlayRef = this._overlayRef;
|
|
5035
|
+
if (!overlayRef || !this.popoverOpen) {
|
|
5036
|
+
return;
|
|
5037
|
+
}
|
|
5038
|
+
// Clear the timeouts for hover events.
|
|
5039
|
+
if (this._mouseoverTimer) {
|
|
5040
|
+
clearTimeout(this._mouseoverTimer);
|
|
5041
|
+
this._mouseoverTimer = null;
|
|
5042
|
+
}
|
|
5043
|
+
if (this._mouseleaveTimer) {
|
|
5044
|
+
clearTimeout(this._mouseleaveTimer);
|
|
5045
|
+
this._mouseleaveTimer = null;
|
|
5046
|
+
}
|
|
5047
|
+
const popover = this.popover;
|
|
5048
|
+
this._closingActionsSubscription.unsubscribe();
|
|
5049
|
+
this._pendingRemoval?.unsubscribe();
|
|
5050
|
+
overlayRef.detach();
|
|
5051
|
+
// Note that we don't wait for the animation to finish if another trigger took
|
|
5052
|
+
// over the popover, because the panel will end up empty which looks glitchy.
|
|
5053
|
+
if (popover instanceof AcpPopover) {
|
|
5054
|
+
// Wait for the exit animation to finish before detaching the content.
|
|
5055
|
+
this._pendingRemoval = popover._animationDone
|
|
5056
|
+
.pipe(filter(event => event === 'void'), take(1))
|
|
5057
|
+
.subscribe(() => {
|
|
5058
|
+
popover.lazyContent?.detach();
|
|
5059
|
+
});
|
|
5060
|
+
}
|
|
5061
|
+
else {
|
|
5062
|
+
popover.lazyContent?.detach();
|
|
5063
|
+
}
|
|
5064
|
+
this._openedBy = undefined;
|
|
5065
|
+
this._setIsPopoverOpen(false);
|
|
5066
|
+
}
|
|
5067
|
+
/**
|
|
5068
|
+
* This method sets the popover state to open.
|
|
5069
|
+
*/
|
|
5070
|
+
_initPopover() {
|
|
5071
|
+
this.popover.direction = this.dir;
|
|
5072
|
+
this.popover.setElevation();
|
|
5073
|
+
this._setIsPopoverOpen(true);
|
|
5074
|
+
}
|
|
5075
|
+
// set state rather than toggle to support triggers sharing a popover
|
|
5076
|
+
_setIsPopoverOpen(isOpen) {
|
|
5077
|
+
if (isOpen !== this._popoverOpen) {
|
|
5078
|
+
this._popoverOpen = isOpen;
|
|
5079
|
+
if (this._popoverOpen) {
|
|
5080
|
+
this.popoverOpened.emit();
|
|
5081
|
+
}
|
|
5082
|
+
else {
|
|
5083
|
+
this.popoverClosed.emit();
|
|
5084
|
+
}
|
|
5085
|
+
this._changeDetectorRef.markForCheck();
|
|
5086
|
+
}
|
|
5087
|
+
}
|
|
5088
|
+
/**
|
|
5089
|
+
* This method checks that a valid instance of AcpPopover has been passed into
|
|
5090
|
+
* `acpPopoverTriggerFor`. If not, an exception is thrown.
|
|
5091
|
+
*/
|
|
5092
|
+
_checkPopover() {
|
|
5093
|
+
if (!this.popover) {
|
|
5094
|
+
throwAcpPopoverMissingError();
|
|
5095
|
+
}
|
|
5096
|
+
}
|
|
5097
|
+
/**
|
|
5098
|
+
* This method creates the overlay from the provided popover's template and saves its
|
|
5099
|
+
* OverlayRef so that it can be attached to the DOM when openPopover is called.
|
|
5100
|
+
*/
|
|
5101
|
+
_createOverlay() {
|
|
5102
|
+
if (!this._overlayRef) {
|
|
5103
|
+
const config = this._getOverlayConfig();
|
|
5104
|
+
this._subscribeToPositions(config.positionStrategy);
|
|
5105
|
+
this._overlayRef = this._overlay.create(config);
|
|
5106
|
+
}
|
|
5107
|
+
else {
|
|
5108
|
+
const overlayConfig = this._overlayRef.getConfig();
|
|
5109
|
+
const positionStrategy = overlayConfig.positionStrategy;
|
|
5110
|
+
positionStrategy.setOrigin(this._getTargetElement());
|
|
5111
|
+
}
|
|
5112
|
+
return this._overlayRef;
|
|
5113
|
+
}
|
|
5114
|
+
/**
|
|
5115
|
+
* This method builds the configuration object needed to create the overlay, the OverlayConfig.
|
|
5116
|
+
* @returns OverlayConfig
|
|
5117
|
+
*/
|
|
5118
|
+
_getOverlayConfig() {
|
|
5119
|
+
return new OverlayConfig({
|
|
5120
|
+
positionStrategy: this._overlay
|
|
5121
|
+
.position()
|
|
5122
|
+
.flexibleConnectedTo(this._getTargetElement())
|
|
5123
|
+
.withLockedPosition()
|
|
5124
|
+
.withGrowAfterOpen()
|
|
5125
|
+
.withTransformOriginOn('.acp-popover-panel'),
|
|
5126
|
+
backdropClass: this.popover.backdropClass || 'cdk-overlay-transparent-backdrop',
|
|
5127
|
+
panelClass: this.popover.overlayPanelClass,
|
|
5128
|
+
scrollStrategy: this._scrollStrategy(),
|
|
5129
|
+
direction: this._dir || undefined,
|
|
5130
|
+
});
|
|
5131
|
+
}
|
|
5132
|
+
_getTargetElement() {
|
|
5133
|
+
if (this.targetElement) {
|
|
5134
|
+
return this.targetElement.elementRef;
|
|
5135
|
+
}
|
|
5136
|
+
return this._elementRef;
|
|
5137
|
+
}
|
|
5138
|
+
/**
|
|
5139
|
+
* Listens to changes in the position of the overlay and sets the correct classes
|
|
5140
|
+
* on the popover based on the new position. This ensures the animation origin is always
|
|
5141
|
+
* correct, even if a fallback position is used for the overlay.
|
|
5142
|
+
*/
|
|
5143
|
+
_subscribeToPositions(position) {
|
|
5144
|
+
this._positionSubscription = position.positionChanges.subscribe(change => {
|
|
5145
|
+
const posX = change.connectionPair.overlayX === 'start'
|
|
5146
|
+
? 'after'
|
|
5147
|
+
: change.connectionPair.overlayX === 'end'
|
|
5148
|
+
? 'before'
|
|
5149
|
+
: 'center';
|
|
5150
|
+
const posY = change.connectionPair.overlayY === 'top'
|
|
5151
|
+
? 'below'
|
|
5152
|
+
: change.connectionPair.overlayY === 'bottom'
|
|
5153
|
+
? 'above'
|
|
5154
|
+
: 'center';
|
|
5155
|
+
const pos = this.popover.position[0] === 'above' || this.popover.position[0] === 'below'
|
|
5156
|
+
? [posY, posX]
|
|
5157
|
+
: [posX, posY];
|
|
5158
|
+
// required for ChangeDetectionStrategy.OnPush
|
|
5159
|
+
this._changeDetectorRef.markForCheck();
|
|
5160
|
+
this.popover.setCurrentStyles(pos);
|
|
5161
|
+
this.popover.setPositionClasses(pos);
|
|
5162
|
+
});
|
|
5163
|
+
}
|
|
5164
|
+
/**
|
|
5165
|
+
* Sets the appropriate positions on a position strategy
|
|
5166
|
+
* so the overlay connects with the trigger correctly.
|
|
5167
|
+
* @param positionStrategy Strategy whose position to update.
|
|
5168
|
+
*/
|
|
5169
|
+
_setPosition(positionStrategy) {
|
|
5170
|
+
const [originX, origin2ndX, origin3rdX] = this.popover.position[0] === 'before' || this.popover.position[1] === 'after'
|
|
5171
|
+
? ['start', 'center', 'end']
|
|
5172
|
+
: this.popover.position[0] === 'after' || this.popover.position[1] === 'before'
|
|
5173
|
+
? ['end', 'center', 'start']
|
|
5174
|
+
: ['center', 'start', 'end'];
|
|
5175
|
+
const [originY, origin2ndY, origin3rdY] = this.popover.position[0] === 'above' || this.popover.position[1] === 'below'
|
|
5176
|
+
? ['top', 'center', 'bottom']
|
|
5177
|
+
: this.popover.position[0] === 'below' || this.popover.position[1] === 'above'
|
|
5178
|
+
? ['bottom', 'center', 'top']
|
|
5179
|
+
: ['center', 'top', 'bottom'];
|
|
5180
|
+
const [overlayX, overlayFallbackX] = this.popover.position[0] === 'below' || this.popover.position[0] === 'above'
|
|
5181
|
+
? [originX, originX]
|
|
5182
|
+
: this.popover.position[0] === 'before'
|
|
5183
|
+
? ['end', 'start']
|
|
5184
|
+
: ['start', 'end'];
|
|
5185
|
+
const [overlayY, overlayFallbackY] = this.popover.position[0] === 'before' || this.popover.position[0] === 'after'
|
|
5186
|
+
? [originY, originY]
|
|
5187
|
+
: this.popover.position[0] === 'below'
|
|
5188
|
+
? ['top', 'bottom']
|
|
5189
|
+
: ['bottom', 'top'];
|
|
5190
|
+
const originFallbackX = overlayX;
|
|
5191
|
+
const originFallbackY = overlayY;
|
|
5192
|
+
const offsetX = this.popover.xOffset && !isNaN(Number(this.popover.xOffset))
|
|
5193
|
+
? Number(this.dir === 'ltr' ? this.popover.xOffset : -this.popover.xOffset)
|
|
5194
|
+
: 0;
|
|
5195
|
+
const offsetY = this.popover.yOffset && !isNaN(Number(this.popover.yOffset))
|
|
5196
|
+
? Number(this.popover.yOffset)
|
|
5197
|
+
: 0;
|
|
5198
|
+
let positions = [{ originX, originY, overlayX, overlayY }];
|
|
5199
|
+
if (this.popover.position[0] === 'above' || this.popover.position[0] === 'below') {
|
|
5200
|
+
positions = [
|
|
5201
|
+
{ originX, originY, overlayX, overlayY, offsetY },
|
|
5202
|
+
{ originX: origin2ndX, originY, overlayX: origin2ndX, overlayY, offsetY },
|
|
5203
|
+
{ originX: origin3rdX, originY, overlayX: origin3rdX, overlayY, offsetY },
|
|
5204
|
+
{
|
|
5205
|
+
originX,
|
|
5206
|
+
originY: originFallbackY,
|
|
5207
|
+
overlayX,
|
|
5208
|
+
overlayY: overlayFallbackY,
|
|
5209
|
+
offsetY: -offsetY,
|
|
5210
|
+
},
|
|
5211
|
+
{
|
|
5212
|
+
originX: origin2ndX,
|
|
5213
|
+
originY: originFallbackY,
|
|
5214
|
+
overlayX: origin2ndX,
|
|
5215
|
+
overlayY: overlayFallbackY,
|
|
5216
|
+
offsetY: -offsetY,
|
|
5217
|
+
},
|
|
5218
|
+
{
|
|
5219
|
+
originX: origin3rdX,
|
|
5220
|
+
originY: originFallbackY,
|
|
5221
|
+
overlayX: origin3rdX,
|
|
5222
|
+
overlayY: overlayFallbackY,
|
|
5223
|
+
offsetY: -offsetY,
|
|
5224
|
+
},
|
|
5225
|
+
];
|
|
5226
|
+
}
|
|
5227
|
+
if (this.popover.position[0] === 'before' || this.popover.position[0] === 'after') {
|
|
5228
|
+
positions = [
|
|
5229
|
+
{ originX, originY, overlayX, overlayY, offsetX },
|
|
5230
|
+
{ originX, originY: origin2ndY, overlayX, overlayY: origin2ndY, offsetX },
|
|
5231
|
+
{ originX, originY: origin3rdY, overlayX, overlayY: origin3rdY, offsetX },
|
|
5232
|
+
{
|
|
5233
|
+
originX: originFallbackX,
|
|
5234
|
+
originY,
|
|
5235
|
+
overlayX: overlayFallbackX,
|
|
5236
|
+
overlayY,
|
|
5237
|
+
offsetX: -offsetX,
|
|
5238
|
+
},
|
|
5239
|
+
{
|
|
5240
|
+
originX: originFallbackX,
|
|
5241
|
+
originY: origin2ndY,
|
|
5242
|
+
overlayX: overlayFallbackX,
|
|
5243
|
+
overlayY: origin2ndY,
|
|
5244
|
+
offsetX: -offsetX,
|
|
5245
|
+
},
|
|
5246
|
+
{
|
|
5247
|
+
originX: originFallbackX,
|
|
5248
|
+
originY: origin3rdY,
|
|
5249
|
+
overlayX: overlayFallbackX,
|
|
5250
|
+
overlayY: origin3rdY,
|
|
5251
|
+
offsetX: -offsetX,
|
|
5252
|
+
},
|
|
5253
|
+
];
|
|
5254
|
+
}
|
|
5255
|
+
positionStrategy
|
|
5256
|
+
.withPositions(positions)
|
|
5257
|
+
.withDefaultOffsetX(offsetX)
|
|
5258
|
+
.withDefaultOffsetY(offsetY);
|
|
5259
|
+
}
|
|
5260
|
+
/** Returns a stream that emits whenever an action that should close the popover occurs. */
|
|
5261
|
+
_popoverClosingActions() {
|
|
5262
|
+
const backdrop = this.popover.triggerEvent === 'click' && this.popover.closeOnBackdropClick === true
|
|
5263
|
+
? this._overlayRef.backdropClick()
|
|
5264
|
+
: of();
|
|
5265
|
+
const detachments = this._overlayRef.detachments();
|
|
5266
|
+
return merge(backdrop, detachments);
|
|
5267
|
+
}
|
|
5268
|
+
/** Gets the portal that should be attached to the overlay. */
|
|
5269
|
+
_getPortal() {
|
|
5270
|
+
// Note that we can avoid this check by keeping the portal on the popover panel.
|
|
5271
|
+
// While it would be cleaner, we'd have to introduce another required method on
|
|
5272
|
+
// `AcpPopoverPanel`, making it harder to consume.
|
|
5273
|
+
if (!this._portal || this._portal.templateRef !== this.popover.templateRef) {
|
|
5274
|
+
this._portal = new TemplatePortal(this.popover.templateRef, this._viewContainerRef);
|
|
5275
|
+
}
|
|
5276
|
+
return this._portal;
|
|
5277
|
+
}
|
|
5278
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcpPopoverTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
5279
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: AcpPopoverTrigger, isStandalone: true, selector: "[acpPopoverTriggerFor]", inputs: { popover: ["acpPopoverTriggerFor", "popover"], popoverData: "popoverData", targetElement: "targetElement", triggerEvent: "triggerEvent" }, outputs: { popoverOpened: "popoverOpened", popoverClosed: "popoverClosed" }, host: { attributes: { "aria-haspopup": "true" }, listeners: { "click": "_handleClick($event)", "mouseenter": "_handleMouseEnter($event)", "mouseleave": "_handleMouseLeave($event)", "mousedown": "_handleMousedown($event)", "keydown": "_handleKeydown($event)" }, properties: { "attr.aria-expanded": "popoverOpen", "attr.aria-controls": "popoverOpen ? popover.panelId : null" } }, exportAs: ["acpPopoverTrigger"], ngImport: i0 });
|
|
5280
|
+
}
|
|
5281
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcpPopoverTrigger, decorators: [{
|
|
5282
|
+
type: Directive,
|
|
5283
|
+
args: [{
|
|
5284
|
+
selector: '[acpPopoverTriggerFor]',
|
|
5285
|
+
exportAs: 'acpPopoverTrigger',
|
|
5286
|
+
standalone: true,
|
|
5287
|
+
host: {
|
|
5288
|
+
'aria-haspopup': 'true',
|
|
5289
|
+
'[attr.aria-expanded]': 'popoverOpen',
|
|
5290
|
+
'[attr.aria-controls]': 'popoverOpen ? popover.panelId : null',
|
|
5291
|
+
'(click)': '_handleClick($event)',
|
|
5292
|
+
'(mouseenter)': '_handleMouseEnter($event)',
|
|
5293
|
+
'(mouseleave)': '_handleMouseLeave($event)',
|
|
5294
|
+
'(mousedown)': '_handleMousedown($event)',
|
|
5295
|
+
'(keydown)': '_handleKeydown($event)',
|
|
5296
|
+
},
|
|
5297
|
+
}]
|
|
5298
|
+
}], propDecorators: { popover: [{
|
|
5299
|
+
type: Input,
|
|
5300
|
+
args: ['acpPopoverTriggerFor']
|
|
5301
|
+
}], popoverData: [{
|
|
5302
|
+
type: Input
|
|
5303
|
+
}], targetElement: [{
|
|
5304
|
+
type: Input
|
|
5305
|
+
}], triggerEvent: [{
|
|
5306
|
+
type: Input
|
|
5307
|
+
}], popoverOpened: [{
|
|
5308
|
+
type: Output
|
|
5309
|
+
}], popoverClosed: [{
|
|
5310
|
+
type: Output
|
|
5311
|
+
}] } });
|
|
5312
|
+
|
|
5313
|
+
/**
|
|
5314
|
+
* Directive that marks an element as a popover target.
|
|
5315
|
+
*
|
|
5316
|
+
* This directive provides a reference to an element that can be used
|
|
5317
|
+
* as the target for popover positioning. It's useful when you want
|
|
5318
|
+
* the popover to appear relative to a different element than the trigger.
|
|
5319
|
+
*
|
|
5320
|
+
* @example
|
|
5321
|
+
* ```html
|
|
5322
|
+
* <div acpPopoverTarget #target="acpPopoverTarget">Target element</div>
|
|
5323
|
+
* <button [acpPopoverTriggerFor]="popover" [acpPopoverTargetAt]="target">
|
|
5324
|
+
* Trigger
|
|
5325
|
+
* </button>
|
|
5326
|
+
* ```
|
|
5327
|
+
*/
|
|
5328
|
+
class AcpPopoverTarget {
|
|
5329
|
+
/** Reference to the target element. */
|
|
5330
|
+
elementRef = inject(ElementRef);
|
|
5331
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcpPopoverTarget, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
5332
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: AcpPopoverTarget, isStandalone: true, selector: "acp-popover-target, [acpPopoverTarget]", exportAs: ["acpPopoverTarget"], ngImport: i0 });
|
|
5333
|
+
}
|
|
5334
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcpPopoverTarget, decorators: [{
|
|
5335
|
+
type: Directive,
|
|
5336
|
+
args: [{
|
|
5337
|
+
selector: 'acp-popover-target, [acpPopoverTarget]',
|
|
5338
|
+
exportAs: 'acpPopoverTarget',
|
|
5339
|
+
standalone: true,
|
|
5340
|
+
}]
|
|
5341
|
+
}] });
|
|
5342
|
+
|
|
3714
5343
|
class ToUpperCase {
|
|
3715
5344
|
el = inject(ElementRef);
|
|
3716
5345
|
renderer = inject(Renderer2);
|
|
@@ -3848,5 +5477,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
3848
5477
|
* Generated bundle index. Do not edit.
|
|
3849
5478
|
*/
|
|
3850
5479
|
|
|
3851
|
-
export { AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AdvancedDialogService, AutocompleteWrapperService, Button, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, KeyboardNavigationService, OverlayService, Pagination, ReusableAutocompleteComponent, Spinner, StatusDisplayPipe, SvgIcon, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, createAutocompleteWrapperConfig };
|
|
5480
|
+
export { ACP_DRAWER_DATA, ACP_DRAWER_DEFAULT_OPTIONS, ACP_POPOVER_CONTENT, ACP_POPOVER_DEFAULT_OPTIONS, ACP_POPOVER_SCROLL_STRATEGY, AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AcpDrawer, AcpDrawerConfig, AcpDrawerContainer, AcpDrawerRef, AcpPopover, AcpPopoverContent, AcpPopoverTarget, AcpPopoverTrigger, AdvancedDialogService, AutocompleteWrapperService, Button, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, KeyboardNavigationService, OverlayService, Pagination, ReusableAutocompleteComponent, Spinner, StatusDisplayPipe, SvgIcon, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, _AcpPopoverContentBase, createAutocompleteWrapperConfig, throwAcpPopoverInvalidPositionEnd, throwAcpPopoverInvalidPositionStart, throwAcpPopoverMissingError };
|
|
3852
5481
|
//# sourceMappingURL=acontplus-ng-components.mjs.map
|