fix(package): adjusted the alignment in the info component #158

Author: AnthonyNahas

src/module/component/mat-password-strength-info/mat-password-strength-info.component.html

@@ -9,9 +9,7 @@
       <ng-template #error>
         <mat-icon @negativeState color="warn">error</mat-icon>
       </ng-template>
-      <div>
-        <p>{{lowerCaseCriteriaMsg}}</p>
-      </div>
+      <span>{{lowerCaseCriteriaMsg}}</span>
     </div>
 
     <div class="info-row" @items *ngIf="passwordComponent.enableUpperCaseLetterRule">
@@ -23,9 +21,7 @@
       <ng-template #error>
         <mat-icon @negativeState color="warn">error</mat-icon>
       </ng-template>
-      <div>
-        <p>{{upperCaseCriteriaMsg}}</p>
-      </div>
+      <span>{{upperCaseCriteriaMsg}}</span>
     </div>
 
     <div class="info-row" @items *ngIf="passwordComponent.enableDigitRule">
@@ -37,9 +33,7 @@
       <ng-template #error>
         <mat-icon @negativeState color="warn">error</mat-icon>
       </ng-template>
-      <div>
-        <p>{{digitsCriteriaMsg}}</p>
-      </div>
+      <span>{{digitsCriteriaMsg}}</span>
     </div>
 
     <div class="info-row" @items *ngIf="passwordComponent.enableSpecialCharRule">
@@ -51,9 +45,7 @@
       <ng-template #error>
         <mat-icon @negativeState color="warn">error</mat-icon>
       </ng-template>
-      <div>
-        <p>{{specialCharsCriteriaMsg}}</p>
-      </div>
+      <span>{{specialCharsCriteriaMsg}}</span>
     </div>
 
     <div class="info-row" @items *ngIf="passwordComponent.enableLengthRule">
@@ -65,9 +57,7 @@
       <ng-template #error>
         <mat-icon @negativeState color="warn">error</mat-icon>
       </ng-template>
-      <div>
-        <p>{{minCharsCriteriaMsg}}</p>
-      </div>
+      <span>{{minCharsCriteriaMsg}}</span>
     </div>
 
     <div class="info-row" @items *ngIf="passwordComponent.customValidator">
@@ -79,9 +69,7 @@
       <ng-template #error>
         <mat-icon @negativeState color="warn">error</mat-icon>
       </ng-template>
-      <div>
-        <p>{{customCharsCriteriaMsg}}</p>
-      </div>
+      <span>{{customCharsCriteriaMsg}}</span>
     </div>
 
     <div *ngIf="enableScoreInfo" class="info-row" @items>
@@ -93,9 +81,7 @@
       <ng-template #error>
         <mat-icon @negativeState color="warn">error</mat-icon>
       </ng-template>
-      <div>
-        <p>Password's strength = {{passwordComponent.strength}} %100</p>
-      </div>
+      <span>Password's strength = {{passwordComponent.strength}} %100</span>
     </div>
 
   </mat-card-content>

src/module/component/mat-password-strength-info/mat-password-strength-info.component.scss

@@ -4,7 +4,7 @@ mat-card {
   display: flex;
   place-content: stretch center;
   align-items: stretch;
-  flex: 1 1 0%;
+  flex: 1 1 0;
 
   mat-card-content {
     flex-direction: column;
@@ -22,6 +22,7 @@ mat-card {
       flex-direction: row;
       box-sizing: border-box;
       display: flex;
+      align-items: center;
     }
 
   }