@skyux/tabs 6.20.0 → 6.22.0
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/fesm2015/skyux-tabs.mjs
CHANGED
|
@@ -1004,10 +1004,232 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
|
1004
1004
|
/**
|
|
1005
1005
|
* @internal
|
|
1006
1006
|
*/
|
|
1007
|
-
class
|
|
1007
|
+
class SkyTabButtonAdapterService {
|
|
1008
|
+
focusButtonLink(buttonEl) {
|
|
1009
|
+
buttonEl.nativeElement.querySelector('a').focus();
|
|
1010
|
+
}
|
|
1011
|
+
}
|
|
1012
|
+
SkyTabButtonAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabButtonAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1013
|
+
SkyTabButtonAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabButtonAdapterService });
|
|
1014
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabButtonAdapterService, decorators: [{
|
|
1015
|
+
type: Injectable
|
|
1016
|
+
}] });
|
|
1017
|
+
|
|
1018
|
+
/**
|
|
1019
|
+
* @internal
|
|
1020
|
+
*/
|
|
1021
|
+
class SkyTabsetService {
|
|
1008
1022
|
constructor() {
|
|
1023
|
+
this.currentActiveTabIndex = 0;
|
|
1024
|
+
this.currentFocusedTabBtnIndex = 0;
|
|
1025
|
+
this._activeTabIndex = new BehaviorSubject(0);
|
|
1026
|
+
this._focusedTabBtnIndex = new Subject();
|
|
1027
|
+
this._activeTabUnregistered = new Subject();
|
|
1028
|
+
this.tabs = [];
|
|
1029
|
+
this.tabCounter = 0;
|
|
1030
|
+
}
|
|
1031
|
+
get activeTabUnregistered() {
|
|
1032
|
+
return this._activeTabUnregistered.asObservable();
|
|
1033
|
+
}
|
|
1034
|
+
get activeTabIndex() {
|
|
1035
|
+
return this._activeTabIndex.asObservable();
|
|
1036
|
+
}
|
|
1037
|
+
get focusedTabBtnIndex() {
|
|
1038
|
+
return this._focusedTabBtnIndex.asObservable();
|
|
1039
|
+
}
|
|
1040
|
+
/**
|
|
1041
|
+
* Sets the active tab by its unique `tabIndex` property.
|
|
1042
|
+
*/
|
|
1043
|
+
setActiveTabIndex(value, config = {
|
|
1044
|
+
emitChange: true,
|
|
1045
|
+
}) {
|
|
1046
|
+
if (value !== undefined &&
|
|
1047
|
+
!this.tabIndexesEqual(value, this.currentActiveTabIndex)) {
|
|
1048
|
+
this.currentActiveTabIndex = value;
|
|
1049
|
+
/* istanbul ignore else */
|
|
1050
|
+
if (config.emitChange) {
|
|
1051
|
+
this._activeTabIndex.next(value);
|
|
1052
|
+
}
|
|
1053
|
+
this.setFocusedTabBtnIndex(value);
|
|
1054
|
+
}
|
|
1055
|
+
}
|
|
1056
|
+
focusNextTabBtn(tabButtons) {
|
|
1057
|
+
const currentTabArrayIndex = this.tabs.findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, this.currentFocusedTabBtnIndex));
|
|
1058
|
+
for (let i = this.getNextTabArrayIndex(currentTabArrayIndex); i !== currentTabArrayIndex; i = this.getNextTabArrayIndex(i)) {
|
|
1059
|
+
const tabBtn = tabButtons[i];
|
|
1060
|
+
if (!tabBtn.disabled) {
|
|
1061
|
+
this.setFocusedTabBtnIndex(tabBtn.tabIndex);
|
|
1062
|
+
return;
|
|
1063
|
+
}
|
|
1064
|
+
}
|
|
1065
|
+
}
|
|
1066
|
+
focusPrevTabBtn(tabButtons) {
|
|
1067
|
+
const currentTabArrayIndex = this.tabs.findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, this.currentFocusedTabBtnIndex));
|
|
1068
|
+
for (let i = this.getPrevTabArrayIndex(currentTabArrayIndex); i !== currentTabArrayIndex; i = this.getPrevTabArrayIndex(i)) {
|
|
1069
|
+
const tabBtn = tabButtons[i];
|
|
1070
|
+
if (!tabBtn.disabled) {
|
|
1071
|
+
this.setFocusedTabBtnIndex(tabBtn.tabIndex);
|
|
1072
|
+
return;
|
|
1073
|
+
}
|
|
1074
|
+
}
|
|
1075
|
+
}
|
|
1076
|
+
focusFirstOrNearestTabBtn(tabButtons) {
|
|
1077
|
+
for (let i = 0; i < tabButtons.length; i++) {
|
|
1078
|
+
const tabBtn = tabButtons[i];
|
|
1079
|
+
if (!tabBtn.disabled) {
|
|
1080
|
+
this.setFocusedTabBtnIndex(tabBtn.tabIndex);
|
|
1081
|
+
return;
|
|
1082
|
+
}
|
|
1083
|
+
}
|
|
1084
|
+
}
|
|
1085
|
+
focusLastOrNearestTabBtn(tabButtons) {
|
|
1086
|
+
for (let i = tabButtons.length - 1; i >= 0; i--) {
|
|
1087
|
+
const tabBtn = tabButtons[i];
|
|
1088
|
+
if (!tabBtn.disabled) {
|
|
1089
|
+
this.setFocusedTabBtnIndex(tabBtn.tabIndex);
|
|
1090
|
+
return;
|
|
1091
|
+
}
|
|
1092
|
+
}
|
|
1093
|
+
}
|
|
1094
|
+
setFocusedTabBtnIndex(tabIndex) {
|
|
1095
|
+
this.currentFocusedTabBtnIndex = tabIndex;
|
|
1096
|
+
this._focusedTabBtnIndex.next(tabIndex);
|
|
1097
|
+
}
|
|
1098
|
+
/**
|
|
1099
|
+
* Registers a tab component.
|
|
1100
|
+
*/
|
|
1101
|
+
registerTab(tabIndex) {
|
|
1102
|
+
if (tabIndex === undefined) {
|
|
1103
|
+
tabIndex = this.tabCounter;
|
|
1104
|
+
this.tabCounter++;
|
|
1105
|
+
}
|
|
1106
|
+
this.tabs.push({ tabIndex });
|
|
1107
|
+
return tabIndex;
|
|
1108
|
+
}
|
|
1109
|
+
updateTabIndex(currentTabIndex, newTabIndex) {
|
|
1110
|
+
const found = this.tabs.find((tab) => this.tabIndexesEqual(tab.tabIndex, currentTabIndex));
|
|
1111
|
+
found.tabIndex = newTabIndex;
|
|
1112
|
+
}
|
|
1113
|
+
/**
|
|
1114
|
+
* Unregisters a tab component.
|
|
1115
|
+
*/
|
|
1116
|
+
unregisterTab(tabIndex) {
|
|
1117
|
+
const index = this.tabs.findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
|
|
1118
|
+
// Notify the tabset component when an active tab is unregistered.
|
|
1119
|
+
if (this.isTabIndexActive(this.tabs[index].tabIndex)) {
|
|
1120
|
+
this._activeTabUnregistered.next({
|
|
1121
|
+
arrayIndex: index,
|
|
1122
|
+
});
|
|
1123
|
+
}
|
|
1124
|
+
this.tabs.splice(index, 1);
|
|
1125
|
+
}
|
|
1126
|
+
/**
|
|
1127
|
+
* Unregisters all tab components at once.
|
|
1128
|
+
*/
|
|
1129
|
+
unregisterAll() {
|
|
1130
|
+
this.tabs = [];
|
|
1131
|
+
}
|
|
1132
|
+
/**
|
|
1133
|
+
* Compares two tab indexes and returns `true` if they are equal.
|
|
1134
|
+
*/
|
|
1135
|
+
tabIndexesEqual(tabIndex1, tabIndex2) {
|
|
1136
|
+
return tabIndex1 === tabIndex2 || +tabIndex1 === +tabIndex2;
|
|
1137
|
+
}
|
|
1138
|
+
/**
|
|
1139
|
+
* Verifies if a provided tab index is registered.
|
|
1140
|
+
*/
|
|
1141
|
+
isValidTabIndex(tabIndex) {
|
|
1142
|
+
return this.tabs.some((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
|
|
1143
|
+
}
|
|
1144
|
+
/**
|
|
1145
|
+
* Activates the first registered tab.
|
|
1146
|
+
*/
|
|
1147
|
+
activateFirstTab() {
|
|
1148
|
+
const firstTabIndex = this.tabs[0] && this.tabs[0].tabIndex;
|
|
1149
|
+
if (firstTabIndex !== undefined) {
|
|
1150
|
+
this.setActiveTabIndex(firstTabIndex);
|
|
1151
|
+
return firstTabIndex;
|
|
1152
|
+
}
|
|
1153
|
+
}
|
|
1154
|
+
/**
|
|
1155
|
+
* Activates the next registered tab, or the previous one based on a provided array index.
|
|
1156
|
+
*/
|
|
1157
|
+
activateNearestTab(arrayIndex) {
|
|
1158
|
+
const newActiveTab = this.tabs[arrayIndex] || this.tabs[arrayIndex - 1];
|
|
1159
|
+
if (newActiveTab) {
|
|
1160
|
+
this.currentActiveTabIndex = newActiveTab.tabIndex;
|
|
1161
|
+
}
|
|
1162
|
+
}
|
|
1163
|
+
isTabIndexActive(tabIndex) {
|
|
1164
|
+
return this.tabIndexesEqual(tabIndex, this.currentActiveTabIndex);
|
|
1165
|
+
}
|
|
1166
|
+
getNextTabArrayIndex(currentIndex) {
|
|
1167
|
+
let nextIndex = currentIndex + 1;
|
|
1168
|
+
if (nextIndex === this.tabs.length) {
|
|
1169
|
+
nextIndex = 0;
|
|
1170
|
+
}
|
|
1171
|
+
return nextIndex;
|
|
1172
|
+
}
|
|
1173
|
+
getPrevTabArrayIndex(currentIndex) {
|
|
1174
|
+
let prevIndex = currentIndex - 1;
|
|
1175
|
+
if (prevIndex < 0) {
|
|
1176
|
+
prevIndex = this.tabs.length - 1;
|
|
1177
|
+
}
|
|
1178
|
+
return prevIndex;
|
|
1179
|
+
}
|
|
1180
|
+
}
|
|
1181
|
+
SkyTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1182
|
+
SkyTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetService });
|
|
1183
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetService, decorators: [{
|
|
1184
|
+
type: Injectable
|
|
1185
|
+
}] });
|
|
1186
|
+
|
|
1187
|
+
var _SkyTabButtonComponent__tabStyle, _SkyTabButtonComponent_adapterService, _SkyTabButtonComponent_changeDetectorRef, _SkyTabButtonComponent_elementRef, _SkyTabButtonComponent_tabsetService, _SkyTabButtonComponent_ngUnsubscribe;
|
|
1188
|
+
const DEFAULT_ELEMENT_ROLE$1 = 'tab';
|
|
1189
|
+
/**
|
|
1190
|
+
* @internal
|
|
1191
|
+
*/
|
|
1192
|
+
class SkyTabButtonComponent {
|
|
1193
|
+
constructor(elementRef, adapterService, changeDetectorRef, tabsetService) {
|
|
1009
1194
|
this.buttonClick = new EventEmitter();
|
|
1010
1195
|
this.closeClick = new EventEmitter();
|
|
1196
|
+
this.elementRole = DEFAULT_ELEMENT_ROLE$1;
|
|
1197
|
+
this.closeBtnTabIndex = '-1';
|
|
1198
|
+
_SkyTabButtonComponent__tabStyle.set(this, void 0);
|
|
1199
|
+
_SkyTabButtonComponent_adapterService.set(this, void 0);
|
|
1200
|
+
_SkyTabButtonComponent_changeDetectorRef.set(this, void 0);
|
|
1201
|
+
_SkyTabButtonComponent_elementRef.set(this, void 0);
|
|
1202
|
+
_SkyTabButtonComponent_tabsetService.set(this, void 0);
|
|
1203
|
+
_SkyTabButtonComponent_ngUnsubscribe.set(this, new Subject());
|
|
1204
|
+
__classPrivateFieldSet(this, _SkyTabButtonComponent_adapterService, adapterService, "f");
|
|
1205
|
+
__classPrivateFieldSet(this, _SkyTabButtonComponent_changeDetectorRef, changeDetectorRef, "f");
|
|
1206
|
+
__classPrivateFieldSet(this, _SkyTabButtonComponent_elementRef, elementRef, "f");
|
|
1207
|
+
__classPrivateFieldSet(this, _SkyTabButtonComponent_tabsetService, tabsetService, "f");
|
|
1208
|
+
}
|
|
1209
|
+
get tabStyle() {
|
|
1210
|
+
return __classPrivateFieldGet(this, _SkyTabButtonComponent__tabStyle, "f");
|
|
1211
|
+
}
|
|
1212
|
+
set tabStyle(style) {
|
|
1213
|
+
__classPrivateFieldSet(this, _SkyTabButtonComponent__tabStyle, style, "f");
|
|
1214
|
+
this.elementRole = style === 'tabs' ? DEFAULT_ELEMENT_ROLE$1 : undefined;
|
|
1215
|
+
}
|
|
1216
|
+
ngAfterViewInit() {
|
|
1217
|
+
__classPrivateFieldGet(this, _SkyTabButtonComponent_tabsetService, "f").focusedTabBtnIndex
|
|
1218
|
+
.pipe(distinctUntilChanged(), takeUntil(__classPrivateFieldGet(this, _SkyTabButtonComponent_ngUnsubscribe, "f")))
|
|
1219
|
+
.subscribe((focusedIndex) => {
|
|
1220
|
+
if (focusedIndex === this.tabIndex) {
|
|
1221
|
+
this.closeBtnTabIndex = '0';
|
|
1222
|
+
this.focusBtn();
|
|
1223
|
+
}
|
|
1224
|
+
else {
|
|
1225
|
+
this.closeBtnTabIndex = '-1';
|
|
1226
|
+
}
|
|
1227
|
+
__classPrivateFieldGet(this, _SkyTabButtonComponent_changeDetectorRef, "f").markForCheck();
|
|
1228
|
+
});
|
|
1229
|
+
}
|
|
1230
|
+
ngOnDestroy() {
|
|
1231
|
+
__classPrivateFieldGet(this, _SkyTabButtonComponent_ngUnsubscribe, "f").next();
|
|
1232
|
+
__classPrivateFieldGet(this, _SkyTabButtonComponent_ngUnsubscribe, "f").complete();
|
|
1011
1233
|
}
|
|
1012
1234
|
onButtonClick(event) {
|
|
1013
1235
|
if (!this.disabled) {
|
|
@@ -1036,13 +1258,20 @@ class SkyTabButtonComponent {
|
|
|
1036
1258
|
event.stopPropagation();
|
|
1037
1259
|
event.preventDefault();
|
|
1038
1260
|
}
|
|
1261
|
+
focusBtn() {
|
|
1262
|
+
__classPrivateFieldGet(this, _SkyTabButtonComponent_adapterService, "f").focusButtonLink(__classPrivateFieldGet(this, _SkyTabButtonComponent_elementRef, "f"));
|
|
1263
|
+
}
|
|
1264
|
+
onFocus() {
|
|
1265
|
+
__classPrivateFieldGet(this, _SkyTabButtonComponent_tabsetService, "f").setFocusedTabBtnIndex(this.tabIndex);
|
|
1266
|
+
}
|
|
1039
1267
|
}
|
|
1040
|
-
|
|
1041
|
-
SkyTabButtonComponent.ɵ
|
|
1268
|
+
_SkyTabButtonComponent__tabStyle = new WeakMap(), _SkyTabButtonComponent_adapterService = new WeakMap(), _SkyTabButtonComponent_changeDetectorRef = new WeakMap(), _SkyTabButtonComponent_elementRef = new WeakMap(), _SkyTabButtonComponent_tabsetService = new WeakMap(), _SkyTabButtonComponent_ngUnsubscribe = new WeakMap();
|
|
1269
|
+
SkyTabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabButtonComponent, deps: [{ token: i0.ElementRef }, { token: SkyTabButtonAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1270
|
+
SkyTabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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"], components: [{ type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1042
1271
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabButtonComponent, decorators: [{
|
|
1043
1272
|
type: Component,
|
|
1044
|
-
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=\"
|
|
1045
|
-
}], propDecorators: { active: [{
|
|
1273
|
+
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"] }]
|
|
1274
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SkyTabButtonAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
|
|
1046
1275
|
type: Input
|
|
1047
1276
|
}], ariaControls: [{
|
|
1048
1277
|
type: Input
|
|
@@ -1058,6 +1287,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
|
1058
1287
|
type: Input
|
|
1059
1288
|
}], disabled: [{
|
|
1060
1289
|
type: Input
|
|
1290
|
+
}], tabIndex: [{
|
|
1291
|
+
type: Input
|
|
1061
1292
|
}], tabStyle: [{
|
|
1062
1293
|
type: Input
|
|
1063
1294
|
}], buttonClick: [{
|
|
@@ -1183,113 +1414,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
|
1183
1414
|
type: Injectable
|
|
1184
1415
|
}], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i2.Location }, { type: i1$1.Router }]; } });
|
|
1185
1416
|
|
|
1186
|
-
/**
|
|
1187
|
-
* @internal
|
|
1188
|
-
*/
|
|
1189
|
-
class SkyTabsetService {
|
|
1190
|
-
constructor() {
|
|
1191
|
-
this.currentActiveTabIndex = 0;
|
|
1192
|
-
this._activeTabIndex = new BehaviorSubject(0);
|
|
1193
|
-
this._activeTabUnregistered = new Subject();
|
|
1194
|
-
this.tabs = [];
|
|
1195
|
-
this.tabCounter = 0;
|
|
1196
|
-
}
|
|
1197
|
-
get activeTabUnregistered() {
|
|
1198
|
-
return this._activeTabUnregistered.asObservable();
|
|
1199
|
-
}
|
|
1200
|
-
get activeTabIndex() {
|
|
1201
|
-
return this._activeTabIndex.asObservable();
|
|
1202
|
-
}
|
|
1203
|
-
/**
|
|
1204
|
-
* Sets the active tab by its unique `tabIndex` property.
|
|
1205
|
-
*/
|
|
1206
|
-
setActiveTabIndex(value, config = {
|
|
1207
|
-
emitChange: true,
|
|
1208
|
-
}) {
|
|
1209
|
-
if (value !== undefined &&
|
|
1210
|
-
!this.tabIndexesEqual(value, this.currentActiveTabIndex)) {
|
|
1211
|
-
this.currentActiveTabIndex = value;
|
|
1212
|
-
/* istanbul ignore else */
|
|
1213
|
-
if (config.emitChange) {
|
|
1214
|
-
this._activeTabIndex.next(value);
|
|
1215
|
-
}
|
|
1216
|
-
}
|
|
1217
|
-
}
|
|
1218
|
-
/**
|
|
1219
|
-
* Registers a tab component.
|
|
1220
|
-
*/
|
|
1221
|
-
registerTab(tabIndex) {
|
|
1222
|
-
if (tabIndex === undefined) {
|
|
1223
|
-
tabIndex = this.tabCounter;
|
|
1224
|
-
this.tabCounter++;
|
|
1225
|
-
}
|
|
1226
|
-
this.tabs.push({ tabIndex });
|
|
1227
|
-
return tabIndex;
|
|
1228
|
-
}
|
|
1229
|
-
updateTabIndex(currentTabIndex, newTabIndex) {
|
|
1230
|
-
const found = this.tabs.find((tab) => this.tabIndexesEqual(tab.tabIndex, currentTabIndex));
|
|
1231
|
-
found.tabIndex = newTabIndex;
|
|
1232
|
-
}
|
|
1233
|
-
/**
|
|
1234
|
-
* Unregisters a tab component.
|
|
1235
|
-
*/
|
|
1236
|
-
unregisterTab(tabIndex) {
|
|
1237
|
-
const index = this.tabs.findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
|
|
1238
|
-
// Notify the tabset component when an active tab is unregistered.
|
|
1239
|
-
if (this.isTabIndexActive(this.tabs[index].tabIndex)) {
|
|
1240
|
-
this._activeTabUnregistered.next({
|
|
1241
|
-
arrayIndex: index,
|
|
1242
|
-
});
|
|
1243
|
-
}
|
|
1244
|
-
this.tabs.splice(index, 1);
|
|
1245
|
-
}
|
|
1246
|
-
/**
|
|
1247
|
-
* Unregisters all tab components at once.
|
|
1248
|
-
*/
|
|
1249
|
-
unregisterAll() {
|
|
1250
|
-
this.tabs = [];
|
|
1251
|
-
}
|
|
1252
|
-
/**
|
|
1253
|
-
* Compares two tab indexes and returns `true` if they are equal.
|
|
1254
|
-
*/
|
|
1255
|
-
tabIndexesEqual(tabIndex1, tabIndex2) {
|
|
1256
|
-
return tabIndex1 === tabIndex2 || +tabIndex1 === +tabIndex2;
|
|
1257
|
-
}
|
|
1258
|
-
/**
|
|
1259
|
-
* Verifies if a provided tab index is registered.
|
|
1260
|
-
*/
|
|
1261
|
-
isValidTabIndex(tabIndex) {
|
|
1262
|
-
return this.tabs.some((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
|
|
1263
|
-
}
|
|
1264
|
-
/**
|
|
1265
|
-
* Activates the first registered tab.
|
|
1266
|
-
*/
|
|
1267
|
-
activateFirstTab() {
|
|
1268
|
-
const firstTabIndex = this.tabs[0] && this.tabs[0].tabIndex;
|
|
1269
|
-
if (firstTabIndex !== undefined) {
|
|
1270
|
-
this.setActiveTabIndex(firstTabIndex);
|
|
1271
|
-
return firstTabIndex;
|
|
1272
|
-
}
|
|
1273
|
-
}
|
|
1274
|
-
/**
|
|
1275
|
-
* Activates the next registered tab, or the previous one based on a provided array index.
|
|
1276
|
-
*/
|
|
1277
|
-
activateNearestTab(arrayIndex) {
|
|
1278
|
-
const newActiveTab = this.tabs[arrayIndex] || this.tabs[arrayIndex - 1];
|
|
1279
|
-
if (newActiveTab) {
|
|
1280
|
-
this.currentActiveTabIndex = newActiveTab.tabIndex;
|
|
1281
|
-
}
|
|
1282
|
-
}
|
|
1283
|
-
isTabIndexActive(tabIndex) {
|
|
1284
|
-
return this.tabIndexesEqual(tabIndex, this.currentActiveTabIndex);
|
|
1285
|
-
}
|
|
1286
|
-
}
|
|
1287
|
-
SkyTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1288
|
-
SkyTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetService });
|
|
1289
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetService, decorators: [{
|
|
1290
|
-
type: Injectable
|
|
1291
|
-
}] });
|
|
1292
|
-
|
|
1293
1417
|
let nextId = 0;
|
|
1294
1418
|
class SkyTabComponent {
|
|
1295
1419
|
constructor(changeDetector, permalinkService, tabsetService) {
|
|
@@ -1622,6 +1746,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
|
1622
1746
|
}] });
|
|
1623
1747
|
|
|
1624
1748
|
var _SkyTabsetComponent__hasFinishButton;
|
|
1749
|
+
const DEFAULT_ELEMENT_ROLE = 'tablist';
|
|
1625
1750
|
class SkyTabsetComponent {
|
|
1626
1751
|
constructor(changeDetector, elementRef, adapterService, permalinkService, tabsetService) {
|
|
1627
1752
|
this.changeDetector = changeDetector;
|
|
@@ -1651,6 +1776,7 @@ class SkyTabsetComponent {
|
|
|
1651
1776
|
*/
|
|
1652
1777
|
this.tabIndexesChange = new EventEmitter();
|
|
1653
1778
|
this.tabButtons = [];
|
|
1779
|
+
this.elementRole = DEFAULT_ELEMENT_ROLE;
|
|
1654
1780
|
this.ngUnsubscribe = new Subject();
|
|
1655
1781
|
this.tabComponentsStateChangeUnsubscribe = new Subject();
|
|
1656
1782
|
_SkyTabsetComponent__hasFinishButton.set(this, false);
|
|
@@ -1709,6 +1835,7 @@ class SkyTabsetComponent {
|
|
|
1709
1835
|
*/
|
|
1710
1836
|
set tabStyle(value) {
|
|
1711
1837
|
this._tabStyle = value;
|
|
1838
|
+
this.elementRole = value === 'tabs' ? DEFAULT_ELEMENT_ROLE : undefined;
|
|
1712
1839
|
}
|
|
1713
1840
|
get tabStyle() {
|
|
1714
1841
|
return this._tabStyle || 'tabs';
|
|
@@ -1773,6 +1900,18 @@ class SkyTabsetComponent {
|
|
|
1773
1900
|
onOpenTabClick() {
|
|
1774
1901
|
this.openTab.emit();
|
|
1775
1902
|
}
|
|
1903
|
+
onRightKeyDown() {
|
|
1904
|
+
this.tabsetService.focusNextTabBtn(this.tabButtons);
|
|
1905
|
+
}
|
|
1906
|
+
onLeftKeyDown() {
|
|
1907
|
+
this.tabsetService.focusPrevTabBtn(this.tabButtons);
|
|
1908
|
+
}
|
|
1909
|
+
onHomeKeyDown() {
|
|
1910
|
+
this.tabsetService.focusFirstOrNearestTabBtn(this.tabButtons);
|
|
1911
|
+
}
|
|
1912
|
+
onEndKeyDown() {
|
|
1913
|
+
this.tabsetService.focusLastOrNearestTabBtn(this.tabButtons);
|
|
1914
|
+
}
|
|
1776
1915
|
/**
|
|
1777
1916
|
* Sets the initial active tab index based on the following criteria.
|
|
1778
1917
|
* 1. Does the URL include a query param that reflects this tabset's active tab?
|
|
@@ -1977,14 +2116,14 @@ SkyTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
|
|
|
1977
2116
|
SkyTabsetAdapterService,
|
|
1978
2117
|
SkyTabsetPermalinkService,
|
|
1979
2118
|
SkyTabsetService,
|
|
1980
|
-
], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<div\n class=\"sky-tabset\"\n role=\"
|
|
2119
|
+
], 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"], components: [{ type: i4$1.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i4$1.λ2, selector: "sky-dropdown-button" }, { type: i4$1.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: i4$1.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: ["active", "ariaControls", "buttonHref", "buttonId", "buttonText", "buttonTextCount", "closeable", "disabled", "tabIndex", "tabStyle"], outputs: ["buttonClick", "closeClick"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1981
2120
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetComponent, decorators: [{
|
|
1982
2121
|
type: Component,
|
|
1983
2122
|
args: [{ selector: 'sky-tabset', providers: [
|
|
1984
2123
|
SkyTabsetAdapterService,
|
|
1985
2124
|
SkyTabsetPermalinkService,
|
|
1986
2125
|
SkyTabsetService,
|
|
1987
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"sky-tabset\"\n role=\"
|
|
2126
|
+
], 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"] }]
|
|
1988
2127
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: SkyTabsetAdapterService }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
|
|
1989
2128
|
type: Input
|
|
1990
2129
|
}], ariaLabel: [{
|