@boxmeglobal/omisell-ui-lib - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

boxmeglobal-omisell-ui-lib.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":4,"metadata":{"OmisellTabsetModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"TabComponent"},{"__symbolic":"reference","name":"TabsetComponent"},{"__symbolic":"reference","name":"TabContentDirective"}],"exports":[{"__symbolic":"reference","name":"TabComponent"},{"__symbolic":"reference","name":"TabsetComponent"},{"__symbolic":"reference","name":"TabContentDirective"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":21,"character":4}]}]}],"members":{}},"TabComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"omisell-tab","template":"<div class=\"tab-control\" [class.active]=\"tabActivateService.activeId == tabID\" (click)=\"active()\">\n    <div class=\"tab-title\">{{ title }}</div>\n</div>\n","styles":[""]}]}],"members":{"tabcontent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":19,"character":3},"arguments":[{"__symbolic":"reference","name":"TabContentDirective"},{"static":false}]}]}],"tabID":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵa"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"active":[{"__symbolic":"method"}]}},"TabContentDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":3,"character":1},"arguments":[{"selector":"[omisell-tabcontent]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"TabsetComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"omisell-tabset","providers":[{"__symbolic":"reference","name":"ɵa"}],"template":"<div class=\"control-wrapper d-flex w-100\">\n    <ng-content></ng-content>\n</div>\n\n<div class=\"tab-content\" *ngIf=\"tabActivateService.activeTemplate\">\n    <ng-container *ngTemplateOutlet=\"tabActivateService.activeTemplate\"></ng-container>\n</div>\n","styles":[""]}]}],"members":{"tabIdDefault":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3},"arguments":["tabIdDefault"]}]}],"changeTab":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":3},"arguments":["changeTab"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵa"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"OmisellSwitchModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"OmisellSwitchComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":4}],"exports":[{"__symbolic":"reference","name":"OmisellSwitchComponent"}]}]}],"members":{}},"OmisellSwitchComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"omisell-switch","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":6,"character":17},"member":"None"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":9,"character":15},"useExisting":{"__symbolic":"reference","name":"OmisellSwitchComponent"},"multi":true}],"template":"<div class=\"ui-switch\" [class.ui-switch--checked]=\"isActive\">\n    <span class=\"ui-switch__inner\"></span>\n</div>\n"}]}],"members":{"onChangeEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":3},"arguments":["onChange"]}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":24,"character":3},"arguments":["click"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":10,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"setTabActive":[{"__symbolic":"method"}],"addTab":[{"__symbolic":"method"}]}}},"origins":{"OmisellTabsetModule":"./omisell-tabset/omisell-tabset.module","TabComponent":"./omisell-tabset/tab/tab.component","TabContentDirective":"./omisell-tabset/tab/tab.component","TabsetComponent":"./omisell-tabset/tabset/tabset.component","OmisellSwitchModule":"./omisell-switch/omisell-switch.module","OmisellSwitchComponent":"./omisell-switch/omisell-switch.component","ɵa":"./omisell-tabset/tab-activate.service"},"importAs":"@boxmeglobal/omisell-ui-lib"}
+{"__symbolic":"module","version":4,"metadata":{"OmisellTabsetModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"TabComponent"},{"__symbolic":"reference","name":"TabsetComponent"},{"__symbolic":"reference","name":"TabContentDirective"}],"exports":[{"__symbolic":"reference","name":"TabComponent"},{"__symbolic":"reference","name":"TabsetComponent"},{"__symbolic":"reference","name":"TabContentDirective"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":21,"character":4}]}]}],"members":{}},"TabComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"omisell-tab","template":"<div class=\"tab-control\" [class.active]=\"tabActivateService.activeId == tabID\" (click)=\"active()\">\n    <div class=\"tab-title\">{{ title }}</div>\n</div>\n","styles":[""]}]}],"members":{"tabcontent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":19,"character":3},"arguments":[{"__symbolic":"reference","name":"TabContentDirective"},{"static":false}]}]}],"tabID":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵa"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"active":[{"__symbolic":"method"}]}},"TabContentDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":3,"character":1},"arguments":[{"selector":"[omisell-tabcontent]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"TabsetComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"omisell-tabset","providers":[{"__symbolic":"reference","name":"ɵa"}],"template":"<div class=\"control-wrapper d-flex w-100\">\n    <ng-content></ng-content>\n</div>\n\n<div class=\"tab-content\" *ngIf=\"tabActivateService.activeTemplate\">\n    <ng-container *ngTemplateOutlet=\"tabActivateService.activeTemplate\"></ng-container>\n</div>\n","styles":[""]}]}],"members":{"tabs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":23,"character":3},"arguments":[{"__symbolic":"reference","name":"TabComponent"},{"descendants":false}]}]}],"tabIdDefault":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3},"arguments":["tabIdDefault"]}]}],"changeTab":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":32,"character":3},"arguments":["changeTab"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵa"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"OmisellSwitchModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"OmisellSwitchComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":4}],"exports":[{"__symbolic":"reference","name":"OmisellSwitchComponent"}]}]}],"members":{}},"OmisellSwitchComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"omisell-switch","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":6,"character":17},"member":"None"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":9,"character":15},"useExisting":{"__symbolic":"reference","name":"OmisellSwitchComponent"},"multi":true}],"template":"<div class=\"ui-switch\" [class.ui-switch--checked]=\"isActive\">\n    <span class=\"ui-switch__inner\"></span>\n</div>\n"}]}],"members":{"onChangeEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":3},"arguments":["onChange"]}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":24,"character":3},"arguments":["click"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":10,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"setTabActive":[{"__symbolic":"method"}],"addTab":[{"__symbolic":"method"}]}}},"origins":{"OmisellTabsetModule":"./omisell-tabset/omisell-tabset.module","TabComponent":"./omisell-tabset/tab/tab.component","TabContentDirective":"./omisell-tabset/tab/tab.component","TabsetComponent":"./omisell-tabset/tabset/tabset.component","OmisellSwitchModule":"./omisell-switch/omisell-switch.module","OmisellSwitchComponent":"./omisell-switch/omisell-switch.component","ɵa":"./omisell-tabset/tab-activate.service"},"importAs":"@boxmeglobal/omisell-ui-lib"}

bundles/boxmeglobal-omisell-ui-lib-omisell-tabset.umd.js

@@ -428,3 +428,5 @@ (function (global, factory) {
             function (tabId) { return _this.changeTab.emit(tabId); }));
-            this.tabActivateService.setTabActive(this.tabIdDefault);
+            if (this.tabIdDefault) {
+                this.tabActivateService.setTabActive(this.tabIdDefault);
+            }
         };
@@ -434,2 +436,15 @@ /**
          */
+        TabsetComponent.prototype.ngAfterContentInit = /**
+         * @return {?}
+         */
+        function () {
+            if (!this.tabIdDefault && this.tabs.length > 0) {
+                /** @type {?} */
+                var firstTab = this.tabs.first;
+                this.tabActivateService.setTabActive(firstTab.tabID);
+            }
+        };
+        /**
+         * @return {?}
+         */
         TabsetComponent.prototype.ngOnDestroy = /**
@@ -458,2 +473,3 @@ * @return {?}
         TabsetComponent.propDecorators = {
+            tabs: [{ type: core.ContentChildren, args: [TabComponent, { descendants: false },] }],
             tabIdDefault: [{ type: core.Input, args: ['tabIdDefault',] }],
@@ -468,2 +484,7 @@ changeTab: [{ type: core.Output, args: ['changeTab',] }]
         /** @type {?} */
+        TabsetComponent.prototype.tabs;
+        /**
+         * TabId default. If not specify, it will use first tab
+         * @type {?}
+         */
         TabsetComponent.prototype.tabIdDefault;
@@ -470,0 +491,0 @@ /** @type {?} */

bundles/boxmeglobal-omisell-ui-lib-omisell-tabset.umd.min.js

@@ -15,3 +15,3 @@ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("rxjs"),require("rxjs/operators")):"function"==typeof define&&define.amd?define("@boxmeglobal/omisell-ui-lib/omisell-tabset",["exports","@angular/core","@angular/common","rxjs","rxjs/operators"],e):e(((t=t||self).boxmeglobal=t.boxmeglobal||{},t.boxmeglobal["omisell-ui-lib"]=t.boxmeglobal["omisell-ui-lib"]||{},t.boxmeglobal["omisell-ui-lib"]["omisell-tabset"]={}),t.ng.core,t.ng.common,t.rxjs,t.rxjs.operators)}(this,(function(t,e,n,i,a){"use strict";
     PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */var o=function(){return(o=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var a in e=arguments[n])Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a]);return t}).apply(this,arguments)};var r=function(){function t(){this.listTab=[],this.activeTabChange=new i.Subject}return Object.defineProperty(t.prototype,"activeId",{get:function(){return this._activeId},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"activeTemplate",{get:function(){var t=this,e=this.listTab.find((function(e){return e.id==t._activeId}));return e&&e.template||null},enumerable:!0,configurable:!0}),t.prototype.setTabActive=function(t){this._activeId&&this.activeTabChange.next(t),this._activeId=t},t.prototype.addTab=function(t){this.listTab.find((function(e){return e.id==t.id}))||this.listTab.push(o({},t))},t.decorators=[{type:e.Injectable}],t.ctorParameters=function(){return[]},t}();var c=function(){function t(t){this._templateRef=t}return t.decorators=[{type:e.Directive,args:[{selector:"[omisell-tabcontent]"}]}],t.ctorParameters=function(){return[{type:e.TemplateRef}]},t}();var s=function(){function t(t){this.tabActivateService=t}return t.prototype.ngOnInit=function(){},t.prototype.ngAfterContentInit=function(){this.tabActivateService.addTab({id:this.tabID,template:this.tabcontent&&this.tabcontent._templateRef||null})},t.prototype.active=function(){this.tabActivateService.setTabActive(this.tabID)},t.decorators=[{type:e.Component,args:[{selector:"omisell-tab",template:'<div class="tab-control" [class.active]="tabActivateService.activeId == tabID" (click)="active()">\n    <div class="tab-title">{{ title }}</div>\n</div>\n',styles:[""]}]}],t.ctorParameters=function(){return[{type:r}]},t.propDecorators={tabcontent:[{type:e.ContentChild,args:[c,{static:!1}]}],tabID:[{type:e.Input}],title:[{type:e.Input}]},t}();var l=function(){function t(t){this.tabActivateService=t,this.destroy$=new i.Subject,this.changeTab=new e.EventEmitter(!1)}return t.prototype.ngOnInit=function(){var t=this;this.tabActivateService.activeTabChange.pipe(a.takeUntil(this.destroy$)).subscribe((function(e){return t.changeTab.emit(e)})),this.tabActivateService.setTabActive(this.tabIdDefault)},t.prototype.ngOnDestroy=function(){this.destroy$.next(),this.destroy$.complete(),this.destroy$.unsubscribe()},t.decorators=[{type:e.Component,args:[{selector:"omisell-tabset",template:'<div class="control-wrapper d-flex w-100">\n    <ng-content></ng-content>\n</div>\n\n<div class="tab-content" *ngIf="tabActivateService.activeTemplate">\n    <ng-container *ngTemplateOutlet="tabActivateService.activeTemplate"></ng-container>\n</div>\n',providers:[r],styles:[""]}]}],t.ctorParameters=function(){return[{type:r}]},t.propDecorators={tabIdDefault:[{type:e.Input,args:["tabIdDefault"]}],changeTab:[{type:e.Output,args:["changeTab"]}]},t}();var u=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{declarations:[s,l,c],exports:[s,l,c],imports:[n.CommonModule]}]}],t}();t.OmisellTabsetModule=u,t.TabComponent=s,t.TabContentDirective=c,t.TabsetComponent=l,t.ɵa=r,Object.defineProperty(t,"__esModule",{value:!0})}));
+    ***************************************************************************** */var r=function(){return(r=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var a in e=arguments[n])Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a]);return t}).apply(this,arguments)};var o=function(){function t(){this.listTab=[],this.activeTabChange=new i.Subject}return Object.defineProperty(t.prototype,"activeId",{get:function(){return this._activeId},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"activeTemplate",{get:function(){var t=this,e=this.listTab.find((function(e){return e.id==t._activeId}));return e&&e.template||null},enumerable:!0,configurable:!0}),t.prototype.setTabActive=function(t){this._activeId&&this.activeTabChange.next(t),this._activeId=t},t.prototype.addTab=function(t){this.listTab.find((function(e){return e.id==t.id}))||this.listTab.push(r({},t))},t.decorators=[{type:e.Injectable}],t.ctorParameters=function(){return[]},t}();var s=function(){function t(t){this._templateRef=t}return t.decorators=[{type:e.Directive,args:[{selector:"[omisell-tabcontent]"}]}],t.ctorParameters=function(){return[{type:e.TemplateRef}]},t}();var c=function(){function t(t){this.tabActivateService=t}return t.prototype.ngOnInit=function(){},t.prototype.ngAfterContentInit=function(){this.tabActivateService.addTab({id:this.tabID,template:this.tabcontent&&this.tabcontent._templateRef||null})},t.prototype.active=function(){this.tabActivateService.setTabActive(this.tabID)},t.decorators=[{type:e.Component,args:[{selector:"omisell-tab",template:'<div class="tab-control" [class.active]="tabActivateService.activeId == tabID" (click)="active()">\n    <div class="tab-title">{{ title }}</div>\n</div>\n',styles:[""]}]}],t.ctorParameters=function(){return[{type:o}]},t.propDecorators={tabcontent:[{type:e.ContentChild,args:[s,{static:!1}]}],tabID:[{type:e.Input}],title:[{type:e.Input}]},t}();var l=function(){function t(t){this.tabActivateService=t,this.destroy$=new i.Subject,this.changeTab=new e.EventEmitter(!1)}return t.prototype.ngOnInit=function(){var t=this;this.tabActivateService.activeTabChange.pipe(a.takeUntil(this.destroy$)).subscribe((function(e){return t.changeTab.emit(e)})),this.tabIdDefault&&this.tabActivateService.setTabActive(this.tabIdDefault)},t.prototype.ngAfterContentInit=function(){if(!this.tabIdDefault&&this.tabs.length>0){var t=this.tabs.first;this.tabActivateService.setTabActive(t.tabID)}},t.prototype.ngOnDestroy=function(){this.destroy$.next(),this.destroy$.complete(),this.destroy$.unsubscribe()},t.decorators=[{type:e.Component,args:[{selector:"omisell-tabset",template:'<div class="control-wrapper d-flex w-100">\n    <ng-content></ng-content>\n</div>\n\n<div class="tab-content" *ngIf="tabActivateService.activeTemplate">\n    <ng-container *ngTemplateOutlet="tabActivateService.activeTemplate"></ng-container>\n</div>\n',providers:[o],styles:[""]}]}],t.ctorParameters=function(){return[{type:o}]},t.propDecorators={tabs:[{type:e.ContentChildren,args:[c,{descendants:!1}]}],tabIdDefault:[{type:e.Input,args:["tabIdDefault"]}],changeTab:[{type:e.Output,args:["changeTab"]}]},t}();var u=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{declarations:[c,l,s],exports:[c,l,s],imports:[n.CommonModule]}]}],t}();t.OmisellTabsetModule=u,t.TabComponent=c,t.TabContentDirective=s,t.TabsetComponent=l,t.ɵa=o,Object.defineProperty(t,"__esModule",{value:!0})}));
 //# sourceMappingURL=boxmeglobal-omisell-ui-lib-omisell-tabset.umd.min.js.map

bundles/boxmeglobal-omisell-ui-lib.umd.js

@@ -428,3 +428,5 @@ (function (global, factory) {
             function (tabId) { return _this.changeTab.emit(tabId); }));
-            this.tabActivateService.setTabActive(this.tabIdDefault);
+            if (this.tabIdDefault) {
+                this.tabActivateService.setTabActive(this.tabIdDefault);
+            }
         };
@@ -434,2 +436,15 @@ /**
          */
+        TabsetComponent.prototype.ngAfterContentInit = /**
+         * @return {?}
+         */
+        function () {
+            if (!this.tabIdDefault && this.tabs.length > 0) {
+                /** @type {?} */
+                var firstTab = this.tabs.first;
+                this.tabActivateService.setTabActive(firstTab.tabID);
+            }
+        };
+        /**
+         * @return {?}
+         */
         TabsetComponent.prototype.ngOnDestroy = /**
@@ -458,2 +473,3 @@ * @return {?}
         TabsetComponent.propDecorators = {
+            tabs: [{ type: core.ContentChildren, args: [TabComponent, { descendants: false },] }],
             tabIdDefault: [{ type: core.Input, args: ['tabIdDefault',] }],
@@ -468,2 +484,7 @@ changeTab: [{ type: core.Output, args: ['changeTab',] }]
         /** @type {?} */
+        TabsetComponent.prototype.tabs;
+        /**
+         * TabId default. If not specify, it will use first tab
+         * @type {?}
+         */
         TabsetComponent.prototype.tabIdDefault;
@@ -470,0 +491,0 @@ /** @type {?} */

bundles/boxmeglobal-omisell-ui-lib.umd.min.js

@@ -15,3 +15,3 @@ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("rxjs"),require("rxjs/operators"),require("@angular/forms")):"function"==typeof define&&define.amd?define("@boxmeglobal/omisell-ui-lib",["exports","@angular/core","@angular/common","rxjs","rxjs/operators","@angular/forms"],e):e(((t=t||self).boxmeglobal=t.boxmeglobal||{},t.boxmeglobal["omisell-ui-lib"]={}),t.ng.core,t.ng.common,t.rxjs,t.rxjs.operators,t.ng.forms)}(this,(function(t,e,n,i,o,r){"use strict";
     PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */var a=function(){return(a=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};var s=function(){function t(){this.listTab=[],this.activeTabChange=new i.Subject}return Object.defineProperty(t.prototype,"activeId",{get:function(){return this._activeId},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"activeTemplate",{get:function(){var t=this,e=this.listTab.find((function(e){return e.id==t._activeId}));return e&&e.template||null},enumerable:!0,configurable:!0}),t.prototype.setTabActive=function(t){this._activeId&&this.activeTabChange.next(t),this._activeId=t},t.prototype.addTab=function(t){this.listTab.find((function(e){return e.id==t.id}))||this.listTab.push(a({},t))},t.decorators=[{type:e.Injectable}],t.ctorParameters=function(){return[]},t}();var c=function(){function t(t){this._templateRef=t}return t.decorators=[{type:e.Directive,args:[{selector:"[omisell-tabcontent]"}]}],t.ctorParameters=function(){return[{type:e.TemplateRef}]},t}();var u=function(){function t(t){this.tabActivateService=t}return t.prototype.ngOnInit=function(){},t.prototype.ngAfterContentInit=function(){this.tabActivateService.addTab({id:this.tabID,template:this.tabcontent&&this.tabcontent._templateRef||null})},t.prototype.active=function(){this.tabActivateService.setTabActive(this.tabID)},t.decorators=[{type:e.Component,args:[{selector:"omisell-tab",template:'<div class="tab-control" [class.active]="tabActivateService.activeId == tabID" (click)="active()">\n    <div class="tab-title">{{ title }}</div>\n</div>\n',styles:[""]}]}],t.ctorParameters=function(){return[{type:s}]},t.propDecorators={tabcontent:[{type:e.ContentChild,args:[c,{static:!1}]}],tabID:[{type:e.Input}],title:[{type:e.Input}]},t}();var l=function(){function t(t){this.tabActivateService=t,this.destroy$=new i.Subject,this.changeTab=new e.EventEmitter(!1)}return t.prototype.ngOnInit=function(){var t=this;this.tabActivateService.activeTabChange.pipe(o.takeUntil(this.destroy$)).subscribe((function(e){return t.changeTab.emit(e)})),this.tabActivateService.setTabActive(this.tabIdDefault)},t.prototype.ngOnDestroy=function(){this.destroy$.next(),this.destroy$.complete(),this.destroy$.unsubscribe()},t.decorators=[{type:e.Component,args:[{selector:"omisell-tabset",template:'<div class="control-wrapper d-flex w-100">\n    <ng-content></ng-content>\n</div>\n\n<div class="tab-content" *ngIf="tabActivateService.activeTemplate">\n    <ng-container *ngTemplateOutlet="tabActivateService.activeTemplate"></ng-container>\n</div>\n',providers:[s],styles:[""]}]}],t.ctorParameters=function(){return[{type:s}]},t.propDecorators={tabIdDefault:[{type:e.Input,args:["tabIdDefault"]}],changeTab:[{type:e.Output,args:["changeTab"]}]},t}();var p=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{declarations:[u,l,c],exports:[u,l,c],imports:[n.CommonModule]}]}],t}(),f=function(){function t(){this.isActive=!1,this._onChangeFn=function(t){},this._onTouchedFn=function(){},this.onChangeEvent=new e.EventEmitter(!0)}return t.prototype.onClick=function(){this.isActive=!this.isActive,this._onTouchedFn(),this.onChangeEvent.emit(this.isActive),this._onChangeFn(this.isActive)},t.prototype.ngOnInit=function(){},t.prototype.registerOnChange=function(t){this._onChangeFn=t},t.prototype.writeValue=function(t){this.isActive=!!t},t.prototype.registerOnTouched=function(t){this._onTouchedFn=t},t.prototype.setDisabledState=function(t){},t.decorators=[{type:e.Component,args:[{selector:"omisell-switch",template:'<div class="ui-switch" [class.ui-switch--checked]="isActive">\n    <span class="ui-switch__inner"></span>\n</div>\n',encapsulation:e.ViewEncapsulation.None,providers:[{provide:r.NG_VALUE_ACCESSOR,useExisting:e.forwardRef((function(){return t})),multi:!0}]}]}],t.ctorParameters=function(){return[]},t.propDecorators={onChangeEvent:[{type:e.Output,args:["onChange"]}],onClick:[{type:e.HostListener,args:["click"]}]},t}();var h=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{declarations:[f],imports:[n.CommonModule],exports:[f]}]}],t}();t.OmisellSwitchComponent=f,t.OmisellSwitchModule=h,t.OmisellTabsetModule=p,t.TabComponent=u,t.TabContentDirective=c,t.TabsetComponent=l,t.ɵa=s,Object.defineProperty(t,"__esModule",{value:!0})}));
+    ***************************************************************************** */var a=function(){return(a=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};var s=function(){function t(){this.listTab=[],this.activeTabChange=new i.Subject}return Object.defineProperty(t.prototype,"activeId",{get:function(){return this._activeId},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"activeTemplate",{get:function(){var t=this,e=this.listTab.find((function(e){return e.id==t._activeId}));return e&&e.template||null},enumerable:!0,configurable:!0}),t.prototype.setTabActive=function(t){this._activeId&&this.activeTabChange.next(t),this._activeId=t},t.prototype.addTab=function(t){this.listTab.find((function(e){return e.id==t.id}))||this.listTab.push(a({},t))},t.decorators=[{type:e.Injectable}],t.ctorParameters=function(){return[]},t}();var c=function(){function t(t){this._templateRef=t}return t.decorators=[{type:e.Directive,args:[{selector:"[omisell-tabcontent]"}]}],t.ctorParameters=function(){return[{type:e.TemplateRef}]},t}();var u=function(){function t(t){this.tabActivateService=t}return t.prototype.ngOnInit=function(){},t.prototype.ngAfterContentInit=function(){this.tabActivateService.addTab({id:this.tabID,template:this.tabcontent&&this.tabcontent._templateRef||null})},t.prototype.active=function(){this.tabActivateService.setTabActive(this.tabID)},t.decorators=[{type:e.Component,args:[{selector:"omisell-tab",template:'<div class="tab-control" [class.active]="tabActivateService.activeId == tabID" (click)="active()">\n    <div class="tab-title">{{ title }}</div>\n</div>\n',styles:[""]}]}],t.ctorParameters=function(){return[{type:s}]},t.propDecorators={tabcontent:[{type:e.ContentChild,args:[c,{static:!1}]}],tabID:[{type:e.Input}],title:[{type:e.Input}]},t}();var l=function(){function t(t){this.tabActivateService=t,this.destroy$=new i.Subject,this.changeTab=new e.EventEmitter(!1)}return t.prototype.ngOnInit=function(){var t=this;this.tabActivateService.activeTabChange.pipe(o.takeUntil(this.destroy$)).subscribe((function(e){return t.changeTab.emit(e)})),this.tabIdDefault&&this.tabActivateService.setTabActive(this.tabIdDefault)},t.prototype.ngAfterContentInit=function(){if(!this.tabIdDefault&&this.tabs.length>0){var t=this.tabs.first;this.tabActivateService.setTabActive(t.tabID)}},t.prototype.ngOnDestroy=function(){this.destroy$.next(),this.destroy$.complete(),this.destroy$.unsubscribe()},t.decorators=[{type:e.Component,args:[{selector:"omisell-tabset",template:'<div class="control-wrapper d-flex w-100">\n    <ng-content></ng-content>\n</div>\n\n<div class="tab-content" *ngIf="tabActivateService.activeTemplate">\n    <ng-container *ngTemplateOutlet="tabActivateService.activeTemplate"></ng-container>\n</div>\n',providers:[s],styles:[""]}]}],t.ctorParameters=function(){return[{type:s}]},t.propDecorators={tabs:[{type:e.ContentChildren,args:[u,{descendants:!1}]}],tabIdDefault:[{type:e.Input,args:["tabIdDefault"]}],changeTab:[{type:e.Output,args:["changeTab"]}]},t}();var p=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{declarations:[u,l,c],exports:[u,l,c],imports:[n.CommonModule]}]}],t}(),f=function(){function t(){this.isActive=!1,this._onChangeFn=function(t){},this._onTouchedFn=function(){},this.onChangeEvent=new e.EventEmitter(!0)}return t.prototype.onClick=function(){this.isActive=!this.isActive,this._onTouchedFn(),this.onChangeEvent.emit(this.isActive),this._onChangeFn(this.isActive)},t.prototype.ngOnInit=function(){},t.prototype.registerOnChange=function(t){this._onChangeFn=t},t.prototype.writeValue=function(t){this.isActive=!!t},t.prototype.registerOnTouched=function(t){this._onTouchedFn=t},t.prototype.setDisabledState=function(t){},t.decorators=[{type:e.Component,args:[{selector:"omisell-switch",template:'<div class="ui-switch" [class.ui-switch--checked]="isActive">\n    <span class="ui-switch__inner"></span>\n</div>\n',encapsulation:e.ViewEncapsulation.None,providers:[{provide:r.NG_VALUE_ACCESSOR,useExisting:e.forwardRef((function(){return t})),multi:!0}]}]}],t.ctorParameters=function(){return[]},t.propDecorators={onChangeEvent:[{type:e.Output,args:["onChange"]}],onClick:[{type:e.HostListener,args:["click"]}]},t}();var h=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{declarations:[f],imports:[n.CommonModule],exports:[f]}]}],t}();t.OmisellSwitchComponent=f,t.OmisellSwitchModule=h,t.OmisellTabsetModule=p,t.TabComponent=u,t.TabContentDirective=c,t.TabsetComponent=l,t.ɵa=s,Object.defineProperty(t,"__esModule",{value:!0})}));
 //# sourceMappingURL=boxmeglobal-omisell-ui-lib.umd.min.js.map

esm2015/omisell-tabset/tabset/tabset.component.js

@@ -6,6 +6,7 @@ /**
  */
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, ContentChildren, EventEmitter, Input, Output, QueryList } from '@angular/core';
 import { TabActivateService } from '../tab-activate.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { TabComponent } from '../tab/tab.component';
 export class TabsetComponent {
@@ -31,3 +32,5 @@ /**
         tabId => this.changeTab.emit(tabId)));
-        this.tabActivateService.setTabActive(this.tabIdDefault);
+        if (this.tabIdDefault) {
+            this.tabActivateService.setTabActive(this.tabIdDefault);
+        }
     }
@@ -37,2 +40,12 @@ /**
      */
+    ngAfterContentInit() {
+        if (!this.tabIdDefault && this.tabs.length > 0) {
+            /** @type {?} */
+            const firstTab = this.tabs.first;
+            this.tabActivateService.setTabActive(firstTab.tabID);
+        }
+    }
+    /**
+     * @return {?}
+     */
     ngOnDestroy() {
@@ -59,2 +72,3 @@ this.destroy$.next();
 TabsetComponent.propDecorators = {
+    tabs: [{ type: ContentChildren, args: [TabComponent, { descendants: false },] }],
     tabIdDefault: [{ type: Input, args: ['tabIdDefault',] }],
@@ -67,2 +81,7 @@ changeTab: [{ type: Output, args: ['changeTab',] }]
     /** @type {?} */
+    TabsetComponent.prototype.tabs;
+    /**
+     * TabId default. If not specify, it will use first tab
+     * @type {?}
+     */
     TabsetComponent.prototype.tabIdDefault;
@@ -74,2 +93,2 @@ /** @type {?} */
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFic2V0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0Bib3htZWdsb2JhbC9vbWlzZWxsLXVpLWxpYi9vbWlzZWxsLXRhYnNldC8iLCJzb3VyY2VzIjpbInRhYnNldC90YWJzZXQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxZQUFZLEVBQUUsS0FBSyxFQUVuQixNQUFNLEVBQ1AsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLGtCQUFrQixFQUFTLE1BQU0seUJBQXlCLENBQUM7QUFDcEUsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUMvQixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFVM0MsTUFBTSxPQUFPLGVBQWU7Ozs7SUFNMUIsWUFDUyxrQkFBc0M7UUFBdEMsdUJBQWtCLEdBQWxCLGtCQUFrQixDQUFvQjtRQU4vQyxhQUFRLEdBQWtCLElBQUksT0FBTyxFQUFRLENBQUE7UUFHeEIsY0FBUyxHQUFzQixJQUFJLFlBQVksQ0FBTSxLQUFLLENBQUMsQ0FBQTtJQUtoRixDQUFDOzs7O0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxlQUFlO2FBQ3BDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO2FBQzlCLFNBQVM7Ozs7UUFBQyxLQUFLLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxFQUFDLENBQUE7UUFFakQsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUE7SUFDekQsQ0FBQzs7OztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksRUFBRSxDQUFBO1FBQ3BCLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxFQUFFLENBQUE7UUFDeEIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLEVBQUUsQ0FBQTtJQUM3QixDQUFDOzs7WUEvQkYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxnQkFBZ0I7Z0JBQzFCLCtRQUFzQztnQkFFdEMsU0FBUyxFQUFFO29CQUNULGtCQUFrQjtpQkFDbkI7O2FBQ0Y7Ozs7WUFYUSxrQkFBa0I7OzsyQkFleEIsS0FBSyxTQUFDLGNBQWM7d0JBQ3BCLE1BQU0sU0FBQyxXQUFXOzs7O0lBSG5CLG1DQUE2Qzs7SUFFN0MsdUNBQTBDOztJQUMxQyxvQ0FBZ0Y7O0lBRzlFLDZDQUE2QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25EZXN0cm95LFxuICBPbkluaXQsXG4gIE91dHB1dFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFRhYkFjdGl2YXRlU2VydmljZSwgVGFiSUQgfSBmcm9tICcuLi90YWItYWN0aXZhdGUuc2VydmljZSc7XG5pbXBvcnQgeyBTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyB0YWtlVW50aWwgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ29taXNlbGwtdGFic2V0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL3RhYnNldC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3RhYnNldC5jb21wb25lbnQuc2NzcyddLFxuICBwcm92aWRlcnM6IFtcbiAgICBUYWJBY3RpdmF0ZVNlcnZpY2VcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBUYWJzZXRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gIGRlc3Ryb3kkOiBTdWJqZWN0PHZvaWQ+ID0gbmV3IFN1YmplY3Q8dm9pZD4oKVxuXG4gIEBJbnB1dCgndGFiSWREZWZhdWx0JykgdGFiSWREZWZhdWx0OiBUYWJJRFxuICBAT3V0cHV0KCdjaGFuZ2VUYWInKSBjaGFuZ2VUYWI6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KGZhbHNlKVxuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHB1YmxpYyB0YWJBY3RpdmF0ZVNlcnZpY2U6IFRhYkFjdGl2YXRlU2VydmljZVxuICApIHtcbiAgfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMudGFiQWN0aXZhdGVTZXJ2aWNlLmFjdGl2ZVRhYkNoYW5nZVxuICAgICAgLnBpcGUodGFrZVVudGlsKHRoaXMuZGVzdHJveSQpKVxuICAgICAgLnN1YnNjcmliZSh0YWJJZCA9PiB0aGlzLmNoYW5nZVRhYi5lbWl0KHRhYklkKSlcblxuICAgIHRoaXMudGFiQWN0aXZhdGVTZXJ2aWNlLnNldFRhYkFjdGl2ZSh0aGlzLnRhYklkRGVmYXVsdClcbiAgfVxuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIHRoaXMuZGVzdHJveSQubmV4dCgpXG4gICAgdGhpcy5kZXN0cm95JC5jb21wbGV0ZSgpXG4gICAgdGhpcy5kZXN0cm95JC51bnN1YnNjcmliZSgpXG4gIH1cbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFic2V0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0Bib3htZWdsb2JhbC9vbWlzZWxsLXVpLWxpYi9vbWlzZWxsLXRhYnNldC8iLCJzb3VyY2VzIjpbInRhYnNldC90YWJzZXQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsT0FBTyxFQUVMLFNBQVMsRUFBRSxlQUFlLEVBQzFCLFlBQVksRUFBRSxLQUFLLEVBRW5CLE1BQU0sRUFBRSxTQUFTLEVBQ2xCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxrQkFBa0IsRUFBUyxNQUFNLHlCQUF5QixDQUFDO0FBQ3BFLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDL0IsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzNDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQVVwRCxNQUFNLE9BQU8sZUFBZTs7OztJQWUxQixZQUNTLGtCQUFzQztRQUF0Qyx1QkFBa0IsR0FBbEIsa0JBQWtCLENBQW9CO1FBZi9DLGFBQVEsR0FBa0IsSUFBSSxPQUFPLEVBQVEsQ0FBQTtRQVk3QyxjQUFTLEdBQXNCLElBQUksWUFBWSxDQUFNLEtBQUssQ0FBQyxDQUFBO0lBSzNELENBQUM7Ozs7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLGtCQUFrQixDQUFDLGVBQWU7YUFDcEMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7YUFDOUIsU0FBUzs7OztRQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLEVBQUMsQ0FBQTtRQUVqRCxJQUFJLElBQUksQ0FBQyxZQUFZLEVBQUU7WUFDckIsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUE7U0FDeEQ7SUFDSCxDQUFDOzs7O0lBRUQsa0JBQWtCO1FBQ2hCLElBQUcsQ0FBQyxJQUFJLENBQUMsWUFBWSxJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRTs7a0JBQ3ZDLFFBQVEsR0FBaUIsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLO1lBQzlDLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxZQUFZLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFBO1NBQ3JEO0lBQ0gsQ0FBQzs7OztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksRUFBRSxDQUFBO1FBQ3BCLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxFQUFFLENBQUE7UUFDeEIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLEVBQUUsQ0FBQTtJQUM3QixDQUFDOzs7WUFqREYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxnQkFBZ0I7Z0JBQzFCLCtRQUFzQztnQkFFdEMsU0FBUyxFQUFFO29CQUNULGtCQUFrQjtpQkFDbkI7O2FBQ0Y7Ozs7WUFaUSxrQkFBa0I7OzttQkFnQnhCLGVBQWUsU0FBQyxZQUFZLEVBQUUsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFOzJCQU1wRCxLQUFLLFNBQUMsY0FBYzt3QkFHcEIsTUFBTSxTQUFDLFdBQVc7Ozs7SUFYbkIsbUNBQTZDOztJQUU3QywrQkFDNkI7Ozs7O0lBSzdCLHVDQUNtQjs7SUFFbkIsb0NBQzJEOztJQUd6RCw2Q0FBNkMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBZnRlckNvbnRlbnRJbml0LFxuICBDb21wb25lbnQsIENvbnRlbnRDaGlsZHJlbixcbiAgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25EZXN0cm95LFxuICBPbkluaXQsXG4gIE91dHB1dCwgUXVlcnlMaXN0XG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVGFiQWN0aXZhdGVTZXJ2aWNlLCBUYWJJRCB9IGZyb20gJy4uL3RhYi1hY3RpdmF0ZS5zZXJ2aWNlJztcbmltcG9ydCB7IFN1YmplY3QgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IHRha2VVbnRpbCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7IFRhYkNvbXBvbmVudCB9IGZyb20gJy4uL3RhYi90YWIuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnb21pc2VsbC10YWJzZXQnLFxuICB0ZW1wbGF0ZVVybDogJy4vdGFic2V0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vdGFic2V0LmNvbXBvbmVudC5zY3NzJ10sXG4gIHByb3ZpZGVyczogW1xuICAgIFRhYkFjdGl2YXRlU2VydmljZVxuICBdXG59KVxuZXhwb3J0IGNsYXNzIFRhYnNldENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95LCBBZnRlckNvbnRlbnRJbml0IHtcbiAgZGVzdHJveSQ6IFN1YmplY3Q8dm9pZD4gPSBuZXcgU3ViamVjdDx2b2lkPigpXG5cbiAgQENvbnRlbnRDaGlsZHJlbihUYWJDb21wb25lbnQsIHsgZGVzY2VuZGFudHM6IGZhbHNlIH0pXG4gIHRhYnM6IFF1ZXJ5TGlzdDxUYWJDb21wb25lbnQ+XG5cbiAgLyoqXG4gICAqIFRhYklkIGRlZmF1bHQuIElmIG5vdCBzcGVjaWZ5LCBpdCB3aWxsIHVzZSBmaXJzdCB0YWJcbiAgICovXG4gIEBJbnB1dCgndGFiSWREZWZhdWx0JylcbiAgdGFiSWREZWZhdWx0OiBUYWJJRFxuXG4gIEBPdXRwdXQoJ2NoYW5nZVRhYicpXG4gIGNoYW5nZVRhYjogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oZmFsc2UpXG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHVibGljIHRhYkFjdGl2YXRlU2VydmljZTogVGFiQWN0aXZhdGVTZXJ2aWNlXG4gICkge1xuICB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy50YWJBY3RpdmF0ZVNlcnZpY2UuYWN0aXZlVGFiQ2hhbmdlXG4gICAgICAucGlwZSh0YWtlVW50aWwodGhpcy5kZXN0cm95JCkpXG4gICAgICAuc3Vic2NyaWJlKHRhYklkID0+IHRoaXMuY2hhbmdlVGFiLmVtaXQodGFiSWQpKVxuXG4gICAgaWYgKHRoaXMudGFiSWREZWZhdWx0KSB7XG4gICAgICB0aGlzLnRhYkFjdGl2YXRlU2VydmljZS5zZXRUYWJBY3RpdmUodGhpcy50YWJJZERlZmF1bHQpXG4gICAgfVxuICB9XG5cbiAgbmdBZnRlckNvbnRlbnRJbml0KCkge1xuICAgIGlmKCF0aGlzLnRhYklkRGVmYXVsdCAmJiB0aGlzLnRhYnMubGVuZ3RoID4gMCkge1xuICAgICAgY29uc3QgZmlyc3RUYWI6IFRhYkNvbXBvbmVudCA9IHRoaXMudGFicy5maXJzdFxuICAgICAgdGhpcy50YWJBY3RpdmF0ZVNlcnZpY2Uuc2V0VGFiQWN0aXZlKGZpcnN0VGFiLnRhYklEKVxuICAgIH1cbiAgfVxuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIHRoaXMuZGVzdHJveSQubmV4dCgpXG4gICAgdGhpcy5kZXN0cm95JC5jb21wbGV0ZSgpXG4gICAgdGhpcy5kZXN0cm95JC51bnN1YnNjcmliZSgpXG4gIH1cbn1cbiJdfQ==

esm5/omisell-tabset/tabset/tabset.component.js

@@ -6,6 +6,7 @@ /**
  */
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, ContentChildren, EventEmitter, Input, Output, QueryList } from '@angular/core';
 import { TabActivateService } from '../tab-activate.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { TabComponent } from '../tab/tab.component';
 var TabsetComponent = /** @class */ (function () {
@@ -32,3 +33,5 @@ function TabsetComponent(tabActivateService) {
         function (tabId) { return _this.changeTab.emit(tabId); }));
-        this.tabActivateService.setTabActive(this.tabIdDefault);
+        if (this.tabIdDefault) {
+            this.tabActivateService.setTabActive(this.tabIdDefault);
+        }
     };
@@ -38,2 +41,15 @@ /**
      */
+    TabsetComponent.prototype.ngAfterContentInit = /**
+     * @return {?}
+     */
+    function () {
+        if (!this.tabIdDefault && this.tabs.length > 0) {
+            /** @type {?} */
+            var firstTab = this.tabs.first;
+            this.tabActivateService.setTabActive(firstTab.tabID);
+        }
+    };
+    /**
+     * @return {?}
+     */
     TabsetComponent.prototype.ngOnDestroy = /**
@@ -62,2 +78,3 @@ * @return {?}
     TabsetComponent.propDecorators = {
+        tabs: [{ type: ContentChildren, args: [TabComponent, { descendants: false },] }],
         tabIdDefault: [{ type: Input, args: ['tabIdDefault',] }],
@@ -73,2 +90,7 @@ changeTab: [{ type: Output, args: ['changeTab',] }]
     /** @type {?} */
+    TabsetComponent.prototype.tabs;
+    /**
+     * TabId default. If not specify, it will use first tab
+     * @type {?}
+     */
     TabsetComponent.prototype.tabIdDefault;
@@ -80,2 +102,2 @@ /** @type {?} */
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFic2V0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0Bib3htZWdsb2JhbC9vbWlzZWxsLXVpLWxpYi9vbWlzZWxsLXRhYnNldC8iLCJzb3VyY2VzIjpbInRhYnNldC90YWJzZXQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxZQUFZLEVBQUUsS0FBSyxFQUVuQixNQUFNLEVBQ1AsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLGtCQUFrQixFQUFTLE1BQU0seUJBQXlCLENBQUM7QUFDcEUsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUMvQixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFM0M7SUFjRSx5QkFDUyxrQkFBc0M7UUFBdEMsdUJBQWtCLEdBQWxCLGtCQUFrQixDQUFvQjtRQU4vQyxhQUFRLEdBQWtCLElBQUksT0FBTyxFQUFRLENBQUE7UUFHeEIsY0FBUyxHQUFzQixJQUFJLFlBQVksQ0FBTSxLQUFLLENBQUMsQ0FBQTtJQUtoRixDQUFDOzs7O0lBRUQsa0NBQVE7OztJQUFSO1FBQUEsaUJBTUM7UUFMQyxJQUFJLENBQUMsa0JBQWtCLENBQUMsZUFBZTthQUNwQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQzthQUM5QixTQUFTOzs7O1FBQUMsVUFBQSxLQUFLLElBQUksT0FBQSxLQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsRUFBMUIsQ0FBMEIsRUFBQyxDQUFBO1FBRWpELElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFBO0lBQ3pELENBQUM7Ozs7SUFFRCxxQ0FBVzs7O0lBQVg7UUFDRSxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksRUFBRSxDQUFBO1FBQ3BCLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxFQUFFLENBQUE7UUFDeEIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLEVBQUUsQ0FBQTtJQUM3QixDQUFDOztnQkEvQkYsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxnQkFBZ0I7b0JBQzFCLCtRQUFzQztvQkFFdEMsU0FBUyxFQUFFO3dCQUNULGtCQUFrQjtxQkFDbkI7O2lCQUNGOzs7O2dCQVhRLGtCQUFrQjs7OytCQWV4QixLQUFLLFNBQUMsY0FBYzs0QkFDcEIsTUFBTSxTQUFDLFdBQVc7O0lBb0JyQixzQkFBQztDQUFBLEFBaENELElBZ0NDO1NBeEJZLGVBQWU7OztJQUMxQixtQ0FBNkM7O0lBRTdDLHVDQUEwQzs7SUFDMUMsb0NBQWdGOztJQUc5RSw2Q0FBNkMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uRGVzdHJveSxcbiAgT25Jbml0LFxuICBPdXRwdXRcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBUYWJBY3RpdmF0ZVNlcnZpY2UsIFRhYklEIH0gZnJvbSAnLi4vdGFiLWFjdGl2YXRlLnNlcnZpY2UnO1xuaW1wb3J0IHsgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgdGFrZVVudGlsIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdvbWlzZWxsLXRhYnNldCcsXG4gIHRlbXBsYXRlVXJsOiAnLi90YWJzZXQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi90YWJzZXQuY29tcG9uZW50LnNjc3MnXSxcbiAgcHJvdmlkZXJzOiBbXG4gICAgVGFiQWN0aXZhdGVTZXJ2aWNlXG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgVGFic2V0Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICBkZXN0cm95JDogU3ViamVjdDx2b2lkPiA9IG5ldyBTdWJqZWN0PHZvaWQ+KClcblxuICBASW5wdXQoJ3RhYklkRGVmYXVsdCcpIHRhYklkRGVmYXVsdDogVGFiSURcbiAgQE91dHB1dCgnY2hhbmdlVGFiJykgY2hhbmdlVGFiOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PihmYWxzZSlcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwdWJsaWMgdGFiQWN0aXZhdGVTZXJ2aWNlOiBUYWJBY3RpdmF0ZVNlcnZpY2VcbiAgKSB7XG4gIH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLnRhYkFjdGl2YXRlU2VydmljZS5hY3RpdmVUYWJDaGFuZ2VcbiAgICAgIC5waXBlKHRha2VVbnRpbCh0aGlzLmRlc3Ryb3kkKSlcbiAgICAgIC5zdWJzY3JpYmUodGFiSWQgPT4gdGhpcy5jaGFuZ2VUYWIuZW1pdCh0YWJJZCkpXG5cbiAgICB0aGlzLnRhYkFjdGl2YXRlU2VydmljZS5zZXRUYWJBY3RpdmUodGhpcy50YWJJZERlZmF1bHQpXG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLmRlc3Ryb3kkLm5leHQoKVxuICAgIHRoaXMuZGVzdHJveSQuY29tcGxldGUoKVxuICAgIHRoaXMuZGVzdHJveSQudW5zdWJzY3JpYmUoKVxuICB9XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFic2V0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0Bib3htZWdsb2JhbC9vbWlzZWxsLXVpLWxpYi9vbWlzZWxsLXRhYnNldC8iLCJzb3VyY2VzIjpbInRhYnNldC90YWJzZXQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsT0FBTyxFQUVMLFNBQVMsRUFBRSxlQUFlLEVBQzFCLFlBQVksRUFBRSxLQUFLLEVBRW5CLE1BQU0sRUFBRSxTQUFTLEVBQ2xCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxrQkFBa0IsRUFBUyxNQUFNLHlCQUF5QixDQUFDO0FBQ3BFLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDL0IsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzNDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUVwRDtJQXVCRSx5QkFDUyxrQkFBc0M7UUFBdEMsdUJBQWtCLEdBQWxCLGtCQUFrQixDQUFvQjtRQWYvQyxhQUFRLEdBQWtCLElBQUksT0FBTyxFQUFRLENBQUE7UUFZN0MsY0FBUyxHQUFzQixJQUFJLFlBQVksQ0FBTSxLQUFLLENBQUMsQ0FBQTtJQUszRCxDQUFDOzs7O0lBRUQsa0NBQVE7OztJQUFSO1FBQUEsaUJBUUM7UUFQQyxJQUFJLENBQUMsa0JBQWtCLENBQUMsZUFBZTthQUNwQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQzthQUM5QixTQUFTOzs7O1FBQUMsVUFBQSxLQUFLLElBQUksT0FBQSxLQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsRUFBMUIsQ0FBMEIsRUFBQyxDQUFBO1FBRWpELElBQUksSUFBSSxDQUFDLFlBQVksRUFBRTtZQUNyQixJQUFJLENBQUMsa0JBQWtCLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQTtTQUN4RDtJQUNILENBQUM7Ozs7SUFFRCw0Q0FBa0I7OztJQUFsQjtRQUNFLElBQUcsQ0FBQyxJQUFJLENBQUMsWUFBWSxJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRTs7Z0JBQ3ZDLFFBQVEsR0FBaUIsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLO1lBQzlDLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxZQUFZLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFBO1NBQ3JEO0lBQ0gsQ0FBQzs7OztJQUVELHFDQUFXOzs7SUFBWDtRQUNFLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLENBQUE7UUFDcEIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLEVBQUUsQ0FBQTtRQUN4QixJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsRUFBRSxDQUFBO0lBQzdCLENBQUM7O2dCQWpERixTQUFTLFNBQUM7b0JBQ1QsUUFBUSxFQUFFLGdCQUFnQjtvQkFDMUIsK1FBQXNDO29CQUV0QyxTQUFTLEVBQUU7d0JBQ1Qsa0JBQWtCO3FCQUNuQjs7aUJBQ0Y7Ozs7Z0JBWlEsa0JBQWtCOzs7dUJBZ0J4QixlQUFlLFNBQUMsWUFBWSxFQUFFLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRTsrQkFNcEQsS0FBSyxTQUFDLGNBQWM7NEJBR3BCLE1BQU0sU0FBQyxXQUFXOztJQThCckIsc0JBQUM7Q0FBQSxBQWxERCxJQWtEQztTQTFDWSxlQUFlOzs7SUFDMUIsbUNBQTZDOztJQUU3QywrQkFDNkI7Ozs7O0lBSzdCLHVDQUNtQjs7SUFFbkIsb0NBQzJEOztJQUd6RCw2Q0FBNkMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBZnRlckNvbnRlbnRJbml0LFxuICBDb21wb25lbnQsIENvbnRlbnRDaGlsZHJlbixcbiAgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25EZXN0cm95LFxuICBPbkluaXQsXG4gIE91dHB1dCwgUXVlcnlMaXN0XG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVGFiQWN0aXZhdGVTZXJ2aWNlLCBUYWJJRCB9IGZyb20gJy4uL3RhYi1hY3RpdmF0ZS5zZXJ2aWNlJztcbmltcG9ydCB7IFN1YmplY3QgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IHRha2VVbnRpbCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7IFRhYkNvbXBvbmVudCB9IGZyb20gJy4uL3RhYi90YWIuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnb21pc2VsbC10YWJzZXQnLFxuICB0ZW1wbGF0ZVVybDogJy4vdGFic2V0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vdGFic2V0LmNvbXBvbmVudC5zY3NzJ10sXG4gIHByb3ZpZGVyczogW1xuICAgIFRhYkFjdGl2YXRlU2VydmljZVxuICBdXG59KVxuZXhwb3J0IGNsYXNzIFRhYnNldENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95LCBBZnRlckNvbnRlbnRJbml0IHtcbiAgZGVzdHJveSQ6IFN1YmplY3Q8dm9pZD4gPSBuZXcgU3ViamVjdDx2b2lkPigpXG5cbiAgQENvbnRlbnRDaGlsZHJlbihUYWJDb21wb25lbnQsIHsgZGVzY2VuZGFudHM6IGZhbHNlIH0pXG4gIHRhYnM6IFF1ZXJ5TGlzdDxUYWJDb21wb25lbnQ+XG5cbiAgLyoqXG4gICAqIFRhYklkIGRlZmF1bHQuIElmIG5vdCBzcGVjaWZ5LCBpdCB3aWxsIHVzZSBmaXJzdCB0YWJcbiAgICovXG4gIEBJbnB1dCgndGFiSWREZWZhdWx0JylcbiAgdGFiSWREZWZhdWx0OiBUYWJJRFxuXG4gIEBPdXRwdXQoJ2NoYW5nZVRhYicpXG4gIGNoYW5nZVRhYjogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oZmFsc2UpXG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHVibGljIHRhYkFjdGl2YXRlU2VydmljZTogVGFiQWN0aXZhdGVTZXJ2aWNlXG4gICkge1xuICB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy50YWJBY3RpdmF0ZVNlcnZpY2UuYWN0aXZlVGFiQ2hhbmdlXG4gICAgICAucGlwZSh0YWtlVW50aWwodGhpcy5kZXN0cm95JCkpXG4gICAgICAuc3Vic2NyaWJlKHRhYklkID0+IHRoaXMuY2hhbmdlVGFiLmVtaXQodGFiSWQpKVxuXG4gICAgaWYgKHRoaXMudGFiSWREZWZhdWx0KSB7XG4gICAgICB0aGlzLnRhYkFjdGl2YXRlU2VydmljZS5zZXRUYWJBY3RpdmUodGhpcy50YWJJZERlZmF1bHQpXG4gICAgfVxuICB9XG5cbiAgbmdBZnRlckNvbnRlbnRJbml0KCkge1xuICAgIGlmKCF0aGlzLnRhYklkRGVmYXVsdCAmJiB0aGlzLnRhYnMubGVuZ3RoID4gMCkge1xuICAgICAgY29uc3QgZmlyc3RUYWI6IFRhYkNvbXBvbmVudCA9IHRoaXMudGFicy5maXJzdFxuICAgICAgdGhpcy50YWJBY3RpdmF0ZVNlcnZpY2Uuc2V0VGFiQWN0aXZlKGZpcnN0VGFiLnRhYklEKVxuICAgIH1cbiAgfVxuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIHRoaXMuZGVzdHJveSQubmV4dCgpXG4gICAgdGhpcy5kZXN0cm95JC5jb21wbGV0ZSgpXG4gICAgdGhpcy5kZXN0cm95JC51bnN1YnNjcmliZSgpXG4gIH1cbn1cbiJdfQ==

fesm2015/boxmeglobal-omisell-ui-lib-omisell-tabset.js

@@ -1,2 +0,2 @@
-import { Injectable, Directive, TemplateRef, Component, ContentChild, Input, EventEmitter, Output, NgModule } from '@angular/core';
+import { Injectable, Directive, TemplateRef, Component, ContentChild, Input, EventEmitter, ContentChildren, Output, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -184,3 +184,5 @@ import { Subject } from 'rxjs';
         tabId => this.changeTab.emit(tabId)));
-        this.tabActivateService.setTabActive(this.tabIdDefault);
+        if (this.tabIdDefault) {
+            this.tabActivateService.setTabActive(this.tabIdDefault);
+        }
     }
@@ -190,2 +192,12 @@ /**
      */
+    ngAfterContentInit() {
+        if (!this.tabIdDefault && this.tabs.length > 0) {
+            /** @type {?} */
+            const firstTab = this.tabs.first;
+            this.tabActivateService.setTabActive(firstTab.tabID);
+        }
+    }
+    /**
+     * @return {?}
+     */
     ngOnDestroy() {
@@ -212,2 +224,3 @@ this.destroy$.next();
 TabsetComponent.propDecorators = {
+    tabs: [{ type: ContentChildren, args: [TabComponent, { descendants: false },] }],
     tabIdDefault: [{ type: Input, args: ['tabIdDefault',] }],
@@ -220,2 +233,7 @@ changeTab: [{ type: Output, args: ['changeTab',] }]
     /** @type {?} */
+    TabsetComponent.prototype.tabs;
+    /**
+     * TabId default. If not specify, it will use first tab
+     * @type {?}
+     */
     TabsetComponent.prototype.tabIdDefault;
@@ -222,0 +240,0 @@ /** @type {?} */

fesm2015/boxmeglobal-omisell-ui-lib.js

@@ -1,2 +0,2 @@
-import { Injectable, Directive, TemplateRef, Component, ContentChild, Input, EventEmitter, Output, NgModule, ViewEncapsulation, forwardRef, HostListener } from '@angular/core';
+import { Injectable, Directive, TemplateRef, Component, ContentChild, Input, EventEmitter, ContentChildren, Output, NgModule, ViewEncapsulation, forwardRef, HostListener } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -185,3 +185,5 @@ import { Subject } from 'rxjs';
         tabId => this.changeTab.emit(tabId)));
-        this.tabActivateService.setTabActive(this.tabIdDefault);
+        if (this.tabIdDefault) {
+            this.tabActivateService.setTabActive(this.tabIdDefault);
+        }
     }
@@ -191,2 +193,12 @@ /**
      */
+    ngAfterContentInit() {
+        if (!this.tabIdDefault && this.tabs.length > 0) {
+            /** @type {?} */
+            const firstTab = this.tabs.first;
+            this.tabActivateService.setTabActive(firstTab.tabID);
+        }
+    }
+    /**
+     * @return {?}
+     */
     ngOnDestroy() {
@@ -213,2 +225,3 @@ this.destroy$.next();
 TabsetComponent.propDecorators = {
+    tabs: [{ type: ContentChildren, args: [TabComponent, { descendants: false },] }],
     tabIdDefault: [{ type: Input, args: ['tabIdDefault',] }],
@@ -221,2 +234,7 @@ changeTab: [{ type: Output, args: ['changeTab',] }]
     /** @type {?} */
+    TabsetComponent.prototype.tabs;
+    /**
+     * TabId default. If not specify, it will use first tab
+     * @type {?}
+     */
     TabsetComponent.prototype.tabIdDefault;
@@ -223,0 +241,0 @@ /** @type {?} */

fesm5/boxmeglobal-omisell-ui-lib-omisell-tabset.js

@@ -1,2 +0,2 @@
-import { Injectable, Directive, TemplateRef, Component, ContentChild, Input, EventEmitter, Output, NgModule } from '@angular/core';
+import { Injectable, Directive, TemplateRef, Component, ContentChild, Input, EventEmitter, ContentChildren, Output, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -209,3 +209,5 @@ import { __assign } from 'tslib';
         function (tabId) { return _this.changeTab.emit(tabId); }));
-        this.tabActivateService.setTabActive(this.tabIdDefault);
+        if (this.tabIdDefault) {
+            this.tabActivateService.setTabActive(this.tabIdDefault);
+        }
     };
@@ -215,2 +217,15 @@ /**
      */
+    TabsetComponent.prototype.ngAfterContentInit = /**
+     * @return {?}
+     */
+    function () {
+        if (!this.tabIdDefault && this.tabs.length > 0) {
+            /** @type {?} */
+            var firstTab = this.tabs.first;
+            this.tabActivateService.setTabActive(firstTab.tabID);
+        }
+    };
+    /**
+     * @return {?}
+     */
     TabsetComponent.prototype.ngOnDestroy = /**
@@ -239,2 +254,3 @@ * @return {?}
     TabsetComponent.propDecorators = {
+        tabs: [{ type: ContentChildren, args: [TabComponent, { descendants: false },] }],
         tabIdDefault: [{ type: Input, args: ['tabIdDefault',] }],
@@ -249,2 +265,7 @@ changeTab: [{ type: Output, args: ['changeTab',] }]
     /** @type {?} */
+    TabsetComponent.prototype.tabs;
+    /**
+     * TabId default. If not specify, it will use first tab
+     * @type {?}
+     */
     TabsetComponent.prototype.tabIdDefault;
@@ -251,0 +272,0 @@ /** @type {?} */

fesm5/boxmeglobal-omisell-ui-lib.js

@@ -1,2 +0,2 @@
-import { Injectable, Directive, TemplateRef, Component, ContentChild, Input, EventEmitter, Output, NgModule, ViewEncapsulation, forwardRef, HostListener } from '@angular/core';
+import { Injectable, Directive, TemplateRef, Component, ContentChild, Input, EventEmitter, ContentChildren, Output, NgModule, ViewEncapsulation, forwardRef, HostListener } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -210,3 +210,5 @@ import { __assign } from 'tslib';
         function (tabId) { return _this.changeTab.emit(tabId); }));
-        this.tabActivateService.setTabActive(this.tabIdDefault);
+        if (this.tabIdDefault) {
+            this.tabActivateService.setTabActive(this.tabIdDefault);
+        }
     };
@@ -216,2 +218,15 @@ /**
      */
+    TabsetComponent.prototype.ngAfterContentInit = /**
+     * @return {?}
+     */
+    function () {
+        if (!this.tabIdDefault && this.tabs.length > 0) {
+            /** @type {?} */
+            var firstTab = this.tabs.first;
+            this.tabActivateService.setTabActive(firstTab.tabID);
+        }
+    };
+    /**
+     * @return {?}
+     */
     TabsetComponent.prototype.ngOnDestroy = /**
@@ -240,2 +255,3 @@ * @return {?}
     TabsetComponent.propDecorators = {
+        tabs: [{ type: ContentChildren, args: [TabComponent, { descendants: false },] }],
         tabIdDefault: [{ type: Input, args: ['tabIdDefault',] }],
@@ -250,2 +266,7 @@ changeTab: [{ type: Output, args: ['changeTab',] }]
     /** @type {?} */
+    TabsetComponent.prototype.tabs;
+    /**
+     * TabId default. If not specify, it will use first tab
+     * @type {?}
+     */
     TabsetComponent.prototype.tabIdDefault;
@@ -252,0 +273,0 @@ /** @type {?} */

omisell-tabset/boxmeglobal-omisell-ui-lib-omisell-tabset.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":4,"metadata":{"OmisellTabsetModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"TabComponent"},{"__symbolic":"reference","name":"TabsetComponent"},{"__symbolic":"reference","name":"TabContentDirective"}],"exports":[{"__symbolic":"reference","name":"TabComponent"},{"__symbolic":"reference","name":"TabsetComponent"},{"__symbolic":"reference","name":"TabContentDirective"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":21,"character":4}]}]}],"members":{}},"TabComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"omisell-tab","template":"<div class=\"tab-control\" [class.active]=\"tabActivateService.activeId == tabID\" (click)=\"active()\">\n    <div class=\"tab-title\">{{ title }}</div>\n</div>\n","styles":[""]}]}],"members":{"tabcontent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":19,"character":3},"arguments":[{"__symbolic":"reference","name":"TabContentDirective"},{"static":false}]}]}],"tabID":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵa"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"active":[{"__symbolic":"method"}]}},"TabContentDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":3,"character":1},"arguments":[{"selector":"[omisell-tabcontent]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"TabsetComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"omisell-tabset","providers":[{"__symbolic":"reference","name":"ɵa"}],"template":"<div class=\"control-wrapper d-flex w-100\">\n    <ng-content></ng-content>\n</div>\n\n<div class=\"tab-content\" *ngIf=\"tabActivateService.activeTemplate\">\n    <ng-container *ngTemplateOutlet=\"tabActivateService.activeTemplate\"></ng-container>\n</div>\n","styles":[""]}]}],"members":{"tabIdDefault":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3},"arguments":["tabIdDefault"]}]}],"changeTab":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":3},"arguments":["changeTab"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵa"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":10,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"setTabActive":[{"__symbolic":"method"}],"addTab":[{"__symbolic":"method"}]}}},"origins":{"OmisellTabsetModule":"./omisell-tabset.module","TabComponent":"./tab/tab.component","TabContentDirective":"./tab/tab.component","TabsetComponent":"./tabset/tabset.component","ɵa":"./tab-activate.service"},"importAs":"@boxmeglobal/omisell-ui-lib/omisell-tabset"}
+{"__symbolic":"module","version":4,"metadata":{"OmisellTabsetModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"TabComponent"},{"__symbolic":"reference","name":"TabsetComponent"},{"__symbolic":"reference","name":"TabContentDirective"}],"exports":[{"__symbolic":"reference","name":"TabComponent"},{"__symbolic":"reference","name":"TabsetComponent"},{"__symbolic":"reference","name":"TabContentDirective"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":21,"character":4}]}]}],"members":{}},"TabComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"omisell-tab","template":"<div class=\"tab-control\" [class.active]=\"tabActivateService.activeId == tabID\" (click)=\"active()\">\n    <div class=\"tab-title\">{{ title }}</div>\n</div>\n","styles":[""]}]}],"members":{"tabcontent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":19,"character":3},"arguments":[{"__symbolic":"reference","name":"TabContentDirective"},{"static":false}]}]}],"tabID":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵa"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"active":[{"__symbolic":"method"}]}},"TabContentDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":3,"character":1},"arguments":[{"selector":"[omisell-tabcontent]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"TabsetComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"omisell-tabset","providers":[{"__symbolic":"reference","name":"ɵa"}],"template":"<div class=\"control-wrapper d-flex w-100\">\n    <ng-content></ng-content>\n</div>\n\n<div class=\"tab-content\" *ngIf=\"tabActivateService.activeTemplate\">\n    <ng-container *ngTemplateOutlet=\"tabActivateService.activeTemplate\"></ng-container>\n</div>\n","styles":[""]}]}],"members":{"tabs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":23,"character":3},"arguments":[{"__symbolic":"reference","name":"TabComponent"},{"descendants":false}]}]}],"tabIdDefault":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3},"arguments":["tabIdDefault"]}]}],"changeTab":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":32,"character":3},"arguments":["changeTab"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵa"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":10,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"setTabActive":[{"__symbolic":"method"}],"addTab":[{"__symbolic":"method"}]}}},"origins":{"OmisellTabsetModule":"./omisell-tabset.module","TabComponent":"./tab/tab.component","TabContentDirective":"./tab/tab.component","TabsetComponent":"./tabset/tabset.component","ɵa":"./tab-activate.service"},"importAs":"@boxmeglobal/omisell-ui-lib/omisell-tabset"}

omisell-tabset/tabset/tabset.component.d.ts

@@ -1,7 +0,12 @@
-import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { AfterContentInit, EventEmitter, OnDestroy, OnInit, QueryList } from '@angular/core';
 import { TabActivateService, TabID } from '../tab-activate.service';
 import { Subject } from 'rxjs';
-export declare class TabsetComponent implements OnInit, OnDestroy {
+import { TabComponent } from '../tab/tab.component';
+export declare class TabsetComponent implements OnInit, OnDestroy, AfterContentInit {
     tabActivateService: TabActivateService;
     destroy$: Subject<void>;
+    tabs: QueryList<TabComponent>;
+    /**
+     * TabId default. If not specify, it will use first tab
+     */
     tabIdDefault: TabID;
@@ -11,3 +16,4 @@ changeTab: EventEmitter<any>;
     ngOnInit(): void;
+    ngAfterContentInit(): void;
     ngOnDestroy(): void;
 }

package.json

 {
   "name": "@boxmeglobal/omisell-ui-lib",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "author": {
@@ -5,0 +5,0 @@ "name": "Hung Cung"

README.md

@@ -54,3 +54,4 @@ # Omisell UI Library
     |-----------|------|---------|
-    | tabID | number | Id của tab. Là giá trị định danh duy nhất|
+    | tabID | `number` or `string` | Id của tab. Là giá trị định danh duy nhất|
+    | tabIdDefault | `number` or `string` | Id của tab mặc định. Nếu không chọn thì sẽ tự động chọn tab đầu tiên|
     | title | string | Tên của tab|
@@ -62,4 +63,4 @@
 ```html
-<omisell-tabset (changeTab)="changeTab($event)>
-    <omisell-tab [tabID]="1" title="{{ 'Staff' | translate}}">
+<omisell-tabset (changeTab)="changeTab($event)" tabIdDefault="staff">
+    <omisell-tab [tabID]="1" title="staff">
         <ng-template omisell-tabcontent>
@@ -69,3 +70,3 @@ <h1>Nội dung thứ nhất</h1>
     </omisell-tab>
-    <omisell-tab [tabID]="2" title="{{ 'Pending Invitation' | translate}}">
+    <omisell-tab [tabID]="2" title="19001010">
         <ng-template omisell-tabcontent>
@@ -72,0 +73,0 @@ <h1>Nội dung thứ hai</h1>

No alert changes

Improved metrics

Total package byte prevSize

426696

increased by3.87%

Lines of code

4137

increased by4.26%

Number of lines in readme file

146

increased by0.69%

No dependency changes