@ng-cn/core 1.0.15 → 1.0.17

package/src/app/lib/components/ui/toggle-group/toggle-group.component.ts

@@ -1,28 +1,24 @@
 import { cn } from '@/lib/utils';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    ElementRef,
-    forwardRef,
-    inject,
-    input,
-    model,
-    output,
-    signal,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  forwardRef,
+  inject,
+  input,
+  model,
+  output,
+  signal,
 } from '@angular/core';
 import type { ToggleVariants } from '../toggle/toggle-variants';
 import {
-    TOGGLE_GROUP_CONTEXT,
-    type ToggleGroupContext,
-    type ToggleGroupOrientation,
-    type ToggleGroupType,
+  TOGGLE_GROUP_CONTEXT,
+  type ToggleGroupContext,
+  type ToggleGroupOrientation,
+  type ToggleGroupType,
 } from './toggle-group-context';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type ToggleGroupProps = {
   /** Selection type: single or multiple */
   type?: ToggleGroupType;
@@ -46,10 +42,6 @@ export type ToggleGroupProps = {
   class?: string;
 };
 
-// ============================================================================
-// ToggleGroup Component
-// ============================================================================
-
 /**
  * ToggleGroup component - a set of toggle buttons where one or more can be pressed.
  * Based on Radix UI ToggleGroup primitive with shadcn/ui styling.
@@ -146,40 +138,41 @@ export type ToggleGroupProps = {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ToggleGroup {
-  private readonly elementRef = inject(ElementRef<HTMLElement>);
+  /** Emitted when value changes */
+  readonly valueChange = output<string | string[]>();
 
   /** The current selected value(s) */
   readonly value = model<string | string[]>('');
 
   /** Default value for uncontrolled mode */
   readonly defaultValue = input<string | string[]>('');
-
   /** Selection type: single or multiple */
   readonly type = input<ToggleGroupType>('single');
-
   /** The visual style variant of the toggle items */
   readonly variant = input<ToggleVariants['variant']>('default');
-
   /** The size of the toggle items */
   readonly size = input<ToggleVariants['size']>('default');
-
   /** Whether the toggle group is disabled */
   readonly disabled = input<boolean>(false);
-
   /** The orientation of the toggle group */
   readonly orientation = input<ToggleGroupOrientation>('horizontal');
-
   /** Whether to loop focus at boundaries */
   readonly loop = input<boolean>(true);
-
   /** Whether focus should follow selection in single mode */
   readonly rovingFocus = input<boolean>(true);
-
   /** Additional CSS classes to apply */
   readonly class = input<string>('');
 
-  /** Emitted when value changes */
-  readonly valueChange = output<string | string[]>();
+  private readonly _elementRef = inject(ElementRef<HTMLElement>);
+
+  /** Computed class combining base styles and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      'flex items-center justify-center gap-1',
+      this.orientation() === 'vertical' && 'flex-col',
+      this.class(),
+    ),
+  );
 
   /** Context for child ToggleGroupItem components */
   readonly context: ToggleGroupContext = {
@@ -224,19 +217,9 @@ export class ToggleGroup {
     focusNext: (currentValue: string) => this.focusItem(currentValue, 1),
     focusPrevious: (currentValue: string) => this.focusItem(currentValue, -1),
     focusFirst: () => this.focusItemByIndex(0),
-    focusLast: () =>
-      this.focusItemByIndex(this.context.itemValues().length - 1),
+    focusLast: () => this.focusItemByIndex(this.context.itemValues().length - 1),
   };
 
-  /** Computed class combining base styles and custom classes */
-  protected readonly computedClass = computed(() =>
-    cn(
-      'flex items-center justify-center gap-1',
-      this.orientation() === 'vertical' && 'flex-col',
-      this.class()
-    )
-  );
-
   ngOnChanges(): void {
     this.context.value.set(this.value());
     this.context.type.set(this.type());
@@ -268,21 +251,20 @@ export class ToggleGroup {
 
     this.focusItemByIndex(nextIndex);
   }
-
   /** Focus a toggle item by index */
   private focusItemByIndex(index: number): void {
     const values = this.context.itemValues();
     if (index < 0 || index >= values.length) return;
 
-    const value = values[index];
-    this.context.focusedValue.set(value);
+    const targetValue = values[index];
+    this.context.focusedValue.set(targetValue);
 
-    const item = this.elementRef.nativeElement.querySelector(
-      `[data-slot="toggle-group-item"][data-value="${value}"]`
+    const toggleItem = this._elementRef.nativeElement.querySelector(
+      `[data-slot="toggle-group-item"][data-value="${targetValue}"]`,
     ) as HTMLElement;
 
-    if (item) {
-      item.focus();
+    if (toggleItem) {
+      toggleItem.focus();
     }
   }
 }

package/src/app/lib/components/ui/tooltip/index.ts

@@ -1,14 +1,17 @@
 // Context and types
 export {
-    TOOLTIP_CONTEXT,
-    type TooltipAlign,
-    type TooltipContextValue,
-    type TooltipSide
+  TOOLTIP_CONTEXT,
+  type TooltipAlign,
+  type TooltipContextValue,
+  type TooltipSide,
 } from './tooltip-context';
 
 // Components and their types
-export { TooltipContent, type TooltipContentProps, type TooltipContentState } from './tooltip-content.component';
+export {
+  TooltipContent,
+  type TooltipContentProps,
+  type TooltipContentState,
+} from './tooltip-content.component';
 export { TooltipProvider, type TooltipProviderProps } from './tooltip-provider.component';
 export { TooltipTrigger, type TooltipTriggerProps } from './tooltip-trigger.component';
 export { Tooltip, type TooltipProps, type TooltipState } from './tooltip.component';
-

package/src/app/lib/components/ui/tooltip/tooltip-content.component.ts

@@ -1,17 +1,7 @@
 import { cn, Presence } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    inject,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { TOOLTIP_CONTEXT, TooltipAlign, TooltipSide } from './tooltip-context';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type TooltipContentState = 'open' | 'closed';
 
 /**
@@ -37,10 +27,6 @@ export interface TooltipContentProps {
   class?: string;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component TooltipContent
  *
@@ -105,33 +91,29 @@ export interface TooltipContentProps {
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"tooltip-content"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TooltipContent {
-  protected readonly context = inject(TOOLTIP_CONTEXT);
-
   /** The preferred side of the trigger to render against */
   readonly side = input<TooltipSide>('top');
-
   /** The distance in pixels from the trigger */
   readonly sideOffset = input<number>(4);
-
   /** The preferred alignment against the trigger */
   readonly align = input<TooltipAlign>('center');
-
   /** An offset in pixels from the alignment options */
   readonly alignOffset = input<number>(0);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  protected readonly context = inject(TOOLTIP_CONTEXT);
+
   /** Current state: open or closed */
   protected readonly state = computed<TooltipContentState>(() =>
-    this.context.open() ? 'open' : 'closed'
+    this.context.open() ? 'open' : 'closed',
   );
-
   protected readonly computedClass = computed(() => {
     const sideClasses = {
       top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
@@ -148,7 +130,7 @@ export class TooltipContent {
       'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
       'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       sideClasses[this.side()],
-      this.class()
+      this.class(),
     );
   });
 }

package/src/app/lib/components/ui/tooltip/tooltip-context.ts

@@ -1,9 +1,5 @@
 import { InjectionToken, WritableSignal } from '@angular/core';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
 export type TooltipAlign = 'start' | 'center' | 'end';
 
@@ -22,8 +18,4 @@ export interface TooltipContextValue {
   disableHoverableContent: () => boolean;
 }
 
-// ============================================================================
-// Injection Tokens
-// ============================================================================
-
 export const TOOLTIP_CONTEXT = new InjectionToken<TooltipContextValue>('TOOLTIP_CONTEXT');

package/src/app/lib/components/ui/tooltip/tooltip-provider.component.ts

@@ -1,18 +1,8 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    forwardRef,
-    input,
-    signal,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef, input, signal } from '@angular/core';
 import { TOOLTIP_CONTEXT, type TooltipContextValue } from './tooltip-context';
 
 let tooltipIdCounter = 0;
 
-// ============================================================================
-// Types
-// ============================================================================
-
 /**
  * Props for the TooltipProvider component
  */
@@ -28,10 +18,6 @@ export interface TooltipProviderProps {
   disableHoverableContent?: boolean;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component TooltipProvider
  *
@@ -66,6 +52,10 @@ export interface TooltipProviderProps {
 @Component({
   selector: 'TooltipProvider',
   template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"tooltip-provider"',
+    style: 'display: contents',
+  },
   providers: [
     {
       provide: TOOLTIP_CONTEXT,
@@ -75,20 +65,18 @@ export interface TooltipProviderProps {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TooltipProvider implements TooltipContextValue {
-  /** The duration from when the pointer enters the trigger until the tooltip opens */
-  readonly delayDuration = 700;
-
-  /** How much time a user has to enter another trigger without incurring a delay again */
-  readonly skipDelayDuration = 300;
-
-  /** Unique ID for aria-describedby relationship */
-  readonly tooltipId = `tooltip-provider-${++tooltipIdCounter}`;
-
   /** When true, trying to hover the content will result in the tooltip closing */
   readonly disableHoverableContent = input<boolean>(false);
 
   readonly open = signal(false);
 
+  /** Unique ID for aria-describedby relationship */
+  readonly tooltipId = `tooltip-provider-${++tooltipIdCounter}`;
+  /** The duration from when the pointer enters the trigger until the tooltip opens */
+  readonly delayDuration = 700;
+  /** How much time a user has to enter another trigger without incurring a delay again */
+  readonly skipDelayDuration = 300;
+
   setOpen(open: boolean): void {
     this.open.set(open);
   }

package/src/app/lib/components/ui/tooltip/tooltip-trigger.component.ts

@@ -1,16 +1,6 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    inject,
-    input,
-    OnDestroy,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, input, OnDestroy } from '@angular/core';
 import { TOOLTIP_CONTEXT } from './tooltip-context';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 /**
  * Props for the TooltipTrigger component
  */
@@ -20,10 +10,6 @@ export interface TooltipTriggerProps {
   asChild?: boolean;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component TooltipTrigger
  *
@@ -68,6 +54,7 @@ export interface TooltipTriggerProps {
   selector: 'TooltipTrigger',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"tooltip-trigger"',
     '(mouseenter)': 'onMouseEnter()',
     '(mouseleave)': 'onMouseLeave()',
     '(focus)': 'onFocus()',
@@ -79,11 +66,11 @@ export interface TooltipTriggerProps {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TooltipTrigger implements OnDestroy {
-  protected readonly context = inject(TOOLTIP_CONTEXT);
-
   /** Change the default rendered element for the one passed as a child */
   readonly asChild = input<boolean>(false);
 
+  protected readonly context = inject(TOOLTIP_CONTEXT);
+
   private showTimeout: ReturnType<typeof setTimeout> | null = null;
   private hideTimeout: ReturnType<typeof setTimeout> | null = null;
 
@@ -97,7 +84,6 @@ export class TooltipTrigger implements OnDestroy {
       this.context.setOpen(true);
     }, this.context.delayDuration);
   }
-
   onMouseLeave(): void {
     this.clearTimeouts();
     // Small delay to allow moving to tooltip content
@@ -105,16 +91,13 @@ export class TooltipTrigger implements OnDestroy {
       this.context.setOpen(false);
     }, 100);
   }
-
   onFocus(): void {
     // Show immediately on focus for keyboard users
     this.context.setOpen(true);
   }
-
   onBlur(): void {
     this.context.setOpen(false);
   }
-
   /**
    * Escape key handler for WCAG 1.4.13 compliance.
    * Content on hover/focus must be dismissible via Escape.

package/src/app/lib/components/ui/tooltip/tooltip.component.ts

@@ -1,19 +1,15 @@
 import {
-    ChangeDetectionStrategy,
-    Component,
-    forwardRef,
-    input,
-    output,
-    signal,
+  ChangeDetectionStrategy,
+  Component,
+  forwardRef,
+  input,
+  output,
+  signal,
 } from '@angular/core';
 import { TOOLTIP_CONTEXT, type TooltipContextValue } from './tooltip-context';
 
 let tooltipIdCounter = 0;
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type TooltipState = 'open' | 'closed';
 
 /**
@@ -38,10 +34,6 @@ export interface TooltipProps {
   disableHoverableContent?: boolean;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component Tooltip
  *
@@ -104,6 +96,7 @@ export interface TooltipProps {
   selector: 'Tooltip',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"tooltip"',
     class: 'relative inline-block',
   },
   providers: [
@@ -115,36 +108,32 @@ export interface TooltipProps {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Tooltip implements TooltipContextValue {
+  constructor() {
+    // Initialize from defaultOpen
+    if (this.defaultOpen()) {
+      this.open.set(true);
+    }
+  }
+
+  /** Event handler called when the open state changes */
+  readonly openChange = output<boolean>();
+
   /** The open state of the tooltip when initially rendered */
   readonly defaultOpen = input<boolean>(false);
-
   /** The controlled open state of the tooltip */
   readonly controlledOpen = input<boolean | undefined>(undefined, { alias: 'open' });
+  /** When true, trying to hover the content will result in the tooltip closing */
+  readonly disableHoverableContent = input<boolean>(false);
+
+  readonly open = signal(false);
 
   /** The duration from when the pointer enters the trigger until the tooltip opens */
   readonly delayDuration = 700;
-
   /** How much time a user has to enter another trigger without incurring a delay again */
   readonly skipDelayDuration = 300;
-
-  /** When true, trying to hover the content will result in the tooltip closing */
-  readonly disableHoverableContent = input<boolean>(false);
-
-  /** Event handler called when the open state changes */
-  readonly openChange = output<boolean>();
-
   /** Unique ID for aria-describedby relationship */
   readonly tooltipId = `tooltip-${++tooltipIdCounter}`;
 
-  readonly open = signal(false);
-
-  constructor() {
-    // Initialize from defaultOpen
-    if (this.defaultOpen()) {
-      this.open.set(true);
-    }
-  }
-
   setOpen(open: boolean): void {
     const controlled = this.controlledOpen();
     if (controlled === undefined) {
@@ -152,7 +141,6 @@ export class Tooltip implements TooltipContextValue {
     }
     this.openChange.emit(open);
   }
-
   isOpen(): boolean {
     return this.controlledOpen() !== undefined ? this.controlledOpen()! : this.open();
   }

package/src/app/lib/components/ui/typography/index.ts

@@ -10,4 +10,3 @@ export { TypographyList } from './typography-list.component';
 export { TypographyMuted } from './typography-muted.component';
 export { TypographyP } from './typography-p.component';
 export { TypographySmall } from './typography-small.component';
-

package/src/app/lib/components/ui/typography/typography-blockquote.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * Typography Blockquote component
@@ -18,6 +13,7 @@ import {
   selector: 'TypographyBlockquote',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"typography-blockquote"',
     '[class]': 'computedClass()',
     style: 'display: block',
   },
@@ -26,6 +22,6 @@ import {
 export class TypographyBlockquote {
   readonly class = input<string>('');
   protected readonly computedClass = computed(() =>
-    cn('mt-6 border-l-2 pl-6 italic', this.class())
+    cn('mt-6 border-l-2 pl-6 italic', this.class()),
   );
 }

package/src/app/lib/components/ui/typography/typography-h1.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * Typography H1 component
@@ -16,6 +11,7 @@ import {
   selector: 'TypographyH1',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"typography-h1"',
     '[class]': 'computedClass()',
     style: 'display: block',
   },
@@ -24,9 +20,6 @@ import {
 export class TypographyH1 {
   readonly class = input<string>('');
   protected readonly computedClass = computed(() =>
-    cn(
-      'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl',
-      this.class()
-    )
+    cn('scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl', this.class()),
   );
 }

package/src/app/lib/components/ui/typography/typography-h2.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * Typography H2 component
@@ -16,6 +11,7 @@ import {
   selector: 'TypographyH2',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"typography-h2"',
     '[class]': 'computedClass()',
     style: 'display: block',
   },
@@ -24,9 +20,6 @@ import {
 export class TypographyH2 {
   readonly class = input<string>('');
   protected readonly computedClass = computed(() =>
-    cn(
-      'scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0',
-      this.class()
-    )
+    cn('scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0', this.class()),
   );
 }

package/src/app/lib/components/ui/typography/typography-h3.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * Typography H3 component
@@ -16,6 +11,7 @@ import {
   selector: 'TypographyH3',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"typography-h3"',
     '[class]': 'computedClass()',
     style: 'display: block',
   },
@@ -24,6 +20,6 @@ import {
 export class TypographyH3 {
   readonly class = input<string>('');
   protected readonly computedClass = computed(() =>
-    cn('scroll-m-20 text-2xl font-semibold tracking-tight', this.class())
+    cn('scroll-m-20 text-2xl font-semibold tracking-tight', this.class()),
   );
 }

package/src/app/lib/components/ui/typography/typography-h4.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * Typography H4 component
@@ -16,6 +11,7 @@ import {
   selector: 'TypographyH4',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"typography-h4"',
     '[class]': 'computedClass()',
     style: 'display: block',
   },
@@ -24,6 +20,6 @@ import {
 export class TypographyH4 {
   readonly class = input<string>('');
   protected readonly computedClass = computed(() =>
-    cn('scroll-m-20 text-xl font-semibold tracking-tight', this.class())
+    cn('scroll-m-20 text-xl font-semibold tracking-tight', this.class()),
   );
 }