UNPKG

ngx-formly-tabs

Version:

ngx-formly-tabs is an Angular module that adds Components that enable flexible tab use for @ngx-formly.

2 lines 7.08 kB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("rxjs"),require("@angular/common"),require("@angular/forms"),require("@ngx-formly/core"),require("@angular/core")):"function"==typeof define&&define.amd?define("ngx-formly-tabs",["exports","rxjs","@angular/common","@angular/forms","@ngx-formly/core","@angular/core"],e):e(t["ngx-formly-tabs"]={},t.rxjs,t.ng.common,t.ng.forms,t.core,t.ng.core)}(this,function(t,e,n,o,r,i){"use strict";var a=(Object.defineProperty(s.prototype,"tabs",{get:function(){return this._tabs.value.slice()},enumerable:!0,configurable:!0}),Object.defineProperty(s.prototype,"tabs$",{get:function(){return this._tabs.asObservable()},enumerable:!0,configurable:!0}),s.prototype.add=function(e){this._tabs.next(this._tabs.value.filter(function(t){return t!==e}).concat(e))},s.prototype.remove=function(e){this._tabs.next(this._tabs.value.filter(function(t){return t!==e}))},s.prototype.update=function(){this._tabs.next(this.tabs)},s.decorators=[{type:i.Injectable}],s);function s(){this._tabs=new e.BehaviorSubject([])}var l=(Object.defineProperty(c.prototype,"tabs",{get:function(){return this._tabs},enumerable:!0,configurable:!0}),Object.defineProperty(c.prototype,"visibleCount",{get:function(){return this._visibleCount},enumerable:!0,configurable:!0}),c.prototype.ngAfterContentInit=function(){var t=this;this.subscription=this.tabsetService.tabs$.subscribe(function(){t.onTabsChanged()})},c.prototype.ngOnDestroy=function(){this.subscription&&this.subscription.unsubscribe()},c.prototype.select=function(e){this.tabsetService.tabs.forEach(function(t){t.active=t===e}),this.activeTabChange.emit(e?e.title:null)},c.prototype.onTabsChanged=function(){var e=this;Promise.resolve().then(function(){if(!e.subscription.closed){var t=e.tabsetService.tabs;e._tabs=t,e._visibleCount=t.filter(function(t){return!t.hidden}).length,t.some(function(t){return t.active&&!t.disabled&&!t.hidden})||e.select(t.find(function(t){return!t.disabled&&!t.hidden}))}})},c.decorators=[{type:i.Component,args:[{selector:"formly-tabs-tabset",template:'<ul class="nav nav-tabs">\r\n <li class="nav-item" *ngFor="let tab of tabs | visible" role="presentation" (click)="!tab.disabled && !tab.hidden && select(tab)">\r\n <div class="nav-link" [ngClass]="{active: tab.active && !tab.disabled && !tab.hidden, disabled: tab.disabled}">\r\n {{ tab.title }}\r\n </div>\r\n </li>\r\n</ul>\r\n<div class="content" [ngClass]="{empty: visibleCount === 0}">\r\n <ng-content></ng-content>\r\n</div>',styles:[".nav-link{cursor:pointer;cursor:hand}:host>.content{border:1px solid #ddd;border-top:0;padding:1em}"]}]}],c.ctorParameters=function(){return[{type:a}]},c.propDecorators={activeTabChange:[{type:i.Output}]},c);function c(t){this.tabsetService=t,this.activeTabChange=new i.EventEmitter,this._tabs=[],this._visibleCount=0}var b=(u.prototype.ngOnChanges=function(t){t.title||this.tabsetService.update()},u.prototype.ngOnInit=function(){this.tabsetService&&this.tabsetService.add(this)},u.prototype.ngOnDestroy=function(){this.tabsetService&&this.tabsetService.remove(this)},u.decorators=[{type:i.Component,args:[{selector:"formly-tabs-tab",template:'<ng-content *ngIf="!tabsetService || (active && !disabled && !hidden)"></ng-content>',styles:[""]}]}],u.ctorParameters=function(){return[{type:a,decorators:[{type:i.Optional}]}]},u.propDecorators={active:[{type:i.Input}],disabled:[{type:i.Input}],hidden:[{type:i.Input}],title:[{type:i.Input}]},u);function u(t){this.tabsetService=t}var p=function(t,e){return(p=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};function d(t,e){function n(){this.constructor=t}p(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var f,y=(d(m,f=r.FieldType),Object.defineProperty(m.prototype,"title",{get:function(){return this.to.tabTitle},enumerable:!0,configurable:!0}),Object.defineProperty(m.prototype,"disabled",{get:function(){return this.to.tabDisabled},set:function(t){this.to.tabDisabled=!!t},enumerable:!0,configurable:!0}),Object.defineProperty(m.prototype,"hidden",{get:function(){return this.to.tabHidden},set:function(t){this.to.tabHidden=!!t},enumerable:!0,configurable:!0}),m.decorators=[{type:i.Component,args:[{selector:"formly-field-tab",template:'\n <formly-tabs-tab [title]="title" [disabled]="disabled" [hidden]="hidden">\n <formly-field *ngFor="let f of field.fieldGroup" [field]="f"></formly-field>\n </formly-tabs-tab>\n ',host:{"[class]":'field.fieldGroupClassName || ""'}}]}],m.ctorParameters=function(){return[]},m);function m(){return f.call(this)||this}var h,g=(d(v,h=r.FieldType),Object.defineProperty(v.prototype,"activeTab",{get:function(){return this.to.activeTab},enumerable:!0,configurable:!0}),v.prototype.onActiveTagChange=function(t){this.to.activeTab=null==t?null:t,this.to.activeTabChange&&this.to.activeTabChange(this.to.activeTab)},v.decorators=[{type:i.Component,args:[{selector:"formly-field-tabset",template:'\n <formly-tabs-tabset (activeTabChange)="onActiveTagChange($event)">\n <formly-field *ngFor="let f of field.fieldGroup" [field]="f"></formly-field>\n </formly-tabs-tabset>\n ',host:{"[class]":'field.fieldGroupClassName || ""'},providers:[a]}]}],v);function v(){return null!==h&&h.apply(this,arguments)||this}var C,T=(d(_,C=r.FieldWrapper),Object.defineProperty(_.prototype,"title",{get:function(){return this.to.tabTitle},enumerable:!0,configurable:!0}),Object.defineProperty(_.prototype,"disabled",{get:function(){return this.to.tabDisabled},set:function(t){this.to.tabDisabled=!!t},enumerable:!0,configurable:!0}),Object.defineProperty(_.prototype,"hidden",{get:function(){return this.to.tabHidden},set:function(t){this.to.tabHidden=!!t},enumerable:!0,configurable:!0}),_.decorators=[{type:i.Component,args:[{selector:"formly-wrapper-tab",template:'\n <formly-tabs-tab [title]="title" [disabled]="disabled" [hidden]="hidden">\n <ng-template #fieldComponent>\n </ng-template>\n </formly-tabs-tab>\n '}]}],_.propDecorators={fieldComponent:[{type:i.ViewChild,args:["fieldComponent",{read:i.ViewContainerRef}]}]},_);function _(){return null!==C&&C.apply(this,arguments)||this}var O=(j.prototype.transform=function(t){return Array.isArray(t)?t.filter(function(t){return!t.hidden}):[]},j.decorators=[{type:i.Pipe,args:[{name:"visible"}]}],j);function j(){}var P=[y,g,T],x={types:[{name:"tab",component:y},{name:"tabset",component:g}],wrappers:[{name:"tab",component:T}]},F=(S.decorators=[{type:i.NgModule,args:[{imports:[n.CommonModule,o.ReactiveFormsModule,r.FormlyModule.forRoot(x)],declarations:[l,b,P,O],exports:[l,b]}]}],S);function S(){}t.TabsetService=a,t.TabsetComponent=l,t.TabComponent=b,t.FormlyFieldTabComponent=y,t.FormlyFieldTabsetComponent=g,t.FormlyWrapperTabComponent=T,t.FormlyTabsModule=F,t.ɵa=P,t.ɵb=x,t.ɵc=O,Object.defineProperty(t,"__esModule",{value:!0})}); //# sourceMappingURL=ngx-formly-tabs.umd.min.js.map