@acontplus/ng-components 2.4.0 → 2.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -77,10 +77,10 @@ class AcpAlert {
|
|
|
77
77
|
this._changeDetectorRef.markForCheck();
|
|
78
78
|
this.closed.emit(this);
|
|
79
79
|
}
|
|
80
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
81
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0
|
|
80
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
81
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpAlert, isStandalone: true, selector: "acp-alert", inputs: { type: "type", dismissible: ["dismissible", "dismissible", booleanAttribute], elevation: "elevation" }, outputs: { closed: "closed" }, host: { attributes: { "role": "alert" }, properties: { "class": "hostClassList", "class.acp-alert-dismissible": "dismissible" } }, exportAs: ["acpAlert"], ngImport: i0, template: "<ng-content></ng-content>\n@if (dismissible) {\n<div class=\"acp-alert-close\">\n <button matIconButton type=\"button\" aria-label=\"Close\" (click)=\"_onClosed()\">\n <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path\n d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\"\n />\n </svg>\n </button>\n</div>\n}\n", styles: [".acp-alert{position:relative;display:block;padding:.75rem 1rem;margin-bottom:1rem;line-height:1.5;border:1px solid var(--acp-alert-outline-color, var(--mat-sys-outline-variant));border-radius:var(--acp-alert-container-shape, var(--mat-sys-corner-small));background-color:var(--acp-alert-background-color, var(--mat-sys-surface-container));color:var(--acp-alert-text-color, var(--mat-sys-on-surface))}.acp-alert.acp-alert-info{border-color:var(--acp-alert-info-outline-color, light-dark(#abc7ff, #005cbb));background-color:var(--acp-alert-info-background-color, light-dark(#d7e3ff, #002f65));color:var(--acp-alert-info-text-color, light-dark(#002f65, #d7e3ff))}.acp-alert.acp-alert-success{border-color:var(--acp-alert-success-outline-color, light-dark(#02e600, #026e00));background-color:var(--acp-alert-success-background-color, light-dark(#cbffb8, #013a00));color:var(--acp-alert-success-text-color, light-dark(#013a00, #cbffb8))}.acp-alert.acp-alert-warning{border-color:var(--acp-alert-warning-outline-color, light-dark(#cdcd00, #626200));background-color:var(--acp-alert-warning-background-color, light-dark(#fffeac, #323200));color:var(--acp-alert-warning-text-color, light-dark(#323200, #fffeac))}.acp-alert.acp-alert-danger{border-color:var(--acp-alert-danger-outline-color, light-dark(#ffb4a8, #c00100));background-color:var(--acp-alert-danger-background-color, light-dark(#ffdad4, #690100));color:var(--acp-alert-danger-text-color, light-dark(#690100, #ffdad4))}.acp-alert-close{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem}[dir=rtl] .acp-alert-close{right:auto;left:0}.acp-alert-dismissible{padding-right:3rem}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
82
82
|
}
|
|
83
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
83
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpAlert, decorators: [{
|
|
84
84
|
type: Component,
|
|
85
85
|
args: [{ selector: 'acp-alert', exportAs: 'acpAlert', host: {
|
|
86
86
|
'[class]': 'hostClassList',
|
|
@@ -243,10 +243,10 @@ class AcpBadge {
|
|
|
243
243
|
return;
|
|
244
244
|
this.removed.emit();
|
|
245
245
|
}
|
|
246
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
247
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpBadge, isStandalone: true, selector: "acp-badge", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingSvgIcon: { classPropertyName: "trailingSvgIcon", publicName: "trailingSvgIcon", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelOverride: { classPropertyName: "ariaLabelOverride", publicName: "ariaLabelOverride", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", removed: "removed" }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ["icon"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "trailingIconTemplate", first: true, predicate: ["trailingIcon"], descendants: true, read: TemplateRef, isSignal: true }], exportAs: ["acpBadge"], ngImport: i0, template: "<mat-chip-set\n class=\"acp-badge__set\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n>\n <mat-chip\n class=\"acp-badge__chip\"\n [ngClass]=\"chipClasses()\"\n [disabled]=\"isDisabled()\"\n [removable]=\"removable()\"\n [highlighted]=\"isHighlighted()\"\n [value]=\"value()\"\n [routerLink]=\"routerLink()\"\n [attr.href]=\"href()\"\n (removed)=\"onRemove($event)\"\n (click)=\"onChipClick($event)\"\n >\n @if (loading()) {\n <span class=\"acp-badge__loader\" aria-hidden=\"true\"></span>\n } @if (iconTemplate()) {\n <span matChipAvatar class=\"acp-badge__avatar\">\n <ng-container [ngTemplateOutlet]=\"iconTemplate()!\"></ng-container>\n </span>\n } @else if (effectiveSvgIcon()) {\n <mat-icon\n matChipAvatar\n class=\"acp-badge__icon\"\n [svgIcon]=\"effectiveSvgIcon()!\"\n aria-hidden=\"true\"\n ></mat-icon>\n } @else if (effectiveIcon()) {\n <mat-icon matChipAvatar class=\"acp-badge__icon\" aria-hidden=\"true\"\n >{{ effectiveIcon() }}</mat-icon\n >\n } @if (label()) {\n <span class=\"acp-badge__label\">{{ label() }}</span>\n } @if (label() && effectiveValue()) {\n <span class=\"acp-badge__separator\" aria-hidden=\"true\">|</span>\n } @if (effectiveValue()) {\n <span class=\"acp-badge__value\">{{ effectiveValue() }}</span>\n } @if (trailingIconTemplate()) {\n <span matChipTrailingIcon class=\"acp-badge__trailing-icon\">\n <ng-container [ngTemplateOutlet]=\"trailingIconTemplate()!\"></ng-container>\n </span>\n } @else if (effectiveTrailingSvgIcon()) {\n <mat-icon\n matChipTrailingIcon\n class=\"acp-badge__trailing-icon\"\n [svgIcon]=\"effectiveTrailingSvgIcon()!\"\n aria-hidden=\"true\"\n ></mat-icon>\n } @else if (effectiveTrailingIcon()) {\n <mat-icon matChipTrailingIcon class=\"acp-badge__trailing-icon\" aria-hidden=\"true\"\n >{{ effectiveTrailingIcon() }}</mat-icon\n >\n } @if (removable()) {\n <button\n matChipRemove\n type=\"button\"\n class=\"acp-badge__remove\"\n aria-label=\"Remove\"\n (click)=\"onRemove($event)\"\n >\n <mat-icon aria-hidden=\"true\">cancel</mat-icon>\n </button>\n }\n </mat-chip>\n</mat-chip-set>\n", styles: [".acp-badge{--acp-badge-bg: var(--acp-badge-primary-bg, var(--mat-sys-primary));--acp-badge-fg: var(--acp-badge-primary-color, var(--mat-sys-on-primary));display:inline-flex;vertical-align:middle;max-width:100%}.acp-badge__set{display:inline-flex;max-width:100%}.acp-badge__chip.mat-mdc-chip{position:relative;max-width:100%}.acp-badge__label,.acp-badge__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acp-badge__separator{margin:0 6px;opacity:.6}.acp-badge__loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:inherit;border-radius:inherit;z-index:1}.acp-badge__loader:after{content:\"\";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:acp-badge-spin .75s linear infinite}.acp-badge__remove{cursor:pointer}.acp-badge__remove:focus-visible{outline:2px solid currentColor;outline-offset:1px}@keyframes acp-badge-spin{to{transform:rotate(360deg)}}.acp-badge.acp-badge--primary{--acp-badge-bg: var(--acp-badge-primary-bg, var(--mat-sys-primary));--acp-badge-fg: var(--acp-badge-primary-color, var(--mat-sys-on-primary))}.acp-badge.acp-badge--secondary{--acp-badge-bg: var(--acp-badge-secondary-bg, var(--mat-sys-secondary));--acp-badge-fg: var(--acp-badge-secondary-color, var(--mat-sys-on-secondary))}.acp-badge.acp-badge--tertiary{--acp-badge-bg: var(--acp-badge-tertiary-bg, var(--mat-sys-tertiary));--acp-badge-fg: var(--acp-badge-tertiary-color, var(--mat-sys-on-tertiary))}.acp-badge.acp-badge--success{--acp-badge-bg: var(--acp-badge-success-bg, light-dark(#026e00, #02e600));--acp-badge-fg: var(--acp-badge-success-fg, light-dark(#cbffb8, #013a00))}.acp-badge.acp-badge--warning{--acp-badge-bg: var(--acp-badge-warning-bg, light-dark(#964900, #ffb787));--acp-badge-fg: var(--acp-badge-warning-fg, light-dark(#ffede4, #502400))}.acp-badge.acp-badge--danger{--acp-badge-bg: var(--acp-badge-danger-bg, light-dark(#c00100, #ffb4a8));--acp-badge-fg: var(--acp-badge-danger-fg, light-dark(#ffedea, #690100))}.acp-badge.acp-badge--info{--acp-badge-bg: var(--acp-badge-info-bg, light-dark(#005cbb, #abc7ff));--acp-badge-fg: var(--acp-badge-info-fg, light-dark(#ecf0ff, #002f65))}.acp-badge.acp-badge--neutral{--acp-badge-bg: var(--acp-badge-neutral-bg, var(--mat-sys-surface-variant));--acp-badge-fg: var(--acp-badge-neutral-color, var(--mat-sys-on-surface-variant))}.acp-badge.acp-badge--custom{--acp-badge-bg: var(--acp-badge-custom-bg, var(--acp-badge-custom-bg, var(--mat-sys-surface-container)));--acp-badge-fg: var(--acp-badge-custom-fg, var(--acp-badge-custom-color, var(--mat-sys-on-surface)))}.acp-badge.acp-badge--filled .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: var(--acp-badge-bg);--mat-chip-elevated-selected-container-color: var(--acp-badge-bg);--mat-chip-label-text-color: var(--acp-badge-fg);--mat-chip-selected-label-text-color: var(--acp-badge-fg);--mat-chip-with-icon-icon-color: var(--acp-badge-fg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-fg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-fg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-fg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--outlined .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: transparent;--mat-chip-elevated-selected-container-color: transparent;--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: var(--acp-badge-bg);--mat-chip-outline-width: 1px}.acp-badge.acp-badge--soft .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: color-mix(in srgb, var(--acp-badge-bg) 12%, transparent);--mat-chip-elevated-selected-container-color: color-mix(in srgb, var(--acp-badge-bg) 12%, transparent);--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--tonal .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: color-mix(in srgb, var(--acp-badge-bg) 22%, transparent);--mat-chip-elevated-selected-container-color: color-mix(in srgb, var(--acp-badge-bg) 22%, transparent);--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--text .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: transparent;--mat-chip-elevated-selected-container-color: transparent;--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--xs .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 20px;--mat-chip-label-text-size: 10px}.acp-badge.acp-badge--xs .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 12px}.acp-badge.acp-badge--sm .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 24px;--mat-chip-label-text-size: 11px}.acp-badge.acp-badge--sm .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 14px}.acp-badge.acp-badge--md .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 28px;--mat-chip-label-text-size: 12px}.acp-badge.acp-badge--md .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 16px}.acp-badge.acp-badge--lg .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 32px;--mat-chip-label-text-size: 14px}.acp-badge.acp-badge--lg .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 18px}.acp-badge.acp-badge--rounded .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: var(--acp-badge-container-shape, var(--mat-sys-corner-small))}.acp-badge.acp-badge--pill .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: var(--acp-badge-pill-shape, var(--mat-sys-corner-full))}.acp-badge.acp-badge--square .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: 0}.acp-badge__chip.mat-mdc-chip .mat-icon{width:var(--acp-badge-icon-size, 18px);height:var(--acp-badge-icon-size, 18px);font-size:var(--acp-badge-icon-size, 18px);line-height:var(--acp-badge-icon-size, 18px)}.acp-badge.acp-badge--interactive .acp-badge__chip.mat-mdc-chip{cursor:pointer}.acp-badge.acp-badge--disabled .acp-badge__chip.mat-mdc-chip{cursor:not-allowed;opacity:.5}.acp-badge.acp-badge--loading .acp-badge__chip.mat-mdc-chip{pointer-events:none}.acp-badge.acp-badge--selected .acp-badge__chip.mat-mdc-chip.mdc-evolution-chip--selected,.acp-badge.acp-badge--selected .acp-badge__chip.mat-mdc-chip.mat-mdc-chip-highlighted{box-shadow:inset 0 0 0 2px currentColor}@media(prefers-reduced-motion:reduce){.acp-badge__loader:after{animation:none}}@media(prefers-contrast:more){.acp-badge__chip.mat-mdc-chip{outline:2px solid currentColor;outline-offset:1px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
246
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
247
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpBadge, isStandalone: true, selector: "acp-badge", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingSvgIcon: { classPropertyName: "trailingSvgIcon", publicName: "trailingSvgIcon", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelOverride: { classPropertyName: "ariaLabelOverride", publicName: "ariaLabelOverride", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", removed: "removed" }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ["icon"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "trailingIconTemplate", first: true, predicate: ["trailingIcon"], descendants: true, read: TemplateRef, isSignal: true }], exportAs: ["acpBadge"], ngImport: i0, template: "<mat-chip-set\n class=\"acp-badge__set\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n>\n <mat-chip\n class=\"acp-badge__chip\"\n [ngClass]=\"chipClasses()\"\n [disabled]=\"isDisabled()\"\n [removable]=\"removable()\"\n [highlighted]=\"isHighlighted()\"\n [value]=\"value()\"\n [routerLink]=\"routerLink()\"\n [attr.href]=\"href()\"\n (removed)=\"onRemove($event)\"\n (click)=\"onChipClick($event)\"\n >\n @if (loading()) {\n <span class=\"acp-badge__loader\" aria-hidden=\"true\"></span>\n } @if (iconTemplate()) {\n <span matChipAvatar class=\"acp-badge__avatar\">\n <ng-container [ngTemplateOutlet]=\"iconTemplate()!\"></ng-container>\n </span>\n } @else if (effectiveSvgIcon()) {\n <mat-icon\n matChipAvatar\n class=\"acp-badge__icon\"\n [svgIcon]=\"effectiveSvgIcon()!\"\n aria-hidden=\"true\"\n ></mat-icon>\n } @else if (effectiveIcon()) {\n <mat-icon matChipAvatar class=\"acp-badge__icon\" aria-hidden=\"true\"\n >{{ effectiveIcon() }}</mat-icon\n >\n } @if (label()) {\n <span class=\"acp-badge__label\">{{ label() }}</span>\n } @if (label() && effectiveValue()) {\n <span class=\"acp-badge__separator\" aria-hidden=\"true\">|</span>\n } @if (effectiveValue()) {\n <span class=\"acp-badge__value\">{{ effectiveValue() }}</span>\n } @if (trailingIconTemplate()) {\n <span matChipTrailingIcon class=\"acp-badge__trailing-icon\">\n <ng-container [ngTemplateOutlet]=\"trailingIconTemplate()!\"></ng-container>\n </span>\n } @else if (effectiveTrailingSvgIcon()) {\n <mat-icon\n matChipTrailingIcon\n class=\"acp-badge__trailing-icon\"\n [svgIcon]=\"effectiveTrailingSvgIcon()!\"\n aria-hidden=\"true\"\n ></mat-icon>\n } @else if (effectiveTrailingIcon()) {\n <mat-icon matChipTrailingIcon class=\"acp-badge__trailing-icon\" aria-hidden=\"true\"\n >{{ effectiveTrailingIcon() }}</mat-icon\n >\n } @if (removable()) {\n <button\n matChipRemove\n type=\"button\"\n class=\"acp-badge__remove\"\n aria-label=\"Remove\"\n (click)=\"onRemove($event)\"\n >\n <mat-icon aria-hidden=\"true\">cancel</mat-icon>\n </button>\n }\n </mat-chip>\n</mat-chip-set>\n", styles: [".acp-badge{--acp-badge-bg: var(--acp-badge-primary-bg, var(--mat-sys-primary));--acp-badge-fg: var(--acp-badge-primary-color, var(--mat-sys-on-primary));display:inline-flex;vertical-align:middle;max-width:100%}.acp-badge__set{display:inline-flex;max-width:100%}.acp-badge__chip.mat-mdc-chip{position:relative;max-width:100%}.acp-badge__label,.acp-badge__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acp-badge__separator{margin:0 6px;opacity:.6}.acp-badge__loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:inherit;border-radius:inherit;z-index:1}.acp-badge__loader:after{content:\"\";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:acp-badge-spin .75s linear infinite}.acp-badge__remove{cursor:pointer}.acp-badge__remove:focus-visible{outline:2px solid currentColor;outline-offset:1px}@keyframes acp-badge-spin{to{transform:rotate(360deg)}}.acp-badge.acp-badge--primary{--acp-badge-bg: var(--acp-badge-primary-bg, var(--mat-sys-primary));--acp-badge-fg: var(--acp-badge-primary-color, var(--mat-sys-on-primary))}.acp-badge.acp-badge--secondary{--acp-badge-bg: var(--acp-badge-secondary-bg, var(--mat-sys-secondary));--acp-badge-fg: var(--acp-badge-secondary-color, var(--mat-sys-on-secondary))}.acp-badge.acp-badge--tertiary{--acp-badge-bg: var(--acp-badge-tertiary-bg, var(--mat-sys-tertiary));--acp-badge-fg: var(--acp-badge-tertiary-color, var(--mat-sys-on-tertiary))}.acp-badge.acp-badge--success{--acp-badge-bg: var(--acp-badge-success-bg, light-dark(#026e00, #02e600));--acp-badge-fg: var(--acp-badge-success-fg, light-dark(#cbffb8, #013a00))}.acp-badge.acp-badge--warning{--acp-badge-bg: var(--acp-badge-warning-bg, light-dark(#964900, #ffb787));--acp-badge-fg: var(--acp-badge-warning-fg, light-dark(#ffede4, #502400))}.acp-badge.acp-badge--danger{--acp-badge-bg: var(--acp-badge-danger-bg, light-dark(#c00100, #ffb4a8));--acp-badge-fg: var(--acp-badge-danger-fg, light-dark(#ffedea, #690100))}.acp-badge.acp-badge--info{--acp-badge-bg: var(--acp-badge-info-bg, light-dark(#005cbb, #abc7ff));--acp-badge-fg: var(--acp-badge-info-fg, light-dark(#ecf0ff, #002f65))}.acp-badge.acp-badge--neutral{--acp-badge-bg: var(--acp-badge-neutral-bg, var(--mat-sys-surface-variant));--acp-badge-fg: var(--acp-badge-neutral-color, var(--mat-sys-on-surface-variant))}.acp-badge.acp-badge--custom{--acp-badge-bg: var(--acp-badge-custom-bg, var(--acp-badge-custom-bg, var(--mat-sys-surface-container)));--acp-badge-fg: var(--acp-badge-custom-fg, var(--acp-badge-custom-color, var(--mat-sys-on-surface)))}.acp-badge.acp-badge--filled .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: var(--acp-badge-bg);--mat-chip-elevated-selected-container-color: var(--acp-badge-bg);--mat-chip-label-text-color: var(--acp-badge-fg);--mat-chip-selected-label-text-color: var(--acp-badge-fg);--mat-chip-with-icon-icon-color: var(--acp-badge-fg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-fg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-fg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-fg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--outlined .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: transparent;--mat-chip-elevated-selected-container-color: transparent;--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: var(--acp-badge-bg);--mat-chip-outline-width: 1px}.acp-badge.acp-badge--soft .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: color-mix(in srgb, var(--acp-badge-bg) 12%, transparent);--mat-chip-elevated-selected-container-color: color-mix(in srgb, var(--acp-badge-bg) 12%, transparent);--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--tonal .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: color-mix(in srgb, var(--acp-badge-bg) 22%, transparent);--mat-chip-elevated-selected-container-color: color-mix(in srgb, var(--acp-badge-bg) 22%, transparent);--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--text .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: transparent;--mat-chip-elevated-selected-container-color: transparent;--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--xs .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 20px;--mat-chip-label-text-size: 10px}.acp-badge.acp-badge--xs .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 12px}.acp-badge.acp-badge--sm .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 24px;--mat-chip-label-text-size: 11px}.acp-badge.acp-badge--sm .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 14px}.acp-badge.acp-badge--md .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 28px;--mat-chip-label-text-size: 12px}.acp-badge.acp-badge--md .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 16px}.acp-badge.acp-badge--lg .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 32px;--mat-chip-label-text-size: 14px}.acp-badge.acp-badge--lg .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 18px}.acp-badge.acp-badge--rounded .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: var(--acp-badge-container-shape, var(--mat-sys-corner-small))}.acp-badge.acp-badge--pill .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: var(--acp-badge-pill-shape, var(--mat-sys-corner-full))}.acp-badge.acp-badge--square .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: 0}.acp-badge__chip.mat-mdc-chip .mat-icon{width:var(--acp-badge-icon-size, 18px);height:var(--acp-badge-icon-size, 18px);font-size:var(--acp-badge-icon-size, 18px);line-height:var(--acp-badge-icon-size, 18px)}.acp-badge.acp-badge--interactive .acp-badge__chip.mat-mdc-chip{cursor:pointer}.acp-badge.acp-badge--disabled .acp-badge__chip.mat-mdc-chip{cursor:not-allowed;opacity:.5}.acp-badge.acp-badge--loading .acp-badge__chip.mat-mdc-chip{pointer-events:none}.acp-badge.acp-badge--selected .acp-badge__chip.mat-mdc-chip.mdc-evolution-chip--selected,.acp-badge.acp-badge--selected .acp-badge__chip.mat-mdc-chip.mat-mdc-chip-highlighted{box-shadow:inset 0 0 0 2px currentColor}@media(prefers-reduced-motion:reduce){.acp-badge__loader:after{animation:none}}@media(prefers-contrast:more){.acp-badge__chip.mat-mdc-chip{outline:2px solid currentColor;outline-offset:1px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
248
248
|
}
|
|
249
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
249
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpBadge, decorators: [{
|
|
250
250
|
type: Component,
|
|
251
251
|
args: [{ selector: 'acp-badge', exportAs: 'acpBadge', standalone: true, imports: [
|
|
252
252
|
NgClass,
|
|
@@ -438,10 +438,10 @@ class DynamicCard {
|
|
|
438
438
|
handleKeyPress(event) {
|
|
439
439
|
this.keyPress.emit(event);
|
|
440
440
|
}
|
|
441
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
442
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0
|
|
441
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DynamicCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
442
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DynamicCard, isStandalone: true, selector: "acp-dynamic-card", inputs: { cardTitle: { classPropertyName: "cardTitle", publicName: "cardTitle", isSignal: true, isRequired: false, transformFunction: null }, cardSubtitle: { classPropertyName: "cardSubtitle", publicName: "cardSubtitle", isSignal: true, isRequired: false, transformFunction: null }, avatarImageUrl: { classPropertyName: "avatarImageUrl", publicName: "avatarImageUrl", isSignal: true, isRequired: false, transformFunction: null }, isHeaderVisible: { classPropertyName: "isHeaderVisible", publicName: "isHeaderVisible", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null }, hasDivider: { classPropertyName: "hasDivider", publicName: "hasDivider", isSignal: true, isRequired: false, transformFunction: null }, areActionsVisible: { classPropertyName: "areActionsVisible", publicName: "areActionsVisible", isSignal: true, isRequired: false, transformFunction: null }, primaryButtonText: { classPropertyName: "primaryButtonText", publicName: "primaryButtonText", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonText: { classPropertyName: "secondaryButtonText", publicName: "secondaryButtonText", isSignal: true, isRequired: false, transformFunction: null }, primaryButtonIcon: { classPropertyName: "primaryButtonIcon", publicName: "primaryButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonIcon: { classPropertyName: "secondaryButtonIcon", publicName: "secondaryButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, buttonsPosition: { classPropertyName: "buttonsPosition", publicName: "buttonsPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { primaryButtonClicked: "primaryButtonClicked", secondaryButtonClicked: "secondaryButtonClicked", cardClicked: "cardClicked", keyDown: "keyDown", keyUp: "keyUp", keyPress: "keyPress" }, ngImport: i0, template: "<mat-card\n appearance=\"outlined\"\n (click)=\"handleCardClick($event)\"\n (keydown)=\"handleKeyDown($event)\"\n (keyup)=\"handleKeyUp($event)\"\n (keypress)=\"handleKeyPress($event)\"\n [class.mat-card-divider]=\"hasDivider()\"\n>\n @if (isHeaderVisible()) {\n <mat-card-header>\n @if (avatarImageUrl()) {\n <img mat-card-avatar [src]=\"avatarImageUrl()\" alt=\"Card avatar\" />\n } @if (cardTitle()) {\n <mat-card-title>{{ cardTitle() }}</mat-card-title>\n } @if (cardSubtitle()) {\n <mat-card-subtitle>{{ cardSubtitle() }}</mat-card-subtitle>\n }\n </mat-card-header>\n }\n\n <mat-card-content [style.padding]=\"contentPadding()\">\n <ng-content />\n </mat-card-content>\n\n @if (areActionsVisible()) {\n <mat-card-actions [align]=\"buttonsPosition()\">\n @if (secondaryButtonText()) {\n <button mat-button color=\"warn\" (click)=\"handleSecondaryButtonClick($event)\">\n @if (secondaryButtonIcon()) {\n <mat-icon>{{ secondaryButtonIcon() }}</mat-icon>\n } {{ secondaryButtonText() }}\n </button>\n } @if (primaryButtonText()) {\n <button mat-button color=\"primary\" (click)=\"handlePrimaryButtonClick($event)\">\n @if (primaryButtonIcon()) {\n <mat-icon>{{ primaryButtonIcon() }}</mat-icon>\n } {{ primaryButtonText() }}\n </button>\n }\n </mat-card-actions>\n }\n</mat-card>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "directive", type: i1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
|
|
443
443
|
}
|
|
444
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
444
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DynamicCard, decorators: [{
|
|
445
445
|
type: Component,
|
|
446
446
|
args: [{ selector: 'acp-dynamic-card', standalone: true, imports: [MatCardModule, MatButtonModule, MatIconModule], changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, template: "<mat-card\n appearance=\"outlined\"\n (click)=\"handleCardClick($event)\"\n (keydown)=\"handleKeyDown($event)\"\n (keyup)=\"handleKeyUp($event)\"\n (keypress)=\"handleKeyPress($event)\"\n [class.mat-card-divider]=\"hasDivider()\"\n>\n @if (isHeaderVisible()) {\n <mat-card-header>\n @if (avatarImageUrl()) {\n <img mat-card-avatar [src]=\"avatarImageUrl()\" alt=\"Card avatar\" />\n } @if (cardTitle()) {\n <mat-card-title>{{ cardTitle() }}</mat-card-title>\n } @if (cardSubtitle()) {\n <mat-card-subtitle>{{ cardSubtitle() }}</mat-card-subtitle>\n }\n </mat-card-header>\n }\n\n <mat-card-content [style.padding]=\"contentPadding()\">\n <ng-content />\n </mat-card-content>\n\n @if (areActionsVisible()) {\n <mat-card-actions [align]=\"buttonsPosition()\">\n @if (secondaryButtonText()) {\n <button mat-button color=\"warn\" (click)=\"handleSecondaryButtonClick($event)\">\n @if (secondaryButtonIcon()) {\n <mat-icon>{{ secondaryButtonIcon() }}</mat-icon>\n } {{ secondaryButtonText() }}\n </button>\n } @if (primaryButtonText()) {\n <button mat-button color=\"primary\" (click)=\"handlePrimaryButtonClick($event)\">\n @if (primaryButtonIcon()) {\n <mat-icon>{{ primaryButtonIcon() }}</mat-icon>\n } {{ primaryButtonText() }}\n </button>\n }\n </mat-card-actions>\n }\n</mat-card>\n" }]
|
|
447
447
|
}], propDecorators: { cardTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardTitle", required: false }] }], cardSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardSubtitle", required: false }] }], avatarImageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarImageUrl", required: false }] }], isHeaderVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHeaderVisible", required: false }] }], contentPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPadding", required: false }] }], hasDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDivider", required: false }] }], areActionsVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "areActionsVisible", required: false }] }], primaryButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryButtonText", required: false }] }], secondaryButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryButtonText", required: false }] }], primaryButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryButtonIcon", required: false }] }], secondaryButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryButtonIcon", required: false }] }], buttonsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonsPosition", required: false }] }], primaryButtonClicked: [{ type: i0.Output, args: ["primaryButtonClicked"] }], secondaryButtonClicked: [{ type: i0.Output, args: ["secondaryButtonClicked"] }], cardClicked: [{ type: i0.Output, args: ["cardClicked"] }], keyDown: [{ type: i0.Output, args: ["keyDown"] }], keyUp: [{ type: i0.Output, args: ["keyUp"] }], keyPress: [{ type: i0.Output, args: ["keyPress"] }] } });
|
|
@@ -615,10 +615,10 @@ class Button {
|
|
|
615
615
|
}
|
|
616
616
|
return this.text();
|
|
617
617
|
}
|
|
618
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
619
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: Button, isStandalone: true, selector: "acp-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, matStyle: { classPropertyName: "matStyle", publicName: "matStyle", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, reportFormat: { classPropertyName: "reportFormat", publicName: "reportFormat", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { handleClick: "handleClick" }, ngImport: i0, template: "@switch (matStyle()) { @case ('text') {\n<button\n matButton\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('elevated') {\n<button\n matButton=\"elevated\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('outlined') {\n<button\n matButton=\"outlined\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('tonal') {\n<button\n matButton=\"tonal\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('icon') {\n<button\n matIconButton\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('fab') {\n<button\n matFab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('mini-fab') {\n<button\n matMiniFab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('extended-fab') {\n<button\n matFab\n extended\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @default {\n<button\n matButton=\"filled\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} }\n\n<ng-template #buttonContent>\n @if (getIcon()) {\n <mat-icon>{{ getIcon() }}</mat-icon>\n } @if (getDisplayText()) { {{ getDisplayText() }} }\n\n <ng-content />\n</ng-template>\n", styles: [":root{--acp-secondary: #e0e0e0;--acp-secondary-on: #000000;--acp-success: #4caf50;--acp-success-on: #ffffff;--acp-danger: #ba1a1a;--acp-danger-on: #ffffff;--acp-warning: #ff9800;--acp-warning-on: #000000;--acp-info: #2196f3;--acp-info-on: #ffffff;--acp-dark: #212121;--acp-dark-on: #ffffff}.dark-theme{--acp-secondary: #424242;--acp-secondary-on: #ffffff;--acp-success: #81c784;--acp-success-on: #1b5e20;--acp-danger: #ef5350;--acp-danger-on: #b71c1c;--acp-warning: #ffb74d;--acp-warning-on: #e65100;--acp-info: #64b5f6;--acp-info-on: #0d47a1;--acp-dark: #616161;--acp-dark-on: #ffffff}acp-button{display:inline-block}.mat-mdc-button .mdc-button__label,.mat-mdc-unelevated-button .mdc-button__label,.mat-mdc-raised-button .mdc-button__label,.mat-mdc-outlined-button .mdc-button__label,button[matbutton=tonal] .mdc-button__label,.mat-mdc-fab.mdc-fab--extended .mdc-button__label{display:flex;align-items:center;gap:8px}.mat-mdc-button.mat-btn-secondary,.mat-mdc-unelevated-button.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-button.mat-btn-secondary:hover,.mat-mdc-unelevated-button.mat-btn-secondary:hover{background-color:color-mix(in srgb,var(--acp-secondary) 80%,black)!important}.mat-mdc-button.mat-btn-success,.mat-mdc-unelevated-button.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-button.mat-btn-danger,.mat-mdc-unelevated-button.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-button.mat-btn-warning,.mat-mdc-unelevated-button.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-button.mat-btn-info,.mat-mdc-unelevated-button.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-button.mat-btn-dark,.mat-mdc-unelevated-button.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}button[matbutton=tonal].mat-btn-success{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important;color:var(--acp-success)!important}button[matbutton=tonal].mat-btn-danger{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important;color:var(--acp-danger)!important}button[matbutton=tonal].mat-btn-warning{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important;color:var(--acp-warning)!important}button[matbutton=tonal].mat-btn-info{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important;color:var(--acp-info)!important}button[matbutton=tonal].mat-btn-dark{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important;color:var(--acp-dark)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-success{color:var(--acp-success)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-info{color:var(--acp-info)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-dark{color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-secondary{background-color:var(--mat-sys-surface-container-low)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-raised-button.mat-btn-success{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-success)!important}.mat-mdc-raised-button.mat-btn-success:hover{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-danger{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-danger)!important}.mat-mdc-raised-button.mat-btn-danger:hover{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-warning{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-warning)!important}.mat-mdc-raised-button.mat-btn-warning:hover{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-info{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-info)!important}.mat-mdc-raised-button.mat-btn-info:hover{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-dark{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-dark:hover{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important}.mat-mdc-outlined-button.mat-btn-secondary{border-color:var(--mat-sys-outline)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-outlined-button.mat-btn-success{border-color:var(--acp-success)!important;color:var(--acp-success)!important}.mat-mdc-outlined-button.mat-btn-danger{border-color:var(--acp-danger)!important;color:var(--acp-danger)!important}.mat-mdc-outlined-button.mat-btn-warning{border-color:var(--acp-warning)!important;color:var(--acp-warning)!important}.mat-mdc-outlined-button.mat-btn-info{border-color:var(--acp-info)!important;color:var(--acp-info)!important}.mat-mdc-outlined-button.mat-btn-dark{border-color:var(--acp-dark)!important;color:var(--acp-dark)!important}.mat-mdc-fab.mat-btn-secondary,.mat-mdc-mini-fab.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-fab.mat-btn-success,.mat-mdc-mini-fab.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-fab.mat-btn-danger,.mat-mdc-mini-fab.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-fab.mat-btn-warning,.mat-mdc-mini-fab.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-fab.mat-btn-info,.mat-mdc-mini-fab.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-fab.mat-btn-dark,.mat-mdc-mini-fab.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}.mat-mdc-icon-button.mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-icon-button.mat-btn-success{color:var(--acp-success)!important}.mat-mdc-icon-button.mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-icon-button.mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-icon-button.mat-btn-info{color:var(--acp-info)!important}.mat-mdc-icon-button.mat-btn-dark{color:var(--acp-dark)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
|
|
618
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
619
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Button, isStandalone: true, selector: "acp-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, matStyle: { classPropertyName: "matStyle", publicName: "matStyle", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, reportFormat: { classPropertyName: "reportFormat", publicName: "reportFormat", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { handleClick: "handleClick" }, ngImport: i0, template: "@switch (matStyle()) { @case ('text') {\n<button\n matButton\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('elevated') {\n<button\n matButton=\"elevated\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('outlined') {\n<button\n matButton=\"outlined\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('tonal') {\n<button\n matButton=\"tonal\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('icon') {\n<button\n matIconButton\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('fab') {\n<button\n matFab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('mini-fab') {\n<button\n matMiniFab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('extended-fab') {\n<button\n matFab\n extended\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @default {\n<button\n matButton=\"filled\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n>\n <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} }\n\n<ng-template #buttonContent>\n @if (getIcon()) {\n <mat-icon>{{ getIcon() }}</mat-icon>\n } @if (getDisplayText()) { {{ getDisplayText() }} }\n\n <ng-content />\n</ng-template>\n", styles: [":root{--acp-secondary: #e0e0e0;--acp-secondary-on: #000000;--acp-success: #4caf50;--acp-success-on: #ffffff;--acp-danger: #ba1a1a;--acp-danger-on: #ffffff;--acp-warning: #ff9800;--acp-warning-on: #000000;--acp-info: #2196f3;--acp-info-on: #ffffff;--acp-dark: #212121;--acp-dark-on: #ffffff}.dark-theme{--acp-secondary: #424242;--acp-secondary-on: #ffffff;--acp-success: #81c784;--acp-success-on: #1b5e20;--acp-danger: #ef5350;--acp-danger-on: #b71c1c;--acp-warning: #ffb74d;--acp-warning-on: #e65100;--acp-info: #64b5f6;--acp-info-on: #0d47a1;--acp-dark: #616161;--acp-dark-on: #ffffff}acp-button{display:inline-block}.mat-mdc-button .mdc-button__label,.mat-mdc-unelevated-button .mdc-button__label,.mat-mdc-raised-button .mdc-button__label,.mat-mdc-outlined-button .mdc-button__label,button[matbutton=tonal] .mdc-button__label,.mat-mdc-fab.mdc-fab--extended .mdc-button__label{display:flex;align-items:center;gap:8px}.mat-mdc-button.mat-btn-secondary,.mat-mdc-unelevated-button.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-button.mat-btn-secondary:hover,.mat-mdc-unelevated-button.mat-btn-secondary:hover{background-color:color-mix(in srgb,var(--acp-secondary) 80%,black)!important}.mat-mdc-button.mat-btn-success,.mat-mdc-unelevated-button.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-button.mat-btn-danger,.mat-mdc-unelevated-button.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-button.mat-btn-warning,.mat-mdc-unelevated-button.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-button.mat-btn-info,.mat-mdc-unelevated-button.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-button.mat-btn-dark,.mat-mdc-unelevated-button.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}button[matbutton=tonal].mat-btn-success{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important;color:var(--acp-success)!important}button[matbutton=tonal].mat-btn-danger{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important;color:var(--acp-danger)!important}button[matbutton=tonal].mat-btn-warning{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important;color:var(--acp-warning)!important}button[matbutton=tonal].mat-btn-info{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important;color:var(--acp-info)!important}button[matbutton=tonal].mat-btn-dark{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important;color:var(--acp-dark)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-success{color:var(--acp-success)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-info{color:var(--acp-info)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-dark{color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-secondary{background-color:var(--mat-sys-surface-container-low)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-raised-button.mat-btn-success{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-success)!important}.mat-mdc-raised-button.mat-btn-success:hover{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-danger{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-danger)!important}.mat-mdc-raised-button.mat-btn-danger:hover{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-warning{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-warning)!important}.mat-mdc-raised-button.mat-btn-warning:hover{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-info{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-info)!important}.mat-mdc-raised-button.mat-btn-info:hover{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-dark{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-dark:hover{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important}.mat-mdc-outlined-button.mat-btn-secondary{border-color:var(--mat-sys-outline)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-outlined-button.mat-btn-success{border-color:var(--acp-success)!important;color:var(--acp-success)!important}.mat-mdc-outlined-button.mat-btn-danger{border-color:var(--acp-danger)!important;color:var(--acp-danger)!important}.mat-mdc-outlined-button.mat-btn-warning{border-color:var(--acp-warning)!important;color:var(--acp-warning)!important}.mat-mdc-outlined-button.mat-btn-info{border-color:var(--acp-info)!important;color:var(--acp-info)!important}.mat-mdc-outlined-button.mat-btn-dark{border-color:var(--acp-dark)!important;color:var(--acp-dark)!important}.mat-mdc-fab.mat-btn-secondary,.mat-mdc-mini-fab.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-fab.mat-btn-success,.mat-mdc-mini-fab.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-fab.mat-btn-danger,.mat-mdc-mini-fab.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-fab.mat-btn-warning,.mat-mdc-mini-fab.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-fab.mat-btn-info,.mat-mdc-mini-fab.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-fab.mat-btn-dark,.mat-mdc-mini-fab.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}.mat-mdc-icon-button.mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-icon-button.mat-btn-success{color:var(--acp-success)!important}.mat-mdc-icon-button.mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-icon-button.mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-icon-button.mat-btn-info{color:var(--acp-info)!important}.mat-mdc-icon-button.mat-btn-dark{color:var(--acp-dark)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
|
|
620
620
|
}
|
|
621
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
621
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Button, decorators: [{
|
|
622
622
|
type: Component,
|
|
623
623
|
args: [{ selector: 'acp-button', imports: [
|
|
624
624
|
MatButton,
|
|
@@ -668,10 +668,10 @@ class BaseButton {
|
|
|
668
668
|
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
669
669
|
pointerEvents = computed(() => (this.isDisabled() ? 'none' : 'auto'), /* @ts-ignore */
|
|
670
670
|
...(ngDevMode ? [{ debugName: "pointerEvents" }] : /* istanbul ignore next */ []));
|
|
671
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
672
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0
|
|
671
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: BaseButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
672
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: BaseButton, isStandalone: true, inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", focused: "focused", blurred: "blurred" }, host: { properties: { "style.pointer-events": "pointerEvents()" } }, ngImport: i0 });
|
|
673
673
|
}
|
|
674
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
674
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: BaseButton, decorators: [{
|
|
675
675
|
type: Directive,
|
|
676
676
|
args: [{
|
|
677
677
|
host: {
|
|
@@ -729,10 +729,10 @@ class ButtonLoaderDirective {
|
|
|
729
729
|
this.spinner?.destroy();
|
|
730
730
|
this.spinner = null;
|
|
731
731
|
}
|
|
732
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
733
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0
|
|
732
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ButtonLoaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
733
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: ButtonLoaderDirective, isStandalone: true, selector: "button[acpLoading]", inputs: { acpLoading: { classPropertyName: "acpLoading", publicName: "acpLoading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
734
734
|
}
|
|
735
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
735
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ButtonLoaderDirective, decorators: [{
|
|
736
736
|
type: Directive,
|
|
737
737
|
args: [{
|
|
738
738
|
selector: 'button[acpLoading]',
|
|
@@ -740,10 +740,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
|
|
|
740
740
|
}], ctorParameters: () => [], propDecorators: { acpLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "acpLoading", required: false }] }] } });
|
|
741
741
|
|
|
742
742
|
class AcpButton extends BaseButton {
|
|
743
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
744
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpButton, isStandalone: true, selector: "acp-button", usesInheritance: true, ngImport: i0, template: "@if (variant() === 'icon') {\n<button\n matIconButton\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), squareClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else if (variant() === 'fab') {\n<button\n matFab\n [extended]=\"extended()\"\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (extended()) { @if (hasText()) { {{text()}} }\n @else { <ng-content></ng-content> } }\n</button>\n} @else if (variant() === 'mini-fab') {\n<button\n matMiniFab\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else {\n<button\n [matButton]=\"appearance()\"\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), squareClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (hasText()) { {{text()}} } @else {\n <ng-content></ng-content> } @if (suffixIcon()) {\n <mat-icon iconPositionEnd>{{suffixIcon()}}</mat-icon> }\n</button>\n}\n", styles: [".acp-primary{--mat-button-filled-container-color: var(--theme-primary-color);--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: var(--theme-primary-color);--mat-button-protected-label-text-color: var(--theme-primary-color);--mat-button-text-label-text-color: var(--theme-primary-color);--mat-button-text-state-layer-color: var(--theme-primary-color)}.acp-secondary{--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary)}.acp-accent{--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary)}.acp-error{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-protected-label-text-color: var(--mat-sys-error);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error)}.acp-success{--mat-button-filled-container-color: #4caf50;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #4caf50;--mat-button-protected-label-text-color: #4caf50;--mat-button-text-label-text-color: #4caf50;--mat-button-text-state-layer-color: #4caf50}.acp-warning{--mat-button-filled-container-color: #f59e0b;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #f59e0b;--mat-button-protected-label-text-color: #f59e0b;--mat-button-text-label-text-color: #f59e0b;--mat-button-text-state-layer-color: #f59e0b}.acp-info{--mat-button-filled-container-color: #3b82f6;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #3b82f6;--mat-button-protected-label-text-color: #3b82f6;--mat-button-text-label-text-color: #3b82f6;--mat-button-text-state-layer-color: #3b82f6}.acp-dark{--mat-button-filled-container-color: #1f2937;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #1f2937;--mat-button-protected-label-text-color: #1f2937;--mat-button-text-label-text-color: #1f2937;--mat-button-text-state-layer-color: #1f2937}[matIconButton].acp-primary{--mat-icon-color: var(--theme-primary-color)}[matIconButton].acp-secondary{--mat-icon-color: var(--mat-sys-secondary)}[matIconButton].acp-accent{--mat-icon-color: var(--mat-sys-tertiary)}[matIconButton].acp-error{--mat-icon-color: var(--mat-sys-error)}[matIconButton].acp-success{--mat-icon-color: #10b981}[matIconButton].acp-warning{--mat-icon-color: #f59e0b}[matIconButton].acp-info{--mat-icon-color: #3b82f6}[matIconButton].acp-dark{--mat-icon-color: #1f2937}.acp-square{--mat-button-filled-container-shape: 8px;--mat-button-outlined-container-shape: 8px;--mat-button-protected-container-shape: 8px;--mat-button-text-container-shape: 8px;--mat-button-tonal-container-shape: 8px;--mat-icon-button-container-shape: 8px}.acp-medium{--mat-checkbox-touch-target-display: block;--mat-checkbox-state-layer-size: 36px;--mat-chip-container-height: 28px;--mat-expansion-header-collapsed-state-height: 44px;--mat-expansion-header-expanded-state-height: 60px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: block;--mat-button-filled-touch-target-display: block;--mat-button-filled-container-height: 36px;--mat-button-outlined-container-height: 36px;--mat-button-outlined-touch-target-display: block;--mat-button-protected-touch-target-display: block;--mat-button-protected-container-height: 36px;--mat-button-text-touch-target-display: block;--mat-button-text-container-height: 36px;--mat-button-tonal-container-height: 36px;--mat-button-tonal-touch-target-display: block;--mat-form-field-container-height: 52px;--mat-form-field-filled-label-display: block;--mat-form-field-container-vertical-padding: 14px;--mat-form-field-filled-with-label-container-padding-top: 22px;--mat-form-field-filled-with-label-container-padding-bottom: 6px;--mat-icon-button-touch-target-display: block;--mat-icon-button-state-layer-size: 36px;--mat-list-list-item-leading-icon-start-space: 12px;--mat-list-list-item-leading-icon-end-space: 12px;--mat-list-list-item-one-line-container-height: 44px;--mat-list-list-item-two-line-container-height: 60px;--mat-list-list-item-three-line-container-height: 84px;--mat-paginator-container-size: 52px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: block;--mat-radio-touch-target-display: block;--mat-radio-state-layer-size: 36px;--mat-tab-container-height: 44px;--mat-select-arrow-transform: translateY(-8px);--mat-button-toggle-height: 40px;--mat-stepper-header-height: 68px;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-toolbar-standard-height: 60px;--mat-toolbar-mobile-height: 52px;--mat-tree-node-min-height: 44px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 20px;--mat-button-outlined-horizontal-padding: 20px;--mat-button-protected-horizontal-padding: 20px;--mat-button-text-horizontal-padding: 20px;--mat-button-tonal-horizontal-padding: 20px;--mat-button-toggle-height: 36px}.acp-small{--mat-checkbox-touch-target-display: none;--mat-checkbox-state-layer-size: 32px;--mat-chip-container-height: 24px;--mat-expansion-header-collapsed-state-height: 40px;--mat-expansion-header-expanded-state-height: 56px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: none;--mat-button-filled-touch-target-display: none;--mat-button-filled-container-height: 32px;--mat-button-outlined-container-height: 32px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-touch-target-display: none;--mat-button-protected-container-height: 32px;--mat-button-text-touch-target-display: none;--mat-button-text-container-height: 32px;--mat-button-tonal-container-height: 32px;--mat-button-tonal-touch-target-display: none;--mat-form-field-container-height: 48px;--mat-form-field-filled-label-display: none;--mat-form-field-container-vertical-padding: 12px;--mat-form-field-filled-with-label-container-padding-top: 12px;--mat-form-field-filled-with-label-container-padding-bottom: 12px;--mat-icon-button-touch-target-display: none;--mat-icon-button-state-layer-size: 32px;--mat-list-list-item-leading-icon-start-space: 8px;--mat-list-list-item-leading-icon-end-space: 8px;--mat-list-list-item-one-line-container-height: 40px;--mat-list-list-item-two-line-container-height: 56px;--mat-list-list-item-three-line-container-height: 80px;--mat-paginator-container-size: 48px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: none;--mat-radio-touch-target-display: none;--mat-radio-state-layer-size: 32px;--mat-tab-container-height: 40px;--mat-select-arrow-transform: none;--mat-button-toggle-height: 40px;--mat-stepper-header-height: 64px;--mat-table-header-container-height: 48px;--mat-table-footer-container-height: 44px;--mat-table-row-item-container-height: 44px;--mat-toolbar-standard-height: 56px;--mat-toolbar-mobile-height: 48px;--mat-tree-node-min-height: 40px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 16px;--mat-button-outlined-horizontal-padding: 16px;--mat-button-protected-horizontal-padding: 16px;--mat-button-text-horizontal-padding: 16px;--mat-button-tonal-horizontal-padding: 16px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ButtonLoaderDirective, selector: "button[acpLoading]", inputs: ["acpLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
743
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpButton, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
744
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpButton, isStandalone: true, selector: "acp-button", usesInheritance: true, ngImport: i0, template: "@if (variant() === 'icon') {\n<button\n matIconButton\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), squareClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else if (variant() === 'fab') {\n<button\n matFab\n [extended]=\"extended()\"\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (extended()) { @if (hasText()) { {{text()}} }\n @else { <ng-content></ng-content> } }\n</button>\n} @else if (variant() === 'mini-fab') {\n<button\n matMiniFab\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else {\n<button\n [matButton]=\"appearance()\"\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), squareClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (hasText()) { {{text()}} } @else {\n <ng-content></ng-content> } @if (suffixIcon()) {\n <mat-icon iconPositionEnd>{{suffixIcon()}}</mat-icon> }\n</button>\n}\n", styles: [".acp-primary{--mat-button-filled-container-color: var(--theme-primary-color);--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: var(--theme-primary-color);--mat-button-protected-label-text-color: var(--theme-primary-color);--mat-button-text-label-text-color: var(--theme-primary-color);--mat-button-text-state-layer-color: var(--theme-primary-color)}.acp-secondary{--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary)}.acp-accent{--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary)}.acp-error{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-protected-label-text-color: var(--mat-sys-error);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error)}.acp-success{--mat-button-filled-container-color: #4caf50;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #4caf50;--mat-button-protected-label-text-color: #4caf50;--mat-button-text-label-text-color: #4caf50;--mat-button-text-state-layer-color: #4caf50}.acp-warning{--mat-button-filled-container-color: #f59e0b;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #f59e0b;--mat-button-protected-label-text-color: #f59e0b;--mat-button-text-label-text-color: #f59e0b;--mat-button-text-state-layer-color: #f59e0b}.acp-info{--mat-button-filled-container-color: #3b82f6;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #3b82f6;--mat-button-protected-label-text-color: #3b82f6;--mat-button-text-label-text-color: #3b82f6;--mat-button-text-state-layer-color: #3b82f6}.acp-dark{--mat-button-filled-container-color: #1f2937;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #1f2937;--mat-button-protected-label-text-color: #1f2937;--mat-button-text-label-text-color: #1f2937;--mat-button-text-state-layer-color: #1f2937}[matIconButton].acp-primary{--mat-icon-color: var(--theme-primary-color)}[matIconButton].acp-secondary{--mat-icon-color: var(--mat-sys-secondary)}[matIconButton].acp-accent{--mat-icon-color: var(--mat-sys-tertiary)}[matIconButton].acp-error{--mat-icon-color: var(--mat-sys-error)}[matIconButton].acp-success{--mat-icon-color: #10b981}[matIconButton].acp-warning{--mat-icon-color: #f59e0b}[matIconButton].acp-info{--mat-icon-color: #3b82f6}[matIconButton].acp-dark{--mat-icon-color: #1f2937}.acp-square{--mat-button-filled-container-shape: 8px;--mat-button-outlined-container-shape: 8px;--mat-button-protected-container-shape: 8px;--mat-button-text-container-shape: 8px;--mat-button-tonal-container-shape: 8px;--mat-icon-button-container-shape: 8px}.acp-medium{--mat-checkbox-touch-target-display: block;--mat-checkbox-state-layer-size: 36px;--mat-chip-container-height: 28px;--mat-expansion-header-collapsed-state-height: 44px;--mat-expansion-header-expanded-state-height: 60px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: block;--mat-button-filled-touch-target-display: block;--mat-button-filled-container-height: 36px;--mat-button-outlined-container-height: 36px;--mat-button-outlined-touch-target-display: block;--mat-button-protected-touch-target-display: block;--mat-button-protected-container-height: 36px;--mat-button-text-touch-target-display: block;--mat-button-text-container-height: 36px;--mat-button-tonal-container-height: 36px;--mat-button-tonal-touch-target-display: block;--mat-form-field-container-height: 52px;--mat-form-field-filled-label-display: block;--mat-form-field-container-vertical-padding: 14px;--mat-form-field-filled-with-label-container-padding-top: 22px;--mat-form-field-filled-with-label-container-padding-bottom: 6px;--mat-icon-button-touch-target-display: block;--mat-icon-button-state-layer-size: 36px;--mat-list-list-item-leading-icon-start-space: 12px;--mat-list-list-item-leading-icon-end-space: 12px;--mat-list-list-item-one-line-container-height: 44px;--mat-list-list-item-two-line-container-height: 60px;--mat-list-list-item-three-line-container-height: 84px;--mat-paginator-container-size: 52px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: block;--mat-radio-touch-target-display: block;--mat-radio-state-layer-size: 36px;--mat-tab-container-height: 44px;--mat-select-arrow-transform: translateY(-8px);--mat-button-toggle-height: 40px;--mat-stepper-header-height: 68px;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-toolbar-standard-height: 60px;--mat-toolbar-mobile-height: 52px;--mat-tree-node-min-height: 44px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 20px;--mat-button-outlined-horizontal-padding: 20px;--mat-button-protected-horizontal-padding: 20px;--mat-button-text-horizontal-padding: 20px;--mat-button-tonal-horizontal-padding: 20px;--mat-button-toggle-height: 36px}.acp-small{--mat-checkbox-touch-target-display: none;--mat-checkbox-state-layer-size: 32px;--mat-chip-container-height: 24px;--mat-expansion-header-collapsed-state-height: 40px;--mat-expansion-header-expanded-state-height: 56px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: none;--mat-button-filled-touch-target-display: none;--mat-button-filled-container-height: 32px;--mat-button-outlined-container-height: 32px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-touch-target-display: none;--mat-button-protected-container-height: 32px;--mat-button-text-touch-target-display: none;--mat-button-text-container-height: 32px;--mat-button-tonal-container-height: 32px;--mat-button-tonal-touch-target-display: none;--mat-form-field-container-height: 48px;--mat-form-field-filled-label-display: none;--mat-form-field-container-vertical-padding: 12px;--mat-form-field-filled-with-label-container-padding-top: 12px;--mat-form-field-filled-with-label-container-padding-bottom: 12px;--mat-icon-button-touch-target-display: none;--mat-icon-button-state-layer-size: 32px;--mat-list-list-item-leading-icon-start-space: 8px;--mat-list-list-item-leading-icon-end-space: 8px;--mat-list-list-item-one-line-container-height: 40px;--mat-list-list-item-two-line-container-height: 56px;--mat-list-list-item-three-line-container-height: 80px;--mat-paginator-container-size: 48px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: none;--mat-radio-touch-target-display: none;--mat-radio-state-layer-size: 32px;--mat-tab-container-height: 40px;--mat-select-arrow-transform: none;--mat-button-toggle-height: 40px;--mat-stepper-header-height: 64px;--mat-table-header-container-height: 48px;--mat-table-footer-container-height: 44px;--mat-table-row-item-container-height: 44px;--mat-toolbar-standard-height: 56px;--mat-toolbar-mobile-height: 48px;--mat-tree-node-min-height: 40px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 16px;--mat-button-outlined-horizontal-padding: 16px;--mat-button-protected-horizontal-padding: 16px;--mat-button-text-horizontal-padding: 16px;--mat-button-tonal-horizontal-padding: 16px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ButtonLoaderDirective, selector: "button[acpLoading]", inputs: ["acpLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
745
745
|
}
|
|
746
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
746
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpButton, decorators: [{
|
|
747
747
|
type: Component,
|
|
748
748
|
args: [{ selector: 'acp-button', imports: [NgClass, MatButtonModule, MatIconModule, ButtonLoaderDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (variant() === 'icon') {\n<button\n matIconButton\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), squareClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else if (variant() === 'fab') {\n<button\n matFab\n [extended]=\"extended()\"\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (extended()) { @if (hasText()) { {{text()}} }\n @else { <ng-content></ng-content> } }\n</button>\n} @else if (variant() === 'mini-fab') {\n<button\n matMiniFab\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else {\n<button\n [matButton]=\"appearance()\"\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), squareClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (hasText()) { {{text()}} } @else {\n <ng-content></ng-content> } @if (suffixIcon()) {\n <mat-icon iconPositionEnd>{{suffixIcon()}}</mat-icon> }\n</button>\n}\n", styles: [".acp-primary{--mat-button-filled-container-color: var(--theme-primary-color);--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: var(--theme-primary-color);--mat-button-protected-label-text-color: var(--theme-primary-color);--mat-button-text-label-text-color: var(--theme-primary-color);--mat-button-text-state-layer-color: var(--theme-primary-color)}.acp-secondary{--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary)}.acp-accent{--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary)}.acp-error{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-protected-label-text-color: var(--mat-sys-error);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error)}.acp-success{--mat-button-filled-container-color: #4caf50;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #4caf50;--mat-button-protected-label-text-color: #4caf50;--mat-button-text-label-text-color: #4caf50;--mat-button-text-state-layer-color: #4caf50}.acp-warning{--mat-button-filled-container-color: #f59e0b;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #f59e0b;--mat-button-protected-label-text-color: #f59e0b;--mat-button-text-label-text-color: #f59e0b;--mat-button-text-state-layer-color: #f59e0b}.acp-info{--mat-button-filled-container-color: #3b82f6;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #3b82f6;--mat-button-protected-label-text-color: #3b82f6;--mat-button-text-label-text-color: #3b82f6;--mat-button-text-state-layer-color: #3b82f6}.acp-dark{--mat-button-filled-container-color: #1f2937;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #1f2937;--mat-button-protected-label-text-color: #1f2937;--mat-button-text-label-text-color: #1f2937;--mat-button-text-state-layer-color: #1f2937}[matIconButton].acp-primary{--mat-icon-color: var(--theme-primary-color)}[matIconButton].acp-secondary{--mat-icon-color: var(--mat-sys-secondary)}[matIconButton].acp-accent{--mat-icon-color: var(--mat-sys-tertiary)}[matIconButton].acp-error{--mat-icon-color: var(--mat-sys-error)}[matIconButton].acp-success{--mat-icon-color: #10b981}[matIconButton].acp-warning{--mat-icon-color: #f59e0b}[matIconButton].acp-info{--mat-icon-color: #3b82f6}[matIconButton].acp-dark{--mat-icon-color: #1f2937}.acp-square{--mat-button-filled-container-shape: 8px;--mat-button-outlined-container-shape: 8px;--mat-button-protected-container-shape: 8px;--mat-button-text-container-shape: 8px;--mat-button-tonal-container-shape: 8px;--mat-icon-button-container-shape: 8px}.acp-medium{--mat-checkbox-touch-target-display: block;--mat-checkbox-state-layer-size: 36px;--mat-chip-container-height: 28px;--mat-expansion-header-collapsed-state-height: 44px;--mat-expansion-header-expanded-state-height: 60px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: block;--mat-button-filled-touch-target-display: block;--mat-button-filled-container-height: 36px;--mat-button-outlined-container-height: 36px;--mat-button-outlined-touch-target-display: block;--mat-button-protected-touch-target-display: block;--mat-button-protected-container-height: 36px;--mat-button-text-touch-target-display: block;--mat-button-text-container-height: 36px;--mat-button-tonal-container-height: 36px;--mat-button-tonal-touch-target-display: block;--mat-form-field-container-height: 52px;--mat-form-field-filled-label-display: block;--mat-form-field-container-vertical-padding: 14px;--mat-form-field-filled-with-label-container-padding-top: 22px;--mat-form-field-filled-with-label-container-padding-bottom: 6px;--mat-icon-button-touch-target-display: block;--mat-icon-button-state-layer-size: 36px;--mat-list-list-item-leading-icon-start-space: 12px;--mat-list-list-item-leading-icon-end-space: 12px;--mat-list-list-item-one-line-container-height: 44px;--mat-list-list-item-two-line-container-height: 60px;--mat-list-list-item-three-line-container-height: 84px;--mat-paginator-container-size: 52px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: block;--mat-radio-touch-target-display: block;--mat-radio-state-layer-size: 36px;--mat-tab-container-height: 44px;--mat-select-arrow-transform: translateY(-8px);--mat-button-toggle-height: 40px;--mat-stepper-header-height: 68px;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-toolbar-standard-height: 60px;--mat-toolbar-mobile-height: 52px;--mat-tree-node-min-height: 44px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 20px;--mat-button-outlined-horizontal-padding: 20px;--mat-button-protected-horizontal-padding: 20px;--mat-button-text-horizontal-padding: 20px;--mat-button-tonal-horizontal-padding: 20px;--mat-button-toggle-height: 36px}.acp-small{--mat-checkbox-touch-target-display: none;--mat-checkbox-state-layer-size: 32px;--mat-chip-container-height: 24px;--mat-expansion-header-collapsed-state-height: 40px;--mat-expansion-header-expanded-state-height: 56px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: none;--mat-button-filled-touch-target-display: none;--mat-button-filled-container-height: 32px;--mat-button-outlined-container-height: 32px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-touch-target-display: none;--mat-button-protected-container-height: 32px;--mat-button-text-touch-target-display: none;--mat-button-text-container-height: 32px;--mat-button-tonal-container-height: 32px;--mat-button-tonal-touch-target-display: none;--mat-form-field-container-height: 48px;--mat-form-field-filled-label-display: none;--mat-form-field-container-vertical-padding: 12px;--mat-form-field-filled-with-label-container-padding-top: 12px;--mat-form-field-filled-with-label-container-padding-bottom: 12px;--mat-icon-button-touch-target-display: none;--mat-icon-button-state-layer-size: 32px;--mat-list-list-item-leading-icon-start-space: 8px;--mat-list-list-item-leading-icon-end-space: 8px;--mat-list-list-item-one-line-container-height: 40px;--mat-list-list-item-two-line-container-height: 56px;--mat-list-list-item-three-line-container-height: 80px;--mat-paginator-container-size: 48px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: none;--mat-radio-touch-target-display: none;--mat-radio-state-layer-size: 32px;--mat-tab-container-height: 40px;--mat-select-arrow-transform: none;--mat-button-toggle-height: 40px;--mat-stepper-header-height: 64px;--mat-table-header-container-height: 48px;--mat-table-footer-container-height: 44px;--mat-table-row-item-container-height: 44px;--mat-toolbar-standard-height: 56px;--mat-toolbar-mobile-height: 48px;--mat-tree-node-min-height: 40px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 16px;--mat-button-outlined-horizontal-padding: 16px;--mat-button-protected-horizontal-padding: 16px;--mat-button-text-horizontal-padding: 16px;--mat-button-tonal-horizontal-padding: 16px}\n"] }]
|
|
749
749
|
}] });
|
|
@@ -868,10 +868,10 @@ class DialogZIndexService {
|
|
|
868
868
|
}
|
|
869
869
|
}, 0);
|
|
870
870
|
}
|
|
871
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
872
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
871
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogZIndexService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
872
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogZIndexService, providedIn: 'root' });
|
|
873
873
|
}
|
|
874
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
874
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogZIndexService, decorators: [{
|
|
875
875
|
type: Injectable,
|
|
876
876
|
args: [{
|
|
877
877
|
providedIn: 'root',
|
|
@@ -892,9 +892,7 @@ class DialogWrapper {
|
|
|
892
892
|
* A template reference that acts as an anchor for dynamic content.
|
|
893
893
|
* This is where the component specified in the config will be rendered.
|
|
894
894
|
*/
|
|
895
|
-
contentHost = viewChild.required('contentHost', {
|
|
896
|
-
read: ViewContainerRef,
|
|
897
|
-
});
|
|
895
|
+
contentHost = viewChild.required('contentHost', { ...(ngDevMode ? { debugName: "contentHost" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
|
|
898
896
|
/**
|
|
899
897
|
* A reference to the header element for the z-index focus logic.
|
|
900
898
|
* Used to bring the dialog to the front when clicked.
|
|
@@ -955,10 +953,10 @@ class DialogWrapper {
|
|
|
955
953
|
this.zIndexService.bringToFront(headerElement);
|
|
956
954
|
}
|
|
957
955
|
}
|
|
958
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
959
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0
|
|
956
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
957
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DialogWrapper, isStandalone: true, selector: "acp-dialog-wrapper", viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "header", first: true, predicate: ["dialogHeader"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!config.hideHeader) {\n<div\n class=\"acp-dialog-header\"\n cdkDrag\n cdkDragRootElement=\".cdk-overlay-pane\"\n cdkDragHandle\n #dialogHeader\n (mousedown)=\"bringToFront()\"\n>\n <h6 mat-dialog-title class=\"acp-dialog-title\">\n @if (config.icon) {\n <mat-icon class=\"acp-dialog-title-icon\" aria-hidden=\"true\">{{ config.icon }}</mat-icon>\n }\n <span>{{ config.title }}</span>\n @if (config.showCloseButton !== false) {\n <acp-button\n [customClass]=\"'acp-dialog-close-btn'\"\n matStyle=\"icon\"\n icon=\"close\"\n (handleClick)=\"onClose()\"\n ariaLabel=\"Close Dialog\"\n />\n }\n </h6>\n</div>\n}\n\n<ng-template #contentHost />\n", styles: [".acp-dialog-header{cursor:move;border-bottom:1px solid var(--mat-sys-outline-variant, #dee2e6);color:var(--mat-sys-on-surface, #212529);position:relative}h6[mat-dialog-title].acp-dialog-title{display:flex;align-items:center;font-size:1.2rem;font-weight:500;margin:0;width:100%;padding-right:48px}.acp-dialog-title-icon{margin-right:12px;vertical-align:middle}h6[mat-dialog-title].acp-dialog-title span{flex-grow:1}mat-dialog-content{padding:24px}.acp-dialog-close-btn{position:absolute;top:8px;right:16px}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: Button, selector: "acp-button", inputs: ["variant", "text", "icon", "disabled", "type", "matStyle", "customClass", "reportFormat", "extended", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
960
958
|
}
|
|
961
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
959
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogWrapper, decorators: [{
|
|
962
960
|
type: Component,
|
|
963
961
|
args: [{ selector: 'acp-dialog-wrapper', standalone: true, imports: [CdkDrag, CdkDragHandle, MatDialogModule, MatIconModule, Button], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (!config.hideHeader) {\n<div\n class=\"acp-dialog-header\"\n cdkDrag\n cdkDragRootElement=\".cdk-overlay-pane\"\n cdkDragHandle\n #dialogHeader\n (mousedown)=\"bringToFront()\"\n>\n <h6 mat-dialog-title class=\"acp-dialog-title\">\n @if (config.icon) {\n <mat-icon class=\"acp-dialog-title-icon\" aria-hidden=\"true\">{{ config.icon }}</mat-icon>\n }\n <span>{{ config.title }}</span>\n @if (config.showCloseButton !== false) {\n <acp-button\n [customClass]=\"'acp-dialog-close-btn'\"\n matStyle=\"icon\"\n icon=\"close\"\n (handleClick)=\"onClose()\"\n ariaLabel=\"Close Dialog\"\n />\n }\n </h6>\n</div>\n}\n\n<ng-template #contentHost />\n", styles: [".acp-dialog-header{cursor:move;border-bottom:1px solid var(--mat-sys-outline-variant, #dee2e6);color:var(--mat-sys-on-surface, #212529);position:relative}h6[mat-dialog-title].acp-dialog-title{display:flex;align-items:center;font-size:1.2rem;font-weight:500;margin:0;width:100%;padding-right:48px}.acp-dialog-title-icon{margin-right:12px;vertical-align:middle}h6[mat-dialog-title].acp-dialog-title span{flex-grow:1}mat-dialog-content{padding:24px}.acp-dialog-close-btn{position:absolute;top:8px;right:16px}\n"] }]
|
|
964
962
|
}], ctorParameters: () => [], propDecorators: { contentHost: [{ type: i0.ViewChild, args: ['contentHost', { ...{
|
|
@@ -1068,10 +1066,10 @@ class DynamicSelect {
|
|
|
1068
1066
|
this._onDestroy.next();
|
|
1069
1067
|
this._onDestroy.complete();
|
|
1070
1068
|
}
|
|
1071
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
1072
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0
|
|
1069
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DynamicSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1070
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: DynamicSelect, isStandalone: true, selector: "acp-dynamic-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, hideSelected: { classPropertyName: "hideSelected", publicName: "hideSelected", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectOnTab: { classPropertyName: "selectOnTab", publicName: "selectOnTab", isSignal: true, isRequired: false, transformFunction: null }, openOnEnter: { classPropertyName: "openOnEnter", publicName: "openOnEnter", isSignal: true, isRequired: false, transformFunction: null }, selectableGroup: { classPropertyName: "selectableGroup", publicName: "selectableGroup", isSignal: true, isRequired: false, transformFunction: null }, selectableGroupAsModel: { classPropertyName: "selectableGroupAsModel", publicName: "selectableGroupAsModel", isSignal: true, isRequired: false, transformFunction: null }, clearOnBackspace: { classPropertyName: "clearOnBackspace", publicName: "clearOnBackspace", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, searchWhileComposing: { classPropertyName: "searchWhileComposing", publicName: "searchWhileComposing", isSignal: true, isRequired: false, transformFunction: null }, minTermLength: { classPropertyName: "minTermLength", publicName: "minTermLength", isSignal: true, isRequired: false, transformFunction: null }, editableSearchTerm: { classPropertyName: "editableSearchTerm", publicName: "editableSearchTerm", isSignal: true, isRequired: false, transformFunction: null }, typeToSearchText: { classPropertyName: "typeToSearchText", publicName: "typeToSearchText", isSignal: true, isRequired: false, transformFunction: null }, addTagText: { classPropertyName: "addTagText", publicName: "addTagText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAllText: { classPropertyName: "clearAllText", publicName: "clearAllText", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<ng-select\n [items]=\"filteredOptions\"\n bindLabel=\"viewValue\"\n bindValue=\"value\"\n [searchable]=\"searchable()\"\n [clearable]=\"clearable()\"\n [formControl]=\"selectControl\"\n [placeholder]=\"placeholder() || label()\"\n [loading]=\"loading\"\n [virtualScroll]=\"virtualScroll()\"\n [dropdownPosition]=\"dropdownPosition()\"\n [closeOnSelect]=\"closeOnSelect()\"\n [hideSelected]=\"hideSelected()\"\n [multiple]=\"multiple()\"\n [selectOnTab]=\"selectOnTab()\"\n [openOnEnter]=\"openOnEnter()\"\n [selectableGroup]=\"selectableGroup()\"\n [selectableGroupAsModel]=\"selectableGroupAsModel()\"\n [clearOnBackspace]=\"clearOnBackspace()\"\n [readonly]=\"readonly()\"\n [searchWhileComposing]=\"searchWhileComposing()\"\n [minTermLength]=\"minTermLength()\"\n [editableSearchTerm]=\"editableSearchTerm()\"\n [typeToSearchText]=\"typeToSearchText()\"\n [addTagText]=\"addTagText()\"\n [loadingText]=\"loadingText()\"\n [clearAllText]=\"clearAllText()\"\n [notFoundText]=\"notFoundText()\"\n (change)=\"onSelectionChange($event)\"\n [ngClass]=\"className()\"\n/>\n", dependencies: [{ kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i1$3.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "removeText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "clearKeepsDisabledOptions", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "popover", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1073
1071
|
}
|
|
1074
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1072
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DynamicSelect, decorators: [{
|
|
1075
1073
|
type: Component,
|
|
1076
1074
|
args: [{ selector: 'acp-dynamic-select', imports: [NgSelectModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-select\n [items]=\"filteredOptions\"\n bindLabel=\"viewValue\"\n bindValue=\"value\"\n [searchable]=\"searchable()\"\n [clearable]=\"clearable()\"\n [formControl]=\"selectControl\"\n [placeholder]=\"placeholder() || label()\"\n [loading]=\"loading\"\n [virtualScroll]=\"virtualScroll()\"\n [dropdownPosition]=\"dropdownPosition()\"\n [closeOnSelect]=\"closeOnSelect()\"\n [hideSelected]=\"hideSelected()\"\n [multiple]=\"multiple()\"\n [selectOnTab]=\"selectOnTab()\"\n [openOnEnter]=\"openOnEnter()\"\n [selectableGroup]=\"selectableGroup()\"\n [selectableGroupAsModel]=\"selectableGroupAsModel()\"\n [clearOnBackspace]=\"clearOnBackspace()\"\n [readonly]=\"readonly()\"\n [searchWhileComposing]=\"searchWhileComposing()\"\n [minTermLength]=\"minTermLength()\"\n [editableSearchTerm]=\"editableSearchTerm()\"\n [typeToSearchText]=\"typeToSearchText()\"\n [addTagText]=\"addTagText()\"\n [loadingText]=\"loadingText()\"\n [clearAllText]=\"clearAllText()\"\n [notFoundText]=\"notFoundText()\"\n (change)=\"onSelectionChange($event)\"\n [ngClass]=\"className()\"\n/>\n" }]
|
|
1077
1075
|
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], dropdownPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownPosition", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], hideSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSelected", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], selectOnTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOnTab", required: false }] }], openOnEnter: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnEnter", required: false }] }], selectableGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableGroup", required: false }] }], selectableGroupAsModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableGroupAsModel", required: false }] }], clearOnBackspace: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearOnBackspace", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], searchWhileComposing: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchWhileComposing", required: false }] }], minTermLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTermLength", required: false }] }], editableSearchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "editableSearchTerm", required: false }] }], typeToSearchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeToSearchText", required: false }] }], addTagText: [{ type: i0.Input, args: [{ isSignal: true, alias: "addTagText", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], clearAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAllText", required: false }] }], notFoundText: [{ type: i0.Input, args: [{ isSignal: true, alias: "notFoundText", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
|
|
@@ -1079,10 +1077,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
|
|
|
1079
1077
|
class UserIcon {
|
|
1080
1078
|
size = input('35', /* @ts-ignore */
|
|
1081
1079
|
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1082
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
1083
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0
|
|
1080
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UserIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1081
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: UserIcon, isStandalone: true, selector: "acp-user-icon", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg\n [attr.width]=\"size()\"\n [attr.height]=\"size()\"\n version=\"1.1\"\n id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n viewBox=\"0 0 480 480\"\n xml:space=\"preserve\"\n fill=\"#000000\"\n>\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n <g id=\"SVGRepo_iconCarrier\">\n <g>\n <g>\n <circle style=\"fill: #b8bac0\" cx=\"240\" cy=\"240\" r=\"240\"></circle>\n </g>\n <g>\n <g>\n <path\n style=\"fill: #ffffff\"\n d=\"M240,360.07c-27.944,0-53.297-11.991-72.003-31.372c-0.014,11.615-0.436,28.379-3.516,40.611 c2.02,1.235,3.588,3.262,3.894,5.784c3.992,32.484,34.781,56.977,71.625,56.977c36.836,0,67.625-24.496,71.625-56.977 c0.31-2.525,1.844-4.549,3.895-5.78c-3.08-12.233-3.503-28.999-3.517-40.615C293.297,348.079,267.944,360.07,240,360.07z\"\n ></path>\n </g>\n </g>\n <g>\n <g>\n <path\n style=\"fill: #d7dbe0\"\n d=\"M310.44,330.174c-18.549,18.477-43.242,29.896-70.44,29.896 c-27.944,0-53.297-11.991-72.003-31.372c-0.014,11.615-0.436,28.379-3.516,40.611c2.02,1.235,3.588,3.262,3.894,5.784 c1.765,14.359,8.778,27.144,19.223,36.954C235.766,405.265,290.437,357.702,310.44,330.174z\"\n ></path>\n </g>\n </g>\n <g>\n <g>\n <path\n style=\"fill: #ffffff\"\n d=\"M312,160.07H176c-22.055,0-40,17.945-40,40v48c0,61.758,46.656,112,104,112s104-50.242,104-112 v-56C344,174.426,329.648,160.07,312,160.07z\"\n ></path>\n </g>\n </g>\n <g>\n <g>\n <path\n style=\"fill: #5c546a\"\n d=\"M296,72.07H192c-15.047,0-27.695,10.438-31.102,24.449C133.359,100.02,112,123.598,112,152.07v40 c0,20.617,8.752,39.851,24,53.52v-45.52c0-22.055,17.945-40,40-40h136c17.648,0,32,14.355,32,32v53.511 c15.251-13.667,24-32.899,24-53.511v-48C368,104.371,335.703,72.07,296,72.07z\"\n ></path>\n </g>\n </g>\n <g>\n <path\n style=\"fill: #5c546a\"\n d=\"M61.632,400.544C105.562,449.319,169.191,480,240,480s134.438-30.681,178.368-79.456 c-7.66-10.356-18.462-18.77-32.352-22.659c-0.32-0.09-0.641-0.16-0.969-0.207l-63.859-9.582c-0.391-0.059-1.227-0.09-1.625-0.09 c-4.039,0-7.445,3.012-7.938,7.023c-4,32.48-34.789,56.977-71.625,56.977c-36.844,0-67.633-24.492-71.625-56.977 c-0.5-4.129-4.219-7.234-8.141-7.02c-0.469-0.027-0.93,0.012-1.422,0.086l-63.859,9.582c-0.328,0.047-0.648,0.117-0.969,0.207 C80.094,381.775,69.292,390.188,61.632,400.544z\"\n ></path>\n </g>\n </g>\n </g>\n</svg>\n", changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
|
|
1084
1082
|
}
|
|
1085
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1083
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UserIcon, decorators: [{
|
|
1086
1084
|
type: Component,
|
|
1087
1085
|
args: [{ selector: 'acp-user-icon', imports: [], changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, template: "<svg\n [attr.width]=\"size()\"\n [attr.height]=\"size()\"\n version=\"1.1\"\n id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n viewBox=\"0 0 480 480\"\n xml:space=\"preserve\"\n fill=\"#000000\"\n>\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n <g id=\"SVGRepo_iconCarrier\">\n <g>\n <g>\n <circle style=\"fill: #b8bac0\" cx=\"240\" cy=\"240\" r=\"240\"></circle>\n </g>\n <g>\n <g>\n <path\n style=\"fill: #ffffff\"\n d=\"M240,360.07c-27.944,0-53.297-11.991-72.003-31.372c-0.014,11.615-0.436,28.379-3.516,40.611 c2.02,1.235,3.588,3.262,3.894,5.784c3.992,32.484,34.781,56.977,71.625,56.977c36.836,0,67.625-24.496,71.625-56.977 c0.31-2.525,1.844-4.549,3.895-5.78c-3.08-12.233-3.503-28.999-3.517-40.615C293.297,348.079,267.944,360.07,240,360.07z\"\n ></path>\n </g>\n </g>\n <g>\n <g>\n <path\n style=\"fill: #d7dbe0\"\n d=\"M310.44,330.174c-18.549,18.477-43.242,29.896-70.44,29.896 c-27.944,0-53.297-11.991-72.003-31.372c-0.014,11.615-0.436,28.379-3.516,40.611c2.02,1.235,3.588,3.262,3.894,5.784 c1.765,14.359,8.778,27.144,19.223,36.954C235.766,405.265,290.437,357.702,310.44,330.174z\"\n ></path>\n </g>\n </g>\n <g>\n <g>\n <path\n style=\"fill: #ffffff\"\n d=\"M312,160.07H176c-22.055,0-40,17.945-40,40v48c0,61.758,46.656,112,104,112s104-50.242,104-112 v-56C344,174.426,329.648,160.07,312,160.07z\"\n ></path>\n </g>\n </g>\n <g>\n <g>\n <path\n style=\"fill: #5c546a\"\n d=\"M296,72.07H192c-15.047,0-27.695,10.438-31.102,24.449C133.359,100.02,112,123.598,112,152.07v40 c0,20.617,8.752,39.851,24,53.52v-45.52c0-22.055,17.945-40,40-40h136c17.648,0,32,14.355,32,32v53.511 c15.251-13.667,24-32.899,24-53.511v-48C368,104.371,335.703,72.07,296,72.07z\"\n ></path>\n </g>\n </g>\n <g>\n <path\n style=\"fill: #5c546a\"\n d=\"M61.632,400.544C105.562,449.319,169.191,480,240,480s134.438-30.681,178.368-79.456 c-7.66-10.356-18.462-18.77-32.352-22.659c-0.32-0.09-0.641-0.16-0.969-0.207l-63.859-9.582c-0.391-0.059-1.227-0.09-1.625-0.09 c-4.039,0-7.445,3.012-7.938,7.023c-4,32.48-34.789,56.977-71.625,56.977c-36.844,0-67.633-24.492-71.625-56.977 c-0.5-4.129-4.219-7.234-8.141-7.02c-0.469-0.027-0.93,0.012-1.422,0.086l-63.859,9.582c-0.328,0.047-0.648,0.117-0.969,0.207 C80.094,381.775,69.292,390.188,61.632,400.544z\"\n ></path>\n </g>\n </g>\n </g>\n</svg>\n" }]
|
|
1088
1086
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
@@ -1213,10 +1211,10 @@ class IconRegistryService {
|
|
|
1213
1211
|
removeIcon(name) {
|
|
1214
1212
|
return this.registry.delete(name);
|
|
1215
1213
|
}
|
|
1216
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
1217
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
1214
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IconRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1215
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IconRegistryService, providedIn: 'root' });
|
|
1218
1216
|
}
|
|
1219
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1217
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IconRegistryService, decorators: [{
|
|
1220
1218
|
type: Injectable,
|
|
1221
1219
|
args: [{
|
|
1222
1220
|
providedIn: 'root',
|
|
@@ -1292,10 +1290,10 @@ class SvgIcon {
|
|
|
1292
1290
|
}
|
|
1293
1291
|
}, { allowSignalWrites: true });
|
|
1294
1292
|
}
|
|
1295
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
1296
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0
|
|
1293
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SvgIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1294
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: SvgIcon, isStandalone: true, selector: "acp-svg-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, useFallback: { classPropertyName: "useFallback", publicName: "useFallback", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"acp-svg-icon\"\n [style.width]=\"computedWidth()\"\n [style.height]=\"computedHeight()\"\n [style.color]=\"color()\"\n [innerHTML]=\"iconSvg()\"\n></div>\n", styles: [".acp-svg-icon{display:inline-flex;align-items:center;justify-content:center}.acp-svg-icon svg{width:100%;height:100%;fill:currentColor}.acp-svg-icon:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
|
|
1297
1295
|
}
|
|
1298
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1296
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SvgIcon, decorators: [{
|
|
1299
1297
|
type: Component,
|
|
1300
1298
|
args: [{ selector: 'acp-svg-icon', imports: [], changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"acp-svg-icon\"\n [style.width]=\"computedWidth()\"\n [style.height]=\"computedHeight()\"\n [style.color]=\"color()\"\n [innerHTML]=\"iconSvg()\"\n></div>\n", styles: [".acp-svg-icon{display:inline-flex;align-items:center;justify-content:center}.acp-svg-icon svg{width:100%;height:100%;fill:currentColor}.acp-svg-icon:empty{display:none}\n"] }]
|
|
1301
1299
|
}], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], useFallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "useFallback", required: false }] }] } });
|
|
@@ -1339,19 +1337,19 @@ class InputChip {
|
|
|
1339
1337
|
this.chips()[index] = value.replace(/\s+/g, '');
|
|
1340
1338
|
}
|
|
1341
1339
|
}
|
|
1342
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
1343
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0
|
|
1340
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: InputChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1341
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: InputChip, isStandalone: true, selector: "acp-input-chip", inputs: { chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: true, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: true, transformFunction: null }, placelholder: { classPropertyName: "placelholder", publicName: "placelholder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-form-field class=\"w-100\" appearance=\"outline\">\n <mat-label>{{ labelText() }}</mat-label>\n <mat-chip-grid #chipGrid aria-label=\"Enter fruits\">\n @for (chip of chips(); track $index) {\n <mat-chip-row\n (removed)=\"remove(chip)\"\n [editable]=\"true\"\n (edited)=\"edit(chip, $event)\"\n [aria-description]=\"'press enter to edit ' + chip\"\n >\n {{ chip }}\n <button matChipRemove [attr.aria-label]=\"'remove ' + chip\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n <input\n [placeholder]=\"placelholder()\"\n [matChipInputFor]=\"chipGrid\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matChipInputAddOnBlur]=\"addOnBlur\"\n (matChipInputTokenEnd)=\"add($event)\"\n />\n </mat-chip-grid>\n <mat-hint align=\"start\"><strong>Ingrese {{ labelText() }} y dale \"Enter\"</strong> </mat-hint>\n</mat-form-field>\n", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
|
|
1344
1342
|
}
|
|
1345
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1343
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: InputChip, decorators: [{
|
|
1346
1344
|
type: Component,
|
|
1347
1345
|
args: [{ selector: 'acp-input-chip', imports: [MatFormField, MatLabel, MatChipRow, MatIcon, MatHint, MatChipGrid, MatChipInput], changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, template: "<mat-form-field class=\"w-100\" appearance=\"outline\">\n <mat-label>{{ labelText() }}</mat-label>\n <mat-chip-grid #chipGrid aria-label=\"Enter fruits\">\n @for (chip of chips(); track $index) {\n <mat-chip-row\n (removed)=\"remove(chip)\"\n [editable]=\"true\"\n (edited)=\"edit(chip, $event)\"\n [aria-description]=\"'press enter to edit ' + chip\"\n >\n {{ chip }}\n <button matChipRemove [attr.aria-label]=\"'remove ' + chip\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n <input\n [placeholder]=\"placelholder()\"\n [matChipInputFor]=\"chipGrid\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matChipInputAddOnBlur]=\"addOnBlur\"\n (matChipInputTokenEnd)=\"add($event)\"\n />\n </mat-chip-grid>\n <mat-hint align=\"start\"><strong>Ingrese {{ labelText() }} y dale \"Enter\"</strong> </mat-hint>\n</mat-form-field>\n" }]
|
|
1348
1346
|
}], propDecorators: { chips: [{ type: i0.Input, args: [{ isSignal: true, alias: "chips", required: true }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: true }] }], placelholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placelholder", required: false }] }] } });
|
|
1349
1347
|
|
|
1350
1348
|
class Spinner {
|
|
1351
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
1352
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0
|
|
1349
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1350
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: Spinner, isStandalone: true, selector: "acp-spinner", ngImport: i0, template: "<div class=\"acp-spinner\">\n <mat-spinner />\n</div>\n", styles: [".acp-spinner{display:flex;justify-content:center;align-items:center;height:100%}\n"], dependencies: [{ kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
|
|
1353
1351
|
}
|
|
1354
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1352
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Spinner, decorators: [{
|
|
1355
1353
|
type: Component,
|
|
1356
1354
|
args: [{ selector: 'acp-spinner', imports: [MatProgressSpinner], changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, template: "<div class=\"acp-spinner\">\n <mat-spinner />\n</div>\n", styles: [".acp-spinner{display:flex;justify-content:center;align-items:center;height:100%}\n"] }]
|
|
1357
1355
|
}] });
|
|
@@ -1574,12 +1572,12 @@ class TabulatorTable {
|
|
|
1574
1572
|
}
|
|
1575
1573
|
};
|
|
1576
1574
|
}
|
|
1577
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
1578
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0
|
|
1575
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TabulatorTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1576
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: TabulatorTable, isStandalone: true, selector: "acp-tabulator-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, dataTree: { classPropertyName: "dataTree", publicName: "dataTree", isSignal: true, isRequired: false, transformFunction: null }, dataTreeChildField: { classPropertyName: "dataTreeChildField", publicName: "dataTreeChildField", isSignal: true, isRequired: false, transformFunction: null }, dataTreeStartExpanded: { classPropertyName: "dataTreeStartExpanded", publicName: "dataTreeStartExpanded", isSignal: true, isRequired: false, transformFunction: null }, dataTreeSelectPropagate: { classPropertyName: "dataTreeSelectPropagate", publicName: "dataTreeSelectPropagate", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, reactiveData: { classPropertyName: "reactiveData", publicName: "reactiveData", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, selectableRows: { classPropertyName: "selectableRows", publicName: "selectableRows", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, rowFormatter: { classPropertyName: "rowFormatter", publicName: "rowFormatter", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowDeleted: "rowDeleted", cellEdited: "cellEdited", rowClick: "rowClick", rowSelected: "rowSelected", tableReady: "tableReady" }, usesOnChanges: true, ngImport: i0, template: "<div [id]=\"containerId\" class=\"acp-tabulator-table-container\"></div>\n", styles: [".tabulator{font-size:12px;border-collapse:collapse;width:100%}.acp-tabulator-table{display:block}.acp-tabulator-table-container{width:100%}.acp-tabulator-table-container .tabulator-row.tabulator-selectable:hover{background-color:#0000000a;cursor:pointer;transition:background-color .2s ease}.acp-tabulator-table-container .tabulator-row.tabulator-selected{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .12))}@media(max-width:768px){.acp-tabulator-table-container .tabulator-header{font-size:.875rem}.acp-tabulator-table-container .tabulator-cell{font-size:.875rem;padding:8px 6px}}.acp-tabulator-table-container .tabulator-loader{background:var(--mat-sys-surface-container, rgba(255, 255, 255, .8));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar{width:8px;height:8px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-track{background:var(--mat-sys-surface-variant, #f1f1f1);border-radius:4px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-thumb{background:var(--mat-sys-outline, #c1c1c1);border-radius:4px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-on-surface-variant, #a8a8a8)}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
|
|
1579
1577
|
}
|
|
1580
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1578
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TabulatorTable, decorators: [{
|
|
1581
1579
|
type: Component,
|
|
1582
|
-
args: [{ selector: 'acp-tabulator-table', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, template: "<div [id]=\"containerId\" class=\"acp-tabulator-table-container\"></div>\n", styles: [".tabulator{font-size:12px;border-collapse:collapse;width:100%}.acp-tabulator-table{display:block}.acp-tabulator-table-container{width:100%}.acp-tabulator-table-container .tabulator-row.tabulator-selectable:hover{background-color:#0000000a;cursor:pointer;transition:background-color .2s ease}.acp-tabulator-table-container .tabulator-row.tabulator-selected{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .12))}@media(max-width:768px){.acp-tabulator-table-container .tabulator-header{font-size:.875rem}.acp-tabulator-table-container .tabulator-cell{font-size:.875rem;padding:8px 6px}}.acp-tabulator-table-container .tabulator-loader{background:var(--mat-sys-surface-container, rgba(255, 255, 255, .8));backdrop-filter:blur(2px)}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar{width:8px;height:8px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-track{background:var(--mat-sys-surface-variant, #f1f1f1);border-radius:4px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-thumb{background:var(--mat-sys-outline, #c1c1c1);border-radius:4px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-on-surface-variant, #a8a8a8)}\n"] }]
|
|
1580
|
+
args: [{ selector: 'acp-tabulator-table', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, template: "<div [id]=\"containerId\" class=\"acp-tabulator-table-container\"></div>\n", styles: [".tabulator{font-size:12px;border-collapse:collapse;width:100%}.acp-tabulator-table{display:block}.acp-tabulator-table-container{width:100%}.acp-tabulator-table-container .tabulator-row.tabulator-selectable:hover{background-color:#0000000a;cursor:pointer;transition:background-color .2s ease}.acp-tabulator-table-container .tabulator-row.tabulator-selected{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .12))}@media(max-width:768px){.acp-tabulator-table-container .tabulator-header{font-size:.875rem}.acp-tabulator-table-container .tabulator-cell{font-size:.875rem;padding:8px 6px}}.acp-tabulator-table-container .tabulator-loader{background:var(--mat-sys-surface-container, rgba(255, 255, 255, .8));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar{width:8px;height:8px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-track{background:var(--mat-sys-surface-variant, #f1f1f1);border-radius:4px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-thumb{background:var(--mat-sys-outline, #c1c1c1);border-radius:4px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-on-surface-variant, #a8a8a8)}\n"] }]
|
|
1583
1581
|
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], dataTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataTree", required: false }] }], dataTreeChildField: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataTreeChildField", required: false }] }], dataTreeStartExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataTreeStartExpanded", required: false }] }], dataTreeSelectPropagate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataTreeSelectPropagate", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], reactiveData: [{ type: i0.Input, args: [{ isSignal: true, alias: "reactiveData", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], selectableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableRows", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], rowFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowFormatter", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], rowDeleted: [{ type: i0.Output, args: ["rowDeleted"] }], cellEdited: [{ type: i0.Output, args: ["cellEdited"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowSelected: [{ type: i0.Output, args: ["rowSelected"] }], tableReady: [{ type: i0.Output, args: ["tableReady"] }] } });
|
|
1584
1582
|
|
|
1585
1583
|
class AdvancedDialogService {
|
|
@@ -1706,10 +1704,10 @@ class AdvancedDialogService {
|
|
|
1706
1704
|
};
|
|
1707
1705
|
return sizeMap[size];
|
|
1708
1706
|
}
|
|
1709
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
1710
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
1707
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AdvancedDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1708
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AdvancedDialogService, providedIn: 'root' });
|
|
1711
1709
|
}
|
|
1712
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1710
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AdvancedDialogService, decorators: [{
|
|
1713
1711
|
type: Injectable,
|
|
1714
1712
|
args: [{
|
|
1715
1713
|
providedIn: 'root',
|
|
@@ -1735,10 +1733,10 @@ class OverlayService {
|
|
|
1735
1733
|
this.overlayRef = null;
|
|
1736
1734
|
}
|
|
1737
1735
|
}
|
|
1738
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
1739
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
1736
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1737
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OverlayService, providedIn: 'root' });
|
|
1740
1738
|
}
|
|
1741
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1739
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OverlayService, decorators: [{
|
|
1742
1740
|
type: Injectable,
|
|
1743
1741
|
args: [{
|
|
1744
1742
|
providedIn: 'root',
|
|
@@ -1780,10 +1778,10 @@ class ThemeSwitcher {
|
|
|
1780
1778
|
return;
|
|
1781
1779
|
document.documentElement.classList.toggle('dark-theme', isDark);
|
|
1782
1780
|
}
|
|
1783
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
1784
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
1781
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ThemeSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1782
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ThemeSwitcher, providedIn: 'root' });
|
|
1785
1783
|
}
|
|
1786
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1784
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ThemeSwitcher, decorators: [{
|
|
1787
1785
|
type: Injectable,
|
|
1788
1786
|
args: [{
|
|
1789
1787
|
providedIn: 'root',
|
|
@@ -1825,10 +1823,10 @@ class ThemeToggle {
|
|
|
1825
1823
|
toggleDarkMode() {
|
|
1826
1824
|
this.themeSwitcher.toggleDarkMode();
|
|
1827
1825
|
}
|
|
1828
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
1829
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0
|
|
1826
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ThemeToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1827
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: ThemeToggle, isStandalone: true, selector: "acp-theme-toggle", inputs: { lightModeIcon: { classPropertyName: "lightModeIcon", publicName: "lightModeIcon", isSignal: true, isRequired: false, transformFunction: null }, darkModeIcon: { classPropertyName: "darkModeIcon", publicName: "darkModeIcon", isSignal: true, isRequired: false, transformFunction: null }, lightModeLabel: { classPropertyName: "lightModeLabel", publicName: "lightModeLabel", isSignal: true, isRequired: false, transformFunction: null }, darkModeLabel: { classPropertyName: "darkModeLabel", publicName: "darkModeLabel", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "acp-theme-toggle" }, ngImport: i0, template: "<button\n mat-icon-button\n type=\"button\"\n (click)=\"toggleDarkMode()\"\n [attr.aria-label]=\"currentLabel()\"\n [attr.aria-pressed]=\"isDarkMode()\"\n [matTooltip]=\"currentLabel()\"\n [attr.data-testid]=\"testId() || null\"\n>\n <mat-icon>{{ currentIcon() }}</mat-icon>\n</button>\n", styles: [".acp-theme-toggle{display:inline-block}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1830
1828
|
}
|
|
1831
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1829
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ThemeToggle, decorators: [{
|
|
1832
1830
|
type: Component,
|
|
1833
1831
|
args: [{ selector: 'acp-theme-toggle', imports: [MatIconButton, MatIcon, MatTooltip], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1834
1832
|
class: 'acp-theme-toggle',
|
|
@@ -1839,10 +1837,10 @@ class AcpToObservablePipe {
|
|
|
1839
1837
|
transform(value) {
|
|
1840
1838
|
return isObservable(value) ? value : of(value);
|
|
1841
1839
|
}
|
|
1842
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
1843
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0
|
|
1840
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpToObservablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
1841
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: AcpToObservablePipe, isStandalone: true, name: "toObservable" });
|
|
1844
1842
|
}
|
|
1845
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1843
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpToObservablePipe, decorators: [{
|
|
1846
1844
|
type: Pipe,
|
|
1847
1845
|
args: [{ name: 'toObservable' }]
|
|
1848
1846
|
}] });
|
|
@@ -1851,10 +1849,10 @@ class AcpIsTemplateRefPipe {
|
|
|
1851
1849
|
transform(obj) {
|
|
1852
1850
|
return obj instanceof TemplateRef;
|
|
1853
1851
|
}
|
|
1854
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
1855
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0
|
|
1852
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpIsTemplateRefPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
1853
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: AcpIsTemplateRefPipe, isStandalone: true, name: "isTemplateRef" });
|
|
1856
1854
|
}
|
|
1857
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1855
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpIsTemplateRefPipe, decorators: [{
|
|
1858
1856
|
type: Pipe,
|
|
1859
1857
|
args: [{ name: 'isTemplateRef' }]
|
|
1860
1858
|
}] });
|
|
@@ -1887,10 +1885,10 @@ class AcpGridSelectableCell {
|
|
|
1887
1885
|
this._selected = !this._selected;
|
|
1888
1886
|
this.cellSelectedChange.emit(this);
|
|
1889
1887
|
}
|
|
1890
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
1891
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
1888
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridSelectableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1889
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AcpGridSelectableCell, isStandalone: true, selector: "[acpGridSelectableCell]", inputs: { cellSelectable: "cellSelectable" }, outputs: { cellSelectedChange: "cellSelectedChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.selected": "selected" } }, ngImport: i0 });
|
|
1892
1890
|
}
|
|
1893
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1891
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridSelectableCell, decorators: [{
|
|
1894
1892
|
type: Directive,
|
|
1895
1893
|
args: [{
|
|
1896
1894
|
selector: '[acpGridSelectableCell]',
|
|
@@ -1950,10 +1948,10 @@ class DataGridUtils {
|
|
|
1950
1948
|
isContainHTML(value) {
|
|
1951
1949
|
return /<\/?[a-z][\s\S]*>/i.test(value);
|
|
1952
1950
|
}
|
|
1953
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
1954
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
1951
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridUtils, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1952
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridUtils, providedIn: 'root' });
|
|
1955
1953
|
}
|
|
1956
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1954
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridUtils, decorators: [{
|
|
1957
1955
|
type: Injectable,
|
|
1958
1956
|
args: [{ providedIn: 'root' }]
|
|
1959
1957
|
}] });
|
|
@@ -1974,10 +1972,10 @@ class AcpGridColClassPipe {
|
|
|
1974
1972
|
}
|
|
1975
1973
|
return '';
|
|
1976
1974
|
}
|
|
1977
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
1978
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0
|
|
1975
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridColClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
1976
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: AcpGridColClassPipe, isStandalone: true, name: "colClass" });
|
|
1979
1977
|
}
|
|
1980
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1978
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridColClassPipe, decorators: [{
|
|
1981
1979
|
type: Pipe,
|
|
1982
1980
|
args: [{ name: 'colClass' }]
|
|
1983
1981
|
}] });
|
|
@@ -1994,10 +1992,10 @@ class AcpGridRowClassPipe {
|
|
|
1994
1992
|
}
|
|
1995
1993
|
return classList.join(' ');
|
|
1996
1994
|
}
|
|
1997
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
1998
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0
|
|
1995
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridRowClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
1996
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: AcpGridRowClassPipe, isStandalone: true, name: "rowClass" });
|
|
1999
1997
|
}
|
|
2000
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
1998
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridRowClassPipe, decorators: [{
|
|
2001
1999
|
type: Pipe,
|
|
2002
2000
|
args: [{ name: 'rowClass' }]
|
|
2003
2001
|
}] });
|
|
@@ -2017,10 +2015,10 @@ class AcpGridCellActionsPipe {
|
|
|
2017
2015
|
}
|
|
2018
2016
|
return [];
|
|
2019
2017
|
}
|
|
2020
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2021
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0
|
|
2018
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellActionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
2019
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellActionsPipe, isStandalone: true, name: "cellActions" });
|
|
2022
2020
|
}
|
|
2023
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2021
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellActionsPipe, decorators: [{
|
|
2024
2022
|
type: Pipe,
|
|
2025
2023
|
args: [{ name: 'cellActions' }]
|
|
2026
2024
|
}] });
|
|
@@ -2033,10 +2031,10 @@ class AcpGridCellActionTooltipPipe {
|
|
|
2033
2031
|
return btn.tooltip || { message: '' };
|
|
2034
2032
|
}
|
|
2035
2033
|
}
|
|
2036
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2037
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0
|
|
2034
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellActionTooltipPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
2035
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellActionTooltipPipe, isStandalone: true, name: "cellActionTooltip" });
|
|
2038
2036
|
}
|
|
2039
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2037
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellActionTooltipPipe, decorators: [{
|
|
2040
2038
|
type: Pipe,
|
|
2041
2039
|
args: [{ name: 'cellActionTooltip' }]
|
|
2042
2040
|
}] });
|
|
@@ -2049,10 +2047,10 @@ class AcpGridCellActionBadgePipe {
|
|
|
2049
2047
|
return btn.badge || { content: '' };
|
|
2050
2048
|
}
|
|
2051
2049
|
}
|
|
2052
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2053
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0
|
|
2050
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellActionBadgePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
2051
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellActionBadgePipe, isStandalone: true, name: "cellActionBadge" });
|
|
2054
2052
|
}
|
|
2055
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2053
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellActionBadgePipe, decorators: [{
|
|
2056
2054
|
type: Pipe,
|
|
2057
2055
|
args: [{ name: 'cellActionBadge' }]
|
|
2058
2056
|
}] });
|
|
@@ -2074,10 +2072,10 @@ class AcpGridCellActionDisablePipe {
|
|
|
2074
2072
|
return false;
|
|
2075
2073
|
}
|
|
2076
2074
|
}
|
|
2077
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2078
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0
|
|
2075
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellActionDisablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
2076
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellActionDisablePipe, isStandalone: true, name: "cellActionDisable" });
|
|
2079
2077
|
}
|
|
2080
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2078
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellActionDisablePipe, decorators: [{
|
|
2081
2079
|
type: Pipe,
|
|
2082
2080
|
args: [{ name: 'cellActionDisable' }]
|
|
2083
2081
|
}] });
|
|
@@ -2091,10 +2089,10 @@ class AcpGridCellSummaryPipe {
|
|
|
2091
2089
|
return colDef.summary(this.utils.getColData(data, colDef), colDef);
|
|
2092
2090
|
}
|
|
2093
2091
|
}
|
|
2094
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2095
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0
|
|
2092
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellSummaryPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
2093
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellSummaryPipe, isStandalone: true, name: "cellSummary" });
|
|
2096
2094
|
}
|
|
2097
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2095
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCellSummaryPipe, decorators: [{
|
|
2098
2096
|
type: Pipe,
|
|
2099
2097
|
args: [{ name: 'cellSummary' }]
|
|
2100
2098
|
}] });
|
|
@@ -2103,8 +2101,8 @@ class AcpGridMenu {
|
|
|
2103
2101
|
menu;
|
|
2104
2102
|
items = [];
|
|
2105
2103
|
data = {};
|
|
2106
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2107
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0
|
|
2104
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2105
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpGridMenu, isStandalone: true, selector: "acp-grid-menu", inputs: { items: "items", data: "data" }, viewQueries: [{ propertyName: "menu", first: true, predicate: MatMenu, descendants: true, static: true }], exportAs: ["acpGridMenu"], ngImport: i0, template: `
|
|
2108
2106
|
<mat-menu class="acp-grid-menu">
|
|
2109
2107
|
@for (item of items; track $index) {
|
|
2110
2108
|
@if (!item.iif || item.iif(data)) {
|
|
@@ -2147,7 +2145,7 @@ class AcpGridMenu {
|
|
|
2147
2145
|
</ng-template>
|
|
2148
2146
|
`, isInline: true, dependencies: [{ kind: "component", type: AcpGridMenu, selector: "acp-grid-menu", inputs: ["items", "data"], exportAs: ["acpGridMenu"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AcpGridCellActionDisablePipe, name: "cellActionDisable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2149
2147
|
}
|
|
2150
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2148
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridMenu, decorators: [{
|
|
2151
2149
|
type: Component,
|
|
2152
2150
|
args: [{
|
|
2153
2151
|
selector: 'acp-grid-menu',
|
|
@@ -2269,10 +2267,10 @@ class AcpGridCell {
|
|
|
2269
2267
|
event.stopPropagation();
|
|
2270
2268
|
btn.click?.(rowData);
|
|
2271
2269
|
}
|
|
2272
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2273
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpGridCell, isStandalone: true, selector: "acp-grid-cell", inputs: { rowData: "rowData", colDef: "colDef", data: "data", summary: "summary", placeholder: "placeholder" }, outputs: { rowDataChange: "rowDataChange" }, exportAs: ["acpGridCell"], ngImport: i0, template: "@if (summary) {\n<span\n [title]=\"_getFormatterTooltip(data | cellSummary: colDef)\"\n [innerHTML]=\"_getText(data | cellSummary: colDef)\"\n></span>\n} @else {\n<!-- Custom formatting -->\n@if (colDef.formatter) {\n<span\n [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\"\n></span>\n} @else {\n<!-- Default formatting -->\n@switch (colDef.type) {\n<!-- Buttons -->\n@case ('button') { @for ( btn of colDef.buttons | cellActions : rowData : rowChangeRecord :\n$safeNavigationMigration(rowChangeRecord?.currentValue); track btn ) { @if (!btn.iif ||\nbtn.iif(rowData)) { @if (btn.children && btn.children.length > 0) { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} } @else { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n} } } } }\n<!-- Tag -->\n@case ('tag') { @if (colDef.tag && colDef.tag[_value]) {\n<mat-chip-listbox>\n <mat-chip color=\"primary\" [class]=\"'bg-' + colDef.tag[_value].color\">\n {{ colDef.tag[_value].text }}\n </mat-chip>\n</mat-chip-listbox>\n} @else { {{ _value }} } }\n<!-- Link -->\n@case ('link') {\n<a [href]=\"_value\" target=\"_blank\">{{ _value }}</a>\n}\n<!-- Image -->\n\n<!-- Image -->\n@case ('image') { @if (_value) {\n<!-- Imagen real -->\n<img class=\"acp-placeholder-image\" [src]=\"_value\" alt=\"img\" />\n} @else {\n<!-- Placeholder -->\n<div class=\"acp-placeholder-box\">\n <svg class=\"acp-placeholder-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M4 16l4.586-4.586a2 2 0 012.828 0L15 14m-12 5h16a1 1 0 001-1V5a1 1 0 00-1-1H3a1 1 0 00-1 1v14a1 1 0 001 1z\"\n />\n </svg>\n</div>\n} }\n\n<!-- Boolean -->\n@case ('boolean') {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n}\n<!-- Number -->\n@case ('number') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | number\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | number : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Currency -->\n@case ('currency') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | currency\n : $safeNavigationMigration(colDef.typeParameter?.currencyCode)\n : $safeNavigationMigration(colDef.typeParameter?.display)\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | currency : $safeNavigationMigration(colDef.typeParameter?.currencyCode) :\n $safeNavigationMigration(colDef.typeParameter?.display) :\n $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | percent\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | percent : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | date\n : $safeNavigationMigration(colDef.typeParameter?.format)\n : $safeNavigationMigration(colDef.typeParameter?.timezone)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | date : $safeNavigationMigration(colDef.typeParameter?.format) :\n $safeNavigationMigration(colDef.typeParameter?.timezone) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n @if (btn.icon) {\n <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n } @else if (btn.fontIcon) {\n <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\"></mat-icon>\n } @else if (btn.svgIcon) {\n <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\"></mat-icon>\n }\n</ng-template>\n", styles: [".acp-placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#4b5563;font-size:.85rem;gap:8px}.acp-placeholder-icon{width:32px;height:32px;color:#3b82f6}.acp-placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: AcpGridMenu, selector: "acp-grid-menu", inputs: ["items", "data"], exportAs: ["acpGridMenu"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AcpGridCellActionsPipe, name: "cellActions" }, { kind: "pipe", type: AcpGridCellSummaryPipe, name: "cellSummary" }, { kind: "pipe", type: AcpGridCellActionDisablePipe, name: "cellActionDisable" }, { kind: "pipe", type: AcpGridCellActionTooltipPipe, name: "cellActionTooltip" }, { kind: "pipe", type: AcpGridCellActionBadgePipe, name: "cellActionBadge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2270
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2271
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpGridCell, isStandalone: true, selector: "acp-grid-cell", inputs: { rowData: "rowData", colDef: "colDef", data: "data", summary: "summary", placeholder: "placeholder" }, outputs: { rowDataChange: "rowDataChange" }, exportAs: ["acpGridCell"], ngImport: i0, template: "@if (summary) {\n<span\n [title]=\"_getFormatterTooltip(data | cellSummary: colDef)\"\n [innerHTML]=\"_getText(data | cellSummary: colDef)\"\n></span>\n} @else {\n<!-- Custom formatting -->\n@if (colDef.formatter) {\n<span\n [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\"\n></span>\n} @else {\n<!-- Default formatting -->\n@switch (colDef.type) {\n<!-- Buttons -->\n@case ('button') { @for ( btn of colDef.buttons | cellActions : rowData : rowChangeRecord :\n$safeNavigationMigration(rowChangeRecord?.currentValue); track btn ) { @if (!btn.iif ||\nbtn.iif(rowData)) { @if (btn.children && btn.children.length > 0) { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} } @else { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n} } } } }\n<!-- Tag -->\n@case ('tag') { @if (colDef.tag && colDef.tag[_value]) {\n<mat-chip-listbox>\n <mat-chip color=\"primary\" [class]=\"'bg-' + colDef.tag[_value].color\">\n {{ colDef.tag[_value].text }}\n </mat-chip>\n</mat-chip-listbox>\n} @else { {{ _value }} } }\n<!-- Link -->\n@case ('link') {\n<a [href]=\"_value\" target=\"_blank\">{{ _value }}</a>\n}\n<!-- Image -->\n\n<!-- Image -->\n@case ('image') { @if (_value) {\n<!-- Imagen real -->\n<img class=\"acp-placeholder-image\" [src]=\"_value\" alt=\"img\" />\n} @else {\n<!-- Placeholder -->\n<div class=\"acp-placeholder-box\">\n <svg class=\"acp-placeholder-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M4 16l4.586-4.586a2 2 0 012.828 0L15 14m-12 5h16a1 1 0 001-1V5a1 1 0 00-1-1H3a1 1 0 00-1 1v14a1 1 0 001 1z\"\n />\n </svg>\n</div>\n} }\n\n<!-- Boolean -->\n@case ('boolean') {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n}\n<!-- Number -->\n@case ('number') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | number\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | number : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Currency -->\n@case ('currency') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | currency\n : $safeNavigationMigration(colDef.typeParameter?.currencyCode)\n : $safeNavigationMigration(colDef.typeParameter?.display)\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | currency : $safeNavigationMigration(colDef.typeParameter?.currencyCode) :\n $safeNavigationMigration(colDef.typeParameter?.display) :\n $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | percent\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | percent : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | date\n : $safeNavigationMigration(colDef.typeParameter?.format)\n : $safeNavigationMigration(colDef.typeParameter?.timezone)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | date : $safeNavigationMigration(colDef.typeParameter?.format) :\n $safeNavigationMigration(colDef.typeParameter?.timezone) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n @if (btn.icon) {\n <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n } @else if (btn.fontIcon) {\n <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\"></mat-icon>\n } @else if (btn.svgIcon) {\n <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\"></mat-icon>\n }\n</ng-template>\n", styles: [".acp-placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#4b5563;font-size:.85rem;gap:8px}.acp-placeholder-icon{width:32px;height:32px;color:#3b82f6}.acp-placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: AcpGridMenu, selector: "acp-grid-menu", inputs: ["items", "data"], exportAs: ["acpGridMenu"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AcpGridCellActionsPipe, name: "cellActions" }, { kind: "pipe", type: AcpGridCellSummaryPipe, name: "cellSummary" }, { kind: "pipe", type: AcpGridCellActionDisablePipe, name: "cellActionDisable" }, { kind: "pipe", type: AcpGridCellActionTooltipPipe, name: "cellActionTooltip" }, { kind: "pipe", type: AcpGridCellActionBadgePipe, name: "cellActionBadge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2274
2272
|
}
|
|
2275
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2273
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridCell, decorators: [{
|
|
2276
2274
|
type: Component,
|
|
2277
2275
|
args: [{ selector: 'acp-grid-cell', exportAs: 'acpGridCell', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
2278
2276
|
AsyncPipe,
|
|
@@ -2414,10 +2412,10 @@ class ColumnResize {
|
|
|
2414
2412
|
}
|
|
2415
2413
|
});
|
|
2416
2414
|
}
|
|
2417
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2418
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
2415
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColumnResize, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2416
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: ColumnResize, isStandalone: true, inputs: { liveResizeUpdates: "liveResizeUpdates" }, ngImport: i0 });
|
|
2419
2417
|
}
|
|
2420
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2418
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColumnResize, decorators: [{
|
|
2421
2419
|
type: Directive
|
|
2422
2420
|
}], propDecorators: { liveResizeUpdates: [{
|
|
2423
2421
|
type: Input
|
|
@@ -2434,10 +2432,10 @@ class ColumnResizeNotifierSource {
|
|
|
2434
2432
|
resizeCompleted = new Subject();
|
|
2435
2433
|
/** Triggers a resize action. */
|
|
2436
2434
|
triggerResize = new Subject();
|
|
2437
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2438
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
2435
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColumnResizeNotifierSource, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2436
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColumnResizeNotifierSource });
|
|
2439
2437
|
}
|
|
2440
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2438
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColumnResizeNotifierSource, decorators: [{
|
|
2441
2439
|
type: Injectable
|
|
2442
2440
|
}] });
|
|
2443
2441
|
/** Service for triggering column resizes imperatively or being notified of them. */
|
|
@@ -2454,10 +2452,10 @@ class ColumnResizeNotifier {
|
|
|
2454
2452
|
isStickyColumn: true,
|
|
2455
2453
|
});
|
|
2456
2454
|
}
|
|
2457
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2458
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
2455
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColumnResizeNotifier, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2456
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColumnResizeNotifier });
|
|
2459
2457
|
}
|
|
2460
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2458
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColumnResizeNotifier, decorators: [{
|
|
2461
2459
|
type: Injectable
|
|
2462
2460
|
}] });
|
|
2463
2461
|
|
|
@@ -2516,10 +2514,10 @@ class HeaderRowEventDispatcher {
|
|
|
2516
2514
|
complete: () => observer.complete(),
|
|
2517
2515
|
}));
|
|
2518
2516
|
}
|
|
2519
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2520
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
2517
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: HeaderRowEventDispatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2518
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: HeaderRowEventDispatcher });
|
|
2521
2519
|
}
|
|
2522
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2520
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: HeaderRowEventDispatcher, decorators: [{
|
|
2523
2521
|
type: Injectable
|
|
2524
2522
|
}] });
|
|
2525
2523
|
|
|
@@ -2582,10 +2580,10 @@ class _CoalescedStyleScheduler {
|
|
|
2582
2580
|
this._currentSchedule = null;
|
|
2583
2581
|
}));
|
|
2584
2582
|
}
|
|
2585
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2586
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
2583
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: _CoalescedStyleScheduler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2584
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: _CoalescedStyleScheduler });
|
|
2587
2585
|
}
|
|
2588
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2586
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: _CoalescedStyleScheduler, decorators: [{
|
|
2589
2587
|
type: Injectable
|
|
2590
2588
|
}] });
|
|
2591
2589
|
|
|
@@ -2608,10 +2606,10 @@ class ResizeStrategy {
|
|
|
2608
2606
|
getElementWidth(element) {
|
|
2609
2607
|
return coercePixelsFromCssValue(element.style.width) || element.offsetWidth;
|
|
2610
2608
|
}
|
|
2611
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2612
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
2609
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ResizeStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2610
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ResizeStrategy });
|
|
2613
2611
|
}
|
|
2614
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2612
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ResizeStrategy, decorators: [{
|
|
2615
2613
|
type: Injectable
|
|
2616
2614
|
}] });
|
|
2617
2615
|
class TableLayoutFixedResizeStrategy extends ResizeStrategy {
|
|
@@ -2638,10 +2636,10 @@ class TableLayoutFixedResizeStrategy extends ResizeStrategy {
|
|
|
2638
2636
|
const newWidth = Math.min(currentWidth, sizeInPx);
|
|
2639
2637
|
this.applyColumnSize(_, columnHeader, newWidth, currentWidth);
|
|
2640
2638
|
}
|
|
2641
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2642
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
2639
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TableLayoutFixedResizeStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
2640
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TableLayoutFixedResizeStrategy });
|
|
2643
2641
|
}
|
|
2644
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2642
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TableLayoutFixedResizeStrategy, decorators: [{
|
|
2645
2643
|
type: Injectable
|
|
2646
2644
|
}] });
|
|
2647
2645
|
class CdkFlexTableResizeStrategy extends ResizeStrategy {
|
|
@@ -2745,10 +2743,10 @@ class CdkFlexTableResizeStrategy extends ResizeStrategy {
|
|
|
2745
2743
|
const body = propertyKeys.map(key => `${key}:${properties.get(key)}`).join(';');
|
|
2746
2744
|
this._getStyleSheet().insertRule(`${selector} {${body}}`, index);
|
|
2747
2745
|
}
|
|
2748
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2749
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
2746
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CdkFlexTableResizeStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
2747
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CdkFlexTableResizeStrategy });
|
|
2750
2748
|
}
|
|
2751
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2749
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CdkFlexTableResizeStrategy, decorators: [{
|
|
2752
2750
|
type: Injectable
|
|
2753
2751
|
}] });
|
|
2754
2752
|
/** Converts CSS pixel values to numbers, eg "123px" to 123. Returns NaN for non pixel values. */
|
|
@@ -2790,8 +2788,8 @@ class CdkColumnResize extends ColumnResize {
|
|
|
2790
2788
|
ngZone = inject(NgZone);
|
|
2791
2789
|
notifier = inject(ColumnResizeNotifierSource);
|
|
2792
2790
|
table = inject(CdkTable);
|
|
2793
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2794
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
2791
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CdkColumnResize, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
2792
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: CdkColumnResize, isStandalone: true, selector: "table[cdk-table][columnResize]", providers: [
|
|
2795
2793
|
...TABLE_PROVIDERS$1,
|
|
2796
2794
|
{
|
|
2797
2795
|
provide: ColumnResize,
|
|
@@ -2799,7 +2797,7 @@ class CdkColumnResize extends ColumnResize {
|
|
|
2799
2797
|
},
|
|
2800
2798
|
], usesInheritance: true, ngImport: i0 });
|
|
2801
2799
|
}
|
|
2802
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2800
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CdkColumnResize, decorators: [{
|
|
2803
2801
|
type: Directive,
|
|
2804
2802
|
args: [{
|
|
2805
2803
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -2821,10 +2819,10 @@ class CdkColumnResizeFlex extends ColumnResize {
|
|
|
2821
2819
|
ngZone = inject(NgZone);
|
|
2822
2820
|
notifier = inject(ColumnResizeNotifierSource);
|
|
2823
2821
|
table = inject(CdkTable);
|
|
2824
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2825
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
2822
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CdkColumnResizeFlex, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
2823
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: CdkColumnResizeFlex, isStandalone: true, selector: "cdk-table[columnResize]", providers: [...FLEX_PROVIDERS$1, { provide: ColumnResize, useExisting: CdkColumnResizeFlex }], usesInheritance: true, ngImport: i0 });
|
|
2826
2824
|
}
|
|
2827
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2825
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CdkColumnResizeFlex, decorators: [{
|
|
2828
2826
|
type: Directive,
|
|
2829
2827
|
args: [{
|
|
2830
2828
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -2837,10 +2835,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
|
|
|
2837
2835
|
* Can be provided by the host application to enable persistence of column resize state.
|
|
2838
2836
|
*/
|
|
2839
2837
|
class ColumnSizeStore {
|
|
2840
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
2841
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
2838
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColumnSizeStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2839
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColumnSizeStore });
|
|
2842
2840
|
}
|
|
2843
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
2841
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColumnSizeStore, decorators: [{
|
|
2844
2842
|
type: Injectable
|
|
2845
2843
|
}] });
|
|
2846
2844
|
|
|
@@ -3043,10 +3041,10 @@ class Resizable {
|
|
|
3043
3041
|
this.elementRef.nativeElement.appendChild(this.inlineHandle);
|
|
3044
3042
|
});
|
|
3045
3043
|
}
|
|
3046
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
3047
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
3044
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Resizable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3045
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: Resizable, isStandalone: true, ngImport: i0 });
|
|
3048
3046
|
}
|
|
3049
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
3047
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Resizable, decorators: [{
|
|
3050
3048
|
type: Directive
|
|
3051
3049
|
}] });
|
|
3052
3050
|
|
|
@@ -3195,10 +3193,10 @@ class ResizeOverlayHandle {
|
|
|
3195
3193
|
};
|
|
3196
3194
|
});
|
|
3197
3195
|
}
|
|
3198
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
3199
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
3196
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ResizeOverlayHandle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3197
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: ResizeOverlayHandle, isStandalone: true, ngImport: i0 });
|
|
3200
3198
|
}
|
|
3201
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
3199
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ResizeOverlayHandle, decorators: [{
|
|
3202
3200
|
type: Directive
|
|
3203
3201
|
}] });
|
|
3204
3202
|
|
|
@@ -3263,10 +3261,10 @@ class AcpGridColumnMenu {
|
|
|
3263
3261
|
this.columnChange.emit(this.columns);
|
|
3264
3262
|
}
|
|
3265
3263
|
}
|
|
3266
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
3267
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpGridColumnMenu, isStandalone: true, selector: "acp-grid-column-menu", inputs: { columns: "columns", selectable: "selectable", selectableChecked: "selectableChecked", sortable: "sortable", pinnable: "pinnable", buttonText: "buttonText", buttonType: "buttonType", buttonColor: "buttonColor", buttonClass: "buttonClass", buttonIcon: "buttonIcon", buttonFontIcon: "buttonFontIcon", buttonSvgIcon: "buttonSvgIcon", showHeader: "showHeader", headerText: "headerText", headerTemplate: "headerTemplate", showFooter: "showFooter", footerText: "footerText", footerTemplate: "footerTemplate", pinOptions: "pinOptions" }, outputs: { columnChange: "columnChange" }, viewQueries: [{ propertyName: "menuPanel", first: true, predicate: MatMenu, descendants: true, static: true }, { propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], exportAs: ["acpGridColumnMenu"], ngImport: i0, template: "@if (buttonType === 'icon') {\n<button\n [class]=\"buttonClass\"\n matIconButton\n type=\"button\"\n [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl\"></mat-icon>\n</button>\n} @else {\n<button\n [class]=\"buttonClass\"\n [matButton]=\"buttonType\"\n type=\"button\"\n [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl\"></mat-icon>\n {{ buttonText }}\n</button>\n}\n\n<ng-template #iconTpl>\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n } @else if(buttonFontIcon) {\n <mat-icon [fontIcon]=\"buttonFontIcon\"></mat-icon>\n } @else if(buttonSvgIcon) {\n <mat-icon [svgIcon]=\"buttonSvgIcon\"></mat-icon>\n }\n</ng-template>\n\n<mat-menu #menu=\"matMenu\" class=\"acp-grid-column-menu\">\n <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n <div\n class=\"acp-grid-column-menu-content\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n >\n @if (showHeader) {\n <div class=\"acp-grid-column-menu-header\">\n @if (headerTemplate) {\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n } @else { {{headerText}} }\n </div>\n }\n\n <div class=\"acp-grid-column-menu-body\">\n @if (sortable) {\n <div\n class=\"acp-grid-column-menu-list\"\n cdkDropList\n (cdkDropListDropped)=\"_handleDroped($event)\"\n >\n @for (col of columns; track col.field) {\n <div\n class=\"acp-grid-column-menu-item\"\n cdkDrag\n [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-column-drag-handle-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path\n d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\"\n />\n </svg>\n <ng-template\n [ngTemplateOutlet]=\"checkboxList\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\"\n >\n </ng-template>\n </div>\n }\n </div>\n } @if (!sortable) {\n <div class=\"acp-grid-column-menu-list\">\n @for (col of columns; track col.field) {\n <div class=\"acp-grid-column-menu-item\">\n <ng-template\n [ngTemplateOutlet]=\"checkboxList\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\"\n >\n </ng-template>\n </div>\n }\n </div>\n }\n </div>\n\n @if (showFooter) {\n <div class=\"acp-grid-column-menu-footer\">\n @if (footerTemplate) {\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n } @else { {{footerText}} }\n </div>\n }\n </div>\n</mat-menu>\n\n<ng-template #checkboxList let-col>\n @if (pinnable) {\n <button\n class=\"acp-grid-column-pin-button\"\n matIconButton\n type=\"button\"\n [matMenuTriggerFor]=\"pinList\"\n >\n @if (col.pinned) {\n <svg\n class=\"acp-grid-icon acp-grid-column-pin-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\n </svg>\n } @if (!col.pinned) {\n <svg\n class=\"acp-grid-icon acp-grid-column-pin-off-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path\n d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\"\n />\n </svg>\n }\n </button>\n <mat-menu #pinList=\"matMenu\" class=\"acp-grid-column-pin-list\">\n @for (item of pinOptions; track item) {\n <button\n class=\"acp-grid-column-pin-option\"\n type=\"button\"\n mat-menu-item\n (click)=\"_handlePinSelect(col, item.value)\"\n >\n <span class=\"acp-grid-column-pin-option-placeholder\">\n <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n @if (col.pinned==item.value) {\n <svg\n class=\"acp-grid-icon acp-grid-column-pin-check-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n </svg>\n }\n </span>\n <span class=\"acp-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\n </button>\n }\n </mat-menu>\n } @if (selectable) {\n <mat-checkbox\n class=\"acp-grid-column-menu-item-label\"\n [(ngModel)]=\"col[selectableChecked]\"\n [disabled]=\"col.disabled\"\n (change)=\"_handleChecked(col)\"\n >{{col.header | toObservable | async}}</mat-checkbox\n >\n } @else {\n <span class=\"acp-grid-column-menu-item-label\">{{col.header | toObservable | async}}</span>\n }\n</ng-template>\n", styles: [".acp-grid-column-menu,.acp-grid-column-pin-list{color:var(--acp-grid-column-menu-text-color, var(--mat-sys-on-surface-variant))}.acp-grid-column-menu .mat-mdc-menu-content{padding:0}.acp-grid-column-menu-body{max-height:65vh;padding:8px 16px;overflow:auto}.acp-grid-column-menu-header,.acp-grid-column-menu-footer{position:sticky;z-index:1;padding:8px 16px}.acp-grid-column-menu-header{top:0;border-bottom:1px solid var(--acp-grid-column-menu-divider-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-footer{bottom:0;border-top:1px solid var(--acp-grid-column-menu-divider-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-list{display:block;max-width:100%}.acp-grid-column-menu-list.cdk-drop-list-dragging .acp-grid-column-menu-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.acp-grid-column-menu-item{display:flex;flex-direction:row;align-items:center}.acp-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{opacity:.35;cursor:no-drop}.acp-grid-column-menu-item .cdk-drag-handle{cursor:move}.acp-grid-column-menu-item.cdk-drag-preview{border-radius:4px;box-shadow:0 0 0 1px var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-item.cdk-drag-placeholder{opacity:0}.acp-grid-column-menu-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.acp-grid-column-pin-button.mat-mdc-icon-button .mat-mdc-button-touch-target{width:100%;height:100%}.acp-grid-column-pin-option.mat-menu-item{display:flex;align-items:center;height:32px}.acp-grid-column-pin-option-placeholder{display:inline-block;width:20px;height:20px;line-height:20px;vertical-align:middle}.acp-grid-column-pin-option-text{padding:0 8px;vertical-align:middle}.acp-grid-column-drag-handle-icon:hover{cursor:move}.acp-grid-column-menu-item-label.mat-mdc-checkbox .mat-mdc-checkbox-touch-target{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3264
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridColumnMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3265
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpGridColumnMenu, isStandalone: true, selector: "acp-grid-column-menu", inputs: { columns: "columns", selectable: "selectable", selectableChecked: "selectableChecked", sortable: "sortable", pinnable: "pinnable", buttonText: "buttonText", buttonType: "buttonType", buttonColor: "buttonColor", buttonClass: "buttonClass", buttonIcon: "buttonIcon", buttonFontIcon: "buttonFontIcon", buttonSvgIcon: "buttonSvgIcon", showHeader: "showHeader", headerText: "headerText", headerTemplate: "headerTemplate", showFooter: "showFooter", footerText: "footerText", footerTemplate: "footerTemplate", pinOptions: "pinOptions" }, outputs: { columnChange: "columnChange" }, viewQueries: [{ propertyName: "menuPanel", first: true, predicate: MatMenu, descendants: true, static: true }, { propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], exportAs: ["acpGridColumnMenu"], ngImport: i0, template: "@if (buttonType === 'icon') {\n<button\n [class]=\"buttonClass\"\n matIconButton\n type=\"button\"\n [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl\"></mat-icon>\n</button>\n} @else {\n<button\n [class]=\"buttonClass\"\n [matButton]=\"buttonType\"\n type=\"button\"\n [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl\"></mat-icon>\n {{ buttonText }}\n</button>\n}\n\n<ng-template #iconTpl>\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n } @else if(buttonFontIcon) {\n <mat-icon [fontIcon]=\"buttonFontIcon\"></mat-icon>\n } @else if(buttonSvgIcon) {\n <mat-icon [svgIcon]=\"buttonSvgIcon\"></mat-icon>\n }\n</ng-template>\n\n<mat-menu #menu=\"matMenu\" class=\"acp-grid-column-menu\">\n <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n <div\n class=\"acp-grid-column-menu-content\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n >\n @if (showHeader) {\n <div class=\"acp-grid-column-menu-header\">\n @if (headerTemplate) {\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n } @else { {{headerText}} }\n </div>\n }\n\n <div class=\"acp-grid-column-menu-body\">\n @if (sortable) {\n <div\n class=\"acp-grid-column-menu-list\"\n cdkDropList\n (cdkDropListDropped)=\"_handleDroped($event)\"\n >\n @for (col of columns; track col.field) {\n <div\n class=\"acp-grid-column-menu-item\"\n cdkDrag\n [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-column-drag-handle-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path\n d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\"\n />\n </svg>\n <ng-template\n [ngTemplateOutlet]=\"checkboxList\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\"\n >\n </ng-template>\n </div>\n }\n </div>\n } @if (!sortable) {\n <div class=\"acp-grid-column-menu-list\">\n @for (col of columns; track col.field) {\n <div class=\"acp-grid-column-menu-item\">\n <ng-template\n [ngTemplateOutlet]=\"checkboxList\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\"\n >\n </ng-template>\n </div>\n }\n </div>\n }\n </div>\n\n @if (showFooter) {\n <div class=\"acp-grid-column-menu-footer\">\n @if (footerTemplate) {\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n } @else { {{footerText}} }\n </div>\n }\n </div>\n</mat-menu>\n\n<ng-template #checkboxList let-col>\n @if (pinnable) {\n <button\n class=\"acp-grid-column-pin-button\"\n matIconButton\n type=\"button\"\n [matMenuTriggerFor]=\"pinList\"\n >\n @if (col.pinned) {\n <svg\n class=\"acp-grid-icon acp-grid-column-pin-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\n </svg>\n } @if (!col.pinned) {\n <svg\n class=\"acp-grid-icon acp-grid-column-pin-off-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path\n d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\"\n />\n </svg>\n }\n </button>\n <mat-menu #pinList=\"matMenu\" class=\"acp-grid-column-pin-list\">\n @for (item of pinOptions; track item) {\n <button\n class=\"acp-grid-column-pin-option\"\n type=\"button\"\n mat-menu-item\n (click)=\"_handlePinSelect(col, item.value)\"\n >\n <span class=\"acp-grid-column-pin-option-placeholder\">\n <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n @if (col.pinned==item.value) {\n <svg\n class=\"acp-grid-icon acp-grid-column-pin-check-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n </svg>\n }\n </span>\n <span class=\"acp-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\n </button>\n }\n </mat-menu>\n } @if (selectable) {\n <mat-checkbox\n class=\"acp-grid-column-menu-item-label\"\n [(ngModel)]=\"col[selectableChecked]\"\n [disabled]=\"col.disabled\"\n (change)=\"_handleChecked(col)\"\n >{{col.header | toObservable | async}}</mat-checkbox\n >\n } @else {\n <span class=\"acp-grid-column-menu-item-label\">{{col.header | toObservable | async}}</span>\n }\n</ng-template>\n", styles: [".acp-grid-column-menu,.acp-grid-column-pin-list{color:var(--acp-grid-column-menu-text-color, var(--mat-sys-on-surface-variant))}.acp-grid-column-menu .mat-mdc-menu-content{padding:0}.acp-grid-column-menu-body{max-height:65vh;padding:8px 16px;overflow:auto}.acp-grid-column-menu-header,.acp-grid-column-menu-footer{position:sticky;z-index:1;padding:8px 16px}.acp-grid-column-menu-header{top:0;border-bottom:1px solid var(--acp-grid-column-menu-divider-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-footer{bottom:0;border-top:1px solid var(--acp-grid-column-menu-divider-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-list{display:block;max-width:100%}.acp-grid-column-menu-list.cdk-drop-list-dragging .acp-grid-column-menu-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.acp-grid-column-menu-item{display:flex;flex-direction:row;align-items:center}.acp-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{opacity:.35;cursor:no-drop}.acp-grid-column-menu-item .cdk-drag-handle{cursor:move}.acp-grid-column-menu-item.cdk-drag-preview{border-radius:4px;box-shadow:0 0 0 1px var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-item.cdk-drag-placeholder{opacity:0}.acp-grid-column-menu-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.acp-grid-column-pin-button.mat-mdc-icon-button .mat-mdc-button-touch-target{width:100%;height:100%}.acp-grid-column-pin-option.mat-menu-item{display:flex;align-items:center;height:32px}.acp-grid-column-pin-option-placeholder{display:inline-block;width:20px;height:20px;line-height:20px;vertical-align:middle}.acp-grid-column-pin-option-text{padding:0 8px;vertical-align:middle}.acp-grid-column-drag-handle-icon:hover{cursor:move}.acp-grid-column-menu-item-label.mat-mdc-checkbox .mat-mdc-checkbox-touch-target{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3268
3266
|
}
|
|
3269
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
3267
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridColumnMenu, decorators: [{
|
|
3270
3268
|
type: Component,
|
|
3271
3269
|
args: [{ selector: 'acp-grid-column-menu', exportAs: 'acpGridColumnMenu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3272
3270
|
AsyncPipe,
|
|
@@ -3363,10 +3361,10 @@ class AcpGridExpansionToggle {
|
|
|
3363
3361
|
this.opened = !this.opened;
|
|
3364
3362
|
this.toggleChange.emit(this);
|
|
3365
3363
|
}
|
|
3366
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
3367
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
3364
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridExpansionToggle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3365
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AcpGridExpansionToggle, isStandalone: true, selector: "[acpGridExpansionToggle]", inputs: { opened: "opened", expandableRow: "expandableRow", expansionRowTpl: "expansionRowTpl" }, outputs: { openedChange: "openedChange", toggleChange: "toggleChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.expanded": "opened" } }, ngImport: i0 });
|
|
3368
3366
|
}
|
|
3369
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
3367
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridExpansionToggle, decorators: [{
|
|
3370
3368
|
type: Directive,
|
|
3371
3369
|
args: [{
|
|
3372
3370
|
selector: '[acpGridExpansionToggle]',
|
|
@@ -3397,10 +3395,10 @@ class MatFlexTableResizeStrategy extends CdkFlexTableResizeStrategy {
|
|
|
3397
3395
|
getColumnCssClass(cssFriendlyColumnName) {
|
|
3398
3396
|
return `mat-column-${cssFriendlyColumnName}`;
|
|
3399
3397
|
}
|
|
3400
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
3401
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
3398
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MatFlexTableResizeStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
3399
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MatFlexTableResizeStrategy });
|
|
3402
3400
|
}
|
|
3403
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
3401
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MatFlexTableResizeStrategy, decorators: [{
|
|
3404
3402
|
type: Injectable
|
|
3405
3403
|
}] });
|
|
3406
3404
|
const FLEX_RESIZE_STRATEGY_PROVIDER = {
|
|
@@ -3451,10 +3449,10 @@ class MatColumnResize extends AbstractMatColumnResize {
|
|
|
3451
3449
|
eventDispatcher = inject(HeaderRowEventDispatcher);
|
|
3452
3450
|
ngZone = inject(NgZone);
|
|
3453
3451
|
notifier = inject(ColumnResizeNotifierSource);
|
|
3454
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
3455
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
3452
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MatColumnResize, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
3453
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: MatColumnResize, isStandalone: true, selector: "table[mat-table][columnResize]", host: { classAttribute: "mat-column-resize-table" }, providers: [...TABLE_PROVIDERS, { provide: ColumnResize, useExisting: MatColumnResize }], usesInheritance: true, ngImport: i0 });
|
|
3456
3454
|
}
|
|
3457
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
3455
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MatColumnResize, decorators: [{
|
|
3458
3456
|
type: Directive,
|
|
3459
3457
|
args: [{
|
|
3460
3458
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -3481,10 +3479,10 @@ class MatColumnResizeFlex extends AbstractMatColumnResize {
|
|
|
3481
3479
|
eventDispatcher = inject(HeaderRowEventDispatcher);
|
|
3482
3480
|
ngZone = inject(NgZone);
|
|
3483
3481
|
notifier = inject(ColumnResizeNotifierSource);
|
|
3484
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
3485
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
3482
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MatColumnResizeFlex, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
3483
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: MatColumnResizeFlex, isStandalone: true, selector: "mat-table[columnResize]", host: { classAttribute: "mat-column-resize-flex" }, providers: [...FLEX_PROVIDERS, { provide: ColumnResize, useExisting: MatColumnResizeFlex }], usesInheritance: true, ngImport: i0 });
|
|
3486
3484
|
}
|
|
3487
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
3485
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MatColumnResizeFlex, decorators: [{
|
|
3488
3486
|
type: Directive,
|
|
3489
3487
|
args: [{
|
|
3490
3488
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -3520,10 +3518,10 @@ class MatColumnResizeOverlayHandle extends ResizeOverlayHandle {
|
|
|
3520
3518
|
: originHeight,
|
|
3521
3519
|
});
|
|
3522
3520
|
}
|
|
3523
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
3524
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0
|
|
3521
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MatColumnResizeOverlayHandle, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3522
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: MatColumnResizeOverlayHandle, isStandalone: true, selector: "ng-component", host: { classAttribute: "mat-column-resize-overlay-thumb" }, viewQueries: [{ propertyName: "topElement", first: true, predicate: ["top"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: '<div #top class="mat-column-resize-overlay-thumb-top"></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3525
3523
|
}
|
|
3526
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
3524
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MatColumnResizeOverlayHandle, decorators: [{
|
|
3527
3525
|
type: Component,
|
|
3528
3526
|
args: [{
|
|
3529
3527
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
@@ -3588,10 +3586,10 @@ class MatResizable extends AbstractMatResizable {
|
|
|
3588
3586
|
set resizable(newValue) {
|
|
3589
3587
|
this.isResizable = newValue == null || newValue === '' || newValue;
|
|
3590
3588
|
}
|
|
3591
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
3592
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
3589
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MatResizable, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
3590
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: MatResizable, isStandalone: true, selector: "mat-header-cell[resizable], th[mat-header-cell][resizable]", inputs: { minWidthPx: ["matResizableMinWidthPx", "minWidthPx"], maxWidthPx: ["matResizableMaxWidthPx", "maxWidthPx"], resizable: "resizable" }, host: { properties: { "class": "resizableClass" } }, usesInheritance: true, ngImport: i0 });
|
|
3593
3591
|
}
|
|
3594
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
3592
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MatResizable, decorators: [{
|
|
3595
3593
|
type: Directive,
|
|
3596
3594
|
args: [{
|
|
3597
3595
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -4062,10 +4060,10 @@ class DataGrid {
|
|
|
4062
4060
|
_contextmenu(event, rowData, index) {
|
|
4063
4061
|
this.rowContextMenu.emit({ event, rowData, index });
|
|
4064
4062
|
}
|
|
4065
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
4066
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: DataGrid, isStandalone: true, selector: "acp-data-grid", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: false, isRequired: false, transformFunction: null }, columnResizable: { classPropertyName: "columnResizable", publicName: "columnResizable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, emptyValuePlaceholder: { classPropertyName: "emptyValuePlaceholder", publicName: "emptyValuePlaceholder", isSignal: false, isRequired: false, transformFunction: null }, pageOnFront: { classPropertyName: "pageOnFront", publicName: "pageOnFront", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, pageDisabled: { classPropertyName: "pageDisabled", publicName: "pageDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showFirstLastButtons: { classPropertyName: "showFirstLastButtons", publicName: "showFirstLastButtons", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: false, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: false, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, paginationTemplate: { classPropertyName: "paginationTemplate", publicName: "paginationTemplate", isSignal: false, isRequired: false, transformFunction: null }, sortOnFront: { classPropertyName: "sortOnFront", publicName: "sortOnFront", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sortActive: { classPropertyName: "sortActive", publicName: "sortActive", isSignal: false, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: false, isRequired: false, transformFunction: null }, sortDisableClear: { classPropertyName: "sortDisableClear", publicName: "sortDisableClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sortDisabled: { classPropertyName: "sortDisabled", publicName: "sortDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sortStart: { classPropertyName: "sortStart", publicName: "sortStart", isSignal: false, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rowStriped: { classPropertyName: "rowStriped", publicName: "rowStriped", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, expansionTemplate: { classPropertyName: "expansionTemplate", publicName: "expansionTemplate", isSignal: false, isRequired: false, transformFunction: null }, closeOthersOnExpand: { classPropertyName: "closeOthersOnExpand", publicName: "closeOthersOnExpand", isSignal: true, isRequired: false, transformFunction: null }, multiSelectable: { classPropertyName: "multiSelectable", publicName: "multiSelectable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, multiSelectionWithClick: { classPropertyName: "multiSelectionWithClick", publicName: "multiSelectionWithClick", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rowSelectable: { classPropertyName: "rowSelectable", publicName: "rowSelectable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, hideRowSelectionCheckbox: { classPropertyName: "hideRowSelectionCheckbox", publicName: "hideRowSelectionCheckbox", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, disableRowClickSelection: { classPropertyName: "disableRowClickSelection", publicName: "disableRowClickSelection", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rowSelectionFormatter: { classPropertyName: "rowSelectionFormatter", publicName: "rowSelectionFormatter", isSignal: false, isRequired: false, transformFunction: null }, rowClassFormatter: { classPropertyName: "rowClassFormatter", publicName: "rowClassFormatter", isSignal: false, isRequired: false, transformFunction: null }, rowSelected: { classPropertyName: "rowSelected", publicName: "rowSelected", isSignal: false, isRequired: false, transformFunction: null }, cellSelectable: { classPropertyName: "cellSelectable", publicName: "cellSelectable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, toolbarTitle: { classPropertyName: "toolbarTitle", publicName: "toolbarTitle", isSignal: false, isRequired: false, transformFunction: null }, toolbarTemplate: { classPropertyName: "toolbarTemplate", publicName: "toolbarTemplate", isSignal: false, isRequired: false, transformFunction: null }, columnHideable: { classPropertyName: "columnHideable", publicName: "columnHideable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnHideableChecked: { classPropertyName: "columnHideableChecked", publicName: "columnHideableChecked", isSignal: false, isRequired: false, transformFunction: null }, columnSortable: { classPropertyName: "columnSortable", publicName: "columnSortable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnPinnable: { classPropertyName: "columnPinnable", publicName: "columnPinnable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnPinOptions: { classPropertyName: "columnPinOptions", publicName: "columnPinOptions", isSignal: false, isRequired: false, transformFunction: null }, showColumnMenuButton: { classPropertyName: "showColumnMenuButton", publicName: "showColumnMenuButton", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnMenuButtonText: { classPropertyName: "columnMenuButtonText", publicName: "columnMenuButtonText", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonType: { classPropertyName: "columnMenuButtonType", publicName: "columnMenuButtonType", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonColor: { classPropertyName: "columnMenuButtonColor", publicName: "columnMenuButtonColor", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonClass: { classPropertyName: "columnMenuButtonClass", publicName: "columnMenuButtonClass", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonIcon: { classPropertyName: "columnMenuButtonIcon", publicName: "columnMenuButtonIcon", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonFontIcon: { classPropertyName: "columnMenuButtonFontIcon", publicName: "columnMenuButtonFontIcon", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonSvgIcon: { classPropertyName: "columnMenuButtonSvgIcon", publicName: "columnMenuButtonSvgIcon", isSignal: false, isRequired: false, transformFunction: null }, showColumnMenuHeader: { classPropertyName: "showColumnMenuHeader", publicName: "showColumnMenuHeader", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnMenuHeaderText: { classPropertyName: "columnMenuHeaderText", publicName: "columnMenuHeaderText", isSignal: false, isRequired: false, transformFunction: null }, columnMenuHeaderTemplate: { classPropertyName: "columnMenuHeaderTemplate", publicName: "columnMenuHeaderTemplate", isSignal: false, isRequired: false, transformFunction: null }, showColumnMenuFooter: { classPropertyName: "showColumnMenuFooter", publicName: "showColumnMenuFooter", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnMenuFooterText: { classPropertyName: "columnMenuFooterText", publicName: "columnMenuFooterText", isSignal: false, isRequired: false, transformFunction: null }, columnMenuFooterTemplate: { classPropertyName: "columnMenuFooterTemplate", publicName: "columnMenuFooterTemplate", isSignal: false, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: false, isRequired: false, transformFunction: null }, noResultTemplate: { classPropertyName: "noResultTemplate", publicName: "noResultTemplate", isSignal: false, isRequired: false, transformFunction: null }, keyboardNavigation: { classPropertyName: "keyboardNavigation", publicName: "keyboardNavigation", isSignal: true, isRequired: false, transformFunction: null }, highlightedRowIndex: { classPropertyName: "highlightedRowIndex", publicName: "highlightedRowIndex", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: false, isRequired: false, transformFunction: null }, headerExtraTemplate: { classPropertyName: "headerExtraTemplate", publicName: "headerExtraTemplate", isSignal: false, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: false, isRequired: false, transformFunction: null }, useContentRowTemplate: { classPropertyName: "useContentRowTemplate", publicName: "useContentRowTemplate", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, useContentHeaderRowTemplate: { classPropertyName: "useContentHeaderRowTemplate", publicName: "useContentHeaderRowTemplate", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, useContentFooterRowTemplate: { classPropertyName: "useContentFooterRowTemplate", publicName: "useContentFooterRowTemplate", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showSummary: { classPropertyName: "showSummary", publicName: "showSummary", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, summaryTemplate: { classPropertyName: "summaryTemplate", publicName: "summaryTemplate", isSignal: false, isRequired: false, transformFunction: null }, showSidebar: { classPropertyName: "showSidebar", publicName: "showSidebar", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sidebarTemplate: { classPropertyName: "sidebarTemplate", publicName: "sidebarTemplate", isSignal: false, isRequired: false, transformFunction: null }, showStatusbar: { classPropertyName: "showStatusbar", publicName: "showStatusbar", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, statusbarTemplate: { classPropertyName: "statusbarTemplate", publicName: "statusbarTemplate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { page: "page", sortChange: "sortChange", rowClick: "rowClick", rowContextMenu: "rowContextMenu", expansionChange: "expansionChange", rowSelectedChange: "rowSelectedChange", checkboxKeyDown: "checkboxKeyDown", checkboxKeyUp: "checkboxKeyUp", checkboxKeyPress: "checkboxKeyPress", rowKeyDown: "rowKeyDown", rowKeyUp: "rowKeyUp", rowKeyPress: "rowKeyPress", cellSelectedChange: "cellSelectedChange", columnChange: "columnChange", focusedRowChange: "focusedRowChange" }, host: { properties: { "class.acp-grid-animations-enabled": "!_animationsDisabled", "class.acp-grid-size-small": "size() === \"small\"", "class.acp-grid-size-medium": "size() === \"medium\"", "class.acp-grid-size-normal": "size() === \"normal\"", "attr.tabindex": "0" }, classAttribute: "acp-grid" }, queries: [{ propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "headerRowDefs", predicate: MatHeaderRowDef }, { propertyName: "footerRowDefs", predicate: MatFooterRow }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "columnResize", first: true, predicate: ColumnResize, descendants: true }, { propertyName: "columnMenu", first: true, predicate: AcpGridColumnMenu, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], exportAs: ["dataGrid"], usesOnChanges: true, ngImport: i0, template: "<!-- Progress bar-->\n@if (loading) {\n<div class=\"acp-grid-progress\">\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n</div>\n}\n\n<!-- Toolbar -->\n@if (showToolbar) {\n<div class=\"acp-grid-toolbar\">\n <div class=\"acp-grid-toolbar-content\">\n @if (toolbarTemplate) {\n <ng-template [ngTemplateOutlet]=\"toolbarTemplate\"></ng-template>\n } @else { @if (toolbarTitle) {\n <div class=\"acp-grid-toolbar-title\">{{ toolbarTitle }}</div>\n } }\n </div>\n <div class=\"acp-grid-toolbar-actions\">\n @if (showColumnMenuButton) {\n <acp-grid-column-menu\n [columns]=\"columns\"\n [buttonText]=\"columnMenuButtonText\"\n [buttonType]=\"columnMenuButtonType\"\n [buttonColor]=\"columnMenuButtonColor\"\n [buttonClass]=\"columnMenuButtonClass\"\n [buttonIcon]=\"columnMenuButtonIcon\"\n [buttonFontIcon]=\"columnMenuButtonFontIcon\"\n [buttonSvgIcon]=\"columnMenuButtonSvgIcon\"\n [selectable]=\"columnHideable\"\n [selectableChecked]=\"columnHideableChecked\"\n [sortable]=\"columnSortable\"\n [pinnable]=\"columnPinnable\"\n [showHeader]=\"showColumnMenuHeader\"\n [headerText]=\"columnMenuHeaderText\"\n [headerTemplate]=\"columnMenuHeaderTemplate\"\n [showFooter]=\"showColumnMenuFooter\"\n [footerText]=\"columnMenuFooterText\"\n [footerTemplate]=\"columnMenuFooterTemplate\"\n [pinOptions]=\"columnPinOptions\"\n (columnChange)=\"_onColumnChange($event)\"\n ></acp-grid-column-menu>\n }\n </div>\n</div>\n}\n\n<div class=\"acp-grid-main acp-grid-layout\">\n <!-- Table content -->\n <div class=\"acp-grid-content acp-grid-layout\">\n <div #tableContainer class=\"mat-table-container\" [class.mat-table-with-data]=\"!_hasNoResult\">\n @if (!columnResizable) {\n <table\n mat-table\n [class.mat-table-hover]=\"rowHover\"\n [class.mat-table-striped]=\"rowStriped\"\n [class.mat-table-expandable]=\"expandable\"\n [dataSource]=\"dataSource\"\n [multiTemplateDataRows]=\"expandable\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n [matSortDisableClear]=\"sortDisableClear\"\n [matSortDisabled]=\"sortDisabled\"\n [matSortStart]=\"sortStart\"\n (matSortChange)=\"_onSortChange($event)\"\n [trackBy]=\"trackBy\"\n >\n @if (rowSelectable && !hideRowSelectionCheckbox) {\n <ng-container matColumnDef=\"acpGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"acp-grid-checkbox-cell\">\n @if (multiSelectable) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n (change)=\"$event ? _toggleMasterCheckbox() : null\"\n ></mat-checkbox>\n }\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n class=\"acp-grid-checkbox-cell\"\n >\n @if ( !( rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row,\n _getIndex(index, dataIndex)) ) ) {\n <mat-checkbox\n [disabled]=\"\n rowSelectionFormatter.disabled &&\n rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\n \"\n [checked]=\"rowSelection.isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\"\n (keydown)=\"_onCheckboxKeyDown($event)\"\n (keyup)=\"_onCheckboxKeyUp($event)\"\n (keypress)=\"_onCheckboxKeyPress($event)\"\n ></mat-checkbox>\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"acp-grid-checkbox-cell\"></td>\n </ng-container>\n } @for (col of columns; track col.field) {\n <ng-container\n [matColumnDef]=\"col.field\"\n [sticky]=\"col.pinned === 'left'\"\n [stickyEnd]=\"col.pinned === 'right'\"\n >\n <th\n mat-header-cell\n *matHeaderCellDef\n [class]=\"col | colClass\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n <div class=\"mat-header-cell-inner\">\n @if (headerTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(headerTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else {\n <div\n [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n [arrowPosition]=\"$safeNavigationMigration(col.sortProp?.arrowPosition)!\"\n [start]=\"$safeNavigationMigration(col.sortProp?.start)!\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n }\n <span>{{ col.header | toObservable | async }}</span>\n @if (col.sortable) {\n <svg\n class=\"acp-grid-icon mat-sort-header-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n </svg>\n }\n </div>\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTplBase\"\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\"\n ></ng-template>\n } }\n </div>\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [class]=\"\n col\n | colClass\n : row\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n acpGridSelectableCell\n [cellSelectable]=\"cellSelectable\"\n (cellSelectedChange)=\"_selectCell($event, row, col)\"\n >\n @if (cellTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(cellTemplate)?.[col.field]) |\n isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.cellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.cellTemplate!\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.showExpand) {\n <button\n class=\"acp-grid-row-expand-button\"\n matIconButton\n acpGridExpansionToggle\n type=\"button\"\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex)\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-row-expand-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n }\n <acp-grid-cell\n [rowData]=\"row\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n (rowDataChange)=\"_onRowDataChange($event)\"\n ></acp-grid-cell>\n } } }\n </td>\n <td\n mat-footer-cell\n *matFooterCellDef\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n } @if (summaryTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(summaryTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: _getColData(data, col),\n colData: _getColData(data, col),\n colDef: col,\n }\"\n ></ng-template>\n } @else {\n <acp-grid-cell\n [summary]=\"true\"\n [data]=\"data\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n ></acp-grid-cell>\n } }\n </td>\n </ng-container>\n } @if (!useContentHeaderRowTemplate) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (!useContentRowTemplate) {\n <tr\n mat-row\n *matRowDef=\"\n let row;\n let index = index;\n let dataIndex = dataIndex;\n columns: displayedColumns\n \"\n [class]=\"row | rowClass: index : dataIndex : rowClassFormatter\"\n [class.selected]=\"rowSelection.isSelected(row)\"\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\"\n (keydown)=\"_onRowKeyDown($event, row, _getIndex(index, dataIndex))\"\n (keyup)=\"_onRowKeyUp($event, row, _getIndex(index, dataIndex))\"\n (keypress)=\"_onRowKeyPress($event, row, _getIndex(index, dataIndex))\"\n ></tr>\n } @if (_whetherShowSummary) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (expandable) {\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"acpGridExpansionColumnDef\">\n <td\n mat-cell\n *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns.length\"\n >\n <div class=\"acp-grid-expansion-detail-wrapper\">\n <div class=\"acp-grid-expansion-detail\">\n <ng-template\n [ngTemplateOutlet]=\"expansionTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: dataIndex,\n expanded: expansionRowStates[dataIndex].expanded,\n }\"\n ></ng-template>\n </div>\n </div>\n </td>\n </ng-container>\n <tr\n mat-row\n *matRowDef=\"\n let row;\n columns: ['acpGridExpansionColumnDef'];\n let dataIndex = dataIndex\n \"\n class=\"acp-grid-expansion\"\n [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n ></tr>\n }\n </table>\n } @else {\n <!-- TODO: Use flexbox-based mat-table -->\n <table\n mat-table\n columnResize\n [class.mat-table-hover]=\"rowHover\"\n [class.mat-table-striped]=\"rowStriped\"\n [class.mat-table-expandable]=\"expandable\"\n [dataSource]=\"dataSource\"\n [multiTemplateDataRows]=\"expandable\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n [matSortDisableClear]=\"sortDisableClear\"\n [matSortDisabled]=\"sortDisabled\"\n [matSortStart]=\"sortStart\"\n (matSortChange)=\"_onSortChange($event)\"\n [trackBy]=\"trackBy\"\n >\n @if (rowSelectable && !hideRowSelectionCheckbox) {\n <ng-container matColumnDef=\"acpGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"acp-grid-checkbox-cell\">\n @if (multiSelectable) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n (change)=\"$event ? _toggleMasterCheckbox() : null\"\n ></mat-checkbox>\n }\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n class=\"acp-grid-checkbox-cell\"\n >\n @if ( !( rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row,\n _getIndex(index, dataIndex)) ) ) {\n <mat-checkbox\n [disabled]=\"\n rowSelectionFormatter.disabled &&\n rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\n \"\n [checked]=\"rowSelection.isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\"\n (keydown)=\"_onCheckboxKeyDown($event)\"\n (keyup)=\"_onCheckboxKeyUp($event)\"\n (keypress)=\"_onCheckboxKeyPress($event)\"\n ></mat-checkbox>\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"acp-grid-checkbox-cell\"></td>\n </ng-container>\n } @for (col of columns; track col.field) {\n <ng-container\n [matColumnDef]=\"col.field\"\n [sticky]=\"col.pinned === 'left'\"\n [stickyEnd]=\"col.pinned === 'right'\"\n >\n <th\n mat-header-cell\n *matHeaderCellDef\n [class]=\"col | colClass\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n [resizable]=\"col.resizable\"\n [matResizableMinWidthPx]=\"col.minWidth\"\n [matResizableMaxWidthPx]=\"col.maxWidth\"\n >\n <div class=\"mat-header-cell-inner\">\n @if (headerTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(headerTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else {\n <div\n [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n [arrowPosition]=\"$safeNavigationMigration(col.sortProp?.arrowPosition)!\"\n [start]=\"$safeNavigationMigration(col.sortProp?.start)!\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n }\n <span>{{ col.header | toObservable | async }}</span>\n @if (col.sortable) {\n <svg\n class=\"acp-grid-icon mat-sort-header-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n </svg>\n }\n </div>\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTplBase\"\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\"\n ></ng-template>\n } }\n </div>\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [class]=\"\n col\n | colClass\n : row\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n acpGridSelectableCell\n [cellSelectable]=\"cellSelectable\"\n (cellSelectedChange)=\"_selectCell($event, row, col)\"\n >\n @if (cellTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(cellTemplate)?.[col.field]) |\n isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.cellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.cellTemplate!\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.showExpand) {\n <button\n class=\"acp-grid-row-expand-button\"\n matIconButton\n acpGridExpansionToggle\n type=\"button\"\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex)\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-row-expand-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n }\n <acp-grid-cell\n [rowData]=\"row\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n (rowDataChange)=\"_onRowDataChange($event)\"\n ></acp-grid-cell>\n } } }\n </td>\n <td\n mat-footer-cell\n *matFooterCellDef\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n } @if (summaryTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(summaryTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: _getColData(data, col),\n colData: _getColData(data, col),\n colDef: col,\n }\"\n ></ng-template>\n } @else {\n <acp-grid-cell\n [summary]=\"true\"\n [data]=\"data\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n ></acp-grid-cell>\n } }\n </td>\n </ng-container>\n } @if (!useContentHeaderRowTemplate) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (!useContentRowTemplate) {\n <tr\n mat-row\n *matRowDef=\"\n let row;\n let index = index;\n let dataIndex = dataIndex;\n columns: displayedColumns\n \"\n [class]=\"row | rowClass: index : dataIndex : rowClassFormatter\"\n [class.selected]=\"rowSelection.isSelected(row)\"\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\"\n (keydown)=\"_onRowKeyDown($event, row, _getIndex(index, dataIndex))\"\n (keyup)=\"_onRowKeyUp($event, row, _getIndex(index, dataIndex))\"\n (keypress)=\"_onRowKeyPress($event, row, _getIndex(index, dataIndex))\"\n ></tr>\n } @if (_whetherShowSummary) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (expandable) {\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"acpGridExpansionColumnDef\">\n <td\n mat-cell\n *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns.length\"\n >\n <div class=\"acp-grid-expansion-detail-wrapper\">\n <div class=\"acp-grid-expansion-detail\">\n <ng-template\n [ngTemplateOutlet]=\"expansionTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: dataIndex,\n expanded: expansionRowStates[dataIndex].expanded,\n }\"\n ></ng-template>\n </div>\n </div>\n </td>\n </ng-container>\n <tr\n mat-row\n *matRowDef=\"\n let row;\n columns: ['acpGridExpansionColumnDef'];\n let dataIndex = dataIndex\n \"\n class=\"acp-grid-expansion\"\n [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n ></tr>\n }\n </table>\n }\n </div>\n\n <!-- No result -->\n @if (_hasNoResult) {\n <div class=\"acp-grid-no-result\">\n @if (noResultTemplate) {\n <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\n } @else { {{ noResultText }} }\n </div>\n }\n </div>\n\n <!-- Tool sidebar -->\n @if (showSidebar) {\n <div class=\"acp-grid-sidebar\">\n @if (sidebarTemplate) {\n <ng-template [ngTemplateOutlet]=\"sidebarTemplate\"></ng-template>\n }\n </div>\n }\n</div>\n\n<div class=\"acp-grid-footer\">\n <!-- Status Bar -->\n @if (showStatusbar) {\n <div class=\"acp-grid-statusbar\">\n @if (statusbarTemplate) {\n <ng-template [ngTemplateOutlet]=\"statusbarTemplate\"></ng-template>\n }\n </div>\n }\n\n <!-- Pagination -->\n <div class=\"acp-grid-pagination\">\n @if (paginationTemplate) {\n <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\n } @else {\n <mat-paginator\n [class.mat-paginator-hidden]=\"!showPaginator\"\n [showFirstLastButtons]=\"showFirstLastButtons\"\n [length]=\"length\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [hidePageSize]=\"hidePageSize\"\n (page)=\"_onPage($event)\"\n [disabled]=\"pageDisabled\"\n ></mat-paginator>\n }\n </div>\n</div>\n\n<!-- Header template for extra content -->\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\n @if (headerExtraTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(headerExtraTemplate)?.[col.field]) | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } }\n</ng-template>\n", styles: [".mat-column-resize-table.cdk-column-resize-with-resized-column{table-layout:fixed}.mat-column-resize-flex .mat-mdc-header-cell,.mat-column-resize-flex .mat-mdc-cell{box-sizing:border-box;min-width:32px}.mat-mdc-header-cell{position:relative}.mat-resizable{box-sizing:border-box}.mat-mdc-header-cell:not(.mat-resizable):after,.mat-resizable-handle{position:absolute;bottom:0;top:0;right:0;width:1px;background:transparent;transition:background .3s cubic-bezier(.55,0,.55,.2)}.mat-mdc-header-cell:not(.mat-resizable):after{content:\"\"}[dir=rtl] .mat-mdc-header-cell:not(.mat-resizable):after,[dir=rtl] .mat-resizable-handle{left:0;right:auto}[dir=rtl] .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-header-cell,[dir=rtl] .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell{border-left:none}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell{border-right:none}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell:not(.mat-resizable):after{background-color:var(--acp-grid-resizable-handle-disabled-background-color, var(--mat-sys-outline-variant))}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle{background-color:var(--acp-grid-resizable-handle-hover-background-color, var(--mat-sys-primary))}.mat-resizable.cdk-resizable-overlay-thumb-active>.mat-resizable-handle{opacity:0;transition:none}.mat-resizable-handle:focus,.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus{outline:none;background-color:var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary))}.mat-column-resize-overlay-thumb{background:transparent;cursor:col-resize;width:100%;height:100%;transition:background .3s cubic-bezier(.55,0,.55,.2);-webkit-user-select:none;user-select:none}.mat-column-resize-overlay-thumb:active{will-change:transform;background:linear-gradient(90deg,transparent,transparent 7px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 7px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 9px,transparent 9px,transparent)}.mat-column-resize-overlay-thumb:active .mat-column-resize-overlay-thumb-top{background:linear-gradient(90deg,transparent,transparent 4px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 4px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 12px,transparent 12px,transparent)}.mat-column-resize-overlay-thumb-top{width:100%}.acp-grid{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant));border-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium))}.acp-grid .mat-mdc-table{--mat-table-row-item-outline-color: var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid .mat-mdc-table.mat-table-striped .mat-row-odd{background-color:var(--acp-grid-table-row-striped-background-color, var(--mat-sys-surface-container))}.acp-grid .mat-mdc-table.mat-table-hover .mat-mdc-row:hover{background-color:var(--acp-grid-table-row-hover-background-color, var(--mat-sys-secondary-container))}.acp-grid .mat-mdc-table.mat-table-hover .mat-mdc-row.selected:hover{background-color:var(--acp-grid-table-row-selected-hover-background-color, var(--mat-sys-primary-container))}.acp-grid .mat-mdc-table .mat-mdc-row.selected{background-color:var(--acp-grid-table-row-selected-background-color, var(--mat-sys-secondary-container))}.acp-grid .mat-mdc-table .mat-mdc-cell.selected{box-shadow:inset 0 0 0 1px var(--acp-grid-table-cell-selected-outline-color, var(--mat-sys-primary))}.acp-grid .mat-table-container{overflow:auto}.acp-grid .mat-table-container.mat-table-with-data{flex:1}.acp-grid .mat-mdc-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-header-cell:not(.acp-grid-checkbox-cell),.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-footer-cell:not(.acp-grid-checkbox-cell),.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-cell:not(.acp-grid-checkbox-cell){min-width:var(--acp-grid-table-cell-min-width, 80px)}.acp-grid .mat-table-sticky-left{border-right:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .acp-grid .mat-table-sticky-left{border-right-width:0;border-left:1px solid var(--mat-table-row-item-outline-color)}.acp-grid .mat-table-sticky-right{border-left:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .acp-grid .mat-table-sticky-right{border-left-width:0;border-right:1px solid var(--mat-table-row-item-outline-color)}.acp-grid .mat-mdc-footer-cell{border-top:1px solid var(--mat-table-row-item-outline-color);background-color:var(--acp-grid-table-footer-background-color, var(--mat-sys-surface-container))}.acp-grid .mat-mdc-row.acp-grid-expansion{height:0;overflow:hidden}.acp-grid .mat-mdc-row.acp-grid-expansion .mat-mdc-cell{padding-top:0;padding-bottom:0}.acp-grid .mat-mdc-row.acp-grid-expansion.collapsed .mat-mdc-cell{border-bottom-width:0}.acp-grid .mat-sort-header-icon{margin-left:4px}[dir=rtl] .acp-grid .mat-sort-header-icon{margin-left:0;margin-right:4px}.acp-grid .mat-header-cell-inner{display:inline-flex;align-items:center;vertical-align:middle}.acp-grid .mat-mdc-paginator{border-top:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant));border-bottom-left-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium));border-bottom-right-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium))}.acp-grid .mat-paginator-hidden{display:none}.acp-grid .acp-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mat-checkbox-state-layer-size, 40px)) / 2)}.acp-grid-progress{position:absolute;top:0;z-index:120;width:100%}.acp-grid-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-bottom:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-toolbar-content{flex:1;width:0;padding:0 8px}.acp-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.acp-grid-content{flex-direction:column;width:0}.acp-grid-sidebar{max-width:50%;border-left:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}[dir=rtl] .acp-grid-sidebar{border-left-width:0;border-right:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-footer{position:relative;z-index:1}.acp-grid-statusbar{display:flex;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-top:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.acp-grid-expansion-placeholder{display:inline-block;vertical-align:middle;width:var(--mat-icon-button-state-layer-size, var(--acp-grid-row-expand-button-size, 40px));height:var(--mat-icon-button-state-layer-size, var(--acp-grid-row-expand-button-size, 40px))}.acp-grid-expansion-detail-wrapper{display:grid;grid-template-rows:0fr;grid-template-columns:100%;padding:0;overflow:hidden}.acp-grid-expansion.expanded .acp-grid-expansion-detail-wrapper{grid-template-rows:1fr;padding:calc((var(--mat-table-row-item-container-height, 52px) - 20px) / 2) 0}.acp-grid-expansion-detail{min-height:0}.acp-grid-animations-enabled .acp-grid-expansion-detail-wrapper{transition:all 225ms cubic-bezier(.4,0,.2,1)}.acp-grid-row-expand-button.expanded .acp-grid-row-expand-icon{transform:rotate(90deg)}.acp-grid-row-expand-button.mat-mdc-icon-button,.acp-grid-row-expand-button+acp-grid-cell{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: MatResizable, selector: "mat-header-cell[resizable], th[mat-header-cell][resizable]", inputs: ["matResizableMinWidthPx", "matResizableMaxWidthPx", "resizable"] }, { kind: "directive", type: MatColumnResize, selector: "table[mat-table][columnResize]" }, { kind: "component", type: AcpGridCell, selector: "acp-grid-cell", inputs: ["rowData", "colDef", "data", "summary", "placeholder"], outputs: ["rowDataChange"], exportAs: ["acpGridCell"] }, { kind: "component", type: AcpGridColumnMenu, selector: "acp-grid-column-menu", inputs: ["columns", "selectable", "selectableChecked", "sortable", "pinnable", "buttonText", "buttonType", "buttonColor", "buttonClass", "buttonIcon", "buttonFontIcon", "buttonSvgIcon", "showHeader", "headerText", "headerTemplate", "showFooter", "footerText", "footerTemplate", "pinOptions"], outputs: ["columnChange"], exportAs: ["acpGridColumnMenu"] }, { kind: "directive", type: AcpGridSelectableCell, selector: "[acpGridSelectableCell]", inputs: ["cellSelectable"], outputs: ["cellSelectedChange"] }, { kind: "directive", type: AcpGridExpansionToggle, selector: "[acpGridExpansionToggle]", inputs: ["opened", "expandableRow", "expansionRowTpl"], outputs: ["openedChange", "toggleChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AcpIsTemplateRefPipe, name: "isTemplateRef" }, { kind: "pipe", type: AcpGridColClassPipe, name: "colClass" }, { kind: "pipe", type: AcpGridRowClassPipe, name: "rowClass" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4063
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4064
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGrid, isStandalone: true, selector: "acp-data-grid", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: false, isRequired: false, transformFunction: null }, columnResizable: { classPropertyName: "columnResizable", publicName: "columnResizable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, emptyValuePlaceholder: { classPropertyName: "emptyValuePlaceholder", publicName: "emptyValuePlaceholder", isSignal: false, isRequired: false, transformFunction: null }, pageOnFront: { classPropertyName: "pageOnFront", publicName: "pageOnFront", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, pageDisabled: { classPropertyName: "pageDisabled", publicName: "pageDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showFirstLastButtons: { classPropertyName: "showFirstLastButtons", publicName: "showFirstLastButtons", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: false, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: false, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, paginationTemplate: { classPropertyName: "paginationTemplate", publicName: "paginationTemplate", isSignal: false, isRequired: false, transformFunction: null }, sortOnFront: { classPropertyName: "sortOnFront", publicName: "sortOnFront", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sortActive: { classPropertyName: "sortActive", publicName: "sortActive", isSignal: false, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: false, isRequired: false, transformFunction: null }, sortDisableClear: { classPropertyName: "sortDisableClear", publicName: "sortDisableClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sortDisabled: { classPropertyName: "sortDisabled", publicName: "sortDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sortStart: { classPropertyName: "sortStart", publicName: "sortStart", isSignal: false, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rowStriped: { classPropertyName: "rowStriped", publicName: "rowStriped", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, expansionTemplate: { classPropertyName: "expansionTemplate", publicName: "expansionTemplate", isSignal: false, isRequired: false, transformFunction: null }, closeOthersOnExpand: { classPropertyName: "closeOthersOnExpand", publicName: "closeOthersOnExpand", isSignal: true, isRequired: false, transformFunction: null }, multiSelectable: { classPropertyName: "multiSelectable", publicName: "multiSelectable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, multiSelectionWithClick: { classPropertyName: "multiSelectionWithClick", publicName: "multiSelectionWithClick", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rowSelectable: { classPropertyName: "rowSelectable", publicName: "rowSelectable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, hideRowSelectionCheckbox: { classPropertyName: "hideRowSelectionCheckbox", publicName: "hideRowSelectionCheckbox", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, disableRowClickSelection: { classPropertyName: "disableRowClickSelection", publicName: "disableRowClickSelection", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rowSelectionFormatter: { classPropertyName: "rowSelectionFormatter", publicName: "rowSelectionFormatter", isSignal: false, isRequired: false, transformFunction: null }, rowClassFormatter: { classPropertyName: "rowClassFormatter", publicName: "rowClassFormatter", isSignal: false, isRequired: false, transformFunction: null }, rowSelected: { classPropertyName: "rowSelected", publicName: "rowSelected", isSignal: false, isRequired: false, transformFunction: null }, cellSelectable: { classPropertyName: "cellSelectable", publicName: "cellSelectable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, toolbarTitle: { classPropertyName: "toolbarTitle", publicName: "toolbarTitle", isSignal: false, isRequired: false, transformFunction: null }, toolbarTemplate: { classPropertyName: "toolbarTemplate", publicName: "toolbarTemplate", isSignal: false, isRequired: false, transformFunction: null }, columnHideable: { classPropertyName: "columnHideable", publicName: "columnHideable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnHideableChecked: { classPropertyName: "columnHideableChecked", publicName: "columnHideableChecked", isSignal: false, isRequired: false, transformFunction: null }, columnSortable: { classPropertyName: "columnSortable", publicName: "columnSortable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnPinnable: { classPropertyName: "columnPinnable", publicName: "columnPinnable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnPinOptions: { classPropertyName: "columnPinOptions", publicName: "columnPinOptions", isSignal: false, isRequired: false, transformFunction: null }, showColumnMenuButton: { classPropertyName: "showColumnMenuButton", publicName: "showColumnMenuButton", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnMenuButtonText: { classPropertyName: "columnMenuButtonText", publicName: "columnMenuButtonText", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonType: { classPropertyName: "columnMenuButtonType", publicName: "columnMenuButtonType", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonColor: { classPropertyName: "columnMenuButtonColor", publicName: "columnMenuButtonColor", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonClass: { classPropertyName: "columnMenuButtonClass", publicName: "columnMenuButtonClass", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonIcon: { classPropertyName: "columnMenuButtonIcon", publicName: "columnMenuButtonIcon", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonFontIcon: { classPropertyName: "columnMenuButtonFontIcon", publicName: "columnMenuButtonFontIcon", isSignal: false, isRequired: false, transformFunction: null }, columnMenuButtonSvgIcon: { classPropertyName: "columnMenuButtonSvgIcon", publicName: "columnMenuButtonSvgIcon", isSignal: false, isRequired: false, transformFunction: null }, showColumnMenuHeader: { classPropertyName: "showColumnMenuHeader", publicName: "showColumnMenuHeader", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnMenuHeaderText: { classPropertyName: "columnMenuHeaderText", publicName: "columnMenuHeaderText", isSignal: false, isRequired: false, transformFunction: null }, columnMenuHeaderTemplate: { classPropertyName: "columnMenuHeaderTemplate", publicName: "columnMenuHeaderTemplate", isSignal: false, isRequired: false, transformFunction: null }, showColumnMenuFooter: { classPropertyName: "showColumnMenuFooter", publicName: "showColumnMenuFooter", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, columnMenuFooterText: { classPropertyName: "columnMenuFooterText", publicName: "columnMenuFooterText", isSignal: false, isRequired: false, transformFunction: null }, columnMenuFooterTemplate: { classPropertyName: "columnMenuFooterTemplate", publicName: "columnMenuFooterTemplate", isSignal: false, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: false, isRequired: false, transformFunction: null }, noResultTemplate: { classPropertyName: "noResultTemplate", publicName: "noResultTemplate", isSignal: false, isRequired: false, transformFunction: null }, keyboardNavigation: { classPropertyName: "keyboardNavigation", publicName: "keyboardNavigation", isSignal: true, isRequired: false, transformFunction: null }, highlightedRowIndex: { classPropertyName: "highlightedRowIndex", publicName: "highlightedRowIndex", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: false, isRequired: false, transformFunction: null }, headerExtraTemplate: { classPropertyName: "headerExtraTemplate", publicName: "headerExtraTemplate", isSignal: false, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: false, isRequired: false, transformFunction: null }, useContentRowTemplate: { classPropertyName: "useContentRowTemplate", publicName: "useContentRowTemplate", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, useContentHeaderRowTemplate: { classPropertyName: "useContentHeaderRowTemplate", publicName: "useContentHeaderRowTemplate", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, useContentFooterRowTemplate: { classPropertyName: "useContentFooterRowTemplate", publicName: "useContentFooterRowTemplate", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showSummary: { classPropertyName: "showSummary", publicName: "showSummary", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, summaryTemplate: { classPropertyName: "summaryTemplate", publicName: "summaryTemplate", isSignal: false, isRequired: false, transformFunction: null }, showSidebar: { classPropertyName: "showSidebar", publicName: "showSidebar", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, sidebarTemplate: { classPropertyName: "sidebarTemplate", publicName: "sidebarTemplate", isSignal: false, isRequired: false, transformFunction: null }, showStatusbar: { classPropertyName: "showStatusbar", publicName: "showStatusbar", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, statusbarTemplate: { classPropertyName: "statusbarTemplate", publicName: "statusbarTemplate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { page: "page", sortChange: "sortChange", rowClick: "rowClick", rowContextMenu: "rowContextMenu", expansionChange: "expansionChange", rowSelectedChange: "rowSelectedChange", checkboxKeyDown: "checkboxKeyDown", checkboxKeyUp: "checkboxKeyUp", checkboxKeyPress: "checkboxKeyPress", rowKeyDown: "rowKeyDown", rowKeyUp: "rowKeyUp", rowKeyPress: "rowKeyPress", cellSelectedChange: "cellSelectedChange", columnChange: "columnChange", focusedRowChange: "focusedRowChange" }, host: { properties: { "class.acp-grid-animations-enabled": "!_animationsDisabled", "class.acp-grid-size-small": "size() === \"small\"", "class.acp-grid-size-medium": "size() === \"medium\"", "class.acp-grid-size-normal": "size() === \"normal\"", "attr.tabindex": "0" }, classAttribute: "acp-grid" }, queries: [{ propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "headerRowDefs", predicate: MatHeaderRowDef }, { propertyName: "footerRowDefs", predicate: MatFooterRow }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "columnResize", first: true, predicate: ColumnResize, descendants: true }, { propertyName: "columnMenu", first: true, predicate: AcpGridColumnMenu, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], exportAs: ["dataGrid"], usesOnChanges: true, ngImport: i0, template: "<!-- Progress bar-->\n@if (loading) {\n<div class=\"acp-grid-progress\">\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n</div>\n}\n\n<!-- Toolbar -->\n@if (showToolbar) {\n<div class=\"acp-grid-toolbar\">\n <div class=\"acp-grid-toolbar-content\">\n @if (toolbarTemplate) {\n <ng-template [ngTemplateOutlet]=\"toolbarTemplate\"></ng-template>\n } @else { @if (toolbarTitle) {\n <div class=\"acp-grid-toolbar-title\">{{ toolbarTitle }}</div>\n } }\n </div>\n <div class=\"acp-grid-toolbar-actions\">\n @if (showColumnMenuButton) {\n <acp-grid-column-menu\n [columns]=\"columns\"\n [buttonText]=\"columnMenuButtonText\"\n [buttonType]=\"columnMenuButtonType\"\n [buttonColor]=\"columnMenuButtonColor\"\n [buttonClass]=\"columnMenuButtonClass\"\n [buttonIcon]=\"columnMenuButtonIcon\"\n [buttonFontIcon]=\"columnMenuButtonFontIcon\"\n [buttonSvgIcon]=\"columnMenuButtonSvgIcon\"\n [selectable]=\"columnHideable\"\n [selectableChecked]=\"columnHideableChecked\"\n [sortable]=\"columnSortable\"\n [pinnable]=\"columnPinnable\"\n [showHeader]=\"showColumnMenuHeader\"\n [headerText]=\"columnMenuHeaderText\"\n [headerTemplate]=\"columnMenuHeaderTemplate\"\n [showFooter]=\"showColumnMenuFooter\"\n [footerText]=\"columnMenuFooterText\"\n [footerTemplate]=\"columnMenuFooterTemplate\"\n [pinOptions]=\"columnPinOptions\"\n (columnChange)=\"_onColumnChange($event)\"\n ></acp-grid-column-menu>\n }\n </div>\n</div>\n}\n\n<div class=\"acp-grid-main acp-grid-layout\">\n <!-- Table content -->\n <div class=\"acp-grid-content acp-grid-layout\">\n <div #tableContainer class=\"mat-table-container\" [class.mat-table-with-data]=\"!_hasNoResult\">\n @if (!columnResizable) {\n <table\n mat-table\n [class.mat-table-hover]=\"rowHover\"\n [class.mat-table-striped]=\"rowStriped\"\n [class.mat-table-expandable]=\"expandable\"\n [dataSource]=\"dataSource\"\n [multiTemplateDataRows]=\"expandable\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n [matSortDisableClear]=\"sortDisableClear\"\n [matSortDisabled]=\"sortDisabled\"\n [matSortStart]=\"sortStart\"\n (matSortChange)=\"_onSortChange($event)\"\n [trackBy]=\"trackBy\"\n >\n @if (rowSelectable && !hideRowSelectionCheckbox) {\n <ng-container matColumnDef=\"acpGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"acp-grid-checkbox-cell\">\n @if (multiSelectable) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n (change)=\"$event ? _toggleMasterCheckbox() : null\"\n ></mat-checkbox>\n }\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n class=\"acp-grid-checkbox-cell\"\n >\n @if ( !( rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row,\n _getIndex(index, dataIndex)) ) ) {\n <mat-checkbox\n [disabled]=\"\n rowSelectionFormatter.disabled &&\n rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\n \"\n [checked]=\"rowSelection.isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\"\n (keydown)=\"_onCheckboxKeyDown($event)\"\n (keyup)=\"_onCheckboxKeyUp($event)\"\n (keypress)=\"_onCheckboxKeyPress($event)\"\n ></mat-checkbox>\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"acp-grid-checkbox-cell\"></td>\n </ng-container>\n } @for (col of columns; track col.field) {\n <ng-container\n [matColumnDef]=\"col.field\"\n [sticky]=\"col.pinned === 'left'\"\n [stickyEnd]=\"col.pinned === 'right'\"\n >\n <th\n mat-header-cell\n *matHeaderCellDef\n [class]=\"col | colClass\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n <div class=\"mat-header-cell-inner\">\n @if (headerTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(headerTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else {\n <div\n [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n [arrowPosition]=\"$safeNavigationMigration(col.sortProp?.arrowPosition)!\"\n [start]=\"$safeNavigationMigration(col.sortProp?.start)!\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n }\n <span>{{ col.header | toObservable | async }}</span>\n @if (col.sortable) {\n <svg\n class=\"acp-grid-icon mat-sort-header-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n </svg>\n }\n </div>\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTplBase\"\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\"\n ></ng-template>\n } }\n </div>\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [class]=\"\n col\n | colClass\n : row\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n acpGridSelectableCell\n [cellSelectable]=\"cellSelectable\"\n (cellSelectedChange)=\"_selectCell($event, row, col)\"\n >\n @if (cellTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(cellTemplate)?.[col.field]) |\n isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.cellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.cellTemplate!\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.showExpand) {\n <button\n class=\"acp-grid-row-expand-button\"\n matIconButton\n acpGridExpansionToggle\n type=\"button\"\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex)\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-row-expand-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n }\n <acp-grid-cell\n [rowData]=\"row\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n (rowDataChange)=\"_onRowDataChange($event)\"\n ></acp-grid-cell>\n } } }\n </td>\n <td\n mat-footer-cell\n *matFooterCellDef\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n } @if (summaryTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(summaryTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: _getColData(data, col),\n colData: _getColData(data, col),\n colDef: col,\n }\"\n ></ng-template>\n } @else {\n <acp-grid-cell\n [summary]=\"true\"\n [data]=\"data\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n ></acp-grid-cell>\n } }\n </td>\n </ng-container>\n } @if (!useContentHeaderRowTemplate) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (!useContentRowTemplate) {\n <tr\n mat-row\n *matRowDef=\"\n let row;\n let index = index;\n let dataIndex = dataIndex;\n columns: displayedColumns\n \"\n [class]=\"row | rowClass: index : dataIndex : rowClassFormatter\"\n [class.selected]=\"rowSelection.isSelected(row)\"\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\"\n (keydown)=\"_onRowKeyDown($event, row, _getIndex(index, dataIndex))\"\n (keyup)=\"_onRowKeyUp($event, row, _getIndex(index, dataIndex))\"\n (keypress)=\"_onRowKeyPress($event, row, _getIndex(index, dataIndex))\"\n ></tr>\n } @if (_whetherShowSummary) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (expandable) {\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"acpGridExpansionColumnDef\">\n <td\n mat-cell\n *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns.length\"\n >\n <div class=\"acp-grid-expansion-detail-wrapper\">\n <div class=\"acp-grid-expansion-detail\">\n <ng-template\n [ngTemplateOutlet]=\"expansionTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: dataIndex,\n expanded: expansionRowStates[dataIndex].expanded,\n }\"\n ></ng-template>\n </div>\n </div>\n </td>\n </ng-container>\n <tr\n mat-row\n *matRowDef=\"\n let row;\n columns: ['acpGridExpansionColumnDef'];\n let dataIndex = dataIndex\n \"\n class=\"acp-grid-expansion\"\n [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n ></tr>\n }\n </table>\n } @else {\n <!-- TODO: Use flexbox-based mat-table -->\n <table\n mat-table\n columnResize\n [class.mat-table-hover]=\"rowHover\"\n [class.mat-table-striped]=\"rowStriped\"\n [class.mat-table-expandable]=\"expandable\"\n [dataSource]=\"dataSource\"\n [multiTemplateDataRows]=\"expandable\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n [matSortDisableClear]=\"sortDisableClear\"\n [matSortDisabled]=\"sortDisabled\"\n [matSortStart]=\"sortStart\"\n (matSortChange)=\"_onSortChange($event)\"\n [trackBy]=\"trackBy\"\n >\n @if (rowSelectable && !hideRowSelectionCheckbox) {\n <ng-container matColumnDef=\"acpGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"acp-grid-checkbox-cell\">\n @if (multiSelectable) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n (change)=\"$event ? _toggleMasterCheckbox() : null\"\n ></mat-checkbox>\n }\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n class=\"acp-grid-checkbox-cell\"\n >\n @if ( !( rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row,\n _getIndex(index, dataIndex)) ) ) {\n <mat-checkbox\n [disabled]=\"\n rowSelectionFormatter.disabled &&\n rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\n \"\n [checked]=\"rowSelection.isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\"\n (keydown)=\"_onCheckboxKeyDown($event)\"\n (keyup)=\"_onCheckboxKeyUp($event)\"\n (keypress)=\"_onCheckboxKeyPress($event)\"\n ></mat-checkbox>\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"acp-grid-checkbox-cell\"></td>\n </ng-container>\n } @for (col of columns; track col.field) {\n <ng-container\n [matColumnDef]=\"col.field\"\n [sticky]=\"col.pinned === 'left'\"\n [stickyEnd]=\"col.pinned === 'right'\"\n >\n <th\n mat-header-cell\n *matHeaderCellDef\n [class]=\"col | colClass\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n [resizable]=\"col.resizable\"\n [matResizableMinWidthPx]=\"col.minWidth\"\n [matResizableMaxWidthPx]=\"col.maxWidth\"\n >\n <div class=\"mat-header-cell-inner\">\n @if (headerTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(headerTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else {\n <div\n [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n [arrowPosition]=\"$safeNavigationMigration(col.sortProp?.arrowPosition)!\"\n [start]=\"$safeNavigationMigration(col.sortProp?.start)!\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n }\n <span>{{ col.header | toObservable | async }}</span>\n @if (col.sortable) {\n <svg\n class=\"acp-grid-icon mat-sort-header-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n </svg>\n }\n </div>\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTplBase\"\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\"\n ></ng-template>\n } }\n </div>\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [class]=\"\n col\n | colClass\n : row\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n acpGridSelectableCell\n [cellSelectable]=\"cellSelectable\"\n (cellSelectedChange)=\"_selectCell($event, row, col)\"\n >\n @if (cellTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(cellTemplate)?.[col.field]) |\n isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.cellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.cellTemplate!\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: _getIndex(index, dataIndex),\n colDef: col,\n }\"\n ></ng-template>\n } @else { @if (col.showExpand) {\n <button\n class=\"acp-grid-row-expand-button\"\n matIconButton\n acpGridExpansionToggle\n type=\"button\"\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex)\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-row-expand-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n }\n <acp-grid-cell\n [rowData]=\"row\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n (rowDataChange)=\"_onRowDataChange($event)\"\n ></acp-grid-cell>\n } } }\n </td>\n <td\n mat-footer-cell\n *matFooterCellDef\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n >\n @if (col.showExpand) {\n <span class=\"acp-grid-expansion-placeholder\"></span>\n } @if (summaryTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\"\n ></ng-template>\n } @else { @if ( $safeNavigationMigration($any(summaryTemplate)?.[col.field]) |\n isTemplateRef ) {\n <ng-template\n [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{\n $implicit: _getColData(data, col),\n colData: _getColData(data, col),\n colDef: col,\n }\"\n ></ng-template>\n } @else {\n <acp-grid-cell\n [summary]=\"true\"\n [data]=\"data\"\n [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"\n ></acp-grid-cell>\n } }\n </td>\n </ng-container>\n } @if (!useContentHeaderRowTemplate) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (!useContentRowTemplate) {\n <tr\n mat-row\n *matRowDef=\"\n let row;\n let index = index;\n let dataIndex = dataIndex;\n columns: displayedColumns\n \"\n [class]=\"row | rowClass: index : dataIndex : rowClassFormatter\"\n [class.selected]=\"rowSelection.isSelected(row)\"\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\"\n (keydown)=\"_onRowKeyDown($event, row, _getIndex(index, dataIndex))\"\n (keyup)=\"_onRowKeyUp($event, row, _getIndex(index, dataIndex))\"\n (keypress)=\"_onRowKeyPress($event, row, _getIndex(index, dataIndex))\"\n ></tr>\n } @if (_whetherShowSummary) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n } @if (expandable) {\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"acpGridExpansionColumnDef\">\n <td\n mat-cell\n *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns.length\"\n >\n <div class=\"acp-grid-expansion-detail-wrapper\">\n <div class=\"acp-grid-expansion-detail\">\n <ng-template\n [ngTemplateOutlet]=\"expansionTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowData: row,\n index: dataIndex,\n expanded: expansionRowStates[dataIndex].expanded,\n }\"\n ></ng-template>\n </div>\n </div>\n </td>\n </ng-container>\n <tr\n mat-row\n *matRowDef=\"\n let row;\n columns: ['acpGridExpansionColumnDef'];\n let dataIndex = dataIndex\n \"\n class=\"acp-grid-expansion\"\n [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n ></tr>\n }\n </table>\n }\n </div>\n\n <!-- No result -->\n @if (_hasNoResult) {\n <div class=\"acp-grid-no-result\">\n @if (noResultTemplate) {\n <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\n } @else { {{ noResultText }} }\n </div>\n }\n </div>\n\n <!-- Tool sidebar -->\n @if (showSidebar) {\n <div class=\"acp-grid-sidebar\">\n @if (sidebarTemplate) {\n <ng-template [ngTemplateOutlet]=\"sidebarTemplate\"></ng-template>\n }\n </div>\n }\n</div>\n\n<div class=\"acp-grid-footer\">\n <!-- Status Bar -->\n @if (showStatusbar) {\n <div class=\"acp-grid-statusbar\">\n @if (statusbarTemplate) {\n <ng-template [ngTemplateOutlet]=\"statusbarTemplate\"></ng-template>\n }\n </div>\n }\n\n <!-- Pagination -->\n <div class=\"acp-grid-pagination\">\n @if (paginationTemplate) {\n <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\n } @else {\n <mat-paginator\n [class.mat-paginator-hidden]=\"!showPaginator\"\n [showFirstLastButtons]=\"showFirstLastButtons\"\n [length]=\"length\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [hidePageSize]=\"hidePageSize\"\n (page)=\"_onPage($event)\"\n [disabled]=\"pageDisabled\"\n ></mat-paginator>\n }\n </div>\n</div>\n\n<!-- Header template for extra content -->\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\n @if (headerExtraTemplate | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } @else { @if ($safeNavigationMigration($any(headerExtraTemplate)?.[col.field]) | isTemplateRef) {\n <ng-template\n [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n ></ng-template>\n } }\n</ng-template>\n", styles: [".mat-column-resize-table.cdk-column-resize-with-resized-column{table-layout:fixed}.mat-column-resize-flex .mat-mdc-header-cell,.mat-column-resize-flex .mat-mdc-cell{box-sizing:border-box;min-width:32px}.mat-mdc-header-cell{position:relative}.mat-resizable{box-sizing:border-box}.mat-mdc-header-cell:not(.mat-resizable):after,.mat-resizable-handle{position:absolute;bottom:0;top:0;right:0;width:1px;background:transparent;transition:background .3s cubic-bezier(.55,0,.55,.2)}.mat-mdc-header-cell:not(.mat-resizable):after{content:\"\"}[dir=rtl] .mat-mdc-header-cell:not(.mat-resizable):after,[dir=rtl] .mat-resizable-handle{left:0;right:auto}[dir=rtl] .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-header-cell,[dir=rtl] .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell{border-left:none}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell{border-right:none}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell:not(.mat-resizable):after{background-color:var(--acp-grid-resizable-handle-disabled-background-color, var(--mat-sys-outline-variant))}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle{background-color:var(--acp-grid-resizable-handle-hover-background-color, var(--mat-sys-primary))}.mat-resizable.cdk-resizable-overlay-thumb-active>.mat-resizable-handle{opacity:0;transition:none}.mat-resizable-handle:focus,.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus{outline:none;background-color:var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary))}.mat-column-resize-overlay-thumb{background:transparent;cursor:col-resize;width:100%;height:100%;transition:background .3s cubic-bezier(.55,0,.55,.2);-webkit-user-select:none;user-select:none}.mat-column-resize-overlay-thumb:active{will-change:transform;background:linear-gradient(90deg,transparent,transparent 7px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 7px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 9px,transparent 9px,transparent)}.mat-column-resize-overlay-thumb:active .mat-column-resize-overlay-thumb-top{background:linear-gradient(90deg,transparent,transparent 4px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 4px,var(--acp-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 12px,transparent 12px,transparent)}.mat-column-resize-overlay-thumb-top{width:100%}.acp-grid{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant));border-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium))}.acp-grid .mat-mdc-table{--mat-table-row-item-outline-color: var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid .mat-mdc-table.mat-table-striped .mat-row-odd{background-color:var(--acp-grid-table-row-striped-background-color, var(--mat-sys-surface-container))}.acp-grid .mat-mdc-table.mat-table-hover .mat-mdc-row:hover{background-color:var(--acp-grid-table-row-hover-background-color, var(--mat-sys-secondary-container))}.acp-grid .mat-mdc-table.mat-table-hover .mat-mdc-row.selected:hover{background-color:var(--acp-grid-table-row-selected-hover-background-color, var(--mat-sys-primary-container))}.acp-grid .mat-mdc-table .mat-mdc-row.selected{background-color:var(--acp-grid-table-row-selected-background-color, var(--mat-sys-secondary-container))}.acp-grid .mat-mdc-table .mat-mdc-cell.selected{box-shadow:inset 0 0 0 1px var(--acp-grid-table-cell-selected-outline-color, var(--mat-sys-primary))}.acp-grid .mat-table-container{overflow:auto}.acp-grid .mat-table-container.mat-table-with-data{flex:1}.acp-grid .mat-mdc-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-header-cell:not(.acp-grid-checkbox-cell),.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-footer-cell:not(.acp-grid-checkbox-cell),.acp-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-cell:not(.acp-grid-checkbox-cell){min-width:var(--acp-grid-table-cell-min-width, 80px)}.acp-grid .mat-table-sticky-left{border-right:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .acp-grid .mat-table-sticky-left{border-right-width:0;border-left:1px solid var(--mat-table-row-item-outline-color)}.acp-grid .mat-table-sticky-right{border-left:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .acp-grid .mat-table-sticky-right{border-left-width:0;border-right:1px solid var(--mat-table-row-item-outline-color)}.acp-grid .mat-mdc-footer-cell{border-top:1px solid var(--mat-table-row-item-outline-color);background-color:var(--acp-grid-table-footer-background-color, var(--mat-sys-surface-container))}.acp-grid .mat-mdc-row.acp-grid-expansion{height:0;overflow:hidden}.acp-grid .mat-mdc-row.acp-grid-expansion .mat-mdc-cell{padding-top:0;padding-bottom:0}.acp-grid .mat-mdc-row.acp-grid-expansion.collapsed .mat-mdc-cell{border-bottom-width:0}.acp-grid .mat-sort-header-icon{margin-left:4px}[dir=rtl] .acp-grid .mat-sort-header-icon{margin-left:0;margin-right:4px}.acp-grid .mat-header-cell-inner{display:inline-flex;align-items:center;vertical-align:middle}.acp-grid .mat-mdc-paginator{border-top:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant));border-bottom-left-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium));border-bottom-right-radius:var(--acp-grid-container-shape, var(--mat-sys-corner-medium))}.acp-grid .mat-paginator-hidden{display:none}.acp-grid .acp-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mat-checkbox-state-layer-size, 40px)) / 2)}.acp-grid-progress{position:absolute;top:0;z-index:120;width:100%}.acp-grid-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-bottom:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-toolbar-content{flex:1;width:0;padding:0 8px}.acp-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.acp-grid-content{flex-direction:column;width:0}.acp-grid-sidebar{max-width:50%;border-left:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}[dir=rtl] .acp-grid-sidebar{border-left-width:0;border-right:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-footer{position:relative;z-index:1}.acp-grid-statusbar{display:flex;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-top:1px solid var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.acp-grid-expansion-placeholder{display:inline-block;vertical-align:middle;width:var(--mat-icon-button-state-layer-size, var(--acp-grid-row-expand-button-size, 40px));height:var(--mat-icon-button-state-layer-size, var(--acp-grid-row-expand-button-size, 40px))}.acp-grid-expansion-detail-wrapper{display:grid;grid-template-rows:0fr;grid-template-columns:100%;padding:0;overflow:hidden}.acp-grid-expansion.expanded .acp-grid-expansion-detail-wrapper{grid-template-rows:1fr;padding:calc((var(--mat-table-row-item-container-height, 52px) - 20px) / 2) 0}.acp-grid-expansion-detail{min-height:0}.acp-grid-animations-enabled .acp-grid-expansion-detail-wrapper{transition:all 225ms cubic-bezier(.4,0,.2,1)}.acp-grid-row-expand-button.expanded .acp-grid-row-expand-icon{transform:rotate(90deg)}.acp-grid-row-expand-button.mat-mdc-icon-button,.acp-grid-row-expand-button+acp-grid-cell{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: MatResizable, selector: "mat-header-cell[resizable], th[mat-header-cell][resizable]", inputs: ["matResizableMinWidthPx", "matResizableMaxWidthPx", "resizable"] }, { kind: "directive", type: MatColumnResize, selector: "table[mat-table][columnResize]" }, { kind: "component", type: AcpGridCell, selector: "acp-grid-cell", inputs: ["rowData", "colDef", "data", "summary", "placeholder"], outputs: ["rowDataChange"], exportAs: ["acpGridCell"] }, { kind: "component", type: AcpGridColumnMenu, selector: "acp-grid-column-menu", inputs: ["columns", "selectable", "selectableChecked", "sortable", "pinnable", "buttonText", "buttonType", "buttonColor", "buttonClass", "buttonIcon", "buttonFontIcon", "buttonSvgIcon", "showHeader", "headerText", "headerTemplate", "showFooter", "footerText", "footerTemplate", "pinOptions"], outputs: ["columnChange"], exportAs: ["acpGridColumnMenu"] }, { kind: "directive", type: AcpGridSelectableCell, selector: "[acpGridSelectableCell]", inputs: ["cellSelectable"], outputs: ["cellSelectedChange"] }, { kind: "directive", type: AcpGridExpansionToggle, selector: "[acpGridExpansionToggle]", inputs: ["opened", "expandableRow", "expansionRowTpl"], outputs: ["openedChange", "toggleChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AcpIsTemplateRefPipe, name: "isTemplateRef" }, { kind: "pipe", type: AcpGridColClassPipe, name: "colClass" }, { kind: "pipe", type: AcpGridRowClassPipe, name: "rowClass" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4067
4065
|
}
|
|
4068
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
4066
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGrid, decorators: [{
|
|
4069
4067
|
type: Component,
|
|
4070
4068
|
args: [{ selector: 'acp-data-grid', exportAs: 'dataGrid', imports: [
|
|
4071
4069
|
AsyncPipe,
|
|
@@ -4475,10 +4473,10 @@ class KeyboardNavigationService {
|
|
|
4475
4473
|
this.destroy$.next();
|
|
4476
4474
|
this.destroy$.complete();
|
|
4477
4475
|
}
|
|
4478
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
4479
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
4476
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KeyboardNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
4477
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KeyboardNavigationService, providedIn: 'root' });
|
|
4480
4478
|
}
|
|
4481
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
4479
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KeyboardNavigationService, decorators: [{
|
|
4482
4480
|
type: Injectable,
|
|
4483
4481
|
args: [{
|
|
4484
4482
|
providedIn: 'root',
|
|
@@ -4730,8 +4728,8 @@ class DateRangePicker {
|
|
|
4730
4728
|
toggle() {
|
|
4731
4729
|
// NgxDatex handles show/hide through its own API
|
|
4732
4730
|
}
|
|
4733
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
4734
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0
|
|
4731
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4732
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: DateRangePicker, isStandalone: true, selector: "acp-date-range-picker", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholderText: { classPropertyName: "placeholderText", publicName: "placeholderText", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, inputReadonly: { classPropertyName: "inputReadonly", publicName: "inputReadonly", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, formatOutputAsString: { classPropertyName: "formatOutputAsString", publicName: "formatOutputAsString", isSignal: true, isRequired: false, transformFunction: null }, calendarIcon: { classPropertyName: "calendarIcon", publicName: "calendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showCalendarButton: { classPropertyName: "showCalendarButton", publicName: "showCalendarButton", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, checkboxChecked: { classPropertyName: "checkboxChecked", publicName: "checkboxChecked", isSignal: true, isRequired: false, transformFunction: null }, checkboxPosition: { classPropertyName: "checkboxPosition", publicName: "checkboxPosition", isSignal: true, isRequired: false, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, singleDatePicker: { classPropertyName: "singleDatePicker", publicName: "singleDatePicker", isSignal: true, isRequired: false, transformFunction: null }, timePicker: { classPropertyName: "timePicker", publicName: "timePicker", isSignal: true, isRequired: false, transformFunction: null }, timePicker24Hour: { classPropertyName: "timePicker24Hour", publicName: "timePicker24Hour", isSignal: true, isRequired: false, transformFunction: null }, timePickerSeconds: { classPropertyName: "timePickerSeconds", publicName: "timePickerSeconds", isSignal: true, isRequired: false, transformFunction: null }, timePickerIncrement: { classPropertyName: "timePickerIncrement", publicName: "timePickerIncrement", isSignal: true, isRequired: false, transformFunction: null }, autoApply: { classPropertyName: "autoApply", publicName: "autoApply", isSignal: true, isRequired: false, transformFunction: null }, showDropdowns: { classPropertyName: "showDropdowns", publicName: "showDropdowns", isSignal: true, isRequired: false, transformFunction: null }, linkedCalendars: { classPropertyName: "linkedCalendars", publicName: "linkedCalendars", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowCalendars: { classPropertyName: "alwaysShowCalendars", publicName: "alwaysShowCalendars", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkboxChecked: "checkboxCheckedChange", dateRangeSelected: "dateRangeSelected", pickerShow: "pickerShow", pickerHide: "pickerHide", pickerApply: "pickerApply", pickerCancel: "pickerCancel", checkboxChange: "checkboxChange" }, providers: [
|
|
4735
4733
|
{
|
|
4736
4734
|
provide: NG_VALUE_ACCESSOR,
|
|
4737
4735
|
useExisting: forwardRef(() => DateRangePicker),
|
|
@@ -4774,7 +4772,7 @@ class DateRangePicker {
|
|
|
4774
4772
|
></ngx-datex>
|
|
4775
4773
|
`, isInline: true, dependencies: [{ kind: "component", type: NgxDatex, selector: "ngx-datex", inputs: ["config", "locale", "theme", "appearance", "floatLabel", "label", "placeholder", "calendarIcon", "showCalendarIcon", "calendarIconPosition", "showCheckbox", "checkboxChecked", "checkboxPosition", "readonly", "disabled", "showHeader", "showFooter", "singleDatePicker", "autoApply", "showDropdowns", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "linkedCalendars", "autoUpdateInput", "alwaysShowCalendars", "showCustomRangeLabel", "startDate", "endDate", "minDate", "maxDate", "maxSpan", "showWeekNumbers", "showISOWeekNumbers", "buttonClasses", "applyButtonClasses", "cancelButtonClasses", "isInvalidDate", "isCustomDate", "minYear", "maxYear", "ranges", "opens", "drops", "headerTemplate", "footerTemplate", "dayTemplate", "ariaLabel", "ariaDescribedBy"], outputs: ["dateChange", "rangeChange", "openEvent", "closeEvent", "monthChange", "yearChange", "dateHover", "validationError", "checkboxChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
4776
4774
|
}
|
|
4777
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
4775
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DateRangePicker, decorators: [{
|
|
4778
4776
|
type: Component,
|
|
4779
4777
|
args: [{
|
|
4780
4778
|
selector: 'acp-date-range-picker',
|
|
@@ -5022,10 +5020,10 @@ class AcpDrawerContainer extends CdkDialogContainer {
|
|
|
5022
5020
|
_captureInitialFocus() {
|
|
5023
5021
|
// Intentionally empty - focus is handled by the enter animation
|
|
5024
5022
|
}
|
|
5025
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
5026
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0
|
|
5023
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDrawerContainer, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5024
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: AcpDrawerContainer, isStandalone: true, selector: "acp-drawer-container", host: { attributes: { "tabindex": "-1" }, listeners: { "animationstart": "_handleAnimationEvent(true, $event.animationName)", "animationend": "_handleAnimationEvent(false, $event.animationName)", "animationcancel": "_handleAnimationEvent(false, $event.animationName)" }, properties: { "class": "_drawerPosition", "class.acp-drawer-container-animations-enabled": "!_animationsDisabled", "class.acp-drawer-container-enter": "_animationState === \"visible\"", "class.acp-drawer-container-exit": "_animationState === \"hidden\"", "class.acp-drawer-fullscreen": "_config.fullScreen", "id": "_config.id", "attr.role": "_config.role", "attr.aria-modal": "_config.ariaModal", "attr.aria-label": "_config.ariaLabel" }, classAttribute: "acp-drawer-container" }, usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\n", styles: ["@keyframes _acp-drawer-enter{0%{box-shadow:none;visibility:hidden}to{transform:none;visibility:visible}}@keyframes _acp-drawer-exit{0%{transform:none;visibility:visible}to{box-shadow:none;visibility:hidden}}.acp-drawer-container{display:block;width:100%;padding:8px 16px;overflow:auto;outline:0;box-sizing:border-box;position:relative;background-color:var(--acp-drawer-container-background-color, var(--mat-sys-surface));color:var(--acp-drawer-container-text-color, var(--mat-sys-on-surface-variant));box-shadow:var(--acp-drawer-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12))}@media(forced-colors:active){.acp-drawer-container{outline:1px solid}}.acp-drawer-container-animations-enabled.acp-drawer-container-enter{animation:_acp-drawer-enter .15s cubic-bezier(0,0,.2,1) forwards}.acp-drawer-container-animations-enabled.acp-drawer-container-exit{animation:_acp-drawer-exit .4s cubic-bezier(.25,.8,.25,1) backwards}.acp-drawer-container-animations-enabled.acp-drawer-right{transform:translate(100%)}.acp-drawer-container-animations-enabled.acp-drawer-left{transform:translate(-100%)}.acp-drawer-container-animations-enabled.acp-drawer-bottom{transform:translateY(100%)}.acp-drawer-container-animations-enabled.acp-drawer-top{transform:translateY(-100%)}.acp-drawer-right{border-top-left-radius:var(--acp-drawer-container-shape, var(--mat-sys-corner-large));border-bottom-left-radius:var(--acp-drawer-container-shape, var(--mat-sys-corner-large))}.acp-drawer-left{border-top-right-radius:var(--acp-drawer-container-shape, var(--mat-sys-corner-large));border-bottom-right-radius:var(--acp-drawer-container-shape, var(--mat-sys-corner-large))}.acp-drawer-bottom{border-top-left-radius:var(--acp-drawer-container-shape, var(--mat-sys-corner-large));border-top-right-radius:var(--acp-drawer-container-shape, var(--mat-sys-corner-large))}.acp-drawer-top{border-bottom-left-radius:var(--acp-drawer-container-shape, var(--mat-sys-corner-large));border-bottom-right-radius:var(--acp-drawer-container-shape, var(--mat-sys-corner-large))}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
|
|
5027
5025
|
}
|
|
5028
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
5026
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDrawerContainer, decorators: [{
|
|
5029
5027
|
type: Component,
|
|
5030
5028
|
args: [{ selector: 'acp-drawer-container', changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, host: {
|
|
5031
5029
|
class: 'acp-drawer-container',
|
|
@@ -5346,10 +5344,10 @@ class AcpDrawer {
|
|
|
5346
5344
|
drawers[i].dismiss();
|
|
5347
5345
|
}
|
|
5348
5346
|
}
|
|
5349
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
5350
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0
|
|
5347
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDrawer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
5348
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDrawer, providedIn: 'root' });
|
|
5351
5349
|
}
|
|
5352
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
5350
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDrawer, decorators: [{
|
|
5353
5351
|
type: Injectable,
|
|
5354
5352
|
args: [{ providedIn: 'root' }]
|
|
5355
5353
|
}] });
|
|
@@ -5411,20 +5409,20 @@ class _AcpPopoverContentBase {
|
|
|
5411
5409
|
this._outlet.dispose();
|
|
5412
5410
|
}
|
|
5413
5411
|
}
|
|
5414
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
5415
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
5412
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: _AcpPopoverContentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
5413
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: _AcpPopoverContentBase, isStandalone: true, ngImport: i0 });
|
|
5416
5414
|
}
|
|
5417
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
5415
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: _AcpPopoverContentBase, decorators: [{
|
|
5418
5416
|
type: Directive
|
|
5419
5417
|
}] });
|
|
5420
5418
|
/**
|
|
5421
5419
|
* Popover content that will be rendered lazily once the popover is opened.
|
|
5422
5420
|
*/
|
|
5423
5421
|
class AcpPopoverContent extends _AcpPopoverContentBase {
|
|
5424
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
5425
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
5422
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpPopoverContent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
5423
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AcpPopoverContent, isStandalone: true, selector: "ng-template[acpPopoverContent]", providers: [{ provide: ACP_POPOVER_CONTENT, useExisting: AcpPopoverContent }], usesInheritance: true, ngImport: i0 });
|
|
5426
5424
|
}
|
|
5427
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
5425
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpPopoverContent, decorators: [{
|
|
5428
5426
|
type: Directive,
|
|
5429
5427
|
args: [{
|
|
5430
5428
|
selector: 'ng-template[acpPopoverContent]',
|
|
@@ -5807,10 +5805,10 @@ class AcpPopover {
|
|
|
5807
5805
|
}
|
|
5808
5806
|
this._changeDetectorRef.markForCheck();
|
|
5809
5807
|
}
|
|
5810
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
5811
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0
|
|
5808
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5809
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpPopover, isStandalone: true, selector: "acp-popover", inputs: { backdropClass: "backdropClass", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], triggerEvent: "triggerEvent", enterDelay: "enterDelay", leaveDelay: "leaveDelay", position: "position", xOffset: "xOffset", yOffset: "yOffset", arrowWidth: "arrowWidth", arrowHeight: "arrowHeight", arrowOffsetX: "arrowOffsetX", arrowOffsetY: "arrowOffsetY", hideArrow: ["hideArrow", "hideArrow", booleanAttribute], closeOnPanelClick: ["closeOnPanelClick", "closeOnPanelClick", booleanAttribute], closeOnBackdropClick: ["closeOnBackdropClick", "closeOnBackdropClick", booleanAttribute], focusTrapEnabled: ["focusTrapEnabled", "focusTrapEnabled", booleanAttribute], focusTrapAutoCaptureEnabled: ["focusTrapAutoCaptureEnabled", "focusTrapAutoCaptureEnabled", booleanAttribute], hasBackdrop: ["hasBackdrop", "hasBackdrop", booleanAttribute], panelClass: "panelClass" }, outputs: { closed: "closed" }, queries: [{ propertyName: "lazyContent", first: true, predicate: ACP_POPOVER_CONTENT, descendants: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["acpPopover"], ngImport: i0, template: "<ng-template>\n <!-- eslint-disable @angular-eslint/template/mouse-events-have-key-events -->\n <div\n [id]=\"panelId\"\n class=\"acp-popover-panel\"\n [class]=\"_classList\"\n [class.acp-popover-panel-animations-disabled]=\"_animationsDisabled\"\n [class.acp-popover-panel-exit-animation]=\"_panelAnimationState === 'void'\"\n [class.acp-popover-panel-animating]=\"_isAnimating\"\n [class.acp-popover-panel-without-arrow]=\"hideArrow\"\n (keydown)=\"_handleKeydown($event)\"\n (click)=\"_handleClick()\"\n (mouseover)=\"_handleMouseOver()\"\n (mouseleave)=\"_handleMouseLeave()\"\n tabindex=\"-1\"\n role=\"dialog\"\n (animationstart)=\"_onAnimationStart($event.animationName)\"\n (animationend)=\"_onAnimationDone($event.animationName)\"\n (animationcancel)=\"_onAnimationDone($event.animationName)\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby || null\"\n [attr.aria-describedby]=\"ariaDescribedby || null\"\n [cdkTrapFocus]=\"focusTrapEnabled\"\n [cdkTrapFocusAutoCapture]=\"focusTrapAutoCaptureEnabled\"\n >\n <div class=\"acp-popover-content\">\n <ng-content></ng-content>\n </div>\n @if (!hideArrow) {\n <div class=\"acp-popover-direction-arrow\" [style]=\"arrowStyles\"></div>\n }\n </div>\n</ng-template>\n", styles: ["@keyframes _acp-popover-enter{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}@keyframes _acp-popover-exit{0%{opacity:1}to{opacity:0}}.acp-popover-panel{position:relative;max-height:calc(100vh - 48px);padding:8px;font-size:inherit;outline:0;animation:_acp-popover-enter .12s cubic-bezier(0,0,.2,1);border-radius:var(--acp-popover-container-shape, var(--mat-sys-corner-extra-small));background-color:var(--acp-popover-background-color, var(--mat-sys-surface-container));color:var(--acp-popover-text-color, var(--mat-sys-on-surface))}.acp-popover-panel.acp-popover-panel-exit-animation{animation:_acp-popover-exit .1s 25ms linear forwards}.acp-popover-panel.acp-popover-panel-animations-disabled{animation:none}.acp-popover-panel.acp-popover-panel-animating{pointer-events:none}.acp-popover-panel[class*=acp-popover-below]{margin-top:calc(.5em + 2px)}.acp-popover-panel[class*=acp-popover-above]{margin-bottom:calc(.5em + 2px)}.acp-popover-panel[class*=acp-popover-before]{margin-right:calc(.5em + 2px)}[dir=rtl] .acp-popover-panel[class*=acp-popover-before]{margin-right:auto;margin-left:calc(.5em + 2px)}.acp-popover-panel[class*=acp-popover-after]{margin-left:calc(.5em + 2px)}[dir=rtl] .acp-popover-panel[class*=acp-popover-after]{margin-left:auto;margin-right:calc(.5em + 2px)}.acp-popover-panel.acp-popover-panel-without-arrow{margin:0}.acp-popover-direction-arrow{position:absolute}.acp-popover-direction-arrow:before,.acp-popover-direction-arrow:after{position:absolute;display:inline-block;content:\"\";border-width:.5em;border-style:solid}.acp-popover-direction-arrow:before{border-color:var(--acp-popover-outline-color, var(--mat-sys-surface-container))}.acp-popover-direction-arrow:after{border-width:calc(.5em - 1px);border-color:var(--acp-popover-background-color, var(--mat-sys-surface-container))}[class*=acp-popover-below] .acp-popover-direction-arrow,[class*=acp-popover-above] .acp-popover-direction-arrow{width:1em}[class*=acp-popover-below] .acp-popover-direction-arrow:before,[class*=acp-popover-below] .acp-popover-direction-arrow:after,[class*=acp-popover-above] .acp-popover-direction-arrow:before,[class*=acp-popover-above] .acp-popover-direction-arrow:after{border-left-color:transparent;border-right-color:transparent}[class*=acp-popover-below] .acp-popover-direction-arrow:after,[class*=acp-popover-above] .acp-popover-direction-arrow:after{left:1px}[dir=rtl] [class*=acp-popover-below] .acp-popover-direction-arrow:after,[dir=rtl] [class*=acp-popover-above] .acp-popover-direction-arrow:after{right:1px;left:auto}[class*=acp-popover-below] .acp-popover-direction-arrow{top:0}[class*=acp-popover-below] .acp-popover-direction-arrow:before,[class*=acp-popover-below] .acp-popover-direction-arrow:after{bottom:0;border-top-width:0}[class*=acp-popover-above] .acp-popover-direction-arrow{bottom:0}[class*=acp-popover-above] .acp-popover-direction-arrow:before,[class*=acp-popover-above] .acp-popover-direction-arrow:after{top:0;border-bottom-width:0}[class*=acp-popover-before] .acp-popover-direction-arrow,[class*=acp-popover-after] .acp-popover-direction-arrow{height:1em}[class*=acp-popover-before] .acp-popover-direction-arrow:before,[class*=acp-popover-before] .acp-popover-direction-arrow:after,[class*=acp-popover-after] .acp-popover-direction-arrow:before,[class*=acp-popover-after] .acp-popover-direction-arrow:after{border-top-color:transparent;border-bottom-color:transparent}[class*=acp-popover-before] .acp-popover-direction-arrow:after,[class*=acp-popover-after] .acp-popover-direction-arrow:after{top:1px}[class*=acp-popover-before] .acp-popover-direction-arrow{right:0}[class*=acp-popover-before] .acp-popover-direction-arrow:before,[class*=acp-popover-before] .acp-popover-direction-arrow:after{left:0;border-right-width:0}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow{right:auto;left:0}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:before,[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:after{left:auto;right:0;border-left-width:0}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:before{border-right-width:.5em}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:after{border-right-width:calc(.5em - 1px)}[class*=acp-popover-after] .acp-popover-direction-arrow{left:0}[class*=acp-popover-after] .acp-popover-direction-arrow:before,[class*=acp-popover-after] .acp-popover-direction-arrow:after{right:0;border-left-width:0}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow{left:auto;right:0}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:before,[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:after{right:auto;left:0;border-right-width:0}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:before{border-left-width:.5em}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:after{border-left-width:calc(.5em - 1px)}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5812
5810
|
}
|
|
5813
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
5811
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpPopover, decorators: [{
|
|
5814
5812
|
type: Component,
|
|
5815
5813
|
args: [{ selector: 'acp-popover', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'acpPopover', imports: [CdkTrapFocus], template: "<ng-template>\n <!-- eslint-disable @angular-eslint/template/mouse-events-have-key-events -->\n <div\n [id]=\"panelId\"\n class=\"acp-popover-panel\"\n [class]=\"_classList\"\n [class.acp-popover-panel-animations-disabled]=\"_animationsDisabled\"\n [class.acp-popover-panel-exit-animation]=\"_panelAnimationState === 'void'\"\n [class.acp-popover-panel-animating]=\"_isAnimating\"\n [class.acp-popover-panel-without-arrow]=\"hideArrow\"\n (keydown)=\"_handleKeydown($event)\"\n (click)=\"_handleClick()\"\n (mouseover)=\"_handleMouseOver()\"\n (mouseleave)=\"_handleMouseLeave()\"\n tabindex=\"-1\"\n role=\"dialog\"\n (animationstart)=\"_onAnimationStart($event.animationName)\"\n (animationend)=\"_onAnimationDone($event.animationName)\"\n (animationcancel)=\"_onAnimationDone($event.animationName)\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby || null\"\n [attr.aria-describedby]=\"ariaDescribedby || null\"\n [cdkTrapFocus]=\"focusTrapEnabled\"\n [cdkTrapFocusAutoCapture]=\"focusTrapAutoCaptureEnabled\"\n >\n <div class=\"acp-popover-content\">\n <ng-content></ng-content>\n </div>\n @if (!hideArrow) {\n <div class=\"acp-popover-direction-arrow\" [style]=\"arrowStyles\"></div>\n }\n </div>\n</ng-template>\n", styles: ["@keyframes _acp-popover-enter{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}@keyframes _acp-popover-exit{0%{opacity:1}to{opacity:0}}.acp-popover-panel{position:relative;max-height:calc(100vh - 48px);padding:8px;font-size:inherit;outline:0;animation:_acp-popover-enter .12s cubic-bezier(0,0,.2,1);border-radius:var(--acp-popover-container-shape, var(--mat-sys-corner-extra-small));background-color:var(--acp-popover-background-color, var(--mat-sys-surface-container));color:var(--acp-popover-text-color, var(--mat-sys-on-surface))}.acp-popover-panel.acp-popover-panel-exit-animation{animation:_acp-popover-exit .1s 25ms linear forwards}.acp-popover-panel.acp-popover-panel-animations-disabled{animation:none}.acp-popover-panel.acp-popover-panel-animating{pointer-events:none}.acp-popover-panel[class*=acp-popover-below]{margin-top:calc(.5em + 2px)}.acp-popover-panel[class*=acp-popover-above]{margin-bottom:calc(.5em + 2px)}.acp-popover-panel[class*=acp-popover-before]{margin-right:calc(.5em + 2px)}[dir=rtl] .acp-popover-panel[class*=acp-popover-before]{margin-right:auto;margin-left:calc(.5em + 2px)}.acp-popover-panel[class*=acp-popover-after]{margin-left:calc(.5em + 2px)}[dir=rtl] .acp-popover-panel[class*=acp-popover-after]{margin-left:auto;margin-right:calc(.5em + 2px)}.acp-popover-panel.acp-popover-panel-without-arrow{margin:0}.acp-popover-direction-arrow{position:absolute}.acp-popover-direction-arrow:before,.acp-popover-direction-arrow:after{position:absolute;display:inline-block;content:\"\";border-width:.5em;border-style:solid}.acp-popover-direction-arrow:before{border-color:var(--acp-popover-outline-color, var(--mat-sys-surface-container))}.acp-popover-direction-arrow:after{border-width:calc(.5em - 1px);border-color:var(--acp-popover-background-color, var(--mat-sys-surface-container))}[class*=acp-popover-below] .acp-popover-direction-arrow,[class*=acp-popover-above] .acp-popover-direction-arrow{width:1em}[class*=acp-popover-below] .acp-popover-direction-arrow:before,[class*=acp-popover-below] .acp-popover-direction-arrow:after,[class*=acp-popover-above] .acp-popover-direction-arrow:before,[class*=acp-popover-above] .acp-popover-direction-arrow:after{border-left-color:transparent;border-right-color:transparent}[class*=acp-popover-below] .acp-popover-direction-arrow:after,[class*=acp-popover-above] .acp-popover-direction-arrow:after{left:1px}[dir=rtl] [class*=acp-popover-below] .acp-popover-direction-arrow:after,[dir=rtl] [class*=acp-popover-above] .acp-popover-direction-arrow:after{right:1px;left:auto}[class*=acp-popover-below] .acp-popover-direction-arrow{top:0}[class*=acp-popover-below] .acp-popover-direction-arrow:before,[class*=acp-popover-below] .acp-popover-direction-arrow:after{bottom:0;border-top-width:0}[class*=acp-popover-above] .acp-popover-direction-arrow{bottom:0}[class*=acp-popover-above] .acp-popover-direction-arrow:before,[class*=acp-popover-above] .acp-popover-direction-arrow:after{top:0;border-bottom-width:0}[class*=acp-popover-before] .acp-popover-direction-arrow,[class*=acp-popover-after] .acp-popover-direction-arrow{height:1em}[class*=acp-popover-before] .acp-popover-direction-arrow:before,[class*=acp-popover-before] .acp-popover-direction-arrow:after,[class*=acp-popover-after] .acp-popover-direction-arrow:before,[class*=acp-popover-after] .acp-popover-direction-arrow:after{border-top-color:transparent;border-bottom-color:transparent}[class*=acp-popover-before] .acp-popover-direction-arrow:after,[class*=acp-popover-after] .acp-popover-direction-arrow:after{top:1px}[class*=acp-popover-before] .acp-popover-direction-arrow{right:0}[class*=acp-popover-before] .acp-popover-direction-arrow:before,[class*=acp-popover-before] .acp-popover-direction-arrow:after{left:0;border-right-width:0}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow{right:auto;left:0}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:before,[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:after{left:auto;right:0;border-left-width:0}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:before{border-right-width:.5em}[dir=rtl] [class*=acp-popover-before] .acp-popover-direction-arrow:after{border-right-width:calc(.5em - 1px)}[class*=acp-popover-after] .acp-popover-direction-arrow{left:0}[class*=acp-popover-after] .acp-popover-direction-arrow:before,[class*=acp-popover-after] .acp-popover-direction-arrow:after{right:0;border-left-width:0}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow{left:auto;right:0}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:before,[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:after{right:auto;left:0;border-right-width:0}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:before{border-left-width:.5em}[dir=rtl] [class*=acp-popover-after] .acp-popover-direction-arrow:after{border-left-width:calc(.5em - 1px)}\n"] }]
|
|
5816
5814
|
}], propDecorators: { backdropClass: [{
|
|
@@ -6293,10 +6291,10 @@ class AcpPopoverTrigger {
|
|
|
6293
6291
|
}
|
|
6294
6292
|
return this._portal;
|
|
6295
6293
|
}
|
|
6296
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
6297
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
6294
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpPopoverTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
6295
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AcpPopoverTrigger, isStandalone: true, selector: "[acp-popover-trigger-for], [acpPopoverTriggerFor]", inputs: { popover: ["acpPopoverTriggerFor", "popover"], popoverData: "popoverData", targetElement: "targetElement", triggerEvent: "triggerEvent" }, outputs: { popoverOpened: "popoverOpened", popoverClosed: "popoverClosed" }, host: { attributes: { "aria-haspopup": "true" }, listeners: { "click": "_handleClick($event)", "mouseenter": "_handleMouseEnter($event)", "mouseleave": "_handleMouseLeave($event)", "mousedown": "_handleMousedown($event)", "keydown": "_handleKeydown($event)" }, properties: { "attr.aria-expanded": "popoverOpen", "attr.aria-controls": "popoverOpen ? popover.panelId : null" } }, exportAs: ["acpPopoverTrigger"], ngImport: i0 });
|
|
6298
6296
|
}
|
|
6299
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
6297
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpPopoverTrigger, decorators: [{
|
|
6300
6298
|
type: Directive,
|
|
6301
6299
|
args: [{
|
|
6302
6300
|
selector: '[acp-popover-trigger-for], [acpPopoverTriggerFor]',
|
|
@@ -6345,10 +6343,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
|
|
|
6345
6343
|
class AcpPopoverTarget {
|
|
6346
6344
|
/** Reference to the target element. */
|
|
6347
6345
|
elementRef = inject(ElementRef);
|
|
6348
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
6349
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
6346
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpPopoverTarget, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
6347
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AcpPopoverTarget, isStandalone: true, selector: "acp-popover-target, [acpPopoverTarget]", exportAs: ["acpPopoverTarget"], ngImport: i0 });
|
|
6350
6348
|
}
|
|
6351
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
6349
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpPopoverTarget, decorators: [{
|
|
6352
6350
|
type: Directive,
|
|
6353
6351
|
args: [{
|
|
6354
6352
|
selector: 'acp-popover-target, [acpPopoverTarget]',
|
|
@@ -7108,10 +7106,10 @@ class AcpDateRangeCalendar {
|
|
|
7108
7106
|
// this.firstCalendarView._changeDetectorRef.markForCheck();
|
|
7109
7107
|
// this.secondCalendarView._changeDetectorRef.markForCheck();
|
|
7110
7108
|
}
|
|
7111
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
7112
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0
|
|
7109
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDateRangeCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7110
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: AcpDateRangeCalendar, isStandalone: true, selector: "acp-date-range-calendar", inputs: { minDate: "minDate", maxDate: "maxDate", selectedDates: "selectedDates" }, outputs: { selectedDatesChange: "selectedDatesChange" }, viewQueries: [{ propertyName: "firstCalendarView", first: true, predicate: ["firstCalendarView"], descendants: true }, { propertyName: "secondCalendarView", first: true, predicate: ["secondCalendarView"], descendants: true }], ngImport: i0, template: "<!--\n * AcpDateRangeCalendar Component Template\n *\n * Dual-calendar view for date range selection with navigation controls.\n * @author AcontPlus S.A.S\n * @version 2.0.0\n -->\n<div class=\"calendar-container\">\n <div class=\"first-view\">\n <mat-calendar\n id=\"firstCalendarView\"\n #firstCalendarView\n [startAt]=\"firstViewStartDate()\"\n [selected]=\"selectedDates\"\n (selectedChange)=\"updateDateRangeSelection($event)\"\n (monthSelected)=\"monthSelected('firstCalendarView')\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n />\n </div>\n <div class=\"second-view\">\n <mat-calendar\n id=\"secondCalendarView\"\n #secondCalendarView\n [startAt]=\"secondViewStartDate()\"\n [minDate]=\"secondViewMinDate()\"\n [maxDate]=\"maxDate\"\n [selected]=\"selectedDates\"\n (selectedChange)=\"updateDateRangeSelection($event)\"\n (monthSelected)=\"monthSelected('secondCalendarView')\"\n />\n </div>\n</div>\n", styles: [".mat-calendar{min-width:250px}.calendar-container{width:100%;display:flex}.first-view,.second-view{flex:1 1 50%;min-width:0;margin-top:.5rem}@media(max-width:490px){.calendar-container{flex-direction:column}}\n"], dependencies: [{ kind: "component", type: MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7113
7111
|
}
|
|
7114
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
7112
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDateRangeCalendar, decorators: [{
|
|
7115
7113
|
type: Component,
|
|
7116
7114
|
args: [{ selector: 'acp-date-range-calendar', imports: [MatCalendar], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n * AcpDateRangeCalendar Component Template\n *\n * Dual-calendar view for date range selection with navigation controls.\n * @author AcontPlus S.A.S\n * @version 2.0.0\n -->\n<div class=\"calendar-container\">\n <div class=\"first-view\">\n <mat-calendar\n id=\"firstCalendarView\"\n #firstCalendarView\n [startAt]=\"firstViewStartDate()\"\n [selected]=\"selectedDates\"\n (selectedChange)=\"updateDateRangeSelection($event)\"\n (monthSelected)=\"monthSelected('firstCalendarView')\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n />\n </div>\n <div class=\"second-view\">\n <mat-calendar\n id=\"secondCalendarView\"\n #secondCalendarView\n [startAt]=\"secondViewStartDate()\"\n [minDate]=\"secondViewMinDate()\"\n [maxDate]=\"maxDate\"\n [selected]=\"selectedDates\"\n (selectedChange)=\"updateDateRangeSelection($event)\"\n (monthSelected)=\"monthSelected('secondCalendarView')\"\n />\n </div>\n</div>\n", styles: [".mat-calendar{min-width:250px}.calendar-container{width:100%;display:flex}.first-view,.second-view{flex:1 1 50%;min-width:0;margin-top:.5rem}@media(max-width:490px){.calendar-container{flex-direction:column}}\n"] }]
|
|
7117
7115
|
}], propDecorators: { minDate: [{
|
|
@@ -7747,10 +7745,10 @@ class AcpDateRangeInput {
|
|
|
7747
7745
|
}));
|
|
7748
7746
|
this._dateOptions.set(options);
|
|
7749
7747
|
}
|
|
7750
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
7751
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpDateRangeInput, isStandalone: true, selector: "acp-date-range-input", inputs: { inputLabel: { classPropertyName: "inputLabel", publicName: "inputLabel", isSignal: false, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showRangeRequired: { classPropertyName: "showRangeRequired", publicName: "showRangeRequired", isSignal: true, isRequired: false, transformFunction: null }, isRangeRequired: { classPropertyName: "isRangeRequired", publicName: "isRangeRequired", isSignal: true, isRequired: false, transformFunction: null }, staticOptionId: { classPropertyName: "staticOptionId", publicName: "staticOptionId", isSignal: false, isRequired: false, transformFunction: null }, dynamicOptionId: { classPropertyName: "dynamicOptionId", publicName: "dynamicOptionId", isSignal: false, isRequired: false, transformFunction: null }, calendarId: { classPropertyName: "calendarId", publicName: "calendarId", isSignal: false, isRequired: false, transformFunction: null }, enableDefaultOptions: { classPropertyName: "enableDefaultOptions", publicName: "enableDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: false, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: false, isRequired: false, transformFunction: null }, isShowStaticDefaultOptions: { classPropertyName: "isShowStaticDefaultOptions", publicName: "isShowStaticDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, hideDefaultOptions: { classPropertyName: "hideDefaultOptions", publicName: "hideDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayOffsetX: { classPropertyName: "cdkConnectedOverlayOffsetX", publicName: "cdkConnectedOverlayOffsetX", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayOffsetY: { classPropertyName: "cdkConnectedOverlayOffsetY", publicName: "cdkConnectedOverlayOffsetY", isSignal: false, isRequired: false, transformFunction: null }, listCdkConnectedOverlayOffsetY: { classPropertyName: "listCdkConnectedOverlayOffsetY", publicName: "listCdkConnectedOverlayOffsetY", isSignal: false, isRequired: false, transformFunction: null }, listCdkConnectedOverlayOffsetX: { classPropertyName: "listCdkConnectedOverlayOffsetX", publicName: "listCdkConnectedOverlayOffsetX", isSignal: false, isRequired: false, transformFunction: null }, selectedOptionIndex: { classPropertyName: "selectedOptionIndex", publicName: "selectedOptionIndex", isSignal: false, isRequired: false, transformFunction: null }, displaySelectedLabel: { classPropertyName: "displaySelectedLabel", publicName: "displaySelectedLabel", isSignal: false, isRequired: false, transformFunction: null }, displaySelectedExpression: { classPropertyName: "displaySelectedExpression", publicName: "displaySelectedExpression", isSignal: false, isRequired: false, transformFunction: null }, enableEditableDates: { classPropertyName: "enableEditableDates", publicName: "enableEditableDates", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayPush: { classPropertyName: "cdkConnectedOverlayPush", publicName: "cdkConnectedOverlayPush", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayPositions: { classPropertyName: "cdkConnectedOverlayPositions", publicName: "cdkConnectedOverlayPositions", isSignal: false, isRequired: false, transformFunction: null }, allowSingleDateSelection: { classPropertyName: "allowSingleDateSelection", publicName: "allowSingleDateSelection", isSignal: false, isRequired: false, transformFunction: null }, autoSelectOption: { classPropertyName: "autoSelectOption", publicName: "autoSelectOption", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, dateDropDownOptions: { classPropertyName: "dateDropDownOptions", publicName: "dateDropDownOptions", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dateSelectionChanged: "dateSelectionChanged", dateListOptions: "dateListOptions", rangeRequiredChange: "rangeRequiredChange" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "<!--\n AcpDateRangeInput Component Template\n @author AcontPlus S.A.S\n @version 1.0.0\n\n Comprehensive date range picker with predefined options, custom calendar selection,\n and support for human-readable date expressions.\n-->\n<div class=\"date-picker-main ndp-main\" cdkOverlayOrigin #trigger>\n <mat-form-field\n class=\"w-full\"\n [class]=\"{ 'display-hidden': isShowStaticDefaultOptions }\"\n (click)=\"toggleDateOptionSelectionList($event)\"\n >\n <mat-label (click)=\"toggleDateOptionSelectionList($event)\">{{ inputLabel }}</mat-label>\n <input\n matInput\n #dateInput\n class=\"cursor-pointer\"\n id=\"date-input-field\"\n (input)=\"onMainInputChange(dateInput)\"\n />\n <ng-container matSuffix>\n @if (showClearButton() && !!dateInput.value) {\n <button\n mat-icon-button\n class=\"cursor-pointer pe-0 ps-0\"\n matTooltip=\"Clear\"\n (click)=\"clearSelection($event)\"\n >\n <mat-icon>clear</mat-icon>\n </button>\n } @if (showCalendarIcon()) {\n <button mat-icon-button class=\"cursor-pointer\">\n <mat-icon>date_range</mat-icon>\n </button>\n } @if (showRangeRequired()) {\n <button\n mat-icon-button\n class=\"cursor-pointer\"\n [class.checked]=\"isRangeRequired()\"\n (click)=\"toggleRangeSelection($event)\"\n matTooltip=\"Rango de fechas obligatorio\"\n >\n <mat-icon [color]=\"isRangeRequired() ? 'accent' : ''\">\n {{ isRangeRequired() ? 'check_box' : 'check_box_outline_blank' }}\n </mat-icon>\n </button>\n }\n </ng-container>\n </mat-form-field>\n\n @if (dateDropDownOptions.length && isShowStaticDefaultOptions) {\n <ng-container\n *ngTemplateOutlet=\"\n dateOptionList;\n context: {\n $implicit: visibleOptions(),\n dateInput: dateInput,\n optionId: staticOptionId,\n className: 'w-full custom-ckd-container ndp-cdk-container range-input',\n }\n \"\n />\n }\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isDateOptionList\"\n [cdkConnectedOverlayPush]=\"cdkConnectedOverlayPush\"\n [cdkConnectedOverlayOffsetX]=\"listCdkConnectedOverlayOffsetX\"\n [cdkConnectedOverlayOffsetY]=\"listCdkConnectedOverlayOffsetY\"\n (backdropClick)=\"isDateOptionList = false\"\n >\n @if (dateDropDownOptions.length && !isShowStaticDefaultOptions) {\n <ng-container\n *ngTemplateOutlet=\"\n dateOptionList;\n context: {\n $implicit: visibleOptions(),\n dateInput: dateInput,\n optionId: dynamicOptionId,\n className: 'w-full custom-ckd-container ndp-cdk-container range-input',\n }\n \"\n />\n }\n </ng-template>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isCustomRange\"\n [cdkConnectedOverlayPush]=\"cdkConnectedOverlayPush\"\n [cdkConnectedOverlayPositions]=\"cdkConnectedOverlayPositions\"\n [cdkConnectedOverlayOffsetX]=\"cdkConnectedOverlayOffsetX\"\n [cdkConnectedOverlayOffsetY]=\"cdkConnectedOverlayOffsetY\"\n (backdropClick)=\"isCustomRange = false\"\n >\n <div\n class=\"custom-ckd-container ndp-cdk-container custom-calendar-container ndp-calendar-container\"\n [class]=\"{ 'without-default-opt': hideDefaultOptions }\"\n >\n <div class=\"row-1\">\n @if (!hideDefaultOptions) {\n <div class=\"pt-custom column-1\">\n <ng-container\n *ngTemplateOutlet=\"\n dateOptionList;\n context: {\n $implicit: visibleOptions(),\n dateInput: dateInput,\n }\n \"\n />\n </div>\n <div class=\"ndp-column-separator\"></div>\n }\n <div class=\"mt-2 column-2\">\n <acp-date-range-calendar\n [selectedDates]=\"selectedDates\"\n #calendar\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n (selectedDatesChange)=\"onCalendarSelectionChange($event)\"\n />\n </div>\n </div>\n <div class=\"row-2 br-top\">\n <div class=\"footer-content ndp-footer-content\">\n @if (enableEditableDates) {\n <form class=\"ndp-date-inputs\" [formGroup]=\"editableForm\">\n <mat-form-field class=\"ndp-date-field\" subscriptSizing=\"dynamic\">\n <mat-label>Start</mat-label>\n <input\n matInput\n formControlName=\"start\"\n placeholder=\"e.g. now-7d\"\n (blur)=\"commitEditableDates(calendar)\"\n (keydown.enter)=\"applyEditableDates(dateInput, calendar)\"\n />\n @if (editableForm.controls.start.hasError('required')) {\n <mat-error>Required</mat-error>\n } @else if (editableForm.controls.start.hasError('invalidDate')) {\n <mat-error>Invalid date or expression</mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"ndp-date-field\" subscriptSizing=\"dynamic\">\n <mat-label>End</mat-label>\n <input\n matInput\n formControlName=\"end\"\n placeholder=\"e.g. now\"\n (blur)=\"commitEditableDates(calendar)\"\n (keydown.enter)=\"applyEditableDates(dateInput, calendar)\"\n />\n @if (editableForm.controls.end.hasError('required')) {\n <mat-error>Required</mat-error>\n } @else if (editableForm.controls.end.hasError('invalidDate')) {\n <mat-error>Invalid date or expression</mat-error>\n } @else if (editableForm.hasError('rangeOrder')) {\n <mat-error>Start must be before end</mat-error>\n }\n </mat-form-field>\n </form>\n } @else {\n <span id=\"range-label-text\" class=\"ndp-range-label-text\">\n {{ calendar?.selectedDates?.start | date: dateFormat }} @if\n (calendar?.selectedDates?.end) {\n <span> - {{ calendar.selectedDates?.end | date: dateFormat }} </span>\n }\n </span>\n }\n <div class=\"buttons\">\n <acp-button\n type=\"button\"\n variant=\"danger\"\n matStyle=\"filled\"\n (handleClick)=\"isCustomRange = false\"\n >Cancelar</acp-button\n >\n <acp-button\n type=\"button\"\n variant=\"primary\"\n matStyle=\"filled\"\n [class.disabled]=\"\n enableEditableDates\n ? editableForm.invalid\n : !(calendar?.selectedDates?.start && calendar?.selectedDates?.end)\n \"\n (handleClick)=\"\n enableEditableDates && commitEditableDates(calendar);\n updateCustomRange(dateInput, calendar.selectedDates)\n \"\n >\n Aplicar \n </acp-button>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n</div>\n\n<ng-template\n #dateOptionList\n let-options\n let-input=\"dateInput\"\n let-optionId=\"optionId\"\n let-className=\"className\"\n>\n <mat-action-list [ngClass]=\"className\" [id]=\"optionId\">\n @for (option of options; track option.optionLabel) {\n <mat-list-item [activated]=\"option.isSelected\" (click)=\"updateSelection(option, input)\">\n {{ option.optionLabel }}\n </mat-list-item>\n }\n </mat-action-list>\n</ng-template>\n", styles: ["::ng-deep .cdk-overlay-dark-backdrop{background:none}mat-list-item.mat-mdc-list-item{height:40px}mat-list-item.mdc-list-item--activated{background-color:var(--ndp-selected-option-bg, var(--mat-sys-secondary-container, rgba(0, 0, 0, .08)))}::ng-deep .cdk-overlay-pane:has(.custom-ckd-container),::ng-deep .cdk-overlay-pane:has(.ndp-cdk-container){width:100%;background-color:var(--mat-sys-surface-container);max-height:100vh;overflow-y:auto;overflow-x:hidden;max-width:700px;margin-top:-22px;border:1px solid var(--mat-sys-surface-container)}::ng-deep .cdk-overlay-pane:has(.range-input){max-width:250px}.br-top{border-top:1px solid var(--mat-sys-surface-container)}.br-right{border-right:1px solid var(--mat-sys-surface-container)}.disabled{pointer-events:none;opacity:.5}.mat-button,.mdc-button{font-family:var(--mat-list-list-item-label-text-font);line-height:var(--mat-list-list-item-label-text-line-height);font-size:var(--mat-list-list-item-label-text-size);font-weight:var(--mat-list-list-item-label-text-weight);letter-spacing:var(--mat-list-list-item-label-text-tracking)}.w-full{width:100%}.display-hidden{display:none}.custom-calendar-container,.ndp-calendar-container{width:100%}.row-1,.row-2{width:100%;box-sizing:border-box}.row-1{display:flex;align-items:stretch}.row-2{padding:16px}.ndp-column-separator{flex:0 0 1px;background-color:var(--mat-sys-surface-container)}.footer-content,.ndp-footer-content{align-items:center;display:flex;text-align:right;justify-content:end;gap:16px;text-overflow:ellipsis}.footer-content .buttons,.ndp-footer-content .buttons{display:flex;gap:8px}.ndp-date-inputs{display:flex;gap:8px;margin-right:auto;align-items:flex-start}.ndp-date-field{width:150px}.column-1{flex:0 0 25%;overflow:auto}.column-2{flex:1 1 auto;min-width:0}.without-default-opt .column-1{display:none}@media(max-width:400px){.footer-content,.ndp-footer-content{display:block}.footer-content .buttons,.ndp-footer-content .buttons{justify-content:flex-end;margin-top:20px}#range-label-text{margin-right:1.5rem}}@media(max-width:650px){.row-1{flex-direction:column}.column-1{flex-basis:auto}.column-separator{display:none}}.pe-0{padding-right:0}.ps-0{padding-left:0}button.checked{color:var(--mat-sys-primary);border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i6.MatActionList, selector: "mat-action-list", exportAs: ["matActionList"] }, { kind: "component", type: i6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AcpDateRangeCalendar, selector: "acp-date-range-calendar", inputs: ["minDate", "maxDate", "selectedDates"], outputs: ["selectedDatesChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Button, selector: "acp-button", inputs: ["variant", "text", "icon", "disabled", "type", "matStyle", "customClass", "reportFormat", "extended", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7748
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDateRangeInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7749
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpDateRangeInput, isStandalone: true, selector: "acp-date-range-input", inputs: { inputLabel: { classPropertyName: "inputLabel", publicName: "inputLabel", isSignal: false, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showRangeRequired: { classPropertyName: "showRangeRequired", publicName: "showRangeRequired", isSignal: true, isRequired: false, transformFunction: null }, isRangeRequired: { classPropertyName: "isRangeRequired", publicName: "isRangeRequired", isSignal: true, isRequired: false, transformFunction: null }, staticOptionId: { classPropertyName: "staticOptionId", publicName: "staticOptionId", isSignal: false, isRequired: false, transformFunction: null }, dynamicOptionId: { classPropertyName: "dynamicOptionId", publicName: "dynamicOptionId", isSignal: false, isRequired: false, transformFunction: null }, calendarId: { classPropertyName: "calendarId", publicName: "calendarId", isSignal: false, isRequired: false, transformFunction: null }, enableDefaultOptions: { classPropertyName: "enableDefaultOptions", publicName: "enableDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: false, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: false, isRequired: false, transformFunction: null }, isShowStaticDefaultOptions: { classPropertyName: "isShowStaticDefaultOptions", publicName: "isShowStaticDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, hideDefaultOptions: { classPropertyName: "hideDefaultOptions", publicName: "hideDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayOffsetX: { classPropertyName: "cdkConnectedOverlayOffsetX", publicName: "cdkConnectedOverlayOffsetX", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayOffsetY: { classPropertyName: "cdkConnectedOverlayOffsetY", publicName: "cdkConnectedOverlayOffsetY", isSignal: false, isRequired: false, transformFunction: null }, listCdkConnectedOverlayOffsetY: { classPropertyName: "listCdkConnectedOverlayOffsetY", publicName: "listCdkConnectedOverlayOffsetY", isSignal: false, isRequired: false, transformFunction: null }, listCdkConnectedOverlayOffsetX: { classPropertyName: "listCdkConnectedOverlayOffsetX", publicName: "listCdkConnectedOverlayOffsetX", isSignal: false, isRequired: false, transformFunction: null }, selectedOptionIndex: { classPropertyName: "selectedOptionIndex", publicName: "selectedOptionIndex", isSignal: false, isRequired: false, transformFunction: null }, displaySelectedLabel: { classPropertyName: "displaySelectedLabel", publicName: "displaySelectedLabel", isSignal: false, isRequired: false, transformFunction: null }, displaySelectedExpression: { classPropertyName: "displaySelectedExpression", publicName: "displaySelectedExpression", isSignal: false, isRequired: false, transformFunction: null }, enableEditableDates: { classPropertyName: "enableEditableDates", publicName: "enableEditableDates", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayPush: { classPropertyName: "cdkConnectedOverlayPush", publicName: "cdkConnectedOverlayPush", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayPositions: { classPropertyName: "cdkConnectedOverlayPositions", publicName: "cdkConnectedOverlayPositions", isSignal: false, isRequired: false, transformFunction: null }, allowSingleDateSelection: { classPropertyName: "allowSingleDateSelection", publicName: "allowSingleDateSelection", isSignal: false, isRequired: false, transformFunction: null }, autoSelectOption: { classPropertyName: "autoSelectOption", publicName: "autoSelectOption", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, dateDropDownOptions: { classPropertyName: "dateDropDownOptions", publicName: "dateDropDownOptions", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dateSelectionChanged: "dateSelectionChanged", dateListOptions: "dateListOptions", rangeRequiredChange: "rangeRequiredChange" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "<!--\n AcpDateRangeInput Component Template\n @author AcontPlus S.A.S\n @version 1.0.0\n\n Comprehensive date range picker with predefined options, custom calendar selection,\n and support for human-readable date expressions.\n-->\n<div class=\"date-picker-main ndp-main\" cdkOverlayOrigin #trigger>\n <mat-form-field\n class=\"w-full\"\n [class]=\"{ 'display-hidden': isShowStaticDefaultOptions }\"\n (click)=\"toggleDateOptionSelectionList($event)\"\n >\n <mat-label (click)=\"toggleDateOptionSelectionList($event)\">{{ inputLabel }}</mat-label>\n <input\n matInput\n #dateInput\n class=\"cursor-pointer\"\n id=\"date-input-field\"\n (input)=\"onMainInputChange(dateInput)\"\n />\n <ng-container matSuffix>\n @if (showClearButton() && !!dateInput.value) {\n <button\n mat-icon-button\n class=\"cursor-pointer pe-0 ps-0\"\n matTooltip=\"Clear\"\n (click)=\"clearSelection($event)\"\n >\n <mat-icon>clear</mat-icon>\n </button>\n } @if (showCalendarIcon()) {\n <button mat-icon-button class=\"cursor-pointer\">\n <mat-icon>date_range</mat-icon>\n </button>\n } @if (showRangeRequired()) {\n <button\n mat-icon-button\n class=\"cursor-pointer\"\n [class.checked]=\"isRangeRequired()\"\n (click)=\"toggleRangeSelection($event)\"\n matTooltip=\"Rango de fechas obligatorio\"\n >\n <mat-icon [color]=\"isRangeRequired() ? 'accent' : ''\">\n {{ isRangeRequired() ? 'check_box' : 'check_box_outline_blank' }}\n </mat-icon>\n </button>\n }\n </ng-container>\n </mat-form-field>\n\n @if (dateDropDownOptions.length && isShowStaticDefaultOptions) {\n <ng-container\n *ngTemplateOutlet=\"\n dateOptionList;\n context: {\n $implicit: visibleOptions(),\n dateInput: dateInput,\n optionId: staticOptionId,\n className: 'w-full custom-ckd-container ndp-cdk-container range-input',\n }\n \"\n />\n }\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isDateOptionList\"\n [cdkConnectedOverlayPush]=\"cdkConnectedOverlayPush\"\n [cdkConnectedOverlayOffsetX]=\"listCdkConnectedOverlayOffsetX\"\n [cdkConnectedOverlayOffsetY]=\"listCdkConnectedOverlayOffsetY\"\n (backdropClick)=\"isDateOptionList = false\"\n >\n @if (dateDropDownOptions.length && !isShowStaticDefaultOptions) {\n <ng-container\n *ngTemplateOutlet=\"\n dateOptionList;\n context: {\n $implicit: visibleOptions(),\n dateInput: dateInput,\n optionId: dynamicOptionId,\n className: 'w-full custom-ckd-container ndp-cdk-container range-input',\n }\n \"\n />\n }\n </ng-template>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isCustomRange\"\n [cdkConnectedOverlayPush]=\"cdkConnectedOverlayPush\"\n [cdkConnectedOverlayPositions]=\"cdkConnectedOverlayPositions\"\n [cdkConnectedOverlayOffsetX]=\"cdkConnectedOverlayOffsetX\"\n [cdkConnectedOverlayOffsetY]=\"cdkConnectedOverlayOffsetY\"\n (backdropClick)=\"isCustomRange = false\"\n >\n <div\n class=\"custom-ckd-container ndp-cdk-container custom-calendar-container ndp-calendar-container\"\n [class]=\"{ 'without-default-opt': hideDefaultOptions }\"\n >\n <div class=\"row-1\">\n @if (!hideDefaultOptions) {\n <div class=\"pt-custom column-1\">\n <ng-container\n *ngTemplateOutlet=\"\n dateOptionList;\n context: {\n $implicit: visibleOptions(),\n dateInput: dateInput,\n }\n \"\n />\n </div>\n <div class=\"ndp-column-separator\"></div>\n }\n <div class=\"mt-2 column-2\">\n <acp-date-range-calendar\n [selectedDates]=\"selectedDates\"\n #calendar\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n (selectedDatesChange)=\"onCalendarSelectionChange($event)\"\n />\n </div>\n </div>\n <div class=\"row-2 br-top\">\n <div class=\"footer-content ndp-footer-content\">\n @if (enableEditableDates) {\n <form class=\"ndp-date-inputs\" [formGroup]=\"editableForm\">\n <mat-form-field class=\"ndp-date-field\" subscriptSizing=\"dynamic\">\n <mat-label>Start</mat-label>\n <input\n matInput\n formControlName=\"start\"\n placeholder=\"e.g. now-7d\"\n (blur)=\"commitEditableDates(calendar)\"\n (keydown.enter)=\"applyEditableDates(dateInput, calendar)\"\n />\n @if (editableForm.controls.start.hasError('required')) {\n <mat-error>Required</mat-error>\n } @else if (editableForm.controls.start.hasError('invalidDate')) {\n <mat-error>Invalid date or expression</mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"ndp-date-field\" subscriptSizing=\"dynamic\">\n <mat-label>End</mat-label>\n <input\n matInput\n formControlName=\"end\"\n placeholder=\"e.g. now\"\n (blur)=\"commitEditableDates(calendar)\"\n (keydown.enter)=\"applyEditableDates(dateInput, calendar)\"\n />\n @if (editableForm.controls.end.hasError('required')) {\n <mat-error>Required</mat-error>\n } @else if (editableForm.controls.end.hasError('invalidDate')) {\n <mat-error>Invalid date or expression</mat-error>\n } @else if (editableForm.hasError('rangeOrder')) {\n <mat-error>Start must be before end</mat-error>\n }\n </mat-form-field>\n </form>\n } @else {\n <span id=\"range-label-text\" class=\"ndp-range-label-text\">\n {{ calendar?.selectedDates?.start | date: dateFormat }} @if\n (calendar?.selectedDates?.end) {\n <span> - {{ calendar.selectedDates?.end | date: dateFormat }} </span>\n }\n </span>\n }\n <div class=\"buttons\">\n <acp-button\n type=\"button\"\n variant=\"danger\"\n matStyle=\"filled\"\n (handleClick)=\"isCustomRange = false\"\n >Cancelar</acp-button\n >\n <acp-button\n type=\"button\"\n variant=\"primary\"\n matStyle=\"filled\"\n [class.disabled]=\"\n enableEditableDates\n ? editableForm.invalid\n : !(calendar?.selectedDates?.start && calendar?.selectedDates?.end)\n \"\n (handleClick)=\"\n enableEditableDates && commitEditableDates(calendar);\n updateCustomRange(dateInput, calendar.selectedDates)\n \"\n >\n Aplicar \n </acp-button>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n</div>\n\n<ng-template\n #dateOptionList\n let-options\n let-input=\"dateInput\"\n let-optionId=\"optionId\"\n let-className=\"className\"\n>\n <mat-action-list [ngClass]=\"className\" [id]=\"optionId\">\n @for (option of options; track option.optionLabel) {\n <mat-list-item [activated]=\"option.isSelected\" (click)=\"updateSelection(option, input)\">\n {{ option.optionLabel }}\n </mat-list-item>\n }\n </mat-action-list>\n</ng-template>\n", styles: ["::ng-deep .cdk-overlay-dark-backdrop{background:none}mat-list-item.mat-mdc-list-item{height:40px}mat-list-item.mdc-list-item--activated{background-color:var(--ndp-selected-option-bg, var(--mat-sys-secondary-container, rgba(0, 0, 0, .08)))}::ng-deep .cdk-overlay-pane:has(.custom-ckd-container),::ng-deep .cdk-overlay-pane:has(.ndp-cdk-container){width:100%;background-color:var(--mat-sys-surface-container);max-height:100vh;overflow-y:auto;overflow-x:hidden;max-width:700px;margin-top:-22px;border:1px solid var(--mat-sys-surface-container)}::ng-deep .cdk-overlay-pane:has(.range-input){max-width:250px}.br-top{border-top:1px solid var(--mat-sys-surface-container)}.br-right{border-right:1px solid var(--mat-sys-surface-container)}.disabled{pointer-events:none;opacity:.5}.mat-button,.mdc-button{font-family:var(--mat-list-list-item-label-text-font);line-height:var(--mat-list-list-item-label-text-line-height);font-size:var(--mat-list-list-item-label-text-size);font-weight:var(--mat-list-list-item-label-text-weight);letter-spacing:var(--mat-list-list-item-label-text-tracking)}.w-full{width:100%}.display-hidden{display:none}.custom-calendar-container,.ndp-calendar-container{width:100%}.row-1,.row-2{width:100%;box-sizing:border-box}.row-1{display:flex;align-items:stretch}.row-2{padding:16px}.ndp-column-separator{flex:0 0 1px;background-color:var(--mat-sys-surface-container)}.footer-content,.ndp-footer-content{align-items:center;display:flex;text-align:right;justify-content:end;gap:16px;text-overflow:ellipsis}.footer-content .buttons,.ndp-footer-content .buttons{display:flex;gap:8px}.ndp-date-inputs{display:flex;gap:8px;margin-right:auto;align-items:flex-start}.ndp-date-field{width:150px}.column-1{flex:0 0 25%;overflow:auto}.column-2{flex:1 1 auto;min-width:0}.without-default-opt .column-1{display:none}@media(max-width:400px){.footer-content,.ndp-footer-content{display:block}.footer-content .buttons,.ndp-footer-content .buttons{justify-content:flex-end;margin-top:20px}#range-label-text{margin-right:1.5rem}}@media(max-width:650px){.row-1{flex-direction:column}.column-1{flex-basis:auto}.column-separator{display:none}}.pe-0{padding-right:0}.ps-0{padding-left:0}button.checked{color:var(--mat-sys-primary);border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i6.MatActionList, selector: "mat-action-list", exportAs: ["matActionList"] }, { kind: "component", type: i6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AcpDateRangeCalendar, selector: "acp-date-range-calendar", inputs: ["minDate", "maxDate", "selectedDates"], outputs: ["selectedDatesChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Button, selector: "acp-button", inputs: ["variant", "text", "icon", "disabled", "type", "matStyle", "customClass", "reportFormat", "extended", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7752
7750
|
}
|
|
7753
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
7751
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDateRangeInput, decorators: [{
|
|
7754
7752
|
type: Component,
|
|
7755
7753
|
args: [{ selector: 'acp-date-range-input', imports: [
|
|
7756
7754
|
FormsModule,
|
|
@@ -8051,8 +8049,8 @@ class AcpCheckboxGroup {
|
|
|
8051
8049
|
_trackBy = (index, item) => {
|
|
8052
8050
|
return this.trackBy ? this.trackBy(index, item) : item;
|
|
8053
8051
|
};
|
|
8054
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
8055
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0
|
|
8052
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCheckboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8053
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpCheckboxGroup, isStandalone: true, selector: "acp-checkbox-group", inputs: { trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: false, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { selectionChange: "selectionChange" }, host: { classAttribute: "acp-checkbox-group" }, providers: [
|
|
8056
8054
|
{
|
|
8057
8055
|
provide: NG_VALUE_ACCESSOR,
|
|
8058
8056
|
useExisting: forwardRef(() => AcpCheckboxGroup),
|
|
@@ -8060,7 +8058,7 @@ class AcpCheckboxGroup {
|
|
|
8060
8058
|
},
|
|
8061
8059
|
], queries: [{ propertyName: "_checkboxes", predicate: i0.forwardRef(() => MatCheckbox), descendants: true }], exportAs: ["acpCheckboxGroup"], ngImport: i0, template: "@if (showSelectAll) {\n<mat-checkbox\n class=\"acp-checkbox-master\"\n [checked]=\"selectAll\"\n [(indeterminate)]=\"selectAllIndeterminate\"\n [disabled]=\"disabled\"\n (change)=\"_updateMasterCheckboxState($event, -1)\"\n>\n {{ selectAllLabel }}\n</mat-checkbox>\n} @for (option of items; track _trackBy($index, option); let i = $index) {\n<mat-checkbox\n class=\"acp-checkbox-normal\"\n [(ngModel)]=\"option.checked\"\n [aria-describedby]=\"option.ariaDescribedby\"\n [aria-label]=\"option.ariaLabel\"\n [aria-labelledby]=\"option.ariaLabelledby\"\n [color]=\"option.color\"\n [disabled]=\"option.disabled || disabled\"\n [disableRipple]=\"option.disableRipple\"\n [labelPosition]=\"option.labelPosition\"\n [required]=\"option.required\"\n (change)=\"_updateNormalCheckboxState($event, i)\"\n>\n {{ option[bindLabel()] | toObservable | async }}\n</mat-checkbox>\n}\n", styles: [".acp-checkbox-group{display:flex;flex-direction:column;gap:.5rem}.acp-checkbox-group .acp-checkbox-master{margin-bottom:.5rem;font-weight:500}.acp-checkbox-group .acp-checkbox-normal{margin-left:1rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8062
8060
|
}
|
|
8063
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
8061
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCheckboxGroup, decorators: [{
|
|
8064
8062
|
type: Component,
|
|
8065
8063
|
args: [{ selector: 'acp-checkbox-group', exportAs: 'acpCheckboxGroup', host: {
|
|
8066
8064
|
class: 'acp-checkbox-group',
|
|
@@ -8263,10 +8261,10 @@ class AcpKpiCard {
|
|
|
8263
8261
|
onMouseLeave() {
|
|
8264
8262
|
this.isHovered.set(false);
|
|
8265
8263
|
}
|
|
8266
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
8267
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpKpiCard, isStandalone: true, selector: "acp-kpi-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, avatarInitials: { classPropertyName: "avatarInitials", publicName: "avatarInitials", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, percentage: { classPropertyName: "percentage", publicName: "percentage", isSignal: true, isRequired: false, transformFunction: null }, percentageFormat: { classPropertyName: "percentageFormat", publicName: "percentageFormat", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, progressColor: { classPropertyName: "progressColor", publicName: "progressColor", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", actionClicked: "actionClicked" }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ["icon"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "avatarTemplate", first: true, predicate: ["avatar"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actions"], descendants: true, read: TemplateRef, isSignal: true }], exportAs: ["acpKpiCard"], ngImport: i0, template: "<mat-card\n class=\"acp-kpi-card__card\"\n [routerLink]=\"routerLink()\"\n [attr.aria-label]=\"ariaLabel()\"\n [matTooltip]=\"tooltip()\"\n [matTooltipDisabled]=\"!tooltip()\"\n (click)=\"onCardClick()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n>\n <!-- Loading Skeleton -->\n @if (loading()) {\n <div class=\"acp-kpi-card__skeleton\">\n <div class=\"acp-kpi-card__skeleton-header\"></div>\n <div class=\"acp-kpi-card__skeleton-value\"></div>\n <div class=\"acp-kpi-card__skeleton-text\"></div>\n </div>\n } @else {\n <!-- Header -->\n @if (hasHeader()) {\n <mat-card-header class=\"acp-kpi-card__header\">\n <div class=\"acp-kpi-card__header-content\">\n <!-- Icon or Avatar -->\n <div class=\"acp-kpi-card__icon-container\">\n @if (iconTemplate()) {\n <ng-container [ngTemplateOutlet]=\"iconTemplate()!\"></ng-container>\n } @else if (svgIcon()) {\n <mat-icon class=\"acp-kpi-card__icon\" [svgIcon]=\"svgIcon()!\" aria-hidden=\"true\"></mat-icon>\n } @else if (effectiveIcon()) {\n <mat-icon class=\"acp-kpi-card__icon\" aria-hidden=\"true\">{{ effectiveIcon() }}</mat-icon>\n } @else if (avatarTemplate()) {\n <div class=\"acp-kpi-card__avatar\">\n <ng-container [ngTemplateOutlet]=\"avatarTemplate()!\"></ng-container>\n </div>\n } @else if (avatar()) {\n <img class=\"acp-kpi-card__avatar-image\" [src]=\"avatar()\" [alt]=\"title() || 'Avatar'\" />\n } @else if (avatarInitials()) {\n <div class=\"acp-kpi-card__avatar-initials\">{{ avatarInitials() }}</div>\n }\n </div>\n\n <!-- Title & Subtitle -->\n <div class=\"acp-kpi-card__title-container\">\n @if (title()) {\n <h3 class=\"acp-kpi-card__title\">{{ title() }}</h3>\n } @if (subtitle()) {\n <p class=\"acp-kpi-card__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n </div>\n\n <!-- Menu Button (optional) - Only show if actions template exists -->\n @if (hasActions()) {\n <button\n mat-icon-button\n [matMenuTriggerFor]=\"menu\"\n class=\"acp-kpi-card__menu-button\"\n aria-label=\"More options\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\" class=\"acp-kpi-card__menu\">\n <ng-container [ngTemplateOutlet]=\"actionsTemplate()!\"></ng-container>\n </mat-menu>\n }\n </mat-card-header>\n }\n\n <!-- Content -->\n <mat-card-content class=\"acp-kpi-card__content\">\n <!-- Main Value -->\n @if (value()) {\n <div class=\"acp-kpi-card__value-section\">\n <div class=\"acp-kpi-card__value\">{{ value() }}</div>\n\n <!-- Percentage & Trend -->\n @if (percentage() !== undefined) {\n <div class=\"acp-kpi-card__metric\">\n @if (isTrending()) {\n <mat-icon class=\"acp-kpi-card__trend-icon\" [attr.aria-label]=\"trendConfig().ariaLabel\">\n {{ trendConfig().icon }}\n </mat-icon>\n }\n <span class=\"acp-kpi-card__percentage\">\n {{ percentageFormat() === 'percent' ? (percentage() + '%') : percentage() }}\n </span>\n </div>\n }\n </div>\n }\n\n <!-- Description -->\n @if (description()) {\n <p class=\"acp-kpi-card__description\">{{ description() }}</p>\n }\n\n <!-- Progress Bar -->\n @if (progress() !== undefined) {\n <mat-progress-bar\n class=\"acp-kpi-card__progress\"\n mode=\"determinate\"\n [value]=\"progress()\"\n [color]=\"progressColor()\"\n ></mat-progress-bar>\n }\n </mat-card-content>\n\n <!-- Footer -->\n @if (hasFooter()) {\n <mat-divider></mat-divider>\n <div class=\"acp-kpi-card__footer\">\n @if (footerTemplate()) {\n <ng-container [ngTemplateOutlet]=\"footerTemplate()!\"></ng-container>\n } @else if (footer()) {\n <p class=\"acp-kpi-card__footer-text\">{{ footer() }}</p>\n }\n </div>\n } }\n</mat-card>\n", styles: [".acp-kpi-card{--acp-kpi-card-bg: var(--acp-kpi-card-primary-bg, var(--mat-sys-primary));--acp-kpi-card-fg: var(--acp-kpi-card-primary-color, var(--mat-sys-on-primary));display:flex;vertical-align:middle;width:100%;max-width:100%}.acp-kpi-card__card{width:100%;display:flex;flex-direction:column;border-radius:12px;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;background-color:#fff}.acp-kpi-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px;gap:12px}.acp-kpi-card__header-content{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.acp-kpi-card__icon-container{display:flex;align-items:center;justify-content:center;flex-shrink:0}.acp-kpi-card__icon{font-size:24px;width:24px;height:24px;color:var(--acp-kpi-card-fg)}.acp-kpi-card__avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--acp-kpi-card-bg) 30%,transparent);color:var(--acp-kpi-card-fg);font-weight:500;font-size:14px;flex-shrink:0}.acp-kpi-card__avatar-image{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}.acp-kpi-card__avatar-initials{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--acp-kpi-card-bg) 30%,transparent);color:var(--acp-kpi-card-fg);font-weight:500;font-size:14px;flex-shrink:0}.acp-kpi-card__title-container{flex:1;min-width:0}.acp-kpi-card__title{margin:0;font-size:14px;font-weight:500;letter-spacing:.25px;color:var(--acp-kpi-card-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acp-kpi-card__subtitle{margin:2px 0 0;font-size:12px;font-weight:400;letter-spacing:.4px;color:rgba(var(--acp-kpi-card-fg),.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acp-kpi-card__menu-button{flex-shrink:0;opacity:.7;transition:opacity .2s ease-in-out}.acp-kpi-card__menu-button:hover{opacity:1}.acp-kpi-card__menu-button:focus-visible{outline:2px solid currentColor;outline-offset:2px}.acp-kpi-card__menu{will-change:transform}.acp-kpi-card__content{flex:1;padding:16px;display:flex;flex-direction:column;gap:12px}.acp-kpi-card__value-section{display:flex;align-items:baseline;gap:8px}.acp-kpi-card__value{font-size:28px;font-weight:600;letter-spacing:-.5px;color:var(--acp-kpi-card-fg);line-height:1.2}.acp-kpi-card__metric{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:500;letter-spacing:.25px;color:rgba(var(--acp-kpi-card-fg),.8)}.acp-kpi-card__trend-icon{font-size:16px;width:16px;height:16px}.acp-kpi-card__percentage{white-space:nowrap}.acp-kpi-card.acp-kpi-card--success .acp-kpi-card__metric{color:var(--acp-kpi-card-success-color, light-dark(#ffffff, #013a00))}.acp-kpi-card.acp-kpi-card--success-light .acp-kpi-card__metric{color:var(--acp-kpi-card-success-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--warning .acp-kpi-card__metric{color:var(--acp-kpi-card-warning-color, light-dark(#ffffff, #502400))}.acp-kpi-card.acp-kpi-card--warning-light .acp-kpi-card__metric{color:var(--acp-kpi-card-warning-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--error .acp-kpi-card__metric{color:var(--acp-kpi-card-error-color, var(--mat-sys-on-error))}.acp-kpi-card.acp-kpi-card--error-light .acp-kpi-card__metric{color:var(--acp-kpi-card-error-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--info .acp-kpi-card__metric{color:var(--acp-kpi-card-info-color, light-dark(#ffffff, #002f65))}.acp-kpi-card.acp-kpi-card--info-light .acp-kpi-card__metric{color:var(--acp-kpi-card-info-light-color, var(--mat-sys-on-surface))}.acp-kpi-card__description{margin:0;font-size:12px;font-weight:400;letter-spacing:.4px;color:rgba(var(--acp-kpi-card-fg),.6);line-height:1.5}.acp-kpi-card__progress{height:4px;border-radius:2px;background-color:rgba(var(--acp-kpi-card-fg),.12)}.acp-kpi-card__footer{padding:12px 16px;font-size:12px;font-weight:400;letter-spacing:.4px;color:rgba(var(--acp-kpi-card-fg),.6)}.acp-kpi-card__footer-text{margin:0}.acp-kpi-card__skeleton{padding:16px;display:flex;flex-direction:column;gap:12px}.acp-kpi-card__skeleton-header{width:60%;height:16px;background:linear-gradient(90deg,#0000001a 25%,#0000000d,#0000001a 75%);background-size:200% 100%;animation:loading 1.5s infinite;border-radius:4px}.acp-kpi-card__skeleton-value{width:40%;height:28px;background:linear-gradient(90deg,#0000001a 25%,#0000000d,#0000001a 75%);background-size:200% 100%;animation:loading 1.5s infinite;border-radius:4px}.acp-kpi-card__skeleton-text{width:80%;height:12px;background:linear-gradient(90deg,#0000001a 25%,#0000000d,#0000001a 75%);background-size:200% 100%;animation:loading 1.5s infinite;border-radius:4px}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.acp-kpi-card.acp-kpi-card--primary{--acp-kpi-card-bg: var(--acp-kpi-card-primary-bg, var(--mat-sys-primary));--acp-kpi-card-fg: var(--acp-kpi-card-primary-color, var(--mat-sys-on-primary))}.acp-kpi-card.acp-kpi-card--secondary{--acp-kpi-card-bg: var(--acp-kpi-card-secondary-bg, var(--mat-sys-secondary));--acp-kpi-card-fg: var(--acp-kpi-card-secondary-color, var(--mat-sys-on-secondary))}.acp-kpi-card.acp-kpi-card--success{--acp-kpi-card-bg: var(--acp-kpi-card-success-bg, light-dark(#038b00, #03c700));--acp-kpi-card-fg: var(--acp-kpi-card-success-color, light-dark(#ffffff, #013a00))}.acp-kpi-card.acp-kpi-card--success-light{--acp-kpi-card-bg: var(--acp-kpi-card-success-light-bg, light-dark(#cbffb8, #014600));--acp-kpi-card-fg: var(--acp-kpi-card-success-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--warning{--acp-kpi-card-bg: var(--acp-kpi-card-warning-bg, light-dark(#e37100, #ffb787));--acp-kpi-card-fg: var(--acp-kpi-card-warning-color, light-dark(#ffffff, #502400))}.acp-kpi-card.acp-kpi-card--warning-light{--acp-kpi-card-bg: var(--acp-kpi-card-warning-light-bg, light-dark(#ffede4, #612d00));--acp-kpi-card-fg: var(--acp-kpi-card-warning-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--error{--acp-kpi-card-bg: var(--acp-kpi-card-error-bg, var(--mat-sys-error));--acp-kpi-card-fg: var(--acp-kpi-card-error-color, var(--mat-sys-on-error))}.acp-kpi-card.acp-kpi-card--error-light{--acp-kpi-card-bg: var(--acp-kpi-card-error-light-bg, light-dark(#ffedea, #7e0100));--acp-kpi-card-fg: var(--acp-kpi-card-error-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--info{--acp-kpi-card-bg: var(--acp-kpi-card-info-bg, light-dark(#0074e9, #7cabff));--acp-kpi-card-fg: var(--acp-kpi-card-info-color, light-dark(#ffffff, #002f65))}.acp-kpi-card.acp-kpi-card--info-light{--acp-kpi-card-bg: var(--acp-kpi-card-info-light-bg, light-dark(#ecf0ff, #003a7a));--acp-kpi-card-fg: var(--acp-kpi-card-info-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--neutral{--acp-kpi-card-bg: var(--acp-kpi-card-neutral-bg, var(--mat-sys-surface-variant));--acp-kpi-card-fg: var(--acp-kpi-card-neutral-color, var(--mat-sys-on-surface-variant))}.acp-kpi-card.acp-kpi-card--white{--acp-kpi-card-bg: #ffffff;--acp-kpi-card-fg: #1f2937}.acp-kpi-card.acp-kpi-card--custom{--acp-kpi-card-bg: var( --acp-kpi-card-custom-bg, var(--acp-kpi-card-custom-bg, var(--mat-sys-surface-container)) );--acp-kpi-card-fg: var( --acp-kpi-card-custom-fg, var(--acp-kpi-card-custom-color, var(--mat-sys-on-surface)) )}.acp-kpi-card.acp-kpi-card--default .acp-kpi-card__card{background:var(--acp-kpi-card-bg);color:var(--acp-kpi-card-fg);border:1px solid rgba(var(--acp-kpi-card-fg),.12)}.acp-kpi-card.acp-kpi-card--elevated .acp-kpi-card__card{background:var(--acp-kpi-card-bg);color:var(--acp-kpi-card-fg);box-shadow:0 3px 8px #00000014,0 1px 3px #0000000a}.acp-kpi-card.acp-kpi-card--outlined .acp-kpi-card__card{background:transparent;color:var(--acp-kpi-card-fg);border:2px solid rgba(var(--acp-kpi-card-fg),.2)}.acp-kpi-card.acp-kpi-card--filled .acp-kpi-card__card{background:var(--acp-kpi-card-bg);color:var(--acp-kpi-card-fg)}.acp-kpi-card.acp-kpi-card--tonal .acp-kpi-card__card{background:color-mix(in srgb,var(--acp-kpi-card-bg) 12%,transparent);color:var(--acp-kpi-card-fg);border:1px solid rgba(var(--acp-kpi-card-fg),.08)}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card{cursor:pointer}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card:hover{box-shadow:0 6px 12px #0000001a,0 2px 4px #0000000f;transform:translateY(-1px)}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card:active{transform:translateY(0);box-shadow:0 2px 4px #00000014}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card:focus-visible{outline:2px solid currentColor;outline-offset:2px}.acp-kpi-card.acp-kpi-card--disabled .acp-kpi-card__card{opacity:.6;cursor:not-allowed;pointer-events:none}.acp-kpi-card.acp-kpi-card--selected .acp-kpi-card__card{border:2px solid var(--acp-kpi-card-fg)}.acp-kpi-card.acp-kpi-card--loading .acp-kpi-card__card{pointer-events:none;opacity:.8}@media(max-width:768px){.acp-kpi-card__header,.acp-kpi-card__content{padding:12px}.acp-kpi-card__value{font-size:24px}.acp-kpi-card__title{font-size:13px}}@media(prefers-reduced-motion:reduce){.acp-kpi-card__card{transition:none}.acp-kpi-card__skeleton-header,.acp-kpi-card__skeleton-value,.acp-kpi-card__skeleton-text{animation:none}}@media(prefers-contrast:more){.acp-kpi-card__card{border-width:2px}}@media(max-width:768px){.acp-kpi-card__header,.acp-kpi-card__content{padding:12px;gap:8px}.acp-kpi-card__footer{padding:12px}.acp-kpi-card__icon{font-size:20px;width:20px;height:20px}.acp-kpi-card__avatar,.acp-kpi-card__avatar-image,.acp-kpi-card__avatar-initials{width:32px;height:32px;font-size:12px}.acp-kpi-card__title{font-size:13px}.acp-kpi-card__subtitle{font-size:11px}.acp-kpi-card__value{font-size:24px}}.acp-kpi-card__card.acp-kpi-card--xs{min-height:96px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__content{padding:8px;gap:6px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__footer{padding:8px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__icon{font-size:16px;width:16px;height:16px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__avatar-initials{width:28px;height:28px;font-size:11px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__title{font-size:12px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__subtitle{font-size:10px;margin-top:1px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__value{font-size:18px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__percentage{font-size:10px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__description{font-size:11px}.acp-kpi-card__card.acp-kpi-card--sm{min-height:128px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__content{padding:12px;gap:8px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__footer{padding:12px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__icon{font-size:20px;width:20px;height:20px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__avatar-initials{width:32px;height:32px;font-size:12px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__title{font-size:13px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__subtitle{font-size:11px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__value{font-size:22px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__percentage{font-size:11px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__description{font-size:12px}.acp-kpi-card__card.acp-kpi-card--md{min-height:160px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__content{padding:16px;gap:12px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__footer{padding:16px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__icon{font-size:24px;width:24px;height:24px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__avatar-initials{width:40px;height:40px;font-size:14px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__title{font-size:14px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__subtitle{font-size:12px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__value{font-size:28px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__percentage{font-size:12px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__description{font-size:13px}.acp-kpi-card__card.acp-kpi-card--lg{min-height:224px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__content{padding:20px;gap:16px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__footer{padding:20px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__icon{font-size:32px;width:32px;height:32px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__avatar-initials{width:48px;height:48px;font-size:16px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__title{font-size:16px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__subtitle{font-size:13px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__value{font-size:36px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__percentage,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__description{font-size:14px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8264
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpKpiCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8265
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpKpiCard, isStandalone: true, selector: "acp-kpi-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, avatarInitials: { classPropertyName: "avatarInitials", publicName: "avatarInitials", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, percentage: { classPropertyName: "percentage", publicName: "percentage", isSignal: true, isRequired: false, transformFunction: null }, percentageFormat: { classPropertyName: "percentageFormat", publicName: "percentageFormat", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, progressColor: { classPropertyName: "progressColor", publicName: "progressColor", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", actionClicked: "actionClicked" }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ["icon"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "avatarTemplate", first: true, predicate: ["avatar"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actions"], descendants: true, read: TemplateRef, isSignal: true }], exportAs: ["acpKpiCard"], ngImport: i0, template: "<mat-card\n class=\"acp-kpi-card__card\"\n [routerLink]=\"routerLink()\"\n [attr.aria-label]=\"ariaLabel()\"\n [matTooltip]=\"tooltip()\"\n [matTooltipDisabled]=\"!tooltip()\"\n (click)=\"onCardClick()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n>\n <!-- Loading Skeleton -->\n @if (loading()) {\n <div class=\"acp-kpi-card__skeleton\">\n <div class=\"acp-kpi-card__skeleton-header\"></div>\n <div class=\"acp-kpi-card__skeleton-value\"></div>\n <div class=\"acp-kpi-card__skeleton-text\"></div>\n </div>\n } @else {\n <!-- Header -->\n @if (hasHeader()) {\n <mat-card-header class=\"acp-kpi-card__header\">\n <div class=\"acp-kpi-card__header-content\">\n <!-- Icon or Avatar -->\n <div class=\"acp-kpi-card__icon-container\">\n @if (iconTemplate()) {\n <ng-container [ngTemplateOutlet]=\"iconTemplate()!\"></ng-container>\n } @else if (svgIcon()) {\n <mat-icon class=\"acp-kpi-card__icon\" [svgIcon]=\"svgIcon()!\" aria-hidden=\"true\"></mat-icon>\n } @else if (effectiveIcon()) {\n <mat-icon class=\"acp-kpi-card__icon\" aria-hidden=\"true\">{{ effectiveIcon() }}</mat-icon>\n } @else if (avatarTemplate()) {\n <div class=\"acp-kpi-card__avatar\">\n <ng-container [ngTemplateOutlet]=\"avatarTemplate()!\"></ng-container>\n </div>\n } @else if (avatar()) {\n <img class=\"acp-kpi-card__avatar-image\" [src]=\"avatar()\" [alt]=\"title() || 'Avatar'\" />\n } @else if (avatarInitials()) {\n <div class=\"acp-kpi-card__avatar-initials\">{{ avatarInitials() }}</div>\n }\n </div>\n\n <!-- Title & Subtitle -->\n <div class=\"acp-kpi-card__title-container\">\n @if (title()) {\n <h3 class=\"acp-kpi-card__title\">{{ title() }}</h3>\n } @if (subtitle()) {\n <p class=\"acp-kpi-card__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n </div>\n\n <!-- Menu Button (optional) - Only show if actions template exists -->\n @if (hasActions()) {\n <button\n mat-icon-button\n [matMenuTriggerFor]=\"menu\"\n class=\"acp-kpi-card__menu-button\"\n aria-label=\"More options\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\" class=\"acp-kpi-card__menu\">\n <ng-container [ngTemplateOutlet]=\"actionsTemplate()!\"></ng-container>\n </mat-menu>\n }\n </mat-card-header>\n }\n\n <!-- Content -->\n <mat-card-content class=\"acp-kpi-card__content\">\n <!-- Main Value -->\n @if (value()) {\n <div class=\"acp-kpi-card__value-section\">\n <div class=\"acp-kpi-card__value\">{{ value() }}</div>\n\n <!-- Percentage & Trend -->\n @if (percentage() !== undefined) {\n <div class=\"acp-kpi-card__metric\">\n @if (isTrending()) {\n <mat-icon class=\"acp-kpi-card__trend-icon\" [attr.aria-label]=\"trendConfig().ariaLabel\">\n {{ trendConfig().icon }}\n </mat-icon>\n }\n <span class=\"acp-kpi-card__percentage\">\n {{ percentageFormat() === 'percent' ? (percentage() + '%') : percentage() }}\n </span>\n </div>\n }\n </div>\n }\n\n <!-- Description -->\n @if (description()) {\n <p class=\"acp-kpi-card__description\">{{ description() }}</p>\n }\n\n <!-- Progress Bar -->\n @if (progress() !== undefined) {\n <mat-progress-bar\n class=\"acp-kpi-card__progress\"\n mode=\"determinate\"\n [value]=\"progress()\"\n [color]=\"progressColor()\"\n ></mat-progress-bar>\n }\n </mat-card-content>\n\n <!-- Footer -->\n @if (hasFooter()) {\n <mat-divider></mat-divider>\n <div class=\"acp-kpi-card__footer\">\n @if (footerTemplate()) {\n <ng-container [ngTemplateOutlet]=\"footerTemplate()!\"></ng-container>\n } @else if (footer()) {\n <p class=\"acp-kpi-card__footer-text\">{{ footer() }}</p>\n }\n </div>\n } }\n</mat-card>\n", styles: [".acp-kpi-card{--acp-kpi-card-bg: var(--acp-kpi-card-primary-bg, var(--mat-sys-primary));--acp-kpi-card-fg: var(--acp-kpi-card-primary-color, var(--mat-sys-on-primary));display:flex;vertical-align:middle;width:100%;max-width:100%}.acp-kpi-card__card{width:100%;display:flex;flex-direction:column;border-radius:12px;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;background-color:#fff}.acp-kpi-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px;gap:12px}.acp-kpi-card__header-content{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.acp-kpi-card__icon-container{display:flex;align-items:center;justify-content:center;flex-shrink:0}.acp-kpi-card__icon{font-size:24px;width:24px;height:24px;color:var(--acp-kpi-card-fg)}.acp-kpi-card__avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--acp-kpi-card-bg) 30%,transparent);color:var(--acp-kpi-card-fg);font-weight:500;font-size:14px;flex-shrink:0}.acp-kpi-card__avatar-image{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}.acp-kpi-card__avatar-initials{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--acp-kpi-card-bg) 30%,transparent);color:var(--acp-kpi-card-fg);font-weight:500;font-size:14px;flex-shrink:0}.acp-kpi-card__title-container{flex:1;min-width:0}.acp-kpi-card__title{margin:0;font-size:14px;font-weight:500;letter-spacing:.25px;color:var(--acp-kpi-card-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acp-kpi-card__subtitle{margin:2px 0 0;font-size:12px;font-weight:400;letter-spacing:.4px;color:rgba(var(--acp-kpi-card-fg),.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acp-kpi-card__menu-button{flex-shrink:0;opacity:.7;transition:opacity .2s ease-in-out}.acp-kpi-card__menu-button:hover{opacity:1}.acp-kpi-card__menu-button:focus-visible{outline:2px solid currentColor;outline-offset:2px}.acp-kpi-card__menu{will-change:transform}.acp-kpi-card__content{flex:1;padding:16px;display:flex;flex-direction:column;gap:12px}.acp-kpi-card__value-section{display:flex;align-items:baseline;gap:8px}.acp-kpi-card__value{font-size:28px;font-weight:600;letter-spacing:-.5px;color:var(--acp-kpi-card-fg);line-height:1.2}.acp-kpi-card__metric{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:500;letter-spacing:.25px;color:rgba(var(--acp-kpi-card-fg),.8)}.acp-kpi-card__trend-icon{font-size:16px;width:16px;height:16px}.acp-kpi-card__percentage{white-space:nowrap}.acp-kpi-card.acp-kpi-card--success .acp-kpi-card__metric{color:var(--acp-kpi-card-success-color, light-dark(#ffffff, #013a00))}.acp-kpi-card.acp-kpi-card--success-light .acp-kpi-card__metric{color:var(--acp-kpi-card-success-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--warning .acp-kpi-card__metric{color:var(--acp-kpi-card-warning-color, light-dark(#ffffff, #502400))}.acp-kpi-card.acp-kpi-card--warning-light .acp-kpi-card__metric{color:var(--acp-kpi-card-warning-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--error .acp-kpi-card__metric{color:var(--acp-kpi-card-error-color, var(--mat-sys-on-error))}.acp-kpi-card.acp-kpi-card--error-light .acp-kpi-card__metric{color:var(--acp-kpi-card-error-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--info .acp-kpi-card__metric{color:var(--acp-kpi-card-info-color, light-dark(#ffffff, #002f65))}.acp-kpi-card.acp-kpi-card--info-light .acp-kpi-card__metric{color:var(--acp-kpi-card-info-light-color, var(--mat-sys-on-surface))}.acp-kpi-card__description{margin:0;font-size:12px;font-weight:400;letter-spacing:.4px;color:rgba(var(--acp-kpi-card-fg),.6);line-height:1.5}.acp-kpi-card__progress{height:4px;border-radius:2px;background-color:rgba(var(--acp-kpi-card-fg),.12)}.acp-kpi-card__footer{padding:12px 16px;font-size:12px;font-weight:400;letter-spacing:.4px;color:rgba(var(--acp-kpi-card-fg),.6)}.acp-kpi-card__footer-text{margin:0}.acp-kpi-card__skeleton{padding:16px;display:flex;flex-direction:column;gap:12px}.acp-kpi-card__skeleton-header{width:60%;height:16px;background:linear-gradient(90deg,#0000001a 25%,#0000000d,#0000001a 75%);background-size:200% 100%;animation:loading 1.5s infinite;border-radius:4px}.acp-kpi-card__skeleton-value{width:40%;height:28px;background:linear-gradient(90deg,#0000001a 25%,#0000000d,#0000001a 75%);background-size:200% 100%;animation:loading 1.5s infinite;border-radius:4px}.acp-kpi-card__skeleton-text{width:80%;height:12px;background:linear-gradient(90deg,#0000001a 25%,#0000000d,#0000001a 75%);background-size:200% 100%;animation:loading 1.5s infinite;border-radius:4px}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.acp-kpi-card.acp-kpi-card--primary{--acp-kpi-card-bg: var(--acp-kpi-card-primary-bg, var(--mat-sys-primary));--acp-kpi-card-fg: var(--acp-kpi-card-primary-color, var(--mat-sys-on-primary))}.acp-kpi-card.acp-kpi-card--secondary{--acp-kpi-card-bg: var(--acp-kpi-card-secondary-bg, var(--mat-sys-secondary));--acp-kpi-card-fg: var(--acp-kpi-card-secondary-color, var(--mat-sys-on-secondary))}.acp-kpi-card.acp-kpi-card--success{--acp-kpi-card-bg: var(--acp-kpi-card-success-bg, light-dark(#038b00, #03c700));--acp-kpi-card-fg: var(--acp-kpi-card-success-color, light-dark(#ffffff, #013a00))}.acp-kpi-card.acp-kpi-card--success-light{--acp-kpi-card-bg: var(--acp-kpi-card-success-light-bg, light-dark(#cbffb8, #014600));--acp-kpi-card-fg: var(--acp-kpi-card-success-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--warning{--acp-kpi-card-bg: var(--acp-kpi-card-warning-bg, light-dark(#e37100, #ffb787));--acp-kpi-card-fg: var(--acp-kpi-card-warning-color, light-dark(#ffffff, #502400))}.acp-kpi-card.acp-kpi-card--warning-light{--acp-kpi-card-bg: var(--acp-kpi-card-warning-light-bg, light-dark(#ffede4, #612d00));--acp-kpi-card-fg: var(--acp-kpi-card-warning-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--error{--acp-kpi-card-bg: var(--acp-kpi-card-error-bg, var(--mat-sys-error));--acp-kpi-card-fg: var(--acp-kpi-card-error-color, var(--mat-sys-on-error))}.acp-kpi-card.acp-kpi-card--error-light{--acp-kpi-card-bg: var(--acp-kpi-card-error-light-bg, light-dark(#ffedea, #7e0100));--acp-kpi-card-fg: var(--acp-kpi-card-error-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--info{--acp-kpi-card-bg: var(--acp-kpi-card-info-bg, light-dark(#0074e9, #7cabff));--acp-kpi-card-fg: var(--acp-kpi-card-info-color, light-dark(#ffffff, #002f65))}.acp-kpi-card.acp-kpi-card--info-light{--acp-kpi-card-bg: var(--acp-kpi-card-info-light-bg, light-dark(#ecf0ff, #003a7a));--acp-kpi-card-fg: var(--acp-kpi-card-info-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--neutral{--acp-kpi-card-bg: var(--acp-kpi-card-neutral-bg, var(--mat-sys-surface-variant));--acp-kpi-card-fg: var(--acp-kpi-card-neutral-color, var(--mat-sys-on-surface-variant))}.acp-kpi-card.acp-kpi-card--white{--acp-kpi-card-bg: #ffffff;--acp-kpi-card-fg: #1f2937}.acp-kpi-card.acp-kpi-card--custom{--acp-kpi-card-bg: var( --acp-kpi-card-custom-bg, var(--acp-kpi-card-custom-bg, var(--mat-sys-surface-container)) );--acp-kpi-card-fg: var( --acp-kpi-card-custom-fg, var(--acp-kpi-card-custom-color, var(--mat-sys-on-surface)) )}.acp-kpi-card.acp-kpi-card--default .acp-kpi-card__card{background:var(--acp-kpi-card-bg);color:var(--acp-kpi-card-fg);border:1px solid rgba(var(--acp-kpi-card-fg),.12)}.acp-kpi-card.acp-kpi-card--elevated .acp-kpi-card__card{background:var(--acp-kpi-card-bg);color:var(--acp-kpi-card-fg);box-shadow:0 3px 8px #00000014,0 1px 3px #0000000a}.acp-kpi-card.acp-kpi-card--outlined .acp-kpi-card__card{background:transparent;color:var(--acp-kpi-card-fg);border:2px solid rgba(var(--acp-kpi-card-fg),.2)}.acp-kpi-card.acp-kpi-card--filled .acp-kpi-card__card{background:var(--acp-kpi-card-bg);color:var(--acp-kpi-card-fg)}.acp-kpi-card.acp-kpi-card--tonal .acp-kpi-card__card{background:color-mix(in srgb,var(--acp-kpi-card-bg) 12%,transparent);color:var(--acp-kpi-card-fg);border:1px solid rgba(var(--acp-kpi-card-fg),.08)}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card{cursor:pointer}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card:hover{box-shadow:0 6px 12px #0000001a,0 2px 4px #0000000f;transform:translateY(-1px)}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card:active{transform:translateY(0);box-shadow:0 2px 4px #00000014}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card:focus-visible{outline:2px solid currentColor;outline-offset:2px}.acp-kpi-card.acp-kpi-card--disabled .acp-kpi-card__card{opacity:.6;cursor:not-allowed;pointer-events:none}.acp-kpi-card.acp-kpi-card--selected .acp-kpi-card__card{border:2px solid var(--acp-kpi-card-fg)}.acp-kpi-card.acp-kpi-card--loading .acp-kpi-card__card{pointer-events:none;opacity:.8}@media(max-width:768px){.acp-kpi-card__header,.acp-kpi-card__content{padding:12px}.acp-kpi-card__value{font-size:24px}.acp-kpi-card__title{font-size:13px}}@media(prefers-reduced-motion:reduce){.acp-kpi-card__card{transition:none}.acp-kpi-card__skeleton-header,.acp-kpi-card__skeleton-value,.acp-kpi-card__skeleton-text{animation:none}}@media(prefers-contrast:more){.acp-kpi-card__card{border-width:2px}}@media(max-width:768px){.acp-kpi-card__header,.acp-kpi-card__content{padding:12px;gap:8px}.acp-kpi-card__footer{padding:12px}.acp-kpi-card__icon{font-size:20px;width:20px;height:20px}.acp-kpi-card__avatar,.acp-kpi-card__avatar-image,.acp-kpi-card__avatar-initials{width:32px;height:32px;font-size:12px}.acp-kpi-card__title{font-size:13px}.acp-kpi-card__subtitle{font-size:11px}.acp-kpi-card__value{font-size:24px}}.acp-kpi-card__card.acp-kpi-card--xs{min-height:96px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__content{padding:8px;gap:6px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__footer{padding:8px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__icon{font-size:16px;width:16px;height:16px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__avatar-initials{width:28px;height:28px;font-size:11px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__title{font-size:12px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__subtitle{font-size:10px;margin-top:1px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__value{font-size:18px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__percentage{font-size:10px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__description{font-size:11px}.acp-kpi-card__card.acp-kpi-card--sm{min-height:128px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__content{padding:12px;gap:8px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__footer{padding:12px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__icon{font-size:20px;width:20px;height:20px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__avatar-initials{width:32px;height:32px;font-size:12px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__title{font-size:13px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__subtitle{font-size:11px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__value{font-size:22px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__percentage{font-size:11px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__description{font-size:12px}.acp-kpi-card__card.acp-kpi-card--md{min-height:160px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__content{padding:16px;gap:12px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__footer{padding:16px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__icon{font-size:24px;width:24px;height:24px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__avatar-initials{width:40px;height:40px;font-size:14px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__title{font-size:14px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__subtitle{font-size:12px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__value{font-size:28px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__percentage{font-size:12px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__description{font-size:13px}.acp-kpi-card__card.acp-kpi-card--lg{min-height:224px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__content{padding:20px;gap:16px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__footer{padding:20px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__icon{font-size:32px;width:32px;height:32px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__avatar-initials{width:48px;height:48px;font-size:16px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__title{font-size:16px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__subtitle{font-size:13px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__value{font-size:36px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__percentage,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__description{font-size:14px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8268
8266
|
}
|
|
8269
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
8267
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpKpiCard, decorators: [{
|
|
8270
8268
|
type: Component,
|
|
8271
8269
|
args: [{ selector: 'acp-kpi-card', exportAs: 'acpKpiCard', standalone: true, imports: [
|
|
8272
8270
|
NgTemplateOutlet,
|
|
@@ -8342,8 +8340,8 @@ class ToUpperCase {
|
|
|
8342
8340
|
registerOnTouched(fn) {
|
|
8343
8341
|
this.onTouched = fn;
|
|
8344
8342
|
}
|
|
8345
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
8346
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0
|
|
8343
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ToUpperCase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
8344
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: ToUpperCase, isStandalone: true, selector: "[acpToUpperCase]", host: { listeners: { "input": "onInput()" } }, providers: [
|
|
8347
8345
|
{
|
|
8348
8346
|
provide: NG_VALUE_ACCESSOR,
|
|
8349
8347
|
useExisting: ToUpperCase,
|
|
@@ -8351,7 +8349,7 @@ class ToUpperCase {
|
|
|
8351
8349
|
},
|
|
8352
8350
|
], ngImport: i0 });
|
|
8353
8351
|
}
|
|
8354
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
8352
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ToUpperCase, decorators: [{
|
|
8355
8353
|
type: Directive,
|
|
8356
8354
|
args: [{
|
|
8357
8355
|
selector: '[acpToUpperCase]',
|
|
@@ -8425,10 +8423,10 @@ class GetTotalPipe {
|
|
|
8425
8423
|
.reduce((acc, value) => (value ? acc + Number(value) : acc), 0);
|
|
8426
8424
|
return total?.toFixed(2);
|
|
8427
8425
|
}
|
|
8428
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
8429
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0
|
|
8426
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: GetTotalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
8427
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: GetTotalPipe, isStandalone: true, name: "getTotal" });
|
|
8430
8428
|
}
|
|
8431
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
8429
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: GetTotalPipe, decorators: [{
|
|
8432
8430
|
type: Pipe,
|
|
8433
8431
|
args: [{
|
|
8434
8432
|
name: 'getTotal',
|
|
@@ -8492,10 +8490,10 @@ class StatusDisplayPipe {
|
|
|
8492
8490
|
// This prevents CSS injection through class names
|
|
8493
8491
|
return className.replace(/[^a-zA-Z0-9_-\s]/g, '');
|
|
8494
8492
|
}
|
|
8495
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0
|
|
8496
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0
|
|
8493
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StatusDisplayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
8494
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: StatusDisplayPipe, isStandalone: true, name: "statusDisplay" });
|
|
8497
8495
|
}
|
|
8498
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0
|
|
8496
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StatusDisplayPipe, decorators: [{
|
|
8499
8497
|
type: Pipe,
|
|
8500
8498
|
args: [{
|
|
8501
8499
|
name: 'statusDisplay',
|