ngc-scrolling-tabs/bundles/ngc-scrolling-tabs.umd.min.js

This component is a scrollable responsive tab component build on Angular 8 and Bootstrap 4. The left and right nav buttons will scroll one tab at a time. The component will track what tab is open and re-navigate to the open tab when the screen is refreshe

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/router"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngc-scrolling-tabs",["exports","@angular/core","@angular/router","@angular/common"],e):e((t=t||self)["ngc-scrolling-tabs"]={},t.ng.core,t.ng.router,t.ng.common)}(this,(function(t,e,r,i){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */function n(t){var e="function"==typeof Symbol&&t[Symbol.iterator],r=0;return e?e.call(t):{next:function(){return t&&r>=t.length&&(t=void 0),{value:t&&t[r++],done:!t}}}}var a=function(){function t(t,r,i){this.changeDetector=t,this.route=r,this.router=i,this.firstTabActive=!0,this.scrollToActive=!0,this.trackOpenTab=!0,this.selectedTabChanged=new e.EventEmitter,this.tabs=[],this.leftOffset=0,this.firstVisibleTabIndex=-1,this.showLeftArrow=!1,this.showRightArrow=!1}return t.prototype.ngAfterViewInit=function(){var t=this;setTimeout((function(){t.route.snapshot.queryParams.tabId&&t.trackOpenTab?t.markTabAsActive(t.route.snapshot.queryParams.tabId):t.firstTabActive&&t.markFirstTabActive(),t.scrollToActive&&t.hasHiddenTabs()&&t.scrollToActiveTab(),t.redrawTabs(),t.changeDetector.detectChanges()}),0)},t.prototype.addTab=function(t){this.tabs.push(t)},t.prototype.removeTab=function(t){var e=this.tabs.indexOf(t);-1!==e&&this.tabs.splice(e,1)},t.prototype.windowResize=function(){this.redrawTabs()},t.prototype.redrawTabs=function(){this.widthOfList()+this.leftOffset>this.navWrapper.nativeElement.offsetWidth?this.showRightArrow=!0:this.showRightArrow=!1,this.leftOffset<0?this.showLeftArrow=!0:this.showLeftArrow=!1},t.prototype.widthOfList=function(){var t,e,r=0;try{for(var i=n(this.tabList.nativeElement.children),a=i.next();!a.done;a=i.next()){r+=a.value.offsetWidth}}catch(e){t={error:e}}finally{try{a&&!a.done&&(e=i.return)&&e.call(i)}finally{if(t)throw t.error}}return r},t.prototype.onScrollerLeftClick=function(){this.firstVisibleTabIndex--,this.leftOffset+=this.tabList.nativeElement.children[this.firstVisibleTabIndex].offsetWidth,this.redrawTabs()},t.prototype.onScrollerRightClick=function(){this.leftOffset-=this.tabList.nativeElement.children[this.firstVisibleTabIndex].offsetWidth,this.firstVisibleTabIndex++,this.redrawTabs()},t.prototype.onSelectedTabChanged=function(t){this.markTabAsActive(t.id),this.trackOpenTab&&this.pushCurrentTabToParam(t),this.selectedTabChanged.emit(t)},t.prototype.markFirstTabActive=function(){!this.tabs.find((function(t){return t.active}))&&this.tabs.length>0&&(this.tabs[0].active=!0)},t.prototype.scrollToActiveTab=function(){var t=this.tabs.findIndex((function(t){return t.active}));this.firstVisibleTabIndex=t;for(var e=0;e<t;e++)this.tabList.nativeElement.children[e]&&(this.leftOffset-=this.tabList.nativeElement.children[e].offsetWidth)},t.prototype.hasHiddenTabs=function(){return this.widthOfList()>this.navWrapper.nativeElement.offsetWidth},t.prototype.markTabAsActive=function(t){var e,r;try{for(var i=n(this.tabs),a=i.next();!a.done;a=i.next()){var s=a.value;s.active=!1,s.id===t&&(s.active=!0)}}catch(t){e={error:t}}finally{try{a&&!a.done&&(r=i.return)&&r.call(i)}finally{if(e)throw e.error}}},t.prototype.pushCurrentTabToParam=function(t){this.router.navigate([],{relativeTo:this.route,queryParams:{tabId:t.id},queryParamsHandling:"merge"})},t.decorators=[{type:e.Component,args:[{selector:"ngc-scrolling-tabs",template:'<div class="wrap-selector">\n    <div class="nav-tabs-boxed">\n        <div class="scroller scroller-left" (click)="onScrollerLeftClick()" *ngIf="showLeftArrow">\n            <svg class="arrow-img" xmlns="http://www.w3.org/2000/svg" version="1.0" width="157.000000pt" height="263.000000pt"\n                viewBox="0 0 157.000000 263.000000" preserveAspectRatio="xMidYMid meet">\n                <g transform="translate(0.000000,263.000000) scale(0.100000,-0.100000)" fill="currentColor" stroke="none">\n                    <path d="M653 1967 l-603 -602 0 -45 0 -45 603 -602 c710 -711 628 -655 764 -520 79 79 83 85 83 127 l0 45 -497 497 -498 498 498 498 497 497 0 45 c0 42 -4 48 -83 127 -136 135 -54 191 -764 -520z" />\n                </g>\n            </svg>\n        </div>\n        <div class="scroller scroller-right" (click)="onScrollerRightClick()" *ngIf="showRightArrow">\n            <svg class="arrow-img" xmlns="http://www.w3.org/2000/svg" version="1.0" width="157.000000pt" height="263.000000pt"\n                viewBox="0 0 157.000000 263.000000" preserveAspectRatio="xMidYMid meet">\n                <g transform="translate(0.000000,263.000000) scale(0.100000,-0.100000)" fill="currentColor" stroke="none">\n                    <path d="M153 2477 c-79 -79 -83 -85 -83 -127 l0 -45 497 -497 498 -498 -498 -498 -497 -497 0 -45 c0 -42 4 -48 83 -127 136 -135 54 -191 764 520 l603 602 0 45 0 45 -603 602 c-710 711 -628 655 -764 520z" />\n                </g>\n            </svg>\n        </div>\n        <div class="nav-wrapper" #navWrapper>\n            <ul class="nav nav-tabs list" role="tablist" #tabList [style.left.px]="leftOffset">\n                <li *ngFor="let tab of tabs" class="nav-item">\n                    <a [ngClass]="tab.getTabClasses()" data-toggle="tab" href="javascript:void(0)" role="tab"\n                        attr.aria-controls="{{tab.title}}" (click)="onSelectedTabChanged(tab)">{{tab.title}}</a>\n                </li>\n            </ul>\n        </div>\n        <div class="tab-content">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>',changeDetection:e.ChangeDetectionStrategy.OnPush,styles:[".nav-wrapper{position:relative;margin:0 auto;overflow:hidden;padding:5px;height:38px}.nav-tabs{height:38px;margin-left:1px}.tab-content{margin-left:1px}.list{position:absolute;left:0;top:0;min-width:3000px;margin-top:0}.list li{display:table-cell;position:relative;text-align:center;cursor:grab;cursor:-webkit-grab;color:#efefef;vertical-align:middle}.scroller{text-align:center;cursor:pointer;padding:7px;white-space:no-wrap;vertical-align:middle}.scroller-right{float:right}.scroller-left{float:left}.arrow-img{height:20px;width:15px}.arrow-img:hover{opacity:.5}"]}]}],t.ctorParameters=function(){return[{type:e.ChangeDetectorRef},{type:r.ActivatedRoute},{type:r.Router}]},t.propDecorators={navWrapper:[{type:e.ViewChild,args:["navWrapper",{static:!1}]}],tabList:[{type:e.ViewChild,args:["tabList",{static:!1}]}],firstTabActive:[{type:e.Input}],scrollToActive:[{type:e.Input}],trackOpenTab:[{type:e.Input}],selectedTabChanged:[{type:e.Output}],windowResize:[{type:e.HostListener,args:["window:resize"]}]},t}();var s=function(){function t(t,e,r){this.tabs=t,this.elementRef=e,this.renderer=r,this.active=!1}return t.prototype.ngOnInit=function(){this.tabs.addTab(this),this.renderer.addClass(this.elementRef.nativeElement,"tab-pane"),this.renderer.setAttribute(this.elementRef.nativeElement,"role","tabpanel")},t.prototype.ngOnDestroy=function(){this.tabs.removeTab(this)},t.prototype.getTabClasses=function(){return{"nav-link":!0,active:this.active}},t.decorators=[{type:e.Directive,args:[{selector:"[ngcScrollingTab], ngcScrollingTab"}]}],t.ctorParameters=function(){return[{type:a},{type:e.ElementRef},{type:e.Renderer2}]},t.propDecorators={id:[{type:e.Input}],title:[{type:e.Input}],active:[{type:e.HostBinding,args:["class.active"]},{type:e.Input}]},t}();var o=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[i.CommonModule],declarations:[a,s],exports:[a,s]}]}],t}();t.ScrollingTabsComponent=a,t.ScrollingTabsModule=o,t.ɵa=s,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ngc-scrolling-tabs.umd.min.js.map