@the-liberators/ngx-scrumteamsurvey-tools 2.3.108 → 2.3.110

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

@@ -3556,11 +3556,11 @@ class DialogFactorInformationComponent {
         this.factor = factor;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: DialogFactorInformationComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: DialogFactorInformationComponent, isStandalone: false, selector: "ng-component", ngImport: i0, template: "<div class=\"dialog-header\">\n   <h1 mat-dialog-title>{{factor.name}}</h1>\n   <div class=\"close\" mat-dialog-close><i class=\"responsive icon ph-x-bold\"></i></div>\n</div>\n<mat-dialog-content>\n   {{factor.description}}\n\n   <div class=\"attribution\" *ngIf=\"factor.attribution\">\n      <h4>Attribution for measurement method</h4>\n      <p>{{factor.attribution}}</p>\n   </div>\n\n   <div class=\"questions\" *ngIf=\"!factor.metric\">\n      <h4>Question pool</h4>\n      <div>Below are the questions we use for this factor. They may be narrowed down further based on segment. See <a href=\"https://github.com/theliberators/columinity.docs/wiki/How-the-questionnaire-links-to-factors\" target=\"_blank\">wiki</a> for details.</div>\n      <div class=\"questions-segment\" *ngFor=\"let segment of factor.segments\">\n         <div *ngIf=\"segment.questions.length > 0\">\n            <h5>For {{segment.segment.toLowerCase()}}s</h5>\n            <ul>\n               <li *ngFor=\"let question of segment.questions\">{{question}}</li>\n            </ul>\n         </div>\n      </div>\n   </div>\n</mat-dialog-content>\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}.attribution{margin-top:15px}.questions{margin-top:15px}.questions h4{margin-bottom:5px;font-weight:600}.questions h5,.questions p,.questions div{margin:0;font-size:14px}.questions li{margin:0;font-size:14px;line-height:125%}.questions .questions-segment,.attribution{margin-top:15px}.attribution h4{margin-bottom:5px;font-weight:600}.attribution p{margin:0;font-size:14px}\n"], dependencies: [{ kind: "directive", type: i1$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: DialogFactorInformationComponent, isStandalone: false, selector: "ng-component", ngImport: i0, template: "<div class=\"dialog-header\" *ngIf=\"factor\">\n   <h1 mat-dialog-title>{{factor.name}}</h1>\n   <div class=\"close\" mat-dialog-close><i class=\"responsive icon ph-x-bold\"></i></div>\n</div>\n<mat-dialog-content>\n   {{factor.description}}\n\n   <div class=\"attribution\" *ngIf=\"factor.attribution\">\n      <h4>Attribution for measurement method</h4>\n      <p>{{factor.attribution}}</p>\n   </div>\n\n   <div class=\"questions\" *ngIf=\"!factor.metric\">\n      <h4>Question pool</h4>\n      <div>Below are the questions we use for this factor. They may be narrowed down further based on segment. See <a href=\"https://github.com/theliberators/columinity.docs/wiki/How-the-questionnaire-links-to-factors\" target=\"_blank\">wiki</a> for details.</div>\n      <div class=\"questions-segment\" *ngFor=\"let segment of factor.segments\">\n         <div *ngIf=\"segment.questions.length > 0\">\n            <h5>For {{segment.segment.toLowerCase()}}s</h5>\n            <ul>\n               <li *ngFor=\"let question of segment.questions\">{{question}}</li>\n            </ul>\n         </div>\n      </div>\n   </div>\n</mat-dialog-content>\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}.attribution{margin-top:15px}.questions{margin-top:15px}.questions h4{margin-bottom:5px;font-weight:600}.questions h5,.questions p,.questions div{margin:0;font-size:14px}.questions li{margin:0;font-size:14px;line-height:125%}.questions .questions-segment,.attribution{margin-top:15px}.attribution h4{margin-bottom:5px;font-weight:600}.attribution p{margin:0;font-size:14px}\n"], dependencies: [{ kind: "directive", type: i1$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: DialogFactorInformationComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, template: "<div class=\"dialog-header\">\n   <h1 mat-dialog-title>{{factor.name}}</h1>\n   <div class=\"close\" mat-dialog-close><i class=\"responsive icon ph-x-bold\"></i></div>\n</div>\n<mat-dialog-content>\n   {{factor.description}}\n\n   <div class=\"attribution\" *ngIf=\"factor.attribution\">\n      <h4>Attribution for measurement method</h4>\n      <p>{{factor.attribution}}</p>\n   </div>\n\n   <div class=\"questions\" *ngIf=\"!factor.metric\">\n      <h4>Question pool</h4>\n      <div>Below are the questions we use for this factor. They may be narrowed down further based on segment. See <a href=\"https://github.com/theliberators/columinity.docs/wiki/How-the-questionnaire-links-to-factors\" target=\"_blank\">wiki</a> for details.</div>\n      <div class=\"questions-segment\" *ngFor=\"let segment of factor.segments\">\n         <div *ngIf=\"segment.questions.length > 0\">\n            <h5>For {{segment.segment.toLowerCase()}}s</h5>\n            <ul>\n               <li *ngFor=\"let question of segment.questions\">{{question}}</li>\n            </ul>\n         </div>\n      </div>\n   </div>\n</mat-dialog-content>\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}.attribution{margin-top:15px}.questions{margin-top:15px}.questions h4{margin-bottom:5px;font-weight:600}.questions h5,.questions p,.questions div{margin:0;font-size:14px}.questions li{margin:0;font-size:14px;line-height:125%}.questions .questions-segment,.attribution{margin-top:15px}.attribution h4{margin-bottom:5px;font-weight:600}.attribution p{margin:0;font-size:14px}\n"] }]
+            args: [{ standalone: false, template: "<div class=\"dialog-header\" *ngIf=\"factor\">\n   <h1 mat-dialog-title>{{factor.name}}</h1>\n   <div class=\"close\" mat-dialog-close><i class=\"responsive icon ph-x-bold\"></i></div>\n</div>\n<mat-dialog-content>\n   {{factor.description}}\n\n   <div class=\"attribution\" *ngIf=\"factor.attribution\">\n      <h4>Attribution for measurement method</h4>\n      <p>{{factor.attribution}}</p>\n   </div>\n\n   <div class=\"questions\" *ngIf=\"!factor.metric\">\n      <h4>Question pool</h4>\n      <div>Below are the questions we use for this factor. They may be narrowed down further based on segment. See <a href=\"https://github.com/theliberators/columinity.docs/wiki/How-the-questionnaire-links-to-factors\" target=\"_blank\">wiki</a> for details.</div>\n      <div class=\"questions-segment\" *ngFor=\"let segment of factor.segments\">\n         <div *ngIf=\"segment.questions.length > 0\">\n            <h5>For {{segment.segment.toLowerCase()}}s</h5>\n            <ul>\n               <li *ngFor=\"let question of segment.questions\">{{question}}</li>\n            </ul>\n         </div>\n      </div>\n   </div>\n</mat-dialog-content>\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}.attribution{margin-top:15px}.questions{margin-top:15px}.questions h4{margin-bottom:5px;font-weight:600}.questions h5,.questions p,.questions div{margin:0;font-size:14px}.questions li{margin:0;font-size:14px;line-height:125%}.questions .questions-segment,.attribution{margin-top:15px}.attribution h4{margin-bottom:5px;font-weight:600}.attribution p{margin:0;font-size:14px}\n"] }]
         }], ctorParameters: () => [{ type: FactorStructureDto, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -4615,7 +4615,7 @@ class DeltaArrowComponent {
         this.datePipe = datePipe;
     }
     ngOnInit() {
-        this.available = this.delta.available && this.factorScore.deltaAvailable;
+        this.available = this.factorScore && this.delta.available && this.factorScore.deltaAvailable;
         if (this.available) {
             if (this.delta.type == DeltaPeriodEnum.previousSnapshot) {
                 var deltaDateRangeFrom = this.datePipe.transform(this.delta.dateRange.from, 'longDate');
@@ -4837,11 +4837,11 @@ class ModelFactorMetricComponent extends ComponentWithViewStateBase {
         this.factorScore = data.factorScores.factorScores.find(p => p.key == this.metric.publicKey);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", 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: "14.0.0", version: "20.3.12", type: ModelFactorMetricComponent, isStandalone: false, selector: "model-factor-metric", inputs: { metric: "metric" }, usesInheritance: true, ngImport: i0, template: "<div class=\"model-factor-metric\" [id]=\"'metric-' + metric.publicKey\" #factorAnchor (click)=\"popover.open()\">\n   <div class=\"model-factor-metric-title\">{{metric.name}} <span class=\"ph-info-fill icon\"></span></div>\n   <div class=\"model-factor-metric-result\">\n      <div class=\"digit\" *ngIf=\"factorScore\">{{factorScore.score}}</div>\n      <div class=\"unit\">{{metric.unit}}</div>\n      <div class=\"confidence\" *ngIf=\"factorScore && userSettings.settings.user.modelFilter.advanced\" title=\"The confidence interval\">CI: {{factorScore.lowerConfidence}} - {{factorScore.upperConfidence}}</div>\n      <div class=\"model-factor-metric-result-details\">\n         <age-indicator [lastMeasured]=\"factorScore.lastMeasured\" *ngIf=\"userSettings.settings.user.modelFilter.advanced\"></age-indicator>\n         <delta-arrow [factorScore]=\"factorScore\" [delta]=\"delta\"></delta-arrow>\n      </div>\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\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\n         <div class=\"link\" *ngIf=\"factorScore.recommendation.available\">\n            <a [routerLink]=\"[baseUrl, 'tips']\" [fragment]=\"metric.publicKey\">discover how to improve ></a>\n         </div>\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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.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: ModelFactorBreakdownComponent, selector: "model-factor-breakdown", inputs: ["factor", "pageSize"] }, { kind: "component", type: i11.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: ModelFactorBenchmarkComponent, selector: "model-factor-benchmark", inputs: ["factor", "benchmark"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: ModelFactorMetricComponent, isStandalone: false, selector: "model-factor-metric", inputs: { metric: "metric" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"factorScore\">\n   <div class=\"model-factor-metric\" [id]=\"'metric-' + metric.publicKey\" #factorAnchor (click)=\"popover.open()\">\n      <div class=\"model-factor-metric-title\">{{metric.name}} <span class=\"ph-info-fill icon\"></span></div>\n      <div class=\"model-factor-metric-result\">\n         <div class=\"digit\" *ngIf=\"factorScore\">{{factorScore.score}}</div>\n         <div class=\"unit\">{{metric.unit}}</div>\n         <div class=\"confidence\" *ngIf=\"factorScore && userSettings.settings.user.modelFilter.advanced\" title=\"The confidence interval\">CI: {{factorScore.lowerConfidence}} - {{factorScore.upperConfidence}}</div>\n         <div class=\"model-factor-metric-result-details\">\n            <age-indicator [lastMeasured]=\"factorScore.lastMeasured\" *ngIf=\"userSettings.settings.user.modelFilter.advanced\"></age-indicator>\n            <delta-arrow [factorScore]=\"factorScore\" [delta]=\"delta\"></delta-arrow>\n         </div>\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\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\n            <div class=\"link\" *ngIf=\"factorScore.recommendation.available\">\n               <a [routerLink]=\"[baseUrl, 'tips']\" [fragment]=\"metric.publicKey\">discover how to improve ></a>\n            </div>\n         </div>\n         <div class=\"arrow\"></div>\n      </div>\n   </sat-popover>\n</ng-container>\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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.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: ModelFactorBreakdownComponent, selector: "model-factor-breakdown", inputs: ["factor", "pageSize"] }, { kind: "component", type: i11.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: ModelFactorBenchmarkComponent, selector: "model-factor-benchmark", inputs: ["factor", "benchmark"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ModelFactorMetricComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'model-factor-metric', standalone: false, template: "<div class=\"model-factor-metric\" [id]=\"'metric-' + metric.publicKey\" #factorAnchor (click)=\"popover.open()\">\n   <div class=\"model-factor-metric-title\">{{metric.name}} <span class=\"ph-info-fill icon\"></span></div>\n   <div class=\"model-factor-metric-result\">\n      <div class=\"digit\" *ngIf=\"factorScore\">{{factorScore.score}}</div>\n      <div class=\"unit\">{{metric.unit}}</div>\n      <div class=\"confidence\" *ngIf=\"factorScore && userSettings.settings.user.modelFilter.advanced\" title=\"The confidence interval\">CI: {{factorScore.lowerConfidence}} - {{factorScore.upperConfidence}}</div>\n      <div class=\"model-factor-metric-result-details\">\n         <age-indicator [lastMeasured]=\"factorScore.lastMeasured\" *ngIf=\"userSettings.settings.user.modelFilter.advanced\"></age-indicator>\n         <delta-arrow [factorScore]=\"factorScore\" [delta]=\"delta\"></delta-arrow>\n      </div>\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\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\n         <div class=\"link\" *ngIf=\"factorScore.recommendation.available\">\n            <a [routerLink]=\"[baseUrl, 'tips']\" [fragment]=\"metric.publicKey\">discover how to improve ></a>\n         </div>\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: "<ng-container *ngIf=\"factorScore\">\n   <div class=\"model-factor-metric\" [id]=\"'metric-' + metric.publicKey\" #factorAnchor (click)=\"popover.open()\">\n      <div class=\"model-factor-metric-title\">{{metric.name}} <span class=\"ph-info-fill icon\"></span></div>\n      <div class=\"model-factor-metric-result\">\n         <div class=\"digit\" *ngIf=\"factorScore\">{{factorScore.score}}</div>\n         <div class=\"unit\">{{metric.unit}}</div>\n         <div class=\"confidence\" *ngIf=\"factorScore && userSettings.settings.user.modelFilter.advanced\" title=\"The confidence interval\">CI: {{factorScore.lowerConfidence}} - {{factorScore.upperConfidence}}</div>\n         <div class=\"model-factor-metric-result-details\">\n            <age-indicator [lastMeasured]=\"factorScore.lastMeasured\" *ngIf=\"userSettings.settings.user.modelFilter.advanced\"></age-indicator>\n            <delta-arrow [factorScore]=\"factorScore\" [delta]=\"delta\"></delta-arrow>\n         </div>\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\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\n            <div class=\"link\" *ngIf=\"factorScore.recommendation.available\">\n               <a [routerLink]=\"[baseUrl, 'tips']\" [fragment]=\"metric.publicKey\">discover how to improve ></a>\n            </div>\n         </div>\n         <div class=\"arrow\"></div>\n      </div>\n   </sat-popover>\n</ng-container>\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]
@@ -5028,6 +5028,7 @@ class ModelCanvasComponent extends ComponentWithViewStateBase {
         this.globalNotes = data.factorScores.processingData.notes;
         this.factors = data.factorScores.modelStructure.definition.factors.filter(p => p.parentKey == null && p.core);
         this.metrics = data.factorScores.modelStructure.definition.factors.filter(p => p.parentKey == null && p.metric);
+        this.metricsAvailable = data.factorScores.factorScores.filter(p => this.metrics.find(x => x.publicKey == p.key)).length > 0;
         this.modelDefinition = data.factorScores.modelStructure.definition;
         this.dateRange = data.factorScores.dateRange;
         this.deltaDateRange = data.factorScores.delta.dateRange;
@@ -5073,11 +5074,11 @@ class ModelCanvasComponent extends ComponentWithViewStateBase {
         this.userSettingService.set(this.userSettings.settings);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", 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: "14.0.0", version: "20.3.12", type: ModelCanvasComponent, isStandalone: false, selector: "model-canvas", host: { listeners: { "window:resize": "determineScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!showModel\" 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<div class=\"wirebox model\" *ngIf=\"factors && showModel\">\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               <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.none\">No comparison</div>\n               <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.delta && deltaType == 'PreviousSnapshot'\">Previous snapshot from {{deltaDateRange | dateRange}}</div>\n               <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.delta && deltaType != 'PreviousSnapshot'\">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               <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.benchmark\">Against benchmark</div>\n            </div>\n            <div class=\"toolbar-setting\" *ngIf=\"qualifiedBy != QualifiedByEnum.none\">\n               <div class=\"toolbar-setting-title\">comparison legend</div>\n               <div class=\"toolbar-setting-markers negative\">\n                  <ng-container *ngIf=\"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                  </ng-container>\n                  <ng-container *ngIf=\"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                  </ng-container>\n               </div>\n            </div>\n         </div>\n         <div class=\"buttons\">\n            <div class=\"button\" id=\"change-settings\" settingsDialog><span class=\"ph-faders icon\"></span> Settings</div>\n            <div class=\"button\" id=\"export-factorscores\" exportFactorScoresDialog *ngIf=\"isLoggedIn\"><span class=\"ph-download-simple icon\"></span> Export</div>\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\n         <div *ngIf=\"!showModel || !showIndicatorArrows\" 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                  <span class=\"icon ph-check-fill\" *ngIf=\"!userSettings.settings.user.modelFilter.advanced\"></span>Simple\n               </div>\n               <div class=\"model-viewmode-option selected\" (click)=\"toggleView(true)\" [ngClass]=\"{'selected': userSettings.settings.user.modelFilter.advanced}\">\n                  <span class=\"icon ph-check-fill\" *ngIf=\"userSettings.settings.user.modelFilter.advanced\"></span>Advanced\n               </div>\n            </div>\n\n            <div class=\"model-viewmode model-layers\">\n               <div class=\"model-viewmode-label\">Source</div>\n               <div class=\"model-viewmode-option\" *ngFor=\"let layer of userSettings.settings.user.modelFilter.layers\" (click)=\"toggleLayer(layer)\" [ngClass]=\"{'selected': layer.selected}\">\n                  <span class=\"icon ph-check-fill\" *ngIf=\"layer.selected\"></span>{{layer.label}}\n               </div>\n            </div>\n\n            <div class=\"model-warnings\" *ngIf=\"globalNotes.length > 0\" notesDialog [notes]=\"globalNotes\">\n               <span class=\"ph-warning-fill icon\"></span>\n               <span *ngIf=\"globalNotes.length == 1\">{{globalNotes.length}} warning</span>\n               <span *ngIf=\"globalNotes.length > 1\">{{globalNotes.length}} warnings</span>\n            </div>\n         </div>\n\n         <div class=\"model-frame\" [class]=\"'model-visualization-' + modelDefinition.publicKey\">\n            <ng-container *ngFor=\"let factor of factors\">\n               <model-factor-core [factor]=\"factor\" [expandPosition]=\"factor.indicatorPosition\" [allowExpand]=\"showIndicatorArrows\"></model-factor-core>\n            </ng-container>\n         </div>\n\n         <ng-container *ngFor=\"let factor of factors\">\n            <arrow [from]=\"'#factor-' + factor.publicKey\" [to]=\"'#factor-' + effect.to\" [onlyVisible]=\"true\" [tail]=\"true\" [head]=\"false\" [width]=\"2\" *ngFor=\"let effect of factor.effects\"></arrow>\n            <ng-container *ngIf=\"showIndicatorArrows\">\n               <ng-container *ngFor=\"let lowerFactor of factor.lower\">\n                  <arrow [from]=\"'#factor-' + lowerFactor.publicKey + '-anchor'\" [to]=\"'#factor-' + lowerEffect.to + '-expand'\" [onlyVisible]=\"true\" [tail]=\"false\" [head]=\"false\" [width]=\"1\" *ngFor=\"let lowerEffect of lowerFactor.effects\"></arrow>\n               </ng-container>\n            </ng-container>\n         </ng-container>\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\n      <div class=\"model-factor-metrics\" *ngIf=\"metrics.length > 0\">\n         <model-factor-metric [metric]=\"metric\" *ngFor=\"let metric of metrics\"></model-factor-metric>\n      </div>\n\n      <div class=\"model-processmetrics-connect\" *ngIf=\"metrics.length == 0\">\n         <div class=\"model-processmetrics-connect-label\">Pull metrics from:</div>\n         <div class=\"model-processmetrics-connect-buttons\">\n            <a class=\"button\" [href]=\"teamsDashboardUrl + '/integrations'\" *ngIf=\"isSubscriber\">\n               <span class=\"icon icon-jira\"></span> JIRA\n            </a>\n            <a class=\"button\" [href]=\"teamsDashboardUrl + '/integrations'\" *ngIf=\"isSubscriber\">\n               <span class=\"icon icon-azuredevops\"></span> Azure DevOps\n            </a>\n            <a class=\"button\" subscribeDialog *ngIf=\"!isSubscriber\">\n               <span class=\"icon icon-jira\"></span> JIRA\n            </a>\n            <a class=\"button\" subscribeDialog *ngIf=\"!isSubscriber\">\n               <span class=\"icon icon-azuredevops\"></span> Azure DevOps\n            </a>\n         </div>\n      </div>\n\n      <div class=\"model-processmetrics-definition\">\n         <ng-container *ngIf=\"canManageIntegrations\"><a [href]=\"teamsDashboardUrl + '/integrations'\">Manage integrations</a>.</ng-container>\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", 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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: OpenSubscribeDialogDirective, selector: "[subscribeDialog]" }, { 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: "14.0.0", version: "20.3.12", type: ModelCanvasComponent, isStandalone: false, selector: "model-canvas", host: { listeners: { "window:resize": "determineScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!showModel\" 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<div class=\"wirebox model\" *ngIf=\"factors && showModel\">\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               <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.none\">No comparison</div>\n               <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.delta && deltaType == 'PreviousSnapshot'\">Previous snapshot from {{deltaDateRange | dateRange}}</div>\n               <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.delta && deltaType != 'PreviousSnapshot'\">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               <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.benchmark\">Against benchmark</div>\n            </div>\n            <div class=\"toolbar-setting\" *ngIf=\"qualifiedBy != QualifiedByEnum.none\">\n               <div class=\"toolbar-setting-title\">comparison legend</div>\n               <div class=\"toolbar-setting-markers negative\">\n                  <ng-container *ngIf=\"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                  </ng-container>\n                  <ng-container *ngIf=\"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                  </ng-container>\n               </div>\n            </div>\n         </div>\n         <div class=\"buttons\">\n            <div class=\"button\" id=\"change-settings\" settingsDialog><span class=\"ph-faders icon\"></span> Settings</div>\n            <div class=\"button\" id=\"export-factorscores\" exportFactorScoresDialog *ngIf=\"isLoggedIn\"><span class=\"ph-download-simple icon\"></span> Export</div>\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\n         <div *ngIf=\"!showModel || !showIndicatorArrows\" 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                  <span class=\"icon ph-check-fill\" *ngIf=\"!userSettings.settings.user.modelFilter.advanced\"></span>Simple\n               </div>\n               <div class=\"model-viewmode-option selected\" (click)=\"toggleView(true)\" [ngClass]=\"{'selected': userSettings.settings.user.modelFilter.advanced}\">\n                  <span class=\"icon ph-check-fill\" *ngIf=\"userSettings.settings.user.modelFilter.advanced\"></span>Advanced\n               </div>\n            </div>\n\n            <div class=\"model-viewmode model-layers\">\n               <div class=\"model-viewmode-label\">Source</div>\n               <div class=\"model-viewmode-option\" *ngFor=\"let layer of userSettings.settings.user.modelFilter.layers\" (click)=\"toggleLayer(layer)\" [ngClass]=\"{'selected': layer.selected}\">\n                  <span class=\"icon ph-check-fill\" *ngIf=\"layer.selected\"></span>{{layer.label}}\n               </div>\n            </div>\n\n            <div class=\"model-warnings\" *ngIf=\"globalNotes.length > 0\" notesDialog [notes]=\"globalNotes\">\n               <span class=\"ph-warning-fill icon\"></span>\n               <span *ngIf=\"globalNotes.length == 1\">{{globalNotes.length}} warning</span>\n               <span *ngIf=\"globalNotes.length > 1\">{{globalNotes.length}} warnings</span>\n            </div>\n         </div>\n\n         <div class=\"model-frame\" [class]=\"'model-visualization-' + modelDefinition.publicKey\">\n            <ng-container *ngFor=\"let factor of factors\">\n               <model-factor-core [factor]=\"factor\" [expandPosition]=\"factor.indicatorPosition\" [allowExpand]=\"showIndicatorArrows\"></model-factor-core>\n            </ng-container>\n         </div>\n\n         <ng-container *ngFor=\"let factor of factors\">\n            <arrow [from]=\"'#factor-' + factor.publicKey\" [to]=\"'#factor-' + effect.to\" [onlyVisible]=\"true\" [tail]=\"true\" [head]=\"false\" [width]=\"2\" *ngFor=\"let effect of factor.effects\"></arrow>\n            <ng-container *ngIf=\"showIndicatorArrows\">\n               <ng-container *ngFor=\"let lowerFactor of factor.lower\">\n                  <arrow [from]=\"'#factor-' + lowerFactor.publicKey + '-anchor'\" [to]=\"'#factor-' + lowerEffect.to + '-expand'\" [onlyVisible]=\"true\" [tail]=\"false\" [head]=\"false\" [width]=\"1\" *ngFor=\"let lowerEffect of lowerFactor.effects\"></arrow>\n               </ng-container>\n            </ng-container>\n         </ng-container>\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\n      <div class=\"model-factor-metrics\" *ngIf=\"metricsAvailable\">\n         <model-factor-metric [metric]=\"metric\" *ngFor=\"let metric of metrics\"></model-factor-metric>\n      </div>\n\n      <div class=\"model-processmetrics-connect\" *ngIf=\"!metricsAvailable\">\n         <div class=\"model-processmetrics-connect-label\">Pull metrics from:</div>\n         <div class=\"model-processmetrics-connect-buttons\">\n            <a class=\"button\" [href]=\"teamsDashboardUrl + '/integrations'\" *ngIf=\"isSubscriber\">\n               <span class=\"icon icon-jira\"></span> JIRA\n            </a>\n            <a class=\"button\" [href]=\"teamsDashboardUrl + '/integrations'\" *ngIf=\"isSubscriber\">\n               <span class=\"icon icon-azuredevops\"></span> Azure DevOps\n            </a>\n            <a class=\"button\" subscribeDialog *ngIf=\"!isSubscriber\">\n               <span class=\"icon icon-jira\"></span> JIRA\n            </a>\n            <a class=\"button\" subscribeDialog *ngIf=\"!isSubscriber\">\n               <span class=\"icon icon-azuredevops\"></span> Azure DevOps\n            </a>\n         </div>\n      </div>\n\n      <div class=\"model-processmetrics-definition\">\n         <ng-container *ngIf=\"canManageIntegrations\"><a [href]=\"teamsDashboardUrl + '/integrations'\">Manage integrations</a>.</ng-container>\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", 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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: OpenSubscribeDialogDirective, selector: "[subscribeDialog]" }, { 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ModelCanvasComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'model-canvas', standalone: false, template: "<div *ngIf=\"!showModel\" 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<div class=\"wirebox model\" *ngIf=\"factors && showModel\">\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               <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.none\">No comparison</div>\n               <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.delta && deltaType == 'PreviousSnapshot'\">Previous snapshot from {{deltaDateRange | dateRange}}</div>\n               <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.delta && deltaType != 'PreviousSnapshot'\">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               <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.benchmark\">Against benchmark</div>\n            </div>\n            <div class=\"toolbar-setting\" *ngIf=\"qualifiedBy != QualifiedByEnum.none\">\n               <div class=\"toolbar-setting-title\">comparison legend</div>\n               <div class=\"toolbar-setting-markers negative\">\n                  <ng-container *ngIf=\"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                  </ng-container>\n                  <ng-container *ngIf=\"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                  </ng-container>\n               </div>\n            </div>\n         </div>\n         <div class=\"buttons\">\n            <div class=\"button\" id=\"change-settings\" settingsDialog><span class=\"ph-faders icon\"></span> Settings</div>\n            <div class=\"button\" id=\"export-factorscores\" exportFactorScoresDialog *ngIf=\"isLoggedIn\"><span class=\"ph-download-simple icon\"></span> Export</div>\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\n         <div *ngIf=\"!showModel || !showIndicatorArrows\" 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                  <span class=\"icon ph-check-fill\" *ngIf=\"!userSettings.settings.user.modelFilter.advanced\"></span>Simple\n               </div>\n               <div class=\"model-viewmode-option selected\" (click)=\"toggleView(true)\" [ngClass]=\"{'selected': userSettings.settings.user.modelFilter.advanced}\">\n                  <span class=\"icon ph-check-fill\" *ngIf=\"userSettings.settings.user.modelFilter.advanced\"></span>Advanced\n               </div>\n            </div>\n\n            <div class=\"model-viewmode model-layers\">\n               <div class=\"model-viewmode-label\">Source</div>\n               <div class=\"model-viewmode-option\" *ngFor=\"let layer of userSettings.settings.user.modelFilter.layers\" (click)=\"toggleLayer(layer)\" [ngClass]=\"{'selected': layer.selected}\">\n                  <span class=\"icon ph-check-fill\" *ngIf=\"layer.selected\"></span>{{layer.label}}\n               </div>\n            </div>\n\n            <div class=\"model-warnings\" *ngIf=\"globalNotes.length > 0\" notesDialog [notes]=\"globalNotes\">\n               <span class=\"ph-warning-fill icon\"></span>\n               <span *ngIf=\"globalNotes.length == 1\">{{globalNotes.length}} warning</span>\n               <span *ngIf=\"globalNotes.length > 1\">{{globalNotes.length}} warnings</span>\n            </div>\n         </div>\n\n         <div class=\"model-frame\" [class]=\"'model-visualization-' + modelDefinition.publicKey\">\n            <ng-container *ngFor=\"let factor of factors\">\n               <model-factor-core [factor]=\"factor\" [expandPosition]=\"factor.indicatorPosition\" [allowExpand]=\"showIndicatorArrows\"></model-factor-core>\n            </ng-container>\n         </div>\n\n         <ng-container *ngFor=\"let factor of factors\">\n            <arrow [from]=\"'#factor-' + factor.publicKey\" [to]=\"'#factor-' + effect.to\" [onlyVisible]=\"true\" [tail]=\"true\" [head]=\"false\" [width]=\"2\" *ngFor=\"let effect of factor.effects\"></arrow>\n            <ng-container *ngIf=\"showIndicatorArrows\">\n               <ng-container *ngFor=\"let lowerFactor of factor.lower\">\n                  <arrow [from]=\"'#factor-' + lowerFactor.publicKey + '-anchor'\" [to]=\"'#factor-' + lowerEffect.to + '-expand'\" [onlyVisible]=\"true\" [tail]=\"false\" [head]=\"false\" [width]=\"1\" *ngFor=\"let lowerEffect of lowerFactor.effects\"></arrow>\n               </ng-container>\n            </ng-container>\n         </ng-container>\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\n      <div class=\"model-factor-metrics\" *ngIf=\"metrics.length > 0\">\n         <model-factor-metric [metric]=\"metric\" *ngFor=\"let metric of metrics\"></model-factor-metric>\n      </div>\n\n      <div class=\"model-processmetrics-connect\" *ngIf=\"metrics.length == 0\">\n         <div class=\"model-processmetrics-connect-label\">Pull metrics from:</div>\n         <div class=\"model-processmetrics-connect-buttons\">\n            <a class=\"button\" [href]=\"teamsDashboardUrl + '/integrations'\" *ngIf=\"isSubscriber\">\n               <span class=\"icon icon-jira\"></span> JIRA\n            </a>\n            <a class=\"button\" [href]=\"teamsDashboardUrl + '/integrations'\" *ngIf=\"isSubscriber\">\n               <span class=\"icon icon-azuredevops\"></span> Azure DevOps\n            </a>\n            <a class=\"button\" subscribeDialog *ngIf=\"!isSubscriber\">\n               <span class=\"icon icon-jira\"></span> JIRA\n            </a>\n            <a class=\"button\" subscribeDialog *ngIf=\"!isSubscriber\">\n               <span class=\"icon icon-azuredevops\"></span> Azure DevOps\n            </a>\n         </div>\n      </div>\n\n      <div class=\"model-processmetrics-definition\">\n         <ng-container *ngIf=\"canManageIntegrations\"><a [href]=\"teamsDashboardUrl + '/integrations'\">Manage integrations</a>.</ng-container>\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", 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: "<div *ngIf=\"!showModel\" 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<div class=\"wirebox model\" *ngIf=\"factors && showModel\">\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               <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.none\">No comparison</div>\n               <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.delta && deltaType == 'PreviousSnapshot'\">Previous snapshot from {{deltaDateRange | dateRange}}</div>\n               <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.delta && deltaType != 'PreviousSnapshot'\">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               <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.benchmark\">Against benchmark</div>\n            </div>\n            <div class=\"toolbar-setting\" *ngIf=\"qualifiedBy != QualifiedByEnum.none\">\n               <div class=\"toolbar-setting-title\">comparison legend</div>\n               <div class=\"toolbar-setting-markers negative\">\n                  <ng-container *ngIf=\"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                  </ng-container>\n                  <ng-container *ngIf=\"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                  </ng-container>\n               </div>\n            </div>\n         </div>\n         <div class=\"buttons\">\n            <div class=\"button\" id=\"change-settings\" settingsDialog><span class=\"ph-faders icon\"></span> Settings</div>\n            <div class=\"button\" id=\"export-factorscores\" exportFactorScoresDialog *ngIf=\"isLoggedIn\"><span class=\"ph-download-simple icon\"></span> Export</div>\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\n         <div *ngIf=\"!showModel || !showIndicatorArrows\" 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                  <span class=\"icon ph-check-fill\" *ngIf=\"!userSettings.settings.user.modelFilter.advanced\"></span>Simple\n               </div>\n               <div class=\"model-viewmode-option selected\" (click)=\"toggleView(true)\" [ngClass]=\"{'selected': userSettings.settings.user.modelFilter.advanced}\">\n                  <span class=\"icon ph-check-fill\" *ngIf=\"userSettings.settings.user.modelFilter.advanced\"></span>Advanced\n               </div>\n            </div>\n\n            <div class=\"model-viewmode model-layers\">\n               <div class=\"model-viewmode-label\">Source</div>\n               <div class=\"model-viewmode-option\" *ngFor=\"let layer of userSettings.settings.user.modelFilter.layers\" (click)=\"toggleLayer(layer)\" [ngClass]=\"{'selected': layer.selected}\">\n                  <span class=\"icon ph-check-fill\" *ngIf=\"layer.selected\"></span>{{layer.label}}\n               </div>\n            </div>\n\n            <div class=\"model-warnings\" *ngIf=\"globalNotes.length > 0\" notesDialog [notes]=\"globalNotes\">\n               <span class=\"ph-warning-fill icon\"></span>\n               <span *ngIf=\"globalNotes.length == 1\">{{globalNotes.length}} warning</span>\n               <span *ngIf=\"globalNotes.length > 1\">{{globalNotes.length}} warnings</span>\n            </div>\n         </div>\n\n         <div class=\"model-frame\" [class]=\"'model-visualization-' + modelDefinition.publicKey\">\n            <ng-container *ngFor=\"let factor of factors\">\n               <model-factor-core [factor]=\"factor\" [expandPosition]=\"factor.indicatorPosition\" [allowExpand]=\"showIndicatorArrows\"></model-factor-core>\n            </ng-container>\n         </div>\n\n         <ng-container *ngFor=\"let factor of factors\">\n            <arrow [from]=\"'#factor-' + factor.publicKey\" [to]=\"'#factor-' + effect.to\" [onlyVisible]=\"true\" [tail]=\"true\" [head]=\"false\" [width]=\"2\" *ngFor=\"let effect of factor.effects\"></arrow>\n            <ng-container *ngIf=\"showIndicatorArrows\">\n               <ng-container *ngFor=\"let lowerFactor of factor.lower\">\n                  <arrow [from]=\"'#factor-' + lowerFactor.publicKey + '-anchor'\" [to]=\"'#factor-' + lowerEffect.to + '-expand'\" [onlyVisible]=\"true\" [tail]=\"false\" [head]=\"false\" [width]=\"1\" *ngFor=\"let lowerEffect of lowerFactor.effects\"></arrow>\n               </ng-container>\n            </ng-container>\n         </ng-container>\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\n      <div class=\"model-factor-metrics\" *ngIf=\"metricsAvailable\">\n         <model-factor-metric [metric]=\"metric\" *ngFor=\"let metric of metrics\"></model-factor-metric>\n      </div>\n\n      <div class=\"model-processmetrics-connect\" *ngIf=\"!metricsAvailable\">\n         <div class=\"model-processmetrics-connect-label\">Pull metrics from:</div>\n         <div class=\"model-processmetrics-connect-buttons\">\n            <a class=\"button\" [href]=\"teamsDashboardUrl + '/integrations'\" *ngIf=\"isSubscriber\">\n               <span class=\"icon icon-jira\"></span> JIRA\n            </a>\n            <a class=\"button\" [href]=\"teamsDashboardUrl + '/integrations'\" *ngIf=\"isSubscriber\">\n               <span class=\"icon icon-azuredevops\"></span> Azure DevOps\n            </a>\n            <a class=\"button\" subscribeDialog *ngIf=\"!isSubscriber\">\n               <span class=\"icon icon-jira\"></span> JIRA\n            </a>\n            <a class=\"button\" subscribeDialog *ngIf=\"!isSubscriber\">\n               <span class=\"icon icon-azuredevops\"></span> Azure DevOps\n            </a>\n         </div>\n      </div>\n\n      <div class=\"model-processmetrics-definition\">\n         <ng-container *ngIf=\"canManageIntegrations\"><a [href]=\"teamsDashboardUrl + '/integrations'\">Manage integrations</a>.</ng-container>\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", 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"] }]
         }], ctorParameters: () => [{ type: ViewModelStateBase, decorators: [{
                     type: Inject,
                     args: [VIEWSTATE_PROVIDER]