@acorex/charts 19.13.2

package/fesm2022/acorex-charts-chart-tooltip.mjs

@@ -0,0 +1,75 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, afterNextRender, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class AXChartTooltipComponent {
+    ngZone;
+    data = input(null);
+    position = input({ x: 0, y: 0 });
+    visible = input(false);
+    /**
+     * Whether to show the tooltip's percentage badge
+     */
+    showPercentage = input(true);
+    /**
+     * Optional custom styling for the tooltip
+     */
+    style = input({});
+    /**
+     * Reference to tooltip container for measuring dimensions
+     */
+    tooltipContainer;
+    // Tooltip dimensions
+    tooltipWidth = 0;
+    tooltipHeight = 0;
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        afterNextRender(() => {
+            // Update tooltip dimensions when visible changes
+            this.updateTooltipDimensions();
+        });
+    }
+    /**
+     * Updates tooltip dimensions after it's rendered
+     */
+    updateTooltipDimensions() {
+        if (this.visible() && this.tooltipContainer) {
+            this.ngZone.runOutsideAngular(() => {
+                // Use requestAnimationFrame to ensure dimensions are calculated after render
+                requestAnimationFrame(() => {
+                    if (this.tooltipContainer?.nativeElement) {
+                        this.tooltipWidth = this.tooltipContainer.nativeElement.offsetWidth;
+                        this.tooltipHeight = this.tooltipContainer.nativeElement.offsetHeight;
+                    }
+                });
+            });
+        }
+    }
+    /**
+     * Get adjusted tooltip position
+     * Exposes properties for parent components to query tooltip dimensions
+     */
+    getDimensions() {
+        return {
+            width: this.tooltipWidth,
+            height: this.tooltipHeight,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXChartTooltipComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: AXChartTooltipComponent, isStandalone: true, selector: "ax-chart-tooltip", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, showPercentage: { classPropertyName: "showPercentage", publicName: "showPercentage", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltipContainer", first: true, predicate: ["tooltipContainer"], descendants: true }], ngImport: i0, template: "@if (visible() && data()) {\n  <div\n    #tooltipContainer\n    class=\"chart-tooltip\"\n    [style.left.px]=\"position().x\"\n    [style.top.px]=\"position().y\"\n    [ngStyle]=\"style()\"\n  >\n    <div class=\"chart-tooltip-title\">{{ data()!.title }}</div>\n    <div class=\"chart-tooltip-content\">\n      @if (data()!.color) {\n        <div class=\"chart-tooltip-color\" [style.background-color]=\"data()!.color\"></div>\n      }\n      <div class=\"chart-tooltip-value\">{{ data()!.value }}</div>\n      @if (showPercentage() && data()!.percentage) {\n        <div class=\"chart-tooltip-percentage\">{{ data()!.percentage }}</div>\n      }\n    </div>\n  </div>\n}\n", styles: [".chart-tooltip{position:absolute;pointer-events:none;background-color:#212121e6;color:#fff;padding:.5rem .75rem;border-radius:.375rem;font-size:.8rem;z-index:10;box-shadow:0 4px 12px #00000026;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.1);transform:translate(10px,-50%);max-width:200px;font-family:var(--ax-font-family, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);transition:opacity .15s ease,transform .15s ease}.chart-tooltip-title{font-weight:600;padding-bottom:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chart-tooltip-content{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.chart-tooltip-color{width:10px;height:10px;border-radius:2px;flex-shrink:0;box-shadow:0 1px 2px #0003}.chart-tooltip-value{font-weight:500;flex-grow:1}.chart-tooltip-percentage{background-color:#fff3;padding:.125rem .375rem;border-radius:1rem;font-size:.7rem;font-weight:500;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXChartTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-chart-tooltip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible() && data()) {\n  <div\n    #tooltipContainer\n    class=\"chart-tooltip\"\n    [style.left.px]=\"position().x\"\n    [style.top.px]=\"position().y\"\n    [ngStyle]=\"style()\"\n  >\n    <div class=\"chart-tooltip-title\">{{ data()!.title }}</div>\n    <div class=\"chart-tooltip-content\">\n      @if (data()!.color) {\n        <div class=\"chart-tooltip-color\" [style.background-color]=\"data()!.color\"></div>\n      }\n      <div class=\"chart-tooltip-value\">{{ data()!.value }}</div>\n      @if (showPercentage() && data()!.percentage) {\n        <div class=\"chart-tooltip-percentage\">{{ data()!.percentage }}</div>\n      }\n    </div>\n  </div>\n}\n", styles: [".chart-tooltip{position:absolute;pointer-events:none;background-color:#212121e6;color:#fff;padding:.5rem .75rem;border-radius:.375rem;font-size:.8rem;z-index:10;box-shadow:0 4px 12px #00000026;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.1);transform:translate(10px,-50%);max-width:200px;font-family:var(--ax-font-family, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);transition:opacity .15s ease,transform .15s ease}.chart-tooltip-title{font-weight:600;padding-bottom:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chart-tooltip-content{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.chart-tooltip-color{width:10px;height:10px;border-radius:2px;flex-shrink:0;box-shadow:0 1px 2px #0003}.chart-tooltip-value{font-weight:500;flex-grow:1}.chart-tooltip-percentage{background-color:#fff3;padding:.125rem .375rem;border-radius:1rem;font-size:.7rem;font-weight:500;flex-shrink:0}\n"] }]
+        }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { tooltipContainer: [{
+                type: ViewChild,
+                args: ['tooltipContainer']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXChartTooltipComponent };
+//# sourceMappingURL=acorex-charts-chart-tooltip.mjs.map

package/fesm2022/acorex-charts-chart-tooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-charts-chart-tooltip.mjs","sources":["../../../../libs/charts/chart-tooltip/src/lib/chart-tooltip.component.ts","../../../../libs/charts/chart-tooltip/src/lib/chart-tooltip.component.html","../../../../libs/charts/chart-tooltip/src/acorex-charts-chart-tooltip.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  NgZone,\n  ViewChild,\n  afterNextRender,\n  input,\n} from '@angular/core';\nimport { AXChartTooltipData } from './chart-tooltip.type';\n\n@Component({\n  selector: 'ax-chart-tooltip',\n  templateUrl: './chart-tooltip.component.html',\n  styleUrls: ['./chart-tooltip.component.scss'],\n  standalone: true,\n  imports: [CommonModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AXChartTooltipComponent {\n  data = input<AXChartTooltipData | null>(null);\n  position = input<{ x: number; y: number }>({ x: 0, y: 0 });\n  visible = input<boolean>(false);\n\n  /**\n   * Whether to show the tooltip's percentage badge\n   */\n  showPercentage = input<boolean>(true);\n\n  /**\n   * Optional custom styling for the tooltip\n   */\n  style = input<{ [key: string]: string }>({});\n\n  /**\n   * Reference to tooltip container for measuring dimensions\n   */\n  @ViewChild('tooltipContainer') tooltipContainer?: ElementRef<HTMLDivElement>;\n\n  // Tooltip dimensions\n  protected tooltipWidth = 0;\n  protected tooltipHeight = 0;\n\n  constructor(private ngZone: NgZone) {\n    afterNextRender(() => {\n      // Update tooltip dimensions when visible changes\n      this.updateTooltipDimensions();\n    });\n  }\n\n  /**\n   * Updates tooltip dimensions after it's rendered\n   */\n  protected updateTooltipDimensions(): void {\n    if (this.visible() && this.tooltipContainer) {\n      this.ngZone.runOutsideAngular(() => {\n        // Use requestAnimationFrame to ensure dimensions are calculated after render\n        requestAnimationFrame(() => {\n          if (this.tooltipContainer?.nativeElement) {\n            this.tooltipWidth = this.tooltipContainer.nativeElement.offsetWidth;\n            this.tooltipHeight = this.tooltipContainer.nativeElement.offsetHeight;\n          }\n        });\n      });\n    }\n  }\n\n  /**\n   * Get adjusted tooltip position\n   * Exposes properties for parent components to query tooltip dimensions\n   */\n  getDimensions(): { width: number; height: number } {\n    return {\n      width: this.tooltipWidth,\n      height: this.tooltipHeight,\n    };\n  }\n}\n","@if (visible() && data()) {\n  <div\n    #tooltipContainer\n    class=\"chart-tooltip\"\n    [style.left.px]=\"position().x\"\n    [style.top.px]=\"position().y\"\n    [ngStyle]=\"style()\"\n  >\n    <div class=\"chart-tooltip-title\">{{ data()!.title }}</div>\n    <div class=\"chart-tooltip-content\">\n      @if (data()!.color) {\n        <div class=\"chart-tooltip-color\" [style.background-color]=\"data()!.color\"></div>\n      }\n      <div class=\"chart-tooltip-value\">{{ data()!.value }}</div>\n      @if (showPercentage() && data()!.percentage) {\n        <div class=\"chart-tooltip-percentage\">{{ data()!.percentage }}</div>\n      }\n    </div>\n  </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}