\r\n
\r\n
\r\n{{ title }}
\r\n\r\n
\r\n
\r\n","import { Component, HostListener, Input, OnInit } from \"@angular/core\";\r\nimport { DynamicDialogConfig, DynamicDialogRef } from \"primeng/dynamicdialog\";\r\n\r\nexport type AdminReviewWidgetInfoModel = {\r\n finalComment: string;\r\n turndownComment: string;\r\n turndownReasons: { title: string }[];\r\n};\r\n\r\n@Component({\r\n selector: \"app-admin-review-widget-info-modal\",\r\n templateUrl: \"./admin-review-widget-info-modal.component.html\",\r\n styleUrls: [\"./admin-review-widget-info-modal.component.scss\"],\r\n})\r\nexport class AdminReviewWidgetInfoModalComponent implements OnInit {\r\n @Input() info: AdminReviewWidgetInfoModel;\r\n @Input() title: string;\r\n @Input() showFinalComment = false;\r\n @Input() showTurndownReason = false;\r\n\r\n constructor(\r\n public dialogRef: DynamicDialogRef,\r\n public config: DynamicDialogConfig\r\n ) {}\r\n\r\n ngOnInit() {\r\n this.title = this.config.data?.title;\r\n this.info = this.config.data?.info;\r\n this.showFinalComment = this.config.data?.showFinalComment;\r\n this.showTurndownReason = this.config.data?.showTurndownReason;\r\n }\r\n \r\n // close on navigation\r\n @HostListener('window:popstate', ['$event'])\r\n onPopState(event) {\r\n this.dismiss();\r\n }\r\n\r\n public close() {\r\n this.dialogRef.close(false);\r\n }\r\n\r\n public dismiss() {\r\n this.dialogRef.close(null);\r\n }\r\n}\r\n","import { Injectable } from '@angular/core';\r\nimport { DialogService } from 'primeng/dynamicdialog';\r\nimport { AdminReviewWidgetInfoModalComponent, AdminReviewWidgetInfoModel } from '../components/modal/admin-review-widget-info-modal/admin-review-widget-info-modal.component';\r\n\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class AdminReviewWidgetInfoModalService {\r\n\r\n constructor(private dialogService: DialogService) { }\r\n\r\n public openAdminReviewWidgetInfoModal(\r\n title: string = '',\r\n info: AdminReviewWidgetInfoModel,\r\n showFinalComment = false,\r\n showTurndownReason = false,\r\n dialogSize: string = 'auto'): Promise\r\n
\r\n 0 && showTurndownReason\">\r\n
\r\n Turndown Reason
\r\n\r\n
\r\n Turndown Comment
\r\n{{ info.turndownComment }}
\r\n \r\n
\r\n Final Comment
\r\n{{ info.finalComment }}
\r\n 0 && !loading, 'failed-to-load': failedToLoad}\">\r\n \r\n \r\n \r\n
","import { Component, Input, OnInit } from \"@angular/core\";\r\nimport { DateTime, Duration } from \"luxon\";\r\nimport { WidgetsService } from \"src/app/shared/services/widgets.service\";\r\n\r\n@Component({\r\n selector: 'widget-evaluation-judge',\r\n templateUrl: './widget-evaluation-judge.component.html',\r\n styleUrls: ['./widget-evaluation-judge.component.scss']\r\n})\r\nexport class WidgetEvaluationJudgeComponent implements OnInit {\r\n @Input() widgetConfig;\r\n stageId = null;\r\n stageName = '';\r\n neededReviews = 5;\r\n completedReviews = 0;\r\n timeLeftToStart = 0;\r\n timeLeftToStartCalculated: number = 0;\r\n timeLeftString = 'Days';\r\n\r\n buttonLink = '';\r\n buttonText = '';\r\n\r\n calculatedArcStyle = ''\r\n loading = false;\r\n\r\n isDeadlinePassed = false;\r\n\r\n failedToLoad: boolean = false;\r\n \r\n constructor(private widgetsService: WidgetsService) { }\r\n\r\n ngOnInit() {\r\n this.init()\r\n }\r\n\r\n async init() {\r\n this.loading = true;\r\n this.stageId = this.widgetConfig?.widgetSettings?.stageId;\r\n if (!this.stageId) return;\r\n\r\n try {\r\n const res: any = await this.widgetsService.getEvaluationJudgeWidgetData(this.stageId).toPromise();\r\n this.stageName = res.stageName;\r\n this.neededReviews = res.neededReviews;\r\n this.completedReviews = res.completedReviews;\r\n const currentDate = DateTime.fromISO(DateTime.fromJSDate(new Date()).setZone(\"UTC\").toISO());\r\n // get stage start date (and time)\r\n // it's important to map the start date coming from RP as UTC zone, otherwise the user's timezone is attached to it\r\n // as if it was in the user's timezone instead of UTC\r\n const stageStartDate = DateTime.fromISO(res.stageStartDate, {zone: 'UTC'});\r\n this.isDeadlinePassed = res.stageEndDate < DateTime.fromJSDate(new Date()).setZone(\"UTC\").toISO();\r\n\r\n this.timeLeftToStart = stageStartDate.diff(currentDate, 'seconds').toObject().seconds;\r\n\r\n if (this.timeLeftToStart > 172800) {\r\n // more than 2 days remaining\r\n // calculating days using luxon's duration\r\n // calculate in milliseconds and then turn them to days and parse the days as integer\r\n this.timeLeftToStartCalculated = parseInt(Duration.fromMillis(stageStartDate.diff(currentDate, 'milliseconds').toObject().milliseconds).toFormat('d'));\r\n this.timeLeftString = 'Days';\r\n } else if (this.timeLeftToStart > 86400) {\r\n // between 1 and 2 days\r\n // calculating days using luxon's duration\r\n // calculate in milliseconds and then turn them to days and parse the days as integer\r\n this.timeLeftToStartCalculated = parseInt(Duration.fromMillis(stageStartDate.diff(currentDate, 'milliseconds').toObject().milliseconds).toFormat('d'));\r\n this.timeLeftString = 'Day';\r\n } else if (this.timeLeftToStart > 3600) {\r\n // between 1 and 24 hours\r\n this.timeLeftToStartCalculated = Math.trunc(stageStartDate.diff(currentDate, 'hours').toObject().hours);\r\n this.timeLeftString = this.timeLeftToStartCalculated === 1 ? `Hour` : `Hours`;\r\n } else if (this.timeLeftToStart > 0) {\r\n // less than 1 hour\r\n this.timeLeftToStartCalculated = Math.trunc(stageStartDate.diff(currentDate, 'minutes').toObject().minutes);\r\n // fix for less than 1 minute remaining\r\n if (this.timeLeftToStartCalculated < 1) {\r\n this.timeLeftToStartCalculated = 1;\r\n }\r\n this.timeLeftString = this.timeLeftToStartCalculated === 1 ? `Minute` : `Minutes`;\r\n } else {\r\n // stage has started\r\n }\r\n\r\n if (this.completedReviews === this.neededReviews) {\r\n this.buttonLink = `/evaluation/${this.stageId}`;\r\n this.buttonText = 'View';\r\n } else {\r\n this.buttonLink = `/evaluation/${this.stageId}`;\r\n this.buttonText = 'Review';\r\n }\r\n\r\n const percentage = (this.completedReviews / this.neededReviews) * 100 || 0;\r\n const color = percentage === 100 ? '#32a752' : '#FFAD34';\r\n if (percentage) {\r\n this.calculatedArcStyle = `transform: rotate(${45+(percentage * 1.8)}deg); border-bottom-color: ${color}; border-right-color: ${color};`;\r\n }\r\n this.loading = false;\r\n this.failedToLoad = false;\r\n } catch (error) {\r\n this.loading = false;\r\n this.failedToLoad = true;\r\n console.log(error);\r\n }\r\n }\r\n\r\n reloadWidget() {\r\n this.init();\r\n }\r\n}","\r\n
\r\nNot connected to a stage
\r\n\r\n 0\" class=\"default-state\">\r\n ![](\"assets/images/widget/peer-review.png\"/)
\r\n {{ timeLeftToStartCalculated }} {{ timeLeftString }}\r\n \r\n
\r\n\r\n \r\n {{ timeLeftToStartCalculated }} {{ timeLeftString }}\r\n \r\n \r\n\r\n
\r\n\r\n \r\n\r\n \r\n\r\n \r\n \r\n
\r\n\r\n \r\n {{ completedReviews }}\r\n OUT OF {{ neededReviews }}\r\n
\r\n\r\n 0 && !loading, 'failed-to-load': failedToLoad}\">\r\n \r\n \r\n \r\n
","import { Component, Input, OnInit } from \"@angular/core\";\r\nimport { DateTime, Duration } from \"luxon\";\r\nimport { WidgetsService } from \"src/app/shared/services/widgets.service\";\r\n\r\n@Component({\r\n selector: 'widget-evaluation-participant',\r\n templateUrl: './widget-evaluation-participant.component.html',\r\n styleUrls: ['./widget-evaluation-participant.component.scss']\r\n})\r\nexport class WidgetEvaluationParticipantComponent implements OnInit {\r\n @Input() widgetConfig;\r\n\r\n stageId = null;\r\n stageName = '';\r\n timeLeftToStart = 0;\r\n timeLeftToStartCalculated: number = 0;\r\n timeLeftString = 'Days';\r\n isEliminated = false;\r\n resultsReleased = false;\r\n inReview = false;\r\n loading = false;\r\n failedToLoad: boolean = false;\r\n\r\n constructor(private widgetsService: WidgetsService) { }\r\n\r\n ngOnInit() {\r\n this.init()\r\n }\r\n\r\n async init() {\r\n this.loading = true;\r\n this.stageId = this.widgetConfig?.widgetSettings?.stageId;\r\n if (!this.stageId) return;\r\n\r\n try {\r\n const res: any = await this.widgetsService.getEvaluationParticipantWidgetData(this.stageId).toPromise();\r\n this.stageName = res.stageName;\r\n this.isEliminated = res.isEliminated;\r\n this.resultsReleased = res.resultsReleased;\r\n const currentDate = DateTime.fromISO(DateTime.fromJSDate(new Date()).setZone(\"UTC\").toISO());\r\n // get stage start date (and time)\r\n // it's important to map the start date coming from RP as UTC zone, otherwise the user's timezone is attached to it\r\n // as if it was in the user's timezone instead of UTC\r\n const stageStartDate = DateTime.fromISO(res.stageStartDate, {zone: 'UTC'});\r\n\r\n this.timeLeftToStart = stageStartDate.diff(currentDate, 'seconds').toObject().seconds;\r\n\r\n if (this.timeLeftToStart > 172800) {\r\n // more than 2 days remaining\r\n // calculating days using luxon's duration\r\n // calculate in milliseconds and then turn them to days and parse the days as integer\r\n this.timeLeftToStartCalculated = parseInt(Duration.fromMillis(stageStartDate.diff(currentDate, 'milliseconds').toObject().milliseconds).toFormat('d'));\r\n this.timeLeftString = 'Days';\r\n } else if (this.timeLeftToStart > 86400) {\r\n // between 1 and 2 days\r\n // calculating days using luxon's duration\r\n // calculate in milliseconds and then turn them to days and parse the days as integer\r\n this.timeLeftToStartCalculated = parseInt(Duration.fromMillis(stageStartDate.diff(currentDate, 'milliseconds').toObject().milliseconds).toFormat('d'));\r\n this.timeLeftString = 'Day';\r\n } else if (this.timeLeftToStart > 3600) {\r\n // between 1 and 24 hours\r\n this.timeLeftToStartCalculated = Math.trunc(stageStartDate.diff(currentDate, 'hours').toObject().hours);\r\n this.timeLeftString = this.timeLeftToStartCalculated === 1 ? `Hour` : `Hours`;\r\n } else if (this.timeLeftToStart > 0) {\r\n // less than 1 hour\r\n this.timeLeftToStartCalculated = Math.trunc(stageStartDate.diff(currentDate, 'minutes').toObject().minutes);\r\n // fix for less than 1 minute remaining\r\n if (this.timeLeftToStartCalculated < 1) {\r\n this.timeLeftToStartCalculated = 1;\r\n }\r\n this.timeLeftString = this.timeLeftToStartCalculated === 1 ? `Minute` : `Minutes`;\r\n } else {\r\n // stage has started\r\n }\r\n\r\n this.inReview = stageStartDate < currentDate;\r\n this.loading = false;\r\n this.failedToLoad = false;\r\n } catch (error) {\r\n this.loading = false;\r\n this.failedToLoad = true;\r\n console.log(error);\r\n }\r\n }\r\n\r\n reloadWidget() {\r\n this.init();\r\n }\r\n}\r\n","","import { Component, Input, OnInit, ViewChild } from \"@angular/core\";\r\nimport { DateTime, Interval } from \"luxon\";\r\nimport { UIChart } from \"primeng/chart\";\r\nimport { CopyToClipboardService } from \"src/app/shared/services/copy-to-clipboard.service\";\r\nimport { WidgetsService } from \"src/app/shared/services/widgets.service\";\r\n\r\n@Component({\r\n selector: \"widget-form-stats\",\r\n templateUrl: \"./widget-form-stats.component.html\",\r\n styleUrls: [\"./widget-form-stats.component.scss\"],\r\n})\r\nexport class WidgetFormStatsComponent implements OnInit {\r\n @ViewChild(\"doughnutChart\") doughnutChart: UIChart;\r\n @Input() widgetConfig;\r\n settings: any = {};\r\n widgetSize = 33;\r\n loading = false;\r\n failedToLoad: boolean = false;\r\n noData = false;\r\n data: any[] = [];\r\n total = 0;\r\n\r\n doughnutData = {\r\n labels: [],\r\n datasets: [],\r\n };\r\n\r\n doughnutOptions = {\r\n cutout: 90,\r\n plugins: {\r\n legend: {\r\n display: false,\r\n },\r\n datalabels: {\r\n color: (context) => {\r\n return [0, 1, 8, 9].includes(context.dataIndex) ? \"#ffffff\" : \"#000000\";\r\n },\r\n font: {\r\n weight: \"bold\",\r\n size: 16,\r\n },\r\n anchor: \"center\",\r\n align: \"center\",\r\n offset: 0,\r\n },\r\n tooltip: {\r\n enabled: true,\r\n displayColors: false,\r\n callbacks: {\r\n label: (context) => {\r\n const label: string[] = context.label.match(/.{1,30}/g)\r\n return label.length > 10 ? [...label.slice(0, 10), '...'] : label;\r\n },\r\n },\r\n },\r\n },\r\n };\r\n\r\n doughnutPlugins = [];\r\n\r\n colors = [\r\n \"#4D71FE\",\r\n \"#8BA3FE\",\r\n \"#C1CDFF\",\r\n \"#E4EAFF\",\r\n \"#F1993B\",\r\n \"#F5C087\",\r\n \"#FADBBB\",\r\n \"#FDF0E2\",\r\n \"#39289F\",\r\n \"#9289CA\",\r\n ];\r\n\r\n constructor(\r\n private widgetsService: WidgetsService,\r\n private copyToClipboardService: CopyToClipboardService\r\n ) {}\r\n\r\n ngOnInit() {\r\n this.settings = this.widgetConfig.widgetSettings;\r\n this.widgetSize = this.widgetConfig.widgetHorizontalPercentageSize;\r\n this.init();\r\n }\r\n\r\n async init() {\r\n this.loading = true;\r\n try {\r\n const res: any = await this.widgetsService\r\n .getFormStatsWidgetData(this.settings.dataSource, this.settings.valueSeparator)\r\n .toPromise();\r\n if (res.data.length === 0) {\r\n this.noData = true;\r\n } else {\r\n this.total = res.total;\r\n this.data = res.data.map((obj, index) => {\r\n return {\r\n count: obj.count,\r\n color: this.colors[index],\r\n label: obj.value || \"N/A\",\r\n };\r\n });\r\n const labels = this.data.map((obj) => obj.label);\r\n const datasets = [\r\n {\r\n label: \"Values\",\r\n data: this.data.map((obj) => obj.count),\r\n backgroundColor: [...this.colors],\r\n hoverOffset: 4,\r\n },\r\n ];\r\n this.doughnutData.labels = labels;\r\n this.doughnutData.datasets = datasets;\r\n this.doughnutChart?.refresh();\r\n }\r\n this.loading = false;\r\n this.failedToLoad = false;\r\n } catch (error) {\r\n this.loading = false;\r\n this.failedToLoad = true;\r\n console.log(error);\r\n }\r\n }\r\n\r\n reloadWidget() {\r\n this.init();\r\n }\r\n\r\n clickToCopy(stringToCopy: string) {\r\n this.copyToClipboardService.copyToClipboard(stringToCopy);\r\n }\r\n}\r\n","\r\n
\r\nNot connected to a stage
\r\n\r\n 0\" class=\"default-state\">\r\n ![](\"assets/images/widget/calendar.webp\"/)
\r\n {{ timeLeftToStartCalculated }} {{ timeLeftString }}\r\n \r\n
\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n {{ timeLeftToStartCalculated }} {{ timeLeftString }}\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n {{ buttonText }}\r\n \r\n \r\n
\r\n","import { Component, Input, OnInit } from \"@angular/core\";\r\nimport { DateTime } from \"luxon\";\r\nimport { WidgetsService } from \"src/app/shared/services/widgets.service\";\r\n\r\n@Component({\r\n selector: 'widget-form',\r\n templateUrl: './widget-form.component.html',\r\n styleUrls: ['./widget-form.component.scss']\r\n})\r\nexport class WidgetFormComponent implements OnInit {\r\n @Input() widgetConfig;\r\n formName = null;\r\n stageId = null;\r\n percentage = 0;\r\n buttonText = 'Loading...';\r\n buttonLink = '';\r\n background = 'radial-gradient(closest-side, white 85%, transparent 80% 100%), conic-gradient(#FFAD34 0%, #F2F3F5 0)';\r\n isDeadlinePassed = false;\r\n isSubmitted = false;\r\n isEliminated = false;\r\n notStarted = false;\r\n loading: boolean = true;\r\n failedToLoad: boolean = false;\r\n\r\n constructor(private widgetsService: WidgetsService) { }\r\n\r\n ngOnInit() {\r\n this.init()\r\n }\r\n\r\n async init() {\r\n this.loading = true;\r\n this.stageId = this.widgetConfig?.widgetSettings?.stageId;\r\n if (!this.stageId) return;\r\n\r\n try {\r\n const res: any = await this.widgetsService.getFormWidgetData(this.stageId).toPromise();\r\n this.failedToLoad = false;\r\n const currentDate = DateTime.fromJSDate(new Date()).setZone('UTC').toISO();\r\n this.notStarted = currentDate < res.stageStartDate;\r\n this.isEliminated = res.isEliminated;\r\n this.formName = res.stageName;\r\n this.isSubmitted = res.isSubmitted;\r\n this.percentage = res.formPercentComplete || 0;\r\n this.isDeadlinePassed = currentDate > res.stageEndDate && !this.isSubmitted;\r\n this.loading = false;\r\n\r\n if (res.stageType.includes('Application')) {\r\n this.buttonLink = `/application`;\r\n } else if (res.stageType.includes('Registration')) {\r\n this.buttonLink = `/registration`;\r\n } else {\r\n this.buttonLink = `/form/${res.stageId}`;\r\n }\r\n if (this.isDeadlinePassed) {\r\n this.buttonText = `View`;\r\n } else if (this.percentage === 0) {\r\n this.buttonText = `Start`;\r\n } else if (this.percentage <= 99) {\r\n this.buttonText = `Continue`;\r\n } else if (this.percentage === 100 && !this.isSubmitted) {\r\n this.buttonText = `Submit`;\r\n } else if (this.percentage === 100 && this.isSubmitted) {\r\n this.buttonText = `View`;\r\n }\r\n\r\n // radial gradient is used to make white circle with transparent edges from the inside toward the outside\r\n // conic gradient is used to make the arch, colors are rotating from left to right with a 0.8deg offset on the edge of the colored part to avoid sharp edges\r\n // the visible part of the conic gradient is the area with transparent edge from the radial gradient\r\n // the conic gradient has two colored arches, one from start to the middle and one from the middle to the end, followed by 0.8deg almost white color\r\n if (this.percentage === 0) {\r\n this.background = `radial-gradient(closest-side, #fff 85%, transparent 86% 100%), conic-gradient(${this.calculateColor(this.percentage)[0]} ${this.percentageToCircularDegrees(this.percentage)/2}deg, #F2F3F5 calc(${this.percentageToCircularDegrees(this.percentage)}deg + 0deg))`;\r\n } else {\r\n this.background = `radial-gradient(closest-side, #fff 85%, transparent 86% 100%), conic-gradient(${this.calculateColor(this.percentage)[0]} ${this.percentageToCircularDegrees(this.percentage)/2}deg, ${this.calculateColor(this.percentage)[1]} ${this.percentageToCircularDegrees(this.percentage)}deg, #F2F3F5 calc(${this.percentageToCircularDegrees(this.percentage)}deg + 0.8deg))`;\r\n }\r\n } catch (error) {\r\n this.loading = false;\r\n this.failedToLoad = true;\r\n console.log(error);\r\n }\r\n }\r\n\r\n calculateColor(percentage: number) {\r\n if (percentage >= 0 && percentage <= 24 ) return ['#fe6842', '#ff8422'];\r\n if (percentage >= 25 && percentage <= 49) return ['#ff8442', '#ffa734'];\r\n if (percentage >= 50 && percentage <= 74) return ['#ffa734', '#f6c71c'];\r\n if (percentage >= 75 && percentage < 100) return ['#85d828', '#3cc224'];\r\n if (percentage === 100) return ['#35b657', '#2fa44e'];\r\n }\r\n\r\n percentageToCircularDegrees(percentage: number) {\r\n return percentage * 3.6;\r\n }\r\n\r\n reloadWidget() {\r\n this.init();\r\n }\r\n}\r\n","","import { Component, Input, OnInit } from \"@angular/core\";\r\nimport { DateTime } from \"luxon\";\r\nimport { ForumsService } from \"src/app/forums/forums.service\";\r\nimport { SsoUser } from \"src/app/shared/model/user.model\";\r\nimport { SsoAuthService } from \"src/app/shared/services/sso-auth.service\";\r\n\r\n@Component({\r\n selector: \"widget-forums\",\r\n templateUrl: \"./widget-forums.component.html\",\r\n styleUrls: [\"./widget-forums.component.scss\"],\r\n})\r\nexport class WidgetForumsComponent implements OnInit {\r\n @Input() widgetConfig;\r\n categories = [\r\n { name: \"All Categories\", value: \"all\", color: \"\" },\r\n { name: \"FAQ\", value: \"FAQ\", color: \"#D2DBFE\" },\r\n { name: \"General\", value: \"General\", color: \"#CCECD4\" },\r\n { name: \"Help\", value: \"Help\", color: \"#E4D9FF\" },\r\n { name: \"Report a problem\", value: \"Report a problem\", color: \"#FBD1D1\" },\r\n ];\r\n posts = [];\r\n loadingPosts = false;\r\n ssoUser: SsoUser = null;\r\n failedToLoad: boolean = false;\r\n\r\n constructor(\r\n private ssoService: SsoAuthService,\r\n private forumsService: ForumsService\r\n ) {}\r\n\r\n ngOnInit() {\r\n this.init();\r\n }\r\n\r\n async init() {\r\n this.ssoUser = await this.ssoService.getCurrentSsoUser();\r\n try {\r\n this.loadingPosts = true;\r\n const refPosts = await this.forumsService.searchForumPosts({\r\n searchTerm: \"\",\r\n sortExpresssion: \"createdAt:desc\",\r\n isHidden: false,\r\n pagination: {\r\n pageSize: 4,\r\n currentPage: 0,\r\n },\r\n });\r\n\r\n this.failedToLoad = false;\r\n\r\n this.posts =\r\n refPosts.hits?.map((hit) => {\r\n const post = hit.document;\r\n this.extendPost(post);\r\n return post;\r\n }) || [];\r\n } catch (error) {\r\n this.failedToLoad = true;\r\n console.error(error);\r\n } finally {\r\n this.loadingPosts = false;\r\n }\r\n }\r\n\r\n private extendPost(post: any) {\r\n Object.assign(post, {\r\n initials: post.createdByName\r\n .match(/(\\b\\S)?/g)\r\n .join(\"\")\r\n .toUpperCase(),\r\n category: this.categories.find((c) => c.value === post.category),\r\n createdAt: DateTime.fromSeconds(post.createdAt, {\r\n zone: \"utc\",\r\n }).toISO({ includeOffset: false }),\r\n });\r\n return post;\r\n }\r\n\r\n reloadWidget() {\r\n this.init();\r\n }\r\n}\r\n","\r\n ![](\"assets/images/widget/lock.webp\"/)
\r\n {{ formName }}\r\n \r\n
\r\n\r\n \r\n {{ formName }}\r\n \r\n \r\n \r\n \r\n
\r\n","import { Component, Input, OnInit } from \"@angular/core\";\r\nimport { AngularFirestore } from \"@angular/fire/compat/firestore\";\r\nimport { filter, map } from \"rxjs/operators\";\r\nimport { PublicConfigService } from \"src/app/shared/services/public.config.service\";\r\nimport { DateTime } from \"luxon\";\r\n\r\n@Component({\r\n selector: 'widget-news',\r\n templateUrl: './widget-news.component.html',\r\n styleUrls: ['./widget-news.component.scss']\r\n})\r\nexport class WidgetNewsComponent implements OnInit {\r\n @Input() widgetConfig;\r\n\r\n clientId: string = \"\";\r\n newsItems: any[] = [];\r\n newsItemsLimit: number = 1;\r\n\r\n FEUrl: string = '';\r\n\r\n loading: boolean = true;\r\n\r\n constructor(\r\n private publicConfig: PublicConfigService,\r\n private db: AngularFirestore,\r\n ) { }\r\n\r\n async ngOnInit() {\r\n this.FEUrl = this.publicConfig.feBaseUrl;\r\n\r\n const { ssoClientId } = this.publicConfig.getCarrotSSOConfig();\r\n this.clientId = ssoClientId;\r\n\r\n this.newsItemsLimit = this.widgetConfig.widgetSettings.newsItemsLimit;\r\n\r\n const query = this.db.collection('clientAssets', ref => ref\r\n .where('clientId', '==', this.clientId)\r\n .where('assetType', '==', 'NewsItem')\r\n .orderBy('data.fieldData.date', 'desc')\r\n .limit(this.newsItemsLimit));\r\n\r\n // TODO - how many calls does this make?\r\n // optimize?\r\n const snapshot = query.get().subscribe(resp => {\r\n resp.forEach(doc => {\r\n let newsData: any = doc.data();\r\n if (!newsData.data.isDraft && !newsData.data.isArchived) {\r\n this.newsItems.push(newsData);\r\n }\r\n });\r\n\r\n // update the date of the news item to be shown in a meaningful way\r\n this.newsItems.forEach(element => {\r\n if (element.data.fieldData.date) {\r\n element.compiledDate = DateTime.fromISO(element.data.fieldData.date).toFormat('MMMM dd, yyyy');\r\n } else {\r\n element.compiledDate = '';\r\n }\r\n });\r\n \r\n this.loading = false;\r\n });\r\n }\r\n}\r\n","\r\n \r\n \r\n \r\n \r\n ![]()
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {{newsItem.data.fieldData.name}}
\r\n {{newsItem.compiledDate}}\r\n 0 && !loading, 'failed-to-load': failedToLoad}\">\r\n \r\n \r\n \r\n
","import { Component, Input, OnInit } from \"@angular/core\";\r\nimport { DateTime, Interval } from \"luxon\";\r\nimport { WidgetsService } from \"src/app/shared/services/widgets.service\";\r\n\r\n@Component({\r\n selector: 'widget-peer-review',\r\n templateUrl: './widget-peer-review.component.html',\r\n styleUrls: ['./widget-peer-review.component.scss']\r\n})\r\nexport class WidgetPeerReviewComponent implements OnInit {\r\n @Input() widgetConfig;\r\n stageId = null;\r\n stageName = '';\r\n isEliminated = false;\r\n resultsReleased = false;\r\n neededReviews = 5;\r\n completedReviews = 0;\r\n timeLeftToStart = 0;\r\n timeLeftString = 'Days';\r\n\r\n buttonLink = '';\r\n buttonText = '';\r\n\r\n calculatedArcStyle = ''\r\n loading = false;\r\n\r\n failedToLoad: boolean = false;\r\n \r\n constructor(private widgetsService: WidgetsService) { }\r\n\r\n ngOnInit() {\r\n this.init()\r\n }\r\n\r\n async init() {\r\n this.loading = true;\r\n this.stageId = this.widgetConfig?.widgetSettings?.stageId;\r\n if (!this.stageId) return;\r\n\r\n try {\r\n const res: any = await this.widgetsService.getPeerReviewWidgetData(this.stageId).toPromise();\r\n this.stageName = res.stageName;\r\n this.isEliminated = res.isEliminated;\r\n this.resultsReleased = res.resultsReleased;\r\n this.neededReviews = res.neededReviews;\r\n this.completedReviews = res.completedReviews;\r\n const currentDate = DateTime.fromJSDate(new Date()).setZone('UTC');\r\n const stageStartDate = DateTime.fromISO(res.stageStartDate);\r\n this.timeLeftToStart = Interval.fromDateTimes(currentDate, stageStartDate).length('days') || 0;\r\n\r\n if (this.timeLeftToStart < 2 && this.timeLeftToStart !== 0) {\r\n this.timeLeftString = 'Day';\r\n }\r\n if (this.timeLeftToStart < 1 && this.timeLeftToStart !== 0) {\r\n this.timeLeftToStart = Interval.fromDateTimes(currentDate, stageStartDate).length('hours') || 0;\r\n this.timeLeftString = this.timeLeftToStart < 2 ? 'Hour' : 'Hours';\r\n }\r\n if (this.timeLeftToStart < 1 && this.timeLeftToStart !== 0) {\r\n this.timeLeftToStart = Interval.fromDateTimes(currentDate, stageStartDate).length('minutes') || 0;\r\n this.timeLeftString = this.timeLeftToStart < 2 ? 'Minute' : 'Minutes';\r\n }\r\n\r\n if (this.resultsReleased) {\r\n this.buttonLink = `/peer-review/${this.stageId}/results`;\r\n this.buttonText = 'Go to results';\r\n } else if (this.completedReviews === this.neededReviews) {\r\n this.buttonLink = `/peer-review/${this.stageId}`;\r\n this.buttonText = 'View';\r\n } else {\r\n this.buttonLink = `/peer-review/${this.stageId}`;\r\n this.buttonText = 'Review';\r\n }\r\n\r\n const percentage = (this.completedReviews / this.neededReviews) * 100 || 0;\r\n const color = percentage === 100 ? '#32a752' : '#FFAD34';\r\n if (percentage) {\r\n this.calculatedArcStyle = `transform: rotate(${45+(percentage * 1.8)}deg); border-bottom-color: ${color}; border-right-color: ${color};`;\r\n }\r\n this.loading = false;\r\n this.failedToLoad = false;\r\n } catch (error) {\r\n this.loading = false;\r\n this.failedToLoad = true;\r\n console.log(error);\r\n }\r\n }\r\n\r\n roundTime(days: number) {\r\n return Math.round(days)\r\n }\r\n\r\n reloadWidget() {\r\n this.init();\r\n }\r\n}\r\n","\r\n","import { Component, Input, OnInit, ViewChild } from \"@angular/core\";\r\nimport { DateTime } from \"luxon\";\r\nimport { UIChart } from \"primeng/chart\";\r\nimport { DashboardWidget } from \"src/app/shared/model/dashboard-config.model\";\r\nimport { CopyToClipboardService } from \"src/app/shared/services/copy-to-clipboard.service\";\r\nimport { WidgetsService } from \"src/app/shared/services/widgets.service\";\r\n\r\n@Component({\r\n selector: \"widget-stage-counters\",\r\n templateUrl: \"./widget-stage-counters.component.html\",\r\n styleUrls: [\"./widget-stage-counters.component.scss\"],\r\n})\r\nexport class WidgetStageCountersComponent implements OnInit {\r\n @ViewChild(\"doughnutChart\") doughnutChart: UIChart;\r\n @ViewChild(\"doughnutChart2\") doughnutChart2: UIChart;\r\n @ViewChild(\"doughnutChart3\") doughnutChart3: UIChart;\r\n @Input() widgetConfig: DashboardWidget;\r\n widgetSize: number = undefined;\r\n loading = false;\r\n failedToLoad: boolean = false;\r\n\r\n nowISO: string = DateTime.fromJSDate(new Date()).setZone(\"UTC\").toISO();\r\n stageStarted: boolean = false;\r\n \r\n total = 0;\r\n totalWording: string = '';\r\n totalTooltip: string = '';\r\n total2 = 0;\r\n totalWording2: string = '';\r\n totalTooltip2: string = '';\r\n total3 = 0;\r\n totalWording3: string = '';\r\n totalTooltip3: string = '';\r\n\r\n stageTypeName: string = '';\r\n stageData: any = null;\r\n stageName: string = '';\r\n\r\n doughnutDataHasValue: boolean = false;\r\n doughnutData = {\r\n labels: [],\r\n datasets: [],\r\n };\r\n\r\n doughnutData2HasValue: boolean = false;\r\n doughnutData2 = {\r\n labels: [],\r\n datasets: [],\r\n };\r\n\r\n doughnutData3HasValue: boolean = false;\r\n doughnutData3 = {\r\n labels: [],\r\n datasets: [],\r\n };\r\n\r\n doughnutOptions = {\r\n cutout: 50,\r\n plugins: {\r\n legend: {\r\n display: false,\r\n },\r\n datalabels: {\r\n labels: {\r\n name: {\r\n align: 'top',\r\n font: {family: 'Europa', size: 18},\r\n color: function(ctx) {\r\n return [0, 8, 9].includes(ctx.dataIndex) ? \"#ffffff\" : \"#000000\";\r\n },\r\n formatter: function(value, ctx) {\r\n if (value) {\r\n return value;\r\n } else {\r\n return '';\r\n };\r\n }\r\n },\r\n value: {\r\n align: 'center',\r\n font: {family: 'Europa', size: 12},\r\n color: function(ctx) {\r\n return [0, 8, 9].includes(ctx.dataIndex) ? \"#ffffff\" : \"#000000\";\r\n },\r\n formatter: function(value, ctx) {\r\n if (value) {\r\n return ctx.chart.data.labels[ctx.dataIndex].toUpperCase();\r\n } else {\r\n return '';\r\n };\r\n },\r\n padding: 1\r\n }\r\n },\r\n },\r\n tooltip: {\r\n enabled: true,\r\n displayColors: false,\r\n callbacks: {\r\n label: (context) => {\r\n return context.label + ': ' + context.formattedValue;\r\n },\r\n },\r\n },\r\n },\r\n };\r\n\r\n doughnutPlugins = [];\r\n\r\n colors = [\r\n \"#4D71FE\",\r\n \"#8BA3FE\",\r\n \"#C1CDFF\",\r\n \"#E4EAFF\",\r\n \"#F1993B\",\r\n \"#F5C087\",\r\n \"#FADBBB\",\r\n \"#FDF0E2\",\r\n \"#39289F\",\r\n \"#9289CA\",\r\n ];\r\n\r\n constructor(\r\n private widgetsService: WidgetsService,\r\n private copyToClipboardService: CopyToClipboardService\r\n ) {}\r\n\r\n ngOnInit() {\r\n this.widgetSize = this.widgetConfig.widgetHorizontalPercentageSize;\r\n this.init();\r\n }\r\n\r\n async init() {\r\n\r\n if (this.widgetConfig.widgetSettings.stageId) {\r\n // load data\r\n this.loading = true;\r\n try {\r\n const res: any = await this.widgetsService.getStageCountersWidgetData([this.widgetConfig.widgetSettings.stageId]).toPromise();\r\n this.stageData = res.results[0];\r\n this.stageTypeName = this.stageData.stageTypeName;\r\n this.stageName = this.stageData.stageNameForDisplay;\r\n\r\n const stageStartDate = DateTime.fromISO(this.stageData.startDate, {zone: 'UTC'});\r\n this.stageStarted = stageStartDate.diff(DateTime.fromISO(this.nowISO), 'seconds').toObject().seconds > 0 ? false : true;\r\n\r\n if (this.stageTypeName === 'Registration Form' || this.stageTypeName === 'Application Form' || this.stageTypeName === 'Form') {\r\n // form stages\r\n const labels = ['Submitted', 'In progress'];\r\n const datasets = [\r\n {\r\n label: 'Values',\r\n data: [this.stageData.submittedCount, this.stageData.inProgressCount],\r\n backgroundColor: [...this.colors],\r\n hoverOffset: 4,\r\n }\r\n ]\r\n // check for if the data has value or only 0\r\n // used in showing/hiding the empty state\r\n if (this.stageData.submittedCount > 0 || this.stageData.inProgressCount > 0) {\r\n this.doughnutDataHasValue = true;\r\n };\r\n this.total = this.stageData.totalCount;\r\n this.totalWording = 'Total';\r\n this.totalTooltip = 'Total participants assigned to this Form stage';\r\n this.doughnutData.labels = labels;\r\n this.doughnutData.datasets = datasets;\r\n this.doughnutChart?.refresh();\r\n } else if (this.stageTypeName === 'Admin Review') {\r\n // admin review\r\n const labels = ['Valid', 'Invalid', 'Unfinished'];\r\n const datasets = [\r\n {\r\n label: 'Values',\r\n data: [this.stageData.valid, this.stageData.invalid, this.stageData.unfinished],\r\n backgroundColor: [...this.colors],\r\n hoverOffset: 4,\r\n }\r\n ]\r\n // check for if the data has value or only 0\r\n // used in showing/hiding the empty state\r\n if (this.stageData.valid > 0 || this.stageData.invalid > 0 || this.stageData.unfinished > 0) {\r\n this.doughnutDataHasValue = true;\r\n };\r\n this.total = this.stageData.total;\r\n this.totalWording = 'Total';\r\n this.totalTooltip = 'Total reviews assigned to this AR stage';\r\n this.doughnutData.labels = labels;\r\n this.doughnutData.datasets = datasets;\r\n this.doughnutChart?.refresh();\r\n\r\n const labels2 = ['Final', 'Not Final'];\r\n const datasets2 = [\r\n {\r\n label: 'Values',\r\n data: [this.stageData.final, (this.stageData.notFinal - this.stageData.unfinished)],\r\n backgroundColor: [...this.colors],\r\n hoverOffset: 4,\r\n }\r\n ]\r\n // check for if the data has value or only 0\r\n // used in showing/hiding the empty state\r\n if (this.stageData.final > 0 || this.stageData.notFinal > 0 || this.stageData.unfinished > 0) {\r\n this.doughnutData2HasValue = true;\r\n };\r\n // the total valid or invalid are all finished reviews\r\n // they are either final or not final\r\n this.total2 = this.stageData.totalValidOrInvalid;\r\n this.totalWording2 = 'Total';\r\n this.totalTooltip2 = 'Total Final & Not Final finished reviews'\r\n this.doughnutData2.labels = labels2;\r\n this.doughnutData2.datasets = datasets2;\r\n this.doughnutChart2?.refresh();\r\n } else if (this.stageTypeName === 'Bulk Review') {\r\n // bulk review\r\n const labels = ['Valid', 'Invalid', 'Open'];\r\n const datasets = [\r\n {\r\n label: 'Values',\r\n data: [this.stageData.valid, this.stageData.invalid, this.stageData.open],\r\n backgroundColor: [...this.colors],\r\n hoverOffset: 4,\r\n }\r\n ]\r\n // check for if the data has value or only 0\r\n // used in showing/hiding the empty state\r\n if (this.stageData.valid > 0 || this.stageData.invalid > 0 || this.stageData.open > 0) {\r\n this.doughnutDataHasValue = true;\r\n };\r\n this.total = this.stageData.valid + this.stageData.invalid + this.stageData.open;\r\n this.totalWording = 'Total';\r\n this.totalTooltip = 'Total reviews assigned to this BR stage'\r\n this.doughnutData.labels = labels;\r\n this.doughnutData.datasets = datasets;\r\n this.doughnutChart?.refresh();\r\n } else if (this.stageTypeName === 'Peer Review') {\r\n // peer review\r\n const labels = ['Submitted', 'In Progress', 'Not Started',];\r\n const datasets = [\r\n {\r\n label: 'Values',\r\n data: [this.stageData.requiredSubmitted, this.stageData.requiredInProgress, this.stageData.requiredNotStarted],\r\n backgroundColor: [...this.colors],\r\n hoverOffset: 4,\r\n }\r\n ]\r\n // check for if the data has value or only 0\r\n // used in showing/hiding the empty state\r\n if (this.stageData.requiredSubmitted > 0 || this.stageData.requiredInProgress > 0 || this.stageData.requiredNotStarted > 0) {\r\n this.doughnutData3HasValue = true;\r\n };\r\n this.total3 = this.stageData.reviewsNeeded;\r\n this.totalWording3 = 'Needed';\r\n this.totalTooltip3 = 'Total needed (required) reviews';\r\n this.doughnutData3.labels = labels;\r\n this.doughnutData3.datasets = datasets;\r\n this.doughnutChart3?.refresh();\r\n } else if (this.stageTypeName === 'Evaluation') {\r\n // evaluation\r\n const labels = ['Submitted', 'In Progress', 'Not Started'];\r\n const datasets = [\r\n {\r\n label: 'Values',\r\n data: [this.stageData.requiredSubmitted, this.stageData.requiredInProgress, this.stageData.requiredNotStarted],\r\n backgroundColor: [...this.colors],\r\n hoverOffset: 4,\r\n }\r\n ]\r\n // check for if the data has value or only 0\r\n // used in showing/hiding the empty state\r\n if (this.stageData.requiredSubmitted > 0 || this.stageData.requiredInProgress > 0 || this.stageData.requiredNotStarted > 0) {\r\n this.doughnutData3HasValue = true;\r\n };\r\n this.total3 = this.stageData.reviewsNeeded;\r\n this.totalWording3 = 'Needed';\r\n this.totalTooltip3 = 'Total needed (required) reviews';\r\n this.doughnutData3.labels = labels;\r\n this.doughnutData3.datasets = datasets;\r\n this.doughnutChart3?.refresh();\r\n }\r\n this.loading = false;\r\n this.failedToLoad = false;\r\n } catch (error) {\r\n this.loading = false;\r\n this.failedToLoad = true;\r\n console.log(error);\r\n }\r\n } else {\r\n // no stage id available\r\n }\r\n }\r\n\r\n reloadWidget() {\r\n this.init();\r\n }\r\n\r\n clickToCopy(stringToCopy: string) {\r\n this.copyToClipboardService.copyToClipboard(stringToCopy);\r\n }\r\n}\r\n","\r\n \r\n \r\n","import { Component, ElementRef, Input, OnInit, ViewChild, ViewEncapsulation } from \"@angular/core\";\r\nimport { atcb_action } from \"add-to-calendar-button\";\r\nimport { DateTime, Duration } from \"luxon\";\r\nimport { DashboardWidget, WidgetTimelineSlide } from \"src/app/shared/model/dashboard-config.model\";\r\nimport { PublicConfigService } from \"src/app/shared/services/public.config.service\";\r\nimport { StorageService } from \"src/app/shared/services/storage.service\";\r\nimport { WidgetsService } from \"src/app/shared/services/widgets.service\";\r\n\r\n@Component({\r\n selector: 'widget-timeline',\r\n templateUrl: './widget-timeline.component.html',\r\n styleUrls: ['./widget-timeline.component.scss'],\r\n encapsulation: ViewEncapsulation.None\r\n})\r\nexport class WidgetTimelineComponent implements OnInit {\r\n @Input() widgetConfig: DashboardWidget;\r\n\r\n @ViewChild('timeline') timeline: ElementRef;\r\n\r\n loading: boolean = true;\r\n\r\n FEUrl: string;\r\n timelineSlides: WidgetTimelineSlide[] = [];\r\n\r\n nowISO: string = DateTime.fromJSDate(new Date()).setZone(\"UTC\").toISO();\r\n \r\n competitionName: string;\r\n competitionTimeZoneDatabaseName: string;\r\n\r\n firstSlideIndex: number = 0;\r\n activeSlideIndex: number = 0;\r\n timelineMilestoneBarPosition: number = 0;\r\n\r\n upToDateStages: any[] = [];\r\n\r\n failedToLoad: boolean = false;\r\n \r\n constructor(\r\n private storage: StorageService,\r\n private publicConfig: PublicConfigService,\r\n private widgetService: WidgetsService\r\n ) { }\r\n\r\n async ngOnInit() {\r\n this.init();\r\n };\r\n\r\n async init() {\r\n this.FEUrl = this.publicConfig.feBaseUrl;\r\n\r\n // getting competition properties used in add to calendar\r\n const competitionName = this.storage.retrieve('competitionName');\r\n if ((competitionName !== '') && (competitionName !== null)) {\r\n this.competitionName = competitionName;\r\n } else {\r\n this.competitionName = 'Carrot Platform 2.0';\r\n }\r\n const competitionTimeZoneDatabaseNameFromStorage = this.storage.retrieve('competitionTimeZoneDatabaseName');\r\n if ((competitionTimeZoneDatabaseNameFromStorage !== '') && (competitionTimeZoneDatabaseNameFromStorage !== null)) {\r\n this.competitionTimeZoneDatabaseName = competitionTimeZoneDatabaseNameFromStorage;\r\n } else {\r\n this.competitionTimeZoneDatabaseName = 'Etc/GMT';\r\n }\r\n\r\n // fix for wrong config - if timelineSlides array is missing\r\n this.timelineSlides = this.widgetConfig.widgetSettings.timelineSlides;\r\n if (!this.timelineSlides) {\r\n this.timelineSlides = [];\r\n }\r\n\r\n // pulling latest data for actual stages\r\n const stageIds = this.timelineSlides.filter(element => element.stageId !== '0').map(element => {return element.stageId});\r\n try {\r\n const resp: any = await this.widgetService.getTimelineStagesData(stageIds).toPromise();\r\n this.upToDateStages = resp.data;\r\n\r\n // local vars for first and last milestone and total distance between them (time, in seconds)\r\n let firstMilestone: DateTime;\r\n let lastMilestone: DateTime;\r\n let timelineDistanceTotal: number;\r\n\r\n if (this.timelineSlides.length > 0) {\r\n // if there is more than 1 slide compile the local vars\r\n firstMilestone = DateTime.fromISO(this.timelineSlides[0].endDate);\r\n lastMilestone = DateTime.fromISO(this.timelineSlides[this.timelineSlides.length - 1].endDate);\r\n timelineDistanceTotal = lastMilestone.diff(firstMilestone, 'seconds').toObject().seconds;\r\n // apply styles for first and last milestone\r\n this.timelineSlides[0].milestonePositionInPercent = 0;\r\n this.timelineSlides[this.timelineSlides.length - 1].milestonePositionInPercent = 100;\r\n };\r\n\r\n this.timelineSlides.forEach((element, index) => {\r\n // add element specific property for tracking index in template\r\n element.index = index;\r\n // this is used to update the stages with the new data from API\r\n let updatedStage: any = null;\r\n if (element.stageId !== '0') {\r\n updatedStage = this.upToDateStages.find(stage => stage.id === element.stageId);\r\n if (updatedStage) {\r\n element.endDate = updatedStage.endDate;\r\n element.title = updatedStage.name;\r\n }\r\n }\r\n // get slide end date (and time)\r\n // it's important to map the end date coming from RP as UTC zone, otherwise the user's timezone is attached to it\r\n // as if it was in the user's timezone instead of UTC\r\n const slideEndDate = DateTime.fromISO(element.endDate, {zone: 'UTC'});\r\n\r\n // define all milestones as not passed - will be updated later (this is here to avoid repetition in the code)\r\n element.milestonePassed = false;\r\n\r\n // calculate milestone position on timeline\r\n // for all but the first and the last milestone\r\n if (index > 0 && index < this.timelineSlides.length - 1) {\r\n const slideMilestoneDistanceFromFirst = slideEndDate.diff(firstMilestone, 'seconds').toObject().seconds;\r\n const slideMilestonePosition = (slideMilestoneDistanceFromFirst / timelineDistanceTotal) * 100;\r\n element.milestonePositionInPercent = slideMilestonePosition;\r\n // below is a fix for cases of overlapping milestones\r\n if (element.milestonePositionInPercent - this.timelineSlides[index -1].milestonePositionInPercent < 5) {\r\n element.milestonePositionInPercent = element.milestonePositionInPercent + (5 - (element.milestonePositionInPercent - this.timelineSlides[index -1].milestonePositionInPercent));\r\n }\r\n }\r\n\r\n // edge case fix for the last date of the timeline when there are overlapping dates at the end\r\n if (this.timelineSlides.length > 2 && index === this.timelineSlides.length - 2) {\r\n if (this.timelineSlides[this.timelineSlides.length - 1].milestonePositionInPercent - element.milestonePositionInPercent < 5) {\r\n this.timelineSlides[this.timelineSlides.length - 1].milestonePositionInPercent = this.timelineSlides[this.timelineSlides.length - 1].milestonePositionInPercent + (5 - (this.timelineSlides[this.timelineSlides.length - 1].milestonePositionInPercent - element.milestonePositionInPercent));\r\n };\r\n };\r\n\r\n // calculate difference to current time (negative number if end date has passed)\r\n const slideDiffToNow = slideEndDate.diff(DateTime.fromISO(this.nowISO), 'seconds').toObject().seconds;\r\n if (slideDiffToNow > 864000) {\r\n // more than 10 days\r\n element.calculatedCountdownClass = 'green';\r\n // calculating days using luxon's duration\r\n // calculate in milliseconds and then turn them to days and parse the days as integer\r\n const calculatedDays = parseInt(Duration.fromMillis(slideEndDate.diff(DateTime.fromISO(this.nowISO), 'milliseconds').toObject().milliseconds).toFormat('d'));\r\n element.calculatedCountdownText = `${calculatedDays} days left`;\r\n } else if (slideDiffToNow > 432000) {\r\n // between 5 and 10 days\r\n element.calculatedCountdownClass = 'orange';\r\n // calculating days using luxon's duration\r\n // calculate in milliseconds and then turn them to days and parse the days as integer\r\n const calculatedDays = parseInt(Duration.fromMillis(slideEndDate.diff(DateTime.fromISO(this.nowISO), 'milliseconds').toObject().milliseconds).toFormat('d'));\r\n element.calculatedCountdownText = `${calculatedDays} days left`;\r\n } else if (slideDiffToNow > 86400) {\r\n // between 1 and 5 days\r\n element.calculatedCountdownClass = 'red';\r\n // calculating days using luxon's duration\r\n // calculate in milliseconds and then turn them to days and parse the days as integer\r\n const calculatedDays = parseInt(Duration.fromMillis(slideEndDate.diff(DateTime.fromISO(this.nowISO), 'milliseconds').toObject().milliseconds).toFormat('d'));\r\n element.calculatedCountdownText = calculatedDays === 1 ? `${calculatedDays} day left` : `${calculatedDays} days left`;\r\n } else if (slideDiffToNow > 3600) {\r\n // between 1 and 24 hours\r\n element.calculatedCountdownClass = 'red';\r\n const calculatedHours = Math.trunc(slideEndDate.diff(DateTime.fromISO(this.nowISO), 'hours').toObject().hours);\r\n element.calculatedCountdownText = calculatedHours === 1 ? `${calculatedHours} hour left` : `${calculatedHours} hours left`;\r\n } else if (slideDiffToNow > 0) {\r\n // less than 1 hour\r\n element.calculatedCountdownClass = 'red';\r\n element.calculatedCountdownText = `Less than 1h left`;\r\n } else {\r\n // passed\r\n element.calculatedCountdownClass = 'hidden';\r\n element.calculatedCountdownText = `${slideDiffToNow}`;\r\n // if this slide end date has passed, update first slide index and add style for passed milestone\r\n this.firstSlideIndex++;\r\n element.milestonePassed = true;\r\n };\r\n\r\n // prepare proper values for add to calendar button\r\n // this is needed to have the deadline appear as an event with duration of one hour\r\n const slideEndDateMinusOneHour = slideEndDate.minus(3600000);\r\n element.calculatedAddToCalendarStartDate = slideEndDateMinusOneHour.toISODate();\r\n element.calculatedAddToCalendarStartTime = slideEndDateMinusOneHour.toISOTime({includeOffset: false, suppressSeconds: true, suppressMilliseconds: true});\r\n element.calculatedAddToCalendarEndDate = slideEndDate.toISODate();\r\n element.calculatedAddToCalendarEndTime = slideEndDate.toISOTime({includeOffset: false, suppressSeconds: true, suppressMilliseconds: true});\r\n });\r\n\r\n // adjusting initial position of the timeline bar\r\n if (this.timelineSlides[this.firstSlideIndex]) {\r\n this.timelineMilestoneBarPosition = this.timelineSlides[this.firstSlideIndex].milestonePositionInPercent;\r\n };\r\n // adjusting initial active milestone\r\n this.activeSlideIndex = this.firstSlideIndex;\r\n\r\n this.loading = false;\r\n this.failedToLoad = false;\r\n } catch (error) {\r\n this.loading = false;\r\n this.failedToLoad = true;\r\n console.log(error);\r\n }\r\n }\r\n\r\n addToCalendarClick(slide: WidgetTimelineSlide) {\r\n const config: Object = {\r\n name: `${this.competitionName} ${slide.title} Deadline`,\r\n startDate: `${slide.calculatedAddToCalendarStartDate}`,\r\n startTime: `${slide.calculatedAddToCalendarStartTime}`,\r\n endDate: `${slide.calculatedAddToCalendarEndDate}`,\r\n endTime: `${slide.calculatedAddToCalendarEndTime}`,\r\n options: [\"Google\", \"Apple\", \"Microsoft365\", \"Outlook.com\", \"MicrosoftTeams\", \"Yahoo\", \"iCal\"],\r\n timeZone: `${this.competitionTimeZoneDatabaseName}`\r\n };\r\n\r\n // passed element is needed for autofocus to work after closing the add to calendar modal\r\n const button: HTMLElement = document.getElementById(`add-to-calendar-${slide.title}`);\r\n atcb_action(config, button);\r\n }\r\n\r\n onSlideChange(event: any) {\r\n this.activeSlideIndex = event.page;\r\n this.timelineMilestoneBarPosition = this.timelineSlides[this.activeSlideIndex].milestonePositionInPercent;\r\n }\r\n\r\n slidePrev() {\r\n this.timeline.nativeElement.querySelector('.p-carousel-prev').click();\r\n }\r\n\r\n slideNext() {\r\n this.timeline.nativeElement.querySelector('.p-carousel-next').click();\r\n }\r\n\r\n reloadWidget() {\r\n this.init();\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\n\r\nimport { SharedModule } from '../shared/shared.module';\r\nimport { WidgetFormComponent } from './widget-form/widget-form.component';\r\nimport { WidgetForumsComponent } from './widget-forums/widget-forums.component';\r\nimport { WidgetNewsComponent } from './widget-news/widget-news.component';\r\nimport { WidgetTimelineComponent } from './widget-timeline/widget-timeline.component';\r\nimport { WidgetPeerReviewComponent } from './widget-peer-review/widget-peer-review.component';\r\nimport { WidgetAdminReviewComponent } from './widget-admin-review/widget-admin-review.component';\r\nimport { WidgetEvaluationParticipantComponent } from './widget-evaluation-participant/widget-evaluation-participant.component';\r\nimport { WidgetContent1Component } from './widget-content-1/widget-content-1.component';\r\nimport { WidgetContent2Component } from './widget-content-2/widget-content-2.component';\r\nimport { WidgetEvaluationJudgeComponent } from './widget-evaluation-judge/widget-evaluation-judge.component';\r\nimport 'add-to-calendar-button';\r\nimport { WidgetAccountsComponent } from './widget-accounts/widget-accounts.component';\r\nimport { WidgetFormStatsComponent } from './widget-form-stats/widget-form-stats.component';\r\nimport { ChartModule } from 'primeng/chart';\r\nimport { Chart } from \"chart.js\";\r\nimport ChartDataLabels from \"chartjs-plugin-datalabels\";\r\nimport { WidgetStageCountersComponent } from './widget-stage-counters/widget-stage-counters.component';\r\n\r\n@NgModule({\r\n declarations: [\r\n WidgetFormComponent,\r\n WidgetForumsComponent,\r\n WidgetNewsComponent,\r\n WidgetTimelineComponent,\r\n WidgetPeerReviewComponent,\r\n WidgetAdminReviewComponent,\r\n WidgetEvaluationParticipantComponent,\r\n WidgetEvaluationJudgeComponent,\r\n WidgetContent1Component,\r\n WidgetContent2Component,\r\n WidgetAccountsComponent,\r\n WidgetFormStatsComponent,\r\n WidgetStageCountersComponent,\r\n ],\r\n imports: [\r\n CommonModule,\r\n SharedModule,\r\n ChartModule,\r\n ],\r\n exports: [\r\n WidgetFormComponent,\r\n WidgetForumsComponent,\r\n WidgetNewsComponent,\r\n WidgetTimelineComponent,\r\n WidgetPeerReviewComponent,\r\n WidgetAdminReviewComponent,\r\n WidgetEvaluationParticipantComponent,\r\n WidgetEvaluationJudgeComponent,\r\n WidgetContent1Component,\r\n WidgetContent2Component,\r\n WidgetAccountsComponent,\r\n WidgetFormStatsComponent,\r\n WidgetStageCountersComponent,\r\n ]\r\n})\r\nexport class WidgetsModule {\r\n constructor() {\r\n Chart.register(ChartDataLabels);\r\n }\r\n}\r\n","import * as i0 from '@angular/core';\nimport { InjectionToken, Directive, Inject, Optional, booleanAttribute, TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ContentChild, ViewChild, inject, ElementRef, EventEmitter, ANIMATION_MODULE_TYPE, numberAttribute, Output, ContentChildren, forwardRef, QueryList, Attribute, NgModule } from '@angular/core';\nimport { MatRipple, MAT_RIPPLE_GLOBAL_OPTIONS, MatCommonModule } from '@angular/material/core';\nimport { CdkPortal, TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';\nimport { Subject, fromEvent, of, merge, EMPTY, Observable, timer, Subscription, BehaviorSubject } from 'rxjs';\nimport * as i1 from '@angular/cdk/scrolling';\nimport { CdkScrollable } from '@angular/cdk/scrolling';\nimport * as i3 from '@angular/cdk/platform';\nimport { normalizePassiveListenerOptions, Platform } from '@angular/cdk/platform';\nimport * as i2 from '@angular/cdk/bidi';\nimport * as i4 from '@angular/cdk/a11y';\nimport { FocusKeyManager, CdkMonitorFocus } from '@angular/cdk/a11y';\nimport { hasModifierKey, SPACE, ENTER } from '@angular/cdk/keycodes';\nimport { takeUntil, take, startWith, switchMap, skip, filter, distinctUntilChanged } from 'rxjs/operators';\nimport { CdkObserveContent } from '@angular/cdk/observers';\nimport { DOCUMENT } from '@angular/common';\nimport { trigger, state, style, transition, animate } from '@angular/animations';\n\n/**\n * Injection token that can be used to reference instances of `MatTabContent`. It serves as\n * alternative token to the actual `MatTabContent` class which could cause unnecessary\n * retention of the class and its directive metadata.\n */\nconst MAT_TAB_CONTENT = new InjectionToken('MatTabContent');\n/** Decorates the `ng-template` tags and reads out the template from it. */\nclass MatTabContent {\n constructor(/** Content for the tab. */ template) {\n this.template = template;\n }\n static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"17.2.0\", ngImport: i0, type: MatTabContent, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }\n static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"17.2.0\", type: MatTabContent, isStandalone: true, selector: \"[matTabContent]\", providers: [{ provide: MAT_TAB_CONTENT, useExisting: MatTabContent }], ngImport: i0 }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"17.2.0\", ngImport: i0, type: MatTabContent, decorators: [{\n type: Directive,\n args: [{\n selector: '[matTabContent]',\n providers: [{ provide: MAT_TAB_CONTENT, useExisting: MatTabContent }],\n standalone: true,\n }]\n }], ctorParameters: () => [{ type: i0.TemplateRef }] });\n\n/**\n * Injection token that can be used to reference instances of `MatTabLabel`. It serves as\n * alternative token to the actual `MatTabLabel` class which could cause unnecessary\n * retention of the class and its directive metadata.\n */\nconst MAT_TAB_LABEL = new InjectionToken('MatTabLabel');\n/**\n * Used to provide a tab label to a tab without causing a circular dependency.\n * @docs-private\n */\nconst MAT_TAB = new InjectionToken('MAT_TAB');\n/** Used to flag tab labels for use with the portal directive */\nclass MatTabLabel extends CdkPortal {\n constructor(templateRef, viewContainerRef, _closestTab) {\n super(templateRef, viewContainerRef);\n this._closestTab = _closestTab;\n }\n static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"17.2.0\", ngImport: i0, type: MatTabLabel, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: MAT_TAB, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }\n static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"17.2.0\", type: MatTabLabel, isStandalone: true, selector: \"[mat-tab-label], [matTabLabel]\", providers: [{ provide: MAT_TAB_LABEL, useExisting: MatTabLabel }], usesInheritance: true, ngImport: i0 }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"17.2.0\", ngImport: i0, type: MatTabLabel, decorators: [{\n type: Directive,\n args: [{\n selector: '[mat-tab-label], [matTabLabel]',\n providers: [{ provide: MAT_TAB_LABEL, useExisting: MatTabLabel }],\n standalone: true,\n }]\n }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{\n type: Inject,\n args: [MAT_TAB]\n }, {\n type: Optional\n }] }] });\n\n/**\n * Used to provide a tab group to a tab without causing a circular dependency.\n * @docs-private\n */\nconst MAT_TAB_GROUP = new InjectionToken('MAT_TAB_GROUP');\nclass MatTab {\n /** Content for the tab label given by `\r\n
\r\nNot connected to a stage
\r\n\r\n 0\" class=\"default-state\">\r\n \r\n {{ roundTime(timeLeftToStart) }} {{ timeLeftString }}\r\n \r\n
\r\n\r\n \r\n {{ roundTime(timeLeftToStart) }} {{ timeLeftString }}\r\n \r\n \r\n\r\n
\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n \r\n
\r\n\r\n \r\n {{ completedReviews }}\r\n OUT OF {{ neededReviews }}\r\n
\r\n\r\n \\n
\\n \\n\\n\\n\\n\\n\", styles: [\".mat-mdc-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mdc-tab-indicator .mdc-tab-indicator__content{transition-duration:var(--mat-tab-animation-duration, 250ms)}.mat-mdc-tab-header-pagination{-webkit-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:none;box-sizing:content-box;background:none;border:none;outline:0;padding:0}.mat-mdc-tab-header-pagination::-moz-focus-inner{border:0}.mat-mdc-tab-header-pagination .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-header-inactive-ripple-color)}.mat-mdc-tab-header-pagination-controls-enabled .mat-mdc-tab-header-pagination{display:flex}.mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after{padding-left:4px}.mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(-135deg)}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-pagination-after{padding-right:4px}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(45deg)}.mat-mdc-tab-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;height:8px;width:8px;border-color:var(--mat-tab-header-pagination-icon-color)}.mat-mdc-tab-header-pagination-disabled{box-shadow:none;cursor:default;pointer-events:none}.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron{opacity:.4}.mat-mdc-tab-list{flex-grow:1;position:relative;transition:transform 500ms cubic-bezier(0.35, 0, 0.25, 1)}._mat-animation-noopable .mat-mdc-tab-list{transition:none}._mat-animation-noopable span.mdc-tab-indicator__content,._mat-animation-noopable span.mdc-tab__text-label{transition:none}.mat-mdc-tab-label-container{display:flex;flex-grow:1;overflow:hidden;z-index:1;border-bottom-style:solid;border-bottom-width:var(--mat-tab-header-divider-height);border-bottom-color:var(--mat-tab-header-divider-color)}.mat-mdc-tab-group-inverted-header .mat-mdc-tab-label-container{border-bottom:none;border-top-style:solid;border-top-width:var(--mat-tab-header-divider-height);border-top-color:var(--mat-tab-header-divider-color)}.mat-mdc-tab-labels{display:flex;flex:1 0 auto}[mat-align-tabs=center]>.mat-mdc-tab-header .mat-mdc-tab-labels{justify-content:center}[mat-align-tabs=end]>.mat-mdc-tab-header .mat-mdc-tab-labels{justify-content:flex-end}.mat-mdc-tab::before{margin:5px}.cdk-high-contrast-active .mat-mdc-tab[aria-disabled=true]{color:GrayText}\"], dependencies: [{ kind: \"directive\", type: MatRipple, selector: \"[mat-ripple], [matRipple]\", inputs: [\"matRippleColor\", \"matRippleUnbounded\", \"matRippleCentered\", \"matRippleRadius\", \"matRippleAnimation\", \"matRippleDisabled\", \"matRippleTrigger\"], exportAs: [\"matRipple\"] }, { kind: \"directive\", type: CdkObserveContent, selector: \"[cdkObserveContent]\", inputs: [\"cdkObserveContentDisabled\", \"debounce\"], outputs: [\"cdkObserveContent\"], exportAs: [\"cdkObserveContent\"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"17.2.0\", ngImport: i0, type: MatTabHeader, decorators: [{\n type: Component,\n args: [{ selector: 'mat-tab-header', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, host: {\n 'class': 'mat-mdc-tab-header',\n '[class.mat-mdc-tab-header-pagination-controls-enabled]': '_showPaginationControls',\n '[class.mat-mdc-tab-header-rtl]': \"_getLayoutDirection() == 'rtl'\",\n }, standalone: true, imports: [MatRipple, CdkObserveContent], template: \"\\n\\n\\n\\n
\\n \\n\\n\\n\\n\\n\", styles: [\".mat-mdc-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mdc-tab-indicator .mdc-tab-indicator__content{transition-duration:var(--mat-tab-animation-duration, 250ms)}.mat-mdc-tab-header-pagination{-webkit-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:none;box-sizing:content-box;background:none;border:none;outline:0;padding:0}.mat-mdc-tab-header-pagination::-moz-focus-inner{border:0}.mat-mdc-tab-header-pagination .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-header-inactive-ripple-color)}.mat-mdc-tab-header-pagination-controls-enabled .mat-mdc-tab-header-pagination{display:flex}.mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after{padding-left:4px}.mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(-135deg)}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-pagination-after{padding-right:4px}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(45deg)}.mat-mdc-tab-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;height:8px;width:8px;border-color:var(--mat-tab-header-pagination-icon-color)}.mat-mdc-tab-header-pagination-disabled{box-shadow:none;cursor:default;pointer-events:none}.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron{opacity:.4}.mat-mdc-tab-list{flex-grow:1;position:relative;transition:transform 500ms cubic-bezier(0.35, 0, 0.25, 1)}._mat-animation-noopable .mat-mdc-tab-list{transition:none}._mat-animation-noopable span.mdc-tab-indicator__content,._mat-animation-noopable span.mdc-tab__text-label{transition:none}.mat-mdc-tab-label-container{display:flex;flex-grow:1;overflow:hidden;z-index:1;border-bottom-style:solid;border-bottom-width:var(--mat-tab-header-divider-height);border-bottom-color:var(--mat-tab-header-divider-color)}.mat-mdc-tab-group-inverted-header .mat-mdc-tab-label-container{border-bottom:none;border-top-style:solid;border-top-width:var(--mat-tab-header-divider-height);border-top-color:var(--mat-tab-header-divider-color)}.mat-mdc-tab-labels{display:flex;flex:1 0 auto}[mat-align-tabs=center]>.mat-mdc-tab-header .mat-mdc-tab-labels{justify-content:center}[mat-align-tabs=end]>.mat-mdc-tab-header .mat-mdc-tab-labels{justify-content:flex-end}.mat-mdc-tab::before{margin:5px}.cdk-high-contrast-active .mat-mdc-tab[aria-disabled=true]{color:GrayText}\"] }]\n }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ViewportRuler }, { type: i2.Directionality, decorators: [{\n type: Optional\n }] }, { type: i0.NgZone }, { type: i3.Platform }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [ANIMATION_MODULE_TYPE]\n }] }], propDecorators: { _items: [{\n type: ContentChildren,\n args: [MatTabLabelWrapper, { descendants: false }]\n }], _tabListContainer: [{\n type: ViewChild,\n args: ['tabListContainer', { static: true }]\n }], _tabList: [{\n type: ViewChild,\n args: ['tabList', { static: true }]\n }], _tabListInner: [{\n type: ViewChild,\n args: ['tabListInner', { static: true }]\n }], _nextPaginator: [{\n type: ViewChild,\n args: ['nextPaginator']\n }], _previousPaginator: [{\n type: ViewChild,\n args: ['previousPaginator']\n }], disableRipple: [{\n type: Input,\n args: [{ transform: booleanAttribute }]\n }] } });\n\n/** Injection token that can be used to provide the default options the tabs module. */\nconst MAT_TABS_CONFIG = new InjectionToken('MAT_TABS_CONFIG');\n\n/**\n * Animations used by the Material tabs.\n * @docs-private\n */\nconst matTabsAnimations = {\n /** Animation translates a tab along the X axis. */\n translateTab: trigger('translateTab', [\n // Transitions to `none` instead of 0, because some browsers might blur the content.\n state('center, void, left-origin-center, right-origin-center', style({ transform: 'none' })),\n // If the tab is either on the left or right, we additionally add a `min-height` of 1px\n // in order to ensure that the element has a height before its state changes. This is\n // necessary because Chrome does seem to skip the transition in RTL mode if the element does\n // not have a static height and is not rendered. See related issue: #9465\n state('left', style({\n transform: 'translate3d(-100%, 0, 0)',\n minHeight: '1px',\n // Normally this is redundant since we detach the content from the DOM, but if the user\n // opted into keeping the content in the DOM, we have to hide it so it isn't focusable.\n visibility: 'hidden',\n })),\n state('right', style({\n transform: 'translate3d(100%, 0, 0)',\n minHeight: '1px',\n visibility: 'hidden',\n })),\n transition('* => left, * => right, left => center, right => center', animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)')),\n transition('void => left-origin-center', [\n style({ transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden' }),\n animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)'),\n ]),\n transition('void => right-origin-center', [\n style({ transform: 'translate3d(100%, 0, 0)', visibility: 'hidden' }),\n animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)'),\n ]),\n ]),\n};\n\n/**\n * The portal host directive for the contents of the tab.\n * @docs-private\n */\nclass MatTabBodyPortal extends CdkPortalOutlet {\n constructor(componentFactoryResolver, viewContainerRef, _host, _document) {\n super(componentFactoryResolver, viewContainerRef, _document);\n this._host = _host;\n /** Subscription to events for when the tab body begins centering. */\n this._centeringSub = Subscription.EMPTY;\n /** Subscription to events for when the tab body finishes leaving from center position. */\n this._leavingSub = Subscription.EMPTY;\n }\n /** Set initial visibility or set up subscription for changing visibility. */\n ngOnInit() {\n super.ngOnInit();\n this._centeringSub = this._host._beforeCentering\n .pipe(startWith(this._host._isCenterPosition(this._host._position)))\n .subscribe((isCentering) => {\n if (isCentering && !this.hasAttached()) {\n this.attach(this._host._content);\n }\n });\n this._leavingSub = this._host._afterLeavingCenter.subscribe(() => {\n if (!this._host.preserveContent) {\n this.detach();\n }\n });\n }\n /** Clean up centering subscription. */\n ngOnDestroy() {\n super.ngOnDestroy();\n this._centeringSub.unsubscribe();\n this._leavingSub.unsubscribe();\n }\n static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"17.2.0\", ngImport: i0, type: MatTabBodyPortal, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: forwardRef(() => MatTabBody) }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }\n static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"17.2.0\", type: MatTabBodyPortal, isStandalone: true, selector: \"[matTabBodyHost]\", usesInheritance: true, ngImport: i0 }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"17.2.0\", ngImport: i0, type: MatTabBodyPortal, decorators: [{\n type: Directive,\n args: [{\n selector: '[matTabBodyHost]',\n standalone: true,\n }]\n }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: MatTabBody, decorators: [{\n type: Inject,\n args: [forwardRef(() => MatTabBody)]\n }] }, { type: undefined, decorators: [{\n type: Inject,\n args: [DOCUMENT]\n }] }] });\n/**\n * Wrapper for the contents of a tab.\n * @docs-private\n */\nclass MatTabBody {\n /** The shifted index position of the tab body, where zero represents the active center tab. */\n set position(position) {\n this._positionIndex = position;\n this._computePositionAnimationState();\n }\n constructor(_elementRef, _dir, changeDetectorRef) {\n this._elementRef = _elementRef;\n this._dir = _dir;\n /** Subscription to the directionality change observable. */\n this._dirChangeSubscription = Subscription.EMPTY;\n /** Emits when an animation on the tab is complete. */\n this._translateTabComplete = new Subject();\n /** Event emitted when the tab begins to animate towards the center as the active tab. */\n this._onCentering = new EventEmitter();\n /** Event emitted before the centering of the tab begins. */\n this._beforeCentering = new EventEmitter();\n /** Event emitted before the centering of the tab begins. */\n this._afterLeavingCenter = new EventEmitter();\n /** Event emitted when the tab completes its animation towards the center. */\n this._onCentered = new EventEmitter(true);\n // Note that the default value will always be overwritten by `MatTabBody`, but we need one\n // anyway to prevent the animations module from throwing an error if the body is used on its own.\n /** Duration for the tab's animation. */\n this.animationDuration = '500ms';\n /** Whether the tab's content should be kept in the DOM while it's off-screen. */\n this.preserveContent = false;\n if (_dir) {\n this._dirChangeSubscription = _dir.change.subscribe((dir) => {\n this._computePositionAnimationState(dir);\n changeDetectorRef.markForCheck();\n });\n }\n // Ensure that we get unique animation events, because the `.done` callback can get\n // invoked twice in some browsers. See https://github.com/angular/angular/issues/24084.\n this._translateTabComplete\n .pipe(distinctUntilChanged((x, y) => {\n return x.fromState === y.fromState && x.toState === y.toState;\n }))\n .subscribe(event => {\n // If the transition to the center is complete, emit an event.\n if (this._isCenterPosition(event.toState) && this._isCenterPosition(this._position)) {\n this._onCentered.emit();\n }\n if (this._isCenterPosition(event.fromState) && !this._isCenterPosition(this._position)) {\n this._afterLeavingCenter.emit();\n }\n });\n }\n /**\n * After initialized, check if the content is centered and has an origin. If so, set the\n * special position states that transition the tab from the left or right before centering.\n */\n ngOnInit() {\n if (this._position == 'center' && this.origin != null) {\n this._position = this._computePositionFromOrigin(this.origin);\n }\n }\n ngOnDestroy() {\n this._dirChangeSubscription.unsubscribe();\n this._translateTabComplete.complete();\n }\n _onTranslateTabStarted(event) {\n const isCentering = this._isCenterPosition(event.toState);\n this._beforeCentering.emit(isCentering);\n if (isCentering) {\n this._onCentering.emit(this._elementRef.nativeElement.clientHeight);\n }\n }\n /** The text direction of the containing app. */\n _getLayoutDirection() {\n return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';\n }\n /** Whether the provided position state is considered center, regardless of origin. */\n _isCenterPosition(position) {\n return (position == 'center' || position == 'left-origin-center' || position == 'right-origin-center');\n }\n /** Computes the position state that will be used for the tab-body animation trigger. */\n _computePositionAnimationState(dir = this._getLayoutDirection()) {\n if (this._positionIndex < 0) {\n this._position = dir == 'ltr' ? 'left' : 'right';\n }\n else if (this._positionIndex > 0) {\n this._position = dir == 'ltr' ? 'right' : 'left';\n }\n else {\n this._position = 'center';\n }\n }\n /**\n * Computes the position state based on the specified origin position. This is used if the\n * tab is becoming visible immediately after creation.\n */\n _computePositionFromOrigin(origin) {\n const dir = this._getLayoutDirection();\n if ((dir == 'ltr' && origin <= 0) || (dir == 'rtl' && origin > 0)) {\n return 'left-origin-center';\n }\n return 'right-origin-center';\n }\n static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"17.2.0\", ngImport: i0, type: MatTabBody, deps: [{ token: i0.ElementRef }, { token: i2.Directionality, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }\n static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"14.0.0\", version: \"17.2.0\", type: MatTabBody, isStandalone: true, selector: \"mat-tab-body\", inputs: { _content: [\"content\", \"_content\"], origin: \"origin\", animationDuration: \"animationDuration\", preserveContent: \"preserveContent\", position: \"position\" }, outputs: { _onCentering: \"_onCentering\", _beforeCentering: \"_beforeCentering\", _afterLeavingCenter: \"_afterLeavingCenter\", _onCentered: \"_onCentered\" }, host: { classAttribute: \"mat-mdc-tab-body\" }, viewQueries: [{ propertyName: \"_portalHost\", first: true, predicate: CdkPortalOutlet, descendants: true }], ngImport: i0, template: \"\\n
\\n\", styles: [\".mat-mdc-tab-body{top:0;left:0;right:0;bottom:0;position:absolute;display:block;overflow:hidden;outline:0;flex-basis:100%}.mat-mdc-tab-body.mat-mdc-tab-body-active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.mat-mdc-tab-group.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body.mat-mdc-tab-body-active{overflow-y:hidden}.mat-mdc-tab-body-content{height:100%;overflow:auto}.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body-content{overflow:hidden}.mat-mdc-tab-body-content[style*=\\\"visibility: hidden\\\"]{display:none}\"], dependencies: [{ kind: \"directive\", type: MatTabBodyPortal, selector: \"[matTabBodyHost]\" }, { kind: \"directive\", type: CdkScrollable, selector: \"[cdk-scrollable], [cdkScrollable]\" }], animations: [matTabsAnimations.translateTab], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"17.2.0\", ngImport: i0, type: MatTabBody, decorators: [{\n type: Component,\n args: [{ selector: 'mat-tab-body', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, animations: [matTabsAnimations.translateTab], host: {\n 'class': 'mat-mdc-tab-body',\n }, standalone: true, imports: [MatTabBodyPortal, CdkScrollable], template: \"\\n
\\n\", styles: [\".mat-mdc-tab-body{top:0;left:0;right:0;bottom:0;position:absolute;display:block;overflow:hidden;outline:0;flex-basis:100%}.mat-mdc-tab-body.mat-mdc-tab-body-active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.mat-mdc-tab-group.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body.mat-mdc-tab-body-active{overflow-y:hidden}.mat-mdc-tab-body-content{height:100%;overflow:auto}.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body-content{overflow:hidden}.mat-mdc-tab-body-content[style*=\\\"visibility: hidden\\\"]{display:none}\"] }]\n }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2.Directionality, decorators: [{\n type: Optional\n }] }, { type: i0.ChangeDetectorRef }], propDecorators: { _onCentering: [{\n type: Output\n }], _beforeCentering: [{\n type: Output\n }], _afterLeavingCenter: [{\n type: Output\n }], _onCentered: [{\n type: Output\n }], _portalHost: [{\n type: ViewChild,\n args: [CdkPortalOutlet]\n }], _content: [{\n type: Input,\n args: ['content']\n }], origin: [{\n type: Input\n }], animationDuration: [{\n type: Input\n }], preserveContent: [{\n type: Input\n }], position: [{\n type: Input\n }] } });\n\n/** Used to generate unique ID's for each tab component */\nlet nextId = 0;\n/** Boolean constant that determines whether the tab group supports the `backgroundColor` input */\nconst ENABLE_BACKGROUND_INPUT = true;\n/**\n * Material design tab-group component. Supports basic tab pairs (label + content) and includes\n * animated ink-bar, keyboard navigation, and screen reader.\n * See: https://material.io/design/components/tabs.html\n */\nclass MatTabGroup {\n /** Whether the ink bar should fit its width to the size of the tab label content. */\n get fitInkBarToContent() {\n return this._fitInkBarToContent;\n }\n set fitInkBarToContent(value) {\n this._fitInkBarToContent = value;\n this._changeDetectorRef.markForCheck();\n }\n /** The index of the active tab. */\n get selectedIndex() {\n return this._selectedIndex;\n }\n set selectedIndex(value) {\n this._indexToSelect = isNaN(value) ? null : value;\n }\n /** Duration for the tab animation. Will be normalized to milliseconds if no units are set. */\n get animationDuration() {\n return this._animationDuration;\n }\n set animationDuration(value) {\n const stringValue = value + '';\n this._animationDuration = /^\\d+$/.test(stringValue) ? value + 'ms' : stringValue;\n }\n /**\n * `tabindex` to be set on the inner element that wraps the tab content. Can be used for improved\n * accessibility when the tab does not have focusable elements or if it has scrollable content.\n * The `tabindex` will be removed automatically for inactive tabs.\n * Read more at https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html\n */\n get contentTabIndex() {\n return this._contentTabIndex;\n }\n set contentTabIndex(value) {\n this._contentTabIndex = isNaN(value) ? null : value;\n }\n /**\n * Background color of the tab group.\n * @deprecated The background color should be customized through Sass theming APIs.\n * @breaking-change 20.0.0 Remove this input\n */\n get backgroundColor() {\n return this._backgroundColor;\n }\n set backgroundColor(value) {\n if (!ENABLE_BACKGROUND_INPUT) {\n throw new Error(`mat-tab-group background color must be set through the Sass theming API`);\n }\n const classList = this._elementRef.nativeElement.classList;\n classList.remove('mat-tabs-with-background', `mat-background-${this.backgroundColor}`);\n if (value) {\n classList.add('mat-tabs-with-background', `mat-background-${value}`);\n }\n this._backgroundColor = value;\n }\n constructor(_elementRef, _changeDetectorRef, defaultConfig, _animationMode) {\n this._elementRef = _elementRef;\n this._changeDetectorRef = _changeDetectorRef;\n this._animationMode = _animationMode;\n /** All of the tabs that belong to the group. */\n this._tabs = new QueryList();\n /** The tab index that should be selected after the content has been checked. */\n this._indexToSelect = 0;\n /** Index of the tab that was focused last. */\n this._lastFocusedTabIndex = null;\n /** Snapshot of the height of the tab body wrapper before another tab is activated. */\n this._tabBodyWrapperHeight = 0;\n /** Subscription to tabs being added/removed. */\n this._tabsSubscription = Subscription.EMPTY;\n /** Subscription to changes in the tab labels. */\n this._tabLabelSubscription = Subscription.EMPTY;\n this._fitInkBarToContent = false;\n /** Whether tabs should be stretched to fill the header. */\n this.stretchTabs = true;\n /** Whether the tab group should grow to the size of the active tab. */\n this.dynamicHeight = false;\n this._selectedIndex = null;\n /** Position of the tab header. */\n this.headerPosition = 'above';\n /**\n * Whether pagination should be disabled. This can be used to avoid unnecessary\n * layout recalculations if it's known that pagination won't be required.\n */\n this.disablePagination = false;\n /** Whether ripples in the tab group are disabled. */\n this.disableRipple = false;\n /**\n * By default tabs remove their content from the DOM while it's off-screen.\n * Setting this to `true` will keep it in the DOM which will prevent elements\n * like iframes and videos from reloading next time it comes back into the view.\n */\n this.preserveContent = false;\n /** Output to enable support for two-way binding on `[(selectedIndex)]` */\n this.selectedIndexChange = new EventEmitter();\n /** Event emitted when focus has changed within a tab group. */\n this.focusChange = new EventEmitter();\n /** Event emitted when the body animation has completed */\n this.animationDone = new EventEmitter();\n /** Event emitted when the tab selection has changed. */\n this.selectedTabChange = new EventEmitter(true);\n /** Whether the tab group is rendered on the server. */\n this._isServer = !inject(Platform).isBrowser;\n this._groupId = nextId++;\n this.animationDuration =\n defaultConfig && defaultConfig.animationDuration ? defaultConfig.animationDuration : '500ms';\n this.disablePagination =\n defaultConfig && defaultConfig.disablePagination != null\n ? defaultConfig.disablePagination\n : false;\n this.dynamicHeight =\n defaultConfig && defaultConfig.dynamicHeight != null ? defaultConfig.dynamicHeight : false;\n if (defaultConfig?.contentTabIndex != null) {\n this.contentTabIndex = defaultConfig.contentTabIndex;\n }\n this.preserveContent = !!defaultConfig?.preserveContent;\n this.fitInkBarToContent =\n defaultConfig && defaultConfig.fitInkBarToContent != null\n ? defaultConfig.fitInkBarToContent\n : false;\n this.stretchTabs =\n defaultConfig && defaultConfig.stretchTabs != null ? defaultConfig.stretchTabs : true;\n }\n /**\n * After the content is checked, this component knows what tabs have been defined\n * and what the selected index should be. This is where we can know exactly what position\n * each tab should be in according to the new selected index, and additionally we know how\n * a new selected tab should transition in (from the left or right).\n */\n ngAfterContentChecked() {\n // Don't clamp the `indexToSelect` immediately in the setter because it can happen that\n // the amount of tabs changes before the actual change detection runs.\n const indexToSelect = (this._indexToSelect = this._clampTabIndex(this._indexToSelect));\n // If there is a change in selected index, emit a change event. Should not trigger if\n // the selected index has not yet been initialized.\n if (this._selectedIndex != indexToSelect) {\n const isFirstRun = this._selectedIndex == null;\n if (!isFirstRun) {\n this.selectedTabChange.emit(this._createChangeEvent(indexToSelect));\n // Preserve the height so page doesn't scroll up during tab change.\n // Fixes https://stackblitz.com/edit/mat-tabs-scroll-page-top-on-tab-change\n const wrapper = this._tabBodyWrapper.nativeElement;\n wrapper.style.minHeight = wrapper.clientHeight + 'px';\n }\n // Changing these values after change detection has run\n // since the checked content may contain references to them.\n Promise.resolve().then(() => {\n this._tabs.forEach((tab, index) => (tab.isActive = index === indexToSelect));\n if (!isFirstRun) {\n this.selectedIndexChange.emit(indexToSelect);\n // Clear the min-height, this was needed during tab change to avoid\n // unnecessary scrolling.\n this._tabBodyWrapper.nativeElement.style.minHeight = '';\n }\n });\n }\n // Setup the position for each tab and optionally setup an origin on the next selected tab.\n this._tabs.forEach((tab, index) => {\n tab.position = index - indexToSelect;\n // If there is already a selected tab, then set up an origin for the next selected tab\n // if it doesn't have one already.\n if (this._selectedIndex != null && tab.position == 0 && !tab.origin) {\n tab.origin = indexToSelect - this._selectedIndex;\n }\n });\n if (this._selectedIndex !== indexToSelect) {\n this._selectedIndex = indexToSelect;\n this._lastFocusedTabIndex = null;\n this._changeDetectorRef.markForCheck();\n }\n }\n ngAfterContentInit() {\n this._subscribeToAllTabChanges();\n this._subscribeToTabLabels();\n // Subscribe to changes in the amount of tabs, in order to be\n // able to re-render the content as new tabs are added or removed.\n this._tabsSubscription = this._tabs.changes.subscribe(() => {\n const indexToSelect = this._clampTabIndex(this._indexToSelect);\n // Maintain the previously-selected tab if a new tab is added or removed and there is no\n // explicit change that selects a different tab.\n if (indexToSelect === this._selectedIndex) {\n const tabs = this._tabs.toArray();\n let selectedTab;\n for (let i = 0; i < tabs.length; i++) {\n if (tabs[i].isActive) {\n // Assign both to the `_indexToSelect` and `_selectedIndex` so we don't fire a changed\n // event, otherwise the consumer may end up in an infinite loop in some edge cases like\n // adding a tab within the `selectedIndexChange` event.\n this._indexToSelect = this._selectedIndex = i;\n this._lastFocusedTabIndex = null;\n selectedTab = tabs[i];\n break;\n }\n }\n // If we haven't found an active tab and a tab exists at the selected index, it means\n // that the active tab was swapped out. Since this won't be picked up by the rendering\n // loop in `ngAfterContentChecked`, we need to sync it up manually.\n if (!selectedTab && tabs[indexToSelect]) {\n Promise.resolve().then(() => {\n tabs[indexToSelect].isActive = true;\n this.selectedTabChange.emit(this._createChangeEvent(indexToSelect));\n });\n }\n }\n this._changeDetectorRef.markForCheck();\n });\n }\n /** Listens to changes in all of the tabs. */\n _subscribeToAllTabChanges() {\n // Since we use a query with `descendants: true` to pick up the tabs, we may end up catching\n // some that are inside of nested tab groups. We filter them out manually by checking that\n // the closest group to the tab is the current one.\n this._allTabs.changes.pipe(startWith(this._allTabs)).subscribe((tabs) => {\n this._tabs.reset(tabs.filter(tab => {\n return tab._closestTabGroup === this || !tab._closestTabGroup;\n }));\n this._tabs.notifyOnChanges();\n });\n }\n ngOnDestroy() {\n this._tabs.destroy();\n this._tabsSubscription.unsubscribe();\n this._tabLabelSubscription.unsubscribe();\n }\n /** Re-aligns the ink bar to the selected tab element. */\n realignInkBar() {\n if (this._tabHeader) {\n this._tabHeader._alignInkBarToSelectedTab();\n }\n }\n /**\n * Recalculates the tab group's pagination dimensions.\n *\n * WARNING: Calling this method can be very costly in terms of performance. It should be called\n * as infrequently as possible from outside of the Tabs component as it causes a reflow of the\n * page.\n */\n updatePagination() {\n if (this._tabHeader) {\n this._tabHeader.updatePagination();\n }\n }\n /**\n * Sets focus to a particular tab.\n * @param index Index of the tab to be focused.\n */\n focusTab(index) {\n const header = this._tabHeader;\n if (header) {\n header.focusIndex = index;\n }\n }\n _focusChanged(index) {\n this._lastFocusedTabIndex = index;\n this.focusChange.emit(this._createChangeEvent(index));\n }\n _createChangeEvent(index) {\n const event = new MatTabChangeEvent();\n event.index = index;\n if (this._tabs && this._tabs.length) {\n event.tab = this._tabs.toArray()[index];\n }\n return event;\n }\n /**\n * Subscribes to changes in the tab labels. This is needed, because the @Input for the label is\n * on the MatTab component, whereas the data binding is inside the MatTabGroup. In order for the\n * binding to be updated, we need to subscribe to changes in it and trigger change detection\n * manually.\n */\n _subscribeToTabLabels() {\n if (this._tabLabelSubscription) {\n this._tabLabelSubscription.unsubscribe();\n }\n this._tabLabelSubscription = merge(...this._tabs.map(tab => tab._stateChanges)).subscribe(() => this._changeDetectorRef.markForCheck());\n }\n /** Clamps the given index to the bounds of 0 and the tabs length. */\n _clampTabIndex(index) {\n // Note the `|| 0`, which ensures that values like NaN can't get through\n // and which would otherwise throw the component into an infinite loop\n // (since Math.max(NaN, 0) === NaN).\n return Math.min(this._tabs.length - 1, Math.max(index || 0, 0));\n }\n /** Returns a unique id for each tab label element */\n _getTabLabelId(i) {\n return `mat-tab-label-${this._groupId}-${i}`;\n }\n /** Returns a unique id for each tab content element */\n _getTabContentId(i) {\n return `mat-tab-content-${this._groupId}-${i}`;\n }\n /**\n * Sets the height of the body wrapper to the height of the activating tab if dynamic\n * height property is true.\n */\n _setTabBodyWrapperHeight(tabHeight) {\n if (!this.dynamicHeight || !this._tabBodyWrapperHeight) {\n return;\n }\n const wrapper = this._tabBodyWrapper.nativeElement;\n wrapper.style.height = this._tabBodyWrapperHeight + 'px';\n // This conditional forces the browser to paint the height so that\n // the animation to the new height can have an origin.\n if (this._tabBodyWrapper.nativeElement.offsetHeight) {\n wrapper.style.height = tabHeight + 'px';\n }\n }\n /** Removes the height of the tab body wrapper. */\n _removeTabBodyWrapperHeight() {\n const wrapper = this._tabBodyWrapper.nativeElement;\n this._tabBodyWrapperHeight = wrapper.clientHeight;\n wrapper.style.height = '';\n this.animationDone.emit();\n }\n /** Handle click events, setting new selected index if appropriate. */\n _handleClick(tab, tabHeader, index) {\n tabHeader.focusIndex = index;\n if (!tab.disabled) {\n this.selectedIndex = index;\n }\n }\n /** Retrieves the tabindex for the tab. */\n _getTabIndex(index) {\n const targetIndex = this._lastFocusedTabIndex ?? this.selectedIndex;\n return index === targetIndex ? 0 : -1;\n }\n /** Callback for when the focused state of a tab has changed. */\n _tabFocusChanged(focusOrigin, index) {\n // Mouse/touch focus happens during the `mousedown`/`touchstart` phase which\n // can cause the tab to be moved out from under the pointer, interrupting the\n // click sequence (see #21898). We don't need to scroll the tab into view for\n // such cases anyway, because it will be done when the tab becomes selected.\n if (focusOrigin && focusOrigin !== 'mouse' && focusOrigin !== 'touch') {\n this._tabHeader.focusIndex = index;\n }\n }\n static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"17.2.0\", ngImport: i0, type: MatTabGroup, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: MAT_TABS_CONFIG, optional: true }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }\n static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"17.0.0\", version: \"17.2.0\", type: MatTabGroup, isStandalone: true, selector: \"mat-tab-group\", inputs: { color: \"color\", fitInkBarToContent: [\"fitInkBarToContent\", \"fitInkBarToContent\", booleanAttribute], stretchTabs: [\"mat-stretch-tabs\", \"stretchTabs\", booleanAttribute], dynamicHeight: [\"dynamicHeight\", \"dynamicHeight\", booleanAttribute], selectedIndex: [\"selectedIndex\", \"selectedIndex\", numberAttribute], headerPosition: \"headerPosition\", animationDuration: \"animationDuration\", contentTabIndex: [\"contentTabIndex\", \"contentTabIndex\", numberAttribute], disablePagination: [\"disablePagination\", \"disablePagination\", booleanAttribute], disableRipple: [\"disableRipple\", \"disableRipple\", booleanAttribute], preserveContent: [\"preserveContent\", \"preserveContent\", booleanAttribute], backgroundColor: \"backgroundColor\" }, outputs: { selectedIndexChange: \"selectedIndexChange\", focusChange: \"focusChange\", animationDone: \"animationDone\", selectedTabChange: \"selectedTabChange\" }, host: { properties: { \"class\": \"\\\"mat-\\\" + (color || \\\"primary\\\")\", \"class.mat-mdc-tab-group-dynamic-height\": \"dynamicHeight\", \"class.mat-mdc-tab-group-inverted-header\": \"headerPosition === \\\"below\\\"\", \"class.mat-mdc-tab-group-stretch-tabs\": \"stretchTabs\", \"style.--mat-tab-animation-duration\": \"animationDuration\" }, classAttribute: \"mat-mdc-tab-group\" }, providers: [\n {\n provide: MAT_TAB_GROUP,\n useExisting: MatTabGroup,\n },\n ], queries: [{ propertyName: \"_allTabs\", predicate: MatTab, descendants: true }], viewQueries: [{ propertyName: \"_tabBodyWrapper\", first: true, predicate: [\"tabBodyWrapper\"], descendants: true }, { propertyName: \"_tabHeader\", first: true, predicate: [\"tabHeader\"], descendants: true }], exportAs: [\"matTabGroup\"], ngImport: i0, template: \"\\n \\n\\n \\n
\\n\\n \\n \\n \\n @if (tab.templateLabel) {\\n \\n \\n\\n \\n
\\n\\n \\n \\n \\n @if (tab.templateLabel) {\\n \\n
\\n\\n\\n\\n\", styles: [\".mdc-tab{min-width:90px;padding-right:24px;padding-left:24px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;margin:0;padding-top:0;padding-bottom:0;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;-webkit-appearance:none;z-index:1}.mdc-tab::-moz-focus-inner{padding:0;border:0}.mdc-tab[hidden]{display:none}.mdc-tab--min-width{flex:0 1 auto}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab__icon{transition:150ms color linear;z-index:2}.mdc-tab--stacked .mdc-tab__content{flex-direction:column;align-items:center;justify-content:center}.mdc-tab--stacked .mdc-tab__text-label{padding-top:6px;padding-bottom:4px}.mdc-tab--active .mdc-tab__text-label,.mdc-tab--active .mdc-tab__icon{transition-delay:100ms}.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label{padding-left:8px;padding-right:0}[dir=rtl] .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label,.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label[dir=rtl]{padding-left:0;padding-right:8px}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator__content--icon{align-self:center;margin:0 auto}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}.mdc-tab-indicator .mdc-tab-indicator__content{transition:250ms transform cubic-bezier(0.4, 0, 0.2, 1)}.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition:150ms opacity linear}.mdc-tab-indicator--active.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition-delay:100ms}.mat-mdc-tab-ripple{position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none}.mat-mdc-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mdc-tab-indicator .mdc-tab-indicator__content{transition-duration:var(--mat-tab-animation-duration, 250ms)}.mat-mdc-tab-header-pagination{-webkit-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:none;box-sizing:content-box;background:none;border:none;outline:0;padding:0}.mat-mdc-tab-header-pagination::-moz-focus-inner{border:0}.mat-mdc-tab-header-pagination .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-header-inactive-ripple-color)}.mat-mdc-tab-header-pagination-controls-enabled .mat-mdc-tab-header-pagination{display:flex}.mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after{padding-left:4px}.mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(-135deg)}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-pagination-after{padding-right:4px}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(45deg)}.mat-mdc-tab-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;height:8px;width:8px;border-color:var(--mat-tab-header-pagination-icon-color)}.mat-mdc-tab-header-pagination-disabled{box-shadow:none;cursor:default;pointer-events:none}.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron{opacity:.4}.mat-mdc-tab-list{flex-grow:1;position:relative;transition:transform 500ms cubic-bezier(0.35, 0, 0.25, 1)}._mat-animation-noopable .mat-mdc-tab-list{transition:none}._mat-animation-noopable span.mdc-tab-indicator__content,._mat-animation-noopable span.mdc-tab__text-label{transition:none}.mat-mdc-tab-links{display:flex;flex:1 0 auto}[mat-align-tabs=center]>.mat-mdc-tab-link-container .mat-mdc-tab-links{justify-content:center}[mat-align-tabs=end]>.mat-mdc-tab-link-container .mat-mdc-tab-links{justify-content:flex-end}.mat-mdc-tab-link-container{display:flex;flex-grow:1;overflow:hidden;z-index:1;border-bottom-style:solid;border-bottom-width:var(--mat-tab-header-divider-height);border-bottom-color:var(--mat-tab-header-divider-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination{background-color:var(--mat-tab-header-with-background-background-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background.mat-primary>.mat-mdc-tab-link-container .mat-mdc-tab-link .mdc-tab__text-label{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background.mat-primary>.mat-mdc-tab-link-container .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-link-container .mat-mdc-tab-link:not(.mdc-tab--active) .mdc-tab__text-label{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-link-container .mat-mdc-tab-link:not(.mdc-tab--active) .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-mdc-focus-indicator::before,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-focus-indicator::before{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-ripple-element,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mdc-tab__ripple::before,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-ripple-element,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mdc-tab__ripple::before{background-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron{color:var(--mat-tab-header-with-background-foreground-color)}\"], dependencies: [{ kind: \"directive\", type: MatRipple, selector: \"[mat-ripple], [matRipple]\", inputs: [\"matRippleColor\", \"matRippleUnbounded\", \"matRippleCentered\", \"matRippleRadius\", \"matRippleAnimation\", \"matRippleDisabled\", \"matRippleTrigger\"], exportAs: [\"matRipple\"] }, { kind: \"directive\", type: CdkObserveContent, selector: \"[cdkObserveContent]\", inputs: [\"cdkObserveContentDisabled\", \"debounce\"], outputs: [\"cdkObserveContent\"], exportAs: [\"cdkObserveContent\"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"17.2.0\", ngImport: i0, type: MatTabNav, decorators: [{\n type: Component,\n args: [{ selector: '[mat-tab-nav-bar]', exportAs: 'matTabNavBar, matTabNav', host: {\n '[attr.role]': '_getRole()',\n 'class': 'mat-mdc-tab-nav-bar mat-mdc-tab-header',\n '[class.mat-mdc-tab-header-pagination-controls-enabled]': '_showPaginationControls',\n '[class.mat-mdc-tab-header-rtl]': \"_getLayoutDirection() == 'rtl'\",\n '[class.mat-mdc-tab-nav-bar-stretch-tabs]': 'stretchTabs',\n '[class.mat-primary]': 'color !== \"warn\" && color !== \"accent\"',\n '[class.mat-accent]': 'color === \"accent\"',\n '[class.mat-warn]': 'color === \"warn\"',\n '[class._mat-animation-noopable]': '_animationMode === \"NoopAnimations\"',\n '[style.--mat-tab-animation-duration]': 'animationDuration',\n }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, standalone: true, imports: [MatRipple, CdkObserveContent], template: \"\\n\\n\\n\\n
\\n\\n
\\n \\n
\\n\\n\\n\\n\", styles: [\".mdc-tab{min-width:90px;padding-right:24px;padding-left:24px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;margin:0;padding-top:0;padding-bottom:0;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;-webkit-appearance:none;z-index:1}.mdc-tab::-moz-focus-inner{padding:0;border:0}.mdc-tab[hidden]{display:none}.mdc-tab--min-width{flex:0 1 auto}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab__icon{transition:150ms color linear;z-index:2}.mdc-tab--stacked .mdc-tab__content{flex-direction:column;align-items:center;justify-content:center}.mdc-tab--stacked .mdc-tab__text-label{padding-top:6px;padding-bottom:4px}.mdc-tab--active .mdc-tab__text-label,.mdc-tab--active .mdc-tab__icon{transition-delay:100ms}.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label{padding-left:8px;padding-right:0}[dir=rtl] .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label,.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label[dir=rtl]{padding-left:0;padding-right:8px}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator__content--icon{align-self:center;margin:0 auto}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}.mdc-tab-indicator .mdc-tab-indicator__content{transition:250ms transform cubic-bezier(0.4, 0, 0.2, 1)}.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition:150ms opacity linear}.mdc-tab-indicator--active.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition-delay:100ms}.mat-mdc-tab-ripple{position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none}.mat-mdc-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mdc-tab-indicator .mdc-tab-indicator__content{transition-duration:var(--mat-tab-animation-duration, 250ms)}.mat-mdc-tab-header-pagination{-webkit-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:none;box-sizing:content-box;background:none;border:none;outline:0;padding:0}.mat-mdc-tab-header-pagination::-moz-focus-inner{border:0}.mat-mdc-tab-header-pagination .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-header-inactive-ripple-color)}.mat-mdc-tab-header-pagination-controls-enabled .mat-mdc-tab-header-pagination{display:flex}.mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after{padding-left:4px}.mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(-135deg)}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-pagination-after{padding-right:4px}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(45deg)}.mat-mdc-tab-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;height:8px;width:8px;border-color:var(--mat-tab-header-pagination-icon-color)}.mat-mdc-tab-header-pagination-disabled{box-shadow:none;cursor:default;pointer-events:none}.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron{opacity:.4}.mat-mdc-tab-list{flex-grow:1;position:relative;transition:transform 500ms cubic-bezier(0.35, 0, 0.25, 1)}._mat-animation-noopable .mat-mdc-tab-list{transition:none}._mat-animation-noopable span.mdc-tab-indicator__content,._mat-animation-noopable span.mdc-tab__text-label{transition:none}.mat-mdc-tab-links{display:flex;flex:1 0 auto}[mat-align-tabs=center]>.mat-mdc-tab-link-container .mat-mdc-tab-links{justify-content:center}[mat-align-tabs=end]>.mat-mdc-tab-link-container .mat-mdc-tab-links{justify-content:flex-end}.mat-mdc-tab-link-container{display:flex;flex-grow:1;overflow:hidden;z-index:1;border-bottom-style:solid;border-bottom-width:var(--mat-tab-header-divider-height);border-bottom-color:var(--mat-tab-header-divider-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination{background-color:var(--mat-tab-header-with-background-background-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background.mat-primary>.mat-mdc-tab-link-container .mat-mdc-tab-link .mdc-tab__text-label{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background.mat-primary>.mat-mdc-tab-link-container .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-link-container .mat-mdc-tab-link:not(.mdc-tab--active) .mdc-tab__text-label{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-link-container .mat-mdc-tab-link:not(.mdc-tab--active) .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-mdc-focus-indicator::before,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-focus-indicator::before{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-ripple-element,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mdc-tab__ripple::before,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-ripple-element,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mdc-tab__ripple::before{background-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron{color:var(--mat-tab-header-with-background-foreground-color)}\"] }]\n }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2.Directionality, decorators: [{\n type: Optional\n }] }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1.ViewportRuler }, { type: i3.Platform }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [ANIMATION_MODULE_TYPE]\n }] }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [MAT_TABS_CONFIG]\n }] }], propDecorators: { fitInkBarToContent: [{\n type: Input,\n args: [{ transform: booleanAttribute }]\n }], stretchTabs: [{\n type: Input,\n args: [{ alias: 'mat-stretch-tabs', transform: booleanAttribute }]\n }], animationDuration: [{\n type: Input\n }], _items: [{\n type: ContentChildren,\n args: [forwardRef(() => MatTabLink), { descendants: true }]\n }], backgroundColor: [{\n type: Input\n }], disableRipple: [{\n type: Input,\n args: [{ transform: booleanAttribute }]\n }], color: [{\n type: Input\n }], tabPanel: [{\n type: Input\n }], _tabListContainer: [{\n type: ViewChild,\n args: ['tabListContainer', { static: true }]\n }], _tabList: [{\n type: ViewChild,\n args: ['tabList', { static: true }]\n }], _tabListInner: [{\n type: ViewChild,\n args: ['tabListInner', { static: true }]\n }], _nextPaginator: [{\n type: ViewChild,\n args: ['nextPaginator']\n }], _previousPaginator: [{\n type: ViewChild,\n args: ['previousPaginator']\n }] } });\n/**\n * Link inside a `mat-tab-nav-bar`.\n */\nclass MatTabLink extends InkBarItem {\n /** Whether the link is active. */\n get active() {\n return this._isActive;\n }\n set active(value) {\n if (value !== this._isActive) {\n this._isActive = value;\n this._tabNavBar.updateActiveLink();\n }\n }\n /**\n * Whether ripples are disabled on interaction.\n * @docs-private\n */\n get rippleDisabled() {\n return (this.disabled ||\n this.disableRipple ||\n this._tabNavBar.disableRipple ||\n !!this.rippleConfig.disabled);\n }\n constructor(_tabNavBar, \n /** @docs-private */ elementRef, globalRippleOptions, tabIndex, _focusMonitor, animationMode) {\n super();\n this._tabNavBar = _tabNavBar;\n this.elementRef = elementRef;\n this._focusMonitor = _focusMonitor;\n this._destroyed = new Subject();\n /** Whether the tab link is active or not. */\n this._isActive = false;\n /** Whether the tab link is disabled. */\n this.disabled = false;\n /** Whether ripples are disabled on the tab link. */\n this.disableRipple = false;\n this.tabIndex = 0;\n /** Unique id for the tab. */\n this.id = `mat-tab-link-${nextUniqueId++}`;\n this.rippleConfig = globalRippleOptions || {};\n this.tabIndex = parseInt(tabIndex) || 0;\n if (animationMode === 'NoopAnimations') {\n this.rippleConfig.animation = { enterDuration: 0, exitDuration: 0 };\n }\n _tabNavBar._fitInkBarToContent\n .pipe(takeUntil(this._destroyed))\n .subscribe(fitInkBarToContent => {\n this.fitInkBarToContent = fitInkBarToContent;\n });\n }\n /** Focuses the tab link. */\n focus() {\n this.elementRef.nativeElement.focus();\n }\n ngAfterViewInit() {\n this._focusMonitor.monitor(this.elementRef);\n }\n ngOnDestroy() {\n this._destroyed.next();\n this._destroyed.complete();\n super.ngOnDestroy();\n this._focusMonitor.stopMonitoring(this.elementRef);\n }\n _handleFocus() {\n // Since we allow navigation through tabbing in the nav bar, we\n // have to update the focused index whenever the link receives focus.\n this._tabNavBar.focusIndex = this._tabNavBar._items.toArray().indexOf(this);\n }\n _handleKeydown(event) {\n if (event.keyCode === SPACE || event.keyCode === ENTER) {\n if (this.disabled) {\n event.preventDefault();\n }\n else if (this._tabNavBar.tabPanel) {\n // Only prevent the default action on space since it can scroll the page.\n // Don't prevent enter since it can break link navigation.\n if (event.keyCode === SPACE) {\n event.preventDefault();\n }\n this.elementRef.nativeElement.click();\n }\n }\n }\n _getAriaControls() {\n return this._tabNavBar.tabPanel\n ? this._tabNavBar.tabPanel?.id\n : this.elementRef.nativeElement.getAttribute('aria-controls');\n }\n _getAriaSelected() {\n if (this._tabNavBar.tabPanel) {\n return this.active ? 'true' : 'false';\n }\n else {\n return this.elementRef.nativeElement.getAttribute('aria-selected');\n }\n }\n _getAriaCurrent() {\n return this.active && !this._tabNavBar.tabPanel ? 'page' : null;\n }\n _getRole() {\n return this._tabNavBar.tabPanel ? 'tab' : this.elementRef.nativeElement.getAttribute('role');\n }\n _getTabIndex() {\n if (this._tabNavBar.tabPanel) {\n return this._isActive && !this.disabled ? 0 : -1;\n }\n else {\n return this.disabled ? -1 : this.tabIndex;\n }\n }\n static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"17.2.0\", ngImport: i0, type: MatTabLink, deps: [{ token: MatTabNav }, { token: i0.ElementRef }, { token: MAT_RIPPLE_GLOBAL_OPTIONS, optional: true }, { token: 'tabindex', attribute: true }, { token: i4.FocusMonitor }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }\n static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"16.1.0\", version: \"17.2.0\", type: MatTabLink, isStandalone: true, selector: \"[mat-tab-link], [matTabLink]\", inputs: { active: [\"active\", \"active\", booleanAttribute], disabled: [\"disabled\", \"disabled\", booleanAttribute], disableRipple: [\"disableRipple\", \"disableRipple\", booleanAttribute], tabIndex: [\"tabIndex\", \"tabIndex\", (value) => (value == null ? 0 : numberAttribute(value))], id: \"id\" }, host: { listeners: { \"focus\": \"_handleFocus()\", \"keydown\": \"_handleKeydown($event)\" }, properties: { \"attr.aria-controls\": \"_getAriaControls()\", \"attr.aria-current\": \"_getAriaCurrent()\", \"attr.aria-disabled\": \"disabled\", \"attr.aria-selected\": \"_getAriaSelected()\", \"attr.id\": \"id\", \"attr.tabIndex\": \"_getTabIndex()\", \"attr.role\": \"_getRole()\", \"class.mat-mdc-tab-disabled\": \"disabled\", \"class.mdc-tab--active\": \"active\" }, classAttribute: \"mdc-tab mat-mdc-tab-link mat-mdc-focus-indicator\" }, exportAs: [\"matTabLink\"], usesInheritance: true, ngImport: i0, template: \"\\n\\n\\n
\\n\\n
\\n
\r\n- {{ reason.title }}
\r\n
\r\n