@testgorilla/tgo-ui 11.22.3 → 12.0.0

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

@@ -1,518 +1,547 @@
-import { NgClass, AsyncPipe, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, ViewChildren, ViewChild, Input, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
-import { BaseChartDirective } from 'ng2-charts';
-import { Color, UiTranslatePipe, MemoizeFuncPipe } from '@testgorilla/tgo-ui/components/core';
-import { SpinnerComponent, SpinnerComponentModule } from '@testgorilla/tgo-ui/components/spinner';
-import { Chart, registerables } from 'chart.js';
-
-// These are the sizes of the canvas, not the chart itself. It includes 40px of padding on all sides.
+import { AsyncPipe, CommonModule, NgClass } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, NgModule, ViewChild, ViewChildren, inject } from "@angular/core";
+import { MatTooltip, MatTooltipModule } from "@angular/material/tooltip";
+import { BaseChartDirective } from "ng2-charts";
+import { Color, MemoizeFuncPipe, UiTranslatePipe } from "@testgorilla/tgo-ui/components/core";
+import { SpinnerComponent, SpinnerComponentModule } from "@testgorilla/tgo-ui/components/spinner";
+import { Chart, registerables } from "chart.js";
 const SmallSpiderChartSize = 200;
 const LargeSpiderChartSize = 280;
-
-class SpiderChartComponent {
-    constructor() {
-        /**
-         * The size of the spider chart.
-         * @type {SpiderChartSize}
-         * @memberof SpiderChartComponent
-         */
-        this.size = 'large';
-        /**
-         * The step size for the spider chart.
-         * @type {number}
-         * @memberof SpiderChartComponent
-         */
-        this.stepSize = 20;
-        /**
-         * The aria label for the spider chart.
-         * @type {string}
-         * @memberof SpiderChartComponent
-         */
-        this.ariaLabel = 'Radar chart. Press tab to navigate through the chart.';
-        /**
-         * Whether the spider chart is loading.
-         * @type {boolean}
-         * @memberof SpiderChartComponent
-         */
-        this.loading = false;
-        /**
-         *
-         * Defines the application theme
-         *
-         * @type {ApplicationTheme}
-         * @memberof SpinnerComponent
-         */
-        this.applicationTheme = 'light';
-        this.radarChartData = {
-            labels: [],
-            datasets: [],
-        };
-        this.labelPositions = {};
-        this.labelStyles = {};
-        this.labelPositionsVisible = false;
-        this.labelStylesCached = false;
-        this.focusedLabelIndex = 0;
-        this.focusedFakeDataPointIndex = 0;
-        this.loadingChartData = {
-            labels: [1, 2, 3, 4, 5, 6],
-            datasets: [],
-        };
-        this.loadingChartOptions = {
-            responsive: true,
-            layout: {
-                padding: {
-                    left: 40,
-                    right: 40,
-                    top: 40,
-                    bottom: 40,
-                },
-            },
-            scales: {
-                r: {
-                    angleLines: {
-                        display: true,
-                        color: Color.GRAYSCALE_30,
-                    },
-                    grid: {
-                        color: () => Color.GRAYSCALE_30,
-                    },
-                    pointLabels: {
-                        display: false,
-                    },
-                    suggestedMin: 0,
-                    suggestedMax: 100,
-                    ticks: {
-                        stepSize: this.stepSize,
-                        display: false,
-                    },
-                },
-            },
-        };
-        this.translationContext = 'CHARTS.SPIDER.';
-        this.cdr = inject(ChangeDetectorRef);
-    }
-    ngOnInit() {
-        if (!this.loading) {
-            this.handleInputErrors();
-            this.setChartData();
-            this.setChartOptions();
-        }
-    }
-    handleInputErrors() {
-        if (!this.spiderChartData.labels || this.spiderChartData.labels.length === 0) {
-            throw new Error('The "labels" input is required and cannot be empty.');
-        }
-        if (!this.spiderChartData.labelDescription || this.spiderChartData.labelDescription.length === 0) {
-            throw new Error('The "labelDescription" input is required and cannot be empty.');
-        }
-        if (this.spiderChartData.labelDescription &&
-            this.spiderChartData.labelDescription.length !== this.spiderChartData.labels.length) {
-            throw new Error('The "labelDescription" input must have the same length as "labels".');
-        }
-        if (!this.spiderChartData.plotData[0].databaseLabel) {
-            throw new Error('The "plotData.databaseLabel" input is required.');
-        }
-        if (!this.spiderChartData.plotData[0].data || this.spiderChartData.plotData[0].data.length === 0) {
-            throw new Error('The "plotData.data" input is required and cannot be empty.');
-        }
-        if (this.spiderChartData.plotData[0].data.length !== this.spiderChartData.labels.length) {
-            throw new Error('The "plotData.data" input must have the same length as "labels".');
-        }
-        if (this.spiderChartData.plotData.length === 2 &&
-            this.spiderChartData.labels.length > 0 &&
-            this.spiderChartData.plotData[1].data &&
-            this.spiderChartData.plotData[1].data.length !== this.spiderChartData.labels.length) {
-            throw new Error('The "plotData.data" input must have the same length as "labels".');
-        }
-    }
-    setChartData() {
-        const datasets = [];
-        datasets.push({
-            label: this.spiderChartData.plotData[0].databaseLabel,
-            data: this.spiderChartData.plotData[0].data,
-            fill: true,
-            backgroundColor: 'rgba(212, 16, 170, 0.2)',
-            borderColor: Color.BRAND_50,
-            pointBackgroundColor: Color.BRAND_50,
-            pointBorderColor: Color.TGO_WHITE,
-            pointHoverBackgroundColor: Color.TGO_WHITE,
-            pointHoverBorderColor: Color.BRAND_50,
-        });
-        if (this.spiderChartData.plotData.length === 2) {
-            datasets.push({
-                label: this.spiderChartData.plotData[1].databaseLabel,
-                data: this.spiderChartData.plotData[1].data,
-                fill: false,
-                borderColor: Color.BLACK,
-                borderDash: [5, 5],
-                borderWidth: 1,
-                pointBackgroundColor: Color.BLACK,
-                pointBorderColor: Color.TGO_WHITE,
-                pointHoverBackgroundColor: Color.TGO_WHITE,
-                pointHoverBorderColor: Color.BLACK,
-            });
-        }
-        this.radarChartData = {
-            labels: this.spiderChartData.labels,
-            datasets,
-        };
-    }
-    setChartOptions() {
-        this.radarChartOptions = {
-            responsive: true,
-            elements: {
-                line: {
-                    borderWidth: 3,
-                },
-            },
-            layout: {
-                padding: {
-                    left: 40,
-                    right: 40,
-                    top: 40,
-                    bottom: 40,
-                },
-            },
-            scales: {
-                r: {
-                    angleLines: {
-                        display: true,
-                        color: Color.BLACK,
-                    },
-                    grid: {
-                        color: context => {
-                            if (context.tick.value === 100) {
-                                return Color.BLACK;
-                            }
-                            return Color.GRAYSCALE_30;
-                        },
-                    },
-                    pointLabels: {
-                        color: 'black',
-                        font: {
-                            family: 'Arial',
-                            size: 14,
-                        },
-                        display: false,
-                    },
-                    suggestedMin: 0,
-                    suggestedMax: 100,
-                    ticks: {
-                        stepSize: this.stepSize,
-                        display: false,
-                    },
-                },
-            },
-            plugins: {
-                legend: {
-                    display: false,
-                },
-            },
-        };
-    }
-    ngAfterViewInit() {
-        if (this.chart?.chart && !this.loading) {
-            this.logCornerCoordinates(this.chart.chart);
-            // Under OnPush nothing re-checks this view between AfterViewInit and the
-            // measurement timeout, so render the (still hidden) label containers now —
-            // otherwise the `@if (labelPositionsVisible)` block hasn't been created yet
-            // and cacheLabelStyles() measures an empty ViewChildren list.
-            this.cdr.detectChanges();
-            // Cache label styles after positions are calculated and DOM is rendered.
-            // We deliberately use setTimeout(0) instead of afterNextRender here: the
-            // callback must fire after the browser has fully painted (fonts swapped,
-            // chart.js canvas drawn) so that offsetWidth/offsetHeight measurements
-            // are sub-pixel stable. afterNextRender fires earlier (pre-paint) and
-            // produced label-position drift in visual tests.
-            setTimeout(() => this.cacheLabelStyles());
-        }
-    }
-    cacheLabelStyles() {
-        if (!this.labelContainers) {
-            return;
-        }
-        this.labelContainers.forEach((ref, index) => {
-            const label = this.spiderChartData.labels[index];
-            const el = ref.nativeElement;
-            this.labelStyles[label] = {
-                left: this.getCenteredLabelLeftPosition(label, el.offsetWidth),
-                bottom: this.getCenteredLabelBottomPosition(label, el.offsetHeight),
-            };
-        });
-        this.labelStylesCached = true;
-        this.cdr.detectChanges();
-    }
-    logCornerCoordinates(chart) {
-        const scale = chart.scales['r'];
-        const canvasWidth = this.size === 'large' ? LargeSpiderChartSize : SmallSpiderChartSize;
-        const canvasHeight = this.size === 'large' ? LargeSpiderChartSize : SmallSpiderChartSize;
-        // Loop through the labels and calculate the percentage coordinates
-        this.spiderChartData.labels.forEach((label, index) => {
-            const position = scale.getPointPositionForValue(index, scale.max);
-            // Calculate percentage values relative to the canvas size
-            const xPercent = (position.x / canvasWidth) * 100;
-            const yPercent = ((canvasHeight - position.y) / canvasHeight) * 100; // Inverting the Y-axis
-            this.labelPositions[label] = { x: Number(xPercent.toFixed(2)), y: Number(yPercent.toFixed(2)) };
-        });
-        this.labelPositionsVisible = true;
-    }
-    getCenteredLabelBottomPosition(label, height) {
-        const position = this.labelPositions[label];
-        const padding = 7;
-        if (position.x > 50 || position.x < 50) {
-            return `calc(${position.y}% - ${height / 2}px)`;
-        }
-        else if (position.y < 50) {
-            return `calc(${position.y}% - ${height}px - ${padding}px)`;
-        }
-        else {
-            return `calc(${position.y}% + ${padding}px)`;
-        }
-    }
-    getCenteredLabelLeftPosition(label, width) {
-        const position = this.labelPositions[label];
-        const padding = 15;
-        if (position.x === 50) {
-            return `calc(${position.x}% - ${width / 2}px)`;
-        }
-        else if (position.x < 50) {
-            return `calc(${position.x}% - ${width}px - ${padding}px)`;
-        }
-        else {
-            return `calc(${position.x}% + ${padding}px)`;
-        }
-    }
-    onLabelKeyDown(event, index) {
-        if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
-            this.focusNextLabel(index);
-        }
-        else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
-            this.focusPreviousLabel(index);
-        }
-    }
-    focusNextLabel(index) {
-        const nextIndex = index + 1;
-        if (nextIndex < this.labelContainers.length) {
-            this.labelContainers.get(nextIndex)?.nativeElement.focus();
-        }
-        else {
-            this.labelContainers.first?.nativeElement.focus();
-        }
-        this.focusedLabelIndex = nextIndex;
-    }
-    focusPreviousLabel(index) {
-        const previousIndex = index - 1;
-        if (previousIndex >= 0) {
-            this.labelContainers.get(previousIndex)?.nativeElement.focus();
-        }
-        else {
-            this.labelContainers.last?.nativeElement.focus();
-        }
-        this.focusedLabelIndex = previousIndex;
-    }
-    onLegendItemKeyDown(event, index) {
-        if (event.key === 'Enter') {
-            this.toggleDatasetVisibility(index);
-        }
-        else if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
-            this.focusNextLegendItem(index);
-        }
-        else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
-            this.focusPreviousLegendItem(index);
-        }
-    }
-    focusNextLegendItem(index) {
-        const nextIndex = index + 1;
-        if (nextIndex < this.legendItems.length) {
-            this.legendItems.get(nextIndex)?.nativeElement.focus();
-        }
-        else {
-            this.legendItems.first?.nativeElement.focus();
-        }
-    }
-    focusPreviousLegendItem(index) {
-        const previousIndex = index - 1;
-        if (previousIndex >= 0) {
-            this.legendItems.get(previousIndex)?.nativeElement.focus();
-        }
-        else {
-            this.legendItems.last?.nativeElement.focus();
-        }
-    }
-    onFakeDataPointsKeyDown(event, index, isSecondary = false) {
-        if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
-            this.focusNextFakeDataPoint(index, isSecondary);
-            this.showTooltipForDataPoint(index + 1 > this.spiderChartData.labels.length ? 0 : index + 1, isSecondary);
-        }
-        else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
-            this.focusPreviousFakeDataPoint(index, isSecondary);
-            this.showTooltipForDataPoint(index - 1 < 0 ? this.spiderChartData.labels.length - 1 : index - 1, isSecondary);
-        }
-        else if (event.key === 'Tab') {
-            this.resetActiveElement();
-        }
-    }
-    focusNextFakeDataPoint(index, isSecondary = false) {
-        const nextIndex = index + 1;
-        if (nextIndex < this.fakeDataPoints.length) {
-            const fakeDataPoints = isSecondary ? this.fakeDataPointsSecondary : this.fakeDataPoints;
-            fakeDataPoints.get(nextIndex)?.nativeElement.focus();
-        }
-        else {
-            const fakeDataPoints = isSecondary ? this.fakeDataPointsSecondary : this.fakeDataPoints;
-            fakeDataPoints.first?.nativeElement.focus();
-        }
-        if (!isSecondary) {
-            this.focusedFakeDataPointIndex = nextIndex;
-        }
-    }
-    focusPreviousFakeDataPoint(index, isSecondary = false) {
-        const previousIndex = index - 1;
-        if (previousIndex >= 0) {
-            const fakeDataPoints = isSecondary ? this.fakeDataPointsSecondary : this.fakeDataPoints;
-            fakeDataPoints.get(previousIndex)?.nativeElement.focus();
-        }
-        else {
-            const fakeDataPoints = isSecondary ? this.fakeDataPointsSecondary : this.fakeDataPoints;
-            fakeDataPoints.last?.nativeElement.focus();
-        }
-        if (!isSecondary) {
-            this.focusedFakeDataPointIndex = previousIndex;
-        }
-    }
-    showTooltipForDataPoint(index, isSecondary = false) {
-        const chartInstance = this.chart?.chart;
-        if (!chartInstance) {
-            return;
-        }
-        const activeElement = [{ datasetIndex: isSecondary ? 1 : 0, index }];
-        const meta = chartInstance.getDatasetMeta(isSecondary ? 1 : 0);
-        const dataPoint = meta.data[index];
-        const eventPosition = {
-            x: dataPoint.x,
-            y: dataPoint.y,
-        };
-        if (!isSecondary) {
-            this.focusedFakeDataPointIndex = index;
-        }
-        chartInstance.tooltip?.setActiveElements(activeElement, eventPosition);
-        chartInstance.update();
-    }
-    resetActiveElement() {
-        const chartInstance = this.chart?.chart;
-        if (!chartInstance) {
-            return;
-        }
-        // Clear the active elements to hide the tooltip
-        chartInstance.tooltip?.setActiveElements([], { x: 0, y: 0 });
-        chartInstance.update();
-    }
-    toggleDatasetVisibility(datasetIndex) {
-        const chartInstance = this.chart?.chart;
-        if (!chartInstance) {
-            return;
-        }
-        const dataset = chartInstance.data.datasets[datasetIndex];
-        dataset.hidden = !dataset.hidden;
-        chartInstance.update();
-    }
-    isDatasetVisible(datasetIndex) {
-        const chartInstance = this.chart?.chart;
-        if (!chartInstance) {
-            return;
-        }
-        return !chartInstance.data.datasets[datasetIndex].hidden;
-    }
-    getFirstLine(label) {
-        const words = label.split(' ');
-        let firstLine = '';
-        for (const word of words) {
-            if ((firstLine + word).length <= 20) {
-                firstLine += (firstLine ? ' ' : '') + word;
-            }
-            else {
-                break;
-            }
-        }
-        return firstLine;
-    }
-    getSecondLine(label) {
-        const firstLine = this.getFirstLine(label);
-        return label.substring(firstLine.length).trim();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SpiderChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: SpiderChartComponent, isStandalone: true, selector: "ui-spider-chart", inputs: { size: "size", spiderChartData: "spiderChartData", stepSize: "stepSize", ariaLabel: "ariaLabel", loading: "loading", applicationTheme: "applicationTheme" }, viewQueries: [{ propertyName: "chart", first: true, predicate: BaseChartDirective, descendants: true }, { propertyName: "labelContainers", predicate: ["labelContainer"], descendants: true }, { propertyName: "fakeDataPoints", predicate: ["fakeDataPoints"], descendants: true }, { propertyName: "fakeDataPointsSecondary", predicate: ["fakeDataPointsSecondary"], descendants: true }, { propertyName: "legendItems", predicate: ["legendItem"], descendants: true }], ngImport: i0, template: "<div class=\"spider-chart-container\" tabindex=\"0\" [attr.aria-label]=\"ariaLabel\">\n  <div\n    class=\"spacing-container\"\n    [ngClass]=\"{ 'small-spacing': radarChartData.labels && radarChartData.labels.length % 2 === 1 && !loading }\"\n  >\n    <div\n      class=\"chart-container\"\n      [style.width]=\"size === 'large' ? '280px' : '200px'\"\n      [style.height]=\"size === 'large' ? '280px' : '200px'\"\n    >\n      @if (!loading) {\n        <canvas baseChart [data]=\"radarChartData\" [options]=\"radarChartOptions\" type=\"radar\" class=\"chart\"> </canvas>\n      } @else {\n        <canvas baseChart [data]=\"loadingChartData\" [options]=\"loadingChartOptions\" type=\"radar\" class=\"chart\">\n        </canvas>\n        <ui-spinner></ui-spinner>\n      }\n\n      @if (labelPositionsVisible) {\n        <div class=\"overlay-container\" [style.visibility]=\"labelStylesCached ? 'visible' : 'hidden'\">\n          @for (label of spiderChartData.labels; track label) {\n            <div\n              class=\"label-container\"\n              #labelContainer\n              [matTooltip]=\"spiderChartData.labelDescription[$index]\"\n              [tabindex]=\"$index === 0 ? '0' : '-1'\"\n              (keydown)=\"onLabelKeyDown($event, $index)\"\n              [attr.aria-label]=\"spiderChartData.labelDescription[$index]\"\n              [style.left]=\"labelStyles[label]?.left\"\n              [style.bottom]=\"labelStyles[label]?.bottom\"\n            >\n              @if (!(label.length > 20 && size === 'large' && spiderChartData.labels.length < 9)) {\n                <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n                  {{ label }}\n                </div>\n              } @else {\n                <div>\n                  <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n                    {{ label | memoizeFunc: getFirstLine }}\n                  </div>\n                  <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n                    {{ label | memoizeFunc: getSecondLine : this }}\n                  </div>\n                </div>\n              }\n              <span class=\"value\">{{ spiderChartData.plotData[0].data[$index] }}</span>\n            </div>\n            <span\n              class=\"fake-data-points\"\n              #fakeDataPoints\n              [tabindex]=\"focusedLabelIndex === $index ? '0' : '-1'\"\n              (focus)=\"$index === focusedLabelIndex ? showTooltipForDataPoint($index) : null\"\n              (keydown)=\"onFakeDataPointsKeyDown($event, $index)\"\n            >\n            </span>\n            @if (radarChartData.datasets.length > 1) {\n              <span\n                class=\"fake-data-points-secondary\"\n                #fakeDataPointsSecondary\n                [tabindex]=\"focusedFakeDataPointIndex === $index ? '0' : '-1'\"\n                (focus)=\"$index === focusedFakeDataPointIndex ? showTooltipForDataPoint($index, true) : null\"\n                (keydown)=\"onFakeDataPointsKeyDown($event, $index, true)\"\n              >\n              </span>\n            }\n          }\n        </div>\n      }\n    </div>\n  </div>\n  @if (radarChartData.datasets.length > 0) {\n    <div class=\"legend-container\">\n      @for (dataset of radarChartData.datasets; track dataset.label) {\n        <div\n          class=\"legend-item\"\n          (click)=\"toggleDatasetVisibility($index)\"\n          [tabindex]=\"$index === 0 ? '0' : '-1'\"\n          role=\"button\"\n          [attr.aria-pressed]=\"isDatasetVisible($index) ? false : true\"\n          [attr.aria-label]=\"\n            isDatasetVisible($index)\n              ? (translationContext + 'DATASET_VISIBLE' | uiTranslate: { dataset: dataset.label } | async)\n              : (translationContext + 'DATASET_HIDDEN' | uiTranslate: { dataset: dataset.label } | async)\n          \"\n          (keydown)=\"onLegendItemKeyDown($event, $index)\"\n          #legendItem\n        >\n          <span class=\"legend-line\" [ngClass]=\"{ 'solid-line': $index === 0, 'dashed-line': $index === 1 }\"></span>\n          <span class=\"legend-label\" [style.text-decoration]=\"isDatasetVisible($index) ? 'none' : 'line-through'\">\n            {{ dataset.label }}\n          </span>\n        </div>\n      }\n    </div>\n  }\n</div>\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}.spider-chart-container{display:flex;flex-direction:column;align-items:center}.spider-chart-container .spacing-container{padding:40px 140px}.spider-chart-container .spacing-container.small-spacing{padding:0 80px}.spider-chart-container .spacing-container .chart-container{position:relative}.spider-chart-container .spacing-container .chart-container .overlay-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container{display:flex;gap:4px;position:absolute;pointer-events:all;cursor:pointer}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .fake-data-points{visibility:hidden}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container:focus{outline:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .label{font-size:12px;border-bottom:1px dashed #d3d3d3;white-space:nowrap;overflow:hidden;width:fit-content;text-overflow:ellipsis}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .value{font-weight:700}.spider-chart-container .legend-container{display:flex;gap:16px;cursor:pointer}.spider-chart-container .legend-container .legend-item{display:flex;align-items:center;gap:8px}.spider-chart-container .legend-container .legend-item .legend-line{display:inline-block;width:11px;height:4px}.spider-chart-container .legend-container .legend-item .solid-line{background-color:#d410aa}.spider-chart-container .legend-container .legend-item .dashed-line{border-top:2px dashed #242424}:host ::ng-deep .spider-chart-container .spinner-container.loader{position:absolute}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }, { kind: "component", type: SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme", "iconName", "iconSize"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: MemoizeFuncPipe, name: "memoizeFunc" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SpiderChartComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-spider-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, BaseChartDirective, SpinnerComponent, MatTooltip, UiTranslatePipe, MemoizeFuncPipe, AsyncPipe], template: "<div class=\"spider-chart-container\" tabindex=\"0\" [attr.aria-label]=\"ariaLabel\">\n  <div\n    class=\"spacing-container\"\n    [ngClass]=\"{ 'small-spacing': radarChartData.labels && radarChartData.labels.length % 2 === 1 && !loading }\"\n  >\n    <div\n      class=\"chart-container\"\n      [style.width]=\"size === 'large' ? '280px' : '200px'\"\n      [style.height]=\"size === 'large' ? '280px' : '200px'\"\n    >\n      @if (!loading) {\n        <canvas baseChart [data]=\"radarChartData\" [options]=\"radarChartOptions\" type=\"radar\" class=\"chart\"> </canvas>\n      } @else {\n        <canvas baseChart [data]=\"loadingChartData\" [options]=\"loadingChartOptions\" type=\"radar\" class=\"chart\">\n        </canvas>\n        <ui-spinner></ui-spinner>\n      }\n\n      @if (labelPositionsVisible) {\n        <div class=\"overlay-container\" [style.visibility]=\"labelStylesCached ? 'visible' : 'hidden'\">\n          @for (label of spiderChartData.labels; track label) {\n            <div\n              class=\"label-container\"\n              #labelContainer\n              [matTooltip]=\"spiderChartData.labelDescription[$index]\"\n              [tabindex]=\"$index === 0 ? '0' : '-1'\"\n              (keydown)=\"onLabelKeyDown($event, $index)\"\n              [attr.aria-label]=\"spiderChartData.labelDescription[$index]\"\n              [style.left]=\"labelStyles[label]?.left\"\n              [style.bottom]=\"labelStyles[label]?.bottom\"\n            >\n              @if (!(label.length > 20 && size === 'large' && spiderChartData.labels.length < 9)) {\n                <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n                  {{ label }}\n                </div>\n              } @else {\n                <div>\n                  <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n                    {{ label | memoizeFunc: getFirstLine }}\n                  </div>\n                  <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n                    {{ label | memoizeFunc: getSecondLine : this }}\n                  </div>\n                </div>\n              }\n              <span class=\"value\">{{ spiderChartData.plotData[0].data[$index] }}</span>\n            </div>\n            <span\n              class=\"fake-data-points\"\n              #fakeDataPoints\n              [tabindex]=\"focusedLabelIndex === $index ? '0' : '-1'\"\n              (focus)=\"$index === focusedLabelIndex ? showTooltipForDataPoint($index) : null\"\n              (keydown)=\"onFakeDataPointsKeyDown($event, $index)\"\n            >\n            </span>\n            @if (radarChartData.datasets.length > 1) {\n              <span\n                class=\"fake-data-points-secondary\"\n                #fakeDataPointsSecondary\n                [tabindex]=\"focusedFakeDataPointIndex === $index ? '0' : '-1'\"\n                (focus)=\"$index === focusedFakeDataPointIndex ? showTooltipForDataPoint($index, true) : null\"\n                (keydown)=\"onFakeDataPointsKeyDown($event, $index, true)\"\n              >\n              </span>\n            }\n          }\n        </div>\n      }\n    </div>\n  </div>\n  @if (radarChartData.datasets.length > 0) {\n    <div class=\"legend-container\">\n      @for (dataset of radarChartData.datasets; track dataset.label) {\n        <div\n          class=\"legend-item\"\n          (click)=\"toggleDatasetVisibility($index)\"\n          [tabindex]=\"$index === 0 ? '0' : '-1'\"\n          role=\"button\"\n          [attr.aria-pressed]=\"isDatasetVisible($index) ? false : true\"\n          [attr.aria-label]=\"\n            isDatasetVisible($index)\n              ? (translationContext + 'DATASET_VISIBLE' | uiTranslate: { dataset: dataset.label } | async)\n              : (translationContext + 'DATASET_HIDDEN' | uiTranslate: { dataset: dataset.label } | async)\n          \"\n          (keydown)=\"onLegendItemKeyDown($event, $index)\"\n          #legendItem\n        >\n          <span class=\"legend-line\" [ngClass]=\"{ 'solid-line': $index === 0, 'dashed-line': $index === 1 }\"></span>\n          <span class=\"legend-label\" [style.text-decoration]=\"isDatasetVisible($index) ? 'none' : 'line-through'\">\n            {{ dataset.label }}\n          </span>\n        </div>\n      }\n    </div>\n  }\n</div>\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}.spider-chart-container{display:flex;flex-direction:column;align-items:center}.spider-chart-container .spacing-container{padding:40px 140px}.spider-chart-container .spacing-container.small-spacing{padding:0 80px}.spider-chart-container .spacing-container .chart-container{position:relative}.spider-chart-container .spacing-container .chart-container .overlay-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container{display:flex;gap:4px;position:absolute;pointer-events:all;cursor:pointer}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .fake-data-points{visibility:hidden}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container:focus{outline:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .label{font-size:12px;border-bottom:1px dashed #d3d3d3;white-space:nowrap;overflow:hidden;width:fit-content;text-overflow:ellipsis}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .value{font-weight:700}.spider-chart-container .legend-container{display:flex;gap:16px;cursor:pointer}.spider-chart-container .legend-container .legend-item{display:flex;align-items:center;gap:8px}.spider-chart-container .legend-container .legend-item .legend-line{display:inline-block;width:11px;height:4px}.spider-chart-container .legend-container .legend-item .solid-line{background-color:#d410aa}.spider-chart-container .legend-container .legend-item .dashed-line{border-top:2px dashed #242424}:host ::ng-deep .spider-chart-container .spinner-container.loader{position:absolute}\n"] }]
-        }], propDecorators: { size: [{
-                type: Input
-            }], spiderChartData: [{
-                type: Input
-            }], stepSize: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], applicationTheme: [{
-                type: Input
-            }], chart: [{
-                type: ViewChild,
-                args: [BaseChartDirective]
-            }], labelContainers: [{
-                type: ViewChildren,
-                args: ['labelContainer']
-            }], fakeDataPoints: [{
-                type: ViewChildren,
-                args: ['fakeDataPoints']
-            }], fakeDataPointsSecondary: [{
-                type: ViewChildren,
-                args: ['fakeDataPointsSecondary']
-            }], legendItems: [{
-                type: ViewChildren,
-                args: ['legendItem']
-            }] } });
-
+var SpiderChartComponent = class SpiderChartComponent {
+	constructor() {
+		this.size = "large";
+		this.stepSize = 20;
+		this.ariaLabel = "Radar chart. Press tab to navigate through the chart.";
+		this.loading = false;
+		this.applicationTheme = "light";
+		this.radarChartData = {
+			labels: [],
+			datasets: []
+		};
+		this.labelPositions = {};
+		this.labelStyles = {};
+		this.labelPositionsVisible = false;
+		this.labelStylesCached = false;
+		this.focusedLabelIndex = 0;
+		this.focusedFakeDataPointIndex = 0;
+		this.loadingChartData = {
+			labels: [
+				1,
+				2,
+				3,
+				4,
+				5,
+				6
+			],
+			datasets: []
+		};
+		this.loadingChartOptions = {
+			responsive: true,
+			layout: { padding: {
+				left: 40,
+				right: 40,
+				top: 40,
+				bottom: 40
+			} },
+			scales: { r: {
+				angleLines: {
+					display: true,
+					color: Color.GRAYSCALE_30
+				},
+				grid: { color: () => Color.GRAYSCALE_30 },
+				pointLabels: { display: false },
+				suggestedMin: 0,
+				suggestedMax: 100,
+				ticks: {
+					stepSize: this.stepSize,
+					display: false
+				}
+			} }
+		};
+		this.translationContext = "CHARTS.SPIDER.";
+		this.cdr = inject(ChangeDetectorRef);
+	}
+	ngOnInit() {
+		if (!this.loading) {
+			this.handleInputErrors();
+			this.setChartData();
+			this.setChartOptions();
+		}
+	}
+	handleInputErrors() {
+		if (!this.spiderChartData.labels || this.spiderChartData.labels.length === 0) throw new Error("The \"labels\" input is required and cannot be empty.");
+		if (!this.spiderChartData.labelDescription || this.spiderChartData.labelDescription.length === 0) throw new Error("The \"labelDescription\" input is required and cannot be empty.");
+		if (this.spiderChartData.labelDescription && this.spiderChartData.labelDescription.length !== this.spiderChartData.labels.length) throw new Error("The \"labelDescription\" input must have the same length as \"labels\".");
+		if (!this.spiderChartData.plotData[0].databaseLabel) throw new Error("The \"plotData.databaseLabel\" input is required.");
+		if (!this.spiderChartData.plotData[0].data || this.spiderChartData.plotData[0].data.length === 0) throw new Error("The \"plotData.data\" input is required and cannot be empty.");
+		if (this.spiderChartData.plotData[0].data.length !== this.spiderChartData.labels.length) throw new Error("The \"plotData.data\" input must have the same length as \"labels\".");
+		if (this.spiderChartData.plotData.length === 2 && this.spiderChartData.labels.length > 0 && this.spiderChartData.plotData[1].data && this.spiderChartData.plotData[1].data.length !== this.spiderChartData.labels.length) throw new Error("The \"plotData.data\" input must have the same length as \"labels\".");
+	}
+	setChartData() {
+		const datasets = [];
+		datasets.push({
+			label: this.spiderChartData.plotData[0].databaseLabel,
+			data: this.spiderChartData.plotData[0].data,
+			fill: true,
+			backgroundColor: "rgba(212, 16, 170, 0.2)",
+			borderColor: Color.BRAND_50,
+			pointBackgroundColor: Color.BRAND_50,
+			pointBorderColor: Color.TGO_WHITE,
+			pointHoverBackgroundColor: Color.TGO_WHITE,
+			pointHoverBorderColor: Color.BRAND_50
+		});
+		if (this.spiderChartData.plotData.length === 2) datasets.push({
+			label: this.spiderChartData.plotData[1].databaseLabel,
+			data: this.spiderChartData.plotData[1].data,
+			fill: false,
+			borderColor: Color.BLACK,
+			borderDash: [5, 5],
+			borderWidth: 1,
+			pointBackgroundColor: Color.BLACK,
+			pointBorderColor: Color.TGO_WHITE,
+			pointHoverBackgroundColor: Color.TGO_WHITE,
+			pointHoverBorderColor: Color.BLACK
+		});
+		this.radarChartData = {
+			labels: this.spiderChartData.labels,
+			datasets
+		};
+	}
+	setChartOptions() {
+		this.radarChartOptions = {
+			responsive: true,
+			elements: { line: { borderWidth: 3 } },
+			layout: { padding: {
+				left: 40,
+				right: 40,
+				top: 40,
+				bottom: 40
+			} },
+			scales: { r: {
+				angleLines: {
+					display: true,
+					color: Color.BLACK
+				},
+				grid: { color: (context) => {
+					if (context.tick.value === 100) return Color.BLACK;
+					return Color.GRAYSCALE_30;
+				} },
+				pointLabels: {
+					color: "black",
+					font: {
+						family: "Arial",
+						size: 14
+					},
+					display: false
+				},
+				suggestedMin: 0,
+				suggestedMax: 100,
+				ticks: {
+					stepSize: this.stepSize,
+					display: false
+				}
+			} },
+			plugins: { legend: { display: false } }
+		};
+	}
+	ngAfterViewInit() {
+		if (this.chart?.chart && !this.loading) {
+			this.logCornerCoordinates(this.chart.chart);
+			this.cdr.detectChanges();
+			setTimeout(() => this.cacheLabelStyles());
+		}
+	}
+	cacheLabelStyles() {
+		if (!this.labelContainers) return;
+		this.labelContainers.forEach((ref, index) => {
+			const label = this.spiderChartData.labels[index];
+			const el = ref.nativeElement;
+			this.labelStyles[label] = {
+				left: this.getCenteredLabelLeftPosition(label, el.offsetWidth),
+				bottom: this.getCenteredLabelBottomPosition(label, el.offsetHeight)
+			};
+		});
+		this.labelStylesCached = true;
+		this.cdr.detectChanges();
+	}
+	logCornerCoordinates(chart) {
+		const scale = chart.scales["r"];
+		const canvasWidth = this.size === "large" ? 280 : 200;
+		const canvasHeight = this.size === "large" ? 280 : 200;
+		this.spiderChartData.labels.forEach((label, index) => {
+			const position = scale.getPointPositionForValue(index, scale.max);
+			const xPercent = position.x / canvasWidth * 100;
+			const yPercent = (canvasHeight - position.y) / canvasHeight * 100;
+			this.labelPositions[label] = {
+				x: Number(xPercent.toFixed(2)),
+				y: Number(yPercent.toFixed(2))
+			};
+		});
+		this.labelPositionsVisible = true;
+	}
+	getCenteredLabelBottomPosition(label, height) {
+		const position = this.labelPositions[label];
+		const padding = 7;
+		if (position.x > 50 || position.x < 50) return `calc(${position.y}% - ${height / 2}px)`;
+		else if (position.y < 50) return `calc(${position.y}% - ${height}px - ${padding}px)`;
+		else return `calc(${position.y}% + ${padding}px)`;
+	}
+	getCenteredLabelLeftPosition(label, width) {
+		const position = this.labelPositions[label];
+		const padding = 15;
+		if (position.x === 50) return `calc(${position.x}% - ${width / 2}px)`;
+		else if (position.x < 50) return `calc(${position.x}% - ${width}px - ${padding}px)`;
+		else return `calc(${position.x}% + ${padding}px)`;
+	}
+	onLabelKeyDown(event, index) {
+		if (event.key === "ArrowRight" || event.key === "ArrowDown") this.focusNextLabel(index);
+		else if (event.key === "ArrowLeft" || event.key === "ArrowUp") this.focusPreviousLabel(index);
+	}
+	focusNextLabel(index) {
+		const nextIndex = index + 1;
+		if (nextIndex < this.labelContainers.length) this.labelContainers.get(nextIndex)?.nativeElement.focus();
+		else this.labelContainers.first?.nativeElement.focus();
+		this.focusedLabelIndex = nextIndex;
+	}
+	focusPreviousLabel(index) {
+		const previousIndex = index - 1;
+		if (previousIndex >= 0) this.labelContainers.get(previousIndex)?.nativeElement.focus();
+		else this.labelContainers.last?.nativeElement.focus();
+		this.focusedLabelIndex = previousIndex;
+	}
+	onLegendItemKeyDown(event, index) {
+		if (event.key === "Enter") this.toggleDatasetVisibility(index);
+		else if (event.key === "ArrowRight" || event.key === "ArrowDown") this.focusNextLegendItem(index);
+		else if (event.key === "ArrowLeft" || event.key === "ArrowUp") this.focusPreviousLegendItem(index);
+	}
+	focusNextLegendItem(index) {
+		const nextIndex = index + 1;
+		if (nextIndex < this.legendItems.length) this.legendItems.get(nextIndex)?.nativeElement.focus();
+		else this.legendItems.first?.nativeElement.focus();
+	}
+	focusPreviousLegendItem(index) {
+		const previousIndex = index - 1;
+		if (previousIndex >= 0) this.legendItems.get(previousIndex)?.nativeElement.focus();
+		else this.legendItems.last?.nativeElement.focus();
+	}
+	onFakeDataPointsKeyDown(event, index, isSecondary = false) {
+		if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+			this.focusNextFakeDataPoint(index, isSecondary);
+			this.showTooltipForDataPoint(index + 1 > this.spiderChartData.labels.length ? 0 : index + 1, isSecondary);
+		} else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+			this.focusPreviousFakeDataPoint(index, isSecondary);
+			this.showTooltipForDataPoint(index - 1 < 0 ? this.spiderChartData.labels.length - 1 : index - 1, isSecondary);
+		} else if (event.key === "Tab") this.resetActiveElement();
+	}
+	focusNextFakeDataPoint(index, isSecondary = false) {
+		const nextIndex = index + 1;
+		if (nextIndex < this.fakeDataPoints.length) (isSecondary ? this.fakeDataPointsSecondary : this.fakeDataPoints).get(nextIndex)?.nativeElement.focus();
+		else (isSecondary ? this.fakeDataPointsSecondary : this.fakeDataPoints).first?.nativeElement.focus();
+		if (!isSecondary) this.focusedFakeDataPointIndex = nextIndex;
+	}
+	focusPreviousFakeDataPoint(index, isSecondary = false) {
+		const previousIndex = index - 1;
+		if (previousIndex >= 0) (isSecondary ? this.fakeDataPointsSecondary : this.fakeDataPoints).get(previousIndex)?.nativeElement.focus();
+		else (isSecondary ? this.fakeDataPointsSecondary : this.fakeDataPoints).last?.nativeElement.focus();
+		if (!isSecondary) this.focusedFakeDataPointIndex = previousIndex;
+	}
+	showTooltipForDataPoint(index, isSecondary = false) {
+		const chartInstance = this.chart?.chart;
+		if (!chartInstance) return;
+		const activeElement = [{
+			datasetIndex: isSecondary ? 1 : 0,
+			index
+		}];
+		const dataPoint = chartInstance.getDatasetMeta(isSecondary ? 1 : 0).data[index];
+		const eventPosition = {
+			x: dataPoint.x,
+			y: dataPoint.y
+		};
+		if (!isSecondary) this.focusedFakeDataPointIndex = index;
+		chartInstance.tooltip?.setActiveElements(activeElement, eventPosition);
+		chartInstance.update();
+	}
+	resetActiveElement() {
+		const chartInstance = this.chart?.chart;
+		if (!chartInstance) return;
+		chartInstance.tooltip?.setActiveElements([], {
+			x: 0,
+			y: 0
+		});
+		chartInstance.update();
+	}
+	toggleDatasetVisibility(datasetIndex) {
+		const chartInstance = this.chart?.chart;
+		if (!chartInstance) return;
+		const dataset = chartInstance.data.datasets[datasetIndex];
+		dataset.hidden = !dataset.hidden;
+		chartInstance.update();
+	}
+	isDatasetVisible(datasetIndex) {
+		const chartInstance = this.chart?.chart;
+		if (!chartInstance) return;
+		return !chartInstance.data.datasets[datasetIndex].hidden;
+	}
+	getFirstLine(label) {
+		const words = label.split(" ");
+		let firstLine = "";
+		for (const word of words) if ((firstLine + word).length <= 20) firstLine += (firstLine ? " " : "") + word;
+		else break;
+		return firstLine;
+	}
+	getSecondLine(label) {
+		const firstLine = this.getFirstLine(label);
+		return label.substring(firstLine.length).trim();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SpiderChartComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.4",
+			type: SpiderChartComponent,
+			isStandalone: true,
+			selector: "ui-spider-chart",
+			inputs: {
+				size: "size",
+				spiderChartData: "spiderChartData",
+				stepSize: "stepSize",
+				ariaLabel: "ariaLabel",
+				loading: "loading",
+				applicationTheme: "applicationTheme"
+			},
+			viewQueries: [
+				{
+					propertyName: "chart",
+					first: true,
+					predicate: BaseChartDirective,
+					descendants: true
+				},
+				{
+					propertyName: "labelContainers",
+					predicate: ["labelContainer"],
+					descendants: true
+				},
+				{
+					propertyName: "fakeDataPoints",
+					predicate: ["fakeDataPoints"],
+					descendants: true
+				},
+				{
+					propertyName: "fakeDataPointsSecondary",
+					predicate: ["fakeDataPointsSecondary"],
+					descendants: true
+				},
+				{
+					propertyName: "legendItems",
+					predicate: ["legendItem"],
+					descendants: true
+				}
+			],
+			ngImport: i0,
+			template: "<div class=\"spider-chart-container\" tabindex=\"0\" [attr.aria-label]=\"ariaLabel\">\n  <div\n    class=\"spacing-container\"\n    [ngClass]=\"{ 'small-spacing': radarChartData.labels && radarChartData.labels.length % 2 === 1 && !loading }\"\n  >\n    <div\n      class=\"chart-container\"\n      [style.width]=\"size === 'large' ? '280px' : '200px'\"\n      [style.height]=\"size === 'large' ? '280px' : '200px'\"\n    >\n      @if (!loading) {\n        <canvas baseChart [data]=\"radarChartData\" [options]=\"radarChartOptions\" type=\"radar\" class=\"chart\"> </canvas>\n      } @else {\n        <canvas baseChart [data]=\"loadingChartData\" [options]=\"loadingChartOptions\" type=\"radar\" class=\"chart\">\n        </canvas>\n        <ui-spinner></ui-spinner>\n      }\n\n      @if (labelPositionsVisible) {\n        <div class=\"overlay-container\" [style.visibility]=\"labelStylesCached ? 'visible' : 'hidden'\">\n          @for (label of spiderChartData.labels; track label) {\n            <div\n              class=\"label-container\"\n              #labelContainer\n              [matTooltip]=\"spiderChartData.labelDescription[$index]\"\n              [tabindex]=\"$index === 0 ? '0' : '-1'\"\n              (keydown)=\"onLabelKeyDown($event, $index)\"\n              [attr.aria-label]=\"spiderChartData.labelDescription[$index]\"\n              [style.left]=\"labelStyles[label]?.left\"\n              [style.bottom]=\"labelStyles[label]?.bottom\"\n            >\n              @if (!(label.length > 20 && size === 'large' && spiderChartData.labels.length < 9)) {\n                <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n                  {{ label }}\n                </div>\n              } @else {\n                <div>\n                  <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n                    {{ label | memoizeFunc: getFirstLine }}\n                  </div>\n                  <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n                    {{ label | memoizeFunc: getSecondLine : this }}\n                  </div>\n                </div>\n              }\n              <span class=\"value\">{{ spiderChartData.plotData[0].data[$index] }}</span>\n            </div>\n            <span\n              class=\"fake-data-points\"\n              #fakeDataPoints\n              [tabindex]=\"focusedLabelIndex === $index ? '0' : '-1'\"\n              (focus)=\"$index === focusedLabelIndex ? showTooltipForDataPoint($index) : null\"\n              (keydown)=\"onFakeDataPointsKeyDown($event, $index)\"\n            >\n            </span>\n            @if (radarChartData.datasets.length > 1) {\n              <span\n                class=\"fake-data-points-secondary\"\n                #fakeDataPointsSecondary\n                [tabindex]=\"focusedFakeDataPointIndex === $index ? '0' : '-1'\"\n                (focus)=\"$index === focusedFakeDataPointIndex ? showTooltipForDataPoint($index, true) : null\"\n                (keydown)=\"onFakeDataPointsKeyDown($event, $index, true)\"\n              >\n              </span>\n            }\n          }\n        </div>\n      }\n    </div>\n  </div>\n  @if (radarChartData.datasets.length > 0) {\n    <div class=\"legend-container\">\n      @for (dataset of radarChartData.datasets; track dataset.label) {\n        <div\n          class=\"legend-item\"\n          (click)=\"toggleDatasetVisibility($index)\"\n          [tabindex]=\"$index === 0 ? '0' : '-1'\"\n          role=\"button\"\n          [attr.aria-pressed]=\"isDatasetVisible($index) ? false : true\"\n          [attr.aria-label]=\"\n            isDatasetVisible($index)\n              ? (translationContext + 'DATASET_VISIBLE' | uiTranslate: { dataset: dataset.label } | async)\n              : (translationContext + 'DATASET_HIDDEN' | uiTranslate: { dataset: dataset.label } | async)\n          \"\n          (keydown)=\"onLegendItemKeyDown($event, $index)\"\n          #legendItem\n        >\n          <span class=\"legend-line\" [ngClass]=\"{ 'solid-line': $index === 0, 'dashed-line': $index === 1 }\"></span>\n          <span class=\"legend-label\" [style.text-decoration]=\"isDatasetVisible($index) ? 'none' : 'line-through'\">\n            {{ dataset.label }}\n          </span>\n        </div>\n      }\n    </div>\n  }\n</div>\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}.spider-chart-container{display:flex;flex-direction:column;align-items:center}.spider-chart-container .spacing-container{padding:40px 140px}.spider-chart-container .spacing-container.small-spacing{padding:0 80px}.spider-chart-container .spacing-container .chart-container{position:relative}.spider-chart-container .spacing-container .chart-container .overlay-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container{display:flex;gap:4px;position:absolute;pointer-events:all;cursor:pointer}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .fake-data-points{visibility:hidden}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container:focus{outline:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .label{font-size:12px;border-bottom:1px dashed #d3d3d3;white-space:nowrap;overflow:hidden;width:fit-content;text-overflow:ellipsis}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .value{font-weight:700}.spider-chart-container .legend-container{display:flex;gap:16px;cursor:pointer}.spider-chart-container .legend-container .legend-item{display:flex;align-items:center;gap:8px}.spider-chart-container .legend-container .legend-item .legend-line{display:inline-block;width:11px;height:4px}.spider-chart-container .legend-container .legend-item .solid-line{background-color:#d410aa}.spider-chart-container .legend-container .legend-item .dashed-line{border-top:2px dashed #242424}:host ::ng-deep .spider-chart-container .spinner-container.loader{position:absolute}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgClass,
+					selector: "[ngClass]",
+					inputs: ["class", "ngClass"]
+				},
+				{
+					kind: "directive",
+					type: BaseChartDirective,
+					selector: "canvas[baseChart]",
+					inputs: [
+						"type",
+						"legend",
+						"data",
+						"options",
+						"plugins",
+						"labels",
+						"datasets"
+					],
+					outputs: ["chartClick", "chartHover"],
+					exportAs: ["base-chart"]
+				},
+				{
+					kind: "component",
+					type: SpinnerComponent,
+					selector: "ui-spinner",
+					inputs: [
+						"size",
+						"isLoader",
+						"text",
+						"applicationTheme",
+						"iconName",
+						"iconSize"
+					]
+				},
+				{
+					kind: "directive",
+					type: MatTooltip,
+					selector: "[matTooltip]",
+					inputs: [
+						"matTooltipPosition",
+						"matTooltipPositionAtOrigin",
+						"matTooltipDisabled",
+						"matTooltipShowDelay",
+						"matTooltipHideDelay",
+						"matTooltipTouchGestures",
+						"matTooltip",
+						"matTooltipClass"
+					],
+					exportAs: ["matTooltip"]
+				},
+				{
+					kind: "pipe",
+					type: UiTranslatePipe,
+					name: "uiTranslate"
+				},
+				{
+					kind: "pipe",
+					type: MemoizeFuncPipe,
+					name: "memoizeFunc"
+				},
+				{
+					kind: "pipe",
+					type: AsyncPipe,
+					name: "async"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: SpiderChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-spider-chart",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				NgClass,
+				BaseChartDirective,
+				SpinnerComponent,
+				MatTooltip,
+				UiTranslatePipe,
+				MemoizeFuncPipe,
+				AsyncPipe
+			],
+			template: "<div class=\"spider-chart-container\" tabindex=\"0\" [attr.aria-label]=\"ariaLabel\">\n  <div\n    class=\"spacing-container\"\n    [ngClass]=\"{ 'small-spacing': radarChartData.labels && radarChartData.labels.length % 2 === 1 && !loading }\"\n  >\n    <div\n      class=\"chart-container\"\n      [style.width]=\"size === 'large' ? '280px' : '200px'\"\n      [style.height]=\"size === 'large' ? '280px' : '200px'\"\n    >\n      @if (!loading) {\n        <canvas baseChart [data]=\"radarChartData\" [options]=\"radarChartOptions\" type=\"radar\" class=\"chart\"> </canvas>\n      } @else {\n        <canvas baseChart [data]=\"loadingChartData\" [options]=\"loadingChartOptions\" type=\"radar\" class=\"chart\">\n        </canvas>\n        <ui-spinner></ui-spinner>\n      }\n\n      @if (labelPositionsVisible) {\n        <div class=\"overlay-container\" [style.visibility]=\"labelStylesCached ? 'visible' : 'hidden'\">\n          @for (label of spiderChartData.labels; track label) {\n            <div\n              class=\"label-container\"\n              #labelContainer\n              [matTooltip]=\"spiderChartData.labelDescription[$index]\"\n              [tabindex]=\"$index === 0 ? '0' : '-1'\"\n              (keydown)=\"onLabelKeyDown($event, $index)\"\n              [attr.aria-label]=\"spiderChartData.labelDescription[$index]\"\n              [style.left]=\"labelStyles[label]?.left\"\n              [style.bottom]=\"labelStyles[label]?.bottom\"\n            >\n              @if (!(label.length > 20 && size === 'large' && spiderChartData.labels.length < 9)) {\n                <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n                  {{ label }}\n                </div>\n              } @else {\n                <div>\n                  <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n                    {{ label | memoizeFunc: getFirstLine }}\n                  </div>\n                  <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n                    {{ label | memoizeFunc: getSecondLine : this }}\n                  </div>\n                </div>\n              }\n              <span class=\"value\">{{ spiderChartData.plotData[0].data[$index] }}</span>\n            </div>\n            <span\n              class=\"fake-data-points\"\n              #fakeDataPoints\n              [tabindex]=\"focusedLabelIndex === $index ? '0' : '-1'\"\n              (focus)=\"$index === focusedLabelIndex ? showTooltipForDataPoint($index) : null\"\n              (keydown)=\"onFakeDataPointsKeyDown($event, $index)\"\n            >\n            </span>\n            @if (radarChartData.datasets.length > 1) {\n              <span\n                class=\"fake-data-points-secondary\"\n                #fakeDataPointsSecondary\n                [tabindex]=\"focusedFakeDataPointIndex === $index ? '0' : '-1'\"\n                (focus)=\"$index === focusedFakeDataPointIndex ? showTooltipForDataPoint($index, true) : null\"\n                (keydown)=\"onFakeDataPointsKeyDown($event, $index, true)\"\n              >\n              </span>\n            }\n          }\n        </div>\n      }\n    </div>\n  </div>\n  @if (radarChartData.datasets.length > 0) {\n    <div class=\"legend-container\">\n      @for (dataset of radarChartData.datasets; track dataset.label) {\n        <div\n          class=\"legend-item\"\n          (click)=\"toggleDatasetVisibility($index)\"\n          [tabindex]=\"$index === 0 ? '0' : '-1'\"\n          role=\"button\"\n          [attr.aria-pressed]=\"isDatasetVisible($index) ? false : true\"\n          [attr.aria-label]=\"\n            isDatasetVisible($index)\n              ? (translationContext + 'DATASET_VISIBLE' | uiTranslate: { dataset: dataset.label } | async)\n              : (translationContext + 'DATASET_HIDDEN' | uiTranslate: { dataset: dataset.label } | async)\n          \"\n          (keydown)=\"onLegendItemKeyDown($event, $index)\"\n          #legendItem\n        >\n          <span class=\"legend-line\" [ngClass]=\"{ 'solid-line': $index === 0, 'dashed-line': $index === 1 }\"></span>\n          <span class=\"legend-label\" [style.text-decoration]=\"isDatasetVisible($index) ? 'none' : 'line-through'\">\n            {{ dataset.label }}\n          </span>\n        </div>\n      }\n    </div>\n  }\n</div>\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}.spider-chart-container{display:flex;flex-direction:column;align-items:center}.spider-chart-container .spacing-container{padding:40px 140px}.spider-chart-container .spacing-container.small-spacing{padding:0 80px}.spider-chart-container .spacing-container .chart-container{position:relative}.spider-chart-container .spacing-container .chart-container .overlay-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container{display:flex;gap:4px;position:absolute;pointer-events:all;cursor:pointer}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .fake-data-points{visibility:hidden}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container:focus{outline:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .label{font-size:12px;border-bottom:1px dashed #d3d3d3;white-space:nowrap;overflow:hidden;width:fit-content;text-overflow:ellipsis}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .value{font-weight:700}.spider-chart-container .legend-container{display:flex;gap:16px;cursor:pointer}.spider-chart-container .legend-container .legend-item{display:flex;align-items:center;gap:8px}.spider-chart-container .legend-container .legend-item .legend-line{display:inline-block;width:11px;height:4px}.spider-chart-container .legend-container .legend-item .solid-line{background-color:#d410aa}.spider-chart-container .legend-container .legend-item .dashed-line{border-top:2px dashed #242424}:host ::ng-deep .spider-chart-container .spinner-container.loader{position:absolute}\n"]
+		}]
+	}],
+	propDecorators: {
+		size: [{ type: Input }],
+		spiderChartData: [{ type: Input }],
+		stepSize: [{ type: Input }],
+		ariaLabel: [{ type: Input }],
+		loading: [{ type: Input }],
+		applicationTheme: [{ type: Input }],
+		chart: [{
+			type: ViewChild,
+			args: [BaseChartDirective]
+		}],
+		labelContainers: [{
+			type: ViewChildren,
+			args: ["labelContainer"]
+		}],
+		fakeDataPoints: [{
+			type: ViewChildren,
+			args: ["fakeDataPoints"]
+		}],
+		fakeDataPointsSecondary: [{
+			type: ViewChildren,
+			args: ["fakeDataPointsSecondary"]
+		}],
+		legendItems: [{
+			type: ViewChildren,
+			args: ["legendItem"]
+		}]
+	}
+});
 Chart.register(...registerables);
-class SpiderChartComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SpiderChartComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: SpiderChartComponentModule, imports: [NgClass,
-            UiTranslatePipe,
-            BaseChartDirective,
-            MatTooltipModule,
-            MemoizeFuncPipe,
-            SpinnerComponentModule,
-            CommonModule,
-            SpiderChartComponent], exports: [SpiderChartComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SpiderChartComponentModule, imports: [MatTooltipModule,
-            SpinnerComponentModule,
-            CommonModule,
-            SpiderChartComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SpiderChartComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [SpiderChartComponent],
-                    imports: [
-                        NgClass,
-                        UiTranslatePipe,
-                        BaseChartDirective,
-                        MatTooltipModule,
-                        MemoizeFuncPipe,
-                        SpinnerComponentModule,
-                        CommonModule,
-                        SpiderChartComponent,
-                    ],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var SpiderChartComponentModule = class SpiderChartComponentModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SpiderChartComponentModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SpiderChartComponentModule,
+			imports: [
+				NgClass,
+				UiTranslatePipe,
+				BaseChartDirective,
+				MatTooltipModule,
+				MemoizeFuncPipe,
+				SpinnerComponentModule,
+				CommonModule,
+				SpiderChartComponent
+			],
+			exports: [SpiderChartComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SpiderChartComponentModule,
+			imports: [
+				MatTooltipModule,
+				SpinnerComponentModule,
+				CommonModule,
+				SpiderChartComponent
+			]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: SpiderChartComponentModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			exports: [SpiderChartComponent],
+			imports: [
+				NgClass,
+				UiTranslatePipe,
+				BaseChartDirective,
+				MatTooltipModule,
+				MemoizeFuncPipe,
+				SpinnerComponentModule,
+				CommonModule,
+				SpiderChartComponent
+			]
+		}]
+	}]
+});
 export { LargeSpiderChartSize, SmallSpiderChartSize, SpiderChartComponent, SpiderChartComponentModule };
-//# sourceMappingURL=testgorilla-tgo-ui-components-spider-chart.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-spider-chart.mjs.map