@stratusjs/angular 0.11.2 → 0.12.0

package/dist/angular.bundle.js

@@ -94401,7 +94401,7 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                     this.elementRef = elementRef;
                     this.title = moduleName$e + '_component';
                     Stratus.Instances[_.uniqueId('sa_base_component_')] = this;
-                    this.hydrate(this.elementRef, this.sanitizer, ["title", "uid", "target", "targetSuffix", "id", "manifest", "decouple", "direct", "api", "urlRoot", "type", "property", "endpoint", "sanitizer", "ref", "elementRef", "ngOnInit", "ngOnChanges", "hydrate", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
+                    this.hydrate(this.elementRef, this.sanitizer, ["title", "target", "targetSuffix", "id", "manifest", "decouple", "direct", "api", "urlRoot", "type", "property", "endpoint", "sanitizer", "ref", "elementRef", "ngOnInit", "ngOnChanges", "hydrate", "uid", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
                 }
                 ngOnInit() {
                     console.info('selector.ngOnInit');
@@ -95583,6 +95583,7 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                     this._ = _;
                     this.Stratus = Stratus;
                     this.apiBase = '/Api/Media';
+                    this.apiParams = 'forceContext=context';
                     this.mediaEntities = [];
                     this.isMediaLoading = true;
                     this.limit = 20;
@@ -95631,7 +95632,7 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                         paging = this.pageEvent.pageIndex + 1;
                     }
                     query = (_.isString(query) && !_.isEmpty(query)) ? `"${query}"` : '';
-                    return `${this.apiBase}?limit=${limit}&p=${paging}&q=${query}`;
+                    return `${this.apiBase}?limit=${limit}&p=${paging}&q=${query}&${this.apiParams}`;
                 }
                 getQuery(query) {
                     this.lastMediaQuery = query;
@@ -123043,7 +123044,7 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                         this.styled = true;
                         this.refresh();
                     });
-                    this.hydrate(elementRef, sanitizer, ["title", "uid", "dev", "debug", "editor", "target", "targetSuffix", "id", "manifest", "decouple", "direct", "api", "urlRoot", "property", "classes", "_", "has", "log", "Stratus", "registry", "fetched", "data", "collection", "model", "dataSub", "onChange", "subscriber", "svgIcons", "initialized", "styled", "blurred", "focused", "codeViewIsOpen", "form", "dataChangeLog", "incomingData", "outgoingData", "debounceSave", "debounceTime", "forceSave", "froalaEditorDirective", "froalaStandardButtons", "froalaConfig", "sanitizer", "ref", "elementRef", "fb", "dialog", "ngOnInit", "modelSave", "listDuplicates", "normalizeIn", "normalizeOut", "changeImgSize", "handleError", "fetchData", "dataDefer", "dataRef", "onDataChange", "created", "changedEditor", "onChangeEvent", "onFocus", "onBlur", "bypassHTML", "trigger", "openCitationDialog", "openLinkDialog", "openMediaDialog", "openCodeViewDialog", "hydrate", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
+                    this.hydrate(elementRef, sanitizer, ["title", "dev", "debug", "editor", "target", "targetSuffix", "id", "manifest", "decouple", "direct", "api", "urlRoot", "property", "classes", "_", "has", "log", "Stratus", "registry", "fetched", "data", "collection", "model", "dataSub", "onChange", "subscriber", "svgIcons", "initialized", "styled", "blurred", "focused", "codeViewIsOpen", "form", "dataChangeLog", "incomingData", "outgoingData", "debounceSave", "debounceTime", "forceSave", "froalaEditorDirective", "froalaStandardButtons", "froalaConfig", "sanitizer", "ref", "elementRef", "fb", "dialog", "ngOnInit", "modelSave", "listDuplicates", "normalizeIn", "normalizeOut", "changeImgSize", "handleError", "fetchData", "dataDefer", "dataRef", "onDataChange", "created", "changedEditor", "onChangeEvent", "onFocus", "onBlur", "bypassHTML", "trigger", "openCitationDialog", "openLinkDialog", "openMediaDialog", "openCodeViewDialog", "hydrate", "uid", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
                     this.fetchData()
                         .then(data => {
                         if (!data || !(data instanceof EventManager$1)) {
@@ -123545,7 +123546,7 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                         this.styled = true;
                         this.refresh();
                     });
-                    this.hydrate(elementRef, sanitizer, ["title", "uid", "target", "targetSuffix", "id", "manifest", "decouple", "direct", "api", "urlRoot", "type", "property", "endpoint", "_", "has", "log", "Stratus", "registry", "fetched", "data", "collection", "model", "dataSub", "onChange", "subscriber", "eventID", "svgIcons", "styled", "empty", "libraryDisplay", "isSelector", "isGrid", "listGroup", "placeholder", "targetList", "targetIndex", "sourceList", "sourceIndex", "activeContainer", "iconRegistry", "sanitizer", "ref", "elementRef", "viewportRuler", "drop", "moveModel", "goToUrl", "remove", "fetchData", "dataDefer", "dataRef", "onDataChange", "prioritize", "getSvg", "addSvgIcon", "toggleLibrary", "showDetails", "deleteMedia", "removeFromSelected", "dragEntered", "move", "moveItemInGrid", "enterPredicate", "getPointerPositionOnPage", "hydrate", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
+                    this.hydrate(elementRef, sanitizer, ["title", "target", "targetSuffix", "id", "manifest", "decouple", "direct", "api", "urlRoot", "type", "property", "endpoint", "_", "has", "log", "Stratus", "registry", "fetched", "data", "collection", "model", "dataSub", "onChange", "subscriber", "eventID", "svgIcons", "styled", "empty", "libraryDisplay", "isSelector", "isGrid", "listGroup", "placeholder", "targetList", "targetIndex", "sourceList", "sourceIndex", "activeContainer", "iconRegistry", "sanitizer", "ref", "elementRef", "viewportRuler", "drop", "moveModel", "goToUrl", "remove", "fetchData", "dataDefer", "dataRef", "onDataChange", "prioritize", "getSvg", "addSvgIcon", "toggleLibrary", "showDetails", "deleteMedia", "removeFromSelected", "dragEntered", "move", "moveItemInGrid", "enterPredicate", "getPointerPositionOnPage", "hydrate", "uid", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
                     this.eventID = `${this.target}:${this.id}:${this.property}`;
                     this.fetchData()
                         .then(data => {
@@ -123902,7 +123903,7 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                         this.styled = true;
                         this.refresh().then();
                     });
-                    this.hydrate(elementRef, sanitizer, ["title", "uid", "target", "targetSuffix", "id", "manifest", "decouple", "direct", "api", "urlRoot", "type", "property", "endpoint", "ignorePriority", "get", "has", "log", "Stratus", "selectCtrl", "registry", "fetched", "data", "collection", "model", "dataSub", "onChange", "subscriber", "svgIcons", "styled", "empty", "iconRegistry", "sanitizer", "ref", "elementRef", "drop", "goToUrl", "toggleStatus", "remove", "fetchData", "dataDefer", "dataRef", "getString", "onDataChange", "prioritize", "getSvg", "addSvgIcon", "hydrate", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
+                    this.hydrate(elementRef, sanitizer, ["title", "target", "targetSuffix", "id", "manifest", "decouple", "direct", "api", "urlRoot", "type", "property", "endpoint", "ignorePriority", "get", "has", "log", "Stratus", "selectCtrl", "registry", "fetched", "data", "collection", "model", "dataSub", "onChange", "subscriber", "svgIcons", "styled", "empty", "iconRegistry", "sanitizer", "ref", "elementRef", "drop", "goToUrl", "toggleStatus", "remove", "fetchData", "dataDefer", "dataRef", "getString", "onDataChange", "prioritize", "getSvg", "addSvgIcon", "hydrate", "uid", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
                     this.fetchData()
                         .then(data => {
                         if (!data || !(data instanceof EventManager$1)) {
@@ -124178,7 +124179,7 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                     Stratus.Instances[this.uid] = this;
                     this.timezoneList = Intl.supportedValuesOf('timeZone');
                     this.currentTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-                    this.hydrate(elementRef, sanitizer, ["title", "uid", "target", "targetSuffix", "id", "manifest", "decouple", "direct", "api", "urlRoot", "type", "property", "endpoint", "Stratus", "registry", "fetched", "data", "model", "dataSub", "onChange", "subscriber", "label", "timezone", "currentTimezone", "inputTimezone", "timezoneList", "filteredTimezones", "initialized", "elementRef", "ref", "sanitizer", "ngOnInit", "updateLabel", "_filter", "fetchData", "dataDefer", "dataRef", "valueChanged", "handleObservableError", "timezoneSelected", "hydrate", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
+                    this.hydrate(elementRef, sanitizer, ["title", "target", "targetSuffix", "id", "manifest", "decouple", "direct", "api", "urlRoot", "type", "property", "endpoint", "Stratus", "registry", "fetched", "data", "model", "dataSub", "onChange", "subscriber", "label", "timezone", "currentTimezone", "inputTimezone", "timezoneList", "filteredTimezones", "initialized", "elementRef", "ref", "sanitizer", "ngOnInit", "updateLabel", "_filter", "fetchData", "dataDefer", "dataRef", "valueChanged", "handleObservableError", "timezoneSelected", "hydrate", "uid", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
                     this.filteredTimezones = this.inputTimezone.valueChanges.pipe(startWith(''), map(value => this._filter(value || '')));
                     this.fetchData()
                         .then(data => {
@@ -124396,7 +124397,7 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                 ngOnInit() {
                     this.uid = safeUniqueId('sa', moduleName$3, 'component');
                     Stratus.Instances[this.uid] = this;
-                    this.hydrate(this.elementRef, this.sanitizer, ["title", "uid", "isInitialized", "isDestroyed", "isStyled", "target", "targetSuffix", "id", "manifest", "decouple", "direct", "api", "urlRoot", "type", "property", "Stratus", "registry", "fetched", "data", "collection", "model", "dataSub", "onChange", "subscriber", "unsettled", "svgIcons", "isSingleClick", "dblClickWait", "dropLists", "dropListIdMap", "dropListMap", "expandedNodeSet", "dragging", "expandTimeout", "expandDelay", "dropData", "cdkDropListSortingDisabled", "tree", "treeMap", "metaMap", "dataSource", "treeControl", "isBorder", "isDebug", "iconRegistry", "sanitizer", "backend", "ref", "elementRef", "document", "ngOnInit", "ngOnDestroy", "refresh", "remove", "removeNode", "nodeIsEqual", "fetchData", "dataDefer", "dataRef", "trackDropLists", "setExpanded", "setExpandedClick", "setExpandedDblClick", "onDragDrop", "onDragMove", "showDragData", "clearDragData", "buildNodePatch", "getSvg", "addSvgIcon", "hydrate", "disableRefresh", "stagger", "reloading"]);
+                    this.hydrate(this.elementRef, this.sanitizer, ["title", "isInitialized", "isDestroyed", "isStyled", "target", "targetSuffix", "id", "manifest", "decouple", "direct", "api", "urlRoot", "type", "property", "Stratus", "registry", "fetched", "data", "collection", "model", "dataSub", "onChange", "subscriber", "unsettled", "svgIcons", "isSingleClick", "dblClickWait", "dropLists", "dropListIdMap", "dropListMap", "expandedNodeSet", "dragging", "expandTimeout", "expandDelay", "dropData", "cdkDropListSortingDisabled", "tree", "treeMap", "metaMap", "dataSource", "treeControl", "isBorder", "isDebug", "iconRegistry", "sanitizer", "backend", "ref", "elementRef", "document", "ngOnInit", "ngOnDestroy", "refresh", "remove", "removeNode", "nodeIsEqual", "fetchData", "dataDefer", "dataRef", "trackDropLists", "setExpanded", "setExpandedClick", "setExpandedDblClick", "onDragDrop", "onDragMove", "showDragData", "clearDragData", "buildNodePatch", "getSvg", "addSvgIcon", "hydrate", "uid", "disableRefresh", "stagger", "reloading"]);
                     Stratus.Internals.CssLoader(`${localDir$7}/${moduleName$3}/${moduleName$3}.component${min$6}.css`)
                         .then(() => {
                         this.isStyled = true;
@@ -128275,7 +128276,7 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                         console.error('CSS Failed to load for Component:', this);
                         this.styled = false;
                     });
-                    this.hydrate(this.elementRef, this.sanitizer, ["gMap", "map", "info", "title", "uid", "initializing", "initialized", "styled", "watcher", "height", "width", "referenceParent", "fullHeight", "fullHeightMinusElements", "fullHeightMinusElementNames", "googleMapsKey", "markers", "callback", "zoom", "mapType", "zoomControl", "scrollwheel", "disableDoubleClickZoom", "center", "defaultIcon", "defaultIconHover", "defaultIconLabelOriginX", "defaultIconLabelOriginY", "disableMarkerAnimations", "options", "storedMarkers", "highestMarkerZIndex", "resizeDebounce", "fitMarkerBoundsDebounce", "Differ", "window", "sanitizer", "elementRef", "ngDoCheck", "ngOnInit", "ngAfterViewInit", "onResize", "resize", "getWindowSize", "getDocumentSize", "getElementSize", "getParentSize", "updateWidgetSize", "fitMarkerBounds", "decodeHTML", "processOptions", "processProvidedMarkersPath", "processProvidedCallback", "getMarkerBounds", "fitBounds", "initGoogleMapsApi", "getCurrentPosition", "centerAtPosition", "panToPosition", "getHighestMarkerZIndex", "addMarker", "removeMarkers", "googleMaps", "mapClick", "openMarkerInfo", "hydrate", "ref", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
+                    this.hydrate(this.elementRef, this.sanitizer, ["gMap", "map", "info", "title", "initializing", "initialized", "styled", "watcher", "height", "width", "referenceParent", "fullHeight", "fullHeightMinusElements", "fullHeightMinusElementNames", "googleMapsKey", "markers", "callback", "zoom", "mapType", "zoomControl", "scrollwheel", "disableDoubleClickZoom", "center", "defaultIcon", "defaultIconHover", "defaultIconLabelOriginX", "defaultIconLabelOriginY", "disableMarkerAnimations", "options", "storedMarkers", "highestMarkerZIndex", "resizeDebounce", "fitMarkerBoundsDebounce", "Differ", "window", "sanitizer", "elementRef", "ngDoCheck", "ngOnInit", "ngAfterViewInit", "onResize", "resize", "getWindowSize", "getDocumentSize", "getElementSize", "getParentSize", "updateWidgetSize", "fitMarkerBounds", "decodeHTML", "processOptions", "processProvidedMarkersPath", "processProvidedCallback", "getMarkerBounds", "fitBounds", "initGoogleMapsApi", "getCurrentPosition", "centerAtPosition", "panToPosition", "getHighestMarkerZIndex", "addMarker", "removeMarkers", "googleMaps", "mapClick", "openMarkerInfo", "hydrate", "uid", "ref", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
                     if ('Safari' === Stratus.Client.name) {
                         this.disableMarkerAnimations = true;
                     }
@@ -128773,6 +128774,205 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                 }
             };
 
+            function _typeof(obj) {
+              "@babel/helpers - typeof";
+
+              if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+                _typeof = function (obj) {
+                  return typeof obj;
+                };
+              } else {
+                _typeof = function (obj) {
+                  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+                };
+              }
+
+              return _typeof(obj);
+            }
+
+            var V3_URL = 'https://js.stripe.com/v3';
+            var V3_URL_REGEX = /^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/;
+            var EXISTING_SCRIPT_MESSAGE = 'loadStripe.setLoadParameters was called but an existing Stripe.js script already exists in the document; existing script parameters will be used';
+            var findScript = function findScript() {
+              var scripts = document.querySelectorAll("script[src^=\"".concat(V3_URL, "\"]"));
+
+              for (var i = 0; i < scripts.length; i++) {
+                var script = scripts[i];
+
+                if (!V3_URL_REGEX.test(script.src)) {
+                  continue;
+                }
+
+                return script;
+              }
+
+              return null;
+            };
+
+            var injectScript = function injectScript(params) {
+              var queryString = params && !params.advancedFraudSignals ? '?advancedFraudSignals=false' : '';
+              var script = document.createElement('script');
+              script.src = "".concat(V3_URL).concat(queryString);
+              var headOrBody = document.head || document.body;
+
+              if (!headOrBody) {
+                throw new Error('Expected document.body not to be null. Stripe.js requires a <body> element.');
+              }
+
+              headOrBody.appendChild(script);
+              return script;
+            };
+
+            var registerWrapper = function registerWrapper(stripe, startTime) {
+              if (!stripe || !stripe._registerWrapper) {
+                return;
+              }
+
+              stripe._registerWrapper({
+                name: 'stripe-js',
+                version: "4.0.0",
+                startTime: startTime
+              });
+            };
+
+            var stripePromise = null;
+            var onErrorListener = null;
+            var onLoadListener = null;
+
+            var onError = function onError(reject) {
+              return function () {
+                reject(new Error('Failed to load Stripe.js'));
+              };
+            };
+
+            var onLoad = function onLoad(resolve, reject) {
+              return function () {
+                if (window.Stripe) {
+                  resolve(window.Stripe);
+                } else {
+                  reject(new Error('Stripe.js not available'));
+                }
+              };
+            };
+
+            var loadScript = function loadScript(params) {
+              // Ensure that we only attempt to load Stripe.js at most once
+              if (stripePromise !== null) {
+                return stripePromise;
+              }
+
+              stripePromise = new Promise(function (resolve, reject) {
+                if (typeof window === 'undefined' || typeof document === 'undefined') {
+                  // Resolve to null when imported server side. This makes the module
+                  // safe to import in an isomorphic code base.
+                  resolve(null);
+                  return;
+                }
+
+                if (window.Stripe && params) {
+                  console.warn(EXISTING_SCRIPT_MESSAGE);
+                }
+
+                if (window.Stripe) {
+                  resolve(window.Stripe);
+                  return;
+                }
+
+                try {
+                  var script = findScript();
+
+                  if (script && params) {
+                    console.warn(EXISTING_SCRIPT_MESSAGE);
+                  } else if (!script) {
+                    script = injectScript(params);
+                  } else if (script && onLoadListener !== null && onErrorListener !== null) {
+                    var _script$parentNode;
+
+                    // remove event listeners
+                    script.removeEventListener('load', onLoadListener);
+                    script.removeEventListener('error', onErrorListener); // if script exists, but we are reloading due to an error,
+                    // reload script to trigger 'load' event
+
+                    (_script$parentNode = script.parentNode) === null || _script$parentNode === void 0 ? void 0 : _script$parentNode.removeChild(script);
+                    script = injectScript(params);
+                  }
+
+                  onLoadListener = onLoad(resolve, reject);
+                  onErrorListener = onError(reject);
+                  script.addEventListener('load', onLoadListener);
+                  script.addEventListener('error', onErrorListener);
+                } catch (error) {
+                  reject(error);
+                  return;
+                }
+              }); // Resets stripePromise on error
+
+              return stripePromise["catch"](function (error) {
+                stripePromise = null;
+                return Promise.reject(error);
+              });
+            };
+            var initStripe = function initStripe(maybeStripe, args, startTime) {
+              if (maybeStripe === null) {
+                return null;
+              }
+
+              var stripe = maybeStripe.apply(undefined, args);
+              registerWrapper(stripe, startTime);
+              return stripe;
+            }; // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+
+            var validateLoadParams = function validateLoadParams(params) {
+              var errorMessage = "invalid load parameters; expected object of shape\n\n    {advancedFraudSignals: boolean}\n\nbut received\n\n    ".concat(JSON.stringify(params), "\n");
+
+              if (params === null || _typeof(params) !== 'object') {
+                throw new Error(errorMessage);
+              }
+
+              if (Object.keys(params).length === 1 && typeof params.advancedFraudSignals === 'boolean') {
+                return params;
+              }
+
+              throw new Error(errorMessage);
+            };
+
+            var loadParams;
+            var loadStripeCalled = false;
+            var loadStripe = function loadStripe() {
+              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                args[_key] = arguments[_key];
+              }
+
+              loadStripeCalled = true;
+              var startTime = Date.now();
+              return loadScript(loadParams).then(function (maybeStripe) {
+                return initStripe(maybeStripe, args, startTime);
+              });
+            };
+
+            loadStripe.setLoadParameters = function (params) {
+              // we won't throw an error if setLoadParameters is called with the same values as before
+              if (loadStripeCalled && loadParams) {
+                var validatedParams = validateLoadParams(params);
+                var parameterKeys = Object.keys(validatedParams);
+                var sameParameters = parameterKeys.reduce(function (previousValue, currentValue) {
+                  var _loadParams;
+
+                  return previousValue && params[currentValue] === ((_loadParams = loadParams) === null || _loadParams === void 0 ? void 0 : _loadParams[currentValue]);
+                }, true);
+
+                if (sameParameters) {
+                  return;
+                }
+              }
+
+              if (loadStripeCalled) {
+                throw new Error('You cannot change load parameters after calling loadStripe');
+              }
+
+              loadParams = validateLoadParams(params);
+            };
+
             var __decorate$8 = (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);
@@ -128807,62 +129007,60 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
             let StripeService = class StripeService {
                 constructor() {
                     this.publishKey = '';
-                    this.Stripe = {};
                     this.instanceOnEmitters = {};
                     this.collections = {};
                     this.initializing = false;
                     this.initialized = false;
                     Stratus.Services.Stripe = this;
                 }
-                initialize() {
+                initialize(key) {
                     return __awaiter$6(this, void 0, void 0, function* () {
-                        if (!this.initialized && !this.initializing) {
-                            this.initializing = true;
-                            try {
-                                yield Stratus.Internals.JsLoader('https://js.stripe.com/v3/');
+                        this.publishKey = key;
+                        if (this.initialized || this.initializing) {
+                            return yield this.waitForInitialization();
+                        }
+                        this.initializing = true;
+                        try {
+                            yield Stratus.Internals.JsLoader('https://js.stripe.com/v3/');
+                            const stripe = yield loadStripe(key);
+                            if (!Object.prototype.hasOwnProperty.call(window, 'Stripe')) {
+                                console.warn('Stripe Api was not initialized yet, waiting...');
+                                yield this.delay(3000);
                                 if (!Object.prototype.hasOwnProperty.call(window, 'Stripe')) {
-                                    console.warn('Stripe Api was not initialized yet, waiting...');
-                                    yield this.delay(3000);
-                                    if (!Object.prototype.hasOwnProperty.call(window, 'Stripe')) {
-                                        const error = 'Stripe Api was not initialized, payment widgets cannot load.';
-                                        console.error(error);
-                                        this.initializing = false;
-                                        Toastify({
-                                            text: error,
-                                            duration: 3000,
-                                            close: true,
-                                            stopOnFocus: true,
-                                            style: {
-                                                background: '#E14D45',
-                                            }
-                                        }).showToast();
-                                        return;
-                                    }
+                                    const error = 'Stripe Api was not initialized, payment widgets cannot load.';
+                                    console.error(error);
+                                    this.initializing = false;
+                                    Toastify({
+                                        text: error,
+                                        duration: 3000,
+                                        close: true,
+                                        stopOnFocus: true,
+                                        style: {
+                                            background: '#E14D45',
+                                        }
+                                    }).showToast();
+                                    return;
                                 }
                             }
-                            catch (e) {
-                                const error = 'Stripe Api could not be fetched, payment widgets cannot load.';
-                                console.error(error);
-                                this.initializing = false;
-                                Toastify({
-                                    text: error,
-                                    duration: 3000,
-                                    close: true,
-                                    stopOnFocus: true,
-                                    style: {
-                                        background: '#E14D45',
-                                    }
-                                }).showToast();
-                                return;
-                            }
-                            this.Stripe.stripe = window.Stripe(this.publishKey);
-                            this.Stripe.stripeElements = this.Stripe.stripe.elements();
-                            this.initialized = true;
-                            this.initializing = false;
+                            this.stripe = stripe;
                         }
-                        else if (this.initializing) {
-                            return yield this.waitForInitialization();
+                        catch (e) {
+                            const error = 'Stripe Api could not be fetched, payment widgets cannot load.';
+                            console.error(error);
+                            this.initializing = false;
+                            Toastify({
+                                text: error,
+                                duration: 3000,
+                                close: true,
+                                stopOnFocus: true,
+                                style: {
+                                    background: '#E14D45',
+                                }
+                            }).showToast();
+                            return;
                         }
+                        this.initialized = true;
+                        this.initializing = false;
                     });
                 }
                 delay(ms) {
@@ -128890,37 +129088,30 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                         return;
                     });
                 }
-                elements(key) {
+                getElements(key) {
                     return __awaiter$6(this, void 0, void 0, function* () {
-                        this.publishKey = key;
-                        yield this.initialize();
-                        return this.Stripe.stripeElements;
+                        yield this.initialize(key);
+                        return this.stripe.elements;
                     });
                 }
-                confirmCardSetup(id, clientSecret, data, options) {
+                confirmSetup(id, clientSecret, confirmParams) {
                     return __awaiter$6(this, void 0, void 0, function* () {
                         if (isEmpty(this.currentElement) ||
                             this.currentElement.id !== id) {
                             const error = {
                                 type: 'invalid_request_error',
                                 charge: null,
-                                message: 'The Element for ' + id + 'no longer exists. Cannot attach confirmCardSetup'
+                                message: 'The Element for ' + id + 'no longer exists. Cannot attach confirmSetup'
                             };
                             return { error };
                         }
-                        const stripeData = {
-                            payment_method: {
-                                card: this.currentElement.element
-                            }
-                        };
-                        if (data
-                            && !isEmpty(data.payment_method)
-                            && !isString(data.payment_method)
-                            && !isEmpty(data.payment_method.billing_details)
-                            && !isString(stripeData.payment_method)) {
-                            stripeData.payment_method.billing_details = data.payment_method.billing_details;
+                        const elements = this.currentElement.elements;
+                        const possibleError = yield elements.submit();
+                        if (possibleError.error) {
+                            console.warn('submit error', possibleError.error);
+                            return { setupIntent: null, error: possibleError.error };
                         }
-                        return this.Stripe.stripe.confirmCardSetup(clientSecret, stripeData, options);
+                        return this.stripe.confirmSetup({ elements, clientSecret, confirmParams, redirect: 'if_required' });
                     });
                 }
                 registerCollection(component, collection) {
@@ -128948,17 +129139,20 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                         yield Promise.all(uidList.map(fn => fn()));
                     });
                 }
-                createElement(id, publishKey, paymentMethodType, options, mountElement) {
+                createElement(id, publishKey, clientSecret, options, mountElement) {
                     return __awaiter$6(this, void 0, void 0, function* () {
-                        if (!isEmpty(this.currentElement)) {
+                        if (this.currentElement) {
                             console.warn('StripeElement for', this.currentElement.id, 'already exists. Destroying existing (consider cleaning up first)');
                             this.destroyElement();
                         }
-                        const element = (yield this.elements(publishKey)).create(paymentMethodType, options);
+                        const elementType = 'payment';
+                        const elements = yield this.getElements(publishKey);
+                        const stripeElements = elements({ clientSecret });
+                        const element = stripeElements.create(elementType, options);
                         this.currentElement = {
                             id: safeUniqueId(id),
-                            paymentMethodType,
-                            element
+                            element,
+                            elements: stripeElements
                         };
                         if (mountElement) {
                             this.mountElement(this.currentElement.id, mountElement);
@@ -128996,10 +129190,10 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                         }).showToast();
                         return;
                     }
-                    return this.currentElement.element.addEventListener(event, handler);
+                    return this.currentElement.element.on(event, handler);
                 }
                 destroyElement(id) {
-                    if (!isEmpty(this.currentElement) &&
+                    if (this.currentElement &&
                         (isNil(id) ||
                             (isString(id) && this.currentElement.id === id))) {
                         if (this.currentElement.element) {
@@ -129102,12 +129296,15 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                     this.paymentMethodApiPath = 'PaymentMethod';
                     this.cardComplete = false;
                     this.cardSaved = false;
+                    this.pmNotVerified = false;
+                    this.cardNextAction = null;
                     this.formPending = false;
                     this.publishKey = '';
                     this.formMessage = '';
                     this.billingInfo = {
                         address: {}
                     };
+                    this.verifyCode = 'SM';
                     this.uid = safeUniqueId('sa', snakeCase(this.title));
                     Stratus.Instances[this.uid] = this;
                     this.elementId = this.elementId || this.uid;
@@ -129119,9 +129316,9 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                         console.error('CSS Failed to load for Component:', this);
                         this.styled = false;
                     });
-                    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"]);
+                    this.hydrate(this.elementRef, this.sanitizer, ["title", "urlRoot", "paymentMethodApiPath", "cardComplete", "cardSaved", "pmNotVerified", "cardNextAction", "formPending", "clientSecret", "publishKey", "formMessage", "detailedBillingInfo", "defaultBillingInfo", "billingInfo", "paymentMethodId", "verifyCode", "cardId", "elementRef", "sanitizer", "Stripe", "dialogRef", "dialogData", "ngOnInit", "isEditable", "isSubmittable", "saveCard", "verifyPM", "dialogClose", "ngOnDestroy", "elementId", "styled", "initialized", "hydrate", "uid", "ref", "disableRefresh", "stagger", "reloading", "refresh"]);
                     if (!isEmpty(this.dialogData)) {
-                        const keysPossible = ["clientSecret", "publishKey", "formMessage", "urlRoot", "paymentMethodApiPath", "detailedBillingInfo", "defaultBillingInfo"];
+                        const keysPossible = ["clientSecret", "publishKey", "formMessage", "urlRoot", "paymentMethodApiPath", "detailedBillingInfo", "defaultBillingInfo", "pmNotVerified", "paymentMethodId"];
                         Object.keys(this.dialogData).forEach((attr) => {
                             if (!isEmpty(attr) && includes(keysPossible, attr)) {
                                 set(this, attr, this.dialogData[attr]);
@@ -129129,45 +129326,59 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                         });
                     }
                     if (isObject$2(this.defaultBillingInfo)) {
+                        if (Object.hasOwn(this.defaultBillingInfo, 'phone') &&
+                            isNumber(this.defaultBillingInfo.phone) &&
+                            this.defaultBillingInfo.phone) {
+                            this.defaultBillingInfo.phone = this.defaultBillingInfo.phone.toString();
+                        }
+                        if (Object.hasOwn(this.defaultBillingInfo, 'address') &&
+                            Object.hasOwn(this.defaultBillingInfo.address, 'postal_code') &&
+                            isNumber(this.defaultBillingInfo.address.postal_code) &&
+                            this.defaultBillingInfo.address.postal_code) {
+                            this.defaultBillingInfo.address.postal_code = this.defaultBillingInfo.address.postal_code.toString();
+                        }
                         assignIn(this.billingInfo, this.defaultBillingInfo);
                     }
                 }
                 ngOnInit() {
                     return __awaiter$5(this, void 0, void 0, function* () {
                         const options = {
-                            hidePostalCode: this.detailedBillingInfo ? true : false
+                            defaultValues: {
+                                billingDetails: this.billingInfo
+                            },
                         };
-                        this.cardId = yield this.Stripe.createElement(this.uid, this.publishKey, 'card', options, `#${this.elementId}-mount`);
-                        this.Stripe.elementAddEventListener(this.cardId, 'change', (event) => {
-                            const displayError = document.getElementById(`${this.elementId}-errors`);
-                            if (Object.prototype.hasOwnProperty.call(event, 'complete') &&
-                                this.cardComplete !== event.complete) {
-                                this.cardComplete = event.complete;
-                            }
-                            if (event.error) {
-                                displayError.textContent = event.error.message;
-                            }
-                            else {
-                                displayError.textContent = '';
-                            }
-                        });
-                        this.initialized = true;
+                        if (this.publishKey && this.clientSecret) {
+                            this.cardId = yield this.Stripe.createElement(this.uid, this.publishKey, this.clientSecret, options, `#${this.elementId}-mount`);
+                            this.Stripe.elementAddEventListener(this.cardId, 'ready', (event) => {
+                                this.initialized = true;
+                            });
+                            this.Stripe.elementAddEventListener(this.cardId, 'change', (event) => {
+                                const displayError = document.getElementById(`${this.elementId}-errors`);
+                                if (Object.prototype.hasOwnProperty.call(event, 'complete') &&
+                                    this.cardComplete !== event.complete) {
+                                    this.cardComplete = event.complete;
+                                }
+                                if (event.error) {
+                                    displayError.textContent = event.error.message;
+                                }
+                                else {
+                                    displayError.textContent = '';
+                                }
+                            });
+                        }
+                        else if (this.paymentMethodId) {
+                            this.initialized = true;
+                        }
+                        else {
+                            console.warn('PaymentMethodComponent is missing required fields');
+                        }
                     });
                 }
                 isEditable() {
                     return !this.formPending && this.initialized;
                 }
-                isBillingDetailsFilled() {
-                    if (!isEmpty(this.billingInfo.name) &&
-                        !isEmpty(this.billingInfo.email) &&
-                        !isEmpty(this.billingInfo.address.line1) &&
-                        !isEmpty(this.billingInfo.address.city) &&
-                        !isEmpty(this.billingInfo.address.state) &&
-                        !isEmpty(this.billingInfo.address.postal_code)) ;
-                    return this.isEditable();
-                }
                 isSubmittable() {
-                    return this.cardComplete && this.isEditable() && this.isBillingDetailsFilled();
+                    return this.cardComplete && this.isEditable();
                 }
                 saveCard(ev) {
                     return __awaiter$5(this, void 0, void 0, function* () {
@@ -129178,20 +129389,18 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                             return;
                         }
                         this.formPending = true;
-                        const { setupIntent, error } = yield this.Stripe.confirmCardSetup(this.cardId, this.clientSecret, {
-                            payment_method: {
-                                billing_details: this.billingInfo
-                            }
+                        const { setupIntent, error } = yield this.Stripe.confirmSetup(this.cardId, this.clientSecret, {
+                            return_url: '',
                         });
                         if (error) {
                             console.error('error:', error, setupIntent);
                             this.formPending = false;
-                            const displayError = document.getElementById(`${this.elementId}-errors`);
+                            const displaySaveError = document.getElementById(`${this.elementId}-errors`);
                             let errorMessage = 'An Unknown Error has occurred';
                             if (Object.prototype.hasOwnProperty.call(error, 'message')) {
                                 errorMessage = error.message;
                             }
-                            displayError.textContent = errorMessage;
+                            displaySaveError.textContent = errorMessage;
                             return;
                         }
                         if (setupIntent.status === 'succeeded'
@@ -129216,13 +129425,75 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                                 email: this.billingInfo.email
                             };
                             this.Stripe.emitManual('paymentMethodCreated', 'Stripe', this, cardDetails);
+                            return;
                         }
-                        else {
+                        if (setupIntent.status === 'requires_action'
+                            && isString(setupIntent.payment_method)
+                            && setupIntent.next_action != null
+                            && [
+                                'redirect_to_url',
+                                'verify_with_microdeposits'
+                            ].includes(setupIntent.next_action.type)) {
+                            const apiOptions = {
+                                target: this.paymentMethodApiPath
+                            };
+                            if (this.urlRoot) {
+                                apiOptions.urlRoot = this.urlRoot;
+                            }
+                            const model = new Model(apiOptions);
+                            model.data = {
+                                status: 0,
+                                next_action: setupIntent.next_action,
+                                payment_method: setupIntent.payment_method,
+                                setup_intent: setupIntent.id,
+                            };
+                            this.paymentMethodId = setupIntent.payment_method;
+                            yield model.save();
+                            this.cardSaved = true;
+                            this.pmNotVerified = true;
                             this.formPending = false;
-                            console.error('something went wrong. no error, no success', setupIntent);
-                            const displayError = document.getElementById(`${this.elementId}-errors`);
-                            displayError.textContent = 'An unknown Error has occurred';
+                            this.cardNextAction = clone(setupIntent.next_action);
+                            yield this.Stripe.fetchCollections();
+                            const cardDetails = {
+                                type: 'us_bank_account',
+                                name: this.billingInfo.name,
+                                email: this.billingInfo.email
+                            };
+                            this.Stripe.emitManual('paymentMethodCreated', 'Stripe', this, cardDetails);
+                            return;
+                        }
+                        this.formPending = false;
+                        console.error('something went wrong. no error, no success', setupIntent);
+                        const displayError = document.getElementById(`${this.elementId}-errors`);
+                        displayError.textContent = 'An unknown Error has occurred';
+                    });
+                }
+                verifyPM(ev) {
+                    return __awaiter$5(this, void 0, void 0, function* () {
+                        if (ev) {
+                            ev.preventDefault();
                         }
+                        if (this.formPending ||
+                            !this.paymentMethodId ||
+                            this.verifyCode.length !== 6) {
+                            return;
+                        }
+                        this.formPending = true;
+                        const apiOptions = {
+                            target: this.paymentMethodApiPath
+                        };
+                        if (this.urlRoot) {
+                            apiOptions.urlRoot = this.urlRoot;
+                        }
+                        const model = new Model(apiOptions);
+                        model.data = {
+                            payment_method: this.paymentMethodId,
+                            verify_value: this.verifyCode
+                        };
+                        yield model.save();
+                        this.cardSaved = true;
+                        this.formPending = false;
+                        yield this.Stripe.fetchCollections();
                     });
                 }
                 dialogClose() {
@@ -129245,6 +129516,10 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                 Input(),
                 __metadata$6("design:type", String)
             ], StripePaymentMethodComponent.prototype, "paymentMethodApiPath", void 0);
+            __decorate$7([
+                Input(),
+                __metadata$6("design:type", Object)
+            ], StripePaymentMethodComponent.prototype, "pmNotVerified", void 0);
             __decorate$7([
                 Input(),
                 __metadata$6("design:type", String)
@@ -129265,6 +129540,10 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                 Input(),
                 __metadata$6("design:type", Object)
             ], StripePaymentMethodComponent.prototype, "defaultBillingInfo", void 0);
+            __decorate$7([
+                Input(),
+                __metadata$6("design:type", String)
+            ], StripePaymentMethodComponent.prototype, "paymentMethodId", void 0);
             StripePaymentMethodComponent = __decorate$7([
                 Component({
                     selector: `sa-${packageName$5}-${componentName$5}`,
@@ -129312,6 +129591,7 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                     this.editable = false;
                     this.templateStyle = 'default';
                     this.urlRoot = '/Api';
+                    this.paymentMethodApiPath = 'PaymentMethod';
                     this.uid = safeUniqueId('sa', snakeCase(this.title));
                     Stratus.Instances[this.uid] = this;
                     this.elementId = this.elementId || this.uid;
@@ -129323,7 +129603,7 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                         console.error('CSS Failed to load for Component:', this);
                         this.styled = false;
                     });
-                    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"]);
+                    this.hydrate(this.elementRef, this.sanitizer, ["title", "model", "editable", "templateStyle", "urlRoot", "paymentMethodApiPath", "dialog", "elementRef", "sanitizer", "Stripe", "ngOnInit", "getCardLogoUrl", "isExpired", "isExpiring", "isUnverified", "deletePM", "verifyPaymentMethod", "deletePMConfirmation", "elementId", "styled", "initialized", "hydrate", "uid", "ref", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
                 }
                 ngOnInit() {
                     return __awaiter$4(this, void 0, void 0, function* () {
@@ -129340,6 +129620,9 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                     if (this.model.pending) {
                         return false;
                     }
+                    if (this.model.data.type !== 'card') {
+                        return false;
+                    }
                     const d = new Date();
                     const month = d.getMonth() + 1;
                     const year = d.getFullYear();
@@ -129355,6 +129638,9 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                     if (this.model.pending) {
                         return false;
                     }
+                    if (this.model.data.type !== 'card') {
+                        return false;
+                    }
                     const d = new Date();
                     const month = d.getMonth() + 1;
                     const year = d.getFullYear();
@@ -129366,6 +129652,15 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                     }
                     return this.model.data.exp_month <= month;
                 }
+                isUnverified() {
+                    if (this.model.pending) {
+                        return false;
+                    }
+                    if (this.model.data.type !== 'us_bank_account') {
+                        return false;
+                    }
+                    return this.model.data.status === 0;
+                }
                 deletePM(event) {
                     if (event) {
                         event.stopPropagation();
@@ -129373,6 +129668,25 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                     this.deletePMConfirmation();
                     return false;
                 }
+                verifyPaymentMethod(ev) {
+                    if (ev) {
+                        ev.preventDefault();
+                    }
+                    const dialogRef = this.dialog.open(StripePaymentMethodComponent, {
+                        width: '1000px',
+                        data: {
+                            urlRoot: this.urlRoot,
+                            paymentMethodApiPath: this.paymentMethodApiPath,
+                            paymentMethodId: this.model.data.paymentMethodId,
+                            pmNotVerified: true
+                        }
+                    });
+                    dialogRef.afterClosed().subscribe((result) => {
+                        if (!result || isEmpty(result)) {
+                            return;
+                        }
+                    });
+                }
                 deletePMConfirmation() {
                     const dialog = this.dialog
                         .open(ConfirmDialogComponent, {
@@ -129410,6 +129724,10 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                 Input(),
                 __metadata$5("design:type", Object)
             ], StripePaymentMethodItemComponent.prototype, "urlRoot", void 0);
+            __decorate$6([
+                Input(),
+                __metadata$5("design:type", Object)
+            ], StripePaymentMethodItemComponent.prototype, "paymentMethodApiPath", void 0);
             StripePaymentMethodItemComponent = __decorate$6([
                 Component({
                     selector: `sa-${packageName$4}-${componentName$4}`,
@@ -129453,7 +129771,7 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@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", "model", "name", "brand", "last4", "expMonth", "expYear", "templateStyle", "elementRef", "sanitizer", "ngOnInit", "uid", "elementId", "styled", "initialized", "hydrate", "ref", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
+                    this.hydrate(this.elementRef, this.sanitizer, ["title", "model", "name", "brand", "last4", "expMonth", "expYear", "templateStyle", "elementRef", "sanitizer", "ngOnInit", "elementId", "styled", "initialized", "hydrate", "uid", "ref", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
                 }
                 ngOnInit() {
                     return __awaiter$3(this, void 0, void 0, function* () {
@@ -129574,7 +129892,7 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                         console.error('CSS Failed to load for Component:', this);
                         this.styled = false;
                     });
-                    this.hydrate(this.elementRef, this.sanitizer, ["title", "urlRoot", "paymentMethodApiPath", "addCardButtonText", "addCardDisabled", "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"]);
+                    this.hydrate(this.elementRef, this.sanitizer, ["title", "urlRoot", "paymentMethodApiPath", "addCardButtonText", "addCardDisabled", "disabled", "property", "detailedBillingInfo", "defaultBillingName", "defaultBillingEmail", "defaultBillingPhone", "defaultBillingZip", "defaultBillingState", "defaultBillingCity", "defaultBillingAddress1", "defaultBillingAddress2", "defaultBillingInfo", "elementRef", "ref", "sanitizer", "Stripe", "ngOnInit", "collection", "elementId", "styled", "initialized", "hydrate", "uid", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
                     const apiOptions = {
                         autoSave: false,
                         target: this.paymentMethodApiPath,
@@ -129750,7 +130068,7 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                         this.styled = false;
                         this.refresh().then();
                     });
-                    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"]);
+                    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", "elementId", "styled", "initialized", "hydrate", "uid", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
                     const apiOptions = {
                         autoSave: false,
                         target: this.paymentMethodApiPath,
@@ -130089,7 +130407,7 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@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", "styled", "initialized", "newPaymentMethodPrompt", "newPaymentMethodPending", "urlRoot", "paymentMethodApiPath", "addCardButtonText", "detailedBillingInfo", "defaultBillingInfo", "elementRef", "sanitizer", "dialog", "ngOnInit", "addPaymentMethod", "inputPaymentMethod", "uid", "elementId", "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", "elementId", "hydrate", "uid", "ref", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
                 }
                 ngOnInit() {
                     this.initialized = true;
@@ -161591,6 +161909,54 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                 };
             });
 
+            System.register(["quill"], function (exports_1, context_1) {
+                var quill_1, BaseImage, ATTRIBUTES, QuillImageFormatPlugin;
+                context_1 && context_1.id;
+                return {
+                    setters: [
+                        function (quill_1_1) {
+                            quill_1 = quill_1_1;
+                        }
+                    ],
+                    execute: function () {
+                        BaseImage = quill_1.default.import('formats/image');
+                        ATTRIBUTES = [
+                            'alt',
+                            'height',
+                            'width',
+                            'stratus-src',
+                            'stratusSrc'
+                        ];
+                        QuillImageFormatPlugin = class QuillImageFormatPlugin extends BaseImage {
+                            constructor() {
+                                super(...arguments);
+                                this.blotName = 'imageCustom';
+                                this.tagName = 'IMG';
+                            }
+                            format(name, value) {
+                                console.log('format:', name, value, this.domNode.getAttribute('src'));
+                                if (ATTRIBUTES.indexOf(name) === -1) {
+                                    super.format(name, value);
+                                    return;
+                                }
+                                if (!value) {
+                                    this.domNode.removeAttribute(name);
+                                    return;
+                                }
+                                if (name === 'stratus-src') {
+                                    console.log('stratus-src:', value);
+                                }
+                                if (name === 'stratusSrc') {
+                                    console.log('stratusSrc:', value);
+                                }
+                                this.domNode.setAttribute(name, value);
+                            }
+                        };
+                        exports_1("QuillImageFormatPlugin", QuillImageFormatPlugin);
+                    }
+                };
+            });
+
             System.register(["@stratusjs/runtime/stratus", "lodash", "quill"], function (exports_1, context_1) {
                 var stratus_1, lodash_1, quill_1, QuillInputButtonPlugin;
                 context_1 && context_1.id;
@@ -161687,54 +162053,6 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                 };
             });
 
-            System.register(["quill"], function (exports_1, context_1) {
-                var quill_1, BaseImage, ATTRIBUTES, QuillImageFormatPlugin;
-                context_1 && context_1.id;
-                return {
-                    setters: [
-                        function (quill_1_1) {
-                            quill_1 = quill_1_1;
-                        }
-                    ],
-                    execute: function () {
-                        BaseImage = quill_1.default.import('formats/image');
-                        ATTRIBUTES = [
-                            'alt',
-                            'height',
-                            'width',
-                            'stratus-src',
-                            'stratusSrc'
-                        ];
-                        QuillImageFormatPlugin = class QuillImageFormatPlugin extends BaseImage {
-                            constructor() {
-                                super(...arguments);
-                                this.blotName = 'imageCustom';
-                                this.tagName = 'IMG';
-                            }
-                            format(name, value) {
-                                console.log('format:', name, value, this.domNode.getAttribute('src'));
-                                if (ATTRIBUTES.indexOf(name) === -1) {
-                                    super.format(name, value);
-                                    return;
-                                }
-                                if (!value) {
-                                    this.domNode.removeAttribute(name);
-                                    return;
-                                }
-                                if (name === 'stratus-src') {
-                                    console.log('stratus-src:', value);
-                                }
-                                if (name === 'stratusSrc') {
-                                    console.log('stratusSrc:', value);
-                                }
-                                this.domNode.setAttribute(name, value);
-                            }
-                        };
-                        exports_1("QuillImageFormatPlugin", QuillImageFormatPlugin);
-                    }
-                };
-            });
-
             System.register(["reflect-metadata", "lodash", "@angular/core"], function (exports_1, context_1) {
                 var lodash_1, core_1, RootComponent;
                 context_1 && context_1.id;
@@ -162154,6 +162472,108 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                 };
             });
 
+            System.register(["@angular/core"], function (exports_1, context_1) {
+                var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+                    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+                    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+                    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+                    return c > 3 && r && Object.defineProperty(target, key, r), r;
+                };
+                var __metadata = (this && this.__metadata) || function (k, v) {
+                    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+                };
+                var core_1, FroalaViewDirective;
+                context_1 && context_1.id;
+                return {
+                    setters: [
+                        function (core_1_1) {
+                            core_1 = core_1_1;
+                        }
+                    ],
+                    execute: function () {
+                        FroalaViewDirective = class FroalaViewDirective {
+                            constructor(renderer, element) {
+                                this.renderer = renderer;
+                                this._element = element.nativeElement;
+                            }
+                            set froalaView(content) {
+                                this._element.innerHTML = content;
+                            }
+                            ngAfterViewInit() {
+                                this.renderer.addClass(this._element, 'fr-view');
+                            }
+                        };
+                        __decorate([
+                            core_1.Input(),
+                            __metadata("design:type", String),
+                            __metadata("design:paramtypes", [String])
+                        ], FroalaViewDirective.prototype, "froalaView", null);
+                        FroalaViewDirective = __decorate([
+                            core_1.Directive({
+                                selector: '[froalaView]'
+                            }),
+                            __metadata("design:paramtypes", [core_1.Renderer2, core_1.ElementRef])
+                        ], FroalaViewDirective);
+                        exports_1("FroalaViewDirective", FroalaViewDirective);
+                    }
+                };
+            });
+
+            System.register(["@angular/core", "@stratusjs/angular/froala/view/froala-view.directive"], function (exports_1, context_1) {
+                var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+                    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+                    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+                    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+                    return c > 3 && r && Object.defineProperty(target, key, r), r;
+                };
+                var FroalaViewModule_1, core_1, froala_view_directive_1, FroalaViewModule;
+                context_1 && context_1.id;
+                return {
+                    setters: [
+                        function (core_1_1) {
+                            core_1 = core_1_1;
+                        },
+                        function (froala_view_directive_1_1) {
+                            froala_view_directive_1 = froala_view_directive_1_1;
+                        }
+                    ],
+                    execute: function () {
+                        FroalaViewModule = FroalaViewModule_1 = class FroalaViewModule {
+                            static forRoot() {
+                                return { ngModule: FroalaViewModule_1, providers: [] };
+                            }
+                        };
+                        FroalaViewModule = FroalaViewModule_1 = __decorate([
+                            core_1.NgModule({
+                                declarations: [froala_view_directive_1.FroalaViewDirective],
+                                exports: [froala_view_directive_1.FroalaViewDirective]
+                            })
+                        ], FroalaViewModule);
+                        exports_1("FroalaViewModule", FroalaViewModule);
+                    }
+                };
+            });
+
+            System.register(["@stratusjs/angular/froala/view/froala-view.directive", "@stratusjs/angular/froala/view/froala-view.module"], function (exports_1, context_1) {
+                context_1 && context_1.id;
+                return {
+                    setters: [
+                        function (froala_view_directive_1_1) {
+                            exports_1({
+                                "FroalaViewDirective": froala_view_directive_1_1["FroalaViewDirective"]
+                            });
+                        },
+                        function (froala_view_module_1_1) {
+                            exports_1({
+                                "FroalaViewModule": froala_view_module_1_1["FroalaViewModule"]
+                            });
+                        }
+                    ],
+                    execute: function () {
+                    }
+                };
+            });
+
             /*!
              * froala_editor v3.2.3 (https://www.froala.com/wysiwyg-editor)
              * License https://froala.com/wysiwyg-editor/terms/
@@ -162516,88 +162936,6 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                 };
             });
 
-            System.register(["@angular/core"], function (exports_1, context_1) {
-                var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-                    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-                    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-                    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-                    return c > 3 && r && Object.defineProperty(target, key, r), r;
-                };
-                var __metadata = (this && this.__metadata) || function (k, v) {
-                    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-                };
-                var core_1, FroalaViewDirective;
-                context_1 && context_1.id;
-                return {
-                    setters: [
-                        function (core_1_1) {
-                            core_1 = core_1_1;
-                        }
-                    ],
-                    execute: function () {
-                        FroalaViewDirective = class FroalaViewDirective {
-                            constructor(renderer, element) {
-                                this.renderer = renderer;
-                                this._element = element.nativeElement;
-                            }
-                            set froalaView(content) {
-                                this._element.innerHTML = content;
-                            }
-                            ngAfterViewInit() {
-                                this.renderer.addClass(this._element, 'fr-view');
-                            }
-                        };
-                        __decorate([
-                            core_1.Input(),
-                            __metadata("design:type", String),
-                            __metadata("design:paramtypes", [String])
-                        ], FroalaViewDirective.prototype, "froalaView", null);
-                        FroalaViewDirective = __decorate([
-                            core_1.Directive({
-                                selector: '[froalaView]'
-                            }),
-                            __metadata("design:paramtypes", [core_1.Renderer2, core_1.ElementRef])
-                        ], FroalaViewDirective);
-                        exports_1("FroalaViewDirective", FroalaViewDirective);
-                    }
-                };
-            });
-
-            System.register(["@angular/core", "@stratusjs/angular/froala/view/froala-view.directive"], function (exports_1, context_1) {
-                var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-                    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-                    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-                    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-                    return c > 3 && r && Object.defineProperty(target, key, r), r;
-                };
-                var FroalaViewModule_1, core_1, froala_view_directive_1, FroalaViewModule;
-                context_1 && context_1.id;
-                return {
-                    setters: [
-                        function (core_1_1) {
-                            core_1 = core_1_1;
-                        },
-                        function (froala_view_directive_1_1) {
-                            froala_view_directive_1 = froala_view_directive_1_1;
-                        }
-                    ],
-                    execute: function () {
-                        FroalaViewModule = FroalaViewModule_1 = class FroalaViewModule {
-                            static forRoot() {
-                                return { ngModule: FroalaViewModule_1, providers: [] };
-                            }
-                        };
-                        FroalaViewModule = FroalaViewModule_1 = __decorate([
-                            core_1.NgModule({
-                                declarations: [froala_view_directive_1.FroalaViewDirective],
-                                exports: [froala_view_directive_1.FroalaViewDirective]
-                            })
-                        ], FroalaViewModule);
-                        exports_1("FroalaViewModule", FroalaViewModule);
-                    }
-                };
-            });
-
             FroalaEditor.DEFAULTS = Object.assign(FroalaEditor.DEFAULTS, {});
             FroalaEditor.PLUGINS.menuButton = function menuButton(editor) {
                 let inputButton;
@@ -162662,26 +163000,6 @@ System.register(['lodash', '@stratusjs/runtime/stratus', '@stratusjs/core/enviro
                 undo: true
             });
 
-            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 () {
-                    }
-                };
-            });
-
         })
     };
 }));