import { EventEmitter, Input, Output } from "@angular/core";

/**
 * The input component that is used by the AdminApp to represent text inputs
 * The selector for this component is sf-input
 *
 * @export
 * @class InputComponent
 */
export declare class InputComponent {
    /**
     * The placeholder for the input that apperas with a little grey background
     * when the input does not have a value
     */
    @Input() placeholder: string;
    /**
     * Recommended characters shows a character counter to the side of the input
     * that gives a visual feedback when the user is in valid range of the value
     */
    @Input() recommendedCharacters: number;
    /**
     * Sets the type of the field. Can have values 'text', 'title', 'textarea'
     */
    @Input() type: string;

    /**
     * Sets the additional css styles for the component
     */
    @Input() look: string;

    /**
     * The user friendly message that describes what this input is about
     */
    @Input() hint: string;

    /**
     * Sets the input to be dispalyed in readonly mode. Valid for types 'text' and 'textarea'
     */
    @Input() readonly: boolean;
    /**
     * Sets the input to be displayed as disabled. Valid for types 'text' and 'textarea'
     */
    @Input() disabled: boolean;

    /**
     * Sets the unit to be displayed after the input. Eg. kg, km/h
     */
    @Input() unit: string;

    /**
     * A css value that controls where the unit value is placed
     */
    @Input() unitPosition: string;

    /**
     * Sets the autocomplete attribute. Valid for text mode only
     */
    @Input() autocomplete: string;

    /**
     * Emits whenever the field gains focus
     */
    @Output() onFocus: EventEmitter<any>;

    /**
     * Emits whenever the field loses focus
     */
    @Output() onBlur: EventEmitter<any>;

    /**
     * Emits whenver the value of the input changes
     */
    @Output() onInput: EventEmitter<any>;

    /**
     * Emits whenever the Enter key is pressed
     */
    @Output() onEnter: EventEmitter<any>;
}
