@m3e/progress-indicator 1.1.4 → 1.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js
CHANGED
|
@@ -955,7 +955,7 @@ _M3eCircularProgressIndicatorElement_renderFlatIndicator = function _M3eCircular
|
|
|
955
955
|
startAngle: -__classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_strokeWidth, "f"),
|
|
956
956
|
endAngle: 135
|
|
957
957
|
});
|
|
958
|
-
return html`<div class="progress" aria-hidden="true"><div class="spinner"><div class="left"><svg viewBox="${left.viewBox}" class="circle"><path class="active-track" d="${left.path}" stroke="currentColor" stroke-width="${__classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_strokeWidth, "f")}" fill="none" stroke-linecap="round"/></svg></div><div class="right"><svg viewBox="${right.viewBox}" class="circle"><path class="active-track" d="${right.path}" stroke="currentColor" stroke-width="${__classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_strokeWidth, "f")}" fill="none" stroke-linecap="round"/></svg></div></div></div>${__classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_instances, "m", _M3eCircularProgressIndicatorElement_renderResizeObservedElements).call(this)}`;
|
|
958
|
+
return html`<div class="progress" aria-hidden="true"><div class="spinner"><div class="left"><svg width="${__classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_diameter, "f")}" height="${__classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_diameter, "f")}" viewBox="${left.viewBox}" class="circle"><path class="active-track" d="${left.path}" stroke="currentColor" stroke-width="${__classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_strokeWidth, "f")}" fill="none" stroke-linecap="round"/></svg></div><div class="right"><svg width="${__classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_diameter, "f")}" height="${__classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_diameter, "f")}" viewBox="${right.viewBox}" class="circle"><path class="active-track" d="${right.path}" stroke="currentColor" stroke-width="${__classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_strokeWidth, "f")}" fill="none" stroke-linecap="round"/></svg></div></div></div>${__classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_instances, "m", _M3eCircularProgressIndicatorElement_renderResizeObservedElements).call(this)}`;
|
|
959
959
|
}
|
|
960
960
|
const minDegrees = __classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_instances, "m", _M3eCircularProgressIndicatorElement_sizeToDegrees).call(this, __classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_strokeWidth, "f") * 2, __classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_diameter, "f"));
|
|
961
961
|
let degrees = this.value / this.max * 360;
|
|
@@ -971,7 +971,7 @@ _M3eCircularProgressIndicatorElement_renderFlatIndicator = function _M3eCircular
|
|
|
971
971
|
startAngle: degrees,
|
|
972
972
|
endAngle: 360
|
|
973
973
|
});
|
|
974
|
-
return html`<div class="progress" aria-hidden="true"><svg viewBox="${active.viewBox}">${degrees > 0 ? svg`<path
|
|
974
|
+
return html`<div class="progress" aria-hidden="true"><svg width="${__classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_diameter, "f")}" height="${__classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_diameter, "f")}" viewBox="${active.viewBox}">${degrees > 0 ? svg`<path
|
|
975
975
|
class="active-track"
|
|
976
976
|
d="${active.path}"
|
|
977
977
|
stroke="currentColor"
|
|
@@ -989,7 +989,7 @@ _M3eCircularProgressIndicatorElement_renderFlatIndicator = function _M3eCircular
|
|
|
989
989
|
};
|
|
990
990
|
_M3eCircularProgressIndicatorElement_renderWavyIndicator = function _M3eCircularProgressIndicatorElement_renderWavyIndicator() {
|
|
991
991
|
if (this.indeterminate) {
|
|
992
|
-
return html`<div class="progress" aria-hidden="true"><svg viewBox="${__classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_instances, "m", _M3eCircularProgressIndicatorElement_drawWavyArc).call(this, {
|
|
992
|
+
return html`<div class="progress" aria-hidden="true"><svg width="${__classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_diameter, "f")}" height="${__classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_diameter, "f")}" viewBox="${__classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_instances, "m", _M3eCircularProgressIndicatorElement_drawWavyArc).call(this, {
|
|
993
993
|
endAngle: 20
|
|
994
994
|
}).viewBox}"><path class="spinner active-track" stroke="currentColor" stroke-width="${__classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_strokeWidth, "f")}" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path class="spinner track" stroke="currentColor" stroke-width="${__classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_strokeWidth, "f")}" fill="none" stroke-linecap="round"/></svg></div>${__classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_instances, "m", _M3eCircularProgressIndicatorElement_renderResizeObservedElements).call(this)}`;
|
|
995
995
|
}
|
|
@@ -1197,7 +1197,7 @@ _M3eCircularProgressIndicatorElement_drawWavyArc = function _M3eCircularProgress
|
|
|
1197
1197
|
};
|
|
1198
1198
|
};
|
|
1199
1199
|
/** The styles of the element. */
|
|
1200
|
-
M3eCircularProgressIndicatorElement.styles = [ProgressElementIndicatorBase.styles, css`:host { display: inline-flex; vertical-align: middle; aspect-ratio: 1; position: relative; align-items: center; justify-content: center;
|
|
1200
|
+
M3eCircularProgressIndicatorElement.styles = [ProgressElementIndicatorBase.styles, css`:host { display: inline-flex; vertical-align: middle; aspect-ratio: 1; position: relative; align-items: center; justify-content: center; } .progress { --_arc-duration: 1333ms; --_cycle-duration: calc(4 * var(--_arc-duration)); --_linear-rotate-duration: calc(var(--_arc-duration) * 360 / 306); --_indeterminate-easing: cubic-bezier(0.4, 0, 0.2, 1); } .active-track { transition: stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1); } :host([variant="flat"]) .progress { flex: 1; align-self: stretch; pointer-events: none; } .progress, .spinner, .left, .right, .content, .circle { position: absolute; inset: 0; } .content { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .diameter-and-stroke, .amplitude-and-wavelength { visibility: hidden; position: absolute; } .diameter-and-stroke { width: inherit; height: var(--m3e-circular-progress-indicator-thickness, 0.25rem); } .amplitude-and-wavelength { width: var(--m3e-circular-wavy-progress-indicator-amplitude, 0.1rem); height: var(--m3e-circular-wavy-progress-indicator-wavelength, 0.9375rem); } :host([variant="flat"]) { width: var(--m3e-circular-flat-progress-indicator-diameter, 2.5rem); } :host([variant="wavy"]) { width: var(--m3e-circular-wavy-progress-indicator-diameter, 3rem); } :host([variant="flat"][indeterminate]) .progress { animation: linear infinite linear-rotate; animation-duration: var(--_linear-rotate-duration); } :host([variant="flat"][indeterminate]) .spinner { animation: infinite both rotate-arc; animation-duration: var(--_cycle-duration); animation-timing-function: var(--_indeterminate-easing); } :host([variant="wavy"][indeterminate]) .spinner { transform-origin: 50% 50%; animation: wavy-spin ${WAVY_INDETERMINATE_DURATION}s linear infinite; } .left { clip-path: inset(0); inset: 0 50% 0 0; } .right { clip-path: inset(0); inset: 0 0 0 50%; } .circle { animation: expand-arc; animation-iteration-count: infinite; animation-fill-mode: both; animation-duration: var(--_arc-duration), var(--_cycle-duration); animation-timing-function: var(--_indeterminate-easing); } .left .circle { rotate: 135deg; inset: 0 -100% 0 0; } .right .circle { rotate: 100deg; inset: 0 0 0 -100%; animation-delay: calc(-0.5 * var(--_arc-duration)), 0ms; } .track { color: var(--m3e-progress-indicator-track-color, ${DesignToken.color.secondaryContainer}); } .active-track { color: var(--m3e-progress-indicator-color, ${DesignToken.color.primary}); } .wave { animation: spin-reverse 8s linear infinite; transform-origin: 50% 50%; } @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 spin-reverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes wavy-spin { 0% { transform: rotate(0deg); } 10% { transform: rotate(90deg); } 100% { transform: rotate(360deg); } } @media (forced-colors: active) { :host([variant="flat"]) circle { fill: Canvas; } :host([variant="flat"]) .circle { border-color: var(--m3e-progress-indicator-color, ${DesignToken.color.primary}) var(--m3e-progress-indicator-color, ${DesignToken.color.primary}) Canvas Canvas; } } @media (forced-colors: active) { .progress { --m3e-progress-indicator-track-color: GrayText; --m3e-progress-indicator-color: CanvasText; } }`];
|
|
1201
1201
|
/** @private */
|
|
1202
1202
|
M3eCircularProgressIndicatorElement.__nextMaskId = 0;
|
|
1203
1203
|
__decorate([n$1({
|