gentics-ui-core/components/input/input.component.d.ts

This is the common core framework for the Gentics CMS and Mesh UI, and other Angular applications.

import { AfterViewInit, ChangeDetectorRef, EventEmitter, OnChanges, OnInit, Renderer2, SimpleChanges } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import * as i0 from "@angular/core";
/**
 * The InputField wraps the native `<input>` form element but should only be used for
 * text, number, password, tel, email or url types. Other types (date, range, file) should have dedicated components.
 *
 *
 * Note that the class is named `InputField` since `Input` is used by the Angular framework to denote
 * component inputs.
 *
 * ```html
 * <gtx-input label="Text Input Label"></gtx-input>
 * <gtx-input placeholder="Number Input Placeholder"
 *            type="number" min="0" max="100" step="5"></gtx-input>
 * ```
 */
export declare class InputField implements AfterViewInit, ControlValueAccessor, OnInit, OnChanges {
    private renderer;
    private changeDetector;
    /**
     * Sets autocomplete attribute on the input field
     */
    autocomplete: string;
    /**
     * Sets the input field to be auto-focused. Handled by `AutofocusDirective`.
     */
    autofocus: boolean;
    /**
     * Sets the disabled state
     */
    disabled: boolean;
    /**
     * Input field id
     */
    id: string;
    /**
     * A label for the input
     */
    label: string;
    /**
     * Max allowed value (applies when type = "number")
     */
    max: number;
    /**
     * Min allowed value (applies when type = "number")
     */
    min: number;
    /**
     * Max allowed length in characters
     */
    maxlength: number;
    /**
     * Input field name
     */
    name: string;
    /**
     * Regex pattern for complex validation
     */
    pattern: string;
    /**
     * Placeholder text to display when the field is empty
     */
    placeholder: string;
    /**
     * Sets the readonly state of the input
     */
    readonly: boolean;
    /**
     * Sets the required state of the input
     */
    required: boolean;
    /**
     * Increment step (applies when type = "number")
     */
    step: number;
    /**
     * Can be "text", "number", "password", "tel", "email" or "url".
     */
    type: 'text' | 'number' | 'password' | 'tel' | 'email' | 'url';
    /**
     * Sets the value of the input.
     */
    value: string | number;
    /**
     * Fires when the input loses focus.
     */
    blur: EventEmitter<string | number>;
    /**
     * Fires when the input gains focus.
     */
    focus: EventEmitter<string | number>;
    /**
     * Fires whenever a char is entered into the field.
     */
    change: EventEmitter<string | number>;
    private inputElement;
    private labelElement;
    private currentValue;
    constructor(renderer: Renderer2, changeDetector: ChangeDetectorRef);
    ngOnInit(): void;
    /**
     * The Materialize input includes a dynamic label that changes position depending on the state of the input.
     * When the label has the "active" class, it moves above the input, otherwise it resides inside the input
     * itself.
     *
     * The Materialize "forms.js" script normally takes care of adding/removing the active class on page load,
     * but this does not work in a SPA setting where new views with inputs can be created without a page load
     * event to trigger the `Materialize.updateTextFields()` method. Therefore we need to handle it ourselves
     * when the input component is created.
     */
    ngAfterViewInit(): void;
    ngOnChanges(changes: SimpleChanges): void;
    onKeyDown(event: any): void;
    onBlur(e: Event): void;
    onFocus(e: Event): void;
    onInput(e: Event): void;
    writeValue(valueToWrite: any): void;
    registerOnChange(fn: (newValue: string | number) => void): void;
    registerOnTouched(fn: () => void): void;
    setDisabledState(disabled: boolean): void;
    private onChange;
    private onTouched;
    private normalizeValue;
    private updateValue;
    static ɵfac: i0.ɵɵFactoryDeclaration<InputField, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<InputField, "gtx-input", never, { "autocomplete": "autocomplete"; "autofocus": "autofocus"; "disabled": "disabled"; "id": "id"; "label": "label"; "max": "max"; "min": "min"; "maxlength": "maxlength"; "name": "name"; "pattern": "pattern"; "placeholder": "placeholder"; "readonly": "readonly"; "required": "required"; "step": "step"; "type": "type"; "value": "value"; }, { "blur": "blur"; "focus": "focus"; "change": "change"; }, never, never>;
}