@progress/kendo-angular-layout
Version:
Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts
190 lines (185 loc) • 8.21 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 { ButtonComponent } from '@progress/kendo-angular-buttons';
import { NgIf, NgTemplateOutlet } from '@angular/common';
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.customCloseButtonClasses) {
return;
}
if (this.tab.closeSVGIcon) {
return this.tab.closeSVGIcon;
}
if (this.closeSVGIcon) {
return this.closeSVGIcon;
}
return xIcon;
}
get closeButtonClasses() {
if (!this.customTabstripCloseIcon && this.tabStripCloseIcon && !this.tab.closeIconClass) {
if (this.tab.closeIcon) {
return this.tab.closeIcon;
}
return this.tabStripCloseIcon;
}
}
get customCloseButtonClasses() {
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: "16.2.12", ngImport: i0, type: TabComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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-item": "this.hostClasses", "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: `
<ng-container *ngIf="!tab.tabTemplate; else tabTemplate">
<span class="k-link" *ngIf="!tab.tabTitle">
<span class="k-link-text">{{ tab.title }}</span>
</span>
<span class="k-link" *ngIf="tab.tabTitle">
<ng-template [ngTemplateOutlet]="tab.tabTitle.templateRef">
</ng-template>
</span>
</ng-container>
<ng-template #tabTemplate [ngTemplateOutlet]="tab.tabTemplate?.templateRef">
</ng-template>
<button
kendoButton
type="button"
*ngIf="tabClosable"
role="button"
fillMode="flat"
[icon]="closeButtonClasses"
[iconClass]="customCloseButtonClasses"
[svgIcon]="closeSVGIconClass"
[title]="closeButtonTitle"
[attr.aria-label]="closeButtonTitle"
(click)="closeTab(index)"
class="k-remove-tab k-icon-button"
></button>
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabComponent, decorators: [{
type: Component,
args: [{
// eslint-disable-next-line @angular-eslint/component-selector
selector: '[kendoTabStripTab]',
template: `
<ng-container *ngIf="!tab.tabTemplate; else tabTemplate">
<span class="k-link" *ngIf="!tab.tabTitle">
<span class="k-link-text">{{ tab.title }}</span>
</span>
<span class="k-link" *ngIf="tab.tabTitle">
<ng-template [ngTemplateOutlet]="tab.tabTitle.templateRef">
</ng-template>
</span>
</ng-container>
<ng-template #tabTemplate [ngTemplateOutlet]="tab.tabTemplate?.templateRef">
</ng-template>
<button
kendoButton
type="button"
*ngIf="tabClosable"
role="button"
fillMode="flat"
[icon]="closeButtonClasses"
[iconClass]="customCloseButtonClasses"
[svgIcon]="closeSVGIconClass"
[title]="closeButtonTitle"
[attr.aria-label]="closeButtonTitle"
(click)="closeTab(index)"
class="k-remove-tab k-icon-button"
></button>
`,
standalone: true,
imports: [NgIf, NgTemplateOutlet, ButtonComponent]
}]
}], ctorParameters: function () { return [{ 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-item']
}, {
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']
}] } });