Merge c2f2618 into 0521bf3

projects/wvr-elements/src/lib/core/component-registry.service.ts

@@ -28,14 +28,15 @@ export class ComponentRegistryService {
   }
 
   getComponentByElement(element: HTMLElement): WvrBaseComponent {
+
     const hasNativeId = element.hasAttribute('wvr-id');
     const htmlID = hasNativeId ? element.getAttribute('wvr-id') : element.getAttribute('id');
 
     if (!htmlID) {
       return;
     }
 
-    const id = parseInt(htmlID.replace(WvrBaseComponent.HTML_ID_BASE, ''), 10);
+    const id = parseInt(htmlID.replace(`${WvrBaseComponent.HTML_ID_BASE}-`, ''), 10);
 
     return this.getComponent(id);
   }

projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.html

@@ -2,4 +2,4 @@
   <div class="jumbotron">
     <h1 class="it-works">{{text}}!!!</h1>
   </div>
-</div>
+</div>

projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.scss

@@ -6,4 +6,8 @@ div.container {
 
 .it-works {
   color: var(--wvr-primary);
-}
+}
+
+:host {
+  font-family: var(--wvr-font-family-sans-serif);
+}

projects/wvr-elements/src/lib/wvr-lib.module.ts

@@ -20,6 +20,8 @@ import { WvrListComponent } from './wvr-list/wvr-list.component';
 import { WvrNavLiComponent } from './wvr-nav-list/wvr-nav-li/wvr-nav-li.component';
 import { WvrNavListComponent } from './wvr-nav-list/wvr-nav-list.component';
 import { WvrTextComponent } from './wvr-text/wvr-text.component';
+import { WvrTabsComponent } from './wvr-tabs/wvr-tabs.component';
+import { WvrTabComponent } from './wvr-tabs/wvr-tab/wvr-tab.component';
 
 /** This property contains a list of components and the selector tags. */
 const elements = [
@@ -34,7 +36,9 @@ const elements = [
   { component: WvrListItemComponent, selector: 'wvr-list-item' },
   { component: WvrNavListComponent, selector: 'wvr-nav-list' },
   { component: WvrNavLiComponent, selector: 'wvr-nav-li' },
-  { component: WvrTextComponent, selector: 'wvr-text' }
+  { component: WvrTextComponent, selector: 'wvr-text' },
+  { component: WvrTabsComponent, selector: 'wvr-tabs' },
+  { component: WvrTabComponent, selector: 'wvr-tab' }
 ];
 
 /** This property contains a list of components classes. */
@@ -50,7 +54,9 @@ const components = [
   WvrItWorksComponent,
   WvrNavListComponent,
   WvrNavLiComponent,
-  WvrTextComponent
+  WvrTextComponent,
+  WvrTabsComponent,
+  WvrTabComponent
 ];
 
 /** The main module for the Weaver Elements library. */

projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.html

@@ -0,0 +1,11 @@
+<li class="nav-item">
+  <a [id]="htmlId" class="nav-link" [ngClass]="{active: active}" href="#" (click)="clickActivation($event)" role="tab" [attr.aria-controls]="parent?.tabContentID">
+    {{tabText}}
+  </a>
+</li>
+
+<template>
+  <div class="tab-content">
+    <ng-content></ng-content>
+  </div>
+</template>

projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.scss

@@ -0,0 +1,5 @@
+@import "../../shared/styles/wvr-variables.scss";
+
+:host {
+  font-family: var(--wvr-font-family-sans-serif);
+}

projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.spec.ts

@@ -0,0 +1,30 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { WvrTabComponent } from './wvr-tab.component';
+
+describe('WvrTabComponent', () => {
+  let component: WvrTabComponent;
+  let fixture: ComponentFixture<WvrTabComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BrowserAnimationsModule],
+      declarations: [WvrTabComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WvrTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component)
+      .toBeTruthy();
+  });
+});

projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.ts

@@ -0,0 +1,58 @@
+import { AfterViewInit, Component, Injector, Input } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
+import { WvrBaseComponent } from '../../shared/wvr-base.component';
+import { WvrTabsComponent } from '../wvr-tabs.component';
+
+@Component({
+  selector: 'wvr-tab-element',
+  templateUrl: './wvr-tab.component.html',
+  styleUrls: ['./wvr-tab.component.scss']
+})
+export class WvrTabComponent extends WvrBaseComponent implements AfterViewInit {
+
+  parent: WvrTabsComponent;
+
+  active = false;
+
+  htmlId = `wvr-tab-link-${this.id}`;
+
+  @Input() tabText = `Tab ${this.id}`;
+
+  constructor(injector: Injector) {
+    super(injector);
+  }
+
+  clickActivation($event: MouseEvent): void {
+    $event.preventDefault();
+    this.activate();
+  }
+
+  activate(): void {
+    this.parent.deactivateTabs();
+    this.active = true;
+    this.parent.activateTab(this);
+  }
+
+  deActivate(): void {
+    this.active = false;
+  }
+
+  ngAfterViewInit(): void {
+    const tabsElements: HTMLElement = (this._eRef.nativeElement as HTMLElement).closest('wvr-tabs');
+    if (tabsElements) {
+      this.parent = this.componentRegistry.getComponentByElement(tabsElements) as WvrTabsComponent;
+      this.parent.addTab(this);
+    } else {
+      console.warn('The wvr-tab component must be contained within a wvr-tabs component.');
+    }
+  }
+
+  getTabContent(): SafeHtml {
+    const elem = (this._eRef.nativeElement as HTMLElement);
+    const contentTemplate = elem.querySelectorAll('template')[0];
+    const safeHtml = this._domSanitizer.bypassSecurityTrustHtml(contentTemplate.querySelectorAll('.tab-content')[0].innerHTML);
+
+    return safeHtml;
+  }
+
+}

projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.html

@@ -0,0 +1,9 @@
+<ul class="nav nav-tabs" role="tablist">
+  <ng-container *ngTemplateOutlet="content"></ng-container>
+</ul>
+
+<tab-content [innerHTML]="activeTabContent" [id]="tabContentID" role="tabpanel" [attr.aria-labelledby]="activeTab?.htmlId"></tab-content>
+
+<ng-template #content>
+  <ng-content select="wvr-tab, wvr-tab-element"></ng-content>
+</ng-template>

projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.scss

@@ -0,0 +1,15 @@
+@import "../shared/styles/wvr-variables.scss";
+
+:host {
+
+  --tab-content-display: block;
+  --tab-content-padding: 25px 0px;
+
+  font-family: var(--wvr-font-family-sans-serif);
+
+  tab-content {
+    display: var(--tab-content-display);
+    padding: var(--tab-content-padding);
+  }
+
+}

projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.spec.ts

@@ -0,0 +1,31 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { WvrTabsComponent } from './wvr-tabs.component';
+
+describe('WvrTabsComponent', () => {
+  let component: WvrTabsComponent;
+  let fixture: ComponentFixture<WvrTabsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BrowserAnimationsModule],
+      declarations: [WvrTabsComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WvrTabsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component)
+      .toBeTruthy();
+  });
+
+});

projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.ts

@@ -0,0 +1,41 @@
+import { Component, Injector } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
+import { WvrBaseComponent } from '../shared/wvr-base.component';
+import { WvrTabComponent } from './wvr-tab/wvr-tab.component';
+
+@Component({
+  selector: 'wvr-tabs-element',
+  templateUrl: './wvr-tabs.component.html',
+  styleUrls: ['./wvr-tabs.component.scss']
+})
+export class WvrTabsComponent extends WvrBaseComponent {
+
+  private tabs = new Array<WvrTabComponent>();
+
+  activeTab: WvrTabComponent;
+
+  tabContentID = `wvr-tab-content-${this.id}`;
+
+  activeTabContent: SafeHtml = 'Tab Content';
+
+  constructor(injector: Injector) {
+    super(injector);
+  }
+
+  addTab(tab: WvrTabComponent): void {
+    if (!this.tabs.length) {
+      tab.activate();
+    }
+    this.tabs.push(tab);
+  }
+
+  activateTab(tab: WvrTabComponent): void {
+    this.activeTab = tab;
+    this.activeTabContent = tab.getTabContent();
+  }
+
+  deactivateTabs(): void {
+    this.tabs.forEach(t => t.deActivate());
+  }
+
+}

projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.ud-examples.html

@@ -0,0 +1,17 @@
+<example name="Weaver Tabs Default">
+  <desciption>
+    The default <code>wvr-tabs</code> component with no customizations.
+  </desciption>
+  <snippet>
+    <wvr-tabs>
+      <wvr-tab tab-text="Tab One">
+        <h3><wvr-text value="First Tab Header"></wvr-text></h3>
+        <wvr-text value="My First Tab Content"></wvr-text>
+      </wvr-tab>
+      <wvr-tab tab-text="Tab Two">
+        <h3><wvr-text value="Second Tab Header"></wvr-text></h3>
+        <wvr-text value="My Second Tab Content"></wvr-text>
+      </wvr-tab>
+    </wvr-tabs>
+  </snippet>
+</example>

projects/wvr-elements/src/public-api.ts

@@ -20,4 +20,6 @@ export * from './lib/wvr-list/wvr-list-item/wvr-list-item.component';
 export * from './lib/wvr-lib.module';
 export * from './lib/wvr-nav-list/wvr-nav-li/wvr-nav-li.component';
 export * from './lib/wvr-nav-list/wvr-nav-list.component';
+export * from './lib/wvr-tabs/wvr-tabs.component';
+export * from './lib/wvr-tabs/wvr-tab/wvr-tab.component';
 export * from './lib/wvr-text/wvr-text.component';

src/index.html

@@ -715,6 +715,23 @@ <h4 class="alert-heading">
 
   </div>
 
+  <div class="container index-container">
+
+    <wvr-text value="Tabs" text-decoration="underline"></wvr-text><br /><br />
+
+    <wvr-tabs>
+      <wvr-tab tab-text="Tab One">
+        <h3><wvr-text value="First Tab Header"></wvr-text></h3>
+        <wvr-text value="My First Tab Content"></wvr-text>
+      </wvr-tab>
+      <wvr-tab tab-text="Tab Two">
+        <h3><wvr-text value="Second Tab Header"></wvr-text></h3>
+        <wvr-text value="My Second Tab Content"></wvr-text>
+      </wvr-tab>
+    </wvr-tabs>
+
+  </div>
+
   <wvr-footer hidden-in-mobile="true">
     <wvr-nav-list aligned="CENTER">
       <wvr-nav-li>