nw-style-guide 20.4.1 → 20.4.2

package/autofocus/index.d.ts

@@ -1,9 +1,8 @@
 import * as i0 from '@angular/core';
-import { OnInit, ElementRef } from '@angular/core';
+import { OnInit } from '@angular/core';
 
 declare class AutoFocusDirective implements OnInit {
     private _elRef;
-    constructor(_elRef: ElementRef<HTMLElement>);
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AutoFocusDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<AutoFocusDirective, "[nwAutofocus]", ["nw-autofocus"], {}, {}, never, never, true, never>;

package/carousel/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnInit, AfterViewInit, AfterContentInit, OnChanges, OnDestroy, EventEmitter, ElementRef, QueryList, Renderer2, ChangeDetectorRef, SimpleChanges } from '@angular/core';
+import { OnInit, AfterViewInit, AfterContentInit, OnChanges, OnDestroy, EventEmitter, ElementRef, QueryList, SimpleChanges } from '@angular/core';
 
 declare class CarouselSlideDirective {
     snapAlign: 'none' | 'start' | 'end' | 'center';
@@ -23,7 +23,6 @@ declare class CarouselComponent implements OnInit, AfterViewInit, AfterContentIn
     pages: number[];
     private _windowResizeSub;
     private _slidesSub;
-    constructor(_renderer: Renderer2, _cdRef: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;

package/charts/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { SimpleChange, OnInit, AfterViewInit, OnDestroy, ElementRef, EventEmitter, OnChanges, SimpleChanges, Renderer2 } from '@angular/core';
+import { SimpleChange, OnInit, AfterViewInit, OnDestroy, ElementRef, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
 import { Selection } from 'd3-selection';
 import { Observable } from 'rxjs';
 import { CurveFactory, Line, Area } from 'd3-shape';
@@ -42,7 +42,6 @@ declare class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
     parentElement: HTMLElement;
     private _destroyed$;
     private _chartDimensionsChange$;
-    constructor(_elRef: ElementRef<SVGSVGElement>, chartUtils: ChartUtils);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     get width(): number;
@@ -82,7 +81,6 @@ declare class PathDirective implements OnInit, OnChanges, OnDestroy {
     path: Selection<SVGPathElement, [number, number][], SVGElement, any>;
     yScale: ScaleLinear<number, number>;
     private _chartResizeSub;
-    constructor(_elRef: ElementRef, _chart: ChartComponent, _chartUtils: ChartUtils);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     setDomains(): void;
@@ -115,7 +113,6 @@ declare abstract class AxisBase implements OnInit, OnChanges, OnDestroy {
     axisSelection: Selection<SVGGElement, [number, number][], SVGElement, any>;
     axisLabelSelection: Selection<SVGTextElement, any, HTMLElement, any>;
     private _chartResizeSub;
-    constructor(_elRef: ElementRef, chart: ChartComponent, _chartUtils: ChartUtils);
     ngOnInit(): void;
     ngOnChanges(c: SimpleChanges): void;
     createAxis(): any;
@@ -137,7 +134,6 @@ declare class XAxisDirective extends AxisBase {
     domain: [number, number];
     scale: NwXAxisScale;
     scaleUpdated: EventEmitter<NwXAxisScale>;
-    constructor(elRef: ElementRef, chart: ChartComponent, chartUtils: ChartUtils);
     createAxis(): void;
     setTicks(): void;
     setDomain(): void;
@@ -153,7 +149,6 @@ declare class YAxisDirective extends AxisBase {
     domain: [number, number];
     scaleUpdated: EventEmitter<ScaleLinear<number, number>>;
     scale: ScaleLinear<number, number>;
-    constructor(elRef: ElementRef, chart: ChartComponent, chartUtils: ChartUtils);
     createAxis(): void;
     setTicks(): void;
     setDomain(): void;
@@ -177,7 +172,6 @@ declare class CircleDirective implements OnInit, OnChanges, OnDestroy {
     circle: Selection<SVGCircleElement, [number, number], SVGElement, any>;
     yScale: ScaleLinear<number, number>;
     private _chartResizeSub;
-    constructor(_elRef: ElementRef, _chart: ChartComponent, _chartUtils: ChartUtils);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     setDomains(): void;
@@ -200,7 +194,6 @@ declare class BrushDirective implements OnInit, OnDestroy, OnChanges {
     brushEnd: EventEmitter<[[number, number], [number, number]]>;
     brushSelection: Selection<SVGGElement, any, HTMLElement, any>;
     brush: BrushBehavior<any>;
-    constructor(_elRef: ElementRef, _chart: ChartComponent);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     initialize(): void;
@@ -235,7 +228,6 @@ declare class BarDirective implements OnInit, OnChanges, OnDestroy {
     rect: Selection<SVGRectElement, [number, number], SVGElement, any>;
     yScale: ScaleLinear<number, number>;
     private _chartResizeSub;
-    constructor(_elRef: ElementRef, _chart: ChartComponent, _chartUtils: ChartUtils);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     setDomains(): void;
@@ -267,7 +259,6 @@ declare class AreaDirective implements OnInit, OnChanges, OnDestroy {
     area: Area<AreaDatum>;
     yScale: ScaleLinear<number, number>;
     private _chartResizeSub;
-    constructor(_elRef: ElementRef, _chart: ChartComponent, _chartUtils: ChartUtils);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     setDomains(): void;
@@ -295,7 +286,6 @@ declare class ChartTooltipDirective implements OnChanges, AfterViewInit {
     offsetX: number;
     private _width;
     private _height;
-    constructor(_elRef: ElementRef, _renderer: Renderer2);
     ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     private _setTooltipSize;
@@ -316,7 +306,6 @@ declare class ForeignObjectDirective implements OnInit, OnChanges, OnDestroy {
     foreignObject: Selection<SVGForeignObjectElement, [number, number], SVGElement, any>;
     yScale: ScaleLinear<number, number>;
     private _chartResizeSub;
-    constructor(_elRef: ElementRef, _chart: ChartComponent, _chartUtils: ChartUtils);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     setDomains(): void;
@@ -344,7 +333,6 @@ declare class TextDirective implements OnInit, OnChanges, OnDestroy {
     text: Selection<SVGTextElement, [number, number], SVGElement, any>;
     yScale: ScaleLinear<number, number>;
     private _chartResizeSub;
-    constructor(_elRef: ElementRef<SVGTextElement>, _chart: ChartComponent, _chartUtils: ChartUtils);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     setDomains(): void;

package/email-input/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnInit, OnDestroy, EventEmitter, ElementRef, ChangeDetectorRef } from '@angular/core';
+import { OnInit, OnDestroy, EventEmitter, ElementRef } from '@angular/core';
 import { FormControl } from '@angular/forms';
 
 interface IValidationChange {
@@ -30,7 +30,6 @@ declare class EmailInputComponent implements OnInit, OnDestroy {
     private _validationFormControl;
     private _submitKeys;
     private _valueChangesSub;
-    constructor(_cdRef: ChangeDetectorRef);
     ngOnInit(): void;
     private _subscribeToValueChanges;
     removeEmail(email: string): void;

package/feature-alerts/README.md

@@ -1,4 +1,4 @@
-*app.module.ts*
+_app.module.ts_
 
 ```javascript
 import { FeatureAlertsModule } from 'nw-style-guide/feature-alerts';
@@ -18,7 +18,7 @@ import { FeatureAlertsModule } from 'nw-style-guide/feature-alerts';
 export class AppModule { }
 ```
 
-*my-feature.component.ts*
+_my-feature.component.ts_
 
 ```javascript
 import { IFeatureAlertParams } from "nw-style-guide/feature-alerts";
@@ -44,15 +44,15 @@ export class MyFeature {
             title: 'Introducing % Change',
             message: 'Some short custom message.',
             containerClass: 'reporting-percentage-change-cta',   // all feature alerts share .feature-alert class but you can add more
-            triggers: '',                                        // (space separated) mouseenter focus click dblclick keypress 
+            triggers: '',                                        // (space separated) mouseenter focus click dblclick keypress
             placement: 'bottom',
             container: ''                                        // '' or 'body' or any other DOM container
         };
     }
-    
+
     onCTAClick() {
         // the parent component can react to 'Try it Now' button clicked in the feature alert
-        // e.g. navigate to feature, highlight some UI components,    
+        // e.g. navigate to feature, highlight some UI components,
     }
 
 }

package/feature-alerts/index.d.ts

@@ -1,19 +1,13 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectorRef, OnInit, OnDestroy, Provider } from '@angular/core';
+import { OnInit, OnDestroy, Provider } from '@angular/core';
 import { Observable } from 'rxjs';
 
-declare class WindowRef {
-    get nativeWindow(): Window & typeof globalThis;
-    static ɵfac: i0.ɵɵFactoryDeclaration<WindowRef, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<WindowRef>;
-}
-
 declare class FeatureAlertsService {
     private _w;
     LOCAL_STORAGE_KEY: string;
     private _dismissSubject;
     dismiss$: Observable<string>;
-    constructor(_w: WindowRef);
+    constructor();
     dismiss(id: string): void;
     enable(id: string): void;
     wasAlertDismissed(id: string): boolean;
@@ -39,7 +33,6 @@ declare class HotspotComponent {
     private _cdRef;
     position: string;
     id: any;
-    constructor(_featureAlertsService: FeatureAlertsService, _cdRef: ChangeDetectorRef);
     get isOpen(): boolean;
     dismiss(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<HotspotComponent, never>;
@@ -79,6 +72,12 @@ declare class FeatureAlertsDirective implements OnInit, OnDestroy {
     static ɵdir: i0.ɵɵDirectiveDeclaration<FeatureAlertsDirective, "[nwFeatureAlert]", never, { "nwFeatureAlert": { "alias": "nwFeatureAlert"; "required": false; }; }, {}, never, never, true, never>;
 }
 
+declare class WindowRef {
+    get nativeWindow(): Window & typeof globalThis;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WindowRef, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<WindowRef>;
+}
+
 declare function provideFeatureAlerts(): Provider[];
 
 export { FeatureAlertsDirective, FeatureAlertsService, HotspotComponent, WindowRef, provideFeatureAlerts };

package/fesm2022/nw-style-guide-animations.mjs

@@ -1,5 +1,5 @@
-const NW_EASING = "cubic-bezier(0.49, 0.07, 0.2, 0.99)";
-const NW_DURATION = "300ms";
+const NW_EASING = 'cubic-bezier(0.49, 0.07, 0.2, 0.99)';
+const NW_DURATION = '300ms';
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/nw-style-guide-animations.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"nw-style-guide-animations.mjs","sources":["../../../projects/nw-style-guide/animations/defaults.ts","../../../projects/nw-style-guide/animations/nw-style-guide-animations.ts"],"sourcesContent":["export const NW_EASING: string = \"cubic-bezier(0.49, 0.07, 0.2, 0.99)\";\nexport const NW_DURATION: string = \"300ms\";\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"AAAO,MAAM,SAAS,GAAW;AAC1B,MAAM,WAAW,GAAW;;ACDnC;;AAEG;;;;"}
+{"version":3,"file":"nw-style-guide-animations.mjs","sources":["../../../projects/nw-style-guide/animations/defaults.ts","../../../projects/nw-style-guide/animations/nw-style-guide-animations.ts"],"sourcesContent":["export const NW_EASING: string = 'cubic-bezier(0.49, 0.07, 0.2, 0.99)';\nexport const NW_DURATION: string = '300ms';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"AAAO,MAAM,SAAS,GAAW;AAC1B,MAAM,WAAW,GAAW;;ACDnC;;AAEG;;;;"}

package/fesm2022/nw-style-guide-autofocus.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { Directive } from '@angular/core';
+import { inject, ElementRef, Directive } from '@angular/core';
 
 class AutoFocusDirective {
-    constructor(_elRef) {
-        this._elRef = _elRef;
+    constructor() {
+        this._elRef = inject(ElementRef);
     }
     ngOnInit() {
         this._elRef.nativeElement.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AutoFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AutoFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: AutoFocusDirective, isStandalone: true, selector: "[nwAutofocus]", exportAs: ["nw-autofocus"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AutoFocusDirective, decorators: [{
@@ -17,7 +17,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     selector: '[nwAutofocus]',
                     exportAs: 'nw-autofocus'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+        }] });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/nw-style-guide-autofocus.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"nw-style-guide-autofocus.mjs","sources":["../../../projects/nw-style-guide/autofocus/autofocus.directive.ts","../../../projects/nw-style-guide/autofocus/nw-style-guide-autofocus.ts"],"sourcesContent":["import { Directive, OnInit, ElementRef } from \"@angular/core\";\n\n@Directive({\n    selector: '[nwAutofocus]',\n    exportAs: 'nw-autofocus'\n})\nexport class AutoFocusDirective implements OnInit {\n\n    constructor(private _elRef: ElementRef<HTMLElement>) {}\n\n    ngOnInit() {\n        this._elRef.nativeElement.focus();\n    }\n\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAMa,kBAAkB,CAAA;AAE3B,IAAA,WAAA,CAAoB,MAA+B,EAAA;QAA/B,IAAA,CAAA,MAAM,GAAN,MAAM;IAA4B;IAEtD,QAAQ,GAAA;AACJ,QAAA,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,KAAK,EAAE;IACrC;+GANS,kBAAkB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;4FAAlB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAJ9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,eAAe;AACzB,oBAAA,QAAQ,EAAE;AACb,iBAAA;;;ACLD;;AAEG;;;;"}
+{"version":3,"file":"nw-style-guide-autofocus.mjs","sources":["../../../projects/nw-style-guide/autofocus/autofocus.directive.ts","../../../projects/nw-style-guide/autofocus/nw-style-guide-autofocus.ts"],"sourcesContent":["import { Directive, OnInit, ElementRef, inject } from '@angular/core';\n\n@Directive({\n    selector: '[nwAutofocus]',\n    exportAs: 'nw-autofocus'\n})\nexport class AutoFocusDirective implements OnInit {\n    private _elRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n    ngOnInit() {\n        this._elRef.nativeElement.focus();\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAMa,kBAAkB,CAAA;AAJ/B,IAAA,WAAA,GAAA;AAKY,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAA0B,UAAU,CAAC;AAK/D,IAAA;IAHG,QAAQ,GAAA;AACJ,QAAA,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,KAAK,EAAE;IACrC;+GALS,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;4FAAlB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAJ9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,eAAe;AACzB,oBAAA,QAAQ,EAAE;AACb,iBAAA;;;ACLD;;AAEG;;;;"}

package/fesm2022/nw-style-guide-carousel.mjs

@@ -1,6 +1,5 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Input, Directive, EventEmitter, ContentChildren, ViewChild, Output, ChangeDetectionStrategy, Component } from '@angular/core';
-import { trigger, transition, style, AUTO_STYLE, animate } from '@angular/animations';
+import { HostBinding, Input, Directive, inject, Renderer2, ChangeDetectorRef, EventEmitter, ContentChildren, ViewChild, Output, ChangeDetectionStrategy, Component } from '@angular/core';
 import { debounceTime } from 'rxjs/operators';
 import { fromEvent } from 'rxjs';
 import { NgIf, NgStyle, NgClass, NgFor } from '@angular/common';
@@ -26,15 +25,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             }] } });
 
 class CarouselComponent {
-    constructor(_renderer, _cdRef) {
-        this._renderer = _renderer;
-        this._cdRef = _cdRef;
+    constructor() {
+        this._renderer = inject(Renderer2);
+        this._cdRef = inject(ChangeDetectorRef);
         this.showPageIndicator = true;
         this.showPagination = true;
         this.showMask = true;
         this.maskColor = '#ffffff';
         this.currPage = 0;
-        this.noResultsText = "No results";
+        this.noResultsText = 'No results';
         this.currPageChange = new EventEmitter();
         this.pages = [];
     }
@@ -112,53 +111,80 @@ class CarouselComponent {
         this._windowResizeSub.unsubscribe();
         this._slidesSub.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CarouselComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: CarouselComponent, isStandalone: true, selector: "nw-carousel", inputs: { showPageIndicator: "showPageIndicator", showPagination: "showPagination", showMask: "showMask", maskColor: "maskColor", containerClass: "containerClass", currPage: "currPage", noResultsText: "noResultsText" }, outputs: { currPageChange: "currPageChange" }, queries: [{ propertyName: "slides", predicate: CarouselSlideDirective }], viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, static: true }], exportAs: ["nw-carousel"], usesOnChanges: true, ngImport: i0, template: `
         <div class="carousel-container">
-            <div class="pagination-container" *ngIf="showPagination && !isFirstPage">
-                <button class="btn btn-carousel btn-carousel-prev" (click)="prev()"></button>
+            <div
+                class="pagination-container"
+                *ngIf="showPagination && !isFirstPage">
+                <button
+                    class="btn btn-carousel btn-carousel-prev"
+                    (click)="prev()"></button>
             </div>
 
             <ng-content select=".pagination-left"></ng-content>
 
             <div class="carousel-content">
-                <div class="pagination-masks" *ngIf="showMask && pages.length > 1">
-                    <div class="pagination-mask pagination-mask-start" *ngIf="!isFirstPage" @collapse
-                        [ngStyle]="maskStyles"></div>
+                <div
+                    class="pagination-masks"
+                    *ngIf="showMask && pages.length > 1">
+                    <div
+                        class="collapse-expand-grid-container collapse-expand-container-start"
+                        *ngIf="!isFirstPage"
+                        animate.leave="collapse-animation">
+                        <div
+                            class="pagination-mask pagination-mask-start"
+                            [ngStyle]="maskStyles"></div>
+                    </div>
 
-                    <div class="pagination-mask pagination-mask-end" *ngIf="!isLastPage" @collapse
-                        [ngStyle]="maskStyles"></div>
+                    <div
+                        class="collapse-expand-grid-container collapse-expand-container-end"
+                        *ngIf="!isLastPage"
+                        animate.leave="collapse-animation">
+                        <div
+                            class="pagination-mask pagination-mask-end"
+                            [ngStyle]="maskStyles"></div>
+                    </div>
                 </div>
 
-                <div class="carousel" #carousel [ngClass]="containerClass">
+                <div
+                    class="carousel"
+                    #carousel
+                    [ngClass]="containerClass">
                     <ng-content></ng-content>
 
-                    <p *ngIf="slides.length === 0" class="nw-text text-center">{{noResultsText}}</p>
+                    <p
+                        *ngIf="slides.length === 0"
+                        class="nw-text text-center">
+                        {{ noResultsText }}
+                    </p>
                 </div>
             </div>
 
-            <div class="pagination-container" *ngIf="showPagination && !isLastPage">
-                <button class="btn btn-carousel btn-carousel-next" (click)="next()"></button>
+            <div
+                class="pagination-container"
+                *ngIf="showPagination && !isLastPage">
+                <button
+                    class="btn btn-carousel btn-carousel-next"
+                    (click)="next()"></button>
             </div>
 
             <ng-content select=".pagination-right"></ng-content>
         </div>
 
-        <div class="page-indicators" *ngIf="showPageIndicator && pages.length > 1">
-            <a href="javascript:;" class="page-indicator" *ngFor="let page of pages"
+        <div
+            class="page-indicators"
+            *ngIf="showPageIndicator && pages.length > 1">
+            <a
+                href="javascript:;"
+                class="page-indicator"
+                *ngFor="let page of pages"
                 [class.active]="page === currPage"
                 (click)="goToPage(page)"></a>
         </div>
 
         <ng-content select=".pagination-indicators"></ng-content>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
-            trigger('collapse', [
-                transition(':leave', [
-                    style({ width: AUTO_STYLE }),
-                    animate(`300ms linear`, style({ width: 0 }))
-                ])
-            ])
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CarouselComponent, decorators: [{
             type: Component,
@@ -166,37 +192,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     selector: 'nw-carousel',
                     template: `
         <div class="carousel-container">
-            <div class="pagination-container" *ngIf="showPagination && !isFirstPage">
-                <button class="btn btn-carousel btn-carousel-prev" (click)="prev()"></button>
+            <div
+                class="pagination-container"
+                *ngIf="showPagination && !isFirstPage">
+                <button
+                    class="btn btn-carousel btn-carousel-prev"
+                    (click)="prev()"></button>
             </div>
 
             <ng-content select=".pagination-left"></ng-content>
 
             <div class="carousel-content">
-                <div class="pagination-masks" *ngIf="showMask && pages.length > 1">
-                    <div class="pagination-mask pagination-mask-start" *ngIf="!isFirstPage" @collapse
-                        [ngStyle]="maskStyles"></div>
+                <div
+                    class="pagination-masks"
+                    *ngIf="showMask && pages.length > 1">
+                    <div
+                        class="collapse-expand-grid-container collapse-expand-container-start"
+                        *ngIf="!isFirstPage"
+                        animate.leave="collapse-animation">
+                        <div
+                            class="pagination-mask pagination-mask-start"
+                            [ngStyle]="maskStyles"></div>
+                    </div>
 
-                    <div class="pagination-mask pagination-mask-end" *ngIf="!isLastPage" @collapse
-                        [ngStyle]="maskStyles"></div>
+                    <div
+                        class="collapse-expand-grid-container collapse-expand-container-end"
+                        *ngIf="!isLastPage"
+                        animate.leave="collapse-animation">
+                        <div
+                            class="pagination-mask pagination-mask-end"
+                            [ngStyle]="maskStyles"></div>
+                    </div>
                 </div>
 
-                <div class="carousel" #carousel [ngClass]="containerClass">
+                <div
+                    class="carousel"
+                    #carousel
+                    [ngClass]="containerClass">
                     <ng-content></ng-content>
 
-                    <p *ngIf="slides.length === 0" class="nw-text text-center">{{noResultsText}}</p>
+                    <p
+                        *ngIf="slides.length === 0"
+                        class="nw-text text-center">
+                        {{ noResultsText }}
+                    </p>
                 </div>
             </div>
 
-            <div class="pagination-container" *ngIf="showPagination && !isLastPage">
-                <button class="btn btn-carousel btn-carousel-next" (click)="next()"></button>
+            <div
+                class="pagination-container"
+                *ngIf="showPagination && !isLastPage">
+                <button
+                    class="btn btn-carousel btn-carousel-next"
+                    (click)="next()"></button>
             </div>
 
             <ng-content select=".pagination-right"></ng-content>
         </div>
 
-        <div class="page-indicators" *ngIf="showPageIndicator && pages.length > 1">
-            <a href="javascript:;" class="page-indicator" *ngFor="let page of pages"
+        <div
+            class="page-indicators"
+            *ngIf="showPageIndicator && pages.length > 1">
+            <a
+                href="javascript:;"
+                class="page-indicator"
+                *ngFor="let page of pages"
                 [class.active]="page === currPage"
                 (click)="goToPage(page)"></a>
         </div>
@@ -205,17 +265,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     exportAs: 'nw-carousel',
-                    animations: [
-                        trigger('collapse', [
-                            transition(':leave', [
-                                style({ width: AUTO_STYLE }),
-                                animate(`300ms linear`, style({ width: 0 }))
-                            ])
-                        ])
-                    ],
                     imports: [NgIf, NgStyle, NgClass, NgFor]
                 }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { showPageIndicator: [{
+        }], propDecorators: { showPageIndicator: [{
                 type: Input
             }], showPagination: [{
                 type: Input
@@ -243,10 +295,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * Export cooperating directives
  * https://v17.angular.io/guide/standalone-components#standalone-components-for-library-authors
  */
-const CAROUSEL_DIRECTIVES = [
-    CarouselComponent,
-    CarouselSlideDirective
-];
+const CAROUSEL_DIRECTIVES = [CarouselComponent, CarouselSlideDirective];
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/nw-style-guide-carousel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"nw-style-guide-carousel.mjs","sources":["../../../projects/nw-style-guide/carousel/carousel-slide.directive.ts","../../../projects/nw-style-guide/carousel/carousel.component.ts","../../../projects/nw-style-guide/carousel/public-api.ts","../../../projects/nw-style-guide/carousel/nw-style-guide-carousel.ts"],"sourcesContent":["import { Directive, Input, HostBinding } from '@angular/core';\n\n@Directive({\n    selector: '[nwCarouselSlide]',\n    exportAs: 'nw-carousel-slide'\n})\nexport class CarouselSlideDirective {\n\n    @HostBinding('style.scroll-snap-align')\n    @Input() snapAlign: 'none' | 'start' | 'end' | 'center' = 'start';\n\n}\n","import { Component, ChangeDetectionStrategy, Input, ElementRef, ViewChild, Renderer2, ChangeDetectorRef, AfterViewInit, OnDestroy, OnInit, Output, EventEmitter, OnChanges, SimpleChanges, ContentChildren, QueryList, AfterContentInit } from '@angular/core';\nimport { trigger, transition, style, animate, AUTO_STYLE } from '@angular/animations';\nimport { debounceTime } from \"rxjs/operators\";\nimport { CarouselSlideDirective } from \"./carousel-slide.directive\";\nimport { Subscription, fromEvent } from 'rxjs';\nimport { NgIf, NgStyle, NgClass, NgFor } from '@angular/common';\n\n@Component({\n    selector: 'nw-carousel',\n    template: `\n        <div class=\"carousel-container\">\n            <div class=\"pagination-container\" *ngIf=\"showPagination && !isFirstPage\">\n                <button class=\"btn btn-carousel btn-carousel-prev\" (click)=\"prev()\"></button>\n            </div>\n\n            <ng-content select=\".pagination-left\"></ng-content>\n\n            <div class=\"carousel-content\">\n                <div class=\"pagination-masks\" *ngIf=\"showMask && pages.length > 1\">\n                    <div class=\"pagination-mask pagination-mask-start\" *ngIf=\"!isFirstPage\" @collapse\n                        [ngStyle]=\"maskStyles\"></div>\n\n                    <div class=\"pagination-mask pagination-mask-end\" *ngIf=\"!isLastPage\" @collapse\n                        [ngStyle]=\"maskStyles\"></div>\n                </div>\n\n                <div class=\"carousel\" #carousel [ngClass]=\"containerClass\">\n                    <ng-content></ng-content>\n\n                    <p *ngIf=\"slides.length === 0\" class=\"nw-text text-center\">{{noResultsText}}</p>\n                </div>\n            </div>\n\n            <div class=\"pagination-container\" *ngIf=\"showPagination && !isLastPage\">\n                <button class=\"btn btn-carousel btn-carousel-next\" (click)=\"next()\"></button>\n            </div>\n\n            <ng-content select=\".pagination-right\"></ng-content>\n        </div>\n\n        <div class=\"page-indicators\" *ngIf=\"showPageIndicator && pages.length > 1\">\n            <a href=\"javascript:;\" class=\"page-indicator\" *ngFor=\"let page of pages\"\n                [class.active]=\"page === currPage\"\n                (click)=\"goToPage(page)\"></a>\n        </div>\n\n        <ng-content select=\".pagination-indicators\"></ng-content>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    exportAs: 'nw-carousel',\n    animations: [\n        trigger('collapse', [\n            transition(':leave', [\n                style({ width: AUTO_STYLE }),\n                animate(`300ms linear`, style({ width: 0 }))\n            ])\n        ])\n    ],\n    imports: [NgIf, NgStyle, NgClass, NgFor]\n})\nexport class CarouselComponent implements OnInit, AfterViewInit, AfterContentInit, OnChanges, OnDestroy {\n\n    @Input() showPageIndicator: boolean = true;\n    @Input() showPagination: boolean = true;\n    @Input() showMask: boolean = true;\n    @Input() maskColor: string = '#ffffff';\n    @Input() containerClass: string;\n    @Input() currPage: number = 0;\n    @Input() noResultsText: string = \"No results\";\n\n    @Output() currPageChange: EventEmitter<number> = new EventEmitter();\n\n    @ViewChild('carousel', { static: true }) carousel: ElementRef;\n\n    @ContentChildren(CarouselSlideDirective) slides: QueryList<CarouselSlideDirective>;\n\n    public pages: number[] = [];\n\n    private _windowResizeSub: Subscription;\n    private _slidesSub: Subscription;\n\n    constructor(\n        private _renderer: Renderer2,\n        private _cdRef: ChangeDetectorRef) {}\n\n    ngOnInit() {\n        this.subscribeToWindowResize();\n    }\n\n    ngOnChanges(changes: SimpleChanges) {\n        if (changes.currPage && changes.currPage.previousValue !== changes.currPage.currentValue) {\n            this._setScrollPosition(this.currPage);\n        }\n    }\n\n    ngAfterViewInit() {\n        this.updatePages();\n\n        if (this.currPage !== 0) {\n            this._setScrollPosition(this.currPage);\n        }\n    }\n\n    ngAfterContentInit() {\n        this._slidesSub = this.slides.changes.subscribe(res => {\n            this.updatePages();\n        });\n    }\n\n    next() {\n        this.goToPage(Math.min(this.pages.length - 1, this.currPage + 1));\n    }\n\n    prev() {\n        this.goToPage(Math.max(0, this.currPage - 1));\n    }\n\n    goToPage(page: number) {\n        this.currPage = page;\n        this.currPageChange.emit(this.currPage);\n\n        this._setScrollPosition(page);\n    }\n\n    private _setScrollPosition(page: number): void {\n        const carouselWidth: number = this.carouselNativeElement.clientWidth;\n        const newScrollPosition: number = page * carouselWidth;\n\n        this._renderer.setProperty(this.carouselNativeElement, 'scrollLeft', newScrollPosition);\n    }\n\n    getPages() {\n        const estimatedPages: number = +(this.carouselNativeElement.scrollWidth / this.carouselNativeElement.clientWidth).toFixed(1);\n        const numOfPages: number = Math.ceil(estimatedPages);\n\n        return [...Array(numOfPages).fill(1)].map((_, i) => i);\n    }\n\n    updatePages(): void {\n        this.pages = this.getPages();\n        this._cdRef.detectChanges();\n    }\n\n    get carouselNativeElement(): HTMLDivElement {\n        return (this.carousel.nativeElement as HTMLDivElement);\n    }\n\n    get isFirstPage(): boolean {\n        return this.currPage === 0;\n    }\n\n    get isLastPage(): boolean {\n        return this.currPage === this.pages[this.pages.length - 1];\n    }\n\n    get maskStyles() {\n        return {\n            '-webkit-mask-image': `linear-gradient(to left, rgba(0,0,0,0), ${this.maskColor})`,\n            'background-color': `${this.maskColor}`\n        };\n    }\n\n    get maskGradient() {\n        return `linear-gradient(to left, rgba(0,0,0,0), ${this.maskColor})`;\n    }\n\n    subscribeToWindowResize() {\n        this._windowResizeSub = fromEvent(window, 'resize')\n            .pipe(debounceTime(100))\n            .subscribe(_ => {\n                this.goToPage(0);\n                this.updatePages();\n            });\n    }\n\n    ngOnDestroy() {\n        this._windowResizeSub.unsubscribe();\n        this._slidesSub.unsubscribe();\n    }\n\n}\n","export { CarouselComponent } from './carousel.component';\nexport { CarouselSlideDirective } from './carousel-slide.directive';\n\nimport { CarouselComponent } from './carousel.component';\nimport { CarouselSlideDirective } from './carousel-slide.directive';\n\n/**\n * Export cooperating directives\n * https://v17.angular.io/guide/standalone-components#standalone-components-for-library-authors\n */\nexport const CAROUSEL_DIRECTIVES = [\n    CarouselComponent,\n    CarouselSlideDirective\n] as const;","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"nw-style-guide-carousel.mjs","sources":["../../../projects/nw-style-guide/carousel/carousel-slide.directive.ts","../../../projects/nw-style-guide/carousel/carousel.component.ts","../../../projects/nw-style-guide/carousel/public-api.ts","../../../projects/nw-style-guide/carousel/nw-style-guide-carousel.ts"],"sourcesContent":["import { Directive, Input, HostBinding } from '@angular/core';\n\n@Directive({\n    selector: '[nwCarouselSlide]',\n    exportAs: 'nw-carousel-slide'\n})\nexport class CarouselSlideDirective {\n    @HostBinding('style.scroll-snap-align')\n    @Input()\n    snapAlign: 'none' | 'start' | 'end' | 'center' = 'start';\n}\n","import {\n    Component,\n    ChangeDetectionStrategy,\n    Input,\n    ElementRef,\n    ViewChild,\n    Renderer2,\n    ChangeDetectorRef,\n    AfterViewInit,\n    OnDestroy,\n    OnInit,\n    Output,\n    EventEmitter,\n    OnChanges,\n    SimpleChanges,\n    ContentChildren,\n    QueryList,\n    AfterContentInit,\n    inject\n} from '@angular/core';\nimport { debounceTime } from 'rxjs/operators';\nimport { CarouselSlideDirective } from './carousel-slide.directive';\nimport { Subscription, fromEvent } from 'rxjs';\nimport { NgIf, NgStyle, NgClass, NgFor } from '@angular/common';\n\n@Component({\n    selector: 'nw-carousel',\n    template: `\n        <div class=\"carousel-container\">\n            <div\n                class=\"pagination-container\"\n                *ngIf=\"showPagination && !isFirstPage\">\n                <button\n                    class=\"btn btn-carousel btn-carousel-prev\"\n                    (click)=\"prev()\"></button>\n            </div>\n\n            <ng-content select=\".pagination-left\"></ng-content>\n\n            <div class=\"carousel-content\">\n                <div\n                    class=\"pagination-masks\"\n                    *ngIf=\"showMask && pages.length > 1\">\n                    <div\n                        class=\"collapse-expand-grid-container collapse-expand-container-start\"\n                        *ngIf=\"!isFirstPage\"\n                        animate.leave=\"collapse-animation\">\n                        <div\n                            class=\"pagination-mask pagination-mask-start\"\n                            [ngStyle]=\"maskStyles\"></div>\n                    </div>\n\n                    <div\n                        class=\"collapse-expand-grid-container collapse-expand-container-end\"\n                        *ngIf=\"!isLastPage\"\n                        animate.leave=\"collapse-animation\">\n                        <div\n                            class=\"pagination-mask pagination-mask-end\"\n                            [ngStyle]=\"maskStyles\"></div>\n                    </div>\n                </div>\n\n                <div\n                    class=\"carousel\"\n                    #carousel\n                    [ngClass]=\"containerClass\">\n                    <ng-content></ng-content>\n\n                    <p\n                        *ngIf=\"slides.length === 0\"\n                        class=\"nw-text text-center\">\n                        {{ noResultsText }}\n                    </p>\n                </div>\n            </div>\n\n            <div\n                class=\"pagination-container\"\n                *ngIf=\"showPagination && !isLastPage\">\n                <button\n                    class=\"btn btn-carousel btn-carousel-next\"\n                    (click)=\"next()\"></button>\n            </div>\n\n            <ng-content select=\".pagination-right\"></ng-content>\n        </div>\n\n        <div\n            class=\"page-indicators\"\n            *ngIf=\"showPageIndicator && pages.length > 1\">\n            <a\n                href=\"javascript:;\"\n                class=\"page-indicator\"\n                *ngFor=\"let page of pages\"\n                [class.active]=\"page === currPage\"\n                (click)=\"goToPage(page)\"></a>\n        </div>\n\n        <ng-content select=\".pagination-indicators\"></ng-content>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    exportAs: 'nw-carousel',\n    imports: [NgIf, NgStyle, NgClass, NgFor]\n})\nexport class CarouselComponent implements OnInit, AfterViewInit, AfterContentInit, OnChanges, OnDestroy {\n    private _renderer = inject(Renderer2);\n    private _cdRef = inject(ChangeDetectorRef);\n\n    @Input() showPageIndicator: boolean = true;\n    @Input() showPagination: boolean = true;\n    @Input() showMask: boolean = true;\n    @Input() maskColor: string = '#ffffff';\n    @Input() containerClass: string;\n    @Input() currPage: number = 0;\n    @Input() noResultsText: string = 'No results';\n\n    @Output() currPageChange: EventEmitter<number> = new EventEmitter();\n\n    @ViewChild('carousel', { static: true }) carousel: ElementRef;\n\n    @ContentChildren(CarouselSlideDirective) slides: QueryList<CarouselSlideDirective>;\n\n    public pages: number[] = [];\n\n    private _windowResizeSub: Subscription;\n    private _slidesSub: Subscription;\n\n    ngOnInit() {\n        this.subscribeToWindowResize();\n    }\n\n    ngOnChanges(changes: SimpleChanges) {\n        if (changes.currPage && changes.currPage.previousValue !== changes.currPage.currentValue) {\n            this._setScrollPosition(this.currPage);\n        }\n    }\n\n    ngAfterViewInit() {\n        this.updatePages();\n\n        if (this.currPage !== 0) {\n            this._setScrollPosition(this.currPage);\n        }\n    }\n\n    ngAfterContentInit() {\n        this._slidesSub = this.slides.changes.subscribe(res => {\n            this.updatePages();\n        });\n    }\n\n    next() {\n        this.goToPage(Math.min(this.pages.length - 1, this.currPage + 1));\n    }\n\n    prev() {\n        this.goToPage(Math.max(0, this.currPage - 1));\n    }\n\n    goToPage(page: number) {\n        this.currPage = page;\n        this.currPageChange.emit(this.currPage);\n\n        this._setScrollPosition(page);\n    }\n\n    private _setScrollPosition(page: number): void {\n        const carouselWidth: number = this.carouselNativeElement.clientWidth;\n        const newScrollPosition: number = page * carouselWidth;\n\n        this._renderer.setProperty(this.carouselNativeElement, 'scrollLeft', newScrollPosition);\n    }\n\n    getPages() {\n        const estimatedPages: number = +(\n            this.carouselNativeElement.scrollWidth / this.carouselNativeElement.clientWidth\n        ).toFixed(1);\n        const numOfPages: number = Math.ceil(estimatedPages);\n\n        return [...Array(numOfPages).fill(1)].map((_, i) => i);\n    }\n\n    updatePages(): void {\n        this.pages = this.getPages();\n        this._cdRef.detectChanges();\n    }\n\n    get carouselNativeElement(): HTMLDivElement {\n        return this.carousel.nativeElement as HTMLDivElement;\n    }\n\n    get isFirstPage(): boolean {\n        return this.currPage === 0;\n    }\n\n    get isLastPage(): boolean {\n        return this.currPage === this.pages[this.pages.length - 1];\n    }\n\n    get maskStyles() {\n        return {\n            '-webkit-mask-image': `linear-gradient(to left, rgba(0,0,0,0), ${this.maskColor})`,\n            'background-color': `${this.maskColor}`\n        };\n    }\n\n    get maskGradient() {\n        return `linear-gradient(to left, rgba(0,0,0,0), ${this.maskColor})`;\n    }\n\n    subscribeToWindowResize() {\n        this._windowResizeSub = fromEvent(window, 'resize')\n            .pipe(debounceTime(100))\n            .subscribe(_ => {\n                this.goToPage(0);\n                this.updatePages();\n            });\n    }\n\n    ngOnDestroy() {\n        this._windowResizeSub.unsubscribe();\n        this._slidesSub.unsubscribe();\n    }\n}\n","export { CarouselComponent } from './carousel.component';\nexport { CarouselSlideDirective } from './carousel-slide.directive';\n\nimport { CarouselComponent } from './carousel.component';\nimport { CarouselSlideDirective } from './carousel-slide.directive';\n\n/**\n * Export cooperating directives\n * https://v17.angular.io/guide/standalone-components#standalone-components-for-library-authors\n */\nexport const CAROUSEL_DIRECTIVES = [CarouselComponent, CarouselSlideDirective] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}