igniteui-angular/types/igniteui-angular-input-group.d.ts

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

import * as i0 from '@angular/core';
import { OnInit, AfterViewInit, OnDestroy, ElementRef, ChangeDetectorRef, Renderer2, InjectionToken, AfterContentChecked, QueryList } from '@angular/core';
import { NgModel, NgControl } from '@angular/forms';
import { IInputResourceStrings, IgxTheme } from 'igniteui-angular/core';

declare class IgxHintDirective implements OnInit {
    /**
     * Sets/gets whether the hint position is at the start.
     * Default value is `false`.
     * ```typescript
     * @ViewChild('hint', {read: IgxHintDirective})
     * public igxHint: IgxHintDirective;
     * this.igxHint.isPositionStart = true;
     * ```
     * ```typescript
     * let isHintPositionStart = this.igxHint.isPositionStart;
     * ```
     *
     * @memberof IgxHintDirective
     */
    isPositionStart: boolean;
    /**
     * Sets/gets whether the hint position is at the end.
     * Default value is `false`.
     * ```typescript
     * @ViewChild('hint', {read: IgxHintDirective})
     * public igxHint: IgxHintDirective;
     * this.igxHint.isPositionEnd = true;
     * ```
     * ```typescript
     * let isHintPositionEnd = this.igxHint.isPositionEnd;
     * ```
     *
     * @memberof IgxHintDirective
     */
    isPositionEnd: boolean;
    private _position;
    /**
     * Sets the position of the hint.
     * ```html
     * <igx-input-group>
     *  <input igxInput type="text"/>
     *  <igx-hint #hint [position]="'start'">IgxHint displayed at the start</igx-hint>
     * </igx-input-group>
     * ```
     *
     * @memberof IgxHintDirective
     */
    set position(value: string);
    /**
     * Gets the position of the hint.
     * ```typescript
     * @ViewChild('hint', {read: IgxHintDirective})
     * public igxHint: IgxHintDirective;
     * let hintPosition =  this.igxHint.position;
     * ```
     *
     * @memberof IgxHintDirective
     */
    get position(): string;
    /**
     * @hidden
     */
    ngOnInit(): void;
    private _applyPosition;
    static ɵfac: i0.ɵɵFactoryDeclaration<IgxHintDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<IgxHintDirective, "igx-hint,[igxHint]", never, { "position": { "alias": "position"; "required": false; }; }, {}, never, never, true, never>;
}

/** @hidden */
declare abstract class IgxInputGroupBase {
    disabled: boolean;
    isFocused: boolean;
    isRequired: boolean;
    hasPlaceholder: boolean;
}

declare enum IgxInputState {
    INITIAL = 0,
    VALID = 1,
    INVALID = 2
}
/**
 * The `igxInput` directive creates single- or multiline text elements, covering common scenarios when dealing with form inputs.
 *
 * @igxModule IgxInputGroupModule
 *
 * @igxParent Data Entry & Display
 *
 * @igxTheme igx-input-group-theme
 *
 * @igxKeywords input, input group, form, field, validation
 *
 * @igxGroup presentation
 *
 * @example
 * ```html
 * <input-group>
 *  <label for="address">Address</label>
 *  <input igxInput name="address" type="text" [(ngModel)]="customer.address">
 * </input-group>
 * ```
 */
declare class IgxInputDirective implements AfterViewInit, OnDestroy {
    inputGroup: IgxInputGroupBase;
    protected ngModel: NgModel;
    protected formControl: NgControl;
    protected element: ElementRef<HTMLInputElement>;
    protected cdr: ChangeDetectorRef;
    protected renderer: Renderer2;
    /**
     * Sets/gets whether the `"igx-input-group__input"` class is added to the host element.
     * Default value is `false`.
     *
     * @example
     * ```typescript
     * this.igxInput.isInput = true;
     * ```
     *
     * @example
     * ```typescript
     * let isCLassAdded = this.igxInput.isInput;
     * ```
     */
    isInput: boolean;
    /**
     * Sets/gets whether the `"class.igx-input-group__textarea"` class is added to the host element.
     * Default value is `false`.
     *
     * @example
     * ```typescript
     * this.igxInput.isTextArea = true;
     * ```
     *
     * @example
     * ```typescript
     * let isCLassAdded = this.igxInput.isTextArea;
     * ```
     */
    isTextArea: boolean;
    private _valid;
    private _statusChanges$;
    private _valueChanges$;
    private _touchedChanges$;
    private _fileNames;
    private _disabled;
    private get ngControl();
    /**
     * Sets the `value` property.
     *
     * @example
     * ```html
     * <input-group>
     *  <input igxInput #igxInput [value]="'IgxInput Value'">
     * </input-group>
     * ```
     */
    set value(value: any);
    /**
     * Gets the `value` property.
     *
     * @example
     * ```typescript
     * @ViewChild('igxInput', {read: IgxInputDirective})
     *  public igxInput: IgxInputDirective;
     * let inputValue = this.igxInput.value;
     * ```
     */
    get value(): any;
    /**
     * Sets the `disabled` property.
     *
     * @example
     * ```html
     * <input-group>
     *  <input igxInput #igxInput [disabled]="true">
     * </input-group>
     * ```
     */
    set disabled(value: boolean);
    /**
     * Gets the `disabled` property
     *
     * @example
     * ```typescript
     * @ViewChild('igxInput', {read: IgxInputDirective})
     *  public igxInput: IgxInputDirective;
     * let isDisabled = this.igxInput.disabled;
     * ```
     */
    get disabled(): boolean;
    /**
     * Sets the `required` property.
     *
     * @example
     * ```html
     * <input-group>
     *  <input igxInput #igxInput required>
     * </input-group>
     * ```
     */
    set required(value: boolean);
    /**
     * Gets whether the igxInput is required.
     *
     * @example
     * ```typescript
     * let isRequired = this.igxInput.required;
     * ```
     */
    get required(): boolean;
    /**
     * @hidden
     * @internal
     */
    onFocus(): void;
    /**
     * @param event The event to invoke the handler
     *
     * @hidden
     * @internal
     */
    onBlur(): void;
    /** @hidden @internal */
    onInput(): void;
    /** @hidden @internal */
    change(event: Event): void;
    /** @hidden @internal */
    get fileNames(): string;
    /** @hidden @internal */
    clear(): void;
    /** @hidden @internal */
    ngAfterViewInit(): void;
    /** @hidden @internal */
    ngOnDestroy(): void;
    /**
     * Sets a focus on the igxInput.
     *
     * @example
     * ```typescript
     * this.igxInput.focus();
     * ```
     */
    focus(): void;
    /**
     * Gets the `nativeElement` of the igxInput.
     *
     * @example
     * ```typescript
     * let igxInputNativeElement = this.igxInput.nativeElement;
     * ```
     */
    get nativeElement(): HTMLInputElement;
    /** @hidden @internal */
    protected onStatusChanged(): void;
    /** @hidden @internal */
    protected onValueChanged(): void;
    /**
     * @hidden
     * @internal
     */
    protected updateValidityState(): void;
    private get isTouchedOrDirty();
    private get hasValidators();
    /**
     * Gets whether the igxInput has a placeholder.
     *
     * @example
     * ```typescript
     * let hasPlaceholder = this.igxInput.hasPlaceholder;
     * ```
     */
    get hasPlaceholder(): boolean;
    /**
     * Gets the placeholder element of the igxInput.
     *
     * @example
     * ```typescript
     * let igxInputPlaceholder = this.igxInput.placeholder;
     * ```
     */
    get placeholder(): string;
    /**
     * @returns An indicator of whether the input has validator attributes or not
     *
     * @hidden
     * @internal
     */
    private _hasValidators;
    /**
     * Gets whether the igxInput is focused.
     *
     * @example
     * ```typescript
     * let isFocused = this.igxInput.focused;
     * ```
     */
    get focused(): boolean;
    /**
     * Gets the state of the igxInput.
     *
     * @example
     * ```typescript
     * let igxInputState = this.igxInput.valid;
     * ```
     */
    get valid(): IgxInputState;
    /**
     * Sets the state of the igxInput.
     *
     * @example
     * ```typescript
     * this.igxInput.valid = IgxInputState.INVALID;
     * ```
     */
    set valid(value: IgxInputState);
    /**
     * Gets whether the igxInput is valid.
     *
     * @example
     * ```typescript
     * let valid = this.igxInput.isValid;
     * ```
     */
    get isValid(): boolean;
    /**
     * A function to assign a native validity property of an input.
     * This should be used when there's no ngControl
     *
     * @hidden
     * @internal
     */
    private checkNativeValidity;
    /**
     * Returns the input type.
     *
     * @hidden
     * @internal
     */
    get type(): string;
    static ɵfac: i0.ɵɵFactoryDeclaration<IgxInputDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<IgxInputDirective, "[igxInput]", ["igxInput"], { "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, {}, never, never, true, never>;
    static ngAcceptInputType_disabled: unknown;
    static ngAcceptInputType_required: unknown;
}

declare class IgxLabelDirective {
    defaultClass: boolean;
    /**
     * @hidden
     */
    id: string;
    static ɵfac: i0.ɵɵFactoryDeclaration<IgxLabelDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<IgxLabelDirective, "[igxLabel]", never, { "id": { "alias": "id"; "required": false; }; }, {}, never, never, true, never>;
}

/**
 * @hidden
 */
declare class IgxPrefixDirective {
    static ɵfac: i0.ɵɵFactoryDeclaration<IgxPrefixDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<IgxPrefixDirective, "igx-prefix,[igxPrefix],[igxStart]", never, {}, {}, never, never, true, never>;
}

/**
 * @hidden
 */
declare class IgxSuffixDirective {
    static ɵfac: i0.ɵɵFactoryDeclaration<IgxSuffixDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<IgxSuffixDirective, "igx-suffix,[igxSuffix],[igxEnd]", never, {}, {}, never, never, true, never>;
}

declare const IgxInputGroupEnum: {
    readonly Line: "line";
    readonly Box: "box";
    readonly Border: "border";
    readonly Search: "search";
};
/**
 * Defines the InputGroupType DI token.
 */
declare const IGX_INPUT_GROUP_TYPE: InjectionToken<IgxInputGroupType>;
/**
 * Determines the InputGroupType.
 */
type IgxInputGroupType = (typeof IgxInputGroupEnum)[keyof typeof IgxInputGroupEnum];

declare class IgxInputGroupComponent implements IgxInputGroupBase, AfterContentChecked {
    element: ElementRef<HTMLElement>;
    private _inputGroupType;
    private document;
    private platform;
    private cdr;
    private themeToken;
    /**
     * Sets the resource strings.
     * By default it uses EN resources.
     */
    set resourceStrings(value: IInputResourceStrings);
    /**
     * Returns the resource strings.
     */
    get resourceStrings(): IInputResourceStrings;
    /**
     * Property that enables/disables the auto-generated class of the `IgxInputGroupComponent`.
     * By default applied the class is applied.
     * ```typescript
     *  @ViewChild("MyInputGroup")
     *  public inputGroup: IgxInputGroupComponent;
     *  ngAfterViewInit(){
     *  this.inputGroup.defaultClass = false;
     * ```
     * }
     */
    defaultClass: boolean;
    /** @hidden */
    hasPlaceholder: boolean;
    /** @hidden */
    isRequired: boolean;
    /** @hidden */
    isFocused: boolean;
    /**
     * @hidden @internal
     * When truthy, disables the `IgxInputGroupComponent`.
     * Controlled by the underlying `IgxInputDirective`.
     * ```html
     * <igx-input-group [disabled]="true"></igx-input-group>
     * ```
     */
    disabled: boolean;
    /**
     * Prevents automatically focusing the input when clicking on other elements in the input group (e.g. prefix or suffix).
     *
     * @remarks Automatic focus causes software keyboard to show on mobile devices.
     *
     * @example
     * ```html
     * <igx-input-group [suppressInputAutofocus]="true"></igx-input-group>
     * ```
     */
    suppressInputAutofocus: boolean;
    /** @hidden */
    hasWarning: boolean;
    /** @hidden */
    protected hints: QueryList<IgxHintDirective>;
    protected _prefixes: QueryList<IgxPrefixDirective>;
    protected _suffixes: QueryList<IgxSuffixDirective>;
    /** @hidden */
    protected input: IgxInputDirective;
    private _destroyRef;
    private _type;
    private _filled;
    private _theme;
    private _resourceStrings;
    private _readOnly;
    /** @hidden @internal */
    get readOnly(): boolean;
    /** @hidden @internal */
    set readOnly(value: boolean);
    /** @hidden */
    get validClass(): boolean;
    /** @hidden */
    get invalidClass(): boolean;
    /** @hidden */
    get isFilled(): any;
    /** @hidden */
    get textAreaClass(): boolean;
    /**
     * Sets how the input will be styled.
     * Allowed values of type IgxInputGroupType.
     * ```html
     * <igx-input-group [type]="'search'">
     * ```
     */
    set type(value: IgxInputGroupType);
    /**
     * Returns the type of the `IgxInputGroupComponent`. How the input is styled.
     * The default is `line`.
     * ```typescript
     * @ViewChild("MyInputGroup")
     * public inputGroup: IgxInputGroupComponent;
     * ngAfterViewInit(){
     *    let inputType = this.inputGroup.type;
     * }
     * ```
     */
    get type(): IgxInputGroupType;
    /**
     * Sets the theme of the input.
     * Allowed values of type IgxInputGroupTheme.
     * ```typescript
     * @ViewChild("MyInputGroup")
     * public inputGroup: IgxInputGroupComponent;
     * ngAfterViewInit() {
     *  let inputTheme = 'fluent';
     * }
     */
    set theme(value: IgxTheme);
    /**
     * Returns the theme of the input.
     * The returned value is of type IgxInputGroupType.
     * ```typescript
     * @ViewChild("MyInputGroup")
     * public inputGroup: IgxInputGroupComponent;
     * ngAfterViewInit() {
     *  let inputTheme = this.inputGroup.theme;
     * }
     */
    get theme(): IgxTheme;
    constructor();
    /** @hidden */
    onClick(event: MouseEvent): void;
    /** @hidden */
    onPointerDown(event: PointerEvent): void;
    /** @hidden @internal */
    hintClickHandler(event: MouseEvent): void;
    /**
     * Returns whether the `IgxInputGroupComponent` has hints.
     * ```typescript
     * @ViewChild("MyInputGroup")
     * public inputGroup: IgxInputGroupComponent;
     * ngAfterViewInit(){
     *    let inputHints = this.inputGroup.hasHints;
     * }
     * ```
     */
    get hasHints(): boolean;
    /** @hidden @internal */
    get hasPrefixes(): boolean;
    /** @hidden @internal */
    set prefixes(items: QueryList<IgxPrefixDirective>);
    /** @hidden @internal */
    get hasSuffixes(): any;
    /** @hidden @internal */
    set suffixes(items: QueryList<IgxSuffixDirective>);
    /**
     * Returns whether the `IgxInputGroupComponent` has border.
     * ```typescript
     * @ViewChild("MyInputGroup")
     * public inputGroup: IgxInputGroupComponent;
     * ngAfterViewInit(){
     *    let inputBorder = this.inputGroup.hasBorder;
     * }
     * ```
     */
    get hasBorder(): boolean;
    /**
     * Returns whether the `IgxInputGroupComponent` type is line.
     * ```typescript
     * @ViewChild("MyInputGroup1")
     * public inputGroup: IgxInputGroupComponent;
     * ngAfterViewInit(){
     *    let isTypeLine = this.inputGroup.isTypeLine;
     * }
     * ```
     */
    get isTypeLine(): boolean;
    /**
     * Returns whether the `IgxInputGroupComponent` type is box.
     * ```typescript
     * @ViewChild("MyInputGroup1")
     * public inputGroup: IgxInputGroupComponent;
     * ngAfterViewInit(){
     *    let isTypeBox = this.inputGroup.isTypeBox;
     * }
     * ```
     */
    get isTypeBox(): boolean;
    /** @hidden @internal */
    clearValueHandler(): void;
    /** @hidden @internal */
    get isFileType(): boolean;
    /** @hidden @internal */
    get isFileInput(): boolean;
    /** @hidden @internal */
    get isFileInputFilled(): any;
    /** @hidden @internal */
    get isFileInputFocused(): boolean;
    /** @hidden @internal */
    get isFileInputDisabled(): boolean;
    /** @hidden @internal */
    get fileNames(): string;
    /**
     * Returns whether the `IgxInputGroupComponent` type is border.
     * ```typescript
     * @ViewChild("MyInputGroup1")
     * public inputGroup: IgxInputGroupComponent;
     * ngAfterViewInit(){
     *    let isTypeBorder = this.inputGroup.isTypeBorder;
     * }
     * ```
     */
    get isTypeBorder(): boolean;
    /**
     * Returns true if the `IgxInputGroupComponent` theme is Fluent.
     * ```typescript
     * @ViewChild("MyInputGroup1")
     * public inputGroup: IgxInputGroupComponent;
     * ngAfterViewInit(){
     *    let isTypeFluent = this.inputGroup.isTypeFluent;
     * }
     * ```
     */
    get isTypeFluent(): boolean;
    /**
     * Returns true if the `IgxInputGroupComponent` theme is Bootstrap.
     * ```typescript
     * @ViewChild("MyInputGroup1")
     * public inputGroup: IgxInputGroupComponent;
     * ngAfterViewInit(){
     *    let isTypeBootstrap = this.inputGroup.isTypeBootstrap;
     * }
     * ```
     */
    get isTypeBootstrap(): boolean;
    /**
     * Returns true if the `IgxInputGroupComponent` theme is Indigo.
     * ```typescript
     * @ViewChild("MyInputGroup1")
     * public inputGroup: IgxInputGroupComponent;
     * ngAfterViewInit(){
     *    let isTypeIndigo = this.inputGroup.isTypeIndigo;
     * }
     * ```
     */
    get isTypeIndigo(): boolean;
    /**
     * Returns whether the `IgxInputGroupComponent` type is search.
     * ```typescript
     * @ViewChild("MyInputGroup1")
     * public inputGroup: IgxInputGroupComponent;
     * ngAfterViewInit(){
     *    let isTypeSearch = this.inputGroup.isTypeSearch;
     * }
     * ```
     */
    get isTypeSearch(): boolean;
    /** @hidden */
    get filled(): boolean;
    /** @hidden */
    set filled(val: boolean);
    private setComponentTheme;
    /** @hidden @internal */
    ngAfterContentChecked(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<IgxInputGroupComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<IgxInputGroupComponent, "igx-input-group", never, { "resourceStrings": { "alias": "resourceStrings"; "required": false; }; "suppressInputAutofocus": { "alias": "suppressInputAutofocus"; "required": false; }; "type": { "alias": "type"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; }, {}, ["input", "hints", "_prefixes", "_suffixes"], ["igx-hint, [igxHint]", "[igxLabel]", "[igxInput]", "igx-prefix, [igxPrefix]", "igx-suffix, [igxSuffix]"], true, never>;
    static ngAcceptInputType_suppressInputAutofocus: unknown;
}

declare class IgxReadOnlyInputDirective {
    igxReadOnlyInput: i0.InputSignal<boolean>;
    private _inputGroup;
    constructor();
    static ɵfac: i0.ɵɵFactoryDeclaration<IgxReadOnlyInputDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<IgxReadOnlyInputDirective, "[igxReadOnlyInput]", ["igxReadOnlyInput"], { "igxReadOnlyInput": { "alias": "igxReadOnlyInput"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

declare const IGX_INPUT_GROUP_DIRECTIVES: readonly [typeof IgxInputGroupComponent, typeof IgxInputDirective, typeof IgxLabelDirective, typeof IgxPrefixDirective, typeof IgxSuffixDirective, typeof IgxHintDirective];

/**
 * @hidden
 * @deprecated
 * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
 */
declare class IgxInputGroupModule {
    static ɵfac: i0.ɵɵFactoryDeclaration<IgxInputGroupModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<IgxInputGroupModule, never, [typeof IgxInputGroupComponent, typeof IgxInputDirective, typeof IgxLabelDirective, typeof IgxPrefixDirective, typeof IgxSuffixDirective, typeof IgxHintDirective], [typeof IgxInputGroupComponent, typeof IgxInputDirective, typeof IgxLabelDirective, typeof IgxPrefixDirective, typeof IgxSuffixDirective, typeof IgxHintDirective]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<IgxInputGroupModule>;
}

export { IGX_INPUT_GROUP_DIRECTIVES, IGX_INPUT_GROUP_TYPE, IgxHintDirective, IgxInputDirective, IgxInputGroupBase, IgxInputGroupComponent, IgxInputGroupEnum, IgxInputGroupModule, IgxInputState, IgxLabelDirective, IgxPrefixDirective, IgxReadOnlyInputDirective, IgxSuffixDirective };
export type { IgxInputGroupType };