@skyux/tabs 7.19.0 → 7.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/documentation.json +356 -162
- package/esm2020/lib/modules/vertical-tabset/vertical-tabset-group.component.mjs +44 -10
- package/fesm2015/skyux-tabs.mjs +43 -9
- package/fesm2015/skyux-tabs.mjs.map +1 -1
- package/fesm2020/skyux-tabs.mjs +43 -9
- package/fesm2020/skyux-tabs.mjs.map +1 -1
- package/lib/modules/vertical-tabset/vertical-tabset-group.component.d.ts +7 -2
- package/package.json +9 -9
package/fesm2020/skyux-tabs.mjs
CHANGED
|
@@ -604,29 +604,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
|
|
|
604
604
|
args: ['window:resize']
|
|
605
605
|
}] } });
|
|
606
606
|
|
|
607
|
-
var
|
|
607
|
+
var _SkyVerticalTabsetGroupComponent_instances, _SkyVerticalTabsetGroupComponent_ngUnsubscribe, _SkyVerticalTabsetGroupComponent_tabService, _SkyVerticalTabsetGroupComponent_changeRef, _SkyVerticalTabsetGroupComponent__disabled, _SkyVerticalTabsetGroupComponent__open, _SkyVerticalTabsetGroupComponent_updateSlideDirection;
|
|
608
608
|
class SkyVerticalTabsetGroupComponent {
|
|
609
609
|
constructor(tabService, changeRef) {
|
|
610
|
+
_SkyVerticalTabsetGroupComponent_instances.add(this);
|
|
611
|
+
this.animationDisabled = false;
|
|
612
|
+
this.slideDirection = 'up';
|
|
610
613
|
_SkyVerticalTabsetGroupComponent_ngUnsubscribe.set(this, new Subject());
|
|
611
|
-
_SkyVerticalTabsetGroupComponent_openBeforeTabsHidden.set(this, false);
|
|
612
614
|
_SkyVerticalTabsetGroupComponent_tabService.set(this, void 0);
|
|
613
615
|
_SkyVerticalTabsetGroupComponent_changeRef.set(this, void 0);
|
|
616
|
+
_SkyVerticalTabsetGroupComponent__disabled.set(this, void 0);
|
|
617
|
+
_SkyVerticalTabsetGroupComponent__open.set(this, void 0);
|
|
614
618
|
this.tabClicked = () => {
|
|
615
619
|
__classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_changeRef, "f").markForCheck();
|
|
616
620
|
};
|
|
617
621
|
this.tabsHidden = () => {
|
|
618
|
-
//
|
|
619
|
-
|
|
620
|
-
this.open = false;
|
|
622
|
+
// Angular will sometimes place the animation into the "void" state when tabs are hidden. Update our internal variable to reflect that.
|
|
623
|
+
this.slideDirection = 'void';
|
|
621
624
|
__classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_changeRef, "f").markForCheck();
|
|
622
625
|
};
|
|
623
626
|
this.tabsShown = () => {
|
|
624
|
-
|
|
627
|
+
// Set the animation back up so that the "void" state is returned to where it was prior to the tabs being hidden.
|
|
628
|
+
// This will be instantaneous due to there not being a "void -> *" state on the slide animation.
|
|
629
|
+
__classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_instances, "m", _SkyVerticalTabsetGroupComponent_updateSlideDirection).call(this, true);
|
|
625
630
|
__classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_changeRef, "f").markForCheck();
|
|
626
631
|
};
|
|
627
632
|
__classPrivateFieldSet(this, _SkyVerticalTabsetGroupComponent_tabService, tabService, "f");
|
|
628
633
|
__classPrivateFieldSet(this, _SkyVerticalTabsetGroupComponent_changeRef, changeRef, "f");
|
|
629
634
|
}
|
|
635
|
+
/**
|
|
636
|
+
* Whether to disable the ability to expand and collapse the group.
|
|
637
|
+
* @default false
|
|
638
|
+
*/
|
|
639
|
+
set disabled(value) {
|
|
640
|
+
__classPrivateFieldSet(this, _SkyVerticalTabsetGroupComponent__disabled, value, "f");
|
|
641
|
+
__classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_instances, "m", _SkyVerticalTabsetGroupComponent_updateSlideDirection).call(this, false);
|
|
642
|
+
}
|
|
643
|
+
get disabled() {
|
|
644
|
+
return __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent__disabled, "f");
|
|
645
|
+
}
|
|
646
|
+
/**
|
|
647
|
+
* Whether the collapsible group is expanded.
|
|
648
|
+
* @default false
|
|
649
|
+
*/
|
|
650
|
+
set open(value) {
|
|
651
|
+
__classPrivateFieldSet(this, _SkyVerticalTabsetGroupComponent__open, value, "f");
|
|
652
|
+
__classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_instances, "m", _SkyVerticalTabsetGroupComponent_updateSlideDirection).call(this, false);
|
|
653
|
+
}
|
|
654
|
+
get open() {
|
|
655
|
+
return __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent__open, "f");
|
|
656
|
+
}
|
|
630
657
|
ngOnInit() {
|
|
631
658
|
__classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_tabService, "f").hidingTabs
|
|
632
659
|
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_ngUnsubscribe, "f")))
|
|
@@ -642,22 +669,29 @@ class SkyVerticalTabsetGroupComponent {
|
|
|
642
669
|
__classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_ngUnsubscribe, "f").next();
|
|
643
670
|
__classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_ngUnsubscribe, "f").complete();
|
|
644
671
|
}
|
|
672
|
+
updateSlideDirection(event) {
|
|
673
|
+
this.slideDirection = event.toState;
|
|
674
|
+
}
|
|
645
675
|
toggleMenuOpen() {
|
|
646
676
|
if (!this.disabled) {
|
|
647
677
|
this.open = !this.open;
|
|
648
678
|
}
|
|
679
|
+
__classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_instances, "m", _SkyVerticalTabsetGroupComponent_updateSlideDirection).call(this, true);
|
|
649
680
|
__classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_changeRef, "f").markForCheck();
|
|
650
681
|
}
|
|
651
682
|
subMenuOpen() {
|
|
652
683
|
return !!this.tabs && this.tabs.find((t) => !!t.active) !== undefined;
|
|
653
684
|
}
|
|
654
685
|
}
|
|
655
|
-
_SkyVerticalTabsetGroupComponent_ngUnsubscribe = new WeakMap(),
|
|
686
|
+
_SkyVerticalTabsetGroupComponent_ngUnsubscribe = new WeakMap(), _SkyVerticalTabsetGroupComponent_tabService = new WeakMap(), _SkyVerticalTabsetGroupComponent_changeRef = new WeakMap(), _SkyVerticalTabsetGroupComponent__disabled = new WeakMap(), _SkyVerticalTabsetGroupComponent__open = new WeakMap(), _SkyVerticalTabsetGroupComponent_instances = new WeakSet(), _SkyVerticalTabsetGroupComponent_updateSlideDirection = function _SkyVerticalTabsetGroupComponent_updateSlideDirection(animate) {
|
|
687
|
+
this.animationDisabled = !animate;
|
|
688
|
+
this.slideDirection = this.open && !this.disabled ? 'down' : 'up';
|
|
689
|
+
};
|
|
656
690
|
SkyVerticalTabsetGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
657
|
-
SkyVerticalTabsetGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyVerticalTabsetGroupComponent, selector: "sky-vertical-tabset-group", inputs: { disabled: "disabled", groupHeading: "groupHeading", open: "open" }, queries: [{ propertyName: "tabs", predicate: SkyVerticalTabComponent }], ngImport: i0, template: "<div class=\"sky-vertical-tabset-group\">\n <!-- [ngClass] includes font classes for both modern and default styles -->\n <div\n class=\"sky-vertical-tabset-group-header\"\n [ngClass]=\"{\n 'sky-vertical-tabset-group-header-sub-open sky-font-emphasized sky-emphasized':\n subMenuOpen(),\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled,\n 'sky-vertical-tabset-disabled': disabled\n }\"\n [tabIndex]=\"-1\"\n >\n <button\n class=\"sky-padding-even-default\"\n type=\"button\"\n skyId\n [attr.aria-controls]=\"groupContent.id\"\n [attr.aria-expanded]=\"!disabled && open\"\n (click)=\"toggleMenuOpen()\"\n #groupHeadingButton\n >\n {{ groupHeading }}\n <sky-expansion-indicator\n class=\"sky-vertical-tabset-group-expansion-indicator\"\n [direction]=\"!disabled && open ? 'up' : 'down'\"\n >\n </sky-expansion-indicator>\n </button>\n </div>\n <div\n class=\"sky-vertical-tabset-group-content\"\n skyId\n [attr.labelledby]=\"groupHeadingButton.id\"\n [@skyAnimationSlide]=\"
|
|
691
|
+
SkyVerticalTabsetGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyVerticalTabsetGroupComponent, selector: "sky-vertical-tabset-group", inputs: { disabled: "disabled", groupHeading: "groupHeading", open: "open" }, queries: [{ propertyName: "tabs", predicate: SkyVerticalTabComponent }], ngImport: i0, template: "<div class=\"sky-vertical-tabset-group\">\n <!-- [ngClass] includes font classes for both modern and default styles -->\n <div\n class=\"sky-vertical-tabset-group-header\"\n [ngClass]=\"{\n 'sky-vertical-tabset-group-header-sub-open sky-font-emphasized sky-emphasized':\n subMenuOpen(),\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled,\n 'sky-vertical-tabset-disabled': disabled\n }\"\n [tabIndex]=\"-1\"\n >\n <button\n class=\"sky-padding-even-default\"\n type=\"button\"\n skyId\n [attr.aria-controls]=\"groupContent.id\"\n [attr.aria-expanded]=\"!disabled && open\"\n (click)=\"toggleMenuOpen()\"\n #groupHeadingButton\n >\n {{ groupHeading }}\n <sky-expansion-indicator\n class=\"sky-vertical-tabset-group-expansion-indicator\"\n [direction]=\"!disabled && open ? 'up' : 'down'\"\n >\n </sky-expansion-indicator>\n </button>\n </div>\n <div\n class=\"sky-vertical-tabset-group-content\"\n skyId\n [attr.labelledby]=\"groupHeadingButton.id\"\n [@.disabled]=\"animationDisabled\"\n [@skyAnimationSlide]=\"slideDirection\"\n (@skyAnimationSlide.done)=\"updateSlideDirection($event)\"\n #groupContent\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".sky-vertical-tabset-group{border-bottom:1px solid #e2e3e4;margin:5px 0 5px 5px}.sky-vertical-tabset-group-header button{cursor:pointer;display:flex;justify-content:space-between;border:none;width:100%;text-align:left;background:none}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-expansion-indicator>button{font-size:14px!important}.sky-vertical-tabset-disabled{cursor:not-allowed;pointer-events:none}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:10px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:25px}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header{position:relative}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}.sky-theme-modern .sky-vertical-tabset-group{border:none;margin:10px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:25px}.sky-theme-modern .sky-vertical-tabset-group-header{position:relative}.sky-theme-modern .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i6.λ15, selector: "sky-expansion-indicator", inputs: ["direction"] }], animations: [skyAnimationSlide], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
658
692
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyVerticalTabsetGroupComponent, decorators: [{
|
|
659
693
|
type: Component,
|
|
660
|
-
args: [{ selector: 'sky-vertical-tabset-group', changeDetection: ChangeDetectionStrategy.OnPush, animations: [skyAnimationSlide], template: "<div class=\"sky-vertical-tabset-group\">\n <!-- [ngClass] includes font classes for both modern and default styles -->\n <div\n class=\"sky-vertical-tabset-group-header\"\n [ngClass]=\"{\n 'sky-vertical-tabset-group-header-sub-open sky-font-emphasized sky-emphasized':\n subMenuOpen(),\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled,\n 'sky-vertical-tabset-disabled': disabled\n }\"\n [tabIndex]=\"-1\"\n >\n <button\n class=\"sky-padding-even-default\"\n type=\"button\"\n skyId\n [attr.aria-controls]=\"groupContent.id\"\n [attr.aria-expanded]=\"!disabled && open\"\n (click)=\"toggleMenuOpen()\"\n #groupHeadingButton\n >\n {{ groupHeading }}\n <sky-expansion-indicator\n class=\"sky-vertical-tabset-group-expansion-indicator\"\n [direction]=\"!disabled && open ? 'up' : 'down'\"\n >\n </sky-expansion-indicator>\n </button>\n </div>\n <div\n class=\"sky-vertical-tabset-group-content\"\n skyId\n [attr.labelledby]=\"groupHeadingButton.id\"\n [@skyAnimationSlide]=\"
|
|
694
|
+
args: [{ selector: 'sky-vertical-tabset-group', changeDetection: ChangeDetectionStrategy.OnPush, animations: [skyAnimationSlide], template: "<div class=\"sky-vertical-tabset-group\">\n <!-- [ngClass] includes font classes for both modern and default styles -->\n <div\n class=\"sky-vertical-tabset-group-header\"\n [ngClass]=\"{\n 'sky-vertical-tabset-group-header-sub-open sky-font-emphasized sky-emphasized':\n subMenuOpen(),\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled,\n 'sky-vertical-tabset-disabled': disabled\n }\"\n [tabIndex]=\"-1\"\n >\n <button\n class=\"sky-padding-even-default\"\n type=\"button\"\n skyId\n [attr.aria-controls]=\"groupContent.id\"\n [attr.aria-expanded]=\"!disabled && open\"\n (click)=\"toggleMenuOpen()\"\n #groupHeadingButton\n >\n {{ groupHeading }}\n <sky-expansion-indicator\n class=\"sky-vertical-tabset-group-expansion-indicator\"\n [direction]=\"!disabled && open ? 'up' : 'down'\"\n >\n </sky-expansion-indicator>\n </button>\n </div>\n <div\n class=\"sky-vertical-tabset-group-content\"\n skyId\n [attr.labelledby]=\"groupHeadingButton.id\"\n [@.disabled]=\"animationDisabled\"\n [@skyAnimationSlide]=\"slideDirection\"\n (@skyAnimationSlide.done)=\"updateSlideDirection($event)\"\n #groupContent\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".sky-vertical-tabset-group{border-bottom:1px solid #e2e3e4;margin:5px 0 5px 5px}.sky-vertical-tabset-group-header button{cursor:pointer;display:flex;justify-content:space-between;border:none;width:100%;text-align:left;background:none}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-expansion-indicator>button{font-size:14px!important}.sky-vertical-tabset-disabled{cursor:not-allowed;pointer-events:none}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:10px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:25px}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header{position:relative}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}.sky-theme-modern .sky-vertical-tabset-group{border:none;margin:10px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:25px}.sky-theme-modern .sky-vertical-tabset-group-header{position:relative}.sky-theme-modern .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}\n"] }]
|
|
661
695
|
}], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
|
|
662
696
|
type: Input
|
|
663
697
|
}], groupHeading: [{
|