@skyux/tabs 6.21.0 → 6.23.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/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 i4$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!
|
|
@@ -1002,10 +1002,232 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
|
1002
1002
|
/**
|
|
1003
1003
|
* @internal
|
|
1004
1004
|
*/
|
|
1005
|
-
class
|
|
1005
|
+
class SkyTabButtonAdapterService {
|
|
1006
|
+
focusButtonLink(buttonEl) {
|
|
1007
|
+
buttonEl.nativeElement.querySelector('a').focus();
|
|
1008
|
+
}
|
|
1009
|
+
}
|
|
1010
|
+
SkyTabButtonAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabButtonAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1011
|
+
SkyTabButtonAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabButtonAdapterService });
|
|
1012
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabButtonAdapterService, decorators: [{
|
|
1013
|
+
type: Injectable
|
|
1014
|
+
}] });
|
|
1015
|
+
|
|
1016
|
+
/**
|
|
1017
|
+
* @internal
|
|
1018
|
+
*/
|
|
1019
|
+
class SkyTabsetService {
|
|
1006
1020
|
constructor() {
|
|
1021
|
+
this.currentActiveTabIndex = 0;
|
|
1022
|
+
this.currentFocusedTabBtnIndex = 0;
|
|
1023
|
+
this._activeTabIndex = new BehaviorSubject(0);
|
|
1024
|
+
this._focusedTabBtnIndex = new Subject();
|
|
1025
|
+
this._activeTabUnregistered = new Subject();
|
|
1026
|
+
this.tabs = [];
|
|
1027
|
+
this.tabCounter = 0;
|
|
1028
|
+
}
|
|
1029
|
+
get activeTabUnregistered() {
|
|
1030
|
+
return this._activeTabUnregistered.asObservable();
|
|
1031
|
+
}
|
|
1032
|
+
get activeTabIndex() {
|
|
1033
|
+
return this._activeTabIndex.asObservable();
|
|
1034
|
+
}
|
|
1035
|
+
get focusedTabBtnIndex() {
|
|
1036
|
+
return this._focusedTabBtnIndex.asObservable();
|
|
1037
|
+
}
|
|
1038
|
+
/**
|
|
1039
|
+
* Sets the active tab by its unique `tabIndex` property.
|
|
1040
|
+
*/
|
|
1041
|
+
setActiveTabIndex(value, config = {
|
|
1042
|
+
emitChange: true,
|
|
1043
|
+
}) {
|
|
1044
|
+
if (value !== undefined &&
|
|
1045
|
+
!this.tabIndexesEqual(value, this.currentActiveTabIndex)) {
|
|
1046
|
+
this.currentActiveTabIndex = value;
|
|
1047
|
+
/* istanbul ignore else */
|
|
1048
|
+
if (config.emitChange) {
|
|
1049
|
+
this._activeTabIndex.next(value);
|
|
1050
|
+
}
|
|
1051
|
+
this.setFocusedTabBtnIndex(value);
|
|
1052
|
+
}
|
|
1053
|
+
}
|
|
1054
|
+
focusNextTabBtn(tabButtons) {
|
|
1055
|
+
const currentTabArrayIndex = this.tabs.findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, this.currentFocusedTabBtnIndex));
|
|
1056
|
+
for (let i = this.getNextTabArrayIndex(currentTabArrayIndex); i !== currentTabArrayIndex; i = this.getNextTabArrayIndex(i)) {
|
|
1057
|
+
const tabBtn = tabButtons[i];
|
|
1058
|
+
if (!tabBtn.disabled) {
|
|
1059
|
+
this.setFocusedTabBtnIndex(tabBtn.tabIndex);
|
|
1060
|
+
return;
|
|
1061
|
+
}
|
|
1062
|
+
}
|
|
1063
|
+
}
|
|
1064
|
+
focusPrevTabBtn(tabButtons) {
|
|
1065
|
+
const currentTabArrayIndex = this.tabs.findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, this.currentFocusedTabBtnIndex));
|
|
1066
|
+
for (let i = this.getPrevTabArrayIndex(currentTabArrayIndex); i !== currentTabArrayIndex; i = this.getPrevTabArrayIndex(i)) {
|
|
1067
|
+
const tabBtn = tabButtons[i];
|
|
1068
|
+
if (!tabBtn.disabled) {
|
|
1069
|
+
this.setFocusedTabBtnIndex(tabBtn.tabIndex);
|
|
1070
|
+
return;
|
|
1071
|
+
}
|
|
1072
|
+
}
|
|
1073
|
+
}
|
|
1074
|
+
focusFirstOrNearestTabBtn(tabButtons) {
|
|
1075
|
+
for (let i = 0; i < tabButtons.length; i++) {
|
|
1076
|
+
const tabBtn = tabButtons[i];
|
|
1077
|
+
if (!tabBtn.disabled) {
|
|
1078
|
+
this.setFocusedTabBtnIndex(tabBtn.tabIndex);
|
|
1079
|
+
return;
|
|
1080
|
+
}
|
|
1081
|
+
}
|
|
1082
|
+
}
|
|
1083
|
+
focusLastOrNearestTabBtn(tabButtons) {
|
|
1084
|
+
for (let i = tabButtons.length - 1; i >= 0; i--) {
|
|
1085
|
+
const tabBtn = tabButtons[i];
|
|
1086
|
+
if (!tabBtn.disabled) {
|
|
1087
|
+
this.setFocusedTabBtnIndex(tabBtn.tabIndex);
|
|
1088
|
+
return;
|
|
1089
|
+
}
|
|
1090
|
+
}
|
|
1091
|
+
}
|
|
1092
|
+
setFocusedTabBtnIndex(tabIndex) {
|
|
1093
|
+
this.currentFocusedTabBtnIndex = tabIndex;
|
|
1094
|
+
this._focusedTabBtnIndex.next(tabIndex);
|
|
1095
|
+
}
|
|
1096
|
+
/**
|
|
1097
|
+
* Registers a tab component.
|
|
1098
|
+
*/
|
|
1099
|
+
registerTab(tabIndex) {
|
|
1100
|
+
if (tabIndex === undefined) {
|
|
1101
|
+
tabIndex = this.tabCounter;
|
|
1102
|
+
this.tabCounter++;
|
|
1103
|
+
}
|
|
1104
|
+
this.tabs.push({ tabIndex });
|
|
1105
|
+
return tabIndex;
|
|
1106
|
+
}
|
|
1107
|
+
updateTabIndex(currentTabIndex, newTabIndex) {
|
|
1108
|
+
const found = this.tabs.find((tab) => this.tabIndexesEqual(tab.tabIndex, currentTabIndex));
|
|
1109
|
+
found.tabIndex = newTabIndex;
|
|
1110
|
+
}
|
|
1111
|
+
/**
|
|
1112
|
+
* Unregisters a tab component.
|
|
1113
|
+
*/
|
|
1114
|
+
unregisterTab(tabIndex) {
|
|
1115
|
+
const index = this.tabs.findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
|
|
1116
|
+
// Notify the tabset component when an active tab is unregistered.
|
|
1117
|
+
if (this.isTabIndexActive(this.tabs[index].tabIndex)) {
|
|
1118
|
+
this._activeTabUnregistered.next({
|
|
1119
|
+
arrayIndex: index,
|
|
1120
|
+
});
|
|
1121
|
+
}
|
|
1122
|
+
this.tabs.splice(index, 1);
|
|
1123
|
+
}
|
|
1124
|
+
/**
|
|
1125
|
+
* Unregisters all tab components at once.
|
|
1126
|
+
*/
|
|
1127
|
+
unregisterAll() {
|
|
1128
|
+
this.tabs = [];
|
|
1129
|
+
}
|
|
1130
|
+
/**
|
|
1131
|
+
* Compares two tab indexes and returns `true` if they are equal.
|
|
1132
|
+
*/
|
|
1133
|
+
tabIndexesEqual(tabIndex1, tabIndex2) {
|
|
1134
|
+
return tabIndex1 === tabIndex2 || +tabIndex1 === +tabIndex2;
|
|
1135
|
+
}
|
|
1136
|
+
/**
|
|
1137
|
+
* Verifies if a provided tab index is registered.
|
|
1138
|
+
*/
|
|
1139
|
+
isValidTabIndex(tabIndex) {
|
|
1140
|
+
return this.tabs.some((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
|
|
1141
|
+
}
|
|
1142
|
+
/**
|
|
1143
|
+
* Activates the first registered tab.
|
|
1144
|
+
*/
|
|
1145
|
+
activateFirstTab() {
|
|
1146
|
+
const firstTabIndex = this.tabs[0] && this.tabs[0].tabIndex;
|
|
1147
|
+
if (firstTabIndex !== undefined) {
|
|
1148
|
+
this.setActiveTabIndex(firstTabIndex);
|
|
1149
|
+
return firstTabIndex;
|
|
1150
|
+
}
|
|
1151
|
+
}
|
|
1152
|
+
/**
|
|
1153
|
+
* Activates the next registered tab, or the previous one based on a provided array index.
|
|
1154
|
+
*/
|
|
1155
|
+
activateNearestTab(arrayIndex) {
|
|
1156
|
+
const newActiveTab = this.tabs[arrayIndex] || this.tabs[arrayIndex - 1];
|
|
1157
|
+
if (newActiveTab) {
|
|
1158
|
+
this.currentActiveTabIndex = newActiveTab.tabIndex;
|
|
1159
|
+
}
|
|
1160
|
+
}
|
|
1161
|
+
isTabIndexActive(tabIndex) {
|
|
1162
|
+
return this.tabIndexesEqual(tabIndex, this.currentActiveTabIndex);
|
|
1163
|
+
}
|
|
1164
|
+
getNextTabArrayIndex(currentIndex) {
|
|
1165
|
+
let nextIndex = currentIndex + 1;
|
|
1166
|
+
if (nextIndex === this.tabs.length) {
|
|
1167
|
+
nextIndex = 0;
|
|
1168
|
+
}
|
|
1169
|
+
return nextIndex;
|
|
1170
|
+
}
|
|
1171
|
+
getPrevTabArrayIndex(currentIndex) {
|
|
1172
|
+
let prevIndex = currentIndex - 1;
|
|
1173
|
+
if (prevIndex < 0) {
|
|
1174
|
+
prevIndex = this.tabs.length - 1;
|
|
1175
|
+
}
|
|
1176
|
+
return prevIndex;
|
|
1177
|
+
}
|
|
1178
|
+
}
|
|
1179
|
+
SkyTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1180
|
+
SkyTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetService });
|
|
1181
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetService, decorators: [{
|
|
1182
|
+
type: Injectable
|
|
1183
|
+
}] });
|
|
1184
|
+
|
|
1185
|
+
var _SkyTabButtonComponent__tabStyle, _SkyTabButtonComponent_adapterService, _SkyTabButtonComponent_changeDetectorRef, _SkyTabButtonComponent_elementRef, _SkyTabButtonComponent_tabsetService, _SkyTabButtonComponent_ngUnsubscribe;
|
|
1186
|
+
const DEFAULT_ELEMENT_ROLE$1 = 'tab';
|
|
1187
|
+
/**
|
|
1188
|
+
* @internal
|
|
1189
|
+
*/
|
|
1190
|
+
class SkyTabButtonComponent {
|
|
1191
|
+
constructor(elementRef, adapterService, changeDetectorRef, tabsetService) {
|
|
1007
1192
|
this.buttonClick = new EventEmitter();
|
|
1008
1193
|
this.closeClick = new EventEmitter();
|
|
1194
|
+
this.elementRole = DEFAULT_ELEMENT_ROLE$1;
|
|
1195
|
+
this.closeBtnTabIndex = '-1';
|
|
1196
|
+
_SkyTabButtonComponent__tabStyle.set(this, void 0);
|
|
1197
|
+
_SkyTabButtonComponent_adapterService.set(this, void 0);
|
|
1198
|
+
_SkyTabButtonComponent_changeDetectorRef.set(this, void 0);
|
|
1199
|
+
_SkyTabButtonComponent_elementRef.set(this, void 0);
|
|
1200
|
+
_SkyTabButtonComponent_tabsetService.set(this, void 0);
|
|
1201
|
+
_SkyTabButtonComponent_ngUnsubscribe.set(this, new Subject());
|
|
1202
|
+
__classPrivateFieldSet(this, _SkyTabButtonComponent_adapterService, adapterService, "f");
|
|
1203
|
+
__classPrivateFieldSet(this, _SkyTabButtonComponent_changeDetectorRef, changeDetectorRef, "f");
|
|
1204
|
+
__classPrivateFieldSet(this, _SkyTabButtonComponent_elementRef, elementRef, "f");
|
|
1205
|
+
__classPrivateFieldSet(this, _SkyTabButtonComponent_tabsetService, tabsetService, "f");
|
|
1206
|
+
}
|
|
1207
|
+
get tabStyle() {
|
|
1208
|
+
return __classPrivateFieldGet(this, _SkyTabButtonComponent__tabStyle, "f");
|
|
1209
|
+
}
|
|
1210
|
+
set tabStyle(style) {
|
|
1211
|
+
__classPrivateFieldSet(this, _SkyTabButtonComponent__tabStyle, style, "f");
|
|
1212
|
+
this.elementRole = style === 'tabs' ? DEFAULT_ELEMENT_ROLE$1 : undefined;
|
|
1213
|
+
}
|
|
1214
|
+
ngAfterViewInit() {
|
|
1215
|
+
__classPrivateFieldGet(this, _SkyTabButtonComponent_tabsetService, "f").focusedTabBtnIndex
|
|
1216
|
+
.pipe(distinctUntilChanged(), takeUntil(__classPrivateFieldGet(this, _SkyTabButtonComponent_ngUnsubscribe, "f")))
|
|
1217
|
+
.subscribe((focusedIndex) => {
|
|
1218
|
+
if (focusedIndex === this.tabIndex) {
|
|
1219
|
+
this.closeBtnTabIndex = '0';
|
|
1220
|
+
this.focusBtn();
|
|
1221
|
+
}
|
|
1222
|
+
else {
|
|
1223
|
+
this.closeBtnTabIndex = '-1';
|
|
1224
|
+
}
|
|
1225
|
+
__classPrivateFieldGet(this, _SkyTabButtonComponent_changeDetectorRef, "f").markForCheck();
|
|
1226
|
+
});
|
|
1227
|
+
}
|
|
1228
|
+
ngOnDestroy() {
|
|
1229
|
+
__classPrivateFieldGet(this, _SkyTabButtonComponent_ngUnsubscribe, "f").next();
|
|
1230
|
+
__classPrivateFieldGet(this, _SkyTabButtonComponent_ngUnsubscribe, "f").complete();
|
|
1009
1231
|
}
|
|
1010
1232
|
onButtonClick(event) {
|
|
1011
1233
|
if (!this.disabled) {
|
|
@@ -1034,13 +1256,20 @@ class SkyTabButtonComponent {
|
|
|
1034
1256
|
event.stopPropagation();
|
|
1035
1257
|
event.preventDefault();
|
|
1036
1258
|
}
|
|
1259
|
+
focusBtn() {
|
|
1260
|
+
__classPrivateFieldGet(this, _SkyTabButtonComponent_adapterService, "f").focusButtonLink(__classPrivateFieldGet(this, _SkyTabButtonComponent_elementRef, "f"));
|
|
1261
|
+
}
|
|
1262
|
+
onFocus() {
|
|
1263
|
+
__classPrivateFieldGet(this, _SkyTabButtonComponent_tabsetService, "f").setFocusedTabBtnIndex(this.tabIndex);
|
|
1264
|
+
}
|
|
1037
1265
|
}
|
|
1038
|
-
|
|
1039
|
-
SkyTabButtonComponent.ɵ
|
|
1266
|
+
_SkyTabButtonComponent__tabStyle = new WeakMap(), _SkyTabButtonComponent_adapterService = new WeakMap(), _SkyTabButtonComponent_changeDetectorRef = new WeakMap(), _SkyTabButtonComponent_elementRef = new WeakMap(), _SkyTabButtonComponent_tabsetService = new WeakMap(), _SkyTabButtonComponent_ngUnsubscribe = new WeakMap();
|
|
1267
|
+
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 });
|
|
1268
|
+
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 });
|
|
1040
1269
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabButtonComponent, decorators: [{
|
|
1041
1270
|
type: Component,
|
|
1042
|
-
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=\"
|
|
1043
|
-
}], propDecorators: { active: [{
|
|
1271
|
+
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"] }]
|
|
1272
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SkyTabButtonAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
|
|
1044
1273
|
type: Input
|
|
1045
1274
|
}], ariaControls: [{
|
|
1046
1275
|
type: Input
|
|
@@ -1056,6 +1285,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
|
1056
1285
|
type: Input
|
|
1057
1286
|
}], disabled: [{
|
|
1058
1287
|
type: Input
|
|
1288
|
+
}], tabIndex: [{
|
|
1289
|
+
type: Input
|
|
1059
1290
|
}], tabStyle: [{
|
|
1060
1291
|
type: Input
|
|
1061
1292
|
}], buttonClick: [{
|
|
@@ -1181,113 +1412,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
|
1181
1412
|
type: Injectable
|
|
1182
1413
|
}], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i2.Location }, { type: i1$1.Router }]; } });
|
|
1183
1414
|
|
|
1184
|
-
/**
|
|
1185
|
-
* @internal
|
|
1186
|
-
*/
|
|
1187
|
-
class SkyTabsetService {
|
|
1188
|
-
constructor() {
|
|
1189
|
-
this.currentActiveTabIndex = 0;
|
|
1190
|
-
this._activeTabIndex = new BehaviorSubject(0);
|
|
1191
|
-
this._activeTabUnregistered = new Subject();
|
|
1192
|
-
this.tabs = [];
|
|
1193
|
-
this.tabCounter = 0;
|
|
1194
|
-
}
|
|
1195
|
-
get activeTabUnregistered() {
|
|
1196
|
-
return this._activeTabUnregistered.asObservable();
|
|
1197
|
-
}
|
|
1198
|
-
get activeTabIndex() {
|
|
1199
|
-
return this._activeTabIndex.asObservable();
|
|
1200
|
-
}
|
|
1201
|
-
/**
|
|
1202
|
-
* Sets the active tab by its unique `tabIndex` property.
|
|
1203
|
-
*/
|
|
1204
|
-
setActiveTabIndex(value, config = {
|
|
1205
|
-
emitChange: true,
|
|
1206
|
-
}) {
|
|
1207
|
-
if (value !== undefined &&
|
|
1208
|
-
!this.tabIndexesEqual(value, this.currentActiveTabIndex)) {
|
|
1209
|
-
this.currentActiveTabIndex = value;
|
|
1210
|
-
/* istanbul ignore else */
|
|
1211
|
-
if (config.emitChange) {
|
|
1212
|
-
this._activeTabIndex.next(value);
|
|
1213
|
-
}
|
|
1214
|
-
}
|
|
1215
|
-
}
|
|
1216
|
-
/**
|
|
1217
|
-
* Registers a tab component.
|
|
1218
|
-
*/
|
|
1219
|
-
registerTab(tabIndex) {
|
|
1220
|
-
if (tabIndex === undefined) {
|
|
1221
|
-
tabIndex = this.tabCounter;
|
|
1222
|
-
this.tabCounter++;
|
|
1223
|
-
}
|
|
1224
|
-
this.tabs.push({ tabIndex });
|
|
1225
|
-
return tabIndex;
|
|
1226
|
-
}
|
|
1227
|
-
updateTabIndex(currentTabIndex, newTabIndex) {
|
|
1228
|
-
const found = this.tabs.find((tab) => this.tabIndexesEqual(tab.tabIndex, currentTabIndex));
|
|
1229
|
-
found.tabIndex = newTabIndex;
|
|
1230
|
-
}
|
|
1231
|
-
/**
|
|
1232
|
-
* Unregisters a tab component.
|
|
1233
|
-
*/
|
|
1234
|
-
unregisterTab(tabIndex) {
|
|
1235
|
-
const index = this.tabs.findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
|
|
1236
|
-
// Notify the tabset component when an active tab is unregistered.
|
|
1237
|
-
if (this.isTabIndexActive(this.tabs[index].tabIndex)) {
|
|
1238
|
-
this._activeTabUnregistered.next({
|
|
1239
|
-
arrayIndex: index,
|
|
1240
|
-
});
|
|
1241
|
-
}
|
|
1242
|
-
this.tabs.splice(index, 1);
|
|
1243
|
-
}
|
|
1244
|
-
/**
|
|
1245
|
-
* Unregisters all tab components at once.
|
|
1246
|
-
*/
|
|
1247
|
-
unregisterAll() {
|
|
1248
|
-
this.tabs = [];
|
|
1249
|
-
}
|
|
1250
|
-
/**
|
|
1251
|
-
* Compares two tab indexes and returns `true` if they are equal.
|
|
1252
|
-
*/
|
|
1253
|
-
tabIndexesEqual(tabIndex1, tabIndex2) {
|
|
1254
|
-
return tabIndex1 === tabIndex2 || +tabIndex1 === +tabIndex2;
|
|
1255
|
-
}
|
|
1256
|
-
/**
|
|
1257
|
-
* Verifies if a provided tab index is registered.
|
|
1258
|
-
*/
|
|
1259
|
-
isValidTabIndex(tabIndex) {
|
|
1260
|
-
return this.tabs.some((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
|
|
1261
|
-
}
|
|
1262
|
-
/**
|
|
1263
|
-
* Activates the first registered tab.
|
|
1264
|
-
*/
|
|
1265
|
-
activateFirstTab() {
|
|
1266
|
-
const firstTabIndex = this.tabs[0] && this.tabs[0].tabIndex;
|
|
1267
|
-
if (firstTabIndex !== undefined) {
|
|
1268
|
-
this.setActiveTabIndex(firstTabIndex);
|
|
1269
|
-
return firstTabIndex;
|
|
1270
|
-
}
|
|
1271
|
-
}
|
|
1272
|
-
/**
|
|
1273
|
-
* Activates the next registered tab, or the previous one based on a provided array index.
|
|
1274
|
-
*/
|
|
1275
|
-
activateNearestTab(arrayIndex) {
|
|
1276
|
-
const newActiveTab = this.tabs[arrayIndex] || this.tabs[arrayIndex - 1];
|
|
1277
|
-
if (newActiveTab) {
|
|
1278
|
-
this.currentActiveTabIndex = newActiveTab.tabIndex;
|
|
1279
|
-
}
|
|
1280
|
-
}
|
|
1281
|
-
isTabIndexActive(tabIndex) {
|
|
1282
|
-
return this.tabIndexesEqual(tabIndex, this.currentActiveTabIndex);
|
|
1283
|
-
}
|
|
1284
|
-
}
|
|
1285
|
-
SkyTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1286
|
-
SkyTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetService });
|
|
1287
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetService, decorators: [{
|
|
1288
|
-
type: Injectable
|
|
1289
|
-
}] });
|
|
1290
|
-
|
|
1291
1415
|
let nextId = 0;
|
|
1292
1416
|
class SkyTabComponent {
|
|
1293
1417
|
constructor(changeDetector, permalinkService, tabsetService) {
|
|
@@ -1468,6 +1592,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
|
1468
1592
|
}] });
|
|
1469
1593
|
|
|
1470
1594
|
var _SkyTabsetComponent__hasFinishButton;
|
|
1595
|
+
const DEFAULT_ELEMENT_ROLE = 'tablist';
|
|
1471
1596
|
class SkyTabsetComponent {
|
|
1472
1597
|
constructor(changeDetector, elementRef, adapterService, permalinkService, tabsetService) {
|
|
1473
1598
|
this.changeDetector = changeDetector;
|
|
@@ -1497,6 +1622,7 @@ class SkyTabsetComponent {
|
|
|
1497
1622
|
*/
|
|
1498
1623
|
this.tabIndexesChange = new EventEmitter();
|
|
1499
1624
|
this.tabButtons = [];
|
|
1625
|
+
this.elementRole = DEFAULT_ELEMENT_ROLE;
|
|
1500
1626
|
this.ngUnsubscribe = new Subject();
|
|
1501
1627
|
this.tabComponentsStateChangeUnsubscribe = new Subject();
|
|
1502
1628
|
_SkyTabsetComponent__hasFinishButton.set(this, false);
|
|
@@ -1555,6 +1681,7 @@ class SkyTabsetComponent {
|
|
|
1555
1681
|
*/
|
|
1556
1682
|
set tabStyle(value) {
|
|
1557
1683
|
this._tabStyle = value;
|
|
1684
|
+
this.elementRole = value === 'tabs' ? DEFAULT_ELEMENT_ROLE : undefined;
|
|
1558
1685
|
}
|
|
1559
1686
|
get tabStyle() {
|
|
1560
1687
|
return this._tabStyle || 'tabs';
|
|
@@ -1619,6 +1746,18 @@ class SkyTabsetComponent {
|
|
|
1619
1746
|
onOpenTabClick() {
|
|
1620
1747
|
this.openTab.emit();
|
|
1621
1748
|
}
|
|
1749
|
+
onRightKeyDown() {
|
|
1750
|
+
this.tabsetService.focusNextTabBtn(this.tabButtons);
|
|
1751
|
+
}
|
|
1752
|
+
onLeftKeyDown() {
|
|
1753
|
+
this.tabsetService.focusPrevTabBtn(this.tabButtons);
|
|
1754
|
+
}
|
|
1755
|
+
onHomeKeyDown() {
|
|
1756
|
+
this.tabsetService.focusFirstOrNearestTabBtn(this.tabButtons);
|
|
1757
|
+
}
|
|
1758
|
+
onEndKeyDown() {
|
|
1759
|
+
this.tabsetService.focusLastOrNearestTabBtn(this.tabButtons);
|
|
1760
|
+
}
|
|
1622
1761
|
/**
|
|
1623
1762
|
* Sets the initial active tab index based on the following criteria.
|
|
1624
1763
|
* 1. Does the URL include a query param that reflects this tabset's active tab?
|
|
@@ -1819,14 +1958,14 @@ SkyTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
|
|
|
1819
1958
|
SkyTabsetAdapterService,
|
|
1820
1959
|
SkyTabsetPermalinkService,
|
|
1821
1960
|
SkyTabsetService,
|
|
1822
|
-
], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<div\n class=\"sky-tabset\"\n role=\"
|
|
1961
|
+
], 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 });
|
|
1823
1962
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTabsetComponent, decorators: [{
|
|
1824
1963
|
type: Component,
|
|
1825
1964
|
args: [{ selector: 'sky-tabset', providers: [
|
|
1826
1965
|
SkyTabsetAdapterService,
|
|
1827
1966
|
SkyTabsetPermalinkService,
|
|
1828
1967
|
SkyTabsetService,
|
|
1829
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"sky-tabset\"\n role=\"
|
|
1968
|
+
], 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"] }]
|
|
1830
1969
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: SkyTabsetAdapterService }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
|
|
1831
1970
|
type: Input
|
|
1832
1971
|
}], ariaLabel: [{
|