@osovitny/anatoly 3.17.85 → 3.17.86

package/fesm2022/osovitny-anatoly.mjs

@@ -1,8 +1,5 @@
 import * as i0 from '@angular/core';
 import { Injectable, Inject, EventEmitter, Output, Pipe, APP_INITIALIZER, Injector, NgModule, Component, Input, ChangeDetectionStrategy, ViewChild, ViewEncapsulation, Directive, HostBinding, HostListener, Optional, SkipSelf } from '@angular/core';
-import * as dropin from 'braintree-web-drop-in';
-import * as i2$1 from '@angular/forms';
-import { FormControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import js_beautify from 'js-beautify';
 import * as i1 from '@angular/router';
 import { NavigationEnd, NavigationStart, NavigationCancel, NavigationError, RouterModule } from '@angular/router';
@@ -25,7 +22,10 @@ import * as i1$4 from 'ngx-toastr';
 import { ToastrModule } from 'ngx-toastr';
 import * as i1$5 from '@angular/platform-browser';
 import { v4 } from 'uuid';
-import * as i2 from '@progress/kendo-angular-dialog';
+import * as i2 from '@angular/forms';
+import { FormControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as dropin from 'braintree-web-drop-in';
+import * as i2$1 from '@progress/kendo-angular-dialog';
 import { DialogsModule } from '@progress/kendo-angular-dialog';
 import { loadStripe } from '@stripe/stripe-js';
 import * as i1$6 from '@fortawesome/angular-fontawesome';
@@ -85,7 +85,7 @@ const ClientApps = AppCoreSettings?.clientApps;
   Created:
     1 Apr 2024
 
-  Copyright (c) 2016-2024 Osovitny Inc. All rights reserved.
+  Copyright (c) 2016-2025 Osovitny Inc. All rights reserved.
 </file>
 */
 function getAppSettingsById(id) {
@@ -127,7 +127,7 @@ const AppSettings = getAppSettingsByName(AppName);
   Created:
     1 Apr 2024
 
-  Copyright (c) 2016-2024 Osovitny Inc. All rights reserved.
+  Copyright (c) 2016-2025 Osovitny Inc. All rights reserved.
 </file>
 */
 const dateTimeFormats = {
@@ -153,7 +153,7 @@ const timeFormats = {
   Created:
     11 Nov 2024
 
-  Copyright (c) 2016-2024 Osovitny Inc. All rights reserved.
+  Copyright (c) 2016-2025 Osovitny Inc. All rights reserved.
 </file>
 */
 const GAEvents = {
@@ -592,7 +592,7 @@ class XmlFormatter {
   Created:
     11 Nov 2024
 
-  Copyright (c) 2016-2024 Osovitny Inc. All rights reserved.
+  Copyright (c) 2016-2025 Osovitny Inc. All rights reserved.
 </file>
 */
 var DiscountCodeType;
@@ -643,7 +643,7 @@ var PaymentStage;
   Created:
     11 Nov 2024
 
-  Copyright (c) 2016-2024 Osovitny Inc. All rights reserved.
+  Copyright (c) 2016-2025 Osovitny Inc. All rights reserved.
 </file>
 */
 var DataViewType;
@@ -1068,7 +1068,7 @@ class Stopwatch {
   Created:
     28 Apr 2024
 
-  Copyright (c) 2016-2024 Osovitny Inc. All rights reserved.
+  Copyright (c) 2016-2025 Osovitny Inc. All rights reserved.
 </file>
 */
 const AppContextStorageKeys = {
@@ -3729,210 +3729,6 @@ class ComponentBase {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentBase, { className: "ComponentBase", filePath: "lib\\ui\\components\\base\\components\\component.ts", lineNumber: 26 }); })();
 
-/*
-<file>
-  Project:
-    @osovitny/anatoly
-
-  Authors:
-    Vadim Osovitny vadim.osovitny@osovitny.com
-    Anatoly Osovitny anatoly.osovitny@osovitny.com
-
-  Created:
-    20 Nov 2017
-
-  Copyright (c) 2016-2025 Osovitny Inc. All rights reserved.
-</file>
-*/
-//Node
-class EditComponentBase extends ComponentBase {
-    constructor() {
-        super();
-        //Modes
-        this.isAddMode = false;
-        this.isEditMode = false;
-        this.formSubmitted = false;
-        this.controlName = null;
-        this.isEditMode = QSUtils.idExists();
-        this.isAddMode = !this.isEditMode;
-    }
-    isControlValid(name, frmGroup = null) {
-        return !this.isControlInvalid(name, frmGroup);
-    }
-    isControlInvalid(name, frmGroup = null) {
-        if (typeof name === "undefined" || name == "") {
-            return false;
-        }
-        let fg = frmGroup ? frmGroup : this.formGroup;
-        if (!fg) {
-            return false;
-        }
-        let control = fg.get(name);
-        if (control) {
-            return ((this.formSubmitted && control.invalid) || (control.touched && control.invalid));
-        }
-        return false;
-    }
-    //FormGroup functions
-    getFormValue(name, frmGroup = null) {
-        let fg = frmGroup ? frmGroup : this.formGroup;
-        return fg.controls[name].value;
-    }
-    setFormValue(name, value, frmGroup = null) {
-        let fg = frmGroup ? frmGroup : this.formGroup;
-        fg.controls[name].setValue(value);
-    }
-    getFormGroupValue(groupName, name, frmGroup = null) {
-        let fg = frmGroup ? frmGroup : this.formGroup;
-        return fg.controls[groupName].get(name).value;
-    }
-    setFormGroupValue(groupName, name, value, frmGroup = null) {
-        let fg = frmGroup ? frmGroup : this.formGroup;
-        fg.controls[groupName].get(name).setValue(value);
-    }
-    /**
-     * Add control to form group
-     * @param name
-     * @param formControl
-     * @param frmGroup
-     */
-    addControl(name, formControl, frmGroup = null) {
-        let fg = frmGroup ? frmGroup : this.formGroup;
-        fg.addControl(name, formControl);
-    }
-    /**
-     * Removes control from form group
-     * @param name
-     * @param frmGroup
-     */
-    removeControl(name, frmGroup = null) {
-        let fg = frmGroup ? frmGroup : this.formGroup;
-        if (fg.get(name)) {
-            fg.removeControl(name);
-        }
-    }
-    /**
-     * return new form control
-     * @param formState
-     * @param validatorOrOpts
-     * @param asyncValidator
-     */
-    createFormControl(formState, validatorOrOpts, asyncValidator) {
-        return new FormControl(formState, validatorOrOpts, asyncValidator);
-    }
-    /**
-     * Set error to control
-     * @param controlName formControl name
-     * @param err error expect {erroname: boolean} format
-     * @param frmGroup
-     */
-    setControlError(controlName, err, frmGroup = null) {
-        let fg = frmGroup ? frmGroup : this.formGroup;
-        fg.get(controlName)?.setErrors(err);
-    }
-    /**
-     * Set {invalid: true} for the specified form
-     * @param controlName form control name
-     * @param frmGroup
-     */
-    setInValidError(controlName, frmGroup = null) {
-        let fg = frmGroup ? frmGroup : this.formGroup;
-        fg.get(controlName)?.setErrors({ invalid: true });
-    }
-    /**
-     * returns formgroup controls.
-     * main use case is used in html pages
-     */
-    get fc() {
-        return this.formGroup.controls;
-    }
-    get isNgModelBased() {
-        return this.controlName == null;
-    }
-    static { this.ɵfac = function EditComponentBase_Factory(t) { return new (t || EditComponentBase)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EditComponentBase, selectors: [["ng-component"]], inputs: { formGroup: "formGroup", formSubmitted: "formSubmitted", controlName: "controlName" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 0, vars: 0, template: function EditComponentBase_Template(rf, ctx) { }, encapsulation: 2 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EditComponentBase, [{
-        type: Component,
-        args: [{
-                template: ''
-            }]
-    }], () => [], { formGroup: [{
-            type: Input
-        }], formSubmitted: [{
-            type: Input
-        }], controlName: [{
-            type: Input
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EditComponentBase, { className: "EditComponentBase", filePath: "lib\\ui\\components\\base\\components\\edit.component.ts", lineNumber: 28 }); })();
-
-/*
-<file>
-  Project:
-    @osovitny/anatoly
-
-  Authors:
-    Vadim Osovitny vadim.osovitny@osovitny.com
-    Anatoly Osovitny anatoly.osovitny@osovitny.com
-
-  Created:
-    24 Jan 2022
-
-  Copyright (c) 2016-2025 Osovitny Inc. All rights reserved.
-</file>
-*/
-//Node
-class DialogBase extends EditComponentBase {
-    get isOpen() {
-        return this._isOpen;
-    }
-    set isOpen(value) {
-        if (value) {
-            if (this.osOnBeforeOpen) {
-                this.osOnBeforeOpen();
-            }
-            this.opened.emit();
-        }
-        this._isOpen = value;
-    }
-    constructor() {
-        super();
-        //Private
-        this._isOpen = false;
-        //Public
-        this.themeColor = "primary";
-        //Events
-        this.opened = new EventEmitter();
-        this.closed = new EventEmitter();
-    }
-    open() {
-        this.isOpen = true;
-    }
-    close(returnValue = "OK") {
-        this.isOpen = false;
-        this.closed.emit(returnValue);
-    }
-    cancel() {
-        this.isOpen = false;
-        this.closed.emit(-1);
-    }
-    static { this.ɵfac = function DialogBase_Factory(t) { return new (t || DialogBase)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DialogBase, selectors: [["ng-component"]], inputs: { isOpen: "isOpen" }, outputs: { opened: "opened", closed: "closed" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 0, vars: 0, template: function DialogBase_Template(rf, ctx) { }, encapsulation: 2 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DialogBase, [{
-        type: Component,
-        args: [{
-                template: ''
-            }]
-    }], () => [], { isOpen: [{
-            type: Input
-        }], opened: [{
-            type: Output
-        }], closed: [{
-            type: Output
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DialogBase, { className: "DialogBase", filePath: "lib\\ui\\components\\base\\dialog.ts", lineNumber: 27 }); })();
-
 /*
 <file>
   Project:
@@ -3987,12 +3783,675 @@ class PaymentsApiService extends ApiServiceBase {
             }
         });
     }
-    static { this.ɵfac = function PaymentsApiService_Factory(t) { return new (t || PaymentsApiService)(i0.ɵɵinject(i1$1.HttpClient)); }; }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PaymentsApiService, factory: PaymentsApiService.ɵfac }); }
+    static { this.ɵfac = function PaymentsApiService_Factory(t) { return new (t || PaymentsApiService)(i0.ɵɵinject(i1$1.HttpClient)); }; }
+    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PaymentsApiService, factory: PaymentsApiService.ɵfac }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaymentsApiService, [{
+        type: Injectable
+    }], () => [{ type: i1$1.HttpClient }], null); })();
+
+/*
+<file>
+  Project:
+    @osovitny/anatoly
+
+  Authors:
+    Vadim Osovitny vadim.osovitny@osovitny.com
+    Dhruv Agarwal dhruv.agarwal@osovitny.com
+
+  Created:
+    11 Aug 2024
+
+  Details:
+    https://blog.thoughtram.io/angular/2017/02/21/using-zones-in-angular-for-better-performance.html
+
+  Copyright (c) 2016-2025 Osovitny Inc. All rights reserved.
+</file>
+*/
+//Node
+class PaymentsService {
+    constructor(zone, api, ns, ga) {
+        this.zone = zone;
+        this.api = api;
+        this.ns = ns;
+        this.ga = ga;
+        this.paymentInProgress = false;
+        this.isPaymentFailed = false;
+        this.subtotal = 0;
+        this.discountCode = null;
+        this.discountPercentage = null;
+        this.discountAmount = null;
+        this.total = 0;
+        this.currency = 'USD';
+        //Private Streams
+        this._discountCodeApplied = new Subject();
+        this._paymentAdded = new Subject();
+        this._showStripeDialog = new Subject();
+        this._showBraintreeDialog = new Subject();
+        //Public Streams
+        this.discountCodeApplied$ = this._discountCodeApplied.asObservable();
+        this.paymentAdded$ = this._paymentAdded.asObservable();
+        this.showStripeDialog$ = this._showStripeDialog.asObservable();
+        this.showBraintreeDialog$ = this._showBraintreeDialog.asObservable();
+    }
+    setDefaults() {
+    }
+    setValues() {
+    }
+    //fires
+    fireDiscountCodeApplied() {
+        this._discountCodeApplied.next(this.discountCode);
+    }
+    firePaymentAdded(paymentId) {
+        this._paymentAdded.next(paymentId);
+    }
+    //Public
+    init() {
+        this.setDefaults();
+        this.setValues();
+    }
+    resetState() {
+        this.subtotal = 0;
+        this.total = 0;
+    }
+    getTotal() {
+        let subtotal = this.subtotal;
+        if (this.discountAmount != 0) {
+            subtotal = subtotal - this.discountAmount;
+        }
+        else if (this.discountPercentage != 0) {
+            subtotal = subtotal - (subtotal * (this.discountPercentage / 100));
+            subtotal = +subtotal.toFixed(2);
+        }
+        return subtotal > 0 ? subtotal : 0;
+    }
+    //DiscountCode
+    applyDiscountCode(discountCode, data) {
+        if (!data) {
+            return;
+        }
+        this.discountCode = discountCode;
+        if (data.amount) {
+            this.discountPercentage = 0;
+            this.discountAmount = parseInt(data.amount);
+        }
+        else if (data.percentage) {
+            this.discountPercentage = parseInt(data.percentage);
+            this.discountAmount = 0;
+        }
+        this.fireDiscountCodeApplied();
+    }
+    getDiscountCodeAsString() {
+        if (this.discountAmount > 0) {
+            return "$" + this.discountAmount;
+        }
+        else if (this.discountPercentage > 0) {
+            return this.discountPercentage + "%";
+        }
+        return '$0';
+    }
+    openStripePaymentDialog() {
+        this._showStripeDialog.next(true);
+    }
+    openBraintreePaymentDialog() {
+        this._showBraintreeDialog.next(true);
+    }
+    closeBraintreePaymentDialog() {
+        this._showBraintreeDialog.next(false);
+    }
+    createStripeSession(title, description, image) {
+        const amount = this.getTotal();
+        const currency = this.currency;
+        return this.api.createStripeSession(amount, currency, title, description, image);
+    }
+    createBraintreeToken() {
+        return this.api.createBraintreeToken();
+    }
+    pay(paidFor, payId, payStatus, payDetails) {
+        //GA
+        this.ga.event(GABillingEvents.payment);
+        let paidForAsString = JSON.stringify(paidFor);
+        let payType = this.selectedPaymentType;
+        let payMethod = this.selectedPaymentMethod;
+        //Amount
+        let subtotal = this.subtotal;
+        let promoCode = this.discountCode;
+        let total = this.getTotal();
+        let currency = this.currency;
+        if (total == 0) {
+            payMethod = PaymentMethod.None;
+        }
+        this.zone.run(() => {
+            this.api.pay(paidForAsString, payMethod, 
+            //Amount
+            subtotal, promoCode, total, currency, 
+            //Payment method details (PayPal/Stripe/Braintree)
+            payId, payStatus, payDetails, (data) => {
+                if (!data || !data?.isPaymentValid) {
+                    this.paymentFailed(PaymentStage.External);
+                    return;
+                }
+                if (payMethod == PaymentMethod.CreditCard) {
+                    //this.closeBraintreePaymentDialog();
+                }
+                this.paymentInProgress = false;
+                this.firePaymentAdded(data.paymentId);
+            }, () => {
+                this.paymentFailed(PaymentStage.External);
+            });
+        });
+    }
+    paymentFailed(stage) {
+        this.paymentStage = stage;
+        this.paymentInProgress = false;
+        this.isPaymentFailed = true;
+        this.ns.error("Payment Failed");
+    }
+    static { this.ɵfac = function PaymentsService_Factory(t) { return new (t || PaymentsService)(i0.ɵɵinject(i0.NgZone), i0.ɵɵinject(PaymentsApiService), i0.ɵɵinject(NotificationService), i0.ɵɵinject(GoogleAnalyticsService)); }; }
+    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PaymentsService, factory: PaymentsService.ɵfac }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaymentsService, [{
+        type: Injectable
+    }], () => [{ type: i0.NgZone }, { type: PaymentsApiService }, { type: NotificationService }, { type: GoogleAnalyticsService }], null); })();
+
+/*
+<file>
+  Project:
+    @osovitny/anatoly
+
+  Authors:
+    Vadim Osovitny vadim.osovitny@osovitny.com
+
+  Created:
+    4 Jun 2024
+
+  Copyright (c) 2017-2025 Osovitny Inc. All rights reserved.
+</file>
+*/
+//Node
+class DiscountCodesApiService extends ApiServiceBase {
+    constructor(http) {
+        super(http);
+        this.http = http;
+        this.baseUrl = `${ApiUrl}/billing/discountCodes`;
+    }
+    getDiscountCode(code) {
+        return this.get('getDiscountCode', { code });
+    }
+    static { this.ɵfac = function DiscountCodesApiService_Factory(t) { return new (t || DiscountCodesApiService)(i0.ɵɵinject(i1$1.HttpClient)); }; }
+    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: DiscountCodesApiService, factory: DiscountCodesApiService.ɵfac }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DiscountCodesApiService, [{
+        type: Injectable
+    }], () => [{ type: i1$1.HttpClient }], null); })();
+
+/*
+<file>
+  Project:
+    @osovitny/anatoly
+
+  Authors:
+    Vadim Osovitny vadim.osovitny@osovitny.com
+    Anatoly Osovitny anatoly.osovitny@osovitny.com
+
+  Created:
+    29 May 2024
+
+   Copyright (c) 2016-2025 Osovitny Inc. All rights reserved.
+</file>
+*/
+//Node
+const _c0$h = a0 => ({ "show": a0 });
+function OrderSummaryComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 12)(1, "div", 13)(2, "input", 14);
+    i0.ɵɵlistener("ngModelChange", function OrderSummaryComponent_Conditional_17_Template_input_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.promoCode = $event); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 15);
+    i0.ɵɵlistener("click", function OrderSummaryComponent_Conditional_17_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onApplyPromoCode()); });
+    i0.ɵɵtext(4, "Apply");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c0$h, ctx_r0.showPromoCode));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngModel", ctx_r0.promoCode);
+} }
+const _c1$1 = ["*"];
+class OrderSummaryComponent extends ComponentBase {
+    constructor(ps, api, ns) {
+        super();
+        this.ps = ps;
+        this.api = api;
+        this.ns = ns;
+        this.showPromoCode = false;
+    }
+    ngOnInit() {
+        this.setDefaults();
+        this.setValues();
+    }
+    setDefaults() { }
+    setValues() { }
+    //Tos
+    toTotal() {
+        return this.ps.getTotal();
+    }
+    //Events
+    onTogglePromoCode() {
+        this.showPromoCode = !this.showPromoCode;
+    }
+    onApplyPromoCode() {
+        if (!this.promoCode) {
+            this.ns.info("Please enter a promo code");
+            return;
+        }
+        this.api.getDiscountCode(this.promoCode).subscribe({
+            next: (data) => {
+                if (!data) {
+                    this.ns.error("Invalid Promo Code");
+                    return;
+                }
+                switch (data.status) {
+                    case DiscountCodeStatus.Exist:
+                        this.ps.applyDiscountCode(this.promoCode, data.code);
+                        this.discount = this.ps.getDiscountCodeAsString();
+                        this.ns.success("Discount applied successfully");
+                        break;
+                    case DiscountCodeStatus.NotFound:
+                        this.ns.error("Invalid Promo Code");
+                        break;
+                    case DiscountCodeStatus.AlreadyUsed:
+                        this.ns.error("Promo Code already applied");
+                        break;
+                    default:
+                        this.ns.error("Invalid Promo Code");
+                        break;
+                }
+            },
+            error: (e) => {
+                this.ns.error();
+            },
+        });
+    }
+    static { this.ɵfac = function OrderSummaryComponent_Factory(t) { return new (t || OrderSummaryComponent)(i0.ɵɵdirectiveInject(PaymentsService), i0.ɵɵdirectiveInject(DiscountCodesApiService), i0.ɵɵdirectiveInject(NotificationService)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OrderSummaryComponent, selectors: [["anatoly-billing-order-summary"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$1, decls: 30, vars: 7, consts: [[1, "card"], [1, "card-header"], [1, "card-title"], [1, "card-body"], [1, "order-summary"], [1, "subtotal"], [1, "divider"], [1, "add-promo-code", 3, "ngClass", "click"], [1, "has-arrow"], ["class", "add-promo-code", 3, "ngClass"], [1, "discounts"], [1, "total"], [1, "add-promo-code", 3, "ngClass"], [1, "promo-code"], ["type", "text", "placeholder", "Promo code", 1, "input-text", 3, "ngModel", "ngModelChange"], [1, "btn", 3, "click"]], template: function OrderSummaryComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h2");
+            i0.ɵɵtext(4, "Order Summary");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(5, "div", 3)(6, "div", 4);
+            i0.ɵɵprojection(7);
+            i0.ɵɵelementStart(8, "div", 5)(9, "span");
+            i0.ɵɵtext(10, "Subtotal:");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(11, "strong");
+            i0.ɵɵtext(12);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelement(13, "div", 6);
+            i0.ɵɵelementStart(14, "div", 7);
+            i0.ɵɵlistener("click", function OrderSummaryComponent_Template_div_click_14_listener() { return ctx.onTogglePromoCode(); });
+            i0.ɵɵelementStart(15, "span", 8);
+            i0.ɵɵtext(16, "Add a Promo Code:");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(17, OrderSummaryComponent_Conditional_17_Template, 5, 4, "div", 9);
+            i0.ɵɵelement(18, "div", 6);
+            i0.ɵɵelementStart(19, "div", 10)(20, "span");
+            i0.ɵɵtext(21, "Discounts & Savings:");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(22, "strong");
+            i0.ɵɵtext(23);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelement(24, "div", 6);
+            i0.ɵɵelementStart(25, "div", 11)(26, "span");
+            i0.ɵɵtext(27, "Total:");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(28, "strong");
+            i0.ɵɵtext(29);
+            i0.ɵɵelementEnd()()()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(12);
+            i0.ɵɵtextInterpolate1("$", ctx.ps.subtotal, "");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c0$h, ctx.showPromoCode));
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(17, ctx.showPromoCode ? 17 : -1);
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate(ctx.discount);
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate1("$", ctx.toTotal(), "");
+        } }, dependencies: [i1$2.NgClass, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel], encapsulation: 2 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OrderSummaryComponent, [{
+        type: Component,
+        args: [{ selector: "anatoly-billing-order-summary", template: "<div class='card'>\r\n  <div class='card-header'>\r\n    <div class='card-title'>\r\n      <h2>Order Summary</h2>\r\n    </div>\r\n  </div>\r\n  <div class='card-body'>\r\n    <div class='order-summary'>\r\n      <ng-content></ng-content>\r\n\r\n      <div class='subtotal'>\r\n        <span>Subtotal:</span><strong>${{ ps.subtotal }}</strong>\r\n      </div>\r\n      <div class='divider'></div>\r\n      <div class=\"add-promo-code\" [ngClass]=\"{ 'show': showPromoCode }\" (click)=\"onTogglePromoCode()\">\r\n        <span class='has-arrow'>Add a Promo Code:</span>\r\n      </div>\r\n\r\n      @if (showPromoCode) {\r\n        <div class=\"add-promo-code\" [ngClass]=\"{ 'show': showPromoCode }\">\r\n          <div class=\"promo-code\">\r\n            <input type=\"text\" [(ngModel)]=\"promoCode\" class=\"input-text\" placeholder=\"Promo code\">\r\n            <button class=\"btn\" (click)=\"onApplyPromoCode()\">Apply</button>\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <div class='divider'></div>\r\n      <div class='discounts'>\r\n        <span>Discounts & Savings:</span>\r\n        <strong>{{ discount }}</strong>\r\n      </div>\r\n      <div class='divider'></div>\r\n      <div class='total'>\r\n        <span>Total:</span>\r\n        <strong>${{ toTotal() }}</strong>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+    }], () => [{ type: PaymentsService }, { type: DiscountCodesApiService }, { type: NotificationService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(OrderSummaryComponent, { className: "OrderSummaryComponent", filePath: "lib\\billing\\components\\order-summary\\order-summary.component.ts", lineNumber: 31 }); })();
+
+/*
+<file>
+  Project:
+    @osovitny/anatoly
+
+  Authors:
+    Vadim Osovitny vadim.osovitny@osovitny.com
+    Anatoly Osovitny anatoly.osovitny@osovitny.com
+
+  Created:
+    29 May 2024
+
+   Copyright (c) 2016-2025 Osovitny Inc. All rights reserved.
+</file>
+*/
+//Node
+function PaymentMethodsComponent_For_9_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "li", 5);
+    i0.ɵɵlistener("click", function PaymentMethodsComponent_For_9_Template_li_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r7); const item_r1 = restoredCtx.$implicit; const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.onPaymentSelect(item_r1)); });
+    i0.ɵɵelementStart(1, "div", 6);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 7);
+    i0.ɵɵelement(4, "img", 8);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const item_r1 = ctx.$implicit;
+    i0.ɵɵclassProp("selected", item_r1.selected);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("Pay with ", item_r1.title, "");
+    i0.ɵɵadvance(2);
+    i0.ɵɵpropertyInterpolate1("src", "./dist/@lib/images/payment-icons/", item_r1.icon, ".png", i0.ɵɵsanitizeUrl)("alt", "payment-icon ", item_r1.title, "");
+} }
+class PaymentMethodsComponent extends ComponentBase {
+    constructor(ps) {
+        super();
+        this.ps = ps;
+        this.paymentMethods = [
+            { id: PaymentMethod.CreditCard, title: "", icon: "cards", selected: true },
+            { id: PaymentMethod.PayPal, title: "", icon: "paypal", selected: false },
+            { id: PaymentMethod.Stripe, title: "", icon: "stripe", selected: false },
+            { id: PaymentMethod.Venmo, title: "", icon: "venmo", selected: false },
+            {
+                id: PaymentMethod.ApplePay,
+                title: "",
+                icon: "applepay",
+                selected: false,
+            },
+            {
+                id: PaymentMethod.GooglePay,
+                title: "",
+                icon: "googlepay",
+                selected: false,
+            },
+            {
+                id: PaymentMethod.DigitalWallet,
+                title: "",
+                icon: "wallet",
+                selected: false,
+            },
+        ];
+    }
+    ngOnInit() {
+        this.setDefaults();
+        this.setValues();
+    }
+    setDefaults() {
+        let selectedPM = this.paymentMethods.filter((value) => value.selected == true)[0];
+        this.ps.selectedPaymentMethod = selectedPM.id;
+    }
+    setValues() { }
+    //Events
+    onPaymentSelect(paymentMethod) {
+        //1. Unselect items
+        this.paymentMethods.forEach((payment) => (payment.selected = false));
+        //2. Set selected PaymentMethod
+        paymentMethod.selected = true;
+        this.ps.selectedPaymentMethod = paymentMethod.id;
+    }
+    static { this.ɵfac = function PaymentMethodsComponent_Factory(t) { return new (t || PaymentMethodsComponent)(i0.ɵɵdirectiveInject(PaymentsService)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PaymentMethodsComponent, selectors: [["anatoly-billing-payment-methods"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 10, vars: 0, consts: [[1, "card", "p-0", "mb-3"], [1, "card-header"], [1, "card-title"], [1, "card-body"], [1, "payment__select-method"], [3, "click"], [1, "payment-name"], [1, "icon-img"], [3, "src", "alt"], [3, "selected"]], template: function PaymentMethodsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h2");
+            i0.ɵɵtext(4, "Select a payment method");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(5, "div", 3)(6, "div", 4)(7, "ul");
+            i0.ɵɵrepeaterCreate(8, PaymentMethodsComponent_For_9_Template, 5, 5, "li", 9, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵelementEnd()()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(8);
+            i0.ɵɵrepeater(ctx.paymentMethods);
+        } }, encapsulation: 2 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaymentMethodsComponent, [{
+        type: Component,
+        args: [{ selector: "anatoly-billing-payment-methods", template: "<div class='card p-0 mb-3'>\r\n  <div class='card-header'>\r\n    <div class='card-title'>\r\n      <h2>Select a payment method</h2>\r\n    </div>\r\n  </div>\r\n  <div class='card-body'>\r\n    <div class='payment__select-method'>\r\n      <ul>\r\n        @for (item of paymentMethods; track item) {\r\n          <li (click)='onPaymentSelect(item)' [class.selected]='item.selected'>\r\n            <div class='payment-name'>Pay with {{ item.title }}</div>\r\n            <div class='icon-img'>\r\n              <img src='./dist/@lib/images/payment-icons/{{item.icon}}.png' alt='payment-icon {{item.title}}'>\r\n            </div>\r\n          </li>\r\n        }\r\n      </ul>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+    }], () => [{ type: PaymentsService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PaymentMethodsComponent, { className: "PaymentMethodsComponent", filePath: "lib\\billing\\components\\payment-methods\\payment-methods.component.ts", lineNumber: 29 }); })();
+
+/*
+<file>
+  Project:
+    @osovitny/anatoly
+
+  Authors:
+    Vadim Osovitny vadim.osovitny@osovitny.com
+    Anatoly Osovitny anatoly.osovitny@osovitny.com
+
+  Created:
+    29 May 2024
+
+  Copyright (c) 2016-2025 Osovitny Inc. All rights reserved.
+</file>
+*/
+//Node
+const _c0$g = a0 => ({ "active": a0 });
+class PaymentOptionsComponent extends ComponentBase {
+    constructor(ps) {
+        super();
+        this.ps = ps;
+        this.change = new EventEmitter();
+    }
+    ngOnInit() {
+        this.setDefaults();
+        this.setValues();
+    }
+    setDefaults() {
+        this.ps.selectedPaymentType = PaymentType.FullPayment;
+    }
+    setValues() { }
+    //Events
+    onPaymentTypeSelect(pt) {
+        this.ps.selectedPaymentType = pt;
+        this.change.emit();
+    }
+    static { this.ɵfac = function PaymentOptionsComponent_Factory(t) { return new (t || PaymentOptionsComponent)(i0.ɵɵdirectiveInject(PaymentsService)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PaymentOptionsComponent, selectors: [["anatoly-billing-payment-options"]], inputs: { priceWeekly: "priceWeekly", priceUpfront: "priceUpfront", numberOfWeeks: "numberOfWeeks" }, outputs: { change: "change" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 19, vars: 9, consts: [[1, "payment-options"], [1, "pay-weekly", 3, "ngClass", "click"], [1, "info"], [1, "price"], [1, "pay-upfront", 3, "ngClass", "click"]], template: function PaymentOptionsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "h4");
+            i0.ɵɵtext(2, "Payment options");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(3, "div", 1);
+            i0.ɵɵlistener("click", function PaymentOptionsComponent_Template_div_click_3_listener() { return ctx.onPaymentTypeSelect(2); });
+            i0.ɵɵelementStart(4, "div", 2)(5, "h4");
+            i0.ɵɵtext(6, "Pay weekly");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(7, "p");
+            i0.ɵɵtext(8, "Cancel anytime");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(9, "div", 3);
+            i0.ɵɵtext(10);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(11, "div", 4);
+            i0.ɵɵlistener("click", function PaymentOptionsComponent_Template_div_click_11_listener() { return ctx.onPaymentTypeSelect(1); });
+            i0.ɵɵelementStart(12, "div", 2)(13, "h4");
+            i0.ɵɵtext(14, "Pay upfront");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(15, "p");
+            i0.ɵɵtext(16);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(17, "div", 3);
+            i0.ɵɵtext(18);
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c0$g, ctx.ps.selectedPaymentType == 2));
+            i0.ɵɵadvance(7);
+            i0.ɵɵtextInterpolate1("$", ctx.priceWeekly, "");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c0$g, ctx.ps.selectedPaymentType == 1));
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate1("Covers the full ", ctx.numberOfWeeks, " weeks ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1("$", ctx.priceUpfront, "");
+        } }, dependencies: [i1$2.NgClass], encapsulation: 2 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaymentOptionsComponent, [{
+        type: Component,
+        args: [{ selector: "anatoly-billing-payment-options", template: "<div class='payment-options'>\r\n  <h4>Payment options</h4>\r\n  <div (click)='onPaymentTypeSelect(2)' [ngClass]='{\"active\": ps.selectedPaymentType == 2 }' class='pay-weekly'>\r\n    <div class='info'>\r\n      <h4>Pay weekly</h4>\r\n      <p>Cancel anytime</p>\r\n    </div>\r\n    <div class='price'>${{ priceWeekly }}</div>\r\n  </div>\r\n\r\n  <div (click)='onPaymentTypeSelect(1)' [ngClass]='{\"active\": ps.selectedPaymentType == 1 }' class='pay-upfront'>\r\n    <div class='info'>\r\n      <h4>Pay upfront</h4>\r\n      <p>Covers the full {{ numberOfWeeks }} weeks </p>\r\n    </div>\r\n    <div class='price'>${{ priceUpfront }}</div>\r\n  </div>\r\n</div>\r\n" }]
+    }], () => [{ type: PaymentsService }], { priceWeekly: [{
+            type: Input
+        }], priceUpfront: [{
+            type: Input
+        }], numberOfWeeks: [{
+            type: Input
+        }], change: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PaymentOptionsComponent, { className: "PaymentOptionsComponent", filePath: "lib\\billing\\components\\payment-options\\payment-options.component.ts", lineNumber: 29 }); })();
+
+/*
+<file>
+  Project:
+    @osovitny/anatoly
+
+  Authors:
+    Vadim Osovitny vadim.osovitny@osovitny.com
+    Anatoly Osovitny anatoly.osovitny@osovitny.com
+
+  Created:
+    20 Nov 2017
+
+  Copyright (c) 2016-2025 Osovitny Inc. All rights reserved.
+</file>
+*/
+//Node
+class EditComponentBase extends ComponentBase {
+    constructor() {
+        super();
+        //Modes
+        this.isAddMode = false;
+        this.isEditMode = false;
+        this.formSubmitted = false;
+        this.controlName = null;
+        this.isEditMode = QSUtils.idExists();
+        this.isAddMode = !this.isEditMode;
+    }
+    isControlValid(name, frmGroup = null) {
+        return !this.isControlInvalid(name, frmGroup);
+    }
+    isControlInvalid(name, frmGroup = null) {
+        if (typeof name === "undefined" || name == "") {
+            return false;
+        }
+        let fg = frmGroup ? frmGroup : this.formGroup;
+        if (!fg) {
+            return false;
+        }
+        let control = fg.get(name);
+        if (control) {
+            return ((this.formSubmitted && control.invalid) || (control.touched && control.invalid));
+        }
+        return false;
+    }
+    //FormGroup functions
+    getFormValue(name, frmGroup = null) {
+        let fg = frmGroup ? frmGroup : this.formGroup;
+        return fg.controls[name].value;
+    }
+    setFormValue(name, value, frmGroup = null) {
+        let fg = frmGroup ? frmGroup : this.formGroup;
+        fg.controls[name].setValue(value);
+    }
+    getFormGroupValue(groupName, name, frmGroup = null) {
+        let fg = frmGroup ? frmGroup : this.formGroup;
+        return fg.controls[groupName].get(name).value;
+    }
+    setFormGroupValue(groupName, name, value, frmGroup = null) {
+        let fg = frmGroup ? frmGroup : this.formGroup;
+        fg.controls[groupName].get(name).setValue(value);
+    }
+    /**
+     * Add control to form group
+     * @param name
+     * @param formControl
+     * @param frmGroup
+     */
+    addControl(name, formControl, frmGroup = null) {
+        let fg = frmGroup ? frmGroup : this.formGroup;
+        fg.addControl(name, formControl);
+    }
+    /**
+     * Removes control from form group
+     * @param name
+     * @param frmGroup
+     */
+    removeControl(name, frmGroup = null) {
+        let fg = frmGroup ? frmGroup : this.formGroup;
+        if (fg.get(name)) {
+            fg.removeControl(name);
+        }
+    }
+    /**
+     * return new form control
+     * @param formState
+     * @param validatorOrOpts
+     * @param asyncValidator
+     */
+    createFormControl(formState, validatorOrOpts, asyncValidator) {
+        return new FormControl(formState, validatorOrOpts, asyncValidator);
+    }
+    /**
+     * Set error to control
+     * @param controlName formControl name
+     * @param err error expect {erroname: boolean} format
+     * @param frmGroup
+     */
+    setControlError(controlName, err, frmGroup = null) {
+        let fg = frmGroup ? frmGroup : this.formGroup;
+        fg.get(controlName)?.setErrors(err);
+    }
+    /**
+     * Set {invalid: true} for the specified form
+     * @param controlName form control name
+     * @param frmGroup
+     */
+    setInValidError(controlName, frmGroup = null) {
+        let fg = frmGroup ? frmGroup : this.formGroup;
+        fg.get(controlName)?.setErrors({ invalid: true });
+    }
+    /**
+     * returns formgroup controls.
+     * main use case is used in html pages
+     */
+    get fc() {
+        return this.formGroup.controls;
+    }
+    get isNgModelBased() {
+        return this.controlName == null;
+    }
+    static { this.ɵfac = function EditComponentBase_Factory(t) { return new (t || EditComponentBase)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EditComponentBase, selectors: [["ng-component"]], inputs: { formGroup: "formGroup", formSubmitted: "formSubmitted", controlName: "controlName" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 0, vars: 0, template: function EditComponentBase_Template(rf, ctx) { }, encapsulation: 2 }); }
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaymentsApiService, [{
-        type: Injectable
-    }], () => [{ type: i1$1.HttpClient }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EditComponentBase, [{
+        type: Component,
+        args: [{
+                template: ''
+            }]
+    }], () => [], { formGroup: [{
+            type: Input
+        }], formSubmitted: [{
+            type: Input
+        }], controlName: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EditComponentBase, { className: "EditComponentBase", filePath: "lib\\ui\\components\\base\\components\\edit.component.ts", lineNumber: 28 }); })();
 
 /*
 <file>
@@ -4001,162 +4460,65 @@ class PaymentsApiService extends ApiServiceBase {
 
   Authors:
     Vadim Osovitny vadim.osovitny@osovitny.com
-    Dhruv Agarwal dhruv.agarwal@osovitny.com
+    Anatoly Osovitny anatoly.osovitny@osovitny.com
 
   Created:
-    11 Aug 2024
-
-  Details:
-    https://blog.thoughtram.io/angular/2017/02/21/using-zones-in-angular-for-better-performance.html
+    24 Jan 2022
 
-  Copyright (c) 2016-2024 Osovitny Inc. All rights reserved.
+  Copyright (c) 2016-2025 Osovitny Inc. All rights reserved.
 </file>
 */
 //Node
-class PaymentsService {
-    constructor(zone, api, ns, ga) {
-        this.zone = zone;
-        this.api = api;
-        this.ns = ns;
-        this.ga = ga;
-        this.paymentInProgress = false;
-        this.isPaymentFailed = false;
-        this.subtotal = 0;
-        this.discountCode = null;
-        this.discountPercentage = null;
-        this.discountAmount = null;
-        this.total = 0;
-        this.currency = 'USD';
-        //Private Streams
-        this._discountCodeApplied = new Subject();
-        this._paymentAdded = new Subject();
-        this._showStripeDialog = new Subject();
-        this._showBraintreeDialog = new Subject();
-        //Public Streams
-        this.discountCodeApplied$ = this._discountCodeApplied.asObservable();
-        this.paymentAdded$ = this._paymentAdded.asObservable();
-        this.showStripeDialog$ = this._showStripeDialog.asObservable();
-        this.showBraintreeDialog$ = this._showBraintreeDialog.asObservable();
-    }
-    setDefaults() {
-    }
-    setValues() {
-    }
-    //fires
-    fireDiscountCodeApplied() {
-        this._discountCodeApplied.next(this.discountCode);
-    }
-    firePaymentAdded(paymentId) {
-        this._paymentAdded.next(paymentId);
-    }
-    //Public
-    init() {
-        this.setDefaults();
-        this.setValues();
-    }
-    resetState() {
-        this.subtotal = 0;
-        this.total = 0;
-    }
-    getTotal() {
-        let subtotal = this.subtotal;
-        if (this.discountAmount != 0) {
-            subtotal = subtotal - this.discountAmount;
-        }
-        else if (this.discountPercentage != 0) {
-            subtotal = subtotal - (subtotal * (this.discountPercentage / 100));
-            subtotal = +subtotal.toFixed(2);
-        }
-        return subtotal > 0 ? subtotal : 0;
-    }
-    //DiscountCode
-    applyDiscountCode(discountCode, data) {
-        if (!data) {
-            return;
-        }
-        this.discountCode = discountCode;
-        if (data.amount) {
-            this.discountPercentage = 0;
-            this.discountAmount = parseInt(data.amount);
-        }
-        else if (data.percentage) {
-            this.discountPercentage = parseInt(data.percentage);
-            this.discountAmount = 0;
-        }
-        this.fireDiscountCodeApplied();
+class DialogBase extends EditComponentBase {
+    get isOpen() {
+        return this._isOpen;
     }
-    getDiscountCodeAsString() {
-        if (this.discountAmount > 0) {
-            return "$" + this.discountAmount;
-        }
-        else if (this.discountPercentage > 0) {
-            return this.discountPercentage + "%";
+    set isOpen(value) {
+        if (value) {
+            if (this.osOnBeforeOpen) {
+                this.osOnBeforeOpen();
+            }
+            this.opened.emit();
         }
-        return '$0';
-    }
-    openStripePaymentDialog() {
-        this._showStripeDialog.next(true);
-    }
-    openBraintreePaymentDialog() {
-        this._showBraintreeDialog.next(true);
-    }
-    closeBraintreePaymentDialog() {
-        this._showBraintreeDialog.next(false);
+        this._isOpen = value;
     }
-    createStripeSession(title, description, image) {
-        const amount = this.getTotal();
-        const currency = this.currency;
-        return this.api.createStripeSession(amount, currency, title, description, image);
+    constructor() {
+        super();
+        //Private
+        this._isOpen = false;
+        //Public
+        this.themeColor = "primary";
+        //Events
+        this.opened = new EventEmitter();
+        this.closed = new EventEmitter();
     }
-    createBraintreeToken() {
-        return this.api.createBraintreeToken();
+    open() {
+        this.isOpen = true;
     }
-    pay(paidFor, payId, payStatus, payDetails) {
-        //GA
-        this.ga.event(GABillingEvents.payment);
-        let paidForAsString = JSON.stringify(paidFor);
-        let payType = this.selectedPaymentType;
-        let payMethod = this.selectedPaymentMethod;
-        //Amount
-        let subtotal = this.subtotal;
-        let promoCode = this.discountCode;
-        let total = this.getTotal();
-        let currency = this.currency;
-        if (total == 0) {
-            payMethod = PaymentMethod.None;
-        }
-        this.zone.run(() => {
-            this.api.pay(paidForAsString, payMethod, 
-            //Amount
-            subtotal, promoCode, total, currency, 
-            //Payment method details (PayPal/Stripe/Braintree)
-            payId, payStatus, payDetails, (data) => {
-                if (!data || !data?.isPaymentValid) {
-                    this.paymentFailed(PaymentStage.External);
-                    return;
-                }
-                if (payMethod == PaymentMethod.CreditCard) {
-                    //this.closeBraintreePaymentDialog();
-                }
-                this.paymentInProgress = false;
-                this.firePaymentAdded(data.paymentId);
-            }, () => {
-                this.paymentFailed(PaymentStage.External);
-            });
-        });
+    close(returnValue = "OK") {
+        this.isOpen = false;
+        this.closed.emit(returnValue);
     }
-    paymentFailed(stage) {
-        this.paymentStage = stage;
-        this.paymentInProgress = false;
-        this.isPaymentFailed = true;
-        this.ns.error("Payment Failed");
+    cancel() {
+        this.isOpen = false;
+        this.closed.emit(-1);
     }
-    static { this.ɵfac = function PaymentsService_Factory(t) { return new (t || PaymentsService)(i0.ɵɵinject(i0.NgZone), i0.ɵɵinject(PaymentsApiService), i0.ɵɵinject(NotificationService), i0.ɵɵinject(GoogleAnalyticsService)); }; }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PaymentsService, factory: PaymentsService.ɵfac }); }
+    static { this.ɵfac = function DialogBase_Factory(t) { return new (t || DialogBase)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DialogBase, selectors: [["ng-component"]], inputs: { isOpen: "isOpen" }, outputs: { opened: "opened", closed: "closed" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 0, vars: 0, template: function DialogBase_Template(rf, ctx) { }, encapsulation: 2 }); }
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaymentsService, [{
-        type: Injectable
-    }], () => [{ type: i0.NgZone }, { type: PaymentsApiService }, { type: NotificationService }, { type: GoogleAnalyticsService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DialogBase, [{
+        type: Component,
+        args: [{
+                template: ''
+            }]
+    }], () => [], { isOpen: [{
+            type: Input
+        }], opened: [{
+            type: Output
+        }], closed: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DialogBase, { className: "DialogBase", filePath: "lib\\ui\\components\\base\\dialog.ts", lineNumber: 27 }); })();
 
 /*
 <file>
@@ -4172,7 +4534,7 @@ class PaymentsService {
   Description:
     Credit Card payment form via braintree integration
 
-  Copyright (c) 2016-2024 Osovitny Inc. All rights reserved.
+  Copyright (c) 2016-2025 Osovitny Inc. All rights reserved.
 </file>
 */
 //Node
@@ -4289,7 +4651,7 @@ class BraintreeDialog extends DialogBase {
             i0.ɵɵtemplate(0, BraintreeDialog_Conditional_0_Template, 11, 3, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(0, ctx.visible ? 0 : -1);
-        } }, dependencies: [i2.DialogComponent, i2.DialogTitleBarComponent, i2.DialogActionsComponent], encapsulation: 2 }); }
+        } }, dependencies: [i2$1.DialogComponent, i2$1.DialogTitleBarComponent, i2$1.DialogActionsComponent], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BraintreeDialog, [{
         type: Component,
@@ -4861,7 +5223,7 @@ class PaypalButtonComponent extends ComponentBase {
   Description:
     Credit Card payment form via stripe integration
 
-  Copyright (c) 2016-2024 Osovitny Inc. All rights reserved.
+  Copyright (c) 2016-2025 Osovitny Inc. All rights reserved.
 </file>
 */
 //Node
@@ -4931,7 +5293,7 @@ class StripeDialog extends DialogBase {
             i0.ɵɵtemplate(0, StripeDialog_Conditional_0_Template, 6, 3, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(0, ctx.visible ? 0 : -1);
-        } }, dependencies: [i2.DialogComponent, i2.DialogTitleBarComponent], encapsulation: 2 }); }
+        } }, dependencies: [i2$1.DialogComponent, i2$1.DialogTitleBarComponent], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StripeDialog, [{
         type: Component,
@@ -4961,7 +5323,6 @@ class StripeDialog extends DialogBase {
   Copyright (c) 2016-2025 Osovitny Inc. All rights reserved.
 </file>
 */
-//braintree
 
 /*
 <file>
@@ -4969,7 +5330,7 @@ class StripeDialog extends DialogBase {
     Atlas Cross
 
   Authors:
-    Leon Malyan leon.malyan@atlascross.io
+    Leon Malyan leon.malyan@osovitny.com
 
   Created:
     25 May 2024
@@ -5257,37 +5618,6 @@ class CurrenciesStorageService {
         type: Injectable
     }], () => [{ type: AppContextService }, { type: CurrenciesApiService }], null); })();
 
-/*
-<file>
-  Project:
-    @osovitny/anatoly
-
-  Authors:
-    Vadim Osovitny vadim.osovitny@osovitny.com
-
-  Created:
-    4 Jun 2024
-
-  Copyright (c) 2017-2025 Osovitny Inc. All rights reserved.
-</file>
-*/
-//Node
-class DiscountCodesApiService extends ApiServiceBase {
-    constructor(http) {
-        super(http);
-        this.http = http;
-        this.baseUrl = `${ApiUrl}/billing/discountCodes`;
-    }
-    getDiscountCode(code) {
-        return this.get('getDiscountCode', { code });
-    }
-    static { this.ɵfac = function DiscountCodesApiService_Factory(t) { return new (t || DiscountCodesApiService)(i0.ɵɵinject(i1$1.HttpClient)); }; }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: DiscountCodesApiService, factory: DiscountCodesApiService.ɵfac }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DiscountCodesApiService, [{
-        type: Injectable
-    }], () => [{ type: i1$1.HttpClient }], null); })();
-
 /*
 <file>
   Project:
@@ -6638,7 +6968,7 @@ class NativeElementDirective {
         // sets the localization key to the control
         this.control.control.nativeElement = this.el.nativeElement;
     }
-    static { this.ɵfac = function NativeElementDirective_Factory(t) { return new (t || NativeElementDirective)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i2$1.NgControl)); }; }
+    static { this.ɵfac = function NativeElementDirective_Factory(t) { return new (t || NativeElementDirective)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i2.NgControl)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: NativeElementDirective, selectors: [["", "formControl", ""], ["", "formControlName", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NativeElementDirective, [{
@@ -6646,7 +6976,7 @@ class NativeElementDirective {
         args: [{
                 selector: '[formControl], [formControlName]'
             }]
-    }], () => [{ type: i0.ElementRef }, { type: i2$1.NgControl }], null); })();
+    }], () => [{ type: i0.ElementRef }, { type: i2.NgControl }], null); })();
 
 /*
 <file>
@@ -6919,7 +7249,7 @@ class UrlSlugComponent extends EditComponentBase {
             i0.ɵɵproperty("formControlName", ctx.controlName);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.isGoButtonVisible);
-        } }, dependencies: [i1$2.NgClass, i1$2.NgIf, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.NgControlStatusGroup, i2$1.FormGroupDirective, i2$1.FormControlName, NativeElementDirective, ItemValidationSummaryComponent], encapsulation: 2 }); }
+        } }, dependencies: [i1$2.NgClass, i1$2.NgIf, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormGroupDirective, i2.FormControlName, NativeElementDirective, ItemValidationSummaryComponent], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UrlSlugComponent, [{
         type: Component,
@@ -7013,7 +7343,7 @@ class CountryDropdownlist extends EditComponentBase {
             i0.ɵɵproperty("ngIf", ctx.isNgModelBased);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", !ctx.isNgModelBased);
-        } }, dependencies: [i1$2.NgForOf, i1$2.NgIf, i2$1.NgSelectOption, i2$1.ɵNgSelectMultipleOption, i2$1.SelectControlValueAccessor, i2$1.NgControlStatus, i2$1.NgControlStatusGroup, i2$1.FormGroupDirective, i2$1.FormControlName, NativeElementDirective], encapsulation: 2 }); }
+        } }, dependencies: [i1$2.NgForOf, i1$2.NgIf, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormGroupDirective, i2.FormControlName, NativeElementDirective], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CountryDropdownlist, [{
         type: Component,
@@ -7116,7 +7446,7 @@ class TimezoneDropdownlist extends EditComponentBase {
             i0.ɵɵproperty("ngIf", ctx.isNgModelBased);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", !ctx.isNgModelBased);
-        } }, dependencies: [i1$2.NgForOf, i1$2.NgIf, i2$1.NgSelectOption, i2$1.ɵNgSelectMultipleOption, i2$1.SelectControlValueAccessor, i2$1.NgControlStatus, i2$1.NgControlStatusGroup, i2$1.FormGroupDirective, i2$1.FormControlName, NativeElementDirective], encapsulation: 2 }); }
+        } }, dependencies: [i1$2.NgForOf, i1$2.NgIf, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormGroupDirective, i2.FormControlName, NativeElementDirective], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimezoneDropdownlist, [{
         type: Component,
@@ -7491,7 +7821,7 @@ class FormsHtmlEditorComponent extends HtmlEditorComponentBase {
             i0.ɵɵproperty("formControlName", ctx.editorFormKey)("froalaEditor", ctx.options);
             i0.ɵɵadvance();
             i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted)("controlName", ctx.editorFormKey);
-        } }, dependencies: [i1$2.NgClass, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.NgControlStatusGroup, i2$1.FormGroupDirective, i2$1.FormControlName, i3.FroalaEditorDirective, NativeElementDirective, ItemValidationSummaryComponent], encapsulation: 2 }); }
+        } }, dependencies: [i1$2.NgClass, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormGroupDirective, i2.FormControlName, i3.FroalaEditorDirective, NativeElementDirective, ItemValidationSummaryComponent], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormsHtmlEditorComponent, [{
         type: Component,
@@ -7776,7 +8106,7 @@ class ContactUsForm extends EditComponentBase {
     onTopicChange(event) {
         this.selectedTopic = event.target.value;
     }
-    static { this.ɵfac = function ContactUsForm_Factory(t) { return new (t || ContactUsForm)(i0.ɵɵdirectiveInject(i1$8.ReCaptchaV3Service), i0.ɵɵdirectiveInject(i2$1.FormBuilder), i0.ɵɵdirectiveInject(AppContextService), i0.ɵɵdirectiveInject(EmailsApiService), i0.ɵɵdirectiveInject(NotificationService)); }; }
+    static { this.ɵfac = function ContactUsForm_Factory(t) { return new (t || ContactUsForm)(i0.ɵɵdirectiveInject(i1$8.ReCaptchaV3Service), i0.ɵɵdirectiveInject(i2.FormBuilder), i0.ɵɵdirectiveInject(AppContextService), i0.ɵɵdirectiveInject(EmailsApiService), i0.ɵɵdirectiveInject(NotificationService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ContactUsForm, selectors: [["anatoly-forms-contactus-form"]], inputs: { showActionButtons: "showActionButtons" }, outputs: { submit: "submit" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 39, vars: 31, consts: [["novalidate", "", 3, "formGroup", "ngSubmit"], [3, "formGroup", "visible"], [1, "contact-us"], [1, "row"], [1, "form-fields", "col-6"], [1, "form-topic", 3, "ngClass"], [1, "form-select-wrapper"], [1, "assistive-text"], ["formControlName", "topic", 1, "form-select", 3, "change"], [3, "value", 4, "ngFor", "ngForOf"], ["controlName", "topic", "controlTitle", "topic", 3, "formGroup", "formSubmitted"], [1, "form-name", 3, "ngClass"], ["formControlName", "name", "placeholder", "Name *", "type", "text", 1, "form-control"], ["controlName", "name", "controlTitle", "name", 3, "formGroup", "formSubmitted"], [1, "form-email", 3, "ngClass"], ["formControlName", "email", "placeholder", "E-mail *", "type", "text", 1, "form-control"], [4, "ngIf"], ["controlName", "email", "controlTitle", "email", 3, "formGroup", "formSubmitted"], [1, "form-subject", 3, "ngClass"], ["formControlName", "subject", "placeholder", "Subject *", "type", "text", 1, "form-control"], ["controlName", "subject", "controlTitle", "subject", 3, "formGroup", "formSubmitted"], [1, "col-6"], [1, "form-message", 3, "ngClass"], ["formControlName", "message", "name", "message", "placeholder", "Message  *", "rows", "4", "type", "text"], ["controlName", "message", "controlTitle", "message", 3, "formGroup", "formSubmitted"], [1, "row", "form-footer"], [1, "col"], ["class", "btn btn-success", "type", "submit", 3, "btn-primary", 4, "ngIf"], [3, "value"], ["type", "submit", 1, "btn", "btn-success"]], template: function ContactUsForm_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "form", 0);
             i0.ɵɵlistener("ngSubmit", function ContactUsForm_Template_form_ngSubmit_0_listener() { return ctx.onSubmit(); });
@@ -7848,12 +8178,12 @@ class ContactUsForm extends EditComponentBase {
             i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.showActionButtons);
-        } }, dependencies: [i1$2.NgClass, i1$2.NgForOf, i1$2.NgIf, i2$1.ɵNgNoValidate, i2$1.NgSelectOption, i2$1.ɵNgSelectMultipleOption, i2$1.DefaultValueAccessor, i2$1.SelectControlValueAccessor, i2$1.NgControlStatus, i2$1.NgControlStatusGroup, i2$1.FormGroupDirective, i2$1.FormControlName, NativeElementDirective, FormValidationSummaryComponent, ItemValidationSummaryComponent], encapsulation: 2 }); }
+        } }, dependencies: [i1$2.NgClass, i1$2.NgForOf, i1$2.NgIf, i2.ɵNgNoValidate, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormGroupDirective, i2.FormControlName, NativeElementDirective, FormValidationSummaryComponent, ItemValidationSummaryComponent], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContactUsForm, [{
         type: Component,
         args: [{ selector: 'anatoly-forms-contactus-form', template: "<form (ngSubmit)='onSubmit()' [formGroup]='formGroup' novalidate>\r\n  <anatoly-form-validation-summary [formGroup]='formGroup'\r\n                                   [visible]='formSubmitted && formGroup.invalid'></anatoly-form-validation-summary>\r\n\r\n  <div class='contact-us'>\r\n    <div class=\"row\">\r\n      <div class='form-fields col-6'>\r\n        <p>What can we help you with?</p>\r\n        <div [ngClass]=\"{'has-error': isControlInvalid('topic') }\" class='form-topic'>\r\n          <div class='form-select-wrapper'>\r\n            <label class='assistive-text'>Topic *</label>\r\n            <select (change)='onTopicChange($event)' class='form-select' formControlName='topic'>\r\n              <option *ngFor='let topic of topicList' [value]='topic.value'>{{ topic.value }} </option>\r\n            </select>\r\n            <anatoly-item-validation-summary [formGroup]='formGroup'\r\n                                             [formSubmitted]='formSubmitted'\r\n                                             controlName='topic'\r\n                                             controlTitle='topic'>\r\n            </anatoly-item-validation-summary>\r\n          </div>\r\n        </div>\r\n        <div [ngClass]=\"{'has-error': isControlInvalid('name') }\" class='form-name'>\r\n          <label class='assistive-text'>Name *</label>\r\n          <input class='form-control' formControlName='name' placeholder='Name *' type='text'>\r\n          <anatoly-item-validation-summary [formGroup]='formGroup'\r\n                                           [formSubmitted]='formSubmitted'\r\n                                           controlName='name'\r\n                                           controlTitle='name'>\r\n          </anatoly-item-validation-summary>\r\n        </div>\r\n        <div [ngClass]=\"{'has-error': isControlInvalid('email') }\" class='form-email'>\r\n          <label class='assistive-text'>E-mail * </label>\r\n          <input class='form-control' formControlName='email' placeholder='E-mail *' type='text' />\r\n          <p *ngIf='!isUserSignedIn'>Please indicate the email used for your MailEx login if you already have an account</p>\r\n          <anatoly-item-validation-summary [formGroup]='formGroup'\r\n                                           [formSubmitted]='formSubmitted'\r\n                                           controlName='email'\r\n                                           controlTitle='email'>\r\n          </anatoly-item-validation-summary>\r\n        </div>\r\n        <div [ngClass]=\"{'has-error': isControlInvalid('subject') }\" class='form-subject'>\r\n          <label class='assistive-text'>Subject *</label>\r\n          <input class='form-control' formControlName='subject' placeholder='Subject *' type='text' />\r\n          <anatoly-item-validation-summary [formGroup]='formGroup'\r\n                                           [formSubmitted]='formSubmitted'\r\n                                           controlName='subject'\r\n                                           controlTitle='subject'>\r\n          </anatoly-item-validation-summary>\r\n        </div>\r\n\r\n      </div>\r\n      <div class='col-6'>\r\n        <div [ngClass]=\"{'has-error': isControlInvalid('message') }\" class='form-message'>\r\n          <label class='assistive-text'>Message *</label>\r\n          <textarea formControlName='message' name='message' placeholder='Message  *' rows='4'\r\n                    type='text'></textarea>\r\n          <anatoly-item-validation-summary [formGroup]='formGroup'\r\n                                           [formSubmitted]='formSubmitted'\r\n                                           controlName='message'\r\n                                           controlTitle='message'>\r\n          </anatoly-item-validation-summary>\r\n        </div>\r\n      </div>\r\n    </div>\r\n      <div class=\"row form-footer\">\r\n        <div class=\"col\">\r\n          <button *ngIf='showActionButtons'\r\n                  [class.btn-primary]='!formGroup.invalid'\r\n                  class='btn btn-success'\r\n                  type='submit'>\r\n            Submit\r\n          </button>\r\n        </div>\r\n    </div>\r\n  </div>\r\n</form>\r\n" }]
-    }], () => [{ type: i1$8.ReCaptchaV3Service }, { type: i2$1.FormBuilder }, { type: AppContextService }, { type: EmailsApiService }, { type: NotificationService }], { showActionButtons: [{
+    }], () => [{ type: i1$8.ReCaptchaV3Service }, { type: i2.FormBuilder }, { type: AppContextService }, { type: EmailsApiService }, { type: NotificationService }], { showActionButtons: [{
             type: Input
         }], submit: [{
             type: Output
@@ -7921,7 +8251,7 @@ class ContactUsDialog extends DialogBase {
             i0.ɵɵtemplate(0, ContactUsDialog_kendo_dialog_0_Template, 10, 2, "kendo-dialog", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.isOpen);
-        } }, dependencies: [i1$2.NgIf, i2.DialogComponent, i2.DialogActionsComponent, ContactUsForm], encapsulation: 2 }); }
+        } }, dependencies: [i1$2.NgIf, i2$1.DialogComponent, i2$1.DialogActionsComponent, ContactUsForm], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContactUsDialog, [{
         type: Component,
@@ -8167,7 +8497,7 @@ class AddressComponent extends EditComponentBase {
         let usState = event.target.value;
         this.change.emit(usState);
     }
-    static { this.ɵfac = function AddressComponent_Factory(t) { return new (t || AddressComponent)(i0.ɵɵdirectiveInject(i2$1.FormBuilder), i0.ɵɵdirectiveInject(CoreApiService)); }; }
+    static { this.ɵfac = function AddressComponent_Factory(t) { return new (t || AddressComponent)(i0.ɵɵdirectiveInject(i2.FormBuilder), i0.ɵɵdirectiveInject(CoreApiService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AddressComponent, selectors: [["anatoly-forms-address"]], inputs: { address: "address" }, outputs: { change: "change" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 29, vars: 29, consts: [["classes", "card-primary card-outline"], [3, "title", 4, "ngIf"], [1, "row", 3, "formGroup"], [1, "form-group", "col-12", 3, "ngClass"], [1, "col-form-label", "required"], ["type", "text", "formControlName", "address_street", "placeholder", "Street Address", 1, "form-control"], ["controlName", "address_street", "controlTitle", "Street", 3, "formGroup", "formSubmitted"], ["type", "text", "formControlName", "address_street2", "placeholder", "Apartment, suite, unit, building, floor, etc.", 1, "form-control"], ["controlName", "address_street2", "controlTitle", "Street2", 3, "formGroup", "formSubmitted"], [1, "form-group", "col-3", 3, "ngClass"], ["type", "text", "formControlName", "address_city", "placeholder", "City", 1, "form-control"], ["controlName", "address_city", "controlTitle", "City", 3, "formGroup", "formSubmitted"], ["class", "form-group col-3", 3, "ngClass", 4, "ngIf"], ["type", "text", "formControlName", "address_zipcode", "placeholder", "zipcode", 1, "form-control"], ["controlName", "address_zipcode", "controlTitle", "zipcode", 3, "formGroup", "formSubmitted"], ["formControlName", "address_country", "data-placeholder", "Select a Country", 1, "form-control", 3, "change"], [3, "value", 4, "ngFor", "ngForOf"], ["controlName", "address_country", "controlTitle", "Country", 3, "formGroup", "formSubmitted"], [3, "title"], ["formControlName", "address_stateOrRegion", 1, "form-control", 3, "change"], ["controlName", "address_stateOrRegion", "controlTitle", "State", 3, "formGroup", "formSubmitted"], [3, "value"]], template: function AddressComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "anatoly-card", 0);
             i0.ɵɵtemplate(1, AddressComponent_anatoly_card_header_1_Template, 1, 1, "anatoly-card-header", 1);
@@ -8228,12 +8558,12 @@ class AddressComponent extends EditComponentBase {
             i0.ɵɵproperty("ngForOf", ctx.countryData);
             i0.ɵɵadvance();
             i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted);
-        } }, dependencies: [i1$2.NgClass, i1$2.NgForOf, i1$2.NgIf, i2$1.NgSelectOption, i2$1.ɵNgSelectMultipleOption, i2$1.DefaultValueAccessor, i2$1.SelectControlValueAccessor, i2$1.NgControlStatus, i2$1.NgControlStatusGroup, i2$1.FormGroupDirective, i2$1.FormControlName, CardComponent, CardHeaderComponent, CardBodyComponent, NativeElementDirective, ItemValidationSummaryComponent], encapsulation: 2 }); }
+        } }, dependencies: [i1$2.NgClass, i1$2.NgForOf, i1$2.NgIf, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormGroupDirective, i2.FormControlName, CardComponent, CardHeaderComponent, CardBodyComponent, NativeElementDirective, ItemValidationSummaryComponent], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AddressComponent, [{
         type: Component,
         args: [{ selector: 'anatoly-forms-address', template: "<anatoly-card classes='card-primary card-outline'>\r\n  <anatoly-card-header *ngIf='isTitleVisible' [title]='title'></anatoly-card-header>\r\n  <anatoly-card-body>\r\n    <div class='row' [formGroup]='formGroup'>\r\n      <div class='form-group col-12' [ngClass]=\"{'has-error': isControlInvalid('address_street')}\" >\r\n        <label class='col-form-label required'>Street Address</label>\r\n        <input type='text' class='form-control' formControlName='address_street' placeholder='Street Address'>\r\n        <anatoly-item-validation-summary controlName='address_street'\r\n                                         controlTitle='Street'\r\n                                         [formGroup]='formGroup'\r\n                                         [formSubmitted]='formSubmitted'>\r\n        </anatoly-item-validation-summary>\r\n      </div>\r\n\r\n      <div class='form-group col-12' [ngClass]=\"{'has-error': isControlInvalid('address_street2')}\" >\r\n        <input type='text' class='form-control' formControlName='address_street2' placeholder='Apartment, suite, unit, building, floor, etc.'>\r\n        <anatoly-item-validation-summary controlName='address_street2'\r\n                                         controlTitle='Street2'\r\n                                         [formGroup]='formGroup'\r\n                                         [formSubmitted]='formSubmitted'>\r\n        </anatoly-item-validation-summary>\r\n      </div>\r\n\r\n      <div class='form-group col-3' [ngClass]=\"{'has-error': isControlInvalid('address_city')}\">\r\n        <label class='col-form-label required'>City</label>\r\n        <input type='text' class='form-control' formControlName='address_city' placeholder='City'>\r\n        <anatoly-item-validation-summary controlName='address_city'\r\n                                         controlTitle='City'\r\n                                         [formGroup]='formGroup'\r\n                                         [formSubmitted]='formSubmitted'>\r\n        </anatoly-item-validation-summary>\r\n      </div>\r\n\r\n      <div class='form-group col-3' *ngIf=\"formGroup.value.address_country == 'US'\" [ngClass]=\"{'has-error': isControlInvalid('address_stateOrRegion')}\">\r\n        <label class='col-form-label required'>State</label>\r\n        <select class='form-control' (change)='onUSStateChange($event)' formControlName='address_stateOrRegion'>\r\n          <option *ngFor='let state of usStateData' [value]='state.code'>{{state.name}}</option>\r\n        </select>\r\n        <anatoly-item-validation-summary controlName='address_stateOrRegion'\r\n                                         controlTitle='State'\r\n                                         [formGroup]='formGroup'\r\n                                         [formSubmitted]='formSubmitted'>\r\n        </anatoly-item-validation-summary>\r\n      </div>\r\n\r\n      <div class='form-group col-3' [ngClass]=\"{'has-error': isControlInvalid('address_zipcode')}\" >\r\n        <label class='col-form-label required'>zipcode</label>\r\n        <input type='text' class='form-control' formControlName='address_zipcode' placeholder='zipcode'>\r\n        <anatoly-item-validation-summary controlName='address_zipcode'\r\n                                         controlTitle='zipcode'\r\n                                         [formGroup]='formGroup'\r\n                                         [formSubmitted]='formSubmitted'>\r\n        </anatoly-item-validation-summary>\r\n      </div>\r\n\r\n      <div class='form-group col-3' [ngClass]=\"{'has-error': isControlInvalid('address_country')}\">\r\n        <label class='col-form-label required'>Country</label>\r\n        <select class='form-control' (change)='onCountryChange($event)' formControlName='address_country' data-placeholder='Select a Country'>\r\n          <option *ngFor='let country of countryData' [value]='country.code'>{{country.name}}</option>\r\n        </select>\r\n        <anatoly-item-validation-summary controlName='address_country'\r\n                                         controlTitle='Country'\r\n                                         [formGroup]='formGroup'\r\n                                         [formSubmitted]='formSubmitted'>\r\n        </anatoly-item-validation-summary>\r\n      </div>\r\n    </div>\r\n  </anatoly-card-body>\r\n</anatoly-card>\r\n" }]
-    }], () => [{ type: i2$1.FormBuilder }, { type: CoreApiService }], { address: [{
+    }], () => [{ type: i2.FormBuilder }, { type: CoreApiService }], { address: [{
             type: Input
         }], change: [{
             type: Output
@@ -8312,7 +8642,7 @@ class CompanyComponent extends EditComponentBase {
         };
         return JSON.stringify(data);
     }
-    static { this.ɵfac = function CompanyComponent_Factory(t) { return new (t || CompanyComponent)(i0.ɵɵdirectiveInject(i2$1.FormBuilder)); }; }
+    static { this.ɵfac = function CompanyComponent_Factory(t) { return new (t || CompanyComponent)(i0.ɵɵdirectiveInject(i2.FormBuilder)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CompanyComponent, selectors: [["anatoly-forms-company"]], inputs: { company: "company" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 24, vars: 22, consts: [["classes", "card-primary card-outline"], [3, "title", 4, "ngIf"], [1, "row", 3, "formGroup"], [1, "form-group", "col-6", 3, "ngClass"], [1, "col-form-label"], ["type", "text", "formControlName", "company_name", "placeholder", "Company Name", 1, "form-control"], ["controlName", "company_name", "controlTitle", "Company Name", 3, "formGroup", "formSubmitted"], ["type", "tel", "formControlName", "company_phone", "placeholder", "Company Phone", 1, "form-control"], ["controlName", "company_phone", "controlTitle", "Company Phone", 3, "formGroup", "formSubmitted"], ["type", "email", "formControlName", "company_email", "placeholder", "Company Email", 1, "form-control"], ["controlName", "company_email", "controlTitle", "Company Email", 3, "formGroup", "formSubmitted"], ["type", "url", "placeholder", "https://example.com", "pattern", "https://.*", "size", "30", "formControlName", "company_websiteUrl", 1, "form-control"], ["controlName", "company_websiteUrl", "controlTitle", "Company website url", 3, "formGroup", "formSubmitted"], [3, "title"]], template: function CompanyComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "anatoly-card", 0);
             i0.ɵɵtemplate(1, CompanyComponent_anatoly_card_header_1_Template, 1, 1, "anatoly-card-header", 1);
@@ -8357,12 +8687,12 @@ class CompanyComponent extends EditComponentBase {
             i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(20, _c0, ctx.isControlInvalid("company_websiteUrl")));
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted);
-        } }, dependencies: [i1$2.NgClass, i1$2.NgIf, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.NgControlStatusGroup, i2$1.PatternValidator, i2$1.FormGroupDirective, i2$1.FormControlName, CardComponent, CardHeaderComponent, CardBodyComponent, NativeElementDirective, ItemValidationSummaryComponent], encapsulation: 2 }); }
+        } }, dependencies: [i1$2.NgClass, i1$2.NgIf, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.PatternValidator, i2.FormGroupDirective, i2.FormControlName, CardComponent, CardHeaderComponent, CardBodyComponent, NativeElementDirective, ItemValidationSummaryComponent], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CompanyComponent, [{
         type: Component,
         args: [{ selector: 'anatoly-forms-company', template: "<anatoly-card classes='card-primary card-outline'>\r\n  <anatoly-card-header *ngIf='isTitleVisible' [title]='title'></anatoly-card-header>\r\n  <anatoly-card-body>\r\n    <div  [formGroup]='formGroup'  class='row'>\r\n      <div class='form-group col-6' [ngClass]=\"{'has-error': isControlInvalid('company_name') }\">\r\n        <label class='col-form-label'>Name</label>\r\n        <input type='text' class='form-control' formControlName='company_name' placeholder='Company Name'>\r\n        <anatoly-item-validation-summary controlName='company_name'\r\n                                         controlTitle='Company Name'\r\n                                         [formGroup]='formGroup'\r\n                                         [formSubmitted]='formSubmitted'>\r\n        </anatoly-item-validation-summary>\r\n      </div>\r\n      <div class='form-group col-6' [ngClass]=\"{'has-error': isControlInvalid('company_phone') }\">\r\n        <label class='col-form-label'>Phone</label>\r\n        <input type='tel' class='form-control' formControlName='company_phone' placeholder='Company Phone'>\r\n        <anatoly-item-validation-summary controlName='company_phone'\r\n                                         controlTitle='Company Phone'\r\n                                         [formGroup]='formGroup'\r\n                                         [formSubmitted]='formSubmitted'>\r\n        </anatoly-item-validation-summary>\r\n      </div>\r\n      <div class='form-group col-6' [ngClass]=\"{'has-error': isControlInvalid('company_email') }\">\r\n        <label class='col-form-label'>Email</label>\r\n        <input type='email' class='form-control' formControlName='company_email' placeholder='Company Email'>\r\n        <anatoly-item-validation-summary controlName='company_email'\r\n                                         controlTitle='Company Email'\r\n                                         [formGroup]='formGroup'\r\n                                         [formSubmitted]='formSubmitted'>\r\n        </anatoly-item-validation-summary>\r\n      </div>\r\n      <div class='form-group col-6' [ngClass]=\"{'has-error': isControlInvalid('company_websiteUrl') }\">\r\n        <label class='col-form-label'>Website Url</label>\r\n        <input type='url' placeholder='https://example.com' pattern='https://.*' size='30'\r\n               class='form-control' formControlName='company_websiteUrl'>\r\n        <anatoly-item-validation-summary controlName='company_websiteUrl'\r\n                                         controlTitle='Company website url'\r\n                                         [formGroup]='formGroup'\r\n                                         [formSubmitted]='formSubmitted'>\r\n        </anatoly-item-validation-summary>\r\n      </div>\r\n\r\n    </div>\r\n  </anatoly-card-body>\r\n</anatoly-card>\r\n" }]
-    }], () => [{ type: i2$1.FormBuilder }], { company: [{
+    }], () => [{ type: i2.FormBuilder }], { company: [{
             type: Input
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompanyComponent, { className: "CompanyComponent", filePath: "lib\\ui\\forms\\components\\company\\company.component.ts", lineNumber: 28 }); })();
@@ -9183,11 +9513,14 @@ class KendoModule {
 </file>
 */
 const COMPONENTS$1 = [
+    OrderSummaryComponent,
+    PaymentMethodsComponent,
+    PaymentOptionsComponent,
     PaypalButtonComponent,
     PayPalComponent,
     //Dialogs
     BraintreeDialog,
-    StripeDialog
+    StripeDialog,
 ];
 
 /*
@@ -9214,6 +9547,8 @@ class AnatolyBillingModule {
             PayPalScriptService,
             PaymentsService
         ], imports: [CommonModule,
+            ReactiveFormsModule,
+            FormsModule,
             FaModule,
             KendoModule] }); }
 }
@@ -9222,6 +9557,8 @@ class AnatolyBillingModule {
         args: [{
                 imports: [
                     CommonModule,
+                    ReactiveFormsModule,
+                    FormsModule,
                     FaModule,
                     KendoModule
                 ],
@@ -9238,9 +9575,11 @@ class AnatolyBillingModule {
                 ]
             }]
     }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(AnatolyBillingModule, { declarations: [PaypalButtonComponent, PayPalComponent, BraintreeDialog, StripeDialog], imports: [CommonModule,
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(AnatolyBillingModule, { declarations: [OrderSummaryComponent, PaymentMethodsComponent, PaymentOptionsComponent, PaypalButtonComponent, PayPalComponent, BraintreeDialog, StripeDialog], imports: [CommonModule,
+        ReactiveFormsModule,
+        FormsModule,
         FaModule,
-        KendoModule], exports: [PaypalButtonComponent, PayPalComponent, BraintreeDialog, StripeDialog] }); })();
+        KendoModule], exports: [OrderSummaryComponent, PaymentMethodsComponent, PaymentOptionsComponent, PaypalButtonComponent, PayPalComponent, BraintreeDialog, StripeDialog] }); })();
 
 /*
 <file>
@@ -9516,5 +9855,5 @@ class AnatolyModule {
  * Generated bundle index. Do not edit.
  */
 
-export { AddressComponent, AdminGuard, Alerts, AnatolyBillingModule, AnatolyCoreModule, AnatolyDataModule, AnatolyHttpInterceptor, AnatolyIAMModule, AnatolyIAMPagesModule, AnatolyModule, AnatolyUIModule, ApiServiceBase, ApiUrl, AppContextService, AppCoreSettings, AppName, AppSettings, AppVersion, AuthService, AuthenticationGuard, BaseGoService, BillingUtils, BraintreeDialog, Browser, BuyAccessButtonComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CheckIconComponent, ClientApps, CompanyComponent, ComponentBase, ContactUsDialog, ContactUsForm, Convert, Copy2ClipboardComponent, CoreApiService, CountryDropdownlist, CurrenciesApiService, CurrenciesStorageService, DOM, DataPagerComponent, DataViewType, DateConvert, DefaultEditorOptions, DialogBase, DigitalMarketingService, DiscountCodeStatus, DiscountCodeType, DiscountCodesApiService, EditComponentBase, EditPageBase, EmailsApiService, EnumEditComponentBase, FileSizePipe, FormValidationSummaryComponent, FormsHtmlEditorComponent, GABillingEvents, GAEvents, GlobalErrorHandler, GoogleAnalyticsService, GridEditServiceBase, GridReadServiceBase, Guid, HoveringDirective, HtmlEditorComponent, HtmlEditorComponentBase, IdleService, InjectorInstance, IsDevMode, IsProdMode, ItemValidationSummaryComponent, L10NUrl, L10nUtils, ListBase, LoadingComponent, LoadingService, LocalStorageService, LocalizationInjectorInstance, LocalizationModule, LocalizationService, LocalizationSettingsModule, LocalizePipe, LoggingService, MSALUtils, NativeElementDirective, NodataComponent, NotificationService, PageBase, PageSpinnerComponent, PagedPageBase, PayPalComponent, PayPalScriptService, PaymentMethod, PaymentStage, PaymentType, PaymentsApiService, PaymentsService, PaypalButtonComponent, QSUtils, ReplaceTextPipe, SafeHtmlPipe, ScriptService, SessionStorageService, SignInButtonComponent, SignOutButtonComponent, SignUpButtonComponent, StarterGuard, StarterService, Stopwatch, StripeDialog, Subs, SubscribePlanButtonComponent, TimezoneDropdownlist, TransactionsApiService, UrlSlugComponent, Utils, ValidationSummaryComponent, XmlFormatter, dateFormats, dateTimeFormats, getAppSettingsById, getAppSettingsByName, is, localizationInitializerFactory, throwIfAlreadyLoaded, timeFormats, translateLoaderFactory };
+export { AddressComponent, AdminGuard, Alerts, AnatolyBillingModule, AnatolyCoreModule, AnatolyDataModule, AnatolyHttpInterceptor, AnatolyIAMModule, AnatolyIAMPagesModule, AnatolyModule, AnatolyUIModule, ApiServiceBase, ApiUrl, AppContextService, AppCoreSettings, AppName, AppSettings, AppVersion, AuthService, AuthenticationGuard, BaseGoService, BillingUtils, BraintreeDialog, Browser, BuyAccessButtonComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CheckIconComponent, ClientApps, CompanyComponent, ComponentBase, ContactUsDialog, ContactUsForm, Convert, Copy2ClipboardComponent, CoreApiService, CountryDropdownlist, CurrenciesApiService, CurrenciesStorageService, DOM, DataPagerComponent, DataViewType, DateConvert, DefaultEditorOptions, DialogBase, DigitalMarketingService, DiscountCodeStatus, DiscountCodeType, DiscountCodesApiService, EditComponentBase, EditPageBase, EmailsApiService, EnumEditComponentBase, FileSizePipe, FormValidationSummaryComponent, FormsHtmlEditorComponent, GABillingEvents, GAEvents, GlobalErrorHandler, GoogleAnalyticsService, GridEditServiceBase, GridReadServiceBase, Guid, HoveringDirective, HtmlEditorComponent, HtmlEditorComponentBase, IdleService, InjectorInstance, IsDevMode, IsProdMode, ItemValidationSummaryComponent, L10NUrl, L10nUtils, ListBase, LoadingComponent, LoadingService, LocalStorageService, LocalizationInjectorInstance, LocalizationModule, LocalizationService, LocalizationSettingsModule, LocalizePipe, LoggingService, MSALUtils, NativeElementDirective, NodataComponent, NotificationService, OrderSummaryComponent, PageBase, PageSpinnerComponent, PagedPageBase, PayPalComponent, PayPalScriptService, PaymentMethod, PaymentMethodsComponent, PaymentOptionsComponent, PaymentStage, PaymentType, PaymentsApiService, PaymentsService, PaypalButtonComponent, QSUtils, ReplaceTextPipe, SafeHtmlPipe, ScriptService, SessionStorageService, SignInButtonComponent, SignOutButtonComponent, SignUpButtonComponent, StarterGuard, StarterService, Stopwatch, StripeDialog, Subs, SubscribePlanButtonComponent, TimezoneDropdownlist, TransactionsApiService, UrlSlugComponent, Utils, ValidationSummaryComponent, XmlFormatter, dateFormats, dateTimeFormats, getAppSettingsById, getAppSettingsByName, is, localizationInitializerFactory, throwIfAlreadyLoaded, timeFormats, translateLoaderFactory };
 //# sourceMappingURL=osovitny-anatoly.mjs.map