@luzmo/lucero 2.4.1 → 2.4.2

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.
@@ -1,383 +0,0 @@
1
- /*! * Lucero - The design system for Luzmo.
2
- *
3
- * Copyright © 2026 Luzmo
4
- * All rights reserved.
5
- * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
6
- * This license allows users with a current active Luzmo account to use Lucero.
7
- * This license terminates automatically if a user no longer has an active Luzmo account.
8
- * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
9
- *
10
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
11
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
12
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
13
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
14
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
15
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
- * SOFTWARE.
17
- * */
18
- import "./tokens.js";
19
- import { n as e, t } from "./decorate-CkCg3wfh.js";
20
- import { n } from "./sized-mixin-DzQTebN-.js";
21
- import { r, t as i } from "./language-resolution-BaKYDD1a.js";
22
- import { html as a, nothing as o, unsafeCSS as s } from "lit";
23
- import { property as c, state as l } from "lit/decorators.js";
24
- import { luzmoAlert as u, luzmoAngleRight as d, luzmoCheckCircleOutline as f, luzmoClose14 as p, luzmoIcon as m } from "@luzmo/icons";
25
- import { classMap as h } from "lit/directives/class-map.js";
26
- import { repeat as g } from "lit/directives/repeat.js";
27
- import { keyed as _ } from "lit/directives/keyed.js";
28
- //#region src/components/progress-steps/progress-steps-model.ts
29
- function v(e) {
30
- for (let t = (e?.length ?? 0) - 1; t >= 0; t--) if (e[t].status === "inProgress") return e[t];
31
- return null;
32
- }
33
- function y(e) {
34
- let t = v(e.children);
35
- return t ? y(t) ?? t : null;
36
- }
37
- function b(e, t) {
38
- return typeof e == "object" ? e[t] ?? e.en ?? Object.values(e)[0] ?? "" : String(e);
39
- }
40
- function x(e) {
41
- return !!e?.children?.length;
42
- }
43
- function S(e) {
44
- let t = v(e?.children);
45
- return t ? {
46
- mainStep: t,
47
- subStep: y(t)
48
- } : null;
49
- }
50
- function C(e) {
51
- let t = 0;
52
- for (let n of e?.children ?? []) t += +(n.status === "error") + C(n);
53
- return t;
54
- }
55
- function w(e) {
56
- return !!e?.children?.some((e) => e.status === "success" || e.status === "error");
57
- }
58
- function T(e) {
59
- return e?.status === "success" || e?.status === "error";
60
- }
61
- function E(e, t) {
62
- return e.description ? e.description.replaceAll(/\{\{(\w+)\}\}/g, (n, r) => {
63
- let i = e.descriptionMetadata?.[r];
64
- return i == null ? n : Array.isArray(i) ? i.map((e) => b(e, t)).join(", ") : b(i, t);
65
- }) : e.step;
66
- }
67
- //#endregion
68
- //#region src/components/progress-steps/progress-steps.module.scss?inline
69
- var D = ":host{box-sizing:border-box;font-family:var(--luzmo-font-family);font-size:var(--luzmo-progress-steps-font-size,var(--progress-steps-font-size));line-height:var(--progress-steps-line-height);color:var(--luzmo-progress-steps-font-color-dimmed,var(--progress-steps-font-color-dimmed));display:block}.summary{box-sizing:border-box;align-items:center;gap:var(--progress-steps-gap);max-inline-size:100%;min-block-size:var(--progress-steps-min-height);padding-block:0;padding-inline:var(--progress-steps-padding-inline);border-radius:var(--progress-steps-border-radius);color:inherit;font:inherit;text-align:start;cursor:pointer;appearance:none;background:0 0;border:0;margin:0;display:inline-flex}.summary:hover{background-color:var(--progress-steps-hover-background)}.summary:focus-visible{outline:var(--progress-steps-focus-ring-width) solid var(--highcontrast-progress-steps-focus-ring-color,var(--progress-steps-focus-ring-color));outline-offset:var(--progress-steps-focus-ring-gap)}.status-icon{inline-size:var(--progress-steps-icon-size);block-size:var(--progress-steps-icon-size);flex:none;justify-content:center;align-items:center;display:inline-flex;position:relative;inset-block-start:var(--progress-steps-icon-offset)}.status-icon svg{block-size:100%;inline-size:100%}.status-icon-failed{color:var(--luzmo-progress-steps-warning-color,var(--progress-steps-warning-color))}.status-icon-finished{color:var(--luzmo-progress-steps-success-color,var(--progress-steps-success-color))}.spinner{box-sizing:border-box;border:calc(var(--luzmo-border-width) * 1.5) solid var(--highcontrast-progress-steps-spinner-track-color,var(--luzmo-progress-steps-substep-connector-color,var(--progress-steps-substep-connector-color)));border-block-start-color:var(--highcontrast-progress-steps-spinner-color,currentcolor);block-size:70%;inline-size:70%;animation:progress-steps-spin var(--progress-steps-spinner-duration) linear infinite;border-radius:50%}.headline{flex:0 auto;min-inline-size:0;display:block;position:relative;overflow:hidden}.headline-text{white-space:nowrap;min-inline-size:0;display:flex}.headline-text.entering{animation:progress-steps-enter var(--progress-steps-transition-duration) ease-out}.headline-text.leaving{inline-size:100%;animation:progress-steps-leave var(--progress-steps-transition-duration) ease-in forwards;position:absolute;inset-block-start:0;inset-inline-start:0}.main-step{text-overflow:ellipsis;min-inline-size:0;color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color));flex:0 auto;overflow:hidden}.sub-step{flex:0 auto;min-inline-size:0;display:flex}.sub-step-texts{min-inline-size:0;display:block;position:relative;overflow:hidden}.sub-step-text{text-overflow:ellipsis;display:block;overflow:hidden}.sub-step-text.entering{animation:progress-steps-enter var(--progress-steps-transition-duration) ease-out}.sub-step-text.leaving{animation:progress-steps-leave var(--progress-steps-transition-duration) ease-in forwards;position:absolute;inset-block-start:0;inset-inline-start:0}.headline-text[data-sub-step-only] .main-step{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.headline-text[data-sub-step-only] .sub-step:before{display:none}.summary[data-state=done] .main-step{color:inherit}.summary:hover .main-step{color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color))}.sub-step:before,.failed-count:before{content:\"·\"/\"\";flex:none;padding-inline:.35em}.failed-count:before{padding-inline-start:0}.failed-count{white-space:nowrap;flex:none}.shimmer{-webkit-mask-image:linear-gradient(to right, currentcolor 35%, color-mix(in srgb, currentcolor 35%, transparent) 50%, currentcolor 65%);mask-image:linear-gradient(to right, currentcolor 35%, color-mix(in srgb, currentcolor 35%, transparent) 50%, currentcolor 65%);animation:progress-steps-shimmer var(--progress-steps-shimmer-duration) linear infinite;-webkit-mask-size:300% 100%;mask-size:300% 100%}.chevron{inline-size:var(--progress-steps-chevron-size);block-size:var(--progress-steps-chevron-size);transition:transform var(--progress-steps-transition-duration) ease;flex:none;display:inline-flex}.chevron svg{block-size:100%;inline-size:100%}:host([open]) .chevron{transform:rotate(90deg)}:host([dir=rtl]) .chevron svg{transform:scaleX(-1)}:host([dir=rtl][open]) .chevron{transform:rotate(-90deg)}:host([dir=rtl]) .shimmer{animation-direction:reverse}.details{padding-block:var(--progress-steps-step-spacing);padding-inline:var(--progress-steps-padding-inline);font-size:var(--luzmo-progress-steps-font-size-small,var(--progress-steps-font-size-small));line-height:var(--progress-steps-details-line-height);animation:progress-steps-details-in var(--progress-steps-transition-duration) ease-out}.steps,.substeps{margin:0;padding:0;list-style:none}.step{grid-template-columns:var(--progress-steps-icon-size) minmax(0, 1fr);column-gap:var(--progress-steps-gap);padding-block:var(--progress-steps-step-spacing);display:grid;position:relative}.step:before,.step:after{content:\"\";border-inline-start:var(--luzmo-border-width) solid var(--luzmo-progress-steps-substep-connector-color,var(--progress-steps-substep-connector-color));position:absolute;inset-inline-start:calc(var(--progress-steps-icon-size) / 2 - var(--luzmo-border-width) / 2)}.step:before{block-size:calc(var(--progress-steps-marker-center) - var(--progress-steps-marker-radius));inset-block-start:0}.step:after{inset-block:calc(var(--progress-steps-marker-center) + var(--progress-steps-marker-radius)) 0}.step:first-child:before{display:none}.step:last-child:not(:has(>.substeps)):after{display:none}.step-marker{block-size:calc(1em * var(--progress-steps-details-line-height));color:var(--luzmo-progress-steps-font-color-dimmed,var(--progress-steps-font-color-dimmed));justify-content:center;align-items:center;display:inline-flex}.step-marker svg{inline-size:var(--progress-steps-marker-size);block-size:var(--progress-steps-marker-size)}.step-dot{box-sizing:border-box;inline-size:var(--progress-steps-dot-size);block-size:var(--progress-steps-dot-size);border:calc(var(--progress-steps-dot-size) / 2) solid currentcolor;border-radius:50%}.step-inProgress .step-marker{color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color))}.step-inProgress .step-marker .step-dot{animation:1.2s ease-in-out infinite progress-steps-pulse}.step-pending .step-dot{border-width:var(--luzmo-border-width)}.step-error .step-marker{color:var(--luzmo-progress-steps-error-color,var(--progress-steps-error-color))}.step-label{color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color));overflow-wrap:anywhere}.substeps{gap:var(--progress-steps-step-spacing);flex-direction:column;display:flex}.step>.substeps{grid-column:2;margin-block-start:calc(2 * var(--progress-steps-step-spacing))}.substep>.substeps{margin-block-start:var(--progress-steps-step-spacing);padding-inline-start:var(--progress-steps-substep-indent)}.substep{overflow-wrap:anywhere}.substep-inProgress{color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color))}.substep-error{color:var(--luzmo-progress-steps-error-color,var(--progress-steps-error-color))}.substep-icon{vertical-align:-.1em;block-size:.85em;inline-size:.85em;margin-inline-end:.3em;display:inline-flex}.substep-icon svg{block-size:100%;inline-size:100%}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:host([no-animate]) .headline-text,:host([no-animate]) .sub-step-text,:host([no-animate]) .details,:host([no-animate]) .chevron,:host([no-animate]) .spinner,:host([no-animate]) .step-dot{transition:none;animation:none}:host([no-animate]) .leaving{display:none}@keyframes progress-steps-shimmer{0%{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}@keyframes progress-steps-enter{0%{opacity:0;transform:translateY(60%)}}@keyframes progress-steps-leave{to{opacity:0;transform:translateY(-60%)}}@keyframes progress-steps-details-in{0%{opacity:0;transform:translateY(calc(-1 * var(--luzmo-spacing-2)))}}@keyframes progress-steps-spin{to{transform:rotate(360deg)}}@keyframes progress-steps-pulse{50%{opacity:.35}}@media (prefers-reduced-motion:reduce){.shimmer,.headline-text,.sub-step-text,.details,.chevron,.spinner,.step-dot{transition:none;animation:none}.leaving{display:none}}@media (forced-colors:active){.shimmer{animation:none;-webkit-mask-image:none;mask-image:none}.spinner{forced-color-adjust:none}}:host{--progress-steps-font-size:var(--luzmo-font-size);--progress-steps-line-height:1.5;--progress-steps-font-color:color-mix(in oklch, var(--luzmo-font-color) 65%, var(--luzmo-font-color-extra-dimmed));--progress-steps-font-color-dimmed:color-mix(in oklch, var(--luzmo-font-color) 35%, var(--luzmo-font-color-extra-dimmed));--progress-steps-error-color:var(--luzmo-negative-color);--progress-steps-warning-color:var(--luzmo-notice-color);--progress-steps-success-color:var(--luzmo-positive-color);--progress-steps-substep-connector-color:var(--luzmo-border-color-down);--progress-steps-hover-background:var(--luzmo-background-color-hover);--progress-steps-border-radius:var(--luzmo-border-radius);--progress-steps-focus-ring-width:var(--luzmo-indicator-width);--progress-steps-focus-ring-gap:var(--luzmo-indicator-gap);--progress-steps-focus-ring-color:var(--luzmo-indicator-color);--progress-steps-min-height:var(--luzmo-component-height-s);--progress-steps-gap:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--progress-steps-padding-inline:var(--luzmo-spacing-2);--progress-steps-step-spacing:var(--luzmo-spacing-1);--progress-steps-icon-size:var(--luzmo-icon-size-m);--progress-steps-chevron-size:var(--luzmo-icon-size-s);--progress-steps-icon-offset:.04em;--progress-steps-font-size-small:var(--luzmo-font-size-s);--progress-steps-details-line-height:1.4;--progress-steps-marker-size:.8em;--progress-steps-dot-size:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--progress-steps-substep-indent:var(--luzmo-spacing-4);--progress-steps-transition-duration:.25s;--progress-steps-shimmer-duration:1.8s;--progress-steps-spinner-duration:.9s}:host([size=s]){--progress-steps-font-size:var(--luzmo-font-size-s);--progress-steps-font-size-small:var(--luzmo-font-size-s);--progress-steps-icon-size:var(--luzmo-icon-size-s);--progress-steps-chevron-size:var(--luzmo-icon-size-xs);--progress-steps-min-height:var(--luzmo-component-height-xs);--progress-steps-gap:var(--luzmo-spacing-2)}:host([size=l]){--progress-steps-font-size:var(--luzmo-font-size-l);--progress-steps-font-size-small:var(--luzmo-font-size-m);--progress-steps-icon-size:var(--luzmo-icon-size-l);--progress-steps-chevron-size:var(--luzmo-icon-size-m);--progress-steps-min-height:var(--luzmo-component-height);--progress-steps-step-spacing:var(--luzmo-spacing-2)}:host([size=xl]){--progress-steps-font-size:var(--luzmo-font-size-xl);--progress-steps-font-size-small:var(--luzmo-font-size-l);--progress-steps-icon-size:var(--luzmo-icon-size-xl);--progress-steps-chevron-size:var(--luzmo-icon-size-l);--progress-steps-min-height:var(--luzmo-component-height-l);--progress-steps-gap:var(--luzmo-spacing-3);--progress-steps-step-spacing:var(--luzmo-spacing-2)}.step{--progress-steps-marker-center:calc(var(--progress-steps-step-spacing) + .5em * var(--progress-steps-details-line-height));--progress-steps-marker-radius:calc(var(--progress-steps-dot-size) / 2)}.step-error{--progress-steps-marker-radius:calc(var(--progress-steps-marker-size) / 2)}@media (forced-colors:active){:host{--highcontrast-progress-steps-focus-ring-color:Highlight;--highcontrast-progress-steps-spinner-track-color:GrayText;--highcontrast-progress-steps-spinner-color:CanvasText}}", O = {
70
- condensedSingular: "Worked through {{count}} step",
71
- condensedPlural: "Worked through {{count}} steps",
72
- failedSingular: "{{count}} failed",
73
- failedPlural: "{{count}} failed",
74
- stepInProgress: "Step in progress",
75
- stepPending: "Step pending",
76
- stepCompleted: "Step completed",
77
- stepFailed: "Step failed"
78
- }, k = 500, A = 800, j = 1e3, M = 250, N = "data-sub-step-only", P = {
79
- mainStep: null,
80
- subStep: null
81
- }, F = (e, t) => e?.mainStep === t.mainStep && e?.subStep === t.subStep, I = (e) => {
82
- let t = document.createRange();
83
- return t.selectNodeContents(e), t.getBoundingClientRect().width > e.getBoundingClientRect().width + .05;
84
- }, L = class extends n(e, {
85
- defaultSize: "m",
86
- validSizes: [
87
- "s",
88
- "m",
89
- "l",
90
- "xl"
91
- ]
92
- }) {
93
- constructor(...e) {
94
- super(...e), this.progress = null, this.locale = "en", this.collapsed = !1, this.displayMode = "detailed", this.condensed = !1, this.labels = { ...O }, this.noAnimate = !1, this.open = !1, this._phase = "idle", this._current = null, this._leaving = null, this._subStepTransition = null, this._announcement = "", this._languageResolver = new i(this), this._pending = null, this._shownAt = 0, this._subStepOnly = !1, this._leavingSubStepOnly = !1;
95
- }
96
- static get styles() {
97
- let e = super.styles;
98
- return [...Array.isArray(e) ? e : e ? [e] : [], s(D)];
99
- }
100
- connectedCallback() {
101
- super.connectedCallback(), typeof ResizeObserver < "u" && (this._resizeObserver ??= new ResizeObserver(() => this._fitLine()), this._resizeObserver.observe(this)), this.hasUpdated && this._syncPhase();
102
- }
103
- disconnectedCallback() {
104
- super.disconnectedCallback(), this._resizeObserver?.disconnect(), this._clearTimers(), this._leaving = null, this._subStepTransition = null;
105
- }
106
- willUpdate(e) {
107
- super.willUpdate(e), e.has(r) && (this._numberFormatter = void 0), e.has("progress") ? (e.get("progress")?.id !== this.progress?.id && (this._resetRun(), this.hasUpdated && (this.open = !1)), this._syncPhase()) : (e.has("collapsed") && this.collapsed || e.has("locale")) && this._syncPhase();
108
- }
109
- updated(e) {
110
- super.updated(e), this._fitLine();
111
- }
112
- _fitLine() {
113
- let e = this.renderRoot.querySelector(".headline-text:not(.leaving)");
114
- if (this.renderRoot.querySelector(".headline-text.leaving")?.toggleAttribute(N, this._leavingSubStepOnly), !e) {
115
- this._subStepOnly = !1;
116
- return;
117
- }
118
- let t = e.querySelector(".main-step"), n = e.querySelector(".sub-step-text:not(.leaving)");
119
- e.removeAttribute(N), this._subStepOnly = t !== null && n !== null && (I(t) || I(n)), e.toggleAttribute(N, this._subStepOnly);
120
- }
121
- get _labels() {
122
- return {
123
- ...O,
124
- ...this.labels
125
- };
126
- }
127
- _syncPhase() {
128
- if (!x(this.progress)) {
129
- this._resetRun();
130
- return;
131
- }
132
- let e = T(this.progress) ? null : S(this.progress);
133
- if (e) {
134
- this._clearSettleTimer(), this._phase = "running", this._queue(e);
135
- return;
136
- }
137
- if (this._phase === "done") return;
138
- let t = this.collapsed || T(this.progress);
139
- if (this._phase === "idle") {
140
- (t || w(this.progress)) && this._finish();
141
- return;
142
- }
143
- if (t) {
144
- this._finish();
145
- return;
146
- }
147
- this._settleTimer ??= setTimeout(() => {
148
- this._settleTimer = void 0, this._finish();
149
- }, A);
150
- }
151
- _queue(e) {
152
- let t = {
153
- mainStep: E(e.mainStep, this.locale),
154
- subStep: e.subStep ? E(e.subStep, this.locale) : null
155
- };
156
- if (F(this._current, t)) {
157
- this._pending = null, this._clearDwellTimer();
158
- return;
159
- }
160
- this._pending = t;
161
- let n = this._current ? this._shownAt + k - Date.now() : 0;
162
- this.noAnimate || n <= 0 ? this._showPending() : this._dwellTimer ??= setTimeout(() => {
163
- this._dwellTimer = void 0, this._showPending();
164
- }, n);
165
- }
166
- _showPending() {
167
- let e = this._pending;
168
- this._pending = null, e && this._phase === "running" && (this._show(e), this._announce(e.mainStep));
169
- }
170
- _finish() {
171
- let e = this._phase === "running";
172
- this._clearDwellTimer(), this._clearSettleTimer(), this._pending = null, this._phase = "done", this._show(P), e && this._announce(this._summaryText());
173
- }
174
- _show(e) {
175
- let t = this._current;
176
- t && !this.noAnimate && (t.mainStep !== null && t.mainStep === e.mainStep ? this._subStepTransition = { leaving: t.subStep } : (this._leaving = t, this._leavingSubStepOnly = this._subStepOnly, this._subStepTransition = null), clearTimeout(this._leaveTimer), this._leaveTimer = setTimeout(() => {
177
- this._leaving = null, this._subStepTransition = null;
178
- }, M)), this._current = e, this._shownAt = Date.now();
179
- }
180
- _announce(e) {
181
- clearTimeout(this._announceTimer), this._announceTimer = setTimeout(() => {
182
- this._announcement = e;
183
- }, j);
184
- }
185
- _resetRun() {
186
- this._clearTimers(), this._phase = "idle", this._current = null, this._leaving = null, this._subStepTransition = null, this._pending = null, this._announcement = "";
187
- }
188
- _clearDwellTimer() {
189
- clearTimeout(this._dwellTimer), this._dwellTimer = void 0;
190
- }
191
- _clearSettleTimer() {
192
- clearTimeout(this._settleTimer), this._settleTimer = void 0;
193
- }
194
- _clearTimers() {
195
- this._clearDwellTimer(), this._clearSettleTimer(), clearTimeout(this._leaveTimer), clearTimeout(this._announceTimer);
196
- }
197
- _formatCount(e, t) {
198
- return e.replaceAll("{{count}}", this._numberFormat.format(t));
199
- }
200
- get _numberFormat() {
201
- if (!this._numberFormatter) try {
202
- this._numberFormatter = new Intl.NumberFormat(this._languageResolver.language);
203
- } catch {
204
- this._numberFormatter = new Intl.NumberFormat();
205
- }
206
- return this._numberFormatter;
207
- }
208
- _summaryText() {
209
- let e = this.progress?.children?.length ?? 0, t = this._labels;
210
- return this._formatCount(e === 1 ? t.condensedSingular : t.condensedPlural, e);
211
- }
212
- _setOpen(e) {
213
- this.open = e, this.dispatchEvent(new CustomEvent(e ? "luzmo-step-expanded" : "luzmo-step-collapsed", {
214
- bubbles: !0,
215
- composed: !0,
216
- detail: { nodeId: this.progress?.id ?? "" }
217
- }));
218
- }
219
- handleToggle() {
220
- this._setOpen(!this.open);
221
- }
222
- handleKeydown(e) {
223
- e.key === "Escape" && this.open && (e.preventDefault(), this._setOpen(!1));
224
- }
225
- _statusLabel(e) {
226
- let t = this._labels;
227
- switch (e) {
228
- case "inProgress": return t.stepInProgress;
229
- case "success": return t.stepCompleted;
230
- case "error": return t.stepFailed;
231
- default: return t.stepPending;
232
- }
233
- }
234
- _renderStatusIcon(e) {
235
- return e ? a`<span
236
- class="status-icon status-icon-failed"
237
- aria-hidden="true"
238
- >${m(u)}</span
239
- >` : this._phase === "running" ? a`<span class="status-icon" aria-hidden="true"
240
- ><span class="spinner"></span
241
- ></span>` : a`<span
242
- class="status-icon status-icon-finished"
243
- aria-hidden="true"
244
- >${m(f)}</span
245
- >`;
246
- }
247
- _renderContent({ mainStep: e, subStep: t }, n = null) {
248
- if (e === null) return a`<span class="main-step">${this._summaryText()}</span>`;
249
- let r = n?.leaving ?? null;
250
- return t === null && r === null ? a`<span class="main-step">${e}</span>` : a`<span class="main-step">${e}</span>
251
- <span class="sub-step"
252
- ><span class="sub-step-texts"
253
- >${r === null ? o : a`<span class="sub-step-text leaving" aria-hidden="true"
254
- >${r}</span
255
- >`}${t === null ? o : _(t, a`<span
256
- class=${h({
257
- "sub-step-text": !0,
258
- entering: n !== null
259
- })}
260
- >${t}</span
261
- >`)}</span
262
- ></span
263
- >`;
264
- }
265
- _renderStepMarker(e) {
266
- return a`<span
267
- class="step-marker"
268
- role="img"
269
- aria-label=${this._statusLabel(e)}
270
- >${e === "error" ? m(p) : a`<span class="step-dot"></span>`}</span
271
- >`;
272
- }
273
- _renderSubstep(e) {
274
- return a`<li
275
- class=${h({
276
- substep: !0,
277
- [`substep-${e.status}`]: !0
278
- })}
279
- >
280
- ${e.status === "error" ? a`<span
281
- class="substep-icon"
282
- role="img"
283
- aria-label=${this._labels.stepFailed}
284
- >${m(p)}</span
285
- >` : o}<span class="substep-label"
286
- >${E(e, this.locale)}</span
287
- >
288
- ${e.children?.length ? this._renderSubsteps(e.children) : o}
289
- </li>`;
290
- }
291
- _renderSubsteps(e) {
292
- return a`<ul class="substeps">
293
- ${g(e, (e) => e.id, (e) => this._renderSubstep(e))}
294
- </ul>`;
295
- }
296
- _renderStep(e, t) {
297
- return a`<li
298
- class=${h({
299
- step: !0,
300
- [`step-${e.status}`]: !0
301
- })}
302
- >
303
- ${this._renderStepMarker(e.status)}
304
- <span class="step-label"
305
- >${E(e, this.locale)}</span
306
- >
307
- ${t && e.children?.length ? this._renderSubsteps(e.children) : o}
308
- </li>`;
309
- }
310
- _renderDetails() {
311
- let e = this.displayMode !== "compact";
312
- return a`<div id="details" class="details">
313
- <ol class="steps">
314
- ${g(this.progress?.children ?? [], (e) => e.id, (t) => this._renderStep(t, e))}
315
- </ol>
316
- </div>`;
317
- }
318
- render() {
319
- if (this._phase === "idle" || !this._current) return o;
320
- let e = C(this.progress), t = this._labels, n = this._phase === "running" && !this.noAnimate;
321
- return a`
322
- <button
323
- type="button"
324
- class="summary"
325
- data-state=${this._phase}
326
- aria-expanded=${this.open ? "true" : "false"}
327
- aria-controls=${this.open ? "details" : o}
328
- @click=${this.handleToggle}
329
- @keydown=${this.handleKeydown}
330
- >
331
- ${this._renderStatusIcon(e > 0 || this.progress?.status === "error")}
332
- <span class=${h({
333
- headline: !0,
334
- shimmer: n
335
- })}>
336
- ${this._leaving ? a`<span class="headline-text leaving" aria-hidden="true"
337
- >${this._renderContent(this._leaving)}</span
338
- >` : o}
339
- ${_(this._current.mainStep ?? P, a`<span
340
- class=${h({
341
- "headline-text": !0,
342
- entering: this._leaving !== null
343
- })}
344
- >${this._renderContent(this._current, this._subStepTransition)}</span
345
- >`)}
346
- </span>
347
- ${e > 0 ? a`<span class="failed-count"
348
- >${this._formatCount(e === 1 ? t.failedSingular : t.failedPlural, e)}</span
349
- >` : o}
350
- <span class="chevron" aria-hidden="true"
351
- >${m(d)}</span
352
- >
353
- </button>
354
- ${this.open ? this._renderDetails() : o}
355
- <span class="visually-hidden" role="status">${this._announcement}</span>
356
- `;
357
- }
358
- };
359
- //#endregion
360
- //#region src/components/progress-steps/index.ts
361
- t([c({ attribute: !1 })], L.prototype, "progress", void 0), t([c({
362
- type: String,
363
- reflect: !0
364
- })], L.prototype, "locale", void 0), t([c({
365
- type: Boolean,
366
- reflect: !0
367
- })], L.prototype, "collapsed", void 0), t([c({
368
- type: String,
369
- attribute: "display-mode",
370
- reflect: !0
371
- })], L.prototype, "displayMode", void 0), t([c({
372
- type: Boolean,
373
- reflect: !0
374
- })], L.prototype, "condensed", void 0), t([c({ attribute: !1 })], L.prototype, "labels", void 0), t([c({
375
- type: Boolean,
376
- attribute: "no-animate",
377
- reflect: !0
378
- })], L.prototype, "noAnimate", void 0), t([c({
379
- type: Boolean,
380
- reflect: !0
381
- })], L.prototype, "open", void 0), t([l()], L.prototype, "_phase", void 0), t([l()], L.prototype, "_current", void 0), t([l()], L.prototype, "_leaving", void 0), t([l()], L.prototype, "_subStepTransition", void 0), t([l()], L.prototype, "_announcement", void 0), typeof customElements < "u" && !customElements.get("luzmo-progress-steps") && customElements.define("luzmo-progress-steps", L);
382
- //#endregion
383
- export { O as n, L as t };
@@ -1,98 +0,0 @@
1
- /*! * Lucero - The design system for Luzmo.
2
- *
3
- * Copyright © 2026 Luzmo
4
- * All rights reserved.
5
- * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
6
- * This license allows users with a current active Luzmo account to use Lucero.
7
- * This license terminates automatically if a user no longer has an active Luzmo account.
8
- * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
9
- *
10
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
11
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
12
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
13
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
14
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
15
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
- * SOFTWARE.
17
- * */
18
- require("./tokens.cjs");const e=require("./decorate-Dq34MBGe.cjs"),t=require("./sized-mixin-BT7cv-fT.cjs"),n=require("./language-resolution-CSjktYg5.cjs");let r=require("lit"),i=require("lit/decorators.js"),a=require("@luzmo/icons"),o=require("lit/directives/class-map.js"),s=require("lit/directives/repeat.js"),c=require("lit/directives/keyed.js");function l(e){for(let t=(e?.length??0)-1;t>=0;t--)if(e[t].status===`inProgress`)return e[t];return null}function u(e){let t=l(e.children);return t?u(t)??t:null}function d(e,t){return typeof e==`object`?e[t]??e.en??Object.values(e)[0]??``:String(e)}function f(e){return!!e?.children?.length}function p(e){let t=l(e?.children);return t?{mainStep:t,subStep:u(t)}:null}function m(e){let t=0;for(let n of e?.children??[])t+=+(n.status===`error`)+m(n);return t}function h(e){return!!e?.children?.some(e=>e.status===`success`||e.status===`error`)}function g(e){return e?.status===`success`||e?.status===`error`}function _(e,t){return e.description?e.description.replaceAll(/\{\{(\w+)\}\}/g,(n,r)=>{let i=e.descriptionMetadata?.[r];return i==null?n:Array.isArray(i)?i.map(e=>d(e,t)).join(`, `):d(i,t)}):e.step}var v=`:host{box-sizing:border-box;font-family:var(--luzmo-font-family);font-size:var(--luzmo-progress-steps-font-size,var(--progress-steps-font-size));line-height:var(--progress-steps-line-height);color:var(--luzmo-progress-steps-font-color-dimmed,var(--progress-steps-font-color-dimmed));display:block}.summary{box-sizing:border-box;align-items:center;gap:var(--progress-steps-gap);max-inline-size:100%;min-block-size:var(--progress-steps-min-height);padding-block:0;padding-inline:var(--progress-steps-padding-inline);border-radius:var(--progress-steps-border-radius);color:inherit;font:inherit;text-align:start;cursor:pointer;appearance:none;background:0 0;border:0;margin:0;display:inline-flex}.summary:hover{background-color:var(--progress-steps-hover-background)}.summary:focus-visible{outline:var(--progress-steps-focus-ring-width) solid var(--highcontrast-progress-steps-focus-ring-color,var(--progress-steps-focus-ring-color));outline-offset:var(--progress-steps-focus-ring-gap)}.status-icon{inline-size:var(--progress-steps-icon-size);block-size:var(--progress-steps-icon-size);flex:none;justify-content:center;align-items:center;display:inline-flex;position:relative;inset-block-start:var(--progress-steps-icon-offset)}.status-icon svg{block-size:100%;inline-size:100%}.status-icon-failed{color:var(--luzmo-progress-steps-warning-color,var(--progress-steps-warning-color))}.status-icon-finished{color:var(--luzmo-progress-steps-success-color,var(--progress-steps-success-color))}.spinner{box-sizing:border-box;border:calc(var(--luzmo-border-width) * 1.5) solid var(--highcontrast-progress-steps-spinner-track-color,var(--luzmo-progress-steps-substep-connector-color,var(--progress-steps-substep-connector-color)));border-block-start-color:var(--highcontrast-progress-steps-spinner-color,currentcolor);block-size:70%;inline-size:70%;animation:progress-steps-spin var(--progress-steps-spinner-duration) linear infinite;border-radius:50%}.headline{flex:0 auto;min-inline-size:0;display:block;position:relative;overflow:hidden}.headline-text{white-space:nowrap;min-inline-size:0;display:flex}.headline-text.entering{animation:progress-steps-enter var(--progress-steps-transition-duration) ease-out}.headline-text.leaving{inline-size:100%;animation:progress-steps-leave var(--progress-steps-transition-duration) ease-in forwards;position:absolute;inset-block-start:0;inset-inline-start:0}.main-step{text-overflow:ellipsis;min-inline-size:0;color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color));flex:0 auto;overflow:hidden}.sub-step{flex:0 auto;min-inline-size:0;display:flex}.sub-step-texts{min-inline-size:0;display:block;position:relative;overflow:hidden}.sub-step-text{text-overflow:ellipsis;display:block;overflow:hidden}.sub-step-text.entering{animation:progress-steps-enter var(--progress-steps-transition-duration) ease-out}.sub-step-text.leaving{animation:progress-steps-leave var(--progress-steps-transition-duration) ease-in forwards;position:absolute;inset-block-start:0;inset-inline-start:0}.headline-text[data-sub-step-only] .main-step{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.headline-text[data-sub-step-only] .sub-step:before{display:none}.summary[data-state=done] .main-step{color:inherit}.summary:hover .main-step{color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color))}.sub-step:before,.failed-count:before{content:"·"/"";flex:none;padding-inline:.35em}.failed-count:before{padding-inline-start:0}.failed-count{white-space:nowrap;flex:none}.shimmer{-webkit-mask-image:linear-gradient(to right, currentcolor 35%, color-mix(in srgb, currentcolor 35%, transparent) 50%, currentcolor 65%);mask-image:linear-gradient(to right, currentcolor 35%, color-mix(in srgb, currentcolor 35%, transparent) 50%, currentcolor 65%);animation:progress-steps-shimmer var(--progress-steps-shimmer-duration) linear infinite;-webkit-mask-size:300% 100%;mask-size:300% 100%}.chevron{inline-size:var(--progress-steps-chevron-size);block-size:var(--progress-steps-chevron-size);transition:transform var(--progress-steps-transition-duration) ease;flex:none;display:inline-flex}.chevron svg{block-size:100%;inline-size:100%}:host([open]) .chevron{transform:rotate(90deg)}:host([dir=rtl]) .chevron svg{transform:scaleX(-1)}:host([dir=rtl][open]) .chevron{transform:rotate(-90deg)}:host([dir=rtl]) .shimmer{animation-direction:reverse}.details{padding-block:var(--progress-steps-step-spacing);padding-inline:var(--progress-steps-padding-inline);font-size:var(--luzmo-progress-steps-font-size-small,var(--progress-steps-font-size-small));line-height:var(--progress-steps-details-line-height);animation:progress-steps-details-in var(--progress-steps-transition-duration) ease-out}.steps,.substeps{margin:0;padding:0;list-style:none}.step{grid-template-columns:var(--progress-steps-icon-size) minmax(0, 1fr);column-gap:var(--progress-steps-gap);padding-block:var(--progress-steps-step-spacing);display:grid;position:relative}.step:before,.step:after{content:"";border-inline-start:var(--luzmo-border-width) solid var(--luzmo-progress-steps-substep-connector-color,var(--progress-steps-substep-connector-color));position:absolute;inset-inline-start:calc(var(--progress-steps-icon-size) / 2 - var(--luzmo-border-width) / 2)}.step:before{block-size:calc(var(--progress-steps-marker-center) - var(--progress-steps-marker-radius));inset-block-start:0}.step:after{inset-block:calc(var(--progress-steps-marker-center) + var(--progress-steps-marker-radius)) 0}.step:first-child:before{display:none}.step:last-child:not(:has(>.substeps)):after{display:none}.step-marker{block-size:calc(1em * var(--progress-steps-details-line-height));color:var(--luzmo-progress-steps-font-color-dimmed,var(--progress-steps-font-color-dimmed));justify-content:center;align-items:center;display:inline-flex}.step-marker svg{inline-size:var(--progress-steps-marker-size);block-size:var(--progress-steps-marker-size)}.step-dot{box-sizing:border-box;inline-size:var(--progress-steps-dot-size);block-size:var(--progress-steps-dot-size);border:calc(var(--progress-steps-dot-size) / 2) solid currentcolor;border-radius:50%}.step-inProgress .step-marker{color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color))}.step-inProgress .step-marker .step-dot{animation:1.2s ease-in-out infinite progress-steps-pulse}.step-pending .step-dot{border-width:var(--luzmo-border-width)}.step-error .step-marker{color:var(--luzmo-progress-steps-error-color,var(--progress-steps-error-color))}.step-label{color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color));overflow-wrap:anywhere}.substeps{gap:var(--progress-steps-step-spacing);flex-direction:column;display:flex}.step>.substeps{grid-column:2;margin-block-start:calc(2 * var(--progress-steps-step-spacing))}.substep>.substeps{margin-block-start:var(--progress-steps-step-spacing);padding-inline-start:var(--progress-steps-substep-indent)}.substep{overflow-wrap:anywhere}.substep-inProgress{color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color))}.substep-error{color:var(--luzmo-progress-steps-error-color,var(--progress-steps-error-color))}.substep-icon{vertical-align:-.1em;block-size:.85em;inline-size:.85em;margin-inline-end:.3em;display:inline-flex}.substep-icon svg{block-size:100%;inline-size:100%}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:host([no-animate]) .headline-text,:host([no-animate]) .sub-step-text,:host([no-animate]) .details,:host([no-animate]) .chevron,:host([no-animate]) .spinner,:host([no-animate]) .step-dot{transition:none;animation:none}:host([no-animate]) .leaving{display:none}@keyframes progress-steps-shimmer{0%{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}@keyframes progress-steps-enter{0%{opacity:0;transform:translateY(60%)}}@keyframes progress-steps-leave{to{opacity:0;transform:translateY(-60%)}}@keyframes progress-steps-details-in{0%{opacity:0;transform:translateY(calc(-1 * var(--luzmo-spacing-2)))}}@keyframes progress-steps-spin{to{transform:rotate(360deg)}}@keyframes progress-steps-pulse{50%{opacity:.35}}@media (prefers-reduced-motion:reduce){.shimmer,.headline-text,.sub-step-text,.details,.chevron,.spinner,.step-dot{transition:none;animation:none}.leaving{display:none}}@media (forced-colors:active){.shimmer{animation:none;-webkit-mask-image:none;mask-image:none}.spinner{forced-color-adjust:none}}:host{--progress-steps-font-size:var(--luzmo-font-size);--progress-steps-line-height:1.5;--progress-steps-font-color:color-mix(in oklch, var(--luzmo-font-color) 65%, var(--luzmo-font-color-extra-dimmed));--progress-steps-font-color-dimmed:color-mix(in oklch, var(--luzmo-font-color) 35%, var(--luzmo-font-color-extra-dimmed));--progress-steps-error-color:var(--luzmo-negative-color);--progress-steps-warning-color:var(--luzmo-notice-color);--progress-steps-success-color:var(--luzmo-positive-color);--progress-steps-substep-connector-color:var(--luzmo-border-color-down);--progress-steps-hover-background:var(--luzmo-background-color-hover);--progress-steps-border-radius:var(--luzmo-border-radius);--progress-steps-focus-ring-width:var(--luzmo-indicator-width);--progress-steps-focus-ring-gap:var(--luzmo-indicator-gap);--progress-steps-focus-ring-color:var(--luzmo-indicator-color);--progress-steps-min-height:var(--luzmo-component-height-s);--progress-steps-gap:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--progress-steps-padding-inline:var(--luzmo-spacing-2);--progress-steps-step-spacing:var(--luzmo-spacing-1);--progress-steps-icon-size:var(--luzmo-icon-size-m);--progress-steps-chevron-size:var(--luzmo-icon-size-s);--progress-steps-icon-offset:.04em;--progress-steps-font-size-small:var(--luzmo-font-size-s);--progress-steps-details-line-height:1.4;--progress-steps-marker-size:.8em;--progress-steps-dot-size:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--progress-steps-substep-indent:var(--luzmo-spacing-4);--progress-steps-transition-duration:.25s;--progress-steps-shimmer-duration:1.8s;--progress-steps-spinner-duration:.9s}:host([size=s]){--progress-steps-font-size:var(--luzmo-font-size-s);--progress-steps-font-size-small:var(--luzmo-font-size-s);--progress-steps-icon-size:var(--luzmo-icon-size-s);--progress-steps-chevron-size:var(--luzmo-icon-size-xs);--progress-steps-min-height:var(--luzmo-component-height-xs);--progress-steps-gap:var(--luzmo-spacing-2)}:host([size=l]){--progress-steps-font-size:var(--luzmo-font-size-l);--progress-steps-font-size-small:var(--luzmo-font-size-m);--progress-steps-icon-size:var(--luzmo-icon-size-l);--progress-steps-chevron-size:var(--luzmo-icon-size-m);--progress-steps-min-height:var(--luzmo-component-height);--progress-steps-step-spacing:var(--luzmo-spacing-2)}:host([size=xl]){--progress-steps-font-size:var(--luzmo-font-size-xl);--progress-steps-font-size-small:var(--luzmo-font-size-l);--progress-steps-icon-size:var(--luzmo-icon-size-xl);--progress-steps-chevron-size:var(--luzmo-icon-size-l);--progress-steps-min-height:var(--luzmo-component-height-l);--progress-steps-gap:var(--luzmo-spacing-3);--progress-steps-step-spacing:var(--luzmo-spacing-2)}.step{--progress-steps-marker-center:calc(var(--progress-steps-step-spacing) + .5em * var(--progress-steps-details-line-height));--progress-steps-marker-radius:calc(var(--progress-steps-dot-size) / 2)}.step-error{--progress-steps-marker-radius:calc(var(--progress-steps-marker-size) / 2)}@media (forced-colors:active){:host{--highcontrast-progress-steps-focus-ring-color:Highlight;--highcontrast-progress-steps-spinner-track-color:GrayText;--highcontrast-progress-steps-spinner-color:CanvasText}}`,y={condensedSingular:`Worked through {{count}} step`,condensedPlural:`Worked through {{count}} steps`,failedSingular:`{{count}} failed`,failedPlural:`{{count}} failed`,stepInProgress:`Step in progress`,stepPending:`Step pending`,stepCompleted:`Step completed`,stepFailed:`Step failed`},b=500,x=800,S=1e3,C=250,w=`data-sub-step-only`,T={mainStep:null,subStep:null},E=(e,t)=>e?.mainStep===t.mainStep&&e?.subStep===t.subStep,D=e=>{let t=document.createRange();return t.selectNodeContents(e),t.getBoundingClientRect().width>e.getBoundingClientRect().width+.05},O=class extends t.n(e.n,{defaultSize:`m`,validSizes:[`s`,`m`,`l`,`xl`]}){constructor(...e){super(...e),this.progress=null,this.locale=`en`,this.collapsed=!1,this.displayMode=`detailed`,this.condensed=!1,this.labels={...y},this.noAnimate=!1,this.open=!1,this._phase=`idle`,this._current=null,this._leaving=null,this._subStepTransition=null,this._announcement=``,this._languageResolver=new n.t(this),this._pending=null,this._shownAt=0,this._subStepOnly=!1,this._leavingSubStepOnly=!1}static get styles(){let e=super.styles;return[...Array.isArray(e)?e:e?[e]:[],(0,r.unsafeCSS)(v)]}connectedCallback(){super.connectedCallback(),typeof ResizeObserver<`u`&&(this._resizeObserver??=new ResizeObserver(()=>this._fitLine()),this._resizeObserver.observe(this)),this.hasUpdated&&this._syncPhase()}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver?.disconnect(),this._clearTimers(),this._leaving=null,this._subStepTransition=null}willUpdate(e){super.willUpdate(e),e.has(n.r)&&(this._numberFormatter=void 0),e.has(`progress`)?(e.get(`progress`)?.id!==this.progress?.id&&(this._resetRun(),this.hasUpdated&&(this.open=!1)),this._syncPhase()):(e.has(`collapsed`)&&this.collapsed||e.has(`locale`))&&this._syncPhase()}updated(e){super.updated(e),this._fitLine()}_fitLine(){let e=this.renderRoot.querySelector(`.headline-text:not(.leaving)`);if(this.renderRoot.querySelector(`.headline-text.leaving`)?.toggleAttribute(w,this._leavingSubStepOnly),!e){this._subStepOnly=!1;return}let t=e.querySelector(`.main-step`),n=e.querySelector(`.sub-step-text:not(.leaving)`);e.removeAttribute(w),this._subStepOnly=t!==null&&n!==null&&(D(t)||D(n)),e.toggleAttribute(w,this._subStepOnly)}get _labels(){return{...y,...this.labels}}_syncPhase(){if(!f(this.progress)){this._resetRun();return}let e=g(this.progress)?null:p(this.progress);if(e){this._clearSettleTimer(),this._phase=`running`,this._queue(e);return}if(this._phase===`done`)return;let t=this.collapsed||g(this.progress);if(this._phase===`idle`){(t||h(this.progress))&&this._finish();return}if(t){this._finish();return}this._settleTimer??=setTimeout(()=>{this._settleTimer=void 0,this._finish()},x)}_queue(e){let t={mainStep:_(e.mainStep,this.locale),subStep:e.subStep?_(e.subStep,this.locale):null};if(E(this._current,t)){this._pending=null,this._clearDwellTimer();return}this._pending=t;let n=this._current?this._shownAt+b-Date.now():0;this.noAnimate||n<=0?this._showPending():this._dwellTimer??=setTimeout(()=>{this._dwellTimer=void 0,this._showPending()},n)}_showPending(){let e=this._pending;this._pending=null,e&&this._phase===`running`&&(this._show(e),this._announce(e.mainStep))}_finish(){let e=this._phase===`running`;this._clearDwellTimer(),this._clearSettleTimer(),this._pending=null,this._phase=`done`,this._show(T),e&&this._announce(this._summaryText())}_show(e){let t=this._current;t&&!this.noAnimate&&(t.mainStep!==null&&t.mainStep===e.mainStep?this._subStepTransition={leaving:t.subStep}:(this._leaving=t,this._leavingSubStepOnly=this._subStepOnly,this._subStepTransition=null),clearTimeout(this._leaveTimer),this._leaveTimer=setTimeout(()=>{this._leaving=null,this._subStepTransition=null},C)),this._current=e,this._shownAt=Date.now()}_announce(e){clearTimeout(this._announceTimer),this._announceTimer=setTimeout(()=>{this._announcement=e},S)}_resetRun(){this._clearTimers(),this._phase=`idle`,this._current=null,this._leaving=null,this._subStepTransition=null,this._pending=null,this._announcement=``}_clearDwellTimer(){clearTimeout(this._dwellTimer),this._dwellTimer=void 0}_clearSettleTimer(){clearTimeout(this._settleTimer),this._settleTimer=void 0}_clearTimers(){this._clearDwellTimer(),this._clearSettleTimer(),clearTimeout(this._leaveTimer),clearTimeout(this._announceTimer)}_formatCount(e,t){return e.replaceAll(`{{count}}`,this._numberFormat.format(t))}get _numberFormat(){if(!this._numberFormatter)try{this._numberFormatter=new Intl.NumberFormat(this._languageResolver.language)}catch{this._numberFormatter=new Intl.NumberFormat}return this._numberFormatter}_summaryText(){let e=this.progress?.children?.length??0,t=this._labels;return this._formatCount(e===1?t.condensedSingular:t.condensedPlural,e)}_setOpen(e){this.open=e,this.dispatchEvent(new CustomEvent(e?`luzmo-step-expanded`:`luzmo-step-collapsed`,{bubbles:!0,composed:!0,detail:{nodeId:this.progress?.id??``}}))}handleToggle(){this._setOpen(!this.open)}handleKeydown(e){e.key===`Escape`&&this.open&&(e.preventDefault(),this._setOpen(!1))}_statusLabel(e){let t=this._labels;switch(e){case`inProgress`:return t.stepInProgress;case`success`:return t.stepCompleted;case`error`:return t.stepFailed;default:return t.stepPending}}_renderStatusIcon(e){return e?r.html`<span
19
- class="status-icon status-icon-failed"
20
- aria-hidden="true"
21
- >${(0,a.luzmoIcon)(a.luzmoAlert)}</span
22
- >`:this._phase===`running`?r.html`<span class="status-icon" aria-hidden="true"
23
- ><span class="spinner"></span
24
- ></span>`:r.html`<span
25
- class="status-icon status-icon-finished"
26
- aria-hidden="true"
27
- >${(0,a.luzmoIcon)(a.luzmoCheckCircleOutline)}</span
28
- >`}_renderContent({mainStep:e,subStep:t},n=null){if(e===null)return r.html`<span class="main-step">${this._summaryText()}</span>`;let i=n?.leaving??null;return t===null&&i===null?r.html`<span class="main-step">${e}</span>`:r.html`<span class="main-step">${e}</span>
29
- <span class="sub-step"
30
- ><span class="sub-step-texts"
31
- >${i===null?r.nothing:r.html`<span class="sub-step-text leaving" aria-hidden="true"
32
- >${i}</span
33
- >`}${t===null?r.nothing:(0,c.keyed)(t,r.html`<span
34
- class=${(0,o.classMap)({"sub-step-text":!0,entering:n!==null})}
35
- >${t}</span
36
- >`)}</span
37
- ></span
38
- >`}_renderStepMarker(e){return r.html`<span
39
- class="step-marker"
40
- role="img"
41
- aria-label=${this._statusLabel(e)}
42
- >${e===`error`?(0,a.luzmoIcon)(a.luzmoClose14):r.html`<span class="step-dot"></span>`}</span
43
- >`}_renderSubstep(e){return r.html`<li
44
- class=${(0,o.classMap)({substep:!0,[`substep-${e.status}`]:!0})}
45
- >
46
- ${e.status===`error`?r.html`<span
47
- class="substep-icon"
48
- role="img"
49
- aria-label=${this._labels.stepFailed}
50
- >${(0,a.luzmoIcon)(a.luzmoClose14)}</span
51
- >`:r.nothing}<span class="substep-label"
52
- >${_(e,this.locale)}</span
53
- >
54
- ${e.children?.length?this._renderSubsteps(e.children):r.nothing}
55
- </li>`}_renderSubsteps(e){return r.html`<ul class="substeps">
56
- ${(0,s.repeat)(e,e=>e.id,e=>this._renderSubstep(e))}
57
- </ul>`}_renderStep(e,t){return r.html`<li
58
- class=${(0,o.classMap)({step:!0,[`step-${e.status}`]:!0})}
59
- >
60
- ${this._renderStepMarker(e.status)}
61
- <span class="step-label"
62
- >${_(e,this.locale)}</span
63
- >
64
- ${t&&e.children?.length?this._renderSubsteps(e.children):r.nothing}
65
- </li>`}_renderDetails(){let e=this.displayMode!==`compact`;return r.html`<div id="details" class="details">
66
- <ol class="steps">
67
- ${(0,s.repeat)(this.progress?.children??[],e=>e.id,t=>this._renderStep(t,e))}
68
- </ol>
69
- </div>`}render(){if(this._phase===`idle`||!this._current)return r.nothing;let e=m(this.progress),t=this._labels,n=this._phase===`running`&&!this.noAnimate;return r.html`
70
- <button
71
- type="button"
72
- class="summary"
73
- data-state=${this._phase}
74
- aria-expanded=${this.open?`true`:`false`}
75
- aria-controls=${this.open?`details`:r.nothing}
76
- @click=${this.handleToggle}
77
- @keydown=${this.handleKeydown}
78
- >
79
- ${this._renderStatusIcon(e>0||this.progress?.status===`error`)}
80
- <span class=${(0,o.classMap)({headline:!0,shimmer:n})}>
81
- ${this._leaving?r.html`<span class="headline-text leaving" aria-hidden="true"
82
- >${this._renderContent(this._leaving)}</span
83
- >`:r.nothing}
84
- ${(0,c.keyed)(this._current.mainStep??T,r.html`<span
85
- class=${(0,o.classMap)({"headline-text":!0,entering:this._leaving!==null})}
86
- >${this._renderContent(this._current,this._subStepTransition)}</span
87
- >`)}
88
- </span>
89
- ${e>0?r.html`<span class="failed-count"
90
- >${this._formatCount(e===1?t.failedSingular:t.failedPlural,e)}</span
91
- >`:r.nothing}
92
- <span class="chevron" aria-hidden="true"
93
- >${(0,a.luzmoIcon)(a.luzmoAngleRight)}</span
94
- >
95
- </button>
96
- ${this.open?this._renderDetails():r.nothing}
97
- <span class="visually-hidden" role="status">${this._announcement}</span>
98
- `}};e.t([(0,i.property)({attribute:!1})],O.prototype,`progress`,void 0),e.t([(0,i.property)({type:String,reflect:!0})],O.prototype,`locale`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],O.prototype,`collapsed`,void 0),e.t([(0,i.property)({type:String,attribute:`display-mode`,reflect:!0})],O.prototype,`displayMode`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],O.prototype,`condensed`,void 0),e.t([(0,i.property)({attribute:!1})],O.prototype,`labels`,void 0),e.t([(0,i.property)({type:Boolean,attribute:`no-animate`,reflect:!0})],O.prototype,`noAnimate`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],O.prototype,`open`,void 0),e.t([(0,i.state)()],O.prototype,`_phase`,void 0),e.t([(0,i.state)()],O.prototype,`_current`,void 0),e.t([(0,i.state)()],O.prototype,`_leaving`,void 0),e.t([(0,i.state)()],O.prototype,`_subStepTransition`,void 0),e.t([(0,i.state)()],O.prototype,`_announcement`,void 0),typeof customElements<`u`&&!customElements.get(`luzmo-progress-steps`)&&customElements.define(`luzmo-progress-steps`,O),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return y}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return O}});