@hestia-earth/ui-components 0.42.23 → 0.42.24

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

@@ -2773,18 +2773,17 @@ var StepStatus;
     StepStatus[StepStatus["next"] = 2] = "next";
     StepStatus[StepStatus["error"] = 3] = "error";
 })(StepStatus || (StepStatus = {}));
-const getStepStatus = (index, statusIndex, success, processing, 
-// marks the current step as actively in progress (driven by the `inProgressStatus` input)
-inProgress = false) => index < statusIndex
+// status of the step the pipeline is currently on (`index === statusIndex`).
+// `inProgress` (driven by the `inProgressStatus` input) marks the step as actively in progress
+const getCurrentStepStatus = (success, processing, inProgress) => inProgress || (success && processing)
+    ? StepStatus.current
+    : success
+        ? StepStatus.next
+        : StepStatus.error;
+const getStepStatus = (index, statusIndex, success, processing, inProgress = false) => index < statusIndex
     ? StepStatus.previous
     : index === statusIndex
-        ? inProgress
-            ? StepStatus.current
-            : success
-                ? processing
-                    ? StepStatus.current
-                    : StepStatus.next
-                : StepStatus.error
+        ? getCurrentStepStatus(success, processing, inProgress)
         : StepStatus.next;
 const getStageStatus = (statuses) => statuses.every(status => status === StepStatus.previous)
     ? 'success'
@@ -3091,7 +3090,7 @@ class PipelineProgressItemComponent {
         this.isSuccess = computed(() => this.timelineStatus() === 'success', ...(ngDevMode ? [{ debugName: "isSuccess" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PipelineProgressItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PipelineProgressItemComponent, isStandalone: true, selector: "he-pipeline-progress-item", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, showStatus: { classPropertyName: "showStatus", publicName: "showStatus", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, statusToLabelMap: { classPropertyName: "statusToLabelMap", publicName: "statusToLabelMap", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.timeline-status": "timelineStatus()", "attr.timeline-position": "position()" }, classAttribute: "is-flex is-align-items-center timeline-item" }, ngImport: i0, template: "@if (status(); as stat) {\n  <he-pipeline-progress-status class=\"mr-2\" [status]=\"timelineStatus()\" size=\"small\" />\n\n  <div class=\"is-size-7\" [style.opacity]=\"showStatus() ? 1 : 0\">\n    <p class=\"status-label\">\n      {{ statusToLabelMap()[stat.status] }}\n    </p>\n\n    <p class=\"has-text-grey-lighter\">\n      @if (stat.duration > 0) {\n        {{ stat.duration | pipelineDuration }}\n      } @else if (isSuccess()) {\n        <span>&nbsp;</span>\n      }\n    </p>\n  </div>\n}\n", styles: [":root{--pipeline-progress-item-background: #249da5;--pipeline-progress-item-border-color: #e1eded}:host{position:relative;line-height:1.1;z-index:1}:host:before{content:\"\";position:absolute;top:0;left:2px;width:14px;height:100%;border:0 solid;border-left-width:6px!important;border-right-width:6px!important;z-index:-1;background-color:var(--pipeline-progress-item-background);border-color:var(--pipeline-progress-item-border-color)}:host[timeline-position=top]:before{bottom:0;top:auto;height:50%}:host[timeline-position=bottom]:before{height:50%}:host[timeline-status=error] .status-label{color:#ff3844}:host[timeline-status=pending] .status-label{color:#b5b5b5}:host[timeline-status=none] .status-label{color:#b5b5b5}:host>*{transition:opacity .3s}\n"], dependencies: [{ kind: "component", type: PipelineProgressStatusComponent, selector: "he-pipeline-progress-status", inputs: ["status", "size"] }, { kind: "pipe", type: PipelineDurationPipe, name: "pipelineDuration" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PipelineProgressItemComponent, isStandalone: true, selector: "he-pipeline-progress-item", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, showStatus: { classPropertyName: "showStatus", publicName: "showStatus", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, statusToLabelMap: { classPropertyName: "statusToLabelMap", publicName: "statusToLabelMap", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.timeline-status": "timelineStatus()", "attr.timeline-position": "position()" }, classAttribute: "is-flex is-align-items-center timeline-item" }, ngImport: i0, template: "@if (status(); as stat) {\n  <he-pipeline-progress-status class=\"mr-2\" [status]=\"timelineStatus()\" size=\"small\" />\n\n  <div class=\"is-size-7\" [style.opacity]=\"showStatus() ? 1 : 0\">\n    <p class=\"status-label\">\n      {{ statusToLabelMap()[stat.status] }}\n    </p>\n\n    <p class=\"has-text-grey-lighter | step-subtitle\" [title]=\"stat.subtitle || null\">\n      @if (stat.subtitle) {\n        {{ stat.subtitle }}\n      } @else if (stat.duration > 0) {\n        {{ stat.duration | pipelineDuration }}\n      } @else if (isSuccess()) {\n        <span>&nbsp;</span>\n      }\n    </p>\n  </div>\n}\n", styles: [":root{--pipeline-progress-item-background: #249da5;--pipeline-progress-item-border-color: #e1eded}:host{position:relative;line-height:1.1;z-index:1}:host .step-subtitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host:before{content:\"\";position:absolute;top:0;left:2px;width:14px;height:100%;border:0 solid;border-left-width:6px!important;border-right-width:6px!important;z-index:-1;background-color:var(--pipeline-progress-item-background);border-color:var(--pipeline-progress-item-border-color)}:host[timeline-position=top]:before{bottom:0;top:auto;height:50%}:host[timeline-position=bottom]:before{height:50%}:host[timeline-status=error] .status-label{color:#ff3844}:host[timeline-status=pending] .status-label{color:#b5b5b5}:host[timeline-status=none] .status-label{color:#b5b5b5}:host>*{transition:opacity .3s}\n"], dependencies: [{ kind: "component", type: PipelineProgressStatusComponent, selector: "he-pipeline-progress-status", inputs: ["status", "size"] }, { kind: "pipe", type: PipelineDurationPipe, name: "pipelineDuration" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PipelineProgressItemComponent, decorators: [{
             type: Component$1,
@@ -3099,7 +3098,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         class: 'is-flex is-align-items-center timeline-item',
                         '[attr.timeline-status]': 'timelineStatus()',
                         '[attr.timeline-position]': 'position()'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (status(); as stat) {\n  <he-pipeline-progress-status class=\"mr-2\" [status]=\"timelineStatus()\" size=\"small\" />\n\n  <div class=\"is-size-7\" [style.opacity]=\"showStatus() ? 1 : 0\">\n    <p class=\"status-label\">\n      {{ statusToLabelMap()[stat.status] }}\n    </p>\n\n    <p class=\"has-text-grey-lighter\">\n      @if (stat.duration > 0) {\n        {{ stat.duration | pipelineDuration }}\n      } @else if (isSuccess()) {\n        <span>&nbsp;</span>\n      }\n    </p>\n  </div>\n}\n", styles: [":root{--pipeline-progress-item-background: #249da5;--pipeline-progress-item-border-color: #e1eded}:host{position:relative;line-height:1.1;z-index:1}:host:before{content:\"\";position:absolute;top:0;left:2px;width:14px;height:100%;border:0 solid;border-left-width:6px!important;border-right-width:6px!important;z-index:-1;background-color:var(--pipeline-progress-item-background);border-color:var(--pipeline-progress-item-border-color)}:host[timeline-position=top]:before{bottom:0;top:auto;height:50%}:host[timeline-position=bottom]:before{height:50%}:host[timeline-status=error] .status-label{color:#ff3844}:host[timeline-status=pending] .status-label{color:#b5b5b5}:host[timeline-status=none] .status-label{color:#b5b5b5}:host>*{transition:opacity .3s}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (status(); as stat) {\n  <he-pipeline-progress-status class=\"mr-2\" [status]=\"timelineStatus()\" size=\"small\" />\n\n  <div class=\"is-size-7\" [style.opacity]=\"showStatus() ? 1 : 0\">\n    <p class=\"status-label\">\n      {{ statusToLabelMap()[stat.status] }}\n    </p>\n\n    <p class=\"has-text-grey-lighter | step-subtitle\" [title]=\"stat.subtitle || null\">\n      @if (stat.subtitle) {\n        {{ stat.subtitle }}\n      } @else if (stat.duration > 0) {\n        {{ stat.duration | pipelineDuration }}\n      } @else if (isSuccess()) {\n        <span>&nbsp;</span>\n      }\n    </p>\n  </div>\n}\n", styles: [":root{--pipeline-progress-item-background: #249da5;--pipeline-progress-item-border-color: #e1eded}:host{position:relative;line-height:1.1;z-index:1}:host .step-subtitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host:before{content:\"\";position:absolute;top:0;left:2px;width:14px;height:100%;border:0 solid;border-left-width:6px!important;border-right-width:6px!important;z-index:-1;background-color:var(--pipeline-progress-item-background);border-color:var(--pipeline-progress-item-border-color)}:host[timeline-position=top]:before{bottom:0;top:auto;height:50%}:host[timeline-position=bottom]:before{height:50%}:host[timeline-status=error] .status-label{color:#ff3844}:host[timeline-status=pending] .status-label{color:#b5b5b5}:host[timeline-status=none] .status-label{color:#b5b5b5}:host>*{transition:opacity .3s}\n"] }]
         }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], showStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStatus", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], statusToLabelMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusToLabelMap", required: true }] }] } });
 
 const PIPELINE_PROGRESS_ITEM_HEIGHT = 50;
@@ -3181,6 +3180,10 @@ class PipelineStagesProgressComponent {
          * Duration per status, in milliseconds.
          */
         this.statusDurationMap = input(...(ngDevMode ? [undefined, { debugName: "statusDurationMap" }] : []));
+        /**
+         * Optional subtitle rendered under each step label (e.g. the provider/model used for that step).
+         */
+        this.statusSubtitleMap = input(...(ngDevMode ? [undefined, { debugName: "statusSubtitleMap" }] : []));
         this.openedStage = signal(null, ...(ngDevMode ? [{ debugName: "openedStage" }] : []));
         this.slideDirection = signal('up', ...(ngDevMode ? [{ debugName: "slideDirection" }] : []));
         this.successes = computed(() => this.statuses().map(status => `${status}Done`), ...(ngDevMode ? [{ debugName: "successes" }] : []));
@@ -3204,7 +3207,8 @@ class PipelineStagesProgressComponent {
             status,
             group: this.statusToGroupMap()[status],
             stepStatus: getStepStatus(index, this.statusIndex(), this.success(), this.processing(), this.inProgress()),
-            duration: this.statusDurationMap()?.[status]
+            duration: this.statusDurationMap()?.[status],
+            subtitle: this.statusSubtitleMap()?.[status]
         })), ...(ngDevMode ? [{ debugName: "statusesWithStepStatus" }] : []));
         this.groups = computed(() => {
             const statusesWithStepStatus = this.statusesWithStepStatus();
@@ -3253,12 +3257,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 }, 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 }); }
+    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 }, statusSubtitleMap: { classPropertyName: "statusSubtitleMap", publicName: "statusSubtitleMap", 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 }] }], 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 }] }] } });
+        }], 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 }] }], statusSubtitleMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusSubtitleMap", required: false }] }] } });
 
 class PopoverComponent {
     constructor() {