ngx-payvent-shared 0.0.0 → 0.0.2

package/fesm2022/ngx-payvent-shared.mjs

@@ -1,37 +1,49 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, signal, Injectable, inject, Input, Component, HostListener, Pipe, input, computed, model, output, effect, ViewChild, ViewEncapsulation, ElementRef, HostBinding, Renderer2, Output, untracked } from '@angular/core';
+import { signal, Input, Component, Injectable, EventEmitter, inject, DOCUMENT, computed, effect, Pipe, HostListener, input, model, output, ViewChild, ViewEncapsulation, ElementRef, HostBinding, Renderer2, Output, untracked, afterEveryRender, afterNextRender, Directive } from '@angular/core';
+import { EdgeToEdge } from '@capawesome/capacitor-android-edge-to-edge-support';
+import { Capacitor } from '@capacitor/core';
 import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
-import { timer, shareReplay, ReplaySubject, of, tap, share } from 'rxjs';
-import * as i1 from '@angular/router';
+import { timer, shareReplay, ReplaySubject, of, tap, firstValueFrom, from, share } from 'rxjs';
+import * as i2$4 from '@angular/router';
 import { ActivatedRoute, Router, NavigationStart, NavigationEnd, NavigationCancel } from '@angular/router';
-import { catchError, shareReplay as shareReplay$1, map } from 'rxjs/operators';
+import { catchError, pairwise, map, shareReplay as shareReplay$1 } from 'rxjs/operators';
 import * as uuid from 'uuid';
 import * as signalR from '@microsoft/signalr';
-import * as i1$2 from '@angular/common';
-import { Location, CommonModule, NgComponentOutlet, NgTemplateOutlet, JsonPipe } from '@angular/common';
-import * as bowser from 'bowser';
-import * as i2$1 from 'primeng/api';
-import { ConfirmationService, MessageService } from 'primeng/api';
+import * as i2$3 from 'primeng/api';
+import { MessageService, ConfirmationService } from 'primeng/api';
+import * as i1$3 from '@angular/common';
+import { Location, CommonModule, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
+import bowser from 'bowser';
+import { toObservable } from '@angular/core/rxjs-interop';
 import { DomSanitizer, HammerModule } from '@angular/platform-browser';
-import * as i1$1 from '@angular/forms';
+import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
-import * as i3 from 'ngx-order-pipe';
+import * as i2$1 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import * as i4 from 'primeng/textarea';
+import { TextareaModule } from 'primeng/textarea';
+import * as i5 from 'primeng/autofocus';
+import { AutoFocusModule } from 'primeng/autofocus';
+import * as i2$2 from 'primeng/select';
+import { SelectModule } from 'primeng/select';
+import * as i3 from 'primeng/inputgroup';
+import { InputGroupModule } from 'primeng/inputgroup';
+import * as i4$1 from 'primeng/inputtext';
+import { InputTextModule, InputText } from 'primeng/inputtext';
+import * as i3$1 from 'ngx-order-pipe';
 import { OrderModule } from 'ngx-order-pipe';
-import { InputText, InputTextModule } from 'primeng/inputtext';
 import { InputOtp } from 'primeng/inputotp';
-import * as i3$1 from 'primeng/button';
-import { ButtonModule } from 'primeng/button';
+import * as i3$2 from 'primeng/checkbox';
+import { CheckboxModule } from 'primeng/checkbox';
 import { CardModule } from 'primeng/card';
 import { StyleClassModule } from 'primeng/styleclass';
-import * as i1$3 from 'primeng/toast';
+import * as i1$1 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
-import * as i1$4 from 'primeng/drawer';
+import * as i1$2 from 'primeng/drawer';
 import { DrawerModule } from 'primeng/drawer';
 import { RippleModule } from 'primeng/ripple';
-import * as i2$2 from 'primeng/checkbox';
-import { CheckboxModule } from 'primeng/checkbox';
 
 class FlowAppConfig {
     production;
@@ -49,6 +61,158 @@ class FlowAppConfig {
     fbPixel;
 }
 
+class SidebarContext {
+    close;
+    setSize;
+    _context = signal({}, ...(ngDevMode ? [{ debugName: "_context" }] : []));
+    set context(value) {
+        this._context.set(value);
+    }
+    get context() {
+        return this._context;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SidebarContext, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: SidebarContext, isStandalone: true, selector: "ng-component", inputs: { close: "close", setSize: "setSize", context: "context" }, ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SidebarContext, decorators: [{
+            type: Component,
+            args: [{
+                    template: ``
+                }]
+        }], propDecorators: { close: [{
+                type: Input
+            }], setSize: [{
+                type: Input
+            }], context: [{
+                type: Input
+            }] } });
+
+class Misc {
+    static hexToRgbA(hex, opacity) {
+        var c;
+        if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+            c = hex.substring(1).split('');
+            if (c.length == 3) {
+                c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+            }
+            c = '0x' + c.join('');
+            return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + opacity + ')';
+        }
+        throw new Error('Bad Hex');
+    }
+    static formatString(str, ...val) {
+        for (let index = 0; index < val.length; index++) {
+            str = str.replace(`{${index}}`, val[index]);
+        }
+        return str;
+    }
+    hexToRgbA(hex, a) {
+        var c;
+        if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+            c = hex.substring(1).split('');
+            if (c.length == 3) {
+                c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+            }
+            c = '0x' + c.join('');
+            return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + a + ')';
+        }
+        throw new Error('Bad Hex');
+    }
+    static replacer(key, value) {
+        // Filtering out properties
+        if (typeof value === 'string') {
+            return encodeURIComponent(value);
+        }
+        return value;
+    }
+    static reviver(key, value) {
+        // Filtering out properties
+        if (typeof value === 'string') {
+            return decodeURIComponent(value);
+        }
+        return value;
+    }
+    static stripHtml(originalString) {
+        let strippedString = originalString ? originalString.replace(/(<([^>]+)>)/gi, '') : '';
+        return strippedString;
+    }
+}
+
+class SortingPagingCriteria {
+    numberOfRecords = 30;
+    pageNumber = 1;
+    totalResults;
+    columnSortOrdersDefinition;
+    applySort(columnName) {
+        if (this.columnSortOrdersDefinition.columnName == columnName) {
+            this.columnSortOrdersDefinition.columnSortOrder = this.columnSortOrdersDefinition.columnSortOrder === 'Ascending' ? 'Descending' : 'Ascending';
+        }
+        else {
+            this.columnSortOrdersDefinition.columnName = columnName;
+            this.columnSortOrdersDefinition.columnSortOrder = 'Ascending';
+        }
+    }
+}
+class ColumnSortOrdersDefinition {
+    columnName;
+    columnSortOrder;
+}
+
+class StoryContext {
+    id;
+    type;
+    src;
+    completion = signal(0, ...(ngDevMode ? [{ debugName: "completion" }] : []));
+}
+
+class FlowCookieService {
+    instanceId;
+    _gdprConsent;
+    get gdprConsent() {
+        if (!this._gdprConsent)
+            this._gdprConsent = this.get('GdprConsent');
+        return this._gdprConsent;
+    }
+    set gdprConsent(value) {
+        this._gdprConsent = value;
+        this.put('GdprConsent', value, null);
+    }
+    constructor() {
+    }
+    get(name) {
+        if (!localStorage.getItem(name))
+            return null;
+        let obj = null;
+        try {
+            obj = JSON.parse(localStorage.getItem(name), Misc.reviver);
+        }
+        catch {
+            this.put(name, localStorage.getItem(name));
+            return localStorage.getItem(name);
+        }
+        if (obj.expires && Date.parse(obj.expires) < Date.parse(new Date().toISOString())) {
+            localStorage.removeItem(name);
+            return null;
+        }
+        else
+            return obj.value;
+    }
+    remove(name) {
+        localStorage.removeItem(name);
+    }
+    put(name, value, exp = null) {
+        localStorage[name] = JSON.stringify({ value: value, expires: exp ? exp.toISOString() : null }, Misc.replacer);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: FlowCookieService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: FlowCookieService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: FlowCookieService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 class GlobalService {
     onSuccess = new EventEmitter(false);
     onError = new EventEmitter(false);
@@ -103,6 +267,8 @@ class GlobalService {
     };
     loading = true;
     sidebarOpen = false;
+    loaded;
+    insets = signal(null, ...(ngDevMode ? [{ debugName: "insets" }] : []));
     constructor() {
         if (typeof CKEDITOR !== 'undefined')
             this.ckEditorOptions = {
@@ -129,6 +295,8 @@ class GlobalService {
                 height: 350,
                 ProcessHTMLEntities: false
             };
+        if (Capacitor.isNativePlatform())
+            EdgeToEdge.getInsets().then(s => { console.log(s); this.insets.set(s); }).then(s => EdgeToEdge.disable());
     }
     checkPID2(pid) {
         var pidLength = 13;
@@ -240,13 +408,13 @@ class GlobalService {
     isValidIBAN2(iban) {
         /*
         Pasul 1: Se muta primele patru caractere (simbolizand codul de tara si caracterele de verificare) la dreapta codului IBAN.
-    Exemplu: RO49AAAA1B31007593840000 devine AAAA1B31007593840000RO49.
+      Exemplu: RO49AAAA1B31007593840000 devine AAAA1B31007593840000RO49.
     
-    Pasul 2: Se face conversia literelor in numere, conform tabelei de conversie cuprinsa in Anexa nr. 2.
-    Exemplu: AAAA1B31007593840000RO49 devine 1010101011131007593840000272449
+      Pasul 2: Se face conversia literelor in numere, conform tabelei de conversie cuprinsa in Anexa nr. 2.
+      Exemplu: AAAA1B31007593840000RO49 devine 1010101011131007593840000272449
     
-    Pasul 3: Se aplica algoritmul MOD 97-10 (conform ISO 7064). Pentru ca cele 2 caractere de verificare sa fie corecte (codul IBAN sa fie corect), restul impartirii numarului astfel obtinut la 97 trebuie sa fie 1.
-    Exemplu: Restul impartirii lui 1010101011131007593840000272449 la 97 este 1.
+      Pasul 3: Se aplica algoritmul MOD 97-10 (conform ISO 7064). Pentru ca cele 2 caractere de verificare sa fie corecte (codul IBAN sa fie corect), restul impartirii numarului astfel obtinut la 97 trebuie sa fie 1.
+      Exemplu: Restul impartirii lui 1010101011131007593840000272449 la 97 este 1.
         */
         if (!iban)
             return false;
@@ -304,95 +472,10 @@ class GlobalService {
         }
         return remainder;
     }
-    hexToRgbA(hex, a) {
-        var c;
-        if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
-            c = hex.substring(1).split('');
-            if (c.length == 3) {
-                c = [c[0], c[0], c[1], c[1], c[2], c[2]];
-            }
-            c = '0x' + c.join('');
-            return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + a + ')';
-        }
-        throw new Error('Bad Hex');
-    }
-    formatString(str, ...val) {
-        for (let index = 0; index < val.length; index++) {
-            str = str.replace(`{${index}}`, val[index]);
-        }
-        return str;
-    }
-    replacer(key, value) {
-        // Filtering out properties
-        if (typeof value === 'string') {
-            return encodeURIComponent(value);
-        }
-        return value;
-    }
-    reviver(key, value) {
-        // Filtering out properties
-        if (typeof value === 'string') {
-            return decodeURIComponent(value);
-        }
-        return value;
-    }
-    stripHtml(originalString) {
-        let strippedString = originalString ? originalString.replace(/(<([^>]+)>)/gi, '') : '';
-        return strippedString;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GlobalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GlobalService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GlobalService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-class FlowCookieService {
-    instanceId;
-    globalService = inject(GlobalService);
-    _gdprConsent;
-    get gdprConsent() {
-        if (!this._gdprConsent)
-            this._gdprConsent = this.get('GdprConsent');
-        return this._gdprConsent;
-    }
-    set gdprConsent(value) {
-        this._gdprConsent = value;
-        this.put('GdprConsent', value, null);
-    }
-    constructor() {
-    }
-    get(name) {
-        if (!localStorage.getItem(name))
-            return null;
-        let obj = null;
-        try {
-            obj = JSON.parse(localStorage.getItem(name), this.globalService.reviver);
-        }
-        catch {
-            this.put(name, localStorage.getItem(name));
-            return localStorage.getItem(name);
-        }
-        if (obj.expires && Date.parse(obj.expires) < Date.parse(new Date().toISOString())) {
-            localStorage.removeItem(name);
-            return null;
-        }
-        else
-            return obj.value;
-    }
-    remove(name) {
-        localStorage.removeItem(name);
-    }
-    put(name, value, exp = null) {
-        localStorage[name] = JSON.stringify({ value: value, expires: exp ? exp.toISOString() : null }, this.globalService.replacer);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FlowCookieService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FlowCookieService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: GlobalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: GlobalService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FlowCookieService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: GlobalService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -401,11 +484,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
 
 class FlowHttpClient {
     http = inject(HttpClient);
+    document = inject(DOCUMENT);
     cookieService = inject(FlowCookieService);
     globalService = inject(GlobalService);
     route = inject(ActivatedRoute);
     router = inject(Router);
-    loading = 0;
     environment = inject(FlowAppConfig);
     pageLoadingComplete = new EventEmitter(false);
     loadingSuccess = new EventEmitter(false);
@@ -413,27 +496,9 @@ class FlowHttpClient {
     loadingFailure = new EventEmitter(false);
     _pageLoading = 0;
     _spinLoading = 0;
-    set pageLoading(value) {
-        let changed = value != this.loading;
-        this.loading = value;
-        if ((this.recordPageLoading && value > this._pageLoading) || value < this._pageLoading) {
-            if (this._pageLoading == 0)
-                this.pageLoadingStart.emit();
-            this._pageLoading = value;
-        }
-        if (value <= 0) {
-            this.recordPageLoading = false;
-            this._pageLoading = 0;
-            this.pageLoadingComplete.emit();
-        }
-        if (this.loading <= 0 && changed)
-            this.loadingSuccess.emit();
-    }
-    get pageLoading() {
-        // if (this.globalService.browser.name=='Safari' && this.globalService.browser.version && parseInt(this.globalService.browser.version.substring(0,1)) < 9)
-        //     return 0;
-        return this._pageLoading;
-    }
+    pageLoading = signal(0, ...(ngDevMode ? [{ debugName: "pageLoading" }] : []));
+    _loading = true;
+    loading = computed(() => this.pageLoading() > 0 ? true : false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     recordPageLoading = true;
     onError = new EventEmitter(false);
     _token;
@@ -460,81 +525,95 @@ class FlowHttpClient {
         this.router.events.subscribe(event => {
             if (event instanceof NavigationStart) {
                 this.recordPageLoading = true;
-                this.pageLoading++;
+                this.pageLoading.update(x => x + 1);
                 //   jQuery("html, body").animate({ scrollTop: 0 }, 50);
             }
             if (event instanceof NavigationEnd || event instanceof NavigationCancel) {
-                timer(100).subscribe(r => this.pageLoading--);
+                timer(100).subscribe(r => this.pageLoading.update(x => Math.max(0, x--)));
+            }
+        });
+        effect(() => {
+            if (this.pageLoading() > 0 && this._loading) {
+                if (!this.document.body.classList.contains('loading'))
+                    this.document.body.classList.add('loading');
+            }
+            if (this.pageLoading() == 0 && this._loading) {
+                if (this.document.body.classList.contains('loading'))
+                    this.document.body.classList.remove('loading');
+                this._loading = false;
+                this.pageLoadingComplete.emit();
             }
         });
     }
     get(endpoint, url, options, showLoader = true) {
-        if (showLoader)
-            this.pageLoading++;
+        if (showLoader && this.recordPageLoading)
+            this.pageLoading.update(x => x + 1);
         options = this.createAuthHeader(options);
         let retValue = this.http.get(endpoint + url, options)
             .pipe(catchError((err, caught) => {
             this.recordPageLoading = false;
-            this.pageLoading = 0;
+            this.pageLoading.set(0);
             this.onError.emit(err);
             throw err;
         }), shareReplay());
         retValue
             .subscribe(res => {
-            if (showLoader)
-                this.pageLoading--;
+            if (showLoader && this.recordPageLoading)
+                this.pageLoading.update(x => Math.max(0, x - 1));
         });
         return retValue;
     }
     delete(endpoint, url, options, showLoader = false) {
-        this.pageLoading++;
+        if (showLoader && this.recordPageLoading)
+            this.pageLoading.update(x => x + 1);
         options = this.createAuthHeader(options);
         let retValue = this.http.delete(endpoint + url, options)
             .pipe(catchError((err, caught) => {
             this.recordPageLoading = false;
-            this.pageLoading = 0;
+            this.pageLoading.set(0);
             this.onError.emit(err);
             throw err;
         }), shareReplay());
         retValue
             .subscribe(res => {
-            this.pageLoading--;
+            if (showLoader && this.recordPageLoading)
+                this.pageLoading.update(x => Math.max(0, x - 1));
         });
         return retValue;
     }
     post(endpoint, url, data, options, showLoader = true) {
-        this.pageLoading++;
+        if (showLoader && this.recordPageLoading)
+            this.pageLoading.update(x => x + 1);
         options = this.createAuthHeader(options);
-        if (data !== null && !options.headers.get('Content-Type'))
-            options.headers = options.headers.set('Content-Type', 'application/json');
         let retValue = this.http.post(endpoint + url, data, options)
             .pipe(catchError((err, caught) => {
             this.recordPageLoading = false;
-            this.pageLoading = 0;
+            this.pageLoading.set(0);
             this.onError.emit(err);
             throw err;
         }), shareReplay());
         retValue
             .subscribe(res => {
-            this.pageLoading--;
+            if (showLoader && this.recordPageLoading)
+                this.pageLoading.update(x => Math.max(0, x - 1));
         });
         return retValue;
     }
     put(endpoint, url, data, options, showLoader = false) {
-        this.pageLoading++;
+        if (showLoader && this.recordPageLoading)
+            this.pageLoading.update(x => x + 1);
         options = this.createAuthHeader(options);
-        if (data !== null && !options.headers.get('Content-Type'))
-            options.headers = options.headers.set('Content-Type', 'application/json');
         let retValue = this.http.put(endpoint + url, data, options)
             .pipe(catchError((err, caught) => {
             this.recordPageLoading = false;
-            this.pageLoading = 0;
+            this.pageLoading.set(0);
             this.onError.emit(err);
             throw err;
         }), shareReplay());
         retValue
             .subscribe(res => {
-            this.pageLoading--;
+            if (showLoader && this.recordPageLoading)
+                this.pageLoading.update(x => Math.max(0, x - 1));
         });
         return retValue;
     }
@@ -544,14 +623,16 @@ class FlowHttpClient {
         if (!options.headers) {
             options.headers = new HttpHeaders({
                 'Accept': 'application/json',
-                'flow-language-code': this.globalService.currentLanguage(),
-                'flow-edit-language-code': this.globalService.currentEditLanguage(),
             });
+            if (this.globalService.currentLanguage())
+                options.headers.set('flow-language-code', this.globalService.currentLanguage());
+            if (this.globalService.currentEditLanguage())
+                options.headers.set('flow-edit-language-code', this.globalService.currentEditLanguage());
         }
         else {
             if (!options.headers.get('Accept'))
                 options.headers = options.headers.set('Accept', 'application/json');
-            if (!options.headers.get('flow-language-code') && !options.excludeExtraHeaders)
+            if (!options.headers.get('flow-language-code') && !options.excludeExtraHeaders && this.globalService.currentLanguage())
                 options.headers = options.headers.set('flow-language-code', this.globalService.currentLanguage());
         }
         if (this.token && !options.excludeExtraHeaders) {
@@ -589,43 +670,20 @@ class FlowHttpClient {
     jsUcfirst(string) {
         return string.charAt(0).toUpperCase() + string.slice(1);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FlowHttpClient, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FlowHttpClient, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: FlowHttpClient, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: FlowHttpClient, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FlowHttpClient, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: FlowHttpClient, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
         }], ctorParameters: () => [] });
 
-class SidebarContext {
-    close;
-    _context = signal({}, ...(ngDevMode ? [{ debugName: "_context" }] : []));
-    set context(value) {
-        this._context.set(value);
-    }
-    get context() {
-        return this._context;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SidebarContext, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: SidebarContext, isStandalone: true, selector: "ng-component", inputs: { context: "context" }, ngImport: i0, template: ``, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SidebarContext, decorators: [{
-            type: Component,
-            args: [{
-                    template: ``
-                }]
-        }], propDecorators: { context: [{
-                type: Input
-            }] } });
-
 class SidebarService {
-    router;
-    // public readonly router = inject(Router);
+    router = inject(Router);
     sidebars = signal([], ...(ngDevMode ? [{ debugName: "sidebars" }] : []));
-    constructor(router) {
-        this.router = router;
+    constructor() {
         this.router.events.subscribe(event => {
             if (event instanceof NavigationStart) {
                 this.closeSidebars();
@@ -642,7 +700,7 @@ class SidebarService {
         options.position = options.position || defaultPosition;
         options.ngStyle = options.ngStyle || {};
         if (options.position == 'right' || options.position == 'left') {
-            options.ngStyle.width = options.ngStyle.width || '400px';
+            options.ngStyle.width = options.ngStyle.width || '500px';
             options.ngStyle.height = null;
             options.ngStyle['max-width'] = '95%';
             options.contentScrollable = signal(true, ...(ngDevMode ? [{ debugName: "contentScrollable" }] : []));
@@ -671,22 +729,26 @@ class SidebarService {
         };
         let pr = new Promise((resolve, reject) => {
             if (component.prototype instanceof SidebarContext) {
-                obj.inputs = { context: { data: data } };
-                obj.inputs.context.close = (value) => {
+                obj.inputs = data || {};
+                obj.inputs.close = (value) => {
                     resolve(value);
                     this.closeSidebar(obj.id);
                 };
-                obj.inputs.context.setSize = (value) => {
+                obj.inputs.setSize = (value) => {
                     this.setSize(value, options);
                 };
             }
         });
+        console.log(obj);
         this.sidebars.update(s => [...this.sidebars(), obj]);
         return pr;
     }
     openIframeSidebar(url, width = '400px') {
     }
     closeSidebars() {
+        this.sidebars().forEach(el => {
+            this.closeSidebar(el.id);
+        });
     }
     setSize(size, options) {
         if (options.position == 'bottom' && size.height) {
@@ -702,48 +764,48 @@ class SidebarService {
             options.ngStyle.width = size.width;
         }
     }
-    closeSidebar(id) {
+    closeSidebar(id = null) {
         this.sidebars.update(s => {
-            if (s.findIndex(a => !a.visible) >= 0)
-                s.splice(s.findIndex(a => !a.visible), 1);
-            let closee = s.find(a => a.id == id);
+            let closee = id ? s.find(a => a.id == id) : s[0];
+            if (!closee)
+                return s;
             closee.visible = false;
             if (s.findIndex(a => a.visible) < 0) {
                 document.getElementsByTagName("html")[0].style['overscroll-behavior'] = 'initial';
                 document.getElementsByTagName("body")[0].style['overscroll-behavior'] = 'initial';
             }
+            if (s.findIndex(a => !a.visible) >= 0)
+                s.splice(s.findIndex(a => !a.visible), 1);
             return s;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SidebarService, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SidebarService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SidebarService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SidebarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SidebarService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1.Router }] });
+        }], ctorParameters: () => [] });
 
-class SortingPagingCriteria {
-    numberOfRecords = 30;
-    pageNumber = 1;
-    totalResults;
-    columnSortOrdersDefinition;
-    applySort(columnName) {
-        if (this.columnSortOrdersDefinition.columnName == columnName) {
-            this.columnSortOrdersDefinition.columnSortOrder = this.columnSortOrdersDefinition.columnSortOrder === 'Ascending' ? 'Descending' : 'Ascending';
-        }
-        else {
-            this.columnSortOrdersDefinition.columnName = columnName;
-            this.columnSortOrdersDefinition.columnSortOrder = 'Ascending';
-        }
+// The work of the pipe is handled in the tranform method with our pipe's class
+class TranslationPipe {
+    constructor() { }
+    transform(value, htmlContentList, replacements = null) {
+        let signal = computed(() => Misc.formatString((htmlContentList() && htmlContentList()[value] ? htmlContentList()[value] : value), ...(replacements && Array.isArray(replacements()) ? replacements() : [])), ...(ngDevMode ? [{ debugName: "signal" }] : []));
+        return signal();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TranslationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.2", ngImport: i0, type: TranslationPipe, isStandalone: true, name: "translation" });
 }
-class ColumnSortOrdersDefinition {
-    columnName;
-    columnSortOrder;
-}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TranslationPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'translation',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [] });
 
 class SignalrNotificationService {
     cookieService = inject(FlowCookieService);
@@ -754,13 +816,14 @@ class SignalrNotificationService {
     http = inject(FlowHttpClient);
     translationService = inject(TranslationSharedService);
     globalService = inject(GlobalService);
+    messageService = inject(MessageService);
     connection;
-    messages = [];
+    messages = signal([], ...(ngDevMode ? [{ debugName: "messages" }] : []));
     newMessage;
     subscribedChannels = [];
     onNotification = new EventEmitter(true);
     connectionPromise;
-    unreadMessageCount = 0;
+    unreadMessageCount = signal(0, ...(ngDevMode ? [{ debugName: "unreadMessageCount" }] : []));
     hasMorePages = false;
     subscription;
     environment = inject(FlowAppConfig);
@@ -823,8 +886,8 @@ class SignalrNotificationService {
         window.FirebasePlugin.createChannel(channel);
     }
     subscribePushChannels() {
-        if (this.userService.currentUser.id && window.cordova && window.FirebasePlugin)
-            window.FirebasePlugin.subscribe(`${this.environment.application_id}${this.environment.production ? '' : '--debug'}--${this.environment.client_id.replace('::', '~')}--${this.userService.currentUser.id}`);
+        if (this.userService.currentUser().id && window.cordova && window.FirebasePlugin)
+            window.FirebasePlugin.subscribe(`${this.environment.application_id}${this.environment.production ? '' : '--debug'}--${this.environment.client_id.replace('::', '~')}--${this.userService.currentUser().id}`);
     }
     unsubscribePushChannels(user) {
         if (user.id && window.cordova && window.FirebasePlugin)
@@ -837,8 +900,8 @@ class SignalrNotificationService {
             this.interval.unsubscribe();
         if (this.onlineStatus == 'ONLINE')
             return;
-        // let options = 
-        // { 
+        // let options =
+        // {
         //     headers: {
         //         'Authorization': `Bearer ${this.httpClient.token}`
         //     }
@@ -884,8 +947,12 @@ class SignalrNotificationService {
             if (m.hideInToaster || this.mute)
                 return;
             //here
-            this.messages.push(m);
-            this.unreadMessageCount++;
+            this.messages.update(ctx => {
+                ctx.push(m);
+                return ctx;
+            });
+            this.messageService.add({ severity: m.class, detail: this.processReplacements(new TranslationPipe().transform(m.body, this.translationService.translations()), m.model) });
+            this.unreadMessageCount.update(c => c + 1);
             this.playSound(m.sound);
         });
     }
@@ -949,7 +1016,7 @@ class SignalrNotificationService {
             // BrowserVersion: this.browser.getBrowser().version, //114.0.1823.79
             Route: window.location.pathname + window.location.search, // /access
             Host: window.location.host,
-            User: this.userService.currentUser.id ? this.userService.currentUser : null, //{roles: Array(0)}
+            User: this.userService.currentUser().id ? this.userService.currentUser() : null, //{roles: Array(0)}
             //Id: this.instanceId, //"372d46d4-a48a-2ca9-c29a-acdeee6798ef"
             Language: this.globalService.currentLanguage(), // desktop
             // Lat: this.coordinates ? this.coordinates.coords.latitude : null, //null
@@ -958,7 +1025,7 @@ class SignalrNotificationService {
             // OsName: this.browser.getOS().name, //Windows
             // OsVersion: this.browser.getOS().version, //NT 10.0
             // PlatformType: this.browser.getPlatformType(),
-            // ScreenH: this.platform.height(),    //721  
+            // ScreenH: this.platform.height(),    //721
             // ScreenW: this.platform.width(), //1026
             // Version: packageInfo.version,
         };
@@ -972,23 +1039,23 @@ class SignalrNotificationService {
         obs.subscribe(res => {
             if (res.result.type !== 'error') {
                 if (this.messagePageNo == 1) {
-                    this.messages = this.messages.filter(m => !m.saveToDb);
+                    this.messages.update(c => c.filter(m => !m.saveToDb));
                 }
-                this.messages = this.messages.concat(res.result.notifications);
-                this.unreadMessageCount = res.result.unreadMessageCount;
+                this.messages.update(c => c.concat(res.result.notifications));
+                this.unreadMessageCount.set(res.result.unreadMessageCount);
                 this.hasMorePages = res.result.hasMorePages;
             }
         });
         return obs;
     }
     setReadReceipt() {
-        this.unreadMessageCount = 0;
+        this.unreadMessageCount.set(0);
         return this.httpClient.get(this.environment.endpoints['NotificationServer'], '/api/services/app/NotificationService/SetReadReceipt');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SignalrNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SignalrNotificationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SignalrNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SignalrNotificationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SignalrNotificationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SignalrNotificationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1014,10 +1081,10 @@ class ApplicationSharedService {
     getAdminClients() {
         return this.http.get(this.endpoints['IdentityServer'], `/clients/getadminclients`);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ApplicationSharedService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ApplicationSharedService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ApplicationSharedService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ApplicationSharedService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ApplicationSharedService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ApplicationSharedService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1036,52 +1103,15 @@ class TranslationSharedService {
     globalService = inject(GlobalService);
     cookieService = inject(FlowCookieService);
     translations = signal({}, ...(ngDevMode ? [{ debugName: "translations" }] : []));
+    userService = inject(UserAccountService);
     languages = signal([], ...(ngDevMode ? [{ debugName: "languages" }] : []));
     countries = signal([], ...(ngDevMode ? [{ debugName: "countries" }] : []));
     editContent = signal(false, ...(ngDevMode ? [{ debugName: "editContent" }] : []));
     translationObs;
-    countryProvinceCityPlaceholder = [];
+    countryProvinceCityPlaceholder = signal([], ...(ngDevMode ? [{ debugName: "countryProvinceCityPlaceholder" }] : []));
     get endpoint() {
         return this.environment.endpoints['TranslationServer'];
     }
-    get currentLanguage() {
-        let value = this.cookieService.get('language');
-        if (value)
-            this.globalService.currentLanguage = value;
-        return this.globalService.currentLanguage;
-    }
-    set currentLanguage(value) {
-        if (!value)
-            return;
-        let languageChanged = false;
-        if (this.globalService.currentLanguage != value)
-            languageChanged = true;
-        this.globalService.currentLanguage = value;
-        this.cookieService.put('language', value);
-        if (languageChanged) {
-            this.onLanguageChanged.emit(value);
-            this.getTranslations(true).subscribe(() => { });
-        }
-    }
-    // public get currentEditLanguage() {
-    //   let value = this.cookieService.get('edit-language');
-    //   if (value)
-    //     this.globalService._currentEditLanguage = value;
-    //   return this.globalService._currentEditLanguage;
-    // }
-    // public set currentEditLanguage(value) {
-    //   if (!value)
-    //     return;
-    //   this.http.recordPageLoading = true;
-    //   let languageChanged = false;
-    //   if (this.globalService._currentEditLanguage != value)
-    //     languageChanged = true;
-    //   this.globalService._currentEditLanguage = value;
-    //   this.cookieService.put('edit-language', value);
-    //   if (languageChanged) {
-    //     this.onEditLanguageChanged.emit(value);
-    //   }
-    // }
     get currentLanguageObj() {
         if (this.languages && this.languages[this.globalService.currentLanguage()])
             return this.languages[this.globalService.currentLanguage()];
@@ -1090,14 +1120,15 @@ class TranslationSharedService {
     }
     constructor() {
         console.log('constructing translations');
-        this.getTranslations(true).subscribe(() => { });
-        this.getCountries().subscribe(() => { });
-        this.getLanguages().subscribe(() => { });
-        this.getLocalization();
+        toObservable(this.globalService.currentLanguage).pipe(pairwise()).subscribe(([oldValue, newValue]) => {
+            console.log(oldValue, newValue);
+            if (oldValue != newValue)
+                this.getTranslations(true);
+        });
     }
     getTranslations(force = true) {
         if (this.translationsLoaded() && !force)
-            return of(this.translations);
+            return of(this.translations());
         if (this.translationObs && !force)
             return this.translationObs;
         if (localStorage['translations']) {
@@ -1111,13 +1142,15 @@ class TranslationSharedService {
             .pipe(catchError(err => {
             console.log('Error loading translations');
             return of([]);
-        }), tap(res => {
+        }), shareReplay());
+        this.translationObs.subscribe(res => {
+            console.log('Translationsloaded and complete');
             this.translations.set(res.result);
             this.translationsLoaded.set(true);
             this.onTranslationsLoaded.emit();
             localStorage['translations'] = JSON.stringify(this.translations());
             this.translationObs = null;
-        }));
+        });
         return this.translationObs;
     }
     getLanguages() {
@@ -1150,41 +1183,56 @@ class TranslationSharedService {
     getHtmlContentByUrl(url) {
         return this.http.get(this.endpoint, `/api/services/app/TranslationClientService/GetContentPage?applicationId=${encodeURIComponent(this.environment.application_id)}&url=${encodeURIComponent(url)}&languageCode=${this.globalService.currentLanguage()}`);
     }
-    getLocalization() {
+    async getLocalization() {
+        let loc = {};
         if (this.cookieService.get('localization'))
-            return of(JSON.parse(this.cookieService.get('localization')));
+            loc = JSON.parse(this.cookieService.get('localization'));
         else {
-            let obs = this.http.get(this.endpoint, `/api/services/app/LocalizationService/GetWithClientIp`).pipe(tap(res => this.cookieService.put('localization', JSON.stringify(res))));
-            return obs;
+            loc = await firstValueFrom(this.http.get(this.endpoint, `/api/services/app/LocalizationService/GetWithClientIp`).pipe(map(t => t.result)));
+            let coordsValue = await this.getNavigatorPosition().catch(e => null);
+            if (coordsValue)
+                loc.coords = { lat: coordsValue.coords.latitude, lng: coordsValue.coords.longitude };
+            this.cookieService.put('localization', JSON.stringify(loc));
         }
+        this.globalService.currentLanguage.set(loc.language);
+        return loc;
+    }
+    getNavigatorPosition(options) {
+        return new Promise((resolve, reject) => navigator.geolocation.getCurrentPosition(resolve, reject, options));
     }
     getCountryCityPlaceholder(correlation) {
-        return this.countryProvinceCityPlaceholder[correlation];
+        console.log(this.countryProvinceCityPlaceholder()[correlation]);
+        return this.countryProvinceCityPlaceholder()[correlation];
     }
     setCountryCityPlaceholder(correlation, value) {
-        var context = this.countryProvinceCityPlaceholder[correlation];
-        context.update(ctx => {
-            let result = {
-                ...ctx,
+        console.log(value);
+        this.countryProvinceCityPlaceholder.update(ctx => {
+            ctx[correlation] = {
+                ...ctx[correlation],
                 countryCode: value.countryCode,
                 currentCountry: this.countries().find(c => c.code == value.countryCode),
                 city: value.city
             };
             if (value.provinceCode) {
-                ctx.currentProvince = this.countryProvinceCityPlaceholder[correlation].currentCountry.provinces.find(p => p.code == value.provinceCode);
-                ctx.provinceCode = ctx.currentProvince.code;
-                ctx.provinceName = ctx.currentProvince.name;
+                ctx[correlation].currentProvince = this.countryProvinceCityPlaceholder()[correlation].currentCountry.provinces.find(p => p.code == value.provinceCode);
+                ctx[correlation].provinceCode = ctx[correlation].currentProvince.code;
+                ctx[correlation].provinceName = ctx[correlation].currentProvince.name;
             }
             else {
-                ctx.currentProvince = null;
-                ctx.provinceCode = null;
-                ctx.provinceName = value.provinceName;
+                ctx[correlation].currentProvince = null;
+                ctx[correlation].provinceCode = null;
+                ctx[correlation].provinceName = value.provinceName;
             }
+            return ctx;
         });
+        console.log(this.countryProvinceCityPlaceholder()[correlation]);
     }
     validateCountryProvinceCity(correlation) {
-        this.countryProvinceCityPlaceholder[correlation] = this.countryProvinceCityPlaceholder[correlation] || {};
-        let countryProvinceCity = this.countryProvinceCityPlaceholder[correlation];
+        this.countryProvinceCityPlaceholder.update(ctx => {
+            ctx[correlation] = this.countryProvinceCityPlaceholder()[correlation] || {};
+            return ctx;
+        });
+        let countryProvinceCity = this.countryProvinceCityPlaceholder()[correlation];
         countryProvinceCity.countryError = false;
         countryProvinceCity.provinceError = false;
         countryProvinceCity.cityError = false;
@@ -1197,11 +1245,15 @@ class TranslationSharedService {
         if (!countryProvinceCity.city) {
             countryProvinceCity.cityError = true;
         }
+        this.countryProvinceCityPlaceholder.update(ctx => {
+            ctx[correlation] = countryProvinceCity;
+            return ctx;
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TranslationSharedService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TranslationSharedService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TranslationSharedService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TranslationSharedService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TranslationSharedService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TranslationSharedService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1217,12 +1269,12 @@ class UserAccountService {
     sidebarService = inject(SidebarService);
     globalService = inject(GlobalService);
     environment = inject(FlowAppConfig);
-    currentUser = { claims: [] };
+    currentUser = signal({ claims: [] }, ...(ngDevMode ? [{ debugName: "currentUser" }] : []));
     _redirectTo;
     source;
     logoutTimer;
     get browser() {
-        return bowser.default.getParser(window.navigator.userAgent);
+        return bowser.getParser(window.navigator.userAgent);
     }
     get redirectTo() {
         if (!this._redirectTo)
@@ -1267,16 +1319,16 @@ class UserAccountService {
     getCurrentUser(force = false) {
         if (this.currentUserObs)
             return this.currentUserObs;
-        if ((this.http.token && !this.currentUser.id) || force) {
+        if ((this.http.token && !this.currentUser().id) || force) {
             this.currentUserObs = this.getCurrentUserDetails(force).pipe(shareReplay$1());
             ;
             this.currentUserObs.subscribe(res => {
                 if (res.result.status == 'valid')
-                    this.currentUser = res.result.user;
+                    this.currentUser.set(res.result.user);
                 else
                     this.logout();
                 this.currentUserObs = null;
-                if (this.currentUser.id)
+                if (this.currentUser().id)
                     this.setLogOutTimer();
             });
             return this.currentUserObs;
@@ -1292,7 +1344,7 @@ class UserAccountService {
         if (res.response == 'logged_in') {
             console.log(res);
             this.http.token = res.token;
-            this.currentUser = res.userAccount;
+            this.currentUser.set(res.userAccount);
             this.cookieService.put('userAccount', JSON.stringify({ firstName: res.userAccount.firstName, lastName: res.userAccount.lastName, email: res.userAccount.email }));
             this.onUserLoggedIn.emit(res.userAccount);
             this.setLogOutTimer();
@@ -1307,7 +1359,7 @@ class UserAccountService {
     }
     processOtpToken(result) {
         this.http.token = result.authToken;
-        this.currentUser = result.user;
+        this.currentUser.set(result.user);
         this.onUserLoggedIn.emit({ action: result.action, user: this.currentUser });
         this.setLogOutTimer();
     }
@@ -1331,7 +1383,7 @@ class UserAccountService {
 `, model);
     }
     getCurrentUserDetails(force = false) {
-        if (!this.currentUser.id || force) {
+        if (!this.currentUser().id || force) {
             let obs2;
             let obs = this.http
                 .get(this.environment.endpoints['IdentityServer'], '/api/services/app/IdentityService/GetTokenModel')
@@ -1350,7 +1402,7 @@ class UserAccountService {
         let postObj = { token: this.token, client_id: this.environment.client_id };
         this.cookieService.remove('auth_token');
         // this.http.post(this.environment.endpoints['IdentityServer'], '/connect/revocation', this.http.serializeToQueryString(postObj), { headers: headers } );
-        this.currentUser = { claims: [] };
+        this.currentUser.set({ claims: [] });
         this.currentUserObs = null;
         this.http.token = null;
         this.onUserLoggedOut.emit(loggedOutUser);
@@ -1377,15 +1429,15 @@ class UserAccountService {
         });
     }
     userHasPermission(perm) {
-        return this.currentUser.permissions && this.currentUser.permissions.includes(perm);
+        return this.currentUser().permissions && this.currentUser().permissions.includes(perm);
     }
     checkCurentUserClaims(route) {
-        let obs = this.getCurrentUser(!this.currentUser.id);
+        let obs = this.getCurrentUser(!this.currentUser().id);
         return obs.pipe(map((result) => {
             let retValue = !route.data.permissions; //currentRouteConfig.canActivate.length > 0;
-            if (!route.data.permissions || !this.currentUser.id)
+            if (!route.data.permissions || !this.currentUser().id)
                 return retValue;
-            if (route.data.permissions && route.data.permissions.length == 0 && this.currentUser.id)
+            if (route.data.permissions && route.data.permissions.length == 0 && this.currentUser().id)
                 return true;
             console.log(result);
             route.data.permissions.forEach(x => {
@@ -1405,10 +1457,10 @@ class UserAccountService {
     requestLoginNameChange(model) {
         return this.http.post(this.environment.endpoints['IdentityServer'], '/api/services/app/IdentityService/RequestLoginNameChange', model);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: UserAccountService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: UserAccountService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: UserAccountService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: UserAccountService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: UserAccountService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: UserAccountService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1418,22 +1470,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 args: ['window:focus', ['$event']]
             }] } });
 
-// The work of the pipe is handled in the tranform method with our pipe's class
-class TranslationPipe {
-    constructor() { }
-    transform(value, htmlContentList) {
-        return htmlContentList && htmlContentList[value] ? htmlContentList[value] : value;
+class AppSettingsLoader {
+    application_id;
+    environment = inject(FlowAppConfig);
+    userService = inject(UserAccountService);
+    applicationService = inject(ApplicationSharedService);
+    http = inject(FlowHttpClient);
+    translationService = inject(TranslationSharedService);
+    globalService = inject(GlobalService);
+    constructor() {
+    }
+    canActivate(route, state) {
+        return from(this.loadSettings()).pipe(map(res => true));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TranslationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: TranslationPipe, isStandalone: true, name: "translation" });
+    async loadSettings() {
+        console.log('loadSettings');
+        if (this.globalService.loaded)
+            return;
+        await this.translationService.getLocalization();
+        await firstValueFrom(this.userService.getCurrentUser());
+        await firstValueFrom(this.translationService.getTranslations());
+        await firstValueFrom(this.translationService.getCountries());
+        await firstValueFrom(this.translationService.getLanguages());
+        //moment.locale(this.translationService.currentLanguage);
+        this.globalService.loaded = true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AppSettingsLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AppSettingsLoader, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TranslationPipe, decorators: [{
-            type: Pipe,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AppSettingsLoader, decorators: [{
+            type: Injectable,
             args: [{
-                    name: 'translation',
-                    standalone: true
+                    providedIn: 'root'
                 }]
         }], ctorParameters: () => [] });
+const AppSettingsLoaderService = (next, state) => {
+    return inject(AppSettingsLoader).canActivate(next, state);
+};
 
 // The work of the pipe is handled in the tranform method with our pipe's class
 class SumPipe {
@@ -1443,10 +1516,10 @@ class SumPipe {
         value.forEach(t => result += parseFloat(t[member]));
         return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SumPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: SumPipe, isStandalone: true, name: "sum" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SumPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.2", ngImport: i0, type: SumPipe, isStandalone: true, name: "sum" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SumPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SumPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'sum'
@@ -1461,6 +1534,7 @@ class ModalService {
     // modal = inject(DialogModule);
     confirmationService = inject(ConfirmationService);
     messageService = inject(MessageService);
+    globalService = inject(GlobalService);
     constructor() { }
     openConfirm(trans) {
         this.confirmationService.confirm({
@@ -1506,16 +1580,28 @@ class ModalService {
             acceptLabel: new TranslationPipe().transform(`ok`, this.translationService.translations)
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ModalService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ModalService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ModalService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
         }], ctorParameters: () => [] });
 
+class ViewTransitionService {
+    currentTransition = signal(null, ...(ngDevMode ? [{ debugName: "currentTransition" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ViewTransitionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ViewTransitionService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ViewTransitionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class TranslationComponent {
     _name = signal(null, ...(ngDevMode ? [{ debugName: "_name" }] : []));
     name = input('name', ...(ngDevMode ? [{ debugName: "name" }] : []));
@@ -1530,16 +1616,15 @@ class TranslationComponent {
     // public _replacements: string[] = [];
     _replacements = signal(null, ...(ngDevMode ? [{ debugName: "_replacements" }] : []));
     replacements = input(null, ...(ngDevMode ? [{ debugName: "replacements" }] : []));
+    translationService = inject(TranslationSharedService);
+    sanitizer = inject(DomSanitizer);
     editorOpen = signal(false, ...(ngDevMode ? [{ debugName: "editorOpen" }] : []));
     saveSuccess = signal(false, ...(ngDevMode ? [{ debugName: "saveSuccess" }] : []));
     editContent = signal(false, ...(ngDevMode ? [{ debugName: "editContent" }] : []));
-    content = computed(() => {
-        return this.sanitizer.bypassSecurityTrustHtml(this.globalService.formatString(new TranslationPipe().transform(this.name(), this.translationService.translations()), ...(Array.isArray(this.replacements()) ? this.replacements() : [])));
-    }, ...(ngDevMode ? [{ debugName: "content" }] : []));
-    editableContent = computed(() => this.sanitizer.bypassSecurityTrustHtml(new TranslationPipe().transform(this._name(), this.translationService.translations())), ...(ngDevMode ? [{ debugName: "editableContent" }] : []));
-    translationService = inject(TranslationSharedService);
+    content = computed(() => this.sanitizer.bypassSecurityTrustHtml(new TranslationPipe().transform(this.name(), this.translationService.translations, this.replacements)), ...(ngDevMode ? [{ debugName: "content" }] : []));
+    editableContentView = computed(() => this.sanitizer.bypassSecurityTrustHtml(this.editableContent() || this.name()), ...(ngDevMode ? [{ debugName: "editableContentView" }] : []));
+    editableContent = signal(null, ...(ngDevMode ? [{ debugName: "editableContent" }] : []));
     router = inject(Router);
-    sanitizer = inject(DomSanitizer);
     userService = inject(UserAccountService);
     route = inject(ActivatedRoute);
     globalService = inject(GlobalService);
@@ -1550,8 +1635,11 @@ class TranslationComponent {
     }
     changeEdit() {
         this.userService.getCurrentUser().subscribe((res) => {
-            this.translationService.editContent.set(res.claims && res.claims['permission'] &&
-                res.claims['permission'].indexOf('manageTranslations') >= 0);
+            this.editContent.set(this.userService.currentUser().permissions &&
+                this.userService.currentUser().permissions.indexOf('manageTranslations') >= 0);
+            if (this.editContent())
+                this.editableContent.set(this.translationService.translations()[this.name()] || '');
+            this.editorOpen.set(true);
         });
     }
     // navigateUrl(url: string) {
@@ -1563,37 +1651,37 @@ class TranslationComponent {
     openEditor() {
         if (!this.translationService.editContent())
             return;
-        this.editorOpen.set(true);
     }
     closeEditor() {
         this.editorOpen.set(false);
     }
     quickSaveContent() {
-        this.translationService.quickSaveHtmlContent(this.name(), this.translationService.translations()[this.name()]).subscribe((res) => {
+        this.translationService.quickSaveHtmlContent(this.name(), this.editableContent()).subscribe((res) => {
             if (res.result === true) {
                 this.closeEditor();
             }
         });
     }
     handleSave(e) {
+        console.log(e);
         if (e.ctrlKey && (e.which == 83)) {
             e.preventDefault();
             this.quickSaveContent();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TranslationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: TranslationComponent, isStandalone: true, selector: "translate", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, replacements: { classPropertyName: "replacements", publicName: "replacements", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (translationService.translationsLoaded()) {\r\n<span (click)=\"openEditor()\" style=\"position:relative\">\r\n    @if(!translationService.editContent()){<span (dblclick)=\"changeEdit()\" [innerHtml]=\"content()\"></span>}\r\n</span>\r\n} @else {\r\n<p-skeleton></p-skeleton>\r\n}\r\n\r\n@if (translationService.editContent()) {\r\n<span class=\"html-edit\">\r\n    <a class=\"btn-show-edit\" (click)=\"openEditor()\"><i class=\"fa fa-edit\"></i>\r\n        {{name()}}</a>\r\n    <span (click)=\"openEditor()\" [innerHtml]=\"editableContent()\"></span>\r\n</span>\r\n}\r\n@if(editorOpen()) {\r\n<div class=\"content-editor\">\r\n    <textarea [(ngModel)]=\"translationService.translations()[name()]\" class='form-control html-edit-control'\r\n        (keydown)=\"handleSave($event)\"></textarea>\r\n\r\n    <div class=\"modal-footer\">\r\n        @if(saveSuccess){<span class=\"text-muted\"><i class=\"fa fa-save\"></i> Datele au fost salvate</span>\r\n        }\r\n        <button color=\"default\" (click)=\"closeEditor()\">Anuleaza</button>\r\n        <button color=\"primary\" (click)=\"quickSaveContent()\">Salveaza modificari</button>\r\n    </div>\r\n\r\n    <style type=\"text/css\">\r\n        body {\r\n            margin-bottom: 300px\r\n        }\r\n    </style>\r\n</div>\r\n}", styles: [".content-editor{position:fixed;z-index:100001;bottom:0;left:0;right:0;background-color:#fff}.html-edit:hover *{opacity:.8}.btn-show-edit{display:inherit}.btn-show-edit{display:none;background-color:#c87f0a;border-radius:2px;padding:3px;font-size:8pt;z-index:10000;white-space:nowrap;color:#fff!important;position:absolute;left:5px;top:-12px;opacity:1!important}.html-edit{cursor:pointer}.html-edit-control{height:150px!important;font-family:Courier New;font-size:12px;width:100%!important;display:block!important}\n", "body{margin-bottom:300px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TranslationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: TranslationComponent, isStandalone: true, selector: "translate", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, replacements: { classPropertyName: "replacements", publicName: "replacements", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (translationService.translationsLoaded()) {\r\n<span (click)=\"openEditor()\" style=\"position:relative\">\r\n    @if(!editContent()){<span (dblclick)=\"changeEdit()\" [innerHtml]=\"content()\"></span>}\r\n</span>\r\n} @else {\r\n<p-skeleton></p-skeleton>\r\n}\r\n\r\n@if (editContent()) {\r\n<span class=\"html-edit\">\r\n    <a class=\"btn-show-edit\" (click)=\"openEditor()\"><i class=\"fa fa-edit\"></i>\r\n        {{name()}}</a>\r\n    <span (click)=\"openEditor()\" [innerHtml]=\"editableContentView()\"></span>\r\n</span>\r\n}\r\n@if(editorOpen()) {\r\n<div class=\"content-editor\">\r\n    <textarea [(ngModel)]=\"editableContent\" pTextarea [pAutoFocus]=\"true\" style=\"resize:none; height: 150px;\" class=\"w-full width: 100%\"\r\n        (keydown)=\"handleSave($event)\"></textarea>\r\n\r\n    <div class=\"modal-footer\">\r\n        @if(saveSuccess()){\r\n            <span class=\"text-muted\"><i class=\"fa fa-save\"></i> Datele au fost salvate</span>\r\n        }\r\n        <button pButton (click)=\"closeEditor()\">Anuleaza</button>\r\n        <button pButton (click)=\"quickSaveContent()\">Salveaza modificari</button>\r\n    </div>\r\n\r\n    <style type=\"text/css\">\r\n        body {\r\n            margin-bottom: 300px\r\n        }\r\n    </style>\r\n</div>\r\n}", styles: [".content-editor{position:fixed;z-index:100001;bottom:0;left:0;right:0;background-color:#fff}.html-edit:hover *{opacity:.8}.btn-show-edit{display:inherit}.btn-show-edit{display:none;background-color:#c87f0a;border-radius:2px;padding:3px;font-size:8pt;z-index:10000;white-space:nowrap;color:#fff!important;position:absolute;left:5px;top:-12px;opacity:1!important}.html-edit{cursor:pointer}.html-edit-control{height:150px!important;font-family:Courier New;font-size:12px;width:100%!important;display:block!important}\n", "body{margin-bottom:300px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i5.AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TranslationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TranslationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'translate', standalone: true, imports: [CommonModule, FormsModule, SkeletonModule], template: "@if (translationService.translationsLoaded()) {\r\n<span (click)=\"openEditor()\" style=\"position:relative\">\r\n    @if(!translationService.editContent()){<span (dblclick)=\"changeEdit()\" [innerHtml]=\"content()\"></span>}\r\n</span>\r\n} @else {\r\n<p-skeleton></p-skeleton>\r\n}\r\n\r\n@if (translationService.editContent()) {\r\n<span class=\"html-edit\">\r\n    <a class=\"btn-show-edit\" (click)=\"openEditor()\"><i class=\"fa fa-edit\"></i>\r\n        {{name()}}</a>\r\n    <span (click)=\"openEditor()\" [innerHtml]=\"editableContent()\"></span>\r\n</span>\r\n}\r\n@if(editorOpen()) {\r\n<div class=\"content-editor\">\r\n    <textarea [(ngModel)]=\"translationService.translations()[name()]\" class='form-control html-edit-control'\r\n        (keydown)=\"handleSave($event)\"></textarea>\r\n\r\n    <div class=\"modal-footer\">\r\n        @if(saveSuccess){<span class=\"text-muted\"><i class=\"fa fa-save\"></i> Datele au fost salvate</span>\r\n        }\r\n        <button color=\"default\" (click)=\"closeEditor()\">Anuleaza</button>\r\n        <button color=\"primary\" (click)=\"quickSaveContent()\">Salveaza modificari</button>\r\n    </div>\r\n\r\n    <style type=\"text/css\">\r\n        body {\r\n            margin-bottom: 300px\r\n        }\r\n    </style>\r\n</div>\r\n}", styles: [".content-editor{position:fixed;z-index:100001;bottom:0;left:0;right:0;background-color:#fff}.html-edit:hover *{opacity:.8}.btn-show-edit{display:inherit}.btn-show-edit{display:none;background-color:#c87f0a;border-radius:2px;padding:3px;font-size:8pt;z-index:10000;white-space:nowrap;color:#fff!important;position:absolute;left:5px;top:-12px;opacity:1!important}.html-edit{cursor:pointer}.html-edit-control{height:150px!important;font-family:Courier New;font-size:12px;width:100%!important;display:block!important}\n", "body{margin-bottom:300px}\n"] }]
+            args: [{ selector: 'translate', standalone: true, imports: [CommonModule, FormsModule, SkeletonModule, ButtonModule, TextareaModule, AutoFocusModule], template: "@if (translationService.translationsLoaded()) {\r\n<span (click)=\"openEditor()\" style=\"position:relative\">\r\n    @if(!editContent()){<span (dblclick)=\"changeEdit()\" [innerHtml]=\"content()\"></span>}\r\n</span>\r\n} @else {\r\n<p-skeleton></p-skeleton>\r\n}\r\n\r\n@if (editContent()) {\r\n<span class=\"html-edit\">\r\n    <a class=\"btn-show-edit\" (click)=\"openEditor()\"><i class=\"fa fa-edit\"></i>\r\n        {{name()}}</a>\r\n    <span (click)=\"openEditor()\" [innerHtml]=\"editableContentView()\"></span>\r\n</span>\r\n}\r\n@if(editorOpen()) {\r\n<div class=\"content-editor\">\r\n    <textarea [(ngModel)]=\"editableContent\" pTextarea [pAutoFocus]=\"true\" style=\"resize:none; height: 150px;\" class=\"w-full width: 100%\"\r\n        (keydown)=\"handleSave($event)\"></textarea>\r\n\r\n    <div class=\"modal-footer\">\r\n        @if(saveSuccess()){\r\n            <span class=\"text-muted\"><i class=\"fa fa-save\"></i> Datele au fost salvate</span>\r\n        }\r\n        <button pButton (click)=\"closeEditor()\">Anuleaza</button>\r\n        <button pButton (click)=\"quickSaveContent()\">Salveaza modificari</button>\r\n    </div>\r\n\r\n    <style type=\"text/css\">\r\n        body {\r\n            margin-bottom: 300px\r\n        }\r\n    </style>\r\n</div>\r\n}", styles: [".content-editor{position:fixed;z-index:100001;bottom:0;left:0;right:0;background-color:#fff}.html-edit:hover *{opacity:.8}.btn-show-edit{display:inherit}.btn-show-edit{display:none;background-color:#c87f0a;border-radius:2px;padding:3px;font-size:8pt;z-index:10000;white-space:nowrap;color:#fff!important;position:absolute;left:5px;top:-12px;opacity:1!important}.html-edit{cursor:pointer}.html-edit-control{height:150px!important;font-family:Courier New;font-size:12px;width:100%!important;display:block!important}\n", "body{margin-bottom:300px}\n"] }]
         }], ctorParameters: () => [] });
 
 class InternationalPhoneComponent {
     countriesList = [];
     countryFlag;
     localizationCountry;
-    selectedCountryCode;
+    selectedCountryCode = signal(null, ...(ngDevMode ? [{ debugName: "selectedCountryCode" }] : []));
     phoneNo;
     //private _phoneNumber = computed(() => this.phoneNumber());
     // private _phoneNumber = signal('')
@@ -1608,7 +1696,7 @@ class InternationalPhoneComponent {
     //   this.onPhoneInput(this._phoneNumber);
     // }
     get currentPhoneNumber() {
-        let phoneDialCode = this.countriesList.find(ctr => ctr.code == this.selectedCountryCode).dialCode;
+        let phoneDialCode = this.countriesList.find(ctr => ctr.code == this.selectedCountryCode()).dialCode;
         if (this.phoneNo && phoneDialCode) {
             return phoneDialCode + this.phoneNo;
         }
@@ -1626,7 +1714,7 @@ class InternationalPhoneComponent {
         //   this.onPhoneInput(this._phoneNumber());
         // });
         effect(() => {
-            this._phoneNumber.update(this.phoneNumber() || '');
+            this._phoneNumber.set(this.phoneNumber() || '');
             this.onPhoneInput(this._phoneNumber());
         }, { allowSignalWrites: true });
     }
@@ -1639,24 +1727,24 @@ class InternationalPhoneComponent {
         if (this.countriesList.length > 0)
             return of(this.countriesList);
         this.countriesObs = this.translationService.getCountries().pipe(share());
-        this.countriesObs.subscribe(res => {
-            if (!this.selectedCountryCode) {
-                this.translationService.getLocalization().subscribe(r => {
-                    this.countriesList = res.result;
-                    this.countriesList.forEach(c => c.displayName = `${c.name} ${this.getFlagEmoji(c.code)} (${c.dialCode})`);
-                    this.localizationCountry = r.result.country;
-                    if (this.localizationCountry)
-                        this.onSelectionChange(this.localizationCountry);
-                });
+        this.countriesObs.subscribe(async (res) => {
+            if (!this.selectedCountryCode()) {
+                let r = await this.translationService.getLocalization();
+                this.countriesList = res.result;
+                this.countriesList.forEach(c => c.displayName = `${c.name} ${this.getFlagEmoji(c.code)} (${c.dialCode})`);
+                this.localizationCountry = r.result.country;
+                if (this.localizationCountry)
+                    this.onSelectionChange(this.localizationCountry);
             }
         });
         return this.countriesObs;
     }
     onSelectionChange(selectedCode) {
-        this.countriesList.forEach(c => c.displayName = `${c.name} ${this.getFlagEmoji(c.code)} (${c.dialCode})`);
+        if (!selectedCode)
+            return;
         this.selectedCountry = this.countriesList.find(c => c.code == selectedCode);
-        this.selectedCountry.displayName = `${this.getFlagEmoji(this.selectedCountry.code)} (${this.selectedCountry.dialCode})`;
-        this.selectedCountryCode = this.selectedCountry.code;
+        console.log(this.selectedCountry);
+        this.selectedCountryCode.set(this.selectedCountry.code);
     }
     changePhoneNumber() {
         if (this._phoneNumber() != this.currentPhoneNumber) {
@@ -1669,7 +1757,7 @@ class InternationalPhoneComponent {
     }
     onPhoneInput(pastedNumber = this.phoneNo) {
         this.getCountries().subscribe(c => {
-            this.onSelectionChange(this.selectedCountryCode);
+            this.onSelectionChange(this.selectedCountryCode());
             if (!pastedNumber)
                 return;
             pastedNumber = pastedNumber.replace(/[^0-9+]/g, '');
@@ -1693,15 +1781,17 @@ class InternationalPhoneComponent {
                 .reduce((a, b) => `${a}${b}`);
         return this.countryFlag;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: InternationalPhoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: InternationalPhoneComponent, isStandalone: true, selector: "payvent-international-phone", inputs: { phoneNumber: { classPropertyName: "phoneNumber", publicName: "phoneNumber", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { phoneNumber: "phoneNumberChange", phoneNumberChange: "phoneNumberChange" }, ngImport: i0, template: "<div class=\"mb-3\">\r\n  <select style=\"width:110px; border-radius: 6px 0 0 6px; border-right-width: 0;\" class=\"form-control\" name=\"country\"\r\n    [(ngModel)]=\"selectedCountryCode\" (change)=\"onPhoneInput()\" #country=\"ngModel\">\r\n    <option value=\"undefined\" selected disabled>- select -</option>\r\n    @for (item of countriesList; track item.code){\r\n    <option [ngValue]=\"item.code\">{{item.displayName}}</option>\r\n    }\r\n  </select>\r\n  <input style=\"border-radius: 0 6px 6px 0; border-left-width: 0;\" pInputText class=\"w-full\" type=\"phone\" [(ngModel)]=\"phoneNo\"\r\n    (input)=\"onPhoneInput()\" phone class=\"form-control\" #phone=\"ngModel\" (paste)=\"onPaste($event)\" name=\"phone\"\r\n    placeholder=\"Please enter phone number\" />\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.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$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: InternationalPhoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.2", type: InternationalPhoneComponent, isStandalone: true, selector: "payvent-international-phone", inputs: { phoneNumber: { classPropertyName: "phoneNumber", publicName: "phoneNumber", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { phoneNumber: "phoneNumberChange", phoneNumberChange: "phoneNumberChange" }, ngImport: i0, template: "<div class=\"mb-3\">\r\n  <p-inputgroup>\r\n    <p-select style=\"min-width:120px; flex:0\" resetFilterOnHide=\"true\" optionLabel=\"dialCode\" filter=\"true\"\r\n      optionValue=\"code\" placeholder=\"--\" [options]=\"countriesList\" name=\"country\" [(ngModel)]=\"selectedCountryCode\"\r\n      (onChange)=\"onPhoneInput()\" #country=\"ngModel\">\r\n      <ng-template let-country #item>\r\n        <div class=\"flex items-center gap-2\">\r\n          <img [src]=\"'/assets/ngx-payvent-shared/flags/' + country.code.toLowerCase() + '.png'\"\r\n            [class]=\"'flag flag-' + country.code.toLowerCase()\" style=\"width: 18px\" />\r\n          <div>({{ country.dialCode }}) {{ country.name }}</div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template let-country #selectedItem>\r\n        <div class=\"flex items-center gap-2\">\r\n          <img [src]=\"'/assets/ngx-payvent-shared/flags/' + country.code.toLowerCase() + '.png'\"\r\n            [class]=\"'flag flag-' + country.code.toLowerCase()\" style=\"width: 18px\" />\r\n          <div>{{ country.dialCode }}</div>\r\n        </div>\r\n      </ng-template>\r\n    </p-select>\r\n    <input style=\"border-radius: 0 6px 6px 0; border-left-width: 0;\" fluid=\"true\" pInputText type=\"phone\"\r\n      [(ngModel)]=\"phoneNo\" (input)=\"onPhoneInput()\" phone class=\"form-control\" #phone=\"ngModel\"\r\n      (paste)=\"onPaste($event)\" name=\"phone\" placeholder=\"Please enter phone number\" />\r\n  </p-inputgroup>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2$2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i3.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: InternationalPhoneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: InternationalPhoneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'payvent-international-phone', standalone: true, imports: [
                         CommonModule,
                         FormsModule,
-                        // InputTextModule,
+                        SelectModule,
+                        InputGroupModule,
+                        InputTextModule,
                         // CardModule,
                         // RippleModule,
                         // ButtonModule,
@@ -1710,7 +1800,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         // TagModule,
                         // AvatarModule,
                         // AvatarGroupModule,
-                    ], template: "<div class=\"mb-3\">\r\n  <select style=\"width:110px; border-radius: 6px 0 0 6px; border-right-width: 0;\" class=\"form-control\" name=\"country\"\r\n    [(ngModel)]=\"selectedCountryCode\" (change)=\"onPhoneInput()\" #country=\"ngModel\">\r\n    <option value=\"undefined\" selected disabled>- select -</option>\r\n    @for (item of countriesList; track item.code){\r\n    <option [ngValue]=\"item.code\">{{item.displayName}}</option>\r\n    }\r\n  </select>\r\n  <input style=\"border-radius: 0 6px 6px 0; border-left-width: 0;\" pInputText class=\"w-full\" type=\"phone\" [(ngModel)]=\"phoneNo\"\r\n    (input)=\"onPhoneInput()\" phone class=\"form-control\" #phone=\"ngModel\" (paste)=\"onPaste($event)\" name=\"phone\"\r\n    placeholder=\"Please enter phone number\" />\r\n</div>" }]
+                    ], template: "<div class=\"mb-3\">\r\n  <p-inputgroup>\r\n    <p-select style=\"min-width:120px; flex:0\" resetFilterOnHide=\"true\" optionLabel=\"dialCode\" filter=\"true\"\r\n      optionValue=\"code\" placeholder=\"--\" [options]=\"countriesList\" name=\"country\" [(ngModel)]=\"selectedCountryCode\"\r\n      (onChange)=\"onPhoneInput()\" #country=\"ngModel\">\r\n      <ng-template let-country #item>\r\n        <div class=\"flex items-center gap-2\">\r\n          <img [src]=\"'/assets/ngx-payvent-shared/flags/' + country.code.toLowerCase() + '.png'\"\r\n            [class]=\"'flag flag-' + country.code.toLowerCase()\" style=\"width: 18px\" />\r\n          <div>({{ country.dialCode }}) {{ country.name }}</div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template let-country #selectedItem>\r\n        <div class=\"flex items-center gap-2\">\r\n          <img [src]=\"'/assets/ngx-payvent-shared/flags/' + country.code.toLowerCase() + '.png'\"\r\n            [class]=\"'flag flag-' + country.code.toLowerCase()\" style=\"width: 18px\" />\r\n          <div>{{ country.dialCode }}</div>\r\n        </div>\r\n      </ng-template>\r\n    </p-select>\r\n    <input style=\"border-radius: 0 6px 6px 0; border-left-width: 0;\" fluid=\"true\" pInputText type=\"phone\"\r\n      [(ngModel)]=\"phoneNo\" (input)=\"onPhoneInput()\" phone class=\"form-control\" #phone=\"ngModel\"\r\n      (paste)=\"onPaste($event)\" name=\"phone\" placeholder=\"Please enter phone number\" />\r\n  </p-inputgroup>\r\n</div>" }]
         }], ctorParameters: () => [] });
 
 class CountryProvinceCityComponent {
@@ -1728,46 +1818,60 @@ class CountryProvinceCityComponent {
     }
     constructor() { }
     ngOnInit() {
-        this.translationService.countryProvinceCityPlaceholder[this.correlation()] = signal({});
+        this.translationService.countryProvinceCityPlaceholder.update(ctx => {
+            ctx[this.correlation()] = ctx[this.correlation()] || {};
+            return ctx;
+        });
     }
     // emitOutput() {
     //   this.valueChange.emit({ countryCode: this.currentCountryCode, countryName: this.currentCountryName, provinceCode: this.currentProvinceCode, provinceName: this.currentProvinceName });
     // }
     setCountry() {
-        let placeholder = this.translationService.getCountryCityPlaceholder(this.correlation());
-        placeholder.update(p => ({
-            ...p,
-            provinceCode: undefined,
-            provinceName: undefined,
-            currentProvince: undefined,
-            city: undefined
-        }));
-        this.translationService.setCountryCityPlaceholder(this.correlation(), placeholder);
+        this.translationService.countryProvinceCityPlaceholder.update(p => {
+            p[this.correlation()] =
+                {
+                    ...p[this.correlation()],
+                    provinceCode: undefined,
+                    provinceName: undefined,
+                    currentProvince: undefined,
+                    city: undefined
+                };
+            return p;
+        });
+        this.translationService.setCountryCityPlaceholder(this.correlation(), this.translationService.countryProvinceCityPlaceholder()[this.correlation()]);
     }
     setProvince() {
-        let placeholder = this.translationService.getCountryCityPlaceholder(this.correlation());
-        placeholder.update(p => ({
-            ...p,
-            city: undefined
-        }));
-        this.translationService.setCountryCityPlaceholder(this.correlation(), placeholder);
+        this.translationService.countryProvinceCityPlaceholder.update(p => {
+            p[this.correlation()] = {
+                ...p[this.correlation()],
+                city: undefined
+            };
+            return p;
+        });
+        this.translationService.setCountryCityPlaceholder(this.correlation(), this.translationService.countryProvinceCityPlaceholder()[this.correlation()]);
     }
     ngOnDestroy() {
         this.translationService.countryProvinceCityPlaceholder[this.correlation()] = undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CountryProvinceCityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CountryProvinceCityComponent, isStandalone: true, selector: "payvent-country-province-city", inputs: { correlation: { classPropertyName: "correlation", publicName: "correlation", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (mode() == 'country') {\r\n<select (change)=\"setCountry()\"\r\n  [(ngModel)]=\"translationService.countryProvinceCityPlaceholder[this.correlation()]().countryCode\"\r\n  class=\"form-control\">\r\n  <option [ngValue]=\"undefined\">{{'pleaseSelect' | translation: translationService.translations }}</option>\r\n  @for(c of translationService.countries(); track c.code) {\r\n  <option [ngValue]=\"c.code\">{{c.name}}</option>\r\n  }\r\n</select>\r\n}\r\n\r\n@if(mode()=='province') {\r\n@if(translationService.countryProvinceCityPlaceholder[this.correlation()]()?.currentCountry?.provinces?.length > 0) {\r\n\r\n<select (change)=\"setProvince()\" class=\"form-control\"\r\n  [(ngModel)]=\"translationService.countryProvinceCityPlaceholder[this.correlation()]().provinceCode\">\r\n  <option [ngValue]=\"undefined\">{{'pleaseSelect' | translation: translationService.translations }}</option>\r\n  <option\r\n    *ngFor=\"let c of translationService.countryProvinceCityPlaceholder[this.correlation()]().currentCountry?.provinces | orderBy: 'name'\"\r\n    [ngValue]=\"c.code\">{{c.name}}</option>\r\n</select>\r\n}\r\n\r\n@if(!(translationService.countryProvinceCityPlaceholder[this.correlation()]().currentCountry?.provinces?.length > 0)) {\r\n<input type=\"text\" [(ngModel)]=\"translationService.countryProvinceCityPlaceholder[this.correlation()]().provinceName\"\r\n  class=\"form-control\" #currentPName=\"ngModel\" name=\"currentPName\" required />\r\n}\r\n}\r\n\r\n@if(mode()=='city') {\r\n\r\n@if(translationService.countryProvinceCityPlaceholder[this.correlation()]().currentProvince?.cities?.length > 0) {\r\n\r\n<select class=\"form-control\" [(ngModel)]=\"translationService.countryProvinceCityPlaceholder[this.correlation()]().city\">\r\n  <option [ngValue]=\"undefined\">{{'pleaseSelect' | translation: translationService.translations }}</option>\r\n  @for(c of translationService.countryProvinceCityPlaceholder[this.correlation()]().currentProvince?.cities; track c) {\r\n  <option>{{c}}</option>\r\n  }\r\n</select>\r\n}\r\n\r\n@if(!(translationService.countryProvinceCityPlaceholder[this.correlation()]().currentProvince?.cities?.length > 0)) {\r\n\r\n<input type=\"text\" [(ngModel)]=\"translationService.countryProvinceCityPlaceholder[this.correlation()]().city\"\r\n  class=\"form-control\" #currentC=\"ngModel\" name=\"currentC\" required />\r\n}\r\n}", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.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$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: OrderModule }, { kind: "pipe", type: TranslationPipe, name: "translation" }, { kind: "pipe", type: i3.OrderPipe, name: "orderBy" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CountryProvinceCityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: CountryProvinceCityComponent, isStandalone: true, selector: "payvent-country-province-city", inputs: { correlation: { classPropertyName: "correlation", publicName: "correlation", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (mode() == 'country') {\r\n<p-select (onChange)=\"setCountry()\" filter=\"true\" optionValue=\"code\" optionLabel=\"name\" resetFilterOnHide=\"true\"\r\n  placeholder=\"{{'pleaseSelect' | translation: translationService.translations}}\" fluid\r\n  [options]=\"translationService.countries()\"\r\n  [(ngModel)]=\"translationService.countryProvinceCityPlaceholder()[this.correlation()].countryCode\"\r\n  class=\"form-control\">\r\n  <ng-template let-country #item>\r\n    <div class=\"flex items-center gap-2\">\r\n      <img [src]=\"'/assets/ngx-payvent-shared/flags/' + country.code.toLowerCase() + '.png'\"\r\n        [class]=\"'flag flag-' + country.code.toLowerCase()\" style=\"width: 18px\" />\r\n      <div>{{ country.name }}</div>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template let-country #selectedItem>\r\n    <div class=\"flex items-center gap-2\">\r\n      <img [src]=\"'/assets/ngx-payvent-shared/flags/' + country.code.toLowerCase() + '.png'\"\r\n        [class]=\"'flag flag-' + country.code.toLowerCase()\" style=\"width: 18px\" />\r\n      <div>{{ country.name }}</div>\r\n    </div>\r\n  </ng-template>\r\n</p-select>\r\n}\r\n\r\n@if(mode()=='province') {\r\n@if(translationService.countryProvinceCityPlaceholder()[this.correlation()]?.currentCountry?.provinces?.length > 0) {\r\n\r\n<p-select placeholder=\"{{'pleaseSelect' | translation: translationService.translations}}\" (onChange)=\"setProvince()\"\r\n  resetFilterOnHide=\"true\" filter=\"true\" fluid optionValue=\"code\" optionLabel=\"name\"\r\n  [options]=\"translationService.countryProvinceCityPlaceholder()[this.correlation()].currentCountry?.provinces | orderBy: 'name'\"\r\n  [(ngModel)]=\"translationService.countryProvinceCityPlaceholder()[this.correlation()].provinceCode\">\r\n</p-select>\r\n}\r\n\r\n@if(!(translationService.countryProvinceCityPlaceholder()[this.correlation()].currentCountry?.provinces?.length > 0)) {\r\n<input type=\"text\" pInputText fluid\r\n  [(ngModel)]=\"translationService.countryProvinceCityPlaceholder()[this.correlation()].provinceName\"\r\n  class=\"form-control\" #currentPName=\"ngModel\" name=\"currentPName\" required />\r\n}\r\n}\r\n\r\n@if(mode()=='city') {\r\n@if(translationService.countryProvinceCityPlaceholder()[this.correlation()].currentProvince?.cities?.length > 0) {\r\n\r\n<p-select fluid placeholder=\"{{'pleaseSelect' | translation: translationService.translations}}\"\r\n  [options]=\"translationService.countryProvinceCityPlaceholder()[this.correlation()].currentProvince?.cities\"\r\n  [(ngModel)]=\"translationService.countryProvinceCityPlaceholder()[this.correlation()].city\">\r\n</p-select>\r\n}\r\n\r\n@if(!(translationService.countryProvinceCityPlaceholder()[this.correlation()].currentProvince?.cities?.length > 0)) {\r\n\r\n<input type=\"text\" [(ngModel)]=\"translationService.countryProvinceCityPlaceholder()[this.correlation()].city\"\r\n  class=\"form-control\" #currentC=\"ngModel\" name=\"currentC\" pInputText fluid required />\r\n}\r\n}", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: OrderModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2$2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "pipe", type: TranslationPipe, name: "translation" }, { kind: "pipe", type: i3$1.OrderPipe, name: "orderBy" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CountryProvinceCityComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CountryProvinceCityComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'payvent-country-province-city', standalone: true, imports: [CommonModule, FormsModule, TranslationComponent, TranslationPipe, OrderModule], template: "@if (mode() == 'country') {\r\n<select (change)=\"setCountry()\"\r\n  [(ngModel)]=\"translationService.countryProvinceCityPlaceholder[this.correlation()]().countryCode\"\r\n  class=\"form-control\">\r\n  <option [ngValue]=\"undefined\">{{'pleaseSelect' | translation: translationService.translations }}</option>\r\n  @for(c of translationService.countries(); track c.code) {\r\n  <option [ngValue]=\"c.code\">{{c.name}}</option>\r\n  }\r\n</select>\r\n}\r\n\r\n@if(mode()=='province') {\r\n@if(translationService.countryProvinceCityPlaceholder[this.correlation()]()?.currentCountry?.provinces?.length > 0) {\r\n\r\n<select (change)=\"setProvince()\" class=\"form-control\"\r\n  [(ngModel)]=\"translationService.countryProvinceCityPlaceholder[this.correlation()]().provinceCode\">\r\n  <option [ngValue]=\"undefined\">{{'pleaseSelect' | translation: translationService.translations }}</option>\r\n  <option\r\n    *ngFor=\"let c of translationService.countryProvinceCityPlaceholder[this.correlation()]().currentCountry?.provinces | orderBy: 'name'\"\r\n    [ngValue]=\"c.code\">{{c.name}}</option>\r\n</select>\r\n}\r\n\r\n@if(!(translationService.countryProvinceCityPlaceholder[this.correlation()]().currentCountry?.provinces?.length > 0)) {\r\n<input type=\"text\" [(ngModel)]=\"translationService.countryProvinceCityPlaceholder[this.correlation()]().provinceName\"\r\n  class=\"form-control\" #currentPName=\"ngModel\" name=\"currentPName\" required />\r\n}\r\n}\r\n\r\n@if(mode()=='city') {\r\n\r\n@if(translationService.countryProvinceCityPlaceholder[this.correlation()]().currentProvince?.cities?.length > 0) {\r\n\r\n<select class=\"form-control\" [(ngModel)]=\"translationService.countryProvinceCityPlaceholder[this.correlation()]().city\">\r\n  <option [ngValue]=\"undefined\">{{'pleaseSelect' | translation: translationService.translations }}</option>\r\n  @for(c of translationService.countryProvinceCityPlaceholder[this.correlation()]().currentProvince?.cities; track c) {\r\n  <option>{{c}}</option>\r\n  }\r\n</select>\r\n}\r\n\r\n@if(!(translationService.countryProvinceCityPlaceholder[this.correlation()]().currentProvince?.cities?.length > 0)) {\r\n\r\n<input type=\"text\" [(ngModel)]=\"translationService.countryProvinceCityPlaceholder[this.correlation()]().city\"\r\n  class=\"form-control\" #currentC=\"ngModel\" name=\"currentC\" required />\r\n}\r\n}" }]
+            args: [{ selector: 'payvent-country-province-city', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        TranslationPipe,
+                        OrderModule,
+                        SelectModule,
+                        InputText
+                    ], template: "@if (mode() == 'country') {\r\n<p-select (onChange)=\"setCountry()\" filter=\"true\" optionValue=\"code\" optionLabel=\"name\" resetFilterOnHide=\"true\"\r\n  placeholder=\"{{'pleaseSelect' | translation: translationService.translations}}\" fluid\r\n  [options]=\"translationService.countries()\"\r\n  [(ngModel)]=\"translationService.countryProvinceCityPlaceholder()[this.correlation()].countryCode\"\r\n  class=\"form-control\">\r\n  <ng-template let-country #item>\r\n    <div class=\"flex items-center gap-2\">\r\n      <img [src]=\"'/assets/ngx-payvent-shared/flags/' + country.code.toLowerCase() + '.png'\"\r\n        [class]=\"'flag flag-' + country.code.toLowerCase()\" style=\"width: 18px\" />\r\n      <div>{{ country.name }}</div>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template let-country #selectedItem>\r\n    <div class=\"flex items-center gap-2\">\r\n      <img [src]=\"'/assets/ngx-payvent-shared/flags/' + country.code.toLowerCase() + '.png'\"\r\n        [class]=\"'flag flag-' + country.code.toLowerCase()\" style=\"width: 18px\" />\r\n      <div>{{ country.name }}</div>\r\n    </div>\r\n  </ng-template>\r\n</p-select>\r\n}\r\n\r\n@if(mode()=='province') {\r\n@if(translationService.countryProvinceCityPlaceholder()[this.correlation()]?.currentCountry?.provinces?.length > 0) {\r\n\r\n<p-select placeholder=\"{{'pleaseSelect' | translation: translationService.translations}}\" (onChange)=\"setProvince()\"\r\n  resetFilterOnHide=\"true\" filter=\"true\" fluid optionValue=\"code\" optionLabel=\"name\"\r\n  [options]=\"translationService.countryProvinceCityPlaceholder()[this.correlation()].currentCountry?.provinces | orderBy: 'name'\"\r\n  [(ngModel)]=\"translationService.countryProvinceCityPlaceholder()[this.correlation()].provinceCode\">\r\n</p-select>\r\n}\r\n\r\n@if(!(translationService.countryProvinceCityPlaceholder()[this.correlation()].currentCountry?.provinces?.length > 0)) {\r\n<input type=\"text\" pInputText fluid\r\n  [(ngModel)]=\"translationService.countryProvinceCityPlaceholder()[this.correlation()].provinceName\"\r\n  class=\"form-control\" #currentPName=\"ngModel\" name=\"currentPName\" required />\r\n}\r\n}\r\n\r\n@if(mode()=='city') {\r\n@if(translationService.countryProvinceCityPlaceholder()[this.correlation()].currentProvince?.cities?.length > 0) {\r\n\r\n<p-select fluid placeholder=\"{{'pleaseSelect' | translation: translationService.translations}}\"\r\n  [options]=\"translationService.countryProvinceCityPlaceholder()[this.correlation()].currentProvince?.cities\"\r\n  [(ngModel)]=\"translationService.countryProvinceCityPlaceholder()[this.correlation()].city\">\r\n</p-select>\r\n}\r\n\r\n@if(!(translationService.countryProvinceCityPlaceholder()[this.correlation()].currentProvince?.cities?.length > 0)) {\r\n\r\n<input type=\"text\" [(ngModel)]=\"translationService.countryProvinceCityPlaceholder()[this.correlation()].city\"\r\n  class=\"form-control\" #currentC=\"ngModel\" name=\"currentC\" pInputText fluid required />\r\n}\r\n}" }]
         }], ctorParameters: () => [] });
 
-class LoginFormComponent {
-    context = model({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
+class LoginFormComponent extends SidebarContext {
     myForm;
     // @ViewChild('cd', { static: false }) private countdown: CountdownComponent;
-    allowAccountCreation = input(true, ...(ngDevMode ? [{ debugName: "allowAccountCreation" }] : []));
+    allowAccountCreation = true;
     tokenType = input('TEMPORARY', ...(ngDevMode ? [{ debugName: "tokenType" }] : []));
     clientId = input(null, ...(ngDevMode ? [{ debugName: "clientId" }] : []));
     type = input('EMAIL', ...(ngDevMode ? [{ debugName: "type" }] : []));
@@ -1783,6 +1887,7 @@ class LoginFormComponent {
     provincesList = [];
     countriesList = [];
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    otpLoading = signal(false, ...(ngDevMode ? [{ debugName: "otpLoading" }] : []));
     otpSuccess = signal(false, ...(ngDevMode ? [{ debugName: "otpSuccess" }] : []));
     contextResponse;
     responseStatus;
@@ -1823,16 +1928,19 @@ class LoginFormComponent {
     cookieService = inject(FlowCookieService);
     globalService = inject(GlobalService);
     constructor() {
+        super();
     }
     ngOnInit() {
         var result = {};
         this.context.update(ctx => ({
             ...ctx,
+            user: {},
             type: ctx.type ?? this.type(),
             tokenType: ctx.tokenType ?? this.tokenType(),
             action: ctx.action ?? 'LOGIN',
-            allowAccountCreation: typeof ctx.allowAccountCreation == 'boolean' ? ctx.allowAccountCreation : this.allowAccountCreation()
+            allowAccountCreation: typeof ctx.allowAccountCreation == 'boolean' ? ctx.allowAccountCreation : this.allowAccountCreation
         }));
+        console.log(this.context());
         this.userService.onAccessRefused.subscribe(res => {
             this.resetContext();
             this.accessRefused.set(true);
@@ -1861,6 +1969,7 @@ class LoginFormComponent {
         window.login = null;
     }
     openConsent(evt, item) {
+        console.log(evt);
         evt.stopPropagation();
         // this.http.get(item.contentUrl, { responseType: 'text' }).subscribe(r => {
         //   this.modalService.openRawAlert(new TranslationPipe().transform('consentTitle.' + item.name, this.translationService.translations), r);
@@ -1875,10 +1984,12 @@ class LoginFormComponent {
     }
     getOtp() {
         this.showError.set(false);
+        this.loading.set(true);
         this.context.update(ctx => ({ ...ctx, errorMessage: null }));
         // this.showResend = false;
         if (this.myForm && !this.myForm.valid) {
             this.showError.set(true);
+            this.loading.set(false);
             this.globalService.onError.emit();
             return;
         }
@@ -1887,7 +1998,9 @@ class LoginFormComponent {
             clientName: this.environment.client_id,
             allowAccountCreation: this.allowAccountCreation
         }));
-        this.userService.getOtp(this.context()).subscribe(res => {
+        this.userService.getOtp(this.context()).subscribe(async (res) => {
+            console.log(res.result.type);
+            this.loading.set(false);
             if (res.result.status == 'otp_verified') {
                 this.otpSuccess.set(true);
                 this.globalService.onSuccess.emit();
@@ -1896,16 +2009,23 @@ class LoginFormComponent {
                     return;
                 }
                 if (res.result.type == 'DATA') {
-                    // this.translationService.setCountryCityPlaceholder('login-form', {
-                    //   countryCode: this.context().user.countryCode,
-                    //   provinceCode: this.context().user.provinceCode,
-                    //   provinceName: this.context().user.province,
-                    //   city: this.context().user.city
-                    // });
+                    console.log({
+                        countryCode: res.result.user?.countryCode || (await this.translationService.getLocalization()).result.country,
+                        provinceCode: res.result.user?.provinceCode,
+                        provinceName: res.result.user?.province,
+                        city: res.result.user?.city
+                    });
+                    this.translationService.setCountryCityPlaceholder('login-form', {
+                        countryCode: res.result.user?.countryCode || (await this.translationService.getLocalization()).result.country,
+                        provinceCode: res.result.user?.provinceCode,
+                        provinceName: res.result.user?.province,
+                        city: res.result.user?.city
+                    });
                 }
             }
             this.prevContext = this.context();
             this.context.set(res.result);
+            console.log(this.context);
             this.countdownConfig = { leftTime: 30, format: 'ss' };
             if (this.context().status == 'error') {
                 this.globalService.onError.emit();
@@ -1918,7 +2038,6 @@ class LoginFormComponent {
         });
     }
     verifyOtp(val) {
-        console.log(this.context());
         if (val?.value.length < 6)
             return;
         this.context.update(ctx => ({
@@ -1927,13 +2046,12 @@ class LoginFormComponent {
             clientName: this.environment.client_id,
             status: 'otp_sent',
         }));
-        this.loading.set(true);
+        this.otpLoading.set(true);
         this.otpError.set(false);
         this.otpSuccess.set(false);
-        this.userService.verifyOtp(this.context()).subscribe(r => {
+        this.userService.verifyOtp(this.context()).subscribe(async (r) => {
             if (r.result.status == 'otp_verified') {
                 this.otpSuccess.set(true);
-                this.globalService.onSuccess.emit();
                 if (r.result.type == 'TOKEN') {
                     this.userService.processOtpToken(r.result);
                     return;
@@ -1943,21 +2061,26 @@ class LoginFormComponent {
                     this.userService.onUserLoggedIn.emit({ action: this.context().action, user: r.result.user });
                     return;
                 }
+                if (r.result.type == 'DATA') {
+                    this.translationService.setCountryCityPlaceholder('login-form', {
+                        countryCode: r.result.user?.countryCode || (await this.translationService.getLocalization()).result.country,
+                        provinceCode: r.result.user?.provinceCode,
+                        provinceName: r.result.user?.province,
+                        city: r.result.user?.city
+                    });
+                }
             }
-            this.loading.set(false);
+            this.otpLoading.set(false);
             this.context.set(r.result);
-            console.log(this.context());
             if (this.context().errorMessage == 'wrong_code') {
-                this.context().update(ctx => ({
-                    ...ctx,
-                    otp: null
-                }));
+                // this.context.update(ctx => ({
+                //   ...ctx,
+                //   otp: null
+                // }));
                 this.emailOtp = null;
                 this.phoneOtp = null;
                 this.otpError.set(true);
             }
-            if (this.context().type == 'DATA') {
-            }
         });
     }
     countdownEvent(evt) {
@@ -1966,7 +2089,9 @@ class LoginFormComponent {
         }
     }
     resendOtp() {
+        this.loading.set(true);
         this.userService.resendOtp(this.context()).subscribe(res => {
+            this.loading.set(false);
             if (res.result.status == 'error') {
                 this.context().errorMessage = res.result.errorMessage;
                 this.globalService.onError.emit();
@@ -1981,7 +2106,7 @@ class LoginFormComponent {
     }
     saveUser() {
         this.translationService.validateCountryProvinceCity('login-form');
-        let countryProvinceCity = this.translationService.countryProvinceCityPlaceholder['login-form'];
+        let countryProvinceCity = this.translationService.countryProvinceCityPlaceholder()['login-form'];
         this.showError.set(false);
         if ((this.myForm && !this.myForm.valid) || this.context().user.consents.find(c => c.required && !c.consented) || countryProvinceCity.countryError || countryProvinceCity.provinceError || countryProvinceCity.cityError) {
             this.globalService.onError.emit();
@@ -2030,10 +2155,10 @@ class LoginFormComponent {
         this.cookieService.remove('userAccount');
         this.resetContext();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LoginFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: LoginFormComponent, isStandalone: true, selector: "payvent-login-form", inputs: { context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, allowAccountCreation: { classPropertyName: "allowAccountCreation", publicName: "allowAccountCreation", isSignal: true, isRequired: false, transformFunction: null }, tokenType: { classPropertyName: "tokenType", publicName: "tokenType", isSignal: true, isRequired: false, transformFunction: null }, clientId: { classPropertyName: "clientId", publicName: "clientId", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { context: "contextChange" }, viewQueries: [{ propertyName: "myForm", first: true, predicate: ["myForm"], descendants: true }], ngImport: i0, template: "<div class=\"login-component\">\r\n  @if (accessRefused()) {\r\n  <div class=\"alert alert-danger\">\r\n    <translate name=\"login-form.access-refused\"></translate>\r\n  </div>\r\n  }\r\n\r\n  <form novalidate #myForm=\"ngForm\">\r\n    @if (context().errorMessage) {\r\n    <div class=\"mt-1 text-red-500\">\r\n      <span class=\"material-symbols mr-1\">info</span>\r\n      <translate [name]=\"'login-form.error.' + context().errorMessage\"></translate>\r\n    </div>\r\n    }\r\n\r\n\r\n    @if (context().type == 'EMAIL' && !['otp_sent', 'login_name_changed'].includes(context().status) &&\r\n    context().errorMessage != 'wrong_code' ){\r\n    <div class=\"form-group\">\r\n      <label class=\"primary-50\">\r\n        <translate [name]=\"'login-form.email.' + context().action.toLowerCase()\"></translate>\r\n      </label>\r\n      <input type=\"email\" [(ngModel)]=\"context().loginName\" pInputText email class=\"form-control\" #email=\"ngModel\"\r\n        name=\"email\" required />\r\n      @if(context().action=='LOGIN') {\r\n      <a (click)=\"recover()\">\r\n        <translate name=\"login-form.no-email-access\"></translate>\r\n      </a>\r\n      }\r\n\r\n      @if(!email.valid && showError) {\r\n      <div class=\"text-danger\">\r\n        <i class=\"fa fa-info-circle\"></i>\r\n        <translate name=\"error.login-form.email\"></translate>\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    <p-button color=\"success\" (click)=\"getOtp()\">\r\n      <translate [name]=\"'login-form.submit-email.' + context().action.toLowerCase()\"></translate>\r\n    </p-button>\r\n    }\r\n\r\n\r\n    @if (context().status == 'otp_sent' || context().errorMessage == 'wrong_code') {\r\n    <div class=\"position:relative\">\r\n      @if (loading()) {\r\n      <div class=\"loader-container\">\r\n        <div class=\"loader\"></div>\r\n      </div>\r\n      }\r\n      <div class=\"form-group\">\r\n        <translate name=\"login-form.enter_otp_code\" [replacements]=\"[context().loginNameMasked]\"></translate>\r\n      </div>\r\n      <div class=\"form-group\">\r\n        <p-inputotp [disabled]=\"loading()\" [(ngModel)]=\"context().otp\" [length]=\"6\" [autofocus]=\"true\"\r\n          (onChange)=\"verifyOtp($event)\" name=\"inputOtp\"></p-inputotp>\r\n      </div>\r\n      @if(!showResend()) {\r\n      <translate name=\"login-form.resend-code.in-sec\"></translate>\r\n      <!-- <countdown #cd [config]=\"countdownConfig\" (event)=\"countdownEvent($event)\">$!s!</countdown> sec -->\r\n      }\r\n\r\n      @if(showResend()) {\r\n      <p-button color=\"info\" class=\"btn-block\" (click)=\"resendOtp()\">\r\n        <translate name=\"login-form.resend-otp\"></translate>\r\n      </p-button>\r\n      }\r\n    </div>\r\n\r\n    }\r\n\r\n\r\n    @if (context().type == 'PHONE' && !['otp_sent', 'login_name_changed'].includes(context().status) &&\r\n    context().errorMessage != 'wrong_code') {\r\n    <div class=\"form-group\">\r\n      <label class=\"login-label\">\r\n        <translate [name]=\"'login-form.phone.' + context().action.toLowerCase()\"></translate>\r\n      </label>\r\n      <payvent-international-phone [(phoneNumber)]=\"context().loginName\" name=\"phone\"\r\n        ngDefaultControl></payvent-international-phone>\r\n\r\n      @if (showError()) {\r\n      <div class=\"text-danger\">\r\n        <i class=\"fa fa-info-circle\"></i>\r\n        <translate name=\"error.login-form.phone\"></translate>\r\n      </div>\r\n      }\r\n\r\n      @if (context().status=='duplicate_phone') {\r\n      <div class=\"text-danger\">\r\n        <i class=\"fa fa-info-circle\"></i>\r\n        <translate name=\"error.login-form.duplicate_phone\"></translate>\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"form-group\">\r\n      <button loading-button color=\"success\" class=\"btn-block\" (click)=\"getOtp()\">\r\n        <translate [name]=\"'login-form.submit-phone.' + context().action.toLowerCase()\"></translate>\r\n      </button>\r\n    </div>\r\n    }\r\n\r\n    @if (context().type=='DATA') {\r\n    <div class=\"form-group\">\r\n      <div class=\"text-center form-group\">\r\n        <label class=\"login-label\">\r\n          <translate name=\"login-form.profile-data.login\"></translate>\r\n        </label>\r\n      </div>\r\n\r\n      <div class=\"form-group\">\r\n        <label>\r\n          <translate name=\"login-form.email\"></translate>\r\n        </label>\r\n        <input type=\"email\" [(ngModel)]=\"context().user.email\" class=\"form-control\" #email=\"ngModel\" name=\"email\"\r\n          disabled />\r\n      </div>\r\n      <div class=\"form-group name-group\">\r\n        <div class=\"first\">\r\n          <label>\r\n            <translate name=\"login-form.firstName\"></translate>\r\n          </label>\r\n          <input type=\"text\" [(ngModel)]=\"context().user.firstName\" class=\"form-control\" #firstName=\"ngModel\"\r\n            name=\"firstName\" required />\r\n          <div *ngIf=\"!firstName.valid && showError\" class=\"text-danger\">\r\n            <i class=\"fa fa-info-circle\"></i>\r\n            <translate name=\"error.login-form.firstName\"></translate>\r\n          </div>\r\n        </div>\r\n        <div class=\"second\">\r\n          <label>\r\n            <translate name=\"login-form.lastName\"></translate>\r\n          </label>\r\n          <input type=\"text\" [(ngModel)]=\"context().user.lastName\" class=\"form-control\" #lastName=\"ngModel\"\r\n            name=\"lastName\" required />\r\n          <div *ngIf=\"!lastName.valid && showError\" class=\"text-danger\">\r\n            <i class=\"fa fa-info-circle\"></i>\r\n            <translate name=\"error.login-form.lastName\"></translate>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"form-group\">\r\n        <label>\r\n          <translate name=\"login-form.phone\"></translate>\r\n        </label>\r\n        <input type=\"phone\" [(ngModel)]=\"context().user.phoneNumber\" class=\"form-control\" #phone=\"ngModel\" name=\"phone\"\r\n          disabled />\r\n      </div>\r\n\r\n\r\n      <div class=\"form-group\">\r\n        <label>\r\n          <translate name=\"login-form.country\"></translate>\r\n        </label>\r\n        <payvent-country-province-city mode=\"country\" correlation=\"login-form\"></payvent-country-province-city>\r\n        @if(translationService.countryProvinceCityPlaceholder['login-form']().countryError) {\r\n        <div class=\"text-danger\">\r\n          <i class=\"fa fa-info-circle\"></i>\r\n          <translate name=\"error.login-form.country\"></translate>\r\n        </div>\r\n        }\r\n      </div>\r\n      <div class=\"form-group\">\r\n        <label>\r\n          <translate name=\"login-form.province\"></translate>\r\n        </label>\r\n        <payvent-country-province-city mode=\"province\" correlation=\"login-form\"></payvent-country-province-city>\r\n\r\n        @if(translationService.countryProvinceCityPlaceholder['login-form']().provinceError) {\r\n        <div class=\"text-danger\">\r\n          <i class=\"fa fa-info-circle\"></i>\r\n          <translate name=\"error.login-form.province\"></translate>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"form-group\">\r\n        <label>\r\n          <translate name=\"login-form.city\"></translate>\r\n        </label>\r\n        <payvent-country-province-city mode=\"city\" correlation=\"login-form\"></payvent-country-province-city>\r\n        @if(translationService.countryProvinceCityPlaceholder['login-form']().cityError) {\r\n        <div class=\"text-danger\">\r\n          <i class=\"fa fa-info-circle\"></i>\r\n          <translate name=\"error.login-form.city\"></translate>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      @for(item of context().user.consents; track item.id) {\r\n      <div class=\"form-group\">\r\n        <icheck [name]=\"item.name\" [(ngModel)]=\"item.consented\">\r\n          <translate name=\"login-form.consent\"></translate>&nbsp;<a (click)=\"openConsent($event, item)\">\r\n            <translate [name]=\"'consent.' + item.name\"></translate>\r\n          </a>\r\n        </icheck>\r\n        <div *ngIf=\"!item.consented && item.required && showError\" class=\"text-danger\">\r\n          <i class=\"fa fa-info-circle\"></i>\r\n          <translate [name]=\"'consentError.' + item.name\"></translate>\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n  </form>\r\n\r\n\r\n  <div class=\"form-group\">\r\n    @if (context().type == 'DATA') {\r\n    <button loading-button color=\"success\" class=\"btn-block\" (click)=\"saveUser()\">\r\n      <translate name=\"login-form.save-changes\"></translate>\r\n    </button>\r\n    }\r\n  </div>\r\n\r\n  @if (context().status && context().status != 'client_not_found' && context().status != 'login_name_changed' &&\r\n  context().status != 'otp_verified' && !loading()) {\r\n  <div class=\"form-group\">\r\n    <p-button (click)=\"resetContext()\">\r\n      <translate name=\"login-form.back\"></translate>\r\n    </p-button>\r\n  </div>\r\n  }\r\n\r\n  @if(context().action=='VERIFYRECOVER' && context().type=='TOKEN') {\r\n  <translate name=\"login-form.recover_success\"></translate>\r\n  }\r\n\r\n  @if(context().action=='CHANGELOGINNAME' && context().status=='login_name_changed') {\r\n  <translate [name]=\"'login-form.login_name_changed.' + context().type.toLowerCase()\"></translate>\r\n  }\r\n\r\n</div>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loader-container{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff4d;display:flex;align-items:center;justify-content:center}.loader{content:\"\";box-sizing:border-box;display:inline-block;width:32px;height:32px;position:absolute;border-radius:50%;border:4px solid rgba(237,156,40,.3);border-top-color:#ed9c28;animation:spinner .8s cubic-bezier(.58,.33,.52,.75) infinite;z-index:10000000001}\n"], dependencies: [{ kind: "component", type: TranslationComponent, selector: "translate", inputs: ["name", "replacements"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: InternationalPhoneComponent, selector: "payvent-international-phone", inputs: ["phoneNumber"], outputs: ["phoneNumberChange"] }, { kind: "component", type: CountryProvinceCityComponent, selector: "payvent-country-province-city", inputs: ["correlation", "mode"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: InputOtp, selector: "p-inputOtp, p-inputotp, p-input-otp", inputs: ["readonly", "tabindex", "length", "styleClass", "mask", "integerOnly", "autofocus", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LoginFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: LoginFormComponent, isStandalone: true, selector: "payvent-login-form", inputs: { tokenType: { classPropertyName: "tokenType", publicName: "tokenType", isSignal: true, isRequired: false, transformFunction: null }, clientId: { classPropertyName: "clientId", publicName: "clientId", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "myForm", first: true, predicate: ["myForm"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"login-component\">\r\n  @if (accessRefused()) {\r\n  <div class=\"alert alert-danger\">\r\n    <translate name=\"login-form.access-refused\"></translate>\r\n  </div>\r\n  }\r\n\r\n  <form novalidate #myForm=\"ngForm\">\r\n\r\n    @if (context().type == 'EMAIL' && !['otp_sent', 'login_name_changed'].includes(context().status) &&\r\n    context().errorMessage != 'wrong_code' ){\r\n    <div class=\"mb-3\">\r\n      <div class=\"mb-1\">\r\n        <translate [name]=\"'login-form.email.' + context().action.toLowerCase()\"></translate>\r\n      </div>\r\n      <input type=\"email\" [(ngModel)]=\"context().loginName\" pInputText email class=\"form-control\" #email=\"ngModel\"\r\n        name=\"email\" required fluid=\"true\" />\r\n      @if(context().action=='LOGIN') {\r\n      <a (click)=\"recover()\">\r\n        <translate name=\"login-form.no-email-access\"></translate>\r\n      </a>\r\n      }\r\n\r\n      @if(!email.valid && showError()) {\r\n      <div class=\"text-danger\">\r\n        <span class=\"material-symbols mr-1\">info</span>\r\n        <translate name=\"error.login-form.email\"></translate>\r\n      </div>\r\n      }\r\n      @if (context().errorMessage) {\r\n      <div class=\"mb-2 text-danger\">\r\n        <span class=\"material-symbols mr-1\">info</span>\r\n        <translate [name]=\"'login-form.error.' + context().errorMessage\"></translate>\r\n      </div>\r\n      }\r\n    </div>\r\n    <button pButton fluid=\"true\" [loading]=\"loading()\" (click)=\"getOtp()\">\r\n      <translate [name]=\"'login-form.submit-email.' + context().action.toLowerCase()\"></translate>\r\n    </button>\r\n    }\r\n\r\n\r\n    @if (context().status == 'otp_sent' || context().errorMessage == 'wrong_code') {\r\n    <div style=\"position:relative\">\r\n      @if (otpLoading()) {\r\n      <div class=\"loader-container\">\r\n        <div class=\"loader\"></div>\r\n      </div>\r\n      }\r\n      <div class=\"mb-2\">\r\n        <translate name=\"login-form.enter_otp_code\" [replacements]=\"[context().loginNameMasked]\"></translate>\r\n      </div>\r\n      <div class=\"mb-2\">\r\n        <p-inputotp [disabled]=\"loading()\" [(ngModel)]=\"context().otp\" size=\"large\" [length]=\"6\" [autofocus]=\"true\"\r\n          (onChange)=\"verifyOtp($event)\" name=\"inputOtp\" class=\"justify-center my-4\"></p-inputotp>\r\n      </div>\r\n      @if (context().errorMessage) {\r\n      <div class=\"mb-2 text-danger\">\r\n        <span class=\"material-symbols mr-1\">info</span>\r\n        <translate [name]=\"'login-form.error.' + context().errorMessage\"></translate>\r\n      </div>\r\n      }\r\n      @if(!showResend()) {\r\n      <translate name=\"login-form.resend-code.in-sec\"></translate>\r\n      <!-- <countdown #cd [config]=\"countdownConfig\" (event)=\"countdownEvent($event)\">$!s!</countdown> sec -->\r\n      }\r\n\r\n      @if(showResend()) {\r\n      <button pButton [loading]=\"loading()\" fluid=\"true\" class=\"mb-1\" (click)=\"resendOtp()\">\r\n        <translate name=\"login-form.resend-otp\"></translate>\r\n      </button>\r\n      }\r\n    </div>\r\n\r\n    }\r\n\r\n\r\n    @if (context().type == 'PHONE' && !['otp_sent', 'login_name_changed'].includes(context().status) &&\r\n    context().errorMessage != 'wrong_code') {\r\n    <div class=\"mb-2\">\r\n      <div class=\"mb-2\">\r\n        <label class=\"login-label\">\r\n          <translate [name]=\"'login-form.phone.' + context().action.toLowerCase()\"></translate>\r\n        </label>\r\n      </div>\r\n      <payvent-international-phone [(phoneNumber)]=\"context().loginName\" name=\"phone\"\r\n        ngDefaultControl></payvent-international-phone>\r\n\r\n      @if (showError()) {\r\n      <div class=\"text-danger\">\r\n        <span class=\"material-symbols mr-1\">info</span>\r\n        <translate name=\"error.login-form.phone\"></translate>\r\n      </div>\r\n      }\r\n\r\n      @if (context().status=='duplicate_phone') {\r\n      <div class=\"text-danger\">\r\n        <span class=\"material-symbols mr-1\">info</span>\r\n        <translate name=\"error.login-form.duplicate_phone\"></translate>\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"mr-2\">\r\n      <button pButton fluid=\"true\" [loading]=\"loading()\" (click)=\"getOtp()\">\r\n        <translate [name]=\"'login-form.submit-phone.' + context().action.toLowerCase()\"></translate>\r\n      </button>\r\n    </div>\r\n    }\r\n\r\n    @if (context().type=='DATA') {\r\n    <div class=\"mb-2\">\r\n      <div class=\"text-center mb-2\">\r\n        <label class=\"login-label\">\r\n          <translate name=\"login-form.profile-data.login\"></translate>\r\n        </label>\r\n      </div>\r\n\r\n      <div class=\"mb-2\">\r\n        <div class=\"mb-1\">\r\n          <translate name=\"login-form.email\"></translate>\r\n        </div>\r\n        <input type=\"email\" pInputText [(ngModel)]=\"context().user.email\" fluid #email=\"ngModel\" name=\"email\"\r\n          disabled />\r\n      </div>\r\n      <div class=\"mb-2 name-group\">\r\n        <div class=\"first\">\r\n          <div class=\"mb-1\">\r\n            <translate name=\"login-form.firstName\"></translate>\r\n          </div>\r\n          <input type=\"text\" pInputText [(ngModel)]=\"context().user.firstName\" fluid #firstName=\"ngModel\"\r\n            name=\"firstName\" required />\r\n          @if (!firstName.valid && showError()){\r\n          <div class=\"text-danger\">\r\n            <span class=\"material-symbols mr-1\">info</span>\r\n            <translate name=\"error.login-form.firstName\"></translate>\r\n          </div>\r\n          }\r\n        </div>\r\n        <div class=\"second\">\r\n          <div class=\"mb-1\">\r\n            <translate name=\"login-form.lastName\"></translate>\r\n          </div>\r\n          <input type=\"text\" [(ngModel)]=\"context().user.lastName\" fluid pInputText #lastName=\"ngModel\" name=\"lastName\"\r\n            required />\r\n          @if (!lastName.valid && showError()){\r\n          <div class=\"text-danger\">\r\n            <span class=\"material-symbols mr-1\">info</span>\r\n            <translate name=\"error.login-form.lastName\"></translate>\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"mb-2\">\r\n        <div class=\"mb-1\">\r\n          <translate name=\"login-form.phone\"></translate>\r\n        </div>\r\n        <input type=\"phone\" [(ngModel)]=\"context().user.phoneNumber\" fluid pInputText #phone=\"ngModel\" name=\"phone\"\r\n          disabled />\r\n      </div>\r\n\r\n\r\n      <div class=\"mb-2\">\r\n        <div class=\"mb-1\">\r\n          <translate name=\"login-form.country\"></translate>\r\n        </div>\r\n        <payvent-country-province-city mode=\"country\" correlation=\"login-form\"></payvent-country-province-city>\r\n        @if(translationService.countryProvinceCityPlaceholder()['login-form'].countryError) {\r\n        <div class=\"text-danger\">\r\n          <span class=\"material-symbols mr-1\">info</span>\r\n          <translate name=\"error.login-form.country\"></translate>\r\n        </div>\r\n        }\r\n      </div>\r\n      <div class=\"mb-2\">\r\n        <div class=\"mb-1\">\r\n          <translate name=\"login-form.province\"></translate>\r\n        </div>\r\n        <payvent-country-province-city mode=\"province\" correlation=\"login-form\"></payvent-country-province-city>\r\n\r\n        @if(translationService.countryProvinceCityPlaceholder()['login-form'].provinceError) {\r\n        <div class=\"text-danger\">\r\n          <span class=\"material-symbols mr-1\">info</span>\r\n          <translate name=\"error.login-form.province\"></translate>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"mb-2\">\r\n        <div class=\"mb-1\">\r\n          <translate name=\"login-form.city\"></translate>\r\n        </div>\r\n        <payvent-country-province-city mode=\"city\" correlation=\"login-form\"></payvent-country-province-city>\r\n        @if(translationService.countryProvinceCityPlaceholder()['login-form'].cityError) {\r\n        <div class=\"text-danger\">\r\n          <span class=\"material-symbols mr-1\">info</span>\r\n          <translate name=\"error.login-form.city\"></translate>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      @if (context().user.consents.length > 0) {\r\n      <div class=\"my-4\">\r\n        @for(item of context().user.consents; track item.id) {\r\n        <div class=\"mb-2 flex items-center gap-2\">\r\n          <p-checkbox [inputId]=\"item.name\" [name]=\"item.name\" [binary]=\"true\" [(ngModel)]=\"item.consented\" />\r\n          <label [for]=\"item.name\">\r\n            <translate name=\"login-form.consent\"></translate>\r\n          </label>\r\n          <a (click)=\"openConsent($event, item)\">\r\n            <translate [name]=\"'consent.' + item.name\"></translate>\r\n          </a>\r\n        </div>\r\n        @if(!item.consented && item.required && showError()) {\r\n        <div class=\"text-danger mb-2\">\r\n          <span class=\"material-symbols mr-1\">info</span>\r\n          <translate [name]=\"'consentError.' + item.name\"></translate>\r\n        </div>\r\n        }\r\n\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n  </form>\r\n\r\n\r\n  <div class=\"my-2\">\r\n    @if (context().type == 'DATA') {\r\n    <button pButton fluid (click)=\"saveUser()\">\r\n      <translate name=\"login-form.save-changes\"></translate>\r\n    </button>\r\n    }\r\n  </div>\r\n\r\n  @if (context().status && context().status != 'client_not_found' && context().status != 'login_name_changed' &&\r\n  context().status != 'otp_verified' && !loading()) {\r\n  <div class=\"mb-2\">\r\n    <button pButton severity=\"secondary\" outlined=\"true\" fluid=\"true\" (click)=\"resetContext()\">\r\n      <translate name=\"login-form.back\"></translate>\r\n    </button>\r\n  </div>\r\n  }\r\n\r\n  @if(context().action=='VERIFYRECOVER' && context().type=='TOKEN') {\r\n  <translate name=\"login-form.recover_success\"></translate>\r\n  }\r\n\r\n  @if(context().action=='CHANGELOGINNAME' && context().status=='login_name_changed') {\r\n  <translate [name]=\"'login-form.login_name_changed.' + context().type.toLowerCase()\"></translate>\r\n  }\r\n\r\n</div>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loader-container{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff4d;display:flex;align-items:center;justify-content:center;z-index:10000000000}.loader{content:\"\";box-sizing:border-box;display:inline-block;width:32px;height:32px;position:absolute;border-radius:50%;border:4px solid rgba(237,156,40,.3);border-top-color:#ed9c28;animation:spinner .8s cubic-bezier(.58,.33,.52,.75) infinite;z-index:10000000001}\n"], dependencies: [{ kind: "component", type: TranslationComponent, selector: "translate", inputs: ["name", "replacements"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: InternationalPhoneComponent, selector: "payvent-international-phone", inputs: ["phoneNumber"], outputs: ["phoneNumberChange"] }, { kind: "component", type: CountryProvinceCityComponent, selector: "payvent-country-province-city", inputs: ["correlation", "mode"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: InputOtp, selector: "p-inputOtp, p-inputotp, p-input-otp", inputs: ["readonly", "tabindex", "length", "styleClass", "mask", "integerOnly", "autofocus", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i3$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LoginFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LoginFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'payvent-login-form', standalone: true, imports: [
                         TranslationComponent,
@@ -2043,8 +2168,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         CountryProvinceCityComponent,
                         InputText,
                         InputOtp,
-                        ButtonModule
-                    ], template: "<div class=\"login-component\">\r\n  @if (accessRefused()) {\r\n  <div class=\"alert alert-danger\">\r\n    <translate name=\"login-form.access-refused\"></translate>\r\n  </div>\r\n  }\r\n\r\n  <form novalidate #myForm=\"ngForm\">\r\n    @if (context().errorMessage) {\r\n    <div class=\"mt-1 text-red-500\">\r\n      <span class=\"material-symbols mr-1\">info</span>\r\n      <translate [name]=\"'login-form.error.' + context().errorMessage\"></translate>\r\n    </div>\r\n    }\r\n\r\n\r\n    @if (context().type == 'EMAIL' && !['otp_sent', 'login_name_changed'].includes(context().status) &&\r\n    context().errorMessage != 'wrong_code' ){\r\n    <div class=\"form-group\">\r\n      <label class=\"primary-50\">\r\n        <translate [name]=\"'login-form.email.' + context().action.toLowerCase()\"></translate>\r\n      </label>\r\n      <input type=\"email\" [(ngModel)]=\"context().loginName\" pInputText email class=\"form-control\" #email=\"ngModel\"\r\n        name=\"email\" required />\r\n      @if(context().action=='LOGIN') {\r\n      <a (click)=\"recover()\">\r\n        <translate name=\"login-form.no-email-access\"></translate>\r\n      </a>\r\n      }\r\n\r\n      @if(!email.valid && showError) {\r\n      <div class=\"text-danger\">\r\n        <i class=\"fa fa-info-circle\"></i>\r\n        <translate name=\"error.login-form.email\"></translate>\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    <p-button color=\"success\" (click)=\"getOtp()\">\r\n      <translate [name]=\"'login-form.submit-email.' + context().action.toLowerCase()\"></translate>\r\n    </p-button>\r\n    }\r\n\r\n\r\n    @if (context().status == 'otp_sent' || context().errorMessage == 'wrong_code') {\r\n    <div class=\"position:relative\">\r\n      @if (loading()) {\r\n      <div class=\"loader-container\">\r\n        <div class=\"loader\"></div>\r\n      </div>\r\n      }\r\n      <div class=\"form-group\">\r\n        <translate name=\"login-form.enter_otp_code\" [replacements]=\"[context().loginNameMasked]\"></translate>\r\n      </div>\r\n      <div class=\"form-group\">\r\n        <p-inputotp [disabled]=\"loading()\" [(ngModel)]=\"context().otp\" [length]=\"6\" [autofocus]=\"true\"\r\n          (onChange)=\"verifyOtp($event)\" name=\"inputOtp\"></p-inputotp>\r\n      </div>\r\n      @if(!showResend()) {\r\n      <translate name=\"login-form.resend-code.in-sec\"></translate>\r\n      <!-- <countdown #cd [config]=\"countdownConfig\" (event)=\"countdownEvent($event)\">$!s!</countdown> sec -->\r\n      }\r\n\r\n      @if(showResend()) {\r\n      <p-button color=\"info\" class=\"btn-block\" (click)=\"resendOtp()\">\r\n        <translate name=\"login-form.resend-otp\"></translate>\r\n      </p-button>\r\n      }\r\n    </div>\r\n\r\n    }\r\n\r\n\r\n    @if (context().type == 'PHONE' && !['otp_sent', 'login_name_changed'].includes(context().status) &&\r\n    context().errorMessage != 'wrong_code') {\r\n    <div class=\"form-group\">\r\n      <label class=\"login-label\">\r\n        <translate [name]=\"'login-form.phone.' + context().action.toLowerCase()\"></translate>\r\n      </label>\r\n      <payvent-international-phone [(phoneNumber)]=\"context().loginName\" name=\"phone\"\r\n        ngDefaultControl></payvent-international-phone>\r\n\r\n      @if (showError()) {\r\n      <div class=\"text-danger\">\r\n        <i class=\"fa fa-info-circle\"></i>\r\n        <translate name=\"error.login-form.phone\"></translate>\r\n      </div>\r\n      }\r\n\r\n      @if (context().status=='duplicate_phone') {\r\n      <div class=\"text-danger\">\r\n        <i class=\"fa fa-info-circle\"></i>\r\n        <translate name=\"error.login-form.duplicate_phone\"></translate>\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"form-group\">\r\n      <button loading-button color=\"success\" class=\"btn-block\" (click)=\"getOtp()\">\r\n        <translate [name]=\"'login-form.submit-phone.' + context().action.toLowerCase()\"></translate>\r\n      </button>\r\n    </div>\r\n    }\r\n\r\n    @if (context().type=='DATA') {\r\n    <div class=\"form-group\">\r\n      <div class=\"text-center form-group\">\r\n        <label class=\"login-label\">\r\n          <translate name=\"login-form.profile-data.login\"></translate>\r\n        </label>\r\n      </div>\r\n\r\n      <div class=\"form-group\">\r\n        <label>\r\n          <translate name=\"login-form.email\"></translate>\r\n        </label>\r\n        <input type=\"email\" [(ngModel)]=\"context().user.email\" class=\"form-control\" #email=\"ngModel\" name=\"email\"\r\n          disabled />\r\n      </div>\r\n      <div class=\"form-group name-group\">\r\n        <div class=\"first\">\r\n          <label>\r\n            <translate name=\"login-form.firstName\"></translate>\r\n          </label>\r\n          <input type=\"text\" [(ngModel)]=\"context().user.firstName\" class=\"form-control\" #firstName=\"ngModel\"\r\n            name=\"firstName\" required />\r\n          <div *ngIf=\"!firstName.valid && showError\" class=\"text-danger\">\r\n            <i class=\"fa fa-info-circle\"></i>\r\n            <translate name=\"error.login-form.firstName\"></translate>\r\n          </div>\r\n        </div>\r\n        <div class=\"second\">\r\n          <label>\r\n            <translate name=\"login-form.lastName\"></translate>\r\n          </label>\r\n          <input type=\"text\" [(ngModel)]=\"context().user.lastName\" class=\"form-control\" #lastName=\"ngModel\"\r\n            name=\"lastName\" required />\r\n          <div *ngIf=\"!lastName.valid && showError\" class=\"text-danger\">\r\n            <i class=\"fa fa-info-circle\"></i>\r\n            <translate name=\"error.login-form.lastName\"></translate>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"form-group\">\r\n        <label>\r\n          <translate name=\"login-form.phone\"></translate>\r\n        </label>\r\n        <input type=\"phone\" [(ngModel)]=\"context().user.phoneNumber\" class=\"form-control\" #phone=\"ngModel\" name=\"phone\"\r\n          disabled />\r\n      </div>\r\n\r\n\r\n      <div class=\"form-group\">\r\n        <label>\r\n          <translate name=\"login-form.country\"></translate>\r\n        </label>\r\n        <payvent-country-province-city mode=\"country\" correlation=\"login-form\"></payvent-country-province-city>\r\n        @if(translationService.countryProvinceCityPlaceholder['login-form']().countryError) {\r\n        <div class=\"text-danger\">\r\n          <i class=\"fa fa-info-circle\"></i>\r\n          <translate name=\"error.login-form.country\"></translate>\r\n        </div>\r\n        }\r\n      </div>\r\n      <div class=\"form-group\">\r\n        <label>\r\n          <translate name=\"login-form.province\"></translate>\r\n        </label>\r\n        <payvent-country-province-city mode=\"province\" correlation=\"login-form\"></payvent-country-province-city>\r\n\r\n        @if(translationService.countryProvinceCityPlaceholder['login-form']().provinceError) {\r\n        <div class=\"text-danger\">\r\n          <i class=\"fa fa-info-circle\"></i>\r\n          <translate name=\"error.login-form.province\"></translate>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"form-group\">\r\n        <label>\r\n          <translate name=\"login-form.city\"></translate>\r\n        </label>\r\n        <payvent-country-province-city mode=\"city\" correlation=\"login-form\"></payvent-country-province-city>\r\n        @if(translationService.countryProvinceCityPlaceholder['login-form']().cityError) {\r\n        <div class=\"text-danger\">\r\n          <i class=\"fa fa-info-circle\"></i>\r\n          <translate name=\"error.login-form.city\"></translate>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      @for(item of context().user.consents; track item.id) {\r\n      <div class=\"form-group\">\r\n        <icheck [name]=\"item.name\" [(ngModel)]=\"item.consented\">\r\n          <translate name=\"login-form.consent\"></translate>&nbsp;<a (click)=\"openConsent($event, item)\">\r\n            <translate [name]=\"'consent.' + item.name\"></translate>\r\n          </a>\r\n        </icheck>\r\n        <div *ngIf=\"!item.consented && item.required && showError\" class=\"text-danger\">\r\n          <i class=\"fa fa-info-circle\"></i>\r\n          <translate [name]=\"'consentError.' + item.name\"></translate>\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n  </form>\r\n\r\n\r\n  <div class=\"form-group\">\r\n    @if (context().type == 'DATA') {\r\n    <button loading-button color=\"success\" class=\"btn-block\" (click)=\"saveUser()\">\r\n      <translate name=\"login-form.save-changes\"></translate>\r\n    </button>\r\n    }\r\n  </div>\r\n\r\n  @if (context().status && context().status != 'client_not_found' && context().status != 'login_name_changed' &&\r\n  context().status != 'otp_verified' && !loading()) {\r\n  <div class=\"form-group\">\r\n    <p-button (click)=\"resetContext()\">\r\n      <translate name=\"login-form.back\"></translate>\r\n    </p-button>\r\n  </div>\r\n  }\r\n\r\n  @if(context().action=='VERIFYRECOVER' && context().type=='TOKEN') {\r\n  <translate name=\"login-form.recover_success\"></translate>\r\n  }\r\n\r\n  @if(context().action=='CHANGELOGINNAME' && context().status=='login_name_changed') {\r\n  <translate [name]=\"'login-form.login_name_changed.' + context().type.toLowerCase()\"></translate>\r\n  }\r\n\r\n</div>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loader-container{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff4d;display:flex;align-items:center;justify-content:center}.loader{content:\"\";box-sizing:border-box;display:inline-block;width:32px;height:32px;position:absolute;border-radius:50%;border:4px solid rgba(237,156,40,.3);border-top-color:#ed9c28;animation:spinner .8s cubic-bezier(.58,.33,.52,.75) infinite;z-index:10000000001}\n"] }]
+                        ButtonModule,
+                        CheckboxModule
+                    ], template: "<div class=\"login-component\">\r\n  @if (accessRefused()) {\r\n  <div class=\"alert alert-danger\">\r\n    <translate name=\"login-form.access-refused\"></translate>\r\n  </div>\r\n  }\r\n\r\n  <form novalidate #myForm=\"ngForm\">\r\n\r\n    @if (context().type == 'EMAIL' && !['otp_sent', 'login_name_changed'].includes(context().status) &&\r\n    context().errorMessage != 'wrong_code' ){\r\n    <div class=\"mb-3\">\r\n      <div class=\"mb-1\">\r\n        <translate [name]=\"'login-form.email.' + context().action.toLowerCase()\"></translate>\r\n      </div>\r\n      <input type=\"email\" [(ngModel)]=\"context().loginName\" pInputText email class=\"form-control\" #email=\"ngModel\"\r\n        name=\"email\" required fluid=\"true\" />\r\n      @if(context().action=='LOGIN') {\r\n      <a (click)=\"recover()\">\r\n        <translate name=\"login-form.no-email-access\"></translate>\r\n      </a>\r\n      }\r\n\r\n      @if(!email.valid && showError()) {\r\n      <div class=\"text-danger\">\r\n        <span class=\"material-symbols mr-1\">info</span>\r\n        <translate name=\"error.login-form.email\"></translate>\r\n      </div>\r\n      }\r\n      @if (context().errorMessage) {\r\n      <div class=\"mb-2 text-danger\">\r\n        <span class=\"material-symbols mr-1\">info</span>\r\n        <translate [name]=\"'login-form.error.' + context().errorMessage\"></translate>\r\n      </div>\r\n      }\r\n    </div>\r\n    <button pButton fluid=\"true\" [loading]=\"loading()\" (click)=\"getOtp()\">\r\n      <translate [name]=\"'login-form.submit-email.' + context().action.toLowerCase()\"></translate>\r\n    </button>\r\n    }\r\n\r\n\r\n    @if (context().status == 'otp_sent' || context().errorMessage == 'wrong_code') {\r\n    <div style=\"position:relative\">\r\n      @if (otpLoading()) {\r\n      <div class=\"loader-container\">\r\n        <div class=\"loader\"></div>\r\n      </div>\r\n      }\r\n      <div class=\"mb-2\">\r\n        <translate name=\"login-form.enter_otp_code\" [replacements]=\"[context().loginNameMasked]\"></translate>\r\n      </div>\r\n      <div class=\"mb-2\">\r\n        <p-inputotp [disabled]=\"loading()\" [(ngModel)]=\"context().otp\" size=\"large\" [length]=\"6\" [autofocus]=\"true\"\r\n          (onChange)=\"verifyOtp($event)\" name=\"inputOtp\" class=\"justify-center my-4\"></p-inputotp>\r\n      </div>\r\n      @if (context().errorMessage) {\r\n      <div class=\"mb-2 text-danger\">\r\n        <span class=\"material-symbols mr-1\">info</span>\r\n        <translate [name]=\"'login-form.error.' + context().errorMessage\"></translate>\r\n      </div>\r\n      }\r\n      @if(!showResend()) {\r\n      <translate name=\"login-form.resend-code.in-sec\"></translate>\r\n      <!-- <countdown #cd [config]=\"countdownConfig\" (event)=\"countdownEvent($event)\">$!s!</countdown> sec -->\r\n      }\r\n\r\n      @if(showResend()) {\r\n      <button pButton [loading]=\"loading()\" fluid=\"true\" class=\"mb-1\" (click)=\"resendOtp()\">\r\n        <translate name=\"login-form.resend-otp\"></translate>\r\n      </button>\r\n      }\r\n    </div>\r\n\r\n    }\r\n\r\n\r\n    @if (context().type == 'PHONE' && !['otp_sent', 'login_name_changed'].includes(context().status) &&\r\n    context().errorMessage != 'wrong_code') {\r\n    <div class=\"mb-2\">\r\n      <div class=\"mb-2\">\r\n        <label class=\"login-label\">\r\n          <translate [name]=\"'login-form.phone.' + context().action.toLowerCase()\"></translate>\r\n        </label>\r\n      </div>\r\n      <payvent-international-phone [(phoneNumber)]=\"context().loginName\" name=\"phone\"\r\n        ngDefaultControl></payvent-international-phone>\r\n\r\n      @if (showError()) {\r\n      <div class=\"text-danger\">\r\n        <span class=\"material-symbols mr-1\">info</span>\r\n        <translate name=\"error.login-form.phone\"></translate>\r\n      </div>\r\n      }\r\n\r\n      @if (context().status=='duplicate_phone') {\r\n      <div class=\"text-danger\">\r\n        <span class=\"material-symbols mr-1\">info</span>\r\n        <translate name=\"error.login-form.duplicate_phone\"></translate>\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"mr-2\">\r\n      <button pButton fluid=\"true\" [loading]=\"loading()\" (click)=\"getOtp()\">\r\n        <translate [name]=\"'login-form.submit-phone.' + context().action.toLowerCase()\"></translate>\r\n      </button>\r\n    </div>\r\n    }\r\n\r\n    @if (context().type=='DATA') {\r\n    <div class=\"mb-2\">\r\n      <div class=\"text-center mb-2\">\r\n        <label class=\"login-label\">\r\n          <translate name=\"login-form.profile-data.login\"></translate>\r\n        </label>\r\n      </div>\r\n\r\n      <div class=\"mb-2\">\r\n        <div class=\"mb-1\">\r\n          <translate name=\"login-form.email\"></translate>\r\n        </div>\r\n        <input type=\"email\" pInputText [(ngModel)]=\"context().user.email\" fluid #email=\"ngModel\" name=\"email\"\r\n          disabled />\r\n      </div>\r\n      <div class=\"mb-2 name-group\">\r\n        <div class=\"first\">\r\n          <div class=\"mb-1\">\r\n            <translate name=\"login-form.firstName\"></translate>\r\n          </div>\r\n          <input type=\"text\" pInputText [(ngModel)]=\"context().user.firstName\" fluid #firstName=\"ngModel\"\r\n            name=\"firstName\" required />\r\n          @if (!firstName.valid && showError()){\r\n          <div class=\"text-danger\">\r\n            <span class=\"material-symbols mr-1\">info</span>\r\n            <translate name=\"error.login-form.firstName\"></translate>\r\n          </div>\r\n          }\r\n        </div>\r\n        <div class=\"second\">\r\n          <div class=\"mb-1\">\r\n            <translate name=\"login-form.lastName\"></translate>\r\n          </div>\r\n          <input type=\"text\" [(ngModel)]=\"context().user.lastName\" fluid pInputText #lastName=\"ngModel\" name=\"lastName\"\r\n            required />\r\n          @if (!lastName.valid && showError()){\r\n          <div class=\"text-danger\">\r\n            <span class=\"material-symbols mr-1\">info</span>\r\n            <translate name=\"error.login-form.lastName\"></translate>\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"mb-2\">\r\n        <div class=\"mb-1\">\r\n          <translate name=\"login-form.phone\"></translate>\r\n        </div>\r\n        <input type=\"phone\" [(ngModel)]=\"context().user.phoneNumber\" fluid pInputText #phone=\"ngModel\" name=\"phone\"\r\n          disabled />\r\n      </div>\r\n\r\n\r\n      <div class=\"mb-2\">\r\n        <div class=\"mb-1\">\r\n          <translate name=\"login-form.country\"></translate>\r\n        </div>\r\n        <payvent-country-province-city mode=\"country\" correlation=\"login-form\"></payvent-country-province-city>\r\n        @if(translationService.countryProvinceCityPlaceholder()['login-form'].countryError) {\r\n        <div class=\"text-danger\">\r\n          <span class=\"material-symbols mr-1\">info</span>\r\n          <translate name=\"error.login-form.country\"></translate>\r\n        </div>\r\n        }\r\n      </div>\r\n      <div class=\"mb-2\">\r\n        <div class=\"mb-1\">\r\n          <translate name=\"login-form.province\"></translate>\r\n        </div>\r\n        <payvent-country-province-city mode=\"province\" correlation=\"login-form\"></payvent-country-province-city>\r\n\r\n        @if(translationService.countryProvinceCityPlaceholder()['login-form'].provinceError) {\r\n        <div class=\"text-danger\">\r\n          <span class=\"material-symbols mr-1\">info</span>\r\n          <translate name=\"error.login-form.province\"></translate>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"mb-2\">\r\n        <div class=\"mb-1\">\r\n          <translate name=\"login-form.city\"></translate>\r\n        </div>\r\n        <payvent-country-province-city mode=\"city\" correlation=\"login-form\"></payvent-country-province-city>\r\n        @if(translationService.countryProvinceCityPlaceholder()['login-form'].cityError) {\r\n        <div class=\"text-danger\">\r\n          <span class=\"material-symbols mr-1\">info</span>\r\n          <translate name=\"error.login-form.city\"></translate>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      @if (context().user.consents.length > 0) {\r\n      <div class=\"my-4\">\r\n        @for(item of context().user.consents; track item.id) {\r\n        <div class=\"mb-2 flex items-center gap-2\">\r\n          <p-checkbox [inputId]=\"item.name\" [name]=\"item.name\" [binary]=\"true\" [(ngModel)]=\"item.consented\" />\r\n          <label [for]=\"item.name\">\r\n            <translate name=\"login-form.consent\"></translate>\r\n          </label>\r\n          <a (click)=\"openConsent($event, item)\">\r\n            <translate [name]=\"'consent.' + item.name\"></translate>\r\n          </a>\r\n        </div>\r\n        @if(!item.consented && item.required && showError()) {\r\n        <div class=\"text-danger mb-2\">\r\n          <span class=\"material-symbols mr-1\">info</span>\r\n          <translate [name]=\"'consentError.' + item.name\"></translate>\r\n        </div>\r\n        }\r\n\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n  </form>\r\n\r\n\r\n  <div class=\"my-2\">\r\n    @if (context().type == 'DATA') {\r\n    <button pButton fluid (click)=\"saveUser()\">\r\n      <translate name=\"login-form.save-changes\"></translate>\r\n    </button>\r\n    }\r\n  </div>\r\n\r\n  @if (context().status && context().status != 'client_not_found' && context().status != 'login_name_changed' &&\r\n  context().status != 'otp_verified' && !loading()) {\r\n  <div class=\"mb-2\">\r\n    <button pButton severity=\"secondary\" outlined=\"true\" fluid=\"true\" (click)=\"resetContext()\">\r\n      <translate name=\"login-form.back\"></translate>\r\n    </button>\r\n  </div>\r\n  }\r\n\r\n  @if(context().action=='VERIFYRECOVER' && context().type=='TOKEN') {\r\n  <translate name=\"login-form.recover_success\"></translate>\r\n  }\r\n\r\n  @if(context().action=='CHANGELOGINNAME' && context().status=='login_name_changed') {\r\n  <translate [name]=\"'login-form.login_name_changed.' + context().type.toLowerCase()\"></translate>\r\n  }\r\n\r\n</div>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loader-container{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff4d;display:flex;align-items:center;justify-content:center;z-index:10000000000}.loader{content:\"\";box-sizing:border-box;display:inline-block;width:32px;height:32px;position:absolute;border-radius:50%;border:4px solid rgba(237,156,40,.3);border-top-color:#ed9c28;animation:spinner .8s cubic-bezier(.58,.33,.52,.75) infinite;z-index:10000000001}\n"] }]
         }], ctorParameters: () => [], propDecorators: { myForm: [{
                 type: ViewChild,
                 args: ['myForm', { static: false }]
@@ -2065,10 +2191,10 @@ class CookieBarComponent {
     rejectCookies() {
         this.cookieService.gdprConsent = '0';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CookieBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CookieBarComponent, isStandalone: true, selector: "cookie-bar", ngImport: i0, template: "@if(!cookieService.gdprConsent && !isPrerender){\r\n<div class=\"flow-cookie-bar-overlay\">\r\n  <div class=\"flow-cookie-bar-alert\">\r\n    <div style=\"padding: 10px;\">\r\n\r\n      <div style=\"margin-bottom: 10px;\">\r\n        <translate name=\"cookie-bar.text\"></translate>\r\n      </div>\r\n      <!-- <a pButton pRipple class=\"p-button-link\" (click)=\"acceptCookies()\">\r\n        <translate name=\"cookie-bar.accept\"></translate>\r\n      </a> -->\r\n\r\n      <!-- <button pButton pRipple class=\"w-full\" (click)=\"acceptCookies()\">\r\n        <translate name=\"cookie-bar.accept\"></translate>\r\n      </button> -->\r\n\r\n      <!-- <div class=\"mb-3\">\r\n        <button class=\"w-full\" severity=\"secondary\" pRipple pButton (click)=\"acceptCookies()\">\r\n          <translate name=\"cookie-bar.accept\"></translate>\r\n        </button>\r\n      </div> -->\r\n\r\n      <div>\r\n        <span style=\"padding: 5px;\">\r\n          <p-button [outlined]=\"true\" (click)=\"acceptCookies()\" class=\"button-padding\">\r\n            <translate name=\"cookie-bar.accept\"></translate>\r\n          </p-button>\r\n        </span>\r\n        <span style=\"padding: 5px;\">\r\n          <p-button [outlined]=\"true\" severity=\"secondary\" (click)=\"rejectCookies()\" class=\"button-padding\">\r\n            <translate name=\"cookie-bar.reject\"></translate>\r\n          </p-button>\r\n        </span>\r\n      </div>\r\n\r\n\r\n      <!-- <button class=\"btn btn-default yes-btn\" (click)=\"acceptCookies()\">\r\n        <translate name=\"cookie-bar.accept\"></translate>\r\n      </button>\r\n      <a class=\"no-link\" (click)=\"rejectCookies()\">\r\n        <translate name=\"cookie-bar.reject\"></translate>\r\n      </a> -->\r\n    </div>\r\n  </div>\r\n</div>\r\n}", styles: [".flow-cookie-bar-overlay{z-index:10;position:fixed;inset:0;background-color:#0003;display:flex;justify-content:center;align-items:center;text-align:center}.flow-cookie-bar-alert{border-radius:6px;background-color:#fff;border:solid 1px #eee;text-align:center;max-width:500px;margin:10px;font-size:medium;box-shadow:0 0 5px #ffa50033}.flow-cookie-bar-alert .yes-btn{margin-right:10px;padding:7px 10px}.flow-cookie-bar-alert .no-link{padding-bottom:10px;text-decoration:none;color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TranslationComponent, selector: "translate", inputs: ["name", "replacements"] }, { kind: "ngmodule", type: CardModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: StyleClassModule }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CookieBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: CookieBarComponent, isStandalone: true, selector: "cookie-bar", ngImport: i0, template: "@if(!cookieService.gdprConsent && !isPrerender){\r\n<div class=\"flow-cookie-bar-overlay\">\r\n  <div class=\"flow-cookie-bar-alert\">\r\n    <div style=\"padding: 10px;\">\r\n\r\n      <div style=\"margin-bottom: 10px;\">\r\n        <translate name=\"cookie-bar.text\"></translate>\r\n      </div>\r\n      <!-- <a pButton pRipple class=\"p-button-link\" (click)=\"acceptCookies()\">\r\n        <translate name=\"cookie-bar.accept\"></translate>\r\n      </a> -->\r\n\r\n      <!-- <button pButton pRipple class=\"w-full\" (click)=\"acceptCookies()\">\r\n        <translate name=\"cookie-bar.accept\"></translate>\r\n      </button> -->\r\n\r\n      <!-- <div class=\"mb-3\">\r\n        <button class=\"w-full\" severity=\"secondary\" pRipple pButton (click)=\"acceptCookies()\">\r\n          <translate name=\"cookie-bar.accept\"></translate>\r\n        </button>\r\n      </div> -->\r\n\r\n      <div>\r\n        <span style=\"padding: 5px;\">\r\n          <p-button [outlined]=\"true\" (click)=\"acceptCookies()\" class=\"button-padding\">\r\n            <translate name=\"cookie-bar.accept\"></translate>\r\n          </p-button>\r\n        </span>\r\n        <span style=\"padding: 5px;\">\r\n          <p-button [outlined]=\"true\" severity=\"secondary\" (click)=\"rejectCookies()\" class=\"button-padding\">\r\n            <translate name=\"cookie-bar.reject\"></translate>\r\n          </p-button>\r\n        </span>\r\n      </div>\r\n\r\n\r\n      <!-- <button class=\"btn btn-default yes-btn\" (click)=\"acceptCookies()\">\r\n        <translate name=\"cookie-bar.accept\"></translate>\r\n      </button>\r\n      <a class=\"no-link\" (click)=\"rejectCookies()\">\r\n        <translate name=\"cookie-bar.reject\"></translate>\r\n      </a> -->\r\n    </div>\r\n  </div>\r\n</div>\r\n}", styles: [".flow-cookie-bar-overlay{z-index:10;position:fixed;inset:0;background-color:#0003;display:flex;justify-content:center;align-items:center;text-align:center}.flow-cookie-bar-alert{border-radius:6px;background-color:#fff;border:solid 1px #eee;text-align:center;max-width:500px;margin:10px;font-size:medium;box-shadow:0 0 5px #ffa50033}.flow-cookie-bar-alert .yes-btn{margin-right:10px;padding:7px 10px}.flow-cookie-bar-alert .no-link{padding-bottom:10px;text-decoration:none;color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TranslationComponent, selector: "translate", inputs: ["name", "replacements"] }, { kind: "ngmodule", type: CardModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: StyleClassModule }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CookieBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CookieBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cookie-bar', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
                         CommonModule,
@@ -2096,7 +2222,7 @@ class NotificationListComponent {
     constructor() { }
     ngOnInit() {
         this.signalRService.getNotifications().subscribe(res => {
-            this.signalRService.messages.filter(m => m.isUnread).forEach(item => {
+            this.signalRService.messages().filter(m => m.isUnread).forEach(item => {
                 item.isUnread = false;
                 item.wasNew = true;
             });
@@ -2104,12 +2230,12 @@ class NotificationListComponent {
         });
     }
     ngOnDestroy() {
-        this.signalRService.messages.forEach(item => {
+        this.signalRService.messages().forEach(item => {
             item.wasNew = false;
         });
     }
     get messages() {
-        return this.signalRService.messages.slice().sort((a, b) => (a.creationTime.toString() < b.creationTime.toString() ? 1 : -1));
+        return this.signalRService.messages().slice().sort((a, b) => (a.creationTime.toString() < b.creationTime.toString() ? 1 : -1));
     }
     openNextPage() {
         this.loading = true;
@@ -2119,10 +2245,10 @@ class NotificationListComponent {
     notificationClick(message) {
         this.signalRService.onNotificationClick.emit(message);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NotificationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NotificationListComponent, isStandalone: true, selector: "app-notification-list", ngImport: i0, template: "@for( m of messages; track m){\r\n<span>\r\n  <li [class]=\"m.isUnread ? 'dropdown-message-unread' : m.wasNew ? 'dropdown-message-wasnew' : ''\">\r\n    <div class=\"dropdown-messages-box\">\r\n      <a class=\"media-link\" (click)=\"notificationClick(m)\">\r\n        @if(m.mediaType=='Image' && m.mediaSrc){<img [src]=\"m.mediaSrc\" style=\"width:100%\" />}\r\n        <span class=\"media-body\">\r\n          <!-- <i class=\"fa fa-check bg-green icon\" *ngIf=\"m.class=='success'\"></i>\r\n          <i class=\"fa fa-info-circle bg-aqua icon\" *ngIf=\"m.class=='info'\"></i>\r\n          <i class=\"fa fa-exclamation-circle icon bg-yellow\" *ngIf=\"m.class=='warning'\"></i>\r\n          <i class=\"fa fa-times bg-red icon\" *ngIf=\"m.class=='error'\"></i> -->\r\n          @if(m.class=='success'){\r\n          <i class=\"pi pi-check\"></i>\r\n          }\r\n          @if(m.class=='info'){\r\n          <i class=\"pi pi-info-circle\"></i>\r\n          }\r\n          @if(m.class=='warning'){\r\n          <i class=\"pi-exclamation-circle\"></i>\r\n          }\r\n          @if(m.class=='error'){\r\n          <i class=\"pi pi-times\"></i>\r\n          }\r\n\r\n          <!-- @if(m.subject){\r\n          <div class=\"media-title\">\r\n            {{signalRService.processReplacements(m.subject | translation : translationService.translations, m.model)}}\r\n          </div>\r\n          }\r\n\r\n          <span\r\n            [innerHtml]=\"signalRService.processReplacements(m.body | translation : translationService.translations, m.model)\">\r\n          </span>\r\n          <br />\r\n          <small class=\"text-muted\">\r\n            <i class=\"fa subicon fa-clock-o\"></i> {{m.creationTime | amFromUtc | amTimeAgo}}</small> -->\r\n        </span>\r\n      </a>\r\n\r\n    </div>\r\n  </li>\r\n</span>\r\n}\r\n\r\n@if(messages.length==0){\r\n<li>\r\n  <div class=\"media-body text-center text-muted\">\r\n    <translate name=\"messages.nomessages\"></translate>\r\n  </div>\r\n\r\n</li>\r\n}\r\n@if(signalRService.hasMorePages){\r\n<div class=\"media-body notification-footer text-center text-muted small-text\">\r\n  @if(loading){<span class=\"loader loader-small\"></span>}\r\n  @if(!loading){\r\n  <a (click)=\"openNextPage()\">\r\n    <translate name=\"messages.viewmore\"></translate>\r\n  </a>\r\n  }\r\n</div>\r\n}", styles: [".icon{margin-right:7px;margin-bottom:3px}.media-title{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TranslationComponent, selector: "translate", inputs: ["name", "replacements"] }, { kind: "ngmodule", type: CardModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: NotificationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: NotificationListComponent, isStandalone: true, selector: "app-notification-list", ngImport: i0, template: "@for( m of messages; track m){\r\n<span>\r\n  <li [class]=\"m.isUnread ? 'dropdown-message-unread' : m.wasNew ? 'dropdown-message-wasnew' : ''\">\r\n    <div class=\"dropdown-messages-box\">\r\n      <a class=\"media-link\" (click)=\"notificationClick(m)\">\r\n        @if(m.mediaType=='Image' && m.mediaSrc){<img [src]=\"m.mediaSrc\" style=\"width:100%\" />}\r\n        <span class=\"media-body\">\r\n          <!-- <i class=\"fa fa-check bg-green icon\" *ngIf=\"m.class=='success'\"></i>\r\n          <i class=\"fa fa-info-circle bg-aqua icon\" *ngIf=\"m.class=='info'\"></i>\r\n          <i class=\"fa fa-exclamation-circle icon bg-yellow\" *ngIf=\"m.class=='warning'\"></i>\r\n          <i class=\"fa fa-times bg-red icon\" *ngIf=\"m.class=='error'\"></i> -->\r\n          @if(m.class=='success'){\r\n          <i class=\"pi pi-check\"></i>\r\n          }\r\n          @if(m.class=='info'){\r\n          <i class=\"pi pi-info-circle\"></i>\r\n          }\r\n          @if(m.class=='warning'){\r\n          <i class=\"pi-exclamation-circle\"></i>\r\n          }\r\n          @if(m.class=='error'){\r\n          <i class=\"pi pi-times\"></i>\r\n          }\r\n\r\n          <!-- @if(m.subject){\r\n          <div class=\"media-title\">\r\n            {{signalRService.processReplacements(m.subject | translation : translationService.translations, m.model)}}\r\n          </div>\r\n          }\r\n\r\n          <span\r\n            [innerHtml]=\"signalRService.processReplacements(m.body | translation : translationService.translations, m.model)\">\r\n          </span>\r\n          <br />\r\n          <small class=\"text-muted\">\r\n            <i class=\"fa subicon fa-clock-o\"></i> {{m.creationTime | amFromUtc | amTimeAgo}}</small> -->\r\n        </span>\r\n      </a>\r\n\r\n    </div>\r\n  </li>\r\n</span>\r\n}\r\n\r\n@if(messages.length==0){\r\n<li>\r\n  <div class=\"media-body text-center text-muted\">\r\n    <translate name=\"messages.nomessages\"></translate>\r\n  </div>\r\n\r\n</li>\r\n}\r\n@if(signalRService.hasMorePages){\r\n<div class=\"media-body notification-footer text-center text-muted small-text\">\r\n  @if(loading){<span class=\"loader loader-small\"></span>}\r\n  @if(!loading){\r\n  <a (click)=\"openNextPage()\">\r\n    <translate name=\"messages.viewmore\"></translate>\r\n  </a>\r\n  }\r\n</div>\r\n}", styles: [".icon{margin-right:7px;margin-bottom:3px}.media-title{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TranslationComponent, selector: "translate", inputs: ["name", "replacements"] }, { kind: "ngmodule", type: CardModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NotificationListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: NotificationListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-notification-list', standalone: true, imports: [
                         CommonModule,
@@ -2156,17 +2282,17 @@ class NotificationDropdownComponent {
         this.notificationsOpen = !this.notificationsOpen;
         timer(100).subscribe(r => this.canClose = true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NotificationDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NotificationDropdownComponent, isStandalone: true, selector: "[notification-dropdown]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, translation: { classPropertyName: "translation", publicName: "translation", isSignal: true, isRequired: false, transformFunction: null }, linkClass: { classPropertyName: "linkClass", publicName: "linkClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:touchend": "onDocumentClick($event)", "document:click": "onDocumentClick($event)" }, properties: { "class.open": "this.notificationsOpen" } }, ngImport: i0, template: "<a [class]=\"'dropdown-toggle count-info ' + linkClass\" (click)=\"openNotifications()\">\r\n    <i [class]=\"icon()\"></i>\r\n    @if(signalRService.unreadMessageCount>0){\r\n    <span class=\"label label-primary\">{{signalRService.unreadMessageCount}}</span>\r\n    }\r\n    @if(translation){<translate [name]=\"translation\"></translate>}\r\n</a>\r\n@if(notificationsOpen){\r\n<ul class=\"dropdown-menu dropdown-messages\" #messagesCtl>\r\n    <app-notification-list></app-notification-list>\r\n</ul>\r\n}", styles: [".media-body .icon{padding:2px;border-radius:2px;margin-right:3px}a.media-body{text-decoration:none}.media-body .subicon{margin-right:1px}.dropdown-menu{max-height:500px;overflow-y:auto;overflow-x:hidden;text-align:left}.dropdown-menu::-webkit-scrollbar-track{border-radius:5px;background-color:transparent}.dropdown-menu::-webkit-scrollbar{width:6px;background-color:transparent}.dropdown-menu::-webkit-scrollbar-thumb{border-radius:5px;background-color:#afafaf4d}.notification-footer{background-color:#fafafa;padding:10px 0;vertical-align:bottom}.notification-footer a{color:#333;font-size:9pt;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TranslationComponent, selector: "translate", inputs: ["name", "replacements"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: NotificationListComponent, selector: "app-notification-list" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: NotificationDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: NotificationDropdownComponent, isStandalone: true, selector: "[notification-dropdown]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, translation: { classPropertyName: "translation", publicName: "translation", isSignal: true, isRequired: false, transformFunction: null }, linkClass: { classPropertyName: "linkClass", publicName: "linkClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:touchend": "onDocumentClick($event)", "document:click": "onDocumentClick($event)" }, properties: { "class.open": "this.notificationsOpen" } }, ngImport: i0, template: "<a [class]=\"'dropdown-toggle count-info ' + linkClass\" (click)=\"openNotifications()\">\r\n  <i [class]=\"icon()\"></i>\r\n  @if(signalRService.unreadMessageCount()>0){\r\n  <span class=\"label label-primary\">{{signalRService.unreadMessageCount()}}</span>\r\n  }\r\n  @if(translation){<translate [name]=\"translation\"></translate>}\r\n</a>\r\n@if(notificationsOpen){\r\n<ul class=\"dropdown-menu dropdown-messages\" #messagesCtl>\r\n  <app-notification-list></app-notification-list>\r\n</ul>\r\n}", styles: [".media-body .icon{padding:2px;border-radius:2px;margin-right:3px}a.media-body{text-decoration:none}.media-body .subicon{margin-right:1px}.dropdown-menu{max-height:500px;overflow-y:auto;overflow-x:hidden;text-align:left}.dropdown-menu::-webkit-scrollbar-track{border-radius:5px;background-color:transparent}.dropdown-menu::-webkit-scrollbar{width:6px;background-color:transparent}.dropdown-menu::-webkit-scrollbar-thumb{border-radius:5px;background-color:#afafaf4d}.notification-footer{background-color:#fafafa;padding:10px 0;vertical-align:bottom}.notification-footer a{color:#333;font-size:9pt;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TranslationComponent, selector: "translate", inputs: ["name", "replacements"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: NotificationListComponent, selector: "app-notification-list" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NotificationDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: NotificationDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: '[notification-dropdown]', standalone: true, imports: [
                         CommonModule,
                         TranslationComponent,
                         CardModule,
                         NotificationListComponent,
-                    ], template: "<a [class]=\"'dropdown-toggle count-info ' + linkClass\" (click)=\"openNotifications()\">\r\n    <i [class]=\"icon()\"></i>\r\n    @if(signalRService.unreadMessageCount>0){\r\n    <span class=\"label label-primary\">{{signalRService.unreadMessageCount}}</span>\r\n    }\r\n    @if(translation){<translate [name]=\"translation\"></translate>}\r\n</a>\r\n@if(notificationsOpen){\r\n<ul class=\"dropdown-menu dropdown-messages\" #messagesCtl>\r\n    <app-notification-list></app-notification-list>\r\n</ul>\r\n}", styles: [".media-body .icon{padding:2px;border-radius:2px;margin-right:3px}a.media-body{text-decoration:none}.media-body .subicon{margin-right:1px}.dropdown-menu{max-height:500px;overflow-y:auto;overflow-x:hidden;text-align:left}.dropdown-menu::-webkit-scrollbar-track{border-radius:5px;background-color:transparent}.dropdown-menu::-webkit-scrollbar{width:6px;background-color:transparent}.dropdown-menu::-webkit-scrollbar-thumb{border-radius:5px;background-color:#afafaf4d}.notification-footer{background-color:#fafafa;padding:10px 0;vertical-align:bottom}.notification-footer a{color:#333;font-size:9pt;font-weight:700}\n"] }]
+                    ], template: "<a [class]=\"'dropdown-toggle count-info ' + linkClass\" (click)=\"openNotifications()\">\r\n  <i [class]=\"icon()\"></i>\r\n  @if(signalRService.unreadMessageCount()>0){\r\n  <span class=\"label label-primary\">{{signalRService.unreadMessageCount()}}</span>\r\n  }\r\n  @if(translation){<translate [name]=\"translation\"></translate>}\r\n</a>\r\n@if(notificationsOpen){\r\n<ul class=\"dropdown-menu dropdown-messages\" #messagesCtl>\r\n  <app-notification-list></app-notification-list>\r\n</ul>\r\n}", styles: [".media-body .icon{padding:2px;border-radius:2px;margin-right:3px}a.media-body{text-decoration:none}.media-body .subicon{margin-right:1px}.dropdown-menu{max-height:500px;overflow-y:auto;overflow-x:hidden;text-align:left}.dropdown-menu::-webkit-scrollbar-track{border-radius:5px;background-color:transparent}.dropdown-menu::-webkit-scrollbar{width:6px;background-color:transparent}.dropdown-menu::-webkit-scrollbar-thumb{border-radius:5px;background-color:#afafaf4d}.notification-footer{background-color:#fafafa;padding:10px 0;vertical-align:bottom}.notification-footer a{color:#333;font-size:9pt;font-weight:700}\n"] }]
         }], ctorParameters: () => [], propDecorators: { notificationsOpen: [{
                 type: HostBinding,
                 args: ['class.open']
@@ -2204,7 +2330,7 @@ class NotificationToasterComponent {
         });
     }
     get messages() {
-        return this.signalRService.messages.filter(m => m && m.isToasterUnread && m.isUnread);
+        return this.signalRService.messages().filter(m => m && m.isToasterUnread && m.isUnread);
     }
     sendMessage() {
         this.connection.invoke('send', this.newMessage);
@@ -2218,10 +2344,10 @@ class NotificationToasterComponent {
         this.signalRService.onNotificationClick.emit(message);
         this.removeNotification(message);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NotificationToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NotificationToasterComponent, isStandalone: true, selector: "app-notification-toaster", ngImport: i0, template: "<div id=\"toast-container\" class=\"card flex justify-content-center\" class=\"toast-bottom-right\">\r\n    <p-toast />\r\n    @for (m of messages; track m) {\r\n    <p-button (onClick)=\"notificationClick(m)\" [severity]=\" m.class\" />\r\n    <div class=\"toast-progress\"></div>\r\n    <div class=\"pull-left\">\r\n        @if(!m.iconUrl){\r\n        <ng-container>\r\n            @if(m.class=='success'){\r\n            <i class=\"pi pi-check\"></i>\r\n            }\r\n            @if(m.class=='info'){\r\n            <i class=\"pi pi-info-circle\"></i>\r\n            }\r\n            @if(m.class=='warning'){\r\n            <i class=\"pi-exclamation-circle\"></i>\r\n            }\r\n            @if(m.class=='error'){\r\n            <i class=\"pi pi-times\"></i>\r\n            }\r\n        </ng-container>\r\n    }\r\n\r\n    @if(m.iconUrl){<div [style.backgroundImage]=\"'url(' + m.iconUrl + ')'\" class=\"toast-icon\"></div>\r\n}\r\n    </div>\r\n\r\n    }\r\n</div>\r\n", styles: ["#toast-container>.toast{background-image:none!important}#toast-container>div{-moz-box-shadow:0 0 3px #999;-webkit-box-shadow:0 0 3px #999;box-shadow:0 0 3px #999;opacity:.9;-ms-filter:alpha(Opacity=90);filter:alpha(opacity=90)}#toast-container>:hover{-moz-box-shadow:0 0 4px #999;-webkit-box-shadow:0 0 4px #999;box-shadow:0 0 4px #999;opacity:1;-ms-filter:alpha(Opacity=100);filter:alpha(opacity=100);cursor:pointer}.toast-title{font-weight:700}.toast-message{-ms-word-wrap:break-word;word-wrap:break-word}.toast-message a,.toast-message label{color:#fff}.toast-message a:hover{color:#ccc;text-decoration:none}.toast-close-button{position:relative;right:-.3em;top:-.3em;float:right;font-size:20px;font-weight:700;color:#fff;-webkit-text-shadow:0 1px 0 #fff;text-shadow:0 1px 0 #fff;opacity:.8;-ms-filter:alpha(Opacity=80);filter:alpha(opacity=80)}.toast-close-button:focus,.toast-close-button:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.4;-ms-filter:alpha(Opacity=40);filter:alpha(opacity=40)}button.toast-close-button{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;position:absolute;right:10px;top:5px}.toast-top-center{top:0;right:0;width:100%}.toast-icon{width:48px;height:48px;border-radius:4px;background-color:#fff;background-size:90%;background-repeat:no-repeat;background-position:center center;margin:0 7px 7px 0}.toast-bottom-center{bottom:0;right:0;width:100%}.toast-top-full-width{top:0;right:0;width:100%}.toast-bottom-full-width{bottom:0;right:0;width:100%}.toast-top-left{top:12px;left:12px}.toast-top-right{top:12px;right:12px}.toast-bottom-right{right:12px;bottom:12px}.toast-bottom-left{bottom:12px;left:12px}#toast-container{position:fixed;z-index:999999}#toast-container *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.toast{position:relative;overflow:hidden;margin:0 0 6px;padding:15px 25px 15px 15px;width:300px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-position:15px center;background-repeat:no-repeat;-moz-box-shadow:0 0 12px #999;-webkit-box-shadow:0 0 12px #999;box-shadow:0 0 12px #999;opacity:.8;-ms-filter:alpha(Opacity=80);filter:alpha(opacity=80)}#toast-container>:hover{-moz-box-shadow:0 0 12px #000;-webkit-box-shadow:0 0 12px #000;box-shadow:0 0 12px #000;opacity:1;-ms-filter:alpha(Opacity=100);filter:alpha(opacity=100);cursor:pointer}.icon{margin-right:10px;margin-bottom:10px}#toast-container.toast-bottom-center>div,#toast-container.toast-top-center>div{width:300px;margin:auto}#toast-container.toast-bottom-full-width>div,#toast-container.toast-top-full-width>div{width:96%;margin:auto}.toast{background-color:#030303;color:#fff}.toast-success{background-color:#51a351;color:#fff}.toast-error{background-color:#bd362f;color:#fff}.toast-info{background-color:#2f96b4;color:#fff}.toast-warning{background-color:#f89406;color:#fff}.toast-default{background-color:#fafafa;color:#555;padding:none}.toast-default.toast,.toast-default.toast .toast-message{padding:0}.toast-default.toast .toast-text-container{padding:15px}.toast-default.toast .toast-title{margin-bottom:3px}.toast-default .toast-message a,.toast-default .toast-message label{color:#555}.toast-progress{position:absolute;left:0;bottom:0;height:4px;background-color:#000;opacity:.4;-ms-filter:alpha(Opacity=40);filter:alpha(opacity=40)}@media all and (max-width: 240px){#toast-container>div{width:90%;margin-left:auto;margin-right:auto}}@media all and (min-width: 241px) and (max-width: 480px){#toast-container>div{width:90%;margin-left:auto;margin-right:auto}}@media all and (min-width: 481px) and (max-width: 768px){#toast-container>div{width:25em}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CardModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i1$3.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: NotificationToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: NotificationToasterComponent, isStandalone: true, selector: "app-notification-toaster", ngImport: i0, template: "<div id=\"toast-container\" class=\"card flex justify-content-center\" class=\"toast-bottom-right\">\r\n    <p-toast />\r\n    @for (m of messages; track m) {\r\n    <p-button (onClick)=\"notificationClick(m)\" [severity]=\" m.class\" />\r\n    <div class=\"toast-progress\"></div>\r\n    <div class=\"pull-left\">\r\n        @if(!m.iconUrl){\r\n        <ng-container>\r\n            @if(m.class=='success'){\r\n            <i class=\"pi pi-check\"></i>\r\n            }\r\n            @if(m.class=='info'){\r\n            <i class=\"pi pi-info-circle\"></i>\r\n            }\r\n            @if(m.class=='warning'){\r\n            <i class=\"pi-exclamation-circle\"></i>\r\n            }\r\n            @if(m.class=='error'){\r\n            <i class=\"pi pi-times\"></i>\r\n            }\r\n        </ng-container>\r\n    }\r\n\r\n    @if(m.iconUrl){<div [style.backgroundImage]=\"'url(' + m.iconUrl + ')'\" class=\"toast-icon\"></div>\r\n}\r\n    </div>\r\n\r\n    }\r\n</div>\r\n", styles: ["#toast-container>.toast{background-image:none!important}#toast-container>div{-moz-box-shadow:0 0 3px #999;-webkit-box-shadow:0 0 3px #999;box-shadow:0 0 3px #999;opacity:.9;-ms-filter:alpha(Opacity=90);filter:alpha(opacity=90)}#toast-container>:hover{-moz-box-shadow:0 0 4px #999;-webkit-box-shadow:0 0 4px #999;box-shadow:0 0 4px #999;opacity:1;-ms-filter:alpha(Opacity=100);filter:alpha(opacity=100);cursor:pointer}.toast-title{font-weight:700}.toast-message{-ms-word-wrap:break-word;word-wrap:break-word}.toast-message a,.toast-message label{color:#fff}.toast-message a:hover{color:#ccc;text-decoration:none}.toast-close-button{position:relative;right:-.3em;top:-.3em;float:right;font-size:20px;font-weight:700;color:#fff;-webkit-text-shadow:0 1px 0 #fff;text-shadow:0 1px 0 #fff;opacity:.8;-ms-filter:alpha(Opacity=80);filter:alpha(opacity=80)}.toast-close-button:focus,.toast-close-button:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.4;-ms-filter:alpha(Opacity=40);filter:alpha(opacity=40)}button.toast-close-button{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;position:absolute;right:10px;top:5px}.toast-top-center{top:0;right:0;width:100%}.toast-icon{width:48px;height:48px;border-radius:4px;background-color:#fff;background-size:90%;background-repeat:no-repeat;background-position:center center;margin:0 7px 7px 0}.toast-bottom-center{bottom:0;right:0;width:100%}.toast-top-full-width{top:0;right:0;width:100%}.toast-bottom-full-width{bottom:0;right:0;width:100%}.toast-top-left{top:12px;left:12px}.toast-top-right{top:12px;right:12px}.toast-bottom-right{right:12px;bottom:12px}.toast-bottom-left{bottom:12px;left:12px}#toast-container{position:fixed;z-index:999999}#toast-container *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.toast{position:relative;overflow:hidden;margin:0 0 6px;padding:15px 25px 15px 15px;width:300px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-position:15px center;background-repeat:no-repeat;-moz-box-shadow:0 0 12px #999;-webkit-box-shadow:0 0 12px #999;box-shadow:0 0 12px #999;opacity:.8;-ms-filter:alpha(Opacity=80);filter:alpha(opacity=80)}#toast-container>:hover{-moz-box-shadow:0 0 12px #000;-webkit-box-shadow:0 0 12px #000;box-shadow:0 0 12px #000;opacity:1;-ms-filter:alpha(Opacity=100);filter:alpha(opacity=100);cursor:pointer}.icon{margin-right:10px;margin-bottom:10px}#toast-container.toast-bottom-center>div,#toast-container.toast-top-center>div{width:300px;margin:auto}#toast-container.toast-bottom-full-width>div,#toast-container.toast-top-full-width>div{width:96%;margin:auto}.toast{background-color:#030303;color:#fff}.toast-success{background-color:#51a351;color:#fff}.toast-error{background-color:#bd362f;color:#fff}.toast-info{background-color:#2f96b4;color:#fff}.toast-warning{background-color:#f89406;color:#fff}.toast-default{background-color:#fafafa;color:#555;padding:none}.toast-default.toast,.toast-default.toast .toast-message{padding:0}.toast-default.toast .toast-text-container{padding:15px}.toast-default.toast .toast-title{margin-bottom:3px}.toast-default .toast-message a,.toast-default .toast-message label{color:#555}.toast-progress{position:absolute;left:0;bottom:0;height:4px;background-color:#000;opacity:.4;-ms-filter:alpha(Opacity=40);filter:alpha(opacity=40)}@media all and (max-width: 240px){#toast-container>div{width:90%;margin-left:auto;margin-right:auto}}@media all and (min-width: 241px) and (max-width: 480px){#toast-container>div{width:90%;margin-left:auto;margin-right:auto}}@media all and (min-width: 481px) and (max-width: 768px){#toast-container>div{width:25em}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CardModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i1$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NotificationToasterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: NotificationToasterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-notification-toaster', standalone: true, imports: [
                         TranslationPipe,
@@ -2266,10 +2392,10 @@ class QrScannerComponent {
     ngOnDestroy() {
         this.eventListener();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: QrScannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: QrScannerComponent, isStandalone: true, selector: "flow-qr-scanner", outputs: { valueRead: "valueRead" }, ngImport: i0, template: "", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: QrScannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: QrScannerComponent, isStandalone: true, selector: "flow-qr-scanner", outputs: { valueRead: "valueRead" }, ngImport: i0, template: "", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: QrScannerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: QrScannerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'flow-qr-scanner', standalone: true, template: "" }]
         }], ctorParameters: () => [], propDecorators: { valueRead: [{
@@ -2335,12 +2461,12 @@ class SidebarComponent {
                 break;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: SidebarComponent, isStandalone: true, selector: "sidebar", viewQueries: [{ propertyName: "contentComponent", first: true, predicate: ["content"], descendants: true, read: ElementRef }], ngImport: i0, template: "@for(sidebar of sidebarService.sidebars(); track sidebar.id) {\r\n<div [id]=\"'sidebar-' + sidebar.id\" style=\"height: 100%;\">\r\n  <p-drawer [visible]=\"sidebar.visible\" [appendTo]=\"'sidebar-' + sidebar.id\" dismissible=\"false\" closeOnEscape=\"false\"\r\n    [position]=\"sidebar.options.position\" [style]=\"sidebar.options.ngStyle\">\r\n    <ng-template pTemplate=\"headless\">\r\n      <div class=\"flex flex-col h-full\" [id]=\"'sidebar-body-' + sidebar.id\" style=\"touch-action: none;\"\r\n        (touchmove)=\"onPan($event, sidebar.id)\" (touchstart)=\"onPan($event, sidebar.id)\"\r\n        (touchend)=\"onPan($event, sidebar.id)\">\r\n        <div class=\"flex align-items-center justify-content-between px-3 py-2 flex-shrink-0\"\r\n          [id]=\"'sidebar-header-' + sidebar.id\">\r\n          <span [id]=\"'sidebar-header-inner-' + sidebar.id\"\r\n            class=\"inline-flex flex-1 align-items-center justify-content-center gap-2 \">\r\n            @if (sidebar.options.position=='bottom') {\r\n            <div class=\"inline-block self-center bg-sky-400 rounded-full my-8\"\r\n              [id]=\"'sidebar-header-hook-' + sidebar.id\" style=\"height: .3rem; width:70px\"></div>\r\n            }\r\n          </span>\r\n          @if(sidebar.options.position == 'left' || sidebar.options.position == 'right') {\r\n          <span>\r\n            <p-button type=\"button\" (click)=\"closeCallback(sidebar.id)\" rounded=\"true\" outlined=\"true\"\r\n              styleClass=\"h-2rem w-2rem\"><span class=\"material-symbols\">close</span></p-button>\r\n          </span>\r\n          }\r\n        </div>\r\n        <div #content\r\n          [class]=\"{ 'overflow-y-auto': sidebar.options.contentScrollable(), 'p-3': !sidebar.options.noPadding }\">\r\n          <ng-container *ngComponentOutlet=\"sidebar.component;inputs: sidebar.inputs;\" />\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </p-drawer>\r\n</div>\r\n}", styles: [""], dependencies: [{ kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i1$4.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: HammerModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: SidebarComponent, isStandalone: true, selector: "sidebar", viewQueries: [{ propertyName: "contentComponent", first: true, predicate: ["content"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if(sidebarService.sidebars().length > 0) {\r\n<div class=\"sidebar-overlay\">\r\n  @for(sidebar of sidebarService.sidebars(); track sidebar.id) {\r\n  <div [id]=\"'sidebar-' + sidebar.id\" style=\"height: 100%;\" class=\"sidebar-container\">\r\n    <p-drawer [visible]=\"sidebar.visible\" [appendTo]=\"'sidebar-' + sidebar.id\" dismissible=\"false\" closeOnEscape=\"false\"\r\n      [position]=\"sidebar.options.position\" [style]=\"sidebar.options.ngStyle\">\r\n      <ng-template pTemplate=\"headless\">\r\n        <div class=\"flex flex-col h-full\" [id]=\"'sidebar-body-' + sidebar.id\" style=\"touch-action: none;\"\r\n          (touchmove)=\"onPan($event, sidebar.id)\" (touchstart)=\"onPan($event, sidebar.id)\"\r\n          (touchend)=\"onPan($event, sidebar.id)\">\r\n          <div class=\"flex align-items-center justify-center px-3 py-2 flex-shrink-0 md:absolute md:z-100 md:right-0\"\r\n            [id]=\"'sidebar-header-' + sidebar.id\">\r\n            <span [id]=\"'sidebar-header-inner-' + sidebar.id\"\r\n              class=\"inline-flex flex-1 align-items-center justify-center gap-2 \">\r\n              @if (sidebar.options.position=='bottom') {\r\n              <div class=\"inline-block self-center bg-sky-400 rounded-full\" [id]=\"'sidebar-header-hook-' + sidebar.id\"\r\n                style=\"height: .3rem; width:70px\"></div>\r\n              }\r\n            </span>\r\n            @if(sidebar.options.position == 'left' || sidebar.options.position == 'right') {\r\n            <span>\r\n              <a (click)=\"closeCallback(sidebar.id)\" class=\"text-2xl p-2 opacity-40 font-bold\">\r\n                <i class=\"fi fi-rr-cross\"></i>\r\n              </a>\r\n            </span>\r\n            }\r\n          </div>\r\n          <div #content\r\n            [class]=\"{ 'overflow-y-auto': sidebar.options.contentScrollable(), 'p-8': !sidebar.options.noPadding, 'h-full': true }\">\r\n            <ng-container *ngComponentOutlet=\"sidebar.component;inputs: sidebar.inputs;\" />\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </p-drawer>\r\n  </div>\r\n  }\r\n</div>\r\n}", styles: [".sidebar-container{z-index:1000;position:fixed}.sidebar-overlay{position:fixed;inset:0;z-index:999;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}\n"], dependencies: [{ kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i1$2.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: HammerModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SidebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sidebar', standalone: true, imports: [DrawerModule, NgComponentOutlet, ButtonModule, HammerModule], template: "@for(sidebar of sidebarService.sidebars(); track sidebar.id) {\r\n<div [id]=\"'sidebar-' + sidebar.id\" style=\"height: 100%;\">\r\n  <p-drawer [visible]=\"sidebar.visible\" [appendTo]=\"'sidebar-' + sidebar.id\" dismissible=\"false\" closeOnEscape=\"false\"\r\n    [position]=\"sidebar.options.position\" [style]=\"sidebar.options.ngStyle\">\r\n    <ng-template pTemplate=\"headless\">\r\n      <div class=\"flex flex-col h-full\" [id]=\"'sidebar-body-' + sidebar.id\" style=\"touch-action: none;\"\r\n        (touchmove)=\"onPan($event, sidebar.id)\" (touchstart)=\"onPan($event, sidebar.id)\"\r\n        (touchend)=\"onPan($event, sidebar.id)\">\r\n        <div class=\"flex align-items-center justify-content-between px-3 py-2 flex-shrink-0\"\r\n          [id]=\"'sidebar-header-' + sidebar.id\">\r\n          <span [id]=\"'sidebar-header-inner-' + sidebar.id\"\r\n            class=\"inline-flex flex-1 align-items-center justify-content-center gap-2 \">\r\n            @if (sidebar.options.position=='bottom') {\r\n            <div class=\"inline-block self-center bg-sky-400 rounded-full my-8\"\r\n              [id]=\"'sidebar-header-hook-' + sidebar.id\" style=\"height: .3rem; width:70px\"></div>\r\n            }\r\n          </span>\r\n          @if(sidebar.options.position == 'left' || sidebar.options.position == 'right') {\r\n          <span>\r\n            <p-button type=\"button\" (click)=\"closeCallback(sidebar.id)\" rounded=\"true\" outlined=\"true\"\r\n              styleClass=\"h-2rem w-2rem\"><span class=\"material-symbols\">close</span></p-button>\r\n          </span>\r\n          }\r\n        </div>\r\n        <div #content\r\n          [class]=\"{ 'overflow-y-auto': sidebar.options.contentScrollable(), 'p-3': !sidebar.options.noPadding }\">\r\n          <ng-container *ngComponentOutlet=\"sidebar.component;inputs: sidebar.inputs;\" />\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </p-drawer>\r\n</div>\r\n}" }]
+            args: [{ selector: 'sidebar', standalone: true, imports: [DrawerModule, NgComponentOutlet, ButtonModule, HammerModule], template: "@if(sidebarService.sidebars().length > 0) {\r\n<div class=\"sidebar-overlay\">\r\n  @for(sidebar of sidebarService.sidebars(); track sidebar.id) {\r\n  <div [id]=\"'sidebar-' + sidebar.id\" style=\"height: 100%;\" class=\"sidebar-container\">\r\n    <p-drawer [visible]=\"sidebar.visible\" [appendTo]=\"'sidebar-' + sidebar.id\" dismissible=\"false\" closeOnEscape=\"false\"\r\n      [position]=\"sidebar.options.position\" [style]=\"sidebar.options.ngStyle\">\r\n      <ng-template pTemplate=\"headless\">\r\n        <div class=\"flex flex-col h-full\" [id]=\"'sidebar-body-' + sidebar.id\" style=\"touch-action: none;\"\r\n          (touchmove)=\"onPan($event, sidebar.id)\" (touchstart)=\"onPan($event, sidebar.id)\"\r\n          (touchend)=\"onPan($event, sidebar.id)\">\r\n          <div class=\"flex align-items-center justify-center px-3 py-2 flex-shrink-0 md:absolute md:z-100 md:right-0\"\r\n            [id]=\"'sidebar-header-' + sidebar.id\">\r\n            <span [id]=\"'sidebar-header-inner-' + sidebar.id\"\r\n              class=\"inline-flex flex-1 align-items-center justify-center gap-2 \">\r\n              @if (sidebar.options.position=='bottom') {\r\n              <div class=\"inline-block self-center bg-sky-400 rounded-full\" [id]=\"'sidebar-header-hook-' + sidebar.id\"\r\n                style=\"height: .3rem; width:70px\"></div>\r\n              }\r\n            </span>\r\n            @if(sidebar.options.position == 'left' || sidebar.options.position == 'right') {\r\n            <span>\r\n              <a (click)=\"closeCallback(sidebar.id)\" class=\"text-2xl p-2 opacity-40 font-bold\">\r\n                <i class=\"fi fi-rr-cross\"></i>\r\n              </a>\r\n            </span>\r\n            }\r\n          </div>\r\n          <div #content\r\n            [class]=\"{ 'overflow-y-auto': sidebar.options.contentScrollable(), 'p-8': !sidebar.options.noPadding, 'h-full': true }\">\r\n            <ng-container *ngComponentOutlet=\"sidebar.component;inputs: sidebar.inputs;\" />\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </p-drawer>\r\n  </div>\r\n  }\r\n</div>\r\n}", styles: [".sidebar-container{z-index:1000;position:fixed}.sidebar-overlay{position:fixed;inset:0;z-index:999;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}\n"] }]
         }], propDecorators: { contentComponent: [{
                 type: ViewChild,
                 args: ['content', { read: ElementRef }]
@@ -2355,6 +2481,7 @@ class StoriesComponent {
     showSubFooter = input(true, ...(ngDevMode ? [{ debugName: "showSubFooter" }] : []));
     mute = signal(true, ...(ngDevMode ? [{ debugName: "mute" }] : []));
     descriptionOpen = input(...(ngDevMode ? [undefined, { debugName: "descriptionOpen" }] : []));
+    fullScreen = model(false, ...(ngDevMode ? [{ debugName: "fullScreen" }] : []));
     storyChanged = output();
     currentStory = computed(() => this.stories()[this.currentStoryIndex()], ...(ngDevMode ? [{ debugName: "currentStory" }] : []));
     defaultDuration = input(7, ...(ngDevMode ? [{ debugName: "defaultDuration" }] : []));
@@ -2363,6 +2490,7 @@ class StoriesComponent {
     timerInterval = 100;
     timerSubscription;
     paused = model(false, ...(ngDevMode ? [{ debugName: "paused" }] : []));
+    close = output();
     sidebarService = inject(SidebarService);
     videoPlayer;
     constructor() {
@@ -2391,12 +2519,15 @@ class StoriesComponent {
         this.paused.set(false);
         this.currentProgress.set(0);
         this.currentTime = 0;
+        if (this.currentStory().type == 'video') {
+            timer(100).subscribe(() => console.log(this.videoPlayer.nativeElement.duration));
+        }
         this.runTimer();
     }
     runTimer() {
         if (this.timerSubscription)
             this.timerSubscription.unsubscribe();
-        if (this.paused())
+        if (this.paused() || this.stories().length == 1)
             return;
         this.timerSubscription = timer(this.timerInterval).subscribe(() => {
             this.currentTime += this.timerInterval;
@@ -2409,14 +2540,21 @@ class StoriesComponent {
         });
     }
     closeCallback(id) {
-        this.sidebarService.closeSidebar(id);
+        //this.sidebarService.closeSidebar(id);
+    }
+    emitClose() {
+        this.fullScreen.set(false);
+        this.close.emit();
+    }
+    setFullScreen() {
+        this.fullScreen.set(true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: StoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: StoriesComponent, isStandalone: true, selector: "stories", inputs: { stories: { classPropertyName: "stories", publicName: "stories", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, subFooterTemplate: { classPropertyName: "subFooterTemplate", publicName: "subFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, sideTemplate: { classPropertyName: "sideTemplate", publicName: "sideTemplate", isSignal: true, isRequired: false, transformFunction: null }, showSubFooter: { classPropertyName: "showSubFooter", publicName: "showSubFooter", isSignal: true, isRequired: false, transformFunction: null }, descriptionOpen: { classPropertyName: "descriptionOpen", publicName: "descriptionOpen", isSignal: true, isRequired: false, transformFunction: null }, defaultDuration: { classPropertyName: "defaultDuration", publicName: "defaultDuration", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { storyChanged: "storyChanged", paused: "pausedChange" }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"w-full h-full flex align-items-center justify-content-center story-container\">\r\n    <div class=\"story-backdrop\" (click)=\"next()\">\r\n        @if (currentStory()?.type=='image') {\r\n        <img [src]=\"currentStory().src\" />\r\n        } @else if (currentStory()?.type=='video') {\r\n        <video class=\"w-full\">\r\n            <source [src]=\"currentStory().src\" type=\"video/mp4\">\r\n        </video>\r\n        }\r\n    </div>\r\n\r\n\r\n    <div class=\"story-content sm:border-round\">\r\n        \r\n        <div class=\"flex gap-1 story-lines p-2\">\r\n            @for (story of stories(); track story.id; let i = $index) {\r\n                <span>\r\n                    <p-button type=\"button\" (click)=\"closeCallback(story.id)\" icon=\"pi pi-times\" rounded=\"true\"\r\n                        outlined=\"true\" styleClass=\"h-2rem w-2rem\"></p-button>\r\n                </span>\r\n            <div class=\"story-line\">\r\n                <div class=\"story-line-inner\"\r\n                    [style.width]=\"currentStoryIndex() > i ? '100%' : (currentStoryIndex() == i ? this.currentProgress() + '%' : '0')\">\r\n                </div>\r\n            </div>\r\n            }\r\n        </div>\r\n        @if (currentStory()?.type == 'image') {\r\n        <img [src]=\"currentStory().src\" (click)=\"next()\" />\r\n        }\r\n        @if (currentStory()?.type=='video') {\r\n\r\n        <video class=\"w-full h-full\" (canplay)=\"videoPlayer.play()\" (loadedmetadata)=\"videoPlayer.muted = mute()\"\r\n            #videoPlayer autoplay [muted]=\"mute()\" [playsInline]=\"true\" loop (click)=\"next()\">\r\n            <source [src]=\"currentStory().src\" type=\"video/mp4\">\r\n\r\n        </video>\r\n        }\r\n\r\n        <div\r\n            [class]=\"'story-overlay absolute bottom-0 p-3 left-0 w-full flex-column absolute flex align-items-end justify-content-end gap-2 ' + (descriptionOpen() ? 'scrollable' : '')\">\r\n            <div class=\"flex align-items-end min-h-0 w-full gap-2\">\r\n                @if(footerTemplate()){\r\n                <div class=\"story-footer\">\r\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: currentStory() }\"></ng-container>\r\n                </div>\r\n                }\r\n                @if(sideTemplate()){\r\n                <div class=\"story-side\">\r\n                    <div class=\"mb-4\">\r\n                        <i (click)=\"paused.set(!paused())\"\r\n                            [class]=\"'pi side-icon ' + (paused() ? 'pi-play' : 'pi-pause')\"></i>\r\n                    </div>\r\n                    <div class=\"mb-4\">\r\n                        <i (click)=\"mute.set(!mute())\"\r\n                            [class]=\"'pi side-icon ' + (mute() ? 'pi-volume-off' : 'pi-volume-up')\"></i>\r\n                    </div>\r\n                    <ng-container [ngTemplateOutlet]=\"sideTemplate()\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: currentStory() }\"></ng-container>\r\n                </div>\r\n                }\r\n            </div>\r\n            @if(showSubFooter() && subFooterTemplate()){\r\n            <div class=\"story-subfooter w-full text-center\">\r\n                <ng-container [ngTemplateOutlet]=\"subFooterTemplate()\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: currentStory() }\"></ng-container>\r\n            </div>\r\n\r\n            }\r\n\r\n        </div>\r\n    </div>\r\n\r\n\r\n\r\n</div>", styles: [".story-content{background-position:center;background-size:contain;z-index:1;background-repeat:no-repeat;background-color:#000;position:relative;aspect-ratio:9 / 16;height:calc(100% - 5rem);display:flex;overflow:hidden}.story-backdrop{background-color:#000;position:absolute;left:0;top:0;width:100%;height:100%;filter:blur(50px);display:flex;align-items:center;justify-content:center;overflow:hidden}.story-backdrop video,.story-backdrop img{object-fit:cover;width:100%;height:100%}.story-content video,.story-content img{object-fit:contain}.story-content img{width:100%}.story-lines{position:absolute;width:100%}.story-line{background:#fff6;border-radius:6px;height:4px;flex:1}.story-footer{color:#fff;flex:1;min-width:0}p-skeleton .p-skeleton{background-color:#373737cc}.story-overlay{color:#fff;background-image:linear-gradient(transparent,#000c,#000);text-shadow:0 0px 3px rgba(0,0,0);padding-top:50px!important}.story-side{width:50px;text-align:center}.story-side .side-icon{font-size:24px}.story-line-inner{background:#fff;border-radius:6px;height:4px;transition:width .1s}.story-container{background-color:#000}.story-overlay.scrollable{height:90%;padding-top:0}.story-overlay.scrollable .story-footer{height:100%;overflow-y:auto}.story-overlay.scrollable .story-description{height:initial}.story-footer::-webkit-scrollbar{display:none}@media (max-width: 567px){.story-content{width:100%;height:100%;border-radius:0;background-color:transparent;margin:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: StoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: StoriesComponent, isStandalone: true, selector: "stories", inputs: { stories: { classPropertyName: "stories", publicName: "stories", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, subFooterTemplate: { classPropertyName: "subFooterTemplate", publicName: "subFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, sideTemplate: { classPropertyName: "sideTemplate", publicName: "sideTemplate", isSignal: true, isRequired: false, transformFunction: null }, showSubFooter: { classPropertyName: "showSubFooter", publicName: "showSubFooter", isSignal: true, isRequired: false, transformFunction: null }, descriptionOpen: { classPropertyName: "descriptionOpen", publicName: "descriptionOpen", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, defaultDuration: { classPropertyName: "defaultDuration", publicName: "defaultDuration", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fullScreen: "fullScreenChange", storyChanged: "storyChanged", paused: "pausedChange", close: "close" }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"w-full h-full story-container \" [ngClass]=\"{ 'fixed top-0 left-0 z-52': fullScreen(),\r\n    'relative': !fullScreen()\r\n }\">\r\n\r\n    @if(stories().length > 1) {\r\n    <div class=\"flex gap-1 story-lines p-2\">\r\n        @for (story of stories(); track story.id; let i = $index) {\r\n        <span class=\"hidden\">\r\n            <p-button type=\"button\" (click)=\"closeCallback(story.id)\" rounded=\"true\" outlined=\"true\"\r\n                styleClass=\"h-2rem w-2rem\"></p-button>\r\n        </span>\r\n        <div class=\"story-line\">\r\n            <div class=\"story-line-inner\"\r\n                [style.width]=\"currentStoryIndex() > i ? '100%' : (currentStoryIndex() == i ? this.currentProgress() + '%' : '0')\">\r\n            </div>\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n\r\n    <div class=\"story-backdrop z-1\" (click)=\"next()\">\r\n        @if (currentStory()?.type=='image') {\r\n        <img [src]=\"currentStory().src\" />\r\n        } @else if (currentStory()?.type=='video') {\r\n        <video class=\"w-full\">\r\n            <source [src]=\"currentStory().src\" type=\"video/mp4\">\r\n        </video>\r\n        }\r\n    </div>\r\n\r\n\r\n    <div class=\"story-content  sm:border-round\">\r\n\r\n\r\n        @if (currentStory()?.type == 'image') {\r\n        <img [src]=\"currentStory().src\" (click)=\"next()\" />\r\n        }\r\n        @if (currentStory()?.type=='video') {\r\n        <video class=\"w-full h-full\" (canplay)=\"videoPlayer.play()\" (loadedmetadata)=\"videoPlayer.muted = mute()\"\r\n            #videoPlayer autoplay [muted]=\"mute()\" [playsInline]=\"true\" loop (click)=\"next()\">\r\n            <source [src]=\"currentStory().src\" type=\"video/mp4\">\r\n\r\n        </video>\r\n        }\r\n\r\n    </div>\r\n    <div class=\"top-7 right-5 z-3 absolute flex gap-2\">\r\n        @if (currentStory()?.type=='video') {\r\n        <div class=\"w-12 h-12 rounded-full text-center content-center  bg-surface-500/30 text-white\">\r\n            <a (click)=\"mute.set(!mute())\" style=\"color: inherit;\">\r\n                @if(mute()) {\r\n                <i class=\"fi text-2xl fi-rr-volume-mute\"></i>\r\n                }\r\n                @else {\r\n                <i class=\"fi text-2xl fi-rr-volume\"></i>\r\n                }\r\n            </a>\r\n        </div>\r\n        }\r\n\r\n        @if(stories().length > 1) {\r\n        <div class=\"w-12 h-12 rounded-full text-center content-center bg-surface-500/30 text-white\">\r\n            <a (click)=\"paused.set(!paused())\" style=\"color:inherit\">\r\n                @if (paused()) {\r\n                <i class=\"fi fi-rr-play text-2xl\"></i>\r\n                }\r\n                @else {\r\n                <i class=\"fi fi-rr-pause text-2xl\"></i>\r\n                }\r\n\r\n            </a>\r\n        </div>\r\n        @if(fullScreen()) {\r\n        <div class=\"w-12 h-12 rounded-full text-center content-center  bg-surface-500/30 text-white\">\r\n            <a (click)=\"emitClose()\" style=\"color: inherit;\">\r\n                <i class=\"fi text-2xl fi-rr-compress\"></i>\r\n            </a>\r\n        </div>\r\n        }\r\n        @if(!fullScreen()) {\r\n        <div class=\"w-12 h-12 rounded-full text-center content-center  bg-surface-500/30 text-white\">\r\n            <a (click)=\"setFullScreen()\" style=\"color: inherit;\">\r\n                <i class=\"fi text-2xl fi-rr-expand\"></i>\r\n            </a>\r\n        </div>\r\n        }\r\n        }\r\n    </div>\r\n\r\n    <div [class]=\"'story-overlay absolute bottom-0 p-2 left-0 z-2 gap-2 ' + (descriptionOpen() ? 'scrollable' : '')\">\r\n        @if(footerTemplate()){\r\n        <div class=\"story-footer\">\r\n            <ng-container [ngTemplateOutlet]=\"footerTemplate()\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: currentStory() }\"></ng-container>\r\n        </div>\r\n        }\r\n\r\n\r\n\r\n    </div>\r\n\r\n\r\n\r\n</div>", styles: [".story-content{z-index:1;background-repeat:no-repeat;position:absolute;overflow:hidden;object-fit:contain;text-align:center;align-content:center;width:100%;height:100%}.story-container{min-height:300px;overflow:hidden}.story-backdrop{background-color:#000;position:absolute;left:0;top:0;width:100%;height:100%;filter:blur(20px) brightness(60%);text-align:center;align-content:center;overflow:hidden}.story-backdrop video,.story-backdrop img{object-fit:cover;display:inline-block;width:100%;height:100%}.story-content video,.story-content img{object-fit:contain;display:inline-block;width:100%;height:100%}.story-content img{width:100%}.story-lines{position:absolute;width:100%;top:0;z-index:10}.story-line{background:#fff6;border-radius:6px;height:4px;flex:1}.story-footer{color:#fff;flex:1;min-width:0}p-skeleton .p-skeleton{background-color:#373737cc}.story-overlay{color:#fff;text-shadow:0 0px 3px rgba(0,0,0)}.story-side{text-align:center}.story-side .side-icon{font-size:24px}.story-line-inner{background:#fff;border-radius:6px;height:4px;transition:width .1s}.story-container{background-color:#000}.story-overlay.scrollable{height:90%;padding-top:0}.story-overlay.scrollable .story-footer{height:100%;overflow-y:auto}.story-overlay.scrollable .story-description{height:initial}.story-footer::-webkit-scrollbar{display:none}@media (max-width: 567px){.story-content{width:100%;height:100%;border-radius:0;background-color:transparent;margin:0}}.story-controls{top:10px;right:10px;position:absolute;z-index:3}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: StoriesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: StoriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stories', standalone: true, imports: [JsonPipe, NgTemplateOutlet, ButtonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"w-full h-full flex align-items-center justify-content-center story-container\">\r\n    <div class=\"story-backdrop\" (click)=\"next()\">\r\n        @if (currentStory()?.type=='image') {\r\n        <img [src]=\"currentStory().src\" />\r\n        } @else if (currentStory()?.type=='video') {\r\n        <video class=\"w-full\">\r\n            <source [src]=\"currentStory().src\" type=\"video/mp4\">\r\n        </video>\r\n        }\r\n    </div>\r\n\r\n\r\n    <div class=\"story-content sm:border-round\">\r\n        \r\n        <div class=\"flex gap-1 story-lines p-2\">\r\n            @for (story of stories(); track story.id; let i = $index) {\r\n                <span>\r\n                    <p-button type=\"button\" (click)=\"closeCallback(story.id)\" icon=\"pi pi-times\" rounded=\"true\"\r\n                        outlined=\"true\" styleClass=\"h-2rem w-2rem\"></p-button>\r\n                </span>\r\n            <div class=\"story-line\">\r\n                <div class=\"story-line-inner\"\r\n                    [style.width]=\"currentStoryIndex() > i ? '100%' : (currentStoryIndex() == i ? this.currentProgress() + '%' : '0')\">\r\n                </div>\r\n            </div>\r\n            }\r\n        </div>\r\n        @if (currentStory()?.type == 'image') {\r\n        <img [src]=\"currentStory().src\" (click)=\"next()\" />\r\n        }\r\n        @if (currentStory()?.type=='video') {\r\n\r\n        <video class=\"w-full h-full\" (canplay)=\"videoPlayer.play()\" (loadedmetadata)=\"videoPlayer.muted = mute()\"\r\n            #videoPlayer autoplay [muted]=\"mute()\" [playsInline]=\"true\" loop (click)=\"next()\">\r\n            <source [src]=\"currentStory().src\" type=\"video/mp4\">\r\n\r\n        </video>\r\n        }\r\n\r\n        <div\r\n            [class]=\"'story-overlay absolute bottom-0 p-3 left-0 w-full flex-column absolute flex align-items-end justify-content-end gap-2 ' + (descriptionOpen() ? 'scrollable' : '')\">\r\n            <div class=\"flex align-items-end min-h-0 w-full gap-2\">\r\n                @if(footerTemplate()){\r\n                <div class=\"story-footer\">\r\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: currentStory() }\"></ng-container>\r\n                </div>\r\n                }\r\n                @if(sideTemplate()){\r\n                <div class=\"story-side\">\r\n                    <div class=\"mb-4\">\r\n                        <i (click)=\"paused.set(!paused())\"\r\n                            [class]=\"'pi side-icon ' + (paused() ? 'pi-play' : 'pi-pause')\"></i>\r\n                    </div>\r\n                    <div class=\"mb-4\">\r\n                        <i (click)=\"mute.set(!mute())\"\r\n                            [class]=\"'pi side-icon ' + (mute() ? 'pi-volume-off' : 'pi-volume-up')\"></i>\r\n                    </div>\r\n                    <ng-container [ngTemplateOutlet]=\"sideTemplate()\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: currentStory() }\"></ng-container>\r\n                </div>\r\n                }\r\n            </div>\r\n            @if(showSubFooter() && subFooterTemplate()){\r\n            <div class=\"story-subfooter w-full text-center\">\r\n                <ng-container [ngTemplateOutlet]=\"subFooterTemplate()\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: currentStory() }\"></ng-container>\r\n            </div>\r\n\r\n            }\r\n\r\n        </div>\r\n    </div>\r\n\r\n\r\n\r\n</div>", styles: [".story-content{background-position:center;background-size:contain;z-index:1;background-repeat:no-repeat;background-color:#000;position:relative;aspect-ratio:9 / 16;height:calc(100% - 5rem);display:flex;overflow:hidden}.story-backdrop{background-color:#000;position:absolute;left:0;top:0;width:100%;height:100%;filter:blur(50px);display:flex;align-items:center;justify-content:center;overflow:hidden}.story-backdrop video,.story-backdrop img{object-fit:cover;width:100%;height:100%}.story-content video,.story-content img{object-fit:contain}.story-content img{width:100%}.story-lines{position:absolute;width:100%}.story-line{background:#fff6;border-radius:6px;height:4px;flex:1}.story-footer{color:#fff;flex:1;min-width:0}p-skeleton .p-skeleton{background-color:#373737cc}.story-overlay{color:#fff;background-image:linear-gradient(transparent,#000c,#000);text-shadow:0 0px 3px rgba(0,0,0);padding-top:50px!important}.story-side{width:50px;text-align:center}.story-side .side-icon{font-size:24px}.story-line-inner{background:#fff;border-radius:6px;height:4px;transition:width .1s}.story-container{background-color:#000}.story-overlay.scrollable{height:90%;padding-top:0}.story-overlay.scrollable .story-footer{height:100%;overflow-y:auto}.story-overlay.scrollable .story-description{height:initial}.story-footer::-webkit-scrollbar{display:none}@media (max-width: 567px){.story-content{width:100%;height:100%;border-radius:0;background-color:transparent;margin:0}}\n"] }]
+            args: [{ selector: 'stories', standalone: true, imports: [CommonModule, NgTemplateOutlet, ButtonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"w-full h-full story-container \" [ngClass]=\"{ 'fixed top-0 left-0 z-52': fullScreen(),\r\n    'relative': !fullScreen()\r\n }\">\r\n\r\n    @if(stories().length > 1) {\r\n    <div class=\"flex gap-1 story-lines p-2\">\r\n        @for (story of stories(); track story.id; let i = $index) {\r\n        <span class=\"hidden\">\r\n            <p-button type=\"button\" (click)=\"closeCallback(story.id)\" rounded=\"true\" outlined=\"true\"\r\n                styleClass=\"h-2rem w-2rem\"></p-button>\r\n        </span>\r\n        <div class=\"story-line\">\r\n            <div class=\"story-line-inner\"\r\n                [style.width]=\"currentStoryIndex() > i ? '100%' : (currentStoryIndex() == i ? this.currentProgress() + '%' : '0')\">\r\n            </div>\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n\r\n    <div class=\"story-backdrop z-1\" (click)=\"next()\">\r\n        @if (currentStory()?.type=='image') {\r\n        <img [src]=\"currentStory().src\" />\r\n        } @else if (currentStory()?.type=='video') {\r\n        <video class=\"w-full\">\r\n            <source [src]=\"currentStory().src\" type=\"video/mp4\">\r\n        </video>\r\n        }\r\n    </div>\r\n\r\n\r\n    <div class=\"story-content  sm:border-round\">\r\n\r\n\r\n        @if (currentStory()?.type == 'image') {\r\n        <img [src]=\"currentStory().src\" (click)=\"next()\" />\r\n        }\r\n        @if (currentStory()?.type=='video') {\r\n        <video class=\"w-full h-full\" (canplay)=\"videoPlayer.play()\" (loadedmetadata)=\"videoPlayer.muted = mute()\"\r\n            #videoPlayer autoplay [muted]=\"mute()\" [playsInline]=\"true\" loop (click)=\"next()\">\r\n            <source [src]=\"currentStory().src\" type=\"video/mp4\">\r\n\r\n        </video>\r\n        }\r\n\r\n    </div>\r\n    <div class=\"top-7 right-5 z-3 absolute flex gap-2\">\r\n        @if (currentStory()?.type=='video') {\r\n        <div class=\"w-12 h-12 rounded-full text-center content-center  bg-surface-500/30 text-white\">\r\n            <a (click)=\"mute.set(!mute())\" style=\"color: inherit;\">\r\n                @if(mute()) {\r\n                <i class=\"fi text-2xl fi-rr-volume-mute\"></i>\r\n                }\r\n                @else {\r\n                <i class=\"fi text-2xl fi-rr-volume\"></i>\r\n                }\r\n            </a>\r\n        </div>\r\n        }\r\n\r\n        @if(stories().length > 1) {\r\n        <div class=\"w-12 h-12 rounded-full text-center content-center bg-surface-500/30 text-white\">\r\n            <a (click)=\"paused.set(!paused())\" style=\"color:inherit\">\r\n                @if (paused()) {\r\n                <i class=\"fi fi-rr-play text-2xl\"></i>\r\n                }\r\n                @else {\r\n                <i class=\"fi fi-rr-pause text-2xl\"></i>\r\n                }\r\n\r\n            </a>\r\n        </div>\r\n        @if(fullScreen()) {\r\n        <div class=\"w-12 h-12 rounded-full text-center content-center  bg-surface-500/30 text-white\">\r\n            <a (click)=\"emitClose()\" style=\"color: inherit;\">\r\n                <i class=\"fi text-2xl fi-rr-compress\"></i>\r\n            </a>\r\n        </div>\r\n        }\r\n        @if(!fullScreen()) {\r\n        <div class=\"w-12 h-12 rounded-full text-center content-center  bg-surface-500/30 text-white\">\r\n            <a (click)=\"setFullScreen()\" style=\"color: inherit;\">\r\n                <i class=\"fi text-2xl fi-rr-expand\"></i>\r\n            </a>\r\n        </div>\r\n        }\r\n        }\r\n    </div>\r\n\r\n    <div [class]=\"'story-overlay absolute bottom-0 p-2 left-0 z-2 gap-2 ' + (descriptionOpen() ? 'scrollable' : '')\">\r\n        @if(footerTemplate()){\r\n        <div class=\"story-footer\">\r\n            <ng-container [ngTemplateOutlet]=\"footerTemplate()\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: currentStory() }\"></ng-container>\r\n        </div>\r\n        }\r\n\r\n\r\n\r\n    </div>\r\n\r\n\r\n\r\n</div>", styles: [".story-content{z-index:1;background-repeat:no-repeat;position:absolute;overflow:hidden;object-fit:contain;text-align:center;align-content:center;width:100%;height:100%}.story-container{min-height:300px;overflow:hidden}.story-backdrop{background-color:#000;position:absolute;left:0;top:0;width:100%;height:100%;filter:blur(20px) brightness(60%);text-align:center;align-content:center;overflow:hidden}.story-backdrop video,.story-backdrop img{object-fit:cover;display:inline-block;width:100%;height:100%}.story-content video,.story-content img{object-fit:contain;display:inline-block;width:100%;height:100%}.story-content img{width:100%}.story-lines{position:absolute;width:100%;top:0;z-index:10}.story-line{background:#fff6;border-radius:6px;height:4px;flex:1}.story-footer{color:#fff;flex:1;min-width:0}p-skeleton .p-skeleton{background-color:#373737cc}.story-overlay{color:#fff;text-shadow:0 0px 3px rgba(0,0,0)}.story-side{text-align:center}.story-side .side-icon{font-size:24px}.story-line-inner{background:#fff;border-radius:6px;height:4px;transition:width .1s}.story-container{background-color:#000}.story-overlay.scrollable{height:90%;padding-top:0}.story-overlay.scrollable .story-footer{height:100%;overflow-y:auto}.story-overlay.scrollable .story-description{height:initial}.story-footer::-webkit-scrollbar{display:none}@media (max-width: 567px){.story-content{width:100%;height:100%;border-radius:0;background-color:transparent;margin:0}}.story-controls{top:10px;right:10px;position:absolute;z-index:3}\n"] }]
         }], ctorParameters: () => [], propDecorators: { videoPlayer: [{
                 type: ViewChild,
                 args: ['videoPlayer', { read: ElementRef }]
@@ -2477,10 +2615,10 @@ class QuestionsComponent {
     deleteQuestion(item) {
         this.registerQuestions.update(q => q.splice(q.indexOf(item), 1));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: QuestionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: QuestionsComponent, isStandalone: true, selector: "questions", inputs: { imageRoot: { classPropertyName: "imageRoot", publicName: "imageRoot", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, registerQuestions: { classPropertyName: "registerQuestions", publicName: "registerQuestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { registerQuestions: "registerQuestionsChange" }, ngImport: i0, template: "<div>\r\n  @for(item of orderedRegisterQuestions; track item){\r\n  <div>\r\n    <div class=\"form-group\">\r\n      <label>\r\n        <translate name=\"company-questions.question\"></translate>\r\n      </label>\r\n      <input type=\"text\" [(ngModel)]=\"item.name\" class=\"form-control\" name=\"{{item.id}}\" required />\r\n    </div>\r\n    <div class=\"form-group\">\r\n      <label>\r\n        <translate name=\"company-questions.type\"></translate>\r\n      </label>\r\n\r\n      <select [(ngModel)]=\"item.inputType\" class=\"form-control\">\r\n        <option>TEXTBOX</option>\r\n        <option>TEXTAREA</option>\r\n        <option>CHOICE</option>\r\n        @if(has(item, 'DATEOFBIRTH')){\r\n        <option>DATE</option>\r\n        }\r\n\r\n        @if(has(item, 'IMAGE')){\r\n        <option>IMAGE</option>\r\n        }\r\n      </select>\r\n    </div>\r\n    <div class=\"form-group\">\r\n      <label>\r\n        <translate name=\"company-questions.value-type\"></translate>\r\n      </label>\r\n\r\n      <select [(ngModel)]=\"item.type\" class=\"form-control\">\r\n        @if(has(item, 'FIRSTNAME')){\r\n        <option>FIRSTNAME</option>\r\n        }\r\n        @if(has(item, 'LASTNAME')){\r\n        <option>LASTNAME</option>\r\n        }\r\n        @if(has(item, 'EMAIL')){\r\n        <option>EMAIL</option>\r\n        }\r\n        @if(has(item, 'PHONE')){\r\n        <option>PHONE</option>\r\n        }\r\n        @if(has(item, 'CNP')){\r\n        <option>CNP</option>\r\n        }\r\n        @if(has(item, 'SEX')){\r\n        <option>SEX</option>\r\n        }\r\n        @if(has(item, 'COUNTRY')){\r\n        <option>COUNTRY</option>\r\n        }\r\n        @if(has(item, 'CITY')){\r\n        <option>CITY</option>\r\n        }\r\n        @if(has(item, 'DATEOFBIRTH')){\r\n        <option>DATEOFBIRTH</option>\r\n        }\r\n        @if(has(item, 'GUARDIANNAME')){\r\n        <option>GUARDIANNAME</option>\r\n        }\r\n        @if(has(item, 'GUARDIANPHONE')){\r\n        <option>GUARDIANPHONE</option>\r\n        }\r\n        @if(has(item, 'IMAGE')){\r\n        <option>IMAGE</option>\r\n        }\r\n        <option>OTHER</option>\r\n      </select>\r\n    </div>\r\n    @if(item.inputType=='CHOICE'){\r\n    <div class=\"form-group\">\r\n      <label>\r\n        <translate name=\"company-questions.choices\"></translate>\r\n      </label>\r\n      <textarea [(ngModel)]=\"item.choices\" class=\"form-control\" #choices=\"ngModel\" name=\"choices\" rows=\"5\"></textarea>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"form-group\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n      <label>\r\n        <translate name=\"company-questions.priority\"></translate>\r\n      </label>\r\n      <input type=\"number\" [(ngModel)]=\"item.priority\" class=\"form-control\" style=\"width:100px; margin-left: 5px;\" />\r\n\r\n      <p-checkbox class=\"pr-3\" [(ngModel)]=\"item.required\" [binary]=\"true\" name=\"is_required\" [inputId]=\"item.required\">\r\n        <translate name=\"questions.is-required\">\r\n        </translate>\r\n      </p-checkbox>\r\n\r\n      <!-- <icheck name=\"is_required\" style=\"margin-left: 10px;\" [(ngModel)]=\"item.required\"><translate name=\"questions.is-required\">\r\n      </translate>\r\n    </icheck> -->\r\n\r\n      <a class=\"btn btn-warning btn-sm\" style=\"margin-left: auto;\" (click)=\"deleteQuestion(item)\"><i\r\n          class=\"pi pi-trash\"></i></a>\r\n\r\n    </div>\r\n    <hr />\r\n  </div>\r\n}\r\n  <button class=\"btn btn-primary\" (click)=\"addNew()\"><i class=\"pi pi-plus\"></i></button>\r\n</div>\r\n<!-- <div *ngIf=\"mode=='answer'\">\r\n  <div class=\"form-group text-center\">\r\n    <div [style.backgroundImage]=\"imageUrl\" *ngIf=\"imageItem\" class=\"image-upload\"></div>\r\n    <h3 *ngIf=\"firstNameItem || lastNameItem\">{{firstNameItem?.answer}} {{lastNameItem?.answer}}</h3>\r\n  </div>\r\n  <div class=\"form-group extra-fields\" *ngFor=\"let item of extraFields\">\r\n    <label>{{item.name}}</label>\r\n    \r\n    <div>{{item.answer}}</div>\r\n  </div>\r\n</div> -->", styles: [".image-upload{width:200px;height:200px;background-size:cover;background-position:center center;display:inline-block}.extra-fields{background-color:#fff;border-bottom:solid 1px #ccc;padding:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TranslationComponent, selector: "translate", inputs: ["name", "replacements"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: CardModule }, { kind: "ngmodule", type: RippleModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i2$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: QuestionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: QuestionsComponent, isStandalone: true, selector: "questions", inputs: { imageRoot: { classPropertyName: "imageRoot", publicName: "imageRoot", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, registerQuestions: { classPropertyName: "registerQuestions", publicName: "registerQuestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { registerQuestions: "registerQuestionsChange" }, ngImport: i0, template: "<div>\r\n  @for(item of orderedRegisterQuestions; track item){\r\n  <div>\r\n    <div class=\"form-group\">\r\n      <label>\r\n        <translate name=\"company-questions.question\"></translate>\r\n      </label>\r\n      <input type=\"text\" [(ngModel)]=\"item.name\" class=\"form-control\" name=\"{{item.id}}\" required />\r\n    </div>\r\n    <div class=\"form-group\">\r\n      <label>\r\n        <translate name=\"company-questions.type\"></translate>\r\n      </label>\r\n\r\n      <select [(ngModel)]=\"item.inputType\" class=\"form-control\">\r\n        <option>TEXTBOX</option>\r\n        <option>TEXTAREA</option>\r\n        <option>CHOICE</option>\r\n        @if(has(item, 'DATEOFBIRTH')){\r\n        <option>DATE</option>\r\n        }\r\n\r\n        @if(has(item, 'IMAGE')){\r\n        <option>IMAGE</option>\r\n        }\r\n      </select>\r\n    </div>\r\n    <div class=\"form-group\">\r\n      <label>\r\n        <translate name=\"company-questions.value-type\"></translate>\r\n      </label>\r\n\r\n      <select [(ngModel)]=\"item.type\" class=\"form-control\">\r\n        @if(has(item, 'FIRSTNAME')){\r\n        <option>FIRSTNAME</option>\r\n        }\r\n        @if(has(item, 'LASTNAME')){\r\n        <option>LASTNAME</option>\r\n        }\r\n        @if(has(item, 'EMAIL')){\r\n        <option>EMAIL</option>\r\n        }\r\n        @if(has(item, 'PHONE')){\r\n        <option>PHONE</option>\r\n        }\r\n        @if(has(item, 'CNP')){\r\n        <option>CNP</option>\r\n        }\r\n        @if(has(item, 'SEX')){\r\n        <option>SEX</option>\r\n        }\r\n        @if(has(item, 'COUNTRY')){\r\n        <option>COUNTRY</option>\r\n        }\r\n        @if(has(item, 'CITY')){\r\n        <option>CITY</option>\r\n        }\r\n        @if(has(item, 'DATEOFBIRTH')){\r\n        <option>DATEOFBIRTH</option>\r\n        }\r\n        @if(has(item, 'GUARDIANNAME')){\r\n        <option>GUARDIANNAME</option>\r\n        }\r\n        @if(has(item, 'GUARDIANPHONE')){\r\n        <option>GUARDIANPHONE</option>\r\n        }\r\n        @if(has(item, 'IMAGE')){\r\n        <option>IMAGE</option>\r\n        }\r\n        <option>OTHER</option>\r\n      </select>\r\n    </div>\r\n    @if(item.inputType=='CHOICE'){\r\n    <div class=\"form-group\">\r\n      <label>\r\n        <translate name=\"company-questions.choices\"></translate>\r\n      </label>\r\n      <textarea [(ngModel)]=\"item.choices\" class=\"form-control\" #choices=\"ngModel\" name=\"choices\" rows=\"5\"></textarea>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"form-group\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n      <label>\r\n        <translate name=\"company-questions.priority\"></translate>\r\n      </label>\r\n      <input type=\"number\" [(ngModel)]=\"item.priority\" class=\"form-control\" style=\"width:100px; margin-left: 5px;\" />\r\n\r\n      <p-checkbox class=\"pr-3\" [(ngModel)]=\"item.required\" [binary]=\"true\" name=\"is_required\" [inputId]=\"item.required\">\r\n        <translate name=\"questions.is-required\">\r\n        </translate>\r\n      </p-checkbox>\r\n\r\n      <!-- <icheck name=\"is_required\" style=\"margin-left: 10px;\" [(ngModel)]=\"item.required\"><translate name=\"questions.is-required\">\r\n      </translate>\r\n    </icheck> -->\r\n\r\n      <a class=\"btn btn-warning btn-sm\" style=\"margin-left: auto;\" (click)=\"deleteQuestion(item)\"><i\r\n          class=\"pi pi-trash\"></i></a>\r\n\r\n    </div>\r\n    <hr />\r\n  </div>\r\n}\r\n  <button class=\"btn btn-primary\" (click)=\"addNew()\"><i class=\"pi pi-plus\"></i></button>\r\n</div>\r\n<!-- <div *ngIf=\"mode=='answer'\">\r\n  <div class=\"form-group text-center\">\r\n    <div [style.backgroundImage]=\"imageUrl\" *ngIf=\"imageItem\" class=\"image-upload\"></div>\r\n    <h3 *ngIf=\"firstNameItem || lastNameItem\">{{firstNameItem?.answer}} {{lastNameItem?.answer}}</h3>\r\n  </div>\r\n  <div class=\"form-group extra-fields\" *ngFor=\"let item of extraFields\">\r\n    <label>{{item.name}}</label>\r\n    \r\n    <div>{{item.answer}}</div>\r\n  </div>\r\n</div> -->", styles: [".image-upload{width:200px;height:200px;background-size:cover;background-position:center center;display:inline-block}.extra-fields{background-color:#fff;border-bottom:solid 1px #ccc;padding:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TranslationComponent, selector: "translate", inputs: ["name", "replacements"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: CardModule }, { kind: "ngmodule", type: RippleModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i3$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: QuestionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: QuestionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'questions', standalone: true, imports: [
                         CommonModule,
@@ -2546,13 +2684,13 @@ class LoginComponent {
         //   window.login.userLoggedIn(this.userService.currentUser);
         // });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LoginComponent, deps: [{ token: UserAccountService }, { token: GlobalService }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: LoginComponent, isStandalone: true, selector: "app-login", ngImport: i0, template: "<!-- <app-loader></app-loader> -->\r\n<div style=\"max-width:400px; width:90%; margin: 0px auto\">\r\n  <payvent-login-form></payvent-login-form>\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: LoginFormComponent, selector: "payvent-login-form", inputs: ["context", "allowAccountCreation", "tokenType", "clientId", "type"], outputs: ["contextChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LoginComponent, deps: [{ token: UserAccountService }, { token: GlobalService }, { token: i2$4.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: LoginComponent, isStandalone: true, selector: "app-login", ngImport: i0, template: "<!-- <app-loader></app-loader> -->\r\n<div style=\"max-width:400px; width:90%; margin: 0px auto\">\r\n  <payvent-login-form></payvent-login-form>\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: LoginFormComponent, selector: "payvent-login-form", inputs: ["tokenType", "clientId", "type"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LoginComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-login', standalone: true, imports: [LoginFormComponent], template: "<!-- <app-loader></app-loader> -->\r\n<div style=\"max-width:400px; width:90%; margin: 0px auto\">\r\n  <payvent-login-form></payvent-login-form>\r\n</div>" }]
-        }], ctorParameters: () => [{ type: UserAccountService }, { type: GlobalService }, { type: i1.Router }] });
+        }], ctorParameters: () => [{ type: UserAccountService }, { type: GlobalService }, { type: i2$4.Router }] });
 
 // export * from './loading-button/loading-button.component';
 // export * from './location-select/location-select.component';
@@ -2560,27 +2698,161 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
 // export * from './notification-list/notification-list.component';
 // export * from './questions/questions.component';
 
-class Misc {
-    hexToRgbA(hex, opacity) {
-        var c;
-        if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
-            c = hex.substring(1).split('');
-            if (c.length == 3) {
-                c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+class DragScrollDirective {
+    _el = inject((ElementRef));
+    _renderer = inject(Renderer2);
+    _isDragging = signal(false, ...(ngDevMode ? [{ debugName: "_isDragging" }] : []));
+    _startY = signal(0, ...(ngDevMode ? [{ debugName: "_startY" }] : []));
+    _scrollTop = signal(0, ...(ngDevMode ? [{ debugName: "_scrollTop" }] : []));
+    _startX = signal(0, ...(ngDevMode ? [{ debugName: "_startX" }] : []));
+    _scrollLeft = signal(0, ...(ngDevMode ? [{ debugName: "_scrollLeft" }] : []));
+    // Binds methods to maintain the correct context
+    _boundMouseMove = this.onMouseMove.bind(this);
+    _boundMouseUp = this.onMouseUp.bind(this);
+    onScroll = output();
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    overflowHidden = input(false, ...(ngDevMode ? [{ debugName: "overflowHidden" }] : []));
+    coord = model({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "coord" }] : []));
+    constructor() {
+        // Sets basic styles for the element
+        this._renderer.setStyle(this._el.nativeElement, 'user-select', 'none');
+        this._renderer.setStyle(this._el.nativeElement, 'overflow', 'auto');
+        // Updates the position when the coord signal changes
+        effect(() => {
+            this.setPosition(this.coord().x, this.coord().y);
+        });
+        // Updates the cursor style
+        afterEveryRender(() => {
+            this._renderer.setStyle(this._el.nativeElement, 'cursor', this.disabled() ? 'default' : 'move');
+        });
+        // apply inital position
+        afterNextRender(() => {
+            this.setPosition(this.coord().x, this.coord().y);
+            if (this.overflowHidden()) {
+                this._renderer.setStyle(this._el.nativeElement, 'scrollbar-width', 'none');
+                this._renderer.setStyle(this._el.nativeElement, '-ms-overflow-style', 'none');
+                this._renderer.setStyle(this._el.nativeElement, '::-webkit-scrollbar', 'display: none');
             }
-            c = '0x' + c.join('');
-            return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + opacity + ')';
+        });
+    }
+    setPosition(x, y) {
+        this._renderer.setProperty(this._el.nativeElement, 'scrollLeft', x);
+        this._renderer.setProperty(this._el.nativeElement, 'scrollTop', y);
+    }
+    onMouseDown(e) {
+        if (this.disabled())
+            return;
+        // Check if click target is a button or inside a button
+        const targetElement = e.target;
+        if (targetElement.tagName.toLowerCase() === 'button' || targetElement.closest('button')) {
+            return;
         }
-        throw new Error('Bad Hex');
+        this._isDragging.set(true);
+        // Calculates initial positions
+        const rect = this._el.nativeElement.getBoundingClientRect();
+        this._startY.set(e.clientY - rect.top);
+        this._startX.set(e.clientX - rect.left);
+        this._scrollTop.set(this._el.nativeElement.scrollTop);
+        this._scrollLeft.set(this._el.nativeElement.scrollLeft);
+        // Changes the cursor to grab
+        this._renderer.setStyle(this._el.nativeElement, 'cursor', 'grab');
+        // Adds global listeners
+        document.addEventListener('mousemove', this._boundMouseMove);
+        document.addEventListener('mouseup', this._boundMouseUp);
+        // Prevents default behaviors
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    onScrollMove(e) {
+        this.coord.set({ x: this._el.nativeElement.scrollLeft, y: this._el.nativeElement.scrollTop });
+        this.onScroll.emit(this.coord());
+    }
+    onSelectStart(e) {
+        if (this.disabled())
+            return;
+        // Check if target is a button or inside a button
+        const targetElement = e.target;
+        if (targetElement.tagName.toLowerCase() === 'button' || targetElement.closest('button')) {
+            return;
+        }
+        // Prevents text selection
+        e.preventDefault();
+    }
+    onMouseMove(e) {
+        if (!this._isDragging)
+            return;
+        e.preventDefault();
+        const rect = this._el.nativeElement.getBoundingClientRect();
+        const y = e.clientY - rect.top;
+        const x = e.clientX - rect.left;
+        const deltaY = y - this._startY();
+        const deltaX = x - this._startX();
+        // Applies scrolling based on mouse movement
+        this._el.nativeElement.scrollTop = this._scrollTop() - deltaY;
+        this._el.nativeElement.scrollLeft = this._scrollLeft() - deltaX;
+    }
+    onMouseUp() {
+        if (this.disabled())
+            return;
+        this._isDragging.set(false);
+        // Reset the cursor
+        this._renderer.setStyle(this._el.nativeElement, 'cursor', 'move');
+        // Remove global listeners
+        this.removeDragListeners();
     }
+    removeDragListeners() {
+        document.removeEventListener('mousemove', this._boundMouseMove);
+        document.removeEventListener('mouseup', this._boundMouseUp);
+    }
+    ngOnDestroy() {
+        this.removeDragListeners();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DragScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.2", type: DragScrollDirective, isStandalone: true, selector: "[dragscroll]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, overflowHidden: { classPropertyName: "overflowHidden", publicName: "overflowHidden", isSignal: true, isRequired: false, transformFunction: null }, coord: { classPropertyName: "coord", publicName: "coord", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onScroll: "onScroll", coord: "coordChange" }, host: { listeners: { "mousedown": "onMouseDown($event)", "scroll": "onScrollMove($event)", "selectstart": "onSelectStart($event)" } }, ngImport: i0 });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DragScrollDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[dragscroll]'
+                }]
+        }], ctorParameters: () => [], propDecorators: { onMouseDown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }], onScrollMove: [{
+                type: HostListener,
+                args: ['scroll', ['$event']]
+            }], onSelectStart: [{
+                type: HostListener,
+                args: ['selectstart', ['$event']]
+            }] } });
 
-class StoryContext {
-    id;
-    type;
-    src;
-    completion = signal(0, ...(ngDevMode ? [{ debugName: "completion" }] : []));
+class ViewTransitionDirective {
+    clicked = signal(false, ...(ngDevMode ? [{ debugName: "clicked" }] : []));
+    onClicked() {
+        this.clicked.set(true);
+    }
+    static = input(false, ...(ngDevMode ? [{ debugName: "static" }] : []));
+    viewTranistionService = inject(ViewTransitionService);
+    name = input('', ...(ngDevMode ? [{ debugName: "name", alias: 'viewTransition' }] : [{ alias: 'viewTransition' }]));
+    id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+    viewTransitionName = computed(() => {
+        return this.clicked() || this.static() ? this.name() : 'none';
+    }, ...(ngDevMode ? [{ debugName: "viewTransitionName" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ViewTransitionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.2", type: ViewTransitionDirective, isStandalone: true, selector: "[viewTransition]", inputs: { static: { classPropertyName: "static", publicName: "static", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "viewTransition", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClicked()" }, properties: { "style.view-transition-name": "viewTransitionName()" } }, ngImport: i0 });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ViewTransitionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[viewTransition]',
+                    standalone: true,
+                    host: { '[style.view-transition-name]': 'viewTransitionName()' },
+                }]
+        }], propDecorators: { onClicked: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
 
 /*
  * Public API Surface of ngx-payvent-shared
@@ -2591,5 +2863,5 @@ class StoryContext {
  * Generated bundle index. Do not edit.
  */
 
-export { ApplicationSharedService, CookieBarComponent, FlowAppConfig, FlowCookieService, FlowHttpClient, GlobalService, InternationalPhoneComponent, LoginComponent, LoginFormComponent, Misc, ModalService, NotificationDropdownComponent, NotificationListComponent, NotificationToasterComponent, QrScannerComponent, QuestionsComponent, SidebarComponent, SidebarContext, SidebarService, SignalrNotificationService, SortingPagingCriteria, StoriesComponent, StoryContext, SumPipe, TranslationComponent, TranslationPipe, TranslationSharedService, UserAccountService };
+export { AppSettingsLoader, AppSettingsLoaderService, ApplicationSharedService, CookieBarComponent, CountryProvinceCityComponent, DragScrollDirective, FlowAppConfig, FlowCookieService, FlowHttpClient, GlobalService, InternationalPhoneComponent, LoginComponent, LoginFormComponent, Misc, ModalService, NotificationDropdownComponent, NotificationListComponent, NotificationToasterComponent, QrScannerComponent, QuestionsComponent, SidebarComponent, SidebarContext, SidebarService, SignalrNotificationService, SortingPagingCriteria, StoriesComponent, StoryContext, SumPipe, TranslationComponent, TranslationPipe, TranslationSharedService, UserAccountService, ViewTransitionDirective, ViewTransitionService };
 //# sourceMappingURL=ngx-payvent-shared.mjs.map