bia-framework/components/core-tabs/core-tabs.component.ts

Bia Framework to work with angular 2

import {
    Input,
    Output,
    OnInit,
    EventEmitter,
    AfterContentInit,
    Component,
    ViewEncapsulation,
    Host,
    ViewContainerRef,
    ViewChild,
    ComponentResolver
} from "@angular/core";
import {NgClass, NgFor} from "@angular/common";

import {Observable} from "rxjs/Observable";
import {Observer} from "rxjs/Observer";
import {RippleEffect} from "../ripple-effect/RippleEffect";
import {ICoreDialogArguments} from "../core-dialog/core-dialog.service";
import {CoreIcon} from "../core-icon/core-icon";
import {CoreAnimations} from "../core-animations/CoreAnimations";


declare var System:any;
@Component({
    selector: 'core-tabs',
    encapsulation: ViewEncapsulation.None,
    templateUrl: "node_modules/bia-framework/components/core-tabs/core-tabs.template.html",
    styleUrls: ['node_modules/bia-framework/components/core-tabs/core-tabs.style.css'],
    directives: [NgClass, NgFor, RippleEffect, CoreIcon],
    host: {'class': 'view'}
})
export class CoreTabs implements AfterContentInit
{
    public tabs:Array<CoreTab> = [];
    public IsVisible:boolean = false;

    @Input("is-navegation-full")
    isNavegationFull:boolean;


    private _selectedIndex:number = 0;

    public  get selectedIndex():number
    {
        return this._selectedIndex;
    }

    @Input()
    public set selectedIndex(index:number)
    {
        if (this._selectedIndex != index)
        {
            this._selectedIndex = index;
            this.selectedIndexChange.emit(index);
            this.selectTab(index);
        }

    }

    @Output()
    public selectedIndexChange = new EventEmitter<number>();


    constructor()
    {
        this.tabs = [];
    }

    ngAfterContentInit():any
    {


        return undefined;
    }

    private selectTab = (index:number):void =>
    {
        this.tabs.forEach(item => item.isActive = false);
        this.tabs[index].isActive = true;
    };


    public addTab = (tab:CoreTab):void =>
    {
        this.tabs.push(tab);
    };

    public getColor = (isactive:boolean):string =>
    {
        if (isactive) return "white";
        else return "secondary";
    };

}

@Component({
    selector: 'core-tab',
    encapsulation: ViewEncapsulation.None,
    templateUrl: "node_modules/bia-framework/components/core-tabs/core-tab.template.html",
    //animation
    animations: [CoreAnimations.animationReveal()]
})

export class CoreTab implements OnInit, AfterContentInit
{
    ngAfterContentInit():any
    {
        this.setupDynamicContent().subscribe();
        return undefined;
    }

    @Input()
    icon:string;

    @Input()
    title:string;

    @Input()
    isActive:boolean;

    @ViewChild('dynamic', {read: ViewContainerRef})
    dynamic:ViewContainerRef;

    @Input()
    dynamicContent:ICoreDialogArguments;
    private isContentProcessing:boolean = false;

    constructor(@Host() private tabHost:CoreTabs, private resolver:ComponentResolver)
    {
        tabHost.addTab(this);
    }

    ngOnInit():any
    {
        this.title = this.title || "";
        this.isActive = this.isActive || false;


        return undefined;
    }

    public setupDynamicContent = ():Observable<void> =>
    {
        return Observable.create((observer:Observer<void>) =>
        {

            if (this.dynamicContent == null)
                observer.complete();
            else
            {
                this.isContentProcessing = true;
                System.import(this.dynamicContent.path)
                      .then(c => c[this.dynamicContent.className])
                      .then((result)=>
                      {
                          this.resolver.resolveComponent(result).then(factory =>
                          {
                              this.dynamic.createComponent(factory, 0, this.dynamic.injector);
                              this.isContentProcessing = false;
                          });

                      });
            }


        });

    };


}