@ng-cn/core 1.0.15 → 1.0.17

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

@@ -1,11 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import {
   SIDEBAR_CONTEXT,
   type SidebarCollapsible,
@@ -32,11 +26,7 @@ import {
           (click)="context.setOpenMobile(false)"
           aria-hidden="true"
         ></div>
-        <aside
-          [class]="computedMobileClass()"
-          role="complementary"
-          [attr.aria-label]="ariaLabel()"
-        >
+        <aside [class]="computedMobileClass()" role="complementary" [attr.aria-label]="ariaLabel()">
           <nav [attr.aria-label]="navLabel()">
             <ng-content />
           </nav>
@@ -51,43 +41,45 @@ import {
         [attr.aria-label]="ariaLabel()"
         [attr.aria-hidden]="context.state() === 'collapsed' && collapsible() === 'offcanvas'"
       >
-        <nav [attr.aria-label]="navLabel()" [attr.data-sidebar]="'sidebar'" [class]="computedInnerClass()">
+        <nav
+          [attr.aria-label]="navLabel()"
+          [attr.data-sidebar]="'sidebar'"
+          [class]="computedInnerClass()"
+        >
           <ng-content />
         </nav>
       </aside>
     }
   `,
   host: {
+    'attr.data-slot': '"sidebar"',
     '[attr.data-state]': 'context.state()',
-    '[attr.data-collapsible]':
-      'context.state() === "collapsed" ? collapsible() : ""',
+    '[attr.data-collapsible]': 'context.state() === "collapsed" ? collapsible() : ""',
     '[attr.data-variant]': 'variant()',
     '[attr.data-side]': 'side()',
-    'ngSkipHydration': 'true',
+    ngSkipHydration: 'true',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Sidebar {
-  protected readonly context = inject(SIDEBAR_CONTEXT);
-
   /** Side of the screen */
   readonly side = input<SidebarSide>('left');
 
   /** Variant style */
   readonly variant = input<SidebarVariant>('sidebar');
-
   /** Collapsible behavior */
   readonly collapsible = input<SidebarCollapsible>('offcanvas');
 
   /** Accessible label for the sidebar landmark */
   readonly ariaLabel = input<string>('Sidebar');
-
   /** Accessible label for the navigation within */
   readonly navLabel = input<string>('Main navigation');
 
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  protected readonly context = inject(SIDEBAR_CONTEXT);
+
   protected readonly computedGapClass = computed(() =>
     cn(
       'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',
@@ -95,10 +87,9 @@ export class Sidebar {
       'group-data-[side=right]/sidebar-wrapper:rotate-180',
       this.variant() === 'floating' || this.variant() === 'inset'
         ? 'group-data-[collapsible=icon]/sidebar-wrapper:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
-        : 'group-data-[collapsible=icon]/sidebar-wrapper:w-[--sidebar-width-icon]'
-    )
+        : 'group-data-[collapsible=icon]/sidebar-wrapper:w-[--sidebar-width-icon]',
+    ),
   );
-
   protected readonly computedClass = computed(() =>
     cn(
       'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
@@ -108,23 +99,21 @@ export class Sidebar {
       this.variant() === 'floating' || this.variant() === 'inset'
         ? 'p-2 group-data-[collapsible=icon]/sidebar-wrapper:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
         : 'group-data-[collapsible=icon]/sidebar-wrapper:w-[--sidebar-width-icon] group-data-[side=left]/sidebar-wrapper:border-r group-data-[side=right]/sidebar-wrapper:border-l',
-      this.class()
-    )
+      this.class(),
+    ),
   );
-
   protected readonly computedInnerClass = computed(() =>
     cn(
-      'flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]/sidebar-wrapper:rounded-lg group-data-[variant=floating]/sidebar-wrapper:border group-data-[variant=floating]/sidebar-wrapper:border-sidebar-border group-data-[variant=floating]/sidebar-wrapper:shadow'
-    )
+      'flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]/sidebar-wrapper:rounded-lg group-data-[variant=floating]/sidebar-wrapper:border group-data-[variant=floating]/sidebar-wrapper:border-sidebar-border group-data-[variant=floating]/sidebar-wrapper:shadow',
+    ),
   );
-
   protected readonly computedMobileClass = computed(() =>
     cn(
       'fixed inset-y-0 z-50 flex h-full w-[--sidebar-width] flex-col bg-sidebar p-0 text-sidebar-foreground',
       this.side() === 'left'
         ? 'left-0 animate-in slide-in-from-left'
         : 'right-0 animate-in slide-in-from-right',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

package/src/app/lib/components/ui/skeleton/skeleton.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';
 
 /**
  * Skeleton component that creates a loading placeholder.
@@ -33,7 +28,7 @@ import {
     '[class]': 'computedClass()',
     'aria-busy': 'true',
     '[attr.aria-label]': 'ariaLabel()',
-    'role': 'status',
+    role: 'status',
     'data-slot': 'skeleton',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -47,6 +42,6 @@ export class Skeleton {
 
   /** Computed class combining base styles and custom classes */
   protected readonly computedClass = computed(() =>
-    cn('bg-accent animate-pulse rounded-md', this.class())
+    cn('bg-accent animate-pulse rounded-md', this.class()),
   );
 }

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

@@ -1,6 +1 @@
-export {
-    Slider,
-    type SliderOrientation,
-    type SliderProps
-} from './slider.component';
-
+export { Slider, type SliderOrientation, type SliderProps } from './slider.component';

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

@@ -1,22 +1,18 @@
 import { cn } from '@/lib/utils';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    ElementRef,
-    forwardRef,
-    input,
-    model,
-    output,
-    signal,
-    viewChild,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  forwardRef,
+  input,
+  model,
+  output,
+  signal,
+  viewChild,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type SliderOrientation = 'horizontal' | 'vertical';
 
 export type SliderProps = {
@@ -44,10 +40,6 @@ export type SliderProps = {
   class?: string;
 };
 
-// ============================================================================
-// Slider Component
-// ============================================================================
-
 /**
  * Slider component for range selection.
  * Based on Radix UI Slider primitive with shadcn/ui styling.
@@ -152,12 +144,7 @@ export type SliderProps = {
       (blur)="onBlur()"
     ></span>
     @if (name()) {
-      <input
-        type="hidden"
-        [attr.name]="name()"
-        [value]="value()"
-        [disabled]="isDisabled()"
-      />
+      <input type="hidden" [attr.name]="name()" [value]="value()" [disabled]="isDisabled()" />
     }
   `,
   host: {
@@ -181,103 +168,72 @@ export class Slider implements ControlValueAccessor {
   private readonly thumb = viewChild<ElementRef<HTMLElement>>('thumb');
   private readonly elementRef = viewChild<ElementRef<HTMLElement>>('slider');
 
+  /** Emitted when value changes */
+  readonly valueChange = output<number>();
+  /** Emitted when value change is committed (on release) */
+  readonly valueCommit = output<number>();
+
   /** The current slider value */
   readonly value = model<number>(0);
 
   /** The default value for uncontrolled mode */
   readonly defaultValue = input<number>(0);
-
   /** The minimum value */
   readonly min = input<number>(0);
-
   /** The maximum value */
   readonly max = input<number>(100);
-
   /** The step increment */
   readonly step = input<number>(1);
-
   /** Whether the slider is disabled via input */
   readonly disabled = input<boolean>(false);
-
   /** The orientation of the slider */
   readonly orientation = input<SliderOrientation>('horizontal');
-
   /** Whether the direction is inverted */
   readonly inverted = input<boolean>(false);
-
   /** The name for form submission */
   readonly name = input<string>();
-
   /** Function to get value label for accessibility */
-  readonly getAriaValueText = input<((value: number) => string) | undefined>(
-    undefined
-  );
-
+  readonly getAriaValueText = input<((value: number) => string) | undefined>(undefined);
   /** Additional CSS classes to apply */
   readonly class = input<string>('');
 
-  /** Emitted when value changes */
-  readonly valueChange = output<number>();
-
-  /** Emitted when value change is committed (on release) */
-  readonly valueCommit = output<number>();
-
-  /** Whether the slider is disabled via forms */
-  private readonly formsDisabled = signal<boolean>(false);
-
   /** Whether the slider is disabled (either via input or forms) */
-  readonly isDisabled = computed(() => this.disabled() || this.formsDisabled());
-
+  readonly isDisabled = computed(() => this.disabled() || this.isFormsDisabled());
   /** Whether the slider is horizontal */
-  protected readonly isHorizontal = computed(
-    () => this.orientation() === 'horizontal'
-  );
-
-  /** ControlValueAccessor callbacks */
-  private onChange: (value: number) => void = () => {};
-  private onTouched: () => void = () => {};
-
+  protected readonly isHorizontal = computed(() => this.orientation() === 'horizontal');
   /** Calculate percentage position */
   protected readonly percentage = computed(() => {
-    const val = this.value();
+    const currentValue = this.value();
     const minVal = this.min();
     const maxVal = this.max();
-    const percent = ((val - minVal) / (maxVal - minVal)) * 100;
+    const percent = ((currentValue - minVal) / (maxVal - minVal)) * 100;
     return this.inverted() ? 100 - percent : percent;
   });
-
   /** Generate aria-valuetext */
   protected readonly computedAriaValueText = computed(() => {
     const fn = this.getAriaValueText();
     return fn ? fn(this.value()) : undefined;
   });
-
   /** Computed class combining base styles and custom classes */
   protected readonly computedClass = computed(() =>
     cn(
       'relative flex touch-none select-none items-center',
       this.isHorizontal() ? 'w-full' : 'flex-col h-full',
       this.isDisabled() && 'opacity-50 pointer-events-none',
-      this.class()
-    )
+      this.class(),
+    ),
   );
-
   /** Track class */
   protected readonly trackClass = computed(() =>
     cn(
       'bg-primary/20 relative overflow-hidden rounded-full',
-      this.isHorizontal() ? 'h-1.5 w-full grow' : 'w-1.5 h-full grow'
-    )
+      this.isHorizontal() ? 'h-1.5 w-full grow' : 'w-1.5 h-full grow',
+    ),
   );
-
   /** Range class */
   protected readonly rangeClass = computed(() =>
-    cn(
-      'bg-primary absolute',
-      this.isHorizontal() ? 'h-full' : 'w-full bottom-0'
-    )
+    cn('bg-primary absolute', this.isHorizontal() ? 'h-full' : 'w-full bottom-0'),
   );
-
   /** Thumb class */
   protected readonly thumbClass = computed(() =>
     cn(
@@ -288,70 +244,34 @@ export class Slider implements ControlValueAccessor {
       'absolute cursor-grab active:cursor-grabbing',
       this.isHorizontal()
         ? 'size-4 top-1/2 -translate-x-1/2 -translate-y-1/2'
-        : 'size-4 left-1/2 -translate-x-1/2 translate-y-1/2'
-    )
+        : 'size-4 left-1/2 -translate-x-1/2 translate-y-1/2',
+    ),
   );
 
+  /** Whether the slider is disabled via forms */
+  private readonly isFormsDisabled = signal<boolean>(false);
+
+  /** ControlValueAccessor callbacks */
+  private onChange: (value: number) => void = () => {};
+  private onTouched: () => void = () => {};
+
   // ControlValueAccessor implementation
   writeValue(value: number): void {
     this.value.set(value ?? this.defaultValue());
   }
-
   registerOnChange(fn: (value: number) => void): void {
     this.onChange = fn;
   }
-
   registerOnTouched(fn: () => void): void {
     this.onTouched = fn;
   }
-
   setDisabledState(isDisabled: boolean): void {
-    this.formsDisabled.set(isDisabled);
+    this.isFormsDisabled.set(isDisabled);
   }
-
   /** Handle blur for forms touched state */
   onBlur(): void {
     this.onTouched();
   }
-
-  /** Clamp and step a value */
-  private clampValue(rawValue: number): number {
-    const stepValue = this.step();
-    const steppedValue = Math.round(rawValue / stepValue) * stepValue;
-    return Math.max(this.min(), Math.min(this.max(), steppedValue));
-  }
-
-  /** Update value from position */
-  private updateValueFromPosition(
-    clientPos: number,
-    rect: DOMRect,
-    isVertical: boolean
-  ): void {
-    if (this.isDisabled()) return;
-
-    let percentage: number;
-    if (isVertical) {
-      percentage = 1 - (clientPos - rect.top) / rect.height;
-    } else {
-      percentage = (clientPos - rect.left) / rect.width;
-    }
-
-    if (this.inverted()) {
-      percentage = 1 - percentage;
-    }
-
-    percentage = Math.max(0, Math.min(1, percentage));
-    const range = this.max() - this.min();
-    const rawValue = this.min() + percentage * range;
-    const newValue = this.clampValue(rawValue);
-
-    if (newValue !== this.value()) {
-      this.value.set(newValue);
-      this.onChange(newValue);
-      this.valueChange.emit(newValue);
-    }
-  }
-
   /** Handle mouse down */
   onMouseDown(event: MouseEvent): void {
     if (this.isDisabled() || event.button !== 0) return;
@@ -361,21 +281,13 @@ export class Slider implements ControlValueAccessor {
     const rect = target.getBoundingClientRect();
     const isVertical = !this.isHorizontal();
 
-    this.updateValueFromPosition(
-      isVertical ? event.clientY : event.clientX,
-      rect,
-      isVertical
-    );
+    this.updateValueFromPosition(isVertical ? event.clientY : event.clientX, rect, isVertical);
 
     // Focus the thumb
     this.thumb()?.nativeElement.focus();
 
     const onMouseMove = (e: MouseEvent) => {
-      this.updateValueFromPosition(
-        isVertical ? e.clientY : e.clientX,
-        rect,
-        isVertical
-      );
+      this.updateValueFromPosition(isVertical ? e.clientY : e.clientX, rect, isVertical);
     };
 
     const onMouseUp = () => {
@@ -388,7 +300,6 @@ export class Slider implements ControlValueAccessor {
     document.addEventListener('mousemove', onMouseMove);
     document.addEventListener('mouseup', onMouseUp);
   }
-
   /** Handle touch start */
   onTouchStart(event: TouchEvent): void {
     if (this.isDisabled()) return;
@@ -398,19 +309,11 @@ export class Slider implements ControlValueAccessor {
     const touch = event.touches[0];
     const isVertical = !this.isHorizontal();
 
-    this.updateValueFromPosition(
-      isVertical ? touch.clientY : touch.clientX,
-      rect,
-      isVertical
-    );
+    this.updateValueFromPosition(isVertical ? touch.clientY : touch.clientX, rect, isVertical);
 
     const onTouchMove = (e: TouchEvent) => {
       const touch = e.touches[0];
-      this.updateValueFromPosition(
-        isVertical ? touch.clientY : touch.clientX,
-        rect,
-        isVertical
-      );
+      this.updateValueFromPosition(isVertical ? touch.clientY : touch.clientX, rect, isVertical);
     };
 
     const onTouchEnd = () => {
@@ -423,7 +326,6 @@ export class Slider implements ControlValueAccessor {
     document.addEventListener('touchmove', onTouchMove);
     document.addEventListener('touchend', onTouchEnd);
   }
-
   /** Handle keyboard navigation */
   onKeyDown(event: KeyboardEvent): void {
     if (this.isDisabled()) return;
@@ -474,4 +376,37 @@ export class Slider implements ControlValueAccessor {
       this.valueChange.emit(newValue);
     }
   }
+
+  /** Clamp and step a value */
+  private clampValue(rawValue: number): number {
+    const stepValue = this.step();
+    const steppedValue = Math.round(rawValue / stepValue) * stepValue;
+    return Math.max(this.min(), Math.min(this.max(), steppedValue));
+  }
+  /** Update value from position */
+  private updateValueFromPosition(clientPos: number, rect: DOMRect, isVertical: boolean): void {
+    if (this.isDisabled()) return;
+
+    let percentage: number;
+    if (isVertical) {
+      percentage = 1 - (clientPos - rect.top) / rect.height;
+    } else {
+      percentage = (clientPos - rect.left) / rect.width;
+    }
+
+    if (this.inverted()) {
+      percentage = 1 - percentage;
+    }
+
+    percentage = Math.max(0, Math.min(1, percentage));
+    const range = this.max() - this.min();
+    const rawValue = this.min() + percentage * range;
+    const newValue = this.clampValue(rawValue);
+
+    if (newValue !== this.value()) {
+      this.value.set(newValue);
+      this.onChange(newValue);
+      this.valueChange.emit(newValue);
+    }
+  }
 }

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

@@ -1,3 +1,2 @@
 export { spinnerVariants, type SpinnerVariants } from './spinner-variants';
 export { Spinner } from './spinner.component';
-

package/src/app/lib/components/ui/spinner/spinner-variants.ts

@@ -4,29 +4,26 @@ import { cva, type VariantProps } from 'class-variance-authority';
  * Spinner variants using class-variance-authority
  * Loading indicator animations with multiple sizes and variants
  */
-export const spinnerVariants = cva(
-  'animate-spin',
-  {
-    variants: {
-      variant: {
-        default: 'text-primary',
-        secondary: 'text-secondary',
-        muted: 'text-muted-foreground',
-        destructive: 'text-destructive',
-      },
-      size: {
-        xs: 'size-3',
-        sm: 'size-4',
-        default: 'size-6',
-        lg: 'size-8',
-        xl: 'size-12',
-      },
+export const spinnerVariants = cva('animate-spin', {
+  variants: {
+    variant: {
+      default: 'text-primary',
+      secondary: 'text-secondary',
+      muted: 'text-muted-foreground',
+      destructive: 'text-destructive',
     },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
+    size: {
+      xs: 'size-3',
+      sm: 'size-4',
+      default: 'size-6',
+      lg: 'size-8',
+      xl: 'size-12',
     },
-  }
-);
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'default',
+  },
+});
 
 export type SpinnerVariants = VariantProps<typeof spinnerVariants>;

package/src/app/lib/components/ui/spinner/spinner.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';
 import { spinnerVariants, type SpinnerVariants } from './spinner-variants';
 
 /**
@@ -48,6 +43,7 @@ import { spinnerVariants, type SpinnerVariants } from './spinner-variants';
     </svg>
   `,
   host: {
+    'attr.data-slot': '"spinner"',
     role: 'status',
     'aria-label': 'Loading',
     '[attr.aria-busy]': 'true',
@@ -71,7 +67,7 @@ export class Spinner {
         variant: this.variant(),
         size: this.size(),
       }),
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

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

@@ -1,6 +1 @@
-export {
-    Switch,
-    type SwitchProps,
-    type SwitchState
-} from './switch.component';
-
+export { Switch, type SwitchProps, type SwitchState } from './switch.component';