@wavemaker-ai/angular-codegen 1.0.0-rc.647469 → 1.0.0-rc.647502

package/angular-app/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wavemaker-ai/angular-app",
-    "version": "1.0.0-rc.647469",
+    "version": "1.0.0-rc.647502",
     "scripts": {
         "ng": "ng",
         "start": "./node_modules/.bin/ng serve",
@@ -21,28 +21,28 @@
         ".npmrc"
     ],
     "dependencies": {
-        "@angular/animations": "18.2.13",
-        "@angular/common": "18.2.13",
-        "@angular/compiler": "18.2.13",
-        "@angular/core": "18.2.13",
-        "@angular/forms": "18.2.13",
-        "@angular/platform-browser": "18.2.13",
-        "@angular/platform-browser-dynamic": "18.2.13",
-        "@angular/router": "18.2.13",
-        "@angular/service-worker": "18.2.13",
+        "@angular/animations": "20.3.19",
+        "@angular/common": "20.3.19",
+        "@angular/compiler": "20.3.19",
+        "@angular/core": "20.3.19",
+        "@angular/forms": "20.3.19",
+        "@angular/platform-browser": "20.3.19",
+        "@angular/platform-browser-dynamic": "20.3.19",
+        "@angular/router": "20.3.19",
+        "@angular/service-worker": "20.3.19",
         "@fullcalendar/core": "6.1.18",
         "@fullcalendar/daygrid": "6.1.18",
         "@fullcalendar/interaction": "6.1.18",
         "@fullcalendar/list": "6.1.18",
         "@fullcalendar/timegrid": "6.1.18",
         "@metrichor/jmespath": "0.3.1",
-        "@wavemaker-ai/custom-widgets-m3": "1.0.0-rc.647469",
+        "@wavemaker-ai/custom-widgets-m3": "1.0.0-rc.647502",
         "@wavemaker/focus-trap": "1.0.1",
-        "@wavemaker-ai/foundation-css": "1.0.0-rc.647469",
+        "@wavemaker-ai/foundation-css": "1.0.0-rc.647502",
         "@wavemaker/nvd3": "1.8.16",
-        "@wavemaker-ai/variables": "1.0.0-rc.647469",
+        "@wavemaker-ai/variables": "1.0.0-rc.647502",
         "@ztree/ztree_v3": "3.5.48",
-        "acorn": "^8.15.0",
+        "acorn": "8.15.0",
         "angular-imask": "7.6.1",
         "angular2-websocket": "0.9.8",
         "d3": "7.8.5",
@@ -50,80 +50,82 @@
         "jquery": "3.7.1",
         "jquery-ui": "1.14.1",
         "jssha": "3.3.1",
-        "lodash-es": "4.17.21",
+        "lodash-es": "4.18.1",
         "moment": "2.30.1",
-        "moment-timezone": "^0.6.0",
+        "moment-timezone": "0.6.0",
         "ng-circle-progress": "1.7.1",
-        "ngx-bootstrap": "9.0.0",
+        "ngx-bootstrap": "20.0.2",
         "ngx-color-picker": "20.1.1",
-        "ngx-toastr": "19.0.0",
+        "ngx-toastr": "19.1.0",
         "rxjs": "7.8.2",
         "summernote": "0.9.1",
         "tslib": "2.8.1",
         "x2js": "3.4.4",
         "zone.js": "0.15.1",
-        "@wavemaker-ai/app-ng-runtime": "1.0.0-rc.647469"
+        "@wavemaker-ai/app-ng-runtime": "1.0.0-rc.647502"
     },
     "devDependencies": {
-        "@ampproject/rollup-plugin-closure-compiler": "^0.27.0",
-        "@angular-builders/custom-webpack": "18.0.0",
-        "@angular-devkit/build-angular": "18.2.20",
+        "@ampproject/rollup-plugin-closure-compiler": "0.27.0",
+        "@angular-builders/custom-webpack": "20.0.0",
+        "@angular-devkit/build-angular": "20.3.19",
         "@angular-eslint/builder": "20.1.1",
         "@angular-eslint/eslint-plugin": "20.1.1",
         "@angular-eslint/eslint-plugin-template": "20.1.1",
         "@angular-eslint/schematics": "20.1.1",
         "@angular-eslint/template-parser": "20.1.1",
-        "@angular/cli": "18.2.12",
-        "@angular/compiler-cli": "18.2.13",
-        "@angular/language-service": "18.2.13",
-        "@compodoc/compodoc": "^1.1.26",
+        "@angular/cli": "20.3.19",
+        "@angular/compiler-cli": "20.3.19",
+        "@angular/language-service": "20.3.19",
+        "@compodoc/compodoc": "1.2.1",
         "@rollup/plugin-alias": "5.1.1",
         "@rollup/plugin-commonjs": "28.0.6",
         "@rollup/plugin-multi-entry": "6.0.1",
         "@rollup/plugin-node-resolve": "16.0.1",
-        "@rollup/plugin-typescript": "^12.1.4",
-        "@types/jest": "^30.0.0",
-        "@types/jquery": "^3.5.32",
+        "@rollup/plugin-typescript": "12.3.0",
+        "@types/jest": "30.0.0",
+        "@types/jquery": "3.5.32",
         "@types/lodash-es": "4.17.12",
-        "@types/node": "^24.2.0",
+        "@types/node": "24.2.0",
         "@typescript-eslint/eslint-plugin": "8.39.0",
         "@typescript-eslint/parser": "8.39.0",
         "cheerio": "1.1.2",
-        "compression-webpack-plugin": "11.1.0",
+        "compression-webpack-plugin": "12.0.0",
         "core-js": "3.45.0",
-        "eslint": "^8.45.0",
+        "eslint": "8.45.0",
         "fs": "0.0.1-security",
         "fs-extra": "11.3.1",
-        "jest": "^30.0.5",
-        "jest-canvas-mock": "^2.5.2",
-        "jest-environment-jsdom": "^30.0.5",
-        "jest-preset-angular": "^15.0.0",
+        "jest": "30.0.5",
+        "jest-canvas-mock": "2.5.2",
+        "jest-environment-jsdom": "30.0.5",
+        "jest-preset-angular": "15.0.0",
         "license-checker": "25.0.1",
-        "moment-locales-webpack-plugin": "^1.2.0",
-        "ng-packagr": "17.3.0",
-        "owasp-dependency-check": "0.8.1",
+        "moment-locales-webpack-plugin": "1.2.0",
+        "ng-packagr": "20.3.2",
+        "owasp-dependency-check": "1.0.1",
         "rimraf": "6.0.1",
-        "rollup": "4.46.2",
+        "rollup": "4.60.1",
         "sonarqube-scanner": "3.5.0",
-        "terser": "^5.43.1",
-        "typescript": "5.5.4",
+        "terser": "5.43.1",
+        "typescript": "5.9.3",
         "util": "0.12.5",
-        "yargs": "^18.0.0"
+        "yargs": "18.0.0"
     },
     "optionalDependencies": {
         "@lmdb/lmdb-linux-x64": "3.4.2",
-        "@rollup/rollup-darwin-arm64": "4.46.2",
-        "@rollup/rollup-linux-x64-gnu": "4.46.2",
-        "@rollup/rollup-win32-x64": "4.9.5"
+        "@rollup/rollup-darwin-arm64": "4.60.1",
+        "@rollup/rollup-linux-x64-gnu": "4.60.1",
+        "@rollup/rollup-win32-x64": "4.60.1"
     },
     "engines": {
         "node": "22.18.0",
         "npm": "10.9.3"
     },
     "overrides": {
-        "ng-packagr": {
-            "@rollup/wasm-node": "4.40.2"
-        }
+        "ajv": "8.18.0",
+        "picomatch": "4.0.4",
+        "postcss": "8.5.13",
+        "uuid": "14.0.0",
+        "vite": "7.3.2"
     },
     "engineStrict": true
 }

package/angular-app/src/app/wmProperties.js

@@ -0,0 +1,13 @@
+// Default WMAppProperties - will be overridden by application-specific properties
+export const WMAppProperties = {
+    name: 'wavemaker-ng-runtime',
+    type: 'APPLICATION',
+    platformType: 'WEB',
+    supportedLanguages: {
+        'en': { moment: 'en' }
+    },
+    languageBundleSources: 'STATIC',
+    preferredLanguage: 'en',
+    fontConfig: {}
+};
+

package/angular-app/src/framework/services/component-ref-provider.service.ts

@@ -1,44 +1,70 @@
-import { ComponentFactoryResolver, Injectable, Inject } from '@angular/core';
+import { Injectable, Inject, Type } from '@angular/core';
 
 import { ComponentRefProvider, ComponentType } from '@wm/runtime/base';
 import { LazyComponentRefProviderService } from './lazy-component-ref-provider.service';
 
-const componentRefCache = new Map<ComponentType, Map<string, any>>();
+interface ComponentCacheEntry {
+    ref: Type<unknown>;
+    componentFactory?: any; // Legacy support for non-standalone components
+}
+
+const componentCache = new Map<ComponentType, Map<string, ComponentCacheEntry>>();
 
-componentRefCache.set(ComponentType.PAGE, new Map<string, any>());
-componentRefCache.set(ComponentType.PARTIAL, new Map<string, any>());
-componentRefCache.set(ComponentType.PREFAB, new Map<string, any>());
+componentCache.set(ComponentType.PAGE, new Map<string, ComponentCacheEntry>());
+componentCache.set(ComponentType.PARTIAL, new Map<string, ComponentCacheEntry>());
+componentCache.set(ComponentType.PREFAB, new Map<string, ComponentCacheEntry>());
 
 @Injectable()
 export class ComponentRefProviderService extends ComponentRefProvider {
 
-    static registerComponentRef(name: string, type: ComponentType, ref: any, componentFactory?: any) {
-        componentRefCache.get(type).set(name, {ref: ref, componentFactory: componentFactory});
+    /**
+     * Register a component class for dynamic instantiation
+     * @param name - Component name identifier
+     * @param type - Component type (PAGE, PARTIAL, PREFAB)
+     * @param ref - Component class reference
+     * @param componentFactory - Optional legacy component factory (for backward compatibility)
+     */
+    static registerComponentRef(name: string, type: ComponentType, ref: Type<unknown>, componentFactory?: any): void {
+        componentCache.get(type).set(name, { ref, componentFactory });
     }
 
-    constructor(private componentFactoryResolver: ComponentFactoryResolver, @Inject(LazyComponentRefProviderService) private lazyComponentRef) {
+    constructor(@Inject(LazyComponentRefProviderService) private lazyComponentLoader: LazyComponentRefProviderService) {
         super();
     }
 
-    public async getComponentFactoryRef(componentName: string, componentType: ComponentType, options?: {}): Promise<any> {
-        const value = componentRefCache.get(componentType).get(componentName);
-        if (!value && (componentType === ComponentType.PARTIAL || componentType === ComponentType.PREFAB)) {
-            const partialRef = await this.lazyComponentRef.getComponentFactoryRef(
+    /**
+     * Get component class for dynamic instantiation
+     * Returns the component Type which can be used with ViewContainerRef.createComponent()
+     * 
+     * @param componentName - Name of the component to load
+     * @param componentType - Type of component (PAGE, PARTIAL, PREFAB)
+     * @param options - Additional options (e.g., prefab name for partial resolution)
+     * @returns Promise resolving to component Type or null if not found
+     */
+    public async getComponentFactoryRef(componentName: string, componentType: ComponentType, options?: Record<string, unknown>): Promise<Type<unknown> | null> {
+        const cachedEntry = componentCache.get(componentType)?.get(componentName);
+        
+        // Try lazy loading for PARTIAL and PREFAB types if not in cache
+        if (!cachedEntry && (componentType === ComponentType.PARTIAL || componentType === ComponentType.PREFAB)) {
+            const lazyComponent = await this.lazyComponentLoader.getComponentFactoryRef(
                 componentName,
                 componentType,
                 options
             );
-            if (partialRef) {
-                return Promise.resolve(partialRef);
+            if (lazyComponent) {
+                return lazyComponent;
             }
         }
-        // Guard against undefined value
-        if (!value) {
-            return Promise.resolve(null);
-        }
-        if (!value.componentFactory) {
-            value.componentFactory = this.componentFactoryResolver.resolveComponentFactory(value.ref);
+        
+        // Return null if component not found
+        if (!cachedEntry) {
+            console.warn(`Component not found: ${componentName} (type: ${componentType})`);
+            return null;
         }
-        return Promise.resolve(value.componentFactory);
+        
+        // Return component class (modern Angular 13+ approach for standalone components)
+        // For legacy components, the componentFactory would be used, but we return the ref
+        // as createComponent() handles both standalone and non-standalone components
+        return cachedEntry.ref;
     }
 }

package/angular-app/src/framework/services/lazy-component-ref-provider.service.ts

@@ -1,35 +1,57 @@
-import { Injectable, ComponentFactoryResolver } from '@angular/core';
+import { Injectable, Type } from '@angular/core';
 import { PartialRefProvider } from '@wm/core';
 import { ComponentType } from '@wm/runtime/base';
 import { partialLazyModules, prefabLazyModules, prefabPartialLazyModules } from '../util/lazy-module-routes';
 
-type Options = {
-    prefab: string
-};
+interface LazyLoadOptions {
+    prefab?: string;
+}
+
+interface LazyModule {
+    loadComponent: () => Promise<Type<unknown>>;
+}
 
 @Injectable({
     providedIn: 'root'
 })
 export class LazyComponentRefProviderService extends PartialRefProvider {
-    constructor(
-        private componentFactoryResolver: ComponentFactoryResolver
-    ) {
+    constructor() {
         super();
     }
 
-    private getLazyModule(componentName: string, componentType: ComponentType, options?: Options) {
-        if (componentType === ComponentType.PARTIAL && options && options.prefab) {
+    /**
+     * Resolve the appropriate lazy module based on component type and options
+     * @private
+     */
+    private getLazyModule(componentName: string, componentType: ComponentType, options?: LazyLoadOptions): LazyModule | undefined {
+        // Prefab-scoped partial (e.g., partial inside a prefab)
+        if (componentType === ComponentType.PARTIAL && options?.prefab) {
             return prefabPartialLazyModules[`${options.prefab}_${componentName}`];
         }
+        
+        // Standard partial
         if (componentType === ComponentType.PARTIAL) {
             return partialLazyModules[componentName];
         }
+        
+        // Prefab
         if (componentType === ComponentType.PREFAB) {
             return prefabLazyModules[componentName];
         }
+        
+        return undefined;
     }
 
-    public async getComponentFactoryRef(componentName: string, componentType: ComponentType, options?: Options) {
+    /**
+     * Lazy load and return a component class
+     * Returns the component Type which can be used with ViewContainerRef.createComponent()
+     * 
+     * @param componentName - Name of the component to lazy load
+     * @param componentType - Type of component (PARTIAL, PREFAB)
+     * @param options - Additional options (e.g., prefab name for partial resolution)
+     * @returns Promise resolving to component Type or null if loading fails
+     */
+    public async getComponentFactoryRef(componentName: string, componentType: ComponentType, options?: LazyLoadOptions): Promise<Type<unknown> | null> {
         try {
             const lazyModule = this.getLazyModule(componentName, componentType, options);
 
@@ -38,18 +60,19 @@ export class LazyComponentRefProviderService extends PartialRefProvider {
                 return null;
             }
 
-            // Load the component
-            const loadedComponent = await lazyModule.loadComponent();
+            // Dynamically load the component class
+            const componentClass = await lazyModule.loadComponent();
 
-            if (!loadedComponent) {
-                console.error(`Failed to load component ${componentName}`);
+            if (!componentClass) {
+                console.error(`Failed to load component class: ${componentName}`);
                 return null;
             }
 
-            // For standalone components, create a component factory
-            return this.componentFactoryResolver.resolveComponentFactory(loadedComponent);
-        } catch (e) {
-            console.error('Error in getComponentFactoryRef:', e);
+            // Return the component class directly (Angular 13+ standalone component approach)
+            // This can be used directly with ViewContainerRef.createComponent()
+            return componentClass;
+        } catch (error) {
+            console.error(`Error lazy loading component ${componentName}:`, error);
             return null;
         }
     }

package/angular-app/src/setup-jest.js

@@ -69,7 +69,7 @@ import "jquery-ui/ui/widgets/resizable.js";
 import "jquery-ui/ui/widgets/sortable.js";
 import "jquery-ui/ui/widgets/draggable.js";
 import "jquery-ui/ui/widgets/droppable.js";
-import "libraries/scripts/jquery.ui.touch-punch/jquery.ui.touch-punch.min.js";
+import "projects/jquery.ui.touch-punch/jquery.ui.touch-punch.min.js";
 import "moment-timezone/builds/moment-timezone.min.js";
 import "iscroll/build/iscroll.js";
 import "tabbable/dist/index.umd.min.js";

package/angular-app/src/typings.d.ts

@@ -0,0 +1,27 @@
+// Global type declarations for jQuery extensions
+// Using declaration merging to extend existing jQuery types
+
+declare global {
+    interface JQueryStatic {
+        ui?: {
+            widget?: any;
+            [key: string]: any;
+        };
+    }
+
+    interface JQuery {
+        DataTable?(options?: any): any;
+        destroy?(): void;
+        datatable?(method: string, ...args: any[]): any;
+        datatable?(options?: any): any;
+    }
+    
+    // Extend jQuery.fn namespace for DataTable plugin
+    namespace JQueryStatic {
+        interface fn {
+            DataTable?: any;
+        }
+    }
+}
+
+export {};

package/angular-app/tsconfig.json

@@ -89,6 +89,6 @@
     "angularCompilerOptions": {
         "compilationMode": "full",
         "strictMetadataEmit": false,
-        "fullTemplateTypeCheck": false
+        "strictTemplates": false
     }
 }