@progress/kendo-angular-layout
Version:
Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts
131 lines (130 loc) • 5.35 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, Input, ContentChildren, QueryList } from '@angular/core';
import { TabContentDirective } from '../directives/tab-content.directive';
import { TabTitleDirective } from '../directives/tab-title.directive';
import { TabTemplateDirective } from '../directives/tab.directive';
import * as i0 from "@angular/core";
/**
* Represents the Kendo UI TabStrip tab component.
* Use this component to define individual tabs within a TabStrip.
*
* @example
* ```html
* <kendo-tabstrip>
* <kendo-tabstrip-tab title="Home" [selected]="true">
* <ng-template kendoTabContent>
* Home content here
* </ng-template>
* </kendo-tabstrip-tab>
* </kendo-tabstrip>
* ```
*/
export class TabStripTabComponent {
/**
* Sets the title text for the tab ([see example](slug:tabs_tabstrip#toc-tab-titles)).
*/
title;
/**
* Disables the tab and prevents user interaction ([see example]({% slug tabs_tabstrip %}#toc-disabled-tabs)).
*
* @default false
*/
disabled = false;
/**
* Specifies the CSS classes to apply to the `tab` element.
* Accepts the same values as [`ngClass`](link:site.data.urls.angular['ngclassapi']).
*/
cssClass;
/**
* Specifies the CSS styles to apply to the `tab` element.
* Accepts the same values as [`ngStyle`](link:site.data.urls.angular['ngstyleapi']).
*/
cssStyle;
/**
* Selects the tab when the TabStrip loads
* ([see example](slug:tabs_tabstrip#toc-selected-tab)).
*/
selected;
/**
* Shows a close button inside the tab when set to `true`.
* This setting overrides the TabStrip `closable` option.
*/
closable;
/**
* Sets the name of an existing font icon in the Kendo UI theme for the close button.
* This setting overrides the TabStrip `closeIcon` option.
*/
closeIcon;
/**
* Sets custom CSS classes for the close button icon.
* You can define a single class or multiple classes separated by spaces.
* This setting overrides the TabStrip `closeIcon` option.
*/
closeIconClass;
/**
* Sets an SVG icon for the close button.
* You can use an [existing Kendo SVG icon](slug:svgicon_list) or provide a custom one.
*/
closeSVGIcon;
get tabContent() {
return this._tabContent.first;
}
get tabTitle() {
return this._tabTitleDirective.first;
}
get tabTemplate() {
return this._tabDirective.first;
}
_tabDirective = new QueryList();
_tabContent = new QueryList();
// guards against nested tabstrip components; `descendants` is not defined by default;
_tabTitleDirective;
/**
* @hidden
*
* Currently only disabled tabs can be focused. Otherwise they will be
* immediately selected
*/
focused = false;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabStripTabComponent, isStandalone: true, selector: "kendo-tabstrip-tab", inputs: { title: "title", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", selected: "selected", closable: "closable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon" }, queries: [{ propertyName: "_tabDirective", predicate: TabTemplateDirective }, { propertyName: "_tabContent", predicate: TabContentDirective }, { propertyName: "_tabTitleDirective", predicate: TabTitleDirective }], exportAs: ["kendoTabStripTab"], ngImport: i0, template: ``, isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripTabComponent, decorators: [{
type: Component,
args: [{
exportAs: 'kendoTabStripTab',
selector: 'kendo-tabstrip-tab',
template: ``,
standalone: true
}]
}], propDecorators: { title: [{
type: Input
}], disabled: [{
type: Input
}], cssClass: [{
type: Input
}], cssStyle: [{
type: Input
}], selected: [{
type: Input
}], closable: [{
type: Input
}], closeIcon: [{
type: Input
}], closeIconClass: [{
type: Input
}], closeSVGIcon: [{
type: Input
}], _tabDirective: [{
type: ContentChildren,
args: [TabTemplateDirective]
}], _tabContent: [{
type: ContentChildren,
args: [TabContentDirective]
}], _tabTitleDirective: [{
type: ContentChildren,
args: [TabTitleDirective]
}] } });