fix(material/chips): fix click target when stacked

Ensure that the click target of stacked chips is the entire width of the
chip. Fix issue where applying .mat-mdc-chip-set-stacked causes chips to
respond to clicks when clicking on the text; did not respond when
clicking inside the chip but not over the text (#26590).

Ensure the clickable elemen tof the chip takes up the whole visual area
of the chip by overriding styles from MDC library. Angular Material
supports vertically-stacked chips, which MDC does not.

Fix #26590

Author: zarend

src/dev-app/chips/chips-demo.html

@@ -251,12 +251,25 @@ <h4>NgModel with single selection</h4>
 
       The selected color is {{selectedColor}}.
 
-      <h4>Single selection without checkmark indicator.</h4>
+      <h4>Single selection without checkmark selection indicator.</h4>
 
       <mat-chip-listbox [(ngModel)]="selectedColor" [hideSingleSelectionIndicator]="true">
         <mat-chip-option *ngFor="let aColor of availableColors" [color]="aColor.color"
                  [value]="aColor.name">
           {{aColor.name}}
+          <mat-icon matChipTrailingIcon>star</mat-icon>
+        </mat-chip-option>
+      </mat-chip-listbox>
+
+      The selected color is {{selectedColor}}.
+
+      <h4>Single selection with stacked appearance.</h4>
+
+      <mat-chip-listbox [(ngModel)]="selectedColor" class="mat-mdc-chip-set-stacked">
+        <mat-chip-option *ngFor="let aColor of availableColors" [color]="aColor.color"
+                 [value]="aColor.name">
+          {{aColor.name}}
+          <mat-icon matChipTrailingIcon>star</mat-icon>
         </mat-chip-option>
       </mat-chip-listbox>
 

src/material/chips/chip-set.scss

@@ -19,6 +19,15 @@
   .mat-mdc-chip {
     width: 100%;
   }
+
+  .mdc-evolution-chip__graphic {
+    flex-grow: 0;
+  }
+
+  .mdc-evolution-chip__action--primary {
+    flex-basis: 100%;
+    justify-content: start;
+  }
 }
 
 input.mat-mdc-chip-input {