@c8y/ngx-components/core/tabs/tab.model.d.ts

Angular modules for Cumulocity IoT applications

import { EventEmitter, Injector, Type, ViewContainerRef } from '@angular/core';
import { ExtensionFactory } from '../common/extension-hooks';
import { SupportedIconsSuggestions } from '@c8y/ngx-components/icon-selector/icons';
/**
 * An tab allows to switch routes
 * on a page or provide an additional component.
 *
 * If used for switching route, the router link
 * can be provided as string or any[], as supported
 * in the routerLink directive.
 */
export type Tab<T = string | any[]> = TabWithTemplate<T> | TabWithComponent;
/**
 * Type alias for tab orientation.
 */
export type TabOrientation = 'horizontal' | 'vertical';
interface TabBase {
    /**
     * Ordering of the tabs (high number first) (optional)
     */
    priority?: number;
    /**
     * Alignment for tabs (optional)
     */
    orientation?: TabOrientation;
    /**
     * Hide tab (optional)
     */
    hide?: boolean;
    /**
     * Id to identify specific feature tab.
     */
    featureId?: string;
    /**
     * The injector to use. If not set, the default root injector will be used.
     */
    injector?: Injector;
    /**
     * If there is just a single tab for a route the tab will not be show.
     * If you set this flag to true the tab is still going to be shown even if it is the only one.
     */
    showAlways?: boolean;
    /**
     * Name of the tab outlet which the tabs will use. E.g. can be used to display inline tabs.
     */
    tabsOutlet?: string;
    /**
     * Additional icon provided to indicate special kind of tabs. E.g. typed dashboards.
     */
    badge?: string;
    /**
     * Additional description which can be added to the tab.
     */
    tooltipText?: string;
}
export interface TabWithTemplate<T = string> extends TabBase {
    /**
     * The angular route path to navigate to on click.
     */
    path?: T;
    /**
     * The label to show for that tab.
     */
    label: string;
    /**
     * The icon to show on this tab (optional)
     */
    icon?: SupportedIconsSuggestions;
    /**
     * Event emitter to handle the selection of the tab.
     */
    onSelect?: EventEmitter<void>;
    /**
     * Additional template to replace the label (note the label will still be used as title and on mobile devices)
     */
    template?: ViewContainerRef;
    component?: never;
}
export interface TabWithComponent extends TabBase {
    template?: never;
    icon?: never;
    path?: never;
    label?: never;
    /**
     * Angular component (can be used to add any component inside the list item of the tabs)
     *
     * Note: The component must handle it responsive mobile view itself.
     * Note: As a Tab is rendered in a <li> it is good practice
     * to remove the wrapper node to not run into CSS issues. You
     * can do so by defining the selector as a li: `li[customExtension]`
     * (see: https://stackoverflow.com/a/56887630/923270 or
     * https://stackoverflow.com/a/38716164/923270)
     */
    component: Type<any>;
}
/**
 * Factory to implement if used in a hook for Multi Provider extension.
 */
export type TabFactory = ExtensionFactory<Tab>;
export {};
//# sourceMappingURL=tab.model.d.ts.map