@progress/kendo-angular-layout
Version:
Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts
183 lines (180 loc) • 7.78 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 { TabStripTabComponent } from '../models/tabstrip-tab.component';
import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { TabCloseEvent } from '../events/tabclose-event';
import { xIcon } from '@progress/kendo-svg-icons';
import { NgTemplateOutlet } from '@angular/common';
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
/**
* @hidden
*/
export class TabComponent {
localization;
tab;
index;
tabStripClosable;
tabStripCloseIcon;
customTabstripCloseIcon;
closeSVGIcon;
tabClose = new EventEmitter();
hostClasses = true;
get activeClass() {
return this.tab.selected;
}
get disabledClass() {
return this.tab.disabled;
}
get focusedClass() {
return this.tab.focused;
}
get tabIndex() {
return this.tab.selected || this.tab.focused ? 0 : -1;
}
constructor(localization) {
this.localization = localization;
}
get tabClosable() {
if (this.tab.closable !== undefined) {
return this.tab.closable;
}
return this.tabStripClosable;
}
get closeSVGIconClass() {
if (this.customCloseIconClasses) {
return;
}
if (this.tab.closeSVGIcon) {
return this.tab.closeSVGIcon;
}
if (this.closeSVGIcon) {
return this.closeSVGIcon;
}
return xIcon;
}
get closeIconClasses() {
if (!this.customTabstripCloseIcon && this.tabStripCloseIcon && !this.tab.closeIconClass) {
if (this.tab.closeIcon) {
return this.tab.closeIcon;
}
return this.tabStripCloseIcon;
}
}
get customCloseIconClasses() {
if (this.customTabstripCloseIcon || this.tab.closeIconClass) {
if (this.tab.closeIconClass) {
return this.tab.closeIconClass;
}
return this.customTabstripCloseIcon;
}
}
get closeButtonTitle() {
return this.localization.get('closeTitle');
}
closeTab(index) {
const closeArgs = new TabCloseEvent(index, this.tab);
this.tabClose.emit(closeArgs);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TabComponent, isStandalone: true, selector: "[kendoTabStripTab]", inputs: { tab: "tab", index: "index", tabStripClosable: "tabStripClosable", tabStripCloseIcon: "tabStripCloseIcon", customTabstripCloseIcon: "customTabstripCloseIcon", closeSVGIcon: "closeSVGIcon" }, outputs: { tabClose: "tabClose" }, host: { properties: { "class.k-tabstrip-item": "this.hostClasses", "attr.aria-selected": "this.activeClass", "class.k-active": "this.activeClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-focus": "this.focusedClass", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: `
(!tab.tabTemplate) {
(!tab.tabTitle) {
<span class="k-link">
<span class="k-link-text">{{ tab.title }}</span>
</span>
}
(tab.tabTitle) {
<span class="k-link">
<ng-template [ngTemplateOutlet]="tab.tabTitle.templateRef">
</ng-template>
</span>
}
} {
<ng-template #tabTemplate [ngTemplateOutlet]="tab.tabTemplate?.templateRef">
</ng-template>
}
(tabClosable) {
<span class="k-remove-tab k-icon-button k-button k-button-md k-rounded-md k-button-flat-base k-button-flat"
(click)="closeTab(index)" [title]="closeButtonTitle">
<kendo-icon-wrapper
[svgIcon]="closeSVGIconClass" [name]="closeIconClasses"
innerCssClass="k-button-icon" [customFontClass]="customCloseIconClasses"></kendo-icon-wrapper>
</span>
}
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabComponent, decorators: [{
type: Component,
args: [{
// eslint-disable-next-line @angular-eslint/component-selector
selector: '[kendoTabStripTab]',
template: `
(!tab.tabTemplate) {
(!tab.tabTitle) {
<span class="k-link">
<span class="k-link-text">{{ tab.title }}</span>
</span>
}
(tab.tabTitle) {
<span class="k-link">
<ng-template [ngTemplateOutlet]="tab.tabTitle.templateRef">
</ng-template>
</span>
}
} {
<ng-template #tabTemplate [ngTemplateOutlet]="tab.tabTemplate?.templateRef">
</ng-template>
}
(tabClosable) {
<span class="k-remove-tab k-icon-button k-button k-button-md k-rounded-md k-button-flat-base k-button-flat"
(click)="closeTab(index)" [title]="closeButtonTitle">
<kendo-icon-wrapper
[svgIcon]="closeSVGIconClass" [name]="closeIconClasses"
innerCssClass="k-button-icon" [customFontClass]="customCloseIconClasses"></kendo-icon-wrapper>
</span>
}
`,
standalone: true,
imports: [NgTemplateOutlet, IconWrapperComponent]
}]
}], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { tab: [{
type: Input
}], index: [{
type: Input
}], tabStripClosable: [{
type: Input
}], tabStripCloseIcon: [{
type: Input
}], customTabstripCloseIcon: [{
type: Input
}], closeSVGIcon: [{
type: Input
}], tabClose: [{
type: Output
}], hostClasses: [{
type: HostBinding,
args: ['class.k-tabstrip-item']
}], activeClass: [{
type: HostBinding,
args: ['attr.aria-selected']
}, {
type: HostBinding,
args: ['class.k-active']
}], disabledClass: [{
type: HostBinding,
args: ['attr.aria-disabled']
}, {
type: HostBinding,
args: ['class.k-disabled']
}], focusedClass: [{
type: HostBinding,
args: ['class.k-focus']
}], tabIndex: [{
type: HostBinding,
args: ['attr.tabindex']
}] } });