@rdkmaster/jigsaw-labs/component/input/input.d.ts

Jigsaw, the next generation component set for RDK

import { EventEmitter, ElementRef, AfterContentInit, Renderer2, AfterViewChecked, ChangeDetectorRef } from "@angular/core";
import { ControlValueAccessor } from "@angular/forms";
import { AbstractJigsawComponent, IJigsawFormControl } from "../common";
/**
 * 单行输入框组件，常常用于接收用户的文本输入。
 *
 * 支持前后置图标，且每个图标都可交互，[参考demo]($demo=input/icons)。
 *
 * 这是一个表单友好组件。
 *
 * $demo = input/full
 */
export declare class JigsawInput extends AbstractJigsawComponent implements IJigsawFormControl, ControlValueAccessor, AfterContentInit, AfterViewChecked {
    protected _render2: Renderer2;
    protected _elementRef: ElementRef;
    protected _changeDetectorRef: ChangeDetectorRef;
    /**
     * 在文本框里的文本非空时，是否显示快速清除按钮，默认为显示。用户单击了清除按钮时，文本框里的文本立即被清空。
     *
     * $demo = input/clearable
     */
    clearable: boolean;
    /**
     * 设置按钮不可交互状态的开关，为true则不可交互，为false则可交互。
     *
     * $demo = input/disabled
     */
    disabled: boolean;
    /**
     * 当用户输入非法时，组件给予样式上的提示，以提升易用性，常常和表单配合使用。
     *
     * $demo = input/valid
     * $demo = form/template-driven
     */
    valid: boolean;
    /**
     * 当用户设置类型为password时，输入内容隐藏为特殊字符。
     *
     * $demo = input/password
     */
    password: boolean;
    readonly type: string;
    private _focusEmitter;
    private _blurEmitter;
    constructor(_render2: Renderer2, _elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef);
    private _propagateChange;
    writeValue(value: any): void;
    registerOnChange(fn: any): void;
    registerOnTouched(fn: any): void;
    private _value;
    /**
     * 文本框中当前的文本
     *
     * $demo = input/valid
     */
    value: string;
    /**
     * 当文本框中的文本发生变化时，组件会发出此事件。
     *
     * $demo = input/value-change
     */
    valueChange: EventEmitter<string>;
    private _placeholder;
    /**
     * 当文本框内无文本时，显示这些文本以提示用户如何输入。
     *
     * $demo = input/valid
     */
    placeholder: string;
    private _inputElement;
    /**
     * 调用此方法可以通过编程方式使得文本获得焦点。
     * 当确信用户需要在文本框中输入时，自动让文本框获得焦点可以提升体验。
     *
     * $demo = input/focus
     */
    focus(): void;
    /**
     * 调用此方法可以通过编程方式选中文本框中的所有文本。
     * 当确信用户需要修改文本框里的文本时，自动选中所有文本可以提升体验。
     *
     * $demo = input/select
     */
    select(): void;
    /**
     * @internal
     */
    _$clearValue(event: any): void;
    private _focused;
    /**
     * 获取文本框是否有焦点
     *
     * $demo = input/focus
     */
    readonly focused: boolean;
    /**
     * @internal
     */
    _$handleFocus(event: FocusEvent): void;
    /**
     * 在单击了清除文本按钮时，是否让文本失去焦点，默认为失去焦点。
     * 一般来说，是否失去焦点关系不大，但是在一些特定场合，却有很大关系。`JigsawTable`的默认单元格编辑渲染就是`JigsawInput`组件，
     * 按照`JigsawTable`的交互逻辑，单元格编辑器一旦失去焦点，就必须退回到单元格显示渲染器。
     * 在这个情况下，用户单击了清除文本按钮时就不能让输入框失去焦点。参考[这个demo]($demo=table/update-column-define)的职位列
     *
     * $demo = table/update-column-define
     */
    blurOnClear: boolean;
    /**
     * @internal
     */
    _$handleBlur(event: FocusEvent): void;
    /**
     * @internal
     */
    _$stopPropagation(event: any): void;
    /**
     * @internal
     */
    _$inputPaddingStyle: {};
    /**
     * 动态计算 input的padding-left 和padding-right (不确定图标的个数, 好空出对应的位置.)
     * 当前计算方法根据图标的个数计算, 默认图标大小为12px , dom大小获取的不准确.
     * @private
     */
    private _setInputPaddingStyle();
    ngAfterContentInit(): void;
    ngAfterViewChecked(): void;
}
export declare class JigsawInputModule {
}