@alyle/ui/tabs/tabs.d.ts

Minimal Design, a set of components for Angular

import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, QueryList, Renderer2, TemplateRef, ViewContainerRef } from '@angular/core';
import { LyTheme2, ThemeVariables, LyRippleService, ThemeRef, StyleCollection, LyClasses, StyleTemplate, StyleRenderer } from '@alyle/ui';
import { LyButton } from '@alyle/ui/button';
import { LyTabContent } from './tab-content.directive';
import { ViewportRuler } from '@angular/cdk/scrolling';
import { Platform } from '@angular/cdk/platform';
import { TemplatePortal } from '@angular/cdk/portal';
import { FocusMonitor } from '@angular/cdk/a11y';
import { BooleanInput } from '@angular/cdk/coercion';
import * as i0 from "@angular/core";
export interface LyTabTheme {
    /** Styles for Tab Component */
    root?: StyleCollection<((classes: LyClasses<typeof STYLES>) => StyleTemplate)> | ((classes: LyClasses<typeof STYLES>) => StyleTemplate);
}
export interface LyTabVariables {
    tab?: LyTabTheme;
}
export type AlignTabs = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
export type LyTabsHeaderPlacement = 'before' | 'after' | 'above' | 'below';
export declare const STYLES: (theme: ThemeVariables & LyTabVariables, ref: ThemeRef) => {
    $name: string;
    $priority: number;
    root: () => (_className: string) => string;
    tab: (_className: string) => string;
    /** Tab container */
    contentContainer: (_className: string) => string;
    /** Tab header */
    labels: (_className: string) => string;
    labelsContainer: () => (_className: string) => string;
    label: (_className: string) => string;
    labelActive: (_className: string) => string;
    contents: (_className: string) => string;
    content: (_className: string) => string;
    contentActive: (_className: string) => string;
    contentInner: any;
    indicator: (_className: string) => string;
    indicatorForServer: (_className: string) => string;
    rippleContainer: (_className: string) => string;
    scrollable: any;
    hiddenContent: () => (_className: string) => string;
    column: any;
    row: any;
};
/** @docs-private */
export declare class LyTabsBase {
    _theme: LyTheme2;
    constructor(_theme: LyTheme2);
}
/** @docs-private */
export declare const LyTabsMixinBase: import("@alyle/ui/src/common/constructor").Constructor<import("@alyle/ui/src/common/build-common-behaviors").CanStyleUpdater> & import("@alyle/ui/src/common/constructor").Constructor<import("@alyle/ui/src/common/bg").CanBg> & import("@alyle/ui/src/common/constructor").Constructor<import("@alyle/ui/src/common/elevation").CanElevation> & import("@alyle/ui/src/common/constructor").Constructor<import("@alyle/ui/src/common/shadow-color").CanShadowColor> & typeof LyTabsBase;
/** @docs-private */
export declare class LyTabLabelBase {
    _theme: LyTheme2;
    _ngZone: NgZone;
    _platform: Platform;
    constructor(_theme: LyTheme2, _ngZone: NgZone, _platform: Platform);
}
/** @docs-private */
export declare const LyTabLabelMixinBase: import("@alyle/ui/src/common/constructor").Constructor<import("@alyle/ui/src/common/build-common-behaviors").CanStyleUpdater> & import("@alyle/ui/src/common/constructor").Constructor<import("@alyle/ui/src/common/bg").CanBg> & import("@alyle/ui/src/common/constructor").Constructor<import("@alyle/ui/src/common/color").CanColor> & import("@alyle/ui/src/common/constructor").Constructor<import("@alyle/ui/src/common/raised").CanRaised> & import("@alyle/ui").CanDisableCtor & import("@alyle/ui/src/common/constructor").Constructor<import("@alyle/ui/src/common/outlined").CanOutlined> & import("@alyle/ui/src/common/constructor").Constructor<import("@alyle/ui/src/common/elevation").CanElevation> & import("@alyle/ui/src/common/constructor").Constructor<import("@alyle/ui/src/common/shadow-color").CanShadowColor> & import("@alyle/ui/src/common/constructor").Constructor<import("@alyle/ui/src/common/disable-ripple").CanDisableRipple> & typeof LyTabLabelBase;
/**
 * @dynamic
 */
export declare class LyTabs extends LyTabsMixinBase implements OnChanges, OnInit, AfterViewInit, AfterContentInit, OnDestroy {
    private theme;
    private renderer;
    private el;
    private cd;
    private _viewportRuler;
    readonly sRenderer: StyleRenderer;
    private _platform;
    private _ngZone;
    /** @docs-private */
    static и: string;
    /** @docs-private */
    $priority: number;
    /** @docs-private */
    readonly classes: LyClasses<(theme: ThemeVariables & LyTabVariables, ref: ThemeRef) => {
        $name: string;
        $priority: number;
        root: () => (_className: string) => string;
        tab: (_className: string) => string;
        /** Tab container */
        contentContainer: (_className: string) => string;
        /** Tab header */
        labels: (_className: string) => string;
        labelsContainer: () => (_className: string) => string;
        label: (_className: string) => string;
        labelActive: (_className: string) => string;
        contents: (_className: string) => string;
        content: (_className: string) => string;
        contentActive: (_className: string) => string;
        contentInner: any;
        indicator: (_className: string) => string;
        indicatorForServer: (_className: string) => string;
        rippleContainer: (_className: string) => string;
        scrollable: any;
        hiddenContent: () => (_className: string) => string;
        column: any;
        row: any;
    }>;
    _selectedIndex: number;
    _selectedBeforeIndex: number;
    _selectedTab: LyTab | null;
    _selectedBeforeTab: LyTab | null;
    _isViewInitLoaded: boolean;
    private _tabsSubscription;
    private _headerPlacement;
    private _headerPlacementClass;
    private _alignTabs;
    private _alignTabsClass;
    private _textColor;
    private _textColorClass;
    private _tabResizeSub;
    private _scrollable;
    private _timeoutIds;
    /** Emits whenever the component is destroyed. */
    private readonly _destroy;
    tabsRef: ElementRef;
    tabContents: ElementRef<HTMLDivElement>;
    tabsIndicator?: ElementRef;
    selectedIndexOnChange: 'auto' | number;
    /**
     * Keep the content.
     * By default, when changing a tab, the previous one is created and deleted.
     * With this, the content will only be hidden instead of deleting it.
     */
    set keepContent(val: BooleanInput);
    get keepContent(): BooleanInput;
    private _keepContent;
    /** Animation duration in milliseconds */
    set animationDuration(val: number);
    get animationDuration(): number;
    private _animationDuration;
    /**
     * Whether the tab group should grow to the size of the active tab.
     */
    set dynamicHeight(val: BooleanInput);
    get dynamicHeight(): BooleanInput;
    private _dynamicHeight;
    set scrollable(val: BooleanInput);
    get scrollable(): BooleanInput;
    indicatorColor: string;
    set headerPlacement(val: LyTabsHeaderPlacement);
    get headerPlacement(): LyTabsHeaderPlacement;
    set alignTabs(val: AlignTabs);
    get alignTabs(): AlignTabs;
    set textColor(val: string);
    get textColor(): string;
    set selectedIndex(val: number);
    get selectedIndex(): number;
    selectedIndexChange: EventEmitter<any>;
    tabsList: QueryList<LyTab>;
    tabContentList: QueryList<ElementRef<HTMLDivElement>>;
    constructor(theme: LyTheme2, renderer: Renderer2, el: ElementRef, cd: ChangeDetectorRef, _viewportRuler: ViewportRuler, sRenderer: StyleRenderer, _platform: Platform, _ngZone: NgZone);
    ngOnChanges(): void;
    ngOnInit(): void;
    ngAfterContentInit(): void;
    ngAfterViewInit(): void;
    ngOnDestroy(): void;
    private _findIndex;
    _updateIndicator(currentTab: LyTab, beforeTab?: LyTab): void;
    _markForCheck(): void;
    private _updateTabs;
    loadTemplate(tab: LyTab, index: number): TemplatePortal<any> | null;
    private _getFlexDirection;
    private _updateContentStyle;
    /** Runs a timeout outside of the Angular zone to avoid triggering the change detection. */
    private _runTimeoutOutsideZone;
    private _clearTimeouts;
    static ɵfac: i0.ɵɵFactoryDeclaration<LyTabs, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<LyTabs, "ly-tabs", ["lyTabs"], { "bg": { "alias": "bg"; "required": false; }; "elevation": { "alias": "elevation"; "required": false; }; "shadowColor": { "alias": "shadowColor"; "required": false; }; "selectedIndexOnChange": { "alias": "selectedIndexOnChange"; "required": false; }; "keepContent": { "alias": "keepContent"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; "dynamicHeight": { "alias": "dynamicHeight"; "required": false; }; "scrollable": { "alias": "scrollable"; "required": false; }; "indicatorColor": { "alias": "indicatorColor"; "required": false; }; "headerPlacement": { "alias": "headerPlacement"; "required": false; }; "alignTabs": { "alias": "alignTabs"; "required": false; }; "textColor": { "alias": "textColor"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; }, ["tabsList"], ["*"], false, never>;
}
export declare class LyTab implements OnInit {
    private _tabs;
    _renderer: Renderer2;
    _el: ElementRef;
    readonly sRenderer: StyleRenderer;
    private _platform;
    private _viewContainerRef;
    /** Current tab index */
    index: number;
    _isBrowser: boolean;
    _templateRefLazy: TemplateRef<LyTabContent>;
    _templateRef: TemplateRef<any>;
    _tabIndicator: ElementRef;
    _tabLabel: LyTabLabel & {};
    /** Portal that will be the hosted content of the tab */
    private _contentPortal;
    /** @docs-private */
    get content(): TemplatePortal | null;
    _activeContent: boolean;
    constructor(_tabs: LyTabs, _renderer: Renderer2, _el: ElementRef, sRenderer: StyleRenderer, _platform: Platform, _viewContainerRef: ViewContainerRef);
    ngOnInit(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<LyTab, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<LyTab, "ly-tab", never, {}, {}, ["_templateRefLazy", "_tabLabel"], ["ly-tab-label", "[ly-tab-label]", "[ly-tab-label-native]", "*"], false, never>;
}
export declare class LyTabLabel extends LyButton implements OnInit, AfterViewInit {
    readonly sRenderer: StyleRenderer;
    private _tab;
    private _tabs;
    private _activeTabStyle;
    private _active;
    _isBrowser: boolean;
    disableRipple: boolean;
    disabled: boolean;
    get active(): BooleanInput;
    set active(val: BooleanInput);
    _rippleContainer: ElementRef;
    _onClickTab(): void;
    constructor(_el: ElementRef, _renderer: Renderer2, _theme: LyTheme2, _ngZone: NgZone, _rippleService: LyRippleService, _focusMonitor: FocusMonitor, sRenderer: StyleRenderer, _tab: LyTab, _tabs: LyTabs, platform: Platform);
    ngOnInit(): void;
    _updateTabState(): void;
    _updateTabScroll(): void;
    ngAfterViewInit(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<LyTabLabel, [null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, null]>;
    static ɵcmp: i0.ɵɵComponentDeclaration<LyTabLabel, "button[ly-tab-label], a[ly-tab-label]", never, { "bg": { "alias": "bg"; "required": false; }; "color": { "alias": "color"; "required": false; }; "raised": { "alias": "raised"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "outlined": { "alias": "outlined"; "required": false; }; "elevation": { "alias": "elevation"; "required": false; }; "shadowColor": { "alias": "shadowColor"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "active": { "alias": "active"; "required": false; }; }, {}, never, ["*"], false, never>;
}