@skyux/tabs 10.0.0-alpha.2 → 10.0.0-alpha.3
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 +459 -457
- package/esm2022/lib/modules/tabs/tab-button.component.mjs +3 -3
- package/esm2022/lib/modules/tabs/tab.component.mjs +14 -14
- package/esm2022/lib/modules/tabs/tabset-nav-button.component.mjs +3 -3
- package/esm2022/lib/modules/tabs/tabset.component.mjs +11 -11
- package/esm2022/lib/modules/vertical-tabset/vertical-tabset-group.component.mjs +3 -3
- package/fesm2022/skyux-tabs.mjs +29 -29
- package/fesm2022/skyux-tabs.mjs.map +1 -1
- package/lib/modules/tabs/tab.component.d.ts +3 -3
- package/package.json +9 -9
package/fesm2022/skyux-tabs.mjs
CHANGED
|
@@ -827,11 +827,11 @@ class SkyVerticalTabsetGroupComponent {
|
|
|
827
827
|
this.#adapterService.focusButton(this.groupHeadingButton);
|
|
828
828
|
}
|
|
829
829
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
830
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: SkyVerticalTabsetGroupComponent, selector: "sky-vertical-tabset-group", inputs: { disabled: "disabled", groupHeading: "groupHeading", open: "open" }, providers: [SkyVerticalTabsetGroupService], queries: [{ propertyName: "tabs", predicate: SkyVerticalTabComponent }], viewQueries: [{ propertyName: "groupHeadingButton", first: true, predicate: ["groupHeadingButton"], descendants: true }], 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-active sky-font-emphasized'
|
|
830
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: SkyVerticalTabsetGroupComponent, selector: "sky-vertical-tabset-group", inputs: { disabled: "disabled", groupHeading: "groupHeading", open: "open" }, providers: [SkyVerticalTabsetGroupService], queries: [{ propertyName: "tabs", predicate: SkyVerticalTabComponent }], viewQueries: [{ propertyName: "groupHeadingButton", first: true, predicate: ["groupHeadingButton"], descendants: true }], 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-active sky-font-emphasized': isActive(),\n 'sky-vertical-tabset-group-header-sub-open': open,\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled\n }\"\n >\n <button\n class=\"sky-padding-even-default sky-vertical-tabset-button\"\n role=\"tab\"\n type=\"button\"\n [attr.aria-controls]=\"groupContent.id\"\n [attr.aria-disabled]=\"disabled || undefined\"\n [attr.aria-expanded]=\"!disabled && open\"\n [id]=\"groupId\"\n [ngClass]=\"{\n 'sky-vertical-tabset-button-disabled': disabled\n }\"\n [tabIndex]=\"-1\"\n (click)=\"toggleMenuOpen()\"\n (keyup.arrowleft)=\"groupButtonArrowLeft($event)\"\n (keyup.arrowright)=\"groupButtonArrowRight($event)\"\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]=\"groupId\"\n [@.disabled]=\"animationDisabled\"\n [@skyAnimationSlide]=\"slideDirection\"\n (@skyAnimationSlide.done)=\"updateSlideDirection($event)\"\n #groupContent\n >\n <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-button-disabled{cursor:not-allowed;pointer-events:none}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:15px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:10px}: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:15px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:10px}.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: i4.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 }); }
|
|
831
831
|
}
|
|
832
832
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyVerticalTabsetGroupComponent, decorators: [{
|
|
833
833
|
type: Component,
|
|
834
|
-
args: [{ selector: 'sky-vertical-tabset-group', changeDetection: ChangeDetectionStrategy.OnPush, animations: [skyAnimationSlide], providers: [SkyVerticalTabsetGroupService], 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-active sky-font-emphasized'
|
|
834
|
+
args: [{ selector: 'sky-vertical-tabset-group', changeDetection: ChangeDetectionStrategy.OnPush, animations: [skyAnimationSlide], providers: [SkyVerticalTabsetGroupService], 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-active sky-font-emphasized': isActive(),\n 'sky-vertical-tabset-group-header-sub-open': open,\n 'sky-font-deemphasized': disabled,\n 'sky-deemphasized': disabled\n }\"\n >\n <button\n class=\"sky-padding-even-default sky-vertical-tabset-button\"\n role=\"tab\"\n type=\"button\"\n [attr.aria-controls]=\"groupContent.id\"\n [attr.aria-disabled]=\"disabled || undefined\"\n [attr.aria-expanded]=\"!disabled && open\"\n [id]=\"groupId\"\n [ngClass]=\"{\n 'sky-vertical-tabset-button-disabled': disabled\n }\"\n [tabIndex]=\"-1\"\n (click)=\"toggleMenuOpen()\"\n (keyup.arrowleft)=\"groupButtonArrowLeft($event)\"\n (keyup.arrowright)=\"groupButtonArrowRight($event)\"\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]=\"groupId\"\n [@.disabled]=\"animationDisabled\"\n [@skyAnimationSlide]=\"slideDirection\"\n (@skyAnimationSlide.done)=\"updateSlideDirection($event)\"\n #groupContent\n >\n <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-button-disabled{cursor:not-allowed;pointer-events:none}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:15px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:10px}: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:15px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:10px}.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"] }]
|
|
835
835
|
}], ctorParameters: () => [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
|
|
836
836
|
type: Input
|
|
837
837
|
}], groupHeading: [{
|
|
@@ -1666,11 +1666,11 @@ class SkyTabButtonComponent {
|
|
|
1666
1666
|
this.#changeDetectorRef.markForCheck();
|
|
1667
1667
|
}
|
|
1668
1668
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyTabButtonComponent, deps: [{ token: i0.ElementRef }, { token: SkyTabButtonAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1669
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", 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", tabNumber: "tabNumber", totalTabsCount: "totalTabsCount", 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 role=\"tab\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-selected]=\"active\"\n [attr.href]=\"buttonHref\"\n [attr.aria-label]=\"\n tabStyle === 'wizard'\n ? ('skyux_wizard_sr_step_' + wizardStepState\n | skyLibResources
|
|
1669
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", 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", tabNumber: "tabNumber", totalTabsCount: "totalTabsCount", 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 role=\"tab\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-selected]=\"active\"\n [attr.href]=\"buttonHref\"\n [attr.aria-label]=\"\n tabStyle === 'wizard'\n ? ('skyux_wizard_sr_step_' + wizardStepState\n | skyLibResources: tabNumber : totalTabsCount : buttonText)\n : null\n \"\n [attr.aria-labelledby]=\"tabStyle === 'wizard' ? null : tabHeading.id\"\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\" [attr.aria-hidden]=\"true\">\n <span skyId #tabHeading=\"skyId\">\n {{ buttonText }}\n <span\n *ngIf=\"buttonTextCount !== undefined\"\n class=\"sky-tab-header-count\"\n >\n {{ buttonTextCount }}\n </span>\n </span>\n <span\n *ngIf=\"closeable\"\n class=\"sky-btn-tab-close\"\n [tabindex]=\"closeBtnTabIndex\"\n [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n [ngClass]=\"{\n 'sky-btn-tab-close-disabled': disabled\n }\"\n (click)=\"onCloseClick($event)\"\n (keydown.enter)=\"onCloseClick($event)\"\n >\n <sky-icon icon=\"remove\" />\n </span>\n </span>\n </a>\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;padding:1px 6px}.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: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1670
1670
|
}
|
|
1671
1671
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyTabButtonComponent, decorators: [{
|
|
1672
1672
|
type: Component,
|
|
1673
|
-
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 role=\"tab\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-selected]=\"active\"\n [attr.href]=\"buttonHref\"\n [attr.aria-label]=\"\n tabStyle === 'wizard'\n ? ('skyux_wizard_sr_step_' + wizardStepState\n | skyLibResources
|
|
1673
|
+
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 role=\"tab\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-selected]=\"active\"\n [attr.href]=\"buttonHref\"\n [attr.aria-label]=\"\n tabStyle === 'wizard'\n ? ('skyux_wizard_sr_step_' + wizardStepState\n | skyLibResources: tabNumber : totalTabsCount : buttonText)\n : null\n \"\n [attr.aria-labelledby]=\"tabStyle === 'wizard' ? null : tabHeading.id\"\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\" [attr.aria-hidden]=\"true\">\n <span skyId #tabHeading=\"skyId\">\n {{ buttonText }}\n <span\n *ngIf=\"buttonTextCount !== undefined\"\n class=\"sky-tab-header-count\"\n >\n {{ buttonTextCount }}\n </span>\n </span>\n <span\n *ngIf=\"closeable\"\n class=\"sky-btn-tab-close\"\n [tabindex]=\"closeBtnTabIndex\"\n [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n [ngClass]=\"{\n 'sky-btn-tab-close-disabled': disabled\n }\"\n (click)=\"onCloseClick($event)\"\n (keydown.enter)=\"onCloseClick($event)\"\n >\n <sky-icon icon=\"remove\" />\n </span>\n </span>\n </a>\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;padding:1px 6px}.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"] }]
|
|
1674
1674
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: SkyTabButtonAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyTabsetService }], propDecorators: { active: [{
|
|
1675
1675
|
type: Input
|
|
1676
1676
|
}], ariaControls: [{
|
|
@@ -1886,17 +1886,17 @@ class SkyTabComponent {
|
|
|
1886
1886
|
* The unique identifier for the tab.
|
|
1887
1887
|
* If not defined, the identifier is set to the position of the tab on load, starting with `0`.
|
|
1888
1888
|
*/
|
|
1889
|
-
set
|
|
1890
|
-
if (value !== this.#
|
|
1889
|
+
set tabIndexValue(value) {
|
|
1890
|
+
if (value !== this.#_tabIndexValue &&
|
|
1891
1891
|
value !== undefined &&
|
|
1892
|
-
this.#
|
|
1893
|
-
this.#tabsetService.updateTabIndex(this.#
|
|
1892
|
+
this.#_tabIndexValue !== undefined) {
|
|
1893
|
+
this.#tabsetService.updateTabIndex(this.#_tabIndexValue, value);
|
|
1894
1894
|
this.#tabIndexChange.next(value);
|
|
1895
1895
|
}
|
|
1896
|
-
this.#
|
|
1896
|
+
this.#_tabIndexValue = value;
|
|
1897
1897
|
}
|
|
1898
|
-
get
|
|
1899
|
-
return this.#
|
|
1898
|
+
get tabIndexValue() {
|
|
1899
|
+
return this.#_tabIndexValue;
|
|
1900
1900
|
}
|
|
1901
1901
|
/**
|
|
1902
1902
|
* The tab layout that applies spacing to the tab container element. Use the layout
|
|
@@ -1941,7 +1941,7 @@ class SkyTabComponent {
|
|
|
1941
1941
|
#_permalinkValue;
|
|
1942
1942
|
#stateChange;
|
|
1943
1943
|
#_tabHeading;
|
|
1944
|
-
#
|
|
1944
|
+
#_tabIndexValue;
|
|
1945
1945
|
#_layout;
|
|
1946
1946
|
#tabIndexChange;
|
|
1947
1947
|
#changeDetector;
|
|
@@ -1984,13 +1984,13 @@ class SkyTabComponent {
|
|
|
1984
1984
|
this.#activeChange.complete();
|
|
1985
1985
|
this.#stateChange.complete();
|
|
1986
1986
|
this.#tabIndexChange.complete();
|
|
1987
|
-
if (this.
|
|
1988
|
-
this.#tabsetService.unregisterTab(this.
|
|
1987
|
+
if (this.tabIndexValue !== undefined) {
|
|
1988
|
+
this.#tabsetService.unregisterTab(this.tabIndexValue);
|
|
1989
1989
|
}
|
|
1990
1990
|
this.#mediaQueryService.unobserve();
|
|
1991
1991
|
}
|
|
1992
1992
|
init() {
|
|
1993
|
-
this.#
|
|
1993
|
+
this.#_tabIndexValue = this.#tabsetService.registerTab(this.tabIndexValue);
|
|
1994
1994
|
}
|
|
1995
1995
|
activate() {
|
|
1996
1996
|
this.#_active = true;
|
|
@@ -2011,7 +2011,7 @@ class SkyTabComponent {
|
|
|
2011
2011
|
this.#permalinkService.urlify(this.tabHeading);
|
|
2012
2012
|
}
|
|
2013
2013
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyTabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2014
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: SkyTabComponent, selector: "sky-tab", inputs: { active: "active", disabled: "disabled", permalinkValue: "permalinkValue", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading",
|
|
2014
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: SkyTabComponent, selector: "sky-tab", inputs: { active: "active", disabled: "disabled", permalinkValue: "permalinkValue", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", tabIndexValue: "tabIndexValue", layout: "layout" }, outputs: { close: "close" }, host: { properties: { "class": "this.cssClass" } }, providers: [
|
|
2015
2015
|
SkyResizeObserverMediaQueryService,
|
|
2016
2016
|
{
|
|
2017
2017
|
provide: SkyMediaQueryService,
|
|
@@ -2038,7 +2038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
|
|
|
2038
2038
|
type: Input
|
|
2039
2039
|
}], tabHeading: [{
|
|
2040
2040
|
type: Input
|
|
2041
|
-
}],
|
|
2041
|
+
}], tabIndexValue: [{
|
|
2042
2042
|
type: Input
|
|
2043
2043
|
}], layout: [{
|
|
2044
2044
|
type: Input
|
|
@@ -2155,7 +2155,7 @@ class SkyTabsetNavButtonComponent {
|
|
|
2155
2155
|
buttonClick() {
|
|
2156
2156
|
/* istanbul ignore else */
|
|
2157
2157
|
if (this.tabToSelect && !this.tabToSelect.disabled && this.tabset) {
|
|
2158
|
-
this.tabset.active = this.tabToSelect.
|
|
2158
|
+
this.tabset.active = this.tabToSelect.tabIndexValue;
|
|
2159
2159
|
}
|
|
2160
2160
|
}
|
|
2161
2161
|
#updateButtonVisibility() {
|
|
@@ -2185,7 +2185,7 @@ class SkyTabsetNavButtonComponent {
|
|
|
2185
2185
|
const tabs = this.tabset.tabs.toArray();
|
|
2186
2186
|
this.tabToSelect = undefined;
|
|
2187
2187
|
// tab index can be a number or a string, but we need the actual number index
|
|
2188
|
-
this.#activeIndexNumber = tabs.findIndex((tab) => tab.
|
|
2188
|
+
this.#activeIndexNumber = tabs.findIndex((tab) => tab.tabIndexValue === this.#activeSkyTabIndex);
|
|
2189
2189
|
/* istanbul ignore else */
|
|
2190
2190
|
if (this.#activeIndexNumber !== undefined) {
|
|
2191
2191
|
if (this.buttonType === buttonTypeNext) {
|
|
@@ -2454,7 +2454,7 @@ class SkyTabsetComponent {
|
|
|
2454
2454
|
this.#adapterService.detectOverflow();
|
|
2455
2455
|
}
|
|
2456
2456
|
onTabCloseClick(tabButton) {
|
|
2457
|
-
const tabComponent = this.tabs?.find((tab) => this.#tabsetService.tabIndexesEqual(tab.
|
|
2457
|
+
const tabComponent = this.tabs?.find((tab) => this.#tabsetService.tabIndexesEqual(tab.tabIndexValue, tabButton.tabIndex));
|
|
2458
2458
|
tabComponent?.close.emit();
|
|
2459
2459
|
}
|
|
2460
2460
|
onTabButtonClick(tabButton) {
|
|
@@ -2487,7 +2487,7 @@ class SkyTabsetComponent {
|
|
|
2487
2487
|
#getInitialTabIndex() {
|
|
2488
2488
|
let activeIndex = this.#getActiveTabIndexByPermalinkId();
|
|
2489
2489
|
if (activeIndex === undefined) {
|
|
2490
|
-
activeIndex = this.#getActiveTabComponent()?.
|
|
2490
|
+
activeIndex = this.#getActiveTabComponent()?.tabIndexValue;
|
|
2491
2491
|
if (activeIndex === undefined) {
|
|
2492
2492
|
activeIndex = this.active;
|
|
2493
2493
|
}
|
|
@@ -2518,7 +2518,7 @@ class SkyTabsetComponent {
|
|
|
2518
2518
|
.subscribe(() => {
|
|
2519
2519
|
// Wait for the tab components to render changes before finding the active one.
|
|
2520
2520
|
setTimeout(() => {
|
|
2521
|
-
const tabIndex = this.#getActiveTabComponent()?.
|
|
2521
|
+
const tabIndex = this.#getActiveTabComponent()?.tabIndexValue;
|
|
2522
2522
|
this.#tabsetService.setActiveTabIndex({ tabIndex });
|
|
2523
2523
|
});
|
|
2524
2524
|
});
|
|
@@ -2556,7 +2556,7 @@ class SkyTabsetComponent {
|
|
|
2556
2556
|
return;
|
|
2557
2557
|
}
|
|
2558
2558
|
this.#initTabComponents();
|
|
2559
|
-
const activeIndex = this.#getActiveTabComponent()?.
|
|
2559
|
+
const activeIndex = this.#getActiveTabComponent()?.tabIndexValue;
|
|
2560
2560
|
this.#tabsetService.setActiveTabIndex({
|
|
2561
2561
|
tabIndex: activeIndex,
|
|
2562
2562
|
}, {
|
|
@@ -2568,7 +2568,7 @@ class SkyTabsetComponent {
|
|
|
2568
2568
|
this.tabIndexesChange.emit({
|
|
2569
2569
|
tabs: this.tabs?.map((tab) => ({
|
|
2570
2570
|
tabHeading: tab.tabHeading,
|
|
2571
|
-
tabIndex: tab.
|
|
2571
|
+
tabIndex: tab.tabIndexValue,
|
|
2572
2572
|
})),
|
|
2573
2573
|
});
|
|
2574
2574
|
}
|
|
@@ -2606,7 +2606,7 @@ class SkyTabsetComponent {
|
|
|
2606
2606
|
if (this.permalinkId) {
|
|
2607
2607
|
const paramValue = this.#permalinkService.getParam(this.permalinkId);
|
|
2608
2608
|
if (paramValue) {
|
|
2609
|
-
return this.tabs?.find((tab) => tab.permalinkValueOrDefault === paramValue)?.
|
|
2609
|
+
return this.tabs?.find((tab) => tab.permalinkValueOrDefault === paramValue)?.tabIndexValue;
|
|
2610
2610
|
}
|
|
2611
2611
|
return undefined;
|
|
2612
2612
|
}
|
|
@@ -2625,7 +2625,7 @@ class SkyTabsetComponent {
|
|
|
2625
2625
|
return [];
|
|
2626
2626
|
}
|
|
2627
2627
|
return this.tabs.map((tab, index) => ({
|
|
2628
|
-
active: this.#tabsetService.tabIndexesEqual(tab.
|
|
2628
|
+
active: this.#tabsetService.tabIndexesEqual(tab.tabIndexValue, activeIndex),
|
|
2629
2629
|
closeable: tab.isCloseable(),
|
|
2630
2630
|
ariaControls: tab.tabPanelId,
|
|
2631
2631
|
disabled: tab.disabled,
|
|
@@ -2635,7 +2635,7 @@ class SkyTabsetComponent {
|
|
|
2635
2635
|
buttonId: tab.tabButtonId,
|
|
2636
2636
|
buttonTextCount: tab.tabHeaderCount,
|
|
2637
2637
|
buttonText: tab.tabHeading,
|
|
2638
|
-
tabIndex: tab.
|
|
2638
|
+
tabIndex: tab.tabIndexValue,
|
|
2639
2639
|
tabNumber: index + 1,
|
|
2640
2640
|
totalTabsCount: this.tabs.length,
|
|
2641
2641
|
}));
|
|
@@ -2660,7 +2660,7 @@ class SkyTabsetComponent {
|
|
|
2660
2660
|
#updateTabsetComponent(activeIndex, regenerateTabButtons, initial) {
|
|
2661
2661
|
// Activate/deactivate tab components.
|
|
2662
2662
|
this.tabs?.forEach((tab) => {
|
|
2663
|
-
this.#tabsetService.tabIndexesEqual(tab.
|
|
2663
|
+
this.#tabsetService.tabIndexesEqual(tab.tabIndexValue, activeIndex)
|
|
2664
2664
|
? tab.activate()
|
|
2665
2665
|
: tab.deactivate();
|
|
2666
2666
|
});
|
|
@@ -2679,7 +2679,7 @@ class SkyTabsetComponent {
|
|
|
2679
2679
|
// Set the query params based on active tab.
|
|
2680
2680
|
if (this.permalinkId) {
|
|
2681
2681
|
const activeTabComponent = this.tabs?.find((tab) => {
|
|
2682
|
-
return this.#tabsetService.tabIndexesEqual(tab.
|
|
2682
|
+
return this.#tabsetService.tabIndexesEqual(tab.tabIndexValue, activeIndex);
|
|
2683
2683
|
});
|
|
2684
2684
|
if (activeTabComponent) {
|
|
2685
2685
|
this.#permalinkService.setParam(this.permalinkId, activeTabComponent.permalinkValueOrDefault, initial);
|