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

package/src/lib/fieldset/fieldset.directives.ts

@@ -4,7 +4,6 @@ import { fieldsetVariants, type FieldsetVariant } from './fieldset.variants';
 
 @Directive({
   selector: 'fieldset[snyFieldset]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     '[attr.disabled]': 'disabled() || null',
@@ -23,7 +22,6 @@ export class SnyFieldsetDirective {
 
 @Directive({
   selector: 'legend[snyFieldsetLegend]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
   },
@@ -38,7 +36,6 @@ export class SnyFieldsetLegendDirective {
 
 @Directive({
   selector: '[snyFieldsetContent]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
   },

package/src/lib/file-input/file-input.component.ts

@@ -20,7 +20,6 @@ import {
 
 @Component({
   selector: 'sny-file-input',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     '[class]': '"w-full"',

package/src/lib/indicator/indicator.directives.ts

@@ -26,7 +26,6 @@ const variantMap: Record<IndicatorVariant, string> = {
 
 @Directive({
   selector: '[snyIndicator]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyIndicatorDirective {
@@ -38,7 +37,6 @@ export class SnyIndicatorDirective {
 
 @Directive({
   selector: '[snyIndicatorBadge]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     '[attr.aria-label]': 'ariaLabel() || null',

package/src/lib/input/input.directive.ts

@@ -4,7 +4,6 @@ import { inputVariants, type InputVariant, type InputSize } from './input.varian
 
 @Directive({
   selector: 'input[snyInput], textarea[snyInput]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     '[attr.aria-invalid]': 'variant() === "error" || null',

package/src/lib/input/label.directive.ts

@@ -4,7 +4,6 @@ import { labelVariants, type InputVariant } from './input.variants';
 
 @Directive({
   selector: 'label[snyLabel]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyLabelDirective {

package/src/lib/kbd/kbd.directive.ts

@@ -4,7 +4,6 @@ import { kbdVariants, type KbdSize } from './kbd.variants';
 
 @Directive({
   selector: 'kbd[snyKbd]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
   },

package/src/lib/link/link.directive.ts

@@ -4,7 +4,6 @@ import { linkVariants, type LinkVariant } from './link.variants';
 
 @Directive({
   selector: 'a[snyLink]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
   },

package/src/lib/list/list.directives.ts

@@ -5,7 +5,6 @@ export type ListVariant = 'default' | 'bordered' | 'hover';
 
 @Directive({
   selector: '[snyList]',
-  standalone: true,
   host: {
     'role': 'list',
     '[class]': 'computedClass()',
@@ -27,7 +26,6 @@ export class SnyListDirective {
 
 @Directive({
   selector: '[snyListItem]',
-  standalone: true,
   host: {
     'role': 'listitem',
     '[class]': 'computedClass()',
@@ -51,7 +49,6 @@ export class SnyListItemDirective {
 
 @Directive({
   selector: '[snyListItemIcon]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyListItemIconDirective {
@@ -63,7 +60,6 @@ export class SnyListItemIconDirective {
 
 @Directive({
   selector: '[snyListItemContent]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyListItemContentDirective {
@@ -75,7 +71,6 @@ export class SnyListItemContentDirective {
 
 @Directive({
   selector: '[snyListItemAction]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyListItemActionDirective {

package/src/lib/loader/loader.component.ts

@@ -4,7 +4,6 @@ import { loaderVariants, type LoaderSize, type LoaderVariant } from './loader.va
 
 @Component({
   selector: 'sny-loader',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     '[class]': 'computedClass()',

package/src/lib/modal/dialog.directives.ts

@@ -4,7 +4,6 @@ import { cn } from '../core/utils/cn';
 
 @Directive({
   selector: '[snyDialogHeader]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyDialogHeaderDirective {
@@ -16,7 +15,6 @@ export class SnyDialogHeaderDirective {
 
 @Directive({
   selector: '[snyDialogTitle]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyDialogTitleDirective {
@@ -28,7 +26,6 @@ export class SnyDialogTitleDirective {
 
 @Directive({
   selector: '[snyDialogDescription]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyDialogDescriptionDirective {
@@ -40,7 +37,6 @@ export class SnyDialogDescriptionDirective {
 
 @Directive({
   selector: '[snyDialogContent]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyDialogContentDirective {
@@ -55,7 +51,6 @@ export class SnyDialogContentDirective {
 
 @Directive({
   selector: '[snyDialogFooter]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyDialogFooterDirective {
@@ -67,7 +62,6 @@ export class SnyDialogFooterDirective {
 
 @Directive({
   selector: '[snyDialogClose]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     '(click)': 'onClick()',

package/src/lib/navbar/navbar.directives.ts

@@ -5,7 +5,6 @@ export type NavbarVariant = 'default' | 'bordered' | 'floating';
 
 @Directive({
   selector: '[snyNavbar]',
-  standalone: true,
   host: {
     'role': 'navigation',
     '[attr.aria-label]': 'ariaLabel()',
@@ -32,7 +31,6 @@ export class SnyNavbarDirective {
 
 @Directive({
   selector: '[snyNavbarBrand]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyNavbarBrandDirective {
@@ -42,7 +40,6 @@ export class SnyNavbarBrandDirective {
 
 @Directive({
   selector: '[snyNavbarContent]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyNavbarContentDirective {
@@ -52,7 +49,6 @@ export class SnyNavbarContentDirective {
 
 @Directive({
   selector: '[snyNavbarEnd]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyNavbarEndDirective {

package/src/lib/number-input/number-input.component.ts

@@ -15,7 +15,6 @@ import { numberInputVariants, type NumberInputSize } from './number-input.varian
 
 @Component({
   selector: 'sny-number-input',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyNumberInputComponent), multi: true },

package/src/lib/otp-input/otp-input.component.ts

@@ -20,7 +20,6 @@ import { otpCellVariants, type OtpInputSize, type OtpInputType } from './otp-inp
 
 @Component({
   selector: 'sny-otp-input',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyOtpInputComponent), multi: true },

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/popover.directives.ts

@@ -1,7 +1,6 @@
 import {
   Directive,
   ElementRef,
-  HostListener,
   InjectionToken,
   OnDestroy,
   computed,
@@ -15,11 +14,12 @@ export const SNY_POPOVER = new InjectionToken<SnyPopoverDirective>('SnyPopover')
 
 @Directive({
   selector: '[snyPopover]',
-  standalone: true,
   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 {
@@ -91,14 +91,12 @@ export class SnyPopoverDirective implements OnDestroy {
     }
   }
 
-  @HostListener('document:click', ['$event'])
   onDocumentClick(event: MouseEvent): void {
     if (this.closeOnOutside() && this.isOpen() && !this.elRef.nativeElement.contains(event.target)) {
       this.close();
     }
   }
 
-  @HostListener('keydown.escape')
   onEscape(): void {
     if (this.closeOnEscape() && this.isOpen()) {
       this.close();
@@ -112,7 +110,6 @@ export class SnyPopoverDirective implements OnDestroy {
 
 @Directive({
   selector: '[snyPopoverTrigger]',
-  standalone: true,
   host: {
     '(click)': 'popover.toggle()',
     '[attr.aria-expanded]': 'popover.isOpen()',
@@ -130,7 +127,6 @@ export class SnyPopoverTriggerDirective {
 
 @Directive({
   selector: '[snyPopoverContent]',
-  standalone: true,
   host: {
     'role': 'dialog',
     '[style.display]': 'popover.isOpen() ? "" : "none"',

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/tag-input.component.ts

@@ -16,7 +16,6 @@ import { tagInputContainerVariants, tagVariants, type TagInputSize } from './tag
 
 @Component({
   selector: 'sny-tag-input',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyTagInputComponent), multi: true },

package/src/lib/textarea/textarea.directive.ts

@@ -17,7 +17,6 @@ import {
 
 @Directive({
   selector: 'textarea[snyTextarea]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     '[attr.aria-invalid]': 'variant() === "error" || null',

package/src/lib/timeline/timeline.directives.ts

@@ -8,7 +8,6 @@ export type TimelineMiddleVariant = 'default' | 'primary' | 'success' | 'error';
 
 @Directive({
   selector: '[snyTimelineItem]',
-  standalone: true,
   host: { 'role': 'listitem', '[class]': 'computedClass()' },
 })
 export class SnyTimelineItemDirective {
@@ -21,7 +20,6 @@ export class SnyTimelineItemDirective {
 
 @Directive({
   selector: '[snyTimelineStart]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyTimelineStartDirective {
@@ -33,7 +31,6 @@ export class SnyTimelineStartDirective {
 
 @Directive({
   selector: '[snyTimelineMiddle]',
-  standalone: true,
   host: { '[class]': 'computedClass()', 'aria-hidden': 'true' },
 })
 export class SnyTimelineMiddleDirective {
@@ -52,7 +49,6 @@ export class SnyTimelineMiddleDirective {
 
 @Directive({
   selector: '[snyTimelineEnd]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyTimelineEndDirective {
@@ -64,7 +60,6 @@ export class SnyTimelineEndDirective {
 
 @Directive({
   selector: '[snyTimeline]',
-  standalone: true,
   exportAs: 'snyTimeline',
   providers: [{ provide: SNY_TIMELINE, useExisting: SnyTimelineDirective }],
   host: {

package/src/lib/toast/toaster.component.ts

@@ -5,7 +5,6 @@ import { cn } from '../core/utils/cn';
 
 @Component({
   selector: 'sny-toaster',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div [class]="containerClass()" role="region" aria-label="Notifications" tabindex="-1">

package/src/lib/toggle/toggle.directive.ts

@@ -5,7 +5,6 @@ import { toggleVariants, type ToggleVariant, type ToggleSize } from './toggle.va
 
 @Directive({
   selector: 'button[snyToggle]',
-  standalone: true,
   providers: [
     { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyToggleDirective), multi: true },
   ],

package/src/lib/tooltip/tooltip.directive.ts

@@ -16,7 +16,6 @@ let tooltipIdCounter = 0;
 
 @Directive({
   selector: '[snyTooltip]',
-  standalone: true,
   exportAs: 'snyTooltip',
   host: {
     '(mouseenter)': 'show()',