Merge branch 'feature/new-setup' of https://github.com/fivethree-team…

…/component-library into feature/new-setup

# Conflicts:
#	projects/core/src/lib/fivethree.core.module.ts

projects/core/package.json

@@ -5,6 +5,7 @@
     "@angular/animations": "^6.1.9",
     "@angular/common": "^6.1.9",
     "@angular/core": "^6.1.9",
+    "@angular/forms": "^6.1.9",
     "@angular/router": "~6.1.9",
     "@ionic/angular": "4.0.0-beta.12"
   }

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

@@ -1,3 +1,4 @@
+import { FormsModule } from '@angular/forms';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { IonicModule } from '@ionic/angular';
@@ -10,14 +11,17 @@ import { RouterItemComponent } from './router-item/router-item.component';
 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';
 
 @NgModule({
   imports: [
     CommonModule,
+    FormsModule,
     IonicModule
   ],
   declarations: [
     ExpandableComponent,
+    PasswordComponent,
     StepperComponent,
     StepComponent,
     StepHeaderComponent,
@@ -29,6 +33,7 @@ import { CollapsableMenuButtonComponent } from './collapsable-menu/collapsable-m
   ],
   exports: [
     ExpandableComponent,
+    PasswordComponent,
     StepperComponent,
     StepComponent,
     StepHeaderComponent,

projects/core/src/lib/password/README.md

@@ -0,0 +1 @@
+# fiv-password

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

@@ -0,0 +1,5 @@
+<ion-item>
+    <ion-label *ngIf="placeholder" [position]="position">{{ placeholder }}</ion-label>
+    <ion-input [type]="show ? 'text' : 'password'" [(ngModel)]="value" [clearOnEdit]="clearOnEdit"></ion-input>
+    <ion-icon slot="end" [name]="show ? hideIcon : showIcon" (click)="toggleShowPassword()"></ion-icon>
+  </ion-item>

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

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

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

@@ -0,0 +1,76 @@
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR, ControlValueAccessor, Validator, ValidationErrors, AbstractControl, NG_VALIDATORS } from '@angular/forms';
+
+export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => PasswordComponent),
+  multi: true
+};
+
+export const CUSTOM_INPUT_VALIDATOR = {
+  provide: NG_VALIDATORS,
+  useExisting: forwardRef(() => PasswordComponent),
+  multi: true,
+};
+
+@Component({
+  selector: 'fiv-password',
+  templateUrl: './password.component.html',
+  styleUrls: ['./password.component.scss'],
+  providers: [
+    CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR,
+    CUSTOM_INPUT_VALIDATOR
+  ],
+})
+export class PasswordComponent implements ControlValueAccessor, OnInit, Validator {
+
+  @Input() hideIcon = 'eye-off';
+  @Input() placeholder: string;
+  @Input() position: 'floating' | 'inline' | 'fixed' | 'stacked' = 'floating';
+  @Input() show: boolean;
+  @Input() showIcon = 'eye';
+  @Input() clearOnEdit = false;
+
+  private innerValue: any = '';
+  private onTouchedCallback: () => {};
+  private onChangeCallback: (_: any) => {};
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  toggleShowPassword() {
+    this.show = !this.show;
+  }
+
+  get value(): any {
+    return this.innerValue;
+  }
+
+  set value(v: any) {
+    if (v !== this.innerValue) {
+      this.innerValue = v;
+      this.onChangeCallback(v);
+    }
+  }
+
+  writeValue(value: any) {
+    if (value !== this.innerValue) {
+      this.innerValue = value;
+    }
+  }
+
+  registerOnChange(fn: any) {
+    this.onChangeCallback = fn;
+  }
+
+  registerOnTouched(fn: any) {
+    this.onTouchedCallback = fn;
+  }
+
+  validate(control: AbstractControl): ValidationErrors {
+    return null;
+  }
+
+}

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

@@ -42,7 +42,6 @@ export class RouterItemComponent implements OnInit {
   @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;
   }
 
@@ -52,7 +51,6 @@ export class RouterItemComponent implements OnInit {
   }
 
   hasShape(): boolean {
-    console.log(this.shape);
     return this.shape === 'line'
       || this.shape === 'dot';
   }

src/app/app-routing.module.ts

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

src/app/app.component.ts

@@ -15,6 +15,11 @@ export class AppComponent {
       url: '/components',
       icon: 'home'
     },
+    {
+      title: 'Password Item',
+      url: '/password',
+      icon: 'key'
+    },
     {
       title: 'Loading',
       url: '/loading',

src/app/password/password.module.ts

@@ -0,0 +1,29 @@
+import { FivethreeCoreModule } from 'core';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { PasswordPage } from './password.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PasswordPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    FivethreeCoreModule,
+    ReactiveFormsModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [PasswordPage]
+})
+export class PasswordPageModule {}

src/app/password/password.page.html

@@ -0,0 +1,36 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>password</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content padding>
+
+  <ion-item-divider>Default Password</ion-item-divider>
+  <fiv-password></fiv-password>
+
+  <ion-item-divider>Password with placeholder</ion-item-divider>
+  <fiv-password placeholder="Password"></fiv-password>
+
+  <ion-item-divider>Password with placeholder and inline position</ion-item-divider>
+  <fiv-password placeholder="Password" position="inline"></fiv-password>
+
+  <ion-item-divider>Show password</ion-item-divider>
+  <fiv-password [show]="true"></fiv-password>
+
+  <ion-item-divider>Password with any show and hide icons</ion-item-divider>
+  <fiv-password showIcon="ice-cream" hideIcon="leaf"></fiv-password>
+
+  <ion-item-divider>Password in form</ion-item-divider>
+  <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
+    <ion-item>
+      <ion-label position="floating">E-Mail</ion-label>
+      <ion-input formControlName="email" type="text"></ion-input>
+    </ion-item>
+    <fiv-password placeholder="Password" formControlName="password"></fiv-password>
+    <ion-button block color="primary" type="submit" [disabled]="loginForm.invalid">
+      Login
+    </ion-button>
+  </form>
+
+</ion-content>

src/app/password/password.page.spec.ts

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

src/app/password/password.page.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, AbstractControl } from '@angular/forms';
+
+@Component({
+  selector: 'app-password',
+  templateUrl: './password.page.html',
+  styleUrls: ['./password.page.scss'],
+})
+export class PasswordPage implements OnInit {
+
+  loginForm: FormGroup;
+
+  constructor(public formBuilder: FormBuilder) { }
+
+  ngOnInit() {
+    this.setupForm();
+  }
+
+  setupForm() {
+    this.loginForm = this.formBuilder.group({
+      email: ['', [Validators.email, Validators.required]],
+      password: ['', [Validators.minLength(6), Validators.required]],
+    });
+  }
+
+  get email(): AbstractControl {
+    return this.loginForm.get('email');
+  }
+
+  onSubmit() {
+    console.log(this.loginForm.value);
+  }
+
+}