@ascentgl/ads-ui 20.27.1 → 20.29.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ascentgl-ads-ui.mjs +415 -41
- package/fesm2022/ascentgl-ads-ui.mjs.map +1 -1
- package/index.d.ts +126 -18
- package/package.json +5 -5
|
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { Input, Component, NgModule, input, output, computed, ChangeDetectionStrategy, EventEmitter, signal, effect, ViewChild, Output, ElementRef, HostListener, Directive, inject, DestroyRef, Pipe, contentChild, TemplateRef, Inject, Optional, ChangeDetectorRef, Injectable, Renderer2, viewChild, ViewChildren } from '@angular/core';
|
|
3
3
|
import * as i1 from '@ascentgl/ads-icons';
|
|
4
4
|
import { AdsIconModule, AdsIconRegistry } from '@ascentgl/ads-icons';
|
|
5
|
-
import { adsIconUserCircle, adsIconBell, adsIconChevronRight, adsIconCross, adsIconPlus, adsIconWarning, adsIconLock, adsIconPlusCircle, adsIconSearch, adsIconSortDescending, adsIconCheckCircleFilled, adsIconVisibilityEye, adsIconVisibilityEyeNone, adsIconStatusProcessing, adsIconInformation, adsIconChevronDown, adsIconLoading, adsIconDatepicker, adsIconTimepicker, adsIconCheck, adsIconChevronUp, adsIconMenuMoreInfo, adsIconHamburgerMenu } from '@ascentgl/ads-icons/icons';
|
|
5
|
+
import { adsIconUserCircle, adsIconBell, adsIconChevronRight, adsIconCross, adsIconPlus, adsIconWarning, adsIconLock, adsIconPlusCircle, adsIconSearch, adsIconSortDescending, adsIconCheckCircleFilled, adsIconVisibilityEye, adsIconVisibilityEyeNone, adsIconStatusProcessing, adsIconInformation, adsIconChevronDown, adsIconLoading, adsIconDatepicker, adsIconTimepicker, adsIconCheck, adsIconChevronUp, adsIconFilter, adsIconArrowUpAndDown, adsIconMenuMoreInfo, adsIconHamburgerMenu } from '@ascentgl/ads-icons/icons';
|
|
6
6
|
import * as i1$1 from '@angular/common';
|
|
7
7
|
import { CommonModule, NgOptimizedImage, NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
|
|
8
8
|
import * as i2 from '@angular/material/badge';
|
|
@@ -15,10 +15,10 @@ import * as i4 from '@angular/forms';
|
|
|
15
15
|
import { FormControl, Validators, ReactiveFormsModule, TouchedChangeEvent } from '@angular/forms';
|
|
16
16
|
import * as i4$1 from '@angular/cdk/overlay';
|
|
17
17
|
import { OverlayModule, OverlayContainer } from '@angular/cdk/overlay';
|
|
18
|
-
import { Subject, asapScheduler, timer, of, Subscription, combineLatest } from 'rxjs';
|
|
18
|
+
import { Subject, asapScheduler, timer, of, takeUntil as takeUntil$1, Subscription, combineLatest } from 'rxjs';
|
|
19
19
|
import { takeUntil, filter, map, tap, debounce } from 'rxjs/operators';
|
|
20
20
|
import * as i3 from '@angular/platform-browser';
|
|
21
|
-
import * as i3$
|
|
21
|
+
import * as i3$6 from '@ascentgl/ads-utils';
|
|
22
22
|
import { DomHelper, AdsGestureModule, ObjectHelper, AdsGestureDirection, ADS_GESTURE_DEFAULT_OPTIONS } from '@ascentgl/ads-utils';
|
|
23
23
|
import * as i2$1 from '@angular/material/progress-spinner';
|
|
24
24
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
@@ -54,18 +54,18 @@ import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/materia
|
|
|
54
54
|
import * as i6$1 from '@angular/material/expansion';
|
|
55
55
|
import { MatExpansionPanel, MatExpansionPanelTitle, MatExpansionPanelHeader, MatExpansionPanelDescription, MatAccordion } from '@angular/material/expansion';
|
|
56
56
|
import { ModuleRegistry, AllCommunityModule, provideGlobalGridOptions, themeQuartz } from 'ag-grid-community';
|
|
57
|
-
import * as i2$3 from 'ag-grid-angular';
|
|
58
|
-
import { AgGridAngular } from 'ag-grid-angular';
|
|
59
57
|
import * as i4$3 from '@angular/material/menu';
|
|
60
|
-
import {
|
|
61
|
-
import * as i3$4 from 'angular
|
|
58
|
+
import { MatMenuTrigger, MatMenuModule, MatMenu, MatMenuItem } from '@angular/material/menu';
|
|
59
|
+
import * as i3$4 from 'ag-grid-angular';
|
|
60
|
+
import { AgGridAngular } from 'ag-grid-angular';
|
|
61
|
+
import * as i3$5 from 'angular-split';
|
|
62
62
|
import { SplitComponent, SplitAreaComponent } from 'angular-split';
|
|
63
63
|
import * as i11$1 from '@angular/material/toolbar';
|
|
64
64
|
import { MatToolbar } from '@angular/material/toolbar';
|
|
65
65
|
import * as i1$5 from '@angular/material/bottom-sheet';
|
|
66
66
|
import { MAT_BOTTOM_SHEET_DATA, MatBottomSheetModule } from '@angular/material/bottom-sheet';
|
|
67
67
|
import { MatListModule } from '@angular/material/list';
|
|
68
|
-
import * as i2$
|
|
68
|
+
import * as i2$3 from '@angular/material/tabs';
|
|
69
69
|
import { MatTabNav, MatTabLink, MatTabNavPanel, MatTabGroup, MatTab, MatTabLabel } from '@angular/material/tabs';
|
|
70
70
|
import * as i1$6 from '@angular/common/http';
|
|
71
71
|
|
|
@@ -302,14 +302,16 @@ class AdsButtonComponent {
|
|
|
302
302
|
this.size = input('base', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
303
303
|
/** Sets the "type" attribute on the button */
|
|
304
304
|
this.type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
305
|
+
/** Makes the button take 100% width of its container */
|
|
306
|
+
this.fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
305
307
|
}
|
|
306
308
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
307
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: AdsButtonComponent, isStandalone: false, selector: "ads-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button mat-flat-button [id]=\"id()\" [ngClass]=\"[variant(), size()]\" [disabled]=\"disabled()\" [disableRipple]=\"true\">\n <ng-content></ng-content>\n</button>\n", styles: ["button{--mat-button-filled-container-color: var(--color-primary);--mat-button-filled-label-text-color: var(--color-white);--mat-button-filled-label-text-weight: 600;--mat-button-filled-container-height: var(--mat-form-field-container-height);--mat-button-filled-label-text-tracking: \"1.5px\";--mat-button-filled-label-text-size: 16px;--mat-button-filled-horizontal-padding: 24px;--mat-button-filled-disabled-container-color: var(--color-dark-10);--mat-button-filled-disabled-label-text-color: var(--color-white);--mat-filled-button-hover-state-layer-opacity: 0;border:1.5px solid;min-width:unset!important}button:disabled{border-color:var(--color-dark-10)}::ng-deep .mat-mdc-button-persistent-ripple:before{opacity:0!important}.primary:not(:disabled){border-color:var(--color-primary)}.primary:not(:disabled):hover{border-color:var(--color-primary-hover);--mat-button-filled-container-color: var(--color-primary-hover);--mat-button-filled-label-text-color: var(--color-white)}.primary:not(:disabled):active,.primary:not(:disabled):focus{border-color:var(--color-primary-pressed);--mat-button-filled-container-color: var(--color-primary-pressed);--mat-button-filled-label-text-color: var(--color-white)}.primary:disabled{--mat-button-filled-disabled-container-color: var(--color-muted-50);--mat-button-filled-disabled-label-text-color: var(--color-dark-10)}.secondary:not(:disabled){border-color:var(--color-primary);--mat-button-filled-container-color: var(--color-white);--mat-button-filled-label-text-color: var(--color-primary)}.secondary:not(:disabled):hover{border-color:var(--color-primary-hover);--mat-button-filled-container-color: var(--color-primary-hover);--mat-button-filled-label-text-color: var(--color-white)}.secondary:not(:disabled):active,.secondary:not(:disabled):focus{border-color:var(--color-primary-pressed);--mat-button-filled-container-color: var(--color-primary-pressed);--mat-button-filled-label-text-color: var(--color-white)}.secondary:disabled{--mat-button-filled-disabled-container-color: var(--color-muted-50);--mat-button-filled-disabled-label-text-color: var(--color-dark-10)}.error:not(:disabled){border-color:var(--color-error);--mat-button-filled-container-color: var(--color-white);--mat-button-filled-label-text-color: var(--color-error)}.error:not(:disabled):hover{border-color:var(--color-error-hover);--mat-button-filled-container-color: var(--color-error-hover);--mat-button-filled-label-text-color: var(--color-white)}.error:not(:disabled):active,.error:not(:disabled):focus{border-color:var(--color-error-pressed);--mat-button-filled-label-text-color: var(--color-white);--mat-button-filled-container-color: var(--color-error-pressed)}.error:disabled{--mat-button-filled-disabled-container-color: var(--color-white);--mat-button-filled-disabled-label-text-color: var(--color-dark-10)}.tertiary:not(:disabled){border-color:var(--color-light);--mat-button-filled-container-color: var(--color-light-30);--mat-button-filled-label-text-color: var(--color-dark)}.tertiary:not(:disabled):hover{border-color:var(--color-light);--mat-button-filled-container-color: var(--color-light-80);--mat-button-filled-label-text-color: var(--color-dark)}.tertiary:not(:disabled):active,.tertiary:not(:disabled):focus{border-color:var(--color-light);--mat-button-filled-label-text-color: var(--color-dark);--mat-button-filled-container-color: var(--color-light)}.tertiary:disabled{border-color:var(--color-light);--mat-button-filled-disabled-container-color: var(--color-muted-50);--mat-button-filled-disabled-label-text-color: var(--color-medium-50)}.sm{--mat-button-filled-container-height: 32px;--mat-button-filled-horizontal-padding: 7px;--mat-button-filled-label-text-size: 14px}.xs{--mat-button-filled-container-height: 24px;--mat-button-filled-horizontal-padding: 7px;--mat-button-filled-label-text-size: 12px}:host::ng-deep .mdc-button__label{white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i7.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"] }] }); }
|
|
309
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: AdsButtonComponent, isStandalone: false, selector: "ads-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button mat-flat-button [class.full-width]=\"fullWidth()\" [id]=\"id()\" [ngClass]=\"[variant(), size()]\" [disabled]=\"disabled()\" [disableRipple]=\"true\">\n <ng-content></ng-content>\n</button>\n", styles: ["button{--mat-button-filled-container-color: var(--color-primary);--mat-button-filled-label-text-color: var(--color-white);--mat-button-filled-label-text-weight: 600;--mat-button-filled-container-height: var(--mat-form-field-container-height);--mat-button-filled-label-text-tracking: \"1.5px\";--mat-button-filled-label-text-size: 16px;--mat-button-filled-horizontal-padding: 24px;--mat-button-filled-disabled-container-color: var(--color-dark-10);--mat-button-filled-disabled-label-text-color: var(--color-white);--mat-filled-button-hover-state-layer-opacity: 0;border:1.5px solid;min-width:unset!important}button:disabled{border-color:var(--color-dark-10)}::ng-deep .mat-mdc-button-persistent-ripple:before{opacity:0!important}.primary:not(:disabled){border-color:var(--color-primary)}.primary:not(:disabled):hover{border-color:var(--color-primary-hover);--mat-button-filled-container-color: var(--color-primary-hover);--mat-button-filled-label-text-color: var(--color-white)}.primary:not(:disabled):active,.primary:not(:disabled):focus{border-color:var(--color-primary-pressed);--mat-button-filled-container-color: var(--color-primary-pressed);--mat-button-filled-label-text-color: var(--color-white)}.primary:disabled{--mat-button-filled-disabled-container-color: var(--color-muted-50);--mat-button-filled-disabled-label-text-color: var(--color-dark-10)}.secondary:not(:disabled){border-color:var(--color-primary);--mat-button-filled-container-color: var(--color-white);--mat-button-filled-label-text-color: var(--color-primary)}.secondary:not(:disabled):hover{border-color:var(--color-primary-hover);--mat-button-filled-container-color: var(--color-primary-hover);--mat-button-filled-label-text-color: var(--color-white)}.secondary:not(:disabled):active,.secondary:not(:disabled):focus{border-color:var(--color-primary-pressed);--mat-button-filled-container-color: var(--color-primary-pressed);--mat-button-filled-label-text-color: var(--color-white)}.secondary:disabled{--mat-button-filled-disabled-container-color: var(--color-muted-50);--mat-button-filled-disabled-label-text-color: var(--color-dark-10)}.error:not(:disabled){border-color:var(--color-error);--mat-button-filled-container-color: var(--color-white);--mat-button-filled-label-text-color: var(--color-error)}.error:not(:disabled):hover{border-color:var(--color-error-hover);--mat-button-filled-container-color: var(--color-error-hover);--mat-button-filled-label-text-color: var(--color-white)}.error:not(:disabled):active,.error:not(:disabled):focus{border-color:var(--color-error-pressed);--mat-button-filled-label-text-color: var(--color-white);--mat-button-filled-container-color: var(--color-error-pressed)}.error:disabled{--mat-button-filled-disabled-container-color: var(--color-white);--mat-button-filled-disabled-label-text-color: var(--color-dark-10)}.tertiary:not(:disabled){border-color:var(--color-light);--mat-button-filled-container-color: var(--color-light-30);--mat-button-filled-label-text-color: var(--color-dark)}.tertiary:not(:disabled):hover{border-color:var(--color-light);--mat-button-filled-container-color: var(--color-light-80);--mat-button-filled-label-text-color: var(--color-dark)}.tertiary:not(:disabled):active,.tertiary:not(:disabled):focus{border-color:var(--color-light);--mat-button-filled-label-text-color: var(--color-dark);--mat-button-filled-container-color: var(--color-light)}.tertiary:disabled{border-color:var(--color-light);--mat-button-filled-disabled-container-color: var(--color-muted-50);--mat-button-filled-disabled-label-text-color: var(--color-medium-50)}.sm{--mat-button-filled-container-height: 32px;--mat-button-filled-horizontal-padding: 7px;--mat-button-filled-label-text-size: 14px}.xs{--mat-button-filled-container-height: 24px;--mat-button-filled-horizontal-padding: 7px;--mat-button-filled-label-text-size: 12px}:host::ng-deep .mdc-button__label{white-space:nowrap}.full-width{width:100%!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i7.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"] }] }); }
|
|
308
310
|
}
|
|
309
311
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsButtonComponent, decorators: [{
|
|
310
312
|
type: Component,
|
|
311
|
-
args: [{ selector: 'ads-button', standalone: false, template: "<button mat-flat-button [id]=\"id()\" [ngClass]=\"[variant(), size()]\" [disabled]=\"disabled()\" [disableRipple]=\"true\">\n <ng-content></ng-content>\n</button>\n", styles: ["button{--mat-button-filled-container-color: var(--color-primary);--mat-button-filled-label-text-color: var(--color-white);--mat-button-filled-label-text-weight: 600;--mat-button-filled-container-height: var(--mat-form-field-container-height);--mat-button-filled-label-text-tracking: \"1.5px\";--mat-button-filled-label-text-size: 16px;--mat-button-filled-horizontal-padding: 24px;--mat-button-filled-disabled-container-color: var(--color-dark-10);--mat-button-filled-disabled-label-text-color: var(--color-white);--mat-filled-button-hover-state-layer-opacity: 0;border:1.5px solid;min-width:unset!important}button:disabled{border-color:var(--color-dark-10)}::ng-deep .mat-mdc-button-persistent-ripple:before{opacity:0!important}.primary:not(:disabled){border-color:var(--color-primary)}.primary:not(:disabled):hover{border-color:var(--color-primary-hover);--mat-button-filled-container-color: var(--color-primary-hover);--mat-button-filled-label-text-color: var(--color-white)}.primary:not(:disabled):active,.primary:not(:disabled):focus{border-color:var(--color-primary-pressed);--mat-button-filled-container-color: var(--color-primary-pressed);--mat-button-filled-label-text-color: var(--color-white)}.primary:disabled{--mat-button-filled-disabled-container-color: var(--color-muted-50);--mat-button-filled-disabled-label-text-color: var(--color-dark-10)}.secondary:not(:disabled){border-color:var(--color-primary);--mat-button-filled-container-color: var(--color-white);--mat-button-filled-label-text-color: var(--color-primary)}.secondary:not(:disabled):hover{border-color:var(--color-primary-hover);--mat-button-filled-container-color: var(--color-primary-hover);--mat-button-filled-label-text-color: var(--color-white)}.secondary:not(:disabled):active,.secondary:not(:disabled):focus{border-color:var(--color-primary-pressed);--mat-button-filled-container-color: var(--color-primary-pressed);--mat-button-filled-label-text-color: var(--color-white)}.secondary:disabled{--mat-button-filled-disabled-container-color: var(--color-muted-50);--mat-button-filled-disabled-label-text-color: var(--color-dark-10)}.error:not(:disabled){border-color:var(--color-error);--mat-button-filled-container-color: var(--color-white);--mat-button-filled-label-text-color: var(--color-error)}.error:not(:disabled):hover{border-color:var(--color-error-hover);--mat-button-filled-container-color: var(--color-error-hover);--mat-button-filled-label-text-color: var(--color-white)}.error:not(:disabled):active,.error:not(:disabled):focus{border-color:var(--color-error-pressed);--mat-button-filled-label-text-color: var(--color-white);--mat-button-filled-container-color: var(--color-error-pressed)}.error:disabled{--mat-button-filled-disabled-container-color: var(--color-white);--mat-button-filled-disabled-label-text-color: var(--color-dark-10)}.tertiary:not(:disabled){border-color:var(--color-light);--mat-button-filled-container-color: var(--color-light-30);--mat-button-filled-label-text-color: var(--color-dark)}.tertiary:not(:disabled):hover{border-color:var(--color-light);--mat-button-filled-container-color: var(--color-light-80);--mat-button-filled-label-text-color: var(--color-dark)}.tertiary:not(:disabled):active,.tertiary:not(:disabled):focus{border-color:var(--color-light);--mat-button-filled-label-text-color: var(--color-dark);--mat-button-filled-container-color: var(--color-light)}.tertiary:disabled{border-color:var(--color-light);--mat-button-filled-disabled-container-color: var(--color-muted-50);--mat-button-filled-disabled-label-text-color: var(--color-medium-50)}.sm{--mat-button-filled-container-height: 32px;--mat-button-filled-horizontal-padding: 7px;--mat-button-filled-label-text-size: 14px}.xs{--mat-button-filled-container-height: 24px;--mat-button-filled-horizontal-padding: 7px;--mat-button-filled-label-text-size: 12px}:host::ng-deep .mdc-button__label{white-space:nowrap}\n"] }]
|
|
312
|
-
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
|
|
313
|
+
args: [{ selector: 'ads-button', standalone: false, template: "<button mat-flat-button [class.full-width]=\"fullWidth()\" [id]=\"id()\" [ngClass]=\"[variant(), size()]\" [disabled]=\"disabled()\" [disableRipple]=\"true\">\n <ng-content></ng-content>\n</button>\n", styles: ["button{--mat-button-filled-container-color: var(--color-primary);--mat-button-filled-label-text-color: var(--color-white);--mat-button-filled-label-text-weight: 600;--mat-button-filled-container-height: var(--mat-form-field-container-height);--mat-button-filled-label-text-tracking: \"1.5px\";--mat-button-filled-label-text-size: 16px;--mat-button-filled-horizontal-padding: 24px;--mat-button-filled-disabled-container-color: var(--color-dark-10);--mat-button-filled-disabled-label-text-color: var(--color-white);--mat-filled-button-hover-state-layer-opacity: 0;border:1.5px solid;min-width:unset!important}button:disabled{border-color:var(--color-dark-10)}::ng-deep .mat-mdc-button-persistent-ripple:before{opacity:0!important}.primary:not(:disabled){border-color:var(--color-primary)}.primary:not(:disabled):hover{border-color:var(--color-primary-hover);--mat-button-filled-container-color: var(--color-primary-hover);--mat-button-filled-label-text-color: var(--color-white)}.primary:not(:disabled):active,.primary:not(:disabled):focus{border-color:var(--color-primary-pressed);--mat-button-filled-container-color: var(--color-primary-pressed);--mat-button-filled-label-text-color: var(--color-white)}.primary:disabled{--mat-button-filled-disabled-container-color: var(--color-muted-50);--mat-button-filled-disabled-label-text-color: var(--color-dark-10)}.secondary:not(:disabled){border-color:var(--color-primary);--mat-button-filled-container-color: var(--color-white);--mat-button-filled-label-text-color: var(--color-primary)}.secondary:not(:disabled):hover{border-color:var(--color-primary-hover);--mat-button-filled-container-color: var(--color-primary-hover);--mat-button-filled-label-text-color: var(--color-white)}.secondary:not(:disabled):active,.secondary:not(:disabled):focus{border-color:var(--color-primary-pressed);--mat-button-filled-container-color: var(--color-primary-pressed);--mat-button-filled-label-text-color: var(--color-white)}.secondary:disabled{--mat-button-filled-disabled-container-color: var(--color-muted-50);--mat-button-filled-disabled-label-text-color: var(--color-dark-10)}.error:not(:disabled){border-color:var(--color-error);--mat-button-filled-container-color: var(--color-white);--mat-button-filled-label-text-color: var(--color-error)}.error:not(:disabled):hover{border-color:var(--color-error-hover);--mat-button-filled-container-color: var(--color-error-hover);--mat-button-filled-label-text-color: var(--color-white)}.error:not(:disabled):active,.error:not(:disabled):focus{border-color:var(--color-error-pressed);--mat-button-filled-label-text-color: var(--color-white);--mat-button-filled-container-color: var(--color-error-pressed)}.error:disabled{--mat-button-filled-disabled-container-color: var(--color-white);--mat-button-filled-disabled-label-text-color: var(--color-dark-10)}.tertiary:not(:disabled){border-color:var(--color-light);--mat-button-filled-container-color: var(--color-light-30);--mat-button-filled-label-text-color: var(--color-dark)}.tertiary:not(:disabled):hover{border-color:var(--color-light);--mat-button-filled-container-color: var(--color-light-80);--mat-button-filled-label-text-color: var(--color-dark)}.tertiary:not(:disabled):active,.tertiary:not(:disabled):focus{border-color:var(--color-light);--mat-button-filled-label-text-color: var(--color-dark);--mat-button-filled-container-color: var(--color-light)}.tertiary:disabled{border-color:var(--color-light);--mat-button-filled-disabled-container-color: var(--color-muted-50);--mat-button-filled-disabled-label-text-color: var(--color-medium-50)}.sm{--mat-button-filled-container-height: 32px;--mat-button-filled-horizontal-padding: 7px;--mat-button-filled-label-text-size: 14px}.xs{--mat-button-filled-container-height: 24px;--mat-button-filled-horizontal-padding: 7px;--mat-button-filled-label-text-size: 12px}:host::ng-deep .mdc-button__label{white-space:nowrap}.full-width{width:100%!important}\n"] }]
|
|
314
|
+
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }] } });
|
|
313
315
|
|
|
314
316
|
class AdsButtonModule {
|
|
315
317
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
@@ -819,7 +821,7 @@ class AdsCreateTagComponent {
|
|
|
819
821
|
this.tagRemove.emit(id); // emit the updated array
|
|
820
822
|
}
|
|
821
823
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsCreateTagComponent, deps: [{ token: i4.FormBuilder }, { token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
822
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsCreateTagComponent, isStandalone: false, selector: "ads-create-tag", inputs: { limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: false, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, lowercase: { classPropertyName: "lowercase", publicName: "lowercase", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, alphanumeric: { classPropertyName: "alphanumeric", publicName: "alphanumeric", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tagsChange: "tagsChange", tagCreate: "tagCreate", tagRemove: "tagRemove" }, viewQueries: [{ propertyName: "addInput", first: true, predicate: ["addInput"], descendants: true }, { propertyName: "editInput", first: true, predicate: ["editInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ads-tag-container>\n @for (tag of tags; track tag.id) {\n @if (selectedTag()?.id === tag.id) {\n <form [formGroup]=\"form\">\n <div class=\"tag-overlay-trigger\" cdkOverlayOrigin #updateTrigger=\"cdkOverlayOrigin\"></div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"updateTrigger\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayOpen]=\"true\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n (backdropClick)=\"hide()\"\n (detach)=\"hide()\"\n >\n <div class=\"tag-overlay\">\n <input #editInput formControlName=\"tag\" [attr.maxlength]=\"maxlength()\" />\n <div class=\"tag-configuration\">\n <div class=\"color-picker\">\n @for (color of palette(); track color) {\n <div\n class=\"color\"\n [class.selected]=\"selectedColor === color\"\n [ngStyle]=\"{\n 'background-color': getBackgroundColor(color),\n opacity: selectedColor && selectedColor !== color ? 0.2 : 1,\n }\"\n (click)=\"onColorChange(color)\"\n ></div>\n }\n </div>\n <div class=\"actions\">\n <ads-button [variant]=\"'secondary'\" size=\"xs\" (click)=\"reset()\">{{ 'Cancel' }}</ads-button>\n <ads-button size=\"xs\" [disabled]=\"isValueInvalid()\" (click)=\"updateTag()\">\n {{ 'Save' }}\n </ads-button>\n </div>\n </div>\n </div>\n </ng-template>\n </form>\n } @else {\n <ads-tag\n [tag]=\"tag.tag\"\n [color]=\"tag.color\"\n [id]=\"tag.id\"\n (selected)=\"onTagSelect($event)\"\n (remove)=\"onTagRemove($event)\"\n />\n }\n }\n\n <div class=\"tag-container \">\n @if (showInput) {\n <form [formGroup]=\"form\">\n <div class=\"tag-overlay-trigger\" cdkOverlayOrigin #addTrigger=\"cdkOverlayOrigin\"></div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"addTrigger\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayOpen]=\"true\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n (backdropClick)=\"hide()\"\n (detach)=\"hide()\"\n >\n <div class=\"tag-overlay\">\n <input #addInput formControlName=\"tag\" [attr.maxlength]=\"maxlength()\" />\n <div class=\"tag-configuration\">\n <div class=\"color-picker\">\n @for (color of palette(); track color) {\n <div\n class=\"color\"\n [class.selected]=\"selectedColor === color\"\n [ngStyle]=\"{\n 'background-color': getBackgroundColor(color),\n opacity: selectedColor && selectedColor !== color ? 0.2 : 1,\n }\"\n (click)=\"onColorChange(color)\"\n ></div>\n }\n </div>\n <div class=\"actions\">\n <ads-button [variant]=\"'secondary'\" size=\"xs\" (click)=\"reset()\">{{ 'Cancel' }}</ads-button>\n <ads-button size=\"xs\" [disabled]=\"isValueInvalid()\" (click)=\"addTag()\">{{ 'Add' }} </ads-button>\n </div>\n </div>\n </div>\n </ng-template>\n </form>\n }\n\n @if (this.tags.length < this.limit()) {\n <ads-button (click)=\"displayInput()\" size=\"xs\">\n {{ 'Add Tag' }}\n </ads-button>\n }\n </div>\n</ads-tag-container>\n", styles: [".tag-overlay-trigger{height:0;width:150px;display:flex}.tag-overlay{display:flex;flex-direction:column}input{padding:0 8px;box-sizing:border-box;background-color:var(--color-white);border:2px solid var(--color-medium);color:var(--color-dark);height:24px;border-radius:5px;width:150px}input:focus{outline:none}.tag-configuration{box-shadow:0 0 0 1px #98a1b31a,0 15px 35px -5px #11182626,0 5px 15px #00000014;border-radius:5px;margin-top:5px;background-color:var(--color-white);overflow:hidden}.color-picker{padding:12px 16px;display:grid;grid-template-columns:repeat(4,1fr);place-items:center;grid-gap:12px}.color-picker .color{width:20px;height:20px;border-radius:50%;cursor:pointer}.actions{border-top:1px solid var(--color-light);padding:8px 16px;display:flex;justify-content:center;gap:12px}.actions ::ng-deep ads-button button{width:52px;min-width:unset}::ng-deep .cdk-overlay-dark-backdrop{opacity:0!important}.tag-container{display:inline-flex;gap:4px;height:24px;position:relative}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i4$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AdsButtonComponent, selector: "ads-button", inputs: ["id", "variant", "disabled", "size", "type"] }, { kind: "component", type: AdsTagContainerComponent, selector: "ads-tag-container" }, { kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "borderColor", "borderWidth", "width", "id", "removable", "tag"], outputs: ["remove", "selected"] }] }); }
|
|
824
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsCreateTagComponent, isStandalone: false, selector: "ads-create-tag", inputs: { limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: false, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, lowercase: { classPropertyName: "lowercase", publicName: "lowercase", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, alphanumeric: { classPropertyName: "alphanumeric", publicName: "alphanumeric", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tagsChange: "tagsChange", tagCreate: "tagCreate", tagRemove: "tagRemove" }, viewQueries: [{ propertyName: "addInput", first: true, predicate: ["addInput"], descendants: true }, { propertyName: "editInput", first: true, predicate: ["editInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ads-tag-container>\n @for (tag of tags; track tag.id) {\n @if (selectedTag()?.id === tag.id) {\n <form [formGroup]=\"form\">\n <div class=\"tag-overlay-trigger\" cdkOverlayOrigin #updateTrigger=\"cdkOverlayOrigin\"></div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"updateTrigger\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayOpen]=\"true\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n (backdropClick)=\"hide()\"\n (detach)=\"hide()\"\n >\n <div class=\"tag-overlay\">\n <input #editInput formControlName=\"tag\" [attr.maxlength]=\"maxlength()\" />\n <div class=\"tag-configuration\">\n <div class=\"color-picker\">\n @for (color of palette(); track color) {\n <div\n class=\"color\"\n [class.selected]=\"selectedColor === color\"\n [ngStyle]=\"{\n 'background-color': getBackgroundColor(color),\n opacity: selectedColor && selectedColor !== color ? 0.2 : 1,\n }\"\n (click)=\"onColorChange(color)\"\n ></div>\n }\n </div>\n <div class=\"actions\">\n <ads-button [variant]=\"'secondary'\" size=\"xs\" (click)=\"reset()\">{{ 'Cancel' }}</ads-button>\n <ads-button size=\"xs\" [disabled]=\"isValueInvalid()\" (click)=\"updateTag()\">\n {{ 'Save' }}\n </ads-button>\n </div>\n </div>\n </div>\n </ng-template>\n </form>\n } @else {\n <ads-tag\n [tag]=\"tag.tag\"\n [color]=\"tag.color\"\n [id]=\"tag.id\"\n (selected)=\"onTagSelect($event)\"\n (remove)=\"onTagRemove($event)\"\n />\n }\n }\n\n <div class=\"tag-container \">\n @if (showInput) {\n <form [formGroup]=\"form\">\n <div class=\"tag-overlay-trigger\" cdkOverlayOrigin #addTrigger=\"cdkOverlayOrigin\"></div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"addTrigger\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayOpen]=\"true\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n (backdropClick)=\"hide()\"\n (detach)=\"hide()\"\n >\n <div class=\"tag-overlay\">\n <input #addInput formControlName=\"tag\" [attr.maxlength]=\"maxlength()\" />\n <div class=\"tag-configuration\">\n <div class=\"color-picker\">\n @for (color of palette(); track color) {\n <div\n class=\"color\"\n [class.selected]=\"selectedColor === color\"\n [ngStyle]=\"{\n 'background-color': getBackgroundColor(color),\n opacity: selectedColor && selectedColor !== color ? 0.2 : 1,\n }\"\n (click)=\"onColorChange(color)\"\n ></div>\n }\n </div>\n <div class=\"actions\">\n <ads-button [variant]=\"'secondary'\" size=\"xs\" (click)=\"reset()\">{{ 'Cancel' }}</ads-button>\n <ads-button size=\"xs\" [disabled]=\"isValueInvalid()\" (click)=\"addTag()\">{{ 'Add' }} </ads-button>\n </div>\n </div>\n </div>\n </ng-template>\n </form>\n }\n\n @if (this.tags.length < this.limit()) {\n <ads-button (click)=\"displayInput()\" size=\"xs\">\n {{ 'Add Tag' }}\n </ads-button>\n }\n </div>\n</ads-tag-container>\n", styles: [".tag-overlay-trigger{height:0;width:150px;display:flex}.tag-overlay{display:flex;flex-direction:column}input{padding:0 8px;box-sizing:border-box;background-color:var(--color-white);border:2px solid var(--color-medium);color:var(--color-dark);height:24px;border-radius:5px;width:150px}input:focus{outline:none}.tag-configuration{box-shadow:0 0 0 1px #98a1b31a,0 15px 35px -5px #11182626,0 5px 15px #00000014;border-radius:5px;margin-top:5px;background-color:var(--color-white);overflow:hidden}.color-picker{padding:12px 16px;display:grid;grid-template-columns:repeat(4,1fr);place-items:center;grid-gap:12px}.color-picker .color{width:20px;height:20px;border-radius:50%;cursor:pointer}.actions{border-top:1px solid var(--color-light);padding:8px 16px;display:flex;justify-content:center;gap:12px}.actions ::ng-deep ads-button button{width:52px;min-width:unset}::ng-deep .cdk-overlay-dark-backdrop{opacity:0!important}.tag-container{display:inline-flex;gap:4px;height:24px;position:relative}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i4$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AdsButtonComponent, selector: "ads-button", inputs: ["id", "variant", "disabled", "size", "type", "fullWidth"] }, { kind: "component", type: AdsTagContainerComponent, selector: "ads-tag-container" }, { kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "borderColor", "borderWidth", "width", "id", "removable", "tag"], outputs: ["remove", "selected"] }] }); }
|
|
823
825
|
}
|
|
824
826
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsCreateTagComponent, decorators: [{
|
|
825
827
|
type: Component,
|
|
@@ -1515,7 +1517,7 @@ class AdsErrorPageComponent {
|
|
|
1515
1517
|
}
|
|
1516
1518
|
}
|
|
1517
1519
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsErrorPageComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.AdsIconRegistry }, { token: i1$1.Location }, { token: i3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1518
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsErrorPageComponent, isStandalone: false, selector: "ads-error-page", inputs: { logoSrc: "logoSrc", logoAlt: "logoAlt", config: "config" }, host: { listeners: { "window:resize": "resize()" } }, viewQueries: [{ propertyName: "errorRepresentation", first: true, predicate: ["errorRepresentation"], descendants: true }, { propertyName: "errorCode", first: true, predicate: ["errorCode"], descendants: true }, { propertyName: "codeImage", first: true, predicate: ["codeImage"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"error-page-container\">\n <div class=\"body\">\n <div class=\"body-header\"><img [src]=\"logoSrc\" [alt]=\"logoAlt\" /></div>\n <div class=\"body-error-representation\" #errorRepresentation [ngClass]=\"{ svg: iconAsSvg }\">\n @if (iconAsSvg) {\n <div class=\"error-icon {{ config.icon }}\" [innerHTML]=\"iconAsSvg\"></div>\n } @else {\n <span class=\"error-code\" #errorCode [ngStyle]=\"adjustStyles()\">\n {{ config.code || defaults.errorCode }}\n </span>\n }\n </div>\n @if (config.message) {\n <div class=\"body-error-message\">{{ config.message }}</div>\n }\n @if (config.summary) {\n <div class=\"body-error-summary\">{{ config.summary }}</div>\n }\n </div>\n @if(config.infoColumns?.length || config.showHomeButton || config.showBackButton) {\n <div class=\"footer\">\n @if(config.infoColumns?.length) {\n <div class=\"footer-info-columns\">\n <!-- default alignment for single column is \"center\", otherwise - \"left\" -->\n @for (column of config.infoColumns; track $index) {\n <div\n class=\"footer-info-column\"\n [ngStyle]=\"{\n 'text-align': column.alignment ? column.alignment : (config.infoColumns?.length ?? 1) > 1 ? 'left' : 'center',\n }\"\n >\n @if(column.header) {\n <div class=\"footer-column-header\">{{ column.header }}</div>\n }\n <div class=\"footer-column-body\" [innerHTML]=\"column.body\"></div>\n </div>\n }\n </div>\n }\n @if(config.showHomeButton || config.showBackButton) {\n <div class=\"footer-buttons\">\n @if(config.showBackButton) {\n <ads-button variant=\"secondary\" (click)=\"back()\">{{\n config.backButtonLabel || defaults.backButtonLabel\n }}\n </ads-button>\n }\n @if(config.showHomeButton) {\n <ads-button variant=\"primary\" routerLink=\"/\">{{\n config.homeButtonLabel || defaults.homeButtonLabel\n }}\n </ads-button>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".error-page-container{display:grid;min-height:100vh;grid-template-rows:1fr min-content}.error-page-container .body{padding-left:2rem}@media screen and (min-width: 320px) and (max-width: 480px){.error-page-container .body{padding-left:1rem}}.error-page-container .body{padding-right:2rem}@media screen and (min-width: 320px) and (max-width: 480px){.error-page-container .body{padding-right:1rem}}.error-page-container .body{padding-top:2rem;padding-bottom:3rem;background:linear-gradient(123.73deg,#252636 2.41%,#3f4560 100.33%);min-height:45vh;display:grid;grid-template-rows:min-content 1fr min-content min-content}.error-page-container .body .body-header img{max-width:10rem;min-width:5rem}@media screen and (max-width: 768px){.error-page-container .body .body-header img{width:24vw}}.error-page-container .body .body-error-representation{min-height:6rem;position:relative;margin:2rem 3rem;display:flex;align-items:center;justify-content:center;font-weight:700}.error-page-container .body .body-error-representation.svg{margin:3rem 4rem}.error-page-container .body .body-error-representation .error-icon{position:absolute;height:100%;width:100%}.error-page-container .body .body-error-representation .error-icon.plus_circle{rotate:45deg}.error-page-container .body .body-error-representation .error-icon ::ng-deep svg{fill:#615bff;height:inherit!important;width:inherit!important}.error-page-container .body .body-error-representation .error-code{position:absolute;color:#615bff;font-size:500px}.error-page-container .body .body-error-representation .error-code-hidden{position:absolute;pointer-events:none;visibility:hidden}.error-page-container .body .body-error-message{font-weight:700;font-size:1.5rem;color:var(--color-white);display:flex;align-items:center;justify-content:center;text-align:center}.error-page-container .body .body-error-message:not(:only-child){padding-bottom:.25rem}@media screen and (min-width: 320px) and (max-width: 480px){.error-page-container .body .body-error-message:not(:only-child){padding-bottom:.125rem}}@media screen and (min-width: 320px) and (max-width: 480px){.error-page-container .body .body-error-message{font-size:1.25rem}}.error-page-container .body .body-error-summary{display:flex;align-items:center;justify-content:center;color:#ced6e8bf;text-align:center}@media screen and (min-width: 320px) and (max-width: 480px){.error-page-container .body .body-error-summary{font-size:.8rem}}.error-page-container .footer{display:grid;justify-items:center;align-items:center;padding-top:1rem;padding-bottom:3rem;grid-template-rows:repeat(2,min-content)}.error-page-container .footer{padding-left:2rem}@media screen and (min-width: 320px) and (max-width: 480px){.error-page-container .footer{padding-left:1rem}}.error-page-container .footer{padding-right:2rem}@media screen and (min-width: 320px) and (max-width: 480px){.error-page-container .footer{padding-right:1rem}}.error-page-container .footer .footer-international{position:absolute}.error-page-container .footer .footer-info-columns{display:grid;justify-items:center;grid-auto-flow:column}@media screen and (min-width: 320px) and (max-width: 480px){.error-page-container .footer .footer-info-columns{grid-auto-flow:row}}.error-page-container .footer .footer-info-columns .footer-info-column{max-width:500px}.error-page-container .footer .footer-info-columns .footer-info-column{padding:.5rem}@media screen and (min-width: 320px) and (max-width: 480px){.error-page-container .footer .footer-info-columns .footer-info-column{padding:.25rem}}.error-page-container .footer .footer-info-columns .footer-info-column:only-of-type{max-width:600px}.error-page-container .footer .footer-info-columns .footer-info-column .footer-column-header{color:#5756b3;font-size:1.2rem;font-weight:600}.error-page-container .footer .footer-info-columns .footer-info-column .footer-column-header{margin-bottom:.5rem}@media screen and (min-width: 320px) and (max-width: 480px){.error-page-container .footer .footer-info-columns .footer-info-column .footer-column-header{margin-bottom:.25rem}}@media screen and (min-width: 320px) and (max-width: 480px){.error-page-container .footer .footer-info-columns .footer-info-column .footer-column-header{font-size:1rem}}.error-page-container .footer .footer-info-columns .footer-info-column .footer-column-body{color:var(--color-dark)}@media screen and (min-width: 320px) and (max-width: 480px){.error-page-container .footer .footer-info-columns .footer-info-column{max-width:none}.error-page-container .footer .footer-info-columns .footer-info-column:not(:last-of-type){margin-bottom:1rem}}.error-page-container .footer .footer-buttons{display:flex;gap:12px;align-items:center}.error-page-container .footer .footer-buttons{margin-top:1.5rem}@media screen and (min-width: 320px) and (max-width: 480px){.error-page-container .footer .footer-buttons{margin-top:.75rem}}.error-page-container .footer .footer-buttons:only-child{margin-top:1.5rem}.error-page-container .footer .footer-buttons ads-button{margin-top:.5rem;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AdsButtonComponent, selector: "ads-button", inputs: ["id", "variant", "disabled", "size", "type"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
|
|
1520
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsErrorPageComponent, isStandalone: false, selector: "ads-error-page", inputs: { logoSrc: "logoSrc", logoAlt: "logoAlt", config: "config" }, host: { listeners: { "window:resize": "resize()" } }, viewQueries: [{ propertyName: "errorRepresentation", first: true, predicate: ["errorRepresentation"], descendants: true }, { propertyName: "errorCode", first: true, predicate: ["errorCode"], descendants: true }, { propertyName: "codeImage", first: true, predicate: ["codeImage"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"error-page-container\">\n <div class=\"body\">\n <div class=\"body-header\"><img [src]=\"logoSrc\" [alt]=\"logoAlt\" /></div>\n <div class=\"body-error-representation\" #errorRepresentation [ngClass]=\"{ svg: iconAsSvg }\">\n @if (iconAsSvg) {\n <div class=\"error-icon {{ config.icon }}\" [innerHTML]=\"iconAsSvg\"></div>\n } @else {\n <span class=\"error-code\" #errorCode [ngStyle]=\"adjustStyles()\">\n {{ config.code || defaults.errorCode }}\n </span>\n }\n </div>\n @if (config.message) {\n <div class=\"body-error-message\">{{ config.message }}</div>\n }\n @if (config.summary) {\n <div class=\"body-error-summary\">{{ config.summary }}</div>\n }\n </div>\n @if(config.infoColumns?.length || config.showHomeButton || config.showBackButton) {\n <div class=\"footer\">\n @if(config.infoColumns?.length) {\n <div class=\"footer-info-columns\">\n <!-- default alignment for single column is \"center\", otherwise - \"left\" -->\n @for (column of config.infoColumns; track $index) {\n <div\n class=\"footer-info-column\"\n [ngStyle]=\"{\n 'text-align': column.alignment ? column.alignment : (config.infoColumns?.length ?? 1) > 1 ? 'left' : 'center',\n }\"\n >\n @if(column.header) {\n <div class=\"footer-column-header\">{{ column.header }}</div>\n }\n <div class=\"footer-column-body\" [innerHTML]=\"column.body\"></div>\n </div>\n }\n </div>\n }\n @if(config.showHomeButton || config.showBackButton) {\n <div class=\"footer-buttons\">\n @if(config.showBackButton) {\n <ads-button variant=\"secondary\" (click)=\"back()\">{{\n config.backButtonLabel || defaults.backButtonLabel\n }}\n </ads-button>\n }\n @if(config.showHomeButton) {\n <ads-button variant=\"primary\" routerLink=\"/\">{{\n config.homeButtonLabel || defaults.homeButtonLabel\n }}\n </ads-button>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".error-page-container{display:grid;min-height:100vh;grid-template-rows:1fr min-content}.error-page-container .body{padding-left:2rem}@media screen and (min-width: 320px) and (max-width: 480px){.error-page-container .body{padding-left:1rem}}.error-page-container .body{padding-right:2rem}@media screen and (min-width: 320px) and (max-width: 480px){.error-page-container .body{padding-right:1rem}}.error-page-container .body{padding-top:2rem;padding-bottom:3rem;background:linear-gradient(123.73deg,#252636 2.41%,#3f4560 100.33%);min-height:45vh;display:grid;grid-template-rows:min-content 1fr min-content min-content}.error-page-container .body .body-header img{max-width:10rem;min-width:5rem}@media screen and (max-width: 768px){.error-page-container .body .body-header img{width:24vw}}.error-page-container .body .body-error-representation{min-height:6rem;position:relative;margin:2rem 3rem;display:flex;align-items:center;justify-content:center;font-weight:700}.error-page-container .body .body-error-representation.svg{margin:3rem 4rem}.error-page-container .body .body-error-representation .error-icon{position:absolute;height:100%;width:100%}.error-page-container .body .body-error-representation .error-icon.plus_circle{rotate:45deg}.error-page-container .body .body-error-representation .error-icon ::ng-deep svg{fill:#615bff;height:inherit!important;width:inherit!important}.error-page-container .body .body-error-representation .error-code{position:absolute;color:#615bff;font-size:500px}.error-page-container .body .body-error-representation .error-code-hidden{position:absolute;pointer-events:none;visibility:hidden}.error-page-container .body .body-error-message{font-weight:700;font-size:1.5rem;color:var(--color-white);display:flex;align-items:center;justify-content:center;text-align:center}.error-page-container .body .body-error-message:not(:only-child){padding-bottom:.25rem}@media screen and (min-width: 320px) and (max-width: 480px){.error-page-container .body .body-error-message:not(:only-child){padding-bottom:.125rem}}@media screen and (min-width: 320px) and (max-width: 480px){.error-page-container .body .body-error-message{font-size:1.25rem}}.error-page-container .body .body-error-summary{display:flex;align-items:center;justify-content:center;color:#ced6e8bf;text-align:center}@media screen and (min-width: 320px) and (max-width: 480px){.error-page-container .body .body-error-summary{font-size:.8rem}}.error-page-container .footer{display:grid;justify-items:center;align-items:center;padding-top:1rem;padding-bottom:3rem;grid-template-rows:repeat(2,min-content)}.error-page-container .footer{padding-left:2rem}@media screen and (min-width: 320px) and (max-width: 480px){.error-page-container .footer{padding-left:1rem}}.error-page-container .footer{padding-right:2rem}@media screen and (min-width: 320px) and (max-width: 480px){.error-page-container .footer{padding-right:1rem}}.error-page-container .footer .footer-international{position:absolute}.error-page-container .footer .footer-info-columns{display:grid;justify-items:center;grid-auto-flow:column}@media screen and (min-width: 320px) and (max-width: 480px){.error-page-container .footer .footer-info-columns{grid-auto-flow:row}}.error-page-container .footer .footer-info-columns .footer-info-column{max-width:500px}.error-page-container .footer .footer-info-columns .footer-info-column{padding:.5rem}@media screen and (min-width: 320px) and (max-width: 480px){.error-page-container .footer .footer-info-columns .footer-info-column{padding:.25rem}}.error-page-container .footer .footer-info-columns .footer-info-column:only-of-type{max-width:600px}.error-page-container .footer .footer-info-columns .footer-info-column .footer-column-header{color:#5756b3;font-size:1.2rem;font-weight:600}.error-page-container .footer .footer-info-columns .footer-info-column .footer-column-header{margin-bottom:.5rem}@media screen and (min-width: 320px) and (max-width: 480px){.error-page-container .footer .footer-info-columns .footer-info-column .footer-column-header{margin-bottom:.25rem}}@media screen and (min-width: 320px) and (max-width: 480px){.error-page-container .footer .footer-info-columns .footer-info-column .footer-column-header{font-size:1rem}}.error-page-container .footer .footer-info-columns .footer-info-column .footer-column-body{color:var(--color-dark)}@media screen and (min-width: 320px) and (max-width: 480px){.error-page-container .footer .footer-info-columns .footer-info-column{max-width:none}.error-page-container .footer .footer-info-columns .footer-info-column:not(:last-of-type){margin-bottom:1rem}}.error-page-container .footer .footer-buttons{display:flex;gap:12px;align-items:center}.error-page-container .footer .footer-buttons{margin-top:1.5rem}@media screen and (min-width: 320px) and (max-width: 480px){.error-page-container .footer .footer-buttons{margin-top:.75rem}}.error-page-container .footer .footer-buttons:only-child{margin-top:1.5rem}.error-page-container .footer .footer-buttons ads-button{margin-top:.5rem;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AdsButtonComponent, selector: "ads-button", inputs: ["id", "variant", "disabled", "size", "type", "fullWidth"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
|
|
1519
1521
|
}
|
|
1520
1522
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsErrorPageComponent, decorators: [{
|
|
1521
1523
|
type: Component,
|
|
@@ -5815,17 +5817,59 @@ class AdsSlideToggleComponent extends AbstractBaseComponent {
|
|
|
5815
5817
|
}
|
|
5816
5818
|
/** @ignore */
|
|
5817
5819
|
getTitle(enabled) {
|
|
5820
|
+
// Priority: customTitles > enableYesOrNo > default On/Off
|
|
5821
|
+
if (this.customTitles) {
|
|
5822
|
+
return enabled ? this.customTitles[0] : this.customTitles[1];
|
|
5823
|
+
}
|
|
5818
5824
|
const titles = this.enableYesOrNo ? ['Yes', 'No'] : ['On', 'Off'];
|
|
5819
5825
|
return enabled ? titles[0] : titles[1];
|
|
5820
5826
|
}
|
|
5827
|
+
/** @ignore */
|
|
5828
|
+
getToggleWidth() {
|
|
5829
|
+
// Calculate width based on text content
|
|
5830
|
+
if (this.customTitles) {
|
|
5831
|
+
// Get both titles to find the longest one
|
|
5832
|
+
const title1 = this.customTitles[0];
|
|
5833
|
+
const title2 = this.customTitles[1];
|
|
5834
|
+
const longerTitle = title1.length >= title2.length ? title1 : title2;
|
|
5835
|
+
// Special cases for common title combinations
|
|
5836
|
+
if ((title1 === 'Show' && title2 === 'Hide') || (title1 === 'Hide' && title2 === 'Show')) {
|
|
5837
|
+
return '50px';
|
|
5838
|
+
}
|
|
5839
|
+
// More accurate character width calculation
|
|
5840
|
+
// Different characters have different widths in the 10px font
|
|
5841
|
+
let estimatedWidth = 20; // Base width for padding and handle space
|
|
5842
|
+
for (const char of longerTitle) {
|
|
5843
|
+
// Approximate character widths at 10px font size
|
|
5844
|
+
if (/[iIjl1]/.test(char)) {
|
|
5845
|
+
estimatedWidth += 3; // Narrow characters
|
|
5846
|
+
}
|
|
5847
|
+
else if (/[mMwW]/.test(char)) {
|
|
5848
|
+
estimatedWidth += 8; // Wide characters
|
|
5849
|
+
}
|
|
5850
|
+
else if (/[A-Z]/.test(char)) {
|
|
5851
|
+
estimatedWidth += 6.5; // Uppercase letters
|
|
5852
|
+
}
|
|
5853
|
+
else {
|
|
5854
|
+
estimatedWidth += 5.5; // Regular lowercase letters and numbers
|
|
5855
|
+
}
|
|
5856
|
+
}
|
|
5857
|
+
// Ensure minimum width and round up
|
|
5858
|
+
return `${Math.max(40, Math.ceil(estimatedWidth))}px`;
|
|
5859
|
+
}
|
|
5860
|
+
// Predefined widths for standard texts
|
|
5861
|
+
return this.enableYesOrNo ? '42px' : '40px';
|
|
5862
|
+
}
|
|
5821
5863
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsSlideToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5822
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsSlideToggleComponent, isStandalone: false, selector: "ads-slide-toggle", inputs: { enableYesOrNo: "enableYesOrNo", control: "control", label: "label", id: "id", width: "width" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ads-toggle\" [class.disabled]=\"valueControl.disabled\" (click)=\"toggle()\" [ngStyle]=\"{ width: width }\">\n <div class=\"toggle-container\"
|
|
5864
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsSlideToggleComponent, isStandalone: false, selector: "ads-slide-toggle", inputs: { enableYesOrNo: "enableYesOrNo", customTitles: "customTitles", control: "control", label: "label", id: "id", width: "width" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ads-toggle\" [class.disabled]=\"valueControl.disabled\" (click)=\"toggle()\" [ngStyle]=\"{ width: width }\">\n <div class=\"toggle-container\"\n [class.checked]=\"valueControl.value\"\n [class.enable-yes-no]=\"enableYesOrNo\"\n [ngStyle]=\"{ width: getToggleWidth() }\">\n <div class=\"toggle-track\">\n <span class=\"toggle-label\"> {{ getTitle(valueControl.value) }} </span>\n </div>\n <div class=\"toggle-handle\"></div>\n </div>\n\n @if (label) {\n <span class=\"label\"> {{ label }} </span>\n }\n</div>\n@if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n}\n", styles: [".ads-toggle{height:48px;display:flex;align-items:center}.ads-toggle .label{padding:8px;cursor:pointer;font-size:1rem;line-height:21px;color:var(--color-dark);transition:transform .3s ease,color .3s ease}.ads-toggle:not(.disabled) .toggle-container{background-color:var(--color-medium);border-radius:48px;height:20px;display:flex;align-items:center;position:relative;transition:background-color .3s ease;cursor:pointer}.ads-toggle:not(.disabled) .toggle-container .toggle-handle{position:absolute;width:16px;height:16px;background-color:var(--color-white);border-radius:50%;border:1px solid var(--color-medium);left:2px;transition:left .3s ease,border-color .3s ease;z-index:2}.ads-toggle:not(.disabled) .toggle-container .toggle-track{width:100%;height:100%;display:flex;align-items:center;justify-content:flex-start;position:relative}.ads-toggle:not(.disabled) .toggle-container .toggle-track .toggle-label{font-size:10px;line-height:13px;color:var(--color-white);font-weight:500;white-space:nowrap;text-align:center;padding:0 4px 0 20px}.ads-toggle:not(.disabled) .toggle-container.checked{background-color:var(--color-secondary)}.ads-toggle:not(.disabled) .toggle-container.checked .toggle-track{justify-content:flex-end}.ads-toggle:not(.disabled) .toggle-container.checked .toggle-track .toggle-label{padding:0 20px 0 4px}.ads-toggle:not(.disabled) .toggle-container.checked .toggle-handle{left:calc(100% - 18px);border-color:var(--color-secondary)}.ads-toggle:not(.disabled) .toggle-container:hover .toggle-handle{box-shadow:0 0 0 6px var(--color-light-30)}.ads-toggle:not(.disabled) .toggle-container:hover.checked .toggle-handle{border-color:var(--color-secondary-hover)}.ads-toggle.disabled .toggle-container{cursor:default;background-color:var(--color-medium-50)}.ads-toggle.disabled .toggle-container .toggle-handle{border-color:var(--color-medium-50)}.ads-toggle.disabled .toggle-container .toggle-track .toggle-label{color:var(--color-medium-30)}.ads-toggle.disabled .label{cursor:default;color:var(--color-medium-30)}\n", ".footer-container{min-height:20px}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }] }); }
|
|
5823
5865
|
}
|
|
5824
5866
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsSlideToggleComponent, decorators: [{
|
|
5825
5867
|
type: Component,
|
|
5826
|
-
args: [{ selector: 'ads-slide-toggle', standalone: false, template: "<div class=\"ads-toggle\" [class.disabled]=\"valueControl.disabled\" (click)=\"toggle()\" [ngStyle]=\"{ width: width }\">\n <div class=\"toggle-container\"
|
|
5868
|
+
args: [{ selector: 'ads-slide-toggle', standalone: false, template: "<div class=\"ads-toggle\" [class.disabled]=\"valueControl.disabled\" (click)=\"toggle()\" [ngStyle]=\"{ width: width }\">\n <div class=\"toggle-container\"\n [class.checked]=\"valueControl.value\"\n [class.enable-yes-no]=\"enableYesOrNo\"\n [ngStyle]=\"{ width: getToggleWidth() }\">\n <div class=\"toggle-track\">\n <span class=\"toggle-label\"> {{ getTitle(valueControl.value) }} </span>\n </div>\n <div class=\"toggle-handle\"></div>\n </div>\n\n @if (label) {\n <span class=\"label\"> {{ label }} </span>\n }\n</div>\n@if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n}\n", styles: [".ads-toggle{height:48px;display:flex;align-items:center}.ads-toggle .label{padding:8px;cursor:pointer;font-size:1rem;line-height:21px;color:var(--color-dark);transition:transform .3s ease,color .3s ease}.ads-toggle:not(.disabled) .toggle-container{background-color:var(--color-medium);border-radius:48px;height:20px;display:flex;align-items:center;position:relative;transition:background-color .3s ease;cursor:pointer}.ads-toggle:not(.disabled) .toggle-container .toggle-handle{position:absolute;width:16px;height:16px;background-color:var(--color-white);border-radius:50%;border:1px solid var(--color-medium);left:2px;transition:left .3s ease,border-color .3s ease;z-index:2}.ads-toggle:not(.disabled) .toggle-container .toggle-track{width:100%;height:100%;display:flex;align-items:center;justify-content:flex-start;position:relative}.ads-toggle:not(.disabled) .toggle-container .toggle-track .toggle-label{font-size:10px;line-height:13px;color:var(--color-white);font-weight:500;white-space:nowrap;text-align:center;padding:0 4px 0 20px}.ads-toggle:not(.disabled) .toggle-container.checked{background-color:var(--color-secondary)}.ads-toggle:not(.disabled) .toggle-container.checked .toggle-track{justify-content:flex-end}.ads-toggle:not(.disabled) .toggle-container.checked .toggle-track .toggle-label{padding:0 20px 0 4px}.ads-toggle:not(.disabled) .toggle-container.checked .toggle-handle{left:calc(100% - 18px);border-color:var(--color-secondary)}.ads-toggle:not(.disabled) .toggle-container:hover .toggle-handle{box-shadow:0 0 0 6px var(--color-light-30)}.ads-toggle:not(.disabled) .toggle-container:hover.checked .toggle-handle{border-color:var(--color-secondary-hover)}.ads-toggle.disabled .toggle-container{cursor:default;background-color:var(--color-medium-50)}.ads-toggle.disabled .toggle-container .toggle-handle{border-color:var(--color-medium-50)}.ads-toggle.disabled .toggle-container .toggle-track .toggle-label{color:var(--color-medium-30)}.ads-toggle.disabled .label{cursor:default;color:var(--color-medium-30)}\n", ".footer-container{min-height:20px}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
5827
5869
|
}], propDecorators: { enableYesOrNo: [{
|
|
5828
5870
|
type: Input
|
|
5871
|
+
}], customTitles: [{
|
|
5872
|
+
type: Input
|
|
5829
5873
|
}], control: [{
|
|
5830
5874
|
type: Input
|
|
5831
5875
|
}], label: [{
|
|
@@ -5967,7 +6011,7 @@ class AdsSnackbarComponent {
|
|
|
5967
6011
|
}
|
|
5968
6012
|
}
|
|
5969
6013
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsSnackbarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5970
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsSnackbarComponent, isStandalone: false, selector: "ads-snackbar", host: { listeners: { "click": "onSnackbarClick()" } }, ngImport: i0, template: "<div class=\"container\" (click)=\"onSnackbarClick()\" [id]=\"id\">\n <div class=\"snackbar-container\">\n <span class=\"snackbar-text\" [innerHTML]=\"data.message\" [id]=\"id + '-details'\"></span>\n </div>\n @if (!data.hideActionButton) {\n <ads-button\n [id]=\"id + '-button'\"\n [variant]=\"buttonPanelClass\"\n (click)=\"data.onButtonClick ? data.onButtonClick() : snackBarRef.dismissWithAction(); $event.stopPropagation()\"\n >\n {{ data.buttonCaption ?? defaultButtonCaption }}\n </ads-button>\n }\n</div>\n", styles: [".container{display:flex;justify-content:space-between;align-items:center;gap:24px;width:80vw}.container .snackbar-container{display:flex;align-items:center}.container .snackbar-container .snackbar-text{color:var(--color-white);font-size:16px;font-weight:400;line-height:21px}ads-button{white-space:nowrap}@media (width <= 500px){.container{width:100%}}\n"], dependencies: [{ kind: "component", type: AdsButtonComponent, selector: "ads-button", inputs: ["id", "variant", "disabled", "size", "type"] }] }); }
|
|
6014
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsSnackbarComponent, isStandalone: false, selector: "ads-snackbar", host: { listeners: { "click": "onSnackbarClick()" } }, ngImport: i0, template: "<div class=\"container\" (click)=\"onSnackbarClick()\" [id]=\"id\">\n <div class=\"snackbar-container\">\n <span class=\"snackbar-text\" [innerHTML]=\"data.message\" [id]=\"id + '-details'\"></span>\n </div>\n @if (!data.hideActionButton) {\n <ads-button\n [id]=\"id + '-button'\"\n [variant]=\"buttonPanelClass\"\n (click)=\"data.onButtonClick ? data.onButtonClick() : snackBarRef.dismissWithAction(); $event.stopPropagation()\"\n >\n {{ data.buttonCaption ?? defaultButtonCaption }}\n </ads-button>\n }\n</div>\n", styles: [".container{display:flex;justify-content:space-between;align-items:center;gap:24px;width:80vw}.container .snackbar-container{display:flex;align-items:center}.container .snackbar-container .snackbar-text{color:var(--color-white);font-size:16px;font-weight:400;line-height:21px}ads-button{white-space:nowrap}@media (width <= 500px){.container{width:100%}}\n"], dependencies: [{ kind: "component", type: AdsButtonComponent, selector: "ads-button", inputs: ["id", "variant", "disabled", "size", "type", "fullWidth"] }] }); }
|
|
5971
6015
|
}
|
|
5972
6016
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsSnackbarComponent, decorators: [{
|
|
5973
6017
|
type: Component,
|
|
@@ -6138,7 +6182,7 @@ class AdsModalComponent extends AbstractWindowResizeComponent {
|
|
|
6138
6182
|
this.dialogRef.close(ModalActionType.Delete);
|
|
6139
6183
|
}
|
|
6140
6184
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6141
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsModalComponent, isStandalone: false, selector: "ads-modal", usesInheritance: true, ngImport: i0, template: "<div mat-dialog-title [id]=\"id + '-title'\">\n @if (data.headerTemplate) {\n <ng-container *ngTemplateOutlet=\"data.headerTemplate; context: { data: data.templateData }\" />\n }\n\n <span class=\"header-text\">{{ data.title }}</span>\n\n\n @if (!data.hideCrossIcon) {\n <div class=\"cross-icon-container\" [id]=\"id + '-cross-icon'\">\n <ads-icon name=\"cross\" size=\"xxs\" stroke=\"iconPrimary\" (click)=\"onCancel()\" />\n </div>\n }\n</div>\n\n<div mat-dialog-content [id]=\"id + '-content'\" [class.mobile]=\"isMobile()\">\n @if (data.contentTemplate) {\n <ng-container *ngTemplateOutlet=\"data.contentTemplate; context: { data: data.templateData }\" />\n } @else {\n <span [innerHTML]=\"data.content\"></span>\n }\n</div>\n\n<div mat-dialog-actions [class.actions-centered]=\"data.actionsCentered\" [class.mobile]=\"isMobile()\">\n @if (data.actionsTemplate) {\n <ng-container *ngTemplateOutlet=\"data.actionsTemplate; context: { data: data.templateData }\" />\n } @else {\n @if (data.actionHint) {\n <div class=\"action-hint\" [class.mobile]=\"isMobile()\" [id]=\"id + '-action-hint'\">{{ data.actionHint }}</div>\n }\n <div class=\"actions-container\" [class.mobile]=\"isMobile()\">\n @if (data.showDeleteButton) {\n <ads-button\n [variant]=\"data.deleteButtonVariant ?? 'error'\"\n (click)=\"onDelete()\"\n [id]=\"id + '-action-delete'\"\n [size]=\"isMobile() ? 'sm' : 'base'\"\n > @if (data.deleteButtonText) {\n {{ data.deleteButtonText }}\n } @else {\n {{ 'Delete' }}\n }\n </ads-button>\n }\n @if (!data.hideCancelButton) {\n <ads-button\n [variant]=\"data.cancelButtonVariant ?? 'secondary'\"\n (click)=\"onCancel()\"\n [id]=\"id + '-action-secondary'\"\n [size]=\"isMobile() ? 'sm' : 'base'\"\n >\n @if (data.cancelButtonText) {\n {{ data.cancelButtonText }}\n } @else {\n {{ 'Cancel' }}\n }\n </ads-button>\n }\n <ads-button\n [disabled]=\"!!data.disabledConfirmButton\"\n [variant]=\"data.confirmButtonVariant ?? 'primary'\"\n (click)=\"onSubmit()\"\n [id]=\"id + '-action-primary'\"\n [size]=\"isMobile() ? 'sm' : 'base'\"\n >\n @if (data.confirmButtonText) {\n {{ data.confirmButtonText }}\n } @else {\n Save\n }\n </ads-button>\n </div>\n }\n</div>\n", styles: ["::ng-deep .mat-mdc-dialog-surface{--mat-dialog-container-shape: 10px;--mat-dialog-container-min-width: 288px;--mat-dialog-container-color: var(--color-white)}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title{display:flex;justify-content:space-between;--mat-dialog-subhead-color: var(--color-dark);--mat-dialog-subhead-line-height: 26px;--mat-dialog-subhead-size: 20px;--mat-dialog-subhead-weight: 600}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title:before{content:none}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .header-text{padding-right:16px}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .cross-icon-container{display:flex;align-items:center;padding-right:16px}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .cross-icon-container ads-icon,::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .cross-icon-container ads-icon>svg{cursor:pointer;width:16px!important;height:16px!important}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-content.mobile{padding:0 16px 16px!important}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-container .mat-mdc-dialog-title+.mat-mdc-dialog-content{padding-top:8px}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-content{letter-spacing:normal!important;--mat-dialog-supporting-text-color: var(--color-medium);--mat-dialog-supporting-text-line-height: 21px;--mat-dialog-supporting-text-size: 16px;--mat-dialog-supporting-text-weight: 400}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions{border-top:1px solid var(--color-light);gap:16px;justify-content:flex-end}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions.actions-centered{justify-content:center}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions.mobile{gap:8px;padding:24px 16px!important}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions .actions-container{gap:16px;display:flex;justify-content:flex-end}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions .actions-container.mobile{gap:8px}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions .action-hint{flex:1;display:flex;justify-content:flex-end;color:var(--color-medium);line-height:21px;font-size:16px;text-align:right}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions .action-hint.mobile{font-size:14px;line-height:18px}\n"], dependencies: [{ kind: "directive", type: i1$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: AdsButtonComponent, selector: "ads-button", inputs: ["id", "variant", "disabled", "size", "type"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
6185
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsModalComponent, isStandalone: false, selector: "ads-modal", usesInheritance: true, ngImport: i0, template: "<div mat-dialog-title [id]=\"id + '-title'\">\n @if (data.headerTemplate) {\n <ng-container *ngTemplateOutlet=\"data.headerTemplate; context: { data: data.templateData }\" />\n }\n\n <span class=\"header-text\">{{ data.title }}</span>\n\n\n @if (!data.hideCrossIcon) {\n <div class=\"cross-icon-container\" [id]=\"id + '-cross-icon'\">\n <ads-icon name=\"cross\" size=\"xxs\" stroke=\"iconPrimary\" (click)=\"onCancel()\" />\n </div>\n }\n</div>\n\n<div mat-dialog-content [id]=\"id + '-content'\" [class.mobile]=\"isMobile()\">\n @if (data.contentTemplate) {\n <ng-container *ngTemplateOutlet=\"data.contentTemplate; context: { data: data.templateData }\" />\n } @else {\n <span [innerHTML]=\"data.content\"></span>\n }\n</div>\n\n<div mat-dialog-actions [class.actions-centered]=\"data.actionsCentered\" [class.mobile]=\"isMobile()\">\n @if (data.actionsTemplate) {\n <ng-container *ngTemplateOutlet=\"data.actionsTemplate; context: { data: data.templateData }\" />\n } @else {\n @if (data.actionHint) {\n <div class=\"action-hint\" [class.mobile]=\"isMobile()\" [id]=\"id + '-action-hint'\">{{ data.actionHint }}</div>\n }\n <div class=\"actions-container\" [class.mobile]=\"isMobile()\">\n @if (data.showDeleteButton) {\n <ads-button\n [variant]=\"data.deleteButtonVariant ?? 'error'\"\n (click)=\"onDelete()\"\n [id]=\"id + '-action-delete'\"\n [size]=\"isMobile() ? 'sm' : 'base'\"\n > @if (data.deleteButtonText) {\n {{ data.deleteButtonText }}\n } @else {\n {{ 'Delete' }}\n }\n </ads-button>\n }\n @if (!data.hideCancelButton) {\n <ads-button\n [variant]=\"data.cancelButtonVariant ?? 'secondary'\"\n (click)=\"onCancel()\"\n [id]=\"id + '-action-secondary'\"\n [size]=\"isMobile() ? 'sm' : 'base'\"\n >\n @if (data.cancelButtonText) {\n {{ data.cancelButtonText }}\n } @else {\n {{ 'Cancel' }}\n }\n </ads-button>\n }\n <ads-button\n [disabled]=\"!!data.disabledConfirmButton\"\n [variant]=\"data.confirmButtonVariant ?? 'primary'\"\n (click)=\"onSubmit()\"\n [id]=\"id + '-action-primary'\"\n [size]=\"isMobile() ? 'sm' : 'base'\"\n >\n @if (data.confirmButtonText) {\n {{ data.confirmButtonText }}\n } @else {\n Save\n }\n </ads-button>\n </div>\n }\n</div>\n", styles: ["::ng-deep .mat-mdc-dialog-surface{--mat-dialog-container-shape: 10px;--mat-dialog-container-min-width: 288px;--mat-dialog-container-color: var(--color-white)}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title{display:flex;justify-content:space-between;--mat-dialog-subhead-color: var(--color-dark);--mat-dialog-subhead-line-height: 26px;--mat-dialog-subhead-size: 20px;--mat-dialog-subhead-weight: 600}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title:before{content:none}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .header-text{padding-right:16px}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .cross-icon-container{display:flex;align-items:center;padding-right:16px}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .cross-icon-container ads-icon,::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .cross-icon-container ads-icon>svg{cursor:pointer;width:16px!important;height:16px!important}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-content.mobile{padding:0 16px 16px!important}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-container .mat-mdc-dialog-title+.mat-mdc-dialog-content{padding-top:8px}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-content{letter-spacing:normal!important;--mat-dialog-supporting-text-color: var(--color-medium);--mat-dialog-supporting-text-line-height: 21px;--mat-dialog-supporting-text-size: 16px;--mat-dialog-supporting-text-weight: 400}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions{border-top:1px solid var(--color-light);gap:16px;justify-content:flex-end}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions.actions-centered{justify-content:center}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions.mobile{gap:8px;padding:24px 16px!important}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions .actions-container{gap:16px;display:flex;justify-content:flex-end}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions .actions-container.mobile{gap:8px}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions .action-hint{flex:1;display:flex;justify-content:flex-end;color:var(--color-medium);line-height:21px;font-size:16px;text-align:right}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions .action-hint.mobile{font-size:14px;line-height:18px}\n"], dependencies: [{ kind: "directive", type: i1$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: AdsButtonComponent, selector: "ads-button", inputs: ["id", "variant", "disabled", "size", "type", "fullWidth"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
6142
6186
|
}
|
|
6143
6187
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsModalComponent, decorators: [{
|
|
6144
6188
|
type: Component,
|
|
@@ -6303,6 +6347,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImpor
|
|
|
6303
6347
|
}]
|
|
6304
6348
|
}] });
|
|
6305
6349
|
|
|
6350
|
+
class AdsTableButtonComponent {
|
|
6351
|
+
constructor() {
|
|
6352
|
+
/** The unique ID for the button */
|
|
6353
|
+
this.id = input('', ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
6354
|
+
/** Whether the button is disabled */
|
|
6355
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
6356
|
+
/** Makes the button take 100% width of its container */
|
|
6357
|
+
this.fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
6358
|
+
/** The menu to trigger when button is clicked */
|
|
6359
|
+
this.matMenuTriggerFor = input(null, ...(ngDevMode ? [{ debugName: "matMenuTriggerFor" }] : []));
|
|
6360
|
+
/** Event emitted when the menu is opened */
|
|
6361
|
+
this.menuOpened = output();
|
|
6362
|
+
}
|
|
6363
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsTableButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6364
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: AdsTableButtonComponent, isStandalone: false, selector: "ads-table-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, matMenuTriggerFor: { classPropertyName: "matMenuTriggerFor", publicName: "matMenuTriggerFor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuOpened: "menuOpened" }, ngImport: i0, template: "<button\n mat-flat-button\n [id]=\"id()\"\n [disabled]=\"disabled()\"\n [class.full-width]=\"fullWidth()\"\n [disableRipple]=\"true\"\n [matMenuTriggerFor]=\"matMenuTriggerFor()\"\n (menuOpened)=\"menuOpened.emit()\">\n <div class=\"content-container\">\n <ng-content></ng-content>\n </div>\n</button>\n", styles: ["button{--mat-button-filled-label-text-weight: 600;--mat-button-filled-container-height: 24px;--mat-button-filled-label-text-size: 12px;--mat-button-filled-horizontal-padding: 7px;--mat-button-filled-container-shape: 5px;--mat-filled-button-hover-state-layer-opacity: 0;--mat-button-filled-container-color: var(--color-secondary-10);--mat-button-filled-label-text-color: var(--color-secondary);border:1.5px solid var(--color-secondary);min-width:unset!important}button:disabled{border-color:var(--color-medium-30);--mat-button-filled-disabled-container-color: var(--color-muted-50);--mat-button-filled-disabled-label-text-color: var(--color-medium-50)}button:disabled ::ng-deep ads-icon svg{fill:var(--color-medium-50)!important;stroke:var(--color-medium-50)!important}button:not(:disabled):hover{border-color:var(--color-secondary-hover);--mat-button-filled-container-color: var(--color-secondary-hover);--mat-button-filled-label-text-color: var(--color-white)}button:not(:disabled):hover ::ng-deep ads-icon svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}button:not(:disabled):active,button:not(:disabled):focus{border-color:var(--color-secondary-pressed);--mat-button-filled-container-color: var(--color-secondary-pressed);--mat-button-filled-label-text-color: var(--color-white)}button:not(:disabled):active ::ng-deep ads-icon svg,button:not(:disabled):focus ::ng-deep ads-icon svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}::ng-deep .mat-mdc-button-persistent-ripple:before{opacity:0!important}:host::ng-deep .mdc-button__label{white-space:nowrap}.content-container{display:flex;gap:8px;align-items:center}.full-width{width:100%!important}\n"], dependencies: [{ kind: "component", type: i7.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: i4$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
|
|
6365
|
+
}
|
|
6366
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsTableButtonComponent, decorators: [{
|
|
6367
|
+
type: Component,
|
|
6368
|
+
args: [{ selector: 'ads-table-button', standalone: false, template: "<button\n mat-flat-button\n [id]=\"id()\"\n [disabled]=\"disabled()\"\n [class.full-width]=\"fullWidth()\"\n [disableRipple]=\"true\"\n [matMenuTriggerFor]=\"matMenuTriggerFor()\"\n (menuOpened)=\"menuOpened.emit()\">\n <div class=\"content-container\">\n <ng-content></ng-content>\n </div>\n</button>\n", styles: ["button{--mat-button-filled-label-text-weight: 600;--mat-button-filled-container-height: 24px;--mat-button-filled-label-text-size: 12px;--mat-button-filled-horizontal-padding: 7px;--mat-button-filled-container-shape: 5px;--mat-filled-button-hover-state-layer-opacity: 0;--mat-button-filled-container-color: var(--color-secondary-10);--mat-button-filled-label-text-color: var(--color-secondary);border:1.5px solid var(--color-secondary);min-width:unset!important}button:disabled{border-color:var(--color-medium-30);--mat-button-filled-disabled-container-color: var(--color-muted-50);--mat-button-filled-disabled-label-text-color: var(--color-medium-50)}button:disabled ::ng-deep ads-icon svg{fill:var(--color-medium-50)!important;stroke:var(--color-medium-50)!important}button:not(:disabled):hover{border-color:var(--color-secondary-hover);--mat-button-filled-container-color: var(--color-secondary-hover);--mat-button-filled-label-text-color: var(--color-white)}button:not(:disabled):hover ::ng-deep ads-icon svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}button:not(:disabled):active,button:not(:disabled):focus{border-color:var(--color-secondary-pressed);--mat-button-filled-container-color: var(--color-secondary-pressed);--mat-button-filled-label-text-color: var(--color-white)}button:not(:disabled):active ::ng-deep ads-icon svg,button:not(:disabled):focus ::ng-deep ads-icon svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}::ng-deep .mat-mdc-button-persistent-ripple:before{opacity:0!important}:host::ng-deep .mdc-button__label{white-space:nowrap}.content-container{display:flex;gap:8px;align-items:center}.full-width{width:100%!important}\n"] }]
|
|
6369
|
+
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], matMenuTriggerFor: [{ type: i0.Input, args: [{ isSignal: true, alias: "matMenuTriggerFor", required: false }] }], menuOpened: [{ type: i0.Output, args: ["menuOpened"] }] } });
|
|
6370
|
+
|
|
6306
6371
|
ModuleRegistry.registerModules([AllCommunityModule]);
|
|
6307
6372
|
provideGlobalGridOptions({ theme: 'legacy' });
|
|
6308
6373
|
// Define an Enum for breakpoints
|
|
@@ -6316,8 +6381,10 @@ var TableBreakpoint;
|
|
|
6316
6381
|
})(TableBreakpoint || (TableBreakpoint = {}));
|
|
6317
6382
|
class AdsTableComponent {
|
|
6318
6383
|
/** @ignore */
|
|
6319
|
-
constructor(elementRef) {
|
|
6384
|
+
constructor(elementRef, registry, cdr) {
|
|
6320
6385
|
this.elementRef = elementRef;
|
|
6386
|
+
this.registry = registry;
|
|
6387
|
+
this.cdr = cdr;
|
|
6321
6388
|
/** The grid's width */
|
|
6322
6389
|
this.width = '100%';
|
|
6323
6390
|
/** The grid's height */
|
|
@@ -6334,9 +6401,26 @@ class AdsTableComponent {
|
|
|
6334
6401
|
[TableBreakpoint.LG]: [],
|
|
6335
6402
|
[TableBreakpoint.XL]: [],
|
|
6336
6403
|
};
|
|
6404
|
+
/** Show/hide the header with column visibility button */
|
|
6405
|
+
this.showHeaderActions = false;
|
|
6406
|
+
/** Event emitted when all filters are cleared */
|
|
6407
|
+
this.filtersCleared = new EventEmitter();
|
|
6337
6408
|
/** @ignore */
|
|
6338
6409
|
this.tableColumnDefs = signal([], ...(ngDevMode ? [{ debugName: "tableColumnDefs" }] : []));
|
|
6410
|
+
/** @ignore */
|
|
6411
|
+
this.columnVisibilityList = signal([], ...(ngDevMode ? [{ debugName: "columnVisibilityList" }] : []));
|
|
6412
|
+
/** @ignore */
|
|
6413
|
+
this.destroy$ = new Subject();
|
|
6414
|
+
/** @ignore */
|
|
6415
|
+
this.truncationStates = new Map();
|
|
6416
|
+
/** @ignore */
|
|
6417
|
+
this.currentSortField = null;
|
|
6418
|
+
/** @ignore */
|
|
6419
|
+
this.currentSortDirection = null;
|
|
6420
|
+
/** @ignore */
|
|
6421
|
+
this.filteredColumns = [];
|
|
6339
6422
|
this.themeQuartz = themeQuartz;
|
|
6423
|
+
this.registry.register([adsIconFilter, adsIconVisibilityEyeNone, adsIconArrowUpAndDown, adsIconCross]);
|
|
6340
6424
|
}
|
|
6341
6425
|
/** @ignore */
|
|
6342
6426
|
getBreakpoint(width) {
|
|
@@ -6371,6 +6455,211 @@ class AdsTableComponent {
|
|
|
6371
6455
|
});
|
|
6372
6456
|
this.resizeObserver.observe(tableElement);
|
|
6373
6457
|
}
|
|
6458
|
+
// Initialize column visibility list
|
|
6459
|
+
this.initializeColumnVisibility();
|
|
6460
|
+
}
|
|
6461
|
+
/** @ignore */
|
|
6462
|
+
initializeColumnVisibility() {
|
|
6463
|
+
// Unsubscribe from previous subscriptions
|
|
6464
|
+
this.unsubscribeFromControls();
|
|
6465
|
+
// Preserve existing visibility states
|
|
6466
|
+
const existingVisibilityStates = new Map();
|
|
6467
|
+
const currentList = this.columnVisibilityList();
|
|
6468
|
+
currentList.forEach(item => {
|
|
6469
|
+
existingVisibilityStates.set(item.field, item.control.value);
|
|
6470
|
+
});
|
|
6471
|
+
const columns = this.getActiveColumnDefs();
|
|
6472
|
+
const visibilityList = columns.map(col => {
|
|
6473
|
+
const fieldName = col.field || '';
|
|
6474
|
+
// Use existing state if available, otherwise use column definition
|
|
6475
|
+
const isVisible = existingVisibilityStates.has(fieldName)
|
|
6476
|
+
? existingVisibilityStates.get(fieldName)
|
|
6477
|
+
: !col.hide;
|
|
6478
|
+
const control = new FormControl(isVisible, { nonNullable: true });
|
|
6479
|
+
// Subscribe to value changes
|
|
6480
|
+
control.valueChanges
|
|
6481
|
+
.pipe(takeUntil$1(this.destroy$))
|
|
6482
|
+
.subscribe(() => {
|
|
6483
|
+
this.updateGridColumns();
|
|
6484
|
+
});
|
|
6485
|
+
return {
|
|
6486
|
+
field: fieldName,
|
|
6487
|
+
headerName: col.headerName || col.field || '',
|
|
6488
|
+
control: control
|
|
6489
|
+
};
|
|
6490
|
+
});
|
|
6491
|
+
this.columnVisibilityList.set(visibilityList);
|
|
6492
|
+
}
|
|
6493
|
+
/** @ignore */
|
|
6494
|
+
unsubscribeFromControls() {
|
|
6495
|
+
// This will trigger takeUntil for all subscriptions
|
|
6496
|
+
this.destroy$.next();
|
|
6497
|
+
}
|
|
6498
|
+
/** @ignore */
|
|
6499
|
+
getActiveColumnDefs() {
|
|
6500
|
+
if (this.columnDefs?.length) {
|
|
6501
|
+
return this.columnDefs;
|
|
6502
|
+
}
|
|
6503
|
+
const currentBreakpoint = this.currentBreakpoint || this.getBreakpoint(this.elementRef.nativeElement.querySelector('ag-grid-angular')?.clientWidth || 1000);
|
|
6504
|
+
let columns = this.columnDefsByBreakpoint[currentBreakpoint] ?? [];
|
|
6505
|
+
if (columns.length === 0) {
|
|
6506
|
+
columns = this.getFallbackColumnDefs(currentBreakpoint);
|
|
6507
|
+
}
|
|
6508
|
+
return columns;
|
|
6509
|
+
}
|
|
6510
|
+
/** @ignore */
|
|
6511
|
+
openColumnVisibilityMenu() {
|
|
6512
|
+
// Simple approach: update truncation states after a short delay when menu opens
|
|
6513
|
+
setTimeout(() => {
|
|
6514
|
+
this.updateTruncationStates();
|
|
6515
|
+
}, 150);
|
|
6516
|
+
}
|
|
6517
|
+
/** @ignore */
|
|
6518
|
+
hideAllColumns() {
|
|
6519
|
+
const currentList = this.columnVisibilityList();
|
|
6520
|
+
currentList.forEach(item => {
|
|
6521
|
+
item.control.setValue(false);
|
|
6522
|
+
});
|
|
6523
|
+
}
|
|
6524
|
+
/** @ignore */
|
|
6525
|
+
showAllColumns() {
|
|
6526
|
+
const currentList = this.columnVisibilityList();
|
|
6527
|
+
currentList.forEach(item => {
|
|
6528
|
+
item.control.setValue(true);
|
|
6529
|
+
});
|
|
6530
|
+
}
|
|
6531
|
+
/** @ignore */
|
|
6532
|
+
get allColumnsVisible() {
|
|
6533
|
+
return this.columnVisibilityList().every(item => item.control.value);
|
|
6534
|
+
}
|
|
6535
|
+
/** @ignore */
|
|
6536
|
+
get allColumnsHidden() {
|
|
6537
|
+
return this.columnVisibilityList().every(item => !item.control.value);
|
|
6538
|
+
}
|
|
6539
|
+
/** @ignore */
|
|
6540
|
+
get hiddenColumnsCount() {
|
|
6541
|
+
return this.columnVisibilityList().filter(item => !item.control.value).length;
|
|
6542
|
+
}
|
|
6543
|
+
/** @ignore */
|
|
6544
|
+
get hideColumnButtonLabel() {
|
|
6545
|
+
const hiddenCount = this.hiddenColumnsCount;
|
|
6546
|
+
if (hiddenCount === 0) {
|
|
6547
|
+
return 'Hide Column';
|
|
6548
|
+
}
|
|
6549
|
+
else if (hiddenCount === 1) {
|
|
6550
|
+
return '1 Hidden Column';
|
|
6551
|
+
}
|
|
6552
|
+
else {
|
|
6553
|
+
return `${hiddenCount} Hidden Columns`;
|
|
6554
|
+
}
|
|
6555
|
+
}
|
|
6556
|
+
/** @ignore */
|
|
6557
|
+
get sortButtonLabel() {
|
|
6558
|
+
if (this.isSortedTable) {
|
|
6559
|
+
const column = this.getActiveColumnDefs().find(col => col.field === this.currentSortField);
|
|
6560
|
+
const columnName = column?.headerName || column?.field || this.currentSortField;
|
|
6561
|
+
return `Sorted by ${columnName}`;
|
|
6562
|
+
}
|
|
6563
|
+
return 'Sort';
|
|
6564
|
+
}
|
|
6565
|
+
/** @ignore */
|
|
6566
|
+
get filterButtonLabel() {
|
|
6567
|
+
if (this.filteredColumns.length === 0) {
|
|
6568
|
+
return 'Filter';
|
|
6569
|
+
}
|
|
6570
|
+
else if (this.filteredColumns.length === 1) {
|
|
6571
|
+
const column = this.getActiveColumnDefs().find(col => col.field === this.filteredColumns[0]);
|
|
6572
|
+
const columnName = column?.headerName || column?.field || this.filteredColumns[0];
|
|
6573
|
+
return `Filtered by ${columnName}`;
|
|
6574
|
+
}
|
|
6575
|
+
else {
|
|
6576
|
+
const columnNames = this.filteredColumns.map(fieldName => {
|
|
6577
|
+
const column = this.getActiveColumnDefs().find(col => col.field === fieldName);
|
|
6578
|
+
return column?.headerName || column?.field || fieldName;
|
|
6579
|
+
});
|
|
6580
|
+
return `Filtered by ${columnNames.join(', ')}`;
|
|
6581
|
+
}
|
|
6582
|
+
}
|
|
6583
|
+
/** @ignore */
|
|
6584
|
+
get isSortedTable() {
|
|
6585
|
+
return !!this.currentSortField && !!this.currentSortDirection;
|
|
6586
|
+
}
|
|
6587
|
+
/** @ignore */
|
|
6588
|
+
get isFilteredTable() {
|
|
6589
|
+
return this.filteredColumns.length > 0;
|
|
6590
|
+
}
|
|
6591
|
+
/** @ignore */
|
|
6592
|
+
updateSortingState() {
|
|
6593
|
+
if (this.gridApi) {
|
|
6594
|
+
const sortModel = this.gridApi.getColumnState();
|
|
6595
|
+
const sortedColumn = sortModel.find(col => col.sort !== null);
|
|
6596
|
+
if (sortedColumn && sortedColumn.sort) {
|
|
6597
|
+
this.currentSortField = sortedColumn.colId;
|
|
6598
|
+
this.currentSortDirection = sortedColumn.sort;
|
|
6599
|
+
}
|
|
6600
|
+
else {
|
|
6601
|
+
this.currentSortField = null;
|
|
6602
|
+
this.currentSortDirection = null;
|
|
6603
|
+
}
|
|
6604
|
+
}
|
|
6605
|
+
}
|
|
6606
|
+
/** @ignore */
|
|
6607
|
+
updateFilteringState() {
|
|
6608
|
+
if (this.gridApi) {
|
|
6609
|
+
const filterModel = this.gridApi.getFilterModel();
|
|
6610
|
+
this.filteredColumns = Object.keys(filterModel);
|
|
6611
|
+
}
|
|
6612
|
+
}
|
|
6613
|
+
/** @ignore */
|
|
6614
|
+
onSortChanged() {
|
|
6615
|
+
this.updateSortingState();
|
|
6616
|
+
}
|
|
6617
|
+
/** @ignore */
|
|
6618
|
+
onFilterChanged() {
|
|
6619
|
+
this.updateFilteringState();
|
|
6620
|
+
}
|
|
6621
|
+
/** @ignore */
|
|
6622
|
+
sortChanged($event) {
|
|
6623
|
+
return this.gridOptions?.onSortChanged ? this.gridOptions.onSortChanged($event) : this.onSortChanged();
|
|
6624
|
+
}
|
|
6625
|
+
/** @ignore */
|
|
6626
|
+
filterChanged($event) {
|
|
6627
|
+
return this.gridOptions?.onFilterChanged ? this.gridOptions.onFilterChanged($event) : this.onFilterChanged();
|
|
6628
|
+
}
|
|
6629
|
+
/** @ignore */
|
|
6630
|
+
clearAllFilters() {
|
|
6631
|
+
if (this.gridApi) {
|
|
6632
|
+
this.gridApi.setFilterModel(null);
|
|
6633
|
+
this.updateFilteringState();
|
|
6634
|
+
// Emit event to notify header template that filters were cleared
|
|
6635
|
+
this.filtersCleared.emit();
|
|
6636
|
+
}
|
|
6637
|
+
}
|
|
6638
|
+
/** @ignore */
|
|
6639
|
+
clearAllSorting() {
|
|
6640
|
+
if (this.gridApi) {
|
|
6641
|
+
this.gridApi.applyColumnState({
|
|
6642
|
+
defaultState: { sort: null }
|
|
6643
|
+
});
|
|
6644
|
+
this.updateSortingState();
|
|
6645
|
+
}
|
|
6646
|
+
}
|
|
6647
|
+
/** @ignore */
|
|
6648
|
+
updateGridColumns() {
|
|
6649
|
+
const visibilityMap = new Map();
|
|
6650
|
+
this.columnVisibilityList().forEach(item => {
|
|
6651
|
+
visibilityMap.set(item.field, item.control.value);
|
|
6652
|
+
});
|
|
6653
|
+
const currentColumns = this.getActiveColumnDefs();
|
|
6654
|
+
const updatedColumns = currentColumns.map(col => ({
|
|
6655
|
+
...col,
|
|
6656
|
+
hide: !visibilityMap.get(col.field || '')
|
|
6657
|
+
}));
|
|
6658
|
+
this.tableColumnDefs.set(updatedColumns);
|
|
6659
|
+
// Fit columns to grid width after visibility changes
|
|
6660
|
+
setTimeout(() => {
|
|
6661
|
+
this.gridApi?.sizeColumnsToFit();
|
|
6662
|
+
}, 0);
|
|
6374
6663
|
}
|
|
6375
6664
|
/** @ignore */
|
|
6376
6665
|
onGridReady(params) {
|
|
@@ -6387,18 +6676,16 @@ class AdsTableComponent {
|
|
|
6387
6676
|
/** @ignore */
|
|
6388
6677
|
getAgGridIcons() {
|
|
6389
6678
|
const icons = {
|
|
6390
|
-
sortAscending: '<svg width="
|
|
6391
|
-
'<path d="
|
|
6679
|
+
sortAscending: '<svg xmlns="http://www.w3.org/2000/svg" width="7" height="13" viewBox="0 0 7 13" fill="none">\n' +
|
|
6680
|
+
' <path d="M3.5 2.29227L5.12266 4.70574L1.87734 4.70574L3.5 2.29227Z" stroke-width="2"/>\n' +
|
|
6392
6681
|
'</svg>',
|
|
6393
|
-
sortDescending: '<svg width="
|
|
6394
|
-
'<path d="
|
|
6682
|
+
sortDescending: '<svg xmlns="http://www.w3.org/2000/svg" width="7" height="13" viewBox="0 0 7 13" fill="none">\n' +
|
|
6683
|
+
' <path d="M3.5 10.5738L1.87734 8.16029L5.12266 8.16029L3.5 10.5738Z" stroke-width="2"/>\n' +
|
|
6684
|
+
'</svg>',
|
|
6685
|
+
sortUnSort: '<svg xmlns="http://www.w3.org/2000/svg" width="7" height="13" viewBox="0 0 7 13" fill="none">\n' +
|
|
6686
|
+
' <path d="M3.5 2.29227L5.12266 4.70574L1.87734 4.70574L3.5 2.29227Z" stroke-width="2"/>\n' +
|
|
6687
|
+
' <path d="M3.5 10.5738L1.87734 8.16029L5.12266 8.16029L3.5 10.5738Z" stroke-width="2"/>\n' +
|
|
6395
6688
|
'</svg>',
|
|
6396
|
-
sortUnSort: '<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">\n' +
|
|
6397
|
-
' <!-- Up Arrow (left side) -->\n' +
|
|
6398
|
-
' <path d="M2.88672 0L0 5L5.77347 5L2.88672 0ZM2.88672 4.5L2.38672 4.5L2.38672 12L2.88672 12L3.38672 12L3.38672 4.5L2.88672 4.5Z" />\n' +
|
|
6399
|
-
' <!-- Down Arrow (right side, shifted by 6 units) -->\n' +
|
|
6400
|
-
' <path d="M2.88672 12L5.77347 7L0 7L2.88672 12ZM2.88672 0L2.38672 0L2.38672 7.5L2.88672 7.5L3.38672 7.5L3.38672 0L2.88672 0Z" transform="translate(6,0)"/>\n' +
|
|
6401
|
-
'</svg>\n',
|
|
6402
6689
|
filter: '<svg xmlns="http://www.w3.org/2000/svg" width="13" height="11" viewBox="0 0 13 11">\n' +
|
|
6403
6690
|
' <path d="M8.45044 9.03931V10.4504H4.14966V9.03931H8.45044ZM10.4504 4.59497V6.00513H2.14966V4.59497H10.4504ZM12.4504 0.149658V1.56079H0.149658V0.149658H12.4504Z" stroke-width="0.3"/>\n' +
|
|
6404
6691
|
'</svg>\n',
|
|
@@ -6424,6 +6711,7 @@ class AdsTableComponent {
|
|
|
6424
6711
|
// If columnDefs is provided, use it and ignore breakpoints
|
|
6425
6712
|
if (this.columnDefs?.length) {
|
|
6426
6713
|
this.tableColumnDefs.set(this.columnDefs);
|
|
6714
|
+
this.initializeColumnVisibility();
|
|
6427
6715
|
return;
|
|
6428
6716
|
}
|
|
6429
6717
|
if (newBreakpoint !== this.currentBreakpoint) {
|
|
@@ -6435,6 +6723,7 @@ class AdsTableComponent {
|
|
|
6435
6723
|
columnsToSet = this.getFallbackColumnDefs(newBreakpoint);
|
|
6436
6724
|
}
|
|
6437
6725
|
this.tableColumnDefs.set(columnsToSet);
|
|
6726
|
+
this.initializeColumnVisibility();
|
|
6438
6727
|
}
|
|
6439
6728
|
}
|
|
6440
6729
|
/** @ignore */
|
|
@@ -6455,20 +6744,56 @@ class AdsTableComponent {
|
|
|
6455
6744
|
return []; // Return empty if no suitable columnDefs found
|
|
6456
6745
|
}
|
|
6457
6746
|
/** @ignore */
|
|
6747
|
+
updateTruncationStates() {
|
|
6748
|
+
// Clear previous states
|
|
6749
|
+
this.truncationStates.clear();
|
|
6750
|
+
// Search for menu overlay in document body (Material creates overlays there)
|
|
6751
|
+
const overlayPanes = document.querySelectorAll('.cdk-overlay-pane');
|
|
6752
|
+
let menuPanel = null;
|
|
6753
|
+
// Find the overlay that contains our menu content
|
|
6754
|
+
for (let i = 0; i < overlayPanes.length; i++) {
|
|
6755
|
+
const pane = overlayPanes[i];
|
|
6756
|
+
const menuContent = pane.querySelector('.menu-content');
|
|
6757
|
+
if (menuContent) {
|
|
6758
|
+
menuPanel = pane;
|
|
6759
|
+
break;
|
|
6760
|
+
}
|
|
6761
|
+
}
|
|
6762
|
+
if (menuPanel) {
|
|
6763
|
+
const columnNameElements = menuPanel.querySelectorAll('.column-name');
|
|
6764
|
+
columnNameElements.forEach((element, index) => {
|
|
6765
|
+
const htmlElement = element;
|
|
6766
|
+
const column = this.columnVisibilityList()[index];
|
|
6767
|
+
if (column) {
|
|
6768
|
+
const isTruncated = htmlElement.scrollWidth > htmlElement.clientWidth;
|
|
6769
|
+
this.truncationStates.set(column.headerName, isTruncated);
|
|
6770
|
+
}
|
|
6771
|
+
});
|
|
6772
|
+
this.cdr.detectChanges();
|
|
6773
|
+
}
|
|
6774
|
+
}
|
|
6775
|
+
/** @ignore */
|
|
6776
|
+
getTooltipDisabled(headerName) {
|
|
6777
|
+
return !this.truncationStates.get(headerName);
|
|
6778
|
+
}
|
|
6779
|
+
/** @ignore */
|
|
6458
6780
|
ngOnDestroy() {
|
|
6459
6781
|
// Clean up the observer when the component is destroyed
|
|
6460
6782
|
this.resizeObserver?.disconnect();
|
|
6783
|
+
this.unsubscribeFromControls();
|
|
6461
6784
|
}
|
|
6462
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsTableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6463
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.5", type: AdsTableComponent, isStandalone: false, selector: "ads-table", inputs: { width: "width", height: "height", gridOptions: "gridOptions", rowData: "rowData", columnDefs: "columnDefs", icons: "icons", defaultColDef: "defaultColDef", loading: "loading", columnDefsByBreakpoint: "columnDefsByBreakpoint" }, ngImport: i0, template: "<ag-grid-angular\n [ngStyle]=\"{ width: width, height: height }\"\n [icons]=\"getAgGridIcons()\"\n class=\"ag-theme-quartz\"\n [gridOptions]=\"gridOptions\"\n [rowData]=\"rowData\"\n [columnDefs]=\"tableColumnDefs()\"\n [defaultColDef]=\"getDefaultColDef()\"\n (gridReady)=\"gridReady($event)\"\n (firstDataRendered)=\"firstDataRendered($event)\"\n [theme]=\"themeQuartz\"\n [loading]=\"loading\"\n/>\n", styles: [":host::ng-deep ag-grid-angular{--ag-grid-size: 4px;--ag-border-radius: 5px;--ag-font-family: \"Roboto\";--ag-font-size: 16px;--ag-header-foreground-color: var(--color-medium);--ag-header-background-color: var(--color-light-30);--ag-background-color: var(--color-white);--ag-header-height: 45px;--ag-row-height: 45px;--ag-border-color: var(--color-light);--ag-foreground-color: var(--color-medium);--ag-spacing: 4px}:host::ng-deep ag-grid-angular .ag-header-cell-text{font-weight:600;line-height:21px}:host::ng-deep ag-grid-angular .ag-cell:focus,:host::ng-deep ag-grid-angular .ag-cell-focus{outline:none!important;border:none!important;box-shadow:none!important}:host::ng-deep ag-grid-angular .ag-row,:host::ng-deep ag-grid-angular .ag-header,:host::ng-deep ag-grid-angular .ag-advanced-filter-header{border-bottom:none}:host::ng-deep ag-grid-angular .ag-row-even{background-color:var(--color-white)}:host::ng-deep ag-grid-angular .ag-row-odd{background-color:var(--color-light-30)}:host::ng-deep ag-grid-angular .ag-sort-indicator-container{min-width:fit-content}:host::ng-deep ag-grid-angular .ag-sort-indicator-icon>svg{fill:var(--color-medium)}:host::ng-deep ag-grid-angular .ag-header-cell-filter-button>svg{fill:var(--color-medium);stroke:var(--color-medium)}:host::ng-deep ag-grid-angular .ag-theme-quartz{--ag-background-color: var(--color-light-30);--ag-foreground-color: var(--color-black);--ag-input-border-color: var(--color-light);--ag-input-focus-border-color: var(--color-medium);--ag-input-focus-box-shadow: none}:host::ng-deep ag-grid-angular .ag-theme-quartz .ag-input-wrapper input::placeholder{color:var(--color-medium);opacity:1}:host::ng-deep ag-grid-angular .ag-theme-quartz .ag-input-wrapper:before{background-image:none;content:none}:host::ng-deep ag-grid-angular .ag-theme-quartz .ag-input-wrapper input{padding-left:8px!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "hidePaddedHeaderRows", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressGroupChangesColumnVisibility", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "suppressStartEditOnTab", "getFullRowEditValidationErrors", "invalidEditValueMode", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "findSearchValue", "findOptions", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "alwaysPassFilter", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "advancedFilterParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableFilterHandlers", "filterHandlers", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "cellFlashDuration", "cellFadeDuration", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableCellSpan", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "rowDragInsertDelay", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "groupHierarchyConfig", "pinnedTopRowData", "pinnedBottomRowData", "enableRowPinning", "isRowPinnable", "isRowPinned", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "rowNumbers", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "ssrmExpandAllAffectsAllRows", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnsReset", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "bulkEditingStarted", "bulkEditingStopped", "batchEditingStarted", "batchEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "filterUiChanged", "floatingFilterUiChanged", "advancedFilterBuilderVisibleChanged", "findChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "rowResizeStarted", "rowResizeEnded", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "pinnedRowsChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }] }); }
|
|
6785
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsTableComponent, deps: [{ token: i0.ElementRef }, { token: i1.AdsIconRegistry }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6786
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsTableComponent, isStandalone: false, selector: "ads-table", inputs: { width: "width", height: "height", headerTemplate: "headerTemplate", gridOptions: "gridOptions", rowData: "rowData", columnDefs: "columnDefs", icons: "icons", defaultColDef: "defaultColDef", loading: "loading", columnDefsByBreakpoint: "columnDefsByBreakpoint", showHeaderActions: "showHeaderActions" }, outputs: { filtersCleared: "filtersCleared" }, viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<div class=\"ads-table-container\">\n @if (showHeaderActions) {\n <div class=\"table-header\">\n <div class=\"header-template\">\n @if (headerTemplate) {\n <ng-container *ngTemplateOutlet=\"headerTemplate\" />\n }\n </div>\n\n <div class=\"header-actions\">\n <ads-table-button\n id=\"show-hide-columns-button\"\n [matMenuTriggerFor]=\"columnVisibilityMenu\"\n (menuOpened)=\"openColumnVisibilityMenu()\"\n >\n <ads-icon\n name=\"visibility_eye_none\"\n theme=\"secondary\"\n stroke=\"secondary\"\n size=\"xxxs\"\n />\n {{ hideColumnButtonLabel }}\n </ads-table-button>\n\n <ads-table-button\n id=\"filter-button\"\n [disabled]=\"!isFilteredTable\"\n (click)=\"clearAllFilters()\"\n >\n <ads-icon\n name=\"filter\"\n theme=\"secondary\"\n size=\"xxxs\"\n />\n {{ filterButtonLabel }}\n\n @if(isFilteredTable) {\n <ads-icon\n name=\"cross\"\n stroke=\"secondary\"\n size=\"xxxs\"\n />\n }\n </ads-table-button>\n <ads-table-button\n id=\"sort-button\"\n [disabled]=\"!isSortedTable\"\n (click)=\"clearAllSorting()\"\n >\n <ads-icon\n name=\"arrow_up_and_down\"\n theme=\"secondary\"\n size=\"xxxs\"\n />\n {{ sortButtonLabel }}\n @if (isSortedTable) {\n <ads-icon\n name=\"cross\"\n stroke=\"secondary\"\n size=\"xxxs\"\n />\n }\n </ads-table-button>\n </div>\n </div>\n }\n\n <ag-grid-angular\n [ngStyle]=\"{ width: width, height: height }\"\n [icons]=\"getAgGridIcons()\"\n class=\"ag-theme-quartz\"\n [gridOptions]=\"gridOptions\"\n [rowData]=\"rowData\"\n [columnDefs]=\"tableColumnDefs()\"\n [defaultColDef]=\"getDefaultColDef()\"\n (gridReady)=\"gridReady($event)\"\n (firstDataRendered)=\"firstDataRendered($event)\"\n (sortChanged)=\"sortChanged($event)\"\n (filterChanged)=\"filterChanged($event)\"\n [theme]=\"themeQuartz\"\n [loading]=\"loading\"\n />\n</div>\n\n<!-- Column Visibility Menu -->\n<mat-menu #columnVisibilityMenu=\"matMenu\" class=\"column-visibility-menu\">\n <div class=\"menu-content\" (click)=\"$event.stopPropagation()\">\n <div class=\"dropdown-body\">\n @for (column of columnVisibilityList(); track $index) {\n <div class=\"column-row\">\n <span\n class=\"column-name\"\n [matTooltip]=\"column.headerName\"\n [matTooltipDisabled]=\"getTooltipDisabled(column.headerName)\"\n >\n {{ column.headerName }}\n </span>\n <div class=\"column-toggle\">\n <ads-slide-toggle\n [id]=\"'toggle-' + column.field\"\n [control]=\"column.control\"\n [showFooter]=\"false\"\n [customTitles]=\"['Show', 'Hide']\"\n />\n </div>\n </div>\n }\n </div>\n\n <ads-divider />\n\n <div class=\"dropdown-footer\">\n <ads-button\n [fullWidth]=\"true\"\n (click)=\"hideAllColumns()\"\n [disabled]=\"allColumnsHidden\"\n variant=\"tertiary\"\n id='hide-all-button'\n size=\"xs\"\n >\n Hide All\n </ads-button>\n <ads-button\n [fullWidth]=\"true\"\n (click)=\"showAllColumns()\"\n [disabled]=\"allColumnsVisible\"\n variant=\"tertiary\"\n id=\"show-all-button\"\n size=\"xs\"\n >\n Show All\n </ads-button>\n </div>\n </div>\n</mat-menu>\n", styles: [":host::ng-deep ag-grid-angular{--ag-grid-size: 4px;--ag-border-radius: 5px;--ag-font-family: \"Roboto\";--ag-font-size: 16px;--ag-header-foreground-color: var(--color-medium);--ag-header-background-color: var(--color-light-30);--ag-background-color: var(--color-white);--ag-header-height: 45px;--ag-row-height: 45px;--ag-border-color: var(--color-light);--ag-foreground-color: var(--color-medium);--ag-spacing: 4px}:host::ng-deep ag-grid-angular .ag-header-cell-text{font-weight:600;line-height:21px}:host::ng-deep ag-grid-angular .ag-cell:focus,:host::ng-deep ag-grid-angular .ag-cell-focus{outline:none!important;border:none!important;box-shadow:none!important}:host::ng-deep ag-grid-angular .ag-row,:host::ng-deep ag-grid-angular .ag-header,:host::ng-deep ag-grid-angular .ag-advanced-filter-header{border-bottom:none}:host::ng-deep ag-grid-angular .ag-row-even{background-color:var(--color-white)}:host::ng-deep ag-grid-angular .ag-row-odd{background-color:var(--color-light-30)}:host::ng-deep ag-grid-angular .ag-sort-indicator-container{min-width:fit-content}:host::ng-deep ag-grid-angular .ag-sort-indicator-icon>svg{fill:var(--color-medium);stroke:var(--color-medium)}:host::ng-deep ag-grid-angular .ag-header-cell-filter-button>svg{fill:var(--color-medium);stroke:var(--color-medium)}:host::ng-deep ag-grid-angular .ag-theme-quartz{--ag-background-color: var(--color-light-30);--ag-foreground-color: var(--color-black);--ag-input-border-color: var(--color-light);--ag-input-focus-border-color: var(--color-medium);--ag-input-focus-box-shadow: none}:host::ng-deep ag-grid-angular .ag-theme-quartz .ag-input-wrapper input::placeholder{color:var(--color-medium);opacity:1}:host::ng-deep ag-grid-angular .ag-theme-quartz .ag-input-wrapper:before{background-image:none;content:none}:host::ng-deep ag-grid-angular .ag-theme-quartz .ag-input-wrapper input{padding-left:8px!important}:host::ng-deep .ads-table-container{display:flex;flex-direction:column;width:100%;height:100%}:host::ng-deep .ads-table-container .table-header{display:flex;justify-content:space-between;align-items:center;padding:16px;background-color:var(--color-white)}:host::ng-deep .ads-table-container .table-header .header-actions{display:flex;gap:8px;flex-wrap:wrap}::ng-deep .column-visibility-menu{width:234px;max-width:498px;border-radius:5px;box-shadow:0 4px 12px #00000026;border:1px solid var(--color-light)}::ng-deep .column-visibility-menu .mat-mdc-menu-content{padding:0}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content{background-color:var(--color-white)}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body{overflow-y:auto}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body .column-row{display:flex;justify-content:space-between;align-items:center;padding:0 12px;height:45px;gap:12px}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body .column-row .column-name{font-size:16px;font-weight:400;color:var(--color-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;flex:1}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body .column-row .column-toggle{display:flex;justify-content:flex-end}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body .column-row .column-toggle ::ng-deep ads-slide-toggle .ads-toggle{height:45px!important}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-footer{display:flex;justify-content:space-between;gap:12px;padding:12px}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-footer ::ng-deep ads-button{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i3$4.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "hidePaddedHeaderRows", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressGroupChangesColumnVisibility", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "suppressStartEditOnTab", "getFullRowEditValidationErrors", "invalidEditValueMode", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "findSearchValue", "findOptions", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "alwaysPassFilter", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "advancedFilterParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableFilterHandlers", "filterHandlers", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "cellFlashDuration", "cellFadeDuration", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableCellSpan", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "rowDragInsertDelay", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "groupHierarchyConfig", "pinnedTopRowData", "pinnedBottomRowData", "enableRowPinning", "isRowPinnable", "isRowPinned", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "rowNumbers", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "ssrmExpandAllAffectsAllRows", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnsReset", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "bulkEditingStarted", "bulkEditingStopped", "batchEditingStarted", "batchEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "filterUiChanged", "floatingFilterUiChanged", "advancedFilterBuilderVisibleChanged", "findChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "rowResizeStarted", "rowResizeEnded", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "pinnedRowsChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "component", type: AdsSlideToggleComponent, selector: "ads-slide-toggle", inputs: ["enableYesOrNo", "customTitles", "control", "label", "id", "width"] }, { kind: "component", type: AdsButtonComponent, selector: "ads-button", inputs: ["id", "variant", "disabled", "size", "type", "fullWidth"] }, { kind: "component", type: AdsTableButtonComponent, selector: "ads-table-button", inputs: ["id", "disabled", "fullWidth", "matMenuTriggerFor"], outputs: ["menuOpened"] }, { kind: "component", type: DividerComponent, selector: "ads-divider", inputs: ["margin", "color"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$3.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: i4$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
|
|
6464
6787
|
}
|
|
6465
6788
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsTableComponent, decorators: [{
|
|
6466
6789
|
type: Component,
|
|
6467
|
-
args: [{ selector: 'ads-table', standalone: false, template: "<ag-grid-angular\n
|
|
6468
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { width: [{
|
|
6790
|
+
args: [{ selector: 'ads-table', standalone: false, template: "<div class=\"ads-table-container\">\n @if (showHeaderActions) {\n <div class=\"table-header\">\n <div class=\"header-template\">\n @if (headerTemplate) {\n <ng-container *ngTemplateOutlet=\"headerTemplate\" />\n }\n </div>\n\n <div class=\"header-actions\">\n <ads-table-button\n id=\"show-hide-columns-button\"\n [matMenuTriggerFor]=\"columnVisibilityMenu\"\n (menuOpened)=\"openColumnVisibilityMenu()\"\n >\n <ads-icon\n name=\"visibility_eye_none\"\n theme=\"secondary\"\n stroke=\"secondary\"\n size=\"xxxs\"\n />\n {{ hideColumnButtonLabel }}\n </ads-table-button>\n\n <ads-table-button\n id=\"filter-button\"\n [disabled]=\"!isFilteredTable\"\n (click)=\"clearAllFilters()\"\n >\n <ads-icon\n name=\"filter\"\n theme=\"secondary\"\n size=\"xxxs\"\n />\n {{ filterButtonLabel }}\n\n @if(isFilteredTable) {\n <ads-icon\n name=\"cross\"\n stroke=\"secondary\"\n size=\"xxxs\"\n />\n }\n </ads-table-button>\n <ads-table-button\n id=\"sort-button\"\n [disabled]=\"!isSortedTable\"\n (click)=\"clearAllSorting()\"\n >\n <ads-icon\n name=\"arrow_up_and_down\"\n theme=\"secondary\"\n size=\"xxxs\"\n />\n {{ sortButtonLabel }}\n @if (isSortedTable) {\n <ads-icon\n name=\"cross\"\n stroke=\"secondary\"\n size=\"xxxs\"\n />\n }\n </ads-table-button>\n </div>\n </div>\n }\n\n <ag-grid-angular\n [ngStyle]=\"{ width: width, height: height }\"\n [icons]=\"getAgGridIcons()\"\n class=\"ag-theme-quartz\"\n [gridOptions]=\"gridOptions\"\n [rowData]=\"rowData\"\n [columnDefs]=\"tableColumnDefs()\"\n [defaultColDef]=\"getDefaultColDef()\"\n (gridReady)=\"gridReady($event)\"\n (firstDataRendered)=\"firstDataRendered($event)\"\n (sortChanged)=\"sortChanged($event)\"\n (filterChanged)=\"filterChanged($event)\"\n [theme]=\"themeQuartz\"\n [loading]=\"loading\"\n />\n</div>\n\n<!-- Column Visibility Menu -->\n<mat-menu #columnVisibilityMenu=\"matMenu\" class=\"column-visibility-menu\">\n <div class=\"menu-content\" (click)=\"$event.stopPropagation()\">\n <div class=\"dropdown-body\">\n @for (column of columnVisibilityList(); track $index) {\n <div class=\"column-row\">\n <span\n class=\"column-name\"\n [matTooltip]=\"column.headerName\"\n [matTooltipDisabled]=\"getTooltipDisabled(column.headerName)\"\n >\n {{ column.headerName }}\n </span>\n <div class=\"column-toggle\">\n <ads-slide-toggle\n [id]=\"'toggle-' + column.field\"\n [control]=\"column.control\"\n [showFooter]=\"false\"\n [customTitles]=\"['Show', 'Hide']\"\n />\n </div>\n </div>\n }\n </div>\n\n <ads-divider />\n\n <div class=\"dropdown-footer\">\n <ads-button\n [fullWidth]=\"true\"\n (click)=\"hideAllColumns()\"\n [disabled]=\"allColumnsHidden\"\n variant=\"tertiary\"\n id='hide-all-button'\n size=\"xs\"\n >\n Hide All\n </ads-button>\n <ads-button\n [fullWidth]=\"true\"\n (click)=\"showAllColumns()\"\n [disabled]=\"allColumnsVisible\"\n variant=\"tertiary\"\n id=\"show-all-button\"\n size=\"xs\"\n >\n Show All\n </ads-button>\n </div>\n </div>\n</mat-menu>\n", styles: [":host::ng-deep ag-grid-angular{--ag-grid-size: 4px;--ag-border-radius: 5px;--ag-font-family: \"Roboto\";--ag-font-size: 16px;--ag-header-foreground-color: var(--color-medium);--ag-header-background-color: var(--color-light-30);--ag-background-color: var(--color-white);--ag-header-height: 45px;--ag-row-height: 45px;--ag-border-color: var(--color-light);--ag-foreground-color: var(--color-medium);--ag-spacing: 4px}:host::ng-deep ag-grid-angular .ag-header-cell-text{font-weight:600;line-height:21px}:host::ng-deep ag-grid-angular .ag-cell:focus,:host::ng-deep ag-grid-angular .ag-cell-focus{outline:none!important;border:none!important;box-shadow:none!important}:host::ng-deep ag-grid-angular .ag-row,:host::ng-deep ag-grid-angular .ag-header,:host::ng-deep ag-grid-angular .ag-advanced-filter-header{border-bottom:none}:host::ng-deep ag-grid-angular .ag-row-even{background-color:var(--color-white)}:host::ng-deep ag-grid-angular .ag-row-odd{background-color:var(--color-light-30)}:host::ng-deep ag-grid-angular .ag-sort-indicator-container{min-width:fit-content}:host::ng-deep ag-grid-angular .ag-sort-indicator-icon>svg{fill:var(--color-medium);stroke:var(--color-medium)}:host::ng-deep ag-grid-angular .ag-header-cell-filter-button>svg{fill:var(--color-medium);stroke:var(--color-medium)}:host::ng-deep ag-grid-angular .ag-theme-quartz{--ag-background-color: var(--color-light-30);--ag-foreground-color: var(--color-black);--ag-input-border-color: var(--color-light);--ag-input-focus-border-color: var(--color-medium);--ag-input-focus-box-shadow: none}:host::ng-deep ag-grid-angular .ag-theme-quartz .ag-input-wrapper input::placeholder{color:var(--color-medium);opacity:1}:host::ng-deep ag-grid-angular .ag-theme-quartz .ag-input-wrapper:before{background-image:none;content:none}:host::ng-deep ag-grid-angular .ag-theme-quartz .ag-input-wrapper input{padding-left:8px!important}:host::ng-deep .ads-table-container{display:flex;flex-direction:column;width:100%;height:100%}:host::ng-deep .ads-table-container .table-header{display:flex;justify-content:space-between;align-items:center;padding:16px;background-color:var(--color-white)}:host::ng-deep .ads-table-container .table-header .header-actions{display:flex;gap:8px;flex-wrap:wrap}::ng-deep .column-visibility-menu{width:234px;max-width:498px;border-radius:5px;box-shadow:0 4px 12px #00000026;border:1px solid var(--color-light)}::ng-deep .column-visibility-menu .mat-mdc-menu-content{padding:0}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content{background-color:var(--color-white)}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body{overflow-y:auto}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body .column-row{display:flex;justify-content:space-between;align-items:center;padding:0 12px;height:45px;gap:12px}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body .column-row .column-name{font-size:16px;font-weight:400;color:var(--color-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;flex:1}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body .column-row .column-toggle{display:flex;justify-content:flex-end}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body .column-row .column-toggle ::ng-deep ads-slide-toggle .ads-toggle{height:45px!important}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-footer{display:flex;justify-content:space-between;gap:12px;padding:12px}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-footer ::ng-deep ads-button{flex:1}\n"] }]
|
|
6791
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.AdsIconRegistry }, { type: i0.ChangeDetectorRef }], propDecorators: { width: [{
|
|
6469
6792
|
type: Input
|
|
6470
6793
|
}], height: [{
|
|
6471
6794
|
type: Input
|
|
6795
|
+
}], headerTemplate: [{
|
|
6796
|
+
type: Input
|
|
6472
6797
|
}], gridOptions: [{
|
|
6473
6798
|
type: Input
|
|
6474
6799
|
}], rowData: [{
|
|
@@ -6483,18 +6808,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImpor
|
|
|
6483
6808
|
type: Input
|
|
6484
6809
|
}], columnDefsByBreakpoint: [{
|
|
6485
6810
|
type: Input
|
|
6811
|
+
}], showHeaderActions: [{
|
|
6812
|
+
type: Input
|
|
6813
|
+
}], filtersCleared: [{
|
|
6814
|
+
type: Output
|
|
6815
|
+
}], menuTrigger: [{
|
|
6816
|
+
type: ViewChild,
|
|
6817
|
+
args: [MatMenuTrigger]
|
|
6486
6818
|
}] } });
|
|
6487
6819
|
|
|
6820
|
+
class AdsTableButtonModule {
|
|
6821
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsTableButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
6822
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: AdsTableButtonModule, declarations: [AdsTableButtonComponent], imports: [CommonModule, MatButtonModule, MatMenuModule], exports: [AdsTableButtonComponent] }); }
|
|
6823
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsTableButtonModule, imports: [CommonModule, MatButtonModule, MatMenuModule] }); }
|
|
6824
|
+
}
|
|
6825
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsTableButtonModule, decorators: [{
|
|
6826
|
+
type: NgModule,
|
|
6827
|
+
args: [{
|
|
6828
|
+
declarations: [AdsTableButtonComponent],
|
|
6829
|
+
exports: [AdsTableButtonComponent],
|
|
6830
|
+
imports: [CommonModule, MatButtonModule, MatMenuModule],
|
|
6831
|
+
}]
|
|
6832
|
+
}] });
|
|
6833
|
+
|
|
6488
6834
|
class AdsTableModule {
|
|
6489
6835
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
6490
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: AdsTableModule, declarations: [AdsTableComponent], imports: [CommonModule,
|
|
6491
|
-
|
|
6836
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: AdsTableModule, declarations: [AdsTableComponent], imports: [CommonModule,
|
|
6837
|
+
AdsIconModule,
|
|
6838
|
+
AgGridAngular,
|
|
6839
|
+
MatDialogModule,
|
|
6840
|
+
AdsSlideToggle,
|
|
6841
|
+
AdsButtonModule,
|
|
6842
|
+
AdsTableButtonModule,
|
|
6843
|
+
AdsDividerModule,
|
|
6844
|
+
MatTooltip,
|
|
6845
|
+
MatMenuModule], exports: [AdsTableComponent] }); }
|
|
6846
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsTableModule, imports: [CommonModule,
|
|
6847
|
+
AdsIconModule,
|
|
6848
|
+
AgGridAngular,
|
|
6849
|
+
MatDialogModule,
|
|
6850
|
+
AdsSlideToggle,
|
|
6851
|
+
AdsButtonModule,
|
|
6852
|
+
AdsTableButtonModule,
|
|
6853
|
+
AdsDividerModule,
|
|
6854
|
+
MatMenuModule] }); }
|
|
6492
6855
|
}
|
|
6493
6856
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsTableModule, decorators: [{
|
|
6494
6857
|
type: NgModule,
|
|
6495
6858
|
args: [{
|
|
6496
6859
|
declarations: [AdsTableComponent],
|
|
6497
|
-
imports: [
|
|
6860
|
+
imports: [
|
|
6861
|
+
CommonModule,
|
|
6862
|
+
AdsIconModule,
|
|
6863
|
+
AgGridAngular,
|
|
6864
|
+
MatDialogModule,
|
|
6865
|
+
AdsSlideToggle,
|
|
6866
|
+
AdsButtonModule,
|
|
6867
|
+
AdsTableButtonModule,
|
|
6868
|
+
AdsDividerModule,
|
|
6869
|
+
MatTooltip,
|
|
6870
|
+
MatMenuModule,
|
|
6871
|
+
],
|
|
6498
6872
|
exports: [AdsTableComponent],
|
|
6499
6873
|
}]
|
|
6500
6874
|
}] });
|
|
@@ -6667,7 +7041,7 @@ class AdsSideNavBarComponent extends AbstractSideNavBarComponent {
|
|
|
6667
7041
|
this.registry.register([adsIconSearch]);
|
|
6668
7042
|
}
|
|
6669
7043
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsSideNavBarComponent, deps: [{ token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6670
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsSideNavBarComponent, isStandalone: false, selector: "ads-side-nav-bar", inputs: { searchTemplate: { classPropertyName: "searchTemplate", publicName: "searchTemplate", isSignal: true, isRequired: false, transformFunction: null }, extraDataTemplate: { classPropertyName: "extraDataTemplate", publicName: "extraDataTemplate", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "splitter", first: true, predicate: ["splitter"], descendants: true }, { propertyName: "sideNavArea", first: true, predicate: ["sideNavArea"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<as-split\n #splitter\n [useTransition]=\"true\"\n unit=\"pixel\"\n [gutterSize]=\"10\"\n (gutterDblClick)=\"expandSidebar()\"\n [gutterDblClickDuration]=\"500\"\n (dragEnd)=\"dragEnd($event)\"\n>\n <as-split-area [size]=\"sidebarSize()\" [minSize]=\"50\" [maxSize]=\"maxExpandedWidth()\" #sideNavArea>\n <div class=\"left-side-content-container\">\n <div class=\"logo-container\">\n <a [routerLink]=\"'/'\">\n <ads-primary-logo [mobileWidth]=\"70\" [isCollapsed]=\"true\" class=\"show-on-collapsed\" />\n <ads-primary-logo [mobileWidth]=\"70\" [isCollapsed]=\"false\" class=\"hide-on-collapsed\" />\n </a>\n </div>\n\n <div class=\"nav-items-wrapper\">\n <!-- Regular navigation items -->\n <div class=\"nav-items-container\">\n @for (item of regularNavItems(); track $index) {\n @if (item.click) {\n <a\n class=\"ads-nav-link {{item.class}}\"\n (click)=\"item.click()\"\n >\n <div class=\"ads-nav-item-container\">\n @if (!!item.icon) {\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n }\n <span class=\"hide-on-collapsed\">{{ item.label }}</span>\n </div>\n </a>\n } @else {\n <a\n [routerLink]=\"item.href\"\n routerLinkActive=\"active-nav-link\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"ads-nav-link {{item.class}}\"\n >\n <div class=\"ads-nav-item-container\">\n @if (!!item.icon) {\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n }\n <span class=\"hide-on-collapsed\">{{ item.label }}</span>\n </div>\n </a>\n }\n }\n </div>\n\n <!-- Bottom navigation items -->\n @if (hasBottomItems()) {\n <div class=\"bottom-nav-section\">\n <div class=\"nav-items-container bottom-items\">\n @for (item of bottomNavItems(); track $index) {\n @if (item.click) {\n <a\n class=\"ads-nav-link bottom-item {{item.class}}\"\n (click)=\"item.click()\"\n >\n <div class=\"ads-nav-item-container\">\n @if (!!item.icon) {\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n }\n <span class=\"hide-on-collapsed\">{{ item.label }}</span>\n </div>\n </a>\n } @else {\n <a\n [routerLink]=\"item.href\"\n routerLinkActive=\"active-nav-link\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"ads-nav-link bottom-item {{item.class}}\"\n >\n <div class=\"ads-nav-item-container\">\n @if (!!item.icon) {\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n }\n <span class=\"hide-on-collapsed\">{{ item.label }}</span>\n </div>\n </a>\n }\n }\n </div>\n </div>\n }\n </div>\n </div>\n </as-split-area>\n\n <as-split-area>\n <ng-content></ng-content>\n </as-split-area>\n</as-split>\n", styles: [".nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{display:flex;flex-direction:column;border-bottom:1px solid var(--color-light)}.nav-items-container a{cursor:pointer}.nav-items-container .ads-nav-item-container{display:flex;padding:14px 12px;gap:12px;background-color:var(--color-white);align-items:center;overflow:hidden;white-space:nowrap}.nav-items-container .ads-nav-item-container span{font-weight:400;line-height:20px;color:var(--color-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:unset;display:inline-block}.nav-items-container .ads-nav-item-container ads-icon{flex-shrink:0}.nav-items-container .ads-nav-item-container:hover span,.nav-items-container .ads-nav-item-container:focus span,.nav-items-container .ads-nav-item-container:active span{color:var(--color-white)}.nav-items-container .ads-nav-item-container:hover ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:focus ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:active ads-icon ::ng-deep svg{stroke:var(--color-white);fill:var(--color-white)!important}.nav-items-container .ads-nav-item-container:hover{background-color:var(--color-secondary-hover)!important}.nav-items-container .ads-nav-item-container:active{background-color:var(--color-secondary-pressed)!important}.nav-items-container .ads-nav-item-container:focus{background-color:var(--color-secondary)!important}as-split-area{background-color:var(--color-white)}.logo-container{padding:16px 12px;border-bottom:1px solid var(--color-light);height:auto}.ads-nav-link.active-nav-link .ads-nav-item-container{background-color:var(--color-secondary)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}.ads-nav-link{text-decoration:none}.left-side-content-container{container-type:inline-size;display:flex;flex-direction:column;height:100vh}::ng-deep as-split .as-split-gutter{background-color:var(--color-light-30)}::ng-deep as-split .as-split-gutter:hover,::ng-deep as-split .as-split-gutter:focus{outline:none}::ng-deep as-split .as-split-gutter:hover .as-split-gutter-icon,::ng-deep as-split .as-split-gutter:focus .as-split-gutter-icon{background-color:var(--color-light-80)}::ng-deep as-split .as-split-gutter:active{background-color:var(--color-light)}::ng-deep as-split .as-split-gutter-icon{width:8px;background-color:var(--color-light-30);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"11\" viewBox=\"0 0 6 11\" fill=\"none\"><path d=\"M4.7142 2.92855C5.42428 2.92855 5.99991 2.35291 5.99991 1.64283C5.99991 0.932751 5.42428 0.357117 4.7142 0.357117C4.00412 0.357117 3.42848 0.932751 3.42848 1.64283C3.42848 2.35291 4.00412 2.92855 4.7142 2.92855Z\" fill=\"%23041F41\"/><path d=\"M4.7142 6.78566C5.42428 6.78566 5.99991 6.21003 5.99991 5.49995C5.99991 4.78987 5.42428 4.21423 4.7142 4.21423C4.00412 4.21423 3.42848 4.78987 3.42848 5.49995C3.42848 6.21003 4.00412 6.78566 4.7142 6.78566Z\" fill=\"%23041F41\"/><path d=\"M4.7142 10.6428C5.42428 10.6428 5.99991 10.0672 5.99991 9.35713C5.99991 8.64704 5.42428 8.07141 4.7142 8.07141C4.00412 8.07141 3.42848 8.64704 3.42848 9.35713C3.42848 10.0672 4.00412 10.6428 4.7142 10.6428Z\" fill=\"%23041F41\"/><path d=\"M1.28571 2.92855C1.99579 2.92855 2.57143 2.35291 2.57143 1.64283C2.57143 0.932751 1.99579 0.357117 1.28571 0.357117C0.575634 0.357117 0 0.932751 0 1.64283C0 2.35291 0.575634 2.92855 1.28571 2.92855Z\" fill=\"%23041F41\"/><path d=\"M1.28571 6.78566C1.99579 6.78566 2.57143 6.21003 2.57143 5.49995C2.57143 4.78987 1.99579 4.21423 1.28571 4.21423C0.575634 4.21423 0 4.78987 0 5.49995C0 6.21003 0.575634 6.78566 1.28571 6.78566Z\" fill=\"%23041F41\"/><path d=\"M1.28571 10.6428C1.99579 10.6428 2.57143 10.0672 2.57143 9.35713C2.57143 8.64704 1.99579 8.07141 1.28571 8.07141C0.575634 8.07141 0 8.64704 0 9.35713C0 10.0672 0.575634 10.6428 1.28571 10.6428Z\" fill=\"%23041F41\"/></svg>')!important}.bottom-container{padding:16px 12px;flex-grow:1;display:flex;flex-direction:column}.bottom-nav-section{margin-top:auto}.bottom-nav-section .nav-items-container{border-bottom:none}@container (max-width: 70px){.bottom-container{flex-grow:unset}.bottom-container:hover{background-color:var(--color-secondary-hover)}.bottom-container:hover ads-icon ::ng-deep svg{stroke:var(--color-white)}.bottom-container:active{background-color:var(--color-secondary-pressed)}.hide-on-collapsed{display:none}.show-on-collapsed{display:contents}}@container (min-width: 71px){.hide-on-collapsed{display:contents}.show-on-collapsed{display:none}}\n"], dependencies: [{ kind: "component", type: AdsPrimaryLogoComponent, selector: "ads-primary-logo" }, { kind: "component", type: i3$4.SplitComponent, selector: "as-split", inputs: ["gutterSize", "gutterStep", "disabled", "gutterClickDeltaPx", "direction", "dir", "unit", "gutterAriaLabel", "restrictMove", "useTransition", "gutterDblClickDuration"], outputs: ["gutterClick", "gutterDblClick", "dragStart", "dragEnd", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "component", type: i3$4.SplitAreaComponent, selector: "as-split-area", inputs: ["size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }] }); }
|
|
7044
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsSideNavBarComponent, isStandalone: false, selector: "ads-side-nav-bar", inputs: { searchTemplate: { classPropertyName: "searchTemplate", publicName: "searchTemplate", isSignal: true, isRequired: false, transformFunction: null }, extraDataTemplate: { classPropertyName: "extraDataTemplate", publicName: "extraDataTemplate", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "splitter", first: true, predicate: ["splitter"], descendants: true }, { propertyName: "sideNavArea", first: true, predicate: ["sideNavArea"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<as-split\n #splitter\n [useTransition]=\"true\"\n unit=\"pixel\"\n [gutterSize]=\"10\"\n (gutterDblClick)=\"expandSidebar()\"\n [gutterDblClickDuration]=\"500\"\n (dragEnd)=\"dragEnd($event)\"\n>\n <as-split-area [size]=\"sidebarSize()\" [minSize]=\"50\" [maxSize]=\"maxExpandedWidth()\" #sideNavArea>\n <div class=\"left-side-content-container\">\n <div class=\"logo-container\">\n <a [routerLink]=\"'/'\">\n <ads-primary-logo [mobileWidth]=\"70\" [isCollapsed]=\"true\" class=\"show-on-collapsed\" />\n <ads-primary-logo [mobileWidth]=\"70\" [isCollapsed]=\"false\" class=\"hide-on-collapsed\" />\n </a>\n </div>\n\n <div class=\"nav-items-wrapper\">\n <!-- Regular navigation items -->\n <div class=\"nav-items-container\">\n @for (item of regularNavItems(); track $index) {\n @if (item.click) {\n <a\n class=\"ads-nav-link {{item.class}}\"\n (click)=\"item.click()\"\n >\n <div class=\"ads-nav-item-container\">\n @if (!!item.icon) {\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n }\n <span class=\"hide-on-collapsed\">{{ item.label }}</span>\n </div>\n </a>\n } @else {\n <a\n [routerLink]=\"item.href\"\n routerLinkActive=\"active-nav-link\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"ads-nav-link {{item.class}}\"\n >\n <div class=\"ads-nav-item-container\">\n @if (!!item.icon) {\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n }\n <span class=\"hide-on-collapsed\">{{ item.label }}</span>\n </div>\n </a>\n }\n }\n </div>\n\n <!-- Bottom navigation items -->\n @if (hasBottomItems()) {\n <div class=\"bottom-nav-section\">\n <div class=\"nav-items-container bottom-items\">\n @for (item of bottomNavItems(); track $index) {\n @if (item.click) {\n <a\n class=\"ads-nav-link bottom-item {{item.class}}\"\n (click)=\"item.click()\"\n >\n <div class=\"ads-nav-item-container\">\n @if (!!item.icon) {\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n }\n <span class=\"hide-on-collapsed\">{{ item.label }}</span>\n </div>\n </a>\n } @else {\n <a\n [routerLink]=\"item.href\"\n routerLinkActive=\"active-nav-link\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"ads-nav-link bottom-item {{item.class}}\"\n >\n <div class=\"ads-nav-item-container\">\n @if (!!item.icon) {\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n }\n <span class=\"hide-on-collapsed\">{{ item.label }}</span>\n </div>\n </a>\n }\n }\n </div>\n </div>\n }\n </div>\n </div>\n </as-split-area>\n\n <as-split-area>\n <ng-content></ng-content>\n </as-split-area>\n</as-split>\n", styles: [".nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{display:flex;flex-direction:column;border-bottom:1px solid var(--color-light)}.nav-items-container a{cursor:pointer}.nav-items-container .ads-nav-item-container{display:flex;padding:14px 12px;gap:12px;background-color:var(--color-white);align-items:center;overflow:hidden;white-space:nowrap}.nav-items-container .ads-nav-item-container span{font-weight:400;line-height:20px;color:var(--color-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:unset;display:inline-block}.nav-items-container .ads-nav-item-container ads-icon{flex-shrink:0}.nav-items-container .ads-nav-item-container:hover span,.nav-items-container .ads-nav-item-container:focus span,.nav-items-container .ads-nav-item-container:active span{color:var(--color-white)}.nav-items-container .ads-nav-item-container:hover ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:focus ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:active ads-icon ::ng-deep svg{stroke:var(--color-white);fill:var(--color-white)!important}.nav-items-container .ads-nav-item-container:hover{background-color:var(--color-secondary-hover)!important}.nav-items-container .ads-nav-item-container:active{background-color:var(--color-secondary-pressed)!important}.nav-items-container .ads-nav-item-container:focus{background-color:var(--color-secondary)!important}as-split-area{background-color:var(--color-white)}.logo-container{padding:16px 12px;border-bottom:1px solid var(--color-light);height:auto}.ads-nav-link.active-nav-link .ads-nav-item-container{background-color:var(--color-secondary)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}.ads-nav-link{text-decoration:none}.left-side-content-container{container-type:inline-size;display:flex;flex-direction:column;height:100vh}::ng-deep as-split .as-split-gutter{background-color:var(--color-light-30)}::ng-deep as-split .as-split-gutter:hover,::ng-deep as-split .as-split-gutter:focus{outline:none}::ng-deep as-split .as-split-gutter:hover .as-split-gutter-icon,::ng-deep as-split .as-split-gutter:focus .as-split-gutter-icon{background-color:var(--color-light-80)}::ng-deep as-split .as-split-gutter:active{background-color:var(--color-light)}::ng-deep as-split .as-split-gutter-icon{width:8px;background-color:var(--color-light-30);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"11\" viewBox=\"0 0 6 11\" fill=\"none\"><path d=\"M4.7142 2.92855C5.42428 2.92855 5.99991 2.35291 5.99991 1.64283C5.99991 0.932751 5.42428 0.357117 4.7142 0.357117C4.00412 0.357117 3.42848 0.932751 3.42848 1.64283C3.42848 2.35291 4.00412 2.92855 4.7142 2.92855Z\" fill=\"%23041F41\"/><path d=\"M4.7142 6.78566C5.42428 6.78566 5.99991 6.21003 5.99991 5.49995C5.99991 4.78987 5.42428 4.21423 4.7142 4.21423C4.00412 4.21423 3.42848 4.78987 3.42848 5.49995C3.42848 6.21003 4.00412 6.78566 4.7142 6.78566Z\" fill=\"%23041F41\"/><path d=\"M4.7142 10.6428C5.42428 10.6428 5.99991 10.0672 5.99991 9.35713C5.99991 8.64704 5.42428 8.07141 4.7142 8.07141C4.00412 8.07141 3.42848 8.64704 3.42848 9.35713C3.42848 10.0672 4.00412 10.6428 4.7142 10.6428Z\" fill=\"%23041F41\"/><path d=\"M1.28571 2.92855C1.99579 2.92855 2.57143 2.35291 2.57143 1.64283C2.57143 0.932751 1.99579 0.357117 1.28571 0.357117C0.575634 0.357117 0 0.932751 0 1.64283C0 2.35291 0.575634 2.92855 1.28571 2.92855Z\" fill=\"%23041F41\"/><path d=\"M1.28571 6.78566C1.99579 6.78566 2.57143 6.21003 2.57143 5.49995C2.57143 4.78987 1.99579 4.21423 1.28571 4.21423C0.575634 4.21423 0 4.78987 0 5.49995C0 6.21003 0.575634 6.78566 1.28571 6.78566Z\" fill=\"%23041F41\"/><path d=\"M1.28571 10.6428C1.99579 10.6428 2.57143 10.0672 2.57143 9.35713C2.57143 8.64704 1.99579 8.07141 1.28571 8.07141C0.575634 8.07141 0 8.64704 0 9.35713C0 10.0672 0.575634 10.6428 1.28571 10.6428Z\" fill=\"%23041F41\"/></svg>')!important}.bottom-container{padding:16px 12px;flex-grow:1;display:flex;flex-direction:column}.bottom-nav-section{margin-top:auto}.bottom-nav-section .nav-items-container{border-bottom:none}@container (max-width: 70px){.bottom-container{flex-grow:unset}.bottom-container:hover{background-color:var(--color-secondary-hover)}.bottom-container:hover ads-icon ::ng-deep svg{stroke:var(--color-white)}.bottom-container:active{background-color:var(--color-secondary-pressed)}.hide-on-collapsed{display:none}.show-on-collapsed{display:contents}}@container (min-width: 71px){.hide-on-collapsed{display:contents}.show-on-collapsed{display:none}}\n"], dependencies: [{ kind: "component", type: AdsPrimaryLogoComponent, selector: "ads-primary-logo" }, { kind: "component", type: i3$5.SplitComponent, selector: "as-split", inputs: ["gutterSize", "gutterStep", "disabled", "gutterClickDeltaPx", "direction", "dir", "unit", "gutterAriaLabel", "restrictMove", "useTransition", "gutterDblClickDuration"], outputs: ["gutterClick", "gutterDblClick", "dragStart", "dragEnd", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "component", type: i3$5.SplitAreaComponent, selector: "as-split-area", inputs: ["size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }] }); }
|
|
6671
7045
|
}
|
|
6672
7046
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsSideNavBarComponent, decorators: [{
|
|
6673
7047
|
type: Component,
|
|
@@ -6789,7 +7163,7 @@ class AdsScmsSideNavBarComponent extends AbstractSideNavBarComponent {
|
|
|
6789
7163
|
}
|
|
6790
7164
|
}
|
|
6791
7165
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsScmsSideNavBarComponent, deps: [{ token: i1$2.Router }, { token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6792
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsScmsSideNavBarComponent, isStandalone: false, selector: "ads-scms-side-nav-bar", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, showBreadcrumbs: { classPropertyName: "showBreadcrumbs", publicName: "showBreadcrumbs", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "checkScreenWidth($event)" } }, viewQueries: [{ propertyName: "accordion", first: true, predicate: MatAccordion, descendants: true, isSignal: true }, { propertyName: "splitter", first: true, predicate: ["splitter"], descendants: true }, { propertyName: "sideNavArea", first: true, predicate: ["sideNavArea"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (!isTablet()) {\n <as-split\n #splitter\n [useTransition]=\"true\"\n unit=\"pixel\"\n [gutterSize]=\"10\"\n (gutterDblClick)=\"expandSidebar()\"\n [gutterDblClickDuration]=\"500\"\n (dragEnd)=\"dragEnd($event)\"\n >\n <as-split-area [size]=\"sidebarSize()\" [minSize]=\"50\" [maxSize]=\"maxExpandedWidth()\" #sideNavArea>\n <div class=\"navigation-menu-content-container regular-menu-content-container\">\n <div class=\"logo-container\">\n <a [routerLink]=\"'/'\">\n <ads-ascent-logo size=\"small\" [mobileWidth]=\"70\" [isCollapsed]=\"isCollapsed()\" />\n </a>\n </div>\n\n <div class=\"nav-container\">\n <ng-container *ngTemplateOutlet=\"matAccordion\" />\n </div>\n </div>\n </as-split-area>\n\n <as-split-area class=\"split-area-content\">\n @if (showBreadcrumbs()) {\n <div class=\"breadcrumbs-container\">\n <ads-breadcrumb [breadcrumbs]=\"breadcrumbs()\" />\n </div>\n }\n <ng-container *ngTemplateOutlet=\"router\" />\n </as-split-area>\n </as-split>\n} @else {\n <mat-toolbar [hidden]=\"!isTablet()\" class=\"ads-toolbar\">\n <button mat-icon-button #menuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\">\n <ads-icon [name]=\"menuTrigger.menuOpen ? 'cross' : 'hamburger_menu'\" theme=\"secondary\" stroke=\"secondary\" size=\"sm\" />\n </button>\n </mat-toolbar>\n\n <mat-menu #menu=\"matMenu\">\n <div class=\"navigation-menu-content-container\">\n <div class=\"burger-logo-container\">\n <a [routerLink]=\"'/'\">\n <ads-ascent-logo size=\"small\" [isCollapsed]=\"false\" [mobileWidth]=\"70\" />\n </a>\n </div>\n\n <ng-container *ngTemplateOutlet=\"matAccordion\" />\n </div>\n </mat-menu>\n <div class=\"mobile-wrapper\">\n @if (showBreadcrumbs()) {\n <div class=\"breadcrumbs-container\" [class.is-mobile]=\"isMobile()\" >\n <ads-breadcrumb [breadcrumbs]=\"breadcrumbs()\" />\n </div>\n }\n <ng-container *ngTemplateOutlet=\"router\" />\n </div>\n\n}\n\n<ng-template #router>\n <ng-content></ng-content>\n</ng-template>\n\n\n<ng-template #matAccordion>\n <div class=\"nav-items-wrapper\">\n <!-- Regular navigation items -->\n <mat-accordion class=\"nav-items-container regular-items\">\n @for (item of regularNavItems(); track $index) {\n @if (item.subItems?.length) {\n <mat-expansion-panel\n #panel\n [ngClass]=\"{\n 'active-expansion-panel': hasActiveLink(item),\n 'panel-expanded': panel.expanded,\n }\"\n >\n <mat-expansion-panel-header\n (click)=\"panel.expanded && isCollapsed() && expandSidebar(); $event.stopPropagation()\"\n (keydown.enter)=\"panel.expanded && isCollapsed() && expandSidebar()\"\n >\n <mat-panel-title>\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </mat-panel-title>\n <mat-panel-description>\n @if (panel.expanded) {\n <ads-icon size=\"xs\" name=\"chevron_up\" theme=\"iconPrimary\" />\n } @else {\n <ads-icon size=\"xs\" name=\"chevron_down\" theme=\"iconPrimary\" />\n }\n </mat-panel-description>\n </mat-expansion-panel-header>\n @for (subItem of item.subItems; track $index) {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: subItem, class: '' }\" />\n }\n </mat-expansion-panel>\n } @else {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: item, class: 'main-item' }\" />\n }\n @if (item?.showDividerAfterItem) {\n <ads-divider />\n }\n }\n </mat-accordion>\n\n <!-- Bottom navigation items -->\n @if (hasBottomItems()) {\n <div class=\"bottom-nav-section\">\n <ads-divider />\n <mat-accordion class=\"nav-items-container bottom-items\">\n @for (item of bottomNavItems(); track $index) {\n @if (item.subItems?.length) {\n <mat-expansion-panel\n #panel\n [ngClass]=\"{\n 'active-expansion-panel': hasActiveLink(item),\n 'panel-expanded': panel.expanded,\n }\"\n >\n <mat-expansion-panel-header\n (click)=\"panel.expanded && isCollapsed() && expandSidebar(); $event.stopPropagation()\"\n (keydown.enter)=\"panel.expanded && isCollapsed() && expandSidebar()\"\n >\n <mat-panel-title>\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </mat-panel-title>\n <mat-panel-description>\n @if (panel.expanded) {\n <ads-icon size=\"xs\" name=\"chevron_up\" theme=\"iconPrimary\" />\n } @else {\n <ads-icon size=\"xs\" name=\"chevron_down\" theme=\"iconPrimary\" />\n }\n </mat-panel-description>\n </mat-expansion-panel-header>\n @for (subItem of item.subItems; track $index) {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: subItem, class: '' }\" />\n }\n </mat-expansion-panel>\n } @else {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: item, class: 'main-item bottom-item' }\" />\n }\n @if (item?.showDividerAfterItem) {\n <ads-divider />\n }\n }\n </mat-accordion>\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #navItem let-item=\"navItem\" let-className=\"class\">\n <a\n [routerLink]=\"item.href\"\n class=\"ads-nav-link\"\n [ngClass]=\"{\n className,\n 'active-nav-link': hasActiveSubLink(item),\n }\"\n >\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </a>\n</ng-template>\n\n<ng-template #itemTitle let-item=\"data\">\n <div class=\"ads-nav-item-container\" [matTooltip]=\"item.label\" [matTooltipDisabled]=\"!isCollapsed() || isTablet()\">\n @if (!!item.icon) {\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n }\n @if (!isCollapsed() || isTablet()) {\n <span>{{ item.label }}</span>\n }\n </div>\n</ng-template>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-background-color: var(--color-white);--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);box-shadow:none!important;border:1px solid var(--color-light)}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header{--mat-expansion-header-collapsed-state-height: unset;min-height:24px;height:auto;padding:16px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header.mat-expanded{padding-bottom:8px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-title{--mat-expansion-header-text-color: var(--color-dark);font-size:1.25rem;line-height:26px;font-weight:600;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-description{margin:0;justify-content:end;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator{display:none}.mat-expansion-panel ::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body{--mat-expansion-container-text-size: font-size(text-base);line-height:21px;padding:0 16px 16px}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true]{background-color:var(--color-muted)}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title{color:var(--color-medium)}\n", ".nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{display:flex;flex-direction:column;border-bottom:1px solid var(--color-light)}.nav-items-container a{cursor:pointer}.nav-items-container .ads-nav-item-container{display:flex;padding:14px 12px;gap:12px;background-color:var(--color-white);align-items:center;overflow:hidden;white-space:nowrap}.nav-items-container .ads-nav-item-container span{font-weight:400;line-height:20px;color:var(--color-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:unset;display:inline-block}.nav-items-container .ads-nav-item-container ads-icon{flex-shrink:0}.nav-items-container .ads-nav-item-container:hover span,.nav-items-container .ads-nav-item-container:focus span,.nav-items-container .ads-nav-item-container:active span{color:var(--color-white)}.nav-items-container .ads-nav-item-container:hover ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:focus ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:active ads-icon ::ng-deep svg{stroke:var(--color-white);fill:var(--color-white)!important}.nav-items-container .ads-nav-item-container:hover{background-color:var(--color-secondary-hover)!important}.nav-items-container .ads-nav-item-container:active{background-color:var(--color-secondary-pressed)!important}.nav-items-container .ads-nav-item-container:focus{background-color:var(--color-secondary)!important}as-split-area{background-color:var(--color-white)}.logo-container{padding:16px 12px;border-bottom:1px solid var(--color-light);height:auto}.ads-nav-link.active-nav-link .ads-nav-item-container{background-color:var(--color-secondary)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}.ads-nav-link{text-decoration:none}.left-side-content-container{container-type:inline-size;display:flex;flex-direction:column;height:100vh}::ng-deep as-split .as-split-gutter{background-color:var(--color-light-30)}::ng-deep as-split .as-split-gutter:hover,::ng-deep as-split .as-split-gutter:focus{outline:none}::ng-deep as-split .as-split-gutter:hover .as-split-gutter-icon,::ng-deep as-split .as-split-gutter:focus .as-split-gutter-icon{background-color:var(--color-light-80)}::ng-deep as-split .as-split-gutter:active{background-color:var(--color-light)}::ng-deep as-split .as-split-gutter-icon{width:8px;background-color:var(--color-light-30);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"11\" viewBox=\"0 0 6 11\" fill=\"none\"><path d=\"M4.7142 2.92855C5.42428 2.92855 5.99991 2.35291 5.99991 1.64283C5.99991 0.932751 5.42428 0.357117 4.7142 0.357117C4.00412 0.357117 3.42848 0.932751 3.42848 1.64283C3.42848 2.35291 4.00412 2.92855 4.7142 2.92855Z\" fill=\"%23041F41\"/><path d=\"M4.7142 6.78566C5.42428 6.78566 5.99991 6.21003 5.99991 5.49995C5.99991 4.78987 5.42428 4.21423 4.7142 4.21423C4.00412 4.21423 3.42848 4.78987 3.42848 5.49995C3.42848 6.21003 4.00412 6.78566 4.7142 6.78566Z\" fill=\"%23041F41\"/><path d=\"M4.7142 10.6428C5.42428 10.6428 5.99991 10.0672 5.99991 9.35713C5.99991 8.64704 5.42428 8.07141 4.7142 8.07141C4.00412 8.07141 3.42848 8.64704 3.42848 9.35713C3.42848 10.0672 4.00412 10.6428 4.7142 10.6428Z\" fill=\"%23041F41\"/><path d=\"M1.28571 2.92855C1.99579 2.92855 2.57143 2.35291 2.57143 1.64283C2.57143 0.932751 1.99579 0.357117 1.28571 0.357117C0.575634 0.357117 0 0.932751 0 1.64283C0 2.35291 0.575634 2.92855 1.28571 2.92855Z\" fill=\"%23041F41\"/><path d=\"M1.28571 6.78566C1.99579 6.78566 2.57143 6.21003 2.57143 5.49995C2.57143 4.78987 1.99579 4.21423 1.28571 4.21423C0.575634 4.21423 0 4.78987 0 5.49995C0 6.21003 0.575634 6.78566 1.28571 6.78566Z\" fill=\"%23041F41\"/><path d=\"M1.28571 10.6428C1.99579 10.6428 2.57143 10.0672 2.57143 9.35713C2.57143 8.64704 1.99579 8.07141 1.28571 8.07141C0.575634 8.07141 0 8.64704 0 9.35713C0 10.0672 0.575634 10.6428 1.28571 10.6428Z\" fill=\"%23041F41\"/></svg>')!important}.bottom-container{padding:16px 12px;flex-grow:1;display:flex;flex-direction:column}.bottom-nav-section{margin-top:auto}.bottom-nav-section .nav-items-container{border-bottom:none}@container (max-width: 70px){.bottom-container{flex-grow:unset}.bottom-container:hover{background-color:var(--color-secondary-hover)}.bottom-container:hover ads-icon ::ng-deep svg{stroke:var(--color-white)}.bottom-container:active{background-color:var(--color-secondary-pressed)}.hide-on-collapsed{display:none}.show-on-collapsed{display:contents}}@container (min-width: 71px){.hide-on-collapsed{display:contents}.show-on-collapsed{display:none}}\n", ":host{height:100vh;display:flex;flex-direction:column}.nav-container{display:flex;flex-direction:column;height:calc(100vh - 64px);overflow-y:auto}.nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{border-bottom:none}.bottom-nav-section{margin-top:auto}.nav-items-container>ads-divider:last-of-type{margin-top:auto}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header{background-color:var(--color-secondary)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container{background-color:var(--color-secondary)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header mat-panel-description ads-icon{fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-expansion-panel_header,::ng-deep .navigation-menu-content-container .panel-expanded .ads-nav-item-container{background-color:var(--color-secondary-10)!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-panel-title .ads-nav-item-container{background-color:transparent!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-panel-title .ads-nav-item-container span{font-weight:600!important}::ng-deep .navigation-menu-content-container mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-body{padding:0!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-body a .ads-nav-item-container{padding-left:48px!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header{padding:6px 12px 6px 0!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-description ads-icon{width:16px!important;height:auto!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;min-width:50px}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container span{font-size:1rem}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container span,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus mat-panel-description ads-icon{fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:active{background-color:var(--color-secondary-pressed)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:active .ads-nav-item-container{background-color:var(--color-secondary-pressed)!important}::ng-deep .navigation-menu-content-container .main-item .ads-nav-item-container{padding:20px 12px!important}::ng-deep .navigation-menu-content-container .main-item .ads-nav-item-container .hide-on-collapsed{font-size:1rem}::ng-deep .navigation-menu-content-container .ads-nav-link:focus{background-color:var(--color-secondary-hover)!important;outline:none}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container .logo-container{padding-left:8px;padding-right:7px}.breadcrumbs-container{padding:72px 48px 48px}.split-area-content{container-type:inline-size}@container (max-width: 768px){.breadcrumbs-container{padding:72px 32px 48px}}:host::ng-deep{--mat-toolbar-mobile-height: 64px;--mat-toolbar-container-background-color: transparent}:host::ng-deep mat-toolbar{border-bottom:1px solid var(--color-light)}:host::ng-deep .mdc-icon-button{display:flex}:host::ng-deep .mdc-icon-button:hover{background-color:var(--color-light-30)}:host::ng-deep .mdc-icon-button:hover ads-icon ::ng-deep svg{fill:var(--color-secondary-hover)!important;stroke:var(--color-secondary-hover)!important}:host::ng-deep .mdc-icon-button:focus,:host::ng-deep .mdc-icon-button:active{background-color:var(--color-light-30)}:host::ng-deep .mdc-icon-button:focus ads-icon ::ng-deep svg,:host::ng-deep .mdc-icon-button:active ads-icon ::ng-deep svg{fill:var(--color-secondary-pressed)!important;stroke:var(--color-secondary-pressed)!important}::ng-deep .mat-mdc-menu-content{padding:0!important}::ng-deep .mat-mdc-menu-panel{margin-top:3px!important;margin-left:10px}.regular-menu-content-container{height:100vh}.burger-logo-container{padding:18px 8px;border-bottom:1px solid var(--color-light);height:auto;background-color:var(--color-white);width:280px}.mobile-wrapper{background-color:var(--color-white);min-height:calc(100vh - 64px)}.mobile-wrapper .breadcrumbs-container{padding:16px 0 48px 32px}.mobile-wrapper .breadcrumbs-container.is-mobile{padding:16px 0 48px 24px}.ads-toolbar{background-color:var(--color-white)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$4.SplitComponent, selector: "as-split", inputs: ["gutterSize", "gutterStep", "disabled", "gutterClickDeltaPx", "direction", "dir", "unit", "gutterAriaLabel", "restrictMove", "useTransition", "gutterDblClickDuration"], outputs: ["gutterClick", "gutterDblClick", "dragStart", "dragEnd", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "component", type: i3$4.SplitAreaComponent, selector: "as-split-area", inputs: ["size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: DividerComponent, selector: "ads-divider", inputs: ["margin", "color"] }, { kind: "directive", type: i6$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i6$1.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i6$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: AdsAscentLogoComponent, selector: "ads-ascent-logo", inputs: ["invertTheme", "size"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: AdsBreadcrumbComponent, selector: "ads-breadcrumb", inputs: ["breadcrumbs"] }, { kind: "component", type: i4$3.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: i11$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i4$3.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: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] }); }
|
|
7166
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsScmsSideNavBarComponent, isStandalone: false, selector: "ads-scms-side-nav-bar", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, showBreadcrumbs: { classPropertyName: "showBreadcrumbs", publicName: "showBreadcrumbs", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "checkScreenWidth($event)" } }, viewQueries: [{ propertyName: "accordion", first: true, predicate: MatAccordion, descendants: true, isSignal: true }, { propertyName: "splitter", first: true, predicate: ["splitter"], descendants: true }, { propertyName: "sideNavArea", first: true, predicate: ["sideNavArea"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (!isTablet()) {\n <as-split\n #splitter\n [useTransition]=\"true\"\n unit=\"pixel\"\n [gutterSize]=\"10\"\n (gutterDblClick)=\"expandSidebar()\"\n [gutterDblClickDuration]=\"500\"\n (dragEnd)=\"dragEnd($event)\"\n >\n <as-split-area [size]=\"sidebarSize()\" [minSize]=\"50\" [maxSize]=\"maxExpandedWidth()\" #sideNavArea>\n <div class=\"navigation-menu-content-container regular-menu-content-container\">\n <div class=\"logo-container\">\n <a [routerLink]=\"'/'\">\n <ads-ascent-logo size=\"small\" [mobileWidth]=\"70\" [isCollapsed]=\"isCollapsed()\" />\n </a>\n </div>\n\n <div class=\"nav-container\">\n <ng-container *ngTemplateOutlet=\"matAccordion\" />\n </div>\n </div>\n </as-split-area>\n\n <as-split-area class=\"split-area-content\">\n @if (showBreadcrumbs()) {\n <div class=\"breadcrumbs-container\">\n <ads-breadcrumb [breadcrumbs]=\"breadcrumbs()\" />\n </div>\n }\n <ng-container *ngTemplateOutlet=\"router\" />\n </as-split-area>\n </as-split>\n} @else {\n <mat-toolbar [hidden]=\"!isTablet()\" class=\"ads-toolbar\">\n <button mat-icon-button #menuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\">\n <ads-icon [name]=\"menuTrigger.menuOpen ? 'cross' : 'hamburger_menu'\" theme=\"secondary\" stroke=\"secondary\" size=\"sm\" />\n </button>\n </mat-toolbar>\n\n <mat-menu #menu=\"matMenu\">\n <div class=\"navigation-menu-content-container\">\n <div class=\"burger-logo-container\">\n <a [routerLink]=\"'/'\">\n <ads-ascent-logo size=\"small\" [isCollapsed]=\"false\" [mobileWidth]=\"70\" />\n </a>\n </div>\n\n <ng-container *ngTemplateOutlet=\"matAccordion\" />\n </div>\n </mat-menu>\n <div class=\"mobile-wrapper\">\n @if (showBreadcrumbs()) {\n <div class=\"breadcrumbs-container\" [class.is-mobile]=\"isMobile()\" >\n <ads-breadcrumb [breadcrumbs]=\"breadcrumbs()\" />\n </div>\n }\n <ng-container *ngTemplateOutlet=\"router\" />\n </div>\n\n}\n\n<ng-template #router>\n <ng-content></ng-content>\n</ng-template>\n\n\n<ng-template #matAccordion>\n <div class=\"nav-items-wrapper\">\n <!-- Regular navigation items -->\n <mat-accordion class=\"nav-items-container regular-items\">\n @for (item of regularNavItems(); track $index) {\n @if (item.subItems?.length) {\n <mat-expansion-panel\n #panel\n [ngClass]=\"{\n 'active-expansion-panel': hasActiveLink(item),\n 'panel-expanded': panel.expanded,\n }\"\n >\n <mat-expansion-panel-header\n (click)=\"panel.expanded && isCollapsed() && expandSidebar(); $event.stopPropagation()\"\n (keydown.enter)=\"panel.expanded && isCollapsed() && expandSidebar()\"\n >\n <mat-panel-title>\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </mat-panel-title>\n <mat-panel-description>\n @if (panel.expanded) {\n <ads-icon size=\"xs\" name=\"chevron_up\" theme=\"iconPrimary\" />\n } @else {\n <ads-icon size=\"xs\" name=\"chevron_down\" theme=\"iconPrimary\" />\n }\n </mat-panel-description>\n </mat-expansion-panel-header>\n @for (subItem of item.subItems; track $index) {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: subItem, class: '' }\" />\n }\n </mat-expansion-panel>\n } @else {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: item, class: 'main-item' }\" />\n }\n @if (item?.showDividerAfterItem) {\n <ads-divider />\n }\n }\n </mat-accordion>\n\n <!-- Bottom navigation items -->\n @if (hasBottomItems()) {\n <div class=\"bottom-nav-section\">\n <ads-divider />\n <mat-accordion class=\"nav-items-container bottom-items\">\n @for (item of bottomNavItems(); track $index) {\n @if (item.subItems?.length) {\n <mat-expansion-panel\n #panel\n [ngClass]=\"{\n 'active-expansion-panel': hasActiveLink(item),\n 'panel-expanded': panel.expanded,\n }\"\n >\n <mat-expansion-panel-header\n (click)=\"panel.expanded && isCollapsed() && expandSidebar(); $event.stopPropagation()\"\n (keydown.enter)=\"panel.expanded && isCollapsed() && expandSidebar()\"\n >\n <mat-panel-title>\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </mat-panel-title>\n <mat-panel-description>\n @if (panel.expanded) {\n <ads-icon size=\"xs\" name=\"chevron_up\" theme=\"iconPrimary\" />\n } @else {\n <ads-icon size=\"xs\" name=\"chevron_down\" theme=\"iconPrimary\" />\n }\n </mat-panel-description>\n </mat-expansion-panel-header>\n @for (subItem of item.subItems; track $index) {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: subItem, class: '' }\" />\n }\n </mat-expansion-panel>\n } @else {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: item, class: 'main-item bottom-item' }\" />\n }\n @if (item?.showDividerAfterItem) {\n <ads-divider />\n }\n }\n </mat-accordion>\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #navItem let-item=\"navItem\" let-className=\"class\">\n <a\n [routerLink]=\"item.href\"\n class=\"ads-nav-link\"\n [ngClass]=\"{\n className,\n 'active-nav-link': hasActiveSubLink(item),\n }\"\n >\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </a>\n</ng-template>\n\n<ng-template #itemTitle let-item=\"data\">\n <div class=\"ads-nav-item-container\" [matTooltip]=\"item.label\" [matTooltipDisabled]=\"!isCollapsed() || isTablet()\">\n @if (!!item.icon) {\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n }\n @if (!isCollapsed() || isTablet()) {\n <span>{{ item.label }}</span>\n }\n </div>\n</ng-template>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-background-color: var(--color-white);--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);box-shadow:none!important;border:1px solid var(--color-light)}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header{--mat-expansion-header-collapsed-state-height: unset;min-height:24px;height:auto;padding:16px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header.mat-expanded{padding-bottom:8px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-title{--mat-expansion-header-text-color: var(--color-dark);font-size:1.25rem;line-height:26px;font-weight:600;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-description{margin:0;justify-content:end;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator{display:none}.mat-expansion-panel ::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body{--mat-expansion-container-text-size: font-size(text-base);line-height:21px;padding:0 16px 16px}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true]{background-color:var(--color-muted)}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title{color:var(--color-medium)}\n", ".nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{display:flex;flex-direction:column;border-bottom:1px solid var(--color-light)}.nav-items-container a{cursor:pointer}.nav-items-container .ads-nav-item-container{display:flex;padding:14px 12px;gap:12px;background-color:var(--color-white);align-items:center;overflow:hidden;white-space:nowrap}.nav-items-container .ads-nav-item-container span{font-weight:400;line-height:20px;color:var(--color-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:unset;display:inline-block}.nav-items-container .ads-nav-item-container ads-icon{flex-shrink:0}.nav-items-container .ads-nav-item-container:hover span,.nav-items-container .ads-nav-item-container:focus span,.nav-items-container .ads-nav-item-container:active span{color:var(--color-white)}.nav-items-container .ads-nav-item-container:hover ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:focus ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:active ads-icon ::ng-deep svg{stroke:var(--color-white);fill:var(--color-white)!important}.nav-items-container .ads-nav-item-container:hover{background-color:var(--color-secondary-hover)!important}.nav-items-container .ads-nav-item-container:active{background-color:var(--color-secondary-pressed)!important}.nav-items-container .ads-nav-item-container:focus{background-color:var(--color-secondary)!important}as-split-area{background-color:var(--color-white)}.logo-container{padding:16px 12px;border-bottom:1px solid var(--color-light);height:auto}.ads-nav-link.active-nav-link .ads-nav-item-container{background-color:var(--color-secondary)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}.ads-nav-link{text-decoration:none}.left-side-content-container{container-type:inline-size;display:flex;flex-direction:column;height:100vh}::ng-deep as-split .as-split-gutter{background-color:var(--color-light-30)}::ng-deep as-split .as-split-gutter:hover,::ng-deep as-split .as-split-gutter:focus{outline:none}::ng-deep as-split .as-split-gutter:hover .as-split-gutter-icon,::ng-deep as-split .as-split-gutter:focus .as-split-gutter-icon{background-color:var(--color-light-80)}::ng-deep as-split .as-split-gutter:active{background-color:var(--color-light)}::ng-deep as-split .as-split-gutter-icon{width:8px;background-color:var(--color-light-30);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"11\" viewBox=\"0 0 6 11\" fill=\"none\"><path d=\"M4.7142 2.92855C5.42428 2.92855 5.99991 2.35291 5.99991 1.64283C5.99991 0.932751 5.42428 0.357117 4.7142 0.357117C4.00412 0.357117 3.42848 0.932751 3.42848 1.64283C3.42848 2.35291 4.00412 2.92855 4.7142 2.92855Z\" fill=\"%23041F41\"/><path d=\"M4.7142 6.78566C5.42428 6.78566 5.99991 6.21003 5.99991 5.49995C5.99991 4.78987 5.42428 4.21423 4.7142 4.21423C4.00412 4.21423 3.42848 4.78987 3.42848 5.49995C3.42848 6.21003 4.00412 6.78566 4.7142 6.78566Z\" fill=\"%23041F41\"/><path d=\"M4.7142 10.6428C5.42428 10.6428 5.99991 10.0672 5.99991 9.35713C5.99991 8.64704 5.42428 8.07141 4.7142 8.07141C4.00412 8.07141 3.42848 8.64704 3.42848 9.35713C3.42848 10.0672 4.00412 10.6428 4.7142 10.6428Z\" fill=\"%23041F41\"/><path d=\"M1.28571 2.92855C1.99579 2.92855 2.57143 2.35291 2.57143 1.64283C2.57143 0.932751 1.99579 0.357117 1.28571 0.357117C0.575634 0.357117 0 0.932751 0 1.64283C0 2.35291 0.575634 2.92855 1.28571 2.92855Z\" fill=\"%23041F41\"/><path d=\"M1.28571 6.78566C1.99579 6.78566 2.57143 6.21003 2.57143 5.49995C2.57143 4.78987 1.99579 4.21423 1.28571 4.21423C0.575634 4.21423 0 4.78987 0 5.49995C0 6.21003 0.575634 6.78566 1.28571 6.78566Z\" fill=\"%23041F41\"/><path d=\"M1.28571 10.6428C1.99579 10.6428 2.57143 10.0672 2.57143 9.35713C2.57143 8.64704 1.99579 8.07141 1.28571 8.07141C0.575634 8.07141 0 8.64704 0 9.35713C0 10.0672 0.575634 10.6428 1.28571 10.6428Z\" fill=\"%23041F41\"/></svg>')!important}.bottom-container{padding:16px 12px;flex-grow:1;display:flex;flex-direction:column}.bottom-nav-section{margin-top:auto}.bottom-nav-section .nav-items-container{border-bottom:none}@container (max-width: 70px){.bottom-container{flex-grow:unset}.bottom-container:hover{background-color:var(--color-secondary-hover)}.bottom-container:hover ads-icon ::ng-deep svg{stroke:var(--color-white)}.bottom-container:active{background-color:var(--color-secondary-pressed)}.hide-on-collapsed{display:none}.show-on-collapsed{display:contents}}@container (min-width: 71px){.hide-on-collapsed{display:contents}.show-on-collapsed{display:none}}\n", ":host{height:100vh;display:flex;flex-direction:column}.nav-container{display:flex;flex-direction:column;height:calc(100vh - 64px);overflow-y:auto}.nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{border-bottom:none}.bottom-nav-section{margin-top:auto}.nav-items-container>ads-divider:last-of-type{margin-top:auto}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header{background-color:var(--color-secondary)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container{background-color:var(--color-secondary)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header mat-panel-description ads-icon{fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-expansion-panel_header,::ng-deep .navigation-menu-content-container .panel-expanded .ads-nav-item-container{background-color:var(--color-secondary-10)!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-panel-title .ads-nav-item-container{background-color:transparent!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-panel-title .ads-nav-item-container span{font-weight:600!important}::ng-deep .navigation-menu-content-container mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-body{padding:0!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-body a .ads-nav-item-container{padding-left:48px!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header{padding:6px 12px 6px 0!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-description ads-icon{width:16px!important;height:auto!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;min-width:50px}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container span{font-size:1rem}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container span,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus mat-panel-description ads-icon{fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:active{background-color:var(--color-secondary-pressed)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:active .ads-nav-item-container{background-color:var(--color-secondary-pressed)!important}::ng-deep .navigation-menu-content-container .main-item .ads-nav-item-container{padding:20px 12px!important}::ng-deep .navigation-menu-content-container .main-item .ads-nav-item-container .hide-on-collapsed{font-size:1rem}::ng-deep .navigation-menu-content-container .ads-nav-link:focus{background-color:var(--color-secondary-hover)!important;outline:none}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container .logo-container{padding-left:8px;padding-right:7px}.breadcrumbs-container{padding:72px 48px 48px}.split-area-content{container-type:inline-size}@container (max-width: 768px){.breadcrumbs-container{padding:72px 32px 48px}}:host::ng-deep{--mat-toolbar-mobile-height: 64px;--mat-toolbar-container-background-color: transparent}:host::ng-deep mat-toolbar{border-bottom:1px solid var(--color-light)}:host::ng-deep .mdc-icon-button{display:flex}:host::ng-deep .mdc-icon-button:hover{background-color:var(--color-light-30)}:host::ng-deep .mdc-icon-button:hover ads-icon ::ng-deep svg{fill:var(--color-secondary-hover)!important;stroke:var(--color-secondary-hover)!important}:host::ng-deep .mdc-icon-button:focus,:host::ng-deep .mdc-icon-button:active{background-color:var(--color-light-30)}:host::ng-deep .mdc-icon-button:focus ads-icon ::ng-deep svg,:host::ng-deep .mdc-icon-button:active ads-icon ::ng-deep svg{fill:var(--color-secondary-pressed)!important;stroke:var(--color-secondary-pressed)!important}::ng-deep .mat-mdc-menu-content{padding:0!important}::ng-deep .mat-mdc-menu-panel{margin-top:3px!important;margin-left:10px}.regular-menu-content-container{height:100vh}.burger-logo-container{padding:18px 8px;border-bottom:1px solid var(--color-light);height:auto;background-color:var(--color-white);width:280px}.mobile-wrapper{background-color:var(--color-white);min-height:calc(100vh - 64px)}.mobile-wrapper .breadcrumbs-container{padding:16px 0 48px 32px}.mobile-wrapper .breadcrumbs-container.is-mobile{padding:16px 0 48px 24px}.ads-toolbar{background-color:var(--color-white)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$5.SplitComponent, selector: "as-split", inputs: ["gutterSize", "gutterStep", "disabled", "gutterClickDeltaPx", "direction", "dir", "unit", "gutterAriaLabel", "restrictMove", "useTransition", "gutterDblClickDuration"], outputs: ["gutterClick", "gutterDblClick", "dragStart", "dragEnd", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "component", type: i3$5.SplitAreaComponent, selector: "as-split-area", inputs: ["size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: DividerComponent, selector: "ads-divider", inputs: ["margin", "color"] }, { kind: "directive", type: i6$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i6$1.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i6$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: AdsAscentLogoComponent, selector: "ads-ascent-logo", inputs: ["invertTheme", "size"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: AdsBreadcrumbComponent, selector: "ads-breadcrumb", inputs: ["breadcrumbs"] }, { kind: "component", type: i4$3.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: i11$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i4$3.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: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] }); }
|
|
6793
7167
|
}
|
|
6794
7168
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsScmsSideNavBarComponent, decorators: [{
|
|
6795
7169
|
type: Component,
|
|
@@ -7244,7 +7618,7 @@ class AdsHorizontalNavBarComponent {
|
|
|
7244
7618
|
}
|
|
7245
7619
|
}
|
|
7246
7620
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsHorizontalNavBarComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7247
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsHorizontalNavBarComponent, isStandalone: false, selector: "ads-horizontal-nav-bar", inputs: { links: "links" }, ngImport: i0, template: "<nav mat-tab-nav-bar [disableRipple]=\"true\" [tabPanel]=\"tabPanel\" [disablePagination]=\"true\">\n @for (link of links; track $index) {\n <a mat-tab-link [routerLink]=\"link.route\" routerLinkActive=\"active\" [disabled]=\"link.disabled\">\n {{ link.text }}\n </a>\n }\n</nav>\n\n<mat-tab-nav-panel #tabPanel>\n <router-outlet></router-outlet>\n</mat-tab-nav-panel>\n", styles: [":host::ng-deep .mat-mdc-tab-header{overflow-x:scroll!important;padding-bottom:4px!important}:host::ng-deep .mat-mdc-tab-link-container{overflow:visible!important}:host::ng-deep .mat-mdc-tab-link{border-bottom:2px solid var(--color-medium-30)}:host::ng-deep .mat-mdc-tab-link .mdc-tab-indicator{display:none}:host::ng-deep .mat-mdc-tab-link .mdc-tab__text-label{line-height:normal;font-weight:400;letter-spacing:normal;color:var(--color-medium-30)!important}:host::ng-deep .mat-mdc-tab-link.active{border-bottom:2px solid var(--color-primary-hover)}:host::ng-deep .mat-mdc-tab-link.active .mdc-tab__text-label{color:var(--color-primary-hover)!important;font-weight:500;line-height:normal}:host::ng-deep .mat-mdc-tab-link.mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-link.mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}\n"], dependencies: [{ kind: "component", type: i2$
|
|
7621
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsHorizontalNavBarComponent, isStandalone: false, selector: "ads-horizontal-nav-bar", inputs: { links: "links" }, ngImport: i0, template: "<nav mat-tab-nav-bar [disableRipple]=\"true\" [tabPanel]=\"tabPanel\" [disablePagination]=\"true\">\n @for (link of links; track $index) {\n <a mat-tab-link [routerLink]=\"link.route\" routerLinkActive=\"active\" [disabled]=\"link.disabled\">\n {{ link.text }}\n </a>\n }\n</nav>\n\n<mat-tab-nav-panel #tabPanel>\n <router-outlet></router-outlet>\n</mat-tab-nav-panel>\n", styles: [":host::ng-deep .mat-mdc-tab-header{overflow-x:scroll!important;padding-bottom:4px!important}:host::ng-deep .mat-mdc-tab-link-container{overflow:visible!important}:host::ng-deep .mat-mdc-tab-link{border-bottom:2px solid var(--color-medium-30)}:host::ng-deep .mat-mdc-tab-link .mdc-tab-indicator{display:none}:host::ng-deep .mat-mdc-tab-link .mdc-tab__text-label{line-height:normal;font-weight:400;letter-spacing:normal;color:var(--color-medium-30)!important}:host::ng-deep .mat-mdc-tab-link.active{border-bottom:2px solid var(--color-primary-hover)}:host::ng-deep .mat-mdc-tab-link.active .mdc-tab__text-label{color:var(--color-primary-hover)!important;font-weight:500;line-height:normal}:host::ng-deep .mat-mdc-tab-link.mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-link.mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}\n"], dependencies: [{ kind: "component", type: i2$3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i2$3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$3.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }] }); }
|
|
7248
7622
|
}
|
|
7249
7623
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsHorizontalNavBarComponent, decorators: [{
|
|
7250
7624
|
type: Component,
|
|
@@ -7310,7 +7684,7 @@ class AdsBubbleComponent {
|
|
|
7310
7684
|
link.click();
|
|
7311
7685
|
}
|
|
7312
7686
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsBubbleComponent, deps: [{ token: i1$6.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7313
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsBubbleComponent, isStandalone: false, selector: "ads-bubble", viewQueries: [{ propertyName: "svgBackgroundElement", first: true, predicate: ["svgBackground"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #svgBackground class=\"svg-background\"></div>\n@if (svgContent) {\n <div class=\"button-container\">\n <ads-button (click)=\"downloadSvg()\">Download SVG</ads-button>\n </div>\n}\n", styles: [".svg-background{width:100%;height:657px;background-repeat:no-repeat;background-size:cover;background-position:center;border-radius:8px}.button-container{display:flex;justify-content:center;padding-top:32px}\n"], dependencies: [{ kind: "component", type: AdsButtonComponent, selector: "ads-button", inputs: ["id", "variant", "disabled", "size", "type"] }] }); }
|
|
7687
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsBubbleComponent, isStandalone: false, selector: "ads-bubble", viewQueries: [{ propertyName: "svgBackgroundElement", first: true, predicate: ["svgBackground"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #svgBackground class=\"svg-background\"></div>\n@if (svgContent) {\n <div class=\"button-container\">\n <ads-button (click)=\"downloadSvg()\">Download SVG</ads-button>\n </div>\n}\n", styles: [".svg-background{width:100%;height:657px;background-repeat:no-repeat;background-size:cover;background-position:center;border-radius:8px}.button-container{display:flex;justify-content:center;padding-top:32px}\n"], dependencies: [{ kind: "component", type: AdsButtonComponent, selector: "ads-button", inputs: ["id", "variant", "disabled", "size", "type", "fullWidth"] }] }); }
|
|
7314
7688
|
}
|
|
7315
7689
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsBubbleComponent, decorators: [{
|
|
7316
7690
|
type: Component,
|
|
@@ -7757,7 +8131,7 @@ class AdsTabsComponent {
|
|
|
7757
8131
|
};
|
|
7758
8132
|
}
|
|
7759
8133
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7760
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsTabsComponent, isStandalone: false, selector: "ads-tabs", inputs: { tabs: "tabs", selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange", tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-tab-group\n [selectedIndex]=\"selectedIndex\"\n (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\n class=\"custom-tabs\"\n #tabGroup\n [disableRipple]=\"true\"\n>\n @for(tab of tabs; track $index) {\n @if (tab.headerTemplate) {\n <mat-tab [disabled]=\"tab.disabled\">\n <ng-template mat-tab-label>\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n </ng-template>\n @if(tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n }\n </mat-tab>\n } @else {\n <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\">\n @if(tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n }\n </mat-tab>\n }\n }\n</mat-tab-group>\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30)}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium-30)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--color-primary-hover)}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--color-primary-hover)!important;font-weight:500}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}\n"], dependencies: [{ kind: "component", type: i2$
|
|
8134
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsTabsComponent, isStandalone: false, selector: "ads-tabs", inputs: { tabs: "tabs", selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange", tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-tab-group\n [selectedIndex]=\"selectedIndex\"\n (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\n class=\"custom-tabs\"\n #tabGroup\n [disableRipple]=\"true\"\n>\n @for(tab of tabs; track $index) {\n @if (tab.headerTemplate) {\n <mat-tab [disabled]=\"tab.disabled\">\n <ng-template mat-tab-label>\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n </ng-template>\n @if(tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n }\n </mat-tab>\n } @else {\n <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\">\n @if(tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n }\n </mat-tab>\n }\n }\n</mat-tab-group>\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30)}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium-30)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--color-primary-hover)}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--color-primary-hover)!important;font-weight:500}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}\n"], dependencies: [{ kind: "component", type: i2$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i2$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }] }); }
|
|
7761
8135
|
}
|
|
7762
8136
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsTabsComponent, decorators: [{
|
|
7763
8137
|
type: Component,
|
|
@@ -8156,7 +8530,7 @@ class AdsProgressStepperComponent {
|
|
|
8156
8530
|
return Math.floor((this.window.innerWidth - this.containerPadding) / stepWidth);
|
|
8157
8531
|
}
|
|
8158
8532
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsProgressStepperComponent, deps: [{ token: i0.Renderer2 }, { token: i1.AdsIconRegistry }, { token: Window }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8159
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsProgressStepperComponent, isStandalone: false, selector: "ads-progress-stepper", inputs: { isMobile: "isMobile", containerPadding: "containerPadding", steps: "steps" }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }, { propertyName: "stepElements", predicate: ["stepElements"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n #stepper\n adsGesture\n class=\"progress-stepper\"\n [ngStyle]=\"styles?.step\"\n [draggable]=\"false\"\n (gestureleft)=\"onSwipeLeft()\"\n (gestureright)=\"onSwipeRight()\"\n>\n @for (step of steps; track $index; let first = $first; let last = $last) {\n <div\n #stepElements\n class=\"progress-stepper-step\"\n [draggable]=\"false\"\n >\n <div class=\"progress-bar\" [class.first]=\"first\" [class.last]=\"last\">\n <div\n class=\"progress-bar-highlight\"\n [class.completed]=\"step.completed\"\n [class.roundedLeft]=\"first || (!steps[$index - 1].completed && step.completed)\"\n [class.roundedRight]=\"\n last || (!steps[$index + 1].completed && step.completed) || (first && !steps[$index + 1].completed)\n \"\n ></div>\n </div>\n <div class=\"progress-step-info\" [class.first]=\"first\" [class.last]=\"last\">\n <div class=\"progress-step-info-container\">\n <div class=\"title\">\n <div class=\"title-text\">{{ step.title }}</div>\n @if (step.completed) {\n <div class=\"title-completed-icon\">\n <ads-icon name=\"check_circle_filled\" size=\"xxs\" theme=\"success\" stroke=\"success\" />\n </div>\n }\n\n </div>\n @if (step?.date) {\n <div class=\"date\">{{ step?.date }}</div>\n }\n </div>\n\n </div>\n </div>\n }\n</div>\n", styles: [":host{box-sizing:border-box}.progress-stepper{display:grid;max-width:100%;-webkit-user-select:none;user-select:none;transition:margin .3s ease-in-out}.progress-stepper-step{display:flex;flex-direction:column;flex:1}.progress-step-info{display:flex;flex-direction:column;align-items:center;padding:8px}.progress-step-info.first{align-items:flex-start}.progress-step-info.last{align-items:flex-end}.progress-stepper-step:last-of-type .title,.progress-stepper-step:last-of-type .date{text-align:right}.title{color:var(--color-medium);font-size:13px;font-weight:500;display:flex;height:24px;align-items:center}.title-text{margin-right:6px;line-height:24px;white-space:nowrap}.title-completed-icon{line-height:24px;display:flex;align-items:center}.date{color:var(--color-black);font-size:12px;line-height:14px;white-space:nowrap}.progress-bar{width:100%;background-color:var(--color-medium-50);height:12px}.progress-bar.first,.progress-bar.first .progress-bar-highlight{border-top-left-radius:12px;border-bottom-left-radius:12px}.progress-bar.last,.progress-bar.last .progress-bar-highlight{border-top-right-radius:12px;border-bottom-right-radius:12px}.progress-bar-highlight{height:12px;width:100%}.progress-bar-highlight.completed{background-color:var(--color-success)}.progress-bar-highlight.roundedLeft{border-top-left-radius:12px;border-bottom-left-radius:12px}.progress-bar-highlight.roundedRight{border-top-right-radius:12px;border-bottom-right-radius:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: i3$
|
|
8533
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsProgressStepperComponent, isStandalone: false, selector: "ads-progress-stepper", inputs: { isMobile: "isMobile", containerPadding: "containerPadding", steps: "steps" }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }, { propertyName: "stepElements", predicate: ["stepElements"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n #stepper\n adsGesture\n class=\"progress-stepper\"\n [ngStyle]=\"styles?.step\"\n [draggable]=\"false\"\n (gestureleft)=\"onSwipeLeft()\"\n (gestureright)=\"onSwipeRight()\"\n>\n @for (step of steps; track $index; let first = $first; let last = $last) {\n <div\n #stepElements\n class=\"progress-stepper-step\"\n [draggable]=\"false\"\n >\n <div class=\"progress-bar\" [class.first]=\"first\" [class.last]=\"last\">\n <div\n class=\"progress-bar-highlight\"\n [class.completed]=\"step.completed\"\n [class.roundedLeft]=\"first || (!steps[$index - 1].completed && step.completed)\"\n [class.roundedRight]=\"\n last || (!steps[$index + 1].completed && step.completed) || (first && !steps[$index + 1].completed)\n \"\n ></div>\n </div>\n <div class=\"progress-step-info\" [class.first]=\"first\" [class.last]=\"last\">\n <div class=\"progress-step-info-container\">\n <div class=\"title\">\n <div class=\"title-text\">{{ step.title }}</div>\n @if (step.completed) {\n <div class=\"title-completed-icon\">\n <ads-icon name=\"check_circle_filled\" size=\"xxs\" theme=\"success\" stroke=\"success\" />\n </div>\n }\n\n </div>\n @if (step?.date) {\n <div class=\"date\">{{ step?.date }}</div>\n }\n </div>\n\n </div>\n </div>\n }\n</div>\n", styles: [":host{box-sizing:border-box}.progress-stepper{display:grid;max-width:100%;-webkit-user-select:none;user-select:none;transition:margin .3s ease-in-out}.progress-stepper-step{display:flex;flex-direction:column;flex:1}.progress-step-info{display:flex;flex-direction:column;align-items:center;padding:8px}.progress-step-info.first{align-items:flex-start}.progress-step-info.last{align-items:flex-end}.progress-stepper-step:last-of-type .title,.progress-stepper-step:last-of-type .date{text-align:right}.title{color:var(--color-medium);font-size:13px;font-weight:500;display:flex;height:24px;align-items:center}.title-text{margin-right:6px;line-height:24px;white-space:nowrap}.title-completed-icon{line-height:24px;display:flex;align-items:center}.date{color:var(--color-black);font-size:12px;line-height:14px;white-space:nowrap}.progress-bar{width:100%;background-color:var(--color-medium-50);height:12px}.progress-bar.first,.progress-bar.first .progress-bar-highlight{border-top-left-radius:12px;border-bottom-left-radius:12px}.progress-bar.last,.progress-bar.last .progress-bar-highlight{border-top-right-radius:12px;border-bottom-right-radius:12px}.progress-bar-highlight{height:12px;width:100%}.progress-bar-highlight.completed{background-color:var(--color-success)}.progress-bar-highlight.roundedLeft{border-top-left-radius:12px;border-bottom-left-radius:12px}.progress-bar-highlight.roundedRight{border-top-right-radius:12px;border-bottom-right-radius:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: i3$6.AdsGestureDirective, selector: "[adsGesture]", outputs: ["gesturedown", "gestureleft", "gestureright", "gestureup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8160
8534
|
}
|
|
8161
8535
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsProgressStepperComponent, decorators: [{
|
|
8162
8536
|
type: Component,
|