ngx-com 0.0.20 → 0.0.22

package/types/ngx-com-components-native-control.d.ts

@@ -0,0 +1,99 @@
+import * as i0 from '@angular/core';
+import { DoCheck, InputSignal, InputSignalWithTransform, Signal } from '@angular/core';
+import { NgControl } from '@angular/forms';
+import { ErrorStateMatcher } from 'ngx-com/components/form-field';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Size type for native control.
+ */
+type NativeControlSize = 'sm' | 'default' | 'lg';
+/**
+ * Visual variant for native control.
+ */
+type NativeControlVariant = 'outline' | 'filled' | 'ghost';
+/**
+ * CVA variants for the native control directive.
+ *
+ * @tokens `--color-input-border`, `--color-input-background`, `--color-input-foreground`,
+ *         `--color-input-placeholder`, `--color-disabled`, `--color-disabled-foreground`,
+ *         `--color-ring`, `--color-warn`, `--color-muted`, `--color-border`,
+ *         `--radius-input`
+ */
+declare const nativeControlVariants: (props?: {
+    variant?: NativeControlVariant;
+    size?: NativeControlSize;
+    error?: boolean;
+}) => string;
+type NativeControlVariants = VariantProps<typeof nativeControlVariants>;
+
+/**
+ * Standalone styling directive for native `<input>`, `<select>`, and `<textarea>` elements.
+ *
+ * Applies consistent borders, background, text color, focus outline, disabled state,
+ * error state, and size scaling via CVA. Integrates with both Reactive Forms (via NgControl)
+ * and Signal Forms (via `invalid`/`touched` inputs set by `[formField]`).
+ *
+ * For full form integration (label, hint, error), use `com-form-field` + `comInput`.
+ *
+ * @tokens `--color-input-border`, `--color-input-background`, `--color-input-foreground`,
+ *         `--color-input-placeholder`, `--color-disabled`, `--color-disabled-foreground`,
+ *         `--color-ring`, `--color-warn`, `--color-muted`, `--color-border`,
+ *         `--radius-input`
+ *
+ * @example Basic usage
+ * ```html
+ * <input comNativeControl placeholder="Enter your name" />
+ * ```
+ *
+ * @example Variants
+ * ```html
+ * <input comNativeControl variant="outline" placeholder="Outline (default)" />
+ * <input comNativeControl variant="filled" placeholder="Filled" />
+ * <input comNativeControl variant="ghost" placeholder="Ghost" />
+ * ```
+ *
+ * @example Reactive Forms
+ * ```html
+ * <input comNativeControl [formControl]="nameCtrl" />
+ * ```
+ *
+ * @example Signal Forms
+ * ```html
+ * <input comNativeControl [formField]="myForm.name" />
+ * ```
+ */
+declare class ComNativeControl implements DoCheck {
+    private readonly defaultErrorStateMatcher;
+    private readonly parentForm;
+    private readonly parentFormGroup;
+    /** NgControl bound to this element (if using reactive forms). */
+    readonly ngControl: NgControl | null;
+    /** Whether the form system is Signal Forms (no NgControl present). */
+    private readonly isSignalForms;
+    /** Visual variant — outline (bordered), filled (bg fill), or ghost (transparent) */
+    readonly variant: InputSignal<NativeControlVariant>;
+    /** Control size — affects height, padding, and font size */
+    readonly size: InputSignal<NativeControlSize>;
+    /** Consumer CSS classes — merged with variant classes via mergeClasses() */
+    readonly userClass: InputSignal<string>;
+    /** Custom error state matcher (overrides the default). */
+    readonly errorStateMatcher: InputSignal<ErrorStateMatcher | undefined>;
+    readonly sfInvalid: InputSignalWithTransform<boolean, unknown>;
+    readonly sfTouched: InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Reactive Forms error state — imperatively updated in DoCheck because
+     * NgControl properties (touched, invalid) are not signals.
+     */
+    private readonly _reactiveErrorState;
+    /** Whether the control is in an error state. */
+    readonly errorState: Signal<boolean>;
+    /** @internal Computed host class from CVA + consumer overrides */
+    protected readonly computedClass: Signal<string>;
+    ngDoCheck(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComNativeControl, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComNativeControl, "input[comNativeControl], select[comNativeControl], textarea[comNativeControl]", ["comNativeControl"], { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "sfInvalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "sfTouched": { "alias": "touched"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { ComNativeControl, nativeControlVariants };
+export type { NativeControlSize, NativeControlVariant, NativeControlVariants };

package/types/ngx-com-components-radio.d.ts

@@ -130,8 +130,10 @@ declare class ComRadioGroup implements ControlValueAccessor {
     readonly variant: InputSignal<RadioVariant>;
     readonly errorMessage: InputSignal<string>;
     readonly errorStateMatcher: InputSignal<ErrorStateMatcher | undefined>;
-    /** Internal signal to track when control is touched, used to trigger error state re-evaluation. */
-    private readonly _touched;
+    /** Tracks touched state — writable by both CVA callback and Signal Forms [formField]. */
+    readonly touched: ModelSignal<boolean>;
+    readonly invalid: InputSignal<boolean>;
+    readonly sfErrors: InputSignal<readonly unknown[]>;
     readonly ariaLabel: InputSignal<string | null>;
     readonly ariaLabelledby: InputSignal<string | null>;
     readonly ariaDescribedby: InputSignal<string | null>;
@@ -169,7 +171,7 @@ declare class ComRadioGroup implements ControlValueAccessor {
     /** Focuses the previous non-disabled radio (with cyclic wrap). */
     focusPrevious(currentValue: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComRadioGroup, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ComRadioGroup, "com-radio-group", ["comRadioGroup"], { "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "selectionChange": "selectionChange"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComRadioGroup, "com-radio-group", ["comRadioGroup"], { "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "sfErrors": { "alias": "errors"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "touched": "touchedChange"; "selectionChange": "selectionChange"; }, never, ["*"], true, never>;
 }
 
 /** Event emitted when a radio is selected. */

package/types/ngx-com-components-separator.d.ts

@@ -0,0 +1,75 @@
+import * as i0 from '@angular/core';
+import { InputSignal, InputSignalWithTransform, Signal } from '@angular/core';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Orientation type for separator direction.
+ */
+type SeparatorOrientation = 'horizontal' | 'vertical';
+/**
+ * Variant type for separator appearance.
+ */
+type SeparatorVariant = 'default' | 'subtle';
+/**
+ * CVA variants for the separator directive.
+ *
+ * @tokens `--color-border`, `--color-border-subtle`
+ */
+declare const separatorVariants: (props?: {
+    orientation?: SeparatorOrientation;
+    variant?: SeparatorVariant;
+}) => string;
+type SeparatorVariants = VariantProps<typeof separatorVariants>;
+
+/**
+ * Separator directive — applies a visual divider to any host element.
+ *
+ * Works on `<hr>`, `<div>`, or any other element. Supports horizontal and
+ * vertical orientations, a subtle color variant, and a decorative mode that
+ * hides the separator from assistive technology.
+ *
+ * @tokens `--color-border`, `--color-border-subtle`
+ *
+ * @example Horizontal divider
+ * ```html
+ * <hr comSeparator />
+ * ```
+ *
+ * @example Vertical divider
+ * ```html
+ * <div comSeparator orientation="vertical" class="h-6"></div>
+ * ```
+ *
+ * @example Subtle variant
+ * ```html
+ * <hr comSeparator variant="subtle" />
+ * ```
+ *
+ * @example Decorative (hidden from screen readers)
+ * ```html
+ * <hr comSeparator decorative />
+ * ```
+ */
+declare class ComSeparator {
+    /** Direction of the separator line */
+    readonly orientation: InputSignal<SeparatorOrientation>;
+    /** Color intensity — `default` uses border-border, `subtle` uses border-border-subtle */
+    readonly variant: InputSignal<SeparatorVariant>;
+    /** When true, hides the separator from assistive technology */
+    readonly decorative: InputSignalWithTransform<boolean, unknown>;
+    /** Consumer CSS classes — merged with variant classes via mergeClasses() */
+    readonly userClass: InputSignal<string>;
+    /** @internal Computed host class from CVA + consumer overrides */
+    protected readonly computedClass: Signal<string>;
+    /** @internal Role attribute — separator when semantic, none when decorative */
+    protected readonly computedRole: Signal<string>;
+    /** @internal Aria-orientation — set only when not decorative */
+    protected readonly computedAriaOrientation: Signal<string | null>;
+    /** @internal Aria-hidden — true only when decorative */
+    protected readonly computedAriaHidden: Signal<'true' | null>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComSeparator, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComSeparator, "[comSeparator]", ["comSeparator"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "decorative": { "alias": "decorative"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { ComSeparator, separatorVariants };
+export type { SeparatorOrientation, SeparatorVariant, SeparatorVariants };

package/types/ngx-com-components-switch.d.ts

@@ -79,12 +79,16 @@ declare class ComSwitch implements ControlValueAccessor {
     readonly variant: InputSignal<SwitchVariant>;
     readonly checked: ModelSignal<boolean>;
     readonly disabled: ModelSignal<boolean>;
-    readonly value: InputSignal<string | undefined>;
+    readonly htmlValue: InputSignal<string | undefined>;
     readonly name: InputSignal<string | undefined>;
     readonly id: InputSignal<string | undefined>;
     readonly ariaLabel: InputSignal<string | null>;
     readonly ariaLabelledby: InputSignal<string | null>;
     readonly ariaDescribedby: InputSignal<string | null>;
+    readonly touched: ModelSignal<boolean>;
+    readonly invalid: InputSignal<boolean>;
+    readonly sfErrors: InputSignal<readonly unknown[]>;
+    readonly sfRequired: InputSignal<boolean>;
     readonly changed: OutputEmitterRef<SwitchChange>;
     readonly inputId: Signal<string>;
     protected readonly trackClasses: Signal<string>;
@@ -97,13 +101,14 @@ declare class ComSwitch implements ControlValueAccessor {
     registerOnChange(fn: (value: boolean) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
+    protected onBlur(): void;
     protected onInputChange(event: Event): void;
     /** Focuses this switch's input element. */
     focus(): void;
     /** Toggles the switch state programmatically. */
     toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComSwitch, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ComSwitch, "com-switch", ["comSwitch"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "disabled": "disabledChange"; "changed": "changed"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComSwitch, "com-switch", ["comSwitch"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "htmlValue": { "alias": "value"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "sfErrors": { "alias": "errors"; "required": false; "isSignal": true; }; "sfRequired": { "alias": "required"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "disabled": "disabledChange"; "touched": "touchedChange"; "changed": "changed"; }, never, ["*"], true, never>;
 }
 
 export { ComSwitch, SWITCH_LABEL_SIZES, SWITCH_THUMB_SIZES, SWITCH_THUMB_TRANSLATE, switchTrackVariants };