@mathstack/viz 0.0.1-beta.2 → 0.0.1-beta.4

package/fesm2022/mathstack-viz.mjs

@@ -1,5 +1,5 @@
 import * as i0 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 { Directive, Input, InjectionToken, Injectable, inject, DestroyRef, NgZone, ViewChild, Component, ChangeDetectionStrategy, NgModule, ElementRef, ViewEncapsulation, Renderer2, EventEmitter, ViewContainerRef, Output } 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,9 +8,8 @@ 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';
@@ -22,10 +21,10 @@ class Marks {
             this.initFromConfig();
         }
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Marks, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Marks, decorators: [{
             type: Directive
         }] });
 
@@ -33,10 +32,10 @@ class AuxMarks extends Marks {
     initFromConfig() {
         this.drawMarks();
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: AuxMarks, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AuxMarks, decorators: [{
             type: Directive
         }], propDecorators: { config: [{
                 type: Input
@@ -230,10 +229,10 @@ class VicChartConfigBuilder {
             this._aspectRatio = this._width / this._height;
         }
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicChartConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicChartConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -255,8 +254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
  *  and scaled svg element in the DOM. USeful for adding elements that require access to chart scales.
  */
 class ChartComponent {
-    constructor(ngZone) {
-        this.ngZone = ngZone;
+    constructor() {
         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));
@@ -294,6 +292,7 @@ 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')) {
@@ -342,15 +341,15 @@ class ChartComponent {
             y: vb.height / rect.height,
         };
     }
-    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" }] }); }
+    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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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"] }]
-        }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { config: [{
+        }], propDecorators: { config: [{
                 type: Input
             }], divRef: [{
                 type: ViewChild,
@@ -396,10 +395,10 @@ class MapChartComponent extends ChartComponent {
             });
         });
     }
-    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" }] }); }
+    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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MapChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MapChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vic-map-chart', providers: [{ provide: CHART, useExisting: ChartComponent }], host: {
                         class: 'vic-map-chart',
@@ -442,10 +441,10 @@ class XyChartComponent extends ChartComponent {
             this.scales.next({ ...this.scales.value, ...scales });
         });
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: XyChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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',
@@ -453,11 +452,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
         }] });
 
 class VicChartModule {
-    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] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicChartModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicChartModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ChartComponent, XyChartComponent, MapChartComponent],
@@ -489,10 +488,10 @@ class VicMapAuxMarks extends AuxMarks {
     getTransitionDuration() {
         return this.chart.config.transitionDuration;
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicMapAuxMarks, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicMapAuxMarks, decorators: [{
             type: Directive
         }] });
 
@@ -505,10 +504,10 @@ class PrimaryMarks extends Marks {
     initFromConfig() {
         this.setChartScalesFromRanges(true);
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: PrimaryMarks, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PrimaryMarks, decorators: [{
             type: Directive
         }], propDecorators: { config: [{
                 type: Input
@@ -552,10 +551,10 @@ class MapPrimaryMarks extends PrimaryMarks {
     getTransitionDuration() {
         return this.chart.config.transitionDuration;
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MapPrimaryMarks, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MapPrimaryMarks, decorators: [{
             type: Directive
         }] });
 
@@ -628,10 +627,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: "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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: XyAuxMarks, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XyAuxMarks, decorators: [{
             type: Directive
         }] });
 
@@ -681,10 +680,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: "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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicXyPrimaryMarks, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXyPrimaryMarks, decorators: [{
             type: Directive
         }] });
 
@@ -1659,12 +1658,7 @@ 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) {
@@ -1683,12 +1677,7 @@ 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) {
@@ -1749,10 +1738,10 @@ class VicXOrdinalAxisConfigBuilder extends XyAxisBaseBuilder {
             ticks: this.ticksBuilder._build('x'),
         });
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicXOrdinalAxisConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXOrdinalAxisConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -1857,7 +1846,7 @@ class XyAxis extends XyAuxMarks {
             this.wrapAxisTickText(tickText);
         }
         if (this.config.ticks.marksDisplay === false) {
-            const marks = select(this.elRef.nativeElement).selectAll('.tick line');
+            const marks = select(this.elRef.nativeElement).selectAll(`.${this.class.axisGroup} .tick line`);
             marks.remove();
         }
     }
@@ -1979,10 +1968,10 @@ class XyAxis extends XyAuxMarks {
             : this.getTransitionDuration();
         return selection.transition().duration(transitionDuration);
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: XyAxis, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XyAxis, decorators: [{
             type: Directive
         }] });
 
@@ -1996,14 +1985,7 @@ 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;
 }
 
@@ -2085,23 +2067,16 @@ 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: "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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: XOrdinalAxisComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XOrdinalAxisComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-x-ordinal-axis]', template: '', inputs: ['config'], encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'config.marksClass',
@@ -2120,12 +2095,7 @@ 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) {
@@ -2185,10 +2155,10 @@ class VicXQuantitativeAxisConfigBuilder extends XyAxisBaseBuilder {
             ticks: this.ticksBuilder._build('x'),
         });
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicXQuantitativeAxisConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXQuantitativeAxisConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -2332,23 +2302,16 @@ 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: "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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: XQuantitativeAxisComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XQuantitativeAxisComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-x-quantitative-axis]', template: '', inputs: ['config'], encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'config.marksClass',
@@ -2486,23 +2449,16 @@ 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: "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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: YOrdinalAxisComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: YOrdinalAxisComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-y-ordinal-axis]', template: '', inputs: ['config'], encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'config.marksClass',
@@ -2514,10 +2470,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
 
 const YQuantitativeAxis = yAxisMixin(quantitativeAxisMixin(XyAxis));
 class YQuantitativeAxisComponent extends YQuantitativeAxis {
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: YQuantitativeAxisComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: YQuantitativeAxisComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-y-quantitative-axis]', template: '', inputs: ['config'], encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'config.marksClass',
@@ -2528,17 +2484,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
         }] });
 
 class VicXyAxisModule {
-    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,
+    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,
             YOrdinalAxisComponent,
             XQuantitativeAxisComponent,
             XOrdinalAxisComponent], exports: [YQuantitativeAxisComponent,
             YOrdinalAxisComponent,
             XQuantitativeAxisComponent,
             XOrdinalAxisComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicXyAxisModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXyAxisModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicXyAxisModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXyAxisModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2568,12 +2524,7 @@ 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) {
@@ -2636,10 +2587,10 @@ class VicYOrdinalAxisConfigBuilder extends XyAxisBaseBuilder {
             ticks: this.ticksBuilder._build('y'),
         });
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicYOrdinalAxisConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicYOrdinalAxisConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -2698,10 +2649,10 @@ class VicYQuantitativeAxisConfigBuilder extends XyAxisBaseBuilder {
             ticks: this.ticksBuilder._build('y'),
         });
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicYQuantitativeAxisConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicYQuantitativeAxisConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -3374,14 +3325,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: "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: [
+    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: [
             { 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: "19.2.2", ngImport: i0, type: BarsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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 },
@@ -3487,10 +3438,10 @@ class EventsDirective {
     asHost() {
         return this;
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: EventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EventsDirective, decorators: [{
             type: Directive
         }], propDecorators: { clickRemoveEvent$: [{
                 type: Input
@@ -3714,10 +3665,10 @@ class VicHtmlTooltipConfigBuilder {
         }
         return panelClasses;
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicHtmlTooltipConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicHtmlTooltipConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -3879,11 +3830,7 @@ class TooltipPositionBuilder {
 }
 
 class HtmlTooltipDirective {
-    constructor(viewContainerRef, overlay, overlayPositionBuilder, document) {
-        this.viewContainerRef = viewContainerRef;
-        this.overlay = overlay;
-        this.overlayPositionBuilder = overlayPositionBuilder;
-        this.document = document;
+    constructor() {
         this.backdropClick = new EventEmitter();
         this.backdropUnsubscribe = new Subject();
         this.portalAttached = false;
@@ -3892,6 +3839,10 @@ class HtmlTooltipDirective {
                 this.hide();
             }
         };
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.overlay = inject(Overlay);
+        this.overlayPositionBuilder = inject(OverlayPositionBuilder);
+        this.document = inject(DOCUMENT);
     }
     init() {
         if (!this.overlayRef) {
@@ -4027,19 +3978,16 @@ class HtmlTooltipDirective {
             this.overlayRef.dispose();
         }
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: HtmlTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HtmlTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'vic-html-tooltip',
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$1.Overlay }, { type: i1$1.OverlayPositionBuilder }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { template: [{
+        }], propDecorators: { template: [{
                 type: Input
             }], config: [{
                 type: Input
@@ -4052,10 +4000,10 @@ class TooltipTriangleComponent {
         this.height = 12;
         this.width = 20;
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TooltipTriangleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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: [{
@@ -4065,15 +4013,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
             }] } });
 
 class VicHtmlTooltipModule {
-    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,
+    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,
             OverlayModule,
             HtmlTooltipDirective,
             TooltipTriangleComponent], exports: [HtmlTooltipDirective, TooltipTriangleComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicHtmlTooltipModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicHtmlTooltipModule, imports: [CommonModule,
             OverlayModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicHtmlTooltipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicHtmlTooltipModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -4103,10 +4051,10 @@ class BarsTooltipPositioner extends TooltipPositioner {
 }
 
 class BarsEventsDirective extends EventsDirective {
-    constructor(bars) {
-        super();
-        this.bars = bars;
+    constructor() {
+        super(...arguments);
         this.interactionOutput = new EventEmitter();
+        this.bars = inject(BARS);
     }
     get marks() {
         return this.bars;
@@ -4243,18 +4191,15 @@ class BarsEventsDirective extends EventsDirective {
         this.positionX = undefined;
         this.positionY = undefined;
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: BarsEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BarsEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vicBarsEvents]',
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [BARS]
-                }] }], propDecorators: { hoverActions: [{
+        }], propDecorators: { hoverActions: [{
                 type: Input
             }], hoverMoveActions: [{
                 type: Input
@@ -4267,11 +4212,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
             }] } });
 
 class 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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicBarsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicBarsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [BarsComponent, BarsEventsDirective],
@@ -5258,10 +5203,10 @@ class VicBarsConfigBuilder extends PrimaryMarksBuilder {
     getQuantitativeDimensionName() {
         return this._orientation === 'horizontal' ? 'X' : 'Y';
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicBarsConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicBarsConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -5405,10 +5350,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: "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' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicDataExport, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicDataExport, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -5963,10 +5908,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: "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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicDotsConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicDotsConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -6096,14 +6041,14 @@ class DotsComponent extends VicXyPrimaryMarks {
         return ('formatSpecifier' in dimension &&
             typeof dimension.formatSpecifier === 'string');
     }
-    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: [
+    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: [
             { 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: "19.2.2", ngImport: i0, type: DotsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotsComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-primary-marks-dots]', template: '', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: VIC_PRIMARY_MARKS, useExisting: DotsComponent },
@@ -6132,10 +6077,10 @@ class DotsTooltipPositioner extends TooltipPositioner {
 }
 
 class DotsEventsDirective extends EventsDirective {
-    constructor(dots) {
-        super();
-        this.dots = dots;
+    constructor() {
+        super(...arguments);
         this.interactionOutput = new EventEmitter();
+        this.dots = inject(DOTS);
     }
     get marks() {
         return this.dots;
@@ -6273,18 +6218,15 @@ class DotsEventsDirective extends EventsDirective {
         this.positionX = undefined;
         this.positionY = undefined;
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DotsEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotsEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vicDotsEvents]',
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOTS]
-                }] }], propDecorators: { hoverActions: [{
+        }], propDecorators: { hoverActions: [{
                 type: Input
             }], hoverMoveActions: [{
                 type: Input
@@ -6297,11 +6239,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
             }] } });
 
 class 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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicDotsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicDotsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DotsComponent, DotsEventsDirective],
@@ -7563,10 +7505,10 @@ class VicGeographiesConfigBuilder {
             throw new Error('At least one layer is required');
         }
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicGeographiesConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGeographiesConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -7746,8 +7688,8 @@ class GeographiesComponent extends MapPrimaryMarks {
         }, []);
         this.pathsByLayer.next(pathsByLayer);
     }
-    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: [
+    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: [
             { provide: VIC_PRIMARY_MARKS, useExisting: GeographiesComponent },
             {
                 provide: GEOGRAPHIES,
@@ -7759,7 +7701,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: "19.2.2", ngImport: i0, type: GeographiesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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 },
@@ -7773,7 +7715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                         },
                     ], host: {
                         '[class]': 'config.marksClass',
-                        '[style.mixed-blend-mode]': 'config.blendMode',
+                        '[style.mixed-blend-mode]': 'config.mixBlendMode',
                     }, template: "<ng-content></ng-content>\n" }]
         }] });
 
@@ -7794,10 +7736,10 @@ class GeographiesTooltipPositioner extends TooltipPositioner {
 }
 
 class GeographiesEventsDirective extends EventsDirective {
-    constructor(geographies) {
-        super();
-        this.geographies = geographies;
+    constructor() {
+        super(...arguments);
         this.interactionOutput = new EventEmitter();
+        this.geographies = inject(GEOGRAPHIES);
     }
     get marks() {
         return this.geographies;
@@ -7936,18 +7878,15 @@ class GeographiesEventsDirective extends EventsDirective {
         this.positionY = undefined;
         this.layer = undefined;
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: GeographiesEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GeographiesEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vicGeographiesEvents]',
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [GEOGRAPHIES]
-                }] }], propDecorators: { hoverActions: [{
+        }], propDecorators: { hoverActions: [{
                 type: Input
             }], hoverMoveActions: [{
                 type: Input
@@ -7964,11 +7903,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
  */
 
 class 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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicGeographiesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGeographiesModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [GeographiesComponent, GeographiesEventsDirective],
@@ -8042,18 +7981,18 @@ class VicGroupedBarsConfigBuilder extends VicBarsConfigBuilder {
             quantitative: this.quantitativeDimensionBuilder._build(this.getQuantitativeDimensionName()),
         });
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicGroupedBarsConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGroupedBarsConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
 class GroupedBarsEventsDirective extends EventsDirective {
-    constructor(bars) {
-        super();
-        this.bars = bars;
+    constructor() {
+        super(...arguments);
         this.interactionOutput = new EventEmitter();
+        this.bars = inject(BARS);
     }
     get marks() {
         return this.bars;
@@ -8190,18 +8129,15 @@ class GroupedBarsEventsDirective extends EventsDirective {
         this.positionX = undefined;
         this.positionY = undefined;
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: GroupedBarsEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GroupedBarsEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vicGroupedBarsEvents]',
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [BARS]
-                }] }], propDecorators: { hoverActions: [{
+        }], propDecorators: { hoverActions: [{
                 type: Input
             }], hoverMoveActions: [{
                 type: Input
@@ -8262,14 +8198,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: "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: [
+    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: [
             { 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: "19.2.2", ngImport: i0, type: GroupedBarsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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 },
@@ -8285,11 +8221,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
             }] } });
 
 class 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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicGroupedBarsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGroupedBarsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [GroupedBarsComponent, GroupedBarsEventsDirective],
@@ -8373,10 +8309,10 @@ class VicImageDownloadService {
         link.href = dataUrl;
         link.click();
     }
-    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' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicImageDownloadService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicImageDownloadService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -8478,7 +8414,7 @@ class LinesStrokeBuilder {
      * OPTIONAL. A value for the line's [stroke-dasharray]{@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray}
      *  attribute.
      *
-     * @default 'round'
+     * @default 'none'
      */
     dasharray(dasharray) {
         this._dasharray = dasharray;
@@ -8792,10 +8728,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: "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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicLinesConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicLinesConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -9024,8 +8960,17 @@ class LinesComponent extends VicXyPrimaryMarks {
             .append('path')
             .attr('class', ([category], i) => `${this.class.line} ${this.config.datumClass(this.config.getDataFromCategory(category)[0], i)}`.trim())
             .attr('stroke', ([category]) => this.scales.color(category))
+            .attr('stroke-dasharray', this.config.stroke.dasharray)
+            .attr('stroke-linecap', this.config.stroke.linecap)
+            .attr('stroke-linejoin', this.config.stroke.linejoin)
+            .attr('stroke-width', this.config.stroke.width)
             .attr('d', ([, lineData]) => this.line(lineData)), (update) => update
+            .attr('class', ([category], i) => `${this.class.line} ${this.config.datumClass(this.config.getDataFromCategory(category)[0], i)}`.trim())
             .attr('stroke', ([category]) => this.scales.color(category))
+            .attr('stroke-dasharray', this.config.stroke.dasharray)
+            .attr('stroke-linecap', this.config.stroke.linecap)
+            .attr('stroke-linejoin', this.config.stroke.linejoin)
+            .attr('stroke-width', this.config.stroke.width)
             .call((update) => update
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             .transition(t)
@@ -9144,14 +9089,14 @@ class LinesComponent extends VicXyPrimaryMarks {
             origin: this.chart.svgRef.nativeElement,
         };
     }
-    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: [
+    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: [
             { 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: "19.2.2", ngImport: i0, type: LinesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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 },
@@ -9185,11 +9130,11 @@ class LinesTooltipPositioner extends TooltipPositioner {
 }
 
 class LinesEventsDirective extends EventsDirective {
-    constructor(lines) {
-        super();
-        this.lines = lines;
+    constructor() {
+        super(...arguments);
         this.interactionOutput = new EventEmitter();
         this.actionActive = false;
+        this.lines = inject(LINES);
     }
     get marks() {
         return this.lines;
@@ -9360,18 +9305,15 @@ class LinesEventsDirective extends EventsDirective {
         this.positionX = undefined;
         this.positionY = undefined;
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LinesEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LinesEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vicLinesEvents]',
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LINES]
-                }] }], propDecorators: { hoverMoveActions: [{
+        }], propDecorators: { hoverMoveActions: [{
                 type: Input
             }], clickActions: [{
                 type: Input
@@ -9382,11 +9324,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
             }] } });
 
 class 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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicLinesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicLinesModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [LinesComponent, LinesEventsDirective],
@@ -9448,10 +9390,10 @@ class MapLegend {
         this.largerValueSpace = 0;
         this.leftOffset = 0;
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MapLegend, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MapLegend, decorators: [{
             type: Directive
         }], propDecorators: { width: [{
                 type: Input
@@ -9522,12 +9464,12 @@ class ContinuousLegendComponent extends MapLegend {
             ctx.fillRect(0, i, 1, 1);
         }
     }
-    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"] }] }); }
+    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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ContinuousLegendComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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  <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"] }]
+            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"] }]
         }], propDecorators: { canvasRef: [{
                 type: ViewChild,
                 args: ['canvas', { static: true }]
@@ -9565,12 +9507,12 @@ class DiscontinuousLegendComponent extends MapLegend {
             return 0;
         }
     }
-    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"] }] }); }
+    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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DiscontinuousLegendComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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  <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"] }]
+            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"] }]
         }] });
 
 var VicLegendType;
@@ -9613,16 +9555,16 @@ class MapLegendComponent {
             }
         }
     }
-    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" }] }); }
+    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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MapLegendComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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) {\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" }]
+                    ], 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" }]
         }], propDecorators: { width: [{
                 type: Input
             }], height: [{
@@ -9637,11 +9579,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
             }] } });
 
 class VicMapLegendModule {
-    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] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicMapLegendModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicMapLegendModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [MapLegendComponent],
@@ -9871,10 +9813,10 @@ class VicQuantitativeRulesConfigBuilder extends VicAuxMarksBuilder {
             this.labelsBuilder.validateBuilder(this._orientation, this._color);
         }
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicQuantitativeRulesConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicQuantitativeRulesConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -10039,10 +9981,10 @@ class QuantitativeRulesComponent extends XyAuxMarks {
         }
         return this.scales.y.range()[1];
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: QuantitativeRulesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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',
@@ -10050,11 +9992,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
         }] });
 
 class 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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicQuantitativeRulesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicQuantitativeRulesModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [QuantitativeRulesComponent],
@@ -10224,10 +10166,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: "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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicStackedAreaConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedAreaConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -10361,14 +10303,14 @@ class StackedAreaComponent extends VicXyPrimaryMarks {
     updateStackedAreaElements() {
         this.stackedAreas.next(this.areas);
     }
-    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: [
+    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: [
             { 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: "19.2.2", ngImport: i0, type: StackedAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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 },
@@ -10398,10 +10340,10 @@ class StackedAreaTooltipPositioner extends TooltipPositioner {
 }
 
 class StackedAreaEventsDirective extends EventsDirective {
-    constructor(stackedArea) {
-        super();
-        this.stackedArea = stackedArea;
+    constructor() {
+        super(...arguments);
         this.interactionOutput = new EventEmitter();
+        this.stackedArea = inject(STACKED_AREA);
     }
     get marks() {
         return this.stackedArea;
@@ -10553,18 +10495,15 @@ class StackedAreaEventsDirective extends EventsDirective {
         this.categoryYMax = undefined;
         this.categoryIndex = undefined;
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: StackedAreaEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StackedAreaEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vicStackedAreaEvents]',
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [STACKED_AREA]
-                }] }], propDecorators: { hoverMoveActions: [{
+        }], propDecorators: { hoverMoveActions: [{
                 type: Input
             }], clickActions: [{
                 type: Input
@@ -10575,11 +10514,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
             }] } });
 
 class 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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicStackedAreaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedAreaModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [StackedAreaComponent, StackedAreaEventsDirective],
@@ -10680,10 +10619,10 @@ class VicStackedBarsConfigBuilder extends VicBarsConfigBuilder {
             stackOrder: this._stackOrder,
         });
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicStackedBarsConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedBarsConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -10801,14 +10740,14 @@ class StackedBarsComponent extends BarsComponent {
     getSourceDatumFromStackedBarDatum(datum) {
         return this.config.data[datum.i];
     }
-    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: [
+    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: [
             { 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: "19.2.2", ngImport: i0, type: StackedBarsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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 },
@@ -10823,11 +10762,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
             }] } });
 
 class StackedBarsEventsDirective extends EventsDirective {
-    constructor(stackedBars) {
-        super();
-        this.stackedBars = stackedBars;
+    constructor() {
+        super(...arguments);
         this.interactionOutput = new EventEmitter();
         this.stackDatum = null;
+        this.stackedBars = inject(STACKED_BARS);
     }
     get marks() {
         return this.stackedBars;
@@ -10971,18 +10910,15 @@ class StackedBarsEventsDirective extends EventsDirective {
         this.positionX = undefined;
         this.positionY = undefined;
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: StackedBarsEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StackedBarsEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vicStackedBarsEvents]',
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [STACKED_BARS]
-                }] }], propDecorators: { hoverActions: [{
+        }], propDecorators: { hoverActions: [{
                 type: Input
             }], hoverMoveActions: [{
                 type: Input
@@ -10995,11 +10931,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
             }] } });
 
 class 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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicStackedBarsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedBarsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [StackedBarsComponent, StackedBarsEventsDirective],
@@ -11008,28 +10944,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
         }] });
 
 class XyBackgroundComponent {
-    constructor(chart) {
-        this.chart = chart;
+    constructor() {
         this.color = 'whitesmoke';
+        this.chart = inject(XyChartComponent);
     }
-    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 }] }); }
+    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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: XyBackgroundComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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" }]
-        }], ctorParameters: () => [{ type: XyChartComponent }], propDecorators: { color: [{
+        }], propDecorators: { color: [{
                 type: Input
             }] } });
 
 class VicXyBackgroundModule {
-    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] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicXyBackgroundModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXyBackgroundModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [XyBackgroundComponent],