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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5063,11 +5063,11 @@ class ModelCanvasComponent extends ComponentWithViewStateBase {
5063
5063
  this.userSettingService.set(this.userSettings.settings);
5064
5064
  }
5065
5065
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModelCanvasComponent, deps: [{ token: VIEWSTATE_PROVIDER }, { token: VIEWSTATE_USERSETTINGS_STRATEGY }, { token: UserSettingService }, { token: i1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
5066
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: ModelCanvasComponent, isStandalone: false, selector: "model-canvas", host: { listeners: { "window:resize": "determineScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!showModel\" class=\"message message-warning\">\n <div><span class=\"icon ph-info-fill\"></span> We've hidden the model visualization because your resolution is too low. Please try a larger device, like a tablet, laptop or desktop.</div>\n</div>\n\n<div class=\"wirebox model\" *ngIf=\"factors && showModel\">\n <div class=\"top\">\n <div class=\"toolbar\">\n <div class=\"toolbar-settings\">\n <div class=\"toolbar-setting\">\n <div class=\"toolbar-setting-title\">Selected Benchmark</div>\n <div class=\"toolbar-setting-label\">{{benchmark}}</div>\n </div>\n <div class=\"toolbar-setting\">\n <div class=\"toolbar-setting-title\">compare results to</div>\n <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.none\">No comparison</div>\n <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.delta && deltaType == 'PreviousSnapshot'\">Previous snapshot from {{deltaDateRange | dateRange}}</div>\n <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.delta && deltaType != 'PreviousSnapshot'\">Current period <span class=\"icon ph-info-fill\" [title]=\"'Current period ranges from ' + (dateRange | dateRange) + '. This includes weighed measurements from ' + pointCount + ' ' + pointType + ': ' + pointNames\"></span> with previous period <span class=\"icon ph-info-fill\" [title]=\"'Previous period ranges from ' + (deltaDateRange | dateRange) + '. This includes weighed measurements from ' + deltaTeams + ' ' + pointType + ': ' + deltaTeamNames\"></span></div>\n <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.benchmark\">Against benchmark</div>\n </div>\n <div class=\"toolbar-setting\" *ngIf=\"qualifiedBy != QualifiedByEnum.none\">\n <div class=\"toolbar-setting-title\">comparison legend</div>\n <div class=\"toolbar-setting-markers negative\">\n <ng-container *ngIf=\"qualifiedBy == 'Benchmark'\">\n <div class=\"toolbar-setting-marker negative\">\n <span class=\"marker\"></span>\n <span class=\"label\">lower</span>\n </div>\n <div class=\"toolbar-setting-marker positive\">\n <span class=\"marker\"></span>\n <span class=\"label\">higher</span>\n </div>\n </ng-container>\n <ng-container *ngIf=\"qualifiedBy == 'Delta'\">\n <div class=\"toolbar-setting-marker negative\">\n <span class=\"marker\"></span>\n <span class=\"label\">decreased</span>\n </div>\n <div class=\"toolbar-setting-marker positive\">\n <span class=\"marker\"></span>\n <span class=\"label\">improved</span>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"buttons\">\n <div class=\"button\" id=\"change-settings\" settingsDialog><span class=\"ph-faders icon\"></span> Settings</div>\n <div class=\"button\" id=\"export-factorscores\" exportFactorScoresDialog *ngIf=\"isLoggedIn\"><span class=\"ph-download-simple icon\"></span> Export</div>\n </div>\n </div>\n </div>\n <div class=\"content\">\n <div class=\"model-visualization\">\n <div class=\"model-clarification\">\n <span class=\"icon ph-info-fill\"></span>\n <span class=\"message-text\">This model shows how factors are connected based on scientific research. Click <span class=\"icon ph-plus-circle-bold plus\"></span> to expand or close lower-order factors. Click factors for more detail.</span>\n </div>\n\n <div *ngIf=\"!showModel || !showIndicatorArrows\" class=\"model-smallscreen\">\n <span class=\"icon ph-frame-corners-bold\"></span>\n <span class=\"message-text\">View on a larger device to see more details.</span>\n </div>\n\n <div class=\"model-viewconfiguration\">\n <div class=\"model-viewmode\">\n <div class=\"model-viewmode-label\">View</div>\n <div class=\"model-viewmode-option\" (click)=\"toggleView(false)\" [ngClass]=\"{'selected': !userSettings.settings.user.modelFilter.advanced}\">\n <span class=\"icon ph-check-fill\" *ngIf=\"!userSettings.settings.user.modelFilter.advanced\"></span>Simple\n </div>\n <div class=\"model-viewmode-option selected\" (click)=\"toggleView(true)\" [ngClass]=\"{'selected': userSettings.settings.user.modelFilter.advanced}\">\n <span class=\"icon ph-check-fill\" *ngIf=\"userSettings.settings.user.modelFilter.advanced\"></span>Advanced\n </div>\n </div>\n\n <div class=\"model-viewmode model-layers\">\n <div class=\"model-viewmode-label\">Source</div>\n <div class=\"model-viewmode-option\" *ngFor=\"let layer of userSettings.settings.user.modelFilter.layers\" (click)=\"toggleLayer(layer)\" [ngClass]=\"{'selected': layer.selected}\">\n <span class=\"icon ph-check-fill\" *ngIf=\"layer.selected\"></span>{{layer.label}}\n </div>\n </div>\n\n <div class=\"model-warnings\" *ngIf=\"globalNotes.length > 0\" notesDialog [notes]=\"globalNotes\">\n <span class=\"ph-warning-fill icon\"></span>\n <span *ngIf=\"globalNotes.length == 1\">{{globalNotes.length}} warning</span>\n <span *ngIf=\"globalNotes.length > 1\">{{globalNotes.length}} warnings</span>\n </div>\n </div>\n\n <div class=\"model-frame\" [class]=\"'model-visualization-' + modelDefinition.publicKey\">\n <ng-container *ngFor=\"let factor of factors\">\n <model-factor-core [factor]=\"factor\" [expandPosition]=\"factor.indicatorPosition\" [allowExpand]=\"showIndicatorArrows\"></model-factor-core>\n </ng-container>\n </div>\n\n <ng-container *ngFor=\"let factor of factors\">\n <arrow [from]=\"'#factor-' + factor.publicKey\" [to]=\"'#factor-' + effect.to\" [onlyVisible]=\"true\" [tail]=\"true\" [head]=\"false\" [width]=\"2\" *ngFor=\"let effect of factor.effects\"></arrow>\n <ng-container *ngIf=\"showIndicatorArrows\">\n <ng-container *ngFor=\"let lowerFactor of factor.lower\">\n <arrow [from]=\"'#factor-' + lowerFactor.publicKey + '-anchor'\" [to]=\"'#factor-' + lowerEffect.to + '-expand'\" [onlyVisible]=\"true\" [tail]=\"false\" [head]=\"false\" [width]=\"1\" *ngFor=\"let lowerEffect of lowerFactor.effects\"></arrow>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <div class=\"model-attribution\">\n <span class=\"icon ph-info-fill\"></span>\n <span>\n <span [innerHtml]=\"modelDefinition.attribution\"></span>\n <span>&nbsp;See our <a href=\"https://github.com/theliberators/scrumteamsurvey.docs/wiki\" target=\"_blank\">wiki</a> for details and a FAQ.</span>\n </span>\n </div>\n </div>\n </div>\n\n <div class=\"bottom\" *ngIf=\"metrics.length > 0\">\n <h3>Process metrics <span class=\"badge badge-beta\">alpha</span></h3>\n <div class=\"message message-information\"><span class=\"icon ph-info-fill\"></span><span>We are experimenting with process metrics from external services. Please share feedback or issues with us.</span></div>\n <div class=\"model-factor-metrics\">\n <model-factor-metric [metric]=\"metric\" *ngFor=\"let metric of metrics\"></model-factor-metric>\n </div>\n </div>\n</div>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}.content{border-bottom:3px solid #f0f0f0}@media only screen and (max-width: 1536px){.toolbar-settings{display:flex}}@media only screen and (max-width: 992px){.toolbar-settings{display:block}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ArrowComponent, selector: "arrow", inputs: ["from", "to", "head", "tail", "text", "toolTip", "color", "width", "onlyVisible", "fromX", "fromY", "toX", "toY"] }, { kind: "directive", type: OpenSettingsDialogDirective, selector: "[settingsDialog]", inputs: ["showSettingStacking"] }, { kind: "directive", type: OpenExportFactorScoresDialogDirective, selector: "[exportFactorScoresDialog]" }, { kind: "directive", type: OpenNotesDialogDirective, selector: "[notesDialog]", inputs: ["notes"] }, { kind: "component", type: ModelFactorMetricComponent, selector: "model-factor-metric", inputs: ["metric"] }, { kind: "component", type: ModelFactorCoreComponent, selector: "model-factor-core", inputs: ["factor", "allowExpand", "expandPosition"] }, { kind: "pipe", type: DateRangePipe, name: "dateRange" }] }); }
5066
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: ModelCanvasComponent, isStandalone: false, selector: "model-canvas", host: { listeners: { "window:resize": "determineScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!showModel\" class=\"message message-warning\">\n <div><span class=\"icon ph-info-fill\"></span> We've hidden the model visualization because your resolution is too low. Please try a larger device, like a tablet, laptop or desktop.</div>\n</div>\n\n<div class=\"wirebox model\" *ngIf=\"factors && showModel\">\n <div class=\"top\">\n <div class=\"toolbar\">\n <div class=\"toolbar-settings\">\n <div class=\"toolbar-setting\">\n <div class=\"toolbar-setting-title\">Selected Benchmark</div>\n <div class=\"toolbar-setting-label\">{{benchmark}}</div>\n </div>\n <div class=\"toolbar-setting\">\n <div class=\"toolbar-setting-title\">compare results to</div>\n <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.none\">No comparison</div>\n <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.delta && deltaType == 'PreviousSnapshot'\">Previous snapshot from {{deltaDateRange | dateRange}}</div>\n <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.delta && deltaType != 'PreviousSnapshot'\">Current period <span class=\"icon ph-info-fill\" [title]=\"'Current period ranges from ' + (dateRange | dateRange) + '. This includes weighed measurements from ' + pointCount + ' ' + pointType + ': ' + pointNames\"></span> with previous period <span class=\"icon ph-info-fill\" [title]=\"'Previous period ranges from ' + (deltaDateRange | dateRange) + '. This includes weighed measurements from ' + deltaTeams + ' ' + pointType + ': ' + deltaTeamNames\"></span></div>\n <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.benchmark\">Against benchmark</div>\n </div>\n <div class=\"toolbar-setting\" *ngIf=\"qualifiedBy != QualifiedByEnum.none\">\n <div class=\"toolbar-setting-title\">comparison legend</div>\n <div class=\"toolbar-setting-markers negative\">\n <ng-container *ngIf=\"qualifiedBy == 'Benchmark'\">\n <div class=\"toolbar-setting-marker negative\">\n <span class=\"marker\"></span>\n <span class=\"label\">lower</span>\n </div>\n <div class=\"toolbar-setting-marker positive\">\n <span class=\"marker\"></span>\n <span class=\"label\">higher</span>\n </div>\n </ng-container>\n <ng-container *ngIf=\"qualifiedBy == 'Delta'\">\n <div class=\"toolbar-setting-marker negative\">\n <span class=\"marker\"></span>\n <span class=\"label\">decreased</span>\n </div>\n <div class=\"toolbar-setting-marker positive\">\n <span class=\"marker\"></span>\n <span class=\"label\">improved</span>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"buttons\">\n <div class=\"button\" id=\"change-settings\" settingsDialog><span class=\"ph-faders icon\"></span> Settings</div>\n <div class=\"button\" id=\"export-factorscores\" exportFactorScoresDialog *ngIf=\"isLoggedIn\"><span class=\"ph-download-simple icon\"></span> Export</div>\n </div>\n </div>\n </div>\n <div class=\"content\">\n <div class=\"model-visualization\">\n <div class=\"model-clarification\">\n <span class=\"icon ph-info-fill\"></span>\n <span class=\"message-text\">This model shows how factors are connected based on scientific research. Click <span class=\"icon ph-plus-circle-bold plus\"></span> to expand or close lower-order factors. Click factors for more detail.</span>\n </div>\n\n <div *ngIf=\"!showModel || !showIndicatorArrows\" class=\"model-smallscreen\">\n <span class=\"icon ph-frame-corners-bold\"></span>\n <span class=\"message-text\">View on a larger device to see more details.</span>\n </div>\n\n <div class=\"model-viewconfiguration\">\n <div class=\"model-viewmode\">\n <div class=\"model-viewmode-label\">View</div>\n <div class=\"model-viewmode-option\" (click)=\"toggleView(false)\" [ngClass]=\"{'selected': !userSettings.settings.user.modelFilter.advanced}\">\n <span class=\"icon ph-check-fill\" *ngIf=\"!userSettings.settings.user.modelFilter.advanced\"></span>Simple\n </div>\n <div class=\"model-viewmode-option selected\" (click)=\"toggleView(true)\" [ngClass]=\"{'selected': userSettings.settings.user.modelFilter.advanced}\">\n <span class=\"icon ph-check-fill\" *ngIf=\"userSettings.settings.user.modelFilter.advanced\"></span>Advanced\n </div>\n </div>\n\n <div class=\"model-viewmode model-layers\">\n <div class=\"model-viewmode-label\">Source</div>\n <div class=\"model-viewmode-option\" *ngFor=\"let layer of userSettings.settings.user.modelFilter.layers\" (click)=\"toggleLayer(layer)\" [ngClass]=\"{'selected': layer.selected}\">\n <span class=\"icon ph-check-fill\" *ngIf=\"layer.selected\"></span>{{layer.label}}\n </div>\n </div>\n\n <div class=\"model-warnings\" *ngIf=\"globalNotes.length > 0\" notesDialog [notes]=\"globalNotes\">\n <span class=\"ph-warning-fill icon\"></span>\n <span *ngIf=\"globalNotes.length == 1\">{{globalNotes.length}} warning</span>\n <span *ngIf=\"globalNotes.length > 1\">{{globalNotes.length}} warnings</span>\n </div>\n </div>\n\n <div class=\"model-frame\" [class]=\"'model-visualization-' + modelDefinition.publicKey\">\n <ng-container *ngFor=\"let factor of factors\">\n <model-factor-core [factor]=\"factor\" [expandPosition]=\"factor.indicatorPosition\" [allowExpand]=\"showIndicatorArrows\"></model-factor-core>\n </ng-container>\n </div>\n\n <ng-container *ngFor=\"let factor of factors\">\n <arrow [from]=\"'#factor-' + factor.publicKey\" [to]=\"'#factor-' + effect.to\" [onlyVisible]=\"true\" [tail]=\"true\" [head]=\"false\" [width]=\"2\" *ngFor=\"let effect of factor.effects\"></arrow>\n <ng-container *ngIf=\"showIndicatorArrows\">\n <ng-container *ngFor=\"let lowerFactor of factor.lower\">\n <arrow [from]=\"'#factor-' + lowerFactor.publicKey + '-anchor'\" [to]=\"'#factor-' + lowerEffect.to + '-expand'\" [onlyVisible]=\"true\" [tail]=\"false\" [head]=\"false\" [width]=\"1\" *ngFor=\"let lowerEffect of lowerFactor.effects\"></arrow>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <div class=\"model-attribution\">\n <span class=\"icon ph-info-fill\"></span>\n <span>\n <span [innerHtml]=\"modelDefinition.attribution\"></span>\n <span>&nbsp;See our <a href=\"https://github.com/theliberators/scrumteamsurvey.docs/wiki\" target=\"_blank\">wiki</a> for details and a FAQ.</span>\n </span>\n </div>\n </div>\n </div>\n\n <div class=\"bottom\" *ngIf=\"metrics.length > 0\">\n <h3>Process metrics <span class=\"badge badge-beta\">alpha</span></h3>\n <div class=\"message message-information\"><span class=\"icon ph-info-fill\"></span><span>We are experimenting with process metrics from external services like JIRA and Azure DevOps. Review documentation <a href=\"https://columinity.docs/wiki/Integrate-with-other-platforms\">here</a>. Please share feedback or issues with us.</span></div>\n <div class=\"model-factor-metrics\">\n <model-factor-metric [metric]=\"metric\" *ngFor=\"let metric of metrics\"></model-factor-metric>\n </div>\n </div>\n</div>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}.content{border-bottom:3px solid #f0f0f0}@media only screen and (max-width: 1536px){.toolbar-settings{display:flex}}@media only screen and (max-width: 992px){.toolbar-settings{display:block}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ArrowComponent, selector: "arrow", inputs: ["from", "to", "head", "tail", "text", "toolTip", "color", "width", "onlyVisible", "fromX", "fromY", "toX", "toY"] }, { kind: "directive", type: OpenSettingsDialogDirective, selector: "[settingsDialog]", inputs: ["showSettingStacking"] }, { kind: "directive", type: OpenExportFactorScoresDialogDirective, selector: "[exportFactorScoresDialog]" }, { kind: "directive", type: OpenNotesDialogDirective, selector: "[notesDialog]", inputs: ["notes"] }, { kind: "component", type: ModelFactorMetricComponent, selector: "model-factor-metric", inputs: ["metric"] }, { kind: "component", type: ModelFactorCoreComponent, selector: "model-factor-core", inputs: ["factor", "allowExpand", "expandPosition"] }, { kind: "pipe", type: DateRangePipe, name: "dateRange" }] }); }
5067
5067
  }
5068
5068
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModelCanvasComponent, decorators: [{
5069
5069
  type: Component,
5070
- args: [{ selector: 'model-canvas', standalone: false, template: "<div *ngIf=\"!showModel\" class=\"message message-warning\">\n <div><span class=\"icon ph-info-fill\"></span> We've hidden the model visualization because your resolution is too low. Please try a larger device, like a tablet, laptop or desktop.</div>\n</div>\n\n<div class=\"wirebox model\" *ngIf=\"factors && showModel\">\n <div class=\"top\">\n <div class=\"toolbar\">\n <div class=\"toolbar-settings\">\n <div class=\"toolbar-setting\">\n <div class=\"toolbar-setting-title\">Selected Benchmark</div>\n <div class=\"toolbar-setting-label\">{{benchmark}}</div>\n </div>\n <div class=\"toolbar-setting\">\n <div class=\"toolbar-setting-title\">compare results to</div>\n <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.none\">No comparison</div>\n <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.delta && deltaType == 'PreviousSnapshot'\">Previous snapshot from {{deltaDateRange | dateRange}}</div>\n <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.delta && deltaType != 'PreviousSnapshot'\">Current period <span class=\"icon ph-info-fill\" [title]=\"'Current period ranges from ' + (dateRange | dateRange) + '. This includes weighed measurements from ' + pointCount + ' ' + pointType + ': ' + pointNames\"></span> with previous period <span class=\"icon ph-info-fill\" [title]=\"'Previous period ranges from ' + (deltaDateRange | dateRange) + '. This includes weighed measurements from ' + deltaTeams + ' ' + pointType + ': ' + deltaTeamNames\"></span></div>\n <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.benchmark\">Against benchmark</div>\n </div>\n <div class=\"toolbar-setting\" *ngIf=\"qualifiedBy != QualifiedByEnum.none\">\n <div class=\"toolbar-setting-title\">comparison legend</div>\n <div class=\"toolbar-setting-markers negative\">\n <ng-container *ngIf=\"qualifiedBy == 'Benchmark'\">\n <div class=\"toolbar-setting-marker negative\">\n <span class=\"marker\"></span>\n <span class=\"label\">lower</span>\n </div>\n <div class=\"toolbar-setting-marker positive\">\n <span class=\"marker\"></span>\n <span class=\"label\">higher</span>\n </div>\n </ng-container>\n <ng-container *ngIf=\"qualifiedBy == 'Delta'\">\n <div class=\"toolbar-setting-marker negative\">\n <span class=\"marker\"></span>\n <span class=\"label\">decreased</span>\n </div>\n <div class=\"toolbar-setting-marker positive\">\n <span class=\"marker\"></span>\n <span class=\"label\">improved</span>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"buttons\">\n <div class=\"button\" id=\"change-settings\" settingsDialog><span class=\"ph-faders icon\"></span> Settings</div>\n <div class=\"button\" id=\"export-factorscores\" exportFactorScoresDialog *ngIf=\"isLoggedIn\"><span class=\"ph-download-simple icon\"></span> Export</div>\n </div>\n </div>\n </div>\n <div class=\"content\">\n <div class=\"model-visualization\">\n <div class=\"model-clarification\">\n <span class=\"icon ph-info-fill\"></span>\n <span class=\"message-text\">This model shows how factors are connected based on scientific research. Click <span class=\"icon ph-plus-circle-bold plus\"></span> to expand or close lower-order factors. Click factors for more detail.</span>\n </div>\n\n <div *ngIf=\"!showModel || !showIndicatorArrows\" class=\"model-smallscreen\">\n <span class=\"icon ph-frame-corners-bold\"></span>\n <span class=\"message-text\">View on a larger device to see more details.</span>\n </div>\n\n <div class=\"model-viewconfiguration\">\n <div class=\"model-viewmode\">\n <div class=\"model-viewmode-label\">View</div>\n <div class=\"model-viewmode-option\" (click)=\"toggleView(false)\" [ngClass]=\"{'selected': !userSettings.settings.user.modelFilter.advanced}\">\n <span class=\"icon ph-check-fill\" *ngIf=\"!userSettings.settings.user.modelFilter.advanced\"></span>Simple\n </div>\n <div class=\"model-viewmode-option selected\" (click)=\"toggleView(true)\" [ngClass]=\"{'selected': userSettings.settings.user.modelFilter.advanced}\">\n <span class=\"icon ph-check-fill\" *ngIf=\"userSettings.settings.user.modelFilter.advanced\"></span>Advanced\n </div>\n </div>\n\n <div class=\"model-viewmode model-layers\">\n <div class=\"model-viewmode-label\">Source</div>\n <div class=\"model-viewmode-option\" *ngFor=\"let layer of userSettings.settings.user.modelFilter.layers\" (click)=\"toggleLayer(layer)\" [ngClass]=\"{'selected': layer.selected}\">\n <span class=\"icon ph-check-fill\" *ngIf=\"layer.selected\"></span>{{layer.label}}\n </div>\n </div>\n\n <div class=\"model-warnings\" *ngIf=\"globalNotes.length > 0\" notesDialog [notes]=\"globalNotes\">\n <span class=\"ph-warning-fill icon\"></span>\n <span *ngIf=\"globalNotes.length == 1\">{{globalNotes.length}} warning</span>\n <span *ngIf=\"globalNotes.length > 1\">{{globalNotes.length}} warnings</span>\n </div>\n </div>\n\n <div class=\"model-frame\" [class]=\"'model-visualization-' + modelDefinition.publicKey\">\n <ng-container *ngFor=\"let factor of factors\">\n <model-factor-core [factor]=\"factor\" [expandPosition]=\"factor.indicatorPosition\" [allowExpand]=\"showIndicatorArrows\"></model-factor-core>\n </ng-container>\n </div>\n\n <ng-container *ngFor=\"let factor of factors\">\n <arrow [from]=\"'#factor-' + factor.publicKey\" [to]=\"'#factor-' + effect.to\" [onlyVisible]=\"true\" [tail]=\"true\" [head]=\"false\" [width]=\"2\" *ngFor=\"let effect of factor.effects\"></arrow>\n <ng-container *ngIf=\"showIndicatorArrows\">\n <ng-container *ngFor=\"let lowerFactor of factor.lower\">\n <arrow [from]=\"'#factor-' + lowerFactor.publicKey + '-anchor'\" [to]=\"'#factor-' + lowerEffect.to + '-expand'\" [onlyVisible]=\"true\" [tail]=\"false\" [head]=\"false\" [width]=\"1\" *ngFor=\"let lowerEffect of lowerFactor.effects\"></arrow>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <div class=\"model-attribution\">\n <span class=\"icon ph-info-fill\"></span>\n <span>\n <span [innerHtml]=\"modelDefinition.attribution\"></span>\n <span>&nbsp;See our <a href=\"https://github.com/theliberators/scrumteamsurvey.docs/wiki\" target=\"_blank\">wiki</a> for details and a FAQ.</span>\n </span>\n </div>\n </div>\n </div>\n\n <div class=\"bottom\" *ngIf=\"metrics.length > 0\">\n <h3>Process metrics <span class=\"badge badge-beta\">alpha</span></h3>\n <div class=\"message message-information\"><span class=\"icon ph-info-fill\"></span><span>We are experimenting with process metrics from external services. Please share feedback or issues with us.</span></div>\n <div class=\"model-factor-metrics\">\n <model-factor-metric [metric]=\"metric\" *ngFor=\"let metric of metrics\"></model-factor-metric>\n </div>\n </div>\n</div>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}.content{border-bottom:3px solid #f0f0f0}@media only screen and (max-width: 1536px){.toolbar-settings{display:flex}}@media only screen and (max-width: 992px){.toolbar-settings{display:block}}\n"] }]
5070
+ args: [{ selector: 'model-canvas', standalone: false, template: "<div *ngIf=\"!showModel\" class=\"message message-warning\">\n <div><span class=\"icon ph-info-fill\"></span> We've hidden the model visualization because your resolution is too low. Please try a larger device, like a tablet, laptop or desktop.</div>\n</div>\n\n<div class=\"wirebox model\" *ngIf=\"factors && showModel\">\n <div class=\"top\">\n <div class=\"toolbar\">\n <div class=\"toolbar-settings\">\n <div class=\"toolbar-setting\">\n <div class=\"toolbar-setting-title\">Selected Benchmark</div>\n <div class=\"toolbar-setting-label\">{{benchmark}}</div>\n </div>\n <div class=\"toolbar-setting\">\n <div class=\"toolbar-setting-title\">compare results to</div>\n <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.none\">No comparison</div>\n <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.delta && deltaType == 'PreviousSnapshot'\">Previous snapshot from {{deltaDateRange | dateRange}}</div>\n <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.delta && deltaType != 'PreviousSnapshot'\">Current period <span class=\"icon ph-info-fill\" [title]=\"'Current period ranges from ' + (dateRange | dateRange) + '. This includes weighed measurements from ' + pointCount + ' ' + pointType + ': ' + pointNames\"></span> with previous period <span class=\"icon ph-info-fill\" [title]=\"'Previous period ranges from ' + (deltaDateRange | dateRange) + '. This includes weighed measurements from ' + deltaTeams + ' ' + pointType + ': ' + deltaTeamNames\"></span></div>\n <div class=\"toolbar-setting-label\" *ngIf=\"qualifiedBy == QualifiedByEnum.benchmark\">Against benchmark</div>\n </div>\n <div class=\"toolbar-setting\" *ngIf=\"qualifiedBy != QualifiedByEnum.none\">\n <div class=\"toolbar-setting-title\">comparison legend</div>\n <div class=\"toolbar-setting-markers negative\">\n <ng-container *ngIf=\"qualifiedBy == 'Benchmark'\">\n <div class=\"toolbar-setting-marker negative\">\n <span class=\"marker\"></span>\n <span class=\"label\">lower</span>\n </div>\n <div class=\"toolbar-setting-marker positive\">\n <span class=\"marker\"></span>\n <span class=\"label\">higher</span>\n </div>\n </ng-container>\n <ng-container *ngIf=\"qualifiedBy == 'Delta'\">\n <div class=\"toolbar-setting-marker negative\">\n <span class=\"marker\"></span>\n <span class=\"label\">decreased</span>\n </div>\n <div class=\"toolbar-setting-marker positive\">\n <span class=\"marker\"></span>\n <span class=\"label\">improved</span>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"buttons\">\n <div class=\"button\" id=\"change-settings\" settingsDialog><span class=\"ph-faders icon\"></span> Settings</div>\n <div class=\"button\" id=\"export-factorscores\" exportFactorScoresDialog *ngIf=\"isLoggedIn\"><span class=\"ph-download-simple icon\"></span> Export</div>\n </div>\n </div>\n </div>\n <div class=\"content\">\n <div class=\"model-visualization\">\n <div class=\"model-clarification\">\n <span class=\"icon ph-info-fill\"></span>\n <span class=\"message-text\">This model shows how factors are connected based on scientific research. Click <span class=\"icon ph-plus-circle-bold plus\"></span> to expand or close lower-order factors. Click factors for more detail.</span>\n </div>\n\n <div *ngIf=\"!showModel || !showIndicatorArrows\" class=\"model-smallscreen\">\n <span class=\"icon ph-frame-corners-bold\"></span>\n <span class=\"message-text\">View on a larger device to see more details.</span>\n </div>\n\n <div class=\"model-viewconfiguration\">\n <div class=\"model-viewmode\">\n <div class=\"model-viewmode-label\">View</div>\n <div class=\"model-viewmode-option\" (click)=\"toggleView(false)\" [ngClass]=\"{'selected': !userSettings.settings.user.modelFilter.advanced}\">\n <span class=\"icon ph-check-fill\" *ngIf=\"!userSettings.settings.user.modelFilter.advanced\"></span>Simple\n </div>\n <div class=\"model-viewmode-option selected\" (click)=\"toggleView(true)\" [ngClass]=\"{'selected': userSettings.settings.user.modelFilter.advanced}\">\n <span class=\"icon ph-check-fill\" *ngIf=\"userSettings.settings.user.modelFilter.advanced\"></span>Advanced\n </div>\n </div>\n\n <div class=\"model-viewmode model-layers\">\n <div class=\"model-viewmode-label\">Source</div>\n <div class=\"model-viewmode-option\" *ngFor=\"let layer of userSettings.settings.user.modelFilter.layers\" (click)=\"toggleLayer(layer)\" [ngClass]=\"{'selected': layer.selected}\">\n <span class=\"icon ph-check-fill\" *ngIf=\"layer.selected\"></span>{{layer.label}}\n </div>\n </div>\n\n <div class=\"model-warnings\" *ngIf=\"globalNotes.length > 0\" notesDialog [notes]=\"globalNotes\">\n <span class=\"ph-warning-fill icon\"></span>\n <span *ngIf=\"globalNotes.length == 1\">{{globalNotes.length}} warning</span>\n <span *ngIf=\"globalNotes.length > 1\">{{globalNotes.length}} warnings</span>\n </div>\n </div>\n\n <div class=\"model-frame\" [class]=\"'model-visualization-' + modelDefinition.publicKey\">\n <ng-container *ngFor=\"let factor of factors\">\n <model-factor-core [factor]=\"factor\" [expandPosition]=\"factor.indicatorPosition\" [allowExpand]=\"showIndicatorArrows\"></model-factor-core>\n </ng-container>\n </div>\n\n <ng-container *ngFor=\"let factor of factors\">\n <arrow [from]=\"'#factor-' + factor.publicKey\" [to]=\"'#factor-' + effect.to\" [onlyVisible]=\"true\" [tail]=\"true\" [head]=\"false\" [width]=\"2\" *ngFor=\"let effect of factor.effects\"></arrow>\n <ng-container *ngIf=\"showIndicatorArrows\">\n <ng-container *ngFor=\"let lowerFactor of factor.lower\">\n <arrow [from]=\"'#factor-' + lowerFactor.publicKey + '-anchor'\" [to]=\"'#factor-' + lowerEffect.to + '-expand'\" [onlyVisible]=\"true\" [tail]=\"false\" [head]=\"false\" [width]=\"1\" *ngFor=\"let lowerEffect of lowerFactor.effects\"></arrow>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <div class=\"model-attribution\">\n <span class=\"icon ph-info-fill\"></span>\n <span>\n <span [innerHtml]=\"modelDefinition.attribution\"></span>\n <span>&nbsp;See our <a href=\"https://github.com/theliberators/scrumteamsurvey.docs/wiki\" target=\"_blank\">wiki</a> for details and a FAQ.</span>\n </span>\n </div>\n </div>\n </div>\n\n <div class=\"bottom\" *ngIf=\"metrics.length > 0\">\n <h3>Process metrics <span class=\"badge badge-beta\">alpha</span></h3>\n <div class=\"message message-information\"><span class=\"icon ph-info-fill\"></span><span>We are experimenting with process metrics from external services like JIRA and Azure DevOps. Review documentation <a href=\"https://columinity.docs/wiki/Integrate-with-other-platforms\">here</a>. Please share feedback or issues with us.</span></div>\n <div class=\"model-factor-metrics\">\n <model-factor-metric [metric]=\"metric\" *ngFor=\"let metric of metrics\"></model-factor-metric>\n </div>\n </div>\n</div>\n", styles: [".smallTextUppercase{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;text-transform:uppercase;line-height:100%}.bigletteredbutton{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;text-decoration:none;background:#ffffff1a;margin-bottom:10px;display:flex;align-content:center;border-radius:20px;padding:15px;font-size:24px;border:2px solid #1F3F8F;border-bottom:6px solid #1F3F8F;color:#fff;align-items:center;cursor:pointer}.bigletteredbutton .free{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff73f;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton .plan{font-family:StevieSansThin,sans-serif;font-style:normal;font-weight:400;font-size:15px;line-height:140%;background:#fff;color:#2f2f2f;padding:3px 5px;margin-left:20px;border-radius:10px}.bigletteredbutton:hover,.bigletteredbutton.selected{border:2px solid #fff73f;border-bottom:6px solid #fff73f}.bigletteredbutton .button-letter{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f;margin-right:20px}.bigletteredbutton .button-letter .ph{color:#1f3f8f}.bigletteredbutton .button-letter:hover{background:#1f3f8f;color:#fff73f}.bigletteredbutton .button-letter:hover .ph{color:#fff73f}.roundicon-yellow{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;background:#fff73f;color:#1f3f8f}.roundicon-yellow .ph{color:#1f3f8f}.roundicon-yellow:hover{background:#1f3f8f;color:#fff73f}.roundicon-yellow:hover .ph{color:#fff73f}.roundicon{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;border-radius:30px;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center}.roundicon-large{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;font-family:StevieSans,sans-serif;height:52px;width:52px;min-width:52px;min-height:52px;font-weight:900;font-size:30px;line-height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;height:120px;width:120px}.content{border-bottom:3px solid #f0f0f0}@media only screen and (max-width: 1536px){.toolbar-settings{display:flex}}@media only screen and (max-width: 992px){.toolbar-settings{display:block}}\n"] }]
5071
5071
  }], ctorParameters: () => [{ type: ViewModelStateBase, decorators: [{
5072
5072
  type: Inject,
5073
5073
  args: [VIEWSTATE_PROVIDER]