[{"__symbolic":"module","version":4,"metadata":{"ToolbarConf":{"__symbolic":"interface"},"FarrisScrollTabsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":44,"character":1},"arguments":[{"selector":"farris-tabs","template":"<div class=\"farris-tabs d-flex flex-fill\" style=\"position: relative\" #tabOuterMost [class.flex-row]=\"tabPosition==='left'\" [class.flex-column]=\"tabPosition==='top'\" [class.flex-row-reverse]=\"tabPosition==='right'\" [class.flex-column-reverse]=\"tabPosition==='bottom'\" [style.height]=\"height+'px'\" [style.width]=\"width+'px'\"> <div #tabHeader flex class=\"farris-tabs-header scroll-tabs\"> <button type=\"button\" (disabled)=\"disableLeft\" class=\"btn sc-nav-btn px-1 sc-nav-lr\" [ngClass]=\"{'d-none':hideButtons}\" #leftNav [ngbTooltip]=\"tooltipLeftTmp\" [placement]=\"'right'\" [disableTooltip]=\"disableLTooltip\"> </button> <div class=\"spacer\" #tabParent [ngClass]=\"{'spacer-sides':!hideButtons&& hideDropDown,'spacer-sides-dropdown' :!hideButtons&&!hideDropDown}\" style=\"width:100%;\"> <ul class=\"nav nav-tabs flex-nowrap\" [class.nav-fill]=\"tabFill\" [class.flex-row]=\"tabPosition==='top'||tabPosition==='bottom'\" [class.flex-column]=\"tabPosition==='left'||tabPosition==='right'\" #tabContainer> <li class=\"nav-item\" [class.f-state-active]=\"tab.id === activeId\" [class.f-state-disabled]=\"tab.disabled\" *ngFor=\"let tab of tabs;index as tabIndex\" [ngStyle]=\"{'width':tab.tabWidth+'px'}\"> <a class=\"nav-link text-truncate\" #anchor [class.active]=\"tab.id === activeId\" [class.disabled]=\"tab.disabled\" (click)=\"_cpSelectTabByIndex($event,tabIndex)\"> <span class=\"float-right st-drop-close\" *ngIf=\"tab.removeable\"> <i class=\"material-icons align-middle\">close</i> </span> <span class=\"st-tab-text\" [tabTransclude]=\"tab.headingRef\" *ngIf=\"tab.headingRef\"></span> <span class=\"st-tab-text\" *ngIf=\"!tab.headingRef\"> {{tab.title}} </span> </a> <kendo-popup [popupClass]=\"'tab.title'\" [anchor]=\"anchor\" *ngIf=\"tab.popupFlag\"> <!-- User-defined content --> {{tab.title}} </kendo-popup> </li> <!-- 设置添加标签 --> <!-- <li> <button kendoButton [icon]=\"'plus'\"></button> </li> --> </ul> </div> <div class=\"btn-group sc-nav-btn\" ngbDropdown> <button type=\"button\" (disabled)=\"disableRight\" class=\"btn px-1 sc-nav-rg\" [ngClass]=\"{'d-none':hideButtons}\" #rightNav [ngbTooltip]=\"tooltipRightTmp\" [placement]=\"'left'\" [disableTooltip]=\"disableRTooltip\"></button> <button #dropDownButton class=\"btn dropdown-toggle-split px-1 \" ngbDropdownToggle [ngClass]=\"{'d-none':hideDropDown}\"> </button> <ul class=\"dropdown-menu\" ngbDropdownMenu [ngStyle]=\"{'width':maxDropdownW>0?maxDropdownW+'px':'auto','max-height':maxDropdownH>0?maxDropdownH+'px':'none','overflow':'auto'}\"> <li class=\"dropdown-item text-truncate px-2\" *ngFor=\"let tab of dropdownTabs;index as tabIndex\" [ngClass]=\"{'disabled': tab.disabled, 'active': tab.id === activeId}\" (click)=\"_cpSelectTabByIndex($event,tabIndex)\"> <span class=\"float-right st-drop-close\"> <i class=\"material-icons align-middle\">close</i> </span> <a>{{tab.title}}</a> </li> </ul> </div> </div> <div #toolbarContainer style=\"display: inline-flex;\" *ngIf=\"toolbarConf\" [ngClass]=\"{'toolbar-pos-top': toolbarConf.pos === 'firstRow', 'toolbar-pos-down': toolbarConf.pos === 'secondRow'}\"> <div style=\"display: inline-flex; justify-content: flex-start;\"> <button *ngFor=\"let content of toolbarConf.contents\" [class]=\"content.appearance.class\" [disabled]=\"content.disable\" (click)=\"justTest(content.id)\">{{content.text}}</button> </div> <div class=\"btn-group sc-nav-btn\" ngbDropdown [hidden]=\"toolbarDpHidden\"> <button class=\"btn btn-link morebtn\" ngbDropdownToggle >更多</button> <ul class=\"dropdown-menu\" ngbDropdownMenu *ngIf=\"inMoreButtonContents\"> <li *ngFor=\"let content of inMoreButtonContents\" class=\"dropdown-item text-truncate px-2\"> <button style=\"width:100%;\" class=\"btn btn-link text-left\" [class.disabled]=\"content.disable\" (click)=\"justTest(content.id)\">{{content.text}}</button> </li> </ul> </div> </div> <ng-template #tooltipLeftTmp> <ul class=\"scroll-tab-tooltips\" *ngIf=\"leftTooltipTabs.length\"> <li *ngFor=\"let tab of leftTooltipTabs\" class=\"text-truncate\">{{tab.title}}</li> </ul> </ng-template> <ng-template #tooltipRightTmp> <ul class=\"scroll-tab-tooltips\" *ngIf=\"rightTooltipTabs.length\"> <li *ngFor=\"let tab of rightTooltipTabs\" class=\"text-truncate\">{{tab.title}}</li> </ul> </ng-template> <div class=\"farris-tabs-body tab-body d-flex flex-fill\"> <!-- <div> --> <ng-content> </ng-content> <!-- </div> --> </div> </div>","styles":[".scroll-tabs { position: relative; } /*左右按钮不存在*/ .scroll-tabs>.spacer { margin: 0; } /*存在左右按钮，不存在下拉*/ .scroll-tabs>.spacer.spacer-sides { margin: 0 25px; } /*存在左右按钮,存在下拉*/ .scroll-tabs>.spacer.spacer-sides-dropdown { margin: 0 50px 0 25px; } .scroll-tabs>.spacer .nav-tabs { overflow: hidden; } .scroll-tabs .sc-nav-btn { position: absolute; z-index: 10; } .scroll-tabs>.nav-button:hover { background-color: #eee; } .scroll-tabs .sc-nav-lr { left: 0; width: 25px; } .scroll-tabs .sc-nav-rg, .scroll-tabs .dropdown-toggle-split { width: 25px; } .scroll-tabs .sc-nav-lr::after { display: inline-block; width: 0; height: 0; margin-right: 0.255em; content: ''; border-right: 0.4em solid; border-top: 0.4em solid transparent; border-left: 0; border-bottom: 0.4em solid transparent; } .scroll-tabs .sc-nav-rg::after { display: inline-block; width: 0; height: 0; content: ''; border-left: 0.4em solid; border-top: 0.4em solid transparent; border-right: 0; border-bottom: 0.4em solid transparent; } .scroll-tabs>.dropdown { position: absolute; top: 0; right: 0; } .scroll-tab-tooltips { padding: 0; margin: 0; width: 120px; text-align: left; } .scroll-tab-tooltips li { list-style: none; padding: 0; margin: 0; } .st-drop-close { width: 16px; height: 16px; text-align: center; cursor: pointer; position: relative; opacity: 0; } .active .st-drop-close:hover { opacity: 1; } .active .st-drop-close { opacity: 0.6; } .st-drop-close .material-icons { font-size: 16px; margin-top: -5px; } .disabled.nav-link { pointer-events: none; } .tab-body .panel { display: none; } .tab-body .active { display: block; } .toolbar-pos-top{ position: absolute; top: 6px;  right: 0; justify-content: flex-end; } .toolbar-pos-down{ position: relative; justify-content: flex-start; }"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":48,"character":21},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":49,"character":19},"member":"None"}}]}],"members":{"tabFill":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":5},"arguments":["tab-fill"]}]}],"tabPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":5},"arguments":["tab-position"]}]}],"showDropDown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":5}}]}],"showTooltips":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":5}}]}],"scrollStep":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":5}}]}],"autoResize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":5}}]}],"closeable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":5}}]}],"selectId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":5},"arguments":["value"]}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":5}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":5}}]}],"headerHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":94,"character":5},"arguments":["header-height"]}]}],"tabsFill":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":5},"arguments":["fill"]}]}],"contentDirection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":130,"character":5},"arguments":["content-direction"]}]}],"contentFill":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":133,"character":5},"arguments":["content-fill"]}]}],"tabs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":135,"character":5}}]}],"customClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":143,"character":5}}]}],"leftNav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":162,"character":5},"arguments":["leftNav"]}]}],"rightNav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":163,"character":5},"arguments":["rightNav"]}]}],"tabContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":164,"character":5},"arguments":["tabContainer"]}]}],"toolbarContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":165,"character":5},"arguments":["toolbarContainer"]}]}],"dropDownButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":166,"character":5},"arguments":["dropDownButton"]}]}],"tabHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":167,"character":5},"arguments":["tabHeader"]}]}],"tabParent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":168,"character":5},"arguments":["tabParent"]}]}],"tabOuterMost":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":169,"character":5},"arguments":["tabOuterMost"]}]}],"toolbar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":171,"character":5},"arguments":["toolbar"]}]}],"tabChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":208,"character":5}}]}],"tabRemove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":209,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../scroll-tabs.config","name":"ScrollTabService","line":212,"character":27},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":213,"character":28},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":214,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":215,"character":23}]}],"verifyConfig":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"selectTab":[{"__symbolic":"method"}],"_cpSelectTabByIndex":[{"__symbolic":"method"}],"selectTabByIndex":[{"__symbolic":"method"}],"_selectTab":[{"__symbolic":"method"}],"_setActive":[{"__symbolic":"method"}],"addTabs":[{"__symbolic":"method"}],"_unique":[{"__symbolic":"method"}],"removeTabByIndex":[{"__symbolic":"method"}],"closeTab":[{"__symbolic":"method"}],"load":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterContentChecked":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"mouseOverTab":[{"__symbolic":"method"}],"mouseLeaveTab":[{"__symbolic":"method"}],"_createStream":[{"__symbolic":"method"}],"_scrollTab":[{"__symbolic":"method"}],"scrollTabIntoView":[{"__symbolic":"method"}],"justTest":[{"__symbolic":"method"}],"changeRow":[{"__symbolic":"method"}],"_calculateElementWidthSum":[{"__symbolic":"method"}],"_calculateWidth":[{"__symbolic":"method"}],"_calculateTabUlWidth":[{"__symbolic":"method"}],"getToolbarConf":[{"__symbolic":"method"}],"_calculateToolbarDropdownIsShow":[{"__symbolic":"method"}],"_calculateButtonsShow":[{"__symbolic":"method"}],"_reCalculateAll":[{"__symbolic":"method"}],"_reCalulateTooltips":[{"__symbolic":"method"}],"_reCalculateSides":[{"__symbolic":"method"}],"_getTabById":[{"__symbolic":"method"}],"resolveSize":[{"__symbolic":"method"}]}}}}]