/*
 * This file is part of the TYPO3 CMS project.
 *
 * It is free software; you can redistribute it and/or modify it under
 * the terms of the GNU General Public License, either version 2
 * of the License, or any later version.
 *
 * For the full copyright and license information, please read the
 * LICENSE.txt file that was distributed with this source code.
 *
 * The TYPO3 project - inspiring people to share!
 */
import{LitElement as h,css as b,nothing as l,html as u}from"lit";import{property as n,customElement as g}from"lit/decorators.js";import{classMap as m}from"lit/directives/class-map.js";import{styleMap as v}from"lit/directives/style-map.js";import f from"@typo3/backend/severity.js";import"@typo3/backend/enum/severity.js";var o=function(d,r,e,t){var s=arguments.length,a=s<3?r:t===null?t=Object.getOwnPropertyDescriptor(r,e):t,p;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")a=Reflect.decorate(d,r,e,t);else for(var c=d.length-1;c>=0;c--)(p=d[c])&&(a=(s<3?p(a):s>3?p(r,e,a):p(r,e))||a);return s>3&&a&&Object.defineProperty(r,e,a),a};let i=class extends h{constructor(){super(...arguments),this.value=void 0,this.max=100,this.severity=void 0,this.isHidden=!1,this.isHiding=!1,this.abortController=new AbortController}static{this.styles=b`@keyframes progress-indeterminate{0%{inset-inline-start:-33%}to{inset-inline-start:100%}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}:host{--progress-bar-height:4px;--progress-bar-color-primary:var(--typo3-state-primary-border-color);--progress-bar-color-success:var(--typo3-state-success-border-color);--progress-bar-color-warning:var(--typo3-state-warning-border-color);--progress-bar-color-danger:var(--typo3-state-danger-border-color);--progress-bar-color-info:var(--typo3-state-info-border-color);--progress-bar-color:var(--progress-bar-color-primary);--progress-track-color:light-dark(var(--token-color-neutral-20),var(--token-color-neutral-80));--progress-border-radius:var(--typo3-component-border-radius);display:block;width:100%;border-radius:var(--progress-border-radius)}:host([hidden]){display:none}:host([is-hiding]){animation:fade-out .3s ease-out forwards}.progress{position:relative;overflow:hidden;height:var(--progress-bar-height);border-radius:var(--progress-border-radius)}.value{display:block;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.track{background:var(--progress-track-color);inset:0}.bar{background:var(--progress-bar-color);transition:width .5s ease-in-out;&.bar-success{--progress-bar-color:var(--progress-bar-color-success)}&.bar-warning{--progress-bar-color:var(--progress-bar-color-warning)}&.bar-danger{--progress-bar-color:var(--progress-bar-color-danger)}&.bar-info{--progress-bar-color:var(--progress-bar-color-info)}&.indeterminate{animation-name:progress-indeterminate;animation-duration:3s;animation-iteration-count:infinite;animation-timing-function:linear;width:33%;background-image:linear-gradient(to right,var(--progress-track-color) 0,transparent 50%,var(--progress-track-color) 100%)}}.bar,.track{position:absolute;height:var(--progress-bar-height)}.label{margin-top:.5rem}`}isRunning(){return!this.abortController.signal.aborted}start(r=!1){this.abortController.abort(),this.abortController=new AbortController,this.isHiding=!1,this.isHidden=!1,this.value=r?void 0:0}inc(r=5){let e=this.value??0;e=this.clamp(e+r,0,this.max),this.value=e>=this.max?this.max:e}async done(){const r=this.abortController.signal;if((this.value??0)>=this.max){this.hide();return}if(isNaN(this.value)&&(this.value=0),await this.updateComplete,r.aborted||(await new Promise(s=>requestAnimationFrame(()=>requestAnimationFrame(s))),r.aborted)||(this.value=this.max,await this.updateComplete,r.aborted))return;this.shadowRoot.querySelector(".bar").addEventListener("transitionend",()=>{this.hide()},{once:!0,signal:r})}hide(){this.isHiding=!0,this.addEventListener("animationend",()=>{this.remove()},{once:!0,signal:this.abortController.signal})}connectedCallback(){super.connectedCallback(),this.updateHostClass()}disconnectedCallback(){super.disconnectedCallback()}render(){const r="progress-label-"+(Math.random()+1).toString(36).substring(2),e=this.label!==void 0&&this.label,t=isNaN(this.value),s=m({bar:!0,["bar-"+f.getCssClass(this.severity)]:!t&&this.severity!==void 0,indeterminate:t}),a=t?l:v({width:(this.clamp(this.value,0,this.max)/this.max*100).toString()+"%"});return u`<div class=progress-wrapper><div role=progressbar class=progress aria-valuenow=${t?l:this.value} aria-valuemin=0 aria-valuemax=${this.max} aria-describedby=${e?r:l}><div class=track></div><div class=${s} style=${a}>${t?l:u`<span class=value>${this.value}%</span>`}</div></div>${e?u`<div class=label id=${r}>${this.label}</div>`:l}</div>`}updated(r){super.updated(r),r.has("isHiding")&&this.updateHostClass()}updateHostClass(){this.isHiding?this.setAttribute("is-hiding",""):this.removeAttribute("is-hiding")}clamp(r,e,t){return Math.min(t,Math.max(e,r))}};o([n({type:Number,reflect:!0})],i.prototype,"value",void 0),o([n({type:Number,reflect:!0})],i.prototype,"max",void 0),o([n({type:Number,reflect:!0})],i.prototype,"severity",void 0),o([n({type:String,reflect:!0})],i.prototype,"label",void 0),o([n({type:Boolean,reflect:!0,attribute:"hidden"})],i.prototype,"isHidden",void 0),o([n({type:Boolean,state:!0})],i.prototype,"isHiding",void 0),i=o([g("typo3-backend-progress-bar")],i);export{i as ProgressBarElement};