@benbraide/inlinejs-stripe 1.0.4 → 1.0.7

package/dist/inlinejs-stripe.js

@@ -207,16 +207,18 @@ class BaseComponent {
         }
         let scope = new _scope__WEBPACK_IMPORTED_MODULE_12__.Scope(this.id_, this.GenerateUniqueId('scope_'), root);
         this.scopes_[scope.GetId()] = scope;
+        this.AddProxy(scope.GetProxy());
         return scope;
     }
     RemoveScope(scope) {
         let id = ((typeof scope === 'string') ? scope : scope.GetId());
-        if (id in this.scopes_) {
+        if (this.scopes_.hasOwnProperty(id)) {
+            this.RemoveProxy(this.scopes_[id].GetProxy());
             delete this.scopes_[id];
         }
     }
     FindScopeById(id) {
-        return ((id in this.scopes_) ? this.scopes_[id] : null);
+        return (this.scopes_.hasOwnProperty(id) ? this.scopes_[id] : null);
     }
     FindScopeByName(name) {
         return (Object.values(this.scopes_).find(scope => (scope.GetName() === name)) || null);
@@ -315,7 +317,7 @@ class BaseComponent {
     }
     RemoveProxy(proxy) {
         let path = ((typeof proxy === 'string') ? proxy : proxy.GetPath());
-        if (path in this.proxies_) {
+        if (this.proxies_.hasOwnProperty(path)) {
             delete this.proxies_[path];
         }
     }
@@ -392,6 +394,7 @@ class Changes {
     }
     AddNextTickHandler(handler) {
         this.nextTickHandlers_.push(handler);
+        this.Schedule();
     }
     Schedule() {
         if (this.isScheduled_) {
@@ -617,13 +620,19 @@ class Context {
         (this.record_[key] = (this.record_[key] || new _stack__WEBPACK_IMPORTED_MODULE_0__.Stack())).Push(value);
     }
     Pop(key, noResult) {
-        return ((key in this.record_) ? this.record_[key].Pop() : (noResult || null));
+        return (this.record_.hasOwnProperty(key) ? this.record_[key].Pop() : (noResult || null));
     }
     Peek(key, noResult) {
-        return ((key in this.record_) ? this.record_[key].Peek() : (noResult || null));
+        return (this.record_.hasOwnProperty(key) ? this.record_[key].Peek() : (noResult || null));
     }
     Get(key) {
-        return ((key in this.record_) ? this.record_[key] : null);
+        return (this.record_.hasOwnProperty(key) ? this.record_[key] : null);
+    }
+    GetHistory(key) {
+        return (this.record_.hasOwnProperty(key) ? this.record_[key].GetHistory() : []);
+    }
+    GetRecordKeys() {
+        return Object.keys(this.record_);
     }
 }
 
@@ -876,7 +885,7 @@ class ElementScope {
             return;
         }
         this.state_.isMarked = true;
-        if (!(this.element_ instanceof HTMLTemplateElement) && this.element_.tagName.toLowerCase() !== 'svg') {
+        if (!(this.element_ instanceof HTMLTemplateElement)) {
             let component = (0,_find__WEBPACK_IMPORTED_MODULE_6__.FindComponentById)(this.componentId_);
             if (component) {
                 this.DestroyChildren_(component, this.element_, (markOnly || false));
@@ -917,7 +926,7 @@ class ElementScope {
         return (this.managers_.directive = (this.managers_.directive || new _directive_manager__WEBPACK_IMPORTED_MODULE_0__.DirectiveManager()));
     }
     DestroyChildren_(component, target, markOnly) {
-        Array.from(target.children).forEach((child) => {
+        Array.from(target.children).filter(child => !child.contains(target)).forEach((child) => {
             let childScope = component.FindElementScope(child);
             if (childScope) { //Destroy element scope
                 childScope.Destroy(markOnly);
@@ -1199,8 +1208,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var _directive_process__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../directive/process */ "./node_modules/@benbraide/inlinejs/lib/esm/directive/process.js");
 /* harmony import */ var _directive_transition__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../directive/transition */ "./node_modules/@benbraide/inlinejs/lib/esm/directive/transition.js");
-/* harmony import */ var _journal_try__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../journal/try */ "./node_modules/@benbraide/inlinejs/lib/esm/journal/try.js");
-/* harmony import */ var _find__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./find */ "./node_modules/@benbraide/inlinejs/lib/esm/component/find.js");
+/* harmony import */ var _global_get__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../global/get */ "./node_modules/@benbraide/inlinejs/lib/esm/global/get.js");
+/* harmony import */ var _journal_try__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../journal/try */ "./node_modules/@benbraide/inlinejs/lib/esm/journal/try.js");
+/* harmony import */ var _element_scope_id__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./element-scope-id */ "./node_modules/@benbraide/inlinejs/lib/esm/component/element-scope-id.js");
+/* harmony import */ var _find__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./find */ "./node_modules/@benbraide/inlinejs/lib/esm/component/find.js");
+
+
 
 
 
@@ -1215,8 +1228,8 @@ function InsertHtml({ element, html, type = 'replace', component, processDirecti
         else if (type === 'prepend') { //Insert before child nodes
             element.prepend(...Array.from(tmpl.content.childNodes));
         }
-        (afterInsert && (0,_journal_try__WEBPACK_IMPORTED_MODULE_2__.JournalTry)(afterInsert, 'InlineJS.InsertHtml', element));
-        let resolvedComponent = (0,_find__WEBPACK_IMPORTED_MODULE_3__.FindComponentById)(componentId);
+        (afterInsert && (0,_journal_try__WEBPACK_IMPORTED_MODULE_3__.JournalTry)(afterInsert, 'InlineJS.InsertHtml', element));
+        let resolvedComponent = (0,_find__WEBPACK_IMPORTED_MODULE_5__.FindComponentById)(componentId);
         if (processDirectives && resolvedComponent) {
             Array.from(element.children).forEach(child => (0,_directive_process__WEBPACK_IMPORTED_MODULE_0__.ProcessDirectives)({
                 component: resolvedComponent,
@@ -1239,10 +1252,11 @@ function InsertHtml({ element, html, type = 'replace', component, processDirecti
     };
     if (type === 'replace') { //Remove all child nodes
         let destroyOffspring = (el) => {
-            let resolvedComponent = (0,_find__WEBPACK_IMPORTED_MODULE_3__.FindComponentById)(componentId);
+            let resolvedComponent = (0,_find__WEBPACK_IMPORTED_MODULE_5__.FindComponentById)(componentId), global = (0,_global_get__WEBPACK_IMPORTED_MODULE_2__.GetGlobal)();
             Array.from(el.children).forEach((child) => {
+                var _a;
                 let elementScope = resolvedComponent === null || resolvedComponent === void 0 ? void 0 : resolvedComponent.FindElementScope(child);
-                if (elementScope) {
+                if (elementScope || (_element_scope_id__WEBPACK_IMPORTED_MODULE_4__.ElementScopeKey in child && (elementScope = (_a = global.InferComponentFrom(child)) === null || _a === void 0 ? void 0 : _a.FindElementScope(child)))) {
                     elementScope.Destroy();
                 }
                 else {
@@ -1329,12 +1343,15 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "Scope": () => (/* binding */ Scope)
 /* harmony export */ });
+/* harmony import */ var _proxy_root__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../proxy/root */ "./node_modules/@benbraide/inlinejs/lib/esm/proxy/root.js");
+
 class Scope {
     constructor(componentId_, id_, root_) {
         this.componentId_ = componentId_;
         this.id_ = id_;
         this.root_ = root_;
         this.name_ = '';
+        this.proxy_ = new _proxy_root__WEBPACK_IMPORTED_MODULE_0__.RootProxy(this.componentId_, {}, this.id_);
     }
     GetComponentId() {
         return this.componentId_;
@@ -1351,6 +1368,9 @@ class Scope {
     GetRoot() {
         return this.root_;
     }
+    GetProxy() {
+        return this.proxy_;
+    }
     FindElement(deepestElement, predicate) {
         if (deepestElement === this.root_ || !this.root_.contains(deepestElement)) {
             return null;
@@ -1986,7 +2006,9 @@ __webpack_require__.r(__webpack_exports__);
 
 
 function CheckElement(element, { checkTemplate = true, checkDocument = true }) {
-    return ((element === null || element === void 0 ? void 0 : element.nodeType) === 1 && (!checkDocument || document.contains(element)) && (!checkTemplate || element instanceof HTMLTemplateElement || !element.closest('template')));
+    return ((element === null || element === void 0 ? void 0 : element.nodeType) === 1 &&
+        (!checkDocument || document.contains(element)) &&
+        (!checkTemplate || element instanceof HTMLTemplateElement || !element.closest('template')));
 }
 function ProcessDirectives({ component, element, options = {} }) {
     var _a;
@@ -2019,12 +2041,12 @@ function ProcessDirectives({ component, element, options = {} }) {
     });
     if (!options.ignoreChildren && !(element instanceof HTMLTemplateElement)) { //Process children
         resolvedComponent === null || resolvedComponent === void 0 ? void 0 : resolvedComponent.PushSelectionScope();
-        Array.from(element.children).forEach(child => ProcessDirectives({ component, options,
+        Array.from(element.children).filter(child => !child.contains(element)).forEach(child => ProcessDirectives({ component, options,
             element: child,
         }));
         resolvedComponent === null || resolvedComponent === void 0 ? void 0 : resolvedComponent.PopSelectionScope();
     }
-    (_a = resolvedComponent === null || resolvedComponent === void 0 ? void 0 : resolvedComponent.CreateElementScope(element)) === null || _a === void 0 ? void 0 : _a.ExecutePostProcessCallbacks();
+    (_a = resolvedComponent === null || resolvedComponent === void 0 ? void 0 : resolvedComponent.FindElementScope(element)) === null || _a === void 0 ? void 0 : _a.ExecutePostProcessCallbacks();
 }
 
 
@@ -2198,7 +2220,7 @@ __webpack_require__.r(__webpack_exports__);
 const InlineJSContextKey = '__InlineJS_Context__';
 let InlineJSValueFunctions = {};
 let InlineJSVoidFunctions = {};
-function GenerateValueReturningFunction(expression, contextElement, componentId) {
+function GenerateValueReturningFunction(expression, componentId) {
     if (InlineJSValueFunctions.hasOwnProperty(expression)) {
         return InlineJSValueFunctions[expression];
     }
@@ -2210,7 +2232,7 @@ function GenerateValueReturningFunction(expression, contextElement, componentId)
             with (${InlineJSContextKey}){
                 return (${expression});
             };
-        `)).bind(contextElement);
+        `));
         return (InlineJSValueFunctions[expression] = newFunction);
     }
     catch (err) {
@@ -2220,7 +2242,7 @@ function GenerateValueReturningFunction(expression, contextElement, componentId)
     }
     return null;
 }
-function GenerateVoidFunction(expression, contextElement, componentId) {
+function GenerateVoidFunction(expression, componentId) {
     if (InlineJSVoidFunctions.hasOwnProperty(expression)) {
         return InlineJSVoidFunctions[expression];
     }
@@ -2229,7 +2251,7 @@ function GenerateVoidFunction(expression, contextElement, componentId) {
             with (${InlineJSContextKey}){
                 ${expression};
             };
-        `)).bind(contextElement);
+        `));
         return (InlineJSVoidFunctions[expression] = newFunction);
     }
     catch (err) {
@@ -2254,7 +2276,7 @@ function GenerateFunctionFromString({ componentId, contextElement, expression, d
             return null;
         };
     }
-    let runFunction = (handler, target, params, contexts, forwardSyntaxErrors = true) => {
+    let runFunction = (handler, target, params, contexts, forwardSyntaxErrors = true, waitMessage) => {
         var _a;
         let component = (0,_component_find__WEBPACK_IMPORTED_MODULE_1__.FindComponentById)(componentId), proxy = component === null || component === void 0 ? void 0 : component.GetRootProxy().GetNative();
         if (!proxy || ((_a = component === null || component === void 0 ? void 0 : component.FindElementScope(contextElement)) === null || _a === void 0 ? void 0 : _a.IsDestroyed())) {
@@ -2274,8 +2296,9 @@ function GenerateFunctionFromString({ componentId, contextElement, expression, d
                 return (disableFunctionCall ? result : CallIfFunction(result, handler, componentId, params));
             }
             let handleResult = (value) => {
-                if (waitPromise !== 'none') {
+                if (value && waitPromise !== 'none') {
                     (0,_wait_promise__WEBPACK_IMPORTED_MODULE_5__.WaitPromise)(value, handler, waitPromise === 'recursive');
+                    return (waitMessage || 'Loading data...');
                 }
                 else { //Immediate
                     handler(value);
@@ -2302,18 +2325,18 @@ function GenerateFunctionFromString({ componentId, contextElement, expression, d
             context === null || context === void 0 ? void 0 : context.Pop(_utilities_context_keys__WEBPACK_IMPORTED_MODULE_4__.ContextKeys.self);
         }
     };
-    let valueReturnFunction = GenerateValueReturningFunction(expression, contextElement, componentId), voidFunction = null;
+    let valueReturnFunction = GenerateValueReturningFunction(expression, componentId), voidFunction = null;
     if (!valueReturnFunction) {
-        voidFunction = GenerateVoidFunction(expression, contextElement, componentId);
+        voidFunction = GenerateVoidFunction(expression, componentId);
     }
-    return (handler, params = [], contexts) => {
+    return (handler, params = [], contexts, waitMessage) => {
         if (!voidFunction && valueReturnFunction) {
             try {
-                return runFunction(handler, valueReturnFunction, (params || []), (contexts || {}));
+                return runFunction(handler, valueReturnFunction.bind(contextElement), (params || []), (contexts || {}), undefined, waitMessage);
             }
             catch (err) {
                 if (err instanceof SyntaxError) {
-                    voidFunction = GenerateVoidFunction(expression, contextElement, componentId);
+                    voidFunction = GenerateVoidFunction(expression, componentId);
                 }
                 else {
                     throw err;
@@ -2321,7 +2344,7 @@ function GenerateFunctionFromString({ componentId, contextElement, expression, d
             }
         }
         if (voidFunction) {
-            return (runFunction(handler, voidFunction, (params || []), (contexts || {}), false) || null);
+            return (runFunction(handler, voidFunction.bind(contextElement), (params || []), (contexts || {}), false) || null);
         }
         handler && handler(null);
         return null;
@@ -2745,6 +2768,7 @@ const InlineJSGlobalKey = '__InlineJS_GLOBAL_KEY__';
 function CreateGlobal(configOptions, idOffset = 0) {
     (0,_component_find__WEBPACK_IMPORTED_MODULE_0__.InitComponentCache)();
     globalThis[InlineJSGlobalKey] = new _base__WEBPACK_IMPORTED_MODULE_1__.BaseGlobal(configOptions, idOffset);
+    (globalThis['InlineJS'] = (globalThis['InlineJS'] || {}))['global'] = globalThis[InlineJSGlobalKey];
     window.dispatchEvent(new CustomEvent(_get__WEBPACK_IMPORTED_MODULE_2__.GlobalCreatedEvent));
     return globalThis[InlineJSGlobalKey];
 }
@@ -3679,21 +3703,32 @@ class MutationObserver {
                         });
                     };
                     entries.forEach((entry) => {
-                        var _a;
-                        let key = ((entry.target instanceof HTMLElement) ? (0,_component_element_scope_id__WEBPACK_IMPORTED_MODULE_0__.GetElementScopeId)(((_a = (0,_component_infer__WEBPACK_IMPORTED_MODULE_1__.InferComponent)(entry.target)) === null || _a === void 0 ? void 0 : _a.GetRoot()) || null) : '');
-                        if (!key) { //Invalid target
-                            return;
-                        }
+                        var _a, _b;
                         if ((entry === null || entry === void 0 ? void 0 : entry.type) === 'childList') {
-                            let info = getInfo(key);
-                            info.added.push(...Array.from(entry.addedNodes));
-                            info.removed.push(...Array.from(entry.removedNodes));
+                            let pushRemovedNode = (node) => {
+                                var _a;
+                                let key = (0,_component_element_scope_id__WEBPACK_IMPORTED_MODULE_0__.GetElementScopeId)(((_a = (0,_component_infer__WEBPACK_IMPORTED_MODULE_1__.InferComponent)(node)) === null || _a === void 0 ? void 0 : _a.GetRoot()) || null);
+                                if (key) {
+                                    getInfo(key).removed.push(node);
+                                }
+                                else { //Try children
+                                    Array.from(node.childNodes).filter(child => !child.contains(node)).forEach(pushRemovedNode);
+                                }
+                            };
+                            entry.removedNodes.forEach(pushRemovedNode);
+                            let key = ((entry.target instanceof HTMLElement) ? (0,_component_element_scope_id__WEBPACK_IMPORTED_MODULE_0__.GetElementScopeId)(((_a = (0,_component_infer__WEBPACK_IMPORTED_MODULE_1__.InferComponent)(entry.target)) === null || _a === void 0 ? void 0 : _a.GetRoot()) || null) : '');
+                            if (key) {
+                                getInfo(key).added.push(...Array.from(entry.addedNodes));
+                            }
                         }
                         else if ((entry === null || entry === void 0 ? void 0 : entry.type) === 'attributes' && entry.attributeName) {
-                            getInfo(key).attributes.push({
-                                name: entry.attributeName,
-                                target: entry.target,
-                            });
+                            let key = ((entry.target instanceof HTMLElement) ? (0,_component_element_scope_id__WEBPACK_IMPORTED_MODULE_0__.GetElementScopeId)(((_b = (0,_component_infer__WEBPACK_IMPORTED_MODULE_1__.InferComponent)(entry.target)) === null || _b === void 0 ? void 0 : _b.GetRoot()) || null) : '');
+                            if (key) {
+                                getInfo(key).attributes.push({
+                                    name: entry.attributeName,
+                                    target: entry.target,
+                                });
+                            }
                         }
                     });
                     if (Object.keys(mutations).length == 0) {
@@ -3890,13 +3925,13 @@ function CreateInplaceProxy({ target, getter, setter, deleter, lookup, alert })
             if (typeof prop === 'symbol' || (typeof prop === 'string' && prop === 'prototype')) {
                 return Reflect.set(target, prop, value);
             }
-            return (setter ? setter(prop.toString(), value, target) : (!!target[prop] || true));
+            return (setter ? (setter(prop.toString(), value, target) !== false) : (!!target[prop] || true));
         },
         deleteProperty(target, prop) {
             if (typeof prop === 'symbol' || (typeof prop === 'string' && prop === 'prototype')) {
                 return Reflect.deleteProperty(target, prop);
             }
-            return (deleter ? deleter(prop.toString(), target) : (!!(delete target[prop]) || true));
+            return (deleter ? (deleter(prop.toString(), target) !== false) : (!!(delete target[prop]) || true));
         },
         has(target, prop) {
             if (Reflect.has(target, prop)) {
@@ -3981,7 +4016,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 class GenericProxy {
-    constructor(componentId_, target_, name_, parent) {
+    constructor(componentId_, target_, name_, parent, isFalseRoot = false) {
         this.componentId_ = componentId_;
         this.target_ = target_;
         this.name_ = name_;
@@ -4007,7 +4042,7 @@ class GenericProxy {
             }
             return result;
         };
-        let isRoot = !this.parentPath_, handler = {
+        let isRoot = (!isFalseRoot && !this.parentPath_), handler = {
             get(target, prop) {
                 if (typeof prop === 'symbol' || prop === 'prototype') {
                     return Reflect.get(target, prop);
@@ -4167,8 +4202,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _generic__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./generic */ "./node_modules/@benbraide/inlinejs/lib/esm/proxy/generic.js");
 
 class RootProxy extends _generic__WEBPACK_IMPORTED_MODULE_0__.GenericProxy {
-    constructor(componentId, target) {
-        super(componentId, target, `Proxy<${componentId}>`);
+    constructor(componentId, target, id) {
+        super(componentId, target, `Proxy<${id || componentId}>`, undefined, !!id);
     }
 }
 
@@ -4370,6 +4405,9 @@ class Stack {
     IsEmpty() {
         return (this.list_.length == 0);
     }
+    GetHistory() {
+        return this.list_.map(item => item);
+    }
 }
 
 
@@ -5265,6 +5303,7 @@ let StripeUrl = 'https://js.stripe.com/v3/';
 let StripeStyles = null;
 let StripeClasses = null;
 exports.StripeDirectiveHandler = (0, inlinejs_1.CreateDirectiveHandlerCallback)(StripeDirectiveName, ({ componentId, component, contextElement, expression, argKey, argOptions }) => {
+    var _a;
     if ((0, inlinejs_1.BindEvent)({ contextElement, expression,
         component: (component || componentId),
         key: StripeDirectiveName,
@@ -5291,159 +5330,150 @@ exports.StripeDirectiveHandler = (0, inlinejs_1.CreateDirectiveHandlerCallback)(
             elementScope.SetLocal(localKey, (0, inlinejs_1.CreateInplaceProxy)((0, inlinejs_1.BuildGetterProxyOptions)({
                 getter: (prop) => {
                     var _a;
+                    let local = (contextElement.parentElement ? (_a = (0, inlinejs_1.FindComponentById)(componentId)) === null || _a === void 0 ? void 0 : _a.FindElementLocalValue(contextElement.parentElement, localKey, true) : null);
                     if (prop === 'parent') {
-                        return (contextElement.parentElement ? (_a = (0, inlinejs_1.FindComponentById)(componentId)) === null || _a === void 0 ? void 0 : _a.FindElementLocalValue(contextElement.parentElement, localKey, true) : null);
+                        return local;
                     }
+                    return ((prop && local) ? local[prop] : null);
                 },
                 lookup: ['parent'],
             })));
         }
         return;
     }
-    if (argKey in StripeKeys) { //Bind Stripe field
-        let details = resolvedComponent.FindElementLocalValue(contextElement, detailsKey, true);
-        if (!details) { //No parent
-            return;
-        }
-        let id = resolvedComponent.GenerateUniqueId(`${StripeDirectiveName}_proxy_`), field = {
-            name: argKey,
-            mount: contextElement,
-            element: details.elements.create(StripeKeys[argKey], {
-                style: (StripeStyles || undefined),
-                classes: (StripeClasses || undefined),
-            }),
-            ready: false,
-            complete: false,
-            error: undefined,
-        };
-        if (!field.element) {
-            return;
-        }
-        field.element.mount(contextElement);
-        details.fields.push(field);
-        elementScope.SetLocal(localKey, (0, inlinejs_1.CreateInplaceProxy)((0, inlinejs_1.BuildGetterProxyOptions)({
-            getter: (prop) => {
-                var _a, _b, _c, _d;
-                if (prop === 'complete') {
-                    (_a = (0, inlinejs_1.FindComponentById)(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes.AddGetAccess(`${id}.${prop}`);
-                    return field.complete;
-                }
-                if (prop === 'focused') {
-                    (_b = (0, inlinejs_1.FindComponentById)(componentId)) === null || _b === void 0 ? void 0 : _b.GetBackend().changes.AddGetAccess(`${id}.${prop}`);
-                    return field.focused;
-                }
-                if (prop === 'error') {
-                    (_c = (0, inlinejs_1.FindComponentById)(componentId)) === null || _c === void 0 ? void 0 : _c.GetBackend().changes.AddGetAccess(`${id}.${prop}`);
-                    return field.error;
-                }
-                if (prop === 'parent') {
-                    return (contextElement.parentElement ? (_d = (0, inlinejs_1.FindComponentById)(componentId)) === null || _d === void 0 ? void 0 : _d.FindElementLocalValue(contextElement.parentElement, localKey, true) : null);
-                }
-                if (prop === 'clear') {
-                    return () => {
-                        if (field.element) {
-                            field.element.clear();
-                        }
-                    };
-                }
-                if (prop === 'focus') {
-                    return () => {
-                        if (field.element) {
-                            field.element.focus();
-                        }
-                    };
-                }
-                if (prop === 'blur') {
-                    return () => {
-                        if (field.element) {
-                            field.element.blur();
-                        }
-                    };
-                }
-            },
-            lookup: ['complete', 'focused', 'error', 'parent', 'clear', 'focus', 'blur'],
-        })));
-        let fields = details.fields;
-        elementScope.AddUninitCallback(() => {
-            var _a;
-            (_a = field.element) === null || _a === void 0 ? void 0 : _a.destroy();
-            fields.splice(fields.indexOf(field), 1);
-        });
-        field.element.on('ready', () => {
-            if (!field.ready) {
-                field.ready = true;
-                field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.ready`));
-                details.onReady();
-            }
-        });
-        field.element.on('change', (e) => {
-            var _a, _b;
-            if ((e === null || e === void 0 ? void 0 : e.complete) === field.complete) {
+    if (StripeKeys.hasOwnProperty(argKey)) { //Bind Stripe field
+        return (_a = resolvedComponent.FindElementLocalValue(contextElement, detailsKey, true)) === null || _a === void 0 ? void 0 : _a.addField(argKey, contextElement, (field, details) => {
+            let resolvedComponent = (0, inlinejs_1.FindComponentById)(componentId), elementScope = resolvedComponent === null || resolvedComponent === void 0 ? void 0 : resolvedComponent.FindElementScope(contextElement);
+            let id = resolvedComponent === null || resolvedComponent === void 0 ? void 0 : resolvedComponent.GenerateUniqueId(`${StripeDirectiveName}_proxy_`);
+            if (!field.element) {
                 return;
             }
-            field.complete = e === null || e === void 0 ? void 0 : e.complete;
-            field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.complete`, {
-                detail: {
-                    completed: e === null || e === void 0 ? void 0 : e.complete,
-                },
-            }));
-            if (field.complete) {
-                if (field.error) {
-                    field.error = undefined;
-                    (0, inlinejs_1.AddChanges)('set', `${id}.error`, 'error', (_a = (0, inlinejs_1.FindComponentById)(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes);
-                }
-                if (details.options.autofocus) { //Focus next if any
-                    let index = details.fields.indexOf(field);
-                    if (index != -1 && index < (details.fields.length - 1)) {
-                        let nextField = details.fields[index + 1];
-                        if (nextField.element) {
-                            nextField.element.focus();
-                        }
-                        else if ('focus' in nextField.mount && typeof nextField.mount.focus === 'function') {
-                            nextField.mount.focus();
-                        }
+            elementScope === null || elementScope === void 0 ? void 0 : elementScope.SetLocal(localKey, (0, inlinejs_1.CreateInplaceProxy)((0, inlinejs_1.BuildGetterProxyOptions)({
+                getter: (prop) => {
+                    var _a, _b, _c, _d, _e;
+                    if (prop === 'complete') {
+                        (_a = (0, inlinejs_1.FindComponentById)(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes.AddGetAccess(`${id}.${prop}`);
+                        return field.complete;
                     }
-                    else if (details.specialMounts.submit) {
-                        details.specialMounts.submit.focus();
+                    if (prop === 'focused') {
+                        (_b = (0, inlinejs_1.FindComponentById)(componentId)) === null || _b === void 0 ? void 0 : _b.GetBackend().changes.AddGetAccess(`${id}.${prop}`);
+                        return field.focused;
+                    }
+                    if (prop === 'error') {
+                        (_c = (0, inlinejs_1.FindComponentById)(componentId)) === null || _c === void 0 ? void 0 : _c.GetBackend().changes.AddGetAccess(`${id}.${prop}`);
+                        return field.error;
+                    }
+                    if (prop === 'parent') {
+                        return (contextElement.parentElement ? (_d = (0, inlinejs_1.FindComponentById)(componentId)) === null || _d === void 0 ? void 0 : _d.FindElementLocalValue(contextElement.parentElement, localKey, true) : null);
                     }
+                    if (prop === 'clear') {
+                        return () => {
+                            if (field.element) {
+                                field.element.clear();
+                            }
+                        };
+                    }
+                    if (prop === 'focus') {
+                        return () => {
+                            if (field.element) {
+                                field.element.focus();
+                            }
+                        };
+                    }
+                    if (prop === 'blur') {
+                        return () => {
+                            if (field.element) {
+                                field.element.blur();
+                            }
+                        };
+                    }
+                    if (prop === 'disable') {
+                        return (state = true) => {
+                            if (field.element) {
+                                field.element.update({ disabled: state });
+                            }
+                        };
+                    }
+                    let local = (contextElement.parentElement ? (_e = (0, inlinejs_1.FindComponentById)(componentId)) === null || _e === void 0 ? void 0 : _e.FindElementLocalValue(contextElement.parentElement, localKey, true) : null);
+                    return ((prop && local) ? local[prop] : null);
+                },
+                lookup: ['complete', 'focused', 'error', 'parent', 'clear', 'focus', 'blur', 'disable'],
+            })));
+            field.element.on('ready', () => {
+                if (!field.ready) {
+                    field.ready = true;
+                    field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.ready`));
+                    details.onReady();
                 }
-            }
-            else if ((e === null || e === void 0 ? void 0 : e.error) && e.error.message !== field.error) {
-                field.error = e.error.message;
-                (0, inlinejs_1.AddChanges)('set', `${id}.error`, 'error', (_b = (0, inlinejs_1.FindComponentById)(componentId)) === null || _b === void 0 ? void 0 : _b.GetBackend().changes);
-                field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.error`, {
-                    detail: {
-                        message: e.error.message,
-                    },
-                }));
-            }
-            details.onChange();
-        });
-        field.element.on('focus', () => {
-            var _a;
-            if (!field.focused) {
-                field.focused = true;
-                (0, inlinejs_1.AddChanges)('set', `${id}.focused`, 'focused', (_a = (0, inlinejs_1.FindComponentById)(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes);
-                field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.focus`, {
-                    detail: {
-                        focused: true,
-                    },
-                }));
-            }
-        });
-        field.element.on('blur', () => {
-            var _a;
-            if (field.focused) {
-                field.focused = false;
-                (0, inlinejs_1.AddChanges)('set', `${id}.focused`, 'focused', (_a = (0, inlinejs_1.FindComponentById)(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes);
-                field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.focus`, {
+            });
+            field.element.on('change', (e) => {
+                var _a, _b;
+                if ((e === null || e === void 0 ? void 0 : e.complete) === field.complete) {
+                    return;
+                }
+                field.complete = e === null || e === void 0 ? void 0 : e.complete;
+                field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.complete`, {
                     detail: {
-                        focused: false,
+                        completed: e === null || e === void 0 ? void 0 : e.complete,
                     },
                 }));
-            }
+                if (field.complete) {
+                    if (field.error) {
+                        field.error = undefined;
+                        (0, inlinejs_1.AddChanges)('set', `${id}.error`, 'error', (_a = (0, inlinejs_1.FindComponentById)(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes);
+                    }
+                    if (details.options.autofocus) { //Focus next if any
+                        let index = details.fields.indexOf(field);
+                        if (index != -1 && index < (details.fields.length - 1)) {
+                            let nextField = details.fields[index + 1];
+                            if (nextField.element) {
+                                nextField.element.focus();
+                            }
+                            else if ('focus' in nextField.mount && typeof nextField.mount.focus === 'function') {
+                                nextField.mount.focus();
+                            }
+                        }
+                        else if (details.specialMounts.submit) {
+                            details.specialMounts.submit.focus();
+                        }
+                    }
+                }
+                else if ((e === null || e === void 0 ? void 0 : e.error) && e.error.message !== field.error) {
+                    field.error = e.error.message;
+                    (0, inlinejs_1.AddChanges)('set', `${id}.error`, 'error', (_b = (0, inlinejs_1.FindComponentById)(componentId)) === null || _b === void 0 ? void 0 : _b.GetBackend().changes);
+                    field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.error`, {
+                        detail: {
+                            message: e.error.message,
+                        },
+                    }));
+                }
+                details.onChange();
+            });
+            field.element.on('focus', () => {
+                var _a;
+                if (!field.focused) {
+                    field.focused = true;
+                    (0, inlinejs_1.AddChanges)('set', `${id}.focused`, 'focused', (_a = (0, inlinejs_1.FindComponentById)(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes);
+                    field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.focus`, {
+                        detail: {
+                            focused: true,
+                        },
+                    }));
+                }
+            });
+            field.element.on('blur', () => {
+                var _a;
+                if (field.focused) {
+                    field.focused = false;
+                    (0, inlinejs_1.AddChanges)('set', `${id}.focused`, 'focused', (_a = (0, inlinejs_1.FindComponentById)(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes);
+                    field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.focus`, {
+                        detail: {
+                            focused: false,
+                        },
+                    }));
+                }
+            });
         });
-        return;
     }
     let stripeInstance = null, elements = null, backlog = new Array(), init = () => {
         (0, inlinejs_1.EvaluateLater)({ componentId, contextElement, expression })((value) => {
@@ -5482,6 +5512,31 @@ exports.StripeDirectiveHandler = (0, inlinejs_1.CreateDirectiveHandlerCallback)(
         }
     };
     let details = { fields, specialMounts, options,
+        addField(key, target, callback) {
+            let add = () => {
+                var _a, _b;
+                let field = {
+                    name: key,
+                    mount: target,
+                    element: elements.create(StripeKeys[key], {
+                        style: (StripeStyles || undefined),
+                        classes: (StripeClasses || undefined),
+                    }),
+                    ready: false,
+                    complete: false,
+                    error: undefined,
+                };
+                field.element.mount(target);
+                this.fields.push(field);
+                (_b = (_a = (0, inlinejs_1.FindComponentById)(componentId)) === null || _a === void 0 ? void 0 : _a.FindElementScope(target)) === null || _b === void 0 ? void 0 : _b.AddUninitCallback(() => {
+                    var _a;
+                    (_a = field.element) === null || _a === void 0 ? void 0 : _a.destroy();
+                    this.fields = this.fields.filter(item => (item !== field));
+                });
+                callback(field, this);
+            };
+            elements ? add() : backlog.push(add);
+        },
         onReady: () => { var _a; return (0, inlinejs_1.AddChanges)('set', `${id}.readyCount`, 'readyCount', (_a = (0, inlinejs_1.FindComponentById)(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes); },
         onChange: () => {
             var _a;
@@ -5639,9 +5694,9 @@ exports.StripeDirectiveHandler = (0, inlinejs_1.CreateDirectiveHandlerCallback)(
                 };
             }
             if (prop === 'setup') {
-                return (clientSecret, paymentMethod, save = false) => {
+                return (clientSecret, paymentMethod) => {
                     payOrSetup(() => {
-                        let paymentDetails = getPaymentDetails(paymentMethod, save);
+                        let paymentDetails = getPaymentDetails(paymentMethod, false);
                         if (paymentDetails) {
                             stripeInstance === null || stripeInstance === void 0 ? void 0 : stripeInstance.confirmCardSetup(clientSecret, paymentDetails).then(onSuccess).catch(onError);
                         }