digipay-utility-payment 0.0.5 → 0.0.7

package/fesm2022/digipay-utility-payment.mjs

@@ -198,6 +198,9 @@ class UserService {
     getUserByIdUsingJava(id, params = {}) {
         return this.http.get(`${this.baseUrl}/user/user_detail/${id}`, { params, headers: this.defaultHeaders });
     }
+    getUserConfig(params = {}) {
+        return this.http.get(`${this.baseUrl}/user/user_config`, { params, headers: this.defaultHeaders });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: UserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: UserService, providedIn: 'root' });
 }
@@ -240,6 +243,28 @@ class WalletService {
     getWalletUsingJava(params = {}) {
         return this.http.get(`${this.baseUrl}/transaction/wallet`, { params, headers: this.defaultHeaders });
     }
+    calculateCharges(params = {}) {
+        return this.http.post(`${this.baseUrl}/transaction/calculate_charges`, params, {
+            headers: this.defaultHeaders,
+        });
+    }
+    calculateAgentCharges(params = {}) {
+        return this.http.post(`${this.baseUrl}/transaction/agent_calculate_charges`, params, {
+            headers: this.defaultHeaders,
+        });
+    }
+    getAgentChargesListUsingJava(params = {}) {
+        return this.http.get(`${this.baseUrl}/agent_profile_threshold/agent_charges`, {
+            params,
+            headers: this.defaultHeaders,
+        });
+    }
+    getAgentChargeDetailsByIdUsingJava(params) {
+        return this.http.get(`${this.baseUrl}/agent_profile_threshold/agent_charges_detail`, {
+            params,
+            headers: this.defaultHeaders,
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WalletService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WalletService, providedIn: 'root' });
 }
@@ -676,6 +701,9 @@ class TranslationService {
         COMMON_LABEL_PLEASE_ENTER: 'Please enter',
         COMMON_LABEL_AMOUNT_MUST_BE_BETWEEN: 'Amount must be between',
         COMMON_LABEL_AND: 'and',
+        STATUS_UPDATED_SUCCESSFULLY: 'Status updated successfully',
+        TOP_UP_COMPANY_BILL_PAYMENT_WORKFLOW_SCREEN_MAPPING_DATA_NOT_FOUND: 'Top-up company bill payment workflow screen mapping data not found',
+        BILL_NOT_FOUND: 'Bill not found'
     };
     translate(key) {
         return TranslationService.LABELS[key] ?? key;
@@ -1173,7 +1201,7 @@ class VendorProvidersComponent {
         this.destroy$.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: VendorProvidersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: VendorProvidersComponent, isStandalone: true, selector: "sdk-vendor-providers", ngImport: i0, template: "<div class=\"content vendor-providers-content\">\n  <header class=\"page-header vendor-providers-page-header d-flex align-items-center justify-content-start container-fluid\">\n    <h1 class=\"page-title m-0\">{{ 'LABEL_UTILITIES' | translate }}</h1>\n  </header>\n\n  <section class=\"page-content container-fluid\">\n    <div class=\"card vendor-providers-card\">\n      <div class=\"card-header vendor-providers-card-header\">\n        <h4 class=\"card-title vendor-providers-category-title m-0\">{{vendorCategory?.category_name}}</h4>\n      </div>\n      <div class=\"tab-content\">\n        <div class=\"tab-pane fadeIn active show\">\n          <form role=\"form\" class=\"form-horizontal\">\n            <div class=\"card-body vendor-providers-card-body\">\n              <div class=\"row justify-content-center\">\n                <div class=\"col-12 col-md-10 col-lg-8 vendor-providers-select-col\">\n                  @if (loadingState) {\n                    <div class=\"provider-select-wrapper text-center\">\n                      <div class=\"shimmer shimmer-effect mx-auto\" style=\"height: 20px; width: 100px; margin-bottom: 0.5rem;\"></div>\n                      <div class=\"shimmer shimmer-effect provider-shimmer-select\" style=\"margin: 0 auto;\"></div>\n                    </div>\n                  } @else {\n                    <div class=\"provider-select-wrapper d-flex align-items-center justify-content-center flex-wrap gap-2\">\n                      @if (currentVendorKey == \"airtime_credit\" || currentVendorKey == \"airtime_data\") {\n                        <label class=\"provider-label mb-0\">{{ 'LABEL_OPERATOR' | translate }}</label>\n                        <ng-select\n                          name=\"utilityVendorOperator\"\n                          [(ngModel)]=\"vendorObject\"\n                          [placeholder]=\"'LABEL_SELECT_OPERATOR' | translate\"\n                          bindLabel=\"provider_name\"\n                          [items]=\"vendorProviders\"\n                          [compareWith]=\"compareWith\"\n                          clearable=\"true\"\n                          class=\"provider-select\"\n                          (change)=\"changeVendorProvider($event)\">\n                        </ng-select>\n                      } @else {\n                        <label class=\"provider-label mb-0\">{{ 'LABEL_PROVIDER' | translate }}</label>\n                        <ng-select\n                          name=\"utilityVendorProvider\"\n                          [(ngModel)]=\"vendorObject\"\n                          [placeholder]=\"'LABEL_SELECT_PROVIDER' | translate\"\n                          bindLabel=\"provider_name\"\n                          [items]=\"vendorProviders\"\n                          [compareWith]=\"compareWith\"\n                          clearable=\"true\"\n                          class=\"provider-select\"\n                          (change)=\"changeVendorProvider($event)\">\n                        </ng-select>\n                      }\n                    </div>\n                  }\n                </div>\n\n                @if (recentTxnArray.length > 0) {\n                  <div class=\"col-12 mt-2 vendor-providers-recent-section\">\n                    <div class=\"border-bottom pb-2 mb-2\">\n                      <h4 class=\"card-title vendor-providers-recent-title font-weight-600 m-0 text-dark\">\n                        {{ 'LABEL_RECENT_TRANSACTIONS' | translate }}\n                      </h4>\n                    </div>\n                    <div class=\"row g-2\">\n                      @for (obj of recentTxnArray; track obj) {\n                        <a (click)=\"handleRecentTxnClick(obj)\">\n                          <div class=\"card services-box text-center equal-height\">\n                            <div class=\"card-body\">\n                              <div class=\"icon\">\n                                @if (obj?.payment_request?.vendor_provider_image) {\n                                  <img loading=\"lazy\"\n                                    class=\"vendor-recent-txn-icon\"\n                                    [src]=\"obj?.payment_request?.vendor_provider_image\"\n                                    alt=\"\" />\n                                } @else {\n                                  <i class=\"align-middle fa fa-bookmark vendor-recent-txn-fallback-icon\"></i>\n                                }\n                              </div>\n                              <h5 class=\"font-weight-600 vendor-recent-txn-name mb-1 mt-2\">{{\n                              obj?.payment_request?.provider_name || \"-\" }}</h5>\n                              <h6 class=\"m-0 mb-0 vendor-recent-txn-meta text-muted\">{{\n                              obj?.payment_request?.account_number }}</h6>\n                              <h6 class=\"m-0 vendor-recent-txn-meta text-muted\">{{obj?.receiver_amount || 0.00 |\n                              price: { currency } }}</h6>\n                            </div>\n                          </div>\n                        </a>\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n            <div class=\"card-footer vendor-providers-footer bg-light d-flex justify-content-end gap-2\">\n              <button type=\"button\" class=\"btn btn-secondary btn-sm\" (click)=\"back()\">{{'COMMON_LABEL_CANCEL' | translate}}</button>\n              <button type=\"button\" (click)=\"navigateToWorkFlow()\" class=\"btn btn-primary btn-sm\">{{'COMMON_LABEL_NEXT' | translate}}</button>\n            </div>\n          </form>\n        </div>\n      </div>\n    </div>\n  </section>\n</div>\n\n<style>\n  .vendor-providers-content {\n    overflow: visible;\n    min-height: auto;\n  }\n\n  .vendor-providers-page-header {\n    margin-bottom: 0.5rem;\n  }\n\n  .vendor-providers-select-col {\n    margin-top: 0;\n  }\n\n  .vendor-providers-card {\n    border: 1px solid #e9ecef;\n    border-radius: 8px;\n    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);\n    overflow: visible;\n    min-height: 0;\n  }\n\n  .vendor-providers-card-header {\n    background: #f8f9fa;\n    border-bottom: 1px solid #e9ecef;\n    padding: 0.5rem 0.75rem;\n    font-weight: 600;\n    font-size: 0.9rem;\n    color: #212529;\n  }\n\n  .vendor-providers-category-title {\n    font-size: 0.95rem;\n    font-weight: 600;\n  }\n\n  .vendor-providers-card-body {\n    padding: 0.65rem 0.75rem;\n    overflow: visible;\n    min-height: 0;\n  }\n\n  .page-title {\n    font-size: 1rem;\n    font-weight: 600;\n    color: #1a1a1a;\n  }\n\n  .provider-select-wrapper {\n    padding: 0.15rem 0;\n  }\n\n  .provider-label {\n    font-weight: 500;\n    font-size: 0.8rem;\n    color: #495057;\n  }\n\n  .provider-select {\n    width: 100%;\n    max-width: 190px;\n    min-width: 0;\n    font-size: 0.75rem;\n  }\n\n  .provider-select ::ng-deep .ng-select-container {\n    align-items: center;\n    min-height: 26px;\n    height: 26px;\n    font-size: 0.75rem;\n    border-radius: 4px;\n  }\n\n  .provider-select ::ng-deep .ng-value-container {\n    padding-left: 0.4rem;\n    padding-top: 0;\n    padding-right: 0;\n  }\n\n  .provider-select ::ng-deep .ng-value-container .ng-value {\n    font-size: 0.75rem;\n    line-height: 1.2;\n  }\n\n  .provider-select ::ng-deep .ng-input {\n    top: 0;\n    padding-left: 0.4rem;\n  }\n\n  .provider-select ::ng-deep .ng-input > input {\n    font-size: 0.75rem;\n    min-height: 24px;\n    padding: 0.1rem 0;\n  }\n\n  .provider-select ::ng-deep .ng-placeholder {\n    font-size: 0.75rem;\n    line-height: 1.2;\n  }\n\n  .provider-select ::ng-deep .ng-arrow-wrapper {\n    width: 20px;\n    padding-right: 0.35rem;\n  }\n\n  .provider-select ::ng-deep .ng-clear-wrapper {\n    width: 18px;\n  }\n\n  .provider-shimmer-select {\n    height: 26px;\n    width: 100%;\n    max-width: 190px;\n  }\n\n  .vendor-providers-footer {\n    padding: 0.35rem 0.6rem;\n  }\n\n  .vendor-providers-footer .btn {\n    font-size: 0.75rem;\n    padding: 0.2rem 0.55rem;\n    line-height: 1.2;\n    border-radius: 4px;\n  }\n\n  .vendor-providers-recent-title {\n    font-size: 0.9rem;\n  }\n\n  .vendor-providers-recent-section .card-body {\n    padding: 0.65rem 0.5rem;\n  }\n\n  .vendor-recent-txn-icon {\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n\n  .vendor-recent-txn-fallback-icon {\n    font-size: 1.1rem;\n    color: #6c757d;\n  }\n\n  .vendor-recent-txn-name {\n    font-size: 0.8rem;\n    line-height: 1.25;\n  }\n\n  .vendor-recent-txn-meta {\n    font-size: 0.72rem;\n    line-height: 1.2;\n  }\n\n  .shimmer-effect {\n    border-radius: 10px;\n    background-color: #F6F7F8;\n    background-image: linear-gradient(to right, #F6F7F8 0, #EDEEF1 20%, #F6F7F8 40%, #F6F7F8 100%);\n    background-position: 0 0;\n    background-repeat: no-repeat;\n    background-size: 1000px 1000px;\n    animation: shimmerEffect 1s linear infinite forwards;\n  }\n\n  .shimmer {\n    display: inline-block;\n    width: 100%;\n    height: 12px;\n  }\n\n  @keyframes shimmerEffect {\n    0% {\n      background-position: -1000px 0;\n    }\n    100% {\n      background-position: 1000px 0;\n    }\n  }\n</style>\n", styles: [".vendor-providers-content{overflow:visible;min-height:auto}.vendor-providers-page-header{margin-bottom:.5rem}.vendor-providers-select-col{margin-top:0}.vendor-providers-card{border:1px solid #e9ecef;border-radius:8px;box-shadow:0 1px 4px #0000000d;overflow:visible;min-height:0}.vendor-providers-card-header{background:#f8f9fa;border-bottom:1px solid #e9ecef;padding:.5rem .75rem;font-weight:600;font-size:.9rem;color:#212529}.vendor-providers-category-title{font-size:.95rem;font-weight:600}.vendor-providers-card-body{padding:.65rem .75rem;overflow:visible;min-height:0}.page-title{font-size:1rem;font-weight:600;color:#1a1a1a}.provider-select-wrapper{padding:.15rem 0}.provider-label{font-weight:500;font-size:.8rem;color:#495057}.provider-select{width:100%;max-width:190px;min-width:0;font-size:.75rem}.provider-select ::ng-deep .ng-select-container{align-items:center;min-height:26px;height:26px;font-size:.75rem;border-radius:4px}.provider-select ::ng-deep .ng-value-container{padding-left:.4rem;padding-top:0;padding-right:0}.provider-select ::ng-deep .ng-value-container .ng-value{font-size:.75rem;line-height:1.2}.provider-select ::ng-deep .ng-input{top:0;padding-left:.4rem}.provider-select ::ng-deep .ng-input>input{font-size:.75rem;min-height:24px;padding:.1rem 0}.provider-select ::ng-deep .ng-placeholder{font-size:.75rem;line-height:1.2}.provider-select ::ng-deep .ng-arrow-wrapper{width:20px;padding-right:.35rem}.provider-select ::ng-deep .ng-clear-wrapper{width:18px}.provider-shimmer-select{height:26px;width:100%;max-width:190px}.vendor-providers-footer{padding:.35rem .6rem}.vendor-providers-footer .btn{font-size:.75rem;padding:.2rem .55rem;line-height:1.2;border-radius:4px}.vendor-providers-recent-title{font-size:.9rem}.vendor-providers-recent-section .card-body{padding:.65rem .5rem}.vendor-recent-txn-icon{width:36px;height:36px;border-radius:50%;object-fit:cover}.vendor-recent-txn-fallback-icon{font-size:1.1rem;color:#6c757d}.vendor-recent-txn-name{font-size:.8rem;line-height:1.25}.vendor-recent-txn-meta{font-size:.72rem;line-height:1.2}.shimmer-effect{border-radius:10px;background-color:#f6f7f8;background-image:linear-gradient(to right,#f6f7f8 0,#edeef1 20%,#f6f7f8 40% 100%);background-position:0 0;background-repeat:no-repeat;background-size:1000px 1000px;animation:shimmerEffect 1s linear infinite forwards}.shimmer{display:inline-block;width:100%;height:12px}@keyframes shimmerEffect{0%{background-position:-1000px 0}to{background-position:1000px 0}}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i1$1.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyBootstrapModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: PricePipe, name: "price" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: VendorProvidersComponent, isStandalone: true, selector: "sdk-vendor-providers", ngImport: i0, template: "<div class=\"content\">\n  <header class=\"page-header\">\n    <div class=\"d-flex align-items-center flex-wrap\">\n      <div class=\"mr-auto\">\n        <h1>Utilities</h1>\n      </div>\n    </div>\n  </header>\n\n  <section class=\"page-content container-fluid\">\n\n    <div class=\"card m-0 border-0\">\n      <div class=\"card-header p-t-25 p-b-20\">\n        <h4 class=\"card-title font-weight-600 font-size-18 m-0 text-dark\">{{vendorCategory?.category_name}}</h4>\n      </div>\n      <div class=\"tab-content\">\n        <div class=\"tab-pane fadeIn active show\">\n          <form role=\"form\" class=\"form-horizontal\">\n            <div class=\"card-body\">\n              <div class=\"mt-3\">\n                <div class=\"row\">\n                  <div class=\"col-xl-10 offset-xl-1\">\n                    @if (loadingState) {\n                      <div class=\"form-group form-row\">\n                        <div class=\"control-label text-md-right col-md-4 col-lg-3\">\n                          <div class=\"shimmer shimmer-effect\" style=\"height: 20px; width: 80px; margin-top: 8px;\"></div>\n                        </div>\n                        <div class=\"col-md-5\">\n                          <div class=\"shimmer shimmer-effect\" style=\"height: 38px; width: 100%;\"></div>\n                        </div>\n                      </div>\n                    } @else {\n                      @if (currentVendorKey == \"airtime_credit\" || currentVendorKey == \"airtime_data\" ) {\n                    <div class=\"form-group form-row\">\n                      <label\n                            class=\"control-label text-md-right col-md-4 col-lg-3\">\n                            {{'LABEL_OPERATOR' | translate}}\n                          </label>\n                      <div class=\"col-md-5\">\n                            <ng-select \n                              [placeholder]=\"'LABEL_SELECT_OPERATOR' | translate\" \n                              bindLabel=\"provider_name\"\n                              bindValue=\"id\" \n                              [items]=\"vendorProviders\"\n                          (change)=\"changeVendorProvider($event)\">\n                        </ng-select>\n                      </div>\n                    </div>\n                      } @else {\n                    <div class=\"form-group form-row\">\n                      <label\n                            class=\"control-label text-md-right col-md-4 col-lg-3\">\n                            {{'LABEL_PROVIDER' | translate}}\n                          </label>\n                      <div class=\"col-md-5\">\n                            <ng-select \n                              [placeholder]=\"'LABEL_SELECT_PROVIDER' | translate\" \n                              bindLabel=\"provider_name\"\n                              bindValue=\"id\" \n                              [items]=\"vendorProviders\"\n                          (change)=\"changeVendorProvider($event)\">\n                        </ng-select>\n                      </div>\n                    </div>\n                      }\n                  }\n                  </div>\n\n                  @if (recentTxnArray.length > 0) {\n                    <div class=\"col-xl-12\">\n                      <div class=\"border-bottom p-t-25 p-b-20\">\n                        <h4 class=\"card-title font-weight-600 font-size-18 m-0 text-dark\">\n                        {{'LABEL_RECENT_TRANSACTIONS' | translate}}</h4>\n                      </div>\n                    </div>\n                    <div class=\"row\">\n                      @for (obj of recentTxnArray; track obj) {\n                        <a (click)=\"handleRecentTxnClick(obj)\">\n                          <div class=\"card services-box text-center equal-height\">\n                            <div class=\"card-body\">\n                              <div class=\"icon\">\n                                @if (obj?.payment_request?.vendor_provider_image) {\n                                  <img loading=\"lazy\"\n                                    style=\"width: 50px; height: 50px; border-radius: 50%;\"\n                                    [src]=\"obj?.payment_request?.vendor_provider_image\"\n                                    alt=\"\" />\n                                } @else {\n                                  <i class=\"align-middle fa fa-2x fa-bookmark\"></i>\n                                }\n                              </div>\n                              <h5 class=\"font-weight-600 mb-2 mt-3\">{{\n                              obj?.payment_request?.provider_name || \"-\" }}</h5>\n                              <h6 class=\"m-0 mb-1 text-muted\">{{\n                              obj?.payment_request?.account_number }}</h6>\n                              <h6 class=\"m-0 text-muted\">{{obj?.receiver_amount || 0.00 |\n                              price: { currency } }}</h6>\n                            </div>\n                          </div>\n                        </a>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n            <div class=\"card-footer bg-light text-right\">\n              <button type=\"button\" class=\"btn btn-secondary\" (click)=\"back()\">{{'COMMON_LABEL_CANCEL' | translate}}</button>\n              <button type=\"button\" (click)=\"navigateToWorkFlow()\"\n                class=\"btn btn-primary\">{{'COMMON_LABEL_NEXT' |translate}}</button>\n            </div>\n          </form>\n        </div>\n      </div>\n    </div>\n  </section>\n</div>\n\n<style>\n  .shimmer-effect {\n    border-radius: 10px;\n    background-color: #F6F7F8;\n    background-image: linear-gradient(to right, #F6F7F8 0, #EDEEF1 20%, #F6F7F8 40%, #F6F7F8 100%);\n    background-position: 0 0;\n    background-repeat: no-repeat;\n    background-size: 1000px 1000px;\n    animation: shimmerEffect 1s linear infinite forwards;\n  }\n\n  .shimmer {\n    display: inline-block;\n    width: 100%;\n    height: 12px;\n  }\n\n  @keyframes shimmerEffect {\n    0% {\n      background-position: -1000px 0;\n    }\n    100% {\n      background-position: 1000px 0;\n    }\n  }\n</style>", styles: [".shimmer-effect{border-radius:10px;background-color:#f6f7f8;background-image:linear-gradient(to right,#f6f7f8 0,#edeef1 20%,#f6f7f8 40% 100%);background-position:0 0;background-repeat:no-repeat;background-size:1000px 1000px;animation:shimmerEffect 1s linear infinite forwards}.shimmer{display:inline-block;width:100%;height:12px}@keyframes shimmerEffect{0%{background-position:-1000px 0}to{background-position:1000px 0}}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i1$1.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyBootstrapModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: PricePipe, name: "price" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: VendorProvidersComponent, decorators: [{
             type: Component,
@@ -1184,7 +1212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         ReactiveFormsModule,
                         FormlyBootstrapModule,
                         FormlyModule
-                    ], template: "<div class=\"content vendor-providers-content\">\n  <header class=\"page-header vendor-providers-page-header d-flex align-items-center justify-content-start container-fluid\">\n    <h1 class=\"page-title m-0\">{{ 'LABEL_UTILITIES' | translate }}</h1>\n  </header>\n\n  <section class=\"page-content container-fluid\">\n    <div class=\"card vendor-providers-card\">\n      <div class=\"card-header vendor-providers-card-header\">\n        <h4 class=\"card-title vendor-providers-category-title m-0\">{{vendorCategory?.category_name}}</h4>\n      </div>\n      <div class=\"tab-content\">\n        <div class=\"tab-pane fadeIn active show\">\n          <form role=\"form\" class=\"form-horizontal\">\n            <div class=\"card-body vendor-providers-card-body\">\n              <div class=\"row justify-content-center\">\n                <div class=\"col-12 col-md-10 col-lg-8 vendor-providers-select-col\">\n                  @if (loadingState) {\n                    <div class=\"provider-select-wrapper text-center\">\n                      <div class=\"shimmer shimmer-effect mx-auto\" style=\"height: 20px; width: 100px; margin-bottom: 0.5rem;\"></div>\n                      <div class=\"shimmer shimmer-effect provider-shimmer-select\" style=\"margin: 0 auto;\"></div>\n                    </div>\n                  } @else {\n                    <div class=\"provider-select-wrapper d-flex align-items-center justify-content-center flex-wrap gap-2\">\n                      @if (currentVendorKey == \"airtime_credit\" || currentVendorKey == \"airtime_data\") {\n                        <label class=\"provider-label mb-0\">{{ 'LABEL_OPERATOR' | translate }}</label>\n                        <ng-select\n                          name=\"utilityVendorOperator\"\n                          [(ngModel)]=\"vendorObject\"\n                          [placeholder]=\"'LABEL_SELECT_OPERATOR' | translate\"\n                          bindLabel=\"provider_name\"\n                          [items]=\"vendorProviders\"\n                          [compareWith]=\"compareWith\"\n                          clearable=\"true\"\n                          class=\"provider-select\"\n                          (change)=\"changeVendorProvider($event)\">\n                        </ng-select>\n                      } @else {\n                        <label class=\"provider-label mb-0\">{{ 'LABEL_PROVIDER' | translate }}</label>\n                        <ng-select\n                          name=\"utilityVendorProvider\"\n                          [(ngModel)]=\"vendorObject\"\n                          [placeholder]=\"'LABEL_SELECT_PROVIDER' | translate\"\n                          bindLabel=\"provider_name\"\n                          [items]=\"vendorProviders\"\n                          [compareWith]=\"compareWith\"\n                          clearable=\"true\"\n                          class=\"provider-select\"\n                          (change)=\"changeVendorProvider($event)\">\n                        </ng-select>\n                      }\n                    </div>\n                  }\n                </div>\n\n                @if (recentTxnArray.length > 0) {\n                  <div class=\"col-12 mt-2 vendor-providers-recent-section\">\n                    <div class=\"border-bottom pb-2 mb-2\">\n                      <h4 class=\"card-title vendor-providers-recent-title font-weight-600 m-0 text-dark\">\n                        {{ 'LABEL_RECENT_TRANSACTIONS' | translate }}\n                      </h4>\n                    </div>\n                    <div class=\"row g-2\">\n                      @for (obj of recentTxnArray; track obj) {\n                        <a (click)=\"handleRecentTxnClick(obj)\">\n                          <div class=\"card services-box text-center equal-height\">\n                            <div class=\"card-body\">\n                              <div class=\"icon\">\n                                @if (obj?.payment_request?.vendor_provider_image) {\n                                  <img loading=\"lazy\"\n                                    class=\"vendor-recent-txn-icon\"\n                                    [src]=\"obj?.payment_request?.vendor_provider_image\"\n                                    alt=\"\" />\n                                } @else {\n                                  <i class=\"align-middle fa fa-bookmark vendor-recent-txn-fallback-icon\"></i>\n                                }\n                              </div>\n                              <h5 class=\"font-weight-600 vendor-recent-txn-name mb-1 mt-2\">{{\n                              obj?.payment_request?.provider_name || \"-\" }}</h5>\n                              <h6 class=\"m-0 mb-0 vendor-recent-txn-meta text-muted\">{{\n                              obj?.payment_request?.account_number }}</h6>\n                              <h6 class=\"m-0 vendor-recent-txn-meta text-muted\">{{obj?.receiver_amount || 0.00 |\n                              price: { currency } }}</h6>\n                            </div>\n                          </div>\n                        </a>\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n            <div class=\"card-footer vendor-providers-footer bg-light d-flex justify-content-end gap-2\">\n              <button type=\"button\" class=\"btn btn-secondary btn-sm\" (click)=\"back()\">{{'COMMON_LABEL_CANCEL' | translate}}</button>\n              <button type=\"button\" (click)=\"navigateToWorkFlow()\" class=\"btn btn-primary btn-sm\">{{'COMMON_LABEL_NEXT' | translate}}</button>\n            </div>\n          </form>\n        </div>\n      </div>\n    </div>\n  </section>\n</div>\n\n<style>\n  .vendor-providers-content {\n    overflow: visible;\n    min-height: auto;\n  }\n\n  .vendor-providers-page-header {\n    margin-bottom: 0.5rem;\n  }\n\n  .vendor-providers-select-col {\n    margin-top: 0;\n  }\n\n  .vendor-providers-card {\n    border: 1px solid #e9ecef;\n    border-radius: 8px;\n    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);\n    overflow: visible;\n    min-height: 0;\n  }\n\n  .vendor-providers-card-header {\n    background: #f8f9fa;\n    border-bottom: 1px solid #e9ecef;\n    padding: 0.5rem 0.75rem;\n    font-weight: 600;\n    font-size: 0.9rem;\n    color: #212529;\n  }\n\n  .vendor-providers-category-title {\n    font-size: 0.95rem;\n    font-weight: 600;\n  }\n\n  .vendor-providers-card-body {\n    padding: 0.65rem 0.75rem;\n    overflow: visible;\n    min-height: 0;\n  }\n\n  .page-title {\n    font-size: 1rem;\n    font-weight: 600;\n    color: #1a1a1a;\n  }\n\n  .provider-select-wrapper {\n    padding: 0.15rem 0;\n  }\n\n  .provider-label {\n    font-weight: 500;\n    font-size: 0.8rem;\n    color: #495057;\n  }\n\n  .provider-select {\n    width: 100%;\n    max-width: 190px;\n    min-width: 0;\n    font-size: 0.75rem;\n  }\n\n  .provider-select ::ng-deep .ng-select-container {\n    align-items: center;\n    min-height: 26px;\n    height: 26px;\n    font-size: 0.75rem;\n    border-radius: 4px;\n  }\n\n  .provider-select ::ng-deep .ng-value-container {\n    padding-left: 0.4rem;\n    padding-top: 0;\n    padding-right: 0;\n  }\n\n  .provider-select ::ng-deep .ng-value-container .ng-value {\n    font-size: 0.75rem;\n    line-height: 1.2;\n  }\n\n  .provider-select ::ng-deep .ng-input {\n    top: 0;\n    padding-left: 0.4rem;\n  }\n\n  .provider-select ::ng-deep .ng-input > input {\n    font-size: 0.75rem;\n    min-height: 24px;\n    padding: 0.1rem 0;\n  }\n\n  .provider-select ::ng-deep .ng-placeholder {\n    font-size: 0.75rem;\n    line-height: 1.2;\n  }\n\n  .provider-select ::ng-deep .ng-arrow-wrapper {\n    width: 20px;\n    padding-right: 0.35rem;\n  }\n\n  .provider-select ::ng-deep .ng-clear-wrapper {\n    width: 18px;\n  }\n\n  .provider-shimmer-select {\n    height: 26px;\n    width: 100%;\n    max-width: 190px;\n  }\n\n  .vendor-providers-footer {\n    padding: 0.35rem 0.6rem;\n  }\n\n  .vendor-providers-footer .btn {\n    font-size: 0.75rem;\n    padding: 0.2rem 0.55rem;\n    line-height: 1.2;\n    border-radius: 4px;\n  }\n\n  .vendor-providers-recent-title {\n    font-size: 0.9rem;\n  }\n\n  .vendor-providers-recent-section .card-body {\n    padding: 0.65rem 0.5rem;\n  }\n\n  .vendor-recent-txn-icon {\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n\n  .vendor-recent-txn-fallback-icon {\n    font-size: 1.1rem;\n    color: #6c757d;\n  }\n\n  .vendor-recent-txn-name {\n    font-size: 0.8rem;\n    line-height: 1.25;\n  }\n\n  .vendor-recent-txn-meta {\n    font-size: 0.72rem;\n    line-height: 1.2;\n  }\n\n  .shimmer-effect {\n    border-radius: 10px;\n    background-color: #F6F7F8;\n    background-image: linear-gradient(to right, #F6F7F8 0, #EDEEF1 20%, #F6F7F8 40%, #F6F7F8 100%);\n    background-position: 0 0;\n    background-repeat: no-repeat;\n    background-size: 1000px 1000px;\n    animation: shimmerEffect 1s linear infinite forwards;\n  }\n\n  .shimmer {\n    display: inline-block;\n    width: 100%;\n    height: 12px;\n  }\n\n  @keyframes shimmerEffect {\n    0% {\n      background-position: -1000px 0;\n    }\n    100% {\n      background-position: 1000px 0;\n    }\n  }\n</style>\n" }]
+                    ], template: "<div class=\"content\">\n  <header class=\"page-header\">\n    <div class=\"d-flex align-items-center flex-wrap\">\n      <div class=\"mr-auto\">\n        <h1>Utilities</h1>\n      </div>\n    </div>\n  </header>\n\n  <section class=\"page-content container-fluid\">\n\n    <div class=\"card m-0 border-0\">\n      <div class=\"card-header p-t-25 p-b-20\">\n        <h4 class=\"card-title font-weight-600 font-size-18 m-0 text-dark\">{{vendorCategory?.category_name}}</h4>\n      </div>\n      <div class=\"tab-content\">\n        <div class=\"tab-pane fadeIn active show\">\n          <form role=\"form\" class=\"form-horizontal\">\n            <div class=\"card-body\">\n              <div class=\"mt-3\">\n                <div class=\"row\">\n                  <div class=\"col-xl-10 offset-xl-1\">\n                    @if (loadingState) {\n                      <div class=\"form-group form-row\">\n                        <div class=\"control-label text-md-right col-md-4 col-lg-3\">\n                          <div class=\"shimmer shimmer-effect\" style=\"height: 20px; width: 80px; margin-top: 8px;\"></div>\n                        </div>\n                        <div class=\"col-md-5\">\n                          <div class=\"shimmer shimmer-effect\" style=\"height: 38px; width: 100%;\"></div>\n                        </div>\n                      </div>\n                    } @else {\n                      @if (currentVendorKey == \"airtime_credit\" || currentVendorKey == \"airtime_data\" ) {\n                    <div class=\"form-group form-row\">\n                      <label\n                            class=\"control-label text-md-right col-md-4 col-lg-3\">\n                            {{'LABEL_OPERATOR' | translate}}\n                          </label>\n                      <div class=\"col-md-5\">\n                            <ng-select \n                              [placeholder]=\"'LABEL_SELECT_OPERATOR' | translate\" \n                              bindLabel=\"provider_name\"\n                              bindValue=\"id\" \n                              [items]=\"vendorProviders\"\n                          (change)=\"changeVendorProvider($event)\">\n                        </ng-select>\n                      </div>\n                    </div>\n                      } @else {\n                    <div class=\"form-group form-row\">\n                      <label\n                            class=\"control-label text-md-right col-md-4 col-lg-3\">\n                            {{'LABEL_PROVIDER' | translate}}\n                          </label>\n                      <div class=\"col-md-5\">\n                            <ng-select \n                              [placeholder]=\"'LABEL_SELECT_PROVIDER' | translate\" \n                              bindLabel=\"provider_name\"\n                              bindValue=\"id\" \n                              [items]=\"vendorProviders\"\n                          (change)=\"changeVendorProvider($event)\">\n                        </ng-select>\n                      </div>\n                    </div>\n                      }\n                  }\n                  </div>\n\n                  @if (recentTxnArray.length > 0) {\n                    <div class=\"col-xl-12\">\n                      <div class=\"border-bottom p-t-25 p-b-20\">\n                        <h4 class=\"card-title font-weight-600 font-size-18 m-0 text-dark\">\n                        {{'LABEL_RECENT_TRANSACTIONS' | translate}}</h4>\n                      </div>\n                    </div>\n                    <div class=\"row\">\n                      @for (obj of recentTxnArray; track obj) {\n                        <a (click)=\"handleRecentTxnClick(obj)\">\n                          <div class=\"card services-box text-center equal-height\">\n                            <div class=\"card-body\">\n                              <div class=\"icon\">\n                                @if (obj?.payment_request?.vendor_provider_image) {\n                                  <img loading=\"lazy\"\n                                    style=\"width: 50px; height: 50px; border-radius: 50%;\"\n                                    [src]=\"obj?.payment_request?.vendor_provider_image\"\n                                    alt=\"\" />\n                                } @else {\n                                  <i class=\"align-middle fa fa-2x fa-bookmark\"></i>\n                                }\n                              </div>\n                              <h5 class=\"font-weight-600 mb-2 mt-3\">{{\n                              obj?.payment_request?.provider_name || \"-\" }}</h5>\n                              <h6 class=\"m-0 mb-1 text-muted\">{{\n                              obj?.payment_request?.account_number }}</h6>\n                              <h6 class=\"m-0 text-muted\">{{obj?.receiver_amount || 0.00 |\n                              price: { currency } }}</h6>\n                            </div>\n                          </div>\n                        </a>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n            <div class=\"card-footer bg-light text-right\">\n              <button type=\"button\" class=\"btn btn-secondary\" (click)=\"back()\">{{'COMMON_LABEL_CANCEL' | translate}}</button>\n              <button type=\"button\" (click)=\"navigateToWorkFlow()\"\n                class=\"btn btn-primary\">{{'COMMON_LABEL_NEXT' |translate}}</button>\n            </div>\n          </form>\n        </div>\n      </div>\n    </div>\n  </section>\n</div>\n\n<style>\n  .shimmer-effect {\n    border-radius: 10px;\n    background-color: #F6F7F8;\n    background-image: linear-gradient(to right, #F6F7F8 0, #EDEEF1 20%, #F6F7F8 40%, #F6F7F8 100%);\n    background-position: 0 0;\n    background-repeat: no-repeat;\n    background-size: 1000px 1000px;\n    animation: shimmerEffect 1s linear infinite forwards;\n  }\n\n  .shimmer {\n    display: inline-block;\n    width: 100%;\n    height: 12px;\n  }\n\n  @keyframes shimmerEffect {\n    0% {\n      background-position: -1000px 0;\n    }\n    100% {\n      background-position: 1000px 0;\n    }\n  }\n</style>" }]
         }], ctorParameters: () => [] });
 
 class NoDataComponent {
@@ -1235,7 +1263,7 @@ class FormlyHorizontalWrapperComponent extends FieldWrapper {
           <em class="text-danger">*</em>
         }
       </label>
-      <div class="col-md-8">
+      <div class="col-md-5">
         <ng-template #fieldComponent></ng-template>
         @if (showError) {
           <div class="invalid-feedback d-block">
@@ -1260,7 +1288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           <em class="text-danger">*</em>
         }
       </label>
-      <div class="col-md-8">
+      <div class="col-md-5">
         <ng-template #fieldComponent></ng-template>
         @if (showError) {
           <div class="invalid-feedback d-block">
@@ -1383,25 +1411,435 @@ class CommonLoaderComponent {
     message = 'Please wait...';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CommonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: CommonLoaderComponent, isStandalone: true, selector: "sdk-common-loader", inputs: { message: "message" }, ngImport: i0, template: `
-    <div class="d-flex align-items-center justify-content-center py-4">
-      <div class="spinner-border mr-2" role="status">
-        <span class="sr-only">Loading...</span>
-      </div>
-      <span>{{ message }}</span>
+    <div class="loader-container">
+    <div class="loader-logo">
+        <div class="sk-chase">
+            <div class="sk-chase-dot"></div>
+            <div class="sk-chase-dot"></div>
+            <div class="sk-chase-dot"></div>
+            <div class="sk-chase-dot"></div>
+            <div class="sk-chase-dot"></div>
+            <div class="sk-chase-dot"></div>
+        </div>
+        {{message}}
     </div>
-  `, isInline: true });
+</div>
+
+    
+<style>
+	/*Loader*/
+	.loader-container {
+		position: fixed;
+		z-index: 2000;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		background-color: rgba(255, 255, 255, 0.6);
+	}
+
+	.loader-logo {
+		position: absolute;
+		top: 50%;
+		left: 0;
+		right: 0;
+		margin: 0 auto;
+		z-index: 5;
+		-webkit-transform: translateY(-50%);
+		-moz-transform: translateY(-50%);
+		-ms-transform: translateY(-50%);
+		-o-transform: translateY(-50%);
+		transform: translateY(-50%);
+		text-align: center;
+		font-size: 17px;
+		font-weight: 500;
+	}
+
+	/*Loader Spinner*/
+	.loader-container .spinner {
+		margin: 0 auto;
+		width: 70px;
+		height: 55px;
+		text-align: center;
+		font-size: 20px;
+	}
+
+	.loader-container .spinner>div {
+		background-color: #333;
+		height: 100%;
+		width: 6px;
+		display: inline-block;
+		-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+		animation: sk-stretchdelay 1.2s infinite ease-in-out;
+	}
+
+	.loader-container .spinner .rect2 {
+		-webkit-animation-delay: -1.1s;
+		animation-delay: -1.1s;
+	}
+
+	.loader-container .spinner .rect3 {
+		-webkit-animation-delay: -1.0s;
+		animation-delay: -1.0s;
+	}
+
+	.loader-container .spinner .rect4 {
+		-webkit-animation-delay: -0.9s;
+		animation-delay: -0.9s;
+	}
+
+	.loader-container .spinner .rect5 {
+		-webkit-animation-delay: -0.8s;
+		animation-delay: -0.8s;
+	}
+
+	@-webkit-keyframes sk-stretchdelay {
+
+		0%,
+		40%,
+		100% {
+			-webkit-transform: scaleY(0.4)
+		}
+
+		20% {
+			-webkit-transform: scaleY(1.0)
+		}
+	}
+
+	@keyframes sk-stretchdelay {
+
+		0%,
+		40%,
+		100% {
+			transform: scaleY(0.4);
+			-webkit-transform: scaleY(0.4);
+		}
+
+		20% {
+			transform: scaleY(1.0);
+			-webkit-transform: scaleY(1.0);
+		}
+	}
+
+	/*Loader sk-chase*/
+	.sk-chase {
+		width: 55px;
+		height: 55px;
+		position: relative;
+		margin: 0 auto 20px;
+		animation: sk-chase 2.5s infinite linear both;
+	}
+
+	.sk-chase-dot {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		left: 0;
+		top: 0;
+		animation: sk-chase-dot 2.0s infinite ease-in-out both;
+	}
+
+	.sk-chase-dot:before {
+		content: '';
+		display: block;
+		width: 25%;
+		height: 25%;
+		background-color: #212121;
+		border-radius: 100%;
+		animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
+	}
+
+	.sk-chase-dot:nth-child(1) {
+		animation-delay: -1.1s;
+	}
+
+	.sk-chase-dot:nth-child(2) {
+		animation-delay: -1.0s;
+	}
+
+	.sk-chase-dot:nth-child(3) {
+		animation-delay: -0.9s;
+	}
+
+	.sk-chase-dot:nth-child(4) {
+		animation-delay: -0.8s;
+	}
+
+	.sk-chase-dot:nth-child(5) {
+		animation-delay: -0.7s;
+	}
+
+	.sk-chase-dot:nth-child(6) {
+		animation-delay: -0.6s;
+	}
+
+	.sk-chase-dot:nth-child(1):before {
+		animation-delay: -1.1s;
+	}
+
+	.sk-chase-dot:nth-child(2):before {
+		animation-delay: -1.0s;
+	}
+
+	.sk-chase-dot:nth-child(3):before {
+		animation-delay: -0.9s;
+	}
+
+	.sk-chase-dot:nth-child(4):before {
+		animation-delay: -0.8s;
+	}
+
+	.sk-chase-dot:nth-child(5):before {
+		animation-delay: -0.7s;
+	}
+
+	.sk-chase-dot:nth-child(6):before {
+		animation-delay: -0.6s;
+	}
+
+	@keyframes sk-chase {
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes sk-chase-dot {
+
+		80%,
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes sk-chase-dot-before {
+		50% {
+			transform: scale(0.4);
+		}
+
+		100%,
+		0% {
+			transform: scale(1.0);
+		}
+	}
+</style>
+  `, isInline: true, styles: [".loader-container{position:fixed;z-index:2000;inset:0;background-color:#fff9}.loader-logo{position:absolute;top:50%;left:0;right:0;margin:0 auto;z-index:5;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);text-align:center;font-size:17px;font-weight:500}.loader-container .spinner{margin:0 auto;width:70px;height:55px;text-align:center;font-size:20px}.loader-container .spinner>div{background-color:#333;height:100%;width:6px;display:inline-block;-webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out;animation:sk-stretchdelay 1.2s infinite ease-in-out}.loader-container .spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.loader-container .spinner .rect3{-webkit-animation-delay:-1s;animation-delay:-1s}.loader-container .spinner .rect4{-webkit-animation-delay:-.9s;animation-delay:-.9s}.loader-container .spinner .rect5{-webkit-animation-delay:-.8s;animation-delay:-.8s}@-webkit-keyframes sk-stretchdelay{0%,40%,to{-webkit-transform:scaleY(.4)}20%{-webkit-transform:scaleY(1)}}@keyframes sk-stretchdelay{0%,40%,to{transform:scaleY(.4);-webkit-transform:scaleY(.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}.sk-chase{width:55px;height:55px;position:relative;margin:0 auto 20px;animation:sk-chase 2.5s infinite linear both}.sk-chase-dot{width:100%;height:100%;position:absolute;left:0;top:0;animation:sk-chase-dot 2s infinite ease-in-out both}.sk-chase-dot:before{content:\"\";display:block;width:25%;height:25%;background-color:#212121;border-radius:100%;animation:sk-chase-dot-before 2s infinite ease-in-out both}.sk-chase-dot:nth-child(1){animation-delay:-1.1s}.sk-chase-dot:nth-child(2){animation-delay:-1s}.sk-chase-dot:nth-child(3){animation-delay:-.9s}.sk-chase-dot:nth-child(4){animation-delay:-.8s}.sk-chase-dot:nth-child(5){animation-delay:-.7s}.sk-chase-dot:nth-child(6){animation-delay:-.6s}.sk-chase-dot:nth-child(1):before{animation-delay:-1.1s}.sk-chase-dot:nth-child(2):before{animation-delay:-1s}.sk-chase-dot:nth-child(3):before{animation-delay:-.9s}.sk-chase-dot:nth-child(4):before{animation-delay:-.8s}.sk-chase-dot:nth-child(5):before{animation-delay:-.7s}.sk-chase-dot:nth-child(6):before{animation-delay:-.6s}@keyframes sk-chase{to{transform:rotate(360deg)}}@keyframes sk-chase-dot{80%,to{transform:rotate(360deg)}}@keyframes sk-chase-dot-before{50%{transform:scale(.4)}to,0%{transform:scale(1)}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CommonLoaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sdk-common-loader',
                     template: `
-    <div class="d-flex align-items-center justify-content-center py-4">
-      <div class="spinner-border mr-2" role="status">
-        <span class="sr-only">Loading...</span>
-      </div>
-      <span>{{ message }}</span>
+    <div class="loader-container">
+    <div class="loader-logo">
+        <div class="sk-chase">
+            <div class="sk-chase-dot"></div>
+            <div class="sk-chase-dot"></div>
+            <div class="sk-chase-dot"></div>
+            <div class="sk-chase-dot"></div>
+            <div class="sk-chase-dot"></div>
+            <div class="sk-chase-dot"></div>
+        </div>
+        {{message}}
     </div>
+</div>
+
+    
+<style>
+	/*Loader*/
+	.loader-container {
+		position: fixed;
+		z-index: 2000;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		background-color: rgba(255, 255, 255, 0.6);
+	}
+
+	.loader-logo {
+		position: absolute;
+		top: 50%;
+		left: 0;
+		right: 0;
+		margin: 0 auto;
+		z-index: 5;
+		-webkit-transform: translateY(-50%);
+		-moz-transform: translateY(-50%);
+		-ms-transform: translateY(-50%);
+		-o-transform: translateY(-50%);
+		transform: translateY(-50%);
+		text-align: center;
+		font-size: 17px;
+		font-weight: 500;
+	}
+
+	/*Loader Spinner*/
+	.loader-container .spinner {
+		margin: 0 auto;
+		width: 70px;
+		height: 55px;
+		text-align: center;
+		font-size: 20px;
+	}
+
+	.loader-container .spinner>div {
+		background-color: #333;
+		height: 100%;
+		width: 6px;
+		display: inline-block;
+		-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+		animation: sk-stretchdelay 1.2s infinite ease-in-out;
+	}
+
+	.loader-container .spinner .rect2 {
+		-webkit-animation-delay: -1.1s;
+		animation-delay: -1.1s;
+	}
+
+	.loader-container .spinner .rect3 {
+		-webkit-animation-delay: -1.0s;
+		animation-delay: -1.0s;
+	}
+
+	.loader-container .spinner .rect4 {
+		-webkit-animation-delay: -0.9s;
+		animation-delay: -0.9s;
+	}
+
+	.loader-container .spinner .rect5 {
+		-webkit-animation-delay: -0.8s;
+		animation-delay: -0.8s;
+	}
+
+	@-webkit-keyframes sk-stretchdelay {
+
+		0%,
+		40%,
+		100% {
+			-webkit-transform: scaleY(0.4)
+		}
+
+		20% {
+			-webkit-transform: scaleY(1.0)
+		}
+	}
+
+	@keyframes sk-stretchdelay {
+
+		0%,
+		40%,
+		100% {
+			transform: scaleY(0.4);
+			-webkit-transform: scaleY(0.4);
+		}
+
+		20% {
+			transform: scaleY(1.0);
+			-webkit-transform: scaleY(1.0);
+		}
+	}
+
+	/*Loader sk-chase*/
+	.sk-chase {
+		width: 55px;
+		height: 55px;
+		position: relative;
+		margin: 0 auto 20px;
+		animation: sk-chase 2.5s infinite linear both;
+	}
+
+	.sk-chase-dot {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		left: 0;
+		top: 0;
+		animation: sk-chase-dot 2.0s infinite ease-in-out both;
+	}
+
+	.sk-chase-dot:before {
+		content: '';
+		display: block;
+		width: 25%;
+		height: 25%;
+		background-color: #212121;
+		border-radius: 100%;
+		animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
+	}
+
+	.sk-chase-dot:nth-child(1) {
+		animation-delay: -1.1s;
+	}
+
+	.sk-chase-dot:nth-child(2) {
+		animation-delay: -1.0s;
+	}
+
+	.sk-chase-dot:nth-child(3) {
+		animation-delay: -0.9s;
+	}
+
+	.sk-chase-dot:nth-child(4) {
+		animation-delay: -0.8s;
+	}
+
+	.sk-chase-dot:nth-child(5) {
+		animation-delay: -0.7s;
+	}
+
+	.sk-chase-dot:nth-child(6) {
+		animation-delay: -0.6s;
+	}
+
+	.sk-chase-dot:nth-child(1):before {
+		animation-delay: -1.1s;
+	}
+
+	.sk-chase-dot:nth-child(2):before {
+		animation-delay: -1.0s;
+	}
+
+	.sk-chase-dot:nth-child(3):before {
+		animation-delay: -0.9s;
+	}
+
+	.sk-chase-dot:nth-child(4):before {
+		animation-delay: -0.8s;
+	}
+
+	.sk-chase-dot:nth-child(5):before {
+		animation-delay: -0.7s;
+	}
+
+	.sk-chase-dot:nth-child(6):before {
+		animation-delay: -0.6s;
+	}
+
+	@keyframes sk-chase {
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes sk-chase-dot {
+
+		80%,
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes sk-chase-dot-before {
+		50% {
+			transform: scale(0.4);
+		}
+
+		100%,
+		0% {
+			transform: scale(1.0);
+		}
+	}
+</style>
   `,
                     standalone: true,
                 }]
@@ -2508,7 +2946,7 @@ class WorkFlowComponent {
                     },
                 ],
             }),
-        ], ngImport: i0, template: "\n\n@if (showWorkflowComponent) {\n \n      <sdk-bill-workflow \n        [selectedBill]=\"selectedBillForWorkflow\"\n        (workflowCompleted)=\"onWorkflowCompleted($event)\">\n      </sdk-bill-workflow>\n    \n  \n}@else { \n  <div class=\"content work-flow-content\">\n    <header class=\"page-header work-flow-page-header d-flex align-items-center justify-content-between container-fluid\">\n      <h1 class=\"page-title work-flow-page-title m-0\">{{ 'LABEL_UTILITIES' | translate }}</h1>\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"back()\">\n        <i class=\"fas fa-angle-left me-1\"></i>{{ 'COMMON_LABEL_BACK' | translate }}\n      </button>\n    </header>\n  \n    <section class=\"page-content container-fluid work-flow-section\">\n  \n      <div class=\"card work-flow-card m-0\">\n        <div class=\"card-header work-flow-card-header\">\n          <h4 class=\"card-title work-flow-card-title m-0 text-dark\">{{ vendorProvider?.provider_name }}</h4>\n        </div>\n        <div class=\"tab-content\">\n          <div class=\"tab-pane fadeIn active show\">\n            <form role=\"form\" class=\"form-horizontal work-flow-form\" [formGroup]=\"detailsForm\" (ngSubmit)=\"submitForm()\">\n              <div class=\"card-body work-flow-card-body\">\n                <div class=\"work-flow-fields\">\n                  @if (fieldsArray.length > 0) {\n                    <div class=\"row justify-content-center\">\n                      <div class=\"col-12 work-flow-form-column\">\n                        <!-- <div class=\"form-group form-row\">\n                        <label\n                        class=\"control-label text-md-right col-md-4 col-lg-3\">Provider</label>\n                        <div class=\"col-md-5\">\n                          <ng-select placeholder=\"Select Provider\" bindLabel=\"provider_name\"\n                            bindValue=\"id\" [items]=\"vendorProviders\"\n                            (change)=\"changeVendorProvider($event)\">\n                          </ng-select>\n                        </div>\n                      </div> -->\n                      <!-- <pre>{{fieldsArray|json}}</pre> -->\n                      <formly-form [fields]=\"fieldsArray\" [model]=\"fieldsModel\" [form]=\"detailsForm\">\n                      </formly-form>\n                    </div>\n                  </div>\n                }\n  \n                @if (fieldsArray.length === 0) {\n                  <sdk-no-data title=\"LABEL_FIELDS_NOT_AVAILABLE\"></sdk-no-data>\n                }\n              </div>\n            </div>\n            <div class=\"card-footer work-flow-footer bg-light d-flex justify-content-end flex-wrap gap-2\">\n              <button type=\"button\" class=\"btn btn-secondary btn-sm\" (click)=\"back()\">\n                {{'COMMON_LABEL_CANCEL' | translate}}\n              </button>\n              @if (buttonData) {\n                <button type=\"submit\" class=\"btn btn-primary btn-sm\"\n                  [ngClass]=\"{'qt-loader qt-loader-mini qt-loader-left': showLoader}\"\n                  [disabled]=\"showLoader || !detailsForm.valid\">\n                  {{ buttonData?.field_title }}\n                </button>\n              }\n            </div>\n          </form>\n        </div>\n      </div>\n    </div>\n  </section>\n  </div>\n}\n\n<style>\n  .work-flow-content {\n    overflow: visible;\n  }\n\n  .work-flow-page-header {\n    margin-bottom: 0.5rem;\n  }\n\n  .work-flow-page-title {\n    font-size: 0.95rem;\n    font-weight: 600;\n    color: #1e3a5f;\n  }\n\n  .work-flow-section {\n    max-width: 100%;\n    padding-left: 0.75rem;\n    padding-right: 0.75rem;\n  }\n\n  /* Narrow card: less empty chrome */\n  .work-flow-card {\n    max-width: 440px;\n    margin-left: auto;\n    margin-right: auto;\n    border: 1px solid #e9ecef;\n    border-radius: 6px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n    overflow: visible;\n  }\n\n  .work-flow-card-header {\n    background: #f8f9fa;\n    border-bottom: 1px solid #e9ecef;\n    padding: 0.4rem 0.6rem;\n  }\n\n  .work-flow-card-title {\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: #1e3a5f;\n  }\n\n  .work-flow-card-body {\n    padding: 0.85rem 0.75rem 1rem;\n    border-bottom: 1px solid #e9ecef;\n  }\n\n  .work-flow-fields {\n    margin-top: 0;\n  }\n\n  .work-flow-form-column {\n    max-width: 100%;\n    margin-left: 0;\n    margin-right: 0;\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  .work-flow-footer {\n    padding: 0.45rem 0.6rem;\n    border-top: 1px solid #e9ecef;\n    background: #fafbfc !important;\n  }\n\n  .work-flow-footer .btn {\n    font-size: 0.7rem;\n    padding: 0.18rem 0.45rem;\n    line-height: 1.15;\n    border-radius: 3px;\n  }\n\n  /*\n   * Reference layout: each row centered in the card; compact inputs (~25\u201330% of card);\n   * labels right-aligned next to the field.\n   */\n  .work-flow-card-body ::ng-deep formly-field {\n    display: block;\n    width: 100%;\n  }\n\n  .work-flow-card-body ::ng-deep .form-group.form-row {\n    max-width: 100%;\n    margin-left: 0;\n    margin-right: 0;\n    margin-bottom: 0.65rem;\n    align-items: center;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n  }\n\n  .work-flow-card-body ::ng-deep .form-group.form-row > .control-label {\n    flex: 0 0 8rem;\n    max-width: 8rem;\n    min-width: 8rem;\n    font-size: 0.72rem;\n    font-weight: 500;\n    color: #3d5a80;\n    padding-top: 0;\n    padding-right: 0.45rem;\n    margin-bottom: 0;\n    text-align: right;\n    white-space: nowrap;\n  }\n\n  .work-flow-card-body ::ng-deep .form-group.form-row > .col-md-8 {\n    flex: 1 1 auto;\n    max-width: none;\n    width: auto;\n    min-width: 0;\n  }\n\n  .work-flow-card-body ::ng-deep .form-control {\n    display: block;\n    width: 100%;\n    max-width: 200px;\n    box-sizing: border-box;\n    font-size: 0.72rem;\n    min-height: 26px;\n    height: 26px;\n    padding: 0.15rem 0.4rem;\n    border-radius: 4px;\n    line-height: 1.2;\n    border: 1px solid #d8dee6;\n    background-color: #fff;\n    color: #334155;\n  }\n\n  .work-flow-card-body ::ng-deep .form-control::placeholder {\n    color: #94a3b8;\n    opacity: 1;\n    font-size: 0.7rem;\n  }\n\n  .work-flow-card-body ::ng-deep textarea.form-control {\n    height: auto !important;\n    min-height: 3.25rem;\n    max-width: 100%;\n  }\n\n  .work-flow-card-body ::ng-deep .invalid-feedback {\n    font-size: 0.65rem;\n    margin-top: 0.1rem;\n  }\n\n  @media (max-width: 400px) {\n    .work-flow-card {\n      max-width: 100%;\n    }\n\n    .work-flow-card-body ::ng-deep .form-control {\n      max-width: 100%;\n    }\n  }\n\n</style>", styles: [".work-flow-content{overflow:visible}.work-flow-page-header{margin-bottom:.5rem}.work-flow-page-title{font-size:.95rem;font-weight:600;color:#1e3a5f}.work-flow-section{max-width:100%;padding-left:.75rem;padding-right:.75rem}.work-flow-card{max-width:440px;margin-left:auto;margin-right:auto;border:1px solid #e9ecef;border-radius:6px;box-shadow:0 1px 3px #0000000f;overflow:visible}.work-flow-card-header{background:#f8f9fa;border-bottom:1px solid #e9ecef;padding:.4rem .6rem}.work-flow-card-title{font-size:.85rem;font-weight:600;color:#1e3a5f}.work-flow-card-body{padding:.85rem .75rem 1rem;border-bottom:1px solid #e9ecef}.work-flow-fields{margin-top:0}.work-flow-form-column{max-width:100%;margin-left:0;margin-right:0;padding-left:0;padding-right:0}.work-flow-footer{padding:.45rem .6rem;border-top:1px solid #e9ecef;background:#fafbfc!important}.work-flow-footer .btn{font-size:.7rem;padding:.18rem .45rem;line-height:1.15;border-radius:3px}.work-flow-card-body ::ng-deep formly-field{display:block;width:100%}.work-flow-card-body ::ng-deep .form-group.form-row{max-width:100%;margin-left:0;margin-right:0;margin-bottom:.65rem;align-items:center;flex-wrap:nowrap;justify-content:flex-start}.work-flow-card-body ::ng-deep .form-group.form-row>.control-label{flex:0 0 8rem;max-width:8rem;min-width:8rem;font-size:.72rem;font-weight:500;color:#3d5a80;padding-top:0;padding-right:.45rem;margin-bottom:0;text-align:right;white-space:nowrap}.work-flow-card-body ::ng-deep .form-group.form-row>.col-md-8{flex:1 1 auto;max-width:none;width:auto;min-width:0}.work-flow-card-body ::ng-deep .form-control{display:block;width:100%;max-width:200px;box-sizing:border-box;font-size:.72rem;min-height:26px;height:26px;padding:.15rem .4rem;border-radius:4px;line-height:1.2;border:1px solid #d8dee6;background-color:#fff;color:#334155}.work-flow-card-body ::ng-deep .form-control::placeholder{color:#94a3b8;opacity:1;font-size:.7rem}.work-flow-card-body ::ng-deep textarea.form-control{height:auto!important;min-height:3.25rem;max-width:100%}.work-flow-card-body ::ng-deep .invalid-feedback{font-size:.65rem;margin-top:.1rem}@media (max-width: 400px){.work-flow-card{max-width:100%}.work-flow-card-body ::ng-deep .form-control{max-width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: NgSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyBootstrapModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$2.LegacyFormlyForm, selector: "formly-form" }, { kind: "component", type: NoDataComponent, selector: "sdk-no-data", inputs: ["title", "icon"] }, { kind: "component", type: BillWorkflowComponent, selector: "sdk-bill-workflow", inputs: ["billData", "selectedBill"], outputs: ["workflowCompleted"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+        ], ngImport: i0, template: "\n\n@if (showWorkflowComponent) {\n \n      <sdk-bill-workflow \n        [selectedBill]=\"selectedBillForWorkflow\"\n        (workflowCompleted)=\"onWorkflowCompleted($event)\">\n      </sdk-bill-workflow>\n    \n  \n}@else { \n  <div class=\"content\">\n    <header class=\"page-header\">\n      <div class=\"d-flex align-items-center flex-wrap\">\n        <div class=\"mr-auto\">\n          <h1>{{ 'LABEL_UTILITIES' | translate }}</h1>\n        </div>\n      </div>\n    </header>\n  \n    <section class=\"page-content container-fluid\">\n  \n      <div class=\"card m-0 border-0\">\n        <div class=\"card-header p-t-25 p-b-20\">\n          <h4 class=\"card-title font-weight-600 font-size-18 m-0 text-dark\">{{ vendorProvider?.provider_name }}\n          </h4>\n        </div>\n        <div class=\"tab-content\">\n          <div class=\"tab-pane fadeIn active show\">\n            <form role=\"form\" class=\"form-horizontal\" [formGroup]=\"detailsForm\" (ngSubmit)=\"submitForm()\">\n              <div class=\"card-body\">\n                <div class=\"mt-3\">\n                  @if (fieldsArray.length > 0) {\n                    <div class=\"row\">\n                      <div class=\"col-xl-5 offset-xl-3\">\n                        <!-- <div class=\"form-group form-row\">\n                        <label\n                        class=\"control-label text-md-right col-md-4 col-lg-3\">Provider</label>\n                        <div class=\"col-md-5\">\n                          <ng-select placeholder=\"Select Provider\" bindLabel=\"provider_name\"\n                            bindValue=\"id\" [items]=\"vendorProviders\"\n                            (change)=\"changeVendorProvider($event)\">\n                          </ng-select>\n                        </div>\n                      </div> -->\n                      <!-- <pre>{{fieldsArray|json}}</pre> -->\n                      <formly-form [fields]=\"fieldsArray\" [model]=\"fieldsModel\" [form]=\"detailsForm\">\n                      </formly-form>\n                    </div>\n                  </div>\n                }\n  \n                @if (fieldsArray.length === 0) {\n                  <sdk-no-data title=\"LABEL_FIELDS_NOT_AVAILABLE\"></sdk-no-data>\n                }\n              </div>\n            </div>\n            <div class=\"card-footer bg-light text-right\">\n              <button type=\"button\" class=\"btn btn-secondary\" (click)=\"back()\">\n                {{'COMMON_LABEL_CANCEL' | translate}}\n              </button>\n              @if (buttonData) {\n                <button type=\"submit\" class=\"btn btn-primary\"\n                  [ngClass]=\"{'qt-loader qt-loader-mini qt-loader-left': showLoader}\"\n                  [disabled]=\"showLoader\">\n                  {{ buttonData?.field_title }}\n                </button>\n              }\n            </div>\n          </form>\n        </div>\n      </div>\n    </div>\n  </section>\n  </div>\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: NgSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyBootstrapModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$2.LegacyFormlyForm, selector: "formly-form" }, { kind: "component", type: NoDataComponent, selector: "sdk-no-data", inputs: ["title", "icon"] }, { kind: "component", type: BillWorkflowComponent, selector: "sdk-bill-workflow", inputs: ["billData", "selectedBill"], outputs: ["workflowCompleted"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WorkFlowComponent, decorators: [{
             type: Component,
@@ -2558,7 +2996,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                                 },
                             ],
                         }),
-                    ], template: "\n\n@if (showWorkflowComponent) {\n \n      <sdk-bill-workflow \n        [selectedBill]=\"selectedBillForWorkflow\"\n        (workflowCompleted)=\"onWorkflowCompleted($event)\">\n      </sdk-bill-workflow>\n    \n  \n}@else { \n  <div class=\"content work-flow-content\">\n    <header class=\"page-header work-flow-page-header d-flex align-items-center justify-content-between container-fluid\">\n      <h1 class=\"page-title work-flow-page-title m-0\">{{ 'LABEL_UTILITIES' | translate }}</h1>\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"back()\">\n        <i class=\"fas fa-angle-left me-1\"></i>{{ 'COMMON_LABEL_BACK' | translate }}\n      </button>\n    </header>\n  \n    <section class=\"page-content container-fluid work-flow-section\">\n  \n      <div class=\"card work-flow-card m-0\">\n        <div class=\"card-header work-flow-card-header\">\n          <h4 class=\"card-title work-flow-card-title m-0 text-dark\">{{ vendorProvider?.provider_name }}</h4>\n        </div>\n        <div class=\"tab-content\">\n          <div class=\"tab-pane fadeIn active show\">\n            <form role=\"form\" class=\"form-horizontal work-flow-form\" [formGroup]=\"detailsForm\" (ngSubmit)=\"submitForm()\">\n              <div class=\"card-body work-flow-card-body\">\n                <div class=\"work-flow-fields\">\n                  @if (fieldsArray.length > 0) {\n                    <div class=\"row justify-content-center\">\n                      <div class=\"col-12 work-flow-form-column\">\n                        <!-- <div class=\"form-group form-row\">\n                        <label\n                        class=\"control-label text-md-right col-md-4 col-lg-3\">Provider</label>\n                        <div class=\"col-md-5\">\n                          <ng-select placeholder=\"Select Provider\" bindLabel=\"provider_name\"\n                            bindValue=\"id\" [items]=\"vendorProviders\"\n                            (change)=\"changeVendorProvider($event)\">\n                          </ng-select>\n                        </div>\n                      </div> -->\n                      <!-- <pre>{{fieldsArray|json}}</pre> -->\n                      <formly-form [fields]=\"fieldsArray\" [model]=\"fieldsModel\" [form]=\"detailsForm\">\n                      </formly-form>\n                    </div>\n                  </div>\n                }\n  \n                @if (fieldsArray.length === 0) {\n                  <sdk-no-data title=\"LABEL_FIELDS_NOT_AVAILABLE\"></sdk-no-data>\n                }\n              </div>\n            </div>\n            <div class=\"card-footer work-flow-footer bg-light d-flex justify-content-end flex-wrap gap-2\">\n              <button type=\"button\" class=\"btn btn-secondary btn-sm\" (click)=\"back()\">\n                {{'COMMON_LABEL_CANCEL' | translate}}\n              </button>\n              @if (buttonData) {\n                <button type=\"submit\" class=\"btn btn-primary btn-sm\"\n                  [ngClass]=\"{'qt-loader qt-loader-mini qt-loader-left': showLoader}\"\n                  [disabled]=\"showLoader || !detailsForm.valid\">\n                  {{ buttonData?.field_title }}\n                </button>\n              }\n            </div>\n          </form>\n        </div>\n      </div>\n    </div>\n  </section>\n  </div>\n}\n\n<style>\n  .work-flow-content {\n    overflow: visible;\n  }\n\n  .work-flow-page-header {\n    margin-bottom: 0.5rem;\n  }\n\n  .work-flow-page-title {\n    font-size: 0.95rem;\n    font-weight: 600;\n    color: #1e3a5f;\n  }\n\n  .work-flow-section {\n    max-width: 100%;\n    padding-left: 0.75rem;\n    padding-right: 0.75rem;\n  }\n\n  /* Narrow card: less empty chrome */\n  .work-flow-card {\n    max-width: 440px;\n    margin-left: auto;\n    margin-right: auto;\n    border: 1px solid #e9ecef;\n    border-radius: 6px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n    overflow: visible;\n  }\n\n  .work-flow-card-header {\n    background: #f8f9fa;\n    border-bottom: 1px solid #e9ecef;\n    padding: 0.4rem 0.6rem;\n  }\n\n  .work-flow-card-title {\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: #1e3a5f;\n  }\n\n  .work-flow-card-body {\n    padding: 0.85rem 0.75rem 1rem;\n    border-bottom: 1px solid #e9ecef;\n  }\n\n  .work-flow-fields {\n    margin-top: 0;\n  }\n\n  .work-flow-form-column {\n    max-width: 100%;\n    margin-left: 0;\n    margin-right: 0;\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  .work-flow-footer {\n    padding: 0.45rem 0.6rem;\n    border-top: 1px solid #e9ecef;\n    background: #fafbfc !important;\n  }\n\n  .work-flow-footer .btn {\n    font-size: 0.7rem;\n    padding: 0.18rem 0.45rem;\n    line-height: 1.15;\n    border-radius: 3px;\n  }\n\n  /*\n   * Reference layout: each row centered in the card; compact inputs (~25\u201330% of card);\n   * labels right-aligned next to the field.\n   */\n  .work-flow-card-body ::ng-deep formly-field {\n    display: block;\n    width: 100%;\n  }\n\n  .work-flow-card-body ::ng-deep .form-group.form-row {\n    max-width: 100%;\n    margin-left: 0;\n    margin-right: 0;\n    margin-bottom: 0.65rem;\n    align-items: center;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n  }\n\n  .work-flow-card-body ::ng-deep .form-group.form-row > .control-label {\n    flex: 0 0 8rem;\n    max-width: 8rem;\n    min-width: 8rem;\n    font-size: 0.72rem;\n    font-weight: 500;\n    color: #3d5a80;\n    padding-top: 0;\n    padding-right: 0.45rem;\n    margin-bottom: 0;\n    text-align: right;\n    white-space: nowrap;\n  }\n\n  .work-flow-card-body ::ng-deep .form-group.form-row > .col-md-8 {\n    flex: 1 1 auto;\n    max-width: none;\n    width: auto;\n    min-width: 0;\n  }\n\n  .work-flow-card-body ::ng-deep .form-control {\n    display: block;\n    width: 100%;\n    max-width: 200px;\n    box-sizing: border-box;\n    font-size: 0.72rem;\n    min-height: 26px;\n    height: 26px;\n    padding: 0.15rem 0.4rem;\n    border-radius: 4px;\n    line-height: 1.2;\n    border: 1px solid #d8dee6;\n    background-color: #fff;\n    color: #334155;\n  }\n\n  .work-flow-card-body ::ng-deep .form-control::placeholder {\n    color: #94a3b8;\n    opacity: 1;\n    font-size: 0.7rem;\n  }\n\n  .work-flow-card-body ::ng-deep textarea.form-control {\n    height: auto !important;\n    min-height: 3.25rem;\n    max-width: 100%;\n  }\n\n  .work-flow-card-body ::ng-deep .invalid-feedback {\n    font-size: 0.65rem;\n    margin-top: 0.1rem;\n  }\n\n  @media (max-width: 400px) {\n    .work-flow-card {\n      max-width: 100%;\n    }\n\n    .work-flow-card-body ::ng-deep .form-control {\n      max-width: 100%;\n    }\n  }\n\n</style>" }]
+                    ], template: "\n\n@if (showWorkflowComponent) {\n \n      <sdk-bill-workflow \n        [selectedBill]=\"selectedBillForWorkflow\"\n        (workflowCompleted)=\"onWorkflowCompleted($event)\">\n      </sdk-bill-workflow>\n    \n  \n}@else { \n  <div class=\"content\">\n    <header class=\"page-header\">\n      <div class=\"d-flex align-items-center flex-wrap\">\n        <div class=\"mr-auto\">\n          <h1>{{ 'LABEL_UTILITIES' | translate }}</h1>\n        </div>\n      </div>\n    </header>\n  \n    <section class=\"page-content container-fluid\">\n  \n      <div class=\"card m-0 border-0\">\n        <div class=\"card-header p-t-25 p-b-20\">\n          <h4 class=\"card-title font-weight-600 font-size-18 m-0 text-dark\">{{ vendorProvider?.provider_name }}\n          </h4>\n        </div>\n        <div class=\"tab-content\">\n          <div class=\"tab-pane fadeIn active show\">\n            <form role=\"form\" class=\"form-horizontal\" [formGroup]=\"detailsForm\" (ngSubmit)=\"submitForm()\">\n              <div class=\"card-body\">\n                <div class=\"mt-3\">\n                  @if (fieldsArray.length > 0) {\n                    <div class=\"row\">\n                      <div class=\"col-xl-5 offset-xl-3\">\n                        <!-- <div class=\"form-group form-row\">\n                        <label\n                        class=\"control-label text-md-right col-md-4 col-lg-3\">Provider</label>\n                        <div class=\"col-md-5\">\n                          <ng-select placeholder=\"Select Provider\" bindLabel=\"provider_name\"\n                            bindValue=\"id\" [items]=\"vendorProviders\"\n                            (change)=\"changeVendorProvider($event)\">\n                          </ng-select>\n                        </div>\n                      </div> -->\n                      <!-- <pre>{{fieldsArray|json}}</pre> -->\n                      <formly-form [fields]=\"fieldsArray\" [model]=\"fieldsModel\" [form]=\"detailsForm\">\n                      </formly-form>\n                    </div>\n                  </div>\n                }\n  \n                @if (fieldsArray.length === 0) {\n                  <sdk-no-data title=\"LABEL_FIELDS_NOT_AVAILABLE\"></sdk-no-data>\n                }\n              </div>\n            </div>\n            <div class=\"card-footer bg-light text-right\">\n              <button type=\"button\" class=\"btn btn-secondary\" (click)=\"back()\">\n                {{'COMMON_LABEL_CANCEL' | translate}}\n              </button>\n              @if (buttonData) {\n                <button type=\"submit\" class=\"btn btn-primary\"\n                  [ngClass]=\"{'qt-loader qt-loader-mini qt-loader-left': showLoader}\"\n                  [disabled]=\"showLoader\">\n                  {{ buttonData?.field_title }}\n                </button>\n              }\n            </div>\n          </form>\n        </div>\n      </div>\n    </div>\n  </section>\n  </div>\n}" }]
         }], ctorParameters: () => [] });
 
 const REGION_COMMUNE_DATA = {
@@ -3438,6 +3876,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         }], ctorParameters: () => [] });
 
 class UserProfileService {
+    http = inject(HttpClient);
+    config = inject(PaymentsConfigService);
+    authProvider = inject(UTILITY_PAYMENTS_AUTH_PROVIDER, { optional: true });
+    get baseUrl() {
+        return this.config.getConfig()?.baseUrl ?? '';
+    }
+    get defaultHeaders() {
+        const cfg = this.config.getConfig();
+        const fromConfig = (cfg?.defaultHeaders ?? {});
+        const fromAuth = this.buildAuthHeaders();
+        return { ...fromAuth, ...fromConfig };
+    }
+    buildAuthHeaders() {
+        const headers = {};
+        if (!this.authProvider)
+            return headers;
+        const token = this.authProvider.getToken();
+        const companyId = this.authProvider.getCompanyId();
+        const userId = this.authProvider.getUserId();
+        if (token)
+            headers['Authorization'] = token.startsWith('Bearer ') ? token : `Bearer ${token}`;
+        if (companyId != null)
+            headers['companyid'] = String(companyId);
+        if (userId != null)
+            headers['userid'] = String(userId);
+        return headers;
+    }
+    getProfileProductsDetailsUsingJava(params = {}) {
+        return this.http.get(`${this.baseUrl}/profile_threshold/profile_products`, {
+            params,
+            headers: this.defaultHeaders,
+        });
+    }
+    getProfileProductChargesUsingJava(params = {}) {
+        return this.http.get(`${this.baseUrl}/profile_threshold/profile_product_charges`, {
+            params,
+            headers: this.defaultHeaders,
+        });
+    }
+    getUserProfileUsingJava(params = {}) {
+        return this.http.get(`${this.baseUrl}/profile_threshold/user_profile`, {
+            params,
+            headers: this.defaultHeaders,
+        });
+    }
+    getAgentProfileById(id, params = {}) {
+        return this.http.get(`${this.baseUrl}/agent_profile_threshold/agent_profile/${id}`, {
+            params,
+            headers: this.defaultHeaders,
+        });
+    }
+    getAgentProfileProductDetailsUsingJava(params = {}) {
+        return this.http.get(`${this.baseUrl}/agent_profile_threshold/agent_profile_products`, {
+            params,
+            headers: this.defaultHeaders,
+        });
+    }
+    getAgentUserProfile(params = {}) {
+        return this.http.get(`${this.baseUrl}/agent_profile_threshold/agent_user_profiles`, {
+            params,
+            headers: this.defaultHeaders,
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: UserProfileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: UserProfileService, providedIn: 'root' });
 }
@@ -3766,14 +4267,134 @@ var AuthenticationMethod;
     AuthenticationMethod["OTP"] = "OTP";
 })(AuthenticationMethod || (AuthenticationMethod = {}));
 
-async function checkUserProfiles(_args) {
-    return null;
+async function checkUserProfiles(data) {
+    const params = {};
+    const userType = data?.userType;
+    let profileData = {};
+    let productExists = false;
+    params['user_id'] = data?.userId ?? null;
+    params['wallet_id'] = data?.walletId ?? null;
+    params['currency_id'] = data?.currencyId ?? null;
+    if (userType === USER_TYPES.AGENT) {
+        const agentProfileResponse = await firstValueFrom(data.userProfileService.getAgentUserProfile(params));
+        const userProfileData = agentProfileResponse?.data?.agent_user_profile;
+        const profile = Array.isArray(userProfileData)
+            ? userProfileData[0]
+            : userProfileData
+                ? userProfileData
+                : null;
+        if (isNotNull(profile)) {
+            const profileId = (profileData['profileId'] = profile?.agent_profile_id);
+            const agentProfileByIdResponse = await firstValueFrom(data.userProfileService.getAgentProfileById(profileId));
+            profileData =
+                isNotNull(agentProfileByIdResponse?.data?.agent_profile) && agentProfileByIdResponse?.success
+                    ? { ...agentProfileByIdResponse.data.agent_profile }
+                    : null;
+            const productDetailsResponse = await firstValueFrom(data.userProfileService.getAgentProfileProductDetailsUsingJava({
+                agent_profile_id: profileId,
+                product_code: data?.product_code,
+            }));
+            productExists =
+                isNotNull(productDetailsResponse?.data?.agent_profile_product) &&
+                    productDetailsResponse?.success;
+        }
+    }
+    else {
+        params['user_type'] = data?.userType ?? null;
+        const userProfileResponse = await firstValueFrom(data.userProfileService.getUserProfileUsingJava(params));
+        const userProfileData = isNotNull(userProfileResponse?.data?.user_profile)
+            ? userProfileResponse.data.user_profile
+            : null;
+        if (isNotNull(userProfileData)) {
+            const profileId = (profileData['id'] = userProfileData?.profile_id);
+            const productDetailsResponse = await firstValueFrom(data.userProfileService.getProfileProductsDetailsUsingJava({
+                profile_id: profileId,
+                product_code: data?.product_code,
+            }));
+            productExists =
+                isNotNull(productDetailsResponse?.data?.profile_product) && productDetailsResponse?.success;
+        }
+    }
+    return productExists ? profileData : null;
 }
-async function calculateCharges(_args) {
-    return null;
+async function calculateCharges(chargeParams) {
+    const walletService = chargeParams.walletService;
+    const userType = chargeParams.userType;
+    let calculatedCharges = null;
+    let calculateChargeResponse = null;
+    let chargeListResponse = null;
+    let agentChargeDetailsResponse = null;
+    let profileProductChargesResponse = null;
+    const params = {};
+    params['wallet_id'] = chargeParams.walletId ?? null;
+    params['currency_id'] = chargeParams.currencyId ?? null;
+    params['product_code'] = chargeParams.productCode ?? null;
+    params['txn_amount'] = chargeParams.amount ?? null;
+    if (userType === USER_TYPES.AGENT) {
+        params['tree_id'] = chargeParams.tree_id ?? null;
+        params['tree_level_id'] = chargeParams.tree_level_id ?? null;
+        calculateChargeResponse = await firstValueFrom(walletService.calculateAgentCharges(params));
+        const listParams = {
+            tree_id: chargeParams.tree_id ?? null,
+            tree_level_id: chargeParams.tree_level_id ?? null,
+            currency_id: chargeParams.currencyId ?? null,
+        };
+        chargeListResponse = await firstValueFrom(walletService.getAgentChargesListUsingJava(listParams));
+        const agentChargeId = chargeListResponse?.success
+            ? chargeListResponse?.data?.agent_charges?.[0]?.id
+            : null;
+        if (agentChargeId && chargeParams.productCode) {
+            agentChargeDetailsResponse = await firstValueFrom(walletService.getAgentChargeDetailsByIdUsingJava({
+                agent_charges_id: agentChargeId,
+                product_code: chargeParams.productCode,
+            }));
+        }
+    }
+    else {
+        params['profile_id'] = chargeParams.profileId ?? null;
+        calculateChargeResponse = await firstValueFrom(walletService.calculateCharges(params));
+        const userProfileService = chargeParams.userProfileService;
+        const profileId = chargeParams.profileId;
+        const productCode = chargeParams.productCode;
+        if (userProfileService && profileId && productCode) {
+            profileProductChargesResponse = await firstValueFrom(userProfileService.getProfileProductChargesUsingJava({
+                profile_id: profileId,
+                product_code: productCode,
+            }));
+        }
+    }
+    calculatedCharges =
+        isNotNull(calculateChargeResponse?.data?.charges_info) && calculateChargeResponse?.success
+            ? calculateChargeResponse.data.charges_info
+            : null;
+    const result = calculatedCharges ? { ...calculatedCharges } : null;
+    if (result && userType === USER_TYPES.AGENT && agentChargeDetailsResponse?.success) {
+        const raw = agentChargeDetailsResponse?.data?.agent_charge_detail ??
+            agentChargeDetailsResponse?.data?.agent_charge_details;
+        const detail = Array.isArray(raw) ? raw[0] : raw;
+        if (detail?.allow_shared_charges) {
+            result.allow_shared_charges = detail.allow_shared_charges;
+            result.share_charge_config_id = detail.share_charge_config_id ?? null;
+        }
+    }
+    if (result && userType !== USER_TYPES.AGENT && profileProductChargesResponse?.success) {
+        const raw = profileProductChargesResponse?.data?.profile_product_charges ??
+            profileProductChargesResponse?.data?.profile_product_charges;
+        const detail = Array.isArray(raw) ? raw[0] : raw;
+        if (detail?.allow_shared_charges) {
+            result.allow_shared_charges = detail.allow_shared_charges;
+            result.share_charge_config_id = detail.share_charge_config_id ?? null;
+        }
+    }
+    return result;
 }
-async function getUserConfigDetails(_args) {
-    return null;
+async function getUserConfigDetails(userConfigDetails) {
+    const params = {};
+    if (userConfigDetails?.userId) {
+        params['user_id'] = userConfigDetails.userId;
+    }
+    const userConfig = await firstValueFrom(userConfigDetails.userService.getUserConfig(params));
+    return userConfig?.data?.user_config?.[0];
 }
 
 /// <reference path="../globals.d.ts" />
@@ -4055,10 +4676,13 @@ class TopupAndBillpaymentReviewComponent extends TransactionClass {
         this.userDetail();
     }
     async calculatCharge() {
+        const cfg = (this.paymentsConfigService.getConfig() ?? {});
+        const cfgHeaders = (cfg?.defaultHeaders ?? {});
+        const userId = (cfgHeaders["userid"] ?? cfgHeaders["userId"] ?? cfg?.userId ?? "").toString().trim();
         this.showLoader = true;
         let profileDetails = {
             "userProfileService": this.userprofileService,
-            "userId": this.dataService.getWalletUserAccountId(),
+            "userId": userId,
             "walletId": this.walletId,
             "userType": USER_TYPES.AGENT,
             "currencyId": this.currencyId,
@@ -5243,12 +5867,24 @@ class UtilityPaymentsContainerComponent {
     }
     buildRuntimeConfig(value) {
         const normalizedBaseUrl = (value.baseUrl ?? '').trim().replace(/\/+$/, '');
-        const token = (value.token ?? '').trim();
-        const companyId = (value.companyId ?? '').trim();
-        const userId = (value.userId ?? '').trim();
+        const incomingHeaders = (value.defaultHeaders ?? {});
+        const normalizedExtraHeaders = Object.entries(incomingHeaders).reduce((acc, [key, rawValue]) => {
+            if (['Authorization', 'authorization', 'companyid', 'companyId', 'userid', 'userId'].includes(key)) {
+                return acc;
+            }
+            const normalizedValue = this.normalizeHeaderValue(rawValue);
+            if (normalizedValue) {
+                acc[key] = normalizedValue;
+            }
+            return acc;
+        }, {});
+        const token = this.normalizeHeaderValue(value.token ?? incomingHeaders['Authorization'] ?? incomingHeaders['authorization']);
+        const companyId = this.normalizeHeaderValue(value.companyId ?? incomingHeaders['companyid'] ?? incomingHeaders['companyId']);
+        const userId = this.normalizeHeaderValue(value.userId ?? incomingHeaders['userid'] ?? incomingHeaders['userId']);
         return {
             baseUrl: normalizedBaseUrl,
             defaultHeaders: {
+                ...normalizedExtraHeaders,
                 ...(token ? { Authorization: token.includes(' ') ? token : `Bearer ${token}` } : {}),
                 ...(companyId ? { companyid: companyId } : {}),
                 ...(userId ? { userid: userId } : {}),
@@ -5256,18 +5892,18 @@ class UtilityPaymentsContainerComponent {
         };
     }
     normalizeConfig(inputConfig) {
-        const formValue = this.configForm.getRawValue();
         const incomingHeaders = (inputConfig?.defaultHeaders ?? {});
-        const tokenFromIncoming = incomingHeaders['Authorization'] ?? inputConfig?.token ?? '';
-        const companyIdFromIncoming = incomingHeaders['companyid'] ?? inputConfig?.companyId ?? '';
-        const userIdFromIncoming = incomingHeaders['userid'] ?? inputConfig?.userId ?? '';
         return this.buildRuntimeConfig({
-            baseUrl: inputConfig?.baseUrl ?? formValue.baseUrl ?? '',
-            token: tokenFromIncoming || formValue.token || '',
-            companyId: companyIdFromIncoming || formValue.companyId || '',
-            userId: userIdFromIncoming || formValue.userId || '',
+            baseUrl: inputConfig?.baseUrl ?? '',
+            token: inputConfig?.token ?? incomingHeaders['Authorization'] ?? incomingHeaders['authorization'] ?? '',
+            companyId: inputConfig?.companyId ?? incomingHeaders['companyid'] ?? incomingHeaders['companyId'] ?? '',
+            userId: inputConfig?.userId ?? incomingHeaders['userid'] ?? incomingHeaders['userId'] ?? '',
+            defaultHeaders: incomingHeaders,
         });
     }
+    normalizeHeaderValue(value) {
+        return value == null ? '' : String(value).trim();
+    }
     loadRuntimeConfigFromStorage() {
         try {
             const raw = localStorage.getItem(this.runtimeConfigStorageKey);
@@ -5394,7 +6030,7 @@ class UtilityPaymentsContainerComponent {
         }
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}:host ::ng-deep .sdk-utility-payments-container{font-size:13px;line-height:1.3}:host ::ng-deep .content{padding:.75rem!important}:host ::ng-deep .page-header{margin-bottom:.6rem!important}:host ::ng-deep .page-header h1{font-size:1.25rem!important;margin-bottom:.25rem!important}:host ::ng-deep sdk-utilities .utilities-title{font-size:1.875rem!important;font-weight:700!important;line-height:1.2!important;letter-spacing:-.02em}:host ::ng-deep .card{border-radius:8px}:host ::ng-deep .card-header{padding:.6rem .9rem!important}:host ::ng-deep .card-title{font-size:1rem!important;margin-bottom:0!important}:host ::ng-deep .card-body{padding:.8rem!important}:host ::ng-deep .form-control,:host ::ng-deep .ng-select .ng-select-container{min-height:34px!important;font-size:13px!important}:host ::ng-deep .form-label,:host ::ng-deep label{font-size:13px!important;margin-bottom:.25rem!important}:host ::ng-deep .btn{font-size:13px!important;padding:.3rem .65rem!important}:host ::ng-deep .work-flow-card{max-width:400px!important;width:100%!important;margin-left:auto!important;margin-right:auto!important}:host ::ng-deep .work-flow-page-header .page-title,:host ::ng-deep .work-flow-page-header h1{font-size:.95rem!important}:host ::ng-deep .work-flow-card .card-header{padding:.4rem .6rem!important}:host ::ng-deep .work-flow-card .card-title{font-size:.85rem!important}:host ::ng-deep .work-flow-card .card-body{padding:.55rem .65rem .7rem!important}:host ::ng-deep .work-flow-card .form-group.form-row{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;margin-bottom:.55rem!important}:host ::ng-deep .work-flow-card .form-group.form-row>label.control-label{flex:0 0 8.5rem!important;max-width:8.5rem!important;width:8.5rem!important;margin-bottom:0!important;padding-top:0!important;text-align:right!important;font-size:.72rem!important}:host ::ng-deep .work-flow-card .form-group.form-row>.col-md-8{flex:1 1 auto!important;max-width:none!important;width:auto!important}:host ::ng-deep .work-flow-card .form-control{min-height:26px!important;height:26px!important;max-width:200px!important;width:100%!important;font-size:.72rem!important;padding:.1rem .35rem!important}:host ::ng-deep .work-flow-card textarea.form-control{height:auto!important;min-height:3rem!important;max-width:100%!important}:host ::ng-deep .work-flow-card .work-flow-footer .btn{font-size:.7rem!important;padding:.15rem .45rem!important}:host ::ng-deep .vendor-products-shell>.card-body{padding:1.25rem 1.35rem 1.5rem!important}:host ::ng-deep .vendor-products-shell .vendor-product-card .form-control{min-height:auto!important;height:auto!important;max-width:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UtilitiesComponent, selector: "sdk-utilities" }, { kind: "component", type: VendorProvidersComponent, selector: "sdk-vendor-providers" }, { kind: "component", type: WorkFlowComponent, selector: "sdk-work-flow" }, { kind: "component", type: RegionCommuneComponent, selector: "sdk-region-commune" }, { kind: "component", type: VendorProductsComponent, selector: "sdk-vendor-products", inputs: ["billData"], outputs: ["workflowCompleted"] }, { kind: "component", type: VendorPlansComponent, selector: "sdk-vendor-plans" }, { kind: "component", type: ViewBillsComponent, selector: "sdk-view-bills" }, { kind: "component", type: TopupAndBillpaymentReviewComponent, selector: "sdk-topup-and-billpayment-review" }] });
+  `, isInline: true, styles: [":host{display:block}:host ::ng-deep .sdk-utility-payments-container{font-size:13px;line-height:1.3}:host ::ng-deep .content{padding:.25rem!important}:host ::ng-deep .page-header{margin-bottom:.6rem!important}:host ::ng-deep .page-header h1{font-size:1.75rem!important;margin-bottom:.25rem!important}:host ::ng-deep sdk-utilities .utilities-title{font-size:1.875rem!important;font-weight:700!important;line-height:1.2!important;letter-spacing:-.02em}:host ::ng-deep .card{border-radius:8px}:host ::ng-deep .card-header{padding:.6rem .9rem!important}:host ::ng-deep .card-title{font-size:1rem!important;margin-bottom:0!important}:host ::ng-deep .card-body{padding:.8rem!important}:host ::ng-deep .form-control,:host ::ng-deep .ng-select .ng-select-container{min-height:34px!important;font-size:13px!important}:host ::ng-deep .form-label,:host ::ng-deep label{font-size:13px!important;margin-bottom:.25rem!important}:host ::ng-deep .btn{font-size:13px!important;padding:.3rem .65rem!important}:host ::ng-deep .work-flow-card{max-width:400px!important;width:100%!important;margin-left:auto!important;margin-right:auto!important}:host ::ng-deep .work-flow-page-header .page-title,:host ::ng-deep .work-flow-page-header h1{font-size:.95rem!important}:host ::ng-deep .work-flow-card .card-header{padding:.4rem .6rem!important}:host ::ng-deep .work-flow-card .card-title{font-size:.85rem!important}:host ::ng-deep .work-flow-card .card-body{padding:.55rem .65rem .7rem!important}:host ::ng-deep .work-flow-card .form-group.form-row{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;margin-bottom:.55rem!important}:host ::ng-deep .work-flow-card .form-group.form-row>label.control-label{flex:0 0 8.5rem!important;max-width:8.5rem!important;width:8.5rem!important;margin-bottom:0!important;padding-top:0!important;text-align:right!important;font-size:.72rem!important}:host ::ng-deep .work-flow-card .form-group.form-row>.col-md-8{flex:1 1 auto!important;max-width:none!important;width:auto!important}:host ::ng-deep .work-flow-card .form-control{min-height:26px!important;height:26px!important;max-width:200px!important;width:60%!important;font-size:.72rem!important;padding:.1rem .35rem!important}:host ::ng-deep .work-flow-card textarea.form-control{height:auto!important;min-height:3rem!important;max-width:100%!important}:host ::ng-deep .work-flow-card .work-flow-footer .btn{font-size:.7rem!important;padding:.15rem .45rem!important}:host ::ng-deep .vendor-products-shell>.card-body{padding:1.25rem 1.35rem 1.5rem!important}:host ::ng-deep .vendor-products-shell .vendor-product-card .form-control{min-height:auto!important;height:auto!important;max-width:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UtilitiesComponent, selector: "sdk-utilities" }, { kind: "component", type: VendorProvidersComponent, selector: "sdk-vendor-providers" }, { kind: "component", type: WorkFlowComponent, selector: "sdk-work-flow" }, { kind: "component", type: RegionCommuneComponent, selector: "sdk-region-commune" }, { kind: "component", type: VendorProductsComponent, selector: "sdk-vendor-products", inputs: ["billData"], outputs: ["workflowCompleted"] }, { kind: "component", type: VendorPlansComponent, selector: "sdk-vendor-plans" }, { kind: "component", type: ViewBillsComponent, selector: "sdk-view-bills" }, { kind: "component", type: TopupAndBillpaymentReviewComponent, selector: "sdk-topup-and-billpayment-review" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: UtilityPaymentsContainerComponent, decorators: [{
             type: Component,
@@ -5494,7 +6130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         }
       }
     </div>
-  `, styles: [":host{display:block}:host ::ng-deep .sdk-utility-payments-container{font-size:13px;line-height:1.3}:host ::ng-deep .content{padding:.75rem!important}:host ::ng-deep .page-header{margin-bottom:.6rem!important}:host ::ng-deep .page-header h1{font-size:1.25rem!important;margin-bottom:.25rem!important}:host ::ng-deep sdk-utilities .utilities-title{font-size:1.875rem!important;font-weight:700!important;line-height:1.2!important;letter-spacing:-.02em}:host ::ng-deep .card{border-radius:8px}:host ::ng-deep .card-header{padding:.6rem .9rem!important}:host ::ng-deep .card-title{font-size:1rem!important;margin-bottom:0!important}:host ::ng-deep .card-body{padding:.8rem!important}:host ::ng-deep .form-control,:host ::ng-deep .ng-select .ng-select-container{min-height:34px!important;font-size:13px!important}:host ::ng-deep .form-label,:host ::ng-deep label{font-size:13px!important;margin-bottom:.25rem!important}:host ::ng-deep .btn{font-size:13px!important;padding:.3rem .65rem!important}:host ::ng-deep .work-flow-card{max-width:400px!important;width:100%!important;margin-left:auto!important;margin-right:auto!important}:host ::ng-deep .work-flow-page-header .page-title,:host ::ng-deep .work-flow-page-header h1{font-size:.95rem!important}:host ::ng-deep .work-flow-card .card-header{padding:.4rem .6rem!important}:host ::ng-deep .work-flow-card .card-title{font-size:.85rem!important}:host ::ng-deep .work-flow-card .card-body{padding:.55rem .65rem .7rem!important}:host ::ng-deep .work-flow-card .form-group.form-row{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;margin-bottom:.55rem!important}:host ::ng-deep .work-flow-card .form-group.form-row>label.control-label{flex:0 0 8.5rem!important;max-width:8.5rem!important;width:8.5rem!important;margin-bottom:0!important;padding-top:0!important;text-align:right!important;font-size:.72rem!important}:host ::ng-deep .work-flow-card .form-group.form-row>.col-md-8{flex:1 1 auto!important;max-width:none!important;width:auto!important}:host ::ng-deep .work-flow-card .form-control{min-height:26px!important;height:26px!important;max-width:200px!important;width:100%!important;font-size:.72rem!important;padding:.1rem .35rem!important}:host ::ng-deep .work-flow-card textarea.form-control{height:auto!important;min-height:3rem!important;max-width:100%!important}:host ::ng-deep .work-flow-card .work-flow-footer .btn{font-size:.7rem!important;padding:.15rem .45rem!important}:host ::ng-deep .vendor-products-shell>.card-body{padding:1.25rem 1.35rem 1.5rem!important}:host ::ng-deep .vendor-products-shell .vendor-product-card .form-control{min-height:auto!important;height:auto!important;max-width:none!important}\n"] }]
+  `, styles: [":host{display:block}:host ::ng-deep .sdk-utility-payments-container{font-size:13px;line-height:1.3}:host ::ng-deep .content{padding:.25rem!important}:host ::ng-deep .page-header{margin-bottom:.6rem!important}:host ::ng-deep .page-header h1{font-size:1.75rem!important;margin-bottom:.25rem!important}:host ::ng-deep sdk-utilities .utilities-title{font-size:1.875rem!important;font-weight:700!important;line-height:1.2!important;letter-spacing:-.02em}:host ::ng-deep .card{border-radius:8px}:host ::ng-deep .card-header{padding:.6rem .9rem!important}:host ::ng-deep .card-title{font-size:1rem!important;margin-bottom:0!important}:host ::ng-deep .card-body{padding:.8rem!important}:host ::ng-deep .form-control,:host ::ng-deep .ng-select .ng-select-container{min-height:34px!important;font-size:13px!important}:host ::ng-deep .form-label,:host ::ng-deep label{font-size:13px!important;margin-bottom:.25rem!important}:host ::ng-deep .btn{font-size:13px!important;padding:.3rem .65rem!important}:host ::ng-deep .work-flow-card{max-width:400px!important;width:100%!important;margin-left:auto!important;margin-right:auto!important}:host ::ng-deep .work-flow-page-header .page-title,:host ::ng-deep .work-flow-page-header h1{font-size:.95rem!important}:host ::ng-deep .work-flow-card .card-header{padding:.4rem .6rem!important}:host ::ng-deep .work-flow-card .card-title{font-size:.85rem!important}:host ::ng-deep .work-flow-card .card-body{padding:.55rem .65rem .7rem!important}:host ::ng-deep .work-flow-card .form-group.form-row{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;margin-bottom:.55rem!important}:host ::ng-deep .work-flow-card .form-group.form-row>label.control-label{flex:0 0 8.5rem!important;max-width:8.5rem!important;width:8.5rem!important;margin-bottom:0!important;padding-top:0!important;text-align:right!important;font-size:.72rem!important}:host ::ng-deep .work-flow-card .form-group.form-row>.col-md-8{flex:1 1 auto!important;max-width:none!important;width:auto!important}:host ::ng-deep .work-flow-card .form-control{min-height:26px!important;height:26px!important;max-width:200px!important;width:60%!important;font-size:.72rem!important;padding:.1rem .35rem!important}:host ::ng-deep .work-flow-card textarea.form-control{height:auto!important;min-height:3rem!important;max-width:100%!important}:host ::ng-deep .work-flow-card .work-flow-footer .btn{font-size:.7rem!important;padding:.15rem .45rem!important}:host ::ng-deep .vendor-products-shell>.card-body{padding:1.25rem 1.35rem 1.5rem!important}:host ::ng-deep .vendor-products-shell .vendor-product-card .form-control{min-height:auto!important;height:auto!important;max-width:none!important}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }] } });