mmhglobal-dynamicform 2.36.2 → 2.36.5

package/fesm2020/mmhglobal-dynamicform.mjs

@@ -827,7 +827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
 
 /********** Angular **********/
 class MainService {
-    constructor(router, activatedRoute, modalCtrl, navController, alertService, cacheService, fieldService, resourceApiService, componentErrorHandlerService, webApiService, zcoreService, modalService, storageService, debugService, translationService, signalrService, dialogService, oauth2Service, toastService, authService) {
+    constructor(router, activatedRoute, modalCtrl, navController, alertService, cacheService, fieldService, resourceApiService, componentErrorHandlerService, webApiService, zcoreService, modalService, storageService, debugService, translationService, signalrService, dialogService, oauth2Service, toastService, authService, menuService) {
         this.router = router;
         this.activatedRoute = activatedRoute;
         this.modalCtrl = modalCtrl;
@@ -848,6 +848,7 @@ class MainService {
         this.oauth2Service = oauth2Service;
         this.toastService = toastService;
         this.authService = authService;
+        this.menuService = menuService;
         this.backNavigationPath = [];
         this.routeParam = [];
         this.currentUrl = '';
@@ -893,7 +894,7 @@ class MainService {
         this.previousUrl = this.currentUrl || window.location.pathname;
         this.currentUrl = event.url;
         const triggerType = this.previousUrl === this.currentUrl ? TriggerFromType.refreshStart : TriggerFromType.navigateStart;
-        this.updateAppMonPerfomance(triggerType, this.previousUrl, true).subscribe();
+        this.updateAppMonPerformance(triggerType, this.previousUrl, true).subscribe();
         this.dismissAllOverlays();
         if (this.getStartupPage() === event.url) {
             this.resetRouteParam();
@@ -902,27 +903,44 @@ class MainService {
     handleNavigationEnd(event) {
         const duration = performance.now() - this.navigationStartTime;
         const triggerType = this.previousUrl === this.currentUrl ? TriggerFromType.refreshEnd : TriggerFromType.navigateEnd;
-        this.updateAppMonPerfomance(triggerType, event.urlAfterRedirects, true, duration).subscribe();
+        this.updateAppMonPerformance(triggerType, event.urlAfterRedirects, true, duration).subscribe();
         this.currentUrl = event.urlAfterRedirects;
         console.log(event);
     }
     handleNavigationError(event) {
         const duration = performance.now() - this.navigationStartTime;
-        this.updateAppMonPerfomance(TriggerFromType.navigateError, this.previousUrl, false, duration).subscribe();
+        this.updateAppMonPerformance(TriggerFromType.navigateError, this.previousUrl, false, duration).subscribe();
         console.log(event.error);
         this.removeLastNavigateRecord();
     }
-    updateAppMonPerfomance(triggerType, url, isSuccess, duration) {
+    updateAppMonPerformance(triggerType, url, isSuccess, duration) {
+        // Initialize appmonDomainUrl if missing
         if (!this.resourceApiService.appmonDomainUrl) {
-            this.resourceApiService.appmonDomainUrl = sessionStorage.getItem('AppmonUrl');
+            this.resourceApiService.appmonDomainUrl = sessionStorage.getItem('AppmonDomainUrl') || '';
         }
-        const date = new Date();
-        const pad = (n) => n.toString().padStart(2, '0');
-        const timestamp = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}.${date.getMilliseconds().toString().padStart(7, '0')}`;
-        const currentDomain = window.location.origin; // Extract the current domain
+        // Check for required dependencies
         if (!this.authService.e1Token || !this.resourceApiService.appmonDomainUrl) {
             return of({});
         }
+        const getCurrentTimestamp = () => {
+            const date = new Date();
+            const pad = (n) => n.toString().padStart(2, '0');
+            return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}.${date.getMilliseconds().toString().padStart(7, '0')}`;
+        };
+        const timestamp = getCurrentTimestamp();
+        const currentDomain = window.location.origin;
+        // Determine menu name 
+        const LOGIN_PAGE = 'LoginPage';
+        const HOME_PAGE = 'HomePage';
+        const AUTH_PATH = '/auth';
+        let menuName = sessionStorage.getItem('menuName') || null;
+        if (window.location.pathname === AUTH_PATH) {
+            menuName = LOGIN_PAGE;
+        }
+        else if (window.location.pathname === this.environment.startUpPage) {
+            menuName = HOME_PAGE;
+        }
+        // Build the request payload
         const params = {
             Url: `${currentDomain}${url}`,
             IsAuthenticated: true,
@@ -930,7 +948,7 @@ class MainService {
             Duration: duration ?? null,
             RequestMethod: 'POST',
             UserName: this.authService.userId,
-            UserId: this.authService.e1Token.userName,
+            UserId: this.authService.e1Token?.userName || '',
             Success: isSuccess,
             Environment: 'UI',
             ProjectCode: this.environment.projectCodes[0],
@@ -938,10 +956,13 @@ class MainService {
             ComponentCode: null,
             EventId: null,
             EventType: triggerType,
-            SessionId: sessionStorage.getItem('sessionTabId')
+            SessionId: sessionStorage.getItem('sessionTabId'),
+            MenuName: menuName,
         };
-        // call the wfs webapi
-        return this.webApiService.httpPost$(`${this.resourceApiService.appmonDomainUrl}api/ApiSummaryInfos/`, params);
+        // API Endpoint
+        const apiEndpoint = `${this.resourceApiService.appmonDomainUrl}api/ApiSummaryInfos/`;
+        // Call the web API and handle errors
+        return this.webApiService.httpPost$(apiEndpoint, params);
     }
     dialogOpen(options) {
         return this.dialogService.open(options);
@@ -1197,6 +1218,46 @@ class MainService {
         }
         return false;
     }
+    menuOnClick(item) {
+        const { AppClientPath: appClientPath, URL: pathName, Name: name } = item;
+        const startupPage = this.zcoreService.getEnvironment().startUpPage.toLowerCase();
+        const LAUNCHER = 'launcher';
+        // Save menu name to sessionStorage
+        this.menuService.setMenuName(name);
+        // Handle app client path navigation
+        if (appClientPath && startupPage === LAUNCHER) {
+            return this.handleAppClientNavigation(pathName, appClientPath);
+        }
+        // Determine navigation path
+        const navigationPath = this.getNavigationPath(startupPage, pathName);
+        // Navigate to the determined path
+        return this.navigateToPath(navigationPath, pathName);
+    }
+    handleAppClientNavigation(pathName, appClientPath) {
+        try {
+            ZComponentHelper.openAppClientPath(pathName, appClientPath, this.authService);
+            return false;
+        }
+        catch (error) {
+            console.warn(`Failed to open App Client Path for ${pathName}:`, error);
+            return false;
+        }
+    }
+    getNavigationPath(startupPage, pathName) {
+        const MENU_PAGE_PREFIX = '_';
+        return startupPage.startsWith(MENU_PAGE_PREFIX) ? [startupPage] : [pathName];
+    }
+    navigateToPath(navigationPath, pathName) {
+        try {
+            this.setNavigationParams(navigationPath);
+            this.router.navigate([pathName]);
+            return true;
+        }
+        catch (error) {
+            console.warn(`Navigation to ${pathName} failed:`, error);
+            return false;
+        }
+    }
     navigateFromMenu(pageName) {
         const { startUpPage } = this.environment;
         this.setRouteParam([`${startUpPage}`]);
@@ -2037,14 +2098,14 @@ class MainService {
         }
     }
 }
-MainService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: MainService, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2$1.ModalController }, { token: i2$1.NavController }, { token: i2.AlertService }, { token: i2.CacheService }, { token: i2.FieldService }, { token: i2.ResourceApiService }, { token: i2.ComponentErrorHandlerService }, { token: i2.WebApiService }, { token: i2.ZCoreService }, { token: i3.ModalService }, { token: i2.StorageSessionService }, { token: ZComponentDebugService }, { token: i2.TranslationService }, { token: i2.SignalrService }, { token: i6.DialogService }, { token: i2.OAuth2Service }, { token: i2.ToastService }, { token: i2.AuthService }], target: i0.ɵɵFactoryTarget.Injectable });
+MainService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: MainService, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2$1.ModalController }, { token: i2$1.NavController }, { token: i2.AlertService }, { token: i2.CacheService }, { token: i2.FieldService }, { token: i2.ResourceApiService }, { token: i2.ComponentErrorHandlerService }, { token: i2.WebApiService }, { token: i2.ZCoreService }, { token: i3.ModalService }, { token: i2.StorageSessionService }, { token: ZComponentDebugService }, { token: i2.TranslationService }, { token: i2.SignalrService }, { token: i6.DialogService }, { token: i2.OAuth2Service }, { token: i2.ToastService }, { token: i2.AuthService }, { token: i2.MenuService }], target: i0.ɵɵFactoryTarget.Injectable });
 MainService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: MainService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: MainService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2$1.ModalController }, { type: i2$1.NavController }, { type: i2.AlertService }, { type: i2.CacheService }, { type: i2.FieldService }, { type: i2.ResourceApiService }, { type: i2.ComponentErrorHandlerService }, { type: i2.WebApiService }, { type: i2.ZCoreService }, { type: i3.ModalService }, { type: i2.StorageSessionService }, { type: ZComponentDebugService }, { type: i2.TranslationService }, { type: i2.SignalrService }, { type: i6.DialogService }, { type: i2.OAuth2Service }, { type: i2.ToastService }, { type: i2.AuthService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2$1.ModalController }, { type: i2$1.NavController }, { type: i2.AlertService }, { type: i2.CacheService }, { type: i2.FieldService }, { type: i2.ResourceApiService }, { type: i2.ComponentErrorHandlerService }, { type: i2.WebApiService }, { type: i2.ZCoreService }, { type: i3.ModalService }, { type: i2.StorageSessionService }, { type: ZComponentDebugService }, { type: i2.TranslationService }, { type: i2.SignalrService }, { type: i6.DialogService }, { type: i2.OAuth2Service }, { type: i2.ToastService }, { type: i2.AuthService }, { type: i2.MenuService }]; } });
 function refreshGrid(group) {
     const zgridControl = group["gridOptions"];
     if (zgridControl) {
@@ -3186,7 +3247,9 @@ class ZGridBindingDirective extends DataBindingDirective {
             dataSet.forEach(data => {
                 ignoreTimeZoneColumns.forEach(col => {
                     // Adjust datetime based on the timezone ignoring setting
-                    data[col.Value] = this.componentService.localizeDateTimeByIgnoringTimeZone(data[col.Value], col);
+                    if (data[col.Value]) {
+                        data[col.Value] = this.componentService.localizeDateTimeByIgnoringTimeZone(data[col.Value], col);
+                    }
                 });
             });
         }
@@ -4458,10 +4521,10 @@ class FieldBase {
             this.componentProperties.isRequired = status;
             ZComponentHelper.changeValidator(status, this.group, this.data.Value, this.componentProperties, Validators.required);
             if (this.data.Type === 'ztexteditor') {
-                ZComponentHelper.changeValidator(status, this.group, this.data.Value, this.componentProperties, ZComponentHelper.requiredValidator_WithoutWhiteSpaces_TextEditor);
+                ZComponentHelper.changeValidator(status, this.group, this.data.Value, this.componentProperties, ZComponentHelper.requiredValidator_ExcludeWhiteSpacesAndHTMLTags);
             }
             else {
-                ZComponentHelper.changeValidator(status, this.group, this.data.Value, this.componentProperties, ZComponentHelper.requiredValidator_WithoutWhiteSpaces);
+                ZComponentHelper.changeValidator(status, this.group, this.data.Value, this.componentProperties, ZComponentHelper.requiredValidator_ExcludeWhiteSpaces);
             }
         };
     }
@@ -5345,32 +5408,25 @@ class UiappmenucontentComponent {
         this.authService = authService;
         this.zcoreService = zcoreService;
         this.mainService = mainService;
+        this.MENU_TYPE_DROPDOWN_SUBMENU = 'dropdown-submenu';
     }
     ngOnInit() {
     }
     getDivClass(item) {
-        return (item.Type === 'dropdown-submenu' ? 'flex-show' : 'col-xs-4 col-sm-4 col-md-3 col-xl-2') + " menu-col";
+        if (!item || !item.Type)
+            return 'col-xs-4 col-sm-4 col-md-3 col-xl-2 menu-col';
+        return (item.Type === this.MENU_TYPE_DROPDOWN_SUBMENU ? 'flex-show' : 'col-xs-4 col-sm-4 col-md-3 col-xl-2') + ' menu-col';
     }
     getMenuList(item) {
-        return item.Type === 'dropdown-submenu' ? this.menuService.getMenuFolder(item.URL) : null;
+        if (!item || item.Type !== this.MENU_TYPE_DROPDOWN_SUBMENU)
+            return null;
+        return this.menuService.getMenuFolder(item.URL);
     }
-    menuOnClick(pathName, appClientPath) {
-        const startupPage = this.zcoreService.getEnvironment().startUpPage;
-        if (appClientPath && startupPage.toLocaleLowerCase() == 'launcher') {
-            ZComponentHelper.openAppClientPath(pathName, appClientPath, this.authService);
-            return false;
-        }
-        else {
-            if (startupPage.indexOf('_', 0) == 0) {
-                // menu page
-                this.mainService.setNavigationParams([startupPage]);
-            }
-            else {
-                // home page
-                this.mainService.setNavigationParams([pathName]);
-            }
-            this.router.navigate([pathName]);
-        }
+    trackByFn(index, item) {
+        return item.URL || index.toString(); // Unique identifier or fallback to index
+    }
+    menuOnClick(item) {
+        return this.mainService.menuOnClick(item);
     }
     setMapInput(key, value) {
         const mapInput = document.createElement('input');
@@ -5381,10 +5437,10 @@ class UiappmenucontentComponent {
     }
 }
 UiappmenucontentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: UiappmenucontentComponent, deps: [{ token: i1.Router }, { token: i2.MenuService }, { token: i2.AuthService }, { token: i2.ZCoreService }, { token: MainService }], target: i0.ɵɵFactoryTarget.Component });
-UiappmenucontentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: UiappmenucontentComponent, selector: "app-uiappmenucontent", inputs: { items: "items" }, ngImport: i0, template: "<ion-grid>\r\n  <ion-row>\r\n    <ion-col [ngClass]=\"getDivClass(item)\" *ngFor=\"let item of items; index as i\">\r\n      <div *ngIf=\"item.Type !== 'dropdown-submenu'\" class=\"menu-btn ion-activatable ripple-parent\"\r\n           (click)=\"menuOnClick(item.URL, item.AppClientPath)\">\r\n        <ion-label class=\"menu-btn-label menu-btn-icon\">\r\n          <fa-icon class=\"menu-icon\" [icon]=\"['fas', item.Icon ]\" [inverse]=\"true\"></fa-icon>\r\n          <ion-badge color=\"danger\" class=\"pending-counter\"\r\n                     *ngIf=\"item['PendingCounter'] && item['PendingCounter'] > 0\">\r\n            {{item['PendingCounter']}}\r\n          </ion-badge>\r\n        </ion-label>\r\n        <ion-label class=\"menu-btn-label-text\">{{item.Label}}</ion-label>\r\n        <ion-label *ngIf=\"item.Description\" class=\"menu-btn-label-text menu-btn-label-text-desc\">\r\n          {{item.Description}}\r\n        </ion-label>\r\n        <ion-ripple-effect></ion-ripple-effect>\r\n      </div>\r\n\r\n      <kendo-card *ngIf=\"item.Type === 'dropdown-submenu'\">\r\n        <kendo-card-header class=\"k-hstack\">\r\n          <ion-label class=\"card-title\" kendoCardTitle>{{item.Label}}</ion-label>\r\n        </kendo-card-header>\r\n        <kendo-card-body>\r\n          <div>\r\n            <app-uiappmenucontent [items]=\"getMenuList(item)\"></app-uiappmenucontent>\r\n          </div>\r\n        </kendo-card-body>\r\n      </kendo-card>\r\n\r\n      <!-- <kendo-panelbar class=\"menu-panel\" *ngIf=\"item.Type === 'dropdown-submenu'\" keepItemContent=\"true\">\r\n        <kendo-panelbar-item [expanded]=\"true\">\r\n          <ng-template kendoPanelBarItemTitle>\r\n            <span *ngIf=\"item.Icon\">\r\n              <fa-icon [icon]=\"item.Icon\" class=\"zcard-header-icon\"></fa-icon>\r\n            </span>\r\n            <span *ngIf=\"!item.Icon\">\r\n              <i class=\"fas fa-folder\" style=\"color: #000000\"></i>\r\n            </span>\r\n            <ion-label class=\"zcard-header-title\">{{item.Label}}</ion-label>\r\n          </ng-template>\r\n          <ng-template kendoPanelBarContent class=\"menu-content-temp\">\r\n            <app-uiappmenucontent [items]=\"getMenuList(item)\"></app-uiappmenucontent>\r\n          </ng-template>\r\n        </kendo-panelbar-item>\r\n      </kendo-panelbar> -->\r\n    </ion-col>\r\n  </ion-row>\r\n</ion-grid>\r\n", styles: ["ion-grid{max-width:2000px;margin-top:10px}:host ::ng-deep kendo-card{width:95%!important;margin:auto auto 10px;border-radius:var(--ion-container-border-radius);border-left:5px solid var(--ion-color-primary)}:host ::ng-deep kendo-card .k-card-body{padding-top:0}.menu-col{padding:10px}.menu-btn{margin:0;padding:0;border:0px;display:flex;flex-flow:column;justify-content:center;align-items:stretch;background-color:#fff;cursor:pointer;border-radius:5px;box-shadow:1px 1px 4px #797979;min-width:180px;max-width:250px;min-height:120px;max-height:120px;color:#fff;background:var(--ion-color-primary)}.menu-btn:hover{box-shadow:0 0 2px 2px var(--ion-color-secondary)}.menu-btn:hover .menu-btn-label-text-desc{bottom:0;transition:.5s ease bottom;width:100%}.menu-btn-label-text{text-align:center;font-size:16px;font-weight:600;padding:10px 5px}.menu-btn-label-text-desc{bottom:-100%;transition:.5s ease bottom;display:block;position:absolute;color:#000;font-size:16px;background-color:#fff;padding:8px 10px;border:1px solid #797979;border-radius:5px;text-shadow:0px 0px black;width:100%;text-align:left;font-size:14px;font-weight:500}.ripple-parent{position:relative;overflow:hidden}.menu-btn-label{text-align:center;font-size:15px}.menu-icon{zoom:3;position:relative;top:2px}.menu-btn-icon{background-size:100%}.pending-counter{background-color:#ff243a;border-radius:1em;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;text-overflow:ellipsis;top:12px;display:inline-block;position:absolute;text-align:center;font-size:1.4em;right:32%}\n"], components: [{ type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2$1.IonRow, selector: "ion-row" }, { type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: i2$5.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { type: i2$5.CardHeaderComponent, selector: "kendo-card-header" }, { type: i2$5.CardBodyComponent, selector: "kendo-card-body" }, { type: UiappmenucontentComponent, selector: "app-uiappmenucontent", inputs: ["items"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$5.CardTitleDirective, selector: "[kendoCardTitle]" }] });
+UiappmenucontentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: UiappmenucontentComponent, selector: "app-uiappmenucontent", inputs: { items: "items" }, ngImport: i0, template: "<ion-grid>\r\n  <ion-row>\r\n    <ion-col\r\n      [ngClass]=\"getDivClass(item)\"\r\n      *ngFor=\"let item of items; index as i; trackBy: trackByFn\"\r\n    >\r\n\r\n      <!-- Regular Menu Item (non-submenu) -->\r\n      <div\r\n        *ngIf=\"item.Type !== MENU_TYPE_DROPDOWN_SUBMENU\"\r\n        class=\"menu-btn ion-activatable ripple-parent\"\r\n        (click)=\"menuOnClick(item)\">\r\n        <ion-label class=\"menu-btn-label menu-btn-icon\">\r\n          <fa-icon\r\n            class=\"menu-icon\"\r\n            [icon]=\"['fas', item.Icon]\"\r\n            [inverse]=\"true\"\r\n          ></fa-icon>\r\n\r\n          <!-- 1) Spinner if loading -->\r\n          <ion-badge \r\n            class=\"pending-counter\"\r\n            *ngIf=\"item.counterLoading\">\r\n            <ion-spinner name=\"bubbles\"></ion-spinner>\r\n          </ion-badge>\r\n\r\n          <!-- 2) Numeric badge if loaded & > 0 -->\r\n          <ion-badge\r\n            class=\"pending-counter\"\r\n            *ngIf=\"!item.counterLoading && item.PendingCounter && item.PendingCounter > 0\">\r\n            {{ item.PendingCounter }}\r\n          </ion-badge>\r\n        </ion-label>\r\n\r\n        <ion-label class=\"menu-btn-label-text\">\r\n          {{ item.Label }}\r\n        </ion-label>\r\n\r\n        <ion-label\r\n          *ngIf=\"item.Description\"\r\n          class=\"menu-btn-label-text menu-btn-label-text-desc\"\r\n        >\r\n          {{ item.Description }}\r\n        </ion-label>\r\n        <ion-ripple-effect></ion-ripple-effect>\r\n      </div>\r\n\r\n      <!-- Dropdown Submenu -->\r\n      <kendo-card *ngIf=\"item.Type === MENU_TYPE_DROPDOWN_SUBMENU\">\r\n        <kendo-card-header class=\"k-hstack\">\r\n          <ion-label class=\"card-title\" kendoCardTitle>\r\n            {{ item.Label }}\r\n          </ion-label>\r\n        </kendo-card-header>\r\n        <kendo-card-body>\r\n          <div>\r\n            <app-uiappmenucontent [items]=\"getMenuList(item) || []\"></app-uiappmenucontent>\r\n          </div>\r\n        </kendo-card-body>\r\n      </kendo-card>\r\n    </ion-col>\r\n  </ion-row>\r\n</ion-grid>\r\n", styles: ["ion-grid{max-width:2000px;margin-top:10px}:host ::ng-deep kendo-card{width:95%!important;margin:auto auto 10px;border-radius:var(--ion-container-border-radius);border-left:5px solid var(--ion-color-primary)}:host ::ng-deep kendo-card .k-card-body{padding-top:0}.menu-col{padding:10px}.menu-btn{margin:0;padding:0;border:0px;display:flex;flex-flow:column;align-items:stretch;background-color:#fff;cursor:pointer;border-radius:5px;box-shadow:1px 1px 4px #797979;min-width:180px;max-width:250px;min-height:123px;max-height:123px;color:#fff;background:var(--ion-color-primary)}.menu-btn:hover{box-shadow:0 0 2px 2px var(--ion-color-secondary)}.menu-btn:hover .menu-btn-label-text-desc{bottom:0;transition:.5s ease bottom;width:100%}.menu-btn-label-text{text-align:center;font-size:16px;font-weight:600;padding:10px 5px}.menu-btn-label-text-desc{bottom:-100%;transition:.5s ease bottom;display:block;position:absolute;color:#000;font-size:16px;background-color:#fff;padding:8px 10px;border:1px solid #797979;border-radius:5px;text-shadow:0px 0px black;width:100%;text-align:left;font-size:14px;font-weight:500}.ripple-parent{position:relative;overflow:hidden}.menu-btn-label{text-align:center;font-size:15px}.menu-icon{zoom:3;position:relative;top:2px}.menu-btn-icon{position:relative;background-size:100%;text-align:center;font-size:15px;top:.4em}.pending-counter{position:absolute;top:.4em;right:.4em;background-color:#ff243a;color:#fff;border-radius:1em;min-width:2.5em;max-width:6em;height:1.5em;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:0 .5em;box-sizing:border-box;font-size:1.2rem;line-height:1.1}\n"], components: [{ type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2$1.IonRow, selector: "ion-row" }, { type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: i2$5.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { type: i2$5.CardHeaderComponent, selector: "kendo-card-header" }, { type: i2$5.CardBodyComponent, selector: "kendo-card-body" }, { type: UiappmenucontentComponent, selector: "app-uiappmenucontent", inputs: ["items"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$5.CardTitleDirective, selector: "[kendoCardTitle]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: UiappmenucontentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-uiappmenucontent', template: "<ion-grid>\r\n  <ion-row>\r\n    <ion-col [ngClass]=\"getDivClass(item)\" *ngFor=\"let item of items; index as i\">\r\n      <div *ngIf=\"item.Type !== 'dropdown-submenu'\" class=\"menu-btn ion-activatable ripple-parent\"\r\n           (click)=\"menuOnClick(item.URL, item.AppClientPath)\">\r\n        <ion-label class=\"menu-btn-label menu-btn-icon\">\r\n          <fa-icon class=\"menu-icon\" [icon]=\"['fas', item.Icon ]\" [inverse]=\"true\"></fa-icon>\r\n          <ion-badge color=\"danger\" class=\"pending-counter\"\r\n                     *ngIf=\"item['PendingCounter'] && item['PendingCounter'] > 0\">\r\n            {{item['PendingCounter']}}\r\n          </ion-badge>\r\n        </ion-label>\r\n        <ion-label class=\"menu-btn-label-text\">{{item.Label}}</ion-label>\r\n        <ion-label *ngIf=\"item.Description\" class=\"menu-btn-label-text menu-btn-label-text-desc\">\r\n          {{item.Description}}\r\n        </ion-label>\r\n        <ion-ripple-effect></ion-ripple-effect>\r\n      </div>\r\n\r\n      <kendo-card *ngIf=\"item.Type === 'dropdown-submenu'\">\r\n        <kendo-card-header class=\"k-hstack\">\r\n          <ion-label class=\"card-title\" kendoCardTitle>{{item.Label}}</ion-label>\r\n        </kendo-card-header>\r\n        <kendo-card-body>\r\n          <div>\r\n            <app-uiappmenucontent [items]=\"getMenuList(item)\"></app-uiappmenucontent>\r\n          </div>\r\n        </kendo-card-body>\r\n      </kendo-card>\r\n\r\n      <!-- <kendo-panelbar class=\"menu-panel\" *ngIf=\"item.Type === 'dropdown-submenu'\" keepItemContent=\"true\">\r\n        <kendo-panelbar-item [expanded]=\"true\">\r\n          <ng-template kendoPanelBarItemTitle>\r\n            <span *ngIf=\"item.Icon\">\r\n              <fa-icon [icon]=\"item.Icon\" class=\"zcard-header-icon\"></fa-icon>\r\n            </span>\r\n            <span *ngIf=\"!item.Icon\">\r\n              <i class=\"fas fa-folder\" style=\"color: #000000\"></i>\r\n            </span>\r\n            <ion-label class=\"zcard-header-title\">{{item.Label}}</ion-label>\r\n          </ng-template>\r\n          <ng-template kendoPanelBarContent class=\"menu-content-temp\">\r\n            <app-uiappmenucontent [items]=\"getMenuList(item)\"></app-uiappmenucontent>\r\n          </ng-template>\r\n        </kendo-panelbar-item>\r\n      </kendo-panelbar> -->\r\n    </ion-col>\r\n  </ion-row>\r\n</ion-grid>\r\n", styles: ["ion-grid{max-width:2000px;margin-top:10px}:host ::ng-deep kendo-card{width:95%!important;margin:auto auto 10px;border-radius:var(--ion-container-border-radius);border-left:5px solid var(--ion-color-primary)}:host ::ng-deep kendo-card .k-card-body{padding-top:0}.menu-col{padding:10px}.menu-btn{margin:0;padding:0;border:0px;display:flex;flex-flow:column;justify-content:center;align-items:stretch;background-color:#fff;cursor:pointer;border-radius:5px;box-shadow:1px 1px 4px #797979;min-width:180px;max-width:250px;min-height:120px;max-height:120px;color:#fff;background:var(--ion-color-primary)}.menu-btn:hover{box-shadow:0 0 2px 2px var(--ion-color-secondary)}.menu-btn:hover .menu-btn-label-text-desc{bottom:0;transition:.5s ease bottom;width:100%}.menu-btn-label-text{text-align:center;font-size:16px;font-weight:600;padding:10px 5px}.menu-btn-label-text-desc{bottom:-100%;transition:.5s ease bottom;display:block;position:absolute;color:#000;font-size:16px;background-color:#fff;padding:8px 10px;border:1px solid #797979;border-radius:5px;text-shadow:0px 0px black;width:100%;text-align:left;font-size:14px;font-weight:500}.ripple-parent{position:relative;overflow:hidden}.menu-btn-label{text-align:center;font-size:15px}.menu-icon{zoom:3;position:relative;top:2px}.menu-btn-icon{background-size:100%}.pending-counter{background-color:#ff243a;border-radius:1em;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;text-overflow:ellipsis;top:12px;display:inline-block;position:absolute;text-align:center;font-size:1.4em;right:32%}\n"] }]
+            args: [{ selector: 'app-uiappmenucontent', template: "<ion-grid>\r\n  <ion-row>\r\n    <ion-col\r\n      [ngClass]=\"getDivClass(item)\"\r\n      *ngFor=\"let item of items; index as i; trackBy: trackByFn\"\r\n    >\r\n\r\n      <!-- Regular Menu Item (non-submenu) -->\r\n      <div\r\n        *ngIf=\"item.Type !== MENU_TYPE_DROPDOWN_SUBMENU\"\r\n        class=\"menu-btn ion-activatable ripple-parent\"\r\n        (click)=\"menuOnClick(item)\">\r\n        <ion-label class=\"menu-btn-label menu-btn-icon\">\r\n          <fa-icon\r\n            class=\"menu-icon\"\r\n            [icon]=\"['fas', item.Icon]\"\r\n            [inverse]=\"true\"\r\n          ></fa-icon>\r\n\r\n          <!-- 1) Spinner if loading -->\r\n          <ion-badge \r\n            class=\"pending-counter\"\r\n            *ngIf=\"item.counterLoading\">\r\n            <ion-spinner name=\"bubbles\"></ion-spinner>\r\n          </ion-badge>\r\n\r\n          <!-- 2) Numeric badge if loaded & > 0 -->\r\n          <ion-badge\r\n            class=\"pending-counter\"\r\n            *ngIf=\"!item.counterLoading && item.PendingCounter && item.PendingCounter > 0\">\r\n            {{ item.PendingCounter }}\r\n          </ion-badge>\r\n        </ion-label>\r\n\r\n        <ion-label class=\"menu-btn-label-text\">\r\n          {{ item.Label }}\r\n        </ion-label>\r\n\r\n        <ion-label\r\n          *ngIf=\"item.Description\"\r\n          class=\"menu-btn-label-text menu-btn-label-text-desc\"\r\n        >\r\n          {{ item.Description }}\r\n        </ion-label>\r\n        <ion-ripple-effect></ion-ripple-effect>\r\n      </div>\r\n\r\n      <!-- Dropdown Submenu -->\r\n      <kendo-card *ngIf=\"item.Type === MENU_TYPE_DROPDOWN_SUBMENU\">\r\n        <kendo-card-header class=\"k-hstack\">\r\n          <ion-label class=\"card-title\" kendoCardTitle>\r\n            {{ item.Label }}\r\n          </ion-label>\r\n        </kendo-card-header>\r\n        <kendo-card-body>\r\n          <div>\r\n            <app-uiappmenucontent [items]=\"getMenuList(item) || []\"></app-uiappmenucontent>\r\n          </div>\r\n        </kendo-card-body>\r\n      </kendo-card>\r\n    </ion-col>\r\n  </ion-row>\r\n</ion-grid>\r\n", styles: ["ion-grid{max-width:2000px;margin-top:10px}:host ::ng-deep kendo-card{width:95%!important;margin:auto auto 10px;border-radius:var(--ion-container-border-radius);border-left:5px solid var(--ion-color-primary)}:host ::ng-deep kendo-card .k-card-body{padding-top:0}.menu-col{padding:10px}.menu-btn{margin:0;padding:0;border:0px;display:flex;flex-flow:column;align-items:stretch;background-color:#fff;cursor:pointer;border-radius:5px;box-shadow:1px 1px 4px #797979;min-width:180px;max-width:250px;min-height:123px;max-height:123px;color:#fff;background:var(--ion-color-primary)}.menu-btn:hover{box-shadow:0 0 2px 2px var(--ion-color-secondary)}.menu-btn:hover .menu-btn-label-text-desc{bottom:0;transition:.5s ease bottom;width:100%}.menu-btn-label-text{text-align:center;font-size:16px;font-weight:600;padding:10px 5px}.menu-btn-label-text-desc{bottom:-100%;transition:.5s ease bottom;display:block;position:absolute;color:#000;font-size:16px;background-color:#fff;padding:8px 10px;border:1px solid #797979;border-radius:5px;text-shadow:0px 0px black;width:100%;text-align:left;font-size:14px;font-weight:500}.ripple-parent{position:relative;overflow:hidden}.menu-btn-label{text-align:center;font-size:15px}.menu-icon{zoom:3;position:relative;top:2px}.menu-btn-icon{position:relative;background-size:100%;text-align:center;font-size:15px;top:.4em}.pending-counter{position:absolute;top:.4em;right:.4em;background-color:#ff243a;color:#fff;border-radius:1em;min-width:2.5em;max-width:6em;height:1.5em;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:0 .5em;box-sizing:border-box;font-size:1.2rem;line-height:1.1}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.Router }, { type: i2.MenuService }, { type: i2.AuthService }, { type: i2.ZCoreService }, { type: MainService }]; }, propDecorators: { items: [{
                 type: Input
             }] } });
@@ -8567,11 +8623,8 @@ class ZtextareaComponent extends InputFieldBase {
     }
     setCharCounterDisplayStr() {
         let characterCount = 0;
-        if (!!this.data.MinLengthIgnoreSpace) {
-            characterCount = ZComponentHelper.getValueWithoutSpaces(this.group.zModel[this.data.Value]).length;
-        }
-        else {
-            characterCount = ZComponentHelper.getValueWithoutContinuousSpaces(this.group.zModel[this.data.Value]).length;
+        if (this.group.zModel && this.group.zModel[this.data.Value]) {
+            characterCount = this.group.zModel[this.data.Value].length;
         }
         this.charCounterDisplayStr = `${characterCount} ${this.data.MaxLength ? (' / ' + this.data.MaxLength) : ''}`;
     }
@@ -10234,10 +10287,10 @@ class ZgridComponent extends DataListingFieldBase {
             if (col.IsRequired) {
                 validators.push(Validators.required);
                 if (col.Type === 'ztexteditor') {
-                    validators.push(ZComponentHelper.requiredValidator_WithoutWhiteSpaces_TextEditor);
+                    validators.push(ZComponentHelper.requiredValidator_ExcludeWhiteSpacesAndHTMLTags);
                 }
                 else {
-                    validators.push(ZComponentHelper.requiredValidator_WithoutWhiteSpaces);
+                    validators.push(ZComponentHelper.requiredValidator_ExcludeWhiteSpaces);
                 }
             }
             if (col.ValidatorPattern) {
@@ -10307,10 +10360,10 @@ class ZgridComponent extends DataListingFieldBase {
             if (col.IsRequired) {
                 validators.push(Validators.required);
                 if (col.Type === 'ztexteditor') {
-                    validators.push(ZComponentHelper.requiredValidator_WithoutWhiteSpaces_TextEditor);
+                    validators.push(ZComponentHelper.requiredValidator_ExcludeWhiteSpacesAndHTMLTags);
                 }
                 else {
-                    validators.push(ZComponentHelper.requiredValidator_WithoutWhiteSpaces);
+                    validators.push(ZComponentHelper.requiredValidator_ExcludeWhiteSpaces);
                 }
             }
             if (col.ValidatorPattern) {
@@ -12849,10 +12902,10 @@ class ZudfComponent extends ContainerFieldBase {
             this.componentProperties.isRequired = status;
             ZComponentHelper.changeValidator(status, this.group, this.data.Value, this.componentProperties, Validators.required);
             if (this.data.Type === 'ztexteditor') {
-                ZComponentHelper.changeValidator(status, this.group, this.data.Value, this.componentProperties, ZComponentHelper.requiredValidator_WithoutWhiteSpaces_TextEditor);
+                ZComponentHelper.changeValidator(status, this.group, this.data.Value, this.componentProperties, ZComponentHelper.requiredValidator_ExcludeWhiteSpacesAndHTMLTags);
             }
             else {
-                ZComponentHelper.changeValidator(status, this.group, this.data.Value, this.componentProperties, ZComponentHelper.requiredValidator_WithoutWhiteSpaces);
+                ZComponentHelper.changeValidator(status, this.group, this.data.Value, this.componentProperties, ZComponentHelper.requiredValidator_ExcludeWhiteSpaces);
             }
         };
     }