@sandlada/mdc/build/components/progress-indicator/progress-indicator.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

import{customElement as e}from"../../node_modules/@lit/reactive-element/decorators/custom-element.js";import{property as t}from"../../node_modules/@lit/reactive-element/decorators/property.js";import"../../node_modules/lit/decorators.js";import{html as n,nothing as r}from"../../node_modules/lit-html/lit-html.js";import{LitElement as i}from"../../node_modules/lit-element/lit-element.js";import"../../node_modules/lit/index.js";import{classMap as a}from"../../node_modules/lit-html/directives/class-map.js";import"../../node_modules/lit/directives/class-map.js";import{composeMixin as o}from"../../utils/compose-mixin/compose-mixin.js";import s from"../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{mixinDelegatesAria as c}from"../../utils/aria/delegate.js";import{styleMap as l}from"../../node_modules/lit-html/directives/style-map.js";import"../../node_modules/lit/directives/style-map.js";import{ProgressIndicatorStyles as u}from"./progress-indicator.style.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*
* @fileoverview
* `mdc-progress-indicator` — Material Design 3 progress indicator.
*
* Two layout variants via the `variant` attribute:
* - **linear** (default): a horizontal bar with a track and an active
*   indicator. Determinate scales the active bar with `transform: scaleX()`
*   (the @material/web approach); indeterminate animates two bars with
*   translateX + scaleX keyframes.
* - **circular**: SVG circle (determinate) or div-based spinner
*   (indeterminate) with four size presets. The indeterminate spinner uses
*   three composed CSS animations (expand-arc, rotate-arc, linear-rotate)
*   matching the @material/web circular implementation for performance
*   (4.5× better FPS than SVG on Chrome).
*
* @link https://m3.material.io/components/progress-indicator/specs
*/
let d=class extends o(c)(i){constructor(...e){super(...e),this.variant=`linear`,this.value=0,this.max=1,this.indeterminate=!1,this.circularSize=`medium`}static{this.styles=u}static{this.shadowRootOptions={mode:`open`,delegatesFocus:!1}}firstUpdated(e){super.firstUpdated(e),this.setupAria()}render(){let{ariaLabel:e}=this;return n`<div class="progress ${a(this.getRenderClasses())}" role="progressbar" aria-label="${e||r}" aria-valuemin="0" aria-valuemax="${this.max}" aria-valuenow="${this.indeterminate?r:this.value}">${this.variant===`linear`?this.renderLinear():this.renderCircular()}</div>`}getRenderClasses(){return{indeterminate:this.indeterminate,linear:this.variant===`linear`,circular:this.variant===`circular`}}renderLinear(){let e=this.max>0?this.value/this.max:0,t={transform:`scaleX(${(this.indeterminate?1:e)*100}%)`};return n`<div class="inactive-track"></div><div class="bar primary-bar" style="${l(t)}"><div class="bar-inner"></div></div><div class="bar secondary-bar"><div class="bar-inner"></div></div>`}renderCircular(){return this.indeterminate?this.renderCircularIndeterminate():this.renderCircularDeterminate()}renderCircularDeterminate(){let e=(1-(this.max>0?this.value/this.max:0))*100;return n`<svg viewBox="0 0 4800 4800"><circle class="track" pathLength="100"></circle><circle class="active-track" pathLength="100" stroke-dashoffset="${e}"></circle></svg>`}renderCircularIndeterminate(){return n`<div class="spinner"><div class="left"><div class="circle"></div></div><div class="right"><div class="circle"></div></div></div>`}setupAria(){!this.getAttribute(`aria-label`)&&!this.getAttribute(`aria-labelledby`)&&this.setAttribute(`aria-label`,`Progress`)}};s([t({type:String,reflect:!0})],d.prototype,`variant`,void 0),s([t({type:Number})],d.prototype,`value`,void 0),s([t({type:Number})],d.prototype,`max`,void 0),s([t({type:Boolean,reflect:!0})],d.prototype,`indeterminate`,void 0),s([t({type:String,reflect:!0,attribute:`circular-size`})],d.prototype,`circularSize`,void 0),d=s([e(`mdc-progress-indicator`)],d);export{d as MDCProgressIndicator};
//# sourceMappingURL=progress-indicator.js.map