@styloviz/input-field 0.1.1

package/types/styloviz-input-field.d.ts

@@ -0,0 +1,341 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef, OnInit, OnDestroy } from '@angular/core';
+import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
+
+type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local' | 'time' | 'month' | 'week' | 'color';
+type InputSize = 'sm' | 'md' | 'lg';
+type InputVariant = 'default' | 'filled' | 'flushed';
+type InputState = 'default' | 'error' | 'success' | 'warning';
+type InputMode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+/**
+ * A single option for select / datalist suggestion.
+ */
+interface InputOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * InputField — A premium form input for dashboards.
+ *
+ * Features:
+ * - text, email, password, number, tel, url, date, time, color, …
+ * - Textarea mode (multiline) via `multiline` input
+ * - Select mode via `options` input
+ * - 3 visual variants: default (bordered) · filled · flushed (underline)
+ * - 3 sizes: sm · md · lg
+ * - 4 validation states: default · error · success · warning
+ * - Leading / trailing icon slots (SVG path)
+ * - Inline leading / trailing text addons (e.g. "https://", ".com")
+ * - Password show/hide toggle built-in
+ * - Character counter with optional max-length
+ * - Helper text and error message slots
+ * - Full ControlValueAccessor — works with `formControl`, `formControlName`, `ngModel`
+ * - Accessible: `<label>`, `aria-describedby`, `aria-invalid`, focus-visible ring
+ */
+declare class SvInputFieldComponent implements ControlValueAccessor, Validator {
+    /** Current value. Use `[(value)]` for signal two-way binding. */
+    value: _angular_core.ModelSignal<string>;
+    /** Input type. @default 'text' */
+    type: _angular_core.InputSignal<InputType>;
+    /** Renders a `<textarea>` instead of `<input>`. @default false */
+    multiline: _angular_core.InputSignal<boolean>;
+    /**
+     * When set, renders a `<select>` element.
+     * Use `type` is ignored when options are provided.
+     */
+    options: _angular_core.InputSignal<InputOption[]>;
+    /** Label text shown above the input. */
+    label: _angular_core.InputSignal<string>;
+    /** Marks the label with a red asterisk. @default false */
+    required: _angular_core.InputSignal<boolean>;
+    /** Optional label (replaces asterisk with a soft "(optional)" tag). @default false */
+    optionalTag: _angular_core.InputSignal<boolean>;
+    /** Placeholder text. */
+    placeholder: _angular_core.InputSignal<string>;
+    /** Helper text shown below the input (hidden when `errorMessage` is set). */
+    hint: _angular_core.InputSignal<string>;
+    /** Error message — switches state to `error` automatically when non-empty. */
+    errorMessage: _angular_core.InputSignal<string>;
+    /** Success message — shown below when state is `success`. */
+    successMessage: _angular_core.InputSignal<string>;
+    /** Visual style. @default 'default' */
+    variant: _angular_core.InputSignal<InputVariant>;
+    /** Size. @default 'md' */
+    size: _angular_core.InputSignal<InputSize>;
+    /**
+     * Explicit validation state override.
+     * Automatically set to `'error'` when `errorMessage` is non-empty.
+     * @default 'default'
+     */
+    state: _angular_core.InputSignal<InputState>;
+    /** SVG `<path d="...">` for the leading (left) icon. */
+    leadingIconPath: _angular_core.InputSignal<string>;
+    /** SVG `<path d="...">` for the trailing (right) icon. */
+    trailingIconPath: _angular_core.InputSignal<string>;
+    /**
+     * Short text prepended inside the input (e.g. `'https://'`, `'$'`).
+     * Ignored when `leadingIconPath` is set.
+     */
+    leadingAddon: _angular_core.InputSignal<string>;
+    /**
+     * Short text appended inside the input (e.g. `'.com'`, `'USD'`).
+     * Ignored when `trailingIconPath` is set.
+     */
+    trailingAddon: _angular_core.InputSignal<string>;
+    /**
+     * Maximum character count shown as a counter below the input.
+     * Set to 0 to disable. @default 0
+     */
+    maxLength: _angular_core.InputSignal<number>;
+    /** Disable the input. @default false */
+    disabled: _angular_core.InputSignal<boolean>;
+    /** Read-only mode. @default false */
+    readonly: _angular_core.InputSignal<boolean>;
+    /** Show a loading spinner in the trailing position. @default false */
+    loading: _angular_core.InputSignal<boolean>;
+    /** id forwarded to the native input — required for external `<label for>`. */
+    inputId: _angular_core.InputSignal<string>;
+    /** name attribute for the native input. */
+    inputName: _angular_core.InputSignal<string>;
+    /** Additional CSS classes on the root wrapper. */
+    customClass: _angular_core.InputSignal<string>;
+    /**
+     * `autocomplete` token (e.g. 'email', 'name', 'current-password', 'one-time-code').
+     * Defaults to 'current-password' for password type, otherwise the browser default.
+     */
+    autocomplete: _angular_core.InputSignal<string>;
+    /** Virtual-keyboard hint for mobile (e.g. 'numeric', 'email', 'tel'). */
+    inputMode: _angular_core.InputSignal<"" | InputMode>;
+    /** Native validation regex (without anchors — anchored automatically). */
+    pattern: _angular_core.InputSignal<string>;
+    /** Minimum length used by the built-in Validator and native `minlength`. @default 0 */
+    minLength: _angular_core.InputSignal<number>;
+    /** Native `min` for number/date/range types. */
+    min: _angular_core.InputSignal<string | number | null>;
+    /** Native `max` for number/date/range types. */
+    max: _angular_core.InputSignal<string | number | null>;
+    /** Native `step` for number/date/range types. */
+    step: _angular_core.InputSignal<string | number | null>;
+    /** Native spellcheck toggle. null = browser default. */
+    spellcheck: _angular_core.InputSignal<boolean | null>;
+    /** Autofocus the control on render. @default false */
+    autofocus: _angular_core.InputSignal<boolean>;
+    /** Emits when the input gains focus. */
+    focused: _angular_core.OutputEmitterRef<FocusEvent>;
+    /** Emits when the input loses focus. */
+    blurred: _angular_core.OutputEmitterRef<FocusEvent>;
+    /** Emits when Enter is pressed. */
+    submitted: _angular_core.OutputEmitterRef<string>;
+    readonly isFocused: _angular_core.WritableSignal<boolean>;
+    readonly showPassword: _angular_core.WritableSignal<boolean>;
+    readonly inputRef: _angular_core.Signal<ElementRef<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> | undefined>;
+    private _onChange;
+    private _onTouched;
+    /** Tracks disabled state set programmatically via formControl.disable(). */
+    private readonly _formDisabled;
+    /**
+     * Merged disabled state — true when either the [disabled] input or the
+     * parent FormControl is disabled. Use this everywhere instead of disabled().
+     */
+    readonly resolvedDisabled: _angular_core.Signal<boolean>;
+    writeValue(val: string): void;
+    registerOnChange(fn: (v: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    validate(_: AbstractControl): ValidationErrors | null;
+    onNativeChange(event: Event): void;
+    onFocus(e: FocusEvent): void;
+    onBlur(e: FocusEvent): void;
+    onKeydown(event: KeyboardEvent): void;
+    togglePassword(): void;
+    /** Stable unique fallback id so label + aria associations always work. */
+    private readonly _autoId;
+    /** Effective id used by the native control and its <label for>. */
+    readonly resolvedId: _angular_core.Signal<string>;
+    /** Id of the hint/error/success description element. */
+    readonly describedById: _angular_core.Signal<string>;
+    isSelect: _angular_core.Signal<boolean>;
+    isPassword: _angular_core.Signal<boolean>;
+    isColor: _angular_core.Signal<boolean>;
+    isFloating: _angular_core.Signal<boolean>;
+    labelIsFloated: _angular_core.Signal<boolean>;
+    resolvedType: _angular_core.Signal<string>;
+    resolvedState: _angular_core.Signal<InputState>;
+    charCount: _angular_core.Signal<number>;
+    showCounter: _angular_core.Signal<boolean>;
+    counterOver: _angular_core.Signal<boolean>;
+    showHint: _angular_core.Signal<boolean>;
+    showError: _angular_core.Signal<boolean>;
+    showSuccess: _angular_core.Signal<boolean>;
+    /** True when any below-field description (hint/error/success) is rendered. */
+    hasDescription: _angular_core.Signal<boolean>;
+    /** Resolved autocomplete token. Smart default for passwords, else explicit value. */
+    resolvedAutocomplete: _angular_core.Signal<string | null>;
+    hasLeading: _angular_core.Signal<boolean>;
+    hasTrailing: _angular_core.Signal<boolean>;
+    rootClasses: _angular_core.Signal<string>;
+    floatingLabelClasses: _angular_core.Signal<string>;
+    labelSizeClass: _angular_core.Signal<string>;
+    /** Outer track that wraps the native input + addons + icons. */
+    trackClasses: _angular_core.Signal<string>;
+    /** The native `<input>`, `<textarea>` or `<select>` element. */
+    nativeInputClasses: _angular_core.Signal<string>;
+    private sidepadding;
+    private vertPadding;
+    /** Vertical padding for multiline (textarea) — adds extra top space when floating. */
+    private multilineVertPadding;
+    private heightClass;
+    addonClasses: _angular_core.Signal<string>;
+    leadingAddonClasses: _angular_core.Signal<string>;
+    trailingAddonClasses: _angular_core.Signal<string>;
+    iconClass: _angular_core.Signal<string>;
+    iconPadClass: _angular_core.Signal<string>;
+    stateIconPath: _angular_core.Signal<string>;
+    stateIconColorClass: _angular_core.Signal<string>;
+    hintColorClass: _angular_core.Signal<string>;
+    focus(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SvInputFieldComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SvInputFieldComponent, "sv-input-field", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "multiline": { "alias": "multiline"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "optionalTag": { "alias": "optionalTag"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "successMessage": { "alias": "successMessage"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "leadingIconPath": { "alias": "leadingIconPath"; "required": false; "isSignal": true; }; "trailingIconPath": { "alias": "trailingIconPath"; "required": false; "isSignal": true; }; "leadingAddon": { "alias": "leadingAddon"; "required": false; "isSignal": true; }; "trailingAddon": { "alias": "trailingAddon"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "inputName": { "alias": "inputName"; "required": false; "isSignal": true; }; "customClass": { "alias": "customClass"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "inputMode": { "alias": "inputMode"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "spellcheck": { "alias": "spellcheck"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "focused": "focused"; "blurred": "blurred"; "submitted": "submitted"; }, never, never, true, never>;
+}
+
+/** A single cell in the calendar day grid. */
+interface CalendarDay {
+    readonly date: Date;
+    readonly label: number;
+    readonly isCurrentMonth: boolean;
+    readonly isToday: boolean;
+    readonly isSelected: boolean;
+    readonly isDisabled: boolean;
+    readonly key: string;
+}
+/**
+ * SvDatePickerComponent — premium custom calendar date picker.
+ *
+ * The popover panel is rendered directly into `document.body` via a lightweight
+ * Angular embedded-view portal so it is completely outside any parent
+ * `overflow:hidden`, `overflow:auto`, or CSS `transform` containment.
+ * A capture-phase, RAF-throttled scroll listener keeps the panel anchored to
+ * the trigger — including when a nested scrollable ancestor scrolls, not just
+ * the window — and the horizontal position is clamped so it never renders
+ * partially outside the viewport. Resize closes the panel instead of
+ * repositioning it with stale coordinates.
+ *
+ * @example
+ * ```html
+ * <sv-date-picker label="Start Date" [(value)]="dateStr" minDate="2024-01-01" />
+ * ```
+ */
+declare class SvDatePickerComponent implements OnInit, OnDestroy, ControlValueAccessor {
+    /** Two-way bindable YYYY-MM-DD date string. */
+    readonly value: _angular_core.ModelSignal<string>;
+    /** Label rendered above the trigger. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Placeholder shown when no date is selected. */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Minimum selectable date (YYYY-MM-DD). Cells before it are disabled. */
+    readonly minDate: _angular_core.InputSignal<string>;
+    /** Maximum selectable date (YYYY-MM-DD). Cells after it are disabled. */
+    readonly maxDate: _angular_core.InputSignal<string>;
+    /** Disables the trigger and prevents the popover from opening. */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Shows a red asterisk in the label. */
+    readonly required: _angular_core.InputSignal<boolean>;
+    /** Explicit accessible name for the trigger (falls back to `label`). */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Emitted when the calendar popover opens. */
+    readonly opened: _angular_core.OutputEmitterRef<void>;
+    /** Emitted when the calendar popover closes. */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    private _onChange;
+    private _onTouched;
+    private readonly _formDisabled;
+    /** Merged disabled — the `[disabled]` input OR a disabled parent FormControl. */
+    readonly resolvedDisabled: _angular_core.Signal<boolean>;
+    writeValue(v: string): void;
+    registerOnChange(fn: (v: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /** Sets the value from a user gesture and notifies the form (change + touched). */
+    private commitValue;
+    /** The ng-template that holds the calendar panel markup. */
+    private readonly panelTpl;
+    readonly isOpen: _angular_core.WritableSignal<boolean>;
+    readonly viewYear: _angular_core.WritableSignal<number>;
+    readonly viewMonth: _angular_core.WritableSignal<number>;
+    readonly viewMode: _angular_core.WritableSignal<"days" | "months" | "years">;
+    readonly openAbove: _angular_core.WritableSignal<boolean>;
+    readonly alignRight: _angular_core.WritableSignal<boolean>;
+    /** YYYY-MM-DD of the keyboard-focused day cell (roving tabindex). */
+    readonly activeKey: _angular_core.WritableSignal<string>;
+    /**
+     * Inline style object applied to the panel.
+     * Uses position:fixed with exact viewport coords so the panel
+     * escapes all parent overflow and transform containment.
+     */
+    readonly panelStyle: _angular_core.WritableSignal<Record<string, string>>;
+    /** Container div appended to document.body while the panel is open. */
+    private portalEl;
+    /** Embedded view holding the panel template nodes. */
+    private portalView;
+    /**
+     * Capture-phase scroll listener — fires for ANY scrollable ancestor
+     * (not just the window), RAF-throttled so it never runs more than once
+     * per frame. Repositions the panel to keep it anchored to the trigger
+     * instead of drifting or closing (see dropdown-instruction.md §6).
+     */
+    private _rafId;
+    private readonly _scrollHandler;
+    readonly weekDays: readonly ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+    readonly monthNames: readonly ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+    readonly yearRange: _angular_core.Signal<number[]>;
+    readonly displayValue: _angular_core.Signal<string>;
+    readonly monthName: _angular_core.Signal<"January" | "February" | "March" | "April" | "May" | "June" | "July" | "August" | "September" | "October" | "November" | "December">;
+    /** Accessible name for the trigger — combines the field name with the selection. */
+    readonly triggerAriaLabel: _angular_core.Signal<string | null>;
+    readonly calendarDays: _angular_core.Signal<CalendarDay[]>;
+    /** The 42 calendar days grouped into 6 weeks for `role="row"` grid semantics. */
+    readonly calendarWeeks: _angular_core.Signal<CalendarDay[][]>;
+    private readonly el;
+    private readonly appRef;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onDocumentClick(event: MouseEvent): void;
+    onEscape(): void;
+    onResize(): void;
+    toggle(): void;
+    close(returnFocus?: boolean): void;
+    selectDay(day: CalendarDay): void;
+    /** Roving tabindex — only the active day cell is in the tab order. */
+    dayTabIndex(day: CalendarDay): number;
+    /** Arrow / Home / End / PageUp / PageDown navigation + Enter/Space to select. */
+    onDayKeydown(event: KeyboardEvent): void;
+    private focusActiveDayDeferred;
+    selectMonth(monthIndex: number): void;
+    selectYear(year: number): void;
+    prevPeriod(): void;
+    nextPeriod(): void;
+    goToToday(): void;
+    clearDate(): void;
+    toDateStr(d: Date): string;
+    private isDateDisabled;
+    isMonthDisabled(idx: number): boolean;
+    isYearDisabled(year: number): boolean;
+    isViewMonthSelected(idx: number): boolean;
+    isViewYearSelected(year: number): boolean;
+    headerLabel(): string;
+    /**
+     * Computes fixed-position coordinates from the trigger's current viewport
+     * rect. position:fixed is viewport-relative — getBoundingClientRect() gives
+     * exactly that, regardless of scroll position. Called on open and again on
+     * every scroll (see _scrollHandler) so the panel tracks the trigger instead
+     * of drifting away from it as the page (or a nested container) scrolls.
+     */
+    private _calcPos;
+    private destroyPortal;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SvDatePickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SvDatePickerComponent, "sv-date-picker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+}
+
+export { SvDatePickerComponent, SvInputFieldComponent };
+export type { CalendarDay, InputMode, InputOption, InputSize, InputState, InputType, InputVariant };