@hestia-earth/ui-components 0.42.22 → 0.42.23

package/fesm2022/hestia-earth-ui-components.mjs

@@ -2773,14 +2773,18 @@ var StepStatus;
     StepStatus[StepStatus["next"] = 2] = "next";
     StepStatus[StepStatus["error"] = 3] = "error";
 })(StepStatus || (StepStatus = {}));
-const getStepStatus = (index, statusIndex, success, processing) => index < statusIndex
+const getStepStatus = (index, statusIndex, success, processing, 
+// marks the current step as actively in progress (driven by the `inProgressStatus` input)
+inProgress = false) => index < statusIndex
     ? StepStatus.previous
     : index === statusIndex
-        ? success
-            ? processing
-                ? StepStatus.current
-                : StepStatus.next
-            : StepStatus.error
+        ? inProgress
+            ? StepStatus.current
+            : success
+                ? processing
+                    ? StepStatus.current
+                    : StepStatus.next
+                : StepStatus.error
         : StepStatus.next;
 const getStageStatus = (statuses) => statuses.every(status => status === StepStatus.previous)
     ? 'success'
@@ -3151,6 +3155,12 @@ class PipelineStagesProgressComponent {
          * Is the current status in progress?
          */
         this.processing = input(false, ...(ngDevMode ? [{ debugName: "processing" }] : []));
+        /**
+         * Optional status that is actively in progress. When set, that step is rendered as the current step
+         * (spinner), the steps before it as completed and the steps after it as pending. This is opt-in and
+         * takes precedence over `status`; leave it unset to keep the default `status`/`processing` behavior.
+         */
+        this.inProgressStatus = input(...(ngDevMode ? [undefined, { debugName: "inProgressStatus" }] : []));
         /**
          * List of statuses, without the `Done` or `Error` suffix.
          */
@@ -3176,8 +3186,16 @@ class PipelineStagesProgressComponent {
         this.successes = computed(() => this.statuses().map(status => `${status}Done`), ...(ngDevMode ? [{ debugName: "successes" }] : []));
         this.errors = computed(() => this.statuses().map(status => `${status}Error`), ...(ngDevMode ? [{ debugName: "errors" }] : []));
         this.success = computed(() => this.successes().includes(this.status()), ...(ngDevMode ? [{ debugName: "success" }] : []));
+        this.inProgressIndex = computed(() => {
+            const status = this.inProgressStatus();
+            return status ? this.statuses().indexOf(status) : -1;
+        }, ...(ngDevMode ? [{ debugName: "inProgressIndex" }] : []));
+        this.inProgress = computed(() => this.inProgressIndex() >= 0, ...(ngDevMode ? [{ debugName: "inProgress" }] : []));
         this.statusGroups = computed(() => unique(Object.values(this.statusToGroupMap() ?? {})), ...(ngDevMode ? [{ debugName: "statusGroups" }] : []));
         this.statusIndex = computed(() => {
+            if (this.inProgress()) {
+                return this.inProgressIndex();
+            }
             const indexSuccess = this.successes().indexOf(this.status());
             const indexError = this.errors().indexOf(this.status());
             return indexError >= 0 ? indexError : indexSuccess + (this.success() ? 1 : 0);
@@ -3185,7 +3203,7 @@ class PipelineStagesProgressComponent {
         this.statusesWithStepStatus = computed(() => this.statuses().map((status, index) => ({
             status,
             group: this.statusToGroupMap()[status],
-            stepStatus: getStepStatus(index, this.statusIndex(), this.success(), this.processing()),
+            stepStatus: getStepStatus(index, this.statusIndex(), this.success(), this.processing(), this.inProgress()),
             duration: this.statusDurationMap()?.[status]
         })), ...(ngDevMode ? [{ debugName: "statusesWithStepStatus" }] : []));
         this.groups = computed(() => {
@@ -3203,7 +3221,12 @@ class PipelineStagesProgressComponent {
         }, ...(ngDevMode ? [{ debugName: "groups" }] : []));
         effect(() => {
             // open the status group or the first group
-            if (this.status()) {
+            const inProgressStatus = this.inProgressStatus();
+            if (inProgressStatus) {
+                // an in-progress status already points at the current step: open its group
+                this.openStatusGroup(inProgressStatus);
+            }
+            else if (this.status()) {
                 // when processing, we need to open the group of the next status
                 const statusIndex = this.statuses().indexOf(cleanStatus(this.status()));
                 const status = this.statuses()[this.processing() ? statusIndex + 1 : statusIndex];
@@ -3230,12 +3253,12 @@ class PipelineStagesProgressComponent {
         this.openedStage.set(this.openedStage() === index ? null : index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PipelineStagesProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PipelineStagesProgressComponent, isStandalone: true, selector: "he-pipeline-stages-progress", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, processing: { classPropertyName: "processing", publicName: "processing", isSignal: true, isRequired: false, transformFunction: null }, statuses: { classPropertyName: "statuses", publicName: "statuses", isSignal: true, isRequired: true, transformFunction: null }, statusToGroupMap: { classPropertyName: "statusToGroupMap", publicName: "statusToGroupMap", isSignal: true, isRequired: true, transformFunction: null }, statusToLabelMap: { classPropertyName: "statusToLabelMap", publicName: "statusToLabelMap", isSignal: true, isRequired: true, transformFunction: null }, statusGroupColorFn: { classPropertyName: "statusGroupColorFn", publicName: "statusGroupColorFn", isSignal: true, isRequired: true, transformFunction: null }, statusDurationMap: { classPropertyName: "statusDurationMap", publicName: "statusDurationMap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (group of groups(); track group.group; let index = $index, first = $first, last = $last) {\n  <div class=\"pipeline-stage-container is-centered\" [ngStyle]=\"group.palette\">\n    <div>&nbsp;</div>\n    <he-pipeline-progress-stage (click)=\"toggleOpenedStage(index)\" [processing]=\"processing()\" [group]=\"group\" />\n    <div>&nbsp;</div>\n    <he-pipeline-progress-group\n      [style.order]=\"slideDirection() === 'up' ? -99 : 99\"\n      [direction]=\"slideDirection()\"\n      [statuses]=\"group.statuses\"\n      [statusToLabelMap]=\"statusToLabelMap()\"\n      [isFirstStage]=\"first\"\n      [isLastStage]=\"last\"\n      [visible]=\"openedStage() === index\" />\n  </div>\n}\n", styles: [":host{display:grid;grid-template-columns:1fr auto auto 1fr}:host .pipeline-stage-container{grid-column:span 4;position:relative;overflow:hidden;display:grid;grid-template-columns:subgrid}he-pipeline-progress-stage{grid-column:span 2}he-pipeline-progress-group{grid-column:span 4}\n"], dependencies: [{ kind: "component", type: PipelineProgressStageComponent, selector: "he-pipeline-progress-stage", inputs: ["group", "processing"] }, { kind: "component", type: PipelineProgressGroupComponent, selector: "he-pipeline-progress-group", inputs: ["visible", "isFirstStage", "isLastStage", "stepStatus", "statuses", "direction", "statusToLabelMap"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PipelineStagesProgressComponent, isStandalone: true, selector: "he-pipeline-stages-progress", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, processing: { classPropertyName: "processing", publicName: "processing", isSignal: true, isRequired: false, transformFunction: null }, inProgressStatus: { classPropertyName: "inProgressStatus", publicName: "inProgressStatus", isSignal: true, isRequired: false, transformFunction: null }, statuses: { classPropertyName: "statuses", publicName: "statuses", isSignal: true, isRequired: true, transformFunction: null }, statusToGroupMap: { classPropertyName: "statusToGroupMap", publicName: "statusToGroupMap", isSignal: true, isRequired: true, transformFunction: null }, statusToLabelMap: { classPropertyName: "statusToLabelMap", publicName: "statusToLabelMap", isSignal: true, isRequired: true, transformFunction: null }, statusGroupColorFn: { classPropertyName: "statusGroupColorFn", publicName: "statusGroupColorFn", isSignal: true, isRequired: true, transformFunction: null }, statusDurationMap: { classPropertyName: "statusDurationMap", publicName: "statusDurationMap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (group of groups(); track group.group; let index = $index, first = $first, last = $last) {\n  <div class=\"pipeline-stage-container is-centered\" [ngStyle]=\"group.palette\">\n    <div>&nbsp;</div>\n    <he-pipeline-progress-stage (click)=\"toggleOpenedStage(index)\" [processing]=\"processing()\" [group]=\"group\" />\n    <div>&nbsp;</div>\n    <he-pipeline-progress-group\n      [style.order]=\"slideDirection() === 'up' ? -99 : 99\"\n      [direction]=\"slideDirection()\"\n      [statuses]=\"group.statuses\"\n      [statusToLabelMap]=\"statusToLabelMap()\"\n      [isFirstStage]=\"first\"\n      [isLastStage]=\"last\"\n      [visible]=\"openedStage() === index\" />\n  </div>\n}\n", styles: [":host{display:grid;grid-template-columns:1fr auto auto 1fr}:host .pipeline-stage-container{grid-column:span 4;position:relative;overflow:hidden;display:grid;grid-template-columns:subgrid}he-pipeline-progress-stage{grid-column:span 2}he-pipeline-progress-group{grid-column:span 4}\n"], dependencies: [{ kind: "component", type: PipelineProgressStageComponent, selector: "he-pipeline-progress-stage", inputs: ["group", "processing"] }, { kind: "component", type: PipelineProgressGroupComponent, selector: "he-pipeline-progress-group", inputs: ["visible", "isFirstStage", "isLastStage", "stepStatus", "statuses", "direction", "statusToLabelMap"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PipelineStagesProgressComponent, decorators: [{
             type: Component$1,
             args: [{ selector: 'he-pipeline-stages-progress', changeDetection: ChangeDetectionStrategy.OnPush, imports: [PipelineProgressStageComponent, PipelineProgressGroupComponent, NgStyle], template: "@for (group of groups(); track group.group; let index = $index, first = $first, last = $last) {\n  <div class=\"pipeline-stage-container is-centered\" [ngStyle]=\"group.palette\">\n    <div>&nbsp;</div>\n    <he-pipeline-progress-stage (click)=\"toggleOpenedStage(index)\" [processing]=\"processing()\" [group]=\"group\" />\n    <div>&nbsp;</div>\n    <he-pipeline-progress-group\n      [style.order]=\"slideDirection() === 'up' ? -99 : 99\"\n      [direction]=\"slideDirection()\"\n      [statuses]=\"group.statuses\"\n      [statusToLabelMap]=\"statusToLabelMap()\"\n      [isFirstStage]=\"first\"\n      [isLastStage]=\"last\"\n      [visible]=\"openedStage() === index\" />\n  </div>\n}\n", styles: [":host{display:grid;grid-template-columns:1fr auto auto 1fr}:host .pipeline-stage-container{grid-column:span 4;position:relative;overflow:hidden;display:grid;grid-template-columns:subgrid}he-pipeline-progress-stage{grid-column:span 2}he-pipeline-progress-group{grid-column:span 4}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], processing: [{ type: i0.Input, args: [{ isSignal: true, alias: "processing", required: false }] }], statuses: [{ type: i0.Input, args: [{ isSignal: true, alias: "statuses", required: true }] }], statusToGroupMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusToGroupMap", required: true }] }], statusToLabelMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusToLabelMap", required: true }] }], statusGroupColorFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusGroupColorFn", required: true }] }], statusDurationMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusDurationMap", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], processing: [{ type: i0.Input, args: [{ isSignal: true, alias: "processing", required: false }] }], inProgressStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "inProgressStatus", required: false }] }], statuses: [{ type: i0.Input, args: [{ isSignal: true, alias: "statuses", required: true }] }], statusToGroupMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusToGroupMap", required: true }] }], statusToLabelMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusToLabelMap", required: true }] }], statusGroupColorFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusGroupColorFn", required: true }] }], statusDurationMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusDurationMap", required: false }] }] } });
 
 class PopoverComponent {
     constructor() {