@sonny-ui/core 0.1.0-alpha.16 → 0.1.0-alpha.18

package/src/lib/pagination/pagination.component.ts

@@ -54,7 +54,6 @@ function computePageRange(
 
 @Component({
   selector: 'sny-pagination',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     'role': 'navigation',

package/src/lib/popover/index.ts

@@ -0,0 +1,6 @@
+export {
+  SnyPopoverDirective,
+  SnyPopoverTriggerDirective,
+  SnyPopoverContentDirective,
+  SNY_POPOVER,
+} from './popover.directives';

package/src/lib/popover/popover.directives.spec.ts

@@ -0,0 +1,147 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import {
+  SnyPopoverDirective,
+  SnyPopoverTriggerDirective,
+  SnyPopoverContentDirective,
+} from './popover.directives';
+
+@Component({
+  standalone: true,
+  imports: [SnyPopoverDirective, SnyPopoverTriggerDirective, SnyPopoverContentDirective],
+  template: `
+    <div snyPopover [matchWidth]="matchWidth()" [closeOnOutside]="closeOnOutside()" [closeOnEscape]="closeOnEscape()" #pop="snyPopover">
+      <button snyPopoverTrigger>Open</button>
+      <div snyPopoverContent class="p-4">
+        <p>Popover content</p>
+        <button class="close-btn" (click)="pop.close()">Close</button>
+      </div>
+    </div>
+  `,
+})
+class TestHost {
+  matchWidth = signal(false);
+  closeOnOutside = signal(true);
+  closeOnEscape = signal(true);
+}
+
+describe('SnyPopoverDirective', () => {
+  let fixture: ComponentFixture<TestHost>;
+  let el: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHost] }).compileComponents();
+    fixture = TestBed.createComponent(TestHost);
+    fixture.detectChanges();
+    el = fixture.nativeElement;
+  });
+
+  function getTrigger(): HTMLButtonElement {
+    return el.querySelector('[snypopovertrigger]') as HTMLButtonElement;
+  }
+
+  function getContent(): HTMLElement | null {
+    return el.querySelector('[snyPopoverContent], [snypopovercontent]');
+  }
+
+  function isVisible(): boolean {
+    const content = getContent();
+    return content ? content.style.display !== 'none' : false;
+  }
+
+  it('should render trigger and hidden content', () => {
+    expect(getTrigger()).not.toBeNull();
+    expect(getContent()).not.toBeNull();
+    expect(isVisible()).toBe(false);
+  });
+
+  it('should open on trigger click', () => {
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+  });
+
+  it('should close on second trigger click', () => {
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(false);
+  });
+
+  it('should set aria-expanded on trigger', () => {
+    expect(getTrigger().getAttribute('aria-expanded')).toBe('false');
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(getTrigger().getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('should have aria-haspopup on trigger', () => {
+    expect(getTrigger().getAttribute('aria-haspopup')).toBe('dialog');
+  });
+
+  it('should have role=dialog on content', () => {
+    expect(getContent()?.getAttribute('role')).toBe('dialog');
+  });
+
+  it('should close on click outside', () => {
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+
+    document.body.click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(false);
+  });
+
+  it('should not close on click outside when closeOnOutside=false', () => {
+    fixture.componentInstance.closeOnOutside.set(false);
+    fixture.detectChanges();
+
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+
+    document.body.click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+  });
+
+  it('should close on escape', () => {
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+
+    const host = el.querySelector('[snyPopover], [snypopover]') as HTMLElement;
+    host.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+    fixture.detectChanges();
+    expect(isVisible()).toBe(false);
+  });
+
+  it('should not close on escape when closeOnEscape=false', () => {
+    fixture.componentInstance.closeOnEscape.set(false);
+    fixture.detectChanges();
+
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+
+    const host = el.querySelector('[snyPopover], [snypopover]') as HTMLElement;
+    host.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+  });
+
+  it('should close programmatically via template ref', () => {
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+
+    const closeBtn = el.querySelector('.close-btn') as HTMLButtonElement;
+    closeBtn.click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(false);
+  });
+});

package/src/lib/popover/popover.directives.ts

@@ -0,0 +1,151 @@
+import {
+  Directive,
+  ElementRef,
+  InjectionToken,
+  OnDestroy,
+  computed,
+  inject,
+  input,
+  signal,
+} from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export const SNY_POPOVER = new InjectionToken<SnyPopoverDirective>('SnyPopover');
+
+@Directive({
+  selector: '[snyPopover]',
+  exportAs: 'snyPopover',
+  providers: [{ provide: SNY_POPOVER, useExisting: SnyPopoverDirective }],
+  host: {
+    '[class]': '"relative inline-block"',
+    '(document:click)': 'onDocumentClick($event)',
+    '(keydown.escape)': 'onEscape()',
+  },
+})
+export class SnyPopoverDirective implements OnDestroy {
+  private readonly elRef = inject(ElementRef);
+
+  readonly matchWidth = input(false);
+  readonly offset = input(4);
+  readonly closeOnOutside = input(true);
+  readonly closeOnEscape = input(true);
+
+  readonly isOpen = signal(false);
+  readonly triggerEl = signal<HTMLElement | null>(null);
+  readonly panelEl = signal<HTMLElement | null>(null);
+
+  private scrollHandler: (() => void) | null = null;
+  private resizeHandler: (() => void) | null = null;
+
+  toggle(): void {
+    if (this.isOpen()) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  open(): void {
+    this.isOpen.set(true);
+    this.addListeners();
+    setTimeout(() => this.updatePosition());
+  }
+
+  close(): void {
+    this.isOpen.set(false);
+    this.removeListeners();
+  }
+
+  updatePosition(): void {
+    const trigger = this.triggerEl();
+    const panel = this.panelEl();
+    if (!trigger || !panel) return;
+    const rect = trigger.getBoundingClientRect();
+    panel.style.top = `${rect.bottom + this.offset()}px`;
+    panel.style.left = `${rect.left}px`;
+    if (this.matchWidth()) {
+      panel.style.width = `${rect.width}px`;
+    }
+  }
+
+  private addListeners(): void {
+    this.removeListeners();
+    this.scrollHandler = () => {
+      requestAnimationFrame(() => this.updatePosition());
+    };
+    this.resizeHandler = () => {
+      requestAnimationFrame(() => this.updatePosition());
+    };
+    document.addEventListener('scroll', this.scrollHandler, { capture: true, passive: true });
+    window.addEventListener('resize', this.resizeHandler, { passive: true });
+  }
+
+  private removeListeners(): void {
+    if (this.scrollHandler) {
+      document.removeEventListener('scroll', this.scrollHandler, { capture: true } as EventListenerOptions);
+      this.scrollHandler = null;
+    }
+    if (this.resizeHandler) {
+      window.removeEventListener('resize', this.resizeHandler);
+      this.resizeHandler = null;
+    }
+  }
+
+  onDocumentClick(event: MouseEvent): void {
+    if (this.closeOnOutside() && this.isOpen() && !this.elRef.nativeElement.contains(event.target)) {
+      this.close();
+    }
+  }
+
+  onEscape(): void {
+    if (this.closeOnEscape() && this.isOpen()) {
+      this.close();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.removeListeners();
+  }
+}
+
+@Directive({
+  selector: '[snyPopoverTrigger]',
+  host: {
+    '(click)': 'popover.toggle()',
+    '[attr.aria-expanded]': 'popover.isOpen()',
+    'aria-haspopup': 'dialog',
+  },
+})
+export class SnyPopoverTriggerDirective {
+  protected readonly popover = inject(SNY_POPOVER);
+  private readonly elRef = inject(ElementRef);
+
+  constructor() {
+    this.popover.triggerEl.set(this.elRef.nativeElement);
+  }
+}
+
+@Directive({
+  selector: '[snyPopoverContent]',
+  host: {
+    'role': 'dialog',
+    '[style.display]': 'popover.isOpen() ? "" : "none"',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyPopoverContentDirective {
+  protected readonly popover = inject(SNY_POPOVER);
+  private readonly elRef = inject(ElementRef);
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'fixed z-50 rounded-md border border-border bg-popover text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95',
+      this.class()
+    )
+  );
+
+  constructor() {
+    this.popover.panelEl.set(this.elRef.nativeElement);
+  }
+}

package/src/lib/progress/progress.component.ts

@@ -9,7 +9,6 @@ import {
 
 @Component({
   selector: 'sny-progress',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     'role': 'progressbar',

package/src/lib/radial-progress/radial-progress.component.ts

@@ -16,7 +16,6 @@ const variantColorMap: Record<RadialProgressVariant, string> = {
 
 @Component({
   selector: 'sny-radial-progress',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     'role': 'progressbar',

package/src/lib/radio/radio.directive.ts

@@ -4,7 +4,6 @@ import { radioVariants, type RadioSize } from './radio.variants';
 
 @Directive({
   selector: 'input[type="radio"][snyRadio]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyRadioDirective {

package/src/lib/rating/rating.component.ts

@@ -10,7 +10,6 @@ interface StarState {
 
 @Component({
   selector: 'sny-rating',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     'role': 'slider',

package/src/lib/select/select.component.ts

@@ -4,7 +4,6 @@ import {
   computed,
   ElementRef,
   forwardRef,
-  HostListener,
   inject,
   input,
   model,
@@ -23,10 +22,10 @@ export interface SelectOption {
 
 @Component({
   selector: 'sny-select',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     class: 'relative inline-block w-full',
+    '(document:click)': 'onDocumentClick($event)',
   },
   providers: [
     { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnySelectComponent), multi: true },
@@ -228,7 +227,6 @@ export class SnySelectComponent implements ControlValueAccessor, OnDestroy {
     }
   }
 
-  @HostListener('document:click', ['$event'])
   onDocumentClick(event: MouseEvent): void {
     if (!this.elRef.nativeElement.contains(event.target)) {
       this.close();

package/src/lib/sheet/sheet.directives.ts

@@ -4,7 +4,6 @@ import { cn } from '../core/utils/cn';
 
 @Directive({
   selector: '[snySheetHeader]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnySheetHeaderDirective {
@@ -16,7 +15,6 @@ export class SnySheetHeaderDirective {
 
 @Directive({
   selector: '[snySheetTitle]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnySheetTitleDirective {
@@ -28,7 +26,6 @@ export class SnySheetTitleDirective {
 
 @Directive({
   selector: '[snySheetDescription]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnySheetDescriptionDirective {
@@ -40,7 +37,6 @@ export class SnySheetDescriptionDirective {
 
 @Directive({
   selector: '[snySheetContent]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnySheetContentDirective {
@@ -52,7 +48,6 @@ export class SnySheetContentDirective {
 
 @Directive({
   selector: '[snySheetClose]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     '(click)': 'onClick()',

package/src/lib/skeleton/skeleton.directive.ts

@@ -4,7 +4,6 @@ import { skeletonVariants, type SkeletonVariant, type SkeletonSize } from './ske
 
 @Directive({
   selector: '[snySkeleton]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     'aria-busy': 'true',

package/src/lib/slider/slider.component.ts

@@ -5,7 +5,6 @@ import { sliderTrackVariants, sliderThumbSize, type SliderSize } from './slider.
 
 @Component({
   selector: 'sny-slider',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     class: 'block',

package/src/lib/stat/stat.directives.ts

@@ -7,7 +7,6 @@ let statIdCounter = 0;
 
 @Directive({
   selector: '[snyStat]',
-  standalone: true,
   providers: [{ provide: SNY_STAT, useExisting: SnyStatDirective }],
   host: { '[class]': 'computedClass()' },
 })
@@ -21,7 +20,6 @@ export class SnyStatDirective {
 
 @Directive({
   selector: '[snyStatTitle]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     '[id]': 'stat.titleId',
@@ -37,7 +35,6 @@ export class SnyStatTitleDirective {
 
 @Directive({
   selector: '[snyStatValue]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     '[attr.aria-labelledby]': 'stat.titleId',
@@ -55,7 +52,6 @@ export type StatDescriptionVariant = 'default' | 'success' | 'error';
 
 @Directive({
   selector: '[snyStatDescription]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyStatDescriptionDirective {
@@ -73,7 +69,6 @@ export class SnyStatDescriptionDirective {
 
 @Directive({
   selector: '[snyStatFigure]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyStatFigureDirective {

package/src/lib/status/status.directive.ts

@@ -13,7 +13,6 @@ const variantLabels: Record<StatusVariant, string> = {
 
 @Directive({
   selector: '[snyStatus]',
-  standalone: true,
   host: {
     'role': 'status',
     '[attr.aria-label]': 'ariaLabel()',

package/src/lib/steps/steps.directives.ts

@@ -9,7 +9,6 @@ export type StepsSize = 'sm' | 'md' | 'lg';
 
 @Directive({
   selector: '[snyStep]',
-  standalone: true,
   host: {
     'role': 'listitem',
     '[class]': 'computedClass()',
@@ -46,7 +45,6 @@ export class SnyStepDirective {
 
 @Directive({
   selector: '[snySteps]',
-  standalone: true,
   exportAs: 'snySteps',
   providers: [{ provide: SNY_STEPS, useExisting: SnyStepsDirective }],
   host: {

package/src/lib/switch/switch.component.ts

@@ -5,7 +5,6 @@ import { switchTrackVariants, switchThumbSize, switchThumbTranslate, type Switch
 
 @Component({
   selector: 'sny-switch',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'inline-flex' },
   providers: [

package/src/lib/table/table.directives.ts

@@ -6,7 +6,6 @@ export const SNY_TABLE = new InjectionToken<SnyTableDirective>('SnyTable');
 
 @Directive({
   selector: 'table[snyTable]',
-  standalone: true,
   providers: [{ provide: SNY_TABLE, useExisting: SnyTableDirective }],
   host: { '[class]': 'computedClass()' },
 })
@@ -24,7 +23,6 @@ export class SnyTableDirective {
 
 @Directive({
   selector: 'thead[snyTableHeader]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyTableHeaderDirective {
@@ -42,7 +40,6 @@ export class SnyTableHeaderDirective {
 
 @Directive({
   selector: 'tbody[snyTableBody]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyTableBodyDirective {
@@ -55,7 +52,6 @@ export class SnyTableBodyDirective {
 
 @Directive({
   selector: 'tr[snyTableRow]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyTableRowDirective {
@@ -73,7 +69,6 @@ export class SnyTableRowDirective {
 
 @Directive({
   selector: 'th[snyTableHead]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyTableHeadDirective {
@@ -91,7 +86,6 @@ export class SnyTableHeadDirective {
 
 @Directive({
   selector: 'td[snyTableCell]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyTableCellDirective {
@@ -109,7 +103,6 @@ export class SnyTableCellDirective {
 
 @Directive({
   selector: 'tfoot[snyTableFooter]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyTableFooterDirective {
@@ -122,7 +115,6 @@ export class SnyTableFooterDirective {
 
 @Directive({
   selector: 'caption[snyTableCaption]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyTableCaptionDirective {

package/src/lib/tabs/tabs.directives.ts

@@ -5,7 +5,6 @@ export const SNY_TABS = new InjectionToken<SnyTabsDirective>('SnyTabs');
 
 @Directive({
   selector: '[snyTabs]',
-  standalone: true,
   exportAs: 'snyTabs',
   providers: [{ provide: SNY_TABS, useExisting: SnyTabsDirective }],
   host: { '[class]': 'computedClass()' },
@@ -25,7 +24,6 @@ export class SnyTabsDirective {
 
 @Directive({
   selector: '[snyTabsList]',
-  standalone: true,
   host: {
     role: 'tablist',
     '[class]': 'computedClass()',
@@ -81,7 +79,6 @@ export class SnyTabsListDirective {
 
 @Directive({
   selector: '[snyTabsTrigger]',
-  standalone: true,
   host: {
     role: 'tab',
     '[class]': 'computedClass()',
@@ -110,7 +107,6 @@ export class SnyTabsTriggerDirective {
 
 @Directive({
   selector: '[snyTabsContent]',
-  standalone: true,
   host: {
     role: 'tabpanel',
     '[class]': 'computedClass()',

package/src/lib/tag-input/index.ts

@@ -0,0 +1,2 @@
+export { SnyTagInputComponent } from './tag-input.component';
+export { tagInputContainerVariants, tagVariants, type TagInputSize } from './tag-input.variants';