@mathstack/viz 0.0.1-beta.6 → 0.0.1-beta.8

package/fesm2022/mathstack-viz.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, InjectionToken, Injectable, inject, DestroyRef, NgZone, ViewChild, Component, ChangeDetectionStrategy, NgModule, ElementRef, ViewEncapsulation, Renderer2, EventEmitter, ViewContainerRef, Output } from '@angular/core';
+import { Directive, Input, InjectionToken, Injectable, inject, DestroyRef, ViewChild, Component, NgZone, ChangeDetectionStrategy, NgModule, ElementRef, ViewEncapsulation, Renderer2, EventEmitter, Output, Inject } from '@angular/core';
 import { NgOnChangesUtilities, safeAssign } from '@mathstack/app-kit';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { BehaviorSubject, filter, distinctUntilChanged, shareReplay, map, switchMap, defer, of, combineLatest, Observable, auditTime, Subject, takeUntil } from 'rxjs';
@@ -8,8 +8,9 @@ import { CommonModule, DOCUMENT, AsyncPipe } from '@angular/common';
 import { isEqual, cloneDeep } from 'lodash-es';
 import { select, utcFormat, format, axisTop, axisBottom, axisLeft, axisRight, pointer, map as map$1, min, max, scaleLinear, scaleBand, scalePoint, InternSet, scaleOrdinal, schemeTableau10, range, scaleUtc, maxIndex, polygonArea, InternMap, scaleThreshold, interpolateLab, extent, scaleQuantile, scaleQuantize, geoAlbersUsa, geoPath, group, curveLinear, line, area, least, rollup, stack, stackOffsetNone, stackOrderNone, stackOffsetDiverging } from 'd3';
 import { color } from 'd3-color';
-import { Overlay, OverlayPositionBuilder, OverlayModule } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
+import * as i1$1 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
 import { saveAs } from 'file-saver';
 import { unparse } from 'papaparse';
 import polylabel from 'polylabel';
@@ -21,10 +22,10 @@ class Marks {
             this.initFromConfig();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Marks, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: Marks, isStandalone: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Marks, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: Marks, isStandalone: true, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Marks, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Marks, decorators: [{
             type: Directive
         }] });
 
@@ -32,10 +33,10 @@ class AuxMarks extends Marks {
     initFromConfig() {
         this.drawMarks();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AuxMarks, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: AuxMarks, isStandalone: true, inputs: { config: "config" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: AuxMarks, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: AuxMarks, isStandalone: true, inputs: { config: "config" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AuxMarks, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: AuxMarks, decorators: [{
             type: Directive
         }], propDecorators: { config: [{
                 type: Input
@@ -229,10 +230,10 @@ class VicChartConfigBuilder {
             this._aspectRatio = this._width / this._height;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicChartConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicChartConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicChartConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicChartConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicChartConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicChartConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -254,7 +255,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  *  and scaled svg element in the DOM. USeful for adding elements that require access to chart scales.
  */
 class ChartComponent {
-    constructor() {
+    constructor(ngZone) {
+        this.ngZone = ngZone;
         this.config = new VicChartConfigBuilder().getConfig();
         this._config = new BehaviorSubject(null);
         this.config$ = this._config.asObservable().pipe(filter((c) => !!c), distinctUntilChanged((a, b) => isEqual(a, b)), shareReplay(1));
@@ -292,7 +294,6 @@ class ChartComponent {
         ]).pipe(filter(([w, h]) => w > 0 && h > 0), map(([width, height]) => ({ width, height })), distinctUntilChanged((a, b) => isEqual(a, b)), shareReplay(1));
         this.ranges$ = combineLatest([this.svgDimensions$, this.marginCfg$]).pipe(map(([dimensions, margin]) => this.getRangesFromSvgDimensions(dimensions, margin)), distinctUntilChanged((a, b) => isEqual(a, b)), shareReplay(1));
         this.destroyRef = inject(DestroyRef);
-        this.ngZone = inject(NgZone);
     }
     ngOnChanges(changes) {
         if (NgOnChangesUtilities.inputObjectChanged(changes, 'config')) {
@@ -341,15 +342,15 @@ class ChartComponent {
             y: vb.height / rect.height,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: ChartComponent, isStandalone: true, selector: "vic-chart", inputs: { config: "config" }, host: { classAttribute: "vic-chart" }, providers: [{ provide: CHART, useExisting: ChartComponent }], viewQueries: [{ propertyName: "divRef", first: true, predicate: ["div"], descendants: true, static: true }, { propertyName: "svgRef", first: true, predicate: ["svg"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsBefore\"></ng-container>\n<div\n  #div\n  class=\"vic-chart-container\"\n  [ngClass]=\"(strategy$ | async)\"\n  [style.maxWidth.px]=\"widthCfg$ | async\"\n  [style.minWidth.px]=\"minWidthCfg$ | async\"\n  [style.maxHeight.px]=\"heightCfg$ | async\"\n  [style.aspectRatio]=\"(strategy$ | async) === 'viewbox' ? (config.viewBoxX / config.viewBoxY) : null\"\n  [style.width.%]=\"(strategy$ | async) === 'viewbox' ? 100 : null\"\n>\n  <svg\n    #svg\n    class=\"vic-chart-svg\"\n    [ngClass]=\"(strategy$ | async)\"\n    [style.width.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.width : null\"\n    [style.height.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.height : null\"\n    [attr.viewBox]=\"(strategy$ | async) === 'viewbox' ? '0 0 ' + config.viewBoxX + ' ' + config.viewBoxY : null\"\n  >\n    <defs>\n      <ng-container *ngTemplateOutlet=\"svgDefs\"></ng-container>\n    </defs>\n    <ng-container *ngTemplateOutlet=\"svgElements\"></ng-container>\n  </svg>\n</div>\n\n<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsAfter\"></ng-container>\n\n<ng-template #htmlElementsBefore>\n  <ng-content select=\"[html-elements-before]\"></ng-content>\n</ng-template>\n\n<ng-template #svgDefs>\n  <ng-content select=\"[svg-defs]\"></ng-content>\n</ng-template>\n\n<ng-template #svgElements>\n  <ng-content select=\"[svg-elements]\"></ng-content>\n</ng-template>\n\n<ng-template #htmlElementsAfter>\n  <ng-content select=\"[html-elements-after]\"></ng-content>\n</ng-template>\n", styles: [".vic-chart-container{display:flex;align-items:stretch;box-sizing:border-box;width:100%;min-width:0}.vic-chart-container.responsive-width{contain:inline-size}.vic-chart-container.viewbox{contain:inline-size;overflow:hidden}.vic-chart-container.fixed,.vic-chart-svg{display:block}.vic-chart-svg:not(.viewbox){overflow:visible}.vic-chart-svg.viewbox{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ChartComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: ChartComponent, isStandalone: true, selector: "vic-chart", inputs: { config: "config" }, host: { classAttribute: "vic-chart" }, providers: [{ provide: CHART, useExisting: ChartComponent }], viewQueries: [{ propertyName: "divRef", first: true, predicate: ["div"], descendants: true, static: true }, { propertyName: "svgRef", first: true, predicate: ["svg"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsBefore\"></ng-container>\n<div\n  #div\n  class=\"vic-chart-container\"\n  [ngClass]=\"(strategy$ | async)\"\n  [style.maxWidth.px]=\"widthCfg$ | async\"\n  [style.minWidth.px]=\"minWidthCfg$ | async\"\n  [style.maxHeight.px]=\"heightCfg$ | async\"\n  [style.aspectRatio]=\"(strategy$ | async) === 'viewbox' ? (config.viewBoxX / config.viewBoxY) : null\"\n  [style.width.%]=\"(strategy$ | async) === 'viewbox' ? 100 : null\"\n>\n  <svg\n    #svg\n    class=\"vic-chart-svg\"\n    [ngClass]=\"(strategy$ | async)\"\n    [style.width.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.width : null\"\n    [style.height.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.height : null\"\n    [attr.viewBox]=\"(strategy$ | async) === 'viewbox' ? '0 0 ' + config.viewBoxX + ' ' + config.viewBoxY : null\"\n  >\n    <defs>\n      <ng-container *ngTemplateOutlet=\"svgDefs\"></ng-container>\n    </defs>\n    <ng-container *ngTemplateOutlet=\"svgElements\"></ng-container>\n  </svg>\n</div>\n\n<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsAfter\"></ng-container>\n\n<ng-template #htmlElementsBefore>\n  <ng-content select=\"[html-elements-before]\"></ng-content>\n</ng-template>\n\n<ng-template #svgDefs>\n  <ng-content select=\"[svg-defs]\"></ng-content>\n</ng-template>\n\n<ng-template #svgElements>\n  <ng-content select=\"[svg-elements]\"></ng-content>\n</ng-template>\n\n<ng-template #htmlElementsAfter>\n  <ng-content select=\"[html-elements-after]\"></ng-content>\n</ng-template>\n", styles: [".vic-chart-container{display:flex;align-items:stretch;box-sizing:border-box;width:100%;min-width:0}.vic-chart-container.responsive-width{contain:inline-size}.vic-chart-container.viewbox{contain:inline-size;overflow:hidden}.vic-chart-container.fixed,.vic-chart-svg{display:block}.vic-chart-svg:not(.viewbox){overflow:visible}.vic-chart-svg.viewbox{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vic-chart', providers: [{ provide: CHART, useExisting: ChartComponent }], host: {
                         class: 'vic-chart',
                     }, imports: [CommonModule], template: "<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsBefore\"></ng-container>\n<div\n  #div\n  class=\"vic-chart-container\"\n  [ngClass]=\"(strategy$ | async)\"\n  [style.maxWidth.px]=\"widthCfg$ | async\"\n  [style.minWidth.px]=\"minWidthCfg$ | async\"\n  [style.maxHeight.px]=\"heightCfg$ | async\"\n  [style.aspectRatio]=\"(strategy$ | async) === 'viewbox' ? (config.viewBoxX / config.viewBoxY) : null\"\n  [style.width.%]=\"(strategy$ | async) === 'viewbox' ? 100 : null\"\n>\n  <svg\n    #svg\n    class=\"vic-chart-svg\"\n    [ngClass]=\"(strategy$ | async)\"\n    [style.width.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.width : null\"\n    [style.height.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.height : null\"\n    [attr.viewBox]=\"(strategy$ | async) === 'viewbox' ? '0 0 ' + config.viewBoxX + ' ' + config.viewBoxY : null\"\n  >\n    <defs>\n      <ng-container *ngTemplateOutlet=\"svgDefs\"></ng-container>\n    </defs>\n    <ng-container *ngTemplateOutlet=\"svgElements\"></ng-container>\n  </svg>\n</div>\n\n<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsAfter\"></ng-container>\n\n<ng-template #htmlElementsBefore>\n  <ng-content select=\"[html-elements-before]\"></ng-content>\n</ng-template>\n\n<ng-template #svgDefs>\n  <ng-content select=\"[svg-defs]\"></ng-content>\n</ng-template>\n\n<ng-template #svgElements>\n  <ng-content select=\"[svg-elements]\"></ng-content>\n</ng-template>\n\n<ng-template #htmlElementsAfter>\n  <ng-content select=\"[html-elements-after]\"></ng-content>\n</ng-template>\n", styles: [".vic-chart-container{display:flex;align-items:stretch;box-sizing:border-box;width:100%;min-width:0}.vic-chart-container.responsive-width{contain:inline-size}.vic-chart-container.viewbox{contain:inline-size;overflow:hidden}.vic-chart-container.fixed,.vic-chart-svg{display:block}.vic-chart-svg:not(.viewbox){overflow:visible}.vic-chart-svg.viewbox{width:100%;height:100%}\n"] }]
-        }], propDecorators: { config: [{
+        }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { config: [{
                 type: Input
             }], divRef: [{
                 type: ViewChild,
@@ -395,10 +396,10 @@ class MapChartComponent extends ChartComponent {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MapChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: MapChartComponent, isStandalone: true, selector: "vic-map-chart", host: { classAttribute: "vic-map-chart" }, providers: [{ provide: CHART, useExisting: ChartComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsBefore\"></ng-container>\n<div\n  #div\n  class=\"vic-chart-container\"\n  [ngClass]=\"(strategy$ | async)\"\n  [style.maxWidth.px]=\"widthCfg$ | async\"\n  [style.minWidth.px]=\"minWidthCfg$ | async\"\n  [style.maxHeight.px]=\"heightCfg$ | async\"\n  [style.aspectRatio]=\"(strategy$ | async) === 'viewbox' ? (config.viewBoxX / config.viewBoxY) : null\"\n  [style.width.%]=\"(strategy$ | async) === 'viewbox' ? 100 : null\"\n>\n  <svg\n    #svg\n    class=\"vic-chart-svg\"\n    [ngClass]=\"(strategy$ | async)\"\n    [style.width.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.width : null\"\n    [style.height.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.height : null\"\n    [attr.viewBox]=\"(strategy$ | async) === 'viewbox' ? '0 0 ' + config.viewBoxX + ' ' + config.viewBoxY : null\"\n  >\n    <defs>\n      <ng-container *ngTemplateOutlet=\"svgDefs\"></ng-container>\n    </defs>\n    <ng-container *ngTemplateOutlet=\"svgElements\"></ng-container>\n  </svg>\n</div>\n\n<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsAfter\"></ng-container>\n\n<ng-template #htmlElementsBefore>\n  <ng-content select=\"[html-elements-before]\"></ng-content>\n</ng-template>\n\n<ng-template #svgDefs>\n  <ng-content select=\"[svg-defs]\"></ng-content>\n</ng-template>\n\n<ng-template #svgElements>\n  <ng-content select=\"[svg-elements]\"></ng-content>\n</ng-template>\n\n<ng-template #htmlElementsAfter>\n  <ng-content select=\"[html-elements-after]\"></ng-content>\n</ng-template>\n", styles: [".vic-chart-container{display:flex;align-items:stretch;box-sizing:border-box;width:100%;min-width:0}.vic-chart-container.responsive-width{contain:inline-size}.vic-chart-container.viewbox{contain:inline-size;overflow:hidden}.vic-chart-container.fixed,.vic-chart-svg{display:block}.vic-chart-svg:not(.viewbox){overflow:visible}.vic-chart-svg.viewbox{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MapChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: MapChartComponent, isStandalone: true, selector: "vic-map-chart", host: { classAttribute: "vic-map-chart" }, providers: [{ provide: CHART, useExisting: ChartComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsBefore\"></ng-container>\n<div\n  #div\n  class=\"vic-chart-container\"\n  [ngClass]=\"(strategy$ | async)\"\n  [style.maxWidth.px]=\"widthCfg$ | async\"\n  [style.minWidth.px]=\"minWidthCfg$ | async\"\n  [style.maxHeight.px]=\"heightCfg$ | async\"\n  [style.aspectRatio]=\"(strategy$ | async) === 'viewbox' ? (config.viewBoxX / config.viewBoxY) : null\"\n  [style.width.%]=\"(strategy$ | async) === 'viewbox' ? 100 : null\"\n>\n  <svg\n    #svg\n    class=\"vic-chart-svg\"\n    [ngClass]=\"(strategy$ | async)\"\n    [style.width.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.width : null\"\n    [style.height.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.height : null\"\n    [attr.viewBox]=\"(strategy$ | async) === 'viewbox' ? '0 0 ' + config.viewBoxX + ' ' + config.viewBoxY : null\"\n  >\n    <defs>\n      <ng-container *ngTemplateOutlet=\"svgDefs\"></ng-container>\n    </defs>\n    <ng-container *ngTemplateOutlet=\"svgElements\"></ng-container>\n  </svg>\n</div>\n\n<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsAfter\"></ng-container>\n\n<ng-template #htmlElementsBefore>\n  <ng-content select=\"[html-elements-before]\"></ng-content>\n</ng-template>\n\n<ng-template #svgDefs>\n  <ng-content select=\"[svg-defs]\"></ng-content>\n</ng-template>\n\n<ng-template #svgElements>\n  <ng-content select=\"[svg-elements]\"></ng-content>\n</ng-template>\n\n<ng-template #htmlElementsAfter>\n  <ng-content select=\"[html-elements-after]\"></ng-content>\n</ng-template>\n", styles: [".vic-chart-container{display:flex;align-items:stretch;box-sizing:border-box;width:100%;min-width:0}.vic-chart-container.responsive-width{contain:inline-size}.vic-chart-container.viewbox{contain:inline-size;overflow:hidden}.vic-chart-container.fixed,.vic-chart-svg{display:block}.vic-chart-svg:not(.viewbox){overflow:visible}.vic-chart-svg.viewbox{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MapChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MapChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vic-map-chart', providers: [{ provide: CHART, useExisting: ChartComponent }], host: {
                         class: 'vic-map-chart',
@@ -441,10 +442,10 @@ class XyChartComponent extends ChartComponent {
             this.scales.next({ ...this.scales.value, ...scales });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XyChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: XyChartComponent, isStandalone: true, selector: "vic-xy-chart", host: { classAttribute: "vic-xy-chart" }, providers: [{ provide: CHART, useExisting: ChartComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsBefore\"></ng-container>\n<div\n  #div\n  class=\"vic-chart-container\"\n  [ngClass]=\"(strategy$ | async)\"\n  [style.maxWidth.px]=\"widthCfg$ | async\"\n  [style.minWidth.px]=\"minWidthCfg$ | async\"\n  [style.maxHeight.px]=\"heightCfg$ | async\"\n  [style.aspectRatio]=\"(strategy$ | async) === 'viewbox' ? (config.viewBoxX / config.viewBoxY) : null\"\n  [style.width.%]=\"(strategy$ | async) === 'viewbox' ? 100 : null\"\n>\n  <svg\n    #svg\n    class=\"vic-chart-svg\"\n    [ngClass]=\"(strategy$ | async)\"\n    [style.width.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.width : null\"\n    [style.height.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.height : null\"\n    [attr.viewBox]=\"(strategy$ | async) === 'viewbox' ? '0 0 ' + config.viewBoxX + ' ' + config.viewBoxY : null\"\n  >\n    <defs>\n      <ng-container *ngTemplateOutlet=\"svgDefs\"></ng-container>\n    </defs>\n    <ng-container *ngTemplateOutlet=\"svgElements\"></ng-container>\n  </svg>\n</div>\n\n<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsAfter\"></ng-container>\n\n<ng-template #htmlElementsBefore>\n  <ng-content select=\"[html-elements-before]\"></ng-content>\n</ng-template>\n\n<ng-template #svgDefs>\n  <ng-content select=\"[svg-defs]\"></ng-content>\n</ng-template>\n\n<ng-template #svgElements>\n  <ng-content select=\"[svg-elements]\"></ng-content>\n</ng-template>\n\n<ng-template #htmlElementsAfter>\n  <ng-content select=\"[html-elements-after]\"></ng-content>\n</ng-template>\n", styles: [".vic-chart-container{display:flex;align-items:stretch;box-sizing:border-box;width:100%;min-width:0}.vic-chart-container.responsive-width{contain:inline-size}.vic-chart-container.viewbox{contain:inline-size;overflow:hidden}.vic-chart-container.fixed,.vic-chart-svg{display:block}.vic-chart-svg:not(.viewbox){overflow:visible}.vic-chart-svg.viewbox{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: XyChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: XyChartComponent, isStandalone: true, selector: "vic-xy-chart", host: { classAttribute: "vic-xy-chart" }, providers: [{ provide: CHART, useExisting: ChartComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsBefore\"></ng-container>\n<div\n  #div\n  class=\"vic-chart-container\"\n  [ngClass]=\"(strategy$ | async)\"\n  [style.maxWidth.px]=\"widthCfg$ | async\"\n  [style.minWidth.px]=\"minWidthCfg$ | async\"\n  [style.maxHeight.px]=\"heightCfg$ | async\"\n  [style.aspectRatio]=\"(strategy$ | async) === 'viewbox' ? (config.viewBoxX / config.viewBoxY) : null\"\n  [style.width.%]=\"(strategy$ | async) === 'viewbox' ? 100 : null\"\n>\n  <svg\n    #svg\n    class=\"vic-chart-svg\"\n    [ngClass]=\"(strategy$ | async)\"\n    [style.width.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.width : null\"\n    [style.height.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.height : null\"\n    [attr.viewBox]=\"(strategy$ | async) === 'viewbox' ? '0 0 ' + config.viewBoxX + ' ' + config.viewBoxY : null\"\n  >\n    <defs>\n      <ng-container *ngTemplateOutlet=\"svgDefs\"></ng-container>\n    </defs>\n    <ng-container *ngTemplateOutlet=\"svgElements\"></ng-container>\n  </svg>\n</div>\n\n<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsAfter\"></ng-container>\n\n<ng-template #htmlElementsBefore>\n  <ng-content select=\"[html-elements-before]\"></ng-content>\n</ng-template>\n\n<ng-template #svgDefs>\n  <ng-content select=\"[svg-defs]\"></ng-content>\n</ng-template>\n\n<ng-template #svgElements>\n  <ng-content select=\"[svg-elements]\"></ng-content>\n</ng-template>\n\n<ng-template #htmlElementsAfter>\n  <ng-content select=\"[html-elements-after]\"></ng-content>\n</ng-template>\n", styles: [".vic-chart-container{display:flex;align-items:stretch;box-sizing:border-box;width:100%;min-width:0}.vic-chart-container.responsive-width{contain:inline-size}.vic-chart-container.viewbox{contain:inline-size;overflow:hidden}.vic-chart-container.fixed,.vic-chart-svg{display:block}.vic-chart-svg:not(.viewbox){overflow:visible}.vic-chart-svg.viewbox{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XyChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: XyChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vic-xy-chart', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: CHART, useExisting: ChartComponent }], host: {
                         class: 'vic-xy-chart',
@@ -452,11 +453,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
         }] });
 
 class VicChartModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: VicChartModule, imports: [ChartComponent, XyChartComponent, MapChartComponent], exports: [ChartComponent, XyChartComponent, MapChartComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicChartModule, imports: [ChartComponent, XyChartComponent, MapChartComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: VicChartModule, imports: [ChartComponent, XyChartComponent, MapChartComponent], exports: [ChartComponent, XyChartComponent, MapChartComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicChartModule, imports: [ChartComponent, XyChartComponent, MapChartComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicChartModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicChartModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ChartComponent, XyChartComponent, MapChartComponent],
@@ -488,10 +489,10 @@ class VicMapAuxMarks extends AuxMarks {
     getTransitionDuration() {
         return this.chart.config.transitionDuration;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicMapAuxMarks, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: VicMapAuxMarks, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicMapAuxMarks, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: VicMapAuxMarks, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicMapAuxMarks, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicMapAuxMarks, decorators: [{
             type: Directive
         }] });
 
@@ -504,10 +505,10 @@ class PrimaryMarks extends Marks {
     initFromConfig() {
         this.setChartScalesFromRanges(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PrimaryMarks, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: PrimaryMarks, isStandalone: true, inputs: { config: "config" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: PrimaryMarks, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: PrimaryMarks, isStandalone: true, inputs: { config: "config" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PrimaryMarks, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: PrimaryMarks, decorators: [{
             type: Directive
         }], propDecorators: { config: [{
                 type: Input
@@ -551,10 +552,10 @@ class MapPrimaryMarks extends PrimaryMarks {
     getTransitionDuration() {
         return this.chart.config.transitionDuration;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MapPrimaryMarks, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: MapPrimaryMarks, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MapPrimaryMarks, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: MapPrimaryMarks, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MapPrimaryMarks, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MapPrimaryMarks, decorators: [{
             type: Directive
         }] });
 
@@ -627,10 +628,10 @@ class XyAuxMarks extends AuxMarks {
     getTransitionDuration() {
         return this.scales.useTransition ? this.chart.config.transitionDuration : 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XyAuxMarks, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: XyAuxMarks, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: XyAuxMarks, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: XyAuxMarks, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XyAuxMarks, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: XyAuxMarks, decorators: [{
             type: Directive
         }] });
 
@@ -680,10 +681,10 @@ class VicXyPrimaryMarks extends PrimaryMarks {
     getTransitionDuration() {
         return this.scales.useTransition ? this.chart.config.transitionDuration : 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXyPrimaryMarks, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: VicXyPrimaryMarks, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicXyPrimaryMarks, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: VicXyPrimaryMarks, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXyPrimaryMarks, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicXyPrimaryMarks, decorators: [{
             type: Directive
         }] });
 
@@ -1658,7 +1659,12 @@ function mixinOrdinalAxisConfig(Base) {
             super(...args);
             safeAssign(this, args[0]);
         }
+        static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Mixin, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: Mixin, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
     }
+    i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Mixin, decorators: [{
+                type: Directive
+            }], ctorParameters: () => [{ type: undefined }] });
     return Mixin;
 }
 class VicOrdinalAxisConfig extends mixinOrdinalAxisConfig(XyAxisConfig) {
@@ -1677,7 +1683,12 @@ function mixinXAxisConfig(Base) {
             const d3SuggestedDefault = dimensions.width / spacing;
             return this.getValidatedNumTicks(d3SuggestedDefault);
         }
+        static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Mixin, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: Mixin, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
     }
+    i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Mixin, decorators: [{
+                type: Directive
+            }], ctorParameters: () => [{ type: undefined }] });
     return Mixin;
 }
 class XAxisConfig extends mixinXAxisConfig(XyAxisConfig) {
@@ -1738,10 +1749,10 @@ class VicXOrdinalAxisConfigBuilder extends XyAxisBaseBuilder {
             ticks: this.ticksBuilder._build('x'),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXOrdinalAxisConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXOrdinalAxisConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicXOrdinalAxisConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicXOrdinalAxisConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXOrdinalAxisConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicXOrdinalAxisConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -1816,11 +1827,28 @@ class XyAxis extends XyAuxMarks {
             this.processDomain();
             this.drawGrid();
         });
+        // Hide elements immediately based on config to prevent flash during transition
+        this.hideElementsPerConfig();
         this.processTickLabels();
         if (this.config.label) {
             this.createLabel();
         }
     }
+    hideElementsPerConfig() {
+        // Remove tick marks immediately if configured to be hidden
+        if (this.config.ticks.marksDisplay === false) {
+            this.axisGroup.selectAll('.tick line').interrupt().remove();
+        }
+        // Remove tick labels immediately if configured to be hidden
+        if (this.config.ticks.labelsDisplay === false) {
+            this.axisGroup.selectAll('.tick text').interrupt().remove();
+        }
+        // Remove baseline immediately if not displayed and no zero baseline exists
+        const zeroAxisTranslate = this.getBaselineTranslate();
+        if (!this.config.baseline.display && zeroAxisTranslate === null) {
+            this.axisGroup.select('.domain').interrupt().remove();
+        }
+    }
     processTicks() {
         const tickText = select(this.elRef.nativeElement).selectAll('.tick text');
         if (this.config.ticks.class) {
@@ -1845,10 +1873,7 @@ class XyAxis extends XyAuxMarks {
         if (this.config.ticks.wrap && this.config.ticks.wrap.width !== undefined) {
             this.wrapAxisTickText(tickText);
         }
-        if (this.config.ticks.marksDisplay === false) {
-            const marks = select(this.elRef.nativeElement).selectAll(`.${this.class.axisGroup} .tick line`);
-            marks.remove();
-        }
+        // Note: marksDisplay removal is now handled immediately in hideElementsPerConfig()
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     setTickFontSize(tickTextSelection) {
@@ -1892,14 +1917,10 @@ class XyAxis extends XyAuxMarks {
                 .attr('transform', null)
                 .attr('stroke-dasharray', null));
         }
-        if (!this.config.baseline.display && zeroAxisTranslate === null) {
-            this.axisGroup.call((g) => g.select('.domain').remove());
-        }
+        // Note: baseline removal is now handled immediately in hideElementsPerConfig()
     }
     processTickLabels() {
-        if (this.config.ticks.labelsDisplay === false) {
-            this.axisGroup.call((g) => g.selectAll('.tick text').remove());
-        }
+        // Note: labelsDisplay removal is now handled immediately in hideElementsPerConfig()
         if (this.config.ticks.rotate) {
             this.axisGroup.call((g) => g
                 .selectAll('.tick text')
@@ -1968,10 +1989,10 @@ class XyAxis extends XyAuxMarks {
             : this.getTransitionDuration();
         return selection.transition().duration(transitionDuration);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XyAxis, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: XyAxis, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: XyAxis, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: XyAxis, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XyAxis, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: XyAxis, decorators: [{
             type: Directive
         }] });
 
@@ -1985,7 +2006,14 @@ function ordinalAxisMixin(Base) {
                     : formatter(tickFormat)(d);
             });
         }
+        static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Mixin, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: Mixin, isStandalone: true, inputs: { config: "config" }, usesInheritance: true, ngImport: i0 }); }
     }
+    i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Mixin, decorators: [{
+                type: Directive
+            }], propDecorators: { config: [{
+                    type: Input
+                }] } });
     return Mixin;
 }
 
@@ -2067,16 +2095,23 @@ function xAxisMixin(Base) {
                 label.attr('x', x);
             }
         }
+        static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Mixin, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: Mixin, isStandalone: true, inputs: { config: "config" }, usesInheritance: true, ngImport: i0 }); }
     }
+    i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Mixin, decorators: [{
+                type: Directive
+            }], propDecorators: { config: [{
+                    type: Input
+                }] } });
     return Mixin;
 }
 
 const XOrdinalAxis = xAxisMixin(ordinalAxisMixin((XyAxis)));
 class XOrdinalAxisComponent extends XOrdinalAxis {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XOrdinalAxisComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: XOrdinalAxisComponent, isStandalone: true, selector: "[vic-x-ordinal-axis]", inputs: { config: "config" }, host: { properties: { "class": "config.marksClass", "attr.mix-blend-mode": "config.mixBlendMode", "attr.transform": "translate" }, classAttribute: "vic-axis" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [".vic-axis-x-ordinal .vic-axis-label{fill:currentColor}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: XOrdinalAxisComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: XOrdinalAxisComponent, isStandalone: true, selector: "[vic-x-ordinal-axis]", inputs: { config: "config" }, host: { properties: { "class": "config.marksClass", "attr.mix-blend-mode": "config.mixBlendMode", "attr.transform": "translate" }, classAttribute: "vic-axis" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [".vic-axis-x-ordinal .vic-axis-label{fill:currentColor}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XOrdinalAxisComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: XOrdinalAxisComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-x-ordinal-axis]', template: '', inputs: ['config'], encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'config.marksClass',
@@ -2095,7 +2130,12 @@ function mixinQuantitativeAxisConfig(Base) {
                 safeAssign(this, args[0]);
             }
         }
+        static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Mixin, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: Mixin, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
     }
+    i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Mixin, decorators: [{
+                type: Directive
+            }], ctorParameters: () => [{ type: undefined }] });
     return Mixin;
 }
 class VicQuantitativeAxisConfig extends mixinQuantitativeAxisConfig(XyAxisConfig) {
@@ -2155,10 +2195,10 @@ class VicXQuantitativeAxisConfigBuilder extends XyAxisBaseBuilder {
             ticks: this.ticksBuilder._build('x'),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXQuantitativeAxisConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXQuantitativeAxisConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicXQuantitativeAxisConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicXQuantitativeAxisConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXQuantitativeAxisConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicXQuantitativeAxisConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -2302,16 +2342,23 @@ function quantitativeAxisMixin(Base) {
             // For composite formats or unrecognized formats, return null to use default logic
             return null;
         }
+        static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Mixin, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: Mixin, isStandalone: true, inputs: { config: "config" }, usesInheritance: true, ngImport: i0 }); }
     }
+    i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Mixin, decorators: [{
+                type: Directive
+            }], propDecorators: { config: [{
+                    type: Input
+                }] } });
     return Mixin;
 }
 
 const XQuantitativeAxis = xAxisMixin(quantitativeAxisMixin(XyAxis));
 class XQuantitativeAxisComponent extends XQuantitativeAxis {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XQuantitativeAxisComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: XQuantitativeAxisComponent, isStandalone: true, selector: "[vic-x-quantitative-axis]", inputs: { config: "config" }, host: { properties: { "class": "config.marksClass", "attr.mix-blend-mode": "config.mixBlendMode", "attr.transform": "translate" }, classAttribute: "vic-axis" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [".vic-axis-x-quantitative .vic-axis-label{fill:currentColor}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: XQuantitativeAxisComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: XQuantitativeAxisComponent, isStandalone: true, selector: "[vic-x-quantitative-axis]", inputs: { config: "config" }, host: { properties: { "class": "config.marksClass", "attr.mix-blend-mode": "config.mixBlendMode", "attr.transform": "translate" }, classAttribute: "vic-axis" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [".vic-axis-x-quantitative .vic-axis-label{fill:currentColor}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XQuantitativeAxisComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: XQuantitativeAxisComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-x-quantitative-axis]', template: '', inputs: ['config'], encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'config.marksClass',
@@ -2449,16 +2496,23 @@ function yAxisMixin(Base) {
                 }
             }
         }
+        static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Mixin, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: Mixin, isStandalone: true, inputs: { config: "config" }, usesInheritance: true, ngImport: i0 }); }
     }
+    i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Mixin, decorators: [{
+                type: Directive
+            }], propDecorators: { config: [{
+                    type: Input
+                }] } });
     return Mixin;
 }
 
 const YOrdinalAxis = yAxisMixin(ordinalAxisMixin((XyAxis)));
 class YOrdinalAxisComponent extends YOrdinalAxis {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: YOrdinalAxisComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: YOrdinalAxisComponent, isStandalone: true, selector: "[vic-y-ordinal-axis]", inputs: { config: "config" }, host: { properties: { "class": "config.marksClass", "attr.mix-blend-mode": "config.mixBlendMode", "attr.transform": "translate" }, classAttribute: "vic-axis" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [".vic-axis-y-ordinal .vic-axis-label{fill:currentColor}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: YOrdinalAxisComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: YOrdinalAxisComponent, isStandalone: true, selector: "[vic-y-ordinal-axis]", inputs: { config: "config" }, host: { properties: { "class": "config.marksClass", "attr.mix-blend-mode": "config.mixBlendMode", "attr.transform": "translate" }, classAttribute: "vic-axis" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [".vic-axis-y-ordinal .vic-axis-label{fill:currentColor}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: YOrdinalAxisComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: YOrdinalAxisComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-y-ordinal-axis]', template: '', inputs: ['config'], encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'config.marksClass',
@@ -2470,10 +2524,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 
 const YQuantitativeAxis = yAxisMixin(quantitativeAxisMixin(XyAxis));
 class YQuantitativeAxisComponent extends YQuantitativeAxis {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: YQuantitativeAxisComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: YQuantitativeAxisComponent, isStandalone: true, selector: "[vic-y-quantitative-axis]", inputs: { config: "config" }, host: { properties: { "class": "config.marksClass", "attr.mix-blend-mode": "config.mixBlendMode", "attr.transform": "translate" }, classAttribute: "vic-axis" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [".vic-axis-y-quantitative .vic-axis-label{fill:currentColor}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: YQuantitativeAxisComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: YQuantitativeAxisComponent, isStandalone: true, selector: "[vic-y-quantitative-axis]", inputs: { config: "config" }, host: { properties: { "class": "config.marksClass", "attr.mix-blend-mode": "config.mixBlendMode", "attr.transform": "translate" }, classAttribute: "vic-axis" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [".vic-axis-y-quantitative .vic-axis-label{fill:currentColor}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: YQuantitativeAxisComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: YQuantitativeAxisComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-y-quantitative-axis]', template: '', inputs: ['config'], encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'config.marksClass',
@@ -2484,17 +2538,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
         }] });
 
 class VicXyAxisModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXyAxisModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: VicXyAxisModule, imports: [YQuantitativeAxisComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicXyAxisModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: VicXyAxisModule, imports: [YQuantitativeAxisComponent,
             YOrdinalAxisComponent,
             XQuantitativeAxisComponent,
             XOrdinalAxisComponent], exports: [YQuantitativeAxisComponent,
             YOrdinalAxisComponent,
             XQuantitativeAxisComponent,
             XOrdinalAxisComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXyAxisModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicXyAxisModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXyAxisModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicXyAxisModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2524,7 +2578,12 @@ function mixinYAxisConfig(Base) {
             const d3SuggestedDefault = dimensions.height / spacing;
             return this.getValidatedNumTicks(d3SuggestedDefault);
         }
+        static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Mixin, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: Mixin, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
     }
+    i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Mixin, decorators: [{
+                type: Directive
+            }], ctorParameters: () => [{ type: undefined }] });
     return Mixin;
 }
 class YAxisConfig extends mixinYAxisConfig(XyAxisConfig) {
@@ -2587,10 +2646,10 @@ class VicYOrdinalAxisConfigBuilder extends XyAxisBaseBuilder {
             ticks: this.ticksBuilder._build('y'),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicYOrdinalAxisConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicYOrdinalAxisConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicYOrdinalAxisConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicYOrdinalAxisConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicYOrdinalAxisConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicYOrdinalAxisConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -2649,10 +2708,10 @@ class VicYQuantitativeAxisConfigBuilder extends XyAxisBaseBuilder {
             ticks: this.ticksBuilder._build('y'),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicYQuantitativeAxisConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicYQuantitativeAxisConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicYQuantitativeAxisConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicYQuantitativeAxisConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicYQuantitativeAxisConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicYQuantitativeAxisConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -3325,14 +3384,14 @@ class BarsComponent extends VicXyPrimaryMarks {
             this.config.quantitative.values[barDatum.index] ===
                 this.config.quantitative.valueAccessor(d));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BarsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: BarsComponent, isStandalone: true, selector: "[vic-primary-marks-bars]", host: { properties: { "class": "config.marksClass", "style.mixBlendMode": "config.mixBlendMode" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: BarsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: BarsComponent, isStandalone: true, selector: "[vic-primary-marks-bars]", host: { properties: { "class": "config.marksClass", "style.mixBlendMode": "config.mixBlendMode" } }, providers: [
             { provide: VIC_PRIMARY_MARKS, useExisting: BarsComponent },
             { provide: BARS, useExisting: BarsComponent },
             { provide: ChartComponent, useExisting: XyChartComponent },
         ], usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BarsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: BarsComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-primary-marks-bars]', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: VIC_PRIMARY_MARKS, useExisting: BarsComponent },
@@ -3438,10 +3497,10 @@ class EventsDirective {
     asHost() {
         return this;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EventsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: EventsDirective, isStandalone: true, inputs: { clickRemoveEvent$: "clickRemoveEvent$", inputEvent$: "inputEvent$" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: EventsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: EventsDirective, isStandalone: true, inputs: { clickRemoveEvent$: "clickRemoveEvent$", inputEvent$: "inputEvent$" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: EventsDirective, decorators: [{
             type: Directive
         }], propDecorators: { clickRemoveEvent$: [{
                 type: Input
@@ -3665,10 +3724,10 @@ class VicHtmlTooltipConfigBuilder {
         }
         return panelClasses;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicHtmlTooltipConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicHtmlTooltipConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicHtmlTooltipConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicHtmlTooltipConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicHtmlTooltipConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicHtmlTooltipConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -3830,7 +3889,11 @@ class TooltipPositionBuilder {
 }
 
 class HtmlTooltipDirective {
-    constructor() {
+    constructor(viewContainerRef, overlay, overlayPositionBuilder, document) {
+        this.viewContainerRef = viewContainerRef;
+        this.overlay = overlay;
+        this.overlayPositionBuilder = overlayPositionBuilder;
+        this.document = document;
         this.backdropClick = new EventEmitter();
         this.backdropUnsubscribe = new Subject();
         this.portalAttached = false;
@@ -3839,10 +3902,6 @@ class HtmlTooltipDirective {
                 this.hide();
             }
         };
-        this.viewContainerRef = inject(ViewContainerRef);
-        this.overlay = inject(Overlay);
-        this.overlayPositionBuilder = inject(OverlayPositionBuilder);
-        this.document = inject(DOCUMENT);
     }
     init() {
         if (!this.overlayRef) {
@@ -3978,16 +4037,19 @@ class HtmlTooltipDirective {
             this.overlayRef.dispose();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HtmlTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: HtmlTooltipDirective, isStandalone: true, selector: "vic-html-tooltip", inputs: { template: "template", config: "config" }, outputs: { backdropClick: "backdropClick" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: HtmlTooltipDirective, deps: [{ token: i0.ViewContainerRef }, { token: i1$1.Overlay }, { token: i1$1.OverlayPositionBuilder }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: HtmlTooltipDirective, isStandalone: true, selector: "vic-html-tooltip", inputs: { template: "template", config: "config" }, outputs: { backdropClick: "backdropClick" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HtmlTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: HtmlTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'vic-html-tooltip',
                 }]
-        }], propDecorators: { template: [{
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$1.Overlay }, { type: i1$1.OverlayPositionBuilder }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { template: [{
                 type: Input
             }], config: [{
                 type: Input
@@ -4000,10 +4062,10 @@ class TooltipTriangleComponent {
         this.height = 12;
         this.width = 20;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TooltipTriangleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: TooltipTriangleComponent, isStandalone: true, selector: "vic-tooltip-triangle", inputs: { height: "height", width: "width" }, ngImport: i0, template: "<svg\n  width=\"100%\"\n  [attr.height]=\"height\"\n  [style.--width]=\"width + 'px'\"\n  class=\"vic-tooltip-svg-triangle center\"\n>\n  <g class=\"svg-g\">\n    <path\n      class=\"triangle-path\"\n      [attr.d]=\"'M 0,0 ' + (width / 2) + ',' + height + ' ' + width + ',0'\"\n    ></path>\n  </g>\n</svg>\n\n<svg\n  width=\"100%\"\n  [attr.height]=\"height\"\n  [style.--width]=\"width + 'px'\"\n  class=\"vic-tooltip-svg-triangle right\"\n>\n  <g class=\"svg-g\">\n    <path\n      class=\"triangle-path\"\n      [attr.d]=\"'M 0,0 ' + (width / 2) + ',' + height + ' ' + (width / 2) + ',0'\"\n    ></path>\n  </g>\n</svg>\n\n<svg\n  width=\"100%\"\n  [attr.height]=\"height\"\n  [style.--width]=\"width + 'px'\"\n  class=\"vic-tooltip-svg-triangle left\"\n>\n  <g class=\"svg-g\">\n    <path\n      class=\"triangle-path\"\n      [attr.d]=\"'M 0,0 ' + '0,' + height + ' ' + (width / 2) + ',0'\"\n    ></path>\n  </g>\n</svg>\n", styles: [".cdk-overlay-container .position-bottom-center .vic-tooltip-svg-triangle.center{transform:translate(calc(50% - var(--width) / 2),-2px)}.cdk-overlay-container .position-bottom-center .vic-tooltip-svg-triangle.right,.cdk-overlay-container .position-bottom-center .vic-tooltip-svg-triangle.left,.cdk-overlay-container .position-bottom-left .vic-tooltip-svg-triangle.center,.cdk-overlay-container .position-bottom-left .vic-tooltip-svg-triangle.right{display:none}.cdk-overlay-container .position-bottom-left .vic-tooltip-svg-triangle.left{transform:translateY(-2px)}.cdk-overlay-container .position-bottom-right .vic-tooltip-svg-triangle.center{display:none}.cdk-overlay-container .position-bottom-right .vic-tooltip-svg-triangle.right{transform:translate(calc(100% - var(--width) / 2),-2px)}.cdk-overlay-container .position-bottom-right .vic-tooltip-svg-triangle.left{display:none}.cdk-overlay-container .vic-tooltip-svg-triangle{display:block;transform:translate(calc(50% - var(--width) / 2),-2px)}.cdk-overlay-container .vic-tooltip-svg-triangle .triangle-path{stroke:var(--tooltip-triangle-stroke, gray);fill:var(--tooltip-triangle-fill, white);fill-opacity:var(--tooltip-triangle-fill-opacity, 1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TooltipTriangleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: TooltipTriangleComponent, isStandalone: true, selector: "vic-tooltip-triangle", inputs: { height: "height", width: "width" }, ngImport: i0, template: "<svg\n  width=\"100%\"\n  [attr.height]=\"height\"\n  [style.--width]=\"width + 'px'\"\n  class=\"vic-tooltip-svg-triangle center\"\n>\n  <g class=\"svg-g\">\n    <path\n      class=\"triangle-path\"\n      [attr.d]=\"'M 0,0 ' + (width / 2) + ',' + height + ' ' + width + ',0'\"\n    ></path>\n  </g>\n</svg>\n\n<svg\n  width=\"100%\"\n  [attr.height]=\"height\"\n  [style.--width]=\"width + 'px'\"\n  class=\"vic-tooltip-svg-triangle right\"\n>\n  <g class=\"svg-g\">\n    <path\n      class=\"triangle-path\"\n      [attr.d]=\"'M 0,0 ' + (width / 2) + ',' + height + ' ' + (width / 2) + ',0'\"\n    ></path>\n  </g>\n</svg>\n\n<svg\n  width=\"100%\"\n  [attr.height]=\"height\"\n  [style.--width]=\"width + 'px'\"\n  class=\"vic-tooltip-svg-triangle left\"\n>\n  <g class=\"svg-g\">\n    <path\n      class=\"triangle-path\"\n      [attr.d]=\"'M 0,0 ' + '0,' + height + ' ' + (width / 2) + ',0'\"\n    ></path>\n  </g>\n</svg>\n", styles: [".cdk-overlay-container .position-bottom-center .vic-tooltip-svg-triangle.center{transform:translate(calc(50% - var(--width) / 2),-2px)}.cdk-overlay-container .position-bottom-center .vic-tooltip-svg-triangle.right,.cdk-overlay-container .position-bottom-center .vic-tooltip-svg-triangle.left,.cdk-overlay-container .position-bottom-left .vic-tooltip-svg-triangle.center,.cdk-overlay-container .position-bottom-left .vic-tooltip-svg-triangle.right{display:none}.cdk-overlay-container .position-bottom-left .vic-tooltip-svg-triangle.left{transform:translateY(-2px)}.cdk-overlay-container .position-bottom-right .vic-tooltip-svg-triangle.center{display:none}.cdk-overlay-container .position-bottom-right .vic-tooltip-svg-triangle.right{transform:translate(calc(100% - var(--width) / 2),-2px)}.cdk-overlay-container .position-bottom-right .vic-tooltip-svg-triangle.left{display:none}.cdk-overlay-container .vic-tooltip-svg-triangle{display:block;transform:translate(calc(50% - var(--width) / 2),-2px)}.cdk-overlay-container .vic-tooltip-svg-triangle .triangle-path{stroke:var(--tooltip-triangle-stroke, gray);fill:var(--tooltip-triangle-fill, white);fill-opacity:var(--tooltip-triangle-fill-opacity, 1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TooltipTriangleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TooltipTriangleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vic-tooltip-triangle', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<svg\n  width=\"100%\"\n  [attr.height]=\"height\"\n  [style.--width]=\"width + 'px'\"\n  class=\"vic-tooltip-svg-triangle center\"\n>\n  <g class=\"svg-g\">\n    <path\n      class=\"triangle-path\"\n      [attr.d]=\"'M 0,0 ' + (width / 2) + ',' + height + ' ' + width + ',0'\"\n    ></path>\n  </g>\n</svg>\n\n<svg\n  width=\"100%\"\n  [attr.height]=\"height\"\n  [style.--width]=\"width + 'px'\"\n  class=\"vic-tooltip-svg-triangle right\"\n>\n  <g class=\"svg-g\">\n    <path\n      class=\"triangle-path\"\n      [attr.d]=\"'M 0,0 ' + (width / 2) + ',' + height + ' ' + (width / 2) + ',0'\"\n    ></path>\n  </g>\n</svg>\n\n<svg\n  width=\"100%\"\n  [attr.height]=\"height\"\n  [style.--width]=\"width + 'px'\"\n  class=\"vic-tooltip-svg-triangle left\"\n>\n  <g class=\"svg-g\">\n    <path\n      class=\"triangle-path\"\n      [attr.d]=\"'M 0,0 ' + '0,' + height + ' ' + (width / 2) + ',0'\"\n    ></path>\n  </g>\n</svg>\n", styles: [".cdk-overlay-container .position-bottom-center .vic-tooltip-svg-triangle.center{transform:translate(calc(50% - var(--width) / 2),-2px)}.cdk-overlay-container .position-bottom-center .vic-tooltip-svg-triangle.right,.cdk-overlay-container .position-bottom-center .vic-tooltip-svg-triangle.left,.cdk-overlay-container .position-bottom-left .vic-tooltip-svg-triangle.center,.cdk-overlay-container .position-bottom-left .vic-tooltip-svg-triangle.right{display:none}.cdk-overlay-container .position-bottom-left .vic-tooltip-svg-triangle.left{transform:translateY(-2px)}.cdk-overlay-container .position-bottom-right .vic-tooltip-svg-triangle.center{display:none}.cdk-overlay-container .position-bottom-right .vic-tooltip-svg-triangle.right{transform:translate(calc(100% - var(--width) / 2),-2px)}.cdk-overlay-container .position-bottom-right .vic-tooltip-svg-triangle.left{display:none}.cdk-overlay-container .vic-tooltip-svg-triangle{display:block;transform:translate(calc(50% - var(--width) / 2),-2px)}.cdk-overlay-container .vic-tooltip-svg-triangle .triangle-path{stroke:var(--tooltip-triangle-stroke, gray);fill:var(--tooltip-triangle-fill, white);fill-opacity:var(--tooltip-triangle-fill-opacity, 1)}\n"] }]
         }], propDecorators: { height: [{
@@ -4013,15 +4075,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             }] } });
 
 class VicHtmlTooltipModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicHtmlTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: VicHtmlTooltipModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicHtmlTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: VicHtmlTooltipModule, imports: [CommonModule,
             OverlayModule,
             HtmlTooltipDirective,
             TooltipTriangleComponent], exports: [HtmlTooltipDirective, TooltipTriangleComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicHtmlTooltipModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicHtmlTooltipModule, imports: [CommonModule,
             OverlayModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicHtmlTooltipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicHtmlTooltipModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -4051,10 +4113,10 @@ class BarsTooltipPositioner extends TooltipPositioner {
 }
 
 class BarsEventsDirective extends EventsDirective {
-    constructor() {
-        super(...arguments);
+    constructor(bars) {
+        super();
+        this.bars = bars;
         this.interactionOutput = new EventEmitter();
-        this.bars = inject(BARS);
     }
     get marks() {
         return this.bars;
@@ -4191,15 +4253,18 @@ class BarsEventsDirective extends EventsDirective {
         this.positionX = undefined;
         this.positionY = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BarsEventsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: BarsEventsDirective, isStandalone: true, selector: "[vicBarsEvents]", inputs: { hoverActions: "hoverActions", hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: BarsEventsDirective, deps: [{ token: BARS }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: BarsEventsDirective, isStandalone: true, selector: "[vicBarsEvents]", inputs: { hoverActions: "hoverActions", hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BarsEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: BarsEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vicBarsEvents]',
                 }]
-        }], propDecorators: { hoverActions: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [BARS]
+                }] }], propDecorators: { hoverActions: [{
                 type: Input
             }], hoverMoveActions: [{
                 type: Input
@@ -4212,11 +4277,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             }] } });
 
 class VicBarsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicBarsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: VicBarsModule, imports: [BarsComponent, BarsEventsDirective], exports: [BarsComponent, BarsEventsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicBarsModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicBarsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: VicBarsModule, imports: [BarsComponent, BarsEventsDirective], exports: [BarsComponent, BarsEventsDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicBarsModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicBarsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicBarsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [BarsComponent, BarsEventsDirective],
@@ -5203,10 +5268,10 @@ class VicBarsConfigBuilder extends PrimaryMarksBuilder {
     getQuantitativeDimensionName() {
         return this._orientation === 'horizontal' ? 'X' : 'Y';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicBarsConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicBarsConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicBarsConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicBarsConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicBarsConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicBarsConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -5280,109 +5345,6 @@ const valueFormat = {
     monthFullYear: '%B %Y',
 };
 
-/**
- * A dimension that transforms Date values into a position on a chart.
- *
- * This dimension is used for the positional dimensions of a chart, such as x and y. The underlying scale will always be a [D3 time scale](https://d3js.org/d3-scale/time). The range of the scale will be a dimension from the chart.
- *
- * The generic is the type of the data that will be passed to the dimension.
- *
- * TESTABLE FUNCTIONALITY
- *
- * - It extracts values for the dimension from data.
- *   - tested in: lines.cy.ts
- * - It sets the domain of the dimension.
- *   - tested in: lines.cy.ts
- * - It creates and returns a scale from a range.
- *   - tested in: lines.cy.ts
- * - It checks if a value is in valid.
- *   - tested in: lines.cy.ts
- * - The domain will be unique values from the user-provided domain if the user provides a domain.
- *   - tested in: date-chart-position.spec.ts
- * - The domain will be unique values from the data if no custom domain is given by the user.
- *   - tested in: date-chart-position.spec.ts
- * - The domain can be set in reverse order.
- *   - tested in: date-chart-position.spec.ts
- */
-class DateChartPositionDimension extends DataDimension {
-    constructor(options) {
-        super('date');
-        safeAssign(this, options);
-    }
-    setPropertiesFromData(data) {
-        this.setValues(data);
-        this.setDomain();
-    }
-    setDomain() {
-        const extents = this.domain === undefined
-            ? [min(this.values), max(this.values)]
-            : this.domain;
-        this.calculatedDomain = extents;
-    }
-    getScaleFromRange(range) {
-        return this.scaleFn().domain(this.calculatedDomain).range(range);
-    }
-    // returns false if data is undefined or null of not a Date
-    // for some charts this may be fine
-    // original intended use case: d3Line can only handle defined values
-    isValidValue(x) {
-        return isDate(x);
-    }
-}
-
-const DEFAULT$o = {
-    _scaleFn: scaleUtc,
-    _formatSpecifier: '%Y %m',
-};
-class DateChartPositionDimensionBuilder extends DataDimensionBuilder {
-    constructor() {
-        super();
-        safeAssign(this, DEFAULT$o);
-    }
-    domain(domain) {
-        if (domain === null) {
-            this._domain = undefined;
-            return this;
-        }
-        this._domain = domain;
-        return this;
-    }
-    formatSpecifier(formatSpecifier) {
-        if (formatSpecifier === null) {
-            this._formatSpecifier = undefined;
-            return this;
-        }
-        this._formatSpecifier = formatSpecifier;
-        return this;
-    }
-    scaleFn(scaleFn) {
-        if (scaleFn === null) {
-            this._scaleFn = undefined;
-            return this;
-        }
-        this._scaleFn = scaleFn;
-        return this;
-    }
-    /**
-     * @internal This function is for internal use only and should never be called by the user.
-     *
-     * @param dimensionName A user-intelligible name for the dimension being built. Used for error messages. Should be title cased.
-     */
-    _build(dimensionName) {
-        this.validateBuilder(dimensionName);
-        return new DateChartPositionDimension({
-            domain: this._domain,
-            formatFunction: this._formatFunction,
-            formatSpecifier: this._formatSpecifier,
-            scaleFn: this._scaleFn,
-            valueAccessor: this._valueAccessor,
-        });
-    }
-    validateBuilder(dimensionName) {
-        this.validateValueAccessor(dimensionName);
-    }
-}
-
 class VicDataExport {
     saveCSV(name, dataConfigs) {
         const blobParts = [];
@@ -5453,10 +5415,10 @@ class VicDataExport {
         const blob = new Blob(blobParts, { type: 'text/csv;charset=utf-8' });
         saveAs.saveAs(blob, `${name}.csv`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicDataExport, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicDataExport, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicDataExport, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicDataExport, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicDataExport, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicDataExport, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -5530,6 +5492,109 @@ class VicDataExportConfig {
     }
 }
 
+/**
+ * A dimension that transforms Date values into a position on a chart.
+ *
+ * This dimension is used for the positional dimensions of a chart, such as x and y. The underlying scale will always be a [D3 time scale](https://d3js.org/d3-scale/time). The range of the scale will be a dimension from the chart.
+ *
+ * The generic is the type of the data that will be passed to the dimension.
+ *
+ * TESTABLE FUNCTIONALITY
+ *
+ * - It extracts values for the dimension from data.
+ *   - tested in: lines.cy.ts
+ * - It sets the domain of the dimension.
+ *   - tested in: lines.cy.ts
+ * - It creates and returns a scale from a range.
+ *   - tested in: lines.cy.ts
+ * - It checks if a value is in valid.
+ *   - tested in: lines.cy.ts
+ * - The domain will be unique values from the user-provided domain if the user provides a domain.
+ *   - tested in: date-chart-position.spec.ts
+ * - The domain will be unique values from the data if no custom domain is given by the user.
+ *   - tested in: date-chart-position.spec.ts
+ * - The domain can be set in reverse order.
+ *   - tested in: date-chart-position.spec.ts
+ */
+class DateChartPositionDimension extends DataDimension {
+    constructor(options) {
+        super('date');
+        safeAssign(this, options);
+    }
+    setPropertiesFromData(data) {
+        this.setValues(data);
+        this.setDomain();
+    }
+    setDomain() {
+        const extents = this.domain === undefined
+            ? [min(this.values), max(this.values)]
+            : this.domain;
+        this.calculatedDomain = extents;
+    }
+    getScaleFromRange(range) {
+        return this.scaleFn().domain(this.calculatedDomain).range(range);
+    }
+    // returns false if data is undefined or null of not a Date
+    // for some charts this may be fine
+    // original intended use case: d3Line can only handle defined values
+    isValidValue(x) {
+        return isDate(x);
+    }
+}
+
+const DEFAULT$o = {
+    _scaleFn: scaleUtc,
+    _formatSpecifier: '%Y %m',
+};
+class DateChartPositionDimensionBuilder extends DataDimensionBuilder {
+    constructor() {
+        super();
+        safeAssign(this, DEFAULT$o);
+    }
+    domain(domain) {
+        if (domain === null) {
+            this._domain = undefined;
+            return this;
+        }
+        this._domain = domain;
+        return this;
+    }
+    formatSpecifier(formatSpecifier) {
+        if (formatSpecifier === null) {
+            this._formatSpecifier = undefined;
+            return this;
+        }
+        this._formatSpecifier = formatSpecifier;
+        return this;
+    }
+    scaleFn(scaleFn) {
+        if (scaleFn === null) {
+            this._scaleFn = undefined;
+            return this;
+        }
+        this._scaleFn = scaleFn;
+        return this;
+    }
+    /**
+     * @internal This function is for internal use only and should never be called by the user.
+     *
+     * @param dimensionName A user-intelligible name for the dimension being built. Used for error messages. Should be title cased.
+     */
+    _build(dimensionName) {
+        this.validateBuilder(dimensionName);
+        return new DateChartPositionDimension({
+            domain: this._domain,
+            formatFunction: this._formatFunction,
+            formatSpecifier: this._formatSpecifier,
+            scaleFn: this._scaleFn,
+            valueAccessor: this._valueAccessor,
+        });
+    }
+    validateBuilder(dimensionName) {
+        this.validateValueAccessor(dimensionName);
+    }
+}
+
 /**
  * A dimension that transforms number values into a value of type number or string.
  *
@@ -5908,10 +5973,10 @@ class VicDotsConfigBuilder extends PrimaryMarksBuilder {
             throw new Error('Dots Builder: Exactly one Y dimension is required. Please use one of `yDate`, `yNumeric`, or `yOrdinal` to set it.');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicDotsConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicDotsConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicDotsConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicDotsConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicDotsConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicDotsConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -6041,14 +6106,14 @@ class DotsComponent extends VicXyPrimaryMarks {
         return ('formatSpecifier' in dimension &&
             typeof dimension.formatSpecifier === 'string');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DotsComponent, isStandalone: true, selector: "[vic-primary-marks-dots]", host: { properties: { "class": "config.marksClass", "style.mixed-blend-mode": "config.mixBlendMode" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DotsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: DotsComponent, isStandalone: true, selector: "[vic-primary-marks-dots]", host: { properties: { "class": "config.marksClass", "style.mixed-blend-mode": "config.mixBlendMode" } }, providers: [
             { provide: VIC_PRIMARY_MARKS, useExisting: DotsComponent },
             { provide: DOTS, useExisting: DotsComponent },
             { provide: ChartComponent, useExisting: XyChartComponent },
         ], usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DotsComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-primary-marks-dots]', template: '', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: VIC_PRIMARY_MARKS, useExisting: DotsComponent },
@@ -6077,10 +6142,10 @@ class DotsTooltipPositioner extends TooltipPositioner {
 }
 
 class DotsEventsDirective extends EventsDirective {
-    constructor() {
-        super(...arguments);
+    constructor(dots) {
+        super();
+        this.dots = dots;
         this.interactionOutput = new EventEmitter();
-        this.dots = inject(DOTS);
     }
     get marks() {
         return this.dots;
@@ -6218,15 +6283,18 @@ class DotsEventsDirective extends EventsDirective {
         this.positionX = undefined;
         this.positionY = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotsEventsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: DotsEventsDirective, isStandalone: true, selector: "[vicDotsEvents]", inputs: { hoverActions: "hoverActions", hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DotsEventsDirective, deps: [{ token: DOTS }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: DotsEventsDirective, isStandalone: true, selector: "[vicDotsEvents]", inputs: { hoverActions: "hoverActions", hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotsEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DotsEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vicDotsEvents]',
                 }]
-        }], propDecorators: { hoverActions: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOTS]
+                }] }], propDecorators: { hoverActions: [{
                 type: Input
             }], hoverMoveActions: [{
                 type: Input
@@ -6239,11 +6307,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             }] } });
 
 class VicDotsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicDotsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: VicDotsModule, imports: [DotsComponent, DotsEventsDirective], exports: [DotsComponent, DotsEventsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicDotsModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicDotsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: VicDotsModule, imports: [DotsComponent, DotsEventsDirective], exports: [DotsComponent, DotsEventsDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicDotsModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicDotsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicDotsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DotsComponent, DotsEventsDirective],
@@ -7505,10 +7573,10 @@ class VicGeographiesConfigBuilder {
             throw new Error('At least one layer is required');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGeographiesConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGeographiesConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicGeographiesConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicGeographiesConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGeographiesConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicGeographiesConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -7688,8 +7756,8 @@ class GeographiesComponent extends MapPrimaryMarks {
         }, []);
         this.pathsByLayer.next(pathsByLayer);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GeographiesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: GeographiesComponent, isStandalone: true, selector: "[vic-primary-marks-geographies]", host: { properties: { "class": "config.marksClass", "style.mixed-blend-mode": "config.mixBlendMode" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: GeographiesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: GeographiesComponent, isStandalone: true, selector: "[vic-primary-marks-geographies]", host: { properties: { "class": "config.marksClass", "style.mixed-blend-mode": "config.blendMode" } }, providers: [
             { provide: VIC_PRIMARY_MARKS, useExisting: GeographiesComponent },
             {
                 provide: GEOGRAPHIES,
@@ -7701,7 +7769,7 @@ class GeographiesComponent extends MapPrimaryMarks {
             },
         ], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GeographiesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: GeographiesComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-primary-marks-geographies]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: VIC_PRIMARY_MARKS, useExisting: GeographiesComponent },
@@ -7715,7 +7783,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         },
                     ], host: {
                         '[class]': 'config.marksClass',
-                        '[style.mixed-blend-mode]': 'config.mixBlendMode',
+                        '[style.mixed-blend-mode]': 'config.blendMode',
                     }, template: "<ng-content></ng-content>\n" }]
         }] });
 
@@ -7736,10 +7804,10 @@ class GeographiesTooltipPositioner extends TooltipPositioner {
 }
 
 class GeographiesEventsDirective extends EventsDirective {
-    constructor() {
-        super(...arguments);
+    constructor(geographies) {
+        super();
+        this.geographies = geographies;
         this.interactionOutput = new EventEmitter();
-        this.geographies = inject(GEOGRAPHIES);
     }
     get marks() {
         return this.geographies;
@@ -7878,15 +7946,18 @@ class GeographiesEventsDirective extends EventsDirective {
         this.positionY = undefined;
         this.layer = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GeographiesEventsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: GeographiesEventsDirective, isStandalone: true, selector: "[vicGeographiesEvents]", inputs: { hoverActions: "hoverActions", hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: GeographiesEventsDirective, deps: [{ token: GEOGRAPHIES }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: GeographiesEventsDirective, isStandalone: true, selector: "[vicGeographiesEvents]", inputs: { hoverActions: "hoverActions", hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GeographiesEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: GeographiesEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vicGeographiesEvents]',
                 }]
-        }], propDecorators: { hoverActions: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [GEOGRAPHIES]
+                }] }], propDecorators: { hoverActions: [{
                 type: Input
             }], hoverMoveActions: [{
                 type: Input
@@ -7903,11 +7974,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  */
 
 class VicGeographiesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGeographiesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: VicGeographiesModule, imports: [GeographiesComponent, GeographiesEventsDirective], exports: [GeographiesComponent, GeographiesEventsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGeographiesModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicGeographiesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: VicGeographiesModule, imports: [GeographiesComponent, GeographiesEventsDirective], exports: [GeographiesComponent, GeographiesEventsDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicGeographiesModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGeographiesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicGeographiesModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [GeographiesComponent, GeographiesEventsDirective],
@@ -7981,18 +8052,18 @@ class VicGroupedBarsConfigBuilder extends VicBarsConfigBuilder {
             quantitative: this.quantitativeDimensionBuilder._build(this.getQuantitativeDimensionName()),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGroupedBarsConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGroupedBarsConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicGroupedBarsConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicGroupedBarsConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGroupedBarsConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicGroupedBarsConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
 class GroupedBarsEventsDirective extends EventsDirective {
-    constructor() {
-        super(...arguments);
+    constructor(bars) {
+        super();
+        this.bars = bars;
         this.interactionOutput = new EventEmitter();
-        this.bars = inject(BARS);
     }
     get marks() {
         return this.bars;
@@ -8129,15 +8200,18 @@ class GroupedBarsEventsDirective extends EventsDirective {
         this.positionX = undefined;
         this.positionY = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GroupedBarsEventsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: GroupedBarsEventsDirective, isStandalone: true, selector: "[vicGroupedBarsEvents]", inputs: { hoverActions: "hoverActions", hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: GroupedBarsEventsDirective, deps: [{ token: BARS }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: GroupedBarsEventsDirective, isStandalone: true, selector: "[vicGroupedBarsEvents]", inputs: { hoverActions: "hoverActions", hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GroupedBarsEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: GroupedBarsEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vicGroupedBarsEvents]',
                 }]
-        }], propDecorators: { hoverActions: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [BARS]
+                }] }], propDecorators: { hoverActions: [{
                 type: Input
             }], hoverMoveActions: [{
                 type: Input
@@ -8198,14 +8272,14 @@ class GroupedBarsComponent extends BarsComponent {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         return this.groupScale.bandwidth();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GroupedBarsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: GroupedBarsComponent, isStandalone: true, selector: "[vic-primary-grouped-bars]", inputs: { config: "config" }, host: { properties: { "class": "config.marksClass", "style.mixBlendMode": "config.mixBlendMode" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: GroupedBarsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: GroupedBarsComponent, isStandalone: true, selector: "[vic-primary-grouped-bars]", inputs: { config: "config" }, host: { properties: { "class": "config.marksClass", "style.mixBlendMode": "config.mixBlendMode" } }, providers: [
             { provide: VIC_PRIMARY_MARKS, useExisting: GroupedBarsComponent },
             { provide: BARS, useExisting: GroupedBarsComponent },
             { provide: ChartComponent, useExisting: XyChartComponent },
         ], usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GroupedBarsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: GroupedBarsComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-primary-grouped-bars]', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: VIC_PRIMARY_MARKS, useExisting: GroupedBarsComponent },
@@ -8221,11 +8295,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             }] } });
 
 class VicGroupedBarsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGroupedBarsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: VicGroupedBarsModule, imports: [GroupedBarsComponent, GroupedBarsEventsDirective], exports: [GroupedBarsComponent, GroupedBarsEventsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGroupedBarsModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicGroupedBarsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: VicGroupedBarsModule, imports: [GroupedBarsComponent, GroupedBarsEventsDirective], exports: [GroupedBarsComponent, GroupedBarsEventsDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicGroupedBarsModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGroupedBarsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicGroupedBarsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [GroupedBarsComponent, GroupedBarsEventsDirective],
@@ -8309,10 +8383,10 @@ class VicImageDownloadService {
         link.href = dataUrl;
         link.click();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicImageDownloadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicImageDownloadService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicImageDownloadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicImageDownloadService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicImageDownloadService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicImageDownloadService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -8728,10 +8802,10 @@ class VicLinesConfigBuilder extends PrimaryMarksBuilder {
             throw new Error('Lines Builder: Y dimension is required. Please use method `createYDimension` to set it.');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicLinesConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicLinesConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicLinesConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicLinesConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicLinesConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicLinesConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -9089,14 +9163,14 @@ class LinesComponent extends VicXyPrimaryMarks {
             origin: this.chart.svgRef.nativeElement,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LinesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: LinesComponent, isStandalone: true, selector: "[vic-primary-marks-lines]", host: { attributes: { "fill": "none" }, properties: { "class": "config.marksClass", "attr.stroke-linecap": "config.stroke.linecap", "attr.stroke-linejoin": "config.stroke.linejoin", "attr.stroke-width": "config.stroke.width", "attr.stroke-opacity": "config.stroke.opacity", "style.mix-blend-mode": "config.mixBlendMode" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LinesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: LinesComponent, isStandalone: true, selector: "[vic-primary-marks-lines]", host: { attributes: { "fill": "none" }, properties: { "class": "config.marksClass", "attr.stroke-linecap": "config.stroke.linecap", "attr.stroke-linejoin": "config.stroke.linejoin", "attr.stroke-width": "config.stroke.width", "attr.stroke-opacity": "config.stroke.opacity", "style.mix-blend-mode": "config.mixBlendMode" } }, providers: [
             { provide: VIC_PRIMARY_MARKS, useExisting: LinesComponent },
             { provide: LINES, useExisting: LinesComponent },
             { provide: ChartComponent, useExisting: XyChartComponent },
         ], usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LinesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LinesComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-primary-marks-lines]', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: VIC_PRIMARY_MARKS, useExisting: LinesComponent },
@@ -9130,11 +9204,11 @@ class LinesTooltipPositioner extends TooltipPositioner {
 }
 
 class LinesEventsDirective extends EventsDirective {
-    constructor() {
-        super(...arguments);
+    constructor(lines) {
+        super();
+        this.lines = lines;
         this.interactionOutput = new EventEmitter();
         this.actionActive = false;
-        this.lines = inject(LINES);
     }
     get marks() {
         return this.lines;
@@ -9305,15 +9379,18 @@ class LinesEventsDirective extends EventsDirective {
         this.positionX = undefined;
         this.positionY = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LinesEventsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: LinesEventsDirective, isStandalone: true, selector: "[vicLinesEvents]", inputs: { hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LinesEventsDirective, deps: [{ token: LINES }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: LinesEventsDirective, isStandalone: true, selector: "[vicLinesEvents]", inputs: { hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LinesEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LinesEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vicLinesEvents]',
                 }]
-        }], propDecorators: { hoverMoveActions: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LINES]
+                }] }], propDecorators: { hoverMoveActions: [{
                 type: Input
             }], clickActions: [{
                 type: Input
@@ -9324,11 +9401,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             }] } });
 
 class VicLinesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicLinesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: VicLinesModule, imports: [LinesComponent, LinesEventsDirective], exports: [LinesComponent, LinesEventsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicLinesModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicLinesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: VicLinesModule, imports: [LinesComponent, LinesEventsDirective], exports: [LinesComponent, LinesEventsDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicLinesModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicLinesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicLinesModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [LinesComponent, LinesEventsDirective],
@@ -9390,10 +9467,10 @@ class MapLegend {
         this.largerValueSpace = 0;
         this.leftOffset = 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MapLegend, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: MapLegend, isStandalone: true, inputs: { width: "width", height: "height", orientation: "orientation", valuesSide: "valuesSide", scale: "scale", config: "config", outlineColor: "outlineColor" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MapLegend, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: MapLegend, isStandalone: true, inputs: { width: "width", height: "height", orientation: "orientation", valuesSide: "valuesSide", scale: "scale", config: "config", outlineColor: "outlineColor" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MapLegend, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MapLegend, decorators: [{
             type: Directive
         }], propDecorators: { width: [{
                 type: Input
@@ -9464,12 +9541,12 @@ class ContinuousLegendComponent extends MapLegend {
             ctx.fillRect(0, i, 1, 1);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContinuousLegendComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ContinuousLegendComponent, isStandalone: true, selector: "vic-continuous-legend", viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"vic-legend-color-scale vic-continuous\"\n  [ngClass]=\"['vic-' + orientation, 'vic-' + valuesSide]\"\n  [style.--width]=\"width + 'px'\"\n  [style.--height]=\"height + 'px'\"\n  [style.--border-color]=\"outlineColor\"\n  [style.--value-space]=\"largerValueSpace + 'px'\"\n  [style.left.px]=\"leftOffset\"\n>\n  @if ((orientation === 'vertical' && valuesSide === 'left') || (orientation ===\n  'horizontal' && valuesSide === 'top')) {\n  <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n  }\n  <div class=\"vic-legend-canvas-container\">\n    <canvas class=\"vic-legend-canvas\" #canvas></canvas>\n  </div>\n  @if ((orientation === 'vertical' && valuesSide === 'right') || (orientation\n  === 'horizontal' && valuesSide === 'bottom')) {\n  <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n  }\n</div>\n\n<ng-template #valuesDisplay>\n  <div class=\"vic-legend-values-container vic-continuous\">\n    <p class=\"vic-value vic-low\">{{ values[0] }}</p>\n    <p class=\"vic-value vic-high\">{{ values[values.length - 1] }}</p>\n  </div>\n</ng-template>\n", styles: [".vic-legend-canvas{display:block}.vic-legend-color-scale.vic-horizontal{display:flex;flex-direction:column;position:relative;max-width:var(--width)}.vic-legend-color-scale.vic-horizontal .vic-legend-canvas-container{display:flex;flex-direction:column;width:calc(var(--width) - var(--value-space) * 2);height:var(--height);margin-right:var(--value-space);margin-left:var(--value-space)}.vic-legend-color-scale.vic-horizontal .vic-legend-values-container{padding-top:.25rem;display:flex;flex-direction:row;justify-content:space-between}.vic-legend-color-scale.vic-horizontal .vic-value{width:calc(var(--value-space) * 2);text-align:center}.vic-legend-color-scale.vic-horizontal.vic-top .vic-legend-values-container{padding-top:0;padding-bottom:.25rem}.vic-legend-color-scale.vic-vertical{display:flex;max-height:var(--height)}.vic-legend-color-scale.vic-vertical .vic-legend-canvas-container{width:var(--width);height:calc(var(--height) - grid-2 * 2);margin-top:.5rem;margin-bottom:.5rem}.vic-legend-color-scale.vic-vertical .vic-legend-values-container{padding-right:.25rem;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}.vic-legend-color-scale.vic-vertical.vic-right .vic-legend-values-container{padding-right:0;padding-left:.25rem;align-items:flex-start}.vic-legend-canvas-container{border:1px solid var(--border-color)}.vic-value{font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ContinuousLegendComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: ContinuousLegendComponent, isStandalone: true, selector: "vic-continuous-legend", viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"vic-legend-color-scale vic-continuous\"\n  [ngClass]=\"['vic-' + orientation, 'vic-' + valuesSide]\"\n  [style.--width]=\"width + 'px'\"\n  [style.--height]=\"height + 'px'\"\n  [style.--border-color]=\"outlineColor\"\n  [style.--value-space]=\"largerValueSpace + 'px'\"\n  [style.left.px]=\"leftOffset\"\n>\n  <ng-container\n    *ngIf=\"\n      (orientation === 'vertical' && valuesSide === 'left') ||\n      (orientation === 'horizontal' && valuesSide === 'top')\n    \"\n  >\n    <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n  </ng-container>\n  <div class=\"vic-legend-canvas-container\">\n    <canvas class=\"vic-legend-canvas\" #canvas></canvas>\n  </div>\n  <ng-container\n    *ngIf=\"\n      (orientation === 'vertical' && valuesSide === 'right') ||\n      (orientation === 'horizontal' && valuesSide === 'bottom')\n    \"\n  >\n    <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #valuesDisplay>\n  <div class=\"vic-legend-values-container vic-continuous\">\n    <p class=\"vic-value vic-low\">{{ values[0] }}</p>\n    <p class=\"vic-value vic-high\">{{ values[values.length - 1] }}</p>\n  </div>\n</ng-template>\n", styles: [".vic-legend-canvas{display:block}.vic-legend-color-scale.vic-horizontal{display:flex;flex-direction:column;position:relative;max-width:var(--width)}.vic-legend-color-scale.vic-horizontal .vic-legend-canvas-container{display:flex;flex-direction:column;width:calc(var(--width) - var(--value-space) * 2);height:var(--height);margin-right:var(--value-space);margin-left:var(--value-space)}.vic-legend-color-scale.vic-horizontal .vic-legend-values-container{padding-top:.25rem;display:flex;flex-direction:row;justify-content:space-between}.vic-legend-color-scale.vic-horizontal .vic-value{width:calc(var(--value-space) * 2);text-align:center}.vic-legend-color-scale.vic-horizontal.vic-top .vic-legend-values-container{padding-top:0;padding-bottom:.25rem}.vic-legend-color-scale.vic-vertical{display:flex;max-height:var(--height)}.vic-legend-color-scale.vic-vertical .vic-legend-canvas-container{width:var(--width);height:calc(var(--height) - grid-2 * 2);margin-top:.5rem;margin-bottom:.5rem}.vic-legend-color-scale.vic-vertical .vic-legend-values-container{padding-right:.25rem;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}.vic-legend-color-scale.vic-vertical.vic-right .vic-legend-values-container{padding-right:0;padding-left:.25rem;align-items:flex-start}.vic-legend-canvas-container{border:1px solid var(--border-color)}.vic-value{font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContinuousLegendComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ContinuousLegendComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vic-continuous-legend', imports: [CommonModule], template: "<div\n  class=\"vic-legend-color-scale vic-continuous\"\n  [ngClass]=\"['vic-' + orientation, 'vic-' + valuesSide]\"\n  [style.--width]=\"width + 'px'\"\n  [style.--height]=\"height + 'px'\"\n  [style.--border-color]=\"outlineColor\"\n  [style.--value-space]=\"largerValueSpace + 'px'\"\n  [style.left.px]=\"leftOffset\"\n>\n  @if ((orientation === 'vertical' && valuesSide === 'left') || (orientation ===\n  'horizontal' && valuesSide === 'top')) {\n  <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n  }\n  <div class=\"vic-legend-canvas-container\">\n    <canvas class=\"vic-legend-canvas\" #canvas></canvas>\n  </div>\n  @if ((orientation === 'vertical' && valuesSide === 'right') || (orientation\n  === 'horizontal' && valuesSide === 'bottom')) {\n  <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n  }\n</div>\n\n<ng-template #valuesDisplay>\n  <div class=\"vic-legend-values-container vic-continuous\">\n    <p class=\"vic-value vic-low\">{{ values[0] }}</p>\n    <p class=\"vic-value vic-high\">{{ values[values.length - 1] }}</p>\n  </div>\n</ng-template>\n", styles: [".vic-legend-canvas{display:block}.vic-legend-color-scale.vic-horizontal{display:flex;flex-direction:column;position:relative;max-width:var(--width)}.vic-legend-color-scale.vic-horizontal .vic-legend-canvas-container{display:flex;flex-direction:column;width:calc(var(--width) - var(--value-space) * 2);height:var(--height);margin-right:var(--value-space);margin-left:var(--value-space)}.vic-legend-color-scale.vic-horizontal .vic-legend-values-container{padding-top:.25rem;display:flex;flex-direction:row;justify-content:space-between}.vic-legend-color-scale.vic-horizontal .vic-value{width:calc(var(--value-space) * 2);text-align:center}.vic-legend-color-scale.vic-horizontal.vic-top .vic-legend-values-container{padding-top:0;padding-bottom:.25rem}.vic-legend-color-scale.vic-vertical{display:flex;max-height:var(--height)}.vic-legend-color-scale.vic-vertical .vic-legend-canvas-container{width:var(--width);height:calc(var(--height) - grid-2 * 2);margin-top:.5rem;margin-bottom:.5rem}.vic-legend-color-scale.vic-vertical .vic-legend-values-container{padding-right:.25rem;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}.vic-legend-color-scale.vic-vertical.vic-right .vic-legend-values-container{padding-right:0;padding-left:.25rem;align-items:flex-start}.vic-legend-canvas-container{border:1px solid var(--border-color)}.vic-value{font-size:12px}\n"] }]
+            args: [{ selector: 'vic-continuous-legend', imports: [CommonModule], template: "<div\n  class=\"vic-legend-color-scale vic-continuous\"\n  [ngClass]=\"['vic-' + orientation, 'vic-' + valuesSide]\"\n  [style.--width]=\"width + 'px'\"\n  [style.--height]=\"height + 'px'\"\n  [style.--border-color]=\"outlineColor\"\n  [style.--value-space]=\"largerValueSpace + 'px'\"\n  [style.left.px]=\"leftOffset\"\n>\n  <ng-container\n    *ngIf=\"\n      (orientation === 'vertical' && valuesSide === 'left') ||\n      (orientation === 'horizontal' && valuesSide === 'top')\n    \"\n  >\n    <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n  </ng-container>\n  <div class=\"vic-legend-canvas-container\">\n    <canvas class=\"vic-legend-canvas\" #canvas></canvas>\n  </div>\n  <ng-container\n    *ngIf=\"\n      (orientation === 'vertical' && valuesSide === 'right') ||\n      (orientation === 'horizontal' && valuesSide === 'bottom')\n    \"\n  >\n    <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #valuesDisplay>\n  <div class=\"vic-legend-values-container vic-continuous\">\n    <p class=\"vic-value vic-low\">{{ values[0] }}</p>\n    <p class=\"vic-value vic-high\">{{ values[values.length - 1] }}</p>\n  </div>\n</ng-template>\n", styles: [".vic-legend-canvas{display:block}.vic-legend-color-scale.vic-horizontal{display:flex;flex-direction:column;position:relative;max-width:var(--width)}.vic-legend-color-scale.vic-horizontal .vic-legend-canvas-container{display:flex;flex-direction:column;width:calc(var(--width) - var(--value-space) * 2);height:var(--height);margin-right:var(--value-space);margin-left:var(--value-space)}.vic-legend-color-scale.vic-horizontal .vic-legend-values-container{padding-top:.25rem;display:flex;flex-direction:row;justify-content:space-between}.vic-legend-color-scale.vic-horizontal .vic-value{width:calc(var(--value-space) * 2);text-align:center}.vic-legend-color-scale.vic-horizontal.vic-top .vic-legend-values-container{padding-top:0;padding-bottom:.25rem}.vic-legend-color-scale.vic-vertical{display:flex;max-height:var(--height)}.vic-legend-color-scale.vic-vertical .vic-legend-canvas-container{width:var(--width);height:calc(var(--height) - grid-2 * 2);margin-top:.5rem;margin-bottom:.5rem}.vic-legend-color-scale.vic-vertical .vic-legend-values-container{padding-right:.25rem;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}.vic-legend-color-scale.vic-vertical.vic-right .vic-legend-values-container{padding-right:0;padding-left:.25rem;align-items:flex-start}.vic-legend-canvas-container{border:1px solid var(--border-color)}.vic-value{font-size:12px}\n"] }]
         }], propDecorators: { canvasRef: [{
                 type: ViewChild,
                 args: ['canvas', { static: true }]
@@ -9507,12 +9584,12 @@ class DiscontinuousLegendComponent extends MapLegend {
             return 0;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DiscontinuousLegendComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DiscontinuousLegendComponent, isStandalone: true, selector: "vic-discontinuous-legend", usesInheritance: true, ngImport: i0, template: "<div\n  class=\"vic-legend-color-scale vic-discontinuous\"\n  [ngClass]=\"['vic-' + orientation, 'vic-' + valuesSide]\"\n  [class.vic-categorical]=\"config.binType === VicValuesBin.categorical\"\n  [style.--border-color]=\"outlineColor\"\n  [style.--width]=\"width + 'px'\"\n  [style.--height]=\"height + 'px'\"\n  [style.--num-colors]=\"colors.length\"\n  [style.--value-space]=\"largerValueSpace + 'px'\"\n  [style.left.px]=\"leftOffset\"\n>\n  @if ((orientation === 'vertical' && valuesSide === 'left') || (orientation ===\n  'horizontal' && valuesSide === 'top')) {\n  <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n  }\n  <div class=\"vic-legend-colors-container\">\n    @if (config.binType !== VicValuesBin.categorical) {\n    <div class=\"vic-legend-color-padding\"></div>\n    } @for (color of colors; track $index) {\n    <div\n      class=\"vic-legend-color vic-discontinuous\"\n      [style.background-color]=\"color\"\n      [style.--border-color]=\"outlineColor\"\n    >\n    </div>\n    }\n  </div>\n  @if ((orientation === 'vertical' && valuesSide === 'right') || (orientation\n  === 'horizontal' && valuesSide === 'bottom')) {\n  <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n  }\n</div>\n\n<ng-template #valuesDisplay>\n  <div class=\"vic-legend-values-container vic-discontinous\">\n    @for (value of values; track $index) {\n    <p class=\"vic-value\"> {{ value }} </p>\n    }\n  </div>\n</ng-template>\n", styles: [".vic-legend-color-scale.vic-horizontal{display:flex;flex-direction:column;position:relative}.vic-legend-color-scale.vic-horizontal .vic-legend-colors-container{display:grid;grid-template-columns:minmax(var(--value-space),.5fr) repeat(var(--num-colors),minmax(calc(var(--value-space) * 2),1fr)) minmax(var(--value-space),.5fr);max-width:var(--width);height:var(--height)}.vic-legend-color-scale.vic-horizontal .vic-legend-colors-container .vic-legend-color{height:100%;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);border-left:1px solid var(--border-color)}.vic-legend-color-scale.vic-horizontal .vic-legend-colors-container .vic-legend-color:last-child{border-right:1px solid var(--border-color)}.vic-legend-color-scale.vic-horizontal .vic-legend-values-container{padding-top:.25rem;display:grid;grid-template-columns:repeat(calc(var(--num-colors) + 1),minmax(calc(var(--value-space) * 2),1fr));max-width:var(--width);justify-items:center}.vic-legend-color-scale.vic-horizontal.vic-top .vic-legend-values-container{padding-top:0;padding-bottom:.25rem}.vic-legend-color-scale.vic-horizontal.vic-categorical .vic-legend-colors-container,.vic-legend-color-scale.vic-horizontal.vic-categorical .vic-legend-values-container{column-gap:.5rem;grid-template-columns:repeat(calc(var(--num-colors)),1fr)}.vic-legend-color-scale.vic-horizontal.vic-categorical .vic-value{text-align:center}.vic-legend-color-scale.vic-categorical .vic-legend-color{border:1px solid var(--border-color)}.vic-legend-color-scale.vic-vertical{display:flex;height:var(--height)}.vic-legend-color-scale.vic-vertical .vic-legend-colors-container{display:grid;grid-template-columns:var(--width);grid-template-rows:.5fr repeat(var(--num-colors),1fr) .5fr;height:100%}.vic-legend-color-scale.vic-vertical .vic-legend-colors-container .vic-legend-color{width:100%;border-top:1px solid var(--border-color);border-left:1px solid var(--border-color);border-right:1px solid var(--border-color)}.vic-legend-color-scale.vic-vertical .vic-legend-colors-container .vic-legend-color:last-child{border-bottom:1px solid var(--border-color)}.vic-legend-color-scale.vic-vertical .vic-legend-values-container{padding-right:.25rem;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(calc(var(--num-colors) + 1),1fr);align-items:center;justify-items:end;height:100%}.vic-legend-color-scale.vic-vertical.vic-right .vic-legend-values-container{padding-right:0;padding-left:.25rem;justify-items:start}.vic-legend-color-scale.vic-vertical.vic-categorical .vic-legend-colors-container,.vic-legend-color-scale.vic-vertical.vic-categorical .vic-legend-values-container{grid-template-rows:repeat(var(--num-colors),1fr);row-gap:.5rem}.vic-legend-color-scale.vic-vertical.vic-categorical .vic-value{text-align:right}.vic-legend-color-scale.vic-vertical.vic-categorical.vic-right .vic-value{text-align:left}.vic-value{font-size:12px;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DiscontinuousLegendComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: DiscontinuousLegendComponent, isStandalone: true, selector: "vic-discontinuous-legend", usesInheritance: true, ngImport: i0, template: "<div\n  class=\"vic-legend-color-scale vic-discontinuous\"\n  [ngClass]=\"['vic-' + orientation, 'vic-' + valuesSide]\"\n  [class.vic-categorical]=\"config.binType === VicValuesBin.categorical\"\n  [style.--border-color]=\"outlineColor\"\n  [style.--width]=\"width + 'px'\"\n  [style.--height]=\"height + 'px'\"\n  [style.--num-colors]=\"colors.length\"\n  [style.--value-space]=\"largerValueSpace + 'px'\"\n  [style.left.px]=\"leftOffset\"\n>\n  <ng-container\n    *ngIf=\"\n      (orientation === 'vertical' && valuesSide === 'left') ||\n      (orientation === 'horizontal' && valuesSide === 'top')\n    \"\n  >\n    <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n  </ng-container>\n  <div class=\"vic-legend-colors-container\">\n    <div\n      class=\"vic-legend-color-padding\"\n      *ngIf=\"config.binType !== VicValuesBin.categorical\"\n    ></div>\n    <div\n      *ngFor=\"let color of colors\"\n      class=\"vic-legend-color vic-discontinuous\"\n      [style.background-color]=\"color\"\n      [style.--border-color]=\"outlineColor\"\n    >\n    </div>\n  </div>\n  <ng-container\n    *ngIf=\"\n      (orientation === 'vertical' && valuesSide === 'right') ||\n      (orientation === 'horizontal' && valuesSide === 'bottom')\n    \"\n  >\n    <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #valuesDisplay>\n  <div class=\"vic-legend-values-container vic-discontinous\">\n    <p class=\"vic-value\" *ngFor=\"let value of values; let i = index\">\n      {{ value }}\n    </p>\n  </div>\n</ng-template>\n", styles: [".vic-legend-color-scale.vic-horizontal{display:flex;flex-direction:column;position:relative}.vic-legend-color-scale.vic-horizontal .vic-legend-colors-container{display:grid;grid-template-columns:minmax(var(--value-space),.5fr) repeat(var(--num-colors),minmax(calc(var(--value-space) * 2),1fr)) minmax(var(--value-space),.5fr);max-width:var(--width);height:var(--height)}.vic-legend-color-scale.vic-horizontal .vic-legend-colors-container .vic-legend-color{height:100%;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);border-left:1px solid var(--border-color)}.vic-legend-color-scale.vic-horizontal .vic-legend-colors-container .vic-legend-color:last-child{border-right:1px solid var(--border-color)}.vic-legend-color-scale.vic-horizontal .vic-legend-values-container{padding-top:.25rem;display:grid;grid-template-columns:repeat(calc(var(--num-colors) + 1),minmax(calc(var(--value-space) * 2),1fr));max-width:var(--width);justify-items:center}.vic-legend-color-scale.vic-horizontal.vic-top .vic-legend-values-container{padding-top:0;padding-bottom:.25rem}.vic-legend-color-scale.vic-horizontal.vic-categorical .vic-legend-colors-container,.vic-legend-color-scale.vic-horizontal.vic-categorical .vic-legend-values-container{column-gap:.5rem;grid-template-columns:repeat(calc(var(--num-colors)),1fr)}.vic-legend-color-scale.vic-horizontal.vic-categorical .vic-value{text-align:center}.vic-legend-color-scale.vic-categorical .vic-legend-color{border:1px solid var(--border-color)}.vic-legend-color-scale.vic-vertical{display:flex;height:var(--height)}.vic-legend-color-scale.vic-vertical .vic-legend-colors-container{display:grid;grid-template-columns:var(--width);grid-template-rows:.5fr repeat(var(--num-colors),1fr) .5fr;height:100%}.vic-legend-color-scale.vic-vertical .vic-legend-colors-container .vic-legend-color{width:100%;border-top:1px solid var(--border-color);border-left:1px solid var(--border-color);border-right:1px solid var(--border-color)}.vic-legend-color-scale.vic-vertical .vic-legend-colors-container .vic-legend-color:last-child{border-bottom:1px solid var(--border-color)}.vic-legend-color-scale.vic-vertical .vic-legend-values-container{padding-right:.25rem;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(calc(var(--num-colors) + 1),1fr);align-items:center;justify-items:end;height:100%}.vic-legend-color-scale.vic-vertical.vic-right .vic-legend-values-container{padding-right:0;padding-left:.25rem;justify-items:start}.vic-legend-color-scale.vic-vertical.vic-categorical .vic-legend-colors-container,.vic-legend-color-scale.vic-vertical.vic-categorical .vic-legend-values-container{grid-template-rows:repeat(var(--num-colors),1fr);row-gap:.5rem}.vic-legend-color-scale.vic-vertical.vic-categorical .vic-value{text-align:right}.vic-legend-color-scale.vic-vertical.vic-categorical.vic-right .vic-value{text-align:left}.vic-value{font-size:12px;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DiscontinuousLegendComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DiscontinuousLegendComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vic-discontinuous-legend', imports: [CommonModule], template: "<div\n  class=\"vic-legend-color-scale vic-discontinuous\"\n  [ngClass]=\"['vic-' + orientation, 'vic-' + valuesSide]\"\n  [class.vic-categorical]=\"config.binType === VicValuesBin.categorical\"\n  [style.--border-color]=\"outlineColor\"\n  [style.--width]=\"width + 'px'\"\n  [style.--height]=\"height + 'px'\"\n  [style.--num-colors]=\"colors.length\"\n  [style.--value-space]=\"largerValueSpace + 'px'\"\n  [style.left.px]=\"leftOffset\"\n>\n  @if ((orientation === 'vertical' && valuesSide === 'left') || (orientation ===\n  'horizontal' && valuesSide === 'top')) {\n  <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n  }\n  <div class=\"vic-legend-colors-container\">\n    @if (config.binType !== VicValuesBin.categorical) {\n    <div class=\"vic-legend-color-padding\"></div>\n    } @for (color of colors; track $index) {\n    <div\n      class=\"vic-legend-color vic-discontinuous\"\n      [style.background-color]=\"color\"\n      [style.--border-color]=\"outlineColor\"\n    >\n    </div>\n    }\n  </div>\n  @if ((orientation === 'vertical' && valuesSide === 'right') || (orientation\n  === 'horizontal' && valuesSide === 'bottom')) {\n  <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n  }\n</div>\n\n<ng-template #valuesDisplay>\n  <div class=\"vic-legend-values-container vic-discontinous\">\n    @for (value of values; track $index) {\n    <p class=\"vic-value\"> {{ value }} </p>\n    }\n  </div>\n</ng-template>\n", styles: [".vic-legend-color-scale.vic-horizontal{display:flex;flex-direction:column;position:relative}.vic-legend-color-scale.vic-horizontal .vic-legend-colors-container{display:grid;grid-template-columns:minmax(var(--value-space),.5fr) repeat(var(--num-colors),minmax(calc(var(--value-space) * 2),1fr)) minmax(var(--value-space),.5fr);max-width:var(--width);height:var(--height)}.vic-legend-color-scale.vic-horizontal .vic-legend-colors-container .vic-legend-color{height:100%;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);border-left:1px solid var(--border-color)}.vic-legend-color-scale.vic-horizontal .vic-legend-colors-container .vic-legend-color:last-child{border-right:1px solid var(--border-color)}.vic-legend-color-scale.vic-horizontal .vic-legend-values-container{padding-top:.25rem;display:grid;grid-template-columns:repeat(calc(var(--num-colors) + 1),minmax(calc(var(--value-space) * 2),1fr));max-width:var(--width);justify-items:center}.vic-legend-color-scale.vic-horizontal.vic-top .vic-legend-values-container{padding-top:0;padding-bottom:.25rem}.vic-legend-color-scale.vic-horizontal.vic-categorical .vic-legend-colors-container,.vic-legend-color-scale.vic-horizontal.vic-categorical .vic-legend-values-container{column-gap:.5rem;grid-template-columns:repeat(calc(var(--num-colors)),1fr)}.vic-legend-color-scale.vic-horizontal.vic-categorical .vic-value{text-align:center}.vic-legend-color-scale.vic-categorical .vic-legend-color{border:1px solid var(--border-color)}.vic-legend-color-scale.vic-vertical{display:flex;height:var(--height)}.vic-legend-color-scale.vic-vertical .vic-legend-colors-container{display:grid;grid-template-columns:var(--width);grid-template-rows:.5fr repeat(var(--num-colors),1fr) .5fr;height:100%}.vic-legend-color-scale.vic-vertical .vic-legend-colors-container .vic-legend-color{width:100%;border-top:1px solid var(--border-color);border-left:1px solid var(--border-color);border-right:1px solid var(--border-color)}.vic-legend-color-scale.vic-vertical .vic-legend-colors-container .vic-legend-color:last-child{border-bottom:1px solid var(--border-color)}.vic-legend-color-scale.vic-vertical .vic-legend-values-container{padding-right:.25rem;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(calc(var(--num-colors) + 1),1fr);align-items:center;justify-items:end;height:100%}.vic-legend-color-scale.vic-vertical.vic-right .vic-legend-values-container{padding-right:0;padding-left:.25rem;justify-items:start}.vic-legend-color-scale.vic-vertical.vic-categorical .vic-legend-colors-container,.vic-legend-color-scale.vic-vertical.vic-categorical .vic-legend-values-container{grid-template-rows:repeat(var(--num-colors),1fr);row-gap:.5rem}.vic-legend-color-scale.vic-vertical.vic-categorical .vic-value{text-align:right}.vic-legend-color-scale.vic-vertical.vic-categorical.vic-right .vic-value{text-align:left}.vic-value{font-size:12px;line-height:1}\n"] }]
+            args: [{ selector: 'vic-discontinuous-legend', imports: [CommonModule], template: "<div\n  class=\"vic-legend-color-scale vic-discontinuous\"\n  [ngClass]=\"['vic-' + orientation, 'vic-' + valuesSide]\"\n  [class.vic-categorical]=\"config.binType === VicValuesBin.categorical\"\n  [style.--border-color]=\"outlineColor\"\n  [style.--width]=\"width + 'px'\"\n  [style.--height]=\"height + 'px'\"\n  [style.--num-colors]=\"colors.length\"\n  [style.--value-space]=\"largerValueSpace + 'px'\"\n  [style.left.px]=\"leftOffset\"\n>\n  <ng-container\n    *ngIf=\"\n      (orientation === 'vertical' && valuesSide === 'left') ||\n      (orientation === 'horizontal' && valuesSide === 'top')\n    \"\n  >\n    <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n  </ng-container>\n  <div class=\"vic-legend-colors-container\">\n    <div\n      class=\"vic-legend-color-padding\"\n      *ngIf=\"config.binType !== VicValuesBin.categorical\"\n    ></div>\n    <div\n      *ngFor=\"let color of colors\"\n      class=\"vic-legend-color vic-discontinuous\"\n      [style.background-color]=\"color\"\n      [style.--border-color]=\"outlineColor\"\n    >\n    </div>\n  </div>\n  <ng-container\n    *ngIf=\"\n      (orientation === 'vertical' && valuesSide === 'right') ||\n      (orientation === 'horizontal' && valuesSide === 'bottom')\n    \"\n  >\n    <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #valuesDisplay>\n  <div class=\"vic-legend-values-container vic-discontinous\">\n    <p class=\"vic-value\" *ngFor=\"let value of values; let i = index\">\n      {{ value }}\n    </p>\n  </div>\n</ng-template>\n", styles: [".vic-legend-color-scale.vic-horizontal{display:flex;flex-direction:column;position:relative}.vic-legend-color-scale.vic-horizontal .vic-legend-colors-container{display:grid;grid-template-columns:minmax(var(--value-space),.5fr) repeat(var(--num-colors),minmax(calc(var(--value-space) * 2),1fr)) minmax(var(--value-space),.5fr);max-width:var(--width);height:var(--height)}.vic-legend-color-scale.vic-horizontal .vic-legend-colors-container .vic-legend-color{height:100%;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);border-left:1px solid var(--border-color)}.vic-legend-color-scale.vic-horizontal .vic-legend-colors-container .vic-legend-color:last-child{border-right:1px solid var(--border-color)}.vic-legend-color-scale.vic-horizontal .vic-legend-values-container{padding-top:.25rem;display:grid;grid-template-columns:repeat(calc(var(--num-colors) + 1),minmax(calc(var(--value-space) * 2),1fr));max-width:var(--width);justify-items:center}.vic-legend-color-scale.vic-horizontal.vic-top .vic-legend-values-container{padding-top:0;padding-bottom:.25rem}.vic-legend-color-scale.vic-horizontal.vic-categorical .vic-legend-colors-container,.vic-legend-color-scale.vic-horizontal.vic-categorical .vic-legend-values-container{column-gap:.5rem;grid-template-columns:repeat(calc(var(--num-colors)),1fr)}.vic-legend-color-scale.vic-horizontal.vic-categorical .vic-value{text-align:center}.vic-legend-color-scale.vic-categorical .vic-legend-color{border:1px solid var(--border-color)}.vic-legend-color-scale.vic-vertical{display:flex;height:var(--height)}.vic-legend-color-scale.vic-vertical .vic-legend-colors-container{display:grid;grid-template-columns:var(--width);grid-template-rows:.5fr repeat(var(--num-colors),1fr) .5fr;height:100%}.vic-legend-color-scale.vic-vertical .vic-legend-colors-container .vic-legend-color{width:100%;border-top:1px solid var(--border-color);border-left:1px solid var(--border-color);border-right:1px solid var(--border-color)}.vic-legend-color-scale.vic-vertical .vic-legend-colors-container .vic-legend-color:last-child{border-bottom:1px solid var(--border-color)}.vic-legend-color-scale.vic-vertical .vic-legend-values-container{padding-right:.25rem;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(calc(var(--num-colors) + 1),1fr);align-items:center;justify-items:end;height:100%}.vic-legend-color-scale.vic-vertical.vic-right .vic-legend-values-container{padding-right:0;padding-left:.25rem;justify-items:start}.vic-legend-color-scale.vic-vertical.vic-categorical .vic-legend-colors-container,.vic-legend-color-scale.vic-vertical.vic-categorical .vic-legend-values-container{grid-template-rows:repeat(var(--num-colors),1fr);row-gap:.5rem}.vic-legend-color-scale.vic-vertical.vic-categorical .vic-value{text-align:right}.vic-legend-color-scale.vic-vertical.vic-categorical.vic-right .vic-value{text-align:left}.vic-value{font-size:12px;line-height:1}\n"] }]
         }] });
 
 var VicLegendType;
@@ -9555,16 +9632,16 @@ class MapLegendComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MapLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MapLegendComponent, isStandalone: true, selector: "vic-map-legend", inputs: { width: "width", height: "height", valuesSide: "valuesSide", outlineColor: "outlineColor" }, viewQueries: [{ propertyName: "VicValuesBin", first: true, predicate: ["canvas"], descendants: true, static: true }], ngImport: i0, template: "<ng-content select=\"[title]\"></ng-content>\n@if (chart.attributeProperties$ | async; as attributeProperties) { @if\n(attributeProperties.config) { @if (attributeProperties.config.binType ===\nVicValuesBin.none) {\n<vic-continuous-legend\n  [width]=\"width\"\n  [height]=\"height\"\n  [valuesSide]=\"valuesSide\"\n  [scale]=\"attributeProperties.scale\"\n  [config]=\"attributeProperties.config\"\n  [outlineColor]=\"outlineColor\"\n  [orientation]=\"orientation\"\n></vic-continuous-legend>\n} @else {\n<vic-discontinuous-legend\n  [width]=\"width\"\n  [height]=\"height\"\n  [valuesSide]=\"valuesSide\"\n  [scale]=\"attributeProperties.scale\"\n  [config]=\"attributeProperties.config\"\n  [outlineColor]=\"outlineColor\"\n  [orientation]=\"orientation\"\n></vic-discontinuous-legend>\n} } }\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContinuousLegendComponent, selector: "vic-continuous-legend" }, { kind: "component", type: DiscontinuousLegendComponent, selector: "vic-discontinuous-legend" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MapLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: MapLegendComponent, isStandalone: true, selector: "vic-map-legend", inputs: { width: "width", height: "height", valuesSide: "valuesSide", outlineColor: "outlineColor" }, viewQueries: [{ propertyName: "VicValuesBin", first: true, predicate: ["canvas"], descendants: true, static: true }], ngImport: i0, template: "<ng-content select=\"[title]\"></ng-content>\n@if (chart.attributeProperties$ | async; as attributeProperties) { @if\n(attributeProperties.config) {\n<vic-continuous-legend\n  *ngIf=\"attributeProperties.config.binType === VicValuesBin.none\"\n  [width]=\"width\"\n  [height]=\"height\"\n  [valuesSide]=\"valuesSide\"\n  [scale]=\"attributeProperties.scale\"\n  [config]=\"attributeProperties.config\"\n  [outlineColor]=\"outlineColor\"\n  [orientation]=\"orientation\"\n></vic-continuous-legend>\n<vic-discontinuous-legend\n  *ngIf=\"attributeProperties.config.binType !== VicValuesBin.none\"\n  [width]=\"width\"\n  [height]=\"height\"\n  [valuesSide]=\"valuesSide\"\n  [scale]=\"attributeProperties.scale\"\n  [config]=\"attributeProperties.config\"\n  [outlineColor]=\"outlineColor\"\n  [orientation]=\"orientation\"\n></vic-discontinuous-legend>\n} }\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: ContinuousLegendComponent, selector: "vic-continuous-legend" }, { kind: "component", type: DiscontinuousLegendComponent, selector: "vic-discontinuous-legend" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MapLegendComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MapLegendComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vic-map-legend', imports: [
                         CommonModule,
                         ContinuousLegendComponent,
                         DiscontinuousLegendComponent,
-                    ], template: "<ng-content select=\"[title]\"></ng-content>\n@if (chart.attributeProperties$ | async; as attributeProperties) { @if\n(attributeProperties.config) { @if (attributeProperties.config.binType ===\nVicValuesBin.none) {\n<vic-continuous-legend\n  [width]=\"width\"\n  [height]=\"height\"\n  [valuesSide]=\"valuesSide\"\n  [scale]=\"attributeProperties.scale\"\n  [config]=\"attributeProperties.config\"\n  [outlineColor]=\"outlineColor\"\n  [orientation]=\"orientation\"\n></vic-continuous-legend>\n} @else {\n<vic-discontinuous-legend\n  [width]=\"width\"\n  [height]=\"height\"\n  [valuesSide]=\"valuesSide\"\n  [scale]=\"attributeProperties.scale\"\n  [config]=\"attributeProperties.config\"\n  [outlineColor]=\"outlineColor\"\n  [orientation]=\"orientation\"\n></vic-discontinuous-legend>\n} } }\n" }]
+                    ], template: "<ng-content select=\"[title]\"></ng-content>\n@if (chart.attributeProperties$ | async; as attributeProperties) { @if\n(attributeProperties.config) {\n<vic-continuous-legend\n  *ngIf=\"attributeProperties.config.binType === VicValuesBin.none\"\n  [width]=\"width\"\n  [height]=\"height\"\n  [valuesSide]=\"valuesSide\"\n  [scale]=\"attributeProperties.scale\"\n  [config]=\"attributeProperties.config\"\n  [outlineColor]=\"outlineColor\"\n  [orientation]=\"orientation\"\n></vic-continuous-legend>\n<vic-discontinuous-legend\n  *ngIf=\"attributeProperties.config.binType !== VicValuesBin.none\"\n  [width]=\"width\"\n  [height]=\"height\"\n  [valuesSide]=\"valuesSide\"\n  [scale]=\"attributeProperties.scale\"\n  [config]=\"attributeProperties.config\"\n  [outlineColor]=\"outlineColor\"\n  [orientation]=\"orientation\"\n></vic-discontinuous-legend>\n} }\n" }]
         }], propDecorators: { width: [{
                 type: Input
             }], height: [{
@@ -9579,11 +9656,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             }] } });
 
 class VicMapLegendModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicMapLegendModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: VicMapLegendModule, imports: [MapLegendComponent], exports: [MapLegendComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicMapLegendModule, imports: [MapLegendComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicMapLegendModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: VicMapLegendModule, imports: [MapLegendComponent], exports: [MapLegendComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicMapLegendModule, imports: [MapLegendComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicMapLegendModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicMapLegendModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [MapLegendComponent],
@@ -9813,10 +9890,10 @@ class VicQuantitativeRulesConfigBuilder extends VicAuxMarksBuilder {
             this.labelsBuilder.validateBuilder(this._orientation, this._color);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicQuantitativeRulesConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicQuantitativeRulesConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicQuantitativeRulesConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicQuantitativeRulesConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicQuantitativeRulesConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicQuantitativeRulesConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -9981,10 +10058,10 @@ class QuantitativeRulesComponent extends XyAuxMarks {
         }
         return this.scales.y.range()[1];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: QuantitativeRulesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: QuantitativeRulesComponent, isStandalone: true, selector: "[vic-quantitative-rules]", host: { properties: { "class": "config.marksClass" } }, providers: [{ provide: ChartComponent, useExisting: XyChartComponent }], usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: QuantitativeRulesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: QuantitativeRulesComponent, isStandalone: true, selector: "[vic-quantitative-rules]", host: { properties: { "class": "config.marksClass" } }, providers: [{ provide: ChartComponent, useExisting: XyChartComponent }], usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: QuantitativeRulesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: QuantitativeRulesComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-quantitative-rules]', template: '', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: ChartComponent, useExisting: XyChartComponent }], host: {
                         '[class]': 'config.marksClass',
@@ -9992,11 +10069,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
         }] });
 
 class VicQuantitativeRulesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicQuantitativeRulesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: VicQuantitativeRulesModule, imports: [QuantitativeRulesComponent], exports: [QuantitativeRulesComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicQuantitativeRulesModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicQuantitativeRulesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: VicQuantitativeRulesModule, imports: [QuantitativeRulesComponent], exports: [QuantitativeRulesComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicQuantitativeRulesModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicQuantitativeRulesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicQuantitativeRulesModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [QuantitativeRulesComponent],
@@ -10166,10 +10243,10 @@ class VicStackedAreaConfigBuilder extends PrimaryMarksBuilder {
             throw new Error('Stacked Area Builder: Y dimension must be created. Please use method `y` to set the y dimension.');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedAreaConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedAreaConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicStackedAreaConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicStackedAreaConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedAreaConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicStackedAreaConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -10303,14 +10380,14 @@ class StackedAreaComponent extends VicXyPrimaryMarks {
     updateStackedAreaElements() {
         this.stackedAreas.next(this.areas);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StackedAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: StackedAreaComponent, isStandalone: true, selector: "[vic-primary-marks-stacked-area]", host: { properties: { "class": "config.marksClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: StackedAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: StackedAreaComponent, isStandalone: true, selector: "[vic-primary-marks-stacked-area]", host: { properties: { "class": "config.marksClass" } }, providers: [
             { provide: VIC_PRIMARY_MARKS, useExisting: StackedAreaComponent },
             { provide: STACKED_AREA, useExisting: StackedAreaComponent },
             { provide: ChartComponent, useExisting: XyChartComponent },
         ], usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StackedAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: StackedAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-primary-marks-stacked-area]', template: '', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: VIC_PRIMARY_MARKS, useExisting: StackedAreaComponent },
@@ -10340,10 +10417,10 @@ class StackedAreaTooltipPositioner extends TooltipPositioner {
 }
 
 class StackedAreaEventsDirective extends EventsDirective {
-    constructor() {
-        super(...arguments);
+    constructor(stackedArea) {
+        super();
+        this.stackedArea = stackedArea;
         this.interactionOutput = new EventEmitter();
-        this.stackedArea = inject(STACKED_AREA);
     }
     get marks() {
         return this.stackedArea;
@@ -10495,15 +10572,18 @@ class StackedAreaEventsDirective extends EventsDirective {
         this.categoryYMax = undefined;
         this.categoryIndex = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StackedAreaEventsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: StackedAreaEventsDirective, isStandalone: true, selector: "[vicStackedAreaEvents]", inputs: { hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: StackedAreaEventsDirective, deps: [{ token: STACKED_AREA }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: StackedAreaEventsDirective, isStandalone: true, selector: "[vicStackedAreaEvents]", inputs: { hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StackedAreaEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: StackedAreaEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vicStackedAreaEvents]',
                 }]
-        }], propDecorators: { hoverMoveActions: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [STACKED_AREA]
+                }] }], propDecorators: { hoverMoveActions: [{
                 type: Input
             }], clickActions: [{
                 type: Input
@@ -10514,11 +10594,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             }] } });
 
 class VicStackedAreaModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: VicStackedAreaModule, imports: [StackedAreaComponent, StackedAreaEventsDirective], exports: [StackedAreaComponent, StackedAreaEventsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedAreaModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicStackedAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: VicStackedAreaModule, imports: [StackedAreaComponent, StackedAreaEventsDirective], exports: [StackedAreaComponent, StackedAreaEventsDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicStackedAreaModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedAreaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicStackedAreaModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [StackedAreaComponent, StackedAreaEventsDirective],
@@ -10619,10 +10699,10 @@ class VicStackedBarsConfigBuilder extends VicBarsConfigBuilder {
             stackOrder: this._stackOrder,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedBarsConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedBarsConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicStackedBarsConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicStackedBarsConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedBarsConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicStackedBarsConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -10740,14 +10820,14 @@ class StackedBarsComponent extends BarsComponent {
     getSourceDatumFromStackedBarDatum(datum) {
         return this.config.data[datum.i];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StackedBarsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: StackedBarsComponent, isStandalone: true, selector: "[vic-primary-marks-stacked-bars]", inputs: { config: "config" }, host: { properties: { "class": "config.marksClass", "style.mixBlendMode": "config.mixBlendMode" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: StackedBarsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: StackedBarsComponent, isStandalone: true, selector: "[vic-primary-marks-stacked-bars]", inputs: { config: "config" }, host: { properties: { "class": "config.marksClass", "style.mixBlendMode": "config.mixBlendMode" } }, providers: [
             { provide: VIC_PRIMARY_MARKS, useExisting: StackedBarsComponent },
             { provide: STACKED_BARS, useExisting: StackedBarsComponent },
             { provide: ChartComponent, useExisting: XyChartComponent },
         ], usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StackedBarsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: StackedBarsComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-primary-marks-stacked-bars]', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: VIC_PRIMARY_MARKS, useExisting: StackedBarsComponent },
@@ -10762,11 +10842,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             }] } });
 
 class StackedBarsEventsDirective extends EventsDirective {
-    constructor() {
-        super(...arguments);
+    constructor(stackedBars) {
+        super();
+        this.stackedBars = stackedBars;
         this.interactionOutput = new EventEmitter();
         this.stackDatum = null;
-        this.stackedBars = inject(STACKED_BARS);
     }
     get marks() {
         return this.stackedBars;
@@ -10910,15 +10990,18 @@ class StackedBarsEventsDirective extends EventsDirective {
         this.positionX = undefined;
         this.positionY = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StackedBarsEventsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: StackedBarsEventsDirective, isStandalone: true, selector: "[vicStackedBarsEvents]", inputs: { hoverActions: "hoverActions", hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: StackedBarsEventsDirective, deps: [{ token: STACKED_BARS }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: StackedBarsEventsDirective, isStandalone: true, selector: "[vicStackedBarsEvents]", inputs: { hoverActions: "hoverActions", hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StackedBarsEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: StackedBarsEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vicStackedBarsEvents]',
                 }]
-        }], propDecorators: { hoverActions: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [STACKED_BARS]
+                }] }], propDecorators: { hoverActions: [{
                 type: Input
             }], hoverMoveActions: [{
                 type: Input
@@ -10931,11 +11014,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             }] } });
 
 class VicStackedBarsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedBarsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: VicStackedBarsModule, imports: [StackedBarsComponent, StackedBarsEventsDirective], exports: [StackedBarsComponent, StackedBarsEventsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedBarsModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicStackedBarsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: VicStackedBarsModule, imports: [StackedBarsComponent, StackedBarsEventsDirective], exports: [StackedBarsComponent, StackedBarsEventsDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicStackedBarsModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedBarsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicStackedBarsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [StackedBarsComponent, StackedBarsEventsDirective],
@@ -10944,28 +11027,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
         }] });
 
 class XyBackgroundComponent {
-    constructor() {
+    constructor(chart) {
+        this.chart = chart;
         this.color = 'whitesmoke';
-        this.chart = inject(XyChartComponent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XyBackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: XyBackgroundComponent, isStandalone: true, selector: "[vic-xy-background]", inputs: { color: "color" }, host: { classAttribute: "vic-xy-background" }, ngImport: i0, template: "@if(chart.scales$ | async; as scales) { @if(scales.x && scales.y) {\n<svg:rect\n  class=\"vic-xy-background\"\n  [attr.x]=\"scales.x.range()[0]\"\n  [attr.y]=\"scales.y.range()[1]\"\n  [attr.width]=\"scales.x.range()[1] - scales.x.range()[0]\"\n  [attr.height]=\"scales.y.range()[0] - scales.y.range()[1]\"\n  [attr.fill]=\"color\"\n></svg:rect>\n} }\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: XyBackgroundComponent, deps: [{ token: XyChartComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: XyBackgroundComponent, isStandalone: true, selector: "[vic-xy-background]", inputs: { color: "color" }, host: { classAttribute: "vic-xy-background" }, ngImport: i0, template: "@if(chart.scales$ | async; as scales) { @if(scales.x && scales.y) {\n<svg:rect\n  class=\"vic-xy-background\"\n  [attr.x]=\"scales.x.range()[0]\"\n  [attr.y]=\"scales.y.range()[1]\"\n  [attr.width]=\"scales.x.range()[1] - scales.x.range()[0]\"\n  [attr.height]=\"scales.y.range()[0] - scales.y.range()[1]\"\n  [attr.fill]=\"color\"\n></svg:rect>\n} }\n", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XyBackgroundComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: XyBackgroundComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-xy-background]', host: {
                         class: 'vic-xy-background',
                     }, imports: [AsyncPipe, CommonModule], template: "@if(chart.scales$ | async; as scales) { @if(scales.x && scales.y) {\n<svg:rect\n  class=\"vic-xy-background\"\n  [attr.x]=\"scales.x.range()[0]\"\n  [attr.y]=\"scales.y.range()[1]\"\n  [attr.width]=\"scales.x.range()[1] - scales.x.range()[0]\"\n  [attr.height]=\"scales.y.range()[0] - scales.y.range()[1]\"\n  [attr.fill]=\"color\"\n></svg:rect>\n} }\n" }]
-        }], propDecorators: { color: [{
+        }], ctorParameters: () => [{ type: XyChartComponent }], propDecorators: { color: [{
                 type: Input
             }] } });
 
 class VicXyBackgroundModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXyBackgroundModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: VicXyBackgroundModule, imports: [XyBackgroundComponent], exports: [XyBackgroundComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXyBackgroundModule, imports: [XyBackgroundComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicXyBackgroundModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: VicXyBackgroundModule, imports: [XyBackgroundComponent], exports: [XyBackgroundComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicXyBackgroundModule, imports: [XyBackgroundComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXyBackgroundModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicXyBackgroundModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [XyBackgroundComponent],
@@ -10981,5 +11064,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuxMarks, AuxMarksConfig, BARS, BarsClickEmitTooltipDataPauseOtherActions, BarsComponent, BarsConfig, BarsEventsDirective, BarsHoverEmitTooltipData, BarsHoverMoveEmitTooltipData, BarsHoverShowLabels, BarsLabels, BinStrategy, CHART, CHART_SIZE, CategoricalBinsAttributeDataDimension, Chart, ChartComponent, ChartConfig, ColorUtilities, CustomBreaksBinsAttributeDataDimension, DEFAULT_TOOLTIP_Y_OFFSET, DOTS, DataMarksConfig, DateChartPositionDimensionBuilder, DotsComponent, DotsConfig, DotsEventsDirective, DotsHoverDefaultStyles, DotsHoverMoveDefaultStyles, DotsHoverMoveEmitTooltipData, EqualFrequenciesAttributeDataDimension, EqualValueRangesAttributeDataDimension, EventType, EventsDirective, GEOGRAPHIES, GeographiesAttributeDataLayer, GeographiesAttributeDataLayerBuilder, GeographiesClickEmitTooltipDataPauseOtherActions, GeographiesComponent, GeographiesConfig, GeographiesEventsDirective, GeographiesGeojsonPropertiesLayer, GeographiesGeojsonPropertiesLayerBuilder, GeographiesHoverEmitTooltipData, GeographiesHoverMoveEmitTooltipData, GeographiesLabels, GeographiesLabelsBuilder, GroupedBarsComponent, GroupedBarsConfig, GroupedBarsEventsDirective, HorizontalBarsDimensionsBuilder, HtmlTooltipCdkManagedPosition, HtmlTooltipConfig, HtmlTooltipDirective, HtmlTooltipSize, HtmlTooltipSizeBuilder, LINES, LinesClickEmitTooltipDataPauseHoverMoveActions, LinesComponent, LinesConfig, LinesEventsDirective, LinesHoverMoveDefaultLinesStyles, LinesHoverMoveDefaultMarkersStyles, LinesHoverMoveDefaultStyles, LinesHoverMoveEmitTooltipData, LinesMarkerClickEmitTooltipData, LinesStrokeBuilder, LinesTooltipPositioner, MapChartComponent, MapLegendComponent, MapPrimaryMarks, MarksConfig, NoBinsAttributeDataDimension, NumberChartPositionDimensionBuilder, Orientation, PointMarkers, PrimaryMarks, PrimaryMarksBuilder, PrimaryMarksConfig, QuantitativeRulesComponent, QuantitativeRulesConfig, QuantitativeRulesLabels, STACKED_AREA, STACKED_BARS, Side, StackedAreaComponent, StackedAreaConfig, StackedAreaEventsDirective, StackedAreaHoverMoveEmitTooltipData, StackedBarsClickEmitTooltipDataPauseOtherActions, StackedBarsComponent, StackedBarsConfig, StackedBarsEventsDirective, StackedBarsHoverEmitTooltipData, StackedBarsHoverMoveEmitTooltipData, Stroke, SvgTextWrap, TooltipPosition, TooltipPositionBuilder, TooltipPositioner, TooltipTriangleComponent, VIC_PRIMARY_MARKS, ValueExtent, VerticalBarsDimensionsBuilder, VicAuxMarksBuilder, VicBarsConfigBuilder, VicBarsModule, VicChartConfigBuilder, VicChartModule, VicColumnConfig, VicDataExport, VicDataExportConfig, VicDotsConfigBuilder, VicDotsModule, VicGeographiesConfigBuilder, VicGeographiesModule, VicGroupedBarsConfigBuilder, VicGroupedBarsModule, VicHtmlTooltipConfigBuilder, VicHtmlTooltipModule, VicImage, VicImageDownloadService, VicJpegImageConfig, VicLegendType, VicLinesConfigBuilder, VicLinesModule, VicMapAuxMarks, VicMapLegendModule, VicPngImageConfig, VicQuantitativeRulesConfigBuilder, VicQuantitativeRulesModule, VicStackedAreaConfigBuilder, VicStackedAreaModule, VicStackedBarsConfigBuilder, VicStackedBarsModule, VicSvgImageConfig, VicXOrdinalAxisConfig, VicXOrdinalAxisConfigBuilder, VicXQuantitativeAxisConfig, VicXQuantitativeAxisConfigBuilder, VicXyAxisModule, VicXyBackgroundModule, VicXyPrimaryMarks, VicYOrdinalAxisConfig, VicYOrdinalAxisConfigBuilder, VicYQuantitativeAxisConfig, VicYQuantitativeAxisConfigBuilder, XOrdinalAxisComponent, XQuantitativeAxisComponent, XyAuxMarks, XyBackgroundComponent, XyChartComponent, XyContentScale, XyMarksConfig, XyPrimaryMarksConfig, YOrdinalAxisComponent, YQuantitativeAxisComponent, valueFormat };
+export { AuxMarks, AuxMarksConfig, BARS, BarsClickEmitTooltipDataPauseOtherActions, BarsComponent, BarsConfig, BarsEventsDirective, BarsHoverEmitTooltipData, BarsHoverMoveEmitTooltipData, BarsHoverShowLabels, BarsLabels, BinStrategy, CHART, CHART_SIZE, CategoricalBinsAttributeDataDimension, Chart, ChartComponent, ChartConfig, ColorUtilities, CustomBreaksBinsAttributeDataDimension, DEFAULT_TOOLTIP_Y_OFFSET, DOTS, DataMarksConfig, DotsComponent, DotsConfig, DotsEventsDirective, DotsHoverDefaultStyles, DotsHoverMoveDefaultStyles, DotsHoverMoveEmitTooltipData, EqualFrequenciesAttributeDataDimension, EqualValueRangesAttributeDataDimension, EventType, EventsDirective, GEOGRAPHIES, GeographiesAttributeDataLayer, GeographiesAttributeDataLayerBuilder, GeographiesClickEmitTooltipDataPauseOtherActions, GeographiesComponent, GeographiesConfig, GeographiesEventsDirective, GeographiesGeojsonPropertiesLayer, GeographiesGeojsonPropertiesLayerBuilder, GeographiesHoverEmitTooltipData, GeographiesHoverMoveEmitTooltipData, GeographiesLabels, GeographiesLabelsBuilder, GroupedBarsComponent, GroupedBarsConfig, GroupedBarsEventsDirective, HorizontalBarsDimensionsBuilder, HtmlTooltipCdkManagedPosition, HtmlTooltipConfig, HtmlTooltipDirective, HtmlTooltipSize, HtmlTooltipSizeBuilder, LINES, LinesClickEmitTooltipDataPauseHoverMoveActions, LinesComponent, LinesConfig, LinesEventsDirective, LinesHoverMoveDefaultLinesStyles, LinesHoverMoveDefaultMarkersStyles, LinesHoverMoveDefaultStyles, LinesHoverMoveEmitTooltipData, LinesMarkerClickEmitTooltipData, LinesTooltipPositioner, MapChartComponent, MapLegendComponent, MapPrimaryMarks, MarksConfig, NoBinsAttributeDataDimension, Orientation, PointMarkers, PrimaryMarks, PrimaryMarksBuilder, PrimaryMarksConfig, QuantitativeRulesComponent, QuantitativeRulesConfig, QuantitativeRulesLabels, STACKED_AREA, STACKED_BARS, Side, StackedAreaComponent, StackedAreaConfig, StackedAreaEventsDirective, StackedAreaHoverMoveEmitTooltipData, StackedBarsClickEmitTooltipDataPauseOtherActions, StackedBarsComponent, StackedBarsConfig, StackedBarsEventsDirective, StackedBarsHoverEmitTooltipData, StackedBarsHoverMoveEmitTooltipData, Stroke, SvgTextWrap, TooltipPosition, TooltipPositionBuilder, TooltipPositioner, TooltipTriangleComponent, VIC_PRIMARY_MARKS, ValueExtent, VerticalBarsDimensionsBuilder, VicAuxMarksBuilder, VicBarsConfigBuilder, VicBarsModule, VicChartConfigBuilder, VicChartModule, VicColumnConfig, VicDataExport, VicDataExportConfig, VicDotsConfigBuilder, VicDotsModule, VicGeographiesConfigBuilder, VicGeographiesModule, VicGroupedBarsConfigBuilder, VicGroupedBarsModule, VicHtmlTooltipConfigBuilder, VicHtmlTooltipModule, VicImage, VicImageDownloadService, VicJpegImageConfig, VicLegendType, VicLinesConfigBuilder, VicLinesModule, VicMapAuxMarks, VicMapLegendModule, VicPngImageConfig, VicQuantitativeRulesConfigBuilder, VicQuantitativeRulesModule, VicStackedAreaConfigBuilder, VicStackedAreaModule, VicStackedBarsConfigBuilder, VicStackedBarsModule, VicSvgImageConfig, VicXOrdinalAxisConfig, VicXOrdinalAxisConfigBuilder, VicXQuantitativeAxisConfig, VicXQuantitativeAxisConfigBuilder, VicXyAxisModule, VicXyBackgroundModule, VicXyPrimaryMarks, VicYOrdinalAxisConfig, VicYOrdinalAxisConfigBuilder, VicYQuantitativeAxisConfig, VicYQuantitativeAxisConfigBuilder, XOrdinalAxisComponent, XQuantitativeAxisComponent, XyAuxMarks, XyBackgroundComponent, XyChartComponent, XyContentScale, XyMarksConfig, XyPrimaryMarksConfig, YOrdinalAxisComponent, YQuantitativeAxisComponent, valueFormat };
 //# sourceMappingURL=mathstack-viz.mjs.map