@covalent/dynamic-forms
Version: 
Teradata UI Platform Dynamic Forms Module
351 lines (337 loc) • 14.5 kB
TypeScript
import * as i0 from '@angular/core';
import { Type, Provider, TemplateRef, ChangeDetectorRef, OnInit, OnChanges, ViewContainerRef, SimpleChanges, AfterContentInit, OnDestroy, QueryList } from '@angular/core';
import { ValidatorFn, UntypedFormControl, AbstractControl, UntypedFormGroup } from '@angular/forms';
import { CdkPortal } from '@angular/cdk/portal';
import { IControlValueAccessor } from '@covalent/core/common';
declare enum TdDynamicType {
    Text = "text",
    Boolean = "boolean",
    Number = "number",
    Array = "array",
    Date = "date"
}
declare enum TdDynamicElement {
    Input = "input",
    Datepicker = "datepicker",
    Password = "password",
    Textarea = "textarea",
    Slider = "slider",
    SlideToggle = "slide-toggle",
    Checkbox = "checkbox",
    Select = "select",
    FileInput = "file-input"
}
interface ITdDynamicElementValidator {
    validator: ValidatorFn;
}
interface ITdDynamicElementCustomConfig {
    [name: string]: any;
}
interface ITdDynamicElementConfig {
    label?: string;
    name: string;
    hint?: string;
    type: TdDynamicType | TdDynamicElement | Type<any>;
    required?: boolean;
    disabled?: boolean;
    min?: any;
    max?: any;
    minLength?: any;
    maxLength?: any;
    selections?: string[] | {
        value: any;
        label: string;
    }[];
    multiple?: boolean;
    default?: any;
    flex?: number;
    validators?: ITdDynamicElementValidator[];
    customConfig?: ITdDynamicElementCustomConfig;
    placeholder?: string;
}
declare const DYNAMIC_ELEMENT_NAME_REGEX: RegExp;
declare class TdDynamicFormsService {
    /**
     * Method to validate if the [name] is a proper element name.
     * Throws error if name is not valid.
     */
    validateDynamicElementName(name: string): void;
    /**
     * Gets component to be rendered depending on [TdDynamicElement | TdDynamicType]
     * Throws error if it does not exists or not supported.
     */
    getDynamicElement(element: TdDynamicElement | TdDynamicType | Type<any> | undefined): any;
    /**
     * Creates form control for element depending [ITdDynamicElementConfig] properties.
     */
    createFormControl(config: ITdDynamicElementConfig): UntypedFormControl;
    /**
     * Creates form validationdepending [ITdDynamicElementConfig] properties.
     */
    createValidators(config: ITdDynamicElementConfig): ValidatorFn | null;
    static ɵfac: i0.ɵɵFactoryDeclaration<TdDynamicFormsService, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<TdDynamicFormsService>;
}
declare function DYNAMIC_FORMS_PROVIDER_FACTORY(parent: TdDynamicFormsService): TdDynamicFormsService;
declare const DYNAMIC_FORMS_PROVIDER: Provider;
declare class TdDynamicElementBase {
    _changeDetectorRef: ChangeDetectorRef;
    constructor(_changeDetectorRef: ChangeDetectorRef);
}
declare const _TdDynamicElementMixinBase: (new (...args: any[]) => IControlValueAccessor) & typeof TdDynamicElementBase;
declare class TdDynamicFormsErrorTemplateDirective extends CdkPortal {
    templateRef: TemplateRef<any>;
    tdDynamicFormsError?: string;
    constructor();
    static ɵfac: i0.ɵɵFactoryDeclaration<TdDynamicFormsErrorTemplateDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<TdDynamicFormsErrorTemplateDirective, "[tdDynamicFormsError]ng-template", never, { "tdDynamicFormsError": { "alias": "tdDynamicFormsError"; "required": false; }; }, {}, never, never, true, never>;
}
declare class TdDynamicElementDirective {
    viewContainer: ViewContainerRef;
    static ɵfac: i0.ɵɵFactoryDeclaration<TdDynamicElementDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<TdDynamicElementDirective, "[tdDynamicContainer]", never, {}, {}, never, never, true, never>;
}
declare class TdDynamicElementComponent extends _TdDynamicElementMixinBase implements IControlValueAccessor, OnInit, OnChanges {
    private _injector;
    private _dynamicFormsService;
    private _instance;
    /**
     * Sets form control of the element.
     */
    dynamicControl: AbstractControl;
    /**
     * Sets label to be displayed.
     */
    label: string;
    /**
     * Sets hint to be displayed.
     */
    hint?: string | undefined;
    /**
     * Sets name to be displayed as attribute.
     */
    name: string;
    /**
     * Sets type or element of element to be rendered.
     * Throws error if does not exist or no supported.
     */
    type?: TdDynamicElement | TdDynamicType | Type<any>;
    /**
     * Sets required validation checkup (if supported by element).
     */
    required?: boolean | string | undefined;
    /**
     * Sets min validation checkup (if supported by element).
     */
    min?: number;
    /**
     * Sets max validation checkup (if supported by element).
     */
    max?: number;
    /**
     * Sets minLength validation checkup (if supported by element).
     */
    minLength?: number;
    /**
     * Sets maxLength validation checkup (if supported by element).
     */
    maxLength?: number;
    /**
     * Sets selections for array elements (if supported by element).
     */
    selections?: any[];
    /**
     * Sets multiple property for array elements (if supported by element).
     */
    multiple?: boolean;
    /**
     * Sets any additional properties on custom component.
     */
    customConfig?: ITdDynamicElementCustomConfig;
    /**
     * Sets error message template so it can be injected into dynamic components.
     */
    errorMessageTemplate: TemplateRef<any> | undefined;
    /**
     * Sets the placeholder message
     */
    placeholder?: string | undefined;
    childElement: TdDynamicElementDirective;
    get maxAttr(): any;
    get minAttr(): any;
    constructor();
    ngOnInit(): void;
    /**
     * Reassign any inputs that have changed
     */
    ngOnChanges(changes: SimpleChanges): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<TdDynamicElementComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<TdDynamicElementComponent, "td-dynamic-element", never, { "dynamicControl": { "alias": "dynamicControl"; "required": false; }; "label": { "alias": "label"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "name": { "alias": "name"; "required": false; }; "type": { "alias": "type"; "required": false; }; "required": { "alias": "required"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "minLength": { "alias": "minLength"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "selections": { "alias": "selections"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "customConfig": { "alias": "customConfig"; "required": false; }; "errorMessageTemplate": { "alias": "errorMessageTemplate"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; }, {}, never, never, true, never>;
}
declare class TdDynamicFormsComponent implements AfterContentInit, OnDestroy {
    private _formBuilder;
    private _dynamicFormsService;
    private _changeDetectorRef;
    private _renderedElements;
    private _elements;
    private _templateMap;
    private _destroy$;
    private _destroyControl$;
    _errorTemplates: QueryList<TdDynamicFormsErrorTemplateDirective>;
    dynamicForm: UntypedFormGroup;
    /**
     * elements: ITdDynamicElementConfig[]
     * JS Object that will render the elements depending on its config.
     * [name] property is required.
     */
    set elements(elements: ITdDynamicElementConfig[]);
    get elements(): ITdDynamicElementConfig[];
    /**
     * Getter property for dynamic [FormGroup].
     */
    get form(): UntypedFormGroup;
    /**
     * Getter property for [valid] of dynamic [FormGroup].
     */
    get valid(): boolean;
    /**
     * Getter property for [value] of dynamic [FormGroup].
     */
    get value(): any;
    /**
     * Getter property for [errors] of dynamic [FormGroup].
     */
    get errors(): {
        [name: string]: any;
    };
    /**
     * Getter property for [controls] of dynamic [FormGroup].
     */
    get controls(): {
        [key: string]: AbstractControl;
    };
    constructor();
    ngAfterContentInit(): void;
    ngOnDestroy(): void;
    /**
     * Refreshes the form and rerenders all validator/element modifications.
     */
    refresh(): void;
    /**
     * Getter method for error template references
     */
    getErrorTemplateRef(name: string): TemplateRef<any> | undefined;
    /**
     * Loads error templates and sets them in a map for faster access.
     */
    private _updateErrorTemplates;
    private _rerenderElements;
    private _clearRemovedElements;
    private _subscribeToControlStatusChanges;
    static ɵfac: i0.ɵɵFactoryDeclaration<TdDynamicFormsComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<TdDynamicFormsComponent, "td-dynamic-forms", never, { "elements": { "alias": "elements"; "required": false; }; }, {}, ["_errorTemplates"], ["*"], true, never>;
}
declare class TdDynamicInputComponent {
    control: UntypedFormControl;
    label: string;
    hint: string;
    type: string;
    required: boolean;
    name: string;
    min?: number;
    max?: number;
    minLength?: number;
    maxLength?: number;
    errorMessageTemplate: TemplateRef<any>;
    placeholder: string;
    static ɵfac: i0.ɵɵFactoryDeclaration<TdDynamicInputComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<TdDynamicInputComponent, "td-dynamic-input", never, {}, {}, never, never, true, never>;
}
declare class TdDynamicFileInputComponent {
    control: UntypedFormControl;
    required: boolean;
    label: string;
    name: string;
    hint: string;
    errorMessageTemplate: TemplateRef<any>;
    placeholder: string;
    _handlefileDrop(value: any): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<TdDynamicFileInputComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<TdDynamicFileInputComponent, "td-dynamic-file-input", never, {}, {}, never, never, true, never>;
}
declare class TdDynamicTextareaComponent {
    control: UntypedFormControl;
    label: string;
    hint: string;
    name: string;
    required: boolean;
    errorMessageTemplate: TemplateRef<any>;
    placeholder: string;
    static ɵfac: i0.ɵɵFactoryDeclaration<TdDynamicTextareaComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<TdDynamicTextareaComponent, "td-dynamic-textarea", never, {}, {}, never, never, true, never>;
}
declare class TdDynamicSlideToggleComponent {
    control: UntypedFormControl;
    label: string;
    name: string;
    hint: string;
    required: boolean;
    static ɵfac: i0.ɵɵFactoryDeclaration<TdDynamicSlideToggleComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<TdDynamicSlideToggleComponent, "td-dynamic-slide-toggle", never, {}, {}, never, never, true, never>;
}
declare class TdDynamicCheckboxComponent {
    control: UntypedFormControl;
    label: string;
    name: string;
    hint: string;
    required: boolean;
    static ɵfac: i0.ɵɵFactoryDeclaration<TdDynamicCheckboxComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<TdDynamicCheckboxComponent, "td-dynamic-checkbox", never, {}, {}, never, never, true, never>;
}
declare class TdDynamicSliderComponent {
    private _changeDetectorRef;
    control: UntypedFormControl;
    label: string;
    required: boolean;
    name: string;
    hint: string;
    min?: number;
    max?: number;
    _handleBlur(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<TdDynamicSliderComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<TdDynamicSliderComponent, "td-dynamic-slider", never, {}, {}, never, never, true, never>;
}
declare class TdDynamicSelectComponent {
    control: UntypedFormControl;
    label: string;
    hint: string;
    name: string;
    required: boolean;
    selections?: any[];
    multiple?: boolean;
    errorMessageTemplate: TemplateRef<any>;
    placeholder: string;
    static ɵfac: i0.ɵɵFactoryDeclaration<TdDynamicSelectComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<TdDynamicSelectComponent, "td-dynamic-select", never, {}, {}, never, never, true, never>;
}
declare class TdDynamicDatepickerComponent {
    control: UntypedFormControl;
    label: string;
    hint: string;
    name: string;
    type?: string;
    required: boolean;
    min?: number;
    max?: number;
    errorMessageTemplate: TemplateRef<any>;
    placeholder: string;
    static ɵfac: i0.ɵɵFactoryDeclaration<TdDynamicDatepickerComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<TdDynamicDatepickerComponent, "td-dynamic-datepicker", never, {}, {}, never, never, true, never>;
}
declare class CovalentDynamicFormsModule {
    static ɵfac: i0.ɵɵFactoryDeclaration<CovalentDynamicFormsModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<CovalentDynamicFormsModule, never, [typeof TdDynamicFormsComponent, typeof TdDynamicElementComponent, typeof TdDynamicElementDirective, typeof TdDynamicFormsErrorTemplateDirective, typeof TdDynamicInputComponent, typeof TdDynamicFileInputComponent, typeof TdDynamicTextareaComponent, typeof TdDynamicSlideToggleComponent, typeof TdDynamicCheckboxComponent, typeof TdDynamicSliderComponent, typeof TdDynamicSelectComponent, typeof TdDynamicDatepickerComponent], [typeof TdDynamicFormsComponent, typeof TdDynamicElementComponent, typeof TdDynamicElementDirective, typeof TdDynamicFormsErrorTemplateDirective, typeof TdDynamicInputComponent, typeof TdDynamicFileInputComponent, typeof TdDynamicTextareaComponent, typeof TdDynamicSlideToggleComponent, typeof TdDynamicCheckboxComponent, typeof TdDynamicSliderComponent, typeof TdDynamicSelectComponent, typeof TdDynamicDatepickerComponent]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<CovalentDynamicFormsModule>;
}
export { CovalentDynamicFormsModule, DYNAMIC_ELEMENT_NAME_REGEX, DYNAMIC_FORMS_PROVIDER, DYNAMIC_FORMS_PROVIDER_FACTORY, TdDynamicCheckboxComponent, TdDynamicDatepickerComponent, TdDynamicElement, TdDynamicElementBase, TdDynamicElementComponent, TdDynamicElementDirective, TdDynamicFileInputComponent, TdDynamicFormsComponent, TdDynamicFormsErrorTemplateDirective, TdDynamicFormsService, TdDynamicInputComponent, TdDynamicSelectComponent, TdDynamicSlideToggleComponent, TdDynamicSliderComponent, TdDynamicTextareaComponent, TdDynamicType, _TdDynamicElementMixinBase };
export type { ITdDynamicElementConfig, ITdDynamicElementCustomConfig, ITdDynamicElementValidator };