ngx-com 0.0.21 → 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-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 };