feat(package): added mat-pass-toggle-visibility component #153

Author: AnthonyNahas

src/module/component/mat-pass-toggle-visibility/mat-pass-toggle-visibility.component.html

@@ -0,0 +1,6 @@
+<button (click)="isVisible = !isVisible" class="mat-icon-button cdk-focused cdk-mouse-focused" mat-icon-button matRipple
+        matRippleCentered="true"
+        matSuffix>
+  <mat-icon>{{isVisible ? 'visibility' : 'visibility_off' }}</mat-icon>
+</button>
+

src/module/component/mat-pass-toggle-visibility/mat-pass-toggle-visibility.component.scss

@@ -0,0 +1,27 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {MatPassToggleVisibilityComponent} from './mat-pass-toggle-visibility.component';
+import {MatButtonModule, MatIconModule} from '@angular/material';
+
+describe('MatPassToggleVisibilityComponent', () => {
+  let component: MatPassToggleVisibilityComponent;
+  let fixture: ComponentFixture<MatPassToggleVisibilityComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MatIconModule, MatButtonModule],
+      declarations: [MatPassToggleVisibilityComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MatPassToggleVisibilityComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/module/component/mat-pass-toggle-visibility/mat-pass-toggle-visibility.component.spec.ts

@@ -0,0 +1,20 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+
+type Type = 'text' | 'password' ;
+
+@Component({
+  selector: 'mat-pass-toggle-visibility',
+  templateUrl: './mat-pass-toggle-visibility.component.html',
+  styleUrls: ['./mat-pass-toggle-visibility.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class MatPassToggleVisibilityComponent {
+
+  isVisible: boolean;
+  _type: Type = 'text';
+
+  get type() {
+    return this.isVisible ? 'text' : 'password';
+  }
+
+}

src/module/component/mat-pass-toggle-visibility/mat-pass-toggle-visibility.component.ts

@@ -1,27 +1,38 @@
 import {CommonModule} from '@angular/common';
-import {NgModule, ModuleWithProviders} from '@angular/core';
-import {MatCardModule, MatIconModule, MatProgressBarModule} from '@angular/material';
+import {ModuleWithProviders, NgModule} from '@angular/core';
+import {MatCardModule, MatIconModule, MatInputModule, MatProgressBarModule, MatRippleModule} from '@angular/material';
 
 import {MatPasswordStrengthComponent} from './component/mat-password-strength/mat-password-strength.component';
-import {
-  MatPasswordStrengthInfoComponent
-} from './component/mat-password-strength-info/mat-password-strength-info.component';
+import {MatPasswordStrengthInfoComponent} from './component/mat-password-strength-info/mat-password-strength-info.component';
+import {MatPassToggleVisibilityComponent} from './component/mat-pass-toggle-visibility/mat-pass-toggle-visibility.component';
 
 // Export module's public API
 export {MatPasswordStrengthComponent} from './component/mat-password-strength/mat-password-strength.component';
 export {
   MatPasswordStrengthInfoComponent
 } from './component/mat-password-strength-info/mat-password-strength-info.component';
+export {MatPassToggleVisibilityComponent} from './component/mat-pass-toggle-visibility/mat-pass-toggle-visibility.component';
 
 @NgModule({
   imports: [
     CommonModule,
     MatProgressBarModule,
     MatCardModule,
-    MatIconModule
+    MatIconModule,
+    MatInputModule,
+    MatRippleModule
+  ],
+  exports: [
+    MatPasswordStrengthComponent,
+    MatPasswordStrengthInfoComponent,
+    MatPassToggleVisibilityComponent
+  ],
+  declarations: [
+    MatPasswordStrengthComponent,
+    MatPasswordStrengthInfoComponent,
+    MatPassToggleVisibilityComponent
   ],
-  exports: [MatPasswordStrengthComponent, MatPasswordStrengthInfoComponent],
-  declarations: [MatPasswordStrengthComponent, MatPasswordStrengthInfoComponent]
+  entryComponents: [MatPassToggleVisibilityComponent]
 })
 export class MatPasswordStrengthModule {
   static forRoot(): ModuleWithProviders {