@testgorilla/tgo-ui 11.0.1 → 11.0.3

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

@@ -240,10 +240,10 @@ class GaussianChartComponent {
             return 'PERCENTILE_LABEL_TYPES.WELL_ABOVE_AVERAGE';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: GaussianChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: GaussianChartComponent, isStandalone: true, selector: "ui-gaussian-chart", inputs: { score: "score", bestCandidateScore: "bestCandidateScore", applicationTheme: "applicationTheme", legendPosition: "legendPosition" }, ngImport: i0, template: "@if (score) {\n  <div\n    class=\"chart-section\"\n    [attr.aria-label]=\"\n      translationContext + 'ARIA_LABEL'\n        | uiTranslate\n          : {\n              score: score,\n              activeBucket: getScoreTranslationKey(score) | uiTranslate | async,\n              bestCandidateScore: bestCandidateScore,\n              activeBucketBestScore: getScoreTranslationKey(bestCandidateScore) | uiTranslate | async,\n            }\n        | async\n    \"\n    tabindex=\"0\"\n  >\n    <!-- Legend positioned at top -->\n    @if (legendPosition === 'top-start' || legendPosition === 'top-end') {\n      <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n    }\n    <div class=\"chart-range-wrapper\">\n      <div class=\"normal-chart-container\">\n        <div class=\"normal-chart\">\n          <canvas baseChart [data]=\"gaussianChartData\" [options]=\"gaussianChartOptions\" type=\"line\" class=\"chart\">\n          </canvas>\n          <div\n            class=\"overlay-icon\"\n            [style.bottom]=\"[overlayYValue, 3, 'subtract'] | memoizeFunc: getCalcPosition\"\n            [style.left]=\"[overlayXValue, 20, 'subtract'] | memoizeFunc: getCalcPosition\"\n          >\n            <div class=\"drop-icon\">\n              <ui-icon name=\"Pin-marker\" size=\"40\"></ui-icon>\n              <span class=\"curve-score\">{{ score }}</span>\n            </div>\n          </div>\n          <div\n            class=\"best-score\"\n            [style.height]=\"\n              [100 - overlayYBestScoreValue, normalContainerPadding, 'add'] | memoizeFunc: getCalcPosition\n            \"\n            [style.bottom]=\"overlayYBestScoreValue + '%'\"\n            [style.left]=\"overlayXBestScoreValue + '%'\"\n          >\n            <div\n              class=\"best-score-content\"\n              [style.left]=\"bestCandidateScore | memoizeFunc: getBestScoreContentPosition : this\"\n            >\n              <ui-icon name=\"Trophy\"></ui-icon>\n              {{ bestCandidateScore }}\n            </div>\n          </div>\n        </div>\n        <div class=\"overlay\">\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWEST\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.LOWEST\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWER\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.LOWER\"\n              [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER_TOOLTIP' | uiTranslate | async) || ''\"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.AVERAGE\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.AVERAGE\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHER\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHER\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHEST\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHEST\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST' | uiTranslate | async }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"range\">\n        <div>1</div>\n        <div>20</div>\n        <div>40</div>\n        <div>60</div>\n        <div>80</div>\n        <div>99</div>\n      </div>\n    </div>\n    <!-- Legend positioned at bottom -->\n    @if (legendPosition === 'bottom-start' || legendPosition === 'bottom-end') {\n      <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n    }\n  </div>\n}\n\n<!-- Reusable legend template -->\n<ng-template #legendTemplate>\n  <div class=\"legend-container\" [ngClass]=\"'legend-' + legendPosition\">\n    <div class=\"legend\">\n      <ui-icon name=\"Dot\" color=\"gray\"></ui-icon>\n      {{ translationContext + 'CANDIDATE_SCORE' | uiTranslate | async }}\n    </div>\n    <div class=\"legend\">\n      <ui-icon name=\"Trophy\" color=\"gray\"></ui-icon>\n      {{ translationContext + 'HIGHEST_SCORE' | uiTranslate | async }}\n    </div>\n  </div>\n</ng-template>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.chart-section{display:flex;flex-direction:column;gap:16px;width:100%}.chart-section .chart-range-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.chart-section .chart-range-wrapper .normal-chart-container{position:relative;padding-bottom:32px;padding-top:50px;border:1px solid #d3d3d3;border-radius:10px;width:100%;height:230px}.chart-section .chart-range-wrapper .normal-chart-container .normal-chart{position:relative;z-index:1;width:100%;height:100%}.chart-section .chart-range-wrapper .normal-chart-container .overlay{position:absolute;top:0;left:0;height:100%;width:100%;display:flex}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column{flex:1;font-size:12px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column .column-item{cursor:pointer}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column:not(:last-child){border-right:1px solid #d3d3d3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active{background-color:#fff5ed;border-bottom:3px solid #242424}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border:none;position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-right:1px solid #d3d3d3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{content:\"\";position:absolute;bottom:0;width:calc(100% - 4px);height:2.5px;background-color:#000}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before{right:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{left:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon{position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon .curve-score{font-size:14px;font-weight:700;position:absolute;width:100%;text-align:center;top:0;left:.5px;padding:4px 4px 9px}.chart-section .chart-range-wrapper .normal-chart-container .best-score{position:absolute;border-left:1px #242424 dashed}.chart-section .chart-range-wrapper .normal-chart-container .best-score .best-score-content{position:absolute;display:flex;gap:3px;align-items:center}.chart-section .chart-range-wrapper .range{display:flex;justify-content:space-between;color:#919191}.chart-section .chart-range-wrapper .range div{width:35px;text-align:center}.chart-section .chart-range-wrapper .range div:nth-child(2){text-align:left}.chart-section .chart-range-wrapper .range div:nth-last-child(2){text-align:right}.chart-section .legend-container{display:flex;gap:16px}.chart-section .legend-container.legend-top-start,.chart-section .legend-container.legend-bottom-start{justify-content:flex-start}.chart-section .legend-container.legend-top-end,.chart-section .legend-container.legend-bottom-end{justify-content:flex-end}.chart-section .legend-container .legend{display:flex;gap:8px;align-items:center;color:#666}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: MemoizeFuncPipe, name: "memoizeFunc" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: GaussianChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: GaussianChartComponent, isStandalone: true, selector: "ui-gaussian-chart", inputs: { score: "score", bestCandidateScore: "bestCandidateScore", applicationTheme: "applicationTheme", legendPosition: "legendPosition" }, ngImport: i0, template: "@if (score) {\n  <div\n    class=\"chart-section\"\n    [attr.aria-label]=\"\n      translationContext + 'ARIA_LABEL'\n        | uiTranslate\n          : {\n              score: score,\n              activeBucket: getScoreTranslationKey(score) | uiTranslate | async,\n              bestCandidateScore: bestCandidateScore,\n              activeBucketBestScore: getScoreTranslationKey(bestCandidateScore) | uiTranslate | async,\n            }\n        | async\n    \"\n    tabindex=\"0\"\n  >\n    <!-- Legend positioned at top -->\n    @if (legendPosition === 'top-start' || legendPosition === 'top-end') {\n      <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n    }\n    <div class=\"chart-range-wrapper\">\n      <div class=\"normal-chart-container\">\n        <div class=\"normal-chart\">\n          <canvas baseChart [data]=\"gaussianChartData\" [options]=\"gaussianChartOptions\" type=\"line\" class=\"chart\">\n          </canvas>\n          <div\n            class=\"overlay-icon\"\n            [style.bottom]=\"[overlayYValue, 3, 'subtract'] | memoizeFunc: getCalcPosition\"\n            [style.left]=\"[overlayXValue, 20, 'subtract'] | memoizeFunc: getCalcPosition\"\n          >\n            <div class=\"drop-icon\">\n              <ui-icon name=\"Pin-marker\" size=\"40\"></ui-icon>\n              <span class=\"curve-score\">{{ score }}</span>\n            </div>\n          </div>\n          <div\n            class=\"best-score\"\n            [style.height]=\"\n              [100 - overlayYBestScoreValue, normalContainerPadding, 'add'] | memoizeFunc: getCalcPosition\n            \"\n            [style.bottom]=\"overlayYBestScoreValue + '%'\"\n            [style.left]=\"overlayXBestScoreValue + '%'\"\n          >\n            <div\n              class=\"best-score-content\"\n              [style.left]=\"bestCandidateScore | memoizeFunc: getBestScoreContentPosition : this\"\n            >\n              <ui-icon name=\"Trophy\"></ui-icon>\n              {{ bestCandidateScore }}\n            </div>\n          </div>\n        </div>\n        <div class=\"overlay\">\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWEST\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.LOWEST\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWER\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.LOWER\"\n              [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER_TOOLTIP' | uiTranslate | async) || ''\"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.AVERAGE\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.AVERAGE\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHER\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHER\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHEST\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHEST\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST' | uiTranslate | async }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"range\">\n        <div>1</div>\n        <div>20</div>\n        <div>40</div>\n        <div>60</div>\n        <div>80</div>\n        <div>99</div>\n      </div>\n    </div>\n    <!-- Legend positioned at bottom -->\n    @if (legendPosition === 'bottom-start' || legendPosition === 'bottom-end') {\n      <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n    }\n  </div>\n}\n\n<!-- Reusable legend template -->\n<ng-template #legendTemplate>\n  <div class=\"legend-container\" [ngClass]=\"'legend-' + legendPosition\">\n    <div class=\"legend\">\n      <ui-icon name=\"Dot\" color=\"gray\"></ui-icon>\n      {{ translationContext + 'CANDIDATE_SCORE' | uiTranslate | async }}\n    </div>\n    <div class=\"legend\">\n      <ui-icon name=\"Trophy\" color=\"gray\"></ui-icon>\n      {{ translationContext + 'HIGHEST_SCORE' | uiTranslate | async }}\n    </div>\n  </div>\n</ng-template>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.chart-section{display:flex;flex-direction:column;gap:16px;width:100%}.chart-section .chart-range-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.chart-section .chart-range-wrapper .normal-chart-container{position:relative;padding-bottom:32px;padding-top:50px;border:1px solid #d3d3d3;border-radius:10px;width:100%;height:230px}.chart-section .chart-range-wrapper .normal-chart-container .normal-chart{position:relative;z-index:1;width:100%;height:100%}.chart-section .chart-range-wrapper .normal-chart-container .overlay{position:absolute;top:0;left:0;height:100%;width:100%;display:flex}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column{flex:1;font-size:12px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column .column-item{cursor:pointer}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column:not(:last-child){border-right:1px solid #d3d3d3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active{background-color:#fff5ed;border-bottom:3px solid #242424}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border:none;position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-right:1px solid #d3d3d3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{content:\"\";position:absolute;bottom:0;width:calc(100% - 4px);height:2.5px;background-color:#000}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before{right:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{left:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon{position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon .curve-score{font-size:14px;font-weight:700;position:absolute;width:100%;text-align:center;top:0;left:.5px;padding:4px 4px 9px}.chart-section .chart-range-wrapper .normal-chart-container .best-score{position:absolute;border-left:1px #242424 dashed}.chart-section .chart-range-wrapper .normal-chart-container .best-score .best-score-content{position:absolute;display:flex;gap:3px;align-items:center}.chart-section .chart-range-wrapper .range{display:flex;justify-content:space-between;color:#919191}.chart-section .chart-range-wrapper .range div{width:35px;text-align:center}.chart-section .chart-range-wrapper .range div:nth-child(2){text-align:left}.chart-section .chart-range-wrapper .range div:nth-last-child(2){text-align:right}.chart-section .legend-container{display:flex;gap:16px}.chart-section .legend-container.legend-top-start,.chart-section .legend-container.legend-bottom-start{justify-content:flex-start}.chart-section .legend-container.legend-top-end,.chart-section .legend-container.legend-bottom-end{justify-content:flex-end}.chart-section .legend-container .legend{display:flex;gap:8px;align-items:center;color:#666}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: MemoizeFuncPipe, name: "memoizeFunc" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: GaussianChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: GaussianChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-gaussian-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgTemplateOutlet,
@@ -267,8 +267,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
 
 Chart.register(...registerables);
 class GaussianChartComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: GaussianChartComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: GaussianChartComponentModule, imports: [NgClass,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: GaussianChartComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: GaussianChartComponentModule, imports: [NgClass,
             UiTranslatePipe,
             BaseChartDirective,
             MatTooltipModule,
@@ -276,12 +276,12 @@ class GaussianChartComponentModule {
             IconComponentModule,
             MemoizeFuncPipe,
             GaussianChartComponent], exports: [GaussianChartComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: GaussianChartComponentModule, imports: [MatTooltipModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: GaussianChartComponentModule, imports: [MatTooltipModule,
             CommonModule,
             IconComponentModule,
             GaussianChartComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: GaussianChartComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: GaussianChartComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [GaussianChartComponent],

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

@@ -46,10 +46,10 @@ class IconLabelComponent {
             this.applicationTheme = defaultAppTheme;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", 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: "21.2.18", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", 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: "21.2.19", 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: "21.2.18", ngImport: i0, type: IconLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IconLabelComponent, decorators: [{
             type: Component,
             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: [{
@@ -75,11 +75,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
             }] } });
 
 class IconLabelComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: IconLabelComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: IconLabelComponentModule, imports: [CommonModule, IconComponentModule, IconLabelComponent], exports: [IconLabelComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: IconLabelComponentModule, imports: [CommonModule, IconComponentModule, IconLabelComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IconLabelComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: IconLabelComponentModule, imports: [CommonModule, IconComponentModule, IconLabelComponent], exports: [IconLabelComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IconLabelComponentModule, imports: [CommonModule, IconComponentModule, IconLabelComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: IconLabelComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IconLabelComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, IconComponentModule, IconLabelComponent],

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

@@ -1588,10 +1588,10 @@ class IconsService {
         host.innerHTML = SHARED_SVG_DEFS;
         document.body.insertBefore(host.firstElementChild, document.body.firstChild);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: IconsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: IconsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IconsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IconsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: IconsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IconsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1746,10 +1746,10 @@ class IconComponent {
     get isIconLoaded() {
         return this.iconsService.isIconLoaded(this._name);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: IconComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1.MatIconRegistry }, { token: i2.DomSanitizer }, { token: IconsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: IconComponent, isStandalone: true, selector: "ui-icon", inputs: { size: "size", cssClass: "cssClass", name: "name", color: "color", filled: "filled", toggleIconStyle: "toggleIconStyle", applicationTheme: "applicationTheme", useFullIconName: "useFullIconName" }, host: { properties: { "style.--icon-size": "this.size" } }, usesOnChanges: true, ngImport: i0, template: "@if (isIconLoaded) {\n  <mat-icon [svgIcon]=\"_name\" [attr.class]=\"customCssClass\" [ngStyle]=\"cssStyle\"></mat-icon>\n} @else {\n  <div class=\"empty-icon-placeholder\"></div>\n}\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}:host{width:calc(var(--icon-size) * 1px)!important;height:calc(var(--icon-size) * 1px)!important}.empty-icon-placeholder{width:calc(var(--icon-size) * 1px)!important;height:calc(var(--icon-size) * 1px)!important}mat-icon{display:flex;color:var(--icon-color)!important}mat-icon.size-16 svg{width:16px;height:16px}mat-icon.size-24 svg{width:24px;height:24px}mat-icon.size-40 svg{width:40px;height:40px}mat-icon.size-80 svg{width:80px;height:80px}mat-icon.dark svg{color:var(--cnp-icon-color, #888888)}mat-icon.white svg{color:var(--cnp-icon-color, #ffffff)}mat-icon.teal svg{color:var(--cnp-icon-color, #46a997)}mat-icon.petrol svg{color:var(--cnp-icon-color, #276678)}mat-icon.black svg{color:var(--cnp-icon-color, #000000)}mat-icon.red svg{color:var(--cnp-icon-color, #e02800)}mat-icon.gray svg,mat-icon.gray path{color:var(--cnp-icon-color, #666666);fill:var(--cnp-icon-color, #666666)}mat-icon.orange svg{color:var(--cnp-icon-color, #d07d00)}mat-icon.rebrand-black svg{color:var(--cnp-icon-color, #242424)}mat-icon.ai svg path{fill:url(#reusableAiInlineGradient) #d410aa}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IconComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1.MatIconRegistry }, { token: i2.DomSanitizer }, { token: IconsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: IconComponent, isStandalone: true, selector: "ui-icon", inputs: { size: "size", cssClass: "cssClass", name: "name", color: "color", filled: "filled", toggleIconStyle: "toggleIconStyle", applicationTheme: "applicationTheme", useFullIconName: "useFullIconName" }, host: { properties: { "style.--icon-size": "this.size" } }, usesOnChanges: true, ngImport: i0, template: "@if (isIconLoaded) {\n  <mat-icon [svgIcon]=\"_name\" [attr.class]=\"customCssClass\" [ngStyle]=\"cssStyle\"></mat-icon>\n} @else {\n  <div class=\"empty-icon-placeholder\"></div>\n}\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}:host{width:calc(var(--icon-size) * 1px)!important;height:calc(var(--icon-size) * 1px)!important}.empty-icon-placeholder{width:calc(var(--icon-size) * 1px)!important;height:calc(var(--icon-size) * 1px)!important}mat-icon{display:flex;color:var(--icon-color)!important}mat-icon.size-16 svg{width:16px;height:16px}mat-icon.size-24 svg{width:24px;height:24px}mat-icon.size-40 svg{width:40px;height:40px}mat-icon.size-80 svg{width:80px;height:80px}mat-icon.dark svg{color:var(--cnp-icon-color, #888888)}mat-icon.white svg{color:var(--cnp-icon-color, #ffffff)}mat-icon.teal svg{color:var(--cnp-icon-color, #46a997)}mat-icon.petrol svg{color:var(--cnp-icon-color, #276678)}mat-icon.black svg{color:var(--cnp-icon-color, #000000)}mat-icon.red svg{color:var(--cnp-icon-color, #e02800)}mat-icon.gray svg,mat-icon.gray path{color:var(--cnp-icon-color, #666666);fill:var(--cnp-icon-color, #666666)}mat-icon.orange svg{color:var(--cnp-icon-color, #d07d00)}mat-icon.rebrand-black svg{color:var(--cnp-icon-color, #242424)}mat-icon.ai svg path{fill:url(#reusableAiInlineGradient) #d410aa}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: IconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [MatIcon, NgStyle], template: "@if (isIconLoaded) {\n  <mat-icon [svgIcon]=\"_name\" [attr.class]=\"customCssClass\" [ngStyle]=\"cssStyle\"></mat-icon>\n} @else {\n  <div class=\"empty-icon-placeholder\"></div>\n}\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}:host{width:calc(var(--icon-size) * 1px)!important;height:calc(var(--icon-size) * 1px)!important}.empty-icon-placeholder{width:calc(var(--icon-size) * 1px)!important;height:calc(var(--icon-size) * 1px)!important}mat-icon{display:flex;color:var(--icon-color)!important}mat-icon.size-16 svg{width:16px;height:16px}mat-icon.size-24 svg{width:24px;height:24px}mat-icon.size-40 svg{width:40px;height:40px}mat-icon.size-80 svg{width:80px;height:80px}mat-icon.dark svg{color:var(--cnp-icon-color, #888888)}mat-icon.white svg{color:var(--cnp-icon-color, #ffffff)}mat-icon.teal svg{color:var(--cnp-icon-color, #46a997)}mat-icon.petrol svg{color:var(--cnp-icon-color, #276678)}mat-icon.black svg{color:var(--cnp-icon-color, #000000)}mat-icon.red svg{color:var(--cnp-icon-color, #e02800)}mat-icon.gray svg,mat-icon.gray path{color:var(--cnp-icon-color, #666666);fill:var(--cnp-icon-color, #666666)}mat-icon.orange svg{color:var(--cnp-icon-color, #d07d00)}mat-icon.rebrand-black svg{color:var(--cnp-icon-color, #242424)}mat-icon.ai svg path{fill:url(#reusableAiInlineGradient) #d410aa}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -1779,11 +1779,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
             }] } });
 
 class IconComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: IconComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: IconComponentModule, imports: [CommonModule, MatIconModule, IconComponent], exports: [IconComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: IconComponentModule, providers: [provideHttpClient(withInterceptorsFromDi())], imports: [CommonModule, MatIconModule, IconComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IconComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: IconComponentModule, imports: [CommonModule, MatIconModule, IconComponent], exports: [IconComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IconComponentModule, providers: [provideHttpClient(withInterceptorsFromDi())], imports: [CommonModule, MatIconModule, IconComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: IconComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IconComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, MatIconModule, IconComponent],

package/fesm2022/testgorilla-tgo-ui-components-infinite-scroll-table.mjs

@@ -100,8 +100,24 @@ class InfiniteScrollTableComponent {
          * the last — aligned between header and body regardless of browser/scrollbar behaviour.
          */
         this.scrollbarWidth = signal(0, ...(ngDevMode ? [{ debugName: "scrollbarWidth" }] : /* istanbul ignore next */ []));
+        /**
+         * Measured height (px) of the body viewport's horizontal scrollbar. When a short list also has a
+         * horizontal scrollbar, this is added to the viewport height so the scrollbar doesn't eat into the
+         * rows' vertical space and force a spurious vertical scrollbar. Mirrors `scrollbarWidth`.
+         */
+        this.hScrollbarHeight = signal(0, ...(ngDevMode ? [{ debugName: "hScrollbarHeight" }] : /* istanbul ignore next */ []));
         /** Guards `loadMore` to a single emission per approach to the end. */
         this.loadMoreArmed = true;
+        /**
+         * True when the browser can drive the header via a CSS scroll timeline (see the SCSS): the header
+         * then tracks the body's horizontal scroll on the compositor, with no per-frame main-thread work.
+         * In that case the JS `scrollLeft` sync is skipped so the offset isn't applied twice; it stays as
+         * the fallback for browsers without scroll-driven animations.
+         */
+        this.usesScrollTimelineHeaderSync = typeof CSS !== 'undefined' &&
+            CSS !== null &&
+            typeof CSS.supports === 'function' &&
+            CSS.supports('animation-timeline: scroll()');
         this.skeletonTheme = {
             background: '#F4F4F4',
             'border-radius': '4px',
@@ -143,8 +159,17 @@ class InfiniteScrollTableComponent {
         this.showEmptyState = computed(() => !this.loading() && !this.error() && !this.hasData(), ...(ngDevMode ? [{ debugName: "showEmptyState" }] : /* istanbul ignore next */ []));
         this.showErrorState = computed(() => !this.loading() && this.error() && !this.hasData(), ...(ngDevMode ? [{ debugName: "showErrorState" }] : /* istanbul ignore next */ []));
         this.showErrorFooter = computed(() => !this.loading() && this.error() && this.hasData(), ...(ngDevMode ? [{ debugName: "showErrorFooter" }] : /* istanbul ignore next */ []));
-        /** Viewport height shrinks to the content and is capped at `maxHeight` (CSS `min()` mixes units). */
-        this.viewportHeight = computed(() => `min(${this.renderRows().length * this.rowHeight()}px, ${this.maxHeight()})`, ...(ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []));
+        /**
+         * Viewport height shrinks to the content and is capped at `maxHeight` (CSS `min()` mixes units).
+         * When a horizontal scrollbar is present it reserves that scrollbar's measured height on top of the
+         * content, so a short list doesn't overflow and grow a spurious vertical scrollbar. Still capped at
+         * `maxHeight`.
+         */
+        this.viewportHeight = computed(() => {
+            const contentHeight = this.renderRows().length * this.rowHeight();
+            const scrollbarReserve = this.horizontalScroll() ? this.hScrollbarHeight() : 0;
+            return `min(${contentHeight + scrollbarReserve}px, ${this.maxHeight()})`;
+        }, ...(ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []));
         /** Screen-reader announcement for the busy states. */
         this.statusMessage = computed(() => {
             if (this.loading()) {
@@ -188,13 +213,25 @@ class InfiniteScrollTableComponent {
                 const subscription = new Subscription();
                 subscription.add(viewport.elementScrolled().subscribe(() => this.syncHorizontalScroll()));
                 subscription.add(viewport.renderedRangeStream.subscribe(() => this.checkLoadMore()));
-                // Keep the measured scrollbar width current: it changes when the vertical scrollbar appears
-                // or disappears (content grows/shrinks) and on viewport resize.
-                const measureScrollbar = () => this.scrollbarWidth.set(element.offsetWidth - element.clientWidth);
+                // Keep the measured scrollbar dimensions current: they change when a scrollbar appears or
+                // disappears (content grows/shrinks) and on viewport resize.
+                const measureScrollbar = () => {
+                    this.scrollbarWidth.set(element.offsetWidth - element.clientWidth);
+                    this.hScrollbarHeight.set(element.offsetHeight - element.clientHeight);
+                    this.updateHeaderScrollMetric();
+                };
                 subscription.add(viewport.renderedRangeStream.subscribe(() => measureScrollbar()));
+                // The viewport element's box can also change from things no signal captures — a flex/grid
+                // parent resizing, or a relative `maxHeight` (e.g. `70vh`) reacting to a container change.
+                // CDK caches its measured size, so re-measure the virtual viewport on any box change or it
+                // under-renders (empty tail band). The signal-driven height changes are covered by the
+                // dedicated effect below; this catches the rest.
                 let resizeObserver;
                 if (typeof ResizeObserver !== 'undefined') {
-                    resizeObserver = new ResizeObserver(() => measureScrollbar());
+                    resizeObserver = new ResizeObserver(() => {
+                        measureScrollbar();
+                        this.scheduleViewportRemeasure();
+                    });
                     resizeObserver.observe(element);
                 }
                 measureScrollbar();
@@ -210,14 +247,31 @@ class InfiniteScrollTableComponent {
                 onCleanup(() => {
                     subscription.unsubscribe();
                     resizeObserver?.disconnect();
-                    // Cancel a still-pending re-sync so it can't fire after the viewport leaves the DOM
+                    // Cancel still-pending frames so they can't fire after the viewport leaves the DOM
                     // (e.g. flipping to the empty/error state in the same tick).
                     if (scrollSyncFrame !== undefined) {
                         cancelAnimationFrame(scrollSyncFrame);
                     }
+                    if (this.remeasureFrame !== undefined) {
+                        cancelAnimationFrame(this.remeasureFrame);
+                        this.remeasureFrame = undefined;
+                    }
                 });
             });
         });
+        // Re-measure the CDK viewport whenever its height changes from a signal: data growth (more render
+        // rows), a runtime `rowHeight` change (also changes total content height), or a `maxHeight` change.
+        // `CdkVirtualScrollViewport` caches its measured size and only re-measures on scroll or window
+        // resize, so a runtime height increase would otherwise leave the extra space empty with the tail
+        // rows unrendered until a manual scroll/resize. Reading these signals (not `viewportHeight()`)
+        // keeps the dependency to genuine height inputs and off horizontal-scroll state.
+        effect(() => {
+            this.renderRows();
+            this.rowHeight();
+            this.maxHeight();
+            this.columns();
+            this.scheduleViewportRemeasure();
+        });
         // Re-arm the loadMore guard whenever the `data` input changes — a page arrived, or the set was
         // replaced (filter/search reset, even to a shorter or same-length list). It reads `data()` only,
         // NOT `loadingMore()`: a failed fetch clears `loadingMore` without changing `data`, so the guard
@@ -242,11 +296,13 @@ class InfiniteScrollTableComponent {
         return item[key];
     }
     /**
-     * Content-independent flex-basis for a column: its declared width, else its min-width, else the
-     * default. Using this (instead of `flex-basis: auto`) makes header and body cells size identically
-     * so every column stays aligned regardless of the text inside header vs body cells.
+     * The single authoritative width for a column: its declared width, else its min-width, else the
+     * default. The template applies this identically as `flex-basis`, `min-width` AND `max-width` (with
+     * `flex-grow:0; flex-shrink:0; overflow:hidden`) to the header cell and every body cell, so a column
+     * is exactly this width in both containers — content is clipped and can never widen it. This is what
+     * keeps header and body columns aligned end-to-end regardless of cell content or horizontal scroll.
      */
-    cellBasis(column) {
+    columnWidth(column) {
         return column.styles?.width ?? column.styles?.['min-width'] ?? '160px';
     }
     onRowClick(row) {
@@ -285,6 +341,38 @@ class InfiniteScrollTableComponent {
         event.preventDefault();
         this.onRowClick(row);
     }
+    /**
+     * Re-measure the CDK virtual viewport after its box may have changed. Deferred to the next frame so
+     * it reads the settled layout and never fires a "ResizeObserver loop limit exceeded" warning when
+     * driven from the ResizeObserver; repeated triggers coalesce to a single measure. The re-measure is
+     * what makes CDK recompute the rendered range to fill a viewport whose height grew at runtime.
+     */
+    scheduleViewportRemeasure() {
+        if (typeof requestAnimationFrame === 'undefined') {
+            this.viewport()?.checkViewportSize();
+            return;
+        }
+        if (this.remeasureFrame !== undefined) {
+            cancelAnimationFrame(this.remeasureFrame);
+        }
+        this.remeasureFrame = requestAnimationFrame(() => {
+            this.remeasureFrame = undefined;
+            // `viewport()` is null in the empty/error states and after teardown, so this safely no-ops.
+            this.viewport()?.checkViewportSize();
+            this.updateHeaderScrollMetric();
+        });
+    }
+    updateHeaderScrollMetric() {
+        if (!this.usesScrollTimelineHeaderSync) {
+            return;
+        }
+        const headerScroll = this.headerScroll()?.nativeElement;
+        if (!headerScroll) {
+            return;
+        }
+        const maxScroll = Math.max(0, headerScroll.scrollWidth - headerScroll.clientWidth);
+        headerScroll.style.setProperty('--ui-ist-header-scroll-max', `${maxScroll}px`);
+    }
     onRetry() {
         this.retry.emit();
     }
@@ -297,8 +385,8 @@ class InfiniteScrollTableComponent {
         const left = viewport.measureScrollOffset('left');
         const right = viewport.measureScrollOffset('right');
         const header = this.headerScroll();
-        if (header) {
-            header.nativeElement.scrollLeft = left;
+        if (header && !this.usesScrollTimelineHeaderSync) {
+            header.nativeElement.scrollLeft = Math.round(left);
         }
         this.scrollStart.set(left <= 1);
         this.scrollEnd.set(right <= 1);
@@ -333,10 +421,10 @@ class InfiniteScrollTableComponent {
             this.loadMore.emit();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: InfiniteScrollTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: InfiniteScrollTableComponent, isStandalone: true, selector: "ui-infinite-scroll-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: true, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, rowIdKey: { classPropertyName: "rowIdKey", publicName: "rowIdKey", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, isCondensed: { classPropertyName: "isCondensed", publicName: "isCondensed", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingMore: { classPropertyName: "loadingMore", publicName: "loadingMore", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, skeletonRowCount: { classPropertyName: "skeletonRowCount", publicName: "skeletonRowCount", isSignal: true, isRequired: false, transformFunction: null }, loadMoreThreshold: { classPropertyName: "loadMoreThreshold", publicName: "loadMoreThreshold", isSignal: true, isRequired: false, transformFunction: null }, noDataTemplate: { classPropertyName: "noDataTemplate", publicName: "noDataTemplate", isSignal: true, isRequired: false, transformFunction: null }, errorTemplate: { classPropertyName: "errorTemplate", publicName: "errorTemplate", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadMore: "loadMore", retry: "retry", rowClick: "rowClick", selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }, { propertyName: "headerScroll", first: true, predicate: ["headerScroll"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ui-ist\"\n  role=\"table\"\n  [class.ui-ist--condensed]=\"isCondensed()\"\n  [class.ui-ist--scrolled-start]=\"!scrollStart()\"\n  [class.ui-ist--scrolled-end]=\"horizontalScroll() && !scrollEnd()\"\n  [attr.aria-rowcount]=\"hasMore() ? -1 : data().length + 1\"\n  [attr.aria-busy]=\"loading() || loadingMore()\"\n>\n  <!-- Header: a separate element above the viewport. It never scrolls vertically (stays pinned),\n       and its horizontal scrollLeft is synced from the body so columns stay aligned. -->\n  <div\n    #headerScroll\n    class=\"ui-ist__header\"\n    [class.ui-ist__header--sticky]=\"stickyHeader()\"\n    [style.margin-right.px]=\"scrollbarWidth()\"\n    role=\"presentation\"\n  >\n    <div class=\"ui-ist__row ui-ist__row--header\" role=\"row\" aria-rowindex=\"1\">\n      @if (selectable()) {\n        <div\n          class=\"ui-ist__cell ui-ist__cell--header ui-ist__cell--checkbox ui-ist__cell--sticky-start\"\n          role=\"columnheader\"\n        ></div>\n      }\n      @for (column of columns(); track column.key; let colIndex = $index) {\n        <div\n          class=\"ui-ist__cell ui-ist__cell--header\"\n          role=\"columnheader\"\n          [class.ui-ist__cell--sticky-start]=\"column.key === firstStickyKey()\"\n          [class.ui-ist__cell--sticky-end]=\"column.key === lastStickyKey()\"\n          [class.ui-ist__cell--right]=\"column.styles?.alignment === 'right'\"\n          [class.ui-ist__cell--center]=\"column.styles?.alignment === 'center'\"\n          [style.flex-basis]=\"cellBasis(column)\"\n          [style.min-width]=\"column.styles?.['min-width']\"\n          [style.left.px]=\"stickyStartOffset(column)\"\n        >\n          @if (column.headerCellTemplate) {\n            <ng-container\n              *ngTemplateOutlet=\"column.headerCellTemplate; context: { $implicit: column.title, column, colIndex }\"\n            ></ng-container>\n          } @else {\n            <span class=\"ui-ist__cell-text\">{{ column.title }}</span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Body: the CDK viewport owns BOTH vertical (virtualized) and horizontal scroll, so sticky\n       columns pin against it and the horizontal scrollbar sits at the viewport bottom. -->\n  @if (showViewport()) {\n    <cdk-virtual-scroll-viewport\n      class=\"ui-ist__body\"\n      role=\"rowgroup\"\n      [itemSize]=\"rowHeight()\"\n      [style.height]=\"viewportHeight()\"\n    >\n      <div\n        *cdkVirtualFor=\"let row of renderRows(); let rowIndex = index; trackBy: renderRowTrackBy\"\n        class=\"ui-ist__row\"\n        role=\"row\"\n        [class.ui-ist__row--clickable]=\"row.kind === 'data'\"\n        [class.ui-ist__row--selected]=\"isRowSelected(row)\"\n        [attr.aria-selected]=\"isRowSelected(row) ? true : null\"\n        [attr.aria-rowindex]=\"row.kind === 'data' ? row.index + 2 : null\"\n        [attr.aria-hidden]=\"row.kind === 'skeleton' ? true : null\"\n        [attr.tabindex]=\"row.kind === 'data' ? 0 : null\"\n        [style.height.px]=\"rowHeight()\"\n        (click)=\"onRowClick(row)\"\n        (keydown.enter)=\"onRowActivate($event, row)\"\n        (keydown.space)=\"onRowActivate($event, row)\"\n      >\n        @if (selectable()) {\n          <div\n            class=\"ui-ist__cell ui-ist__cell--checkbox ui-ist__cell--sticky-start\"\n            role=\"cell\"\n            (click)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\"\n          >\n            @if (row.kind === 'data') {\n              <ui-checkbox\n                [checked]=\"isRowSelected(row)\"\n                [ariaLabel]=\"'Select row ' + (row.index + 1)\"\n                (changed)=\"onSelectionToggle(row, $event)\"\n              ></ui-checkbox>\n            }\n          </div>\n        }\n        @for (column of columns(); track column.key) {\n          <div\n            class=\"ui-ist__cell\"\n            role=\"cell\"\n            [class.ui-ist__cell--sticky-start]=\"column.key === firstStickyKey()\"\n            [class.ui-ist__cell--sticky-end]=\"column.key === lastStickyKey()\"\n            [class.ui-ist__cell--right]=\"column.styles?.alignment === 'right'\"\n            [class.ui-ist__cell--center]=\"column.styles?.alignment === 'center'\"\n            [style.flex-basis]=\"cellBasis(column)\"\n            [style.min-width]=\"column.styles?.['min-width']\"\n            [style.left.px]=\"stickyStartOffset(column)\"\n          >\n            @if (row.kind === 'skeleton') {\n              <ui-skeleton class=\"ui-ist__skeleton\" [count]=\"1\" [theme]=\"skeletonTheme\" appearance=\"line\"></ui-skeleton>\n            } @else if (column.rowCellTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: row.item, rowIndex: row.index }\"\n              ></ng-container>\n            } @else {\n              <span class=\"ui-ist__cell-text\">{{ getCellValue(row.item, column.key) }}</span>\n            }\n          </div>\n        }\n      </div>\n    </cdk-virtual-scroll-viewport>\n  }\n\n  <!-- Empty and error states render the consumer template in-frame below the header, mirroring how\n       ui-table drops `noDataRowTpl` into the table body. Mid-scroll errors sit below the loaded rows. -->\n  @if (showErrorFooter() && errorTemplate(); as errorTpl) {\n    <div class=\"ui-ist__state\" role=\"alert\">\n      <ng-container *ngTemplateOutlet=\"errorTpl; context: errorContext\"></ng-container>\n    </div>\n  }\n\n  @if (showErrorState() && errorTemplate(); as errorTpl) {\n    <div class=\"ui-ist__state\" role=\"alert\">\n      <ng-container *ngTemplateOutlet=\"errorTpl; context: errorContext\"></ng-container>\n    </div>\n  }\n\n  @if (showEmptyState() && noDataTemplate(); as emptyTpl) {\n    <div class=\"ui-ist__state\">\n      <ng-container *ngTemplateOutlet=\"emptyTpl\"></ng-container>\n    </div>\n  }\n\n  <span class=\"ui-ist__sr-only\" role=\"status\" aria-live=\"polite\">{{ statusMessage() }}</span>\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}:host{display:block}.ui-ist{display:flex;flex-direction:column;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;background:#fff}.ui-ist__header{flex:0 0 auto;box-sizing:border-box;overflow:hidden;border-bottom:1px solid #e0e0e0;background:#fff}.ui-ist__header--sticky{position:sticky;top:0;z-index:3}.ui-ist__body{flex:1 1 auto;overflow:auto;scrollbar-width:auto}.ui-ist__body::-webkit-scrollbar{width:8px;height:8px}.ui-ist__body::-webkit-scrollbar-button{display:none}.ui-ist__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:4px}.ui-ist__body::-webkit-scrollbar-track:hover{background-color:#00000026}.ui-ist__row{display:flex;width:max-content;min-width:100%;box-sizing:border-box}.ui-ist__row--header{min-height:56px}.ui-ist__row:not(.ui-ist__row--header){border-bottom:1px solid #d3d3d3}.ui-ist__row--clickable:not(.ui-ist__row--selected):hover{background:#fff2fc}.ui-ist__row--clickable:not(.ui-ist__row--selected):hover .ui-ist__cell{background:#fff2fc}.ui-ist__row--selected .ui-ist__cell{background:#f4f4f4}.ui-ist__cell{flex-grow:1;flex-shrink:0;box-sizing:border-box;display:flex;align-items:center;min-width:160px;padding:8px 24px;font-size:14px;line-height:20px;overflow:hidden;background:#fff}.ui-ist__cell--header{background:#fff;font-weight:700;font-size:14px;line-height:16px}.ui-ist__cell--right{justify-content:flex-end;text-align:right}.ui-ist__cell--center{justify-content:center;text-align:center}.ui-ist__cell--sticky-start{position:sticky;left:0;z-index:2}.ui-ist__cell--sticky-end{position:sticky;right:0;z-index:2}.ui-ist__cell--checkbox{flex:0 0 56px;min-width:56px;justify-content:center;padding:0}.ui-ist__cell-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-ist__skeleton{display:block;width:100%}.ui-ist--scrolled-start .ui-ist__cell--sticky-start{box-shadow:24px 8px 24px #24242414}.ui-ist--scrolled-end .ui-ist__cell--sticky-end{box-shadow:0 8px 24px 4px #24242414}.ui-ist__state{padding:8px 24px;font-size:14px;line-height:20px}.ui-ist--condensed .ui-ist__cell{padding:8px 12px}.ui-ist--condensed .ui-ist__cell:first-child{padding-left:24px}.ui-ist--condensed .ui-ist__cell:last-child{padding-right:24px}.ui-ist__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: SkeletonComponent, selector: "ui-skeleton", inputs: ["count", "theme", "appearance", "isAiTheme", "applicationTheme"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "companyColor", "name", "label", "multiple", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "hideBuiltInErrors", "hideLabelInErrors", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex"], outputs: ["changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteScrollTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InfiniteScrollTableComponent, isStandalone: true, selector: "ui-infinite-scroll-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: true, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, rowIdKey: { classPropertyName: "rowIdKey", publicName: "rowIdKey", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, isCondensed: { classPropertyName: "isCondensed", publicName: "isCondensed", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingMore: { classPropertyName: "loadingMore", publicName: "loadingMore", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, skeletonRowCount: { classPropertyName: "skeletonRowCount", publicName: "skeletonRowCount", isSignal: true, isRequired: false, transformFunction: null }, loadMoreThreshold: { classPropertyName: "loadMoreThreshold", publicName: "loadMoreThreshold", isSignal: true, isRequired: false, transformFunction: null }, noDataTemplate: { classPropertyName: "noDataTemplate", publicName: "noDataTemplate", isSignal: true, isRequired: false, transformFunction: null }, errorTemplate: { classPropertyName: "errorTemplate", publicName: "errorTemplate", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadMore: "loadMore", retry: "retry", rowClick: "rowClick", selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }, { propertyName: "headerScroll", first: true, predicate: ["headerScroll"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ui-ist\"\n  role=\"table\"\n  [class.ui-ist--condensed]=\"isCondensed()\"\n  [class.ui-ist--scrolled-start]=\"!scrollStart()\"\n  [class.ui-ist--scrolled-end]=\"horizontalScroll() && !scrollEnd()\"\n  [attr.aria-rowcount]=\"hasMore() ? -1 : data().length + 1\"\n  [attr.aria-busy]=\"loading() || loadingMore()\"\n>\n  <!-- Header: a separate element above the viewport. It never scrolls vertically (stays pinned).\n       The outer element reserves the body's vertical-scrollbar width as right padding, so the reserved\n       strip keeps the header background and bottom border; the inner element carries the horizontal\n       scrollLeft synced from the body so columns stay aligned. -->\n  <div\n    class=\"ui-ist__header\"\n    [class.ui-ist__header--sticky]=\"stickyHeader()\"\n    [style.padding-right.px]=\"scrollbarWidth()\"\n    role=\"presentation\"\n  >\n    <div #headerScroll class=\"ui-ist__header-scroll\" role=\"presentation\">\n      <div class=\"ui-ist__row ui-ist__row--header\" role=\"row\" aria-rowindex=\"1\">\n        @if (selectable()) {\n          <div\n            class=\"ui-ist__cell ui-ist__cell--header ui-ist__cell--checkbox ui-ist__cell--sticky-start\"\n            role=\"columnheader\"\n          ></div>\n        }\n        @for (column of columns(); track column.key; let colIndex = $index) {\n          <div\n            class=\"ui-ist__cell ui-ist__cell--header\"\n            role=\"columnheader\"\n            [class.ui-ist__cell--sticky-start]=\"column.key === firstStickyKey()\"\n            [class.ui-ist__cell--sticky-end]=\"column.key === lastStickyKey()\"\n            [class.ui-ist__cell--right]=\"column.styles?.alignment === 'right'\"\n            [class.ui-ist__cell--center]=\"column.styles?.alignment === 'center'\"\n            [style.flex-basis]=\"columnWidth(column)\"\n            [style.min-width]=\"columnWidth(column)\"\n            [style.max-width]=\"columnWidth(column)\"\n            [style.left.px]=\"stickyStartOffset(column)\"\n          >\n            @if (column.headerCellTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"column.headerCellTemplate; context: { $implicit: column.title, column, colIndex }\"\n              ></ng-container>\n            } @else {\n              <span class=\"ui-ist__cell-text\">{{ column.title }}</span>\n            }\n          </div>\n        }\n        <div class=\"ui-ist__cell ui-ist__cell--spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Body: the CDK viewport owns BOTH vertical (virtualized) and horizontal scroll, so sticky\n       columns pin against it and the horizontal scrollbar sits at the viewport bottom. -->\n  @if (showViewport()) {\n    <cdk-virtual-scroll-viewport\n      class=\"ui-ist__body\"\n      role=\"rowgroup\"\n      [itemSize]=\"rowHeight()\"\n      [style.height]=\"viewportHeight()\"\n    >\n      <div\n        *cdkVirtualFor=\"let row of renderRows(); let rowIndex = index; trackBy: renderRowTrackBy\"\n        class=\"ui-ist__row\"\n        role=\"row\"\n        [class.ui-ist__row--clickable]=\"row.kind === 'data'\"\n        [class.ui-ist__row--selected]=\"isRowSelected(row)\"\n        [attr.aria-selected]=\"isRowSelected(row) ? true : null\"\n        [attr.aria-rowindex]=\"row.kind === 'data' ? row.index + 2 : null\"\n        [attr.aria-hidden]=\"row.kind === 'skeleton' ? true : null\"\n        [attr.tabindex]=\"row.kind === 'data' ? 0 : null\"\n        [style.height.px]=\"rowHeight()\"\n        (click)=\"onRowClick(row)\"\n        (keydown.enter)=\"onRowActivate($event, row)\"\n        (keydown.space)=\"onRowActivate($event, row)\"\n      >\n        @if (selectable()) {\n          <div\n            class=\"ui-ist__cell ui-ist__cell--checkbox ui-ist__cell--sticky-start\"\n            role=\"cell\"\n            (click)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\"\n          >\n            @if (row.kind === 'data') {\n              <ui-checkbox\n                [checked]=\"isRowSelected(row)\"\n                [ariaLabel]=\"'Select row ' + (row.index + 1)\"\n                (changed)=\"onSelectionToggle(row, $event)\"\n              ></ui-checkbox>\n            }\n          </div>\n        }\n        @for (column of columns(); track column.key) {\n          <div\n            class=\"ui-ist__cell\"\n            role=\"cell\"\n            [class.ui-ist__cell--sticky-start]=\"column.key === firstStickyKey()\"\n            [class.ui-ist__cell--sticky-end]=\"column.key === lastStickyKey()\"\n            [class.ui-ist__cell--right]=\"column.styles?.alignment === 'right'\"\n            [class.ui-ist__cell--center]=\"column.styles?.alignment === 'center'\"\n            [style.flex-basis]=\"columnWidth(column)\"\n            [style.min-width]=\"columnWidth(column)\"\n            [style.max-width]=\"columnWidth(column)\"\n            [style.left.px]=\"stickyStartOffset(column)\"\n          >\n            @if (row.kind === 'skeleton') {\n              <ui-skeleton class=\"ui-ist__skeleton\" [count]=\"1\" [theme]=\"skeletonTheme\" appearance=\"line\"></ui-skeleton>\n            } @else if (column.rowCellTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: row.item, rowIndex: row.index }\"\n              ></ng-container>\n            } @else {\n              <span class=\"ui-ist__cell-text\">{{ getCellValue(row.item, column.key) }}</span>\n            }\n          </div>\n        }\n        <div class=\"ui-ist__cell ui-ist__cell--spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n      </div>\n    </cdk-virtual-scroll-viewport>\n  }\n\n  <!-- Empty and error states render the consumer template in-frame below the header, mirroring how\n       ui-table drops `noDataRowTpl` into the table body. Mid-scroll errors sit below the loaded rows. -->\n  @if (showErrorFooter() && errorTemplate(); as errorTpl) {\n    <div class=\"ui-ist__state\" role=\"alert\">\n      <ng-container *ngTemplateOutlet=\"errorTpl; context: errorContext\"></ng-container>\n    </div>\n  }\n\n  @if (showErrorState() && errorTemplate(); as errorTpl) {\n    <div class=\"ui-ist__state\" role=\"alert\">\n      <ng-container *ngTemplateOutlet=\"errorTpl; context: errorContext\"></ng-container>\n    </div>\n  }\n\n  @if (showEmptyState() && noDataTemplate(); as emptyTpl) {\n    <div class=\"ui-ist__state\">\n      <ng-container *ngTemplateOutlet=\"emptyTpl\"></ng-container>\n    </div>\n  }\n\n  <span class=\"ui-ist__sr-only\" role=\"status\" aria-live=\"polite\">{{ statusMessage() }}</span>\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}:host{display:block}.ui-ist{display:flex;flex-direction:column;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;background:#fff}.ui-ist__header{flex:0 0 auto;box-sizing:border-box;overflow:hidden;border-bottom:1px solid #e0e0e0;background:#fff}.ui-ist__header--sticky{position:sticky;top:0;z-index:3}.ui-ist__header-scroll{overflow:hidden}@supports (animation-timeline: scroll()){.ui-ist{timeline-scope:--ui-ist-header-x}.ui-ist__body{scroll-timeline:--ui-ist-header-x x}.ui-ist__row--header .ui-ist__cell--header:not(.ui-ist__cell--sticky-start):not(.ui-ist__cell--sticky-end){animation:ui-ist-header-follow linear both;animation-timeline:--ui-ist-header-x}}@keyframes ui-ist-header-follow{to{transform:translate(calc(-1 * var(--ui-ist-header-scroll-max, 0px)))}}.ui-ist__body{flex:1 1 auto;overflow:auto;scrollbar-width:auto}.ui-ist__body::-webkit-scrollbar{width:8px;height:8px}.ui-ist__body::-webkit-scrollbar-button{display:none}.ui-ist__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:4px}.ui-ist__body::-webkit-scrollbar-track:hover{background-color:#00000026}.ui-ist__row{display:flex;width:max-content;min-width:100%;box-sizing:border-box}.ui-ist__row--header{min-height:56px}.ui-ist__row:not(.ui-ist__row--header){border-bottom:1px solid #d3d3d3}.ui-ist__row--clickable:not(.ui-ist__row--selected):hover{background:#fff2fc}.ui-ist__row--clickable:not(.ui-ist__row--selected):hover .ui-ist__cell{background:#fff2fc}.ui-ist__row--selected .ui-ist__cell{background:#f4f4f4}.ui-ist__cell{flex-grow:0;flex-shrink:0;box-sizing:border-box;display:flex;align-items:center;min-width:160px;padding:8px 24px;font-size:14px;line-height:20px;overflow:hidden;background:#fff}.ui-ist__cell--header{background:#fff;font-weight:700;font-size:14px;line-height:16px}.ui-ist__cell--right{justify-content:flex-end;text-align:right}.ui-ist__cell--center{justify-content:center;text-align:center}.ui-ist__cell--sticky-start{position:sticky;left:0;z-index:2}.ui-ist__cell--sticky-end{position:sticky;right:0;z-index:2;order:1}.ui-ist__cell--checkbox{flex:0 0 56px;min-width:56px;justify-content:center;padding:0}.ui-ist__cell--spacer{flex:1 1 auto;min-width:0;padding:0}.ui-ist__cell-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-ist__skeleton{display:block;width:100%}.ui-ist--scrolled-start .ui-ist__cell--sticky-start{box-shadow:24px 8px 24px #24242414}.ui-ist--scrolled-end .ui-ist__cell--sticky-end{box-shadow:0 8px 24px 4px #24242414}.ui-ist__state{padding:8px 24px;font-size:14px;line-height:20px}.ui-ist--condensed .ui-ist__cell{padding:8px 12px}.ui-ist--condensed .ui-ist__cell:first-child{padding-left:24px}.ui-ist--condensed .ui-ist__cell--sticky-end{padding-right:24px}.ui-ist--condensed .ui-ist__cell--spacer{padding:0}.ui-ist__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: SkeletonComponent, selector: "ui-skeleton", inputs: ["count", "theme", "appearance", "isAiTheme", "applicationTheme"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "companyColor", "name", "label", "multiple", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "hideBuiltInErrors", "hideLabelInErrors", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex"], outputs: ["changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: InfiniteScrollTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteScrollTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-infinite-scroll-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgTemplateOutlet,
@@ -345,15 +433,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                         CdkVirtualForOf,
                         SkeletonComponent,
                         CheckboxComponent,
-                    ], template: "<div\n  class=\"ui-ist\"\n  role=\"table\"\n  [class.ui-ist--condensed]=\"isCondensed()\"\n  [class.ui-ist--scrolled-start]=\"!scrollStart()\"\n  [class.ui-ist--scrolled-end]=\"horizontalScroll() && !scrollEnd()\"\n  [attr.aria-rowcount]=\"hasMore() ? -1 : data().length + 1\"\n  [attr.aria-busy]=\"loading() || loadingMore()\"\n>\n  <!-- Header: a separate element above the viewport. It never scrolls vertically (stays pinned),\n       and its horizontal scrollLeft is synced from the body so columns stay aligned. -->\n  <div\n    #headerScroll\n    class=\"ui-ist__header\"\n    [class.ui-ist__header--sticky]=\"stickyHeader()\"\n    [style.margin-right.px]=\"scrollbarWidth()\"\n    role=\"presentation\"\n  >\n    <div class=\"ui-ist__row ui-ist__row--header\" role=\"row\" aria-rowindex=\"1\">\n      @if (selectable()) {\n        <div\n          class=\"ui-ist__cell ui-ist__cell--header ui-ist__cell--checkbox ui-ist__cell--sticky-start\"\n          role=\"columnheader\"\n        ></div>\n      }\n      @for (column of columns(); track column.key; let colIndex = $index) {\n        <div\n          class=\"ui-ist__cell ui-ist__cell--header\"\n          role=\"columnheader\"\n          [class.ui-ist__cell--sticky-start]=\"column.key === firstStickyKey()\"\n          [class.ui-ist__cell--sticky-end]=\"column.key === lastStickyKey()\"\n          [class.ui-ist__cell--right]=\"column.styles?.alignment === 'right'\"\n          [class.ui-ist__cell--center]=\"column.styles?.alignment === 'center'\"\n          [style.flex-basis]=\"cellBasis(column)\"\n          [style.min-width]=\"column.styles?.['min-width']\"\n          [style.left.px]=\"stickyStartOffset(column)\"\n        >\n          @if (column.headerCellTemplate) {\n            <ng-container\n              *ngTemplateOutlet=\"column.headerCellTemplate; context: { $implicit: column.title, column, colIndex }\"\n            ></ng-container>\n          } @else {\n            <span class=\"ui-ist__cell-text\">{{ column.title }}</span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Body: the CDK viewport owns BOTH vertical (virtualized) and horizontal scroll, so sticky\n       columns pin against it and the horizontal scrollbar sits at the viewport bottom. -->\n  @if (showViewport()) {\n    <cdk-virtual-scroll-viewport\n      class=\"ui-ist__body\"\n      role=\"rowgroup\"\n      [itemSize]=\"rowHeight()\"\n      [style.height]=\"viewportHeight()\"\n    >\n      <div\n        *cdkVirtualFor=\"let row of renderRows(); let rowIndex = index; trackBy: renderRowTrackBy\"\n        class=\"ui-ist__row\"\n        role=\"row\"\n        [class.ui-ist__row--clickable]=\"row.kind === 'data'\"\n        [class.ui-ist__row--selected]=\"isRowSelected(row)\"\n        [attr.aria-selected]=\"isRowSelected(row) ? true : null\"\n        [attr.aria-rowindex]=\"row.kind === 'data' ? row.index + 2 : null\"\n        [attr.aria-hidden]=\"row.kind === 'skeleton' ? true : null\"\n        [attr.tabindex]=\"row.kind === 'data' ? 0 : null\"\n        [style.height.px]=\"rowHeight()\"\n        (click)=\"onRowClick(row)\"\n        (keydown.enter)=\"onRowActivate($event, row)\"\n        (keydown.space)=\"onRowActivate($event, row)\"\n      >\n        @if (selectable()) {\n          <div\n            class=\"ui-ist__cell ui-ist__cell--checkbox ui-ist__cell--sticky-start\"\n            role=\"cell\"\n            (click)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\"\n          >\n            @if (row.kind === 'data') {\n              <ui-checkbox\n                [checked]=\"isRowSelected(row)\"\n                [ariaLabel]=\"'Select row ' + (row.index + 1)\"\n                (changed)=\"onSelectionToggle(row, $event)\"\n              ></ui-checkbox>\n            }\n          </div>\n        }\n        @for (column of columns(); track column.key) {\n          <div\n            class=\"ui-ist__cell\"\n            role=\"cell\"\n            [class.ui-ist__cell--sticky-start]=\"column.key === firstStickyKey()\"\n            [class.ui-ist__cell--sticky-end]=\"column.key === lastStickyKey()\"\n            [class.ui-ist__cell--right]=\"column.styles?.alignment === 'right'\"\n            [class.ui-ist__cell--center]=\"column.styles?.alignment === 'center'\"\n            [style.flex-basis]=\"cellBasis(column)\"\n            [style.min-width]=\"column.styles?.['min-width']\"\n            [style.left.px]=\"stickyStartOffset(column)\"\n          >\n            @if (row.kind === 'skeleton') {\n              <ui-skeleton class=\"ui-ist__skeleton\" [count]=\"1\" [theme]=\"skeletonTheme\" appearance=\"line\"></ui-skeleton>\n            } @else if (column.rowCellTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: row.item, rowIndex: row.index }\"\n              ></ng-container>\n            } @else {\n              <span class=\"ui-ist__cell-text\">{{ getCellValue(row.item, column.key) }}</span>\n            }\n          </div>\n        }\n      </div>\n    </cdk-virtual-scroll-viewport>\n  }\n\n  <!-- Empty and error states render the consumer template in-frame below the header, mirroring how\n       ui-table drops `noDataRowTpl` into the table body. Mid-scroll errors sit below the loaded rows. -->\n  @if (showErrorFooter() && errorTemplate(); as errorTpl) {\n    <div class=\"ui-ist__state\" role=\"alert\">\n      <ng-container *ngTemplateOutlet=\"errorTpl; context: errorContext\"></ng-container>\n    </div>\n  }\n\n  @if (showErrorState() && errorTemplate(); as errorTpl) {\n    <div class=\"ui-ist__state\" role=\"alert\">\n      <ng-container *ngTemplateOutlet=\"errorTpl; context: errorContext\"></ng-container>\n    </div>\n  }\n\n  @if (showEmptyState() && noDataTemplate(); as emptyTpl) {\n    <div class=\"ui-ist__state\">\n      <ng-container *ngTemplateOutlet=\"emptyTpl\"></ng-container>\n    </div>\n  }\n\n  <span class=\"ui-ist__sr-only\" role=\"status\" aria-live=\"polite\">{{ statusMessage() }}</span>\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}:host{display:block}.ui-ist{display:flex;flex-direction:column;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;background:#fff}.ui-ist__header{flex:0 0 auto;box-sizing:border-box;overflow:hidden;border-bottom:1px solid #e0e0e0;background:#fff}.ui-ist__header--sticky{position:sticky;top:0;z-index:3}.ui-ist__body{flex:1 1 auto;overflow:auto;scrollbar-width:auto}.ui-ist__body::-webkit-scrollbar{width:8px;height:8px}.ui-ist__body::-webkit-scrollbar-button{display:none}.ui-ist__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:4px}.ui-ist__body::-webkit-scrollbar-track:hover{background-color:#00000026}.ui-ist__row{display:flex;width:max-content;min-width:100%;box-sizing:border-box}.ui-ist__row--header{min-height:56px}.ui-ist__row:not(.ui-ist__row--header){border-bottom:1px solid #d3d3d3}.ui-ist__row--clickable:not(.ui-ist__row--selected):hover{background:#fff2fc}.ui-ist__row--clickable:not(.ui-ist__row--selected):hover .ui-ist__cell{background:#fff2fc}.ui-ist__row--selected .ui-ist__cell{background:#f4f4f4}.ui-ist__cell{flex-grow:1;flex-shrink:0;box-sizing:border-box;display:flex;align-items:center;min-width:160px;padding:8px 24px;font-size:14px;line-height:20px;overflow:hidden;background:#fff}.ui-ist__cell--header{background:#fff;font-weight:700;font-size:14px;line-height:16px}.ui-ist__cell--right{justify-content:flex-end;text-align:right}.ui-ist__cell--center{justify-content:center;text-align:center}.ui-ist__cell--sticky-start{position:sticky;left:0;z-index:2}.ui-ist__cell--sticky-end{position:sticky;right:0;z-index:2}.ui-ist__cell--checkbox{flex:0 0 56px;min-width:56px;justify-content:center;padding:0}.ui-ist__cell-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-ist__skeleton{display:block;width:100%}.ui-ist--scrolled-start .ui-ist__cell--sticky-start{box-shadow:24px 8px 24px #24242414}.ui-ist--scrolled-end .ui-ist__cell--sticky-end{box-shadow:0 8px 24px 4px #24242414}.ui-ist__state{padding:8px 24px;font-size:14px;line-height:20px}.ui-ist--condensed .ui-ist__cell{padding:8px 12px}.ui-ist--condensed .ui-ist__cell:first-child{padding-left:24px}.ui-ist--condensed .ui-ist__cell:last-child{padding-right:24px}.ui-ist__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+                    ], template: "<div\n  class=\"ui-ist\"\n  role=\"table\"\n  [class.ui-ist--condensed]=\"isCondensed()\"\n  [class.ui-ist--scrolled-start]=\"!scrollStart()\"\n  [class.ui-ist--scrolled-end]=\"horizontalScroll() && !scrollEnd()\"\n  [attr.aria-rowcount]=\"hasMore() ? -1 : data().length + 1\"\n  [attr.aria-busy]=\"loading() || loadingMore()\"\n>\n  <!-- Header: a separate element above the viewport. It never scrolls vertically (stays pinned).\n       The outer element reserves the body's vertical-scrollbar width as right padding, so the reserved\n       strip keeps the header background and bottom border; the inner element carries the horizontal\n       scrollLeft synced from the body so columns stay aligned. -->\n  <div\n    class=\"ui-ist__header\"\n    [class.ui-ist__header--sticky]=\"stickyHeader()\"\n    [style.padding-right.px]=\"scrollbarWidth()\"\n    role=\"presentation\"\n  >\n    <div #headerScroll class=\"ui-ist__header-scroll\" role=\"presentation\">\n      <div class=\"ui-ist__row ui-ist__row--header\" role=\"row\" aria-rowindex=\"1\">\n        @if (selectable()) {\n          <div\n            class=\"ui-ist__cell ui-ist__cell--header ui-ist__cell--checkbox ui-ist__cell--sticky-start\"\n            role=\"columnheader\"\n          ></div>\n        }\n        @for (column of columns(); track column.key; let colIndex = $index) {\n          <div\n            class=\"ui-ist__cell ui-ist__cell--header\"\n            role=\"columnheader\"\n            [class.ui-ist__cell--sticky-start]=\"column.key === firstStickyKey()\"\n            [class.ui-ist__cell--sticky-end]=\"column.key === lastStickyKey()\"\n            [class.ui-ist__cell--right]=\"column.styles?.alignment === 'right'\"\n            [class.ui-ist__cell--center]=\"column.styles?.alignment === 'center'\"\n            [style.flex-basis]=\"columnWidth(column)\"\n            [style.min-width]=\"columnWidth(column)\"\n            [style.max-width]=\"columnWidth(column)\"\n            [style.left.px]=\"stickyStartOffset(column)\"\n          >\n            @if (column.headerCellTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"column.headerCellTemplate; context: { $implicit: column.title, column, colIndex }\"\n              ></ng-container>\n            } @else {\n              <span class=\"ui-ist__cell-text\">{{ column.title }}</span>\n            }\n          </div>\n        }\n        <div class=\"ui-ist__cell ui-ist__cell--spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Body: the CDK viewport owns BOTH vertical (virtualized) and horizontal scroll, so sticky\n       columns pin against it and the horizontal scrollbar sits at the viewport bottom. -->\n  @if (showViewport()) {\n    <cdk-virtual-scroll-viewport\n      class=\"ui-ist__body\"\n      role=\"rowgroup\"\n      [itemSize]=\"rowHeight()\"\n      [style.height]=\"viewportHeight()\"\n    >\n      <div\n        *cdkVirtualFor=\"let row of renderRows(); let rowIndex = index; trackBy: renderRowTrackBy\"\n        class=\"ui-ist__row\"\n        role=\"row\"\n        [class.ui-ist__row--clickable]=\"row.kind === 'data'\"\n        [class.ui-ist__row--selected]=\"isRowSelected(row)\"\n        [attr.aria-selected]=\"isRowSelected(row) ? true : null\"\n        [attr.aria-rowindex]=\"row.kind === 'data' ? row.index + 2 : null\"\n        [attr.aria-hidden]=\"row.kind === 'skeleton' ? true : null\"\n        [attr.tabindex]=\"row.kind === 'data' ? 0 : null\"\n        [style.height.px]=\"rowHeight()\"\n        (click)=\"onRowClick(row)\"\n        (keydown.enter)=\"onRowActivate($event, row)\"\n        (keydown.space)=\"onRowActivate($event, row)\"\n      >\n        @if (selectable()) {\n          <div\n            class=\"ui-ist__cell ui-ist__cell--checkbox ui-ist__cell--sticky-start\"\n            role=\"cell\"\n            (click)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\"\n          >\n            @if (row.kind === 'data') {\n              <ui-checkbox\n                [checked]=\"isRowSelected(row)\"\n                [ariaLabel]=\"'Select row ' + (row.index + 1)\"\n                (changed)=\"onSelectionToggle(row, $event)\"\n              ></ui-checkbox>\n            }\n          </div>\n        }\n        @for (column of columns(); track column.key) {\n          <div\n            class=\"ui-ist__cell\"\n            role=\"cell\"\n            [class.ui-ist__cell--sticky-start]=\"column.key === firstStickyKey()\"\n            [class.ui-ist__cell--sticky-end]=\"column.key === lastStickyKey()\"\n            [class.ui-ist__cell--right]=\"column.styles?.alignment === 'right'\"\n            [class.ui-ist__cell--center]=\"column.styles?.alignment === 'center'\"\n            [style.flex-basis]=\"columnWidth(column)\"\n            [style.min-width]=\"columnWidth(column)\"\n            [style.max-width]=\"columnWidth(column)\"\n            [style.left.px]=\"stickyStartOffset(column)\"\n          >\n            @if (row.kind === 'skeleton') {\n              <ui-skeleton class=\"ui-ist__skeleton\" [count]=\"1\" [theme]=\"skeletonTheme\" appearance=\"line\"></ui-skeleton>\n            } @else if (column.rowCellTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: row.item, rowIndex: row.index }\"\n              ></ng-container>\n            } @else {\n              <span class=\"ui-ist__cell-text\">{{ getCellValue(row.item, column.key) }}</span>\n            }\n          </div>\n        }\n        <div class=\"ui-ist__cell ui-ist__cell--spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n      </div>\n    </cdk-virtual-scroll-viewport>\n  }\n\n  <!-- Empty and error states render the consumer template in-frame below the header, mirroring how\n       ui-table drops `noDataRowTpl` into the table body. Mid-scroll errors sit below the loaded rows. -->\n  @if (showErrorFooter() && errorTemplate(); as errorTpl) {\n    <div class=\"ui-ist__state\" role=\"alert\">\n      <ng-container *ngTemplateOutlet=\"errorTpl; context: errorContext\"></ng-container>\n    </div>\n  }\n\n  @if (showErrorState() && errorTemplate(); as errorTpl) {\n    <div class=\"ui-ist__state\" role=\"alert\">\n      <ng-container *ngTemplateOutlet=\"errorTpl; context: errorContext\"></ng-container>\n    </div>\n  }\n\n  @if (showEmptyState() && noDataTemplate(); as emptyTpl) {\n    <div class=\"ui-ist__state\">\n      <ng-container *ngTemplateOutlet=\"emptyTpl\"></ng-container>\n    </div>\n  }\n\n  <span class=\"ui-ist__sr-only\" role=\"status\" aria-live=\"polite\">{{ statusMessage() }}</span>\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}:host{display:block}.ui-ist{display:flex;flex-direction:column;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;background:#fff}.ui-ist__header{flex:0 0 auto;box-sizing:border-box;overflow:hidden;border-bottom:1px solid #e0e0e0;background:#fff}.ui-ist__header--sticky{position:sticky;top:0;z-index:3}.ui-ist__header-scroll{overflow:hidden}@supports (animation-timeline: scroll()){.ui-ist{timeline-scope:--ui-ist-header-x}.ui-ist__body{scroll-timeline:--ui-ist-header-x x}.ui-ist__row--header .ui-ist__cell--header:not(.ui-ist__cell--sticky-start):not(.ui-ist__cell--sticky-end){animation:ui-ist-header-follow linear both;animation-timeline:--ui-ist-header-x}}@keyframes ui-ist-header-follow{to{transform:translate(calc(-1 * var(--ui-ist-header-scroll-max, 0px)))}}.ui-ist__body{flex:1 1 auto;overflow:auto;scrollbar-width:auto}.ui-ist__body::-webkit-scrollbar{width:8px;height:8px}.ui-ist__body::-webkit-scrollbar-button{display:none}.ui-ist__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:4px}.ui-ist__body::-webkit-scrollbar-track:hover{background-color:#00000026}.ui-ist__row{display:flex;width:max-content;min-width:100%;box-sizing:border-box}.ui-ist__row--header{min-height:56px}.ui-ist__row:not(.ui-ist__row--header){border-bottom:1px solid #d3d3d3}.ui-ist__row--clickable:not(.ui-ist__row--selected):hover{background:#fff2fc}.ui-ist__row--clickable:not(.ui-ist__row--selected):hover .ui-ist__cell{background:#fff2fc}.ui-ist__row--selected .ui-ist__cell{background:#f4f4f4}.ui-ist__cell{flex-grow:0;flex-shrink:0;box-sizing:border-box;display:flex;align-items:center;min-width:160px;padding:8px 24px;font-size:14px;line-height:20px;overflow:hidden;background:#fff}.ui-ist__cell--header{background:#fff;font-weight:700;font-size:14px;line-height:16px}.ui-ist__cell--right{justify-content:flex-end;text-align:right}.ui-ist__cell--center{justify-content:center;text-align:center}.ui-ist__cell--sticky-start{position:sticky;left:0;z-index:2}.ui-ist__cell--sticky-end{position:sticky;right:0;z-index:2;order:1}.ui-ist__cell--checkbox{flex:0 0 56px;min-width:56px;justify-content:center;padding:0}.ui-ist__cell--spacer{flex:1 1 auto;min-width:0;padding:0}.ui-ist__cell-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-ist__skeleton{display:block;width:100%}.ui-ist--scrolled-start .ui-ist__cell--sticky-start{box-shadow:24px 8px 24px #24242414}.ui-ist--scrolled-end .ui-ist__cell--sticky-end{box-shadow:0 8px 24px 4px #24242414}.ui-ist__state{padding:8px 24px;font-size:14px;line-height:20px}.ui-ist--condensed .ui-ist__cell{padding:8px 12px}.ui-ist--condensed .ui-ist__cell:first-child{padding-left:24px}.ui-ist--condensed .ui-ist__cell--sticky-end{padding-right:24px}.ui-ist--condensed .ui-ist__cell--spacer{padding:0}.ui-ist__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: true }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], rowIdKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIdKey", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], isCondensed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCondensed", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingMore", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }], skeletonRowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRowCount", required: false }] }], loadMoreThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMoreThreshold", required: false }] }], noDataTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataTemplate", required: false }] }], errorTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTemplate", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], retry: [{ type: i0.Output, args: ["retry"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], viewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], headerScroll: [{ type: i0.ViewChild, args: ['headerScroll', { isSignal: true }] }] } });
 
 class InfiniteScrollTableComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: InfiniteScrollTableComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: InfiniteScrollTableComponentModule, imports: [CommonModule, ScrollingModule, InfiniteScrollTableComponent], exports: [InfiniteScrollTableComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: InfiniteScrollTableComponentModule, imports: [CommonModule, ScrollingModule, InfiniteScrollTableComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteScrollTableComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: InfiniteScrollTableComponentModule, imports: [CommonModule, ScrollingModule, InfiniteScrollTableComponent], exports: [InfiniteScrollTableComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteScrollTableComponentModule, imports: [CommonModule, ScrollingModule, InfiniteScrollTableComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: InfiniteScrollTableComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteScrollTableComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ScrollingModule, InfiniteScrollTableComponent],