@skyux/tabs 10.0.0-alpha.0 → 10.0.0-alpha.2

package/lib/modules/tabs/tab-button-view-model.d.ts

@@ -2,7 +2,7 @@ import { SkyTabIndex } from './tab-index';
 /**
  * @internal
  */
-export type TabButtonViewModel = {
+export interface TabButtonViewModel {
     active: boolean;
     ariaControls: string;
     buttonHref: string | null;
@@ -14,4 +14,4 @@ export type TabButtonViewModel = {
     tabIndex: SkyTabIndex | undefined;
     tabNumber: number;
     totalTabsCount: number;
-};
+}

package/lib/modules/tabs/tabs.module.d.ts

@@ -7,10 +7,11 @@ import * as i5 from "./tabset-nav-button-disabled.pipe";
 import * as i6 from "@angular/common";
 import * as i7 from "@skyux/popovers";
 import * as i8 from "@skyux/indicators";
-import * as i9 from "../shared/sky-tabs-resources.module";
-import * as i10 from "@skyux/theme";
+import * as i9 from "@skyux/core";
+import * as i10 from "../shared/sky-tabs-resources.module";
+import * as i11 from "@skyux/theme";
 export declare class SkyTabsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyTabsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SkyTabsModule, [typeof i1.SkyTabButtonComponent, typeof i2.SkyTabComponent, typeof i3.SkyTabsetComponent, typeof i4.SkyTabsetNavButtonComponent, typeof i5.SkyTabsetNavButtonDisabledPipe], [typeof i6.CommonModule, typeof i7.SkyDropdownModule, typeof i8.SkyIconModule, typeof i9.SkyTabsResourcesModule, typeof i10.SkyThemeModule], [typeof i2.SkyTabComponent, typeof i3.SkyTabsetComponent, typeof i4.SkyTabsetNavButtonComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SkyTabsModule, [typeof i1.SkyTabButtonComponent, typeof i2.SkyTabComponent, typeof i3.SkyTabsetComponent, typeof i4.SkyTabsetNavButtonComponent, typeof i5.SkyTabsetNavButtonDisabledPipe], [typeof i6.CommonModule, typeof i7.SkyDropdownModule, typeof i8.SkyIconModule, typeof i9.SkyIdModule, typeof i10.SkyTabsResourcesModule, typeof i11.SkyThemeModule], [typeof i2.SkyTabComponent, typeof i3.SkyTabsetComponent, typeof i4.SkyTabsetNavButtonComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SkyTabsModule>;
 }

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

@@ -2,14 +2,17 @@ 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 {
     #private;
     /**
      * Whether the tab is active when the tabset loads.
+     * @default false
      */
-    active: boolean | undefined;
+    set active(value: boolean | undefined);
+    get active(): boolean;
     /**
      * The HTML element ID of the element that contains
      * the content that the vertical tab displays, which corresponds to the `tabId`. This property
@@ -63,13 +66,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";
@@ -19,12 +20,14 @@ export declare class SkyVerticalTabsetService {
     maintainTabContent: boolean | undefined;
     showingTabs: BehaviorSubject<boolean>;
     switchingMobile: Subject<boolean>;
-    tabs: Array<SkyVerticalTabComponent>;
+    tabs: SkyVerticalTabComponent[];
     tabAdded: Subject<SkyVerticalTabComponent>;
     tabClicked: ReplaySubject<boolean>;
     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": "10.0.0-alpha.0",
+  "version": "10.0.0-alpha.2",
   "author": "Blackbaud, Inc.",
   "keywords": [
     "blackbaud",
@@ -36,19 +36,19 @@
     }
   },
   "peerDependencies": {
-    "@angular/animations": "^17.1.0",
-    "@angular/common": "^17.1.0",
-    "@angular/core": "^17.1.0",
-    "@angular/platform-browser": "^17.1.0",
-    "@angular/router": "^17.1.0",
-    "@skyux-sdk/testing": "10.0.0-alpha.0",
-    "@skyux/animations": "10.0.0-alpha.0",
-    "@skyux/core": "10.0.0-alpha.0",
-    "@skyux/forms": "10.0.0-alpha.0",
-    "@skyux/i18n": "10.0.0-alpha.0",
-    "@skyux/indicators": "10.0.0-alpha.0",
-    "@skyux/popovers": "10.0.0-alpha.0",
-    "@skyux/theme": "10.0.0-alpha.0"
+    "@angular/animations": "^17.1.1",
+    "@angular/common": "^17.1.1",
+    "@angular/core": "^17.1.1",
+    "@angular/platform-browser": "^17.1.1",
+    "@angular/router": "^17.1.1",
+    "@skyux-sdk/testing": "10.0.0-alpha.2",
+    "@skyux/animations": "10.0.0-alpha.2",
+    "@skyux/core": "10.0.0-alpha.2",
+    "@skyux/forms": "10.0.0-alpha.2",
+    "@skyux/i18n": "10.0.0-alpha.2",
+    "@skyux/indicators": "10.0.0-alpha.2",
+    "@skyux/popovers": "10.0.0-alpha.2",
+    "@skyux/theme": "10.0.0-alpha.2"
   },
   "dependencies": {
     "tslib": "^2.6.2"