Angular 19 update

Author: jayhamilton

package-lock.json

@@ -11,12 +11,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^19.0.4",
-    "@angular/cdk": "^18.2.14",
+    "@angular/cdk": "^19.0.3",
     "@angular/common": "^19.0.4",
     "@angular/compiler": "^19.0.4",
     "@angular/core": "^19.0.4",
     "@angular/forms": "^19.0.4",
-    "@angular/material": "^18.2.14",
+    "@angular/material": "^19.0.3",
     "@angular/platform-browser": "^19.0.4",
     "@angular/platform-browser-dynamic": "^19.0.4",
     "@angular/router": "^19.0.4",

package.json

@@ -6,11 +6,11 @@
   <mat-card-title>{{ title }}</mat-card-title>
   <mat-card-subtitle>{{ subtitle }}</mat-card-subtitle>
   <!--<mat-card-subtitle>{{description}}</mat-card-subtitle>-->
-  <mat-chip-list>
-    <mat-chip selected color="accent" *ngIf="inConfig">
-      You are in configuration mode</mat-chip
+  <mat-chip-listbox>
+    <mat-chip-option selected color="accent" *ngIf="inConfig">
+      You are in configuration mode</mat-chip-option
     >
-  </mat-chip-list>
+  </mat-chip-listbox>
   <button
     mat-icon-button
     class="more-button"

src/app/gadgets/common/gadget-common/gadget-header/gadget-header.component.html

@@ -9,9 +9,9 @@
   <mat-card-content *ngIf="!inConfig">
     <mat-form-field appearance="fill">
       <mat-label>Events</mat-label>
-      <mat-chip-list>
-        <mat-chip color="warn" selected *ngFor="let event of getEvents()">{{event.description}} &nbsp;&nbsp; {{event.datetime}}</mat-chip>
-      </mat-chip-list>
+      <mat-chip-listbox>
+        <mat-chip-option color="warn" selected *ngFor="let event of getEvents()">{{event.description}} &nbsp;&nbsp; {{event.datetime}}</mat-chip-option>
+      </mat-chip-listbox>
     </mat-form-field>
   </mat-card-content>
 

src/app/gadgets/events/events.component.html

@@ -6,37 +6,37 @@
   <mat-card-content *ngIf="!inConfig">
         <mat-form-field appearance="fill">
           <mat-label>Line Lead(s)</mat-label>
-          <mat-chip-list>
-            <mat-chip color="accent" selected *ngFor="let lead of lineleads">{{lead}}</mat-chip>
-          </mat-chip-list>
+          <mat-chip-listbox>
+            <mat-chip-option color="accent" selected *ngFor="let lead of lineleads">{{lead}}</mat-chip-option>
+          </mat-chip-listbox>
         </mat-form-field>
 
         <mat-form-field appearance="fill">
           <mat-label>Driver</mat-label>
-          <mat-chip-list>
-            <mat-chip  selected color="primary">{{driver}}</mat-chip>
-          </mat-chip-list>
+          <mat-chip-listbox>
+            <mat-chip-option  selected color="primary">{{driver}}</mat-chip-option>
+          </mat-chip-listbox>
         </mat-form-field>
 
         <mat-form-field class="small-control" appearance="fill">
           <mat-label>Material Handler Qty</mat-label>
-          <mat-chip-list>
-            <mat-chip>{{mcount}}</mat-chip>
-          </mat-chip-list>
+          <mat-chip-listbox>
+            <mat-chip-option>{{mcount}}</mat-chip-option>
+          </mat-chip-listbox>
         </mat-form-field>
 
         <mat-form-field class="small-control" appearance="fill">
           <mat-label>Personell Qty</mat-label>
-          <mat-chip-list>
-            <mat-chip>{{pcount}}</mat-chip>
-          </mat-chip-list>
+          <mat-chip-listbox>
+            <mat-chip-option>{{pcount}}</mat-chip-option>
+          </mat-chip-listbox>
         </mat-form-field>
 
         <mat-form-field appearance="fill">
           <mat-label>Break</mat-label>
-          <mat-chip-list>
-            <mat-chip>{{lunch}}</mat-chip>
-          </mat-chip-list>
+          <mat-chip-listbox>
+            <mat-chip-option>{{lunch}}</mat-chip-option>
+          </mat-chip-listbox>
         </mat-form-field>
       <!--
   <mat-form-field class="example-full-width" appearance="fill">

src/app/gadgets/packaging-line/pck-line.component.html

@@ -10,17 +10,17 @@
   </app-gadget-header>
   <mat-card-content *ngIf="!inConfig">
     <div class="subsection">
-      <mat-chip-list class="example-chip">
-        <mat-chip selected color="primary" class="example-box">
+      <mat-chip-listbox class="example-chip">
+        <mat-chip-option selected color="primary" class="example-box">
           Team Lead: {{ teamLead }}
-        </mat-chip>
-        <mat-chip selected color="primary" class="example-box">
+        </mat-chip-option>
+        <mat-chip-option selected color="primary" class="example-box">
           Job Number: {{ jobNumber }}
-        </mat-chip>
-        <mat-chip selected color="primary" class="example-box">
+        </mat-chip-option>
+        <mat-chip-option selected color="primary" class="example-box">
           Date: {{ date }}
-        </mat-chip>
-      </mat-chip-list>
+        </mat-chip-option>
+      </mat-chip-listbox>
     </div>
 
     <br />
@@ -38,7 +38,7 @@
       <ng-container matColumnDef="goal">
         <th mat-header-cell *matHeaderCellDef>Goals</th>
         <td mat-cell *matCellDef="let element">
-          <mat-form-field class="number-form-field" floatLabel="never">
+          <mat-form-field class="number-form-field">
             <input
               matInput
               type="number"
@@ -54,7 +54,7 @@
       <ng-container matColumnDef="actual">
         <th mat-header-cell *matHeaderCellDef>Actual</th>
         <td mat-cell *matCellDef="let element">
-          <mat-form-field class="number-form-field" floatLabel="never">
+          <mat-form-field class="number-form-field">
             <input
               matInput
               type="number"
@@ -70,7 +70,7 @@
       <ng-container matColumnDef="comments">
         <th mat-header-cell *matHeaderCellDef>Comments</th>
         <mat-cell *matCellDef="let element">
-          <mat-form-field floatLabel="never">
+          <mat-form-field >
             <input
               matInput
               placeholder="Comments"

src/app/gadgets/score-card/score-card.component.html

@@ -9,16 +9,16 @@
   <mat-card-content *ngIf="!inConfig">
     <mat-form-field appearance="fill">
       <mat-label>Line Lead(s)</mat-label>
-      <mat-chip-list>
-        <mat-chip color="warn" selected *ngFor="let user of getUsersByRole('lead')">{{user.username}}</mat-chip>
-      </mat-chip-list>
+      <mat-chip-listbox>
+        <mat-chip-option color="warn" selected *ngFor="let user of getUsersByRole('lead')">{{user.username}}</mat-chip-option>
+      </mat-chip-listbox>
     </mat-form-field>
 
     <mat-form-field appearance="fill">
       <mat-label>Drivers</mat-label>
-      <mat-chip-list>
-        <mat-chip color="warn" selected *ngFor="let user of getUsersByRole('driver')">{{user.username}}</mat-chip>
-      </mat-chip-list>
+      <mat-chip-listbox>
+        <mat-chip-option color="warn" selected *ngFor="let user of getUsersByRole('driver')">{{user.username}}</mat-chip-option>
+      </mat-chip-listbox>
     </mat-form-field>
   </mat-card-content>