@yomotech/view-toolkit 0.0.9 → 0.0.12

package/fesm2022/yomotech-view-toolkit.mjs

@@ -129,6 +129,191 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                 type: Input
             }] } });
 
+class Couchdb {
+    utilityService;
+    couchDbBaseUrl = 'https://couchdb.yomotech.de';
+    constructor(utilityService) {
+        this.utilityService = utilityService;
+    }
+    async getTenantDatabases(tenantKey) {
+        if (!tenantKey || !tenantKey.trim()) {
+            throw new Error('Missing tenantKey');
+        }
+        const response = await fetch(`https://couchdb.yomotech.de/tenant-dbs`, {
+            method: 'GET',
+            headers: {
+                Accept: 'application/json',
+                'X-Tenant-Key': tenantKey.trim(),
+            },
+        });
+        const data = await this.parseJsonOrText(response);
+        if (!response.ok) {
+            throw new Error(`GET /tenant-dbs -> ${response.status} ${this.stringifyErrorDetails(data)}`);
+        }
+        return data;
+    }
+    async parseJsonOrText(response) {
+        const rawText = await response.text();
+        if (!rawText)
+            return null;
+        try {
+            return JSON.parse(rawText);
+        }
+        catch {
+            return rawText;
+        }
+    }
+    stringifyErrorDetails(data) {
+        if (typeof data === 'string')
+            return data;
+        try {
+            return JSON.stringify(data);
+        }
+        catch {
+            return 'Unknown error';
+        }
+    }
+    async getFileContentFromCouchDb(couchDbName, filePath) {
+        try {
+            const dbName = couchDbName;
+            const docId = filePath?.trim();
+            if (!docId) {
+                console.error('Missing file path');
+                return null;
+            }
+            const response = await fetch(this.getDocumentUrl(dbName, docId), {
+                method: 'GET',
+                headers: await this.getReadHeaders(),
+            });
+            const doc = await this.parseJsonOrText(response);
+            if (!response.ok) {
+                console.error(`Failed to fetch file "${docId}" from "${dbName}": ${response.status}`, doc);
+                return null;
+            }
+            if (!doc?.data) {
+                console.error(`Document "${docId}" does not contain file data`);
+                return null;
+            }
+            // do not decode images as utf8 text
+            if (this.isImageFile(doc.name || doc.path || docId, doc.contentType)) {
+                return {
+                    type: 'base64file',
+                    mimeType: doc.contentType || this.getImageMimeType(docId),
+                    base64: doc.data,
+                };
+            }
+            const decodedContent = this.fromBase64(doc.data);
+            if (this.isJsonFile(doc.name || doc.path || docId, doc.contentType)) {
+                try {
+                    return JSON.parse(decodedContent);
+                }
+                catch (jsonError) {
+                    console.error(`Failed to parse JSON for file "${docId}"`, jsonError);
+                    return decodedContent;
+                }
+            }
+            return decodedContent;
+        }
+        catch (error) {
+            console.error(`Unexpected error while fetching file "${filePath}" from "${couchDbName}"`, error);
+            return null;
+        }
+    }
+    isImageFile(fileNameOrPath, contentType) {
+        const lower = (fileNameOrPath || '').toLowerCase();
+        return (lower.endsWith('.png') ||
+            lower.endsWith('.jpg') ||
+            lower.endsWith('.jpeg') ||
+            lower.endsWith('.ico') ||
+            lower.endsWith('.svg') ||
+            (contentType || '').startsWith('image/'));
+    }
+    getImageMimeType(fileNameOrPath) {
+        const lower = (fileNameOrPath || '').toLowerCase();
+        if (lower.endsWith('.png'))
+            return 'image/png';
+        if (lower.endsWith('.jpg') || lower.endsWith('.jpeg'))
+            return 'image/jpeg';
+        if (lower.endsWith('.ico'))
+            return 'image/x-icon';
+        if (lower.endsWith('.svg'))
+            return 'image/svg+xml';
+        return 'image/png';
+    }
+    fromBase64(base64) {
+        try {
+            return decodeURIComponent(escape(atob(base64)));
+        }
+        catch {
+            return atob(base64);
+        }
+    }
+    isJsonFile(fileNameOrPath, contentType) {
+        const lower = (fileNameOrPath || '').toLowerCase();
+        return lower.endsWith('.json') || contentType === 'application/json';
+    }
+    getDocumentUrl(dbName, docId) {
+        return `${this.getDbUrl(dbName)}/${encodeURIComponent(docId)}`;
+    }
+    getDbUrl(dbName) {
+        return `${this.couchDbBaseUrl}/${dbName}`;
+    }
+    async getReadHeaders() {
+        return {
+            Accept: 'application/json',
+            ...(await this.buildTenantHeaders()),
+        };
+    }
+    async buildTenantHeaders() {
+        const tenantKey = await this.utilityService.getStorage('tenantKey');
+        const tenantName = await this.utilityService.getStorage('tenantName');
+        if (tenantKey) {
+            if (typeof tenantKey !== 'string' || !tenantKey.trim()) {
+                throw new Error('Missing tenantKey');
+            }
+            return {
+                'X-Tenant-Key': tenantKey.trim(),
+            };
+        }
+        else {
+            if (typeof tenantName !== 'string' || !tenantName.trim()) {
+                throw new Error('Missing tenantName');
+            }
+            return {
+                'X-Tenant': tenantName.trim(),
+            };
+        }
+    }
+    async getImageSrcFromCouchDb(couchDbName, filePath) {
+        const dbName = couchDbName;
+        const docId = filePath?.trim();
+        if (!docId) {
+            throw new Error('Missing file path');
+        }
+        const response = await fetch(this.getDocumentUrl(dbName, docId), {
+            method: 'GET',
+            headers: await this.getReadHeaders(),
+        });
+        const doc = await this.parseJsonOrText(response);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch image "${docId}" from "${dbName}": ${response.status} ${this.stringifyErrorDetails(doc)}`);
+        }
+        if (!doc?.data) {
+            throw new Error(`Document "${docId}" does not contain image data`);
+        }
+        const mimeType = doc.contentType || 'image/png';
+        return `data:${mimeType};base64,${doc.data}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: Couchdb, deps: [{ token: UtilityService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: Couchdb, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: Couchdb, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: UtilityService }] });
+
 class RequestService {
     http;
     pageSize = 0;
@@ -253,15 +438,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
 
-// import { Couchdb } from './couchdb';
 class UtilityService {
     platform;
+    couchdbService;
     requestService;
     stripe = null;
-    constructor(platform, 
-    //  private couchdbService: Couchdb, 
-    requestService) {
+    constructor(platform, couchdbService, requestService) {
         this.platform = platform;
+        this.couchdbService = couchdbService;
         this.requestService = requestService;
     }
     getScope(scope) {
@@ -430,7 +614,7 @@ class UtilityService {
         tableitemInfo.data = records.map((record) => ({
             ...record,
             ...(record.hasOwnProperty('imageUrl') && record.imageUrl
-                ? { imageUrl: `${projectSeleted}/pages/images/` + record.imageUrl.split('/').pop() }
+                ? { imageUrl: `${projectSeleted}/Media/` + record.imageUrl.split('/').pop() }
                 : {})
         }));
         return tableitemInfo;
@@ -554,17 +738,14 @@ class UtilityService {
         }
         const transformed = await Promise.all(data.map(async (record) => {
             let imageUrl = record.imageUrl;
-            const imagePath = `pages/images/` +
+            const imagePath = `Media/` +
                 record?.imageUrl?.split('/').pop();
             if (tenantName &&
                 record?.imageUrl &&
                 options.setImageUrl) {
                 try {
                     imageUrl = "";
-                    // imageUrl = await this.couchdbService.getFileContentFromCouchDb(
-                    //   `${tenantName}_${options.projectSelected}`,
-                    //   imagePath
-                    // );
+                    imageUrl = await this.couchdbService.getFileContentFromCouchDb(`${tenantName}_${options.projectSelected}`, imagePath);
                 }
                 catch (err) {
                     console.warn(`Failed to fetch image from CouchDB for ${imagePath}`, err);
@@ -582,17 +763,14 @@ class UtilityService {
     async setTableDataImages(records, tenantName, projectSelected) {
         const transformed = await Promise.all(records.map(async (record) => {
             let imageUrl = record.imageUrl;
-            const imagePath = record?.imagePath ? record?.imagePath : `pages/images/` +
+            const imagePath = record?.imagePath ? record?.imagePath : `Media/` +
                 record?.imageUrl?.split('/').pop();
             if (tenantName &&
                 record?.imageUrl &&
                 record.hasOwnProperty('imageUrl')) {
                 try {
                     imageUrl = "";
-                    // imageUrl = await this.couchdbService.getFileContentFromCouchDb(
-                    //   `${tenantName}_${projectSelected}`,
-                    //   imagePath
-                    // );
+                    imageUrl = await this.couchdbService.getFileContentFromCouchDb(`${tenantName}_${projectSelected}`, imagePath);
                 }
                 catch (err) {
                     console.warn(`Failed to fetch image from CouchDB for ${imagePath}`, err);
@@ -767,7 +945,7 @@ class UtilityService {
         const offM = pad(Math.abs(offset) % 60);
         return `${year}-${month}-${day}T${hrs}:${mins}:00${sign}${offH}:${offM}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: UtilityService, deps: [{ token: i1.Platform }, { token: RequestService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: UtilityService, deps: [{ token: i1.Platform }, { token: Couchdb }, { token: RequestService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: UtilityService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: UtilityService, decorators: [{
@@ -775,7 +953,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1.Platform }, { type: RequestService }] });
+        }], ctorParameters: () => [{ type: i1.Platform }, { type: Couchdb }, { type: RequestService }] });
 
 class CardComponent {
     utilityService;
@@ -797,7 +975,7 @@ class CardComponent {
     imageDetails = new EventEmitter();
     onPageSizeChange = new EventEmitter();
     onPageChange = new EventEmitter();
-    cardPerRow = "col-12 md:col-6 lg:col-";
+    cardPerRow = "md:col-6 lg:col-";
     isLoading = false;
     layoutSchemaCopy = {};
     headerSchemaCopy = {};
@@ -817,7 +995,7 @@ class CardComponent {
             this.cardPerRow = "col-";
         }
         else {
-            this.cardPerRow = "col-12 md:col-6 lg:col-";
+            this.cardPerRow = "md:col-6 lg:col-";
         }
     }
     ngOnChanges(changes) {
@@ -1169,7 +1347,7 @@ class CardComponent {
         return propertyScope;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CardComponent, deps: [{ token: UtilityService }, { token: i1.Platform }, { token: i1$1.HttpClient }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i4.NzModalService }, { token: i5$1.OAuthService }, { token: RequestService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: CardComponent, isStandalone: true, selector: "vl-card", inputs: { itemInfo: "itemInfo", currentPage: "currentPage", pageSize: "pageSize", selectedLanguageInfo: "selectedLanguageInfo", pages: "pages" }, outputs: { cardButtonClick: "cardButtonClick", cardHeaderButtonClick: "cardHeaderButtonClick", linkDetails: "linkDetails", imageDetails: "imageDetails", onPageSizeChange: "onPageSizeChange", onPageChange: "onPageChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- Loader Spinner -->\r\n<div *ngIf=\"isLoading\" class=\"loader-overlay\">\r\n    <div class=\"spinner\"></div>\r\n</div>\r\n<span *ngIf=\"this.selectedLanguageInfo?.selectedLanguage\">\r\n    <!-- top pagination on card -->\r\n    <div *ngIf=\"itemInfo?.layoutSchema?.pagination?.pageSize && itemInfo?.layoutSchema?.pagination?.top\">\r\n        <vl-pagination [itemInfo]=\"itemInfo\" [pageSize]=\"pageSize\" [currentPage]=\"currentPage\" [pages]=\"pages\"\r\n          (pageSizeChange)=\"invokeOnPageSizeChange($event)\" (onGoToPage)=\"invokeGoToPage($event)\">\r\n      </vl-pagination>\r\n    </div>\r\n    <div *ngIf=\"itemInfo?.header?.elements\" [style]=\"getStyleWithoutClasses(itemInfo?.header?.style).style\"\r\n        [class]=\"getStyleWithoutClasses(itemInfo?.header?.style).classes\">\r\n        <span *ngFor=\"let element of itemInfo.header?.elements; let c = index\">\r\n            <ng-container\r\n                [ngSwitch]=\"element.scope?.reference && itemInfo.propertySchema[getScope(element.scope?.reference)] ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.type : 'default'\">\r\n\r\n                <!-- String Control -->\r\n                <div *ngSwitchCase=\"'string'\" [class]=\"element.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n                    <!-- LABEL -->\r\n                    <span *ngIf=\"element.label?.caption\" [style]=\"getStyleWithoutClasses(element.label?.style).style\"\r\n                        [class]=\"element.label?.style?.classes?.[0]\">\r\n                        {{ element.label.caption }}\r\n                    </span>\r\n                </div>\r\n\r\n                <!-- Date control -->\r\n                <div *ngSwitchCase=\"'date'\" class=\"mb-3\">\r\n                    <span *ngIf=\"element.option.protected\" [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n                        [class]=\"element?.label?.style?.classes[0]\">\r\n                        <vl-string [formField]=\"element\" [modalItemInfo]=\"itemInfo\">\r\n                      </vl-string>\r\n                    </span>\r\n                    <div *ngIf=\"!element.option.protected\"\r\n                        [class]=\"element?.layout == 'horizontal' ? 'horizontal-layout' : ''\"\r\n                        [ngClass]=\"element?.style?.classes[0]\" [style]=\"getStyleWithoutClasses(element?.style).style\">\r\n                        <label [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n                            [class]=\"element?.label?.style?.classes[0]\">{{ element.label?.value\r\n                            ?\r\n                            element.label?.value : element.label?.caption ?\r\n                            element.label?.caption :\r\n                            itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption\r\n                            }}</label>\r\n                        <p-datepicker (ngModelChange)=\"dateChangeEvent(element, $event)\" [showIcon]=\"true\" type=\"number\"\r\n                            inputmode=\"numeric\"\r\n                            [dateFormat]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].format : 'yy-mm-dd'\"\r\n                            [(ngModel)]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].value\"\r\n                            (onFocus)=\"forceNumericKeyboard($event)\" (onInput)=\"onDateTyping($event)\"\r\n                            [class]=\"element?.scope?.style?.classes[0]\"\r\n                            [style]=\"getStyleWithoutClasses(element?.scope?.style).style\">\r\n                        </p-datepicker>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- Button Control -->\r\n                <div *ngSwitchCase=\"'default'\" [class]=\"element.option?.visible ? 'row' : 'hidden'\"\r\n                    (click)=\"invokeOnCardHeader(element)\">\r\n                    <button nz-button [style]=\"getStyleWithoutClasses(element.style).style\"\r\n                        [class]=\"element.option.protected ? 'disabled-button' : getStyleWithoutClasses(element.style).classes\">\r\n                        <ng-container *ngIf=\"!element.caption; else textContent\">\r\n                            <i nz-icon [nzType]=\"element.icon\" nzTheme=\"outline\"></i>\r\n                        </ng-container>\r\n                        <ng-template #textContent>\r\n                            {{ element.caption }}\r\n                        </ng-template>\r\n                    </button>\r\n                </div>\r\n            </ng-container>\r\n        </span>\r\n    </div>\r\n    <div [class]=\"itemInfo.class\" [style]=\"itemInfo.style\">\r\n        <div *ngFor=\"let record of itemInfo.data; let k = index\"\r\n            [ngClass]=\"itemInfo.layoutSchema.pagination ? itemInfo.layoutSchema.pagination ? cardPerRow + itemInfo.layoutSchema?.stylePerCard?.elementPerRow[k % itemInfo.layoutSchema?.stylePerCard?.elementPerRow.length] : '' : ''\">\r\n            <div [class]=\"itemInfo.layoutSchema?.stylePerCard?.classes[0]\">\r\n                <div *ngFor=\"let layout of itemInfo.layoutSchema.cards\">\r\n                    <ng-container\r\n                        [ngSwitch]=\"layout?.scope?.reference && itemInfo.propertySchema[getScope(layout.scope?.reference)] ? itemInfo.propertySchema[getScope(layout.scope?.reference)][layout.scope?.reference.split('/').pop()]?.type : layout?.type == 'HorizontalLayout' ? 'HorizontalLayout' : 'default'\">\r\n                        <!-- Image Control -->\r\n                        <div *ngSwitchCase=\"'image'\" [class]=\"layout.option?.visible ? 'row' : 'hidden'\">\r\n                            <!-- <img [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n                              [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\"\r\n                              [src]=\"layout?.option?.src ? layout?.option?.src : record[layout.scope?.reference.split('/').pop()]\"\r\n                              alt=\"{{ layout.label ? layout.label : getProperty(layout.scope?.reference).productSchema.caption }}\"\r\n                              (click)=\"showImageDetails(layout.option, record)\" /> -->\r\n                        </div>\r\n\r\n                        <!-- String Control -->\r\n                        <div *ngSwitchCase=\"'string'\" [class]=\"layout.option?.visible ? 'card-field-wrapper' : 'hidden'\"\r\n                            [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n\r\n                            <!-- LABEL -->\r\n                            <span *ngIf=\"layout?.label?.caption\" [class]=\"layout.label?.style?.classes?.[0]\">\r\n                                {{ layout.label.caption }}\r\n                            </span>\r\n\r\n                            <!-- VALUE -->\r\n                            <p *ngIf=\"layout.option?.protected && layout.option?.visible\"\r\n                                [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n                                (click)=\"showLinkDetails(layout.option, record)\">\r\n                                {{\r\n                                record?.[layout.scope?.reference.split('/').pop()]\r\n                                ?? itemInfo.propertySchema[\r\n                                getScope(layout.scope?.reference)\r\n                                ]?.[layout.scope?.reference.split('/').pop()]?.default\r\n                                ?? '--'\r\n                                }}\r\n                            </p>\r\n                        </div>\r\n\r\n                        <!-- Date Control -->\r\n                        <div *ngSwitchCase=\"'date'\" [class]=\"layout.option?.visible ? 'card-field-wrapper' : 'hidden'\"\r\n                            [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n\r\n                            <!-- LABEL -->\r\n                            <span *ngIf=\"layout?.label?.caption\" [class]=\"layout.label?.style?.classes?.[0]\">\r\n                                {{ layout.label.caption }}\r\n                            </span>\r\n\r\n                            <!-- VALUE -->\r\n                            <p *ngIf=\"layout.option?.protected && layout.option?.visible\"\r\n                                [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n                                (click)=\"showLinkDetails(layout.option, record)\">\r\n                                {{\r\n                                record?.[layout.scope?.reference.split('/').pop()]\r\n                                ?? itemInfo.propertySchema[\r\n                                getScope(layout.scope?.reference)\r\n                                ]?.[layout.scope?.reference.split('/').pop()]?.default\r\n                                ?? '--'\r\n                                }}\r\n                            </p>\r\n                        </div>\r\n\r\n                        <!-- Time Control -->\r\n                        <div *ngSwitchCase=\"'time'\" [class]=\"layout.option?.visible ? 'card-field-wrapper' : 'hidden'\"\r\n                            [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n\r\n                            <!-- LABEL -->\r\n                            <span *ngIf=\"layout?.label?.caption\" [class]=\"layout.label?.style?.classes?.[0]\">\r\n                                {{ layout.label.caption }}\r\n                            </span>\r\n\r\n                            <!-- VALUE -->\r\n                            <p *ngIf=\"layout.option?.protected && layout.option?.visible\"\r\n                                [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n                                (click)=\"showLinkDetails(layout.option, record)\">\r\n                                {{\r\n                                record?.[layout.scope?.reference.split('/').pop()]\r\n                                ?? itemInfo.propertySchema[\r\n                                getScope(layout.scope?.reference)\r\n                                ]?.[layout.scope?.reference.split('/').pop()]?.default\r\n                                ?? '--'\r\n                                }}\r\n                            </p>\r\n                        </div>\r\n\r\n                        <!-- number Control -->\r\n                        <div *ngSwitchCase=\"'number'\" [class]=\"layout.option?.visible ? 'row' : 'hidden'\">\r\n                            <h3 *ngIf=\"itemInfo.propertySchema[getScope(layout.scope?.reference)] && itemInfo.propertySchema[getScope(layout.scope?.reference)][layout.scope?.reference.split('/').pop()]?.format.currency\"\r\n                                [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n                                [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n                                {{ record[layout.scope?.reference.split('/').pop()] | currency: layout.option?.currency\r\n                                ?\r\n                                layout.option.currency\r\n                                :\r\n                                'USD' }}\r\n                            </h3>\r\n                        </div>\r\n\r\n                        <!-- Button Control -->\r\n                        <div *ngSwitchCase=\"'default'\" [class]=\"layout.option?.visible ? 'row' : 'hidden'\">\r\n                            <button [style]=\"getStyleWithoutClasses(layout?.style).style\"\r\n                                [class]=\"layout.option.protected ? 'disabled-button' : getStyleWithoutClasses(layout?.style).classes\"\r\n                                (click)=\"invokeButtonClick(layout, record, k)\">\r\n                                <ng-container *ngIf=\"!layout.caption; else textContent\">\r\n                                    <i nz-icon [nzType]=\"layout.icon\" nzTheme=\"outline\"></i>\r\n                                </ng-container>\r\n                                <ng-template #textContent>\r\n                                    {{ layout.caption }}\r\n                                </ng-template>\r\n                            </button>\r\n                        </div>\r\n\r\n                        <!-- HorizontalLayout Control -->\r\n                        <div *ngSwitchCase=\"'HorizontalLayout'\">\r\n                            <div [class]=\"getStyleWithoutClasses(layout?.style).classes\"\r\n                                [style]=\"getStyleWithoutClasses(layout?.style).style\">\r\n                                <ng-container *ngFor=\"let innerLayout of layout.elements\">\r\n                                    <ng-container\r\n                                        [ngSwitch]=\"innerLayout.scope?.reference && itemInfo.propertySchema[getScope(innerLayout.scope?.reference)] ? itemInfo.propertySchema[getScope(innerLayout.scope?.reference)][innerLayout.scope?.reference.split('/').pop()]?.type : 'default'\">\r\n                                        <!-- Image Control -->\r\n                                        <div *ngSwitchCase=\"'image'\"\r\n                                            [class]=\"innerLayout.option?.visible ? 'row' : 'hidden'\">\r\n                                            <!-- <img [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n                                              [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n                                              [src]=\"innerLayout?.option?.src ? innerLayout?.option?.src : record[innerLayout.scope?.reference.split('/').pop()]\"\r\n                                              alt=\"{{ innerLayout.label ? innerLayout.label : getProperty(innerLayout.scope?.reference).productSchema.caption }}\"\r\n                                              (click)=\"showImageDetails(innerLayout.option, record)\" /> -->\r\n                                        </div>\r\n\r\n                                        <!-- String Control -->\r\n                                        <div *ngSwitchCase=\"'string'\"\r\n                                            [class]=\"innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n                                            <!-- LABEL -->\r\n                                            <span *ngIf=\"innerLayout.label?.caption\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout.label?.style).style\"\r\n                                                [class]=\"innerLayout.label?.style?.classes?.[0]\">\r\n                                                {{ innerLayout.label.caption }}\r\n                                            </span>\r\n\r\n                                            <!-- VALUE -->\r\n                                            <h3 *ngIf=\"innerLayout.option?.protected && innerLayout.option?.visible\"\r\n                                                [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n                                                (click)=\"showLinkDetails(innerLayout.option, record)\">\r\n\r\n                                                <!-- DATE FORMAT -->\r\n                                                <ng-container *ngIf=\"innerLayout.option?.dateFormat; else checkTime\">\r\n                                                    {{\r\n                                                    record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                    ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n                                                    innerLayout.option.dateFormat)\r\n                                                    : '--'\r\n                                                    }}\r\n                                                </ng-container>\r\n\r\n                                                <!-- TIME FORMAT -->\r\n                                                <ng-template #checkTime>\r\n                                                    <ng-container\r\n                                                        *ngIf=\"innerLayout.option?.timeFormat; else normalValue\">\r\n                                                        {{\r\n                                                        record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                        ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n                                                        innerLayout.option.timeFormat)\r\n                                                        : '--'\r\n                                                        }}\r\n                                                    </ng-container>\r\n                                                </ng-template>\r\n\r\n                                                <!-- NORMAL STRING -->\r\n                                                <ng-template #normalValue>\r\n                                                    {{\r\n                                                    record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                    ?? '--'\r\n                                                    }}\r\n                                                </ng-template>\r\n\r\n                                            </h3>\r\n                                        </div>\r\n\r\n                                        <!-- number Control -->\r\n                                        <div *ngSwitchCase=\"'number'\"\r\n                                            [class]=\"innerLayout.option?.visible ? 'row' : 'hidden'\">\r\n                                            <h3 *ngIf=\"itemInfo.propertySchema[getScope(innerLayout.scope?.reference)] &&itemInfo.propertySchema[getScope(innerLayout.scope?.reference)][innerLayout.scope?.reference.split('/').pop()]?.format.currency\"\r\n                                                [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\">\r\n                                                {{ record[innerLayout.scope?.reference.split('/').pop()] | currency:\r\n                                                innerLayout.option?.currency ?\r\n                                                innerLayout.option.currency\r\n                                                :\r\n                                                'USD' }}\r\n                                            </h3>\r\n                                        </div>\r\n\r\n                                        <!-- Date Control -->\r\n                                        <div *ngSwitchCase=\"'date'\"\r\n                                            [class]=\"innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n                                            <!-- LABEL -->\r\n                                            <span *ngIf=\"innerLayout.label?.caption\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout.label?.style).style\"\r\n                                                [class]=\"innerLayout.label?.style?.classes?.[0]\">\r\n                                                {{ innerLayout.label.caption }}\r\n                                            </span>\r\n\r\n                                            <!-- VALUE -->\r\n                                            <h3 *ngIf=\"innerLayout.option?.protected && innerLayout.option?.visible\"\r\n                                                [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n                                                (click)=\"showLinkDetails(innerLayout.option, record)\">\r\n\r\n                                                <!-- DATE FORMAT -->\r\n                                                <ng-container *ngIf=\"innerLayout.option?.dateFormat; else checkTime\">\r\n                                                    {{\r\n                                                    record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                    ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n                                                    innerLayout.option.dateFormat)\r\n                                                    : '--'\r\n                                                    }}\r\n                                                </ng-container>\r\n\r\n                                                <!-- TIME FORMAT -->\r\n                                                <ng-template #checkTime>\r\n                                                    <ng-container\r\n                                                        *ngIf=\"innerLayout.option?.timeFormat; else normalValue\">\r\n                                                        {{\r\n                                                        record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                        ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n                                                        innerLayout.option.timeFormat)\r\n                                                        : '--'\r\n                                                        }}\r\n                                                    </ng-container>\r\n                                                </ng-template>\r\n\r\n                                                <!-- NORMAL STRING -->\r\n                                                <ng-template #normalValue>\r\n                                                    {{\r\n                                                    record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                    ?? '--'\r\n                                                    }}\r\n                                                </ng-template>\r\n\r\n                                            </h3>\r\n                                        </div>\r\n\r\n                                        <!-- Time Control -->\r\n                                        <div *ngSwitchCase=\"'time'\"\r\n                                            [class]=\"innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n                                            <!-- LABEL -->\r\n                                            <span *ngIf=\"innerLayout.label?.caption\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout.label?.style).style\"\r\n                                                [class]=\"innerLayout.label?.style?.classes?.[0]\">\r\n                                                {{ innerLayout.label.caption }}\r\n                                            </span>\r\n\r\n                                            <!-- VALUE -->\r\n                                            <h3 *ngIf=\"innerLayout.option?.protected && innerLayout.option?.visible\"\r\n                                                [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n                                                (click)=\"showLinkDetails(innerLayout.option, record)\">\r\n\r\n                                                <!-- DATE FORMAT -->\r\n                                                <ng-container *ngIf=\"innerLayout.option?.dateFormat; else checkTime\">\r\n                                                    {{\r\n                                                    record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                    ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n                                                    innerLayout.option.dateFormat)\r\n                                                    : '--'\r\n                                                    }}\r\n                                                </ng-container>\r\n\r\n                                                <!-- TIME FORMAT -->\r\n                                                <ng-template #checkTime>\r\n                                                    <ng-container\r\n                                                        *ngIf=\"innerLayout.option?.timeFormat; else normalValue\">\r\n                                                        {{\r\n                                                        record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                        ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n                                                        innerLayout.option.timeFormat)\r\n                                                        : '--'\r\n                                                        }}\r\n                                                    </ng-container>\r\n                                                </ng-template>\r\n\r\n                                                <!-- NORMAL STRING -->\r\n                                                <ng-template #normalValue>\r\n                                                    {{\r\n                                                    record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                    ?? '--'\r\n                                                    }}\r\n                                                </ng-template>\r\n\r\n                                            </h3>\r\n                                        </div>\r\n\r\n                                        <!-- Button Control -->\r\n                                        <div *ngSwitchCase=\"'default'\">\r\n                                            <button nz-button [style]=\"getStyleWithoutClasses(innerLayout?.style).style\"\r\n                                                [class]=\"innerLayout.option?.visible ? innerLayout.option.protected ? 'disabled-button' : getStyleWithoutClasses(innerLayout?.style).classes : 'hidden'\"\r\n                                                (click)=\"invokeButtonClick(innerLayout, record, k)\">\r\n                                                <ng-container *ngIf=\"!innerLayout.caption; else textContent\">\r\n                                                    <i nz-icon [nzType]=\"innerLayout.icon\" nzTheme=\"outline\"></i>\r\n                                                </ng-container>\r\n                                                <ng-template #textContent>\r\n                                                    {{ innerLayout.caption }}\r\n                                                </ng-template>\r\n                                            </button>\r\n                                        </div>\r\n\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"itemInfo?.footer?.elements && itemInfo?.data && itemInfo?.data.length\"\r\n        [class]=\"getStyleWithoutClasses(itemInfo?.footer?.style).classes\">\r\n        <span *ngFor=\"let element of itemInfo.footer?.elements; let c = index\">\r\n            <ng-container\r\n                [ngSwitch]=\"element.scope?.reference && itemInfo.propertySchema[getScope(element.scope?.reference)] ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.type : 'default'\">\r\n\r\n                <!-- Date control -->\r\n                <div *ngSwitchCase=\"'date'\" class=\"form-group mb-3\">\r\n                    <span *ngIf=\"element.option.protected\" [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n                        [class]=\"element?.label?.style?.classes[0]\">\r\n                        <h5>{{\r\n                            itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption\r\n                            }}\r\n                        </h5>\r\n                    </span>\r\n                    <div *ngIf=\"!element.option.protected\">\r\n                        <div [class]=\"element?.layout == 'horizontal' ? 'horizontal-layout' : 'row'\">\r\n                            <label [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n                                [class]=\"element?.label?.style?.classes[0]\">{{ element.label?.value\r\n                                ?\r\n                                element.label?.value : element.label?.caption ?\r\n                                element.label?.caption :\r\n                                itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption\r\n                                }}</label>\r\n\r\n                            <nz-date-picker [required]=\"element.option.required\" [name]=\"element.scope?.reference\"\r\n                                [nzDisabled]=\"element?.option?.disabled\"\r\n                                (ngModelChange)=\"dateChangeEvent(element, $event)\"\r\n                                [nzFormat]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format : 'yyyy-MM-dd'\"\r\n                                [(ngModel)]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].value\"\r\n                                [style]=\"getStyleWithoutClasses(element?.style).style\"></nz-date-picker>\r\n                        </div>\r\n\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- Button Control -->\r\n                <div *ngSwitchCase=\"'default'\" [class]=\"element.option?.visible ? 'row' : 'hidden'\"\r\n                    (click)=\"invokeOnCardFooter(element)\">\r\n                    <button nz-button [style]=\"getStyleWithoutClasses(element.style).style\"\r\n                        [class]=\"element.option.protected ? 'disabled-button' : getStyleWithoutClasses(element.style).classes\">\r\n                        <ng-container *ngIf=\"!element.caption; else textContent\">\r\n                            <i nz-icon [nzType]=\"element.icon\" nzTheme=\"outline\"></i>\r\n                        </ng-container>\r\n                        <ng-template #textContent>\r\n                            {{ element.caption }}\r\n                        </ng-template>\r\n                    </button>\r\n                </div>\r\n            </ng-container>\r\n        </span>\r\n    </div>\r\n    <!-- bottom pagination on card -->\r\n    <div *ngIf=\"itemInfo?.layoutSchema?.pagination && itemInfo?.layoutSchema?.pagination?.bottom\">\r\n      <vl-pagination [itemInfo]=\"itemInfo\" [pageSize]=\"pageSize\" [currentPage]=\"currentPage\" [pages]=\"pages\"\r\n          (pageSizeChange)=\"invokeOnPageSizeChange($event)\" (onGoToPage)=\"invokeGoToPage($event)\">\r\n      </vl-pagination>\r\n  </div>\r\n</span>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i9.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i10.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i11.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i12.ɵNzTransitionPatchDirective, selector: "[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i13.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzDatePickerModule }, { kind: "component", type: i5$2.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzInline", "nzAllowClear", "nzAutoFocus", "nzDisabled", "nzInputReadOnly", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzVariant", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: CardComponent, isStandalone: true, selector: "vl-card", inputs: { itemInfo: "itemInfo", currentPage: "currentPage", pageSize: "pageSize", selectedLanguageInfo: "selectedLanguageInfo", pages: "pages" }, outputs: { cardButtonClick: "cardButtonClick", cardHeaderButtonClick: "cardHeaderButtonClick", linkDetails: "linkDetails", imageDetails: "imageDetails", onPageSizeChange: "onPageSizeChange", onPageChange: "onPageChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- Loader Spinner -->\r\n<div *ngIf=\"isLoading\" class=\"loader-overlay\">\r\n    <div class=\"spinner\"></div>\r\n</div>\r\n<span *ngIf=\"this.selectedLanguageInfo?.selectedLanguage\">\r\n    <!-- top pagination on card -->\r\n    <div *ngIf=\"itemInfo?.layoutSchema?.pagination?.pageSize && itemInfo?.layoutSchema?.pagination?.top\">\r\n        <vl-pagination [itemInfo]=\"itemInfo\" [pageSize]=\"pageSize\" [currentPage]=\"currentPage\" [pages]=\"pages\"\r\n            (pageSizeChange)=\"invokeOnPageSizeChange($event)\" (onGoToPage)=\"invokeGoToPage($event)\">\r\n        </vl-pagination>\r\n    </div>\r\n    <div *ngIf=\"itemInfo?.header?.elements\" [style]=\"getStyleWithoutClasses(itemInfo?.header?.style).style\"\r\n        [class]=\"getStyleWithoutClasses(itemInfo?.header?.style).classes\">\r\n        <span *ngFor=\"let element of itemInfo.header?.elements; let c = index\">\r\n            <ng-container\r\n                [ngSwitch]=\"element.scope?.reference && itemInfo.propertySchema[getScope(element.scope?.reference)] ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.type : 'default'\">\r\n\r\n                <!-- String Control -->\r\n                <div *ngSwitchCase=\"'string'\" [class]=\"element.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n                    <!-- LABEL -->\r\n                    <span *ngIf=\"element.label?.caption\" [style]=\"getStyleWithoutClasses(element.label?.style).style\"\r\n                        [class]=\"element.label?.style?.classes?.[0]\">\r\n                        {{ element.label.caption }}\r\n                    </span>\r\n                </div>\r\n\r\n                <!-- Date control -->\r\n                <div *ngSwitchCase=\"'date'\" class=\"mb-3\">\r\n                    <span *ngIf=\"element.option.protected\" [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n                        [class]=\"element?.label?.style?.classes[0]\">\r\n                        <vl-string [formField]=\"element\" [modalItemInfo]=\"itemInfo\">\r\n                        </vl-string>\r\n                    </span>\r\n                    <div *ngIf=\"!element.option.protected\"\r\n                        [class]=\"element?.layout == 'horizontal' ? 'horizontal-layout' : ''\"\r\n                        [ngClass]=\"element?.style?.classes[0]\" [style]=\"getStyleWithoutClasses(element?.style).style\">\r\n                        <label [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n                            [class]=\"element?.label?.style?.classes[0]\">{{ element.label?.value\r\n                            ?\r\n                            element.label?.value : element.label?.caption ?\r\n                            element.label?.caption :\r\n                            itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption\r\n                            }}</label>\r\n                        <p-datepicker (ngModelChange)=\"dateChangeEvent(element, $event)\" [showIcon]=\"true\" type=\"number\"\r\n                            inputmode=\"numeric\"\r\n                            [dateFormat]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].format : 'yy-mm-dd'\"\r\n                            [(ngModel)]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].value\"\r\n                            (onFocus)=\"forceNumericKeyboard($event)\" (onInput)=\"onDateTyping($event)\"\r\n                            [class]=\"element?.scope?.style?.classes[0]\"\r\n                            [style]=\"getStyleWithoutClasses(element?.scope?.style).style\">\r\n                        </p-datepicker>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- Button Control -->\r\n                <div *ngSwitchCase=\"'default'\" [class]=\"element.option?.visible ? 'row' : 'hidden'\"\r\n                    (click)=\"invokeOnCardHeader(element)\">\r\n                    <button nz-button [style]=\"getStyleWithoutClasses(element.style).style\"\r\n                        [class]=\"element.option.protected ? 'disabled-button' : getStyleWithoutClasses(element.style).classes\">\r\n                        <ng-container *ngIf=\"!element.caption; else textContent\">\r\n                            <i nz-icon [nzType]=\"element.icon\" nzTheme=\"outline\"></i>\r\n                        </ng-container>\r\n                        <ng-template #textContent>\r\n                            {{ element.caption }}\r\n                        </ng-template>\r\n                    </button>\r\n                </div>\r\n            </ng-container>\r\n        </span>\r\n    </div>\r\n    <div [class]=\"itemInfo.class\" [style]=\"itemInfo.style\">\r\n        <div *ngFor=\"let record of itemInfo.data; let k = index\"\r\n            [ngClass]=\"itemInfo.layoutSchema.pagination ? itemInfo.layoutSchema.pagination ? cardPerRow + itemInfo.layoutSchema?.stylePerCard?.elementPerRow[k % itemInfo.layoutSchema?.stylePerCard?.elementPerRow.length] : '' : ''\">\r\n            <div [class]=\"itemInfo.layoutSchema?.stylePerCard?.classes[0]\">\r\n                <div *ngFor=\"let layout of itemInfo.layoutSchema.cards\">\r\n                    <ng-container\r\n                        [ngSwitch]=\"layout?.scope?.reference && itemInfo.propertySchema[getScope(layout.scope?.reference)] ? itemInfo.propertySchema[getScope(layout.scope?.reference)][layout.scope?.reference.split('/').pop()]?.type : layout?.type == 'HorizontalLayout' ? 'HorizontalLayout' : 'default'\">\r\n                        <!-- Image Control -->\r\n                        <div *ngSwitchCase=\"'image'\" [class]=\"layout.option?.visible ? 'row' : 'hidden'\">\r\n                            <img [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n                                [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\"\r\n                                [src]=\"layout?.option?.src ? layout?.option?.src : record[layout.scope?.reference.split('/').pop()]\"\r\n                                alt=\"{{ layout.label ? layout.label : getProperty(layout.scope?.reference).productSchema.caption }}\"\r\n                                (click)=\"showImageDetails(layout.option, record)\" />\r\n                        </div>\r\n\r\n                        <!-- String Control -->\r\n                        <div *ngSwitchCase=\"'string'\" [class]=\"layout.option?.visible ? 'card-field-wrapper' : 'hidden'\"\r\n                            [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n\r\n                            <!-- LABEL -->\r\n                            <span *ngIf=\"layout?.label?.caption\" [class]=\"layout.label?.style?.classes?.[0]\">\r\n                                {{ layout.label.caption }}\r\n                            </span>\r\n\r\n                            <!-- VALUE -->\r\n                            <p *ngIf=\"layout.option?.protected && layout.option?.visible\"\r\n                                [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n                                (click)=\"showLinkDetails(layout.option, record)\">\r\n                                {{\r\n                                record?.[layout.scope?.reference.split('/').pop()]\r\n                                ?? itemInfo.propertySchema[\r\n                                getScope(layout.scope?.reference)\r\n                                ]?.[layout.scope?.reference.split('/').pop()]?.default\r\n                                ?? '--'\r\n                                }}\r\n                            </p>\r\n                        </div>\r\n\r\n                        <!-- Date Control -->\r\n                        <div *ngSwitchCase=\"'date'\" [class]=\"layout.option?.visible ? 'card-field-wrapper' : 'hidden'\"\r\n                            [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n\r\n                            <!-- LABEL -->\r\n                            <span *ngIf=\"layout?.label?.caption\" [class]=\"layout.label?.style?.classes?.[0]\">\r\n                                {{ layout.label.caption }}\r\n                            </span>\r\n\r\n                            <!-- VALUE -->\r\n                            <p *ngIf=\"layout.option?.protected && layout.option?.visible\"\r\n                                [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n                                (click)=\"showLinkDetails(layout.option, record)\">\r\n                                {{\r\n                                record?.[layout.scope?.reference.split('/').pop()]\r\n                                ?? itemInfo.propertySchema[\r\n                                getScope(layout.scope?.reference)\r\n                                ]?.[layout.scope?.reference.split('/').pop()]?.default\r\n                                ?? '--'\r\n                                }}\r\n                            </p>\r\n                        </div>\r\n\r\n                        <!-- Time Control -->\r\n                        <div *ngSwitchCase=\"'time'\" [class]=\"layout.option?.visible ? 'card-field-wrapper' : 'hidden'\"\r\n                            [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n\r\n                            <!-- LABEL -->\r\n                            <span *ngIf=\"layout?.label?.caption\" [class]=\"layout.label?.style?.classes?.[0]\">\r\n                                {{ layout.label.caption }}\r\n                            </span>\r\n\r\n                            <!-- VALUE -->\r\n                            <p *ngIf=\"layout.option?.protected && layout.option?.visible\"\r\n                                [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n                                (click)=\"showLinkDetails(layout.option, record)\">\r\n                                {{\r\n                                record?.[layout.scope?.reference.split('/').pop()]\r\n                                ?? itemInfo.propertySchema[\r\n                                getScope(layout.scope?.reference)\r\n                                ]?.[layout.scope?.reference.split('/').pop()]?.default\r\n                                ?? '--'\r\n                                }}\r\n                            </p>\r\n                        </div>\r\n\r\n                        <!-- number Control -->\r\n                        <div *ngSwitchCase=\"'number'\" [class]=\"layout.option?.visible ? 'row' : 'hidden'\">\r\n                            <h3 *ngIf=\"itemInfo.propertySchema[getScope(layout.scope?.reference)] && itemInfo.propertySchema[getScope(layout.scope?.reference)][layout.scope?.reference.split('/').pop()]?.format.currency\"\r\n                                [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n                                [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n                                {{ record[layout.scope?.reference.split('/').pop()] | currency: layout.option?.currency\r\n                                ?\r\n                                layout.option.currency\r\n                                :\r\n                                'USD' }}\r\n                            </h3>\r\n                        </div>\r\n\r\n                        <!-- Button Control -->\r\n                        <div *ngSwitchCase=\"'default'\" [class]=\"layout.option?.visible ? 'row' : 'hidden'\">\r\n                            <button [style]=\"getStyleWithoutClasses(layout?.style).style\"\r\n                                [class]=\"layout.option.protected ? 'disabled-button' : getStyleWithoutClasses(layout?.style).classes\"\r\n                                (click)=\"invokeButtonClick(layout, record, k)\">\r\n                                <ng-container *ngIf=\"!layout.caption; else textContent\">\r\n                                    <i nz-icon [nzType]=\"layout.icon\" nzTheme=\"outline\"></i>\r\n                                </ng-container>\r\n                                <ng-template #textContent>\r\n                                    {{ layout.caption }}\r\n                                </ng-template>\r\n                            </button>\r\n                        </div>\r\n\r\n                        <!-- HorizontalLayout Control -->\r\n                        <div *ngSwitchCase=\"'HorizontalLayout'\">\r\n                            <div [class]=\"getStyleWithoutClasses(layout?.style).classes\"\r\n                                [style]=\"getStyleWithoutClasses(layout?.style).style\">\r\n                                <ng-container *ngFor=\"let innerLayout of layout.elements\">\r\n                                    <ng-container\r\n                                        [ngSwitch]=\"innerLayout.scope?.reference && itemInfo.propertySchema[getScope(innerLayout.scope?.reference)] ? itemInfo.propertySchema[getScope(innerLayout.scope?.reference)][innerLayout.scope?.reference.split('/').pop()]?.type : 'default'\">\r\n                                        <!-- Image Control -->\r\n                                        <div *ngSwitchCase=\"'image'\"\r\n                                            [class]=\"innerLayout.option?.visible ? 'row' : 'hidden'\">\r\n                                            <img [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n                                                [src]=\"innerLayout?.option?.src ? innerLayout?.option?.src : record[innerLayout.scope?.reference.split('/').pop()]\"\r\n                                                alt=\"{{ innerLayout.label ? innerLayout.label : getProperty(innerLayout.scope?.reference).productSchema.caption }}\"\r\n                                                (click)=\"showImageDetails(innerLayout.option, record)\" />\r\n                                        </div>\r\n\r\n                                        <!-- String Control -->\r\n                                        <div *ngSwitchCase=\"'string'\"\r\n                                            [class]=\"innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n                                            <!-- LABEL -->\r\n                                            <span *ngIf=\"innerLayout.label?.caption\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout.label?.style).style\"\r\n                                                [class]=\"innerLayout.label?.style?.classes?.[0]\">\r\n                                                {{ innerLayout.label.caption }}\r\n                                            </span>\r\n\r\n                                            <!-- VALUE -->\r\n                                            <h3 *ngIf=\"innerLayout.option?.protected && innerLayout.option?.visible\"\r\n                                                [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n                                                (click)=\"showLinkDetails(innerLayout.option, record)\">\r\n\r\n                                                <!-- DATE FORMAT -->\r\n                                                <ng-container *ngIf=\"innerLayout.option?.dateFormat; else checkTime\">\r\n                                                    {{\r\n                                                    record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                    ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n                                                    innerLayout.option.dateFormat)\r\n                                                    : '--'\r\n                                                    }}\r\n                                                </ng-container>\r\n\r\n                                                <!-- TIME FORMAT -->\r\n                                                <ng-template #checkTime>\r\n                                                    <ng-container\r\n                                                        *ngIf=\"innerLayout.option?.timeFormat; else normalValue\">\r\n                                                        {{\r\n                                                        record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                        ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n                                                        innerLayout.option.timeFormat)\r\n                                                        : '--'\r\n                                                        }}\r\n                                                    </ng-container>\r\n                                                </ng-template>\r\n\r\n                                                <!-- NORMAL STRING -->\r\n                                                <ng-template #normalValue>\r\n                                                    {{\r\n                                                    record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                    ?? '--'\r\n                                                    }}\r\n                                                </ng-template>\r\n\r\n                                            </h3>\r\n                                        </div>\r\n\r\n                                        <!-- number Control -->\r\n                                        <div *ngSwitchCase=\"'number'\"\r\n                                            [class]=\"innerLayout.option?.visible ? 'row' : 'hidden'\">\r\n                                            <h3 *ngIf=\"itemInfo.propertySchema[getScope(innerLayout.scope?.reference)] &&itemInfo.propertySchema[getScope(innerLayout.scope?.reference)][innerLayout.scope?.reference.split('/').pop()]?.format.currency\"\r\n                                                [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\">\r\n                                                {{ record[innerLayout.scope?.reference.split('/').pop()] | currency:\r\n                                                innerLayout.option?.currency ?\r\n                                                innerLayout.option.currency\r\n                                                :\r\n                                                'USD' }}\r\n                                            </h3>\r\n                                        </div>\r\n\r\n                                        <!-- Date Control -->\r\n                                        <div *ngSwitchCase=\"'date'\"\r\n                                            [class]=\"innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n                                            <!-- LABEL -->\r\n                                            <span *ngIf=\"innerLayout.label?.caption\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout.label?.style).style\"\r\n                                                [class]=\"innerLayout.label?.style?.classes?.[0]\">\r\n                                                {{ innerLayout.label.caption }}\r\n                                            </span>\r\n\r\n                                            <!-- VALUE -->\r\n                                            <h3 *ngIf=\"innerLayout.option?.protected && innerLayout.option?.visible\"\r\n                                                [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n                                                (click)=\"showLinkDetails(innerLayout.option, record)\">\r\n\r\n                                                <!-- DATE FORMAT -->\r\n                                                <ng-container *ngIf=\"innerLayout.option?.dateFormat; else checkTime\">\r\n                                                    {{\r\n                                                    record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                    ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n                                                    innerLayout.option.dateFormat)\r\n                                                    : '--'\r\n                                                    }}\r\n                                                </ng-container>\r\n\r\n                                                <!-- TIME FORMAT -->\r\n                                                <ng-template #checkTime>\r\n                                                    <ng-container\r\n                                                        *ngIf=\"innerLayout.option?.timeFormat; else normalValue\">\r\n                                                        {{\r\n                                                        record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                        ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n                                                        innerLayout.option.timeFormat)\r\n                                                        : '--'\r\n                                                        }}\r\n                                                    </ng-container>\r\n                                                </ng-template>\r\n\r\n                                                <!-- NORMAL STRING -->\r\n                                                <ng-template #normalValue>\r\n                                                    {{\r\n                                                    record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                    ?? '--'\r\n                                                    }}\r\n                                                </ng-template>\r\n\r\n                                            </h3>\r\n                                        </div>\r\n\r\n                                        <!-- Time Control -->\r\n                                        <div *ngSwitchCase=\"'time'\"\r\n                                            [class]=\"innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n                                            <!-- LABEL -->\r\n                                            <span *ngIf=\"innerLayout.label?.caption\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout.label?.style).style\"\r\n                                                [class]=\"innerLayout.label?.style?.classes?.[0]\">\r\n                                                {{ innerLayout.label.caption }}\r\n                                            </span>\r\n\r\n                                            <!-- VALUE -->\r\n                                            <h3 *ngIf=\"innerLayout.option?.protected && innerLayout.option?.visible\"\r\n                                                [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n                                                (click)=\"showLinkDetails(innerLayout.option, record)\">\r\n\r\n                                                <!-- DATE FORMAT -->\r\n                                                <ng-container *ngIf=\"innerLayout.option?.dateFormat; else checkTime\">\r\n                                                    {{\r\n                                                    record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                    ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n                                                    innerLayout.option.dateFormat)\r\n                                                    : '--'\r\n                                                    }}\r\n                                                </ng-container>\r\n\r\n                                                <!-- TIME FORMAT -->\r\n                                                <ng-template #checkTime>\r\n                                                    <ng-container\r\n                                                        *ngIf=\"innerLayout.option?.timeFormat; else normalValue\">\r\n                                                        {{\r\n                                                        record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                        ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n                                                        innerLayout.option.timeFormat)\r\n                                                        : '--'\r\n                                                        }}\r\n                                                    </ng-container>\r\n                                                </ng-template>\r\n\r\n                                                <!-- NORMAL STRING -->\r\n                                                <ng-template #normalValue>\r\n                                                    {{\r\n                                                    record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                    ?? '--'\r\n                                                    }}\r\n                                                </ng-template>\r\n\r\n                                            </h3>\r\n                                        </div>\r\n\r\n                                        <!-- Button Control -->\r\n                                        <div *ngSwitchCase=\"'default'\">\r\n                                            <button nz-button [style]=\"getStyleWithoutClasses(innerLayout?.style).style\"\r\n                                                [class]=\"innerLayout.option?.visible ? innerLayout.option.protected ? 'disabled-button' : getStyleWithoutClasses(innerLayout?.style).classes : 'hidden'\"\r\n                                                (click)=\"invokeButtonClick(innerLayout, record, k)\">\r\n                                                <ng-container *ngIf=\"!innerLayout.caption; else textContent\">\r\n                                                    <i nz-icon [nzType]=\"innerLayout.icon\" nzTheme=\"outline\"></i>\r\n                                                </ng-container>\r\n                                                <ng-template #textContent>\r\n                                                    {{ innerLayout.caption }}\r\n                                                </ng-template>\r\n                                            </button>\r\n                                        </div>\r\n\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"itemInfo?.footer?.elements && itemInfo?.data && itemInfo?.data.length\"\r\n        [class]=\"getStyleWithoutClasses(itemInfo?.footer?.style).classes\">\r\n        <span *ngFor=\"let element of itemInfo.footer?.elements; let c = index\">\r\n            <ng-container\r\n                [ngSwitch]=\"element.scope?.reference && itemInfo.propertySchema[getScope(element.scope?.reference)] ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.type : 'default'\">\r\n\r\n                <!-- Date control -->\r\n                <div *ngSwitchCase=\"'date'\" class=\"form-group mb-3\">\r\n                    <span *ngIf=\"element.option.protected\" [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n                        [class]=\"element?.label?.style?.classes[0]\">\r\n                        <h5>{{\r\n                            itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption\r\n                            }}\r\n                        </h5>\r\n                    </span>\r\n                    <div *ngIf=\"!element.option.protected\">\r\n                        <div [class]=\"element?.layout == 'horizontal' ? 'horizontal-layout' : 'row'\">\r\n                            <label [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n                                [class]=\"element?.label?.style?.classes[0]\">{{ element.label?.value\r\n                                ?\r\n                                element.label?.value : element.label?.caption ?\r\n                                element.label?.caption :\r\n                                itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption\r\n                                }}</label>\r\n\r\n                            <nz-date-picker [required]=\"element.option.required\" [name]=\"element.scope?.reference\"\r\n                                [nzDisabled]=\"element?.option?.disabled\"\r\n                                (ngModelChange)=\"dateChangeEvent(element, $event)\"\r\n                                [nzFormat]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format : 'yyyy-MM-dd'\"\r\n                                [(ngModel)]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].value\"\r\n                                [style]=\"getStyleWithoutClasses(element?.style).style\"></nz-date-picker>\r\n                        </div>\r\n\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- Button Control -->\r\n                <div *ngSwitchCase=\"'default'\" [class]=\"element.option?.visible ? 'row' : 'hidden'\"\r\n                    (click)=\"invokeOnCardFooter(element)\">\r\n                    <button nz-button [style]=\"getStyleWithoutClasses(element.style).style\"\r\n                        [class]=\"element.option.protected ? 'disabled-button' : getStyleWithoutClasses(element.style).classes\">\r\n                        <ng-container *ngIf=\"!element.caption; else textContent\">\r\n                            <i nz-icon [nzType]=\"element.icon\" nzTheme=\"outline\"></i>\r\n                        </ng-container>\r\n                        <ng-template #textContent>\r\n                            {{ element.caption }}\r\n                        </ng-template>\r\n                    </button>\r\n                </div>\r\n            </ng-container>\r\n        </span>\r\n    </div>\r\n    <!-- bottom pagination on card -->\r\n    <div *ngIf=\"itemInfo?.layoutSchema?.pagination && itemInfo?.layoutSchema?.pagination?.bottom\">\r\n        <vl-pagination [itemInfo]=\"itemInfo\" [pageSize]=\"pageSize\" [currentPage]=\"currentPage\" [pages]=\"pages\"\r\n            (pageSizeChange)=\"invokeOnPageSizeChange($event)\" (onGoToPage)=\"invokeGoToPage($event)\">\r\n        </vl-pagination>\r\n    </div>\r\n</span>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i9.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i10.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i11.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i12.ɵNzTransitionPatchDirective, selector: "[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i13.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzDatePickerModule }, { kind: "component", type: i5$2.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzInline", "nzAllowClear", "nzAutoFocus", "nzDisabled", "nzInputReadOnly", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzVariant", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: 
                 // StringComponent,
                 PaginationComponent, selector: "vl-pagination", inputs: ["itemInfo", "pageSize", "currentPage", "pages"], outputs: ["pageSizeChange", "onGoToPage"] }, { kind: "component", type: String$1, selector: "vl-string", inputs: ["formField", "modalItemInfo"] }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
 }
@@ -1186,7 +1364,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                         // StringComponent,
                         PaginationComponent,
                         String$1
-                    ], standalone: true, template: "<!-- Loader Spinner -->\r\n<div *ngIf=\"isLoading\" class=\"loader-overlay\">\r\n    <div class=\"spinner\"></div>\r\n</div>\r\n<span *ngIf=\"this.selectedLanguageInfo?.selectedLanguage\">\r\n    <!-- top pagination on card -->\r\n    <div *ngIf=\"itemInfo?.layoutSchema?.pagination?.pageSize && itemInfo?.layoutSchema?.pagination?.top\">\r\n        <vl-pagination [itemInfo]=\"itemInfo\" [pageSize]=\"pageSize\" [currentPage]=\"currentPage\" [pages]=\"pages\"\r\n          (pageSizeChange)=\"invokeOnPageSizeChange($event)\" (onGoToPage)=\"invokeGoToPage($event)\">\r\n      </vl-pagination>\r\n    </div>\r\n    <div *ngIf=\"itemInfo?.header?.elements\" [style]=\"getStyleWithoutClasses(itemInfo?.header?.style).style\"\r\n        [class]=\"getStyleWithoutClasses(itemInfo?.header?.style).classes\">\r\n        <span *ngFor=\"let element of itemInfo.header?.elements; let c = index\">\r\n            <ng-container\r\n                [ngSwitch]=\"element.scope?.reference && itemInfo.propertySchema[getScope(element.scope?.reference)] ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.type : 'default'\">\r\n\r\n                <!-- String Control -->\r\n                <div *ngSwitchCase=\"'string'\" [class]=\"element.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n                    <!-- LABEL -->\r\n                    <span *ngIf=\"element.label?.caption\" [style]=\"getStyleWithoutClasses(element.label?.style).style\"\r\n                        [class]=\"element.label?.style?.classes?.[0]\">\r\n                        {{ element.label.caption }}\r\n                    </span>\r\n                </div>\r\n\r\n                <!-- Date control -->\r\n                <div *ngSwitchCase=\"'date'\" class=\"mb-3\">\r\n                    <span *ngIf=\"element.option.protected\" [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n                        [class]=\"element?.label?.style?.classes[0]\">\r\n                        <vl-string [formField]=\"element\" [modalItemInfo]=\"itemInfo\">\r\n                      </vl-string>\r\n                    </span>\r\n                    <div *ngIf=\"!element.option.protected\"\r\n                        [class]=\"element?.layout == 'horizontal' ? 'horizontal-layout' : ''\"\r\n                        [ngClass]=\"element?.style?.classes[0]\" [style]=\"getStyleWithoutClasses(element?.style).style\">\r\n                        <label [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n                            [class]=\"element?.label?.style?.classes[0]\">{{ element.label?.value\r\n                            ?\r\n                            element.label?.value : element.label?.caption ?\r\n                            element.label?.caption :\r\n                            itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption\r\n                            }}</label>\r\n                        <p-datepicker (ngModelChange)=\"dateChangeEvent(element, $event)\" [showIcon]=\"true\" type=\"number\"\r\n                            inputmode=\"numeric\"\r\n                            [dateFormat]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].format : 'yy-mm-dd'\"\r\n                            [(ngModel)]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].value\"\r\n                            (onFocus)=\"forceNumericKeyboard($event)\" (onInput)=\"onDateTyping($event)\"\r\n                            [class]=\"element?.scope?.style?.classes[0]\"\r\n                            [style]=\"getStyleWithoutClasses(element?.scope?.style).style\">\r\n                        </p-datepicker>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- Button Control -->\r\n                <div *ngSwitchCase=\"'default'\" [class]=\"element.option?.visible ? 'row' : 'hidden'\"\r\n                    (click)=\"invokeOnCardHeader(element)\">\r\n                    <button nz-button [style]=\"getStyleWithoutClasses(element.style).style\"\r\n                        [class]=\"element.option.protected ? 'disabled-button' : getStyleWithoutClasses(element.style).classes\">\r\n                        <ng-container *ngIf=\"!element.caption; else textContent\">\r\n                            <i nz-icon [nzType]=\"element.icon\" nzTheme=\"outline\"></i>\r\n                        </ng-container>\r\n                        <ng-template #textContent>\r\n                            {{ element.caption }}\r\n                        </ng-template>\r\n                    </button>\r\n                </div>\r\n            </ng-container>\r\n        </span>\r\n    </div>\r\n    <div [class]=\"itemInfo.class\" [style]=\"itemInfo.style\">\r\n        <div *ngFor=\"let record of itemInfo.data; let k = index\"\r\n            [ngClass]=\"itemInfo.layoutSchema.pagination ? itemInfo.layoutSchema.pagination ? cardPerRow + itemInfo.layoutSchema?.stylePerCard?.elementPerRow[k % itemInfo.layoutSchema?.stylePerCard?.elementPerRow.length] : '' : ''\">\r\n            <div [class]=\"itemInfo.layoutSchema?.stylePerCard?.classes[0]\">\r\n                <div *ngFor=\"let layout of itemInfo.layoutSchema.cards\">\r\n                    <ng-container\r\n                        [ngSwitch]=\"layout?.scope?.reference && itemInfo.propertySchema[getScope(layout.scope?.reference)] ? itemInfo.propertySchema[getScope(layout.scope?.reference)][layout.scope?.reference.split('/').pop()]?.type : layout?.type == 'HorizontalLayout' ? 'HorizontalLayout' : 'default'\">\r\n                        <!-- Image Control -->\r\n                        <div *ngSwitchCase=\"'image'\" [class]=\"layout.option?.visible ? 'row' : 'hidden'\">\r\n                            <!-- <img [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n                              [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\"\r\n                              [src]=\"layout?.option?.src ? layout?.option?.src : record[layout.scope?.reference.split('/').pop()]\"\r\n                              alt=\"{{ layout.label ? layout.label : getProperty(layout.scope?.reference).productSchema.caption }}\"\r\n                              (click)=\"showImageDetails(layout.option, record)\" /> -->\r\n                        </div>\r\n\r\n                        <!-- String Control -->\r\n                        <div *ngSwitchCase=\"'string'\" [class]=\"layout.option?.visible ? 'card-field-wrapper' : 'hidden'\"\r\n                            [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n\r\n                            <!-- LABEL -->\r\n                            <span *ngIf=\"layout?.label?.caption\" [class]=\"layout.label?.style?.classes?.[0]\">\r\n                                {{ layout.label.caption }}\r\n                            </span>\r\n\r\n                            <!-- VALUE -->\r\n                            <p *ngIf=\"layout.option?.protected && layout.option?.visible\"\r\n                                [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n                                (click)=\"showLinkDetails(layout.option, record)\">\r\n                                {{\r\n                                record?.[layout.scope?.reference.split('/').pop()]\r\n                                ?? itemInfo.propertySchema[\r\n                                getScope(layout.scope?.reference)\r\n                                ]?.[layout.scope?.reference.split('/').pop()]?.default\r\n                                ?? '--'\r\n                                }}\r\n                            </p>\r\n                        </div>\r\n\r\n                        <!-- Date Control -->\r\n                        <div *ngSwitchCase=\"'date'\" [class]=\"layout.option?.visible ? 'card-field-wrapper' : 'hidden'\"\r\n                            [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n\r\n                            <!-- LABEL -->\r\n                            <span *ngIf=\"layout?.label?.caption\" [class]=\"layout.label?.style?.classes?.[0]\">\r\n                                {{ layout.label.caption }}\r\n                            </span>\r\n\r\n                            <!-- VALUE -->\r\n                            <p *ngIf=\"layout.option?.protected && layout.option?.visible\"\r\n                                [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n                                (click)=\"showLinkDetails(layout.option, record)\">\r\n                                {{\r\n                                record?.[layout.scope?.reference.split('/').pop()]\r\n                                ?? itemInfo.propertySchema[\r\n                                getScope(layout.scope?.reference)\r\n                                ]?.[layout.scope?.reference.split('/').pop()]?.default\r\n                                ?? '--'\r\n                                }}\r\n                            </p>\r\n                        </div>\r\n\r\n                        <!-- Time Control -->\r\n                        <div *ngSwitchCase=\"'time'\" [class]=\"layout.option?.visible ? 'card-field-wrapper' : 'hidden'\"\r\n                            [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n\r\n                            <!-- LABEL -->\r\n                            <span *ngIf=\"layout?.label?.caption\" [class]=\"layout.label?.style?.classes?.[0]\">\r\n                                {{ layout.label.caption }}\r\n                            </span>\r\n\r\n                            <!-- VALUE -->\r\n                            <p *ngIf=\"layout.option?.protected && layout.option?.visible\"\r\n                                [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n                                (click)=\"showLinkDetails(layout.option, record)\">\r\n                                {{\r\n                                record?.[layout.scope?.reference.split('/').pop()]\r\n                                ?? itemInfo.propertySchema[\r\n                                getScope(layout.scope?.reference)\r\n                                ]?.[layout.scope?.reference.split('/').pop()]?.default\r\n                                ?? '--'\r\n                                }}\r\n                            </p>\r\n                        </div>\r\n\r\n                        <!-- number Control -->\r\n                        <div *ngSwitchCase=\"'number'\" [class]=\"layout.option?.visible ? 'row' : 'hidden'\">\r\n                            <h3 *ngIf=\"itemInfo.propertySchema[getScope(layout.scope?.reference)] && itemInfo.propertySchema[getScope(layout.scope?.reference)][layout.scope?.reference.split('/').pop()]?.format.currency\"\r\n                                [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n                                [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n                                {{ record[layout.scope?.reference.split('/').pop()] | currency: layout.option?.currency\r\n                                ?\r\n                                layout.option.currency\r\n                                :\r\n                                'USD' }}\r\n                            </h3>\r\n                        </div>\r\n\r\n                        <!-- Button Control -->\r\n                        <div *ngSwitchCase=\"'default'\" [class]=\"layout.option?.visible ? 'row' : 'hidden'\">\r\n                            <button [style]=\"getStyleWithoutClasses(layout?.style).style\"\r\n                                [class]=\"layout.option.protected ? 'disabled-button' : getStyleWithoutClasses(layout?.style).classes\"\r\n                                (click)=\"invokeButtonClick(layout, record, k)\">\r\n                                <ng-container *ngIf=\"!layout.caption; else textContent\">\r\n                                    <i nz-icon [nzType]=\"layout.icon\" nzTheme=\"outline\"></i>\r\n                                </ng-container>\r\n                                <ng-template #textContent>\r\n                                    {{ layout.caption }}\r\n                                </ng-template>\r\n                            </button>\r\n                        </div>\r\n\r\n                        <!-- HorizontalLayout Control -->\r\n                        <div *ngSwitchCase=\"'HorizontalLayout'\">\r\n                            <div [class]=\"getStyleWithoutClasses(layout?.style).classes\"\r\n                                [style]=\"getStyleWithoutClasses(layout?.style).style\">\r\n                                <ng-container *ngFor=\"let innerLayout of layout.elements\">\r\n                                    <ng-container\r\n                                        [ngSwitch]=\"innerLayout.scope?.reference && itemInfo.propertySchema[getScope(innerLayout.scope?.reference)] ? itemInfo.propertySchema[getScope(innerLayout.scope?.reference)][innerLayout.scope?.reference.split('/').pop()]?.type : 'default'\">\r\n                                        <!-- Image Control -->\r\n                                        <div *ngSwitchCase=\"'image'\"\r\n                                            [class]=\"innerLayout.option?.visible ? 'row' : 'hidden'\">\r\n                                            <!-- <img [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n                                              [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n                                              [src]=\"innerLayout?.option?.src ? innerLayout?.option?.src : record[innerLayout.scope?.reference.split('/').pop()]\"\r\n                                              alt=\"{{ innerLayout.label ? innerLayout.label : getProperty(innerLayout.scope?.reference).productSchema.caption }}\"\r\n                                              (click)=\"showImageDetails(innerLayout.option, record)\" /> -->\r\n                                        </div>\r\n\r\n                                        <!-- String Control -->\r\n                                        <div *ngSwitchCase=\"'string'\"\r\n                                            [class]=\"innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n                                            <!-- LABEL -->\r\n                                            <span *ngIf=\"innerLayout.label?.caption\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout.label?.style).style\"\r\n                                                [class]=\"innerLayout.label?.style?.classes?.[0]\">\r\n                                                {{ innerLayout.label.caption }}\r\n                                            </span>\r\n\r\n                                            <!-- VALUE -->\r\n                                            <h3 *ngIf=\"innerLayout.option?.protected && innerLayout.option?.visible\"\r\n                                                [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n                                                (click)=\"showLinkDetails(innerLayout.option, record)\">\r\n\r\n                                                <!-- DATE FORMAT -->\r\n                                                <ng-container *ngIf=\"innerLayout.option?.dateFormat; else checkTime\">\r\n                                                    {{\r\n                                                    record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                    ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n                                                    innerLayout.option.dateFormat)\r\n                                                    : '--'\r\n                                                    }}\r\n                                                </ng-container>\r\n\r\n                                                <!-- TIME FORMAT -->\r\n                                                <ng-template #checkTime>\r\n                                                    <ng-container\r\n                                                        *ngIf=\"innerLayout.option?.timeFormat; else normalValue\">\r\n                                                        {{\r\n                                                        record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                        ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n                                                        innerLayout.option.timeFormat)\r\n                                                        : '--'\r\n                                                        }}\r\n                                                    </ng-container>\r\n                                                </ng-template>\r\n\r\n                                                <!-- NORMAL STRING -->\r\n                                                <ng-template #normalValue>\r\n                                                    {{\r\n                                                    record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                    ?? '--'\r\n                                                    }}\r\n                                                </ng-template>\r\n\r\n                                            </h3>\r\n                                        </div>\r\n\r\n                                        <!-- number Control -->\r\n                                        <div *ngSwitchCase=\"'number'\"\r\n                                            [class]=\"innerLayout.option?.visible ? 'row' : 'hidden'\">\r\n                                            <h3 *ngIf=\"itemInfo.propertySchema[getScope(innerLayout.scope?.reference)] &&itemInfo.propertySchema[getScope(innerLayout.scope?.reference)][innerLayout.scope?.reference.split('/').pop()]?.format.currency\"\r\n                                                [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\">\r\n                                                {{ record[innerLayout.scope?.reference.split('/').pop()] | currency:\r\n                                                innerLayout.option?.currency ?\r\n                                                innerLayout.option.currency\r\n                                                :\r\n                                                'USD' }}\r\n                                            </h3>\r\n                                        </div>\r\n\r\n                                        <!-- Date Control -->\r\n                                        <div *ngSwitchCase=\"'date'\"\r\n                                            [class]=\"innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n                                            <!-- LABEL -->\r\n                                            <span *ngIf=\"innerLayout.label?.caption\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout.label?.style).style\"\r\n                                                [class]=\"innerLayout.label?.style?.classes?.[0]\">\r\n                                                {{ innerLayout.label.caption }}\r\n                                            </span>\r\n\r\n                                            <!-- VALUE -->\r\n                                            <h3 *ngIf=\"innerLayout.option?.protected && innerLayout.option?.visible\"\r\n                                                [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n                                                (click)=\"showLinkDetails(innerLayout.option, record)\">\r\n\r\n                                                <!-- DATE FORMAT -->\r\n                                                <ng-container *ngIf=\"innerLayout.option?.dateFormat; else checkTime\">\r\n                                                    {{\r\n                                                    record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                    ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n                                                    innerLayout.option.dateFormat)\r\n                                                    : '--'\r\n                                                    }}\r\n                                                </ng-container>\r\n\r\n                                                <!-- TIME FORMAT -->\r\n                                                <ng-template #checkTime>\r\n                                                    <ng-container\r\n                                                        *ngIf=\"innerLayout.option?.timeFormat; else normalValue\">\r\n                                                        {{\r\n                                                        record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                        ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n                                                        innerLayout.option.timeFormat)\r\n                                                        : '--'\r\n                                                        }}\r\n                                                    </ng-container>\r\n                                                </ng-template>\r\n\r\n                                                <!-- NORMAL STRING -->\r\n                                                <ng-template #normalValue>\r\n                                                    {{\r\n                                                    record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                    ?? '--'\r\n                                                    }}\r\n                                                </ng-template>\r\n\r\n                                            </h3>\r\n                                        </div>\r\n\r\n                                        <!-- Time Control -->\r\n                                        <div *ngSwitchCase=\"'time'\"\r\n                                            [class]=\"innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n                                            <!-- LABEL -->\r\n                                            <span *ngIf=\"innerLayout.label?.caption\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout.label?.style).style\"\r\n                                                [class]=\"innerLayout.label?.style?.classes?.[0]\">\r\n                                                {{ innerLayout.label.caption }}\r\n                                            </span>\r\n\r\n                                            <!-- VALUE -->\r\n                                            <h3 *ngIf=\"innerLayout.option?.protected && innerLayout.option?.visible\"\r\n                                                [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n                                                (click)=\"showLinkDetails(innerLayout.option, record)\">\r\n\r\n                                                <!-- DATE FORMAT -->\r\n                                                <ng-container *ngIf=\"innerLayout.option?.dateFormat; else checkTime\">\r\n                                                    {{\r\n                                                    record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                    ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n                                                    innerLayout.option.dateFormat)\r\n                                                    : '--'\r\n                                                    }}\r\n                                                </ng-container>\r\n\r\n                                                <!-- TIME FORMAT -->\r\n                                                <ng-template #checkTime>\r\n                                                    <ng-container\r\n                                                        *ngIf=\"innerLayout.option?.timeFormat; else normalValue\">\r\n                                                        {{\r\n                                                        record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                        ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n                                                        innerLayout.option.timeFormat)\r\n                                                        : '--'\r\n                                                        }}\r\n                                                    </ng-container>\r\n                                                </ng-template>\r\n\r\n                                                <!-- NORMAL STRING -->\r\n                                                <ng-template #normalValue>\r\n                                                    {{\r\n                                                    record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                    ?? '--'\r\n                                                    }}\r\n                                                </ng-template>\r\n\r\n                                            </h3>\r\n                                        </div>\r\n\r\n                                        <!-- Button Control -->\r\n                                        <div *ngSwitchCase=\"'default'\">\r\n                                            <button nz-button [style]=\"getStyleWithoutClasses(innerLayout?.style).style\"\r\n                                                [class]=\"innerLayout.option?.visible ? innerLayout.option.protected ? 'disabled-button' : getStyleWithoutClasses(innerLayout?.style).classes : 'hidden'\"\r\n                                                (click)=\"invokeButtonClick(innerLayout, record, k)\">\r\n                                                <ng-container *ngIf=\"!innerLayout.caption; else textContent\">\r\n                                                    <i nz-icon [nzType]=\"innerLayout.icon\" nzTheme=\"outline\"></i>\r\n                                                </ng-container>\r\n                                                <ng-template #textContent>\r\n                                                    {{ innerLayout.caption }}\r\n                                                </ng-template>\r\n                                            </button>\r\n                                        </div>\r\n\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"itemInfo?.footer?.elements && itemInfo?.data && itemInfo?.data.length\"\r\n        [class]=\"getStyleWithoutClasses(itemInfo?.footer?.style).classes\">\r\n        <span *ngFor=\"let element of itemInfo.footer?.elements; let c = index\">\r\n            <ng-container\r\n                [ngSwitch]=\"element.scope?.reference && itemInfo.propertySchema[getScope(element.scope?.reference)] ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.type : 'default'\">\r\n\r\n                <!-- Date control -->\r\n                <div *ngSwitchCase=\"'date'\" class=\"form-group mb-3\">\r\n                    <span *ngIf=\"element.option.protected\" [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n                        [class]=\"element?.label?.style?.classes[0]\">\r\n                        <h5>{{\r\n                            itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption\r\n                            }}\r\n                        </h5>\r\n                    </span>\r\n                    <div *ngIf=\"!element.option.protected\">\r\n                        <div [class]=\"element?.layout == 'horizontal' ? 'horizontal-layout' : 'row'\">\r\n                            <label [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n                                [class]=\"element?.label?.style?.classes[0]\">{{ element.label?.value\r\n                                ?\r\n                                element.label?.value : element.label?.caption ?\r\n                                element.label?.caption :\r\n                                itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption\r\n                                }}</label>\r\n\r\n                            <nz-date-picker [required]=\"element.option.required\" [name]=\"element.scope?.reference\"\r\n                                [nzDisabled]=\"element?.option?.disabled\"\r\n                                (ngModelChange)=\"dateChangeEvent(element, $event)\"\r\n                                [nzFormat]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format : 'yyyy-MM-dd'\"\r\n                                [(ngModel)]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].value\"\r\n                                [style]=\"getStyleWithoutClasses(element?.style).style\"></nz-date-picker>\r\n                        </div>\r\n\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- Button Control -->\r\n                <div *ngSwitchCase=\"'default'\" [class]=\"element.option?.visible ? 'row' : 'hidden'\"\r\n                    (click)=\"invokeOnCardFooter(element)\">\r\n                    <button nz-button [style]=\"getStyleWithoutClasses(element.style).style\"\r\n                        [class]=\"element.option.protected ? 'disabled-button' : getStyleWithoutClasses(element.style).classes\">\r\n                        <ng-container *ngIf=\"!element.caption; else textContent\">\r\n                            <i nz-icon [nzType]=\"element.icon\" nzTheme=\"outline\"></i>\r\n                        </ng-container>\r\n                        <ng-template #textContent>\r\n                            {{ element.caption }}\r\n                        </ng-template>\r\n                    </button>\r\n                </div>\r\n            </ng-container>\r\n        </span>\r\n    </div>\r\n    <!-- bottom pagination on card -->\r\n    <div *ngIf=\"itemInfo?.layoutSchema?.pagination && itemInfo?.layoutSchema?.pagination?.bottom\">\r\n      <vl-pagination [itemInfo]=\"itemInfo\" [pageSize]=\"pageSize\" [currentPage]=\"currentPage\" [pages]=\"pages\"\r\n          (pageSizeChange)=\"invokeOnPageSizeChange($event)\" (onGoToPage)=\"invokeGoToPage($event)\">\r\n      </vl-pagination>\r\n  </div>\r\n</span>" }]
+                    ], standalone: true, template: "<!-- Loader Spinner -->\r\n<div *ngIf=\"isLoading\" class=\"loader-overlay\">\r\n    <div class=\"spinner\"></div>\r\n</div>\r\n<span *ngIf=\"this.selectedLanguageInfo?.selectedLanguage\">\r\n    <!-- top pagination on card -->\r\n    <div *ngIf=\"itemInfo?.layoutSchema?.pagination?.pageSize && itemInfo?.layoutSchema?.pagination?.top\">\r\n        <vl-pagination [itemInfo]=\"itemInfo\" [pageSize]=\"pageSize\" [currentPage]=\"currentPage\" [pages]=\"pages\"\r\n            (pageSizeChange)=\"invokeOnPageSizeChange($event)\" (onGoToPage)=\"invokeGoToPage($event)\">\r\n        </vl-pagination>\r\n    </div>\r\n    <div *ngIf=\"itemInfo?.header?.elements\" [style]=\"getStyleWithoutClasses(itemInfo?.header?.style).style\"\r\n        [class]=\"getStyleWithoutClasses(itemInfo?.header?.style).classes\">\r\n        <span *ngFor=\"let element of itemInfo.header?.elements; let c = index\">\r\n            <ng-container\r\n                [ngSwitch]=\"element.scope?.reference && itemInfo.propertySchema[getScope(element.scope?.reference)] ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.type : 'default'\">\r\n\r\n                <!-- String Control -->\r\n                <div *ngSwitchCase=\"'string'\" [class]=\"element.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n                    <!-- LABEL -->\r\n                    <span *ngIf=\"element.label?.caption\" [style]=\"getStyleWithoutClasses(element.label?.style).style\"\r\n                        [class]=\"element.label?.style?.classes?.[0]\">\r\n                        {{ element.label.caption }}\r\n                    </span>\r\n                </div>\r\n\r\n                <!-- Date control -->\r\n                <div *ngSwitchCase=\"'date'\" class=\"mb-3\">\r\n                    <span *ngIf=\"element.option.protected\" [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n                        [class]=\"element?.label?.style?.classes[0]\">\r\n                        <vl-string [formField]=\"element\" [modalItemInfo]=\"itemInfo\">\r\n                        </vl-string>\r\n                    </span>\r\n                    <div *ngIf=\"!element.option.protected\"\r\n                        [class]=\"element?.layout == 'horizontal' ? 'horizontal-layout' : ''\"\r\n                        [ngClass]=\"element?.style?.classes[0]\" [style]=\"getStyleWithoutClasses(element?.style).style\">\r\n                        <label [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n                            [class]=\"element?.label?.style?.classes[0]\">{{ element.label?.value\r\n                            ?\r\n                            element.label?.value : element.label?.caption ?\r\n                            element.label?.caption :\r\n                            itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption\r\n                            }}</label>\r\n                        <p-datepicker (ngModelChange)=\"dateChangeEvent(element, $event)\" [showIcon]=\"true\" type=\"number\"\r\n                            inputmode=\"numeric\"\r\n                            [dateFormat]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].format : 'yy-mm-dd'\"\r\n                            [(ngModel)]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].value\"\r\n                            (onFocus)=\"forceNumericKeyboard($event)\" (onInput)=\"onDateTyping($event)\"\r\n                            [class]=\"element?.scope?.style?.classes[0]\"\r\n                            [style]=\"getStyleWithoutClasses(element?.scope?.style).style\">\r\n                        </p-datepicker>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- Button Control -->\r\n                <div *ngSwitchCase=\"'default'\" [class]=\"element.option?.visible ? 'row' : 'hidden'\"\r\n                    (click)=\"invokeOnCardHeader(element)\">\r\n                    <button nz-button [style]=\"getStyleWithoutClasses(element.style).style\"\r\n                        [class]=\"element.option.protected ? 'disabled-button' : getStyleWithoutClasses(element.style).classes\">\r\n                        <ng-container *ngIf=\"!element.caption; else textContent\">\r\n                            <i nz-icon [nzType]=\"element.icon\" nzTheme=\"outline\"></i>\r\n                        </ng-container>\r\n                        <ng-template #textContent>\r\n                            {{ element.caption }}\r\n                        </ng-template>\r\n                    </button>\r\n                </div>\r\n            </ng-container>\r\n        </span>\r\n    </div>\r\n    <div [class]=\"itemInfo.class\" [style]=\"itemInfo.style\">\r\n        <div *ngFor=\"let record of itemInfo.data; let k = index\"\r\n            [ngClass]=\"itemInfo.layoutSchema.pagination ? itemInfo.layoutSchema.pagination ? cardPerRow + itemInfo.layoutSchema?.stylePerCard?.elementPerRow[k % itemInfo.layoutSchema?.stylePerCard?.elementPerRow.length] : '' : ''\">\r\n            <div [class]=\"itemInfo.layoutSchema?.stylePerCard?.classes[0]\">\r\n                <div *ngFor=\"let layout of itemInfo.layoutSchema.cards\">\r\n                    <ng-container\r\n                        [ngSwitch]=\"layout?.scope?.reference && itemInfo.propertySchema[getScope(layout.scope?.reference)] ? itemInfo.propertySchema[getScope(layout.scope?.reference)][layout.scope?.reference.split('/').pop()]?.type : layout?.type == 'HorizontalLayout' ? 'HorizontalLayout' : 'default'\">\r\n                        <!-- Image Control -->\r\n                        <div *ngSwitchCase=\"'image'\" [class]=\"layout.option?.visible ? 'row' : 'hidden'\">\r\n                            <img [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n                                [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\"\r\n                                [src]=\"layout?.option?.src ? layout?.option?.src : record[layout.scope?.reference.split('/').pop()]\"\r\n                                alt=\"{{ layout.label ? layout.label : getProperty(layout.scope?.reference).productSchema.caption }}\"\r\n                                (click)=\"showImageDetails(layout.option, record)\" />\r\n                        </div>\r\n\r\n                        <!-- String Control -->\r\n                        <div *ngSwitchCase=\"'string'\" [class]=\"layout.option?.visible ? 'card-field-wrapper' : 'hidden'\"\r\n                            [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n\r\n                            <!-- LABEL -->\r\n                            <span *ngIf=\"layout?.label?.caption\" [class]=\"layout.label?.style?.classes?.[0]\">\r\n                                {{ layout.label.caption }}\r\n                            </span>\r\n\r\n                            <!-- VALUE -->\r\n                            <p *ngIf=\"layout.option?.protected && layout.option?.visible\"\r\n                                [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n                                (click)=\"showLinkDetails(layout.option, record)\">\r\n                                {{\r\n                                record?.[layout.scope?.reference.split('/').pop()]\r\n                                ?? itemInfo.propertySchema[\r\n                                getScope(layout.scope?.reference)\r\n                                ]?.[layout.scope?.reference.split('/').pop()]?.default\r\n                                ?? '--'\r\n                                }}\r\n                            </p>\r\n                        </div>\r\n\r\n                        <!-- Date Control -->\r\n                        <div *ngSwitchCase=\"'date'\" [class]=\"layout.option?.visible ? 'card-field-wrapper' : 'hidden'\"\r\n                            [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n\r\n                            <!-- LABEL -->\r\n                            <span *ngIf=\"layout?.label?.caption\" [class]=\"layout.label?.style?.classes?.[0]\">\r\n                                {{ layout.label.caption }}\r\n                            </span>\r\n\r\n                            <!-- VALUE -->\r\n                            <p *ngIf=\"layout.option?.protected && layout.option?.visible\"\r\n                                [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n                                (click)=\"showLinkDetails(layout.option, record)\">\r\n                                {{\r\n                                record?.[layout.scope?.reference.split('/').pop()]\r\n                                ?? itemInfo.propertySchema[\r\n                                getScope(layout.scope?.reference)\r\n                                ]?.[layout.scope?.reference.split('/').pop()]?.default\r\n                                ?? '--'\r\n                                }}\r\n                            </p>\r\n                        </div>\r\n\r\n                        <!-- Time Control -->\r\n                        <div *ngSwitchCase=\"'time'\" [class]=\"layout.option?.visible ? 'card-field-wrapper' : 'hidden'\"\r\n                            [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n\r\n                            <!-- LABEL -->\r\n                            <span *ngIf=\"layout?.label?.caption\" [class]=\"layout.label?.style?.classes?.[0]\">\r\n                                {{ layout.label.caption }}\r\n                            </span>\r\n\r\n                            <!-- VALUE -->\r\n                            <p *ngIf=\"layout.option?.protected && layout.option?.visible\"\r\n                                [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n                                (click)=\"showLinkDetails(layout.option, record)\">\r\n                                {{\r\n                                record?.[layout.scope?.reference.split('/').pop()]\r\n                                ?? itemInfo.propertySchema[\r\n                                getScope(layout.scope?.reference)\r\n                                ]?.[layout.scope?.reference.split('/').pop()]?.default\r\n                                ?? '--'\r\n                                }}\r\n                            </p>\r\n                        </div>\r\n\r\n                        <!-- number Control -->\r\n                        <div *ngSwitchCase=\"'number'\" [class]=\"layout.option?.visible ? 'row' : 'hidden'\">\r\n                            <h3 *ngIf=\"itemInfo.propertySchema[getScope(layout.scope?.reference)] && itemInfo.propertySchema[getScope(layout.scope?.reference)][layout.scope?.reference.split('/').pop()]?.format.currency\"\r\n                                [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n                                [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n                                {{ record[layout.scope?.reference.split('/').pop()] | currency: layout.option?.currency\r\n                                ?\r\n                                layout.option.currency\r\n                                :\r\n                                'USD' }}\r\n                            </h3>\r\n                        </div>\r\n\r\n                        <!-- Button Control -->\r\n                        <div *ngSwitchCase=\"'default'\" [class]=\"layout.option?.visible ? 'row' : 'hidden'\">\r\n                            <button [style]=\"getStyleWithoutClasses(layout?.style).style\"\r\n                                [class]=\"layout.option.protected ? 'disabled-button' : getStyleWithoutClasses(layout?.style).classes\"\r\n                                (click)=\"invokeButtonClick(layout, record, k)\">\r\n                                <ng-container *ngIf=\"!layout.caption; else textContent\">\r\n                                    <i nz-icon [nzType]=\"layout.icon\" nzTheme=\"outline\"></i>\r\n                                </ng-container>\r\n                                <ng-template #textContent>\r\n                                    {{ layout.caption }}\r\n                                </ng-template>\r\n                            </button>\r\n                        </div>\r\n\r\n                        <!-- HorizontalLayout Control -->\r\n                        <div *ngSwitchCase=\"'HorizontalLayout'\">\r\n                            <div [class]=\"getStyleWithoutClasses(layout?.style).classes\"\r\n                                [style]=\"getStyleWithoutClasses(layout?.style).style\">\r\n                                <ng-container *ngFor=\"let innerLayout of layout.elements\">\r\n                                    <ng-container\r\n                                        [ngSwitch]=\"innerLayout.scope?.reference && itemInfo.propertySchema[getScope(innerLayout.scope?.reference)] ? itemInfo.propertySchema[getScope(innerLayout.scope?.reference)][innerLayout.scope?.reference.split('/').pop()]?.type : 'default'\">\r\n                                        <!-- Image Control -->\r\n                                        <div *ngSwitchCase=\"'image'\"\r\n                                            [class]=\"innerLayout.option?.visible ? 'row' : 'hidden'\">\r\n                                            <img [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n                                                [src]=\"innerLayout?.option?.src ? innerLayout?.option?.src : record[innerLayout.scope?.reference.split('/').pop()]\"\r\n                                                alt=\"{{ innerLayout.label ? innerLayout.label : getProperty(innerLayout.scope?.reference).productSchema.caption }}\"\r\n                                                (click)=\"showImageDetails(innerLayout.option, record)\" />\r\n                                        </div>\r\n\r\n                                        <!-- String Control -->\r\n                                        <div *ngSwitchCase=\"'string'\"\r\n                                            [class]=\"innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n                                            <!-- LABEL -->\r\n                                            <span *ngIf=\"innerLayout.label?.caption\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout.label?.style).style\"\r\n                                                [class]=\"innerLayout.label?.style?.classes?.[0]\">\r\n                                                {{ innerLayout.label.caption }}\r\n                                            </span>\r\n\r\n                                            <!-- VALUE -->\r\n                                            <h3 *ngIf=\"innerLayout.option?.protected && innerLayout.option?.visible\"\r\n                                                [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n                                                (click)=\"showLinkDetails(innerLayout.option, record)\">\r\n\r\n                                                <!-- DATE FORMAT -->\r\n                                                <ng-container *ngIf=\"innerLayout.option?.dateFormat; else checkTime\">\r\n                                                    {{\r\n                                                    record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                    ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n                                                    innerLayout.option.dateFormat)\r\n                                                    : '--'\r\n                                                    }}\r\n                                                </ng-container>\r\n\r\n                                                <!-- TIME FORMAT -->\r\n                                                <ng-template #checkTime>\r\n                                                    <ng-container\r\n                                                        *ngIf=\"innerLayout.option?.timeFormat; else normalValue\">\r\n                                                        {{\r\n                                                        record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                        ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n                                                        innerLayout.option.timeFormat)\r\n                                                        : '--'\r\n                                                        }}\r\n                                                    </ng-container>\r\n                                                </ng-template>\r\n\r\n                                                <!-- NORMAL STRING -->\r\n                                                <ng-template #normalValue>\r\n                                                    {{\r\n                                                    record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                    ?? '--'\r\n                                                    }}\r\n                                                </ng-template>\r\n\r\n                                            </h3>\r\n                                        </div>\r\n\r\n                                        <!-- number Control -->\r\n                                        <div *ngSwitchCase=\"'number'\"\r\n                                            [class]=\"innerLayout.option?.visible ? 'row' : 'hidden'\">\r\n                                            <h3 *ngIf=\"itemInfo.propertySchema[getScope(innerLayout.scope?.reference)] &&itemInfo.propertySchema[getScope(innerLayout.scope?.reference)][innerLayout.scope?.reference.split('/').pop()]?.format.currency\"\r\n                                                [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\">\r\n                                                {{ record[innerLayout.scope?.reference.split('/').pop()] | currency:\r\n                                                innerLayout.option?.currency ?\r\n                                                innerLayout.option.currency\r\n                                                :\r\n                                                'USD' }}\r\n                                            </h3>\r\n                                        </div>\r\n\r\n                                        <!-- Date Control -->\r\n                                        <div *ngSwitchCase=\"'date'\"\r\n                                            [class]=\"innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n                                            <!-- LABEL -->\r\n                                            <span *ngIf=\"innerLayout.label?.caption\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout.label?.style).style\"\r\n                                                [class]=\"innerLayout.label?.style?.classes?.[0]\">\r\n                                                {{ innerLayout.label.caption }}\r\n                                            </span>\r\n\r\n                                            <!-- VALUE -->\r\n                                            <h3 *ngIf=\"innerLayout.option?.protected && innerLayout.option?.visible\"\r\n                                                [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n                                                (click)=\"showLinkDetails(innerLayout.option, record)\">\r\n\r\n                                                <!-- DATE FORMAT -->\r\n                                                <ng-container *ngIf=\"innerLayout.option?.dateFormat; else checkTime\">\r\n                                                    {{\r\n                                                    record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                    ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n                                                    innerLayout.option.dateFormat)\r\n                                                    : '--'\r\n                                                    }}\r\n                                                </ng-container>\r\n\r\n                                                <!-- TIME FORMAT -->\r\n                                                <ng-template #checkTime>\r\n                                                    <ng-container\r\n                                                        *ngIf=\"innerLayout.option?.timeFormat; else normalValue\">\r\n                                                        {{\r\n                                                        record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                        ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n                                                        innerLayout.option.timeFormat)\r\n                                                        : '--'\r\n                                                        }}\r\n                                                    </ng-container>\r\n                                                </ng-template>\r\n\r\n                                                <!-- NORMAL STRING -->\r\n                                                <ng-template #normalValue>\r\n                                                    {{\r\n                                                    record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                    ?? '--'\r\n                                                    }}\r\n                                                </ng-template>\r\n\r\n                                            </h3>\r\n                                        </div>\r\n\r\n                                        <!-- Time Control -->\r\n                                        <div *ngSwitchCase=\"'time'\"\r\n                                            [class]=\"innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n                                            <!-- LABEL -->\r\n                                            <span *ngIf=\"innerLayout.label?.caption\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout.label?.style).style\"\r\n                                                [class]=\"innerLayout.label?.style?.classes?.[0]\">\r\n                                                {{ innerLayout.label.caption }}\r\n                                            </span>\r\n\r\n                                            <!-- VALUE -->\r\n                                            <h3 *ngIf=\"innerLayout.option?.protected && innerLayout.option?.visible\"\r\n                                                [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n                                                [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n                                                (click)=\"showLinkDetails(innerLayout.option, record)\">\r\n\r\n                                                <!-- DATE FORMAT -->\r\n                                                <ng-container *ngIf=\"innerLayout.option?.dateFormat; else checkTime\">\r\n                                                    {{\r\n                                                    record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                    ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n                                                    innerLayout.option.dateFormat)\r\n                                                    : '--'\r\n                                                    }}\r\n                                                </ng-container>\r\n\r\n                                                <!-- TIME FORMAT -->\r\n                                                <ng-template #checkTime>\r\n                                                    <ng-container\r\n                                                        *ngIf=\"innerLayout.option?.timeFormat; else normalValue\">\r\n                                                        {{\r\n                                                        record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                        ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n                                                        innerLayout.option.timeFormat)\r\n                                                        : '--'\r\n                                                        }}\r\n                                                    </ng-container>\r\n                                                </ng-template>\r\n\r\n                                                <!-- NORMAL STRING -->\r\n                                                <ng-template #normalValue>\r\n                                                    {{\r\n                                                    record?.[innerLayout.scope?.reference.split('/').pop()]\r\n                                                    ?? '--'\r\n                                                    }}\r\n                                                </ng-template>\r\n\r\n                                            </h3>\r\n                                        </div>\r\n\r\n                                        <!-- Button Control -->\r\n                                        <div *ngSwitchCase=\"'default'\">\r\n                                            <button nz-button [style]=\"getStyleWithoutClasses(innerLayout?.style).style\"\r\n                                                [class]=\"innerLayout.option?.visible ? innerLayout.option.protected ? 'disabled-button' : getStyleWithoutClasses(innerLayout?.style).classes : 'hidden'\"\r\n                                                (click)=\"invokeButtonClick(innerLayout, record, k)\">\r\n                                                <ng-container *ngIf=\"!innerLayout.caption; else textContent\">\r\n                                                    <i nz-icon [nzType]=\"innerLayout.icon\" nzTheme=\"outline\"></i>\r\n                                                </ng-container>\r\n                                                <ng-template #textContent>\r\n                                                    {{ innerLayout.caption }}\r\n                                                </ng-template>\r\n                                            </button>\r\n                                        </div>\r\n\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"itemInfo?.footer?.elements && itemInfo?.data && itemInfo?.data.length\"\r\n        [class]=\"getStyleWithoutClasses(itemInfo?.footer?.style).classes\">\r\n        <span *ngFor=\"let element of itemInfo.footer?.elements; let c = index\">\r\n            <ng-container\r\n                [ngSwitch]=\"element.scope?.reference && itemInfo.propertySchema[getScope(element.scope?.reference)] ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.type : 'default'\">\r\n\r\n                <!-- Date control -->\r\n                <div *ngSwitchCase=\"'date'\" class=\"form-group mb-3\">\r\n                    <span *ngIf=\"element.option.protected\" [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n                        [class]=\"element?.label?.style?.classes[0]\">\r\n                        <h5>{{\r\n                            itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption\r\n                            }}\r\n                        </h5>\r\n                    </span>\r\n                    <div *ngIf=\"!element.option.protected\">\r\n                        <div [class]=\"element?.layout == 'horizontal' ? 'horizontal-layout' : 'row'\">\r\n                            <label [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n                                [class]=\"element?.label?.style?.classes[0]\">{{ element.label?.value\r\n                                ?\r\n                                element.label?.value : element.label?.caption ?\r\n                                element.label?.caption :\r\n                                itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption\r\n                                }}</label>\r\n\r\n                            <nz-date-picker [required]=\"element.option.required\" [name]=\"element.scope?.reference\"\r\n                                [nzDisabled]=\"element?.option?.disabled\"\r\n                                (ngModelChange)=\"dateChangeEvent(element, $event)\"\r\n                                [nzFormat]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format : 'yyyy-MM-dd'\"\r\n                                [(ngModel)]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].value\"\r\n                                [style]=\"getStyleWithoutClasses(element?.style).style\"></nz-date-picker>\r\n                        </div>\r\n\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- Button Control -->\r\n                <div *ngSwitchCase=\"'default'\" [class]=\"element.option?.visible ? 'row' : 'hidden'\"\r\n                    (click)=\"invokeOnCardFooter(element)\">\r\n                    <button nz-button [style]=\"getStyleWithoutClasses(element.style).style\"\r\n                        [class]=\"element.option.protected ? 'disabled-button' : getStyleWithoutClasses(element.style).classes\">\r\n                        <ng-container *ngIf=\"!element.caption; else textContent\">\r\n                            <i nz-icon [nzType]=\"element.icon\" nzTheme=\"outline\"></i>\r\n                        </ng-container>\r\n                        <ng-template #textContent>\r\n                            {{ element.caption }}\r\n                        </ng-template>\r\n                    </button>\r\n                </div>\r\n            </ng-container>\r\n        </span>\r\n    </div>\r\n    <!-- bottom pagination on card -->\r\n    <div *ngIf=\"itemInfo?.layoutSchema?.pagination && itemInfo?.layoutSchema?.pagination?.bottom\">\r\n        <vl-pagination [itemInfo]=\"itemInfo\" [pageSize]=\"pageSize\" [currentPage]=\"currentPage\" [pages]=\"pages\"\r\n            (pageSizeChange)=\"invokeOnPageSizeChange($event)\" (onGoToPage)=\"invokeGoToPage($event)\">\r\n        </vl-pagination>\r\n    </div>\r\n</span>" }]
         }], ctorParameters: () => [{ type: UtilityService }, { type: i1.Platform }, { type: i1$1.HttpClient }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i4.NzModalService }, { type: i5$1.OAuthService }, { type: RequestService }], propDecorators: { itemInfo: [{
                 type: Input
             }], currentPage: [{
@@ -2365,193 +2543,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
             args: [{ selector: 'vl-time', standalone: true, template: "<p>time works!</p>\r\n" }]
         }] });
 
-class Couchdb {
-    utilityService;
-    couchDbBaseUrl = 'https://couchdb.yomotech.de';
-    constructor(utilityService) {
-        this.utilityService = utilityService;
-    }
-    async getTenantDatabases(tenantKey) {
-        if (!tenantKey || !tenantKey.trim()) {
-            throw new Error('Missing tenantKey');
-        }
-        const response = await fetch(`https://couchdb.yomotech.de/tenant-dbs`, {
-            method: 'GET',
-            headers: {
-                Accept: 'application/json',
-                'X-Tenant-Key': tenantKey.trim(),
-            },
-        });
-        const data = await this.parseJsonOrText(response);
-        if (!response.ok) {
-            throw new Error(`GET /tenant-dbs -> ${response.status} ${this.stringifyErrorDetails(data)}`);
-        }
-        return data;
-    }
-    async parseJsonOrText(response) {
-        const rawText = await response.text();
-        if (!rawText)
-            return null;
-        try {
-            return JSON.parse(rawText);
-        }
-        catch {
-            return rawText;
-        }
-    }
-    stringifyErrorDetails(data) {
-        if (typeof data === 'string')
-            return data;
-        try {
-            return JSON.stringify(data);
-        }
-        catch {
-            return 'Unknown error';
-        }
-    }
-    async getFileContentFromCouchDb(couchDbName, filePath) {
-        try {
-            const dbName = couchDbName;
-            const docId = filePath?.trim();
-            if (!docId) {
-                console.error('Missing file path');
-                return null;
-            }
-            const response = await fetch(this.getDocumentUrl(dbName, docId), {
-                method: 'GET',
-                headers: await this.getReadHeaders(),
-            });
-            const doc = await this.parseJsonOrText(response);
-            if (!response.ok) {
-                console.error(`Failed to fetch file "${docId}" from "${dbName}": ${response.status}`, doc);
-                return null;
-            }
-            if (!doc?.data) {
-                console.error(`Document "${docId}" does not contain file data`);
-                return null;
-            }
-            // do not decode images as utf8 text
-            if (this.isImageFile(doc.name || doc.path || docId, doc.contentType)) {
-                return {
-                    type: 'base64file',
-                    mimeType: doc.contentType || this.getImageMimeType(docId),
-                    base64: doc.data,
-                };
-            }
-            const decodedContent = this.fromBase64(doc.data);
-            if (this.isJsonFile(doc.name || doc.path || docId, doc.contentType)) {
-                try {
-                    return JSON.parse(decodedContent);
-                }
-                catch (jsonError) {
-                    console.error(`Failed to parse JSON for file "${docId}"`, jsonError);
-                    return decodedContent;
-                }
-            }
-            return decodedContent;
-        }
-        catch (error) {
-            console.error(`Unexpected error while fetching file "${filePath}" from "${couchDbName}"`, error);
-            return null;
-        }
-    }
-    isImageFile(fileNameOrPath, contentType) {
-        const lower = (fileNameOrPath || '').toLowerCase();
-        return (lower.endsWith('.png') ||
-            lower.endsWith('.jpg') ||
-            lower.endsWith('.jpeg') ||
-            lower.endsWith('.ico') ||
-            lower.endsWith('.svg') ||
-            (contentType || '').startsWith('image/'));
-    }
-    getImageMimeType(fileNameOrPath) {
-        const lower = (fileNameOrPath || '').toLowerCase();
-        if (lower.endsWith('.png'))
-            return 'image/png';
-        if (lower.endsWith('.jpg') || lower.endsWith('.jpeg'))
-            return 'image/jpeg';
-        if (lower.endsWith('.ico'))
-            return 'image/x-icon';
-        if (lower.endsWith('.svg'))
-            return 'image/svg+xml';
-        return 'image/png';
-    }
-    fromBase64(base64) {
-        try {
-            return decodeURIComponent(escape(atob(base64)));
-        }
-        catch {
-            return atob(base64);
-        }
-    }
-    isJsonFile(fileNameOrPath, contentType) {
-        const lower = (fileNameOrPath || '').toLowerCase();
-        return lower.endsWith('.json') || contentType === 'application/json';
-    }
-    getDocumentUrl(dbName, docId) {
-        return `${this.getDbUrl(dbName)}/${encodeURIComponent(docId)}`;
-    }
-    getDbUrl(dbName) {
-        return `${this.couchDbBaseUrl}/${dbName}`;
-    }
-    async getReadHeaders() {
-        return {
-            Accept: 'application/json',
-            ...(await this.buildTenantHeaders()),
-        };
-    }
-    async buildTenantHeaders() {
-        const tenantKey = await this.utilityService.getStorage('tenantKey');
-        const tenantName = await this.utilityService.getStorage('tenantName');
-        if (tenantKey) {
-            console.log('tenantKey: ', tenantKey);
-            if (typeof tenantKey !== 'string' || !tenantKey.trim()) {
-                throw new Error('Missing tenantKey');
-            }
-            return {
-                'X-Tenant-Key': tenantKey.trim(),
-            };
-        }
-        else {
-            console.log('tenantName: ', tenantName);
-            if (typeof tenantName !== 'string' || !tenantName.trim()) {
-                throw new Error('Missing tenantName');
-            }
-            return {
-                'X-Tenant': tenantName.trim(),
-            };
-        }
-    }
-    async getImageSrcFromCouchDb(couchDbName, filePath) {
-        const dbName = couchDbName;
-        const docId = filePath?.trim();
-        if (!docId) {
-            throw new Error('Missing file path');
-        }
-        const response = await fetch(this.getDocumentUrl(dbName, docId), {
-            method: 'GET',
-            headers: await this.getReadHeaders(),
-        });
-        const doc = await this.parseJsonOrText(response);
-        if (!response.ok) {
-            throw new Error(`Failed to fetch image "${docId}" from "${dbName}": ${response.status} ${this.stringifyErrorDetails(doc)}`);
-        }
-        if (!doc?.data) {
-            throw new Error(`Document "${docId}" does not contain image data`);
-        }
-        const mimeType = doc.contentType || 'image/png';
-        return `data:${mimeType};base64,${doc.data}`;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: Couchdb, deps: [{ token: UtilityService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: Couchdb, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: Couchdb, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: UtilityService }] });
-
 class ConfigService {
     couchdbService;
     utilityService;
@@ -3022,24 +3013,27 @@ class SideMenuComponent {
         }
     }
     async setSettingImages() {
-        const tasks = [];
-        for (const menu of this.settings?.submenu) {
-            if (menu?.submenu?.length) {
-                for (const childMenu of menu.submenu) {
-                    if (childMenu.options && childMenu.options.setImageUrl) {
-                        tasks.push((async () => {
-                            try {
-                                childMenu.icon = await this.couchdbService.getFileContentFromCouchDb(`${this.tenantName}_${this.projectSeleted}`, `${childMenu.icon}`);
-                            }
-                            catch (err) {
-                                console.error("Failed to fetch icon:", err);
-                            }
-                        })());
+        if (this.settings && this.settings.length > 0) {
+            const tasks = [];
+            console.log('this.settings: ', this.settings);
+            for (const menu of this.settings?.submenu) {
+                if (menu?.submenu?.length) {
+                    for (const childMenu of menu.submenu) {
+                        if (childMenu.options && childMenu.options.setImageUrl) {
+                            tasks.push((async () => {
+                                try {
+                                    childMenu.icon = await this.couchdbService.getFileContentFromCouchDb(`${this.tenantName}_${this.projectSeleted}`, `${childMenu.icon}`);
+                                }
+                                catch (err) {
+                                    console.error("Failed to fetch icon:", err);
+                                }
+                            })());
+                        }
                     }
                 }
             }
+            await Promise.all(tasks);
         }
-        await Promise.all(tasks);
         this.settingMenu = JSON.parse(JSON.stringify(this.settings));
     }
     isUrl(value) {