@progress/kendo-angular-layout
Version:
Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts
118 lines (117 loc) • 5.14 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 tab component of the TabStrip.
*/
export class TabStripTabComponent {
/**
* Sets the tab title ([see example](slug:tabs_tabstrip#toc-tab-titles)).
*/
title;
/**
* Used to disable a tab ([see example]({% slug tabs_tabstrip %}#toc-disabled-tabs)).
*
* Defaults to `false`.
*/
disabled = false;
/**
* The CSS classes that will be rendered on the `tab` element.
* Supports the type of values that are supported by [ngClass](link:site.data.urls.angular['ngclassapi']).
*/
cssClass;
/**
* The CSS styles that will be rendered on the `tab` element.
* Supports the type of values that are supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
*/
cssStyle;
/**
* Determines which tab will be selected upon the initial loading of the TabStrip
* ([see example](slug:tabs_tabstrip#toc-selected-tab)).
*/
selected;
/**
* When set to `true`, a close button will be rendered inside the tab.
* This option overrides the value of the TabStrip `closable` option.
*/
closable;
/**
* Defines the name for an existing font icon in the Kendo UI theme for the close icon.
* This option overrides the value of the TabStrip `closeIcon` option.
*/
closeIcon;
/**
* Allows the usage of custom icons by defining a custom CSS class, or multiple classes separated by spaces.
* This option overrides the value of the TabStrip `closeIcon` option.
*/
closeIconClass;
/**
* Defines an SVGIcon to be rendered for the close icon.
* The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or 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]
}] } });