@stratusjs/angular 0.7.4 → 0.7.6

package/dist/angular.bundle.js

@@ -1,6 +1,6 @@
-System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/environment', '@stratusjs/core/misc', '@stratusjs/angularjs/services/model', '@stratusjs/angularjs/services/registry', '@stratusjs/core/events/eventManager', 'html2pdf', 'font-awesome', 'froala-plugins', 'froala-embedly', 'froala-font-awesome', 'froala-image-tui', 'froala-editor', '@stratusjs/core/datastore/xhr', '@agentepsilon/decko', 'toastify-js', '@stratusjs/angularjs/services/collection', 'zone.js/dist/zone'], (function (exports) {
+System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/environment', '@stratusjs/core/misc', '@stratusjs/angularjs/services/model', '@stratusjs/angularjs/services/registry', '@stratusjs/core/events/eventManager', 'html2pdf', 'font-awesome', 'froala-plugins', 'froala-embedly', 'froala-font-awesome', 'froala-image-tui', 'froala-editor', '@stratusjs/core/datastore/xhr', '@agentepsilon/decko', '@stratusjs/angular/core/root.component', 'toastify-js', '@stratusjs/angularjs/services/collection', 'zone.js/dist/zone'], (function (exports) {
     'use strict';
-    var Stratus, _, uniqueId$3, snakeCase, head, isEmpty, isUndefined, isString, extend$1, debounce$2, isNumber, isBoolean, isArray$1, clone, isFunction$1, set, isNil, includes, isObject$2, assignIn, forEach, cookie, isJSON, safeUniqueId, Model, Registry, EventManager$1, FroalaEditor, XHR, debounce$1, Toastify, Collection;
+    var Stratus, _, uniqueId$3, snakeCase, head, isEmpty, isUndefined, isString, extend$1, debounce$2, isNumber, isBoolean, isArray$1, clone, isFunction$1, set, isNil, includes, isObject$2, assignIn, forEach, cookie, isJSON, safeUniqueId, Model, Registry, EventManager$1, FroalaEditor, XHR, debounce$1, RootComponent$1, Toastify, Collection;
     return {
         setters: [function (module) {
             Stratus = module.Stratus;
@@ -42,6 +42,8 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
             XHR = module.XHR;
         }, function (module) {
             debounce$1 = module.debounce;
+        }, function (module) {
+            RootComponent$1 = module.RootComponent;
         }, function (module) {
             Toastify = module["default"];
         }, function (module) {
@@ -80847,6 +80849,7 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                         console.log('[restoreSnapshot]is focused:', this.editor.core.hasFocus());
                     }
                     this.editor.events.disableBlur();
+                    this.editor.events.focus();
                     this.editor.snapshot.restore(this.snapshot);
                     this.editor.events.enableBlur();
                     return true;
@@ -80866,6 +80869,7 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                         console.log('[restoreSelection]is focused:', this.editor.core.hasFocus());
                     }
                     this.editor.events.disableBlur();
+                    this.editor.events.focus();
                     this.editor.selection.restore();
                     this.editor.events.enableBlur();
                     return true;
@@ -81072,7 +81076,6 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                             editor.link.insert(link.url, link.text, attrs);
                         },
                         autoSaveSelection: true,
-                        maintainSnapshot: true,
                         autoRestoreSelection: true,
                         debug
                     });
@@ -81095,8 +81098,9 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
             FroalaEditor.RegisterCommand('linkManager', {
                 title: 'Insert from Link Library',
                 undo: false,
-                focus: false,
+                focus: true,
                 modal: true,
+                refreshOnCallback: false,
                 callback() {
                     this.linkManager.onClick();
                 },
@@ -124802,11 +124806,6 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                     /** Width of the map. Set this to `null` if you'd like to control the width through CSS. */
                     this.width = DEFAULT_WIDTH;
                     this._options = DEFAULT_OPTIONS;
-                    /**
-                     * See
-                     * https://developers.google.com/maps/documentation/javascript/events#auth-errors
-                     */
-                    this.authFailure = new EventEmitter();
                     /**
                      * See
                      * https://developers.google.com/maps/documentation/javascript/reference/map#Map.bounds_changed
@@ -124907,13 +124906,6 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                                 'https://developers.google.com/maps/documentation/javascript/' +
                                 'tutorial#Loading_the_Maps_API');
                         }
-                        this._existingAuthFailureCallback = googleMapsWindow.gm_authFailure;
-                        googleMapsWindow.gm_authFailure = () => {
-                            if (this._existingAuthFailureCallback) {
-                                this._existingAuthFailureCallback();
-                            }
-                            this.authFailure.emit();
-                        };
                     }
                 }
                 set center(center) {
@@ -124962,10 +124954,6 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                 }
                 ngOnDestroy() {
                     this._eventManager.destroy();
-                    if (this._isBrowser) {
-                        const googleMapsWindow = window;
-                        googleMapsWindow.gm_authFailure = this._existingAuthFailureCallback;
-                    }
                 }
                 /**
                  * See
@@ -125152,7 +125140,6 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                 center: [{ type: Input }],
                 zoom: [{ type: Input }],
                 options: [{ type: Input }],
-                authFailure: [{ type: Output }],
                 boundsChanged: [{ type: Output }],
                 centerChanged: [{ type: Output }],
                 mapClick: [{ type: Output }],
@@ -125505,131 +125492,6 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                 circleRightclick: [{ type: Output }]
             };
 
-            /**
-             * @license
-             * Copyright Google LLC All Rights Reserved.
-             *
-             * Use of this source code is governed by an MIT-style license that can be
-             * found in the LICENSE file at https://angular.io/license
-             */
-            /**
-             * Angular component that renders a Google Maps Directions Renderer via the Google Maps
-             * JavaScript API.
-             *
-             * See developers.google.com/maps/documentation/javascript/reference/directions#DirectionsRenderer
-             */
-            class MapDirectionsRenderer {
-                constructor(_googleMap, _ngZone) {
-                    this._googleMap = _googleMap;
-                    this._ngZone = _ngZone;
-                    this._eventManager = new MapEventManager(this._ngZone);
-                    /**
-                     * See developers.google.com/maps/documentation/javascript/reference/directions
-                     * #DirectionsRenderer.directions_changed
-                     */
-                    this.directionsChanged = this._eventManager.getLazyEmitter('directions_changed');
-                }
-                /**
-                 * See developers.google.com/maps/documentation/javascript/reference/directions
-                 * #DirectionsRendererOptions.directions
-                 */
-                set directions(directions) {
-                    this._directions = directions;
-                }
-                /**
-                 * See developers.google.com/maps/documentation/javascript/reference/directions
-                 * #DirectionsRendererOptions
-                 */
-                set options(options) {
-                    this._options = options;
-                }
-                ngOnInit() {
-                    if (this._googleMap._isBrowser) {
-                        // Create the object outside the zone so its events don't trigger change detection.
-                        // We'll bring it back in inside the `MapEventManager` only for the events that the
-                        // user has subscribed to.
-                        this._ngZone.runOutsideAngular(() => {
-                            this.directionsRenderer = new google.maps.DirectionsRenderer(this._combineOptions());
-                        });
-                        this._assertInitialized();
-                        this.directionsRenderer.setMap(this._googleMap.googleMap);
-                        this._eventManager.setTarget(this.directionsRenderer);
-                    }
-                }
-                ngOnChanges(changes) {
-                    if (this.directionsRenderer) {
-                        if (changes['options']) {
-                            this.directionsRenderer.setOptions(this._combineOptions());
-                        }
-                        if (changes['directions'] && this._directions !== undefined) {
-                            this.directionsRenderer.setDirections(this._directions);
-                        }
-                    }
-                }
-                ngOnDestroy() {
-                    this._eventManager.destroy();
-                    if (this.directionsRenderer) {
-                        this.directionsRenderer.setMap(null);
-                    }
-                }
-                /**
-                 * See developers.google.com/maps/documentation/javascript/reference/directions
-                 * #DirectionsRenderer.getDirections
-                 */
-                getDirections() {
-                    this._assertInitialized();
-                    return this.directionsRenderer.getDirections();
-                }
-                /**
-                 * See developers.google.com/maps/documentation/javascript/reference/directions
-                 * #DirectionsRenderer.getPanel
-                 */
-                getPanel() {
-                    this._assertInitialized();
-                    return this.directionsRenderer.getPanel();
-                }
-                /**
-                 * See developers.google.com/maps/documentation/javascript/reference/directions
-                 * #DirectionsRenderer.getRouteIndex
-                 */
-                getRouteIndex() {
-                    this._assertInitialized();
-                    return this.directionsRenderer.getRouteIndex();
-                }
-                _combineOptions() {
-                    const options = this._options || {};
-                    return Object.assign(Object.assign({}, options), { directions: this._directions || options.directions, map: this._googleMap.googleMap });
-                }
-                _assertInitialized() {
-                    if (typeof ngDevMode === 'undefined' || ngDevMode) {
-                        if (!this._googleMap.googleMap) {
-                            throw Error('Cannot access Google Map information before the API has been initialized. ' +
-                                'Please wait for the API to load before trying to interact with it.');
-                        }
-                        if (!this.directionsRenderer) {
-                            throw Error('Cannot interact with a Google Map Directions Renderer before it has been ' +
-                                'initialized. Please wait for the Directions Renderer to load before trying ' +
-                                'to interact with it.');
-                        }
-                    }
-                }
-            }
-            MapDirectionsRenderer.decorators = [
-                { type: Directive, args: [{
-                            selector: 'map-directions-renderer',
-                            exportAs: 'mapDirectionsRenderer',
-                        },] }
-            ];
-            MapDirectionsRenderer.ctorParameters = () => [
-                { type: GoogleMap },
-                { type: NgZone }
-            ];
-            MapDirectionsRenderer.propDecorators = {
-                directions: [{ type: Input }],
-                options: [{ type: Input }],
-                directionsChanged: [{ type: Output }]
-            };
-
             /**
              * @license
              * Copyright Google LLC All Rights Reserved.
@@ -126298,20 +126160,6 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                 set options(options) {
                     this._options = options;
                 }
-                /**
-                 * Icon to be used for the marker.
-                 * See: https://developers.google.com/maps/documentation/javascript/reference/marker#Icon
-                 */
-                set icon(icon) {
-                    this._icon = icon;
-                }
-                /**
-                 * Whether the marker is visible.
-                 * See: developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions.visible
-                 */
-                set visible(value) {
-                    this._visible = value;
-                }
                 ngOnInit() {
                     if (this._googleMap._isBrowser) {
                         // Create the object outside the zone so its events don't trigger change detection.
@@ -126326,7 +126174,7 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                     }
                 }
                 ngOnChanges(changes) {
-                    const { marker, _title, _position, _label, _clickable, _icon, _visible } = this;
+                    const { marker, _title, _position, _label, _clickable } = this;
                     if (marker) {
                         if (changes['options']) {
                             marker.setOptions(this._combineOptions());
@@ -126343,12 +126191,6 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                         if (changes['clickable'] && _clickable !== undefined) {
                             marker.setClickable(_clickable);
                         }
-                        if (changes['icon'] && _icon) {
-                            marker.setIcon(_icon);
-                        }
-                        if (changes['visible'] && _visible !== undefined) {
-                            marker.setVisible(_visible);
-                        }
                     }
                 }
                 ngOnDestroy() {
@@ -126460,9 +126302,8 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                 }
                 /** Creates a combined options object using the passed-in options and the individual inputs. */
                 _combineOptions() {
-                    var _a, _b;
                     const options = this._options || DEFAULT_MARKER_OPTIONS;
-                    return Object.assign(Object.assign({}, options), { title: this._title || options.title, position: this._position || options.position, label: this._label || options.label, clickable: (_a = this._clickable) !== null && _a !== void 0 ? _a : options.clickable, map: this._googleMap.googleMap, icon: this._icon || options.icon, visible: (_b = this._visible) !== null && _b !== void 0 ? _b : options.visible });
+                    return Object.assign(Object.assign({}, options), { title: this._title || options.title, position: this._position || options.position, label: this._label || options.label, clickable: this._clickable !== undefined ? this._clickable : options.clickable, map: this._googleMap.googleMap });
                 }
                 _assertInitialized() {
                     if (typeof ngDevMode === 'undefined' || ngDevMode) {
@@ -126493,8 +126334,6 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                 label: [{ type: Input }],
                 clickable: [{ type: Input }],
                 options: [{ type: Input }],
-                icon: [{ type: Input }],
-                visible: [{ type: Input }],
                 animationChanged: [{ type: Output }],
                 mapClick: [{ type: Output }],
                 clickableChanged: [{ type: Output }],
@@ -126525,8 +126364,6 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
              * Use of this source code is governed by an MIT-style license that can be
              * found in the LICENSE file at https://angular.io/license
              */
-            /** Default options for a clusterer. */
-            const DEFAULT_CLUSTERER_OPTIONS = {};
             /**
              * Angular component for implementing a Google Maps Marker Clusterer.
              *
@@ -126551,8 +126388,6 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                      * googlemaps.github.io/v3-utility-library/modules/_google_markerclustererplus.html#clusteringend
                      */
                     this.clusteringend = this._eventManager.getLazyEmitter('clusteringend');
-                    /** Emits when a cluster has been clicked. */
-                    this.clusterClick = this._eventManager.getLazyEmitter('click');
                     this._canInitialize = this._googleMap._isBrowser;
                 }
                 set averageCenter(averageCenter) {
@@ -126603,17 +126438,8 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                 set zoomOnClick(zoomOnClick) {
                     this._zoomOnClick = zoomOnClick;
                 }
-                set options(options) {
-                    this._options = options;
-                }
                 ngOnInit() {
                     if (this._canInitialize) {
-                        const clustererWindow = window;
-                        if (!clustererWindow.MarkerClusterer && (typeof ngDevMode === 'undefined' || ngDevMode)) {
-                            throw Error('MarkerClusterer class not found, cannot construct a marker cluster. ' +
-                                'Please install the MarkerClustererPlus library: ' +
-                                'https://github.com/googlemaps/js-markerclustererplus');
-                        }
                         // Create the object outside the zone so its events don't trigger change detection.
                         // We'll bring it back in inside the `MapEventManager` only for the events that the
                         // user has subscribed to.
@@ -126632,9 +126458,6 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                 ngOnChanges(changes) {
                     const { markerClusterer: clusterer, ariaLabelFn, _averageCenter, _batchSizeIE, _calculator, _styles, _clusterClass, _enableRetinaIcons, _gridSize, _ignoreHidden, _imageExtension, _imagePath, _imageSizes, _maxZoom, _minimumClusterSize, _title, _zIndex, _zoomOnClick } = this;
                     if (clusterer) {
-                        if (changes['options']) {
-                            clusterer.setOptions(this._combineOptions());
-                        }
                         if (changes['ariaLabelFn']) {
                             clusterer.ariaLabelFn = ariaLabelFn;
                         }
@@ -126644,7 +126467,7 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                         if (changes['batchSizeIE'] && _batchSizeIE !== undefined) {
                             clusterer.setBatchSizeIE(_batchSizeIE);
                         }
-                        if (changes['calculator'] && !!_calculator) {
+                        if (changes['calculator'] && _calculator) {
                             clusterer.setCalculator(_calculator);
                         }
                         if (changes['clusterClass'] && _clusterClass !== undefined) {
@@ -126777,9 +126600,26 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                     return this.markerClusterer.getZoomOnClick();
                 }
                 _combineOptions() {
-                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-                    const options = this._options || DEFAULT_CLUSTERER_OPTIONS;
-                    return Object.assign(Object.assign({}, options), { ariaLabelFn: (_a = this.ariaLabelFn) !== null && _a !== void 0 ? _a : options.ariaLabelFn, averageCenter: (_b = this._averageCenter) !== null && _b !== void 0 ? _b : options.averageCenter, batchSize: (_c = this.batchSize) !== null && _c !== void 0 ? _c : options.batchSize, batchSizeIE: (_d = this._batchSizeIE) !== null && _d !== void 0 ? _d : options.batchSizeIE, calculator: (_e = this._calculator) !== null && _e !== void 0 ? _e : options.calculator, clusterClass: (_f = this._clusterClass) !== null && _f !== void 0 ? _f : options.clusterClass, enableRetinaIcons: (_g = this._enableRetinaIcons) !== null && _g !== void 0 ? _g : options.enableRetinaIcons, gridSize: (_h = this._gridSize) !== null && _h !== void 0 ? _h : options.gridSize, ignoreHidden: (_j = this._ignoreHidden) !== null && _j !== void 0 ? _j : options.ignoreHidden, imageExtension: (_k = this._imageExtension) !== null && _k !== void 0 ? _k : options.imageExtension, imagePath: (_l = this._imagePath) !== null && _l !== void 0 ? _l : options.imagePath, imageSizes: (_m = this._imageSizes) !== null && _m !== void 0 ? _m : options.imageSizes, maxZoom: (_o = this._maxZoom) !== null && _o !== void 0 ? _o : options.maxZoom, minimumClusterSize: (_p = this._minimumClusterSize) !== null && _p !== void 0 ? _p : options.minimumClusterSize, styles: (_q = this._styles) !== null && _q !== void 0 ? _q : options.styles, title: (_r = this._title) !== null && _r !== void 0 ? _r : options.title, zIndex: (_s = this._zIndex) !== null && _s !== void 0 ? _s : options.zIndex, zoomOnClick: (_t = this._zoomOnClick) !== null && _t !== void 0 ? _t : options.zoomOnClick });
+                    return {
+                        ariaLabelFn: this.ariaLabelFn,
+                        averageCenter: this._averageCenter,
+                        batchSize: this.batchSize,
+                        batchSizeIE: this._batchSizeIE,
+                        calculator: this._calculator,
+                        clusterClass: this._clusterClass,
+                        enableRetinaIcons: this._enableRetinaIcons,
+                        gridSize: this._gridSize,
+                        ignoreHidden: this._ignoreHidden,
+                        imageExtension: this._imageExtension,
+                        imagePath: this._imagePath,
+                        imageSizes: this._imageSizes,
+                        maxZoom: this._maxZoom,
+                        minimumClusterSize: this._minimumClusterSize,
+                        styles: this._styles,
+                        title: this._title,
+                        zIndex: this._zIndex,
+                        zoomOnClick: this._zoomOnClick,
+                    };
                 }
                 _watchForMarkerChanges() {
                     this._assertInitialized();
@@ -126862,10 +126702,8 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                 title: [{ type: Input }],
                 zIndex: [{ type: Input }],
                 zoomOnClick: [{ type: Input }],
-                options: [{ type: Input }],
                 clusteringbegin: [{ type: Output }],
                 clusteringend: [{ type: Output }],
-                clusterClick: [{ type: Output }],
                 _markers: [{ type: ContentChildren, args: [MapMarker, { descendants: true },] }]
             };
 
@@ -127265,7 +127103,8 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                     /**
                      * See
                      * developers.google.com/maps/documentation/javascript/reference/polygon#Rectangle.boundsChanged
-                     */ this.boundsChanged = this._eventManager.getLazyEmitter('bounds_changed');
+                     */
+                    this.boundsChanged = this._eventManager.getLazyEmitter('bounds_changed');
                     /**
                      * See
                      * developers.google.com/maps/documentation/javascript/reference/polygon#Rectangle.click
@@ -127566,132 +127405,6 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                         },] }
             ];
 
-            /**
-             * @license
-             * Copyright Google LLC All Rights Reserved.
-             *
-             * Use of this source code is governed by an MIT-style license that can be
-             * found in the LICENSE file at https://angular.io/license
-             */
-            /**
-             * Angular directive that renders a Google Maps heatmap via the Google Maps JavaScript API.
-             *
-             * See: https://developers.google.com/maps/documentation/javascript/reference/visualization
-             */
-            class MapHeatmapLayer {
-                constructor(_googleMap, _ngZone) {
-                    this._googleMap = _googleMap;
-                    this._ngZone = _ngZone;
-                }
-                /**
-                 * Data shown on the heatmap.
-                 * See: https://developers.google.com/maps/documentation/javascript/reference/visualization
-                 */
-                set data(data) {
-                    this._data = data;
-                }
-                /**
-                 * Options used to configure the heatmap. See:
-                 * developers.google.com/maps/documentation/javascript/reference/visualization#HeatmapLayerOptions
-                 */
-                set options(options) {
-                    this._options = options;
-                }
-                ngOnInit() {
-                    var _a, _b;
-                    if (this._googleMap._isBrowser) {
-                        if (!((_b = (_a = window.google) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.visualization) && (typeof ngDevMode === 'undefined' || ngDevMode)) {
-                            throw Error('Namespace `google.maps.visualization` not found, cannot construct heatmap. ' +
-                                'Please install the Google Maps JavaScript API with the "visualization" library: ' +
-                                'https://developers.google.com/maps/documentation/javascript/visualization');
-                        }
-                        // Create the object outside the zone so its events don't trigger change detection.
-                        // We'll bring it back in inside the `MapEventManager` only for the events that the
-                        // user has subscribed to.
-                        this._ngZone.runOutsideAngular(() => {
-                            this.heatmap = new google.maps.visualization.HeatmapLayer(this._combineOptions());
-                        });
-                        this._assertInitialized();
-                        this.heatmap.setMap(this._googleMap.googleMap);
-                    }
-                }
-                ngOnChanges(changes) {
-                    const { _data, heatmap } = this;
-                    if (heatmap) {
-                        if (changes['options']) {
-                            heatmap.setOptions(this._combineOptions());
-                        }
-                        if (changes['data'] && _data !== undefined) {
-                            heatmap.setData(this._normalizeData(_data));
-                        }
-                    }
-                }
-                ngOnDestroy() {
-                    if (this.heatmap) {
-                        this.heatmap.setMap(null);
-                    }
-                }
-                /**
-                 * Gets the data that is currently shown on the heatmap.
-                 * See: developers.google.com/maps/documentation/javascript/reference/visualization#HeatmapLayer
-                 */
-                getData() {
-                    this._assertInitialized();
-                    return this.heatmap.getData();
-                }
-                /** Creates a combined options object using the passed-in options and the individual inputs. */
-                _combineOptions() {
-                    const options = this._options || {};
-                    return Object.assign(Object.assign({}, options), { data: this._normalizeData(this._data || options.data || []), map: this._googleMap.googleMap });
-                }
-                /**
-                 * Most Google Maps APIs support both `LatLng` objects and `LatLngLiteral`. The latter is more
-                 * convenient to write out, because the Google Maps API doesn't have to have been loaded in order
-                 * to construct them. The `HeatmapLayer` appears to be an exception that only allows a `LatLng`
-                 * object, or it throws a runtime error. Since it's more convenient and we expect that Angular
-                 * users will load the API asynchronously, we allow them to pass in a `LatLngLiteral` and we
-                 * convert it to a `LatLng` object before passing it off to Google Maps.
-                 */
-                _normalizeData(data) {
-                    const result = [];
-                    data.forEach(item => {
-                        result.push(isLatLngLiteral(item) ? new google.maps.LatLng(item.lat, item.lng) : item);
-                    });
-                    return result;
-                }
-                /** Asserts that the heatmap object has been initialized. */
-                _assertInitialized() {
-                    if (typeof ngDevMode === 'undefined' || ngDevMode) {
-                        if (!this._googleMap.googleMap) {
-                            throw Error('Cannot access Google Map information before the API has been initialized. ' +
-                                'Please wait for the API to load before trying to interact with it.');
-                        }
-                        if (!this.heatmap) {
-                            throw Error('Cannot interact with a Google Map HeatmapLayer before it has been ' +
-                                'initialized. Please wait for the heatmap to load before trying to interact with it.');
-                        }
-                    }
-                }
-            }
-            MapHeatmapLayer.decorators = [
-                { type: Directive, args: [{
-                            selector: 'map-heatmap-layer',
-                            exportAs: 'mapHeatmapLayer',
-                        },] }
-            ];
-            MapHeatmapLayer.ctorParameters = () => [
-                { type: GoogleMap },
-                { type: NgZone }
-            ];
-            MapHeatmapLayer.propDecorators = {
-                data: [{ type: Input }],
-                options: [{ type: Input }]
-            };
-            /** Asserts that an object is a `LatLngLiteral`. */
-            function isLatLngLiteral(value) {
-                return value && typeof value.lat === 'number' && typeof value.lng === 'number';
-            }
-
             /**
              * @license
              * Copyright Google LLC All Rights Reserved.
@@ -127704,7 +127417,6 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                 MapBaseLayer,
                 MapBicyclingLayer,
                 MapCircle,
-                MapDirectionsRenderer,
                 MapGroundOverlay,
                 MapInfoWindow,
                 MapKmlLayer,
@@ -127715,7 +127427,6 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                 MapRectangle,
                 MapTrafficLayer,
                 MapTransitLayer,
-                MapHeatmapLayer,
             ];
             class GoogleMapsModule {
             }
@@ -127726,95 +127437,6 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                         },] }
             ];
 
-            /**
-             * @license
-             * Copyright Google LLC All Rights Reserved.
-             *
-             * Use of this source code is governed by an MIT-style license that can be
-             * found in the LICENSE file at https://angular.io/license
-             */
-            /**
-             * Angular service that wraps the Google Maps DirectionsService from the Google Maps JavaScript
-             * API.
-             *
-             * See developers.google.com/maps/documentation/javascript/reference/directions#DirectionsService
-             */
-            class MapDirectionsService {
-                constructor(_ngZone) {
-                    this._ngZone = _ngZone;
-                }
-                /**
-                 * See
-                 * developers.google.com/maps/documentation/javascript/reference/directions
-                 * #DirectionsService.route
-                 */
-                route(request) {
-                    return new Observable(observer => {
-                        // Initialize the `DirectionsService` lazily since the Google Maps API may
-                        // not have been loaded when the provider is instantiated.
-                        if (!this._directionsService) {
-                            this._directionsService = new google.maps.DirectionsService();
-                        }
-                        const callback = (result, status) => {
-                            this._ngZone.run(() => {
-                                observer.next({ result, status });
-                                observer.complete();
-                            });
-                        };
-                        this._directionsService.route(request, callback);
-                    });
-                }
-            }
-            MapDirectionsService.ɵprov = ɵɵdefineInjectable({ factory: function MapDirectionsService_Factory() { return new MapDirectionsService(ɵɵinject(NgZone)); }, token: MapDirectionsService, providedIn: "root" });
-            MapDirectionsService.decorators = [
-                { type: Injectable, args: [{ providedIn: 'root' },] }
-            ];
-            MapDirectionsService.ctorParameters = () => [
-                { type: NgZone }
-            ];
-
-            /**
-             * @license
-             * Copyright Google LLC All Rights Reserved.
-             *
-             * Use of this source code is governed by an MIT-style license that can be
-             * found in the LICENSE file at https://angular.io/license
-             */
-            /**
-             * Angular service that wraps the Google Maps Geocoder from the Google Maps JavaScript API.
-             * See developers.google.com/maps/documentation/javascript/reference/geocoder#Geocoder
-             */
-            class MapGeocoder {
-                constructor(_ngZone) {
-                    this._ngZone = _ngZone;
-                }
-                /**
-                 * See developers.google.com/maps/documentation/javascript/reference/geocoder#Geocoder.geocode
-                 */
-                geocode(request) {
-                    return new Observable(observer => {
-                        // Initialize the `Geocoder` lazily since the Google Maps API may
-                        // not have been loaded when the provider is instantiated.
-                        if (!this._geocoder) {
-                            this._geocoder = new google.maps.Geocoder();
-                        }
-                        this._geocoder.geocode(request, (results, status) => {
-                            this._ngZone.run(() => {
-                                observer.next({ results, status });
-                                observer.complete();
-                            });
-                        });
-                    });
-                }
-            }
-            MapGeocoder.ɵprov = ɵɵdefineInjectable({ factory: function MapGeocoder_Factory() { return new MapGeocoder(ɵɵinject(NgZone)); }, token: MapGeocoder, providedIn: "root" });
-            MapGeocoder.decorators = [
-                { type: Injectable, args: [{ providedIn: 'root' },] }
-            ];
-            MapGeocoder.ctorParameters = () => [
-                { type: NgZone }
-            ];
-
             var __decorate$a = (undefined && undefined.__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);
@@ -128457,11 +128079,25 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                     step((generator = generator.apply(thisArg, _arguments || [])).next());
                 });
             };
+            class StripeComponent extends RootComponent$1 {
+                constructor() {
+                    super(...arguments);
+                    this.styled = false;
+                    this.initialized = false;
+                }
+            }
+            __decorate$8([
+                Input(),
+                __metadata$7("design:type", String)
+            ], StripeComponent.prototype, "elementId", void 0);
+            class StripeListComponent extends StripeComponent {
+            }
             let StripeService = class StripeService {
                 constructor() {
                     this.publishKey = '';
                     this.Stripe = {};
-                    this.collections = [];
+                    this.instanceOnEmitters = {};
+                    this.collections = {};
                     this.initializing = false;
                     this.initialized = false;
                     Stratus.Services.Stripe = this;
@@ -128575,12 +128211,29 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                         return this.Stripe.stripe.confirmCardSetup(clientSecret, stripeData, options);
                     });
                 }
-                registerCollection(collection) {
-                    this.collections.push(collection);
+                registerCollection(component, collection) {
+                    this.collections[component.uid] = { uid: component.uid, component, collection };
                 }
-                fetchCollections() {
-                    this.collections.forEach((collection) => {
-                        collection.fetch().then();
+                fetchCollections(uid) {
+                    return __awaiter$6(this, void 0, void 0, function* () {
+                        let uids;
+                        if (isString(uid) &&
+                            uid.length > 0) {
+                            uids = [uid];
+                        }
+                        else {
+                            uids = Object.keys(this.collections);
+                        }
+                        const uidList = [];
+                        uids.forEach((uidName) => {
+                            if (Object.prototype.hasOwnProperty.call(this.collections, uidName)) {
+                                uidList.push(() => __awaiter$6(this, void 0, void 0, function* () {
+                                    yield this.collections[uidName].collection.fetch();
+                                    this.emitManual('collectionUpdated', uidName, this.collections[uidName].component, this.collections[uidName].collection);
+                                }));
+                            }
+                        });
+                        yield Promise.all(uidList.map(fn => fn()));
                     });
                 }
                 createElement(id, publishKey, paymentMethodType, options, mountElement) {
@@ -128644,6 +128297,53 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                         this.currentElement = undefined;
                     }
                 }
+                emit(emitterName, component, ...variables) {
+                    this.emitManual(emitterName, component.elementId, component, variables);
+                }
+                emitManual(emitterName, uid, component, ...variables) {
+                    var _a, _b;
+                    var _c, _d;
+                    if (Object.prototype.hasOwnProperty.call(this.instanceOnEmitters, uid) &&
+                        Object.prototype.hasOwnProperty.call(this.instanceOnEmitters[uid], emitterName)) {
+                        Object.values(this.instanceOnEmitters[uid][emitterName]).forEach((emitter) => {
+                            try {
+                                emitter(component, variables);
+                            }
+                            catch (e) {
+                                console.error(e, 'issue sending back emitter on', uid, emitterName, emitter);
+                            }
+                        });
+                    }
+                    if (emitterName === 'init') {
+                        (_a = (_c = this.instanceOnEmitters)[uid]) !== null && _a !== void 0 ? _a : (_c[uid] = {});
+                        (_b = (_d = this.instanceOnEmitters[uid])[emitterName]) !== null && _b !== void 0 ? _b : (_d[emitterName] = {});
+                    }
+                }
+                removeOnManual(emitterName, emitterId, onId) {
+                    if (Object.prototype.hasOwnProperty.call(this.instanceOnEmitters, emitterId) &&
+                        Object.prototype.hasOwnProperty.call(this.instanceOnEmitters[emitterId], emitterName) &&
+                        Object.prototype.hasOwnProperty.call(this.instanceOnEmitters[emitterId][emitterName], onId)) {
+                        delete this.instanceOnEmitters[emitterId][emitterName][onId];
+                    }
+                }
+                on(uid, emitterName, callback) {
+                    if (emitterName === 'init' &&
+                        Object.prototype.hasOwnProperty.call(this.instanceOnEmitters, uid) &&
+                        Object.prototype.hasOwnProperty.call(this.instanceOnEmitters[uid], emitterName) &&
+                        Object.prototype.hasOwnProperty.call(Stratus.Instances, uid)) {
+                        callback(Stratus.Instances[uid]);
+                        return;
+                    }
+                    if (!Object.prototype.hasOwnProperty.call(this.instanceOnEmitters, uid)) {
+                        this.instanceOnEmitters[uid] = {};
+                    }
+                    if (!Object.prototype.hasOwnProperty.call(this.instanceOnEmitters[uid], emitterName)) {
+                        this.instanceOnEmitters[uid][emitterName] = {};
+                    }
+                    const onId = uniqueId$3();
+                    this.instanceOnEmitters[uid][emitterName][onId] = callback;
+                    return () => { this.removeOnManual(uid, emitterName, onId); };
+                }
             };
             StripeService = __decorate$8([
                 Injectable({
@@ -128677,7 +128377,7 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
             const packageName$5 = 'stripe';
             const componentName$5 = 'payment-method';
             const localDir$3 = `${Stratus.BaseUrl}${Stratus.DeploymentPath}@stratusjs/${packageName$5}/src/`;
-            let StripePaymentMethodComponent = class StripePaymentMethodComponent extends RootComponent {
+            let StripePaymentMethodComponent = class StripePaymentMethodComponent extends StripeComponent {
                 constructor(elementRef, sanitizer, Stripe, dialogRef, dialogData) {
                     super();
                     this.elementRef = elementRef;
@@ -128688,8 +128388,6 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                     this.title = `${packageName$5}_${componentName$5}_component`;
                     this.urlRoot = '/Api';
                     this.paymentMethodApiPath = 'PaymentMethod';
-                    this.styled = false;
-                    this.initialized = false;
                     this.cardComplete = false;
                     this.cardSaved = false;
                     this.formPending = false;
@@ -128709,7 +128407,7 @@ 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", "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"]);
+                    this.hydrate(this.elementRef, this.sanitizer, ["title", "_", "urlRoot", "paymentMethodApiPath", "cardComplete", "cardSaved", "formPending", "clientSecret", "publishKey", "formMessage", "detailedBillingInfo", "defaultBillingInfo", "billingInfo", "cardId", "elementRef", "sanitizer", "Stripe", "dialogRef", "dialogData", "ngOnInit", "isEditable", "isBillingDetailsFilled", "isSubmittable", "saveCard", "dialogClose", "ngOnDestroy", "uid", "elementId", "styled", "initialized", "hydrate", "ref", "disableRefresh", "stagger", "reloading", "refresh"]);
                     if (!isEmpty(this.dialogData)) {
                         const keysPossible = ["clientSecret", "publishKey", "formMessage", "urlRoot", "paymentMethodApiPath", "detailedBillingInfo", "defaultBillingInfo"];
                         Object.keys(this.dialogData).forEach((attr) => {
@@ -128799,7 +128497,13 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                             yield model.save();
                             this.cardSaved = true;
                             this.formPending = false;
-                            this.Stripe.fetchCollections();
+                            yield this.Stripe.fetchCollections();
+                            const cardDetails = {
+                                type: 'card',
+                                name: this.billingInfo.name,
+                                email: this.billingInfo.email
+                            };
+                            this.Stripe.emitManual('paymentMethodCreated', 'Stripe', this, cardDetails);
                         }
                         else {
                             this.formPending = false;
@@ -128821,10 +128525,6 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                     super.ngOnDestroy();
                 }
             };
-            __decorate$7([
-                Input(),
-                __metadata$6("design:type", String)
-            ], StripePaymentMethodComponent.prototype, "elementId", void 0);
             __decorate$7([
                 Input(),
                 __metadata$6("design:type", String)
@@ -128889,16 +128589,17 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
             const packageName$4 = 'stripe';
             const componentName$4 = 'payment-method-item';
             const localDir$2 = `${Stratus.BaseUrl}${Stratus.DeploymentPath}@stratusjs/${packageName$4}/src/`;
-            let StripePaymentMethodItemComponent = class StripePaymentMethodItemComponent extends RootComponent {
-                constructor(dialog, elementRef, sanitizer) {
+            let StripePaymentMethodItemComponent = class StripePaymentMethodItemComponent extends StripeComponent {
+                constructor(dialog, elementRef, sanitizer, Stripe) {
                     super();
                     this.dialog = dialog;
                     this.elementRef = elementRef;
                     this.sanitizer = sanitizer;
+                    this.Stripe = Stripe;
                     this.title = `${packageName$4}_${componentName$4}_component`;
                     this.editable = false;
-                    this.styled = false;
-                    this.initialized = false;
+                    this.templateStyle = 'default';
+                    this.urlRoot = '/Api';
                     this.uid = safeUniqueId('sa', snakeCase(this.title));
                     Stratus.Instances[this.uid] = this;
                     this.elementId = this.elementId || this.uid;
@@ -128910,11 +128611,14 @@ 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", "model", "editable", "styled", "initialized", "dialog", "elementRef", "sanitizer", "ngOnInit", "getCardLogoUrl", "isExpired", "isExpiring", "deletePM", "deletePMConfirmation", "hydrate", "ref", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
+                    this.hydrate(this.elementRef, this.sanitizer, ["title", "model", "editable", "templateStyle", "urlRoot", "dialog", "elementRef", "sanitizer", "Stripe", "ngOnInit", "getCardLogoUrl", "isExpired", "isExpiring", "deletePM", "deletePMConfirmation", "uid", "elementId", "styled", "initialized", "hydrate", "ref", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
                 }
                 ngOnInit() {
                     return __awaiter$4(this, void 0, void 0, function* () {
                         this.initialized = true;
+                        if (this.urlRoot) {
+                            this.model.urlRoot = `${this.urlRoot}${this.model.target ? '/' + this.model.target : ''}`;
+                        }
                     });
                 }
                 getCardLogoUrl(brand) {
@@ -128972,22 +128676,12 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                         if (!dialogResult) {
                             return;
                         }
-                        let collection;
-                        if (this.model.collection) {
-                            collection = this.model.collection;
-                        }
                         yield this.model.destroy();
-                        if (collection) {
-                            collection.fetch();
-                        }
+                        this.Stripe.fetchCollections();
                     }));
                     return dialog;
                 }
             };
-            __decorate$6([
-                Input(),
-                __metadata$5("design:type", String)
-            ], StripePaymentMethodItemComponent.prototype, "elementId", void 0);
             __decorate$6([
                 Input(),
                 __metadata$5("design:type", Model)
@@ -128996,6 +128690,14 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                 Input(),
                 __metadata$5("design:type", Object)
             ], StripePaymentMethodItemComponent.prototype, "editable", void 0);
+            __decorate$6([
+                Input(),
+                __metadata$5("design:type", Object)
+            ], StripePaymentMethodItemComponent.prototype, "templateStyle", void 0);
+            __decorate$6([
+                Input(),
+                __metadata$5("design:type", Object)
+            ], StripePaymentMethodItemComponent.prototype, "urlRoot", void 0);
             StripePaymentMethodItemComponent = __decorate$6([
                 Component({
                     selector: `sa-${packageName$4}-${componentName$4}`,
@@ -129003,7 +128705,8 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                 }),
                 __metadata$5("design:paramtypes", [MatDialog,
                     ElementRef,
-                    DomSanitizer])
+                    DomSanitizer,
+                    StripeService])
             ], StripePaymentMethodItemComponent);
 
             var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -129024,19 +128727,21 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                     step((generator = generator.apply(thisArg, _arguments || [])).next());
                 });
             };
+            !cookie('env') ? '.min' : '';
             const packageName$3 = 'stripe';
             const componentName$3 = 'payment-method-item-display';
-            let StripePaymentMethodItemDisplayComponent = class StripePaymentMethodItemDisplayComponent extends RootComponent {
+`${Stratus.BaseUrl}${Stratus.DeploymentPath}@stratusjs/${packageName$3}/src/`;
+            let StripePaymentMethodItemDisplayComponent = class StripePaymentMethodItemDisplayComponent extends StripeComponent {
                 constructor(elementRef, sanitizer) {
                     super();
                     this.elementRef = elementRef;
                     this.sanitizer = sanitizer;
                     this.title = `${packageName$3}_${componentName$3}_component`;
-                    this.initialized = false;
+                    this.templateStyle = 'default';
                     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", "initialized", "elementId", "model", "name", "brand", "last4", "expMonth", "expYear", "elementRef", "sanitizer", "ngOnInit", "hydrate", "ref", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
+                    this.hydrate(this.elementRef, this.sanitizer, ["title", "model", "name", "brand", "last4", "expMonth", "expYear", "templateStyle", "elementRef", "sanitizer", "ngOnInit", "uid", "elementId", "styled", "initialized", "hydrate", "ref", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
                 }
                 ngOnInit() {
                     return __awaiter$3(this, void 0, void 0, function* () {
@@ -129077,10 +128782,6 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                     });
                 }
             };
-            __decorate$5([
-                Input(),
-                __metadata$4("design:type", String)
-            ], StripePaymentMethodItemDisplayComponent.prototype, "elementId", void 0);
             __decorate$5([
                 Input(),
                 __metadata$4("design:type", String)
@@ -129101,10 +128802,14 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                 Input(),
                 __metadata$4("design:type", Number)
             ], StripePaymentMethodItemDisplayComponent.prototype, "expYear", void 0);
+            __decorate$5([
+                Input(),
+                __metadata$4("design:type", Object)
+            ], StripePaymentMethodItemDisplayComponent.prototype, "templateStyle", void 0);
             StripePaymentMethodItemDisplayComponent = __decorate$5([
                 Component({
                     selector: `sa-${packageName$3}-${componentName$3}`,
-                    template: '<sa-stripe-payment-method-item *ngIf="initialized" [(model)]="model" [editable]="false"></sa-stripe-payment-method-item>',
+                    template: '<sa-stripe-payment-method-item *ngIf="initialized" [(model)]="model" [editable]="false" [templateStyle]="templateStyle"></sa-stripe-payment-method-item>',
                 }),
                 __metadata$4("design:paramtypes", [ElementRef,
                     DomSanitizer])
@@ -129132,7 +128837,7 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
             const packageName$2 = 'stripe';
             const componentName$2 = 'payment-method-list';
             const localDir$1 = `${Stratus.BaseUrl}${Stratus.DeploymentPath}@stratusjs/${packageName$2}/src/`;
-            let StripePaymentMethodListComponent = class StripePaymentMethodListComponent extends RootComponent {
+            let StripePaymentMethodListComponent = class StripePaymentMethodListComponent extends StripeListComponent {
                 constructor(elementRef, ref, sanitizer, Stripe) {
                     super();
                     this.elementRef = elementRef;
@@ -129140,8 +128845,6 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                     this.sanitizer = sanitizer;
                     this.Stripe = Stripe;
                     this.title = `${packageName$2}_${componentName$2}_component`;
-                    this.styled = false;
-                    this.initialized = false;
                     this.urlRoot = '/Api';
                     this.paymentMethodApiPath = 'PaymentMethod';
                     this.addCardButtonText = 'Add Payment Method';
@@ -129158,7 +128861,7 @@ 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", "styled", "initialized", "urlRoot", "paymentMethodApiPath", "addCardButtonText", "disabled", "property", "detailedBillingInfo", "defaultBillingName", "defaultBillingEmail", "defaultBillingPhone", "defaultBillingZip", "defaultBillingState", "defaultBillingCity", "defaultBillingAddress1", "defaultBillingAddress2", "defaultBillingInfo", "paymentCollection", "elementRef", "ref", "sanitizer", "Stripe", "ngOnInit", "fetchPaymentMethods", "hydrate", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
+                    this.hydrate(this.elementRef, this.sanitizer, ["title", "urlRoot", "paymentMethodApiPath", "addCardButtonText", "disabled", "property", "detailedBillingInfo", "defaultBillingName", "defaultBillingEmail", "defaultBillingPhone", "defaultBillingZip", "defaultBillingState", "defaultBillingCity", "defaultBillingAddress1", "defaultBillingAddress2", "defaultBillingInfo", "elementRef", "ref", "sanitizer", "Stripe", "ngOnInit", "collection", "uid", "elementId", "styled", "initialized", "hydrate", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
                     const apiOptions = {
                         autoSave: false,
                         target: this.paymentMethodApiPath,
@@ -129167,7 +128870,7 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                     if (this.urlRoot) {
                         apiOptions.urlRoot = this.urlRoot;
                     }
-                    this.paymentCollection = new Collection(apiOptions);
+                    this.collection = new Collection(apiOptions);
                     if (this.defaultBillingName) {
                         this.defaultBillingInfo.name = this.defaultBillingName;
                     }
@@ -129195,22 +128898,16 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                 }
                 ngOnInit() {
                     return __awaiter$2(this, void 0, void 0, function* () {
-                        yield this.fetchPaymentMethods();
-                        this.Stripe.registerCollection(this.paymentCollection);
+                        this.Stripe.registerCollection(this, this.collection);
+                        this.Stripe.fetchCollections(this.uid).then();
                         this.initialized = true;
-                    });
-                }
-                fetchPaymentMethods() {
-                    return __awaiter$2(this, void 0, void 0, function* () {
-                        yield this.paymentCollection.fetch();
-                        yield this.refresh();
+                        this.Stripe.emit('init', this);
+                        this.Stripe.on(this.uid, 'collectionUpdated', (_source, _collection) => {
+                            this.refresh();
+                        });
                     });
                 }
             };
-            __decorate$4([
-                Input(),
-                __metadata$3("design:type", String)
-            ], StripePaymentMethodListComponent.prototype, "elementId", void 0);
             __decorate$4([
                 Input(),
                 __metadata$3("design:type", String)
@@ -129300,7 +128997,7 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
             const packageName$1 = 'stripe';
             const componentName$1 = 'payment-method-selector';
             const localDir = `${Stratus.BaseUrl}${Stratus.DeploymentPath}@stratusjs/${packageName$1}/src/`;
-            let StripePaymentMethodSelectorComponent = class StripePaymentMethodSelectorComponent extends RootComponent {
+            let StripePaymentMethodSelectorComponent = class StripePaymentMethodSelectorComponent extends StripeListComponent {
                 constructor(elementRef, fb, ref, sanitizer, Stripe) {
                     super();
                     this.elementRef = elementRef;
@@ -129309,11 +129006,11 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                     this.sanitizer = sanitizer;
                     this.Stripe = Stripe;
                     this.title = `${packageName$1}_${componentName$1}_component`;
-                    this.styled = false;
-                    this.initialized = false;
                     this.urlRoot = '/Api';
                     this.paymentMethodApiPath = 'PaymentMethod';
                     this.addCardButtonText = 'Add Payment Method';
+                    this.selectCardButtonText = 'Select Default Payment Method';
+                    this.selectedTemplateStyle = 'default';
                     this.disabled = false;
                     this.defaultBillingInfo = { address: {} };
                     this.fieldName = 'paymentSelection';
@@ -129336,7 +129033,7 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                         this.styled = false;
                         this.refresh().then();
                     });
-                    this.hydrate(this.elementRef, this.sanitizer, ["title", "uid", "elementId", "styled", "initialized", "target", "targetSuffix", "id", "manifest", "decouple", "direct", "api", "urlRoot", "registryModel", "paymentMethodApiPath", "addCardButtonText", "disabled", "property", "detailedBillingInfo", "defaultBillingName", "defaultBillingEmail", "defaultBillingPhone", "defaultBillingZip", "defaultBillingState", "defaultBillingCity", "defaultBillingAddress1", "defaultBillingAddress2", "defaultBillingInfo", "fieldName", "fieldNameId", "registry", "fetched", "model", "dataSub", "subscriber", "form", "paymentCollection", "elementRef", "fb", "ref", "sanitizer", "Stripe", "ngOnInit", "fetchPaymentMethods", "valueChanged", "normalizeOut", "normalizeIn", "fetchData", "objectComparisonFunction", "dataDefer", "dataRef", "handleObservableError", "isPMExpired", "hydrate", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
+                    this.hydrate(this.elementRef, this.sanitizer, ["title", "target", "targetSuffix", "id", "manifest", "decouple", "direct", "api", "urlRoot", "registryModel", "paymentMethodApiPath", "addCardButtonText", "selectCardButtonText", "selectedTemplateStyle", "disabled", "property", "detailedBillingInfo", "defaultBillingName", "defaultBillingEmail", "defaultBillingPhone", "defaultBillingZip", "defaultBillingState", "defaultBillingCity", "defaultBillingAddress1", "defaultBillingAddress2", "defaultBillingInfo", "fieldName", "fieldNameId", "registry", "fetched", "model", "dataSub", "subscriber", "form", "paymentSelect", "elementRef", "fb", "ref", "sanitizer", "Stripe", "ngOnInit", "valueChanged", "normalizeOut", "normalizeIn", "fetchData", "objectComparisonFunction", "dataDefer", "dataRef", "handleObservableError", "isPMExpired", "selectorListClose", "selectorListOpen", "collection", "uid", "elementId", "styled", "initialized", "hydrate", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
                     const apiOptions = {
                         autoSave: false,
                         target: this.paymentMethodApiPath,
@@ -129345,7 +129042,7 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                     if (this.urlRoot) {
                         apiOptions.urlRoot = this.urlRoot;
                     }
-                    this.paymentCollection = new Collection(apiOptions);
+                    this.collection = new Collection(apiOptions);
                     if (this.defaultBillingName) {
                         this.defaultBillingInfo.name = this.defaultBillingName;
                     }
@@ -129411,16 +129108,28 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                                 return;
                             }
                             this.valueChanged(value);
-                        });
-                        yield this.fetchPaymentMethods();
-                        this.Stripe.registerCollection(this.paymentCollection);
+                        }).then();
+                        this.Stripe.registerCollection(this, this.collection);
+                        this.Stripe.fetchCollections(this.uid).then();
                         this.initialized = true;
-                    });
-                }
-                fetchPaymentMethods() {
-                    return __awaiter$1(this, void 0, void 0, function* () {
-                        yield this.paymentCollection.fetch();
-                        yield this.refresh();
+                        this.Stripe.emit('init', this);
+                        this.Stripe.on(this.uid, 'collectionUpdated', (_source, _collection) => {
+                            this.refresh();
+                            this.selectorListClose();
+                        });
+                        this.Stripe.on('Stripe', 'paymentMethodCreated', (_source, details) => {
+                            const newCardDetails = details[0];
+                            if (!isEmpty(newCardDetails.type) &&
+                                !isEmpty(newCardDetails.name) &&
+                                !isEmpty(newCardDetails.email)) {
+                                const newPM = this.collection.models.slice(-1)[0];
+                                if (newPM.get('type') === newCardDetails.type &&
+                                    newPM.get('name') === newCardDetails.name &&
+                                    newPM.get('email') === newCardDetails.email) {
+                                    this.valueChanged(newPM);
+                                }
+                            }
+                        });
                     });
                 }
                 valueChanged(value) {
@@ -129496,11 +129205,23 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                     }
                     return paymentMethod.data.exp_month < month;
                 }
+                selectorListClose(ev) {
+                    if (ev) {
+                        ev.preventDefault();
+                    }
+                    if (this.paymentSelect && this.paymentSelect.panelOpen) {
+                        this.paymentSelect.close();
+                    }
+                }
+                selectorListOpen(ev) {
+                    if (ev) {
+                        ev.preventDefault();
+                    }
+                    if (this.paymentSelect && !this.paymentSelect.panelOpen) {
+                        this.paymentSelect.open();
+                    }
+                }
             };
-            __decorate$3([
-                Input(),
-                __metadata$2("design:type", String)
-            ], StripePaymentMethodSelectorComponent.prototype, "elementId", void 0);
             __decorate$3([
                 Input(),
                 __metadata$2("design:type", String)
@@ -129545,6 +129266,14 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                 Input(),
                 __metadata$2("design:type", String)
             ], StripePaymentMethodSelectorComponent.prototype, "addCardButtonText", void 0);
+            __decorate$3([
+                Input(),
+                __metadata$2("design:type", String)
+            ], StripePaymentMethodSelectorComponent.prototype, "selectCardButtonText", void 0);
+            __decorate$3([
+                Input(),
+                __metadata$2("design:type", Object)
+            ], StripePaymentMethodSelectorComponent.prototype, "selectedTemplateStyle", void 0);
             __decorate$3([
                 Input(),
                 __metadata$2("design:type", Object)
@@ -129589,6 +129318,10 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                 Input(),
                 __metadata$2("design:type", String)
             ], StripePaymentMethodSelectorComponent.prototype, "defaultBillingAddress2", void 0);
+            __decorate$3([
+                ViewChild('paymentSelect', { static: false }),
+                __metadata$2("design:type", MatSelect)
+            ], StripePaymentMethodSelectorComponent.prototype, "paymentSelect", void 0);
             StripePaymentMethodSelectorComponent = __decorate$3([
                 Component({
                     selector: `sa-${packageName$1}-${componentName$1}`,
@@ -129622,7 +129355,7 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
             };
             const packageName = 'stripe';
             const componentName = 'setup-intent';
-            let StripeSetupIntentComponent = class StripeSetupIntentComponent extends RootComponent {
+            let StripeSetupIntentComponent = class StripeSetupIntentComponent extends StripeComponent {
                 constructor(elementRef, sanitizer, dialog) {
                     super();
                     this.elementRef = elementRef;
@@ -129639,7 +129372,7 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                     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"]);
+                    this.hydrate(this.elementRef, this.sanitizer, ["title", "styled", "initialized", "newPaymentMethodPrompt", "newPaymentMethodPending", "urlRoot", "paymentMethodApiPath", "addCardButtonText", "detailedBillingInfo", "defaultBillingInfo", "elementRef", "sanitizer", "dialog", "ngOnInit", "addPaymentMethod", "inputPaymentMethod", "uid", "elementId", "hydrate", "ref", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
                 }
                 ngOnInit() {
                     this.initialized = true;
@@ -129712,10 +129445,6 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
                     });
                 }
             };
-            __decorate$2([
-                Input(),
-                __metadata$1("design:type", String)
-            ], StripeSetupIntentComponent.prototype, "elementId", void 0);
             __decorate$2([
                 Input(),
                 __metadata$1("design:type", String)
@@ -161376,6 +161105,1228 @@ System.register(['@stratusjs/runtime/stratus', 'lodash', '@stratusjs/core/enviro
             })
                 .catch(err => console.error('@stratusjs/angular failed to initialize!', err));
 
+            System.register(["quill", "@stratusjs/core/environment"], function (exports_1, context_1) {
+                var quill_1, environment_1, Break, Embed, QuillBreak;
+                context_1 && context_1.id;
+                return {
+                    setters: [
+                        function (quill_1_1) {
+                            quill_1 = quill_1_1;
+                        },
+                        function (environment_1_1) {
+                            environment_1 = environment_1_1;
+                        }
+                    ],
+                    execute: function () {
+                        Break = quill_1.default.import('blots/break');
+                        Embed = quill_1.default.import('blots/embed');
+                        QuillBreak = class QuillBreak extends Break {
+                            length() {
+                                return 1;
+                            }
+                            value() {
+                                return '\n';
+                            }
+                            insertInto(parent, ref) {
+                                if (environment_1.cookie('env')) {
+                                    console.log('insertInto:', parent, ref);
+                                }
+                                Embed.prototype.insertInto.call(this, parent, ref);
+                            }
+                        };
+                        exports_1("QuillBreak", QuillBreak);
+                        QuillBreak.blotName = 'break';
+                        QuillBreak.tagName = 'BR';
+                    }
+                };
+            });
+
+            System.register(["quill"], function (exports_1, context_1) {
+                var quill_1, debug, Logger, QuillHtmlEditPlugin;
+                context_1 && context_1.id;
+                function $create(elName) {
+                    return document.createElement(elName);
+                }
+                function $setAttr(el, key, value) {
+                    return el.setAttribute(key, value);
+                }
+                function launchPopupEditor(quill, options) {
+                    const htmlFromEditor = quill.container.querySelector('.ql-editor').innerHTML;
+                    const popupContainer = $create('div');
+                    const overlayContainer = $create('div');
+                    const msg = options.msg || 'Edit HTML here, when you click "OK" the quill editor\'s contents will be replaced';
+                    const cancelText = options.cancelText || 'Cancel';
+                    const okText = options.okText || 'Ok';
+                    $setAttr(overlayContainer, 'class', 'ql-html-overlayContainer');
+                    $setAttr(popupContainer, 'class', 'ql-html-popupContainer');
+                    const popupTitle = $create('i');
+                    $setAttr(popupTitle, 'class', 'ql-html-popupTitle');
+                    popupTitle.innerText = msg;
+                    const textContainer = $create('div');
+                    textContainer.appendChild(popupTitle);
+                    $setAttr(textContainer, 'class', 'ql-html-textContainer');
+                    const textArea = $create('textarea');
+                    $setAttr(textArea, 'class', 'ql-html-textArea');
+                    textArea.value = formatHTML(htmlFromEditor);
+                    const buttonCancel = $create('button');
+                    buttonCancel.innerHTML = cancelText;
+                    $setAttr(buttonCancel, 'class', 'ql-html-buttonCancel');
+                    const buttonOk = $create('button');
+                    buttonOk.innerHTML = okText;
+                    const buttonGroup = $create('div');
+                    $setAttr(buttonGroup, 'class', 'ql-html-buttonGroup');
+                    buttonGroup.appendChild(buttonCancel);
+                    buttonGroup.appendChild(buttonOk);
+                    textContainer.appendChild(textArea);
+                    textContainer.appendChild(buttonGroup);
+                    popupContainer.appendChild(textContainer);
+                    overlayContainer.appendChild(popupContainer);
+                    document.body.appendChild(overlayContainer);
+                    buttonCancel.onclick = () => {
+                        document.body.removeChild(overlayContainer);
+                    };
+                    overlayContainer.onclick = buttonCancel.onclick;
+                    popupContainer.onclick = (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                    };
+                    buttonOk.onclick = () => {
+                        const output = textArea.value.split(/\r?\n/g).map((el) => el.trim());
+                        const noNewlines = output.join('');
+                        quill.container.querySelector('.ql-editor').innerHTML = noNewlines;
+                        document.body.removeChild(overlayContainer);
+                    };
+                }
+                function formatHTML(code) {
+                    const whitespace = ' '.repeat(2);
+                    let currentIndent = 0;
+                    const newlineChar = '\n';
+                    let char = null;
+                    let nextChar = null;
+                    let result = '';
+                    for (let pos = 0; pos <= code.length; pos++) {
+                        char = code.substr(pos, 1);
+                        nextChar = code.substr(pos + 1, 1);
+                        const isBrTag = code.substr(pos, 4) === '<br>';
+                        const isOpeningTag = char === '<' && nextChar !== '/' && !isBrTag;
+                        const isClosingTag = char === '<' && nextChar === '/' && !isBrTag;
+                        if (isBrTag) {
+                            result += newlineChar;
+                            currentIndent--;
+                            pos += 4;
+                        }
+                        if (isOpeningTag) {
+                            result += newlineChar + whitespace.repeat(currentIndent);
+                            currentIndent++;
+                        }
+                        else if (isClosingTag) {
+                            if (--currentIndent < 0) {
+                                currentIndent = 0;
+                            }
+                            result += newlineChar + whitespace.repeat(currentIndent);
+                        }
+                        else if (char === ' ' && nextChar === ' ') {
+                            char = '';
+                        }
+                        else if (char === newlineChar) {
+                            if (code.substr(pos, code.substr(pos).indexOf('<')).trim() === '') {
+                                char = '';
+                            }
+                        }
+                        result += char;
+                    }
+                    Logger.log('formatHTML', {
+                        before: code,
+                        after: result
+                    });
+                    return result;
+                }
+                return {
+                    setters: [
+                        function (quill_1_1) {
+                            quill_1 = quill_1_1;
+                        }
+                    ],
+                    execute: function () {
+                        debug = false;
+                        Logger = {
+                            prefixString() {
+                                return `</> quill-html-edit-button: `;
+                            },
+                            get log() {
+                                if (!debug) {
+                                    return () => { };
+                                }
+                                const boundLogFn = console.log.bind(console, this.prefixString());
+                                return boundLogFn;
+                            }
+                        };
+                        QuillHtmlEditPlugin = class QuillHtmlEditPlugin {
+                            constructor(quill, options) {
+                                debug = options && options.debug;
+                                Logger.log('logging enabled');
+                                const toolbarModule = quill.getModule('toolbar');
+                                if (!toolbarModule) {
+                                    throw new Error('quill.htmlEditButton requires the "toolbar" module to be included too');
+                                }
+                                this.registerDivModule();
+                                const toolbarEl = toolbarModule.container;
+                                const buttonContainer = $create('span');
+                                $setAttr(buttonContainer, 'class', 'ql-formats');
+                                const button = $create('button');
+                                button.innerHTML = options.buttonHTML || '&lt;&gt;';
+                                button.title = options.buttonTitle || 'Show HTML source';
+                                button.onclick = (e) => {
+                                    e.preventDefault();
+                                    launchPopupEditor(quill, options);
+                                };
+                                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);
+                            }
+                        };
+                        exports_1("QuillHtmlEditPlugin", QuillHtmlEditPlugin);
+                        exports_1("default", QuillHtmlEditPlugin);
+                    }
+                };
+            });
+
+            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;
+                return {
+                    setters: [
+                        function (_1) {
+                        },
+                        function (lodash_1_1) {
+                            lodash_1 = lodash_1_1;
+                        },
+                        function (core_1_1) {
+                            core_1 = core_1_1;
+                        }
+                    ],
+                    execute: function () {
+                        RootComponent = class RootComponent {
+                            hydrate(elementRef, sanitizer, attrs) {
+                                lodash_1.default.forEach(attrs, (attr) => {
+                                    const metaDataKeys = Reflect.getMetadataKeys(this, attr);
+                                    if (!lodash_1.default.includes(metaDataKeys, 'design:type')) {
+                                        return;
+                                    }
+                                    const attrKebab = lodash_1.default.kebabCase(attr);
+                                    const variants = [
+                                        attrKebab,
+                                        'data-' + attrKebab
+                                    ];
+                                    const variant = lodash_1.default.find(variants, (v) => elementRef.nativeElement.hasAttribute(v));
+                                    if (lodash_1.default.isEmpty(variant)) {
+                                        return;
+                                    }
+                                    const value = sanitizer.sanitize(core_1.SecurityContext.HTML, elementRef.nativeElement.getAttribute(variant));
+                                    lodash_1.default.set(this, attr, value);
+                                });
+                            }
+                        };
+                        exports_1("RootComponent", RootComponent);
+                    }
+                };
+            });
+
+            System.register(["@angular/forms", "@angular/core", "froala-editor"], 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 FroalaEditorDirective_1, forms_1, core_1, froala_editor_1, FroalaEditorDirective;
+                context_1 && context_1.id;
+                return {
+                    setters: [
+                        function (forms_1_1) {
+                            forms_1 = forms_1_1;
+                        },
+                        function (core_1_1) {
+                            core_1 = core_1_1;
+                        },
+                        function (froala_editor_1_1) {
+                            froala_editor_1 = froala_editor_1_1;
+                        }
+                    ],
+                    execute: function () {
+                        FroalaEditorDirective = FroalaEditorDirective_1 = class FroalaEditorDirective {
+                            constructor(el, zone) {
+                                this.zone = zone;
+                                this._opts = {
+                                    immediateAngularModelUpdate: false,
+                                    angularIgnoreAttrs: null
+                                };
+                                this.SPECIAL_TAGS = ['img', 'button', 'input', 'a'];
+                                this.INNER_HTML_ATTR = 'innerHTML';
+                                this._hasSpecialTag = false;
+                                this._editorInitialized = false;
+                                this._oldModel = null;
+                                this.froalaModelChange = new core_1.EventEmitter();
+                                this.froalaInit = new core_1.EventEmitter();
+                                this.onChange = (_) => {
+                                };
+                                this.onTouched = () => {
+                                };
+                                const element = el.nativeElement;
+                                if (this.SPECIAL_TAGS.indexOf(element.tagName.toLowerCase()) != -1) {
+                                    this._hasSpecialTag = true;
+                                }
+                                this._element = element;
+                                this.zone = zone;
+                            }
+                            set froalaEditor(opts) {
+                                this._opts = this.clone(opts || this._opts);
+                                this._opts = Object.assign({}, this._opts);
+                            }
+                            set froalaModel(content) {
+                                this.updateEditor(content);
+                            }
+                            writeValue(content) {
+                                this.updateEditor(content);
+                            }
+                            registerOnChange(fn) {
+                                this.onChange = fn;
+                            }
+                            registerOnTouched(fn) {
+                                this.onTouched = fn;
+                            }
+                            clone(item) {
+                                const me = this;
+                                if (!item) {
+                                    return item;
+                                }
+                                const types = [Number, String, Boolean];
+                                let result;
+                                types.forEach((type) => {
+                                    if (item instanceof type) {
+                                        result = type(item);
+                                    }
+                                });
+                                if (typeof result === 'undefined') {
+                                    if (Object.prototype.toString.call(item) === '[object Array]') {
+                                        result = [];
+                                        item.forEach((child, index, array) => {
+                                            result[index] = me.clone(child);
+                                        });
+                                    }
+                                    else if (typeof item === 'object') {
+                                        if (item.nodeType && typeof item.cloneNode === 'function') {
+                                            result = item.cloneNode(true);
+                                        }
+                                        else if (!item.prototype) {
+                                            if (item instanceof Date) {
+                                                result = new Date(item);
+                                            }
+                                            else {
+                                                result = {};
+                                                for (const i in item) {
+                                                    result[i] = me.clone(item[i]);
+                                                }
+                                            }
+                                        }
+                                        else {
+                                            {
+                                                result = item;
+                                            }
+                                        }
+                                    }
+                                    else {
+                                        result = item;
+                                    }
+                                }
+                                return result;
+                            }
+                            updateEditor(content) {
+                                if (JSON.stringify(this._oldModel) === JSON.stringify(content)) {
+                                    return;
+                                }
+                                if (!this._hasSpecialTag) {
+                                    this._oldModel = content;
+                                }
+                                else {
+                                    this._model = content;
+                                }
+                                if (this._editorInitialized) {
+                                    if (!this._hasSpecialTag) {
+                                        this._editor.html.set(content);
+                                    }
+                                    else {
+                                        this.setContent();
+                                    }
+                                }
+                                else {
+                                    if (!this._hasSpecialTag) {
+                                        this._element.innerHTML = content || '';
+                                    }
+                                    else {
+                                        this.setContent();
+                                    }
+                                }
+                            }
+                            updateModel() {
+                                this.zone.run(() => {
+                                    let modelContent = null;
+                                    if (this._hasSpecialTag) {
+                                        const attributeNodes = this._element.attributes;
+                                        const attrs = {};
+                                        for (let i = 0; i < attributeNodes.length; i++) {
+                                            const attrName = attributeNodes[i].name;
+                                            if (this._opts.angularIgnoreAttrs && this._opts.angularIgnoreAttrs.indexOf(attrName) != -1) {
+                                                continue;
+                                            }
+                                            attrs[attrName] = attributeNodes[i].value;
+                                        }
+                                        if (this._element.innerHTML) {
+                                            attrs[this.INNER_HTML_ATTR] = this._element.innerHTML;
+                                        }
+                                        modelContent = attrs;
+                                    }
+                                    else {
+                                        const returnedHtml = this._editor.html.get();
+                                        if (typeof returnedHtml === 'string') {
+                                            modelContent = returnedHtml;
+                                        }
+                                    }
+                                    if (this._oldModel !== modelContent) {
+                                        this._oldModel = modelContent;
+                                        this.froalaModelChange.emit(modelContent);
+                                        this.onChange(modelContent);
+                                    }
+                                });
+                            }
+                            registerEvent(eventName, callback) {
+                                if (!eventName || !callback) {
+                                    return;
+                                }
+                                if (!this._opts.events) {
+                                    this._opts.events = {};
+                                }
+                                this._opts.events[eventName] = callback;
+                            }
+                            initListeners() {
+                                const self = this;
+                                if (this._editor.events) {
+                                    this._editor.events.on('contentChanged', function () {
+                                        self.updateModel();
+                                    });
+                                    this._editor.events.on('mousedown', function () {
+                                        setTimeout(function () {
+                                            self.onTouched();
+                                        }, 0);
+                                    });
+                                    if (this._opts.immediateAngularModelUpdate) {
+                                        this._editor.events.on('keyup', function () {
+                                            setTimeout(function () {
+                                                self.updateModel();
+                                            }, 0);
+                                        });
+                                    }
+                                }
+                                this._editorInitialized = true;
+                            }
+                            createEditor() {
+                                if (this._editorInitialized) {
+                                    return;
+                                }
+                                this.setContent(true);
+                                this.zone.runOutsideAngular(() => {
+                                    if (!this._opts.events) {
+                                        this._opts.events = {};
+                                    }
+                                    this.registerEvent('initialized', this._opts.events && this._opts.events.initialized);
+                                    const existingInitCallback = this._opts.events.initialized;
+                                    if (!this._opts.events.initialized || !this._opts.events.initialized.overridden) {
+                                        this._opts.events.initialized = () => {
+                                            this.initListeners();
+                                            existingInitCallback && existingInitCallback.call(this._editor, this);
+                                        };
+                                        this._opts.events.initialized.overridden = true;
+                                    }
+                                    this._editor = new froala_editor_1.default(this._element, this._opts);
+                                });
+                            }
+                            setHtml() {
+                                this._editor.html.set(this._model || '');
+                                this._editor.undo.reset();
+                                this._editor.undo.saveStep();
+                            }
+                            setContent(firstTime = false) {
+                                const self = this;
+                                if (this._model || this._model === '') {
+                                    this._oldModel = this._model;
+                                    if (this._hasSpecialTag) {
+                                        const tags = this._model;
+                                        if (tags) {
+                                            for (const attr in tags) {
+                                                if (tags.hasOwnProperty(attr) && attr != this.INNER_HTML_ATTR) {
+                                                    this._element.setAttribute(attr, tags[attr]);
+                                                }
+                                            }
+                                            if (tags.hasOwnProperty(this.INNER_HTML_ATTR)) {
+                                                this._element.innerHTML = tags[this.INNER_HTML_ATTR];
+                                            }
+                                        }
+                                    }
+                                    else {
+                                        if (firstTime) {
+                                            this.registerEvent('initialized', function () {
+                                                self.setHtml();
+                                            });
+                                        }
+                                        else {
+                                            self.setHtml();
+                                        }
+                                    }
+                                }
+                            }
+                            destroyEditor() {
+                                if (this._editorInitialized) {
+                                    this._editor.destroy();
+                                    this._editorInitialized = false;
+                                }
+                            }
+                            getEditor() {
+                                if (this._element) {
+                                    return this._editor;
+                                }
+                                return null;
+                            }
+                            generateManualController() {
+                                const controls = {
+                                    initialize: this.createEditor.bind(this),
+                                    destroy: this.destroyEditor.bind(this),
+                                    getEditor: this.getEditor.bind(this),
+                                };
+                                this.froalaInit.emit(controls);
+                            }
+                            ngAfterViewInit() {
+                                if (!this.froalaInit.observers.length) {
+                                    this.createEditor();
+                                }
+                                else {
+                                    this.generateManualController();
+                                }
+                            }
+                            ngOnDestroy() {
+                                this.destroyEditor();
+                            }
+                        };
+                        __decorate([
+                            core_1.Input(),
+                            __metadata("design:type", Object),
+                            __metadata("design:paramtypes", [Object])
+                        ], FroalaEditorDirective.prototype, "froalaEditor", null);
+                        __decorate([
+                            core_1.Input(),
+                            __metadata("design:type", Object),
+                            __metadata("design:paramtypes", [Object])
+                        ], FroalaEditorDirective.prototype, "froalaModel", null);
+                        __decorate([
+                            core_1.Output(),
+                            __metadata("design:type", core_1.EventEmitter)
+                        ], FroalaEditorDirective.prototype, "froalaModelChange", void 0);
+                        __decorate([
+                            core_1.Output(),
+                            __metadata("design:type", core_1.EventEmitter)
+                        ], FroalaEditorDirective.prototype, "froalaInit", void 0);
+                        FroalaEditorDirective = FroalaEditorDirective_1 = __decorate([
+                            core_1.Directive({
+                                selector: '[froalaEditor]',
+                                exportAs: 'froalaEditor',
+                                providers: [
+                                    {
+                                        provide: forms_1.NG_VALUE_ACCESSOR, useExisting: core_1.forwardRef(() => FroalaEditorDirective_1),
+                                        multi: true
+                                    }
+                                ]
+                            }),
+                            __metadata("design:paramtypes", [core_1.ElementRef, core_1.NgZone])
+                        ], FroalaEditorDirective);
+                        exports_1("FroalaEditorDirective", FroalaEditorDirective);
+                    }
+                };
+            });
+
+            System.register(["@angular/core", "@stratusjs/angular/froala/editor/froala-editor.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 FroalaEditorModule_1, core_1, froala_editor_directive_1, FroalaEditorModule;
+                context_1 && context_1.id;
+                return {
+                    setters: [
+                        function (core_1_1) {
+                            core_1 = core_1_1;
+                        },
+                        function (froala_editor_directive_1_1) {
+                            froala_editor_directive_1 = froala_editor_directive_1_1;
+                        }
+                    ],
+                    execute: function () {
+                        FroalaEditorModule = FroalaEditorModule_1 = class FroalaEditorModule {
+                            static forRoot() {
+                                return { ngModule: FroalaEditorModule_1, providers: [] };
+                            }
+                        };
+                        FroalaEditorModule = FroalaEditorModule_1 = __decorate([
+                            core_1.NgModule({
+                                declarations: [froala_editor_directive_1.FroalaEditorDirective],
+                                exports: [froala_editor_directive_1.FroalaEditorDirective]
+                            })
+                        ], FroalaEditorModule);
+                        exports_1("FroalaEditorModule", FroalaEditorModule);
+                    }
+                };
+            });
+
+            System.register(["@stratusjs/angular/froala/editor/froala-editor.directive", "@stratusjs/angular/froala/editor/froala-editor.module"], function (exports_1, context_1) {
+                context_1 && context_1.id;
+                return {
+                    setters: [
+                        function (froala_editor_directive_1_1) {
+                            exports_1({
+                                "FroalaEditorDirective": froala_editor_directive_1_1["FroalaEditorDirective"]
+                            });
+                        },
+                        function (froala_editor_module_1_1) {
+                            exports_1({
+                                "FroalaEditorModule": froala_editor_module_1_1["FroalaEditorModule"]
+                            });
+                        }
+                    ],
+                    execute: function () {
+                    }
+                };
+            });
+
+            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/
+             * Copyright 2014-2020 Froala Labs
+             */
+            System.register(["froala-editor"], function (exports_1, context_1) {
+                var froala_editor_1;
+                context_1 && context_1.id;
+                return {
+                    setters: [
+                        function (froala_editor_1_1) {
+                            froala_editor_1 = froala_editor_1_1;
+                        }
+                    ],
+                    execute: function () {
+                        /*!
+                         * froala_editor v3.2.3 (https://www.froala.com/wysiwyg-editor)
+                         * License https://froala.com/wysiwyg-editor/terms/
+                         * Copyright 2014-2020 Froala Labs
+                         */
+                        if (((froala_editor_1.default && froala_editor_1.default.hasOwnProperty('default') ? froala_editor_1.default.default : froala_editor_1.default),
+                            Object.assign(froala_editor_1.default.DEFAULTS, {
+                                imageManagerLoadURL: 'https://i.froala.com/load-files',
+                                imageManagerLoadMethod: 'get',
+                                imageManagerLoadParams: {},
+                                imageManagerPreloader: null,
+                                imageManagerDeleteURL: '',
+                                imageManagerDeleteMethod: 'post',
+                                imageManagerDeleteParams: {},
+                                imageManagerPageSize: 12,
+                                imageManagerScrollOffset: 20,
+                                imageManagerToggleTags: !0,
+                            }),
+                            (froala_editor_1.default.PLUGINS.imageManagerCustom = (s) => {
+                                let g, l, i, o, d, m, c, f, u, p, h, v = s.$, M = 'image_manager', e = 10, b = 11, w = 12, C = 13, L = 14, D = 15, t = 21, r = 22, n = {};
+                                function y() {
+                                    let e = v(window).outerWidth();
+                                    return e < 768 ? 2 : e < 1200 ? 3 : 4;
+                                }
+                                function I() {
+                                    d.empty();
+                                    for (let e = 0; e < h; e++) {
+                                        d.append('<div class="fr-list-column"></div>');
+                                    }
+                                }
+                                function P() {
+                                    if (u < c.length
+                                        && (d.outerHeight() <= i.outerHeight() + s.opts.imageManagerScrollOffset
+                                            || i.scrollTop() + s.opts.imageManagerScrollOffset > d.outerHeight() - i.outerHeight())) {
+                                        f++;
+                                        for (let e = s.opts.imageManagerPageSize * (f - 1); e < Math.min(c.length, s.opts.imageManagerPageSize * f); e++) {
+                                            a(c[e]);
+                                        }
+                                    }
+                                }
+                                function a(n) {
+                                    let i = new Image(), o = v(document.createElement('div'))
+                                        .attr('class', 'fr-image-container fr-empty fr-image-' + p++)
+                                        .attr('data-loading', s.language.translate('Loading') + '..')
+                                        .attr('data-deleting', s.language.translate('Deleting') + '..');
+                                    R(!1),
+                                        (i.onload = function () {
+                                            o.height(Math.floor((o.width() / i.width) * i.height));
+                                            let t = v(document.createElement('img'));
+                                            if (n.thumb) {
+                                                t.attr('src', n.thumb);
+                                            }
+                                            else {
+                                                if ((O(L, n), !n.url)) {
+                                                    return O(D, n), !1;
+                                                }
+                                                t.attr('src', n.url);
+                                            }
+                                            if ((n.url && t.attr('data-url', n.url), n.tag)) {
+                                                if ((l.find('.fr-modal-more.fr-not-available').removeClass('fr-not-available'), l.find('.fr-modal-tags').show(), 0 <= n.tag.indexOf(','))) {
+                                                    for (let e = n.tag.split(','), a = 0; a < e.length; a++) {
+                                                        (e[a] =
+                                                            e[a].trim()), 0 === m.find('a[title="'.concat(e[a], '"]')).length && m.append('<a role="button" title="'.concat(e[a], '">').concat(e[a], '</a>'));
+                                                    }
+                                                    t.attr('data-tag', e.join());
+                                                }
+                                                else {
+                                                    0 === m.find('a[title="'.concat(n.tag.trim(), '"]')).length && m.append('<a role="button" title="'.concat(n.tag.trim(), '">').concat(n.tag.trim(), '</a>')), t.attr('data-tag', n.tag.trim());
+                                                }
+                                            }
+                                            for (let r in (n.name && t.attr('alt', n.name), n)) {
+                                                n.hasOwnProperty(r) && 'thumb' !== r && 'url' !== r && 'tag' !== r && t.attr('data-'.concat(r), n[r]);
+                                            }
+                                            o
+                                                .append(t)
+                                                .append(v(s.icon.create('imageManagerDelete')).addClass('fr-delete-img').attr('title', s.language.translate('Delete')))
+                                                .append(v(s.icon.create('imageManagerInsert')).addClass('fr-insert-img').attr('title', s.language.translate('Insert'))),
+                                                m.find('.fr-selected-tag').each(function (e, a) {
+                                                    j(t, a.text) || o.hide();
+                                                }),
+                                                t.on('load', function () {
+                                                    o.removeClass('fr-empty'),
+                                                        o.height('auto'),
+                                                        u++,
+                                                        E(T(parseInt(t
+                                                            .parent()
+                                                            .attr('class')
+                                                            .match(/fr-image-(\d+)/)[1], 10) + 1)),
+                                                        R(!1),
+                                                        u % s.opts.imageManagerPageSize === 0 && P();
+                                                }),
+                                                s.events.trigger('imageManager.imageLoaded', [t]);
+                                        }),
+                                        (i.onerror = () => {
+                                            u++,
+                                                o.remove(),
+                                                E(T(parseInt(o.attr('class').match(/fr-image-(\d+)/)[1], 10) + 1)),
+                                                O(e, n),
+                                                u % s.opts.imageManagerPageSize === 0 && P();
+                                        }),
+                                        (i.src = n.thumb || n.url),
+                                        S().append(o);
+                                }
+                                function S() {
+                                    let r, n;
+                                    return (d.find('.fr-list-column').each((e, a) => {
+                                        let t = v(a);
+                                        0 === e ? ((n = t.outerHeight()), (r = t)) : t.outerHeight() < n && ((n = t.outerHeight()), (r = t));
+                                    }),
+                                        r);
+                                }
+                                function T(e) {
+                                    e === undefined && (e = 0);
+                                    for (let a = [], t = p - 1; e <= t; t--) {
+                                        let r = d.find('.fr-image-'.concat(t));
+                                        r.length && (a.push(r), v(document.createElement('div')).attr('id', 'fr-image-hidden-container').append(r), d.find('.fr-image-'.concat(t)).remove());
+                                    }
+                                    return a;
+                                }
+                                function E(e) {
+                                    for (let a = e.length - 1; 0 <= a; a--) {
+                                        S().append(e[a]);
+                                    }
+                                }
+                                function R(e) {
+                                    if ((e === undefined && (e = !0), !g.isVisible())) {
+                                        return !0;
+                                    }
+                                    let a = y();
+                                    if (a !== h) {
+                                        h = a;
+                                        let t = T();
+                                        I(), E(t);
+                                    }
+                                    s.modals.resize(M), e && P();
+                                }
+                                function U(e) {
+                                    for (let a, t = e[0].attributes, r = t.length, n = {}; r--;) {
+                                        t[r] && 'src' !== (a = t[r].name) && (n[a] = t[r].value);
+                                    }
+                                    return n;
+                                }
+                                function x(e) {
+                                    let a = v(e.currentTarget).siblings('img'), t = g.data('instance') || s, r = g.data('current-image');
+                                    if ((s.modals.hide(M), t.image.showProgressBar(), r)) {
+                                        r.data('fr-old-src', r.attr('src')), r.trigger('click');
+                                    }
+                                    else {
+                                        t.events.focus(!0), t.selection.restore();
+                                        let n = t.position.getBoundingRect(), i = n.left + n.width / 2 + v(s.doc).scrollLeft(), o = n.top + n.height + v(s.doc).scrollTop();
+                                        t.popups.setContainer('image.insert', s.$sc), t.popups.show('image.insert', i, o);
+                                    }
+                                    t.image.insert(a.data('url'), !1, U(a), r);
+                                }
+                                function H(e) {
+                                    let i = v(e.currentTarget).siblings('img'), a = s.language.translate('Are you sure? Image will be deleted.');
+                                    confirm(a) &&
+                                        (s.opts.imageManagerDeleteURL
+                                            ? !1 !== s.events.trigger('imageManager.beforeDeleteImage', [i]) &&
+                                                (i.parent().addClass('fr-image-deleting'),
+                                                    v(this).ajax({
+                                                        method: s.opts.imageManagerDeleteMethod,
+                                                        url: s.opts.imageManagerDeleteURL,
+                                                        data: Object.assign(Object.assign({ src: i.attr('src') }, U(i)), s.opts.imageManagerDeleteParams),
+                                                        crossDomain: s.opts.requestWithCORS,
+                                                        withCredentials: s.opts.requestWithCredentials,
+                                                        headers: s.opts.requestHeaders,
+                                                        done(e, a, t) {
+                                                            s.events.trigger('imageManager.imageDeleted', [e]);
+                                                            let r = T(parseInt(i
+                                                                .parent()
+                                                                .attr('class')
+                                                                .match(/fr-image-(\d+)/)[1], 10) + 1);
+                                                            i.parent().remove(),
+                                                                E(r),
+                                                                (function n() {
+                                                                    g.find('#fr-modal-tags > a').each(function () {
+                                                                        0 === g.find('#fr-image-list [data-tag*="'.concat(v(this).text(), '"]')).length && v(this).removeClass('fr-selected-tag').hide();
+                                                                    }),
+                                                                        _();
+                                                                })(),
+                                                                R(!0);
+                                                        },
+                                                        fail(e) {
+                                                            O(t, e.response || e.responseText);
+                                                        },
+                                                    }))
+                                            : O(r));
+                                }
+                                function O(e, a) {
+                                    10 <= e && e < 20
+                                        ? o.hide()
+                                        : 20 <= e && e < 30 && v('.fr-image-deleting').removeClass('fr-image-deleting'), s.events.trigger('imageManager.error', [
+                                        { code: e, message: n[e] },
+                                        a
+                                    ]);
+                                }
+                                function q() {
+                                    let e = l.find('.fr-modal-head-line').outerHeight(), a = m.outerHeight();
+                                    l.toggleClass('fr-show-tags'), l.hasClass('fr-show-tags')
+                                        ? (l.css('height', e + a), i.css('marginTop', e + a), m.find('a').css('opacity', 1))
+                                        : (l.css('height', e), i.css('marginTop', e), m.find('a').css('opacity', 0));
+                                }
+                                function _() {
+                                    let e = m.find('.fr-selected-tag');
+                                    0 < e.length
+                                        ? (d.find('img').parents().show(),
+                                            e.each((e, r) => {
+                                                d.find('img').each(function (e, a) {
+                                                    let t = v(a);
+                                                    j(t, r.text) || t.parent().hide();
+                                                });
+                                            }))
+                                        : d.find('img').parents().show(),
+                                        E(T()),
+                                        P();
+                                }
+                                function k(e) {
+                                    e.preventDefault();
+                                    let a = v(e.currentTarget);
+                                    a.toggleClass('fr-selected-tag'), s.opts.imageManagerToggleTags && a.siblings('a').removeClass('fr-selected-tag'), _();
+                                }
+                                function j(e, a) {
+                                    for (let t = (e.attr('data-tag') || '').split(','), r = 0; r < t.length; r++) {
+                                        if (t[r] === a) {
+                                            return !0;
+                                        }
+                                    }
+                                    return !1;
+                                }
+                                return ((n[e] = 'Image cannot be loaded from the passed link.'),
+                                    (n[b] = 'Error during load images request.'),
+                                    (n[w] = 'Missing imageManagerLoadURL option.'),
+                                    (n[C] = 'Parsing load response failed.'),
+                                    (n[L] = 'Missing image thumb.'),
+                                    (n[D] = 'Missing image URL.'),
+                                    (n[t] = 'Error during delete image request.'),
+                                    (n[r] = 'Missing imageManagerDeleteURL option.'),
+                                    {
+                                        require: ['image'],
+                                        _init: function z() {
+                                            if (!s.$wp && 'IMG' !== s.el.tagName) {
+                                                return !1;
+                                            }
+                                        },
+                                        show: function G() {
+                                            if (!g) {
+                                                let e, a = '<button class="fr-command fr-btn fr-modal-more fr-not-available" id="fr-modal-more-'
+                                                    .concat(s.sid, '"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24""><path d="')
+                                                    .concat(froala_editor_1.default.SVG.tags, '"/></svg></button><h4 data-text="true">')
+                                                    .concat(s.language.translate('Manage Images'), '</h4></div>\n      <div class="fr-modal-tags" id="fr-modal-tags">');
+                                                (e = s.opts.imageManagerPreloader
+                                                    ? '<img class="fr-preloader" id="fr-preloader" alt="'.concat(s.language.translate('Loading'), '.." src="').concat(s.opts.imageManagerPreloader, '" style="display: none;">')
+                                                    : '<span class="fr-preloader" id="fr-preloader" style="display: none;">'.concat(s.language.translate('Loading'), '</span>')),
+                                                    (e += '<div class="fr-image-list" id="fr-image-list"></div>');
+                                                let t = s.modals.create(M, a, e);
+                                                (g = t.$modal), (l = t.$head), (i = t.$body);
+                                            }
+                                            g.data('current-image', s.image.get()),
+                                                s.modals.show(M),
+                                                o ||
+                                                    (function r() {
+                                                        (o = g.find('#fr-preloader')),
+                                                            (d = g.find('#fr-image-list')),
+                                                            (m = g.find('#fr-modal-tags')),
+                                                            (h = y()),
+                                                            I(),
+                                                            l.css('height', l.find('.fr-modal-head-line').outerHeight()),
+                                                            s.events.$on(v(s.o_win), 'resize', () => {
+                                                                R(!!c);
+                                                            }),
+                                                            s.events.bindClick(d, '.fr-insert-img', x),
+                                                            s.events.bindClick(d, '.fr-delete-img', H),
+                                                            s.helpers.isMobile() &&
+                                                                (s.events.bindClick(d, 'div.fr-image-container', (e) => {
+                                                                    g.find('.fr-mobile-selected').removeClass('fr-mobile-selected'),
+                                                                        v(e.currentTarget).addClass('fr-mobile-selected');
+                                                                }),
+                                                                    g.on(s._mousedown, () => {
+                                                                        g.find('.fr-mobile-selected').removeClass('fr-mobile-selected');
+                                                                    })),
+                                                            g.on(s._mousedown + ' ' + s._mouseup, (e) => {
+                                                                e.stopPropagation();
+                                                            }),
+                                                            g.on(s._mousedown, '*', () => {
+                                                                s.events.disableBlur();
+                                                            }),
+                                                            i.on('scroll', P),
+                                                            s.events.bindClick(g, 'button#fr-modal-more-'.concat(s.sid), q),
+                                                            s.events.bindClick(m, 'a', k);
+                                                    })(),
+                                                (function n() {
+                                                    o.show(),
+                                                        d.find('.fr-list-column').empty(),
+                                                        s.opts.imageManagerLoadURL
+                                                            ? v(this).ajax({
+                                                                url: s.opts.imageManagerLoadURL,
+                                                                method: s.opts.imageManagerLoadMethod,
+                                                                data: s.opts.imageManagerLoadParams,
+                                                                crossDomain: s.opts.requestWithCORS,
+                                                                withCredentials: s.opts.requestWithCredentials,
+                                                                headers: s.opts.requestHeaders,
+                                                                done(e, a, t) {
+                                                                    s.events.trigger('imageManager.imagesLoaded', [e]),
+                                                                        (function r(e, a) {
+                                                                            try {
+                                                                                d.find('.fr-list-column').empty(), (p = u = f = 0), (c = JSON.parse(e)), P();
+                                                                            }
+                                                                            catch (t) {
+                                                                                O(C, a);
+                                                                            }
+                                                                        })(e, t.response),
+                                                                        o.hide();
+                                                                },
+                                                                fail(e) {
+                                                                    O(b, e.response || e.responseText);
+                                                                },
+                                                            })
+                                                            : O(w);
+                                                })();
+                                        },
+                                        hide: function N() {
+                                            s.modals.hide(M);
+                                        },
+                                    });
+                            }),
+                            !froala_editor_1.default.PLUGINS.image)) {
+                            throw new Error('Image manager plugin requires image plugin.');
+                        }
+                        froala_editor_1.default.DEFAULTS.imageInsertButtons.push('imageManagerCustom'),
+                            froala_editor_1.default.RegisterCommand('imageManagerCustom', {
+                                title: 'Browse',
+                                undo: !1,
+                                focus: !1,
+                                modal: !0,
+                                callback() {
+                                    this.imageManagerCustom.show();
+                                },
+                                plugin: 'imageManagerCustom',
+                            }),
+                            froala_editor_1.default.DefineIcon('imageManagerCustom', { NAME: 'folder', SVG_KEY: 'imageManager' }),
+                            froala_editor_1.default.DefineIcon('imageManagerCustomInsert', { NAME: 'plus', SVG_KEY: 'add' }),
+                            froala_editor_1.default.DefineIcon('imageManagerCustomDelete', { NAME: 'trash', SVG_KEY: 'remove' });
+                    }
+                };
+            });
+
             FroalaEditor.DEFAULTS = Object.assign(FroalaEditor.DEFAULTS, {});
             FroalaEditor.PLUGINS.menuButton = function menuButton(editor) {
                 let inputButton;