mirror of
https://github.com/material-components/material-web.git
synced 2024-08-16 09:00:32 +03:00
fix(progress): add shared class
PiperOrigin-RevId: 549369009
This commit is contained in:
parent
45f42f03ce
commit
75058ca2be
@ -67,13 +67,13 @@
|
||||
content-visibility: auto;
|
||||
}
|
||||
|
||||
.circular-progress {
|
||||
.progress {
|
||||
flex: 1;
|
||||
align-self: stretch;
|
||||
margin: $container-padding;
|
||||
}
|
||||
|
||||
.circular-progress,
|
||||
.progress,
|
||||
.spinner,
|
||||
.left,
|
||||
.right,
|
||||
@ -110,7 +110,7 @@
|
||||
stroke: transparent;
|
||||
}
|
||||
|
||||
.circular-progress.indeterminate {
|
||||
.progress.indeterminate {
|
||||
will-change: transform;
|
||||
animation: linear infinite linear-rotate;
|
||||
animation-duration: $linear-rotate-duration;
|
||||
|
@ -48,9 +48,9 @@ $_track-background: 0 / $_track-background-width 100%
|
||||
// Generates a list of rtl selectors. This is done so rules can be generated
|
||||
// separately so they don't get dropped where unsupported.
|
||||
$rtl-selectors: (
|
||||
':host-context([dir="rtl"]) .linear-progress',
|
||||
':host([dir="rtl"]) .linear-progress',
|
||||
'.linear-progress:dir(rtl)'
|
||||
':host-context([dir="rtl"]) .progress',
|
||||
':host([dir="rtl"]) .progress',
|
||||
'.progress:dir(rtl)'
|
||||
);
|
||||
|
||||
@mixin styles() {
|
||||
@ -72,7 +72,7 @@ $rtl-selectors: (
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
.linear-progress,
|
||||
.progress,
|
||||
.track,
|
||||
.buffer-bar,
|
||||
.bar,
|
||||
@ -80,7 +80,7 @@ $rtl-selectors: (
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.linear-progress {
|
||||
.progress {
|
||||
inset: 0;
|
||||
outline: transparent solid 1px;
|
||||
border-radius: var(--_track-shape);
|
||||
@ -310,13 +310,13 @@ $rtl-selectors: (
|
||||
}
|
||||
|
||||
@media screen and (forced-colors: active) {
|
||||
.linear-progress {
|
||||
.progress {
|
||||
--_active-indicator-color: canvastext;
|
||||
--_track-color: graytext;
|
||||
border: 1px solid canvastext;
|
||||
}
|
||||
|
||||
.indeterminate.linear-progress {
|
||||
.indeterminate.progress {
|
||||
--_track-color: canvas;
|
||||
}
|
||||
}
|
||||
|
@ -4,58 +4,20 @@
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import {html, LitElement, nothing} from 'lit';
|
||||
import {property} from 'lit/decorators.js';
|
||||
import {classMap} from 'lit/directives/class-map.js';
|
||||
import {html} from 'lit';
|
||||
|
||||
import {ARIAMixinStrict} from '../../internal/aria/aria.js';
|
||||
import {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';
|
||||
import {Progress} from './progress.js';
|
||||
|
||||
/**
|
||||
* A circular progress component.
|
||||
*/
|
||||
export class CircularProgress extends LitElement {
|
||||
static {
|
||||
requestUpdateOnAriaChange(this);
|
||||
}
|
||||
export class CircularProgress extends Progress {
|
||||
protected override renderIndicator() {
|
||||
if (this.indeterminate) {
|
||||
return this.renderIndeterminateContainer();
|
||||
}
|
||||
|
||||
/**
|
||||
* Progress to display, a fraction between 0 and 1.
|
||||
*/
|
||||
@property({type: Number}) progress = 0;
|
||||
|
||||
/**
|
||||
* Whether or not to display an animated spinner representing indeterminate
|
||||
* progress.
|
||||
*/
|
||||
@property({type: Boolean}) indeterminate = false;
|
||||
|
||||
/**
|
||||
* Whether or not to render indeterminate mode using 4 colors instead of one.
|
||||
*/
|
||||
@property({type: Boolean, attribute: 'four-color'}) fourColor = false;
|
||||
|
||||
protected override render() {
|
||||
const classes = {
|
||||
'indeterminate': this.indeterminate,
|
||||
'four-color': this.fourColor
|
||||
};
|
||||
|
||||
// Needed for closure conformance
|
||||
const {ariaLabel} = this as ARIAMixinStrict;
|
||||
return html`
|
||||
<div
|
||||
class="circular-progress ${classMap(classes)}"
|
||||
role="progressbar"
|
||||
aria-label="${ariaLabel || nothing}"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="1"
|
||||
aria-valuenow="${this.indeterminate ? nothing : this.progress}">
|
||||
${
|
||||
this.indeterminate ? this.renderIndeterminateContainer() :
|
||||
this.renderDeterminateContainer()}
|
||||
</div>
|
||||
`;
|
||||
return this.renderDeterminateContainer();
|
||||
}
|
||||
|
||||
// Determinate mode is rendered with an svg so the progress arc can be
|
||||
|
@ -4,58 +4,37 @@
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import {html, LitElement, nothing} from 'lit';
|
||||
import {html} from 'lit';
|
||||
import {property, query, state} from 'lit/decorators.js';
|
||||
import {classMap} from 'lit/directives/class-map.js';
|
||||
import {styleMap} from 'lit/directives/style-map.js';
|
||||
|
||||
import {ARIAMixinStrict} from '../../internal/aria/aria.js';
|
||||
import {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';
|
||||
import {Progress} from './progress.js';
|
||||
|
||||
/**
|
||||
* A linear progress component.
|
||||
*/
|
||||
export class LinearProgress extends LitElement {
|
||||
static {
|
||||
requestUpdateOnAriaChange(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether or not to render indeterminate progress in an animated state.
|
||||
*/
|
||||
@property({type: Boolean}) indeterminate = false;
|
||||
|
||||
/**
|
||||
* Progress to display, a fraction between 0 and 1.
|
||||
*/
|
||||
@property({type: Number}) progress = 0;
|
||||
|
||||
export class LinearProgress extends Progress {
|
||||
/**
|
||||
* Buffer amount to display, a fraction between 0 and 1.
|
||||
*/
|
||||
@property({type: Number}) buffer = 1;
|
||||
|
||||
/**
|
||||
* Whether or not to render indeterminate mode using 4 colors instead of one.
|
||||
*
|
||||
*/
|
||||
@property({type: Boolean, attribute: 'four-color'}) fourColor = false;
|
||||
|
||||
@query('.linear-progress') private readonly rootEl!: HTMLElement|null;
|
||||
@query('.progress') private readonly rootEl!: HTMLElement|null;
|
||||
|
||||
@state() private animationReady = true;
|
||||
private resizeObserver: ResizeObserver|null = null;
|
||||
|
||||
protected override getRenderClasses() {
|
||||
return {
|
||||
...super.getRenderClasses(),
|
||||
'animation-ready': this.animationReady,
|
||||
};
|
||||
}
|
||||
|
||||
// Note, the indeterminate animation is rendered with transform %'s
|
||||
// Previously, this was optimized to use px calculated with the resizeObserver
|
||||
// due to a now fixed Chrome bug: crbug.com/389359.
|
||||
protected override render() {
|
||||
const rootClasses = {
|
||||
'indeterminate': this.indeterminate,
|
||||
'animation-ready': this.animationReady,
|
||||
'four-color': this.fourColor
|
||||
};
|
||||
|
||||
protected override renderIndicator() {
|
||||
const progressStyles = {
|
||||
transform: `scaleX(${(this.indeterminate ? 1 : this.progress) * 100}%)`
|
||||
};
|
||||
@ -63,25 +42,16 @@ export class LinearProgress extends LitElement {
|
||||
transform: `scaleX(${(this.indeterminate ? 1 : this.buffer) * 100}%)`
|
||||
};
|
||||
|
||||
// Needed for closure conformance
|
||||
const {ariaLabel} = this as ARIAMixinStrict;
|
||||
return html`
|
||||
<div
|
||||
role="progressbar"
|
||||
class="linear-progress ${classMap(rootClasses)}"
|
||||
aria-label="${ariaLabel || nothing}"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="1"
|
||||
aria-valuenow="${this.indeterminate ? nothing : this.progress}">
|
||||
<div class="track"></div>
|
||||
<div class="buffer-bar" style=${styleMap(bufferStyles)}></div>
|
||||
<div class="bar primary-bar" style=${styleMap(progressStyles)}>
|
||||
<div class="bar-inner"></div>
|
||||
</div>
|
||||
<div class="bar secondary-bar">
|
||||
<div class="bar-inner"></div>
|
||||
</div>
|
||||
</div>`;
|
||||
<div class="track"></div>
|
||||
<div class="buffer-bar" style=${styleMap(bufferStyles)}></div>
|
||||
<div class="bar primary-bar" style=${styleMap(progressStyles)}>
|
||||
<div class="bar-inner"></div>
|
||||
</div>
|
||||
<div class="bar secondary-bar">
|
||||
<div class="bar-inner"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
override async connectedCallback() {
|
||||
|
60
progress/lib/progress.ts
Normal file
60
progress/lib/progress.ts
Normal file
@ -0,0 +1,60 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2023 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import {html, LitElement, nothing, TemplateResult} from 'lit';
|
||||
import {property} from 'lit/decorators.js';
|
||||
import {classMap} from 'lit/directives/class-map.js';
|
||||
|
||||
import {ARIAMixinStrict} from '../../internal/aria/aria.js';
|
||||
import {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';
|
||||
|
||||
/**
|
||||
* A progress component.
|
||||
*/
|
||||
export abstract class Progress extends LitElement {
|
||||
static {
|
||||
requestUpdateOnAriaChange(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Progress to display, a fraction between 0 and 1.
|
||||
*/
|
||||
@property({type: Number}) progress = 0;
|
||||
|
||||
/**
|
||||
* Whether or not to display indeterminate progress, which gives no indication
|
||||
* to how long an activity will take.
|
||||
*/
|
||||
@property({type: Boolean}) indeterminate = false;
|
||||
|
||||
/**
|
||||
* Whether or not to render indeterminate mode using 4 colors instead of one.
|
||||
*/
|
||||
@property({type: Boolean, attribute: 'four-color'}) fourColor = false;
|
||||
|
||||
protected override render() {
|
||||
// Needed for closure conformance
|
||||
const {ariaLabel} = this as ARIAMixinStrict;
|
||||
return html`
|
||||
<div class="progress ${classMap(this.getRenderClasses())}"
|
||||
role="progressbar"
|
||||
aria-label="${ariaLabel || nothing}"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="1"
|
||||
aria-valuenow=${this.indeterminate ? nothing : this.progress}
|
||||
>${this.renderIndicator()}</div>
|
||||
`;
|
||||
}
|
||||
|
||||
protected getRenderClasses() {
|
||||
return {
|
||||
'indeterminate': this.indeterminate,
|
||||
'four-color': this.fourColor,
|
||||
};
|
||||
}
|
||||
|
||||
protected abstract renderIndicator(): TemplateResult;
|
||||
}
|
Loading…
Reference in New Issue
Block a user