@mathstack/viz 2.2.1 → 2.3.0

package/fesm2022/mathstack-viz.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, InjectionToken, Injectable, inject, DestroyRef, NgZone, ViewChild, Component, ChangeDetectionStrategy, NgModule, ElementRef, ViewEncapsulation, Renderer2, EventEmitter, ViewContainerRef, Output, Pipe } from '@angular/core';
+import { Directive, Input, InjectionToken, Injectable, inject, DestroyRef, NgZone, ViewChild, ChangeDetectionStrategy, Component, 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';
@@ -21,10 +21,10 @@ class Marks {
             this.initFromConfig();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Marks, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: Marks, isStandalone: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: Marks, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: Marks, isStandalone: true, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Marks, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: Marks, decorators: [{
             type: Directive
         }] });
 
@@ -32,10 +32,10 @@ class AuxMarks extends Marks {
     initFromConfig() {
         this.drawMarks();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AuxMarks, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: AuxMarks, isStandalone: true, inputs: { config: "config" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AuxMarks, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: AuxMarks, isStandalone: true, inputs: { config: "config" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AuxMarks, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AuxMarks, decorators: [{
             type: Directive
         }], propDecorators: { config: [{
                 type: Input
@@ -229,10 +229,10 @@ class VicChartConfigBuilder {
             this._aspectRatio = this._width / this._height;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicChartConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicChartConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicChartConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicChartConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicChartConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicChartConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -341,14 +341,14 @@ class ChartComponent {
             y: vb.height / rect.height,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: ChartComponent, isStandalone: true, selector: "vic-chart", inputs: { config: "config" }, host: { classAttribute: "vic-chart" }, providers: [{ provide: CHART, useExisting: ChartComponent }], viewQueries: [{ propertyName: "divRef", first: true, predicate: ["div"], descendants: true, static: true }, { propertyName: "svgRef", first: true, predicate: ["svg"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsBefore\"></ng-container>\n<div\n  #div\n  class=\"vic-chart-container\"\n  [ngClass]=\"(strategy$ | async)\"\n  [style.maxWidth.px]=\"widthCfg$ | async\"\n  [style.minWidth.px]=\"minWidthCfg$ | async\"\n  [style.maxHeight.px]=\"heightCfg$ | async\"\n  [style.aspectRatio]=\"(strategy$ | async) === 'viewbox' ? (config.viewBoxX / config.viewBoxY) : null\"\n  [style.width.%]=\"(strategy$ | async) === 'viewbox' ? 100 : null\"\n>\n  <svg\n    #svg\n    class=\"vic-chart-svg\"\n    [ngClass]=\"(strategy$ | async)\"\n    [style.width.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.width : null\"\n    [style.height.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.height : null\"\n    [attr.viewBox]=\"(strategy$ | async) === 'viewbox' ? '0 0 ' + config.viewBoxX + ' ' + config.viewBoxY : null\"\n  >\n    <defs>\n      <ng-container *ngTemplateOutlet=\"svgDefs\"></ng-container>\n    </defs>\n    <ng-container *ngTemplateOutlet=\"svgElements\"></ng-container>\n  </svg>\n</div>\n\n<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsAfter\"></ng-container>\n\n<ng-template #htmlElementsBefore>\n  <ng-content select=\"[html-elements-before]\"></ng-content>\n</ng-template>\n\n<ng-template #svgDefs>\n  <ng-content select=\"[svg-defs]\"></ng-content>\n</ng-template>\n\n<ng-template #svgElements>\n  <ng-content select=\"[svg-elements]\"></ng-content>\n</ng-template>\n\n<ng-template #htmlElementsAfter>\n  <ng-content select=\"[html-elements-after]\"></ng-content>\n</ng-template>\n", styles: [".vic-chart-container{display:flex;align-items:stretch;box-sizing:border-box;width:100%;min-width:0}.vic-chart-container.responsive-width{contain:inline-size}.vic-chart-container.viewbox{contain:inline-size;overflow:hidden}.vic-chart-container.fixed,.vic-chart-svg{display:block}.vic-chart-svg:not(.viewbox){overflow:visible}.vic-chart-svg.viewbox{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vic-chart', providers: [{ provide: CHART, useExisting: ChartComponent }], host: {
                         class: 'vic-chart',
-                    }, imports: [CommonModule], template: "<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsBefore\"></ng-container>\n<div\n  #div\n  class=\"vic-chart-container\"\n  [ngClass]=\"(strategy$ | async)\"\n  [style.maxWidth.px]=\"widthCfg$ | async\"\n  [style.minWidth.px]=\"minWidthCfg$ | async\"\n  [style.maxHeight.px]=\"heightCfg$ | async\"\n  [style.aspectRatio]=\"(strategy$ | async) === 'viewbox' ? (config.viewBoxX / config.viewBoxY) : null\"\n  [style.width.%]=\"(strategy$ | async) === 'viewbox' ? 100 : null\"\n>\n  <svg\n    #svg\n    class=\"vic-chart-svg\"\n    [ngClass]=\"(strategy$ | async)\"\n    [style.width.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.width : null\"\n    [style.height.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.height : null\"\n    [attr.viewBox]=\"(strategy$ | async) === 'viewbox' ? '0 0 ' + config.viewBoxX + ' ' + config.viewBoxY : null\"\n  >\n    <defs>\n      <ng-container *ngTemplateOutlet=\"svgDefs\"></ng-container>\n    </defs>\n    <ng-container *ngTemplateOutlet=\"svgElements\"></ng-container>\n  </svg>\n</div>\n\n<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsAfter\"></ng-container>\n\n<ng-template #htmlElementsBefore>\n  <ng-content select=\"[html-elements-before]\"></ng-content>\n</ng-template>\n\n<ng-template #svgDefs>\n  <ng-content select=\"[svg-defs]\"></ng-content>\n</ng-template>\n\n<ng-template #svgElements>\n  <ng-content select=\"[svg-elements]\"></ng-content>\n</ng-template>\n\n<ng-template #htmlElementsAfter>\n  <ng-content select=\"[html-elements-after]\"></ng-content>\n</ng-template>\n", styles: [".vic-chart-container{display:flex;align-items:stretch;box-sizing:border-box;width:100%;min-width:0}.vic-chart-container.responsive-width{contain:inline-size}.vic-chart-container.viewbox{contain:inline-size;overflow:hidden}.vic-chart-container.fixed,.vic-chart-svg{display:block}.vic-chart-svg:not(.viewbox){overflow:visible}.vic-chart-svg.viewbox{width:100%;height:100%}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.Eager, imports: [CommonModule], template: "<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsBefore\"></ng-container>\n<div\n  #div\n  class=\"vic-chart-container\"\n  [ngClass]=\"(strategy$ | async)\"\n  [style.maxWidth.px]=\"widthCfg$ | async\"\n  [style.minWidth.px]=\"minWidthCfg$ | async\"\n  [style.maxHeight.px]=\"heightCfg$ | async\"\n  [style.aspectRatio]=\"(strategy$ | async) === 'viewbox' ? (config.viewBoxX / config.viewBoxY) : null\"\n  [style.width.%]=\"(strategy$ | async) === 'viewbox' ? 100 : null\"\n>\n  <svg\n    #svg\n    class=\"vic-chart-svg\"\n    [ngClass]=\"(strategy$ | async)\"\n    [style.width.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.width : null\"\n    [style.height.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.height : null\"\n    [attr.viewBox]=\"(strategy$ | async) === 'viewbox' ? '0 0 ' + config.viewBoxX + ' ' + config.viewBoxY : null\"\n  >\n    <defs>\n      <ng-container *ngTemplateOutlet=\"svgDefs\"></ng-container>\n    </defs>\n    <ng-container *ngTemplateOutlet=\"svgElements\"></ng-container>\n  </svg>\n</div>\n\n<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsAfter\"></ng-container>\n\n<ng-template #htmlElementsBefore>\n  <ng-content select=\"[html-elements-before]\"></ng-content>\n</ng-template>\n\n<ng-template #svgDefs>\n  <ng-content select=\"[svg-defs]\"></ng-content>\n</ng-template>\n\n<ng-template #svgElements>\n  <ng-content select=\"[svg-elements]\"></ng-content>\n</ng-template>\n\n<ng-template #htmlElementsAfter>\n  <ng-content select=\"[html-elements-after]\"></ng-content>\n</ng-template>\n", styles: [".vic-chart-container{display:flex;align-items:stretch;box-sizing:border-box;width:100%;min-width:0}.vic-chart-container.responsive-width{contain:inline-size}.vic-chart-container.viewbox{contain:inline-size;overflow:hidden}.vic-chart-container.fixed,.vic-chart-svg{display:block}.vic-chart-svg:not(.viewbox){overflow:visible}.vic-chart-svg.viewbox{width:100%;height:100%}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], divRef: [{
@@ -395,14 +395,14 @@ class MapChartComponent extends ChartComponent {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MapChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: MapChartComponent, isStandalone: true, selector: "vic-map-chart", host: { classAttribute: "vic-map-chart" }, providers: [{ provide: CHART, useExisting: ChartComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsBefore\"></ng-container>\n<div\n  #div\n  class=\"vic-chart-container\"\n  [ngClass]=\"(strategy$ | async)\"\n  [style.maxWidth.px]=\"widthCfg$ | async\"\n  [style.minWidth.px]=\"minWidthCfg$ | async\"\n  [style.maxHeight.px]=\"heightCfg$ | async\"\n  [style.aspectRatio]=\"(strategy$ | async) === 'viewbox' ? (config.viewBoxX / config.viewBoxY) : null\"\n  [style.width.%]=\"(strategy$ | async) === 'viewbox' ? 100 : null\"\n>\n  <svg\n    #svg\n    class=\"vic-chart-svg\"\n    [ngClass]=\"(strategy$ | async)\"\n    [style.width.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.width : null\"\n    [style.height.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.height : null\"\n    [attr.viewBox]=\"(strategy$ | async) === 'viewbox' ? '0 0 ' + config.viewBoxX + ' ' + config.viewBoxY : null\"\n  >\n    <defs>\n      <ng-container *ngTemplateOutlet=\"svgDefs\"></ng-container>\n    </defs>\n    <ng-container *ngTemplateOutlet=\"svgElements\"></ng-container>\n  </svg>\n</div>\n\n<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsAfter\"></ng-container>\n\n<ng-template #htmlElementsBefore>\n  <ng-content select=\"[html-elements-before]\"></ng-content>\n</ng-template>\n\n<ng-template #svgDefs>\n  <ng-content select=\"[svg-defs]\"></ng-content>\n</ng-template>\n\n<ng-template #svgElements>\n  <ng-content select=\"[svg-elements]\"></ng-content>\n</ng-template>\n\n<ng-template #htmlElementsAfter>\n  <ng-content select=\"[html-elements-after]\"></ng-content>\n</ng-template>\n", styles: [".vic-chart-container{display:flex;align-items:stretch;box-sizing:border-box;width:100%;min-width:0}.vic-chart-container.responsive-width{contain:inline-size}.vic-chart-container.viewbox{contain:inline-size;overflow:hidden}.vic-chart-container.fixed,.vic-chart-svg{display:block}.vic-chart-svg:not(.viewbox){overflow:visible}.vic-chart-svg.viewbox{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: MapChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MapChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: MapChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vic-map-chart', providers: [{ provide: CHART, useExisting: ChartComponent }], host: {
                         class: 'vic-map-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"] }]
+                    }, changeDetection: ChangeDetectionStrategy.Eager, 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"] }]
         }] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -441,10 +441,10 @@ class XyChartComponent extends ChartComponent {
             this.scales.next({ ...this.scales.value, ...scales });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XyChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: XyChartComponent, isStandalone: true, selector: "vic-xy-chart", host: { classAttribute: "vic-xy-chart" }, providers: [{ provide: CHART, useExisting: ChartComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsBefore\"></ng-container>\n<div\n  #div\n  class=\"vic-chart-container\"\n  [ngClass]=\"(strategy$ | async)\"\n  [style.maxWidth.px]=\"widthCfg$ | async\"\n  [style.minWidth.px]=\"minWidthCfg$ | async\"\n  [style.maxHeight.px]=\"heightCfg$ | async\"\n  [style.aspectRatio]=\"(strategy$ | async) === 'viewbox' ? (config.viewBoxX / config.viewBoxY) : null\"\n  [style.width.%]=\"(strategy$ | async) === 'viewbox' ? 100 : null\"\n>\n  <svg\n    #svg\n    class=\"vic-chart-svg\"\n    [ngClass]=\"(strategy$ | async)\"\n    [style.width.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.width : null\"\n    [style.height.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.height : null\"\n    [attr.viewBox]=\"(strategy$ | async) === 'viewbox' ? '0 0 ' + config.viewBoxX + ' ' + config.viewBoxY : null\"\n  >\n    <defs>\n      <ng-container *ngTemplateOutlet=\"svgDefs\"></ng-container>\n    </defs>\n    <ng-container *ngTemplateOutlet=\"svgElements\"></ng-container>\n  </svg>\n</div>\n\n<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsAfter\"></ng-container>\n\n<ng-template #htmlElementsBefore>\n  <ng-content select=\"[html-elements-before]\"></ng-content>\n</ng-template>\n\n<ng-template #svgDefs>\n  <ng-content select=\"[svg-defs]\"></ng-content>\n</ng-template>\n\n<ng-template #svgElements>\n  <ng-content select=\"[svg-elements]\"></ng-content>\n</ng-template>\n\n<ng-template #htmlElementsAfter>\n  <ng-content select=\"[html-elements-after]\"></ng-content>\n</ng-template>\n", styles: [".vic-chart-container{display:flex;align-items:stretch;box-sizing:border-box;width:100%;min-width:0}.vic-chart-container.responsive-width{contain:inline-size}.vic-chart-container.viewbox{contain:inline-size;overflow:hidden}.vic-chart-container.fixed,.vic-chart-svg{display:block}.vic-chart-svg:not(.viewbox){overflow:visible}.vic-chart-svg.viewbox{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: XyChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: XyChartComponent, isStandalone: true, selector: "vic-xy-chart", host: { classAttribute: "vic-xy-chart" }, providers: [{ provide: CHART, useExisting: ChartComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsBefore\"></ng-container>\n<div\n  #div\n  class=\"vic-chart-container\"\n  [ngClass]=\"(strategy$ | async)\"\n  [style.maxWidth.px]=\"widthCfg$ | async\"\n  [style.minWidth.px]=\"minWidthCfg$ | async\"\n  [style.maxHeight.px]=\"heightCfg$ | async\"\n  [style.aspectRatio]=\"(strategy$ | async) === 'viewbox' ? (config.viewBoxX / config.viewBoxY) : null\"\n  [style.width.%]=\"(strategy$ | async) === 'viewbox' ? 100 : null\"\n>\n  <svg\n    #svg\n    class=\"vic-chart-svg\"\n    [ngClass]=\"(strategy$ | async)\"\n    [style.width.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.width : null\"\n    [style.height.px]=\"(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.height : null\"\n    [attr.viewBox]=\"(strategy$ | async) === 'viewbox' ? '0 0 ' + config.viewBoxX + ' ' + config.viewBoxY : null\"\n  >\n    <defs>\n      <ng-container *ngTemplateOutlet=\"svgDefs\"></ng-container>\n    </defs>\n    <ng-container *ngTemplateOutlet=\"svgElements\"></ng-container>\n  </svg>\n</div>\n\n<!-- Slot exists so that projected content can have access to scales -->\n<ng-container *ngTemplateOutlet=\"htmlElementsAfter\"></ng-container>\n\n<ng-template #htmlElementsBefore>\n  <ng-content select=\"[html-elements-before]\"></ng-content>\n</ng-template>\n\n<ng-template #svgDefs>\n  <ng-content select=\"[svg-defs]\"></ng-content>\n</ng-template>\n\n<ng-template #svgElements>\n  <ng-content select=\"[svg-elements]\"></ng-content>\n</ng-template>\n\n<ng-template #htmlElementsAfter>\n  <ng-content select=\"[html-elements-after]\"></ng-content>\n</ng-template>\n", styles: [".vic-chart-container{display:flex;align-items:stretch;box-sizing:border-box;width:100%;min-width:0}.vic-chart-container.responsive-width{contain:inline-size}.vic-chart-container.viewbox{contain:inline-size;overflow:hidden}.vic-chart-container.fixed,.vic-chart-svg{display:block}.vic-chart-svg:not(.viewbox){overflow:visible}.vic-chart-svg.viewbox{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XyChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: XyChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vic-xy-chart', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: CHART, useExisting: ChartComponent }], host: {
                         class: 'vic-xy-chart',
@@ -452,11 +452,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
         }] });
 
 class VicChartModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: VicChartModule, imports: [ChartComponent, XyChartComponent, MapChartComponent], exports: [ChartComponent, XyChartComponent, MapChartComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicChartModule, imports: [ChartComponent, XyChartComponent, MapChartComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: VicChartModule, imports: [ChartComponent, XyChartComponent, MapChartComponent], exports: [ChartComponent, XyChartComponent, MapChartComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicChartModule, imports: [ChartComponent, XyChartComponent, MapChartComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicChartModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicChartModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ChartComponent, XyChartComponent, MapChartComponent],
@@ -488,10 +488,10 @@ class VicMapAuxMarks extends AuxMarks {
     getTransitionDuration() {
         return this.chart.config.transitionDuration;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicMapAuxMarks, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: VicMapAuxMarks, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicMapAuxMarks, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: VicMapAuxMarks, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicMapAuxMarks, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicMapAuxMarks, decorators: [{
             type: Directive
         }] });
 
@@ -504,10 +504,10 @@ class PrimaryMarks extends Marks {
     initFromConfig() {
         this.setChartScalesFromRanges(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PrimaryMarks, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: PrimaryMarks, isStandalone: true, inputs: { config: "config" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PrimaryMarks, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: PrimaryMarks, isStandalone: true, inputs: { config: "config" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PrimaryMarks, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PrimaryMarks, decorators: [{
             type: Directive
         }], propDecorators: { config: [{
                 type: Input
@@ -551,10 +551,10 @@ class MapPrimaryMarks extends PrimaryMarks {
     getTransitionDuration() {
         return this.chart.config.transitionDuration;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MapPrimaryMarks, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: MapPrimaryMarks, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: MapPrimaryMarks, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: MapPrimaryMarks, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MapPrimaryMarks, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: MapPrimaryMarks, decorators: [{
             type: Directive
         }] });
 
@@ -627,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: "21.2.4", ngImport: i0, type: XyAuxMarks, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: XyAuxMarks, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: XyAuxMarks, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: XyAuxMarks, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XyAuxMarks, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: XyAuxMarks, decorators: [{
             type: Directive
         }] });
 
@@ -680,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: "21.2.4", ngImport: i0, type: VicXyPrimaryMarks, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: VicXyPrimaryMarks, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicXyPrimaryMarks, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: VicXyPrimaryMarks, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXyPrimaryMarks, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicXyPrimaryMarks, decorators: [{
             type: Directive
         }] });
 
@@ -1303,7 +1303,6 @@ class XyAxis extends XyAuxMarks {
         // 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', () => {
@@ -1470,10 +1469,10 @@ class XyAxis extends XyAuxMarks {
             : this.getTransitionDuration();
         return selection.transition().duration(transitionDuration);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XyAxis, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: XyAxis, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: XyAxis, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: XyAxis, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XyAxis, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: XyAxis, decorators: [{
             type: Directive
         }] });
 
@@ -2093,6 +2092,9 @@ function xAxisMixin(Base) {
         getBaselineTranslate() {
             if (!this.otherAxisHasPosAndNegValues('x'))
                 return null;
+            const yDomain = this.scales.y.domain();
+            if (yDomain[0] > 0 || yDomain[1] < 0)
+                return null;
             const rangeIndexForSide = this.config.side === 'top' ? 1 : 0;
             const translateDistance = this.scales.y(0) - this.scales.y.range()[rangeIndexForSide];
             return `translate(0, ${translateDistance})`;
@@ -2229,21 +2231,21 @@ class VicXOrdinalAxisConfigBuilder extends XyAxisBaseBuilder {
             ticks: this.ticksBuilder._build('x'),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXOrdinalAxisConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXOrdinalAxisConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicXOrdinalAxisConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicXOrdinalAxisConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXOrdinalAxisConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: XOrdinalAxisComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.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"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XOrdinalAxisComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: XOrdinalAxisComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[vic-x-ordinal-axis]', template: '', inputs: ['config'], encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: '[vic-x-ordinal-axis]', template: '', inputs: ['config'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, host: {
                         '[class]': 'config.marksClass',
                         class: 'vic-axis',
                         '[attr.mix-blend-mode]': 'config.mixBlendMode',
@@ -2305,21 +2307,21 @@ class VicXQuantitativeAxisConfigBuilder extends XyAxisBaseBuilder {
             ticks: this.ticksBuilder._build('x'),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXQuantitativeAxisConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXQuantitativeAxisConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicXQuantitativeAxisConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicXQuantitativeAxisConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXQuantitativeAxisConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", 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: "21.2.4", ngImport: i0, type: XQuantitativeAxisComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: XQuantitativeAxisComponent, isStandalone: true, selector: "[vic-x-quantitative-axis]", inputs: { config: "config" }, host: { properties: { "class": "config.marksClass", "attr.mix-blend-mode": "config.mixBlendMode", "attr.transform": "translate" }, classAttribute: "vic-axis" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [".vic-axis-x-quantitative .vic-axis-label{fill:currentColor}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: XQuantitativeAxisComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.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"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XQuantitativeAxisComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: XQuantitativeAxisComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[vic-x-quantitative-axis]', template: '', inputs: ['config'], encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: '[vic-x-quantitative-axis]', template: '', inputs: ['config'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, host: {
                         '[class]': 'config.marksClass',
                         class: 'vic-axis',
                         '[attr.mix-blend-mode]': 'config.mixBlendMode',
@@ -2356,6 +2358,9 @@ function yAxisMixin(Base) {
         getBaselineTranslate() {
             if (!this.otherAxisHasPosAndNegValues('y'))
                 return null;
+            const xDomain = this.scales.x.domain();
+            if (xDomain[0] > 0 || xDomain[1] < 0)
+                return null;
             const rangeIndexForSide = this.config.side === 'left' ? 0 : 1;
             const translateDistance = this.scales.x(0) - this.scales.x.range()[rangeIndexForSide];
             return `translate(${translateDistance}, 0)`;
@@ -2461,12 +2466,12 @@ function yAxisMixin(Base) {
 
 const YOrdinalAxis = yAxisMixin(ordinalAxisMixin((XyAxis)));
 class YOrdinalAxisComponent extends YOrdinalAxis {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: YOrdinalAxisComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: YOrdinalAxisComponent, isStandalone: true, selector: "[vic-y-ordinal-axis]", inputs: { config: "config" }, host: { properties: { "class": "config.marksClass", "attr.mix-blend-mode": "config.mixBlendMode", "attr.transform": "translate" }, classAttribute: "vic-axis" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [".vic-axis-y-ordinal .vic-axis-label{fill:currentColor}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: YOrdinalAxisComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.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"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: YOrdinalAxisComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: YOrdinalAxisComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[vic-y-ordinal-axis]', template: '', inputs: ['config'], encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: '[vic-y-ordinal-axis]', template: '', inputs: ['config'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, host: {
                         '[class]': 'config.marksClass',
                         class: 'vic-axis',
                         '[attr.mix-blend-mode]': 'config.mixBlendMode',
@@ -2476,12 +2481,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 
 const YQuantitativeAxis = yAxisMixin(quantitativeAxisMixin(XyAxis));
 class YQuantitativeAxisComponent extends YQuantitativeAxis {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: YQuantitativeAxisComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: YQuantitativeAxisComponent, isStandalone: true, selector: "[vic-y-quantitative-axis]", inputs: { config: "config" }, host: { properties: { "class": "config.marksClass", "attr.mix-blend-mode": "config.mixBlendMode", "attr.transform": "translate" }, classAttribute: "vic-axis" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [".vic-axis-y-quantitative .vic-axis-label{fill:currentColor}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: YQuantitativeAxisComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.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"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: YQuantitativeAxisComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: YQuantitativeAxisComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[vic-y-quantitative-axis]', template: '', inputs: ['config'], encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: '[vic-y-quantitative-axis]', template: '', inputs: ['config'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, host: {
                         '[class]': 'config.marksClass',
                         class: 'vic-axis',
                         '[attr.mix-blend-mode]': 'config.mixBlendMode',
@@ -2490,17 +2495,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
         }] });
 
 class VicXyAxisModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXyAxisModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: VicXyAxisModule, imports: [YQuantitativeAxisComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicXyAxisModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: VicXyAxisModule, imports: [YQuantitativeAxisComponent,
             YOrdinalAxisComponent,
             XQuantitativeAxisComponent,
             XOrdinalAxisComponent], exports: [YQuantitativeAxisComponent,
             YOrdinalAxisComponent,
             XQuantitativeAxisComponent,
             XOrdinalAxisComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXyAxisModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicXyAxisModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXyAxisModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicXyAxisModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2593,10 +2598,10 @@ class VicYOrdinalAxisConfigBuilder extends XyAxisBaseBuilder {
             ticks: this.ticksBuilder._build('y'),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicYOrdinalAxisConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicYOrdinalAxisConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicYOrdinalAxisConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicYOrdinalAxisConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicYOrdinalAxisConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicYOrdinalAxisConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -2655,10 +2660,10 @@ class VicYQuantitativeAxisConfigBuilder extends XyAxisBaseBuilder {
             ticks: this.ticksBuilder._build('y'),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicYQuantitativeAxisConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicYQuantitativeAxisConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicYQuantitativeAxisConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicYQuantitativeAxisConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicYQuantitativeAxisConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicYQuantitativeAxisConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -2977,7 +2982,6 @@ class BarsComponent extends VicXyPrimaryMarks {
             .attr('height', this.getBackgroundBarHeight()), (exit) => exit.remove())
             .lower();
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     getBarGroupColorClass(i) {
         return this.config.color.calculatedDomain.length > 1
             ? ValueUtilities.formatForHtmlAttribute(this.config.color.values[i])
@@ -3065,13 +3069,14 @@ class BarsComponent extends VicXyPrimaryMarks {
             const origin = this.getBarQuantitativeOrigin();
             return this.scales.x(origin);
         }
-        else if (this.config.hasNegativeValues) {
-            if (d.quantitative < 0) {
+        else if (d.quantitative < 0) {
+            if (this.config.quantitative.domainIncludesZero) {
                 return this.scales.x(d.quantitative);
             }
-            return this.scales.x(0);
+            return this.scales.x(this.getQuantitativeDomainFromScale()[1]);
         }
-        return this.scales.x(this.getQuantitativeDomainFromScale()[0]);
+        const origin = this.getBarQuantitativeOrigin();
+        return this.scales.x(origin);
     }
     getBarY(d) {
         if (this.config.dimensions.y === 'ordinal') {
@@ -3331,14 +3336,14 @@ class BarsComponent extends VicXyPrimaryMarks {
             this.config.quantitative.values[barDatum.index] ===
                 this.config.quantitative.valueAccessor(d));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BarsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: BarsComponent, isStandalone: true, selector: "[vic-primary-marks-bars]", host: { properties: { "class": "config.marksClass", "style.mixBlendMode": "config.mixBlendMode" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BarsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: BarsComponent, isStandalone: true, selector: "[vic-primary-marks-bars]", host: { properties: { "class": "config.marksClass", "style.mixBlendMode": "config.mixBlendMode" } }, providers: [
             { provide: VIC_PRIMARY_MARKS, useExisting: BarsComponent },
             { provide: BARS, useExisting: BarsComponent },
             { provide: ChartComponent, useExisting: XyChartComponent },
         ], usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BarsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BarsComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-primary-marks-bars]', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: VIC_PRIMARY_MARKS, useExisting: BarsComponent },
@@ -3444,10 +3449,10 @@ class EventsDirective {
     asHost() {
         return this;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EventsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: EventsDirective, isStandalone: true, inputs: { clickRemoveEvent$: "clickRemoveEvent$", inputEvent$: "inputEvent$" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EventsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: EventsDirective, isStandalone: true, inputs: { clickRemoveEvent$: "clickRemoveEvent$", inputEvent$: "inputEvent$" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EventsDirective, decorators: [{
             type: Directive
         }], propDecorators: { clickRemoveEvent$: [{
                 type: Input
@@ -3671,10 +3676,10 @@ class VicHtmlTooltipConfigBuilder {
         }
         return panelClasses;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicHtmlTooltipConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicHtmlTooltipConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicHtmlTooltipConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicHtmlTooltipConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicHtmlTooltipConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicHtmlTooltipConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -3984,13 +3989,12 @@ class HtmlTooltipDirective {
             this.overlayRef.dispose();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HtmlTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: HtmlTooltipDirective, isStandalone: true, selector: "vic-html-tooltip", inputs: { template: "template", config: "config" }, outputs: { backdropClick: "backdropClick" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: HtmlTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: HtmlTooltipDirective, isStandalone: true, selector: "vic-html-tooltip", inputs: { template: "template", config: "config" }, outputs: { backdropClick: "backdropClick" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HtmlTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: HtmlTooltipDirective, decorators: [{
             type: Directive,
             args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'vic-html-tooltip',
                 }]
         }], propDecorators: { template: [{
@@ -4006,10 +4010,10 @@ class TooltipTriangleComponent {
         this.height = 12;
         this.width = 20;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TooltipTriangleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: TooltipTriangleComponent, isStandalone: true, selector: "vic-tooltip-triangle", inputs: { height: "height", width: "width" }, ngImport: i0, template: "<svg\n  width=\"100%\"\n  [attr.height]=\"height\"\n  [style.--width]=\"width + 'px'\"\n  class=\"vic-tooltip-svg-triangle center\"\n>\n  <g class=\"svg-g\">\n    <path\n      class=\"triangle-path\"\n      [attr.d]=\"'M 0,0 ' + (width / 2) + ',' + height + ' ' + width + ',0'\"\n    ></path>\n  </g>\n</svg>\n\n<svg\n  width=\"100%\"\n  [attr.height]=\"height\"\n  [style.--width]=\"width + 'px'\"\n  class=\"vic-tooltip-svg-triangle right\"\n>\n  <g class=\"svg-g\">\n    <path\n      class=\"triangle-path\"\n      [attr.d]=\"'M 0,0 ' + (width / 2) + ',' + height + ' ' + (width / 2) + ',0'\"\n    ></path>\n  </g>\n</svg>\n\n<svg\n  width=\"100%\"\n  [attr.height]=\"height\"\n  [style.--width]=\"width + 'px'\"\n  class=\"vic-tooltip-svg-triangle left\"\n>\n  <g class=\"svg-g\">\n    <path\n      class=\"triangle-path\"\n      [attr.d]=\"'M 0,0 ' + '0,' + height + ' ' + (width / 2) + ',0'\"\n    ></path>\n  </g>\n</svg>\n", styles: [".cdk-overlay-container .position-bottom-center .vic-tooltip-svg-triangle.center{transform:translate(calc(50% - var(--width) / 2),-2px)}.cdk-overlay-container .position-bottom-center .vic-tooltip-svg-triangle.right,.cdk-overlay-container .position-bottom-center .vic-tooltip-svg-triangle.left,.cdk-overlay-container .position-bottom-left .vic-tooltip-svg-triangle.center,.cdk-overlay-container .position-bottom-left .vic-tooltip-svg-triangle.right{display:none}.cdk-overlay-container .position-bottom-left .vic-tooltip-svg-triangle.left{transform:translateY(-2px)}.cdk-overlay-container .position-bottom-right .vic-tooltip-svg-triangle.center{display:none}.cdk-overlay-container .position-bottom-right .vic-tooltip-svg-triangle.right{transform:translate(calc(100% - var(--width) / 2),-2px)}.cdk-overlay-container .position-bottom-right .vic-tooltip-svg-triangle.left{display:none}.cdk-overlay-container .vic-tooltip-svg-triangle{display:block;transform:translate(calc(50% - var(--width) / 2),-2px)}.cdk-overlay-container .vic-tooltip-svg-triangle .triangle-path{stroke:var(--tooltip-triangle-stroke, gray);fill:var(--tooltip-triangle-fill, white);fill-opacity:var(--tooltip-triangle-fill-opacity, 1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TooltipTriangleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: TooltipTriangleComponent, isStandalone: true, selector: "vic-tooltip-triangle", inputs: { height: "height", width: "width" }, ngImport: i0, template: "<svg\n  width=\"100%\"\n  [attr.height]=\"height\"\n  [style.--width]=\"width + 'px'\"\n  class=\"vic-tooltip-svg-triangle center\"\n>\n  <g class=\"svg-g\">\n    <path\n      class=\"triangle-path\"\n      [attr.d]=\"'M 0,0 ' + (width / 2) + ',' + height + ' ' + width + ',0'\"\n    ></path>\n  </g>\n</svg>\n\n<svg\n  width=\"100%\"\n  [attr.height]=\"height\"\n  [style.--width]=\"width + 'px'\"\n  class=\"vic-tooltip-svg-triangle right\"\n>\n  <g class=\"svg-g\">\n    <path\n      class=\"triangle-path\"\n      [attr.d]=\"'M 0,0 ' + (width / 2) + ',' + height + ' ' + (width / 2) + ',0'\"\n    ></path>\n  </g>\n</svg>\n\n<svg\n  width=\"100%\"\n  [attr.height]=\"height\"\n  [style.--width]=\"width + 'px'\"\n  class=\"vic-tooltip-svg-triangle left\"\n>\n  <g class=\"svg-g\">\n    <path\n      class=\"triangle-path\"\n      [attr.d]=\"'M 0,0 ' + '0,' + height + ' ' + (width / 2) + ',0'\"\n    ></path>\n  </g>\n</svg>\n", styles: [".cdk-overlay-container .position-bottom-center .vic-tooltip-svg-triangle.center{transform:translate(calc(50% - var(--width) / 2),-2px)}.cdk-overlay-container .position-bottom-center .vic-tooltip-svg-triangle.right,.cdk-overlay-container .position-bottom-center .vic-tooltip-svg-triangle.left,.cdk-overlay-container .position-bottom-left .vic-tooltip-svg-triangle.center,.cdk-overlay-container .position-bottom-left .vic-tooltip-svg-triangle.right{display:none}.cdk-overlay-container .position-bottom-left .vic-tooltip-svg-triangle.left{transform:translateY(-2px)}.cdk-overlay-container .position-bottom-right .vic-tooltip-svg-triangle.center{display:none}.cdk-overlay-container .position-bottom-right .vic-tooltip-svg-triangle.right{transform:translate(calc(100% - var(--width) / 2),-2px)}.cdk-overlay-container .position-bottom-right .vic-tooltip-svg-triangle.left{display:none}.cdk-overlay-container .vic-tooltip-svg-triangle{display:block;transform:translate(calc(50% - var(--width) / 2),-2px)}.cdk-overlay-container .vic-tooltip-svg-triangle .triangle-path{stroke:var(--tooltip-triangle-stroke, gray);fill:var(--tooltip-triangle-fill, white);fill-opacity:var(--tooltip-triangle-fill-opacity, 1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TooltipTriangleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TooltipTriangleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vic-tooltip-triangle', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<svg\n  width=\"100%\"\n  [attr.height]=\"height\"\n  [style.--width]=\"width + 'px'\"\n  class=\"vic-tooltip-svg-triangle center\"\n>\n  <g class=\"svg-g\">\n    <path\n      class=\"triangle-path\"\n      [attr.d]=\"'M 0,0 ' + (width / 2) + ',' + height + ' ' + width + ',0'\"\n    ></path>\n  </g>\n</svg>\n\n<svg\n  width=\"100%\"\n  [attr.height]=\"height\"\n  [style.--width]=\"width + 'px'\"\n  class=\"vic-tooltip-svg-triangle right\"\n>\n  <g class=\"svg-g\">\n    <path\n      class=\"triangle-path\"\n      [attr.d]=\"'M 0,0 ' + (width / 2) + ',' + height + ' ' + (width / 2) + ',0'\"\n    ></path>\n  </g>\n</svg>\n\n<svg\n  width=\"100%\"\n  [attr.height]=\"height\"\n  [style.--width]=\"width + 'px'\"\n  class=\"vic-tooltip-svg-triangle left\"\n>\n  <g class=\"svg-g\">\n    <path\n      class=\"triangle-path\"\n      [attr.d]=\"'M 0,0 ' + '0,' + height + ' ' + (width / 2) + ',0'\"\n    ></path>\n  </g>\n</svg>\n", styles: [".cdk-overlay-container .position-bottom-center .vic-tooltip-svg-triangle.center{transform:translate(calc(50% - var(--width) / 2),-2px)}.cdk-overlay-container .position-bottom-center .vic-tooltip-svg-triangle.right,.cdk-overlay-container .position-bottom-center .vic-tooltip-svg-triangle.left,.cdk-overlay-container .position-bottom-left .vic-tooltip-svg-triangle.center,.cdk-overlay-container .position-bottom-left .vic-tooltip-svg-triangle.right{display:none}.cdk-overlay-container .position-bottom-left .vic-tooltip-svg-triangle.left{transform:translateY(-2px)}.cdk-overlay-container .position-bottom-right .vic-tooltip-svg-triangle.center{display:none}.cdk-overlay-container .position-bottom-right .vic-tooltip-svg-triangle.right{transform:translate(calc(100% - var(--width) / 2),-2px)}.cdk-overlay-container .position-bottom-right .vic-tooltip-svg-triangle.left{display:none}.cdk-overlay-container .vic-tooltip-svg-triangle{display:block;transform:translate(calc(50% - var(--width) / 2),-2px)}.cdk-overlay-container .vic-tooltip-svg-triangle .triangle-path{stroke:var(--tooltip-triangle-stroke, gray);fill:var(--tooltip-triangle-fill, white);fill-opacity:var(--tooltip-triangle-fill-opacity, 1)}\n"] }]
         }], propDecorators: { height: [{
@@ -4019,15 +4023,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             }] } });
 
 class VicHtmlTooltipModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicHtmlTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: VicHtmlTooltipModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicHtmlTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: VicHtmlTooltipModule, imports: [CommonModule,
             OverlayModule,
             HtmlTooltipDirective,
             TooltipTriangleComponent], exports: [HtmlTooltipDirective, TooltipTriangleComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicHtmlTooltipModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicHtmlTooltipModule, imports: [CommonModule,
             OverlayModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicHtmlTooltipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicHtmlTooltipModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -4197,10 +4201,10 @@ class BarsEventsDirective extends EventsDirective {
         this.positionX = undefined;
         this.positionY = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BarsEventsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: BarsEventsDirective, isStandalone: true, selector: "[vicBarsEvents]", inputs: { hoverActions: "hoverActions", hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BarsEventsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: BarsEventsDirective, isStandalone: true, selector: "[vicBarsEvents]", inputs: { hoverActions: "hoverActions", hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BarsEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BarsEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vicBarsEvents]',
@@ -4218,11 +4222,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             }] } });
 
 class VicBarsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicBarsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: VicBarsModule, imports: [BarsComponent, BarsEventsDirective], exports: [BarsComponent, BarsEventsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicBarsModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicBarsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: VicBarsModule, imports: [BarsComponent, BarsEventsDirective], exports: [BarsComponent, BarsEventsDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicBarsModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicBarsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicBarsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [BarsComponent, BarsEventsDirective],
@@ -5209,10 +5213,10 @@ class VicBarsConfigBuilder extends PrimaryMarksBuilder {
     getQuantitativeDimensionName() {
         return this._orientation === 'horizontal' ? 'X' : 'Y';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicBarsConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicBarsConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicBarsConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicBarsConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicBarsConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicBarsConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -5279,10 +5283,10 @@ class ResizeChartHeightPipe {
             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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ResizeChartHeightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: ResizeChartHeightPipe, isStandalone: true, name: "resizeChartHeight" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ResizeChartHeightPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ResizeChartHeightPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'resizeChartHeight',
@@ -5608,10 +5612,10 @@ class VicDataExport {
         const blob = new Blob(blobParts, { type: 'text/csv;charset=utf-8' });
         saveAs.saveAs(blob, `${name}.csv`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicDataExport, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicDataExport, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicDataExport, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicDataExport, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicDataExport, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicDataExport, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -5941,10 +5945,10 @@ class VicDotsConfigBuilder extends PrimaryMarksBuilder {
             throw new Error('Dots Builder: Exactly one Y dimension is required. Please use one of `yDate`, `yNumeric`, or `yOrdinal` to set it.');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicDotsConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicDotsConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicDotsConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicDotsConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicDotsConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicDotsConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -6074,14 +6078,14 @@ class DotsComponent extends VicXyPrimaryMarks {
         return ('formatSpecifier' in dimension &&
             typeof dimension.formatSpecifier === 'string');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DotsComponent, isStandalone: true, selector: "[vic-primary-marks-dots]", host: { properties: { "class": "config.marksClass", "style.mixed-blend-mode": "config.mixBlendMode" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DotsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: DotsComponent, isStandalone: true, selector: "[vic-primary-marks-dots]", host: { properties: { "class": "config.marksClass", "style.mixed-blend-mode": "config.mixBlendMode" } }, providers: [
             { provide: VIC_PRIMARY_MARKS, useExisting: DotsComponent },
             { provide: DOTS, useExisting: DotsComponent },
             { provide: ChartComponent, useExisting: XyChartComponent },
         ], usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DotsComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-primary-marks-dots]', template: '', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: VIC_PRIMARY_MARKS, useExisting: DotsComponent },
@@ -6251,10 +6255,10 @@ class DotsEventsDirective extends EventsDirective {
         this.positionX = undefined;
         this.positionY = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotsEventsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: DotsEventsDirective, isStandalone: true, selector: "[vicDotsEvents]", inputs: { hoverActions: "hoverActions", hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DotsEventsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: DotsEventsDirective, isStandalone: true, selector: "[vicDotsEvents]", inputs: { hoverActions: "hoverActions", hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotsEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DotsEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vicDotsEvents]',
@@ -6272,11 +6276,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             }] } });
 
 class VicDotsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicDotsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: VicDotsModule, imports: [DotsComponent, DotsEventsDirective], exports: [DotsComponent, DotsEventsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicDotsModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicDotsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: VicDotsModule, imports: [DotsComponent, DotsEventsDirective], exports: [DotsComponent, DotsEventsDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicDotsModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicDotsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicDotsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DotsComponent, DotsEventsDirective],
@@ -6698,13 +6702,11 @@ class GeographiesAttributeDataLayer extends GeographiesLayer {
             ? this.getPatternFill(geographyIndex)
             : this.getAttributeFill(geographyIndex);
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     getPatternFill(geographyIndex) {
         const datum = this.datumsByGeographyIndex.get(geographyIndex);
         const geographyFill = this.getAttributeFill(geographyIndex);
         return FillUtilities.getFill(datum, geographyFill, this.customFills);
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     getAttributeFill(geographyIndex) {
         const dataValue = this.attributeValuesByGeographyIndex.get(geographyIndex);
         return this.attributeScale(dataValue);
@@ -7538,10 +7540,10 @@ class VicGeographiesConfigBuilder {
             throw new Error('At least one layer is required');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGeographiesConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGeographiesConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicGeographiesConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicGeographiesConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGeographiesConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicGeographiesConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -7721,8 +7723,8 @@ class GeographiesComponent extends MapPrimaryMarks {
         }, []);
         this.pathsByLayer.next(pathsByLayer);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GeographiesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: GeographiesComponent, isStandalone: true, selector: "[vic-primary-marks-geographies]", host: { properties: { "class": "config.marksClass", "style.mixed-blend-mode": "config.mixBlendMode" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: GeographiesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", 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,
@@ -7734,7 +7736,7 @@ class GeographiesComponent extends MapPrimaryMarks {
             },
         ], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GeographiesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: GeographiesComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-primary-marks-geographies]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: VIC_PRIMARY_MARKS, useExisting: GeographiesComponent },
@@ -7911,10 +7913,10 @@ class GeographiesEventsDirective extends EventsDirective {
         this.positionY = undefined;
         this.layer = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GeographiesEventsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: GeographiesEventsDirective, isStandalone: true, selector: "[vicGeographiesEvents]", inputs: { hoverActions: "hoverActions", hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: GeographiesEventsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: GeographiesEventsDirective, isStandalone: true, selector: "[vicGeographiesEvents]", inputs: { hoverActions: "hoverActions", hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GeographiesEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: GeographiesEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vicGeographiesEvents]',
@@ -7936,11 +7938,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  */
 
 class VicGeographiesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGeographiesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: VicGeographiesModule, imports: [GeographiesComponent, GeographiesEventsDirective], exports: [GeographiesComponent, GeographiesEventsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGeographiesModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicGeographiesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: VicGeographiesModule, imports: [GeographiesComponent, GeographiesEventsDirective], exports: [GeographiesComponent, GeographiesEventsDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicGeographiesModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGeographiesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicGeographiesModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [GeographiesComponent, GeographiesEventsDirective],
@@ -8014,10 +8016,10 @@ class VicGroupedBarsConfigBuilder extends VicBarsConfigBuilder {
             quantitative: this.quantitativeDimensionBuilder._build(this.getQuantitativeDimensionName()),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGroupedBarsConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGroupedBarsConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicGroupedBarsConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicGroupedBarsConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGroupedBarsConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicGroupedBarsConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -8162,10 +8164,10 @@ class GroupedBarsEventsDirective extends EventsDirective {
         this.positionX = undefined;
         this.positionY = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GroupedBarsEventsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: GroupedBarsEventsDirective, isStandalone: true, selector: "[vicGroupedBarsEvents]", inputs: { hoverActions: "hoverActions", hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: GroupedBarsEventsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: GroupedBarsEventsDirective, isStandalone: true, selector: "[vicGroupedBarsEvents]", inputs: { hoverActions: "hoverActions", hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GroupedBarsEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: GroupedBarsEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vicGroupedBarsEvents]',
@@ -8231,14 +8233,14 @@ class GroupedBarsComponent extends BarsComponent {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         return this.groupScale.bandwidth();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GroupedBarsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: GroupedBarsComponent, isStandalone: true, selector: "[vic-primary-grouped-bars]", inputs: { config: "config" }, host: { properties: { "class": "config.marksClass", "style.mixBlendMode": "config.mixBlendMode" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: GroupedBarsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: GroupedBarsComponent, isStandalone: true, selector: "[vic-primary-grouped-bars]", inputs: { config: "config" }, host: { properties: { "class": "config.marksClass", "style.mixBlendMode": "config.mixBlendMode" } }, providers: [
             { provide: VIC_PRIMARY_MARKS, useExisting: GroupedBarsComponent },
             { provide: BARS, useExisting: GroupedBarsComponent },
             { provide: ChartComponent, useExisting: XyChartComponent },
         ], usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: GroupedBarsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: GroupedBarsComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-primary-grouped-bars]', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: VIC_PRIMARY_MARKS, useExisting: GroupedBarsComponent },
@@ -8254,11 +8256,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             }] } });
 
 class VicGroupedBarsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGroupedBarsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: VicGroupedBarsModule, imports: [GroupedBarsComponent, GroupedBarsEventsDirective], exports: [GroupedBarsComponent, GroupedBarsEventsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGroupedBarsModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicGroupedBarsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: VicGroupedBarsModule, imports: [GroupedBarsComponent, GroupedBarsEventsDirective], exports: [GroupedBarsComponent, GroupedBarsEventsDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicGroupedBarsModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicGroupedBarsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicGroupedBarsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [GroupedBarsComponent, GroupedBarsEventsDirective],
@@ -8342,10 +8344,10 @@ class VicImageDownloadService {
         link.href = dataUrl;
         link.click();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicImageDownloadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicImageDownloadService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicImageDownloadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicImageDownloadService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicImageDownloadService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicImageDownloadService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -8767,10 +8769,10 @@ class VicLinesConfigBuilder extends PrimaryMarksBuilder {
             throw new Error('Lines Builder: Y dimension is required. Please use method `createYDimension` to set it.');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicLinesConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicLinesConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicLinesConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicLinesConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicLinesConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicLinesConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -9128,14 +9130,14 @@ class LinesComponent extends VicXyPrimaryMarks {
             origin: this.chart.svgRef.nativeElement,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LinesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: LinesComponent, isStandalone: true, selector: "[vic-primary-marks-lines]", host: { attributes: { "fill": "none" }, properties: { "class": "config.marksClass", "attr.stroke-linecap": "config.stroke.linecap", "attr.stroke-linejoin": "config.stroke.linejoin", "attr.stroke-width": "config.stroke.width", "attr.stroke-opacity": "config.stroke.opacity", "style.mix-blend-mode": "config.mixBlendMode" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LinesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: LinesComponent, isStandalone: true, selector: "[vic-primary-marks-lines]", host: { attributes: { "fill": "none" }, properties: { "class": "config.marksClass", "attr.stroke-linecap": "config.stroke.linecap", "attr.stroke-linejoin": "config.stroke.linejoin", "attr.stroke-width": "config.stroke.width", "attr.stroke-opacity": "config.stroke.opacity", "style.mix-blend-mode": "config.mixBlendMode" } }, providers: [
             { provide: VIC_PRIMARY_MARKS, useExisting: LinesComponent },
             { provide: LINES, useExisting: LinesComponent },
             { provide: ChartComponent, useExisting: XyChartComponent },
         ], usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LinesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LinesComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-primary-marks-lines]', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: VIC_PRIMARY_MARKS, useExisting: LinesComponent },
@@ -9260,7 +9262,6 @@ class LinesEventsDirective extends EventsDirective {
             this.clickActions.forEach((action) => action.onEnd(this));
         }
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
     onInputEvent(inputValue) {
         if (this.isEventAllowed(EventType.Input)) {
             if (inputValue === null || inputValue === undefined) {
@@ -9344,10 +9345,10 @@ class LinesEventsDirective extends EventsDirective {
         this.positionX = undefined;
         this.positionY = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LinesEventsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: LinesEventsDirective, isStandalone: true, selector: "[vicLinesEvents]", inputs: { hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LinesEventsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: LinesEventsDirective, isStandalone: true, selector: "[vicLinesEvents]", inputs: { hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LinesEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LinesEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vicLinesEvents]',
@@ -9363,11 +9364,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             }] } });
 
 class VicLinesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicLinesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: VicLinesModule, imports: [LinesComponent, LinesEventsDirective], exports: [LinesComponent, LinesEventsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicLinesModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicLinesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: VicLinesModule, imports: [LinesComponent, LinesEventsDirective], exports: [LinesComponent, LinesEventsDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicLinesModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicLinesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicLinesModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [LinesComponent, LinesEventsDirective],
@@ -9429,10 +9430,10 @@ class MapLegend {
         this.largerValueSpace = 0;
         this.leftOffset = 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MapLegend, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: MapLegend, isStandalone: true, inputs: { width: "width", height: "height", orientation: "orientation", valuesSide: "valuesSide", scale: "scale", config: "config", outlineColor: "outlineColor" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: MapLegend, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: MapLegend, isStandalone: true, inputs: { width: "width", height: "height", orientation: "orientation", valuesSide: "valuesSide", scale: "scale", config: "config", outlineColor: "outlineColor" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MapLegend, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: MapLegend, decorators: [{
             type: Directive
         }], propDecorators: { width: [{
                 type: Input
@@ -9503,12 +9504,12 @@ class ContinuousLegendComponent extends MapLegend {
             ctx.fillRect(0, i, 1, 1);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContinuousLegendComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ContinuousLegendComponent, isStandalone: true, selector: "vic-continuous-legend", viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"vic-legend-color-scale vic-continuous\"\n  [ngClass]=\"['vic-' + orientation, 'vic-' + valuesSide]\"\n  [style.--width]=\"width + 'px'\"\n  [style.--height]=\"height + 'px'\"\n  [style.--border-color]=\"outlineColor\"\n  [style.--value-space]=\"largerValueSpace + 'px'\"\n  [style.left.px]=\"leftOffset\"\n>\n  @if ((orientation === 'vertical' && valuesSide === 'left') || (orientation ===\n  'horizontal' && valuesSide === 'top')) {\n  <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n  }\n  <div class=\"vic-legend-canvas-container\">\n    <canvas class=\"vic-legend-canvas\" #canvas></canvas>\n  </div>\n  @if ((orientation === 'vertical' && valuesSide === 'right') || (orientation\n  === 'horizontal' && valuesSide === 'bottom')) {\n  <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n  }\n</div>\n\n<ng-template #valuesDisplay>\n  <div class=\"vic-legend-values-container vic-continuous\">\n    <p class=\"vic-value vic-low\">{{ values[0] }}</p>\n    <p class=\"vic-value vic-high\">{{ values[values.length - 1] }}</p>\n  </div>\n</ng-template>\n", styles: [".vic-legend-canvas{display:block}.vic-legend-color-scale.vic-horizontal{display:flex;flex-direction:column;position:relative;max-width:var(--width)}.vic-legend-color-scale.vic-horizontal .vic-legend-canvas-container{display:flex;flex-direction:column;width:calc(var(--width) - var(--value-space) * 2);height:var(--height);margin-right:var(--value-space);margin-left:var(--value-space)}.vic-legend-color-scale.vic-horizontal .vic-legend-values-container{padding-top:.25rem;display:flex;flex-direction:row;justify-content:space-between}.vic-legend-color-scale.vic-horizontal .vic-value{width:calc(var(--value-space) * 2);text-align:center}.vic-legend-color-scale.vic-horizontal.vic-top .vic-legend-values-container{padding-top:0;padding-bottom:.25rem}.vic-legend-color-scale.vic-vertical{display:flex;max-height:var(--height)}.vic-legend-color-scale.vic-vertical .vic-legend-canvas-container{width:var(--width);height:calc(var(--height) - grid-2 * 2);margin-top:.5rem;margin-bottom:.5rem}.vic-legend-color-scale.vic-vertical .vic-legend-values-container{padding-right:.25rem;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}.vic-legend-color-scale.vic-vertical.vic-right .vic-legend-values-container{padding-right:0;padding-left:.25rem;align-items:flex-start}.vic-legend-canvas-container{border:1px solid var(--border-color)}.vic-value{font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ContinuousLegendComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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  @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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContinuousLegendComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ContinuousLegendComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vic-continuous-legend', imports: [CommonModule], template: "<div\n  class=\"vic-legend-color-scale vic-continuous\"\n  [ngClass]=\"['vic-' + orientation, 'vic-' + valuesSide]\"\n  [style.--width]=\"width + 'px'\"\n  [style.--height]=\"height + 'px'\"\n  [style.--border-color]=\"outlineColor\"\n  [style.--value-space]=\"largerValueSpace + 'px'\"\n  [style.left.px]=\"leftOffset\"\n>\n  @if ((orientation === 'vertical' && valuesSide === 'left') || (orientation ===\n  'horizontal' && valuesSide === 'top')) {\n  <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n  }\n  <div class=\"vic-legend-canvas-container\">\n    <canvas class=\"vic-legend-canvas\" #canvas></canvas>\n  </div>\n  @if ((orientation === 'vertical' && valuesSide === 'right') || (orientation\n  === 'horizontal' && valuesSide === 'bottom')) {\n  <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n  }\n</div>\n\n<ng-template #valuesDisplay>\n  <div class=\"vic-legend-values-container vic-continuous\">\n    <p class=\"vic-value vic-low\">{{ values[0] }}</p>\n    <p class=\"vic-value vic-high\">{{ values[values.length - 1] }}</p>\n  </div>\n</ng-template>\n", styles: [".vic-legend-canvas{display:block}.vic-legend-color-scale.vic-horizontal{display:flex;flex-direction:column;position:relative;max-width:var(--width)}.vic-legend-color-scale.vic-horizontal .vic-legend-canvas-container{display:flex;flex-direction:column;width:calc(var(--width) - var(--value-space) * 2);height:var(--height);margin-right:var(--value-space);margin-left:var(--value-space)}.vic-legend-color-scale.vic-horizontal .vic-legend-values-container{padding-top:.25rem;display:flex;flex-direction:row;justify-content:space-between}.vic-legend-color-scale.vic-horizontal .vic-value{width:calc(var(--value-space) * 2);text-align:center}.vic-legend-color-scale.vic-horizontal.vic-top .vic-legend-values-container{padding-top:0;padding-bottom:.25rem}.vic-legend-color-scale.vic-vertical{display:flex;max-height:var(--height)}.vic-legend-color-scale.vic-vertical .vic-legend-canvas-container{width:var(--width);height:calc(var(--height) - grid-2 * 2);margin-top:.5rem;margin-bottom:.5rem}.vic-legend-color-scale.vic-vertical .vic-legend-values-container{padding-right:.25rem;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}.vic-legend-color-scale.vic-vertical.vic-right .vic-legend-values-container{padding-right:0;padding-left:.25rem;align-items:flex-start}.vic-legend-canvas-container{border:1px solid var(--border-color)}.vic-value{font-size:12px}\n"] }]
+            args: [{ selector: 'vic-continuous-legend', changeDetection: ChangeDetectionStrategy.Eager, 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 }]
@@ -9546,12 +9547,12 @@ class DiscontinuousLegendComponent extends MapLegend {
             return 0;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DiscontinuousLegendComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DiscontinuousLegendComponent, isStandalone: true, selector: "vic-discontinuous-legend", usesInheritance: true, ngImport: i0, template: "<div\n  class=\"vic-legend-color-scale vic-discontinuous\"\n  [ngClass]=\"['vic-' + orientation, 'vic-' + valuesSide]\"\n  [class.vic-categorical]=\"config.binType === VicValuesBin.categorical\"\n  [style.--border-color]=\"outlineColor\"\n  [style.--width]=\"width + 'px'\"\n  [style.--height]=\"height + 'px'\"\n  [style.--num-colors]=\"colors.length\"\n  [style.--value-space]=\"largerValueSpace + 'px'\"\n  [style.left.px]=\"leftOffset\"\n>\n  @if ((orientation === 'vertical' && valuesSide === 'left') || (orientation ===\n  'horizontal' && valuesSide === 'top')) {\n  <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n  }\n  <div class=\"vic-legend-colors-container\">\n    @if (config.binType !== VicValuesBin.categorical) {\n    <div class=\"vic-legend-color-padding\"></div>\n    } @for (color of colors; track $index) {\n    <div\n      class=\"vic-legend-color vic-discontinuous\"\n      [style.background-color]=\"color\"\n      [style.--border-color]=\"outlineColor\"\n    >\n    </div>\n    }\n  </div>\n  @if ((orientation === 'vertical' && valuesSide === 'right') || (orientation\n  === 'horizontal' && valuesSide === 'bottom')) {\n  <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n  }\n</div>\n\n<ng-template #valuesDisplay>\n  <div class=\"vic-legend-values-container vic-discontinous\">\n    @for (value of values; track $index) {\n    <p class=\"vic-value\"> {{ value }} </p>\n    }\n  </div>\n</ng-template>\n", styles: [".vic-legend-color-scale.vic-horizontal{display:flex;flex-direction:column;position:relative}.vic-legend-color-scale.vic-horizontal .vic-legend-colors-container{display:grid;grid-template-columns:minmax(var(--value-space),.5fr) repeat(var(--num-colors),minmax(calc(var(--value-space) * 2),1fr)) minmax(var(--value-space),.5fr);max-width:var(--width);height:var(--height)}.vic-legend-color-scale.vic-horizontal .vic-legend-colors-container .vic-legend-color{height:100%;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);border-left:1px solid var(--border-color)}.vic-legend-color-scale.vic-horizontal .vic-legend-colors-container .vic-legend-color:last-child{border-right:1px solid var(--border-color)}.vic-legend-color-scale.vic-horizontal .vic-legend-values-container{padding-top:.25rem;display:grid;grid-template-columns:repeat(calc(var(--num-colors) + 1),minmax(calc(var(--value-space) * 2),1fr));max-width:var(--width);justify-items:center}.vic-legend-color-scale.vic-horizontal.vic-top .vic-legend-values-container{padding-top:0;padding-bottom:.25rem}.vic-legend-color-scale.vic-horizontal.vic-categorical .vic-legend-colors-container,.vic-legend-color-scale.vic-horizontal.vic-categorical .vic-legend-values-container{column-gap:.5rem;grid-template-columns:repeat(calc(var(--num-colors)),1fr)}.vic-legend-color-scale.vic-horizontal.vic-categorical .vic-value{text-align:center}.vic-legend-color-scale.vic-categorical .vic-legend-color{border:1px solid var(--border-color)}.vic-legend-color-scale.vic-vertical{display:flex;height:var(--height)}.vic-legend-color-scale.vic-vertical .vic-legend-colors-container{display:grid;grid-template-columns:var(--width);grid-template-rows:.5fr repeat(var(--num-colors),1fr) .5fr;height:100%}.vic-legend-color-scale.vic-vertical .vic-legend-colors-container .vic-legend-color{width:100%;border-top:1px solid var(--border-color);border-left:1px solid var(--border-color);border-right:1px solid var(--border-color)}.vic-legend-color-scale.vic-vertical .vic-legend-colors-container .vic-legend-color:last-child{border-bottom:1px solid var(--border-color)}.vic-legend-color-scale.vic-vertical .vic-legend-values-container{padding-right:.25rem;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(calc(var(--num-colors) + 1),1fr);align-items:center;justify-items:end;height:100%}.vic-legend-color-scale.vic-vertical.vic-right .vic-legend-values-container{padding-right:0;padding-left:.25rem;justify-items:start}.vic-legend-color-scale.vic-vertical.vic-categorical .vic-legend-colors-container,.vic-legend-color-scale.vic-vertical.vic-categorical .vic-legend-values-container{grid-template-rows:repeat(var(--num-colors),1fr);row-gap:.5rem}.vic-legend-color-scale.vic-vertical.vic-categorical .vic-value{text-align:right}.vic-legend-color-scale.vic-vertical.vic-categorical.vic-right .vic-value{text-align:left}.vic-value{font-size:12px;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DiscontinuousLegendComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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  @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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DiscontinuousLegendComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DiscontinuousLegendComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vic-discontinuous-legend', imports: [CommonModule], template: "<div\n  class=\"vic-legend-color-scale vic-discontinuous\"\n  [ngClass]=\"['vic-' + orientation, 'vic-' + valuesSide]\"\n  [class.vic-categorical]=\"config.binType === VicValuesBin.categorical\"\n  [style.--border-color]=\"outlineColor\"\n  [style.--width]=\"width + 'px'\"\n  [style.--height]=\"height + 'px'\"\n  [style.--num-colors]=\"colors.length\"\n  [style.--value-space]=\"largerValueSpace + 'px'\"\n  [style.left.px]=\"leftOffset\"\n>\n  @if ((orientation === 'vertical' && valuesSide === 'left') || (orientation ===\n  'horizontal' && valuesSide === 'top')) {\n  <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n  }\n  <div class=\"vic-legend-colors-container\">\n    @if (config.binType !== VicValuesBin.categorical) {\n    <div class=\"vic-legend-color-padding\"></div>\n    } @for (color of colors; track $index) {\n    <div\n      class=\"vic-legend-color vic-discontinuous\"\n      [style.background-color]=\"color\"\n      [style.--border-color]=\"outlineColor\"\n    >\n    </div>\n    }\n  </div>\n  @if ((orientation === 'vertical' && valuesSide === 'right') || (orientation\n  === 'horizontal' && valuesSide === 'bottom')) {\n  <ng-container *ngTemplateOutlet=\"valuesDisplay\"></ng-container>\n  }\n</div>\n\n<ng-template #valuesDisplay>\n  <div class=\"vic-legend-values-container vic-discontinous\">\n    @for (value of values; track $index) {\n    <p class=\"vic-value\"> {{ value }} </p>\n    }\n  </div>\n</ng-template>\n", styles: [".vic-legend-color-scale.vic-horizontal{display:flex;flex-direction:column;position:relative}.vic-legend-color-scale.vic-horizontal .vic-legend-colors-container{display:grid;grid-template-columns:minmax(var(--value-space),.5fr) repeat(var(--num-colors),minmax(calc(var(--value-space) * 2),1fr)) minmax(var(--value-space),.5fr);max-width:var(--width);height:var(--height)}.vic-legend-color-scale.vic-horizontal .vic-legend-colors-container .vic-legend-color{height:100%;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);border-left:1px solid var(--border-color)}.vic-legend-color-scale.vic-horizontal .vic-legend-colors-container .vic-legend-color:last-child{border-right:1px solid var(--border-color)}.vic-legend-color-scale.vic-horizontal .vic-legend-values-container{padding-top:.25rem;display:grid;grid-template-columns:repeat(calc(var(--num-colors) + 1),minmax(calc(var(--value-space) * 2),1fr));max-width:var(--width);justify-items:center}.vic-legend-color-scale.vic-horizontal.vic-top .vic-legend-values-container{padding-top:0;padding-bottom:.25rem}.vic-legend-color-scale.vic-horizontal.vic-categorical .vic-legend-colors-container,.vic-legend-color-scale.vic-horizontal.vic-categorical .vic-legend-values-container{column-gap:.5rem;grid-template-columns:repeat(calc(var(--num-colors)),1fr)}.vic-legend-color-scale.vic-horizontal.vic-categorical .vic-value{text-align:center}.vic-legend-color-scale.vic-categorical .vic-legend-color{border:1px solid var(--border-color)}.vic-legend-color-scale.vic-vertical{display:flex;height:var(--height)}.vic-legend-color-scale.vic-vertical .vic-legend-colors-container{display:grid;grid-template-columns:var(--width);grid-template-rows:.5fr repeat(var(--num-colors),1fr) .5fr;height:100%}.vic-legend-color-scale.vic-vertical .vic-legend-colors-container .vic-legend-color{width:100%;border-top:1px solid var(--border-color);border-left:1px solid var(--border-color);border-right:1px solid var(--border-color)}.vic-legend-color-scale.vic-vertical .vic-legend-colors-container .vic-legend-color:last-child{border-bottom:1px solid var(--border-color)}.vic-legend-color-scale.vic-vertical .vic-legend-values-container{padding-right:.25rem;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(calc(var(--num-colors) + 1),1fr);align-items:center;justify-items:end;height:100%}.vic-legend-color-scale.vic-vertical.vic-right .vic-legend-values-container{padding-right:0;padding-left:.25rem;justify-items:start}.vic-legend-color-scale.vic-vertical.vic-categorical .vic-legend-colors-container,.vic-legend-color-scale.vic-vertical.vic-categorical .vic-legend-values-container{grid-template-rows:repeat(var(--num-colors),1fr);row-gap:.5rem}.vic-legend-color-scale.vic-vertical.vic-categorical .vic-value{text-align:right}.vic-legend-color-scale.vic-vertical.vic-categorical.vic-right .vic-value{text-align:left}.vic-value{font-size:12px;line-height:1}\n"] }]
+            args: [{ selector: 'vic-discontinuous-legend', changeDetection: ChangeDetectionStrategy.Eager, 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;
@@ -9594,12 +9595,12 @@ class MapLegendComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MapLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MapLegendComponent, isStandalone: true, selector: "vic-map-legend", inputs: { width: "width", height: "height", valuesSide: "valuesSide", outlineColor: "outlineColor" }, viewQueries: [{ propertyName: "VicValuesBin", first: true, predicate: ["canvas"], descendants: true, static: true }], ngImport: i0, template: "<ng-content select=\"[title]\"></ng-content>\n@if (chart.attributeProperties$ | async; as attributeProperties) { @if\n(attributeProperties.config) { @if (attributeProperties.config.binType ===\nVicValuesBin.none) {\n<vic-continuous-legend\n  [width]=\"width\"\n  [height]=\"height\"\n  [valuesSide]=\"valuesSide\"\n  [scale]=\"attributeProperties.scale\"\n  [config]=\"attributeProperties.config\"\n  [outlineColor]=\"outlineColor\"\n  [orientation]=\"orientation\"\n></vic-continuous-legend>\n} @else {\n<vic-discontinuous-legend\n  [width]=\"width\"\n  [height]=\"height\"\n  [valuesSide]=\"valuesSide\"\n  [scale]=\"attributeProperties.scale\"\n  [config]=\"attributeProperties.config\"\n  [outlineColor]=\"outlineColor\"\n  [orientation]=\"orientation\"\n></vic-discontinuous-legend>\n} } }\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContinuousLegendComponent, selector: "vic-continuous-legend" }, { kind: "component", type: DiscontinuousLegendComponent, selector: "vic-discontinuous-legend" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: MapLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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) { @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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MapLegendComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: MapLegendComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vic-map-legend', imports: [
+            args: [{ selector: 'vic-map-legend', changeDetection: ChangeDetectionStrategy.Eager, imports: [
                         CommonModule,
                         ContinuousLegendComponent,
                         DiscontinuousLegendComponent,
@@ -9618,11 +9619,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             }] } });
 
 class VicMapLegendModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicMapLegendModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: VicMapLegendModule, imports: [MapLegendComponent], exports: [MapLegendComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicMapLegendModule, imports: [MapLegendComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicMapLegendModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: VicMapLegendModule, imports: [MapLegendComponent], exports: [MapLegendComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicMapLegendModule, imports: [MapLegendComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicMapLegendModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicMapLegendModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [MapLegendComponent],
@@ -9852,10 +9853,10 @@ class VicQuantitativeRulesConfigBuilder extends VicAuxMarksBuilder {
             this.labelsBuilder.validateBuilder(this._orientation, this._color);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicQuantitativeRulesConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicQuantitativeRulesConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicQuantitativeRulesConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicQuantitativeRulesConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicQuantitativeRulesConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicQuantitativeRulesConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -10020,10 +10021,10 @@ class QuantitativeRulesComponent extends XyAuxMarks {
         }
         return this.scales.y.range()[1];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: QuantitativeRulesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: QuantitativeRulesComponent, isStandalone: true, selector: "[vic-quantitative-rules]", host: { properties: { "class": "config.marksClass" } }, providers: [{ provide: ChartComponent, useExisting: XyChartComponent }], usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: QuantitativeRulesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: QuantitativeRulesComponent, isStandalone: true, selector: "[vic-quantitative-rules]", host: { properties: { "class": "config.marksClass" } }, providers: [{ provide: ChartComponent, useExisting: XyChartComponent }], usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: QuantitativeRulesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: QuantitativeRulesComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-quantitative-rules]', template: '', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: ChartComponent, useExisting: XyChartComponent }], host: {
                         '[class]': 'config.marksClass',
@@ -10031,11 +10032,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
         }] });
 
 class VicQuantitativeRulesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicQuantitativeRulesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: VicQuantitativeRulesModule, imports: [QuantitativeRulesComponent], exports: [QuantitativeRulesComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicQuantitativeRulesModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicQuantitativeRulesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: VicQuantitativeRulesModule, imports: [QuantitativeRulesComponent], exports: [QuantitativeRulesComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicQuantitativeRulesModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicQuantitativeRulesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicQuantitativeRulesModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [QuantitativeRulesComponent],
@@ -10205,10 +10206,10 @@ class VicStackedAreaConfigBuilder extends PrimaryMarksBuilder {
             throw new Error('Stacked Area Builder: Y dimension must be created. Please use method `y` to set the y dimension.');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedAreaConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedAreaConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicStackedAreaConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicStackedAreaConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedAreaConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicStackedAreaConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -10342,14 +10343,14 @@ class StackedAreaComponent extends VicXyPrimaryMarks {
     updateStackedAreaElements() {
         this.stackedAreas.next(this.areas);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StackedAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: StackedAreaComponent, isStandalone: true, selector: "[vic-primary-marks-stacked-area]", host: { properties: { "class": "config.marksClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: StackedAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: StackedAreaComponent, isStandalone: true, selector: "[vic-primary-marks-stacked-area]", host: { properties: { "class": "config.marksClass" } }, providers: [
             { provide: VIC_PRIMARY_MARKS, useExisting: StackedAreaComponent },
             { provide: STACKED_AREA, useExisting: StackedAreaComponent },
             { provide: ChartComponent, useExisting: XyChartComponent },
         ], usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StackedAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: StackedAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-primary-marks-stacked-area]', template: '', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: VIC_PRIMARY_MARKS, useExisting: StackedAreaComponent },
@@ -10534,10 +10535,10 @@ class StackedAreaEventsDirective extends EventsDirective {
         this.categoryYMax = undefined;
         this.categoryIndex = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StackedAreaEventsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: StackedAreaEventsDirective, isStandalone: true, selector: "[vicStackedAreaEvents]", inputs: { hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: StackedAreaEventsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: StackedAreaEventsDirective, isStandalone: true, selector: "[vicStackedAreaEvents]", inputs: { hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StackedAreaEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: StackedAreaEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vicStackedAreaEvents]',
@@ -10553,11 +10554,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             }] } });
 
 class VicStackedAreaModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: VicStackedAreaModule, imports: [StackedAreaComponent, StackedAreaEventsDirective], exports: [StackedAreaComponent, StackedAreaEventsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedAreaModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicStackedAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: VicStackedAreaModule, imports: [StackedAreaComponent, StackedAreaEventsDirective], exports: [StackedAreaComponent, StackedAreaEventsDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicStackedAreaModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedAreaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicStackedAreaModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [StackedAreaComponent, StackedAreaEventsDirective],
@@ -10658,10 +10659,10 @@ class VicStackedBarsConfigBuilder extends VicBarsConfigBuilder {
             stackOrder: this._stackOrder,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedBarsConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedBarsConfigBuilder }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicStackedBarsConfigBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicStackedBarsConfigBuilder }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedBarsConfigBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicStackedBarsConfigBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -10738,9 +10739,7 @@ class StackedBarsComponent extends BarsComponent {
             .delay((_, i) => i * 20)
             .attr('y', this.scales.y(0))
             .attr('height', 0)
-            .remove()
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        );
+            .remove());
     }
     getStackElementX(datum) {
         if (this.config.dimensions.ordinal === 'x') {
@@ -10779,14 +10778,14 @@ class StackedBarsComponent extends BarsComponent {
     getSourceDatumFromStackedBarDatum(datum) {
         return this.config.data[datum.i];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StackedBarsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: StackedBarsComponent, isStandalone: true, selector: "[vic-primary-marks-stacked-bars]", inputs: { config: "config" }, host: { properties: { "class": "config.marksClass", "style.mixBlendMode": "config.mixBlendMode" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: StackedBarsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: StackedBarsComponent, isStandalone: true, selector: "[vic-primary-marks-stacked-bars]", inputs: { config: "config" }, host: { properties: { "class": "config.marksClass", "style.mixBlendMode": "config.mixBlendMode" } }, providers: [
             { provide: VIC_PRIMARY_MARKS, useExisting: StackedBarsComponent },
             { provide: STACKED_BARS, useExisting: StackedBarsComponent },
             { provide: ChartComponent, useExisting: XyChartComponent },
         ], usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StackedBarsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: StackedBarsComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-primary-marks-stacked-bars]', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: VIC_PRIMARY_MARKS, useExisting: StackedBarsComponent },
@@ -10949,10 +10948,10 @@ class StackedBarsEventsDirective extends EventsDirective {
         this.positionX = undefined;
         this.positionY = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StackedBarsEventsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: StackedBarsEventsDirective, isStandalone: true, selector: "[vicStackedBarsEvents]", inputs: { hoverActions: "hoverActions", hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: StackedBarsEventsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: StackedBarsEventsDirective, isStandalone: true, selector: "[vicStackedBarsEvents]", inputs: { hoverActions: "hoverActions", hoverMoveActions: "hoverMoveActions", clickActions: "clickActions", inputEventActions: "inputEventActions" }, outputs: { interactionOutput: "interactionOutput" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StackedBarsEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: StackedBarsEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vicStackedBarsEvents]',
@@ -10970,11 +10969,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             }] } });
 
 class VicStackedBarsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedBarsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: VicStackedBarsModule, imports: [StackedBarsComponent, StackedBarsEventsDirective], exports: [StackedBarsComponent, StackedBarsEventsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedBarsModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicStackedBarsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: VicStackedBarsModule, imports: [StackedBarsComponent, StackedBarsEventsDirective], exports: [StackedBarsComponent, StackedBarsEventsDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicStackedBarsModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicStackedBarsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicStackedBarsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [StackedBarsComponent, StackedBarsEventsDirective],
@@ -10987,24 +10986,24 @@ class XyBackgroundComponent {
         this.color = 'whitesmoke';
         this.chart = inject(XyChartComponent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XyBackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: XyBackgroundComponent, isStandalone: true, selector: "[vic-xy-background]", inputs: { color: "color" }, host: { classAttribute: "vic-xy-background" }, ngImport: i0, template: "@if(chart.scales$ | async; as scales) { @if(scales.x && scales.y) {\n<svg:rect\n  class=\"vic-xy-background\"\n  [attr.x]=\"scales.x.range()[0]\"\n  [attr.y]=\"scales.y.range()[1]\"\n  [attr.width]=\"scales.x.range()[1] - scales.x.range()[0]\"\n  [attr.height]=\"scales.y.range()[0] - scales.y.range()[1]\"\n  [attr.fill]=\"color\"\n></svg:rect>\n} }\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: XyBackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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: "ngmodule", type: CommonModule }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: XyBackgroundComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: XyBackgroundComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vic-xy-background]', host: {
                         class: 'vic-xy-background',
-                    }, imports: [AsyncPipe, CommonModule], template: "@if(chart.scales$ | async; as scales) { @if(scales.x && scales.y) {\n<svg:rect\n  class=\"vic-xy-background\"\n  [attr.x]=\"scales.x.range()[0]\"\n  [attr.y]=\"scales.y.range()[1]\"\n  [attr.width]=\"scales.x.range()[1] - scales.x.range()[0]\"\n  [attr.height]=\"scales.y.range()[0] - scales.y.range()[1]\"\n  [attr.fill]=\"color\"\n></svg:rect>\n} }\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.Eager, imports: [AsyncPipe, CommonModule], template: "@if(chart.scales$ | async; as scales) { @if(scales.x && scales.y) {\n<svg:rect\n  class=\"vic-xy-background\"\n  [attr.x]=\"scales.x.range()[0]\"\n  [attr.y]=\"scales.y.range()[1]\"\n  [attr.width]=\"scales.x.range()[1] - scales.x.range()[0]\"\n  [attr.height]=\"scales.y.range()[0] - scales.y.range()[1]\"\n  [attr.fill]=\"color\"\n></svg:rect>\n} }\n" }]
         }], propDecorators: { color: [{
                 type: Input
             }] } });
 
 class VicXyBackgroundModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXyBackgroundModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: VicXyBackgroundModule, imports: [XyBackgroundComponent], exports: [XyBackgroundComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXyBackgroundModule, imports: [XyBackgroundComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicXyBackgroundModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: VicXyBackgroundModule, imports: [XyBackgroundComponent], exports: [XyBackgroundComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicXyBackgroundModule, imports: [XyBackgroundComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VicXyBackgroundModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: VicXyBackgroundModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [XyBackgroundComponent],