/**
 * A single tab page. It renders the passed template
 * via the @Input properties by using the ngTemplateOutlet
 * and ngTemplateOutletContext directives.
 */

import { Component, Input } from '@angular/core';

export interface TabIcon {
	svg: string;
	ratio: number;
	fill: string;
}

@Component({
  selector: 'my-tab',
  // styles: [
  //   `
  //   .pane{
  //     padding: 1em;
  //   }
  // `
  // ],
  template: `
<!--    [class]="active ? 'uk-active' : ''" [hidden]="!active"-->
<!--    <div  [class]="active ? 'uk-active' : ''" [hidden]="!active">-->
    <div class="pane">
      <ng-content></ng-content>
    </div>
    
<!--    <div [hidden]="!active" class="pane">-->
<!--      <ng-content></ng-content>-->
<!--    </div>-->
  `
})
export class TabComponent {
  @Input('tabTitle') title: string;
  @Input('tabNumber') num: number;
  @Input('customClass') customClass:string = "";
  @Input('tabId') tabId: string;
	@Input('tabIcon') tabIcon: TabIcon;
}