ng-devui
Version:
DevUI components based on Angular
202 lines • 89.6 kB
JavaScript
import { ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, Input, Output, QueryList, TemplateRef, ViewChild, } from '@angular/core';
import { sum } from 'lodash-es';
import { TabComponent } from './tab.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "ng-devui/dropdown";
import * as i3 from "./tab-closeable-pipe";
export class TabsComponent {
static { this.ID_SEED = 0; }
get isShowShadow() {
return this.scrollModeToggle && ['tabs', 'pills', 'wrapped'].includes(this.type);
}
constructor(el, cdr) {
this.el = el;
this.cdr = cdr;
this.type = 'tabs';
this.size = 'md';
this.showContent = true;
this.scrollMode = false;
this.reactivable = false;
this.closeable = false;
this.closeableIds = [];
this.addable = false;
/**
* @todo
* 待重新设计
*/
this.vertical = false;
this.isHidden = false;
this.activeTabChange = new EventEmitter();
this.addOrDeleteTabChange = new EventEmitter();
this.offsetIndex = 0;
this.scrollModeToggle = false;
this.tabsWidth = [];
this.ARROW_DROPDOWN_WIDTH = 128; // 两边箭头和下拉菜单按钮的宽度 48 + 32 + 48
this.id = `devuiTabs${TabsComponent.ID_SEED++}`;
}
ngOnChanges(changes) {
const { activeTab, scrollMode } = changes;
if (scrollMode) {
this.getTabsWidth();
}
if (activeTab) {
this.changeActiveSlidingBlock();
if (this.scrollModeToggle && this.tabsEle && this.tabs) {
const tabs = this.tabsEle.nativeElement.querySelectorAll('li.devui-nav-tab-item');
const index = Array.from(this.tabs).findIndex((item) => item.id === this.activeTab);
this.offsetIndex = index;
this.scrollIntoView(tabs[index]);
}
}
}
ngAfterViewInit() {
if (this.tabs.length) {
if (this.activeTab === undefined) {
// 无选中页签则默认选择第一个未被禁用的页签
const { id } = this.tabs.find((item) => !item.disabled);
this.select(id);
}
else {
this.changeActiveSlidingBlock();
}
}
this.getTabsWidth();
this.tabs.changes.subscribe(() => {
this.changeActiveSlidingBlock();
// 延时等待tabs渲染完毕
setTimeout(() => this.getTabsWidth());
});
}
changeActiveSlidingBlock() {
if (this.type === 'slider' && this.tabsEle) {
// 延时等待active样式切换至正确的tab
setTimeout(() => {
const tabEle = this.tabsEle.nativeElement.querySelector(`#${this.id} li.active`);
if (tabEle) {
const leftFix = this.scrollModeToggle ? this.tabsEle.nativeElement.scrollLeft : 0;
this.offsetLeft = tabEle.getBoundingClientRect().left + leftFix - this.tabsEle.nativeElement.getBoundingClientRect().left;
this.offsetWidth = tabEle.getBoundingClientRect().width;
this.cdr.detectChanges();
}
});
}
}
canChange(currentTab) {
let changeResult = Promise.resolve(true);
if (this.beforeChange) {
const result = this.beforeChange(currentTab, this.activeTab);
if (typeof result !== 'undefined') {
if (result.then) {
changeResult = result;
}
else if (result.subscribe) {
changeResult = result.toPromise();
}
else {
changeResult = Promise.resolve(result);
}
}
}
return changeResult;
}
select(id, callback) {
if (!this.reactivable && this.activeTab === id) {
return;
}
this.canChange(id).then((change) => {
if (!change) {
return;
}
const tab = this.tabs.find((item) => item.id === id);
if (tab && !tab.disabled) {
this.activeTab = id;
this.changeActiveSlidingBlock();
if (callback) {
callback();
}
this.activeTabChange.emit(id);
}
});
}
addOrDeleteTab(event, id) {
event.stopPropagation();
const operation = id || id === 0 ? 'delete' : 'add';
this.addOrDeleteTabChange.emit({ id, operation });
}
getTabsWidth() {
if (this.scrollMode && this.tabsViewport && this.tabsEle) {
let tabsWidthSum = 0;
const tabs = this.tabsEle.nativeElement.querySelectorAll('li.devui-nav-tab-item');
this.tabsWidth = [];
tabs.forEach((tab) => {
let width = tab.offsetWidth;
const style = getComputedStyle(tab);
const marginLeft = parseFloat(style.marginLeft);
const marginRight = parseFloat(style.marginRight);
width += marginLeft > 0 ? marginLeft : 0;
width += marginRight > 0 ? marginRight : 0;
tabsWidthSum += width;
this.tabsWidth.push(width);
});
// 延时赋值避免脏值检查错误
setTimeout(() => {
const fixWidth = this.el.nativeElement.clientWidth - this.ARROW_DROPDOWN_WIDTH;
this.scrollModeToggle = this.scrollMode === 'auto' ? tabsWidthSum > fixWidth : !!this.scrollMode;
if (this.scrollModeToggle && this.activeTab && this.tabs) {
const data = this.tabs.toArray();
const index = data.findIndex((item) => item.id === this.activeTab);
const tab = data[index];
this.scroll(null, index, tab, true);
}
});
}
}
scroll(direction, index, tab, isInitScrollMode) {
if (this.scrollModeToggle && this.tabsEle) {
const tabs = this.tabsEle.nativeElement.querySelectorAll('li.devui-nav-tab-item');
const containerWidth = this.tabsEle.nativeElement.scrollWidth;
const scrollLeft = this.tabsEle.nativeElement.scrollLeft;
const viewportWidth = this.tabsViewport.nativeElement.offsetWidth;
if (direction) {
const distance = direction === 'next' ? scrollLeft + viewportWidth : scrollLeft - viewportWidth;
let width = 0;
for (let i = 0; i < this.tabsWidth.length; i++) {
width += this.tabsWidth[i];
if (width >= distance) {
const lastIndex = containerWidth - width < viewportWidth ? tabs.length - 1 : i;
const nexIndex = direction === 'next' ? lastIndex : i + 1;
this.offsetIndex = i === 0 ? 0 : nexIndex;
break;
}
}
this.scrollIntoView(tabs[this.offsetIndex]);
}
else if (index >= 0 && tab) {
const toIndexArr = this.tabsWidth.slice(0, index);
const width = sum(toIndexArr);
const lastIndex = containerWidth - width < viewportWidth ? tabs.length - 1 : index;
const fixIndex = index === 0 ? 0 : lastIndex;
const dom = tabs[fixIndex];
this.offsetIndex = fixIndex;
if (isInitScrollMode) {
// 切换为滚动模式尚未渲染完，目标dom仍在可视区，不会产生滚动，延时待渲染完毕后执行滚动
setTimeout(() => this.scrollIntoView(dom));
}
else {
this.select(tab.id, () => this.scrollIntoView(dom));
}
}
}
}
scrollIntoView(dom) {
if (dom) {
dom.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabsComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TabsComponent, selector: "d-tabs", inputs: { type: "type", size: "size", showContent: "showContent", scrollMode: "scrollMode", activeTab: "activeTab", customWidth: "customWidth", reactivable: "reactivable", closeable: "closeable", closeableIds: "closeableIds", addable: "addable", addTabTpl: "addTabTpl", scrollModeOperationTpl: "scrollModeOperationTpl", vertical: "vertical", cssClass: "cssClass", isHidden: "isHidden", beforeChange: "beforeChange" }, outputs: { activeTabChange: "activeTabChange", addOrDeleteTabChange: "addOrDeleteTabChange" }, queries: [{ propertyName: "tabs", predicate: TabComponent }], viewQueries: [{ propertyName: "tabsEle", first: true, predicate: ["tabsEle"], descendants: true }, { propertyName: "tabsViewport", first: true, predicate: ["tabsViewport"], descendants: true }], exportAs: ["tabs"], usesOnChanges: true, ngImport: i0, template: "<div class=\"devui-nav-container devui-nav-{{ size }}\">\r\n <div *ngIf=\"scrollModeToggle\" class=\"devui-nav-scroll-ctrl\">\r\n <span [ngClass]=\"{ disable: offsetIndex === 0 }\" (click)=\"scroll('prev')\">\r\n <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\" version=\"1.1\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon\r\n fill-rule=\"nonzero\"\r\n points=\"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8\"\r\n ></polygon>\r\n </g>\r\n </svg>\r\n </span>\r\n </div>\r\n <div\r\n #tabsViewport\r\n [style.width]=\"type === 'tabs' || type === 'wrapped' ? '100%' : ''\"\r\n [ngClass]=\"{ 'dev-nav-scroll-container': scrollModeToggle, 'devui-nav-shadow': isShowShadow }\"\r\n >\r\n <ul\r\n #tabsEle\r\n class=\"devui-nav {{ cssClass }} {{ tabs.length ? 'devui-nav-' + type : '' }}\"\r\n [id]=\"id\"\r\n [ngClass]=\"{\r\n 'devui-nav-stacked': vertical,\r\n 'devui-nav-add-button': addable,\r\n 'devui-nav-overflow': scrollModeToggle || scrollMode\r\n }\"\r\n >\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <li\r\n class=\"devui-nav-tab-item\"\r\n [id]=\"tab.id === undefined ? '' : tab.id\"\r\n [class.disabled]=\"tab.disabled\"\r\n [class.active]=\"tab.id == activeTab\"\r\n [class.closeable]=\"tab | dTabCloseablePipe : closeable : closeableIds\"\r\n (click)=\"select(tab.id)\"\r\n >\r\n <a [attr.aria-expanded]=\"tab.id == activeTab\" [style.width]=\"customWidth\" [ngClass]=\"{ 'custom-width': customWidth }\">\r\n <ng-template\r\n *ngIf=\"!tab.title\"\r\n [ngTemplateOutlet]=\"tab.titleTpl?.templateRef\"\r\n [ngTemplateOutletContext]=\"{ tab: tab, position: 'tab' }\"\r\n ></ng-template>\r\n <span *ngIf=\"tab.title\">{{ tab.title }}</span>\r\n </a>\r\n <span *ngIf=\"tab.closeable\" class=\"devui-tab-close-icon\" (click)=\"addOrDeleteTab($event, tab.id)\">\r\n <svg\r\n width=\"12px\"\r\n height=\"12px\"\r\n viewBox=\"0 0 12 12\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M8.86785321,3.13214679 C9.02624037,3.29053395 9.02624037,3.54733027 8.86785321,3.70571743 L6.573,6 L8.86785321,8.29428257 C9.02624037,8.45266973 9.02624037,8.70946605 8.86785321,8.86785321 C8.70946605,9.02624037 8.45266973,9.02624037 8.29428257,8.86785321 L6,6.573 L3.70571743,8.86785321 C3.54733027,9.02624037 3.29053395,9.02624037 3.13214679,8.86785321 C2.97375963,8.70946605 2.97375963,8.45266973 3.13214679,8.29428257 L5.427,6 L3.13214679,3.70571743 C2.97375963,3.54733027 2.97375963,3.29053395 3.13214679,3.13214679 C3.29053395,2.97375963 3.54733027,2.97375963 3.70571743,3.13214679 L6,5.427 L8.29428257,3.13214679 C8.45266973,2.97375963 8.70946605,2.97375963 8.86785321,3.13214679 Z\"\r\n fill-rule=\"nonzero\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </span>\r\n </li>\r\n </ng-container>\r\n <li *ngIf=\"addable && !addTabTpl; else addTabTpl\" class=\"devui-nav-tab-item devui-tab-add-icon\">\r\n <a [style.width]=\"customWidth\" (click)=\"addOrDeleteTab($event)\">\r\n <svg\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon points=\"7 7 7 2 9 2 9 7 14 7 14 9 9 9 9 14 7 14 7 9 2 9 2 7\"></polygon>\r\n </g>\r\n </svg>\r\n </a>\r\n </li>\r\n <div\r\n *ngIf=\"activeTab !== undefined\"\r\n class=\"devui-nav-{{ type }}-animation\"\r\n [style.left]=\"offsetLeft + 'px'\"\r\n [style.width]=\"offsetWidth + 'px'\"\r\n ></div>\r\n </ul>\r\n </div>\r\n <div dDropDown appendToBody *ngIf=\"scrollModeToggle\" class=\"devui-nav-scroll-ctrl\">\r\n <span [ngClass]=\"{ disable: offsetIndex === tabs.length - 1 }\" (click)=\"scroll('next')\">\r\n <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\" version=\"1.1\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon\r\n fill-rule=\"nonzero\"\r\n transform=\"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) \"\r\n points=\"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8\"\r\n ></polygon>\r\n </g>\r\n </svg>\r\n </span>\r\n <span class=\"devui-nav-more-operate\" dDropDownToggle>\r\n <svg\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M0.5,8 C0.499999992,7.46410162 0.785898375,6.96891109 1.24999999,6.7009619 C1.71410161,6.4330127 2.28589839,6.4330127 2.75000001,6.7009619 C3.21410162,6.96891109 3.50000001,7.46410162 3.5,8 C3.5,8.82842713 2.82842712,9.5 2,9.5 C1.17157288,9.5 0.5,8.82842713 0.5,8 Z M6.5,8 C6.49999999,7.46410162 6.78589838,6.96891109 7.24999999,6.7009619 C7.71410161,6.4330127 8.28589839,6.4330127 8.75000001,6.7009619 C9.21410162,6.96891109 9.50000001,7.46410162 9.5,8 C9.5,8.82842713 8.82842712,9.5 8,9.5 C7.17157288,9.5 6.5,8.82842713 6.5,8 Z M12.5,8 C12.5,7.46410162 12.7858984,6.96891109 13.25,6.7009619 C13.7141016,6.4330127 14.2858984,6.4330127 14.75,6.7009619 C15.2141016,6.96891109 15.5,7.46410162 15.5,8 C15.5,8.82842713 14.8284271,9.5 14,9.5 C13.1715729,9.5 12.5,8.82842713 12.5,8 Z\"\r\n transform=\"translate(8.000000, 8.000000) rotate(90.000000) translate(-8.000000, -8.000000) \"\r\n ></path>\r\n </g>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"scrollModeOperationTpl\">\r\n <ng-template [ngTemplateOutlet]=\"scrollModeOperationTpl\"></ng-template>\r\n </span>\r\n <ul dDropDownMenu class=\"devui-nav-dropdown devui-dropdown-menu devui-dropdown-overlay\">\r\n <li\r\n *ngFor=\"let tab of tabs; index as i\"\r\n class=\"devui-dropdown-item\"\r\n [class.disabled]=\"tab.disabled\"\r\n [class.active]=\"tab.id == activeTab\"\r\n (click)=\"tab.disabled ? $event.stopPropagation() : scroll(null, i, tab)\"\r\n >\r\n <ng-template\r\n *ngIf=\"!tab.title\"\r\n [ngTemplateOutlet]=\"tab.titleTpl?.templateRef\"\r\n [ngTemplateOutletContext]=\"{ tab: tab, position: 'list' }\"\r\n ></ng-template>\r\n <span *ngIf=\"tab.title\">{{ tab.title }}</span>\r\n </li>\r\n </ul>\r\n </div>\r\n</div>\r\n<div class=\"devui-tab-content\" *ngIf=\"showContent\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <ng-template [ngTemplateOutlet]=\"isHidden ? hiddenTpl : destroyTpl\" [ngTemplateOutletContext]=\"{ tab: tab }\"> </ng-template>\r\n </ng-container>\r\n</div>\r\n\r\n<ng-template #destroyTpl let-tab=\"tab\">\r\n <div class=\"devui-tab-pane fade in\" *ngIf=\"tab.id == activeTab\" [ngClass]=\"{ 'in active': tab.id == activeTab }\">\r\n <ng-template [ngTemplateOutlet]=\"tab.contentTpl?.templateRef || tab.innerContent\"></ng-template>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #hiddenTpl let-tab=\"tab\">\r\n <div class=\"devui-tab-pane fade in\" [hidden]=\"tab.id != activeTab\" [ngClass]=\"{ 'in active': tab.id == activeTab }\">\r\n <ng-template [ngTemplateOutlet]=\"tab.contentTpl?.templateRef || tab.innerContent\"></ng-template>\r\n </div>\r\n</ng-template>\r\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}:host{display:block;--devui-tab-slider-bg: var(--devui-list-item-hover-bg, #f2f5fc);--devui-tab-options-bg: var(--devui-brand, #5e7ce0)}body[ui-theme=infinity-theme] :host{--devui-tab-slider-bg: rgba(25, 25, 25, .05)}.devui-nav-container{display:flex;align-items:stretch;flex-wrap:nowrap;flex-direction:row;background:inherit}.devui-nav-container li{cursor:pointer;color:var(--devui-text, #191919);float:left;transition:text-shadow var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-nav-container li.closeable{white-space:nowrap}.devui-nav-container li>a{display:inline-block;height:100%;padding:0;width:max-content}.devui-nav-container li.devui-tab-add-icon svg{vertical-align:middle;margin-top:-4px}.devui-nav-container li.devui-tab-add-icon svg polygon{fill:var(--devui-aide-text, #595959)}.devui-nav-container li.devui-tab-add-icon:hover svg polygon{fill:var(--devui-text, #191919)}.devui-nav-container li:not(.active):not(.disabled)>a{color:var(--devui-text, #191919)}.devui-nav-container li.active,.devui-nav-container li:hover:not(.active):not(.disabled){text-shadow:0 0 .4px var(--devui-brand-active, #0950de)}.devui-nav-container li.active>a,.devui-nav-container li:hover:not(.active):not(.disabled)>a{color:var(--devui-brand-active, #0950de);background-color:transparent;border:none}.devui-nav-container li.active>a:hover,.devui-nav-container li.active>a:focus,.devui-nav-container li.active>a:active,.devui-nav-container li:hover:not(.active):not(.disabled)>a:hover,.devui-nav-container li:hover:not(.active):not(.disabled)>a:focus,.devui-nav-container li:hover:not(.active):not(.disabled)>a:active{color:var(--devui-brand-active, #0950de);outline:none}.devui-nav-container li.disabled>a{color:var(--devui-disabled-text, #c2c2c2);cursor:not-allowed}.devui-nav-container li .custom-width{text-align:center}.devui-nav-container li .devui-tab-close-icon{cursor:pointer;display:inline-block;text-align:center;font-size:var(--devui-font-size-icon, 16px);width:12px;height:12px;line-height:12px;margin:0 0 0 12px;background-color:var(--devui-line, #dbdbdb);border-radius:50%}.devui-nav-container li .devui-tab-close-icon svg path{fill:var(--devui-light-text, #ffffff)}.devui-nav-container li .devui-tab-close-icon:hover{background-color:var(--devui-shape-icon-fill-hover, #808080);text-decoration:none}.devui-nav-container.devui-nav-lg{font-size:var(--devui-font-size-lg, 14px)}.devui-nav-container.devui-nav-lg .devui-nav-tabs>li{height:45px;line-height:45px}.devui-nav-container.devui-nav-lg .devui-nav-pills>li{height:46px;line-height:46px}.devui-nav-container.devui-nav-lg .devui-nav-options>li{height:40px;line-height:40px}.devui-nav-container.devui-nav-lg .devui-nav-slider-animation,.devui-nav-container.devui-nav-lg .devui-nav-slider>li{height:42px;line-height:42px}.devui-nav-container.devui-nav-lg .devui-nav-wrapped.devui-nav-overflow li.active{padding-top:10px}.devui-nav-container.devui-nav-lg .devui-nav-wrapped li{padding:11px 16px}.devui-nav-container.devui-nav-md{font-size:var(--devui-font-size-lg, 14px)}.devui-nav-container.devui-nav-md .devui-nav-tabs>li{height:27px;line-height:27px}.devui-nav-container.devui-nav-md .devui-nav-pills>li{height:28px;line-height:28px}.devui-nav-container.devui-nav-md .devui-nav-options>li{height:22px;line-height:22px;font-size:var(--devui-font-size, 12px)}.devui-nav-container.devui-nav-md .devui-nav-slider-animation,.devui-nav-container.devui-nav-md .devui-nav-slider>li{height:24px;line-height:24px;font-size:var(--devui-font-size, 12px)}.devui-nav-container.devui-nav-md .devui-nav-wrapped.devui-nav-overflow li.active{padding-top:7px}.devui-nav-container.devui-nav-md .devui-nav-wrapped li{padding:8px 16px}.devui-nav-container.devui-nav-sm,.devui-nav-container.devui-nav-xs{font-size:var(--devui-font-size-lg, 14px)}.devui-nav-container.devui-nav-sm .devui-nav-tabs>li,.devui-nav-container.devui-nav-xs .devui-nav-tabs>li{height:25px;line-height:25px}.devui-nav-container.devui-nav-sm .devui-nav-pills>li,.devui-nav-container.devui-nav-xs .devui-nav-pills>li{height:26px;line-height:26px}.devui-nav-container.devui-nav-sm .devui-nav-options>li,.devui-nav-container.devui-nav-xs .devui-nav-options>li{height:20px;line-height:20px;font-size:var(--devui-font-size, 12px)}.devui-nav-container.devui-nav-sm .devui-nav-slider-animation,.devui-nav-container.devui-nav-sm .devui-nav-slider>li,.devui-nav-container.devui-nav-xs .devui-nav-slider-animation,.devui-nav-container.devui-nav-xs .devui-nav-slider>li{height:22px;line-height:22px;font-size:var(--devui-font-size, 12px)}.devui-nav-container.devui-nav-sm .devui-nav-wrapped.devui-nav-overflow li.active,.devui-nav-container.devui-nav-xs .devui-nav-wrapped.devui-nav-overflow li.active{padding-top:0}.devui-nav-container.devui-nav-sm .devui-nav-wrapped li,.devui-nav-container.devui-nav-xs .devui-nav-wrapped li{padding:1px 16px}.devui-nav-container .devui-nav-tabs{border-bottom:1px var(--devui-dividing-line, #f0f0f0) solid}.devui-nav-container .devui-nav-tabs,.devui-nav-container .devui-nav-pills{background:transparent}.devui-nav-container .devui-nav-tabs>li,.devui-nav-container .devui-nav-pills>li{margin-left:24px}.devui-nav-container .devui-nav-tabs>li:first-child,.devui-nav-container .devui-nav-pills>li:first-child{margin-left:0}.devui-nav-container .devui-nav-tabs>li:after,.devui-nav-container .devui-nav-pills>li:after{content:\"\";display:block;background:transparent;margin:auto;position:relative;bottom:1px;width:0;height:2px;transition:width var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-nav-container .devui-nav-tabs>li.active:after,.devui-nav-container .devui-nav-pills>li.active:after{width:100%;background:var(--devui-brand, #0a59f7)}.devui-nav-container .devui-nav-tabs>li.devui-tab-add-icon,.devui-nav-container .devui-nav-pills>li.devui-tab-add-icon{margin-right:24px}.devui-nav-container .devui-nav-tabs.devui-nav-stacked,.devui-nav-container .devui-nav-pills.devui-nav-stacked{border:none}.devui-nav-container .devui-nav-tabs.devui-nav-stacked>li,.devui-nav-container .devui-nav-pills.devui-nav-stacked>li{float:none;border:none;margin-left:0;height:36px;line-height:36px;font-weight:700}.devui-nav-container .devui-nav-tabs.devui-nav-stacked>li:not(.active)>a,.devui-nav-container .devui-nav-tabs.devui-nav-stacked>li:not(.disable)>a,.devui-nav-container .devui-nav-pills.devui-nav-stacked>li:not(.active)>a,.devui-nav-container .devui-nav-pills.devui-nav-stacked>li:not(.disable)>a{color:var(--devui-text, #191919)}.devui-nav-container .devui-nav-tabs.devui-nav-stacked>li.active>a,.devui-nav-container .devui-nav-tabs.devui-nav-stacked>li:hover:not(.disabled)>a,.devui-nav-container .devui-nav-pills.devui-nav-stacked>li.active>a,.devui-nav-container .devui-nav-pills.devui-nav-stacked>li:hover:not(.disabled)>a{color:var(--devui-brand, #0a59f7)}.devui-nav-container .devui-nav-options{background:var(--devui-base-bg, #ffffff);border:1px solid var(--devui-dividing-line, #f0f0f0);border-radius:var(--devui-border-radius, 2px);padding:2px}.devui-nav-container .devui-nav-options>li{background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius, 2px);transition:background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),text-shadow var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-nav-container .devui-nav-options>li>a{padding:0 16px}.devui-nav-container .devui-nav-options>li.active{background-color:var(--devui-tab-options-bg)}.devui-nav-container .devui-nav-options>li.active>a{color:var(--devui-light-text, #ffffff);padding:0 16px}.devui-nav-container .devui-nav-options>li.devui-tab-add-icon{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-nav-container .devui-nav-options>li .devui-tab-close-icon{position:relative;top:1px;margin:0 12px 0 -4px}.devui-nav-container .devui-nav-slider{border:none;border-radius:var(--devui-border-radius, 2px);background:var(--devui-tab-slider-bg);width:fit-content;display:flex;align-items:center;position:relative}.devui-nav-container .devui-nav-slider>li{margin:2px;position:relative;z-index:1}.devui-nav-container .devui-nav-slider>li>a{padding:0 16px}.devui-nav-container .devui-nav-slider>li .devui-tab-close-icon{margin:0 12px 0 -4px}.devui-nav-container .devui-nav-wrapped{background:transparent;border-bottom:1px solid var(--devui-dividing-line, #f0f0f0);background-color:var(--devui-base-bg, #ffffff)}.devui-nav-container .devui-nav-wrapped>li{height:auto;line-height:23px}.devui-nav-container .devui-nav-wrapped>li.active{background:var(--devui-global-bg, #f5f5f5);border-radius:var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0 0;border:1px solid var(--devui-dividing-line, #f0f0f0);border-bottom-color:transparent;margin:-1px}.devui-nav-container .devui-nav-wrapped.devui-nav-overflow li.active{margin-top:0}.devui-nav-container .devui-nav:before,.devui-nav-container .devui-nav:after{content:\" \";display:table}.devui-nav-container .devui-nav:after{clear:both}.devui-nav-container .devui-nav.devui-nav-overflow{width:100%;overflow:hidden;position:relative;display:flex;flex-wrap:nowrap}.devui-nav-container .devui-nav-scroll-ctrl{display:flex;align-items:stretch;width:auto;height:inherit;padding-bottom:1px}.devui-nav-container .devui-nav-scroll-ctrl span{padding-left:16px;display:flex;align-items:center;cursor:pointer}.devui-nav-container .devui-nav-scroll-ctrl span:last-child{padding:0 16px}.devui-nav-container .devui-nav-scroll-ctrl span svg{vertical-align:middle}.devui-nav-container .devui-nav-scroll-ctrl span svg path,.devui-nav-container .devui-nav-scroll-ctrl span svg polygon{fill:var(--devui-aide-text, #595959)}.devui-nav-container .devui-nav-scroll-ctrl span.disable{cursor:not-allowed}.devui-nav-container .devui-nav-scroll-ctrl span.disable svg path,.devui-nav-container .devui-nav-scroll-ctrl span.disable svg polygon{fill:var(--devui-disabled-text, #c2c2c2)}.devui-nav-container .devui-nav-scroll-ctrl .devui-nav-more-operate svg{transform:rotate(90deg)}.devui-nav-container .dev-nav-scroll-container{width:calc(100% - 128px);height:100%;position:relative;overflow:hidden}.devui-nav-container .dev-nav-scroll-container.devui-nav-shadow:before,.devui-nav-container .dev-nav-scroll-container.devui-nav-shadow:after{content:\" \";position:absolute;top:-50%;width:100%;height:200%;pointer-events:none;z-index:1}.devui-nav-container .dev-nav-scroll-container.devui-nav-shadow:before{left:0;box-shadow:inset var(--devui-shadow-length-slide-right, 2px 0 8px 0) var(--devui-connected-overlay-shadow, rgba(0, 0, 0, .16))}.devui-nav-container .dev-nav-scroll-container.devui-nav-shadow:after{right:0;box-shadow:inset var(--devui-shadow-length-slide-left, -2px 0 8px 0) var(--devui-connected-overlay-shadow, rgba(0, 0, 0, .16))}.devui-nav-container .devui-nav-slider-animation{position:absolute;z-index:0;background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius, 2px);box-shadow:var(--devui-shadow-length-base, 0 1px 6px 0) var(--devui-light-shadow, rgba(0, 0, 0, .08));top:2px;transition:left var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),width var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-tab-content{margin-top:12px}::ng-deep .devui-nav-dropdown{max-height:240px;overflow:auto}::ng-deep .devui-nav-dropdown li{padding:8px 12px;line-height:20px;border-radius:var(--devui-border-radius, 2px);cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DropDownDirective, selector: "[dDropDown]", inputs: ["isOpen", "disabled", "showAnimation", "trigger", "closeScope", "closeOnMouseLeaveMenu", "autofocusToggleElement"], outputs: ["toggleEvent"], exportAs: ["d-dropdown"] }, { kind: "directive", type: i2.DropDownMenuDirective, selector: "[dDropDownMenu]", exportAs: ["d-dropdown-menu"] }, { kind: "directive", type: i2.DropDownToggleDirective, selector: "[dDropDownToggle]", inputs: ["toggleOnFocus", "autoFocus"], exportAs: ["d-dropdown-toggle"] }, { kind: "component", type: i2.DropDownAppendToBodyComponent, selector: "[dDropDown][appendToBody]", inputs: ["alignOrigin", "appendToBodyDirections", "appendToBodyScrollStrategy"], exportAs: ["d-dropdown-append-to-body"] }, { kind: "pipe", type: i3.TabCloseablePipe, name: "dTabCloseablePipe" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabsComponent, decorators: [{
type: Component,
args: [{ selector: 'd-tabs', exportAs: 'tabs', preserveWhitespaces: false, template: "<div class=\"devui-nav-container devui-nav-{{ size }}\">\r\n <div *ngIf=\"scrollModeToggle\" class=\"devui-nav-scroll-ctrl\">\r\n <span [ngClass]=\"{ disable: offsetIndex === 0 }\" (click)=\"scroll('prev')\">\r\n <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\" version=\"1.1\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon\r\n fill-rule=\"nonzero\"\r\n points=\"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8\"\r\n ></polygon>\r\n </g>\r\n </svg>\r\n </span>\r\n </div>\r\n <div\r\n #tabsViewport\r\n [style.width]=\"type === 'tabs' || type === 'wrapped' ? '100%' : ''\"\r\n [ngClass]=\"{ 'dev-nav-scroll-container': scrollModeToggle, 'devui-nav-shadow': isShowShadow }\"\r\n >\r\n <ul\r\n #tabsEle\r\n class=\"devui-nav {{ cssClass }} {{ tabs.length ? 'devui-nav-' + type : '' }}\"\r\n [id]=\"id\"\r\n [ngClass]=\"{\r\n 'devui-nav-stacked': vertical,\r\n 'devui-nav-add-button': addable,\r\n 'devui-nav-overflow': scrollModeToggle || scrollMode\r\n }\"\r\n >\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <li\r\n class=\"devui-nav-tab-item\"\r\n [id]=\"tab.id === undefined ? '' : tab.id\"\r\n [class.disabled]=\"tab.disabled\"\r\n [class.active]=\"tab.id == activeTab\"\r\n [class.closeable]=\"tab | dTabCloseablePipe : closeable : closeableIds\"\r\n (click)=\"select(tab.id)\"\r\n >\r\n <a [attr.aria-expanded]=\"tab.id == activeTab\" [style.width]=\"customWidth\" [ngClass]=\"{ 'custom-width': customWidth }\">\r\n <ng-template\r\n *ngIf=\"!tab.title\"\r\n [ngTemplateOutlet]=\"tab.titleTpl?.templateRef\"\r\n [ngTemplateOutletContext]=\"{ tab: tab, position: 'tab' }\"\r\n ></ng-template>\r\n <span *ngIf=\"tab.title\">{{ tab.title }}</span>\r\n </a>\r\n <span *ngIf=\"tab.closeable\" class=\"devui-tab-close-icon\" (click)=\"addOrDeleteTab($event, tab.id)\">\r\n <svg\r\n width=\"12px\"\r\n height=\"12px\"\r\n viewBox=\"0 0 12 12\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M8.86785321,3.13214679 C9.02624037,3.29053395 9.02624037,3.54733027 8.86785321,3.70571743 L6.573,6 L8.86785321,8.29428257 C9.02624037,8.45266973 9.02624037,8.70946605 8.86785321,8.86785321 C8.70946605,9.02624037 8.45266973,9.02624037 8.29428257,8.86785321 L6,6.573 L3.70571743,8.86785321 C3.54733027,9.02624037 3.29053395,9.02624037 3.13214679,8.86785321 C2.97375963,8.70946605 2.97375963,8.45266973 3.13214679,8.29428257 L5.427,6 L3.13214679,3.70571743 C2.97375963,3.54733027 2.97375963,3.29053395 3.13214679,3.13214679 C3.29053395,2.97375963 3.54733027,2.97375963 3.70571743,3.13214679 L6,5.427 L8.29428257,3.13214679 C8.45266973,2.97375963 8.70946605,2.97375963 8.86785321,3.13214679 Z\"\r\n fill-rule=\"nonzero\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </span>\r\n </li>\r\n </ng-container>\r\n <li *ngIf=\"addable && !addTabTpl; else addTabTpl\" class=\"devui-nav-tab-item devui-tab-add-icon\">\r\n <a [style.width]=\"customWidth\" (click)=\"addOrDeleteTab($event)\">\r\n <svg\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon points=\"7 7 7 2 9 2 9 7 14 7 14 9 9 9 9 14 7 14 7 9 2 9 2 7\"></polygon>\r\n </g>\r\n </svg>\r\n </a>\r\n </li>\r\n <div\r\n *ngIf=\"activeTab !== undefined\"\r\n class=\"devui-nav-{{ type }}-animation\"\r\n [style.left]=\"offsetLeft + 'px'\"\r\n [style.width]=\"offsetWidth + 'px'\"\r\n ></div>\r\n </ul>\r\n </div>\r\n <div dDropDown appendToBody *ngIf=\"scrollModeToggle\" class=\"devui-nav-scroll-ctrl\">\r\n <span [ngClass]=\"{ disable: offsetIndex === tabs.length - 1 }\" (click)=\"scroll('next')\">\r\n <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\" version=\"1.1\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon\r\n fill-rule=\"nonzero\"\r\n transform=\"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) \"\r\n points=\"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8\"\r\n ></polygon>\r\n </g>\r\n </svg>\r\n </span>\r\n <span class=\"devui-nav-more-operate\" dDropDownToggle>\r\n <svg\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M0.5,8 C0.499999992,7.46410162 0.785898375,6.96891109 1.24999999,6.7009619 C1.71410161,6.4330127 2.28589839,6.4330127 2.75000001,6.7009619 C3.21410162,6.96891109 3.50000001,7.46410162 3.5,8 C3.5,8.82842713 2.82842712,9.5 2,9.5 C1.17157288,9.5 0.5,8.82842713 0.5,8 Z M6.5,8 C6.49999999,7.46410162 6.78589838,6.96891109 7.24999999,6.7009619 C7.71410161,6.4330127 8.28589839,6.4330127 8.75000001,6.7009619 C9.21410162,6.96891109 9.50000001,7.46410162 9.5,8 C9.5,8.82842713 8.82842712,9.5 8,9.5 C7.17157288,9.5 6.5,8.82842713 6.5,8 Z M12.5,8 C12.5,7.46410162 12.7858984,6.96891109 13.25,6.7009619 C13.7141016,6.4330127 14.2858984,6.4330127 14.75,6.7009619 C15.2141016,6.96891109 15.5,7.46410162 15.5,8 C15.5,8.82842713 14.8284271,9.5 14,9.5 C13.1715729,9.5 12.5,8.82842713 12.5,8 Z\"\r\n transform=\"translate(8.000000, 8.000000) rotate(90.000000) translate(-8.000000, -8.000000) \"\r\n ></path>\r\n </g>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"scrollModeOperationTpl\">\r\n <ng-template [ngTemplateOutlet]=\"scrollModeOperationTpl\"></ng-template>\r\n </span>\r\n <ul dDropDownMenu class=\"devui-nav-dropdown devui-dropdown-menu devui-dropdown-overlay\">\r\n <li\r\n *ngFor=\"let tab of tabs; index as i\"\r\n class=\"devui-dropdown-item\"\r\n [class.disabled]=\"tab.disabled\"\r\n [class.active]=\"tab.id == activeTab\"\r\n (click)=\"tab.disabled ? $event.stopPropagation() : scroll(null, i, tab)\"\r\n >\r\n <ng-template\r\n *ngIf=\"!tab.title\"\r\n [ngTemplateOutlet]=\"tab.titleTpl?.templateRef\"\r\n [ngTemplateOutletContext]=\"{ tab: tab, position: 'list' }\"\r\n ></ng-template>\r\n <span *ngIf=\"tab.title\">{{ tab.title }}</span>\r\n </li>\r\n </ul>\r\n </div>\r\n</div>\r\n<div class=\"devui-tab-content\" *ngIf=\"showContent\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <ng-template [ngTemplateOutlet]=\"isHidden ? hiddenTpl : destroyTpl\" [ngTemplateOutletContext]=\"{ tab: tab }\"> </ng-template>\r\n </ng-container>\r\n</div>\r\n\r\n<ng-template #destroyTpl let-tab=\"tab\">\r\n <div class=\"devui-tab-pane fade in\" *ngIf=\"tab.id == activeTab\" [ngClass]=\"{ 'in active': tab.id == activeTab }\">\r\n <ng-template [ngTemplateOutlet]=\"tab.contentTpl?.templateRef || tab.innerContent\"></ng-template>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #hiddenTpl let-tab=\"tab\">\r\n <div class=\"devui-tab-pane fade in\" [hidden]=\"tab.id != activeTab\" [ngClass]=\"{ 'in active': tab.id == activeTab }\">\r\n <ng-template [ngTemplateOutlet]=\"tab.contentTpl?.templateRef || tab.innerContent\"></ng-template>\r\n </div>\r\n</ng-template>\r\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}:host{display:block;--devui-tab-slider-bg: var(--devui-list-item-hover-bg, #f2f5fc);--devui-tab-options-bg: var(--devui-brand, #5e7ce0)}body[ui-theme=infinity-theme] :host{--devui-tab-slider-bg: rgba(25, 25, 25, .05)}.devui-nav-container{display:flex;align-items:stretch;flex-wrap:nowrap;flex-direction:row;background:inherit}.devui-nav-container li{cursor:pointer;color:var(--devui-text, #191919);float:left;transition:text-shadow var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-nav-container li.closeable{white-space:nowrap}.devui-nav-container li>a{display:inline-block;height:100%;padding:0;width:max-content}.devui-nav-container li.devui-tab-add-icon svg{vertical-align:middle;margin-top:-4px}.devui-nav-container li.devui-tab-add-icon svg polygon{fill:var(--devui-aide-text, #595959)}.devui-nav-container li.devui-tab-add-icon:hover svg polygon{fill:var(--devui-text, #191919)}.devui-nav-container li:not(.active):not(.disabled)>a{color:var(--devui-text, #191919)}.devui-nav-container li.active,.devui-nav-container li:hover:not(.active):not(.disabled){text-shadow:0 0 .4px var(--devui-brand-active, #0950de)}.devui-nav-container li.active>a,.devui-nav-container li:hover:not(.active):not(.disabled)>a{color:var(--devui-brand-active, #0950de);background-color:transparent;border:none}.devui-nav-container li.active>a:hover,.devui-nav-container li.active>a:focus,.devui-nav-container li.active>a:active,.devui-nav-container li:hover:not(.active):not(.disabled)>a:hover,.devui-nav-container li:hover:not(.active):not(.disabled)>a:focus,.devui-nav-container li:hover:not(.active):not(.disabled)>a:active{color:var(--devui-brand-active, #0950de);outline:none}.devui-nav-container li.disabled>a{color:var(--devui-disabled-text, #c2c2c2);cursor:not-allowed}.devui-nav-container li .custom-width{text-align:center}.devui-nav-container li .devui-tab-close-icon{cursor:pointer;display:inline-block;text-align:center;font-size:var(--devui-font-size-icon, 16px);width:12px;height:12px;line-height:12px;margin:0 0 0 12px;background-color:var(--devui-line, #dbdbdb);border-radius:50%}.devui-nav-container li .devui-tab-close-icon svg path{fill:var(--devui-light-text, #ffffff)}.devui-nav-container li .devui-tab-close-icon:hover{background-color:var(--devui-shape-icon-fill-hover, #808080);text-decoration:none}.devui-nav-container.devui-nav-lg{font-size:var(--devui-font-size-lg, 14px)}.devui-nav-container.devui-nav-lg .devui-nav-tabs>li{height:45px;line-height:45px}.devui-nav-container.devui-nav-lg .devui-nav-pills>li{height:46px;line-height:46px}.devui-nav-container.devui-nav-lg .devui-nav-options>li{height:40px;line-height:40px}.devui-nav-container.devui-nav-lg .devui-nav-slider-animation,.devui-nav-container.devui-nav-lg .devui-nav-slider>li{height:42px;line-height:42px}.devui-nav-container.devui-nav-lg .devui-nav-wrapped.devui-nav-overflow li.active{padding-top:10px}.devui-nav-container.devui-nav-lg .devui-nav-wrapped li{padding:11px 16px}.devui-nav-container.devui-nav-md{font-size:var(--devui-font-size-lg, 14px)}.devui-nav-container.devui-nav-md .devui-nav-tabs>li{height:27px;line-height:27px}.devui-nav-container.devui-nav-md .devui-nav-pills>li{height:28px;line-height:28px}.devui-nav-container.devui-nav-md .devui-nav-options>li{height:22px;line-height:22px;font-size:var(--devui-font-size, 12px)}.devui-nav-container.devui-nav-md .devui-nav-slider-animation,.devui-nav-container.devui-nav-md .devui-nav-slider>li{height:24px;line-height:24px;font-size:var(--devui-font-size, 12px)}.devui-nav-container.devui-nav-md .devui-nav-wrapped.devui-nav-overflow li.active{padding-top:7px}.devui-nav-container.devui-nav-md .devui-nav-wrapped li{padding:8px 16px}.devui-nav-container.devui-nav-sm,.devui-nav-container.devui-nav-xs{font-size:var(--devui-font-size-lg, 14px)}.devui-nav-container.devui-nav-sm .devui-nav-tabs>li,.devui-nav-container.devui-nav-xs .devui-nav-tabs>li{height:25px;line-height:25px}.devui-nav-container.devui-nav-sm .devui-nav-pills>li,.devui-nav-container.devui-nav-xs .devui-nav-pills>li{height:26px;line-height:26px}.devui-nav-container.devui-nav-sm .devui-nav-options>li,.devui-nav-container.devui-nav-xs .devui-nav-options>li{height:20px;line-height:20px;font-size:var(--devui-font-size, 12px)}.devui-nav-container.devui-nav-sm .devui-nav-slider-animation,.devui-nav-container.devui-nav-sm .devui-nav-slider>li,.devui-nav-container.devui-nav-xs .devui-nav-slider-animation,.devui-nav-container.devui-nav-xs .devui-nav-slider>li{height:22px;line-height:22px;font-size:var(--devui-font-size, 12px)}.devui-nav-container.devui-nav-sm .devui-nav-wrapped.devui-nav-overflow li.active,.devui-nav-container.devui-nav-xs .devui-nav-wrapped.devui-nav-overflow li.active{padding-top:0}.devui-nav-container.devui-nav-sm .devui-nav-wrapped li,.devui-nav-container.devui-nav-xs .devui-nav-wrapped li{padding:1px 16px}.devui-nav-container .devui-nav-tabs{border-bottom:1px var(--devui-dividing-line, #f0f0f0) solid}.devui-nav-container .devui-nav-tabs,.devui-nav-container .devui-nav-pills{background:transparent}.devui-nav-container .devui-nav-tabs>li,.devui-nav-container .devui-nav-pills>li{margin-left:24px}.devui-nav-container .devui-nav-tabs>li:first-child,.devui-nav-container .devui-nav-pills>li:first-child{margin-left:0}.devui-nav-container .devui-nav-tabs>li:after,.devui-nav-container .devui-nav-pills>li:after{content:\"\";display:block;background:transparent;margin:auto;position:relative;bottom:1px;width:0;height:2px;transition:width var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-nav-container .devui-nav-tabs>li.active:after,.devui-nav-container .devui-nav-pills>li.active:after{width:100%;background:var(--devui-brand, #0a59f7)}.devui-nav-container .devui-nav-tabs>li.devui-tab-add-icon,.devui-nav-container .devui-nav-pills>li.devui-tab-add-icon{margin-right:24px}.devui-nav-container .devui-nav-tabs.devui-nav-stacked,.devui-nav-container .devui-nav-pills.devui-nav-stacked{border:none}.devui-nav-container .devui-nav-tabs.devui-nav-stacked>li,.devui-nav-container .devui-nav-pills.devui-nav-stacked>li{float:none;border:none;margin-left:0;height:36px;line-height:36px;font-weight:700}.devui-nav-container .devui-nav-tabs.devui-nav-stacked>li:not(.active)>a,.devui-nav-container .devui-nav-tabs.devui-nav-stacked>li:not(.disable)>a,.devui-nav-container .devui-nav-pills.devui-nav-stacked>li:not(.active)>a,.devui-nav-container .devui-nav-pills.devui-nav-stacked>li:not(.disable)>a{color:var(--devui-text, #191919)}.devui-nav-container .devui-nav-tabs.devui-nav-stacked>li.active>a,.devui-nav-container .devui-nav-tabs.devui-nav-stacked>li:hover:not(.disabled)>a,.devui-nav-container .devui-nav-pills.devui-nav-stacked>li.active>a,.devui-nav-container .devui-nav-pills.devui-nav-stacked>li:hover:not(.disabled)>a{color:var(--devui-brand, #0a59f7)}.devui-nav-container .devui-nav-options{background:var(--devui-base-bg, #ffffff);border:1px solid var(--devui-dividing-line, #f0f0f0);border-radius:var(--devui-border-radius, 2px);padding:2px}.devui-nav-container .devui-nav-options>li{background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius, 2px);transition:background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),text-shadow var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-nav-container .devui-nav-options>li>a{padding:0 16px}.devui-nav-container .devui-nav-options>li.active{background-color:var(--devui-tab-options-bg)}.devui-nav-container .devui-nav-options>li.active>a{color:var(--devui-light-text, #ffffff);padding:0 16px}.devui-nav-container .devui-nav-options>li.devui-tab-add-icon{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-nav-container .devui-nav-options>li .devui-tab-close-icon{position:relative;top:1px;margin:0 12px 0 -4px}.devui-nav-container .devui-nav-slider{border:none;border-radius:var(--devui-border-radius, 2px);background:var(--devui-tab-slider-bg);width:fit-content;display:flex;align-items:center;position:relative}.devui-nav-container .devui-nav-slider>li{margin:2px;position:relative;z-index:1}.devui-nav-container .devui-nav-slider>li>a{padding:0 16px}.devui-nav-container .devui-nav-slider>li .devui-tab-close-icon{margin:0 12px 0 -4px}.devui-nav-co