@skyux/tabs 12.0.0-alpha.6 → 12.0.0-alpha.7

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.
Files changed (4) hide show
  1. package/documentation.json +453 -453
  2. package/fesm2022/skyux-tabs.mjs +20 -2
  3. package/fesm2022/skyux-tabs.mjs.map +1 -1
  4. package/package.json +10 -10
package/fesm2022/skyux-tabs.mjs CHANGED
@@ -46,6 +46,24 @@ const RESOURCES = {
46
46
  message: 'Step {0} of {1}, unavailable: {2}',
47
47
  },
48
48
  },
49
+ 'FR-CA': {
50
+ skyux_tab_add: { message: 'Ajouter un onglet' },
51
+ skyux_tab_close: { message: 'Fermer l’onglet {0}' },
52
+ skyux_tabs_navigator_finish: { message: 'Terminer' },
53
+ skyux_tabs_navigator_next: { message: 'Suivant' },
54
+ skyux_tabs_navigator_previous: { message: 'Précédent' },
55
+ skyux_tab_open: { message: 'Ouvrir l’onglet' },
56
+ skyux_vertical_tabs_show_tabs_text: { message: 'Liste des onglets' },
57
+ skyux_wizard_sr_step_current: {
58
+ message: 'Étape {0} de {1}, en cours : {2}',
59
+ },
60
+ skyux_wizard_sr_step_completed: {
61
+ message: 'Étape {0} de {1}, terminée : {2}',
62
+ },
63
+ skyux_wizard_sr_step_unavailable: {
64
+ message: 'Étape {0} de {1}, non disponible : {2}',
65
+ },
66
+ },
49
67
  };
50
68
  SkyLibResourcesService.addResources(RESOURCES);
51
69
  /**
@@ -805,7 +823,7 @@ class SkyVerticalTabsetComponent {
805
823
  this.adapterService.focusPreviousButton(this.tabGroups);
806
824
  }
807
825
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyVerticalTabsetComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: SkyVerticalTabsetService }, { token: i3$1.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }, { token: SkyTabIdService }], target: i0.ɵɵFactoryTarget.Component }); }
808
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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 (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 icon=\"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-blackbaud)) .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"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], animations: [
826
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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 icon=\"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-blackbaud)) .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"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], animations: [
809
827
  trigger('tabGroupEnter', [
810
828
  transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
811
829
  style({ transform: 'translate(-100%)' }),
@@ -835,7 +853,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
835
853
  animate('150ms ease-in'),
836
854
  ]),
837
855
  ]),
838
- ], 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 (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 icon=\"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-blackbaud)) .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"] }]
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 icon=\"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-blackbaud)) .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"] }]
839
857
  }], ctorParameters: () => [{ type: SkyVerticalTabsetAdapterService }, { type: SkyVerticalTabsetService }, { type: i3$1.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }, { type: SkyTabIdService }], propDecorators: { showTabsText: [{
840
858
  type: Input
841
859
  }], ariaLabel: [{