feat(package): added flexlayout pattern to ngx-material-password-strength-info's component

Author: AnthonyNahas

src/module/component/ngx-material-password-strength-info/ngx-material-password-strength-info.component.html

@@ -1,7 +1,7 @@
-<mat-card fxFlex fxLayout="row" fxLayoutAlign="center">
+<mat-card>
   <mat-card-content fxLayout="column" fxLayoutAlign="start">
 
-    <div fxLayout="row" fxLayoutGap="10px">
+    <div class="info-row">
       <div *ngIf="passwordComponent.containAtLeastOneLowerCaseLetter; then done else error">
       </div>
       <ng-template #done>
@@ -15,7 +15,7 @@
       </div>
     </div>
 
-    <div fxLayout="row" fxLayoutGap="10px">
+    <div class="info-row">
       <div *ngIf="passwordComponent.containAtLeastOneUpperCaseLetter; then done else error">
       </div>
       <ng-template #done>
@@ -29,7 +29,7 @@
       </div>
     </div>
 
-    <div fxLayout="row" fxLayoutGap="10px">
+    <div class="info-row">
       <div *ngIf="passwordComponent.containAtLeastOneDigit; then done else error">
       </div>
       <ng-template #done>
@@ -43,7 +43,7 @@
       </div>
     </div>
 
-    <div fxLayout="row" fxLayoutGap="10px">
+    <div class="info-row">
       <div *ngIf="passwordComponent.containAtLeastOneSpecialChar; then done else error">
       </div>
       <ng-template #done>
@@ -57,7 +57,7 @@
       </div>
     </div>
 
-    <div fxLayout="row" fxLayoutGap="10px">
+    <div class="info-row">
       <div *ngIf="passwordComponent.containAtLeastEightChars; then done else error">
       </div>
       <ng-template #done>
@@ -71,7 +71,7 @@
       </div>
     </div>
 
-    <div fxLayout="row" fxLayoutGap="10px">
+    <div class="info-row">
       <div *ngIf="passwordComponent.strength === 100; then done else error">
       </div>
       <ng-template #done>

src/module/component/ngx-material-password-strength-info/ngx-material-password-strength-info.component.scss

@@ -0,0 +1,31 @@
+mat-card {
+  flex-direction: row;
+  box-sizing: border-box;
+  display: flex;
+  place-content: stretch center;
+  align-items: stretch;
+  flex: 1 1 0%;
+
+  mat-card-content {
+    flex-direction: column;
+    box-sizing: border-box;
+    display: flex;
+    max-width: 100%;
+    place-content: stretch flex-start;
+    align-items: stretch;
+
+    mat-icon {
+      margin-right: 10px;
+    }
+
+    .info-row {
+      flex-direction: row;
+      box-sizing: border-box;
+      display: flex;
+    }
+
+  }
+
+}
+
+

src/module/ngx-material-password-strength.module.ts

@@ -1,6 +1,6 @@
 import {CommonModule} from '@angular/common';
 import {NgModule, ModuleWithProviders} from '@angular/core';
-import {MatProgressBarModule} from '@angular/material';
+import {MatCardModule, MatIconModule, MatProgressBarModule} from '@angular/material';
 
 import {PasswordStrengthComponent} from './component/ngx-material-password-strength/password-strength.component';
 import {
@@ -17,7 +17,9 @@ export {
 @NgModule({
   imports: [
     CommonModule,
-    MatProgressBarModule
+    MatProgressBarModule,
+    MatCardModule,
+    MatIconModule
   ],
   exports: [PasswordStrengthComponent, NgxMaterialPasswordStrengthInfoComponent],
   declarations: [PasswordStrengthComponent, NgxMaterialPasswordStrengthInfoComponent]