nw-style-guide 21.1.0 → 21.1.1

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

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 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';
+import { NgStyle, NgClass } from '@angular/common';
 
 class CarouselSlideDirective {
     constructor() {
@@ -112,40 +112,42 @@ class CarouselComponent {
         this._slidesSub.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", 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: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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>
+            @if (showPagination && !isFirstPage) {
+                <div class="pagination-container">
+                    <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="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>
+                @if (showMask && pages.length > 1) {
+                    <div class="pagination-masks">
+                        @if (!isFirstPage) {
+                            <div
+                                class="collapse-expand-grid-container collapse-expand-container-start"
+                                animate.leave="collapse-animation">
+                                <div
+                                    class="pagination-mask pagination-mask-start"
+                                    [ngStyle]="maskStyles"></div>
+                            </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>
+                        @if (!isFirstPage) {
+                            <div
+                                class="collapse-expand-grid-container collapse-expand-container-end"
+                                animate.leave="collapse-animation">
+                                <div
+                                    class="pagination-mask pagination-mask-end"
+                                    [ngStyle]="maskStyles"></div>
+                            </div>
+                        }
                     </div>
-                </div>
+                }
 
                 <div
                     class="carousel"
@@ -153,38 +155,37 @@ class CarouselComponent {
                     [ngClass]="containerClass">
                     <ng-content></ng-content>
 
-                    <p
-                        *ngIf="slides.length === 0"
-                        class="nw-text text-center">
-                        {{ noResultsText }}
-                    </p>
+                    @if (slides.length === 0) {
+                        <p 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>
+            @if (showPagination && !isLastPage) {
+                <div class="pagination-container">
+                    <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"
-                [class.active]="page === currPage"
-                (click)="goToPage(page)"></a>
-        </div>
+        @if (showPageIndicator && pages.length > 1) {
+            <div class="page-indicators">
+                @for (page of pages; track page) {
+                    <a
+                        href="javascript:;"
+                        class="page-indicator"
+                        [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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CarouselComponent, decorators: [{
             type: Component,
@@ -192,38 +193,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                     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>
+            @if (showPagination && !isFirstPage) {
+                <div class="pagination-container">
+                    <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="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>
+                @if (showMask && pages.length > 1) {
+                    <div class="pagination-masks">
+                        @if (!isFirstPage) {
+                            <div
+                                class="collapse-expand-grid-container collapse-expand-container-start"
+                                animate.leave="collapse-animation">
+                                <div
+                                    class="pagination-mask pagination-mask-start"
+                                    [ngStyle]="maskStyles"></div>
+                            </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>
+                        @if (!isFirstPage) {
+                            <div
+                                class="collapse-expand-grid-container collapse-expand-container-end"
+                                animate.leave="collapse-animation">
+                                <div
+                                    class="pagination-mask pagination-mask-end"
+                                    [ngStyle]="maskStyles"></div>
+                            </div>
+                        }
                     </div>
-                </div>
+                }
 
                 <div
                     class="carousel"
@@ -231,41 +234,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                     [ngClass]="containerClass">
                     <ng-content></ng-content>
 
-                    <p
-                        *ngIf="slides.length === 0"
-                        class="nw-text text-center">
-                        {{ noResultsText }}
-                    </p>
+                    @if (slides.length === 0) {
+                        <p 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>
+            @if (showPagination && !isLastPage) {
+                <div class="pagination-container">
+                    <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"
-                [class.active]="page === currPage"
-                (click)="goToPage(page)"></a>
-        </div>
+        @if (showPageIndicator && pages.length > 1) {
+            <div class="page-indicators">
+                @for (page of pages; track page) {
+                    <a
+                        href="javascript:;"
+                        class="page-indicator"
+                        [class.active]="page === currPage"
+                        (click)="goToPage(page)"></a>
+                }
+            </div>
+        }
 
         <ng-content select=".pagination-indicators"></ng-content>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     exportAs: 'nw-carousel',
-                    imports: [NgIf, NgStyle, NgClass, NgFor]
+                    imports: [NgStyle, NgClass]
                 }]
         }], propDecorators: { showPageIndicator: [{
                 type: Input

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    @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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"}
+{"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 { NgStyle, NgClass } from '@angular/common';\n\n@Component({\n    selector: 'nw-carousel',\n    template: `\n        <div class=\"carousel-container\">\n            @if (showPagination && !isFirstPage) {\n                <div class=\"pagination-container\">\n                    <button\n                        class=\"btn btn-carousel btn-carousel-prev\"\n                        (click)=\"prev()\"></button>\n                </div>\n            }\n\n            <ng-content select=\".pagination-left\"></ng-content>\n\n            <div class=\"carousel-content\">\n                @if (showMask && pages.length > 1) {\n                    <div class=\"pagination-masks\">\n                        @if (!isFirstPage) {\n                            <div\n                                class=\"collapse-expand-grid-container collapse-expand-container-start\"\n                                animate.leave=\"collapse-animation\">\n                                <div\n                                    class=\"pagination-mask pagination-mask-start\"\n                                    [ngStyle]=\"maskStyles\"></div>\n                            </div>\n                        }\n\n                        @if (!isFirstPage) {\n                            <div\n                                class=\"collapse-expand-grid-container collapse-expand-container-end\"\n                                animate.leave=\"collapse-animation\">\n                                <div\n                                    class=\"pagination-mask pagination-mask-end\"\n                                    [ngStyle]=\"maskStyles\"></div>\n                            </div>\n                        }\n                    </div>\n                }\n\n                <div\n                    class=\"carousel\"\n                    #carousel\n                    [ngClass]=\"containerClass\">\n                    <ng-content></ng-content>\n\n                    @if (slides.length === 0) {\n                        <p class=\"nw-text text-center\">{{ noResultsText }}</p>\n                    }\n                </div>\n            </div>\n\n            @if (showPagination && !isLastPage) {\n                <div class=\"pagination-container\">\n                    <button\n                        class=\"btn btn-carousel btn-carousel-next\"\n                        (click)=\"next()\"></button>\n                </div>\n            }\n\n            <ng-content select=\".pagination-right\"></ng-content>\n        </div>\n\n        @if (showPageIndicator && pages.length > 1) {\n            <div class=\"page-indicators\">\n                @for (page of pages; track page) {\n                    <a\n                        href=\"javascript:;\"\n                        class=\"page-indicator\"\n                        [class.active]=\"page === currPage\"\n                        (click)=\"goToPage(page)\"></a>\n                }\n            </div>\n        }\n\n        <ng-content select=\".pagination-indicators\"></ng-content>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    exportAs: 'nw-carousel',\n    imports: [NgStyle, NgClass]\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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"}

package/fesm2022/nw-style-guide-email-input.mjs

@@ -2,7 +2,6 @@ import * as i0 from '@angular/core';
 import { inject, ChangeDetectorRef, EventEmitter, ViewChild, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
-import { NgFor } from '@angular/common';
 
 class EmailInputComponent {
     constructor() {
@@ -178,7 +177,7 @@ class EmailInputComponent {
         this._valueChangesSub.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: EmailInputComponent, isStandalone: true, selector: "nw-email-input", inputs: { emails: "emails", inputId: "inputId", placeholder: "placeholder", persistentPlaceholder: "persistentPlaceholder", blacklist: "blacklist" }, outputs: { updated: "updated" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], exportAs: ["nw-email-input"], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EmailInputComponent, isStandalone: true, selector: "nw-email-input", inputs: { emails: "emails", inputId: "inputId", placeholder: "placeholder", persistentPlaceholder: "persistentPlaceholder", blacklist: "blacklist" }, outputs: { updated: "updated" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], exportAs: ["nw-email-input"], ngImport: i0, template: `
         <div
             class="emails-container form-control input-lg"
             #container
@@ -186,19 +185,20 @@ class EmailInputComponent {
             (click)="onContainerClick($event)"
             (paste)="onPaste($event)"
             [attr.data-placeholder-text]="placeholder">
-            <div
-                class="pill pill-sm"
-                *ngFor="let email of emails; let last = last"
-                [class.invalid]="!isValid(email)"
-                [class.selected]="last && isPillSelected">
-                <span class="pill-label">{{ email }}</span>
-                <button
-                    type="button"
-                    class="close"
-                    (click)="removeEmail(email)">
-                    ×
-                </button>
-            </div>
+            @for (email of emails; track email; let last = $last) {
+                <div
+                    class="pill pill-sm"
+                    [class.invalid]="!isValid(email)"
+                    [class.selected]="last && isPillSelected">
+                    <span class="pill-label">{{ email }}</span>
+                    <button
+                        type="button"
+                        class="close"
+                        (click)="removeEmail(email)">
+                        ×
+                    </button>
+                </div>
+            }
 
             <div
                 class="input-container"
@@ -217,7 +217,7 @@ class EmailInputComponent {
                     (blur)="onBlur()" />
             </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailInputComponent, decorators: [{
             type: Component,
@@ -231,19 +231,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
             (click)="onContainerClick($event)"
             (paste)="onPaste($event)"
             [attr.data-placeholder-text]="placeholder">
-            <div
-                class="pill pill-sm"
-                *ngFor="let email of emails; let last = last"
-                [class.invalid]="!isValid(email)"
-                [class.selected]="last && isPillSelected">
-                <span class="pill-label">{{ email }}</span>
-                <button
-                    type="button"
-                    class="close"
-                    (click)="removeEmail(email)">
-                    ×
-                </button>
-            </div>
+            @for (email of emails; track email; let last = $last) {
+                <div
+                    class="pill pill-sm"
+                    [class.invalid]="!isValid(email)"
+                    [class.selected]="last && isPillSelected">
+                    <span class="pill-label">{{ email }}</span>
+                    <button
+                        type="button"
+                        class="close"
+                        (click)="removeEmail(email)">
+                        ×
+                    </button>
+                </div>
+            }
 
             <div
                 class="input-container"
@@ -265,7 +266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     exportAs: 'nw-email-input',
-                    imports: [NgFor, ReactiveFormsModule]
+                    imports: [ReactiveFormsModule]
                 }]
         }], propDecorators: { emails: [{
                 type: Input

package/fesm2022/nw-style-guide-email-input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"nw-style-guide-email-input.mjs","sources":["../../../projects/nw-style-guide/email-input/email-input.component.ts","../../../projects/nw-style-guide/email-input/nw-style-guide-email-input.ts"],"sourcesContent":["import {\n    Component,\n    OnInit,\n    ViewChild,\n    ElementRef,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    OnDestroy,\n    Input,\n    Output,\n    EventEmitter,\n    inject\n} from '@angular/core';\nimport { FormControl, Validators, ReactiveFormsModule } from '@angular/forms';\nimport { IValidationChange } from './models/IValidationChange';\nimport { Subscription } from 'rxjs';\nimport { NgFor } from '@angular/common';\n\n@Component({\n    selector: 'nw-email-input',\n    template: `\n        <div\n            class=\"emails-container form-control input-lg\"\n            #container\n            [class.show-placeholder]=\"emails.length < 1 && emailInputControl.value.length < 1\"\n            (click)=\"onContainerClick($event)\"\n            (paste)=\"onPaste($event)\"\n            [attr.data-placeholder-text]=\"placeholder\">\n            <div\n                class=\"pill pill-sm\"\n                *ngFor=\"let email of emails; let last = last\"\n                [class.invalid]=\"!isValid(email)\"\n                [class.selected]=\"last && isPillSelected\">\n                <span class=\"pill-label\">{{ email }}</span>\n                <button\n                    type=\"button\"\n                    class=\"close\"\n                    (click)=\"removeEmail(email)\">\n                    ×\n                </button>\n            </div>\n\n            <div\n                class=\"input-container\"\n                [class.persistent-placeholder]=\"persistentPlaceholder\">\n                <!-- pill-hidden is an invisble element that controls the width of the input -->\n                <div class=\"pill pill-sm pill-hidden\">{{ emailInputControl.value }}</div>\n                <input\n                    type=\"text\"\n                    #inputEl\n                    [id]=\"inputId\"\n                    [formControl]=\"emailInputControl\"\n                    (keydown)=\"onKeydown($event)\"\n                    (keydown.tab)=\"onTab($event)\"\n                    (keyup.backspace)=\"onBackspace()\"\n                    [placeholder]=\"persistentPlaceholder\"\n                    (blur)=\"onBlur()\" />\n            </div>\n        </div>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    exportAs: 'nw-email-input',\n    imports: [NgFor, ReactiveFormsModule]\n})\nexport class EmailInputComponent implements OnInit, OnDestroy {\n    private _cdRef = inject(ChangeDetectorRef);\n\n    @Input() emails: string[] = [];\n    /**\n     * Applied to the HTMLInputElement. Mostly useful for label using the \"for\" attribute\n     */\n    @Input() inputId: string = '';\n    @Input() placeholder: string = '';\n    @Input() persistentPlaceholder: string = '';\n    /**\n     * A list of strings or RegExp to be matched against the inputted list of emails. Any emails that\n     * match entries in the blacklist will be marked as invalid\n     */\n    @Input() blacklist: (string | RegExp)[] = [];\n\n    @Output() updated: EventEmitter<IValidationChange> = new EventEmitter();\n\n    @ViewChild('inputEl', { static: true }) inputEl: ElementRef;\n    @ViewChild('container', { static: true }) container: ElementRef;\n\n    public emailInputControl: FormControl<string> = new FormControl('', Validators.email);\n    public isPillSelected: boolean = false;\n\n    private _validationFormControl: FormControl<string> = new FormControl();\n    private _submitKeys: string[] = [',', 'Enter', ' ', ';'];\n    private _valueChangesSub: Subscription;\n\n    ngOnInit() {\n        this._subscribeToValueChanges();\n        this._emitValidationChange();\n    }\n\n    private _subscribeToValueChanges() {\n        this._valueChangesSub = this.emailInputControl.valueChanges.subscribe(value => {\n            if (value.length > 0) {\n                this.isPillSelected = false;\n                this._cdRef.detectChanges();\n            }\n        });\n    }\n\n    removeEmail(email: string) {\n        const index = this.emails.indexOf(email, 0);\n\n        if (index > -1) {\n            this.emails = this.emails.filter(value => value !== email);\n            this._emitValidationChange();\n        }\n    }\n\n    onBlur() {\n        this.isPillSelected = false;\n        this._addEmail();\n    }\n\n    onKeydown(event: KeyboardEvent): void {\n        const index = this._submitKeys.indexOf(event.key, 0);\n\n        if (index > -1) {\n            event.preventDefault();\n            this._addEmail();\n            this.focus();\n        }\n\n        if (event.key === 'Escape') {\n            event.stopPropagation();\n            this.emailInputControl.setValue('');\n            (this.inputEl.nativeElement as HTMLInputElement).blur();\n        }\n    }\n\n    onTab(event: KeyboardEvent) {\n        /**\n         * If the input has a value, add it as an entry.\n         *\n         * Otherwise, allow the default tab behaviour\n         */\n        if (this.emailInputControl.value.length > 0) {\n            event.preventDefault();\n            this._addEmail();\n            this.focus();\n        }\n    }\n\n    isValid(email: string): boolean {\n        this._validationFormControl.setValue(email);\n        const isBlacklisted = this.blacklist.some(item => {\n            /**\n             * If item in blacklist is a string, create a regular expression to match the full\n             * case-insenstive string\n             */\n            if (typeof item === 'string') {\n                return email.match(new RegExp(`^${item}$`, 'i'));\n            }\n            return email.match(item);\n        });\n\n        return Validators.email(this._validationFormControl) === null && !isBlacklisted;\n    }\n\n    onContainerClick(event: MouseEvent) {\n        /**\n         * We're only interested in this event if it originates from the container element.\n         *\n         * We don't care about events that bubble up from child elements.\n         */\n        if (event.target === this.container.nativeElement) {\n            this.focus();\n        }\n    }\n\n    onPaste(event: ClipboardEvent) {\n        if (event.clipboardData) {\n            event.preventDefault();\n\n            this.emailInputControl.markAsDirty();\n\n            const selectionStart: number = (this.inputEl.nativeElement as HTMLInputElement).selectionStart;\n            const selectionEnd: number = (this.inputEl.nativeElement as HTMLInputElement).selectionEnd;\n            const controlValue: string = this.emailInputControl.value as string;\n\n            let pastedData: string = event.clipboardData.getData('text');\n\n            /**\n             * We need to check if the input already has a value when the user pasted\n             */\n            if (this.emailInputControl.value.length) {\n                /**\n                 * The user has selected text in the input\n                 */\n                if (selectionStart !== selectionEnd) {\n                    const newValue: string = controlValue.slice(0, selectionStart) + controlValue.slice(selectionEnd);\n                    pastedData = newValue.slice(0, selectionStart) + pastedData + newValue.slice(selectionStart);\n                } else {\n                    pastedData =\n                        controlValue.slice(0, selectionStart) + pastedData + controlValue.slice(selectionStart);\n                }\n            }\n\n            const items: string[] = pastedData\n                .split(/\\s+/)\n                .map(item => item.split(/,|;/g))\n                .reduce((acc, curr) => acc.concat(curr), [])\n                .filter(item => item);\n\n            const lastEmail: string = items[items.length - 1];\n\n            if (this.isValid(lastEmail)) {\n                // Use Set to remove duplicate emails\n                this.emails = Array.from(new Set(this.emails.concat(items)));\n                this.emailInputControl.setValue('');\n            } else {\n                items.pop();\n                // Use Set to remove duplicate emails\n                this.emails = Array.from(new Set(this.emails.concat(items)));\n                this.emailInputControl.setValue(lastEmail);\n            }\n            this._emitValidationChange();\n        }\n    }\n\n    private _addEmail() {\n        const email: string = this.emailInputControl.value.trim();\n\n        // We only want to add the entry if it hasn't already been added\n        if (email.length && this.emails.indexOf(email) === -1) {\n            this.emails = this.emails.concat(this.emailInputControl.value.trim());\n            this._emitValidationChange();\n        }\n        this.emailInputControl.setValue('');\n    }\n\n    focus() {\n        (this.inputEl.nativeElement as HTMLInputElement).focus();\n    }\n\n    onBackspace() {\n        if (this.emailInputControl.value.length < 1 && this.emails.length > 0) {\n            if (this.isPillSelected) {\n                this.removeEmail(this.emails[this.emails.length - 1]);\n            } else {\n                this.isPillSelected = true;\n            }\n        }\n    }\n\n    private _emitValidationChange() {\n        /**\n         * isValid is based on the entered emails and does not include the current value of the form control\n         */\n        const isValid: boolean = this.emails.length > 0 && this.emails.every(email => this.isValid(email));\n\n        this.updated.emit({\n            isValid: isValid,\n            emails: this.emails,\n            control: this.emailInputControl\n        });\n    }\n\n    ngOnDestroy() {\n        this._valueChangesSub.unsubscribe();\n    }\n}\n","/**\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-email-input.mjs","sources":["../../../projects/nw-style-guide/email-input/email-input.component.ts","../../../projects/nw-style-guide/email-input/nw-style-guide-email-input.ts"],"sourcesContent":["import {\n    Component,\n    OnInit,\n    ViewChild,\n    ElementRef,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    OnDestroy,\n    Input,\n    Output,\n    EventEmitter,\n    inject\n} from '@angular/core';\nimport { FormControl, Validators, ReactiveFormsModule } from '@angular/forms';\nimport { IValidationChange } from './models/IValidationChange';\nimport { Subscription } from 'rxjs';\n\n@Component({\n    selector: 'nw-email-input',\n    template: `\n        <div\n            class=\"emails-container form-control input-lg\"\n            #container\n            [class.show-placeholder]=\"emails.length < 1 && emailInputControl.value.length < 1\"\n            (click)=\"onContainerClick($event)\"\n            (paste)=\"onPaste($event)\"\n            [attr.data-placeholder-text]=\"placeholder\">\n            @for (email of emails; track email; let last = $last) {\n                <div\n                    class=\"pill pill-sm\"\n                    [class.invalid]=\"!isValid(email)\"\n                    [class.selected]=\"last && isPillSelected\">\n                    <span class=\"pill-label\">{{ email }}</span>\n                    <button\n                        type=\"button\"\n                        class=\"close\"\n                        (click)=\"removeEmail(email)\">\n                        ×\n                    </button>\n                </div>\n            }\n\n            <div\n                class=\"input-container\"\n                [class.persistent-placeholder]=\"persistentPlaceholder\">\n                <!-- pill-hidden is an invisble element that controls the width of the input -->\n                <div class=\"pill pill-sm pill-hidden\">{{ emailInputControl.value }}</div>\n                <input\n                    type=\"text\"\n                    #inputEl\n                    [id]=\"inputId\"\n                    [formControl]=\"emailInputControl\"\n                    (keydown)=\"onKeydown($event)\"\n                    (keydown.tab)=\"onTab($event)\"\n                    (keyup.backspace)=\"onBackspace()\"\n                    [placeholder]=\"persistentPlaceholder\"\n                    (blur)=\"onBlur()\" />\n            </div>\n        </div>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    exportAs: 'nw-email-input',\n    imports: [ReactiveFormsModule]\n})\nexport class EmailInputComponent implements OnInit, OnDestroy {\n    private _cdRef = inject(ChangeDetectorRef);\n\n    @Input() emails: string[] = [];\n    /**\n     * Applied to the HTMLInputElement. Mostly useful for label using the \"for\" attribute\n     */\n    @Input() inputId: string = '';\n    @Input() placeholder: string = '';\n    @Input() persistentPlaceholder: string = '';\n    /**\n     * A list of strings or RegExp to be matched against the inputted list of emails. Any emails that\n     * match entries in the blacklist will be marked as invalid\n     */\n    @Input() blacklist: (string | RegExp)[] = [];\n\n    @Output() updated: EventEmitter<IValidationChange> = new EventEmitter();\n\n    @ViewChild('inputEl', { static: true }) inputEl: ElementRef;\n    @ViewChild('container', { static: true }) container: ElementRef;\n\n    public emailInputControl: FormControl<string> = new FormControl('', Validators.email);\n    public isPillSelected: boolean = false;\n\n    private _validationFormControl: FormControl<string> = new FormControl();\n    private _submitKeys: string[] = [',', 'Enter', ' ', ';'];\n    private _valueChangesSub: Subscription;\n\n    ngOnInit() {\n        this._subscribeToValueChanges();\n        this._emitValidationChange();\n    }\n\n    private _subscribeToValueChanges() {\n        this._valueChangesSub = this.emailInputControl.valueChanges.subscribe(value => {\n            if (value.length > 0) {\n                this.isPillSelected = false;\n                this._cdRef.detectChanges();\n            }\n        });\n    }\n\n    removeEmail(email: string) {\n        const index = this.emails.indexOf(email, 0);\n\n        if (index > -1) {\n            this.emails = this.emails.filter(value => value !== email);\n            this._emitValidationChange();\n        }\n    }\n\n    onBlur() {\n        this.isPillSelected = false;\n        this._addEmail();\n    }\n\n    onKeydown(event: KeyboardEvent): void {\n        const index = this._submitKeys.indexOf(event.key, 0);\n\n        if (index > -1) {\n            event.preventDefault();\n            this._addEmail();\n            this.focus();\n        }\n\n        if (event.key === 'Escape') {\n            event.stopPropagation();\n            this.emailInputControl.setValue('');\n            (this.inputEl.nativeElement as HTMLInputElement).blur();\n        }\n    }\n\n    onTab(event: KeyboardEvent) {\n        /**\n         * If the input has a value, add it as an entry.\n         *\n         * Otherwise, allow the default tab behaviour\n         */\n        if (this.emailInputControl.value.length > 0) {\n            event.preventDefault();\n            this._addEmail();\n            this.focus();\n        }\n    }\n\n    isValid(email: string): boolean {\n        this._validationFormControl.setValue(email);\n        const isBlacklisted = this.blacklist.some(item => {\n            /**\n             * If item in blacklist is a string, create a regular expression to match the full\n             * case-insenstive string\n             */\n            if (typeof item === 'string') {\n                return email.match(new RegExp(`^${item}$`, 'i'));\n            }\n            return email.match(item);\n        });\n\n        return Validators.email(this._validationFormControl) === null && !isBlacklisted;\n    }\n\n    onContainerClick(event: MouseEvent) {\n        /**\n         * We're only interested in this event if it originates from the container element.\n         *\n         * We don't care about events that bubble up from child elements.\n         */\n        if (event.target === this.container.nativeElement) {\n            this.focus();\n        }\n    }\n\n    onPaste(event: ClipboardEvent) {\n        if (event.clipboardData) {\n            event.preventDefault();\n\n            this.emailInputControl.markAsDirty();\n\n            const selectionStart: number = (this.inputEl.nativeElement as HTMLInputElement).selectionStart;\n            const selectionEnd: number = (this.inputEl.nativeElement as HTMLInputElement).selectionEnd;\n            const controlValue: string = this.emailInputControl.value as string;\n\n            let pastedData: string = event.clipboardData.getData('text');\n\n            /**\n             * We need to check if the input already has a value when the user pasted\n             */\n            if (this.emailInputControl.value.length) {\n                /**\n                 * The user has selected text in the input\n                 */\n                if (selectionStart !== selectionEnd) {\n                    const newValue: string = controlValue.slice(0, selectionStart) + controlValue.slice(selectionEnd);\n                    pastedData = newValue.slice(0, selectionStart) + pastedData + newValue.slice(selectionStart);\n                } else {\n                    pastedData =\n                        controlValue.slice(0, selectionStart) + pastedData + controlValue.slice(selectionStart);\n                }\n            }\n\n            const items: string[] = pastedData\n                .split(/\\s+/)\n                .map(item => item.split(/,|;/g))\n                .reduce((acc, curr) => acc.concat(curr), [])\n                .filter(item => item);\n\n            const lastEmail: string = items[items.length - 1];\n\n            if (this.isValid(lastEmail)) {\n                // Use Set to remove duplicate emails\n                this.emails = Array.from(new Set(this.emails.concat(items)));\n                this.emailInputControl.setValue('');\n            } else {\n                items.pop();\n                // Use Set to remove duplicate emails\n                this.emails = Array.from(new Set(this.emails.concat(items)));\n                this.emailInputControl.setValue(lastEmail);\n            }\n            this._emitValidationChange();\n        }\n    }\n\n    private _addEmail() {\n        const email: string = this.emailInputControl.value.trim();\n\n        // We only want to add the entry if it hasn't already been added\n        if (email.length && this.emails.indexOf(email) === -1) {\n            this.emails = this.emails.concat(this.emailInputControl.value.trim());\n            this._emitValidationChange();\n        }\n        this.emailInputControl.setValue('');\n    }\n\n    focus() {\n        (this.inputEl.nativeElement as HTMLInputElement).focus();\n    }\n\n    onBackspace() {\n        if (this.emailInputControl.value.length < 1 && this.emails.length > 0) {\n            if (this.isPillSelected) {\n                this.removeEmail(this.emails[this.emails.length - 1]);\n            } else {\n                this.isPillSelected = true;\n            }\n        }\n    }\n\n    private _emitValidationChange() {\n        /**\n         * isValid is based on the entered emails and does not include the current value of the form control\n         */\n        const isValid: boolean = this.emails.length > 0 && this.emails.every(email => this.isValid(email));\n\n        this.updated.emit({\n            isValid: isValid,\n            emails: this.emails,\n            control: this.emailInputControl\n        });\n    }\n\n    ngOnDestroy() {\n        this._valueChangesSub.unsubscribe();\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/nw-style-guide-feature-alerts.mjs

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
 import { Injectable, inject, ChangeDetectorRef, Input, ChangeDetectionStrategy, Component, TemplateRef, ViewContainerRef, Directive } from '@angular/core';
 import { Subject, Observable } from 'rxjs';
-import { NgIf } from '@angular/common';
 import { filter, takeUntil } from 'rxjs/operators';
 
 const _window = () => {
@@ -74,25 +73,26 @@ class HotspotComponent {
         this._cdRef.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: HotspotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: HotspotComponent, isStandalone: true, selector: "nw-hotspot", inputs: { position: "position", id: "id" }, ngImport: i0, template: `
-        <div
-            animate.leave="fade-out"
-            *ngIf="isOpen"
-            class="hotspot hotspot-{{ position }}"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: HotspotComponent, isStandalone: true, selector: "nw-hotspot", inputs: { position: "position", id: "id" }, ngImport: i0, template: `
+        @if (isOpen) {
+            <div
+                animate.leave="fade-out"
+                class="hotspot hotspot-{{ position }}"></div>
+        }
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: HotspotComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nw-hotspot',
                     template: `
-        <div
-            animate.leave="fade-out"
-            *ngIf="isOpen"
-            class="hotspot hotspot-{{ position }}"></div>
+        @if (isOpen) {
+            <div
+                animate.leave="fade-out"
+                class="hotspot hotspot-{{ position }}"></div>
+        }
     `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgIf]
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], propDecorators: { position: [{
                 type: Input