mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 09:30:27 +03:00
fix(tabs): remove public indicator property
PiperOrigin-RevId: 563781246
This commit is contained in:
parent
82e9e92a19
commit
d296316a2b
@ -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';
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user