@m3e/progress-indicator 1.0.6 → 1.1.0
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 +503 -526
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +7 -371
- package/dist/index.min.js.map +1 -1
- package/dist/src/LinearProgressIndicatorElement.d.ts.map +1 -1
- package/package.json +2 -16
package/dist/index.min.js
CHANGED
|
@@ -3,29 +3,29 @@
|
|
|
3
3
|
* Copyright (c) 2025 matraic
|
|
4
4
|
* See LICENSE file in the project root for full license text.
|
|
5
5
|
*/
|
|
6
|
-
import{LitElement as t,css as e,html as r}from"lit";import{AttachInternals as i,Role as a,DesignToken as
|
|
6
|
+
import{LitElement as t,css as e,html as r}from"lit";import{AttachInternals as i,Role as a,DesignToken as n,safeStyleMap as o}from"@m3e/core";function s(t,e,r,i){var a,n=arguments.length,o=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,r,i);else for(var s=t.length-1;s>=0;s--)(a=t[s])&&(o=(n<3?a(o):n>3?a(e,r,o):a(e,r))||o);return n>3&&o&&Object.defineProperty(e,r,o),o}function c(t,e,r,i){if("a"===r&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!i:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?i:"a"===r?i.call(t):i?i.value:e.get(t)}function l(t,e,r,i,a){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!a)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!a:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===i?a.call(t,r):a?a.value=r:e.set(t,r),r}"function"==typeof SuppressedError&&SuppressedError;
|
|
7
7
|
/**
|
|
8
8
|
* @license
|
|
9
9
|
* Copyright 2017 Google LLC
|
|
10
10
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
11
11
|
*/
|
|
12
|
-
const d=t=>(e,r)=>{void 0!==r?r.addInitializer(()=>{customElements.define(t,e)}):customElements.define(t,e)},h=globalThis,
|
|
12
|
+
const d=t=>(e,r)=>{void 0!==r?r.addInitializer(()=>{customElements.define(t,e)}):customElements.define(t,e)},h=globalThis,m=h.ShadowRoot&&(void 0===h.ShadyCSS||h.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,p=Symbol(),f=new WeakMap;
|
|
13
13
|
/**
|
|
14
14
|
* @license
|
|
15
15
|
* Copyright 2019 Google LLC
|
|
16
16
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
17
|
-
*/let u=class{constructor(t,e,r){if(this._$cssResult$=!0,r!==
|
|
17
|
+
*/let u=class{constructor(t,e,r){if(this._$cssResult$=!0,r!==p)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(m&&void 0===t){const r=void 0!==e&&1===e.length;r&&(t=f.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),r&&f.set(e,t))}return t}toString(){return this.cssText}};const y=(t,e)=>{if(m)t.adoptedStyleSheets=e.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const r of e){const e=document.createElement("style"),i=h.litNonce;void 0!==i&&e.setAttribute("nonce",i),e.textContent=r.cssText,t.appendChild(e)}},v=m?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const r of t.cssRules)e+=r.cssText;return(t=>new u("string"==typeof t?t:t+"",void 0,p))(e)})(t):t,{is:g,defineProperty:b,getOwnPropertyDescriptor:_,getOwnPropertyNames:$,getOwnPropertySymbols:w,getPrototypeOf:k}=Object,E=globalThis,S=E.trustedTypes,P=S?S.emptyScript:"",C=E.reactiveElementPolyfillSupport,x=(t,e)=>t,U={toAttribute(t,e){switch(e){case Boolean:t=t?P:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let r=t;switch(e){case Boolean:r=null!==t;break;case Number:r=null===t?null:Number(t);break;case Object:case Array:try{r=JSON.parse(t)}catch(t){r=null}}return r}},O=(t,e)=>!g(t,e),z={attribute:!0,type:String,converter:U,reflect:!1,useDefault:!1,hasChanged:O};
|
|
18
18
|
/**
|
|
19
19
|
* @license
|
|
20
20
|
* Copyright 2017 Google LLC
|
|
21
21
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
22
|
-
*/Symbol.metadata??=Symbol("metadata"),
|
|
22
|
+
*/Symbol.metadata??=Symbol("metadata"),E.litPropertyMetadata??=new WeakMap;class A extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=z){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const r=Symbol(),i=this.getPropertyDescriptor(t,r,e);void 0!==i&&b(this.prototype,t,i)}}static getPropertyDescriptor(t,e,r){const{get:i,set:a}=_(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:i,set(e){const n=i?.call(this);a?.call(this,e),this.requestUpdate(t,n,r)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??z}static _$Ei(){if(this.hasOwnProperty(x("elementProperties")))return;const t=k(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(x("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(x("properties"))){const t=this.properties,e=[...$(t),...w(t)];for(const r of e)this.createProperty(r,t[r])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,r]of e)this.elementProperties.set(t,r)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const r=this._$Eu(t,e);void 0!==r&&this._$Eh.set(r,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const r=new Set(t.flat(1/0).reverse());for(const t of r)e.unshift(v(t))}else void 0!==t&&e.push(v(t));return e}static _$Eu(t,e){const r=e.attribute;return!1===r?void 0:"string"==typeof r?r:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this))}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const r of e.keys())this.hasOwnProperty(r)&&(t.set(r,this[r]),delete this[r]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return y(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,r){this._$AK(t,r)}_$ET(t,e){const r=this.constructor.elementProperties.get(t),i=this.constructor._$Eu(t,r);if(void 0!==i&&!0===r.reflect){const a=(void 0!==r.converter?.toAttribute?r.converter:U).toAttribute(e,r.type);this._$Em=t,null==a?this.removeAttribute(i):this.setAttribute(i,a),this._$Em=null}}_$AK(t,e){const r=this.constructor,i=r._$Eh.get(t);if(void 0!==i&&this._$Em!==i){const t=r.getPropertyOptions(i),a="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:U;this._$Em=i;const n=a.fromAttribute(e,t.type);this[i]=n??this._$Ej?.get(i)??n,this._$Em=null}}requestUpdate(t,e,r){if(void 0!==t){const i=this.constructor,a=this[t];if(r??=i.getPropertyOptions(t),!((r.hasChanged??O)(a,e)||r.useDefault&&r.reflect&&a===this._$Ej?.get(t)&&!this.hasAttribute(i._$Eu(t,r))))return;this.C(t,e,r)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:r,reflect:i,wrapped:a},n){r&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,n??e??this[t]),!0!==a||void 0!==n)||(this._$AL.has(t)||(this.hasUpdated||r||(e=void 0),this._$AL.set(t,e)),!0===i&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,e]of this._$Ep)this[t]=e;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,r]of t){const{wrapped:t}=r,i=this[e];!0!==t||this._$AL.has(e)||void 0===i||this.C(e,void 0,r,i)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach(t=>t.hostUpdate?.()),this.update(e)):this._$EM()}catch(e){throw t=!1,this._$EM(),e}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM()}updated(t){}firstUpdated(t){}}A.elementStyles=[],A.shadowRootOptions={mode:"open"},A[x("elementProperties")]=new Map,A[x("finalized")]=new Map,C?.({ReactiveElement:A}),(E.reactiveElementVersions??=[]).push("2.1.1");
|
|
23
23
|
/**
|
|
24
24
|
* @license
|
|
25
25
|
* Copyright 2017 Google LLC
|
|
26
26
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
27
27
|
*/
|
|
28
|
-
const
|
|
28
|
+
const M={attribute:!0,type:String,converter:U,reflect:!1,hasChanged:O},X=(t=M,e,r)=>{const{kind:i,metadata:a}=r;let n=globalThis.litPropertyMetadata.get(a);if(void 0===n&&globalThis.litPropertyMetadata.set(a,n=new Map),"setter"===i&&((t=Object.create(t)).wrapped=!0),n.set(r.name,t),"accessor"===i){const{name:i}=r;return{set(r){const a=e.get.call(this);e.set.call(this,r),this.requestUpdate(i,a,t)},init(e){return void 0!==e&&this.C(i,void 0,t,e),e}}}if("setter"===i){const{name:i}=r;return function(r){const a=this[i];e.call(this,r),this.requestUpdate(i,a,t)}}throw Error("Unsupported decorator location: "+i)};function q(t){return(e,r)=>"object"==typeof r?X(t,e,r):((t,e,r)=>{const i=e.hasOwnProperty(r);return e.constructor.createProperty(r,t),i?Object.getOwnPropertyDescriptor(e,r):void 0})(t,e,r)}class R extends(i(a(t,"progressbar"),!0)){constructor(){super(...arguments),this.value=0,this.max=100}connectedCallback(){super.connectedCallback(),this.ariaValueMin="0"}update(t){super.update(t),t.has("value")&&(this.ariaValueNow=`${this.value}`),t.has("max")&&(this.ariaValueMax=`${this.max}`)}}
|
|
29
29
|
/**
|
|
30
30
|
* Adapted from Angular Material Progress Spinner
|
|
31
31
|
* Source: https://github.com/angular/components/tree/main/src/material/progress-spinner
|
|
@@ -34,27 +34,7 @@ const z={attribute:!0,type:String,converter:U,reflect:!1,hasChanged:O},R=(t=z,e,
|
|
|
34
34
|
* Copyright (c) 2025 Google LLC
|
|
35
35
|
* See LICENSE file in the project root for full license text.
|
|
36
36
|
*/
|
|
37
|
-
var
|
|
38
|
-
@media (forced-colors: active) {
|
|
39
|
-
:host {
|
|
40
|
-
--m3e-progress-indicator-color: CanvasText;
|
|
41
|
-
--m3e-progress-indicator-track-color: Canvas;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
`,n([T({type:Number,reflect:!0})],j.prototype,"value",void 0),n([T({type:Number})],j.prototype,"max",void 0);let N=class extends j{constructor(){super(...arguments),X.set(this,40),q.set(this,10),this.indeterminate=!1}get diameter(){return c(this,X,"f")}set diameter(t){l(this,X,t,"f"),this.style.setProperty("--_diameter",`${t}`)}get strokeWidth(){return c(this,q,"f")}set strokeWidth(t){l(this,q,t,"f"),this.style.setProperty("--_stroke-width",`${t}`)}render(){return r`<div class="progress" aria-hidden="true">
|
|
45
|
-
${this.indeterminate?r`<div class="spinner">
|
|
46
|
-
<div class="left"><div class="circle"></div></div>
|
|
47
|
-
<div class="right"><div class="circle"></div></div>
|
|
48
|
-
</div>`:r`<svg viewBox="0 0 4800 4800">
|
|
49
|
-
<circle class="track" pathLength="100"></circle>
|
|
50
|
-
<circle
|
|
51
|
-
class="active-track"
|
|
52
|
-
pathLength="100"
|
|
53
|
-
stroke-dashoffset="${100*(1-this.value/this.max)}"
|
|
54
|
-
></circle>
|
|
55
|
-
</svg>`}
|
|
56
|
-
</div>
|
|
57
|
-
<div class="content"><slot></slot></div>`}};
|
|
37
|
+
var T,j;R.styles=e`@media (forced-colors: active) { :host { --m3e-progress-indicator-color: CanvasText; --m3e-progress-indicator-track-color: Canvas; } }`,s([q({type:Number,reflect:!0})],R.prototype,"value",void 0),s([q({type:Number})],R.prototype,"max",void 0);let N=class extends R{constructor(){super(...arguments),T.set(this,40),j.set(this,10),this.indeterminate=!1}get diameter(){return c(this,T,"f")}set diameter(t){l(this,T,t,"f"),this.style.setProperty("--_diameter",`${t}`)}get strokeWidth(){return c(this,j,"f")}set strokeWidth(t){l(this,j,t,"f"),this.style.setProperty("--_stroke-width",`${t}`)}render(){return r`<div class="progress" aria-hidden="true">${this.indeterminate?r`<div class="spinner"><div class="left"><div class="circle"></div></div><div class="right"><div class="circle"></div></div></div>`:r`<svg viewBox="0 0 4800 4800"><circle class="track" pathLength="100"></circle><circle class="active-track" pathLength="100" stroke-dashoffset="${100*(1-this.value/this.max)}"></circle></svg>`}</div><div class="content"><slot></slot></div>`}};
|
|
58
38
|
/**
|
|
59
39
|
* Adapted from Angular Material Progress Bar
|
|
60
40
|
* Source: https://github.com/angular/components/blob/main/src/material/progress-bar/progress-bar.ts
|
|
@@ -63,349 +43,5 @@ var X,q;j.styles=e`
|
|
|
63
43
|
* Copyright (c) 2025 Google LLC
|
|
64
44
|
* See LICENSE file in the project root for full license text.
|
|
65
45
|
*/
|
|
66
|
-
var D,L,W;X=new WeakMap,q=new WeakMap,N.styles=[j.styles,e`
|
|
67
|
-
:host {
|
|
68
|
-
display: inline-flex;
|
|
69
|
-
vertical-align: middle;
|
|
70
|
-
width: var(--_diameter);
|
|
71
|
-
height: var(--_diameter);
|
|
72
|
-
position: relative;
|
|
73
|
-
align-items: center;
|
|
74
|
-
justify-content: center;
|
|
75
|
-
contain: strict;
|
|
76
|
-
|
|
77
|
-
--_arc-duration: 1333ms;
|
|
78
|
-
--_cycle-duration: calc(4 * var(--_arc-duration));
|
|
79
|
-
--_linear-rotate-duration: calc(var(--_arc-duration) * 360 / 306);
|
|
80
|
-
--_indeterminate-easing: cubic-bezier(0.4, 0, 0.2, 1);
|
|
81
|
-
--_container-padding: 0px;
|
|
82
|
-
--_diameter: ${40}px;
|
|
83
|
-
--_stroke-width: ${10};
|
|
84
|
-
}
|
|
85
|
-
svg {
|
|
86
|
-
transform: rotate(-90deg);
|
|
87
|
-
}
|
|
88
|
-
circle {
|
|
89
|
-
cx: 50%;
|
|
90
|
-
cy: 50%;
|
|
91
|
-
r: calc(50% * (1 - var(--_stroke-width) / 100));
|
|
92
|
-
stroke-width: calc(var(--_stroke-width) * 1%);
|
|
93
|
-
stroke-dasharray: 100;
|
|
94
|
-
fill: transparent;
|
|
95
|
-
}
|
|
96
|
-
.active-track {
|
|
97
|
-
transition: stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1);
|
|
98
|
-
stroke: var(--m3e-progress-indicator-color, ${o.color.primary});
|
|
99
|
-
}
|
|
100
|
-
.track {
|
|
101
|
-
stroke: var(--m3e-progress-indicator-track-color, ${o.color.secondaryContainer});
|
|
102
|
-
}
|
|
103
|
-
.progress {
|
|
104
|
-
flex: 1;
|
|
105
|
-
align-self: stretch;
|
|
106
|
-
margin: var(--_container-padding);
|
|
107
|
-
pointer-events: none;
|
|
108
|
-
}
|
|
109
|
-
.progress,
|
|
110
|
-
.spinner,
|
|
111
|
-
.left,
|
|
112
|
-
.right,
|
|
113
|
-
.content,
|
|
114
|
-
.circle {
|
|
115
|
-
position: absolute;
|
|
116
|
-
inset: 0;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
.content {
|
|
120
|
-
width: 100%;
|
|
121
|
-
height: 100%;
|
|
122
|
-
display: flex;
|
|
123
|
-
align-items: center;
|
|
124
|
-
justify-content: center;
|
|
125
|
-
}
|
|
126
|
-
:host([indeterminate]) {
|
|
127
|
-
content-visibility: auto;
|
|
128
|
-
}
|
|
129
|
-
:host([indeterminate]) .progress {
|
|
130
|
-
animation: linear infinite linear-rotate;
|
|
131
|
-
animation-duration: var(--_linear-rotate-duration);
|
|
132
|
-
}
|
|
133
|
-
.spinner {
|
|
134
|
-
animation: infinite both rotate-arc;
|
|
135
|
-
animation-duration: var(--_cycle-duration);
|
|
136
|
-
animation-timing-function: var(--_indeterminate-easing);
|
|
137
|
-
}
|
|
138
|
-
.left {
|
|
139
|
-
overflow: hidden;
|
|
140
|
-
inset: 0 50% 0 0;
|
|
141
|
-
}
|
|
142
|
-
.right {
|
|
143
|
-
overflow: hidden;
|
|
144
|
-
inset: 0 0 0 50%;
|
|
145
|
-
}
|
|
146
|
-
.circle {
|
|
147
|
-
box-sizing: border-box;
|
|
148
|
-
border-radius: 50%;
|
|
149
|
-
border: solid calc(calc(var(--_stroke-width) / 100) * calc(var(--_diameter) - 2 * var(--_container-padding)));
|
|
150
|
-
border-color: var(--m3e-progress-indicator-color, ${o.color.primary})
|
|
151
|
-
var(--m3e-progress-indicator-color, ${o.color.primary}) transparent transparent;
|
|
152
|
-
animation: expand-arc;
|
|
153
|
-
animation-iteration-count: infinite;
|
|
154
|
-
animation-fill-mode: both;
|
|
155
|
-
animation-duration: var(--_arc-duration), var(--_cycle-duration);
|
|
156
|
-
animation-timing-function: var(--_indeterminate-easing);
|
|
157
|
-
}
|
|
158
|
-
.left .circle {
|
|
159
|
-
rotate: 135deg;
|
|
160
|
-
inset: 0 -100% 0 0;
|
|
161
|
-
}
|
|
162
|
-
.right .circle {
|
|
163
|
-
rotate: 100deg;
|
|
164
|
-
inset: 0 0 0 -100%;
|
|
165
|
-
animation-delay: calc(-0.5 * var(--_arc-duration)), 0ms;
|
|
166
|
-
}
|
|
167
|
-
@keyframes expand-arc {
|
|
168
|
-
0% {
|
|
169
|
-
transform: rotate(265deg);
|
|
170
|
-
}
|
|
171
|
-
50% {
|
|
172
|
-
transform: rotate(130deg);
|
|
173
|
-
}
|
|
174
|
-
100% {
|
|
175
|
-
transform: rotate(265deg);
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
@keyframes rotate-arc {
|
|
179
|
-
12.5% {
|
|
180
|
-
transform: rotate(135deg);
|
|
181
|
-
}
|
|
182
|
-
25% {
|
|
183
|
-
transform: rotate(270deg);
|
|
184
|
-
}
|
|
185
|
-
37.5% {
|
|
186
|
-
transform: rotate(405deg);
|
|
187
|
-
}
|
|
188
|
-
50% {
|
|
189
|
-
transform: rotate(540deg);
|
|
190
|
-
}
|
|
191
|
-
62.5% {
|
|
192
|
-
transform: rotate(675deg);
|
|
193
|
-
}
|
|
194
|
-
75% {
|
|
195
|
-
transform: rotate(810deg);
|
|
196
|
-
}
|
|
197
|
-
87.5% {
|
|
198
|
-
transform: rotate(945deg);
|
|
199
|
-
}
|
|
200
|
-
100% {
|
|
201
|
-
transform: rotate(1080deg);
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
|
-
@keyframes linear-rotate {
|
|
205
|
-
to {
|
|
206
|
-
transform: rotate(360deg);
|
|
207
|
-
}
|
|
208
|
-
}
|
|
209
|
-
@media (forced-colors: active) {
|
|
210
|
-
circle {
|
|
211
|
-
fill: Canvas;
|
|
212
|
-
}
|
|
213
|
-
.circle {
|
|
214
|
-
border-color: var(--m3e-progress-indicator-color, ${o.color.primary})
|
|
215
|
-
var(--m3e-progress-indicator-color, ${o.color.primary}) Canvas Canvas;
|
|
216
|
-
}
|
|
217
|
-
}
|
|
218
|
-
`],n([T({type:Boolean,reflect:!0})],N.prototype,"indeterminate",void 0),n([T({type:Number})],N.prototype,"diameter",null),n([T({attribute:"stroke-width",type:Number})],N.prototype,"strokeWidth",null),N=n([d("m3e-circular-progress-indicator")],N);let V=W=class extends j{constructor(){super(...arguments),D.set(this,"m3e-progress-pattern-"+W.__nextPatternId++),L.set(this,""),this.mode="determinate",this.bufferValue=0}connectedCallback(){super.connectedCallback();const t=document?.location??null,e=t?(t.pathname+t.search).split("#")[0]:"";l(this,L,`url(${e}#${c(this,D,"f")})`,"f")}render(){return r`<div class="progress" aria-hidden="true">
|
|
219
|
-
<div
|
|
220
|
-
class="wrapper"
|
|
221
|
-
style=${s({"--_value":`${this.value}`,"--_buffer-value":`${this.bufferValue}`,"--_max":`${this.max}`})}
|
|
222
|
-
>
|
|
223
|
-
<svg width="100%" height="4" class="background element">
|
|
224
|
-
<defs>
|
|
225
|
-
<pattern id="${c(this,D,"f")}" x="4" y="0" width="8" height="4" patternUnits="userSpaceOnUse">
|
|
226
|
-
<circle cx="2" cy="2" r="2" />
|
|
227
|
-
</pattern>
|
|
228
|
-
</defs>
|
|
229
|
-
<rect fill="${c(this,L,"f")}" width="100%" height="100%" />
|
|
230
|
-
</svg>
|
|
231
|
-
<div class="buffer element"></div>
|
|
232
|
-
<div class="primary fill element"></div>
|
|
233
|
-
<div class="secondary fill element"></div>
|
|
234
|
-
</div>
|
|
235
|
-
</div>`}};D=new WeakMap,L=new WeakMap,V.styles=[j.styles,e`
|
|
236
|
-
:host {
|
|
237
|
-
display: block;
|
|
238
|
-
height: var(--m3e-linear-progress-indicator-thickness, 0.25rem);
|
|
239
|
-
overflow: hidden;
|
|
240
|
-
position: relative;
|
|
241
|
-
transform: opacity var(--_piece-animation-duration) linear;
|
|
242
|
-
border-radius: var(--m3e-linear-progress-indicator-shape, ${o.shape.corner.extraSmall});
|
|
243
|
-
|
|
244
|
-
--_piece-animation-duration: 250ms;
|
|
245
|
-
--_full-animation-duration: 2000ms;
|
|
246
|
-
}
|
|
247
|
-
:host([mode="indeterminate"]),
|
|
248
|
-
:host([mode="query"]) {
|
|
249
|
-
content-visibility: auto;
|
|
250
|
-
}
|
|
251
|
-
.progress {
|
|
252
|
-
pointer-events: none;
|
|
253
|
-
}
|
|
254
|
-
.progress,
|
|
255
|
-
.wrapper {
|
|
256
|
-
height: 100%;
|
|
257
|
-
}
|
|
258
|
-
.element,
|
|
259
|
-
.fill::after {
|
|
260
|
-
position: absolute;
|
|
261
|
-
height: 100%;
|
|
262
|
-
width: 100%;
|
|
263
|
-
}
|
|
264
|
-
.background {
|
|
265
|
-
width: calc(100% + 0.625rem);
|
|
266
|
-
fill: var(--m3e-progress-indicator-track-color, ${o.color.secondaryContainer});
|
|
267
|
-
}
|
|
268
|
-
.buffer {
|
|
269
|
-
transform-origin: top left;
|
|
270
|
-
transition: transform var(--_piece-animation-duration) ease;
|
|
271
|
-
background-color: var(--m3e-progress-indicator-track-color, ${o.color.secondaryContainer});
|
|
272
|
-
}
|
|
273
|
-
.primary {
|
|
274
|
-
transform: scale3d(calc(var(--_value, 0) / var(--_max)), 1, 1);
|
|
275
|
-
}
|
|
276
|
-
.secondary {
|
|
277
|
-
display: none;
|
|
278
|
-
}
|
|
279
|
-
.fill {
|
|
280
|
-
animation: none;
|
|
281
|
-
transform-origin: top left;
|
|
282
|
-
transition: transform var(--_piece-animation-duration) ease;
|
|
283
|
-
}
|
|
284
|
-
.fill::after {
|
|
285
|
-
animation: none;
|
|
286
|
-
content: "";
|
|
287
|
-
display: inline-block;
|
|
288
|
-
left: 0;
|
|
289
|
-
background-color: var(--m3e-progress-indicator-color, ${o.color.primary});
|
|
290
|
-
}
|
|
291
|
-
:host([mode="query"]) {
|
|
292
|
-
transform: rotateZ(180deg);
|
|
293
|
-
}
|
|
294
|
-
:host([mode="indeterminate"]) .fill,
|
|
295
|
-
:host([mode="query"]) .fill {
|
|
296
|
-
transition: none;
|
|
297
|
-
}
|
|
298
|
-
:host([mode="indeterminate"]) .primary,
|
|
299
|
-
:host([mode="query"]) .primary {
|
|
300
|
-
backface-visibility: hidden;
|
|
301
|
-
animation: primary-indeterminate-translate var(--_full-animation-duration) infinite linear;
|
|
302
|
-
left: -145.166611%;
|
|
303
|
-
}
|
|
304
|
-
:host([mode="indeterminate"]) .primary.fill::after,
|
|
305
|
-
:host([mode="query"]) .primary.fill::after {
|
|
306
|
-
backface-visibility: hidden;
|
|
307
|
-
animation: primary-indeterminate-scale var(--_full-animation-duration) infinite linear;
|
|
308
|
-
}
|
|
309
|
-
:host([mode="indeterminate"]) .secondary,
|
|
310
|
-
:host([mode="query"]) .secondary {
|
|
311
|
-
display: block;
|
|
312
|
-
backface-visibility: hidden;
|
|
313
|
-
animation: secondary-indeterminate-translate var(--_full-animation-duration) infinite linear;
|
|
314
|
-
left: -54.888891%;
|
|
315
|
-
}
|
|
316
|
-
:host([mode="indeterminate"]) .secondary.fill::after,
|
|
317
|
-
:host([mode="query"]) .secondary.fill::after {
|
|
318
|
-
backface-visibility: hidden;
|
|
319
|
-
animation: secondary-indeterminate-scale var(--_full-animation-duration) infinite linear;
|
|
320
|
-
}
|
|
321
|
-
:host([mode="determinate"]) .background,
|
|
322
|
-
:host([mode="indeterminate"]) .background,
|
|
323
|
-
:host([mode="query"]) .background {
|
|
324
|
-
fill: transparent !important;
|
|
325
|
-
}
|
|
326
|
-
:host([mode="buffer"]) .buffer {
|
|
327
|
-
transform: scale3d(calc(var(--_buffer-value, 0) / var(--_max)), 1, 1);
|
|
328
|
-
}
|
|
329
|
-
:host([mode="buffer"]) .background {
|
|
330
|
-
display: block;
|
|
331
|
-
backface-visibility: hidden;
|
|
332
|
-
animation: background-scroll var(--_piece-animation-duration) infinite linear;
|
|
333
|
-
}
|
|
334
|
-
@keyframes primary-indeterminate-translate {
|
|
335
|
-
0% {
|
|
336
|
-
transform: translateX(0);
|
|
337
|
-
}
|
|
338
|
-
20% {
|
|
339
|
-
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
|
|
340
|
-
transform: translateX(0);
|
|
341
|
-
}
|
|
342
|
-
59.15% {
|
|
343
|
-
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
|
|
344
|
-
transform: translateX(83.67142%);
|
|
345
|
-
}
|
|
346
|
-
100% {
|
|
347
|
-
transform: translateX(200.611057%);
|
|
348
|
-
}
|
|
349
|
-
}
|
|
350
|
-
@keyframes primary-indeterminate-scale {
|
|
351
|
-
0% {
|
|
352
|
-
transform: scaleX(0.08);
|
|
353
|
-
}
|
|
354
|
-
36.65% {
|
|
355
|
-
animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
|
|
356
|
-
transform: scaleX(0.08);
|
|
357
|
-
}
|
|
358
|
-
69.15% {
|
|
359
|
-
animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
|
|
360
|
-
transform: scaleX(0.661479);
|
|
361
|
-
}
|
|
362
|
-
100% {
|
|
363
|
-
transform: scaleX(0.08);
|
|
364
|
-
}
|
|
365
|
-
}
|
|
366
|
-
@keyframes secondary-indeterminate-translate {
|
|
367
|
-
0% {
|
|
368
|
-
animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
|
|
369
|
-
transform: translateX(0);
|
|
370
|
-
}
|
|
371
|
-
25% {
|
|
372
|
-
animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
|
|
373
|
-
transform: translateX(37.651913%);
|
|
374
|
-
}
|
|
375
|
-
48.35% {
|
|
376
|
-
animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
|
|
377
|
-
transform: translateX(84.386165%);
|
|
378
|
-
}
|
|
379
|
-
100% {
|
|
380
|
-
transform: translateX(160.277782%);
|
|
381
|
-
}
|
|
382
|
-
}
|
|
383
|
-
@keyframes secondary-indeterminate-scale {
|
|
384
|
-
0% {
|
|
385
|
-
animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
|
|
386
|
-
transform: scaleX(0.08);
|
|
387
|
-
}
|
|
388
|
-
19.15% {
|
|
389
|
-
animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
|
|
390
|
-
transform: scaleX(0.457104);
|
|
391
|
-
}
|
|
392
|
-
44.15% {
|
|
393
|
-
animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
|
|
394
|
-
transform: scaleX(0.72796);
|
|
395
|
-
}
|
|
396
|
-
100% {
|
|
397
|
-
transform: scaleX(0.08);
|
|
398
|
-
}
|
|
399
|
-
}
|
|
400
|
-
@keyframes background-scroll {
|
|
401
|
-
to {
|
|
402
|
-
transform: translateX(calc(calc(0px - 0.25rem) * 2));
|
|
403
|
-
}
|
|
404
|
-
}
|
|
405
|
-
@media (forced-colors: active) {
|
|
406
|
-
.background {
|
|
407
|
-
fill: GrayText;
|
|
408
|
-
}
|
|
409
|
-
}
|
|
410
|
-
`],V.__nextPatternId=0,n([T({reflect:!0})],V.prototype,"mode",void 0),n([T({attribute:"buffer-value",type:Number,reflect:!0})],V.prototype,"bufferValue",void 0),V=W=n([d("m3e-linear-progress-indicator")],V);export{N as M3eCircularProgressIndicatorElement,V as M3eLinearProgressIndicatorElement,j as ProgressElementIndicatorBase};
|
|
46
|
+
var D,L,W;T=new WeakMap,j=new WeakMap,N.styles=[R.styles,e`:host { display: inline-flex; vertical-align: middle; width: var(--_diameter); height: var(--_diameter); position: relative; align-items: center; justify-content: center; contain: strict; --_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); --_container-padding: 0px; --_diameter: ${40}px; --_stroke-width: ${10}; } svg { transform: rotate(-90deg); } circle { cx: 50%; cy: 50%; r: calc(50% * (1 - var(--_stroke-width) / 100)); stroke-width: calc(var(--_stroke-width) * 1%); stroke-dasharray: 100; fill: transparent; } .active-track { transition: stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1); stroke: var(--m3e-progress-indicator-color, ${n.color.primary}); } .track { stroke: var(--m3e-progress-indicator-track-color, ${n.color.secondaryContainer}); } .progress { flex: 1; align-self: stretch; margin: var(--_container-padding); 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; } :host([indeterminate]) { content-visibility: auto; } :host([indeterminate]) .progress { animation: linear infinite linear-rotate; animation-duration: var(--_linear-rotate-duration); } .spinner { animation: infinite both rotate-arc; animation-duration: var(--_cycle-duration); animation-timing-function: var(--_indeterminate-easing); } .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(calc(var(--_stroke-width) / 100) * calc(var(--_diameter) - 2 * var(--_container-padding))); border-color: var(--m3e-progress-indicator-color, ${n.color.primary}) var(--m3e-progress-indicator-color, ${n.color.primary}) transparent transparent; 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; } @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); } } @media (forced-colors: active) { circle { fill: Canvas; } .circle { border-color: var(--m3e-progress-indicator-color, ${n.color.primary}) var(--m3e-progress-indicator-color, ${n.color.primary}) Canvas Canvas; } }`],s([q({type:Boolean,reflect:!0})],N.prototype,"indeterminate",void 0),s([q({type:Number})],N.prototype,"diameter",null),s([q({attribute:"stroke-width",type:Number})],N.prototype,"strokeWidth",null),N=s([d("m3e-circular-progress-indicator")],N);let V=W=class extends R{constructor(){super(...arguments),D.set(this,"m3e-progress-pattern-"+W.__nextPatternId++),L.set(this,""),this.mode="determinate",this.bufferValue=0}connectedCallback(){super.connectedCallback();const t=document?.location??null,e=t?(t.pathname+t.search).split("#")[0]:"";l(this,L,`url(${e}#${c(this,D,"f")})`,"f")}render(){return r`<div class="progress" aria-hidden="true"><div class="wrapper" style="${o({"--_value":`${this.value}`,"--_buffer-value":`${this.bufferValue}`,"--_max":`${this.max}`})}"><svg width="100%" height="4" class="background element"><defs><pattern id="${c(this,D,"f")}" x="4" y="0" width="8" height="4" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="2"/></pattern></defs><rect fill="${c(this,L,"f")}" width="100%" height="100%"/></svg><div class="buffer element"></div><div class="primary fill element"></div><div class="secondary fill element"></div></div></div>`}};D=new WeakMap,L=new WeakMap,V.styles=[R.styles,e`:host { display: block; height: var(--m3e-linear-progress-indicator-thickness, 0.25rem); overflow: hidden; position: relative; transform: opacity var(--_piece-animation-duration) linear; border-radius: var(--m3e-linear-progress-indicator-shape, ${n.shape.corner.extraSmall}); --_piece-animation-duration: 250ms; --_full-animation-duration: 2000ms; } :host([mode="indeterminate"]), :host([mode="query"]) { content-visibility: auto; } .progress { pointer-events: none; } .progress, .wrapper { height: 100%; } .element, .fill::after { position: absolute; height: 100%; width: 100%; } .background { width: calc(100% + 0.625rem); fill: var(--m3e-progress-indicator-track-color, ${n.color.secondaryContainer}); } .buffer { transition: transform var(--_piece-animation-duration) ease; background-color: var(--m3e-progress-indicator-track-color, ${n.color.secondaryContainer}); } .primary { transform: scale3d(calc(var(--_value, 0) / var(--_max)), 1, 1); } .secondary { display: none; } .fill { animation: none; transition: transform var(--_piece-animation-duration) ease; } :host(:not(:dir(rtl))) .buffer, :host(:not(:dir(rtl))) .fill { transform-origin: top left; } :host(:dir(rtl)) .buffer, :host(:dir(rtl)) .fill { transform-origin: top right; } .fill::after { animation: none; content: ""; display: inline-block; left: 0; background-color: var(--m3e-progress-indicator-color, ${n.color.primary}); } :host([mode="query"]) { transform: rotateZ(180deg); } :host([mode="indeterminate"]) .fill, :host([mode="query"]) .fill { transition: none; } :host([mode="indeterminate"]) .primary, :host([mode="query"]) .primary { backface-visibility: hidden; } :host(:not(:dir(rtl))[mode="indeterminate"]) .primary, :host(:not(:dir(rtl))[mode="query"]) .primary { animation: primary-indeterminate-translate var(--_full-animation-duration) infinite linear; left: -145.166611%; } :host(:dir(rtl)[mode="indeterminate"]) .primary, :host(:dir(rtl)[mode="query"]) .primary { animation: primary-indeterminate-translate-rtl var(--_full-animation-duration) infinite linear; left: 145.166611%; } :host([mode="indeterminate"]) .primary.fill::after, :host([mode="query"]) .primary.fill::after { backface-visibility: hidden; animation: primary-indeterminate-scale var(--_full-animation-duration) infinite linear; } :host([mode="indeterminate"]) .secondary, :host([mode="query"]) .secondary { display: block; backface-visibility: hidden; } :host(:not(:dir(rtl))[mode="indeterminate"]) .secondary, :host(:not(:dir(rtl))[mode="query"]) .secondary { animation: secondary-indeterminate-translate var(--_full-animation-duration) infinite linear; left: -54.888891%; } :host(:dir(rtl)[mode="indeterminate"]) .secondary, :host(:dir(rtl)[mode="query"]) .secondary { animation: secondary-indeterminate-translate-rtl var(--_full-animation-duration) infinite linear; left: 54.888891%; } :host([mode="indeterminate"]) .secondary.fill::after, :host([mode="query"]) .secondary.fill::after { backface-visibility: hidden; animation: secondary-indeterminate-scale var(--_full-animation-duration) infinite linear; } :host([mode="determinate"]) .background, :host([mode="indeterminate"]) .background, :host([mode="query"]) .background { fill: transparent !important; } :host([mode="buffer"]) .buffer { transform: scale3d(calc(var(--_buffer-value, 0) / var(--_max)), 1, 1); } :host([mode="buffer"]) .background { display: block; backface-visibility: hidden; } :host(:not(:dir(rtl))[mode="buffer"]) .background { animation: background-scroll var(--_piece-animation-duration) infinite linear; } :host(:dir(rtl)[mode="buffer"]) .background { animation: background-scroll-rtl var(--_piece-animation-duration) infinite linear; } @keyframes primary-indeterminate-translate { 0% { transform: translateX(0); } 20% { animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819); transform: translateX(0); } 59.15% { animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352); transform: translateX(83.67142%); } 100% { transform: translateX(200.611057%); } } @keyframes primary-indeterminate-translate-rtl { 0% { transform: translateX(0); } 20% { animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819); transform: translateX(0); } 59.15% { animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352); transform: translateX(-83.67142%); } 100% { transform: translateX(-200.611057%); } } @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-translate { 0% { animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685); transform: translateX(0); } 25% { animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712); transform: translateX(37.651913%); } 48.35% { animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026); transform: translateX(84.386165%); } 100% { transform: translateX(160.277782%); } } @keyframes secondary-indeterminate-translate-rtl { 0% { animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685); transform: translateX(0); } 25% { animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712); transform: translateX(-37.651913%); } 48.35% { animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026); transform: translateX(-84.386165%); } 100% { transform: translateX(-160.277782%); } } @keyframes secondary-indeterminate-scale { 0% { animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685); transform: scaleX(0.08); } 19.15% { animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712); transform: scaleX(0.457104); } 44.15% { animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026); transform: scaleX(0.72796); } 100% { transform: scaleX(0.08); } } @keyframes background-scroll { to { transform: translateX(calc(calc(0px - 0.25rem) * 2)); } } @keyframes background-scroll-rtl { to { transform: translateX(calc(0px - calc(calc(0px - 0.25rem) * 2))); } } @media (forced-colors: active) { .background { fill: GrayText; } }`],V.__nextPatternId=0,s([q({reflect:!0})],V.prototype,"mode",void 0),s([q({attribute:"buffer-value",type:Number,reflect:!0})],V.prototype,"bufferValue",void 0),V=W=s([d("m3e-linear-progress-indicator")],V);export{N as M3eCircularProgressIndicatorElement,V as M3eLinearProgressIndicatorElement,R as ProgressElementIndicatorBase};
|
|
411
47
|
//# sourceMappingURL=index.min.js.map
|