axidio-styleguide-library1-v2 0.1.73 → 0.1.75

package/fesm2022/axidio-styleguide-library1-v2.mjs

@@ -3583,10 +3583,12 @@ class DropdownComponent {
     }
     handleShowOrHideChildList(parentName, event) {
         event.stopPropagation();
-        if (!this.childDropdownListVisible.includes(parentName))
-            this.childDropdownListVisible.push(parentName);
-        else
-            this.childDropdownListVisible = this.childDropdownListVisible.filter((item) => item != parentName);
+        if (this.childDropdownListVisible.includes(parentName)) {
+            this.childDropdownListVisible = [];
+        }
+        else {
+            this.childDropdownListVisible = [parentName];
+        }
         sessionStorage.setItem('childDropdownListVisible', JSON.stringify(this.childDropdownListVisible));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -7174,21 +7176,57 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
     }
     isZoomOutSelected(isZoomOut) {
         this.isZoomedOut = isZoomOut;
-        this.ngOnChanges();
+        this.clearChart();
+        setTimeout(() => {
+            this.initializeStackedChart();
+        }, 10);
     }
-    ngOnChanges() {
-        let self = this;
-        d3.select('#' + self.uniqueId).remove();
-        this.initializeStackedChart();
+    ngOnChanges(changes) {
+        // Only reinitialize if chartData actually changed and it's not the first change
+        if (changes.chartData && !changes.chartData.firstChange) {
+            this.clearChart();
+            // Small timeout to ensure DOM cleanup is complete
+            setTimeout(() => {
+                this.initializeStackedChart();
+            }, 10);
+        }
+        // Handle configuration changes
+        if (changes.customChartConfiguration && !changes.customChartConfiguration.firstChange) {
+            this.clearChart();
+            setTimeout(() => {
+                this.initializeStackedChart();
+            }, 10);
+        }
+    }
+    clearChart() {
+        try {
+            // Remove all content from container
+            const container = d3.select(this.containerElt.nativeElement);
+            container.selectAll('*').remove();
+            // Remove by unique ID as backup
+            d3.select('#' + this.uniqueId).remove();
+            // Clear any event listeners
+            container.on('click', null);
+            container.on('mouseenter', null);
+            container.on('mouseout', null);
+        }
+        catch (error) {
+            console.warn('Error clearing chart:', error);
+        }
     }
     onResized(event) {
         let self = this;
-        setTimeout(function () {
-            d3.select('#' + self.uniqueId).remove();
+        this.clearChart();
+        setTimeout(() => {
             self.initializeStackedChart();
-        }.bind(self), 10);
+        }, 20); // Slightly longer timeout for resize events
+    }
+    ngOnInit() {
+        // Initialize chart on component init
+        if (this.chartData && this.chartData.data) {
+            this.initializeStackedChart();
+        }
     }
-    ngOnInit() { }
     initializeStackedChart() {
         var self = this;
         let data = [];