TYPO3 v15 dev-main snapshot ()

Resources/Public/JavaScript/element/progress-tracker-element.js

@@ -0,0 +1,13 @@
+/*
+ * 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 l,css as d,nothing as h,html as b}from"lit";import{property as n,customElement as k}from"lit/decorators.js";import{styleMap as v}from"lit/directives/style-map.js";import m from"~labels/backend.layout";var p=function(s,r,t,i){var o=arguments.length,e=o<3?r:i===null?i=Object.getOwnPropertyDescriptor(r,t):i,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(s,r,t,i);else for(var g=s.length-1;g>=0;g--)(c=s[g])&&(e=(o<3?c(e):o>3?c(r,t,e):c(r,t))||e);return o>3&&e&&Object.defineProperty(r,t,e),e};let a=class extends l{constructor(){super(...arguments),this.stages=[],this.activeStage=0}static{this.styles=d`:host{--progress-tracker-margin:var(--typo3-spacing);--progress-tracker-stage:0;--progress-tracker-stages:0;--progress-tracker-gap:.25rem;--progress-tracker-bar-height:6px;--progress-tracker-bar-border-radius:3px;--progress-tracker-bar-bg:light-dark(var(--token-color-neutral-20),var(--token-color-neutral-80));--progress-tracker-bar-progress-bg:var(--typo3-state-primary-border-color);display:block;width:100%;margin-bottom:var(--progress-tracker-margin)}.tracker{position:relative;display:grid;gap:var(--progress-tracker-gap);grid-template-columns:auto min-content;grid-template-areas:"stage step" "bar   bar"}.tracker-stage{grid-area:stage}.tracker-step{grid-area:step;white-space:nowrap}.tracker-bar{grid-area:bar;position:relative;width:100%;height:var(--progress-tracker-bar-height);border-radius:var(--progress-tracker-bar-border-radius);background-color:var(--progress-tracker-bar-bg)}.tracker-bar:after{content:"";height:100%;width:calc(100%/var(--progress-tracker-stages)*var(--progress-tracker-stage));display:block;border-radius:inherit;background-color:var(--progress-tracker-bar-progress-bg)}@media (prefers-reduced-motion:no-preference){.tracker-bar:after{transition:width .5s ease-in-out}}`}render(){if(this.stages.length<2)return h;this.activeStage=Math.min(Math.max(this.activeStage,this.stages.length>0?1:0),this.stages.length);const r=this.stages[this.activeStage-1],t=v({"--progress-tracker-stage":`${this.activeStage}`,"--progress-tracker-stages":`${this.stages.length}`});return b`<div class=tracker role=group aria-describedby=tracker-details style=${t}><div class=tracker-stage id=tracker-stage aria-live=polite>${r}</div><div class=tracker-step id=tracker-details>${m.get("progressTracker.steps",[this.activeStage,this.stages.length])||`Step ${this.activeStage} of ${this.stages.length}`}</div><div class=tracker-bar id=tracker-bar aria-hidden=true></div></div>`}};p([n({attribute:"stages",type:Array})],a.prototype,"stages",void 0),p([n({attribute:"active",type:Number,reflect:!0})],a.prototype,"activeStage",void 0),a=p([k("typo3-backend-progress-tracker")],a);export{a as ProgressTrackerElement};