@miden-npm/angular 0.0.17 → 0.0.19

package/fesm2022/miden-npm-angular.mjs

@@ -3,8 +3,12 @@ import { Component, InjectionToken, inject, makeEnvironmentProviders, Input, Cha
 import * as i1$1 from '@angular/common/http';
 import { provideHttpClient, withInterceptors } from '@angular/common/http';
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { CommonModule, DatePipe } from '@angular/common';
+import * as i3 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i2 from 'angular-imask';
+import { IMaskModule } from 'angular-imask';
+import * as CryptoJS from 'crypto-js';
 
 class MidenPGAngular {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MidenPGAngular, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -389,6 +393,14 @@ const checkObjectTruthy = (obj) => {
         return false;
     return Object.values(obj).every(Boolean);
 };
+const getQueryParams = (url) => {
+    const params = {};
+    const searchParams = new URL(url).searchParams;
+    searchParams.forEach((value, key) => {
+        params[key] = value;
+    });
+    return params;
+};
 
 const currencySign = (currency) => {
     if (currency === 'USD')
@@ -422,6 +434,150 @@ const truncateString = (str, num) => {
     return str.slice(0, num) + '...';
 };
 
+function getValidationErrorMessage(control, fieldLabel = 'This field') {
+    if (!control || !control.errors || !control.touched)
+        return null;
+    if (control.errors['required']) {
+        return `${fieldLabel} is required`;
+    }
+    if (control.errors['minlength']) {
+        const requiredLength = control.errors['minlength'].requiredLength;
+        return `${fieldLabel} must be at least ${requiredLength} characters`;
+    }
+    if (control.errors['maxlength']) {
+        const requiredLength = control.errors['maxlength'].requiredLength;
+        return `${fieldLabel} must be at most ${requiredLength} characters`;
+    }
+    if (control.errors['pattern']) {
+        return `${fieldLabel} format is invalid`;
+    }
+    return `${fieldLabel} is invalid`;
+}
+
+const urlValidator = () => {
+    return (control) => {
+        if (!control.value)
+            return null;
+        // More permissive URL pattern that accepts localhost and various URL formats
+        const urlPattern = /^(https?:\/\/)?([\w\-]+(\.[\w\-]+)*|localhost)(:\d+)?([\w\-\._~:/?#[\]@!$&'()*+,;=.]+)?$/i;
+        return urlPattern.test(control.value) ? null : { invalidUrl: true };
+    };
+};
+
+var CardSchemes;
+(function (CardSchemes) {
+    CardSchemes[CardSchemes["Visa"] = 1] = "Visa";
+    CardSchemes[CardSchemes["MasterCard"] = 2] = "MasterCard";
+    CardSchemes[CardSchemes["Verve"] = 3] = "Verve";
+    CardSchemes[CardSchemes["MastercardAndVisa"] = 4] = "MastercardAndVisa";
+    CardSchemes[CardSchemes["AmericanExpress"] = 5] = "AmericanExpress";
+    CardSchemes[CardSchemes["Discover"] = 6] = "Discover";
+    CardSchemes[CardSchemes["JCB"] = 7] = "JCB";
+    CardSchemes[CardSchemes["DinersClub"] = 8] = "DinersClub";
+    CardSchemes[CardSchemes["Maestro"] = 9] = "Maestro";
+    CardSchemes[CardSchemes["UnionPay"] = 10] = "UnionPay";
+    CardSchemes[CardSchemes["UnionPay3DS"] = 11] = "UnionPay3DS";
+    CardSchemes[CardSchemes["UnionPayNon3DS"] = 12] = "UnionPayNon3DS";
+    CardSchemes[CardSchemes["UATP"] = 13] = "UATP";
+    CardSchemes[CardSchemes["PayPak"] = 14] = "PayPak";
+    CardSchemes[CardSchemes["Jaywan"] = 15] = "Jaywan";
+    CardSchemes[CardSchemes["Mada"] = 16] = "Mada";
+    CardSchemes[CardSchemes["MadaVisa"] = 17] = "MadaVisa";
+    CardSchemes[CardSchemes["MadaMastercard"] = 18] = "MadaMastercard";
+    CardSchemes[CardSchemes["Unknown"] = 19] = "Unknown";
+})(CardSchemes || (CardSchemes = {}));
+// ---------- Generic scheme regexes ----------
+const VISA_RE = /^4\d{12}(\d{3}){0,2}$/; // 13, 16, 19 digits
+const MC_RE = /^(?:5[1-5]\d{14}|2(?:2(?:2[1-9]|[3-9]\d)|[3-6]\d{2}|7(?:[01]\d|20))\d{12})(?:\d{0,3})?$/; // 16-19
+const AMEX_RE = /^(34|37)\d{13}$/; // 15
+const DISCOVER_RE = /^(?:6011|65|64[4-9]|622(?:12[6-9]|1[3-9]\d|[2-8]\d{2}|9(?:0\d|1\d|2[0-5])))\d{12,15}$/; // 16-19
+const JCB_RE = /^(?:35(?:2[8-9]|[3-8]\d))\d{12,15}$/; // 16-19
+const DINERS_RE = /^(?:3(?:0[0-5]\d|095|6\d|[89]\d))\d{11,13}$/; // 14-16
+const MAESTRO_RE = /^(?:50|5[6-9]|6[0-9])\d{10,17}$/; // 12-19
+const UNIONPAY_RE = /^62\d{14,17}$/; // 16-19
+const UATP_RE = /^1\d{14}$/; // 15
+// ---------- Known local/test BINs ----------
+const VERVE_BIN6_RANGES = [
+    [506099, 506198],
+    [650002, 650027],
+];
+const VERVE_BIN6_SINGLES = new Set([507865, 507866]);
+const PAYPAK_BIN6 = new Set([220545, 220543]);
+const JAYWAN_BIN7 = new Set([6690109]);
+const MADA_ONLY_BIN6 = new Set([968209, 873646]);
+const MADA_VISA_BIN6 = new Set([422818, 486094]);
+const MADA_MC_BIN6 = new Set([529741, 543357]);
+const UNIONPAY_3DS_BIN6 = new Set([620108]);
+const UNIONPAY_NON3DS_BIN6 = new Set([621423]);
+function cardType(cardNumber) {
+    const scheme = detect(cardNumber);
+    return CardSchemes[scheme]; // numeric enum reverse mapping -> name
+}
+function detect(cardNumber) {
+    if (!cardNumber || !cardNumber.trim())
+        return CardSchemes.Unknown;
+    // Normalize: digits only
+    const digits = cardNumber.replace(/\D/g, '');
+    if (digits.length < 12 || digits.length > 19)
+        return CardSchemes.Unknown;
+    // ---------- 1) Exact local/test BIN routing FIRST ----------
+    if (digits.length >= 6) {
+        const bin6 = parseInt(digits.slice(0, 6), 10);
+        // mada-only
+        if (MADA_ONLY_BIN6.has(bin6) && digits.length >= 16 && digits.length <= 19)
+            return CardSchemes.Mada;
+        // mada Visa
+        if (MADA_VISA_BIN6.has(bin6) && VISA_RE.test(digits))
+            return CardSchemes.MadaVisa;
+        // mada Mastercard
+        if (MADA_MC_BIN6.has(bin6) && MC_RE.test(digits))
+            return CardSchemes.MadaMastercard;
+        // PayPak
+        if (PAYPAK_BIN6.has(bin6) && digits.length === 16)
+            return CardSchemes.PayPak;
+        // UnionPay test BINs with 3DS status
+        if (UNIONPAY_3DS_BIN6.has(bin6) && UNIONPAY_RE.test(digits))
+            return CardSchemes.UnionPay3DS;
+        if (UNIONPAY_NON3DS_BIN6.has(bin6) && UNIONPAY_RE.test(digits))
+            return CardSchemes.UnionPayNon3DS;
+        // Verve
+        if (isVerve(bin6, digits.length))
+            return CardSchemes.Verve;
+    }
+    if (digits.length >= 7) {
+        const bin7 = parseInt(digits.slice(0, 7), 10);
+        // Jaywan
+        if (JAYWAN_BIN7.has(bin7) && digits.length === 16)
+            return CardSchemes.Jaywan;
+    }
+    // ---------- 2) Generic schemes ----------
+    if (UATP_RE.test(digits))
+        return CardSchemes.UATP;
+    if (AMEX_RE.test(digits))
+        return CardSchemes.AmericanExpress;
+    if (DISCOVER_RE.test(digits))
+        return CardSchemes.Discover;
+    if (JCB_RE.test(digits))
+        return CardSchemes.JCB;
+    if (DINERS_RE.test(digits))
+        return CardSchemes.DinersClub;
+    if (MC_RE.test(digits))
+        return CardSchemes.MasterCard;
+    if (VISA_RE.test(digits))
+        return CardSchemes.Visa;
+    if (UNIONPAY_RE.test(digits))
+        return CardSchemes.UnionPay;
+    if (MAESTRO_RE.test(digits))
+        return CardSchemes.Maestro;
+    return CardSchemes.Unknown;
+}
+function isVerve(bin6, length) {
+    if (length < 16 || length > 19)
+        return false;
+    const inRange = VERVE_BIN6_RANGES.some(([start, end]) => bin6 >= start && bin6 <= end);
+    return inRange || VERVE_BIN6_SINGLES.has(bin6);
+}
+
 class InputComponent {
     value = '';
     formattedValue = '';
@@ -493,17 +649,25 @@ class InputComponent {
                 useExisting: forwardRef(() => InputComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n  @if (label) {\n    <p class=\"mb-0 text-body-2xs font-normal text-heading-text\">\n      {{ label }}\n      @if (required) {\n        <span class=\"text-orange-required\">*</span>\n      }\n    </p>\n  }\n\n  <div\n    class=\"border-c px-3 py-2 flex items-center justify-between rounded-md h-12\"\n    [ngClass]=\"[\n      disabled ? 'bg-grey-50 cursor-not-allowed' : 'bg-white',\n      validationError ? 'border-red-300 bg-red-50' : 'border-grey-100',\n    ]\"\n  >\n    <ng-content select=\"[slot=prefix]\"></ng-content>\n    <input\n      [type]=\"type\"\n      [value]=\"formattedValue\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeyDown($event)\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder ? placeholder : 'Enter ' + label.toLowerCase()\"\n      inputmode=\"decimal\"\n      class=\"search-input bg-transparent outline-none border-none focus:outline-none focus:ring-0 text-body-2xs text-light-copy font-normal w-full\"\n    />\n\n    @if (!loading) {\n      <ng-container>\n        <ng-content select=\"[slot=suffix]\"></ng-content>\n        <!-- Copy icon -->\n        @if (showCopyIcon && value && value.trim() !== '') {\n          <div class=\"ml-2 flex items-center\">\n            <base-image\n              src=\"assets/images/copyIcon.svg\"\n              alt=\"copy\"\n              [width]=\"16\"\n              [height]=\"16\"\n              class=\"cursor-pointer hover:opacity-70 transition-opacity\"\n              (onClick)=\"copyHandler()\"\n            ></base-image>\n          </div>\n        }\n      </ng-container>\n    } @else {\n      <ng-template>\n        <icon-loader></icon-loader>\n      </ng-template>\n    }\n  </div>\n  @if (hint) {\n    <base-hint [hint]=\"hint\"></base-hint>\n  }\n  @if (validationError) {\n    <base-input-error [errorMessage]=\"validationError\"></base-input-error>\n  }\n</div>\n", styles: [":host{--select-placeholder-color: #9dbfde}:host .search-input::placeholder{color:var(--select-placeholder-color);opacity:1}:host .search-input::-webkit-input-placeholder{color:var(--select-placeholder-color)}:host .search-input::-moz-placeholder{color:var(--select-placeholder-color)}:host .search-input:-ms-input-placeholder{color:var(--select-placeholder-color)}:host .search-input::-ms-input-placeholder{color:var(--select-placeholder-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconLoaderComponent, selector: "icon-loader", inputs: ["color", "size"] }, { kind: "component", type: HintComponent, selector: "base-hint", inputs: ["hint"] }, { kind: "component", type: InputErrorComponent, selector: "base-input-error", inputs: ["errorMessage"] }, { kind: "component", type: ImageComponent, selector: "base-image", inputs: ["src", "alt", "isFullWidth", "width", "height", "customClass"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n  @if (label) {\n    <p class=\"mb-0 text-body-2xs font-normal text-heading-text\">\n      {{ label }}\n      @if (required) {\n        <span class=\"text-orange-required\">*</span>\n      }\n    </p>\n  }\n\n  <div\n    class=\"border-c px-3 py-2 flex items-center justify-between rounded-md h-12\"\n    [ngClass]=\"[\n      disabled ? 'bg-grey-50 cursor-not-allowed' : 'bg-white',\n      validationError ? 'border-red-300 bg-red-50' : 'border-grey-100',\n    ]\"\n  >\n    <ng-content select=\"[slot=prefix]\"></ng-content>\n    <input\n      [type]=\"type\"\n      [imask]=\"mask ? { mask, lazy: true } : undefined\"\n      [unmask]=\"mask ? 'typed' : false\"\n      [(ngModel)]=\"formattedValue\"\n      [disabled]=\"disabled\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeyDown($event)\"\n      [placeholder]=\"placeholder ? placeholder : 'Enter ' + label.toLowerCase()\"\n      inputmode=\"decimal\"\n      class=\"search-input bg-transparent outline-none border-none focus:outline-none focus:ring-0 text-body-2xs text-light-copy font-normal w-full\"\n    />\n\n    @if (!loading) {\n      <ng-container>\n        <ng-content select=\"[slot=suffix]\"></ng-content>\n        <!-- Copy icon -->\n        @if (showCopyIcon && value && value.trim() !== '') {\n          <div class=\"ml-2 flex items-center\">\n            <base-image\n              src=\"assets/images/copyIcon.svg\"\n              alt=\"copy\"\n              [width]=\"16\"\n              [height]=\"16\"\n              class=\"cursor-pointer hover:opacity-70 transition-opacity\"\n              (onClick)=\"copyHandler()\"\n            ></base-image>\n          </div>\n        }\n      </ng-container>\n    } @else {\n      <ng-template>\n        <icon-loader></icon-loader>\n      </ng-template>\n    }\n  </div>\n  @if (hint) {\n    <base-hint [hint]=\"hint\"></base-hint>\n  }\n  @if (validationError) {\n    <base-input-error [errorMessage]=\"validationError\"></base-input-error>\n  }\n</div>\n", styles: [":host{--select-placeholder-color: #9dbfde}:host .search-input::placeholder{color:var(--select-placeholder-color);opacity:1}:host .search-input::-webkit-input-placeholder{color:var(--select-placeholder-color)}:host .search-input::-moz-placeholder{color:var(--select-placeholder-color)}:host .search-input:-ms-input-placeholder{color:var(--select-placeholder-color)}:host .search-input::-ms-input-placeholder{color:var(--select-placeholder-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconLoaderComponent, selector: "icon-loader", inputs: ["color", "size"] }, { kind: "component", type: HintComponent, selector: "base-hint", inputs: ["hint"] }, { kind: "component", type: InputErrorComponent, selector: "base-input-error", inputs: ["errorMessage"] }, { kind: "component", type: ImageComponent, selector: "base-image", inputs: ["src", "alt", "isFullWidth", "width", "height", "customClass"], outputs: ["onClick"] }, { kind: "ngmodule", type: IMaskModule }, { kind: "directive", type: i2.IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, IconLoaderComponent, HintComponent, InputErrorComponent, ImageComponent], providers: [
+            args: [{ selector: 'base-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        IconLoaderComponent,
+                        HintComponent,
+                        InputErrorComponent,
+                        ImageComponent,
+                        IMaskModule,
+                        FormsModule,
+                    ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => InputComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"flex flex-col gap-2\">\n  @if (label) {\n    <p class=\"mb-0 text-body-2xs font-normal text-heading-text\">\n      {{ label }}\n      @if (required) {\n        <span class=\"text-orange-required\">*</span>\n      }\n    </p>\n  }\n\n  <div\n    class=\"border-c px-3 py-2 flex items-center justify-between rounded-md h-12\"\n    [ngClass]=\"[\n      disabled ? 'bg-grey-50 cursor-not-allowed' : 'bg-white',\n      validationError ? 'border-red-300 bg-red-50' : 'border-grey-100',\n    ]\"\n  >\n    <ng-content select=\"[slot=prefix]\"></ng-content>\n    <input\n      [type]=\"type\"\n      [value]=\"formattedValue\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeyDown($event)\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder ? placeholder : 'Enter ' + label.toLowerCase()\"\n      inputmode=\"decimal\"\n      class=\"search-input bg-transparent outline-none border-none focus:outline-none focus:ring-0 text-body-2xs text-light-copy font-normal w-full\"\n    />\n\n    @if (!loading) {\n      <ng-container>\n        <ng-content select=\"[slot=suffix]\"></ng-content>\n        <!-- Copy icon -->\n        @if (showCopyIcon && value && value.trim() !== '') {\n          <div class=\"ml-2 flex items-center\">\n            <base-image\n              src=\"assets/images/copyIcon.svg\"\n              alt=\"copy\"\n              [width]=\"16\"\n              [height]=\"16\"\n              class=\"cursor-pointer hover:opacity-70 transition-opacity\"\n              (onClick)=\"copyHandler()\"\n            ></base-image>\n          </div>\n        }\n      </ng-container>\n    } @else {\n      <ng-template>\n        <icon-loader></icon-loader>\n      </ng-template>\n    }\n  </div>\n  @if (hint) {\n    <base-hint [hint]=\"hint\"></base-hint>\n  }\n  @if (validationError) {\n    <base-input-error [errorMessage]=\"validationError\"></base-input-error>\n  }\n</div>\n", styles: [":host{--select-placeholder-color: #9dbfde}:host .search-input::placeholder{color:var(--select-placeholder-color);opacity:1}:host .search-input::-webkit-input-placeholder{color:var(--select-placeholder-color)}:host .search-input::-moz-placeholder{color:var(--select-placeholder-color)}:host .search-input:-ms-input-placeholder{color:var(--select-placeholder-color)}:host .search-input::-ms-input-placeholder{color:var(--select-placeholder-color)}\n"] }]
+                    ], template: "<div class=\"flex flex-col gap-2\">\n  @if (label) {\n    <p class=\"mb-0 text-body-2xs font-normal text-heading-text\">\n      {{ label }}\n      @if (required) {\n        <span class=\"text-orange-required\">*</span>\n      }\n    </p>\n  }\n\n  <div\n    class=\"border-c px-3 py-2 flex items-center justify-between rounded-md h-12\"\n    [ngClass]=\"[\n      disabled ? 'bg-grey-50 cursor-not-allowed' : 'bg-white',\n      validationError ? 'border-red-300 bg-red-50' : 'border-grey-100',\n    ]\"\n  >\n    <ng-content select=\"[slot=prefix]\"></ng-content>\n    <input\n      [type]=\"type\"\n      [imask]=\"mask ? { mask, lazy: true } : undefined\"\n      [unmask]=\"mask ? 'typed' : false\"\n      [(ngModel)]=\"formattedValue\"\n      [disabled]=\"disabled\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeyDown($event)\"\n      [placeholder]=\"placeholder ? placeholder : 'Enter ' + label.toLowerCase()\"\n      inputmode=\"decimal\"\n      class=\"search-input bg-transparent outline-none border-none focus:outline-none focus:ring-0 text-body-2xs text-light-copy font-normal w-full\"\n    />\n\n    @if (!loading) {\n      <ng-container>\n        <ng-content select=\"[slot=suffix]\"></ng-content>\n        <!-- Copy icon -->\n        @if (showCopyIcon && value && value.trim() !== '') {\n          <div class=\"ml-2 flex items-center\">\n            <base-image\n              src=\"assets/images/copyIcon.svg\"\n              alt=\"copy\"\n              [width]=\"16\"\n              [height]=\"16\"\n              class=\"cursor-pointer hover:opacity-70 transition-opacity\"\n              (onClick)=\"copyHandler()\"\n            ></base-image>\n          </div>\n        }\n      </ng-container>\n    } @else {\n      <ng-template>\n        <icon-loader></icon-loader>\n      </ng-template>\n    }\n  </div>\n  @if (hint) {\n    <base-hint [hint]=\"hint\"></base-hint>\n  }\n  @if (validationError) {\n    <base-input-error [errorMessage]=\"validationError\"></base-input-error>\n  }\n</div>\n", styles: [":host{--select-placeholder-color: #9dbfde}:host .search-input::placeholder{color:var(--select-placeholder-color);opacity:1}:host .search-input::-webkit-input-placeholder{color:var(--select-placeholder-color)}:host .search-input::-moz-placeholder{color:var(--select-placeholder-color)}:host .search-input:-ms-input-placeholder{color:var(--select-placeholder-color)}:host .search-input::-ms-input-placeholder{color:var(--select-placeholder-color)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{
                 type: Input
             }], type: [{
@@ -744,7 +908,7 @@ class SelectComponent {
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true }, { propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true }, { propertyName: "searchRef", first: true, predicate: ["searchRef"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-2 relative\">\n  @if (label) {\n    <p class=\"mb-0 text-body-2xs font-normal text-heading-text\">\n      {{ label }}\n      @if (required) {\n        <span class=\"text-orange-required\">*</span>\n      }\n    </p>\n  }\n\n  <!-- Trigger -->\n  <div\n    #triggerRef\n    class=\"border-c rounded-md flex items-center justify-between h-12 cursor-pointer px-3 py-2\"\n    [ngClass]=\"[\n      disabled ? 'bg-grey-100 cursor-not-allowed' : 'bg-white',\n      validationError ? 'border-red-300 bg-red-50' : 'border-grey-100 bg-white',\n    ]\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? 'select-menu' : null\"\n    [attr.aria-disabled]=\"disabled || null\"\n    [attr.aria-activedescendant]=\"isOpen && activeIndex >= 0 ? 'option-' + activeIndex : null\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    <div class=\"flex items-center gap-2\">\n      <ng-content select=\"[slot=prefix]\"></ng-content>\n      <div class=\"flex items-center gap-2\">\n        @if (selectedOption && itemImageType === 'country') {\n          <base-image\n            [src]=\"'https://flagcdn.com/w40/' + selectedOption.countryCode?.toLowerCase() + '.png'\"\n            [alt]=\"selectedOption.countryCode\"\n            [width]=\"28\"\n            customClass=\"rounded-lg\"\n          ></base-image>\n        }\n\n        @if (selectedOption && itemImageType === 'bank') {\n          <!-- <base-image\n            [src]=\"bankLogoHandler(selectedOption?.['bankCode'] || selectedOption?.value)\"\n            [alt]=\"selectedOption?.value\"\n            [width]=\"28\"\n            customClass=\"rounded-lg\"\n          ></base-image> -->\n        }\n\n        <p\n          class=\"text-body-2xs font-normal mb-0\"\n          [ngClass]=\"[selectedOption?.label ? 'text-sub-copy' : 'text-grey-500']\"\n        >\n          {{ displayText }}\n        </p>\n      </div>\n    </div>\n\n    @if (loading) {\n      <icon-loader></icon-loader>\n    } @else {\n      @if (isOpen) {\n        <icon-chevron-up width=\"20\" height=\"20\" color=\"#8FAECA\"></icon-chevron-up>\n      } @else {\n        <icon-chevron-down width=\"20\" height=\"20\" color=\"#8FAECA\"></icon-chevron-down>\n      }\n    }\n  </div>\n\n  <!-- Menu -->\n  @if (isOpen) {\n    <div\n      #menuRef\n      id=\"select-menu\"\n      class=\"border-c bg-white rounded-md border-grey-border text-body-xs font-normal text-input-grey w-full mt-2 max-h-22rem overflow-y-auto\"\n      role=\"listbox\"\n      [attr.aria-label]=\"label || 'Options'\"\n      style=\"position: absolute; top: 100%; z-index: 10;\"\n      (keydown)=\"onMenuKeydown($event)\"\n    >\n      @if (hasSearch) {\n        <div class=\"px-4 pt-2 pb-1\">\n          <input\n            #searchRef\n            type=\"text\"\n            (input)=\"onInput($event)\"\n            [placeholder]=\"'Search ' + label\"\n            class=\"bg-transparent outline-none border-b pb-2 w-full focus:outline-none focus:ring-0 text-body-2xs text-light-copy font-normal\"\n          />\n        </div>\n      }\n\n      <div\n        class=\"px-4 py-3 first:pt-0 hover:bg-gray-100 flex items-center gap-2 cursor-pointer\"\n        *ngFor=\"let option of filteredOptions; let i = index\"\n        (click)=\"onSelect(option.value)\"\n        [attr.id]=\"'option-' + i\"\n        data-option\n        role=\"option\"\n        [attr.aria-selected]=\"selectedOption?.value === option.value\"\n        [ngClass]=\"{ 'bg-gray-100': i === activeIndex }\"\n      >\n        @if (itemImageType === 'country') {\n          <base-image\n            [src]=\"'https://flagcdn.com/w40/' + (option.countryCode || '').toLowerCase() + '.png'\"\n            [alt]=\"option.countryCode\"\n            [width]=\"28\"\n            customClass=\"rounded-lg\"\n          ></base-image>\n        }\n\n        @if (itemImageType === 'bank') {\n          <!-- <base-image\n            [src]=\"bankLogoHandler(option['bankCode'] || option.value)\"\n            [alt]=\"option.value\"\n            [width]=\"28\"\n            customClass=\"rounded-lg\"\n          ></base-image> -->\n        }\n\n        <p class=\"mb-0 text-body-2xs font-medium\">\n          {{ option.label }}\n        </p>\n      </div>\n    </div>\n  }\n\n  @if (hint) {\n    <base-hint [hint]=\"hint\"></base-hint>\n  }\n  @if (validationError) {\n    <base-input-error [errorMessage]=\"validationError\"></base-input-error>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IconLoaderComponent, selector: "icon-loader", inputs: ["color", "size"] }, { kind: "component", type: IconChevronUpComponent, selector: "icon-chevron-up", inputs: ["color", "width", "height"] }, { kind: "component", type: IconChevronDownComponent, selector: "icon-chevron-down", inputs: ["color", "width", "height"] }, { kind: "component", type: HintComponent, selector: "base-hint", inputs: ["hint"] }, { kind: "component", type: InputErrorComponent, selector: "base-input-error", inputs: ["errorMessage"] }, { kind: "component", type: ImageComponent, selector: "base-image", inputs: ["src", "alt", "isFullWidth", "width", "height", "customClass"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true }, { propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true }, { propertyName: "searchRef", first: true, predicate: ["searchRef"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-2 relative\">\n  @if (label) {\n    <p class=\"mb-0 text-body-2xs font-normal text-heading-text\">\n      {{ label }}\n      @if (required) {\n        <span class=\"text-orange-required\">*</span>\n      }\n    </p>\n  }\n\n  <!-- Trigger -->\n  <div\n    #triggerRef\n    class=\"border-c rounded-md flex items-center justify-between h-12 cursor-pointer px-3 py-2\"\n    [ngClass]=\"[\n      disabled ? 'bg-grey-100 cursor-not-allowed' : 'bg-white',\n      validationError ? 'border-red-300' : 'border-grey-100 bg-white',\n    ]\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? 'select-menu' : null\"\n    [attr.aria-disabled]=\"disabled || null\"\n    [attr.aria-activedescendant]=\"isOpen && activeIndex >= 0 ? 'option-' + activeIndex : null\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    <div class=\"flex items-center gap-2\">\n      <ng-content select=\"[slot=prefix]\"></ng-content>\n      <div class=\"flex items-center gap-2\">\n        @if (selectedOption && itemImageType === 'country') {\n          <base-image\n            [src]=\"'https://flagcdn.com/w40/' + selectedOption.countryCode?.toLowerCase() + '.png'\"\n            [alt]=\"selectedOption.countryCode\"\n            [width]=\"28\"\n            customClass=\"rounded-lg\"\n          ></base-image>\n        }\n\n        @if (selectedOption && itemImageType === 'bank') {\n          <!-- <base-image\n            [src]=\"bankLogoHandler(selectedOption?.['bankCode'] || selectedOption?.value)\"\n            [alt]=\"selectedOption?.value\"\n            [width]=\"28\"\n            customClass=\"rounded-lg\"\n          ></base-image> -->\n        }\n\n        <p\n          class=\"text-body-2xs font-normal mb-0\"\n          [ngClass]=\"[selectedOption?.label ? 'text-sub-copy' : 'text-grey-500']\"\n        >\n          {{ displayText }}\n        </p>\n      </div>\n    </div>\n\n    @if (loading) {\n      <icon-loader></icon-loader>\n    } @else {\n      @if (isOpen) {\n        <icon-chevron-up width=\"20\" height=\"20\" color=\"#8FAECA\"></icon-chevron-up>\n      } @else {\n        <icon-chevron-down width=\"20\" height=\"20\" color=\"#8FAECA\"></icon-chevron-down>\n      }\n    }\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    <div\n      #menuRef\n      id=\"select-menu\"\n      class=\"absolute top-20 h-44 border-c bg-white rounded-md border-grey-border text-body-xs font-normal text-input-grey w-full mt-2 overflow-y-auto\"\n      role=\"listbox\"\n      [attr.aria-label]=\"label || 'Options'\"\n      style=\"position: absolute; top: 100%; z-index: 10;\"\n      (keydown)=\"onMenuKeydown($event)\"\n    >\n      @if (hasSearch) {\n        <div class=\"px-4 pt-2 pb-1\">\n          <input\n            #searchRef\n            type=\"text\"\n            (input)=\"onInput($event)\"\n            [placeholder]=\"'Search ' + label\"\n            class=\"bg-transparent outline-none border-b pb-2 w-full focus:outline-none focus:ring-0 text-body-2xs text-light-copy font-normal\"\n          />\n        </div>\n      }\n\n      <div\n        class=\"px-4 py-3 first:pt-0 hover:bg-gray-100 flex items-center gap-2 cursor-pointer\"\n        *ngFor=\"let option of filteredOptions; let i = index\"\n        (click)=\"onSelect(option.value)\"\n        [attr.id]=\"'option-' + i\"\n        data-option\n        role=\"option\"\n        [attr.aria-selected]=\"selectedOption?.value === option.value\"\n        [ngClass]=\"{ 'bg-gray-100': i === activeIndex }\"\n      >\n        @if (itemImageType === 'country') {\n          <base-image\n            [src]=\"'https://flagcdn.com/w40/' + (option.countryCode || '').toLowerCase() + '.png'\"\n            [alt]=\"option.countryCode\"\n            [width]=\"28\"\n            customClass=\"rounded-lg\"\n          ></base-image>\n        }\n\n        @if (itemImageType === 'bank') {\n          <!-- <base-image\n            [src]=\"bankLogoHandler(option['bankCode'] || option.value)\"\n            [alt]=\"option.value\"\n            [width]=\"28\"\n            customClass=\"rounded-lg\"\n          ></base-image> -->\n        }\n\n        <p class=\"mb-0 text-body-2xs font-medium\">\n          {{ option.label }}\n        </p>\n      </div>\n    </div>\n  }\n\n  @if (hint) {\n    <base-hint [hint]=\"hint\"></base-hint>\n  }\n  @if (validationError) {\n    <base-input-error [errorMessage]=\"validationError\"></base-input-error>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IconLoaderComponent, selector: "icon-loader", inputs: ["color", "size"] }, { kind: "component", type: IconChevronUpComponent, selector: "icon-chevron-up", inputs: ["color", "width", "height"] }, { kind: "component", type: IconChevronDownComponent, selector: "icon-chevron-down", inputs: ["color", "width", "height"] }, { kind: "component", type: HintComponent, selector: "base-hint", inputs: ["hint"] }, { kind: "component", type: InputErrorComponent, selector: "base-input-error", inputs: ["errorMessage"] }, { kind: "component", type: ImageComponent, selector: "base-image", inputs: ["src", "alt", "isFullWidth", "width", "height", "customClass"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -762,7 +926,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         HintComponent,
                         InputErrorComponent,
                         ImageComponent,
-                    ], template: "<div class=\"flex flex-col gap-2 relative\">\n  @if (label) {\n    <p class=\"mb-0 text-body-2xs font-normal text-heading-text\">\n      {{ label }}\n      @if (required) {\n        <span class=\"text-orange-required\">*</span>\n      }\n    </p>\n  }\n\n  <!-- Trigger -->\n  <div\n    #triggerRef\n    class=\"border-c rounded-md flex items-center justify-between h-12 cursor-pointer px-3 py-2\"\n    [ngClass]=\"[\n      disabled ? 'bg-grey-100 cursor-not-allowed' : 'bg-white',\n      validationError ? 'border-red-300 bg-red-50' : 'border-grey-100 bg-white',\n    ]\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? 'select-menu' : null\"\n    [attr.aria-disabled]=\"disabled || null\"\n    [attr.aria-activedescendant]=\"isOpen && activeIndex >= 0 ? 'option-' + activeIndex : null\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    <div class=\"flex items-center gap-2\">\n      <ng-content select=\"[slot=prefix]\"></ng-content>\n      <div class=\"flex items-center gap-2\">\n        @if (selectedOption && itemImageType === 'country') {\n          <base-image\n            [src]=\"'https://flagcdn.com/w40/' + selectedOption.countryCode?.toLowerCase() + '.png'\"\n            [alt]=\"selectedOption.countryCode\"\n            [width]=\"28\"\n            customClass=\"rounded-lg\"\n          ></base-image>\n        }\n\n        @if (selectedOption && itemImageType === 'bank') {\n          <!-- <base-image\n            [src]=\"bankLogoHandler(selectedOption?.['bankCode'] || selectedOption?.value)\"\n            [alt]=\"selectedOption?.value\"\n            [width]=\"28\"\n            customClass=\"rounded-lg\"\n          ></base-image> -->\n        }\n\n        <p\n          class=\"text-body-2xs font-normal mb-0\"\n          [ngClass]=\"[selectedOption?.label ? 'text-sub-copy' : 'text-grey-500']\"\n        >\n          {{ displayText }}\n        </p>\n      </div>\n    </div>\n\n    @if (loading) {\n      <icon-loader></icon-loader>\n    } @else {\n      @if (isOpen) {\n        <icon-chevron-up width=\"20\" height=\"20\" color=\"#8FAECA\"></icon-chevron-up>\n      } @else {\n        <icon-chevron-down width=\"20\" height=\"20\" color=\"#8FAECA\"></icon-chevron-down>\n      }\n    }\n  </div>\n\n  <!-- Menu -->\n  @if (isOpen) {\n    <div\n      #menuRef\n      id=\"select-menu\"\n      class=\"border-c bg-white rounded-md border-grey-border text-body-xs font-normal text-input-grey w-full mt-2 max-h-22rem overflow-y-auto\"\n      role=\"listbox\"\n      [attr.aria-label]=\"label || 'Options'\"\n      style=\"position: absolute; top: 100%; z-index: 10;\"\n      (keydown)=\"onMenuKeydown($event)\"\n    >\n      @if (hasSearch) {\n        <div class=\"px-4 pt-2 pb-1\">\n          <input\n            #searchRef\n            type=\"text\"\n            (input)=\"onInput($event)\"\n            [placeholder]=\"'Search ' + label\"\n            class=\"bg-transparent outline-none border-b pb-2 w-full focus:outline-none focus:ring-0 text-body-2xs text-light-copy font-normal\"\n          />\n        </div>\n      }\n\n      <div\n        class=\"px-4 py-3 first:pt-0 hover:bg-gray-100 flex items-center gap-2 cursor-pointer\"\n        *ngFor=\"let option of filteredOptions; let i = index\"\n        (click)=\"onSelect(option.value)\"\n        [attr.id]=\"'option-' + i\"\n        data-option\n        role=\"option\"\n        [attr.aria-selected]=\"selectedOption?.value === option.value\"\n        [ngClass]=\"{ 'bg-gray-100': i === activeIndex }\"\n      >\n        @if (itemImageType === 'country') {\n          <base-image\n            [src]=\"'https://flagcdn.com/w40/' + (option.countryCode || '').toLowerCase() + '.png'\"\n            [alt]=\"option.countryCode\"\n            [width]=\"28\"\n            customClass=\"rounded-lg\"\n          ></base-image>\n        }\n\n        @if (itemImageType === 'bank') {\n          <!-- <base-image\n            [src]=\"bankLogoHandler(option['bankCode'] || option.value)\"\n            [alt]=\"option.value\"\n            [width]=\"28\"\n            customClass=\"rounded-lg\"\n          ></base-image> -->\n        }\n\n        <p class=\"mb-0 text-body-2xs font-medium\">\n          {{ option.label }}\n        </p>\n      </div>\n    </div>\n  }\n\n  @if (hint) {\n    <base-hint [hint]=\"hint\"></base-hint>\n  }\n  @if (validationError) {\n    <base-input-error [errorMessage]=\"validationError\"></base-input-error>\n  }\n</div>\n" }]
+                    ], template: "<div class=\"flex flex-col gap-2 relative\">\n  @if (label) {\n    <p class=\"mb-0 text-body-2xs font-normal text-heading-text\">\n      {{ label }}\n      @if (required) {\n        <span class=\"text-orange-required\">*</span>\n      }\n    </p>\n  }\n\n  <!-- Trigger -->\n  <div\n    #triggerRef\n    class=\"border-c rounded-md flex items-center justify-between h-12 cursor-pointer px-3 py-2\"\n    [ngClass]=\"[\n      disabled ? 'bg-grey-100 cursor-not-allowed' : 'bg-white',\n      validationError ? 'border-red-300' : 'border-grey-100 bg-white',\n    ]\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? 'select-menu' : null\"\n    [attr.aria-disabled]=\"disabled || null\"\n    [attr.aria-activedescendant]=\"isOpen && activeIndex >= 0 ? 'option-' + activeIndex : null\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    <div class=\"flex items-center gap-2\">\n      <ng-content select=\"[slot=prefix]\"></ng-content>\n      <div class=\"flex items-center gap-2\">\n        @if (selectedOption && itemImageType === 'country') {\n          <base-image\n            [src]=\"'https://flagcdn.com/w40/' + selectedOption.countryCode?.toLowerCase() + '.png'\"\n            [alt]=\"selectedOption.countryCode\"\n            [width]=\"28\"\n            customClass=\"rounded-lg\"\n          ></base-image>\n        }\n\n        @if (selectedOption && itemImageType === 'bank') {\n          <!-- <base-image\n            [src]=\"bankLogoHandler(selectedOption?.['bankCode'] || selectedOption?.value)\"\n            [alt]=\"selectedOption?.value\"\n            [width]=\"28\"\n            customClass=\"rounded-lg\"\n          ></base-image> -->\n        }\n\n        <p\n          class=\"text-body-2xs font-normal mb-0\"\n          [ngClass]=\"[selectedOption?.label ? 'text-sub-copy' : 'text-grey-500']\"\n        >\n          {{ displayText }}\n        </p>\n      </div>\n    </div>\n\n    @if (loading) {\n      <icon-loader></icon-loader>\n    } @else {\n      @if (isOpen) {\n        <icon-chevron-up width=\"20\" height=\"20\" color=\"#8FAECA\"></icon-chevron-up>\n      } @else {\n        <icon-chevron-down width=\"20\" height=\"20\" color=\"#8FAECA\"></icon-chevron-down>\n      }\n    }\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    <div\n      #menuRef\n      id=\"select-menu\"\n      class=\"absolute top-20 h-44 border-c bg-white rounded-md border-grey-border text-body-xs font-normal text-input-grey w-full mt-2 overflow-y-auto\"\n      role=\"listbox\"\n      [attr.aria-label]=\"label || 'Options'\"\n      style=\"position: absolute; top: 100%; z-index: 10;\"\n      (keydown)=\"onMenuKeydown($event)\"\n    >\n      @if (hasSearch) {\n        <div class=\"px-4 pt-2 pb-1\">\n          <input\n            #searchRef\n            type=\"text\"\n            (input)=\"onInput($event)\"\n            [placeholder]=\"'Search ' + label\"\n            class=\"bg-transparent outline-none border-b pb-2 w-full focus:outline-none focus:ring-0 text-body-2xs text-light-copy font-normal\"\n          />\n        </div>\n      }\n\n      <div\n        class=\"px-4 py-3 first:pt-0 hover:bg-gray-100 flex items-center gap-2 cursor-pointer\"\n        *ngFor=\"let option of filteredOptions; let i = index\"\n        (click)=\"onSelect(option.value)\"\n        [attr.id]=\"'option-' + i\"\n        data-option\n        role=\"option\"\n        [attr.aria-selected]=\"selectedOption?.value === option.value\"\n        [ngClass]=\"{ 'bg-gray-100': i === activeIndex }\"\n      >\n        @if (itemImageType === 'country') {\n          <base-image\n            [src]=\"'https://flagcdn.com/w40/' + (option.countryCode || '').toLowerCase() + '.png'\"\n            [alt]=\"option.countryCode\"\n            [width]=\"28\"\n            customClass=\"rounded-lg\"\n          ></base-image>\n        }\n\n        @if (itemImageType === 'bank') {\n          <!-- <base-image\n            [src]=\"bankLogoHandler(option['bankCode'] || option.value)\"\n            [alt]=\"option.value\"\n            [width]=\"28\"\n            customClass=\"rounded-lg\"\n          ></base-image> -->\n        }\n\n        <p class=\"mb-0 text-body-2xs font-medium\">\n          {{ option.label }}\n        </p>\n      </div>\n    </div>\n  }\n\n  @if (hint) {\n    <base-hint [hint]=\"hint\"></base-hint>\n  }\n  @if (validationError) {\n    <base-input-error [errorMessage]=\"validationError\"></base-input-error>\n  }\n</div>\n" }]
         }], propDecorators: { options: [{
                 type: Input
             }], placeholder: [{
@@ -857,18 +1021,18 @@ class LabelInfoComponent {
     valueImageCustomClass = '';
     valueImagePosition = 'prefix';
     hasValueCopy = false;
-    value = '';
+    value = null;
     valueCustomClass = 'text-body-2xs font-medium text-sub-copy';
     alignRight = false;
     truncateStringHandler(str, num) {
         return truncateString(str, num);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: LabelInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: LabelInfoComponent, isStandalone: true, selector: "base-label-info", inputs: { type: "type", label: "label", labelCustomClass: "labelCustomClass", valueImageSrc: "valueImageSrc", valueImageCustomClass: "valueImageCustomClass", valueImagePosition: "valueImagePosition", hasValueCopy: "hasValueCopy", value: "value", valueCustomClass: "valueCustomClass", alignRight: "alignRight" }, ngImport: i0, template: "@if (type === 'vertical') {\n  <div class=\"flex flex-col gap-1\" [ngClass]=\"{ 'text-right items-end': alignRight }\">\n    <p [ngClass]=\"labelCustomClass\">{{ label.toUpperCase() }}</p>\n    <div class=\"flex items-center gap-1\">\n      @if (valueImageSrc && valueImagePosition === 'prefix') {\n        <base-image\n          [src]=\"valueImageSrc\"\n          [alt]=\"value\"\n          [width]=\"22\"\n          [customClass]=\"valueImageCustomClass\"\n        ></base-image>\n      }\n\n      @if (!hasValueCopy) {\n        <p [ngClass]=\"valueCustomClass\">\n          {{ value }}\n        </p>\n      } @else {\n        <p [ngClass]=\"valueCustomClass\" class=\"truncate\">\n          {{ truncateStringHandler(value, 40) }}\n        </p>\n      }\n\n      @if (hasValueCopy) {\n        <base-copy [copyText]=\"value\" color=\"#9DBFDE\"></base-copy>\n      }\n\n      @if (valueImageSrc && valueImagePosition === 'suffix') {\n        <base-image\n          [src]=\"valueImageSrc\"\n          [alt]=\"value\"\n          [width]=\"22\"\n          [customClass]=\"valueImageCustomClass\"\n        ></base-image>\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"flex items-center justify-between\">\n    <p [ngClass]=\"labelCustomClass\">{{ label.toUpperCase() }}</p>\n    <div class=\"flex items-center gap-1\">\n      @if (valueImageSrc && valueImagePosition === 'prefix') {\n        <base-image\n          [src]=\"valueImageSrc\"\n          [alt]=\"value\"\n          [width]=\"22\"\n          [customClass]=\"valueImageCustomClass\"\n        ></base-image>\n      }\n      <p [ngClass]=\"valueCustomClass\">\n        {{ value }}\n      </p>\n\n      @if (hasValueCopy) {\n        <base-copy [copyText]=\"value\" color=\"#9DBFDE\"></base-copy>\n      }\n\n      @if (valueImageSrc && valueImagePosition === 'suffix') {\n        <base-image\n          [src]=\"valueImageSrc\"\n          [alt]=\"value\"\n          [width]=\"22\"\n          [customClass]=\"valueImageCustomClass\"\n        ></base-image>\n      }\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CopyComponent, selector: "base-copy", inputs: ["copyText", "color"] }, { kind: "component", type: ImageComponent, selector: "base-image", inputs: ["src", "alt", "isFullWidth", "width", "height", "customClass"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: LabelInfoComponent, isStandalone: true, selector: "base-label-info", inputs: { type: "type", label: "label", labelCustomClass: "labelCustomClass", valueImageSrc: "valueImageSrc", valueImageCustomClass: "valueImageCustomClass", valueImagePosition: "valueImagePosition", hasValueCopy: "hasValueCopy", value: "value", valueCustomClass: "valueCustomClass", alignRight: "alignRight" }, ngImport: i0, template: "@if (type === 'vertical') {\n  <div class=\"flex flex-col gap-1\" [ngClass]=\"{ 'text-right items-end': alignRight }\">\n    <p [ngClass]=\"labelCustomClass\">{{ label.toUpperCase() }}</p>\n    <div class=\"flex items-center gap-1\">\n      @if (valueImageSrc && valueImagePosition === 'prefix') {\n        <base-image\n          [src]=\"valueImageSrc\"\n          [alt]=\"value ?? '-'\"\n          [width]=\"22\"\n          [customClass]=\"valueImageCustomClass\"\n        ></base-image>\n      }\n\n      @if (!hasValueCopy) {\n        <p [ngClass]=\"valueCustomClass\">\n          {{ value }}\n        </p>\n      } @else {\n        <p [ngClass]=\"valueCustomClass\" class=\"truncate\">\n          {{ truncateStringHandler(value ?? '-', 40) }}\n        </p>\n      }\n\n      @if (hasValueCopy) {\n        <base-copy [copyText]=\"value ?? '-'\" color=\"#9DBFDE\"></base-copy>\n      }\n\n      @if (valueImageSrc && valueImagePosition === 'suffix') {\n        <base-image\n          [src]=\"valueImageSrc\"\n          [alt]=\"value ?? '-'\"\n          [width]=\"22\"\n          [customClass]=\"valueImageCustomClass\"\n        ></base-image>\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"flex items-center justify-between\">\n    <p [ngClass]=\"labelCustomClass\">{{ label.toUpperCase() }}</p>\n    <div class=\"flex items-center gap-1\">\n      @if (valueImageSrc && valueImagePosition === 'prefix') {\n        <base-image\n          [src]=\"valueImageSrc\"\n          [alt]=\"value ?? '-'\"\n          [width]=\"22\"\n          [customClass]=\"valueImageCustomClass\"\n        ></base-image>\n      }\n      <p [ngClass]=\"valueCustomClass\">\n        {{ value }}\n      </p>\n\n      @if (hasValueCopy) {\n        <base-copy [copyText]=\"value ?? '-'\" color=\"#9DBFDE\"></base-copy>\n      }\n\n      @if (valueImageSrc && valueImagePosition === 'suffix') {\n        <base-image\n          [src]=\"valueImageSrc\"\n          [alt]=\"value ?? '-'\"\n          [width]=\"22\"\n          [customClass]=\"valueImageCustomClass\"\n        ></base-image>\n      }\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CopyComponent, selector: "base-copy", inputs: ["copyText", "color"] }, { kind: "component", type: ImageComponent, selector: "base-image", inputs: ["src", "alt", "isFullWidth", "width", "height", "customClass"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: LabelInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-label-info', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, CopyComponent, ImageComponent], template: "@if (type === 'vertical') {\n  <div class=\"flex flex-col gap-1\" [ngClass]=\"{ 'text-right items-end': alignRight }\">\n    <p [ngClass]=\"labelCustomClass\">{{ label.toUpperCase() }}</p>\n    <div class=\"flex items-center gap-1\">\n      @if (valueImageSrc && valueImagePosition === 'prefix') {\n        <base-image\n          [src]=\"valueImageSrc\"\n          [alt]=\"value\"\n          [width]=\"22\"\n          [customClass]=\"valueImageCustomClass\"\n        ></base-image>\n      }\n\n      @if (!hasValueCopy) {\n        <p [ngClass]=\"valueCustomClass\">\n          {{ value }}\n        </p>\n      } @else {\n        <p [ngClass]=\"valueCustomClass\" class=\"truncate\">\n          {{ truncateStringHandler(value, 40) }}\n        </p>\n      }\n\n      @if (hasValueCopy) {\n        <base-copy [copyText]=\"value\" color=\"#9DBFDE\"></base-copy>\n      }\n\n      @if (valueImageSrc && valueImagePosition === 'suffix') {\n        <base-image\n          [src]=\"valueImageSrc\"\n          [alt]=\"value\"\n          [width]=\"22\"\n          [customClass]=\"valueImageCustomClass\"\n        ></base-image>\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"flex items-center justify-between\">\n    <p [ngClass]=\"labelCustomClass\">{{ label.toUpperCase() }}</p>\n    <div class=\"flex items-center gap-1\">\n      @if (valueImageSrc && valueImagePosition === 'prefix') {\n        <base-image\n          [src]=\"valueImageSrc\"\n          [alt]=\"value\"\n          [width]=\"22\"\n          [customClass]=\"valueImageCustomClass\"\n        ></base-image>\n      }\n      <p [ngClass]=\"valueCustomClass\">\n        {{ value }}\n      </p>\n\n      @if (hasValueCopy) {\n        <base-copy [copyText]=\"value\" color=\"#9DBFDE\"></base-copy>\n      }\n\n      @if (valueImageSrc && valueImagePosition === 'suffix') {\n        <base-image\n          [src]=\"valueImageSrc\"\n          [alt]=\"value\"\n          [width]=\"22\"\n          [customClass]=\"valueImageCustomClass\"\n        ></base-image>\n      }\n    </div>\n  </div>\n}\n" }]
+            args: [{ selector: 'base-label-info', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, CopyComponent, ImageComponent], template: "@if (type === 'vertical') {\n  <div class=\"flex flex-col gap-1\" [ngClass]=\"{ 'text-right items-end': alignRight }\">\n    <p [ngClass]=\"labelCustomClass\">{{ label.toUpperCase() }}</p>\n    <div class=\"flex items-center gap-1\">\n      @if (valueImageSrc && valueImagePosition === 'prefix') {\n        <base-image\n          [src]=\"valueImageSrc\"\n          [alt]=\"value ?? '-'\"\n          [width]=\"22\"\n          [customClass]=\"valueImageCustomClass\"\n        ></base-image>\n      }\n\n      @if (!hasValueCopy) {\n        <p [ngClass]=\"valueCustomClass\">\n          {{ value }}\n        </p>\n      } @else {\n        <p [ngClass]=\"valueCustomClass\" class=\"truncate\">\n          {{ truncateStringHandler(value ?? '-', 40) }}\n        </p>\n      }\n\n      @if (hasValueCopy) {\n        <base-copy [copyText]=\"value ?? '-'\" color=\"#9DBFDE\"></base-copy>\n      }\n\n      @if (valueImageSrc && valueImagePosition === 'suffix') {\n        <base-image\n          [src]=\"valueImageSrc\"\n          [alt]=\"value ?? '-'\"\n          [width]=\"22\"\n          [customClass]=\"valueImageCustomClass\"\n        ></base-image>\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"flex items-center justify-between\">\n    <p [ngClass]=\"labelCustomClass\">{{ label.toUpperCase() }}</p>\n    <div class=\"flex items-center gap-1\">\n      @if (valueImageSrc && valueImagePosition === 'prefix') {\n        <base-image\n          [src]=\"valueImageSrc\"\n          [alt]=\"value ?? '-'\"\n          [width]=\"22\"\n          [customClass]=\"valueImageCustomClass\"\n        ></base-image>\n      }\n      <p [ngClass]=\"valueCustomClass\">\n        {{ value }}\n      </p>\n\n      @if (hasValueCopy) {\n        <base-copy [copyText]=\"value ?? '-'\" color=\"#9DBFDE\"></base-copy>\n      }\n\n      @if (valueImageSrc && valueImagePosition === 'suffix') {\n        <base-image\n          [src]=\"valueImageSrc\"\n          [alt]=\"value ?? '-'\"\n          [width]=\"22\"\n          [customClass]=\"valueImageCustomClass\"\n        ></base-image>\n      }\n    </div>\n  </div>\n}\n" }]
         }], propDecorators: { type: [{
                 type: Input
             }], label: [{
@@ -892,13 +1056,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
             }] } });
 
 class SuccessComponent {
+    successObject = {
+        paymentDate: '',
+        paymentId: '',
+        paymentStatus: '',
+    };
+    amount = 0;
+    currency = '';
+    redirectUrl = '';
+    get formatAmountHandler() {
+        return formatAmount(this.amount, this.currency);
+    }
+    goToRedirectUrl() {
+        window.open(this.redirectUrl, '_self', 'noopener,noreferrer');
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: SuccessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: SuccessComponent, isStandalone: true, selector: "base-success", ngImport: i0, template: "<div class=\"flex flex-col gap-8 p-16\">\n  <div class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-8\">\n      <icon-check-circle color=\"#F47A1F\" class=\"mx-auto\"></icon-check-circle>\n      <div class=\"flex flex-col text-center\" style=\"gap: 2px\">\n        <p class=\"text-heading-text font-medium text-header-2xl\">\u20A62,500.00</p>\n        <p class=\"text-sub-copy font-regular text-body-3xs\">Has been paid successfully</p>\n      </div>\n    </div>\n\n    <div class=\"flex flex-col\">\n      <div class=\"py-4 border-b border-grey-100\">\n        <base-label-info\n          type=\"horizontal\"\n          label=\"Order ID\"\n          value=\"9900009000-8890-8829hd7\"\n        ></base-label-info>\n      </div>\n      <div class=\"py-4\">\n        <base-label-info\n          type=\"horizontal\"\n          label=\"Payment date\"\n          value=\"July 24, 2025\"\n        ></base-label-info>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"mx-auto\" style=\"width: 80%;\">\n    <base-button\n      label=\"Return to Merchant Website\"\n      type=\"secondary\"\n      customClass=\"w-full\"\n    ></base-button>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: LabelInfoComponent, selector: "base-label-info", inputs: ["type", "label", "labelCustomClass", "valueImageSrc", "valueImageCustomClass", "valueImagePosition", "hasValueCopy", "value", "valueCustomClass", "alignRight"] }, { kind: "component", type: ButtonComponent, selector: "base-button", inputs: ["label", "type", "size", "paddingClassX", "disabled", "loading", "customClass"], outputs: ["onClick"] }, { kind: "component", type: IconCheckCircleComponent, selector: "icon-check-circle", inputs: ["color", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: SuccessComponent, isStandalone: true, selector: "base-success", inputs: { successObject: "successObject", amount: "amount", currency: "currency", redirectUrl: "redirectUrl" }, ngImport: i0, template: "<div class=\"flex flex-col gap-8 p-16\">\n  <div class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-8\">\n      <icon-check-circle color=\"#F47A1F\" class=\"mx-auto\"></icon-check-circle>\n      <div class=\"flex flex-col text-center\" style=\"gap: 2px\">\n        <p class=\"text-heading-text font-medium text-header-2xl\">{{ formatAmountHandler }}</p>\n        <p class=\"text-sub-copy font-regular text-body-3xs\">Has been paid successfully</p>\n      </div>\n    </div>\n\n    <div class=\"flex flex-col\">\n      <div class=\"py-4 border-b border-grey-100\">\n        <base-label-info\n          type=\"horizontal\"\n          label=\"Order ID\"\n          [value]=\"successObject.paymentId\"\n        ></base-label-info>\n      </div>\n      <div class=\"py-4\">\n        <base-label-info\n          type=\"horizontal\"\n          label=\"Payment date\"\n          [value]=\"successObject.paymentDate | date\"\n        ></base-label-info>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"mx-auto\" style=\"width: 80%\">\n    <base-button\n      label=\"Return to Merchant Website\"\n      type=\"secondary\"\n      customClass=\"w-full\"\n      (onClick)=\"goToRedirectUrl()\"\n    ></base-button>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: LabelInfoComponent, selector: "base-label-info", inputs: ["type", "label", "labelCustomClass", "valueImageSrc", "valueImageCustomClass", "valueImagePosition", "hasValueCopy", "value", "valueCustomClass", "alignRight"] }, { kind: "component", type: ButtonComponent, selector: "base-button", inputs: ["label", "type", "size", "paddingClassX", "disabled", "loading", "customClass"], outputs: ["onClick"] }, { kind: "component", type: IconCheckCircleComponent, selector: "icon-check-circle", inputs: ["color", "width", "height"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: SuccessComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-success', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LabelInfoComponent, ButtonComponent, IconCheckCircleComponent], template: "<div class=\"flex flex-col gap-8 p-16\">\n  <div class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-8\">\n      <icon-check-circle color=\"#F47A1F\" class=\"mx-auto\"></icon-check-circle>\n      <div class=\"flex flex-col text-center\" style=\"gap: 2px\">\n        <p class=\"text-heading-text font-medium text-header-2xl\">\u20A62,500.00</p>\n        <p class=\"text-sub-copy font-regular text-body-3xs\">Has been paid successfully</p>\n      </div>\n    </div>\n\n    <div class=\"flex flex-col\">\n      <div class=\"py-4 border-b border-grey-100\">\n        <base-label-info\n          type=\"horizontal\"\n          label=\"Order ID\"\n          value=\"9900009000-8890-8829hd7\"\n        ></base-label-info>\n      </div>\n      <div class=\"py-4\">\n        <base-label-info\n          type=\"horizontal\"\n          label=\"Payment date\"\n          value=\"July 24, 2025\"\n        ></base-label-info>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"mx-auto\" style=\"width: 80%;\">\n    <base-button\n      label=\"Return to Merchant Website\"\n      type=\"secondary\"\n      customClass=\"w-full\"\n    ></base-button>\n  </div>\n</div>\n" }]
-        }] });
+            args: [{ selector: 'base-success', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LabelInfoComponent, ButtonComponent, IconCheckCircleComponent, DatePipe], template: "<div class=\"flex flex-col gap-8 p-16\">\n  <div class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-8\">\n      <icon-check-circle color=\"#F47A1F\" class=\"mx-auto\"></icon-check-circle>\n      <div class=\"flex flex-col text-center\" style=\"gap: 2px\">\n        <p class=\"text-heading-text font-medium text-header-2xl\">{{ formatAmountHandler }}</p>\n        <p class=\"text-sub-copy font-regular text-body-3xs\">Has been paid successfully</p>\n      </div>\n    </div>\n\n    <div class=\"flex flex-col\">\n      <div class=\"py-4 border-b border-grey-100\">\n        <base-label-info\n          type=\"horizontal\"\n          label=\"Order ID\"\n          [value]=\"successObject.paymentId\"\n        ></base-label-info>\n      </div>\n      <div class=\"py-4\">\n        <base-label-info\n          type=\"horizontal\"\n          label=\"Payment date\"\n          [value]=\"successObject.paymentDate | date\"\n        ></base-label-info>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"mx-auto\" style=\"width: 80%\">\n    <base-button\n      label=\"Return to Merchant Website\"\n      type=\"secondary\"\n      customClass=\"w-full\"\n      (onClick)=\"goToRedirectUrl()\"\n    ></base-button>\n  </div>\n</div>\n" }]
+        }], propDecorators: { successObject: [{
+                type: Input
+            }], amount: [{
+                type: Input
+            }], currency: [{
+                type: Input
+            }], redirectUrl: [{
+                type: Input
+            }] } });
 
 class BackComponent {
     back = new EventEmitter();
@@ -968,6 +1154,10 @@ class CheckoutService {
     constructor(http) {
         this.http = http;
     }
+    billingInformation = {};
+    setBillingInfo(info) {
+        this.billingInformation = { ...info };
+    }
     createPaymentLink(payload, environment, secretKey) {
         const baseUrl = getBaseUrl(environment);
         return this.http.post(`${baseUrl}/api/v1/checkout/generate-payment-link2`, { ...payload, linkName: `${Date.now()}-link` }, {
@@ -976,6 +1166,34 @@ class CheckoutService {
             },
         });
     }
+    generatePaymentAccount(environment, { merchantId, ...rest }) {
+        const baseUrl = getBaseUrl(environment);
+        return this.http.post(`${baseUrl}/api/v1/checkout/generate-payment-account`, rest, {
+            headers: {
+                merchantId,
+            },
+        });
+    }
+    authorizeCardPayment(environment, { merchantId, ...rest }) {
+        const baseUrl = getBaseUrl(environment);
+        return this.http.post(`${baseUrl}/api/v1/checkout/authorize-card-3ds-payment`, rest, {
+            headers: {
+                merchantId,
+            },
+        });
+    }
+    getPaymentReferenceDetails(environment, paymentReference) {
+        const baseUrl = getBaseUrl(environment);
+        return this.http.get(`${baseUrl}/api/v1/checkout/details/${paymentReference}`);
+    }
+    generateStableCoinAddress(environment, { merchantId, ...rest }) {
+        const baseUrl = getBaseUrl(environment);
+        return this.http.post(`${baseUrl}/api/v1/checkout/generate-payment-walletaddress`, rest, {
+            headers: {
+                merchantId,
+            },
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CheckoutService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CheckoutService, providedIn: 'root' });
 }
@@ -986,6 +1204,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
 
+class ResourceService {
+    http;
+    constructor(http) {
+        this.http = http;
+    }
+    getCountries(environment, secretKey) {
+        const baseUrl = getBaseUrl(environment);
+        return this.http.get(`${baseUrl}/api/v1/countries-iso`, {
+            headers: {
+                merchantId: secretKey,
+            },
+        });
+    }
+    getCountryStates(countryIso3, environment, secretKey) {
+        const baseUrl = getBaseUrl(environment);
+        return this.http.get(`${baseUrl}/api/v1/state-by-country/${countryIso3}`, {
+            headers: {
+                merchantId: secretKey,
+            },
+        });
+    }
+    getStableCoins(environment) {
+        const baseUrl = getBaseUrl(environment);
+        return this.http.get(`${baseUrl}/api/v1/checkout/stable-coin`);
+    }
+    getStableCoinNetworks(environment, stableCoin) {
+        const baseUrl = getBaseUrl(environment);
+        return this.http.get(`${baseUrl}/api/v1/checkout/networks/${stableCoin}`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ResourceService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ResourceService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ResourceService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
+
+class EncryptService {
+    constructor() { }
+    encryptPayload(environment, formData = {}) {
+        const baseUrl = getBaseUrl(environment);
+        const key = CryptoJS.enc.Utf8.parse(baseUrl);
+        const iv = CryptoJS.enc.Utf8.parse(baseUrl);
+        const postDataObj = JSON.stringify(formData);
+        const encryptedData = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(postDataObj), key, {
+            keySize: 128 / 8,
+            iv: iv,
+            mode: CryptoJS.mode.CBC,
+            padding: CryptoJS.pad.Pkcs7,
+        });
+        const payload = encryptedData.toString();
+        const formSending = {
+            requestParam: payload,
+        };
+        return formSending;
+    }
+    decryptPayload(environment, payload) {
+        const baseUrl = getBaseUrl(environment);
+        const key = CryptoJS.enc.Utf8.parse(baseUrl);
+        const iv = CryptoJS.enc.Utf8.parse(baseUrl);
+        const decryptedData = CryptoJS.AES.decrypt(payload, key, {
+            keySize: 128 / 8,
+            iv: iv,
+            mode: CryptoJS.mode.CBC,
+            padding: CryptoJS.pad.Pkcs7,
+        });
+        const decryptedText = decryptedData.toString(CryptoJS.enc.Utf8);
+        const decryptedObj = JSON.parse(decryptedText);
+        return decryptedObj;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: EncryptService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: EncryptService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: EncryptService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
 /*
  * Public API Surface of miden-pg-angular
  */
@@ -994,5 +1294,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BZP_CONFIG, BZP_CORRELATION_ID, BackComponent, ButtonComponent, CardComponent, CheckoutService, CopyComponent, CurrencyAmountComponent, HintComponent, IconArrowSwapComponent, IconBuzapayIconComponent, IconCheckCircleComponent, IconChevronDownComponent, IconChevronLeftComponent, IconChevronUpComponent, IconCopySuccessComponent, IconLoaderComponent, IconUsdcComponent, IconUsdtComponent, ImageComponent, InputComponent, InputErrorComponent, LabelInfoComponent, MidenPGAngular, RadioGroupComponent, SelectComponent, SuccessComponent, apiBaseUrl, checkObjectTruthy, currencySign, formatAmount, getBaseUrl, provideMidenPG, restrictToNumericKeys, truncateString };
+export { BZP_CONFIG, BZP_CORRELATION_ID, BackComponent, ButtonComponent, CardComponent, CardSchemes, CheckoutService, CopyComponent, CurrencyAmountComponent, EncryptService, HintComponent, IconArrowSwapComponent, IconBuzapayIconComponent, IconCheckCircleComponent, IconChevronDownComponent, IconChevronLeftComponent, IconChevronUpComponent, IconCopySuccessComponent, IconLoaderComponent, IconUsdcComponent, IconUsdtComponent, ImageComponent, InputComponent, InputErrorComponent, LabelInfoComponent, MidenPGAngular, RadioGroupComponent, ResourceService, SelectComponent, SuccessComponent, apiBaseUrl, cardType, checkObjectTruthy, currencySign, detect, formatAmount, getBaseUrl, getQueryParams, getValidationErrorMessage, provideMidenPG, restrictToNumericKeys, truncateString, urlValidator };
 //# sourceMappingURL=miden-npm-angular.mjs.map