WEB-35 Make htmlhint pass with no warnings (#2311)

.htmlhintrc

@@ -10,8 +10,8 @@
   "title-require": true,
   "tag-self-close": false,
   "head-script-disabled": true,
-  "doctype-html5": true,
+  "DOCTYPE-html5": true,
-  "id-class-value": "dash",
+  "id-class-value": false,
   "style-disabled": true,
   "inline-style-disabled": true,
   "inline-script-disabled": true,

docs/coding-guides/html.md

@@ -8,7 +8,7 @@
 
 ## Coding rules
 
-- Use HTML5 doctype: `<!doctype html>`
+- Use HTML5 DOCTYPE: `<!DOCTYPE html>`
 - Use HTML [semantic elements](https://developer.mozilla.org/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document)
 - Use double quotes `"` around attribute values in tags
 - Use a new line for every block, list, or table element, and indent every such child element

src/app/clients/clients-view/charges/view-charge/view-charge.component.html

@@ -69,7 +69,7 @@
       </div>
     </mat-card-content>
 
-    <div fxLayout="row wrap" class="content" style="padding-top: 10px">
+    <div fxLayout="row wrap" class="content">
       <h1>
         <b> {{ 'labels.heading.Transactions' | translate }} </b>
       </h1>
@@ -110,7 +110,7 @@
         <ng-container matColumnDef="actions">
           <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
           <td mat-cell *matCellDef="let element" [ngClass]="{ strikeoff: element.reversed }">
-            <button mat-raised-button color="primary" (click)="undoTransaction(element.id)" class="delBtn">
+            <button mat-raised-button color="primary" (click)="undoTransaction(element.id)" class="del-btn">
               <fa-icon icon="trash" class="m-r-10"></fa-icon>
             </button>
           </td>

src/app/clients/clients-view/charges/view-charge/view-charge.component.scss

@@ -1,4 +1,4 @@
-.delBtn {
+.del-btn {
   width: 20px !important;
   height: 25px;
   min-width: 20px !important;
@@ -17,3 +17,7 @@
   display: flex;
   justify-content: space-between;
 }
+
+.content {
+  padding-top: 10px;
+}

src/app/clients/clients-view/client-actions/take-survey/take-survey.component.html

@@ -1,7 +1,7 @@
 <div class="container mat-typography">
-  <div class="mat-elevation-z2 surveyCont">
+  <div class="mat-elevation-z2-surveycont">
-    <div class="surveySelect" fxLayout="row">
+    <div class="survey-select" fxLayout="row">
-      <mat-label class="nameLabel">{{ 'labels.inputs.Survey Name' | translate }}</mat-label>
+      <mat-label class="name-label">{{ 'labels.inputs.Survey Name' | translate }}</mat-label>
       <mat-select (selectionChange)="onSurveyChange($event)">
         <mat-option *ngFor="let surveyData of allSurveyData" [value]="surveyData">
           {{ surveyData.name }}
@@ -15,17 +15,16 @@
       <ng-container *ngFor="let component of componentGroups">
         <h2 *ngIf="component[0].componentKey">component[0].componentKey</h2>
 
-        <div fxLayout="column" class="displayQuestions">
+        <div fxLayout="column" class="display-questions">
           <ng-container *ngFor="let question of component">
             <div fxLayout="row" class="question">
-              <mat-label fxFlex="40" class="questionText">{{ question.text }}</mat-label>
+              <mat-label fxFlex="40" class="question-text">{{ question.text }}</mat-label>
 
               <mat-radio-group fxFlex="60" [(ngModel)]="question.answer">
                 <mat-radio-button
                   fxLayout="column"
                   class="radio-button"
                   *ngFor="let options of question.responseDatas"
-                  style="margin-bottom: 5px; align-items: normal; white-space: normal"
                   [value]="options"
                 >
                   <span class="wrap-mat-radio-label">

src/app/clients/clients-view/client-actions/take-survey/take-survey.component.scss

@@ -3,7 +3,7 @@
   padding: 5px;
 }
 
-.displayQuestions {
+.display-questions {
   margin-top: 20px;
 }
 
@@ -15,16 +15,16 @@
   white-space: normal;
 }
 
-.questionText {
+.question-text {
   font-weight: bold;
 }
 
-.surveySelect {
+.survey-select {
   height: 40px;
   margin-bottom: 20px;
 }
 
-.nameLabel {
+.name-label {
   width: 25%;
 }
 
@@ -39,3 +39,9 @@
 .button-submit {
   margin-left: 2%;
 }
+
+.radio-button {
+  margin-bottom: 5px;
+  align-items: normal;
+  white-space: normal;
+}

src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.html

@@ -594,7 +594,7 @@
     <mat-divider fxFlex="98%"></mat-divider>
 
     <div fxFlex="50%">
-      <div fxLayout="column" fxFlex="50%" class="table_name">
+      <div fxLayout="column" fxFlex="50%" class="table-name">
         <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Collaterals Data' | translate }}</h4>
       </div>
 

src/app/organization/fund-mapping/fund-mapping.component.html

@@ -48,7 +48,6 @@
           [min]="minDate"
           [max]="maxDate"
           [matDatepicker]="fromDatePicker"
-          required
           formControlName="loanFromDate"
           required
         />
@@ -67,7 +66,6 @@
           [min]="minDate"
           [max]="maxDate"
           [matDatepicker]="toDatePicker"
-          required
           formControlName="loanToDate"
           required
         />
@@ -99,10 +97,10 @@
           <mat-label>{{ 'labels.inputs.Comparison Condition' | translate }}</mat-label>
           <mat-select required formControlName="outStandingAmountPercentageCondition">
             <mat-option value="between">{{ 'labels.inputs.between' | translate }}</mat-option>
-            <mat-option value="<="><=</mat-option>
+            <mat-option value="<=">&lt;=</mat-option>
-            <mat-option value=">=">>=</mat-option>
+            <mat-option value=">=">&gt;=</mat-option>
-            <mat-option value="<"><</mat-option>
+            <mat-option value="<">&lt;</mat-option>
-            <mat-option value=">">></mat-option>
+            <mat-option value=">">&gt;</mat-option>
             <mat-option value="=">=</mat-option>
           </mat-select>
           <mat-error *ngIf="fundMappingForm.controls.outStandingAmountPercentageCondition.hasError('required')">
@@ -154,10 +152,10 @@
           <mat-label>{{ 'labels.inputs.Comparison Condition' | translate }}</mat-label>
           <mat-select required formControlName="outstandingAmountCondition">
             <mat-option value="between">{{ 'labels.inputs.between' | translate }}</mat-option>
-            <mat-option value="<="><=</mat-option>
+            <mat-option value="<=">&lt;=</mat-option>
-            <mat-option value=">=">>=</mat-option>
+            <mat-option value=">=">&gt;=</mat-option>
-            <mat-option value="<"><</mat-option>
+            <mat-option value="<">&lt;</mat-option>
-            <mat-option value=">">></mat-option>
+            <mat-option value=">">&gt;</mat-option>
             <mat-option value="=">=</mat-option>
           </mat-select>
           <mat-error *ngIf="fundMappingForm.controls.outstandingAmountCondition.hasError('required')">

src/app/products/charges/charges.component.html

@@ -9,11 +9,11 @@
 
 <div class="container">
   <div #filter fxLayout="row" fxLayoutGap="20px">
-    <mat-form-field fxFlex fxFlex="68%">
+    <mat-form-field fxFlex="68%">
       <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
-    <mat-form-field fxFlex fxFlex="28%">
+    <mat-form-field fxFlex="28%">
       <mat-select
         placeholder="{{ 'labels.inputs.Filter' | translate }}"
         (selectionChange)="filterByAppliesTo($event.value)"
@@ -104,7 +104,7 @@
 
 <ng-template #templateButtonCreateCharge let-popover="popover">
   <h2>{{ 'labels.text.Create Charge' | translate }}</h2>
-  <p class="mw300">{{ 'labels.text.Supports Loan charges, Savings & deposits' | translate }}</p>
+  <p class="mw300">{{ 'labels.text.Supports Loan charges, Savings &amp; deposits' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}

src/app/products/charges/edit-charge/edit-charge.component.html

@@ -16,7 +16,7 @@
           </mat-form-field>
         </div>
 
-        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" style="margin-top: 10px">
+        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" class="form-section">
           <mat-form-field fxFlex="48%">
             <mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
             <input matInput required autofocus formControlName="name" />
@@ -192,7 +192,7 @@
           </mat-form-field>
         </div>
 
-        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" style="margin-top: 10px">
+        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" class="form-section">
           <div fxFlex="48%" class="password-never-expires-wrapper">
             <mat-checkbox labelPosition="before" formControlName="active">
               {{ 'labels.status.Active' | translate }}

src/app/products/charges/edit-charge/edit-charge.component.scss

@@ -1,3 +1,7 @@
 .checkbox {
   padding-top: 10px;
 }
+
+.form-section {
+  margin-top: 10px;
+}

src/app/savings/gsim-account/gsim-account.component.html

@@ -1,5 +1,5 @@
 <div class="tab-container mat-typography">
-  <div style="margin-top: 5px">
+  <div class="content-container">
     <h2>{{ 'labels.heading.GSIM Account Overview' | translate }}</h2>
 
     <table mat-table [dataSource]="dataSource">

src/app/savings/gsim-account/gsim-account.component.scss

@@ -6,6 +6,10 @@
     margin: 1% auto;
   }
 
+  .content-container {
+    margin-top: 5px;
+  }
+
   .group-details-container {
     border: 1px solid;
     padding: 1%;

src/app/shared/dropdown/dropdown.component.html

@@ -1,4 +1,4 @@
-<mat-form-field fxFlex fxFlex="28%">
+<mat-form-field fxFlex="28%">
   <mat-label>{{ getLabelText() }}</mat-label>
   <mat-select placeholder="{{ getPlaceHolderText() }}" formControlName="controlSelect">
     <mat-option *ngFor="let option of selectOptions" [value]="option.id">

src/app/shared/keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component.html

@@ -7,16 +7,16 @@
       <div fxFlexFill fxFlex="50%">
         <span fxFlex="50%">
           <span *ngIf="item.ctrlKey">
-            <span class="modifierKey">{{ 'labels.inputs.Ctrl' | translate }}</span> +
+            <span class="modifier-key">{{ 'labels.inputs.Ctrl' | translate }}</span> +
           </span>
           <span *ngIf="item.shiftKey">
-            <span class="modifierKey">{{ 'labels.inputs.Shift' | translate }}</span> +
+            <span class="modifier-key">{{ 'labels.inputs.Shift' | translate }}</span> +
           </span>
           <span *ngIf="item.altKey">
-            <span class="modifierKey">{{ 'labels.inputs.Alt' | translate }}</span> +
+            <span class="modifier-key">{{ 'labels.inputs.Alt' | translate }}</span> +
           </span>
           <span *ngIf="item.key">
-            <span class="modifierKey">{{ item.key }}</span></span
+            <span class="modifier-key">{{ item.key }}</span></span
           >
         </span>
         <span fxFlex="50%">{{ item.title }}</span>

src/app/shared/keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component.scss

@@ -1,4 +1,4 @@
-.modifierKey {
+.modifier-key {
   border: 1px solid #0000004d;
   padding: 0.3rem;
   background: #f8f8f8;

src/app/shared/notifications-tray/notifications-tray.component.html

@@ -13,8 +13,13 @@
 </button>
 
 <mat-menu class="mifosx-notifications-menu" #notificationsMenu="matMenu" [overlapTrigger]="false">
-  <div *ngIf="unreadNotifications.length === 0" fxLayout="column" fxLayoutAlign="center center" style="padding: 16px">
+  <div
-    <mat-icon style="font-size: 24px; opacity: 0.8">
+    *ngIf="unreadNotifications.length === 0"
+    fxLayout="column"
+    fxLayoutAlign="center center"
+    class="no-notifications"
+  >
+    <mat-icon class="no-notifications-icon">
       <span class="material-icons">{{ 'labels.menus.Notifications' | translate }}</span>
     </mat-icon>
     <p>{{ 'labels.text.No notifications' | translate }}</p>

src/app/shared/notifications-tray/notifications-tray.component.scss

@@ -2,6 +2,15 @@
   max-height: 20rem !important;
   width: 12.5rem !important;
 
+  .no-notifications {
+    padding: 16px;
+  }
+
+  .notification-icon {
+    font-size: 24px;
+    opacity: 0.8;
+  }
+
   .mat-menu-content {
     padding: 0 !important;
   }

src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html

@@ -49,7 +49,7 @@
           cdkTextareaAutosize="true"
           cdkAutosizeMaxRows="20"
           cdkAutosizeMinRows="1"
-          style="width: 100%; height: 100%"
+          class="json-textarea"
           [innerHTML]="dataObject.data[0].row[i].value | prettyPrint"
         >
         </textarea>

src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.scss

@@ -33,3 +33,8 @@
   width: 30px;
   height: 30px;
 }
+
+.json-textarea {
+  width: 100%;
+  height: 100%;
+}

src/app/system/manage-surveys/view-survey/view-survey.component.html

@@ -56,11 +56,11 @@
       <mat-divider [inset]="true"></mat-divider>
     </mat-card-header>
     <mat-card-content>
-      <div class="survey_questions" *ngFor="let questionData of surveyData.questionDatas; index as i">
+      <div class="survey-questions" *ngFor="let questionData of surveyData.questionDatas; index as i">
         <mat-card>
           <mat-card-content>
             <div>{{ 'labels.heading.Question' | translate }}: {{ i + 1 }}</div>
-            <div fxLayout="row" id="key_text">
+            <div fxLayout="row" id="key-text">
               <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
                 <b>{{ 'labels.inputs.Key' | translate }}:</b>
               </div>

src/app/system/manage-surveys/view-survey/view-survey.component.scss

@@ -2,11 +2,11 @@
   margin: 5px;
 }
 
-.survey_questions {
+.survey-questions {
   margin-bottom: 10px;
 }
 
-#key_text {
+#key-text {
   margin: 10px;
 }
 

src/app/system/roles-and-permissions/view-role/view-role.component.html

@@ -69,7 +69,7 @@
 <div class="mat-elevation-z8 container">
   <mat-card>
     <ng-container>
-      <div fxLayout="row" class="permissionSelected">
+      <div fxLayout="row" class="permission-selected">
         <div fxFlex="75">
           <h3>
             {{ 'labels.buttons.Permissions' | translate }}: <strong>{{ formatName(previousGrouping) }}</strong>
@@ -83,7 +83,7 @@
           fxLayoutAlign="end"
           fxLayoutGap="5px"
           *ngIf="!isDisabled"
-          class="selectDeselect"
+          class="select-deselect"
         >
           <button mat-raised-button color="primary" (click)="selectAll()">
             {{ 'labels.buttons.Select All' | translate }}
@@ -102,7 +102,7 @@
               *ngFor="let grouping of groupings"
               (click)="showPermissions(grouping)"
             >
-              <span class="groupingName">
+              <span class="grouping-name">
                 {{ formatName(grouping) }}
               </span>
             </mat-list-item>
@@ -111,9 +111,9 @@
 
         <mat-divider [vertical]="true"></mat-divider>
 
-        <div fxFlex="70" fxLayout="column" class="listPermission">
+        <div fxFlex="70" fxLayout="column" class="list-permission">
           <form [formGroup]="formGroup" (submit)="submit()">
-            <div *ngFor="let permission of permissions.permissions" class="displayPermissions">
+            <div *ngFor="let permission of permissions.permissions" class="display-permissions">
               <div formArrayName="roster">
                 <div [formGroupName]="permission.id">
                   <mat-checkbox name="cp" id="{{ permission.code }}" formControlName="selected">

src/app/system/roles-and-permissions/view-role/view-role.component.scss

@@ -1,4 +1,4 @@
-.displayPermissions {
+.display-permissions {
   padding-top: 15px;
 }
 
@@ -18,15 +18,15 @@ mat-list-item {
   background-color: #f2f2f2;
 }
 
-.groupingName {
+.grouping-name {
   padding: 0 10px;
 }
 
-.listPermission {
+.list-permission {
   padding-left: 20px;
 }
 
-.permissionSelected {
+.permission-selected {
   margin-top: 10px;
   height: 40px;
 }

src/index.html

@@ -16,9 +16,9 @@
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Mono:300" rel="stylesheet" />
     <!-- Load environment variables -->
-    <script src="assets/env.js"></script>
   </head>
   <body class="h-full">
+    <script src="assets/env.js"></script>
     <!--[if lt IE 10]>
       <p>
         You are using an <strong>outdated</strong> browser. Please