@the-liberators/ngx-scrumteamsurvey-tools 2.3.105 → 2.3.107

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

@@ -4311,7 +4311,7 @@ class DialogSettingsComponent extends ComponentWithViewStateBase {
         this.form.controls.qualifyBy.setValue(this.settings.global.qualifyBy ?? data.factorScores.processingData.qualifiedBy);
         this.factors = this.factorService.toSelectList(data.factorScores.modelStructure);
         if (this.settings.global.overviewFactors.length == 0) {
-            this.form.controls.overviewFactors.setValue(data.factorScores.modelStructure.definition.factors.filter(p => p.parentKey == null).map(p => p.publicKey));
+            this.form.controls.overviewFactors.setValue(data.factorScores.modelStructure.definition.factors.filter(p => p.parentKey == null && !p.metric).map(p => p.publicKey));
         }
         else {
             this.form.controls.overviewFactors.setValue(this.settings.global.overviewFactors);
@@ -4556,6 +4556,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                 args: ['click']
             }] } });
 
+class DialogSubscribeComponent {
+    constructor(state) {
+        this.state = state;
+        this.state.data.pipe(take(1)).subscribe(success => {
+            if (success.userInfo.branding.isDefault) {
+                this.title = "Try 1 month for €1,-";
+                this.button = "Try now";
+                this.discount = true;
+            }
+            else {
+                this.title = "Upgrade to Professional";
+                this.button = "Learn more";
+            }
+            this.subscribeUrl = success.userInfo.branding.channelSubscribeUrl;
+            this.companyUrl = success.userInfo.branding.channelCompanyUrl;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: DialogSubscribeComponent, deps: [{ token: VIEWSTATE_PROVIDER }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: DialogSubscribeComponent, isStandalone: false, selector: "ng-component", ngImport: i0, template: "<div class=\"dialog-header\">\n   <h1 mat-dialog-title [innerHtml]=\"title\"></h1>\n   <div class=\"close\" mat-dialog-close><i class=\"responsive icon ph-x-bold\"></i></div>\n</div>\n<mat-dialog-content>\n   <p>Discover the full power of Columinity with our <b>Professional plan</b>:</p>\n   <ul>\n      <li>Unlimited science-based recommendations.</li>\n      <li>Access to the Teams Dashboard.</li>\n      <li>Benchmarks per ndustry/size/region.</li>\n      <li>Pull metrics from JIRA, Azure DevOps, etc.</li>\n      <li>Secure access with user accounts.</li>\n      <li>Aggregate results from many teams.</li>\n      <li>Set up repeat scans easily.</li>\n      <li>Access to advanced results.</li>\n   </ul>\n\n   <div class=\"message message-black\" *ngIf=\"discount\"><span class=\"icon ph-smiley-fill\"></span><span>Use the coupon <b>TRYPRO</b> to pay &euro;1,- for the first team on your monthly Professional plan.</span></div>\n   <a class=\"button primary\" [href]=\"subscribeUrl\">{{button}}</a>\n</mat-dialog-content>\n", styles: [""], 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: DialogSubscribeComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, template: "<div class=\"dialog-header\">\n   <h1 mat-dialog-title [innerHtml]=\"title\"></h1>\n   <div class=\"close\" mat-dialog-close><i class=\"responsive icon ph-x-bold\"></i></div>\n</div>\n<mat-dialog-content>\n   <p>Discover the full power of Columinity with our <b>Professional plan</b>:</p>\n   <ul>\n      <li>Unlimited science-based recommendations.</li>\n      <li>Access to the Teams Dashboard.</li>\n      <li>Benchmarks per ndustry/size/region.</li>\n      <li>Pull metrics from JIRA, Azure DevOps, etc.</li>\n      <li>Secure access with user accounts.</li>\n      <li>Aggregate results from many teams.</li>\n      <li>Set up repeat scans easily.</li>\n      <li>Access to advanced results.</li>\n   </ul>\n\n   <div class=\"message message-black\" *ngIf=\"discount\"><span class=\"icon ph-smiley-fill\"></span><span>Use the coupon <b>TRYPRO</b> to pay &euro;1,- for the first team on your monthly Professional plan.</span></div>\n   <a class=\"button primary\" [href]=\"subscribeUrl\">{{button}}</a>\n</mat-dialog-content>\n" }]
+        }], ctorParameters: () => [{ type: ViewModelStateBase, decorators: [{
+                    type: Inject,
+                    args: [VIEWSTATE_PROVIDER]
+                }] }] });
+
+class OpenSubscribeDialogDirective {
+    constructor(dialog) {
+        this.dialog = dialog;
+    }
+    onClick() {
+        const dialogConfig = new MatDialogConfig();
+        dialogConfig.panelClass = ['dialog', 'subscribe', 'primary'];
+        dialogConfig.autoFocus = false;
+        dialogConfig.enterAnimationDuration = 0;
+        dialogConfig.exitAnimationDuration = 0;
+        this.dialog.open(DialogSubscribeComponent, dialogConfig);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: OpenSubscribeDialogDirective, deps: [{ token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: OpenSubscribeDialogDirective, isStandalone: false, selector: "[subscribeDialog]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: OpenSubscribeDialogDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[subscribeDialog]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i1$3.MatDialog }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
 class DeltaArrowComponent {
     constructor(datePipe) {
         this.datePipe = datePipe;
@@ -4601,82 +4655,32 @@ class AgeIndicatorComponent {
     constructor() {
     }
     ngOnInit() {
-        var measureDate = new Date(this.lastMeasured);
-        this.lastMeasuredMonths = Math.max(0, (new Date().getFullYear() - measureDate.getFullYear()) * 12 - measureDate.getMonth() + new Date().getMonth());
-        if (this.lastMeasuredMonths <= 1) {
-            this.lastMeasuredTooltip = 'This factor was last measured in the past month. It is fresh data.';
-        }
-        else if (this.lastMeasuredMonths >= 12) {
-            this.lastMeasuredTooltip = 'This factor was last measured 12 month or more ago. We recommend to measure this again to keep data fresh.';
-        }
-        else {
-            this.lastMeasuredTooltip = 'This factor was last measured ' + this.lastMeasuredMonths + ' month or more ago. The fresher your data, the more reliable it is.';
+        if (this.lastMeasured) {
+            var measureDate = new Date(this.lastMeasured);
+            this.lastMeasuredMonths = this.montsBetweenUTC(new Date(), measureDate);
+            this.lastMeasuredYears = Math.floor(this.lastMeasuredMonths / 12);
+            this.lastMeasuredDays = this.daysBetweenUTC(new Date(), measureDate);
         }
     }
+    montsBetweenUTC(date1, date2) {
+        return Math.max(0, (date1.getFullYear() - date2.getFullYear()) * 12 - date2.getMonth() + date1.getMonth());
+    }
+    daysBetweenUTC(date1, date2) {
+        const d1 = Date.UTC(date1.getFullYear(), date1.getMonth(), date1.getDate());
+        const d2 = Date.UTC(date2.getFullYear(), date2.getMonth(), date2.getDate());
+        const oneDayMs = 1000 * 60 * 60 * 24;
+        return Math.floor((d1 - d2) / oneDayMs);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AgeIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: AgeIndicatorComponent, isStandalone: false, selector: "age-indicator", inputs: { lastMeasured: "lastMeasured" }, ngImport: i0, template: "<div class=\"age-indicator\" [title]=\"lastMeasuredTooltip\" *ngIf=\"lastMeasuredMonths < 12\">\n   {{lastMeasuredMonths}}mo\n</div>\n<div class=\"age-indicator\" [title]=\"lastMeasuredTooltip\" *ngIf=\"lastMeasuredMonths >= 12\">\n   >1yo\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}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: AgeIndicatorComponent, isStandalone: false, selector: "age-indicator", inputs: { lastMeasured: "lastMeasured" }, ngImport: i0, template: "<div class=\"age-indicator\" [title]=\"'Last measured ' + lastMeasuredDays + ' days ago.'\" *ngIf=\"lastMeasured && lastMeasuredMonths < 1\">\n   {{lastMeasuredDays}}do\n</div>\n<div class=\"age-indicator\" [title]=\"'Last measured ' + lastMeasuredMonths + ' months ago.'\" *ngIf=\"lastMeasured && lastMeasuredMonths >= 1 && lastMeasuredMonths <= 12\">\n   {{lastMeasuredMonths}}mo\n</div>\n<div class=\"age-indicator\" [title]=\"'Last measured ' + lastMeasuredMonths + ' months ago.'\" *ngIf=\"lastMeasured && lastMeasuredMonths > 12\">\n   {{lastMeasuredYears}}yo\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}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AgeIndicatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'age-indicator', standalone: false, template: "<div class=\"age-indicator\" [title]=\"lastMeasuredTooltip\" *ngIf=\"lastMeasuredMonths < 12\">\n   {{lastMeasuredMonths}}mo\n</div>\n<div class=\"age-indicator\" [title]=\"lastMeasuredTooltip\" *ngIf=\"lastMeasuredMonths >= 12\">\n   >1yo\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}\n"] }]
+            args: [{ selector: 'age-indicator', standalone: false, template: "<div class=\"age-indicator\" [title]=\"'Last measured ' + lastMeasuredDays + ' days ago.'\" *ngIf=\"lastMeasured && lastMeasuredMonths < 1\">\n   {{lastMeasuredDays}}do\n</div>\n<div class=\"age-indicator\" [title]=\"'Last measured ' + lastMeasuredMonths + ' months ago.'\" *ngIf=\"lastMeasured && lastMeasuredMonths >= 1 && lastMeasuredMonths <= 12\">\n   {{lastMeasuredMonths}}mo\n</div>\n<div class=\"age-indicator\" [title]=\"'Last measured ' + lastMeasuredMonths + ' months ago.'\" *ngIf=\"lastMeasured && lastMeasuredMonths > 12\">\n   {{lastMeasuredYears}}yo\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}\n"] }]
         }], ctorParameters: () => [], propDecorators: { lastMeasured: [{
                 type: Input
             }] } });
 
-class DialogSubscribeComponent {
-    constructor(state) {
-        this.state = state;
-        this.state.data.pipe(take(1)).subscribe(success => {
-            if (success.userInfo.branding.isDefault) {
-                this.title = "Try 1 month for &euro;1,-";
-                this.button = "Try now";
-                this.discount = true;
-            }
-            else {
-                this.title = "Upgrade to Professional";
-                this.button = "Learn more";
-            }
-            this.subscribeUrl = success.userInfo.branding.channelSubscribeUrl;
-            this.companyUrl = success.userInfo.branding.channelCompanyUrl;
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: DialogSubscribeComponent, deps: [{ token: VIEWSTATE_PROVIDER }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: DialogSubscribeComponent, isStandalone: false, selector: "ng-component", ngImport: i0, template: "<div class=\"dialog-header\">\n   <h1 mat-dialog-title [innerHtml]=\"title\"></h1>\n   <div class=\"close\" mat-dialog-close><i class=\"responsive icon ph-x-bold\"></i></div>\n</div>\n<mat-dialog-content>\n   <p>Discover the full power of Columinity with our <b>Professional plan</b>:</p>\n   <ul>\n      <li>Extensive science-based recommendations.</li>\n      <li>Access to the Teams Dashboard.</li>\n      <li>Secure access with user accounts.</li>\n      <li>Aggregate results from many teams.</li>\n      <li>Set up repeat scans more easily.</li>\n      <li>Access to more results and statistics.</li>\n      <li>More benchmarks.</li>\n   </ul>\n\n   <div class=\"message message-black\" *ngIf=\"discount\"><span class=\"icon ph-smiley-fill\"></span><span>Use the coupon <b>TRYPRO</b> to pay only &euro;1,- for the first team on your monthly Professional plan.</span></div>\n   <a class=\"button primary\" [href]=\"subscribeUrl\">{{button}}</a>\n</mat-dialog-content>\n", styles: [""], 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: DialogSubscribeComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, template: "<div class=\"dialog-header\">\n   <h1 mat-dialog-title [innerHtml]=\"title\"></h1>\n   <div class=\"close\" mat-dialog-close><i class=\"responsive icon ph-x-bold\"></i></div>\n</div>\n<mat-dialog-content>\n   <p>Discover the full power of Columinity with our <b>Professional plan</b>:</p>\n   <ul>\n      <li>Extensive science-based recommendations.</li>\n      <li>Access to the Teams Dashboard.</li>\n      <li>Secure access with user accounts.</li>\n      <li>Aggregate results from many teams.</li>\n      <li>Set up repeat scans more easily.</li>\n      <li>Access to more results and statistics.</li>\n      <li>More benchmarks.</li>\n   </ul>\n\n   <div class=\"message message-black\" *ngIf=\"discount\"><span class=\"icon ph-smiley-fill\"></span><span>Use the coupon <b>TRYPRO</b> to pay only &euro;1,- for the first team on your monthly Professional plan.</span></div>\n   <a class=\"button primary\" [href]=\"subscribeUrl\">{{button}}</a>\n</mat-dialog-content>\n" }]
-        }], ctorParameters: () => [{ type: ViewModelStateBase, decorators: [{
-                    type: Inject,
-                    args: [VIEWSTATE_PROVIDER]
-                }] }] });
-
-class OpenSubscribeDialogDirective {
-    constructor(dialog) {
-        this.dialog = dialog;
-    }
-    onClick() {
-        const dialogConfig = new MatDialogConfig();
-        dialogConfig.panelClass = ['dialog', 'subscribe', 'primary'];
-        dialogConfig.autoFocus = false;
-        dialogConfig.enterAnimationDuration = 0;
-        dialogConfig.exitAnimationDuration = 0;
-        this.dialog.open(DialogSubscribeComponent, dialogConfig);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: OpenSubscribeDialogDirective, deps: [{ token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: OpenSubscribeDialogDirective, isStandalone: false, selector: "[subscribeDialog]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: OpenSubscribeDialogDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[subscribeDialog]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i1$3.MatDialog }], propDecorators: { onClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-
 class QuickTipsComponent extends ComponentWithViewStateBase {
     constructor(state, snackBar) {
         super(state, snackBar);
@@ -4817,10 +4821,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
             }] } });
 
 class ModelFactorMetricComponent extends ComponentWithViewStateBase {
-    constructor(state, snackBar) {
+    constructor(state, snackBar, userSettings) {
         super(state, snackBar);
         this.state = state;
         this.snackBar = snackBar;
+        this.userSettings = userSettings;
     }
     ngOnInit() {
         super.ngOnInit();
@@ -4831,16 +4836,19 @@ class ModelFactorMetricComponent extends ComponentWithViewStateBase {
         this.benchmark = data.factorScores.benchmark;
         this.factorScore = data.factorScores.factorScores.find(p => p.key == this.metric.publicKey);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModelFactorMetricComponent, deps: [{ token: VIEWSTATE_PROVIDER }, { token: i1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", 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}}</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\" title=\"The confidence interval\">CI: {{factorScore.lowerConfidence}} - {{factorScore.upperConfidence}}</div>\n      \n      <age-indicator [lastMeasured]=\"factorScore.lastMeasured\"></age-indicator>\n      <delta-arrow [factorScore]=\"factorScore\" [delta]=\"delta\"></delta-arrow>\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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", 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.6", 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", 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}}</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\" title=\"The confidence interval\">CI: {{factorScore.lowerConfidence}} - {{factorScore.upperConfidence}}</div>\n      \n      <age-indicator [lastMeasured]=\"factorScore.lastMeasured\"></age-indicator>\n      <delta-arrow [factorScore]=\"factorScore\" [delta]=\"delta\"></delta-arrow>\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: "<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"] }]
         }], ctorParameters: () => [{ type: ViewModelStateBase, decorators: [{
                     type: Inject,
                     args: [VIEWSTATE_PROVIDER]
-                }] }, { type: i1.MatSnackBar }], propDecorators: { metric: [{
+                }] }, { type: i1.MatSnackBar }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [VIEWSTATE_USERSETTINGS_STRATEGY]
+                }] }], propDecorators: { metric: [{
                 type: Input
             }] } });
 
@@ -5033,6 +5041,8 @@ class ModelCanvasComponent extends ComponentWithViewStateBase {
         this.isLoggedIn = data.userInfo.isAdmin || data.userInfo.isCoach;
         this.qualifiedBy = data.factorScores.processingData.qualifiedBy;
         this.isSubscriber = data.isSubscriber;
+        this.canManageIntegrations = this.isLoggedIn && data.appContext != "TeamsDashboard";
+        this.teamsDashboardUrl = data.userInfo.branding.teamsDashboardUrl;
         switch (data.factorScores.composition.points.type) {
             case PointTypeEnum.client:
             case PointTypeEnum.client:
@@ -5063,11 +5073,11 @@ class ModelCanvasComponent extends ComponentWithViewStateBase {
         this.userSettingService.set(this.userSettings.settings);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", 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.6", 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;See our <a href=\"https://github.com/theliberators/scrumteamsurvey.docs/wiki\" target=\"_blank\">wiki</a> for details and a FAQ.</span>\n            </span>\n         </div>\n      </div>\n   </div>\n\n   <div class=\"bottom\" *ngIf=\"metrics.length > 0\">\n         <h3>Process metrics <span class=\"badge badge-beta\">alpha</span></h3>\n         <div class=\"message message-information\"><span class=\"icon ph-info-fill\"></span><span>We are experimenting with process metrics from external services. Please share feedback or issues with us.</span></div>\n         <div class=\"model-factor-metrics\">\n            <model-factor-metric [metric]=\"metric\" *ngFor=\"let metric of metrics\"></model-factor-metric>\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: "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.6", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", 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;See our <a href=\"https://github.com/theliberators/scrumteamsurvey.docs/wiki\" target=\"_blank\">wiki</a> for details and a FAQ.</span>\n            </span>\n         </div>\n      </div>\n   </div>\n\n   <div class=\"bottom\" *ngIf=\"metrics.length > 0\">\n         <h3>Process metrics <span class=\"badge badge-beta\">alpha</span></h3>\n         <div class=\"message message-information\"><span class=\"icon ph-info-fill\"></span><span>We are experimenting with process metrics from external services. Please share feedback or issues with us.</span></div>\n         <div class=\"model-factor-metrics\">\n            <model-factor-metric [metric]=\"metric\" *ngFor=\"let metric of metrics\"></model-factor-metric>\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=\"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"] }]
         }], ctorParameters: () => [{ type: ViewModelStateBase, decorators: [{
                     type: Inject,
                     args: [VIEWSTATE_PROVIDER]
@@ -6715,11 +6725,11 @@ class RoadmapComponent extends ComponentWithViewStateBase {
     }
     ;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: RoadmapComponent, deps: [{ token: VIEWSTATE_PROVIDER }, { token: i1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: RoadmapComponent, isStandalone: false, selector: "roadmap", usesInheritance: true, ngImport: i0, template: "<div class=\"roadmap\" brandbackground [palette]=\"'accent'\" *ngIf=\"show\">\n   <h3>Our roadmap</h3>\n   <div class=\"feature\">\n      <span class=\"icon ph-check-circle-fill\"></span> More Enterprise Features (MFA, SSO, potentially custom domains) (Q1)\n   </div>\n   <div class=\"feature\">\n      <span class=\"icon ph-check-circle-fill\"></span> Introduce Lightweight Partner\u00A0Program (Q1-2)\n   </div>\n   <div class=\"feature\">\n      <span class=\"icon ph-check-circle-fill\"></span> Add basic API for select Enterprise users (Q3)\n   </div>\n   <div class=\"feature\">\n      <span class=\"icon ph-circle\"></span> Evolve Feedback To Support Action\u00A0Learning (in progress, Q1-2)\n   </div>\n   <div class=\"feature\">\n      <span class=\"icon ph-circle\"></span> Introduce new models (in progress, Q1-2)\n   </div>\n   <div class=\"feature\">\n      <span class=\"icon ph-circle\"></span> Transition Teamwork Model Out Of\u00A0Beta (Q4)\n   </div>\n   <div class=\"feature\">\n      <span class=\"icon ph-circle\"></span> Expand with non-survey measures (Q1, 2026)\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}.roadmap{padding:20px;position:relative}.roadmap .close{position:absolute;top:15px;right:15px;font-size:30px;cursor:pointer}.roadmap .feature{display:flex;align-items:center;align-content:center}.roadmap .feature .icon{margin-right:15px}.roadmap .toolbar{margin-top:30px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: BrandBackgroundDirective, selector: "[brandbackground]", inputs: ["palette"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: RoadmapComponent, isStandalone: false, selector: "roadmap", usesInheritance: true, ngImport: i0, template: "<div class=\"roadmap\" brandbackground [palette]=\"'accent'\" *ngIf=\"show\">\n   <h3>Our roadmap</h3>\n   <div class=\"feature\">\n      <span class=\"icon ph-check-circle-fill\"></span> More Enterprise Features (MFA, SSO, potentially custom domains) (Q1)\n   </div>\n   <div class=\"feature\">\n      <span class=\"icon ph-check-circle-fill\"></span> Introduce Lightweight Partner\u00A0Program (Q1-2)\n   </div>\n   <div class=\"feature\">\n      <span class=\"icon ph-check-circle-fill\"></span> Add basic API for select Enterprise users (Q3)\n   </div>\n   <div class=\"feature\">\n      <span class=\"icon ph-check-circle-fill\"></span> Introduce new models (in progress, Q1-2)\n   </div>\n   <div class=\"feature\">\n      <span class=\"icon ph-check-circle-fill\"></span> Expand with process measures (Q4)\n   </div>\n   <div class=\"feature\">\n      <span class=\"icon ph-circle\"></span> Simplify Team Report (Q1)\n   </div>\n   <div class=\"feature\">\n      <span class=\"icon ph-circle\"></span> Transition Teamwork Model Out Of\u00A0Beta (Q1)\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}.roadmap{padding:20px;position:relative}.roadmap .close{position:absolute;top:15px;right:15px;font-size:30px;cursor:pointer}.roadmap .feature{display:flex;align-items:center;align-content:center}.roadmap .feature .icon{margin-right:15px}.roadmap .toolbar{margin-top:30px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: BrandBackgroundDirective, selector: "[brandbackground]", inputs: ["palette"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: RoadmapComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'roadmap', standalone: false, template: "<div class=\"roadmap\" brandbackground [palette]=\"'accent'\" *ngIf=\"show\">\n   <h3>Our roadmap</h3>\n   <div class=\"feature\">\n      <span class=\"icon ph-check-circle-fill\"></span> More Enterprise Features (MFA, SSO, potentially custom domains) (Q1)\n   </div>\n   <div class=\"feature\">\n      <span class=\"icon ph-check-circle-fill\"></span> Introduce Lightweight Partner\u00A0Program (Q1-2)\n   </div>\n   <div class=\"feature\">\n      <span class=\"icon ph-check-circle-fill\"></span> Add basic API for select Enterprise users (Q3)\n   </div>\n   <div class=\"feature\">\n      <span class=\"icon ph-circle\"></span> Evolve Feedback To Support Action\u00A0Learning (in progress, Q1-2)\n   </div>\n   <div class=\"feature\">\n      <span class=\"icon ph-circle\"></span> Introduce new models (in progress, Q1-2)\n   </div>\n   <div class=\"feature\">\n      <span class=\"icon ph-circle\"></span> Transition Teamwork Model Out Of\u00A0Beta (Q4)\n   </div>\n   <div class=\"feature\">\n      <span class=\"icon ph-circle\"></span> Expand with non-survey measures (Q1, 2026)\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}.roadmap{padding:20px;position:relative}.roadmap .close{position:absolute;top:15px;right:15px;font-size:30px;cursor:pointer}.roadmap .feature{display:flex;align-items:center;align-content:center}.roadmap .feature .icon{margin-right:15px}.roadmap .toolbar{margin-top:30px}\n"] }]
+            args: [{ selector: 'roadmap', standalone: false, template: "<div class=\"roadmap\" brandbackground [palette]=\"'accent'\" *ngIf=\"show\">\n   <h3>Our roadmap</h3>\n   <div class=\"feature\">\n      <span class=\"icon ph-check-circle-fill\"></span> More Enterprise Features (MFA, SSO, potentially custom domains) (Q1)\n   </div>\n   <div class=\"feature\">\n      <span class=\"icon ph-check-circle-fill\"></span> Introduce Lightweight Partner\u00A0Program (Q1-2)\n   </div>\n   <div class=\"feature\">\n      <span class=\"icon ph-check-circle-fill\"></span> Add basic API for select Enterprise users (Q3)\n   </div>\n   <div class=\"feature\">\n      <span class=\"icon ph-check-circle-fill\"></span> Introduce new models (in progress, Q1-2)\n   </div>\n   <div class=\"feature\">\n      <span class=\"icon ph-check-circle-fill\"></span> Expand with process measures (Q4)\n   </div>\n   <div class=\"feature\">\n      <span class=\"icon ph-circle\"></span> Simplify Team Report (Q1)\n   </div>\n   <div class=\"feature\">\n      <span class=\"icon ph-circle\"></span> Transition Teamwork Model Out Of\u00A0Beta (Q1)\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}.roadmap{padding:20px;position:relative}.roadmap .close{position:absolute;top:15px;right:15px;font-size:30px;cursor:pointer}.roadmap .feature{display:flex;align-items:center;align-content:center}.roadmap .feature .icon{margin-right:15px}.roadmap .toolbar{margin-top:30px}\n"] }]
         }], ctorParameters: () => [{ type: ViewModelStateBase, decorators: [{
                     type: Inject,
                     args: [VIEWSTATE_PROVIDER]
@@ -6952,11 +6962,11 @@ class TryNowProfessionalComponent extends ComponentWithViewStateBase {
     }
     ;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: TryNowProfessionalComponent, deps: [{ token: VIEWSTATE_PROVIDER }, { token: i1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: TryNowProfessionalComponent, isStandalone: false, selector: "trynow-professional", usesInheritance: true, ngImport: i0, template: "<div class=\"box trynowprofessional\" brandbackground [palette]=\"'accent'\" *ngIf=\"show\">\n   <h3>Upgrade to Professional</h3>\n   \n   <p>Discover the full power of Columinity with <b>Professional</b>:</p>\n   <ul>\n      <li>Extensive science-based recommendations.</li>\n      <li>Access to the Teams Dashboard.</li>\n      <li>Secure access with user accounts.</li>\n      <li>Aggregate results from many teams.</li>\n      <li>Access to more results and statistics.</li>\n   </ul>\n\n   <div class=\"message message-black\"><span class=\"icon ph-smiley-fill\"></span><span>Use the coupon <b>TRYPRO</b> to pay only &euro;1,- for the first team on your monthly Professional plan.</span></div>\n\n   <div class=\"link\">\n      <a [href]=\"subscribeUrl\" target=\"_blank\">Try now ></a>\n   </div>\n</div>\n\n\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}.box{background:#fff73f}.box h3{margin-bottom:15px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: BrandBackgroundDirective, selector: "[brandbackground]", inputs: ["palette"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: TryNowProfessionalComponent, isStandalone: false, selector: "trynow-professional", usesInheritance: true, ngImport: i0, template: "<div class=\"box trynowprofessional\" brandbackground [palette]=\"'accent'\" *ngIf=\"show\">\n   <h3>Upgrade to Professional</h3>\n   \n   <p>Discover the full power of Columinity with <b>Professional</b>:</p>\n   <ul>\n      <li>Unlimited science-based recommendations.</li>\n      <li>Access to the Teams Dashboard.</li>\n      <li>Benchmarks per ndustry/size/region.</li>\n      <li>Pull metrics from JIRA, Azure DevOps, etc.</li>\n      <li>Secure access with user accounts.</li>\n      <li>Aggregate results from many teams.</li>\n      <li>Set up repeat scans easily.</li>\n      <li>Access to advanced results.</li>\n   </ul>\n\n   <div class=\"message message-black\"><span class=\"icon ph-smiley-fill\"></span><span>Use the coupon <b>TRYPRO</b> to pay &euro;1,- for the first team on your monthly Professional plan.</span></div>\n\n   <div class=\"link\">\n      <a [href]=\"subscribeUrl\" target=\"_blank\">Try now ></a>\n   </div>\n</div>\n\n\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}.box{background:#fff73f}.box h3{margin-bottom:15px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: BrandBackgroundDirective, selector: "[brandbackground]", inputs: ["palette"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: TryNowProfessionalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'trynow-professional', standalone: false, template: "<div class=\"box trynowprofessional\" brandbackground [palette]=\"'accent'\" *ngIf=\"show\">\n   <h3>Upgrade to Professional</h3>\n   \n   <p>Discover the full power of Columinity with <b>Professional</b>:</p>\n   <ul>\n      <li>Extensive science-based recommendations.</li>\n      <li>Access to the Teams Dashboard.</li>\n      <li>Secure access with user accounts.</li>\n      <li>Aggregate results from many teams.</li>\n      <li>Access to more results and statistics.</li>\n   </ul>\n\n   <div class=\"message message-black\"><span class=\"icon ph-smiley-fill\"></span><span>Use the coupon <b>TRYPRO</b> to pay only &euro;1,- for the first team on your monthly Professional plan.</span></div>\n\n   <div class=\"link\">\n      <a [href]=\"subscribeUrl\" target=\"_blank\">Try now ></a>\n   </div>\n</div>\n\n\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}.box{background:#fff73f}.box h3{margin-bottom:15px}\n"] }]
+            args: [{ selector: 'trynow-professional', standalone: false, template: "<div class=\"box trynowprofessional\" brandbackground [palette]=\"'accent'\" *ngIf=\"show\">\n   <h3>Upgrade to Professional</h3>\n   \n   <p>Discover the full power of Columinity with <b>Professional</b>:</p>\n   <ul>\n      <li>Unlimited science-based recommendations.</li>\n      <li>Access to the Teams Dashboard.</li>\n      <li>Benchmarks per ndustry/size/region.</li>\n      <li>Pull metrics from JIRA, Azure DevOps, etc.</li>\n      <li>Secure access with user accounts.</li>\n      <li>Aggregate results from many teams.</li>\n      <li>Set up repeat scans easily.</li>\n      <li>Access to advanced results.</li>\n   </ul>\n\n   <div class=\"message message-black\"><span class=\"icon ph-smiley-fill\"></span><span>Use the coupon <b>TRYPRO</b> to pay &euro;1,- for the first team on your monthly Professional plan.</span></div>\n\n   <div class=\"link\">\n      <a [href]=\"subscribeUrl\" target=\"_blank\">Try now ></a>\n   </div>\n</div>\n\n\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}.box{background:#fff73f}.box h3{margin-bottom:15px}\n"] }]
         }], ctorParameters: () => [{ type: ViewModelStateBase, decorators: [{
                     type: Inject,
                     args: [VIEWSTATE_PROVIDER]
@@ -7843,6 +7853,8 @@ class ModelVisualizationModule {
             SatPopoverModule,
             FactorInformationDialogModule,
             ProgressbarModule,
+            MatTooltipModule,
+            DialogSubscribeModule,
             MatFormFieldModule,
             ReactiveFormsModule,
             DateRangePipeModule], exports: [ModelCanvasComponent,
@@ -7857,6 +7869,8 @@ class ModelVisualizationModule {
             SatPopoverModule,
             FactorInformationDialogModule,
             ProgressbarModule,
+            MatTooltipModule,
+            DialogSubscribeModule,
             MatFormFieldModule,
             ReactiveFormsModule,
             DateRangePipeModule] }); }
@@ -7872,6 +7886,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                         SatPopoverModule,
                         FactorInformationDialogModule,
                         ProgressbarModule,
+                        MatTooltipModule,
+                        DialogSubscribeModule,
                         MatFormFieldModule,
                         ReactiveFormsModule,
                         DateRangePipeModule