nw-style-guide 21.1.1 → 21.2.0-beta.4

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

@@ -26,16 +26,41 @@ class TabDirective {
         this.isActive = false;
         this.role = 'tab';
     }
+    get ariaSelected() { return String(this.isActive); }
+    ngAfterContentInit() {
+        // <li role="tab"> is the keyboard target; inner tab button is click-only
+        this.elRef.nativeElement.querySelector('button')?.setAttribute('tabindex', '-1');
+        this._applyTabindex(this.isActive ? '0' : '-1');
+    }
     ngOnChanges(changes) {
-        const hasChanged = changes.isActive &&
-            changes.isActive.previousValue !== changes.isActive.currentValue &&
-            !changes.isActive.firstChange;
-        if (hasChanged && this.isActive) {
+        const change = changes.isActive;
+        const hasActiveChanged = change && !change.firstChange && change.previousValue !== change.currentValue;
+        if (!hasActiveChanged)
+            return;
+        this._applyTabindex(this.isActive ? '0' : '-1');
+        if (this.isActive) {
             this._tabsService.notifyActiveChange(this);
         }
     }
+    focus() {
+        this.elRef.nativeElement.focus();
+    }
+    setTabindex(value) {
+        this._applyTabindex(value);
+    }
+    restoreTabindex() {
+        this._applyTabindex(this.isActive ? '0' : '-1');
+    }
+    _applyTabindex(value) {
+        this.elRef.nativeElement.setAttribute('tabindex', value);
+        this._actionButton()?.setAttribute('tabindex', value);
+    }
+    _actionButton() {
+        const btns = this.elRef.nativeElement.querySelectorAll('button');
+        return btns.length > 1 ? btns[1] : null;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: TabDirective, isStandalone: true, selector: "[nwTab]", inputs: { isActive: "isActive" }, host: { properties: { "class.active": "this.isActive", "attr.role": "this.role" } }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: TabDirective, isStandalone: true, selector: "[nwTab]", inputs: { isActive: "isActive" }, host: { properties: { "class.active": "this.isActive", "attr.role": "this.role", "attr.aria-selected": "this.ariaSelected" } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TabDirective, decorators: [{
             type: Directive,
@@ -48,6 +73,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
             }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
+            }], ariaSelected: [{
+                type: HostBinding,
+                args: ['attr.aria-selected']
             }] } });
 
 class TabsComponent {
@@ -64,54 +92,68 @@ class TabsComponent {
         const windowResizeStop$ = fromEvent(window, 'resize');
         this._scrollAndResizeSub = merge(scrollStop$, windowResizeStop$)
             .pipe(debounceTime(50))
-            .subscribe(_ => this._cdRef.detectChanges());
-        this.subscribeToActiveChange();
-        this.subscribeToActiveBarTransitionEnd();
+            .subscribe(() => this._cdRef.detectChanges());
+        this._subscribeToActiveChange();
+        this._subscribeToActiveBarTransitionEnd();
     }
     ngAfterContentInit() {
-        this.subscribeToTabsChange();
-    }
-    subscribeToActiveChange() {
-        this._activeChangeSub = this._tabsService.activeChange.subscribe(tab => {
-            this.scrollToTabIfRequired(tab);
-            setTimeout(() => {
-                this._cdRef.detectChanges();
-            }, 0);
-        });
-    }
-    subscribeToTabsChange() {
-        this._tabsChangeSub = this.tabs.changes.subscribe(tabs => {
-            setTimeout(() => {
-                this._cdRef.detectChanges();
-            }, 0);
-        });
-    }
-    subscribeToActiveBarTransitionEnd() {
-        this._transitionEndSub = fromEvent(this.activeBar.nativeElement, 'transitionend')
-            .pipe(debounceTime(50))
-            .subscribe(() => {
-            console.log('transition ended');
-            this._cdRef.detectChanges();
-        });
-    }
-    getActiveTab() {
-        return this.tabs.filter(t => t.isActive)[0];
-    }
-    get tabSizeClass() {
-        return `nav-${this.size}`;
+        this._subscribeToTabsChange();
     }
     getActiveStyles() {
-        const tab = this.getActiveTab();
+        const tab = this._getActiveTab();
         if (tab) {
+            const btn = tab.elRef.nativeElement.querySelector('button');
             return {
-                width: tab.elRef.nativeElement.getBoundingClientRect().width + 'px',
-                left: tab.elRef.nativeElement.offsetLeft + 'px'
+                width: (btn ?? tab.elRef.nativeElement).getBoundingClientRect().width + 'px',
+                transform: `translateX(${tab.elRef.nativeElement.offsetLeft}px)`
             };
         }
         return {};
     }
-    getScrollEl() {
-        return this.scrollContainer.nativeElement;
+    prev() {
+        this._getScrollEl().scrollLeft -= this.clientWidth - this._paginationTolerance;
+    }
+    next() {
+        this._getScrollEl().scrollLeft += this.clientWidth - this._paginationTolerance;
+    }
+    onKeydown(event) {
+        const tabs = this.tabs.toArray();
+        if (!tabs.length)
+            return;
+        const focusedIndex = tabs.findIndex(t => t.elRef.nativeElement.contains(document.activeElement));
+        if (focusedIndex === -1)
+            return;
+        let targetIndex = null;
+        switch (event.key) {
+            case 'ArrowLeft':
+                targetIndex = focusedIndex === 0 ? tabs.length - 1 : focusedIndex - 1;
+                break;
+            case 'ArrowRight':
+                targetIndex = focusedIndex === tabs.length - 1 ? 0 : focusedIndex + 1;
+                break;
+            case 'Home':
+                targetIndex = 0;
+                break;
+            case 'End':
+                targetIndex = tabs.length - 1;
+                break;
+        }
+        if (targetIndex !== null) {
+            event.preventDefault();
+            this.tabs.forEach(t => t.setTabindex('-1'));
+            tabs[targetIndex].setTabindex('0');
+            tabs[targetIndex].focus();
+        }
+    }
+    onFocusOut() {
+        setTimeout(() => {
+            if (!this.scrollContainer.nativeElement.contains(document.activeElement)) {
+                this.tabs.forEach(t => t.restoreTabindex());
+            }
+        });
+    }
+    get tabSizeClass() {
+        return `nav-${this.size}`;
     }
     get background() {
         return {
@@ -119,36 +161,56 @@ class TabsComponent {
         };
     }
     get clientWidth() {
-        return this.getScrollEl().clientWidth;
+        return this._getScrollEl().clientWidth;
     }
     get shouldShowPagination() {
-        return +(this.getScrollEl().scrollWidth / this.clientWidth).toFixed(1) >= 1;
+        return +(this._getScrollEl().scrollWidth / this.clientWidth).toFixed(1) >= 1;
     }
     get shouldShowPrev() {
-        return this.getScrollEl().scrollLeft >= 1;
+        return this._getScrollEl().scrollLeft >= 1;
     }
     get shouldShowNext() {
-        return this.getScrollEl().scrollLeft + this.clientWidth < this.getScrollEl().scrollWidth;
+        return this._getScrollEl().scrollLeft + this.clientWidth < this._getScrollEl().scrollWidth;
     }
-    prev() {
-        this.getScrollEl().scrollLeft -= this.clientWidth - this._paginationTolerance;
+    _subscribeToActiveChange() {
+        this._activeChangeSub = this._tabsService.activeChange.subscribe(tab => {
+            this._scrollToTabIfRequired(tab);
+            setTimeout(() => {
+                this._cdRef.detectChanges();
+            }, 0);
+        });
     }
-    next() {
-        this.getScrollEl().scrollLeft += this.clientWidth - this._paginationTolerance;
+    _subscribeToTabsChange() {
+        this._tabsChangeSub = this.tabs.changes.subscribe(() => {
+            setTimeout(() => {
+                this._cdRef.detectChanges();
+            }, 0);
+        });
+    }
+    _subscribeToActiveBarTransitionEnd() {
+        this._transitionEndSub = fromEvent(this.activeBar.nativeElement, 'transitionend')
+            .pipe(debounceTime(50))
+            .subscribe(() => this._cdRef.detectChanges());
+    }
+    _getActiveTab() {
+        return this.tabs.filter(t => t.isActive)[0];
+    }
+    _getScrollEl() {
+        return this.scrollContainer.nativeElement;
     }
-    scrollToTabIfRequired(tab) {
+    _scrollToTabIfRequired(tab) {
         const offsetLeft = tab.elRef.nativeElement.offsetLeft;
         const position = {
             left: offsetLeft,
             right: offsetLeft + tab.elRef.nativeElement.clientWidth
         };
-        const shouldScrollLeft = position.left < this.getScrollEl().scrollLeft;
-        const shouldScrollRight = position.right > this.getScrollEl().scrollLeft + this.clientWidth;
+        const shouldScrollLeft = position.left < this._getScrollEl().scrollLeft;
+        const shouldScrollRight = position.right > this._getScrollEl().scrollLeft + this.clientWidth;
         if (shouldScrollLeft) {
-            this.getScrollEl().scrollLeft = position.left - 30;
+            this._getScrollEl().scrollLeft = position.left - 30;
         }
         else if (shouldScrollRight) {
-            this.getScrollEl().scrollLeft = position.right - this.clientWidth + 12 + 30; // plus 12 for margin
+            this._getScrollEl().scrollLeft = position.right - this.clientWidth + 12 + 30; // plus 12 for margin
         }
     }
     ngOnDestroy() {
@@ -158,97 +220,11 @@ class TabsComponent {
         this._tabsChangeSub.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TabsComponent, isStandalone: true, selector: "nw-tabs", inputs: { size: "size", maskColor: "maskColor" }, providers: [TabsService], queries: [{ propertyName: "tabs", predicate: TabDirective }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, static: true }, { propertyName: "activeBar", first: true, predicate: ["activeBar"], descendants: true, static: true }], ngImport: i0, template: `
-        <div
-            class="scroll-container"
-            #scrollContainer>
-            <ul
-                class="nav nav-tabs"
-                [ngClass]="tabSizeClass"
-                role="tablist">
-                <ng-content></ng-content>
-
-                <li
-                    #activeBar
-                    class="nav-tabs-active-bar"
-                    [ngStyle]="getActiveStyles()"></li>
-            </ul>
-        </div>
-
-        @if (shouldShowPagination) {
-            <div class="pagination-container">
-                @if (shouldShowPrev) {
-                    <div
-                        class="prev-page"
-                        (click)="prev()"
-                        [ngStyle]="background">
-                        <ng-container *ngTemplateOutlet="paginator"></ng-container>
-                    </div>
-                }
-                @if (shouldShowNext) {
-                    <div
-                        class="next-page"
-                        (click)="next()"
-                        [ngStyle]="background">
-                        <ng-container *ngTemplateOutlet="paginator"></ng-container>
-                    </div>
-                }
-            </div>
-        }
-
-        <ng-template #paginator>
-            <button class="btn btn-md btn-ghost-alt">
-                <i class="fas fa-chevron-left"></i>
-            </button>
-        </ng-template>
-    `, isInline: true, styles: [":host,ul{position:relative}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TabsComponent, isStandalone: true, selector: "nw-tabs", inputs: { size: "size", maskColor: "maskColor" }, providers: [TabsService], queries: [{ propertyName: "tabs", predicate: TabDirective }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, static: true }, { propertyName: "activeBar", first: true, predicate: ["activeBar"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"scroll-container\"\n    #scrollContainer>\n    <ul class=\"nav nav-tabs\"\n        [ngClass]=\"tabSizeClass\"\n        role=\"tablist\"\n        (keydown)=\"onKeydown($event)\"\n        (focusout)=\"onFocusOut()\">\n        <ng-content></ng-content>\n    </ul>\n    <div #activeBar\n        class=\"nav-tabs-active-bar\"\n        aria-hidden=\"true\"\n        [ngStyle]=\"getActiveStyles()\"></div>\n</div>\n\n@if (shouldShowPagination) {\n    <div class=\"pagination-container\">\n        @if (shouldShowPrev) {\n            <div class=\"prev-page\"\n                (click)=\"prev()\"\n                [ngStyle]=\"background\">\n                <ng-container *ngTemplateOutlet=\"paginator\"></ng-container>\n            </div>\n        }\n        @if (shouldShowNext) {\n            <div class=\"next-page\"\n                (click)=\"next()\"\n                [ngStyle]=\"background\">\n                <ng-container *ngTemplateOutlet=\"paginator\"></ng-container>\n            </div>\n        }\n    </div>\n}\n\n<ng-template #paginator>\n    <button class=\"btn btn-md btn-ghost-alt\">\n        <i class=\"fas fa-chevron-left\"></i>\n    </button>\n</ng-template>", styles: [":host,ul,.scroll-container{position:relative}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nw-tabs', template: `
-        <div
-            class="scroll-container"
-            #scrollContainer>
-            <ul
-                class="nav nav-tabs"
-                [ngClass]="tabSizeClass"
-                role="tablist">
-                <ng-content></ng-content>
-
-                <li
-                    #activeBar
-                    class="nav-tabs-active-bar"
-                    [ngStyle]="getActiveStyles()"></li>
-            </ul>
-        </div>
-
-        @if (shouldShowPagination) {
-            <div class="pagination-container">
-                @if (shouldShowPrev) {
-                    <div
-                        class="prev-page"
-                        (click)="prev()"
-                        [ngStyle]="background">
-                        <ng-container *ngTemplateOutlet="paginator"></ng-container>
-                    </div>
-                }
-                @if (shouldShowNext) {
-                    <div
-                        class="next-page"
-                        (click)="next()"
-                        [ngStyle]="background">
-                        <ng-container *ngTemplateOutlet="paginator"></ng-container>
-                    </div>
-                }
-            </div>
-        }
-
-        <ng-template #paginator>
-            <button class="btn btn-md btn-ghost-alt">
-                <i class="fas fa-chevron-left"></i>
-            </button>
-        </ng-template>
-    `, providers: [TabsService], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, NgStyle, NgTemplateOutlet], styles: [":host,ul{position:relative}\n"] }]
+            args: [{ selector: 'nw-tabs', providers: [TabsService], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, NgStyle, NgTemplateOutlet], template: "<div class=\"scroll-container\"\n    #scrollContainer>\n    <ul class=\"nav nav-tabs\"\n        [ngClass]=\"tabSizeClass\"\n        role=\"tablist\"\n        (keydown)=\"onKeydown($event)\"\n        (focusout)=\"onFocusOut()\">\n        <ng-content></ng-content>\n    </ul>\n    <div #activeBar\n        class=\"nav-tabs-active-bar\"\n        aria-hidden=\"true\"\n        [ngStyle]=\"getActiveStyles()\"></div>\n</div>\n\n@if (shouldShowPagination) {\n    <div class=\"pagination-container\">\n        @if (shouldShowPrev) {\n            <div class=\"prev-page\"\n                (click)=\"prev()\"\n                [ngStyle]=\"background\">\n                <ng-container *ngTemplateOutlet=\"paginator\"></ng-container>\n            </div>\n        }\n        @if (shouldShowNext) {\n            <div class=\"next-page\"\n                (click)=\"next()\"\n                [ngStyle]=\"background\">\n                <ng-container *ngTemplateOutlet=\"paginator\"></ng-container>\n            </div>\n        }\n    </div>\n}\n\n<ng-template #paginator>\n    <button class=\"btn btn-md btn-ghost-alt\">\n        <i class=\"fas fa-chevron-left\"></i>\n    </button>\n</ng-template>", styles: [":host,ul,.scroll-container{position:relative}\n"] }]
         }], propDecorators: { size: [{
                 type: Input
             }], maskColor: [{

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

@@ -1 +1 @@
-{"version":3,"file":"nw-style-guide-tabs.mjs","sources":["../../../projects/nw-style-guide/tabs/tabs.service.ts","../../../projects/nw-style-guide/tabs/tab.directive.ts","../../../projects/nw-style-guide/tabs/tabs.component.ts","../../../projects/nw-style-guide/tabs/public-api.ts","../../../projects/nw-style-guide/tabs/nw-style-guide-tabs.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { Subject, Observable } from 'rxjs';\nimport { TabDirective } from './tab.directive';\n\n@Injectable()\nexport class TabsService {\n    private _activeChange: Subject<TabDirective> = new Subject();\n    public activeChange: Observable<TabDirective> = this._activeChange.asObservable();\n\n    notifyActiveChange(tab: TabDirective) {\n        this._activeChange.next(tab);\n    }\n}\n","import { Directive, ElementRef, HostBinding, Input, OnChanges, SimpleChanges, inject } from '@angular/core';\nimport { TabsService } from './tabs.service';\n\n@Directive({ selector: '[nwTab]' })\nexport class TabDirective implements OnChanges {\n    elRef = inject<ElementRef<HTMLElement>>(ElementRef);\n    private _tabsService = inject(TabsService);\n\n    @HostBinding('class.active') @Input() isActive: boolean = false;\n    @HostBinding('attr.role') role = 'tab';\n\n    ngOnChanges(changes: SimpleChanges) {\n        const hasChanged =\n            changes.isActive &&\n            changes.isActive.previousValue !== changes.isActive.currentValue &&\n            !changes.isActive.firstChange;\n\n        if (hasChanged && this.isActive) {\n            this._tabsService.notifyActiveChange(this);\n        }\n    }\n}\n","import {\n    Component,\n    ContentChildren,\n    QueryList,\n    Input,\n    ElementRef,\n    ViewChild,\n    OnInit,\n    ChangeDetectorRef,\n    OnDestroy,\n    ChangeDetectionStrategy,\n    AfterContentInit,\n    inject\n} from '@angular/core';\nimport { TabDirective } from './tab.directive';\nimport { fromEvent, Subscription, Observable, merge } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\nimport { TabsService } from './tabs.service';\nimport { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';\n\n@Component({\n    selector: 'nw-tabs',\n    template: `\n        <div\n            class=\"scroll-container\"\n            #scrollContainer>\n            <ul\n                class=\"nav nav-tabs\"\n                [ngClass]=\"tabSizeClass\"\n                role=\"tablist\">\n                <ng-content></ng-content>\n\n                <li\n                    #activeBar\n                    class=\"nav-tabs-active-bar\"\n                    [ngStyle]=\"getActiveStyles()\"></li>\n            </ul>\n        </div>\n\n        @if (shouldShowPagination) {\n            <div class=\"pagination-container\">\n                @if (shouldShowPrev) {\n                    <div\n                        class=\"prev-page\"\n                        (click)=\"prev()\"\n                        [ngStyle]=\"background\">\n                        <ng-container *ngTemplateOutlet=\"paginator\"></ng-container>\n                    </div>\n                }\n                @if (shouldShowNext) {\n                    <div\n                        class=\"next-page\"\n                        (click)=\"next()\"\n                        [ngStyle]=\"background\">\n                        <ng-container *ngTemplateOutlet=\"paginator\"></ng-container>\n                    </div>\n                }\n            </div>\n        }\n\n        <ng-template #paginator>\n            <button class=\"btn btn-md btn-ghost-alt\">\n                <i class=\"fas fa-chevron-left\"></i>\n            </button>\n        </ng-template>\n    `,\n    providers: [TabsService],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    styles: [\n        `\n            :host,\n            ul {\n                position: relative;\n            }\n        `\n    ],\n    imports: [NgClass, NgStyle, NgTemplateOutlet]\n})\nexport class TabsComponent implements OnInit, AfterContentInit, OnDestroy {\n    private _cdRef = inject(ChangeDetectorRef);\n    private _tabsService = inject(TabsService);\n\n    @Input() size: 'sm' | 'md' | 'lg' = 'md';\n    @Input() maskColor: string = '#373737';\n\n    @ViewChild('scrollContainer', { static: true }) scrollContainer: ElementRef<HTMLElement>;\n    @ViewChild('activeBar', { static: true }) activeBar: ElementRef<HTMLElement>;\n\n    @ContentChildren(TabDirective) tabs: QueryList<TabDirective> = new QueryList();\n\n    private _scrollAndResizeSub: Subscription;\n    private _activeChangeSub: Subscription;\n    private _transitionEndSub: Subscription;\n    private _tabsChangeSub: Subscription;\n    private _paginationTolerance: number = 100;\n\n    ngOnInit() {\n        const scrollStop$: Observable<Event> = fromEvent(this.scrollContainer.nativeElement, 'scroll');\n        const windowResizeStop$: Observable<Event> = fromEvent(window, 'resize');\n\n        this._scrollAndResizeSub = merge(scrollStop$, windowResizeStop$)\n            .pipe(debounceTime(50))\n            .subscribe(_ => this._cdRef.detectChanges());\n\n        this.subscribeToActiveChange();\n        this.subscribeToActiveBarTransitionEnd();\n    }\n\n    ngAfterContentInit() {\n        this.subscribeToTabsChange();\n    }\n\n    subscribeToActiveChange() {\n        this._activeChangeSub = this._tabsService.activeChange.subscribe(tab => {\n            this.scrollToTabIfRequired(tab);\n\n            setTimeout(() => {\n                this._cdRef.detectChanges();\n            }, 0);\n        });\n    }\n\n    subscribeToTabsChange() {\n        this._tabsChangeSub = this.tabs.changes.subscribe(tabs => {\n            setTimeout(() => {\n                this._cdRef.detectChanges();\n            }, 0);\n        });\n    }\n\n    subscribeToActiveBarTransitionEnd() {\n        this._transitionEndSub = fromEvent(this.activeBar.nativeElement, 'transitionend')\n            .pipe(debounceTime(50))\n            .subscribe(() => {\n                console.log('transition ended');\n                this._cdRef.detectChanges();\n            });\n    }\n\n    getActiveTab(): TabDirective {\n        return this.tabs.filter(t => t.isActive)[0];\n    }\n\n    get tabSizeClass(): string {\n        return `nav-${this.size}`;\n    }\n\n    getActiveStyles(): Record<string, string> {\n        const tab: TabDirective = this.getActiveTab();\n\n        if (tab) {\n            return {\n                width: tab.elRef.nativeElement.getBoundingClientRect().width + 'px',\n                left: tab.elRef.nativeElement.offsetLeft + 'px'\n            };\n        }\n        return {};\n    }\n\n    getScrollEl(): HTMLElement {\n        return this.scrollContainer.nativeElement;\n    }\n\n    get background() {\n        return {\n            background: `linear-gradient(to left, rgba(0,0,0,0), ${this.maskColor})`\n        };\n    }\n\n    get clientWidth(): number {\n        return this.getScrollEl().clientWidth;\n    }\n\n    get shouldShowPagination(): boolean {\n        return +(this.getScrollEl().scrollWidth / this.clientWidth).toFixed(1) >= 1;\n    }\n\n    get shouldShowPrev(): boolean {\n        return this.getScrollEl().scrollLeft >= 1;\n    }\n\n    get shouldShowNext(): boolean {\n        return this.getScrollEl().scrollLeft + this.clientWidth < this.getScrollEl().scrollWidth;\n    }\n\n    prev(): void {\n        this.getScrollEl().scrollLeft -= this.clientWidth - this._paginationTolerance;\n    }\n\n    next() {\n        this.getScrollEl().scrollLeft += this.clientWidth - this._paginationTolerance;\n    }\n\n    scrollToTabIfRequired(tab: TabDirective) {\n        const offsetLeft = tab.elRef.nativeElement.offsetLeft;\n        const position = {\n            left: offsetLeft,\n            right: offsetLeft + tab.elRef.nativeElement.clientWidth\n        };\n\n        const shouldScrollLeft: boolean = position.left < this.getScrollEl().scrollLeft;\n        const shouldScrollRight: boolean = position.right > this.getScrollEl().scrollLeft + this.clientWidth;\n\n        if (shouldScrollLeft) {\n            this.getScrollEl().scrollLeft = position.left - 30;\n        } else if (shouldScrollRight) {\n            this.getScrollEl().scrollLeft = position.right - this.clientWidth + 12 + 30; // plus 12 for margin\n        }\n    }\n\n    ngOnDestroy() {\n        this._scrollAndResizeSub.unsubscribe();\n        this._activeChangeSub.unsubscribe();\n        this._transitionEndSub.unsubscribe();\n        this._tabsChangeSub.unsubscribe();\n    }\n}\n","export { TabDirective } from './tab.directive';\nexport { TabsComponent } from './tabs.component';\n\nimport { TabDirective } from './tab.directive';\nimport { TabsComponent } from './tabs.component';\n\n/**\n * Export cooperating directives\n * https://v17.angular.io/guide/standalone-components#standalone-components-for-library-authors\n */\nexport const TABS_DIRECTIVES = [TabDirective, TabsComponent] 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-tabs.mjs","sources":["../../../projects/nw-style-guide/tabs/tabs.service.ts","../../../projects/nw-style-guide/tabs/tab.directive.ts","../../../projects/nw-style-guide/tabs/tabs.component.ts","../../../projects/nw-style-guide/tabs/tabs.component.html","../../../projects/nw-style-guide/tabs/public-api.ts","../../../projects/nw-style-guide/tabs/nw-style-guide-tabs.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { Subject, Observable } from 'rxjs';\nimport { TabDirective } from './tab.directive';\n\n@Injectable()\nexport class TabsService {\n    private _activeChange: Subject<TabDirective> = new Subject();\n    public activeChange: Observable<TabDirective> = this._activeChange.asObservable();\n\n    notifyActiveChange(tab: TabDirective) {\n        this._activeChange.next(tab);\n    }\n}\n","import { AfterContentInit, Directive, ElementRef, HostBinding, Input, OnChanges, SimpleChanges, inject } from '@angular/core';\nimport { TabsService } from './tabs.service';\n\n@Directive({ selector: '[nwTab]' })\nexport class TabDirective implements OnChanges, AfterContentInit {\n    readonly elRef = inject<ElementRef<HTMLElement>>(ElementRef);\n    private _tabsService = inject(TabsService);\n\n    @HostBinding('class.active') @Input() isActive: boolean = false;\n    @HostBinding('attr.role') readonly role = 'tab';\n    @HostBinding('attr.aria-selected') get ariaSelected() { return String(this.isActive); }\n\n    ngAfterContentInit() {\n        // <li role=\"tab\"> is the keyboard target; inner tab button is click-only\n        this.elRef.nativeElement.querySelector<HTMLButtonElement>('button')?.setAttribute('tabindex', '-1');\n        this._applyTabindex(this.isActive ? '0' : '-1');\n    }\n\n    ngOnChanges(changes: SimpleChanges) {\n        const change = changes.isActive;\n        const hasActiveChanged = change && !change.firstChange && change.previousValue !== change.currentValue;\n        if (!hasActiveChanged) return;\n\n        this._applyTabindex(this.isActive ? '0' : '-1');\n        if (this.isActive) {\n            this._tabsService.notifyActiveChange(this);\n        }\n    }\n\n    focus() {\n        this.elRef.nativeElement.focus();\n    }\n\n    setTabindex(value: string) {\n        this._applyTabindex(value);\n    }\n\n    restoreTabindex() {\n        this._applyTabindex(this.isActive ? '0' : '-1');\n    }\n\n    private _applyTabindex(value: string) {\n        this.elRef.nativeElement.setAttribute('tabindex', value);\n        this._actionButton()?.setAttribute('tabindex', value);\n    }\n\n    private _actionButton(): HTMLButtonElement | null {\n        const btns = this.elRef.nativeElement.querySelectorAll<HTMLButtonElement>('button');\n        return btns.length > 1 ? btns[1] : null;\n    }\n}\n","import {\n    Component,\n    ContentChildren,\n    QueryList,\n    Input,\n    ElementRef,\n    ViewChild,\n    OnInit,\n    ChangeDetectorRef,\n    OnDestroy,\n    ChangeDetectionStrategy,\n    AfterContentInit,\n    inject\n} from '@angular/core';\nimport { TabDirective } from './tab.directive';\nimport { fromEvent, Subscription, merge } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\nimport { TabsService } from './tabs.service';\nimport { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';\n\n@Component({\n    selector: 'nw-tabs',\n    templateUrl: './tabs.component.html',\n    providers: [TabsService],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    styles: [\n        `\n            :host,\n            ul,\n            .scroll-container {\n                position: relative;\n            }\n        `\n    ],\n    imports: [NgClass, NgStyle, NgTemplateOutlet]\n})\nexport class TabsComponent implements OnInit, AfterContentInit, OnDestroy {\n    private _cdRef = inject(ChangeDetectorRef);\n    private _tabsService = inject(TabsService);\n\n    @Input() size: 'sm' | 'md' | 'lg' = 'md';\n    @Input() maskColor: string = '#373737';\n\n    @ViewChild('scrollContainer', { static: true }) scrollContainer: ElementRef<HTMLElement>;\n    @ViewChild('activeBar', { static: true }) activeBar: ElementRef<HTMLElement>;\n\n    @ContentChildren(TabDirective) tabs: QueryList<TabDirective> = new QueryList();\n\n    private _scrollAndResizeSub: Subscription;\n    private _activeChangeSub: Subscription;\n    private _transitionEndSub: Subscription;\n    private _tabsChangeSub: Subscription;\n    private _paginationTolerance: number = 100;\n\n    ngOnInit() {\n        const scrollStop$ = fromEvent(this.scrollContainer.nativeElement, 'scroll');\n        const windowResizeStop$ = fromEvent(window, 'resize');\n\n        this._scrollAndResizeSub = merge(scrollStop$, windowResizeStop$)\n            .pipe(debounceTime(50))\n            .subscribe(() => this._cdRef.detectChanges());\n\n        this._subscribeToActiveChange();\n        this._subscribeToActiveBarTransitionEnd();\n    }\n\n    ngAfterContentInit() {\n        this._subscribeToTabsChange();\n    }\n\n    getActiveStyles(): Record<string, string> {\n        const tab: TabDirective = this._getActiveTab();\n\n        if (tab) {\n            const btn = tab.elRef.nativeElement.querySelector('button');\n            return {\n                width: (btn ?? tab.elRef.nativeElement).getBoundingClientRect().width + 'px',\n                transform: `translateX(${tab.elRef.nativeElement.offsetLeft}px)`\n            };\n        }\n        return {};\n    }\n\n    prev(): void {\n        this._getScrollEl().scrollLeft -= this.clientWidth - this._paginationTolerance;\n    }\n\n    next() {\n        this._getScrollEl().scrollLeft += this.clientWidth - this._paginationTolerance;\n    }\n\n    onKeydown(event: KeyboardEvent) {\n        const tabs = this.tabs.toArray();\n        if (!tabs.length) return;\n\n        const focusedIndex = tabs.findIndex(t =>\n            t.elRef.nativeElement.contains(document.activeElement)\n        );\n        if (focusedIndex === -1) return;\n\n        let targetIndex: number | null = null;\n\n        switch (event.key) {\n            case 'ArrowLeft':\n                targetIndex = focusedIndex === 0 ? tabs.length - 1 : focusedIndex - 1;\n                break;\n            case 'ArrowRight':\n                targetIndex = focusedIndex === tabs.length - 1 ? 0 : focusedIndex + 1;\n                break;\n            case 'Home':\n                targetIndex = 0;\n                break;\n            case 'End':\n                targetIndex = tabs.length - 1;\n                break;\n        }\n\n        if (targetIndex !== null) {\n            event.preventDefault();\n            this.tabs.forEach(t => t.setTabindex('-1'));\n            tabs[targetIndex].setTabindex('0');\n            tabs[targetIndex].focus();\n        }\n    }\n\n    onFocusOut() {\n        setTimeout(() => {\n            if (!this.scrollContainer.nativeElement.contains(document.activeElement)) {\n                this.tabs.forEach(t => t.restoreTabindex());\n            }\n        });\n    }\n\n    get tabSizeClass(): string {\n        return `nav-${this.size}`;\n    }\n\n    get background() {\n        return {\n            background: `linear-gradient(to left, rgba(0,0,0,0), ${this.maskColor})`\n        };\n    }\n\n    get clientWidth(): number {\n        return this._getScrollEl().clientWidth;\n    }\n\n    get shouldShowPagination(): boolean {\n        return +(this._getScrollEl().scrollWidth / this.clientWidth).toFixed(1) >= 1;\n    }\n\n    get shouldShowPrev(): boolean {\n        return this._getScrollEl().scrollLeft >= 1;\n    }\n\n    get shouldShowNext(): boolean {\n        return this._getScrollEl().scrollLeft + this.clientWidth < this._getScrollEl().scrollWidth;\n    }\n\n    private _subscribeToActiveChange() {\n        this._activeChangeSub = this._tabsService.activeChange.subscribe(tab => {\n            this._scrollToTabIfRequired(tab);\n\n            setTimeout(() => {\n                this._cdRef.detectChanges();\n            }, 0);\n        });\n    }\n\n    private _subscribeToTabsChange() {\n        this._tabsChangeSub = this.tabs.changes.subscribe(() => {\n            setTimeout(() => {\n                this._cdRef.detectChanges();\n            }, 0);\n        });\n    }\n\n    private _subscribeToActiveBarTransitionEnd() {\n        this._transitionEndSub = fromEvent(this.activeBar.nativeElement, 'transitionend')\n            .pipe(debounceTime(50))\n            .subscribe(() => this._cdRef.detectChanges());\n    }\n\n    private _getActiveTab(): TabDirective {\n        return this.tabs.filter(t => t.isActive)[0];\n    }\n\n    private _getScrollEl(): HTMLElement {\n        return this.scrollContainer.nativeElement;\n    }\n\n    private _scrollToTabIfRequired(tab: TabDirective) {\n        const offsetLeft = tab.elRef.nativeElement.offsetLeft;\n        const position = {\n            left: offsetLeft,\n            right: offsetLeft + tab.elRef.nativeElement.clientWidth\n        };\n\n        const shouldScrollLeft: boolean = position.left < this._getScrollEl().scrollLeft;\n        const shouldScrollRight: boolean = position.right > this._getScrollEl().scrollLeft + this.clientWidth;\n\n        if (shouldScrollLeft) {\n            this._getScrollEl().scrollLeft = position.left - 30;\n        } else if (shouldScrollRight) {\n            this._getScrollEl().scrollLeft = position.right - this.clientWidth + 12 + 30; // plus 12 for margin\n        }\n    }\n\n    ngOnDestroy() {\n        this._scrollAndResizeSub.unsubscribe();\n        this._activeChangeSub.unsubscribe();\n        this._transitionEndSub.unsubscribe();\n        this._tabsChangeSub.unsubscribe();\n    }\n}\n","<div class=\"scroll-container\"\n    #scrollContainer>\n    <ul class=\"nav nav-tabs\"\n        [ngClass]=\"tabSizeClass\"\n        role=\"tablist\"\n        (keydown)=\"onKeydown($event)\"\n        (focusout)=\"onFocusOut()\">\n        <ng-content></ng-content>\n    </ul>\n    <div #activeBar\n        class=\"nav-tabs-active-bar\"\n        aria-hidden=\"true\"\n        [ngStyle]=\"getActiveStyles()\"></div>\n</div>\n\n@if (shouldShowPagination) {\n    <div class=\"pagination-container\">\n        @if (shouldShowPrev) {\n            <div class=\"prev-page\"\n                (click)=\"prev()\"\n                [ngStyle]=\"background\">\n                <ng-container *ngTemplateOutlet=\"paginator\"></ng-container>\n            </div>\n        }\n        @if (shouldShowNext) {\n            <div class=\"next-page\"\n                (click)=\"next()\"\n                [ngStyle]=\"background\">\n                <ng-container *ngTemplateOutlet=\"paginator\"></ng-container>\n            </div>\n        }\n    </div>\n}\n\n<ng-template #paginator>\n    <button class=\"btn btn-md btn-ghost-alt\">\n        <i class=\"fas fa-chevron-left\"></i>\n    </button>\n</ng-template>","export { TabDirective } from './tab.directive';\nexport { TabsComponent } from './tabs.component';\n\nimport { TabDirective } from './tab.directive';\nimport { TabsComponent } from './tabs.component';\n\n/**\n * Export cooperating directives\n * https://v17.angular.io/guide/standalone-components#standalone-components-for-library-authors\n */\nexport const TABS_DIRECTIVES = [TabDirective, TabsComponent] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nw-style-guide",
   "type": "module",
-  "version": "21.1.1",
+  "version": "21.2.0-beta.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/NewsWhip/style-guide"

package/sass/src/_navs.scss

@@ -22,7 +22,7 @@
         display: inline-block;
 
         > a,
-        > button {
+        > button:not(.btn) {
             position: relative;
             display: block;
             @include nav-size.nav-size(variables.$padding-base-vertical, variables.$padding-base-horizontal, 14px, 1);
@@ -41,7 +41,7 @@
 
         // Disabled state sets text to gray and nukes hover/tab effects
         &.disabled > a,
-        &.disabled > button {
+        &.disabled > button:not(.btn) {
             color: variables.$nav-disabled-link-color;
 
             &:hover,
@@ -56,7 +56,7 @@
 
     // Open dropdowns
     .open > a,
-    .open > button {
+    .open > button:not(.btn) {
         &,
         &:hover,
         &:focus {
@@ -89,11 +89,15 @@
 .nav-tabs {
     > li {
         margin: 0 12px;
+        display: inline-flex;
+        align-items: center;
         vertical-align: middle;
 
         // Actual tabs (as links or buttons)
         > a,
-        > button {
+        > button:not(.btn) {
+            width: auto;
+            min-width: 0;
             color: variables.$text-color-secondary;
         }
         &:first-child {
@@ -105,7 +109,7 @@
 
         // Active state, and its :hover to override normal :hover
         &.active > a,
-        &.active > button {
+        &.active > button:not(.btn) {
             &,
             &:hover,
             &:focus {
@@ -120,7 +124,7 @@
         @extend .nav-tabs-justified;
     }
     &.nav-sm > li > a,
-    &.nav-sm > li > button {
+    &.nav-sm > li > button:not(.btn) {
         @include nav-size.nav-size(
             variables.$padding-small-vertical + 1,
             0,
@@ -129,11 +133,11 @@
         );
     }
     &.nav-md > li > a,
-    &.nav-md > li > button {
+    &.nav-md > li > button:not(.btn) {
         @include nav-size.nav-size(variables.$padding-base-vertical + 1, 0, 14px, variables.$line-height-base);
     }
     &.nav-lg > li > a,
-    &.nav-lg > li > button {
+    &.nav-lg > li > button:not(.btn) {
         @include nav-size.nav-size(
             variables.$padding-large-vertical + 1,
             0,
@@ -187,6 +191,8 @@ nw-tabs {
         display: block;
         height: 3px;
         position: absolute;
+        bottom: 0;
+        left: 0;
         background-color: variables.get-color('primary', base);
         transition: all ease-in-out 200ms;
     }