@the-liberators/ngx-scrumteamsurvey-tools 2.3.118 → 2.3.119

package/fesm2022/the-liberators-ngx-scrumteamsurvey-tools.mjs

@@ -41,9 +41,9 @@ import * as i2$2 from '@angular/cdk/clipboard';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import * as i5$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i10 from '@ncstate/sat-popover';
-import { SatPopoverModule } from '@ncstate/sat-popover';
-import * as i2$3 from '@angular/material/progress-spinner';
+import * as i12 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import * as i3$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i4$2 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
@@ -4907,6 +4907,16 @@ class ModelFactorMetricComponent extends ComponentWithViewStateBase {
         this.state = state;
         this.snackBar = snackBar;
         this.userSettings = userSettings;
+        this.isPopoverOpen = false;
+        this.overlayPositions = [
+            {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'center',
+                offsetY: 0
+            }
+        ];
     }
     ngOnInit() {
         super.ngOnInit();
@@ -4927,11 +4937,11 @@ class ModelFactorMetricComponent extends ComponentWithViewStateBase {
         this.showSetup = data.isSubscriber && (!this.integration || !this.integration.isSetup) && data.appContext !== "CoachingCenter";
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ModelFactorMetricComponent, deps: [{ token: VIEWSTATE_PROVIDER }, { token: i1.MatSnackBar }, { token: VIEWSTATE_USERSETTINGS_STRATEGY }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: ModelFactorMetricComponent, isStandalone: false, selector: "model-factor-metric", inputs: { metric: "metric" }, usesInheritance: true, ngImport: i0, template: "<div class=\"model-factor-metric\" #factorAnchor (click)=\"popover.open()\" [id]=\"'metric-' + metric.publicKey\">\n  <div class=\"model-factor-metric-title\">\n    {{metric.name}}\n    <span class=\"ph-info-fill icon\"></span>\n  </div>\n  @if (showMetricResult && factorScore) {\n    <div class=\"model-factor-metric-result\">\n      @if (factorScore) {\n        <div class=\"digit\">{{factorScore.score}}</div>\n      }\n      <div class=\"unit\">{{metric.unit}}</div>\n      @if (factorScore && userSettings.settings.user.modelFilter.advanced) {\n        <div class=\"confidence\" title=\"The confidence interval\">CI: {{factorScore.lowerConfidence}} - {{factorScore.upperConfidence}}</div>\n      }\n      <div class=\"model-factor-metric-result-details\">\n        @if (userSettings.settings.user.modelFilter.advanced) {\n          <age-indicator [lastMeasured]=\"factorScore.lastMeasured\"></age-indicator>\n        }\n        <delta-arrow [factorScore]=\"factorScore\" [delta]=\"delta\"></delta-arrow>\n      </div>\n    </div>\n  }\n  @if (!showMetricResult || !factorScore) {\n    <div class=\"model-factor-metric-result\">\n      <div class=\"digit\">?</div>\n      <div class=\"unit\">{{metric.unit}}</div>\n    </div>\n  }\n  <div class=\"model-factor-metric-setup\">\n    @if (integration && integration.hasCollectorUrl && integration.isSetup) {\n      <div class=\"howtocollect collectordialog\" integrationDialog [metric]=\"metric\" [integration]=\"integration\"><span class=\"icon ph-funnel-fill\"></span> How to collect</div>\n    }\n    @if (showSetup) {\n      <a class=\"howtocollect setup\" (click)=\"toManage($event)\"><span class=\"icon ph-gear-fill\"></span> Set up</a>\n    }\n    @if (showSetupTeaser) {\n      <a class=\"howtocollect teaser\" subscribeDialog><span class=\"icon ph-gear-fill\"></span> Set up</a>\n    }\n  </div>\n</div>\n\n<sat-popover #popover horizontalAlign=\"after\" [anchor]=\"factorAnchor\" verticalAlign=\"center\" [hasBackdrop]=\"true\" [autoFocus]=\"false\">\n  <div class=\"popover\" [id]=\"'popover-' + metric.publicKey\">\n    <div class=\"popover-container\">\n      <span (click)=\"popover.close()\" class=\"close ph-x\"></span>\n      <h3 factorInformationDialog [factor]=\"metric\">\n        {{metric.name}}\n        <span class=\"icon ph-info-fill\"></span>\n      </h3>\n      <div class=\"description\">{{metric.description}}</div>\n      <ng-container *ngIf=\"factorScore\">\n         <model-factor-benchmark [factor]=\"factorScore\" [benchmark]=\"benchmark\"></model-factor-benchmark>\n         <model-factor-breakdown [factor]=\"factorScore\"></model-factor-breakdown>\n         <quicktips [dimensionKey]=\"metric.publicKey\" [extraClass]=\"'quicktips-popover'\"></quicktips>\n         @if (factorScore.recommendation.available) {\n         <div class=\"link\">\n            <a [routerLink]=\"[baseUrl, 'tips']\" [fragment]=\"metric.publicKey\">discover how to improve ></a>\n         </div>\n         }\n      </ng-container>\n    </div>\n    <div class=\"arrow\"></div>\n  </div>\n</sat-popover>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DeltaArrowComponent, selector: "delta-arrow", inputs: ["factorScore", "delta", "noDataIndicator"] }, { kind: "component", type: AgeIndicatorComponent, selector: "age-indicator", inputs: ["lastMeasured"] }, { kind: "component", type: QuickTipsComponent, selector: "quicktips", inputs: ["dimensionKey", "extraClass"] }, { kind: "component", type: i10.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: OpenFactorInformationDialogDirective, selector: "[factorInformationDialog]", inputs: ["factor"] }, { kind: "directive", type: OpenSubscribeDialogDirective, selector: "[subscribeDialog]" }, { kind: "component", type: ModelFactorBenchmarkComponent, selector: "model-factor-benchmark", inputs: ["factor", "benchmark"] }, { kind: "component", type: ModelFactorBreakdownComponent, selector: "model-factor-breakdown", inputs: ["factor", "pageSize"] }, { kind: "directive", type: OpenIntegrationDialogDirective, selector: "[integrationDialog]", inputs: ["metric", "integration"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: ModelFactorMetricComponent, isStandalone: false, selector: "model-factor-metric", inputs: { metric: "metric" }, usesInheritance: true, ngImport: i0, template: "<div class=\"model-factor-metric\" #badgeOrigin=\"cdkOverlayOrigin\" cdkOverlayOrigin (click)=\"isPopoverOpen = true\" [id]=\"'metric-' + metric.publicKey\">\n   <div class=\"model-factor-metric-title\">\n      {{metric.name}}\n      <span class=\"ph-info-fill icon\"></span>\n   </div>\n   @if (showMetricResult && factorScore) {\n   <div class=\"model-factor-metric-result\">\n      @if (factorScore) {\n      <div class=\"digit\">{{factorScore.score}}</div>\n      }\n      <div class=\"unit\">{{metric.unit}}</div>\n      @if (factorScore && userSettings.settings.user.modelFilter.advanced) {\n      <div class=\"confidence\" title=\"The confidence interval\">CI: {{factorScore.lowerConfidence}} - {{factorScore.upperConfidence}}</div>\n      }\n      <div class=\"model-factor-metric-result-details\">\n         @if (userSettings.settings.user.modelFilter.advanced) {\n         <age-indicator [lastMeasured]=\"factorScore.lastMeasured\"></age-indicator>\n         }\n         <delta-arrow [factorScore]=\"factorScore\" [delta]=\"delta\"></delta-arrow>\n      </div>\n   </div>\n   }\n   @if (!showMetricResult || !factorScore) {\n   <div class=\"model-factor-metric-result\">\n      <div class=\"digit\">?</div>\n      <div class=\"unit\">{{metric.unit}}</div>\n   </div>\n   }\n   <div class=\"model-factor-metric-setup\">\n      @if (integration && integration.hasCollectorUrl && integration.isSetup) {\n      <div class=\"howtocollect collectordialog\" integrationDialog [metric]=\"metric\" [integration]=\"integration\"><span class=\"icon ph-funnel-fill\"></span> How to collect</div>\n      }\n      @if (showSetup) {\n      <a class=\"howtocollect setup\" (click)=\"toManage($event)\"><span class=\"icon ph-gear-fill\"></span> Set up</a>\n      }\n      @if (showSetupTeaser) {\n      <a class=\"howtocollect teaser\" subscribeDialog><span class=\"icon ph-gear-fill\"></span> Set up</a>\n      }\n   </div>\n</div>\n\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"badgeOrigin\" [cdkConnectedOverlayPush]=\"true\" [cdkConnectedOverlayViewportMargin]=\"8\" [cdkConnectedOverlayOpen]=\"isPopoverOpen\" [cdkConnectedOverlayHasBackdrop]=\"true\" [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\" [cdkConnectedOverlayPositions]=\"overlayPositions\" (backdropClick)=\"isPopoverOpen = false\">\n   <div class=\"popover\" [id]=\"'popover-' + metric.publicKey\">\n      <div class=\"popover-container\">\n         <span (click)=\"isPopoverOpen = false\" class=\"close ph-x\"></span>\n         <h3 factorInformationDialog [factor]=\"metric\">\n            {{metric.name}}\n            <span class=\"icon ph-info-fill\"></span>\n         </h3>\n         <div class=\"description\">{{metric.description}}</div>\n         <ng-container *ngIf=\"factorScore\">\n            <model-factor-benchmark [factor]=\"factorScore\" [benchmark]=\"benchmark\"></model-factor-benchmark>\n            <model-factor-breakdown [factor]=\"factorScore\"></model-factor-breakdown>\n            <quicktips [dimensionKey]=\"metric.publicKey\" [extraClass]=\"'quicktips-popover'\"></quicktips>\n            @if (factorScore.recommendation.available) {\n            <div class=\"link\">\n               <a [routerLink]=\"[baseUrl, 'tips']\" [fragment]=\"metric.publicKey\">discover how to improve ></a>\n            </div>\n            }\n         </ng-container>\n      </div>\n      <div class=\"arrow\"></div>\n   </div>\n</ng-template>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DeltaArrowComponent, selector: "delta-arrow", inputs: ["factorScore", "delta", "noDataIndicator"] }, { kind: "component", type: AgeIndicatorComponent, selector: "age-indicator", inputs: ["lastMeasured"] }, { kind: "component", type: QuickTipsComponent, selector: "quicktips", inputs: ["dimensionKey", "extraClass"] }, { kind: "directive", type: OpenFactorInformationDialogDirective, selector: "[factorInformationDialog]", inputs: ["factor"] }, { kind: "directive", type: OpenSubscribeDialogDirective, selector: "[subscribeDialog]" }, { kind: "directive", type: i12.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i12.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ModelFactorBenchmarkComponent, selector: "model-factor-benchmark", inputs: ["factor", "benchmark"] }, { kind: "component", type: ModelFactorBreakdownComponent, selector: "model-factor-breakdown", inputs: ["factor", "pageSize"] }, { kind: "directive", type: OpenIntegrationDialogDirective, selector: "[integrationDialog]", inputs: ["metric", "integration"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ModelFactorMetricComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'model-factor-metric', standalone: false, template: "<div class=\"model-factor-metric\" #factorAnchor (click)=\"popover.open()\" [id]=\"'metric-' + metric.publicKey\">\n  <div class=\"model-factor-metric-title\">\n    {{metric.name}}\n    <span class=\"ph-info-fill icon\"></span>\n  </div>\n  @if (showMetricResult && factorScore) {\n    <div class=\"model-factor-metric-result\">\n      @if (factorScore) {\n        <div class=\"digit\">{{factorScore.score}}</div>\n      }\n      <div class=\"unit\">{{metric.unit}}</div>\n      @if (factorScore && userSettings.settings.user.modelFilter.advanced) {\n        <div class=\"confidence\" title=\"The confidence interval\">CI: {{factorScore.lowerConfidence}} - {{factorScore.upperConfidence}}</div>\n      }\n      <div class=\"model-factor-metric-result-details\">\n        @if (userSettings.settings.user.modelFilter.advanced) {\n          <age-indicator [lastMeasured]=\"factorScore.lastMeasured\"></age-indicator>\n        }\n        <delta-arrow [factorScore]=\"factorScore\" [delta]=\"delta\"></delta-arrow>\n      </div>\n    </div>\n  }\n  @if (!showMetricResult || !factorScore) {\n    <div class=\"model-factor-metric-result\">\n      <div class=\"digit\">?</div>\n      <div class=\"unit\">{{metric.unit}}</div>\n    </div>\n  }\n  <div class=\"model-factor-metric-setup\">\n    @if (integration && integration.hasCollectorUrl && integration.isSetup) {\n      <div class=\"howtocollect collectordialog\" integrationDialog [metric]=\"metric\" [integration]=\"integration\"><span class=\"icon ph-funnel-fill\"></span> How to collect</div>\n    }\n    @if (showSetup) {\n      <a class=\"howtocollect setup\" (click)=\"toManage($event)\"><span class=\"icon ph-gear-fill\"></span> Set up</a>\n    }\n    @if (showSetupTeaser) {\n      <a class=\"howtocollect teaser\" subscribeDialog><span class=\"icon ph-gear-fill\"></span> Set up</a>\n    }\n  </div>\n</div>\n\n<sat-popover #popover horizontalAlign=\"after\" [anchor]=\"factorAnchor\" verticalAlign=\"center\" [hasBackdrop]=\"true\" [autoFocus]=\"false\">\n  <div class=\"popover\" [id]=\"'popover-' + metric.publicKey\">\n    <div class=\"popover-container\">\n      <span (click)=\"popover.close()\" class=\"close ph-x\"></span>\n      <h3 factorInformationDialog [factor]=\"metric\">\n        {{metric.name}}\n        <span class=\"icon ph-info-fill\"></span>\n      </h3>\n      <div class=\"description\">{{metric.description}}</div>\n      <ng-container *ngIf=\"factorScore\">\n         <model-factor-benchmark [factor]=\"factorScore\" [benchmark]=\"benchmark\"></model-factor-benchmark>\n         <model-factor-breakdown [factor]=\"factorScore\"></model-factor-breakdown>\n         <quicktips [dimensionKey]=\"metric.publicKey\" [extraClass]=\"'quicktips-popover'\"></quicktips>\n         @if (factorScore.recommendation.available) {\n         <div class=\"link\">\n            <a [routerLink]=\"[baseUrl, 'tips']\" [fragment]=\"metric.publicKey\">discover how to improve ></a>\n         </div>\n         }\n      </ng-container>\n    </div>\n    <div class=\"arrow\"></div>\n  </div>\n</sat-popover>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}\n"] }]
+            args: [{ selector: 'model-factor-metric', standalone: false, template: "<div class=\"model-factor-metric\" #badgeOrigin=\"cdkOverlayOrigin\" cdkOverlayOrigin (click)=\"isPopoverOpen = true\" [id]=\"'metric-' + metric.publicKey\">\n   <div class=\"model-factor-metric-title\">\n      {{metric.name}}\n      <span class=\"ph-info-fill icon\"></span>\n   </div>\n   @if (showMetricResult && factorScore) {\n   <div class=\"model-factor-metric-result\">\n      @if (factorScore) {\n      <div class=\"digit\">{{factorScore.score}}</div>\n      }\n      <div class=\"unit\">{{metric.unit}}</div>\n      @if (factorScore && userSettings.settings.user.modelFilter.advanced) {\n      <div class=\"confidence\" title=\"The confidence interval\">CI: {{factorScore.lowerConfidence}} - {{factorScore.upperConfidence}}</div>\n      }\n      <div class=\"model-factor-metric-result-details\">\n         @if (userSettings.settings.user.modelFilter.advanced) {\n         <age-indicator [lastMeasured]=\"factorScore.lastMeasured\"></age-indicator>\n         }\n         <delta-arrow [factorScore]=\"factorScore\" [delta]=\"delta\"></delta-arrow>\n      </div>\n   </div>\n   }\n   @if (!showMetricResult || !factorScore) {\n   <div class=\"model-factor-metric-result\">\n      <div class=\"digit\">?</div>\n      <div class=\"unit\">{{metric.unit}}</div>\n   </div>\n   }\n   <div class=\"model-factor-metric-setup\">\n      @if (integration && integration.hasCollectorUrl && integration.isSetup) {\n      <div class=\"howtocollect collectordialog\" integrationDialog [metric]=\"metric\" [integration]=\"integration\"><span class=\"icon ph-funnel-fill\"></span> How to collect</div>\n      }\n      @if (showSetup) {\n      <a class=\"howtocollect setup\" (click)=\"toManage($event)\"><span class=\"icon ph-gear-fill\"></span> Set up</a>\n      }\n      @if (showSetupTeaser) {\n      <a class=\"howtocollect teaser\" subscribeDialog><span class=\"icon ph-gear-fill\"></span> Set up</a>\n      }\n   </div>\n</div>\n\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"badgeOrigin\" [cdkConnectedOverlayPush]=\"true\" [cdkConnectedOverlayViewportMargin]=\"8\" [cdkConnectedOverlayOpen]=\"isPopoverOpen\" [cdkConnectedOverlayHasBackdrop]=\"true\" [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\" [cdkConnectedOverlayPositions]=\"overlayPositions\" (backdropClick)=\"isPopoverOpen = false\">\n   <div class=\"popover\" [id]=\"'popover-' + metric.publicKey\">\n      <div class=\"popover-container\">\n         <span (click)=\"isPopoverOpen = false\" class=\"close ph-x\"></span>\n         <h3 factorInformationDialog [factor]=\"metric\">\n            {{metric.name}}\n            <span class=\"icon ph-info-fill\"></span>\n         </h3>\n         <div class=\"description\">{{metric.description}}</div>\n         <ng-container *ngIf=\"factorScore\">\n            <model-factor-benchmark [factor]=\"factorScore\" [benchmark]=\"benchmark\"></model-factor-benchmark>\n            <model-factor-breakdown [factor]=\"factorScore\"></model-factor-breakdown>\n            <quicktips [dimensionKey]=\"metric.publicKey\" [extraClass]=\"'quicktips-popover'\"></quicktips>\n            @if (factorScore.recommendation.available) {\n            <div class=\"link\">\n               <a [routerLink]=\"[baseUrl, 'tips']\" [fragment]=\"metric.publicKey\">discover how to improve ></a>\n            </div>\n            }\n         </ng-container>\n      </div>\n      <div class=\"arrow\"></div>\n   </div>\n</ng-template>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}\n"] }]
         }], ctorParameters: () => [{ type: ViewModelStateBase, decorators: [{
                     type: Inject,
                     args: [VIEWSTATE_PROVIDER]
@@ -4952,6 +4962,15 @@ class ModelFactorIndicatorComponent extends ComponentWithViewStateBase {
         this.arrowUpdateService = arrowUpdateService;
         this.expandIndicators = true;
         this.InterventionStateEnum = InterventionStateEnum;
+        this.isPopoverOpen = false;
+        this.overlayPositions = [
+            {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'center'
+            }
+        ];
     }
     ngOnInit() {
         super.ngOnInit();
@@ -4996,11 +5015,11 @@ class ModelFactorIndicatorComponent extends ComponentWithViewStateBase {
                 (this.userSettings.settings.user.modelFilter.layers.find(p => p.key == "Supporters" && p.selected) != null && this.factorScore.points.find(p => p.name == "Supporter") != null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ModelFactorIndicatorComponent, deps: [{ token: VIEWSTATE_PROVIDER }, { token: VIEWSTATE_USERSETTINGS_STRATEGY }, { token: UserSettingService }, { token: i1.MatSnackBar }, { token: ArrowUpdateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: ModelFactorIndicatorComponent, isStandalone: false, selector: "model-factor-indicator", inputs: { indicator: "indicator", actionStatusPosition: "actionStatusPosition", visible: "visible" }, usesInheritance: true, ngImport: i0, template: "@if (visible) {\n  <div [class]=\"'factor-indicator factor-indicator-actions-' + actionStatusPosition + ' factor-indicator-' + direction\" [ngClass]=\"{'factor-fade' : !isInActiveLayer || !dataAvailable}\" [id]=\"'factor-' + indicator.publicKey\" #factorAnchor>\n    @if ((notes.length > 0 || factorScore.interventionSummary.impeded > 0 || factorScore.interventionSummary.open > 0) && userSettings.settings.user.modelFilter.advanced) {\n      <div class=\"factor-actions\">\n        @if (factorScore.interventionSummary.open > 0) {\n          <div class=\"factor-actions-status\">\n            <span [routerLink]=\"[baseUrl, 'actions']\" [queryParams]=\"{ state: InterventionStateEnum.open, expectedImpactOn: indicator.publicKey }\">{{factorScore.interventionSummary.open}}</span>/\n            <span [routerLink]=\"[baseUrl, 'actions']\" [queryParams]=\"{ state: InterventionStateEnum.completed, expectedImpactOn: indicator.publicKey }\">{{factorScore.interventionSummary.completed}}</span>\n          </div>\n        }\n        @if (factorScore.interventionSummary.impeded > 0) {\n          <div class=\"factor-actions-impeded\" [routerLink]=\"[baseUrl, 'actions']\" [queryParams]=\"{ state: InterventionStateEnum.impeded, expectedImpactOn: indicator.publicKey }\">\n            <img class=\"icon\" src=\"/assets/img/impeded.svg\" /> {{factorScore.interventionSummary.impeded}}\n          </div>\n        }\n        @if (notes.length > 0) {\n          <div class=\"factor-warnings\" notesDialog [notes]=\"notes\">\n            <span class=\"icon ph-warning-fill\" title=\"There are some issues in the data that might influence your interpretations\"></span>\n          </div>\n        }\n      </div>\n    }\n    <div class=\"factor-content\" (click)=\"popover.open()\">\n      <div class=\"factor-name\">\n        {{indicator.name}}\n      </div>\n      <progressbar [factorScore]=\"factorScore\"></progressbar>\n      <div class=\"factor-details\">\n        @if (userSettings.settings.user.modelFilter.advanced) {\n          <age-indicator [lastMeasured]=\"factorScore.lastMeasured\"></age-indicator>\n        }\n        @if (dataAvailable) {\n          <delta-arrow [factorScore]=\"factorScore\" [delta]=\"delta\" [noDataIndicator]=\"false\"></delta-arrow>\n        }\n      </div>\n    </div>\n    <div class=\"factor-anchor\" [id]=\"'factor-' + indicator.publicKey + '-anchor'\">\n    </div>\n  </div>\n  <sat-popover #popover horizontalAlign=\"after\" [anchor]=\"factorAnchor\" verticalAlign=\"center\" [hasBackdrop]=\"true\" [autoFocus]=\"false\">\n    <div class=\"popover\" [id]=\"'popover-' + indicator.publicKey\">\n      <div class=\"popover-container\">\n        <span (click)=\"popover.close()\" class=\"close ph-x\"></span>\n        <h3 factorInformationDialog [factor]=\"indicator\">\n          {{indicator.name}}\n          <span class=\"icon ph-info-fill\"></span>\n        </h3>\n        <div class=\"description\">{{indicator.description}}</div>\n        <model-factor-benchmark [factor]=\"factorScore\" [benchmark]=\"benchmark\"></model-factor-benchmark>\n        <model-factor-breakdown [factor]=\"factorScore\"></model-factor-breakdown>\n        <quicktips [dimensionKey]=\"indicator.publicKey\" [extraClass]=\"'quicktips-popover'\"></quicktips>\n        @if (factorScore.recommendation.available) {\n          <div class=\"link\">\n            <a [routerLink]=\"[baseUrl, 'tips']\" [fragment]=\"indicator.publicKey\">discover how to improve ></a>\n          </div>\n        }\n      </div>\n      <div class=\"arrow\"></div>\n    </div>\n  </sat-popover>\n}\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DeltaArrowComponent, selector: "delta-arrow", inputs: ["factorScore", "delta", "noDataIndicator"] }, { kind: "component", type: AgeIndicatorComponent, selector: "age-indicator", inputs: ["lastMeasured"] }, { kind: "component", type: QuickTipsComponent, selector: "quicktips", inputs: ["dimensionKey", "extraClass"] }, { kind: "directive", type: OpenNotesDialogDirective, selector: "[notesDialog]", inputs: ["notes"] }, { kind: "component", type: i10.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: OpenFactorInformationDialogDirective, selector: "[factorInformationDialog]", inputs: ["factor"] }, { kind: "component", type: ProgressbarComponent, selector: "progressbar", inputs: ["factorScore"] }, { kind: "component", type: ModelFactorBenchmarkComponent, selector: "model-factor-benchmark", inputs: ["factor", "benchmark"] }, { kind: "component", type: ModelFactorBreakdownComponent, selector: "model-factor-breakdown", inputs: ["factor", "pageSize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: ModelFactorIndicatorComponent, isStandalone: false, selector: "model-factor-indicator", inputs: { indicator: "indicator", actionStatusPosition: "actionStatusPosition", visible: "visible" }, usesInheritance: true, ngImport: i0, template: "@if (visible) {\n<div [class]=\"'factor-indicator factor-indicator-actions-' + actionStatusPosition + ' factor-indicator-' + direction\" [ngClass]=\"{'factor-fade' : !isInActiveLayer || !dataAvailable}\" [id]=\"'factor-' + indicator.publicKey\" #badgeOrigin=\"cdkOverlayOrigin\" cdkOverlayOrigin (click)=\"isPopoverOpen = true\">\n   @if ((notes.length > 0 || factorScore.interventionSummary.impeded > 0 || factorScore.interventionSummary.open > 0) && userSettings.settings.user.modelFilter.advanced) {\n   <div class=\"factor-actions\">\n      @if (factorScore.interventionSummary.open > 0) {\n      <div class=\"factor-actions-status\">\n         <span [routerLink]=\"[baseUrl, 'actions']\" [queryParams]=\"{ state: InterventionStateEnum.open, expectedImpactOn: indicator.publicKey }\">{{factorScore.interventionSummary.open}}</span>/\n         <span [routerLink]=\"[baseUrl, 'actions']\" [queryParams]=\"{ state: InterventionStateEnum.completed, expectedImpactOn: indicator.publicKey }\">{{factorScore.interventionSummary.completed}}</span>\n      </div>\n      }\n      @if (factorScore.interventionSummary.impeded > 0) {\n      <div class=\"factor-actions-impeded\" [routerLink]=\"[baseUrl, 'actions']\" [queryParams]=\"{ state: InterventionStateEnum.impeded, expectedImpactOn: indicator.publicKey }\">\n         <img class=\"icon\" src=\"/assets/img/impeded.svg\" /> {{factorScore.interventionSummary.impeded}}\n      </div>\n      }\n      @if (notes.length > 0) {\n      <div class=\"factor-warnings\" notesDialog [notes]=\"notes\">\n         <span class=\"icon ph-warning-fill\" title=\"There are some issues in the data that might influence your interpretations\"></span>\n      </div>\n      }\n   </div>\n   }\n   <div class=\"factor-content\" (click)=\"isPopoverOpen = true\">\n      <div class=\"factor-name\">\n         {{indicator.name}}\n      </div>\n      <progressbar [factorScore]=\"factorScore\"></progressbar>\n      <div class=\"factor-details\">\n         @if (userSettings.settings.user.modelFilter.advanced) {\n         <age-indicator [lastMeasured]=\"factorScore.lastMeasured\"></age-indicator>\n         }\n         @if (dataAvailable) {\n         <delta-arrow [factorScore]=\"factorScore\" [delta]=\"delta\" [noDataIndicator]=\"false\"></delta-arrow>\n         }\n      </div>\n   </div>\n   <div class=\"factor-anchor\" [id]=\"'factor-' + indicator.publicKey + '-anchor'\">\n   </div>\n</div>\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"badgeOrigin\" [cdkConnectedOverlayPush]=\"true\" [cdkConnectedOverlayViewportMargin]=\"8\" [cdkConnectedOverlayOpen]=\"isPopoverOpen\" [cdkConnectedOverlayHasBackdrop]=\"true\" [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\" [cdkConnectedOverlayPositions]=\"overlayPositions\" (backdropClick)=\"isPopoverOpen = false\">\n   <div class=\"popover\" [id]=\"'popover-' + indicator.publicKey\">\n      <div class=\"popover-container\">\n         <span (click)=\"isPopoverOpen = false\" class=\"close ph-x\"></span>\n         <h3 factorInformationDialog [factor]=\"indicator\">\n            {{indicator.name}}\n            <span class=\"icon ph-info-fill\"></span>\n         </h3>\n         <div class=\"description\">{{indicator.description}}</div>\n         <model-factor-benchmark [factor]=\"factorScore\" [benchmark]=\"benchmark\"></model-factor-benchmark>\n         <model-factor-breakdown [factor]=\"factorScore\"></model-factor-breakdown>\n         <quicktips [dimensionKey]=\"indicator.publicKey\" [extraClass]=\"'quicktips-popover'\"></quicktips>\n         @if (factorScore.recommendation.available) {\n         <div class=\"link\">\n            <a [routerLink]=\"[baseUrl, 'tips']\" [fragment]=\"indicator.publicKey\">discover how to improve ></a>\n         </div>\n         }\n      </div>\n      <div class=\"arrow\"></div>\n   </div>\n</ng-template>\n}\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DeltaArrowComponent, selector: "delta-arrow", inputs: ["factorScore", "delta", "noDataIndicator"] }, { kind: "component", type: AgeIndicatorComponent, selector: "age-indicator", inputs: ["lastMeasured"] }, { kind: "component", type: QuickTipsComponent, selector: "quicktips", inputs: ["dimensionKey", "extraClass"] }, { kind: "directive", type: OpenNotesDialogDirective, selector: "[notesDialog]", inputs: ["notes"] }, { kind: "directive", type: OpenFactorInformationDialogDirective, selector: "[factorInformationDialog]", inputs: ["factor"] }, { kind: "component", type: ProgressbarComponent, selector: "progressbar", inputs: ["factorScore"] }, { kind: "directive", type: i12.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i12.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ModelFactorBenchmarkComponent, selector: "model-factor-benchmark", inputs: ["factor", "benchmark"] }, { kind: "component", type: ModelFactorBreakdownComponent, selector: "model-factor-breakdown", inputs: ["factor", "pageSize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ModelFactorIndicatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'model-factor-indicator', standalone: false, template: "@if (visible) {\n  <div [class]=\"'factor-indicator factor-indicator-actions-' + actionStatusPosition + ' factor-indicator-' + direction\" [ngClass]=\"{'factor-fade' : !isInActiveLayer || !dataAvailable}\" [id]=\"'factor-' + indicator.publicKey\" #factorAnchor>\n    @if ((notes.length > 0 || factorScore.interventionSummary.impeded > 0 || factorScore.interventionSummary.open > 0) && userSettings.settings.user.modelFilter.advanced) {\n      <div class=\"factor-actions\">\n        @if (factorScore.interventionSummary.open > 0) {\n          <div class=\"factor-actions-status\">\n            <span [routerLink]=\"[baseUrl, 'actions']\" [queryParams]=\"{ state: InterventionStateEnum.open, expectedImpactOn: indicator.publicKey }\">{{factorScore.interventionSummary.open}}</span>/\n            <span [routerLink]=\"[baseUrl, 'actions']\" [queryParams]=\"{ state: InterventionStateEnum.completed, expectedImpactOn: indicator.publicKey }\">{{factorScore.interventionSummary.completed}}</span>\n          </div>\n        }\n        @if (factorScore.interventionSummary.impeded > 0) {\n          <div class=\"factor-actions-impeded\" [routerLink]=\"[baseUrl, 'actions']\" [queryParams]=\"{ state: InterventionStateEnum.impeded, expectedImpactOn: indicator.publicKey }\">\n            <img class=\"icon\" src=\"/assets/img/impeded.svg\" /> {{factorScore.interventionSummary.impeded}}\n          </div>\n        }\n        @if (notes.length > 0) {\n          <div class=\"factor-warnings\" notesDialog [notes]=\"notes\">\n            <span class=\"icon ph-warning-fill\" title=\"There are some issues in the data that might influence your interpretations\"></span>\n          </div>\n        }\n      </div>\n    }\n    <div class=\"factor-content\" (click)=\"popover.open()\">\n      <div class=\"factor-name\">\n        {{indicator.name}}\n      </div>\n      <progressbar [factorScore]=\"factorScore\"></progressbar>\n      <div class=\"factor-details\">\n        @if (userSettings.settings.user.modelFilter.advanced) {\n          <age-indicator [lastMeasured]=\"factorScore.lastMeasured\"></age-indicator>\n        }\n        @if (dataAvailable) {\n          <delta-arrow [factorScore]=\"factorScore\" [delta]=\"delta\" [noDataIndicator]=\"false\"></delta-arrow>\n        }\n      </div>\n    </div>\n    <div class=\"factor-anchor\" [id]=\"'factor-' + indicator.publicKey + '-anchor'\">\n    </div>\n  </div>\n  <sat-popover #popover horizontalAlign=\"after\" [anchor]=\"factorAnchor\" verticalAlign=\"center\" [hasBackdrop]=\"true\" [autoFocus]=\"false\">\n    <div class=\"popover\" [id]=\"'popover-' + indicator.publicKey\">\n      <div class=\"popover-container\">\n        <span (click)=\"popover.close()\" class=\"close ph-x\"></span>\n        <h3 factorInformationDialog [factor]=\"indicator\">\n          {{indicator.name}}\n          <span class=\"icon ph-info-fill\"></span>\n        </h3>\n        <div class=\"description\">{{indicator.description}}</div>\n        <model-factor-benchmark [factor]=\"factorScore\" [benchmark]=\"benchmark\"></model-factor-benchmark>\n        <model-factor-breakdown [factor]=\"factorScore\"></model-factor-breakdown>\n        <quicktips [dimensionKey]=\"indicator.publicKey\" [extraClass]=\"'quicktips-popover'\"></quicktips>\n        @if (factorScore.recommendation.available) {\n          <div class=\"link\">\n            <a [routerLink]=\"[baseUrl, 'tips']\" [fragment]=\"indicator.publicKey\">discover how to improve ></a>\n          </div>\n        }\n      </div>\n      <div class=\"arrow\"></div>\n    </div>\n  </sat-popover>\n}\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}\n"] }]
+            args: [{ selector: 'model-factor-indicator', standalone: false, template: "@if (visible) {\n<div [class]=\"'factor-indicator factor-indicator-actions-' + actionStatusPosition + ' factor-indicator-' + direction\" [ngClass]=\"{'factor-fade' : !isInActiveLayer || !dataAvailable}\" [id]=\"'factor-' + indicator.publicKey\" #badgeOrigin=\"cdkOverlayOrigin\" cdkOverlayOrigin (click)=\"isPopoverOpen = true\">\n   @if ((notes.length > 0 || factorScore.interventionSummary.impeded > 0 || factorScore.interventionSummary.open > 0) && userSettings.settings.user.modelFilter.advanced) {\n   <div class=\"factor-actions\">\n      @if (factorScore.interventionSummary.open > 0) {\n      <div class=\"factor-actions-status\">\n         <span [routerLink]=\"[baseUrl, 'actions']\" [queryParams]=\"{ state: InterventionStateEnum.open, expectedImpactOn: indicator.publicKey }\">{{factorScore.interventionSummary.open}}</span>/\n         <span [routerLink]=\"[baseUrl, 'actions']\" [queryParams]=\"{ state: InterventionStateEnum.completed, expectedImpactOn: indicator.publicKey }\">{{factorScore.interventionSummary.completed}}</span>\n      </div>\n      }\n      @if (factorScore.interventionSummary.impeded > 0) {\n      <div class=\"factor-actions-impeded\" [routerLink]=\"[baseUrl, 'actions']\" [queryParams]=\"{ state: InterventionStateEnum.impeded, expectedImpactOn: indicator.publicKey }\">\n         <img class=\"icon\" src=\"/assets/img/impeded.svg\" /> {{factorScore.interventionSummary.impeded}}\n      </div>\n      }\n      @if (notes.length > 0) {\n      <div class=\"factor-warnings\" notesDialog [notes]=\"notes\">\n         <span class=\"icon ph-warning-fill\" title=\"There are some issues in the data that might influence your interpretations\"></span>\n      </div>\n      }\n   </div>\n   }\n   <div class=\"factor-content\" (click)=\"isPopoverOpen = true\">\n      <div class=\"factor-name\">\n         {{indicator.name}}\n      </div>\n      <progressbar [factorScore]=\"factorScore\"></progressbar>\n      <div class=\"factor-details\">\n         @if (userSettings.settings.user.modelFilter.advanced) {\n         <age-indicator [lastMeasured]=\"factorScore.lastMeasured\"></age-indicator>\n         }\n         @if (dataAvailable) {\n         <delta-arrow [factorScore]=\"factorScore\" [delta]=\"delta\" [noDataIndicator]=\"false\"></delta-arrow>\n         }\n      </div>\n   </div>\n   <div class=\"factor-anchor\" [id]=\"'factor-' + indicator.publicKey + '-anchor'\">\n   </div>\n</div>\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"badgeOrigin\" [cdkConnectedOverlayPush]=\"true\" [cdkConnectedOverlayViewportMargin]=\"8\" [cdkConnectedOverlayOpen]=\"isPopoverOpen\" [cdkConnectedOverlayHasBackdrop]=\"true\" [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\" [cdkConnectedOverlayPositions]=\"overlayPositions\" (backdropClick)=\"isPopoverOpen = false\">\n   <div class=\"popover\" [id]=\"'popover-' + indicator.publicKey\">\n      <div class=\"popover-container\">\n         <span (click)=\"isPopoverOpen = false\" class=\"close ph-x\"></span>\n         <h3 factorInformationDialog [factor]=\"indicator\">\n            {{indicator.name}}\n            <span class=\"icon ph-info-fill\"></span>\n         </h3>\n         <div class=\"description\">{{indicator.description}}</div>\n         <model-factor-benchmark [factor]=\"factorScore\" [benchmark]=\"benchmark\"></model-factor-benchmark>\n         <model-factor-breakdown [factor]=\"factorScore\"></model-factor-breakdown>\n         <quicktips [dimensionKey]=\"indicator.publicKey\" [extraClass]=\"'quicktips-popover'\"></quicktips>\n         @if (factorScore.recommendation.available) {\n         <div class=\"link\">\n            <a [routerLink]=\"[baseUrl, 'tips']\" [fragment]=\"indicator.publicKey\">discover how to improve ></a>\n         </div>\n         }\n      </div>\n      <div class=\"arrow\"></div>\n   </div>\n</ng-template>\n}\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}\n"] }]
         }], ctorParameters: () => [{ type: ViewModelStateBase, decorators: [{
                     type: Inject,
                     args: [VIEWSTATE_PROVIDER]
@@ -5025,6 +5044,16 @@ class ModelFactorCoreComponent extends ComponentWithViewStateBase {
         this.arrowUpdateService = arrowUpdateService;
         this.expandIndicators = false;
         this.InterventionStateEnum = InterventionStateEnum;
+        this.isPopoverOpen = false;
+        this.overlayPositions = [
+            {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'center',
+                offsetY: 0
+            }
+        ];
     }
     ngOnInit() {
         super.ngOnInit();
@@ -5069,11 +5098,11 @@ class ModelFactorCoreComponent extends ComponentWithViewStateBase {
                 (this.userSettings.settings.user.modelFilter.layers.find(p => p.key == "Supporters" && p.selected) != null && this.factorScore.points.find(p => p.name == "Supporter") != null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ModelFactorCoreComponent, deps: [{ token: VIEWSTATE_PROVIDER }, { token: VIEWSTATE_USERSETTINGS_STRATEGY }, { token: UserSettingService }, { token: i1.MatSnackBar }, { token: ArrowUpdateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: ModelFactorCoreComponent, isStandalone: false, selector: "model-factor-core", inputs: { factor: "factor", allowExpand: "allowExpand", expandPosition: "expandPosition" }, usesInheritance: true, ngImport: i0, template: "<div [class]=\"'model-factor model-factor-' + direction\" [ngClass]=\"{'model-factor-fade' : !isInActiveLayer || !dataAvailable}\" [id]=\"'factor-' + factor.publicKey\">\n  @if (allowExpand) {\n    <div [class]=\"'model-factor-expand model-factor-expand-' + expandPosition\" [ngClass]=\"{'expanded': expandIndicators}\" (click)=\"toggleIndicators()\" [id]=\"'factor-' + factor.publicKey + '-expand'\">\n      <span class=\"plus\">+</span>\n    </div>\n  }\n  <div class=\"model-factor-inner\" #factorAnchor>\n    <div class=\"model-factor-content\" (click)=\"popover.open()\">\n      <div class=\"model-factor-name\">\n        {{factor.name}}\n      </div>\n      <progressbar [factorScore]=\"factorScore\"></progressbar>\n      <div class=\"model-factor-details\">\n        @if (userSettings.settings.user.modelFilter.advanced) {\n          <age-indicator [lastMeasured]=\"factorScore.lastMeasured\"></age-indicator>\n        }\n        @if (dataAvailable) {\n          <delta-arrow [factorScore]=\"factorScore\" [delta]=\"delta\"></delta-arrow>\n        }\n      </div>\n    </div>\n\n    @if (userSettings.settings.user.modelFilter.advanced) {\n      <div class=\"model-factor-bottom\">\n        <span class=\"meta-actions\" [title]=\"factorScore.interventionSummary.open + ' open improvement actions, versus ' + factorScore.interventionSummary.completed + ' completed improvement actions'\">\n          <span [routerLink]=\"[baseUrl, 'actions']\" [queryParams]=\"{ state: InterventionStateEnum.open, expectedImpactOn: factor.publicKey }\">{{factorScore.interventionSummary.open}}</span>/\n          <span [routerLink]=\"[baseUrl, 'actions']\" [queryParams]=\"{ state: InterventionStateEnum.completed, expectedImpactOn: factor.publicKey }\">{{factorScore.interventionSummary.completed}}</span>\n        </span>\n        @if (factorScore.interventionSummary.impeded > 0) {\n          <span class=\"meta-impeded\" [title]=\"factorScore.interventionSummary.impeded + ' improvement actions are blocked, and teams are requesting support'\" [routerLink]=\"[baseUrl, 'actions']\" [queryParams]=\"{ state: InterventionStateEnum.impeded, expectedImpactOn: factor.publicKey }\">\n            <img class=\"icon\" src=\"/assets/img/impeded.svg\" />{{factorScore.interventionSummary.impeded}}\n          </span>\n        }\n        @if (notes.length > 0) {\n          <span class=\"meta-warnings\" notesDialog [notes]=\"notes\">\n            <span class=\"icon ph-warning-fill\"></span>\n          </span>\n        }\n      </div>\n    }\n\n    @if (!userSettings.settings.user.modelFilter.advanced) {\n      <div class=\"model-factor-bottom-empty\">\n      </div>\n    }\n  </div>\n</div>\n\n<div [id]=\"'factor-' + factor.publicKey + '-indicators'\" class=\"indicators\">\n  @for (indicator of factor.lower; track indicator) {\n    <model-factor-indicator [indicator]=\"indicator\" [actionStatusPosition]=\"expandPosition\" [visible]=\"expandIndicators && allowExpand\"></model-factor-indicator>\n  }\n</div>\n\n<sat-popover #popover horizontalAlign=\"after\" [anchor]=\"factorAnchor\" verticalAlign=\"center\" [hasBackdrop]=\"true\" [autoFocus]=\"false\">\n  <div class=\"popover\" [id]=\"'popover-' + factor.publicKey\">\n    <div class=\"popover-container\">\n      <span (click)=\"popover.close()\" class=\"close ph-x\"></span>\n      <h3 factorInformationDialog [factor]=\"factor\">\n        {{factor.name}}\n        <span class=\"icon ph-info-fill\"></span>\n      </h3>\n      <div class=\"description\">{{factor.description}}</div>\n\n      <model-factor-benchmark [factor]=\"factorScore\" [benchmark]=\"benchmark\"></model-factor-benchmark>\n      <model-factor-breakdown [factor]=\"factorScore\"></model-factor-breakdown>\n      <quicktips [dimensionKey]=\"factor.publicKey\" [extraClass]=\"'quicktips-popover'\"></quicktips>\n\n      @if (factorScore.recommendation.available) {\n        <div class=\"link\">\n          <a [routerLink]=\"[baseUrl, 'tips']\" [fragment]=\"factor.publicKey\">discover how to improve ></a>\n        </div>\n      }\n    </div>\n    <div class=\"arrow\"></div>\n  </div>\n</sat-popover>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DeltaArrowComponent, selector: "delta-arrow", inputs: ["factorScore", "delta", "noDataIndicator"] }, { kind: "component", type: AgeIndicatorComponent, selector: "age-indicator", inputs: ["lastMeasured"] }, { kind: "component", type: QuickTipsComponent, selector: "quicktips", inputs: ["dimensionKey", "extraClass"] }, { kind: "directive", type: OpenNotesDialogDirective, selector: "[notesDialog]", inputs: ["notes"] }, { kind: "component", type: i10.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: OpenFactorInformationDialogDirective, selector: "[factorInformationDialog]", inputs: ["factor"] }, { kind: "component", type: ProgressbarComponent, selector: "progressbar", inputs: ["factorScore"] }, { kind: "component", type: ModelFactorIndicatorComponent, selector: "model-factor-indicator", inputs: ["indicator", "actionStatusPosition", "visible"] }, { kind: "component", type: ModelFactorBenchmarkComponent, selector: "model-factor-benchmark", inputs: ["factor", "benchmark"] }, { kind: "component", type: ModelFactorBreakdownComponent, selector: "model-factor-breakdown", inputs: ["factor", "pageSize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: ModelFactorCoreComponent, isStandalone: false, selector: "model-factor-core", inputs: { factor: "factor", allowExpand: "allowExpand", expandPosition: "expandPosition" }, usesInheritance: true, ngImport: i0, template: "<div [class]=\"'model-factor model-factor-' + direction\" [ngClass]=\"{'model-factor-fade' : !isInActiveLayer || !dataAvailable}\" [id]=\"'factor-' + factor.publicKey\">\n  @if (allowExpand) {\n    <div [class]=\"'model-factor-expand model-factor-expand-' + expandPosition\" [ngClass]=\"{'expanded': expandIndicators}\" (click)=\"toggleIndicators()\" [id]=\"'factor-' + factor.publicKey + '-expand'\">\n      <span class=\"plus\">+</span>\n    </div>\n  }\n  <div class=\"model-factor-inner\" #badgeOrigin=\"cdkOverlayOrigin\" cdkOverlayOrigin (click)=\"isPopoverOpen = true\">\n    <div class=\"model-factor-content\" >\n      <div class=\"model-factor-name\">\n        {{factor.name}}\n      </div>\n      <progressbar [factorScore]=\"factorScore\"></progressbar>\n      <div class=\"model-factor-details\">\n        @if (userSettings.settings.user.modelFilter.advanced) {\n          <age-indicator [lastMeasured]=\"factorScore.lastMeasured\"></age-indicator>\n        }\n        @if (dataAvailable) {\n          <delta-arrow [factorScore]=\"factorScore\" [delta]=\"delta\"></delta-arrow>\n        }\n      </div>\n    </div>\n\n    @if (userSettings.settings.user.modelFilter.advanced) {\n      <div class=\"model-factor-bottom\">\n        <span class=\"meta-actions\" [title]=\"factorScore.interventionSummary.open + ' open improvement actions, versus ' + factorScore.interventionSummary.completed + ' completed improvement actions'\">\n          <span [routerLink]=\"[baseUrl, 'actions']\" [queryParams]=\"{ state: InterventionStateEnum.open, expectedImpactOn: factor.publicKey }\">{{factorScore.interventionSummary.open}}</span>/\n          <span [routerLink]=\"[baseUrl, 'actions']\" [queryParams]=\"{ state: InterventionStateEnum.completed, expectedImpactOn: factor.publicKey }\">{{factorScore.interventionSummary.completed}}</span>\n        </span>\n        @if (factorScore.interventionSummary.impeded > 0) {\n          <span class=\"meta-impeded\" [title]=\"factorScore.interventionSummary.impeded + ' improvement actions are blocked, and teams are requesting support'\" [routerLink]=\"[baseUrl, 'actions']\" [queryParams]=\"{ state: InterventionStateEnum.impeded, expectedImpactOn: factor.publicKey }\">\n            <img class=\"icon\" src=\"/assets/img/impeded.svg\" />{{factorScore.interventionSummary.impeded}}\n          </span>\n        }\n        @if (notes.length > 0) {\n          <span class=\"meta-warnings\" notesDialog [notes]=\"notes\">\n            <span class=\"icon ph-warning-fill\"></span>\n          </span>\n        }\n      </div>\n    }\n\n    @if (!userSettings.settings.user.modelFilter.advanced) {\n      <div class=\"model-factor-bottom-empty\">\n      </div>\n    }\n  </div>\n</div>\n\n<div [id]=\"'factor-' + factor.publicKey + '-indicators'\" class=\"indicators\">\n  @for (indicator of factor.lower; track indicator) {\n    <model-factor-indicator [indicator]=\"indicator\" [actionStatusPosition]=\"expandPosition\" [visible]=\"expandIndicators && allowExpand\"></model-factor-indicator>\n  }\n</div>\n\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"badgeOrigin\" [cdkConnectedOverlayPush]=\"true\" [cdkConnectedOverlayViewportMargin]=\"8\" [cdkConnectedOverlayOpen]=\"isPopoverOpen\" [cdkConnectedOverlayHasBackdrop]=\"true\" [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\" [cdkConnectedOverlayPositions]=\"overlayPositions\" (backdropClick)=\"isPopoverOpen = false\">\n   <div class=\"popover\" [id]=\"'popover-' + factor.publicKey\">\n      <div class=\"popover-container\">\n         <span (click)=\"isPopoverOpen = false\" class=\"close ph-x\"></span>\n         <h3 factorInformationDialog [factor]=\"factor\">\n            {{factor.name}}\n            <span class=\"icon ph-info-fill\"></span>\n         </h3>\n         <div class=\"description\">{{factor.description}}</div>\n\n         <model-factor-benchmark [factor]=\"factorScore\" [benchmark]=\"benchmark\"></model-factor-benchmark>\n         <model-factor-breakdown [factor]=\"factorScore\"></model-factor-breakdown>\n         <quicktips [dimensionKey]=\"factor.publicKey\" [extraClass]=\"'quicktips-popover'\"></quicktips>\n\n         @if (factorScore.recommendation.available) {\n         <div class=\"link\">\n            <a [routerLink]=\"[baseUrl, 'tips']\" [fragment]=\"factor.publicKey\">discover how to improve ></a>\n         </div>\n         }\n      </div>\n      <div class=\"arrow\"></div>\n   </div>\n</ng-template>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DeltaArrowComponent, selector: "delta-arrow", inputs: ["factorScore", "delta", "noDataIndicator"] }, { kind: "component", type: AgeIndicatorComponent, selector: "age-indicator", inputs: ["lastMeasured"] }, { kind: "component", type: QuickTipsComponent, selector: "quicktips", inputs: ["dimensionKey", "extraClass"] }, { kind: "directive", type: OpenNotesDialogDirective, selector: "[notesDialog]", inputs: ["notes"] }, { kind: "directive", type: OpenFactorInformationDialogDirective, selector: "[factorInformationDialog]", inputs: ["factor"] }, { kind: "component", type: ProgressbarComponent, selector: "progressbar", inputs: ["factorScore"] }, { kind: "directive", type: i12.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i12.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ModelFactorIndicatorComponent, selector: "model-factor-indicator", inputs: ["indicator", "actionStatusPosition", "visible"] }, { kind: "component", type: ModelFactorBenchmarkComponent, selector: "model-factor-benchmark", inputs: ["factor", "benchmark"] }, { kind: "component", type: ModelFactorBreakdownComponent, selector: "model-factor-breakdown", inputs: ["factor", "pageSize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ModelFactorCoreComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'model-factor-core', standalone: false, template: "<div [class]=\"'model-factor model-factor-' + direction\" [ngClass]=\"{'model-factor-fade' : !isInActiveLayer || !dataAvailable}\" [id]=\"'factor-' + factor.publicKey\">\n  @if (allowExpand) {\n    <div [class]=\"'model-factor-expand model-factor-expand-' + expandPosition\" [ngClass]=\"{'expanded': expandIndicators}\" (click)=\"toggleIndicators()\" [id]=\"'factor-' + factor.publicKey + '-expand'\">\n      <span class=\"plus\">+</span>\n    </div>\n  }\n  <div class=\"model-factor-inner\" #factorAnchor>\n    <div class=\"model-factor-content\" (click)=\"popover.open()\">\n      <div class=\"model-factor-name\">\n        {{factor.name}}\n      </div>\n      <progressbar [factorScore]=\"factorScore\"></progressbar>\n      <div class=\"model-factor-details\">\n        @if (userSettings.settings.user.modelFilter.advanced) {\n          <age-indicator [lastMeasured]=\"factorScore.lastMeasured\"></age-indicator>\n        }\n        @if (dataAvailable) {\n          <delta-arrow [factorScore]=\"factorScore\" [delta]=\"delta\"></delta-arrow>\n        }\n      </div>\n    </div>\n\n    @if (userSettings.settings.user.modelFilter.advanced) {\n      <div class=\"model-factor-bottom\">\n        <span class=\"meta-actions\" [title]=\"factorScore.interventionSummary.open + ' open improvement actions, versus ' + factorScore.interventionSummary.completed + ' completed improvement actions'\">\n          <span [routerLink]=\"[baseUrl, 'actions']\" [queryParams]=\"{ state: InterventionStateEnum.open, expectedImpactOn: factor.publicKey }\">{{factorScore.interventionSummary.open}}</span>/\n          <span [routerLink]=\"[baseUrl, 'actions']\" [queryParams]=\"{ state: InterventionStateEnum.completed, expectedImpactOn: factor.publicKey }\">{{factorScore.interventionSummary.completed}}</span>\n        </span>\n        @if (factorScore.interventionSummary.impeded > 0) {\n          <span class=\"meta-impeded\" [title]=\"factorScore.interventionSummary.impeded + ' improvement actions are blocked, and teams are requesting support'\" [routerLink]=\"[baseUrl, 'actions']\" [queryParams]=\"{ state: InterventionStateEnum.impeded, expectedImpactOn: factor.publicKey }\">\n            <img class=\"icon\" src=\"/assets/img/impeded.svg\" />{{factorScore.interventionSummary.impeded}}\n          </span>\n        }\n        @if (notes.length > 0) {\n          <span class=\"meta-warnings\" notesDialog [notes]=\"notes\">\n            <span class=\"icon ph-warning-fill\"></span>\n          </span>\n        }\n      </div>\n    }\n\n    @if (!userSettings.settings.user.modelFilter.advanced) {\n      <div class=\"model-factor-bottom-empty\">\n      </div>\n    }\n  </div>\n</div>\n\n<div [id]=\"'factor-' + factor.publicKey + '-indicators'\" class=\"indicators\">\n  @for (indicator of factor.lower; track indicator) {\n    <model-factor-indicator [indicator]=\"indicator\" [actionStatusPosition]=\"expandPosition\" [visible]=\"expandIndicators && allowExpand\"></model-factor-indicator>\n  }\n</div>\n\n<sat-popover #popover horizontalAlign=\"after\" [anchor]=\"factorAnchor\" verticalAlign=\"center\" [hasBackdrop]=\"true\" [autoFocus]=\"false\">\n  <div class=\"popover\" [id]=\"'popover-' + factor.publicKey\">\n    <div class=\"popover-container\">\n      <span (click)=\"popover.close()\" class=\"close ph-x\"></span>\n      <h3 factorInformationDialog [factor]=\"factor\">\n        {{factor.name}}\n        <span class=\"icon ph-info-fill\"></span>\n      </h3>\n      <div class=\"description\">{{factor.description}}</div>\n\n      <model-factor-benchmark [factor]=\"factorScore\" [benchmark]=\"benchmark\"></model-factor-benchmark>\n      <model-factor-breakdown [factor]=\"factorScore\"></model-factor-breakdown>\n      <quicktips [dimensionKey]=\"factor.publicKey\" [extraClass]=\"'quicktips-popover'\"></quicktips>\n\n      @if (factorScore.recommendation.available) {\n        <div class=\"link\">\n          <a [routerLink]=\"[baseUrl, 'tips']\" [fragment]=\"factor.publicKey\">discover how to improve ></a>\n        </div>\n      }\n    </div>\n    <div class=\"arrow\"></div>\n  </div>\n</sat-popover>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}\n"] }]
+            args: [{ selector: 'model-factor-core', standalone: false, template: "<div [class]=\"'model-factor model-factor-' + direction\" [ngClass]=\"{'model-factor-fade' : !isInActiveLayer || !dataAvailable}\" [id]=\"'factor-' + factor.publicKey\">\n  @if (allowExpand) {\n    <div [class]=\"'model-factor-expand model-factor-expand-' + expandPosition\" [ngClass]=\"{'expanded': expandIndicators}\" (click)=\"toggleIndicators()\" [id]=\"'factor-' + factor.publicKey + '-expand'\">\n      <span class=\"plus\">+</span>\n    </div>\n  }\n  <div class=\"model-factor-inner\" #badgeOrigin=\"cdkOverlayOrigin\" cdkOverlayOrigin (click)=\"isPopoverOpen = true\">\n    <div class=\"model-factor-content\" >\n      <div class=\"model-factor-name\">\n        {{factor.name}}\n      </div>\n      <progressbar [factorScore]=\"factorScore\"></progressbar>\n      <div class=\"model-factor-details\">\n        @if (userSettings.settings.user.modelFilter.advanced) {\n          <age-indicator [lastMeasured]=\"factorScore.lastMeasured\"></age-indicator>\n        }\n        @if (dataAvailable) {\n          <delta-arrow [factorScore]=\"factorScore\" [delta]=\"delta\"></delta-arrow>\n        }\n      </div>\n    </div>\n\n    @if (userSettings.settings.user.modelFilter.advanced) {\n      <div class=\"model-factor-bottom\">\n        <span class=\"meta-actions\" [title]=\"factorScore.interventionSummary.open + ' open improvement actions, versus ' + factorScore.interventionSummary.completed + ' completed improvement actions'\">\n          <span [routerLink]=\"[baseUrl, 'actions']\" [queryParams]=\"{ state: InterventionStateEnum.open, expectedImpactOn: factor.publicKey }\">{{factorScore.interventionSummary.open}}</span>/\n          <span [routerLink]=\"[baseUrl, 'actions']\" [queryParams]=\"{ state: InterventionStateEnum.completed, expectedImpactOn: factor.publicKey }\">{{factorScore.interventionSummary.completed}}</span>\n        </span>\n        @if (factorScore.interventionSummary.impeded > 0) {\n          <span class=\"meta-impeded\" [title]=\"factorScore.interventionSummary.impeded + ' improvement actions are blocked, and teams are requesting support'\" [routerLink]=\"[baseUrl, 'actions']\" [queryParams]=\"{ state: InterventionStateEnum.impeded, expectedImpactOn: factor.publicKey }\">\n            <img class=\"icon\" src=\"/assets/img/impeded.svg\" />{{factorScore.interventionSummary.impeded}}\n          </span>\n        }\n        @if (notes.length > 0) {\n          <span class=\"meta-warnings\" notesDialog [notes]=\"notes\">\n            <span class=\"icon ph-warning-fill\"></span>\n          </span>\n        }\n      </div>\n    }\n\n    @if (!userSettings.settings.user.modelFilter.advanced) {\n      <div class=\"model-factor-bottom-empty\">\n      </div>\n    }\n  </div>\n</div>\n\n<div [id]=\"'factor-' + factor.publicKey + '-indicators'\" class=\"indicators\">\n  @for (indicator of factor.lower; track indicator) {\n    <model-factor-indicator [indicator]=\"indicator\" [actionStatusPosition]=\"expandPosition\" [visible]=\"expandIndicators && allowExpand\"></model-factor-indicator>\n  }\n</div>\n\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"badgeOrigin\" [cdkConnectedOverlayPush]=\"true\" [cdkConnectedOverlayViewportMargin]=\"8\" [cdkConnectedOverlayOpen]=\"isPopoverOpen\" [cdkConnectedOverlayHasBackdrop]=\"true\" [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\" [cdkConnectedOverlayPositions]=\"overlayPositions\" (backdropClick)=\"isPopoverOpen = false\">\n   <div class=\"popover\" [id]=\"'popover-' + factor.publicKey\">\n      <div class=\"popover-container\">\n         <span (click)=\"isPopoverOpen = false\" class=\"close ph-x\"></span>\n         <h3 factorInformationDialog [factor]=\"factor\">\n            {{factor.name}}\n            <span class=\"icon ph-info-fill\"></span>\n         </h3>\n         <div class=\"description\">{{factor.description}}</div>\n\n         <model-factor-benchmark [factor]=\"factorScore\" [benchmark]=\"benchmark\"></model-factor-benchmark>\n         <model-factor-breakdown [factor]=\"factorScore\"></model-factor-breakdown>\n         <quicktips [dimensionKey]=\"factor.publicKey\" [extraClass]=\"'quicktips-popover'\"></quicktips>\n\n         @if (factorScore.recommendation.available) {\n         <div class=\"link\">\n            <a [routerLink]=\"[baseUrl, 'tips']\" [fragment]=\"factor.publicKey\">discover how to improve ></a>\n         </div>\n         }\n      </div>\n      <div class=\"arrow\"></div>\n   </div>\n</ng-template>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}\n"] }]
         }], ctorParameters: () => [{ type: ViewModelStateBase, decorators: [{
                     type: Inject,
                     args: [VIEWSTATE_PROVIDER]
@@ -5899,16 +5928,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
 
 class BadgeProgressionComponent {
     constructor() {
+        this.isPopoverOpen = false;
+        this.overlayPositions = [
+            {
+                originX: 'center',
+                originY: 'bottom',
+                overlayX: 'center',
+                overlayY: 'top',
+                offsetY: 8
+            }
+        ];
     }
     badgeType() {
         return this.badge.type;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BadgeProgressionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: BadgeProgressionComponent, isStandalone: false, selector: "badge-progression", inputs: { showName: "showName", badge: "badge", radius: "radius" }, ngImport: i0, template: "<div class=\"team-badge progression\" [ngClass]=\"{'unearned': !badge.awarded}\" #badgeContainer (click)=\"popover.open()\">\n  <div [class]=\"'circle level-' + badge.level\" [ngStyle]=\"{'width': radius + 'px', 'height': radius + 'px', 'border-radius': radius + 'px'}\">\n    <span [class]=\"'icon ' + badge.icon\"></span>\n    <mat-progress-spinner [diameter]=\"radius\" strokeWidth=\"6\" mode=\"determinate\" [value]=\"badge.nextLevelProgress * 100\"></mat-progress-spinner>\n    <div class=\"gloss\">\n      <div class=\"gloss1\"></div>\n      <div class=\"gloss2\"></div>\n    </div>\n  </div>\n  @if (showName) {\n    <div class=\"name\">{{badge.name}}</div>\n  }\n</div>\n\n<sat-popover #popover horizontalAlign=\"center\" [anchor]=\"badgeContainer\" verticalAlign=\"below\" [hasBackdrop]=\"true\" [autoFocus]=\"false\">\n  <div [class]=\"'popover level-' + badge.level\" [id]=\"'popover'\">\n    <div class=\"arrow\"></div>\n    <div class=\"popover-container\">\n      <span (click)=\"popover.close()\" class=\"close ph-x\"></span>\n      @if (badge.level == 0) {\n        <h3>{{badge.name}}</h3>\n      }\n      @if (badge.level == 1) {\n        <h3>{{badge.name}} <span>Bronze Level</span></h3>\n      }\n      @if (badge.level == 2) {\n        <h3>{{badge.name}} <span>Silver Level</span></h3>\n      }\n      @if (badge.level == 3) {\n        <h3>{{badge.name}} <span>Gold Level</span></h3>\n      }\n      @if (badge.level == 4) {\n        <h3>{{badge.name}} <span>Platinum Level</span></h3>\n      }\n      @if (badge.level == 5) {\n        <h3>{{badge.name}} <span>Diamond Level</span></h3>\n      }\n      <div class=\"description\">{{badge.description}}</div>\n\n      <h3>How to reach the next level</h3>\n      <div class=\"description\">{{badge.nextLevelRequirement}}</div>\n    </div>\n  </div>\n</sat-popover>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}.popover{margin-left:15px}.popover.level-1 h3 span{color:#cb8e56}.popover.level-2 h3 span{color:#bdbcbc}.popover.level-3 h3 span{color:#eac338}.popover.level-4 h3 span{color:#afd3de}.popover.level-5 h3 span{color:#ef4f9f}.popover .arrow{width:15px;height:15px;background:#2f2f2f;transform:rotate(45deg);left:50%;position:absolute;top:-8px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: BadgeProgressionComponent, isStandalone: false, selector: "badge-progression", inputs: { showName: "showName", badge: "badge", radius: "radius" }, ngImport: i0, template: "<div class=\"team-badge progression\" [ngClass]=\"{'unearned': !badge.awarded}\" #badgeOrigin=\"cdkOverlayOrigin\" cdkOverlayOrigin (click)=\"isPopoverOpen = true\">\n  <div [class]=\"'circle level-' + badge.level\" [ngStyle]=\"{'width': radius + 'px', 'height': radius + 'px', 'border-radius': radius + 'px'}\">\n    <span [class]=\"'icon ' + badge.icon\"></span>\n    <mat-progress-spinner [diameter]=\"radius\" strokeWidth=\"6\" mode=\"determinate\" [value]=\"badge.nextLevelProgress * 100\"></mat-progress-spinner>\n    <div class=\"gloss\">\n      <div class=\"gloss1\"></div>\n      <div class=\"gloss2\"></div>\n    </div>\n  </div>\n  @if (showName) {\n    <div class=\"name\">{{badge.name}}</div>\n  }\n</div>\n\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"badgeOrigin\" [cdkConnectedOverlayPush]=\"true\" [cdkConnectedOverlayViewportMargin]=\"8\" [cdkConnectedOverlayOpen]=\"isPopoverOpen\" [cdkConnectedOverlayHasBackdrop]=\"true\" [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\" [cdkConnectedOverlayPositions]=\"overlayPositions\" (backdropClick)=\"isPopoverOpen = false\">\n   <div [class]=\"'popover level-' + badge.level\" [id]=\"'popover'\">\n      <div class=\"arrow\"></div>\n      <div class=\"popover-container\">\n         <span (click)=\"isPopoverOpen = false\" class=\"close ph-x\"></span>\n         @if (badge.level == 0) {\n         <h3>{{badge.name}}</h3>\n         }\n         @if (badge.level == 1) {\n         <h3>{{badge.name}} <span>Bronze Level</span></h3>\n         }\n         @if (badge.level == 2) {\n         <h3>{{badge.name}} <span>Silver Level</span></h3>\n         }\n         @if (badge.level == 3) {\n         <h3>{{badge.name}} <span>Gold Level</span></h3>\n         }\n         @if (badge.level == 4) {\n         <h3>{{badge.name}} <span>Platinum Level</span></h3>\n         }\n         @if (badge.level == 5) {\n         <h3>{{badge.name}} <span>Diamond Level</span></h3>\n         }\n         <div class=\"description\">{{badge.description}}</div>\n\n         <h3>How to reach the next level</h3>\n         <div class=\"description\">{{badge.nextLevelRequirement}}</div>\n      </div>\n   </div>\n   </ng-template>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}.popover{margin-left:15px}.popover.level-1 h3 span{color:#cb8e56}.popover.level-2 h3 span{color:#bdbcbc}.popover.level-3 h3 span{color:#eac338}.popover.level-4 h3 span{color:#afd3de}.popover.level-5 h3 span{color:#ef4f9f}.popover .arrow{width:15px;height:15px;background:#2f2f2f;transform:rotate(45deg);left:50%;position:absolute;top:-8px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i12.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i12.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i3$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BadgeProgressionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'badge-progression', standalone: false, template: "<div class=\"team-badge progression\" [ngClass]=\"{'unearned': !badge.awarded}\" #badgeContainer (click)=\"popover.open()\">\n  <div [class]=\"'circle level-' + badge.level\" [ngStyle]=\"{'width': radius + 'px', 'height': radius + 'px', 'border-radius': radius + 'px'}\">\n    <span [class]=\"'icon ' + badge.icon\"></span>\n    <mat-progress-spinner [diameter]=\"radius\" strokeWidth=\"6\" mode=\"determinate\" [value]=\"badge.nextLevelProgress * 100\"></mat-progress-spinner>\n    <div class=\"gloss\">\n      <div class=\"gloss1\"></div>\n      <div class=\"gloss2\"></div>\n    </div>\n  </div>\n  @if (showName) {\n    <div class=\"name\">{{badge.name}}</div>\n  }\n</div>\n\n<sat-popover #popover horizontalAlign=\"center\" [anchor]=\"badgeContainer\" verticalAlign=\"below\" [hasBackdrop]=\"true\" [autoFocus]=\"false\">\n  <div [class]=\"'popover level-' + badge.level\" [id]=\"'popover'\">\n    <div class=\"arrow\"></div>\n    <div class=\"popover-container\">\n      <span (click)=\"popover.close()\" class=\"close ph-x\"></span>\n      @if (badge.level == 0) {\n        <h3>{{badge.name}}</h3>\n      }\n      @if (badge.level == 1) {\n        <h3>{{badge.name}} <span>Bronze Level</span></h3>\n      }\n      @if (badge.level == 2) {\n        <h3>{{badge.name}} <span>Silver Level</span></h3>\n      }\n      @if (badge.level == 3) {\n        <h3>{{badge.name}} <span>Gold Level</span></h3>\n      }\n      @if (badge.level == 4) {\n        <h3>{{badge.name}} <span>Platinum Level</span></h3>\n      }\n      @if (badge.level == 5) {\n        <h3>{{badge.name}} <span>Diamond Level</span></h3>\n      }\n      <div class=\"description\">{{badge.description}}</div>\n\n      <h3>How to reach the next level</h3>\n      <div class=\"description\">{{badge.nextLevelRequirement}}</div>\n    </div>\n  </div>\n</sat-popover>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}.popover{margin-left:15px}.popover.level-1 h3 span{color:#cb8e56}.popover.level-2 h3 span{color:#bdbcbc}.popover.level-3 h3 span{color:#eac338}.popover.level-4 h3 span{color:#afd3de}.popover.level-5 h3 span{color:#ef4f9f}.popover .arrow{width:15px;height:15px;background:#2f2f2f;transform:rotate(45deg);left:50%;position:absolute;top:-8px}\n"] }]
+            args: [{ selector: 'badge-progression', standalone: false, template: "<div class=\"team-badge progression\" [ngClass]=\"{'unearned': !badge.awarded}\" #badgeOrigin=\"cdkOverlayOrigin\" cdkOverlayOrigin (click)=\"isPopoverOpen = true\">\n  <div [class]=\"'circle level-' + badge.level\" [ngStyle]=\"{'width': radius + 'px', 'height': radius + 'px', 'border-radius': radius + 'px'}\">\n    <span [class]=\"'icon ' + badge.icon\"></span>\n    <mat-progress-spinner [diameter]=\"radius\" strokeWidth=\"6\" mode=\"determinate\" [value]=\"badge.nextLevelProgress * 100\"></mat-progress-spinner>\n    <div class=\"gloss\">\n      <div class=\"gloss1\"></div>\n      <div class=\"gloss2\"></div>\n    </div>\n  </div>\n  @if (showName) {\n    <div class=\"name\">{{badge.name}}</div>\n  }\n</div>\n\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"badgeOrigin\" [cdkConnectedOverlayPush]=\"true\" [cdkConnectedOverlayViewportMargin]=\"8\" [cdkConnectedOverlayOpen]=\"isPopoverOpen\" [cdkConnectedOverlayHasBackdrop]=\"true\" [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\" [cdkConnectedOverlayPositions]=\"overlayPositions\" (backdropClick)=\"isPopoverOpen = false\">\n   <div [class]=\"'popover level-' + badge.level\" [id]=\"'popover'\">\n      <div class=\"arrow\"></div>\n      <div class=\"popover-container\">\n         <span (click)=\"isPopoverOpen = false\" class=\"close ph-x\"></span>\n         @if (badge.level == 0) {\n         <h3>{{badge.name}}</h3>\n         }\n         @if (badge.level == 1) {\n         <h3>{{badge.name}} <span>Bronze Level</span></h3>\n         }\n         @if (badge.level == 2) {\n         <h3>{{badge.name}} <span>Silver Level</span></h3>\n         }\n         @if (badge.level == 3) {\n         <h3>{{badge.name}} <span>Gold Level</span></h3>\n         }\n         @if (badge.level == 4) {\n         <h3>{{badge.name}} <span>Platinum Level</span></h3>\n         }\n         @if (badge.level == 5) {\n         <h3>{{badge.name}} <span>Diamond Level</span></h3>\n         }\n         <div class=\"description\">{{badge.description}}</div>\n\n         <h3>How to reach the next level</h3>\n         <div class=\"description\">{{badge.nextLevelRequirement}}</div>\n      </div>\n   </div>\n   </ng-template>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}.popover{margin-left:15px}.popover.level-1 h3 span{color:#cb8e56}.popover.level-2 h3 span{color:#bdbcbc}.popover.level-3 h3 span{color:#eac338}.popover.level-4 h3 span{color:#afd3de}.popover.level-5 h3 span{color:#ef4f9f}.popover .arrow{width:15px;height:15px;background:#2f2f2f;transform:rotate(45deg);left:50%;position:absolute;top:-8px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { showName: [{
                 type: Input
             }], badge: [{
@@ -5919,6 +5958,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
 
 class BadgeStreakComponent {
     constructor() {
+        this.isPopoverOpen = false;
+        this.overlayPositions = [
+            {
+                originX: 'center',
+                originY: 'bottom',
+                overlayX: 'center',
+                overlayY: 'top',
+                offsetY: 8
+            }
+        ];
     }
     getStreakBadgeType() {
         if (this.badge.name.toLowerCase().indexOf("high ") > -1) {
@@ -5929,11 +5978,11 @@ class BadgeStreakComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BadgeStreakComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: BadgeStreakComponent, isStandalone: false, selector: "badge-streak", inputs: { showName: "showName", badge: "badge", radius: "radius" }, ngImport: i0, template: "<div [class]=\"'team-badge streak ' + getStreakBadgeType()\" [ngClass]=\"{'unearned': !badge.awarded }\" #badgeContainer (click)=\"popover.open()\">\n  <div class=\"circle\" [ngStyle]=\"{'width': radius + 'px', 'height': radius + 'px', 'border-radius': radius + 'px'}\">\n    @if (badge.awarded && badge.level >= 3) {\n      <div class=\"crown\"></div>\n    }\n    <span [class]=\"'icon ' + badge.icon\"></span>\n    @if (badge.awarded) {\n      <div class=\"level\">{{badge.level}}</div>\n    }\n  </div>\n  @if (showName) {\n    <div class=\"name\">{{badge.name}}</div>\n  }\n</div>\n\n<sat-popover #popover horizontalAlign=\"center\" [anchor]=\"badgeContainer\" verticalAlign=\"below\" [hasBackdrop]=\"true\" [autoFocus]=\"false\">\n  <div class=\"popover\" [id]=\"'popover'\">\n    <div class=\"arrow\"></div>\n    <div class=\"popover-container\">\n      <span (click)=\"popover.close()\" class=\"close ph-x\"></span>\n      @if (badge.level == 0) {\n        <h3>{{badge.name}}</h3>\n      }\n      @if (badge.level > 0) {\n        <h3>{{badge.name}} <span>Streak of {{badge.level}}</span></h3>\n      }\n      <div class=\"description\">{{badge.description}}</div>\n\n      <h3>How to reach the next level</h3>\n      <div class=\"description\">{{badge.nextLevelRequirement}}</div>\n    </div>\n  </div>\n</sat-popover>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}.popover{margin-left:15px}.popover h3 span{color:#fff73f}.popover .arrow{width:15px;height:15px;background:#2f2f2f;transform:rotate(45deg);left:50%;position:absolute;top:-8px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i10.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: BadgeStreakComponent, isStandalone: false, selector: "badge-streak", inputs: { showName: "showName", badge: "badge", radius: "radius" }, ngImport: i0, template: "<div [class]=\"'team-badge streak ' + getStreakBadgeType()\" [ngClass]=\"{'unearned': !badge.awarded }\" #badgeOrigin=\"cdkOverlayOrigin\" cdkOverlayOrigin (click)=\"isPopoverOpen = true\">\n   <div class=\"circle\" [ngStyle]=\"{'width': radius + 'px', 'height': radius + 'px', 'border-radius': radius + 'px'}\">\n      @if (badge.awarded && badge.level >= 3) {\n      <div class=\"crown\"></div>\n      }\n      <span [class]=\"'icon ' + badge.icon\"></span>\n      @if (badge.awarded) {\n      <div class=\"level\">{{badge.level}}</div>\n      }\n   </div>\n   @if (showName) {\n   <div class=\"name\">{{badge.name}}</div>\n   }\n</div>\n\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"badgeOrigin\" [cdkConnectedOverlayPush]=\"true\" [cdkConnectedOverlayViewportMargin]=\"8\" [cdkConnectedOverlayOpen]=\"isPopoverOpen\" [cdkConnectedOverlayHasBackdrop]=\"true\" [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\" [cdkConnectedOverlayPositions]=\"overlayPositions\" (backdropClick)=\"isPopoverOpen = false\">\n   <div class=\"popover\" [id]=\"'popover'\">\n      <div class=\"arrow\"></div>\n      <div class=\"popover-container\">\n         <span (click)=\"isPopoverOpen = false\" class=\"close ph-x\"></span>\n         @if (badge.level == 0) {\n         <h3>{{badge.name}}</h3>\n         }\n         @if (badge.level > 0) {\n         <h3>{{badge.name}} <span>Streak of {{badge.level}}</span></h3>\n         }\n         <div class=\"description\">{{badge.description}}</div>\n\n         <h3>How to reach the next level</h3>\n         <div class=\"description\">{{badge.nextLevelRequirement}}</div>\n      </div>\n   </div>\n</ng-template>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}.popover{margin-left:15px}.popover h3 span{color:#fff73f}.popover .arrow{width:15px;height:15px;background:#2f2f2f;transform:rotate(45deg);left:50%;position:absolute;top:-8px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i12.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i12.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BadgeStreakComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'badge-streak', standalone: false, template: "<div [class]=\"'team-badge streak ' + getStreakBadgeType()\" [ngClass]=\"{'unearned': !badge.awarded }\" #badgeContainer (click)=\"popover.open()\">\n  <div class=\"circle\" [ngStyle]=\"{'width': radius + 'px', 'height': radius + 'px', 'border-radius': radius + 'px'}\">\n    @if (badge.awarded && badge.level >= 3) {\n      <div class=\"crown\"></div>\n    }\n    <span [class]=\"'icon ' + badge.icon\"></span>\n    @if (badge.awarded) {\n      <div class=\"level\">{{badge.level}}</div>\n    }\n  </div>\n  @if (showName) {\n    <div class=\"name\">{{badge.name}}</div>\n  }\n</div>\n\n<sat-popover #popover horizontalAlign=\"center\" [anchor]=\"badgeContainer\" verticalAlign=\"below\" [hasBackdrop]=\"true\" [autoFocus]=\"false\">\n  <div class=\"popover\" [id]=\"'popover'\">\n    <div class=\"arrow\"></div>\n    <div class=\"popover-container\">\n      <span (click)=\"popover.close()\" class=\"close ph-x\"></span>\n      @if (badge.level == 0) {\n        <h3>{{badge.name}}</h3>\n      }\n      @if (badge.level > 0) {\n        <h3>{{badge.name}} <span>Streak of {{badge.level}}</span></h3>\n      }\n      <div class=\"description\">{{badge.description}}</div>\n\n      <h3>How to reach the next level</h3>\n      <div class=\"description\">{{badge.nextLevelRequirement}}</div>\n    </div>\n  </div>\n</sat-popover>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}.popover{margin-left:15px}.popover h3 span{color:#fff73f}.popover .arrow{width:15px;height:15px;background:#2f2f2f;transform:rotate(45deg);left:50%;position:absolute;top:-8px}\n"] }]
+            args: [{ selector: 'badge-streak', standalone: false, template: "<div [class]=\"'team-badge streak ' + getStreakBadgeType()\" [ngClass]=\"{'unearned': !badge.awarded }\" #badgeOrigin=\"cdkOverlayOrigin\" cdkOverlayOrigin (click)=\"isPopoverOpen = true\">\n   <div class=\"circle\" [ngStyle]=\"{'width': radius + 'px', 'height': radius + 'px', 'border-radius': radius + 'px'}\">\n      @if (badge.awarded && badge.level >= 3) {\n      <div class=\"crown\"></div>\n      }\n      <span [class]=\"'icon ' + badge.icon\"></span>\n      @if (badge.awarded) {\n      <div class=\"level\">{{badge.level}}</div>\n      }\n   </div>\n   @if (showName) {\n   <div class=\"name\">{{badge.name}}</div>\n   }\n</div>\n\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"badgeOrigin\" [cdkConnectedOverlayPush]=\"true\" [cdkConnectedOverlayViewportMargin]=\"8\" [cdkConnectedOverlayOpen]=\"isPopoverOpen\" [cdkConnectedOverlayHasBackdrop]=\"true\" [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\" [cdkConnectedOverlayPositions]=\"overlayPositions\" (backdropClick)=\"isPopoverOpen = false\">\n   <div class=\"popover\" [id]=\"'popover'\">\n      <div class=\"arrow\"></div>\n      <div class=\"popover-container\">\n         <span (click)=\"isPopoverOpen = false\" class=\"close ph-x\"></span>\n         @if (badge.level == 0) {\n         <h3>{{badge.name}}</h3>\n         }\n         @if (badge.level > 0) {\n         <h3>{{badge.name}} <span>Streak of {{badge.level}}</span></h3>\n         }\n         <div class=\"description\">{{badge.description}}</div>\n\n         <h3>How to reach the next level</h3>\n         <div class=\"description\">{{badge.nextLevelRequirement}}</div>\n      </div>\n   </div>\n</ng-template>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}.popover{margin-left:15px}.popover h3 span{color:#fff73f}.popover .arrow{width:15px;height:15px;background:#2f2f2f;transform:rotate(45deg);left:50%;position:absolute;top:-8px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { showName: [{
                 type: Input
             }], badge: [{
@@ -7539,13 +7588,13 @@ class ResultsModule {
             ReactiveFormsModule,
             MatOptionModule,
             MatInputModule,
+            OverlayModule,
             MatSlideToggleModule,
             BrandingModule,
             MatSelectModule,
             MatProgressSpinnerModule,
             MatDatepickerModule,
             DateRangePipeModule,
-            SatPopoverModule,
             ActionsModule,
             CommonModule,
             DialogSupportModule,
@@ -7620,13 +7669,13 @@ class ResultsModule {
             ReactiveFormsModule,
             MatOptionModule,
             MatInputModule,
+            OverlayModule,
             MatSlideToggleModule,
             BrandingModule,
             MatSelectModule,
             MatProgressSpinnerModule,
             MatDatepickerModule,
             DateRangePipeModule,
-            SatPopoverModule,
             ActionsModule,
             CommonModule,
             DialogSupportModule,
@@ -7651,13 +7700,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                         ReactiveFormsModule,
                         MatOptionModule,
                         MatInputModule,
+                        OverlayModule,
                         MatSlideToggleModule,
                         BrandingModule,
                         MatSelectModule,
                         MatProgressSpinnerModule,
                         MatDatepickerModule,
                         DateRangePipeModule,
-                        SatPopoverModule,
                         ActionsModule,
                         CommonModule,
                         DialogSupportModule,
@@ -7792,7 +7841,6 @@ class ModelVisualizationModule {
             FormsModule,
             RouterModule,
             ResultsModule,
-            SatPopoverModule,
             FactorInformationDialogModule,
             ProgressbarModule,
             MatTooltipModule,
@@ -7801,6 +7849,7 @@ class ModelVisualizationModule {
             MatFormFieldModule,
             ReactiveFormsModule,
             DateRangePipeModule,
+            OverlayModule,
             MatDialogModule], exports: [ModelCanvasComponent,
             ModelFactorMetricComponent,
             ModelFactorIndicatorComponent,
@@ -7813,7 +7862,6 @@ class ModelVisualizationModule {
             FormsModule,
             RouterModule,
             ResultsModule,
-            SatPopoverModule,
             FactorInformationDialogModule,
             ProgressbarModule,
             MatTooltipModule,
@@ -7822,6 +7870,7 @@ class ModelVisualizationModule {
             MatFormFieldModule,
             ReactiveFormsModule,
             DateRangePipeModule,
+            OverlayModule,
             MatDialogModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ModelVisualizationModule, decorators: [{
@@ -7832,7 +7881,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                         FormsModule,
                         RouterModule,
                         ResultsModule,
-                        SatPopoverModule,
                         FactorInformationDialogModule,
                         ProgressbarModule,
                         MatTooltipModule,
@@ -7841,6 +7889,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                         MatFormFieldModule,
                         ReactiveFormsModule,
                         DateRangePipeModule,
+                        OverlayModule,
                         MatDialogModule
                     ],
                     declarations: [