230 lines
15 KiB
JavaScript
230 lines
15 KiB
JavaScript
import { jsx as h } from "react/jsx-runtime";
|
|
import y from "react";
|
|
import { o as _ } from "./create-component-CVXl33PD.mjs";
|
|
import { _ as e, n as s, r as z, x as d, c as X, E as p, a as x, b as k } from "./class-map-CwiboTfb.mjs";
|
|
import { m as $ } from "./delegate-BXi1gVeU.mjs";
|
|
import { o as b } from "./style-map-CdUj7GnE.mjs";
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const P = $(z);
|
|
class t extends P {
|
|
constructor() {
|
|
super(...arguments), this.value = 0, this.max = 1, this.indeterminate = !1, this.fourColor = !1;
|
|
}
|
|
render() {
|
|
const { ariaLabel: r } = this;
|
|
return d`
|
|
<div
|
|
class="progress ${X(this.getRenderClasses())}"
|
|
role="progressbar"
|
|
aria-label="${r || p}"
|
|
aria-valuemin="0"
|
|
aria-valuemax=${this.max}
|
|
aria-valuenow=${this.indeterminate ? p : this.value}
|
|
>${this.renderIndicator()}</div
|
|
>
|
|
`;
|
|
}
|
|
getRenderClasses() {
|
|
return {
|
|
indeterminate: this.indeterminate,
|
|
"four-color": this.fourColor
|
|
};
|
|
}
|
|
}
|
|
e([
|
|
s({ type: Number })
|
|
], t.prototype, "value", void 0);
|
|
e([
|
|
s({ type: Number })
|
|
], t.prototype, "max", void 0);
|
|
e([
|
|
s({ type: Boolean })
|
|
], t.prototype, "indeterminate", void 0);
|
|
e([
|
|
s({ type: Boolean, attribute: "four-color" })
|
|
], t.prototype, "fourColor", void 0);
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
let M = class extends t {
|
|
renderIndicator() {
|
|
return this.indeterminate ? this.renderIndeterminateContainer() : this.renderDeterminateContainer();
|
|
}
|
|
// Determinate mode is rendered with an svg so the progress arc can be
|
|
// easily animated via stroke-dashoffset.
|
|
renderDeterminateContainer() {
|
|
const r = (1 - this.value / this.max) * 100;
|
|
return d`
|
|
<svg viewBox="0 0 4800 4800">
|
|
<circle class="track" pathLength="100"></circle>
|
|
<circle
|
|
class="active-track"
|
|
pathLength="100"
|
|
stroke-dashoffset=${r}></circle>
|
|
</svg>
|
|
`;
|
|
}
|
|
// Indeterminate mode rendered with 2 bordered-divs. The borders are
|
|
// clipped into half circles by their containers. The divs are then carefully
|
|
// animated to produce changes to the spinner arc size.
|
|
// This approach has 4.5x the FPS of rendering via svg on Chrome 111.
|
|
// See https://lit.dev/playground/#gist=febb773565272f75408ab06a0eb49746.
|
|
renderIndeterminateContainer() {
|
|
return d` <div class="spinner">
|
|
<div class="left">
|
|
<div class="circle"></div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="circle"></div>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
};
|
|
/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const L = x`:host{--_active-indicator-color: var(--md-circular-progress-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_active-indicator-width: var(--md-circular-progress-active-indicator-width, 10);--_four-color-active-indicator-four-color: var(--md-circular-progress-four-color-active-indicator-four-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_four-color-active-indicator-one-color: var(--md-circular-progress-four-color-active-indicator-one-color, var(--md-sys-color-primary, #6750a4));--_four-color-active-indicator-three-color: var(--md-circular-progress-four-color-active-indicator-three-color, var(--md-sys-color-tertiary, #7d5260));--_four-color-active-indicator-two-color: var(--md-circular-progress-four-color-active-indicator-two-color, var(--md-sys-color-primary-container, #eaddff));--_size: var(--md-circular-progress-size, 48px);display:inline-flex;vertical-align:middle;width:var(--_size);height:var(--_size);position:relative;align-items:center;justify-content:center;contain:strict;content-visibility:auto}.progress{flex:1;align-self:stretch;margin:4px}.progress,.spinner,.left,.right,.circle,svg,.track,.active-track{position:absolute;inset:0}svg{transform:rotate(-90deg)}circle{cx:50%;cy:50%;r:calc(50%*(1 - var(--_active-indicator-width)/100));stroke-width:calc(var(--_active-indicator-width)*1%);stroke-dasharray:100;fill:rgba(0,0,0,0)}.active-track{transition:stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1);stroke:var(--_active-indicator-color)}.track{stroke:rgba(0,0,0,0)}.progress.indeterminate{animation:linear infinite linear-rotate;animation-duration:1568.2352941176ms}.spinner{animation:infinite both rotate-arc;animation-duration:5332ms;animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.left{overflow:hidden;inset:0 50% 0 0}.right{overflow:hidden;inset:0 0 0 50%}.circle{box-sizing:border-box;border-radius:50%;border:solid calc(var(--_active-indicator-width)/100*(var(--_size) - 8px));border-color:var(--_active-indicator-color) var(--_active-indicator-color) rgba(0,0,0,0) rgba(0,0,0,0);animation:expand-arc;animation-iteration-count:infinite;animation-fill-mode:both;animation-duration:1333ms,5332ms;animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.four-color .circle{animation-name:expand-arc,four-color}.left .circle{rotate:135deg;inset:0 -100% 0 0}.right .circle{rotate:100deg;inset:0 0 0 -100%;animation-delay:-666.5ms,0ms}@media(forced-colors: active){.active-track{stroke:CanvasText}.circle{border-color:CanvasText CanvasText Canvas Canvas}}@keyframes expand-arc{0%{transform:rotate(265deg)}50%{transform:rotate(130deg)}100%{transform:rotate(265deg)}}@keyframes rotate-arc{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}100%{transform:rotate(1080deg)}}@keyframes linear-rotate{to{transform:rotate(360deg)}}@keyframes four-color{0%{border-top-color:var(--_four-color-active-indicator-one-color);border-right-color:var(--_four-color-active-indicator-one-color)}15%{border-top-color:var(--_four-color-active-indicator-one-color);border-right-color:var(--_four-color-active-indicator-one-color)}25%{border-top-color:var(--_four-color-active-indicator-two-color);border-right-color:var(--_four-color-active-indicator-two-color)}40%{border-top-color:var(--_four-color-active-indicator-two-color);border-right-color:var(--_four-color-active-indicator-two-color)}50%{border-top-color:var(--_four-color-active-indicator-three-color);border-right-color:var(--_four-color-active-indicator-three-color)}65%{border-top-color:var(--_four-color-active-indicator-three-color);border-right-color:var(--_four-color-active-indicator-three-color)}75%{border-top-color:var(--_four-color-active-indicator-four-color);border-right-color:var(--_four-color-active-indicator-four-color)}90%{border-top-color:var(--_four-color-active-indicator-four-color);border-right-color:var(--_four-color-active-indicator-four-color)}100%{border-top-color:var(--_four-color-active-indicator-one-color);border-right-color:var(--_four-color-active-indicator-one-color)}}
|
|
`;
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
let m = class extends M {
|
|
};
|
|
m.styles = [L];
|
|
m = e([
|
|
k("md-circular-progress")
|
|
], m);
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
let w = class extends t {
|
|
constructor() {
|
|
super(...arguments), this.buffer = 0;
|
|
}
|
|
// 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.
|
|
renderIndicator() {
|
|
const r = {
|
|
transform: `scaleX(${(this.indeterminate ? 1 : this.value / this.max) * 100}%)`
|
|
}, a = this.buffer ?? 0, i = a > 0, n = {
|
|
transform: `scaleX(${(this.indeterminate || !i ? 1 : a / this.max) * 100}%)`
|
|
}, c = this.indeterminate || !i || a >= this.max || this.value >= this.max;
|
|
return d`
|
|
<div class="dots" ?hidden=${c}></div>
|
|
<div class="inactive-track" style=${b(n)}></div>
|
|
<div class="bar primary-bar" style=${b(r)}>
|
|
<div class="bar-inner"></div>
|
|
</div>
|
|
<div class="bar secondary-bar">
|
|
<div class="bar-inner"></div>
|
|
</div>
|
|
`;
|
|
}
|
|
};
|
|
e([
|
|
s({ type: Number })
|
|
], w.prototype, "buffer", void 0);
|
|
/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const B = x`:host{--_active-indicator-color: var(--md-linear-progress-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_active-indicator-height: var(--md-linear-progress-active-indicator-height, 4px);--_four-color-active-indicator-four-color: var(--md-linear-progress-four-color-active-indicator-four-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_four-color-active-indicator-one-color: var(--md-linear-progress-four-color-active-indicator-one-color, var(--md-sys-color-primary, #6750a4));--_four-color-active-indicator-three-color: var(--md-linear-progress-four-color-active-indicator-three-color, var(--md-sys-color-tertiary, #7d5260));--_four-color-active-indicator-two-color: var(--md-linear-progress-four-color-active-indicator-two-color, var(--md-sys-color-primary-container, #eaddff));--_track-color: var(--md-linear-progress-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_track-height: var(--md-linear-progress-track-height, 4px);--_track-shape: var(--md-linear-progress-track-shape, var(--md-sys-shape-corner-none, 0px));border-radius:var(--_track-shape);display:flex;position:relative;min-width:80px;height:var(--_track-height);content-visibility:auto;contain:strict}.progress,.dots,.inactive-track,.bar,.bar-inner{position:absolute}.progress{direction:ltr;inset:0;border-radius:inherit;overflow:hidden;display:flex;align-items:center}.bar{animation:none;width:100%;height:var(--_active-indicator-height);transform-origin:left center;transition:transform 250ms cubic-bezier(0.4, 0, 0.6, 1)}.secondary-bar{display:none}.bar-inner{inset:0;animation:none;background:var(--_active-indicator-color)}.inactive-track{background:var(--_track-color);inset:0;transition:transform 250ms cubic-bezier(0.4, 0, 0.6, 1);transform-origin:left center}.dots{inset:0;animation:linear infinite 250ms;animation-name:buffering;background-color:var(--_track-color);background-repeat:repeat-x;-webkit-mask-image:url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E");z-index:-1}.dots[hidden]{display:none}.indeterminate .bar{transition:none}.indeterminate .primary-bar{inset-inline-start:-145.167%}.indeterminate .secondary-bar{inset-inline-start:-54.8889%;display:block}.indeterminate .primary-bar{animation:linear infinite 2s;animation-name:primary-indeterminate-translate}.indeterminate .primary-bar>.bar-inner{animation:linear infinite 2s primary-indeterminate-scale}.indeterminate.four-color .primary-bar>.bar-inner{animation-name:primary-indeterminate-scale,four-color;animation-duration:2s,4s}.indeterminate .secondary-bar{animation:linear infinite 2s;animation-name:secondary-indeterminate-translate}.indeterminate .secondary-bar>.bar-inner{animation:linear infinite 2s secondary-indeterminate-scale}.indeterminate.four-color .secondary-bar>.bar-inner{animation-name:secondary-indeterminate-scale,four-color;animation-duration:2s,4s}:host(:dir(rtl)){transform:scale(-1)}@keyframes primary-indeterminate-scale{0%{transform:scaleX(0.08)}36.65%{animation-timing-function:cubic-bezier(0.334731, 0.12482, 0.785844, 1);transform:scaleX(0.08)}69.15%{animation-timing-function:cubic-bezier(0.06, 0.11, 0.6, 1);transform:scaleX(0.661479)}100%{transform:scaleX(0.08)}}@keyframes secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);transform:scaleX(0.08)}19.15%{animation-timing-function:cubic-bezier(0.152313, 0.196432, 0.648374, 1.00432);transform:scaleX(0.457104)}44.15%{animation-timing-function:cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);transform:scaleX(0.72796)}100%{transform:scaleX(0.08)}}@keyframes buffering{0%{transform:translateX(calc(var(--_track-height) / 2 * 5))}}@keyframes primary-indeterminate-translate{0%{transform:translateX(0px)}20%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(0px)}59.15%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(83.6714%)}100%{transform:translateX(200.611%)}}@keyframes secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);transform:translateX(0px)}25%{animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);transform:translateX(37.6519%)}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(84.3862%)}100%{transform:translateX(160.278%)}}@keyframes four-color{0%{background:var(--_four-color-active-indicator-one-color)}15%{background:var(--_four-color-active-indicator-one-color)}25%{background:var(--_four-color-active-indicator-two-color)}40%{background:var(--_four-color-active-indicator-two-color)}50%{background:var(--_four-color-active-indicator-three-color)}65%{background:var(--_four-color-active-indicator-three-color)}75%{background:var(--_four-color-active-indicator-four-color)}90%{background:var(--_four-color-active-indicator-four-color)}100%{background:var(--_four-color-active-indicator-one-color)}}@media(forced-colors: active){:host{outline:1px solid CanvasText}.bar-inner,.dots{background-color:CanvasText}}
|
|
`;
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
let v = class extends w {
|
|
};
|
|
v.styles = [B];
|
|
v = e([
|
|
k("md-linear-progress")
|
|
], v);
|
|
const E = _({
|
|
react: y,
|
|
tagName: "md-circular-progress",
|
|
elementClass: m
|
|
}), N = _({
|
|
react: y,
|
|
tagName: "md-linear-progress",
|
|
elementClass: v
|
|
}), q = (o) => {
|
|
const {
|
|
value: r,
|
|
max: a,
|
|
fourColor: i,
|
|
className: l,
|
|
style: n,
|
|
id: c,
|
|
color: f,
|
|
size: u,
|
|
...g
|
|
} = o;
|
|
return /* @__PURE__ */ h(
|
|
E,
|
|
{
|
|
indeterminate: r === void 0,
|
|
value: r,
|
|
max: a,
|
|
fourColor: i,
|
|
className: l,
|
|
style: {
|
|
...n,
|
|
"--md-circular-progress-color": f || "var(--md-sys-color-primary)",
|
|
"--md-circular-progress-size": u || "48px"
|
|
},
|
|
id: c,
|
|
...g
|
|
}
|
|
);
|
|
}, F = (o) => {
|
|
const {
|
|
buffer: r,
|
|
value: a,
|
|
max: i,
|
|
fourColor: l,
|
|
className: n,
|
|
style: c,
|
|
id: f,
|
|
color: u,
|
|
size: g,
|
|
...C
|
|
} = o;
|
|
return /* @__PURE__ */ h(
|
|
N,
|
|
{
|
|
buffer: r,
|
|
value: a,
|
|
max: i,
|
|
fourColor: l,
|
|
className: n,
|
|
style: {
|
|
...c,
|
|
"--md-linear-progress-color": u || "var(--md-sys-color-primary)",
|
|
"--md-linear-progress-size": g || "48px"
|
|
},
|
|
id: f,
|
|
...C
|
|
}
|
|
);
|
|
};
|
|
export {
|
|
q as CircularProgress,
|
|
F as LinearProgress
|
|
};
|