@croeminc/croem-card-widget 0.6.0-beta.2

package/fesm2020/croeminc-croem-card-widget.mjs

@@ -0,0 +1,868 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, Input, EventEmitter, Output, NgModule } from '@angular/core';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { Validators, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as cardValidator from 'card-validator';
+import * as i3$1 from '@ng-select/ng-select';
+import { NgSelectModule } from '@ng-select/ng-select';
+
+const LANG_EN = {
+    CardNumber: "Card Number",
+    CardHolderName: "Card Holder Name",
+    ExpiryDate: "Expiry Date",
+    CardType: "Card Type",
+    DoYouWishTo: "Do you wish to proceed with this request?",
+    RequestCancelled: "The request has been cancelled.",
+    APIKeyNull: "APIKey is NULL",
+    lblSave: "Save",
+    CVV: "CVV",
+    ValidThru: "Valid Thru",
+    Proceed: "Proceed to Pay",
+    TokenEmpty: "Token is Empty",
+    Update: "Update"
+};
+
+const LANG_ES = {
+    CardNumber: "Número de tarjeta",
+    CardHolderName: "Nombre del titular de la tarjeta",
+    ExpiryDate: "Fecha de caducidad",
+    CardType: "Tipo de tarjeta",
+    RequestCancelled: "La solicitud ha sido cancelada.",
+    DoYouWishTo: "¿Desea continuar con esta solicitud?",
+    APIKeyNull: "APIKey es nula",
+    lblSave: "Ahorrar",
+    CVV: "CVV",
+    ValidThru: "Valid Thru",
+    Proceed: "Proceda a pagar",
+    TokenEmpty: "El token está vacío.",
+    Update: "Actualizar"
+};
+
+class CroemCardWidgetService {
+    constructor() { }
+    async CardPayment(data, language, apiUrl, encryptedString) {
+        const queryString = `?request=${encodeURIComponent(encryptedString)}`;
+        const fullUrl = apiUrl + queryString;
+        if (language === 'en') {
+            this.currentLang = LANG_EN;
+        }
+        else if (language === 'es') {
+            this.currentLang = LANG_ES;
+        }
+        data.isSale = false;
+        if (data.APIKey != null) {
+            return this.apiCall(fullUrl);
+        }
+        else {
+            throw new Error(this.currentLang["APIKeyNull"]);
+        }
+    }
+    async addUpdateCardAPICall(apiUrl, encryptedString) {
+        const queryString = `?request=${encodeURIComponent(encryptedString)}`;
+        const fullUrl = apiUrl + queryString;
+        return this.apiCall(fullUrl);
+    }
+    async apiCall(fullUrl) {
+        var response;
+        try {
+            if (fullUrl.includes('GetCreditCard')) {
+                response = await fetch(fullUrl, {
+                    method: 'GET'
+                });
+            }
+            else {
+                response = await fetch(fullUrl, {
+                    method: 'POST'
+                });
+            }
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+            const responseText = await response.text();
+            return JSON.parse(responseText);
+        }
+        catch (error) {
+            console.log(error);
+            return error;
+        }
+    }
+}
+CroemCardWidgetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CroemCardWidgetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+CroemCardWidgetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CroemCardWidgetService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CroemCardWidgetService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+var CardMode;
+(function (CardMode) {
+    CardMode["Add"] = "0";
+    CardMode["Edit"] = "1";
+    CardMode["Show"] = "2";
+})(CardMode || (CardMode = {}));
+
+const constants = {
+    urls: {
+        updateDTRUrl: "api/UIComponentApi/UpdateCreditCard",
+        addDTRUrl: "api/UIComponentApi/CreateCreditCard",
+        paymentDTRUrl: "api/UIComponentApi/PerformTransaction",
+        getCardInfoByToken: "api/UIComponentApi/GetCreditCard"
+    }
+};
+
+class TextBoxComponent {
+    get isValid() { return this.form.controls[this.field.name].valid; }
+    get isDirty() { return this.form.controls[this.field.name].dirty; }
+    constructor() {
+    }
+}
+TextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TextBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TextBoxComponent, selector: "textbox", inputs: { field: "field", form: "form" }, ngImport: i0, template: "<div [formGroup]=\"form\">\r\n  <input \r\n  *ngIf=\"!field.multiline\" \r\n  [attr.type]=\"field.type\"\r\n  class=\"form-control\"  \r\n  [id]=\"field.name\" \r\n  [name]=\"field.name\"\r\n  [formControlName]=\"field.name\"\r\n  [placeholder]=\"field.placeholder\" >\r\n\r\n  <textarea *ngIf=\"field.multiline\" [formControlName]=\"field.name\" [id]=\"field.name\"\r\n  rows=\"9\" class=\"form-control\" [placeholder]=\"field.placeholder\"></textarea>\r\n  \r\n</div> ", dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TextBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'textbox', template: "<div [formGroup]=\"form\">\r\n  <input \r\n  *ngIf=\"!field.multiline\" \r\n  [attr.type]=\"field.type\"\r\n  class=\"form-control\"  \r\n  [id]=\"field.name\" \r\n  [name]=\"field.name\"\r\n  [formControlName]=\"field.name\"\r\n  [placeholder]=\"field.placeholder\" >\r\n\r\n  <textarea *ngIf=\"field.multiline\" [formControlName]=\"field.name\" [id]=\"field.name\"\r\n  rows=\"9\" class=\"form-control\" [placeholder]=\"field.placeholder\"></textarea>\r\n  \r\n</div> " }]
+        }], ctorParameters: function () { return []; }, propDecorators: { field: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }] } });
+
+class DropDownComponent {
+    ngOnInit() {
+        this.originalOptions = this.field.options ? [...this.field.options] : undefined;
+    }
+    filterOptions(options, event) {
+        const searchTerm = event.target.value;
+        if (options) {
+            return options.filter(opt => opt.label.toLowerCase().includes(searchTerm.toLowerCase()));
+        }
+        else {
+            return [];
+        }
+    }
+    constructor() {
+    }
+}
+DropDownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DropDownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DropDownComponent, selector: "dropdown", inputs: { field: "field", form: "form" }, ngImport: i0, template: "<div [formGroup]=\"form\">\r\n  <ng-select [placeholder]=\"'Select a ' + field.label\" [formControlName]=\"field.name\" [id]=\"field.name\"\r\n    [searchable]=\"false\" class=\"custom-ng-select\" [readonly]=\"field.disable\">\r\n    <ng-template ng-header-tmp>\r\n      <input class=\"custom-ng-select-search\" style=\"width: 100%; line-height: 24px\" type=\"text\"\r\n        (input)=\"field.options = filterOptions(originalOptions, $event)\" [formControlName]=\"field.name\"\r\n        placeholder=\"\"  />\r\n    </ng-template>\r\n\r\n    <ng-option *ngFor=\"let opt of field.options\" [value]=\"opt.key\" aria-readonly=\"true\">{{opt.label}}</ng-option>\r\n  </ng-select>\r\n</div>", dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i3$1.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }, { kind: "directive", type: i3$1.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dropdown', template: "<div [formGroup]=\"form\">\r\n  <ng-select [placeholder]=\"'Select a ' + field.label\" [formControlName]=\"field.name\" [id]=\"field.name\"\r\n    [searchable]=\"false\" class=\"custom-ng-select\" [readonly]=\"field.disable\">\r\n    <ng-template ng-header-tmp>\r\n      <input class=\"custom-ng-select-search\" style=\"width: 100%; line-height: 24px\" type=\"text\"\r\n        (input)=\"field.options = filterOptions(originalOptions, $event)\" [formControlName]=\"field.name\"\r\n        placeholder=\"\"  />\r\n    </ng-template>\r\n\r\n    <ng-option *ngFor=\"let opt of field.options\" [value]=\"opt.key\" aria-readonly=\"true\">{{opt.label}}</ng-option>\r\n  </ng-select>\r\n</div>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { field: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }] } });
+
+class FieldBuilderComponent {
+    get isValid() { return this.form.controls[this.field.name].valid; }
+    get isDirty() { return this.form.controls[this.field.name].dirty; }
+    constructor() { }
+    ngOnInit() {
+    }
+}
+FieldBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FieldBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FieldBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FieldBuilderComponent, selector: "field-builder", inputs: { field: "field", form: "form" }, ngImport: i0, template: "<div class=\"form-group row\" [formGroup]=\"form\">\r\n  <label class=\"col-md-12 form-control-label\" [attr.for]=\"field.name\">\r\n    {{field.label}}\r\n    <strong class=\"text-danger\" *ngIf=\"field.required\">*</strong>\r\n  </label>\r\n  <div class=\"col-md-12\" [ngSwitch]=\"field.type\">\r\n    <textbox *ngSwitchCase=\"'text'\" [field]=\"field\" [form]=\"form\"></textbox>\r\n    <dropdown *ngSwitchCase=\"'dropdown'\" [field]=\"field\" [form]=\"form\"></dropdown>\r\n  </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: TextBoxComponent, selector: "textbox", inputs: ["field", "form"] }, { kind: "component", type: DropDownComponent, selector: "dropdown", inputs: ["field", "form"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FieldBuilderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'field-builder', template: "<div class=\"form-group row\" [formGroup]=\"form\">\r\n  <label class=\"col-md-12 form-control-label\" [attr.for]=\"field.name\">\r\n    {{field.label}}\r\n    <strong class=\"text-danger\" *ngIf=\"field.required\">*</strong>\r\n  </label>\r\n  <div class=\"col-md-12\" [ngSwitch]=\"field.type\">\r\n    <textbox *ngSwitchCase=\"'text'\" [field]=\"field\" [form]=\"form\"></textbox>\r\n    <dropdown *ngSwitchCase=\"'dropdown'\" [field]=\"field\" [form]=\"form\"></dropdown>\r\n  </div>\r\n</div>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { field: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }] } });
+
+class AddCardWidgetComponent {
+    constructor(formBuilder, croemCardService) {
+        this.formBuilder = formBuilder;
+        this.croemCardService = croemCardService;
+        this.widgetResponseEmitter = new EventEmitter();
+        this.fieldResponseEmitter = new EventEmitter();
+        this.loader = new EventEmitter();
+        this.fields = [];
+        this.dynamicFields = {};
+        this.showLoader = false;
+        this.showInputErrorNumber = true;
+        this.showInputErrorDate = true;
+        this.showInputErrorName = true;
+        this.maxLength = 19;
+        this.maxExpYear = 28;
+    }
+    ngOnInit() {
+        this.switchLanguage(this.inputParamsForWidgetForAdd.Culture);
+        //---Dynamic Form creation innitializing form group(i.e cardForm) to pass onto the dynamic form builder component ------
+        for (const field of this.fields) {
+            const validators = [];
+            if (field.required) {
+                validators.push(Validators.required);
+            }
+            this.dynamicFields[field.name] = [field.value || null, validators];
+        }
+        const predefinedControls = {
+            name: ['', [Validators.required]],
+            cardNumber: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(19)]],
+            validityDate: ['', [Validators.required, Validators.minLength(5)]],
+        };
+        this.cardForm = this.formBuilder.group({
+            ...predefinedControls,
+            ...this.dynamicFields
+        });
+        let fieldsContrls = {};
+        for (let f of this.fields) {
+            if (f.type !== 'checkbox') {
+                fieldsContrls[f.name] = new FormControl(f.value || '', Validators.required);
+            }
+            else {
+                let opts = {};
+                if (f.options) {
+                    for (let opt of f.options) {
+                        opts[opt.key] = new FormControl(opt.label);
+                    }
+                }
+                fieldsContrls[f.name] = new FormGroup(opts);
+            }
+        }
+    }
+    //---localization  To add a new property to this go localization dir and add your property insdei en.ts and es.ts ------
+    switchLanguage(language) {
+        if (language === 'en') {
+            this.currentLang = LANG_EN;
+        }
+        else if (language === 'es') {
+            this.currentLang = LANG_ES;
+        }
+    }
+    createCard() {
+        this.addCard();
+    }
+    async addCard() {
+        try {
+            this.showLoader = true;
+            this.loader.emit(this.showLoader);
+            const apiUrl = this.inputParamsForWidgetForAdd.DtrUrl + constants.urls.addDTRUrl;
+            //----encryption-------
+            var encode = this.encoding(); //--encoding parameters 
+            this.encryptedString = this.innitializeKey(encode); //--innitializing DSA key
+            this.addCardResponse = await this.croemCardService.addUpdateCardAPICall(apiUrl, this.encryptedString); //--API Call to add card in DTR
+            this.showLoader = false;
+            this.fieldResponseEmitter.emit(this.cardForm.controls);
+            this.widgetResponseEmitter.emit(this.addCardResponse);
+        }
+        catch (error) {
+            console.log(error);
+            this.showLoader = false;
+            this.widgetResponseEmitter.emit(this.addCardResponse);
+        }
+    }
+    encoding() {
+        return this.cardForm.value.cardNumber + "\\" +
+            this.cardForm.value.name + "\\" +
+            this.cardForm.value.validityDate.substring(0, 2) + "\\" +
+            this.cardForm.value.validityDate.substring(3) + "\\" +
+            "" + "\\" +
+            "" + "\\" +
+            this.inputParamsForWidgetForAdd.APIKey + "\\" +
+            this.inputParamsForWidgetForAdd.Culture + "\\" +
+            "" + "\\" +
+            (this.inputParamsForWidgetForAdd.IsSale ?? false) + "\\" +
+            (this.inputParamsForWidgetForAdd.Amount ?? "0") + "\\" +
+            (this.inputParamsForWidgetForAdd.ProductDetails ?? "0") + "\\" +
+            "" + "\\" +
+            "" + "\\" +
+            (this.inputParamsForWidgetForAdd.Itbms ?? "0") + "\\" +
+            this.inputParamsForWidgetForAdd.Mode;
+    }
+    innitializeKey(encode) {
+        var key = initializeKey(this.inputParamsForWidgetForAdd.Keys.EncKey1, this.inputParamsForWidgetForAdd.Keys.EncKey2);
+        return encryptedString(key, encode);
+    }
+    formatDate(event) {
+        let input = event.target.value;
+        input = input.replace(/\D/g, '');
+        const month = this.formatMonth(input.substring(0, 2));
+        const year = input.substring(2, 4);
+        const formattedDate = month + (year ? '/' + year : '');
+        event.target.value = formattedDate;
+        this.cardForm.controls['validityDate'].setValue(formattedDate);
+        this.validityDate = this.cardForm.controls['validityDate'].value;
+        this.validateDate();
+    }
+    formatMonth(month) {
+        const validMonth = parseInt(month, 10);
+        return (validMonth > 1 && validMonth <= 9) ? '0' + validMonth : month;
+    }
+    maskCardNumber() {
+        if (this.cardNumber && this.cardNumber.length > 0) {
+            const maskedNumber = '•'.repeat(Math.max(0, this.cardNumber.length - 4)) + this.cardNumber.slice(-4);
+            return maskedNumber.replace(/(•{4})/g, '$1 ');
+        }
+        else {
+            return '•••• •••• •••• ••••';
+        }
+    }
+    maskName() {
+        return this.name ? this.name : 'Your Name';
+    }
+    maskDate() {
+        return this.validityDate ? this.validityDate : '••/••';
+    }
+    validateDate() {
+        if (!this.inputParamsForWidgetForAdd.IsSale) {
+            this.showInputErrorDate = cardValidator.expirationDate(this.validityDate, this.maxExpYear).isValid;
+        }
+        else {
+            this.showInputErrorDate = true;
+        }
+    }
+    validateNumber() {
+        const valid = cardValidator.number(this.cardNumber).isValid;
+        this.showInputErrorNumber = valid;
+    }
+    bindNumber(event) {
+        this.cardNumber = event.target.value;
+        this.validateNumber();
+    }
+    bindName(event) {
+        this.name = event.target.value;
+        this.validateName();
+    }
+    restControl(controlname) {
+        const control = this.cardForm.get(controlname);
+        control.reset();
+    }
+    validateName() {
+        if (this.name.length > 4) {
+            this.showInputErrorName = true;
+        }
+        else {
+            this.showInputErrorName = false;
+        }
+    }
+}
+AddCardWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AddCardWidgetComponent, deps: [{ token: i1.FormBuilder }, { token: CroemCardWidgetService }], target: i0.ɵɵFactoryTarget.Component });
+AddCardWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AddCardWidgetComponent, selector: "lib-add-card-widget", inputs: { inputParamsForWidgetForAdd: "inputParamsForWidgetForAdd", fields: "fields" }, outputs: { widgetResponseEmitter: "widgetResponseEmitter", fieldResponseEmitter: "fieldResponseEmitter", loader: "loader" }, ngImport: i0, template: "<form class=\"container-fluid py-3\" [formGroup]=\"cardForm\" *ngIf=\"(inputParamsForWidgetForAdd.APIKey)\">\r\n    <div class=\"p-0\">\r\n        <div class=\"d-flex justify-content-center mb-4\">\r\n            <div class=\"card\">\r\n                <div class=\"card-inner\">\r\n                    <div class=\"front\">\r\n                        <!-- Top Bar: Chip & Brand Logo -->\r\n                        <div class=\"card-top-bar\">\r\n                            <div class=\"chip\"></div>\r\n                            <div class=\"card-brand\">\r\n                                <span class=\"brand-text\">SECURE CARD</span>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Middle Bar: Card Number -->\r\n                        <div class=\"card-number-display\">\r\n                            <span>{{maskCardNumber()}}</span>\r\n                        </div>\r\n\r\n                        <!-- Bottom Bar: Cardholder Name & Expiration Date -->\r\n                        <div class=\"card-bottom-bar\">\r\n                            <div class=\"card-holder-info\">\r\n                                <label class=\"card-label\">CARDHOLDER</label>\r\n                                <span class=\"card-value\">{{maskName()}}</span>\r\n                            </div>\r\n                            <div class=\"card-expiry-info\">\r\n                                <label class=\"card-label\">{{currentLang[\"ValidThru\"]}}</label>\r\n                                <span class=\"card-value\">{{maskDate()}}</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Dynamic Form Fields -->\r\n        <div class=\"dynamic-fields-container mb-3\">\r\n            <div *ngFor=\"let field of fields\" class=\"mb-3\">\r\n                <field-builder [field]=\"field\" [form]=\"cardForm\"></field-builder>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Static Form Fields -->\r\n        <div class=\"card-form-fields\">\r\n            <div class=\"row mb-3\">\r\n                <div class=\"col-12\">\r\n                    <div class=\"form-group-custom\">\r\n                        <label for=\"card-number\" class=\"form-label-custom\">\r\n                            {{currentLang[\"CardNumber\"]}} <span class=\"text-danger\">*</span>\r\n                        </label>\r\n                        <div class=\"input-wrapper\">\r\n                            <input class=\"form-control-custom\" type=\"text\" id=\"card-number\"\r\n                                [class.inputError]=\"!showInputErrorNumber\" [placeholder]=\"currentLang['CardNumber']\"\r\n                                formControlName=\"cardNumber\" (input)=\"bindNumber($event)\" [maxlength]=\"maxLength\" />\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mb-3\">\r\n                <div class=\"col-12\">\r\n                    <div class=\"form-group-custom\">\r\n                        <label for=\"name\" class=\"form-label-custom\">\r\n                            {{currentLang[\"CardHolderName\"]}} <span class=\"text-danger\">*</span>\r\n                        </label>\r\n                        <div class=\"input-wrapper\">\r\n                            <input class=\"form-control-custom\" type=\"text\" id=\"name\"\r\n                                [placeholder]=\"currentLang['CardHolderName']\" [class.inputError]=\"!showInputErrorName\"\r\n                                (input)=\"bindName($event)\" formControlName=\"name\" />\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mb-4\">\r\n                <div class=\"col-6\">\r\n                    <div class=\"form-group-custom\">\r\n                        <label for=\"validity-date\" class=\"form-label-custom\">\r\n                            {{currentLang[\"ExpiryDate\"]}} <span class=\"text-danger\">*</span>\r\n                        </label>\r\n                        <div class=\"input-wrapper date-wrapper\">\r\n                            <input class=\"form-control-custom\" type=\"text\" id=\"validity-date\"\r\n                                [class.inputError]=\"!showInputErrorDate\" placeholder=\"MM/YY\"\r\n                                formControlName=\"validityDate\" (input)=\"formatDate($event)\" />\r\n                            <span class=\"calendar-icon\"></span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"form-actions-custom\">\r\n        <button class=\"btn-submit\" type=\"submit\" [disabled]=\"!cardForm.valid\" (click)=\"createCard()\">\r\n            <span class=\"btn-text\">{{currentLang[\"lblSave\"]}}</span>\r\n        </button>\r\n    </div>\r\n</form>", styles: [".card{width:100%;max-width:400px;height:230px;color:#fff;perspective:1000px;border:none;background:transparent;margin:0 auto}.card-inner{width:100%;height:100%;position:relative;transition:transform .8s cubic-bezier(.175,.885,.32,1.275);transform-style:preserve-3d}.front{width:100%;height:100%;position:absolute;top:0;left:0;padding:24px 28px;border-radius:20px;overflow:hidden;z-index:1;backface-visibility:hidden;background:linear-gradient(135deg,rgba(17,24,39,.95) 0%,rgba(31,41,55,.95) 100%);box-shadow:0 20px 35px #00000040,inset 0 1px #ffffff26;border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;justify-content:space-between;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;transition:all .3s ease}.front:before{content:\"\";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(99,102,241,.12) 0%,transparent 70%);pointer-events:none}.card-top-bar{display:flex;justify-content:space-between;align-items:center}.chip{width:48px;height:35px;background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);border-radius:6px;position:relative;box-shadow:inset 0 1px 2px #ffffff4d}.chip:before{content:\"\";position:absolute;inset:0;border:1px solid rgba(0,0,0,.15);border-radius:6px;background-image:linear-gradient(90deg,transparent 50%,rgba(0,0,0,.1) 50%),linear-gradient(0deg,transparent 50%,rgba(0,0,0,.1) 50%);background-size:10px 10px}.brand-text{font-size:10px;letter-spacing:2px;color:#ffffffb3;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.2)}.card-number-display{font-family:Courier New,Courier,monospace;font-size:20px;letter-spacing:3px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3);margin:18px 0;text-align:center;-webkit-user-select:none;user-select:none}.card-bottom-bar{display:flex;justify-content:space-between;align-items:flex-end}.card-label{display:block;font-size:8px;color:#fff6;letter-spacing:1.5px;margin-bottom:2px;text-transform:uppercase}.card-value{display:block;font-size:13px;color:#fff;letter-spacing:.5px;font-weight:600;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.form-group-custom{display:flex;flex-direction:column;margin-bottom:12px}.form-label-custom{font-size:13px;font-weight:600;color:#374151;margin-bottom:6px;letter-spacing:.2px}.input-wrapper{position:relative;width:100%}.form-control-custom{width:100%;background-color:#f9fafb;border:1px solid #d1d5db;border-radius:8px;padding:10px 14px;font-size:14px;color:#1f2937;transition:all .2s ease-in-out;box-shadow:inset 0 1px 2px #00000005}.form-control-custom:focus{background-color:#fff;border-color:#4f46e5;box-shadow:0 0 0 3px #4f46e51f;outline:none}.inputError,.inputError:focus{border-color:#ef4444!important;box-shadow:0 0 0 3px #ef44441f!important}.date-wrapper{display:flex;align-items:center}.calendar-icon{width:18px;height:18px;position:absolute;right:12px;pointer-events:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-size:contain}.form-actions-custom{display:flex;justify-content:flex-end;margin-top:20px;border-top:1px solid #f3f4f6;padding-top:16px}.btn-submit{color:#fff;background-color:#5a75b6;border:solid 2px #5A75B6;border-radius:8px;padding:8px;min-width:120px;margin-right:10px}.btn-submit:hover{background-color:#3e578e;color:#fff}.btn-submit:disabled,.btn-previous:disabled,.btn-next:disabled{background-color:#ecebeb!important;border:solid 2px #ecebeb!important;color:#9c9c9c!important;cursor:not-allowed}.breathing-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0f172a99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999}.show{display:block}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FieldBuilderComponent, selector: "field-builder", inputs: ["field", "form"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AddCardWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-add-card-widget', template: "<form class=\"container-fluid py-3\" [formGroup]=\"cardForm\" *ngIf=\"(inputParamsForWidgetForAdd.APIKey)\">\r\n    <div class=\"p-0\">\r\n        <div class=\"d-flex justify-content-center mb-4\">\r\n            <div class=\"card\">\r\n                <div class=\"card-inner\">\r\n                    <div class=\"front\">\r\n                        <!-- Top Bar: Chip & Brand Logo -->\r\n                        <div class=\"card-top-bar\">\r\n                            <div class=\"chip\"></div>\r\n                            <div class=\"card-brand\">\r\n                                <span class=\"brand-text\">SECURE CARD</span>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Middle Bar: Card Number -->\r\n                        <div class=\"card-number-display\">\r\n                            <span>{{maskCardNumber()}}</span>\r\n                        </div>\r\n\r\n                        <!-- Bottom Bar: Cardholder Name & Expiration Date -->\r\n                        <div class=\"card-bottom-bar\">\r\n                            <div class=\"card-holder-info\">\r\n                                <label class=\"card-label\">CARDHOLDER</label>\r\n                                <span class=\"card-value\">{{maskName()}}</span>\r\n                            </div>\r\n                            <div class=\"card-expiry-info\">\r\n                                <label class=\"card-label\">{{currentLang[\"ValidThru\"]}}</label>\r\n                                <span class=\"card-value\">{{maskDate()}}</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Dynamic Form Fields -->\r\n        <div class=\"dynamic-fields-container mb-3\">\r\n            <div *ngFor=\"let field of fields\" class=\"mb-3\">\r\n                <field-builder [field]=\"field\" [form]=\"cardForm\"></field-builder>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Static Form Fields -->\r\n        <div class=\"card-form-fields\">\r\n            <div class=\"row mb-3\">\r\n                <div class=\"col-12\">\r\n                    <div class=\"form-group-custom\">\r\n                        <label for=\"card-number\" class=\"form-label-custom\">\r\n                            {{currentLang[\"CardNumber\"]}} <span class=\"text-danger\">*</span>\r\n                        </label>\r\n                        <div class=\"input-wrapper\">\r\n                            <input class=\"form-control-custom\" type=\"text\" id=\"card-number\"\r\n                                [class.inputError]=\"!showInputErrorNumber\" [placeholder]=\"currentLang['CardNumber']\"\r\n                                formControlName=\"cardNumber\" (input)=\"bindNumber($event)\" [maxlength]=\"maxLength\" />\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mb-3\">\r\n                <div class=\"col-12\">\r\n                    <div class=\"form-group-custom\">\r\n                        <label for=\"name\" class=\"form-label-custom\">\r\n                            {{currentLang[\"CardHolderName\"]}} <span class=\"text-danger\">*</span>\r\n                        </label>\r\n                        <div class=\"input-wrapper\">\r\n                            <input class=\"form-control-custom\" type=\"text\" id=\"name\"\r\n                                [placeholder]=\"currentLang['CardHolderName']\" [class.inputError]=\"!showInputErrorName\"\r\n                                (input)=\"bindName($event)\" formControlName=\"name\" />\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mb-4\">\r\n                <div class=\"col-6\">\r\n                    <div class=\"form-group-custom\">\r\n                        <label for=\"validity-date\" class=\"form-label-custom\">\r\n                            {{currentLang[\"ExpiryDate\"]}} <span class=\"text-danger\">*</span>\r\n                        </label>\r\n                        <div class=\"input-wrapper date-wrapper\">\r\n                            <input class=\"form-control-custom\" type=\"text\" id=\"validity-date\"\r\n                                [class.inputError]=\"!showInputErrorDate\" placeholder=\"MM/YY\"\r\n                                formControlName=\"validityDate\" (input)=\"formatDate($event)\" />\r\n                            <span class=\"calendar-icon\"></span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"form-actions-custom\">\r\n        <button class=\"btn-submit\" type=\"submit\" [disabled]=\"!cardForm.valid\" (click)=\"createCard()\">\r\n            <span class=\"btn-text\">{{currentLang[\"lblSave\"]}}</span>\r\n        </button>\r\n    </div>\r\n</form>", styles: [".card{width:100%;max-width:400px;height:230px;color:#fff;perspective:1000px;border:none;background:transparent;margin:0 auto}.card-inner{width:100%;height:100%;position:relative;transition:transform .8s cubic-bezier(.175,.885,.32,1.275);transform-style:preserve-3d}.front{width:100%;height:100%;position:absolute;top:0;left:0;padding:24px 28px;border-radius:20px;overflow:hidden;z-index:1;backface-visibility:hidden;background:linear-gradient(135deg,rgba(17,24,39,.95) 0%,rgba(31,41,55,.95) 100%);box-shadow:0 20px 35px #00000040,inset 0 1px #ffffff26;border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;justify-content:space-between;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;transition:all .3s ease}.front:before{content:\"\";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(99,102,241,.12) 0%,transparent 70%);pointer-events:none}.card-top-bar{display:flex;justify-content:space-between;align-items:center}.chip{width:48px;height:35px;background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);border-radius:6px;position:relative;box-shadow:inset 0 1px 2px #ffffff4d}.chip:before{content:\"\";position:absolute;inset:0;border:1px solid rgba(0,0,0,.15);border-radius:6px;background-image:linear-gradient(90deg,transparent 50%,rgba(0,0,0,.1) 50%),linear-gradient(0deg,transparent 50%,rgba(0,0,0,.1) 50%);background-size:10px 10px}.brand-text{font-size:10px;letter-spacing:2px;color:#ffffffb3;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.2)}.card-number-display{font-family:Courier New,Courier,monospace;font-size:20px;letter-spacing:3px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3);margin:18px 0;text-align:center;-webkit-user-select:none;user-select:none}.card-bottom-bar{display:flex;justify-content:space-between;align-items:flex-end}.card-label{display:block;font-size:8px;color:#fff6;letter-spacing:1.5px;margin-bottom:2px;text-transform:uppercase}.card-value{display:block;font-size:13px;color:#fff;letter-spacing:.5px;font-weight:600;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.form-group-custom{display:flex;flex-direction:column;margin-bottom:12px}.form-label-custom{font-size:13px;font-weight:600;color:#374151;margin-bottom:6px;letter-spacing:.2px}.input-wrapper{position:relative;width:100%}.form-control-custom{width:100%;background-color:#f9fafb;border:1px solid #d1d5db;border-radius:8px;padding:10px 14px;font-size:14px;color:#1f2937;transition:all .2s ease-in-out;box-shadow:inset 0 1px 2px #00000005}.form-control-custom:focus{background-color:#fff;border-color:#4f46e5;box-shadow:0 0 0 3px #4f46e51f;outline:none}.inputError,.inputError:focus{border-color:#ef4444!important;box-shadow:0 0 0 3px #ef44441f!important}.date-wrapper{display:flex;align-items:center}.calendar-icon{width:18px;height:18px;position:absolute;right:12px;pointer-events:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-size:contain}.form-actions-custom{display:flex;justify-content:flex-end;margin-top:20px;border-top:1px solid #f3f4f6;padding-top:16px}.btn-submit{color:#fff;background-color:#5a75b6;border:solid 2px #5A75B6;border-radius:8px;padding:8px;min-width:120px;margin-right:10px}.btn-submit:hover{background-color:#3e578e;color:#fff}.btn-submit:disabled,.btn-previous:disabled,.btn-next:disabled{background-color:#ecebeb!important;border:solid 2px #ecebeb!important;color:#9c9c9c!important;cursor:not-allowed}.breathing-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0f172a99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999}.show{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: CroemCardWidgetService }]; }, propDecorators: { inputParamsForWidgetForAdd: [{
+                type: Input
+            }], widgetResponseEmitter: [{
+                type: Output
+            }], fieldResponseEmitter: [{
+                type: Output
+            }], loader: [{
+                type: Output
+            }], fields: [{
+                type: Input
+            }] } });
+
+class UpdateCardWidgetComponent {
+    constructor(formBuilder, croemCardService) {
+        this.formBuilder = formBuilder;
+        this.croemCardService = croemCardService;
+        this.widgetResponseEmitter = new EventEmitter();
+        this.getWidgetDataResponseEmitter = new EventEmitter();
+        this.fieldResponseEmitter = new EventEmitter();
+        this.loader = new EventEmitter();
+        this.fields = [];
+        this.dynamicFields = {};
+        this.showLoader = false;
+        this.showInputErrorDate = true;
+        this.showInputErrorName = true;
+        this.CardMode = CardMode;
+        this.maxLength = 19;
+        this.maxExpYear = 28;
+    }
+    ngOnInit() {
+        this.switchLanguage(this.inputParamsForWidgetForUpdate.Culture);
+        this.getCardDetails();
+        //---Dynamic Form creation innitializing form group(i.e cardForm) to pass onto the dynamic form builder component ------
+        for (const field of this.fields) {
+            const validators = [];
+            if (field.required) {
+                validators.push(Validators.required);
+            }
+            this.dynamicFields[field.name] = [field.value || null, validators];
+        }
+        const predefinedControls = {
+            name: ['', [Validators.required]],
+            validityDate: ['', [Validators.required, Validators.minLength(5)]],
+        };
+        this.cardForm = this.formBuilder.group({
+            ...predefinedControls,
+            ...this.dynamicFields
+        });
+        let fieldsContrls = {};
+        for (let f of this.fields) {
+            if (f.type !== 'checkbox') {
+                fieldsContrls[f.name] = new FormControl(f.value || '', Validators.required);
+            }
+            else {
+                let opts = {};
+                if (f.options) {
+                    for (let opt of f.options) {
+                        opts[opt.key] = new FormControl(opt.label);
+                    }
+                }
+                fieldsContrls[f.name] = new FormGroup(opts);
+            }
+        }
+    }
+    ngOnChanges(changes) {
+        for (const field of this.fields) {
+            const validators = [];
+            if (field.required) {
+                validators.push(Validators.required);
+            }
+            this.dynamicFields[field.name] = [field.value || null, validators];
+        }
+        let fieldsContrls = {};
+        for (let f of this.fields) {
+            if (f.type !== 'checkbox') {
+                fieldsContrls[f.name] = new FormControl(f.value || '', Validators.required);
+            }
+            else {
+                let opts = {};
+                if (f.options) {
+                    for (let opt of f.options) {
+                        opts[opt.key] = new FormControl(opt.label);
+                    }
+                }
+                fieldsContrls[f.name] = new FormGroup(opts);
+            }
+        }
+    }
+    //---localization  To add a new property to this go localization dir and add your property insdei en.ts and es.ts ------
+    switchLanguage(language) {
+        if (language === 'en') {
+            this.currentLang = LANG_EN;
+        }
+        else if (language === 'es') {
+            this.currentLang = LANG_ES;
+        }
+    }
+    UpdateCardDetails() {
+        this.EditCardDetails();
+    }
+    async getCardDetails() {
+        this.showLoader = true;
+        this.loader.emit(this.showLoader);
+        try {
+            const apiUrl = this.inputParamsForWidgetForUpdate.DtrUrl + constants.urls.getCardInfoByToken;
+            //----encryption-------
+            var encode = this.encodingForGet(); //--encoding parameters 
+            this.encryptedString = this.innitializeKey(encode); //--innitializing DSA key
+            var getCardResponse = await this.croemCardService.addUpdateCardAPICall(apiUrl, this.encryptedString); //--API Call to add card in DTR
+            this.showLoader = false;
+            this.updateCardResponse = getCardResponse;
+            this.updateName(getCardResponse.ResponseData.CardHolderName || getCardResponse.ResponseData.CardholderName, getCardResponse.ResponseData.ExpirationDate, getCardResponse.ResponseData.Number);
+            this.getWidgetDataResponseEmitter.emit(this.updateCardResponse);
+        }
+        catch (error) {
+            console.log(error);
+            this.showLoader = false;
+            this.getWidgetDataResponseEmitter.emit(this.updateCardResponse);
+        }
+    }
+    async EditCardDetails() {
+        try {
+            this.showLoader = true;
+            this.loader.emit(this.showLoader);
+            const apiUrl = this.inputParamsForWidgetForUpdate.DtrUrl + constants.urls.updateDTRUrl;
+            //----encryption-------
+            var encode = this.encoding(); //--encoding parameters 
+            this.encryptedString = this.innitializeKey(encode); //--innitializing DSA key
+            this.updateCardResponse = await this.croemCardService.addUpdateCardAPICall(apiUrl, this.encryptedString); //--API Call to add card in DTR
+            this.showLoader = false;
+            this.fieldResponseEmitter.emit(this.cardForm.controls);
+            this.widgetResponseEmitter.emit(this.updateCardResponse);
+        }
+        catch (error) {
+            console.log(error);
+            this.showLoader = false;
+            this.widgetResponseEmitter.emit(this.updateCardResponse);
+        }
+    }
+    updateName(newName, newDate, newNumber = '') {
+        if (newDate.length === 4) {
+            newDate = newDate.substring(0, 2) + '/' + newDate.substring(2);
+        }
+        this.cardForm.patchValue({
+            name: newName,
+            validityDate: newDate
+        });
+        this.name = newName;
+        this.validityDate = newDate;
+        if (newNumber) {
+            this.cardNumber = newNumber;
+        }
+    }
+    maskCardNumber() {
+        if (this.cardNumber && this.cardNumber.length > 0) {
+            const maskedNumber = '•'.repeat(Math.max(0, this.cardNumber.length - 4)) + this.cardNumber.slice(-4);
+            return maskedNumber.replace(/(•{4})/g, '$1 ');
+        }
+        else {
+            return '•••• •••• •••• ••••';
+        }
+    }
+    encodingForGet() {
+        return "" + "\\" +
+            "" + "\\" +
+            "" + "\\" +
+            "" + "\\" +
+            this.inputParamsForWidgetForUpdate.Token + "\\" +
+            "" + "\\" +
+            this.inputParamsForWidgetForUpdate.APIKey + "\\" +
+            this.inputParamsForWidgetForUpdate.Culture + "\\" +
+            "" + "\\" +
+            this.inputParamsForWidgetForUpdate.IsSale + "\\" +
+            this.inputParamsForWidgetForUpdate.Amount + "\\" +
+            this.inputParamsForWidgetForUpdate.ProductDetails + "\\" +
+            "" + "\\" +
+            "" + "\\" +
+            this.inputParamsForWidgetForUpdate.Itbms + "\\" +
+            this.inputParamsForWidgetForUpdate.Mode;
+    }
+    encoding() {
+        return "" + "\\" +
+            this.cardForm.value.name + "\\" +
+            this.cardForm.value.validityDate.substring(0, 2) + "\\" +
+            this.cardForm.value.validityDate.substring(3) + "\\" +
+            this.inputParamsForWidgetForUpdate.Token + "\\" +
+            "" + "\\" +
+            this.inputParamsForWidgetForUpdate.APIKey + "\\" +
+            this.inputParamsForWidgetForUpdate.Culture + "\\" +
+            "" + "\\" +
+            (this.inputParamsForWidgetForUpdate.IsSale ?? false) + "\\" +
+            (this.inputParamsForWidgetForUpdate.Amount ?? "0") + "\\" +
+            (this.inputParamsForWidgetForUpdate.ProductDetails ?? "0") + "\\" +
+            "" + "\\" +
+            "" + "\\" +
+            (this.inputParamsForWidgetForUpdate.Itbms ?? "0") + "\\" +
+            this.inputParamsForWidgetForUpdate.Mode;
+    }
+    innitializeKey(encode) {
+        var key = initializeKey(this.inputParamsForWidgetForUpdate.Keys.EncKey1, this.inputParamsForWidgetForUpdate.Keys.EncKey2);
+        return encryptedString(key, encode);
+    }
+    formatDate(event) {
+        let input = event.target.value;
+        input = input.replace(/\D/g, '');
+        const month = this.formatMonth(input.substring(0, 2));
+        const year = input.substring(2, 4);
+        const formattedDate = month + (year ? '/' + year : '');
+        event.target.value = formattedDate;
+        this.cardForm.controls['validityDate'].setValue(formattedDate);
+        this.validityDate = this.cardForm.controls['validityDate'].value;
+        this.validateDate();
+    }
+    formatMonth(month) {
+        const validMonth = parseInt(month, 10);
+        return (validMonth > 1 && validMonth <= 9) ? '0' + validMonth : month;
+    }
+    maskName() {
+        return this.name ? this.name : 'Your Name';
+    }
+    maskDate() {
+        return this.validityDate ? this.validityDate : '••/••';
+    }
+    validateDate() {
+        if (!this.inputParamsForWidgetForUpdate.IsSale) {
+            this.showInputErrorDate = cardValidator.expirationDate(this.validityDate, this.maxExpYear).isValid;
+        }
+        else {
+            this.showInputErrorDate = true;
+        }
+    }
+    bindName(event) {
+        this.name = event.target.value;
+        this.validateName();
+    }
+    bindDate(event) {
+        this.validityDate = event.target.value;
+        ;
+    }
+    validateName() {
+        if (this.name.length > 4) {
+            this.showInputErrorName = true;
+        }
+        else {
+            this.showInputErrorName = false;
+        }
+    }
+}
+UpdateCardWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UpdateCardWidgetComponent, deps: [{ token: i1.FormBuilder }, { token: CroemCardWidgetService }], target: i0.ɵɵFactoryTarget.Component });
+UpdateCardWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UpdateCardWidgetComponent, selector: "lib-update-card-widget", inputs: { inputParamsForWidgetForUpdate: "inputParamsForWidgetForUpdate", fields: "fields" }, outputs: { widgetResponseEmitter: "widgetResponseEmitter", getWidgetDataResponseEmitter: "getWidgetDataResponseEmitter", fieldResponseEmitter: "fieldResponseEmitter", loader: "loader" }, usesOnChanges: true, ngImport: i0, template: "<form class=\"container-fluid py-3\" [formGroup]=\"cardForm\" *ngIf=\"(inputParamsForWidgetForUpdate.APIKey)\">\r\n    <div class=\"p-0\">\r\n        <div class=\"d-flex justify-content-center mb-4\">\r\n            <div class=\"card\">\r\n                <div class=\"card-inner\">\r\n                    <div class=\"front\">\r\n                        <!-- Top Bar: Chip & Brand Logo -->\r\n                        <div class=\"card-top-bar\">\r\n                            <div class=\"chip\"></div>\r\n                            <div class=\"card-brand\">\r\n                                <span class=\"brand-text\">SECURE CARD</span>\r\n                            </div>\r\n                        </div>\r\n                        \r\n                        <!-- Middle Bar: Card Number (Masked) -->\r\n                        <div class=\"card-number-display\">\r\n                            <span>{{maskCardNumber()}}</span>\r\n                        </div>\r\n                        \r\n                        <!-- Bottom Bar: Cardholder Name & Expiration Date -->\r\n                        <div class=\"card-bottom-bar\">\r\n                            <div class=\"card-holder-info\">\r\n                                <label class=\"card-label\">CARDHOLDER</label>\r\n                                <span class=\"card-value\">{{maskName()}}</span>\r\n                            </div>\r\n                            <div class=\"card-expiry-info\">\r\n                                <label class=\"card-label\">{{currentLang[\"ValidThru\"]}}</label>\r\n                                <span class=\"card-value\">{{maskDate()}}</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Dynamic Form Fields -->\r\n        <div class=\"dynamic-fields-container mb-3\">\r\n            <div *ngFor=\"let field of fields\" class=\"mb-3\">\r\n                <field-builder [field]=\"field\" [form]=\"cardForm\"></field-builder>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Static Form Fields -->\r\n    <div class=\"card-form-fields\">\r\n        <div class=\"row mb-3\">\r\n            <div class=\"col-12\">\r\n                <div class=\"form-group-custom\">\r\n                    <label for=\"name\" class=\"form-label-custom\">\r\n                        {{currentLang[\"CardHolderName\"]}} <span class=\"text-danger\">*</span>\r\n                    </label>\r\n                    <div class=\"input-wrapper\">\r\n                        <input class=\"form-control-custom\" type=\"text\" id=\"name\" [placeholder]=\"currentLang['CardHolderName']\"\r\n                            [class.inputError]=\"!showInputErrorName\" (input)=\"bindName($event)\" formControlName=\"name\" />\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"row mb-4\">\r\n            <div class=\"col-6\">\r\n                <div class=\"form-group-custom\">\r\n                    <label for=\"validity-date\" class=\"form-label-custom\">\r\n                        {{currentLang[\"ExpiryDate\"]}} <span class=\"text-danger\">*</span>\r\n                    </label>\r\n                    <div class=\"input-wrapper date-wrapper\">\r\n                        <input class=\"form-control-custom\" type=\"text\" id=\"validity-date\"\r\n                            [class.inputError]=\"!showInputErrorDate\" placeholder=\"MM/YY\"\r\n                            formControlName=\"validityDate\" (input)=\"formatDate($event)\" />\r\n                        <span class=\"calendar-icon\"></span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"form-actions-custom\">\r\n        <button class=\"btn-submit\" *ngIf=\"(inputParamsForWidgetForUpdate.Mode==CardMode.Edit)\" type=\"submit\" [disabled]=\"!cardForm.valid\"\r\n            (click)=\"UpdateCardDetails()\">\r\n            <span class=\"btn-text\">{{currentLang[\"Update\"]}}</span>\r\n        </button>\r\n    </div>\r\n</form>\r\n", styles: [".card{width:100%;max-width:400px;height:230px;color:#fff;perspective:1000px;border:none;background:transparent;margin:0 auto}.card-inner{width:100%;height:100%;position:relative;transition:transform .8s cubic-bezier(.175,.885,.32,1.275);transform-style:preserve-3d}.front{width:100%;height:100%;position:absolute;top:0;left:0;padding:24px 28px;border-radius:20px;overflow:hidden;z-index:1;backface-visibility:hidden;background:linear-gradient(135deg,rgba(17,24,39,.95) 0%,rgba(31,41,55,.95) 100%);box-shadow:0 20px 35px #00000040,inset 0 1px #ffffff26;border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;justify-content:space-between;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;transition:all .3s ease}.front:before{content:\"\";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(99,102,241,.12) 0%,transparent 70%);pointer-events:none}.card-top-bar{display:flex;justify-content:space-between;align-items:center}.chip{width:48px;height:35px;background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);border-radius:6px;position:relative;box-shadow:inset 0 1px 2px #ffffff4d}.chip:before{content:\"\";position:absolute;inset:0;border:1px solid rgba(0,0,0,.15);border-radius:6px;background-image:linear-gradient(90deg,transparent 50%,rgba(0,0,0,.1) 50%),linear-gradient(0deg,transparent 50%,rgba(0,0,0,.1) 50%);background-size:10px 10px}.brand-text{font-size:10px;letter-spacing:2px;color:#ffffffb3;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.2)}.card-number-display{font-family:Courier New,Courier,monospace;font-size:20px;letter-spacing:3px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3);margin:18px 0;text-align:center;-webkit-user-select:none;user-select:none}.card-bottom-bar{display:flex;justify-content:space-between;align-items:flex-end}.card-label{display:block;font-size:8px;color:#fff6;letter-spacing:1.5px;margin-bottom:2px;text-transform:uppercase}.card-value{display:block;font-size:13px;color:#fff;letter-spacing:.5px;font-weight:600;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.form-group-custom{display:flex;flex-direction:column;margin-bottom:12px}.form-label-custom{font-size:13px;font-weight:600;color:#374151;margin-bottom:6px;letter-spacing:.2px}.input-wrapper{position:relative;width:100%}.form-control-custom{width:100%;background-color:#f9fafb;border:1px solid #d1d5db;border-radius:8px;padding:10px 14px;font-size:14px;color:#1f2937;transition:all .2s ease-in-out;box-shadow:inset 0 1px 2px #00000005}.form-control-custom:focus{background-color:#fff;border-color:#4f46e5;box-shadow:0 0 0 3px #4f46e51f;outline:none}.inputError,.inputError:focus{border-color:#ef4444!important;box-shadow:0 0 0 3px #ef44441f!important}.date-wrapper{display:flex;align-items:center}.calendar-icon{width:18px;height:18px;position:absolute;right:12px;pointer-events:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-size:contain}.form-actions-custom{display:flex;justify-content:flex-end;margin-top:20px;border-top:1px solid #f3f4f6;padding-top:16px}.btn-submit{color:#fff;background-color:#5a75b6;border:solid 2px #5A75B6;border-radius:8px;padding:8px;min-width:120px;margin-right:10px}.btn-submit:hover{background-color:#3e578e;color:#fff}.btn-submit:disabled,.btn-previous:disabled,.btn-next:disabled{background-color:#ecebeb!important;border:solid 2px #ecebeb!important;color:#9c9c9c!important;cursor:not-allowed}.breathing-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0f172a99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999}.show{display:block}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FieldBuilderComponent, selector: "field-builder", inputs: ["field", "form"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UpdateCardWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-update-card-widget', template: "<form class=\"container-fluid py-3\" [formGroup]=\"cardForm\" *ngIf=\"(inputParamsForWidgetForUpdate.APIKey)\">\r\n    <div class=\"p-0\">\r\n        <div class=\"d-flex justify-content-center mb-4\">\r\n            <div class=\"card\">\r\n                <div class=\"card-inner\">\r\n                    <div class=\"front\">\r\n                        <!-- Top Bar: Chip & Brand Logo -->\r\n                        <div class=\"card-top-bar\">\r\n                            <div class=\"chip\"></div>\r\n                            <div class=\"card-brand\">\r\n                                <span class=\"brand-text\">SECURE CARD</span>\r\n                            </div>\r\n                        </div>\r\n                        \r\n                        <!-- Middle Bar: Card Number (Masked) -->\r\n                        <div class=\"card-number-display\">\r\n                            <span>{{maskCardNumber()}}</span>\r\n                        </div>\r\n                        \r\n                        <!-- Bottom Bar: Cardholder Name & Expiration Date -->\r\n                        <div class=\"card-bottom-bar\">\r\n                            <div class=\"card-holder-info\">\r\n                                <label class=\"card-label\">CARDHOLDER</label>\r\n                                <span class=\"card-value\">{{maskName()}}</span>\r\n                            </div>\r\n                            <div class=\"card-expiry-info\">\r\n                                <label class=\"card-label\">{{currentLang[\"ValidThru\"]}}</label>\r\n                                <span class=\"card-value\">{{maskDate()}}</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Dynamic Form Fields -->\r\n        <div class=\"dynamic-fields-container mb-3\">\r\n            <div *ngFor=\"let field of fields\" class=\"mb-3\">\r\n                <field-builder [field]=\"field\" [form]=\"cardForm\"></field-builder>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Static Form Fields -->\r\n    <div class=\"card-form-fields\">\r\n        <div class=\"row mb-3\">\r\n            <div class=\"col-12\">\r\n                <div class=\"form-group-custom\">\r\n                    <label for=\"name\" class=\"form-label-custom\">\r\n                        {{currentLang[\"CardHolderName\"]}} <span class=\"text-danger\">*</span>\r\n                    </label>\r\n                    <div class=\"input-wrapper\">\r\n                        <input class=\"form-control-custom\" type=\"text\" id=\"name\" [placeholder]=\"currentLang['CardHolderName']\"\r\n                            [class.inputError]=\"!showInputErrorName\" (input)=\"bindName($event)\" formControlName=\"name\" />\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"row mb-4\">\r\n            <div class=\"col-6\">\r\n                <div class=\"form-group-custom\">\r\n                    <label for=\"validity-date\" class=\"form-label-custom\">\r\n                        {{currentLang[\"ExpiryDate\"]}} <span class=\"text-danger\">*</span>\r\n                    </label>\r\n                    <div class=\"input-wrapper date-wrapper\">\r\n                        <input class=\"form-control-custom\" type=\"text\" id=\"validity-date\"\r\n                            [class.inputError]=\"!showInputErrorDate\" placeholder=\"MM/YY\"\r\n                            formControlName=\"validityDate\" (input)=\"formatDate($event)\" />\r\n                        <span class=\"calendar-icon\"></span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"form-actions-custom\">\r\n        <button class=\"btn-submit\" *ngIf=\"(inputParamsForWidgetForUpdate.Mode==CardMode.Edit)\" type=\"submit\" [disabled]=\"!cardForm.valid\"\r\n            (click)=\"UpdateCardDetails()\">\r\n            <span class=\"btn-text\">{{currentLang[\"Update\"]}}</span>\r\n        </button>\r\n    </div>\r\n</form>\r\n", styles: [".card{width:100%;max-width:400px;height:230px;color:#fff;perspective:1000px;border:none;background:transparent;margin:0 auto}.card-inner{width:100%;height:100%;position:relative;transition:transform .8s cubic-bezier(.175,.885,.32,1.275);transform-style:preserve-3d}.front{width:100%;height:100%;position:absolute;top:0;left:0;padding:24px 28px;border-radius:20px;overflow:hidden;z-index:1;backface-visibility:hidden;background:linear-gradient(135deg,rgba(17,24,39,.95) 0%,rgba(31,41,55,.95) 100%);box-shadow:0 20px 35px #00000040,inset 0 1px #ffffff26;border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;justify-content:space-between;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;transition:all .3s ease}.front:before{content:\"\";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(99,102,241,.12) 0%,transparent 70%);pointer-events:none}.card-top-bar{display:flex;justify-content:space-between;align-items:center}.chip{width:48px;height:35px;background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);border-radius:6px;position:relative;box-shadow:inset 0 1px 2px #ffffff4d}.chip:before{content:\"\";position:absolute;inset:0;border:1px solid rgba(0,0,0,.15);border-radius:6px;background-image:linear-gradient(90deg,transparent 50%,rgba(0,0,0,.1) 50%),linear-gradient(0deg,transparent 50%,rgba(0,0,0,.1) 50%);background-size:10px 10px}.brand-text{font-size:10px;letter-spacing:2px;color:#ffffffb3;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.2)}.card-number-display{font-family:Courier New,Courier,monospace;font-size:20px;letter-spacing:3px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3);margin:18px 0;text-align:center;-webkit-user-select:none;user-select:none}.card-bottom-bar{display:flex;justify-content:space-between;align-items:flex-end}.card-label{display:block;font-size:8px;color:#fff6;letter-spacing:1.5px;margin-bottom:2px;text-transform:uppercase}.card-value{display:block;font-size:13px;color:#fff;letter-spacing:.5px;font-weight:600;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.form-group-custom{display:flex;flex-direction:column;margin-bottom:12px}.form-label-custom{font-size:13px;font-weight:600;color:#374151;margin-bottom:6px;letter-spacing:.2px}.input-wrapper{position:relative;width:100%}.form-control-custom{width:100%;background-color:#f9fafb;border:1px solid #d1d5db;border-radius:8px;padding:10px 14px;font-size:14px;color:#1f2937;transition:all .2s ease-in-out;box-shadow:inset 0 1px 2px #00000005}.form-control-custom:focus{background-color:#fff;border-color:#4f46e5;box-shadow:0 0 0 3px #4f46e51f;outline:none}.inputError,.inputError:focus{border-color:#ef4444!important;box-shadow:0 0 0 3px #ef44441f!important}.date-wrapper{display:flex;align-items:center}.calendar-icon{width:18px;height:18px;position:absolute;right:12px;pointer-events:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-size:contain}.form-actions-custom{display:flex;justify-content:flex-end;margin-top:20px;border-top:1px solid #f3f4f6;padding-top:16px}.btn-submit{color:#fff;background-color:#5a75b6;border:solid 2px #5A75B6;border-radius:8px;padding:8px;min-width:120px;margin-right:10px}.btn-submit:hover{background-color:#3e578e;color:#fff}.btn-submit:disabled,.btn-previous:disabled,.btn-next:disabled{background-color:#ecebeb!important;border:solid 2px #ecebeb!important;color:#9c9c9c!important;cursor:not-allowed}.breathing-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0f172a99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999}.show{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: CroemCardWidgetService }]; }, propDecorators: { inputParamsForWidgetForUpdate: [{
+                type: Input
+            }], widgetResponseEmitter: [{
+                type: Output
+            }], getWidgetDataResponseEmitter: [{
+                type: Output
+            }], fieldResponseEmitter: [{
+                type: Output
+            }], loader: [{
+                type: Output
+            }], fields: [{
+                type: Input
+            }] } });
+
+class PaymentCardWidgetComponent {
+    constructor(formBuilder, croemCardService) {
+        this.formBuilder = formBuilder;
+        this.croemCardService = croemCardService;
+        this.widgetResponseEmitter = new EventEmitter();
+        this.fieldResponseEmitter = new EventEmitter();
+        this.loader = new EventEmitter();
+        this.HandleError = new EventEmitter();
+        this.fields = [];
+        this.dynamicFields = {};
+        this.showCVVPrepend = false;
+        this.showInputError = true;
+    }
+    ngOnInit() {
+        this.switchLanguage(this.inputParamsForWidgetForPayment.Culture);
+        //---Dynamic Form creation innitializing form group(i.e cardForm) to pass onto the dynamic form builder component ------
+        for (const field of this.fields) {
+            const validators = [];
+            if (field.required) {
+                validators.push(Validators.required);
+            }
+            this.dynamicFields[field.name] = [field.value || null, validators];
+        }
+        const predefinedControls = {
+            cvv: ['', [Validators.required, Validators.maxLength(4)]]
+        };
+        this.cardForm = this.formBuilder.group({
+            ...predefinedControls,
+            ...this.dynamicFields
+        });
+        let fieldsContrls = {};
+        for (let f of this.fields) {
+            if (f.type !== 'checkbox') {
+                fieldsContrls[f.name] = new FormControl(f.value || '', Validators.required);
+            }
+            else {
+                let opts = {};
+                if (f.options) {
+                    for (let opt of f.options) {
+                        opts[opt.key] = new FormControl(opt.label);
+                    }
+                }
+                fieldsContrls[f.name] = new FormGroup(opts);
+            }
+        }
+    }
+    makePayment() {
+        this.makeTransactionWithToken();
+    }
+    switchLanguage(language) {
+        if (language === 'en') {
+            this.currentLang = LANG_EN;
+        }
+        else if (language === 'es') {
+            this.currentLang = LANG_ES;
+        }
+    }
+    async makeTransactionWithToken() {
+        try {
+            this.showLoader = true;
+            this.loader.emit(this.showLoader);
+            const apiUrl = this.inputParamsForWidgetForPayment.DtrUrl + constants.urls.paymentDTRUrl;
+            //----encryption-------
+            var encode = this.encoding(); //--encoding parameters 
+            this.encryptedString = this.innitializeKey(encode); //--innitializing DSA key
+            //-----request-------- 
+            this.paidCardResponse = await this.croemCardService.CardPayment(this.inputParamsForWidgetForPayment, this.inputParamsForWidgetForPayment.Culture, apiUrl, this.encryptedString); //--API Call to make sale through cardToken in DTR
+            this.showLoader = false;
+            this.fieldResponseEmitter.emit(this.cardForm.controls); //emmiting controls
+            this.widgetResponseEmitter.emit(this.paidCardResponse); // emitting response
+        }
+        catch (error) {
+            console.log(error);
+            this.showLoader = false;
+            this.widgetResponseEmitter.emit(this.paidCardResponse);
+        }
+    }
+    encoding() {
+        return "" + "\\" +
+            "" + "\\" +
+            "" + "\\" +
+            "" + "\\" +
+            this.inputParamsForWidgetForPayment.Token + "\\" +
+            "" + "\\" +
+            this.inputParamsForWidgetForPayment.APIKey + "\\" +
+            this.inputParamsForWidgetForPayment.Culture + "\\" +
+            this.cardForm.value.cvv + "\\" +
+            this.inputParamsForWidgetForPayment.IsSale + "\\" +
+            this.inputParamsForWidgetForPayment.Amount + "\\" +
+            this.inputParamsForWidgetForPayment.ProductDetails + "\\" +
+            "" + "\\" +
+            "" + "\\" +
+            this.inputParamsForWidgetForPayment.Itbms + "\\" +
+            "";
+    }
+    innitializeKey(encode) {
+        var key = initializeKey(this.inputParamsForWidgetForPayment.Keys.EncKey1, this.inputParamsForWidgetForPayment.Keys.EncKey2);
+        return encryptedString(key, encode);
+    }
+    bindCVV(event) {
+        const inputElement = event.target;
+        const numericValue = inputElement.value.replace(/\D/g, ''); // Remove non-numeric characters
+        this.cvv = numericValue; // Update form control value
+        inputElement.value = numericValue; // Update input value to remove non-numeric characters
+        this.validateCvv();
+    }
+    validateCvv() {
+        this.showCVVPrepend = false;
+        if (cardValidator.cvv(this.cvv, 4).isValid || cardValidator.cvv(this.cvv).isValid) {
+            this.showInputError = true;
+        }
+        else {
+            this.showInputError = false;
+        }
+        if (this.cvv) {
+            this.showCVVPrepend = true;
+        }
+    }
+}
+PaymentCardWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PaymentCardWidgetComponent, deps: [{ token: i1.FormBuilder }, { token: CroemCardWidgetService }], target: i0.ɵɵFactoryTarget.Component });
+PaymentCardWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PaymentCardWidgetComponent, selector: "lib-payment-card-widget", inputs: { inputParamsForWidgetForPayment: "inputParamsForWidgetForPayment", fields: "fields" }, outputs: { widgetResponseEmitter: "widgetResponseEmitter", fieldResponseEmitter: "fieldResponseEmitter", loader: "loader", HandleError: "HandleError" }, ngImport: i0, template: "<form class=\"container-fluid py-3\" [formGroup]=\"cardForm\" *ngIf=\"(inputParamsForWidgetForPayment.APIKey)\">\r\n    <div class=\"p-0\">\r\n        <!-- Dynamic Form Fields -->\r\n        <div class=\"dynamic-fields-container mb-3\">\r\n            <div *ngFor=\"let field of fields\" class=\"mb-3\">\r\n                <field-builder [field]=\"field\" [form]=\"cardForm\"></field-builder>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- CVV and Proceed Fields -->\r\n        <div class=\"payment-fields-custom\">\r\n            <div class=\"row align-items-end\">\r\n                <div class=\"col-12 mb-3 mb-md-0\">\r\n                    <div class=\"form-group-custom\">\r\n                        <label for=\"cvv\" class=\"form-label-custom\">\r\n                            {{currentLang[\"CVV\"]}} <span class=\"text-danger\">*</span>\r\n                        </label>\r\n                        <div class=\"input-wrapper cvv-wrapper\">\r\n                            <input class=\"form-control-custom\" type=\"password\" id=\"cvv\" [class.inputError]=\"!showInputError\"\r\n                                placeholder=\"CVV\" pattern=\"[0-9]*\" formControlName=\"cvv\" (input)=\"bindCVV($event)\" minlength=\"3\"\r\n                                maxlength=\"4\" />\r\n                            <span *ngIf=\"!showCVVPrepend\" class=\"cvv-icon\"></span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-12\">\r\n                    <button class=\"btn-submit-custom w-100 py-3\" type=\"submit\" [disabled]=\"!cardForm.valid\" (click)=\"makePayment()\">\r\n                        <span class=\"btn-text\">{{currentLang[\"Proceed\"]}}</span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</form>\r\n", styles: [".form-group-custom{display:flex;flex-direction:column;margin-bottom:12px}.form-label-custom{font-size:13px;font-weight:600;color:#374151;margin-bottom:6px;letter-spacing:.2px}.input-wrapper{position:relative;width:100%}.form-control-custom{width:100%;background-color:#f9fafb;border:1px solid #d1d5db;border-radius:8px;padding:10px 14px;font-size:14px;color:#1f2937;transition:all .2s ease-in-out;box-shadow:inset 0 1px 2px #00000005}.form-control-custom:focus{background-color:#fff;border-color:#4f46e5;box-shadow:0 0 0 3px #4f46e51f;outline:none}.inputError,.inputError:focus{border-color:#ef4444!important;box-shadow:0 0 0 3px #ef44441f!important}.cvv-wrapper{display:flex;align-items:center}.cvv-icon{width:20px;height:20px;position:absolute;right:12px;pointer-events:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-size:contain}.btn-submit-custom{background:#5A75B6;border:solid 2px #5A75B6;color:#fff;padding:10px 20px;font-weight:600;font-size:14px;border-radius:8px;transition:all .2s ease-in-out;box-shadow:0 4px 10px #5a75b640;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.btn-submit-custom:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 14px #5a75b659;background:#3E578E;border-color:#3e578e}.btn-submit-custom:active:not(:disabled){transform:translateY(0)}.btn-submit-custom:disabled{background:#ecebeb!important;border:solid 2px #ecebeb!important;color:#9c9c9c!important;cursor:not-allowed;box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FieldBuilderComponent, selector: "field-builder", inputs: ["field", "form"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PaymentCardWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-payment-card-widget', template: "<form class=\"container-fluid py-3\" [formGroup]=\"cardForm\" *ngIf=\"(inputParamsForWidgetForPayment.APIKey)\">\r\n    <div class=\"p-0\">\r\n        <!-- Dynamic Form Fields -->\r\n        <div class=\"dynamic-fields-container mb-3\">\r\n            <div *ngFor=\"let field of fields\" class=\"mb-3\">\r\n                <field-builder [field]=\"field\" [form]=\"cardForm\"></field-builder>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- CVV and Proceed Fields -->\r\n        <div class=\"payment-fields-custom\">\r\n            <div class=\"row align-items-end\">\r\n                <div class=\"col-12 mb-3 mb-md-0\">\r\n                    <div class=\"form-group-custom\">\r\n                        <label for=\"cvv\" class=\"form-label-custom\">\r\n                            {{currentLang[\"CVV\"]}} <span class=\"text-danger\">*</span>\r\n                        </label>\r\n                        <div class=\"input-wrapper cvv-wrapper\">\r\n                            <input class=\"form-control-custom\" type=\"password\" id=\"cvv\" [class.inputError]=\"!showInputError\"\r\n                                placeholder=\"CVV\" pattern=\"[0-9]*\" formControlName=\"cvv\" (input)=\"bindCVV($event)\" minlength=\"3\"\r\n                                maxlength=\"4\" />\r\n                            <span *ngIf=\"!showCVVPrepend\" class=\"cvv-icon\"></span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-12\">\r\n                    <button class=\"btn-submit-custom w-100 py-3\" type=\"submit\" [disabled]=\"!cardForm.valid\" (click)=\"makePayment()\">\r\n                        <span class=\"btn-text\">{{currentLang[\"Proceed\"]}}</span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</form>\r\n", styles: [".form-group-custom{display:flex;flex-direction:column;margin-bottom:12px}.form-label-custom{font-size:13px;font-weight:600;color:#374151;margin-bottom:6px;letter-spacing:.2px}.input-wrapper{position:relative;width:100%}.form-control-custom{width:100%;background-color:#f9fafb;border:1px solid #d1d5db;border-radius:8px;padding:10px 14px;font-size:14px;color:#1f2937;transition:all .2s ease-in-out;box-shadow:inset 0 1px 2px #00000005}.form-control-custom:focus{background-color:#fff;border-color:#4f46e5;box-shadow:0 0 0 3px #4f46e51f;outline:none}.inputError,.inputError:focus{border-color:#ef4444!important;box-shadow:0 0 0 3px #ef44441f!important}.cvv-wrapper{display:flex;align-items:center}.cvv-icon{width:20px;height:20px;position:absolute;right:12px;pointer-events:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-size:contain}.btn-submit-custom{background:#5A75B6;border:solid 2px #5A75B6;color:#fff;padding:10px 20px;font-weight:600;font-size:14px;border-radius:8px;transition:all .2s ease-in-out;box-shadow:0 4px 10px #5a75b640;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.btn-submit-custom:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 14px #5a75b659;background:#3E578E;border-color:#3e578e}.btn-submit-custom:active:not(:disabled){transform:translateY(0)}.btn-submit-custom:disabled{background:#ecebeb!important;border:solid 2px #ecebeb!important;color:#9c9c9c!important;cursor:not-allowed;box-shadow:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: CroemCardWidgetService }]; }, propDecorators: { inputParamsForWidgetForPayment: [{
+                type: Input
+            }], widgetResponseEmitter: [{
+                type: Output
+            }], fieldResponseEmitter: [{
+                type: Output
+            }], loader: [{
+                type: Output
+            }], HandleError: [{
+                type: Output
+            }], fields: [{
+                type: Input
+            }] } });
+
+class CroemCardWidgetComponent {
+    //-------------new updated-code---------------------//
+    handleError(data) {
+        this.HandleError.emit(data);
+    }
+    handleApiResponse(data) {
+        this.widgetResponseEmitter.emit(data);
+    }
+    getFormFields(data) {
+        this.fieldResponseEmitter.emit(data);
+    }
+    getUpdateApiResponse(data) {
+        this.getWidgetDataResponseEmitter.emit(data);
+    }
+    showloader(loader) {
+        this.loader.emit(loader);
+    }
+    constructor() {
+        this.widgetResponseEmitter = new EventEmitter();
+        this.getWidgetDataResponseEmitter = new EventEmitter();
+        this.fieldResponseEmitter = new EventEmitter();
+        this.HandleError = new EventEmitter();
+        this.loader = new EventEmitter();
+        this.fields = [];
+        this.showLoader = false;
+    }
+    ngOnInit() {
+        if (((this.inputParamsForWidget.Mode == CardMode.Edit) || (this.inputParamsForWidget.Mode == CardMode.Show)) && (!this.inputParamsForWidget.IsSale)) {
+            this.updateShow = true;
+        }
+        this.switchLanguage(this.inputParamsForWidget.Culture);
+        if (!this.inputParamsForWidget.APIKey) {
+            this.HandleError.emit("ApiKey404");
+        }
+    }
+    getFields() {
+        return this.fields;
+    }
+    switchLanguage(language) {
+        if (language === 'en') {
+            this.currentLang = LANG_EN;
+        }
+        else if (language === 'es') {
+            this.currentLang = LANG_ES;
+        }
+    }
+}
+CroemCardWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CroemCardWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CroemCardWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CroemCardWidgetComponent, selector: "lib-croem-card-widget", inputs: { inputParamsForWidget: "inputParamsForWidget", fields: "fields" }, outputs: { widgetResponseEmitter: "widgetResponseEmitter", getWidgetDataResponseEmitter: "getWidgetDataResponseEmitter", fieldResponseEmitter: "fieldResponseEmitter", HandleError: "HandleError", loader: "loader" }, ngImport: i0, template: "<lib-add-card-widget *ngIf=\"(this.inputParamsForWidget.APIKey)&&(inputParamsForWidget.Mode=='0')\"\r\n    [inputParamsForWidgetForAdd]=\"inputParamsForWidget\" [fields]=\"getFields()\" (loader)=showloader($event)\r\n    (widgetResponseEmitter)=\"handleApiResponse($event)\"\r\n    (fieldResponseEmitter)=\"getFormFields($event)\"></lib-add-card-widget>\r\n\r\n\r\n<lib-payment-card-widget\r\n    *ngIf=\"(this.inputParamsForWidget.APIKey)&&(inputParamsForWidget.Token)&&(inputParamsForWidget.IsSale)\"   (HandleError)=\"handleError($event)\"\r\n    [inputParamsForWidgetForPayment]=\"inputParamsForWidget\" [fields]=\"getFields()\"\r\n    (widgetResponseEmitter)=\"handleApiResponse($event)\" (loader)=showloader($event)\r\n    (fieldResponseEmitter)=\"getFormFields($event)\"></lib-payment-card-widget>\r\n\r\n\r\n<lib-update-card-widget\r\n    *ngIf=\"updateShow\"\r\n    [inputParamsForWidgetForUpdate]=\"inputParamsForWidget\" [fields]=\"getFields()\" (loader)=showloader($event)\r\n    (widgetResponseEmitter)=\"handleApiResponse($event)\" (getWidgetDataResponseEmitter)=\"getUpdateApiResponse($event)\"\r\n    (fieldResponseEmitter)=\"getFormFields($event)\"></lib-update-card-widget>\r\n    ", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AddCardWidgetComponent, selector: "lib-add-card-widget", inputs: ["inputParamsForWidgetForAdd", "fields"], outputs: ["widgetResponseEmitter", "fieldResponseEmitter", "loader"] }, { kind: "component", type: UpdateCardWidgetComponent, selector: "lib-update-card-widget", inputs: ["inputParamsForWidgetForUpdate", "fields"], outputs: ["widgetResponseEmitter", "getWidgetDataResponseEmitter", "fieldResponseEmitter", "loader"] }, { kind: "component", type: PaymentCardWidgetComponent, selector: "lib-payment-card-widget", inputs: ["inputParamsForWidgetForPayment", "fields"], outputs: ["widgetResponseEmitter", "fieldResponseEmitter", "loader", "HandleError"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CroemCardWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-croem-card-widget', template: "<lib-add-card-widget *ngIf=\"(this.inputParamsForWidget.APIKey)&&(inputParamsForWidget.Mode=='0')\"\r\n    [inputParamsForWidgetForAdd]=\"inputParamsForWidget\" [fields]=\"getFields()\" (loader)=showloader($event)\r\n    (widgetResponseEmitter)=\"handleApiResponse($event)\"\r\n    (fieldResponseEmitter)=\"getFormFields($event)\"></lib-add-card-widget>\r\n\r\n\r\n<lib-payment-card-widget\r\n    *ngIf=\"(this.inputParamsForWidget.APIKey)&&(inputParamsForWidget.Token)&&(inputParamsForWidget.IsSale)\"   (HandleError)=\"handleError($event)\"\r\n    [inputParamsForWidgetForPayment]=\"inputParamsForWidget\" [fields]=\"getFields()\"\r\n    (widgetResponseEmitter)=\"handleApiResponse($event)\" (loader)=showloader($event)\r\n    (fieldResponseEmitter)=\"getFormFields($event)\"></lib-payment-card-widget>\r\n\r\n\r\n<lib-update-card-widget\r\n    *ngIf=\"updateShow\"\r\n    [inputParamsForWidgetForUpdate]=\"inputParamsForWidget\" [fields]=\"getFields()\" (loader)=showloader($event)\r\n    (widgetResponseEmitter)=\"handleApiResponse($event)\" (getWidgetDataResponseEmitter)=\"getUpdateApiResponse($event)\"\r\n    (fieldResponseEmitter)=\"getFormFields($event)\"></lib-update-card-widget>\r\n    " }]
+        }], ctorParameters: function () { return []; }, propDecorators: { inputParamsForWidget: [{
+                type: Input
+            }], widgetResponseEmitter: [{
+                type: Output
+            }], getWidgetDataResponseEmitter: [{
+                type: Output
+            }], fieldResponseEmitter: [{
+                type: Output
+            }], HandleError: [{
+                type: Output
+            }], loader: [{
+                type: Output
+            }], fields: [{
+                type: Input
+            }] } });
+
+class CroemCardWidgetModule {
+}
+CroemCardWidgetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CroemCardWidgetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CroemCardWidgetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CroemCardWidgetModule, declarations: [CroemCardWidgetComponent,
+        FieldBuilderComponent,
+        FieldBuilderComponent,
+        TextBoxComponent,
+        DropDownComponent,
+        AddCardWidgetComponent,
+        UpdateCardWidgetComponent,
+        PaymentCardWidgetComponent], imports: [FormsModule, ReactiveFormsModule, CommonModule, NgSelectModule], exports: [CroemCardWidgetComponent] });
+CroemCardWidgetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CroemCardWidgetModule, providers: [CroemCardWidgetService], imports: [FormsModule, ReactiveFormsModule, CommonModule, NgSelectModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CroemCardWidgetModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        CroemCardWidgetComponent,
+                        FieldBuilderComponent,
+                        FieldBuilderComponent,
+                        TextBoxComponent,
+                        DropDownComponent,
+                        AddCardWidgetComponent,
+                        UpdateCardWidgetComponent,
+                        PaymentCardWidgetComponent,
+                    ],
+                    providers: [CroemCardWidgetService],
+                    imports: [
+                        FormsModule, ReactiveFormsModule, CommonModule, NgSelectModule
+                    ],
+                    exports: [
+                        CroemCardWidgetComponent
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of croem-card-widget
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CroemCardWidgetComponent, CroemCardWidgetModule, CroemCardWidgetService, constants };
+//# sourceMappingURL=croeminc-croem-card-widget.mjs.map