@the-liberators/ngx-scrumteamsurvey-tools 2.2.90 → 2.2.91

package/esm2022/lib/guides/components/resumeguidehover/resumeguidehover.component.mjs

@@ -25,11 +25,11 @@ export class ResumeGuideHoverComponent extends ComponentWithViewStateBase {
         this.guidePopupService.resumeGuide(this.guideDialog);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: ResumeGuideHoverComponent, deps: [{ token: VIEWSTATE_PROVIDER }, { token: i1.GuidePopupService }, { token: DIALOG_GUIDE_TOKEN }, { token: i2.MatSnackBar }, { token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: ResumeGuideHoverComponent, selector: "resumeguidehover", usesInheritance: true, ngImport: i0, template: "<div class=\"resumeguidehover\" guideDialog *ngIf=\"showResumeGuide\">\n   <span class=\"icon ph-play-circle-fill\"></span>Resume Guide\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%}.resumeguidehover{cursor:pointer;background:#00af77;height:20px;padding:10px;color:#fff;position:fixed;right:40px;bottom:0;z-index:254;font-weight:600;font-size:16px;text-transform:uppercase}@media only screen and (max-width: 640px){.resumeguidehover{display:none}}.resumeguidehover:hover{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;background:#2f2f2f;color:#fff}.resumeguidehover .icon{vertical-align:middle;margin-right:10px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.OpenGuideDialogDirective, selector: "[guideDialog]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: ResumeGuideHoverComponent, selector: "resumeguidehover", usesInheritance: true, ngImport: i0, template: "<div class=\"resumeguidehover\" guideDialog *ngIf=\"showResumeGuide\">\n   <span class=\"icon ph-play-circle-fill\"></span>Resume Guide\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}.resumeguidehover{cursor:pointer;background:#00af77;height:20px;padding:10px;color:#fff;position:fixed;right:40px;bottom:0;z-index:254;font-weight:600;font-size:16px;text-transform:uppercase}@media only screen and (max-width: 640px){.resumeguidehover{display:none}}.resumeguidehover:hover{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;background:#2f2f2f;color:#fff}.resumeguidehover .icon{vertical-align:middle;margin-right:10px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.OpenGuideDialogDirective, selector: "[guideDialog]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: ResumeGuideHoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'resumeguidehover', template: "<div class=\"resumeguidehover\" guideDialog *ngIf=\"showResumeGuide\">\n   <span class=\"icon ph-play-circle-fill\"></span>Resume Guide\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%}.resumeguidehover{cursor:pointer;background:#00af77;height:20px;padding:10px;color:#fff;position:fixed;right:40px;bottom:0;z-index:254;font-weight:600;font-size:16px;text-transform:uppercase}@media only screen and (max-width: 640px){.resumeguidehover{display:none}}.resumeguidehover:hover{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;background:#2f2f2f;color:#fff}.resumeguidehover .icon{vertical-align:middle;margin-right:10px}\n"] }]
+            args: [{ selector: 'resumeguidehover', template: "<div class=\"resumeguidehover\" guideDialog *ngIf=\"showResumeGuide\">\n   <span class=\"icon ph-play-circle-fill\"></span>Resume Guide\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}.resumeguidehover{cursor:pointer;background:#00af77;height:20px;padding:10px;color:#fff;position:fixed;right:40px;bottom:0;z-index:254;font-weight:600;font-size:16px;text-transform:uppercase}@media only screen and (max-width: 640px){.resumeguidehover{display:none}}.resumeguidehover:hover{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;background:#2f2f2f;color:#fff}.resumeguidehover .icon{vertical-align:middle;margin-right:10px}\n"] }]
         }], ctorParameters: () => [{ type: i6.ViewModelStateBase, decorators: [{
                     type: Inject,
                     args: [VIEWSTATE_PROVIDER]

package/esm2022/lib/guides/dialogs/dialog-guide/dialog-guide.component.mjs

@@ -97,11 +97,11 @@ export class DialogGuideComponent extends ComponentWithViewStateBase {
         this.selectNextOpenItem();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DialogGuideComponent, deps: [{ token: VIEWSTATE_PROVIDER }, { token: i1.GuidePopupService }, { token: GUIDESTATE_PROVIDER }, { token: DIALOG_GUIDES_TOKEN }, { token: i2.MatSnackBar }, { token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: DialogGuideComponent, selector: "ng-component", host: { listeners: { "window:resize": "onWindowResize($event)" } }, usesInheritance: true, ngImport: i0, template: "<mat-dialog-content id=\"dialog-gettingstarted\" *ngIf=\"guide\">\n   <div class=\"close\" mat-dialog-close><span class=\"responsive icon ph-x-bold\"></span></div>\n   <div class=\"guides-navigation leftcolumn\" *ngIf=\"showSteps()\">\n      <div class=\"steps\">\n         <h3 class=\"title\">{{guide.name}}</h3>\n         <div class=\"steplist\">\n            <div class=\"steplist-item\" *ngFor=\"let step of guide.steps\" [ngClass]=\"{'active': step == activeStep}\">\n               <checkbox [label]=\"step.title\" (onCheckChange)=\"handleCheckChange(step, $event)\" [checked]=\"step.completed\" (click)=\"select(step)\"></checkbox>\n            </div>\n         </div>\n      </div>\n      <div class=\"toolbar\">\n         <div class=\"link dismiss\" [routerLink]=\"[]\" (click)=\"dismiss()\">dismiss guide</div>\n      </div>\n   </div>\n   <div class=\"guides-item rightcolumn\" *ngIf=\"activeStep\">\n      <div class=\"mediaframe\" *ngIf=\"activeStep.media\">\n         <imageslider [items]=\"activeStep.media\"></imageslider>\n      </div>\n      <div class=\"description\">\n         <h3 class=\"title\">{{activeStep.title}}</h3>\n         <div class=\"innerHtml\" [innerHtml]=\"activeStep.body\"></div>\n         <div class=\"link\">\n            <a [href]=\"activeStep.url\" target=\"_blank\" *ngIf=\"activeStep.url\">learn more ></a>\n         </div>\n      </div>\n      <div class=\"buttons\">\n         <a [routerLink]=\"[]\" class=\"button cta markcomplete\" (click)=\"handleCheckChange(activeStep, true)\" *ngIf=\"!activeStep.completed && showSteps()\">mark done</a>\n         <a [routerLink]=\"[]\" class=\"button cta markcomplete\" (click)=\"handleCheckChange(activeStep, false)\" *ngIf=\"activeStep.completed && showSteps()\">mark undone</a>\n         <a [routerLink]=\"[]\" class=\"button borderonly\" (click)=\"next(activeStep)\" *ngIf=\"!isLastStep(activeStep)\">next</a>\n         <a [routerLink]=\"[]\" class=\"button borderonly\" (click)=\"toGuides()\" *ngIf=\"isLastStep(activeStep)\">more guides</a>\n         <a [routerLink]=\"[]\" class=\"button cta markcomplete\" (click)=\"complete(activeStep)\" *ngIf=\"isLastStep(activeStep) && !showSteps()\">complete</a>\n      </div>\n   </div>\n</mat-dialog-content>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.mat-mdc-dialog-content{position:relative}.mat-mdc-dialog-content .link{text-decoration:none}.mat-mdc-dialog-content .link:hover{text-decoration:underline}.mat-mdc-dialog-content .close{position:absolute;right:15px;top:15px;z-index:10;background:#fff;height:40px;width:40px;display:flex;justify-content:center;align-items:center}.mat-mdc-dialog-content .close .icon{cursor:pointer;font-size:30px}.mat-mdc-dialog-content .guides-item{flex-direction:column;display:flex;height:100%;background:#2f2f2f}@media only screen and (max-width: 640px){.mat-mdc-dialog-content .guides-item{background:#00af77}}.mat-mdc-dialog-content .guides-item .mediaframe,.mat-mdc-dialog-content .guides-item .mediaframe img{width:100%}.mat-mdc-dialog-content .guides-item .buttons{margin-top:15px;display:flex;padding:0 20px 20px}.mat-mdc-dialog-content .guides-item .buttons .button{margin-bottom:0;margin-right:15px;cursor:pointer;text-decoration:none}@media only screen and (max-width: 640px){.mat-mdc-dialog-content .guides-item .buttons{display:block}.mat-mdc-dialog-content .guides-item .buttons .button{margin-bottom:10px}.mat-mdc-dialog-content .guides-item .buttons .button.borderonly{border-color:#fff}}.mat-mdc-dialog-content .guides-item .description{flex:auto;justify-content:space-between;padding:20px;color:#fff}.mat-mdc-dialog-content .guides-item .description a{color:#fff}.mat-mdc-dialog-content .guides-item .description a:hover{color:#ef6f00}.mat-mdc-dialog-content .guides-item .description .title{color:#fff;font-size:30px;margin-bottom:30px}.mat-mdc-dialog-content .guides-item .description .link{text-align:right;margin-top:10px}.mat-mdc-dialog-content .guides-item .description .link a{color:#fff}.mat-mdc-dialog-content .guides-item .description .innerHtml,.mat-mdc-dialog-content .guides-item .description .innerHtml div,.mat-mdc-dialog-content .guides-item .description .innerHtml p{font-size:15px}.mat-mdc-dialog-content .guides-navigation{display:flex;flex-direction:column;justify-content:space-between}.mat-mdc-dialog-content .guides-navigation .title{color:#fff}.mat-mdc-dialog-content .guides-navigation .toolbar{display:block}.mat-mdc-dialog-content .guides-navigation .toolbar .link{margin-bottom:10px;cursor:pointer}.mat-mdc-dialog-content .guides-navigation .steplist{margin-top:30px;margin-bottom:60px}.mat-mdc-dialog-content .guides-navigation .steplist .steplist-item.active{background:#009666}\n"], dependencies: [{ kind: "directive", type: i3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.CheckboxComponent, selector: "checkbox", inputs: ["label", "disabled", "checked"], outputs: ["onCheckChange"] }, { kind: "component", type: i7.ImageSliderComponent, selector: "imageslider", inputs: ["items"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: DialogGuideComponent, selector: "ng-component", host: { listeners: { "window:resize": "onWindowResize($event)" } }, usesInheritance: true, ngImport: i0, template: "<mat-dialog-content id=\"dialog-gettingstarted\" *ngIf=\"guide\">\n   <div class=\"close\" mat-dialog-close><span class=\"responsive icon ph-x-bold\"></span></div>\n   <div class=\"guides-navigation leftcolumn\" *ngIf=\"showSteps()\">\n      <div class=\"steps\">\n         <h3 class=\"title\">{{guide.name}}</h3>\n         <div class=\"steplist\">\n            <div class=\"steplist-item\" *ngFor=\"let step of guide.steps\" [ngClass]=\"{'active': step == activeStep}\">\n               <checkbox [label]=\"step.title\" (onCheckChange)=\"handleCheckChange(step, $event)\" [checked]=\"step.completed\" (click)=\"select(step)\"></checkbox>\n            </div>\n         </div>\n      </div>\n      <div class=\"toolbar\">\n         <div class=\"link dismiss\" [routerLink]=\"[]\" (click)=\"dismiss()\">dismiss guide</div>\n      </div>\n   </div>\n   <div class=\"guides-item rightcolumn\" *ngIf=\"activeStep\">\n      <div class=\"mediaframe\" *ngIf=\"activeStep.media\">\n         <imageslider [items]=\"activeStep.media\"></imageslider>\n      </div>\n      <div class=\"description\">\n         <h3 class=\"title\">{{activeStep.title}}</h3>\n         <div class=\"innerHtml\" [innerHtml]=\"activeStep.body\"></div>\n         <div class=\"link\">\n            <a [href]=\"activeStep.url\" target=\"_blank\" *ngIf=\"activeStep.url\">learn more ></a>\n         </div>\n      </div>\n      <div class=\"buttons\">\n         <a [routerLink]=\"[]\" class=\"button cta markcomplete\" (click)=\"handleCheckChange(activeStep, true)\" *ngIf=\"!activeStep.completed && showSteps()\">mark done</a>\n         <a [routerLink]=\"[]\" class=\"button cta markcomplete\" (click)=\"handleCheckChange(activeStep, false)\" *ngIf=\"activeStep.completed && showSteps()\">mark undone</a>\n         <a [routerLink]=\"[]\" class=\"button borderonly\" (click)=\"next(activeStep)\" *ngIf=\"!isLastStep(activeStep)\">next</a>\n         <a [routerLink]=\"[]\" class=\"button borderonly\" (click)=\"toGuides()\" *ngIf=\"isLastStep(activeStep)\">more guides</a>\n         <a [routerLink]=\"[]\" class=\"button cta markcomplete\" (click)=\"complete(activeStep)\" *ngIf=\"isLastStep(activeStep) && !showSteps()\">complete</a>\n      </div>\n   </div>\n</mat-dialog-content>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}.mat-mdc-dialog-content{position:relative}.mat-mdc-dialog-content .link{text-decoration:none}.mat-mdc-dialog-content .link:hover{text-decoration:underline}.mat-mdc-dialog-content .close{position:absolute;right:15px;top:15px;z-index:10;background:#fff;height:40px;width:40px;display:flex;justify-content:center;align-items:center}.mat-mdc-dialog-content .close .icon{cursor:pointer;font-size:30px}.mat-mdc-dialog-content .guides-item{flex-direction:column;display:flex;height:100%;background:#2f2f2f}@media only screen and (max-width: 640px){.mat-mdc-dialog-content .guides-item{background:#00af77}}.mat-mdc-dialog-content .guides-item .mediaframe,.mat-mdc-dialog-content .guides-item .mediaframe img{width:100%}.mat-mdc-dialog-content .guides-item .buttons{margin-top:15px;display:flex;padding:0 20px 20px}.mat-mdc-dialog-content .guides-item .buttons .button{margin-bottom:0;margin-right:15px;cursor:pointer;text-decoration:none}@media only screen and (max-width: 640px){.mat-mdc-dialog-content .guides-item .buttons{display:block}.mat-mdc-dialog-content .guides-item .buttons .button{margin-bottom:10px}.mat-mdc-dialog-content .guides-item .buttons .button.borderonly{border-color:#fff}}.mat-mdc-dialog-content .guides-item .description{flex:auto;justify-content:space-between;padding:20px;color:#fff}.mat-mdc-dialog-content .guides-item .description a{color:#fff}.mat-mdc-dialog-content .guides-item .description a:hover{color:#ef6f00}.mat-mdc-dialog-content .guides-item .description .title{color:#fff;font-size:30px;margin-bottom:30px}.mat-mdc-dialog-content .guides-item .description .link{text-align:right;margin-top:10px}.mat-mdc-dialog-content .guides-item .description .link a{color:#fff}.mat-mdc-dialog-content .guides-item .description .innerHtml,.mat-mdc-dialog-content .guides-item .description .innerHtml div,.mat-mdc-dialog-content .guides-item .description .innerHtml p{font-size:15px}.mat-mdc-dialog-content .guides-navigation{display:flex;flex-direction:column;justify-content:space-between}.mat-mdc-dialog-content .guides-navigation .title{color:#fff}.mat-mdc-dialog-content .guides-navigation .toolbar{display:block}.mat-mdc-dialog-content .guides-navigation .toolbar .link{margin-bottom:10px;cursor:pointer}.mat-mdc-dialog-content .guides-navigation .steplist{margin-top:30px;margin-bottom:60px}.mat-mdc-dialog-content .guides-navigation .steplist .steplist-item.active{background:#009666}\n"], dependencies: [{ kind: "directive", type: i3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.CheckboxComponent, selector: "checkbox", inputs: ["label", "disabled", "checked"], outputs: ["onCheckChange"] }, { kind: "component", type: i7.ImageSliderComponent, selector: "imageslider", inputs: ["items"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DialogGuideComponent, decorators: [{
             type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, template: "<mat-dialog-content id=\"dialog-gettingstarted\" *ngIf=\"guide\">\n   <div class=\"close\" mat-dialog-close><span class=\"responsive icon ph-x-bold\"></span></div>\n   <div class=\"guides-navigation leftcolumn\" *ngIf=\"showSteps()\">\n      <div class=\"steps\">\n         <h3 class=\"title\">{{guide.name}}</h3>\n         <div class=\"steplist\">\n            <div class=\"steplist-item\" *ngFor=\"let step of guide.steps\" [ngClass]=\"{'active': step == activeStep}\">\n               <checkbox [label]=\"step.title\" (onCheckChange)=\"handleCheckChange(step, $event)\" [checked]=\"step.completed\" (click)=\"select(step)\"></checkbox>\n            </div>\n         </div>\n      </div>\n      <div class=\"toolbar\">\n         <div class=\"link dismiss\" [routerLink]=\"[]\" (click)=\"dismiss()\">dismiss guide</div>\n      </div>\n   </div>\n   <div class=\"guides-item rightcolumn\" *ngIf=\"activeStep\">\n      <div class=\"mediaframe\" *ngIf=\"activeStep.media\">\n         <imageslider [items]=\"activeStep.media\"></imageslider>\n      </div>\n      <div class=\"description\">\n         <h3 class=\"title\">{{activeStep.title}}</h3>\n         <div class=\"innerHtml\" [innerHtml]=\"activeStep.body\"></div>\n         <div class=\"link\">\n            <a [href]=\"activeStep.url\" target=\"_blank\" *ngIf=\"activeStep.url\">learn more ></a>\n         </div>\n      </div>\n      <div class=\"buttons\">\n         <a [routerLink]=\"[]\" class=\"button cta markcomplete\" (click)=\"handleCheckChange(activeStep, true)\" *ngIf=\"!activeStep.completed && showSteps()\">mark done</a>\n         <a [routerLink]=\"[]\" class=\"button cta markcomplete\" (click)=\"handleCheckChange(activeStep, false)\" *ngIf=\"activeStep.completed && showSteps()\">mark undone</a>\n         <a [routerLink]=\"[]\" class=\"button borderonly\" (click)=\"next(activeStep)\" *ngIf=\"!isLastStep(activeStep)\">next</a>\n         <a [routerLink]=\"[]\" class=\"button borderonly\" (click)=\"toGuides()\" *ngIf=\"isLastStep(activeStep)\">more guides</a>\n         <a [routerLink]=\"[]\" class=\"button cta markcomplete\" (click)=\"complete(activeStep)\" *ngIf=\"isLastStep(activeStep) && !showSteps()\">complete</a>\n      </div>\n   </div>\n</mat-dialog-content>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.mat-mdc-dialog-content{position:relative}.mat-mdc-dialog-content .link{text-decoration:none}.mat-mdc-dialog-content .link:hover{text-decoration:underline}.mat-mdc-dialog-content .close{position:absolute;right:15px;top:15px;z-index:10;background:#fff;height:40px;width:40px;display:flex;justify-content:center;align-items:center}.mat-mdc-dialog-content .close .icon{cursor:pointer;font-size:30px}.mat-mdc-dialog-content .guides-item{flex-direction:column;display:flex;height:100%;background:#2f2f2f}@media only screen and (max-width: 640px){.mat-mdc-dialog-content .guides-item{background:#00af77}}.mat-mdc-dialog-content .guides-item .mediaframe,.mat-mdc-dialog-content .guides-item .mediaframe img{width:100%}.mat-mdc-dialog-content .guides-item .buttons{margin-top:15px;display:flex;padding:0 20px 20px}.mat-mdc-dialog-content .guides-item .buttons .button{margin-bottom:0;margin-right:15px;cursor:pointer;text-decoration:none}@media only screen and (max-width: 640px){.mat-mdc-dialog-content .guides-item .buttons{display:block}.mat-mdc-dialog-content .guides-item .buttons .button{margin-bottom:10px}.mat-mdc-dialog-content .guides-item .buttons .button.borderonly{border-color:#fff}}.mat-mdc-dialog-content .guides-item .description{flex:auto;justify-content:space-between;padding:20px;color:#fff}.mat-mdc-dialog-content .guides-item .description a{color:#fff}.mat-mdc-dialog-content .guides-item .description a:hover{color:#ef6f00}.mat-mdc-dialog-content .guides-item .description .title{color:#fff;font-size:30px;margin-bottom:30px}.mat-mdc-dialog-content .guides-item .description .link{text-align:right;margin-top:10px}.mat-mdc-dialog-content .guides-item .description .link a{color:#fff}.mat-mdc-dialog-content .guides-item .description .innerHtml,.mat-mdc-dialog-content .guides-item .description .innerHtml div,.mat-mdc-dialog-content .guides-item .description .innerHtml p{font-size:15px}.mat-mdc-dialog-content .guides-navigation{display:flex;flex-direction:column;justify-content:space-between}.mat-mdc-dialog-content .guides-navigation .title{color:#fff}.mat-mdc-dialog-content .guides-navigation .toolbar{display:block}.mat-mdc-dialog-content .guides-navigation .toolbar .link{margin-bottom:10px;cursor:pointer}.mat-mdc-dialog-content .guides-navigation .steplist{margin-top:30px;margin-bottom:60px}.mat-mdc-dialog-content .guides-navigation .steplist .steplist-item.active{background:#009666}\n"] }]
+            args: [{ encapsulation: ViewEncapsulation.None, template: "<mat-dialog-content id=\"dialog-gettingstarted\" *ngIf=\"guide\">\n   <div class=\"close\" mat-dialog-close><span class=\"responsive icon ph-x-bold\"></span></div>\n   <div class=\"guides-navigation leftcolumn\" *ngIf=\"showSteps()\">\n      <div class=\"steps\">\n         <h3 class=\"title\">{{guide.name}}</h3>\n         <div class=\"steplist\">\n            <div class=\"steplist-item\" *ngFor=\"let step of guide.steps\" [ngClass]=\"{'active': step == activeStep}\">\n               <checkbox [label]=\"step.title\" (onCheckChange)=\"handleCheckChange(step, $event)\" [checked]=\"step.completed\" (click)=\"select(step)\"></checkbox>\n            </div>\n         </div>\n      </div>\n      <div class=\"toolbar\">\n         <div class=\"link dismiss\" [routerLink]=\"[]\" (click)=\"dismiss()\">dismiss guide</div>\n      </div>\n   </div>\n   <div class=\"guides-item rightcolumn\" *ngIf=\"activeStep\">\n      <div class=\"mediaframe\" *ngIf=\"activeStep.media\">\n         <imageslider [items]=\"activeStep.media\"></imageslider>\n      </div>\n      <div class=\"description\">\n         <h3 class=\"title\">{{activeStep.title}}</h3>\n         <div class=\"innerHtml\" [innerHtml]=\"activeStep.body\"></div>\n         <div class=\"link\">\n            <a [href]=\"activeStep.url\" target=\"_blank\" *ngIf=\"activeStep.url\">learn more ></a>\n         </div>\n      </div>\n      <div class=\"buttons\">\n         <a [routerLink]=\"[]\" class=\"button cta markcomplete\" (click)=\"handleCheckChange(activeStep, true)\" *ngIf=\"!activeStep.completed && showSteps()\">mark done</a>\n         <a [routerLink]=\"[]\" class=\"button cta markcomplete\" (click)=\"handleCheckChange(activeStep, false)\" *ngIf=\"activeStep.completed && showSteps()\">mark undone</a>\n         <a [routerLink]=\"[]\" class=\"button borderonly\" (click)=\"next(activeStep)\" *ngIf=\"!isLastStep(activeStep)\">next</a>\n         <a [routerLink]=\"[]\" class=\"button borderonly\" (click)=\"toGuides()\" *ngIf=\"isLastStep(activeStep)\">more guides</a>\n         <a [routerLink]=\"[]\" class=\"button cta markcomplete\" (click)=\"complete(activeStep)\" *ngIf=\"isLastStep(activeStep) && !showSteps()\">complete</a>\n      </div>\n   </div>\n</mat-dialog-content>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}.mat-mdc-dialog-content{position:relative}.mat-mdc-dialog-content .link{text-decoration:none}.mat-mdc-dialog-content .link:hover{text-decoration:underline}.mat-mdc-dialog-content .close{position:absolute;right:15px;top:15px;z-index:10;background:#fff;height:40px;width:40px;display:flex;justify-content:center;align-items:center}.mat-mdc-dialog-content .close .icon{cursor:pointer;font-size:30px}.mat-mdc-dialog-content .guides-item{flex-direction:column;display:flex;height:100%;background:#2f2f2f}@media only screen and (max-width: 640px){.mat-mdc-dialog-content .guides-item{background:#00af77}}.mat-mdc-dialog-content .guides-item .mediaframe,.mat-mdc-dialog-content .guides-item .mediaframe img{width:100%}.mat-mdc-dialog-content .guides-item .buttons{margin-top:15px;display:flex;padding:0 20px 20px}.mat-mdc-dialog-content .guides-item .buttons .button{margin-bottom:0;margin-right:15px;cursor:pointer;text-decoration:none}@media only screen and (max-width: 640px){.mat-mdc-dialog-content .guides-item .buttons{display:block}.mat-mdc-dialog-content .guides-item .buttons .button{margin-bottom:10px}.mat-mdc-dialog-content .guides-item .buttons .button.borderonly{border-color:#fff}}.mat-mdc-dialog-content .guides-item .description{flex:auto;justify-content:space-between;padding:20px;color:#fff}.mat-mdc-dialog-content .guides-item .description a{color:#fff}.mat-mdc-dialog-content .guides-item .description a:hover{color:#ef6f00}.mat-mdc-dialog-content .guides-item .description .title{color:#fff;font-size:30px;margin-bottom:30px}.mat-mdc-dialog-content .guides-item .description .link{text-align:right;margin-top:10px}.mat-mdc-dialog-content .guides-item .description .link a{color:#fff}.mat-mdc-dialog-content .guides-item .description .innerHtml,.mat-mdc-dialog-content .guides-item .description .innerHtml div,.mat-mdc-dialog-content .guides-item .description .innerHtml p{font-size:15px}.mat-mdc-dialog-content .guides-navigation{display:flex;flex-direction:column;justify-content:space-between}.mat-mdc-dialog-content .guides-navigation .title{color:#fff}.mat-mdc-dialog-content .guides-navigation .toolbar{display:block}.mat-mdc-dialog-content .guides-navigation .toolbar .link{margin-bottom:10px;cursor:pointer}.mat-mdc-dialog-content .guides-navigation .steplist{margin-top:30px;margin-bottom:60px}.mat-mdc-dialog-content .guides-navigation .steplist .steplist-item.active{background:#009666}\n"] }]
         }], ctorParameters: () => [{ type: i8.ViewModelStateBase, decorators: [{
                     type: Inject,
                     args: [VIEWSTATE_PROVIDER]

package/esm2022/lib/guides/dialogs/dialog-guides/dialog-guides.component.mjs

@@ -43,11 +43,11 @@ export class DialogGuidesComponent extends ComponentWithViewStateBase {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DialogGuidesComponent, deps: [{ token: VIEWSTATE_PROVIDER }, { token: i1.GuidePopupService }, { token: GUIDESTATE_PROVIDER }, { token: DIALOG_GUIDE_TOKEN }, { token: i2.MatDialog }, { token: i3.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: DialogGuidesComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dialog-header\" id=\"dialog-gettingstartedguides\">\n   <h1 mat-dialog-title>How To Guides</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>We created a number of simple guides to familiarize you with the many features:</p>\n   <div class=\"guidelist\">\n      <div class=\"guide\" *ngFor=\"let guide of guides\">\n         <ng-container *ngIf=\"activeGuideKey == guide.key\">\n            <a [routerLink]=\"[]\" [id]=\"'guide-' + guide.key\" (click)=\"setActiveGuide(guide)\">{{guide.name}}<span class=\"badge dark\">resume</span></a>\n         </ng-container>\n         <ng-container *ngIf=\"activeGuideKey != guide.key\">\n            <a [routerLink]=\"[]\" [id]=\"'guide-' + guide.key\" (click)=\"setActiveGuide(guide)\">{{guide.name}}</a>\n         </ng-container>\n      </div>\n   </div>\n</mat-dialog-content>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.mat-dialog-container{background:#00af77}.guidelist{margin-top:30px;margin-bottom:30px}.guidelist .guide{line-height:100%;font-size:19px;margin-bottom:15px;display:flex}.guidelist .guide .icon{vertical-align:middle}.guidelist .guide a{font-family:StevieSans,sans-serif;font-weight:600;text-decoration:none;color:#fff}.guidelist .guide a:hover{color:#fff73f}.guidelist .guide a .badge{margin-left:10px}\n"], dependencies: [{ kind: "directive", type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: DialogGuidesComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dialog-header\" id=\"dialog-gettingstartedguides\">\n   <h1 mat-dialog-title>How To Guides</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>We created a number of simple guides to familiarize you with the many features:</p>\n   <div class=\"guidelist\">\n      <div class=\"guide\" *ngFor=\"let guide of guides\">\n         <ng-container *ngIf=\"activeGuideKey == guide.key\">\n            <a [routerLink]=\"[]\" [id]=\"'guide-' + guide.key\" (click)=\"setActiveGuide(guide)\">{{guide.name}}<span class=\"badge dark\">resume</span></a>\n         </ng-container>\n         <ng-container *ngIf=\"activeGuideKey != guide.key\">\n            <a [routerLink]=\"[]\" [id]=\"'guide-' + guide.key\" (click)=\"setActiveGuide(guide)\">{{guide.name}}</a>\n         </ng-container>\n      </div>\n   </div>\n</mat-dialog-content>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}.mat-dialog-container{background:#00af77}.guidelist{margin-top:30px;margin-bottom:30px}.guidelist .guide{line-height:100%;font-size:19px;margin-bottom:15px;display:flex}.guidelist .guide .icon{vertical-align:middle}.guidelist .guide a{font-family:StevieSans,sans-serif;font-weight:600;text-decoration:none;color:#fff}.guidelist .guide a:hover{color:#fff73f}.guidelist .guide a .badge{margin-left:10px}\n"], dependencies: [{ kind: "directive", type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DialogGuidesComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div class=\"dialog-header\" id=\"dialog-gettingstartedguides\">\n   <h1 mat-dialog-title>How To Guides</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>We created a number of simple guides to familiarize you with the many features:</p>\n   <div class=\"guidelist\">\n      <div class=\"guide\" *ngFor=\"let guide of guides\">\n         <ng-container *ngIf=\"activeGuideKey == guide.key\">\n            <a [routerLink]=\"[]\" [id]=\"'guide-' + guide.key\" (click)=\"setActiveGuide(guide)\">{{guide.name}}<span class=\"badge dark\">resume</span></a>\n         </ng-container>\n         <ng-container *ngIf=\"activeGuideKey != guide.key\">\n            <a [routerLink]=\"[]\" [id]=\"'guide-' + guide.key\" (click)=\"setActiveGuide(guide)\">{{guide.name}}</a>\n         </ng-container>\n      </div>\n   </div>\n</mat-dialog-content>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.mat-dialog-container{background:#00af77}.guidelist{margin-top:30px;margin-bottom:30px}.guidelist .guide{line-height:100%;font-size:19px;margin-bottom:15px;display:flex}.guidelist .guide .icon{vertical-align:middle}.guidelist .guide a{font-family:StevieSans,sans-serif;font-weight:600;text-decoration:none;color:#fff}.guidelist .guide a:hover{color:#fff73f}.guidelist .guide a .badge{margin-left:10px}\n"] }]
+            args: [{ template: "<div class=\"dialog-header\" id=\"dialog-gettingstartedguides\">\n   <h1 mat-dialog-title>How To Guides</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>We created a number of simple guides to familiarize you with the many features:</p>\n   <div class=\"guidelist\">\n      <div class=\"guide\" *ngFor=\"let guide of guides\">\n         <ng-container *ngIf=\"activeGuideKey == guide.key\">\n            <a [routerLink]=\"[]\" [id]=\"'guide-' + guide.key\" (click)=\"setActiveGuide(guide)\">{{guide.name}}<span class=\"badge dark\">resume</span></a>\n         </ng-container>\n         <ng-container *ngIf=\"activeGuideKey != guide.key\">\n            <a [routerLink]=\"[]\" [id]=\"'guide-' + guide.key\" (click)=\"setActiveGuide(guide)\">{{guide.name}}</a>\n         </ng-container>\n      </div>\n   </div>\n</mat-dialog-content>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}.mat-dialog-container{background:#00af77}.guidelist{margin-top:30px;margin-bottom:30px}.guidelist .guide{line-height:100%;font-size:19px;margin-bottom:15px;display:flex}.guidelist .guide .icon{vertical-align:middle}.guidelist .guide a{font-family:StevieSans,sans-serif;font-weight:600;text-decoration:none;color:#fff}.guidelist .guide a:hover{color:#fff73f}.guidelist .guide a .badge{margin-left:10px}\n"] }]
         }], ctorParameters: () => [{ type: i6.ViewModelStateBase, decorators: [{
                     type: Inject,
                     args: [VIEWSTATE_PROVIDER]

package/esm2022/lib/results/components/age-indicator/age-indicator.component.mjs

@@ -26,11 +26,11 @@ export class AgeIndicatorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: AgeIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: AgeIndicatorComponent, selector: "age-indicator", inputs: { lastMeasured: "lastMeasured" }, ngImport: i0, template: "<div class=\"age-indicator\" [style.opacity]=\"lastMeasuredOpacity\" [matTooltip]=\"lastMeasuredTooltip\" *ngIf=\"lastMeasuredMonths > 0\">\n   <div class=\"age-indicator-dot\" *ngFor=\"let e of [].constructor(lastMeasuredMonths); let i = index\"></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%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: AgeIndicatorComponent, selector: "age-indicator", inputs: { lastMeasured: "lastMeasured" }, ngImport: i0, template: "<div class=\"age-indicator\" [style.opacity]=\"lastMeasuredOpacity\" [matTooltip]=\"lastMeasuredTooltip\" *ngIf=\"lastMeasuredMonths > 0\">\n   <div class=\"age-indicator-dot\" *ngFor=\"let e of [].constructor(lastMeasuredMonths); let i = index\"></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}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: AgeIndicatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'age-indicator', template: "<div class=\"age-indicator\" [style.opacity]=\"lastMeasuredOpacity\" [matTooltip]=\"lastMeasuredTooltip\" *ngIf=\"lastMeasuredMonths > 0\">\n   <div class=\"age-indicator-dot\" *ngFor=\"let e of [].constructor(lastMeasuredMonths); let i = index\"></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%}\n"] }]
+            args: [{ selector: 'age-indicator', template: "<div class=\"age-indicator\" [style.opacity]=\"lastMeasuredOpacity\" [matTooltip]=\"lastMeasuredTooltip\" *ngIf=\"lastMeasuredMonths > 0\">\n   <div class=\"age-indicator-dot\" *ngFor=\"let e of [].constructor(lastMeasuredMonths); let i = index\"></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}\n"] }]
         }], ctorParameters: () => [], propDecorators: { lastMeasured: [{
                 type: Input
             }] } });

package/esm2022/lib/results/components/arrow/arrow.component.mjs

@@ -189,11 +189,11 @@ export class ArrowComponent {
     ngOnDestroy() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: ArrowComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: ArrowComponent, selector: "arrow", inputs: { from: "from", to: "to", head: "head", tail: "tail", text: "text", toolTip: "toolTip", color: "color", width: "width", onlyVisible: "onlyVisible", fromX: "fromX", fromY: "fromY", toX: "toX", toY: "toY" }, ngImport: i0, template: "<ng-container *ngFor=\"let index of arrowIndices\">\n\n   <div class=\"line line-{{ index }}\" [ngStyle]=\"styleLine[index]\" [matTooltip]=\"toolTip\">\n\n      <div *ngIf=\"head == true\" class=\"arrow head {{ needSwap[index] ? 'arrow-bw' : 'arrow-fw' }}\"\n           [ngStyle]=\"needSwap[index] ? styleArrowBw[index] : styleArrowFw[index]\"></div>\n      <div *ngIf=\"tail == true\" class=\"arrow tail {{ needSwap[index] ? 'arrow-fw' : 'arrow-bw' }}\"\n           [ngStyle]=\"needSwap[index] ? styleArrowFw[index] : styleArrowBw[index]\"></div>\n      <div *ngIf=\"!!text && text.length > 0\" class=\"text\" >{{ text }}</div>\n\n   </div>\n\n</ng-container>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.line .arrow{top:-5px;height:0px;width:0px;position:absolute;border-bottom:6px solid transparent;border-top:6px solid transparent;background-clip:border-box}.line .arrow-fw{border-right:12px solid #bdbdbd}.line .arrow-bw{left:100%;border-left:12px solid #bdbdbd;transform:translate(-8px)}.line .text{position:absolute;top:100%;left:50%;transform:translate(-50%,-100%);font-size:20px;color:#bdbdbd;font-weight:600;padding-bottom:5px}.line{position:absolute;height:2px;background-color:#bdbdbd}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: ArrowComponent, selector: "arrow", inputs: { from: "from", to: "to", head: "head", tail: "tail", text: "text", toolTip: "toolTip", color: "color", width: "width", onlyVisible: "onlyVisible", fromX: "fromX", fromY: "fromY", toX: "toX", toY: "toY" }, ngImport: i0, template: "<ng-container *ngFor=\"let index of arrowIndices\">\n\n   <div class=\"line line-{{ index }}\" [ngStyle]=\"styleLine[index]\" [matTooltip]=\"toolTip\">\n\n      <div *ngIf=\"head == true\" class=\"arrow head {{ needSwap[index] ? 'arrow-bw' : 'arrow-fw' }}\"\n           [ngStyle]=\"needSwap[index] ? styleArrowBw[index] : styleArrowFw[index]\"></div>\n      <div *ngIf=\"tail == true\" class=\"arrow tail {{ needSwap[index] ? 'arrow-fw' : 'arrow-bw' }}\"\n           [ngStyle]=\"needSwap[index] ? styleArrowFw[index] : styleArrowBw[index]\"></div>\n      <div *ngIf=\"!!text && text.length > 0\" class=\"text\" >{{ text }}</div>\n\n   </div>\n\n</ng-container>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}.line .arrow{top:-5px;height:0px;width:0px;position:absolute;border-bottom:6px solid transparent;border-top:6px solid transparent;background-clip:border-box}.line .arrow-fw{border-right:12px solid #bdbdbd}.line .arrow-bw{left:100%;border-left:12px solid #bdbdbd;transform:translate(-8px)}.line .text{position:absolute;top:100%;left:50%;transform:translate(-50%,-100%);font-size:20px;color:#bdbdbd;font-weight:600;padding-bottom:5px}.line{position:absolute;height:2px;background-color:#bdbdbd}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: ArrowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'arrow', template: "<ng-container *ngFor=\"let index of arrowIndices\">\n\n   <div class=\"line line-{{ index }}\" [ngStyle]=\"styleLine[index]\" [matTooltip]=\"toolTip\">\n\n      <div *ngIf=\"head == true\" class=\"arrow head {{ needSwap[index] ? 'arrow-bw' : 'arrow-fw' }}\"\n           [ngStyle]=\"needSwap[index] ? styleArrowBw[index] : styleArrowFw[index]\"></div>\n      <div *ngIf=\"tail == true\" class=\"arrow tail {{ needSwap[index] ? 'arrow-fw' : 'arrow-bw' }}\"\n           [ngStyle]=\"needSwap[index] ? styleArrowFw[index] : styleArrowBw[index]\"></div>\n      <div *ngIf=\"!!text && text.length > 0\" class=\"text\" >{{ text }}</div>\n\n   </div>\n\n</ng-container>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.line .arrow{top:-5px;height:0px;width:0px;position:absolute;border-bottom:6px solid transparent;border-top:6px solid transparent;background-clip:border-box}.line .arrow-fw{border-right:12px solid #bdbdbd}.line .arrow-bw{left:100%;border-left:12px solid #bdbdbd;transform:translate(-8px)}.line .text{position:absolute;top:100%;left:50%;transform:translate(-50%,-100%);font-size:20px;color:#bdbdbd;font-weight:600;padding-bottom:5px}.line{position:absolute;height:2px;background-color:#bdbdbd}\n"] }]
+            args: [{ selector: 'arrow', template: "<ng-container *ngFor=\"let index of arrowIndices\">\n\n   <div class=\"line line-{{ index }}\" [ngStyle]=\"styleLine[index]\" [matTooltip]=\"toolTip\">\n\n      <div *ngIf=\"head == true\" class=\"arrow head {{ needSwap[index] ? 'arrow-bw' : 'arrow-fw' }}\"\n           [ngStyle]=\"needSwap[index] ? styleArrowBw[index] : styleArrowFw[index]\"></div>\n      <div *ngIf=\"tail == true\" class=\"arrow tail {{ needSwap[index] ? 'arrow-fw' : 'arrow-bw' }}\"\n           [ngStyle]=\"needSwap[index] ? styleArrowFw[index] : styleArrowBw[index]\"></div>\n      <div *ngIf=\"!!text && text.length > 0\" class=\"text\" >{{ text }}</div>\n\n   </div>\n\n</ng-container>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}.line .arrow{top:-5px;height:0px;width:0px;position:absolute;border-bottom:6px solid transparent;border-top:6px solid transparent;background-clip:border-box}.line .arrow-fw{border-right:12px solid #bdbdbd}.line .arrow-bw{left:100%;border-left:12px solid #bdbdbd;transform:translate(-8px)}.line .text{position:absolute;top:100%;left:50%;transform:translate(-50%,-100%);font-size:20px;color:#bdbdbd;font-weight:600;padding-bottom:5px}.line{position:absolute;height:2px;background-color:#bdbdbd}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { from: [{
                 type: Input
             }], to: [{

package/esm2022/lib/results/components/badge/badge.component.mjs

@@ -14,11 +14,11 @@ export class BadgeComponent {
         return this.badge.type == BadgeTypeEnum.progression;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: BadgeComponent, selector: "badge", inputs: { showName: "showName", badge: "badge", radius: "radius" }, ngImport: i0, template: "<ng-container *ngIf=\"isStreakBadge()\">\n   <badge-streak [badge]=\"badge\" [showName]=\"showName\" [radius]=\"radius\"></badge-streak>\n</ng-container>\n<ng-container *ngIf=\"isProgressionBadge()\">\n   <badge-progression [badge]=\"badge\" [showName]=\"showName\" [radius]=\"radius\"></badge-progression>\n</ng-container>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.BadgeStreakComponent, selector: "badge-streak", inputs: ["showName", "badge", "radius"] }, { kind: "component", type: i3.BadgeProgressionComponent, selector: "badge-progression", inputs: ["showName", "badge", "radius"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: BadgeComponent, selector: "badge", inputs: { showName: "showName", badge: "badge", radius: "radius" }, ngImport: i0, template: "<ng-container *ngIf=\"isStreakBadge()\">\n   <badge-streak [badge]=\"badge\" [showName]=\"showName\" [radius]=\"radius\"></badge-streak>\n</ng-container>\n<ng-container *ngIf=\"isProgressionBadge()\">\n   <badge-progression [badge]=\"badge\" [showName]=\"showName\" [radius]=\"radius\"></badge-progression>\n</ng-container>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.BadgeStreakComponent, selector: "badge-streak", inputs: ["showName", "badge", "radius"] }, { kind: "component", type: i3.BadgeProgressionComponent, selector: "badge-progression", inputs: ["showName", "badge", "radius"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'badge', template: "<ng-container *ngIf=\"isStreakBadge()\">\n   <badge-streak [badge]=\"badge\" [showName]=\"showName\" [radius]=\"radius\"></badge-streak>\n</ng-container>\n<ng-container *ngIf=\"isProgressionBadge()\">\n   <badge-progression [badge]=\"badge\" [showName]=\"showName\" [radius]=\"radius\"></badge-progression>\n</ng-container>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}\n"] }]
+            args: [{ selector: 'badge', template: "<ng-container *ngIf=\"isStreakBadge()\">\n   <badge-streak [badge]=\"badge\" [showName]=\"showName\" [radius]=\"radius\"></badge-streak>\n</ng-container>\n<ng-container *ngIf=\"isProgressionBadge()\">\n   <badge-progression [badge]=\"badge\" [showName]=\"showName\" [radius]=\"radius\"></badge-progression>\n</ng-container>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { showName: [{
                 type: Input
             }], badge: [{

package/esm2022/lib/results/components/badge-progression/badge-progression.component.mjs

@@ -10,11 +10,11 @@ export class BadgeProgressionComponent {
         return this.badge.type;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: BadgeProgressionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: BadgeProgressionComponent, selector: "badge-progression", inputs: { showName: "showName", badge: "badge", radius: "radius" }, ngImport: i0, template: "<div class=\"team-badge progression\" [ngClass]=\"{'unearned': !badge.awarded}\" #badgeContainer (click)=\"popover.open()\">\n   <div [class]=\"'circle level-' + badge.level\" [ngStyle]=\"{'width': radius + 'px', 'height': radius + 'px', 'border-radius': radius + 'px'}\">\n      <span [class]=\"'icon ' + badge.icon\"></span>\n      <mat-progress-spinner [diameter]=\"radius\" strokeWidth=\"6\" mode=\"determinate\" [value]=\"badge.nextLevelProgress * 100\"></mat-progress-spinner>\n      <div class=\"gloss\">\n         <div class=\"gloss1\"></div>\n         <div class=\"gloss2\"></div>\n      </div>\n   </div>\n   <div class=\"name\" *ngIf=\"showName\">{{badge.name}}</div>\n</div>\n\n<sat-popover #popover horizontalAlign=\"center\" [anchor]=\"badgeContainer\" verticalAlign=\"below\" [hasBackdrop]=\"true\" [autoFocus]=\"false\">\n   <div [class]=\"'popover level-' + badge.level\" [id]=\"'popover'\">\n      <div class=\"arrow\"></div>\n      <div class=\"popover-container\">\n         <span (click)=\"popover.close()\" class=\"close ph-x\"></span>\n         <h3 *ngIf=\"badge.level == 0\">{{badge.name}}</h3>\n         <h3 *ngIf=\"badge.level == 1\">{{badge.name}} <span>Bronze Level</span></h3>\n         <h3 *ngIf=\"badge.level == 2\">{{badge.name}} <span>Silver Level</span></h3>\n         <h3 *ngIf=\"badge.level == 3\">{{badge.name}} <span>Gold Level</span></h3>\n         <h3 *ngIf=\"badge.level == 4\">{{badge.name}} <span>Platinum Level</span></h3>\n         <h3 *ngIf=\"badge.level == 5\">{{badge.name}} <span>Diamond Level</span></h3>\n         <div class=\"description\">{{badge.description}}</div>\n\n         <h3>How to reach the next level</h3>\n         <div class=\"description\">{{badge.nextLevelRequirement}}</div>\n      </div>\n   </div>\n</sat-popover>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.popover{margin-left:15px}.popover.level-1 h3 span{color:#cb8e56}.popover.level-2 h3 span{color:#bdbcbc}.popover.level-3 h3 span{color:#eac338}.popover.level-4 h3 span{color:#afd3de}.popover.level-5 h3 span{color:#ef4f9f}.popover .arrow{width:15px;height:15px;background:#2f2f2f;transform:rotate(45deg);left:50%;position:absolute;top:-8px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i3.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: BadgeProgressionComponent, selector: "badge-progression", inputs: { showName: "showName", badge: "badge", radius: "radius" }, ngImport: i0, template: "<div class=\"team-badge progression\" [ngClass]=\"{'unearned': !badge.awarded}\" #badgeContainer (click)=\"popover.open()\">\n   <div [class]=\"'circle level-' + badge.level\" [ngStyle]=\"{'width': radius + 'px', 'height': radius + 'px', 'border-radius': radius + 'px'}\">\n      <span [class]=\"'icon ' + badge.icon\"></span>\n      <mat-progress-spinner [diameter]=\"radius\" strokeWidth=\"6\" mode=\"determinate\" [value]=\"badge.nextLevelProgress * 100\"></mat-progress-spinner>\n      <div class=\"gloss\">\n         <div class=\"gloss1\"></div>\n         <div class=\"gloss2\"></div>\n      </div>\n   </div>\n   <div class=\"name\" *ngIf=\"showName\">{{badge.name}}</div>\n</div>\n\n<sat-popover #popover horizontalAlign=\"center\" [anchor]=\"badgeContainer\" verticalAlign=\"below\" [hasBackdrop]=\"true\" [autoFocus]=\"false\">\n   <div [class]=\"'popover level-' + badge.level\" [id]=\"'popover'\">\n      <div class=\"arrow\"></div>\n      <div class=\"popover-container\">\n         <span (click)=\"popover.close()\" class=\"close ph-x\"></span>\n         <h3 *ngIf=\"badge.level == 0\">{{badge.name}}</h3>\n         <h3 *ngIf=\"badge.level == 1\">{{badge.name}} <span>Bronze Level</span></h3>\n         <h3 *ngIf=\"badge.level == 2\">{{badge.name}} <span>Silver Level</span></h3>\n         <h3 *ngIf=\"badge.level == 3\">{{badge.name}} <span>Gold Level</span></h3>\n         <h3 *ngIf=\"badge.level == 4\">{{badge.name}} <span>Platinum Level</span></h3>\n         <h3 *ngIf=\"badge.level == 5\">{{badge.name}} <span>Diamond Level</span></h3>\n         <div class=\"description\">{{badge.description}}</div>\n\n         <h3>How to reach the next level</h3>\n         <div class=\"description\">{{badge.nextLevelRequirement}}</div>\n      </div>\n   </div>\n</sat-popover>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}.popover{margin-left:15px}.popover.level-1 h3 span{color:#cb8e56}.popover.level-2 h3 span{color:#bdbcbc}.popover.level-3 h3 span{color:#eac338}.popover.level-4 h3 span{color:#afd3de}.popover.level-5 h3 span{color:#ef4f9f}.popover .arrow{width:15px;height:15px;background:#2f2f2f;transform:rotate(45deg);left:50%;position:absolute;top:-8px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i3.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: BadgeProgressionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'badge-progression', template: "<div class=\"team-badge progression\" [ngClass]=\"{'unearned': !badge.awarded}\" #badgeContainer (click)=\"popover.open()\">\n   <div [class]=\"'circle level-' + badge.level\" [ngStyle]=\"{'width': radius + 'px', 'height': radius + 'px', 'border-radius': radius + 'px'}\">\n      <span [class]=\"'icon ' + badge.icon\"></span>\n      <mat-progress-spinner [diameter]=\"radius\" strokeWidth=\"6\" mode=\"determinate\" [value]=\"badge.nextLevelProgress * 100\"></mat-progress-spinner>\n      <div class=\"gloss\">\n         <div class=\"gloss1\"></div>\n         <div class=\"gloss2\"></div>\n      </div>\n   </div>\n   <div class=\"name\" *ngIf=\"showName\">{{badge.name}}</div>\n</div>\n\n<sat-popover #popover horizontalAlign=\"center\" [anchor]=\"badgeContainer\" verticalAlign=\"below\" [hasBackdrop]=\"true\" [autoFocus]=\"false\">\n   <div [class]=\"'popover level-' + badge.level\" [id]=\"'popover'\">\n      <div class=\"arrow\"></div>\n      <div class=\"popover-container\">\n         <span (click)=\"popover.close()\" class=\"close ph-x\"></span>\n         <h3 *ngIf=\"badge.level == 0\">{{badge.name}}</h3>\n         <h3 *ngIf=\"badge.level == 1\">{{badge.name}} <span>Bronze Level</span></h3>\n         <h3 *ngIf=\"badge.level == 2\">{{badge.name}} <span>Silver Level</span></h3>\n         <h3 *ngIf=\"badge.level == 3\">{{badge.name}} <span>Gold Level</span></h3>\n         <h3 *ngIf=\"badge.level == 4\">{{badge.name}} <span>Platinum Level</span></h3>\n         <h3 *ngIf=\"badge.level == 5\">{{badge.name}} <span>Diamond Level</span></h3>\n         <div class=\"description\">{{badge.description}}</div>\n\n         <h3>How to reach the next level</h3>\n         <div class=\"description\">{{badge.nextLevelRequirement}}</div>\n      </div>\n   </div>\n</sat-popover>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.popover{margin-left:15px}.popover.level-1 h3 span{color:#cb8e56}.popover.level-2 h3 span{color:#bdbcbc}.popover.level-3 h3 span{color:#eac338}.popover.level-4 h3 span{color:#afd3de}.popover.level-5 h3 span{color:#ef4f9f}.popover .arrow{width:15px;height:15px;background:#2f2f2f;transform:rotate(45deg);left:50%;position:absolute;top:-8px}\n"] }]
+            args: [{ selector: 'badge-progression', template: "<div class=\"team-badge progression\" [ngClass]=\"{'unearned': !badge.awarded}\" #badgeContainer (click)=\"popover.open()\">\n   <div [class]=\"'circle level-' + badge.level\" [ngStyle]=\"{'width': radius + 'px', 'height': radius + 'px', 'border-radius': radius + 'px'}\">\n      <span [class]=\"'icon ' + badge.icon\"></span>\n      <mat-progress-spinner [diameter]=\"radius\" strokeWidth=\"6\" mode=\"determinate\" [value]=\"badge.nextLevelProgress * 100\"></mat-progress-spinner>\n      <div class=\"gloss\">\n         <div class=\"gloss1\"></div>\n         <div class=\"gloss2\"></div>\n      </div>\n   </div>\n   <div class=\"name\" *ngIf=\"showName\">{{badge.name}}</div>\n</div>\n\n<sat-popover #popover horizontalAlign=\"center\" [anchor]=\"badgeContainer\" verticalAlign=\"below\" [hasBackdrop]=\"true\" [autoFocus]=\"false\">\n   <div [class]=\"'popover level-' + badge.level\" [id]=\"'popover'\">\n      <div class=\"arrow\"></div>\n      <div class=\"popover-container\">\n         <span (click)=\"popover.close()\" class=\"close ph-x\"></span>\n         <h3 *ngIf=\"badge.level == 0\">{{badge.name}}</h3>\n         <h3 *ngIf=\"badge.level == 1\">{{badge.name}} <span>Bronze Level</span></h3>\n         <h3 *ngIf=\"badge.level == 2\">{{badge.name}} <span>Silver Level</span></h3>\n         <h3 *ngIf=\"badge.level == 3\">{{badge.name}} <span>Gold Level</span></h3>\n         <h3 *ngIf=\"badge.level == 4\">{{badge.name}} <span>Platinum Level</span></h3>\n         <h3 *ngIf=\"badge.level == 5\">{{badge.name}} <span>Diamond Level</span></h3>\n         <div class=\"description\">{{badge.description}}</div>\n\n         <h3>How to reach the next level</h3>\n         <div class=\"description\">{{badge.nextLevelRequirement}}</div>\n      </div>\n   </div>\n</sat-popover>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}.popover{margin-left:15px}.popover.level-1 h3 span{color:#cb8e56}.popover.level-2 h3 span{color:#bdbcbc}.popover.level-3 h3 span{color:#eac338}.popover.level-4 h3 span{color:#afd3de}.popover.level-5 h3 span{color:#ef4f9f}.popover .arrow{width:15px;height:15px;background:#2f2f2f;transform:rotate(45deg);left:50%;position:absolute;top:-8px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { showName: [{
                 type: Input
             }], badge: [{

package/esm2022/lib/results/components/badge-streak/badge-streak.component.mjs

@@ -14,11 +14,11 @@ export class BadgeStreakComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: BadgeStreakComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: BadgeStreakComponent, selector: "badge-streak", inputs: { showName: "showName", badge: "badge", radius: "radius" }, ngImport: i0, template: "<div [class]=\"'team-badge streak ' + getStreakBadgeType()\" [ngClass]=\"{'unearned': !badge.awarded }\" #badgeContainer (click)=\"popover.open()\">\n   <div class=\"circle\" [ngStyle]=\"{'width': radius + 'px', 'height': radius + 'px', 'border-radius': radius + 'px'}\">\n      <div class=\"crown\" *ngIf=\"badge.awarded && badge.level >= 3\"></div>\n      <span [class]=\"'icon ' + badge.icon\"></span>\n      <div class=\"level\" *ngIf=\"badge.awarded\">{{badge.level}}</div>\n   </div>\n   <div class=\"name\" *ngIf=\"showName\">{{badge.name}}</div>\n</div>\n\n<sat-popover #popover horizontalAlign=\"center\" [anchor]=\"badgeContainer\" verticalAlign=\"below\" [hasBackdrop]=\"true\" [autoFocus]=\"false\">\n   <div class=\"popover\" [id]=\"'popover'\">\n      <div class=\"arrow\"></div>\n      <div class=\"popover-container\">\n         <span (click)=\"popover.close()\" class=\"close ph-x\"></span>\n         <h3 *ngIf=\"badge.level == 0\">{{badge.name}}</h3>\n         <h3 *ngIf=\"badge.level > 0\">{{badge.name}} <span>Streak of {{badge.level}}</span></h3>\n         <div class=\"description\">{{badge.description}}</div>\n\n         <h3>How to reach the next level</h3>\n         <div class=\"description\">{{badge.nextLevelRequirement}}</div>\n      </div>\n   </div>\n</sat-popover>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.popover{margin-left:15px}.popover h3 span{color:#fff73f}.popover .arrow{width:15px;height:15px;background:#2f2f2f;transform:rotate(45deg);left:50%;position:absolute;top:-8px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: BadgeStreakComponent, selector: "badge-streak", inputs: { showName: "showName", badge: "badge", radius: "radius" }, ngImport: i0, template: "<div [class]=\"'team-badge streak ' + getStreakBadgeType()\" [ngClass]=\"{'unearned': !badge.awarded }\" #badgeContainer (click)=\"popover.open()\">\n   <div class=\"circle\" [ngStyle]=\"{'width': radius + 'px', 'height': radius + 'px', 'border-radius': radius + 'px'}\">\n      <div class=\"crown\" *ngIf=\"badge.awarded && badge.level >= 3\"></div>\n      <span [class]=\"'icon ' + badge.icon\"></span>\n      <div class=\"level\" *ngIf=\"badge.awarded\">{{badge.level}}</div>\n   </div>\n   <div class=\"name\" *ngIf=\"showName\">{{badge.name}}</div>\n</div>\n\n<sat-popover #popover horizontalAlign=\"center\" [anchor]=\"badgeContainer\" verticalAlign=\"below\" [hasBackdrop]=\"true\" [autoFocus]=\"false\">\n   <div class=\"popover\" [id]=\"'popover'\">\n      <div class=\"arrow\"></div>\n      <div class=\"popover-container\">\n         <span (click)=\"popover.close()\" class=\"close ph-x\"></span>\n         <h3 *ngIf=\"badge.level == 0\">{{badge.name}}</h3>\n         <h3 *ngIf=\"badge.level > 0\">{{badge.name}} <span>Streak of {{badge.level}}</span></h3>\n         <div class=\"description\">{{badge.description}}</div>\n\n         <h3>How to reach the next level</h3>\n         <div class=\"description\">{{badge.nextLevelRequirement}}</div>\n      </div>\n   </div>\n</sat-popover>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}.popover{margin-left:15px}.popover h3 span{color:#fff73f}.popover .arrow{width:15px;height:15px;background:#2f2f2f;transform:rotate(45deg);left:50%;position:absolute;top:-8px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: BadgeStreakComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'badge-streak', template: "<div [class]=\"'team-badge streak ' + getStreakBadgeType()\" [ngClass]=\"{'unearned': !badge.awarded }\" #badgeContainer (click)=\"popover.open()\">\n   <div class=\"circle\" [ngStyle]=\"{'width': radius + 'px', 'height': radius + 'px', 'border-radius': radius + 'px'}\">\n      <div class=\"crown\" *ngIf=\"badge.awarded && badge.level >= 3\"></div>\n      <span [class]=\"'icon ' + badge.icon\"></span>\n      <div class=\"level\" *ngIf=\"badge.awarded\">{{badge.level}}</div>\n   </div>\n   <div class=\"name\" *ngIf=\"showName\">{{badge.name}}</div>\n</div>\n\n<sat-popover #popover horizontalAlign=\"center\" [anchor]=\"badgeContainer\" verticalAlign=\"below\" [hasBackdrop]=\"true\" [autoFocus]=\"false\">\n   <div class=\"popover\" [id]=\"'popover'\">\n      <div class=\"arrow\"></div>\n      <div class=\"popover-container\">\n         <span (click)=\"popover.close()\" class=\"close ph-x\"></span>\n         <h3 *ngIf=\"badge.level == 0\">{{badge.name}}</h3>\n         <h3 *ngIf=\"badge.level > 0\">{{badge.name}} <span>Streak of {{badge.level}}</span></h3>\n         <div class=\"description\">{{badge.description}}</div>\n\n         <h3>How to reach the next level</h3>\n         <div class=\"description\">{{badge.nextLevelRequirement}}</div>\n      </div>\n   </div>\n</sat-popover>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.popover{margin-left:15px}.popover h3 span{color:#fff73f}.popover .arrow{width:15px;height:15px;background:#2f2f2f;transform:rotate(45deg);left:50%;position:absolute;top:-8px}\n"] }]
+            args: [{ selector: 'badge-streak', template: "<div [class]=\"'team-badge streak ' + getStreakBadgeType()\" [ngClass]=\"{'unearned': !badge.awarded }\" #badgeContainer (click)=\"popover.open()\">\n   <div class=\"circle\" [ngStyle]=\"{'width': radius + 'px', 'height': radius + 'px', 'border-radius': radius + 'px'}\">\n      <div class=\"crown\" *ngIf=\"badge.awarded && badge.level >= 3\"></div>\n      <span [class]=\"'icon ' + badge.icon\"></span>\n      <div class=\"level\" *ngIf=\"badge.awarded\">{{badge.level}}</div>\n   </div>\n   <div class=\"name\" *ngIf=\"showName\">{{badge.name}}</div>\n</div>\n\n<sat-popover #popover horizontalAlign=\"center\" [anchor]=\"badgeContainer\" verticalAlign=\"below\" [hasBackdrop]=\"true\" [autoFocus]=\"false\">\n   <div class=\"popover\" [id]=\"'popover'\">\n      <div class=\"arrow\"></div>\n      <div class=\"popover-container\">\n         <span (click)=\"popover.close()\" class=\"close ph-x\"></span>\n         <h3 *ngIf=\"badge.level == 0\">{{badge.name}}</h3>\n         <h3 *ngIf=\"badge.level > 0\">{{badge.name}} <span>Streak of {{badge.level}}</span></h3>\n         <div class=\"description\">{{badge.description}}</div>\n\n         <h3>How to reach the next level</h3>\n         <div class=\"description\">{{badge.nextLevelRequirement}}</div>\n      </div>\n   </div>\n</sat-popover>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}.popover{margin-left:15px}.popover h3 span{color:#fff73f}.popover .arrow{width:15px;height:15px;background:#2f2f2f;transform:rotate(45deg);left:50%;position:absolute;top:-8px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { showName: [{
                 type: Input
             }], badge: [{

package/esm2022/lib/results/components/badges/badges.component.mjs

@@ -28,11 +28,11 @@ export class BadgesComponent extends ComponentWithViewStateBase {
     }
     ;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: BadgesComponent, deps: [{ token: VIEWSTATE_PROVIDER }, { token: i1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: BadgesComponent, selector: "badges", usesInheritance: true, ngImport: i0, template: "<div class=\"box\" *ngIf=\"loaded\">\n   <ng-container *ngIf=\"earnedStreakBadges.length > 0\">\n      <h4>Team streaks</h4>\n      <div class=\"earned team-badges\">\n         <badge-streak *ngFor=\"let badge of earnedStreakBadges\" [badge]=\"badge\" [showName]=\"true\" [radius]=\"65\"></badge-streak>\n      </div>\n   </ng-container>\n\n   <ng-container *ngIf=\"earnedProgressionBadges.length > 0\">\n      <h4>Team badges</h4>\n      <div class=\"earned team-badges\">\n         <badge *ngFor=\"let badge of earnedProgressionBadges\" [badge]=\"badge\" [showName]=\"true\" [radius]=\"75\"></badge>\n      </div>\n   </ng-container>\n\n   <h4>Not yet earned</h4>\n   <div class=\"notearned team-badges\" [ngClass]=\"{'fadeout': showNotearned}\" (mouseover)=\"showNotearned = false\">\n      <badge *ngFor=\"let badge of unearnedProgressionBadges\" [badge]=\"badge\" [showName]=\"true\" [radius]=\"65\"></badge>\n      <badge *ngFor=\"let badge of unearnedStreakBadges\" [badge]=\"badge\" [showName]=\"true\" [radius]=\"65\"></badge>\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%}.box{background:#f0f0f0}.box h4{text-align:center}.box .team-badges.earned,.box .team-badges.notearned{display:grid;grid-template-columns:repeat(2,1fr);row-gap:30px}@media only screen and (min-width: 1536px){.box .team-badges.earned,.box .team-badges.notearned{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width: 2000px){.box .team-badges.earned,.box .team-badges.notearned{grid-template-columns:repeat(4,1fr)}}.box .team-badges.notearned{overflow:hidden;position:relative;padding-top:10px}.box .team-badges.notearned.fadeout{position:relative;max-height:150px}.box .team-badges.notearned.fadeout:after{content:\"\";position:absolute;inset:0;background-image:linear-gradient(#f0f0f000 5%,#f0f0f0)}\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: i3.BadgeComponent, selector: "badge", inputs: ["showName", "badge", "radius"] }, { kind: "component", type: i4.BadgeStreakComponent, selector: "badge-streak", inputs: ["showName", "badge", "radius"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: BadgesComponent, selector: "badges", usesInheritance: true, ngImport: i0, template: "<div class=\"box\" *ngIf=\"loaded\">\n   <ng-container *ngIf=\"earnedStreakBadges.length > 0\">\n      <h4>Team streaks</h4>\n      <div class=\"earned team-badges\">\n         <badge-streak *ngFor=\"let badge of earnedStreakBadges\" [badge]=\"badge\" [showName]=\"true\" [radius]=\"65\"></badge-streak>\n      </div>\n   </ng-container>\n\n   <ng-container *ngIf=\"earnedProgressionBadges.length > 0\">\n      <h4>Team badges</h4>\n      <div class=\"earned team-badges\">\n         <badge *ngFor=\"let badge of earnedProgressionBadges\" [badge]=\"badge\" [showName]=\"true\" [radius]=\"75\"></badge>\n      </div>\n   </ng-container>\n\n   <h4>Not yet earned</h4>\n   <div class=\"notearned team-badges\" [ngClass]=\"{'fadeout': showNotearned}\" (mouseover)=\"showNotearned = false\">\n      <badge *ngFor=\"let badge of unearnedProgressionBadges\" [badge]=\"badge\" [showName]=\"true\" [radius]=\"65\"></badge>\n      <badge *ngFor=\"let badge of unearnedStreakBadges\" [badge]=\"badge\" [showName]=\"true\" [radius]=\"65\"></badge>\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}.box{background:#f0f0f0}.box h4{text-align:center}.box .team-badges.earned,.box .team-badges.notearned{display:grid;grid-template-columns:repeat(2,1fr);row-gap:30px}@media only screen and (min-width: 1536px){.box .team-badges.earned,.box .team-badges.notearned{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width: 2000px){.box .team-badges.earned,.box .team-badges.notearned{grid-template-columns:repeat(4,1fr)}}.box .team-badges.notearned{overflow:hidden;position:relative;padding-top:10px}.box .team-badges.notearned.fadeout{position:relative;max-height:150px}.box .team-badges.notearned.fadeout:after{content:\"\";position:absolute;inset:0;background-image:linear-gradient(#f0f0f000 5%,#f0f0f0)}\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: i3.BadgeComponent, selector: "badge", inputs: ["showName", "badge", "radius"] }, { kind: "component", type: i4.BadgeStreakComponent, selector: "badge-streak", inputs: ["showName", "badge", "radius"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: BadgesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'badges', template: "<div class=\"box\" *ngIf=\"loaded\">\n   <ng-container *ngIf=\"earnedStreakBadges.length > 0\">\n      <h4>Team streaks</h4>\n      <div class=\"earned team-badges\">\n         <badge-streak *ngFor=\"let badge of earnedStreakBadges\" [badge]=\"badge\" [showName]=\"true\" [radius]=\"65\"></badge-streak>\n      </div>\n   </ng-container>\n\n   <ng-container *ngIf=\"earnedProgressionBadges.length > 0\">\n      <h4>Team badges</h4>\n      <div class=\"earned team-badges\">\n         <badge *ngFor=\"let badge of earnedProgressionBadges\" [badge]=\"badge\" [showName]=\"true\" [radius]=\"75\"></badge>\n      </div>\n   </ng-container>\n\n   <h4>Not yet earned</h4>\n   <div class=\"notearned team-badges\" [ngClass]=\"{'fadeout': showNotearned}\" (mouseover)=\"showNotearned = false\">\n      <badge *ngFor=\"let badge of unearnedProgressionBadges\" [badge]=\"badge\" [showName]=\"true\" [radius]=\"65\"></badge>\n      <badge *ngFor=\"let badge of unearnedStreakBadges\" [badge]=\"badge\" [showName]=\"true\" [radius]=\"65\"></badge>\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%}.box{background:#f0f0f0}.box h4{text-align:center}.box .team-badges.earned,.box .team-badges.notearned{display:grid;grid-template-columns:repeat(2,1fr);row-gap:30px}@media only screen and (min-width: 1536px){.box .team-badges.earned,.box .team-badges.notearned{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width: 2000px){.box .team-badges.earned,.box .team-badges.notearned{grid-template-columns:repeat(4,1fr)}}.box .team-badges.notearned{overflow:hidden;position:relative;padding-top:10px}.box .team-badges.notearned.fadeout{position:relative;max-height:150px}.box .team-badges.notearned.fadeout:after{content:\"\";position:absolute;inset:0;background-image:linear-gradient(#f0f0f000 5%,#f0f0f0)}\n"] }]
+            args: [{ selector: 'badges', template: "<div class=\"box\" *ngIf=\"loaded\">\n   <ng-container *ngIf=\"earnedStreakBadges.length > 0\">\n      <h4>Team streaks</h4>\n      <div class=\"earned team-badges\">\n         <badge-streak *ngFor=\"let badge of earnedStreakBadges\" [badge]=\"badge\" [showName]=\"true\" [radius]=\"65\"></badge-streak>\n      </div>\n   </ng-container>\n\n   <ng-container *ngIf=\"earnedProgressionBadges.length > 0\">\n      <h4>Team badges</h4>\n      <div class=\"earned team-badges\">\n         <badge *ngFor=\"let badge of earnedProgressionBadges\" [badge]=\"badge\" [showName]=\"true\" [radius]=\"75\"></badge>\n      </div>\n   </ng-container>\n\n   <h4>Not yet earned</h4>\n   <div class=\"notearned team-badges\" [ngClass]=\"{'fadeout': showNotearned}\" (mouseover)=\"showNotearned = false\">\n      <badge *ngFor=\"let badge of unearnedProgressionBadges\" [badge]=\"badge\" [showName]=\"true\" [radius]=\"65\"></badge>\n      <badge *ngFor=\"let badge of unearnedStreakBadges\" [badge]=\"badge\" [showName]=\"true\" [radius]=\"65\"></badge>\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}.box{background:#f0f0f0}.box h4{text-align:center}.box .team-badges.earned,.box .team-badges.notearned{display:grid;grid-template-columns:repeat(2,1fr);row-gap:30px}@media only screen and (min-width: 1536px){.box .team-badges.earned,.box .team-badges.notearned{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width: 2000px){.box .team-badges.earned,.box .team-badges.notearned{grid-template-columns:repeat(4,1fr)}}.box .team-badges.notearned{overflow:hidden;position:relative;padding-top:10px}.box .team-badges.notearned.fadeout{position:relative;max-height:150px}.box .team-badges.notearned.fadeout:after{content:\"\";position:absolute;inset:0;background-image:linear-gradient(#f0f0f000 5%,#f0f0f0)}\n"] }]
         }], ctorParameters: () => [{ type: i5.ViewModelStateBase, decorators: [{
                     type: Inject,
                     args: [VIEWSTATE_PROVIDER]

package/esm2022/lib/results/components/benchmark-indicator/benchmark-indicator.component.mjs

@@ -10,11 +10,11 @@ export class BenchmarkIndicatorComponent {
         this.delta = this.factorScore.score - this.factorScore.benchmark;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: BenchmarkIndicatorComponent, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: BenchmarkIndicatorComponent, selector: "benchmark-indicator", inputs: { factorScore: "factorScore" }, ngImport: i0, template: "<span [class]=\"'delta up'\" *ngIf=\"delta > 0\" [matTooltip]=\"'Your team(s) score higher than the benchmark, by ' + delta + ' points'\"><i [class]=\"'icon ph-arrow-up-fill'\"></i>{{delta}}</span>\n<span [class]=\"'delta down'\" *ngIf=\"delta < 0\" [matTooltip]=\"'Your team(s) score lower than the benchmark, by -' + delta * -1 + ' points'\"><i [class]=\"'icon ph-arrow-down-fill'\"></i>{{delta * -1}}</span>\n<span [class]=\"'delta same'\" *ngIf=\"delta == 0\" [matTooltip]=\"'Your team(s) score similar to the benchmark'\"><i [class]=\"'icon ph-equals-fill'\"></i>{{delta}}</span>\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%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: BenchmarkIndicatorComponent, selector: "benchmark-indicator", inputs: { factorScore: "factorScore" }, ngImport: i0, template: "<span [class]=\"'delta up'\" *ngIf=\"delta > 0\" [matTooltip]=\"'Your team(s) score higher than the benchmark, by ' + delta + ' points'\"><i [class]=\"'icon ph-arrow-up-fill'\"></i>{{delta}}</span>\n<span [class]=\"'delta down'\" *ngIf=\"delta < 0\" [matTooltip]=\"'Your team(s) score lower than the benchmark, by -' + delta * -1 + ' points'\"><i [class]=\"'icon ph-arrow-down-fill'\"></i>{{delta * -1}}</span>\n<span [class]=\"'delta same'\" *ngIf=\"delta == 0\" [matTooltip]=\"'Your team(s) score similar to the benchmark'\"><i [class]=\"'icon ph-equals-fill'\"></i>{{delta}}</span>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: BenchmarkIndicatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'benchmark-indicator', template: "<span [class]=\"'delta up'\" *ngIf=\"delta > 0\" [matTooltip]=\"'Your team(s) score higher than the benchmark, by ' + delta + ' points'\"><i [class]=\"'icon ph-arrow-up-fill'\"></i>{{delta}}</span>\n<span [class]=\"'delta down'\" *ngIf=\"delta < 0\" [matTooltip]=\"'Your team(s) score lower than the benchmark, by -' + delta * -1 + ' points'\"><i [class]=\"'icon ph-arrow-down-fill'\"></i>{{delta * -1}}</span>\n<span [class]=\"'delta same'\" *ngIf=\"delta == 0\" [matTooltip]=\"'Your team(s) score similar to the benchmark'\"><i [class]=\"'icon ph-equals-fill'\"></i>{{delta}}</span>\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%}\n"] }]
+            args: [{ selector: 'benchmark-indicator', template: "<span [class]=\"'delta up'\" *ngIf=\"delta > 0\" [matTooltip]=\"'Your team(s) score higher than the benchmark, by ' + delta + ' points'\"><i [class]=\"'icon ph-arrow-up-fill'\"></i>{{delta}}</span>\n<span [class]=\"'delta down'\" *ngIf=\"delta < 0\" [matTooltip]=\"'Your team(s) score lower than the benchmark, by -' + delta * -1 + ' points'\"><i [class]=\"'icon ph-arrow-down-fill'\"></i>{{delta * -1}}</span>\n<span [class]=\"'delta same'\" *ngIf=\"delta == 0\" [matTooltip]=\"'Your team(s) score similar to the benchmark'\"><i [class]=\"'icon ph-equals-fill'\"></i>{{delta}}</span>\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: i1.DatePipe }], propDecorators: { factorScore: [{
                 type: Input
             }] } });

package/esm2022/lib/results/components/coachingcenter-teaser/coachingcenter-teaser.component.mjs

@@ -17,11 +17,11 @@ export class CoachingCenterTeaserComponent extends ComponentWithViewStateBase {
     }
     ;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: CoachingCenterTeaserComponent, deps: [{ token: VIEWSTATE_PROVIDER }, { token: i1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: CoachingCenterTeaserComponent, selector: "coachingcenter-teaser", usesInheritance: true, ngImport: i0, template: "<div class=\"box doityourself\" brandbackground [palette]=\"'neutral'\">\n   <img class=\"responsive\" src=\"assets/img/coachingcenter-teaser.jpg\" />\n   <h3>Up your coaching offerings</h3>\n   <p>Learn where the teams of your clients or organizational units need your help the most. Our Coaching Center is tailored to coaching agencies and internal coaching groups. Discover opportunities, try our ready-made workshops and customize branding.</p>\n\n   <div class=\"link\">\n      <a href=\"https://youtu.be/VDvh774FmhM\" target=\"_blank\">Watch a Quick Tour ></a>\n   </div>\n   <div class=\"link\">\n      <a [href]=\"subscribeUrl\" target=\"_blank\">Discover our 'Enterprise'-plan ></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%}.box{background:#fff73f}.box h3{margin-bottom:15px}.box img{border:3px solid #2f2f2f}\n"], dependencies: [{ kind: "directive", type: i2.BrandBackgroundDirective, selector: "[brandbackground]", inputs: ["palette"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: CoachingCenterTeaserComponent, selector: "coachingcenter-teaser", usesInheritance: true, ngImport: i0, template: "<div class=\"box doityourself\" brandbackground [palette]=\"'neutral'\">\n   <img class=\"responsive\" src=\"assets/img/coachingcenter-teaser.jpg\" />\n   <h3>Up your coaching offerings</h3>\n   <p>Learn where the teams of your clients or organizational units need your help the most. Our Coaching Center is tailored to coaching agencies and internal coaching groups. Discover opportunities, try our ready-made workshops and customize branding.</p>\n\n   <div class=\"link\">\n      <a href=\"https://youtu.be/VDvh774FmhM\" target=\"_blank\">Watch a Quick Tour ></a>\n   </div>\n   <div class=\"link\">\n      <a [href]=\"subscribeUrl\" target=\"_blank\">Discover our 'Enterprise'-plan ></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}.box img{border:3px solid #2f2f2f}\n"], dependencies: [{ kind: "directive", type: i2.BrandBackgroundDirective, selector: "[brandbackground]", inputs: ["palette"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: CoachingCenterTeaserComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'coachingcenter-teaser', template: "<div class=\"box doityourself\" brandbackground [palette]=\"'neutral'\">\n   <img class=\"responsive\" src=\"assets/img/coachingcenter-teaser.jpg\" />\n   <h3>Up your coaching offerings</h3>\n   <p>Learn where the teams of your clients or organizational units need your help the most. Our Coaching Center is tailored to coaching agencies and internal coaching groups. Discover opportunities, try our ready-made workshops and customize branding.</p>\n\n   <div class=\"link\">\n      <a href=\"https://youtu.be/VDvh774FmhM\" target=\"_blank\">Watch a Quick Tour ></a>\n   </div>\n   <div class=\"link\">\n      <a [href]=\"subscribeUrl\" target=\"_blank\">Discover our 'Enterprise'-plan ></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%}.box{background:#fff73f}.box h3{margin-bottom:15px}.box img{border:3px solid #2f2f2f}\n"] }]
+            args: [{ selector: 'coachingcenter-teaser', template: "<div class=\"box doityourself\" brandbackground [palette]=\"'neutral'\">\n   <img class=\"responsive\" src=\"assets/img/coachingcenter-teaser.jpg\" />\n   <h3>Up your coaching offerings</h3>\n   <p>Learn where the teams of your clients or organizational units need your help the most. Our Coaching Center is tailored to coaching agencies and internal coaching groups. Discover opportunities, try our ready-made workshops and customize branding.</p>\n\n   <div class=\"link\">\n      <a href=\"https://youtu.be/VDvh774FmhM\" target=\"_blank\">Watch a Quick Tour ></a>\n   </div>\n   <div class=\"link\">\n      <a [href]=\"subscribeUrl\" target=\"_blank\">Discover our 'Enterprise'-plan ></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}.box img{border:3px solid #2f2f2f}\n"] }]
         }], ctorParameters: () => [{ type: i3.ViewModelStateBase, decorators: [{
                     type: Inject,
                     args: [VIEWSTATE_PROVIDER]