@wavemaker/angular-codegen 11.10.5-rc.6096 → 11.11.0-next.27920

package/angular-app/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wavemaker/angular-app",
-    "version": "11.10.5-rc.6096",
+    "version": "11.11.0-next.27920",
     "scripts": {
         "ng": "ng",
         "start": "./node_modules/.bin/ng serve",
@@ -30,35 +30,24 @@
         "@angular/platform-browser-dynamic": "18.2.13",
         "@angular/router": "18.2.13",
         "@angular/service-worker": "18.2.13",
-        "@awesome-cordova-plugins/app-version": "5.39.1",
-        "@awesome-cordova-plugins/barcode-scanner": "5.39.1",
-        "@awesome-cordova-plugins/calendar": "5.39.1",
-        "@awesome-cordova-plugins/camera": "5.39.1",
-        "@awesome-cordova-plugins/core": "5.39.1",
-        "@awesome-cordova-plugins/device": "5.39.1",
-        "@awesome-cordova-plugins/diagnostic": "5.39.1",
-        "@awesome-cordova-plugins/file": "5.39.1",
-        "@awesome-cordova-plugins/file-opener": "5.39.1",
-        "@awesome-cordova-plugins/geolocation": "5.39.1",
-        "@awesome-cordova-plugins/location-accuracy": "5.39.1",
-        "@awesome-cordova-plugins/media-capture": "5.39.1",
-        "@awesome-cordova-plugins/network": "5.39.1",
-        "@awesome-cordova-plugins/sqlite": "5.39.1",
-        "@awesome-cordova-plugins/vibration": "5.39.1",
         "@babel/runtime": "7.14.8",
+        "@fullcalendar/core": "6.1.15",
+        "@fullcalendar/daygrid": "6.1.15",
+        "@fullcalendar/interaction": "6.1.15",
+        "@fullcalendar/list": "6.1.15",
+        "@fullcalendar/timegrid": "6.1.15",
         "@metrichor/jmespath": "0.3.1",
-        "@wavemaker/custom-widgets-m3": "11.10.5-rc.6096",
+        "@wavemaker/custom-widgets-m3": "11.11.0-next.27920",
         "@wavemaker/focus-trap": "1.0.1",
-        "@wavemaker/foundation-css": "11.10.5-rc.6096",
+        "@wavemaker/foundation-css": "11.11.0-next.27920",
         "@wavemaker/nvd3": "1.8.12",
-        "@wavemaker/variables": "11.10.5-rc.6096",
+        "@wavemaker/variables": "11.11.0-next.27920",
         "@ztree/ztree_v3": "3.5.48",
         "angular-imask": "^7.6.1",
         "angular2-websocket": "0.9.7",
         "core-js": "3.35.1",
         "d3": "7.8.5",
         "esbuild-wasm": "^0.24.2",
-        "fullcalendar": "5.3.1",
         "hammerjs": "2.0.8",
         "iscroll": "5.2.0",
         "jquery": "3.7.1",
@@ -78,7 +67,7 @@
         "tslib": "2.4.1",
         "x2js": "3.4.4",
         "zone.js": "0.14.10",
-        "@wavemaker/app-ng-runtime": "11.10.5-rc.6096"
+        "@wavemaker/app-ng-runtime": "11.11.0-next.27920"
     },
     "devDependencies": {
         "@ampproject/rollup-plugin-closure-compiler": "^0.27.0",
@@ -120,6 +109,7 @@
         "jest-preset-angular": "^14.1.0",
         "license-checker": "25.0.1",
         "moment": "2.29.4",
+        "moment-locales-webpack-plugin": "^1.2.0",
         "moment-timezone": "^0.5.34",
         "ng-packagr": "17.3.0",
         "npm-run-all": "4.1.5",

package/angular-app/src/app/bootstrap-wrapper.component.ts

@@ -0,0 +1,10 @@
+import { Component } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+@Component({
+    standalone: true,
+    template: `<ng-content></ng-content>`,
+    imports: [CommonModule],
+    selector: 'bootstrap-wrapper',
+})
+export class BootstrapWrapperComponent { }

package/angular-app/src/app/lazy-load-scripts.resolve.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
-import { isMobileApp, ScriptLoaderService } from '@wm/core';
+import {  ScriptLoaderService } from '@wm/core';
+
 
 
 @Injectable()
@@ -8,13 +9,5 @@ export class LazyLoadScriptsResolve {
     constructor(private scriptLoaderService: ScriptLoaderService) {}
 
     async resolve() {
-        const scriptsToLoad = [];
-        if(isMobileApp()) {
-            scriptsToLoad.push('node_modules-hammerjs-hammer.min.js');
-            scriptsToLoad.push('node_modules-iscroll-build-iscroll.js');
-        }
-        if (scriptsToLoad.length > 0) {
-            await this.scriptLoaderService.load(...scriptsToLoad);
-        }
     }
 }

package/angular-app/src/index.html

@@ -12,6 +12,7 @@
 
 </head>
 <body class="wm-app">
+    <bootstrap-wrapper></bootstrap-wrapper>
     <app-root></app-root>
 </body>
 </html>

package/angular-app/src/main.ts

@@ -1,20 +1,20 @@
-import { ApplicationRef, enableProdMode, NgModuleRef } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
+import { ApplicationRef, enableProdMode } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
 import { environment } from './environments/environment';
-
 import initWmProjectProperties from './app/wm-project-properties';
 import { WMAppProperties } from './app/wmProperties';
 import * as fontConfig from './font.config';
-
-
-let formatAcceptHeader = (languages: any) => {
-  let result: string[] = [];
-  let addedLanguages = new Set<string>(); // To track already added languages
+import { appConfig } from './app/app.config';
+import { AppComponent } from '@wm/runtime/base';
+import { BootstrapWrapperComponent } from './app/bootstrap-wrapper.component';
+
+// Format Accept-Language header
+const formatAcceptHeader = (languages: string[]): string => {
+  const result: string[] = [];
+  const addedLanguages = new Set<string>(); // To track already added languages
   let qValue = 1.0;
 
-  languages.forEach((lang: any) => {
+  languages.forEach((lang: string) => {
     if (!addedLanguages.has(lang)) {
       // Add the full language (e.g., en-US or en) if not already added
       result.push(`${lang}${qValue === 1.0 ? '' : `;q=${qValue.toFixed(1)}`}`);
@@ -37,31 +37,27 @@ let formatAcceptHeader = (languages: any) => {
   });
 
   return result.join(',');
-}
-WMAppProperties['preferredLanguage'] = formatAcceptHeader(navigator.languages);
-WMAppProperties['fontConfig'] = fontConfig;
+};
 
-
-(window as any)._WM_APP_PROPERTIES  = WMAppProperties
+// Initialize WMAppProperties
+WMAppProperties['preferredLanguage'] = formatAcceptHeader((navigator as any).languages);
+WMAppProperties['fontConfig'] = fontConfig;
+(window as any)._WM_APP_PROPERTIES = WMAppProperties;
 initWmProjectProperties();
 
 if (environment.production) {
-    enableProdMode();
+  enableProdMode();
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-    new Promise<Event | void>( resolve => {
-        if (window['cordova']) {
-            document.addEventListener('deviceready', resolve);
-        } else {
-            resolve();
-        }
-    }).then(() => platformBrowserDynamic().bootstrapModule(AppModule))
-        .then((appModuleRef: NgModuleRef<AppModule>) => {
-            const applicationRef = appModuleRef.injector.get(ApplicationRef);
-            window.addEventListener('unload', () => {
-                applicationRef.components.map(c => c && c.destroy());
-            });
-            //console.timeEnd('bootstrap'), err => console.log(err);
-        }, err => console.log(err));
-});
+  new Promise<Event | void>(resolve => {
+      resolve();
+  }).then(() => bootstrapApplication(AppComponent, appConfig))
+    .then((appRef: ApplicationRef) => {
+      appRef.bootstrap(BootstrapWrapperComponent);
+      window.addEventListener('unload', () => {
+        appRef.components.map(c => c?.destroy());
+      });
+    })
+    .catch(err => console.error('Error bootstrapping app:', err));
+});

package/angular-app/tsconfig.json

@@ -32,9 +32,6 @@
             "@wm/build-task": [
                 "node_modules/@wavemaker/app-ng-runtime/build-task/"
             ],
-            "@wm/mobile-build-task": [
-                "node_modules/@wavemaker/app-ng-runtime/mobile-build-task"
-            ],
             "@wm/core": [
                 "node_modules/@wavemaker/app-ng-runtime/core"
             ],
@@ -56,18 +53,9 @@
             "@wm/components/page": [
                 "node_modules/@wavemaker/app-ng-runtime/components/page/default"
             ],
-            "@wm/mobile/components/basic": [
-                "node_modules/@wavemaker/app-ng-runtime/mobile/components/basic/default"
-            ],
-            "@wm/mobile/components/page": [
-                "node_modules/@wavemaker/app-ng-runtime/mobile/components/page/default"
-            ],
             "@wm/components/dialogs": [
                 "node_modules/@wavemaker/app-ng-runtime/components/dialogs/default"
             ],
-            "@wm/mobile/components/*": [
-                "node_modules/@wavemaker/app-ng-runtime/mobile/components/*"
-            ],
             "@wm/components/*": [
                 "node_modules/@wavemaker/app-ng-runtime/components/*"
             ],
@@ -89,29 +77,11 @@
             "@wm/variables": [
                 "node_modules/@wavemaker/app-ng-runtime/variables"
             ],
-            "@wm/mobile/core": [
-                "node_modules/@wavemaker/app-ng-runtime/mobile/core"
-            ],
-            "@wm/mobile/components": [
-                "node_modules/@wavemaker/app-ng-runtime/mobile/components"
-            ],
-            "@wm/mobile/offline": [
-                "node_modules/@wavemaker/app-ng-runtime/mobile/offline"
-            ],
-            "@wm/mobile/variables": [
-                "node_modules/@wavemaker/app-ng-runtime/mobile/variables"
-            ],
             "@wm/runtime/base": [
                 "node_modules/@wavemaker/app-ng-runtime/runtime/base"
             ],
             "@wm/runtime/dynamic": [
                 "node_modules/@wavemaker/app-ng-runtime/runtime/dynamic"
-            ],
-            "@wm/mobile/runtime": [
-                "node_modules/@wavemaker/app-ng-runtime/mobile/runtime"
-            ],
-            "@wm/mobile/runtime/dynamic": [
-                "node_modules/@wavemaker/app-ng-runtime/mobile/runtime-dynamic"
             ]
         },
         "useDefineForClassFields": false

package/angular-app/tsconfig.web-app.json

@@ -31,9 +31,6 @@
             "@wm/build-task": [
                 "node_modules/@wavemaker/app-ng-runtime/build-task/"
             ],
-            "@wm/mobile-build-task": [
-                "node_modules/@wavemaker/app-ng-runtime/mobile-build-task"
-            ],
             "@wm/core": [
                 "node_modules/@wavemaker/app-ng-runtime/core"
             ],
@@ -70,29 +67,11 @@
             "@wm/variables": [
                 "node_modules/@wavemaker/app-ng-runtime/variables"
             ],
-            "@wm/mobile/core": [
-                "node_modules/@wavemaker/app-ng-runtime/mobile/core"
-            ],
-            "@wm/mobile/components": [
-                "node_modules/@wavemaker/app-ng-runtime/mobile/components"
-            ],
-            "@wm/mobile/offline": [
-                "node_modules/@wavemaker/app-ng-runtime/mobile/offline"
-            ],
-            "@wm/mobile/variables": [
-                "node_modules/@wavemaker/app-ng-runtime/mobile/variables"
-            ],
             "@wm/runtime/base": [
                 "node_modules/@wavemaker/app-ng-runtime/runtime/base"
             ],
             "@wm/runtime/dynamic": [
                 "node_modules/@wavemaker/app-ng-runtime/runtime/dynamic"
-            ],
-            "@wm/mobile/runtime": [
-                "node_modules/@wavemaker/app-ng-runtime/mobile/placeholder/runtime"
-            ],
-            "@wm/mobile/runtime-dynamic": [
-                "node_modules/@wavemaker/app-ng-runtime/mobile/placeholder/runtime/dynamic"
             ]
         }
     },

package/angular-app/wm-custom-webpack.config.js

@@ -2,6 +2,18 @@ const CompressionPlugin = require(`compression-webpack-plugin`);
 const path = require(`path`);
 const {ConcatSource} = require("webpack-sources");
 
+const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
+
+const wmPropertiesPath = path.join(__dirname, '/src/app/wmProperties.js');
+
+const { WMAppProperties } = require(wmPropertiesPath);
+
+const localesToKeep = Object.values(WMAppProperties.supportedLanguages)
+  .map(lang => lang.moment)
+  .filter(locale => locale !== null);
+
+  const includeMomentPlugin = WMAppProperties.languageBundleSources === "STATIC";
+
 class ModifyCssAssetUrlsPlugin {
     apply(compiler) {
         compiler.hooks.compilation.tap('ModifyCssAssetUrlsPlugin', compilation => {
@@ -78,6 +90,12 @@ module.exports = {
             filename: "[name].br[ext]",
             algorithm: "brotliCompress"
         }),
+        // On STATIC WMAppProperties.languageBundleSources, required moment locales are included in the bundle
+        
+        /**
+         * MomentLocalesPlugin is used to include only the required moment locales in the bundle.
+         */
+        ...(includeMomentPlugin ? [ new MomentLocalesPlugin({ localesToKeep }) ] : [])
     ],
     optimization: {
         splitChunks: {

package/dependencies/app.component.html

@@ -1,28 +1,36 @@
-<ng-container *ngIf="startApp">
-    <router-outlet></router-outlet>
-    <div wmContainer partialContainer content="Common" hidden class="ng-hide" *ngIf="isApplicationType"></div>
-    <app-spinner name="globalspinner" classname="global-spinner" role="alert" aria-live="assertive" [attr.aria-label]="spinner.arialabel || 'Loading'" [show]="spinner.show" [spinnermessages]="spinner.messages"></app-spinner>
-    <div wmDialog name="oAuthLoginDialog" title="Application is requesting you to sign in with"
-         close.event="closeOAuthDialog()">
-        <ng-template #dialogBody>
-            <ul class="list-items">
-                <li class="list-item" *ngFor="let provider of providersConfig">
-                    <button class="btn" (click)="provider.invoke()">{{provider.name}}</button>
-                </li>
-            </ul>
-        </ng-template>
-    </div>
-    <div wmConfirmDialog name="_app-confirm-dialog" title.bind="title" message.bind="message" oktext.bind="oktext"
-         canceltext.bind="canceltext" closable="false" iconclass.bind="iconclass"
-         escape.event="onEscape()" ok.event="onOk()" cancel.event="onCancel()" close.event="onClose()" opened.event="onOpen()"></div>
-    <div  *ngIf="!isApplicationType" wmConfirmDialog name="PrefabConfirmDialog" title.bind="title" message.bind="text" oktext.bind="okButtonText"
-         canceltext.bind="cancelButtonText" closable="false" iconclass.bind="iconclass"
-         escape.event="onEscape()" ok.event="onOk()" cancel.event="onCancel()" close.event="onClose()" opened.event="onOpen()"></div>
-    <div  *ngIf="!isApplicationType" wmAlertDialog name="PrefabAlertDialog" title.bind="title" message.bind="text" oktext.bind="okButtonText"
-         canceltext.bind="cancelButtonText" closable="false" iconclass.bind="iconclass"
-         escape.event="onEscape()" ok.event="onOk()" cancel.event="onCancel()" close.event="onClose()" opened.event="onOpen()"></div>
-    <div wmAppExt></div>
-    <i id="wm-mobile-display"></i>
-</ng-container>
+@if (startApp) {
+  <router-outlet></router-outlet>
+  @if (isApplicationType) {
+    <div wmContainer partialContainer content="Common" hidden class="ng-hide"></div>
+  }
+  <app-spinner name="globalspinner" classname="global-spinner" role="alert" aria-live="assertive" [attr.aria-label]="spinner.arialabel || 'Loading'" [show]="spinner.show" [spinnermessages]="spinner.messages"></app-spinner>
+  <div wmDialog name="oAuthLoginDialog" title="Application is requesting you to sign in with"
+    close.event="closeOAuthDialog()">
+    <ng-template #dialogBody>
+      <ul class="list-items">
+        @for (provider of providersConfig; track provider) {
+          <li class="list-item">
+            <button class="btn" (click)="provider.invoke()">{{provider.name}}</button>
+          </li>
+        }
+      </ul>
+    </ng-template>
+  </div>
+  <div wmConfirmDialog name="_app-confirm-dialog" title.bind="title" message.bind="message" oktext.bind="oktext"
+    canceltext.bind="canceltext" closable="false" iconclass.bind="iconclass"
+  escape.event="onEscape()" ok.event="onOk()" cancel.event="onCancel()" close.event="onClose()" opened.event="onOpen()"></div>
+  @if (!isApplicationType) {
+    <div  wmConfirmDialog name="PrefabConfirmDialog" title.bind="title" message.bind="text" oktext.bind="okButtonText"
+      canceltext.bind="cancelButtonText" closable="false" iconclass.bind="iconclass"
+    escape.event="onEscape()" ok.event="onOk()" cancel.event="onCancel()" close.event="onClose()" opened.event="onOpen()"></div>
+  }
+  @if (!isApplicationType) {
+    <div  wmAlertDialog name="PrefabAlertDialog" title.bind="title" message.bind="text" oktext.bind="okButtonText"
+      canceltext.bind="cancelButtonText" closable="false" iconclass.bind="iconclass"
+    escape.event="onEscape()" ok.event="onOk()" cancel.event="onCancel()" close.event="onClose()" opened.event="onOpen()"></div>
+  }
+  <div wmAppExt></div>
+  <i id="wm-mobile-display"></i>
+}
 <!--Dummy container to create the component dynamically-->
 <ng-container #dynamicComponent></ng-container>