@m3e/progress-indicator 1.1.2 → 1.1.3
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/README.md +18 -12
- package/dist/css-custom-data.json +41 -1
- package/dist/custom-elements.json +521 -42
- package/dist/html-custom-data.json +12 -12
- package/dist/index.js +876 -134
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +75 -20
- package/dist/index.min.js.map +1 -1
- package/dist/src/CircularProgressIndicatorElement.d.ts +15 -24
- package/dist/src/CircularProgressIndicatorElement.d.ts.map +1 -1
- package/dist/src/LinearProgressIndicatorElement.d.ts +11 -11
- package/dist/src/LinearProgressIndicatorElement.d.ts.map +1 -1
- package/dist/src/ProgressElementIndicatorBase.d.ts +6 -0
- package/dist/src/ProgressElementIndicatorBase.d.ts.map +1 -1
- package/dist/src/ProgressIndicatorVariant.d.ts +3 -0
- package/dist/src/ProgressIndicatorVariant.d.ts.map +1 -0
- package/package.json +2 -2
- package/NOTICE.md +0 -8
package/dist/index.min.js
CHANGED
|
@@ -3,45 +3,100 @@
|
|
|
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
|
|
6
|
+
import{LitElement as t,css as e,html as i,nothing as s,svg as r}from"lit";import{AttachInternals as a,Role as n,DesignToken as o,ResizeController as h,AnimationLoopController as l,resolveFragmentUrl as c,safeStyleMap as d}from"@m3e/core";function p(t,e,i,s){var r,a=arguments.length,n=a<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,i,s);else for(var o=t.length-1;o>=0;o--)(r=t[o])&&(n=(a<3?r(n):a>3?r(e,i,n):r(e,i))||n);return a>3&&n&&Object.defineProperty(e,i,n),n}function m(t,e,i,s){if("a"===i&&!s)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!s:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?s:"a"===i?s.call(t):s?s.value:e.get(t)}function f(t,e,i,s,r){if("m"===s)throw new TypeError("Private method is not writable");if("a"===s&&!r)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!r:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===s?r.call(t,i):r?r.value=i:e.set(t,i),i}"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
|
|
12
|
+
const u=t=>(e,i)=>{void 0!==i?i.addInitializer(()=>{customElements.define(t,e)}):customElements.define(t,e)},v=globalThis,g=v.ShadowRoot&&(void 0===v.ShadyCSS||v.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,$=Symbol(),y=new WeakMap;
|
|
13
13
|
/**
|
|
14
14
|
* @license
|
|
15
15
|
* Copyright 2019 Google LLC
|
|
16
16
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
17
|
-
*/let
|
|
17
|
+
*/let w=class{constructor(t,e,i){if(this._$cssResult$=!0,i!==$)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(g&&void 0===t){const i=void 0!==e&&1===e.length;i&&(t=y.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),i&&y.set(e,t))}return t}toString(){return this.cssText}};const _=g?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new w("string"==typeof t?t:t+"",void 0,$))(e)})(t):t,{is:k,defineProperty:b,getOwnPropertyDescriptor:A,getOwnPropertyNames:x,getOwnPropertySymbols:S,getPrototypeOf:E}=Object,M=globalThis,C=M.trustedTypes,P=C?C.emptyScript:"",U=M.reactiveElementPolyfillSupport,O=(t,e)=>t,T={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 i=t;switch(e){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}},R=(t,e)=>!k(t,e),H={attribute:!0,type:String,converter:T,reflect:!1,useDefault:!1,hasChanged:R};
|
|
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"),M.litPropertyMetadata??=new WeakMap;class N 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=H){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 i=Symbol(),s=this.getPropertyDescriptor(t,i,e);void 0!==s&&b(this.prototype,t,s)}}static getPropertyDescriptor(t,e,i){const{get:s,set:r}=A(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:s,set(e){const a=s?.call(this);r?.call(this,e),this.requestUpdate(t,a,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??H}static _$Ei(){if(this.hasOwnProperty(O("elementProperties")))return;const t=E(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(O("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(O("properties"))){const t=this.properties,e=[...x(t),...S(t)];for(const i of e)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,i]of e)this.elementProperties.set(t,i)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const i=this._$Eu(t,e);void 0!==i&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(_(t))}else void 0!==t&&e.push(_(t));return e}static _$Eu(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"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 i of e.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((t,e)=>{if(g)t.adoptedStyleSheets=e.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const i of e){const e=document.createElement("style"),s=v.litNonce;void 0!==s&&e.setAttribute("nonce",s),e.textContent=i.cssText,t.appendChild(e)}})(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,i){this._$AK(t,i)}_$ET(t,e){const i=this.constructor.elementProperties.get(t),s=this.constructor._$Eu(t,i);if(void 0!==s&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:T).toAttribute(e,i.type);this._$Em=t,null==r?this.removeAttribute(s):this.setAttribute(s,r),this._$Em=null}}_$AK(t,e){const i=this.constructor,s=i._$Eh.get(t);if(void 0!==s&&this._$Em!==s){const t=i.getPropertyOptions(s),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:T;this._$Em=s;const a=r.fromAttribute(e,t.type);this[s]=a??this._$Ej?.get(s)??a,this._$Em=null}}requestUpdate(t,e,i){if(void 0!==t){const s=this.constructor,r=this[t];if(i??=s.getPropertyOptions(t),!((i.hasChanged??R)(r,e)||i.useDefault&&i.reflect&&r===this._$Ej?.get(t)&&!this.hasAttribute(s._$Eu(t,i))))return;this.C(t,e,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:i,reflect:s,wrapped:r},a){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,a??e??this[t]),!0!==r||void 0!==a)||(this._$AL.has(t)||(this.hasUpdated||i||(e=void 0),this._$AL.set(t,e)),!0===s&&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,i]of t){const{wrapped:t}=i,s=this[e];!0!==t||this._$AL.has(e)||void 0===s||this.C(e,void 0,i,s)}}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){}}N.elementStyles=[],N.shadowRootOptions={mode:"open"},N[O("elementProperties")]=new Map,N[O("finalized")]=new Map,U?.({ReactiveElement:N}),(M.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 q={attribute:!0,type:String,converter:T,reflect:!1,hasChanged:R},j=(t=q,e,i)=>{const{kind:s,metadata:r}=i;let a=globalThis.litPropertyMetadata.get(r);if(void 0===a&&globalThis.litPropertyMetadata.set(r,a=new Map),"setter"===s&&((t=Object.create(t)).wrapped=!0),a.set(i.name,t),"accessor"===s){const{name:s}=i;return{set(i){const r=e.get.call(this);e.set.call(this,i),this.requestUpdate(s,r,t)},init(e){return void 0!==e&&this.C(s,void 0,t,e),e}}}if("setter"===s){const{name:s}=i;return function(i){const r=this[s];e.call(this,i),this.requestUpdate(s,r,t)}}throw Error("Unsupported decorator location: "+s)};function W(t){return(e,i)=>"object"==typeof i?j(t,e,i):((t,e,i)=>{const s=e.hasOwnProperty(i);return e.constructor.createProperty(i,t),s?Object.getOwnPropertyDescriptor(e,i):void 0})(t,e,i)}
|
|
29
29
|
/**
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
* @
|
|
34
|
-
* Copyright (c) 2025 Google LLC
|
|
35
|
-
* See LICENSE file in the project root for full license text.
|
|
36
|
-
*/
|
|
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>`}};
|
|
30
|
+
* @license
|
|
31
|
+
* Copyright 2017 Google LLC
|
|
32
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
33
|
+
*/const B=globalThis,I=B.trustedTypes,z=I?I.createPolicy("lit-html",{createHTML:t=>t}):void 0,V="$lit$",D=`lit$${Math.random().toFixed(9).slice(2)}$`,L="?"+D,X=`<${L}>`,G=document,J=()=>G.createComment(""),K=t=>null===t||"object"!=typeof t&&"function"!=typeof t,Z=Array.isArray,F="[ \t\n\f\r]",Q=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Y=/-->/g,tt=/>/g,et=RegExp(`>|${F}(?:([^\\s"'>=/]+)(${F}*=${F}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),it=/'/g,st=/"/g,rt=/^(?:script|style|textarea|title)$/i,at=Symbol.for("lit-noChange"),nt=Symbol.for("lit-nothing"),ot=new WeakMap,ht=G.createTreeWalker(G,129);function lt(t,e){if(!Z(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==z?z.createHTML(e):e}const ct=(t,e)=>{const i=t.length-1,s=[];let r,a=2===e?"<svg>":3===e?"<math>":"",n=Q;for(let e=0;e<i;e++){const i=t[e];let o,h,l=-1,c=0;for(;c<i.length&&(n.lastIndex=c,h=n.exec(i),null!==h);)c=n.lastIndex,n===Q?"!--"===h[1]?n=Y:void 0!==h[1]?n=tt:void 0!==h[2]?(rt.test(h[2])&&(r=RegExp("</"+h[2],"g")),n=et):void 0!==h[3]&&(n=et):n===et?">"===h[0]?(n=r??Q,l=-1):void 0===h[1]?l=-2:(l=n.lastIndex-h[2].length,o=h[1],n=void 0===h[3]?et:'"'===h[3]?st:it):n===st||n===it?n=et:n===Y||n===tt?n=Q:(n=et,r=void 0);const d=n===et&&t[e+1].startsWith("/>")?" ":"";a+=n===Q?i+X:l>=0?(s.push(o),i.slice(0,l)+V+i.slice(l)+D+d):i+D+(-2===l?e:d)}return[lt(t,a+(t[i]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),s]};class dt{constructor({strings:t,_$litType$:e},i){let s;this.parts=[];let r=0,a=0;const n=t.length-1,o=this.parts,[h,l]=ct(t,e);if(this.el=dt.createElement(h,i),ht.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(s=ht.nextNode())&&o.length<n;){if(1===s.nodeType){if(s.hasAttributes())for(const t of s.getAttributeNames())if(t.endsWith(V)){const e=l[a++],i=s.getAttribute(t).split(D),n=/([.?@])?(.*)/.exec(e);o.push({type:1,index:r,name:n[2],strings:i,ctor:"."===n[1]?vt:"?"===n[1]?gt:"@"===n[1]?$t:ut}),s.removeAttribute(t)}else t.startsWith(D)&&(o.push({type:6,index:r}),s.removeAttribute(t));if(rt.test(s.tagName)){const t=s.textContent.split(D),e=t.length-1;if(e>0){s.textContent=I?I.emptyScript:"";for(let i=0;i<e;i++)s.append(t[i],J()),ht.nextNode(),o.push({type:2,index:++r});s.append(t[e],J())}}}else if(8===s.nodeType)if(s.data===L)o.push({type:2,index:r});else{let t=-1;for(;-1!==(t=s.data.indexOf(D,t+1));)o.push({type:7,index:r}),t+=D.length-1}r++}}static createElement(t,e){const i=G.createElement("template");return i.innerHTML=t,i}}function pt(t,e,i=t,s){if(e===at)return e;let r=void 0!==s?i._$Co?.[s]:i._$Cl;const a=K(e)?void 0:e._$litDirective$;return r?.constructor!==a&&(r?._$AO?.(!1),void 0===a?r=void 0:(r=new a(t),r._$AT(t,i,s)),void 0!==s?(i._$Co??=[])[s]=r:i._$Cl=r),void 0!==r&&(e=pt(t,r._$AS(t,e.values),r,s)),e}class mt{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:i}=this._$AD,s=(t?.creationScope??G).importNode(e,!0);ht.currentNode=s;let r=ht.nextNode(),a=0,n=0,o=i[0];for(;void 0!==o;){if(a===o.index){let e;2===o.type?e=new ft(r,r.nextSibling,this,t):1===o.type?e=new o.ctor(r,o.name,o.strings,this,t):6===o.type&&(e=new yt(r,this,t)),this._$AV.push(e),o=i[++n]}a!==o?.index&&(r=ht.nextNode(),a++)}return ht.currentNode=G,s}p(t){let e=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class ft{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,i,s){this.type=2,this._$AH=nt,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=s,this._$Cv=s?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t?.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=pt(this,t,e),K(t)?t===nt||null==t||""===t?(this._$AH!==nt&&this._$AR(),this._$AH=nt):t!==this._$AH&&t!==at&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>Z(t)||"function"==typeof t?.[Symbol.iterator])(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==nt&&K(this._$AH)?this._$AA.nextSibling.data=t:this.T(G.createTextNode(t)),this._$AH=t}$(t){const{values:e,_$litType$:i}=t,s="number"==typeof i?this._$AC(t):(void 0===i.el&&(i.el=dt.createElement(lt(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===s)this._$AH.p(e);else{const t=new mt(s,this),i=t.u(this.options);t.p(e),this.T(i),this._$AH=t}}_$AC(t){let e=ot.get(t.strings);return void 0===e&&ot.set(t.strings,e=new dt(t)),e}k(t){Z(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,s=0;for(const r of t)s===e.length?e.push(i=new ft(this.O(J()),this.O(J()),this,this.options)):i=e[s],i._$AI(r),s++;s<e.length&&(this._$AR(i&&i._$AB.nextSibling,s),e.length=s)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t))}}class ut{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,i,s,r){this.type=1,this._$AH=nt,this._$AN=void 0,this.element=t,this.name=e,this._$AM=s,this.options=r,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=nt}_$AI(t,e=this,i,s){const r=this.strings;let a=!1;if(void 0===r)t=pt(this,t,e,0),a=!K(t)||t!==this._$AH&&t!==at,a&&(this._$AH=t);else{const s=t;let n,o;for(t=r[0],n=0;n<r.length-1;n++)o=pt(this,s[i+n],e,n),o===at&&(o=this._$AH[n]),a||=!K(o)||o!==this._$AH[n],o===nt?t=nt:t!==nt&&(t+=(o??"")+r[n+1]),this._$AH[n]=o}a&&!s&&this.j(t)}j(t){t===nt?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class vt extends ut{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===nt?void 0:t}}class gt extends ut{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==nt)}}class $t extends ut{constructor(t,e,i,s,r){super(t,e,i,s,r),this.type=5}_$AI(t,e=this){if((t=pt(this,t,e,0)??nt)===at)return;const i=this._$AH,s=t===nt&&i!==nt||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,r=t!==nt&&(i===nt||s);s&&this.element.removeEventListener(this.name,this,i),r&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}}class yt{constructor(t,e,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){pt(this,t)}}const wt=B.litHtmlPolyfillSupport;wt?.(dt,ft),(B.litHtmlVersions??=[]).push("3.3.1");
|
|
38
34
|
/**
|
|
39
|
-
*
|
|
40
|
-
*
|
|
41
|
-
*
|
|
42
|
-
* @license MIT
|
|
43
|
-
* Copyright (c) 2025 Google LLC
|
|
44
|
-
* See LICENSE file in the project root for full license text.
|
|
35
|
+
* @license
|
|
36
|
+
* Copyright 2017 Google LLC
|
|
37
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
45
38
|
*/
|
|
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};
|
|
39
|
+
const _t=1;class kt{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
|
|
40
|
+
/**
|
|
41
|
+
* @license
|
|
42
|
+
* Copyright 2018 Google LLC
|
|
43
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
44
|
+
*/const bt=(t=>(...e)=>({_$litDirective$:t,values:e}))(class extends kt{constructor(t){if(super(t),t.type!==_t||"class"!==t.name||t.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter(e=>t[e]).join(" ")+" "}update(t,[e]){if(void 0===this.st){this.st=new Set,void 0!==t.strings&&(this.nt=new Set(t.strings.join(" ").split(/\s/).filter(t=>""!==t)));for(const t in e)e[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(e)}const i=t.element.classList;for(const t of this.st)t in e||(i.remove(t),this.st.delete(t));for(const t in e){const s=!!e[t];s===this.st.has(t)||this.nt?.has(t)||(s?(i.add(t),this.st.add(t)):(i.remove(t),this.st.delete(t)))}return at}});
|
|
45
|
+
/**
|
|
46
|
+
* @license
|
|
47
|
+
* Copyright 2018 Google LLC
|
|
48
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
49
|
+
*/class At extends(a(n(t,"progressbar"),!0)){constructor(){super(...arguments),this.value=0,this.max=100,this.variant="flat"}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}`)}}var xt,St,Et,Mt,Ct,Pt,Ut,Ot,Tt,Rt,Ht,Nt,qt,jt,Wt,Bt,It,zt,Vt,Dt,Lt,Xt,Gt,Jt,Kt;At.styles=e`@media (forced-colors: active) { :host { --m3e-progress-indicator-color: CanvasText; --m3e-progress-indicator-track-color: Canvas; } }`,p([W({type:Number,reflect:!0})],At.prototype,"value",void 0),p([W({type:Number})],At.prototype,"max",void 0),p([W({reflect:!0})],At.prototype,"variant",void 0);let Zt=Kt=class extends At{constructor(){super(...arguments),xt.add(this),St.set(this,"m3e-circular-progress-mask-"+Kt.__nextMaskId++),Et.set(this,0),Mt.set(this,0),Ct.set(this,0),Pt.set(this,0),Ut.set(this,void 0),Ot.set(this,void 0),Tt.set(this,new h(this,{skipInitial:!0,target:null,callback:()=>{m(this,xt,"m",Wt).call(this),m(this,xt,"m",Bt).call(this)}})),Rt.set(this,new l(this,(t,e)=>m(this,xt,"m",It).call(this,e))),this.indeterminate=!1}update(t){super.update(t),t.has("indeterminate")&&(this.ariaValueNow=this.indeterminate?null:`${this.value}`)}firstUpdated(t){super.firstUpdated(t);const e=this.shadowRoot?.querySelector(".diameter-and-stroke");e&&(m(this,xt,"m",Wt).call(this),m(this,Tt,"f").observe(e));const i=this.shadowRoot?.querySelector(".amplitude-and-wavelength");i&&(m(this,xt,"m",Wt).call(this),m(this,Tt,"f").observe(i))}updated(t){super.updated(t),t.has("indeterminate")&&(f(this,Ut,this.shadowRoot?.querySelector(".spinner.active-track"),"f"),f(this,Ot,this.shadowRoot?.querySelector(".spinner.track"),"f"),this.indeterminate?m(this,Rt,"f").start():m(this,Rt,"f").stop())}render(){return"wavy"===this.variant?m(this,xt,"m",Nt).call(this):m(this,xt,"m",Ht).call(this)}};var Ft,Qt,Yt,te,ee,ie,se,re,ae,ne,oe,he;St=new WeakMap,Et=new WeakMap,Mt=new WeakMap,Ct=new WeakMap,Pt=new WeakMap,Ut=new WeakMap,Ot=new WeakMap,Tt=new WeakMap,Rt=new WeakMap,xt=new WeakSet,Ht=function(){if(this.indeterminate){const t=m(this,xt,"m",Gt).call(this,{startAngle:-45,endAngle:90+m(this,Mt,"f")}),e=m(this,xt,"m",Gt).call(this,{startAngle:-m(this,Mt,"f"),endAngle:135});return i`<div class="progress" aria-hidden="true"><div class="spinner"><div class="left"><svg viewBox="${t.viewBox}" class="circle"><path class="active-track" d="${t.path}" stroke="currentColor" stroke-width="${m(this,Mt,"f")}" fill="none" stroke-linecap="round"/></svg></div><div class="right"><svg viewBox="${e.viewBox}" class="circle"><path class="active-track" d="${e.path}" stroke="currentColor" stroke-width="${m(this,Mt,"f")}" fill="none" stroke-linecap="round"/></svg></div></div></div>${m(this,xt,"m",qt).call(this)}`}const t=m(this,xt,"m",Vt).call(this,2*m(this,Mt,"f"),m(this,Et,"f"));let e=this.value/this.max*360;e>0&&(e=Math.max(0,t,e));const a=m(this,xt,"m",Gt).call(this,{gap:e<360?m(this,Mt,"f"):0,endAngle:e}),n=m(this,xt,"m",Gt).call(this,{gap:e>0?m(this,Mt,"f"):0,startAngle:e,endAngle:360});return i`<div class="progress" aria-hidden="true"><svg viewBox="${a.viewBox}">${e>0?r`<path
|
|
50
|
+
class="active-track"
|
|
51
|
+
d="${a.path}"
|
|
52
|
+
stroke="currentColor"
|
|
53
|
+
stroke-width=${m(this,Mt,"f")}
|
|
54
|
+
fill="none"
|
|
55
|
+
stroke-linecap="round"
|
|
56
|
+
/>`:s} ${360-e>=t?r`<path
|
|
57
|
+
class="track"
|
|
58
|
+
d="${n.path}"
|
|
59
|
+
stroke="currentColor"
|
|
60
|
+
stroke-width=${m(this,Mt,"f")}
|
|
61
|
+
fill="none"
|
|
62
|
+
stroke-linecap="round"
|
|
63
|
+
/>`:s}</svg></div>${m(this,xt,"m",qt).call(this)}${m(this,xt,"m",jt).call(this)}`},Nt=function(){if(this.indeterminate)return i`<div class="progress" aria-hidden="true"><svg viewBox="${m(this,xt,"m",Jt).call(this,{endAngle:20}).viewBox}"><path class="spinner active-track" stroke="currentColor" stroke-width="${m(this,Mt,"f")}" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path class="spinner track" stroke="currentColor" stroke-width="${m(this,Mt,"f")}" fill="none" stroke-linecap="round"/></svg></div>${m(this,xt,"m",qt).call(this)}`;const t=m(this,xt,"m",Vt).call(this,2*m(this,Mt,"f"),m(this,Et,"f"));let e=this.value/this.max*360;e>0&&(e=Math.max(0,t,e));const a=e<=t+t/2||360==e?0:m(this,Ct,"f"),n=m(this,xt,"m",Gt).call(this,{gap:e<360?m(this,Mt,"f"):0,endAngle:e}),o=0==a?n:m(this,xt,"m",Jt).call(this,{endAngle:360,amplitude:a}),h=m(this,xt,"m",Gt).call(this,{gap:e>0?m(this,Mt,"f"):0,startAngle:e,endAngle:360}),l=a>0?a+m(this,Mt,"f")/2:m(this,Mt,"f");return i`<svg class="progress" viewBox="${h.viewBox}" aria-hidden="true">${e>0?r`${a>0?r`<defs>
|
|
64
|
+
<mask id="${m(this,St,"f")}">
|
|
65
|
+
<path
|
|
66
|
+
d="${n.path}"
|
|
67
|
+
stroke="white"
|
|
68
|
+
stroke-width="${m(this,Mt,"f")+l}"
|
|
69
|
+
fill="none"
|
|
70
|
+
stroke-linecap="round"
|
|
71
|
+
/>
|
|
72
|
+
</mask>
|
|
73
|
+
</defs>`:s}
|
|
74
|
+
<g class="active-track" mask="${(t=>t??nt)(a>0?c(m(this,St,"f")):void 0)}">
|
|
75
|
+
<path
|
|
76
|
+
class="${bt({wave:a>0})}"
|
|
77
|
+
d="${o.path}"
|
|
78
|
+
stroke="currentColor"
|
|
79
|
+
stroke-width=${m(this,Mt,"f")}
|
|
80
|
+
stroke-linecap="round"
|
|
81
|
+
stroke-linejoin="round"
|
|
82
|
+
fill="none"
|
|
83
|
+
/>
|
|
84
|
+
</g>`:s} ${360-e>=t?r`<path
|
|
85
|
+
class="track"
|
|
86
|
+
d="${h.path}"
|
|
87
|
+
stroke="currentColor"
|
|
88
|
+
stroke-width=${m(this,Mt,"f")}
|
|
89
|
+
fill="none"
|
|
90
|
+
stroke-linecap="round"
|
|
91
|
+
/>`:s}</svg> ${m(this,xt,"m",qt).call(this)}${m(this,xt,"m",jt).call(this)}`},qt=function(){return i`<div class="diameter-and-stroke" aria-hidden="true"></div><div class="amplitude-and-wavelength" aria-hidden="true"></div>`},jt=function(){return i`<div class="content" aria-hidden="true"><slot></slot></div>`},Wt=function(){const t=this.shadowRoot?.querySelector(".diameter-and-stroke");t&&(f(this,Et,t.clientWidth,"f"),f(this,Mt,t.clientHeight,"f"))},Bt=function(){const t=this.shadowRoot?.querySelector(".amplitude-and-wavelength");t&&(f(this,Ct,t.clientWidth,"f"),f(this,Pt,t.clientHeight,"f"))},It=function(t){if(0===m(this,Ct,"f")||0===m(this,Pt,"f"))return;const e=m(this,xt,"m",zt).call(this,t);m(this,Ut,"f")?.setAttribute("d",m(this,xt,"m",Jt).call(this,{endAngle:e}).path),m(this,Ot,"f")?.setAttribute("d",m(this,xt,"m",Gt).call(this,{gap:m(this,xt,"m",Vt).call(this,m(this,Mt,"f"),m(this,Et,"f")),startAngle:e}).path)},zt=function(t){const e=2*m(this,xt,"m",Vt).call(this,m(this,Mt,"f")),i=18+e,s=280-e,r=1.575,a=t%6.3;if(a<r)return i;if(a<3.15){const t=(a-r)/r;return i+t*t*(3-2*t)*(s-i)}if(a<4.725)return s;const n=(a-4.725)/r;return s-n*n*(3-2*n)*(s-i)},Vt=function(t,e=m(this,Ct,"f")){return t*(360/(2*Math.PI*m(this,xt,"m",Xt).call(this,e).r))},Dt=function(t){return(t-90)*(Math.PI/180)},Lt=function(t,e){const i=m(this,xt,"m",Dt).call(this,e);return{x:t.cx+t.r*Math.cos(i),y:t.cy+t.r*Math.sin(i)}},Xt=function(t){t+=m(this,Mt,"f")/2;const e=m(this,Et,"f")/2;return{cx:e+t,cy:e+t,r:e,padding:t}},Gt=function({startAngle:t=0,endAngle:e=360,gap:i=0,padding:s=m(this,Ct,"f")}){if(0===m(this,Et,"f")||0===m(this,Mt,"f"))return{path:"",viewBox:"0 0 0 0"};const r=m(this,xt,"m",Xt).call(this,s);i>0&&(t+=m(this,xt,"m",Vt).call(this,i,s),e-=m(this,xt,"m",Vt).call(this,i,s)),e-t>=360&&(e=t+359.999);const a=m(this,xt,"m",Lt).call(this,r,e),n=m(this,xt,"m",Lt).call(this,r,t);return{path:`M ${a.x} ${a.y} A ${r.r} ${r.r} 0 ${e-t<=180?"0":"1"} 0 ${n.x} ${n.y}`,viewBox:`0 0 ${m(this,Et,"f")+2*r.padding} ${m(this,Et,"f")+2*r.padding}`}},Jt=function({startAngle:t=0,endAngle:e=360,gap:i=0,padding:s=m(this,Ct,"f"),amplitude:r=m(this,Ct,"f"),steps:a=200}){if(0===m(this,Et,"f")||0===m(this,Mt,"f"))return{path:"",viewBox:"0 0 0 0"};const n=m(this,xt,"m",Xt).call(this,s);i>0&&(t+=m(this,xt,"m",Vt).call(this,i,s),e-=m(this,xt,"m",Vt).call(this,i,s));const o=m(this,xt,"m",Dt).call(this,t);let h=m(this,xt,"m",Dt).call(this,e);t===e?h=o:h<o&&(h+=2*Math.PI);const l=h-o,c=2*Math.PI*n.r/m(this,Pt,"f"),d=Math.PI/2*(c-1),p=[];for(let t=0;t<=a;t++){const e=o+(0===a?0:t/a)*l,i=Math.sin(e*c+d),s=n.r-r*i,h=s*Math.cos(e)+n.cx,m=s*Math.sin(e)+n.cy;p.push([h,m])}const f=1===p.length?`M ${p[0][0]},${p[0][1]}`:`M ${p[0][0]},${p[0][1]} `+p.slice(1).map(([t,e])=>`L ${t},${e}`).join(" ");return{path:f,viewBox:`0 0 ${m(this,Et,"f")+2*n.padding} ${m(this,Et,"f")+2*n.padding}`}},Zt.styles=[At.styles,e`:host { display: inline-flex; vertical-align: middle; aspect-ratio: 1; position: relative; align-items: center; justify-content: center; contain: strict; } .progress { --_arc-duration: 1333ms; --_cycle-duration: calc(4 * var(--_arc-duration)); --_linear-rotate-duration: calc(var(--_arc-duration) * 360 / 306); --_indeterminate-easing: cubic-bezier(0.4, 0, 0.2, 1); } .active-track { transition: stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1); } :host([variant="flat"]) .progress { flex: 1; align-self: stretch; pointer-events: none; } .progress, .spinner, .left, .right, .content, .circle { position: absolute; inset: 0; } .content { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .diameter-and-stroke, .amplitude-and-wavelength { visibility: hidden; position: absolute; } .diameter-and-stroke { width: inherit; height: var(--m3e-circular-progress-indicator-thickness, 0.25rem); } .amplitude-and-wavelength { width: var(--m3e-circular-wavy-progress-indicator-amplitude, 0.1rem); height: var(--m3e-circular-wavy-progress-indicator-wavelength, 0.9375rem); } :host([variant="flat"]) { width: var(--m3e-circular-flat-progress-indicator-diameter, 2.5rem); } :host([variant="wavy"]) { width: var(--m3e-circular-wavy-progress-indicator-diameter, 3rem); } :host([variant="flat"][indeterminate]) { content-visibility: auto; } :host([variant="flat"][indeterminate]) .progress { animation: linear infinite linear-rotate; animation-duration: var(--_linear-rotate-duration); } :host([variant="flat"][indeterminate]) .spinner { animation: infinite both rotate-arc; animation-duration: var(--_cycle-duration); animation-timing-function: var(--_indeterminate-easing); } :host([variant="wavy"][indeterminate]) .spinner { transform-origin: 50% 50%; animation: wavy-spin ${1.575}s linear infinite; } .left { overflow: hidden; inset: 0 50% 0 0; } .right { overflow: hidden; inset: 0 0 0 50%; } .circle { animation: expand-arc; animation-iteration-count: infinite; animation-fill-mode: both; animation-duration: var(--_arc-duration), var(--_cycle-duration); animation-timing-function: var(--_indeterminate-easing); } .left .circle { rotate: 135deg; inset: 0 -100% 0 0; } .right .circle { rotate: 100deg; inset: 0 0 0 -100%; animation-delay: calc(-0.5 * var(--_arc-duration)), 0ms; } .track { color: var(--m3e-progress-indicator-track-color, ${o.color.secondaryContainer}); } .active-track { color: var(--m3e-progress-indicator-color, ${o.color.primary}); } .wave { animation: spin-reverse 8s linear infinite; transform-origin: 50% 50%; } @keyframes expand-arc { 0% { transform: rotate(265deg); } 50% { transform: rotate(130deg); } 100% { transform: rotate(265deg); } } @keyframes rotate-arc { 12.5% { transform: rotate(135deg); } 25% { transform: rotate(270deg); } 37.5% { transform: rotate(405deg); } 50% { transform: rotate(540deg); } 62.5% { transform: rotate(675deg); } 75% { transform: rotate(810deg); } 87.5% { transform: rotate(945deg); } 100% { transform: rotate(1080deg); } } @keyframes linear-rotate { to { transform: rotate(360deg); } } @keyframes spin-reverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes wavy-spin { 0% { transform: rotate(0deg); } 10% { transform: rotate(90deg); } 100% { transform: rotate(360deg); } } @media (forced-colors: active) { :host([variant="flat"]) circle { fill: Canvas; } :host([variant="flat"]) .circle { border-color: var(--m3e-progress-indicator-color, ${o.color.primary}) var(--m3e-progress-indicator-color, ${o.color.primary}) Canvas Canvas; } } @media (forced-colors: active) { .progress { --m3e-progress-indicator-track-color: GrayText; --m3e-progress-indicator-color: CanvasText; } }`],Zt.__nextMaskId=0,p([W({type:Boolean,reflect:!0})],Zt.prototype,"indeterminate",void 0),Zt=Kt=p([u("m3e-circular-progress-indicator")],Zt);let le=he=class extends At{constructor(){super(...arguments),Ft.add(this),Qt.set(this,"m3e-linear-progress-mask-"+he.__nextMaskId++),Yt.set(this,0),te.set(this,0),ee.set(this,0),ie.set(this,new h(this,{skipInitial:!0,target:null,callback:()=>{m(this,Ft,"m",ae).call(this),m(this,Ft,"m",ne).call(this)}})),this.mode="determinate",this.bufferValue=0}firstUpdated(t){super.firstUpdated(t),m(this,Ft,"m",ae).call(this),m(this,Ft,"m",ne).call(this);const e=this.shadowRoot?.querySelector(".stroke");e&&m(this,ie,"f").observe(e);const i=this.shadowRoot?.querySelector(".amplitude-and-wavelength");i&&m(this,ie,"f").observe(i)}update(t){super.update(t),t.has("mode")&&(this.ariaValueNow="indeterminate"===this.mode||"query"===this.mode?null:`${this.value}`)}updated(t){if(super.updated(t),t.has("value")||t.has("bufferValue")||t.has("max")){const t=this.shadowRoot?.querySelector(".progress");t?.style.setProperty("--_value",this.value/this.max*100+"%"),t?.style.setProperty("--_buffer-value",this.bufferValue/this.max*100+"%")}}render(){const t=Math.max(0,Math.min(this.value,this.max))/this.max*this.clientWidth,e="indeterminate"===this.mode||"query"===this.mode?this.clientWidth:t+3*m(this,ee,"f"),r="wavy"===this.variant&&m(this,Yt,"f")>0&&m(this,te,"f")>0&&m(this,ee,"f")>0?m(this,Ft,"m",oe).call(this,e):void 0;return i`<div class="progress" aria-hidden="true" style="${d({"--_translate-x":`-${t}px`})}"><div class="track" style="${d({maskImage:"indeterminate"!==this.mode&&"query"!==this.mode||!r?"":c(`${m(this,Qt,"f")}-inverse`)})}"></div>${("determinate"===this.mode||"buffer"===this.mode)&&this.value<=0?s:i`<div class="primary">${!r||"determinate"!==this.mode&&"buffer"!==this.mode?s:m(this,Ft,"m",se).call(this,e,r.height,r.viewBox,r.path)}</div>${"determinate"===this.mode||"buffer"===this.mode?i`<div class="gap"></div>`:s}`} ${"buffer"!==this.mode||this.bufferValue>0?i`<div class="secondary"></div>`:s} ${"buffer"===this.mode&&this.bufferValue>0?i`<div class="gap"></div>`:s} ${"buffer"===this.mode?i`<div class="buffer"></div>`:s} ${("determinate"===this.mode||"buffer"===this.mode)&&this.value>0?i`<div class="gap"></div><div class="stop"></div>`:s} ${r&&"determinate"!==this.mode&&"buffer"!==this.mode?m(this,Ft,"m",se).call(this,e,r.height,r.viewBox,r.path):s}</div>${m(this,Ft,"m",re).call(this)}`}};Qt=new WeakMap,Yt=new WeakMap,te=new WeakMap,ee=new WeakMap,ie=new WeakMap,Ft=new WeakSet,se=function(t,e,a,n){const o="indeterminate"===this.mode||"query"===this.mode;return o||this.value/this.max!==1?i`<svg class="wave" width="${t}" height="${e}" viewBox="${a}" preserveAspectRatio="none">${o?r`
|
|
92
|
+
<mask id="${m(this,Qt,"f")}" maskUnits="userSpaceOnUse">
|
|
93
|
+
<rect width="${t}" height="${e}" fill="black" />
|
|
94
|
+
<rect class="primary" height="${e}" fill="white" />
|
|
95
|
+
<rect class="secondary" height="${e}" fill="white" />
|
|
96
|
+
</mask>
|
|
97
|
+
<mask id="${`${m(this,Qt,"f")}-inverse`}" maskUnits="userSpaceOnUse">
|
|
98
|
+
<rect width="${t}" height="${e}" fill="white" />
|
|
99
|
+
<rect class="primary" height="${e}" fill="black" />
|
|
100
|
+
<rect class="secondary" height="${e}" fill="black" />
|
|
101
|
+
</mask>`:s}<g mask="${o?c(m(this,Qt,"f")):""}"><path d="${n}" stroke="currentColor" stroke-width="${m(this,Yt,"f")}" fill="none" stroke-linecap="round"/></g></svg>`:i`<div class="complete"></div>`},re=function(){return i`<div class="stroke" aria-hidden="true"></div><div class="amplitude-and-wavelength" aria-hidden="true"></div>`},ae=function(){const t=this.shadowRoot?.querySelector(".stroke");t&&f(this,Yt,t.clientHeight,"f")},ne=function(){const t=this.shadowRoot?.querySelector(".amplitude-and-wavelength");t&&(f(this,te,t.clientHeight,"f"),f(this,ee,t.clientWidth,"f"))},oe=function(t,e=0){const i=m(this,te,"f")+m(this,Yt,"f")/2,s=i,r=[],a=m(this,ee,"f")/2;let n=0;for(r.push(`M ${n},${s}`);n<=t;){const t=n+a,o=s+i*Math.sin(2*Math.PI*t/m(this,ee,"f")+e),h=n+a/2,l=s+i*Math.sin(2*Math.PI*(n+a/2)/m(this,ee,"f")+e);r.push(`Q ${h},${l} ${t},${o}`),n+=a}const o=`0 -1 ${t} ${2*i+2}`;return{path:r.join(" "),viewBox:o,height:m(this,Yt,"f")+2*m(this,te,"f"),padding:1}},le.styles=[At.styles,e`:host { display: block; position: relative; } .progress { width: 100%; height: 100%; position: relative; align-items: center; border-radius: var(--m3e-linear-progress-indicator-shape, ${o.shape.corner.extraSmall}); } .stroke, .amplitude-and-wavelength { visibility: hidden; position: absolute; } .stroke { width: 100%; height: var(--m3e-linear-progress-indicator-thickness, 0.25rem); } .amplitude-and-wavelength { height: var(--m3e-linear-wavy-progress-indicator-amplitude, 0.1875rem); width: var(--m3e-linear-wavy-progress-indicator-wavelength, 2.5rem); } :host([mode="indeterminate"]) .amplitude-and-wavelength, :host([mode="query"]) .amplitude-and-wavelength { width: var(--m3e-linear-wavy-indeterminate-progress-indicator-wavelength, 1.5rem); } .primary, .secondary, .stop { height: var(--m3e-linear-progress-indicator-thickness, 0.25rem); border-radius: inherit; } .stop { aspect-ratio: 1; flex: none; } :host([variant="flat"]) { height: var(--m3e-linear-progress-indicator-thickness, 0.25rem); } :host([variant="wavy"]) { height: calc( var(--m3e-linear-progress-indicator-thickness, 0.25rem) + calc(var(--m3e-linear-wavy-progress-indicator-amplitude, 0.1875rem) * 2) ); } :host([variant="wavy"]) .primary, :host([variant="wavy"]) .secondary { position: relative; height: 100%; overflow: hidden; } :host([variant="wavy"]) .complete { position: absolute; margin: auto; top: calc(50% - calc(var(--m3e-linear-progress-indicator-thickness, 0.25rem) / 2)); left: 0; right: 0; height: var(--m3e-linear-progress-indicator-thickness, 0.25rem); border-radius: inherit; } :host([variant="wavy"]) .secondary { height: var(--m3e-linear-progress-indicator-thickness, 0.25rem); } .wave { position: absolute; display: block; } .primary .wave, .secondary .wave { margin-inline-start: calc(0px - var(--m3e-linear-wavy-progress-indicator-wavelength, 2.5rem)); } :host([variant="wavy"][mode="determinate"]) .primary path, :host([variant="wavy"][mode="buffer"]) .primary path { animation: wave-slide 1.5s linear infinite; } @keyframes wave-slide { from { transform: translateX(0); } to { transform: translateX(calc(0px - var(--m3e-linear-wavy-progress-indicator-wavelength, 2.5rem))); } } :host([mode="determinate"]) .progress, :host([mode="buffer"]) .progress { display: flex; overflow: hidden; } :host([mode="determinate"]) .primary, :host([mode="buffer"]) .primary { width: var(--_value, 0px); flex: none; } :host([mode="determinate"]) .gap, :host([mode="buffer"]) .gap { flex-basis: var(--m3e-linear-progress-indicator-thickness, 0.25rem); flex-shrink: 1; } :host([mode="determinate"]) .secondary, :host([mode="buffer"]) .buffer { flex: 1 1 auto; } :host([mode="buffer"]) .buffer { flex-shrink: 5; height: 100%; width: 100%; background-color: var(--m3e-progress-indicator-track-color, ${o.color.secondaryContainer}); mask-image: radial-gradient( circle, black 0, black calc(var(--m3e-linear-progress-indicator-thickness, 0.25rem) / 2), transparent calc(var(--m3e-linear-progress-indicator-thickness, 0.25rem) / 2) ); mask-size: calc(var(--m3e-linear-progress-indicator-thickness, 0.25rem) * 2) 100%; mask-repeat: repeat; animation: buffer 250ms linear infinite; } :host(:dir(rtl)[mode="buffer"]) .buffer { transform: scaleX(-1); } @keyframes buffer { from { mask-position: 0 0; } to { mask-position: calc(-1 * calc(var(--m3e-linear-progress-indicator-thickness, 0.25rem) * 2)) 0; } } :host([mode="buffer"]) .secondary { width: var(--_buffer-value, 0px); flex: none; } :host([mode="indeterminate"]) .primary, :host([mode="query"]) .primary { position: absolute; top: 0; height: 100%; border-radius: inherit; animation: indeterminate-primary 2.1s infinite linear; } :host([variant="wavy"][mode="indeterminate"]) .primary, :host([variant="wavy"][mode="query"]) .primary { animation-name: wavy-indeterminate-primary; } :host([mode="indeterminate"]) .secondary, :host([mode="query"]) .secondary { position: absolute; top: 0; height: 100%; border-radius: inherit; animation: indeterminate-secondary 2.1s infinite linear; animation-delay: 1.15s; animation-fill-mode: backwards; } :host([variant="wavy"][mode="indeterminate"]) .secondary, :host([variant="wavy"][mode="query"]) .secondary { animation-name: wavy-indeterminate-secondary; } :host([mode="indeterminate"]) .progress, :host([mode="query"]) .progress { overflow: hidden; position: relative; } :host(:not(:dir(rtl))[mode="query"]) .progress, :host(:dir(rtl)[mode="indeterminate"]) .progress { transform: scaleX(-1); } :host([variant="flat"]) .primary, :host([variant="flat"][mode="indeterminate"]) .secondary, :host([variant="flat"][mode="query"]) .secondary, :host([variant="wavy"]) .complete, .stop { background-color: var(--m3e-progress-indicator-color, ${o.color.primary}); } :host([variant="wavy"]) .progress { color: var(--m3e-progress-indicator-color, ${o.color.primary}); } :host([mode="determinate"]) .secondary, :host([mode="buffer"]) .secondary, :host([mode="indeterminate"]) .track, :host([mode="query"]) .track { background-color: var(--m3e-progress-indicator-track-color, ${o.color.secondaryContainer}); } :host([mode="indeterminate"]) .track, :host([mode="query"]) .track { position: absolute; margin: auto; top: calc(50% - calc(var(--m3e-linear-progress-indicator-thickness, 0.25rem) / 2)); left: 0; right: 0; height: var(--m3e-linear-progress-indicator-thickness, 0.25rem); border-radius: inherit; } @keyframes indeterminate-primary { 0% { left: -145.167%; width: 8%; } 20% { left: -113.333%; width: 48%; } 60% { left: 56.333%; width: 78%; } 100% { left: 100%; width: 8%; } } @keyframes indeterminate-secondary { 0% { left: -54.888%; width: 8%; } 20% { left: -20%; width: 48%; } 60% { left: 60%; width: 78%; } 100% { left: 160%; width: 8%; } } @keyframes wavy-indeterminate-primary { 0% { transform: translateX(-145.167%); width: 8%; } 20% { transform: translateX(-113.333%); width: 48%; } 60% { transform: translateX(56.333%); width: 78%; } 100% { transform: translateX(100%); width: 8%; } } @keyframes wavy-indeterminate-secondary { 0% { transform: translateX(-54.888%); width: 8%; } 20% { transform: translateX(-20%); width: 48%; } 60% { transform: translateX(60%); width: 78%; } 100% { transform: translateX(160%); width: 8%; } } @media (forced-colors: active) { .progress { --m3e-progress-indicator-track-color: GrayText; --m3e-progress-indicator-color: CanvasText; } }`],le.__nextMaskId=0,p([W({reflect:!0})],le.prototype,"mode",void 0),p([W({attribute:"buffer-value",type:Number,reflect:!0})],le.prototype,"bufferValue",void 0),le=he=p([u("m3e-linear-progress-indicator")],le);export{Zt as M3eCircularProgressIndicatorElement,le as M3eLinearProgressIndicatorElement,At as ProgressElementIndicatorBase};
|
|
47
102
|
//# sourceMappingURL=index.min.js.map
|