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