@m3e/progress-indicator 1.0.5 → 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.
Files changed (6) hide show
  1. package/dist/index.js +503 -526
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.min.js +7 -371
  4. package/dist/index.min.js.map +1 -1
  5. package/dist/src/LinearProgressIndicatorElement.d.ts.map +1 -1
  6. package/package.json +2 -16
package/dist/index.js CHANGED
@@ -19,33 +19,30 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
19
19
  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
20
20
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
21
21
  PERFORMANCE OF THIS SOFTWARE.
22
- ***************************************************************************** */
23
- /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
24
-
25
-
26
- function __decorate(decorators, target, key, desc) {
27
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
28
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
29
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
30
- return c > 3 && r && Object.defineProperty(target, key, r), r;
31
- }
32
-
33
- function __classPrivateFieldGet(receiver, state, kind, f) {
34
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
35
- if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
36
- return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
37
- }
38
-
39
- function __classPrivateFieldSet(receiver, state, value, kind, f) {
40
- if (kind === "m") throw new TypeError("Private method is not writable");
41
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
42
- if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
43
- return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
44
- }
45
-
46
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
47
- var e = new Error(message);
48
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
22
+ ***************************************************************************** */
23
+ /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
24
+
25
+ function __decorate(decorators, target, key, desc) {
26
+ var c = arguments.length,
27
+ r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
28
+ d;
29
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
30
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
31
+ }
32
+ function __classPrivateFieldGet(receiver, state, kind, f) {
33
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
34
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
35
+ return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
36
+ }
37
+ function __classPrivateFieldSet(receiver, state, value, kind, f) {
38
+ if (kind === "m") throw new TypeError("Private method is not writable");
39
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
40
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
41
+ return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
42
+ }
43
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
44
+ var e = new Error(message);
45
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
49
46
  };
50
47
 
51
48
  /**
@@ -53,73 +50,413 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
53
50
  * Copyright 2017 Google LLC
54
51
  * SPDX-License-Identifier: BSD-3-Clause
55
52
  */
56
- const t$1=t=>(e,o)=>{ void 0!==o?o.addInitializer((()=>{customElements.define(t,e);})):customElements.define(t,e);};
53
+ const t$1 = t => (e, o) => {
54
+ void 0 !== o ? o.addInitializer(() => {
55
+ customElements.define(t, e);
56
+ }) : customElements.define(t, e);
57
+ };
57
58
 
58
59
  /**
59
60
  * @license
60
61
  * Copyright 2019 Google LLC
61
62
  * SPDX-License-Identifier: BSD-3-Clause
62
63
  */
63
- const t=globalThis,e$1=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),o$2=new WeakMap;let n$2 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$1&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$2.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$2.set(s,t));}return t}toString(){return this.cssText}};const r$2=t=>new n$2("string"==typeof t?t:t+"",void 0,s),S=(s,o)=>{if(e$1)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$1=e$1?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2(e)})(t):t;
64
+ const t = globalThis,
65
+ e$1 = t.ShadowRoot && (void 0 === t.ShadyCSS || t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype,
66
+ s = Symbol(),
67
+ o$2 = new WeakMap();
68
+ let n$2 = class n {
69
+ constructor(t, e, o) {
70
+ if (this._$cssResult$ = true, o !== s) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
71
+ this.cssText = t, this.t = e;
72
+ }
73
+ get styleSheet() {
74
+ let t = this.o;
75
+ const s = this.t;
76
+ if (e$1 && void 0 === t) {
77
+ const e = void 0 !== s && 1 === s.length;
78
+ e && (t = o$2.get(s)), void 0 === t && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), e && o$2.set(s, t));
79
+ }
80
+ return t;
81
+ }
82
+ toString() {
83
+ return this.cssText;
84
+ }
85
+ };
86
+ const r$2 = t => new n$2("string" == typeof t ? t : t + "", void 0, s),
87
+ S = (s, o) => {
88
+ if (e$1) s.adoptedStyleSheets = o.map(t => t instanceof CSSStyleSheet ? t : t.styleSheet);else for (const e of o) {
89
+ const o = document.createElement("style"),
90
+ n = t.litNonce;
91
+ void 0 !== n && o.setAttribute("nonce", n), o.textContent = e.cssText, s.appendChild(o);
92
+ }
93
+ },
94
+ c$1 = e$1 ? t => t : t => t instanceof CSSStyleSheet ? (t => {
95
+ let e = "";
96
+ for (const s of t.cssRules) e += s.cssText;
97
+ return r$2(e);
98
+ })(t) : t;
64
99
 
65
100
  /**
66
101
  * @license
67
102
  * Copyright 2017 Google LLC
68
103
  * SPDX-License-Identifier: BSD-3-Clause
69
- */const{is:i,defineProperty:e,getOwnPropertyDescriptor:h,getOwnPropertyNames:r$1,getOwnPropertySymbols:o$1,getPrototypeOf:n$1}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f=(t,s)=>!i(t,s),b={attribute:true,type:String,converter:u,reflect:false,useDefault:false,hasChanged:f};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class y 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,s=b){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n$1(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...r$1(t),...o$1(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$1(s));}else void 0!==s&&i.push(c$1(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,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,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){const e=this.constructor,h=this[t];if(i??=e.getPropertyOptions(t),!((i.hasChanged??f)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(e._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;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,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Eq&&=this._$Eq.forEach((t=>this._$ET(t,this[t]))),this._$EM();}updated(t){}firstUpdated(t){}}y.elementStyles=[],y.shadowRootOptions={mode:"open"},y[d("elementProperties")]=new Map,y[d("finalized")]=new Map,p?.({ReactiveElement:y}),(a.reactiveElementVersions??=[]).push("2.1.1");
104
+ */
105
+ const {
106
+ is: i,
107
+ defineProperty: e,
108
+ getOwnPropertyDescriptor: h,
109
+ getOwnPropertyNames: r$1,
110
+ getOwnPropertySymbols: o$1,
111
+ getPrototypeOf: n$1
112
+ } = Object,
113
+ a = globalThis,
114
+ c = a.trustedTypes,
115
+ l = c ? c.emptyScript : "",
116
+ p = a.reactiveElementPolyfillSupport,
117
+ d = (t, s) => t,
118
+ u = {
119
+ toAttribute(t, s) {
120
+ switch (s) {
121
+ case Boolean:
122
+ t = t ? l : null;
123
+ break;
124
+ case Object:
125
+ case Array:
126
+ t = null == t ? t : JSON.stringify(t);
127
+ }
128
+ return t;
129
+ },
130
+ fromAttribute(t, s) {
131
+ let i = t;
132
+ switch (s) {
133
+ case Boolean:
134
+ i = null !== t;
135
+ break;
136
+ case Number:
137
+ i = null === t ? null : Number(t);
138
+ break;
139
+ case Object:
140
+ case Array:
141
+ try {
142
+ i = JSON.parse(t);
143
+ } catch (t) {
144
+ i = null;
145
+ }
146
+ }
147
+ return i;
148
+ }
149
+ },
150
+ f = (t, s) => !i(t, s),
151
+ b = {
152
+ attribute: true,
153
+ type: String,
154
+ converter: u,
155
+ reflect: false,
156
+ useDefault: false,
157
+ hasChanged: f
158
+ };
159
+ Symbol.metadata ??= Symbol("metadata"), a.litPropertyMetadata ??= new WeakMap();
160
+ class y extends HTMLElement {
161
+ static addInitializer(t) {
162
+ this._$Ei(), (this.l ??= []).push(t);
163
+ }
164
+ static get observedAttributes() {
165
+ return this.finalize(), this._$Eh && [...this._$Eh.keys()];
166
+ }
167
+ static createProperty(t, s = b) {
168
+ if (s.state && (s.attribute = false), this._$Ei(), this.prototype.hasOwnProperty(t) && ((s = Object.create(s)).wrapped = true), this.elementProperties.set(t, s), !s.noAccessor) {
169
+ const i = Symbol(),
170
+ h = this.getPropertyDescriptor(t, i, s);
171
+ void 0 !== h && e(this.prototype, t, h);
172
+ }
173
+ }
174
+ static getPropertyDescriptor(t, s, i) {
175
+ const {
176
+ get: e,
177
+ set: r
178
+ } = h(this.prototype, t) ?? {
179
+ get() {
180
+ return this[s];
181
+ },
182
+ set(t) {
183
+ this[s] = t;
184
+ }
185
+ };
186
+ return {
187
+ get: e,
188
+ set(s) {
189
+ const h = e?.call(this);
190
+ r?.call(this, s), this.requestUpdate(t, h, i);
191
+ },
192
+ configurable: true,
193
+ enumerable: true
194
+ };
195
+ }
196
+ static getPropertyOptions(t) {
197
+ return this.elementProperties.get(t) ?? b;
198
+ }
199
+ static _$Ei() {
200
+ if (this.hasOwnProperty(d("elementProperties"))) return;
201
+ const t = n$1(this);
202
+ t.finalize(), void 0 !== t.l && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
203
+ }
204
+ static finalize() {
205
+ if (this.hasOwnProperty(d("finalized"))) return;
206
+ if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d("properties"))) {
207
+ const t = this.properties,
208
+ s = [...r$1(t), ...o$1(t)];
209
+ for (const i of s) this.createProperty(i, t[i]);
210
+ }
211
+ const t = this[Symbol.metadata];
212
+ if (null !== t) {
213
+ const s = litPropertyMetadata.get(t);
214
+ if (void 0 !== s) for (const [t, i] of s) this.elementProperties.set(t, i);
215
+ }
216
+ this._$Eh = new Map();
217
+ for (const [t, s] of this.elementProperties) {
218
+ const i = this._$Eu(t, s);
219
+ void 0 !== i && this._$Eh.set(i, t);
220
+ }
221
+ this.elementStyles = this.finalizeStyles(this.styles);
222
+ }
223
+ static finalizeStyles(s) {
224
+ const i = [];
225
+ if (Array.isArray(s)) {
226
+ const e = new Set(s.flat(1 / 0).reverse());
227
+ for (const s of e) i.unshift(c$1(s));
228
+ } else void 0 !== s && i.push(c$1(s));
229
+ return i;
230
+ }
231
+ static _$Eu(t, s) {
232
+ const i = s.attribute;
233
+ return false === i ? void 0 : "string" == typeof i ? i : "string" == typeof t ? t.toLowerCase() : void 0;
234
+ }
235
+ constructor() {
236
+ super(), this._$Ep = void 0, this.isUpdatePending = false, this.hasUpdated = false, this._$Em = null, this._$Ev();
237
+ }
238
+ _$Ev() {
239
+ this._$ES = new Promise(t => this.enableUpdating = t), this._$AL = new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(t => t(this));
240
+ }
241
+ addController(t) {
242
+ (this._$EO ??= new Set()).add(t), void 0 !== this.renderRoot && this.isConnected && t.hostConnected?.();
243
+ }
244
+ removeController(t) {
245
+ this._$EO?.delete(t);
246
+ }
247
+ _$E_() {
248
+ const t = new Map(),
249
+ s = this.constructor.elementProperties;
250
+ for (const i of s.keys()) this.hasOwnProperty(i) && (t.set(i, this[i]), delete this[i]);
251
+ t.size > 0 && (this._$Ep = t);
252
+ }
253
+ createRenderRoot() {
254
+ const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
255
+ return S(t, this.constructor.elementStyles), t;
256
+ }
257
+ connectedCallback() {
258
+ this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(true), this._$EO?.forEach(t => t.hostConnected?.());
259
+ }
260
+ enableUpdating(t) {}
261
+ disconnectedCallback() {
262
+ this._$EO?.forEach(t => t.hostDisconnected?.());
263
+ }
264
+ attributeChangedCallback(t, s, i) {
265
+ this._$AK(t, i);
266
+ }
267
+ _$ET(t, s) {
268
+ const i = this.constructor.elementProperties.get(t),
269
+ e = this.constructor._$Eu(t, i);
270
+ if (void 0 !== e && true === i.reflect) {
271
+ const h = (void 0 !== i.converter?.toAttribute ? i.converter : u).toAttribute(s, i.type);
272
+ this._$Em = t, null == h ? this.removeAttribute(e) : this.setAttribute(e, h), this._$Em = null;
273
+ }
274
+ }
275
+ _$AK(t, s) {
276
+ const i = this.constructor,
277
+ e = i._$Eh.get(t);
278
+ if (void 0 !== e && this._$Em !== e) {
279
+ const t = i.getPropertyOptions(e),
280
+ h = "function" == typeof t.converter ? {
281
+ fromAttribute: t.converter
282
+ } : void 0 !== t.converter?.fromAttribute ? t.converter : u;
283
+ this._$Em = e;
284
+ const r = h.fromAttribute(s, t.type);
285
+ this[e] = r ?? this._$Ej?.get(e) ?? r, this._$Em = null;
286
+ }
287
+ }
288
+ requestUpdate(t, s, i) {
289
+ if (void 0 !== t) {
290
+ const e = this.constructor,
291
+ h = this[t];
292
+ if (i ??= e.getPropertyOptions(t), !((i.hasChanged ?? f)(h, s) || i.useDefault && i.reflect && h === this._$Ej?.get(t) && !this.hasAttribute(e._$Eu(t, i)))) return;
293
+ this.C(t, s, i);
294
+ }
295
+ false === this.isUpdatePending && (this._$ES = this._$EP());
296
+ }
297
+ C(t, s, {
298
+ useDefault: i,
299
+ reflect: e,
300
+ wrapped: h
301
+ }, r) {
302
+ i && !(this._$Ej ??= new Map()).has(t) && (this._$Ej.set(t, r ?? s ?? this[t]), true !== h || void 0 !== r) || (this._$AL.has(t) || (this.hasUpdated || i || (s = void 0), this._$AL.set(t, s)), true === e && this._$Em !== t && (this._$Eq ??= new Set()).add(t));
303
+ }
304
+ async _$EP() {
305
+ this.isUpdatePending = true;
306
+ try {
307
+ await this._$ES;
308
+ } catch (t) {
309
+ Promise.reject(t);
310
+ }
311
+ const t = this.scheduleUpdate();
312
+ return null != t && (await t), !this.isUpdatePending;
313
+ }
314
+ scheduleUpdate() {
315
+ return this.performUpdate();
316
+ }
317
+ performUpdate() {
318
+ if (!this.isUpdatePending) return;
319
+ if (!this.hasUpdated) {
320
+ if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
321
+ for (const [t, s] of this._$Ep) this[t] = s;
322
+ this._$Ep = void 0;
323
+ }
324
+ const t = this.constructor.elementProperties;
325
+ if (t.size > 0) for (const [s, i] of t) {
326
+ const {
327
+ wrapped: t
328
+ } = i,
329
+ e = this[s];
330
+ true !== t || this._$AL.has(s) || void 0 === e || this.C(s, void 0, i, e);
331
+ }
332
+ }
333
+ let t = false;
334
+ const s = this._$AL;
335
+ try {
336
+ t = this.shouldUpdate(s), t ? (this.willUpdate(s), this._$EO?.forEach(t => t.hostUpdate?.()), this.update(s)) : this._$EM();
337
+ } catch (s) {
338
+ throw t = false, this._$EM(), s;
339
+ }
340
+ t && this._$AE(s);
341
+ }
342
+ willUpdate(t) {}
343
+ _$AE(t) {
344
+ this._$EO?.forEach(t => t.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t)), this.updated(t);
345
+ }
346
+ _$EM() {
347
+ this._$AL = new Map(), this.isUpdatePending = false;
348
+ }
349
+ get updateComplete() {
350
+ return this.getUpdateComplete();
351
+ }
352
+ getUpdateComplete() {
353
+ return this._$ES;
354
+ }
355
+ shouldUpdate(t) {
356
+ return true;
357
+ }
358
+ update(t) {
359
+ this._$Eq &&= this._$Eq.forEach(t => this._$ET(t, this[t])), this._$EM();
360
+ }
361
+ updated(t) {}
362
+ firstUpdated(t) {}
363
+ }
364
+ y.elementStyles = [], y.shadowRootOptions = {
365
+ mode: "open"
366
+ }, y[d("elementProperties")] = new Map(), y[d("finalized")] = new Map(), p?.({
367
+ ReactiveElement: y
368
+ }), (a.reactiveElementVersions ??= []).push("2.1.1");
70
369
 
71
370
  /**
72
371
  * @license
73
372
  * Copyright 2017 Google LLC
74
373
  * SPDX-License-Identifier: BSD-3-Clause
75
- */const o={attribute:true,type:String,converter:u,reflect:false,hasChanged:f},r=(t=o,e,r)=>{const{kind:n,metadata:i}=r;let s=globalThis.litPropertyMetadata.get(i);if(void 0===s&&globalThis.litPropertyMetadata.set(i,s=new Map),"setter"===n&&((t=Object.create(t)).wrapped=true),s.set(r.name,t),"accessor"===n){const{name:o}=r;return {set(r){const n=e.get.call(this);e.set.call(this,r),this.requestUpdate(o,n,t);},init(e){return void 0!==e&&this.C(o,void 0,t,e),e}}}if("setter"===n){const{name:o}=r;return function(r){const n=this[o];e.call(this,r),this.requestUpdate(o,n,t);}}throw Error("Unsupported decorator location: "+n)};function n(t){return (e,o)=>"object"==typeof o?r(t,e,o):((t,e,o)=>{const r=e.hasOwnProperty(o);return e.constructor.createProperty(o,t),r?Object.getOwnPropertyDescriptor(e,o):void 0})(t,e,o)}
374
+ */
375
+ const o = {
376
+ attribute: true,
377
+ type: String,
378
+ converter: u,
379
+ reflect: false,
380
+ hasChanged: f
381
+ },
382
+ r = (t = o, e, r) => {
383
+ const {
384
+ kind: n,
385
+ metadata: i
386
+ } = r;
387
+ let s = globalThis.litPropertyMetadata.get(i);
388
+ if (void 0 === s && globalThis.litPropertyMetadata.set(i, s = new Map()), "setter" === n && ((t = Object.create(t)).wrapped = true), s.set(r.name, t), "accessor" === n) {
389
+ const {
390
+ name: o
391
+ } = r;
392
+ return {
393
+ set(r) {
394
+ const n = e.get.call(this);
395
+ e.set.call(this, r), this.requestUpdate(o, n, t);
396
+ },
397
+ init(e) {
398
+ return void 0 !== e && this.C(o, void 0, t, e), e;
399
+ }
400
+ };
401
+ }
402
+ if ("setter" === n) {
403
+ const {
404
+ name: o
405
+ } = r;
406
+ return function (r) {
407
+ const n = this[o];
408
+ e.call(this, r), this.requestUpdate(o, n, t);
409
+ };
410
+ }
411
+ throw Error("Unsupported decorator location: " + n);
412
+ };
413
+ function n(t) {
414
+ return (e, o) => "object" == typeof o ? r(t, e, o) : ((t, e, o) => {
415
+ const r = e.hasOwnProperty(o);
416
+ return e.constructor.createProperty(o, t), r ? Object.getOwnPropertyDescriptor(e, o) : void 0;
417
+ })(t, e, o);
418
+ }
76
419
 
77
420
  /** A base implementation for an element used to convey progress. This class must be inherited. */
78
421
  class ProgressElementIndicatorBase extends AttachInternals(Role(LitElement, "progressbar"), true) {
79
- constructor() {
80
- super(...arguments);
81
- /**
82
- * A fractional value, between 0 and `max`, indicating progress.
83
- * @default 0
84
- */
85
- this.value = 0;
86
- /**
87
- * The maximum progress value.
88
- * @default 100
89
- */
90
- this.max = 100;
91
- }
92
- /** @inheritdoc */
93
- connectedCallback() {
94
- super.connectedCallback();
95
- this.ariaValueMin = "0";
422
+ constructor() {
423
+ super(...arguments);
424
+ /**
425
+ * A fractional value, between 0 and `max`, indicating progress.
426
+ * @default 0
427
+ */
428
+ this.value = 0;
429
+ /**
430
+ * The maximum progress value.
431
+ * @default 100
432
+ */
433
+ this.max = 100;
434
+ }
435
+ /** @inheritdoc */
436
+ connectedCallback() {
437
+ super.connectedCallback();
438
+ this.ariaValueMin = "0";
439
+ }
440
+ /** @inheritdoc */
441
+ update(changedProperties) {
442
+ super.update(changedProperties);
443
+ if (changedProperties.has("value")) {
444
+ this.ariaValueNow = `${this.value}`;
96
445
  }
97
- /** @inheritdoc */
98
- update(changedProperties) {
99
- super.update(changedProperties);
100
- if (changedProperties.has("value")) {
101
- this.ariaValueNow = `${this.value}`;
102
- }
103
- if (changedProperties.has("max")) {
104
- this.ariaValueMax = `${this.max}`;
105
- }
446
+ if (changedProperties.has("max")) {
447
+ this.ariaValueMax = `${this.max}`;
106
448
  }
449
+ }
107
450
  }
108
451
  /** The styles of the element. */
109
- ProgressElementIndicatorBase.styles = css `
110
- @media (forced-colors: active) {
111
- :host {
112
- --m3e-progress-indicator-color: CanvasText;
113
- --m3e-progress-indicator-track-color: Canvas;
114
- }
115
- }
116
- `;
117
- __decorate([
118
- n({ type: Number, reflect: true })
119
- ], ProgressElementIndicatorBase.prototype, "value", void 0);
120
- __decorate([
121
- n({ type: Number })
122
- ], ProgressElementIndicatorBase.prototype, "max", void 0);
452
+ ProgressElementIndicatorBase.styles = css`@media (forced-colors: active) { :host { --m3e-progress-indicator-color: CanvasText; --m3e-progress-indicator-track-color: Canvas; } }`;
453
+ __decorate([n({
454
+ type: Number,
455
+ reflect: true
456
+ })], ProgressElementIndicatorBase.prototype, "value", void 0);
457
+ __decorate([n({
458
+ type: Number
459
+ })], ProgressElementIndicatorBase.prototype, "max", void 0);
123
460
 
124
461
  /**
125
462
  * Adapted from Angular Material Progress Spinner
@@ -167,229 +504,61 @@ const DEFAULT_STROKE_WIDTH = 10;
167
504
  * @cssprop --m3e-progress-indicator-color - Color of the progress indicator (foreground).
168
505
  */
169
506
  let M3eCircularProgressIndicatorElement = class M3eCircularProgressIndicatorElement extends ProgressElementIndicatorBase {
170
- constructor() {
171
- super(...arguments);
172
- /** @private */ _M3eCircularProgressIndicatorElement_diameter.set(this, DEFAULT_DIAMETER);
173
- /** @private */ _M3eCircularProgressIndicatorElement_strokeWidth.set(this, DEFAULT_STROKE_WIDTH);
174
- /**
175
- * Whether to show something is happening without conveying progress.
176
- * @default false
177
- */
178
- this.indeterminate = false;
179
- }
180
- /**
181
- * The diameter, in pixels, of the progress spinner.
182
- * @default 40
183
- */
184
- get diameter() {
185
- return __classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_diameter, "f");
186
- }
187
- set diameter(value) {
188
- __classPrivateFieldSet(this, _M3eCircularProgressIndicatorElement_diameter, value, "f");
189
- this.style.setProperty("--_diameter", `${value}`);
190
- }
507
+ constructor() {
508
+ super(...arguments);
509
+ /** @private */
510
+ _M3eCircularProgressIndicatorElement_diameter.set(this, DEFAULT_DIAMETER);
511
+ /** @private */
512
+ _M3eCircularProgressIndicatorElement_strokeWidth.set(this, DEFAULT_STROKE_WIDTH);
191
513
  /**
192
- * The stroke width, in pixels, of the progress spinner.
193
- * @default 10
514
+ * Whether to show something is happening without conveying progress.
515
+ * @default false
194
516
  */
195
- get strokeWidth() {
196
- return __classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_strokeWidth, "f");
197
- }
198
- set strokeWidth(value) {
199
- __classPrivateFieldSet(this, _M3eCircularProgressIndicatorElement_strokeWidth, value, "f");
200
- this.style.setProperty("--_stroke-width", `${value}`);
201
- }
202
- /** @inheritdoc */
203
- render() {
204
- return html `<div class="progress" aria-hidden="true">
205
- ${this.indeterminate
206
- ? html `<div class="spinner">
207
- <div class="left"><div class="circle"></div></div>
208
- <div class="right"><div class="circle"></div></div>
209
- </div>`
210
- : html `<svg viewBox="0 0 4800 4800">
211
- <circle class="track" pathLength="100"></circle>
212
- <circle
213
- class="active-track"
214
- pathLength="100"
215
- stroke-dashoffset="${(1 - this.value / this.max) * 100}"
216
- ></circle>
217
- </svg>`}
218
- </div>
219
- <div class="content"><slot></slot></div>`;
220
- }
517
+ this.indeterminate = false;
518
+ }
519
+ /**
520
+ * The diameter, in pixels, of the progress spinner.
521
+ * @default 40
522
+ */
523
+ get diameter() {
524
+ return __classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_diameter, "f");
525
+ }
526
+ set diameter(value) {
527
+ __classPrivateFieldSet(this, _M3eCircularProgressIndicatorElement_diameter, value, "f");
528
+ this.style.setProperty("--_diameter", `${value}`);
529
+ }
530
+ /**
531
+ * The stroke width, in pixels, of the progress spinner.
532
+ * @default 10
533
+ */
534
+ get strokeWidth() {
535
+ return __classPrivateFieldGet(this, _M3eCircularProgressIndicatorElement_strokeWidth, "f");
536
+ }
537
+ set strokeWidth(value) {
538
+ __classPrivateFieldSet(this, _M3eCircularProgressIndicatorElement_strokeWidth, value, "f");
539
+ this.style.setProperty("--_stroke-width", `${value}`);
540
+ }
541
+ /** @inheritdoc */
542
+ render() {
543
+ return html`<div class="progress" aria-hidden="true">${this.indeterminate ? html`<div class="spinner"><div class="left"><div class="circle"></div></div><div class="right"><div class="circle"></div></div></div>` : html`<svg viewBox="0 0 4800 4800"><circle class="track" pathLength="100"></circle><circle class="active-track" pathLength="100" stroke-dashoffset="${(1 - this.value / this.max) * 100}"></circle></svg>`}</div><div class="content"><slot></slot></div>`;
544
+ }
221
545
  };
222
546
  _M3eCircularProgressIndicatorElement_diameter = new WeakMap();
223
547
  _M3eCircularProgressIndicatorElement_strokeWidth = new WeakMap();
224
548
  /** The styles of the element. */
225
- M3eCircularProgressIndicatorElement.styles = [
226
- ProgressElementIndicatorBase.styles,
227
- css `
228
- :host {
229
- display: inline-flex;
230
- vertical-align: middle;
231
- width: var(--_diameter);
232
- height: var(--_diameter);
233
- position: relative;
234
- align-items: center;
235
- justify-content: center;
236
- contain: strict;
237
-
238
- --_arc-duration: 1333ms;
239
- --_cycle-duration: calc(4 * var(--_arc-duration));
240
- --_linear-rotate-duration: calc(var(--_arc-duration) * 360 / 306);
241
- --_indeterminate-easing: cubic-bezier(0.4, 0, 0.2, 1);
242
- --_container-padding: 0px;
243
- --_diameter: ${DEFAULT_DIAMETER}px;
244
- --_stroke-width: ${DEFAULT_STROKE_WIDTH};
245
- }
246
- svg {
247
- transform: rotate(-90deg);
248
- }
249
- circle {
250
- cx: 50%;
251
- cy: 50%;
252
- r: calc(50% * (1 - var(--_stroke-width) / 100));
253
- stroke-width: calc(var(--_stroke-width) * 1%);
254
- stroke-dasharray: 100;
255
- fill: transparent;
256
- }
257
- .active-track {
258
- transition: stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1);
259
- stroke: var(--m3e-progress-indicator-color, ${DesignToken.color.primary});
260
- }
261
- .track {
262
- stroke: var(--m3e-progress-indicator-track-color, ${DesignToken.color.secondaryContainer});
263
- }
264
- .progress {
265
- flex: 1;
266
- align-self: stretch;
267
- margin: var(--_container-padding);
268
- pointer-events: none;
269
- }
270
- .progress,
271
- .spinner,
272
- .left,
273
- .right,
274
- .content,
275
- .circle {
276
- position: absolute;
277
- inset: 0;
278
- }
279
-
280
- .content {
281
- width: 100%;
282
- height: 100%;
283
- display: flex;
284
- align-items: center;
285
- justify-content: center;
286
- }
287
- :host([indeterminate]) {
288
- content-visibility: auto;
289
- }
290
- :host([indeterminate]) .progress {
291
- animation: linear infinite linear-rotate;
292
- animation-duration: var(--_linear-rotate-duration);
293
- }
294
- .spinner {
295
- animation: infinite both rotate-arc;
296
- animation-duration: var(--_cycle-duration);
297
- animation-timing-function: var(--_indeterminate-easing);
298
- }
299
- .left {
300
- overflow: hidden;
301
- inset: 0 50% 0 0;
302
- }
303
- .right {
304
- overflow: hidden;
305
- inset: 0 0 0 50%;
306
- }
307
- .circle {
308
- box-sizing: border-box;
309
- border-radius: 50%;
310
- border: solid calc(calc(var(--_stroke-width) / 100) * calc(var(--_diameter) - 2 * var(--_container-padding)));
311
- border-color: var(--m3e-progress-indicator-color, ${DesignToken.color.primary})
312
- var(--m3e-progress-indicator-color, ${DesignToken.color.primary}) transparent transparent;
313
- animation: expand-arc;
314
- animation-iteration-count: infinite;
315
- animation-fill-mode: both;
316
- animation-duration: var(--_arc-duration), var(--_cycle-duration);
317
- animation-timing-function: var(--_indeterminate-easing);
318
- }
319
- .left .circle {
320
- rotate: 135deg;
321
- inset: 0 -100% 0 0;
322
- }
323
- .right .circle {
324
- rotate: 100deg;
325
- inset: 0 0 0 -100%;
326
- animation-delay: calc(-0.5 * var(--_arc-duration)), 0ms;
327
- }
328
- @keyframes expand-arc {
329
- 0% {
330
- transform: rotate(265deg);
331
- }
332
- 50% {
333
- transform: rotate(130deg);
334
- }
335
- 100% {
336
- transform: rotate(265deg);
337
- }
338
- }
339
- @keyframes rotate-arc {
340
- 12.5% {
341
- transform: rotate(135deg);
342
- }
343
- 25% {
344
- transform: rotate(270deg);
345
- }
346
- 37.5% {
347
- transform: rotate(405deg);
348
- }
349
- 50% {
350
- transform: rotate(540deg);
351
- }
352
- 62.5% {
353
- transform: rotate(675deg);
354
- }
355
- 75% {
356
- transform: rotate(810deg);
357
- }
358
- 87.5% {
359
- transform: rotate(945deg);
360
- }
361
- 100% {
362
- transform: rotate(1080deg);
363
- }
364
- }
365
- @keyframes linear-rotate {
366
- to {
367
- transform: rotate(360deg);
368
- }
369
- }
370
- @media (forced-colors: active) {
371
- circle {
372
- fill: Canvas;
373
- }
374
- .circle {
375
- border-color: var(--m3e-progress-indicator-color, ${DesignToken.color.primary})
376
- var(--m3e-progress-indicator-color, ${DesignToken.color.primary}) Canvas Canvas;
377
- }
378
- }
379
- `,
380
- ];
381
- __decorate([
382
- n({ type: Boolean, reflect: true })
383
- ], M3eCircularProgressIndicatorElement.prototype, "indeterminate", void 0);
384
- __decorate([
385
- n({ type: Number })
386
- ], M3eCircularProgressIndicatorElement.prototype, "diameter", null);
387
- __decorate([
388
- n({ attribute: "stroke-width", type: Number })
389
- ], M3eCircularProgressIndicatorElement.prototype, "strokeWidth", null);
390
- M3eCircularProgressIndicatorElement = __decorate([
391
- t$1("m3e-circular-progress-indicator")
392
- ], M3eCircularProgressIndicatorElement);
549
+ M3eCircularProgressIndicatorElement.styles = [ProgressElementIndicatorBase.styles, css`: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: ${DEFAULT_DIAMETER}px; --_stroke-width: ${DEFAULT_STROKE_WIDTH}; } 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, ${DesignToken.color.primary}); } .track { stroke: var(--m3e-progress-indicator-track-color, ${DesignToken.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, ${DesignToken.color.primary}) var(--m3e-progress-indicator-color, ${DesignToken.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, ${DesignToken.color.primary}) var(--m3e-progress-indicator-color, ${DesignToken.color.primary}) Canvas Canvas; } }`];
550
+ __decorate([n({
551
+ type: Boolean,
552
+ reflect: true
553
+ })], M3eCircularProgressIndicatorElement.prototype, "indeterminate", void 0);
554
+ __decorate([n({
555
+ type: Number
556
+ })], M3eCircularProgressIndicatorElement.prototype, "diameter", null);
557
+ __decorate([n({
558
+ attribute: "stroke-width",
559
+ type: Number
560
+ })], M3eCircularProgressIndicatorElement.prototype, "strokeWidth", null);
561
+ M3eCircularProgressIndicatorElement = __decorate([t$1("m3e-circular-progress-indicator")], M3eCircularProgressIndicatorElement);
393
562
 
394
563
  /**
395
564
  * Adapted from Angular Material Progress Bar
@@ -435,248 +604,56 @@ var M3eLinearProgressIndicatorElement_1;
435
604
  * @cssprop --m3e-progress-indicator-color - Color of the progress indicator (foreground).
436
605
  */
437
606
  let M3eLinearProgressIndicatorElement = M3eLinearProgressIndicatorElement_1 = class M3eLinearProgressIndicatorElement extends ProgressElementIndicatorBase {
438
- constructor() {
439
- super(...arguments);
440
- /** @private */ _M3eLinearProgressIndicatorElement_patternId.set(this, `m3e-progress-pattern-${M3eLinearProgressIndicatorElement_1.__nextPatternId++}`);
441
- /** @private */ _M3eLinearProgressIndicatorElement_patternFill.set(this, "");
442
- /**
443
- * The mode of the progress bar.
444
- * @default "determinate"
445
- */
446
- this.mode = "determinate";
447
- /**
448
- * A fractional value, between 0 and `max`, indicating buffer progress.
449
- * @default 0
450
- */
451
- this.bufferValue = 0;
452
- }
453
- /** @inheritdoc */
454
- connectedCallback() {
455
- super.connectedCallback();
456
- // Prefix the SVG reference with the current path, otherwise they will not work
457
- // in Safari if the page has a <base> tag.
458
- const location = document?.location ?? null;
459
- const path = location ? (location.pathname + location.search).split("#")[0] : "";
460
- __classPrivateFieldSet(this, _M3eLinearProgressIndicatorElement_patternFill, `url(${path}#${__classPrivateFieldGet(this, _M3eLinearProgressIndicatorElement_patternId, "f")})`, "f");
461
- }
462
- /** @inheritdoc */
463
- render() {
464
- return html `<div class="progress" aria-hidden="true">
465
- <div
466
- class="wrapper"
467
- style=${safeStyleMap({
468
- "--_value": `${this.value}`,
469
- "--_buffer-value": `${this.bufferValue}`,
470
- "--_max": `${this.max}`,
471
- })}
472
- >
473
- <svg width="100%" height="4" class="background element">
474
- <defs>
475
- <pattern id="${__classPrivateFieldGet(this, _M3eLinearProgressIndicatorElement_patternId, "f")}" x="4" y="0" width="8" height="4" patternUnits="userSpaceOnUse">
476
- <circle cx="2" cy="2" r="2" />
477
- </pattern>
478
- </defs>
479
- <rect fill="${__classPrivateFieldGet(this, _M3eLinearProgressIndicatorElement_patternFill, "f")}" width="100%" height="100%" />
480
- </svg>
481
- <div class="buffer element"></div>
482
- <div class="primary fill element"></div>
483
- <div class="secondary fill element"></div>
484
- </div>
485
- </div>`;
486
- }
607
+ constructor() {
608
+ super(...arguments);
609
+ /** @private */
610
+ _M3eLinearProgressIndicatorElement_patternId.set(this, `m3e-progress-pattern-${M3eLinearProgressIndicatorElement_1.__nextPatternId++}`);
611
+ /** @private */
612
+ _M3eLinearProgressIndicatorElement_patternFill.set(this, "");
613
+ /**
614
+ * The mode of the progress bar.
615
+ * @default "determinate"
616
+ */
617
+ this.mode = "determinate";
618
+ /**
619
+ * A fractional value, between 0 and `max`, indicating buffer progress.
620
+ * @default 0
621
+ */
622
+ this.bufferValue = 0;
623
+ }
624
+ /** @inheritdoc */
625
+ connectedCallback() {
626
+ super.connectedCallback();
627
+ // Prefix the SVG reference with the current path, otherwise they will not work
628
+ // in Safari if the page has a <base> tag.
629
+ const location = document?.location ?? null;
630
+ const path = location ? (location.pathname + location.search).split("#")[0] : "";
631
+ __classPrivateFieldSet(this, _M3eLinearProgressIndicatorElement_patternFill, `url(${path}#${__classPrivateFieldGet(this, _M3eLinearProgressIndicatorElement_patternId, "f")})`, "f");
632
+ }
633
+ /** @inheritdoc */
634
+ render() {
635
+ return html`<div class="progress" aria-hidden="true"><div class="wrapper" style="${safeStyleMap({
636
+ "--_value": `${this.value}`,
637
+ "--_buffer-value": `${this.bufferValue}`,
638
+ "--_max": `${this.max}`
639
+ })}"><svg width="100%" height="4" class="background element"><defs><pattern id="${__classPrivateFieldGet(this, _M3eLinearProgressIndicatorElement_patternId, "f")}" x="4" y="0" width="8" height="4" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="2"/></pattern></defs><rect fill="${__classPrivateFieldGet(this, _M3eLinearProgressIndicatorElement_patternFill, "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>`;
640
+ }
487
641
  };
488
642
  _M3eLinearProgressIndicatorElement_patternId = new WeakMap();
489
643
  _M3eLinearProgressIndicatorElement_patternFill = new WeakMap();
490
644
  /** The styles of the element. */
491
- M3eLinearProgressIndicatorElement.styles = [
492
- ProgressElementIndicatorBase.styles,
493
- css `
494
- :host {
495
- display: block;
496
- height: var(--m3e-linear-progress-indicator-thickness, 0.25rem);
497
- overflow: hidden;
498
- position: relative;
499
- transform: opacity var(--_piece-animation-duration) linear;
500
- border-radius: var(--m3e-linear-progress-indicator-shape, ${DesignToken.shape.corner.extraSmall});
501
-
502
- --_piece-animation-duration: 250ms;
503
- --_full-animation-duration: 2000ms;
504
- }
505
- :host([mode="indeterminate"]),
506
- :host([mode="query"]) {
507
- content-visibility: auto;
508
- }
509
- .progress {
510
- pointer-events: none;
511
- }
512
- .progress,
513
- .wrapper {
514
- height: 100%;
515
- }
516
- .element,
517
- .fill::after {
518
- position: absolute;
519
- height: 100%;
520
- width: 100%;
521
- }
522
- .background {
523
- width: calc(100% + 0.625rem);
524
- fill: var(--m3e-progress-indicator-track-color, ${DesignToken.color.secondaryContainer});
525
- }
526
- .buffer {
527
- transform-origin: top left;
528
- transition: transform var(--_piece-animation-duration) ease;
529
- background-color: var(--m3e-progress-indicator-track-color, ${DesignToken.color.secondaryContainer});
530
- }
531
- .primary {
532
- transform: scale3d(calc(var(--_value, 0) / var(--_max)), 1, 1);
533
- }
534
- .secondary {
535
- display: none;
536
- }
537
- .fill {
538
- animation: none;
539
- transform-origin: top left;
540
- transition: transform var(--_piece-animation-duration) ease;
541
- }
542
- .fill::after {
543
- animation: none;
544
- content: "";
545
- display: inline-block;
546
- left: 0;
547
- background-color: var(--m3e-progress-indicator-color, ${DesignToken.color.primary});
548
- }
549
- :host([mode="query"]) {
550
- transform: rotateZ(180deg);
551
- }
552
- :host([mode="indeterminate"]) .fill,
553
- :host([mode="query"]) .fill {
554
- transition: none;
555
- }
556
- :host([mode="indeterminate"]) .primary,
557
- :host([mode="query"]) .primary {
558
- backface-visibility: hidden;
559
- animation: primary-indeterminate-translate var(--_full-animation-duration) infinite linear;
560
- left: -145.166611%;
561
- }
562
- :host([mode="indeterminate"]) .primary.fill::after,
563
- :host([mode="query"]) .primary.fill::after {
564
- backface-visibility: hidden;
565
- animation: primary-indeterminate-scale var(--_full-animation-duration) infinite linear;
566
- }
567
- :host([mode="indeterminate"]) .secondary,
568
- :host([mode="query"]) .secondary {
569
- display: block;
570
- backface-visibility: hidden;
571
- animation: secondary-indeterminate-translate var(--_full-animation-duration) infinite linear;
572
- left: -54.888891%;
573
- }
574
- :host([mode="indeterminate"]) .secondary.fill::after,
575
- :host([mode="query"]) .secondary.fill::after {
576
- backface-visibility: hidden;
577
- animation: secondary-indeterminate-scale var(--_full-animation-duration) infinite linear;
578
- }
579
- :host([mode="determinate"]) .background,
580
- :host([mode="indeterminate"]) .background,
581
- :host([mode="query"]) .background {
582
- fill: transparent !important;
583
- }
584
- :host([mode="buffer"]) .buffer {
585
- transform: scale3d(calc(var(--_buffer-value, 0) / var(--_max)), 1, 1);
586
- }
587
- :host([mode="buffer"]) .background {
588
- display: block;
589
- backface-visibility: hidden;
590
- animation: background-scroll var(--_piece-animation-duration) infinite linear;
591
- }
592
- @keyframes primary-indeterminate-translate {
593
- 0% {
594
- transform: translateX(0);
595
- }
596
- 20% {
597
- animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
598
- transform: translateX(0);
599
- }
600
- 59.15% {
601
- animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
602
- transform: translateX(83.67142%);
603
- }
604
- 100% {
605
- transform: translateX(200.611057%);
606
- }
607
- }
608
- @keyframes primary-indeterminate-scale {
609
- 0% {
610
- transform: scaleX(0.08);
611
- }
612
- 36.65% {
613
- animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
614
- transform: scaleX(0.08);
615
- }
616
- 69.15% {
617
- animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
618
- transform: scaleX(0.661479);
619
- }
620
- 100% {
621
- transform: scaleX(0.08);
622
- }
623
- }
624
- @keyframes secondary-indeterminate-translate {
625
- 0% {
626
- animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
627
- transform: translateX(0);
628
- }
629
- 25% {
630
- animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
631
- transform: translateX(37.651913%);
632
- }
633
- 48.35% {
634
- animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
635
- transform: translateX(84.386165%);
636
- }
637
- 100% {
638
- transform: translateX(160.277782%);
639
- }
640
- }
641
- @keyframes secondary-indeterminate-scale {
642
- 0% {
643
- animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
644
- transform: scaleX(0.08);
645
- }
646
- 19.15% {
647
- animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
648
- transform: scaleX(0.457104);
649
- }
650
- 44.15% {
651
- animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
652
- transform: scaleX(0.72796);
653
- }
654
- 100% {
655
- transform: scaleX(0.08);
656
- }
657
- }
658
- @keyframes background-scroll {
659
- to {
660
- transform: translateX(calc(calc(0px - 0.25rem) * 2));
661
- }
662
- }
663
- @media (forced-colors: active) {
664
- .background {
665
- fill: GrayText;
666
- }
667
- }
668
- `,
669
- ];
670
- /** @private */ M3eLinearProgressIndicatorElement.__nextPatternId = 0;
671
- __decorate([
672
- n({ reflect: true })
673
- ], M3eLinearProgressIndicatorElement.prototype, "mode", void 0);
674
- __decorate([
675
- n({ attribute: "buffer-value", type: Number, reflect: true })
676
- ], M3eLinearProgressIndicatorElement.prototype, "bufferValue", void 0);
677
- M3eLinearProgressIndicatorElement = M3eLinearProgressIndicatorElement_1 = __decorate([
678
- t$1("m3e-linear-progress-indicator")
679
- ], M3eLinearProgressIndicatorElement);
645
+ M3eLinearProgressIndicatorElement.styles = [ProgressElementIndicatorBase.styles, css`: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, ${DesignToken.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, ${DesignToken.color.secondaryContainer}); } .buffer { transition: transform var(--_piece-animation-duration) ease; background-color: var(--m3e-progress-indicator-track-color, ${DesignToken.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, ${DesignToken.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; } }`];
646
+ /** @private */
647
+ M3eLinearProgressIndicatorElement.__nextPatternId = 0;
648
+ __decorate([n({
649
+ reflect: true
650
+ })], M3eLinearProgressIndicatorElement.prototype, "mode", void 0);
651
+ __decorate([n({
652
+ attribute: "buffer-value",
653
+ type: Number,
654
+ reflect: true
655
+ })], M3eLinearProgressIndicatorElement.prototype, "bufferValue", void 0);
656
+ M3eLinearProgressIndicatorElement = M3eLinearProgressIndicatorElement_1 = __decorate([t$1("m3e-linear-progress-indicator")], M3eLinearProgressIndicatorElement);
680
657
 
681
658
  export { M3eCircularProgressIndicatorElement, M3eLinearProgressIndicatorElement, ProgressElementIndicatorBase };
682
659
  //# sourceMappingURL=index.js.map