feature/html strict templates client tooling

clients/html/angular.json

@@ -20,7 +20,10 @@
             "outputPath": "dist/quoting-tool",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": ["zone.js", "@angular/localize/init"],
+            "polyfills": [
+              "zone.js",
+              "@angular/localize/init"
+            ],
             "tsConfig": "src/tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
@@ -70,20 +73,8 @@
               },
               "fileReplacements": [
                 {
-                  "replace": "src/data/zipCode.json",
-                  "with": "src/data/zipCodeME.json"
-                },
-                {
-                  "replace": "src/assets/images/mhc_logo.svg",
-                  "with": "src/assets/images/logo_me.svg"
-                },
-                {
-                  "replace": "src/assets/favicon.png",
-                  "with": "src/assets/favicon_me.png"
-                },
-                {
-                  "replace": "src/assets/roster_upload_template.xlsx",
-                  "with": "src/assets/roster_upload_template_me.xlsx"
+                  "replace": "src/app/brand.config.ts",
+                  "with": "src/app/brand.config.me.ts"
                 }
               ]
             },
@@ -114,20 +105,8 @@
                   "with": "src/environments/environment.prod.ts"
                 },
                 {
-                  "replace": "src/data/zipCode.json",
-                  "with": "src/data/zipCodeME.json"
-                },
-                {
-                  "replace": "src/assets/images/mhc_logo.svg",
-                  "with": "src/assets/images/logo_me.svg"
-                },
-                {
-                  "replace": "src/assets/favicon.png",
-                  "with": "src/assets/favicon_me.png"
-                },
-                {
-                  "replace": "src/assets/roster_upload_template.xlsx",
-                  "with": "src/assets/roster_upload_template_me.xlsx"
+                  "replace": "src/app/brand.config.ts",
+                  "with": "src/app/brand.config.me.ts"
                 }
               ],
               "optimization": true,
@@ -152,7 +131,7 @@
                 },
                 {
                   "replace": "src/app/brand.config.ts",
-                  "with": "src/app/brand.config.me.ts"
+                  "with": "src/app/brand.config.dc.ts"
                 }
               ],
               "optimization": true,
@@ -199,7 +178,10 @@
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "main": "src/test.ts",
-            "polyfills": ["zone.js", "zone.js/testing"],
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": [
@@ -239,5 +221,5 @@
   },
   "cli": {
     "analytics": false
-  },
-}
+  }
+}

clients/html/browserslist

@@ -1,9 +1,11 @@
-# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
-# For additional information regarding the format and rule options, please see:
+# Used by Autoprefixer and the Angular CLI.
+# Every `not …` rule must come AFTER at least one positive include (e.g. `> 0.5%` or `defaults`).
+# A file that is only `not IE 11` will fail with:
+#   "Write any browsers query (for instance, `defaults`) before `not IE 11`"
 # https://github.com/browserslist/browserslist#queries
-# For IE 9-11 support, please uncomment the last line of the file and adjust as needed
+
 > 0.5%
 last 2 versions
-Firefox ESR
 not dead
-IE 9-11
+not kaios > 0
+not op_mini all

clients/html/package.json

@@ -53,7 +53,6 @@
     "zone.js": "~0.14.0"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "21.0.3",
     "@angular-devkit/build-angular": "^18.0.0",
     "@angular/cli": "^18.0.0",
     "@angular/compiler-cli": "^18.0.0",

clients/html/scripts/patch-bootstrap.js

@@ -1,9 +1,12 @@
 #!/usr/bin/env node
 /**
- * Patches Bootstrap 5's _root.scss to silence Sass color-in-interpolation warnings.
- * Bootstrap uses #{$value} where $value can be a named color (teal, blue, etc.),
- * which triggers warnings in Dart Sass 1.77+. Changing to #{"" + $value} forces
- * string coercion and eliminates the warnings.
+ * Patches Bootstrap 5's _root.scss for Dart Sass 1.77+.
+ *
+ * 1) `#{"" + $color}` — map keys like "blue" / "aqua" are color values; string coercion in
+ *    `--#{$prefix}…#{$color}…` fixes "You probably don't mean to use the color value … in
+ *    interpolation" on the *key* side.
+ * 2) `#{"" + $value}` — same for *values* in the @each $color, $value loops (only lines that
+ *    still use `: #{$value};` after step 1), without matching across unrelated blocks.
  */
 const fs = require('fs');
 const path = require('path');
@@ -16,18 +19,24 @@ if (!fs.existsSync(file)) {
 }
 
 let content = fs.readFileSync(file, 'utf8');
-
-// Only patch the $colors and $theme-colors loops (not $grays which uses numeric keys)
-// Replace #{$value} with #{"" + $value} only in @each $color, $value loops
 const original = content;
+
+content = content.replaceAll('#{$prefix}#{$color}', '#{$prefix}#{"" + $color}');
+content = content.replaceAll('#{$prefix}gray-#{$color}', '#{$prefix}gray-#{"" + $color}');
+
+// Only @each lines that build a --var from $color and assign from $value (not to-rgb(), etc.)
+content = content.replace(
+  /(#\{\$prefix\}#\{"" \+ \$color\}(?:-rgb|-text-emphasis|-bg-subtle|-border-subtle)?)\s*:\s*#\{\$value\}\s*;/g,
+  '$1: #{"" + $value};'
+);
 content = content.replace(
-  /(@each \$color, \$value in \$(?:colors|theme-colors) \{[\s\S]*?)#\{\$value\}/g,
-  (match, prefix) => prefix + '#{"" + $value}'
+  /(#\{\$prefix\}gray-#\{"" \+ \$color\})\s*:\s*#\{\$value\}\s*;/g,
+  '$1: #{"" + $value};'
 );
 
 if (content === original) {
   console.log('Bootstrap _root.scss already patched or pattern not found.');
 } else {
   fs.writeFileSync(file, content);
-  console.log('Patched bootstrap/scss/_root.scss to silence Sass color interpolation warnings.');
+  console.log('Patched bootstrap/scss/_root.scss to silence Sass interpolation warnings.');
 }

clients/html/src/app/dropdown-treeview-select/dropdown-treeview-select.component.ts

@@ -11,6 +11,7 @@ import sicCodes from '../../data/sicCodes.json';
 export class DropdownTreeviewSelectComponent implements OnInit {
   items: TreeviewItem[];
   sicCodes = sicCodes;
+  filterText = '';
 
   config = TreeviewConfig.create({
     hasFilter: true,

clients/html/src/app/employer-details/employer-details.component.html

@@ -22,7 +22,7 @@ <h2 class="heading-text">Employer Information</h2>
               id="inlineFormCustomSelect"
               formControlName="effectiveDate"
               id="effectiveDate"
-              (change)="updateEffectiveDate($event.target.value)"
+              (change)="onEffectiveDateChange($event)"
             >
               <option selected>SELECT DATE</option>
               <option
@@ -71,7 +71,7 @@ <h2 class="heading-text">Employer Information</h2>
               formControlName="zip"
               id="zip"
               name="zip"
-              debounceTime="800"
+              [debounceTime]="800"
               [data]="zipcodes"
               [searchKeyword]="zipKeyword"
               (selected)="selectEvent($event)"
@@ -244,7 +244,7 @@ <h2 class="heading-text">Employee Roster</h2>
                 </div>
                 <div class="pl-2" formArrayName="dependents">
                   <div
-                    *ngFor="let dependent of editEmployeeForm.get('dependents')?.controls; let j = index"
+                    *ngFor="let dependent of editDependentsFormArray.controls; let j = index"
                     [@fadeInOut]
                   >
                     <fieldset class="dependent">
@@ -383,7 +383,7 @@ <h6 class="sub-heading-text">Dependent {{ j + 1 }}</h6>
                 </div>
                 <div class="pl-2" formArrayName="dependents">
                   <div
-                    *ngFor="let dependent of addNewEmployeeForm.get('dependents')?.controls; let j = index"
+                    *ngFor="let dependent of addNewDependentsFormArray.controls; let j = index"
                     [@fadeInOut]
                   >
                     <fieldset class="dependent">
@@ -466,7 +466,7 @@ <h6 class="sub-heading-text">Dependent {{ j + 1 }}</h6>
                     class="float-right btn btn-primary"
                     type="button"
                     [disabled]="!addNewEmployeeForm.valid"
-                    (click)="saveNewEmployee(i)"
+                    (click)="saveNewEmployee()"
                   >
                     Save Employee
                   </button>
@@ -482,7 +482,7 @@ <h6 class="sub-heading-text">Dependent {{ j + 1 }}</h6>
         <div formArrayName="employees">
           <!-- Start employee forms array -->
           <div
-            *ngFor="let employee of quoteForm.get('employees')?.controls; let i = index"
+            *ngFor="let employee of employeesFormArray.controls; let i = index"
             [attr.employee-index]="i"
             id="employee-hh-card"
             [@fadeInOut]
@@ -541,7 +541,7 @@ <h5 class="pt-2">Employee {{ i + 1 }}</h5>
                 </div>
                 <div class="pl-2" formArrayName="dependents">
                   <!-- starts depenendts array -->
-                  <div *ngFor="let dependent of employee.get('dependents').controls; let j = index" [@fadeInOut]>
+                  <div *ngFor="let dependent of dependentsArray(employee).controls; let j = index" [@fadeInOut]>
                     <fieldset class="dependent">
                       <legend>
                         <h6 class="sub-heading-text">Dependent {{ j + 1 }}</h6>
@@ -599,7 +599,7 @@ <h6 class="sub-heading-text">Dependent {{ j + 1 }}</h6>
                           </div>
                         </div>
                         <div class="col-1 pt-4">
-                          <i class="fas fa-trash fa-2x" (click)="deleteDependent(employee.controls.dependents, j)"></i>
+                          <i class="fas fa-trash fa-2x" (click)="deleteDependent(dependentsArray(employee), j)"></i>
                         </div>
                       </div>
                       <!-- ends dependents row -->
@@ -611,7 +611,7 @@ <h6 class="sub-heading-text">Dependent {{ j + 1 }}</h6>
                   <button
                     type="button"
                     class="btn btn-link float-right"
-                    (click)="addDependent(employee.controls.dependents)"
+                    (click)="addDependent(dependentsArray(employee))"
                   >
                     <i class="fas fa-users"></i> Add Dependent
                   </button>

clients/html/src/app/employer-details/employer-details.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ElementRef, ViewChild, HostListener } from '@angular/core';
-import { FormBuilder, Validators, FormArray, FormGroup } from '@angular/forms';
+import { FormBuilder, Validators, FormArray, FormGroup, AbstractControl } from '@angular/forms';
 import { trigger, state, style, animate, transition } from '@angular/animations';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { NgbDateStruct, NgbDatepickerConfig } from '@ng-bootstrap/ng-bootstrap';
@@ -86,6 +86,22 @@ export class EmployerDetailsComponent implements OnInit {
     decoupleChildFromParent: true
   };
 
+  get employeesFormArray(): FormArray {
+    return this.quoteForm.get('employees') as FormArray;
+  }
+
+  get editDependentsFormArray(): FormArray {
+    return this.editEmployeeForm.get('dependents') as FormArray;
+  }
+
+  get addNewDependentsFormArray(): FormArray {
+    return this.addNewEmployeeForm.get('dependents') as FormArray;
+  }
+
+  dependentsArray(employee: AbstractControl): FormArray {
+    return (employee as FormGroup).get('dependents') as FormArray;
+  }
+
   @ViewChild('file', { static: false }) file: ElementRef;
 
   @HostListener('window:beforeunload', ['$event']) unloadHandler(event: Event) {
@@ -344,12 +360,17 @@ export class EmployerDetailsComponent implements OnInit {
     this.quoteForm.get('county').setValue(this.counties[0].county);
   }
 
-  updateEffectiveDate(event) {
+  updateEffectiveDate(event: string) {
     if (this.showEmployeeRoster) {
       this.updateFormValue(event, 'effectiveDate');
     }
   }
 
+  onEffectiveDateChange(evt: Event): void {
+    const value = (evt.target as HTMLSelectElement).value;
+    this.updateEffectiveDate(value);
+  }
+
   updateSic(event) {
     if (this.showEmployeeRoster) {
       this.updateFormValue(event, 'sic');

clients/html/src/app/nav/nav.component.ts

@@ -6,7 +6,7 @@ import { Component, OnInit, Input } from '@angular/core';
   styleUrls: ['./nav.component.scss']
 })
 export class NavComponent implements OnInit {
-  @Input() validForm: string;
+  @Input() validForm = false;
   @Input() myPath: string;
 
   navLinks = [
@@ -19,7 +19,7 @@ export class NavComponent implements OnInit {
 
   ngOnInit() {}
 
-  isFormValid(name) {
+  isFormValid(name: string): boolean {
     if (name === 'Health') {
       return !this.validForm;
     }
@@ -29,7 +29,7 @@ export class NavComponent implements OnInit {
     }
   }
 
-  isLinkActive(link) {
+  isLinkActive(link: string): boolean {
     if (link === this.myPath) {
       return true;
     } else {

clients/html/src/tsconfig.app.json

@@ -4,6 +4,12 @@
     "outDir": "../out-tsc/app",
     "types": []
   },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
   "files": [
     "main.ts"
   ],

clients/html/tsconfig.json

@@ -14,21 +14,16 @@
     "useDefineForClassFields": false,
     "resolveJsonModule": true,
     "esModuleInterop": true,
-    "typeRoots": [
-      "node_modules/@types"
-    ],
-    "lib": [
-      "ES2022",
-      "dom"
-    ],
+    "typeRoots": ["node_modules/@types"],
+    "lib": ["ES2022", "dom"],
     "strictNullChecks": false,
     "noImplicitAny": false,
     "skipLibCheck": true
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": false,
-    "strictInputAccessModifiers": false,
-    "strictTemplates": false
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
   }
 }