@ascentgl/ads-ui 0.0.70 → 0.0.72

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.
@@ -5636,29 +5636,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
5636
5636
  }] });
5637
5637
 
5638
5638
  class AdsSnackbarComponent {
5639
- constructor() {
5639
+ /** @ignore */
5640
+ constructor(elementRef) {
5641
+ this.elementRef = elementRef;
5640
5642
  this.data = inject(MAT_SNACK_BAR_DATA);
5641
5643
  this.snackBarRef = inject(MatSnackBarRef);
5642
5644
  this.defaultButtonCaption = 'Close';
5643
5645
  this.PanelClass = PanelClass;
5646
+ this.indexedDB = indexedDB;
5644
5647
  }
5645
5648
  get buttonPanelClass() {
5646
5649
  const panelClass = this.snackBarRef.containerInstance.snackBarConfig.panelClass;
5647
5650
  return panelClass === PanelClass.Error ? 'error' : 'secondary';
5648
5651
  }
5649
5652
  /** @ignore */
5653
+ get id() {
5654
+ return this.data.id || 'ads-snackbar';
5655
+ }
5656
+ /** @ignore */
5657
+ ngAfterViewInit() {
5658
+ const overlayWrapper = this.elementRef.nativeElement.closest('.cdk-global-overlay-wrapper');
5659
+ if (overlayWrapper) {
5660
+ overlayWrapper.style.zIndex = '1100';
5661
+ }
5662
+ }
5663
+ /** @ignore */
5650
5664
  onSnackbarClick() {
5651
5665
  if (this.data.closeOnClick) {
5652
5666
  this.snackBarRef.dismiss();
5653
5667
  }
5654
5668
  }
5655
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsSnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5656
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsSnackbarComponent, isStandalone: false, selector: "ads-snackbar", host: { listeners: { "click": "onSnackbarClick()" } }, ngImport: i0, template: "<div class=\"container\" (click)=\"onSnackbarClick()\">\n <div>\n @if (data.title) {\n <div class=\"snackbar-title\" [innerHTML]=\"data.title\"></div>\n }\n <span class=\"snackbar-details\" [innerHTML]=\"data.message\"></span>\n </div>\n @if (!data.hideActionButton) {\n <ads-button [variant]=\"buttonPanelClass\" (click)=\"snackBarRef.dismissWithAction(); $event.stopPropagation()\">\n {{ data.buttonCaption ?? defaultButtonCaption }}\n </ads-button>\n }\n</div>\n", styles: [".container{display:flex;justify-content:space-between;gap:24px;width:80vw}.container .snackbar-title{color:var(--color-white);font-size:16px;font-weight:400;line-height:21px}.container .snackbar-details{color:var(--color-white);font-size:14px;font-weight:400;line-height:18px}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"] }] }); }
5669
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsSnackbarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
5670
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsSnackbarComponent, isStandalone: false, selector: "ads-snackbar", host: { listeners: { "click": "onSnackbarClick()" } }, ngImport: i0, template: "<div class=\"container\" (click)=\"onSnackbarClick()\" [id]=\"id\">\n <div>\n @if (data.title) {\n <div class=\"snackbar-title\" [innerHTML]=\"data.title\" [id]=\"id + '-title'\"></div>\n }\n <span class=\"snackbar-details\" [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)=\"snackBarRef.dismissWithAction(); $event.stopPropagation()\"\n >\n {{ data.buttonCaption ?? defaultButtonCaption }}\n </ads-button>\n }\n</div>\n", styles: [".container{display:flex;justify-content:space-between;gap:24px;width:80vw}.container .snackbar-title{color:var(--color-white);font-size:16px;font-weight:400;line-height:21px}.container .snackbar-details{color:var(--color-white);font-size:14px;font-weight:400;line-height:18px}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"] }] }); }
5657
5671
  }
5658
5672
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsSnackbarComponent, decorators: [{
5659
5673
  type: Component,
5660
- args: [{ selector: 'ads-snackbar', standalone: false, template: "<div class=\"container\" (click)=\"onSnackbarClick()\">\n <div>\n @if (data.title) {\n <div class=\"snackbar-title\" [innerHTML]=\"data.title\"></div>\n }\n <span class=\"snackbar-details\" [innerHTML]=\"data.message\"></span>\n </div>\n @if (!data.hideActionButton) {\n <ads-button [variant]=\"buttonPanelClass\" (click)=\"snackBarRef.dismissWithAction(); $event.stopPropagation()\">\n {{ data.buttonCaption ?? defaultButtonCaption }}\n </ads-button>\n }\n</div>\n", styles: [".container{display:flex;justify-content:space-between;gap:24px;width:80vw}.container .snackbar-title{color:var(--color-white);font-size:16px;font-weight:400;line-height:21px}.container .snackbar-details{color:var(--color-white);font-size:14px;font-weight:400;line-height:18px}ads-button{white-space:nowrap}@media (width <= 500px){.container{width:100%}}\n"] }]
5661
- }], propDecorators: { onSnackbarClick: [{
5674
+ args: [{ selector: 'ads-snackbar', standalone: false, template: "<div class=\"container\" (click)=\"onSnackbarClick()\" [id]=\"id\">\n <div>\n @if (data.title) {\n <div class=\"snackbar-title\" [innerHTML]=\"data.title\" [id]=\"id + '-title'\"></div>\n }\n <span class=\"snackbar-details\" [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)=\"snackBarRef.dismissWithAction(); $event.stopPropagation()\"\n >\n {{ data.buttonCaption ?? defaultButtonCaption }}\n </ads-button>\n }\n</div>\n", styles: [".container{display:flex;justify-content:space-between;gap:24px;width:80vw}.container .snackbar-title{color:var(--color-white);font-size:16px;font-weight:400;line-height:21px}.container .snackbar-details{color:var(--color-white);font-size:14px;font-weight:400;line-height:18px}ads-button{white-space:nowrap}@media (width <= 500px){.container{width:100%}}\n"] }]
5675
+ }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onSnackbarClick: [{
5662
5676
  type: HostListener,
5663
5677
  args: ['click']
5664
5678
  }] } });
@@ -6392,11 +6406,11 @@ class AdsVerticalStepperComponent {
6392
6406
  this.focusedStepIndex = this.steps().findIndex((step) => step.status === VerticalStepStatus.Current);
6393
6407
  }
6394
6408
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsVerticalStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6395
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsVerticalStepperComponent, isStandalone: false, selector: "ads-vertical-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"vertical-stepper\">\n @for (step of steps(); track index; let first = $first; let last = $last; let index = $index) {\n <div\n class=\"step\"\n [class.focused]=\"step.status === VerticalStepStatus.Current\"\n [ngClass]=\"{ clickable: step.onClick }\"\n >\n @if (!first) {\n <div class=\"line-container\">\n <div></div>\n <div></div>\n </div>\n }\n\n <div\n class=\"step-icon-wrapper\"\n (click)=\"step.onClick && step.status !== VerticalStepStatus.Disabled ? step.onClick!(step) : null\"\n [ngClass]=\"step.status\"\n [class.clickable]=\"step.onClick && step.status !== VerticalStepStatus.Disabled\"\n >\n <div class=\"step-icon\" [matTooltip]=\"step.tooltip || ''\" [matTooltipDisabled]=\"!step.tooltip\">\n <ads-icon [name]=\"step.icon\" size=\"sm\" stroke=\"white\" theme=\"white\" />\n </div>\n\n <span class=\"title\">{{ step.title }}</span>\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:flex}.vertical-stepper{display:flex;flex-direction:column}.vertical-stepper .step{display:flex;justify-content:center;align-items:center;flex-direction:column}.vertical-stepper .step .line-container{display:flex;padding:8px 0}.vertical-stepper .step .line-container div{flex:1;height:40px}.vertical-stepper .step .line-container div:first-child{border-right:1px solid var(--color-light)}.vertical-stepper .step .line-container div:last-child{border-left:1px solid var(--color-light)}.vertical-stepper .step .step-icon-wrapper{display:flex;align-items:center;flex-direction:column}.vertical-stepper .step .step-icon-wrapper .step-icon{border-radius:80px;display:flex;justify-content:center;align-items:center;box-sizing:border-box}.vertical-stepper .step .step-icon-wrapper .title{line-height:21px;color:var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.clickable{cursor:pointer}.vertical-stepper .step .step-icon-wrapper.completed .step-icon{background-color:var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.current .step-icon{background-color:var(--color-secondary)}.vertical-stepper .step .step-icon-wrapper.current .title{color:var(--color-dark)}.vertical-stepper .step .step-icon-wrapper.disabled .step-icon{background-color:var(--color-white);border:2px solid var(--color-light)}.vertical-stepper .step .step-icon-wrapper.disabled .step-icon ::ng-deep ads-icon svg{fill:var(--color-light);stroke:var(--color-light)}.vertical-stepper .step .step-icon-wrapper.disabled .title{color:var(--color-medium)}.vertical-stepper .step .step-icon-wrapper.future .step-icon{background-color:transparent;border:2px solid var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.future .step-icon ::ng-deep ads-icon svg{fill:var(--color-primary);stroke:var(--color-primary)}.vertical-stepper .step:not(.focused) ::ng-deep .step-icon{height:40px;width:40px}.vertical-stepper .step:not(.focused) ::ng-deep .step-icon ads-icon,.vertical-stepper .step:not(.focused) ::ng-deep .step-icon svg{width:16px!important;height:16px!important}.vertical-stepper .step:not(.focused) .title{color:var(--color-medium)}.vertical-stepper .step.focused .step-icon{height:72px;width:72px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i8$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }] }); }
6409
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsVerticalStepperComponent, isStandalone: false, selector: "ads-vertical-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"vertical-stepper\">\n @for (step of steps(); track index; let first = $first; let last = $last; let index = $index) {\n <div\n class=\"step\"\n [class.focused]=\"step.status === VerticalStepStatus.Current\"\n [ngClass]=\"{ clickable: step.onClick }\"\n >\n @if (!first) {\n <div class=\"line-container\">\n <div></div>\n <div></div>\n </div>\n }\n\n <div\n [id]=\"step.id\"\n class=\"step-icon-wrapper\"\n (click)=\"step.onClick && step.status !== VerticalStepStatus.Disabled ? step.onClick!(step) : null\"\n [ngClass]=\"step.status\"\n [class.clickable]=\"step.onClick && step.status !== VerticalStepStatus.Disabled\"\n >\n <div class=\"step-icon\" [matTooltip]=\"step.tooltip || ''\" [matTooltipDisabled]=\"!step.tooltip\">\n <ads-icon [name]=\"step.icon\" size=\"sm\" stroke=\"white\" theme=\"white\" />\n </div>\n\n <span class=\"title\">{{ step.title }}</span>\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:flex}.vertical-stepper{display:flex;flex-direction:column}.vertical-stepper .step{display:flex;justify-content:center;align-items:center;flex-direction:column}.vertical-stepper .step .line-container{display:flex;padding:8px 0}.vertical-stepper .step .line-container div{flex:1;height:40px}.vertical-stepper .step .line-container div:first-child{border-right:1px solid var(--color-light)}.vertical-stepper .step .line-container div:last-child{border-left:1px solid var(--color-light)}.vertical-stepper .step .step-icon-wrapper{display:flex;align-items:center;flex-direction:column}.vertical-stepper .step .step-icon-wrapper .step-icon{border-radius:80px;display:flex;justify-content:center;align-items:center;box-sizing:border-box}.vertical-stepper .step .step-icon-wrapper .title{line-height:21px;color:var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.clickable{cursor:pointer}.vertical-stepper .step .step-icon-wrapper.completed .step-icon{background-color:var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.current .step-icon{background-color:var(--color-secondary)}.vertical-stepper .step .step-icon-wrapper.current .title{color:var(--color-dark)}.vertical-stepper .step .step-icon-wrapper.disabled .step-icon{background-color:var(--color-white);border:2px solid var(--color-light)}.vertical-stepper .step .step-icon-wrapper.disabled .step-icon ::ng-deep ads-icon svg{fill:var(--color-light);stroke:var(--color-light)}.vertical-stepper .step .step-icon-wrapper.disabled .title{color:var(--color-medium)}.vertical-stepper .step .step-icon-wrapper.future .step-icon{background-color:transparent;border:2px solid var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.future .step-icon ::ng-deep ads-icon svg{fill:var(--color-primary);stroke:var(--color-primary)}.vertical-stepper .step:not(.focused) ::ng-deep .step-icon{height:40px;width:40px}.vertical-stepper .step:not(.focused) ::ng-deep .step-icon ads-icon,.vertical-stepper .step:not(.focused) ::ng-deep .step-icon svg{width:16px!important;height:16px!important}.vertical-stepper .step:not(.focused) .title{color:var(--color-medium)}.vertical-stepper .step.focused .step-icon{height:72px;width:72px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i8$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }] }); }
6396
6410
  }
6397
6411
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsVerticalStepperComponent, decorators: [{
6398
6412
  type: Component,
6399
- args: [{ selector: 'ads-vertical-stepper', standalone: false, template: "<div class=\"vertical-stepper\">\n @for (step of steps(); track index; let first = $first; let last = $last; let index = $index) {\n <div\n class=\"step\"\n [class.focused]=\"step.status === VerticalStepStatus.Current\"\n [ngClass]=\"{ clickable: step.onClick }\"\n >\n @if (!first) {\n <div class=\"line-container\">\n <div></div>\n <div></div>\n </div>\n }\n\n <div\n class=\"step-icon-wrapper\"\n (click)=\"step.onClick && step.status !== VerticalStepStatus.Disabled ? step.onClick!(step) : null\"\n [ngClass]=\"step.status\"\n [class.clickable]=\"step.onClick && step.status !== VerticalStepStatus.Disabled\"\n >\n <div class=\"step-icon\" [matTooltip]=\"step.tooltip || ''\" [matTooltipDisabled]=\"!step.tooltip\">\n <ads-icon [name]=\"step.icon\" size=\"sm\" stroke=\"white\" theme=\"white\" />\n </div>\n\n <span class=\"title\">{{ step.title }}</span>\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:flex}.vertical-stepper{display:flex;flex-direction:column}.vertical-stepper .step{display:flex;justify-content:center;align-items:center;flex-direction:column}.vertical-stepper .step .line-container{display:flex;padding:8px 0}.vertical-stepper .step .line-container div{flex:1;height:40px}.vertical-stepper .step .line-container div:first-child{border-right:1px solid var(--color-light)}.vertical-stepper .step .line-container div:last-child{border-left:1px solid var(--color-light)}.vertical-stepper .step .step-icon-wrapper{display:flex;align-items:center;flex-direction:column}.vertical-stepper .step .step-icon-wrapper .step-icon{border-radius:80px;display:flex;justify-content:center;align-items:center;box-sizing:border-box}.vertical-stepper .step .step-icon-wrapper .title{line-height:21px;color:var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.clickable{cursor:pointer}.vertical-stepper .step .step-icon-wrapper.completed .step-icon{background-color:var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.current .step-icon{background-color:var(--color-secondary)}.vertical-stepper .step .step-icon-wrapper.current .title{color:var(--color-dark)}.vertical-stepper .step .step-icon-wrapper.disabled .step-icon{background-color:var(--color-white);border:2px solid var(--color-light)}.vertical-stepper .step .step-icon-wrapper.disabled .step-icon ::ng-deep ads-icon svg{fill:var(--color-light);stroke:var(--color-light)}.vertical-stepper .step .step-icon-wrapper.disabled .title{color:var(--color-medium)}.vertical-stepper .step .step-icon-wrapper.future .step-icon{background-color:transparent;border:2px solid var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.future .step-icon ::ng-deep ads-icon svg{fill:var(--color-primary);stroke:var(--color-primary)}.vertical-stepper .step:not(.focused) ::ng-deep .step-icon{height:40px;width:40px}.vertical-stepper .step:not(.focused) ::ng-deep .step-icon ads-icon,.vertical-stepper .step:not(.focused) ::ng-deep .step-icon svg{width:16px!important;height:16px!important}.vertical-stepper .step:not(.focused) .title{color:var(--color-medium)}.vertical-stepper .step.focused .step-icon{height:72px;width:72px}\n"] }]
6413
+ args: [{ selector: 'ads-vertical-stepper', standalone: false, template: "<div class=\"vertical-stepper\">\n @for (step of steps(); track index; let first = $first; let last = $last; let index = $index) {\n <div\n class=\"step\"\n [class.focused]=\"step.status === VerticalStepStatus.Current\"\n [ngClass]=\"{ clickable: step.onClick }\"\n >\n @if (!first) {\n <div class=\"line-container\">\n <div></div>\n <div></div>\n </div>\n }\n\n <div\n [id]=\"step.id\"\n class=\"step-icon-wrapper\"\n (click)=\"step.onClick && step.status !== VerticalStepStatus.Disabled ? step.onClick!(step) : null\"\n [ngClass]=\"step.status\"\n [class.clickable]=\"step.onClick && step.status !== VerticalStepStatus.Disabled\"\n >\n <div class=\"step-icon\" [matTooltip]=\"step.tooltip || ''\" [matTooltipDisabled]=\"!step.tooltip\">\n <ads-icon [name]=\"step.icon\" size=\"sm\" stroke=\"white\" theme=\"white\" />\n </div>\n\n <span class=\"title\">{{ step.title }}</span>\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:flex}.vertical-stepper{display:flex;flex-direction:column}.vertical-stepper .step{display:flex;justify-content:center;align-items:center;flex-direction:column}.vertical-stepper .step .line-container{display:flex;padding:8px 0}.vertical-stepper .step .line-container div{flex:1;height:40px}.vertical-stepper .step .line-container div:first-child{border-right:1px solid var(--color-light)}.vertical-stepper .step .line-container div:last-child{border-left:1px solid var(--color-light)}.vertical-stepper .step .step-icon-wrapper{display:flex;align-items:center;flex-direction:column}.vertical-stepper .step .step-icon-wrapper .step-icon{border-radius:80px;display:flex;justify-content:center;align-items:center;box-sizing:border-box}.vertical-stepper .step .step-icon-wrapper .title{line-height:21px;color:var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.clickable{cursor:pointer}.vertical-stepper .step .step-icon-wrapper.completed .step-icon{background-color:var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.current .step-icon{background-color:var(--color-secondary)}.vertical-stepper .step .step-icon-wrapper.current .title{color:var(--color-dark)}.vertical-stepper .step .step-icon-wrapper.disabled .step-icon{background-color:var(--color-white);border:2px solid var(--color-light)}.vertical-stepper .step .step-icon-wrapper.disabled .step-icon ::ng-deep ads-icon svg{fill:var(--color-light);stroke:var(--color-light)}.vertical-stepper .step .step-icon-wrapper.disabled .title{color:var(--color-medium)}.vertical-stepper .step .step-icon-wrapper.future .step-icon{background-color:transparent;border:2px solid var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.future .step-icon ::ng-deep ads-icon svg{fill:var(--color-primary);stroke:var(--color-primary)}.vertical-stepper .step:not(.focused) ::ng-deep .step-icon{height:40px;width:40px}.vertical-stepper .step:not(.focused) ::ng-deep .step-icon ads-icon,.vertical-stepper .step:not(.focused) ::ng-deep .step-icon svg{width:16px!important;height:16px!important}.vertical-stepper .step:not(.focused) .title{color:var(--color-medium)}.vertical-stepper .step.focused .step-icon{height:72px;width:72px}\n"] }]
6400
6414
  }] });
6401
6415
 
6402
6416
  class AdsVerticalStepperModule {
@@ -6471,11 +6485,11 @@ class AdsHorizontalNavBarComponent {
6471
6485
  }
6472
6486
  }
6473
6487
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsHorizontalNavBarComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
6474
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.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\">\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-link .mdc-tab-indicator{display:none}:host::ng-deep .mat-mdc-tab-link .mdc-tab__text-label{line-height:21px;font-weight:400;letter-spacing:normal;color:var(--color-medium)!important}:host::ng-deep .mat-mdc-tab-link.active{border-bottom:2.5px solid var(--color-secondary)}:host::ng-deep .mat-mdc-tab-link.active .mdc-tab__text-label{color:var(--color-secondary)!important;font-weight:600;line-height:21px}:host::ng-deep .mat-mdc-tab-link:hover{background-color:var(--color-light-30);border-bottom:2.5px solid var(--color-secondary-hover);border-top-left-radius:5px;border-top-right-radius:5px}:host::ng-deep .mat-mdc-tab-link:hover .mdc-tab__ripple:before{border-top-left-radius:5px;border-top-right-radius:5px}:host::ng-deep .mat-mdc-tab-link:active{background-color:var(--color-light);border-bottom:2.5px solid var(--color-secondary-pressed);border-top-left-radius:5px;border-top-right-radius:5px}:host::ng-deep .mat-mdc-tab-link:active .mdc-tab__ripple:before{border-top-left-radius:5px;border-top-right-radius:5px}\n"], dependencies: [{ kind: "component", type: i2$4.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i2$4.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$4.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }] }); }
6488
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.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 .mdc-tab-indicator{display:none}:host::ng-deep .mat-mdc-tab-link .mdc-tab__text-label{line-height:21px;font-weight:400;letter-spacing:normal;color:var(--color-medium)!important}:host::ng-deep .mat-mdc-tab-link.active{border-bottom:2.5px solid var(--color-secondary)}:host::ng-deep .mat-mdc-tab-link.active .mdc-tab__text-label{color:var(--color-secondary)!important;font-weight:600;line-height:21px}:host::ng-deep .mat-mdc-tab-link:hover{background-color:var(--color-light-30);border-bottom:2.5px solid var(--color-secondary-hover);border-top-left-radius:5px;border-top-right-radius:5px}:host::ng-deep .mat-mdc-tab-link:hover .mdc-tab__ripple:before{border-top-left-radius:5px;border-top-right-radius:5px}:host::ng-deep .mat-mdc-tab-link:active{background-color:var(--color-light);border-bottom:2.5px solid var(--color-secondary-pressed);border-top-left-radius:5px;border-top-right-radius:5px}:host::ng-deep .mat-mdc-tab-link:active .mdc-tab__ripple:before{border-top-left-radius:5px;border-top-right-radius:5px}\n"], dependencies: [{ kind: "component", type: i2$4.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i2$4.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$4.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }] }); }
6475
6489
  }
6476
6490
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsHorizontalNavBarComponent, decorators: [{
6477
6491
  type: Component,
6478
- args: [{ selector: 'ads-horizontal-nav-bar', standalone: false, template: "<nav mat-tab-nav-bar [disableRipple]=\"true\" [tabPanel]=\"tabPanel\">\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-link .mdc-tab-indicator{display:none}:host::ng-deep .mat-mdc-tab-link .mdc-tab__text-label{line-height:21px;font-weight:400;letter-spacing:normal;color:var(--color-medium)!important}:host::ng-deep .mat-mdc-tab-link.active{border-bottom:2.5px solid var(--color-secondary)}:host::ng-deep .mat-mdc-tab-link.active .mdc-tab__text-label{color:var(--color-secondary)!important;font-weight:600;line-height:21px}:host::ng-deep .mat-mdc-tab-link:hover{background-color:var(--color-light-30);border-bottom:2.5px solid var(--color-secondary-hover);border-top-left-radius:5px;border-top-right-radius:5px}:host::ng-deep .mat-mdc-tab-link:hover .mdc-tab__ripple:before{border-top-left-radius:5px;border-top-right-radius:5px}:host::ng-deep .mat-mdc-tab-link:active{background-color:var(--color-light);border-bottom:2.5px solid var(--color-secondary-pressed);border-top-left-radius:5px;border-top-right-radius:5px}:host::ng-deep .mat-mdc-tab-link:active .mdc-tab__ripple:before{border-top-left-radius:5px;border-top-right-radius:5px}\n"] }]
6492
+ args: [{ selector: 'ads-horizontal-nav-bar', standalone: false, 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 .mdc-tab-indicator{display:none}:host::ng-deep .mat-mdc-tab-link .mdc-tab__text-label{line-height:21px;font-weight:400;letter-spacing:normal;color:var(--color-medium)!important}:host::ng-deep .mat-mdc-tab-link.active{border-bottom:2.5px solid var(--color-secondary)}:host::ng-deep .mat-mdc-tab-link.active .mdc-tab__text-label{color:var(--color-secondary)!important;font-weight:600;line-height:21px}:host::ng-deep .mat-mdc-tab-link:hover{background-color:var(--color-light-30);border-bottom:2.5px solid var(--color-secondary-hover);border-top-left-radius:5px;border-top-right-radius:5px}:host::ng-deep .mat-mdc-tab-link:hover .mdc-tab__ripple:before{border-top-left-radius:5px;border-top-right-radius:5px}:host::ng-deep .mat-mdc-tab-link:active{background-color:var(--color-light);border-bottom:2.5px solid var(--color-secondary-pressed);border-top-left-radius:5px;border-top-right-radius:5px}:host::ng-deep .mat-mdc-tab-link:active .mdc-tab__ripple:before{border-top-left-radius:5px;border-top-right-radius:5px}\n"] }]
6479
6493
  }], ctorParameters: () => [{ type: i1$2.Router }], propDecorators: { links: [{
6480
6494
  type: Input
6481
6495
  }] } });
@@ -6575,7 +6589,7 @@ class AdsTimeFieldComponent extends AdsInputDropdownComponent {
6575
6589
  this.periodOptions = ['AM', 'PM'];
6576
6590
  this.errorMessages = {
6577
6591
  mask: 'Time must be in the format HH:mm.',
6578
- invalidTime: 'Enter a valid time in 12-hour format (01:00 - 12:59).'
6592
+ invalidTime: 'Enter a valid time in 12-hour format (01:00 - 12:59).',
6579
6593
  };
6580
6594
  /** @ignore */
6581
6595
  this.subscription = Subscription.EMPTY;
@@ -6585,10 +6599,9 @@ class AdsTimeFieldComponent extends AdsInputDropdownComponent {
6585
6599
  if (!this.militaryTime()) {
6586
6600
  this.syncValidators();
6587
6601
  // Combine both periodControl and timeControl value changes
6588
- this.subscription = combineLatest([
6589
- this.timeControl.valueChanges,
6590
- this.periodControl.valueChanges
6591
- ]).pipe(map(([timeStr, period]) => this.convertToMilitaryTime(timeStr, period))).subscribe((militaryTime) => {
6602
+ this.subscription = combineLatest([this.timeControl.valueChanges, this.periodControl.valueChanges])
6603
+ .pipe(map(([timeStr, period]) => this.convertToMilitaryTime(timeStr, period)))
6604
+ .subscribe((militaryTime) => {
6592
6605
  this.valueControl.setValue(militaryTime);
6593
6606
  });
6594
6607
  }