import { ISlottable } from '../../../Behaviors/Slottable'; import { TabPanelAlignment } from '../../../Types/TabPanelAlignment'; import { TabStripPlacement } from '../../../Types/TabStripPlacement'; import { CustomElement } from '../../Abstracts/CustomElement'; import type { ITabPanelElementProps } from './ITabPanelElementProps'; declare const TabPanelElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Slottable").ISlottableProps & ISlottable) & (abstract new (...args: Array) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Tab Panel - A scrollable container for tab strip items with optional navigation buttons. * * @description * The Tab Panel component serves as a container for the tab strip, providing horizontal scrolling * when the total width of tab items exceeds the available space. It automatically detects scrollable * content and displays navigation buttons (start/end) to allow users to scroll through tabs that * extend beyond the visible area. The component supports different alignments and placements, * integrates with the parent tab's indicator settings, and can enable swipe gestures for touch * devices. * * @name Tab Panel * @element mosaik-tab-panel * @category Selectors * * @slot - The default slot for the tab strip element * * @csspart content - The scrollable content container * @csspart endScrollButton - The navigation button for scrolling to end * @csspart startScrollButton - The navigation button for scrolling to start * * @cssprop {String} --tab-panel-background-color - The background fill color of the panel * @cssprop {String} --tab-panel-font-family - The panel font family CSS custom property. * @cssprop {String} --tab-panel-font-letter-spacing - The panel font letter spacing CSS custom property. * @cssprop {String} --tab-panel-font-line-height - The panel font line height CSS custom property. * @cssprop {String} --tab-panel-font-size - The panel font size CSS custom property. * @cssprop {String} --tab-panel-font-text-decoration - The panel font text decoration CSS custom property. * @cssprop {String} --tab-panel-font-text-transform - The panel font text transform CSS custom property. * @cssprop {String} --tab-panel-font-weight - The panel font weight CSS custom property. * @cssprop {String} --tab-panel-gap - The panel gap CSS custom property. * @cssprop {String} --tab-panel-padding-bottom - The panel padding bottom CSS custom property. * @cssprop {String} --tab-panel-padding-left - The panel padding left CSS custom property. * @cssprop {String} --tab-panel-padding-right - The panel padding right CSS custom property. * @cssprop {String} --tab-panel-padding-top - The panel padding top CSS custom property. * @cssprop {String} --tab-panel-shadow - The panel shadow CSS custom property. * @cssprop {String} --tab-panel-shadow-blur - The panel shadow blur CSS custom property. * @cssprop {String} --tab-panel-shadow-color - The panel shadow color CSS custom property. * @cssprop {String} --tab-panel-shadow-offset-x - The panel shadow offset x CSS custom property. * @cssprop {String} --tab-panel-shadow-offset-y - The panel shadow offset y CSS custom property. * @cssprop {String} --tab-panel-shadow-spread - The panel shadow spread CSS custom property. * @cssprop {String} --tab-panel-transition-duration - The panel transition duration CSS custom property. * @cssprop {String} --tab-panel-transition-mode - The panel transition mode CSS custom property. * @cssprop {String} --tab-panel-transition-property - The panel transition property CSS custom property. * @cssprop {String} --tab-panel-translate - The panel translate CSS custom property. * * @fires connected {ConnectedEvent} - Fired when connected to the DOM * @fires changed {PropertyChangedEvent} - Fired when properties change * * @dependency mosaik-button - The Button element. * * @example * Tab panel with scrollable content: * ```html * * * Tab 1 * Tab 2 * Tab 3 * * * ``` * * @example * Tab panel with alignment: * ```html * * * Overview * Details * * * ``` * * @public */ export declare class TabPanelElement extends TabPanelElement_base implements ITabPanelElementProps, ISlottable { private _containerElement; private _hasScrollableContent; private _canScrollToStart; private _canScrollToEnd; private _alignment; private _placement; private _hasIndicator; private _enableGestures; /** * @public */ constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `alignment` property. * * @public * @attr */ get alignment(): TabPanelAlignment; set alignment(value: TabPanelAlignment); /** * Gets or sets the `placement` property. * * @public * @attr */ get placement(): TabStripPlacement; set placement(value: TabStripPlacement); /** * Gets or sets the `hasIndicator` property. * * @public * @attr */ get hasIndicator(): boolean; set hasIndicator(value: boolean); /** * Gets or sets the `enableGestures` property. * * @public * @attr */ get enableGestures(): boolean; set enableGestures(value: boolean); /** * Gets the `hasScrollableContent` property. * * @public * @readonly */ get hasScrollableContent(): boolean; private set hasScrollableContent(value); /** * Gets the `canScrollToStart` property. * * @public * @readonly */ get canScrollToStart(): boolean; private set canScrollToStart(value); /** * Gets or sets the `canScrollToEnd` property. * * @public * @readonly */ get canScrollToEnd(): boolean; private set canScrollToEnd(value); render(): unknown; /** * @protected * @override */ protected onApplyTemplate(): void; /** * @private * @template */ scrollByTabOffset(direction: 'before' | 'after'): void; /** * @private * @template */ onScroll(e: Event): void; } /** * @public */ export declare namespace TabPanelElement { type Props = ITabPanelElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-tab-panel': TabPanelElement; } } export {}; //# sourceMappingURL=TabPanelElement.d.ts.map