Merge branch 'main' into macandcheese/fix-card-footer-style

packages/calcite-components/src/components/chip/chip.tsx

@@ -16,11 +16,7 @@ import {
 import { toAriaBoolean, slotChangeHasAssignedElement } from "../../utils/dom";
 import { CSS, SLOTS, ICONS } from "./resources";
 import { Appearance, Kind, Scale, SelectionMode } from "../interfaces";
-import {
-  ConditionalSlotComponent,
-  connectConditionalSlotComponent,
-  disconnectConditionalSlotComponent,
-} from "../../utils/conditionalSlot";
+
 import {
   componentFocusable,
   LoadableComponent,
@@ -43,7 +39,6 @@ import {
   updateHostInteraction,
 } from "../../utils/interactive";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
-import { createObserver } from "../../utils/observers";
 import { isActivationKey } from "../../utils/key";
 import { ChipMessages } from "./assets/chip/t9n";
 import { getIconScale } from "../../utils/component";
@@ -59,12 +54,7 @@ import { getIconScale } from "../../utils/component";
   assetsDirs: ["assets"],
 })
 export class Chip
-  implements
-    ConditionalSlotComponent,
-    InteractiveComponent,
-    LoadableComponent,
-    LocalizedComponent,
-    T9nComponent
+  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent
 {
   //--------------------------------------------------------------------------
   //
@@ -166,8 +156,6 @@ export class Chip
 
   private closeButtonEl: HTMLButtonElement;
 
-  private mutationObserver = createObserver("mutation", () => this.updateHasText());
-
   // --------------------------------------------------------------------------
   //
   //  Events
@@ -196,11 +184,9 @@ export class Chip
   // --------------------------------------------------------------------------
 
   connectedCallback(): void {
-    connectConditionalSlotComponent(this);
     connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
-    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
 
   componentDidLoad(): void {
@@ -212,11 +198,9 @@ export class Chip
   }
 
   disconnectedCallback(): void {
-    disconnectConditionalSlotComponent(this);
     disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
-    this.mutationObserver?.disconnect();
   }
 
   async componentWillLoad(): Promise<void> {
@@ -282,6 +266,10 @@ export class Chip
   //
   // --------------------------------------------------------------------------
 
+  private handleDefaultSlotChange = (): void => {
+    this.updateHasText();
+  };
+
   private close = (): void => {
     this.calciteChipClose.emit();
     this.selected = false;
@@ -419,7 +407,7 @@ export class Chip
             {this.renderChipImage()}
             {this.icon && this.renderIcon()}
             <span class={CSS.title}>
-              <slot />
+              <slot onSlotchange={this.handleDefaultSlotChange} />
             </span>
             {this.closable && this.renderCloseButton()}
           </div>