add hasSlottedTrailingIcon

Author: vdegenne

chips/internal/filter-chip.ts

@@ -22,7 +22,7 @@ import {renderRemoveButton} from './trailing-icons.js';
  */
 export class FilterChip extends MultiActionChip {
   @property({type: Boolean}) elevated = false;
-  @property({type: Boolean}) removable = false;
+  @property({type: Boolean, attribute: 'has-trailing'}) hasTrailing = false;
   @property({type: Boolean, reflect: true}) selected = false;
 
   protected get primaryId() {
@@ -39,7 +39,7 @@ export class FilterChip extends MultiActionChip {
       ...super.getContainerClasses(),
       elevated: this.elevated,
       selected: this.selected,
-      'has-trailing': this.removable,
+      'has-trailing': this.hasTrailing,
     };
   }
 
@@ -72,7 +72,7 @@ export class FilterChip extends MultiActionChip {
   }
 
   protected override renderTrailingAction(focusListener: EventListener) {
-    if (this.removable) {
+    if (this.hasTrailing) {
       return renderRemoveButton({
         focusListener,
         ariaLabel: this.ariaLabelRemove,

chips/internal/multi-action-chip.ts

@@ -42,6 +42,15 @@ export abstract class MultiActionChip extends Chip {
   protected abstract readonly primaryAction: HTMLElement | null;
   protected abstract readonly trailingAction: HTMLElement | null;
 
+  /**
+   * Getter used to determine if the user provided a trailing icon or not.
+   */
+  get hasSlottedTrailingIcon() {
+     const slot = this.shadowRoot.querySelector('slot[name="trailing-icon"]') as HTMLSlotElement;
+     // Default slot is not counted as one element.
+     return slot.assignedElements().length > 0;
+  }
+
   constructor() {
     super();
     this.handleTrailingActionFocus = this.handleTrailingActionFocus.bind(this);

chips/internal/trailing-icons.ts

@@ -9,7 +9,7 @@ import '../../ripple/ripple.js';
 
 import {html, nothing} from 'lit';
 
-import {Chip} from './chip.js';
+import {MultiActionChip} from './multi-action-chip.js';
 
 interface RemoveButtonProperties {
   ariaLabel: string;
@@ -45,8 +45,8 @@ export function renderRemoveButton({
   `;
 }
 
-function handleRemoveClick(this: Chip, event: Event) {
-  if (this.disabled) {
+function handleRemoveClick(this: MultiActionChip, event: Event) {
+  if (this.disabled || this.hasSlottedTrailingIcon) {
     return;
   }