@proangular/pro-form/index.d.ts

A predefined set of reactive and reusable form input components based on Angular Material.

import * as i0 from '@angular/core';
import { ElementRef, OnInit, EventEmitter, QueryList, AfterViewInit, PipeTransform } from '@angular/core';
import { ControlValueAccessor, NgControl, FormControl, AbstractControl, FormGroup, ValidatorFn, ValidationErrors } from '@angular/forms';
import { MatChip, MatChipListbox } from '@angular/material/chips';
import * as _angular_material_form_field from '@angular/material/form-field';
import { DateTime } from 'luxon';
import { MatSelect } from '@angular/material/select';
import { MatOption } from '@angular/material/core';

declare abstract class InputDirective<T> implements ControlValueAccessor {
    constructor();
    elementRef: ElementRef<any>;
    ngControl: NgControl;
    get formControl(): FormControl<T>;
    hint: string | number | null;
    id: string;
    placeholder: string | null;
    label: string;
    get isRequired(): boolean;
    onChange: (value: T) => void;
    onTouched: () => void;
    writeValue: (value: T) => void;
    registerOnChange(fn: (value: T) => void): void;
    registerOnTouched(fn: () => void): void;
    scrollIntoView(options?: ScrollIntoViewOptions): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<InputDirective<any>, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<InputDirective<any>, never, never, { "hint": { "alias": "hint"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "label": { "alias": "label"; "required": true; }; }, {}, never, never, true, never>;
}

declare class InputCheckboxComponent extends InputDirective<boolean | null> implements OnInit {
    labelPosition: 'before' | 'after';
    readonly change: EventEmitter<boolean>;
    ngOnInit(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<InputCheckboxComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<InputCheckboxComponent, "pro-input-checkbox", never, { "labelPosition": { "alias": "labelPosition"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
}

declare class InputChipComponent extends MatChip {
    private readonly elementRef;
    get element(): HTMLElement;
    static ɵfac: i0.ɵɵFactoryDeclaration<InputChipComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<InputChipComponent, "pro-input-chip", never, {}, {}, never, ["*"], true, never>;
}

declare class InputChipsComponent extends InputDirective<string> {
    readonly chips: QueryList<InputChipComponent>;
    readonly matChipListbox?: MatChipListbox;
    max: number | undefined;
    multiple: boolean;
    compareWith: MatChipListbox['compareWith'];
    static ɵfac: i0.ɵɵFactoryDeclaration<InputChipsComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<InputChipsComponent, "pro-input-chips", never, { "max": { "alias": "max"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; }, {}, ["chips"], never, true, never>;
    static ngAcceptInputType_multiple: any;
}

type DateTimeFormat = 'ccc, LLLL dd, yyyy hh:mm a' | 'MM/dd/yyyy, hh:mm a' | 'MM/dd/yyyy, hh:mm a (ZZZZ)' | 'MM/dd/yyyy' | 'h:mm a (ZZZZ)' | 'relative-date' | 'relative-datetime';

type InputAppearance = _angular_material_form_field.MatFormFieldAppearance;
type InputAutocomplete = 'additional-name' | 'address-level1' | 'address-level2' | 'address-level3' | 'address-level4' | 'address-line1' | 'address-line2' | 'address-line3' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'cc-additional-name' | 'cc-csc' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-family-name' | 'cc-given-name' | 'cc-name' | 'cc-number' | 'cc-type' | 'country' | 'country-name' | 'current-password' | 'email' | 'family-name' | 'given-name' | 'honorific-prefix' | 'honorific-suffix' | 'impp' | 'language' | 'name' | 'new-password' | 'nickname' | 'off' | 'on' | 'one-time-code' | 'organization' | 'organization-title' | 'photo' | 'postal-code' | 'sex' | 'street-address' | 'tel' | 'tel-area-code' | 'tel-country-code' | 'tel-extension' | 'tel-local' | 'tel-local-prefix' | 'tel-local-suffix' | 'tel-national' | 'transaction-amount' | 'transaction-currency' | 'url' | 'username';
type InputType = 'color' | 'datetime-local' | 'date' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';

interface Option {
    label: string;
    value: number | string;
}

declare class InputComponent extends InputDirective<string> {
    #private;
    appearance: InputAppearance;
    autocomplete: InputAutocomplete;
    set max(value: number | string);
    get max(): number | undefined;
    set min(value: number | string);
    get min(): number | undefined;
    set maxLength(value: number | string);
    get maxLength(): number | undefined;
    set minLength(value: number | string);
    get minLength(): number | undefined;
    name: string | undefined;
    set step(value: number | string);
    get step(): number | undefined;
    type: InputType;
    private getMax;
    private getMin;
    private setMax;
    private setMaxLength;
    private setMin;
    private setMinLength;
    static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "pro-input", never, { "appearance": { "alias": "appearance"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "minLength": { "alias": "minLength"; "required": false; }; "name": { "alias": "name"; "required": false; }; "step": { "alias": "step"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, never, true, never>;
}

declare class InputDatepickerComponent extends InputDirective<DateTime> {
    appearance: InputAppearance;
    max: DateTime | undefined;
    min: DateTime | undefined;
    static ɵfac: i0.ɵɵFactoryDeclaration<InputDatepickerComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<InputDatepickerComponent, "pro-input-datepicker", never, { "appearance": { "alias": "appearance"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; }, {}, never, never, true, never>;
}

declare class InputDropdownOptionComponent extends MatOption {
    private readonly elementRef;
    get element(): HTMLElement;
    static ɵfac: i0.ɵɵFactoryDeclaration<InputDropdownOptionComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<InputDropdownOptionComponent, "pro-input-dropdown-option", never, {}, {}, never, ["*"], true, never>;
}

declare class InputDropdownOptionGroupComponent {
    label: string;
    readonly options: QueryList<InputDropdownOptionComponent>;
    static ɵfac: i0.ɵɵFactoryDeclaration<InputDropdownOptionGroupComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<InputDropdownOptionGroupComponent, "pro-input-dropdown-option-group", never, { "label": { "alias": "label"; "required": true; }; }, {}, ["options"], ["*"], true, never>;
}

declare class InputDropdownComponent<T> extends InputDirective<T> {
    readonly options: QueryList<InputDropdownOptionComponent>;
    readonly optionGroups: QueryList<InputDropdownOptionGroupComponent>;
    readonly matSelect?: MatSelect;
    appearance: InputAppearance;
    max: number | undefined;
    private get exceedsMax();
    protected get selectedOptions(): readonly InputDropdownOptionComponent[];
    multiple: boolean;
    compareWith: MatSelect['compareWith'];
    static ɵfac: i0.ɵɵFactoryDeclaration<InputDropdownComponent<any>, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<InputDropdownComponent<any>, "pro-input-dropdown", never, { "appearance": { "alias": "appearance"; "required": false; }; "max": { "alias": "max"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; }, {}, ["options", "optionGroups"], never, true, never>;
    static ngAcceptInputType_multiple: any;
}

declare class InputLoadingComponent implements OnInit {
    appearance: InputAppearance;
    hint?: string;
    label?: string;
    protected readonly formControl: FormControl<string>;
    protected loadingText: string;
    ngOnInit(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<InputLoadingComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<InputLoadingComponent, "pro-input-loading", never, { "appearance": { "alias": "appearance"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "label": { "alias": "label"; "required": false; }; }, {}, never, never, true, never>;
}

declare class InputRadioOptionComponent<T> {
    private readonly elementRef;
    value: T;
    get element(): HTMLElement;
    static ɵfac: i0.ɵɵFactoryDeclaration<InputRadioOptionComponent<any>, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<InputRadioOptionComponent<any>, "pro-input-radio-option", never, { "value": { "alias": "value"; "required": true; }; }, {}, never, ["*"], true, never>;
}

declare class InputRadioComponent<T> extends InputDirective<T> {
    protected readonly options: QueryList<InputRadioOptionComponent<T>>;
    static ɵfac: i0.ɵɵFactoryDeclaration<InputRadioComponent<any>, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<InputRadioComponent<any>, "pro-input-radio", never, {}, {}, ["options"], never, true, never>;
}

declare class InputTextareaComponent extends InputDirective<string> {
    #private;
    appearance: InputAppearance;
    autocomplete: InputAutocomplete;
    name: string | undefined;
    set maxLength(value: number | string);
    get maxLength(): number | undefined;
    set minLength(value: number | string);
    get minLength(): number | undefined;
    static ɵfac: i0.ɵɵFactoryDeclaration<InputTextareaComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<InputTextareaComponent, "pro-input-textarea", never, { "appearance": { "alias": "appearance"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "name": { "alias": "name"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "minLength": { "alias": "minLength"; "required": false; }; }, {}, never, never, true, never>;
}

declare class InputTimepickerComponent extends InputDirective<DateTime> {
    appearance: InputAppearance;
    interval: string | number | null;
    max: DateTime | undefined;
    min: DateTime | undefined;
    static ɵfac: i0.ɵɵFactoryDeclaration<InputTimepickerComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<InputTimepickerComponent, "pro-input-timepicker", never, { "appearance": { "alias": "appearance"; "required": false; }; "interval": { "alias": "interval"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; }, {}, never, never, true, never>;
}

declare class InputToggleComponent extends InputDirective<boolean | null> implements OnInit {
    readonly change: EventEmitter<boolean>;
    ngOnInit(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<InputToggleComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<InputToggleComponent, "pro-input-toggle", never, {}, { "change": "change"; }, never, never, true, never>;
}

declare class FormDirective<T extends {
    [K in keyof T]: AbstractControl;
}> implements AfterViewInit {
    protected readonly formGroup: FormGroup<T>;
    private readonly inputs;
    private readonly inputCheckboxes;
    private readonly inputChips;
    private readonly inputDatepickers;
    private readonly inputDropdowns;
    private readonly inputRadios;
    private readonly inputTextareas;
    private readonly inputTimepickers;
    private readonly inputToggles;
    private get formInputs();
    ngAfterViewInit(): void;
    /** Trigger validation checks & highlight all invalid controls. */
    highlightInvalidControls(): void;
    /** Reset the form to its original state. */
    protected reset(): void;
    /**
     * Scroll to the first invalid control in the form.
     *
     * @returns The label of the first invalid control.
     */
    scrollToFirstInvalidControl(): string | null;
    static ɵfac: i0.ɵɵFactoryDeclaration<FormDirective<any>, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<FormDirective<any>, never, never, {}, {}, never, never, true, never>;
}

declare class DateTimePipe implements PipeTransform {
    private readonly defaultFormat;
    /** Transform DateTime object into a readable string. */
    transform(value: DateTime | null | undefined | unknown, format?: DateTimeFormat): string;
    private getRelativeDate;
    private getRelativeDateTime;
    static ɵfac: i0.ɵɵFactoryDeclaration<DateTimePipe, never>;
    static ɵpipe: i0.ɵɵPipeDeclaration<DateTimePipe, "dateTime", true>;
}

/**
 * Validate that the value is an empty value.
 *
 * @param value The value to check.
 * @returns True if the value is an empty value, false otherwise.
 */
declare function isEmptyValue(value: unknown): value is null | undefined;
/**
 * Validate that the value is a non-empty value.
 *
 * @param value The value to check.
 * @returns True if the value is a non-empty value, false otherwise.
 */
declare function isNonEmptyValue<T>(value: T): value is NonNullable<T>;
/**
 * Validate that the value is a number.
 *
 * @param value The value to check.
 * @returns True if the value is a number, false otherwise.
 */
declare function isNumber(value: unknown): value is number;
/**
 * Validate that the value is a string. This includes both primitive strings
 * and string objects.
 *
 * @param value The value to check.
 * @returns True if the value is a string, false otherwise.
 */
declare function isString(value: unknown): value is string;
/**
 * Validate that the value is an empty string. An empty string is a string that
 * contains no characters.
 *
 * @param value The value to check.
 * @returns True if the value is an empty string, false otherwise.
 */
declare function isEmptyString(value: unknown): value is '';
/**
 * Validate that the value is a blank string. A blank string is a string that
 * contains only whitespace characters.
 *
 * @param value
 * @returns
 */
declare function isWhitespaceString(value: unknown): boolean;
/**
 * Validate that the value is a string that is non-empty.
 *
 * @param value The value to check.
 * @returns True if the value is a string that is non-empty, false otherwise.
 */
declare function isNonEmptyString(value: unknown): value is string;

declare class CustomValidators {
    /**
     * Validates that a given DateTime value does not exceed a maximum allowed DateTime.
     *
     * @param max The maximum allowed DateTime.
     * @returns A validator function that checks if the value exceeds the max DateTime.
     */
    static maxDateTime(max: DateTime): ValidatorFn;
    /**
     * Validates that a given DateTime value is not earlier than a minimum allowed DateTime.
     *
     * @param min The minimum allowed DateTime.
     * @returns A validator function that checks if the value is below the min DateTime.
     */
    static minDateTime(min: DateTime): ValidatorFn;
    /**
     * Validates that a given value is **not** a string.
     *
     * @param control The form control being validated.
     * @returns A validation error if the value is a string, otherwise null.
     */
    static nonString(control: AbstractControl): ValidationErrors | null;
    /**
     * Validates that a given value is a number.
     *
     * @returns A validator function that checks if the value is a number.
     */
    static isNumber(): ValidatorFn;
    /**
     * Validates that a given value is a whole number (integer).
     *
     * @returns A validator function that checks if the value is a whole number.
     */
    static wholeNumber(): ValidatorFn;
}

export { CustomValidators, DateTimePipe, FormDirective, InputCheckboxComponent, InputChipComponent, InputChipsComponent, InputComponent, InputDatepickerComponent, InputDirective, InputDropdownComponent, InputDropdownOptionComponent, InputDropdownOptionGroupComponent, InputLoadingComponent, InputRadioComponent, InputRadioOptionComponent, InputTextareaComponent, InputTimepickerComponent, InputToggleComponent, isEmptyString, isEmptyValue, isNonEmptyString, isNonEmptyValue, isNumber, isString, isWhitespaceString };
export type { DateTimeFormat, InputAppearance, InputAutocomplete, InputType, Option };