diff --git a/projects/bulma-app/src/app/app.module.ts b/projects/bulma-app/src/app/app.module.ts index f391e131..0ae73c5c 100644 --- a/projects/bulma-app/src/app/app.module.ts +++ b/projects/bulma-app/src/app/app.module.ts @@ -18,6 +18,7 @@ import { ModelComponent } from './model/model.component'; import { IntroductionComponent } from './introduction/introduction.component'; import { GettingstartedComponent } from './gettingstarted/gettingstarted.component'; import { PanelComponent } from './panel/panel.component'; +import { TabComponent } from './tab/tab.component'; @NgModule({ @@ -31,7 +32,8 @@ import { PanelComponent } from './panel/panel.component'; ModelComponent, IntroductionComponent, GettingstartedComponent, - PanelComponent + PanelComponent, + TabComponent ], imports: [ BrowserModule, diff --git a/projects/bulma-app/src/app/tab/tab.component.css b/projects/bulma-app/src/app/tab/tab.component.css new file mode 100644 index 00000000..e69de29b diff --git a/projects/bulma-app/src/app/tab/tab.component.html b/projects/bulma-app/src/app/tab/tab.component.html new file mode 100644 index 00000000..f85f9a28 --- /dev/null +++ b/projects/bulma-app/src/app/tab/tab.component.html @@ -0,0 +1,6 @@ + + + + + + diff --git a/projects/bulma-app/src/app/tab/tab.component.spec.ts b/projects/bulma-app/src/app/tab/tab.component.spec.ts new file mode 100644 index 00000000..6c3b6236 --- /dev/null +++ b/projects/bulma-app/src/app/tab/tab.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TabComponent } from './tab.component'; + +describe('TabComponent', () => { + let component: TabComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TabComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TabComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/bulma-app/src/app/tab/tab.component.ts b/projects/bulma-app/src/app/tab/tab.component.ts new file mode 100644 index 00000000..ea061f97 --- /dev/null +++ b/projects/bulma-app/src/app/tab/tab.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-tab', + templateUrl: './tab.component.html', + styleUrls: ['./tab.component.css'] +}) +export class TabComponent { } diff --git a/projects/ngx-bulma/src/lib/tabs/index.ts b/projects/ngx-bulma/src/lib/tabs/index.ts index 8f667fb9..1a04452f 100644 --- a/projects/ngx-bulma/src/lib/tabs/index.ts +++ b/projects/ngx-bulma/src/lib/tabs/index.ts @@ -1,2 +1,3 @@ export * from './tabs.component'; +export * from './tab-item/tab-item.component'; export * from './tabs.module'; diff --git a/projects/ngx-bulma/src/lib/tabs/tab-item/tab-item.component.css b/projects/ngx-bulma/src/lib/tabs/tab-item/tab-item.component.css new file mode 100644 index 00000000..e69de29b diff --git a/projects/ngx-bulma/src/lib/tabs/tab-item/tab-item.component.html b/projects/ngx-bulma/src/lib/tabs/tab-item/tab-item.component.html new file mode 100644 index 00000000..316dc7b0 --- /dev/null +++ b/projects/ngx-bulma/src/lib/tabs/tab-item/tab-item.component.html @@ -0,0 +1,6 @@ +
  • + + {{title}} + +
    • diff --git a/projects/ngx-bulma/src/lib/tabs/tab-item/tab-item.component.spec.ts b/projects/ngx-bulma/src/lib/tabs/tab-item/tab-item.component.spec.ts new file mode 100644 index 00000000..930b3c73 --- /dev/null +++ b/projects/ngx-bulma/src/lib/tabs/tab-item/tab-item.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TabItemComponent } from './tab-item.component'; + +describe('TabItemComponent', () => { + let component: TabItemComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TabItemComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TabItemComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ngx-bulma/src/lib/tabs/tab-item/tab-item.component.ts b/projects/ngx-bulma/src/lib/tabs/tab-item/tab-item.component.ts new file mode 100644 index 00000000..15f7ceab --- /dev/null +++ b/projects/ngx-bulma/src/lib/tabs/tab-item/tab-item.component.ts @@ -0,0 +1,38 @@ +import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ChangeDetectorRef, AfterContentChecked } from '@angular/core'; +import { TabsService } from '../tabs.service'; + +@Component({ + selector: 'bu-tab-item', + templateUrl: './tab-item.component.html', + styleUrls: ['./tab-item.component.css'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class TabItemComponent implements AfterContentChecked { + + @Input() title: string; + public id = `bu-tab-item-${this.tabsService.getid()}`; + public selectedId: number; + + constructor(private tabsService: TabsService, private ref: ChangeDetectorRef) { + this.tabsService.selectedId.subscribe(data => { + this.selectedId = data; + }); + } + + select(event, id) { + event.preventDefault(); + const idSeparated = id.split('-'); + this.tabsService.setSelectedId(this.getSelectedId(idSeparated)); + } + + getSelectedId(idSeparated) { + return idSeparated[idSeparated.length - 1]; + } + + ngAfterContentChecked() { + this.ref.detectChanges(); + } + +} diff --git a/projects/ngx-bulma/src/lib/tabs/tabs.component.html b/projects/ngx-bulma/src/lib/tabs/tabs.component.html index 867a5831..8aae2290 100644 --- a/projects/ngx-bulma/src/lib/tabs/tabs.component.html +++ b/projects/ngx-bulma/src/lib/tabs/tabs.component.html @@ -1 +1,5 @@ -

    bulma-tabs works!

    +
    +
      + +
    +
    diff --git a/projects/ngx-bulma/src/lib/tabs/tabs.component.ts b/projects/ngx-bulma/src/lib/tabs/tabs.component.ts index 91e4a9aa..a563d5c1 100644 --- a/projects/ngx-bulma/src/lib/tabs/tabs.component.ts +++ b/projects/ngx-bulma/src/lib/tabs/tabs.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ViewEncapsulation, ChangeDetectionStrategy, ContentChildren, QueryList } from '@angular/core'; @Component({ selector: 'bu-tabs', @@ -7,11 +7,5 @@ import { Component, OnInit, ViewEncapsulation, ChangeDetectionStrategy } from '@ encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }) -export class BulmaTabsComponent implements OnInit { - - constructor() { } - - ngOnInit() { - } - +export class BulmaTabsComponent { } diff --git a/projects/ngx-bulma/src/lib/tabs/tabs.module.ts b/projects/ngx-bulma/src/lib/tabs/tabs.module.ts index 6f3d7caa..0b528514 100644 --- a/projects/ngx-bulma/src/lib/tabs/tabs.module.ts +++ b/projects/ngx-bulma/src/lib/tabs/tabs.module.ts @@ -1,14 +1,15 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { BulmaTabsComponent } from './tabs.component'; - - +import { TabItemComponent } from './tab-item/tab-item.component'; +import { TabsService } from './tabs.service'; @NgModule({ - declarations: [BulmaTabsComponent], + declarations: [BulmaTabsComponent, TabItemComponent], imports: [ CommonModule ], - exports: [BulmaTabsComponent] + exports: [BulmaTabsComponent, TabItemComponent], + providers: [TabsService] }) export class BulmaTabsModule { } diff --git a/projects/ngx-bulma/src/lib/tabs/tabs.service.spec.ts b/projects/ngx-bulma/src/lib/tabs/tabs.service.spec.ts new file mode 100644 index 00000000..87b1c4e8 --- /dev/null +++ b/projects/ngx-bulma/src/lib/tabs/tabs.service.spec.ts @@ -0,0 +1,12 @@ +import { TestBed } from '@angular/core/testing'; + +import { TabsService } from './tabs.service'; + +describe('TabsService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: TabsService = TestBed.get(TabsService); + expect(service).toBeTruthy(); + }); +}); diff --git a/projects/ngx-bulma/src/lib/tabs/tabs.service.ts b/projects/ngx-bulma/src/lib/tabs/tabs.service.ts new file mode 100644 index 00000000..75db3963 --- /dev/null +++ b/projects/ngx-bulma/src/lib/tabs/tabs.service.ts @@ -0,0 +1,19 @@ +import { Injectable } from '@angular/core'; +import { BehaviorSubject } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class TabsService { + public nextid = 1; + public selectedId = new BehaviorSubject(null); + constructor() { } + + getid() { + return this.nextid++; + } + + setSelectedId(id) { + this.selectedId.next(id); + } +}