@testgorilla/tgo-ui 8.19.1 → 9.0.0

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

@@ -1,15 +1,11 @@
+import { NgTemplateOutlet, NgClass, AsyncPipe, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Input, Component, NgModule } from '@angular/core';
-import * as i5 from '@testgorilla/tgo-ui/components/core';
-import { Color, UiTranslatePipe, MemoizeFuncPipe } from '@testgorilla/tgo-ui/components/core';
+import { Input, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import gaussian from 'gaussian';
-import * as i1 from '@angular/common';
-import { NgClass, CommonModule } from '@angular/common';
-import * as i2 from 'ng2-charts';
 import { BaseChartDirective } from 'ng2-charts';
-import * as i3 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i4 from '@testgorilla/tgo-ui/components/icon';
+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';
 
@@ -133,7 +129,10 @@ class GaussianChartComponent {
     generateDataset(yValues) {
         return [
             {
-                data: [...yValues.slice(0, this.pointsToSkip), ...Array(yValues.length - this.pointsToSkip).fill(null)],
+                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,
@@ -242,11 +241,20 @@ class GaussianChartComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: GaussianChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: GaussianChartComponent, isStandalone: false, 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;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px}.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-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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "pipe", type: i5.UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.MemoizeFuncPipe, name: "memoizeFunc" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px}.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-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: "20.3.25", ngImport: i0, type: GaussianChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-gaussian-chart', standalone: false, 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;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px}.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-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"] }]
+            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;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px}.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-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: [{
@@ -260,21 +268,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 Chart.register(...registerables);
 class GaussianChartComponentModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: GaussianChartComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: GaussianChartComponentModule, declarations: [GaussianChartComponent], imports: [NgClass,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: GaussianChartComponentModule, imports: [NgClass,
             UiTranslatePipe,
             BaseChartDirective,
             MatTooltipModule,
             CommonModule,
             IconComponentModule,
-            MemoizeFuncPipe], exports: [GaussianChartComponent] }); }
+            MemoizeFuncPipe,
+            GaussianChartComponent], exports: [GaussianChartComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: GaussianChartComponentModule, imports: [MatTooltipModule,
             CommonModule,
-            IconComponentModule] }); }
+            IconComponentModule,
+            GaussianChartComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: GaussianChartComponentModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [GaussianChartComponent],
                     exports: [GaussianChartComponent],
                     imports: [
                         NgClass,
@@ -284,6 +293,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         CommonModule,
                         IconComponentModule,
                         MemoizeFuncPipe,
+                        GaussianChartComponent,
                     ],
                 }]
         }] });

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

@@ -1 +1 @@
-{"version":3,"file":"testgorilla-tgo-ui-components-gaussian-chart.mjs","sources":["../../../components/gaussian-chart/gaussian-chart.component.ts","../../../components/gaussian-chart/gaussian-chart.component.html","../../../components/gaussian-chart/gaussian-chart.module.ts","../../../components/gaussian-chart/testgorilla-tgo-ui-components-gaussian-chart.ts"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\nimport { ApplicationTheme, Color } from '@testgorilla/tgo-ui/components/core';\nimport { Chart, ChartData, ChartOptions } from 'chart.js';\nimport gaussian from 'gaussian';\n\nconst PercentileThreshold = {\n  LOWEST: 20,\n  LOWER: 40,\n  AVERAGE: 60,\n  HIGHER: 80,\n  HIGHEST: 100,\n} as const;\ntype PercentileThreshold = (typeof PercentileThreshold)[keyof typeof PercentileThreshold];\n\nexport type LegendPosition = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';\n\n@Component({\n  selector: 'ui-gaussian-chart',\n  templateUrl: './gaussian-chart.component.html',\n  styleUrls: ['./gaussian-chart.component.scss'],\n  standalone: false,\n})\nexport class GaussianChartComponent implements OnInit {\n  /**\n   * The candidate score to be displayed on the chart.\n   * @type {number}\n   * @memberof GaussianChartComponent\n   */\n  @Input() score!: number;\n\n  /**\n   * The best candidate score to be displayed on the chart.\n   * @type {number}\n   * @memberof GaussianChartComponent\n   */\n  @Input() bestCandidateScore!: number;\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof SpinnerComponent\n   */\n  @Input() applicationTheme: ApplicationTheme = 'light';\n\n  /**\n   * Controls the position of the legend relative to the chart.\n   * @type {LegendPosition}\n   * @memberof GaussianChartComponent\n   */\n  @Input() legendPosition: LegendPosition = 'bottom-start';\n\n  readonly minXValue = -3;\n  readonly maxXValue = 3;\n  readonly minYValue = 0;\n  readonly stepSize = 0.1;\n  readonly pointsToSkip = 2;\n  readonly actualMinXvalue = this.minXValue + this.pointsToSkip * this.stepSize;\n  readonly actualMaxXvalue = this.maxXValue - this.pointsToSkip * this.stepSize;\n  readonly normalContainerPadding = 50; //in px\n  readonly bestScoreThreshold = 92;\n  readonly bestScoreSpacingRight = '4px';\n  readonly bestScoreSpacingLeft = '-39px';\n\n  PercentileThreshold = PercentileThreshold;\n  chart: Chart;\n  gaussianDistribution: gaussian.Gaussian;\n  activeBucket: PercentileThreshold;\n  overlayXValue: number;\n  overlayYValue: number;\n  overlayXBestScoreValue: number;\n  overlayYBestScoreValue: number;\n  maxYValue: number;\n\n  gaussianChartData: ChartData<'line'> = {\n    labels: [],\n    datasets: [],\n  };\n  gaussianChartOptions: ChartOptions<'line'>;\n  protected readonly translationContext = 'CHARTS.GAUSSIAN_CHART.';\n\n  ngOnInit(): void {\n    if (this.score === undefined || this.score === null) {\n      throw new Error('Input \"score\" is required for GaussianChartComponent.');\n    }\n    if (this.bestCandidateScore === undefined || this.bestCandidateScore === null) {\n      throw new Error('Input \"bestCandidateScore\" is required for GaussianChartComponent.');\n    }\n    this.setActiveBucket();\n    this.gaussianDistribution = gaussian(0, 1);\n    this.maxYValue = this.gaussianDistribution.pdf(0);\n    this.setOverlayValues();\n    this.setOverlayValuesForBestScore();\n    this.setChartData();\n    this.setChartOptions();\n  }\n\n  private setChartData() {\n    const xValues: number[] = [];\n    const yValues: number[] = [];\n    const labels = this.generateLabels(this.minXValue, this.maxXValue, this.stepSize);\n\n    for (let x = this.minXValue; x < this.maxXValue + this.stepSize; x = Number((x + this.stepSize).toFixed(2))) {\n      xValues.push(x);\n      yValues.push(this.gaussianDistribution.pdf(x));\n    }\n\n    this.gaussianChartData = {\n      labels,\n      datasets: this.generateDataset(yValues),\n    };\n  }\n\n  private setChartOptions() {\n    this.gaussianChartOptions = {\n      responsive: true,\n      maintainAspectRatio: false,\n      scales: this.getScale(),\n      plugins: {\n        // To be used only for dev purpose\n        // tooltip: this.getTooltip(),\n        // Comment the below line if you enable the call for tooltip\n        tooltip: {\n          enabled: false,\n        },\n        legend: {\n          display: false,\n        },\n      },\n    };\n  }\n\n  private getTooltip() {\n    return {\n      intersect: false,\n      mode: 'nearest',\n      displayColors: false,\n      callbacks: {\n        label: (tooltipItem: { label: string }) => {\n          const value = (this.gaussianDistribution.cdf(parseFloat(tooltipItem.label)) * 100).toFixed(2);\n          return `${value}%`;\n        },\n        title: () => '', // Disable the default title\n      },\n    };\n  }\n\n  private getScale(): {\n    x: { display: boolean; grid: { display: boolean } };\n    y: { display: boolean; grid: { display: boolean } };\n  } {\n    return {\n      x: {\n        display: false,\n        grid: {\n          display: false, // Disable grid lines for x-axis\n        },\n      },\n      y: {\n        display: false,\n        grid: {\n          display: false, // Disable grid lines for y-axis\n        },\n      },\n    };\n  }\n\n  private generateDataset(\n    yValues: number[]\n  ): { data: any[]; label: string; borderColor: Color; borderWidth: number; pointRadius: number; fill: boolean }[] {\n    return [\n      {\n        data: [...yValues.slice(0, this.pointsToSkip), ...Array(yValues.length - this.pointsToSkip).fill(null)],\n        label: '',\n        borderColor: this.activeBucket === PercentileThreshold.LOWEST ? Color.ACCENT_20 : Color.TGO_WHITE,\n        borderWidth: 2,\n        pointRadius: 0,\n        fill: false,\n      },\n      {\n        data: [\n          ...Array(this.pointsToSkip).fill(null),\n          ...yValues.slice(this.pointsToSkip, yValues.length - this.pointsToSkip),\n          ...Array(this.pointsToSkip).fill(null),\n        ],\n        label: '',\n        borderColor: Color.BLACK,\n        borderWidth: 2,\n        pointRadius: 0,\n        fill: false,\n      },\n      {\n        data: [\n          ...Array(yValues.length - this.pointsToSkip).fill(null),\n          ...yValues.slice(yValues.length - this.pointsToSkip, yValues.length),\n        ],\n        label: '',\n        borderColor: this.activeBucket === PercentileThreshold.HIGHEST ? Color.ACCENT_20 : Color.TGO_WHITE,\n        borderWidth: 2,\n        pointRadius: 0,\n        fill: false,\n      },\n    ];\n  }\n\n  private generateLabels(min: number, max: number, step: number): string[] {\n    const labels = [];\n    for (let x = min; x < max + step; x = Number((x + step).toFixed(2))) {\n      labels.push(x.toFixed(1));\n    }\n    return labels;\n  }\n\n  private setActiveBucket(): void {\n    const score = this.score;\n    if (score < PercentileThreshold.LOWEST) {\n      this.activeBucket = PercentileThreshold.LOWEST;\n    } else if (score >= PercentileThreshold.LOWEST && score < PercentileThreshold.LOWER) {\n      this.activeBucket = PercentileThreshold.LOWER;\n    } else if (score >= PercentileThreshold.LOWER && score < PercentileThreshold.AVERAGE) {\n      this.activeBucket = PercentileThreshold.AVERAGE;\n    } else if (score >= PercentileThreshold.AVERAGE && score < PercentileThreshold.HIGHER) {\n      this.activeBucket = PercentileThreshold.HIGHER;\n    } else if (score >= PercentileThreshold.HIGHER) {\n      this.activeBucket = PercentileThreshold.HIGHEST;\n    }\n  }\n\n  // For more context: https://testgorilla.atlassian.net/wiki/spaces/SR/pages/1813905736/Percentiles+curve+FE+implementation\n  private setOverlayValues(): void {\n    const { overlayXValue, overlayYValue } = this.calculateOverlayValues(this.score);\n    this.overlayXValue = overlayXValue;\n    this.overlayYValue = overlayYValue;\n  }\n\n  private setOverlayValuesForBestScore(): void {\n    const { overlayXValue, overlayYValue } = this.calculateOverlayValues(this.bestCandidateScore);\n    this.overlayXBestScoreValue = overlayXValue;\n    this.overlayYBestScoreValue = overlayYValue;\n  }\n\n  private calculateOverlayValues(score: number): { overlayXValue: number; overlayYValue: number } {\n    const xValue = this.mapRange(score, 0, 100, this.minXValue, this.maxXValue);\n    const yValue = this.gaussianDistribution.pdf(xValue);\n    let overlayXValue = score;\n    let overlayYValue = this.mapRange(yValue, this.minYValue, this.maxYValue, 0, 100);\n\n    if (xValue <= this.actualMinXvalue || xValue >= this.actualMaxXvalue) {\n      const xValueExtreme = xValue <= this.actualMinXvalue ? this.actualMinXvalue : this.actualMaxXvalue;\n      const yValueExtreme = this.gaussianDistribution.pdf(xValueExtreme);\n      overlayXValue = this.mapRange(xValueExtreme, this.minXValue, this.maxXValue, 0, 100);\n      overlayYValue = this.mapRange(yValueExtreme, this.minYValue, this.maxYValue, 0, 100);\n    }\n\n    return { overlayXValue, overlayYValue };\n  }\n\n  private mapRange(value: number, inMin: number, inMax: number, outMin: number, outMax: number): number {\n    return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;\n  }\n\n  getCalcPosition([percentage, pixels, operation = 'add']: [number, number, 'add' | 'subtract']): string {\n    const operator = operation === 'add' ? '+' : '-';\n    return `calc(${percentage}% ${operator} ${pixels}px)`;\n  }\n\n  getBestScoreContentPosition(bestScore: number): string {\n    return bestScore < this.bestScoreThreshold ? this.bestScoreSpacingRight : this.bestScoreSpacingLeft;\n  }\n\n  getScoreTranslationKey(score: number): string {\n    if (score < PercentileThreshold.LOWEST) {\n      return 'PERCENTILE_LABEL_TYPES.WELL_BELOW_AVERAGE';\n    } else if (score >= PercentileThreshold.LOWEST && score < PercentileThreshold.LOWER) {\n      return 'PERCENTILE_LABEL_TYPES.BELOW_AVERAGE';\n    } else if (score >= PercentileThreshold.LOWER && score < PercentileThreshold.AVERAGE) {\n      return 'PERCENTILE_LABEL_TYPES.AVERAGE';\n    } else if (score >= PercentileThreshold.AVERAGE && score < PercentileThreshold.HIGHER) {\n      return 'PERCENTILE_LABEL_TYPES.ABOVE_AVERAGE';\n    } else {\n      return 'PERCENTILE_LABEL_TYPES.WELL_ABOVE_AVERAGE';\n    }\n  }\n}\n","@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","import { NgModule } from '@angular/core';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { GaussianChartComponent } from './gaussian-chart.component';\nimport { BaseChartDirective } from 'ng2-charts';\nimport { Chart, registerables } from 'chart.js';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { CommonModule, NgClass } from '@angular/common';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { MemoizeFuncPipe } from '@testgorilla/tgo-ui/components/core';\n\nChart.register(...registerables);\n\n@NgModule({\n  declarations: [GaussianChartComponent],\n  exports: [GaussianChartComponent],\n  imports: [\n    NgClass,\n    UiTranslatePipe,\n    BaseChartDirective,\n    MatTooltipModule,\n    CommonModule,\n    IconComponentModule,\n    MemoizeFuncPipe,\n  ],\n})\nexport class GaussianChartComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"testgorilla-tgo-ui-components-gaussian-chart.mjs","sources":["../../../components/gaussian-chart/gaussian-chart.component.ts","../../../components/gaussian-chart/gaussian-chart.component.html","../../../components/gaussian-chart/gaussian-chart.module.ts","../../../components/gaussian-chart/testgorilla-tgo-ui-components-gaussian-chart.ts"],"sourcesContent":["import { NgTemplateOutlet, NgClass, AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { Chart, ChartData, ChartOptions } from 'chart.js';\nimport gaussian from 'gaussian';\nimport { BaseChartDirective } from 'ng2-charts';\n\nimport { ApplicationTheme, Color, UiTranslatePipe, MemoizeFuncPipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\nconst PercentileThreshold = {\n  LOWEST: 20,\n  LOWER: 40,\n  AVERAGE: 60,\n  HIGHER: 80,\n  HIGHEST: 100,\n} as const;\ntype PercentileThreshold = (typeof PercentileThreshold)[keyof typeof PercentileThreshold];\n\nexport type LegendPosition = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';\n\n@Component({\n  selector: 'ui-gaussian-chart',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './gaussian-chart.component.html',\n  styleUrls: ['./gaussian-chart.component.scss'],\n  imports: [\n    NgTemplateOutlet,\n    BaseChartDirective,\n    IconComponentModule,\n    MatTooltip,\n    NgClass,\n    UiTranslatePipe,\n    AsyncPipe,\n    MemoizeFuncPipe,\n  ],\n})\nexport class GaussianChartComponent implements OnInit {\n  /**\n   * The candidate score to be displayed on the chart.\n   * @type {number}\n   * @memberof GaussianChartComponent\n   */\n  @Input() score!: number;\n\n  /**\n   * The best candidate score to be displayed on the chart.\n   * @type {number}\n   * @memberof GaussianChartComponent\n   */\n  @Input() bestCandidateScore!: number;\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof SpinnerComponent\n   */\n  @Input() applicationTheme: ApplicationTheme = 'light';\n\n  /**\n   * Controls the position of the legend relative to the chart.\n   * @type {LegendPosition}\n   * @memberof GaussianChartComponent\n   */\n  @Input() legendPosition: LegendPosition = 'bottom-start';\n\n  readonly minXValue = -3;\n  readonly maxXValue = 3;\n  readonly minYValue = 0;\n  readonly stepSize = 0.1;\n  readonly pointsToSkip = 2;\n  readonly actualMinXvalue = this.minXValue + this.pointsToSkip * this.stepSize;\n  readonly actualMaxXvalue = this.maxXValue - this.pointsToSkip * this.stepSize;\n  readonly normalContainerPadding = 50; //in px\n  readonly bestScoreThreshold = 92;\n  readonly bestScoreSpacingRight = '4px';\n  readonly bestScoreSpacingLeft = '-39px';\n\n  PercentileThreshold = PercentileThreshold;\n  chart: Chart;\n  gaussianDistribution: gaussian.Gaussian;\n  activeBucket: PercentileThreshold;\n  overlayXValue: number;\n  overlayYValue: number;\n  overlayXBestScoreValue: number;\n  overlayYBestScoreValue: number;\n  maxYValue: number;\n\n  gaussianChartData: ChartData<'line'> = {\n    labels: [],\n    datasets: [],\n  };\n  gaussianChartOptions: ChartOptions<'line'>;\n  protected readonly translationContext = 'CHARTS.GAUSSIAN_CHART.';\n\n  ngOnInit(): void {\n    if (this.score === undefined || this.score === null) {\n      throw new Error('Input \"score\" is required for GaussianChartComponent.');\n    }\n    if (this.bestCandidateScore === undefined || this.bestCandidateScore === null) {\n      throw new Error('Input \"bestCandidateScore\" is required for GaussianChartComponent.');\n    }\n    this.setActiveBucket();\n    this.gaussianDistribution = gaussian(0, 1);\n    this.maxYValue = this.gaussianDistribution.pdf(0);\n    this.setOverlayValues();\n    this.setOverlayValuesForBestScore();\n    this.setChartData();\n    this.setChartOptions();\n  }\n\n  private setChartData() {\n    const xValues: number[] = [];\n    const yValues: number[] = [];\n    const labels = this.generateLabels(this.minXValue, this.maxXValue, this.stepSize);\n\n    for (let x = this.minXValue; x < this.maxXValue + this.stepSize; x = Number((x + this.stepSize).toFixed(2))) {\n      xValues.push(x);\n      yValues.push(this.gaussianDistribution.pdf(x));\n    }\n\n    this.gaussianChartData = {\n      labels,\n      datasets: this.generateDataset(yValues),\n    };\n  }\n\n  private setChartOptions() {\n    this.gaussianChartOptions = {\n      responsive: true,\n      maintainAspectRatio: false,\n      scales: this.getScale(),\n      plugins: {\n        // To be used only for dev purpose\n        // tooltip: this.getTooltip(),\n        // Comment the below line if you enable the call for tooltip\n        tooltip: {\n          enabled: false,\n        },\n        legend: {\n          display: false,\n        },\n      },\n    };\n  }\n\n  private getTooltip() {\n    return {\n      intersect: false,\n      mode: 'nearest',\n      displayColors: false,\n      callbacks: {\n        label: (tooltipItem: { label: string }) => {\n          const value = (this.gaussianDistribution.cdf(parseFloat(tooltipItem.label)) * 100).toFixed(2);\n          return `${value}%`;\n        },\n        title: () => '', // Disable the default title\n      },\n    };\n  }\n\n  private getScale(): {\n    x: { display: boolean; grid: { display: boolean } };\n    y: { display: boolean; grid: { display: boolean } };\n  } {\n    return {\n      x: {\n        display: false,\n        grid: {\n          display: false, // Disable grid lines for x-axis\n        },\n      },\n      y: {\n        display: false,\n        grid: {\n          display: false, // Disable grid lines for y-axis\n        },\n      },\n    };\n  }\n\n  private generateDataset(yValues: number[]): {\n    data: (number | null)[];\n    label: string;\n    borderColor: Color;\n    borderWidth: number;\n    pointRadius: number;\n    fill: boolean;\n  }[] {\n    return [\n      {\n        data: [\n          ...yValues.slice(0, this.pointsToSkip),\n          ...Array<number | null>(yValues.length - this.pointsToSkip).fill(null),\n        ],\n        label: '',\n        borderColor: this.activeBucket === PercentileThreshold.LOWEST ? Color.ACCENT_20 : Color.TGO_WHITE,\n        borderWidth: 2,\n        pointRadius: 0,\n        fill: false,\n      },\n      {\n        data: [\n          ...Array<number | null>(this.pointsToSkip).fill(null),\n          ...yValues.slice(this.pointsToSkip, yValues.length - this.pointsToSkip),\n          ...Array<number | null>(this.pointsToSkip).fill(null),\n        ],\n        label: '',\n        borderColor: Color.BLACK,\n        borderWidth: 2,\n        pointRadius: 0,\n        fill: false,\n      },\n      {\n        data: [\n          ...Array<number | null>(yValues.length - this.pointsToSkip).fill(null),\n          ...yValues.slice(yValues.length - this.pointsToSkip, yValues.length),\n        ],\n        label: '',\n        borderColor: this.activeBucket === PercentileThreshold.HIGHEST ? Color.ACCENT_20 : Color.TGO_WHITE,\n        borderWidth: 2,\n        pointRadius: 0,\n        fill: false,\n      },\n    ];\n  }\n\n  private generateLabels(min: number, max: number, step: number): string[] {\n    const labels = [];\n    for (let x = min; x < max + step; x = Number((x + step).toFixed(2))) {\n      labels.push(x.toFixed(1));\n    }\n    return labels;\n  }\n\n  private setActiveBucket(): void {\n    const score = this.score;\n    if (score < PercentileThreshold.LOWEST) {\n      this.activeBucket = PercentileThreshold.LOWEST;\n    } else if (score >= PercentileThreshold.LOWEST && score < PercentileThreshold.LOWER) {\n      this.activeBucket = PercentileThreshold.LOWER;\n    } else if (score >= PercentileThreshold.LOWER && score < PercentileThreshold.AVERAGE) {\n      this.activeBucket = PercentileThreshold.AVERAGE;\n    } else if (score >= PercentileThreshold.AVERAGE && score < PercentileThreshold.HIGHER) {\n      this.activeBucket = PercentileThreshold.HIGHER;\n    } else if (score >= PercentileThreshold.HIGHER) {\n      this.activeBucket = PercentileThreshold.HIGHEST;\n    }\n  }\n\n  // For more context: https://testgorilla.atlassian.net/wiki/spaces/SR/pages/1813905736/Percentiles+curve+FE+implementation\n  private setOverlayValues(): void {\n    const { overlayXValue, overlayYValue } = this.calculateOverlayValues(this.score);\n    this.overlayXValue = overlayXValue;\n    this.overlayYValue = overlayYValue;\n  }\n\n  private setOverlayValuesForBestScore(): void {\n    const { overlayXValue, overlayYValue } = this.calculateOverlayValues(this.bestCandidateScore);\n    this.overlayXBestScoreValue = overlayXValue;\n    this.overlayYBestScoreValue = overlayYValue;\n  }\n\n  private calculateOverlayValues(score: number): { overlayXValue: number; overlayYValue: number } {\n    const xValue = this.mapRange(score, 0, 100, this.minXValue, this.maxXValue);\n    const yValue = this.gaussianDistribution.pdf(xValue);\n    let overlayXValue = score;\n    let overlayYValue = this.mapRange(yValue, this.minYValue, this.maxYValue, 0, 100);\n\n    if (xValue <= this.actualMinXvalue || xValue >= this.actualMaxXvalue) {\n      const xValueExtreme = xValue <= this.actualMinXvalue ? this.actualMinXvalue : this.actualMaxXvalue;\n      const yValueExtreme = this.gaussianDistribution.pdf(xValueExtreme);\n      overlayXValue = this.mapRange(xValueExtreme, this.minXValue, this.maxXValue, 0, 100);\n      overlayYValue = this.mapRange(yValueExtreme, this.minYValue, this.maxYValue, 0, 100);\n    }\n\n    return { overlayXValue, overlayYValue };\n  }\n\n  private mapRange(value: number, inMin: number, inMax: number, outMin: number, outMax: number): number {\n    return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;\n  }\n\n  getCalcPosition([percentage, pixels, operation = 'add']: [number, number, 'add' | 'subtract']): string {\n    const operator = operation === 'add' ? '+' : '-';\n    return `calc(${percentage}% ${operator} ${pixels}px)`;\n  }\n\n  getBestScoreContentPosition(bestScore: number): string {\n    return bestScore < this.bestScoreThreshold ? this.bestScoreSpacingRight : this.bestScoreSpacingLeft;\n  }\n\n  getScoreTranslationKey(score: number): string {\n    if (score < PercentileThreshold.LOWEST) {\n      return 'PERCENTILE_LABEL_TYPES.WELL_BELOW_AVERAGE';\n    } else if (score >= PercentileThreshold.LOWEST && score < PercentileThreshold.LOWER) {\n      return 'PERCENTILE_LABEL_TYPES.BELOW_AVERAGE';\n    } else if (score >= PercentileThreshold.LOWER && score < PercentileThreshold.AVERAGE) {\n      return 'PERCENTILE_LABEL_TYPES.AVERAGE';\n    } else if (score >= PercentileThreshold.AVERAGE && score < PercentileThreshold.HIGHER) {\n      return 'PERCENTILE_LABEL_TYPES.ABOVE_AVERAGE';\n    } else {\n      return 'PERCENTILE_LABEL_TYPES.WELL_ABOVE_AVERAGE';\n    }\n  }\n}\n","@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","import { CommonModule, NgClass } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { Chart, registerables } from 'chart.js';\nimport { BaseChartDirective } from 'ng2-charts';\n\nimport { UiTranslatePipe, MemoizeFuncPipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\nimport { GaussianChartComponent } from './gaussian-chart.component';\n\nChart.register(...registerables);\n\n@NgModule({\n  exports: [GaussianChartComponent],\n  imports: [\n    NgClass,\n    UiTranslatePipe,\n    BaseChartDirective,\n    MatTooltipModule,\n    CommonModule,\n    IconComponentModule,\n    MemoizeFuncPipe,\n    GaussianChartComponent,\n  ],\n})\nexport class GaussianChartComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/testgorilla-tgo-ui-components-icon-label.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, HostBinding, Optional, Inject, Component, NgModule } from '@angular/core';
+import { Input, HostBinding, Optional, Inject, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import * as i1 from '@testgorilla/tgo-ui/components/icon';
 import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
 import { CommonModule } from '@angular/common';
@@ -47,11 +47,11 @@ class IconLabelComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconLabelComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: IconLabelComponent, isStandalone: false, selector: "ui-icon-label", inputs: { iconSize: "iconSize", iconName: "iconName", text: "text", iconColor: "iconColor", iconIndent: "iconIndent", applicationTheme: "applicationTheme" }, host: { properties: { "style.--icon-indent": "this.iconIndent" } }, ngImport: i0, template: "<ui-icon [name]=\"iconName\" [size]=\"iconSize\" [color]=\"iconColor\" aria-hidden=\"true\"></ui-icon>\n<span>{{ text }}</span>\n", styles: [":host{display:flex;align-items:center}:host ui-icon{margin-right:calc(var(--icon-indent) * 1px)}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: IconLabelComponent, isStandalone: true, selector: "ui-icon-label", inputs: { iconSize: "iconSize", iconName: "iconName", text: "text", iconColor: "iconColor", iconIndent: "iconIndent", applicationTheme: "applicationTheme" }, host: { properties: { "style.--icon-indent": "this.iconIndent" } }, ngImport: i0, template: "<ui-icon [name]=\"iconName\" [size]=\"iconSize\" [color]=\"iconColor\" aria-hidden=\"true\"></ui-icon>\n<span>{{ text }}</span>\n", styles: [":host{display:flex;align-items:center}:host ui-icon{margin-right:calc(var(--icon-indent) * 1px)}\n"], dependencies: [{ kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-icon-label', standalone: false, template: "<ui-icon [name]=\"iconName\" [size]=\"iconSize\" [color]=\"iconColor\" aria-hidden=\"true\"></ui-icon>\n<span>{{ text }}</span>\n", styles: [":host{display:flex;align-items:center}:host ui-icon{margin-right:calc(var(--icon-indent) * 1px)}\n"] }]
+            args: [{ selector: 'ui-icon-label', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponentModule], template: "<ui-icon [name]=\"iconName\" [size]=\"iconSize\" [color]=\"iconColor\" aria-hidden=\"true\"></ui-icon>\n<span>{{ text }}</span>\n", styles: [":host{display:flex;align-items:center}:host ui-icon{margin-right:calc(var(--icon-indent) * 1px)}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -76,14 +76,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
 class IconLabelComponentModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconLabelComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: IconLabelComponentModule, declarations: [IconLabelComponent], imports: [CommonModule, IconComponentModule], exports: [IconLabelComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconLabelComponentModule, imports: [CommonModule, IconComponentModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: IconLabelComponentModule, imports: [CommonModule, IconComponentModule, IconLabelComponent], exports: [IconLabelComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconLabelComponentModule, imports: [CommonModule, IconComponentModule, IconLabelComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconLabelComponentModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [IconLabelComponent],
-                    imports: [CommonModule, IconComponentModule],
+                    imports: [CommonModule, IconComponentModule, IconLabelComponent],
                     exports: [IconLabelComponent],
                     providers: [],
                 }]

package/fesm2022/testgorilla-tgo-ui-components-icon-label.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"testgorilla-tgo-ui-components-icon-label.mjs","sources":["../../../components/icon-label/icon-label.component.ts","../../../components/icon-label/icon-label.component.html","../../../components/icon-label/icon-label.component.module.ts","../../../components/icon-label/testgorilla-tgo-ui-components-icon-label.ts"],"sourcesContent":["import { Component, HostBinding, Inject, Input, Optional } from '@angular/core';\nimport { IconName, IconSize } from '@testgorilla/tgo-ui/components/icon';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\n\n@Component({\n  selector: 'ui-icon-label',\n  templateUrl: './icon-label.component.html',\n  styleUrls: ['./icon-label.component.scss'],\n  standalone: false,\n})\nexport class IconLabelComponent {\n  /**\n   * Icon size\n   *\n   * @type {IconSize}\n   * @memberof IconLabelComponent\n   */\n  @Input() iconSize: IconSize = '16';\n\n  /**\n   * Icon name\n   *\n   * @type {IconName}\n   * @memberof IconLabelComponent\n   */\n  @Input() iconName: IconName;\n\n  /**\n   * Label\n   *\n   * @memberof IconLabelComponent\n   */\n  @Input() text = '';\n\n  /**\n   * Icon color\n   *\n   * @type {IconColor}\n   * @memberof IconLabelComponent\n   */\n  @Input() iconColor? = '';\n\n  /**\n   * Indent between icon and label\n   *\n   * @type {string}\n   * @memberof IconLabelComponent\n   */\n  @HostBinding('style.--icon-indent')\n  @Input()\n  iconIndent? = '8';\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof IconLabelComponent\n   */\n  @Input() applicationTheme: ApplicationTheme = 'light';\n\n  constructor(\n    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n  ) {\n    if (defaultAppTheme) {\n      this.applicationTheme = defaultAppTheme;\n    }\n  }\n}\n","<ui-icon [name]=\"iconName\" [size]=\"iconSize\" [color]=\"iconColor\" aria-hidden=\"true\"></ui-icon>\n<span>{{ text }}</span>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { IconLabelComponent } from './icon-label.component';\n\n@NgModule({\n  declarations: [IconLabelComponent],\n  imports: [CommonModule, IconComponentModule],\n  exports: [IconLabelComponent],\n  providers: [],\n})\nexport class IconLabelComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MAUa,kBAAkB,CAAA;AAmD7B,IAAA,WAAA,CAC6E,eAAiC,EAAA;QAAjC,IAAA,CAAA,eAAe,GAAf,eAAe;AAnD5F;;;;;AAKG;QACM,IAAA,CAAA,QAAQ,GAAa,IAAI;AAUlC;;;;AAIG;QACM,IAAA,CAAA,IAAI,GAAG,EAAE;AAElB;;;;;AAKG;QACM,IAAA,CAAA,SAAS,GAAI,EAAE;AAExB;;;;;AAKG;QAGH,IAAA,CAAA,UAAU,GAAI,GAAG;AAEjB;;;;;;AAMG;QACM,IAAA,CAAA,gBAAgB,GAAqB,OAAO;QAKnD,IAAI,eAAe,EAAE;AACnB,YAAA,IAAI,CAAC,gBAAgB,GAAG,eAAe;QACzC;IACF;AAzDW,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,kBAoDP,oCAAoC,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AApD/C,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,kBAAkB,4SCV/B,mIAEA,EAAA,MAAA,EAAA,CAAA,oGAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,OAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,iBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FDQa,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAN9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,cAGb,KAAK,EAAA,QAAA,EAAA,mIAAA,EAAA,MAAA,EAAA,CAAA,oGAAA,CAAA,EAAA;;0BAsDd;;0BAAY,MAAM;2BAAC,oCAAoC;;sBA7CzD;;sBAQA;;sBAOA;;sBAQA;;sBAQA,WAAW;uBAAC,qBAAqB;;sBACjC;;sBAUA;;;MEhDU,wBAAwB,CAAA;+GAAxB,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAxB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,wBAAwB,iBALpB,kBAAkB,CAAA,EAAA,OAAA,EAAA,CACvB,YAAY,EAAE,mBAAmB,aACjC,kBAAkB,CAAA,EAAA,CAAA,CAAA;gHAGjB,wBAAwB,EAAA,OAAA,EAAA,CAJzB,YAAY,EAAE,mBAAmB,CAAA,EAAA,CAAA,CAAA;;4FAIhC,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBANpC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,kBAAkB,CAAC;AAClC,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,mBAAmB,CAAC;oBAC5C,OAAO,EAAE,CAAC,kBAAkB,CAAC;AAC7B,oBAAA,SAAS,EAAE,EAAE;AACd,iBAAA;;;ACVD;;AAEG;;;;"}
+{"version":3,"file":"testgorilla-tgo-ui-components-icon-label.mjs","sources":["../../../components/icon-label/icon-label.component.ts","../../../components/icon-label/icon-label.component.html","../../../components/icon-label/icon-label.component.module.ts","../../../components/icon-label/testgorilla-tgo-ui-components-icon-label.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Inject, Input, Optional } from '@angular/core';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconName, IconSize, IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\n@Component({\n  selector: 'ui-icon-label',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './icon-label.component.html',\n  styleUrls: ['./icon-label.component.scss'],\n  imports: [IconComponentModule],\n})\nexport class IconLabelComponent {\n  /**\n   * Icon size\n   *\n   * @type {IconSize}\n   * @memberof IconLabelComponent\n   */\n  @Input() iconSize: IconSize = '16';\n\n  /**\n   * Icon name\n   *\n   * @type {IconName}\n   * @memberof IconLabelComponent\n   */\n  @Input() iconName: IconName;\n\n  /**\n   * Label\n   *\n   * @memberof IconLabelComponent\n   */\n  @Input() text = '';\n\n  /**\n   * Icon color\n   *\n   * @type {IconColor}\n   * @memberof IconLabelComponent\n   */\n  @Input() iconColor? = '';\n\n  /**\n   * Indent between icon and label\n   *\n   * @type {string}\n   * @memberof IconLabelComponent\n   */\n  @HostBinding('style.--icon-indent')\n  @Input()\n  iconIndent? = '8';\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof IconLabelComponent\n   */\n  @Input() applicationTheme: ApplicationTheme = 'light';\n\n  constructor(\n    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n  ) {\n    if (defaultAppTheme) {\n      this.applicationTheme = defaultAppTheme;\n    }\n  }\n}\n","<ui-icon [name]=\"iconName\" [size]=\"iconSize\" [color]=\"iconColor\" aria-hidden=\"true\"></ui-icon>\n<span>{{ text }}</span>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\nimport { IconLabelComponent } from './icon-label.component';\n\n@NgModule({\n  imports: [CommonModule, IconComponentModule, IconLabelComponent],\n  exports: [IconLabelComponent],\n  providers: [],\n})\nexport class IconLabelComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}