@soeren_balke/ng-builder/bundles/soeren_balke-ng-builder.umd.js

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.1. The ng-builder is a module to dynamicly build components. This Tool wrapps the angular viewContainerRef. The Components are easy to develop and use with

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core')) :
    typeof define === 'function' && define.amd ? define('@soeren_balke/ng-builder', ['exports', '@angular/core'], factory) :
    (global = global || self, factory((global.soeren_balke = global.soeren_balke || {}, global.soeren_balke['ng-builder'] = {}), global.ng.core));
}(this, (function (exports, core) { 'use strict';

    var NgBuilderDirective = /** @class */ (function () {
        function NgBuilderDirective(viewContainerRef) {
            this.viewContainerRef = viewContainerRef;
        }
        return NgBuilderDirective;
    }());
    NgBuilderDirective.decorators = [
        { type: core.Directive, args: [{
                    selector: '[libBuilder]'
                },] }
    ];
    NgBuilderDirective.ctorParameters = function () { return [
        { type: core.ViewContainerRef }
    ]; };

    var NgBuilderComponent = /** @class */ (function () {
        function NgBuilderComponent(componentFactoryResolver) {
            this.componentFactoryResolver = componentFactoryResolver;
            this.saveComponent = new core.EventEmitter();
        }
        Object.defineProperty(NgBuilderComponent.prototype, "_componentList", {
            set: function (value) {
                if (value) {
                    this.componentList = value;
                }
            },
            enumerable: false,
            configurable: true
        });
        NgBuilderComponent.prototype.ngOnInit = function () {
            this.viewContainerRef = this.builder.viewContainerRef;
            this.renderdComonentList = [];
            if (this.componentList && this.componentList.length > 0) {
                this.update();
            }
        };
        /**
         * deprecated
         */
        NgBuilderComponent.prototype.generateComponentList = function () {
            this.update();
        };
        /**
         * update rendert component list
         */
        NgBuilderComponent.prototype.update = function () {
            /**
             * Add components
             */
            for (var key in this.componentList) {
                this.loadComponent(this.componentList[key], key);
            }
            /**
             * Remove Components
             */
            for (var i = (this.renderdComonentList.length - 1); i >= 0; i--) {
                if (!this.componentList.includes(this.renderdComonentList[i])) {
                    if (this.viewContainerRef.get(i)) {
                        this.viewContainerRef.remove(i);
                    }
                    this.renderdComonentList.splice(i, 1);
                }
            }
        };
        NgBuilderComponent.prototype.clearComponentList = function () {
            this.viewContainerRef.clear();
            this.renderdComonentList = [];
        };
        NgBuilderComponent.prototype.loadComponent = function (component, index) {
            var _this = this;
            if (this.renderdComonentList.includes(component)) {
                var oldComponentIndex = this.renderdComonentList.indexOf(component);
                if (index === oldComponentIndex) {
                    return;
                }
                var oldViewRef = this.viewContainerRef.get(oldComponentIndex);
                this.viewContainerRef.move(oldViewRef, index);
                this.renderdComonentList.splice(oldComponentIndex, 1);
                this.renderdComonentList.splice(index, 0, component);
                return;
            }
            var componentFactory = this.componentFactoryResolver.resolveComponentFactory(component.component);
            var componentRef = this.viewContainerRef.createComponent(componentFactory, index);
            var componentInstance = componentRef.instance;
            if (component.data) {
                componentInstance.data = component.data;
            }
            componentInstance.edit = component.edit;
            componentInstance.saveEdit.subscribe(function (data) {
                _this.saveComponent.emit({
                    index: index,
                    component: component,
                    data: data
                });
            });
            // this.renderdComonentList.push(component);
            this.renderdComonentList.splice(index, 0, component);
        };
        return NgBuilderComponent;
    }());
    NgBuilderComponent.decorators = [
        { type: core.Component, args: [{
                    selector: 'lib-ng-builder',
                    template: "\n    <ng-template libBuilder>\n    </ng-template>\n  "
                },] }
    ];
    NgBuilderComponent.ctorParameters = function () { return [
        { type: core.ComponentFactoryResolver }
    ]; };
    NgBuilderComponent.propDecorators = {
        _componentList: [{ type: core.Input, args: ['componentList',] }],
        saveComponent: [{ type: core.Output }],
        builder: [{ type: core.ViewChild, args: [NgBuilderDirective, { static: true },] }]
    };

    var NgBuilderModule = /** @class */ (function () {
        function NgBuilderModule() {
        }
        return NgBuilderModule;
    }());
    NgBuilderModule.decorators = [
        { type: core.NgModule, args: [{
                    imports: [],
                    declarations: [
                        NgBuilderComponent,
                        NgBuilderDirective
                    ],
                    exports: [
                        NgBuilderComponent
                    ]
                },] }
    ];

    var Builder = /** @class */ (function () {
        function Builder() {
            this.saveEdit = new core.EventEmitter();
        }
        return Builder;
    }());
    Builder.decorators = [
        { type: core.Directive }
    ];
    Builder.ctorParameters = function () { return []; };
    Builder.propDecorators = {
        data: [{ type: core.Input }],
        edit: [{ type: core.Input }],
        saveEdit: [{ type: core.Output }]
    };

    /*
     * Public API Surface of ng-builder
     */

    /**
     * Generated bundle index. Do not edit.
     */

    exports.Builder = Builder;
    exports.NgBuilderComponent = NgBuilderComponent;
    exports.NgBuilderModule = NgBuilderModule;
    exports.ɵa = NgBuilderDirective;

    Object.defineProperty(exports, '__esModule', { value: true });

})));
//# sourceMappingURL=soeren_balke-ng-builder.umd.js.map