@skyux/tabs 7.0.0-beta.0 → 7.0.0-beta.2
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 +481 -372
- 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-nav-button.component.mjs +18 -22
- package/esm2020/lib/modules/tabs/tabset.component.mjs +18 -13
- package/esm2020/lib/modules/tabs/tabset.service.mjs +63 -1
- package/esm2020/lib/modules/vertical-tabset/vertical-tabset.component.mjs +3 -3
- package/fesm2015/skyux-tabs.mjs +274 -148
- package/fesm2015/skyux-tabs.mjs.map +1 -1
- package/fesm2020/skyux-tabs.mjs +273 -147
- 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-nav-button.component.d.ts +1 -0
- package/lib/modules/tabs/tabset.component.d.ts +6 -18
- package/lib/modules/tabs/tabset.service.d.ts +11 -0
- package/package.json +9 -9
package/fesm2015/skyux-tabs.mjs
CHANGED
|
@@ -688,7 +688,7 @@ class SkyVerticalTabsetComponent {
|
|
|
688
688
|
}
|
|
689
689
|
}
|
|
690
690
|
SkyVerticalTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyVerticalTabsetComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: SkyVerticalTabsetService }, { token: i3.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
691
|
-
SkyVerticalTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyVerticalTabsetComponent, selector: "sky-vertical-tabset", inputs: { showTabsText: "showTabsText", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole", maintainTabContent: "maintainTabContent" }, outputs: { activeChange: "activeChange" }, providers: [SkyVerticalTabsetService], viewQueries: [{ propertyName: "tabGroups", first: true, predicate: ["groupContainerWrapper"], descendants: true }, { propertyName: "content", first: true, predicate: ["skySideContent"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentContainerWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n <div\n *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n aria-orientation=\"vertical\"\n class=\"sky-vertical-tabset-group-container\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n #groupContainerWrapper\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n class=\"sky-vertical-tabset-content\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n #contentContainerWrapper\n >\n <div #skySideContent></div>\n <button\n *ngIf=\"!tabService.tabsVisible()\"\n (click)=\"tabService.showTabs()\"\n class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n >\n <sky-icon icon=\"chevron-left\"></sky-icon>\n {{ showTabsText }}\n </button>\n </div>\n</div>\n", styles: [":host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:10px 0 0 10px;flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:10px}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\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"] }], animations: [
|
|
691
|
+
SkyVerticalTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyVerticalTabsetComponent, selector: "sky-vertical-tabset", inputs: { showTabsText: "showTabsText", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole", maintainTabContent: "maintainTabContent" }, outputs: { activeChange: "activeChange" }, providers: [SkyVerticalTabsetService], viewQueries: [{ propertyName: "tabGroups", first: true, predicate: ["groupContainerWrapper"], descendants: true }, { propertyName: "content", first: true, predicate: ["skySideContent"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentContainerWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n <div\n *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n aria-orientation=\"vertical\"\n class=\"sky-vertical-tabset-group-container\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n #groupContainerWrapper\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n class=\"sky-vertical-tabset-content\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n #contentContainerWrapper\n >\n <div #skySideContent></div>\n <button\n *ngIf=\"!tabService.tabsVisible()\"\n (click)=\"tabService.showTabs()\"\n class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n >\n <sky-icon icon=\"chevron-left\"></sky-icon>\n {{ showTabsText }}\n </button>\n </div>\n</div>\n", styles: [":host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:10px 0 0 10px;flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:10px}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto}:host-context(sky-modal-content)>.sky-vertical-tabset{margin:-15px}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\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"] }], animations: [
|
|
692
692
|
trigger('tabGroupEnter', [
|
|
693
693
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
694
694
|
style({ transform: 'translate(-100%)' }),
|
|
@@ -717,7 +717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
717
717
|
animate('150ms ease-in'),
|
|
718
718
|
]),
|
|
719
719
|
]),
|
|
720
|
-
], template: "<div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n <div\n *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n aria-orientation=\"vertical\"\n class=\"sky-vertical-tabset-group-container\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n #groupContainerWrapper\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n class=\"sky-vertical-tabset-content\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n #contentContainerWrapper\n >\n <div #skySideContent></div>\n <button\n *ngIf=\"!tabService.tabsVisible()\"\n (click)=\"tabService.showTabs()\"\n class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n >\n <sky-icon icon=\"chevron-left\"></sky-icon>\n {{ showTabsText }}\n </button>\n </div>\n</div>\n", styles: [":host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:10px 0 0 10px;flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:10px}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\n"] }]
|
|
720
|
+
], template: "<div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n <div\n *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n aria-orientation=\"vertical\"\n class=\"sky-vertical-tabset-group-container\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n #groupContainerWrapper\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n class=\"sky-vertical-tabset-content\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n #contentContainerWrapper\n >\n <div #skySideContent></div>\n <button\n *ngIf=\"!tabService.tabsVisible()\"\n (click)=\"tabService.showTabs()\"\n class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n >\n <sky-icon icon=\"chevron-left\"></sky-icon>\n {{ showTabsText }}\n </button>\n </div>\n</div>\n", styles: [":host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:10px 0 0 10px;flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:10px}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto}:host-context(sky-modal-content)>.sky-vertical-tabset{margin:-15px}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\n"] }]
|
|
721
721
|
}], ctorParameters: function () { return [{ type: SkyVerticalTabsetAdapterService }, { type: SkyVerticalTabsetService }, { type: i3.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { showTabsText: [{
|
|
722
722
|
type: Input
|
|
723
723
|
}], ariaLabel: [{
|
|
@@ -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) {
|
|
@@ -1436,15 +1560,15 @@ class SkyTabsetNavButtonComponent {
|
|
|
1436
1560
|
* Specifies the tabset wizard component to associate with the nav button.
|
|
1437
1561
|
* @required
|
|
1438
1562
|
*/
|
|
1563
|
+
get tabset() {
|
|
1564
|
+
return __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f");
|
|
1565
|
+
}
|
|
1439
1566
|
set tabset(value) {
|
|
1440
1567
|
__classPrivateFieldSet(this, _SkyTabsetNavButtonComponent__tabset, value, "f");
|
|
1441
1568
|
if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_currentTabsetSub, "f")) {
|
|
1442
1569
|
__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_currentTabsetSub, "f").unsubscribe();
|
|
1443
1570
|
}
|
|
1444
1571
|
if (value) {
|
|
1445
|
-
if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f") === buttonTypeFinish) {
|
|
1446
|
-
__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f").hasFinishButton = true;
|
|
1447
|
-
}
|
|
1448
1572
|
__classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_currentTabsetSub, __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f").activeChange
|
|
1449
1573
|
.pipe(distinctUntilChanged(), takeUntil(__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_ngUnsubscribe, "f")))
|
|
1450
1574
|
.subscribe((index) => {
|
|
@@ -1490,7 +1614,7 @@ class SkyTabsetNavButtonComponent {
|
|
|
1490
1614
|
if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__disabled, "f") !== undefined) {
|
|
1491
1615
|
return __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__disabled, "f");
|
|
1492
1616
|
}
|
|
1493
|
-
else if (
|
|
1617
|
+
else if (this.buttonType === buttonTypeFinish) {
|
|
1494
1618
|
return false;
|
|
1495
1619
|
}
|
|
1496
1620
|
return !__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabToSelect, "f") || __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabToSelect, "f").disabled;
|
|
@@ -1502,48 +1626,44 @@ class SkyTabsetNavButtonComponent {
|
|
|
1502
1626
|
buttonClick() {
|
|
1503
1627
|
/* istanbul ignore else */
|
|
1504
1628
|
if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabToSelect, "f") && !__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabToSelect, "f").disabled) {
|
|
1505
|
-
|
|
1629
|
+
this.tabset.active = __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabToSelect, "f").tabIndex;
|
|
1506
1630
|
}
|
|
1507
1631
|
}
|
|
1508
1632
|
}
|
|
1509
1633
|
_SkyTabsetNavButtonComponent__buttonType = new WeakMap(), _SkyTabsetNavButtonComponent__disabled = new WeakMap(), _SkyTabsetNavButtonComponent__tabset = new WeakMap(), _SkyTabsetNavButtonComponent_activeIndexNumber = new WeakMap(), _SkyTabsetNavButtonComponent_activeSkyTabIndex = new WeakMap(), _SkyTabsetNavButtonComponent_currentTabsetSub = new WeakMap(), _SkyTabsetNavButtonComponent_logger = new WeakMap(), _SkyTabsetNavButtonComponent_tabCount = new WeakMap(), _SkyTabsetNavButtonComponent_tabToSelect = new WeakMap(), _SkyTabsetNavButtonComponent_ngUnsubscribe = new WeakMap(), _SkyTabsetNavButtonComponent_instances = new WeakSet(), _SkyTabsetNavButtonComponent_updateButtonVisibility = function _SkyTabsetNavButtonComponent_updateButtonVisibility() {
|
|
1510
1634
|
const isLastStep = __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") === __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabCount, "f") - 1;
|
|
1511
|
-
if (
|
|
1635
|
+
if (this.buttonType === buttonTypeFinish) {
|
|
1512
1636
|
this.isVisible = isLastStep;
|
|
1513
|
-
return;
|
|
1514
1637
|
}
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
this.isVisible =
|
|
1520
|
-
return;
|
|
1638
|
+
else if (this.buttonType === buttonTypeNext) {
|
|
1639
|
+
this.isVisible = !isLastStep;
|
|
1640
|
+
}
|
|
1641
|
+
else {
|
|
1642
|
+
this.isVisible = true;
|
|
1521
1643
|
}
|
|
1522
|
-
this.isVisible = true;
|
|
1523
1644
|
}, _SkyTabsetNavButtonComponent_updateButtonProperties = function _SkyTabsetNavButtonComponent_updateButtonProperties() {
|
|
1524
|
-
var _a
|
|
1525
|
-
if (
|
|
1526
|
-
|
|
1527
|
-
((_a = __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f")) === null || _a === void 0 ? void 0 : _a.hasFinishButton)) {
|
|
1645
|
+
var _a;
|
|
1646
|
+
if (this.buttonType === buttonTypeNext ||
|
|
1647
|
+
this.buttonType === buttonTypeFinish) {
|
|
1528
1648
|
this.buttonClassName = 'sky-btn-primary';
|
|
1529
1649
|
}
|
|
1530
1650
|
else {
|
|
1531
1651
|
this.buttonClassName = 'sky-btn-default';
|
|
1532
1652
|
}
|
|
1533
|
-
this.ariaControls = (
|
|
1653
|
+
this.ariaControls = (_a = __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabToSelect, "f")) === null || _a === void 0 ? void 0 : _a.tabPanelId;
|
|
1534
1654
|
}, _SkyTabsetNavButtonComponent_updateTabToSelect = function _SkyTabsetNavButtonComponent_updateTabToSelect() {
|
|
1535
1655
|
var _a;
|
|
1536
|
-
if ((_a =
|
|
1537
|
-
const tabs =
|
|
1656
|
+
if ((_a = this.tabset) === null || _a === void 0 ? void 0 : _a.tabs) {
|
|
1657
|
+
const tabs = this.tabset.tabs.toArray();
|
|
1538
1658
|
__classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_tabToSelect, undefined, "f");
|
|
1539
1659
|
// tab index can be a number or a string, but we need the actual number index
|
|
1540
1660
|
__classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, tabs.findIndex((tab) => tab.tabIndex === __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeSkyTabIndex, "f")), "f");
|
|
1541
1661
|
/* istanbul ignore else */
|
|
1542
1662
|
if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") !== undefined) {
|
|
1543
|
-
if (
|
|
1663
|
+
if (this.buttonType === buttonTypeNext) {
|
|
1544
1664
|
__classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_tabToSelect, tabs[__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") + 1], "f");
|
|
1545
1665
|
}
|
|
1546
|
-
else if (
|
|
1666
|
+
else if (this.buttonType === buttonTypePrevious) {
|
|
1547
1667
|
__classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_tabToSelect, tabs[__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") - 1], "f");
|
|
1548
1668
|
}
|
|
1549
1669
|
}
|
|
@@ -1617,7 +1737,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
|
|
|
1617
1737
|
type: Injectable
|
|
1618
1738
|
}] });
|
|
1619
1739
|
|
|
1620
|
-
|
|
1740
|
+
const DEFAULT_ELEMENT_ROLE = 'tablist';
|
|
1621
1741
|
class SkyTabsetComponent {
|
|
1622
1742
|
constructor(changeDetector, elementRef, adapterService, permalinkService, tabsetService) {
|
|
1623
1743
|
this.changeDetector = changeDetector;
|
|
@@ -1647,9 +1767,9 @@ class SkyTabsetComponent {
|
|
|
1647
1767
|
*/
|
|
1648
1768
|
this.tabIndexesChange = new EventEmitter();
|
|
1649
1769
|
this.tabButtons = [];
|
|
1770
|
+
this.elementRole = DEFAULT_ELEMENT_ROLE;
|
|
1650
1771
|
this.ngUnsubscribe = new Subject();
|
|
1651
1772
|
this.tabComponentsStateChangeUnsubscribe = new Subject();
|
|
1652
|
-
_SkyTabsetComponent__hasFinishButton.set(this, false);
|
|
1653
1773
|
}
|
|
1654
1774
|
/**
|
|
1655
1775
|
* Activates a tab by its `tabIndex` property.
|
|
@@ -1705,6 +1825,7 @@ class SkyTabsetComponent {
|
|
|
1705
1825
|
*/
|
|
1706
1826
|
set tabStyle(value) {
|
|
1707
1827
|
this._tabStyle = value;
|
|
1828
|
+
this.elementRole = value === 'tabs' ? DEFAULT_ELEMENT_ROLE : undefined;
|
|
1708
1829
|
}
|
|
1709
1830
|
get tabStyle() {
|
|
1710
1831
|
return this._tabStyle || 'tabs';
|
|
@@ -1716,12 +1837,6 @@ class SkyTabsetComponent {
|
|
|
1716
1837
|
get tabDisplayMode() {
|
|
1717
1838
|
return this._tabDisplayMode || 'tabs';
|
|
1718
1839
|
}
|
|
1719
|
-
get hasFinishButton() {
|
|
1720
|
-
return __classPrivateFieldGet(this, _SkyTabsetComponent__hasFinishButton, "f");
|
|
1721
|
-
}
|
|
1722
|
-
set hasFinishButton(value) {
|
|
1723
|
-
__classPrivateFieldSet(this, _SkyTabsetComponent__hasFinishButton, value, "f");
|
|
1724
|
-
}
|
|
1725
1840
|
ngAfterViewInit() {
|
|
1726
1841
|
this.initTabComponents();
|
|
1727
1842
|
this.listenTabComponentsStructuralChange();
|
|
@@ -1769,6 +1884,18 @@ class SkyTabsetComponent {
|
|
|
1769
1884
|
onOpenTabClick() {
|
|
1770
1885
|
this.openTab.emit();
|
|
1771
1886
|
}
|
|
1887
|
+
onRightKeyDown() {
|
|
1888
|
+
this.tabsetService.focusNextTabBtn(this.tabButtons);
|
|
1889
|
+
}
|
|
1890
|
+
onLeftKeyDown() {
|
|
1891
|
+
this.tabsetService.focusPrevTabBtn(this.tabButtons);
|
|
1892
|
+
}
|
|
1893
|
+
onHomeKeyDown() {
|
|
1894
|
+
this.tabsetService.focusFirstOrNearestTabBtn(this.tabButtons);
|
|
1895
|
+
}
|
|
1896
|
+
onEndKeyDown() {
|
|
1897
|
+
this.tabsetService.focusLastOrNearestTabBtn(this.tabButtons);
|
|
1898
|
+
}
|
|
1772
1899
|
/**
|
|
1773
1900
|
* Sets the initial active tab index based on the following criteria.
|
|
1774
1901
|
* 1. Does the URL include a query param that reflects this tabset's active tab?
|
|
@@ -1967,20 +2094,19 @@ class SkyTabsetComponent {
|
|
|
1967
2094
|
}
|
|
1968
2095
|
}
|
|
1969
2096
|
}
|
|
1970
|
-
_SkyTabsetComponent__hasFinishButton = new WeakMap();
|
|
1971
2097
|
SkyTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SkyTabsetAdapterService }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1972
2098
|
SkyTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTabsetComponent, selector: "sky-tabset", inputs: { active: "active", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", permalinkId: "permalinkId", tabStyle: "tabStyle" }, outputs: { activeChange: "activeChange", newTab: "newTab", openTab: "openTab", tabIndexesChange: "tabIndexesChange" }, providers: [
|
|
1973
2099
|
SkyTabsetAdapterService,
|
|
1974
2100
|
SkyTabsetPermalinkService,
|
|
1975
2101
|
SkyTabsetService,
|
|
1976
|
-
], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<div\n class=\"sky-tabset\"\n role=\"
|
|
2102
|
+
], 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
2103
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTabsetComponent, decorators: [{
|
|
1978
2104
|
type: Component,
|
|
1979
2105
|
args: [{ selector: 'sky-tabset', providers: [
|
|
1980
2106
|
SkyTabsetAdapterService,
|
|
1981
2107
|
SkyTabsetPermalinkService,
|
|
1982
2108
|
SkyTabsetService,
|
|
1983
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"sky-tabset\"\n role=\"
|
|
2109
|
+
], 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
2110
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: SkyTabsetAdapterService }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
|
|
1985
2111
|
type: Input
|
|
1986
2112
|
}], ariaLabel: [{
|