feat(router-item): add router-item component

projects/core/src/lib/router-item/README.md

@@ -0,0 +1,9 @@
+# fiv-router-item
+
+Shows an active state based on active page in the angular router.
+
+## CSS Custom Properties
+
+| Name                     | Description                             |
+| ------------------------ | --------------------------------------- |
+| `--background`           | Background of the button                |

projects/core/src/lib/router-item/router-item.component.html

@@ -0,0 +1,3 @@
+<ng-content></ng-content>
+<span *ngIf="hasShape()" [ngClass]="getClasses()" class="indicator"></span>
+<ion-icon *ngIf="!hasShape()" [ngClass]="position" [name]="shape" class="indicator"></ion-icon>

projects/core/src/lib/router-item/router-item.component.scss

@@ -0,0 +1,89 @@
+:host {
+    display: block;
+    position: relative;
+    width: 100%;
+}
+
+:host.active .dot { 
+    display: block;
+}
+
+:host.active .line{
+    background-color: var(--fiv-dot-color, var(--ion-color-primary));
+    display: block;
+}
+
+:host.active.left .line {
+    width: 2px;
+    height: 100%;
+}
+
+:host.active.right .line {
+    width: 2px;
+    height: 100%;}
+
+:host.active.top .line {
+    width: calc(100% - 16px);
+    left: 8px;
+    height: 2px
+}
+
+:host.active.bottom .line{
+    width: calc(100% - 16px);
+    height: 2px;
+    left: 8px;
+}
+
+:host.active.dot.left {
+    padding-left: 24px;
+}
+
+:host.active.dot.right {
+    padding-right: 24px;
+}
+
+.indicator {
+    position: absolute;
+}
+
+// dot
+.dot {
+    width: var(--fiv-dot-width, 8px);
+    height: var(--fiv-dot-heigt, 8px);
+    background-color: var(--fiv-dot-color, var(--ion-color-primary));
+    top: 50%;
+    border-radius: 100%;
+    transform: translateY(-50%);
+    right: 8px;
+    display: none;
+}
+
+.dot.left {
+    left: 8px;
+    right: unset;
+}
+
+.dot.right {
+    right: 8px;
+}
+
+// position
+
+.left {
+    left: 0;
+}
+
+.right {
+    right: 0;
+}
+
+.top {
+    top: 0;
+}
+
+.bottom {
+    bottom: 0;
+}
+
+.outline {
+}

projects/core/src/lib/router-item/router-item.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RouterItemComponent } from './router-item.component';
+
+describe('RouterItemComponent', () => {
+  let component: RouterItemComponent;
+  let fixture: ComponentFixture<RouterItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RouterItemComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RouterItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/core/src/lib/router-item/router-item.component.ts

@@ -0,0 +1,64 @@
+import { Component, OnInit, Input, HostBinding, Host, HostListener } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'fiv-router-item',
+  templateUrl: './router-item.component.html',
+  styleUrls: ['./router-item.component.scss']
+})
+export class RouterItemComponent implements OnInit {
+
+  @Input() active = false;
+
+  @Input() navigate = true;
+
+  @Input() pageUrl: string;
+
+  /**
+   * The position of the active state.
+   * Default value is: `"left"`
+   */
+  @Input() position: 'left' | 'right' | 'bottom' | 'top' | 'outline' = 'left';
+
+  /**
+   * The shape of the active state.
+   * Possible values are: `"line"`, `"dot"` and any ionicon.
+   * Default value is: `"line"`
+   */
+  @Input() shape: 'line' | 'dot' | string = 'line';
+
+  @Input() routeActive = true;
+
+  @HostListener('click') onclick() {
+    if (this.navigate && this.pageUrl) {
+      this.router.navigateByUrl(this.pageUrl);
+    }
+  }
+
+  @HostBinding('class') get classes(): string {
+    return `${this.position} ${this.shape}`;
+  }
+
+  @HostBinding('class.active') get activeClass() {
+    const isActive = (this.routeActive && this.router.url.startsWith(this.pageUrl))
+      || this.active;
+    console.log(isActive, this.active, this.router, this.pageUrl);
+    return isActive;
+  }
+
+  constructor(public router: Router) { }
+
+  ngOnInit() {
+  }
+
+  hasShape(): boolean {
+    console.log(this.shape);
+    return this.shape === 'line'
+      || this.shape === 'dot';
+  }
+
+  getClasses(): string[] {
+    return this.hasShape() ? [this.position, this.shape] : [this.position];
+  }
+
+}