carbon-components-angular/tabs/tab.component.d.ts

Next generation components

/**
 *
 * carbon-angular v0.0.0 | tab.component.d.ts
 *
 * Copyright 2014, 2026 IBM
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0

 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


import { OnInit, EventEmitter, TemplateRef } from "@angular/core";
import * as i0 from "@angular/core";
/**
* The `Tab` component is a child of the `Tabs` component.
* It represents one `Tab` item and its content within a panel of other `Tab` items.
*
* `Tab` takes a string or `TemplateRef` for the header, and any content for the body of the tab.
* Disabled states should be handled by the application (ie. switch to the tab, but display some
* indication as to _why_ the tab is disabled).
*
* When the tab is selected the `select` output will be triggered.
* The `select` output will also be triggered for the active tab when the tabs are loaded or updated.
*
*
* Tab with string header:
 *
 * ```html
* <cds-tab heading='tab1'>
* 	tab 1 content
* </cds-tab>
* ```
*
* Tab with custom header:
*
* ```html
* <ng-template #tabHeading>
* 	<svg cdsIcon="facebook"
* 		size="sm"
* 		style="margin-right: 7px;">
* 	</svg>
* 	Hello Tab 1
* </ng-template>
* <cds-tabs>
* 	<cds-tab [heading]="tabHeading">
* 		Tab 1 content <svg cdsIcon="alert" size="lg"></svg>
* 	</cds-tab>
* 	<cds-tab heading='Tab2'>
* 		Tab 2 content
* 	</cds-tab>
* 	<cds-tab heading='Tab3'>
* 		Tab 3 content
* 	</cds-tab>
* </cds-tabs>
 * ```
 */
export declare class Tab implements OnInit {
    get hostId(): string;
    get hostAriaLabelledby(): string;
    get hostTabIndex(): number;
    /**
     * `hidden` + display keep inactive panels out of layout; `null` display when active preserves grid/flex.
     */
    get hostHidden(): string;
    get hostDisplay(): "block" | "none";
    /**
     * Set to `true` to have `Tab` items cached and not reloaded on tab switching.
     */
    set cacheActive(shouldCache: boolean);
    get cacheActive(): boolean;
    private static counter;
    tabContentClass: boolean;
    panelRole: string;
    panelAriaLive: string;
    /**
     * Boolean value reflects if the `Tab` is using a custom template for the heading.
     * Default value is false.
     */
    headingIsTemplate: boolean;
    /**
     * The `Tab`'s title to be displayed or custom template for the `Tab` heading.
     */
    heading: string | TemplateRef<any>;
    /**
     * Optional override for the `tabItem's`'s title attribute which is set in `TabHeaders`.
     * `tabItem`'s title attribute is automatically set to `heading`.
     *
     * You might want to use this if you set `heading` to a `TemplateRef`.
     */
    title: string;
    /**
     * Allows the user to pass data to the custom template for the `Tab` heading.
     */
    context: any;
    /**
     * Indicates whether the `Tab` is active/selected.
     * Determines whether its tab panel content is rendered.
     */
    active: boolean;
    /**
     * Indicates whether or not the `Tab` item is disabled.
     */
    disabled: boolean;
    /**
     * `tabindex` on the tab panel, the parent may set this to `null` when `isNavigation` is `true`.
     */
    tabIndex: number;
    /**
     * Sets the id of the `Tab`. Will be uniquely generated if not provided.
     */
    id: string;
    /**
     * Allows lifecycle hooks to be called on the rendered content.
     */
    tabContent: TemplateRef<any>;
    /**
     * Optional data for templates passed as implicit context.
     */
    templateContext: any;
    /**
     * Optional template that renders an icon inside the `Tab` header.
     * Useful for rendering a `cdsIcon` or any other icon next to the tab label.
     */
    icon: TemplateRef<any>;
    /**
     * Optional secondary label rendered below the primary tab label.
     * Only displayed when the parent `Tabs` is using `type="contained"`.
     */
    secondaryLabel: string;
    /**
     * Sets the aria-label of the close button when the parent `Tabs` uses `dismissable`.
     */
    closeButtonAriaLabel: string;
    /**
     * Icon-only tab: pair with `icon` and `iconLabel`.
     */
    iconOnly: boolean;
    /**
     * Icon-only tabs: accessible name and tooltip text.
     */
    iconLabel: string;
    /**
     * **Preview**: Icon-only tabs — show a notification dot on the icon.
     */
    badgeIndicator: boolean;
    /**
     * Icon-only tabs: tooltip show delay (ms).
     */
    enterDelayMs: number;
    /**
     * Icon-only tabs: tooltip hide delay (ms).
     */
    leaveDelayMs: number;
    /**
     * Icon-only tabs: open the tooltip on first render.
     */
    isTooltipOpen: boolean;
    /**
     * Emits when this tab becomes selected.
     */
    selected: EventEmitter<void>;
    /**
     * Emits when this tab's close button is pressed.
     */
    tabClose: EventEmitter<void>;
    protected _cacheActive: boolean;
    /**
     * Checks for custom heading template on initialization and updates the value
     * of the boolean 'headingIsTemplate'.
     */
    ngOnInit(): void;
    /**
     * Emit the status of the `Tab`, specifically 'select' and 'selected' properties.
     */
    doSelect(): void;
    /**
    * Returns value indicating whether this `Tab` should be rendered in a tab panel.
     */
    shouldRender(): boolean;
    isTemplate(value: any): boolean;
    static ɵfac: i0.ɵɵFactoryDeclaration<Tab, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<Tab, "cds-tab, ibm-tab", never, { "cacheActive": "cacheActive"; "heading": "heading"; "title": "title"; "context": "context"; "active": "active"; "disabled": "disabled"; "tabIndex": "tabIndex"; "id": "id"; "tabContent": "tabContent"; "templateContext": "templateContext"; "icon": "icon"; "secondaryLabel": "secondaryLabel"; "closeButtonAriaLabel": "closeButtonAriaLabel"; "iconOnly": "iconOnly"; "iconLabel": "iconLabel"; "badgeIndicator": "badgeIndicator"; "enterDelayMs": "enterDelayMs"; "leaveDelayMs": "leaveDelayMs"; "isTooltipOpen": "isTooltipOpen"; }, { "selected": "selected"; "tabClose": "tabClose"; }, never, ["*"], false>;
}