@visuallyjs/browser-ui-angular 1.1.3 → 1.2.0

package/esm2022/index.mjs

@@ -23,6 +23,7 @@ export * from './lib/edge.type.picker.component';
 export * from './lib/inspector.component';
 export * from './lib/color.tag.component';
 export * from './lib/diagram-component';
+export * from './lib/charts/series.based.chart.component';
 export * from './lib/charts/column.chart.component';
 export * from './lib/charts/bar.chart.component';
 export * from './lib/charts/line.chart.component';
@@ -32,3 +33,5 @@ export * from './lib/charts/pie.chart.component';
 export * from './lib/charts/scatter.chart.component';
 export * from './lib/charts/bubble.chart.component';
 export * from './lib/charts/sankey.chart.component';
+export * from './lib/hooks/use-zoom';
+export * from './lib/hooks/use-visuallyjs-update';

package/esm2022/lib/charts/area.chart.component.mjs

@@ -1,42 +1,14 @@
-import { Component, ElementRef, Input, NgZone, inject } from "@angular/core";
+import { Component, Input } from "@angular/core";
 import { AreaChart } from "@visuallyjs/browser-ui";
-import { VisuallyJsService } from "../vjs-service";
+import { SeriesBasedChartComponent } from "./series.based.chart.component";
 import * as i0 from "@angular/core";
-export class AreaChartComponent {
-    constructor() {
-        this.$vjs = inject(VisuallyJsService);
-        this.$el = inject(ElementRef);
-        this.$ngZone = inject(NgZone);
+
+export class AreaChartComponent extends SeriesBasedChartComponent {
+    createChart(el, options) {
+        return new AreaChart(el, options);
     }
-    _init(dataSource, data, url) {
-        this.$ngZone.runOutsideAngular(() => {
-            const o = Object.assign({}, this.options);
-            Object.assign(o, { dataSource });
-            this.chart = new AreaChart(this.$el.nativeElement, o);
-            if (data) {
-                this.chart.load({ data });
-            }
-            else if (url) {
-                this.chart.load({ url });
-            }
-        });
-    }
-    
-    ngAfterViewInit() {
-        if (this.useModel) {
-            this.$vjs.getModel((p) => {
-                this._init(p, null, null);
-            });
-        }
-        else {
-            this._init(null, this.data, this.url);
-        }
-    }
-    ngOnDestroy() {
-        this.chart?.destroy();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AreaChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AreaChartComponent, selector: "vjs-area-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AreaChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AreaChartComponent, selector: "vjs-area-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AreaChartComponent, decorators: [{
             type: Component,

package/esm2022/lib/charts/bar.chart.component.mjs

@@ -1,42 +1,14 @@
-import { Component, ElementRef, Input, NgZone, inject } from "@angular/core";
+import { Component, Input } from "@angular/core";
 import { BarChart } from "@visuallyjs/browser-ui";
-import { VisuallyJsService } from "../vjs-service";
+import { SeriesBasedChartComponent } from "./series.based.chart.component";
 import * as i0 from "@angular/core";
-export class BarChartComponent {
-    constructor() {
-        this.$vjs = inject(VisuallyJsService);
-        this.$el = inject(ElementRef);
-        this.$ngZone = inject(NgZone);
+
+export class BarChartComponent extends SeriesBasedChartComponent {
+    createChart(el, options) {
+        return new BarChart(el, options);
     }
-    _init(dataSource, data, url) {
-        this.$ngZone.runOutsideAngular(() => {
-            const o = Object.assign({}, this.options);
-            Object.assign(o, { dataSource });
-            this.chart = new BarChart(this.$el.nativeElement, o);
-            if (data) {
-                this.chart.load({ data });
-            }
-            else if (url) {
-                this.chart.load({ url });
-            }
-        });
-    }
-    
-    ngAfterViewInit() {
-        if (this.useModel) {
-            this.$vjs.getModel((p) => {
-                this._init(p, null, null);
-            });
-        }
-        else {
-            this._init(null, this.data, this.url);
-        }
-    }
-    ngOnDestroy() {
-        this.chart?.destroy();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BarChartComponent, selector: "vjs-bar-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BarChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BarChartComponent, selector: "vjs-bar-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BarChartComponent, decorators: [{
             type: Component,

package/esm2022/lib/charts/bubble.chart.component.mjs

@@ -1,42 +1,14 @@
-import { Component, ElementRef, inject, Input, NgZone } from "@angular/core";
+import { Component, Input } from "@angular/core";
 import { BubbleChart } from "@visuallyjs/browser-ui";
-import { VisuallyJsService } from "../vjs-service";
+import { SeriesBasedChartComponent } from "./series.based.chart.component";
 import * as i0 from "@angular/core";
-export class BubbleChartComponent {
-    constructor() {
-        this.$el = inject(ElementRef);
-        this.$ngZone = inject(NgZone);
-        this.$vjs = inject(VisuallyJsService);
+
+export class BubbleChartComponent extends SeriesBasedChartComponent {
+    createChart(el, options) {
+        return new BubbleChart(el, options);
     }
-    _init(dataSource, data, url) {
-        this.$ngZone.runOutsideAngular(() => {
-            const o = Object.assign({}, this.options);
-            Object.assign(o, { dataSource });
-            this.chart = new BubbleChart(this.$el.nativeElement, o);
-            if (data) {
-                this.chart.load({ data });
-            }
-            else if (url) {
-                this.chart.load({ url });
-            }
-        });
-    }
-    
-    ngAfterViewInit() {
-        if (this.useModel) {
-            this.$vjs.getModel((p) => {
-                this._init(p, null, null);
-            });
-        }
-        else {
-            this._init(null, this.data, this.url);
-        }
-    }
-    ngOnDestroy() {
-        this.chart?.destroy();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BubbleChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BubbleChartComponent, selector: "vjs-bubble-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BubbleChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BubbleChartComponent, selector: "vjs-bubble-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BubbleChartComponent, decorators: [{
             type: Component,

package/esm2022/lib/charts/column.chart.component.mjs

@@ -1,42 +1,14 @@
-import { Component, ElementRef, inject, Input, NgZone } from "@angular/core";
+import { Component, Input } from "@angular/core";
 import { ColumnChart } from "@visuallyjs/browser-ui";
-import { VisuallyJsService } from "../vjs-service";
+import { SeriesBasedChartComponent } from "./series.based.chart.component";
 import * as i0 from "@angular/core";
-export class ColumnChartComponent {
-    constructor() {
-        this.$el = inject(ElementRef);
-        this.$ngZone = inject(NgZone);
-        this.$vjs = inject(VisuallyJsService);
+
+export class ColumnChartComponent extends SeriesBasedChartComponent {
+    createChart(el, options) {
+        return new ColumnChart(el, options);
     }
-    _init(dataSource, data, url) {
-        this.$ngZone.runOutsideAngular(() => {
-            const o = Object.assign({}, this.options);
-            Object.assign(o, { dataSource });
-            this.chart = new ColumnChart(this.$el.nativeElement, o);
-            if (data) {
-                this.chart.load({ data });
-            }
-            else if (url) {
-                this.chart.load({ url });
-            }
-        });
-    }
-    
-    ngAfterViewInit() {
-        if (this.useModel) {
-            this.$vjs.getModel((p) => {
-                this._init(p, null, null);
-            });
-        }
-        else {
-            this._init(null, this.data, this.url);
-        }
-    }
-    ngOnDestroy() {
-        this.chart?.destroy();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnChartComponent, selector: "vjs-column-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnChartComponent, selector: "vjs-column-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChartComponent, decorators: [{
             type: Component,

package/esm2022/lib/charts/line.chart.component.mjs

@@ -1,42 +1,14 @@
-import { Component, ElementRef, Input, NgZone, inject } from "@angular/core";
+import { Component, Input } from "@angular/core";
 import { LineChart } from "@visuallyjs/browser-ui";
-import { VisuallyJsService } from "../vjs-service";
+import { SeriesBasedChartComponent } from "./series.based.chart.component";
 import * as i0 from "@angular/core";
-export class LineChartComponent {
-    constructor() {
-        this.$el = inject(ElementRef);
-        this.$ngZone = inject(NgZone);
-        this.$vjs = inject(VisuallyJsService);
+
+export class LineChartComponent extends SeriesBasedChartComponent {
+    createChart(el, options) {
+        return new LineChart(el, options);
     }
-    _init(dataSource, data, url) {
-        this.$ngZone.runOutsideAngular(() => {
-            const o = Object.assign({}, this.options);
-            Object.assign(o, { dataSource });
-            this.chart = new LineChart(this.$el.nativeElement, o);
-            if (data) {
-                this.chart.load({ data });
-            }
-            else if (url) {
-                this.chart.load({ url });
-            }
-        });
-    }
-    
-    ngAfterViewInit() {
-        if (this.useModel) {
-            this.$vjs.getModel((p) => {
-                this._init(p, null, null);
-            });
-        }
-        else {
-            this._init(null, this.data, this.url);
-        }
-    }
-    ngOnDestroy() {
-        this.chart?.destroy();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LineChartComponent, selector: "vjs-line-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LineChartComponent, selector: "vjs-line-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LineChartComponent, decorators: [{
             type: Component,

package/esm2022/lib/charts/pie.chart.component.mjs

@@ -1,42 +1,14 @@
-import { Component, ElementRef, Input, NgZone, inject } from "@angular/core";
+import { Component, Input } from "@angular/core";
 import { PieChart } from "@visuallyjs/browser-ui";
-import { VisuallyJsService } from "../vjs-service";
+import { SeriesBasedChartComponent } from "./series.based.chart.component";
 import * as i0 from "@angular/core";
-export class PieChartComponent {
-    constructor() {
-        this.$el = inject(ElementRef);
-        this.$ngZone = inject(NgZone);
-        this.$vjs = inject(VisuallyJsService);
+
+export class PieChartComponent extends SeriesBasedChartComponent {
+    createChart(el, options) {
+        return new PieChart(el, options);
     }
-    _init(dataSource, data, url) {
-        this.$ngZone.runOutsideAngular(() => {
-            const o = Object.assign({}, this.options);
-            Object.assign(o, { dataSource });
-            this.chart = new PieChart(this.$el.nativeElement, o);
-            if (data) {
-                this.chart.load({ data });
-            }
-            else if (url) {
-                this.chart.load({ url });
-            }
-        });
-    }
-    
-    ngAfterViewInit() {
-        if (this.useModel) {
-            this.$vjs.getModel((p) => {
-                this._init(p, null, null);
-            });
-        }
-        else {
-            this._init(null, this.data, this.url);
-        }
-    }
-    ngOnDestroy() {
-        this.chart?.destroy();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PieChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PieChartComponent, selector: "vjs-pie-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PieChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PieChartComponent, selector: "vjs-pie-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PieChartComponent, decorators: [{
             type: Component,

package/esm2022/lib/charts/sankey.chart.component.mjs

@@ -1,12 +1,21 @@
-import { Component, inject, ElementRef, Input, NgZone } from "@angular/core";
+import { Component, inject, ElementRef, Input, NgZone, effect } from "@angular/core";
 import { SankeyChart } from "@visuallyjs/browser-ui";
 import { VisuallyJsService } from "../vjs-service";
 import * as i0 from "@angular/core";
+
 export class SankeyChartComponent {
     constructor() {
         this.$el = inject(ElementRef);
         this.$ngZone = inject(NgZone);
         this.$vjs = inject(VisuallyJsService);
+        effect(() => {
+            if (this.useModel && this.chart == null) {
+                const m = this.$vjs.model();
+                if (m != null) {
+                    this._init(m, null, null, null);
+                }
+            }
+        });
     }
     
     _init(dataSource, csvData, jsonData, url) {
@@ -29,12 +38,7 @@ export class SankeyChartComponent {
     }
     
     ngAfterViewInit() {
-        if (this.useModel) {
-            this.$vjs.getModel((p) => {
-                this._init(p, null, null, null);
-            });
-        }
-        else {
+        if (!this.useModel) {
             this._init(null, this.csvData, this.jsonData, this.url);
         }
     }
@@ -57,7 +61,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: "vjs-sankey-chart",
                     template: `<div></div>`
                 }]
-        }], propDecorators: { csvData: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { csvData: [{
                 type: Input
             }], jsonData: [{
                 type: Input

package/esm2022/lib/charts/scatter.chart.component.mjs

@@ -1,42 +1,14 @@
-import { Component, ElementRef, inject, Input, NgZone } from "@angular/core";
+import { Component, Input } from "@angular/core";
 import { ScatterChart } from "@visuallyjs/browser-ui";
-import { VisuallyJsService } from "../vjs-service";
+import { SeriesBasedChartComponent } from "./series.based.chart.component";
 import * as i0 from "@angular/core";
-export class ScatterChartComponent {
-    constructor() {
-        this.$el = inject(ElementRef);
-        this.$ngZone = inject(NgZone);
-        this.$vjs = inject(VisuallyJsService);
+
+export class ScatterChartComponent extends SeriesBasedChartComponent {
+    createChart(el, options) {
+        return new ScatterChart(el, options);
     }
-    _init(dataSource, data, url) {
-        this.$ngZone.runOutsideAngular(() => {
-            const o = Object.assign({}, this.options);
-            Object.assign(o, { dataSource });
-            this.chart = new ScatterChart(this.$el.nativeElement, o);
-            if (data) {
-                this.chart.load({ data });
-            }
-            else if (url) {
-                this.chart.load({ url });
-            }
-        });
-    }
-    
-    ngAfterViewInit() {
-        if (this.useModel) {
-            this.$vjs.getModel((p) => {
-                this._init(p, null, null);
-            });
-        }
-        else {
-            this._init(null, this.data, this.url);
-        }
-    }
-    ngOnDestroy() {
-        this.chart?.destroy();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScatterChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ScatterChartComponent, selector: "vjs-scatter-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScatterChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ScatterChartComponent, selector: "vjs-scatter-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScatterChartComponent, decorators: [{
             type: Component,

package/esm2022/lib/charts/series.based.chart.component.mjs

@@ -0,0 +1,54 @@
+import { effect, ElementRef, inject, Injectable, Input, NgZone } from "@angular/core";
+import { VisuallyJsService } from "../vjs-service";
+import * as i0 from "@angular/core";
+
+export class SeriesBasedChartComponent {
+    _init(dataSource, data, url) {
+        this.$ngZone.runOutsideAngular(() => {
+            const o = Object.assign({}, this.options);
+            Object.assign(o, { dataSource });
+            this.chart = this.createChart(this.$el.nativeElement, o);
+            if (data) {
+                this.chart.load({ data });
+            }
+            else if (url) {
+                this.chart.load({ url });
+            }
+        });
+    }
+    constructor() {
+        this.$el = inject(ElementRef);
+        this.$ngZone = inject(NgZone);
+        this.$vjs = inject(VisuallyJsService);
+        effect(() => {
+            if (this.useModel && this.chart == null) {
+                const m = this.$vjs.model();
+                if (m != null) {
+                    this._init(m, null, null);
+                }
+            }
+        });
+    }
+    
+    ngAfterViewInit() {
+        if (!this.useModel) {
+            this._init(null, this.data, this.url);
+        }
+    }
+    ngOnDestroy() {
+        this.chart?.destroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SeriesBasedChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SeriesBasedChartComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SeriesBasedChartComponent, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], useModel: [{
+                type: Input
+            }] } });

package/esm2022/lib/charts/xy.chart.component.mjs

@@ -1,28 +1,14 @@
-import { Component, ElementRef, Input, NgZone, inject } from "@angular/core";
+import { Component, Input } from "@angular/core";
 import { CategoryValueChart } from "@visuallyjs/browser-ui";
+import { SeriesBasedChartComponent } from "./series.based.chart.component";
 import * as i0 from "@angular/core";
-export class XYChartComponent {
-    constructor() {
-        this.$el = inject(ElementRef);
-        this.$ngZone = inject(NgZone);
+
+export class XYChartComponent extends SeriesBasedChartComponent {
+    createChart(el, options) {
+        return new CategoryValueChart(el, options);
     }
-    
-    ngAfterViewInit() {
-        this.$ngZone.runOutsideAngular(() => {
-            this.chart = new CategoryValueChart(this.$el.nativeElement, this.options);
-            if (this.data) {
-                this.chart.load({ data: this.data });
-            }
-            else if (this.url) {
-                this.chart.load({ url: this.url });
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.chart?.destroy();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: XYChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: XYChartComponent, selector: "vjs-xy-chart", inputs: { data: "data", url: "url", options: "options" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: XYChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: XYChartComponent, selector: "vjs-xy-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: XYChartComponent, decorators: [{
             type: Component,
@@ -36,4 +22,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], options: [{
                 type: Input
+            }], useModel: [{
+                type: Input
             }] } });

package/esm2022/lib/color.tag.component.mjs

@@ -1,4 +1,4 @@
-import { Component, ElementRef, Input, Output, EventEmitter, signal, ChangeDetectorRef, inject } from "@angular/core";
+import { Component, ElementRef, Input, Output, EventEmitter, signal, ChangeDetectorRef, inject, effect } from "@angular/core";
 import { CLASS_COLOR_PICKER, CLASS_COLOR_PICKER_SWATCH, CLASS_COLOR_PICKER_SWATCHES, EVENT_CONTEXT_UPDATE, INSPECTOR_CONTEXT_RECENT_COLORS } from "@visuallyjs/browser-ui";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
@@ -14,9 +14,39 @@ export class ColorPickerComponent {
         this.$vjs = inject(VisuallyJsService);
         this.$el = inject(ElementRef);
         this.$cdr = inject(ChangeDetectorRef);
+        this.initialized = false;
+        effect(() => {
+            const i = this.$vjs.inspector();
+            if (!this.initialized) {
+                this.initialized = true;
+                this.swatches.set(i.ensureContext(INSPECTOR_CONTEXT_RECENT_COLORS, () => []));
+                i.bind(EVENT_CONTEXT_UPDATE, (p) => {
+                    if (p.key === INSPECTOR_CONTEXT_RECENT_COLORS) {
+                        this.swatches.set(p.value);
+                        this.$cdr.detectChanges();
+                    }
+                });
+                const colorInput = this.$el.nativeElement.querySelector("[type='color']");
+                colorInput.onchange = () => {
+                    const color = colorInput.value;
+                    this.pushColor(color);
+                    i.setValue(this.propertyName, color, true);
+                };
+                setTimeout(() => {
+                    // if there is a color, maybe push to context
+                    const v = i.getValue(this.propertyName);
+                    if (v != null) {
+                        this.pushColor(v);
+                    }
+                });
+            }
+        });
     }
     $getInspector(cb) {
-        this.$vjs.getInspector(cb);
+        const i = this.$vjs.inspector();
+        if (i != null) {
+            cb(i);
+        }
     }
     selectColor(color) {
         this.$getInspector(inspector => {
@@ -39,30 +69,6 @@ export class ColorPickerComponent {
             }
         });
     }
-    ngAfterViewInit() {
-        this.$getInspector(inspector => {
-            this.swatches.set(inspector.ensureContext(INSPECTOR_CONTEXT_RECENT_COLORS, () => []));
-            inspector.bind(EVENT_CONTEXT_UPDATE, (p) => {
-                if (p.key === INSPECTOR_CONTEXT_RECENT_COLORS) {
-                    this.swatches.set(p.value);
-                    this.$cdr.detectChanges();
-                }
-            });
-            const colorInput = this.$el.nativeElement.querySelector("[type='color']");
-            colorInput.onchange = () => {
-                const color = colorInput.value;
-                this.pushColor(color);
-                inspector.setValue(this.propertyName, color, true);
-            };
-            setTimeout(() => {
-                // if there is a color, maybe push to context
-                const v = inspector.getValue(this.propertyName);
-                if (v != null) {
-                    this.pushColor(v);
-                }
-            });
-        });
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerComponent, selector: "vjs-color", inputs: { propertyName: "propertyName", maxColors: "maxColors" }, outputs: { changeEvent: "changeEvent" }, ngImport: i0, template: "<div class=\"vjs-color-picker\">\n    <input type=\"color\" [attr.vjs-att]=\"propertyName\"/>\n    <div class=\"vjs-color-picker-swatches\">\n      <div *ngFor=\"let swatch of swatches()\" class=\"vjs-color-picker-swatch\" attr.data-color=\"{{swatch}}\" style=\"background-color:{{swatch}}\" (click)=\"selectColor(swatch)\"></div>\n    </div>\n  </div>", isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
@@ -77,7 +83,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
     </div>
   </div>`
                 }]
-        }], propDecorators: { propertyName: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { propertyName: [{
                 type: Input
             }], maxColors: [{
                 type: Input