ngx-com 0.0.3 → 0.0.5

package/fesm2022/ngx-com-components-tooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-com-components-tooltip.mjs","sources":["../../../projects/com/components/tooltip/tooltip.variants.ts","../../../projects/com/components/tooltip/tooltip.utils.ts","../../../projects/com/components/tooltip/tooltip-panel.component.ts","../../../projects/com/components/tooltip/tooltip.directive.ts","../../../projects/com/components/tooltip/index.ts","../../../projects/com/components/tooltip/ngx-com-components-tooltip.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { TooltipColor, TooltipSize, TooltipSide } from './tooltip.models';\n\n/**\n * CVA variants for the tooltip panel wrapper.\n *\n * @tokens `--color-tooltip`, `--color-tooltip-foreground`, `--color-primary`, `--color-primary-foreground`,\n *         `--color-accent`, `--color-accent-foreground`, `--color-warn`, `--color-warn-foreground`,\n *         `--color-popover`, `--color-popover-foreground`, `--color-border`\n */\nexport const tooltipPanelVariants: (props?: {\n  color?: TooltipColor;\n  size?: TooltipSize;\n}) => string = cva(\n  [\n    'com-tooltip-panel',\n    'z-50',\n    'pointer-events-auto',\n    'select-none',\n    'leading-normal',\n  ],\n  {\n    variants: {\n      color: {\n        default: 'bg-tooltip text-tooltip-foreground',\n        primary: 'bg-primary text-primary-foreground',\n        accent: 'bg-accent text-accent-foreground',\n        warn: 'bg-warn text-warn-foreground',\n        invert: 'bg-popover text-popover-foreground border border-border shadow-md',\n      },\n      size: {\n        sm: 'px-2 py-1 text-xs max-w-48 rounded-md',\n        md: 'px-3 py-1.5 text-sm max-w-64 rounded-lg',\n        lg: 'px-4 py-2.5 text-sm max-w-80 rounded-xl',\n      },\n    },\n    defaultVariants: {\n      color: 'default',\n      size: 'md',\n    },\n  },\n);\n\n/**\n * CVA variants for the tooltip arrow element.\n * The arrow points toward the trigger element.\n *\n * @tokens `--color-tooltip`, `--color-primary`, `--color-accent`, `--color-warn`,\n *         `--color-popover`, `--color-border`\n */\nexport const tooltipArrowVariants: (props?: {\n  color?: TooltipColor;\n  side?: TooltipSide;\n}) => string = cva('absolute size-2 rotate-45', {\n  variants: {\n    color: {\n      default: 'bg-tooltip',\n      primary: 'bg-primary',\n      accent: 'bg-accent',\n      warn: 'bg-warn',\n      invert: 'bg-popover border-l border-t border-border',\n    },\n    side: {\n      // Arrow points DOWN (tooltip is above trigger)\n      top: 'left-1/2 -translate-x-1/2 bottom-0 translate-y-1/2',\n      // Arrow points UP (tooltip is below trigger)\n      bottom: 'left-1/2 -translate-x-1/2 top-0 -translate-y-1/2',\n      // Arrow points RIGHT (tooltip is left of trigger)\n      left: 'top-1/2 -translate-y-1/2 right-0 translate-x-1/2',\n      // Arrow points LEFT (tooltip is right of trigger)\n      right: 'top-1/2 -translate-y-1/2 left-0 -translate-x-1/2',\n    },\n  },\n  compoundVariants: [\n    // Invert arrow needs different rotation for border visibility\n    { color: 'invert', side: 'top', class: 'rotate-[225deg]' },\n    { color: 'invert', side: 'bottom', class: 'rotate-45' },\n    { color: 'invert', side: 'left', class: 'rotate-[135deg]' },\n    { color: 'invert', side: 'right', class: '-rotate-45' },\n  ],\n  defaultVariants: {\n    color: 'default',\n    side: 'top',\n  },\n});\n","export { mergeClasses } from 'ngx-com/utils';\n\nlet tooltipIdCounter = 0;\n\n/**\n * Generate a unique ID for a tooltip instance.\n */\nexport function generateTooltipId(): string {\n  return `tooltip-${++tooltipIdCounter}`;\n}\n","import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';\nimport type { Signal, TemplateRef, WritableSignal } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { tooltipPanelVariants, tooltipArrowVariants } from './tooltip.variants';\nimport type { TooltipColor, TooltipSize, TooltipSide, TooltipTemplateContext } from './tooltip.models';\nimport { mergeClasses } from './tooltip.utils';\n\n/**\n * Internal tooltip panel component rendered inside the CDK overlay.\n * Receives content (string or template) and variant inputs from the directive.\n *\n * @internal Not exported in public API\n *\n * @tokens `--color-tooltip`, `--color-tooltip-foreground`, `--color-primary`, `--color-primary-foreground`,\n *         `--color-accent`, `--color-accent-foreground`, `--color-warn`, `--color-warn-foreground`,\n *         `--color-popover`, `--color-popover-foreground`, `--color-border`\n */\n@Component({\n  selector: 'com-tooltip-panel',\n  template: `\n    <div\n      class=\"relative\"\n      [attr.data-state]=\"visible() ? 'visible' : 'hidden'\"\n      [attr.data-side]=\"activeSide()\"\n    >\n      @if (showArrow()) {\n        <span [class]=\"arrowClasses()\" aria-hidden=\"true\"></span>\n      }\n      <div\n        [class]=\"panelClasses()\"\n        role=\"tooltip\"\n        [attr.id]=\"tooltipId()\"\n      >\n        @if (templateRef()) {\n          <ng-container\n            [ngTemplateOutlet]=\"templateRef()!\"\n            [ngTemplateOutletContext]=\"templateContext()\"\n          />\n        } @else {\n          {{ textContent() }}\n        }\n      </div>\n    </div>\n  `,\n  styles: `\n    :host {\n      display: contents;\n    }\n\n    /* Animation styles */\n    [data-state='visible'] {\n      animation: tooltip-in 120ms ease-out;\n    }\n\n    [data-state='hidden'] {\n      animation: tooltip-out 80ms ease-in forwards;\n    }\n\n    /* Transform origin based on side */\n    [data-side='top'] {\n      transform-origin: bottom center;\n    }\n\n    [data-side='bottom'] {\n      transform-origin: top center;\n    }\n\n    [data-side='left'] {\n      transform-origin: right center;\n    }\n\n    [data-side='right'] {\n      transform-origin: left center;\n    }\n\n    @keyframes tooltip-in {\n      from {\n        opacity: 0;\n        transform: scale(0.95);\n      }\n      to {\n        opacity: 1;\n        transform: scale(1);\n      }\n    }\n\n    @keyframes tooltip-out {\n      from {\n        opacity: 1;\n        transform: scale(1);\n      }\n      to {\n        opacity: 0;\n        transform: scale(0.95);\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      [data-state='visible'],\n      [data-state='hidden'] {\n        animation: none;\n      }\n    }\n  `,\n  imports: [NgTemplateOutlet],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TooltipPanelComponent {\n  /** Plain text content to display. */\n  readonly textContent: WritableSignal<string> = signal('');\n\n  /** Optional template for rich content. */\n  readonly templateRef: WritableSignal<TemplateRef<TooltipTemplateContext> | null> = signal(null);\n\n  /** Color variant. */\n  readonly color: WritableSignal<TooltipColor> = signal<TooltipColor>('default');\n\n  /** Size variant. */\n  readonly size: WritableSignal<TooltipSize> = signal<TooltipSize>('md');\n\n  /** Whether to show the arrow. */\n  readonly showArrow: WritableSignal<boolean> = signal(true);\n\n  /** Which side the tooltip is positioned on. */\n  readonly activeSide: WritableSignal<TooltipSide> = signal<TooltipSide>('top');\n\n  /** Unique ID for accessibility. */\n  readonly tooltipId: WritableSignal<string> = signal('');\n\n  /** Whether the tooltip is visible (for animation state). */\n  readonly visible: WritableSignal<boolean> = signal(false);\n\n  /** Function to hide the tooltip (passed to template context). */\n  readonly hideFn: WritableSignal<() => void> = signal(() => {});\n\n  /** Computed template context. */\n  protected readonly templateContext: Signal<TooltipTemplateContext> = computed(() => ({\n    $implicit: this.textContent(),\n    hide: this.hideFn(),\n  }));\n\n  /** Computed panel CSS classes. */\n  protected readonly panelClasses: Signal<string> = computed(() =>\n    mergeClasses(\n      tooltipPanelVariants({\n        color: this.color(),\n        size: this.size(),\n      }),\n    ),\n  );\n\n  /** Computed arrow CSS classes. */\n  protected readonly arrowClasses: Signal<string> = computed(() =>\n    mergeClasses(\n      tooltipArrowVariants({\n        color: this.color(),\n        side: this.activeSide(),\n      }),\n    ),\n  );\n}\n","import {\n  booleanAttribute,\n  DestroyRef,\n  Directive,\n  ElementRef,\n  inject,\n  Injector,\n  input,\n  numberAttribute,\n  output,\n  PLATFORM_ID,\n  Renderer2,\n  signal,\n  ViewContainerRef,\n} from '@angular/core';\nimport type {\n  InputSignal,\n  InputSignalWithTransform,\n  OutputEmitterRef,\n  TemplateRef,\n  WritableSignal,\n} from '@angular/core';\nimport { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport type { ConnectedPosition, ConnectedOverlayPositionChange, ConnectionPositionPair, FlexibleConnectedPositionStrategy } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { TooltipPanelComponent } from './tooltip-panel.component';\nimport { generateTooltipId } from './tooltip.utils';\nimport type {\n  TooltipColor,\n  TooltipPosition,\n  TooltipSize,\n  TooltipSide,\n  TooltipTemplateContext,\n  TooltipTouchGestures,\n} from './tooltip.models';\n\n/** Default show delay in milliseconds. */\nconst DEFAULT_SHOW_DELAY = 200;\n\n/** Default hide delay in milliseconds. */\nconst DEFAULT_HIDE_DELAY = 100;\n\n/** Offset between trigger and tooltip in pixels. */\nconst TOOLTIP_OFFSET = 8;\n\n/** Viewport margin in pixels. */\nconst VIEWPORT_MARGIN = 8;\n\n/**\n * Build position strategy entries for the tooltip.\n * Primary position is the preferred direction, with fallbacks.\n */\nfunction buildTooltipPositions(position: TooltipPosition): ConnectedPosition[] {\n  const positions: Record<TooltipPosition, ConnectedPosition[]> = {\n    top: [\n      // Top center (preferred)\n      { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -TOOLTIP_OFFSET },\n      // Bottom center (flip)\n      { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: TOOLTIP_OFFSET },\n      // Right center (fallback)\n      { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: TOOLTIP_OFFSET },\n      // Left center (fallback)\n      { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -TOOLTIP_OFFSET },\n    ],\n    bottom: [\n      { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: TOOLTIP_OFFSET },\n      { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -TOOLTIP_OFFSET },\n      { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: TOOLTIP_OFFSET },\n      { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -TOOLTIP_OFFSET },\n    ],\n    left: [\n      { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -TOOLTIP_OFFSET },\n      { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: TOOLTIP_OFFSET },\n      { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -TOOLTIP_OFFSET },\n      { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: TOOLTIP_OFFSET },\n    ],\n    right: [\n      { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: TOOLTIP_OFFSET },\n      { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -TOOLTIP_OFFSET },\n      { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -TOOLTIP_OFFSET },\n      { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: TOOLTIP_OFFSET },\n    ],\n  };\n\n  return positions[position];\n}\n\n/**\n * Derive the tooltip side from a position change event.\n */\nfunction deriveSideFromPosition(pair: ConnectionPositionPair): TooltipSide {\n  if (pair.originY === 'top' && pair.overlayY === 'bottom') return 'top';\n  if (pair.originY === 'bottom' && pair.overlayY === 'top') return 'bottom';\n  if (pair.originX === 'start' && pair.overlayX === 'end') return 'left';\n  if (pair.originX === 'end' && pair.overlayX === 'start') return 'right';\n  return 'top';\n}\n\n/**\n * Tooltip directive — displays supplementary information on hover/focus.\n *\n * Applied as an attribute directive to any trigger element. The tooltip panel\n * is rendered via CDK Overlay when triggered by mouse hover, keyboard focus,\n * or programmatically.\n *\n * @tokens `--color-tooltip`, `--color-tooltip-foreground`, `--color-primary`, `--color-primary-foreground`,\n *         `--color-accent`, `--color-accent-foreground`, `--color-warn`, `--color-warn-foreground`,\n *         `--color-popover`, `--color-popover-foreground`, `--color-border`\n *\n * @example Simple text tooltip\n * ```html\n * <button comTooltip=\"Save your changes\">\n *   <com-icon name=\"save\" />\n * </button>\n * ```\n *\n * @example Positioned\n * ```html\n * <button comTooltip=\"Settings\" comTooltipPosition=\"right\">\n *   <com-icon name=\"settings\" />\n * </button>\n * ```\n *\n * @example Color variants\n * ```html\n * <com-icon name=\"alert-triangle\" comTooltip=\"3 warnings found\" comTooltipColor=\"warn\" />\n * ```\n *\n * @example Custom template\n * ```html\n * <button\n *   comTooltip=\"Keyboard shortcuts\"\n *   [comTooltipTpl]=\"shortcutsTpl\"\n *   comTooltipSize=\"lg\"\n * >\n *   <com-icon name=\"keyboard\" />\n * </button>\n *\n * <ng-template #shortcutsTpl let-hide=\"hide\">\n *   <div class=\"flex flex-col gap-1\">\n *     <span>Press Ctrl+S to save</span>\n *     <button (click)=\"hide()\">Got it</button>\n *   </div>\n * </ng-template>\n * ```\n *\n * @example Programmatic control\n * ```html\n * <input\n *   #tooltipRef=\"comTooltip\"\n *   comTooltip=\"Invalid email\"\n *   comTooltipColor=\"warn\"\n *   [comTooltipDisabled]=\"true\"\n * />\n * ```\n *\n * ```ts\n * // Show tooltip on validation error\n * if (emailInvalid) {\n *   this.tooltipRef.show();\n * }\n * ```\n */\n@Directive({\n  selector: '[comTooltip]',\n  exportAs: 'comTooltip',\n  host: {\n    '(mouseenter)': 'onMouseEnter()',\n    '(mouseleave)': 'onMouseLeave()',\n    '(focusin)': 'onFocusIn()',\n    '(focusout)': 'onFocusOut()',\n    '(keydown.escape)': 'onEscapeKey()',\n    '(touchstart)': 'onTouchStart($event)',\n  },\n})\nexport class ComTooltip {\n  private readonly overlay = inject(Overlay);\n  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly viewContainerRef = inject(ViewContainerRef);\n  private readonly injector = inject(Injector);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly renderer = inject(Renderer2);\n  private readonly platformId = inject(PLATFORM_ID);\n  private readonly document = inject(DOCUMENT);\n\n  private overlayRef: OverlayRef | null = null;\n  private panelInstance: TooltipPanelComponent | null = null;\n  private showTimeoutId: ReturnType<typeof setTimeout> | null = null;\n  private hideTimeoutId: ReturnType<typeof setTimeout> | null = null;\n  private touchTimeoutId: ReturnType<typeof setTimeout> | null = null;\n  private readonly tooltipId = generateTooltipId();\n\n  /** Current active side (updated from position changes). */\n  private readonly activeSide: WritableSignal<TooltipSide> = signal<TooltipSide>('top');\n\n  /** Whether the tooltip is currently visible. */\n  private readonly isVisible: WritableSignal<boolean> = signal(false);\n\n  // ─── Content Inputs ───\n\n  /** Simple text content for the tooltip. Also serves as the directive selector. */\n  readonly comTooltip: InputSignal<string> = input.required<string>();\n\n  /** Custom template for rich tooltip content. Takes precedence over text when provided. */\n  readonly comTooltipTpl: InputSignal<TemplateRef<TooltipTemplateContext> | null> =\n    input<TemplateRef<TooltipTemplateContext> | null>(null);\n\n  // ─── Positioning Inputs ───\n\n  /** Preferred position direction. Default: 'top'. */\n  readonly comTooltipPosition: InputSignal<TooltipPosition> = input<TooltipPosition>('top');\n\n  // ─── Behavior Inputs ───\n\n  /** Delay in ms before showing the tooltip. Default: 200. */\n  readonly comTooltipShowDelay: InputSignalWithTransform<number, unknown> = input(DEFAULT_SHOW_DELAY, {\n    transform: numberAttribute,\n  });\n\n  /** Delay in ms before hiding the tooltip. Default: 100. */\n  readonly comTooltipHideDelay: InputSignalWithTransform<number, unknown> = input(DEFAULT_HIDE_DELAY, {\n    transform: numberAttribute,\n  });\n\n  /** Disable the tooltip entirely. Default: false. */\n  readonly comTooltipDisabled: InputSignalWithTransform<boolean, unknown> = input(false, {\n    transform: booleanAttribute,\n  });\n\n  /** Touch device handling. Default: 'auto'. */\n  readonly comTooltipTouchGestures: InputSignal<TooltipTouchGestures> = input<TooltipTouchGestures>('auto');\n\n  // ─── Variant Inputs ───\n\n  /** Color variant. Default: 'default'. */\n  readonly comTooltipColor: InputSignal<TooltipColor> = input<TooltipColor>('default');\n\n  /** Size variant. Default: 'md'. */\n  readonly comTooltipSize: InputSignal<TooltipSize> = input<TooltipSize>('md');\n\n  /** Whether to show the arrow/caret. Default: true. */\n  readonly comTooltipHasArrow: InputSignalWithTransform<boolean, unknown> = input(true, {\n    transform: booleanAttribute,\n  });\n\n  // ─── Outputs ───\n\n  /** Emitted when the tooltip becomes visible (after delay + animation). */\n  readonly comTooltipShown: OutputEmitterRef<void> = output<void>();\n\n  /** Emitted when the tooltip is fully hidden. */\n  readonly comTooltipHidden: OutputEmitterRef<void> = output<void>();\n\n  constructor() {\n    // Cleanup on destroy\n    this.destroyRef.onDestroy(() => {\n      this.clearTimers();\n      this.disposeOverlay();\n    });\n  }\n\n  // ─── Public API ───\n\n  /** Programmatically show the tooltip (ignores disabled state for error validation use cases). */\n  show(): void {\n    if (this.isVisible()) return;\n    this.clearTimers();\n    this.createOverlay();\n    this.attachPanel();\n  }\n\n  /** Programmatically hide the tooltip. */\n  hide(): void {\n    if (!this.isVisible()) return;\n    this.clearTimers();\n    this.detachPanel();\n  }\n\n  // ─── Event Handlers ───\n\n  protected onMouseEnter(): void {\n    if (this.comTooltipDisabled()) return;\n    this.scheduleShow(this.comTooltipShowDelay());\n  }\n\n  protected onMouseLeave(): void {\n    this.scheduleHide(this.comTooltipHideDelay());\n  }\n\n  protected onFocusIn(): void {\n    if (this.comTooltipDisabled()) return;\n    // Keyboard users get instant feedback\n    this.scheduleShow(0);\n  }\n\n  protected onFocusOut(): void {\n    this.scheduleHide(this.comTooltipHideDelay());\n  }\n\n  protected onEscapeKey(): void {\n    if (this.isVisible()) {\n      this.hide();\n    }\n  }\n\n  protected onTouchStart(event: TouchEvent): void {\n    const touchMode = this.comTooltipTouchGestures();\n    if (touchMode === 'off' || this.comTooltipDisabled()) return;\n\n    // Long-press to show (500ms)\n    this.clearTimers();\n    this.touchTimeoutId = setTimeout(() => {\n      this.show();\n\n      // Set up tap-elsewhere to hide\n      const touchEndHandler = (e: Event): void => {\n        const touch = (e as TouchEvent).changedTouches?.[0];\n        if (touch) {\n          const target = this.document.elementFromPoint(touch.clientX, touch.clientY);\n          if (!this.overlayRef?.overlayElement.contains(target)) {\n            this.hide();\n          }\n        }\n        this.document.removeEventListener('touchend', touchEndHandler);\n      };\n      this.document.addEventListener('touchend', touchEndHandler);\n    }, 500);\n\n    // Cancel long-press if finger moves\n    const touchMoveHandler = (): void => {\n      this.clearTouchTimeout();\n      this.document.removeEventListener('touchmove', touchMoveHandler);\n    };\n    this.document.addEventListener('touchmove', touchMoveHandler);\n\n    // Cancel long-press if finger lifts before timeout\n    const touchEndCancelHandler = (): void => {\n      this.clearTouchTimeout();\n      this.document.removeEventListener('touchend', touchEndCancelHandler);\n    };\n    this.document.addEventListener('touchend', touchEndCancelHandler);\n  }\n\n  // ─── Panel Mouse Events ───\n\n  /** Called when mouse enters the tooltip panel. */\n  private onPanelMouseEnter(): void {\n    // Cancel hide timer when hovering over panel (for interactive templates)\n    this.clearHideTimeout();\n  }\n\n  /** Called when mouse leaves the tooltip panel. */\n  private onPanelMouseLeave(): void {\n    this.scheduleHide(this.comTooltipHideDelay());\n  }\n\n  // ─── Timer Management ───\n\n  private scheduleShow(delay: number): void {\n    this.clearTimers();\n    if (delay === 0) {\n      this.createOverlay();\n      this.attachPanel();\n    } else {\n      this.showTimeoutId = setTimeout(() => {\n        this.createOverlay();\n        this.attachPanel();\n      }, delay);\n    }\n  }\n\n  private scheduleHide(delay: number): void {\n    this.clearShowTimeout();\n    if (!this.isVisible()) return;\n\n    if (delay === 0) {\n      this.detachPanel();\n    } else {\n      this.hideTimeoutId = setTimeout(() => {\n        this.detachPanel();\n      }, delay);\n    }\n  }\n\n  private clearTimers(): void {\n    this.clearShowTimeout();\n    this.clearHideTimeout();\n    this.clearTouchTimeout();\n  }\n\n  private clearShowTimeout(): void {\n    if (this.showTimeoutId !== null) {\n      clearTimeout(this.showTimeoutId);\n      this.showTimeoutId = null;\n    }\n  }\n\n  private clearHideTimeout(): void {\n    if (this.hideTimeoutId !== null) {\n      clearTimeout(this.hideTimeoutId);\n      this.hideTimeoutId = null;\n    }\n  }\n\n  private clearTouchTimeout(): void {\n    if (this.touchTimeoutId !== null) {\n      clearTimeout(this.touchTimeoutId);\n      this.touchTimeoutId = null;\n    }\n  }\n\n  // ─── Overlay Management ───\n\n  private createOverlay(): void {\n    if (this.overlayRef) return;\n    if (!isPlatformBrowser(this.platformId)) return;\n\n    const positionStrategy = this.overlay\n      .position()\n      .flexibleConnectedTo(this.elementRef)\n      .withPositions(buildTooltipPositions(this.comTooltipPosition()))\n      .withFlexibleDimensions(false)\n      .withPush(true)\n      .withViewportMargin(VIEWPORT_MARGIN);\n\n    const scrollStrategy = this.overlay.scrollStrategies.reposition({ autoClose: true });\n\n    this.overlayRef = this.overlay.create({\n      positionStrategy,\n      scrollStrategy,\n      panelClass: 'com-tooltip-overlay',\n      hasBackdrop: false,\n    });\n\n    // Track position changes for arrow orientation\n    (positionStrategy as FlexibleConnectedPositionStrategy).positionChanges\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe((change: ConnectedOverlayPositionChange) => {\n        const side = deriveSideFromPosition(change.connectionPair);\n        this.activeSide.set(side);\n        if (this.panelInstance) {\n          this.panelInstance.activeSide.set(side);\n        }\n      });\n\n    // Close when overlay detaches\n    this.overlayRef\n      .detachments()\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => {\n        this.handleDetachment();\n      });\n  }\n\n  private attachPanel(): void {\n    if (!this.overlayRef || this.overlayRef.hasAttached()) return;\n\n    const portal = new ComponentPortal(TooltipPanelComponent, this.viewContainerRef, this.injector);\n    const componentRef = this.overlayRef.attach(portal);\n    this.panelInstance = componentRef.instance;\n\n    // Configure panel inputs\n    this.panelInstance.textContent.set(this.comTooltip());\n    this.panelInstance.templateRef.set(this.comTooltipTpl());\n    this.panelInstance.color.set(this.comTooltipColor());\n    this.panelInstance.size.set(this.comTooltipSize());\n    this.panelInstance.showArrow.set(this.comTooltipHasArrow());\n    this.panelInstance.activeSide.set(this.activeSide());\n    this.panelInstance.tooltipId.set(this.tooltipId);\n    this.panelInstance.hideFn.set(() => this.hide());\n\n    // Set up panel mouse events for interactive templates\n    const overlayElement = this.overlayRef.overlayElement;\n    this.renderer.listen(overlayElement, 'mouseenter', () => this.onPanelMouseEnter());\n    this.renderer.listen(overlayElement, 'mouseleave', () => this.onPanelMouseLeave());\n\n    // Set ARIA on trigger\n    this.renderer.setAttribute(this.elementRef.nativeElement, 'aria-describedby', this.tooltipId);\n\n    // Trigger show animation after a microtask (allows initial styles to apply)\n    requestAnimationFrame(() => {\n      if (this.panelInstance) {\n        this.panelInstance.visible.set(true);\n      }\n    });\n\n    this.isVisible.set(true);\n    this.comTooltipShown.emit();\n  }\n\n  private detachPanel(): void {\n    if (!this.panelInstance) return;\n\n    // Trigger hide animation\n    this.panelInstance.visible.set(false);\n\n    // Wait for animation to complete before detaching\n    setTimeout(() => {\n      this.disposeOverlay();\n    }, 80); // Match animation duration\n  }\n\n  private handleDetachment(): void {\n    // Remove ARIA from trigger\n    this.renderer.removeAttribute(this.elementRef.nativeElement, 'aria-describedby');\n\n    this.isVisible.set(false);\n    this.panelInstance = null;\n    this.comTooltipHidden.emit();\n  }\n\n  private disposeOverlay(): void {\n    if (this.overlayRef) {\n      this.overlayRef.dispose();\n      this.overlayRef = null;\n    }\n    this.panelInstance = null;\n    this.isVisible.set(false);\n\n    // Remove ARIA from trigger\n    this.renderer.removeAttribute(this.elementRef.nativeElement, 'aria-describedby');\n  }\n}\n","// Public API for the tooltip directive\n\n// Main directive\nexport { ComTooltip } from './tooltip.directive';\n\n// Types and interfaces\nexport type {\n  TooltipPosition,\n  TooltipColor,\n  TooltipSize,\n  TooltipTouchGestures,\n  TooltipTemplateContext,\n} from './tooltip.models';\n\n// Variants (for advanced customization)\nexport { tooltipPanelVariants, tooltipArrowVariants } from './tooltip.variants';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-com",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "repository": {
     "type": "git",
     "url": "https://github.com/avs2001/ngx-com"
@@ -27,6 +27,10 @@
       "types": "./types/ngx-com-components.d.ts",
       "default": "./fesm2022/ngx-com-components.mjs"
     },
+    "./components/avatar": {
+      "types": "./types/ngx-com-components-avatar.d.ts",
+      "default": "./fesm2022/ngx-com-components-avatar.mjs"
+    },
     "./components/badge": {
       "types": "./types/ngx-com-components-badge.d.ts",
       "default": "./fesm2022/ngx-com-components-badge.mjs"
@@ -51,6 +55,10 @@
       "types": "./types/ngx-com-components-collapsible.d.ts",
       "default": "./fesm2022/ngx-com-components-collapsible.mjs"
     },
+    "./components/confirm": {
+      "types": "./types/ngx-com-components-confirm.d.ts",
+      "default": "./fesm2022/ngx-com-components-confirm.mjs"
+    },
     "./components/dropdown": {
       "types": "./types/ngx-com-components-dropdown.d.ts",
       "default": "./fesm2022/ngx-com-components-dropdown.mjs"
@@ -59,6 +67,10 @@
       "types": "./types/ngx-com-components-dropdown-testing.d.ts",
       "default": "./fesm2022/ngx-com-components-dropdown-testing.mjs"
     },
+    "./components/empty-state": {
+      "types": "./types/ngx-com-components-empty-state.d.ts",
+      "default": "./fesm2022/ngx-com-components-empty-state.mjs"
+    },
     "./components/form-field": {
       "types": "./types/ngx-com-components-form-field.d.ts",
       "default": "./fesm2022/ngx-com-components-form-field.mjs"
@@ -67,10 +79,18 @@
       "types": "./types/ngx-com-components-icon.d.ts",
       "default": "./fesm2022/ngx-com-components-icon.mjs"
     },
+    "./components/item": {
+      "types": "./types/ngx-com-components-item.d.ts",
+      "default": "./fesm2022/ngx-com-components-item.mjs"
+    },
     "./components/menu": {
       "types": "./types/ngx-com-components-menu.d.ts",
       "default": "./fesm2022/ngx-com-components-menu.mjs"
     },
+    "./components/paginator": {
+      "types": "./types/ngx-com-components-paginator.d.ts",
+      "default": "./fesm2022/ngx-com-components-paginator.mjs"
+    },
     "./components/popover": {
       "types": "./types/ngx-com-components-popover.d.ts",
       "default": "./fesm2022/ngx-com-components-popover.mjs"
@@ -79,14 +99,26 @@
       "types": "./types/ngx-com-components-radio.d.ts",
       "default": "./fesm2022/ngx-com-components-radio.mjs"
     },
+    "./components/segmented-control": {
+      "types": "./types/ngx-com-components-segmented-control.d.ts",
+      "default": "./fesm2022/ngx-com-components-segmented-control.mjs"
+    },
     "./components/sort": {
       "types": "./types/ngx-com-components-sort.d.ts",
       "default": "./fesm2022/ngx-com-components-sort.mjs"
     },
+    "./components/spinner": {
+      "types": "./types/ngx-com-components-spinner.d.ts",
+      "default": "./fesm2022/ngx-com-components-spinner.mjs"
+    },
     "./components/tabs": {
       "types": "./types/ngx-com-components-tabs.d.ts",
       "default": "./fesm2022/ngx-com-components-tabs.mjs"
     },
+    "./components/tooltip": {
+      "types": "./types/ngx-com-components-tooltip.d.ts",
+      "default": "./fesm2022/ngx-com-components-tooltip.mjs"
+    },
     "./tokens": {
       "types": "./types/ngx-com-tokens.d.ts",
       "default": "./fesm2022/ngx-com-tokens.mjs"

package/types/ngx-com-components-avatar.d.ts

@@ -0,0 +1,409 @@
+import * as i0 from '@angular/core';
+import { TemplateRef, ElementRef, InputSignal, OutputEmitterRef, Signal, WritableSignal } from '@angular/core';
+
+/** Avatar size variants. */
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/** Avatar color variants. */
+type AvatarColor = 'primary' | 'accent' | 'muted' | 'warn' | 'auto';
+/** Avatar shape variants. */
+type AvatarShape = 'circle' | 'rounded';
+/** Avatar variant types. */
+type AvatarVariant = 'soft' | 'filled' | 'outline';
+/** Resolved color (excludes 'auto' which is computed at runtime). */
+type ResolvedAvatarColor = Exclude<AvatarColor, 'auto'>;
+/**
+ * Generates initials from a display name.
+ *
+ * @param name - The display name to extract initials from
+ * @param maxLength - Maximum number of characters (default: 2)
+ * @returns Uppercase initials, or empty string if name is empty
+ *
+ * @example
+ * ```ts
+ * getInitials('Jane Doe')       // 'JD'
+ * getInitials('Jane')           // 'JA'
+ * getInitials('Jane Marie Doe') // 'JD' (first + last)
+ * getInitials('j')              // 'J'
+ * getInitials('')               // ''
+ * ```
+ */
+declare function getInitials(name: string, maxLength?: number): string;
+/**
+ * CVA variants for the avatar container.
+ *
+ * @tokens `--color-primary`, `--color-primary-foreground`, `--color-primary-subtle`, `--color-primary-subtle-foreground`,
+ *         `--color-accent`, `--color-accent-foreground`, `--color-accent-subtle`, `--color-accent-subtle-foreground`,
+ *         `--color-warn`, `--color-warn-foreground`, `--color-warn-subtle`, `--color-warn-subtle-foreground`,
+ *         `--color-muted`, `--color-muted-foreground`,
+ *         `--color-border`, `--color-background`, `--color-foreground`, `--color-ring`
+ */
+declare const avatarVariants: (props?: {
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    interactive?: boolean;
+}) => string;
+/**
+ * CVA variants for the avatar color/variant styling.
+ * These are applied based on the resolved color and variant.
+ */
+declare const avatarColorVariants: (props?: {
+    variant?: AvatarVariant;
+    color?: ResolvedAvatarColor;
+}) => string;
+
+/**
+ * Template context provided to custom avatar templates.
+ *
+ * @example
+ * ```html
+ * <com-avatar name="Acme Corp" size="lg">
+ *   <ng-template comAvatarCustom let-name let-initials="initials" let-size="size">
+ *     <img src="/logos/acme.svg" class="size-full object-contain p-1" [alt]="name" />
+ *   </ng-template>
+ * </com-avatar>
+ * ```
+ */
+interface AvatarTemplateContext {
+    /** The `name` input value (default for `let-name`). */
+    $implicit: string | undefined;
+    /** Computed initials from the name. */
+    initials: string;
+    /** Current size variant, allowing templates to adapt. */
+    size: AvatarSize;
+}
+/**
+ * Directive to provide a custom template for avatar content.
+ *
+ * When this directive is used, the avatar ignores the `src`, `name`, and
+ * default icon fallback — the template has full control over the content.
+ * Use this for company logos, emoji avatars, or custom graphics.
+ *
+ * @example Company logo
+ * ```html
+ * <com-avatar name="Acme Corp" size="lg" color="primary">
+ *   <ng-template comAvatarCustom let-initials="initials">
+ *     <img src="/logos/acme.svg" class="size-full object-contain p-1" alt="Acme Corp" />
+ *   </ng-template>
+ * </com-avatar>
+ * ```
+ *
+ * @example Emoji avatar
+ * ```html
+ * <com-avatar name="Bot" color="accent" variant="filled">
+ *   <ng-template comAvatarCustom>
+ *     <span class="text-lg">🤖</span>
+ *   </ng-template>
+ * </com-avatar>
+ * ```
+ *
+ * @example Adaptive content using size context
+ * ```html
+ * <com-avatar name="Jane" [size]="avatarSize">
+ *   <ng-template comAvatarCustom let-size="size">
+ *     @if (size === 'xs' || size === 'sm') {
+ *       <span class="text-xs">👤</span>
+ *     } @else {
+ *       <img src="/custom-avatar.png" class="size-full object-cover" />
+ *     }
+ *   </ng-template>
+ * </com-avatar>
+ * ```
+ */
+declare class ComAvatarCustom {
+    readonly templateRef: TemplateRef<AvatarTemplateContext>;
+    /**
+     * Static type guard for template type checking.
+     * Enables type-safe access to context properties in templates.
+     */
+    static ngTemplateContextGuard(_dir: ComAvatarCustom, ctx: unknown): ctx is AvatarTemplateContext;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComAvatarCustom, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComAvatarCustom, "ng-template[comAvatarCustom]", never, {}, {}, never, never, true, never>;
+}
+
+/** Image loading state. */
+type ImageState = 'idle' | 'loading' | 'loaded' | 'error';
+/**
+ * Avatar component — displays a user's profile image, initials, or a fallback icon.
+ *
+ * Handles the full lifecycle of image loading with a graceful fallback chain:
+ * 1. Custom template (via `comAvatarCustom` directive) — if provided, always wins
+ * 2. Image — if `src` is provided and loads successfully
+ * 3. Initials — if `name` is provided, auto-generated from the name
+ * 4. Default icon — generic user silhouette via `com-icon`
+ *
+ * **Note:** The default fallback icon requires the `User` icon from lucide-angular
+ * to be registered via `provideComIcons({ User })` in your application config.
+ *
+ * @tokens `--color-primary`, `--color-primary-foreground`, `--color-primary-subtle`, `--color-primary-subtle-foreground`,
+ *         `--color-accent`, `--color-accent-foreground`, `--color-accent-subtle`, `--color-accent-subtle-foreground`,
+ *         `--color-warn`, `--color-warn-foreground`, `--color-warn-subtle`, `--color-warn-subtle-foreground`,
+ *         `--color-muted`, `--color-muted-foreground`,
+ *         `--color-border`, `--color-background`, `--color-foreground`, `--color-ring`
+ *
+ * @example Simple image avatar
+ * ```html
+ * <com-avatar src="/photos/jane.jpg" name="Jane Doe" />
+ * ```
+ *
+ * @example Initials fallback (no image)
+ * ```html
+ * <com-avatar name="Jane Doe" />
+ * <!-- renders "JD" with auto-computed background color -->
+ * ```
+ *
+ * @example Explicit color and shape
+ * ```html
+ * <com-avatar name="John Smith" color="primary" variant="filled" />
+ * <com-avatar name="Alice" color="accent" shape="rounded" />
+ * ```
+ *
+ * @example Sizes — from badge to profile header
+ * ```html
+ * <!-- Tiny: inside a badge or inline with text -->
+ * <com-avatar name="JD" size="xs" />
+ *
+ * <!-- Small: list items, comments -->
+ * <com-avatar src="/photos/jane.jpg" name="Jane" size="sm" />
+ *
+ * <!-- Medium: default, cards -->
+ * <com-avatar src="/photos/jane.jpg" name="Jane" />
+ *
+ * <!-- Large: profile sidebar -->
+ * <com-avatar src="/photos/jane.jpg" name="Jane" size="lg" />
+ *
+ * <!-- Extra large: profile hero -->
+ * <com-avatar src="/photos/jane.jpg" name="Jane" size="xl" />
+ *
+ * <!-- 2XL: full profile page header -->
+ * <com-avatar src="/photos/jane.jpg" name="Jane" size="2xl" />
+ * ```
+ *
+ * @example Default icon fallback (no name, no image)
+ * ```html
+ * <!-- Shows generic user icon -->
+ * <com-avatar />
+ * ```
+ *
+ * @example Interactive (clickable, for menus)
+ * ```html
+ * <com-avatar
+ *   src="/photos/me.jpg"
+ *   name="My Profile"
+ *   [interactive]="true"
+ *   (click)="openProfileMenu()"
+ * />
+ * ```
+ *
+ * @example With status indicator (composed externally)
+ * ```html
+ * <!-- The avatar itself doesn't own the status dot — the consumer composes it -->
+ * <div class="relative inline-flex">
+ *   <com-avatar src="/photos/jane.jpg" name="Jane" size="sm" />
+ *   <span class="absolute bottom-0 right-0 size-2.5 rounded-full bg-success ring-2 ring-background"></span>
+ * </div>
+ * ```
+ *
+ * @example Custom template — company logo with fallback
+ * ```html
+ * <com-avatar name="Acme Corp" size="lg" color="primary">
+ *   <ng-template comAvatarCustom let-initials="initials">
+ *     <img src="/logos/acme.svg" class="size-full object-contain p-1" alt="Acme Corp" />
+ *   </ng-template>
+ * </com-avatar>
+ * ```
+ *
+ * @example Custom template — emoji avatar
+ * ```html
+ * <com-avatar name="Bot" color="accent" variant="filled">
+ *   <ng-template comAvatarCustom>
+ *     <span class="text-lg">🤖</span>
+ *   </ng-template>
+ * </com-avatar>
+ * ```
+ *
+ * @example Inline with text
+ * ```html
+ * <span class="inline-flex items-center gap-2">
+ *   <com-avatar name="Jane Doe" size="xs" />
+ *   <span class="text-sm">Jane Doe</span>
+ * </span>
+ * ```
+ *
+ * @example Avatar in a badge context
+ * ```html
+ * <!-- Works at xs/sm sizes without breaking layout -->
+ * <div class="flex items-center gap-1.5 rounded-pill bg-muted px-2 py-0.5">
+ *   <com-avatar name="Jane" size="xs" />
+ *   <span class="text-xs">Jane Doe</span>
+ *   <button class="text-muted-foreground hover:text-foreground">
+ *     <com-icon name="x" size="xs" />
+ *   </button>
+ * </div>
+ * ```
+ *
+ * @example Outline variant (good for overlapping stacks)
+ * ```html
+ * <div class="flex -space-x-2">
+ *   <com-avatar src="/photos/a.jpg" name="Alice" size="sm" variant="outline" />
+ *   <com-avatar src="/photos/b.jpg" name="Bob" size="sm" variant="outline" />
+ *   <com-avatar src="/photos/c.jpg" name="Carol" size="sm" variant="outline" />
+ *   <com-avatar name="+3" size="sm" variant="outline" color="muted" />
+ * </div>
+ * ```
+ */
+declare class ComAvatar {
+    /** Host element reference (used by ComAvatarGroup). */
+    readonly elementRef: ElementRef<HTMLElement>;
+    /** Image URL for the avatar. */
+    readonly src: InputSignal<string | undefined>;
+    /** Alt text for the image. Falls back to `name` if not provided. */
+    readonly alt: InputSignal<string | undefined>;
+    /** User's display name — used to generate initials and as aria fallback. */
+    readonly name: InputSignal<string | undefined>;
+    /** Size variant. */
+    readonly size: InputSignal<AvatarSize>;
+    /** Color variant. 'auto' deterministically picks a color based on the name. */
+    readonly color: InputSignal<AvatarColor>;
+    /** Shape variant. */
+    readonly shape: InputSignal<AvatarShape>;
+    /** Visual style variant. */
+    readonly variant: InputSignal<AvatarVariant>;
+    /** When true, renders as a button with hover/active states. */
+    readonly interactive: InputSignal<boolean>;
+    /** Emits when the image fails to load (after fallback kicks in). */
+    readonly imageError: OutputEmitterRef<void>;
+    /** Emits when the image loads successfully. */
+    readonly imageLoaded: OutputEmitterRef<void>;
+    /** Custom template for full control over avatar content. */
+    readonly customTemplate: Signal<ComAvatarCustom | undefined>;
+    /**
+     * Current image loading state.
+     * Resets to 'loading' or 'idle' when `src` changes.
+     */
+    protected readonly imageState: WritableSignal<ImageState>;
+    /** Resolved color (handles 'auto' based on name). */
+    protected readonly resolvedColor: Signal<ResolvedAvatarColor>;
+    /** Computed initials from the name. */
+    readonly computedInitials: Signal<string>;
+    /** Template context for custom templates. */
+    protected readonly templateContext: Signal<AvatarTemplateContext>;
+    /** CSS classes for the host element. */
+    protected readonly hostClasses: Signal<string>;
+    /** Font size class for initials. */
+    protected readonly initialsSizeClass: Signal<string>;
+    /** Icon size for the fallback icon (same as avatar size). */
+    protected readonly iconSize: Signal<AvatarSize>;
+    /** @internal Handles successful image load. */
+    protected onImageLoad(): void;
+    /** @internal Handles image load error. */
+    protected onImageError(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComAvatar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComAvatar, "com-avatar", ["comAvatar"], { "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; }, { "imageError": "imageError"; "imageLoaded": "imageLoaded"; }, ["customTemplate"], never, true, never>;
+}
+
+/**
+ * Avatar group directive — displays multiple avatars in an overlapping stack.
+ *
+ * Apply this directive to a container element with `com-avatar` children.
+ * The directive handles negative spacing, ring styling for visual separation,
+ * and optionally limits the visible avatars with an overflow indicator.
+ *
+ * **Note:** Child avatars should use `variant="outline"` for best visual results,
+ * as this provides the ring that separates overlapping avatars. The directive
+ * adds `ring-background` to ensure proper visual separation.
+ *
+ * @tokens `--color-background`, `--color-muted`, `--color-muted-foreground`
+ *
+ * @example Basic usage
+ * ```html
+ * <div comAvatarGroup>
+ *   <com-avatar src="/photos/a.jpg" name="Alice" variant="outline" />
+ *   <com-avatar src="/photos/b.jpg" name="Bob" variant="outline" />
+ *   <com-avatar src="/photos/c.jpg" name="Carol" variant="outline" />
+ * </div>
+ * ```
+ *
+ * @example With max limit and overflow indicator
+ * ```html
+ * <div comAvatarGroup [max]="3">
+ *   <com-avatar src="/photos/a.jpg" name="Alice" variant="outline" />
+ *   <com-avatar src="/photos/b.jpg" name="Bob" variant="outline" />
+ *   <com-avatar src="/photos/c.jpg" name="Carol" variant="outline" />
+ *   <com-avatar src="/photos/d.jpg" name="Dave" variant="outline" />
+ *   <com-avatar src="/photos/e.jpg" name="Eve" variant="outline" />
+ * </div>
+ * <!-- Shows 3 avatars + "+2" indicator -->
+ * ```
+ *
+ * @example Different sizes
+ * ```html
+ * <div comAvatarGroup size="sm">
+ *   <com-avatar name="A" size="sm" variant="outline" />
+ *   <com-avatar name="B" size="sm" variant="outline" />
+ * </div>
+ *
+ * <div comAvatarGroup size="lg">
+ *   <com-avatar name="A" size="lg" variant="outline" />
+ *   <com-avatar name="B" size="lg" variant="outline" />
+ * </div>
+ * ```
+ *
+ * @example Reversed stacking (last avatar on top)
+ * ```html
+ * <div comAvatarGroup [reverse]="true">
+ *   <com-avatar name="First" variant="outline" />
+ *   <com-avatar name="Second" variant="outline" />
+ *   <com-avatar name="Third (on top)" variant="outline" />
+ * </div>
+ * ```
+ */
+declare class ComAvatarGroup {
+    private readonly renderer;
+    private readonly elementRef;
+    /** Query all child ComAvatar components. */
+    private readonly avatars;
+    /**
+     * Size variant — should match child avatar sizes for proper spacing.
+     * If not provided, defaults to 'md'.
+     */
+    readonly size: InputSignal<AvatarSize>;
+    /**
+     * Maximum number of avatars to display.
+     * When exceeded, remaining avatars are hidden and an overflow indicator shows "+N".
+     * Set to 0 or undefined for unlimited.
+     */
+    readonly max: InputSignal<number | undefined>;
+    /**
+     * When true, reverses the stacking order (last avatar on top instead of first).
+     * Also reverses the visual order via flex-row-reverse.
+     */
+    readonly reverse: InputSignal<boolean>;
+    /** Overflow element reference for cleanup. */
+    private overflowElement;
+    /** Track the number of hidden avatars. */
+    protected readonly overflowCount: WritableSignal<number>;
+    /** Whether to show the overflow indicator. */
+    protected readonly showOverflow: Signal<boolean>;
+    constructor();
+    /**
+     * Applies overlapping styles to child avatars and manages visibility.
+     */
+    private applyAvatarStyles;
+    /**
+     * Gets the native element of an avatar by index.
+     */
+    private getAvatarElement;
+    /**
+     * Creates or updates the overflow indicator element.
+     */
+    private updateOverflowIndicator;
+    /**
+     * Returns size-specific classes for the overflow indicator.
+     */
+    private getOverflowSizeClasses;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComAvatarGroup, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComAvatarGroup, "[comAvatarGroup]", ["comAvatarGroup"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "reverse": { "alias": "reverse"; "required": false; "isSignal": true; }; }, {}, ["avatars"], never, true, never>;
+}
+
+export { ComAvatar, ComAvatarCustom, ComAvatarGroup, avatarColorVariants, avatarVariants, getInitials };
+export type { AvatarColor, AvatarShape, AvatarSize, AvatarTemplateContext, AvatarVariant, ResolvedAvatarColor };

package/types/ngx-com-components-calendar.d.ts

@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
 import { InjectionToken, InputSignal, TemplateRef, OutputEmitterRef, Signal, WritableSignal, Provider, OnDestroy } from '@angular/core';
 import { VariantProps } from 'class-variance-authority';
 import { ControlValueAccessor, Validator, ValidationErrors } from '@angular/forms';
+import { IconSize } from 'ngx-com/components/icon';
 
 /**
  * Calendar shared types and interfaces
@@ -1417,6 +1418,8 @@ declare class ComDatepicker<D> implements ControlValueAccessor, Validator, OnDes
     readonly panelId: Signal<string>;
     /** Whether the datepicker has a value. */
     readonly hasValue: Signal<boolean>;
+    /** Icon size based on datepicker size. */
+    readonly iconSize: Signal<IconSize>;
     /** Formatted display value. */
     readonly displayValue: Signal<string>;
     /** Computed trigger classes. */
@@ -1592,6 +1595,8 @@ declare class ComDateRangePicker<D> implements ControlValueAccessor, Validator,
     readonly panelId: Signal<string>;
     /** Whether the datepicker has a value. */
     readonly hasValue: Signal<boolean>;
+    /** Icon size based on datepicker size. */
+    readonly iconSize: Signal<IconSize>;
     /** Calendar selection (converts DateRangeValue to DateRange for calendar). */
     readonly calendarSelection: Signal<DateRange<D> | null>;
     /** Formatted start display value. */