angular-dynamic-forms-lite/fesm5/angular-dynamic-forms-lite.js

Efficient dynamic and customizable Angular 7+ forms.

import { __read, __extends, __assign, __spread, __values } from 'tslib';
import { Directive, ViewContainerRef, InjectionToken, EventEmitter, Injectable, ComponentFactoryResolver, Injector, Optional, Inject, ɵɵdefineInjectable, ɵɵinject, INJECTOR, Component, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
import { bufferCount, map, filter } from 'rxjs/operators';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var FormRootDirective = /** @class */ (function () {
    function FormRootDirective(viewContainerRef) {
        this.viewContainerRef = viewContainerRef;
    }
    /**
     * @param {?} index
     * @return {?}
     */
    FormRootDirective.prototype.getViewRef = /**
     * @param {?} index
     * @return {?}
     */
    function (index) {
        return this.viewContainerRef.get(index);
    };
    /**
     * @return {?}
     */
    FormRootDirective.prototype.getViewRefs = /**
     * @return {?}
     */
    function () {
        /** @type {?} */
        var viewRefs = [];
        for (var i = 0; i < this.getSize(); i++) {
            viewRefs.push(this.viewContainerRef.get(i));
        }
        return viewRefs;
    };
    /**
     * @param {?} viewRef
     * @return {?}
     */
    FormRootDirective.prototype.containsViewRef = /**
     * @param {?} viewRef
     * @return {?}
     */
    function (viewRef) {
        return this.viewContainerRef.indexOf(viewRef) !== -1;
    };
    /**
     * @return {?}
     */
    FormRootDirective.prototype.getSize = /**
     * @return {?}
     */
    function () {
        return this.viewContainerRef.length;
    };
    /**
     * @return {?}
     */
    FormRootDirective.prototype.clearView = /**
     * @return {?}
     */
    function () {
        this.viewContainerRef.clear();
    };
    FormRootDirective.decorators = [
        { type: Directive, args: [{
                    selector: "[form-root], form-root"
                },] }
    ];
    /** @nocollapse */
    FormRootDirective.ctorParameters = function () { return [
        { type: ViewContainerRef }
    ]; };
    return FormRootDirective;
}());
if (false) {
    /** @type {?} */
    FormRootDirective.prototype.viewContainerRef;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/** @type {?} */
var FIELD_METADATA = new InjectionToken("metadata");
/** @type {?} */
var FIELD_FORM_CONTROL = new InjectionToken("form control");
/** @type {?} */
var FIELD_DYNAMIC_CONTROLLER = new InjectionToken("dynamic controller");
/** @type {?} */
var FIELD_NAME = new InjectionToken("form field name");
var FormFieldInjector = /** @class */ (function () {
    function FormFieldInjector(_parentInjector, _additionalTokens) {
        this._parentInjector = _parentInjector;
        this._additionalTokens = _additionalTokens;
    }
    /**
     * @param {?} token
     * @param {?=} notFoundValue
     * @param {?=} flags
     * @return {?}
     */
    FormFieldInjector.prototype.get = /**
     * @param {?} token
     * @param {?=} notFoundValue
     * @param {?=} flags
     * @return {?}
     */
    function (token, notFoundValue, flags) {
        /** @type {?} */
        var value = this._additionalTokens.get(token);
        return value !== undefined ? value : this._parentInjector.get(token, notFoundValue, flags);
    };
    return FormFieldInjector;
}());
if (false) {
    /**
     * @type {?}
     * @private
     */
    FormFieldInjector.prototype._parentInjector;
    /**
     * @type {?}
     * @private
     */
    FormFieldInjector.prototype._additionalTokens;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/** @type {?} */
var DEFAULT_SUB_TYPE = "DEFAULT";
/** @enum {string} */
var DynamicFormType = {
    /**
     * Number form type
     */
    GROUP: "GROUP",
    /**
     * Array form type
     */
    ARRAY: "ARRAY",
    /**
     * Single form type
     */
    SINGLE: "SINGLE",
    /**
     * Hidden form type
     */
    HIDDEN: "HIDDEN",
};
/**
 * @param {?} value
 * @return {?}
 */
function isDynamicFieldType(value) {
    return value in DynamicFormType;
}
/** @type {?} */
var DEFAULT_FORM_COMPONENTS = new InjectionToken("default form components");

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * Describes a form field using its type and sub type.
 */
var  /**
 * Describes a form field using its type and sub type.
 */
SubType = /** @class */ (function () {
    function SubType(type, subType) {
        if (type === void 0) { type = DynamicFormType.SINGLE; }
        if (subType === void 0) { subType = DEFAULT_SUB_TYPE; }
        this.type = type;
        this.subType = subType;
    }
    /**
     * @param {?} type
     * @param {?=} subType
     * @return {?}
     */
    SubType.of = /**
     * @param {?} type
     * @param {?=} subType
     * @return {?}
     */
    function (type, subType) {
        return new SubType(type, subType);
    };
    /**
     * @param {?} fieldType
     * @return {?}
     */
    SubType.toSubType = /**
     * @param {?} fieldType
     * @return {?}
     */
    function (fieldType) {
        return fieldType instanceof SubType ? fieldType : SubType.of(fieldType);
    };
    return SubType;
}());
if (false) {
    /** @type {?} */
    SubType.prototype.type;
    /** @type {?} */
    SubType.prototype.subType;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @record
 * @template M, T, S
 */
function CreateFormContextOptions() { }
if (false) {
    /** @type {?|undefined} */
    CreateFormContextOptions.prototype.initialValue;
    /** @type {?|undefined} */
    CreateFormContextOptions.prototype.formControl;
    /** @type {?} */
    CreateFormContextOptions.prototype.setting;
    /** @type {?} */
    CreateFormContextOptions.prototype.settings;
}
/**
 * @record
 * @template T, S
 */
function FieldFactory() { }
if (false) {
    /**
     * @template M
     * @param {?} params
     * @return {?}
     */
    FieldFactory.prototype.create = function (params) { };
    /**
     * @param {?} formRoot
     * @param {?} root
     * @return {?}
     */
    FieldFactory.prototype.render = function (formRoot, root) { };
    /**
     * @param {?} context
     * @return {?}
     */
    FieldFactory.prototype.updateChildren = function (context) { };
}
var ParentFieldFactory = /** @class */ (function () {
    function ParentFieldFactory(factories, componentFactoryResolver, injector, formBuilder, settings) {
        this.factories = factories;
        this.componentFactoryResolver = componentFactoryResolver;
        this.injector = injector;
        this.formBuilder = formBuilder;
        this.settings = settings;
    }
    /**
     * @template M
     * @param {?} params
     * @return {?}
     */
    ParentFieldFactory.prototype.create = /**
     * @template M
     * @param {?} params
     * @return {?}
     */
    function (params) {
        return this.getFactory(params.setting).create(params);
    };
    /**
     * @param {?} formRoot
     * @param {?} root
     * @return {?}
     */
    ParentFieldFactory.prototype.render = /**
     * @param {?} formRoot
     * @param {?} root
     * @return {?}
     */
    function (formRoot, root) {
        return this.getFactory(root.setting).render(formRoot, root);
    };
    /**
     * @param {?} context
     * @return {?}
     */
    ParentFieldFactory.prototype.updateChildren = /**
     * @param {?} context
     * @return {?}
     */
    function (context) {
        return this.getFactory(context.setting).updateChildren(context);
    };
    /**
     * @template M, H
     * @param {?} formControl
     * @param {?} setting
     * @param {?} value
     * @param {?} dynamicController
     * @return {?}
     */
    ParentFieldFactory.prototype.resolveComponent = /**
     * @template M, H
     * @param {?} formControl
     * @param {?} setting
     * @param {?} value
     * @param {?} dynamicController
     * @return {?}
     */
    function (formControl, setting, value, dynamicController) {
        /** @type {?} */
        var componentFactory;
        try {
            componentFactory = this.componentFactoryResolver.resolveComponentFactory(setting.component);
        }
        catch (e) {
            console.error("Cannot resolve component factory for " + setting.name + ". " + (setting.component ? "" : "Component is undefined."));
            throw e;
        }
        /** @type {?} */
        var additionalTokens = new WeakMap();
        additionalTokens.set(FIELD_METADATA, setting.metadata || {});
        additionalTokens.set(FIELD_FORM_CONTROL, formControl);
        additionalTokens.set(FIELD_DYNAMIC_CONTROLLER, dynamicController);
        additionalTokens.set(FIELD_NAME, setting.name);
        /** @type {?} */
        var dynamicInjector = new FormFieldInjector(this.injector, additionalTokens);
        /** @type {?} */
        var componentRef = componentFactory.create(dynamicInjector);
        dynamicController.componentRef = componentRef;
        this.patchAsyncChangeDetection(formControl, componentRef.changeDetectorRef);
        return (/** @type {?} */ ({
            initialValue: value,
            formControl: formControl,
            setting: setting,
            settings: this.settings,
            componentRef: componentRef,
            children: []
        }));
    };
    /**
     * @private
     * @param {?} formControl
     * @param {?} cdr
     * @return {?}
     */
    ParentFieldFactory.prototype.patchAsyncChangeDetection = /**
     * @private
     * @param {?} formControl
     * @param {?} cdr
     * @return {?}
     */
    function (formControl, cdr) {
        formControl.statusChanges
            .pipe(bufferCount(2, 1), map((/**
         * @param {?} __0
         * @return {?}
         */
        function (_a) {
            var _b = __read(_a, 1), prevState = _b[0];
            return prevState;
        })), filter((/**
         * @param {?} prevState
         * @return {?}
         */
        function (prevState) { return prevState === "PENDING"; })))
            .subscribe((/**
         * @return {?}
         */
        function () { return cdr.markForCheck(); }));
    };
    /**
     * @private
     * @template M
     * @param {?} setting
     * @return {?}
     */
    ParentFieldFactory.prototype.getFactory = /**
     * @private
     * @template M
     * @param {?} setting
     * @return {?}
     */
    function (setting) {
        /** @type {?} */
        var factoryType = SubType.toSubType(setting.type).type;
        /** @type {?} */
        var factory = this.factories[factoryType];
        if (!factory) {
            throw new Error("Field factory " + factoryType + " does not exist.");
        }
        return new factory(this, this.formBuilder);
    };
    return ParentFieldFactory;
}());
if (false) {
    /**
     * @type {?}
     * @private
     */
    ParentFieldFactory.prototype.factories;
    /**
     * @type {?}
     * @private
     */
    ParentFieldFactory.prototype.componentFactoryResolver;
    /**
     * @type {?}
     * @private
     */
    ParentFieldFactory.prototype.injector;
    /**
     * @type {?}
     * @private
     */
    ParentFieldFactory.prototype.formBuilder;
    /**
     * @type {?}
     * @private
     */
    ParentFieldFactory.prototype.settings;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @abstract
 */
var  /**
 * @abstract
 */
DynamicController = /** @class */ (function () {
    function DynamicController() {
    }
    Object.defineProperty(DynamicController.prototype, "componentRef", {
        set: /**
         * @param {?} _componentRef
         * @return {?}
         */
        function (_componentRef) {
            this._componentRef = _componentRef;
        },
        enumerable: true,
        configurable: true
    });
    return DynamicController;
}());
if (false) {
    /**
     * @type {?}
     * @protected
     */
    DynamicController.prototype._componentRef;
    /**
     * @abstract
     * @param {?} context
     * @return {?}
     */
    DynamicController.prototype.onInit = function (context) { };
    /**
     * @abstract
     * @protected
     * @return {?}
     */
    DynamicController.prototype.destory = function () { };
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @template M
 */
var  /**
 * @template M
 */
DynamicGroupController = /** @class */ (function (_super) {
    __extends(DynamicGroupController, _super);
    function DynamicGroupController(formGroup, fieldFactory, setting, settings) {
        var _this = _super.call(this) || this;
        _this.formGroup = formGroup;
        _this.fieldFactory = fieldFactory;
        _this.setting = setting;
        _this.settings = settings;
        return _this;
    }
    /**
     * @param {?} context
     * @return {?}
     */
    DynamicGroupController.prototype.onInit = /**
     * @param {?} context
     * @return {?}
     */
    function (context) { };
    /**
     * @protected
     * @return {?}
     */
    DynamicGroupController.prototype.destory = /**
     * @protected
     * @return {?}
     */
    function () {
        // TODO
    };
    return DynamicGroupController;
}(DynamicController));
if (false) {
    /**
     * @type {?}
     * @private
     */
    DynamicGroupController.prototype.formGroup;
    /**
     * @type {?}
     * @private
     */
    DynamicGroupController.prototype.fieldFactory;
    /**
     * @type {?}
     * @private
     */
    DynamicGroupController.prototype.setting;
    /**
     * @type {?}
     * @private
     */
    DynamicGroupController.prototype.settings;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var GroupFieldFactory = /** @class */ (function () {
    function GroupFieldFactory(parentFieldFactory, formBuilder) {
        this.parentFieldFactory = parentFieldFactory;
        this.formBuilder = formBuilder;
    }
    /**
     * @template M
     * @param {?} options
     * @return {?}
     */
    GroupFieldFactory.prototype.create = /**
     * @template M
     * @param {?} options
     * @return {?}
     */
    function (options) {
        var setting = options.setting, settings = options.settings;
        var _a = __read(this.createChildContexts(options), 2), formControl = _a[0], children = _a[1];
        /** @type {?} */
        var dynamicController = new DynamicGroupController(formControl, this.parentFieldFactory, setting, settings);
        /** @type {?} */
        var groupFormContext = __assign({}, this.parentFieldFactory.resolveComponent(formControl, setting, options.initialValue, dynamicController), { children: children });
        /** @type {?} */
        var groupComponent = (/** @type {?} */ (groupFormContext.componentRef.instance));
        if (!groupComponent.formRoot) {
            throw new Error("Group component " + setting.name + " is not a group component. It is missing the 'formRoot' directive.");
        }
        dynamicController.onInit(groupFormContext);
        return groupFormContext;
    };
    /**
     * @param {?} formRoot
     * @param {?} root
     * @return {?}
     */
    GroupFieldFactory.prototype.render = /**
     * @param {?} formRoot
     * @param {?} root
     * @return {?}
     */
    function (formRoot, root) {
        var _this = this;
        /** @type {?} */
        var viewRef = formRoot.viewContainerRef.insert(root.componentRef.hostView);
        viewRef.detectChanges();
        /** @type {?} */
        var entries = Object.entries(root.children);
        entries.forEach((/**
         * @param {?} __0
         * @return {?}
         */
        function (_a) {
            var _b = __read(_a, 2), _id = _b[0], context = _b[1];
            /** @type {?} */
            var component = (/** @type {?} */ (root.componentRef.instance));
            _this.parentFieldFactory.render(component.formRoot, context);
        }));
        return viewRef;
    };
    /**
     * @param {?} context
     * @return {?}
     */
    GroupFieldFactory.prototype.updateChildren = /**
     * @param {?} context
     * @return {?}
     */
    function (context) {
        /** @type {?} */
        var controlEntires = Object.entries(context.formControl.controls);
        /** @type {?} */
        var entries = Object.entries(context.children);
        entries.forEach((/**
         * @param {?} __0
         * @return {?}
         */
        function (_a) {
            var _b = __read(_a, 2), _id = _b[0], child = _b[1];
            /** @type {?} */
            var missingFormControl = controlEntires.find((/**
             * @param {?} entry
             * @return {?}
             */
            function (entry) { return child.formControl === entry[1]; }));
            if (missingFormControl) {
                context.formControl.setControl(missingFormControl[0], missingFormControl[1]);
            }
        }));
    };
    /**
     * @private
     * @template M
     * @param {?} options
     * @return {?}
     */
    GroupFieldFactory.prototype.createChildContexts = /**
     * @private
     * @template M
     * @param {?} options
     * @return {?}
     */
    function (options) {
        var _this = this;
        var setting = options.setting, settings = options.settings;
        if (options.formControl) {
            /** @type {?} */
            var controlEntires = Object.entries(options.formControl.controls);
            /** @type {?} */
            var children_1 = {};
            controlEntires.forEach((/**
             * @param {?} __0
             * @return {?}
             */
            function (_a) {
                var _b = __read(_a, 2), id = _b[0], formControl = _b[1];
                children_1[id] = _this.parentFieldFactory.create({
                    formControl: formControl,
                    setting: _this.getSetting(id, settings),
                    settings: settings
                });
            }));
            return [options.formControl, children_1];
        }
        var value = options.initialValue;
        if (typeof value !== "object") {
            throw new Error("Value of group " + setting.name + " is not an object");
        }
        /** @type {?} */
        var children = {};
        /** @type {?} */
        var formChildren = {};
        Object.entries(value).forEach((/**
         * @param {?} __0
         * @return {?}
         */
        function (_a) {
            var _b = __read(_a, 2), id = _b[0], child = _b[1];
            children[id] = _this.parentFieldFactory.create({
                initialValue: child,
                setting: _this.getSetting(id, settings),
                settings: settings
            });
            formChildren[id] = children[id].formControl;
        }));
        /** @type {?} */
        var formControl = this.formBuilder.group(formChildren);
        return [formControl, children];
    };
    /**
     * @private
     * @template M
     * @param {?} id
     * @param {?} settings
     * @return {?}
     */
    GroupFieldFactory.prototype.getSetting = /**
     * @private
     * @template M
     * @param {?} id
     * @param {?} settings
     * @return {?}
     */
    function (id, settings) {
        /** @type {?} */
        var childSetting = (/** @type {?} */ (settings.get(id)));
        if (!childSetting) {
            throw new Error("Form field '" + id + "' has no assigned form field setting.");
        }
        return childSetting;
    };
    return GroupFieldFactory;
}());
if (false) {
    /**
     * @type {?}
     * @private
     */
    GroupFieldFactory.prototype.parentFieldFactory;
    /**
     * @type {?}
     * @private
     */
    GroupFieldFactory.prototype.formBuilder;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var ArrayRenderer = /** @class */ (function () {
    // TODO is arrayRoot needed
    function ArrayRenderer(parentFieldFactory, arrayRoot) {
        this.parentFieldFactory = parentFieldFactory;
        this.arrayRoot = arrayRoot;
    }
    /**
     * @param {?} context
     * @param {?} pageEvent
     * @return {?}
     */
    ArrayRenderer.prototype.render = /**
     * @param {?} context
     * @param {?} pageEvent
     * @return {?}
     */
    function (context, pageEvent) {
        this.renderChildren(this.arrayRoot, this.getChildrenToRender((/** @type {?} */ (context.children)), pageEvent));
    };
    /**
     * @private
     * @param {?} arrayRoot
     * @param {?} contexts
     * @return {?}
     */
    ArrayRenderer.prototype.renderChildren = /**
     * @private
     * @param {?} arrayRoot
     * @param {?} contexts
     * @return {?}
     */
    function (arrayRoot, contexts) {
        var _this = this;
        arrayRoot.clearView();
        contexts.forEach((/**
         * @param {?} context
         * @return {?}
         */
        function (context) {
            if (context.componentRef.hostView.destroyed) {
                // recreate the view if it is destroyed
                /** @type {?} */
                var newContext = _this.parentFieldFactory.create(context);
                _this.parentFieldFactory.render(arrayRoot, newContext);
                return;
            }
            _this.parentFieldFactory.render(arrayRoot, context);
        }));
    };
    /**
     * @private
     * @param {?} children
     * @param {?} pageEvent
     * @return {?}
     */
    ArrayRenderer.prototype.getChildrenToRender = /**
     * @private
     * @param {?} children
     * @param {?} pageEvent
     * @return {?}
     */
    function (children, pageEvent) {
        return children.slice(pageEvent.pageIndex * pageEvent.pageSize, (pageEvent.pageIndex + 1) * pageEvent.pageSize);
    };
    return ArrayRenderer;
}());
if (false) {
    /**
     * @type {?}
     * @private
     */
    ArrayRenderer.prototype.parentFieldFactory;
    /**
     * @type {?}
     * @private
     */
    ArrayRenderer.prototype.arrayRoot;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @template M, CM
 */
var  /**
 * @template M, CM
 */
DynamicArrayController = /** @class */ (function (_super) {
    __extends(DynamicArrayController, _super);
    function DynamicArrayController(parentFieldFactory) {
        var _this = _super.call(this) || this;
        _this.parentFieldFactory = parentFieldFactory;
        _this.subscriptions = [];
        return _this;
    }
    /**
     * @param {?} context
     * @return {?}
     */
    DynamicArrayController.prototype.onInit = /**
     * @param {?} context
     * @return {?}
     */
    function (context) {
        var _this = this;
        this.arrayContext = context;
        this.renderer = new ArrayRenderer(this.parentFieldFactory, this.arrayRoot);
        this.paginator.updateTotalSize(this.children.length);
        this.subscriptions.push(this.paginator.onPageEvent().subscribe((/**
         * @param {?} event
         * @return {?}
         */
        function (event) { return _this.renderPage(event); })));
    };
    Object.defineProperty(DynamicArrayController.prototype, "paginator", {
        get: /**
         * @return {?}
         */
        function () {
            return this.setting.renderStrategy.paginator;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DynamicArrayController.prototype, "children", {
        get: /**
         * @private
         * @return {?}
         */
        function () {
            return (/** @type {?} */ (this.arrayContext.children));
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DynamicArrayController.prototype, "formArray", {
        get: /**
         * @private
         * @return {?}
         */
        function () {
            return this.arrayContext.formControl;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DynamicArrayController.prototype, "setting", {
        get: /**
         * @private
         * @return {?}
         */
        function () {
            return (/** @type {?} */ (this.arrayContext.setting));
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DynamicArrayController.prototype, "settings", {
        get: /**
         * @private
         * @return {?}
         */
        function () {
            return this.arrayContext.settings;
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @param {?} value
     * @return {?}
     */
    DynamicArrayController.prototype.push = /**
     * @param {?} value
     * @return {?}
     */
    function (value) {
        /** @type {?} */
        var newChildContext = this.parentFieldFactory.create({
            setting: this.setting.childSetting,
            settings: this.settings,
            initialValue: value
        });
        this.children.push(newChildContext);
        this.parentFieldFactory.updateChildren(this.arrayContext);
        this.paginator.updateTotalSize(this.children.length);
        this.renderPage();
    };
    /**
     * @param {?} index
     * @return {?}
     */
    DynamicArrayController.prototype.removeAt = /**
     * @param {?} index
     * @return {?}
     */
    function (index) {
        if (index >= this.children.length || index < 0) {
            return false;
        }
        this.children.splice(index, 1);
        this.parentFieldFactory.updateChildren(this.arrayContext);
        this.paginator.updateTotalSize(this.children.length);
        this.renderPage();
        return true;
    };
    /**
     * @protected
     * @return {?}
     */
    DynamicArrayController.prototype.destory = /**
     * @protected
     * @return {?}
     */
    function () {
        this.subscriptions.forEach((/**
         * @param {?} s
         * @return {?}
         */
        function (s) { return s.unsubscribe(); }));
    };
    /**
     * @private
     * @param {?=} pageEvent
     * @return {?}
     */
    DynamicArrayController.prototype.renderPage = /**
     * @private
     * @param {?=} pageEvent
     * @return {?}
     */
    function (pageEvent) {
        if (pageEvent === void 0) { pageEvent = this.paginator.currentPage; }
        return this.renderer.render(this.arrayContext, pageEvent);
    };
    Object.defineProperty(DynamicArrayController.prototype, "arrayRoot", {
        get: /**
         * @private
         * @return {?}
         */
        function () {
            return ((/** @type {?} */ (this._componentRef.instance))).formRoot;
        },
        enumerable: true,
        configurable: true
    });
    return DynamicArrayController;
}(DynamicController));
if (false) {
    /**
     * @type {?}
     * @private
     */
    DynamicArrayController.prototype.arrayContext;
    /**
     * @type {?}
     * @private
     */
    DynamicArrayController.prototype.subscriptions;
    /**
     * @type {?}
     * @private
     */
    DynamicArrayController.prototype.renderer;
    /**
     * @type {?}
     * @private
     */
    DynamicArrayController.prototype.parentFieldFactory;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var ArrayFieldFactory = /** @class */ (function () {
    function ArrayFieldFactory(parentFieldFactory, formBuilder) {
        this.parentFieldFactory = parentFieldFactory;
        this.formBuilder = formBuilder;
    }
    /**
     * @template M
     * @param {?} options
     * @return {?}
     */
    ArrayFieldFactory.prototype.create = /**
     * @template M
     * @param {?} options
     * @return {?}
     */
    function (options) {
        var setting = options.setting;
        if (!setting.childSetting) {
            throw new Error("Array " + options.setting.name + " needs 'childSetting' as part of its setting.");
        }
        var _a = __read(this.createChildContexts(options), 2), formControl = _a[0], children = _a[1];
        /** @type {?} */
        var dynamicController = new DynamicArrayController(this.parentFieldFactory);
        /** @type {?} */
        var arrayComponentContext = __assign({}, this.parentFieldFactory.resolveComponent(formControl, setting, options.initialValue, dynamicController), { children: children });
        /** @type {?} */
        var arrayComponent = (/** @type {?} */ (arrayComponentContext.componentRef.instance));
        if (!arrayComponent.formRoot) {
            throw new Error("Array component " + setting.name + " is not an array component. It is missing the 'formRoot' directive.");
        }
        // initialize controller after all values and children are resolved
        dynamicController.onInit(arrayComponentContext);
        return arrayComponentContext;
    };
    /**
     * @param {?} arrayContext
     * @return {?}
     */
    ArrayFieldFactory.prototype.updateChildren = /**
     * @param {?} arrayContext
     * @return {?}
     */
    function (arrayContext) {
        /** @type {?} */
        var unchecked = __spread(arrayContext.formControl.controls);
        ((/** @type {?} */ (arrayContext.children))).forEach((/**
         * @param {?} child
         * @param {?} i
         * @return {?}
         */
        function (child, i) {
            if (arrayContext.formControl.controls.indexOf(child.formControl) === -1) {
                arrayContext.formControl.insert(i, child.formControl);
            }
            else {
                unchecked.splice(unchecked.indexOf(child.formControl), 1);
            }
        }));
        unchecked.forEach((/**
         * @param {?} control
         * @return {?}
         */
        function (control) { return arrayContext.formControl.removeAt(arrayContext.formControl.controls.indexOf(control)); }));
    };
    /**
     * @param {?} formRoot
     * @param {?} arrayContext
     * @return {?}
     */
    ArrayFieldFactory.prototype.render = /**
     * @param {?} formRoot
     * @param {?} arrayContext
     * @return {?}
     */
    function (formRoot, arrayContext) {
        /** @type {?} */
        var viewRef = formRoot.viewContainerRef.insert(arrayContext.componentRef.hostView);
        viewRef.detectChanges();
        /** @type {?} */
        var arrayComponent = (/** @type {?} */ (arrayContext.componentRef.instance));
        /** @type {?} */
        var paginator = ((/** @type {?} */ (arrayContext.setting))).renderStrategy.paginator;
        /** @type {?} */
        var pageEvent = { pageIndex: paginator.pageIndex, pageSize: paginator.pageSize };
        /** @type {?} */
        var renderer = new ArrayRenderer(this.parentFieldFactory, arrayComponent.formRoot);
        renderer.render(arrayContext, pageEvent);
        return viewRef;
    };
    /**
     * @private
     * @template M
     * @param {?} options
     * @return {?}
     */
    ArrayFieldFactory.prototype.createChildContexts = /**
     * @private
     * @template M
     * @param {?} options
     * @return {?}
     */
    function (options) {
        var _this = this;
        if (options.formControl) {
            /** @type {?} */
            var children_1 = options.formControl.controls.map((/**
             * @param {?} formControl
             * @return {?}
             */
            function (formControl) {
                return _this.parentFieldFactory.create({
                    formControl: formControl,
                    setting: options.setting.childSetting,
                    settings: options.settings
                });
            }));
            return [options.formControl, children_1];
        }
        /** @type {?} */
        var values = options.initialValue ? options.initialValue : [];
        if (!Array.isArray(values)) {
            throw new Error("Value of " + options.setting.name + " is not an array.");
        }
        /** @type {?} */
        var children = values.map((/**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            return _this.parentFieldFactory.create({
                initialValue: value,
                setting: options.setting.childSetting,
                settings: options.settings
            });
        }));
        /** @type {?} */
        var formControl = this.formBuilder.array(children.map((/**
         * @param {?} context
         * @return {?}
         */
        function (context) { return context.formControl; })));
        return [formControl, children];
    };
    return ArrayFieldFactory;
}());
if (false) {
    /**
     * @type {?}
     * @private
     */
    ArrayFieldFactory.prototype.parentFieldFactory;
    /**
     * @type {?}
     * @private
     */
    ArrayFieldFactory.prototype.formBuilder;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @template M
 */
var  /**
 * @template M
 */
DynamicSingleController = /** @class */ (function (_super) {
    __extends(DynamicSingleController, _super);
    function DynamicSingleController(formControl, fieldFactory, setting, settings) {
        var _this = _super.call(this) || this;
        _this.formControl = formControl;
        _this.fieldFactory = fieldFactory;
        _this.setting = setting;
        _this.settings = settings;
        return _this;
    }
    /**
     * @param {?} context
     * @return {?}
     */
    DynamicSingleController.prototype.onInit = /**
     * @param {?} context
     * @return {?}
     */
    function (context) { };
    /**
     * @protected
     * @return {?}
     */
    DynamicSingleController.prototype.destory = /**
     * @protected
     * @return {?}
     */
    function () {
        // TODO
    };
    return DynamicSingleController;
}(DynamicController));
if (false) {
    /**
     * @type {?}
     * @private
     */
    DynamicSingleController.prototype.formControl;
    /**
     * @type {?}
     * @private
     */
    DynamicSingleController.prototype.fieldFactory;
    /**
     * @type {?}
     * @private
     */
    DynamicSingleController.prototype.setting;
    /**
     * @type {?}
     * @private
     */
    DynamicSingleController.prototype.settings;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var SingleFieldFactory = /** @class */ (function () {
    function SingleFieldFactory(parentFieldFactory, formBuilder) {
        this.parentFieldFactory = parentFieldFactory;
        this.formBuilder = formBuilder;
    }
    /**
     * @template M
     * @param {?} __0
     * @return {?}
     */
    SingleFieldFactory.prototype.create = /**
     * @template M
     * @param {?} __0
     * @return {?}
     */
    function (_a) {
        var value = _a.initialValue, formControl = _a.formControl, setting = _a.setting, settings = _a.settings;
        if (!formControl) {
            formControl = this.formBuilder.control(value);
            formControl.setValidators(setting.validators ? setting.validators : []);
            formControl.setAsyncValidators(setting.asyncValidators ? setting.asyncValidators : []);
        }
        /** @type {?} */
        var dynamicController = new DynamicSingleController(formControl, this.parentFieldFactory, setting, settings);
        return this.parentFieldFactory.resolveComponent(formControl, setting, value, dynamicController);
    };
    /**
     * @param {?} formRoot
     * @param {?} root
     * @return {?}
     */
    SingleFieldFactory.prototype.render = /**
     * @param {?} formRoot
     * @param {?} root
     * @return {?}
     */
    function (formRoot, root) {
        /** @type {?} */
        var viewRef = formRoot.viewContainerRef.insert(root.componentRef.hostView);
        viewRef.detectChanges();
        return viewRef;
    };
    /**
     * @param {?} context
     * @return {?}
     */
    SingleFieldFactory.prototype.updateChildren = /**
     * @param {?} context
     * @return {?}
     */
    function (context) { };
    return SingleFieldFactory;
}());
if (false) {
    /**
     * @type {?}
     * @private
     */
    SingleFieldFactory.prototype.parentFieldFactory;
    /**
     * @type {?}
     * @private
     */
    SingleFieldFactory.prototype.formBuilder;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/** @type {?} */
var ROOT_ID = "__ROOT__";
/**
 * @param {?} rootSetting
 * @param {?} settings
 * @param {?} defaultFormComponents
 * @return {?}
 */
function createFormFieldSettings(rootSetting, settings, defaultFormComponents) {
    var e_1, _a;
    if (settings.has(ROOT_ID)) {
        /** @type {?} */
        var illegalSetting = settings.get(ROOT_ID);
        throw new Error("Illegal form field id " + illegalSetting.name + " detected for " + illegalSetting.name);
    }
    /** @type {?} */
    var combinedSettings = new Map();
    combinedSettings.set(ROOT_ID, {
        name: ROOT_ID,
        component: rootSetting.component,
        type: DynamicFormType.GROUP,
        metadata: rootSetting.metadata
    });
    settings.forEach((/**
     * @param {?} setting
     * @param {?} id
     * @return {?}
     */
    function (setting, id) {
        return combinedSettings.set(id, __assign({}, setting, { type: setting.type ? setting.type : ((/** @type {?} */ (DynamicFormType.SINGLE))) }));
    }));
    try {
        // add missing components from default form components
        for (var combinedSettings_1 = __values(combinedSettings), combinedSettings_1_1 = combinedSettings_1.next(); !combinedSettings_1_1.done; combinedSettings_1_1 = combinedSettings_1.next()) {
            var _b = __read(combinedSettings_1_1.value, 2), setting = _b[1];
            setting.type = SubType.toSubType(setting.type);
            if (setting.component || setting.type.type === DynamicFormType.HIDDEN)
                continue;
            setting.component = ensureDefaultFormComponents(defaultFormComponents, setting.name, setting.type);
        }
    }
    catch (e_1_1) { e_1 = { error: e_1_1 }; }
    finally {
        try {
            if (combinedSettings_1_1 && !combinedSettings_1_1.done && (_a = combinedSettings_1.return)) _a.call(combinedSettings_1);
        }
        finally { if (e_1) throw e_1.error; }
    }
    return combinedSettings;
}
/**
 * @param {?} defaultFormComponents
 * @param {?} name
 * @param {?} _type
 * @return {?}
 */
function ensureDefaultFormComponents(defaultFormComponents, name, _type) {
    if (!defaultFormComponents) {
        throw new Error("No default form components available, but you used a DynamicFormType as an component identifier for " + name + ". Did you add the module using DynamicFormsLiteModule.withDefaultComponents()?");
    }
    /** @type {?} */
    var subType = SubType.toSubType(_type);
    /** @type {?} */
    var component = defaultFormComponents.get(subType.type)[subType.subType];
    if (!component) {
        throw new Error("No default form component for type " + subType.subType + " (" + subType.type + ") available.");
    }
    return component;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @record
 */
function PageEvent() { }
if (false) {
    /** @type {?} */
    PageEvent.prototype.pageSize;
    /** @type {?} */
    PageEvent.prototype.pageIndex;
}
var Paginator = /** @class */ (function () {
    function Paginator(_pageSize) {
        this._pageSize = _pageSize;
        this._pageIndex = 0;
        this.totalSize = 0;
        this.pageEvents = new EventEmitter();
    }
    /**
     * @param {?} totalSize
     * @return {?}
     */
    Paginator.prototype.updateTotalSize = /**
     * @param {?} totalSize
     * @return {?}
     */
    function (totalSize) {
        this.totalSize = totalSize;
        /** @type {?} */
        var newPageIndex = this.maxPageIndex;
        if (newPageIndex < this._pageIndex) {
            this._pageIndex = newPageIndex;
            this.pageEvents.next(this.currentPage);
        }
    };
    Object.defineProperty(Paginator.prototype, "pageIndex", {
        get: /**
         * @return {?}
         */
        function () {
            return this._pageIndex;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Paginator.prototype, "maxPageIndex", {
        get: /**
         * @return {?}
         */
        function () {
            if (this.totalSize === 0) {
                return 0;
            }
            return Math.ceil(this.totalSize / this._pageSize) - 1;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Paginator.prototype, "pageSize", {
        get: /**
         * @return {?}
         */
        function () {
            return this._pageSize;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Paginator.prototype, "currentPage", {
        get: /**
         * @return {?}
         */
        function () {
            return {
                pageIndex: this._pageIndex,
                pageSize: this._pageSize
            };
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @return {?}
     */
    Paginator.prototype.hasNextPage = /**
     * @return {?}
     */
    function () {
        return (this._pageIndex + 1) * this._pageSize < this.totalSize;
    };
    /**
     * @return {?}
     */
    Paginator.prototype.hasPreviousPage = /**
     * @return {?}
     */
    function () {
        return this._pageIndex !== 0;
    };
    /**
     * @return {?}
     */
    Paginator.prototype.nextPage = /**
     * @return {?}
     */
    function () {
        if (!this.hasNextPage())
            return false;
        this._pageIndex++;
        this.pageEvents.next({
            pageIndex: this.pageIndex,
            pageSize: this.pageSize
        });
        return true;
    };
    /**
     * @return {?}
     */
    Paginator.prototype.previousPage = /**
     * @return {?}
     */
    function () {
        if (!this.hasPreviousPage())
            return false;
        this._pageIndex--;
        this.pageEvents.next({
            pageIndex: this.pageIndex,
            pageSize: this.pageSize
        });
        return true;
    };
    /**
     * @return {?}
     */
    Paginator.prototype.onPageEvent = /**
     * @return {?}
     */
    function () {
        return this.pageEvents;
    };
    return Paginator;
}());
if (false) {
    /**
     * @type {?}
     * @private
     */
    Paginator.prototype._pageIndex;
    /**
     * @type {?}
     * @private
     */
    Paginator.prototype.totalSize;
    /**
     * @type {?}
     * @private
     */
    Paginator.prototype.pageEvents;
    /**
     * @type {?}
     * @private
     */
    Paginator.prototype._pageSize;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @record
 */
function ArrayRenderStrategyOptions() { }
if (false) {
    /** @type {?} */
    ArrayRenderStrategyOptions.prototype.pageSize;
}
var ArrayRenderStrategy = /** @class */ (function () {
    function ArrayRenderStrategy(options) {
        this.options = options;
        this._paginator = new Paginator(options.pageSize);
    }
    /**
     * @return {?}
     */
    ArrayRenderStrategy.withFullRender = /**
     * @return {?}
     */
    function () {
        return new ArrayRenderStrategy({
            pageSize: Infinity
        });
    };
    /**
     * @param {?} pageSize
     * @return {?}
     */
    ArrayRenderStrategy.withPartialRender = /**
     * @param {?} pageSize
     * @return {?}
     */
    function (pageSize) {
        return new ArrayRenderStrategy({
            pageSize: pageSize
        });
    };
    Object.defineProperty(ArrayRenderStrategy.prototype, "paginator", {
        get: /**
         * @return {?}
         */
        function () {
            return this._paginator;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(ArrayRenderStrategy.prototype, "pageSize", {
        get: /**
         * @return {?}
         */
        function () {
            return this.options.pageSize;
        },
        enumerable: true,
        configurable: true
    });
    return ArrayRenderStrategy;
}());
if (false) {
    /**
     * @type {?}
     * @private
     */
    ArrayRenderStrategy.prototype._paginator;
    /**
     * @type {?}
     * @private
     */
    ArrayRenderStrategy.prototype.options;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/** @type {?} */
var MissingSettingResolver = (/**
 * @param {?} __0
 * @return {?}
 */
function (_a) {
    var _b = __read(_a, 1), setting = _b[0];
    throw new Error("Unssuported form field for " + setting.name);
});
var ɵ0 = MissingSettingResolver;
/** @type {?} */
var ComponentSettingResolver = (/**
 * @param {?} __0
 * @return {?}
 */
function (_a) {
    var _b = __read(_a, 2), setting = _b[0], form = _b[1];
    if (typeof form !== "function") {
        return {
            match: false
        };
    }
    setting.component = form;
    return {
        match: true,
        value: [[setting.name, (/** @type {?} */ (setting))]]
    };
});
var ɵ1 = ComponentSettingResolver;
/** @type {?} */
var DynamicTypeSettingResolver = (/**
 * @param {?} __0
 * @param {?} componentResolver
 * @return {?}
 */
function (_a, componentResolver) {
    var _b = __read(_a, 3), setting = _b[0], form = _b[1], optionalComponent = _b[2];
    if (!isDynamicFieldType(form) && !(form instanceof SubType)) {
        return {
            match: false
        };
    }
    if (form !== DynamicFormType.HIDDEN && !(form instanceof SubType && form.type === DynamicFormType.HIDDEN)) {
        setting.component = componentResolver(setting, optionalComponent);
    }
    setting.type = form;
    return {
        match: true,
        value: [[setting.name, (/** @type {?} */ (setting))]]
    };
});
var ɵ2 = DynamicTypeSettingResolver;
/** @type {?} */
var ArraySettingResolver = (/**
 * @param {?} __0
 * @param {?} componentResolver
 * @param {?} factory
 * @return {?}
 */
function (_a, componentResolver, factory) {
    var _b = __read(_a, 3), setting = _b[0], form = _b[1], optionalComponent = _b[2];
    if (!Array.isArray(form)) {
        return {
            match: false
        };
    }
    setting.type = DynamicFormType.ARRAY;
    setting.component = (/** @type {?} */ (componentResolver(setting, optionalComponent)));
    setting.renderStrategy = setting.renderStrategy || ArrayRenderStrategy.withFullRender();
    var _c = __read(factory(form)), _d = __read(_c[0], 2), childSetting = _d[1], indirectChildren = _c.slice(1);
    setting.childSetting = childSetting;
    return {
        match: true,
        value: __spread([[setting.name, (/** @type {?} */ (setting))]], indirectChildren)
    };
});
var ɵ3 = ArraySettingResolver;
/** @type {?} */
var GroupSettingResolver = (/**
 * @param {?} __0
 * @param {?} componentResolver
 * @param {?} factory
 * @return {?}
 */
function (_a, componentResolver, factory) {
    var _b = __read(_a, 3), setting = _b[0], form = _b[1], optionalComponent = _b[2];
    if (typeof form !== "object") {
        return {
            match: false
        };
    }
    /** @type {?} */
    var children = Object.entries(form).reduce((/**
     * @param {?} settings
     * @param {?} __1
     * @return {?}
     */
    function (settings, _a) {
        var _b = __read(_a, 2), id = _b[0], options = _b[1];
        var _c = __read(factory(options)), _d = __read(_c[0], 2), childSetting = _d[1], indirectChildren = _c.slice(1);
        return __spread(settings, [[id, childSetting]], indirectChildren);
    }), []);
    // form root does not have a name
    if (!setting.name) {
        return {
            match: true,
            value: children
        };
    }
    setting.type = DynamicFormType.GROUP;
    setting.component = componentResolver(setting, optionalComponent);
    return {
        match: true,
        value: __spread([[setting.name, (/** @type {?} */ (setting))]], children)
    };
});
var ɵ4 = GroupSettingResolver;
var InlineSettingsResolver = /** @class */ (function () {
    function InlineSettingsResolver(defaultFormComponents) {
        this.defaultFormComponents = defaultFormComponents;
        this.resolvers = [
            DynamicTypeSettingResolver,
            ComponentSettingResolver,
            ArraySettingRes