@skyux/tabs 9.0.0-alpha.8 → 9.0.0-beta.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 +901 -946
- package/esm2022/lib/modules/sectioned-form/sectioned-form.component.mjs +3 -3
- package/esm2022/lib/modules/shared/sky-tabs-resources.module.mjs +4 -2
- package/esm2022/lib/modules/tabs/tab.component.mjs +10 -28
- package/esm2022/lib/modules/tabs/tabs.module.mjs +1 -5
- package/esm2022/lib/modules/tabs/tabset-active-tab-change-args.mjs +2 -0
- package/esm2022/lib/modules/tabs/tabset-permalink.service.mjs +11 -4
- package/esm2022/lib/modules/tabs/tabset.component.mjs +23 -13
- package/esm2022/lib/modules/tabs/tabset.service.mjs +20 -25
- package/esm2022/lib/modules/vertical-tabset/vertical-tab.component.mjs +2 -2
- package/fesm2022/skyux-tabs.mjs +68 -76
- package/fesm2022/skyux-tabs.mjs.map +1 -1
- package/lib/modules/tabs/tab.component.d.ts +0 -1
- package/lib/modules/tabs/tabs.module.d.ts +5 -6
- package/lib/modules/tabs/tabset-active-tab-change-args.d.ts +5 -0
- package/lib/modules/tabs/tabset-permalink.service.d.ts +1 -1
- package/lib/modules/tabs/tabset.service.d.ts +6 -5
- package/package.json +9 -9
package/fesm2022/skyux-tabs.mjs
CHANGED
|
@@ -10,16 +10,16 @@ import { SkyMediaBreakpoints, SkyMediaQueryService, SkyIdModule, SkyResizeObserv
|
|
|
10
10
|
import * as i6 from '@skyux/indicators';
|
|
11
11
|
import { SkyIconModule, SkyExpansionIndicatorModule, SkyStatusIndicatorModule } from '@skyux/indicators';
|
|
12
12
|
import * as i3 from '@skyux/i18n';
|
|
13
|
-
import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
13
|
+
import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
14
14
|
import { ReplaySubject, BehaviorSubject, Subject, combineLatest, race } from 'rxjs';
|
|
15
15
|
import { takeUntil, take, distinctUntilChanged } from 'rxjs/operators';
|
|
16
16
|
import { skyAnimationSlide } from '@skyux/animations';
|
|
17
17
|
import { trigger, transition, style, animate } from '@angular/animations';
|
|
18
|
-
import * as i1$1 from '@angular/router';
|
|
19
|
-
import { RouterModule } from '@angular/router';
|
|
20
18
|
import * as i5 from '@skyux/popovers';
|
|
21
19
|
import { SkyDropdownModule } from '@skyux/popovers';
|
|
20
|
+
import * as i1$1 from '@angular/router';
|
|
22
21
|
|
|
22
|
+
/* istanbul ignore file */
|
|
23
23
|
/**
|
|
24
24
|
* NOTICE: DO NOT MODIFY THIS FILE!
|
|
25
25
|
* The contents of this file were automatically generated by
|
|
@@ -45,6 +45,7 @@ const RESOURCES = {
|
|
|
45
45
|
},
|
|
46
46
|
},
|
|
47
47
|
};
|
|
48
|
+
SkyLibResourcesService.addResources(RESOURCES);
|
|
48
49
|
class SkyTabsResourcesProvider {
|
|
49
50
|
getString(localeInfo, name) {
|
|
50
51
|
return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
|
|
@@ -563,7 +564,7 @@ class SkyVerticalTabComponent {
|
|
|
563
564
|
provide: SkyMediaQueryService,
|
|
564
565
|
useExisting: SkyVerticalTabMediaQueryService,
|
|
565
566
|
},
|
|
566
|
-
], viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContentWrapper"], descendants: true }], ngImport: i0, template: "<a\n class=\"sky-vertical-tab\"\n [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\n [attr.aria-selected]=\"active\"\n [attr.id]=\"tabId\"\n [attr.role]=\"isMobile ? undefined : ariaRole\"\n [ngClass]=\"{\n 'sky-vertical-tab-active': active,\n 'sky-vertical-tab-disabled': disabled,\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled\n }\"\n [tabIndex]=\"tabIndex()\"\n (click)=\"activateTab()\"\n (keyup)=\"onTabButtonKeyUp($event)\"\n>\n <div class=\"sky-vertical-tab-display\">\n <div class=\"sky-vertical-tab-heading\">\n <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n <span\n class=\"sky-vertical-tab-count\"\n *ngIf=\"tabHeaderCount || tabHeaderCount === 0\"\n >\n ({{ tabHeaderCount }})\n </span>\n </div>\n <sky-status-indicator\n *ngIf=\"errorIndicator\"\n class=\"sky-vertical-tab-heading-error\"\n descriptionType=\"error\"\n indicatorType=\"danger\"\n ></sky-status-indicator>\n <sky-icon\n *ngIf=\"isMobile && showTabRightArrow\"\n class=\"sky-vertical-tab-right-arrow\"\n icon=\"chevron-right\"\n >\n </sky-icon>\n </div>\n</a>\n\n<div #tabContentWrapper>\n <div\n class=\"sky-vertical-tab-content-pane\"\n role=\"tabpanel\"\n tabindex=\"0\"\n skyId\n [attr.aria-labelledby]=\"tabId\"\n [ngClass]=\"{ 'sky-vertical-tab-hidden': !active }\"\n #tabContentPane\n >\n <ng-content></ng-content>\n\n <div></div>\n </div>\n</div>\n", styles: [".sky-vertical-tab{cursor:pointer;padding:7px 0 7px 10px;margin:5px 0 5px 10px;display:flex;text-decoration:none}.sky-vertical-tab:not(.sky-deemphasized){color:#212327}.sky-vertical-tab:hover{background-color:#eeeeef}.sky-vertical-tab:focus-visible{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:#979ba2}.sky-vertical-tab-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;flex-grow:1}.sky-vertical-tab-heading-error{padding-left:5px}.sky-vertical-tab-count{margin-left:5px}.sky-vertical-tab-disabled{cursor:not-allowed;pointer-events:none}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}:host-context(.sky-theme-modern) .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 15px;margin:15px 0 15px 10px}:host-context(.sky-theme-modern) .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:14px;border-left:1px solid #00b4f1}:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:none;background:none}:host-context(.sky-theme-modern) .sky-vertical-tab:active{border-left:4px solid #00b4f1;color:#212327;padding-left:11px}:host-context(.sky-theme-modern) .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:none;color:#212327;padding-left:11px;border-left:4px solid #1870B8}.sky-theme-modern .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 15px;margin:15px 0 15px 10px}.sky-theme-modern .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:14px;border-left:1px solid #00b4f1}.sky-theme-modern .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-vertical-tab:focus:active:hover{outline:none;background:none}.sky-theme-modern .sky-vertical-tab:active{border-left:4px solid #00b4f1;color:#212327;padding-left:11px}.sky-theme-modern .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}.sky-theme-modern .sky-vertical-tab-active{background:none;color:#212327;padding-left:11px;border-left:4px solid #1870B8}\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: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i6.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
567
|
+
], viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContentWrapper"], descendants: true }], ngImport: i0, template: "<a\n class=\"sky-vertical-tab\"\n [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\n [attr.aria-selected]=\"active\"\n [attr.id]=\"tabId\"\n [attr.role]=\"isMobile ? undefined : ariaRole\"\n [ngClass]=\"{\n 'sky-vertical-tab-active': active,\n 'sky-vertical-tab-disabled': disabled,\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled\n }\"\n [tabIndex]=\"tabIndex()\"\n (click)=\"activateTab()\"\n (keyup)=\"onTabButtonKeyUp($event)\"\n>\n <div class=\"sky-vertical-tab-display\">\n <div class=\"sky-vertical-tab-heading\">\n <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n <span\n class=\"sky-vertical-tab-count\"\n *ngIf=\"tabHeaderCount || tabHeaderCount === 0\"\n >\n ({{ tabHeaderCount }})\n </span>\n </div>\n <sky-status-indicator\n *ngIf=\"errorIndicator\"\n class=\"sky-vertical-tab-heading-error\"\n descriptionType=\"error\"\n indicatorType=\"danger\"\n ></sky-status-indicator>\n <sky-icon\n *ngIf=\"isMobile && showTabRightArrow\"\n class=\"sky-vertical-tab-right-arrow\"\n icon=\"chevron-right\"\n >\n </sky-icon>\n </div>\n</a>\n\n<div #tabContentWrapper>\n <div\n class=\"sky-vertical-tab-content-pane\"\n role=\"tabpanel\"\n tabindex=\"0\"\n skyId\n [attr.aria-labelledby]=\"tabId\"\n [ngClass]=\"{ 'sky-vertical-tab-hidden': !active }\"\n #tabContentPane\n >\n <ng-content></ng-content>\n\n <div></div>\n </div>\n</div>\n", styles: [".sky-vertical-tab{cursor:pointer;padding:7px 0 7px 10px;margin:5px 0 5px 10px;display:flex;text-decoration:none}.sky-vertical-tab:not(.sky-deemphasized){color:#212327}.sky-vertical-tab:hover{background-color:#eeeeef}.sky-vertical-tab:focus-visible{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:#979ba2}.sky-vertical-tab-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;justify-content:space-between;flex-grow:1}.sky-vertical-tab-heading-error{padding-left:5px}.sky-vertical-tab-count{margin-left:5px}.sky-vertical-tab-disabled{cursor:not-allowed;pointer-events:none}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}:host-context(.sky-theme-modern) .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 15px;margin:15px 0 15px 10px}:host-context(.sky-theme-modern) .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:14px;border-left:1px solid #00b4f1}:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:none;background:none}:host-context(.sky-theme-modern) .sky-vertical-tab:active{border-left:4px solid #00b4f1;color:#212327;padding-left:11px}:host-context(.sky-theme-modern) .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:none;color:#212327;padding-left:11px;border-left:4px solid #1870B8}.sky-theme-modern .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 15px;margin:15px 0 15px 10px}.sky-theme-modern .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:14px;border-left:1px solid #00b4f1}.sky-theme-modern .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-vertical-tab:focus:active:hover{outline:none;background:none}.sky-theme-modern .sky-vertical-tab:active{border-left:4px solid #00b4f1;color:#212327;padding-left:11px}.sky-theme-modern .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}.sky-theme-modern .sky-vertical-tab-active{background:none;color:#212327;padding-left:11px;border-left:4px solid #1870B8}:host-context(.sky-sectioned-form-tabs-only) .sky-vertical-tab{margin-left:0}\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: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i6.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
567
568
|
}
|
|
568
569
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyVerticalTabComponent, decorators: [{
|
|
569
570
|
type: Component,
|
|
@@ -573,7 +574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
|
|
|
573
574
|
provide: SkyMediaQueryService,
|
|
574
575
|
useExisting: SkyVerticalTabMediaQueryService,
|
|
575
576
|
},
|
|
576
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n class=\"sky-vertical-tab\"\n [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\n [attr.aria-selected]=\"active\"\n [attr.id]=\"tabId\"\n [attr.role]=\"isMobile ? undefined : ariaRole\"\n [ngClass]=\"{\n 'sky-vertical-tab-active': active,\n 'sky-vertical-tab-disabled': disabled,\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled\n }\"\n [tabIndex]=\"tabIndex()\"\n (click)=\"activateTab()\"\n (keyup)=\"onTabButtonKeyUp($event)\"\n>\n <div class=\"sky-vertical-tab-display\">\n <div class=\"sky-vertical-tab-heading\">\n <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n <span\n class=\"sky-vertical-tab-count\"\n *ngIf=\"tabHeaderCount || tabHeaderCount === 0\"\n >\n ({{ tabHeaderCount }})\n </span>\n </div>\n <sky-status-indicator\n *ngIf=\"errorIndicator\"\n class=\"sky-vertical-tab-heading-error\"\n descriptionType=\"error\"\n indicatorType=\"danger\"\n ></sky-status-indicator>\n <sky-icon\n *ngIf=\"isMobile && showTabRightArrow\"\n class=\"sky-vertical-tab-right-arrow\"\n icon=\"chevron-right\"\n >\n </sky-icon>\n </div>\n</a>\n\n<div #tabContentWrapper>\n <div\n class=\"sky-vertical-tab-content-pane\"\n role=\"tabpanel\"\n tabindex=\"0\"\n skyId\n [attr.aria-labelledby]=\"tabId\"\n [ngClass]=\"{ 'sky-vertical-tab-hidden': !active }\"\n #tabContentPane\n >\n <ng-content></ng-content>\n\n <div></div>\n </div>\n</div>\n", styles: [".sky-vertical-tab{cursor:pointer;padding:7px 0 7px 10px;margin:5px 0 5px 10px;display:flex;text-decoration:none}.sky-vertical-tab:not(.sky-deemphasized){color:#212327}.sky-vertical-tab:hover{background-color:#eeeeef}.sky-vertical-tab:focus-visible{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:#979ba2}.sky-vertical-tab-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;flex-grow:1}.sky-vertical-tab-heading-error{padding-left:5px}.sky-vertical-tab-count{margin-left:5px}.sky-vertical-tab-disabled{cursor:not-allowed;pointer-events:none}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}:host-context(.sky-theme-modern) .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 15px;margin:15px 0 15px 10px}:host-context(.sky-theme-modern) .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:14px;border-left:1px solid #00b4f1}:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:none;background:none}:host-context(.sky-theme-modern) .sky-vertical-tab:active{border-left:4px solid #00b4f1;color:#212327;padding-left:11px}:host-context(.sky-theme-modern) .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:none;color:#212327;padding-left:11px;border-left:4px solid #1870B8}.sky-theme-modern .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 15px;margin:15px 0 15px 10px}.sky-theme-modern .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:14px;border-left:1px solid #00b4f1}.sky-theme-modern .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-vertical-tab:focus:active:hover{outline:none;background:none}.sky-theme-modern .sky-vertical-tab:active{border-left:4px solid #00b4f1;color:#212327;padding-left:11px}.sky-theme-modern .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}.sky-theme-modern .sky-vertical-tab-active{background:none;color:#212327;padding-left:11px;border-left:4px solid #1870B8}\n"] }]
|
|
577
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n class=\"sky-vertical-tab\"\n [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\n [attr.aria-selected]=\"active\"\n [attr.id]=\"tabId\"\n [attr.role]=\"isMobile ? undefined : ariaRole\"\n [ngClass]=\"{\n 'sky-vertical-tab-active': active,\n 'sky-vertical-tab-disabled': disabled,\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled\n }\"\n [tabIndex]=\"tabIndex()\"\n (click)=\"activateTab()\"\n (keyup)=\"onTabButtonKeyUp($event)\"\n>\n <div class=\"sky-vertical-tab-display\">\n <div class=\"sky-vertical-tab-heading\">\n <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n <span\n class=\"sky-vertical-tab-count\"\n *ngIf=\"tabHeaderCount || tabHeaderCount === 0\"\n >\n ({{ tabHeaderCount }})\n </span>\n </div>\n <sky-status-indicator\n *ngIf=\"errorIndicator\"\n class=\"sky-vertical-tab-heading-error\"\n descriptionType=\"error\"\n indicatorType=\"danger\"\n ></sky-status-indicator>\n <sky-icon\n *ngIf=\"isMobile && showTabRightArrow\"\n class=\"sky-vertical-tab-right-arrow\"\n icon=\"chevron-right\"\n >\n </sky-icon>\n </div>\n</a>\n\n<div #tabContentWrapper>\n <div\n class=\"sky-vertical-tab-content-pane\"\n role=\"tabpanel\"\n tabindex=\"0\"\n skyId\n [attr.aria-labelledby]=\"tabId\"\n [ngClass]=\"{ 'sky-vertical-tab-hidden': !active }\"\n #tabContentPane\n >\n <ng-content></ng-content>\n\n <div></div>\n </div>\n</div>\n", styles: [".sky-vertical-tab{cursor:pointer;padding:7px 0 7px 10px;margin:5px 0 5px 10px;display:flex;text-decoration:none}.sky-vertical-tab:not(.sky-deemphasized){color:#212327}.sky-vertical-tab:hover{background-color:#eeeeef}.sky-vertical-tab:focus-visible{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:#979ba2}.sky-vertical-tab-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;justify-content:space-between;flex-grow:1}.sky-vertical-tab-heading-error{padding-left:5px}.sky-vertical-tab-count{margin-left:5px}.sky-vertical-tab-disabled{cursor:not-allowed;pointer-events:none}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}:host-context(.sky-theme-modern) .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 15px;margin:15px 0 15px 10px}:host-context(.sky-theme-modern) .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:14px;border-left:1px solid #00b4f1}:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:none;background:none}:host-context(.sky-theme-modern) .sky-vertical-tab:active{border-left:4px solid #00b4f1;color:#212327;padding-left:11px}:host-context(.sky-theme-modern) .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:none;color:#212327;padding-left:11px;border-left:4px solid #1870B8}.sky-theme-modern .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 15px;margin:15px 0 15px 10px}.sky-theme-modern .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:14px;border-left:1px solid #00b4f1}.sky-theme-modern .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-vertical-tab:focus:active:hover{outline:none;background:none}.sky-theme-modern .sky-vertical-tab:active{border-left:4px solid #00b4f1;color:#212327;padding-left:11px}.sky-theme-modern .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}.sky-theme-modern .sky-vertical-tab-active{background:none;color:#212327;padding-left:11px;border-left:4px solid #1870B8}:host-context(.sky-sectioned-form-tabs-only) .sky-vertical-tab{margin-left:0}\n"] }]
|
|
577
578
|
}], ctorParameters: function () { return [{ type: SkyVerticalTabsetAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyVerticalTabsetService }, { type: SkyVerticalTabMediaQueryService }, { type: SkyTabIdService, decorators: [{
|
|
578
579
|
type: Optional
|
|
579
580
|
}] }]; }, propDecorators: { active: [{
|
|
@@ -1115,7 +1116,7 @@ class SkySectionedFormComponent {
|
|
|
1115
1116
|
});
|
|
1116
1117
|
}
|
|
1117
1118
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }, { token: SkyTabIdService }, { token: i1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1118
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: { maintainSectionContent: "maintainSectionContent", messageStream: "messageStream" }, outputs: { indexChanged: "indexChanged", tabsVisibleChanged: "tabsVisibleChanged" }, providers: [SkyTabIdService, SkyVerticalTabsetService], viewQueries: [{ propertyName: "content", first: true, predicate: ["skySectionSideContent"], descendants: true }], ngImport: i0, template: "<div class=\"sky-sectioned-form\" (window:resize)=\"tabService.updateContent()\">\n <!--\n ARIA rules do not allow tabpanel elements to be children of a tablist element.\n However, the markup for each sky-vertical-tab component includes both the tab button\n and its panel, making the panel element a child of its tablist. Moreover, our\n sky-vertical-tab components can be grouped within collapsible containers, which also\n violates accessibility rules because only tab buttons can be children of a tablist.\n To address this, we create an empty tablist element with an aria-owns attribute,\n pointing to each tab element individually. That way, we don't have to worry about the\n structure for each sky-vertical-tab component in order to satisfy accessibility\n guidelines.\n -->\n <span\n aria-orientation=\"vertical\"\n [attr.aria-owns]=\"ariaOwns\"\n [attr.role]=\"ariaRole\"\n ></span>\n <div\n *ngIf=\"maintainSectionContent || tabsVisible()\"\n class=\"sky-sectioned-form-tabs\"\n [ngClass]=\"{
|
|
1119
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: { maintainSectionContent: "maintainSectionContent", messageStream: "messageStream" }, outputs: { indexChanged: "indexChanged", tabsVisibleChanged: "tabsVisibleChanged" }, providers: [SkyTabIdService, SkyVerticalTabsetService], viewQueries: [{ propertyName: "content", first: true, predicate: ["skySectionSideContent"], descendants: true }], ngImport: i0, template: "<div class=\"sky-sectioned-form\" (window:resize)=\"tabService.updateContent()\">\n <!--\n ARIA rules do not allow tabpanel elements to be children of a tablist element.\n However, the markup for each sky-vertical-tab component includes both the tab button\n and its panel, making the panel element a child of its tablist. Moreover, our\n sky-vertical-tab components can be grouped within collapsible containers, which also\n violates accessibility rules because only tab buttons can be children of a tablist.\n To address this, we create an empty tablist element with an aria-owns attribute,\n pointing to each tab element individually. That way, we don't have to worry about the\n structure for each sky-vertical-tab component in order to satisfy accessibility\n guidelines.\n -->\n <span\n aria-orientation=\"vertical\"\n [attr.aria-owns]=\"ariaOwns\"\n [attr.role]=\"ariaRole\"\n ></span>\n <div\n *ngIf=\"maintainSectionContent || tabsVisible()\"\n class=\"sky-sectioned-form-tabs\"\n [ngClass]=\"{\n 'sky-sectioned-form-tabs-hidden': !tabsVisible(),\n 'sky-sectioned-form-tabs-only': !tabService.contentVisible()\n }\"\n [@tabEnter]=\"tabService.animationTabsVisibleState\"\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainSectionContent || tabService.contentVisible()\"\n class=\"sky-sectioned-form-content\"\n [ngClass]=\"{\n 'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n #skySectionSideContent\n ></div>\n</div>\n", styles: [":host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible}:host .sky-sectioned-form-tabs+.sky-sectioned-form-content{border-left:1px solid var(--sky-border-color-neutral-medium)}:host .sky-sectioned-form-content{padding:var(--sky-padding-even-md) var(--sky-padding-even-xl)}:host .sky-sectioned-form-tabs-only{padding:var(--sky-padding-even-md)}:host-context(.sky-responsive-container-xs) .sky-sectioned-form,:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:block;max-height:none}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs+.sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs+.sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs+.sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs+.sky-sectioned-form-content{border-left:1px solid var(--sky-border-color-neutral-medium)}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{padding:var(--sky-padding-even-md) var(--sky-padding-even-xl)}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs-only,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs-only,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs-only,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs-only{padding:var(--sky-padding-even-md)}@media (min-width: 768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex-basis:70%;overflow-y:auto}:host .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}}:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:flex;max-height:100%}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:70%;overflow-y:auto}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}.sky-sectioned-form-tabs-hidden,.sky-sectioned-form-content-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
1119
1120
|
trigger('tabEnter', [
|
|
1120
1121
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
1121
1122
|
style({ transform: 'translate(-100%)' }),
|
|
@@ -1145,7 +1146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
|
|
|
1145
1146
|
animate('150ms ease-in'),
|
|
1146
1147
|
]),
|
|
1147
1148
|
]),
|
|
1148
|
-
], template: "<div class=\"sky-sectioned-form\" (window:resize)=\"tabService.updateContent()\">\n <!--\n ARIA rules do not allow tabpanel elements to be children of a tablist element.\n However, the markup for each sky-vertical-tab component includes both the tab button\n and its panel, making the panel element a child of its tablist. Moreover, our\n sky-vertical-tab components can be grouped within collapsible containers, which also\n violates accessibility rules because only tab buttons can be children of a tablist.\n To address this, we create an empty tablist element with an aria-owns attribute,\n pointing to each tab element individually. That way, we don't have to worry about the\n structure for each sky-vertical-tab component in order to satisfy accessibility\n guidelines.\n -->\n <span\n aria-orientation=\"vertical\"\n [attr.aria-owns]=\"ariaOwns\"\n [attr.role]=\"ariaRole\"\n ></span>\n <div\n *ngIf=\"maintainSectionContent || tabsVisible()\"\n class=\"sky-sectioned-form-tabs\"\n [ngClass]=\"{
|
|
1149
|
+
], template: "<div class=\"sky-sectioned-form\" (window:resize)=\"tabService.updateContent()\">\n <!--\n ARIA rules do not allow tabpanel elements to be children of a tablist element.\n However, the markup for each sky-vertical-tab component includes both the tab button\n and its panel, making the panel element a child of its tablist. Moreover, our\n sky-vertical-tab components can be grouped within collapsible containers, which also\n violates accessibility rules because only tab buttons can be children of a tablist.\n To address this, we create an empty tablist element with an aria-owns attribute,\n pointing to each tab element individually. That way, we don't have to worry about the\n structure for each sky-vertical-tab component in order to satisfy accessibility\n guidelines.\n -->\n <span\n aria-orientation=\"vertical\"\n [attr.aria-owns]=\"ariaOwns\"\n [attr.role]=\"ariaRole\"\n ></span>\n <div\n *ngIf=\"maintainSectionContent || tabsVisible()\"\n class=\"sky-sectioned-form-tabs\"\n [ngClass]=\"{\n 'sky-sectioned-form-tabs-hidden': !tabsVisible(),\n 'sky-sectioned-form-tabs-only': !tabService.contentVisible()\n }\"\n [@tabEnter]=\"tabService.animationTabsVisibleState\"\n >\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"maintainSectionContent || tabService.contentVisible()\"\n class=\"sky-sectioned-form-content\"\n [ngClass]=\"{\n 'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n #skySectionSideContent\n ></div>\n</div>\n", styles: [":host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible}:host .sky-sectioned-form-tabs+.sky-sectioned-form-content{border-left:1px solid var(--sky-border-color-neutral-medium)}:host .sky-sectioned-form-content{padding:var(--sky-padding-even-md) var(--sky-padding-even-xl)}:host .sky-sectioned-form-tabs-only{padding:var(--sky-padding-even-md)}:host-context(.sky-responsive-container-xs) .sky-sectioned-form,:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:block;max-height:none}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs+.sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs+.sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs+.sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs+.sky-sectioned-form-content{border-left:1px solid var(--sky-border-color-neutral-medium)}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{padding:var(--sky-padding-even-md) var(--sky-padding-even-xl)}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs-only,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs-only,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs-only,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs-only{padding:var(--sky-padding-even-md)}@media (min-width: 768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex-basis:70%;overflow-y:auto}:host .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}}:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:flex;max-height:100%}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:70%;overflow-y:auto}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}.sky-sectioned-form-tabs-hidden,.sky-sectioned-form-content-hidden{display:none}\n"] }]
|
|
1149
1150
|
}], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }, { type: SkyTabIdService }, { type: i1.SkyLogService }]; }, propDecorators: { maintainSectionContent: [{
|
|
1150
1151
|
type: Input
|
|
1151
1152
|
}], messageStream: [{
|
|
@@ -1202,19 +1203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
|
|
|
1202
1203
|
* @internal
|
|
1203
1204
|
*/
|
|
1204
1205
|
class SkyTabsetService {
|
|
1205
|
-
|
|
1206
|
-
return this.#activeTabUnregistered;
|
|
1207
|
-
}
|
|
1208
|
-
get activeTabIndex() {
|
|
1209
|
-
return this.#activeTabIndex;
|
|
1210
|
-
}
|
|
1211
|
-
get focusedTabBtnIndex() {
|
|
1212
|
-
return this.#focusedTabBtnIndex;
|
|
1213
|
-
}
|
|
1214
|
-
get activeTabLayout() {
|
|
1215
|
-
return this.#activeTabLayout;
|
|
1216
|
-
}
|
|
1217
|
-
#activeTabIndex;
|
|
1206
|
+
#activeTabChange;
|
|
1218
1207
|
#focusedTabBtnIndex;
|
|
1219
1208
|
#activeTabUnregistered;
|
|
1220
1209
|
#activeTabLayout;
|
|
@@ -1223,16 +1212,21 @@ class SkyTabsetService {
|
|
|
1223
1212
|
constructor() {
|
|
1224
1213
|
this.currentActiveTabIndex = 0;
|
|
1225
1214
|
this.currentFocusedTabBtnIndex = 0;
|
|
1226
|
-
this.#activeTabLayout = new Subject();
|
|
1227
1215
|
this.#tabs = [];
|
|
1228
1216
|
this.#tabCounter = 0;
|
|
1229
|
-
this.#
|
|
1230
|
-
|
|
1231
|
-
|
|
1217
|
+
this.#activeTabChange = new BehaviorSubject({
|
|
1218
|
+
tabIndex: 0,
|
|
1219
|
+
});
|
|
1220
|
+
this.#activeTabLayout = new Subject();
|
|
1221
|
+
this.#activeTabUnregistered = new Subject();
|
|
1232
1222
|
this.#focusedTabBtnIndex = new Subject();
|
|
1223
|
+
this.activeTabChange = this.#activeTabChange.asObservable();
|
|
1224
|
+
this.activeTabLayout = this.#activeTabLayout.asObservable();
|
|
1225
|
+
this.activeTabUnregistered = this.#activeTabUnregistered.asObservable();
|
|
1226
|
+
this.focusedTabBtnIndex = this.#focusedTabBtnIndex.asObservable();
|
|
1233
1227
|
}
|
|
1234
1228
|
ngOnDestroy() {
|
|
1235
|
-
this.#
|
|
1229
|
+
this.#activeTabChange.complete();
|
|
1236
1230
|
this.#activeTabUnregistered.complete();
|
|
1237
1231
|
this.#focusedTabBtnIndex.complete();
|
|
1238
1232
|
this.#activeTabLayout.complete();
|
|
@@ -1243,14 +1237,14 @@ class SkyTabsetService {
|
|
|
1243
1237
|
setActiveTabIndex(value, config = {
|
|
1244
1238
|
emitChange: true,
|
|
1245
1239
|
}) {
|
|
1246
|
-
if (value !== undefined &&
|
|
1247
|
-
!this.tabIndexesEqual(value, this.currentActiveTabIndex)) {
|
|
1248
|
-
this.currentActiveTabIndex = value;
|
|
1240
|
+
if (value.tabIndex !== undefined &&
|
|
1241
|
+
!this.tabIndexesEqual(value.tabIndex, this.currentActiveTabIndex)) {
|
|
1242
|
+
this.currentActiveTabIndex = value.tabIndex;
|
|
1249
1243
|
/* istanbul ignore else */
|
|
1250
1244
|
if (config.emitChange) {
|
|
1251
|
-
this.#
|
|
1245
|
+
this.#activeTabChange.next(value);
|
|
1252
1246
|
}
|
|
1253
|
-
this.setFocusedTabBtnIndex(value);
|
|
1247
|
+
this.setFocusedTabBtnIndex(value.tabIndex);
|
|
1254
1248
|
}
|
|
1255
1249
|
}
|
|
1256
1250
|
focusNextTabBtn(tabButtons) {
|
|
@@ -1355,7 +1349,9 @@ class SkyTabsetService {
|
|
|
1355
1349
|
activateFirstTab() {
|
|
1356
1350
|
const firstTabIndex = this.#tabs[0] && this.#tabs[0].tabIndex;
|
|
1357
1351
|
if (firstTabIndex !== undefined) {
|
|
1358
|
-
this.setActiveTabIndex(
|
|
1352
|
+
this.setActiveTabIndex({
|
|
1353
|
+
tabIndex: firstTabIndex,
|
|
1354
|
+
});
|
|
1359
1355
|
return firstTabIndex;
|
|
1360
1356
|
}
|
|
1361
1357
|
return undefined;
|
|
@@ -1583,7 +1579,7 @@ class SkyTabsetPermalinkService {
|
|
|
1583
1579
|
/**
|
|
1584
1580
|
* Sets the value of a URL query param.
|
|
1585
1581
|
*/
|
|
1586
|
-
setParam(name, value) {
|
|
1582
|
+
setParam(name, value, initial) {
|
|
1587
1583
|
const params = this.#getParams();
|
|
1588
1584
|
if (value === null) {
|
|
1589
1585
|
delete params[name];
|
|
@@ -1604,13 +1600,20 @@ class SkyTabsetPermalinkService {
|
|
|
1604
1600
|
if (this.#location.isCurrentPathEqualTo(url)) {
|
|
1605
1601
|
return;
|
|
1606
1602
|
}
|
|
1607
|
-
|
|
1603
|
+
// Use `replaceState()` when the tabset is being initialized so an extra
|
|
1604
|
+
// history item isn't added to the browser's back stack.
|
|
1605
|
+
this.#location[initial ? 'replaceState' : 'go'](url);
|
|
1608
1606
|
}
|
|
1609
1607
|
/**
|
|
1610
1608
|
* Removes the provided query param from the URL.
|
|
1611
1609
|
*/
|
|
1612
1610
|
clearParam(name) {
|
|
1613
|
-
|
|
1611
|
+
// Don't overwrite the URL while the Angular router is in the process
|
|
1612
|
+
// of navigating (e.g. when the tabset is destroyed due to navigating
|
|
1613
|
+
// away from the current page).
|
|
1614
|
+
if (!this.#router.getCurrentNavigation()) {
|
|
1615
|
+
this.setParam(name, null);
|
|
1616
|
+
}
|
|
1614
1617
|
}
|
|
1615
1618
|
/**
|
|
1616
1619
|
* Returns a relative URL that includes the provided query parameter. The value is intended to be
|
|
@@ -1746,7 +1749,6 @@ class SkyTabComponent {
|
|
|
1746
1749
|
const layout = value || LAYOUT_DEFAULT;
|
|
1747
1750
|
this.#_layout = layout;
|
|
1748
1751
|
this.cssClass = `${LAYOUT_CLASS_PREFIX}${layout}`;
|
|
1749
|
-
this.#observeTabResize();
|
|
1750
1752
|
if (this.active) {
|
|
1751
1753
|
this.#tabsetService.updateActiveTabLayout(layout);
|
|
1752
1754
|
}
|
|
@@ -1764,11 +1766,15 @@ class SkyTabComponent {
|
|
|
1764
1766
|
return this.#tabIndexChange;
|
|
1765
1767
|
}
|
|
1766
1768
|
set tabContentWrapper(tabContentWrapper) {
|
|
1767
|
-
|
|
1768
|
-
|
|
1769
|
-
|
|
1770
|
-
|
|
1771
|
-
|
|
1769
|
+
/* istanbul ignore else */
|
|
1770
|
+
if (tabContentWrapper) {
|
|
1771
|
+
this.#mediaQueryService.observe(tabContentWrapper, {
|
|
1772
|
+
updateResponsiveClasses: true,
|
|
1773
|
+
});
|
|
1774
|
+
}
|
|
1775
|
+
else {
|
|
1776
|
+
this.#mediaQueryService.unobserve();
|
|
1777
|
+
}
|
|
1772
1778
|
}
|
|
1773
1779
|
#_active;
|
|
1774
1780
|
#activeChange;
|
|
@@ -1777,9 +1783,7 @@ class SkyTabComponent {
|
|
|
1777
1783
|
#_tabHeading;
|
|
1778
1784
|
#_tabIndex;
|
|
1779
1785
|
#_layout;
|
|
1780
|
-
#_tabElement;
|
|
1781
1786
|
#tabIndexChange;
|
|
1782
|
-
#observingTab;
|
|
1783
1787
|
#changeDetector;
|
|
1784
1788
|
#permalinkService;
|
|
1785
1789
|
#tabsetService;
|
|
@@ -1795,7 +1799,6 @@ class SkyTabComponent {
|
|
|
1795
1799
|
this.showContent = false;
|
|
1796
1800
|
this.#_active = false;
|
|
1797
1801
|
this.#_layout = LAYOUT_DEFAULT;
|
|
1798
|
-
this.#observingTab = false;
|
|
1799
1802
|
this.#mediaQueryService = inject(SkyResizeObserverMediaQueryService);
|
|
1800
1803
|
this.#changeDetector = changeDetector;
|
|
1801
1804
|
this.#permalinkService = permalinkService;
|
|
@@ -1816,9 +1819,6 @@ class SkyTabComponent {
|
|
|
1816
1819
|
(changes['permalinkValue'] && !changes['permalinkValue'].firstChange)) {
|
|
1817
1820
|
this.#stateChange.next();
|
|
1818
1821
|
}
|
|
1819
|
-
if (changes['layout'] && changes['layout'].currentValue === 'none') {
|
|
1820
|
-
this.#mediaQueryService.unobserve();
|
|
1821
|
-
}
|
|
1822
1822
|
}
|
|
1823
1823
|
ngOnDestroy() {
|
|
1824
1824
|
this.#activeChange.complete();
|
|
@@ -1828,7 +1828,6 @@ class SkyTabComponent {
|
|
|
1828
1828
|
this.#tabsetService.unregisterTab(this.tabIndex);
|
|
1829
1829
|
}
|
|
1830
1830
|
this.#mediaQueryService.unobserve();
|
|
1831
|
-
this.#observingTab = false;
|
|
1832
1831
|
}
|
|
1833
1832
|
init() {
|
|
1834
1833
|
this.#_tabIndex = this.#tabsetService.registerTab(this.tabIndex);
|
|
@@ -1851,20 +1850,6 @@ class SkyTabComponent {
|
|
|
1851
1850
|
this.#permalinkService.urlify(this.permalinkValue) ||
|
|
1852
1851
|
this.#permalinkService.urlify(this.tabHeading);
|
|
1853
1852
|
}
|
|
1854
|
-
#observeTabResize() {
|
|
1855
|
-
if (this.tabContentWrapper) {
|
|
1856
|
-
if (this.layout !== 'none' && !this.#observingTab) {
|
|
1857
|
-
this.#observingTab = true;
|
|
1858
|
-
this.#mediaQueryService.observe(this.tabContentWrapper, {
|
|
1859
|
-
updateResponsiveClasses: true,
|
|
1860
|
-
});
|
|
1861
|
-
}
|
|
1862
|
-
else if (this.layout === 'none' && this.#observingTab) {
|
|
1863
|
-
this.#observingTab = false;
|
|
1864
|
-
this.#mediaQueryService.unobserve();
|
|
1865
|
-
}
|
|
1866
|
-
}
|
|
1867
|
-
}
|
|
1868
1853
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyTabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1869
1854
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyTabComponent, selector: "sky-tab", inputs: { active: "active", disabled: "disabled", permalinkValue: "permalinkValue", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", tabIndex: "tabIndex", layout: "layout" }, outputs: { close: "close" }, host: { properties: { "class": "this.cssClass" } }, providers: [
|
|
1870
1855
|
SkyResizeObserverMediaQueryService,
|
|
@@ -2144,7 +2129,7 @@ class SkyTabsetComponent {
|
|
|
2144
2129
|
}
|
|
2145
2130
|
this.#_active = value;
|
|
2146
2131
|
if (this.tabs) {
|
|
2147
|
-
this.#tabsetService.setActiveTabIndex(value);
|
|
2132
|
+
this.#tabsetService.setActiveTabIndex({ tabIndex: value });
|
|
2148
2133
|
}
|
|
2149
2134
|
else {
|
|
2150
2135
|
// On init, wait for children tabs to render before broadcasting the active tab index.
|
|
@@ -2152,7 +2137,7 @@ class SkyTabsetComponent {
|
|
|
2152
2137
|
if (this.#tabsetService.isValidTabIndex(value)) {
|
|
2153
2138
|
// On init, yield to the permalink ID, if it exists.
|
|
2154
2139
|
if (this.#getActiveTabIndexByPermalinkId() === undefined) {
|
|
2155
|
-
this.#tabsetService.setActiveTabIndex(value);
|
|
2140
|
+
this.#tabsetService.setActiveTabIndex({ tabIndex: value });
|
|
2156
2141
|
}
|
|
2157
2142
|
}
|
|
2158
2143
|
else {
|
|
@@ -2268,7 +2253,10 @@ class SkyTabsetComponent {
|
|
|
2268
2253
|
ngAfterViewInit() {
|
|
2269
2254
|
this.#initTabComponents();
|
|
2270
2255
|
const initialTabIndex = this.#getInitialTabIndex();
|
|
2271
|
-
this.#tabsetService.setActiveTabIndex(
|
|
2256
|
+
this.#tabsetService.setActiveTabIndex({
|
|
2257
|
+
tabIndex: initialTabIndex,
|
|
2258
|
+
initial: true,
|
|
2259
|
+
});
|
|
2272
2260
|
this.#listenTabButtonsOverflowChange();
|
|
2273
2261
|
this.#listenLocationPopStateChange();
|
|
2274
2262
|
// If the currently active tab is getting unregistered, activate the next one.
|
|
@@ -2310,7 +2298,7 @@ class SkyTabsetComponent {
|
|
|
2310
2298
|
tabComponent?.close.emit();
|
|
2311
2299
|
}
|
|
2312
2300
|
onTabButtonClick(tabButton) {
|
|
2313
|
-
this.#tabsetService.setActiveTabIndex(tabButton.tabIndex);
|
|
2301
|
+
this.#tabsetService.setActiveTabIndex({ tabIndex: tabButton.tabIndex });
|
|
2314
2302
|
}
|
|
2315
2303
|
onNewTabClick() {
|
|
2316
2304
|
this.newTab.emit();
|
|
@@ -2347,10 +2335,10 @@ class SkyTabsetComponent {
|
|
|
2347
2335
|
return activeIndex;
|
|
2348
2336
|
}
|
|
2349
2337
|
#listenActiveIndexChange() {
|
|
2350
|
-
this.#tabsetService.
|
|
2338
|
+
this.#tabsetService.activeTabChange
|
|
2351
2339
|
.pipe(distinctUntilChanged(), takeUntil(this.#ngUnsubscribe))
|
|
2352
|
-
.subscribe((
|
|
2353
|
-
this.#updateTabsetComponent(
|
|
2340
|
+
.subscribe((tabChange) => {
|
|
2341
|
+
this.#updateTabsetComponent(tabChange.tabIndex, false, tabChange.initial);
|
|
2354
2342
|
const activeTab = this.#getActiveTabComponent();
|
|
2355
2343
|
this.#updateLayout(activeTab?.layout);
|
|
2356
2344
|
});
|
|
@@ -2371,7 +2359,7 @@ class SkyTabsetComponent {
|
|
|
2371
2359
|
// Wait for the tab components to render changes before finding the active one.
|
|
2372
2360
|
setTimeout(() => {
|
|
2373
2361
|
const tabIndex = this.#getActiveTabComponent()?.tabIndex;
|
|
2374
|
-
this.#tabsetService.setActiveTabIndex(tabIndex);
|
|
2362
|
+
this.#tabsetService.setActiveTabIndex({ tabIndex });
|
|
2375
2363
|
});
|
|
2376
2364
|
});
|
|
2377
2365
|
combineLatest(this.tabs.map((tab) => tab.tabIndexChange))
|
|
@@ -2409,7 +2397,9 @@ class SkyTabsetComponent {
|
|
|
2409
2397
|
}
|
|
2410
2398
|
this.#initTabComponents();
|
|
2411
2399
|
const activeIndex = this.#getActiveTabComponent()?.tabIndex;
|
|
2412
|
-
this.#tabsetService.setActiveTabIndex(
|
|
2400
|
+
this.#tabsetService.setActiveTabIndex({
|
|
2401
|
+
tabIndex: activeIndex,
|
|
2402
|
+
}, {
|
|
2413
2403
|
emitChange: false,
|
|
2414
2404
|
});
|
|
2415
2405
|
this.#listenTabComponentsStateChange();
|
|
@@ -2448,7 +2438,9 @@ class SkyTabsetComponent {
|
|
|
2448
2438
|
}
|
|
2449
2439
|
#setActiveTabIndexByPermalinkId() {
|
|
2450
2440
|
const activeIndex = this.#getActiveTabIndexByPermalinkId();
|
|
2451
|
-
this.#tabsetService.setActiveTabIndex(
|
|
2441
|
+
this.#tabsetService.setActiveTabIndex({
|
|
2442
|
+
tabIndex: activeIndex,
|
|
2443
|
+
});
|
|
2452
2444
|
}
|
|
2453
2445
|
#getActiveTabIndexByPermalinkId() {
|
|
2454
2446
|
if (this.permalinkId) {
|
|
@@ -2501,8 +2493,11 @@ class SkyTabsetComponent {
|
|
|
2501
2493
|
* Setting this value to `false` will simply update the existing tab buttons. Setting this value
|
|
2502
2494
|
* to `true` is only necessary when the underlying tab components have changed and the tab
|
|
2503
2495
|
* buttons must reflect those changes.
|
|
2496
|
+
* @param initial Indicates whether tabs are being updated during initialization of the tabset
|
|
2497
|
+
* component. This is passed through to the permalink service where it prevents adding an extra
|
|
2498
|
+
* item to browser history when the URL is updated with the selected tab's permalink value.
|
|
2504
2499
|
*/
|
|
2505
|
-
#updateTabsetComponent(activeIndex, regenerateTabButtons
|
|
2500
|
+
#updateTabsetComponent(activeIndex, regenerateTabButtons, initial) {
|
|
2506
2501
|
// Activate/deactivate tab components.
|
|
2507
2502
|
this.tabs?.forEach((tab) => {
|
|
2508
2503
|
this.#tabsetService.tabIndexesEqual(tab.tabIndex, activeIndex)
|
|
@@ -2527,7 +2522,7 @@ class SkyTabsetComponent {
|
|
|
2527
2522
|
return this.#tabsetService.tabIndexesEqual(tab.tabIndex, activeIndex);
|
|
2528
2523
|
});
|
|
2529
2524
|
if (activeTabComponent) {
|
|
2530
|
-
this.#permalinkService.setParam(this.permalinkId, activeTabComponent.permalinkValueOrDefault);
|
|
2525
|
+
this.#permalinkService.setParam(this.permalinkId, activeTabComponent.permalinkValueOrDefault, initial);
|
|
2531
2526
|
}
|
|
2532
2527
|
}
|
|
2533
2528
|
// Wait for tab button view models to render before gauging dimensions.
|
|
@@ -2588,13 +2583,11 @@ class SkyTabsModule {
|
|
|
2588
2583
|
SkyTabsetComponent,
|
|
2589
2584
|
SkyTabsetNavButtonComponent,
|
|
2590
2585
|
SkyTabsetNavButtonDisabledPipe], imports: [CommonModule,
|
|
2591
|
-
RouterModule,
|
|
2592
2586
|
SkyDropdownModule,
|
|
2593
2587
|
SkyIconModule,
|
|
2594
2588
|
SkyTabsResourcesModule,
|
|
2595
2589
|
SkyThemeModule], exports: [SkyTabComponent, SkyTabsetComponent, SkyTabsetNavButtonComponent] }); }
|
|
2596
2590
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyTabsModule, imports: [CommonModule,
|
|
2597
|
-
RouterModule,
|
|
2598
2591
|
SkyDropdownModule,
|
|
2599
2592
|
SkyIconModule,
|
|
2600
2593
|
SkyTabsResourcesModule,
|
|
@@ -2612,7 +2605,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
|
|
|
2612
2605
|
],
|
|
2613
2606
|
imports: [
|
|
2614
2607
|
CommonModule,
|
|
2615
|
-
RouterModule,
|
|
2616
2608
|
SkyDropdownModule,
|
|
2617
2609
|
SkyIconModule,
|
|
2618
2610
|
SkyTabsResourcesModule,
|