@mathstack/viz 0.0.1-beta.1 → 0.0.1-beta.10

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, Pipe } 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,11 +8,10 @@ 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 saveAs from 'file-saver';
+import unparse from 'papaparse';
 import polylabel from 'polylabel';
 import * as domToImage from 'html-to-image';
 
@@ -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
         }] });
 
@@ -1233,423 +1232,263 @@ class XyAxisBaseBuilder extends VicAuxMarksBuilder {
     }
 }
 
-/**
- * A config that specifies how axis tick labels should wrap.
- */
-class TickWrap {
-    constructor(options) {
-        safeAssign(this, options);
+class XyAxisConfig extends AuxMarksConfig {
+    getValidatedNumTicks(numTicks) {
+        if (numTicks < 1) {
+            return 1;
+        }
+        return Math.floor(numTicks);
     }
 }
 
-const DEFAULT$A = {
-    _wrapWidth: 'bandwidth',
-    _lineHeight: 1.1,
-};
-class TickWrapBuilder {
+/**
+ * A base directive for all axes.
+ */
+class XyAxis extends XyAuxMarks {
     constructor() {
-        safeAssign(this, DEFAULT$A);
+        super(...arguments);
+        this.elRef = inject(ElementRef);
+        // used to ensure that a zero axis does not transition in position from baseline on first draw
+        this.isFirstDraw = true;
     }
-    /**
-     * OPTIONAL. Sets the characters to break on when wrapping text.
-     * By default, text will only break on spaces.
-     *
-     * @default []
-     */
-    breakOnChars(breakOnChars) {
-        this._breakOnChars = breakOnChars;
-        return this;
+    get class() {
+        return {
+            gridGroup: 'vic-grid-group',
+            gridLine: 'vic-grid-line',
+            axisGroup: 'vic-axis-group',
+            label: 'vic-axis-label',
+        };
     }
-    /**
-     * OPTIONAL. Sets the line-height property of the tick labels. Adjusting the line-height can useful when wrapping labels, particularly on a y-axis.
-     *
-     * @param value - The line-height of the tick labels, as a multiplier of the font size. For example, 1.1 is 110% of the font size, 1.5 is 150% of the font size, etc.
-     */
-    lineHeight(value) {
-        if (value === null) {
-            this._lineHeight = undefined;
-            return this;
-        }
-        this._lineHeight = value;
-        return this;
+    initFromConfig() {
+        this.drawMarks();
     }
-    /**
-     * OPTIONAL. If true, the x position of the text will be maintained.
-     *
-     * This is useful, for example, for centering bar labels on a vertical bar chart.
-     *
-     * @default false
-     */
-    maintainXPosition(maintainXPosition) {
-        this._maintainXPosition = maintainXPosition;
-        return this;
+    setAxisFromScaleAndConfig() {
+        this.axis = this.axisFunction(this.scale);
+        this.setTickSize();
+        if (this.config.ticks.format) {
+            this.setTicks(this.config.ticks.format);
+        }
     }
-    /**
-     * OPTIONAL. If true, the y position of the text will be maintained.
-     *
-     * This is useful, for example, for centering bar labels on a horizontal bar chart.
-     *
-     * @default false
-     */
-    maintainYPosition(maintainYPosition) {
-        this._maintainYPosition = maintainYPosition;
-        return this;
+    setTickSize() {
+        if (this.config.ticks.size !== undefined) {
+            this.axis.tickSize(this.config.ticks.size);
+        }
+        else {
+            if (this.config.ticks.sizeInner !== undefined) {
+                this.axis.tickSizeInner(this.config.ticks.sizeInner);
+            }
+            if (this.config.ticks.sizeOuter !== undefined) {
+                this.axis.tickSizeOuter(this.config.ticks.sizeOuter);
+            }
+        }
+        const baselineTranslate = this.getBaselineTranslate();
+        if (baselineTranslate) {
+            this.axis.tickSizeOuter(0);
+        }
     }
-    /**
-     * OPTIONAL. If true, spaces will be added around break characters.
-     *
-     * This is useful when breaking on punctuation characters, to avoid words being stuck to punctuation.
-     * For example, breaking on commas without spaces around them would result in "word," at the end of one line and "word" at the start of the next line.
-     *
-     * @default false
-     */
-    spaceAroundBreakChars(spaceAroundBreakChars) {
-        this._spaceAroundBreakChars = spaceAroundBreakChars;
-        return this;
+    drawMarks() {
+        this.setAxisFunction();
+        this.setTranslate();
+        this.setScale();
+        this.setAxisFromScaleAndConfig();
+        this.drawAxis();
+        this.isFirstDraw = false;
     }
-    width(width) {
-        if (width === null) {
-            this._width = undefined;
-            return this;
+    drawAxis() {
+        if (!this.axisGroup) {
+            this.axisGroup = select(this.elRef.nativeElement)
+                .append('g')
+                .attr('class', this.class.axisGroup);
         }
-        this._width = width;
-        return this;
-    }
-    /**
-     * @internal Not meant to be called by consumers of the library.
-     */
-    _build(dimension) {
-        this.validate(dimension);
-        return new TickWrap({
-            width: this._width,
-            maintainXPosition: this._maintainXPosition,
-            maintainYPosition: this._maintainYPosition,
-            lineHeight: this._lineHeight,
-            breakOnChars: this._breakOnChars,
-            spaceAroundBreakChars: this._spaceAroundBreakChars,
+        // Remove domain to avoid odd baseline/zero-axis positioning during transitions
+        this.axisGroup.select('.domain').remove();
+        this.axisGroup
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .transition(this.getTransition(this.axisGroup))
+            .call(this.axis)
+            .on('end', () => {
+            this.processTicks();
+            this.processDomain();
+            this.drawGrid();
         });
+        // Hide elements immediately based on config to prevent flash during transition
+        this.hideElementsPerConfig();
+        this.processTickLabels();
+        if (this.config.label) {
+            this.createLabel();
+        }
     }
-    validate(dimension) {
-        this._maintainXPosition =
-            this._maintainXPosition === undefined
-                ? dimension === 'y'
-                    ? true
-                    : false
-                : this._maintainXPosition;
-        this._maintainYPosition =
-            this._maintainYPosition === undefined
-                ? dimension === 'x'
-                    ? false
-                    : true
-                : this._maintainYPosition;
-    }
-}
-
-class Ticks {
-    constructor(options) {
-        safeAssign(this, options);
-    }
-}
-class QuantitativeTicks extends Ticks {
-    constructor(options) {
-        super(options);
-    }
-}
-
-const DEFAULT$z = {
-    _class: () => '',
-    _labelsDisplay: true,
-    _marksDisplay: true,
-    _remove: false,
-    _stroke: 'none',
-    _strokeOpacity: 1,
-    _strokeWidth: 3,
-};
-const QUANT_DEFAULT = {
-    _spacing: 40,
-};
-class TicksBuilder {
-    constructor(options) {
-        safeAssign(this, DEFAULT$z);
-        safeAssign(this, options);
-    }
-    class(value) {
-        if (value === null) {
-            this._class = DEFAULT$z._class;
-            return this;
+    hideElementsPerConfig() {
+        // Remove tick marks immediately if configured to be hidden
+        if (this.config.ticks.marksDisplay === false) {
+            this.axisGroup.selectAll('.tick line').interrupt().remove();
         }
-        if (typeof value === 'string') {
-            this._class = () => value;
-            return this;
+        // Remove tick labels immediately if configured to be hidden
+        if (this.config.ticks.labelsDisplay === false) {
+            this.axisGroup.selectAll('.tick text').interrupt().remove();
         }
-        this._class = value;
-        return this;
-    }
-    /**
-     * OPTIONAL. Sets the font size of the tick labels.
-     *
-     * @param value - The font size of the tick labels, in px.
-     *
-     * If not called, the default font size is D3's default, which is 10px.
-     */
-    fontSize(value) {
-        if (value === null) {
-            this._fontSize = undefined;
-            return this;
+        // Remove baseline immediately if not displayed and no zero baseline exists
+        const zeroAxisTranslate = this.getBaselineTranslate();
+        if (!this.config.baseline.display && zeroAxisTranslate === null) {
+            this.axisGroup.select('.domain').interrupt().remove();
         }
-        this._fontSize = value;
-        return this;
     }
-    format(format) {
-        if (format === null) {
-            this._format = undefined;
-            return this;
+    processTicks() {
+        const tickText = select(this.elRef.nativeElement).selectAll('.tick text');
+        if (this.config.ticks.class) {
+            select(this.elRef.nativeElement)
+                .selectAll('.tick')
+                .each((d, i, nodes) => {
+                const labelClass = this.config.ticks.class(d);
+                if (labelClass) {
+                    select(nodes[i]).classed(labelClass, true);
+                }
+                else {
+                    ///remove any previous class
+                    select(nodes[i]).attr('class', 'tick');
+                }
+            });
+        }
+        if (this.config.ticks.fontSize) {
+            this.setTickFontSize(tickText);
+        }
+        // TODO: Determine if this needs to be called from the on('end') of the axisGroup transition
+        // or if if should be moved to processTickLabels. I think there is a reason it is here. (?)
+        if (this.config.ticks.wrap && this.config.ticks.wrap.width !== undefined) {
+            this.wrapAxisTickText(tickText);
         }
-        this._format = format;
-        return this;
     }
-    /**
-     * OPTIONAL. If false, tick labels will be removed.
-     *
-     * @param value - `true` to retain all tick labels, `false` to remove all tick labels.
-     *
-     * If not called, the default value is `true`.
-     */
-    labelsDisplay(value) {
-        this._labelsDisplay = value;
-        return this;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    setTickFontSize(tickTextSelection) {
+        tickTextSelection.attr('font-size', this.config.ticks.fontSize);
     }
-    /**
-     * OPTIONAL. Sets the color of the stroke around the tick labels. Often used to improve the legibility of tick labels, for example, on dark backgrounds.
-     *
-     * @param value - The stroke of the tick labels.
-     *
-     * If not called, the default value is 'none'.
-     */
-    labelsStroke(value) {
-        if (value === null) {
-            this._labelsStroke = DEFAULT$z._stroke;
-            return this;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    wrapAxisTickText(tickTextSelection) {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { width, ...properties } = this.config.ticks.wrap;
+        let wrapWidth;
+        if (this.config.ticks.wrap.width === 'bandwidth') {
+            wrapWidth = this.scale.bandwidth();
         }
-        this._labelsStroke = value;
-        return this;
-    }
-    /**
-     * OPTIONAL. Sets the opacity of the stroke applied around the tick labels.
-     *
-     * @param value - The opacity of the stroke around the tick labels.
-     *
-     * If not called, the default value is 1.
-     */
-    labelsStrokeOpacity(value) {
-        if (value === null) {
-            this._labelsStrokeOpacity = undefined;
-            return this;
+        else if (typeof this.config.ticks.wrap.width === 'function') {
+            const chartWidth = this.scale.range()[1] - this.scale.range()[0];
+            const numOfTicks = select(this.elRef.nativeElement)
+                .selectAll('.tick')
+                .size();
+            wrapWidth = this.config.ticks.wrap.width(chartWidth, numOfTicks);
         }
-        this._labelsStrokeOpacity = value;
-        return this;
-    }
-    /**
-     * OPTIONAL. Sets the width of the stroke around the tick labels. Often used to improve the legibility of tick labels, for example, on dark backgrounds.
-     *
-     * @param value - The width of the stroke around the tick labels.
-     *
-     * If not called, the default value is 3.
-     */
-    labelsStrokeWidth(value) {
-        if (value === null) {
-            this._labelsStrokeWidth = undefined;
-            return this;
+        else {
+            wrapWidth = this.config.ticks.wrap.width;
         }
-        this._labelsStrokeWidth = value;
-        return this;
-    }
-    /**
-     * OPTIONAL. If false, tick marks (lines) will be removed.
-     *
-     * @param value - `true` to retain all tick marks, `false` to remove all tick marks.
-     *
-     * If not called, the default value is `true`.
-     */
-    marksDisplay(value) {
-        this._marksDisplay = value;
-        return this;
+        const wrap = new SvgTextWrap({ ...properties, width: wrapWidth });
+        wrap.wrap(tickTextSelection);
     }
-    /**
-     * OPTIONAL. Determines the rotation of tick labels.
-     *
-     * @param value - The rotation of the tick labels in degrees, or `null` to unset the rotation.
-     *
-     * Positive values rotate clockwise, negative values rotate counterclockwise.
-     *
-     * If not called, ticks will not be rotated.
-     */
-    rotate(value) {
-        if (value === null) {
-            this._rotate = undefined;
-            return this;
+    processDomain() {
+        const zeroAxisTranslate = this.getBaselineTranslate();
+        if (this.config.baseline.zeroBaseline.display &&
+            zeroAxisTranslate !== null) {
+            this.axisGroup.call((g) => g
+                .select('.domain')
+                .attr('transform', zeroAxisTranslate)
+                .attr('class', 'domain baseline zero-axis-baseline')
+                .attr('stroke-dasharray', this.config.baseline.zeroBaseline.dasharray));
         }
-        this._rotate = value;
-        return this;
-    }
-    /**
-     * OPTIONAL. Sets the size of inner and outer tick marks.
-     *
-     * @param value - The size of the ticks, in px.
-     *
-     * If not called or called with `null`, the default size is the D3 default size.
-     *
-     * If specified, this value will override any values set by `sizeInner` or `sizeOuter`.
-     */
-    size(value) {
-        if (value === null) {
-            this._size = undefined;
-            return this;
+        if (zeroAxisTranslate === null) {
+            this.axisGroup.call((g) => g
+                .select('.domain')
+                .attr('class', 'domain baseline')
+                .attr('transform', null)
+                .attr('stroke-dasharray', null));
         }
-        this._size = value;
-        return this;
     }
-    /**
-     * OPTIONAL. Determines the length of the inner ticks drawn by D3. Does not apply to the outermost ticks.
-     *
-     * @param value - The length of the inner ticks in pixels, or `null` to unset the value.
-     *
-     * If not called or called with `null`, the default value is the D3 default size.
-     *
-     */
-    sizeInner(value) {
-        if (value === null) {
-            this._sizeInner = undefined;
-            return this;
+    processTickLabels() {
+        if (this.config.ticks.rotate) {
+            this.axisGroup.call((g) => g
+                .selectAll('.tick text')
+                .style('transform', `rotate(-${this.config.ticks.rotate}deg)`)
+                .attr('text-anchor', 'end')
+                .attr('alignment-baseline', 'start'));
+        }
+        if (this.config.ticks.labelsStroke ||
+            this.config.ticks.labelsStrokeOpacity ||
+            this.config.ticks.labelsStrokeWidth) {
+            this.axisGroup.call((g) => g
+                .selectAll('.tick text')
+                .attr('stroke', this.config.ticks.labelsStroke)
+                .attr('stroke-opacity', this.config.ticks.labelsStrokeOpacity)
+                .attr('stroke-width', this.config.ticks.labelsStrokeWidth));
         }
-        this._sizeInner = value;
-        return this;
     }
-    /**
-     * OPTIONAL. Determines the length of the square ends of the domain path drawn by D3.
-     *
-     * @param value - The length of the square ends of the domain path in pixels, or `null` to unset the value.
-     *
-     * If not called on ordinal axes, the default value is 0. If not called on quantitative axes, no modification is made to D3's default value.
-     */
-    sizeOuter(value) {
-        if (value === null) {
-            this._sizeOuter = undefined;
-            return this;
+    otherAxisHasPosAndNegValues(dimension) {
+        const otherDimension = dimension === 'x' ? 'y' : 'x';
+        const domain = this.scales[otherDimension].domain();
+        if (domain.length > 2 || isNaN(domain[0]) || isNaN(domain[1])) {
+            return false;
         }
-        this._sizeOuter = value;
-        return this;
+        return domain[0] < 0 && domain[1] > 0;
     }
-    wrap(wrap) {
-        if (wrap === null) {
-            this.wrapBuilder = undefined;
-            return this;
+    drawGrid() {
+        if (this.config.grid) {
+            if (!this.gridGroup) {
+                this.gridGroup = select(this.elRef.nativeElement)
+                    .append('g')
+                    .attr('class', this.class.gridGroup);
+            }
+            this.gridGroup
+                .transition(this.getTransition(this.gridGroup))
+                .call(this.axis.tickSizeInner(this.getGridLineLength()))
+                .selectAll('.tick')
+                .attr('class', `tick ${this.class.gridLine}`)
+                .style('display', (_, i) => this.config.grid.filter(i) ? null : 'none')
+                .select('line')
+                .attr('stroke', this.config.grid.stroke.color)
+                .attr('stroke-dasharray', this.config.grid.stroke.dasharray)
+                .attr('stroke-width', this.config.grid.stroke.width)
+                .attr('opacity', this.config.grid.stroke.opacity)
+                .attr('stroke-linecap', this.config.grid.stroke.linecap)
+                .attr('stroke-linejoin', this.config.grid.stroke.linejoin);
+            this.gridGroup.call((g) => {
+                g.selectAll('text').remove();
+                g.selectAll('.domain').remove();
+            });
+        }
+        else {
+            select(this.elRef.nativeElement)
+                .select(`.${this.class.gridGroup}`)
+                .remove();
+            this.gridGroup = undefined;
         }
-        this.wrapBuilder = new TickWrapBuilder();
-        wrap(this.wrapBuilder);
-        return this;
     }
-    _build(dimension) {
-        return new Ticks({
-            class: this._class,
-            fontSize: this._fontSize,
-            format: this._format,
-            labelsDisplay: this._labelsDisplay,
-            labelsStroke: this._labelsStroke,
-            labelsStrokeOpacity: this._labelsStrokeOpacity,
-            labelsStrokeWidth: this._labelsStrokeWidth,
-            marksDisplay: this._marksDisplay,
-            rotate: this._rotate,
-            size: this._size,
-            sizeInner: this._sizeInner,
-            sizeOuter: this._sizeOuter,
-            wrap: this.wrapBuilder?._build(dimension),
-        });
+    getGridLineLength() {
+        const gridLineScale = this.config.grid.axis === 'x' ? this.scales.y : this.scales.x;
+        return -1 * Math.abs(gridLineScale.range()[1] - gridLineScale.range()[0]);
     }
-}
-class QuantitativeTicksBuilder extends TicksBuilder {
-    constructor(options) {
-        super(options);
-        safeAssign(this, DEFAULT$z);
-        safeAssign(this, QUANT_DEFAULT);
-    }
-    /**
-     * OPTIONAL. Approximately specifies the number of ticks for the axis.
-     *
-     * @param value - The number of ticks to pass to D3's axis.ticks(), or null to unset the number of ticks.
-     *
-     * If not called, a reasonable and valid default will be used based on the size of the chart.
-     *
-     * Note that this number will be passed to D3's `ticks()` method and therefore it can be an approximate number of ticks.
-     *
-     * If this method is called, the passed in number of ticks will be validated against the data domain and the value formatter for the axis. If the number of ticks is not valid—for example, if the ticks are formatted with %Y and there are three years of values in the data, and this method is called with 10, a valid number will be used instead.
-     */
-    count(value) {
-        if (value === null) {
-            this._count = undefined;
-            return this;
-        }
-        this._count = value;
-        return this;
-    }
-    /**
-     * OPTIONAL. Specifies the an approximate spacing between ticks, in pixels.
-     *
-     * @param value - The spacing between ticks in pixels, or null to unset the spacing.
-     *
-     * If not called, the default value is 40. If `count` is set, this value will be ignored.
-     */
-    spacing(value) {
-        if (value === null) {
-            this._spacing = undefined;
-            return this;
-        }
-        this._spacing = value;
-        return this;
-    }
-    /**
-     * OPTIONAL. Determines the values that will show up as ticks on the axis.
-     *
-     * @param values - An array of quantitative values to pass to D3's axis.tickValues(), or null to unset the tick values.
-     *
-     */
-    values(values) {
-        if (values === null) {
-            this._values = undefined;
-            return this;
-        }
-        this._values = values;
-        return this;
-    }
-    _build(dimension) {
-        return new QuantitativeTicks({
-            class: this._class,
-            count: this._count,
-            fontSize: this._fontSize,
-            format: this._format,
-            labelsDisplay: this._labelsDisplay,
-            labelsStroke: this._labelsStroke,
-            labelsStrokeOpacity: this._labelsStrokeOpacity,
-            labelsStrokeWidth: this._labelsStrokeWidth,
-            marksDisplay: this._marksDisplay,
-            rotate: this._rotate,
-            size: this._size,
-            sizeInner: this._sizeInner,
-            sizeOuter: this._sizeOuter,
-            spacing: this._spacing,
-            values: this._values,
-            wrap: this.wrapBuilder?._build(dimension),
-        });
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    getTransition(selection) {
+        const transitionDuration = this.isFirstDraw
+            ? 0
+            : this.getTransitionDuration();
+        return selection.transition().duration(transitionDuration);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XyAxis, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: XyAxis, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XyAxis, decorators: [{
+            type: Directive
+        }] });
 
-class XyAxisConfig extends AuxMarksConfig {
-    getValidatedNumTicks(numTicks) {
-        if (numTicks < 1) {
-            return 1;
+function ordinalAxisMixin(Base) {
+    class Mixin extends Base {
+        setTicks(tickFormat) {
+            this.axis.tickFormat((d) => {
+                const formatter = d instanceof Date ? utcFormat : format;
+                return typeof tickFormat === 'function'
+                    ? tickFormat(d)
+                    : formatter(tickFormat)(d);
+            });
         }
-        return Math.floor(numTicks);
     }
+    return Mixin;
 }
 
 function mixinOrdinalAxisConfig(Base) {
@@ -1659,18 +1498,157 @@ 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) {
 }
 
-function mixinXAxisConfig(Base) {
+function quantitativeAxisMixin(Base) {
+    class Mixin extends Base {
+        setTicks(tickFormat) {
+            if (this.config.ticks.values) {
+                this.setSpecifiedTickValues(tickFormat);
+            }
+            else {
+                this.setUnspecifiedTickValues(tickFormat);
+            }
+        }
+        setSpecifiedTickValues(tickFormat) {
+            const validTickValues = this.getValidTickValues();
+            this.axis.tickValues(validTickValues);
+            this.axis.tickFormat((d) => {
+                const formatter = d instanceof Date ? utcFormat : format;
+                return typeof tickFormat === 'function'
+                    ? tickFormat(d)
+                    : formatter(tickFormat)(d);
+            });
+        }
+        getValidTickValues() {
+            const domain = this.scale.domain();
+            const validValues = [];
+            this.config.ticks.values.forEach((value) => {
+                if (domain[0] <= value && value <= domain[1]) {
+                    validValues.push(value);
+                }
+            });
+            return validValues;
+        }
+        setUnspecifiedTickValues(tickFormat) {
+            const validNumTicks = this.getSuggestedNumTicks(tickFormat);
+            this.axis.ticks(validNumTicks);
+            this.axis.tickFormat((d) => {
+                const formatter = d instanceof Date ? utcFormat : format;
+                return typeof tickFormat === 'function'
+                    ? tickFormat(d)
+                    : formatter(tickFormat)(d);
+            });
+        }
+        getSuggestedNumTicks(tickFormat) {
+            let numSuggestedTicks = this.getNumTicks();
+            if (typeof tickFormat === 'string' &&
+                typeof numSuggestedTicks === 'number') {
+                numSuggestedTicks = Math.round(numSuggestedTicks);
+                if (this.scale.domain()[0] instanceof Date) {
+                    const maxTicks = this.getMaxTicksForDateFormat(tickFormat);
+                    if (maxTicks !== null) {
+                        return Math.min(numSuggestedTicks, maxTicks);
+                    }
+                }
+                if (tickFormat.includes('.')) {
+                    return this.getValidNumTicksForNumberFormatString(numSuggestedTicks, tickFormat);
+                }
+                return numSuggestedTicks;
+            }
+            else {
+                return numSuggestedTicks;
+            }
+        }
+        getNumTicks() {
+            return (this.config.ticks.count ||
+                this.config.getNumTicksBySpacing(this.config.ticks.spacing, {
+                    height: this.chart.config.height,
+                    width: this.chart.config.width,
+                }));
+        }
+        getValidNumTicksForNumberFormatString(numTicks, tickFormat) {
+            let numDecimalPlaces = Number(tickFormat.split('.')[1][0]);
+            if (tickFormat.includes('%')) {
+                numDecimalPlaces = numDecimalPlaces + 2;
+            }
+            const [start, end] = this.scale.domain();
+            const range = end - start;
+            const minStep = Math.pow(10, -1 * numDecimalPlaces);
+            const rawCount = range / minStep;
+            const numValidTicks = Math.round(rawCount);
+            if (numTicks < numValidTicks) {
+                return numTicks;
+            }
+            else {
+                return numValidTicks;
+            }
+        }
+        getMaxTicksForDateFormat(tickFormat) {
+            const [startDate, endDate] = this.scale.domain();
+            // Year-only formatters: %Y, %y
+            if (tickFormat === '%Y' || tickFormat === '%y') {
+                const startYear = startDate.getUTCFullYear();
+                const endYear = endDate.getUTCFullYear();
+                return endYear - startYear + 1;
+            }
+            // Quarter formatter: %Y Q%q
+            if (tickFormat === '%Y Q%q') {
+                const startYear = startDate.getUTCFullYear();
+                const startQuarter = Math.floor(startDate.getUTCMonth() / 3);
+                const endYear = endDate.getUTCFullYear();
+                const endQuarter = Math.floor(endDate.getUTCMonth() / 3);
+                return (endYear - startYear) * 4 + (endQuarter - startQuarter) + 1;
+            }
+            // Month-year formatters: %B %Y, %b %Y
+            if (tickFormat === '%B %Y' || tickFormat === '%b %Y') {
+                const startYear = startDate.getUTCFullYear();
+                const startMonth = startDate.getUTCMonth();
+                const endYear = endDate.getUTCFullYear();
+                const endMonth = endDate.getUTCMonth();
+                return (endYear - startYear) * 12 + (endMonth - startMonth) + 1;
+            }
+            // Full date formatters: %B %d, %Y
+            if (tickFormat === '%B %d, %Y' ||
+                tickFormat === '%m/%d/%Y' ||
+                tickFormat === '%Y-%m-%d') {
+                const timeDiff = endDate.getTime() - startDate.getTime();
+                const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
+                return daysDiff + 1;
+            }
+            // Additional common time formatters for completeness
+            // Month formatters: %B (full month), %b (abbreviated), %m (numeric)
+            if (tickFormat === '%B' || tickFormat === '%b' || tickFormat === '%m') {
+                const startYear = startDate.getUTCFullYear();
+                const startMonth = startDate.getUTCMonth();
+                const endYear = endDate.getUTCFullYear();
+                const endMonth = endDate.getUTCMonth();
+                return (endYear - startYear) * 12 + (endMonth - startMonth) + 1;
+            }
+            // Day formatters: %d (day of month), %e (day of month with space), %j (day of year)
+            if (tickFormat === '%d' || tickFormat === '%e' || tickFormat === '%j') {
+                const timeDiff = endDate.getTime() - startDate.getTime();
+                const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
+                return daysDiff + 1;
+            }
+            // Week formatters: %U, %W (week of year)
+            if (tickFormat === '%U' || tickFormat === '%W') {
+                const timeDiff = endDate.getTime() - startDate.getTime();
+                const weeksDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24 * 7));
+                return weeksDiff + 1;
+            }
+            // For composite formats or unrecognized formats, return null to use default logic
+            return null;
+        }
+    }
+    return Mixin;
+}
+
+function mixinQuantitativeAxisConfig(Base) {
     class Mixin extends Base {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         constructor(...args) {
@@ -1679,332 +1657,420 @@ function mixinXAxisConfig(Base) {
                 safeAssign(this, args[0]);
             }
         }
-        getNumTicksBySpacing(spacing, dimensions) {
-            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) {
+class VicQuantitativeAxisConfig extends mixinQuantitativeAxisConfig(XyAxisConfig) {
 }
 
-const AbstractXOrdinalAxis = mixinXAxisConfig(mixinOrdinalAxisConfig(XyAxisConfig));
-class VicXOrdinalAxisConfig extends AbstractXOrdinalAxis {
+/**
+ * A config that specifies how axis tick labels should wrap.
+ */
+class TickWrap {
     constructor(options) {
-        super(options);
+        safeAssign(this, options);
     }
 }
 
-const DEFAULT$y = {
-    _side: 'bottom',
-    _baseline: {
-        display: false,
-    },
-};
-const TICK_DEFAULT$1 = {
-    _sizeOuter: 0,
+const DEFAULT$A = {
+    _wrapWidth: 'bandwidth',
+    _lineHeight: 1.1,
 };
-class VicXOrdinalAxisConfigBuilder extends XyAxisBaseBuilder {
+class TickWrapBuilder {
     constructor() {
-        super();
-        safeAssign(this, DEFAULT$y);
-        this.ticksBuilder = this.getTicksBuilder();
+        safeAssign(this, DEFAULT$A);
     }
     /**
-     * OPTIONAL. Specifies the location of the axis on the chart.
-     *
-     * @param value - The side of the chart where the axis will be placed.
+     * OPTIONAL. Sets the characters to break on when wrapping text.
+     * By default, text will only break on spaces.
      *
-     * If not called, the default value is `bottom`.
+     * @default []
      */
-    side(value) {
-        this._side = value;
+    breakOnChars(breakOnChars) {
+        this._breakOnChars = breakOnChars;
         return this;
     }
-    ticks(ticks) {
-        this.ticksBuilder = this.getTicksBuilder();
-        if (ticks === null) {
+    /**
+     * OPTIONAL. Sets the line-height property of the tick labels. Adjusting the line-height can useful when wrapping labels, particularly on a y-axis.
+     *
+     * @param value - The line-height of the tick labels, as a multiplier of the font size. For example, 1.1 is 110% of the font size, 1.5 is 150% of the font size, etc.
+     */
+    lineHeight(value) {
+        if (value === null) {
+            this._lineHeight = undefined;
             return this;
         }
-        ticks?.(this.ticksBuilder);
+        this._lineHeight = value;
         return this;
     }
-    getTicksBuilder() {
-        return new TicksBuilder(TICK_DEFAULT$1);
+    /**
+     * OPTIONAL. If true, the x position of the text will be maintained.
+     *
+     * This is useful, for example, for centering bar labels on a vertical bar chart.
+     *
+     * @default false
+     */
+    maintainXPosition(maintainXPosition) {
+        this._maintainXPosition = maintainXPosition;
+        return this;
     }
-    getConfig() {
-        return new VicXOrdinalAxisConfig({
-            baseline: this.baselineBuilder?._build('ordinal'),
-            grid: this.gridBuilder?._build('x', 'ordinal'),
-            label: this.labelBuilder?._build('x'),
-            marksClass: 'vic-axis-x-ordinal',
-            mixBlendMode: this._mixBlendMode,
-            side: this._side,
-            ticks: this.ticksBuilder._build('x'),
+    /**
+     * OPTIONAL. If true, the y position of the text will be maintained.
+     *
+     * This is useful, for example, for centering bar labels on a horizontal bar chart.
+     *
+     * @default false
+     */
+    maintainYPosition(maintainYPosition) {
+        this._maintainYPosition = maintainYPosition;
+        return this;
+    }
+    /**
+     * OPTIONAL. If true, spaces will be added around break characters.
+     *
+     * This is useful when breaking on punctuation characters, to avoid words being stuck to punctuation.
+     * For example, breaking on commas without spaces around them would result in "word," at the end of one line and "word" at the start of the next line.
+     *
+     * @default false
+     */
+    spaceAroundBreakChars(spaceAroundBreakChars) {
+        this._spaceAroundBreakChars = spaceAroundBreakChars;
+        return this;
+    }
+    width(width) {
+        if (width === null) {
+            this._width = undefined;
+            return this;
+        }
+        this._width = width;
+        return this;
+    }
+    /**
+     * @internal Not meant to be called by consumers of the library.
+     */
+    _build(dimension) {
+        this.validate(dimension);
+        return new TickWrap({
+            width: this._width,
+            maintainXPosition: this._maintainXPosition,
+            maintainYPosition: this._maintainYPosition,
+            lineHeight: this._lineHeight,
+            breakOnChars: this._breakOnChars,
+            spaceAroundBreakChars: this._spaceAroundBreakChars,
         });
     }
-    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 }); }
+    validate(dimension) {
+        this._maintainXPosition =
+            this._maintainXPosition === undefined
+                ? dimension === 'y'
+                    ? true
+                    : false
+                : this._maintainXPosition;
+        this._maintainYPosition =
+            this._maintainYPosition === undefined
+                ? dimension === 'x'
+                    ? false
+                    : true
+                : this._maintainYPosition;
+    }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicXOrdinalAxisConfigBuilder, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
 
-/**
- * A base directive for all axes.
- */
-class XyAxis extends XyAuxMarks {
-    constructor() {
-        super(...arguments);
-        this.elRef = inject(ElementRef);
-        // used to ensure that a zero axis does not transition in position from baseline on first draw
-        this.isFirstDraw = true;
+class Ticks {
+    constructor(options) {
+        safeAssign(this, options);
     }
-    get class() {
-        return {
-            gridGroup: 'vic-grid-group',
-            gridLine: 'vic-grid-line',
-            axisGroup: 'vic-axis-group',
-            label: 'vic-axis-label',
-        };
+}
+class QuantitativeTicks extends Ticks {
+    constructor(options) {
+        super(options);
     }
-    initFromConfig() {
-        this.drawMarks();
+}
+
+const DEFAULT$z = {
+    _class: () => '',
+    _labelsDisplay: true,
+    _marksDisplay: true,
+    _remove: false,
+    _stroke: 'none',
+    _strokeOpacity: 1,
+    _strokeWidth: 3,
+};
+const QUANT_DEFAULT = {
+    _spacing: 40,
+};
+class TicksBuilder {
+    constructor(options) {
+        safeAssign(this, DEFAULT$z);
+        safeAssign(this, options);
     }
-    setAxisFromScaleAndConfig() {
-        this.axis = this.axisFunction(this.scale);
-        this.setTickSize();
-        if (this.config.ticks.format) {
-            this.setTicks(this.config.ticks.format);
+    class(value) {
+        if (value === null) {
+            this._class = DEFAULT$z._class;
+            return this;
         }
-    }
-    setTickSize() {
-        if (this.config.ticks.size !== undefined) {
-            this.axis.tickSize(this.config.ticks.size);
+        if (typeof value === 'string') {
+            this._class = () => value;
+            return this;
         }
-        else {
-            if (this.config.ticks.sizeInner !== undefined) {
-                this.axis.tickSizeInner(this.config.ticks.sizeInner);
-            }
-            if (this.config.ticks.sizeOuter !== undefined) {
-                this.axis.tickSizeOuter(this.config.ticks.sizeOuter);
-            }
+        this._class = value;
+        return this;
+    }
+    /**
+     * OPTIONAL. Sets the font size of the tick labels.
+     *
+     * @param value - The font size of the tick labels, in px.
+     *
+     * If not called, the default font size is D3's default, which is 10px.
+     */
+    fontSize(value) {
+        if (value === null) {
+            this._fontSize = undefined;
+            return this;
         }
-        const baselineTranslate = this.getBaselineTranslate();
-        if (baselineTranslate) {
-            this.axis.tickSizeOuter(0);
+        this._fontSize = value;
+        return this;
+    }
+    format(format) {
+        if (format === null) {
+            this._format = undefined;
+            return this;
         }
+        this._format = format;
+        return this;
     }
-    drawMarks() {
-        this.setAxisFunction();
-        this.setTranslate();
-        this.setScale();
-        this.setAxisFromScaleAndConfig();
-        this.drawAxis();
-        this.isFirstDraw = false;
+    /**
+     * OPTIONAL. If false, tick labels will be removed.
+     *
+     * @param value - `true` to retain all tick labels, `false` to remove all tick labels.
+     *
+     * If not called, the default value is `true`.
+     */
+    labelsDisplay(value) {
+        this._labelsDisplay = value;
+        return this;
     }
-    drawAxis() {
-        if (!this.axisGroup) {
-            this.axisGroup = select(this.elRef.nativeElement)
-                .append('g')
-                .attr('class', this.class.axisGroup);
+    /**
+     * OPTIONAL. Sets the color of the stroke around the tick labels. Often used to improve the legibility of tick labels, for example, on dark backgrounds.
+     *
+     * @param value - The stroke of the tick labels.
+     *
+     * If not called, the default value is 'none'.
+     */
+    labelsStroke(value) {
+        if (value === null) {
+            this._labelsStroke = DEFAULT$z._stroke;
+            return this;
         }
-        // Avoid odd animations of ticks or domain lines when those things move between draws
-        this.axisGroup.select('.domain').remove();
-        this.axisGroup.selectAll('.tick').remove();
-        this.axisGroup
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            .transition(this.getTransition(this.axisGroup))
-            .call(this.axis)
-            .on('end', () => {
-            this.processTicks();
-            this.processDomain();
-            this.drawGrid();
-        });
-        this.processTickLabels();
-        if (this.config.label) {
-            this.createLabel();
+        this._labelsStroke = value;
+        return this;
+    }
+    /**
+     * OPTIONAL. Sets the opacity of the stroke applied around the tick labels.
+     *
+     * @param value - The opacity of the stroke around the tick labels.
+     *
+     * If not called, the default value is 1.
+     */
+    labelsStrokeOpacity(value) {
+        if (value === null) {
+            this._labelsStrokeOpacity = undefined;
+            return this;
         }
+        this._labelsStrokeOpacity = value;
+        return this;
     }
-    processTicks() {
-        const tickText = select(this.elRef.nativeElement).selectAll('.tick text');
-        if (this.config.ticks.class) {
-            select(this.elRef.nativeElement)
-                .selectAll('.tick')
-                .each((d, i, nodes) => {
-                const labelClass = this.config.ticks.class(d);
-                if (labelClass) {
-                    select(nodes[i]).classed(labelClass, true);
-                }
-                else {
-                    ///remove any previous class
-                    select(nodes[i]).attr('class', 'tick');
-                }
-            });
-        }
-        if (this.config.ticks.fontSize) {
-            this.setTickFontSize(tickText);
-        }
-        // TODO: Determine if this needs to be called from the on('end') of the axisGroup transition
-        // or if if should be moved to processTickLabels. I think there is a reason it is here. (?)
-        if (this.config.ticks.wrap && this.config.ticks.wrap.width !== undefined) {
-            this.wrapAxisTickText(tickText);
-        }
-        if (this.config.ticks.marksDisplay === false) {
-            const marks = select(this.elRef.nativeElement).selectAll('.tick line');
-            marks.remove();
+    /**
+     * OPTIONAL. Sets the width of the stroke around the tick labels. Often used to improve the legibility of tick labels, for example, on dark backgrounds.
+     *
+     * @param value - The width of the stroke around the tick labels.
+     *
+     * If not called, the default value is 3.
+     */
+    labelsStrokeWidth(value) {
+        if (value === null) {
+            this._labelsStrokeWidth = undefined;
+            return this;
         }
+        this._labelsStrokeWidth = value;
+        return this;
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    setTickFontSize(tickTextSelection) {
-        tickTextSelection.attr('font-size', this.config.ticks.fontSize);
+    /**
+     * OPTIONAL. If false, tick marks (lines) will be removed.
+     *
+     * @param value - `true` to retain all tick marks, `false` to remove all tick marks.
+     *
+     * If not called, the default value is `true`.
+     */
+    marksDisplay(value) {
+        this._marksDisplay = value;
+        return this;
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    wrapAxisTickText(tickTextSelection) {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { width, ...properties } = this.config.ticks.wrap;
-        let wrapWidth;
-        if (this.config.ticks.wrap.width === 'bandwidth') {
-            wrapWidth = this.scale.bandwidth();
-        }
-        else if (typeof this.config.ticks.wrap.width === 'function') {
-            const chartWidth = this.scale.range()[1] - this.scale.range()[0];
-            const numOfTicks = select(this.elRef.nativeElement)
-                .selectAll('.tick')
-                .size();
-            wrapWidth = this.config.ticks.wrap.width(chartWidth, numOfTicks);
-        }
-        else {
-            wrapWidth = this.config.ticks.wrap.width;
+    /**
+     * OPTIONAL. Determines the rotation of tick labels.
+     *
+     * @param value - The rotation of the tick labels in degrees, or `null` to unset the rotation.
+     *
+     * Positive values rotate clockwise, negative values rotate counterclockwise.
+     *
+     * If not called, ticks will not be rotated.
+     */
+    rotate(value) {
+        if (value === null) {
+            this._rotate = undefined;
+            return this;
         }
-        const wrap = new SvgTextWrap({ ...properties, width: wrapWidth });
-        wrap.wrap(tickTextSelection);
+        this._rotate = value;
+        return this;
     }
-    processDomain() {
-        const zeroAxisTranslate = this.getBaselineTranslate();
-        if (this.config.baseline.zeroBaseline.display &&
-            zeroAxisTranslate !== null) {
-            this.axisGroup.call((g) => g
-                .select('.domain')
-                .attr('transform', zeroAxisTranslate)
-                .attr('class', 'domain baseline zero-axis-baseline')
-                .attr('stroke-dasharray', this.config.baseline.zeroBaseline.dasharray));
-        }
-        if (zeroAxisTranslate === null) {
-            this.axisGroup.call((g) => g
-                .select('.domain')
-                .attr('class', 'domain baseline')
-                .attr('transform', null)
-                .attr('stroke-dasharray', null));
-        }
-        if (!this.config.baseline.display && zeroAxisTranslate === null) {
-            this.axisGroup.call((g) => g.select('.domain').remove());
+    /**
+     * OPTIONAL. Sets the size of inner and outer tick marks.
+     *
+     * @param value - The size of the ticks, in px.
+     *
+     * If not called or called with `null`, the default size is the D3 default size.
+     *
+     * If specified, this value will override any values set by `sizeInner` or `sizeOuter`.
+     */
+    size(value) {
+        if (value === null) {
+            this._size = undefined;
+            return this;
         }
+        this._size = value;
+        return this;
     }
-    processTickLabels() {
-        if (this.config.ticks.labelsDisplay === false) {
-            this.axisGroup.call((g) => g.selectAll('.tick text').remove());
-        }
-        if (this.config.ticks.rotate) {
-            this.axisGroup.call((g) => g
-                .selectAll('.tick text')
-                .style('transform', `rotate(-${this.config.ticks.rotate}deg)`)
-                .attr('text-anchor', 'end')
-                .attr('alignment-baseline', 'start'));
-        }
-        if (this.config.ticks.labelsStroke ||
-            this.config.ticks.labelsStrokeOpacity ||
-            this.config.ticks.labelsStrokeWidth) {
-            this.axisGroup.call((g) => g
-                .selectAll('.tick text')
-                .attr('stroke', this.config.ticks.labelsStroke)
-                .attr('stroke-opacity', this.config.ticks.labelsStrokeOpacity)
-                .attr('stroke-width', this.config.ticks.labelsStrokeWidth));
+    /**
+     * OPTIONAL. Determines the length of the inner ticks drawn by D3. Does not apply to the outermost ticks.
+     *
+     * @param value - The length of the inner ticks in pixels, or `null` to unset the value.
+     *
+     * If not called or called with `null`, the default value is the D3 default size.
+     *
+     */
+    sizeInner(value) {
+        if (value === null) {
+            this._sizeInner = undefined;
+            return this;
         }
+        this._sizeInner = value;
+        return this;
     }
-    otherAxisHasPosAndNegValues(dimension) {
-        const otherDimension = dimension === 'x' ? 'y' : 'x';
-        const domain = this.scales[otherDimension].domain();
-        if (domain.length > 2 || isNaN(domain[0]) || isNaN(domain[1])) {
-            return false;
+    /**
+     * OPTIONAL. Determines the length of the square ends of the domain path drawn by D3.
+     *
+     * @param value - The length of the square ends of the domain path in pixels, or `null` to unset the value.
+     *
+     * If not called on ordinal axes, the default value is 0. If not called on quantitative axes, no modification is made to D3's default value.
+     */
+    sizeOuter(value) {
+        if (value === null) {
+            this._sizeOuter = undefined;
+            return this;
         }
-        return domain[0] < 0 && domain[1] > 0;
+        this._sizeOuter = value;
+        return this;
     }
-    drawGrid() {
-        if (this.config.grid) {
-            if (!this.gridGroup) {
-                this.gridGroup = select(this.elRef.nativeElement)
-                    .append('g')
-                    .attr('class', this.class.gridGroup);
-            }
-            this.gridGroup
-                .transition(this.getTransition(this.gridGroup))
-                .call(this.axis.tickSizeInner(this.getGridLineLength()))
-                .selectAll('.tick')
-                .attr('class', `tick ${this.class.gridLine}`)
-                .style('display', (_, i) => this.config.grid.filter(i) ? null : 'none')
-                .select('line')
-                .attr('stroke', this.config.grid.stroke.color)
-                .attr('stroke-dasharray', this.config.grid.stroke.dasharray)
-                .attr('stroke-width', this.config.grid.stroke.width)
-                .attr('opacity', this.config.grid.stroke.opacity)
-                .attr('stroke-linecap', this.config.grid.stroke.linecap)
-                .attr('stroke-linejoin', this.config.grid.stroke.linejoin);
-            this.gridGroup.call((g) => {
-                g.selectAll('text').remove();
-                g.selectAll('.domain').remove();
-            });
-        }
-        else {
-            select(this.elRef.nativeElement)
-                .select(`.${this.class.gridGroup}`)
-                .remove();
-            this.gridGroup = undefined;
+    wrap(wrap) {
+        if (wrap === null) {
+            this.wrapBuilder = undefined;
+            return this;
         }
+        this.wrapBuilder = new TickWrapBuilder();
+        wrap(this.wrapBuilder);
+        return this;
     }
-    getGridLineLength() {
-        const gridLineScale = this.config.grid.axis === 'x' ? this.scales.y : this.scales.x;
-        return -1 * Math.abs(gridLineScale.range()[1] - gridLineScale.range()[0]);
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    getTransition(selection) {
-        const transitionDuration = this.isFirstDraw
-            ? 0
-            : this.getTransitionDuration();
-        return selection.transition().duration(transitionDuration);
+    _build(dimension) {
+        return new Ticks({
+            class: this._class,
+            fontSize: this._fontSize,
+            format: this._format,
+            labelsDisplay: this._labelsDisplay,
+            labelsStroke: this._labelsStroke,
+            labelsStrokeOpacity: this._labelsStrokeOpacity,
+            labelsStrokeWidth: this._labelsStrokeWidth,
+            marksDisplay: this._marksDisplay,
+            rotate: this._rotate,
+            size: this._size,
+            sizeInner: this._sizeInner,
+            sizeOuter: this._sizeOuter,
+            wrap: this.wrapBuilder?._build(dimension),
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: XyAxis, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: XyAxis, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: XyAxis, decorators: [{
-            type: Directive
-        }] });
-
-function ordinalAxisMixin(Base) {
-    class Mixin extends Base {
-        setTicks(tickFormat) {
-            this.axis.tickFormat((d) => {
-                const formatter = d instanceof Date ? utcFormat : format;
-                return typeof tickFormat === 'function'
-                    ? tickFormat(d)
-                    : formatter(tickFormat)(d);
-            });
+class QuantitativeTicksBuilder extends TicksBuilder {
+    constructor(options) {
+        super(options);
+        safeAssign(this, DEFAULT$z);
+        safeAssign(this, QUANT_DEFAULT);
+    }
+    /**
+     * OPTIONAL. Approximately specifies the number of ticks for the axis.
+     *
+     * @param value - The number of ticks to pass to D3's axis.ticks(), or null to unset the number of ticks.
+     *
+     * If not called, a reasonable and valid default will be used based on the size of the chart.
+     *
+     * Note that this number will be passed to D3's `ticks()` method and therefore it can be an approximate number of ticks.
+     *
+     * If this method is called, the passed in number of ticks will be validated against the data domain and the value formatter for the axis. If the number of ticks is not valid—for example, if the ticks are formatted with %Y and there are three years of values in the data, and this method is called with 10, a valid number will be used instead.
+     */
+    count(value) {
+        if (value === null) {
+            this._count = undefined;
+            return this;
+        }
+        this._count = value;
+        return this;
+    }
+    /**
+     * OPTIONAL. Specifies the an approximate spacing between ticks, in pixels.
+     *
+     * @param value - The spacing between ticks in pixels, or null to unset the spacing.
+     *
+     * If not called, the default value is 40. If `count` is set, this value will be ignored.
+     */
+    spacing(value) {
+        if (value === null) {
+            this._spacing = undefined;
+            return this;
         }
-        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 }); }
+        this._spacing = value;
+        return this;
+    }
+    /**
+     * OPTIONAL. Determines the values that will show up as ticks on the axis.
+     *
+     * @param values - An array of quantitative values to pass to D3's axis.tickValues(), or null to unset the tick values.
+     *
+     */
+    values(values) {
+        if (values === null) {
+            this._values = undefined;
+            return this;
+        }
+        this._values = values;
+        return this;
+    }
+    _build(dimension) {
+        return new QuantitativeTicks({
+            class: this._class,
+            count: this._count,
+            fontSize: this._fontSize,
+            format: this._format,
+            labelsDisplay: this._labelsDisplay,
+            labelsStroke: this._labelsStroke,
+            labelsStrokeOpacity: this._labelsStrokeOpacity,
+            labelsStrokeWidth: this._labelsStrokeWidth,
+            marksDisplay: this._marksDisplay,
+            rotate: this._rotate,
+            size: this._size,
+            sizeInner: this._sizeInner,
+            sizeOuter: this._sizeOuter,
+            spacing: this._spacing,
+            values: this._values,
+            wrap: this.wrapBuilder?._build(dimension),
+        });
     }
-    i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Mixin, decorators: [{
-                type: Directive
-            }], propDecorators: { config: [{
-                    type: Input
-                }] } });
-    return Mixin;
 }
 
 function xAxisMixin(Base) {
@@ -2085,33 +2151,11 @@ 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 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: XOrdinalAxisComponent, decorators: [{
-            type: Component,
-            args: [{ selector: '[vic-x-ordinal-axis]', template: '', inputs: ['config'], encapsulation: ViewEncapsulation.None, host: {
-                        '[class]': 'config.marksClass',
-                        class: 'vic-axis',
-                        '[attr.mix-blend-mode]': 'config.mixBlendMode',
-                        '[attr.transform]': 'translate',
-                    }, styles: [".vic-axis-x-ordinal .vic-axis-label{fill:currentColor}\n"] }]
-        }] });
-
-function mixinQuantitativeAxisConfig(Base) {
+function mixinXAxisConfig(Base) {
     class Mixin extends Base {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         constructor(...args) {
@@ -2120,235 +2164,160 @@ 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) {
-}
-
-const AbstractXQuantitativeAxis = mixinXAxisConfig(mixinQuantitativeAxisConfig(XyAxisConfig));
-class VicXQuantitativeAxisConfig extends AbstractXQuantitativeAxis {
-    constructor(options) {
-        super(options);
-    }
-}
-
-const DEFAULT$x = {
-    _side: 'bottom',
-    _removeDomainLine: false,
-    _zeroAxis: { strokeDasharray: '2', useZeroAxis: true },
-};
-const TICK_DEFAULT = {
-    _format: ',.1f',
-};
-class VicXQuantitativeAxisConfigBuilder extends XyAxisBaseBuilder {
-    constructor() {
-        super();
-        safeAssign(this, DEFAULT$x);
-        this.ticksBuilder = this.getTicksBuilder();
-    }
-    /**
-     * OPTIONAL. Specifies the location of the axis on the chart.
-     *
-     * @param value - The side of the chart where the axis will be placed.
-     *
-     * If not called, the default value is `bottom`.
-     */
-    side(value) {
-        this._side = value;
-        return this;
-    }
-    ticks(ticks) {
-        this.ticksBuilder = this.getTicksBuilder();
-        if (ticks === null) {
-            return this;
+        getNumTicksBySpacing(spacing, dimensions) {
+            const d3SuggestedDefault = dimensions.width / spacing;
+            return this.getValidatedNumTicks(d3SuggestedDefault);
         }
-        ticks?.(this.ticksBuilder);
-        return this;
-    }
-    getTicksBuilder() {
-        return new QuantitativeTicksBuilder(TICK_DEFAULT);
-    }
-    getConfig() {
-        return new VicXQuantitativeAxisConfig({
-            baseline: this.baselineBuilder._build('quantitative'),
-            grid: this.gridBuilder?._build('x', 'quantitative'),
-            label: this.labelBuilder?._build('x'),
-            marksClass: 'vic-axis-x-quantitative',
-            mixBlendMode: this._mixBlendMode,
-            side: this._side,
-            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 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicXQuantitativeAxisConfigBuilder, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
-function quantitativeAxisMixin(Base) {
-    class Mixin extends Base {
-        setTicks(tickFormat) {
-            if (this.config.ticks.values) {
-                this.setSpecifiedTickValues(tickFormat);
-            }
-            else {
-                this.setUnspecifiedTickValues(tickFormat);
-            }
-        }
-        setSpecifiedTickValues(tickFormat) {
-            const validTickValues = this.getValidTickValues();
-            this.axis.tickValues(validTickValues);
-            this.axis.tickFormat((d) => {
-                const formatter = d instanceof Date ? utcFormat : format;
-                return typeof tickFormat === 'function'
-                    ? tickFormat(d)
-                    : formatter(tickFormat)(d);
-            });
-        }
-        getValidTickValues() {
-            const domain = this.scale.domain();
-            const validValues = [];
-            this.config.ticks.values.forEach((value) => {
-                if (domain[0] <= value && value <= domain[1]) {
-                    validValues.push(value);
-                }
-            });
-            return validValues;
-        }
-        setUnspecifiedTickValues(tickFormat) {
-            const validNumTicks = this.getSuggestedNumTicks(tickFormat);
-            this.axis.ticks(validNumTicks);
-            this.axis.tickFormat((d) => {
-                const formatter = d instanceof Date ? utcFormat : format;
-                return typeof tickFormat === 'function'
-                    ? tickFormat(d)
-                    : formatter(tickFormat)(d);
-            });
-        }
-        getSuggestedNumTicks(tickFormat) {
-            let numSuggestedTicks = this.getNumTicks();
-            if (typeof tickFormat === 'string' &&
-                typeof numSuggestedTicks === 'number') {
-                numSuggestedTicks = Math.round(numSuggestedTicks);
-                if (this.scale.domain()[0] instanceof Date) {
-                    const maxTicks = this.getMaxTicksForDateFormat(tickFormat);
-                    if (maxTicks !== null) {
-                        return Math.min(numSuggestedTicks, maxTicks);
-                    }
-                }
-                if (tickFormat.includes('.')) {
-                    return this.getValidNumTicksForNumberFormatString(numSuggestedTicks, tickFormat);
-                }
-                return numSuggestedTicks;
-            }
-            else {
-                return numSuggestedTicks;
-            }
-        }
-        getNumTicks() {
-            return (this.config.ticks.count ||
-                this.config.getNumTicksBySpacing(this.config.ticks.spacing, {
-                    height: this.chart.config.height,
-                    width: this.chart.config.width,
-                }));
-        }
-        getValidNumTicksForNumberFormatString(numTicks, tickFormat) {
-            let numDecimalPlaces = Number(tickFormat.split('.')[1][0]);
-            if (tickFormat.includes('%')) {
-                numDecimalPlaces = numDecimalPlaces + 2;
-            }
-            const [start, end] = this.scale.domain();
-            const range = end - start;
-            const minStep = Math.pow(10, -1 * numDecimalPlaces);
-            const rawCount = range / minStep;
-            const numValidTicks = Math.round(rawCount);
-            if (numTicks < numValidTicks) {
-                return numTicks;
-            }
-            else {
-                return numValidTicks;
-            }
-        }
-        getMaxTicksForDateFormat(tickFormat) {
-            const [startDate, endDate] = this.scale.domain();
-            // Year-only formatters: %Y, %y
-            if (tickFormat === '%Y' || tickFormat === '%y') {
-                const startYear = startDate.getUTCFullYear();
-                const endYear = endDate.getUTCFullYear();
-                return endYear - startYear + 1;
-            }
-            // Quarter formatter: %Y Q%q
-            if (tickFormat === '%Y Q%q') {
-                const startYear = startDate.getUTCFullYear();
-                const startQuarter = Math.floor(startDate.getUTCMonth() / 3);
-                const endYear = endDate.getUTCFullYear();
-                const endQuarter = Math.floor(endDate.getUTCMonth() / 3);
-                return (endYear - startYear) * 4 + (endQuarter - startQuarter) + 1;
-            }
-            // Month-year formatters: %B %Y, %b %Y
-            if (tickFormat === '%B %Y' || tickFormat === '%b %Y') {
-                const startYear = startDate.getUTCFullYear();
-                const startMonth = startDate.getUTCMonth();
-                const endYear = endDate.getUTCFullYear();
-                const endMonth = endDate.getUTCMonth();
-                return (endYear - startYear) * 12 + (endMonth - startMonth) + 1;
-            }
-            // Full date formatters: %B %d, %Y
-            if (tickFormat === '%B %d, %Y' ||
-                tickFormat === '%m/%d/%Y' ||
-                tickFormat === '%Y-%m-%d') {
-                const timeDiff = endDate.getTime() - startDate.getTime();
-                const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
-                return daysDiff + 1;
-            }
-            // Additional common time formatters for completeness
-            // Month formatters: %B (full month), %b (abbreviated), %m (numeric)
-            if (tickFormat === '%B' || tickFormat === '%b' || tickFormat === '%m') {
-                const startYear = startDate.getUTCFullYear();
-                const startMonth = startDate.getUTCMonth();
-                const endYear = endDate.getUTCFullYear();
-                const endMonth = endDate.getUTCMonth();
-                return (endYear - startYear) * 12 + (endMonth - startMonth) + 1;
-            }
-            // Day formatters: %d (day of month), %e (day of month with space), %j (day of year)
-            if (tickFormat === '%d' || tickFormat === '%e' || tickFormat === '%j') {
-                const timeDiff = endDate.getTime() - startDate.getTime();
-                const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
-                return daysDiff + 1;
-            }
-            // Week formatters: %U, %W (week of year)
-            if (tickFormat === '%U' || tickFormat === '%W') {
-                const timeDiff = endDate.getTime() - startDate.getTime();
-                const weeksDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24 * 7));
-                return weeksDiff + 1;
-            }
-            // For composite formats or unrecognized formats, return null to use default logic
-            return null;
+    return Mixin;
+}
+class XAxisConfig extends mixinXAxisConfig(XyAxisConfig) {
+}
+
+const AbstractXOrdinalAxis = mixinXAxisConfig(mixinOrdinalAxisConfig(XyAxisConfig));
+class VicXOrdinalAxisConfig extends AbstractXOrdinalAxis {
+    constructor(options) {
+        super(options);
+    }
+}
+
+const DEFAULT$y = {
+    _side: 'bottom',
+    _baseline: {
+        display: false,
+    },
+};
+const TICK_DEFAULT$1 = {
+    _sizeOuter: 0,
+};
+class VicXOrdinalAxisConfigBuilder extends XyAxisBaseBuilder {
+    constructor() {
+        super();
+        safeAssign(this, DEFAULT$y);
+        this.ticksBuilder = this.getTicksBuilder();
+    }
+    /**
+     * OPTIONAL. Specifies the location of the axis on the chart.
+     *
+     * @param value - The side of the chart where the axis will be placed.
+     *
+     * If not called, the default value is `bottom`.
+     */
+    side(value) {
+        this._side = value;
+        return this;
+    }
+    ticks(ticks) {
+        this.ticksBuilder = this.getTicksBuilder();
+        if (ticks === null) {
+            return this;
         }
-        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 }); }
+        ticks?.(this.ticksBuilder);
+        return this;
     }
-    i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Mixin, decorators: [{
-                type: Directive
-            }], propDecorators: { config: [{
-                    type: Input
-                }] } });
-    return Mixin;
+    getTicksBuilder() {
+        return new TicksBuilder(TICK_DEFAULT$1);
+    }
+    getConfig() {
+        return new VicXOrdinalAxisConfig({
+            baseline: this.baselineBuilder?._build('ordinal'),
+            grid: this.gridBuilder?._build('x', 'ordinal'),
+            label: this.labelBuilder?._build('x'),
+            marksClass: 'vic-axis-x-ordinal',
+            mixBlendMode: this._mixBlendMode,
+            side: this._side,
+            ticks: this.ticksBuilder._build('x'),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXOrdinalAxisConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXOrdinalAxisConfigBuilder }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXOrdinalAxisConfigBuilder, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+const XOrdinalAxis = xAxisMixin(ordinalAxisMixin((XyAxis)));
+class XOrdinalAxisComponent extends XOrdinalAxis {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XOrdinalAxisComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: XOrdinalAxisComponent, isStandalone: true, selector: "[vic-x-ordinal-axis]", inputs: { config: "config" }, host: { properties: { "class": "config.marksClass", "attr.mix-blend-mode": "config.mixBlendMode", "attr.transform": "translate" }, classAttribute: "vic-axis" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [".vic-axis-x-ordinal .vic-axis-label{fill:currentColor}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+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',
+                        class: 'vic-axis',
+                        '[attr.mix-blend-mode]': 'config.mixBlendMode',
+                        '[attr.transform]': 'translate',
+                    }, styles: [".vic-axis-x-ordinal .vic-axis-label{fill:currentColor}\n"] }]
+        }] });
+
+const AbstractXQuantitativeAxis = mixinXAxisConfig(mixinQuantitativeAxisConfig(XyAxisConfig));
+class VicXQuantitativeAxisConfig extends AbstractXQuantitativeAxis {
+    constructor(options) {
+        super(options);
+    }
+}
+
+const DEFAULT$x = {
+    _side: 'bottom',
+    _removeDomainLine: false,
+    _zeroAxis: { strokeDasharray: '2', useZeroAxis: true },
+};
+const TICK_DEFAULT = {
+    _format: ',.1f',
+};
+class VicXQuantitativeAxisConfigBuilder extends XyAxisBaseBuilder {
+    constructor() {
+        super();
+        safeAssign(this, DEFAULT$x);
+        this.ticksBuilder = this.getTicksBuilder();
+    }
+    /**
+     * OPTIONAL. Specifies the location of the axis on the chart.
+     *
+     * @param value - The side of the chart where the axis will be placed.
+     *
+     * If not called, the default value is `bottom`.
+     */
+    side(value) {
+        this._side = value;
+        return this;
+    }
+    ticks(ticks) {
+        this.ticksBuilder = this.getTicksBuilder();
+        if (ticks === null) {
+            return this;
+        }
+        ticks?.(this.ticksBuilder);
+        return this;
+    }
+    getTicksBuilder() {
+        return new QuantitativeTicksBuilder(TICK_DEFAULT);
+    }
+    getConfig() {
+        return new VicXQuantitativeAxisConfig({
+            baseline: this.baselineBuilder._build('quantitative'),
+            grid: this.gridBuilder?._build('x', 'quantitative'),
+            label: this.labelBuilder?._build('x'),
+            marksClass: 'vic-axis-x-quantitative',
+            mixBlendMode: this._mixBlendMode,
+            side: this._side,
+            ticks: this.ticksBuilder._build('x'),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXQuantitativeAxisConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXQuantitativeAxisConfigBuilder }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXQuantitativeAxisConfigBuilder, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
 
 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 +2455,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 +2476,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 +2490,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 +2530,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 +2593,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 +2655,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 +3331,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 +3444,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 +3671,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 +3836,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 +3845,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 +3984,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 +4006,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 +4019,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 +4057,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 +4197,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 +4218,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],
@@ -4279,6 +4230,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                 }]
         }] });
 
+class BarsBackgrounds {
+    constructor(options) {
+        safeAssign(this, options);
+    }
+}
+
+const DEFAULT$t = {
+    _color: 'whitesmoke',
+    _events: false,
+};
+class BarsBackgroundsBuilder {
+    constructor() {
+        safeAssign(this, DEFAULT$t);
+    }
+    /**
+     * OPTIONAL. Determines the color of the background.
+     *
+     * @param value - The color of the background.
+     *
+     * If not called, the default color is 'whitesmoke'.
+     */
+    color(value) {
+        this._color = value;
+        return this;
+    }
+    /**
+     * Determines whether the background is interactive or not.
+     *
+     * @param value - If `true`, the background is interactive and will respond to Viz Components events. If `false`, the background is not interactive.
+     *
+     * If not called, the default value is `false`.
+     */
+    events(value) {
+        this._events = value;
+        return this;
+    }
+    /**
+     * @internal
+     * This function is for internal use only and should never be called by the user.
+     */
+    _build() {
+        return new BarsBackgrounds({
+            color: this._color,
+            events: this._events,
+        });
+    }
+}
+
 class DataDimensionBuilder {
     formatFunction(formatFunction) {
         if (formatFunction === null) {
@@ -4530,7 +4529,7 @@ class NumberChartPositionDimension extends NumberDimension {
     }
 }
 
-const DEFAULT$t = {
+const DEFAULT$s = {
     _includeZeroInDomain: true,
     _scaleFn: scaleLinear,
 };
@@ -4543,7 +4542,7 @@ const DEFAULT_PADDING = {
 class NumberChartPositionDimensionBuilder extends DataDimensionBuilder {
     constructor() {
         super();
-        safeAssign(this, DEFAULT$t);
+        safeAssign(this, DEFAULT$s);
     }
     domain(domain) {
         if (domain === null) {
@@ -4714,7 +4713,7 @@ class OrdinalChartPositionDimension extends DataDimension {
     }
 }
 
-const DEFAULT$s = {
+const DEFAULT$r = {
     _align: 0.5,
     _paddingInner: 0.1,
     _paddingOuter: 0.1,
@@ -4723,11 +4722,11 @@ const DEFAULT$s = {
 class OrdinalChartPositionDimensionBuilder extends DataDimensionBuilder {
     constructor() {
         super();
-        safeAssign(this, DEFAULT$s);
+        safeAssign(this, DEFAULT$r);
     }
     align(align) {
         if (align === null) {
-            this._align = DEFAULT$s._align;
+            this._align = DEFAULT$r._align;
             return this;
         }
         this._align = align;
@@ -4743,7 +4742,7 @@ class OrdinalChartPositionDimensionBuilder extends DataDimensionBuilder {
     }
     paddingInner(paddingInner) {
         if (paddingInner === null) {
-            this._paddingInner = DEFAULT$s._paddingInner;
+            this._paddingInner = DEFAULT$r._paddingInner;
             return this;
         }
         this._paddingInner = paddingInner;
@@ -4751,7 +4750,7 @@ class OrdinalChartPositionDimensionBuilder extends DataDimensionBuilder {
     }
     paddingOuter(paddingOuter) {
         if (paddingOuter === null) {
-            this._paddingOuter = DEFAULT$s._paddingOuter;
+            this._paddingOuter = DEFAULT$r._paddingOuter;
             return this;
         }
         this._paddingOuter = paddingOuter;
@@ -4833,14 +4832,14 @@ class OrdinalVisualValueDimension extends DataDimension {
     }
 }
 
-const DEFAULT$r = {
+const DEFAULT$q = {
     _range: schemeTableau10,
     _valueAccessor: () => '',
 };
 class OrdinalVisualValueDimensionBuilder extends DataDimensionBuilder {
     constructor() {
         super();
-        safeAssign(this, DEFAULT$r);
+        safeAssign(this, DEFAULT$q);
     }
     domain(domain) {
         if (domain === null) {
@@ -4852,7 +4851,7 @@ class OrdinalVisualValueDimensionBuilder extends DataDimensionBuilder {
     }
     range(range) {
         if (range === null) {
-            this._range = DEFAULT$r._range;
+            this._range = DEFAULT$q._range;
             return this;
         }
         this._range = range;
@@ -4889,54 +4888,6 @@ class OrdinalVisualValueDimensionBuilder extends DataDimensionBuilder {
     }
 }
 
-class BarsBackgrounds {
-    constructor(options) {
-        safeAssign(this, options);
-    }
-}
-
-const DEFAULT$q = {
-    _color: 'whitesmoke',
-    _events: false,
-};
-class BarsBackgroundsBuilder {
-    constructor() {
-        safeAssign(this, DEFAULT$q);
-    }
-    /**
-     * OPTIONAL. Determines the color of the background.
-     *
-     * @param value - The color of the background.
-     *
-     * If not called, the default color is 'whitesmoke'.
-     */
-    color(value) {
-        this._color = value;
-        return this;
-    }
-    /**
-     * Determines whether the background is interactive or not.
-     *
-     * @param value - If `true`, the background is interactive and will respond to Viz Components events. If `false`, the background is not interactive.
-     *
-     * If not called, the default value is `false`.
-     */
-    events(value) {
-        this._events = value;
-        return this;
-    }
-    /**
-     * @internal
-     * This function is for internal use only and should never be called by the user.
-     */
-    _build() {
-        return new BarsBackgrounds({
-            color: this._color,
-            events: this._events,
-        });
-    }
-}
-
 class BarsConfig extends XyPrimaryMarksConfig {
     constructor(dimensions, options) {
         super();
@@ -5258,10 +5209,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: () => [] });
 
@@ -5311,6 +5262,33 @@ class BarsHoverMoveEmitTooltipData {
     }
 }
 
+/**
+ * @internal
+ */
+class ResizeChartHeightPipe {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    transform(divWidth, maxHeight, maxWidth) {
+        if (typeof divWidth !== 'number') {
+            return divWidth;
+        }
+        else if (divWidth < maxWidth) {
+            const aspectRatio = maxWidth / maxHeight;
+            return divWidth / aspectRatio;
+        }
+        else {
+            return maxHeight;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ResizeChartHeightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: ResizeChartHeightPipe, isStandalone: true, name: "resizeChartHeight" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ResizeChartHeightPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'resizeChartHeight',
+                }]
+        }] });
+
 var Orientation;
 (function (Orientation) {
     Orientation["horizontal"] = "horizontal";
@@ -5335,153 +5313,6 @@ const valueFormat = {
     monthFullYear: '%B %Y',
 };
 
-class VicDataExport {
-    saveCSV(name, dataConfigs) {
-        const blobParts = [];
-        for (const dataConfig of dataConfigs) {
-            let csv;
-            let csvData = cloneDeep(dataConfig.data);
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            csvData = csvData.map((datum) => {
-                const returnObj = {};
-                for (const column of dataConfig.columns) {
-                    returnObj[column.title] = column.valueAccessor(datum);
-                    // handle common unicode character replacements
-                    // d3 format's strange default minus character https://observablehq.com/@d3/d3-format
-                    if (typeof returnObj[column.title] === 'string') {
-                        returnObj[column.title] = returnObj[column.title].replace(/\u2212/g, '-');
-                    }
-                }
-                return returnObj;
-            });
-            if (dataConfig.flipped) {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const data = csvData.reduce((acc, curr) => {
-                    for (const key in curr) {
-                        if (dataConfig.flippedHeaderKey &&
-                            key === dataConfig.flippedHeaderKey)
-                            continue;
-                        const valueToAdd = curr[key] instanceof String || typeof curr[key] === 'string'
-                            ? `"${curr[key]}"`
-                            : curr[key];
-                        if (key in acc) {
-                            acc[key] += `,${valueToAdd}`;
-                        }
-                        else {
-                            acc[key] = `${valueToAdd}`;
-                        }
-                    }
-                    return acc;
-                }, {});
-                csv = '';
-                if (dataConfig.flippedHeaderKey) {
-                    csv += ',';
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    csv += csvData.reduce((acc, curr) => {
-                        if (acc !== '') {
-                            acc += `,${curr[dataConfig.flippedHeaderKey]}`;
-                        }
-                        else {
-                            acc += `${curr[dataConfig.flippedHeaderKey]}`;
-                        }
-                        return acc;
-                    }, '');
-                }
-                for (const key of Object.keys(data)) {
-                    if (csv !== '') {
-                        csv += '\r\n';
-                    }
-                    csv += `${key},${data[key]}`;
-                }
-            }
-            else {
-                csv = unparse(csvData);
-            }
-            for (let i = 0; i < dataConfig.marginBottom; i++) {
-                csv = `${csv}\r\n`;
-            }
-            blobParts.push(csv);
-        }
-        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' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VicDataExport, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class VicColumnConfig {
-    constructor(options) {
-        safeAssign(this, options);
-    }
-}
-class VicDataExportConfig {
-    constructor(config) {
-        /**
-         * If true, the data will be flipped.
-         * Data: {a: 1, b: 2}, {a: 3, b: 4}
-         * Output CSV:
-         * a | 1 | 3
-         * b | 2 | 4
-         */
-        this.flipped = false;
-        /**
-         * Specifies the keys on each object to include in the csv,
-         * using default titles (converts thisIsAKey to This Is A Key) and values (object.thisIsAKey).
-         * Data: {myKey: 1, otherKey: 2}, {myKey: 3, otherKey: 4}
-         * defaultColumnList: [myKey]
-         * Output CSV:
-         * My Key
-         * 1
-         * 3
-         */
-        this.defaultColumnList = [];
-        /**
-         * If true, all keys from the first object in the data array
-         * are used to populate defaultColumnList
-         */
-        this.includeAllKeysAsDefault = false;
-        /**
-         * A ColumnConfig needs to be provided for any column that can't use defaults
-         * e.g. if there's a special title, the data needs to be formatted in some way,
-         * sometimes certain fields are suppressed, etc.
-         */
-        this.columns = [];
-        this.marginBottom = 0;
-        safeAssign(this, config);
-        if (this.includeAllKeysAsDefault && this.data) {
-            this.defaultColumnList = Object.keys(this.data[0]);
-        }
-        this.defaultColumnList.forEach((key) => {
-            this.columns.push(new VicColumnConfig({
-                title: key !== this.flippedHeaderKey ? this.convertToTitle(key) : key,
-                valueAccessor: (x) => x[key] instanceof Date
-                    ? ValueUtilities.d3Format(x[key], valueFormat.monthYear)
-                    : x[key],
-            }));
-        });
-    }
-    convertToTitle(key) {
-        /**
-         * Will convert:
-         * - thisString -> This String
-         * - 123String -> 123 String
-         * - 123string -> 123 string
-         * - string123 -> String 123
-         * - thisSTRING -> This STRING
-         * - thisSTRiNG -> This STRi NG
-         */
-        let converted_key = key.charAt(0).toUpperCase() +
-            key.slice(1).replace(/([a-z])([A-Z])/g, (match, p1, p2) => p1 + ' ' + p2);
-        converted_key = converted_key.replace(/([a-zA-Z])(\d+)/g, (match, p1, p2) => p1 + ' ' + p2);
-        converted_key = converted_key.replace(/(\d+)([a-zA-Z])/g, (match, p1, p2) => p1 + ' ' + p2);
-        return converted_key;
-    }
-}
-
 /**
  * A dimension that transforms Date values into a position on a chart.
  *
@@ -5662,48 +5493,195 @@ class NumberVisualValueDimensionBuilder extends DataDimensionBuilder {
             this._range = undefined;
             return this;
         }
-        this._range = range;
-        return this;
+        this._range = range;
+        return this;
+    }
+    scaleFn(scaleFn) {
+        if (scaleFn === null) {
+            this._scaleFn = undefined;
+            return this;
+        }
+        this._scaleFn = scaleFn;
+        return this;
+    }
+    scale(scale) {
+        if (scale === null) {
+            this._scale = undefined;
+            return this;
+        }
+        this._scale = scale;
+        return this;
+    }
+    /**
+     * @internal This method is not intended to be used by consumers of this library.
+     *
+     * @param dimensionName A user-intelligible name for the dimension being built. Used for error messages. Should be title cased.
+     */
+    _build(dimensionName) {
+        this.validateBuilder(dimensionName);
+        return new NumberVisualValueDimension({
+            domain: this._domain,
+            formatFunction: this._formatFunction,
+            formatSpecifier: this._formatSpecifier,
+            includeZeroInDomain: this._includeZeroInDomain,
+            range: this._range,
+            scaleFn: this._scaleFn,
+            scale: this._scale,
+            valueAccessor: this._valueAccessor,
+        });
+    }
+    validateBuilder(dimensionName) {
+        this.validateValueAccessor(dimensionName);
+        if (!this._range && !this._scale) {
+            throw new Error(`${dimensionName} Dimension: Either a range or a scale must be provided.`);
+        }
+    }
+}
+
+class VicDataExport {
+    saveCSV(name, dataConfigs) {
+        const blobParts = [];
+        for (const dataConfig of dataConfigs) {
+            let csv;
+            let csvData = cloneDeep(dataConfig.data);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            csvData = csvData.map((datum) => {
+                const returnObj = {};
+                for (const column of dataConfig.columns) {
+                    returnObj[column.title] = column.valueAccessor(datum);
+                    // handle common unicode character replacements
+                    // d3 format's strange default minus character https://observablehq.com/@d3/d3-format
+                    if (typeof returnObj[column.title] === 'string') {
+                        returnObj[column.title] = returnObj[column.title].replace(/\u2212/g, '-');
+                    }
+                }
+                return returnObj;
+            });
+            if (dataConfig.flipped) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const data = csvData.reduce((acc, curr) => {
+                    for (const key in curr) {
+                        if (dataConfig.flippedHeaderKey &&
+                            key === dataConfig.flippedHeaderKey)
+                            continue;
+                        const valueToAdd = curr[key] instanceof String || typeof curr[key] === 'string'
+                            ? `"${curr[key]}"`
+                            : curr[key];
+                        if (key in acc) {
+                            acc[key] += `,${valueToAdd}`;
+                        }
+                        else {
+                            acc[key] = `${valueToAdd}`;
+                        }
+                    }
+                    return acc;
+                }, {});
+                csv = '';
+                if (dataConfig.flippedHeaderKey) {
+                    csv += ',';
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    csv += csvData.reduce((acc, curr) => {
+                        if (acc !== '') {
+                            acc += `,${curr[dataConfig.flippedHeaderKey]}`;
+                        }
+                        else {
+                            acc += `${curr[dataConfig.flippedHeaderKey]}`;
+                        }
+                        return acc;
+                    }, '');
+                }
+                for (const key of Object.keys(data)) {
+                    if (csv !== '') {
+                        csv += '\r\n';
+                    }
+                    csv += `${key},${data[key]}`;
+                }
+            }
+            else {
+                csv = unparse(csvData);
+            }
+            for (let i = 0; i < dataConfig.marginBottom; i++) {
+                csv = `${csv}\r\n`;
+            }
+            blobParts.push(csv);
+        }
+        const blob = new Blob(blobParts, { type: 'text/csv;charset=utf-8' });
+        saveAs.saveAs(blob, `${name}.csv`);
     }
-    scaleFn(scaleFn) {
-        if (scaleFn === null) {
-            this._scaleFn = undefined;
-            return this;
-        }
-        this._scaleFn = scaleFn;
-        return this;
+    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: "21.2.4", ngImport: i0, type: VicDataExport, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class VicColumnConfig {
+    constructor(options) {
+        safeAssign(this, options);
     }
-    scale(scale) {
-        if (scale === null) {
-            this._scale = undefined;
-            return this;
+}
+class VicDataExportConfig {
+    constructor(config) {
+        /**
+         * If true, the data will be flipped.
+         * Data: {a: 1, b: 2}, {a: 3, b: 4}
+         * Output CSV:
+         * a | 1 | 3
+         * b | 2 | 4
+         */
+        this.flipped = false;
+        /**
+         * Specifies the keys on each object to include in the csv,
+         * using default titles (converts thisIsAKey to This Is A Key) and values (object.thisIsAKey).
+         * Data: {myKey: 1, otherKey: 2}, {myKey: 3, otherKey: 4}
+         * defaultColumnList: [myKey]
+         * Output CSV:
+         * My Key
+         * 1
+         * 3
+         */
+        this.defaultColumnList = [];
+        /**
+         * If true, all keys from the first object in the data array
+         * are used to populate defaultColumnList
+         */
+        this.includeAllKeysAsDefault = false;
+        /**
+         * A ColumnConfig needs to be provided for any column that can't use defaults
+         * e.g. if there's a special title, the data needs to be formatted in some way,
+         * sometimes certain fields are suppressed, etc.
+         */
+        this.columns = [];
+        this.marginBottom = 0;
+        safeAssign(this, config);
+        if (this.includeAllKeysAsDefault && this.data) {
+            this.defaultColumnList = Object.keys(this.data[0]);
         }
-        this._scale = scale;
-        return this;
-    }
-    /**
-     * @internal This method is not intended to be used by consumers of this library.
-     *
-     * @param dimensionName A user-intelligible name for the dimension being built. Used for error messages. Should be title cased.
-     */
-    _build(dimensionName) {
-        this.validateBuilder(dimensionName);
-        return new NumberVisualValueDimension({
-            domain: this._domain,
-            formatFunction: this._formatFunction,
-            formatSpecifier: this._formatSpecifier,
-            includeZeroInDomain: this._includeZeroInDomain,
-            range: this._range,
-            scaleFn: this._scaleFn,
-            scale: this._scale,
-            valueAccessor: this._valueAccessor,
+        this.defaultColumnList.forEach((key) => {
+            this.columns.push(new VicColumnConfig({
+                title: key !== this.flippedHeaderKey ? this.convertToTitle(key) : key,
+                valueAccessor: (x) => x[key] instanceof Date
+                    ? ValueUtilities.d3Format(x[key], valueFormat.monthYear)
+                    : x[key],
+            }));
         });
     }
-    validateBuilder(dimensionName) {
-        this.validateValueAccessor(dimensionName);
-        if (!this._range && !this._scale) {
-            throw new Error(`${dimensionName} Dimension: Either a range or a scale must be provided.`);
-        }
+    convertToTitle(key) {
+        /**
+         * Will convert:
+         * - thisString -> This String
+         * - 123String -> 123 String
+         * - 123string -> 123 string
+         * - string123 -> String 123
+         * - thisSTRING -> This STRING
+         * - thisSTRiNG -> This STRi NG
+         */
+        let converted_key = key.charAt(0).toUpperCase() +
+            key.slice(1).replace(/([a-z])([A-Z])/g, (match, p1, p2) => p1 + ' ' + p2);
+        converted_key = converted_key.replace(/([a-zA-Z])(\d+)/g, (match, p1, p2) => p1 + ' ' + p2);
+        converted_key = converted_key.replace(/(\d+)([a-zA-Z])/g, (match, p1, p2) => p1 + ' ' + p2);
+        return converted_key;
     }
 }
 
@@ -5963,10 +5941,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 +6074,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 +6110,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 +6251,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 +6272,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 +7538,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 +7721,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 +7734,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 +7748,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 +7769,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 +7911,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 +7936,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 +8014,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 +8162,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 +8231,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 +8254,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,21 +8342,80 @@ 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' }]
         }] });
 
-class PointMarkers {
+class AreaFills {
     constructor(options) {
         safeAssign(this, options);
     }
 }
 
 const DEFAULT$7 = {
+    _display: () => true,
+    _opacity: 0.2,
+    _gradient: undefined,
+    _color: undefined,
+};
+class AreaFillsBuilder {
+    constructor() {
+        safeAssign(this, DEFAULT$7);
+    }
+    color(color) {
+        if (color === null) {
+            this._color = undefined;
+            return this;
+        }
+        this._color = typeof color === 'string' ? () => color : color;
+        return this;
+    }
+    display(display) {
+        this._display = typeof display === 'boolean' ? () => display : display;
+        return this;
+    }
+    /**
+     * OPTIONAL. A number to determine the opacity of the fill under line.
+     *
+     * @default 0.2
+     */
+    opacity(opacity) {
+        this._opacity = opacity;
+        return this;
+    }
+    /**
+     * OPTIONAL. A string to determine the gradient of the fill under line.
+     *
+     * @default undefined
+     */
+    customFills(customFills) {
+        this._customFills = customFills;
+        return this;
+    }
+    /**
+     * @internal This function is for internal use only and should never be called by the user.
+     */
+    _build() {
+        return {
+            display: this._display,
+            opacity: this._opacity,
+            customFills: this._customFills,
+            color: this._color,
+        };
+    }
+}
+
+class PointMarkers {
+    constructor(options) {
+        safeAssign(this, options);
+    }
+}
+
+const DEFAULT$6 = {
     _class: () => '',
     _display: () => true,
     _radius: 3,
@@ -8395,11 +8423,11 @@ const DEFAULT$7 = {
 };
 class PointMarkersBuilder {
     constructor() {
-        safeAssign(this, DEFAULT$7);
+        safeAssign(this, DEFAULT$6);
     }
     class(value) {
         if (value === null) {
-            this._class = DEFAULT$7._class;
+            this._class = DEFAULT$6._class;
             return this;
         }
         if (typeof value === 'string') {
@@ -8451,7 +8479,7 @@ class LinesStroke extends StrokeBase {
     }
 }
 
-const DEFAULT$6 = {
+const DEFAULT$5 = {
     _dasharray: 'none',
     _linecap: 'round',
     _linejoin: 'round',
@@ -8460,7 +8488,7 @@ const DEFAULT$6 = {
 };
 class LinesStrokeBuilder {
     constructor() {
-        safeAssign(this, DEFAULT$6);
+        safeAssign(this, DEFAULT$5);
     }
     color(color) {
         if (color === null) {
@@ -8478,7 +8506,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;
@@ -8545,59 +8573,6 @@ class LinesStrokeBuilder {
     }
 }
 
-const DEFAULT$5 = {
-    _display: () => true,
-    _opacity: 0.2,
-    _gradient: undefined,
-    _color: undefined,
-};
-class AreaFillsBuilder {
-    constructor() {
-        safeAssign(this, DEFAULT$5);
-    }
-    color(color) {
-        if (color === null) {
-            this._color = undefined;
-            return this;
-        }
-        this._color = typeof color === 'string' ? () => color : color;
-        return this;
-    }
-    display(display) {
-        this._display = typeof display === 'boolean' ? () => display : display;
-        return this;
-    }
-    /**
-     * OPTIONAL. A number to determine the opacity of the fill under line.
-     *
-     * @default 0.2
-     */
-    opacity(opacity) {
-        this._opacity = opacity;
-        return this;
-    }
-    /**
-     * OPTIONAL. A string to determine the gradient of the fill under line.
-     *
-     * @default undefined
-     */
-    customFills(customFills) {
-        this._customFills = customFills;
-        return this;
-    }
-    /**
-     * @internal This function is for internal use only and should never be called by the user.
-     */
-    _build() {
-        return {
-            display: this._display,
-            opacity: this._opacity,
-            customFills: this._customFills,
-            color: this._color,
-        };
-    }
-}
-
 class LinesConfig extends XyPrimaryMarksConfig {
     constructor(options) {
         super();
@@ -8792,10 +8767,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 +8999,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 +9128,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 +9169,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 +9344,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 +9363,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 +9429,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 +9503,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 +9546,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 +9594,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 +9618,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 +9852,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 +10020,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 +10031,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 +10205,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 +10342,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 +10379,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 +10534,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 +10553,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 +10658,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 +10779,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 +10801,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 +10949,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 +10970,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 +10983,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],
@@ -11045,5 +11020,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuxMarks, AuxMarksConfig, BARS, BarsClickEmitTooltipDataPauseOtherActions, BarsComponent, BarsConfig, BarsEventsDirective, BarsHoverEmitTooltipData, BarsHoverMoveEmitTooltipData, BarsHoverShowLabels, BarsLabels, BinStrategy, CHART, CHART_SIZE, CategoricalBinsAttributeDataDimension, Chart, ChartComponent, ChartConfig, ColorUtilities, CustomBreaksBinsAttributeDataDimension, DEFAULT_TOOLTIP_Y_OFFSET, DOTS, DataMarksConfig, DotsComponent, DotsConfig, DotsEventsDirective, DotsHoverDefaultStyles, DotsHoverMoveDefaultStyles, DotsHoverMoveEmitTooltipData, EqualFrequenciesAttributeDataDimension, EqualValueRangesAttributeDataDimension, EventType, EventsDirective, GEOGRAPHIES, GeographiesAttributeDataLayer, GeographiesAttributeDataLayerBuilder, GeographiesClickEmitTooltipDataPauseOtherActions, GeographiesComponent, GeographiesConfig, GeographiesEventsDirective, GeographiesGeojsonPropertiesLayer, GeographiesGeojsonPropertiesLayerBuilder, GeographiesHoverEmitTooltipData, GeographiesHoverMoveEmitTooltipData, GeographiesLabels, GeographiesLabelsBuilder, GroupedBarsComponent, GroupedBarsConfig, GroupedBarsEventsDirective, HorizontalBarsDimensionsBuilder, HtmlTooltipCdkManagedPosition, HtmlTooltipConfig, HtmlTooltipDirective, HtmlTooltipSize, HtmlTooltipSizeBuilder, LINES, LinesClickEmitTooltipDataPauseHoverMoveActions, LinesComponent, LinesConfig, LinesEventsDirective, LinesHoverMoveDefaultLinesStyles, LinesHoverMoveDefaultMarkersStyles, LinesHoverMoveDefaultStyles, LinesHoverMoveEmitTooltipData, LinesMarkerClickEmitTooltipData, LinesTooltipPositioner, MapChartComponent, MapLegendComponent, MapPrimaryMarks, MarksConfig, NoBinsAttributeDataDimension, Orientation, PointMarkers, PrimaryMarks, PrimaryMarksBuilder, PrimaryMarksConfig, QuantitativeRulesComponent, QuantitativeRulesConfig, QuantitativeRulesLabels, STACKED_AREA, STACKED_BARS, Side, StackedAreaComponent, StackedAreaConfig, StackedAreaEventsDirective, StackedAreaHoverMoveEmitTooltipData, StackedBarsClickEmitTooltipDataPauseOtherActions, StackedBarsComponent, StackedBarsConfig, StackedBarsEventsDirective, StackedBarsHoverEmitTooltipData, StackedBarsHoverMoveEmitTooltipData, Stroke, SvgTextWrap, TooltipPosition, TooltipPositionBuilder, TooltipPositioner, TooltipTriangleComponent, VIC_PRIMARY_MARKS, ValueExtent, VerticalBarsDimensionsBuilder, VicAuxMarksBuilder, VicBarsConfigBuilder, VicBarsModule, VicChartConfigBuilder, VicChartModule, VicColumnConfig, VicDataExport, VicDataExportConfig, VicDotsConfigBuilder, VicDotsModule, VicGeographiesConfigBuilder, VicGeographiesModule, VicGroupedBarsConfigBuilder, VicGroupedBarsModule, VicHtmlTooltipConfigBuilder, VicHtmlTooltipModule, VicImage, VicImageDownloadService, VicJpegImageConfig, VicLegendType, VicLinesConfigBuilder, VicLinesModule, VicMapAuxMarks, VicMapLegendModule, VicPngImageConfig, VicQuantitativeRulesConfigBuilder, VicQuantitativeRulesModule, VicStackedAreaConfigBuilder, VicStackedAreaModule, VicStackedBarsConfigBuilder, VicStackedBarsModule, VicSvgImageConfig, VicXOrdinalAxisConfig, VicXOrdinalAxisConfigBuilder, VicXQuantitativeAxisConfig, VicXQuantitativeAxisConfigBuilder, VicXyAxisModule, VicXyBackgroundModule, VicXyPrimaryMarks, VicYOrdinalAxisConfig, VicYOrdinalAxisConfigBuilder, VicYQuantitativeAxisConfig, VicYQuantitativeAxisConfigBuilder, XOrdinalAxisComponent, XQuantitativeAxisComponent, XyAuxMarks, XyBackgroundComponent, XyChartComponent, XyContentScale, XyMarksConfig, XyPrimaryMarksConfig, YOrdinalAxisComponent, YQuantitativeAxisComponent, valueFormat };
+export { AreaFills, AreaFillsBuilder, AuxMarks, AuxMarksConfig, AxisBaseline, AxisBaselineBuilder, AxisLabel, AxisLabelBuilder, BARS, BarsBackgrounds, BarsBackgroundsBuilder, BarsClickEmitTooltipDataPauseOtherActions, BarsComponent, BarsConfig, BarsEventsDirective, BarsHoverEmitTooltipData, BarsHoverMoveEmitTooltipData, BarsHoverShowLabels, BarsLabels, BarsLabelsBuilder, BarsTooltipPositioner, BinStrategy, CHART, CHART_SIZE, CategoricalBinsAttributeDataDimension, Chart, ChartComponent, ChartConfig, ColorUtilities, CustomBreaksBinsAttributeDataDimension, DEFAULT_TOOLTIP_Y_OFFSET, DOTS, DataDimension, DataDimensionBuilder, DataMarksConfig, DateChartPositionDimension, DateChartPositionDimensionBuilder, DomainPadding, DomainPaddingType, DotsComponent, DotsConfig, DotsEventsDirective, DotsHoverDefaultStyles, DotsHoverMoveDefaultStyles, DotsHoverMoveEmitTooltipData, DotsTooltipPositioner, EqualFrequenciesAttributeDataDimension, EqualValueRangesAttributeDataDimension, EventType, EventsDirective, FillUtilities, GEOGRAPHIES, GeographiesAttributeDataLayer, GeographiesAttributeDataLayerBuilder, GeographiesClickEmitTooltipDataPauseOtherActions, GeographiesComponent, GeographiesConfig, GeographiesEventsDirective, GeographiesGeojsonPropertiesLayer, GeographiesGeojsonPropertiesLayerBuilder, GeographiesHoverEmitTooltipData, GeographiesHoverMoveEmitTooltipData, GeographiesLabels, GeographiesLabelsBuilder, Grid, GridBuilder, GroupedBarsComponent, GroupedBarsConfig, GroupedBarsEventsDirective, HORIZONTAL_BARS_DIMENSIONS, HorizontalBarsDimensionsBuilder, HtmlTooltipCdkManagedPosition, HtmlTooltipConfig, HtmlTooltipDirective, HtmlTooltipSize, HtmlTooltipSizeBuilder, LINES, LinesClickEmitTooltipDataPauseHoverMoveActions, LinesComponent, LinesConfig, LinesEventsDirective, LinesHoverMoveDefaultLinesStyles, LinesHoverMoveDefaultMarkersStyles, LinesHoverMoveDefaultStyles, LinesHoverMoveEmitTooltipData, LinesMarkerClickEmitTooltipData, LinesStroke, LinesStrokeBuilder, LinesTooltipPositioner, MapChartComponent, MapLegendComponent, MapPrimaryMarks, MarksConfig, NoBinsAttributeDataDimension, NumberChartPositionDimension, NumberChartPositionDimensionBuilder, NumberDimension, NumberVisualValueDimension, NumberVisualValueDimensionBuilder, OrdinalChartPositionDimension, OrdinalChartPositionDimensionBuilder, OrdinalVisualValueDimension, OrdinalVisualValueDimensionBuilder, Orientation, PercentOverDomainPadding, PixelDomainPadding, PointMarkers, PointMarkersBuilder, PrimaryMarks, PrimaryMarksBuilder, PrimaryMarksConfig, QuantitativeRulesComponent, QuantitativeRulesConfig, QuantitativeRulesLabels, QuantitativeTicks, QuantitativeTicksBuilder, ResizeChartHeightPipe, RoundUpToIntervalDomainPadding, RoundUpToSigFigDomainPadding, STACKED_AREA, STACKED_BARS, Side, StackedAreaComponent, StackedAreaConfig, StackedAreaEventsDirective, StackedAreaHoverMoveEmitTooltipData, StackedBarsClickEmitTooltipDataPauseOtherActions, StackedBarsComponent, StackedBarsConfig, StackedBarsEventsDirective, StackedBarsHoverEmitTooltipData, StackedBarsHoverMoveEmitTooltipData, Stroke, StrokeBase, StrokeBuilder, SvgTextWrap, SvgTextWrapBuilder, TickWrap, TickWrapBuilder, Ticks, TicksBuilder, TooltipPosition, TooltipPositionBuilder, TooltipPositioner, TooltipTriangleComponent, VERTICAL_BARS_DIMENSIONS, VIC_PRIMARY_MARKS, ValueExtent, ValueUtilities, VerticalBarsDimensionsBuilder, VicAuxMarksBuilder, VicBarsConfigBuilder, VicBarsModule, VicChartConfigBuilder, VicChartModule, VicColumnConfig, VicDataExport, VicDataExportConfig, VicDotsConfigBuilder, VicDotsModule, VicGeographiesConfigBuilder, VicGeographiesModule, VicGroupedBarsConfigBuilder, VicGroupedBarsModule, VicHtmlTooltipConfigBuilder, VicHtmlTooltipModule, VicImage, VicImageDownloadService, VicJpegImageConfig, VicLegendType, VicLinesConfigBuilder, VicLinesModule, VicMapAuxMarks, VicMapLegendModule, VicOrdinalAxisConfig, VicPngImageConfig, VicQuantitativeAxisConfig, VicQuantitativeRulesConfigBuilder, VicQuantitativeRulesModule, VicStackedAreaConfigBuilder, VicStackedAreaModule, VicStackedBarsConfigBuilder, VicStackedBarsModule, VicSvgImageConfig, VicXOrdinalAxisConfig, VicXOrdinalAxisConfigBuilder, VicXQuantitativeAxisConfig, VicXQuantitativeAxisConfigBuilder, VicXyAxisModule, VicXyBackgroundModule, VicXyPrimaryMarks, VicYOrdinalAxisConfig, VicYOrdinalAxisConfigBuilder, VicYQuantitativeAxisConfig, VicYQuantitativeAxisConfigBuilder, XAxisConfig, XOrdinalAxisComponent, XQuantitativeAxisComponent, XyAuxMarks, XyAxis, XyAxisBaseBuilder, XyAxisConfig, XyBackgroundComponent, XyChartComponent, XyContentScale, XyMarksConfig, XyPrimaryMarksConfig, YAxisConfig, YOrdinalAxisComponent, YQuantitativeAxisComponent, isDate, isFunction, isNumber, isNumberArray, isObject, isPrimitiveType, mixinOrdinalAxisConfig, mixinQuantitativeAxisConfig, mixinXAxisConfig, mixinYAxisConfig, ordinalAxisMixin, quantitativeAxisMixin, valueFormat, xAxisMixin, yAxisMixin };
 //# sourceMappingURL=mathstack-viz.mjs.map