@sonny-ui/core 0.1.0-alpha.11 → 0.1.0-alpha.13

package/fesm2022/sonny-ui-core.mjs

@@ -3,7 +3,7 @@ import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 export { cva } from 'class-variance-authority';
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, PLATFORM_ID, signal, computed, Injectable, input, Directive, ChangeDetectionStrategy, Component, ElementRef, model, viewChild, effect, forwardRef, HostListener, Injector, afterNextRender, Renderer2, output, contentChildren } from '@angular/core';
+import { inject, PLATFORM_ID, signal, computed, Injectable, InjectionToken, makeEnvironmentProviders, provideEnvironmentInitializer, input, Directive, ChangeDetectionStrategy, Component, ElementRef, model, viewChild, forwardRef, HostListener, Injector, afterNextRender, effect, Renderer2, output, contentChildren } from '@angular/core';
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { Dialog, DialogRef } from '@angular/cdk/dialog';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -13,27 +13,22 @@ function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
 
-const DEFAULT_CONFIG = { prefix: 'sny', defaultTheme: 'light' };
-const SNY_CONFIG = new InjectionToken('SNY_CONFIG', {
-    providedIn: 'root',
-    factory: () => DEFAULT_CONFIG,
-});
-function provideSonnyUI(config = {}) {
-    return makeEnvironmentProviders([
-        { provide: SNY_CONFIG, useValue: { ...DEFAULT_CONFIG, ...config } },
-    ]);
-}
-
+const STORAGE_KEY = 'sny-theme';
 class ThemeService {
     document = inject(DOCUMENT);
     isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    config = inject(SNY_CONFIG);
     _theme = signal('light', ...(ngDevMode ? [{ debugName: "_theme" }] : /* istanbul ignore next */ []));
     theme = this._theme.asReadonly();
     isDark = computed(() => this._theme() === 'dark', ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.setTheme(this.resolveInitialTheme());
+    }
     setTheme(theme) {
         this._theme.set(theme);
         if (!this.isBrowser)
             return;
+        localStorage.setItem(STORAGE_KEY, theme);
         const root = this.document.documentElement;
         root.classList.remove('dark');
         root.removeAttribute('data-theme');
@@ -48,13 +43,40 @@ class ThemeService {
     toggleDark() {
         this.setTheme(this._theme() === 'dark' ? 'light' : 'dark');
     }
+    resolveInitialTheme() {
+        if (this.isBrowser) {
+            const stored = localStorage.getItem(STORAGE_KEY);
+            if (stored)
+                return stored;
+        }
+        const defaultTheme = this.config.defaultTheme ?? 'light';
+        if (defaultTheme === 'system') {
+            if (this.isBrowser && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                return 'dark';
+            }
+            return 'light';
+        }
+        return defaultTheme;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ThemeService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ThemeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }] });
+        }], ctorParameters: () => [] });
+
+const DEFAULT_CONFIG = { prefix: 'sny', defaultTheme: 'light' };
+const SNY_CONFIG = new InjectionToken('SNY_CONFIG', {
+    providedIn: 'root',
+    factory: () => DEFAULT_CONFIG,
+});
+function provideSonnyUI(config = {}) {
+    return makeEnvironmentProviders([
+        { provide: SNY_CONFIG, useValue: { ...DEFAULT_CONFIG, ...config } },
+        provideEnvironmentInitializer(() => inject(ThemeService)),
+    ]);
+}
 
 const buttonVariants = cva('inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', {
     variants: {
@@ -85,7 +107,7 @@ class SnyButtonDirective {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    computedClass = computed(() => cn(buttonVariants({ variant: this.variant(), size: this.size() }), this.loading() && 'relative cursor-wait', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn(buttonVariants({ variant: this.variant(), size: this.size() }), this.loading() && 'cursor-wait opacity-70', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyButtonDirective, isStandalone: true, selector: "button[snyBtn], a[snyBtn]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()", "attr.aria-disabled": "disabled() || loading() || null", "attr.disabled": "disabled() || loading() || null", "attr.tabindex": "(disabled() || loading()) ? -1 : null" } }, ngImport: i0 });
 }
@@ -1057,19 +1079,7 @@ class SnyComboboxComponent {
     resizeHandler = null;
     _onChange = () => { };
     onTouched = () => { };
-    _writing = false;
-    constructor() {
-        effect(() => {
-            const val = this.value();
-            if (this._writing) {
-                this._writing = false;
-                return;
-            }
-            this._onChange(val);
-        });
-    }
     writeValue(val) {
-        this._writing = true;
         this.value.set(val ?? '');
     }
     registerOnChange(fn) {
@@ -1164,6 +1174,7 @@ class SnyComboboxComponent {
     }
     select(opt) {
         this.value.set(opt.value);
+        this._onChange(opt.value);
         this.close();
     }
     onKeydown(event) {
@@ -1236,7 +1247,7 @@ class SnyComboboxComponent {
 
         <!-- Options list -->
         @if (filtered().length > 0) {
-          <ul role="listbox" class="max-h-60 overflow-auto p-1">
+          <ul role="listbox" class="max-h-60 overflow-auto p-1 sny-scrollbar">
             @for (opt of filtered(); track opt.value; let i = $index) {
               <li
                 role="option"
@@ -1314,7 +1325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
 
         <!-- Options list -->
         @if (filtered().length > 0) {
-          <ul role="listbox" class="max-h-60 overflow-auto p-1">
+          <ul role="listbox" class="max-h-60 overflow-auto p-1 sny-scrollbar">
             @for (opt of filtered(); track opt.value; let i = $index) {
               <li
                 role="option"
@@ -1340,7 +1351,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
     }
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], searchRef: [{ type: i0.ViewChild, args: ['searchEl', { isSignal: true }] }], dropdownRef: [{ type: i0.ViewChild, args: ['dropdownEl', { isSignal: true }] }], onDocumentClick: [{
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], searchRef: [{ type: i0.ViewChild, args: ['searchEl', { isSignal: true }] }], dropdownRef: [{ type: i0.ViewChild, args: ['dropdownEl', { isSignal: true }] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });
@@ -1447,19 +1458,7 @@ class SnySwitchComponent {
     isDisabled = computed(() => this.disabled() || this._disabledByCva(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     _onChange = () => { };
     onTouched = () => { };
-    _writing = false;
-    constructor() {
-        effect(() => {
-            const val = this.checked();
-            if (this._writing) {
-                this._writing = false;
-                return;
-            }
-            this._onChange(val);
-        });
-    }
     writeValue(val) {
-        this._writing = true;
         this.checked.set(val ?? false);
     }
     registerOnChange(fn) {
@@ -1471,6 +1470,11 @@ class SnySwitchComponent {
     setDisabledState(isDisabled) {
         this._disabledByCva.set(isDisabled);
     }
+    toggle() {
+        const newVal = !this.checked();
+        this.checked.set(newVal);
+        this._onChange(newVal);
+    }
     trackClass = computed(() => cn(switchTrackVariants({ size: this.size() }), this.checked() ? 'bg-primary' : 'bg-input', this.class()), ...(ngDevMode ? [{ debugName: "trackClass" }] : /* istanbul ignore next */ []));
     thumbClass = computed(() => cn('pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform', switchThumbSize[this.size()], this.checked() ? switchThumbTranslate[this.size()] : 'translate-x-0'), ...(ngDevMode ? [{ debugName: "thumbClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -1483,7 +1487,7 @@ class SnySwitchComponent {
       [attr.aria-checked]="checked()"
       [disabled]="isDisabled()"
       [class]="trackClass()"
-      (click)="checked.set(!checked())"
+      (click)="toggle()"
       (blur)="onTouched()"
     >
       <span [class]="thumbClass()"></span>
@@ -1507,14 +1511,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
       [attr.aria-checked]="checked()"
       [disabled]="isDisabled()"
       [class]="trackClass()"
-      (click)="checked.set(!checked())"
+      (click)="toggle()"
       (blur)="onTouched()"
     >
       <span [class]="thumbClass()"></span>
     </button>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 const toggleVariants = cva('inline-flex items-center justify-center rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', {
     variants: {
@@ -1543,19 +1547,7 @@ class SnyToggleDirective {
     isDisabled = computed(() => this._disabledByCva(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     _onChange = () => { };
     onTouched = () => { };
-    _writing = false;
-    constructor() {
-        effect(() => {
-            const val = this.pressed();
-            if (this._writing) {
-                this._writing = false;
-                return;
-            }
-            this._onChange(val);
-        });
-    }
     writeValue(val) {
-        this._writing = true;
         this.pressed.set(val ?? false);
     }
     registerOnChange(fn) {
@@ -1570,7 +1562,9 @@ class SnyToggleDirective {
     toggle() {
         if (this.isDisabled())
             return;
-        this.pressed.set(!this.pressed());
+        const newVal = !this.pressed();
+        this.pressed.set(newVal);
+        this._onChange(newVal);
     }
     computedClass = computed(() => cn(toggleVariants({ variant: this.variant(), size: this.size() }), this.pressed() ? 'bg-accent text-accent-foreground' : '', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -1594,7 +1588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         '(blur)': 'onTouched()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }, { type: i0.Output, args: ["pressedChange"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }, { type: i0.Output, args: ["pressedChange"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 const sliderTrackVariants = cva('relative w-full rounded-full bg-secondary cursor-pointer', {
     variants: {
@@ -1629,19 +1623,7 @@ class SnySliderComponent {
     upHandler = null;
     _onChange = () => { };
     onTouched = () => { };
-    _writing = false;
-    constructor() {
-        effect(() => {
-            const val = this.value();
-            if (this._writing) {
-                this._writing = false;
-                return;
-            }
-            this._onChange(val);
-        });
-    }
     writeValue(val) {
-        this._writing = true;
         this.value.set(val ?? 0);
     }
     registerOnChange(fn) {
@@ -1671,7 +1653,9 @@ class SnySliderComponent {
         const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
         const raw = this.min() + percent * (this.max() - this.min());
         const stepped = Math.round(raw / this.step()) * this.step();
-        this.value.set(Math.max(this.min(), Math.min(this.max(), stepped)));
+        const clamped = Math.max(this.min(), Math.min(this.max(), stepped));
+        this.value.set(clamped);
+        this._onChange(clamped);
     }
     onTrackMousedown(event) {
         if (this.isDisabled())
@@ -1708,26 +1692,31 @@ class SnySliderComponent {
         if (this.isDisabled())
             return;
         const step = this.step();
+        let newVal;
         switch (event.key) {
             case 'ArrowRight':
             case 'ArrowUp':
                 event.preventDefault();
-                this.value.set(Math.min(this.max(), this.value() + step));
+                newVal = Math.min(this.max(), this.value() + step);
                 break;
             case 'ArrowLeft':
             case 'ArrowDown':
                 event.preventDefault();
-                this.value.set(Math.max(this.min(), this.value() - step));
+                newVal = Math.max(this.min(), this.value() - step);
                 break;
             case 'Home':
                 event.preventDefault();
-                this.value.set(this.min());
+                newVal = this.min();
                 break;
             case 'End':
                 event.preventDefault();
-                this.value.set(this.max());
+                newVal = this.max();
                 break;
         }
+        if (newVal !== undefined) {
+            this.value.set(newVal);
+            this._onChange(newVal);
+        }
     }
     removeListeners() {
         if (this.moveHandler) {
@@ -1806,7 +1795,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
     </div>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], trackRef: [{ type: i0.ViewChild, args: ['trackEl', { isSignal: true }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], trackRef: [{ type: i0.ViewChild, args: ['trackEl', { isSignal: true }] }] } });
 
 const loaderVariants = cva('inline-flex items-center justify-center text-current', {
     variants: {
@@ -2052,19 +2041,7 @@ class SnySelectComponent {
     resizeHandler = null;
     _onChange = () => { };
     onTouched = () => { };
-    _writing = false;
-    constructor() {
-        effect(() => {
-            const val = this.value();
-            if (this._writing) {
-                this._writing = false;
-                return;
-            }
-            this._onChange(val);
-        });
-    }
     writeValue(val) {
-        this._writing = true;
         this.value.set(val ?? '');
     }
     registerOnChange(fn) {
@@ -2142,6 +2119,7 @@ class SnySelectComponent {
     }
     select(opt) {
         this.value.set(opt.value);
+        this._onChange(opt.value);
         this.close();
     }
     onTriggerKeydown(event) {
@@ -2206,7 +2184,7 @@ class SnySelectComponent {
         #dropdownEl
         class="fixed z-50 rounded-sm border border-border bg-popover text-popover-foreground shadow-md"
       >
-        <ul role="listbox" class="max-h-60 overflow-auto p-1">
+        <ul role="listbox" class="max-h-60 overflow-auto p-1 sny-scrollbar">
           @for (opt of options(); track opt.value; let i = $index) {
             <li
               role="option"
@@ -2264,7 +2242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         #dropdownEl
         class="fixed z-50 rounded-sm border border-border bg-popover text-popover-foreground shadow-md"
       >
-        <ul role="listbox" class="max-h-60 overflow-auto p-1">
+        <ul role="listbox" class="max-h-60 overflow-auto p-1 sny-scrollbar">
           @for (opt of options(); track opt.value; let i = $index) {
             <li
               role="option"
@@ -2286,7 +2264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
     }
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], dropdownRef: [{ type: i0.ViewChild, args: ['dropdownEl', { isSignal: true }] }], onDocumentClick: [{
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], dropdownRef: [{ type: i0.ViewChild, args: ['dropdownEl', { isSignal: true }] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });
@@ -3175,19 +3153,7 @@ class SnyFileInputComponent {
     isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : /* istanbul ignore next */ []));
     _onChange = () => { };
     onTouched = () => { };
-    _writing = false;
-    constructor() {
-        effect(() => {
-            const val = this.value();
-            if (this._writing) {
-                this._writing = false;
-                return;
-            }
-            this._onChange(val);
-        });
-    }
     writeValue(val) {
-        this._writing = true;
         this.value.set(val ?? null);
     }
     registerOnChange(fn) {
@@ -3233,6 +3199,7 @@ class SnyFileInputComponent {
     }
     clear() {
         this.value.set(null);
+        this._onChange(null);
         const inputEl = this.fileInputRef()?.nativeElement;
         if (inputEl)
             inputEl.value = '';
@@ -3248,6 +3215,7 @@ class SnyFileInputComponent {
             }
         }
         this.value.set(files);
+        this._onChange(files);
         this.fileChange.emit(files);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -3311,7 +3279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
     </label>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], fileChange: [{ type: i0.Output, args: ["fileChange"] }], error: [{ type: i0.Output, args: ["error"] }], fileInputRef: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
+        }], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], fileChange: [{ type: i0.Output, args: ["fileChange"] }], error: [{ type: i0.Output, args: ["error"] }], fileInputRef: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
 
 const fieldsetVariants = cva('space-y-4', {
     variants: {
@@ -3404,19 +3372,7 @@ class SnyRatingComponent {
     hoverValue = signal(null, ...(ngDevMode ? [{ debugName: "hoverValue" }] : /* istanbul ignore next */ []));
     _onChange = () => { };
     onTouched = () => { };
-    _writing = false;
-    constructor() {
-        effect(() => {
-            const val = this.value();
-            if (this._writing) {
-                this._writing = false;
-                return;
-            }
-            this._onChange(val);
-        });
-    }
     writeValue(val) {
-        this._writing = true;
         this.value.set(val ?? 0);
     }
     registerOnChange(fn) {
@@ -3462,6 +3418,7 @@ class SnyRatingComponent {
         if (this.isDisabled())
             return;
         this.value.set(index);
+        this._onChange(index);
     }
     onStarHover(index) {
         if (this.isDisabled())
@@ -3475,26 +3432,31 @@ class SnyRatingComponent {
         if (this.isDisabled())
             return;
         const step = this.half() ? 0.5 : 1;
+        let newVal;
         switch (event.key) {
             case 'ArrowRight':
             case 'ArrowUp':
                 event.preventDefault();
-                this.value.update((v) => Math.min(this.max(), v + step));
+                newVal = Math.min(this.max(), this.value() + step);
                 break;
             case 'ArrowLeft':
             case 'ArrowDown':
                 event.preventDefault();
-                this.value.update((v) => Math.max(0, v - step));
+                newVal = Math.max(0, this.value() - step);
                 break;
             case 'Home':
                 event.preventDefault();
-                this.value.set(0);
+                newVal = 0;
                 break;
             case 'End':
                 event.preventDefault();
-                this.value.set(this.max());
+                newVal = this.max();
                 break;
         }
+        if (newVal !== undefined) {
+            this.value.set(newVal);
+            this._onChange(newVal);
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyRatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnyRatingComponent, isStandalone: true, selector: "sny-rating", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ratingVariant: { classPropertyName: "ratingVariant", publicName: "ratingVariant", isSignal: true, isRequired: false, transformFunction: null }, half: { classPropertyName: "half", publicName: "half", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "slider", "tabindex": "0" }, listeners: { "keydown": "onKeydown($event)", "mouseleave": "onMouseLeave()", "blur": "onTouched()" }, properties: { "attr.aria-valuenow": "value()", "attr.aria-valuemin": "0", "attr.aria-valuemax": "max()", "attr.aria-label": "\"Rating\"", "attr.aria-readonly": "readonly() || null", "class": "computedClass()" } }, providers: [
@@ -3557,7 +3519,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
     }
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ratingVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratingVariant", required: false }] }], half: [{ type: i0.Input, args: [{ isSignal: true, alias: "half", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ratingVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratingVariant", required: false }] }], half: [{ type: i0.Input, args: [{ isSignal: true, alias: "half", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class SnyNavbarDirective {
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -5082,19 +5044,7 @@ class SnyCalendarComponent {
     weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
     _onChange = () => { };
     onTouched = () => { };
-    _writing = false;
-    constructor() {
-        effect(() => {
-            const val = this.value();
-            if (this._writing) {
-                this._writing = false;
-                return;
-            }
-            this._onChange(val);
-        });
-    }
     writeValue(val) {
-        this._writing = true;
         this.value.set(val ?? null);
         if (val) {
             this.viewDate.set(new Date(val.getFullYear(), val.getMonth(), 1));
@@ -5152,6 +5102,7 @@ class SnyCalendarComponent {
     }
     selectDate(date) {
         this.value.set(date);
+        this._onChange(date);
         this.onTouched();
     }
     onKeydown(event) {
@@ -5183,6 +5134,7 @@ class SnyCalendarComponent {
         const next = new Date(current);
         next.setDate(next.getDate() + offset);
         this.value.set(next);
+        this._onChange(next);
         this.viewDate.set(new Date(next.getFullYear(), next.getMonth(), 1));
     }
     createDay(date, isCurrentMonth, today, selected, minDate, maxDate) {
@@ -5289,7 +5241,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
     </div>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class SnyValidatorDirective {
     control = input(null, ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));