@luzmo/lucero 2.4.0 → 2.4.1
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/components/index.cjs +1 -1
- package/components/index.js +1 -1
- package/components/progress-steps/index.cjs +1 -1
- package/components/progress-steps/index.js +1 -1
- package/components/progress-steps/progress-steps.d.ts +13 -0
- package/components/{progress-steps-ohguJaPa.js → progress-steps-BIbj8x8S.js} +33 -18
- package/components/progress-steps-upJp8wl3.cjs +98 -0
- package/custom-elements.json +1 -1
- package/package.json +1 -1
- package/standalone/progress-steps.js +3 -3
- package/components/progress-steps-Y-Tgh_fQ.cjs +0 -98
package/components/index.cjs
CHANGED
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./tokens.cjs");const e=require("./decorate-Dq34MBGe.cjs"),t=require("./sized-mixin-BT7cv-fT.cjs"),n=require("./accordion-BK0LfhmL.cjs"),r=require("./focus-visible-DNHNlrty.cjs"),ee=require("./focusable-B6h03pAe.cjs"),te=require("./action-group-oo7YV0EW.cjs"),ne=require("./icon-zOPAWCdx.cjs"),re=require("./close-button-BAELImQY.cjs"),i=require("./field-label-C0vfY1b6.cjs"),a=require("./popover-BsdqkvKI.cjs"),o=require("./action-bar-DAqG_7VG.cjs"),s=require("./action-button-CX1uYbQp.cjs"),c=require("./slottable-request-event-C6eb7Ch3.cjs"),l=require("./progress-circle-bO_VAX3N.cjs"),u=require("./menu-CrhA2iPZ.cjs"),d=require("./overlay-Dn7EbA_W.cjs"),f=require("./platform-BAjeJp2W.cjs"),ie=require("./tooltip-DjOW52n2.cjs"),p=require("./picker-BliQJlY_.cjs"),ae=require("./action-menu-CwzRbF61.cjs"),oe=require("./avatar-DHS5UGTJ.cjs"),m=require("./badge-D8pIDEoq.cjs"),h=require("./button-Bvnidb4x.cjs"),g=require("./button-group-Du7R4SxZ.cjs"),_=require("./calendar-pQxEWdYC.cjs"),v=require("./chat-message-Dgo6h0rD.cjs"),y=require("./chat-message-group-CvxdX3jt.cjs"),b=require("./checkbox-ClVrkeLp.cjs"),x=require("./color-loupe-6NcLbFco.cjs"),S=require("./color-handle-2iFLp9FN.cjs"),C=require("./streaming-listener-Bfyk6Fsx.cjs"),w=require("./color-area-CmKlQG1i.cjs"),T=require("./text-field-3fDtTQkR.cjs"),E=require("./color-field-BH9x46k_.cjs"),D=require("./color-slider-CMW8gJ0Z.cjs"),O=require("./divider-BcE8D-pH.cjs"),k=require("./swatch-CQ0inIHK.cjs"),A=require("./color-menu-BYTgxLQG.cjs"),j=require("./color-palette-x6W09EBL.cjs"),M=require("./color-palette-group-D4k_7pW6.cjs"),N=require("./color-picker-BAikpqUT.cjs"),P=require("./picker-button-B8Jbf9jK.cjs"),F=require("./date-range-picker-D149LIGC.cjs"),I=require("./date-time-picker-CRpvRk9T.cjs"),L=require("./field-group-Dd5xYczm.cjs");require("./field-group/index.cjs");const se=require("./infield-button-kilVRjwB.cjs"),R=require("./label-B3zs6OX0.cjs"),z=require("./text-field-CbN4nydd.cjs"),B=require("./multi-language-field-BndVikur.cjs"),V=require("./notice-CsWaqcq3.cjs"),H=require("./number-field-xxXgR70l.cjs"),U=require("./options-CP9V2CSJ.cjs");require("./picker/index.cjs");const W=require("./progress-bar-CrodWzcc.cjs"),G=require("./progress-steps-
|
|
18
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./tokens.cjs");const e=require("./decorate-Dq34MBGe.cjs"),t=require("./sized-mixin-BT7cv-fT.cjs"),n=require("./accordion-BK0LfhmL.cjs"),r=require("./focus-visible-DNHNlrty.cjs"),ee=require("./focusable-B6h03pAe.cjs"),te=require("./action-group-oo7YV0EW.cjs"),ne=require("./icon-zOPAWCdx.cjs"),re=require("./close-button-BAELImQY.cjs"),i=require("./field-label-C0vfY1b6.cjs"),a=require("./popover-BsdqkvKI.cjs"),o=require("./action-bar-DAqG_7VG.cjs"),s=require("./action-button-CX1uYbQp.cjs"),c=require("./slottable-request-event-C6eb7Ch3.cjs"),l=require("./progress-circle-bO_VAX3N.cjs"),u=require("./menu-CrhA2iPZ.cjs"),d=require("./overlay-Dn7EbA_W.cjs"),f=require("./platform-BAjeJp2W.cjs"),ie=require("./tooltip-DjOW52n2.cjs"),p=require("./picker-BliQJlY_.cjs"),ae=require("./action-menu-CwzRbF61.cjs"),oe=require("./avatar-DHS5UGTJ.cjs"),m=require("./badge-D8pIDEoq.cjs"),h=require("./button-Bvnidb4x.cjs"),g=require("./button-group-Du7R4SxZ.cjs"),_=require("./calendar-pQxEWdYC.cjs"),v=require("./chat-message-Dgo6h0rD.cjs"),y=require("./chat-message-group-CvxdX3jt.cjs"),b=require("./checkbox-ClVrkeLp.cjs"),x=require("./color-loupe-6NcLbFco.cjs"),S=require("./color-handle-2iFLp9FN.cjs"),C=require("./streaming-listener-Bfyk6Fsx.cjs"),w=require("./color-area-CmKlQG1i.cjs"),T=require("./text-field-3fDtTQkR.cjs"),E=require("./color-field-BH9x46k_.cjs"),D=require("./color-slider-CMW8gJ0Z.cjs"),O=require("./divider-BcE8D-pH.cjs"),k=require("./swatch-CQ0inIHK.cjs"),A=require("./color-menu-BYTgxLQG.cjs"),j=require("./color-palette-x6W09EBL.cjs"),M=require("./color-palette-group-D4k_7pW6.cjs"),N=require("./color-picker-BAikpqUT.cjs"),P=require("./picker-button-B8Jbf9jK.cjs"),F=require("./date-range-picker-D149LIGC.cjs"),I=require("./date-time-picker-CRpvRk9T.cjs"),L=require("./field-group-Dd5xYczm.cjs");require("./field-group/index.cjs");const se=require("./infield-button-kilVRjwB.cjs"),R=require("./label-B3zs6OX0.cjs"),z=require("./text-field-CbN4nydd.cjs"),B=require("./multi-language-field-BndVikur.cjs"),V=require("./notice-CsWaqcq3.cjs"),H=require("./number-field-xxXgR70l.cjs"),U=require("./options-CP9V2CSJ.cjs");require("./picker/index.cjs");const W=require("./progress-bar-CrodWzcc.cjs"),G=require("./progress-steps-upJp8wl3.cjs"),K=require("./skeleton-loader-CNcwCh4V.cjs"),q=require("./prompt-box-sp9_-Hnx.cjs"),ce=require("./voice-recorder-B1tBrGTV.cjs"),J=require("./radio-CRTfoEX_.cjs"),Y=require("./question-box-Bdtsgv1k.cjs"),le=require("./search-PxJEuwHt.cjs"),ue=require("./select-DsGVB01K.cjs"),X=require("./slider-C_8pSK4N.cjs"),de=require("./split-view-BwCFYey6.cjs"),fe=require("./status-light-D3hdx8Pd.cjs"),pe=require("./switch-qwpYXVnO.cjs"),Z=require("./tabs-DxOD4QNt.cjs"),Q=require("./top-nav-81IKEGjR.cjs"),$=require("./tags-fLCGajv_.cjs"),me=require("./toast-DRrGgznK.cjs");require("./utils.cjs"),exports.ClickController=d.d,exports.DEFAULT_FILE_ICONS=q.n,exports.DEFAULT_NOTICE_LABELS=V.t,exports.DEFAULT_PROGRESS_STEPS_LABELS=G.n,exports.DEFAULT_QUESTION_BOX_LABELS=Y.a,exports.DEFAULT_SLIDER_LABELS=X.r,exports.DESCRIPTION_ID=p.t,exports.ELEMENT_MIME_TYPE=q.r,exports.ElementSizes=t.t,exports.FocusVisiblePolyfillMixin=r.t,exports.Focusable=ee.t,exports.HoverController=d.u,exports.InteractionController=d.f,exports.InteractionTypes=d.p,exports.LONGPRESS_INSTRUCTIONS=d.c,exports.LongpressController=d.l,exports.LuzmoAbstractOverlay=d.y,exports.LuzmoAccordion=n.n,exports.LuzmoAccordionItem=n.t,exports.LuzmoActionBar=o.t,exports.LuzmoActionButton=s.t,exports.LuzmoActionGroup=te.t,exports.LuzmoActionMenu=ae.t,exports.LuzmoAvatar=oe.t,exports.LuzmoBadge=m.t,exports.LuzmoButton=h.n,exports.LuzmoButtonGroup=g.t,exports.LuzmoCalendar=_.t,exports.LuzmoChatMessage=v.t,exports.LuzmoChatMessageGroup=y.t,exports.LuzmoCheckbox=b.t,exports.LuzmoClearButton=h.t,exports.LuzmoCloseButton=re.t,exports.LuzmoColorArea=w.t,exports.LuzmoColorField=E.t,exports.LuzmoColorHandle=S.t,exports.LuzmoColorLoupe=x.t,exports.LuzmoColorMenu=A.t,exports.LuzmoColorPalette=j.t,exports.LuzmoColorPaletteGroup=M.t,exports.LuzmoColorPicker=N.t,exports.LuzmoColorSlider=D.t,exports.LuzmoDateRangePicker=F.t,exports.LuzmoDateTimePicker=I.t,exports.LuzmoDivider=O.t,exports.LuzmoElement=e.n,exports.LuzmoFieldGroup=L.t,exports.LuzmoFieldLabel=i.t,exports.LuzmoHelpText=z.t,exports.LuzmoIcon=ne.t,exports.LuzmoInfieldButton=se.t,exports.LuzmoLabel=R.t,exports.LuzmoMenu=u.a,exports.LuzmoMenuDivider=u.i,exports.LuzmoMenuGroup=u.r,exports.LuzmoMenuItem=u.t,exports.LuzmoMixin=e.r,exports.LuzmoMultiLangField=B.t,exports.LuzmoNotice=V.n,exports.LuzmoNumberField=H.t,exports.LuzmoOption=U.a,exports.LuzmoOptions=U.t,exports.LuzmoOptionsDivider=U.i,exports.LuzmoOverlay=d.s,exports.LuzmoOverlayTrigger=d.o,exports.LuzmoPicker=p.n,exports.LuzmoPickerBase=p.r,exports.LuzmoPickerButton=P.t,exports.LuzmoPopover=a.t,exports.LuzmoProgressBar=W.t,exports.LuzmoProgressCircle=l.t,exports.LuzmoProgressSteps=G.t,exports.LuzmoPromptBox=q.t,exports.LuzmoQuestionBox=Y.t,exports.LuzmoRadio=J.n,exports.LuzmoRadioGroup=J.t,exports.LuzmoSearch=le.t,exports.LuzmoSelect=ue.t,exports.LuzmoSkeletonLoader=K.t,exports.LuzmoSlider=X.n,exports.LuzmoSliderHandle=X.t,exports.LuzmoSplitView=de.t,exports.LuzmoStatusLight=fe.t,exports.LuzmoSwatch=k.n,exports.LuzmoSwatchGroup=k.t,exports.LuzmoSwitch=pe.t,exports.LuzmoTab=Z.i,exports.LuzmoTabPanel=Z.r,exports.LuzmoTabs=Z.n,exports.LuzmoTabsOverflow=Z.t,exports.LuzmoTag=$.n,exports.LuzmoTags=$.t,exports.LuzmoTextField=T.t,exports.LuzmoToast=me.t,exports.LuzmoTooltip=ie.t,exports.LuzmoTopNav=Q.n,exports.LuzmoTopNavItem=Q.t,exports.MenuItemAddedOrUpdatedEvent=u.n,exports.OverlayTriggerDirective=d.t,exports.PlacementController=d.g,exports.QUESTION_BOX_OTHER_VALUE=Y.o,exports.SAFARI_FOCUS_RING_CLASS=d.m,exports.SizedMixin=t.n,exports.SlottableRequestDirective=d.r,exports.SlottableRequestEvent=c.t,exports.VIRTUALIZE_AS_OF_NUM_ITEMS=U.n,exports.VirtualTrigger=d.v,exports.VoiceRecorder=ce.t,exports.guaranteedAllTransitionend=d.b,exports.isAndroid=f.t,exports.isAppleDevice=f.n,exports.isChrome=f.r,exports.isFirefox=f.i,exports.isIOS=f.a,exports.isIPad=f.o,exports.isIPhone=f.s,exports.isMac=f.c,exports.isSeamonkey=f.l,exports.isWebKit=f.u,exports.lastInteractionType=d.h,exports.nextFrame=d.x,exports.noop=d.S,exports.noticeVariants=V.r,exports.openOverlay=d.a,exports.overlayTimer=d.C,exports.placementUpdatedSymbol=d._,exports.questionBoxOtherKey=Y.s,exports.questionsToRequestedSchema=Y.n,exports.removeSlottableRequest=c.n,exports.requestedSchemaToQuestions=Y.r,exports.slottableRequest=d.i,exports.streamingListener=C.t,exports.toElicitationContent=Y.i,exports.trigger=d.n;
|
package/components/index.js
CHANGED
|
@@ -71,7 +71,7 @@ import { t as Ve } from "./number-field-DAOy_AvQ.js";
|
|
|
71
71
|
import { a as He, i as Ue, n as We, t as Ge } from "./options-D_ifU0DH.js";
|
|
72
72
|
import "./picker/index.js";
|
|
73
73
|
import { t as Ke } from "./progress-bar-D4iFHkp7.js";
|
|
74
|
-
import { n as qe, t as Je } from "./progress-steps-
|
|
74
|
+
import { n as qe, t as Je } from "./progress-steps-BIbj8x8S.js";
|
|
75
75
|
import { t as Ye } from "./skeleton-loader-BeCsYADg.js";
|
|
76
76
|
import { n as Xe, r as Ze, t as Qe } from "./prompt-box-Cz_m2wso.js";
|
|
77
77
|
import { t as $e } from "./voice-recorder-CTg3kRxx.js";
|
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("../tokens.cjs");const e=require("../progress-steps-
|
|
18
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("../tokens.cjs");const e=require("../progress-steps-upJp8wl3.cjs");exports.DEFAULT_PROGRESS_STEPS_LABELS=e.n,exports.LuzmoProgressSteps=e.t;
|
|
@@ -31,6 +31,7 @@ declare const LuzmoProgressSteps_base: typeof LuzmoElement & {
|
|
|
31
31
|
* @cssprop --luzmo-progress-steps-font-color-dimmed - Color of the summary line and substeps
|
|
32
32
|
* @cssprop --luzmo-progress-steps-error-color - Color of failed steps
|
|
33
33
|
* @cssprop --luzmo-progress-steps-warning-color - Color of the failure icon in the summary line
|
|
34
|
+
* @cssprop --luzmo-progress-steps-success-color - Color of the checkmark in the summary line once a run finishes without failures
|
|
34
35
|
* @cssprop --luzmo-progress-steps-substep-connector-color - Color of the timeline rail in the history and the spinner track
|
|
35
36
|
*/
|
|
36
37
|
export declare class LuzmoProgressSteps extends LuzmoProgressSteps_base {
|
|
@@ -85,9 +86,21 @@ export declare class LuzmoProgressSteps extends LuzmoProgressSteps_base {
|
|
|
85
86
|
private _settleTimer?;
|
|
86
87
|
private _leaveTimer?;
|
|
87
88
|
private _announceTimer?;
|
|
89
|
+
private _resizeObserver?;
|
|
90
|
+
/** Whether the shown line shows its substep alone. */
|
|
91
|
+
private _subStepOnly;
|
|
92
|
+
/** Whether the leaving line showed its substep alone. */
|
|
93
|
+
private _leavingSubStepOnly;
|
|
88
94
|
connectedCallback(): void;
|
|
89
95
|
disconnectedCallback(): void;
|
|
90
96
|
protected willUpdate(changes: PropertyValues): void;
|
|
97
|
+
protected updated(changes: PropertyValues): void;
|
|
98
|
+
/**
|
|
99
|
+
* Shows the substep alone when the main step and substep don't both fit
|
|
100
|
+
* whole. The main step stays in the accessible name. Runs before paint, so
|
|
101
|
+
* the measuring layout is never shown.
|
|
102
|
+
*/
|
|
103
|
+
private _fitLine;
|
|
91
104
|
private get _labels();
|
|
92
105
|
/** Moves between running and finished based on the latest tree. */
|
|
93
106
|
private _syncPhase;
|
|
@@ -66,7 +66,7 @@ function E(e, t) {
|
|
|
66
66
|
}
|
|
67
67
|
//#endregion
|
|
68
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))}.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}.main-step:not(:last-child){max-inline-size:var(--progress-steps-main-step-max-width);flex-shrink:0}.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}.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:calc(var(--progress-steps-icon-size) * .8);block-size:calc(var(--progress-steps-icon-size) * .8);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}.step>.substeps{grid-column:2}.substep>.substeps{padding-inline-start:var(--progress-steps-substep-indent)}.substep{padding-block:calc(var(--progress-steps-step-spacing) / 2);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-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-xs);--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-icon-offset:.04em;--progress-steps-main-step-max-width:65%;--progress-steps-font-size-small:.93em;--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-icon-size:var(--luzmo-icon-size-s);--progress-steps-gap:var(--luzmo-spacing-2)}:host([size=l]){--progress-steps-font-size:var(--luzmo-font-size-l);--progress-steps-icon-size:var(--luzmo-icon-size-l);--progress-steps-min-height:var(--luzmo-component-height-s);--progress-steps-step-spacing:var(--luzmo-spacing-2)}:host([size=xl]){--progress-steps-font-size:var(--luzmo-font-size-xl);--progress-steps-icon-size:var(--luzmo-icon-size-xl);--progress-steps-min-height:var(--luzmo-component-height-s);--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 = {
|
|
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
70
|
condensedSingular: "Worked through {{count}} step",
|
|
71
71
|
condensedPlural: "Worked through {{count}} steps",
|
|
72
72
|
failedSingular: "{{count}} failed",
|
|
@@ -75,10 +75,13 @@ var D = ":host{box-sizing:border-box;font-family:var(--luzmo-font-family);font-s
|
|
|
75
75
|
stepPending: "Step pending",
|
|
76
76
|
stepCompleted: "Step completed",
|
|
77
77
|
stepFailed: "Step failed"
|
|
78
|
-
}, k = 500, A = 800, j = 1e3, M = 250, N = {
|
|
78
|
+
}, k = 500, A = 800, j = 1e3, M = 250, N = "data-sub-step-only", P = {
|
|
79
79
|
mainStep: null,
|
|
80
80
|
subStep: null
|
|
81
|
-
},
|
|
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, {
|
|
82
85
|
defaultSize: "m",
|
|
83
86
|
validSizes: [
|
|
84
87
|
"s",
|
|
@@ -88,21 +91,33 @@ var D = ":host{box-sizing:border-box;font-family:var(--luzmo-font-family);font-s
|
|
|
88
91
|
]
|
|
89
92
|
}) {
|
|
90
93
|
constructor(...e) {
|
|
91
|
-
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;
|
|
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;
|
|
92
95
|
}
|
|
93
96
|
static get styles() {
|
|
94
97
|
let e = super.styles;
|
|
95
98
|
return [...Array.isArray(e) ? e : e ? [e] : [], s(D)];
|
|
96
99
|
}
|
|
97
100
|
connectedCallback() {
|
|
98
|
-
super.connectedCallback(), this.hasUpdated && this._syncPhase();
|
|
101
|
+
super.connectedCallback(), typeof ResizeObserver < "u" && (this._resizeObserver ??= new ResizeObserver(() => this._fitLine()), this._resizeObserver.observe(this)), this.hasUpdated && this._syncPhase();
|
|
99
102
|
}
|
|
100
103
|
disconnectedCallback() {
|
|
101
|
-
super.disconnectedCallback(), this._clearTimers(), this._leaving = null, this._subStepTransition = null;
|
|
104
|
+
super.disconnectedCallback(), this._resizeObserver?.disconnect(), this._clearTimers(), this._leaving = null, this._subStepTransition = null;
|
|
102
105
|
}
|
|
103
106
|
willUpdate(e) {
|
|
104
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();
|
|
105
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
|
+
}
|
|
106
121
|
get _labels() {
|
|
107
122
|
return {
|
|
108
123
|
...O,
|
|
@@ -138,7 +153,7 @@ var D = ":host{box-sizing:border-box;font-family:var(--luzmo-font-family);font-s
|
|
|
138
153
|
mainStep: E(e.mainStep, this.locale),
|
|
139
154
|
subStep: e.subStep ? E(e.subStep, this.locale) : null
|
|
140
155
|
};
|
|
141
|
-
if (
|
|
156
|
+
if (F(this._current, t)) {
|
|
142
157
|
this._pending = null, this._clearDwellTimer();
|
|
143
158
|
return;
|
|
144
159
|
}
|
|
@@ -154,11 +169,11 @@ var D = ":host{box-sizing:border-box;font-family:var(--luzmo-font-family);font-s
|
|
|
154
169
|
}
|
|
155
170
|
_finish() {
|
|
156
171
|
let e = this._phase === "running";
|
|
157
|
-
this._clearDwellTimer(), this._clearSettleTimer(), this._pending = null, this._phase = "done", this._show(
|
|
172
|
+
this._clearDwellTimer(), this._clearSettleTimer(), this._pending = null, this._phase = "done", this._show(P), e && this._announce(this._summaryText());
|
|
158
173
|
}
|
|
159
174
|
_show(e) {
|
|
160
175
|
let t = this._current;
|
|
161
|
-
t && !this.noAnimate && (t.mainStep !== null && t.mainStep === e.mainStep ? this._subStepTransition = { leaving: t.subStep } : (this._leaving = t, this._subStepTransition = null), clearTimeout(this._leaveTimer), this._leaveTimer = setTimeout(() => {
|
|
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(() => {
|
|
162
177
|
this._leaving = null, this._subStepTransition = null;
|
|
163
178
|
}, M)), this._current = e, this._shownAt = Date.now();
|
|
164
179
|
}
|
|
@@ -321,7 +336,7 @@ var D = ":host{box-sizing:border-box;font-family:var(--luzmo-font-family);font-s
|
|
|
321
336
|
${this._leaving ? a`<span class="headline-text leaving" aria-hidden="true"
|
|
322
337
|
>${this._renderContent(this._leaving)}</span
|
|
323
338
|
>` : o}
|
|
324
|
-
${_(this._current.mainStep ??
|
|
339
|
+
${_(this._current.mainStep ?? P, a`<span
|
|
325
340
|
class=${h({
|
|
326
341
|
"headline-text": !0,
|
|
327
342
|
entering: this._leaving !== null
|
|
@@ -343,26 +358,26 @@ var D = ":host{box-sizing:border-box;font-family:var(--luzmo-font-family);font-s
|
|
|
343
358
|
};
|
|
344
359
|
//#endregion
|
|
345
360
|
//#region src/components/progress-steps/index.ts
|
|
346
|
-
t([c({ attribute: !1 })],
|
|
361
|
+
t([c({ attribute: !1 })], L.prototype, "progress", void 0), t([c({
|
|
347
362
|
type: String,
|
|
348
363
|
reflect: !0
|
|
349
|
-
})],
|
|
364
|
+
})], L.prototype, "locale", void 0), t([c({
|
|
350
365
|
type: Boolean,
|
|
351
366
|
reflect: !0
|
|
352
|
-
})],
|
|
367
|
+
})], L.prototype, "collapsed", void 0), t([c({
|
|
353
368
|
type: String,
|
|
354
369
|
attribute: "display-mode",
|
|
355
370
|
reflect: !0
|
|
356
|
-
})],
|
|
371
|
+
})], L.prototype, "displayMode", void 0), t([c({
|
|
357
372
|
type: Boolean,
|
|
358
373
|
reflect: !0
|
|
359
|
-
})],
|
|
374
|
+
})], L.prototype, "condensed", void 0), t([c({ attribute: !1 })], L.prototype, "labels", void 0), t([c({
|
|
360
375
|
type: Boolean,
|
|
361
376
|
attribute: "no-animate",
|
|
362
377
|
reflect: !0
|
|
363
|
-
})],
|
|
378
|
+
})], L.prototype, "noAnimate", void 0), t([c({
|
|
364
379
|
type: Boolean,
|
|
365
380
|
reflect: !0
|
|
366
|
-
})],
|
|
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);
|
|
367
382
|
//#endregion
|
|
368
|
-
export { O as n,
|
|
383
|
+
export { O as n, L as t };
|
|
@@ -0,0 +1,98 @@
|
|
|
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}});
|