@blox/material/components/text-field/mdc.text-field.directive.d.ts

Material Components for Angular

import { AfterContentInit, ElementRef, OnDestroy, OnInit, Renderer2, EventEmitter } from '@angular/core';
import { NgControl } from '@angular/forms';
import { AbstractMdcInput } from '../abstract/abstract.mdc.input';
import { AbstractMdcRipple } from '../ripple/abstract.mdc.ripple';
import { MdcEventRegistry } from '../../utils/mdc.event.registry';
import { HasId } from '../abstract/mixin.mdc.hasid';
/**
 * Directive for the native input of an `mdcTextField`.
 */
export declare class MdcTextFieldInputDirective extends AbstractMdcInput implements OnInit, OnDestroy {
    _elm: ElementRef;
    private renderer;
    _cntr: NgControl;
    private onDestroy$;
    private _id;
    private _type;
    private _value;
    private _disabled;
    private cachedId;
    constructor(_elm: ElementRef, renderer: Renderer2, _cntr: NgControl);
    ngOnInit(): void;
    ngOnDestroy(): void;
    /**
     * Mirrors the <code>id</code> attribute. If no id is assigned, this directive will
     * assign a unique id by itself. If an <code>mdcFloatingLabel</code> for this text-field
     * is available, the <code>mdcFloatingLabel</code> will automatically be associated
     * (either by a `for` attribute on the label, or by an `aria-labelledby` attribute
     * on this input element).
     */
    get id(): string | null;
    set id(value: string | null);
    /**
     * If set to a value other than false, the text-field will be in disabled state.
     */
    get disabled(): boolean;
    set disabled(value: boolean);
    static ngAcceptInputType_disabled: boolean | '';
    set type(value: string);
    private updateValue;
}
/**
 * Directive for an optional leading or trailing icon on the text-field (see
 * `MdcTextFieldDirective`). An icon before the `mdcTextFieldInput` will be styled
 * as a leading icon. An icon after the `mdcTextFieldInput` will be styles as a
 * trailing icon.
 */
export declare class MdcTextFieldIconDirective implements AfterContentInit, OnDestroy {
    private _rndr;
    _el: ElementRef;
    private _reg;
    /**
     * Event emitted for icon interactions (a click or an 'enter' keypress). When this output is assigned,
     * the icon will also set the `role=button` and `tabindex=0` attributes, unless you give them another
     * explicit value.
     */
    readonly interact: EventEmitter<void>;
    private _tabIndex;
    private _role;
    constructor(_rndr: Renderer2, _el: ElementRef, _reg: MdcEventRegistry);
    ngAfterContentInit(): void;
    ngOnDestroy(): void;
    /**
     * The `tabindex` for icons defaults to `null` (no tabindex set) for icons without
     * subscriptions to the `interact` output, and to `0` for icons that have an `interact`
     * binding. You can override this default, by setting a non-null value for this property.
     */
    get tabindex(): number | null;
    set tabindex(value: number | null);
    static ngAcceptInputType_tabindex: string | number | null;
    /**
     * The `role` attribute for icons defaults to `null` (no role set) for icons without
     * subscriptions to the `interact` output, and to `button` for icons that have an `interact`
     * binding. You can override this default, by setting a non-null value for this property.
     */
    get role(): string | null;
    set role(value: string | null);
}
/**
 * This directive wraps an optional `mdcTextFieldHelperText`. It should be the next sibling of the
 * associated `mdcTextField` if used. See `mdcTextFieldHelperText` for more info.
 */
export declare class MdcTextFieldHelperLineDirective {
}
declare class MdcTextFieldHelperTextDirectiveBase {
}
interface MdcTextFieldHelperTextDirectiveBase extends HasId {
}
/**
 * Directive for an optional helper-text to show supplemental information or validation
 * messages for an <code>mdcTextField</code>. This directive should be wrapped inside an
 * `mdcTextFieldHelperLine` that comes directly after the `mdcTextField` it belongs to.
 * Additionally, you must export it as an <code>mdcHelperText</code>, and
 * assign the exported object to the <code>helperText</code> property of the
 * <code>mdcHelperText</code>. See the examples for hints on how to do this.
 *
 * The `mdcTextFieldInput` of the textfield will get `aria-controls` and `aria-describedby`
 * accessibility attributes that point to the `id` of this helpertext element. If no `id` has
 * been assigned, a unique `id` attribute will automatically be assigned. If the `id` attribute
 * is changed, the aria attributes on the `mdcTextFieldInput` will be updated accordingly.
 */
export declare class MdcTextFieldHelperTextDirective extends MdcTextFieldHelperTextDirectiveBase implements OnInit, AfterContentInit, OnDestroy {
    private _rndr;
    _elm: ElementRef;
    private _validation;
    private _persistent;
    constructor(_rndr: Renderer2, _elm: ElementRef);
    ngOnInit(): void;
    ngAfterContentInit(): void;
    ngOnDestroy(): void;
    /**
     * If set to a value other than false, the helper text is treated as a
     * validation message, and only shown when the input is invalid.
     */
    set validation(value: boolean);
    static ngAcceptInputType_validation: boolean | '';
    /**
     * If set to a value other than false, the helper text is always visible.
     * Otherwise the helper text will only be shown when the input has focus
     * (or if `validation` is set, when the input is invalid).
     */
    set persistent(value: boolean);
    static ngAcceptInputType_persistent: boolean | '';
}
/**
 * Material design text-field. Text fields can be filled or outlined.
 *
 * Filled text-fields should have the following child directives:
 * * `mdcTextFieldIcon` (optional leading icon)
 * * `mdcTextFieldInput` (required, the native input)
 * * `mdcTextFieldIcon` (optional trailing icon)
 * * `mdcFloatingLabel` (optional floating label)
 *
 * Outlined text-fields should have the following child directives:
 * * `mdcTextFieldIcon` (optional leading icon)
 * * `mdcTextFieldInput` (required, the native input)
 * * `mdcTextFieldIcon` (optional trailing icon)
 * * `mdcNotchedOutline` (the outline, which can also contain an optional `mdcFloatingLabel`)
 *
 * Addditionally the text-field can be followed by an `mdcTextFieldHelperLine` containing an
 * `mdcHelperText`.
 */
export declare class MdcTextFieldDirective extends AbstractMdcRipple implements AfterContentInit, OnDestroy {
    private renderer;
    private root;
    private registry;
    private onDestroy$;
    private onInputChange$;
    private onHelperTextChange$;
    private _leadingIcon;
    private _trailingIcon;
    private _helperText;
    private _bottomLineElm;
    private _valid;
    private mdcLineRippleAdapter;
    private mdcAdapter;
    private bottomLineFoundation;
    private foundation;
    constructor(renderer: Renderer2, root: ElementRef, registry: MdcEventRegistry, doc: any);
    ngAfterContentInit(): void;
    ngOnDestroy(): void;
    private initComponent;
    private destroyComponent;
    private reconstructComponent;
    private initLineRipple;
    private destroyLineRipple;
    private recomputeOutline;
    private initIcons;
    private computeLeadingIcon;
    private computeTrailingIcon;
    private previousElement;
    private attachLabelToInput;
    private attachHelperTextToInput;
    private subscribeInputChanges;
    /**
     * The <code>valid</code> property provides a way to override the validity checking of the
     * underlying angular form control or native input. A value of true or false will make the
     * text-field validity styling based on this value. A value of <code>null</code>, or
     * <code>undefined</code> will reset the validity styling to the state of the underlying
     * angular form control or native input.
     *
     * For most use cases messing with this input is not be needed.
     * When the input/textarea is an ngControl, the mdcTextField is already aware of that,
     * and is already using the 'valid' property of that control.
     * However, in some specific cases, binding to <code>valid</code> can help. Example:
     * When you want the mdcTextField to go to 'invalid' state only when the underlying
     * control is invalid AND that control's value is changed, you can bind as follows:
     * <code>valid="myControl.valid || !myControl.dirty"</code>.
     */
    set valid(value: boolean);
    static ngAcceptInputType_valid: boolean | '';
    /**
     * Assign an <code>mdcTextFieldHelperText</code> (exported as <code>mdcHelperText</code>) to this
     * input to add a helper-text or validation message to the text-field. See the examples for hints
     * on how to do this.
     */
    get helperText(): MdcTextFieldHelperTextDirective | null;
    set helperText(helperText: MdcTextFieldHelperTextDirective | null);
    private get _input();
    private get _floatingLabel();
    private get _outline();
}
export declare const TEXT_FIELD_DIRECTIVES: (typeof MdcTextFieldInputDirective | typeof MdcTextFieldIconDirective | typeof MdcTextFieldHelperLineDirective | typeof MdcTextFieldHelperTextDirective | typeof MdcTextFieldDirective)[];
export {};