@skyux/tabs 9.21.3 → 9.23.0

package/lib/modules/vertical-tabset/vertical-tab.component.d.ts

@@ -2,6 +2,7 @@ import { ChangeDetectorRef, ElementRef, OnDestroy, OnInit } from '@angular/core'
 import { SkyTabIdService } from '../shared/tab-id.service';
 import { SkyVerticalTabMediaQueryService } from './vertical-tab-media-query.service';
 import { SkyVerticalTabsetAdapterService } from './vertical-tabset-adapter.service';
+import { SkyVerticalTabsetGroupService } from './vertical-tabset-group.service';
 import { SkyVerticalTabsetService } from './vertical-tabset.service';
 import * as i0 from "@angular/core";
 export declare class SkyVerticalTabComponent implements OnInit, OnDestroy {
@@ -63,13 +64,16 @@ export declare class SkyVerticalTabComponent implements OnInit, OnDestroy {
     get contentRendered(): boolean;
     index: number | undefined;
     isMobile: boolean;
+    tabButton: ElementRef | undefined;
     tabContent: ElementRef | undefined;
+    groupService: SkyVerticalTabsetGroupService | null;
     constructor(adapterService: SkyVerticalTabsetAdapterService, changeRef: ChangeDetectorRef, tabsetService: SkyVerticalTabsetService, verticalTabMediaQueryService: SkyVerticalTabMediaQueryService, tabIdSvc?: SkyTabIdService);
     ngOnInit(): void;
     ngOnDestroy(): void;
-    tabIndex(): number;
     activateTab(): void;
-    onTabButtonKeyUp(event: KeyboardEvent): void;
+    focusButton(): void;
+    tabButtonActivate(event: Event): void;
+    tabButtonArrowLeft(event: Event): void;
     onWindowResize(): void;
     tabDeactivated(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyVerticalTabComponent, [null, null, null, null, { optional: true; }]>;

package/lib/modules/vertical-tabset/vertical-tabset-adapter.service.d.ts

@@ -7,6 +7,10 @@ export declare class SkyVerticalTabsetAdapterService {
     getWidth(elementRef: ElementRef): number;
     scrollToContentTop(element: ElementRef): void;
     setResponsiveClass(element: ElementRef, breakpoint: SkyMediaBreakpoints): void;
+    focusButton(elRef: ElementRef<HTMLElement> | undefined): boolean;
+    focusFirstButton(tabGroups: ElementRef<HTMLElement> | undefined): void;
+    focusNextButton(tabGroups: ElementRef | undefined): void;
+    focusPreviousButton(tabGroups: ElementRef | undefined): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyVerticalTabsetAdapterService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<SkyVerticalTabsetAdapterService>;
 }

package/lib/modules/vertical-tabset/vertical-tabset-group-message.d.ts

@@ -0,0 +1,3 @@
+export interface SkyVerticalTabsetGroupMessage {
+    messageType: 'focus';
+}

package/lib/modules/vertical-tabset/vertical-tabset-group.component.d.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, OnDestroy, OnInit, QueryList } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, OnDestroy, OnInit, QueryList } from '@angular/core';
 import { SkyVerticalTabComponent } from './vertical-tab.component';
 import { SkyVerticalTabsetService } from './vertical-tabset.service';
 import * as i0 from "@angular/core";
@@ -21,17 +21,18 @@ export declare class SkyVerticalTabsetGroupComponent implements OnInit, OnDestro
     set open(value: boolean | undefined);
     get open(): boolean | undefined;
     tabs: QueryList<SkyVerticalTabComponent> | undefined;
+    groupHeadingButton: ElementRef | undefined;
     animationDisabled: boolean;
     slideDirection: 'down' | 'up' | 'void';
+    protected groupId: string;
     constructor(tabService: SkyVerticalTabsetService, changeRef: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnDestroy(): void;
     updateSlideDirection(event: any): void;
     toggleMenuOpen(): void;
-    subMenuOpen(): boolean;
-    tabClicked: () => void;
-    tabsHidden: () => void;
-    tabsShown: () => void;
+    protected groupButtonArrowLeft(event: Event): void;
+    protected groupButtonArrowRight(event: Event): void;
+    isActive(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyVerticalTabsetGroupComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SkyVerticalTabsetGroupComponent, "sky-vertical-tabset-group", never, { "disabled": { "alias": "disabled"; "required": false; }; "groupHeading": { "alias": "groupHeading"; "required": false; }; "open": { "alias": "open"; "required": false; }; }, {}, ["tabs"], ["*"], false, never>;
 }

package/lib/modules/vertical-tabset/vertical-tabset-group.service.d.ts

@@ -0,0 +1,11 @@
+import { Subject } from 'rxjs';
+import { SkyVerticalTabsetGroupMessage } from './vertical-tabset-group-message';
+import * as i0 from "@angular/core";
+/**
+ * @internal
+ */
+export declare class SkyVerticalTabsetGroupService {
+    messageStream: Subject<SkyVerticalTabsetGroupMessage>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkyVerticalTabsetGroupService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SkyVerticalTabsetGroupService>;
+}

package/lib/modules/vertical-tabset/vertical-tabset.component.d.ts

@@ -8,6 +8,7 @@ export declare class SkyVerticalTabsetComponent implements OnInit, AfterViewChec
     #private;
     adapterService: SkyVerticalTabsetAdapterService;
     tabService: SkyVerticalTabsetService;
+    tabIdSvc: SkyTabIdService;
     /**
      * The text to display on the show tabs button on mobile devices.
      */
@@ -55,10 +56,16 @@ export declare class SkyVerticalTabsetComponent implements OnInit, AfterViewChec
     contentWrapper: ElementRef | undefined;
     ariaOwns: string | undefined;
     isMobile: boolean;
+    protected tablistHasFocus: boolean;
     constructor(adapterService: SkyVerticalTabsetAdapterService, tabService: SkyVerticalTabsetService, resources: SkyLibResourcesService, changeRef: ChangeDetectorRef, tabIdSvc: SkyTabIdService);
     ngOnInit(): void;
     ngAfterViewChecked(): void;
     ngOnDestroy(): void;
+    protected tabsetFocus(): void;
+    protected tabGroupsFocusIn(): void;
+    protected tabGroupsFocusOut(): void;
+    protected tabGroupsArrowDown(): void;
+    protected tabGroupsArrowUp(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyVerticalTabsetComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SkyVerticalTabsetComponent, "sky-vertical-tabset", never, { "showTabsText": { "alias": "showTabsText"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "ariaRole": { "alias": "ariaRole"; "required": false; }; "maintainTabContent": { "alias": "maintainTabContent"; "required": false; }; }, { "activeChange": "activeChange"; }, never, ["*"], false, never>;
 }

package/lib/modules/vertical-tabset/vertical-tabset.service.d.ts

@@ -2,6 +2,7 @@ import { ElementRef } from '@angular/core';
 import { SkyMediaQueryService } from '@skyux/core';
 import { BehaviorSubject, ReplaySubject, Subject } from 'rxjs';
 import { SkyVerticalTabComponent } from './vertical-tab.component';
+import { SkyVerticalTabsetGroupComponent } from './vertical-tabset-group.component';
 import * as i0 from "@angular/core";
 export declare const VISIBLE_STATE = "shown";
 export declare const HIDDEN_STATE = "void";
@@ -25,6 +26,8 @@ export declare class SkyVerticalTabsetService {
     constructor(mediaQueryService: SkyMediaQueryService);
     addTab(tab: SkyVerticalTabComponent): void;
     destroyTab(tab: SkyVerticalTabComponent): void;
+    addGroup(group: SkyVerticalTabsetGroupComponent): void;
+    destroyGroup(group: SkyVerticalTabsetGroupComponent): void;
     activateTab(tab: SkyVerticalTabComponent): void;
     activeTab(): SkyVerticalTabComponent | undefined;
     isMobile(): boolean;
@@ -32,6 +35,7 @@ export declare class SkyVerticalTabsetService {
     tabsVisible(): boolean;
     contentVisible(): boolean;
     showTabs(): void;
+    focusActiveTab(tabGroups: ElementRef | undefined): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyVerticalTabsetService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<SkyVerticalTabsetService>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyux/tabs",
-  "version": "9.21.3",
+  "version": "9.23.0",
   "author": "Blackbaud, Inc.",
   "keywords": [
     "blackbaud",
@@ -41,14 +41,14 @@
     "@angular/core": "^16.2.9",
     "@angular/platform-browser": "^16.2.9",
     "@angular/router": "^16.2.9",
-    "@skyux-sdk/testing": "9.21.3",
-    "@skyux/animations": "9.21.3",
-    "@skyux/core": "9.21.3",
-    "@skyux/forms": "9.21.3",
-    "@skyux/i18n": "9.21.3",
-    "@skyux/indicators": "9.21.3",
-    "@skyux/popovers": "9.21.3",
-    "@skyux/theme": "9.21.3"
+    "@skyux-sdk/testing": "9.23.0",
+    "@skyux/animations": "9.23.0",
+    "@skyux/core": "9.23.0",
+    "@skyux/forms": "9.23.0",
+    "@skyux/i18n": "9.23.0",
+    "@skyux/indicators": "9.23.0",
+    "@skyux/popovers": "9.23.0",
+    "@skyux/theme": "9.23.0"
   },
   "dependencies": {
     "tslib": "^2.6.2"