fix(tabs): remove public indicator property

PiperOrigin-RevId: 563781246
material-components · Sep 8, 2023 · d296316 · d296316
1 parent 82e9e92
commit d296316
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/tabs/harness.ts b/tabs/harness.ts
@@ -20,15 +20,17 @@ export class TabHarness extends Harness<Tab> {
 
   private async completeIndicatorAnimation() {
     await this.element.updateComplete;
-    const animations = this.element.indicator.getAnimations();
+    const indicator = this.element.renderRoot.querySelector('.indicator')!;
+    const animations = indicator.getAnimations();
     for (const animation of animations) {
       animation.finish();
     }
   }
 
   async isIndicatorShowing() {
     await this.completeIndicatorAnimation();
-    const opacity = getComputedStyle(this.element.indicator)['opacity'];
+    const indicator = this.element.renderRoot.querySelector('.indicator')!;
+    const opacity = getComputedStyle(indicator)['opacity'];
     return opacity === '1';
   }
 }

diff --git a/tabs/internal/tab.ts b/tabs/internal/tab.ts
@@ -21,6 +21,12 @@ interface Tabs extends HTMLElement {
   previousSelectedItem?: Tab;
 }
 
+/**
+ * Symbol for tabs to use to animate their indicators based off another tab's
+ * indicator.
+ */
+const INDICATOR = Symbol('indicator');
+
 /**
  * Tab component.
  */
@@ -44,9 +50,7 @@ export class Tab extends LitElement {
    */
   @property({type: Boolean, attribute: 'icon-only'}) iconOnly = false;
 
-  // note, this is public so it can participate in selection animation.
-  /** @private */
-  @query('.indicator') readonly indicator!: HTMLElement;
+  @query('.indicator') readonly[INDICATOR]!: HTMLElement|null;
   @state() protected fullWidthIndicator = false;
   @queryAssignedNodes({flatten: true})
   private readonly assignedDefaultNodes!: Node[];
@@ -110,12 +114,16 @@ export class Tab extends LitElement {
   }
 
   private animateSelected() {
-    this.indicator.getAnimations().forEach(a => {
+    if (!this[INDICATOR]) {
+      return;
+    }
+
+    this[INDICATOR].getAnimations().forEach(a => {
       a.cancel();
     });
     const frames = this.getKeyframes();
     if (frames !== null) {
-      this.indicator.animate(
+      this[INDICATOR].animate(
           frames, {duration: 250, easing: EASING.EMPHASIZED});
     }
   }
@@ -130,11 +138,11 @@ export class Tab extends LitElement {
     const tabs = this.closest<Tabs>('md-tabs');
     const from: Keyframe = {};
     const fromRect =
-        (tabs?.previousSelectedItem?.indicator.getBoundingClientRect() ??
+        (tabs?.previousSelectedItem?.[INDICATOR]?.getBoundingClientRect() ??
          ({} as DOMRect));
     const fromPos = fromRect.left;
     const fromExtent = fromRect.width;
-    const toRect = this.indicator.getBoundingClientRect();
+    const toRect = this[INDICATOR]!.getBoundingClientRect();
     const toPos = toRect.left;
     const toExtent = toRect.width;
     const scale = fromExtent / toExtent;