feat(toolbar-search): add toolbar-search component

projects/core/src/lib/fivethree.core.module.ts

@@ -12,6 +12,7 @@ import { CenterDirective } from './center/center.directive';
 import { CollapsableMenuDirective } from './collapsable-menu/collapsable-menu.directive';
 import { CollapsableMenuButtonComponent } from './collapsable-menu/collapsable-menu-button/collapsable-menu-button.component';
 import { PasswordComponent } from './password/password.component';
+import { ToolbarSearchComponent } from './toolbar-search/toolbar-search.component';
 
 @NgModule({
   imports: [
@@ -29,7 +30,8 @@ import { PasswordComponent } from './password/password.component';
     RouterItemComponent,
     CenterDirective,
     CollapsableMenuButtonComponent,
-    CollapsableMenuDirective
+    CollapsableMenuDirective,
+    ToolbarSearchComponent
   ],
   exports: [
     ExpandableComponent,
@@ -41,7 +43,8 @@ import { PasswordComponent } from './password/password.component';
     RouterItemComponent,
     CollapsableMenuDirective,
     CenterDirective,
-    CollapsableMenuButtonComponent
+    CollapsableMenuButtonComponent,
+    ToolbarSearchComponent
   ]
 })
 export class FivethreeCoreModule { }

projects/core/src/lib/password/password.component.ts

@@ -69,6 +69,7 @@ export class PasswordComponent implements ControlValueAccessor, OnInit, Validato
     this.onTouchedCallback = fn;
   }
 
+  // TODO validate password input
   validate(control: AbstractControl): ValidationErrors {
     return null;
   }

projects/core/src/lib/toolbar-search/toolbar-search.component.html

@@ -0,0 +1,21 @@
+<ion-toolbar [color]="color">
+  <ion-buttons slot="start">
+    <ng-content select="[start]"></ng-content>
+
+  </ion-buttons>
+  <ion-title [@titleAnim] *ngIf="titleVisible">{{title}}</ion-title>
+  <ion-input (ionChange)="inputChange.emit($event)" [placeholder]="!titleVisible ? placeholder : ''" autofocus #input class="toolbar-searchbar"
+    [@searchbarAnim] (@searchbarAnim.done)="seachbarAnimDone($event,input)" *ngIf="searching">
+  </ion-input>
+
+  <ion-buttons slot="end">
+    <ion-button [@rotateAnim] (@rotateAnim.done)="searchAnimDone($event)" *ngIf="!searching" (click)="openSearchbar()">
+      <ion-icon name="md-search"></ion-icon>
+    </ion-button>
+    <ion-button [@rotateAnim] (@rotateAnim.done)="closeAnimDone($event)" *ngIf="closeButtonVisible" (click)="closeSearchbar()">
+      <ion-icon name="md-close"></ion-icon>
+    </ion-button>
+    <ng-content select="[end]"></ng-content>
+
+  </ion-buttons>
+</ion-toolbar>

projects/core/src/lib/toolbar-search/toolbar-search.component.scss

@@ -0,0 +1,3 @@
+.toolbar-searchbar{
+    float: right;
+}

projects/core/src/lib/toolbar-search/toolbar-search.component.spec.ts

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

projects/core/src/lib/toolbar-search/toolbar-search.component.ts

@@ -0,0 +1,87 @@
+import { Component, OnInit, Input, EventEmitter, Output, Renderer2 } from '@angular/core';
+import { trigger, transition, style, animate, state } from '@angular/animations';
+
+@Component({
+  selector: 'fiv-toolbar-search',
+  templateUrl: './toolbar-search.component.html',
+  styleUrls: ['./toolbar-search.component.scss'],
+  animations: [
+    trigger('searchbarAnim', [
+      transition('void => *', [
+        style({ width: '0px' }),
+        animate('175ms ease-out', style({ width: '100%' }))
+      ]),
+      transition('* => void', [
+        style({ width: '100%' }),
+        animate('125ms ease-in', style({ width: '0px', opacity: 0 }))
+      ])
+    ]),
+    trigger('rotateAnim', [
+      transition('void => *', [
+        style({ opacity: '0' }),
+        animate('175ms ease-out', style({ opacity: '1', transform: 'rotateZ(0deg)' }))
+      ]),
+      transition('* => void', [
+        animate('175ms ease-in', style({ opacity: '0', transform: 'rotateZ(45deg)' }))
+      ]),
+    ]),
+    trigger('titleAnim', [
+      transition('void => *', [
+        style({ opacity: '0', transform: 'translateY(-20%)' }),
+        animate('175ms ease-out', style({ opacity: '1', transform: 'translateY(0)' }))
+      ]),
+    ]),
+  ]
+})
+export class ToolbarSearchComponent implements OnInit {
+
+  searching = false;
+  titleVisible = true;
+  closeButtonVisible = false;
+  @Input() title: string;
+  @Input() placeholder: string;
+  @Input() color: string;
+  @Output() inputChange: EventEmitter<any> = new EventEmitter();
+  @Output() close: EventEmitter<any> = new EventEmitter();
+
+  constructor(public renderer: Renderer2) { }
+
+  ngOnInit() {
+  }
+
+  openSearchbar() {
+    this.searching = true;
+    this.titleVisible = false;
+  }
+
+  closeSearchbar() {
+    this.closeButtonVisible = false;
+    this.close.emit();
+
+  }
+
+  searchAnimDone(event) {
+    console.log('###', event);
+    if (event.fromState !== 'void') {
+      this.closeButtonVisible = true;
+    }
+  }
+
+  closeAnimDone(event) {
+    console.log('###', event);
+    if (event.fromState !== 'void') {
+      this.searching = false;
+    }
+  }
+
+  seachbarAnimDone(event, input) {
+    console.log('!!!', event);
+    if (event.fromState !== 'void') {
+      this.titleVisible = true;
+    } else {
+      input.focus();
+    }
+  }
+
+
+}

src/app/app-routing.module.ts

@@ -12,7 +12,8 @@ const routes: Routes = [
     loadChildren: './components/components.module#ComponentsPageModule'
   },
   { path: 'loading', loadChildren: './loading/loading.module#LoadingPageModule' },
-  { path: 'password', loadChildren: './password/password.module#PasswordPageModule' }
+  { path: 'password', loadChildren: './password/password.module#PasswordPageModule' },
+  { path: 'toolbar-search', loadChildren: './toolbar-search/toolbar-search.module#ToolbarSearchPageModule' }
 ];
 
 @NgModule({

src/app/app.component.ts

@@ -20,6 +20,11 @@ export class AppComponent {
       url: '/password',
       icon: 'key'
     },
+    {
+      title: 'Toolbar Search',
+      url: '/toolbar-search',
+      icon: 'search'
+    },
     {
       title: 'Loading',
       url: '/loading',

src/app/toolbar-search/toolbar-search.module.ts

@@ -0,0 +1,28 @@
+import { FivethreeCoreModule } from './../../../projects/core/src/lib/fivethree.core.module';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ToolbarSearchPage } from './toolbar-search.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ToolbarSearchPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    FivethreeCoreModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [ToolbarSearchPage]
+})
+export class ToolbarSearchPageModule {}

src/app/toolbar-search/toolbar-search.page.html

@@ -0,0 +1,10 @@
+<ion-header>
+  <fiv-toolbar-search title="Toolbar Search" placeholder="Search ...." (inputChange)="onSearchInputChanged($event)" (close)="closeSearch()"></fiv-toolbar-search>
+</ion-header>
+
+<ion-content padding>
+
+  <ion-item-divider>Search Input</ion-item-divider>
+  <ion-label>{{searchInput}}</ion-label>
+
+</ion-content>

src/app/toolbar-search/toolbar-search.page.spec.ts

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

src/app/toolbar-search/toolbar-search.page.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-toolbar-search',
+  templateUrl: './toolbar-search.page.html',
+  styleUrls: ['./toolbar-search.page.scss'],
+})
+export class ToolbarSearchPage implements OnInit {
+
+  searchInput: string;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  onSearchInputChanged(event) {
+    this.searchInput = event.detail.value;
+    console.log(event.detail.value);
+  }
+
+  closeSearch() {
+    this.searchInput = '';
+  }
+
+}