@testgorilla/tgo-ui 11.22.2 → 12.0.0

package/fesm2022/testgorilla-tgo-ui-components-gaussian-chart.mjs

@@ -1,306 +1,402 @@
-import { NgTemplateOutlet, NgClass, AsyncPipe, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Input, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
-import gaussian from 'gaussian';
-import { BaseChartDirective } from 'ng2-charts';
-import { Color, UiTranslatePipe, MemoizeFuncPipe } from '@testgorilla/tgo-ui/components/core';
-import * as i1 from '@testgorilla/tgo-ui/components/icon';
-import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
-import { Chart, registerables } from 'chart.js';
-
+import { AsyncPipe, CommonModule, NgClass, NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Input, NgModule } from "@angular/core";
+import { MatTooltip, MatTooltipModule } from "@angular/material/tooltip";
+import gaussian from "gaussian";
+import { BaseChartDirective } from "ng2-charts";
+import { Color, MemoizeFuncPipe, UiTranslatePipe } from "@testgorilla/tgo-ui/components/core";
+import * as i1 from "@testgorilla/tgo-ui/components/icon";
+import { IconComponentModule } from "@testgorilla/tgo-ui/components/icon";
+import { Chart, registerables } from "chart.js";
 const PercentileThreshold = {
-    LOWEST: 20,
-    LOWER: 40,
-    AVERAGE: 60,
-    HIGHER: 80,
-    HIGHEST: 100,
+	LOWEST: 20,
+	LOWER: 40,
+	AVERAGE: 60,
+	HIGHER: 80,
+	HIGHEST: 100
 };
-class GaussianChartComponent {
-    constructor() {
-        /**
-         *
-         * Defines the application theme
-         *
-         * @type {ApplicationTheme}
-         * @memberof SpinnerComponent
-         */
-        this.applicationTheme = 'light';
-        /**
-         * Controls the position of the legend relative to the chart.
-         * @type {LegendPosition}
-         * @memberof GaussianChartComponent
-         */
-        this.legendPosition = 'bottom-start';
-        this.minXValue = -3;
-        this.maxXValue = 3;
-        this.minYValue = 0;
-        this.stepSize = 0.1;
-        this.pointsToSkip = 2;
-        this.actualMinXvalue = this.minXValue + this.pointsToSkip * this.stepSize;
-        this.actualMaxXvalue = this.maxXValue - this.pointsToSkip * this.stepSize;
-        this.normalContainerPadding = 50; //in px
-        this.bestScoreThreshold = 92;
-        this.bestScoreSpacingRight = '4px';
-        this.bestScoreSpacingLeft = '-39px';
-        this.PercentileThreshold = PercentileThreshold;
-        this.gaussianChartData = {
-            labels: [],
-            datasets: [],
-        };
-        this.translationContext = 'CHARTS.GAUSSIAN_CHART.';
-    }
-    ngOnInit() {
-        if (this.score === undefined || this.score === null) {
-            throw new Error('Input "score" is required for GaussianChartComponent.');
-        }
-        if (this.bestCandidateScore === undefined || this.bestCandidateScore === null) {
-            throw new Error('Input "bestCandidateScore" is required for GaussianChartComponent.');
-        }
-        this.setActiveBucket();
-        this.gaussianDistribution = gaussian(0, 1);
-        this.maxYValue = this.gaussianDistribution.pdf(0);
-        this.setOverlayValues();
-        this.setOverlayValuesForBestScore();
-        this.setChartData();
-        this.setChartOptions();
-    }
-    setChartData() {
-        const xValues = [];
-        const yValues = [];
-        const labels = this.generateLabels(this.minXValue, this.maxXValue, this.stepSize);
-        for (let x = this.minXValue; x < this.maxXValue + this.stepSize; x = Number((x + this.stepSize).toFixed(2))) {
-            xValues.push(x);
-            yValues.push(this.gaussianDistribution.pdf(x));
-        }
-        this.gaussianChartData = {
-            labels,
-            datasets: this.generateDataset(yValues),
-        };
-    }
-    setChartOptions() {
-        this.gaussianChartOptions = {
-            responsive: true,
-            maintainAspectRatio: false,
-            scales: this.getScale(),
-            plugins: {
-                // To be used only for dev purpose
-                // tooltip: this.getTooltip(),
-                // Comment the below line if you enable the call for tooltip
-                tooltip: {
-                    enabled: false,
-                },
-                legend: {
-                    display: false,
-                },
-            },
-        };
-    }
-    getTooltip() {
-        return {
-            intersect: false,
-            mode: 'nearest',
-            displayColors: false,
-            callbacks: {
-                label: (tooltipItem) => {
-                    const value = (this.gaussianDistribution.cdf(parseFloat(tooltipItem.label)) * 100).toFixed(2);
-                    return `${value}%`;
-                },
-                title: () => '', // Disable the default title
-            },
-        };
-    }
-    getScale() {
-        return {
-            x: {
-                display: false,
-                grid: {
-                    display: false, // Disable grid lines for x-axis
-                },
-            },
-            y: {
-                display: false,
-                grid: {
-                    display: false, // Disable grid lines for y-axis
-                },
-            },
-        };
-    }
-    generateDataset(yValues) {
-        return [
-            {
-                data: [
-                    ...yValues.slice(0, this.pointsToSkip),
-                    ...Array(yValues.length - this.pointsToSkip).fill(null),
-                ],
-                label: '',
-                borderColor: this.activeBucket === PercentileThreshold.LOWEST ? Color.ACCENT_20 : Color.TGO_WHITE,
-                borderWidth: 2,
-                pointRadius: 0,
-                fill: false,
-            },
-            {
-                data: [
-                    ...Array(this.pointsToSkip).fill(null),
-                    ...yValues.slice(this.pointsToSkip, yValues.length - this.pointsToSkip),
-                    ...Array(this.pointsToSkip).fill(null),
-                ],
-                label: '',
-                borderColor: Color.BLACK,
-                borderWidth: 2,
-                pointRadius: 0,
-                fill: false,
-            },
-            {
-                data: [
-                    ...Array(yValues.length - this.pointsToSkip).fill(null),
-                    ...yValues.slice(yValues.length - this.pointsToSkip, yValues.length),
-                ],
-                label: '',
-                borderColor: this.activeBucket === PercentileThreshold.HIGHEST ? Color.ACCENT_20 : Color.TGO_WHITE,
-                borderWidth: 2,
-                pointRadius: 0,
-                fill: false,
-            },
-        ];
-    }
-    generateLabels(min, max, step) {
-        const labels = [];
-        for (let x = min; x < max + step; x = Number((x + step).toFixed(2))) {
-            labels.push(x.toFixed(1));
-        }
-        return labels;
-    }
-    setActiveBucket() {
-        const score = this.score;
-        if (score < PercentileThreshold.LOWEST) {
-            this.activeBucket = PercentileThreshold.LOWEST;
-        }
-        else if (score >= PercentileThreshold.LOWEST && score < PercentileThreshold.LOWER) {
-            this.activeBucket = PercentileThreshold.LOWER;
-        }
-        else if (score >= PercentileThreshold.LOWER && score < PercentileThreshold.AVERAGE) {
-            this.activeBucket = PercentileThreshold.AVERAGE;
-        }
-        else if (score >= PercentileThreshold.AVERAGE && score < PercentileThreshold.HIGHER) {
-            this.activeBucket = PercentileThreshold.HIGHER;
-        }
-        else if (score >= PercentileThreshold.HIGHER) {
-            this.activeBucket = PercentileThreshold.HIGHEST;
-        }
-    }
-    // For more context: https://testgorilla.atlassian.net/wiki/spaces/SR/pages/1813905736/Percentiles+curve+FE+implementation
-    setOverlayValues() {
-        const { overlayXValue, overlayYValue } = this.calculateOverlayValues(this.score);
-        this.overlayXValue = overlayXValue;
-        this.overlayYValue = overlayYValue;
-    }
-    setOverlayValuesForBestScore() {
-        const { overlayXValue, overlayYValue } = this.calculateOverlayValues(this.bestCandidateScore);
-        this.overlayXBestScoreValue = overlayXValue;
-        this.overlayYBestScoreValue = overlayYValue;
-    }
-    calculateOverlayValues(score) {
-        const xValue = this.mapRange(score, 0, 100, this.minXValue, this.maxXValue);
-        const yValue = this.gaussianDistribution.pdf(xValue);
-        let overlayXValue = score;
-        let overlayYValue = this.mapRange(yValue, this.minYValue, this.maxYValue, 0, 100);
-        if (xValue <= this.actualMinXvalue || xValue >= this.actualMaxXvalue) {
-            const xValueExtreme = xValue <= this.actualMinXvalue ? this.actualMinXvalue : this.actualMaxXvalue;
-            const yValueExtreme = this.gaussianDistribution.pdf(xValueExtreme);
-            overlayXValue = this.mapRange(xValueExtreme, this.minXValue, this.maxXValue, 0, 100);
-            overlayYValue = this.mapRange(yValueExtreme, this.minYValue, this.maxYValue, 0, 100);
-        }
-        return { overlayXValue, overlayYValue };
-    }
-    mapRange(value, inMin, inMax, outMin, outMax) {
-        return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
-    }
-    getCalcPosition([percentage, pixels, operation = 'add']) {
-        const operator = operation === 'add' ? '+' : '-';
-        return `calc(${percentage}% ${operator} ${pixels}px)`;
-    }
-    getBestScoreContentPosition(bestScore) {
-        return bestScore < this.bestScoreThreshold ? this.bestScoreSpacingRight : this.bestScoreSpacingLeft;
-    }
-    getScoreTranslationKey(score) {
-        if (score < PercentileThreshold.LOWEST) {
-            return 'PERCENTILE_LABEL_TYPES.WELL_BELOW_AVERAGE';
-        }
-        else if (score >= PercentileThreshold.LOWEST && score < PercentileThreshold.LOWER) {
-            return 'PERCENTILE_LABEL_TYPES.BELOW_AVERAGE';
-        }
-        else if (score >= PercentileThreshold.LOWER && score < PercentileThreshold.AVERAGE) {
-            return 'PERCENTILE_LABEL_TYPES.AVERAGE';
-        }
-        else if (score >= PercentileThreshold.AVERAGE && score < PercentileThreshold.HIGHER) {
-            return 'PERCENTILE_LABEL_TYPES.ABOVE_AVERAGE';
-        }
-        else {
-            return 'PERCENTILE_LABEL_TYPES.WELL_ABOVE_AVERAGE';
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: GaussianChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: GaussianChartComponent, isStandalone: true, selector: "ui-gaussian-chart", inputs: { score: "score", bestCandidateScore: "bestCandidateScore", applicationTheme: "applicationTheme", legendPosition: "legendPosition" }, ngImport: i0, template: "@if (score) {\n  <div\n    class=\"chart-section\"\n    [attr.aria-label]=\"\n      translationContext + 'ARIA_LABEL'\n        | uiTranslate\n          : {\n              score: score,\n              activeBucket: getScoreTranslationKey(score) | uiTranslate | async,\n              bestCandidateScore: bestCandidateScore,\n              activeBucketBestScore: getScoreTranslationKey(bestCandidateScore) | uiTranslate | async,\n            }\n        | async\n    \"\n    tabindex=\"0\"\n  >\n    <!-- Legend positioned at top -->\n    @if (legendPosition === 'top-start' || legendPosition === 'top-end') {\n      <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n    }\n    <div class=\"chart-range-wrapper\">\n      <div class=\"normal-chart-container\">\n        <div class=\"normal-chart\">\n          <canvas baseChart [data]=\"gaussianChartData\" [options]=\"gaussianChartOptions\" type=\"line\" class=\"chart\">\n          </canvas>\n          <div\n            class=\"overlay-icon\"\n            [style.bottom]=\"[overlayYValue, 3, 'subtract'] | memoizeFunc: getCalcPosition\"\n            [style.left]=\"[overlayXValue, 20, 'subtract'] | memoizeFunc: getCalcPosition\"\n          >\n            <div class=\"drop-icon\">\n              <ui-icon name=\"Pin-marker\" size=\"40\"></ui-icon>\n              <span class=\"curve-score\">{{ score }}</span>\n            </div>\n          </div>\n          <div\n            class=\"best-score\"\n            [style.height]=\"\n              [100 - overlayYBestScoreValue, normalContainerPadding, 'add'] | memoizeFunc: getCalcPosition\n            \"\n            [style.bottom]=\"overlayYBestScoreValue + '%'\"\n            [style.left]=\"overlayXBestScoreValue + '%'\"\n          >\n            <div\n              class=\"best-score-content\"\n              [style.left]=\"bestCandidateScore | memoizeFunc: getBestScoreContentPosition : this\"\n            >\n              <ui-icon name=\"Trophy\"></ui-icon>\n              {{ bestCandidateScore }}\n            </div>\n          </div>\n        </div>\n        <div class=\"overlay\">\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWEST\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.LOWEST\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWER\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.LOWER\"\n              [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER_TOOLTIP' | uiTranslate | async) || ''\"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.AVERAGE\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.AVERAGE\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHER\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHER\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHEST\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHEST\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST' | uiTranslate | async }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"range\">\n        <div>1</div>\n        <div>20</div>\n        <div>40</div>\n        <div>60</div>\n        <div>80</div>\n        <div>99</div>\n      </div>\n    </div>\n    <!-- Legend positioned at bottom -->\n    @if (legendPosition === 'bottom-start' || legendPosition === 'bottom-end') {\n      <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n    }\n  </div>\n}\n\n<!-- Reusable legend template -->\n<ng-template #legendTemplate>\n  <div class=\"legend-container\" [ngClass]=\"'legend-' + legendPosition\">\n    <div class=\"legend\">\n      <ui-icon name=\"Dot\" color=\"gray\"></ui-icon>\n      {{ translationContext + 'CANDIDATE_SCORE' | uiTranslate | async }}\n    </div>\n    <div class=\"legend\">\n      <ui-icon name=\"Trophy\" color=\"gray\"></ui-icon>\n      {{ translationContext + 'HIGHEST_SCORE' | uiTranslate | async }}\n    </div>\n  </div>\n</ng-template>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.chart-section{display:flex;flex-direction:column;gap:16px;width:100%}.chart-section .chart-range-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.chart-section .chart-range-wrapper .normal-chart-container{position:relative;padding-bottom:32px;padding-top:50px;border:1px solid #d3d3d3;border-radius:10px;width:100%;height:230px}.chart-section .chart-range-wrapper .normal-chart-container .normal-chart{position:relative;z-index:1;width:100%;height:100%}.chart-section .chart-range-wrapper .normal-chart-container .overlay{position:absolute;top:0;left:0;height:100%;width:100%;display:flex}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column{flex:1;font-size:12px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column .column-item{cursor:pointer}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column:not(:last-child){border-right:1px solid #d3d3d3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active{background-color:#fff5ed;border-bottom:3px solid #242424}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border:none;position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-right:1px solid #d3d3d3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{content:\"\";position:absolute;bottom:0;width:calc(100% - 4px);height:2.5px;background-color:#000}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before{right:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{left:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon{position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon .curve-score{font-size:14px;font-weight:700;position:absolute;width:100%;text-align:center;top:0;left:.5px;padding:4px 4px 9px}.chart-section .chart-range-wrapper .normal-chart-container .best-score{position:absolute;border-left:1px #242424 dashed}.chart-section .chart-range-wrapper .normal-chart-container .best-score .best-score-content{position:absolute;display:flex;gap:3px;align-items:center}.chart-section .chart-range-wrapper .range{display:flex;justify-content:space-between;color:#919191}.chart-section .chart-range-wrapper .range div{width:35px;text-align:center}.chart-section .chart-range-wrapper .range div:nth-child(2){text-align:left}.chart-section .chart-range-wrapper .range div:nth-last-child(2){text-align:right}.chart-section .legend-container{display:flex;gap:16px}.chart-section .legend-container.legend-top-start,.chart-section .legend-container.legend-bottom-start{justify-content:flex-start}.chart-section .legend-container.legend-top-end,.chart-section .legend-container.legend-bottom-end{justify-content:flex-end}.chart-section .legend-container .legend{display:flex;gap:8px;align-items:center;color:#666}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: MemoizeFuncPipe, name: "memoizeFunc" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: GaussianChartComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-gaussian-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgTemplateOutlet,
-                        BaseChartDirective,
-                        IconComponentModule,
-                        MatTooltip,
-                        NgClass,
-                        UiTranslatePipe,
-                        AsyncPipe,
-                        MemoizeFuncPipe,
-                    ], template: "@if (score) {\n  <div\n    class=\"chart-section\"\n    [attr.aria-label]=\"\n      translationContext + 'ARIA_LABEL'\n        | uiTranslate\n          : {\n              score: score,\n              activeBucket: getScoreTranslationKey(score) | uiTranslate | async,\n              bestCandidateScore: bestCandidateScore,\n              activeBucketBestScore: getScoreTranslationKey(bestCandidateScore) | uiTranslate | async,\n            }\n        | async\n    \"\n    tabindex=\"0\"\n  >\n    <!-- Legend positioned at top -->\n    @if (legendPosition === 'top-start' || legendPosition === 'top-end') {\n      <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n    }\n    <div class=\"chart-range-wrapper\">\n      <div class=\"normal-chart-container\">\n        <div class=\"normal-chart\">\n          <canvas baseChart [data]=\"gaussianChartData\" [options]=\"gaussianChartOptions\" type=\"line\" class=\"chart\">\n          </canvas>\n          <div\n            class=\"overlay-icon\"\n            [style.bottom]=\"[overlayYValue, 3, 'subtract'] | memoizeFunc: getCalcPosition\"\n            [style.left]=\"[overlayXValue, 20, 'subtract'] | memoizeFunc: getCalcPosition\"\n          >\n            <div class=\"drop-icon\">\n              <ui-icon name=\"Pin-marker\" size=\"40\"></ui-icon>\n              <span class=\"curve-score\">{{ score }}</span>\n            </div>\n          </div>\n          <div\n            class=\"best-score\"\n            [style.height]=\"\n              [100 - overlayYBestScoreValue, normalContainerPadding, 'add'] | memoizeFunc: getCalcPosition\n            \"\n            [style.bottom]=\"overlayYBestScoreValue + '%'\"\n            [style.left]=\"overlayXBestScoreValue + '%'\"\n          >\n            <div\n              class=\"best-score-content\"\n              [style.left]=\"bestCandidateScore | memoizeFunc: getBestScoreContentPosition : this\"\n            >\n              <ui-icon name=\"Trophy\"></ui-icon>\n              {{ bestCandidateScore }}\n            </div>\n          </div>\n        </div>\n        <div class=\"overlay\">\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWEST\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.LOWEST\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWER\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.LOWER\"\n              [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER_TOOLTIP' | uiTranslate | async) || ''\"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.AVERAGE\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.AVERAGE\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHER\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHER\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHEST\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHEST\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST' | uiTranslate | async }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"range\">\n        <div>1</div>\n        <div>20</div>\n        <div>40</div>\n        <div>60</div>\n        <div>80</div>\n        <div>99</div>\n      </div>\n    </div>\n    <!-- Legend positioned at bottom -->\n    @if (legendPosition === 'bottom-start' || legendPosition === 'bottom-end') {\n      <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n    }\n  </div>\n}\n\n<!-- Reusable legend template -->\n<ng-template #legendTemplate>\n  <div class=\"legend-container\" [ngClass]=\"'legend-' + legendPosition\">\n    <div class=\"legend\">\n      <ui-icon name=\"Dot\" color=\"gray\"></ui-icon>\n      {{ translationContext + 'CANDIDATE_SCORE' | uiTranslate | async }}\n    </div>\n    <div class=\"legend\">\n      <ui-icon name=\"Trophy\" color=\"gray\"></ui-icon>\n      {{ translationContext + 'HIGHEST_SCORE' | uiTranslate | async }}\n    </div>\n  </div>\n</ng-template>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.chart-section{display:flex;flex-direction:column;gap:16px;width:100%}.chart-section .chart-range-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.chart-section .chart-range-wrapper .normal-chart-container{position:relative;padding-bottom:32px;padding-top:50px;border:1px solid #d3d3d3;border-radius:10px;width:100%;height:230px}.chart-section .chart-range-wrapper .normal-chart-container .normal-chart{position:relative;z-index:1;width:100%;height:100%}.chart-section .chart-range-wrapper .normal-chart-container .overlay{position:absolute;top:0;left:0;height:100%;width:100%;display:flex}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column{flex:1;font-size:12px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column .column-item{cursor:pointer}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column:not(:last-child){border-right:1px solid #d3d3d3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active{background-color:#fff5ed;border-bottom:3px solid #242424}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border:none;position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-right:1px solid #d3d3d3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{content:\"\";position:absolute;bottom:0;width:calc(100% - 4px);height:2.5px;background-color:#000}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before{right:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{left:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon{position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon .curve-score{font-size:14px;font-weight:700;position:absolute;width:100%;text-align:center;top:0;left:.5px;padding:4px 4px 9px}.chart-section .chart-range-wrapper .normal-chart-container .best-score{position:absolute;border-left:1px #242424 dashed}.chart-section .chart-range-wrapper .normal-chart-container .best-score .best-score-content{position:absolute;display:flex;gap:3px;align-items:center}.chart-section .chart-range-wrapper .range{display:flex;justify-content:space-between;color:#919191}.chart-section .chart-range-wrapper .range div{width:35px;text-align:center}.chart-section .chart-range-wrapper .range div:nth-child(2){text-align:left}.chart-section .chart-range-wrapper .range div:nth-last-child(2){text-align:right}.chart-section .legend-container{display:flex;gap:16px}.chart-section .legend-container.legend-top-start,.chart-section .legend-container.legend-bottom-start{justify-content:flex-start}.chart-section .legend-container.legend-top-end,.chart-section .legend-container.legend-bottom-end{justify-content:flex-end}.chart-section .legend-container .legend{display:flex;gap:8px;align-items:center;color:#666}\n"] }]
-        }], propDecorators: { score: [{
-                type: Input
-            }], bestCandidateScore: [{
-                type: Input
-            }], applicationTheme: [{
-                type: Input
-            }], legendPosition: [{
-                type: Input
-            }] } });
-
+var GaussianChartComponent = class GaussianChartComponent {
+	constructor() {
+		this.applicationTheme = "light";
+		this.legendPosition = "bottom-start";
+		this.minXValue = -3;
+		this.maxXValue = 3;
+		this.minYValue = 0;
+		this.stepSize = .1;
+		this.pointsToSkip = 2;
+		this.actualMinXvalue = this.minXValue + this.pointsToSkip * this.stepSize;
+		this.actualMaxXvalue = this.maxXValue - this.pointsToSkip * this.stepSize;
+		this.normalContainerPadding = 50;
+		this.bestScoreThreshold = 92;
+		this.bestScoreSpacingRight = "4px";
+		this.bestScoreSpacingLeft = "-39px";
+		this.PercentileThreshold = PercentileThreshold;
+		this.gaussianChartData = {
+			labels: [],
+			datasets: []
+		};
+		this.translationContext = "CHARTS.GAUSSIAN_CHART.";
+	}
+	ngOnInit() {
+		if (this.score === void 0 || this.score === null) throw new Error("Input \"score\" is required for GaussianChartComponent.");
+		if (this.bestCandidateScore === void 0 || this.bestCandidateScore === null) throw new Error("Input \"bestCandidateScore\" is required for GaussianChartComponent.");
+		this.setActiveBucket();
+		this.gaussianDistribution = gaussian(0, 1);
+		this.maxYValue = this.gaussianDistribution.pdf(0);
+		this.setOverlayValues();
+		this.setOverlayValuesForBestScore();
+		this.setChartData();
+		this.setChartOptions();
+	}
+	setChartData() {
+		const xValues = [];
+		const yValues = [];
+		const labels = this.generateLabels(this.minXValue, this.maxXValue, this.stepSize);
+		for (let x = this.minXValue; x < this.maxXValue + this.stepSize; x = Number((x + this.stepSize).toFixed(2))) {
+			xValues.push(x);
+			yValues.push(this.gaussianDistribution.pdf(x));
+		}
+		this.gaussianChartData = {
+			labels,
+			datasets: this.generateDataset(yValues)
+		};
+	}
+	setChartOptions() {
+		this.gaussianChartOptions = {
+			responsive: true,
+			maintainAspectRatio: false,
+			scales: this.getScale(),
+			plugins: {
+				tooltip: { enabled: false },
+				legend: { display: false }
+			}
+		};
+	}
+	getTooltip() {
+		return {
+			intersect: false,
+			mode: "nearest",
+			displayColors: false,
+			callbacks: {
+				label: (tooltipItem) => {
+					return `${(this.gaussianDistribution.cdf(parseFloat(tooltipItem.label)) * 100).toFixed(2)}%`;
+				},
+				title: () => ""
+			}
+		};
+	}
+	getScale() {
+		return {
+			x: {
+				display: false,
+				grid: { display: false }
+			},
+			y: {
+				display: false,
+				grid: { display: false }
+			}
+		};
+	}
+	generateDataset(yValues) {
+		return [
+			{
+				data: [...yValues.slice(0, this.pointsToSkip), ...Array(yValues.length - this.pointsToSkip).fill(null)],
+				label: "",
+				borderColor: this.activeBucket === PercentileThreshold.LOWEST ? Color.ACCENT_20 : Color.TGO_WHITE,
+				borderWidth: 2,
+				pointRadius: 0,
+				fill: false
+			},
+			{
+				data: [
+					...Array(this.pointsToSkip).fill(null),
+					...yValues.slice(this.pointsToSkip, yValues.length - this.pointsToSkip),
+					...Array(this.pointsToSkip).fill(null)
+				],
+				label: "",
+				borderColor: Color.BLACK,
+				borderWidth: 2,
+				pointRadius: 0,
+				fill: false
+			},
+			{
+				data: [...Array(yValues.length - this.pointsToSkip).fill(null), ...yValues.slice(yValues.length - this.pointsToSkip, yValues.length)],
+				label: "",
+				borderColor: this.activeBucket === PercentileThreshold.HIGHEST ? Color.ACCENT_20 : Color.TGO_WHITE,
+				borderWidth: 2,
+				pointRadius: 0,
+				fill: false
+			}
+		];
+	}
+	generateLabels(min, max, step) {
+		const labels = [];
+		for (let x = min; x < max + step; x = Number((x + step).toFixed(2))) labels.push(x.toFixed(1));
+		return labels;
+	}
+	setActiveBucket() {
+		const score = this.score;
+		if (score < PercentileThreshold.LOWEST) this.activeBucket = PercentileThreshold.LOWEST;
+		else if (score >= PercentileThreshold.LOWEST && score < PercentileThreshold.LOWER) this.activeBucket = PercentileThreshold.LOWER;
+		else if (score >= PercentileThreshold.LOWER && score < PercentileThreshold.AVERAGE) this.activeBucket = PercentileThreshold.AVERAGE;
+		else if (score >= PercentileThreshold.AVERAGE && score < PercentileThreshold.HIGHER) this.activeBucket = PercentileThreshold.HIGHER;
+		else if (score >= PercentileThreshold.HIGHER) this.activeBucket = PercentileThreshold.HIGHEST;
+	}
+	setOverlayValues() {
+		const { overlayXValue, overlayYValue } = this.calculateOverlayValues(this.score);
+		this.overlayXValue = overlayXValue;
+		this.overlayYValue = overlayYValue;
+	}
+	setOverlayValuesForBestScore() {
+		const { overlayXValue, overlayYValue } = this.calculateOverlayValues(this.bestCandidateScore);
+		this.overlayXBestScoreValue = overlayXValue;
+		this.overlayYBestScoreValue = overlayYValue;
+	}
+	calculateOverlayValues(score) {
+		const xValue = this.mapRange(score, 0, 100, this.minXValue, this.maxXValue);
+		const yValue = this.gaussianDistribution.pdf(xValue);
+		let overlayXValue = score;
+		let overlayYValue = this.mapRange(yValue, this.minYValue, this.maxYValue, 0, 100);
+		if (xValue <= this.actualMinXvalue || xValue >= this.actualMaxXvalue) {
+			const xValueExtreme = xValue <= this.actualMinXvalue ? this.actualMinXvalue : this.actualMaxXvalue;
+			const yValueExtreme = this.gaussianDistribution.pdf(xValueExtreme);
+			overlayXValue = this.mapRange(xValueExtreme, this.minXValue, this.maxXValue, 0, 100);
+			overlayYValue = this.mapRange(yValueExtreme, this.minYValue, this.maxYValue, 0, 100);
+		}
+		return {
+			overlayXValue,
+			overlayYValue
+		};
+	}
+	mapRange(value, inMin, inMax, outMin, outMax) {
+		return (value - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
+	}
+	getCalcPosition([percentage, pixels, operation = "add"]) {
+		return `calc(${percentage}% ${operation === "add" ? "+" : "-"} ${pixels}px)`;
+	}
+	getBestScoreContentPosition(bestScore) {
+		return bestScore < this.bestScoreThreshold ? this.bestScoreSpacingRight : this.bestScoreSpacingLeft;
+	}
+	getScoreTranslationKey(score) {
+		if (score < PercentileThreshold.LOWEST) return "PERCENTILE_LABEL_TYPES.WELL_BELOW_AVERAGE";
+		else if (score >= PercentileThreshold.LOWEST && score < PercentileThreshold.LOWER) return "PERCENTILE_LABEL_TYPES.BELOW_AVERAGE";
+		else if (score >= PercentileThreshold.LOWER && score < PercentileThreshold.AVERAGE) return "PERCENTILE_LABEL_TYPES.AVERAGE";
+		else if (score >= PercentileThreshold.AVERAGE && score < PercentileThreshold.HIGHER) return "PERCENTILE_LABEL_TYPES.ABOVE_AVERAGE";
+		else return "PERCENTILE_LABEL_TYPES.WELL_ABOVE_AVERAGE";
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: GaussianChartComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.4",
+			type: GaussianChartComponent,
+			isStandalone: true,
+			selector: "ui-gaussian-chart",
+			inputs: {
+				score: "score",
+				bestCandidateScore: "bestCandidateScore",
+				applicationTheme: "applicationTheme",
+				legendPosition: "legendPosition"
+			},
+			ngImport: i0,
+			template: "@if (score) {\n  <div\n    class=\"chart-section\"\n    [attr.aria-label]=\"\n      translationContext + 'ARIA_LABEL'\n        | uiTranslate\n          : {\n              score: score,\n              activeBucket: getScoreTranslationKey(score) | uiTranslate | async,\n              bestCandidateScore: bestCandidateScore,\n              activeBucketBestScore: getScoreTranslationKey(bestCandidateScore) | uiTranslate | async,\n            }\n        | async\n    \"\n    tabindex=\"0\"\n  >\n    <!-- Legend positioned at top -->\n    @if (legendPosition === 'top-start' || legendPosition === 'top-end') {\n      <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n    }\n    <div class=\"chart-range-wrapper\">\n      <div class=\"normal-chart-container\">\n        <div class=\"normal-chart\">\n          <canvas baseChart [data]=\"gaussianChartData\" [options]=\"gaussianChartOptions\" type=\"line\" class=\"chart\">\n          </canvas>\n          <div\n            class=\"overlay-icon\"\n            [style.bottom]=\"[overlayYValue, 3, 'subtract'] | memoizeFunc: getCalcPosition\"\n            [style.left]=\"[overlayXValue, 20, 'subtract'] | memoizeFunc: getCalcPosition\"\n          >\n            <div class=\"drop-icon\">\n              <ui-icon name=\"Pin-marker\" size=\"40\"></ui-icon>\n              <span class=\"curve-score\">{{ score }}</span>\n            </div>\n          </div>\n          <div\n            class=\"best-score\"\n            [style.height]=\"\n              [100 - overlayYBestScoreValue, normalContainerPadding, 'add'] | memoizeFunc: getCalcPosition\n            \"\n            [style.bottom]=\"overlayYBestScoreValue + '%'\"\n            [style.left]=\"overlayXBestScoreValue + '%'\"\n          >\n            <div\n              class=\"best-score-content\"\n              [style.left]=\"bestCandidateScore | memoizeFunc: getBestScoreContentPosition : this\"\n            >\n              <ui-icon name=\"Trophy\"></ui-icon>\n              {{ bestCandidateScore }}\n            </div>\n          </div>\n        </div>\n        <div class=\"overlay\">\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWEST\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.LOWEST\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWER\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.LOWER\"\n              [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER_TOOLTIP' | uiTranslate | async) || ''\"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.AVERAGE\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.AVERAGE\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHER\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHER\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHEST\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHEST\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST' | uiTranslate | async }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"range\">\n        <div>1</div>\n        <div>20</div>\n        <div>40</div>\n        <div>60</div>\n        <div>80</div>\n        <div>99</div>\n      </div>\n    </div>\n    <!-- Legend positioned at bottom -->\n    @if (legendPosition === 'bottom-start' || legendPosition === 'bottom-end') {\n      <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n    }\n  </div>\n}\n\n<!-- Reusable legend template -->\n<ng-template #legendTemplate>\n  <div class=\"legend-container\" [ngClass]=\"'legend-' + legendPosition\">\n    <div class=\"legend\">\n      <ui-icon name=\"Dot\" color=\"gray\"></ui-icon>\n      {{ translationContext + 'CANDIDATE_SCORE' | uiTranslate | async }}\n    </div>\n    <div class=\"legend\">\n      <ui-icon name=\"Trophy\" color=\"gray\"></ui-icon>\n      {{ translationContext + 'HIGHEST_SCORE' | uiTranslate | async }}\n    </div>\n  </div>\n</ng-template>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.chart-section{display:flex;flex-direction:column;gap:16px;width:100%}.chart-section .chart-range-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.chart-section .chart-range-wrapper .normal-chart-container{position:relative;padding-bottom:32px;padding-top:50px;border:1px solid #d3d3d3;border-radius:10px;width:100%;height:230px}.chart-section .chart-range-wrapper .normal-chart-container .normal-chart{position:relative;z-index:1;width:100%;height:100%}.chart-section .chart-range-wrapper .normal-chart-container .overlay{position:absolute;top:0;left:0;height:100%;width:100%;display:flex}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column{flex:1;font-size:12px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column .column-item{cursor:pointer}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column:not(:last-child){border-right:1px solid #d3d3d3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active{background-color:#fff5ed;border-bottom:3px solid #242424}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border:none;position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-right:1px solid #d3d3d3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{content:\"\";position:absolute;bottom:0;width:calc(100% - 4px);height:2.5px;background-color:#000}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before{right:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{left:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon{position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon .curve-score{font-size:14px;font-weight:700;position:absolute;width:100%;text-align:center;top:0;left:.5px;padding:4px 4px 9px}.chart-section .chart-range-wrapper .normal-chart-container .best-score{position:absolute;border-left:1px #242424 dashed}.chart-section .chart-range-wrapper .normal-chart-container .best-score .best-score-content{position:absolute;display:flex;gap:3px;align-items:center}.chart-section .chart-range-wrapper .range{display:flex;justify-content:space-between;color:#919191}.chart-section .chart-range-wrapper .range div{width:35px;text-align:center}.chart-section .chart-range-wrapper .range div:nth-child(2){text-align:left}.chart-section .chart-range-wrapper .range div:nth-last-child(2){text-align:right}.chart-section .legend-container{display:flex;gap:16px}.chart-section .legend-container.legend-top-start,.chart-section .legend-container.legend-bottom-start{justify-content:flex-start}.chart-section .legend-container.legend-top-end,.chart-section .legend-container.legend-bottom-end{justify-content:flex-end}.chart-section .legend-container .legend{display:flex;gap:8px;align-items:center;color:#666}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "directive",
+					type: BaseChartDirective,
+					selector: "canvas[baseChart]",
+					inputs: [
+						"type",
+						"legend",
+						"data",
+						"options",
+						"plugins",
+						"labels",
+						"datasets"
+					],
+					outputs: ["chartClick", "chartHover"],
+					exportAs: ["base-chart"]
+				},
+				{
+					kind: "ngmodule",
+					type: IconComponentModule
+				},
+				{
+					kind: "component",
+					type: i1.IconComponent,
+					selector: "ui-icon",
+					inputs: [
+						"size",
+						"cssClass",
+						"name",
+						"color",
+						"filled",
+						"toggleIconStyle",
+						"applicationTheme",
+						"useFullIconName"
+					]
+				},
+				{
+					kind: "directive",
+					type: MatTooltip,
+					selector: "[matTooltip]",
+					inputs: [
+						"matTooltipPosition",
+						"matTooltipPositionAtOrigin",
+						"matTooltipDisabled",
+						"matTooltipShowDelay",
+						"matTooltipHideDelay",
+						"matTooltipTouchGestures",
+						"matTooltip",
+						"matTooltipClass"
+					],
+					exportAs: ["matTooltip"]
+				},
+				{
+					kind: "directive",
+					type: NgClass,
+					selector: "[ngClass]",
+					inputs: ["class", "ngClass"]
+				},
+				{
+					kind: "pipe",
+					type: UiTranslatePipe,
+					name: "uiTranslate"
+				},
+				{
+					kind: "pipe",
+					type: AsyncPipe,
+					name: "async"
+				},
+				{
+					kind: "pipe",
+					type: MemoizeFuncPipe,
+					name: "memoizeFunc"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: GaussianChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-gaussian-chart",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				NgTemplateOutlet,
+				BaseChartDirective,
+				IconComponentModule,
+				MatTooltip,
+				NgClass,
+				UiTranslatePipe,
+				AsyncPipe,
+				MemoizeFuncPipe
+			],
+			template: "@if (score) {\n  <div\n    class=\"chart-section\"\n    [attr.aria-label]=\"\n      translationContext + 'ARIA_LABEL'\n        | uiTranslate\n          : {\n              score: score,\n              activeBucket: getScoreTranslationKey(score) | uiTranslate | async,\n              bestCandidateScore: bestCandidateScore,\n              activeBucketBestScore: getScoreTranslationKey(bestCandidateScore) | uiTranslate | async,\n            }\n        | async\n    \"\n    tabindex=\"0\"\n  >\n    <!-- Legend positioned at top -->\n    @if (legendPosition === 'top-start' || legendPosition === 'top-end') {\n      <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n    }\n    <div class=\"chart-range-wrapper\">\n      <div class=\"normal-chart-container\">\n        <div class=\"normal-chart\">\n          <canvas baseChart [data]=\"gaussianChartData\" [options]=\"gaussianChartOptions\" type=\"line\" class=\"chart\">\n          </canvas>\n          <div\n            class=\"overlay-icon\"\n            [style.bottom]=\"[overlayYValue, 3, 'subtract'] | memoizeFunc: getCalcPosition\"\n            [style.left]=\"[overlayXValue, 20, 'subtract'] | memoizeFunc: getCalcPosition\"\n          >\n            <div class=\"drop-icon\">\n              <ui-icon name=\"Pin-marker\" size=\"40\"></ui-icon>\n              <span class=\"curve-score\">{{ score }}</span>\n            </div>\n          </div>\n          <div\n            class=\"best-score\"\n            [style.height]=\"\n              [100 - overlayYBestScoreValue, normalContainerPadding, 'add'] | memoizeFunc: getCalcPosition\n            \"\n            [style.bottom]=\"overlayYBestScoreValue + '%'\"\n            [style.left]=\"overlayXBestScoreValue + '%'\"\n          >\n            <div\n              class=\"best-score-content\"\n              [style.left]=\"bestCandidateScore | memoizeFunc: getBestScoreContentPosition : this\"\n            >\n              <ui-icon name=\"Trophy\"></ui-icon>\n              {{ bestCandidateScore }}\n            </div>\n          </div>\n        </div>\n        <div class=\"overlay\">\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWEST\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.LOWEST\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWER\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.LOWER\"\n              [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER_TOOLTIP' | uiTranslate | async) || ''\"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.AVERAGE\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.AVERAGE\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHER\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHER\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHEST\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHEST\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST' | uiTranslate | async }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"range\">\n        <div>1</div>\n        <div>20</div>\n        <div>40</div>\n        <div>60</div>\n        <div>80</div>\n        <div>99</div>\n      </div>\n    </div>\n    <!-- Legend positioned at bottom -->\n    @if (legendPosition === 'bottom-start' || legendPosition === 'bottom-end') {\n      <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n    }\n  </div>\n}\n\n<!-- Reusable legend template -->\n<ng-template #legendTemplate>\n  <div class=\"legend-container\" [ngClass]=\"'legend-' + legendPosition\">\n    <div class=\"legend\">\n      <ui-icon name=\"Dot\" color=\"gray\"></ui-icon>\n      {{ translationContext + 'CANDIDATE_SCORE' | uiTranslate | async }}\n    </div>\n    <div class=\"legend\">\n      <ui-icon name=\"Trophy\" color=\"gray\"></ui-icon>\n      {{ translationContext + 'HIGHEST_SCORE' | uiTranslate | async }}\n    </div>\n  </div>\n</ng-template>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.chart-section{display:flex;flex-direction:column;gap:16px;width:100%}.chart-section .chart-range-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.chart-section .chart-range-wrapper .normal-chart-container{position:relative;padding-bottom:32px;padding-top:50px;border:1px solid #d3d3d3;border-radius:10px;width:100%;height:230px}.chart-section .chart-range-wrapper .normal-chart-container .normal-chart{position:relative;z-index:1;width:100%;height:100%}.chart-section .chart-range-wrapper .normal-chart-container .overlay{position:absolute;top:0;left:0;height:100%;width:100%;display:flex}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column{flex:1;font-size:12px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column .column-item{cursor:pointer}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column:not(:last-child){border-right:1px solid #d3d3d3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active{background-color:#fff5ed;border-bottom:3px solid #242424}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border:none;position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-right:1px solid #d3d3d3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{content:\"\";position:absolute;bottom:0;width:calc(100% - 4px);height:2.5px;background-color:#000}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before{right:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{left:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon{position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon .curve-score{font-size:14px;font-weight:700;position:absolute;width:100%;text-align:center;top:0;left:.5px;padding:4px 4px 9px}.chart-section .chart-range-wrapper .normal-chart-container .best-score{position:absolute;border-left:1px #242424 dashed}.chart-section .chart-range-wrapper .normal-chart-container .best-score .best-score-content{position:absolute;display:flex;gap:3px;align-items:center}.chart-section .chart-range-wrapper .range{display:flex;justify-content:space-between;color:#919191}.chart-section .chart-range-wrapper .range div{width:35px;text-align:center}.chart-section .chart-range-wrapper .range div:nth-child(2){text-align:left}.chart-section .chart-range-wrapper .range div:nth-last-child(2){text-align:right}.chart-section .legend-container{display:flex;gap:16px}.chart-section .legend-container.legend-top-start,.chart-section .legend-container.legend-bottom-start{justify-content:flex-start}.chart-section .legend-container.legend-top-end,.chart-section .legend-container.legend-bottom-end{justify-content:flex-end}.chart-section .legend-container .legend{display:flex;gap:8px;align-items:center;color:#666}\n"]
+		}]
+	}],
+	propDecorators: {
+		score: [{ type: Input }],
+		bestCandidateScore: [{ type: Input }],
+		applicationTheme: [{ type: Input }],
+		legendPosition: [{ type: Input }]
+	}
+});
 Chart.register(...registerables);
-class GaussianChartComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: GaussianChartComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: GaussianChartComponentModule, imports: [NgClass,
-            UiTranslatePipe,
-            BaseChartDirective,
-            MatTooltipModule,
-            CommonModule,
-            IconComponentModule,
-            MemoizeFuncPipe,
-            GaussianChartComponent], exports: [GaussianChartComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: GaussianChartComponentModule, imports: [MatTooltipModule,
-            CommonModule,
-            IconComponentModule,
-            GaussianChartComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: GaussianChartComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [GaussianChartComponent],
-                    imports: [
-                        NgClass,
-                        UiTranslatePipe,
-                        BaseChartDirective,
-                        MatTooltipModule,
-                        CommonModule,
-                        IconComponentModule,
-                        MemoizeFuncPipe,
-                        GaussianChartComponent,
-                    ],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var GaussianChartComponentModule = class GaussianChartComponentModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: GaussianChartComponentModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: GaussianChartComponentModule,
+			imports: [
+				NgClass,
+				UiTranslatePipe,
+				BaseChartDirective,
+				MatTooltipModule,
+				CommonModule,
+				IconComponentModule,
+				MemoizeFuncPipe,
+				GaussianChartComponent
+			],
+			exports: [GaussianChartComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: GaussianChartComponentModule,
+			imports: [
+				MatTooltipModule,
+				CommonModule,
+				IconComponentModule,
+				GaussianChartComponent
+			]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: GaussianChartComponentModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			exports: [GaussianChartComponent],
+			imports: [
+				NgClass,
+				UiTranslatePipe,
+				BaseChartDirective,
+				MatTooltipModule,
+				CommonModule,
+				IconComponentModule,
+				MemoizeFuncPipe,
+				GaussianChartComponent
+			]
+		}]
+	}]
+});
 export { GaussianChartComponent, GaussianChartComponentModule };
-//# sourceMappingURL=testgorilla-tgo-ui-components-gaussian-chart.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-gaussian-chart.mjs.map