@ngbase/adk 0.1.17 → 0.1.18

package/schematics/components/files/charts/line-chart.component.ts.template

@@ -0,0 +1,238 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  afterNextRender,
+  input,
+  viewChild,
+  effect,
+  signal,
+} from '@angular/core';
+import * as d3 from 'd3';
+import { ChartTooltipComponent, TooltipContent } from './chart-tooltip.component';
+
+interface LineData {
+  label: string;
+  value: number;
+}
+
+@Component({
+  selector: '<%= name %>-line-chart',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ChartTooltipComponent],
+  template: `
+    <svg #chart class="w-full"></svg>
+    <<%= name %>-chart-tooltip
+      [visible]="tooltipVisible()"
+      [x]="tooltipX()"
+      [y]="tooltipY()"
+      [content]="tooltipContent()"
+    />
+  `,
+  host: {
+    class: 'block relative',
+  },
+})
+export class LineChartComponent {
+  readonly chartRef = viewChild.required<ElementRef<SVGElement>>('chart');
+
+  data = input.required<LineData[]>();
+
+  height = input(250);
+  showYAxis = input(false);
+
+  private svg!: d3.Selection<SVGElement, unknown, null, undefined>;
+  private margin = { top: 20, right: 20, bottom: 50, left: 50 };
+
+  // Tooltip state
+  tooltipVisible = signal(false);
+  tooltipX = signal(0);
+  tooltipY = signal(0);
+  tooltipContent = signal<TooltipContent>({ label: '', value: 0 });
+
+  private resizeObserver: ResizeObserver | undefined;
+
+  constructor() {
+    afterNextRender(() => {
+      this.svg = d3.select(this.chartRef().nativeElement);
+      this.updateChart();
+
+      this.resizeObserver = new ResizeObserver(() => {
+        this.updateChart();
+      });
+      this.resizeObserver.observe(this.chartRef().nativeElement.parentElement!);
+    });
+
+    // Watch for input changes and update chart
+    effect(() => {
+      const data = this.data();
+      const _height = this.height();
+      const _showYAxis = this.showYAxis();
+
+      // Update chart if svg is initialized
+      if (this.svg && data) {
+        this.updateChart();
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  }
+
+  private updateChart(): void {
+    if (!this.svg) return;
+
+    const data = this.data();
+    // Get actual width from parent container
+    const containerWidth = this.chartRef().nativeElement.parentElement?.clientWidth || 0;
+
+    if (containerWidth === 0) return;
+
+    // Adjust left margin based on showYAxis
+    const leftMargin = this.showYAxis() ? this.margin.left : 20;
+    const width = containerWidth - leftMargin - this.margin.right;
+    const height = this.height() - this.margin.top - this.margin.bottom;
+
+    // Clear previous content
+    this.svg.selectAll('*').remove();
+
+    // Set SVG dimensions - width/height/viewBox must match
+    this.svg
+      .attr('width', containerWidth)
+      .attr('height', this.height())
+      .attr('viewBox', `0 0 ${containerWidth} ${this.height()}`);
+
+    // Create chart group
+    const g = this.svg.append('g').attr('transform', `translate(${leftMargin},${this.margin.top})`);
+
+    // Get CSS variables for theming
+    const textColor = getComputedStyle(document.documentElement)
+      .getPropertyValue('--color-text')
+      .trim();
+    const borderColor = getComputedStyle(document.documentElement)
+      .getPropertyValue('--color-border')
+      .trim();
+
+    // Get chart color (using chart-1 for line)
+    const lineColor = getComputedStyle(document.documentElement)
+      .getPropertyValue('--chart-1')
+      .trim();
+
+    // Create scales
+    const x = d3
+      .scalePoint()
+      .domain(data.map(d => d.label))
+      .range([0, width])
+      .padding(0.5);
+
+    const y = d3
+      .scaleLinear()
+      .domain([0, d3.max(data, d => d.value) || 100])
+      .nice()
+      .range([height, 0]);
+
+    // Add X axis
+    g.append('g')
+      .attr('transform', `translate(0,${height})`)
+      .call(d3.axisBottom(x))
+      .style('color', textColor)
+      .selectAll('text')
+      .style('font-size', '12px');
+
+    // Add Y axis (conditionally)
+    if (this.showYAxis()) {
+      g.append('g')
+        .call(d3.axisLeft(y))
+        .style('color', textColor)
+        .selectAll('text')
+        .style('font-size', '12px');
+    }
+
+    // Style axis lines
+    g.selectAll('.domain, .tick line').style('stroke', borderColor);
+
+    // Add grid lines
+    g.append('g')
+      .attr('class', 'grid')
+      .call(
+        d3
+          .axisLeft(y)
+          .tickSize(-width)
+          .tickFormat(() => ''),
+      )
+      .select('.domain')
+      .remove();
+
+    // Style grid lines
+    g.selectAll('.grid .tick line').style('stroke', 'rgb(229 229 229 / 50%)');
+
+    // Create line generator
+    const line = d3
+      .line<LineData>()
+      .x(d => x(d.label) || 0)
+      .y(d => y(d.value))
+      .curve(d3.curveMonotoneX);
+
+    // Add the line path
+    const path = g
+      .append('path')
+      .datum(data)
+      .attr('fill', 'none')
+      .attr('stroke', lineColor)
+      .attr('stroke-width', 2)
+      .attr('d', line);
+
+    // Animate line drawing
+    const totalLength = path.node()?.getTotalLength() || 0;
+    path
+      .attr('stroke-dasharray', `${totalLength} ${totalLength}`)
+      .attr('stroke-dashoffset', totalLength)
+      .transition()
+      .duration(1200)
+      .ease(d3.easeLinear)
+      .attr('stroke-dashoffset', 0);
+
+    // Add circles for data points
+    const circles = g
+      .selectAll('.dot')
+      .data(data)
+      .enter()
+      .append('circle')
+      .attr('class', 'dot')
+      .attr('cx', d => x(d.label) || 0)
+      .attr('cy', d => y(d.value))
+      .attr('r', 0)
+      .attr('fill', lineColor)
+      .attr('stroke', 'transparent')
+      .attr('stroke-width', 2)
+      .style('cursor', 'pointer');
+
+    // Add hover effects for tooltip
+    circles
+      .on('mouseenter', (event, d) => {
+        const circleX = x(d.label) || 0;
+        const circleY = y(d.value);
+        const svgRect = this.chartRef().nativeElement.getBoundingClientRect();
+
+        this.tooltipContent.set({ label: d.label, value: d.value });
+        this.tooltipX.set(svgRect.left + leftMargin + circleX);
+        this.tooltipY.set(svgRect.top + this.margin.top + circleY - 10);
+        this.tooltipVisible.set(true);
+
+        // Enlarge circle on hover
+        d3.select(event.currentTarget).transition().duration(200).attr('r', 7);
+      })
+      .on('mouseleave', event => {
+        this.tooltipVisible.set(false);
+
+        // Restore circle size
+        d3.select(event.currentTarget).transition().duration(200).attr('r', 4);
+      });
+
+    // Animate circles
+    circles.transition().delay(1200).duration(400).attr('r', 4);
+  }
+}

package/schematics/components/files/charts/pie-chart.component.ts.template

@@ -0,0 +1,283 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  afterNextRender,
+  input,
+  viewChild,
+  effect,
+  signal,
+} from '@angular/core';
+import * as d3 from 'd3';
+import { ChartTooltipComponent, TooltipContent } from './chart-tooltip.component';
+
+interface PieData {
+  label: string;
+  value: number;
+}
+
+@Component({
+  selector: '<%= name %>-pie-chart',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ChartTooltipComponent],
+  template: `
+    <svg #chart class="w-full"></svg>
+    <<%= name %>-chart-tooltip
+      [visible]="tooltipVisible()"
+      [x]="tooltipX()"
+      [y]="tooltipY()"
+      [content]="tooltipContent()"
+    />
+  `,
+  host: {
+    class: 'flex justify-center block relative',
+  },
+})
+export class PieChartComponent {
+  readonly chartRef = viewChild.required<ElementRef<SVGElement>>('chart');
+
+  data = input.required<PieData[]>();
+
+  height = input(300);
+  innerRadius = input(0); // Set to 0 for pie, >0 for donut
+
+  private svg!: d3.Selection<SVGElement, unknown, null, undefined>;
+
+  // Tooltip state
+  tooltipVisible = signal(false);
+  tooltipX = signal(0);
+  tooltipY = signal(0);
+  tooltipContent = signal<TooltipContent>({ label: '', value: 0 });
+
+  private resizeObserver: ResizeObserver | undefined;
+
+  constructor() {
+    afterNextRender(() => {
+      this.svg = d3.select(this.chartRef().nativeElement);
+      this.updateChart();
+
+      this.resizeObserver = new ResizeObserver(() => {
+        this.updateChart();
+      });
+      this.resizeObserver.observe(this.chartRef().nativeElement.parentElement!);
+    });
+
+    // Watch for input changes and update chart
+    effect(() => {
+      const data = this.data();
+      const _height = this.height();
+      const _innerRadius = this.innerRadius();
+
+      // Update chart if svg is initialized
+      if (this.svg && data) {
+        this.updateChart();
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  }
+
+  private updateChart(): void {
+    if (!this.svg) return;
+
+    const data = this.data();
+    // Get actual width from parent container
+    const containerWidth = this.chartRef().nativeElement.parentElement?.clientWidth || 0;
+
+    if (containerWidth === 0) return;
+
+    const width = containerWidth;
+    const height = this.height();
+
+    // Legend configuration
+    const itemWidth = 120; // Width for each legend item
+    const itemsPerRow = Math.max(1, Math.floor(width / itemWidth));
+    const legendPadding = 25; // Vertical spacing between rows
+    const numRows = Math.ceil(data.length / itemsPerRow);
+    const legendHeight = numRows * legendPadding; // Total calculated legend height
+
+    // Calculate available space for pie chart
+    // Reserve space for margins and legend
+    const chartMargin = 20;
+    const availableHeight = height - legendHeight - chartMargin;
+    const availableWidth = width;
+
+    // Calculate radius to fit in available space
+    const radius = Math.min(availableWidth, availableHeight) / 2 - 10;
+
+    // Calculate center efficiency
+    const centerY = availableHeight / 2 + chartMargin / 2;
+    const centerX = width / 2;
+
+    // Clear previous content
+    this.svg.selectAll('*').remove();
+
+    // Set SVG dimensions - width/height/viewBox must match
+    this.svg
+      .attr('width', containerWidth)
+      .attr('height', this.height())
+      .attr('viewBox', `0 0 ${containerWidth} ${this.height()}`);
+
+    // Get CSS variables for theming
+    const textColor = getComputedStyle(document.documentElement)
+      .getPropertyValue('--color-text')
+      .trim();
+
+    // Get chart colors
+    const chartColors = Array.from({ length: 5 }, (_, i) =>
+      getComputedStyle(document.documentElement)
+        .getPropertyValue(`--chart-${i + 1}`)
+        .trim(),
+    );
+
+    // Create color scale using chart colors
+    const colorScale = d3
+      .scaleOrdinal<string>()
+      .domain(data.map(d => d.label))
+      .range(chartColors);
+
+    // Create chart group
+    const g = this.svg.append('g').attr('transform', `translate(${centerX},${centerY})`);
+
+    // Create pie layout
+    const pie = d3
+      .pie<PieData>()
+      .value(d => d.value)
+      .sort(null);
+
+    // Create arc generator
+    const arc = d3
+      .arc<d3.PieArcDatum<PieData>>()
+      .innerRadius(this.innerRadius())
+      .outerRadius(radius);
+
+    // Create arc for hover effect
+    const arcHover = d3
+      .arc<d3.PieArcDatum<PieData>>()
+      .innerRadius(this.innerRadius())
+      .outerRadius(radius + 10);
+
+    // Create arcs
+    const arcs = g.selectAll('.arc').data(pie(data)).enter().append('g').attr('class', 'arc');
+
+    // Add paths with animation
+    const paths = arcs
+      .append('path')
+      .attr('fill', d => colorScale(d.data.label))
+      .style('cursor', 'pointer');
+
+    // Add hover effects for tooltip
+    paths
+      .on('mouseenter', (event, d) => {
+        const total = d3.sum(data, item => item.value);
+        const percentage = ((d.data.value / total) * 100).toFixed(1);
+
+        this.tooltipContent.set({
+          label: d.data.label,
+          value: d.data.value,
+          percentage: parseFloat(percentage),
+        });
+        this.tooltipX.set(event.clientX);
+        this.tooltipY.set(event.clientY);
+        this.tooltipVisible.set(true);
+
+        // Expand arc on hover
+        d3.select(event.currentTarget)
+          .transition()
+          .duration(200)
+          .attr('d', arcHover as any);
+      })
+      .on('mousemove', event => {
+        this.tooltipX.set(event.clientX);
+        this.tooltipY.set(event.clientY);
+      })
+      .on('mouseleave', event => {
+        this.tooltipVisible.set(false);
+
+        // Restore arc size
+        d3.select(event.currentTarget)
+          .transition()
+          .duration(200)
+          .attr('d', arc as any);
+      });
+
+    // Animate paths
+    paths
+      .transition()
+      .duration(800)
+      .attrTween('d', function (d) {
+        const interpolate = d3.interpolate({ startAngle: 0, endAngle: 0 }, d);
+        return function (t) {
+          return arc(interpolate(t) as any) || '';
+        };
+      });
+
+    // Add labels (only if slice is big enough)
+    arcs
+      .filter(d => d.endAngle - d.startAngle > 0.25)
+      .append('text')
+      .attr('transform', d => {
+        const [x, y] = arc.centroid(d);
+        return `translate(${x},${y})`;
+      })
+      .attr('text-anchor', 'middle')
+      .style('font-size', '12px')
+      .style('font-weight', '600')
+      .style('fill', 'white')
+      .style('opacity', 0)
+      .text(d => `${d.data.value}`)
+      .transition()
+      .delay(800)
+      .duration(400)
+      .style('opacity', 1);
+
+    // Add legend at the bottom with wrapping
+    const legendStartY = availableHeight + chartMargin; // Start logic below the chart area
+    const legend = this.svg.append('g').attr('transform', `translate(0, ${legendStartY})`);
+
+    const legendItems = legend
+      .selectAll('.legend-item')
+      .data(data)
+      .enter()
+      .append('g')
+      .attr('class', 'legend-item')
+      .attr('transform', (_d, i) => {
+        const row = Math.floor(i / itemsPerRow);
+        const col = i % itemsPerRow;
+        const itemsInCurrentRow = Math.min(itemsPerRow, data.length - row * itemsPerRow);
+        const rowWidth = itemsInCurrentRow * itemWidth;
+        const rowStartX = (width - rowWidth) / 2;
+        return `translate(${rowStartX + col * itemWidth}, ${row * legendPadding})`;
+      });
+
+    legendItems
+      .append('rect')
+      .attr('width', 8)
+      .attr('height', 8)
+      .attr('rx', 2)
+      .attr('fill', d => colorScale(d.label))
+      .style('opacity', 0)
+      .transition()
+      .delay((d, i) => 800 + i * 100)
+      .duration(400)
+      .style('opacity', 1);
+
+    legendItems
+      .append('text')
+      .attr('x', 14)
+      .attr('y', 4)
+      .attr('dy', '0.35em')
+      .style('font-size', '12px')
+      .style('fill', textColor)
+      .text(d => d.label)
+      .style('opacity', 0)
+      .transition()
+      .delay((d, i) => 800 + i * 100)
+      .duration(400)
+      .style('opacity', 1);
+  }
+}

package/schematics/components/files/checkbox/checkbox.ts.template

@@ -12,13 +12,13 @@ import { CheckboxButton, NgbCheckbox, aliasCheckbox } from '@ngbase/adk/checkbox
     <button
       <%= name %>FocusStyle
       ngbCheckboxButton
-      class="custom-checkbox relative flex h-4 w-4 flex-none items-center justify-center rounded border border-primary transition-colors"
+      class="custom-checkbox border-primary relative flex h-4 w-4 flex-none items-center justify-center rounded border transition-colors"
       [class]="
         disabled() ? '!border-muted-foreground bg-muted-foreground' : path() ? 'bg-primary' : ''
       "
     >
       @if (path(); as d) {
-        <svg class="h-full w-full text-background" viewBox="0 0 24 24" aria-hidden="true">
+        <svg class="text-background h-full w-full" viewBox="0 0 24 24" aria-hidden="true">
           <path [attr.d]="d" stroke="currentColor" stroke-width="2" fill="none" />
         </svg>
       }

package/schematics/components/files/color-picker/color-picker.ts.template

@@ -31,7 +31,7 @@ import { InputBase } from '@ngbase/adk/form-field';
       <div ngbColorSpectrum class="relative h-[160px] w-full overflow-hidden rounded-md border-b">
         <button
           ngbColorSpectrumSelector
-          class="pointer-events-none absolute -left-2 -top-2 h-4 w-4 cursor-pointer rounded-full border"
+          class="pointer-events-none absolute -top-2 -left-2 h-4 w-4 cursor-pointer rounded-full border"
         ></button>
       </div>
       <div class="flex gap-4 p-3">
@@ -75,7 +75,7 @@ export class ColorPicker extends NgbColorPicker {}
 @Component({
   selector: '<%= name %>-color-input',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [registerColorPicker({ picker: ColorPicker, accessor: ColorInput })],
+  providers: [registerColorPicker(ColorPicker)],
   imports: [ColorPickerTrigger, InputBase],
   template: `
     <input

package/schematics/components/files/dialog/dialog.ts.template

@@ -11,10 +11,8 @@ import {
   NgbDialogContainer,
   NgbDialogMain,
   ngbDialogPortal,
-  viewAnimation,
 } from '@ngbase/adk/dialog';
 import { DragMove } from '@ngbase/adk/drag';
-import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils';
 
 @Component({
   selector: '<%= name %>-dialog',
@@ -27,13 +25,14 @@ import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils';
       <div
         #myDialog
         ngbDialogMain
-        [@viewAnimation]
         class="{{
           'pointer-events-auto relative flex max-w-[100vw] flex-col overflow-hidden border bg-background shadow-lg' +
             (options().fullWindow
               ? ' h-screen w-screen border-none'
-              : ' max-w-[calc(100vw-30px)] rounded-lg')
+              : ' max-w-[calc(100vw-30px)] rounded-lg') +
+            (closing() ? ' dialog-content-leave' : ' dialog-content')
         }}"
+        (animationend)="onAnimationEnd($event)"
       >
         @if (!isHideHeader) {
           <div
@@ -55,25 +54,30 @@ import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils';
       </div>
       @if (showBackdrop()) {
         <div
-          class="pointer-events-auto absolute top-0 -z-10 h-full w-full bg-black/30"
-          [@fadeAnimation]
           ngbDialogBackdrop
+          (animationend)="onAnimationEnd($event)"
+          class="{{
+            'pointer-events-auto absolute top-0 -z-10 h-full w-full bg-black/30' +
+              (closing() ? ' dialog-backdrop-leave' : ' dialog-backdrop')
+          }}"
         ></div>
       }
     </div>
   `,
   host: {
     class: 'fixed block top-0 bottom-0 left-0 right-0 overflow-auto pointer-events-none z-p',
-    '[@parentAnimation]': '',
-    '(@parentAnimation.done)': 'animationDone()',
   },
-  animations: [
-    createHostAnimation(['@viewAnimation', '@fadeAnimation']),
-    fadeAnimation('200ms'),
-    viewAnimation,
-  ],
 })
-export class DialogContainer extends NgbDialogContainer {}
+export class DialogContainer extends NgbDialogContainer {
+  protected override readonly hasAnimations = true;
+
+  onAnimationEnd(event: AnimationEvent) {
+    // Only count animation end once per element
+    if (event.target === event.currentTarget) {
+      this.animationDone();
+    }
+  }
+}
 
 @Directive({
   selector: '[<%= name %>DialogClose]',