@m3e/progress-indicator 1.1.4 → 1.1.5
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="${left.size}" height="${left.size}" 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="${right.size}" height="${right.size}" 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="${active.size}" height="${active.size}" viewBox="${active.viewBox}">${degrees > 0 ? svg`<path
|
|
975
975
|
class="active-track"
|
|
976
976
|
d="${active.path}"
|
|
977
977
|
stroke="currentColor"
|
|
@@ -1146,10 +1146,12 @@ _M3eCircularProgressIndicatorElement_drawArc = function _M3eCircularProgressIndi
|
|
|
1146
1146
|
const start = __classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_instances, "m", _M3eCircularProgressIndicatorElement_polarToCartesian).call(this, circle, endAngle);
|
|
1147
1147
|
const end = __classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_instances, "m", _M3eCircularProgressIndicatorElement_polarToCartesian).call(this, circle, startAngle);
|
|
1148
1148
|
const path = `M ${start.x} ${start.y} A ${circle.r} ${circle.r} 0 ${endAngle - startAngle <= 180 ? "0" : "1"} 0 ${end.x} ${end.y}`;
|
|
1149
|
-
const
|
|
1149
|
+
const size = __classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_diameter, "f") + circle.padding * 2;
|
|
1150
|
+
const viewBox = `0 0 ${size} ${size}`;
|
|
1150
1151
|
return {
|
|
1151
1152
|
path,
|
|
1152
|
-
viewBox
|
|
1153
|
+
viewBox,
|
|
1154
|
+
size: size - circle.padding * 2
|
|
1153
1155
|
};
|
|
1154
1156
|
};
|
|
1155
1157
|
_M3eCircularProgressIndicatorElement_drawWavyArc = function _M3eCircularProgressIndicatorElement_drawWavyArc({
|
|
@@ -1197,7 +1199,7 @@ _M3eCircularProgressIndicatorElement_drawWavyArc = function _M3eCircularProgress
|
|
|
1197
1199
|
};
|
|
1198
1200
|
};
|
|
1199
1201
|
/** 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;
|
|
1202
|
+
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
1203
|
/** @private */
|
|
1202
1204
|
M3eCircularProgressIndicatorElement.__nextMaskId = 0;
|
|
1203
1205
|
__decorate([n$1({
|