@hestia-earth/ui-components 0.40.4 → 0.40.5

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

@@ -9970,21 +9970,21 @@ class EngineModelsStageDeepComponent {
         this.service.focusedNode.set(node);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EngineModelsStageDeepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: EngineModelsStageDeepComponent, isStandalone: true, selector: "he-engine-models-stage-deep", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, expandedNode: { classPropertyName: "expandedNode", publicName: "expandedNode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, ngImport: i0, template: "@if (expandedNode()) {\n  <svg\n    class=\"is-absolute | related-node-icon\"\n    [class.has-errors]=\"hasError()\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"15\"\n    height=\"81\"\n    viewBox=\"0 0 15 81\"\n    fill=\"none\">\n    <path d=\"M0.5 0V71C0.5 75.9706 4.52944 80 9.5 80H14.5\" stroke=\"#B5B5B5\" />\n  </svg>\n}\n\n<div class=\"is-flex is-flex-direction-column is-gap-8\">\n  <div class=\"is-flex is-flex-direction-column is-justify-content-center is-align-items-center\">\n    <div\n      class=\"is-flex is-align-items-flex-start is-align-self-stretch is-justify-content-space-between is-gap-8 is-p-1 | engine-models-stage--container is-type-{{\n        type()\n      }}\"\n      [class.has-errors]=\"hasError()\">\n      <div class=\"is-flex is-flex-direction-column is-justify-content-center is-align-items-center is-gap-4\">\n        <div class=\"is-flex is-align-items-center is-gap-4\">\n          <he-node-icon [type]=\"type()\" size=\"20\" />\n          <span>{{ type() }}</span>\n        </div>\n\n        <div class=\"is-flex is-align-items-center is-gap-4 is-align-self-stretch\">\n          <span class=\"is-size-7\">ID:</span>\n          <he-node-link [node]=\"node()\">\n            <span class=\"has-text-link is-size-7\">{{ id() }}</span>\n          </he-node-link>\n        </div>\n      </div>\n\n      <div class=\"divider\"></div>\n\n      <div class=\"is-flex is-flex-direction-column is-justify-content-center is-align-items-center is-gap-4\">\n        <span>\n          @if (inProgress()) {\n            <he-svg-icon name=\"loading-circle-filled\" size=\"24\" animation=\"spin\" class=\"has-text-info\" />\n          } @else if (recalculatedAt()) {\n            <he-svg-icon name=\"checkmark-circle-filled\" size=\"24\" class=\"has-text-success\" />\n          } @else {\n            <he-svg-icon name=\"exclamation-triangle-filled\" size=\"24\" class=\"has-text-danger\" />\n          }\n        </span>\n        <span class=\"is-size-7\">\n          @if (inProgress()) {\n            stage {{ stage() }} / {{ maxStage() }}\n          } @else if (recalculatedAt()) {\n            <span\n              class=\"trigger-popover\"\n              [ngbPopover]=\"popoverDetails\"\n              autoClose=\"outside\"\n              popoverClass=\"is-narrow\"\n              placement=\"left auto\"\n              container=\"body\">\n              <span>Complete</span>\n            </span>\n          } @else {\n            Failed\n          }\n        </span>\n      </div>\n\n      @if (canExpand()) {\n        <a (click)=\"expanded.set(!expanded())\" class=\"has-text-secondary\">\n          <he-svg-icon [name]=\"expanded() ? 'chevron-up' : 'chevron-down'\" />\n        </a>\n      }\n    </div>\n\n    @if (hasError()) {\n      <div\n        class=\"is-flex is-justify-content-center is-align-items-center is-gap-4 is-align-self-stretch is-pl-1 is-pr-2 is-py-2 | error-container is-type-{{\n          type()\n        }}\">\n        <div class=\"is-flex-grow-1 is-gap-4\">\n          <he-svg-icon name=\"exclamation-triangle-filled\" size=\"20\" class=\"has-text-danger\" />\n          <span class=\"is-size-7 has-text-weight-semibold\">Validation Error</span>\n        </div>\n\n        <button class=\"button is-primary is-light is-small\" (click)=\"openError(node())\">View</button>\n      </div>\n    }\n  </div>\n\n  @if (expanded()) {\n    @if (loading() && nodesLength() > 0) {\n      @for (node of nodesLength() | times; track $index) {\n        <he-skeleton-text [width]=\"60\" />\n      }\n    }\n\n    <div class=\"is-flex is-flex-direction-column is-gap-8 is-overflow-hidden\">\n      @for (relatedNode of expandableNodes(); track trackNode(relatedNode)) {\n        <div class=\"is-relative is-pl-4\">\n          <he-engine-models-stage-deep\n            class=\"is-flex-grow-1\"\n            [node]=\"relatedNode\"\n            [expanded]=\"false\"\n            [expandedNode]=\"expandedNode() || node()\" />\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<ng-template #popoverDetails>\n  <div class=\"is-flex is-flex-direction-column is-gap-4 has-text-white w-100\">\n    <div class=\"is-flex is-align-items-center is-gap-8 w-100\">\n      <span class=\"has-text-weight-bold\">Calculated Date:</span>\n      <span>{{ recalculatedAt() | date: (recalculatedAt().length === 10 ? 'mediumDate' : 'medium') }}</span>\n    </div>\n    <div class=\"is-flex is-align-items-center is-gap-8 w-100\">\n      <span class=\"has-text-weight-bold\">Calculated Version:</span>\n      <he-engine-models-version-link [node]=\"node()\" />\n    </div>\n  </div>\n</ng-template>\n", styles: [".engine-models-stage--container{border:1px solid transparent;border-radius:6px}.engine-models-stage--container.has-errors{border-bottom-left-radius:0;border-bottom-right-radius:0}.divider{border-left:1px solid #4c7194;height:52px}.is-type-Cycle{border:1px solid #4c7194}.is-type-Site{border:1px solid #349b3e}.is-type-ImpactAssessment{border:1px solid #b4a988}.is-type-Source{border:1px solid #f5f5f5}.is-type-Cycle{background-color:#ecf1ff}.is-type-Site{background-color:#d5f3d8}.is-type-ImpactAssessment{background-color:#e7e0cb}.is-type-Source{background-color:#f5f5f5}.error-container{background-color:#fefaef;border-bottom-left-radius:6px;border-bottom-right-radius:6px;border-top:0}.related-node-icon{top:-49px;left:8px}.related-node-icon.has-errors{top:-19px}\n"], dependencies: [{ kind: "component", type: EngineModelsStageDeepComponent, selector: "he-engine-models-stage-deep", inputs: ["node", "expanded", "expandedNode"], outputs: ["expandedChange"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: NgbPopoverModule }, { kind: "directive", type: i1$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "component", type: EngineModelsVersionLinkComponent, selector: "he-engine-models-version-link", inputs: ["node"] }, { kind: "component", type: SkeletonTextComponent, selector: "he-skeleton-text", inputs: ["animated", "width", "height"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TimesPipe, name: "times" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: EngineModelsStageDeepComponent, isStandalone: true, selector: "he-engine-models-stage-deep", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, expandedNode: { classPropertyName: "expandedNode", publicName: "expandedNode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, ngImport: i0, template: "<div class=\"is-flex is-flex-direction-column is-gap-8\">\n  <div class=\"is-flex is-flex-direction-column is-justify-content-center is-align-items-center\">\n    <div\n      class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch is-justify-content-space-between is-gap-4 is-radius-3 | is-type-{{\n        type()\n      }}-border\">\n      <div\n        class=\"is-flex is-flex-direction-column is-justify-content-center is-align-items-self-start is-align-self-stretch is-px-1 | is-type-{{\n          type()\n        }}-background\">\n        <span>{{ type() | keyToLabel }}</span>\n\n        <div class=\"is-flex is-align-items-center is-align-self-stretch is-gap-4\">\n          <span class=\"is-size-7\">ID:</span>\n          <he-node-link [node]=\"node()\">\n            <span class=\"has-text-link is-size-7\">{{ id() }}</span>\n          </he-node-link>\n        </div>\n      </div>\n\n      <div class=\"is-px-1 is-pb-1 w-100\">\n        @if (hasError()) {\n          <div class=\"is-flex is-align-items-center is-align-self-stretch is-gap-4\">\n            <he-svg-icon name=\"exclamation-triangle-filled\" size=\"24\" class=\"has-text-danger\" />\n\n            <span class=\"is-size-7 is-flex-grow-1\">Validation Error</span>\n\n            <a class=\"has-text-secondary\" (click)=\"openError(node())\">\n              <he-svg-icon name=\"chevron-right\" />\n            </a>\n          </div>\n        }\n\n        <div\n          class=\"is-flex is-align-items-center is-align-self-stretch is-gap-4\"\n          [class.is-clickable]=\"canExpand()\"\n          (click)=\"canExpand() && expanded.set(!expanded())\">\n          @if (inProgress()) {\n            <he-svg-icon name=\"loading-circle-filled\" size=\"24\" animation=\"spin\" class=\"has-text-info\" />\n          } @else if (recalculatedAt()) {\n            <he-svg-icon name=\"checkmark-circle-filled\" size=\"24\" class=\"has-text-success\" />\n          } @else {\n            <he-svg-icon name=\"exclamation-triangle-filled\" size=\"24\" class=\"has-text-danger\" />\n          }\n\n          <span class=\"is-size-7 is-flex-grow-1\">\n            @if (inProgress()) {\n              Stage {{ stage() }} / {{ maxStage() }}\n            } @else if (recalculatedAt()) {\n              <span\n                class=\"trigger-popover\"\n                [ngbPopover]=\"popoverDetails\"\n                autoClose=\"outside\"\n                popoverClass=\"is-narrow\"\n                placement=\"left auto\"\n                container=\"body\"\n                (click)=\"$event.stopPropagation()\">\n                <span>Complete</span>\n              </span>\n            } @else {\n              Failed\n            }\n          </span>\n\n          @if (canExpand()) {\n            <he-svg-icon [name]=\"expanded() ? 'chevron-down' : 'chevron-right'\" class=\"has-text-secondary\" />\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n\n  @if (expanded()) {\n    @if (loading() && nodesLength() > 0) {\n      @for (node of nodesLength() | times; track $index) {\n        <he-skeleton-text [width]=\"60\" />\n      }\n    }\n\n    <div class=\"is-flex is-flex-direction-column is-gap-8 is-overflow-hidden is-pl-2 | related-stage\">\n      @for (relatedNode of expandableNodes(); track trackNode(relatedNode)) {\n        <he-engine-models-stage-deep\n          class=\"is-flex-grow-1\"\n          [node]=\"relatedNode\"\n          [expanded]=\"false\"\n          [expandedNode]=\"expandedNode() || node()\" />\n      }\n    </div>\n  }\n</div>\n\n<ng-template #popoverDetails>\n  <div class=\"is-flex is-flex-direction-column is-gap-4 has-text-white w-100\">\n    <div class=\"is-flex is-align-items-center is-gap-8 w-100\">\n      <span class=\"has-text-weight-bold\">Calculated Date:</span>\n      <span>{{ recalculatedAt() | date: (recalculatedAt().length === 10 ? 'mediumDate' : 'medium') }}</span>\n    </div>\n    <div class=\"is-flex is-align-items-center is-gap-8 w-100\">\n      <span class=\"has-text-weight-bold\">Calculated Version:</span>\n      <he-engine-models-version-link [node]=\"node()\" />\n    </div>\n  </div>\n</ng-template>\n", styles: [".is-type-Cycle-border{border:1px solid #ecf1ff}.is-type-Cycle-background{background-color:#ecf1ff}.is-type-Site-border{border:1px solid #d5f3d8}.is-type-Site-background{background-color:#d5f3d8}.is-type-ImpactAssessment-border{border:1px solid #e7e0cb}.is-type-ImpactAssessment-background{background-color:#e7e0cb}.is-type-Source-border{border:1px solid #f5f5f5}.is-type-Source-background{background-color:#f5f5f5}.related-stage{border-left:1px solid #4c7194}\n"], dependencies: [{ kind: "component", type: EngineModelsStageDeepComponent, selector: "he-engine-models-stage-deep", inputs: ["node", "expanded", "expandedNode"], outputs: ["expandedChange"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: NgbPopoverModule }, { kind: "directive", type: i1$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "component", type: EngineModelsVersionLinkComponent, selector: "he-engine-models-version-link", inputs: ["node"] }, { kind: "component", type: SkeletonTextComponent, selector: "he-skeleton-text", inputs: ["animated", "width", "height"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: TimesPipe, name: "times" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EngineModelsStageDeepComponent, decorators: [{
             type: Component$1,
             args: [{ selector: 'he-engine-models-stage-deep', imports: [
                         DatePipe,
+                        KeyToLabelPipe,
                         HESvgIconComponent,
                         NgbPopoverModule,
                         NgbTooltipModule,
                         EngineModelsVersionLinkComponent,
                         SkeletonTextComponent,
                         TimesPipe,
-                        NodeLinkComponent,
-                        NodeIconComponent
-                    ], template: "@if (expandedNode()) {\n  <svg\n    class=\"is-absolute | related-node-icon\"\n    [class.has-errors]=\"hasError()\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"15\"\n    height=\"81\"\n    viewBox=\"0 0 15 81\"\n    fill=\"none\">\n    <path d=\"M0.5 0V71C0.5 75.9706 4.52944 80 9.5 80H14.5\" stroke=\"#B5B5B5\" />\n  </svg>\n}\n\n<div class=\"is-flex is-flex-direction-column is-gap-8\">\n  <div class=\"is-flex is-flex-direction-column is-justify-content-center is-align-items-center\">\n    <div\n      class=\"is-flex is-align-items-flex-start is-align-self-stretch is-justify-content-space-between is-gap-8 is-p-1 | engine-models-stage--container is-type-{{\n        type()\n      }}\"\n      [class.has-errors]=\"hasError()\">\n      <div class=\"is-flex is-flex-direction-column is-justify-content-center is-align-items-center is-gap-4\">\n        <div class=\"is-flex is-align-items-center is-gap-4\">\n          <he-node-icon [type]=\"type()\" size=\"20\" />\n          <span>{{ type() }}</span>\n        </div>\n\n        <div class=\"is-flex is-align-items-center is-gap-4 is-align-self-stretch\">\n          <span class=\"is-size-7\">ID:</span>\n          <he-node-link [node]=\"node()\">\n            <span class=\"has-text-link is-size-7\">{{ id() }}</span>\n          </he-node-link>\n        </div>\n      </div>\n\n      <div class=\"divider\"></div>\n\n      <div class=\"is-flex is-flex-direction-column is-justify-content-center is-align-items-center is-gap-4\">\n        <span>\n          @if (inProgress()) {\n            <he-svg-icon name=\"loading-circle-filled\" size=\"24\" animation=\"spin\" class=\"has-text-info\" />\n          } @else if (recalculatedAt()) {\n            <he-svg-icon name=\"checkmark-circle-filled\" size=\"24\" class=\"has-text-success\" />\n          } @else {\n            <he-svg-icon name=\"exclamation-triangle-filled\" size=\"24\" class=\"has-text-danger\" />\n          }\n        </span>\n        <span class=\"is-size-7\">\n          @if (inProgress()) {\n            stage {{ stage() }} / {{ maxStage() }}\n          } @else if (recalculatedAt()) {\n            <span\n              class=\"trigger-popover\"\n              [ngbPopover]=\"popoverDetails\"\n              autoClose=\"outside\"\n              popoverClass=\"is-narrow\"\n              placement=\"left auto\"\n              container=\"body\">\n              <span>Complete</span>\n            </span>\n          } @else {\n            Failed\n          }\n        </span>\n      </div>\n\n      @if (canExpand()) {\n        <a (click)=\"expanded.set(!expanded())\" class=\"has-text-secondary\">\n          <he-svg-icon [name]=\"expanded() ? 'chevron-up' : 'chevron-down'\" />\n        </a>\n      }\n    </div>\n\n    @if (hasError()) {\n      <div\n        class=\"is-flex is-justify-content-center is-align-items-center is-gap-4 is-align-self-stretch is-pl-1 is-pr-2 is-py-2 | error-container is-type-{{\n          type()\n        }}\">\n        <div class=\"is-flex-grow-1 is-gap-4\">\n          <he-svg-icon name=\"exclamation-triangle-filled\" size=\"20\" class=\"has-text-danger\" />\n          <span class=\"is-size-7 has-text-weight-semibold\">Validation Error</span>\n        </div>\n\n        <button class=\"button is-primary is-light is-small\" (click)=\"openError(node())\">View</button>\n      </div>\n    }\n  </div>\n\n  @if (expanded()) {\n    @if (loading() && nodesLength() > 0) {\n      @for (node of nodesLength() | times; track $index) {\n        <he-skeleton-text [width]=\"60\" />\n      }\n    }\n\n    <div class=\"is-flex is-flex-direction-column is-gap-8 is-overflow-hidden\">\n      @for (relatedNode of expandableNodes(); track trackNode(relatedNode)) {\n        <div class=\"is-relative is-pl-4\">\n          <he-engine-models-stage-deep\n            class=\"is-flex-grow-1\"\n            [node]=\"relatedNode\"\n            [expanded]=\"false\"\n            [expandedNode]=\"expandedNode() || node()\" />\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<ng-template #popoverDetails>\n  <div class=\"is-flex is-flex-direction-column is-gap-4 has-text-white w-100\">\n    <div class=\"is-flex is-align-items-center is-gap-8 w-100\">\n      <span class=\"has-text-weight-bold\">Calculated Date:</span>\n      <span>{{ recalculatedAt() | date: (recalculatedAt().length === 10 ? 'mediumDate' : 'medium') }}</span>\n    </div>\n    <div class=\"is-flex is-align-items-center is-gap-8 w-100\">\n      <span class=\"has-text-weight-bold\">Calculated Version:</span>\n      <he-engine-models-version-link [node]=\"node()\" />\n    </div>\n  </div>\n</ng-template>\n", styles: [".engine-models-stage--container{border:1px solid transparent;border-radius:6px}.engine-models-stage--container.has-errors{border-bottom-left-radius:0;border-bottom-right-radius:0}.divider{border-left:1px solid #4c7194;height:52px}.is-type-Cycle{border:1px solid #4c7194}.is-type-Site{border:1px solid #349b3e}.is-type-ImpactAssessment{border:1px solid #b4a988}.is-type-Source{border:1px solid #f5f5f5}.is-type-Cycle{background-color:#ecf1ff}.is-type-Site{background-color:#d5f3d8}.is-type-ImpactAssessment{background-color:#e7e0cb}.is-type-Source{background-color:#f5f5f5}.error-container{background-color:#fefaef;border-bottom-left-radius:6px;border-bottom-right-radius:6px;border-top:0}.related-node-icon{top:-49px;left:8px}.related-node-icon.has-errors{top:-19px}\n"] }]
+                        NodeLinkComponent
+                    ], template: "<div class=\"is-flex is-flex-direction-column is-gap-8\">\n  <div class=\"is-flex is-flex-direction-column is-justify-content-center is-align-items-center\">\n    <div\n      class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch is-justify-content-space-between is-gap-4 is-radius-3 | is-type-{{\n        type()\n      }}-border\">\n      <div\n        class=\"is-flex is-flex-direction-column is-justify-content-center is-align-items-self-start is-align-self-stretch is-px-1 | is-type-{{\n          type()\n        }}-background\">\n        <span>{{ type() | keyToLabel }}</span>\n\n        <div class=\"is-flex is-align-items-center is-align-self-stretch is-gap-4\">\n          <span class=\"is-size-7\">ID:</span>\n          <he-node-link [node]=\"node()\">\n            <span class=\"has-text-link is-size-7\">{{ id() }}</span>\n          </he-node-link>\n        </div>\n      </div>\n\n      <div class=\"is-px-1 is-pb-1 w-100\">\n        @if (hasError()) {\n          <div class=\"is-flex is-align-items-center is-align-self-stretch is-gap-4\">\n            <he-svg-icon name=\"exclamation-triangle-filled\" size=\"24\" class=\"has-text-danger\" />\n\n            <span class=\"is-size-7 is-flex-grow-1\">Validation Error</span>\n\n            <a class=\"has-text-secondary\" (click)=\"openError(node())\">\n              <he-svg-icon name=\"chevron-right\" />\n            </a>\n          </div>\n        }\n\n        <div\n          class=\"is-flex is-align-items-center is-align-self-stretch is-gap-4\"\n          [class.is-clickable]=\"canExpand()\"\n          (click)=\"canExpand() && expanded.set(!expanded())\">\n          @if (inProgress()) {\n            <he-svg-icon name=\"loading-circle-filled\" size=\"24\" animation=\"spin\" class=\"has-text-info\" />\n          } @else if (recalculatedAt()) {\n            <he-svg-icon name=\"checkmark-circle-filled\" size=\"24\" class=\"has-text-success\" />\n          } @else {\n            <he-svg-icon name=\"exclamation-triangle-filled\" size=\"24\" class=\"has-text-danger\" />\n          }\n\n          <span class=\"is-size-7 is-flex-grow-1\">\n            @if (inProgress()) {\n              Stage {{ stage() }} / {{ maxStage() }}\n            } @else if (recalculatedAt()) {\n              <span\n                class=\"trigger-popover\"\n                [ngbPopover]=\"popoverDetails\"\n                autoClose=\"outside\"\n                popoverClass=\"is-narrow\"\n                placement=\"left auto\"\n                container=\"body\"\n                (click)=\"$event.stopPropagation()\">\n                <span>Complete</span>\n              </span>\n            } @else {\n              Failed\n            }\n          </span>\n\n          @if (canExpand()) {\n            <he-svg-icon [name]=\"expanded() ? 'chevron-down' : 'chevron-right'\" class=\"has-text-secondary\" />\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n\n  @if (expanded()) {\n    @if (loading() && nodesLength() > 0) {\n      @for (node of nodesLength() | times; track $index) {\n        <he-skeleton-text [width]=\"60\" />\n      }\n    }\n\n    <div class=\"is-flex is-flex-direction-column is-gap-8 is-overflow-hidden is-pl-2 | related-stage\">\n      @for (relatedNode of expandableNodes(); track trackNode(relatedNode)) {\n        <he-engine-models-stage-deep\n          class=\"is-flex-grow-1\"\n          [node]=\"relatedNode\"\n          [expanded]=\"false\"\n          [expandedNode]=\"expandedNode() || node()\" />\n      }\n    </div>\n  }\n</div>\n\n<ng-template #popoverDetails>\n  <div class=\"is-flex is-flex-direction-column is-gap-4 has-text-white w-100\">\n    <div class=\"is-flex is-align-items-center is-gap-8 w-100\">\n      <span class=\"has-text-weight-bold\">Calculated Date:</span>\n      <span>{{ recalculatedAt() | date: (recalculatedAt().length === 10 ? 'mediumDate' : 'medium') }}</span>\n    </div>\n    <div class=\"is-flex is-align-items-center is-gap-8 w-100\">\n      <span class=\"has-text-weight-bold\">Calculated Version:</span>\n      <he-engine-models-version-link [node]=\"node()\" />\n    </div>\n  </div>\n</ng-template>\n", styles: [".is-type-Cycle-border{border:1px solid #ecf1ff}.is-type-Cycle-background{background-color:#ecf1ff}.is-type-Site-border{border:1px solid #d5f3d8}.is-type-Site-background{background-color:#d5f3d8}.is-type-ImpactAssessment-border{border:1px solid #e7e0cb}.is-type-ImpactAssessment-background{background-color:#e7e0cb}.is-type-Source-border{border:1px solid #f5f5f5}.is-type-Source-background{background-color:#f5f5f5}.related-stage{border-left:1px solid #4c7194}\n"] }]
         }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], expandedNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedNode", required: false }] }] } });
 
 const gitUrl = `${gitHome}/${Repository.orchestrator}/-/blob/${gitBranch()}`;