import * as i0 from '@angular/core';
import { Directive, Component, Input, ContentChild, ViewChild, EventEmitter, ContentChildren, Output, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from 'ng-devui/dropdown';
import { DropDownModule } from 'ng-devui/dropdown';

class TabContentDirective {
    constructor(templateRef) {
        this.templateRef = templateRef;
    }
}
TabContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TabContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
TabContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: TabContentDirective, selector: "[dTabContent]", ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TabContentDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[dTabContent]',
                }]
        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });

class TabTitleDirective {
    constructor(templateRef) {
        this.templateRef = templateRef;
    }
}
TabTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TabTitleDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
TabTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: TabTitleDirective, selector: "[dTabTitle]", ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TabTitleDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[dTabTitle]',
                }]
        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });

class TabComponent {
    constructor() {
        this.disabled = false;
    }
    /**
     * @deprecated
     * 用id替代
     */
    set tabId(value) {
        this.id = value;
    }
}
TabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TabComponent, selector: "d-tab", inputs: { tabId: "tabId", id: "id", title: "title", disabled: "disabled" }, queries: [{ propertyName: "contentTpl", first: true, predicate: TabContentDirective, descendants: true }, { propertyName: "titleTpl", first: true, predicate: TabTitleDirective, descendants: true }], viewQueries: [{ propertyName: "innerContent", first: true, predicate: ["innerContent"], descendants: true, static: true }], ngImport: i0, template: `<ng-template #innerContent><ng-content></ng-content></ng-template>`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TabComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'd-tab',
                    template: `<ng-template #innerContent><ng-content></ng-content></ng-template>`,
                    preserveWhitespaces: false,
                }]
        }], propDecorators: { tabId: [{
                type: Input
            }], id: [{
                type: Input
            }], title: [{
                type: Input
            }], disabled: [{
                type: Input
            }], contentTpl: [{
                type: ContentChild,
                args: [TabContentDirective]
            }], titleTpl: [{
                type: ContentChild,
                args: [TabTitleDirective]
            }], innerContent: [{
                type: ViewChild,
                args: ['innerContent', { static: true }]
            }] } });

class TabsComponent {
    constructor(el) {
        this.el = el;
        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.activeTabChange = new EventEmitter();
        this.addOrDeleteTabChange = new EventEmitter();
        this.offsetIndex = 0;
        this.scrollModeToggle = false;
        this.tabsWidth = [];
        this.id = `devuiTabs${TabsComponent.ID_SEED++}`;
    }
    get isShowShadow() {
        return this.scrollModeToggle && ['tabs', 'pills', 'wrapped'].includes(this.type);
    }
    ngOnChanges(changes) {
        const { activeTab, scrollMode } = changes;
        if (activeTab) {
            this.changeActiveSlidingBlock();
        }
        if (scrollMode) {
            this.getTabsWidth();
        }
    }
    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;
                }
            });
        }
    }
    canChange(currentTab) {
        let changeResult = Promise.resolve(true);
        if (this.beforeChange) {
            const result = this.beforeChange(currentTab);
            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);
            }
        });
    }
    checkCloseable(tab) {
        const closeable = this.closeable && (this.closeableIds.length === 0 || this.closeableIds.includes(tab.id));
        return !tab.disabled && !tab.titleTpl && closeable;
    }
    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) => {
                const style = getComputedStyle(tab);
                const width = parseFloat(style.marginLeft) + tab.offsetWidth + parseFloat(style.marginRight);
                tabsWidthSum += width;
                this.tabsWidth.push(width);
            });
            // 延时赋值避免脏值检查错误
            setTimeout(() => {
                this.scrollModeToggle = this.scrollMode === 'auto' ? tabsWidthSum > this.el.nativeElement.clientWidth : !!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) {
                        this.offsetIndex = direction === 'next' || i === 0 ? (containerWidth - width < viewportWidth ? tabs.length - 1 : i) : i + 1;
                        break;
                    }
                }
                this.scrollIntoView(tabs[this.offsetIndex]);
            }
            else if (index >= 0 && tab) {
                const dom = tabs[index];
                this.offsetIndex = index;
                if (isInitScrollMode) {
                    this.scrollIntoView(dom);
                }
                else {
                    this.select(tab.id, () => this.scrollIntoView(dom));
                }
            }
        }
    }
    scrollIntoView(dom) {
        if (dom) {
            dom.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
        }
    }
}
TabsComponent.ID_SEED = 0;
TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TabsComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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", vertical: "vertical", cssClass: "cssClass", 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      role=\"tablist\"\r\n      class=\"devui-nav devui-nav-{{ type }} {{ cssClass }}\"\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          role=\"presentation\"\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          (click)=\"select(tab.id)\"\r\n        >\r\n          <a\r\n            role=\"tab\"\r\n            data-toggle=\"tab\"\r\n            [attr.aria-expanded]=\"tab.id == activeTab\"\r\n            [style.width]=\"customWidth\"\r\n            [ngClass]=\"{ 'custom-width': customWidth }\"\r\n          >\r\n            <ng-template\r\n              *ngIf=\"!tab.title\"\r\n              [ngTemplateOutlet]=\"tab.titleTpl?.templateRef\"\r\n              [ngTemplateOutletContext]=\"{ tab: tab }\"\r\n            ></ng-template>\r\n            <span *ngIf=\"tab.title\">{{ tab.title }}</span>\r\n          </a>\r\n          <span *ngIf=\"checkCloseable(tab)\" 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-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 class=\"devui-nav-{{ type }}-animation\" [style.left]=\"offsetLeft + 'px'\" [style.width]=\"offsetWidth + 'px'\"></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    <ul role=\"menu\" 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 }\"\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    <div class=\"devui-tab-pane fade in\" role=\"tabpanel\" *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-container>\r\n</div>\r\n", styles: [".devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}:host{display:block;--devui-tab-slider-bg: #f2f5fc;--devui-tab-slider-bg: var(--devui-list-item-hover-bg, #f2f5fc);--devui-tab-options-bg: #5e7ce0;--devui-tab-options-bg: var(--devui-brand, #5e7ce0)}.devui-nav-container{display:flex;align-items:stretch;flex-wrap:nowrap;flex-direction:row;background:inherit}.devui-nav-container li{cursor:pointer;color:#71757f;color:var(--devui-aide-text, #71757f);float:left;transition:text-shadow .3s cubic-bezier(.5,.05,.5,.95);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>a{display:inline-block;height:100%;padding:0}.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:#71757f;fill:var(--devui-aide-text, #71757f)}.devui-nav-container li.devui-tab-add-icon:hover svg polygon{fill:#252b3a;fill:var(--devui-text, #252b3a)}.devui-nav-container li:not(.active):not(.disabled)>a{color:#71757f;color:var(--devui-aide-text, #71757f)}.devui-nav-container li.active,.devui-nav-container li:hover:not(.active):not(.disabled){text-shadow:0 0 .4px #526ecc;text-shadow:0 0 .4px var(--devui-brand-active, #526ecc)}.devui-nav-container li.active>a,.devui-nav-container li:hover:not(.active):not(.disabled)>a{color:#526ecc;color:var(--devui-brand-active, #526ecc);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:#526ecc;color:var(--devui-brand-active, #526ecc);outline:none}.devui-nav-container li.disabled>a{color:#cfd0d3;color:var(--devui-disabled-text, #cfd0d3);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:16px;font-size:var(--devui-font-size-icon, 16px);width:12px;height:12px;line-height:12px;margin:0 0 0 12px;background-color:#d7d8da;background-color:var(--devui-line, #d7d8da);border-radius:50%}.devui-nav-container li .devui-tab-close-icon svg path{fill:#fff;fill:var(--devui-light-text, #ffffff)}.devui-nav-container li .devui-tab-close-icon:hover{background-color:#5e7ce0;background-color:var(--devui-brand, #5e7ce0);text-decoration:none}.devui-nav-container.devui-nav-lg{font-size:14px;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:14px;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:12px;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:12px;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:14px;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:12px;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:12px;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 #f2f2f3 solid;border-bottom:1px var(--devui-dividing-line, #f2f2f3) 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:32px}.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 .3s cubic-bezier(.5,.05,.5,.95),background-color .3s cubic-bezier(.5,.05,.5,.95);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:#5e7ce0;background:var(--devui-brand, #5e7ce0)}.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:#252b3a;color:var(--devui-text, #252b3a)}.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:#5e7ce0;color:var(--devui-brand, #5e7ce0)}.devui-nav-container .devui-nav-options{background:#ffffff;background:var(--devui-base-bg, #ffffff);border:1px solid #f2f2f3;border:1px solid var(--devui-dividing-line, #f2f2f3);border-radius:2px;border-radius:var(--devui-border-radius, 2px);padding:2px}.devui-nav-container .devui-nav-options>li{background-color:#fff;background-color:var(--devui-base-bg, #ffffff);border-radius:2px;border-radius:var(--devui-border-radius, 2px);transition:background-color .3s cubic-bezier(.5,.05,.5,.95),text-shadow .3s cubic-bezier(.5,.05,.5,.95);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:#fff;color:var(--devui-light-text, #ffffff);padding:0 16px}.devui-nav-container .devui-nav-options>li.devui-tab-add-icon{border-radius:0 2px 2px 0;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:2px;border-radius:var(--devui-border-radius, 2px);background:var(--devui-tab-slider-bg);width:-webkit-fit-content;width:-moz-fit-content;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 #f2f2f3;border-bottom:1px solid var(--devui-dividing-line, #f2f2f3);background-color:#fff;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:#f7f7f9;background:var(--devui-global-bg, #f7f7f9);border-radius:2px 2px 0 0;border-radius:var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0 0;border:1px solid #f2f2f3;border:1px solid var(--devui-dividing-line, #f2f2f3);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:#71757f;fill:var(--devui-aide-text, #71757f)}.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:#cfd0d3;fill:var(--devui-disabled-text, #cfd0d3)}.devui-nav-container .devui-nav-scroll-ctrl .devui-nav-more-operate{padding-left:0}.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% - 124px);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 2px 0 8px #252b3a1f;box-shadow:inset var(--devui-shadow-length-slide-right, 2px 0 8px 0) var(--devui-connected-overlay-shadow, rgba(37, 43, 58, .12))}.devui-nav-container .dev-nav-scroll-container.devui-nav-shadow:after{right:0;box-shadow:inset -2px 0 8px #252b3a1f;box-shadow:inset var(--devui-shadow-length-slide-left, -2px 0 8px 0) var(--devui-connected-overlay-shadow, rgba(37, 43, 58, .12))}.devui-nav-container .devui-nav-slider-animation{position:absolute;z-index:0;background-color:#fff;background-color:var(--devui-base-bg, #ffffff);border-radius:2px;border-radius:var(--devui-border-radius, 2px);box-shadow:0 1px 4px #252b3a1a;box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1));top:2px;transition:left .3s cubic-bezier(.5,.05,.5,.95),width .3s cubic-bezier(.5,.05,.5,.95);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:2px;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"], 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"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", 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      role=\"tablist\"\r\n      class=\"devui-nav devui-nav-{{ type }} {{ cssClass }}\"\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          role=\"presentation\"\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          (click)=\"select(tab.id)\"\r\n        >\r\n          <a\r\n            role=\"tab\"\r\n            data-toggle=\"tab\"\r\n            [attr.aria-expanded]=\"tab.id == activeTab\"\r\n            [style.width]=\"customWidth\"\r\n            [ngClass]=\"{ 'custom-width': customWidth }\"\r\n          >\r\n            <ng-template\r\n              *ngIf=\"!tab.title\"\r\n              [ngTemplateOutlet]=\"tab.titleTpl?.templateRef\"\r\n              [ngTemplateOutletContext]=\"{ tab: tab }\"\r\n            ></ng-template>\r\n            <span *ngIf=\"tab.title\">{{ tab.title }}</span>\r\n          </a>\r\n          <span *ngIf=\"checkCloseable(tab)\" 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-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 class=\"devui-nav-{{ type }}-animation\" [style.left]=\"offsetLeft + 'px'\" [style.width]=\"offsetWidth + 'px'\"></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    <ul role=\"menu\" 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 }\"\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    <div class=\"devui-tab-pane fade in\" role=\"tabpanel\" *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-container>\r\n</div>\r\n", styles: [".devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}:host{display:block;--devui-tab-slider-bg: #f2f5fc;--devui-tab-slider-bg: var(--devui-list-item-hover-bg, #f2f5fc);--devui-tab-options-bg: #5e7ce0;--devui-tab-options-bg: var(--devui-brand, #5e7ce0)}.devui-nav-container{display:flex;align-items:stretch;flex-wrap:nowrap;flex-direction:row;background:inherit}.devui-nav-container li{cursor:pointer;color:#71757f;color:var(--devui-aide-text, #71757f);float:left;transition:text-shadow .3s cubic-bezier(.5,.05,.5,.95);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>a{display:inline-block;height:100%;padding:0}.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:#71757f;fill:var(--devui-aide-text, #71757f)}.devui-nav-container li.devui-tab-add-icon:hover svg polygon{fill:#252b3a;fill:var(--devui-text, #252b3a)}.devui-nav-container li:not(.active):not(.disabled)>a{color:#71757f;color:var(--devui-aide-text, #71757f)}.devui-nav-container li.active,.devui-nav-container li:hover:not(.active):not(.disabled){text-shadow:0 0 .4px #526ecc;text-shadow:0 0 .4px var(--devui-brand-active, #526ecc)}.devui-nav-container li.active>a,.devui-nav-container li:hover:not(.active):not(.disabled)>a{color:#526ecc;color:var(--devui-brand-active, #526ecc);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:#526ecc;color:var(--devui-brand-active, #526ecc);outline:none}.devui-nav-container li.disabled>a{color:#cfd0d3;color:var(--devui-disabled-text, #cfd0d3);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:16px;font-size:var(--devui-font-size-icon, 16px);width:12px;height:12px;line-height:12px;margin:0 0 0 12px;background-color:#d7d8da;background-color:var(--devui-line, #d7d8da);border-radius:50%}.devui-nav-container li .devui-tab-close-icon svg path{fill:#fff;fill:var(--devui-light-text, #ffffff)}.devui-nav-container li .devui-tab-close-icon:hover{background-color:#5e7ce0;background-color:var(--devui-brand, #5e7ce0);text-decoration:none}.devui-nav-container.devui-nav-lg{font-size:14px;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:14px;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:12px;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:12px;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:14px;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:12px;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:12px;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 #f2f2f3 solid;border-bottom:1px var(--devui-dividing-line, #f2f2f3) 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:32px}.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 .3s cubic-bezier(.5,.05,.5,.95),background-color .3s cubic-bezier(.5,.05,.5,.95);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:#5e7ce0;background:var(--devui-brand, #5e7ce0)}.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:#252b3a;color:var(--devui-text, #252b3a)}.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:#5e7ce0;color:var(--devui-brand, #5e7ce0)}.devui-nav-container .devui-nav-options{background:#ffffff;background:var(--devui-base-bg, #ffffff);border:1px solid #f2f2f3;border:1px solid var(--devui-dividing-line, #f2f2f3);border-radius:2px;border-radius:var(--devui-border-radius, 2px);padding:2px}.devui-nav-container .devui-nav-options>li{background-color:#fff;background-color:var(--devui-base-bg, #ffffff);border-radius:2px;border-radius:var(--devui-border-radius, 2px);transition:background-color .3s cubic-bezier(.5,.05,.5,.95),text-shadow .3s cubic-bezier(.5,.05,.5,.95);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:#fff;color:var(--devui-light-text, #ffffff);padding:0 16px}.devui-nav-container .devui-nav-options>li.devui-tab-add-icon{border-radius:0 2px 2px 0;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:2px;border-radius:var(--devui-border-radius, 2px);background:var(--devui-tab-slider-bg);width:-webkit-fit-content;width:-moz-fit-content;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 #f2f2f3;border-bottom:1px solid var(--devui-dividing-line, #f2f2f3);background-color:#fff;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:#f7f7f9;background:var(--devui-global-bg, #f7f7f9);border-radius:2px 2px 0 0;border-radius:var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0 0;border:1px solid #f2f2f3;border:1px solid var(--devui-dividing-line, #f2f2f3);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:#71757f;fill:var(--devui-aide-text, #71757f)}.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:#cfd0d3;fill:var(--devui-disabled-text, #cfd0d3)}.devui-nav-container .devui-nav-scroll-ctrl .devui-nav-more-operate{padding-left:0}.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% - 124px);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 2px 0 8px #252b3a1f;box-shadow:inset var(--devui-shadow-length-slide-right, 2px 0 8px 0) var(--devui-connected-overlay-shadow, rgba(37, 43, 58, .12))}.devui-nav-container .dev-nav-scroll-container.devui-nav-shadow:after{right:0;box-shadow:inset -2px 0 8px #252b3a1f;box-shadow:inset var(--devui-shadow-length-slide-left, -2px 0 8px 0) var(--devui-connected-overlay-shadow, rgba(37, 43, 58, .12))}.devui-nav-container .devui-nav-slider-animation{position:absolute;z-index:0;background-color:#fff;background-color:var(--devui-base-bg, #ffffff);border-radius:2px;border-radius:var(--devui-border-radius, 2px);box-shadow:0 1px 4px #252b3a1a;box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1));top:2px;transition:left .3s cubic-bezier(.5,.05,.5,.95),width .3s cubic-bezier(.5,.05,.5,.95);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:2px;border-radius:var(--devui-border-radius, 2px);cursor:pointer}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { tabsEle: [{
                type: ViewChild,
                args: ['tabsEle']
            }], tabsViewport: [{
                type: ViewChild,
                args: ['tabsViewport']
            }], type: [{
                type: Input
            }], size: [{
                type: Input
            }], showContent: [{
                type: Input
            }], scrollMode: [{
                type: Input
            }], activeTab: [{
                type: Input
            }], customWidth: [{
                type: Input
            }], reactivable: [{
                type: Input
            }], closeable: [{
                type: Input
            }], closeableIds: [{
                type: Input
            }], addable: [{
                type: Input
            }], addTabTpl: [{
                type: Input
            }], vertical: [{
                type: Input
            }], cssClass: [{
                type: Input
            }], beforeChange: [{
                type: Input
            }], tabs: [{
                type: ContentChildren,
                args: [TabComponent]
            }], activeTabChange: [{
                type: Output
            }], addOrDeleteTabChange: [{
                type: Output
            }] } });

class TabsModule {
}
TabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
TabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: TabsModule, declarations: [TabsComponent, TabComponent, TabTitleDirective, TabContentDirective], imports: [CommonModule, DropDownModule], exports: [TabsComponent, TabComponent, TabTitleDirective, TabContentDirective] });
TabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TabsModule, imports: [CommonModule, DropDownModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TabsModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule, DropDownModule],
                    exports: [TabsComponent, TabComponent, TabTitleDirective, TabContentDirective],
                    declarations: [TabsComponent, TabComponent, TabTitleDirective, TabContentDirective],
                    providers: [],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { TabComponent, TabContentDirective, TabTitleDirective, TabsComponent, TabsModule };
//# sourceMappingURL=ng-devui-tabs.mjs.map
