@luzmo/lucero 2.3.0-beta.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/action-menu/index.cjs +1 -1
- package/components/action-menu/index.js +1 -1
- package/components/{action-menu-De9S9nlo.js → action-menu-C0sHNsjG.js} +2 -2
- package/components/{action-menu-D3L0k49M.cjs → action-menu-CwzRbF61.cjs} +1 -1
- package/components/chat-message/index.cjs +1 -1
- package/components/chat-message/index.js +1 -1
- package/components/chat-message-Dgo6h0rD.cjs +148 -0
- package/components/{chat-message-D6U-sprD.js → chat-message-T6QIK2Bl.js} +526 -562
- package/components/color-picker/index.cjs +1 -1
- package/components/color-picker/index.js +1 -1
- package/components/{color-picker-CRokyPy-.cjs → color-picker-BAikpqUT.cjs} +1 -1
- package/components/{color-picker-C2kni9Zo.js → color-picker-CSuAPo5X.js} +1 -1
- package/components/date-range-picker/index.cjs +1 -1
- package/components/date-range-picker/index.js +1 -1
- package/components/{date-range-picker-Dfn3MnfA.cjs → date-range-picker-D149LIGC.cjs} +1 -1
- package/components/{date-range-picker-CVRHT56i.js → date-range-picker-DKVmGpUC.js} +1 -1
- package/components/date-time-picker/index.cjs +1 -1
- package/components/date-time-picker/index.js +1 -1
- package/components/{date-time-picker-C4oIN9Of.js → date-time-picker-6c19YzwF.js} +1 -1
- package/components/{date-time-picker-DYT04Zyv.cjs → date-time-picker-CRpvRk9T.cjs} +1 -1
- package/components/index.cjs +1 -1
- package/components/index.js +24 -24
- package/components/overlay/index.cjs +1 -1
- package/components/overlay/index.js +1 -1
- package/components/overlay/placement-controller.d.ts +2 -1
- package/components/{overlay-4YVoQOyd.cjs → overlay-Dn7EbA_W.cjs} +1 -1
- package/components/{overlay-BvMcppFH.js → overlay-DpHIYJtd.js} +2 -2
- package/components/picker/index.cjs +1 -1
- package/components/picker/index.js +1 -1
- package/components/{picker-DKFG8i-B.cjs → picker-BliQJlY_.cjs} +1 -1
- package/components/{picker-DKAbXYoQ.js → picker-D0fMBZLb.js} +1 -1
- package/components/progress-steps/index.cjs +1 -1
- package/components/progress-steps/index.d.ts +2 -1
- package/components/progress-steps/index.js +2 -2
- package/components/progress-steps/progress-steps-model.d.ts +23 -0
- package/components/progress-steps/progress-steps.d.ts +95 -109
- package/components/progress-steps/types.d.ts +18 -3
- package/components/progress-steps-BIbj8x8S.js +383 -0
- package/components/progress-steps-upJp8wl3.cjs +98 -0
- package/components/prompt-box/index.cjs +1 -1
- package/components/prompt-box/index.js +1 -1
- package/components/{prompt-box-CAEo3tqw.js → prompt-box-Cz_m2wso.js} +1 -1
- package/components/{prompt-box-DfWfrlF6.cjs → prompt-box-sp9_-Hnx.cjs} +1 -1
- package/components/select/index.cjs +1 -1
- package/components/select/index.js +1 -1
- package/components/{select-CAst7yfM.js → select-BUgHi69P.js} +1 -1
- package/components/{select-DkvHL37E.cjs → select-DsGVB01K.cjs} +1 -1
- package/custom-elements.json +1 -1
- package/package.json +1 -1
- package/standalone/accordion.js +1 -1
- package/standalone/action-bar.js +1 -1
- package/standalone/action-button.js +1 -1
- package/standalone/action-menu.js +1 -1
- package/standalone/avatar.js +1 -1
- package/standalone/calendar.js +1 -1
- package/standalone/chat-message.js +27 -27
- package/standalone/checkbox.js +1 -1
- package/standalone/chunks/{action-button-DCt8NsDy.js → action-button-BzzPBqt5.js} +1 -1
- package/standalone/chunks/{button-UUPI5TRz.js → button-Dykw3TSO.js} +1 -1
- package/standalone/chunks/{calendar-rx4pQ28E.js → calendar-ZwUYkzVq.js} +1 -1
- package/standalone/chunks/{checkbox-Dz-0cBEf.js → checkbox-OQtakoP8.js} +1 -1
- package/standalone/chunks/{clear-button-DAHm73iN.js → clear-button-pVGfwye8.js} +1 -1
- package/standalone/chunks/{close-button-DB1Q3IfL.js → close-button-RpPiwBdf.js} +1 -1
- package/standalone/chunks/{color-field-BQ4y3biw.js → color-field-CrCF4kqZ.js} +1 -1
- package/standalone/chunks/{color-menu-DRO2lf0w.js → color-menu-B5UOMYmX.js} +1 -1
- package/standalone/chunks/{icon-Csu47YgC.js → icon-Dy6J1QeX.js} +1 -1
- package/standalone/chunks/keyed-CNWmQd2J.js +2 -0
- package/standalone/chunks/{luzmo-icons-BKu82bUU.js → luzmo-icons-CJa-aByT.js} +2 -2
- package/standalone/chunks/{menu-CVdQKzxC.js → menu-nolJetlp.js} +1 -1
- package/standalone/chunks/{number-field-BWvsvU01.js → number-field-C3DYfl1s.js} +1 -1
- package/standalone/chunks/{options-DzlW2-9n.js → options-BjRSj630.js} +5 -5
- package/standalone/chunks/{overlay-I_DOZNsB.js → overlay-C4ir0iyC.js} +1 -1
- package/standalone/chunks/{overlay-COmLsmL3.js → overlay-C_XW8yry.js} +1 -1
- package/standalone/chunks/{picker-button-D22V8uCk.js → picker-button-BeXTIgUt.js} +1 -1
- package/standalone/chunks/{picker-DGOvxfUV.js → picker-hbMQOkUX.js} +1 -1
- package/standalone/chunks/{segments-factory-Bj8uOVOG.js → segments-factory-Ch3AAizU.js} +1 -1
- package/standalone/chunks/{swatch-B-lwyWNi.js → swatch-m_4GcO2_.js} +1 -1
- package/standalone/chunks/{text-field-DgyP9fxu.js → text-field-BnZtyodU.js} +1 -1
- package/standalone/chunks/{text-field-BWZK7Km7.js → text-field-BrlDeJsx.js} +1 -1
- package/standalone/clear-button.js +1 -1
- package/standalone/close-button.js +1 -1
- package/standalone/color-field.js +1 -1
- package/standalone/color-menu.js +1 -1
- package/standalone/color-picker.js +1 -1
- package/standalone/date-range-picker.js +1 -1
- package/standalone/date-time-picker.js +1 -1
- package/standalone/icon.js +1 -1
- package/standalone/lit.js +1 -1
- package/standalone/manifest.json +22 -21
- package/standalone/menu.js +1 -1
- package/standalone/multi-language-field.js +1 -1
- package/standalone/notice.js +1 -1
- package/standalone/number-field.js +1 -1
- package/standalone/options.js +1 -1
- package/standalone/overlay.js +1 -1
- package/standalone/picker-button.js +1 -1
- package/standalone/picker.js +1 -1
- package/standalone/progress-steps.js +79 -77
- package/standalone/prompt-box.js +9 -9
- package/standalone/question-box.js +1 -1
- package/standalone/search.js +1 -1
- package/standalone/select.js +1 -1
- package/standalone/slider.js +1 -1
- package/standalone/swatch.js +1 -1
- package/standalone/tabs.js +1 -1
- package/standalone/tags.js +1 -1
- package/standalone/text-field.js +1 -1
- package/standalone/toast.js +1 -1
- package/components/chat-message-BDfomRm-.cjs +0 -148
- package/components/progress-steps-9tRZ0dxp.cjs +0 -96
- package/components/progress-steps-CX9mnyHH.js +0 -263
|
@@ -1,263 +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 { html as r, nothing as i, unsafeCSS as a } from "lit";
|
|
22
|
-
import { property as o, state as s } from "lit/decorators.js";
|
|
23
|
-
import { luzmoAngleDown as c, luzmoAngleUp as l, luzmoCheckCircleOutline as u, luzmoCircle as d, luzmoClose14 as f, luzmoIcon as p } from "@luzmo/icons";
|
|
24
|
-
//#region src/components/progress-steps/progress-steps.module.scss?inline
|
|
25
|
-
var m = ":host{font-family:var(--luzmo-font-family);font-size:var(--luzmo-progress-steps-font-size,var(--progress-steps-font-size));color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color));display:block}.progress-steps-container{gap:var(--luzmo-progress-steps-gap,var(--progress-steps-gap));flex-direction:column;display:flex}.step{grid-template-columns:var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size)) auto;column-gap:var(--luzmo-progress-steps-gap,var(--progress-steps-gap));animation:.3s ease-out forwards stepFadeIn;display:grid;position:relative}.step:not(:last-child):after{content:\"\";left:calc(var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size)) / 2);top:var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size));bottom:calc(-1 * var(--luzmo-progress-steps-gap,var(--progress-steps-gap)));background-color:var(--luzmo-progress-steps-substep-connector-color,var(--progress-steps-substep-connector-color));z-index:0;pointer-events:none;width:1px;position:absolute;transform:translate(-.5px)}.step:not(:last-child):has(.substeps-container.expanded):after{height:var(--luzmo-progress-steps-gap,var(--progress-steps-gap));top:auto}.step-header{-webkit-user-select:none;user-select:none;display:contents}.step-header.has-substeps{cursor:pointer}.step-icon{width:var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size));height:var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size));border-radius:var(--luzmo-progress-steps-icon-radius,var(--progress-steps-icon-radius,var(--luzmo-border-radius-l)));flex-shrink:0;grid-column:1;justify-content:center;align-self:center;align-items:center;display:flex;position:relative}.step-icon svg{width:100%;height:100%}.step-header.has-substeps .step-icon{cursor:pointer}.step-icon-pending{color:var(--luzmo-progress-steps-font-color-dimmed,var(--progress-steps-font-color-dimmed))}.step-icon-in-progress{position:relative}.step-dot{width:calc(var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size)) * .4);height:calc(var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size)) * .4);background-color:var(--luzmo-progress-steps-primary-color,var(--progress-steps-primary-color));border-radius:var(--luzmo-progress-steps-icon-radius,var(--progress-steps-icon-radius,var(--luzmo-border-radius-l)));position:relative}.step-dot:after{--progress-steps-pulse-offset-calc:var(--luzmo-progress-steps-pulse-offset,var(--progress-steps-pulse-offset,6px));content:\"\";top:calc(-1 * var(--progress-steps-pulse-offset-calc));left:calc(-1 * var(--progress-steps-pulse-offset-calc));right:calc(-1 * var(--progress-steps-pulse-offset-calc));bottom:calc(-1 * var(--progress-steps-pulse-offset-calc));border-radius:var(--luzmo-progress-steps-icon-radius,var(--progress-steps-icon-radius,var(--luzmo-border-radius-l)));background-color:var(--luzmo-progress-steps-pulse-color,var(--progress-steps-pulse-color));opacity:0;animation:2s cubic-bezier(.4,0,.6,1) infinite mainStepPulse;position:absolute}.step-icon-completed{color:var(--luzmo-progress-steps-completed-color,var(--progress-steps-completed-color))}.step-icon-error{color:var(--luzmo-progress-steps-error-color,var(--progress-steps-error-color))}.step-content{align-items:center;gap:var(--luzmo-progress-steps-gap,var(--progress-steps-gap));border-radius:var(--luzmo-progress-steps-border-radius,var(--progress-steps-border-radius));flex-direction:row;grid-column:2;align-self:center;min-width:0;display:flex}.step-header.has-substeps .step-content{cursor:pointer}.step-name{font-weight:var(--luzmo-font-weight-semibold);color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color))}.step-chevron{width:var(--luzmo-progress-steps-chevron-size,var(--progress-steps-chevron-size));height:var(--luzmo-progress-steps-chevron-size,var(--progress-steps-chevron-size));color:var(--luzmo-progress-steps-font-color-dimmed,var(--progress-steps-font-color-dimmed));flex-shrink:0;justify-content:center;align-items:end;display:flex}.step-chevron svg{width:100%;height:100%}.step-chevron.hidden{visibility:hidden;cursor:default}.substeps-container{grid-column:1/-1;grid-template-columns:var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size)) 1fr;column-gap:var(--luzmo-progress-steps-gap,var(--progress-steps-gap));max-height:0;transition:none;display:grid;position:relative;overflow:clip}.substeps-container.expanded{max-height:var(--luzmo-progress-steps-substeps-max-height,var(--progress-steps-substeps-max-height,1000px));transition:max-height .3s cubic-bezier(.4,0,.2,1)}.substeps{gap:var(--luzmo-progress-steps-substep-gap,var(--progress-steps-substep-gap));padding-top:var(--luzmo-progress-steps-substep-gap,var(--progress-steps-substep-gap));flex-direction:column;grid-column:2;display:flex;position:relative}.substep{font-size:var(--luzmo-progress-steps-font-size-small,var(--progress-steps-font-size-small));--progress-steps-substep-line-height:1.4;--progress-steps-substep-bullet-center-offset:calc(var(--progress-steps-substep-line-height) * .5em);line-height:var(--progress-steps-substep-line-height);opacity:0;animation:.25s ease-out forwards substepFadeIn;position:relative}.substep:first-child{animation-delay:50ms}.substep:nth-child(2){animation-delay:.1s}.substep:nth-child(3){animation-delay:.15s}.substep:nth-child(4){animation-delay:.2s}.substep:nth-child(5){animation-delay:.25s}.substep:nth-child(6){animation-delay:.3s}.substep:nth-child(n+7){animation-delay:.35s}.substep-bullet{left:calc(-1 * var(--luzmo-progress-steps-gap,var(--progress-steps-gap)) - var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size)) / 2 - var(--luzmo-progress-steps-substep-bullet-size,var(--progress-steps-substep-bullet-size)) / 2);top:calc(var(--progress-steps-substep-bullet-center-offset) - var(--luzmo-progress-steps-substep-bullet-size,var(--progress-steps-substep-bullet-size)) / 2);width:var(--luzmo-progress-steps-substep-bullet-size,var(--progress-steps-substep-bullet-size));height:var(--luzmo-progress-steps-substep-bullet-size,var(--progress-steps-substep-bullet-size));z-index:2;background-color:var(--luzmo-background-color,#fff);--progress-steps-substep-bullet-base:var(--luzmo-progress-steps-substep-bullet-color,var(--progress-steps-substep-bullet-color));--progress-steps-substep-bullet-fill:var(--luzmo-progress-steps-substep-bullet-color,var(--progress-steps-substep-bullet-color));border-radius:50%;position:absolute}.substep-bullet:before,.substep-bullet:after{content:\"\";border-radius:50%;position:absolute}.substep-bullet:before{background-color:var(--progress-steps-substep-bullet-base);z-index:0;inset:0}.substep-bullet:after{background-color:var(--progress-steps-substep-bullet-fill);z-index:1;inset:0}.substep:before,.substep:after{content:\"\";left:calc(-1 * var(--luzmo-progress-steps-gap,var(--progress-steps-gap)) - var(--luzmo-progress-steps-icon-size,var(--progress-steps-icon-size)) / 2);background-color:var(--luzmo-progress-steps-substep-connector-color,var(--progress-steps-substep-connector-color));z-index:0;width:1px;position:absolute;transform:translate(-.5px)}.substep.is-first:before{top:calc(-1 * var(--luzmo-progress-steps-substep-gap,var(--progress-steps-substep-gap)));height:calc(var(--progress-steps-substep-bullet-center-offset) + var(--luzmo-progress-steps-substep-gap,var(--progress-steps-substep-gap)))}.substep:not(.is-last):after{top:var(--progress-steps-substep-bullet-center-offset);height:calc(100% + var(--luzmo-progress-steps-substep-gap,var(--progress-steps-substep-gap)))}.substep.is-last:after{display:none}.step:not(:last-child) .substep.is-last:after{top:var(--progress-steps-substep-bullet-center-offset);height:calc(100% - var(--progress-steps-substep-bullet-center-offset));display:block}.substep.is-first:has(.substep-bullet-in-progress):before{background:linear-gradient(to bottom, var(--luzmo-progress-steps-substep-connector-color,var(--progress-steps-substep-connector-color)), var(--luzmo-progress-steps-primary-color,var(--progress-steps-primary-color)))}.substep:has(+.substep .substep-bullet-in-progress):after{background:linear-gradient(to bottom, var(--luzmo-progress-steps-substep-connector-color,var(--progress-steps-substep-connector-color)), var(--luzmo-progress-steps-primary-color,var(--progress-steps-primary-color)))}.substep-bullet-pending,.substep-bullet-completed,.substep-bullet-error{--progress-steps-substep-bullet-base:var(--luzmo-progress-steps-substep-bullet-color,var(--progress-steps-substep-bullet-color));--progress-steps-substep-bullet-fill:var(--luzmo-progress-steps-substep-bullet-color,var(--progress-steps-substep-bullet-color))}.substep-bullet-in-progress{--progress-steps-substep-bullet-base:var(--luzmo-progress-steps-font-color-dimmed,var(--progress-steps-font-color-dimmed));--progress-steps-substep-bullet-fill:var(--luzmo-progress-steps-primary-color,var(--progress-steps-primary-color));box-shadow:0 0 5px 0 color-mix(in srgb, var(--luzmo-progress-steps-primary-color,var(--progress-steps-primary-color)) 30%, transparent);animation:2s cubic-bezier(.4,0,.6,1) infinite substepBulletGlow}.substep-bullet-in-progress:after{animation:2s cubic-bezier(.4,0,.6,1) infinite substepBulletPulse}.substep-text,.substep-text-pending,.substep-text-completed,.substep-text-error{color:var(--luzmo-progress-steps-font-color-dimmed,var(--progress-steps-font-color-dimmed))}.substep-text-completed{color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color))}.substep-text-error{color:var(--luzmo-progress-steps-error-color,var(--progress-steps-error-color))}.condensed-toggle{align-items:center;gap:var(--luzmo-progress-steps-gap,var(--progress-steps-gap));cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--luzmo-progress-steps-font-color-dimmed,var(--progress-steps-font-color-dimmed));transition:color .2s;display:flex}.condensed-toggle:hover{color:var(--luzmo-progress-steps-font-color,var(--progress-steps-font-color))}.condensed-toggle-text{font-weight:var(--luzmo-font-weight-semibold)}.condensed-toggle-chevron{width:var(--luzmo-progress-steps-chevron-size,var(--progress-steps-chevron-size));height:var(--luzmo-progress-steps-chevron-size,var(--progress-steps-chevron-size));flex-shrink:0;justify-content:center;align-items:center;transition:transform .2s;display:flex}.condensed-toggle-chevron svg{width:100%;height:100%}.condensed-toggle-chevron.expanded{transform:rotate(180deg)}.condensed-steps{gap:var(--luzmo-progress-steps-gap,var(--progress-steps-gap));margin-top:var(--luzmo-progress-steps-gap,var(--progress-steps-gap));flex-direction:column;display:flex}@keyframes mainStepPulse{0%{opacity:.6;transform:scale(.8)}50%{opacity:.3;transform:scale(1.25)}to{opacity:.6;transform:scale(.8)}}@keyframes substepBulletPulse{0%,to{opacity:.55;transform:scale(.95)}50%{opacity:.4;transform:scale(1.05)}}@keyframes substepBulletGlow{0%,to{box-shadow:0 0 4px 0 color-mix(in srgb, var(--luzmo-progress-steps-primary-color,var(--progress-steps-primary-color)) 25%, transparent)}50%{box-shadow:0 0 6px 1px color-mix(in srgb, var(--luzmo-progress-steps-primary-color,var(--progress-steps-primary-color)) 35%, transparent)}}@keyframes stepFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes substepFadeIn{0%{opacity:0;transform:translate(-4px)}to{opacity:1;transform:translate(0)}}:host([no-animate]) .step{animation:none}:host([no-animate]) .substep{opacity:1;animation:none}:host([no-animate]) .substep-bullet-in-progress,:host([no-animate]) .substep-bullet-in-progress:after{animation:none}:host([no-animate]) .condensed-toggle-chevron{transition:none}:host{--progress-steps-primary-color:var(--luzmo-primary);--progress-steps-pulse-color:rgba(var(--luzmo-primary-rgb), .4);--progress-steps-font-color:var(--luzmo-font-color);--progress-steps-font-color-dimmed:var(--luzmo-font-color-extra-dimmed);--progress-steps-completed-color:var(--luzmo-positive-color);--progress-steps-error-color:var(--luzmo-negative-color);--progress-steps-gap:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--progress-steps-substep-gap:var(--luzmo-spacing-3);--progress-steps-border-radius:var(--luzmo-border-radius);--progress-steps-font-size:var(--luzmo-font-size);--progress-steps-font-size-small:var(--luzmo-font-size-s);--progress-steps-icon-size:var(--luzmo-icon-size-xl);--progress-steps-icon-radius:var(--luzmo-border-radius-s);--progress-steps-chevron-size:var(--luzmo-icon-size-m);--progress-steps-substep-bullet-size:6px;--progress-steps-pulse-offset:6px;--progress-steps-substeps-max-height:1000px;--progress-steps-substep-connector-color:var(--luzmo-border-color);--progress-steps-substep-bullet-color:var(--luzmo-border-color)}:host([size=s]){--progress-steps-font-size:var(--luzmo-font-size-s);--progress-steps-font-size-small:var(--luzmo-font-size-xs);--progress-steps-gap:var(--luzmo-spacing-3);--progress-steps-substep-gap:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--progress-steps-icon-size:var(--luzmo-icon-size-m);--progress-steps-chevron-size:var(--luzmo-icon-size-s);--progress-steps-substep-bullet-size:5px}:host([size=l]){--progress-steps-font-size:var(--luzmo-font-size-l);--progress-steps-font-size-small:var(--luzmo-font-size);--progress-steps-gap:var(--luzmo-spacing-4);--progress-steps-substep-gap:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--progress-steps-icon-size:calc(var(--luzmo-icon-size-xl) + var(--luzmo-spacing-1));--progress-steps-chevron-size:var(--luzmo-icon-size-l);--progress-steps-substep-bullet-size:6px}:host([size=xl]){--progress-steps-font-size:var(--luzmo-font-size-xl);--progress-steps-font-size-small:var(--luzmo-font-size-l);--progress-steps-gap:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--progress-steps-substep-gap:var(--luzmo-spacing-4);--progress-steps-icon-size:calc(var(--luzmo-icon-size-xl) + var(--luzmo-spacing-2));--progress-steps-chevron-size:var(--luzmo-icon-size-xl);--progress-steps-substep-bullet-size:7px}:host{box-sizing:border-box}", h = {
|
|
26
|
-
condensedSingular: "{{count}} step completed",
|
|
27
|
-
condensedPlural: "{{count}} steps completed",
|
|
28
|
-
stepInProgress: "Step in progress",
|
|
29
|
-
stepPending: "Step pending",
|
|
30
|
-
stepCompleted: "Step completed",
|
|
31
|
-
stepFailed: "Step failed"
|
|
32
|
-
}, g = class extends n(e, {
|
|
33
|
-
defaultSize: "m",
|
|
34
|
-
validSizes: [
|
|
35
|
-
"s",
|
|
36
|
-
"m",
|
|
37
|
-
"l",
|
|
38
|
-
"xl"
|
|
39
|
-
]
|
|
40
|
-
}) {
|
|
41
|
-
constructor(...e) {
|
|
42
|
-
super(...e), this.progress = null, this.locale = "en", this.collapsed = !1, this.displayMode = "detailed", this.condensed = !1, this.labels = { ...h }, this.noAnimate = !1, this._condensedExpanded = !1, this._expandedNodes = /* @__PURE__ */ new Set(), this._autoExpandedNodes = /* @__PURE__ */ new Set(), this._manuallyExpandedNodes = /* @__PURE__ */ new Set();
|
|
43
|
-
}
|
|
44
|
-
static {
|
|
45
|
-
this.styles = [a(m)];
|
|
46
|
-
}
|
|
47
|
-
willUpdate(e) {
|
|
48
|
-
if (super.willUpdate(e), e.has("progress")) {
|
|
49
|
-
let t = e.get("progress");
|
|
50
|
-
this._handleProgressChange(t), (!this.progress || !t || this.progress.id !== t.id) && (this._condensedExpanded = !1);
|
|
51
|
-
}
|
|
52
|
-
e.has("condensed") && (this._condensedExpanded = !1), e.has("collapsed") && (this.collapsed ? this._collapseAutoExpandedNodes() : this._reExpandInProgressNodes());
|
|
53
|
-
}
|
|
54
|
-
_handleProgressChange(e) {
|
|
55
|
-
(!this.progress || !e || this.progress.id !== e.id) && this._clearExpansionState(), this.progress?.children && (this._handleAutoExpandCollapse(this.progress.children), this.collapsed && this._collapseAutoExpandedNodes());
|
|
56
|
-
}
|
|
57
|
-
_clearExpansionState() {
|
|
58
|
-
this._expandedNodes.clear(), this._autoExpandedNodes.clear(), this._manuallyExpandedNodes.clear();
|
|
59
|
-
}
|
|
60
|
-
_handleAutoExpandCollapse(e) {
|
|
61
|
-
for (let t of e) {
|
|
62
|
-
let e = t.id;
|
|
63
|
-
t.status === "inProgress" && !this._autoExpandedNodes.has(e) && (this._autoExpandedNodes.add(e), this._expandedNodes.add(e)), t.children && this._handleAutoExpandCollapse(t.children);
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
_collapseAutoExpandedNodes() {
|
|
67
|
-
for (let e of this._autoExpandedNodes) this._manuallyExpandedNodes.has(e) || this._expandedNodes.delete(e);
|
|
68
|
-
}
|
|
69
|
-
_reExpandInProgressNodes() {
|
|
70
|
-
this.progress?.children && this._reExpandInProgressNodesRecursive(this.progress.children);
|
|
71
|
-
}
|
|
72
|
-
_reExpandInProgressNodesRecursive(e) {
|
|
73
|
-
for (let t of e) t.status === "inProgress" && this._autoExpandedNodes.has(t.id) && this._expandedNodes.add(t.id), t.children && this._reExpandInProgressNodesRecursive(t.children);
|
|
74
|
-
}
|
|
75
|
-
_mapStatus(e) {
|
|
76
|
-
switch (e) {
|
|
77
|
-
case "inProgress": return "in-progress";
|
|
78
|
-
case "success": return "completed";
|
|
79
|
-
case "pending": return "pending";
|
|
80
|
-
case "error": return "error";
|
|
81
|
-
default: return "pending";
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
_resolveLocalizedString(e) {
|
|
85
|
-
return e[this.locale] ?? e.en ?? Object.values(e)[0] ?? "";
|
|
86
|
-
}
|
|
87
|
-
_interpolateDescription(e) {
|
|
88
|
-
return e.description ? e.descriptionMetadata ? e.description.replaceAll(/\{\{(\w+)\}\}/g, (t, n) => {
|
|
89
|
-
let r = e.descriptionMetadata?.[n];
|
|
90
|
-
return r == null ? `{{${n}}}` : Array.isArray(r) ? r.map((e) => typeof e == "object" && e ? this._resolveLocalizedString(e) : String(e)).join(", ") : typeof r == "object" ? this._resolveLocalizedString(r) : String(r);
|
|
91
|
-
}) : e.description : "";
|
|
92
|
-
}
|
|
93
|
-
_toggleNodeExpansion(e) {
|
|
94
|
-
this._expandedNodes.has(e) ? (this._expandedNodes.delete(e), this._manuallyExpandedNodes.delete(e), this.dispatchEvent(new CustomEvent("luzmo-step-collapsed", {
|
|
95
|
-
bubbles: !0,
|
|
96
|
-
composed: !0,
|
|
97
|
-
detail: { nodeId: e }
|
|
98
|
-
}))) : (this._expandedNodes.add(e), this._manuallyExpandedNodes.add(e), this.dispatchEvent(new CustomEvent("luzmo-step-expanded", {
|
|
99
|
-
bubbles: !0,
|
|
100
|
-
composed: !0,
|
|
101
|
-
detail: { nodeId: e }
|
|
102
|
-
}))), this.requestUpdate();
|
|
103
|
-
}
|
|
104
|
-
_isNodeExpanded(e) {
|
|
105
|
-
return this._expandedNodes.has(e);
|
|
106
|
-
}
|
|
107
|
-
_renderStepIcon(e) {
|
|
108
|
-
let t;
|
|
109
|
-
switch (e) {
|
|
110
|
-
case "in-progress":
|
|
111
|
-
t = this.labels.stepInProgress;
|
|
112
|
-
break;
|
|
113
|
-
case "pending":
|
|
114
|
-
t = this.labels.stepPending;
|
|
115
|
-
break;
|
|
116
|
-
case "completed":
|
|
117
|
-
t = this.labels.stepCompleted;
|
|
118
|
-
break;
|
|
119
|
-
case "error":
|
|
120
|
-
t = this.labels.stepFailed;
|
|
121
|
-
break;
|
|
122
|
-
default: t = this.labels.stepPending;
|
|
123
|
-
}
|
|
124
|
-
if (e === "in-progress") return r`
|
|
125
|
-
<div
|
|
126
|
-
class="step-icon step-icon-in-progress"
|
|
127
|
-
aria-label=${t}
|
|
128
|
-
role="img"
|
|
129
|
-
>
|
|
130
|
-
<div class="step-dot"></div>
|
|
131
|
-
</div>
|
|
132
|
-
`;
|
|
133
|
-
let n;
|
|
134
|
-
switch (e) {
|
|
135
|
-
case "pending":
|
|
136
|
-
n = d;
|
|
137
|
-
break;
|
|
138
|
-
case "completed":
|
|
139
|
-
n = u;
|
|
140
|
-
break;
|
|
141
|
-
case "error":
|
|
142
|
-
n = f;
|
|
143
|
-
break;
|
|
144
|
-
default: n = d;
|
|
145
|
-
}
|
|
146
|
-
return r`
|
|
147
|
-
<div
|
|
148
|
-
class="step-icon step-icon-${e}"
|
|
149
|
-
aria-label=${t}
|
|
150
|
-
role="img"
|
|
151
|
-
>
|
|
152
|
-
${p(n)}
|
|
153
|
-
</div>
|
|
154
|
-
`;
|
|
155
|
-
}
|
|
156
|
-
_renderChevron(e, t) {
|
|
157
|
-
return r`<div class="step-chevron ${t ? "" : "hidden"}">
|
|
158
|
-
${p(e ? l : c)}
|
|
159
|
-
</div>`;
|
|
160
|
-
}
|
|
161
|
-
_renderSubsteps(e) {
|
|
162
|
-
let t = e.length - 1;
|
|
163
|
-
return e.map((e, n) => this._renderSubstep(e, n === 0, n === t));
|
|
164
|
-
}
|
|
165
|
-
_renderSubstep(e, t, n) {
|
|
166
|
-
let i = this._mapStatus(e.status), a = this._interpolateDescription(e), o = ["substep"];
|
|
167
|
-
return t && o.push("is-first"), n && o.push("is-last"), r`
|
|
168
|
-
<div class=${o.join(" ")}>
|
|
169
|
-
<div class="substep-bullet substep-bullet-${i}"></div>
|
|
170
|
-
<div class="substep-text substep-text-${i}">${a}</div>
|
|
171
|
-
</div>
|
|
172
|
-
`;
|
|
173
|
-
}
|
|
174
|
-
_renderStep(e) {
|
|
175
|
-
let t = this._mapStatus(e.status), n = this.displayMode === "compact", a = this._interpolateDescription(e) || e.step, o = !n && e.children && e.children.length > 0, s = this._isNodeExpanded(e.id), c = `substeps-${e.id}`;
|
|
176
|
-
return r`
|
|
177
|
-
<div class="step">
|
|
178
|
-
<div
|
|
179
|
-
class="step-header ${o ? "has-substeps" : ""}"
|
|
180
|
-
role=${o ? "button" : "status"}
|
|
181
|
-
aria-expanded=${o ? s : i}
|
|
182
|
-
aria-controls=${o ? c : i}
|
|
183
|
-
tabindex=${o ? 0 : i}
|
|
184
|
-
@click=${o ? () => this._toggleNodeExpansion(e.id) : i}
|
|
185
|
-
@keydown=${o ? (t) => {
|
|
186
|
-
(t.key === "Enter" || t.key === " ") && (t.preventDefault(), this._toggleNodeExpansion(e.id));
|
|
187
|
-
} : i}
|
|
188
|
-
>
|
|
189
|
-
${this._renderStepIcon(t)}
|
|
190
|
-
<div class="step-content">
|
|
191
|
-
<div class="step-name">${a}</div>
|
|
192
|
-
${n ? i : this._renderChevron(s, !!o)}
|
|
193
|
-
</div>
|
|
194
|
-
</div>
|
|
195
|
-
${o ? r`
|
|
196
|
-
<div
|
|
197
|
-
id=${c}
|
|
198
|
-
class="substeps-container ${s ? "expanded" : ""}"
|
|
199
|
-
>
|
|
200
|
-
<div class="substeps">
|
|
201
|
-
${this._renderSubsteps(e.children ?? [])}
|
|
202
|
-
</div>
|
|
203
|
-
</div>
|
|
204
|
-
` : i}
|
|
205
|
-
</div>
|
|
206
|
-
`;
|
|
207
|
-
}
|
|
208
|
-
_toggleCondensed() {
|
|
209
|
-
this._condensedExpanded = !this._condensedExpanded, this.requestUpdate();
|
|
210
|
-
}
|
|
211
|
-
_handleCondensedKeydown(e) {
|
|
212
|
-
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._toggleCondensed());
|
|
213
|
-
}
|
|
214
|
-
_renderCondensed() {
|
|
215
|
-
let e = this.progress?.children?.filter((e) => e.status === "success").length ?? 0, t = (e === 1 ? this.labels.condensedSingular : this.labels.condensedPlural).replace("{{count}}", String(e));
|
|
216
|
-
return r`
|
|
217
|
-
<div class="condensed-container">
|
|
218
|
-
<div
|
|
219
|
-
class="condensed-toggle"
|
|
220
|
-
role="button"
|
|
221
|
-
tabindex="0"
|
|
222
|
-
aria-expanded=${this._condensedExpanded}
|
|
223
|
-
@click=${this._toggleCondensed}
|
|
224
|
-
@keydown=${this._handleCondensedKeydown}
|
|
225
|
-
>
|
|
226
|
-
<span class="condensed-toggle-text">${t}</span>
|
|
227
|
-
<span
|
|
228
|
-
class="condensed-toggle-chevron ${this._condensedExpanded ? "expanded" : ""}"
|
|
229
|
-
>
|
|
230
|
-
${p(c)}
|
|
231
|
-
</span>
|
|
232
|
-
</div>
|
|
233
|
-
${this._condensedExpanded ? r`<div class="condensed-steps">${this._renderSteps()}</div>` : i}
|
|
234
|
-
</div>
|
|
235
|
-
`;
|
|
236
|
-
}
|
|
237
|
-
_renderSteps() {
|
|
238
|
-
return (this.progress?.children ?? []).map((e) => this._renderStep(e));
|
|
239
|
-
}
|
|
240
|
-
render() {
|
|
241
|
-
return this.condensed ? r`
|
|
242
|
-
<div class="progress-steps-container" role="status" aria-live="polite">
|
|
243
|
-
${this._renderCondensed()}
|
|
244
|
-
</div>
|
|
245
|
-
` : r`
|
|
246
|
-
<div class="progress-steps-container" role="status" aria-live="polite">
|
|
247
|
-
${this._renderSteps()}
|
|
248
|
-
</div>
|
|
249
|
-
`;
|
|
250
|
-
}
|
|
251
|
-
};
|
|
252
|
-
//#endregion
|
|
253
|
-
//#region src/components/progress-steps/index.ts
|
|
254
|
-
t([o({ type: Object })], g.prototype, "progress", void 0), t([o({ type: String })], g.prototype, "locale", void 0), t([o({ type: Boolean })], g.prototype, "collapsed", void 0), t([o({
|
|
255
|
-
type: String,
|
|
256
|
-
attribute: "display-mode"
|
|
257
|
-
})], g.prototype, "displayMode", void 0), t([o({ type: Boolean })], g.prototype, "condensed", void 0), t([o({ type: Object })], g.prototype, "labels", void 0), t([o({
|
|
258
|
-
type: Boolean,
|
|
259
|
-
attribute: "no-animate",
|
|
260
|
-
reflect: !0
|
|
261
|
-
})], g.prototype, "noAnimate", void 0), t([s()], g.prototype, "_condensedExpanded", void 0), t([s()], g.prototype, "_expandedNodes", void 0), t([s()], g.prototype, "_autoExpandedNodes", void 0), t([s()], g.prototype, "_manuallyExpandedNodes", void 0), customElements.get("luzmo-progress-steps") || customElements.define("luzmo-progress-steps", g);
|
|
262
|
-
//#endregion
|
|
263
|
-
export { g as t };
|