material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-08-17 09:30:27 +03:00
Code Issues Projects Releases Wiki Activity

fix(tabs): remove public indicator property

Browse Source 
PiperOrigin-RevId: 563781246
This commit is contained in:
Elizabeth Mitchell 2023-09-08 10:02:12 -07:00 committed by Copybara-Service
parent 82e9e92a19
commit d296316a2b
2 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
tabs/harness.ts
View File

@ -20,7 +20,8 @@ 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();
}
@ -28,7 +29,8 @@ export class TabHarness extends Harness<Tab> {
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';
}
}

22
tabs/internal/tab.ts
View File

@ -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;