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

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';
@@ -661,6 +661,8 @@ class FactorScoreCompositionPointDto {
 }
 class FactorScoreCollectionCompositionDto {
 }
+class FactorScoreCollectionSamplingWindowsDto {
+}
 class FactorScoreCollectionCompositionSegmentDto {
 }
 class InterventionSummaryDto {
@@ -4907,6 +4909,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 +4939,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 +4964,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 +5017,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 +5046,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 +5100,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]
@@ -5134,6 +5165,7 @@ class ModelCanvasComponent extends ComponentWithViewStateBase {
         this.canManageIntegrations = this.isLoggedIn && data.appContext == "TeamsDashboard";
         this.teamsDashboardUrl = data.userInfo.branding.teamsDashboardUrl;
         this.showTeamsDashboardSetup = data.appContext == "CoachingCenter";
+        this.metricSamplingWindow = data.factorScores.samplingWindows.metrics;
         switch (data.factorScores.composition.points.type) {
             case PointTypeEnum.client:
             case PointTypeEnum.client:
@@ -5164,11 +5196,11 @@ class ModelCanvasComponent extends ComponentWithViewStateBase {
         this.userSettingService.set(this.userSettings.settings);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ModelCanvasComponent, deps: [{ token: VIEWSTATE_PROVIDER }, { token: VIEWSTATE_USERSETTINGS_STRATEGY }, { token: UserSettingService }, { token: i1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: ModelCanvasComponent, isStandalone: false, selector: "model-canvas", host: { listeners: { "window:resize": "determineScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "@if (!showModel) {\n  <div class=\"message message-warning\">\n    <div><span class=\"icon ph-info-fill\"></span> We've hidden the model visualization because your resolution is too low. Please try a larger device, like a tablet, laptop or desktop.</div>\n  </div>\n}\n\n@if (factors && showModel) {\n  <div class=\"wirebox model\">\n    <div class=\"top\">\n      <div class=\"toolbar\">\n        <div class=\"toolbar-settings\">\n          <div class=\"toolbar-setting\">\n            <div class=\"toolbar-setting-title\">Selected Benchmark</div>\n            <div class=\"toolbar-setting-label\">{{benchmark}}</div>\n          </div>\n          <div class=\"toolbar-setting\">\n            <div class=\"toolbar-setting-title\">compare results to</div>\n            @if (qualifiedBy == QualifiedByEnum.none) {\n              <div class=\"toolbar-setting-label\">No comparison</div>\n            }\n            @if (qualifiedBy == QualifiedByEnum.delta && deltaType == 'PreviousSnapshot') {\n              <div class=\"toolbar-setting-label\">Previous snapshot from {{deltaDateRange | dateRange}}</div>\n            }\n            @if (qualifiedBy == QualifiedByEnum.delta && deltaType != 'PreviousSnapshot') {\n              <div class=\"toolbar-setting-label\">Current period <span class=\"icon ph-info-fill\" [title]=\"'Current period ranges from ' + (dateRange | dateRange) + '. This includes weighed measurements from ' + pointCount + ' ' + pointType + ': ' + pointNames\"></span> with previous period  <span class=\"icon ph-info-fill\" [title]=\"'Previous period ranges from ' + (deltaDateRange | dateRange) + '. This includes weighed measurements from ' + deltaTeams + ' ' + pointType + ': ' + deltaTeamNames\"></span></div>\n            }\n            @if (qualifiedBy == QualifiedByEnum.benchmark) {\n              <div class=\"toolbar-setting-label\">Against benchmark</div>\n            }\n          </div>\n          @if (qualifiedBy != QualifiedByEnum.none) {\n            <div class=\"toolbar-setting\">\n              <div class=\"toolbar-setting-title\">comparison legend</div>\n              <div class=\"toolbar-setting-markers negative\">\n                @if (qualifiedBy == 'Benchmark') {\n                  <div class=\"toolbar-setting-marker negative\">\n                    <span class=\"marker\"></span>\n                    <span class=\"label\">lower</span>\n                  </div>\n                  <div class=\"toolbar-setting-marker positive\">\n                    <span class=\"marker\"></span>\n                    <span class=\"label\">higher</span>\n                  </div>\n                }\n                @if (qualifiedBy == 'Delta') {\n                  <div class=\"toolbar-setting-marker negative\">\n                    <span class=\"marker\"></span>\n                    <span class=\"label\">decreased</span>\n                  </div>\n                  <div class=\"toolbar-setting-marker positive\">\n                    <span class=\"marker\"></span>\n                    <span class=\"label\">improved</span>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n        <div class=\"buttons\">\n          <div class=\"button\" id=\"change-settings\" settingsDialog><span class=\"ph-faders icon\"></span> Settings</div>\n          @if (isLoggedIn) {\n            <div class=\"button\" id=\"export-factorscores\" exportFactorScoresDialog><span class=\"ph-download-simple icon\"></span> Export</div>\n          }\n        </div>\n      </div>\n    </div>\n    <div class=\"content\">\n      <div class=\"model-visualization\">\n        <div class=\"model-clarification\">\n          <span class=\"icon ph-info-fill\"></span>\n          <span class=\"message-text\">This model shows how factors are connected based on scientific research. Click <span class=\"icon ph-plus-circle-bold plus\"></span> to expand or close lower-order factors. Click factors for more detail.</span>\n        </div>\n        @if (!showModel || !showIndicatorArrows) {\n          <div class=\"model-smallscreen\">\n            <span class=\"icon ph-frame-corners-bold\"></span>\n            <span class=\"message-text\">View on a larger device to see more details.</span>\n          </div>\n        }\n        <div class=\"model-viewconfiguration\">\n          <div class=\"model-viewmode\">\n            <div class=\"model-viewmode-label\">View</div>\n            <div class=\"model-viewmode-option\" (click)=\"toggleView(false)\" [ngClass]=\"{'selected': !userSettings.settings.user.modelFilter.advanced}\">\n              @if (!userSettings.settings.user.modelFilter.advanced) {\n                <span class=\"icon ph-check-fill\"></span>\n                }Simple\n              </div>\n              <div class=\"model-viewmode-option selected\" (click)=\"toggleView(true)\" [ngClass]=\"{'selected': userSettings.settings.user.modelFilter.advanced}\">\n                @if (userSettings.settings.user.modelFilter.advanced) {\n                  <span class=\"icon ph-check-fill\"></span>\n                  }Advanced\n                </div>\n              </div>\n              <div class=\"model-viewmode model-layers\">\n                <div class=\"model-viewmode-label\">Source</div>\n                @for (layer of userSettings.settings.user.modelFilter.layers; track layer) {\n                  <div class=\"model-viewmode-option\" (click)=\"toggleLayer(layer)\" [ngClass]=\"{'selected': layer.selected}\">\n                    @if (layer.selected) {\n                      <span class=\"icon ph-check-fill\"></span>\n                      }{{layer.label}}\n                    </div>\n                  }\n                </div>\n                @if (globalNotes.length > 0) {\n                  <div class=\"model-warnings\" notesDialog [notes]=\"globalNotes\">\n                    <span class=\"ph-warning-fill icon\"></span>\n                    @if (globalNotes.length == 1) {\n                      <span>{{globalNotes.length}} warning</span>\n                    }\n                    @if (globalNotes.length > 1) {\n                      <span>{{globalNotes.length}} warnings</span>\n                    }\n                  </div>\n                }\n              </div>\n              <div class=\"model-frame\" [class]=\"'model-visualization-' + modelDefinition.publicKey\">\n                @for (factor of factors; track factor) {\n                  <model-factor-core [factor]=\"factor\" [expandPosition]=\"factor.indicatorPosition\" [allowExpand]=\"showIndicatorArrows\"></model-factor-core>\n                }\n              </div>\n              @for (factor of factors; track factor) {\n                @for (effect of factor.effects; track effect) {\n                  <arrow [from]=\"'#factor-' + factor.publicKey\" [to]=\"'#factor-' + effect.to\" [onlyVisible]=\"true\" [tail]=\"true\" [head]=\"false\" [width]=\"2\"></arrow>\n                }\n                @if (showIndicatorArrows) {\n                  @for (lowerFactor of factor.lower; track lowerFactor) {\n                    @for (lowerEffect of lowerFactor.effects; track lowerEffect) {\n                      <arrow [from]=\"'#factor-' + lowerFactor.publicKey + '-anchor'\" [to]=\"'#factor-' + lowerEffect.to + '-expand'\" [onlyVisible]=\"true\" [tail]=\"false\" [head]=\"false\" [width]=\"1\"></arrow>\n                    }\n                  }\n                }\n              }\n              <div class=\"model-attribution\">\n                <span class=\"icon ph-info-fill\"></span>\n                <span>\n                  <span [innerHtml]=\"modelDefinition.attribution\"></span>\n                  <span>&nbsp;Read <a href=\"https://columinity.com/wiki\" target=\"_blank\">documentation</a> for details.</span>\n                </span>\n              </div>\n            </div>\n          </div>\n          <div class=\"content model-processmetrics\">\n            <h3>Process metrics <span class=\"badge badge-beta\" title=\"This feature is in beta. You may experience issues or a sub-optimal user experience as we learn from teams what is most valuable. Please share bugs or feedback with us.\">beta</span></h3>\n            @if (metrics.length > 0) {\n              <div class=\"model-factor-metrics\">\n                @for (metric of metrics; track metric) {\n                  <model-factor-metric [metric]=\"metric\"></model-factor-metric>\n                }\n              </div>\n            }\n            <div class=\"model-processmetrics-definition\">\n              @if (canManageIntegrations) {\n                <a [routerLink]=\"['/integrations']\">Manage integrations</a>.\n              }\n              @if (showTeamsDashboardSetup) {\n                Integrations can be managed from each Teams Dashboard.\n              }\n              Read <a href=\"https://columinity.com/wiki/integrate-with-other-platforms\" target=\"_blank\">documentation</a> to learn more.\n            </div>\n          </div>\n        </div>\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}.content{border-bottom:3px solid #f0f0f0}@media only screen and (max-width:1536px){.toolbar-settings{display:flex}}@media only screen and (max-width:992px){.toolbar-settings{display:block}}\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: ArrowComponent, selector: "arrow", inputs: ["from", "to", "head", "tail", "text", "toolTip", "color", "width", "onlyVisible", "fromX", "fromY", "toX", "toY"] }, { kind: "directive", type: OpenSettingsDialogDirective, selector: "[settingsDialog]", inputs: ["showSettingStacking"] }, { kind: "directive", type: OpenExportFactorScoresDialogDirective, selector: "[exportFactorScoresDialog]" }, { kind: "directive", type: OpenNotesDialogDirective, selector: "[notesDialog]", inputs: ["notes"] }, { kind: "component", type: ModelFactorMetricComponent, selector: "model-factor-metric", inputs: ["metric"] }, { kind: "component", type: ModelFactorCoreComponent, selector: "model-factor-core", inputs: ["factor", "allowExpand", "expandPosition"] }, { kind: "pipe", type: DateRangePipe, name: "dateRange" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: ModelCanvasComponent, isStandalone: false, selector: "model-canvas", host: { listeners: { "window:resize": "determineScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "@if (!showModel) {\n<div class=\"message message-warning\">\n   <div><span class=\"icon ph-info-fill\"></span> We've hidden the model visualization because your resolution is too low. Please try a larger device, like a tablet, laptop or desktop.</div>\n</div>\n}\n\n@if (factors && showModel) {\n<div class=\"wirebox model\">\n   <div class=\"top\">\n      <div class=\"toolbar\">\n         <div class=\"toolbar-settings\">\n            <div class=\"toolbar-setting\">\n               <div class=\"toolbar-setting-title\">Selected Benchmark</div>\n               <div class=\"toolbar-setting-label\">{{benchmark}}</div>\n            </div>\n            <div class=\"toolbar-setting\">\n               <div class=\"toolbar-setting-title\">compare results to</div>\n               @if (qualifiedBy == QualifiedByEnum.none) {\n               <div class=\"toolbar-setting-label\">No comparison</div>\n               }\n               @if (qualifiedBy == QualifiedByEnum.delta && deltaType == 'PreviousSnapshot') {\n               <div class=\"toolbar-setting-label\">Previous snapshot from {{deltaDateRange | dateRange}}</div>\n               }\n               @if (qualifiedBy == QualifiedByEnum.delta && deltaType != 'PreviousSnapshot') {\n               <div class=\"toolbar-setting-label\">Current period <span class=\"icon ph-info-fill\" [title]=\"'Current period ranges from ' + (dateRange | dateRange) + '. This includes weighed measurements from ' + pointCount + ' ' + pointType + ': ' + pointNames\"></span> with previous period  <span class=\"icon ph-info-fill\" [title]=\"'Previous period ranges from ' + (deltaDateRange | dateRange) + '. This includes weighed measurements from ' + deltaTeams + ' ' + pointType + ': ' + deltaTeamNames\"></span></div>\n               }\n               @if (qualifiedBy == QualifiedByEnum.benchmark) {\n               <div class=\"toolbar-setting-label\">Against benchmark</div>\n               }\n            </div>\n            @if (qualifiedBy != QualifiedByEnum.none) {\n            <div class=\"toolbar-setting\">\n               <div class=\"toolbar-setting-title\">comparison legend</div>\n               <div class=\"toolbar-setting-markers negative\">\n                  @if (qualifiedBy == 'Benchmark') {\n                  <div class=\"toolbar-setting-marker negative\">\n                     <span class=\"marker\"></span>\n                     <span class=\"label\">lower</span>\n                  </div>\n                  <div class=\"toolbar-setting-marker positive\">\n                     <span class=\"marker\"></span>\n                     <span class=\"label\">higher</span>\n                  </div>\n                  }\n                  @if (qualifiedBy == 'Delta') {\n                  <div class=\"toolbar-setting-marker negative\">\n                     <span class=\"marker\"></span>\n                     <span class=\"label\">decreased</span>\n                  </div>\n                  <div class=\"toolbar-setting-marker positive\">\n                     <span class=\"marker\"></span>\n                     <span class=\"label\">improved</span>\n                  </div>\n                  }\n               </div>\n            </div>\n            }\n         </div>\n         <div class=\"buttons\">\n            <div class=\"button\" id=\"change-settings\" settingsDialog><span class=\"ph-faders icon\"></span> Settings</div>\n            @if (isLoggedIn) {\n            <div class=\"button\" id=\"export-factorscores\" exportFactorScoresDialog><span class=\"ph-download-simple icon\"></span> Export</div>\n            }\n         </div>\n      </div>\n   </div>\n   <div class=\"content\">\n      <div class=\"model-visualization\">\n         <div class=\"model-clarification\">\n            <span class=\"icon ph-info-fill\"></span>\n            <span class=\"message-text\">This model shows how factors are connected based on scientific research. Click <span class=\"icon ph-plus-circle-bold plus\"></span> to expand or close lower-order factors. Click factors for more detail.</span>\n         </div>\n         @if (!showModel || !showIndicatorArrows) {\n         <div class=\"model-smallscreen\">\n            <span class=\"icon ph-frame-corners-bold\"></span>\n            <span class=\"message-text\">View on a larger device to see more details.</span>\n         </div>\n         }\n         <div class=\"model-viewconfiguration\">\n            <div class=\"model-viewmode\">\n               <div class=\"model-viewmode-label\">View</div>\n               <div class=\"model-viewmode-option\" (click)=\"toggleView(false)\" [ngClass]=\"{'selected': !userSettings.settings.user.modelFilter.advanced}\">\n                  @if (!userSettings.settings.user.modelFilter.advanced) {\n                  <span class=\"icon ph-check-fill\"></span>\n                  }Simple\n               </div>\n               <div class=\"model-viewmode-option selected\" (click)=\"toggleView(true)\" [ngClass]=\"{'selected': userSettings.settings.user.modelFilter.advanced}\">\n                  @if (userSettings.settings.user.modelFilter.advanced) {\n                  <span class=\"icon ph-check-fill\"></span>\n                  }Advanced\n               </div>\n            </div>\n            <div class=\"model-viewmode model-layers\">\n               <div class=\"model-viewmode-label\">Source</div>\n               @for (layer of userSettings.settings.user.modelFilter.layers; track layer) {\n               <div class=\"model-viewmode-option\" (click)=\"toggleLayer(layer)\" [ngClass]=\"{'selected': layer.selected}\">\n                  @if (layer.selected) {\n                  <span class=\"icon ph-check-fill\"></span>\n                  }{{layer.label}}\n               </div>\n               }\n            </div>\n            @if (globalNotes.length > 0) {\n            <div class=\"model-warnings\" notesDialog [notes]=\"globalNotes\">\n               <span class=\"ph-warning-fill icon\"></span>\n               @if (globalNotes.length == 1) {\n               <span>{{globalNotes.length}} warning</span>\n               }\n               @if (globalNotes.length > 1) {\n               <span>{{globalNotes.length}} warnings</span>\n               }\n            </div>\n            }\n         </div>\n         <div class=\"model-frame\" [class]=\"'model-visualization-' + modelDefinition.publicKey\">\n            @for (factor of factors; track factor) {\n            <model-factor-core [factor]=\"factor\" [expandPosition]=\"factor.indicatorPosition\" [allowExpand]=\"showIndicatorArrows\"></model-factor-core>\n            }\n         </div>\n         @for (factor of factors; track factor) {\n         @for (effect of factor.effects; track effect) {\n         <arrow [from]=\"'#factor-' + factor.publicKey\" [to]=\"'#factor-' + effect.to\" [onlyVisible]=\"true\" [tail]=\"true\" [head]=\"false\" [width]=\"2\"></arrow>\n         }\n         @if (showIndicatorArrows) {\n         @for (lowerFactor of factor.lower; track lowerFactor) {\n         @for (lowerEffect of lowerFactor.effects; track lowerEffect) {\n         <arrow [from]=\"'#factor-' + lowerFactor.publicKey + '-anchor'\" [to]=\"'#factor-' + lowerEffect.to + '-expand'\" [onlyVisible]=\"true\" [tail]=\"false\" [head]=\"false\" [width]=\"1\"></arrow>\n         }\n         }\n         }\n         }\n         <div class=\"model-attribution\">\n            <span class=\"icon ph-info-fill\"></span>\n            <span>\n               <span [innerHtml]=\"modelDefinition.attribution\"></span>\n               <span>&nbsp;Visit <a href=\"https://columinity.com/wiki/How-to-choose-between-models\" target=\"_blank\">documentation</a>.</span>\n            </span>\n         </div>\n      </div>\n   </div>\n   <div class=\"content model-processmetrics\">\n      <h3>Process metrics <span class=\"badge badge-beta\" title=\"This feature is in beta. You may experience issues or a sub-optimal user experience as we learn from teams what is most valuable. Please share bugs or feedback with us.\">beta</span></h3>\n      @if (metrics.length > 0) {\n      <div class=\"model-factor-metrics\">\n         @for (metric of metrics; track metric) {\n         <model-factor-metric [metric]=\"metric\"></model-factor-metric>\n         }\n      </div>\n      }\n      <div class=\"model-processmetrics-definition\">\n         <span class=\"icon ph-info-fill\"></span> Sampled from {{metricSamplingWindow.from | date:'MMM d'}} to {{metricSamplingWindow.to | date:'MMM d'}}.\n         @if (canManageIntegrations) {\n         <a [routerLink]=\"['/integrations']\">Manage integrations</a>.\n         }\n         @if (showTeamsDashboardSetup) {\n         Integrations can be managed from a Teams Dashboard.\n         }\n         Visit <a href=\"https://columinity.com/wiki/integrate-with-other-platforms\" target=\"_blank\">documentation</a>.\n      </div>\n   </div>\n</div>\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}.content{border-bottom:3px solid #f0f0f0}@media only screen and (max-width:1536px){.toolbar-settings{display:flex}}@media only screen and (max-width:992px){.toolbar-settings{display:block}}.model-processmetrics-definition .icon{vertical-align:middle}\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: ArrowComponent, selector: "arrow", inputs: ["from", "to", "head", "tail", "text", "toolTip", "color", "width", "onlyVisible", "fromX", "fromY", "toX", "toY"] }, { kind: "directive", type: OpenSettingsDialogDirective, selector: "[settingsDialog]", inputs: ["showSettingStacking"] }, { kind: "directive", type: OpenExportFactorScoresDialogDirective, selector: "[exportFactorScoresDialog]" }, { kind: "directive", type: OpenNotesDialogDirective, selector: "[notesDialog]", inputs: ["notes"] }, { kind: "component", type: ModelFactorMetricComponent, selector: "model-factor-metric", inputs: ["metric"] }, { kind: "component", type: ModelFactorCoreComponent, selector: "model-factor-core", inputs: ["factor", "allowExpand", "expandPosition"] }, { kind: "pipe", type: i1$4.DatePipe, name: "date" }, { kind: "pipe", type: DateRangePipe, name: "dateRange" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ModelCanvasComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'model-canvas', standalone: false, template: "@if (!showModel) {\n  <div class=\"message message-warning\">\n    <div><span class=\"icon ph-info-fill\"></span> We've hidden the model visualization because your resolution is too low. Please try a larger device, like a tablet, laptop or desktop.</div>\n  </div>\n}\n\n@if (factors && showModel) {\n  <div class=\"wirebox model\">\n    <div class=\"top\">\n      <div class=\"toolbar\">\n        <div class=\"toolbar-settings\">\n          <div class=\"toolbar-setting\">\n            <div class=\"toolbar-setting-title\">Selected Benchmark</div>\n            <div class=\"toolbar-setting-label\">{{benchmark}}</div>\n          </div>\n          <div class=\"toolbar-setting\">\n            <div class=\"toolbar-setting-title\">compare results to</div>\n            @if (qualifiedBy == QualifiedByEnum.none) {\n              <div class=\"toolbar-setting-label\">No comparison</div>\n            }\n            @if (qualifiedBy == QualifiedByEnum.delta && deltaType == 'PreviousSnapshot') {\n              <div class=\"toolbar-setting-label\">Previous snapshot from {{deltaDateRange | dateRange}}</div>\n            }\n            @if (qualifiedBy == QualifiedByEnum.delta && deltaType != 'PreviousSnapshot') {\n              <div class=\"toolbar-setting-label\">Current period <span class=\"icon ph-info-fill\" [title]=\"'Current period ranges from ' + (dateRange | dateRange) + '. This includes weighed measurements from ' + pointCount + ' ' + pointType + ': ' + pointNames\"></span> with previous period  <span class=\"icon ph-info-fill\" [title]=\"'Previous period ranges from ' + (deltaDateRange | dateRange) + '. This includes weighed measurements from ' + deltaTeams + ' ' + pointType + ': ' + deltaTeamNames\"></span></div>\n            }\n            @if (qualifiedBy == QualifiedByEnum.benchmark) {\n              <div class=\"toolbar-setting-label\">Against benchmark</div>\n            }\n          </div>\n          @if (qualifiedBy != QualifiedByEnum.none) {\n            <div class=\"toolbar-setting\">\n              <div class=\"toolbar-setting-title\">comparison legend</div>\n              <div class=\"toolbar-setting-markers negative\">\n                @if (qualifiedBy == 'Benchmark') {\n                  <div class=\"toolbar-setting-marker negative\">\n                    <span class=\"marker\"></span>\n                    <span class=\"label\">lower</span>\n                  </div>\n                  <div class=\"toolbar-setting-marker positive\">\n                    <span class=\"marker\"></span>\n                    <span class=\"label\">higher</span>\n                  </div>\n                }\n                @if (qualifiedBy == 'Delta') {\n                  <div class=\"toolbar-setting-marker negative\">\n                    <span class=\"marker\"></span>\n                    <span class=\"label\">decreased</span>\n                  </div>\n                  <div class=\"toolbar-setting-marker positive\">\n                    <span class=\"marker\"></span>\n                    <span class=\"label\">improved</span>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n        <div class=\"buttons\">\n          <div class=\"button\" id=\"change-settings\" settingsDialog><span class=\"ph-faders icon\"></span> Settings</div>\n          @if (isLoggedIn) {\n            <div class=\"button\" id=\"export-factorscores\" exportFactorScoresDialog><span class=\"ph-download-simple icon\"></span> Export</div>\n          }\n        </div>\n      </div>\n    </div>\n    <div class=\"content\">\n      <div class=\"model-visualization\">\n        <div class=\"model-clarification\">\n          <span class=\"icon ph-info-fill\"></span>\n          <span class=\"message-text\">This model shows how factors are connected based on scientific research. Click <span class=\"icon ph-plus-circle-bold plus\"></span> to expand or close lower-order factors. Click factors for more detail.</span>\n        </div>\n        @if (!showModel || !showIndicatorArrows) {\n          <div class=\"model-smallscreen\">\n            <span class=\"icon ph-frame-corners-bold\"></span>\n            <span class=\"message-text\">View on a larger device to see more details.</span>\n          </div>\n        }\n        <div class=\"model-viewconfiguration\">\n          <div class=\"model-viewmode\">\n            <div class=\"model-viewmode-label\">View</div>\n            <div class=\"model-viewmode-option\" (click)=\"toggleView(false)\" [ngClass]=\"{'selected': !userSettings.settings.user.modelFilter.advanced}\">\n              @if (!userSettings.settings.user.modelFilter.advanced) {\n                <span class=\"icon ph-check-fill\"></span>\n                }Simple\n              </div>\n              <div class=\"model-viewmode-option selected\" (click)=\"toggleView(true)\" [ngClass]=\"{'selected': userSettings.settings.user.modelFilter.advanced}\">\n                @if (userSettings.settings.user.modelFilter.advanced) {\n                  <span class=\"icon ph-check-fill\"></span>\n                  }Advanced\n                </div>\n              </div>\n              <div class=\"model-viewmode model-layers\">\n                <div class=\"model-viewmode-label\">Source</div>\n                @for (layer of userSettings.settings.user.modelFilter.layers; track layer) {\n                  <div class=\"model-viewmode-option\" (click)=\"toggleLayer(layer)\" [ngClass]=\"{'selected': layer.selected}\">\n                    @if (layer.selected) {\n                      <span class=\"icon ph-check-fill\"></span>\n                      }{{layer.label}}\n                    </div>\n                  }\n                </div>\n                @if (globalNotes.length > 0) {\n                  <div class=\"model-warnings\" notesDialog [notes]=\"globalNotes\">\n                    <span class=\"ph-warning-fill icon\"></span>\n                    @if (globalNotes.length == 1) {\n                      <span>{{globalNotes.length}} warning</span>\n                    }\n                    @if (globalNotes.length > 1) {\n                      <span>{{globalNotes.length}} warnings</span>\n                    }\n                  </div>\n                }\n              </div>\n              <div class=\"model-frame\" [class]=\"'model-visualization-' + modelDefinition.publicKey\">\n                @for (factor of factors; track factor) {\n                  <model-factor-core [factor]=\"factor\" [expandPosition]=\"factor.indicatorPosition\" [allowExpand]=\"showIndicatorArrows\"></model-factor-core>\n                }\n              </div>\n              @for (factor of factors; track factor) {\n                @for (effect of factor.effects; track effect) {\n                  <arrow [from]=\"'#factor-' + factor.publicKey\" [to]=\"'#factor-' + effect.to\" [onlyVisible]=\"true\" [tail]=\"true\" [head]=\"false\" [width]=\"2\"></arrow>\n                }\n                @if (showIndicatorArrows) {\n                  @for (lowerFactor of factor.lower; track lowerFactor) {\n                    @for (lowerEffect of lowerFactor.effects; track lowerEffect) {\n                      <arrow [from]=\"'#factor-' + lowerFactor.publicKey + '-anchor'\" [to]=\"'#factor-' + lowerEffect.to + '-expand'\" [onlyVisible]=\"true\" [tail]=\"false\" [head]=\"false\" [width]=\"1\"></arrow>\n                    }\n                  }\n                }\n              }\n              <div class=\"model-attribution\">\n                <span class=\"icon ph-info-fill\"></span>\n                <span>\n                  <span [innerHtml]=\"modelDefinition.attribution\"></span>\n                  <span>&nbsp;Read <a href=\"https://columinity.com/wiki\" target=\"_blank\">documentation</a> for details.</span>\n                </span>\n              </div>\n            </div>\n          </div>\n          <div class=\"content model-processmetrics\">\n            <h3>Process metrics <span class=\"badge badge-beta\" title=\"This feature is in beta. You may experience issues or a sub-optimal user experience as we learn from teams what is most valuable. Please share bugs or feedback with us.\">beta</span></h3>\n            @if (metrics.length > 0) {\n              <div class=\"model-factor-metrics\">\n                @for (metric of metrics; track metric) {\n                  <model-factor-metric [metric]=\"metric\"></model-factor-metric>\n                }\n              </div>\n            }\n            <div class=\"model-processmetrics-definition\">\n              @if (canManageIntegrations) {\n                <a [routerLink]=\"['/integrations']\">Manage integrations</a>.\n              }\n              @if (showTeamsDashboardSetup) {\n                Integrations can be managed from each Teams Dashboard.\n              }\n              Read <a href=\"https://columinity.com/wiki/integrate-with-other-platforms\" target=\"_blank\">documentation</a> to learn more.\n            </div>\n          </div>\n        </div>\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}.content{border-bottom:3px solid #f0f0f0}@media only screen and (max-width:1536px){.toolbar-settings{display:flex}}@media only screen and (max-width:992px){.toolbar-settings{display:block}}\n"] }]
+            args: [{ selector: 'model-canvas', standalone: false, template: "@if (!showModel) {\n<div class=\"message message-warning\">\n   <div><span class=\"icon ph-info-fill\"></span> We've hidden the model visualization because your resolution is too low. Please try a larger device, like a tablet, laptop or desktop.</div>\n</div>\n}\n\n@if (factors && showModel) {\n<div class=\"wirebox model\">\n   <div class=\"top\">\n      <div class=\"toolbar\">\n         <div class=\"toolbar-settings\">\n            <div class=\"toolbar-setting\">\n               <div class=\"toolbar-setting-title\">Selected Benchmark</div>\n               <div class=\"toolbar-setting-label\">{{benchmark}}</div>\n            </div>\n            <div class=\"toolbar-setting\">\n               <div class=\"toolbar-setting-title\">compare results to</div>\n               @if (qualifiedBy == QualifiedByEnum.none) {\n               <div class=\"toolbar-setting-label\">No comparison</div>\n               }\n               @if (qualifiedBy == QualifiedByEnum.delta && deltaType == 'PreviousSnapshot') {\n               <div class=\"toolbar-setting-label\">Previous snapshot from {{deltaDateRange | dateRange}}</div>\n               }\n               @if (qualifiedBy == QualifiedByEnum.delta && deltaType != 'PreviousSnapshot') {\n               <div class=\"toolbar-setting-label\">Current period <span class=\"icon ph-info-fill\" [title]=\"'Current period ranges from ' + (dateRange | dateRange) + '. This includes weighed measurements from ' + pointCount + ' ' + pointType + ': ' + pointNames\"></span> with previous period  <span class=\"icon ph-info-fill\" [title]=\"'Previous period ranges from ' + (deltaDateRange | dateRange) + '. This includes weighed measurements from ' + deltaTeams + ' ' + pointType + ': ' + deltaTeamNames\"></span></div>\n               }\n               @if (qualifiedBy == QualifiedByEnum.benchmark) {\n               <div class=\"toolbar-setting-label\">Against benchmark</div>\n               }\n            </div>\n            @if (qualifiedBy != QualifiedByEnum.none) {\n            <div class=\"toolbar-setting\">\n               <div class=\"toolbar-setting-title\">comparison legend</div>\n               <div class=\"toolbar-setting-markers negative\">\n                  @if (qualifiedBy == 'Benchmark') {\n                  <div class=\"toolbar-setting-marker negative\">\n                     <span class=\"marker\"></span>\n                     <span class=\"label\">lower</span>\n                  </div>\n                  <div class=\"toolbar-setting-marker positive\">\n                     <span class=\"marker\"></span>\n                     <span class=\"label\">higher</span>\n                  </div>\n                  }\n                  @if (qualifiedBy == 'Delta') {\n                  <div class=\"toolbar-setting-marker negative\">\n                     <span class=\"marker\"></span>\n                     <span class=\"label\">decreased</span>\n                  </div>\n                  <div class=\"toolbar-setting-marker positive\">\n                     <span class=\"marker\"></span>\n                     <span class=\"label\">improved</span>\n                  </div>\n                  }\n               </div>\n            </div>\n            }\n         </div>\n         <div class=\"buttons\">\n            <div class=\"button\" id=\"change-settings\" settingsDialog><span class=\"ph-faders icon\"></span> Settings</div>\n            @if (isLoggedIn) {\n            <div class=\"button\" id=\"export-factorscores\" exportFactorScoresDialog><span class=\"ph-download-simple icon\"></span> Export</div>\n            }\n         </div>\n      </div>\n   </div>\n   <div class=\"content\">\n      <div class=\"model-visualization\">\n         <div class=\"model-clarification\">\n            <span class=\"icon ph-info-fill\"></span>\n            <span class=\"message-text\">This model shows how factors are connected based on scientific research. Click <span class=\"icon ph-plus-circle-bold plus\"></span> to expand or close lower-order factors. Click factors for more detail.</span>\n         </div>\n         @if (!showModel || !showIndicatorArrows) {\n         <div class=\"model-smallscreen\">\n            <span class=\"icon ph-frame-corners-bold\"></span>\n            <span class=\"message-text\">View on a larger device to see more details.</span>\n         </div>\n         }\n         <div class=\"model-viewconfiguration\">\n            <div class=\"model-viewmode\">\n               <div class=\"model-viewmode-label\">View</div>\n               <div class=\"model-viewmode-option\" (click)=\"toggleView(false)\" [ngClass]=\"{'selected': !userSettings.settings.user.modelFilter.advanced}\">\n                  @if (!userSettings.settings.user.modelFilter.advanced) {\n                  <span class=\"icon ph-check-fill\"></span>\n                  }Simple\n               </div>\n               <div class=\"model-viewmode-option selected\" (click)=\"toggleView(true)\" [ngClass]=\"{'selected': userSettings.settings.user.modelFilter.advanced}\">\n                  @if (userSettings.settings.user.modelFilter.advanced) {\n                  <span class=\"icon ph-check-fill\"></span>\n                  }Advanced\n               </div>\n            </div>\n            <div class=\"model-viewmode model-layers\">\n               <div class=\"model-viewmode-label\">Source</div>\n               @for (layer of userSettings.settings.user.modelFilter.layers; track layer) {\n               <div class=\"model-viewmode-option\" (click)=\"toggleLayer(layer)\" [ngClass]=\"{'selected': layer.selected}\">\n                  @if (layer.selected) {\n                  <span class=\"icon ph-check-fill\"></span>\n                  }{{layer.label}}\n               </div>\n               }\n            </div>\n            @if (globalNotes.length > 0) {\n            <div class=\"model-warnings\" notesDialog [notes]=\"globalNotes\">\n               <span class=\"ph-warning-fill icon\"></span>\n               @if (globalNotes.length == 1) {\n               <span>{{globalNotes.length}} warning</span>\n               }\n               @if (globalNotes.length > 1) {\n               <span>{{globalNotes.length}} warnings</span>\n               }\n            </div>\n            }\n         </div>\n         <div class=\"model-frame\" [class]=\"'model-visualization-' + modelDefinition.publicKey\">\n            @for (factor of factors; track factor) {\n            <model-factor-core [factor]=\"factor\" [expandPosition]=\"factor.indicatorPosition\" [allowExpand]=\"showIndicatorArrows\"></model-factor-core>\n            }\n         </div>\n         @for (factor of factors; track factor) {\n         @for (effect of factor.effects; track effect) {\n         <arrow [from]=\"'#factor-' + factor.publicKey\" [to]=\"'#factor-' + effect.to\" [onlyVisible]=\"true\" [tail]=\"true\" [head]=\"false\" [width]=\"2\"></arrow>\n         }\n         @if (showIndicatorArrows) {\n         @for (lowerFactor of factor.lower; track lowerFactor) {\n         @for (lowerEffect of lowerFactor.effects; track lowerEffect) {\n         <arrow [from]=\"'#factor-' + lowerFactor.publicKey + '-anchor'\" [to]=\"'#factor-' + lowerEffect.to + '-expand'\" [onlyVisible]=\"true\" [tail]=\"false\" [head]=\"false\" [width]=\"1\"></arrow>\n         }\n         }\n         }\n         }\n         <div class=\"model-attribution\">\n            <span class=\"icon ph-info-fill\"></span>\n            <span>\n               <span [innerHtml]=\"modelDefinition.attribution\"></span>\n               <span>&nbsp;Visit <a href=\"https://columinity.com/wiki/How-to-choose-between-models\" target=\"_blank\">documentation</a>.</span>\n            </span>\n         </div>\n      </div>\n   </div>\n   <div class=\"content model-processmetrics\">\n      <h3>Process metrics <span class=\"badge badge-beta\" title=\"This feature is in beta. You may experience issues or a sub-optimal user experience as we learn from teams what is most valuable. Please share bugs or feedback with us.\">beta</span></h3>\n      @if (metrics.length > 0) {\n      <div class=\"model-factor-metrics\">\n         @for (metric of metrics; track metric) {\n         <model-factor-metric [metric]=\"metric\"></model-factor-metric>\n         }\n      </div>\n      }\n      <div class=\"model-processmetrics-definition\">\n         <span class=\"icon ph-info-fill\"></span> Sampled from {{metricSamplingWindow.from | date:'MMM d'}} to {{metricSamplingWindow.to | date:'MMM d'}}.\n         @if (canManageIntegrations) {\n         <a [routerLink]=\"['/integrations']\">Manage integrations</a>.\n         }\n         @if (showTeamsDashboardSetup) {\n         Integrations can be managed from a Teams Dashboard.\n         }\n         Visit <a href=\"https://columinity.com/wiki/integrate-with-other-platforms\" target=\"_blank\">documentation</a>.\n      </div>\n   </div>\n</div>\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}.content{border-bottom:3px solid #f0f0f0}@media only screen and (max-width:1536px){.toolbar-settings{display:flex}}@media only screen and (max-width:992px){.toolbar-settings{display:block}}.model-processmetrics-definition .icon{vertical-align:middle}\n"] }]
         }], ctorParameters: () => [{ type: ViewModelStateBase, decorators: [{
                     type: Inject,
                     args: [VIEWSTATE_PROVIDER]
@@ -5899,16 +5931,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 +5961,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 +5981,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 +7591,13 @@ class ResultsModule {
             ReactiveFormsModule,
             MatOptionModule,
             MatInputModule,
+            OverlayModule,
             MatSlideToggleModule,
             BrandingModule,
             MatSelectModule,
             MatProgressSpinnerModule,
             MatDatepickerModule,
             DateRangePipeModule,
-            SatPopoverModule,
             ActionsModule,
             CommonModule,
             DialogSupportModule,
@@ -7620,13 +7672,13 @@ class ResultsModule {
             ReactiveFormsModule,
             MatOptionModule,
             MatInputModule,
+            OverlayModule,
             MatSlideToggleModule,
             BrandingModule,
             MatSelectModule,
             MatProgressSpinnerModule,
             MatDatepickerModule,
             DateRangePipeModule,
-            SatPopoverModule,
             ActionsModule,
             CommonModule,
             DialogSupportModule,
@@ -7651,13 +7703,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 +7844,6 @@ class ModelVisualizationModule {
             FormsModule,
             RouterModule,
             ResultsModule,
-            SatPopoverModule,
             FactorInformationDialogModule,
             ProgressbarModule,
             MatTooltipModule,
@@ -7801,6 +7852,7 @@ class ModelVisualizationModule {
             MatFormFieldModule,
             ReactiveFormsModule,
             DateRangePipeModule,
+            OverlayModule,
             MatDialogModule], exports: [ModelCanvasComponent,
             ModelFactorMetricComponent,
             ModelFactorIndicatorComponent,
@@ -7813,7 +7865,6 @@ class ModelVisualizationModule {
             FormsModule,
             RouterModule,
             ResultsModule,
-            SatPopoverModule,
             FactorInformationDialogModule,
             ProgressbarModule,
             MatTooltipModule,
@@ -7822,6 +7873,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 +7884,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                         FormsModule,
                         RouterModule,
                         ResultsModule,
-                        SatPopoverModule,
                         FactorInformationDialogModule,
                         ProgressbarModule,
                         MatTooltipModule,
@@ -7841,6 +7892,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                         MatFormFieldModule,
                         ReactiveFormsModule,
                         DateRangePipeModule,
+                        OverlayModule,
                         MatDialogModule
                     ],
                     declarations: [
@@ -8781,5 +8833,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccountService, ActionClientConfig, ActionCollectionDto, ActionConfigDto, ActionConfigToken, ActionDto, ActionListComponent, ActionListFilter, ActionManageComponent, ActionOptionDto, ActionOptionsDto, ActionPrefillDto, ActionService, ActionTeamDto, ActionTileComponent, ActionsModule, AgeIndicatorComponent, AlertAnnouncementComponent, AlertClientConfig, AlertConfigDto, AlertConfigToken, AlertDto, AlertFilterDto, AlertResponseDto, AlertService, AlertsComponent, AlertsModule, ApiConfig, ApiConfigDto, ApiConfigToken, ApiErrorDto, ArrowComponent, ArrowUpdateService, BackButtonDirective, BackButtonDirectiveModule, BadgeCollectionDto, BadgeComponent, BadgeDto, BadgeProgressionComponent, BadgeStreakComponent, BadgeTypeEnum, BadgesComponent, BenchmarkIndicatorComponent, BenchmarkOptionDto, BenchmarkTypeEnum, BrandBackgroundDirective, BrandConditionalBackgroundColorDirective, BrandConditionalColorDirective, BrandHoverColorDirective, BrandingModule, BrandingProvider, BrandingSettingsDto, CallbackPipe, CallbackPipeModule, ChannelDefaultBrandingDto, ChannelDto, CheckboxComponent, CheckboxModule, ClickableTooltipDirective, ClientInfoDto, ClientIntegrationListDto, ClientIntegrationSummaryDto, ComponentBase, ComponentWithViewStateBase, ContactService, ContentBrandingDto, ContextItemDto, ContextTypes, DIALOG_GUIDES_TOKEN, DIALOG_GUIDE_TOKEN, DateRangeDto, DateRangePipe, DateRangePipeModule, DefinitionDto, DeltaArrowComponent, DeltaPeriodEnum, DialogAccountComponent, DialogAccountModule, DialogActionFiltersComponent, DialogActionManageComponent, DialogAlertsComponent, DialogExportActionsComponent, DialogExportFactorScoresComponent, DialogExportTeamListComponent, DialogFactorInformationComponent, DialogGuideComponent, DialogGuidesComponent, DialogIntegrationComponent, DialogModelFilterComponent, DialogNotesComponent, DialogResourceDownloadComponent, DialogSettingsComponent, DialogSubscribeComponent, DialogSubscribeModule, DialogSupportComponent, DialogSupportModule, DialogTeamFilterComponent, DimensionResultDto, DismissAlertRequestDto, DismissPopupService, DismissedAlertsService, DoItYourselfComponent, DoItYourselfWorkshopsComponent, EffectDto, EffectTypeEnum, ErrorConfigToken, ErrorDetailDto, ErrorDto, ErrorServiceConfig, ErrorServiceConfigDto, ErrorServiceModule, ExpandComponent, ExpandItemDto, ExpandModule, ExportActionsRequestDto, ExportFactorScoresRequestDto, ExportTeamListRequestDto, FactorAxisComponent, FactorEffectDto, FactorInformationDialogModule, FactorRecommendationDto, FactorScoreCollectionBenchmarkDto, FactorScoreCollectionCompositionDto, FactorScoreCollectionCompositionSegmentDto, FactorScoreCollectionDeltaDto, FactorScoreCollectionDto, FactorScoreCollectionFiltersDto, FactorScoreCompositionPointDto, FactorScoreCompositionPointsDto, FactorScoreDto, FactorService, FactorStructureConstraintDto, FactorStructureDto, FactorStructureSegmentDto, FactorsComponent, FeedbackQuickTipDto, FeedbackResourceDto, FilterTagsComponent, FocusAreasComponent, FooterComponent, FrontAndBackendErrorHandler, GUIDESTATE_PROVIDER, GuardsModule, GuideCollectionDto, GuideConfigDto, GuideDto, GuideMediaTypeEnum, GuidePopupService, GuideSettingsDto, GuideStateDto, GuideStateInBackEndService, GuideStateInBrowserService, GuideStepDto, GuideStepMediaDto, GuidesClientConfig, GuidesConfigToken, GuidesModule, ImageSliderComponent, ImpactIndicatorComponent, IncludeActionsModeEnum, InterventionFilterType, InterventionOwnerEnum, InterventionOwnerToStringPipe, InterventionSortEnum, InterventionStateEnum, InterventionStateToStringPipe, InterventionSummaryDto, InterventionTypeEnum, InterventionTypeToStringPipe, InviteUrlDto, KeyValueDto, LegalDocumentDto, LegalDto, LimitationsApplyComponent, LoadModes, LoadingComponent, LoadingModule, LocalUserDto, LoggingSeverityEnum, MatTagsComponent, MatTagsModule, MeasurementDto, MetaDataInputComponent, MetadataInputModule, ModelCanvasComponent, ModelDefinitionDto, ModelDemoUrlDto, ModelFactorBenchmarkComponent, ModelFactorBreakdownComponent, ModelFactorCoreComponent, ModelFactorIndicatorComponent, ModelFactorMetricComponent, ModelFilter, ModelStructureDto, ModelSummaryDto, ModelSwitcherComponent, ModelVisualizationLayer, ModelVisualizationModule, MultiEmailInputComponent, MultiEmailInputModule, NavButtonComponent, NavigationUrlDto, NavigationUrlTypeEnum, NgAddToCalendarModule, NoReloadStrategy, OpenAccountDialogDirective, OpenActionFiltersDialogDirective, OpenAddActionDialogDirective, OpenAlertsDialogDirective, OpenContactSalesDialog, OpenEditActionDialogDirective, OpenExportActionsDialogDirective, OpenExportFactorScoresDialogDirective, OpenExportTeamListDialogDirective, OpenFactorInformationDialogDirective, OpenFeedbackDialogDirective, OpenGuideDialogDirective, OpenGuidesDialogDirective, OpenIntegrationDialogDirective, OpenLookingForHelpDialog, OpenModelFilterDialog, OpenNotesDialogDirective, OpenReportBugDialogDirective, OpenResourceDownloadDialogDirective, OpenSettingsDialogDirective, OpenSubscribeDialogDirective, OpenSupportDialogDirective, OpenTeamFilterDialogDirective, PaginatedResponse, PaginatorComponent, PaginatorModule, PagingOptions, PaletteItem, ParticipantDto, ParticipantsComponent, ParticipationRateDto, PointDto, PointTypeEnum, ProcessingDataDto, ProgressbarComponent, ProgressbarModule, QualificationEnum, QualifiedByEnum, QuantitySelectorComponent, QuantitySelectorModule, QuestionnaireTypeDto, QuickTipsComponent, RecommendationComponent, RecommendationsComponent, ReloadOnPushStrategy, ResearchComponent, ResetPasswordRequestDto, ResourceDownloadModule, ResourceDownloadRedirectUrlDto, ResourceDownloadService, ResultIndicatorComponent, ResultsClientConfig, ResultsClientDto, ResultsConfigToken, ResultsModule, ResumeGuideHoverComponent, RoadmapComponent, SegmentEnum, SegmentNamePipe, SegmentNamePipeModule, SelectItem, SelectListComponent, SelectListItem, SelectListItemApiDto, SelectListModule, SessionIdInterceptor, SessionIdProvider, SiteDefaultFooterComponent, SiteDefaultHeaderComponent, SiteMicroFooterComponent, SlugifyPipe, SlugifyPipeModule, SnapshotDto, SnapshotInviteUrlsComponent, SnapshotInviteUrlsModule, SnapshotMetaDataDto, StartGuideDirective, SubscriptionTierEnum, TabItemDto, TabNavigatorComponent, TabNavigatorModule, TeamDto, TeamEffectivenessComponent, TeamFlagMatchDto, TeamListFilter, TeamListResponseDto, TeamMetaDataDto, TeamNameAndKeyDto, TeamNotificationSettingsDto, TeamSortEnum, TeamStatusEnum, TeamTraitDto, TermsService, TermsUpdatedComponent, TipBadgeComponent, TopicSelectorComponent, TopicSelectorDto, TopicSelectorModule, TrendDataRequestDto, TrendDataSetDto, TrendService, TrendsComponent, TruncatePipe, TruncatePipeModule, TryNowProfessionalComponent, UpdateInProgressComponent, UserGlobalSettingsDto, UserInfoDto, UserListFilter, UserListResponseDto, UserNameAndKeyDto, UserProfileComponent, UserProfileDto, UserProfileService, UserSettingService, UserSettingsDto, UserSpecificSettingsDto, VIEWSTATE_LOAD_STRATEGY, VIEWSTATE_PROVIDER, VIEWSTATE_RELOAD_STRATEGY, VIEWSTATE_USERSETTINGS_STRATEGY, ValidChangeTokenGuard, ValidKeyGuard, ValidKeySnapshotKeyGuard, ValidKeyTeamKeyGuard, VariableDto, VideoComponent, ViewModelStateBase, ViewModelStateConfig, ViewModelStateConfigDto, ViewModelStateConfigToken, ViewModelStateModule, WidgetFactorScoreComponent, WidgetParticipationRateComponent, compareInputValidator, domainValidator, httpsHostValidator, maxSelectedValidator, minTopicsSelectedValidator, presetCheckValidator };
+export { AccountService, ActionClientConfig, ActionCollectionDto, ActionConfigDto, ActionConfigToken, ActionDto, ActionListComponent, ActionListFilter, ActionManageComponent, ActionOptionDto, ActionOptionsDto, ActionPrefillDto, ActionService, ActionTeamDto, ActionTileComponent, ActionsModule, AgeIndicatorComponent, AlertAnnouncementComponent, AlertClientConfig, AlertConfigDto, AlertConfigToken, AlertDto, AlertFilterDto, AlertResponseDto, AlertService, AlertsComponent, AlertsModule, ApiConfig, ApiConfigDto, ApiConfigToken, ApiErrorDto, ArrowComponent, ArrowUpdateService, BackButtonDirective, BackButtonDirectiveModule, BadgeCollectionDto, BadgeComponent, BadgeDto, BadgeProgressionComponent, BadgeStreakComponent, BadgeTypeEnum, BadgesComponent, BenchmarkIndicatorComponent, BenchmarkOptionDto, BenchmarkTypeEnum, BrandBackgroundDirective, BrandConditionalBackgroundColorDirective, BrandConditionalColorDirective, BrandHoverColorDirective, BrandingModule, BrandingProvider, BrandingSettingsDto, CallbackPipe, CallbackPipeModule, ChannelDefaultBrandingDto, ChannelDto, CheckboxComponent, CheckboxModule, ClickableTooltipDirective, ClientInfoDto, ClientIntegrationListDto, ClientIntegrationSummaryDto, ComponentBase, ComponentWithViewStateBase, ContactService, ContentBrandingDto, ContextItemDto, ContextTypes, DIALOG_GUIDES_TOKEN, DIALOG_GUIDE_TOKEN, DateRangeDto, DateRangePipe, DateRangePipeModule, DefinitionDto, DeltaArrowComponent, DeltaPeriodEnum, DialogAccountComponent, DialogAccountModule, DialogActionFiltersComponent, DialogActionManageComponent, DialogAlertsComponent, DialogExportActionsComponent, DialogExportFactorScoresComponent, DialogExportTeamListComponent, DialogFactorInformationComponent, DialogGuideComponent, DialogGuidesComponent, DialogIntegrationComponent, DialogModelFilterComponent, DialogNotesComponent, DialogResourceDownloadComponent, DialogSettingsComponent, DialogSubscribeComponent, DialogSubscribeModule, DialogSupportComponent, DialogSupportModule, DialogTeamFilterComponent, DimensionResultDto, DismissAlertRequestDto, DismissPopupService, DismissedAlertsService, DoItYourselfComponent, DoItYourselfWorkshopsComponent, EffectDto, EffectTypeEnum, ErrorConfigToken, ErrorDetailDto, ErrorDto, ErrorServiceConfig, ErrorServiceConfigDto, ErrorServiceModule, ExpandComponent, ExpandItemDto, ExpandModule, ExportActionsRequestDto, ExportFactorScoresRequestDto, ExportTeamListRequestDto, FactorAxisComponent, FactorEffectDto, FactorInformationDialogModule, FactorRecommendationDto, FactorScoreCollectionBenchmarkDto, FactorScoreCollectionCompositionDto, FactorScoreCollectionCompositionSegmentDto, FactorScoreCollectionDeltaDto, FactorScoreCollectionDto, FactorScoreCollectionFiltersDto, FactorScoreCollectionSamplingWindowsDto, FactorScoreCompositionPointDto, FactorScoreCompositionPointsDto, FactorScoreDto, FactorService, FactorStructureConstraintDto, FactorStructureDto, FactorStructureSegmentDto, FactorsComponent, FeedbackQuickTipDto, FeedbackResourceDto, FilterTagsComponent, FocusAreasComponent, FooterComponent, FrontAndBackendErrorHandler, GUIDESTATE_PROVIDER, GuardsModule, GuideCollectionDto, GuideConfigDto, GuideDto, GuideMediaTypeEnum, GuidePopupService, GuideSettingsDto, GuideStateDto, GuideStateInBackEndService, GuideStateInBrowserService, GuideStepDto, GuideStepMediaDto, GuidesClientConfig, GuidesConfigToken, GuidesModule, ImageSliderComponent, ImpactIndicatorComponent, IncludeActionsModeEnum, InterventionFilterType, InterventionOwnerEnum, InterventionOwnerToStringPipe, InterventionSortEnum, InterventionStateEnum, InterventionStateToStringPipe, InterventionSummaryDto, InterventionTypeEnum, InterventionTypeToStringPipe, InviteUrlDto, KeyValueDto, LegalDocumentDto, LegalDto, LimitationsApplyComponent, LoadModes, LoadingComponent, LoadingModule, LocalUserDto, LoggingSeverityEnum, MatTagsComponent, MatTagsModule, MeasurementDto, MetaDataInputComponent, MetadataInputModule, ModelCanvasComponent, ModelDefinitionDto, ModelDemoUrlDto, ModelFactorBenchmarkComponent, ModelFactorBreakdownComponent, ModelFactorCoreComponent, ModelFactorIndicatorComponent, ModelFactorMetricComponent, ModelFilter, ModelStructureDto, ModelSummaryDto, ModelSwitcherComponent, ModelVisualizationLayer, ModelVisualizationModule, MultiEmailInputComponent, MultiEmailInputModule, NavButtonComponent, NavigationUrlDto, NavigationUrlTypeEnum, NgAddToCalendarModule, NoReloadStrategy, OpenAccountDialogDirective, OpenActionFiltersDialogDirective, OpenAddActionDialogDirective, OpenAlertsDialogDirective, OpenContactSalesDialog, OpenEditActionDialogDirective, OpenExportActionsDialogDirective, OpenExportFactorScoresDialogDirective, OpenExportTeamListDialogDirective, OpenFactorInformationDialogDirective, OpenFeedbackDialogDirective, OpenGuideDialogDirective, OpenGuidesDialogDirective, OpenIntegrationDialogDirective, OpenLookingForHelpDialog, OpenModelFilterDialog, OpenNotesDialogDirective, OpenReportBugDialogDirective, OpenResourceDownloadDialogDirective, OpenSettingsDialogDirective, OpenSubscribeDialogDirective, OpenSupportDialogDirective, OpenTeamFilterDialogDirective, PaginatedResponse, PaginatorComponent, PaginatorModule, PagingOptions, PaletteItem, ParticipantDto, ParticipantsComponent, ParticipationRateDto, PointDto, PointTypeEnum, ProcessingDataDto, ProgressbarComponent, ProgressbarModule, QualificationEnum, QualifiedByEnum, QuantitySelectorComponent, QuantitySelectorModule, QuestionnaireTypeDto, QuickTipsComponent, RecommendationComponent, RecommendationsComponent, ReloadOnPushStrategy, ResearchComponent, ResetPasswordRequestDto, ResourceDownloadModule, ResourceDownloadRedirectUrlDto, ResourceDownloadService, ResultIndicatorComponent, ResultsClientConfig, ResultsClientDto, ResultsConfigToken, ResultsModule, ResumeGuideHoverComponent, RoadmapComponent, SegmentEnum, SegmentNamePipe, SegmentNamePipeModule, SelectItem, SelectListComponent, SelectListItem, SelectListItemApiDto, SelectListModule, SessionIdInterceptor, SessionIdProvider, SiteDefaultFooterComponent, SiteDefaultHeaderComponent, SiteMicroFooterComponent, SlugifyPipe, SlugifyPipeModule, SnapshotDto, SnapshotInviteUrlsComponent, SnapshotInviteUrlsModule, SnapshotMetaDataDto, StartGuideDirective, SubscriptionTierEnum, TabItemDto, TabNavigatorComponent, TabNavigatorModule, TeamDto, TeamEffectivenessComponent, TeamFlagMatchDto, TeamListFilter, TeamListResponseDto, TeamMetaDataDto, TeamNameAndKeyDto, TeamNotificationSettingsDto, TeamSortEnum, TeamStatusEnum, TeamTraitDto, TermsService, TermsUpdatedComponent, TipBadgeComponent, TopicSelectorComponent, TopicSelectorDto, TopicSelectorModule, TrendDataRequestDto, TrendDataSetDto, TrendService, TrendsComponent, TruncatePipe, TruncatePipeModule, TryNowProfessionalComponent, UpdateInProgressComponent, UserGlobalSettingsDto, UserInfoDto, UserListFilter, UserListResponseDto, UserNameAndKeyDto, UserProfileComponent, UserProfileDto, UserProfileService, UserSettingService, UserSettingsDto, UserSpecificSettingsDto, VIEWSTATE_LOAD_STRATEGY, VIEWSTATE_PROVIDER, VIEWSTATE_RELOAD_STRATEGY, VIEWSTATE_USERSETTINGS_STRATEGY, ValidChangeTokenGuard, ValidKeyGuard, ValidKeySnapshotKeyGuard, ValidKeyTeamKeyGuard, VariableDto, VideoComponent, ViewModelStateBase, ViewModelStateConfig, ViewModelStateConfigDto, ViewModelStateConfigToken, ViewModelStateModule, WidgetFactorScoreComponent, WidgetParticipationRateComponent, compareInputValidator, domainValidator, httpsHostValidator, maxSelectedValidator, minTopicsSelectedValidator, presetCheckValidator };
 //# sourceMappingURL=the-liberators-ngx-scrumteamsurvey-tools.mjs.map