@synergy-design-system/components
Version:
This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define
110 lines (109 loc) • 4.85 kB
TypeScript
/**
* ---------------------------------------------------------------------
* 🔒 AUTOGENERATED BY VENDORISM
* Removing this comment will prevent it from being managed by it.
* ---------------------------------------------------------------------
*/
import '../../internal/scrollend-polyfill.js';
import SynergyElement from '../../internal/synergy-element.js';
import SynIconButton from '../icon-button/icon-button.component.js';
import SynResizeObserver from '../resize-observer/resize-observer.component.js';
import type { CSSResultGroup } from 'lit';
import type SynTab from '../tab/tab.js';
import type SynTabPanel from '../tab-panel/tab-panel.js';
/**
* @summary Tab groups organize content into a container that shows one section at a time.
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab-group--docs
* @status stable
* @since 2.0
*
* @dependency syn-icon-button
*
* @slot - Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.
* @slot nav - Used for grouping tabs in the tab group. Must be `<syn-tab>` elements.
*
* @event {{ name: String }} syn-tab-show - Emitted when a tab is shown. The payload of the event returns the "panel" attribute of the shown tab.
* @event {{ name: String }} syn-tab-hide - Emitted when a tab is hidden. The payload of the event returns the "panel" attribute of the hidden tab.
*
* @csspart base - The component's base wrapper.
* @csspart nav - The tab group's navigation container where tabs are slotted in.
* @csspart tabs - The container that wraps the tabs.
* @csspart active-tab-indicator - The line that highlights the currently selected tab.
* @csspart body - The tab group's body where tab panels are slotted in.
* @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<syn-icon-button>`.
* @csspart scroll-button--start - The starting scroll button.
* @csspart scroll-button--end - The ending scroll button.
* @csspart scroll-button__base - The scroll button's exported `base` part.
*
* @cssproperty --indicator-color - The color of the active tab indicator.
* @cssproperty --indicator-width - The width of the active tab indicator.
* @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
* @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
*/
export default class SynTabGroup extends SynergyElement {
static styles: CSSResultGroup;
static dependencies: {
'syn-icon-button': typeof SynIconButton;
'syn-resize-observer': typeof SynResizeObserver;
};
private activeTab?;
private mutationObserver;
private resizeObserver;
tabs: SynTab[];
private focusableTabs;
panels: SynTabPanel[];
private readonly localize;
tabGroup: HTMLElement;
body: HTMLSlotElement;
nav: HTMLElement;
indicator: HTMLElement;
private hasScrollControls;
private shouldHideScrollStartButton;
private shouldHideScrollEndButton;
/** The placement of the tabs. */
placement: 'top' | 'start' | 'end';
/**
* When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
* manual, the tab will receive focus but will not show until the user presses spacebar or enter.
*/
activation: 'auto' | 'manual';
/** Disables the scroll arrows that appear when tabs overflow. */
noScrollControls: boolean;
/** Draws the tab group as a contained element. */
contained: boolean;
/** Draws the tab group with edges instead of roundings. Takes only effect if used with the 'contained' property */
sharp: boolean;
/** Prevent scroll buttons from being hidden when inactive. */
fixedScrollControls: boolean;
connectedCallback(): void;
disconnectedCallback(): void;
private getActiveTab;
private handleClick;
private handleKeyDown;
private handleScrollToStart;
private handleScrollToEnd;
private setActiveTab;
private setAriaLabels;
private repositionIndicator;
private syncTabsAndPanels;
private findNextFocusableTab;
/**
* The reality of the browser means that we can't expect the scroll position to be exactly what we want it to be, so
* we add one pixel of wiggle room to our calculations.
*/
private scrollOffset;
private updateScrollButtons;
private isScrolledToEnd;
private scrollFromStart;
updateScrollControls(): void;
syncIndicator(): void;
/** Shows the specified tab panel. */
show(panel: string): void;
preventFocus(e: MouseEvent): void;
render(): import("lit").TemplateResult<1>;
}
declare global {
interface HTMLElementTagNameMap {
'syn-tab-group': SynTabGroup;
}
}