@skyux/tabs 7.0.0-alpha.0 → 7.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/documentation.json +458 -316
- package/esm2020/lib/modules/tabs/tab-button-adapter.service.mjs +16 -0
- package/esm2020/lib/modules/tabs/tab-button-view-model.mjs +2 -0
- package/esm2020/lib/modules/tabs/tab-button.component.mjs +65 -10
- package/esm2020/lib/modules/tabs/tabset.component.mjs +18 -3
- package/esm2020/lib/modules/tabs/tabset.service.mjs +63 -1
- package/fesm2015/skyux-tabs.mjs +253 -114
- package/fesm2015/skyux-tabs.mjs.map +1 -1
- package/fesm2020/skyux-tabs.mjs +254 -115
- package/fesm2020/skyux-tabs.mjs.map +1 -1
- package/lib/modules/tabs/tab-button-adapter.service.d.ts +10 -0
- package/lib/modules/tabs/tab-button-view-model.d.ts +15 -0
- package/lib/modules/tabs/tab-button.component.d.ts +17 -4
- package/lib/modules/tabs/tabset.component.d.ts +6 -15
- package/lib/modules/tabs/tabset.service.d.ts +11 -0
- package/package.json +9 -9
package/fesm2020/skyux-tabs.mjs
CHANGED
|
@@ -19,7 +19,7 @@ import * as i1$1 from '@angular/router';
|
|
|
19
19
|
import { RouterModule } from '@angular/router';
|
|
20
20
|
import * as i5$1 from '@skyux/popovers';
|
|
21
21
|
import { SkyDropdownModule } from '@skyux/popovers';
|
|
22
|
-
import {
|
|
22
|
+
import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
|
|
23
23
|
|
|
24
24
|
/**
|
|
25
25
|
* NOTICE: DO NOT MODIFY THIS FILE!
|
|
@@ -998,10 +998,232 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
998
998
|
/**
|
|
999
999
|
* @internal
|
|
1000
1000
|
*/
|
|
1001
|
-
class
|
|
1001
|
+
class SkyTabButtonAdapterService {
|
|
1002
|
+
focusButtonLink(buttonEl) {
|
|
1003
|
+
buttonEl.nativeElement.querySelector('a').focus();
|
|
1004
|
+
}
|
|
1005
|
+
}
|
|
1006
|
+
SkyTabButtonAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabButtonAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1007
|
+
SkyTabButtonAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabButtonAdapterService });
|
|
1008
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabButtonAdapterService, decorators: [{
|
|
1009
|
+
type: Injectable
|
|
1010
|
+
}] });
|
|
1011
|
+
|
|
1012
|
+
/**
|
|
1013
|
+
* @internal
|
|
1014
|
+
*/
|
|
1015
|
+
class SkyTabsetService {
|
|
1002
1016
|
constructor() {
|
|
1017
|
+
this.currentActiveTabIndex = 0;
|
|
1018
|
+
this.currentFocusedTabBtnIndex = 0;
|
|
1019
|
+
this._activeTabIndex = new BehaviorSubject(0);
|
|
1020
|
+
this._focusedTabBtnIndex = new Subject();
|
|
1021
|
+
this._activeTabUnregistered = new Subject();
|
|
1022
|
+
this.tabs = [];
|
|
1023
|
+
this.tabCounter = 0;
|
|
1024
|
+
}
|
|
1025
|
+
get activeTabUnregistered() {
|
|
1026
|
+
return this._activeTabUnregistered.asObservable();
|
|
1027
|
+
}
|
|
1028
|
+
get activeTabIndex() {
|
|
1029
|
+
return this._activeTabIndex.asObservable();
|
|
1030
|
+
}
|
|
1031
|
+
get focusedTabBtnIndex() {
|
|
1032
|
+
return this._focusedTabBtnIndex.asObservable();
|
|
1033
|
+
}
|
|
1034
|
+
/**
|
|
1035
|
+
* Sets the active tab by its unique `tabIndex` property.
|
|
1036
|
+
*/
|
|
1037
|
+
setActiveTabIndex(value, config = {
|
|
1038
|
+
emitChange: true,
|
|
1039
|
+
}) {
|
|
1040
|
+
if (value !== undefined &&
|
|
1041
|
+
!this.tabIndexesEqual(value, this.currentActiveTabIndex)) {
|
|
1042
|
+
this.currentActiveTabIndex = value;
|
|
1043
|
+
/* istanbul ignore else */
|
|
1044
|
+
if (config.emitChange) {
|
|
1045
|
+
this._activeTabIndex.next(value);
|
|
1046
|
+
}
|
|
1047
|
+
this.setFocusedTabBtnIndex(value);
|
|
1048
|
+
}
|
|
1049
|
+
}
|
|
1050
|
+
focusNextTabBtn(tabButtons) {
|
|
1051
|
+
const currentTabArrayIndex = this.tabs.findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, this.currentFocusedTabBtnIndex));
|
|
1052
|
+
for (let i = this.getNextTabArrayIndex(currentTabArrayIndex); i !== currentTabArrayIndex; i = this.getNextTabArrayIndex(i)) {
|
|
1053
|
+
const tabBtn = tabButtons[i];
|
|
1054
|
+
if (!tabBtn.disabled) {
|
|
1055
|
+
this.setFocusedTabBtnIndex(tabBtn.tabIndex);
|
|
1056
|
+
return;
|
|
1057
|
+
}
|
|
1058
|
+
}
|
|
1059
|
+
}
|
|
1060
|
+
focusPrevTabBtn(tabButtons) {
|
|
1061
|
+
const currentTabArrayIndex = this.tabs.findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, this.currentFocusedTabBtnIndex));
|
|
1062
|
+
for (let i = this.getPrevTabArrayIndex(currentTabArrayIndex); i !== currentTabArrayIndex; i = this.getPrevTabArrayIndex(i)) {
|
|
1063
|
+
const tabBtn = tabButtons[i];
|
|
1064
|
+
if (!tabBtn.disabled) {
|
|
1065
|
+
this.setFocusedTabBtnIndex(tabBtn.tabIndex);
|
|
1066
|
+
return;
|
|
1067
|
+
}
|
|
1068
|
+
}
|
|
1069
|
+
}
|
|
1070
|
+
focusFirstOrNearestTabBtn(tabButtons) {
|
|
1071
|
+
for (let i = 0; i < tabButtons.length; i++) {
|
|
1072
|
+
const tabBtn = tabButtons[i];
|
|
1073
|
+
if (!tabBtn.disabled) {
|
|
1074
|
+
this.setFocusedTabBtnIndex(tabBtn.tabIndex);
|
|
1075
|
+
return;
|
|
1076
|
+
}
|
|
1077
|
+
}
|
|
1078
|
+
}
|
|
1079
|
+
focusLastOrNearestTabBtn(tabButtons) {
|
|
1080
|
+
for (let i = tabButtons.length - 1; i >= 0; i--) {
|
|
1081
|
+
const tabBtn = tabButtons[i];
|
|
1082
|
+
if (!tabBtn.disabled) {
|
|
1083
|
+
this.setFocusedTabBtnIndex(tabBtn.tabIndex);
|
|
1084
|
+
return;
|
|
1085
|
+
}
|
|
1086
|
+
}
|
|
1087
|
+
}
|
|
1088
|
+
setFocusedTabBtnIndex(tabIndex) {
|
|
1089
|
+
this.currentFocusedTabBtnIndex = tabIndex;
|
|
1090
|
+
this._focusedTabBtnIndex.next(tabIndex);
|
|
1091
|
+
}
|
|
1092
|
+
/**
|
|
1093
|
+
* Registers a tab component.
|
|
1094
|
+
*/
|
|
1095
|
+
registerTab(tabIndex) {
|
|
1096
|
+
if (tabIndex === undefined) {
|
|
1097
|
+
tabIndex = this.tabCounter;
|
|
1098
|
+
this.tabCounter++;
|
|
1099
|
+
}
|
|
1100
|
+
this.tabs.push({ tabIndex });
|
|
1101
|
+
return tabIndex;
|
|
1102
|
+
}
|
|
1103
|
+
updateTabIndex(currentTabIndex, newTabIndex) {
|
|
1104
|
+
const found = this.tabs.find((tab) => this.tabIndexesEqual(tab.tabIndex, currentTabIndex));
|
|
1105
|
+
found.tabIndex = newTabIndex;
|
|
1106
|
+
}
|
|
1107
|
+
/**
|
|
1108
|
+
* Unregisters a tab component.
|
|
1109
|
+
*/
|
|
1110
|
+
unregisterTab(tabIndex) {
|
|
1111
|
+
const index = this.tabs.findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
|
|
1112
|
+
// Notify the tabset component when an active tab is unregistered.
|
|
1113
|
+
if (this.isTabIndexActive(this.tabs[index].tabIndex)) {
|
|
1114
|
+
this._activeTabUnregistered.next({
|
|
1115
|
+
arrayIndex: index,
|
|
1116
|
+
});
|
|
1117
|
+
}
|
|
1118
|
+
this.tabs.splice(index, 1);
|
|
1119
|
+
}
|
|
1120
|
+
/**
|
|
1121
|
+
* Unregisters all tab components at once.
|
|
1122
|
+
*/
|
|
1123
|
+
unregisterAll() {
|
|
1124
|
+
this.tabs = [];
|
|
1125
|
+
}
|
|
1126
|
+
/**
|
|
1127
|
+
* Compares two tab indexes and returns `true` if they are equal.
|
|
1128
|
+
*/
|
|
1129
|
+
tabIndexesEqual(tabIndex1, tabIndex2) {
|
|
1130
|
+
return tabIndex1 === tabIndex2 || +tabIndex1 === +tabIndex2;
|
|
1131
|
+
}
|
|
1132
|
+
/**
|
|
1133
|
+
* Verifies if a provided tab index is registered.
|
|
1134
|
+
*/
|
|
1135
|
+
isValidTabIndex(tabIndex) {
|
|
1136
|
+
return this.tabs.some((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
|
|
1137
|
+
}
|
|
1138
|
+
/**
|
|
1139
|
+
* Activates the first registered tab.
|
|
1140
|
+
*/
|
|
1141
|
+
activateFirstTab() {
|
|
1142
|
+
const firstTabIndex = this.tabs[0] && this.tabs[0].tabIndex;
|
|
1143
|
+
if (firstTabIndex !== undefined) {
|
|
1144
|
+
this.setActiveTabIndex(firstTabIndex);
|
|
1145
|
+
return firstTabIndex;
|
|
1146
|
+
}
|
|
1147
|
+
}
|
|
1148
|
+
/**
|
|
1149
|
+
* Activates the next registered tab, or the previous one based on a provided array index.
|
|
1150
|
+
*/
|
|
1151
|
+
activateNearestTab(arrayIndex) {
|
|
1152
|
+
const newActiveTab = this.tabs[arrayIndex] || this.tabs[arrayIndex - 1];
|
|
1153
|
+
if (newActiveTab) {
|
|
1154
|
+
this.currentActiveTabIndex = newActiveTab.tabIndex;
|
|
1155
|
+
}
|
|
1156
|
+
}
|
|
1157
|
+
isTabIndexActive(tabIndex) {
|
|
1158
|
+
return this.tabIndexesEqual(tabIndex, this.currentActiveTabIndex);
|
|
1159
|
+
}
|
|
1160
|
+
getNextTabArrayIndex(currentIndex) {
|
|
1161
|
+
let nextIndex = currentIndex + 1;
|
|
1162
|
+
if (nextIndex === this.tabs.length) {
|
|
1163
|
+
nextIndex = 0;
|
|
1164
|
+
}
|
|
1165
|
+
return nextIndex;
|
|
1166
|
+
}
|
|
1167
|
+
getPrevTabArrayIndex(currentIndex) {
|
|
1168
|
+
let prevIndex = currentIndex - 1;
|
|
1169
|
+
if (prevIndex < 0) {
|
|
1170
|
+
prevIndex = this.tabs.length - 1;
|
|
1171
|
+
}
|
|
1172
|
+
return prevIndex;
|
|
1173
|
+
}
|
|
1174
|
+
}
|
|
1175
|
+
SkyTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1176
|
+
SkyTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetService });
|
|
1177
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetService, decorators: [{
|
|
1178
|
+
type: Injectable
|
|
1179
|
+
}] });
|
|
1180
|
+
|
|
1181
|
+
var _SkyTabButtonComponent__tabStyle, _SkyTabButtonComponent_adapterService, _SkyTabButtonComponent_changeDetectorRef, _SkyTabButtonComponent_elementRef, _SkyTabButtonComponent_tabsetService, _SkyTabButtonComponent_ngUnsubscribe;
|
|
1182
|
+
const DEFAULT_ELEMENT_ROLE$1 = 'tab';
|
|
1183
|
+
/**
|
|
1184
|
+
* @internal
|
|
1185
|
+
*/
|
|
1186
|
+
class SkyTabButtonComponent {
|
|
1187
|
+
constructor(elementRef, adapterService, changeDetectorRef, tabsetService) {
|
|
1003
1188
|
this.buttonClick = new EventEmitter();
|
|
1004
1189
|
this.closeClick = new EventEmitter();
|
|
1190
|
+
this.elementRole = DEFAULT_ELEMENT_ROLE$1;
|
|
1191
|
+
this.closeBtnTabIndex = '-1';
|
|
1192
|
+
_SkyTabButtonComponent__tabStyle.set(this, void 0);
|
|
1193
|
+
_SkyTabButtonComponent_adapterService.set(this, void 0);
|
|
1194
|
+
_SkyTabButtonComponent_changeDetectorRef.set(this, void 0);
|
|
1195
|
+
_SkyTabButtonComponent_elementRef.set(this, void 0);
|
|
1196
|
+
_SkyTabButtonComponent_tabsetService.set(this, void 0);
|
|
1197
|
+
_SkyTabButtonComponent_ngUnsubscribe.set(this, new Subject());
|
|
1198
|
+
__classPrivateFieldSet(this, _SkyTabButtonComponent_adapterService, adapterService, "f");
|
|
1199
|
+
__classPrivateFieldSet(this, _SkyTabButtonComponent_changeDetectorRef, changeDetectorRef, "f");
|
|
1200
|
+
__classPrivateFieldSet(this, _SkyTabButtonComponent_elementRef, elementRef, "f");
|
|
1201
|
+
__classPrivateFieldSet(this, _SkyTabButtonComponent_tabsetService, tabsetService, "f");
|
|
1202
|
+
}
|
|
1203
|
+
get tabStyle() {
|
|
1204
|
+
return __classPrivateFieldGet(this, _SkyTabButtonComponent__tabStyle, "f");
|
|
1205
|
+
}
|
|
1206
|
+
set tabStyle(style) {
|
|
1207
|
+
__classPrivateFieldSet(this, _SkyTabButtonComponent__tabStyle, style, "f");
|
|
1208
|
+
this.elementRole = style === 'tabs' ? DEFAULT_ELEMENT_ROLE$1 : undefined;
|
|
1209
|
+
}
|
|
1210
|
+
ngAfterViewInit() {
|
|
1211
|
+
__classPrivateFieldGet(this, _SkyTabButtonComponent_tabsetService, "f").focusedTabBtnIndex
|
|
1212
|
+
.pipe(distinctUntilChanged(), takeUntil(__classPrivateFieldGet(this, _SkyTabButtonComponent_ngUnsubscribe, "f")))
|
|
1213
|
+
.subscribe((focusedIndex) => {
|
|
1214
|
+
if (focusedIndex === this.tabIndex) {
|
|
1215
|
+
this.closeBtnTabIndex = '0';
|
|
1216
|
+
this.focusBtn();
|
|
1217
|
+
}
|
|
1218
|
+
else {
|
|
1219
|
+
this.closeBtnTabIndex = '-1';
|
|
1220
|
+
}
|
|
1221
|
+
__classPrivateFieldGet(this, _SkyTabButtonComponent_changeDetectorRef, "f").markForCheck();
|
|
1222
|
+
});
|
|
1223
|
+
}
|
|
1224
|
+
ngOnDestroy() {
|
|
1225
|
+
__classPrivateFieldGet(this, _SkyTabButtonComponent_ngUnsubscribe, "f").next();
|
|
1226
|
+
__classPrivateFieldGet(this, _SkyTabButtonComponent_ngUnsubscribe, "f").complete();
|
|
1005
1227
|
}
|
|
1006
1228
|
onButtonClick(event) {
|
|
1007
1229
|
if (!this.disabled) {
|
|
@@ -1030,13 +1252,20 @@ class SkyTabButtonComponent {
|
|
|
1030
1252
|
event.stopPropagation();
|
|
1031
1253
|
event.preventDefault();
|
|
1032
1254
|
}
|
|
1255
|
+
focusBtn() {
|
|
1256
|
+
__classPrivateFieldGet(this, _SkyTabButtonComponent_adapterService, "f").focusButtonLink(__classPrivateFieldGet(this, _SkyTabButtonComponent_elementRef, "f"));
|
|
1257
|
+
}
|
|
1258
|
+
onFocus() {
|
|
1259
|
+
__classPrivateFieldGet(this, _SkyTabButtonComponent_tabsetService, "f").setFocusedTabBtnIndex(this.tabIndex);
|
|
1260
|
+
}
|
|
1033
1261
|
}
|
|
1034
|
-
|
|
1035
|
-
SkyTabButtonComponent.ɵ
|
|
1262
|
+
_SkyTabButtonComponent__tabStyle = new WeakMap(), _SkyTabButtonComponent_adapterService = new WeakMap(), _SkyTabButtonComponent_changeDetectorRef = new WeakMap(), _SkyTabButtonComponent_elementRef = new WeakMap(), _SkyTabButtonComponent_tabsetService = new WeakMap(), _SkyTabButtonComponent_ngUnsubscribe = new WeakMap();
|
|
1263
|
+
SkyTabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabButtonComponent, deps: [{ token: i0.ElementRef }, { token: SkyTabButtonAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1264
|
+
SkyTabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: { active: "active", ariaControls: "ariaControls", buttonHref: "buttonHref", buttonId: "buttonId", buttonText: "buttonText", buttonTextCount: "buttonTextCount", closeable: "closeable", disabled: "disabled", tabIndex: "tabIndex", tabStyle: "tabStyle" }, outputs: { buttonClick: "buttonClick", closeClick: "closeClick" }, providers: [SkyTabButtonAdapterService], ngImport: i0, template: "<div\n class=\"sky-btn-tab-wrapper\"\n [ngClass]=\"{\n 'sky-btn-tab-wrapper-selected': active,\n 'sky-btn-tab-wrapper-disabled': disabled\n }\"\n>\n <a\n #tabButtonEl\n class=\"sky-btn-tab\"\n [attr.role]=\"elementRole\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-selected]=\"active\"\n [attr.href]=\"buttonHref\"\n [id]=\"buttonId\"\n [ngClass]=\"{\n 'sky-btn-tab-wizard': tabStyle === 'wizard',\n 'sky-btn-tab-selected': active,\n 'sky-btn-tab-disabled': disabled,\n 'sky-tab-btn-closeable': closeable\n }\"\n [tabindex]=\"active ? '0' : '-1'\"\n (click)=\"onButtonClick($event)\"\n (keydown)=\"onTabButtonKeyDown($event)\"\n (focus)=\"onFocus()\"\n >\n <span class=\"sky-tab-heading\">\n {{ buttonText }}\n <span *ngIf=\"buttonTextCount !== undefined\" class=\"sky-tab-header-count\">\n {{ buttonTextCount }}\n </span>\n </span>\n </a>\n\n <button\n *ngIf=\"closeable\"\n class=\"sky-btn-tab-close\"\n [tabindex]=\"closeBtnTabIndex\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-btn-tab-close-disabled': disabled\n }\"\n (click)=\"onCloseClick($event)\"\n >\n <sky-icon icon=\"remove\"></sky-icon>\n </button>\n</div>\n", styles: [".sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:5px}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:10px;right:10px;color:#686c73}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-tab-btn-closeable{padding-right:43px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}:host-context(.sky-theme-modern) .sky-tab-btn-closeable{padding-right:44px}.sky-theme-modern .sky-btn-tab-wrapper{margin-right:10px}.sky-theme-modern .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}.sky-theme-modern .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}.sky-theme-modern .sky-tab-btn-closeable{padding-right:44px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1036
1265
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabButtonComponent, decorators: [{
|
|
1037
1266
|
type: Component,
|
|
1038
|
-
args: [{ selector: 'sky-tab-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"sky-btn-tab-wrapper\"\n [ngClass]=\"{\n 'sky-btn-tab-wrapper-selected': active,\n 'sky-btn-tab-wrapper-disabled': disabled\n }\"\n>\n <a\n class=\"sky-btn-tab\"\n role=\"
|
|
1039
|
-
}], propDecorators: { active: [{
|
|
1267
|
+
args: [{ selector: 'sky-tab-button', providers: [SkyTabButtonAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"sky-btn-tab-wrapper\"\n [ngClass]=\"{\n 'sky-btn-tab-wrapper-selected': active,\n 'sky-btn-tab-wrapper-disabled': disabled\n }\"\n>\n <a\n #tabButtonEl\n class=\"sky-btn-tab\"\n [attr.role]=\"elementRole\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-selected]=\"active\"\n [attr.href]=\"buttonHref\"\n [id]=\"buttonId\"\n [ngClass]=\"{\n 'sky-btn-tab-wizard': tabStyle === 'wizard',\n 'sky-btn-tab-selected': active,\n 'sky-btn-tab-disabled': disabled,\n 'sky-tab-btn-closeable': closeable\n }\"\n [tabindex]=\"active ? '0' : '-1'\"\n (click)=\"onButtonClick($event)\"\n (keydown)=\"onTabButtonKeyDown($event)\"\n (focus)=\"onFocus()\"\n >\n <span class=\"sky-tab-heading\">\n {{ buttonText }}\n <span *ngIf=\"buttonTextCount !== undefined\" class=\"sky-tab-header-count\">\n {{ buttonTextCount }}\n </span>\n </span>\n </a>\n\n <button\n *ngIf=\"closeable\"\n class=\"sky-btn-tab-close\"\n [tabindex]=\"closeBtnTabIndex\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-btn-tab-close-disabled': disabled\n }\"\n (click)=\"onCloseClick($event)\"\n >\n <sky-icon icon=\"remove\"></sky-icon>\n </button>\n</div>\n", styles: [".sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:5px}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:10px;right:10px;color:#686c73}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-tab-btn-closeable{padding-right:43px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}:host-context(.sky-theme-modern) .sky-tab-btn-closeable{padding-right:44px}.sky-theme-modern .sky-btn-tab-wrapper{margin-right:10px}.sky-theme-modern .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}.sky-theme-modern .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}.sky-theme-modern .sky-tab-btn-closeable{padding-right:44px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}\n"] }]
|
|
1268
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SkyTabButtonAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
|
|
1040
1269
|
type: Input
|
|
1041
1270
|
}], ariaControls: [{
|
|
1042
1271
|
type: Input
|
|
@@ -1052,6 +1281,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
1052
1281
|
type: Input
|
|
1053
1282
|
}], disabled: [{
|
|
1054
1283
|
type: Input
|
|
1284
|
+
}], tabIndex: [{
|
|
1285
|
+
type: Input
|
|
1055
1286
|
}], tabStyle: [{
|
|
1056
1287
|
type: Input
|
|
1057
1288
|
}], buttonClick: [{
|
|
@@ -1177,113 +1408,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
1177
1408
|
type: Injectable
|
|
1178
1409
|
}], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i4.Location }, { type: i1$1.Router }]; } });
|
|
1179
1410
|
|
|
1180
|
-
/**
|
|
1181
|
-
* @internal
|
|
1182
|
-
*/
|
|
1183
|
-
class SkyTabsetService {
|
|
1184
|
-
constructor() {
|
|
1185
|
-
this.currentActiveTabIndex = 0;
|
|
1186
|
-
this._activeTabIndex = new BehaviorSubject(0);
|
|
1187
|
-
this._activeTabUnregistered = new Subject();
|
|
1188
|
-
this.tabs = [];
|
|
1189
|
-
this.tabCounter = 0;
|
|
1190
|
-
}
|
|
1191
|
-
get activeTabUnregistered() {
|
|
1192
|
-
return this._activeTabUnregistered.asObservable();
|
|
1193
|
-
}
|
|
1194
|
-
get activeTabIndex() {
|
|
1195
|
-
return this._activeTabIndex.asObservable();
|
|
1196
|
-
}
|
|
1197
|
-
/**
|
|
1198
|
-
* Sets the active tab by its unique `tabIndex` property.
|
|
1199
|
-
*/
|
|
1200
|
-
setActiveTabIndex(value, config = {
|
|
1201
|
-
emitChange: true,
|
|
1202
|
-
}) {
|
|
1203
|
-
if (value !== undefined &&
|
|
1204
|
-
!this.tabIndexesEqual(value, this.currentActiveTabIndex)) {
|
|
1205
|
-
this.currentActiveTabIndex = value;
|
|
1206
|
-
/* istanbul ignore else */
|
|
1207
|
-
if (config.emitChange) {
|
|
1208
|
-
this._activeTabIndex.next(value);
|
|
1209
|
-
}
|
|
1210
|
-
}
|
|
1211
|
-
}
|
|
1212
|
-
/**
|
|
1213
|
-
* Registers a tab component.
|
|
1214
|
-
*/
|
|
1215
|
-
registerTab(tabIndex) {
|
|
1216
|
-
if (tabIndex === undefined) {
|
|
1217
|
-
tabIndex = this.tabCounter;
|
|
1218
|
-
this.tabCounter++;
|
|
1219
|
-
}
|
|
1220
|
-
this.tabs.push({ tabIndex });
|
|
1221
|
-
return tabIndex;
|
|
1222
|
-
}
|
|
1223
|
-
updateTabIndex(currentTabIndex, newTabIndex) {
|
|
1224
|
-
const found = this.tabs.find((tab) => this.tabIndexesEqual(tab.tabIndex, currentTabIndex));
|
|
1225
|
-
found.tabIndex = newTabIndex;
|
|
1226
|
-
}
|
|
1227
|
-
/**
|
|
1228
|
-
* Unregisters a tab component.
|
|
1229
|
-
*/
|
|
1230
|
-
unregisterTab(tabIndex) {
|
|
1231
|
-
const index = this.tabs.findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
|
|
1232
|
-
// Notify the tabset component when an active tab is unregistered.
|
|
1233
|
-
if (this.isTabIndexActive(this.tabs[index].tabIndex)) {
|
|
1234
|
-
this._activeTabUnregistered.next({
|
|
1235
|
-
arrayIndex: index,
|
|
1236
|
-
});
|
|
1237
|
-
}
|
|
1238
|
-
this.tabs.splice(index, 1);
|
|
1239
|
-
}
|
|
1240
|
-
/**
|
|
1241
|
-
* Unregisters all tab components at once.
|
|
1242
|
-
*/
|
|
1243
|
-
unregisterAll() {
|
|
1244
|
-
this.tabs = [];
|
|
1245
|
-
}
|
|
1246
|
-
/**
|
|
1247
|
-
* Compares two tab indexes and returns `true` if they are equal.
|
|
1248
|
-
*/
|
|
1249
|
-
tabIndexesEqual(tabIndex1, tabIndex2) {
|
|
1250
|
-
return tabIndex1 === tabIndex2 || +tabIndex1 === +tabIndex2;
|
|
1251
|
-
}
|
|
1252
|
-
/**
|
|
1253
|
-
* Verifies if a provided tab index is registered.
|
|
1254
|
-
*/
|
|
1255
|
-
isValidTabIndex(tabIndex) {
|
|
1256
|
-
return this.tabs.some((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
|
|
1257
|
-
}
|
|
1258
|
-
/**
|
|
1259
|
-
* Activates the first registered tab.
|
|
1260
|
-
*/
|
|
1261
|
-
activateFirstTab() {
|
|
1262
|
-
const firstTabIndex = this.tabs[0] && this.tabs[0].tabIndex;
|
|
1263
|
-
if (firstTabIndex !== undefined) {
|
|
1264
|
-
this.setActiveTabIndex(firstTabIndex);
|
|
1265
|
-
return firstTabIndex;
|
|
1266
|
-
}
|
|
1267
|
-
}
|
|
1268
|
-
/**
|
|
1269
|
-
* Activates the next registered tab, or the previous one based on a provided array index.
|
|
1270
|
-
*/
|
|
1271
|
-
activateNearestTab(arrayIndex) {
|
|
1272
|
-
const newActiveTab = this.tabs[arrayIndex] || this.tabs[arrayIndex - 1];
|
|
1273
|
-
if (newActiveTab) {
|
|
1274
|
-
this.currentActiveTabIndex = newActiveTab.tabIndex;
|
|
1275
|
-
}
|
|
1276
|
-
}
|
|
1277
|
-
isTabIndexActive(tabIndex) {
|
|
1278
|
-
return this.tabIndexesEqual(tabIndex, this.currentActiveTabIndex);
|
|
1279
|
-
}
|
|
1280
|
-
}
|
|
1281
|
-
SkyTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1282
|
-
SkyTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetService });
|
|
1283
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetService, decorators: [{
|
|
1284
|
-
type: Injectable
|
|
1285
|
-
}] });
|
|
1286
|
-
|
|
1287
1411
|
let nextId = 0;
|
|
1288
1412
|
class SkyTabComponent {
|
|
1289
1413
|
constructor(changeDetector, permalinkService, tabsetService) {
|
|
@@ -1464,6 +1588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
1464
1588
|
}] });
|
|
1465
1589
|
|
|
1466
1590
|
var _SkyTabsetComponent__hasFinishButton;
|
|
1591
|
+
const DEFAULT_ELEMENT_ROLE = 'tablist';
|
|
1467
1592
|
class SkyTabsetComponent {
|
|
1468
1593
|
constructor(changeDetector, elementRef, adapterService, permalinkService, tabsetService) {
|
|
1469
1594
|
this.changeDetector = changeDetector;
|
|
@@ -1493,6 +1618,7 @@ class SkyTabsetComponent {
|
|
|
1493
1618
|
*/
|
|
1494
1619
|
this.tabIndexesChange = new EventEmitter();
|
|
1495
1620
|
this.tabButtons = [];
|
|
1621
|
+
this.elementRole = DEFAULT_ELEMENT_ROLE;
|
|
1496
1622
|
this.ngUnsubscribe = new Subject();
|
|
1497
1623
|
this.tabComponentsStateChangeUnsubscribe = new Subject();
|
|
1498
1624
|
_SkyTabsetComponent__hasFinishButton.set(this, false);
|
|
@@ -1551,6 +1677,7 @@ class SkyTabsetComponent {
|
|
|
1551
1677
|
*/
|
|
1552
1678
|
set tabStyle(value) {
|
|
1553
1679
|
this._tabStyle = value;
|
|
1680
|
+
this.elementRole = value === 'tabs' ? DEFAULT_ELEMENT_ROLE : undefined;
|
|
1554
1681
|
}
|
|
1555
1682
|
get tabStyle() {
|
|
1556
1683
|
return this._tabStyle || 'tabs';
|
|
@@ -1615,6 +1742,18 @@ class SkyTabsetComponent {
|
|
|
1615
1742
|
onOpenTabClick() {
|
|
1616
1743
|
this.openTab.emit();
|
|
1617
1744
|
}
|
|
1745
|
+
onRightKeyDown() {
|
|
1746
|
+
this.tabsetService.focusNextTabBtn(this.tabButtons);
|
|
1747
|
+
}
|
|
1748
|
+
onLeftKeyDown() {
|
|
1749
|
+
this.tabsetService.focusPrevTabBtn(this.tabButtons);
|
|
1750
|
+
}
|
|
1751
|
+
onHomeKeyDown() {
|
|
1752
|
+
this.tabsetService.focusFirstOrNearestTabBtn(this.tabButtons);
|
|
1753
|
+
}
|
|
1754
|
+
onEndKeyDown() {
|
|
1755
|
+
this.tabsetService.focusLastOrNearestTabBtn(this.tabButtons);
|
|
1756
|
+
}
|
|
1618
1757
|
/**
|
|
1619
1758
|
* Sets the initial active tab index based on the following criteria.
|
|
1620
1759
|
* 1. Does the URL include a query param that reflects this tabset's active tab?
|
|
@@ -1815,14 +1954,14 @@ SkyTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
|
|
|
1815
1954
|
SkyTabsetAdapterService,
|
|
1816
1955
|
SkyTabsetPermalinkService,
|
|
1817
1956
|
SkyTabsetService,
|
|
1818
|
-
], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<div\n class=\"sky-tabset\"\n role=\"
|
|
1957
|
+
], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<div\n class=\"sky-tabset\"\n [attr.role]=\"elementRole\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [ngClass]=\"\n 'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n \"\n (window:resize)=\"onWindowResize()\"\n (keydown.arrowright)=\"onRightKeyDown()\"\n (keydown.arrowleft)=\"onLeftKeyDown()\"\n (keydown.home)=\"onHomeKeyDown()\"\n (keydown.end)=\"onEndKeyDown()\"\n>\n <span class=\"sky-tabset-dropdown\">\n <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\" buttonType=\"tab\">\n <sky-dropdown-button>\n {{ dropdownTriggerButtonText }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item\n *ngFor=\"let tabButton of tabButtons\"\n class=\"sky-tab-dropdown-menu-item\"\n >\n <div\n class=\"sky-tab-dropdown-item\"\n [ngClass]=\"{\n 'sky-tab-dropdown-item-selected': tabButton.active\n }\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n ></ng-container>\n </div>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </span>\n <span class=\"sky-tabset-tabs\">\n <ng-container *ngFor=\"let tabButton of tabButtons\">\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n ></ng-container>\n </ng-container>\n </span>\n <span class=\"sky-tabset-btns\">\n <button\n *ngIf=\"newTab.observers.length > 0\"\n class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onNewTabClick()\"\n >\n <sky-icon icon=\"plus-circle\" size=\"lg\"> </sky-icon>\n </button>\n <button\n *ngIf=\"openTab.observers.length > 0\"\n class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onOpenTabClick()\"\n >\n <sky-icon icon=\"folder-open-o\" size=\"lg\"> </sky-icon>\n </button>\n </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template let-tabButton #tabButtonTemplate>\n <sky-tab-button\n [active]=\"tabButton.active\"\n [ariaControls]=\"tabButton.ariaControls\"\n [buttonHref]=\"tabButton.buttonHref\"\n [buttonId]=\"tabButton.buttonId\"\n [buttonText]=\"tabButton.buttonText\"\n [buttonTextCount]=\"tabButton.buttonTextCount\"\n [closeable]=\"tabButton.closeable\"\n [disabled]=\"tabButton.disabled\"\n [tabIndex]=\"tabButton.tabIndex\"\n [tabStyle]=\"tabStyle\"\n (buttonClick)=\"onTabButtonClick(tabButton)\"\n (closeClick)=\"onTabCloseClick(tabButton)\"\n ></sky-tab-button>\n</ng-template>\n", styles: [".sky-tabset{align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:0;overflow:hidden;padding:0 0 0 15px;white-space:nowrap}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;margin-bottom:10px;padding-left:0}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-modal-content .sky-tabset{margin:-10px -30px 30px;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5$1.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i5$1.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i5$1.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i5$1.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: ["active", "ariaControls", "buttonHref", "buttonId", "buttonText", "buttonTextCount", "closeable", "disabled", "tabIndex", "tabStyle"], outputs: ["buttonClick", "closeClick"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1819
1958
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetComponent, decorators: [{
|
|
1820
1959
|
type: Component,
|
|
1821
1960
|
args: [{ selector: 'sky-tabset', providers: [
|
|
1822
1961
|
SkyTabsetAdapterService,
|
|
1823
1962
|
SkyTabsetPermalinkService,
|
|
1824
1963
|
SkyTabsetService,
|
|
1825
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"sky-tabset\"\n role=\"
|
|
1964
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"sky-tabset\"\n [attr.role]=\"elementRole\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [ngClass]=\"\n 'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n \"\n (window:resize)=\"onWindowResize()\"\n (keydown.arrowright)=\"onRightKeyDown()\"\n (keydown.arrowleft)=\"onLeftKeyDown()\"\n (keydown.home)=\"onHomeKeyDown()\"\n (keydown.end)=\"onEndKeyDown()\"\n>\n <span class=\"sky-tabset-dropdown\">\n <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\" buttonType=\"tab\">\n <sky-dropdown-button>\n {{ dropdownTriggerButtonText }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item\n *ngFor=\"let tabButton of tabButtons\"\n class=\"sky-tab-dropdown-menu-item\"\n >\n <div\n class=\"sky-tab-dropdown-item\"\n [ngClass]=\"{\n 'sky-tab-dropdown-item-selected': tabButton.active\n }\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n ></ng-container>\n </div>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </span>\n <span class=\"sky-tabset-tabs\">\n <ng-container *ngFor=\"let tabButton of tabButtons\">\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n ></ng-container>\n </ng-container>\n </span>\n <span class=\"sky-tabset-btns\">\n <button\n *ngIf=\"newTab.observers.length > 0\"\n class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onNewTabClick()\"\n >\n <sky-icon icon=\"plus-circle\" size=\"lg\"> </sky-icon>\n </button>\n <button\n *ngIf=\"openTab.observers.length > 0\"\n class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onOpenTabClick()\"\n >\n <sky-icon icon=\"folder-open-o\" size=\"lg\"> </sky-icon>\n </button>\n </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template let-tabButton #tabButtonTemplate>\n <sky-tab-button\n [active]=\"tabButton.active\"\n [ariaControls]=\"tabButton.ariaControls\"\n [buttonHref]=\"tabButton.buttonHref\"\n [buttonId]=\"tabButton.buttonId\"\n [buttonText]=\"tabButton.buttonText\"\n [buttonTextCount]=\"tabButton.buttonTextCount\"\n [closeable]=\"tabButton.closeable\"\n [disabled]=\"tabButton.disabled\"\n [tabIndex]=\"tabButton.tabIndex\"\n [tabStyle]=\"tabStyle\"\n (buttonClick)=\"onTabButtonClick(tabButton)\"\n (closeClick)=\"onTabCloseClick(tabButton)\"\n ></sky-tab-button>\n</ng-template>\n", styles: [".sky-tabset{align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:0;overflow:hidden;padding:0 0 0 15px;white-space:nowrap}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;margin-bottom:10px;padding-left:0}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-modal-content .sky-tabset{margin:-10px -30px 30px;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"] }]
|
|
1826
1965
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: SkyTabsetAdapterService }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
|
|
1827
1966
|
type: Input
|
|
1828
1967
|
}], ariaLabel: [{
|