@skyux/tabs 12.0.0-alpha.9 → 12.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/fesm2022/skyux-tabs-testing.mjs +295 -1
- package/fesm2022/skyux-tabs-testing.mjs.map +1 -1
- package/fesm2022/skyux-tabs.mjs +13 -12
- package/fesm2022/skyux-tabs.mjs.map +1 -1
- package/package.json +24 -27
- package/testing/modules/tabs/tab-button-harness.d.ts +1 -0
- package/testing/modules/vertical-tabset/vertical-tab-button-harness-filters.d.ts +10 -0
- package/testing/modules/vertical-tabset/vertical-tab-button-harness.d.ts +48 -0
- package/testing/modules/vertical-tabset/vertical-tab-content-harness-filters.d.ts +11 -0
- package/testing/modules/vertical-tabset/vertical-tab-content-harness.d.ts +26 -0
- package/testing/modules/vertical-tabset/vertical-tabset-group-harness-filters.d.ts +10 -0
- package/testing/modules/vertical-tabset/vertical-tabset-group-harness.d.ts +49 -0
- package/testing/modules/vertical-tabset/vertical-tabset-harness-filters.d.ts +6 -0
- package/testing/modules/vertical-tabset/vertical-tabset-harness.d.ts +69 -0
- package/testing/public-api.d.ts +8 -0
- package/documentation.json +0 -13838
package/fesm2022/skyux-tabs.mjs
CHANGED
|
@@ -544,11 +544,11 @@ class SkyVerticalTabComponent {
|
|
|
544
544
|
this.#changeRef.markForCheck();
|
|
545
545
|
}
|
|
546
546
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyVerticalTabComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyVerticalTabsetService }, { token: SkyTabIdService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
547
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyVerticalTabComponent, isStandalone: false, selector: "sky-vertical-tab", inputs: { active: "active", ariaControls: "ariaControls", ariaRole: "ariaRole", disabled: "disabled", errorIndicator: "errorIndicator", requiredIndicator: "requiredIndicator", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", showTabRightArrow: "showTabRightArrow", tabId: "tabId" }, viewQueries: [{ propertyName: "tabButton", first: true, predicate: ["tabButton"], descendants: true }, { propertyName: "tabContent", first: true, predicate: ["tabContentWrapper"], descendants: true }], ngImport: i0, template: "<a\n #tabButton\n class=\"sky-vertical-tab sky-vertical-tabset-button\"\n [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\n [attr.aria-disabled]=\"disabled || undefined\"\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-tabset-button-disabled': disabled,\n 'sky-font-deemphasized': disabled\n }\"\n [tabIndex]=\"-1\"\n (click)=\"activateTab()\"\n (keyup.arrowleft)=\"tabButtonArrowLeft($event)\"\n (keyup.enter)=\"tabButtonActivate($event)\"\n (keyup.space)=\"tabButtonActivate($event)\"\n>\n <div class=\"sky-vertical-tab-display\">\n <div\n class=\"sky-vertical-tab-heading\"\n [ngClass]=\"{ 'sky-control-label-required': requiredIndicator }\"\n >\n <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n @if (tabHeaderCount || tabHeaderCount === 0) {\n <span class=\"sky-vertical-tab-count\"> ({{ tabHeaderCount }}) </span>\n }\n </div>\n @if (errorIndicator) {\n <sky-status-indicator\n class=\"sky-vertical-tab-heading-error\"\n descriptionType=\"error\"\n indicatorType=\"danger\"\n />\n }\n @if (isMobile && showTabRightArrow) {\n <sky-icon class=\"sky-vertical-tab-right-arrow\" icon=\"chevron-right\" />\n }\n </div>\n</a>\n\n<div #tabContentWrapper skyResponsiveHost>\n <div\n #tabContentPane\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 >\n <ng-content />\n </div>\n</div>\n", styles: [".sky-vertical-tab:not(.sky-theme-modern *){--sky-override-vertical-tab-background-color: transparent;--sky-override-vertical-tab-background-color-active: #eeeeef;--sky-override-vertical-tab-background-color-focus: transparent;--sky-override-vertical-tab-background-color-hover: #eeeeef;--sky-override-vertical-tab-background-color-selected: #eeeeef;--sky-override-vertical-tab-border-left-active: none;--sky-override-vertical-tab-border-left-hover: none;--sky-override-vertical-tab-border-left-selected: 4px solid #00b4f1;--sky-override-vertical-tab-box-shadow-focus: none;--sky-override-vertical-tab-count-margin-left: 5px;--sky-override-vertical-tab-display-align-items: normal;--sky-override-vertical-tab-font-color: #212327;--sky-override-vertical-tab-font-color-disabled: var( --sky-text-color-deemphasized );--sky-override-vertical-tab-font-selected-color: #212327;--sky-override-vertical-tab-gap: 5px;--sky-override-vertical-tab-heading-error-line-height: normal;--sky-override-vertical-tab-heading-error-padding-left: 5px;--sky-override-vertical-tab-hover-font-color: #212327;--sky-override-vertical-tab-margin: 5px 0 5px 10px;--sky-override-vertical-tab-outline-focus: auto;--sky-override-vertical-tab-padding: 7px 0 7px 10px;--sky-override-vertical-tab-padding-left-active: 10px;--sky-override-vertical-tab-padding-left-selected: 6px;--sky-override-vertical-tab-padding-left-hover: 10px;--sky-override-vertical-tab-right-arrow-color: #cdcfd2;--sky-override-vertical-tab-right-arrow-color-active: #cdcfd2;--sky-override-vertical-tab-right-arrow-color-hover: #979ba2;--sky-override-vertical-tab-right-arrow-color-selected: #cdcfd2;--sky-override-vertical-tab-right-arrow-padding: 3px 10px 0 0}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-vertical-tab{--sky-override-vertical-tab-background-color-disabled: transparent;--sky-override-vertical-tab-background-color-selected: transparent;--sky-override-vertical-tab-border-left-active: var(--modern-size-4) solid var(--modern-color-blue-50);--sky-override-vertical-tab-border-left-hover: var(--modern-size-1) solid var(--modern-color-blue-50);--sky-override-vertical-tab-content-pane-margin-bottom: 0;--sky-override-vertical-tab-display-align-items: normal;--sky-override-vertical-tab-gap: var(--modern-size-15);--sky-override-vertical-tab-heading-error-margin-right: calc( var(--modern-size-10) * -1 );--sky-override-vertical-tab-heading-error-line-height: normal;--sky-override-vertical-tab-heading-error-padding-left: var(--modern-size-10);--sky-override-vertical-tab-heading-error-position: relative;--sky-override-vertical-tab-margin: var(--modern-size-15) 0 var(--modern-size-15) var(--modern-size-10);--sky-override-vertical-tab-padding: var(--modern-size-10) var(--modern-size-10) var(--modern-size-10) var(--modern-size-15);--sky-override-vertical-tab-right-arrow-color: var(--modern-color-gray-20);--sky-override-vertical-tab-right-arrow-color-active: var( --modern-color-gray-20 );--sky-override-vertical-tab-right-arrow-color-hover: #979ba2;--sky-override-vertical-tab-right-arrow-color-selected: var( --modern-color-gray-20 );--sky-override-vertical-tab-right-arrow-padding: var(--modern-size-3) 0 0 0}:host:has(~sky-vertical-tab) .sky-vertical-tab{margin-bottom:var(--sky-override-vertical-tab-gap, var(--sky-space-gap-action_group-l))}:host:has(.sky-vertical-tabset-button-disabled){cursor:not-allowed}.sky-vertical-tab{cursor:pointer;background-color:var(--sky-override-vertical-tab-background-color, var(--sky-color-background-nav-base));padding:var(--sky-override-vertical-tab-padding, var(--sky-space-inset-pillarbox-2_3-top-m) var(--sky-space-inset-pillarbox-2_3-right-m) var(--sky-space-inset-pillarbox-2_3-bottom-m) var(--sky-space-inset-pillarbox-2_3-left-m));margin:var(--sky-override-vertical-tab-margin, 0 0 0 var(--sky-space-inline-s));display:flex;text-decoration:none;color:var(--sky-override-vertical-tab-font-color, var(--sky-color-text-deemphasized));border-radius:var(--sky-border-radius-0)}.sky-vertical-tab:hover{color:var(--sky-override-vertical-tab-hover-font-color, var(--sky-color-text-default));background-color:var(--sky-override-vertical-tab-background-color-hover, var(--sky-color-background-nav-hover))}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-hover, var(--sky-color-icon-default))}.sky-vertical-tab:active{background-color:var(--sky-override-vertical-tab-background-color-active, var(--sky-color-background-nav-active));border-left:var(--sky-override-vertical-tab-border-left-active, var(--sky-border-width-selected-l) solid var(--sky-color-border-selected));color:var(--sky-override-vertical-tab-active-font-color, var(--sky-color-text-default));padding-left:var(--sky-override-vertical-tab-padding-left-active, calc(var(--sky-space-inset-pillarbox-2_3-left-m) - var(--sky-border-width-selected-l)))}.sky-vertical-tab:active .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-active, var(--sky-color-icon-default))}.sky-vertical-tab:not(:active):focus-visible{background-color:var(--sky-override-vertical-tab-background-color-focus, var(--sky-color-background-nav-focus));outline:var(--sky-override-vertical-tab-outline-focus, var(--sky-border-width-selected-m) solid var(--sky-color-border-selected));outline-offset:var(--sky-override-vertical-tab-outline-focus-offset, calc(var(--sky-border-width-selected-m) * -1));box-shadow:var(--sky-override-vertical-tab-box-shadow-focus, var(--sky-elevation-focus))}.sky-vertical-tab:not(:active):focus-visible.sky-vertical-tab-active{background-color:var(--sky-override-vertical-tab-background-color-selected, var(--sky-color-background-selected-soft));color:var(--sky-override-vertical-tab-selected-font-color, var(--sky-color-text-default))}.sky-vertical-tab:not(:active):focus-visible.sky-vertical-tab-active .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-selected, var(--sky-color-icon-default))}.sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{padding-left:var(--sky-override-vertical-tab-padding-left-hover, calc(var(--sky-space-inset-pillarbox-2_3-left-m) - var(--sky-border-width-selected-s)));border-left:var(--sky-override-vertical-tab-border-left-hover, var(--sky-border-width-selected-s) solid var(--sky-color-border-selected))}.sky-vertical-tab-active{background-color:var(--sky-override-vertical-tab-background-color-selected, var(--sky-color-background-selected-soft));color:var(--sky-override-vertical-tab-selected-font-color, var(--sky-color-text-default));padding-left:var(--sky-override-vertical-tab-padding-left-selected, calc(var(--sky-space-inset-pillarbox-2_3-left-m) - var(--sky-border-width-selected-l)));border-left:var(--sky-override-vertical-tab-border-left-selected, var(--sky-border-width-selected-l) solid var(--sky-color-border-selected))}.sky-vertical-tab-active .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-selected, var(--sky-color-icon-default))}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;justify-content:space-between;flex-grow:1;align-items:var(--sky-override-vertical-tab-display-align-items, center)}.sky-vertical-tab-heading-error{padding-left:var(--sky-override-vertical-tab-heading-error-padding-left, var(--sky-space-gap-text_action-s));margin-right:var(--sky-override-vertical-tab-heading-error-margin-right);position:var(--sky-override-vertical-tab-heading-error-position);top:-2px;line-height:var(--sky-override-vertical-tab-heading-error-line-height, 1)}.sky-vertical-tab-count{margin-left:var(--sky-override-vertical-tab-count-margin-left, var(--sky-space-gap-label-s))}.sky-vertical-tabset-button-disabled{background-color:var(--sky-override-vertical-tab-background-color-disabled, var(--sky-color-background-nav-disabled));color:var(--sky-override-vertical-tab-font-color-disabled, var(--sky-color-text-deemphasized));pointer-events:none}.sky-vertical-tab-right-arrow{padding:var(--sky-override-vertical-tab-right-arrow-padding, 0);color:var(--sky-override-vertical-tab-right-arrow-color, var(--sky-color-icon-deemphasized))}.sky-vertical-tab-content-pane{margin-bottom:0}.sky-vertical-tab-content-pane:focus-visible{outline:none;border:none}.sky-responsive-container-xs .sky-vertical-tab-content-pane{margin-bottom:var(--sky-override-vertical-tab-content-pane-margin-bottom, var(--sky-space-stacked-s))}: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: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i3.SkyResponsiveHostDirective, selector: "[skyResponsiveHost]", exportAs: ["skyResponsiveHost"] }, { kind: "component", type: i7.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
547
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyVerticalTabComponent, isStandalone: false, selector: "sky-vertical-tab", inputs: { active: "active", ariaControls: "ariaControls", ariaRole: "ariaRole", disabled: "disabled", errorIndicator: "errorIndicator", requiredIndicator: "requiredIndicator", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", showTabRightArrow: "showTabRightArrow", tabId: "tabId" }, viewQueries: [{ propertyName: "tabButton", first: true, predicate: ["tabButton"], descendants: true }, { propertyName: "tabContent", first: true, predicate: ["tabContentWrapper"], descendants: true }], ngImport: i0, template: "<a\n #tabButton\n class=\"sky-vertical-tab sky-vertical-tabset-button\"\n [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\n [attr.aria-disabled]=\"disabled || undefined\"\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-tabset-button-disabled': disabled,\n 'sky-font-deemphasized': disabled\n }\"\n [tabIndex]=\"-1\"\n (click)=\"activateTab()\"\n (keyup.arrowleft)=\"tabButtonArrowLeft($event)\"\n (keyup.enter)=\"tabButtonActivate($event)\"\n (keyup.space)=\"tabButtonActivate($event)\"\n>\n <div class=\"sky-vertical-tab-display\">\n <div\n class=\"sky-vertical-tab-heading\"\n [ngClass]=\"{ 'sky-control-label-required': requiredIndicator }\"\n >\n <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n @if (tabHeaderCount || tabHeaderCount === 0) {\n <span class=\"sky-vertical-tab-count\"> ({{ tabHeaderCount }}) </span>\n }\n </div>\n @if (errorIndicator) {\n <sky-status-indicator\n class=\"sky-vertical-tab-heading-error\"\n descriptionType=\"error\"\n indicatorType=\"danger\"\n />\n }\n @if (isMobile && showTabRightArrow) {\n <sky-icon class=\"sky-vertical-tab-right-arrow\" iconName=\"chevron-right\" />\n }\n </div>\n</a>\n\n<div #tabContentWrapper skyResponsiveHost>\n <div\n #tabContentPane\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 >\n <ng-content />\n </div>\n</div>\n", styles: [".sky-vertical-tab:not(.sky-theme-modern *){--sky-override-vertical-tab-background-color: transparent;--sky-override-vertical-tab-background-color-active: #eeeeef;--sky-override-vertical-tab-background-color-focus: transparent;--sky-override-vertical-tab-background-color-hover: #eeeeef;--sky-override-vertical-tab-background-color-selected: #eeeeef;--sky-override-vertical-tab-border-left-active: none;--sky-override-vertical-tab-border-left-hover: none;--sky-override-vertical-tab-border-left-selected: 4px solid #00b4f1;--sky-override-vertical-tab-box-shadow-focus: none;--sky-override-vertical-tab-count-margin-left: 5px;--sky-override-vertical-tab-display-align-items: normal;--sky-override-vertical-tab-font-color: #212327;--sky-override-vertical-tab-font-color-disabled: var( --sky-text-color-deemphasized );--sky-override-vertical-tab-font-selected-color: #212327;--sky-override-vertical-tab-gap: 5px;--sky-override-vertical-tab-heading-error-line-height: normal;--sky-override-vertical-tab-heading-error-padding-left: 5px;--sky-override-vertical-tab-hover-font-color: #212327;--sky-override-vertical-tab-margin: 5px 0 5px 10px;--sky-override-vertical-tab-outline-focus: auto;--sky-override-vertical-tab-padding: 7px 0 7px 10px;--sky-override-vertical-tab-padding-left-active: 10px;--sky-override-vertical-tab-padding-left-selected: 6px;--sky-override-vertical-tab-padding-left-hover: 10px;--sky-override-vertical-tab-right-arrow-color: #cdcfd2;--sky-override-vertical-tab-right-arrow-color-active: #cdcfd2;--sky-override-vertical-tab-right-arrow-color-hover: #979ba2;--sky-override-vertical-tab-right-arrow-color-selected: #cdcfd2;--sky-override-vertical-tab-right-arrow-padding: 3px 10px 0 0}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-vertical-tab{--sky-override-vertical-tab-background-color-disabled: transparent;--sky-override-vertical-tab-background-color-selected: transparent;--sky-override-vertical-tab-border-left-active: var(--modern-size-4) solid var(--modern-color-blue-50);--sky-override-vertical-tab-border-left-hover: var(--modern-size-1) solid var(--modern-color-blue-50);--sky-override-vertical-tab-content-pane-margin-bottom: 0;--sky-override-vertical-tab-display-align-items: normal;--sky-override-vertical-tab-gap: var(--modern-size-15);--sky-override-vertical-tab-heading-error-margin-right: calc( var(--modern-size-10) * -1 );--sky-override-vertical-tab-heading-error-line-height: normal;--sky-override-vertical-tab-heading-error-padding-left: var(--modern-size-10);--sky-override-vertical-tab-heading-error-position: relative;--sky-override-vertical-tab-margin: var(--modern-size-15) 0 var(--modern-size-15) var(--modern-size-10);--sky-override-vertical-tab-padding: var(--modern-size-10) var(--modern-size-10) var(--modern-size-10) var(--modern-size-15);--sky-override-vertical-tab-right-arrow-color: var(--modern-color-gray-20);--sky-override-vertical-tab-right-arrow-color-active: var( --modern-color-gray-20 );--sky-override-vertical-tab-right-arrow-color-hover: #979ba2;--sky-override-vertical-tab-right-arrow-color-selected: var( --modern-color-gray-20 );--sky-override-vertical-tab-right-arrow-padding: var(--modern-size-3) 0 0 0}:host:has(~sky-vertical-tab) .sky-vertical-tab{margin-bottom:var(--sky-override-vertical-tab-gap, var(--sky-space-gap-action_group-l))}:host:has(.sky-vertical-tabset-button-disabled){cursor:not-allowed}.sky-vertical-tab{cursor:pointer;background-color:var(--sky-override-vertical-tab-background-color, var(--sky-color-background-nav-base));padding:var(--sky-override-vertical-tab-padding, var(--sky-space-inset-pillarbox-2_3-top-m) var(--sky-space-inset-pillarbox-2_3-right-m) var(--sky-space-inset-pillarbox-2_3-bottom-m) var(--sky-space-inset-pillarbox-2_3-left-m));margin:var(--sky-override-vertical-tab-margin, 0 0 0 var(--sky-space-inline-s));display:flex;text-decoration:none;color:var(--sky-override-vertical-tab-font-color, var(--sky-color-text-deemphasized));border-radius:var(--sky-border-radius-0)}.sky-vertical-tab:hover{color:var(--sky-override-vertical-tab-hover-font-color, var(--sky-color-text-default));background-color:var(--sky-override-vertical-tab-background-color-hover, var(--sky-color-background-nav-hover))}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-hover, var(--sky-color-icon-default))}.sky-vertical-tab:active{background-color:var(--sky-override-vertical-tab-background-color-active, var(--sky-color-background-nav-active));border-left:var(--sky-override-vertical-tab-border-left-active, var(--sky-border-width-selected-l) solid var(--sky-color-border-selected));color:var(--sky-override-vertical-tab-active-font-color, var(--sky-color-text-default));padding-left:var(--sky-override-vertical-tab-padding-left-active, calc(var(--sky-space-inset-pillarbox-2_3-left-m) - var(--sky-border-width-selected-l)))}.sky-vertical-tab:active .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-active, var(--sky-color-icon-default))}.sky-vertical-tab:not(:active):focus-visible{background-color:var(--sky-override-vertical-tab-background-color-focus, var(--sky-color-background-nav-focus));outline:var(--sky-override-vertical-tab-outline-focus, var(--sky-border-width-selected-m) solid var(--sky-color-border-selected));outline-offset:var(--sky-override-vertical-tab-outline-focus-offset, calc(var(--sky-border-width-selected-m) * -1));box-shadow:var(--sky-override-vertical-tab-box-shadow-focus, var(--sky-elevation-focus))}.sky-vertical-tab:not(:active):focus-visible.sky-vertical-tab-active{background-color:var(--sky-override-vertical-tab-background-color-selected, var(--sky-color-background-selected-soft));color:var(--sky-override-vertical-tab-selected-font-color, var(--sky-color-text-default))}.sky-vertical-tab:not(:active):focus-visible.sky-vertical-tab-active .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-selected, var(--sky-color-icon-default))}.sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{padding-left:var(--sky-override-vertical-tab-padding-left-hover, calc(var(--sky-space-inset-pillarbox-2_3-left-m) - var(--sky-border-width-selected-s)));border-left:var(--sky-override-vertical-tab-border-left-hover, var(--sky-border-width-selected-s) solid var(--sky-color-border-selected))}.sky-vertical-tab-active{background-color:var(--sky-override-vertical-tab-background-color-selected, var(--sky-color-background-selected-soft));color:var(--sky-override-vertical-tab-selected-font-color, var(--sky-color-text-default));padding-left:var(--sky-override-vertical-tab-padding-left-selected, calc(var(--sky-space-inset-pillarbox-2_3-left-m) - var(--sky-border-width-selected-l)));border-left:var(--sky-override-vertical-tab-border-left-selected, var(--sky-border-width-selected-l) solid var(--sky-color-border-selected))}.sky-vertical-tab-active .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-selected, var(--sky-color-icon-default))}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;justify-content:space-between;flex-grow:1;align-items:var(--sky-override-vertical-tab-display-align-items, center)}.sky-vertical-tab-heading-error{padding-left:var(--sky-override-vertical-tab-heading-error-padding-left, var(--sky-space-gap-text_action-s));margin-right:var(--sky-override-vertical-tab-heading-error-margin-right);position:var(--sky-override-vertical-tab-heading-error-position);top:-2px;line-height:var(--sky-override-vertical-tab-heading-error-line-height, 1)}.sky-vertical-tab-count{margin-left:var(--sky-override-vertical-tab-count-margin-left, var(--sky-space-gap-label-s))}.sky-vertical-tabset-button-disabled{background-color:var(--sky-override-vertical-tab-background-color-disabled, var(--sky-color-background-nav-disabled));color:var(--sky-override-vertical-tab-font-color-disabled, var(--sky-color-text-deemphasized));pointer-events:none}.sky-vertical-tab-right-arrow{padding:var(--sky-override-vertical-tab-right-arrow-padding, 0);color:var(--sky-override-vertical-tab-right-arrow-color, var(--sky-color-icon-deemphasized))}.sky-vertical-tab-content-pane{margin-bottom:0}.sky-vertical-tab-content-pane:focus-visible{outline:none;border:none}.sky-responsive-container-xs .sky-vertical-tab-content-pane{margin-bottom:var(--sky-override-vertical-tab-content-pane-margin-bottom, var(--sky-space-stacked-s))}: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: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i3.SkyResponsiveHostDirective, selector: "[skyResponsiveHost]", exportAs: ["skyResponsiveHost"] }, { kind: "component", type: i7.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
548
548
|
}
|
|
549
549
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyVerticalTabComponent, decorators: [{
|
|
550
550
|
type: Component,
|
|
551
|
-
args: [{ selector: 'sky-vertical-tab', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<a\n #tabButton\n class=\"sky-vertical-tab sky-vertical-tabset-button\"\n [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\n [attr.aria-disabled]=\"disabled || undefined\"\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-tabset-button-disabled': disabled,\n 'sky-font-deemphasized': disabled\n }\"\n [tabIndex]=\"-1\"\n (click)=\"activateTab()\"\n (keyup.arrowleft)=\"tabButtonArrowLeft($event)\"\n (keyup.enter)=\"tabButtonActivate($event)\"\n (keyup.space)=\"tabButtonActivate($event)\"\n>\n <div class=\"sky-vertical-tab-display\">\n <div\n class=\"sky-vertical-tab-heading\"\n [ngClass]=\"{ 'sky-control-label-required': requiredIndicator }\"\n >\n <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n @if (tabHeaderCount || tabHeaderCount === 0) {\n <span class=\"sky-vertical-tab-count\"> ({{ tabHeaderCount }}) </span>\n }\n </div>\n @if (errorIndicator) {\n <sky-status-indicator\n class=\"sky-vertical-tab-heading-error\"\n descriptionType=\"error\"\n indicatorType=\"danger\"\n />\n }\n @if (isMobile && showTabRightArrow) {\n <sky-icon class=\"sky-vertical-tab-right-arrow\" icon=\"chevron-right\" />\n }\n </div>\n</a>\n\n<div #tabContentWrapper skyResponsiveHost>\n <div\n #tabContentPane\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 >\n <ng-content />\n </div>\n</div>\n", styles: [".sky-vertical-tab:not(.sky-theme-modern *){--sky-override-vertical-tab-background-color: transparent;--sky-override-vertical-tab-background-color-active: #eeeeef;--sky-override-vertical-tab-background-color-focus: transparent;--sky-override-vertical-tab-background-color-hover: #eeeeef;--sky-override-vertical-tab-background-color-selected: #eeeeef;--sky-override-vertical-tab-border-left-active: none;--sky-override-vertical-tab-border-left-hover: none;--sky-override-vertical-tab-border-left-selected: 4px solid #00b4f1;--sky-override-vertical-tab-box-shadow-focus: none;--sky-override-vertical-tab-count-margin-left: 5px;--sky-override-vertical-tab-display-align-items: normal;--sky-override-vertical-tab-font-color: #212327;--sky-override-vertical-tab-font-color-disabled: var( --sky-text-color-deemphasized );--sky-override-vertical-tab-font-selected-color: #212327;--sky-override-vertical-tab-gap: 5px;--sky-override-vertical-tab-heading-error-line-height: normal;--sky-override-vertical-tab-heading-error-padding-left: 5px;--sky-override-vertical-tab-hover-font-color: #212327;--sky-override-vertical-tab-margin: 5px 0 5px 10px;--sky-override-vertical-tab-outline-focus: auto;--sky-override-vertical-tab-padding: 7px 0 7px 10px;--sky-override-vertical-tab-padding-left-active: 10px;--sky-override-vertical-tab-padding-left-selected: 6px;--sky-override-vertical-tab-padding-left-hover: 10px;--sky-override-vertical-tab-right-arrow-color: #cdcfd2;--sky-override-vertical-tab-right-arrow-color-active: #cdcfd2;--sky-override-vertical-tab-right-arrow-color-hover: #979ba2;--sky-override-vertical-tab-right-arrow-color-selected: #cdcfd2;--sky-override-vertical-tab-right-arrow-padding: 3px 10px 0 0}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-vertical-tab{--sky-override-vertical-tab-background-color-disabled: transparent;--sky-override-vertical-tab-background-color-selected: transparent;--sky-override-vertical-tab-border-left-active: var(--modern-size-4) solid var(--modern-color-blue-50);--sky-override-vertical-tab-border-left-hover: var(--modern-size-1) solid var(--modern-color-blue-50);--sky-override-vertical-tab-content-pane-margin-bottom: 0;--sky-override-vertical-tab-display-align-items: normal;--sky-override-vertical-tab-gap: var(--modern-size-15);--sky-override-vertical-tab-heading-error-margin-right: calc( var(--modern-size-10) * -1 );--sky-override-vertical-tab-heading-error-line-height: normal;--sky-override-vertical-tab-heading-error-padding-left: var(--modern-size-10);--sky-override-vertical-tab-heading-error-position: relative;--sky-override-vertical-tab-margin: var(--modern-size-15) 0 var(--modern-size-15) var(--modern-size-10);--sky-override-vertical-tab-padding: var(--modern-size-10) var(--modern-size-10) var(--modern-size-10) var(--modern-size-15);--sky-override-vertical-tab-right-arrow-color: var(--modern-color-gray-20);--sky-override-vertical-tab-right-arrow-color-active: var( --modern-color-gray-20 );--sky-override-vertical-tab-right-arrow-color-hover: #979ba2;--sky-override-vertical-tab-right-arrow-color-selected: var( --modern-color-gray-20 );--sky-override-vertical-tab-right-arrow-padding: var(--modern-size-3) 0 0 0}:host:has(~sky-vertical-tab) .sky-vertical-tab{margin-bottom:var(--sky-override-vertical-tab-gap, var(--sky-space-gap-action_group-l))}:host:has(.sky-vertical-tabset-button-disabled){cursor:not-allowed}.sky-vertical-tab{cursor:pointer;background-color:var(--sky-override-vertical-tab-background-color, var(--sky-color-background-nav-base));padding:var(--sky-override-vertical-tab-padding, var(--sky-space-inset-pillarbox-2_3-top-m) var(--sky-space-inset-pillarbox-2_3-right-m) var(--sky-space-inset-pillarbox-2_3-bottom-m) var(--sky-space-inset-pillarbox-2_3-left-m));margin:var(--sky-override-vertical-tab-margin, 0 0 0 var(--sky-space-inline-s));display:flex;text-decoration:none;color:var(--sky-override-vertical-tab-font-color, var(--sky-color-text-deemphasized));border-radius:var(--sky-border-radius-0)}.sky-vertical-tab:hover{color:var(--sky-override-vertical-tab-hover-font-color, var(--sky-color-text-default));background-color:var(--sky-override-vertical-tab-background-color-hover, var(--sky-color-background-nav-hover))}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-hover, var(--sky-color-icon-default))}.sky-vertical-tab:active{background-color:var(--sky-override-vertical-tab-background-color-active, var(--sky-color-background-nav-active));border-left:var(--sky-override-vertical-tab-border-left-active, var(--sky-border-width-selected-l) solid var(--sky-color-border-selected));color:var(--sky-override-vertical-tab-active-font-color, var(--sky-color-text-default));padding-left:var(--sky-override-vertical-tab-padding-left-active, calc(var(--sky-space-inset-pillarbox-2_3-left-m) - var(--sky-border-width-selected-l)))}.sky-vertical-tab:active .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-active, var(--sky-color-icon-default))}.sky-vertical-tab:not(:active):focus-visible{background-color:var(--sky-override-vertical-tab-background-color-focus, var(--sky-color-background-nav-focus));outline:var(--sky-override-vertical-tab-outline-focus, var(--sky-border-width-selected-m) solid var(--sky-color-border-selected));outline-offset:var(--sky-override-vertical-tab-outline-focus-offset, calc(var(--sky-border-width-selected-m) * -1));box-shadow:var(--sky-override-vertical-tab-box-shadow-focus, var(--sky-elevation-focus))}.sky-vertical-tab:not(:active):focus-visible.sky-vertical-tab-active{background-color:var(--sky-override-vertical-tab-background-color-selected, var(--sky-color-background-selected-soft));color:var(--sky-override-vertical-tab-selected-font-color, var(--sky-color-text-default))}.sky-vertical-tab:not(:active):focus-visible.sky-vertical-tab-active .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-selected, var(--sky-color-icon-default))}.sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{padding-left:var(--sky-override-vertical-tab-padding-left-hover, calc(var(--sky-space-inset-pillarbox-2_3-left-m) - var(--sky-border-width-selected-s)));border-left:var(--sky-override-vertical-tab-border-left-hover, var(--sky-border-width-selected-s) solid var(--sky-color-border-selected))}.sky-vertical-tab-active{background-color:var(--sky-override-vertical-tab-background-color-selected, var(--sky-color-background-selected-soft));color:var(--sky-override-vertical-tab-selected-font-color, var(--sky-color-text-default));padding-left:var(--sky-override-vertical-tab-padding-left-selected, calc(var(--sky-space-inset-pillarbox-2_3-left-m) - var(--sky-border-width-selected-l)));border-left:var(--sky-override-vertical-tab-border-left-selected, var(--sky-border-width-selected-l) solid var(--sky-color-border-selected))}.sky-vertical-tab-active .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-selected, var(--sky-color-icon-default))}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;justify-content:space-between;flex-grow:1;align-items:var(--sky-override-vertical-tab-display-align-items, center)}.sky-vertical-tab-heading-error{padding-left:var(--sky-override-vertical-tab-heading-error-padding-left, var(--sky-space-gap-text_action-s));margin-right:var(--sky-override-vertical-tab-heading-error-margin-right);position:var(--sky-override-vertical-tab-heading-error-position);top:-2px;line-height:var(--sky-override-vertical-tab-heading-error-line-height, 1)}.sky-vertical-tab-count{margin-left:var(--sky-override-vertical-tab-count-margin-left, var(--sky-space-gap-label-s))}.sky-vertical-tabset-button-disabled{background-color:var(--sky-override-vertical-tab-background-color-disabled, var(--sky-color-background-nav-disabled));color:var(--sky-override-vertical-tab-font-color-disabled, var(--sky-color-text-deemphasized));pointer-events:none}.sky-vertical-tab-right-arrow{padding:var(--sky-override-vertical-tab-right-arrow-padding, 0);color:var(--sky-override-vertical-tab-right-arrow-color, var(--sky-color-icon-deemphasized))}.sky-vertical-tab-content-pane{margin-bottom:0}.sky-vertical-tab-content-pane:focus-visible{outline:none;border:none}.sky-responsive-container-xs .sky-vertical-tab-content-pane{margin-bottom:var(--sky-override-vertical-tab-content-pane-margin-bottom, var(--sky-space-stacked-s))}:host-context(.sky-sectioned-form-tabs-only) .sky-vertical-tab{margin-left:0}\n"] }]
|
|
551
|
+
args: [{ selector: 'sky-vertical-tab', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<a\n #tabButton\n class=\"sky-vertical-tab sky-vertical-tabset-button\"\n [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\n [attr.aria-disabled]=\"disabled || undefined\"\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-tabset-button-disabled': disabled,\n 'sky-font-deemphasized': disabled\n }\"\n [tabIndex]=\"-1\"\n (click)=\"activateTab()\"\n (keyup.arrowleft)=\"tabButtonArrowLeft($event)\"\n (keyup.enter)=\"tabButtonActivate($event)\"\n (keyup.space)=\"tabButtonActivate($event)\"\n>\n <div class=\"sky-vertical-tab-display\">\n <div\n class=\"sky-vertical-tab-heading\"\n [ngClass]=\"{ 'sky-control-label-required': requiredIndicator }\"\n >\n <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n @if (tabHeaderCount || tabHeaderCount === 0) {\n <span class=\"sky-vertical-tab-count\"> ({{ tabHeaderCount }}) </span>\n }\n </div>\n @if (errorIndicator) {\n <sky-status-indicator\n class=\"sky-vertical-tab-heading-error\"\n descriptionType=\"error\"\n indicatorType=\"danger\"\n />\n }\n @if (isMobile && showTabRightArrow) {\n <sky-icon class=\"sky-vertical-tab-right-arrow\" iconName=\"chevron-right\" />\n }\n </div>\n</a>\n\n<div #tabContentWrapper skyResponsiveHost>\n <div\n #tabContentPane\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 >\n <ng-content />\n </div>\n</div>\n", styles: [".sky-vertical-tab:not(.sky-theme-modern *){--sky-override-vertical-tab-background-color: transparent;--sky-override-vertical-tab-background-color-active: #eeeeef;--sky-override-vertical-tab-background-color-focus: transparent;--sky-override-vertical-tab-background-color-hover: #eeeeef;--sky-override-vertical-tab-background-color-selected: #eeeeef;--sky-override-vertical-tab-border-left-active: none;--sky-override-vertical-tab-border-left-hover: none;--sky-override-vertical-tab-border-left-selected: 4px solid #00b4f1;--sky-override-vertical-tab-box-shadow-focus: none;--sky-override-vertical-tab-count-margin-left: 5px;--sky-override-vertical-tab-display-align-items: normal;--sky-override-vertical-tab-font-color: #212327;--sky-override-vertical-tab-font-color-disabled: var( --sky-text-color-deemphasized );--sky-override-vertical-tab-font-selected-color: #212327;--sky-override-vertical-tab-gap: 5px;--sky-override-vertical-tab-heading-error-line-height: normal;--sky-override-vertical-tab-heading-error-padding-left: 5px;--sky-override-vertical-tab-hover-font-color: #212327;--sky-override-vertical-tab-margin: 5px 0 5px 10px;--sky-override-vertical-tab-outline-focus: auto;--sky-override-vertical-tab-padding: 7px 0 7px 10px;--sky-override-vertical-tab-padding-left-active: 10px;--sky-override-vertical-tab-padding-left-selected: 6px;--sky-override-vertical-tab-padding-left-hover: 10px;--sky-override-vertical-tab-right-arrow-color: #cdcfd2;--sky-override-vertical-tab-right-arrow-color-active: #cdcfd2;--sky-override-vertical-tab-right-arrow-color-hover: #979ba2;--sky-override-vertical-tab-right-arrow-color-selected: #cdcfd2;--sky-override-vertical-tab-right-arrow-padding: 3px 10px 0 0}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-vertical-tab{--sky-override-vertical-tab-background-color-disabled: transparent;--sky-override-vertical-tab-background-color-selected: transparent;--sky-override-vertical-tab-border-left-active: var(--modern-size-4) solid var(--modern-color-blue-50);--sky-override-vertical-tab-border-left-hover: var(--modern-size-1) solid var(--modern-color-blue-50);--sky-override-vertical-tab-content-pane-margin-bottom: 0;--sky-override-vertical-tab-display-align-items: normal;--sky-override-vertical-tab-gap: var(--modern-size-15);--sky-override-vertical-tab-heading-error-margin-right: calc( var(--modern-size-10) * -1 );--sky-override-vertical-tab-heading-error-line-height: normal;--sky-override-vertical-tab-heading-error-padding-left: var(--modern-size-10);--sky-override-vertical-tab-heading-error-position: relative;--sky-override-vertical-tab-margin: var(--modern-size-15) 0 var(--modern-size-15) var(--modern-size-10);--sky-override-vertical-tab-padding: var(--modern-size-10) var(--modern-size-10) var(--modern-size-10) var(--modern-size-15);--sky-override-vertical-tab-right-arrow-color: var(--modern-color-gray-20);--sky-override-vertical-tab-right-arrow-color-active: var( --modern-color-gray-20 );--sky-override-vertical-tab-right-arrow-color-hover: #979ba2;--sky-override-vertical-tab-right-arrow-color-selected: var( --modern-color-gray-20 );--sky-override-vertical-tab-right-arrow-padding: var(--modern-size-3) 0 0 0}:host:has(~sky-vertical-tab) .sky-vertical-tab{margin-bottom:var(--sky-override-vertical-tab-gap, var(--sky-space-gap-action_group-l))}:host:has(.sky-vertical-tabset-button-disabled){cursor:not-allowed}.sky-vertical-tab{cursor:pointer;background-color:var(--sky-override-vertical-tab-background-color, var(--sky-color-background-nav-base));padding:var(--sky-override-vertical-tab-padding, var(--sky-space-inset-pillarbox-2_3-top-m) var(--sky-space-inset-pillarbox-2_3-right-m) var(--sky-space-inset-pillarbox-2_3-bottom-m) var(--sky-space-inset-pillarbox-2_3-left-m));margin:var(--sky-override-vertical-tab-margin, 0 0 0 var(--sky-space-inline-s));display:flex;text-decoration:none;color:var(--sky-override-vertical-tab-font-color, var(--sky-color-text-deemphasized));border-radius:var(--sky-border-radius-0)}.sky-vertical-tab:hover{color:var(--sky-override-vertical-tab-hover-font-color, var(--sky-color-text-default));background-color:var(--sky-override-vertical-tab-background-color-hover, var(--sky-color-background-nav-hover))}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-hover, var(--sky-color-icon-default))}.sky-vertical-tab:active{background-color:var(--sky-override-vertical-tab-background-color-active, var(--sky-color-background-nav-active));border-left:var(--sky-override-vertical-tab-border-left-active, var(--sky-border-width-selected-l) solid var(--sky-color-border-selected));color:var(--sky-override-vertical-tab-active-font-color, var(--sky-color-text-default));padding-left:var(--sky-override-vertical-tab-padding-left-active, calc(var(--sky-space-inset-pillarbox-2_3-left-m) - var(--sky-border-width-selected-l)))}.sky-vertical-tab:active .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-active, var(--sky-color-icon-default))}.sky-vertical-tab:not(:active):focus-visible{background-color:var(--sky-override-vertical-tab-background-color-focus, var(--sky-color-background-nav-focus));outline:var(--sky-override-vertical-tab-outline-focus, var(--sky-border-width-selected-m) solid var(--sky-color-border-selected));outline-offset:var(--sky-override-vertical-tab-outline-focus-offset, calc(var(--sky-border-width-selected-m) * -1));box-shadow:var(--sky-override-vertical-tab-box-shadow-focus, var(--sky-elevation-focus))}.sky-vertical-tab:not(:active):focus-visible.sky-vertical-tab-active{background-color:var(--sky-override-vertical-tab-background-color-selected, var(--sky-color-background-selected-soft));color:var(--sky-override-vertical-tab-selected-font-color, var(--sky-color-text-default))}.sky-vertical-tab:not(:active):focus-visible.sky-vertical-tab-active .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-selected, var(--sky-color-icon-default))}.sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{padding-left:var(--sky-override-vertical-tab-padding-left-hover, calc(var(--sky-space-inset-pillarbox-2_3-left-m) - var(--sky-border-width-selected-s)));border-left:var(--sky-override-vertical-tab-border-left-hover, var(--sky-border-width-selected-s) solid var(--sky-color-border-selected))}.sky-vertical-tab-active{background-color:var(--sky-override-vertical-tab-background-color-selected, var(--sky-color-background-selected-soft));color:var(--sky-override-vertical-tab-selected-font-color, var(--sky-color-text-default));padding-left:var(--sky-override-vertical-tab-padding-left-selected, calc(var(--sky-space-inset-pillarbox-2_3-left-m) - var(--sky-border-width-selected-l)));border-left:var(--sky-override-vertical-tab-border-left-selected, var(--sky-border-width-selected-l) solid var(--sky-color-border-selected))}.sky-vertical-tab-active .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-selected, var(--sky-color-icon-default))}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;justify-content:space-between;flex-grow:1;align-items:var(--sky-override-vertical-tab-display-align-items, center)}.sky-vertical-tab-heading-error{padding-left:var(--sky-override-vertical-tab-heading-error-padding-left, var(--sky-space-gap-text_action-s));margin-right:var(--sky-override-vertical-tab-heading-error-margin-right);position:var(--sky-override-vertical-tab-heading-error-position);top:-2px;line-height:var(--sky-override-vertical-tab-heading-error-line-height, 1)}.sky-vertical-tab-count{margin-left:var(--sky-override-vertical-tab-count-margin-left, var(--sky-space-gap-label-s))}.sky-vertical-tabset-button-disabled{background-color:var(--sky-override-vertical-tab-background-color-disabled, var(--sky-color-background-nav-disabled));color:var(--sky-override-vertical-tab-font-color-disabled, var(--sky-color-text-deemphasized));pointer-events:none}.sky-vertical-tab-right-arrow{padding:var(--sky-override-vertical-tab-right-arrow-padding, 0);color:var(--sky-override-vertical-tab-right-arrow-color, var(--sky-color-icon-deemphasized))}.sky-vertical-tab-content-pane{margin-bottom:0}.sky-vertical-tab-content-pane:focus-visible{outline:none;border:none}.sky-responsive-container-xs .sky-vertical-tab-content-pane{margin-bottom:var(--sky-override-vertical-tab-content-pane-margin-bottom, var(--sky-space-stacked-s))}:host-context(.sky-sectioned-form-tabs-only) .sky-vertical-tab{margin-left:0}\n"] }]
|
|
552
552
|
}], ctorParameters: () => [{ type: SkyVerticalTabsetAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyVerticalTabsetService }, { type: SkyTabIdService, decorators: [{
|
|
553
553
|
type: Optional
|
|
554
554
|
}] }], propDecorators: { active: [{
|
|
@@ -619,6 +619,7 @@ class SkyVerticalTabsetGroupComponent {
|
|
|
619
619
|
this.#idService = inject(SkyIdService);
|
|
620
620
|
this.#tabIdService = inject(SkyTabIdService);
|
|
621
621
|
this.#groupService = inject(SkyVerticalTabsetGroupService);
|
|
622
|
+
this.#_open = false;
|
|
622
623
|
this.#tabService = tabService;
|
|
623
624
|
this.#changeRef = changeRef;
|
|
624
625
|
this.groupId = this.#idService.generateId();
|
|
@@ -698,11 +699,11 @@ class SkyVerticalTabsetGroupComponent {
|
|
|
698
699
|
this.#adapterService.focusButton(this.groupHeadingButton);
|
|
699
700
|
}
|
|
700
701
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
701
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: SkyVerticalTabsetGroupComponent, isStandalone: false, 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 }\"\n >\n <button\n #groupHeadingButton\n class=\"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 >\n {{ groupHeading }}\n <sky-expansion-indicator\n class=\"sky-vertical-tabset-group-expansion-indicator\"\n [direction]=\"!disabled && open ? 'up' : 'down'\"\n />\n </button>\n </div>\n <div\n #groupContent\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 >\n <ng-content />\n </div>\n</div>\n", styles: [".sky-vertical-tabset-group:not(.sky-theme-modern *){--sky-override-vertical-tabset-button-disabled-font-color: buttontext;--sky-override-vertical-tabset-group-border: 1px solid #e2e3e4;--sky-override-vertical-tabset-group-button-font-color: buttontext;--sky-override-vertical-tabset-group-button-padding: 10px;--sky-override-vertical-tabset-group-content-padding-left: 0;--sky-override-vertical-tabset-group-gap: 5px;--sky-override-vertical-tabset-group-header-align-items: flex-start;--sky-override-vertical-tabset-group-header-background-color: transparent;--sky-override-vertical-tabset-group-margin: 5px 0 5px 5px}:host-context(.sky-theme-modern:not(.sky-theme-brand-
|
|
702
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: SkyVerticalTabsetGroupComponent, isStandalone: false, 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 }\"\n >\n <button\n #groupHeadingButton\n class=\"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 >\n {{ groupHeading }}\n <sky-expansion-indicator\n class=\"sky-vertical-tabset-group-expansion-indicator\"\n [direction]=\"!disabled && open ? 'up' : 'down'\"\n />\n </button>\n </div>\n <div\n #groupContent\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 >\n <ng-content />\n </div>\n</div>\n", styles: [".sky-vertical-tabset-group:not(.sky-theme-modern *){--sky-override-vertical-tabset-button-disabled-font-color: buttontext;--sky-override-vertical-tabset-group-border: 1px solid #e2e3e4;--sky-override-vertical-tabset-group-button-font-color: buttontext;--sky-override-vertical-tabset-group-button-padding: 10px;--sky-override-vertical-tabset-group-content-padding-left: 0;--sky-override-vertical-tabset-group-gap: 5px;--sky-override-vertical-tabset-group-header-align-items: flex-start;--sky-override-vertical-tabset-group-header-background-color: transparent;--sky-override-vertical-tabset-group-margin: 5px 0 5px 5px}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-vertical-tabset-group{--sky-override-tabset-group-expansion-indicator-position: absolute;--sky-override-tabset-group-header-position: relative;--sky-override-vertical-tabset-button-disabled-font-color: buttontext;--sky-override-vertical-tabset-group-button-font-color: buttontext;--sky-override-vertical-tabset-group-gap: var(--modern-size-15);--sky-override-vertical-tabset-group-margin: var(--modern-size-15) 0}.sky-vertical-tabset-group{border-bottom:var(--sky-override-vertical-tabset-group-border, none);margin:var(--sky-override-vertical-tabset-group-margin)}:host:has(~sky-vertical-tabset-group) .sky-vertical-tabset-group{margin-bottom:var(--sky-override-vertical-tabset-group-gap, var(--sky-space-gap-action_group-l))}.sky-vertical-tabset-group-header{position:var(--sky-override-tabset-group-header-position, initial)}.sky-vertical-tabset-group-header button{color:var(--sky-override-vertical-tabset-group-button-font-color, var(--sky-color-text-default));padding:var(--sky-override-vertical-tabset-group-button-padding, var(--sky-space-inset-balanced-s));cursor:pointer;display:flex;justify-content:space-between;border:none;width:100%;text-align:left;align-items:var(--sky-override-vertical-tabset-group-header-align-items, center);background-color:var(--sky-override-vertical-tabset-group-header-background-color, var(--sky-color-background-nav-base))}.sky-vertical-tabset-group-header button.sky-vertical-tabset-button-disabled{pointer-events:none;color:var(--sky-override-vertical-tabset-button-disabled-font-color, var(--sky-color-text-deemphasized))}.sky-vertical-tabset-group-header .sky-vertical-tabset-group-expansion-indicator{position:var(--sky-override-tabset-group-expansion-indicator-position, initial);top:6px;right:5px}.sky-vertical-tabset-group-header:has(.sky-vertical-tabset-button-disabled){cursor:not-allowed}.sky-vertical-tabset-group-content{overflow:hidden;border-top:var(--sky-override-vertical-tabset-group-border, none);padding-left:var(--sky-override-vertical-tabset-group-content-padding-left, var(--sky-space-inline-s))}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i7.λ15, selector: "sky-expansion-indicator", inputs: ["direction"] }], animations: [skyAnimationSlide], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
702
703
|
}
|
|
703
704
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyVerticalTabsetGroupComponent, decorators: [{
|
|
704
705
|
type: Component,
|
|
705
|
-
args: [{ selector: 'sky-vertical-tabset-group', changeDetection: ChangeDetectionStrategy.OnPush, animations: [skyAnimationSlide], providers: [SkyVerticalTabsetGroupService], standalone: false, 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 }\"\n >\n <button\n #groupHeadingButton\n class=\"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 >\n {{ groupHeading }}\n <sky-expansion-indicator\n class=\"sky-vertical-tabset-group-expansion-indicator\"\n [direction]=\"!disabled && open ? 'up' : 'down'\"\n />\n </button>\n </div>\n <div\n #groupContent\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 >\n <ng-content />\n </div>\n</div>\n", styles: [".sky-vertical-tabset-group:not(.sky-theme-modern *){--sky-override-vertical-tabset-button-disabled-font-color: buttontext;--sky-override-vertical-tabset-group-border: 1px solid #e2e3e4;--sky-override-vertical-tabset-group-button-font-color: buttontext;--sky-override-vertical-tabset-group-button-padding: 10px;--sky-override-vertical-tabset-group-content-padding-left: 0;--sky-override-vertical-tabset-group-gap: 5px;--sky-override-vertical-tabset-group-header-align-items: flex-start;--sky-override-vertical-tabset-group-header-background-color: transparent;--sky-override-vertical-tabset-group-margin: 5px 0 5px 5px}:host-context(.sky-theme-modern:not(.sky-theme-brand-
|
|
706
|
+
args: [{ selector: 'sky-vertical-tabset-group', changeDetection: ChangeDetectionStrategy.OnPush, animations: [skyAnimationSlide], providers: [SkyVerticalTabsetGroupService], standalone: false, 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 }\"\n >\n <button\n #groupHeadingButton\n class=\"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 >\n {{ groupHeading }}\n <sky-expansion-indicator\n class=\"sky-vertical-tabset-group-expansion-indicator\"\n [direction]=\"!disabled && open ? 'up' : 'down'\"\n />\n </button>\n </div>\n <div\n #groupContent\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 >\n <ng-content />\n </div>\n</div>\n", styles: [".sky-vertical-tabset-group:not(.sky-theme-modern *){--sky-override-vertical-tabset-button-disabled-font-color: buttontext;--sky-override-vertical-tabset-group-border: 1px solid #e2e3e4;--sky-override-vertical-tabset-group-button-font-color: buttontext;--sky-override-vertical-tabset-group-button-padding: 10px;--sky-override-vertical-tabset-group-content-padding-left: 0;--sky-override-vertical-tabset-group-gap: 5px;--sky-override-vertical-tabset-group-header-align-items: flex-start;--sky-override-vertical-tabset-group-header-background-color: transparent;--sky-override-vertical-tabset-group-margin: 5px 0 5px 5px}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-vertical-tabset-group{--sky-override-tabset-group-expansion-indicator-position: absolute;--sky-override-tabset-group-header-position: relative;--sky-override-vertical-tabset-button-disabled-font-color: buttontext;--sky-override-vertical-tabset-group-button-font-color: buttontext;--sky-override-vertical-tabset-group-gap: var(--modern-size-15);--sky-override-vertical-tabset-group-margin: var(--modern-size-15) 0}.sky-vertical-tabset-group{border-bottom:var(--sky-override-vertical-tabset-group-border, none);margin:var(--sky-override-vertical-tabset-group-margin)}:host:has(~sky-vertical-tabset-group) .sky-vertical-tabset-group{margin-bottom:var(--sky-override-vertical-tabset-group-gap, var(--sky-space-gap-action_group-l))}.sky-vertical-tabset-group-header{position:var(--sky-override-tabset-group-header-position, initial)}.sky-vertical-tabset-group-header button{color:var(--sky-override-vertical-tabset-group-button-font-color, var(--sky-color-text-default));padding:var(--sky-override-vertical-tabset-group-button-padding, var(--sky-space-inset-balanced-s));cursor:pointer;display:flex;justify-content:space-between;border:none;width:100%;text-align:left;align-items:var(--sky-override-vertical-tabset-group-header-align-items, center);background-color:var(--sky-override-vertical-tabset-group-header-background-color, var(--sky-color-background-nav-base))}.sky-vertical-tabset-group-header button.sky-vertical-tabset-button-disabled{pointer-events:none;color:var(--sky-override-vertical-tabset-button-disabled-font-color, var(--sky-color-text-deemphasized))}.sky-vertical-tabset-group-header .sky-vertical-tabset-group-expansion-indicator{position:var(--sky-override-tabset-group-expansion-indicator-position, initial);top:6px;right:5px}.sky-vertical-tabset-group-header:has(.sky-vertical-tabset-button-disabled){cursor:not-allowed}.sky-vertical-tabset-group-content{overflow:hidden;border-top:var(--sky-override-vertical-tabset-group-border, none);padding-left:var(--sky-override-vertical-tabset-group-content-padding-left, var(--sky-space-inline-s))}\n"] }]
|
|
706
707
|
}], ctorParameters: () => [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
|
|
707
708
|
type: Input
|
|
708
709
|
}], groupHeading: [{
|
|
@@ -823,7 +824,7 @@ class SkyVerticalTabsetComponent {
|
|
|
823
824
|
this.adapterService.focusPreviousButton(this.tabGroups);
|
|
824
825
|
}
|
|
825
826
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyVerticalTabsetComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: SkyVerticalTabsetService }, { token: i3$1.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }, { token: SkyTabIdService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
826
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyVerticalTabsetComponent, isStandalone: false, selector: "sky-vertical-tabset", inputs: { showTabsText: "showTabsText", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole", maintainTabContent: "maintainTabContent" }, outputs: { activeChange: "activeChange" }, providers: [SkyTabIdService, SkyVerticalTabsetService], viewQueries: [{ propertyName: "tabGroups", first: true, predicate: ["groupContainerWrapper"], descendants: true }, { propertyName: "content", first: true, predicate: ["skySideContent"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentContainerWrapper"], descendants: true }], ngImport: i0, template: "<div\n class=\"sky-vertical-tabset\"\n [tabIndex]=\"tablistHasFocus ? -1 : 0\"\n (focus)=\"tabsetFocus()\"\n>\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 class=\"sky-vertical-tabset-tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-owns]=\"(tabIdSvc.ids | async)?.join(' ') || undefined\"\n [attr.role]=\"isMobile ? undefined : ariaRole\"\n ></span>\n @if (maintainTabContent || tabService.tabsVisible()) {\n <div\n #groupContainerWrapper\n class=\"sky-vertical-tabset-group-container\"\n [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n (@tabGroupEnter.done)=\"tabsetFocus()\"\n (keydown.arrowdown)=\"tabGroupsArrowDown(); $event.preventDefault()\"\n (keydown.arrowup)=\"tabGroupsArrowUp(); $event.preventDefault()\"\n (focusin)=\"trapFocusInTablist()\"\n (focusout)=\"resetTabIndex()\"\n >\n <ng-content />\n </div>\n }\n @if (maintainTabContent || tabService.contentVisible()) {\n <div\n #contentContainerWrapper\n class=\"sky-vertical-tabset-content\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n (focusin)=\"resetTabIndex()\"\n >\n <div #skySideContent></div>\n @if (!tabService.tabsVisible()) {\n <button\n class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n type=\"button\"\n (click)=\"tabService.showTabs()\"\n >\n <sky-icon
|
|
827
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyVerticalTabsetComponent, isStandalone: false, selector: "sky-vertical-tabset", inputs: { showTabsText: "showTabsText", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole", maintainTabContent: "maintainTabContent" }, outputs: { activeChange: "activeChange" }, providers: [SkyTabIdService, SkyVerticalTabsetService], viewQueries: [{ propertyName: "tabGroups", first: true, predicate: ["groupContainerWrapper"], descendants: true }, { propertyName: "content", first: true, predicate: ["skySideContent"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentContainerWrapper"], descendants: true }], ngImport: i0, template: "<div\n class=\"sky-vertical-tabset\"\n [tabIndex]=\"tablistHasFocus ? -1 : 0\"\n (focus)=\"tabsetFocus()\"\n>\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 class=\"sky-vertical-tabset-tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-owns]=\"(tabIdSvc.ids | async)?.join(' ') || undefined\"\n [attr.role]=\"isMobile ? undefined : ariaRole\"\n ></span>\n @if (maintainTabContent || tabService.tabsVisible()) {\n <div\n #groupContainerWrapper\n class=\"sky-vertical-tabset-group-container\"\n [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n (@tabGroupEnter.done)=\"tabsetFocus()\"\n (keydown.arrowdown)=\"tabGroupsArrowDown(); $event.preventDefault()\"\n (keydown.arrowup)=\"tabGroupsArrowUp(); $event.preventDefault()\"\n (focusin)=\"trapFocusInTablist()\"\n (focusout)=\"resetTabIndex()\"\n >\n <ng-content />\n </div>\n }\n @if (maintainTabContent || tabService.contentVisible()) {\n <div\n #contentContainerWrapper\n class=\"sky-vertical-tabset-content\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n (focusin)=\"resetTabIndex()\"\n >\n <div #skySideContent></div>\n @if (!tabService.tabsVisible()) {\n <button\n class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n type=\"button\"\n (click)=\"tabService.showTabs()\"\n >\n <sky-icon iconName=\"chevron-left\" />\n {{ showTabsText }}\n </button>\n }\n </div>\n }\n</div>\n", styles: [".sky-vertical-tabset:not(.sky-theme-modern *){--sky-override-vertical-tab-content-pane-margin-bottom: 0;--sky-override-vertical-tabset-content-margin-sm-lg: 10px 0 0 10px;--sky-override-vertical-tabset-content-margin-xs: 10px 0 0 10px;--sky-override-vertical-tabset-group-container-border-right: 1px solid #cdcfd2;--sky-override-vertical-tabset-group-container-padding: 0;--sky-override-vertical-tabset-modal-margin-adjustment: -15px;--sky-override-vertical-tabset-modal-margin-adjustment-with-group: -15px;--sky-override-vertical-tabset-show-tabs-margin-top: 10px}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-vertical-tabset{--sky-override-vertical-tab-content-pane-margin-bottom: 0;--sky-override-vertical-tabset-content-margin-sm-lg: var(--modern-size-20) var(--modern-size-30);--sky-override-vertical-tabset-content-margin-xs: var(--modern-size-15);--sky-override-vertical-tabset-group-container-padding: 0;--sky-override-vertical-tabset-modal-margin-adjustment: calc( var(--modern-size-15) * -1 );--sky-override-vertical-tabset-modal-margin-adjustment-with-group: calc( var(--modern-size-15) * -1 );--sky-override-vertical-tabset-show-tabs-margin-top: var(--modern-size-10)}:host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:var(--sky-override-vertical-tabset-group-container-border-right, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:var(--sky-override-vertical-tabset-group-container-border-right, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:var(--sky-override-vertical-tabset-content-margin-xs, var(--sky-space-inset-balanced-m));flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:var(--sky-override-vertical-tabset-show-tabs-margin-top, 0)}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto;padding:var(--sky-override-vertical-tabset-group-container-padding, var(--sky-space-inset-vertical-top-m) 0 var(--sky-space-inset-vertical-bottom-m))}:host-context(sky-modal-content)>:host .sky-vertical-tabset{margin:var(--sky-override-vertical-tabset-modal-margin-adjustment, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) calc(var(--sky-space-inset-floated-bottom-m) * -1) calc((var(--sky-space-inset-pillarbox-2_3-left-m) + var(--sky-space-inline-s)) * -1))}:host-context(sky-modal-content)>:host .sky-vertical-tabset:has(sky-vertical-tabset-group){margin-left:var(--sky-override-vertical-tabset-modal-margin-adjustment-with-group, calc(var(--sky-space-inset-balanced-s) * -1))}@media (min-width: 768px){:host .sky-vertical-tabset-content{margin:var(--sky-override-vertical-tabset-content-margin-sm-lg, var(--sky-space-inset-pillarbox-2_3-top-m) var(--sky-space-inset-pillarbox-2_3-right-m) var(--sky-space-inset-pillarbox-2_3-bottom-m) var(--sky-space-inset-pillarbox-2_3-left-m))}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:var(--sky-override-vertical-tabset-content-margin-sm-lg, var(--sky-space-inset-pillarbox-2_3-top-m) var(--sky-space-inset-pillarbox-2_3-right-m) var(--sky-space-inset-pillarbox-2_3-bottom-m) var(--sky-space-inset-pillarbox-2_3-left-m))}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], animations: [
|
|
827
828
|
trigger('tabGroupEnter', [
|
|
828
829
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
829
830
|
style({ transform: 'translate(-100%)' }),
|
|
@@ -853,7 +854,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
853
854
|
animate('150ms ease-in'),
|
|
854
855
|
]),
|
|
855
856
|
]),
|
|
856
|
-
], standalone: false, template: "<div\n class=\"sky-vertical-tabset\"\n [tabIndex]=\"tablistHasFocus ? -1 : 0\"\n (focus)=\"tabsetFocus()\"\n>\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 class=\"sky-vertical-tabset-tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-owns]=\"(tabIdSvc.ids | async)?.join(' ') || undefined\"\n [attr.role]=\"isMobile ? undefined : ariaRole\"\n ></span>\n @if (maintainTabContent || tabService.tabsVisible()) {\n <div\n #groupContainerWrapper\n class=\"sky-vertical-tabset-group-container\"\n [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n (@tabGroupEnter.done)=\"tabsetFocus()\"\n (keydown.arrowdown)=\"tabGroupsArrowDown(); $event.preventDefault()\"\n (keydown.arrowup)=\"tabGroupsArrowUp(); $event.preventDefault()\"\n (focusin)=\"trapFocusInTablist()\"\n (focusout)=\"resetTabIndex()\"\n >\n <ng-content />\n </div>\n }\n @if (maintainTabContent || tabService.contentVisible()) {\n <div\n #contentContainerWrapper\n class=\"sky-vertical-tabset-content\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n (focusin)=\"resetTabIndex()\"\n >\n <div #skySideContent></div>\n @if (!tabService.tabsVisible()) {\n <button\n class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n type=\"button\"\n (click)=\"tabService.showTabs()\"\n >\n <sky-icon
|
|
857
|
+
], standalone: false, template: "<div\n class=\"sky-vertical-tabset\"\n [tabIndex]=\"tablistHasFocus ? -1 : 0\"\n (focus)=\"tabsetFocus()\"\n>\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 class=\"sky-vertical-tabset-tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-owns]=\"(tabIdSvc.ids | async)?.join(' ') || undefined\"\n [attr.role]=\"isMobile ? undefined : ariaRole\"\n ></span>\n @if (maintainTabContent || tabService.tabsVisible()) {\n <div\n #groupContainerWrapper\n class=\"sky-vertical-tabset-group-container\"\n [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n (@tabGroupEnter.done)=\"tabsetFocus()\"\n (keydown.arrowdown)=\"tabGroupsArrowDown(); $event.preventDefault()\"\n (keydown.arrowup)=\"tabGroupsArrowUp(); $event.preventDefault()\"\n (focusin)=\"trapFocusInTablist()\"\n (focusout)=\"resetTabIndex()\"\n >\n <ng-content />\n </div>\n }\n @if (maintainTabContent || tabService.contentVisible()) {\n <div\n #contentContainerWrapper\n class=\"sky-vertical-tabset-content\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n (focusin)=\"resetTabIndex()\"\n >\n <div #skySideContent></div>\n @if (!tabService.tabsVisible()) {\n <button\n class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n type=\"button\"\n (click)=\"tabService.showTabs()\"\n >\n <sky-icon iconName=\"chevron-left\" />\n {{ showTabsText }}\n </button>\n }\n </div>\n }\n</div>\n", styles: [".sky-vertical-tabset:not(.sky-theme-modern *){--sky-override-vertical-tab-content-pane-margin-bottom: 0;--sky-override-vertical-tabset-content-margin-sm-lg: 10px 0 0 10px;--sky-override-vertical-tabset-content-margin-xs: 10px 0 0 10px;--sky-override-vertical-tabset-group-container-border-right: 1px solid #cdcfd2;--sky-override-vertical-tabset-group-container-padding: 0;--sky-override-vertical-tabset-modal-margin-adjustment: -15px;--sky-override-vertical-tabset-modal-margin-adjustment-with-group: -15px;--sky-override-vertical-tabset-show-tabs-margin-top: 10px}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-vertical-tabset{--sky-override-vertical-tab-content-pane-margin-bottom: 0;--sky-override-vertical-tabset-content-margin-sm-lg: var(--modern-size-20) var(--modern-size-30);--sky-override-vertical-tabset-content-margin-xs: var(--modern-size-15);--sky-override-vertical-tabset-group-container-padding: 0;--sky-override-vertical-tabset-modal-margin-adjustment: calc( var(--modern-size-15) * -1 );--sky-override-vertical-tabset-modal-margin-adjustment-with-group: calc( var(--modern-size-15) * -1 );--sky-override-vertical-tabset-show-tabs-margin-top: var(--modern-size-10)}:host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:var(--sky-override-vertical-tabset-group-container-border-right, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:var(--sky-override-vertical-tabset-group-container-border-right, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:var(--sky-override-vertical-tabset-content-margin-xs, var(--sky-space-inset-balanced-m));flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:var(--sky-override-vertical-tabset-show-tabs-margin-top, 0)}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto;padding:var(--sky-override-vertical-tabset-group-container-padding, var(--sky-space-inset-vertical-top-m) 0 var(--sky-space-inset-vertical-bottom-m))}:host-context(sky-modal-content)>:host .sky-vertical-tabset{margin:var(--sky-override-vertical-tabset-modal-margin-adjustment, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) calc(var(--sky-space-inset-floated-bottom-m) * -1) calc((var(--sky-space-inset-pillarbox-2_3-left-m) + var(--sky-space-inline-s)) * -1))}:host-context(sky-modal-content)>:host .sky-vertical-tabset:has(sky-vertical-tabset-group){margin-left:var(--sky-override-vertical-tabset-modal-margin-adjustment-with-group, calc(var(--sky-space-inset-balanced-s) * -1))}@media (min-width: 768px){:host .sky-vertical-tabset-content{margin:var(--sky-override-vertical-tabset-content-margin-sm-lg, var(--sky-space-inset-pillarbox-2_3-top-m) var(--sky-space-inset-pillarbox-2_3-right-m) var(--sky-space-inset-pillarbox-2_3-bottom-m) var(--sky-space-inset-pillarbox-2_3-left-m))}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:var(--sky-override-vertical-tabset-content-margin-sm-lg, var(--sky-space-inset-pillarbox-2_3-top-m) var(--sky-space-inset-pillarbox-2_3-right-m) var(--sky-space-inset-pillarbox-2_3-bottom-m) var(--sky-space-inset-pillarbox-2_3-left-m))}\n"] }]
|
|
857
858
|
}], ctorParameters: () => [{ type: SkyVerticalTabsetAdapterService }, { type: SkyVerticalTabsetService }, { type: i3$1.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }, { type: SkyTabIdService }], propDecorators: { showTabsText: [{
|
|
858
859
|
type: Input
|
|
859
860
|
}], ariaLabel: [{
|
|
@@ -1149,7 +1150,7 @@ class SkySectionedFormComponent {
|
|
|
1149
1150
|
});
|
|
1150
1151
|
}
|
|
1151
1152
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }, { token: SkyTabIdService }, { token: i3.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1152
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkySectionedFormComponent, isStandalone: false, 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 @if (maintainSectionContent || tabsVisible()) {\n <div\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 />\n </div>\n }\n @if (maintainSectionContent || tabService.contentVisible()) {\n <div\n #skySectionSideContent\n class=\"sky-sectioned-form-content\"\n [ngClass]=\"{\n 'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n ></div>\n }\n</div>\n", styles: [".sky-sectioned-form:not(.sky-theme-modern *){--sky-override-sectioned-form-content-border-left: 1px solid var(--sky-border-color-neutral-medium);--sky-override-sectioned-form-content-padding: var(--sky-padding-even-md) var(--sky-padding-even-xl);--sky-override-sectioned-form-modal-margin-adjustment: -15px;--sky-override-sectioned-form-tabs-only-padding: var(--sky-padding-even-md);--sky-override-sectioned-form-tabs-padding: 0}:host-context(.sky-theme-modern:not(.sky-theme-brand-
|
|
1153
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkySectionedFormComponent, isStandalone: false, 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 @if (maintainSectionContent || tabsVisible()) {\n <div\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 />\n </div>\n }\n @if (maintainSectionContent || tabService.contentVisible()) {\n <div\n #skySectionSideContent\n class=\"sky-sectioned-form-content\"\n [ngClass]=\"{\n 'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n ></div>\n }\n</div>\n", styles: [".sky-sectioned-form:not(.sky-theme-modern *){--sky-override-sectioned-form-content-border-left: 1px solid var(--sky-border-color-neutral-medium);--sky-override-sectioned-form-content-padding: var(--sky-padding-even-md) var(--sky-padding-even-xl);--sky-override-sectioned-form-modal-margin-adjustment: -15px;--sky-override-sectioned-form-tabs-only-padding: var(--sky-padding-even-md);--sky-override-sectioned-form-tabs-padding: 0}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-sectioned-form{--sky-override-sectioned-form-content-padding: var(--sky-padding-even-md) var(--sky-padding-even-xl);--sky-override-sectioned-form-tabs-padding: 0}:host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible;padding:var(--sky-override-sectioned-form-content-padding, var(--sky-space-inset-floated-top-m) var(--sky-space-inset-floated-right-m) var(--sky-space-inset-floated-bottom-m) var(--sky-space-inset-floated-left-m))}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;padding:var(--sky-override-sectioned-form-tabs-padding, var(--sky-space-inset-vertical-top-m) 0 var(--sky-space-inset-vertical-bottom-m))}:host .sky-sectioned-form-tabs+.sky-sectioned-form-content{border-left:var(--sky-override-sectioned-form-content-border-left, var(--sky-border-width-divider) solid var(--sky-color-border-divider))}:host .sky-sectioned-form-tabs-only{padding:var(--sky-override-sectioned-form-tabs-only-padding, var(--sky-space-inset-balanced-m))}: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;padding:var(--sky-override-sectioned-form-content-padding, var(--sky-space-inset-floated-top-m) var(--sky-space-inset-floated-right-m) var(--sky-space-inset-floated-bottom-m) var(--sky-space-inset-floated-left-m))}: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;padding:var(--sky-override-sectioned-form-tabs-padding, var(--sky-space-inset-vertical-top-m) 0 var(--sky-space-inset-vertical-bottom-m))}: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:var(--sky-override-sectioned-form-content-border-left, var(--sky-border-width-divider) solid var(--sky-color-border-divider))}: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-override-sectioned-form-tabs-only-padding, var(--sky-space-inset-balanced-m))}@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}:host-context(sky-modal) .sky-sectioned-form{min-height:460px}:host-context(sky-modal-content)>:host .sky-sectioned-form,:host-context(sky-modal-content)>form :host .sky-sectioned-form{margin:var(--sky-override-sectioned-form-modal-margin-adjustment, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) calc(var(--sky-space-inset-floated-bottom-m) * -1) calc(var(--sky-space-inset-floated-left-m) * -1))}.sky-sectioned-form-tabs-hidden,.sky-sectioned-form-content-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
1153
1154
|
trigger('tabEnter', [
|
|
1154
1155
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
1155
1156
|
style({ transform: 'translate(-100%)' }),
|
|
@@ -1179,7 +1180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
1179
1180
|
animate('150ms ease-in'),
|
|
1180
1181
|
]),
|
|
1181
1182
|
]),
|
|
1182
|
-
], standalone: false, 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 @if (maintainSectionContent || tabsVisible()) {\n <div\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 />\n </div>\n }\n @if (maintainSectionContent || tabService.contentVisible()) {\n <div\n #skySectionSideContent\n class=\"sky-sectioned-form-content\"\n [ngClass]=\"{\n 'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n ></div>\n }\n</div>\n", styles: [".sky-sectioned-form:not(.sky-theme-modern *){--sky-override-sectioned-form-content-border-left: 1px solid var(--sky-border-color-neutral-medium);--sky-override-sectioned-form-content-padding: var(--sky-padding-even-md) var(--sky-padding-even-xl);--sky-override-sectioned-form-modal-margin-adjustment: -15px;--sky-override-sectioned-form-tabs-only-padding: var(--sky-padding-even-md);--sky-override-sectioned-form-tabs-padding: 0}:host-context(.sky-theme-modern:not(.sky-theme-brand-
|
|
1183
|
+
], standalone: false, 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 @if (maintainSectionContent || tabsVisible()) {\n <div\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 />\n </div>\n }\n @if (maintainSectionContent || tabService.contentVisible()) {\n <div\n #skySectionSideContent\n class=\"sky-sectioned-form-content\"\n [ngClass]=\"{\n 'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n ></div>\n }\n</div>\n", styles: [".sky-sectioned-form:not(.sky-theme-modern *){--sky-override-sectioned-form-content-border-left: 1px solid var(--sky-border-color-neutral-medium);--sky-override-sectioned-form-content-padding: var(--sky-padding-even-md) var(--sky-padding-even-xl);--sky-override-sectioned-form-modal-margin-adjustment: -15px;--sky-override-sectioned-form-tabs-only-padding: var(--sky-padding-even-md);--sky-override-sectioned-form-tabs-padding: 0}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-sectioned-form{--sky-override-sectioned-form-content-padding: var(--sky-padding-even-md) var(--sky-padding-even-xl);--sky-override-sectioned-form-tabs-padding: 0}:host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible;padding:var(--sky-override-sectioned-form-content-padding, var(--sky-space-inset-floated-top-m) var(--sky-space-inset-floated-right-m) var(--sky-space-inset-floated-bottom-m) var(--sky-space-inset-floated-left-m))}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;padding:var(--sky-override-sectioned-form-tabs-padding, var(--sky-space-inset-vertical-top-m) 0 var(--sky-space-inset-vertical-bottom-m))}:host .sky-sectioned-form-tabs+.sky-sectioned-form-content{border-left:var(--sky-override-sectioned-form-content-border-left, var(--sky-border-width-divider) solid var(--sky-color-border-divider))}:host .sky-sectioned-form-tabs-only{padding:var(--sky-override-sectioned-form-tabs-only-padding, var(--sky-space-inset-balanced-m))}: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;padding:var(--sky-override-sectioned-form-content-padding, var(--sky-space-inset-floated-top-m) var(--sky-space-inset-floated-right-m) var(--sky-space-inset-floated-bottom-m) var(--sky-space-inset-floated-left-m))}: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;padding:var(--sky-override-sectioned-form-tabs-padding, var(--sky-space-inset-vertical-top-m) 0 var(--sky-space-inset-vertical-bottom-m))}: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:var(--sky-override-sectioned-form-content-border-left, var(--sky-border-width-divider) solid var(--sky-color-border-divider))}: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-override-sectioned-form-tabs-only-padding, var(--sky-space-inset-balanced-m))}@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}:host-context(sky-modal) .sky-sectioned-form{min-height:460px}:host-context(sky-modal-content)>:host .sky-sectioned-form,:host-context(sky-modal-content)>form :host .sky-sectioned-form{margin:var(--sky-override-sectioned-form-modal-margin-adjustment, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) calc(var(--sky-space-inset-floated-bottom-m) * -1) calc(var(--sky-space-inset-floated-left-m) * -1))}.sky-sectioned-form-tabs-hidden,.sky-sectioned-form-content-hidden{display:none}\n"] }]
|
|
1183
1184
|
}], ctorParameters: () => [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }, { type: SkyTabIdService }, { type: i3.SkyLogService }], propDecorators: { maintainSectionContent: [{
|
|
1184
1185
|
type: Input
|
|
1185
1186
|
}], messageStream: [{
|
|
@@ -1539,11 +1540,11 @@ class SkyTabButtonComponent {
|
|
|
1539
1540
|
this.#changeDetectorRef.markForCheck();
|
|
1540
1541
|
}
|
|
1541
1542
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTabButtonComponent, deps: [{ token: i0.ElementRef }, { token: SkyTabButtonAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1542
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyTabButtonComponent, isStandalone: false, 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 #tabHeading=\"skyId\" skyId>\n {{ buttonText }}\n @if (buttonTextCount !== undefined) {\n <span class=\"sky-tab-header-count\">\n {{ buttonTextCount }}\n </span>\n }\n </span>\n @if (closeable) {\n <span\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
|
|
1543
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyTabButtonComponent, isStandalone: false, 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 #tabHeading=\"skyId\" skyId>\n {{ buttonText }}\n @if (buttonTextCount !== undefined) {\n <span class=\"sky-tab-header-count\">\n {{ buttonTextCount }}\n </span>\n }\n </span>\n @if (closeable) {\n <span\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 iconName=\"close\" />\n </span>\n }\n </span>\n </a>\n</div>\n", styles: ["sky-tab-button:not(.sky-theme-modern *){--sky-override-closeable-tab-padding-right: 43px;--sky-override-tab-close-active-hover-color: #fff;--sky-override-tab-close-color: #686c73;--sky-override-tab-close-hover-color: #212327;--sky-override-tab-close-padding: 1px 6px;--sky-override-tab-close-position-right: 10px;--sky-override-tab-close-position-top: 10px;--sky-override-tab-margin-right: 5px}.sky-theme-modern:not(.sky-theme-brand-base) sky-tab-button{--sky-override-closeable-tab-padding-right: 44px;--sky-override-tab-close-padding: var(--modern-size-1) var(--modern-size-6);--sky-override-tab-close-position-right: var(--modern-size-10);--sky-override-tab-close-position-top: var(--modern-size-12)}.sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:var(--sky-override-tab-margin-right, var(--sky-space-gap-action_group-m))}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:var(--sky-override-tab-close-position-top, var(--sky-space-gap-icon-m));right:var(--sky-override-tab-close-position-right, var(--sky-space-gap-icon-m));color:var(--sky-override-tab-close-color, var(--sky-color-icon-deemphasized));padding:var(--sky-override-tab-close-padding, 0 var(--sky-space-inset-balanced-xs))}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:var(--sky-override-tab-close-hover-color, var(--sky-color-icon-default));transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:var(--sky-override-tab-close-active-hover-color, var(--sky-color-icon-deemphasized))}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-btn-tab-wrapper .sky-tab-btn-closeable{padding-right:var(--sky-override-closeable-tab-padding-right, calc(var(--sky-space-inset-pillarbox-2_3-right-m) + var(--sky-space-gap-text_action-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-font-size-body-m)))}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1543
1544
|
}
|
|
1544
1545
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTabButtonComponent, decorators: [{
|
|
1545
1546
|
type: Component,
|
|
1546
|
-
args: [{ selector: 'sky-tab-button', providers: [SkyTabButtonAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, 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 #tabHeading=\"skyId\" skyId>\n {{ buttonText }}\n @if (buttonTextCount !== undefined) {\n <span class=\"sky-tab-header-count\">\n {{ buttonTextCount }}\n </span>\n }\n </span>\n @if (closeable) {\n <span\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
|
|
1547
|
+
args: [{ selector: 'sky-tab-button', providers: [SkyTabButtonAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, 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 #tabHeading=\"skyId\" skyId>\n {{ buttonText }}\n @if (buttonTextCount !== undefined) {\n <span class=\"sky-tab-header-count\">\n {{ buttonTextCount }}\n </span>\n }\n </span>\n @if (closeable) {\n <span\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 iconName=\"close\" />\n </span>\n }\n </span>\n </a>\n</div>\n", styles: ["sky-tab-button:not(.sky-theme-modern *){--sky-override-closeable-tab-padding-right: 43px;--sky-override-tab-close-active-hover-color: #fff;--sky-override-tab-close-color: #686c73;--sky-override-tab-close-hover-color: #212327;--sky-override-tab-close-padding: 1px 6px;--sky-override-tab-close-position-right: 10px;--sky-override-tab-close-position-top: 10px;--sky-override-tab-margin-right: 5px}.sky-theme-modern:not(.sky-theme-brand-base) sky-tab-button{--sky-override-closeable-tab-padding-right: 44px;--sky-override-tab-close-padding: var(--modern-size-1) var(--modern-size-6);--sky-override-tab-close-position-right: var(--modern-size-10);--sky-override-tab-close-position-top: var(--modern-size-12)}.sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:var(--sky-override-tab-margin-right, var(--sky-space-gap-action_group-m))}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:var(--sky-override-tab-close-position-top, var(--sky-space-gap-icon-m));right:var(--sky-override-tab-close-position-right, var(--sky-space-gap-icon-m));color:var(--sky-override-tab-close-color, var(--sky-color-icon-deemphasized));padding:var(--sky-override-tab-close-padding, 0 var(--sky-space-inset-balanced-xs))}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:var(--sky-override-tab-close-hover-color, var(--sky-color-icon-default));transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:var(--sky-override-tab-close-active-hover-color, var(--sky-color-icon-deemphasized))}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-btn-tab-wrapper .sky-tab-btn-closeable{padding-right:var(--sky-override-closeable-tab-padding-right, calc(var(--sky-space-inset-pillarbox-2_3-right-m) + var(--sky-space-gap-text_action-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-space-inset-balanced-xs) + var(--sky-font-size-body-m)))}\n"] }]
|
|
1547
1548
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: SkyTabButtonAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyTabsetService }], propDecorators: { active: [{
|
|
1548
1549
|
type: Input
|
|
1549
1550
|
}], ariaControls: [{
|
|
@@ -2546,7 +2547,7 @@ class SkyTabsetComponent {
|
|
|
2546
2547
|
SkyTabsetAdapterService,
|
|
2547
2548
|
SkyTabsetPermalinkService,
|
|
2548
2549
|
SkyTabsetService,
|
|
2549
|
-
], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<div\n class=\"sky-tabset\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [ngClass]=\"\n 'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n \"\n (window:resize)=\"onWindowResize()\"\n (keydown.arrowright)=\"onRightKeyDown()\"\n (keydown.arrowleft)=\"onLeftKeyDown()\"\n (keydown.home)=\"onHomeKeyDown()\"\n (keydown.end)=\"onEndKeyDown()\"\n>\n <span class=\"sky-tabset-dropdown\">\n @if (tabDisplayMode === 'dropdown') {\n <sky-dropdown buttonType=\"tab\">\n <sky-dropdown-button>\n {{ dropdownTriggerButtonText }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n @for (tabButton of tabButtons; track tabButton.buttonId) {\n <sky-dropdown-item class=\"sky-tab-dropdown-menu-item\">\n <div\n class=\"sky-tab-dropdown-item\"\n [ngClass]=\"{\n 'sky-tab-dropdown-item-selected': tabButton.active\n }\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n />\n </div>\n </sky-dropdown-item>\n }\n </sky-dropdown-menu>\n </sky-dropdown>\n }\n </span>\n <span class=\"sky-tabset-tabs\">\n @for (tabButton of tabButtons; track tabButton.buttonId) {\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n />\n }\n </span>\n <span class=\"sky-tabset-btns\">\n @if (newTab.observers.length > 0) {\n <button\n class=\"sky-btn sky-btn-icon sky-tabset-btn-new\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-compact': 'default'\n }\"\n (click)=\"onNewTabClick()\"\n >\n <sky-icon
|
|
2550
|
+
], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<div\n class=\"sky-tabset\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [ngClass]=\"\n 'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n \"\n (window:resize)=\"onWindowResize()\"\n (keydown.arrowright)=\"onRightKeyDown()\"\n (keydown.arrowleft)=\"onLeftKeyDown()\"\n (keydown.home)=\"onHomeKeyDown()\"\n (keydown.end)=\"onEndKeyDown()\"\n>\n <span class=\"sky-tabset-dropdown\">\n @if (tabDisplayMode === 'dropdown') {\n <sky-dropdown buttonType=\"tab\">\n <sky-dropdown-button>\n {{ dropdownTriggerButtonText }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n @for (tabButton of tabButtons; track tabButton.buttonId) {\n <sky-dropdown-item class=\"sky-tab-dropdown-menu-item\">\n <div\n class=\"sky-tab-dropdown-item\"\n [ngClass]=\"{\n 'sky-tab-dropdown-item-selected': tabButton.active\n }\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n />\n </div>\n </sky-dropdown-item>\n }\n </sky-dropdown-menu>\n </sky-dropdown>\n }\n </span>\n <span class=\"sky-tabset-tabs\">\n @for (tabButton of tabButtons; track tabButton.buttonId) {\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n />\n }\n </span>\n <span class=\"sky-tabset-btns\">\n @if (newTab.observers.length > 0) {\n <button\n class=\"sky-btn sky-btn-icon sky-tabset-btn-new\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-compact': 'default'\n }\"\n (click)=\"onNewTabClick()\"\n >\n <sky-icon iconName=\"add\" />\n </button>\n }\n @if (openTab.observers.length > 0) {\n <button\n class=\"sky-btn sky-btn-icon sky-tabset-btn-open\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-compact': 'default'\n }\"\n (click)=\"onOpenTabClick()\"\n >\n <sky-icon iconName=\"folder-open\" />\n </button>\n }\n </span>\n</div>\n<ng-content />\n\n<ng-template #tabButtonTemplate let-tabButton>\n <sky-tab-button\n [active]=\"tabButton.active\"\n [ariaControls]=\"tabButton.ariaControls\"\n [buttonHref]=\"tabButton.buttonHref\"\n [buttonId]=\"tabButton.buttonId\"\n [buttonText]=\"tabButton.buttonText\"\n [buttonTextCount]=\"tabButton.buttonTextCount\"\n [closeable]=\"tabButton.closeable\"\n [disabled]=\"tabButton.disabled\"\n [tabIndex]=\"tabButton.tabIndex\"\n [tabStyle]=\"tabStyle\"\n [tabNumber]=\"tabButton.tabNumber\"\n [totalTabsCount]=\"tabButton.totalTabsCount\"\n (buttonClick)=\"onTabButtonClick(tabButton)\"\n (closeClick)=\"onTabCloseClick(tabButton)\"\n />\n</ng-template>\n", styles: ["sky-tabset:not(.sky-theme-modern *){--sky-override-tabset-border-bottom: 2px solid #0974a1;--sky-override-tabset-button-color: #0974a1;--sky-override-tabset-button-group-padding-left: 10px;--sky-override-tabset-button-margin-right: 5px;--sky-override-tabset-modal-margin: 0 -15px 20px;--sky-override-tabset-modal-padding-left: 15px;--sky-override-tabset-modal-padding-none: 0;--sky-override-tabset-overflow: hidden;--sky-override-tabset-padding: 0 0 0 var(--sky-layout-host-tab-content-spacing, 15px);--sky-override-tabset-wizard-border-bottom: none;--sky-override-tabset-wizard-modal-margin: 0 0 20px}.sky-theme-modern.sky-theme-brand-base sky-tabset .sky-tabset-btn-new,.sky-theme-modern.sky-theme-brand-base sky-tabset .sky-tabset-btn-open{height:36px}sky-tabset.sky-tabset-layout-fit{position:absolute;inset:0;display:flex;flex-direction:column}sky-tabset.sky-tabset-layout-fit .sky-tabset{flex-grow:0}.sky-tabset{--sky-tabset-margin: 0;align-items:center;border-bottom:var(--sky-override-tabset-border-bottom, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider));display:flex;list-style-type:none;margin:var(--sky-tabset-margin);padding:var(--sky-override-tabset-padding, 0 0 0 var(--sky-layout-host-tab-content-spacing, var(--sky-space-inset-tabs-m)));white-space:nowrap;flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, var(--sky-override-tabset-overflow, visible));position:var(--sky-layout-host-content-position, static)}.sky-tabset.sky-tabset-style-wizard{border-bottom:var(--sky-override-tabset-wizard-border-bottom-style, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}.sky-modal-content .sky-tabset-style-tabs{--sky-tabset-margin: var( --sky-override-tabset-modal-margin, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) var(--sky-space-inset-floated-bottom-m) calc(var(--sky-space-inset-floated-left-m) * -1) );padding-left:var(--sky-override-tabset-modal-padding-left, var(--sky-space-inset-floated-left-m));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-right-m))}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-override-tabset-wizard-modal-margin, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) var(--sky-space-inset-floated-bottom-m) calc(var(--sky-space-inset-floated-left-m) * -1) );padding-left:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-left-m));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-right-m))}.sky-tabset-btns{order:1;padding-left:var(--sky-override-tabset-button-group-padding-left, var(--sky-space-gap-action_group-m))}.sky-tabset-btns .sky-tabset-btn-new,.sky-tabset-btns .sky-tabset-btn-open{margin-right:var(--sky-override-tabset-button-margin-right, var(--sky-space-gap-action_group-m))}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset.sky-tabset-mode-dropdown{overflow:hidden}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-dropdown-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:var(--sky-override-tabset-button-color, --sky-color-text-default)}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i5.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i5.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i5.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "directive", type: i7$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: ["active", "ariaControls", "buttonHref", "buttonId", "buttonText", "buttonTextCount", "closeable", "disabled", "tabIndex", "tabNumber", "totalTabsCount", "tabStyle"], outputs: ["buttonClick", "closeClick"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2550
2551
|
}
|
|
2551
2552
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTabsetComponent, decorators: [{
|
|
2552
2553
|
type: Component,
|
|
@@ -2554,7 +2555,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
2554
2555
|
SkyTabsetAdapterService,
|
|
2555
2556
|
SkyTabsetPermalinkService,
|
|
2556
2557
|
SkyTabsetService,
|
|
2557
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<div\n class=\"sky-tabset\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [ngClass]=\"\n 'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n \"\n (window:resize)=\"onWindowResize()\"\n (keydown.arrowright)=\"onRightKeyDown()\"\n (keydown.arrowleft)=\"onLeftKeyDown()\"\n (keydown.home)=\"onHomeKeyDown()\"\n (keydown.end)=\"onEndKeyDown()\"\n>\n <span class=\"sky-tabset-dropdown\">\n @if (tabDisplayMode === 'dropdown') {\n <sky-dropdown buttonType=\"tab\">\n <sky-dropdown-button>\n {{ dropdownTriggerButtonText }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n @for (tabButton of tabButtons; track tabButton.buttonId) {\n <sky-dropdown-item class=\"sky-tab-dropdown-menu-item\">\n <div\n class=\"sky-tab-dropdown-item\"\n [ngClass]=\"{\n 'sky-tab-dropdown-item-selected': tabButton.active\n }\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n />\n </div>\n </sky-dropdown-item>\n }\n </sky-dropdown-menu>\n </sky-dropdown>\n }\n </span>\n <span class=\"sky-tabset-tabs\">\n @for (tabButton of tabButtons; track tabButton.buttonId) {\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n />\n }\n </span>\n <span class=\"sky-tabset-btns\">\n @if (newTab.observers.length > 0) {\n <button\n class=\"sky-btn sky-btn-icon sky-tabset-btn-new\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-compact': 'default'\n }\"\n (click)=\"onNewTabClick()\"\n >\n <sky-icon
|
|
2558
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<div\n class=\"sky-tabset\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [ngClass]=\"\n 'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n \"\n (window:resize)=\"onWindowResize()\"\n (keydown.arrowright)=\"onRightKeyDown()\"\n (keydown.arrowleft)=\"onLeftKeyDown()\"\n (keydown.home)=\"onHomeKeyDown()\"\n (keydown.end)=\"onEndKeyDown()\"\n>\n <span class=\"sky-tabset-dropdown\">\n @if (tabDisplayMode === 'dropdown') {\n <sky-dropdown buttonType=\"tab\">\n <sky-dropdown-button>\n {{ dropdownTriggerButtonText }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n @for (tabButton of tabButtons; track tabButton.buttonId) {\n <sky-dropdown-item class=\"sky-tab-dropdown-menu-item\">\n <div\n class=\"sky-tab-dropdown-item\"\n [ngClass]=\"{\n 'sky-tab-dropdown-item-selected': tabButton.active\n }\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n />\n </div>\n </sky-dropdown-item>\n }\n </sky-dropdown-menu>\n </sky-dropdown>\n }\n </span>\n <span class=\"sky-tabset-tabs\">\n @for (tabButton of tabButtons; track tabButton.buttonId) {\n <ng-container\n *ngTemplateOutlet=\"\n tabButtonTemplate;\n context: {\n $implicit: tabButton\n }\n \"\n />\n }\n </span>\n <span class=\"sky-tabset-btns\">\n @if (newTab.observers.length > 0) {\n <button\n class=\"sky-btn sky-btn-icon sky-tabset-btn-new\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-compact': 'default'\n }\"\n (click)=\"onNewTabClick()\"\n >\n <sky-icon iconName=\"add\" />\n </button>\n }\n @if (openTab.observers.length > 0) {\n <button\n class=\"sky-btn sky-btn-icon sky-tabset-btn-open\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-compact': 'default'\n }\"\n (click)=\"onOpenTabClick()\"\n >\n <sky-icon iconName=\"folder-open\" />\n </button>\n }\n </span>\n</div>\n<ng-content />\n\n<ng-template #tabButtonTemplate let-tabButton>\n <sky-tab-button\n [active]=\"tabButton.active\"\n [ariaControls]=\"tabButton.ariaControls\"\n [buttonHref]=\"tabButton.buttonHref\"\n [buttonId]=\"tabButton.buttonId\"\n [buttonText]=\"tabButton.buttonText\"\n [buttonTextCount]=\"tabButton.buttonTextCount\"\n [closeable]=\"tabButton.closeable\"\n [disabled]=\"tabButton.disabled\"\n [tabIndex]=\"tabButton.tabIndex\"\n [tabStyle]=\"tabStyle\"\n [tabNumber]=\"tabButton.tabNumber\"\n [totalTabsCount]=\"tabButton.totalTabsCount\"\n (buttonClick)=\"onTabButtonClick(tabButton)\"\n (closeClick)=\"onTabCloseClick(tabButton)\"\n />\n</ng-template>\n", styles: ["sky-tabset:not(.sky-theme-modern *){--sky-override-tabset-border-bottom: 2px solid #0974a1;--sky-override-tabset-button-color: #0974a1;--sky-override-tabset-button-group-padding-left: 10px;--sky-override-tabset-button-margin-right: 5px;--sky-override-tabset-modal-margin: 0 -15px 20px;--sky-override-tabset-modal-padding-left: 15px;--sky-override-tabset-modal-padding-none: 0;--sky-override-tabset-overflow: hidden;--sky-override-tabset-padding: 0 0 0 var(--sky-layout-host-tab-content-spacing, 15px);--sky-override-tabset-wizard-border-bottom: none;--sky-override-tabset-wizard-modal-margin: 0 0 20px}.sky-theme-modern.sky-theme-brand-base sky-tabset .sky-tabset-btn-new,.sky-theme-modern.sky-theme-brand-base sky-tabset .sky-tabset-btn-open{height:36px}sky-tabset.sky-tabset-layout-fit{position:absolute;inset:0;display:flex;flex-direction:column}sky-tabset.sky-tabset-layout-fit .sky-tabset{flex-grow:0}.sky-tabset{--sky-tabset-margin: 0;align-items:center;border-bottom:var(--sky-override-tabset-border-bottom, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider));display:flex;list-style-type:none;margin:var(--sky-tabset-margin);padding:var(--sky-override-tabset-padding, 0 0 0 var(--sky-layout-host-tab-content-spacing, var(--sky-space-inset-tabs-m)));white-space:nowrap;flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, var(--sky-override-tabset-overflow, visible));position:var(--sky-layout-host-content-position, static)}.sky-tabset.sky-tabset-style-wizard{border-bottom:var(--sky-override-tabset-wizard-border-bottom-style, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}.sky-modal-content .sky-tabset-style-tabs{--sky-tabset-margin: var( --sky-override-tabset-modal-margin, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) var(--sky-space-inset-floated-bottom-m) calc(var(--sky-space-inset-floated-left-m) * -1) );padding-left:var(--sky-override-tabset-modal-padding-left, var(--sky-space-inset-floated-left-m));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-right-m))}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-override-tabset-wizard-modal-margin, calc(var(--sky-space-inset-floated-top-m) * -1) calc(var(--sky-space-inset-floated-right-m) * -1) var(--sky-space-inset-floated-bottom-m) calc(var(--sky-space-inset-floated-left-m) * -1) );padding-left:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-left-m));padding-right:var(--sky-override-tabset-modal-padding-none, var(--sky-space-inset-floated-right-m))}.sky-tabset-btns{order:1;padding-left:var(--sky-override-tabset-button-group-padding-left, var(--sky-space-gap-action_group-m))}.sky-tabset-btns .sky-tabset-btn-new,.sky-tabset-btns .sky-tabset-btn-open{margin-right:var(--sky-override-tabset-button-margin-right, var(--sky-space-gap-action_group-m))}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset.sky-tabset-mode-dropdown{overflow:hidden}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-dropdown-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:var(--sky-override-tabset-button-color, --sky-color-text-default)}\n"] }]
|
|
2558
2559
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: SkyTabsetAdapterService }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }], propDecorators: { active: [{
|
|
2559
2560
|
type: Input
|
|
2560
2561
|
}], ariaLabel: [{
|