@litigiovirtual/ius-design-components 1.0.267 → 1.0.269

package/src/lib/charts-bar-grouped/charts-bar-grouped.component.ts

@@ -1,284 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-  Component, Input, Output, EventEmitter,
-  OnChanges, computed, signal, ViewChild, ElementRef,
-  AfterViewInit, OnDestroy, NgZone
-} from '@angular/core';
-import { PopoverDirective } from '../directives/popover.directive';
-
-export type BarSeriesItem = { label: string; value: number; color?: string };
-export type BarGroup = { label: string; items: BarSeriesItem[] };
-
-type SeriesColorMap = Record<string, string>;
-
-type BarRect = {
-  groupLabel: string;
-  seriesLabel: string;
-  value: number;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  color: string;
-};
-
-type BarStripe = { x: number; width: number };
-
-@Component({
-  selector: 'ius-charts-bar-grouped',
-  standalone: true,
-  imports: [CommonModule, PopoverDirective],
-  templateUrl: './charts-bar-grouped.component.html',
-  styleUrls: ['./charts-bar-grouped.component.scss'],
-})
-export class IusChartsBarGroupedComponent implements OnChanges, AfterViewInit, OnDestroy {
-  @Input() data: BarGroup[] = [];
-  @Input() legendPosition: 'right' | 'bottom' = 'bottom';
-  @Input() seriesOrder?: string[];
-
-  // Escala Y (se pueden exponer como @Input si quieres)
-  yMax?: number;
-  ticks = 5;
-
-  // Fallbacks si no hay tamaño CSS externo
-  width = 640;
-  size = 320; // alto por defecto cuando el host no fija height
-
-  // Márgenes y layout X
-  margin = { top: 24, right: 16, bottom: 55, left: 40 };
-  barWidth = 11;
-  barGap = 2;
-  groupGap = 40;
-  outerGap = 18;
-
-  // Estilo barra
-  barRadius = 5;
-
-  @Input() maxLabelChars = 10;
-  @Output() barClick = new EventEmitter<{ group: string; series: string; value: number }>();
-
-  // Solo necesitamos medir ANCHO visible del plot
-  @ViewChild('plotCtn', { static: true }) plotCtn!: ElementRef<HTMLElement>;
-  private ro?: ResizeObserver;
-  private rafId: number | null = null;
-
-  // Estado
-  private _bars = signal<BarRect[]>([]);
-  private _groups = signal<string[]>([]);
-  private _series = signal<string[]>([]);
-  private _colors = signal<SeriesColorMap>({});
-  private _yMax = signal(0);
-
-  private _paneH = signal(0);     // alto real del host (o fallback size)
-  private _plotW = signal(0);     // ancho visible del contenedor scrolleable
-  private _plotWidth = signal(0); // ancho virtual del SVG derecho
-  private _groupCenters = signal<number[]>([]);
-  private _barStripes = signal<BarStripe[]>([]);
-
-  // Derivados
-  readonly bars = computed(() => this._bars());
-  readonly groups = computed(() => this._groups());
-  readonly series = computed(() => this._series());
-  readonly colors = computed(() => this._colors());
-  readonly yScaleMax = computed(() => this._yMax());
-
-  readonly chartHeight = computed(() => this._paneH() || this.size);
-  readonly plotWidth   = computed(() => this._plotWidth());
-  readonly groupCenters = computed(() => this._groupCenters());
-  readonly barStripes   = computed(() => this._barStripes());
-
-  readonly innerHeight = computed(() =>
-    Math.max(this.chartHeight() - this.margin.top - this.margin.bottom, 0)
-  );
-
-  readonly axisViewBox = computed(() => `0 0 ${this.margin.left} ${this.chartHeight()}`);
-  readonly plotViewBox = computed(() => `0 0 ${this.plotWidth()} ${this.chartHeight()}`);
-
-  readonly Math = Math;
-
-  constructor(private zone: NgZone, private hostEl: ElementRef<HTMLElement>) {}
-
-  ngAfterViewInit(): void {
-    // Medición inicial en el próximo frame para evitar ExpressionChanged y loops
-    this.raf(() => {
-      this.measureNow();
-      this.recalc();
-    });
-
-    // Observa alto del HOST y ancho visible del plot, throttled por rAF
-    this.ro = new ResizeObserver(() => {
-      this.raf(() => {
-        const changed = this.measureNow();
-        if (changed) this.recalc();
-      });
-    });
-    this.ro.observe(this.hostEl.nativeElement);
-    this.ro.observe(this.plotCtn.nativeElement);
-  }
-
-  ngOnDestroy(): void {
-    this.ro?.disconnect();
-    if (this.rafId !== null) cancelAnimationFrame(this.rafId);
-  }
-
-  ngOnChanges(): void {
-    // Cambios de @Input disparan recálculo
-    this.recalc();
-  }
-
-  // ========= Medición =========
-  /** Ejecuta una tarea en el próximo frame dentro de Angular */
-  private raf(fn: () => void) {
-    if (this.rafId !== null) cancelAnimationFrame(this.rafId);
-    this.rafId = requestAnimationFrame(() => this.zone.run(fn));
-  }
-
-  /** Mide alto del host y ancho visible del plot. Devuelve true si cambió algo. */
-  private measureNow(): boolean {
-    const hostH = Math.floor(this.hostEl.nativeElement.clientHeight || 0);
-    const paneH = hostH > 0 ? hostH : this.size;
-
-    const plotW = Math.floor(this.plotCtn?.nativeElement?.clientWidth || 0)
-               || (this.width - this.margin.left);
-
-    let changed = false;
-    if (paneH !== this._paneH()) { this._paneH.set(paneH); changed = true; }
-    if (plotW !== this._plotW()) { this._plotW.set(plotW); changed = true; }
-    return changed;
-  }
-
-  // ========= Layout & data =========
-  private recalc(): void {
-    const cleaned = (this.data ?? [])
-      .map(g => ({ label: g.label, items: (g.items ?? []).filter(i => Number(i?.value) >= 0) }))
-      .filter(x => x.items.length > 0);
-
-    const groups = cleaned.map(g => g.label);
-
-    // series + orden
-    const seriesSet = new Set<string>();
-    for (const g of cleaned) for (const it of g.items) seriesSet.add(it.label);
-    let series = Array.from(seriesSet);
-    if (this.seriesOrder?.length) {
-      const order = new Map(this.seriesOrder.map((k, idx) => [k, idx]));
-      series.sort((a, b) => (order.get(a) ?? 1e9) - (order.get(b) ?? 1e9));
-    }
-
-    // colores por serie
-    const palette = [
-      '#2167FF', // Info-500
-      '#0A2893', // Info-800
-      '#40CAE9', // Primary-400
-      '#5892FF', // Info-400
-      '#08A6DB', // Primary-500
-      '#C4DFFF', // Info-200
-    ];
-    const colorMap: SeriesColorMap = {};
-    series.forEach((s, i) => (colorMap[s] = palette[i % palette.length]));
-
-    // normalizar
-    const normalized = cleaned.map(g => {
-      const map = new Map(g.items.map(i => [i.label, i]));
-      const items = series.map(s => {
-        const i = map.get(s);
-        return { label: s, value: i?.value ?? 0, color: i?.color ?? colorMap[s] };
-      });
-      return { label: g.label, items };
-    });
-
-    // Y máx
-    const maxValue = Math.max(0, ...normalized.flatMap(g => g.items.map(i => i.value)));
-    const yMax = this.yMax && this.yMax > 0 ? this.yMax : this.niceMax(maxValue);
-    this._yMax.set(yMax);
-
-    // Dimensiones visibles del panel derecho
-    const visibleW = this._plotW() || (this.width - this.margin.left);
-
-    // ===== Layout X con outerGap =====
-    const G = normalized.length;
-    const S = series.length;
-    const groupInnerWidth = S * this.barWidth + Math.max(0, S - 1) * this.barGap;
-    const innerNaturalWidth =
-      Math.max(0, (this.outerGap * 2) + G * groupInnerWidth + Math.max(0, G - 1) * this.groupGap);
-
-    const innerVisibleWidth = Math.max(visibleW - this.margin.right, 0);
-    const innerVirtualWidth = Math.max(innerVisibleWidth, innerNaturalWidth);
-    const plotWidth = innerVirtualWidth + this.margin.right;
-    this._plotWidth.set(plotWidth);
-
-    // Construcción de barras + franjas
-    const ih = this.innerHeight();
-    const bars: BarRect[] = [];
-    const centers: number[] = [];
-    const stripes: BarStripe[] = [];
-
-    let cursor = this.outerGap;
-    normalized.forEach(g => {
-      const startX = cursor;
-      const center = startX + groupInnerWidth / 2;
-      centers.push(center);
-
-      g.items.forEach((it, si) => {
-        const x = startX + si * (this.barWidth + this.barGap);
-
-        stripes.push({ x, width: this.barWidth }); // franja por barra
-
-        const h = it.value <= 0 ? 0 : (it.value / yMax) * ih;
-        const y = this.margin.top + ih - h;
-        bars.push({
-          groupLabel: g.label,
-          seriesLabel: it.label,
-          value: it.value,
-          x, y, width: this.barWidth, height: h,
-          color: it.color ?? colorMap[it.label]
-        });
-      });
-
-      cursor += groupInnerWidth + this.groupGap;
-    });
-
-    this._bars.set(bars);
-    this._groups.set(groups);
-    this._series.set(series);
-    this._colors.set(colorMap);
-    this._groupCenters.set(centers);
-    this._barStripes.set(stripes);
-  }
-
-  // ========= Helpers =========
-  private niceMax(maxVal: number): number {
-    if (maxVal <= 0) return 1;
-    const exp = Math.floor(Math.log10(maxVal));
-    const base = Math.pow(10, exp);
-    const n = Math.ceil(maxVal / base);
-    const nice = n <= 2 ? 2 : n <= 5 ? 5 : 10;
-    return nice * base;
-  }
-
-  getY(value: number): number {
-    const ih = this.innerHeight();
-    const max = this.yScaleMax();
-    return this.margin.top + ih - (value / max) * ih;
-  }
-
-  get yTicksArr(): number[] {
-    const max = this.yScaleMax();
-    const n = Math.max(2, this.ticks | 0);
-    const step = max / n;
-    const arr: number[] = [];
-    for (let i = 0; i <= n; i++) arr.push(+((i * step)).toFixed(2));
-    return arr;
-  }
-
-  shortLabel(lbl: string): string {
-    return lbl.length > this.maxLabelChars ? (lbl.slice(0, this.maxLabelChars - 1) + '…') : lbl;
-  }
-
-  formatTooltip(b: BarRect): string {
-    return `${b.seriesLabel}: ${b.value}`;
-  }
-
-  onBarClick(b: BarRect) {
-    this.barClick.emit({ group: b.groupLabel, series: b.seriesLabel, value: b.value });
-  }
-}

package/src/lib/charts-bar-grouped/index.ts

@@ -1,2 +0,0 @@
-export * from './charts-bar-grouped.component';
-

package/src/lib/charts-donut/charts-donut.component.html

@@ -1,57 +0,0 @@
-<div class="donut-wrapper" [class.bottom]="legendPosition === 'bottom'">
-    <svg
-        class="donut"
-        role="img"
-        [attr.aria-label]="ariaLabel"
-        [attr.width]="size"
-        [attr.height]="size"
-        [attr.viewBox]="viewBox()">
-        <!-- pista -->
-        <circle
-        class="track"
-        [attr.cx]="size/2"
-        [attr.cy]="size/2"
-        [attr.r]="radius()"
-        [attr.stroke-width]="thickness"
-        ></circle>
-
-        <!-- slices como PATH (cada uno es su arco real) -->
-        @for (s of slices(); track s.label) {
-        <path
-            class="slice"
-            [attr.d]="s.pathD"
-            fill="none"
-            [attr.stroke]="s.color"
-            [attr.stroke-width]="thickness"
-            stroke-linecap="butt"
-            [iusPopoverContent]="getPopoverText(s)"
-            (click)="onSliceClick(s)"
-            tabindex="0"
-        >
-        </path>
-        }
-
-        <!-- centro -->
-        <g>
-            <text
-                [attr.x]="size/2"
-                [attr.y]="size/2"
-                text-anchor="middle"
-                alignment-baseline="middle"
-                class="center-text">
-                {{ centerLabel }}
-            </text>
-        </g>
-    </svg>
-
-    @if (showLegend && slices().length) {
-    <div class="legend scrollable-small" [class.bottom]="legendPosition === 'bottom'">
-      @for (s of slices(); track s.label) {
-        <div class="legend-item">
-          <span class="dot" [style.background]="s.color"></span>
-          <span class="label caption-sm" [iusPopoverContent]="s.value.toString() + ' - ' + s.label">{{s.value}} - {{s.label}}</span>
-        </div>
-      }
-    </div>
-    }
-</div>

package/src/lib/charts-donut/charts-donut.component.scss

@@ -1,125 +0,0 @@
-@use "@litigiovirtual/ius-design-styles/lib/colors" as colors;
-@use "@litigiovirtual/ius-design-styles/lib/typography" as typography;
-@use "@litigiovirtual/ius-design-styles/lib/variables" as variables;
-@use "@litigiovirtual/ius-design-styles/lib/semantic-colors" as semantic-colors;
-
-:host {
-    display: block;
-    max-width: 100%;
-    height: 100%;
-}
-
-.donut-wrapper {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    column-gap: 16px;
-    height: 100%;
-    align-items: stretch;
-
-    &.bottom {
-        grid-template-columns: 1fr;
-        grid-template-rows: auto 1fr;
-        row-gap: 12px;
-        align-items: stretch;
-    }
-}
-
-.donut {
-    display: block;
-    max-width: 100%;
-    height: auto;
-    align-self: center;
-}
-
-.track {
-    fill: none;
-    stroke: #eef2f6;
-}
-
-.slice {
-    pointer-events: stroke;
-    cursor: pointer;
-    transition: opacity .15s ease, transform .15s ease;
-
-    &:focus {
-        outline: none;
-        filter: drop-shadow(0 0 2px rgba(0, 0, 0, .2));
-    }
-
-    &:hover {
-        opacity: .9;
-    }
-}
-
-.center-text {
-    fill: semantic-colors.$color-text-secundary-on-light;
-    font-family: typography.$font-secondary;
-    font-size: typography.$font-size-h3;
-    font-weight: 600;
-}
-
-.legend {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    gap: 8px;
-    padding-right: 4px;
-    min-width: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-    align-self: stretch;
-    max-height: 100%;
-    min-height: 0;
-
-    &.bottom {
-        flex-direction: row;
-        flex-wrap: wrap;
-        overflow-y: auto;
-    }
-
-    .legend-item {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        min-width: 0;
-        white-space: nowrap;
-    }
-
-    .dot {
-        width: variables.$icon-size-xxs;
-        height: variables.$icon-size-xxs;
-        border-radius: variables.$radius-md;
-        flex: 0 0 variables.$icon-size-xxs;
-    }
-
-    .label {
-        color: semantic-colors.$color-text-secundary-on-light;
-        min-width: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-}
-
-
-.scrollable-small::-webkit-scrollbar {
-    -webkit-appearance: none;
-}
-
-.scrollable-small::-webkit-scrollbar:vertical {
-    width: variables.$spacing-xxs;
-    height: variables.$spacing-xl;
-    padding-top: 2px;
-    padding-bottom: 2px;
-}
-
-.scrollable-small::-webkit-scrollbar:horizontal {
-    height: 5px;
-    padding-top: 2px;
-    padding-bottom: 2px;
-}
-
-.scrollable-small::-webkit-scrollbar-thumb {
-    background-color: colors.$primary-500;
-    border-radius: variables.$radius-sm;
-}

package/src/lib/charts-donut/charts-donut.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ChartsDonutComponent } from './charts-donut.component';
-
-describe('ChartsDonutComponent', () => {
-  let component: ChartsDonutComponent;
-  let fixture: ComponentFixture<ChartsDonutComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ChartsDonutComponent]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(ChartsDonutComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/charts-donut/charts-donut.component.ts

@@ -1,148 +0,0 @@
-import { Component, computed, EventEmitter, Input, Output, signal, OnChanges } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { PopoverDirective } from '../directives/popover.directive';
-
-export type DonutData = { label: string; value: number; color?: string };
-
-type SliceComputed = DonutData & {
-  percentage: number;
-  pathD: string;   // path del arco
-  midX: number;    // punto medio del arco (por si se quiere anclar ahí)
-  midY: number;
-};
-
-@Component({
-  selector: 'ius-charts-donut',
-  standalone: true,
-  imports: [CommonModule, PopoverDirective],
-  templateUrl: './charts-donut.component.html',
-  styleUrls: ['./charts-donut.component.scss']
-})
-export class ChartsDonutComponent implements OnChanges {
-  @Input() data: DonutData[] = [];
-  @Input() size = 180;                 // width/height del SVG
-  @Input() thickness = 18;             // grosor del anillo
-  @Input() gapDegrees = 0;             // separación entre segmentos (grados)
-  @Input() showLegend = true;
-  @Input() legendPosition: 'right' | 'bottom' = 'right';
-  @Input() centerText?: string | number; // sobrescribe el texto central
-  @Input() sort = false;               // ordena segmentos por valor (desc)
-
-  @Output() sliceClick = new EventEmitter<DonutData>();
-
-  // señales para recalcular
-  private _slices = signal<SliceComputed[]>([]);
-  private _total = signal(0);
-  private _circ = signal(0);
-  private _radius = signal(0);
-
-  readonly slices = computed(() => this._slices());
-  readonly total = computed(() => this._total());
-  readonly radius = computed(() => this._radius());
-  readonly circumference = computed(() => this._circ());
-  readonly viewBox = computed(() => `0 0 ${this.size} ${this.size}`);
-
-  ngOnChanges(): void {
-    const cleaned = (this.data ?? []).filter(d => Number(d?.value) > 0);
-    const total = cleaned.reduce((a, b) => a + b.value, 0);
-
-    const radius = this.size / 2 - this.thickness / 2;
-    const circumference = 2 * Math.PI * radius;
-    this._radius.set(radius);
-    this._circ.set(circumference);
-
-    // sin datos válidos
-    if (total <= 0) {
-      this._slices.set([]);
-      this._total.set(0);
-      return;
-    }
-
-    // paleta (rota si no alcanza)
-    const palette = [
-      '#2167FF', // Info-500
-      '#0A2893', // Info-800
-      '#40CAE9', // Primary-400
-      '#5892FF', // Info-400
-      '#08A6DB', // Primary-500
-      '#C4DFFF', // Info-200
-    ];
-    let pIndex = 0;
-    const base = cleaned.map(d => ({
-      ...d,
-      color: d.color ?? palette[pIndex++ % palette.length]
-    }));
-
-    // orden opcional
-    const dataOrdered = this.sort ? [...base].sort((a, b) => b.value - a.value) : base;
-
-    // geometría angular
-    const cx = this.size / 2;
-    const cy = this.size / 2;
-    const n = dataOrdered.length;
-    const gap = Math.max(this.gapDegrees, 0);
-    const usefulDeg = Math.max(360 - n * gap, 0); // evita negativos
-
-    let current = -90; // arranca a las 12 en punto
-    const slices: SliceComputed[] = dataOrdered.map(d => {
-      const fraction = d.value / total;
-      const sweep = usefulDeg * fraction;
-
-      // dejamos medio gap antes y después del arco
-      const startDeg = current + gap / 2;
-      const endDeg = startDeg + sweep;
-
-      const pathD = this.arcPath(cx, cy, radius, startDeg, endDeg);
-      const midDeg = startDeg + sweep / 2;
-      const mid = this.polarToCartesian(cx, cy, radius, midDeg);
-
-      // avanza el cursor angular para el siguiente slice
-      current = endDeg + gap / 2;
-
-      return {
-        ...d,
-        percentage: +(fraction * 100).toFixed(2),
-        pathD,
-        midX: mid.x,
-        midY: mid.y
-      };
-    });
-
-    this._slices.set(slices);
-    this._total.set(total);
-  }
-
-  // === helpers de geometría ===
-  private polarToCartesian(cx: number, cy: number, r: number, deg: number) {
-    const rad = (deg * Math.PI) / 180;
-    return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
-  }
-
-  private arcPath(cx: number, cy: number, r: number, startDeg: number, endDeg: number): string {
-    const start = this.polarToCartesian(cx, cy, r, startDeg);
-    const end = this.polarToCartesian(cx, cy, r, endDeg);
-    const sweep = endDeg - startDeg;
-    const largeArcFlag = sweep > 180 ? 1 : 0;
-    // arco horario (sweep-flag=1)
-    return `M ${start.x} ${start.y} A ${r} ${r} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`;
-  }
-
-  // eventos / utilidades
-  onSliceClick(s: SliceComputed) {
-    this.sliceClick.emit({ label: s.label, value: s.value, color: s.color });
-  }
-
-  get centerLabel(): string {
-    return `${this.centerText ?? this.total()}`;
-  }
-
-  getPopoverText(s: { label: string; value: number; percentage: number }): string {
-    return `${s.label}: ${s.value} (${s.percentage}%)`;
-  }
-
-  // accesibilidad: describe la dona
-  get ariaLabel(): string {
-    const parts = this.slices().map(s => `${s.label}: ${s.value} (${s.percentage}%)`);
-    return `Gráfica de dona. Total ${this.total()}. ${parts.join('. ')}`;
-  }
-}

package/src/lib/charts-donut/index.ts

@@ -1,2 +0,0 @@
-export * from './charts-donut.component';
-

package/src/lib/checkbox/checkbox.component.html

@@ -1,9 +0,0 @@
-<div class="container-general" (click)="onChecked()">
-  <div class="container-interno" [class.checked]="checked" [class.disabled]="disabled">
-    @if (checked) {
-    <ius-icon-md iconName="icon-check" class="icon"></ius-icon-md>
-    }@else{
-      <div class="icon-false"></div>
-    }
-  </div>
-</div>