@stratusjs/angular 0.6.5 → 0.6.7

package/dist/angular.bundle.js

@@ -128082,9 +128082,13 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                             try {
                                 yield Stratus.Internals.JsLoader('https://js.stripe.com/v3/');
                                 if (!Object.prototype.hasOwnProperty.call(window, 'Stripe')) {
-                                    console.error('Stripe Api was not initialized, cannot continue');
-                                    this.initializing = false;
-                                    return;
+                                    console.warn('Stripe Api was not initialized yet, waiting...');
+                                    yield this.delay(3000);
+                                    if (!Object.prototype.hasOwnProperty.call(window, 'Stripe')) {
+                                        console.error('Stripe Api was not initialized, cannot continue');
+                                        this.initializing = false;
+                                        return;
+                                    }
                                 }
                             }
                             catch (e) {
@@ -128102,6 +128106,13 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                         }
                     });
                 }
+                delay(ms) {
+                    return __awaiter$5(this, void 0, void 0, function* () {
+                        return new Promise((resolve) => {
+                            return setTimeout(resolve, ms);
+                        });
+                    });
+                }
                 waitForInitialization() {
                     return __awaiter$5(this, void 0, void 0, function* () {
                         yield new Promise(() => {
@@ -128169,7 +128180,7 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                         }
                         const element = (yield this.elements(publishKey)).create(paymentMethodType, options);
                         this.currentElement = {
-                            id: uniqueId$3(id + '_'),
+                            id: safeUniqueId(id),
                             paymentMethodType,
                             element
                         };
@@ -128255,6 +128266,7 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                     this.dialogData = dialogData;
                     this.title = `${packageName$4}_${componentName$4}_component`;
                     this.urlRoot = '/Api';
+                    this.paymentMethodApiPath = 'PaymentMethod';
                     this.styled = false;
                     this.initialized = false;
                     this.cardComplete = false;
@@ -128262,11 +128274,10 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                     this.formPending = false;
                     this.publishKey = '';
                     this.formMessage = '';
-                    this.paymentMethodApiPath = 'PaymentMethod';
                     this.billingInfo = {
                         address: {}
                     };
-                    this.uid = uniqueId$3(`sa_${snakeCase(this.title)}_`);
+                    this.uid = safeUniqueId('sa', snakeCase(this.title));
                     Stratus.Instances[this.uid] = this;
                     this.elementId = this.elementId || this.uid;
                     Stratus.Internals.CssLoader(`${localDir$3}${componentName$4}.component${min$3}.css`)
@@ -128277,9 +128288,9 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                         console.error('CSS Failed to load for Component:', this);
                         this.styled = false;
                     });
-                    this.hydrate(this.elementRef, this.sanitizer, ["title", "uid", "elementId", "_", "urlRoot", "styled", "initialized", "cardComplete", "cardSaved", "formPending", "clientSecret", "publishKey", "formMessage", "detailedBillingInfo", "defaultBillingInfo", "paymentMethodApiPath", "billingInfo", "cardId", "elementRef", "sanitizer", "Stripe", "dialogRef", "dialogData", "ngOnInit", "isEditable", "isBillingDetailsFilled", "isSubmittable", "saveCard", "dialogClose", "ngOnDestroy", "hydrate", "ref", "disableRefresh", "stagger", "reloading", "refresh"]);
+                    this.hydrate(this.elementRef, this.sanitizer, ["title", "uid", "elementId", "_", "urlRoot", "paymentMethodApiPath", "styled", "initialized", "cardComplete", "cardSaved", "formPending", "clientSecret", "publishKey", "formMessage", "detailedBillingInfo", "defaultBillingInfo", "billingInfo", "cardId", "elementRef", "sanitizer", "Stripe", "dialogRef", "dialogData", "ngOnInit", "isEditable", "isBillingDetailsFilled", "isSubmittable", "saveCard", "dialogClose", "ngOnDestroy", "hydrate", "ref", "disableRefresh", "stagger", "reloading", "refresh"]);
                     if (!isEmpty(this.dialogData)) {
-                        const keysPossible = ["clientSecret", "publishKey", "formMessage", "detailedBillingInfo", "defaultBillingInfo"];
+                        const keysPossible = ["clientSecret", "publishKey", "formMessage", "urlRoot", "paymentMethodApiPath", "detailedBillingInfo", "defaultBillingInfo"];
                         Object.keys(this.dialogData).forEach((attr) => {
                             if (!isEmpty(attr) && includes(keysPossible, attr)) {
                                 set(this, attr, this.dialogData[attr]);
@@ -128327,8 +128338,11 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                 isSubmittable() {
                     return this.cardComplete && this.isEditable() && this.isBillingDetailsFilled();
                 }
-                saveCard() {
+                saveCard(ev) {
                     return __awaiter$4(this, void 0, void 0, function* () {
+                        if (ev) {
+                            ev.preventDefault();
+                        }
                         if (!this.isSubmittable()) {
                             return;
                         }
@@ -128392,8 +128406,12 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
             ], StripePaymentMethodComponent.prototype, "elementId", void 0);
             __decorate$6([
                 Input(),
-                __metadata$5("design:type", Object)
+                __metadata$5("design:type", String)
             ], StripePaymentMethodComponent.prototype, "urlRoot", void 0);
+            __decorate$6([
+                Input(),
+                __metadata$5("design:type", String)
+            ], StripePaymentMethodComponent.prototype, "paymentMethodApiPath", void 0);
             __decorate$6([
                 Input(),
                 __metadata$5("design:type", String)
@@ -128414,10 +128432,6 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                 Input(),
                 __metadata$5("design:type", Object)
             ], StripePaymentMethodComponent.prototype, "defaultBillingInfo", void 0);
-            __decorate$6([
-                Input(),
-                __metadata$5("design:type", Object)
-            ], StripePaymentMethodComponent.prototype, "paymentMethodApiPath", void 0);
             StripePaymentMethodComponent = __decorate$6([
                 Component({
                     selector: `sa-${packageName$4}-${componentName$4}`,
@@ -128464,7 +128478,7 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                     this.editable = false;
                     this.styled = false;
                     this.initialized = false;
-                    this.uid = uniqueId$3(`sa_${snakeCase(this.title)}_`);
+                    this.uid = safeUniqueId('sa', snakeCase(this.title));
                     Stratus.Instances[this.uid] = this;
                     this.elementId = this.elementId || this.uid;
                     Stratus.Internals.CssLoader(`${localDir$2}${componentName$3}.component${min$2}.css`)
@@ -128608,7 +128622,7 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                     this.addCardButtonText = 'Add Payment Method';
                     this.disabled = false;
                     this.defaultBillingInfo = { address: {} };
-                    this.uid = uniqueId$3(`sa_${snakeCase(this.title)}_`);
+                    this.uid = safeUniqueId('sa', snakeCase(this.title));
                     Stratus.Instances[this.uid] = this;
                     this.elementId = this.elementId || this.uid;
                     Stratus.Internals.CssLoader(`${localDir$1}${componentName$2}.component${min$1}.css`)
@@ -128784,7 +128798,7 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                         [this.fieldName]: new FormControl(),
                         [this.fieldNameId]: new FormControl({ disabled: true })
                     });
-                    this.uid = uniqueId$3(`sa_${snakeCase(this.title)}_`);
+                    this.uid = safeUniqueId('sa', snakeCase(this.title));
                     Stratus.Instances[this.uid] = this;
                     this.elementId = this.elementId || this.uid;
                     Stratus.Internals.CssLoader(`${localDir}${componentName$1}.component${min}.css`)
@@ -129088,7 +129102,7 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                     this.urlRoot = '/Api';
                     this.paymentMethodApiPath = 'PaymentMethod';
                     this.addCardButtonText = 'Add Payment Method';
-                    this.uid = uniqueId$3(`sa_${snakeCase(this.title)}_`);
+                    this.uid = safeUniqueId('sa', snakeCase(this.title));
                     Stratus.Instances[this.uid] = this;
                     this.elementId = this.elementId || this.uid;
                     this.hydrate(this.elementRef, this.sanitizer, ["title", "uid", "elementId", "styled", "initialized", "newPaymentMethodPrompt", "newPaymentMethodPending", "urlRoot", "paymentMethodApiPath", "addCardButtonText", "detailedBillingInfo", "defaultBillingInfo", "elementRef", "sanitizer", "dialog", "ngOnInit", "addPaymentMethod", "inputPaymentMethod", "hydrate", "ref", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
@@ -129098,6 +129112,9 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                 }
                 addPaymentMethod(ev) {
                     return __awaiter(this, void 0, void 0, function* () {
+                        if (ev) {
+                            ev.preventDefault();
+                        }
                         if (!this.newPaymentMethodPending && !this.newPaymentMethodPrompt) {
                             let clientSecret = '';
                             let publishKey = '';
@@ -129147,6 +129164,8 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                             clientSecret,
                             publishKey,
                             formMessage,
+                            urlRoot: this.urlRoot,
+                            paymentMethodApiPath: this.paymentMethodApiPath,
                             detailedBillingInfo: this.detailedBillingInfo,
                             defaultBillingInfo: this.defaultBillingInfo
                         }
@@ -160855,6 +160874,150 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                 };
             });
 
+            System.register(["quill"], function (exports_1, context_1) {
+                var quill_1, BaseImage, ATTRIBUTES, QuillImageFormatPlugin;
+                context_1 && context_1.id;
+                return {
+                    setters: [
+                        function (quill_1_1) {
+                            quill_1 = quill_1_1;
+                        }
+                    ],
+                    execute: function () {
+                        BaseImage = quill_1.default.import('formats/image');
+                        ATTRIBUTES = [
+                            'alt',
+                            'height',
+                            'width',
+                            'stratus-src',
+                            'stratusSrc'
+                        ];
+                        QuillImageFormatPlugin = class QuillImageFormatPlugin extends BaseImage {
+                            constructor() {
+                                super(...arguments);
+                                this.blotName = 'imageCustom';
+                                this.tagName = 'IMG';
+                            }
+                            format(name, value) {
+                                console.log('format:', name, value, this.domNode.getAttribute('src'));
+                                if (ATTRIBUTES.indexOf(name) === -1) {
+                                    super.format(name, value);
+                                    return;
+                                }
+                                if (!value) {
+                                    this.domNode.removeAttribute(name);
+                                    return;
+                                }
+                                if (name === 'stratus-src') {
+                                    console.log('stratus-src:', value);
+                                }
+                                if (name === 'stratusSrc') {
+                                    console.log('stratusSrc:', value);
+                                }
+                                this.domNode.setAttribute(name, value);
+                            }
+                        };
+                        exports_1("QuillImageFormatPlugin", QuillImageFormatPlugin);
+                    }
+                };
+            });
+
+            System.register(["@stratusjs/runtime/stratus", "lodash", "quill"], function (exports_1, context_1) {
+                var stratus_1, lodash_1, quill_1, QuillInputButtonPlugin;
+                context_1 && context_1.id;
+                return {
+                    setters: [
+                        function (stratus_1_1) {
+                            stratus_1 = stratus_1_1;
+                        },
+                        function (lodash_1_1) {
+                            lodash_1 = lodash_1_1;
+                        },
+                        function (quill_1_1) {
+                            quill_1 = quill_1_1;
+                        }
+                    ],
+                    execute: function () {
+                        QuillInputButtonPlugin = class QuillInputButtonPlugin {
+                            constructor(quill, options) {
+                                this.debug = false;
+                                this.buttonHTML = '<i class="fas fa-carrot"></i>';
+                                this.buttonTitle = 'Input Button';
+                                this.name = 'inputButton';
+                                this.eventName = 'input-button';
+                                this.uid = lodash_1.default.uniqueId(`quill_input_button_`);
+                                stratus_1.Stratus.Instances[this.uid] = this;
+                                this.debug = options && options.debug;
+                                if (!options || typeof options !== 'object') {
+                                    options = {};
+                                }
+                                this.buttonHTML = options.buttonHTML || this.buttonHTML;
+                                this.buttonTitle = options.buttonTitle || this.buttonTitle;
+                                this.name = options.name || this.name;
+                                this.eventName = options.eventName || this.eventName;
+                                this.createToolbarModule(quill);
+                            }
+                            createToolbarModule(quill) {
+                                const toolbarModule = quill.getModule('toolbar');
+                                if (!toolbarModule) {
+                                    throw new Error(`quill.${this.name} requires the "toolbar" module`);
+                                }
+                                this.registerDivModule();
+                                const toolbarEl = toolbarModule.container;
+                                const buttonContainer = document.createElement('span');
+                                buttonContainer.setAttribute('class', 'ql-formats');
+                                const button = document.createElement('button');
+                                button.innerHTML = this.buttonHTML;
+                                button.title = this.buttonTitle;
+                                button.onclick = (e) => {
+                                    e.preventDefault();
+                                    this.onClick(quill);
+                                };
+                                buttonContainer.appendChild(button);
+                                toolbarEl.appendChild(buttonContainer);
+                            }
+                            registerDivModule() {
+                                const Block = quill_1.default.import('blots/block');
+                                class Div extends Block {
+                                }
+                                Div.tagName = 'div';
+                                Div.blotName = 'div';
+                                Div.allowedChildren = Block.allowedChildren;
+                                Div.allowedChildren.push(Block);
+                                quill_1.default.register(Div);
+                            }
+                            findUID(el) {
+                                if ('uid' in el.dataset) {
+                                    return el.dataset.uid;
+                                }
+                                return this.findUID(el.parentElement);
+                            }
+                            getInstance(uid) {
+                                if (!(uid in stratus_1.Stratus.Instances)) {
+                                    return undefined;
+                                }
+                                return stratus_1.Stratus.Instances[uid];
+                            }
+                            onClick(quill) {
+                                const container = quill.container;
+                                const uid = this.findUID(container);
+                                const instance = this.getInstance(uid);
+                                if (!instance) {
+                                    return;
+                                }
+                                instance.trigger(this.eventName, null, this);
+                            }
+                            trigger(name, data, callee) {
+                                if (this.debug) {
+                                    console.log(`quill.${this.name}.trigger:`, name, data, callee);
+                                }
+                            }
+                        };
+                        exports_1("QuillInputButtonPlugin", QuillInputButtonPlugin);
+                    }
+                };
+            });
+
             System.register(["quill"], function (exports_1, context_1) {
                 var quill_1, debug, Logger, QuillHtmlEditPlugin;
                 context_1 && context_1.id;
@@ -161014,150 +161177,6 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                 };
             });
 
-            System.register(["quill"], function (exports_1, context_1) {
-                var quill_1, BaseImage, ATTRIBUTES, QuillImageFormatPlugin;
-                context_1 && context_1.id;
-                return {
-                    setters: [
-                        function (quill_1_1) {
-                            quill_1 = quill_1_1;
-                        }
-                    ],
-                    execute: function () {
-                        BaseImage = quill_1.default.import('formats/image');
-                        ATTRIBUTES = [
-                            'alt',
-                            'height',
-                            'width',
-                            'stratus-src',
-                            'stratusSrc'
-                        ];
-                        QuillImageFormatPlugin = class QuillImageFormatPlugin extends BaseImage {
-                            constructor() {
-                                super(...arguments);
-                                this.blotName = 'imageCustom';
-                                this.tagName = 'IMG';
-                            }
-                            format(name, value) {
-                                console.log('format:', name, value, this.domNode.getAttribute('src'));
-                                if (ATTRIBUTES.indexOf(name) === -1) {
-                                    super.format(name, value);
-                                    return;
-                                }
-                                if (!value) {
-                                    this.domNode.removeAttribute(name);
-                                    return;
-                                }
-                                if (name === 'stratus-src') {
-                                    console.log('stratus-src:', value);
-                                }
-                                if (name === 'stratusSrc') {
-                                    console.log('stratusSrc:', value);
-                                }
-                                this.domNode.setAttribute(name, value);
-                            }
-                        };
-                        exports_1("QuillImageFormatPlugin", QuillImageFormatPlugin);
-                    }
-                };
-            });
-
-            System.register(["@stratusjs/runtime/stratus", "lodash", "quill"], function (exports_1, context_1) {
-                var stratus_1, lodash_1, quill_1, QuillInputButtonPlugin;
-                context_1 && context_1.id;
-                return {
-                    setters: [
-                        function (stratus_1_1) {
-                            stratus_1 = stratus_1_1;
-                        },
-                        function (lodash_1_1) {
-                            lodash_1 = lodash_1_1;
-                        },
-                        function (quill_1_1) {
-                            quill_1 = quill_1_1;
-                        }
-                    ],
-                    execute: function () {
-                        QuillInputButtonPlugin = class QuillInputButtonPlugin {
-                            constructor(quill, options) {
-                                this.debug = false;
-                                this.buttonHTML = '<i class="fas fa-carrot"></i>';
-                                this.buttonTitle = 'Input Button';
-                                this.name = 'inputButton';
-                                this.eventName = 'input-button';
-                                this.uid = lodash_1.default.uniqueId(`quill_input_button_`);
-                                stratus_1.Stratus.Instances[this.uid] = this;
-                                this.debug = options && options.debug;
-                                if (!options || typeof options !== 'object') {
-                                    options = {};
-                                }
-                                this.buttonHTML = options.buttonHTML || this.buttonHTML;
-                                this.buttonTitle = options.buttonTitle || this.buttonTitle;
-                                this.name = options.name || this.name;
-                                this.eventName = options.eventName || this.eventName;
-                                this.createToolbarModule(quill);
-                            }
-                            createToolbarModule(quill) {
-                                const toolbarModule = quill.getModule('toolbar');
-                                if (!toolbarModule) {
-                                    throw new Error(`quill.${this.name} requires the "toolbar" module`);
-                                }
-                                this.registerDivModule();
-                                const toolbarEl = toolbarModule.container;
-                                const buttonContainer = document.createElement('span');
-                                buttonContainer.setAttribute('class', 'ql-formats');
-                                const button = document.createElement('button');
-                                button.innerHTML = this.buttonHTML;
-                                button.title = this.buttonTitle;
-                                button.onclick = (e) => {
-                                    e.preventDefault();
-                                    this.onClick(quill);
-                                };
-                                buttonContainer.appendChild(button);
-                                toolbarEl.appendChild(buttonContainer);
-                            }
-                            registerDivModule() {
-                                const Block = quill_1.default.import('blots/block');
-                                class Div extends Block {
-                                }
-                                Div.tagName = 'div';
-                                Div.blotName = 'div';
-                                Div.allowedChildren = Block.allowedChildren;
-                                Div.allowedChildren.push(Block);
-                                quill_1.default.register(Div);
-                            }
-                            findUID(el) {
-                                if ('uid' in el.dataset) {
-                                    return el.dataset.uid;
-                                }
-                                return this.findUID(el.parentElement);
-                            }
-                            getInstance(uid) {
-                                if (!(uid in stratus_1.Stratus.Instances)) {
-                                    return undefined;
-                                }
-                                return stratus_1.Stratus.Instances[uid];
-                            }
-                            onClick(quill) {
-                                const container = quill.container;
-                                const uid = this.findUID(container);
-                                const instance = this.getInstance(uid);
-                                if (!instance) {
-                                    return;
-                                }
-                                instance.trigger(this.eventName, null, this);
-                            }
-                            trigger(name, data, callee) {
-                                if (this.debug) {
-                                    console.log(`quill.${this.name}.trigger:`, name, data, callee);
-                                }
-                            }
-                        };
-                        exports_1("QuillInputButtonPlugin", QuillInputButtonPlugin);
-                    }
-                };
-            });
-
             System.register(["reflect-metadata", "lodash", "@angular/core"], function (exports_1, context_1) {
                 var lodash_1, core_1, RootComponent;
                 context_1 && context_1.id;
@@ -161577,108 +161596,6 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                 };
             });
 
-            System.register(["@angular/core"], function (exports_1, context_1) {
-                var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-                    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-                    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-                    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-                    return c > 3 && r && Object.defineProperty(target, key, r), r;
-                };
-                var __metadata = (this && this.__metadata) || function (k, v) {
-                    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-                };
-                var core_1, FroalaViewDirective;
-                context_1 && context_1.id;
-                return {
-                    setters: [
-                        function (core_1_1) {
-                            core_1 = core_1_1;
-                        }
-                    ],
-                    execute: function () {
-                        FroalaViewDirective = class FroalaViewDirective {
-                            constructor(renderer, element) {
-                                this.renderer = renderer;
-                                this._element = element.nativeElement;
-                            }
-                            set froalaView(content) {
-                                this._element.innerHTML = content;
-                            }
-                            ngAfterViewInit() {
-                                this.renderer.addClass(this._element, 'fr-view');
-                            }
-                        };
-                        __decorate([
-                            core_1.Input(),
-                            __metadata("design:type", String),
-                            __metadata("design:paramtypes", [String])
-                        ], FroalaViewDirective.prototype, "froalaView", null);
-                        FroalaViewDirective = __decorate([
-                            core_1.Directive({
-                                selector: '[froalaView]'
-                            }),
-                            __metadata("design:paramtypes", [core_1.Renderer2, core_1.ElementRef])
-                        ], FroalaViewDirective);
-                        exports_1("FroalaViewDirective", FroalaViewDirective);
-                    }
-                };
-            });
-
-            System.register(["@angular/core", "@stratusjs/angular/froala/view/froala-view.directive"], function (exports_1, context_1) {
-                var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-                    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-                    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-                    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-                    return c > 3 && r && Object.defineProperty(target, key, r), r;
-                };
-                var FroalaViewModule_1, core_1, froala_view_directive_1, FroalaViewModule;
-                context_1 && context_1.id;
-                return {
-                    setters: [
-                        function (core_1_1) {
-                            core_1 = core_1_1;
-                        },
-                        function (froala_view_directive_1_1) {
-                            froala_view_directive_1 = froala_view_directive_1_1;
-                        }
-                    ],
-                    execute: function () {
-                        FroalaViewModule = FroalaViewModule_1 = class FroalaViewModule {
-                            static forRoot() {
-                                return { ngModule: FroalaViewModule_1, providers: [] };
-                            }
-                        };
-                        FroalaViewModule = FroalaViewModule_1 = __decorate([
-                            core_1.NgModule({
-                                declarations: [froala_view_directive_1.FroalaViewDirective],
-                                exports: [froala_view_directive_1.FroalaViewDirective]
-                            })
-                        ], FroalaViewModule);
-                        exports_1("FroalaViewModule", FroalaViewModule);
-                    }
-                };
-            });
-
-            System.register(["@stratusjs/angular/froala/view/froala-view.directive", "@stratusjs/angular/froala/view/froala-view.module"], function (exports_1, context_1) {
-                context_1 && context_1.id;
-                return {
-                    setters: [
-                        function (froala_view_directive_1_1) {
-                            exports_1({
-                                "FroalaViewDirective": froala_view_directive_1_1["FroalaViewDirective"]
-                            });
-                        },
-                        function (froala_view_module_1_1) {
-                            exports_1({
-                                "FroalaViewModule": froala_view_module_1_1["FroalaViewModule"]
-                            });
-                        }
-                    ],
-                    execute: function () {
-                    }
-                };
-            });
-
             /*!
              * froala_editor v3.2.3 (https://www.froala.com/wysiwyg-editor)
              * License https://froala.com/wysiwyg-editor/terms/
@@ -162041,6 +161958,53 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                 };
             });
 
+            System.register(["@angular/core"], function (exports_1, context_1) {
+                var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+                    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+                    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+                    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+                    return c > 3 && r && Object.defineProperty(target, key, r), r;
+                };
+                var __metadata = (this && this.__metadata) || function (k, v) {
+                    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+                };
+                var core_1, FroalaViewDirective;
+                context_1 && context_1.id;
+                return {
+                    setters: [
+                        function (core_1_1) {
+                            core_1 = core_1_1;
+                        }
+                    ],
+                    execute: function () {
+                        FroalaViewDirective = class FroalaViewDirective {
+                            constructor(renderer, element) {
+                                this.renderer = renderer;
+                                this._element = element.nativeElement;
+                            }
+                            set froalaView(content) {
+                                this._element.innerHTML = content;
+                            }
+                            ngAfterViewInit() {
+                                this.renderer.addClass(this._element, 'fr-view');
+                            }
+                        };
+                        __decorate([
+                            core_1.Input(),
+                            __metadata("design:type", String),
+                            __metadata("design:paramtypes", [String])
+                        ], FroalaViewDirective.prototype, "froalaView", null);
+                        FroalaViewDirective = __decorate([
+                            core_1.Directive({
+                                selector: '[froalaView]'
+                            }),
+                            __metadata("design:paramtypes", [core_1.Renderer2, core_1.ElementRef])
+                        ], FroalaViewDirective);
+                        exports_1("FroalaViewDirective", FroalaViewDirective);
+                    }
+                };
+            });
+
             FroalaEditor.DEFAULTS = Object.assign(FroalaEditor.DEFAULTS, {});
             FroalaEditor.PLUGINS.menuButton = function menuButton(editor) {
                 let inputButton;
@@ -162105,6 +162069,61 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                 undo: true
             });
 
+            System.register(["@angular/core", "@stratusjs/angular/froala/view/froala-view.directive"], function (exports_1, context_1) {
+                var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+                    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+                    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+                    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+                    return c > 3 && r && Object.defineProperty(target, key, r), r;
+                };
+                var FroalaViewModule_1, core_1, froala_view_directive_1, FroalaViewModule;
+                context_1 && context_1.id;
+                return {
+                    setters: [
+                        function (core_1_1) {
+                            core_1 = core_1_1;
+                        },
+                        function (froala_view_directive_1_1) {
+                            froala_view_directive_1 = froala_view_directive_1_1;
+                        }
+                    ],
+                    execute: function () {
+                        FroalaViewModule = FroalaViewModule_1 = class FroalaViewModule {
+                            static forRoot() {
+                                return { ngModule: FroalaViewModule_1, providers: [] };
+                            }
+                        };
+                        FroalaViewModule = FroalaViewModule_1 = __decorate([
+                            core_1.NgModule({
+                                declarations: [froala_view_directive_1.FroalaViewDirective],
+                                exports: [froala_view_directive_1.FroalaViewDirective]
+                            })
+                        ], FroalaViewModule);
+                        exports_1("FroalaViewModule", FroalaViewModule);
+                    }
+                };
+            });
+
+            System.register(["@stratusjs/angular/froala/view/froala-view.directive", "@stratusjs/angular/froala/view/froala-view.module"], function (exports_1, context_1) {
+                context_1 && context_1.id;
+                return {
+                    setters: [
+                        function (froala_view_directive_1_1) {
+                            exports_1({
+                                "FroalaViewDirective": froala_view_directive_1_1["FroalaViewDirective"]
+                            });
+                        },
+                        function (froala_view_module_1_1) {
+                            exports_1({
+                                "FroalaViewModule": froala_view_module_1_1["FroalaViewModule"]
+                            });
+                        }
+                    ],
+                    execute: function () {
+                    }
+                };
+            });
+
         })
     };
 }));