@hestia-earth/ui-components 0.42.22 → 0.42.24

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

@@ -2773,14 +2773,17 @@ var StepStatus;
     StepStatus[StepStatus["next"] = 2] = "next";
     StepStatus[StepStatus["error"] = 3] = "error";
 })(StepStatus || (StepStatus = {}));
-const getStepStatus = (index, statusIndex, success, processing) => 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
-        ? success
-            ? processing
-                ? StepStatus.current
-                : StepStatus.next
-            : StepStatus.error
+        ? getCurrentStepStatus(success, processing, inProgress)
         : StepStatus.next;
 const getStageStatus = (statuses) => statuses.every(status => status === StepStatus.previous)
     ? 'success'
@@ -3087,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,
@@ -3095,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;
@@ -3151,6 +3154,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.
          */
@@ -3171,13 +3180,25 @@ 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" }] : []));
         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,8 +3206,9 @@ class PipelineStagesProgressComponent {
         this.statusesWithStepStatus = computed(() => this.statuses().map((status, index) => ({
             status,
             group: this.statusToGroupMap()[status],
-            stepStatus: getStepStatus(index, this.statusIndex(), this.success(), this.processing()),
-            duration: this.statusDurationMap()?.[status]
+            stepStatus: getStepStatus(index, this.statusIndex(), this.success(), this.processing(), this.inProgress()),
+            duration: this.statusDurationMap()?.[status],
+            subtitle: this.statusSubtitleMap()?.[status]
         })), ...(ngDevMode ? [{ debugName: "statusesWithStepStatus" }] : []));
         this.groups = computed(() => {
             const statusesWithStepStatus = this.statusesWithStepStatus();
@@ -3203,7 +3225,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 +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 }, 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 }] }], 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() {