@alyle/ui/field/field.d.ts

Minimal Design, a set of components for Angular

import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, OnInit, Renderer2, QueryList, NgZone, OnDestroy, DoCheck, InjectionToken } from '@angular/core';
import { LyTheme2, ThemeVariables, StyleCollection, LyClasses, StyleTemplate, StyleRenderer, ThemeRef, WithStyles } from '@alyle/ui';
import { LyLabel } from './label';
import { LyPlaceholder } from './placeholder';
import { LyHint } from './hint';
import { LyPrefix } from './prefix';
import { LySuffix } from './suffix';
import { Subject } from 'rxjs';
import { NgControl, NgForm, FormGroupDirective } from '@angular/forms';
import { LyError } from './error';
import { LyFieldControlBase } from './field-control-base';
import { Platform } from '@angular/cdk/platform';
import { LyDisplayWith } from './display-with';
import { BooleanInput } from '@angular/cdk/coercion';
import { AutofillMonitor } from '@angular/cdk/text-field';
import * as i0 from "@angular/core";
export interface LyFieldTheme {
    /** Styles for Field Component */
    root?: StyleCollection<((classes: LyClasses<typeof STYLES>) => StyleTemplate)> | ((classes: LyClasses<typeof STYLES>) => StyleTemplate);
    appearance?: {
        standard?: StyleCollection<((classes: LyClasses<typeof STYLES>) => StyleTemplate)> | ((classes: LyClasses<typeof STYLES>) => StyleTemplate);
        filled?: StyleCollection<((classes: LyClasses<typeof STYLES>) => StyleTemplate)> | ((classes: LyClasses<typeof STYLES>) => StyleTemplate);
        outlined?: StyleCollection<((classes: LyClasses<typeof STYLES>) => StyleTemplate)> | ((classes: LyClasses<typeof STYLES>) => StyleTemplate);
        [name: string]: StyleCollection<((classes: LyClasses<typeof STYLES>) => StyleTemplate)> | ((classes: LyClasses<typeof STYLES>) => StyleTemplate) | undefined;
    };
}
export interface LyFieldVariables {
    field?: LyFieldTheme;
}
export interface LyFieldDefaultOptions {
    appearance?: string;
    /**
     * Whether the label is floating.
     * false (default): The label will only float when needed
     * true: The label will always be floating
     */
    floatingLabel?: boolean;
    /**
     * Whether the hint will always show.
     * false (default): The hint will only be shown when the text is focused
     * true: The hint will always show
     */
    persistentHint?: boolean;
    /**
     * Floating label size
     * Default: 0.75
     */
    floatingLabelSize?: number;
    /**
     * Whether the required marker should be hidden.
     */
    hideRequiredMarker?: boolean;
}
export declare const LY_FIELD_DEFAULT_OPTIONS: InjectionToken<LyFieldDefaultOptions>;
export declare const STYLE_SELECT_ARROW: (_className: string) => string;
export declare const STYLES: (theme: ThemeVariables & LyFieldVariables, ref: ThemeRef) => {
    $priority: number;
    $global: (_className: string) => string;
    root: () => (_className: string) => string;
    animations: () => (_className: string) => string;
    container: (_className: string) => string;
    fieldset: (_className: string) => string;
    fieldsetSpan: (_className: string) => string;
    prefix: (_className: string) => string;
    infix: (_className: string) => string;
    suffix: (_className: string) => string;
    labelContainer: (_className: string) => string;
    labelSpacingStart: any;
    labelCenter: (_className: string) => string;
    labelSpacingEnd: (_className: string) => string;
    label: (_className: string) => string;
    labelSpan: (_className: string) => string;
    isFloatingLabel: any;
    floatingLabel: any;
    placeholder: (_className: string) => string;
    focused: () => (_className: string) => string;
    inputNative: (_className: string) => string;
    /** Is used to hide the input when `displayWith` is shown */
    _hiddenInput: (_className: string) => string;
    displayWith: (_className: string) => string;
    hintContainer: (_className: string) => string;
    disabled: () => (_className: string) => string;
    hint: any;
    fieldRequiredMarker: any;
    error: any;
    errorState: () => (_className: string) => string;
    hintAfter: (_className: string) => string;
    hintBefore: (_className: string) => string;
    selectArrow: () => (_className: string) => string;
};
/**
 * @dynamic
 */
export declare class LyField implements WithStyles, OnInit, AfterContentInit, AfterViewInit, OnDestroy {
    private _renderer;
    private _el;
    private _theme;
    private _cd;
    private _ngZone;
    readonly sRenderer: StyleRenderer;
    private _platform;
    private _defaults;
    /**
     * styles
     * @docs-private
     */
    readonly classes: LyClasses<(theme: ThemeVariables & LyFieldVariables, ref: ThemeRef) => {
        $priority: number;
        $global: (_className: string) => string;
        root: () => (_className: string) => string;
        animations: () => (_className: string) => string;
        container: (_className: string) => string;
        fieldset: (_className: string) => string;
        fieldsetSpan: (_className: string) => string;
        prefix: (_className: string) => string;
        infix: (_className: string) => string;
        suffix: (_className: string) => string;
        labelContainer: (_className: string) => string;
        labelSpacingStart: any;
        labelCenter: (_className: string) => string;
        labelSpacingEnd: (_className: string) => string;
        label: (_className: string) => string;
        labelSpan: (_className: string) => string;
        isFloatingLabel: any;
        floatingLabel: any;
        placeholder: (_className: string) => string;
        focused: () => (_className: string) => string;
        inputNative: (_className: string) => string;
        /** Is used to hide the input when `displayWith` is shown */
        _hiddenInput: (_className: string) => string;
        displayWith: (_className: string) => string;
        hintContainer: (_className: string) => string;
        disabled: () => (_className: string) => string;
        hint: any;
        fieldRequiredMarker: any;
        error: any;
        errorState: () => (_className: string) => string;
        hintAfter: (_className: string) => string;
        hintBefore: (_className: string) => string;
        selectArrow: () => (_className: string) => string;
    }>;
    protected _appearance: string;
    protected _appearanceClass: string;
    protected _color: string;
    protected _colorClass: string;
    protected _isFloating: boolean;
    protected _floatingLabel: boolean;
    private _destroyed;
    private _fielsetSpanClass;
    private _fullWidth;
    private _fullWidthClass?;
    private _updateFielsetSpanOnStable;
    _container: ElementRef<HTMLDivElement>;
    _labelContainer: ElementRef<HTMLDivElement>;
    _labelContainer2: ElementRef<HTMLDivElement>;
    _labelSpan: ElementRef<HTMLDivElement>;
    _prefixContainer: ElementRef<HTMLDivElement>;
    _suffixContainer: ElementRef<HTMLDivElement>;
    _controlNonStatic?: LyFieldControlBase;
    _controlStatic: LyFieldControlBase<any>;
    get _control(): LyFieldControlBase<any>;
    _placeholderChild: LyPlaceholder;
    _labelChild: LyLabel;
    readonly _displayWithChild: QueryList<LyDisplayWith>;
    _hintChildren: QueryList<LyHint>;
    _prefixChildren: QueryList<LyPrefix>;
    _suffixChildren: QueryList<LySuffix>;
    _errorChildren: QueryList<LyError>;
    get errorState(): boolean;
    get displayWithStatus(): boolean;
    /** Whether the required marker should be hidden. */
    get hideRequiredMarker(): boolean;
    set hideRequiredMarker(value: boolean);
    private _hideRequiredMarker;
    persistentHint: boolean;
    /**
     * Floating label size
     * Default: 0.75
     */
    floatingLabelSize: number | null;
    set fullWidth(val: BooleanInput);
    get fullWidth(): boolean;
    /** Whether the label is floating. */
    set floatingLabel(val: BooleanInput);
    get floatingLabel(): boolean;
    /** Theme color for the component. */
    color: string;
    /** The field appearance style. */
    set appearance(val: string | null);
    onFocus(): void;
    constructor(_renderer: Renderer2, _el: ElementRef, _theme: LyTheme2, _cd: ChangeDetectorRef, _ngZone: NgZone, sRenderer: StyleRenderer, _platform: Platform, _defaults: LyFieldDefaultOptions);
    ngOnInit(): void;
    ngAfterContentInit(): void;
    ngAfterViewInit(): void;
    ngOnDestroy(): void;
    _updateFielsetSpan(): void;
    /** @ignore */
    _isLabel(): boolean;
    /** @ignore */
    _isPlaceholder(): boolean;
    /** @ignore */
    _isEmpty(): boolean;
    private _updateFloatingLabel;
    private _updateDisplayWith;
    private _markForCheck;
    _getHostElement(): any;
    static ngAcceptInputType_hideRequiredMarker: BooleanInput;
    static ɵfac: i0.ɵɵFactoryDeclaration<LyField, [null, null, null, null, null, null, null, { optional: true; }]>;
    static ɵcmp: i0.ɵɵComponentDeclaration<LyField, "ly-field", ["lyFormField"], { "hideRequiredMarker": { "alias": "hideRequiredMarker"; "required": false; }; "persistentHint": { "alias": "persistentHint"; "required": false; }; "floatingLabelSize": { "alias": "floatingLabelSize"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "floatingLabel": { "alias": "floatingLabel"; "required": false; }; "color": { "alias": "color"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; }, {}, ["_controlNonStatic", "_controlStatic", "_placeholderChild", "_labelChild", "_displayWithChild", "_hintChildren", "_prefixChildren", "_suffixChildren", "_errorChildren"], ["[lyPrefix]", "ly-display-with", "*", "[lySuffix]", "ly-error", "ly-hint", "ly-label", "ly-placeholder"], false, never>;
}
export declare class LyNativeControl implements LyFieldControlBase, OnInit, AfterViewInit, DoCheck, OnDestroy {
    private _theme;
    readonly sRenderer: StyleRenderer;
    private _el;
    private _renderer;
    private _field;
    /** @docs-private */
    ngControl: NgControl;
    private _parentForm;
    private _parentFormGroup;
    private _autofillMonitor;
    private _platform;
    protected _disabled: boolean;
    protected _required: boolean;
    protected _placeholder: string;
    readonly stateChanges: Subject<void>;
    private _hasDisabledClass?;
    private _errorClass?;
    private _cursorClass;
    private _isSelectInput;
    private _form;
    _focused: boolean;
    errorState: boolean;
    autofilled: boolean;
    _onInput(): void;
    _onBlur(): void;
    _onFocus(): void;
    /** @ignore */
    set value(val: any);
    get value(): any;
    /** Whether the input is disabled. */
    set disabled(val: BooleanInput);
    get disabled(): boolean;
    set required(value: BooleanInput);
    get required(): boolean;
    set placeholder(val: string);
    get placeholder(): string;
    get focused(): boolean;
    get empty(): boolean;
    get floatingLabel(): boolean;
    constructor(_theme: LyTheme2, sRenderer: StyleRenderer, _el: ElementRef<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>, _renderer: Renderer2, _field: LyField, 
    /** @docs-private */
    ngControl: NgControl, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, _autofillMonitor: AutofillMonitor, _platform: Platform);
    ngOnInit(): void;
    ngDoCheck(): void;
    ngAfterViewInit(): void;
    ngOnDestroy(): void;
    /** @docs-private */
    onContainerClick(_e: MouseEvent): void;
    /** Focuses the input. */
    focus(): void;
    _getHostElement(): HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
    private _hasLabelSelectionOption;
    static ɵfac: i0.ɵɵFactoryDeclaration<LyNativeControl, [null, null, null, null, { optional: true; }, { optional: true; self: true; }, { optional: true; }, { optional: true; }, null, null]>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<LyNativeControl, "input[lyInput], textarea[lyInput], input[lyNativeControl], textarea[lyNativeControl], select[lyNativeControl]", ["LyNativeControl"], { "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; }, {}, never, never, false, never>;
}