@wavemaker/angular-codegen 11.8.0-next.141686 → 11.8.0-next.141689

package/angular-app/package-lock.json

@@ -37,7 +37,7 @@
                 "@metrichor/jmespath": "0.3.1",
                 "@wavemaker/focus-trap": "1.0.1",
                 "@wavemaker/nvd3": "1.8.11",
-                "@wavemaker/variables": "11.8.0-next.141686",
+                "@wavemaker/variables": "11.8.0-next.141689",
                 "@ztree/ztree_v3": "3.5.48",
                 "angular-imask": "^7.6.1",
                 "angular2-websocket": "0.9.7",
@@ -89,6 +89,7 @@
                 "fs": "0.0.1-security",
                 "fs-extra": "7.0.1",
                 "jest": "^29.7.0",
+                "jest-canvas-mock": "^2.5.2",
                 "jest-preset-angular": "^14.1.0",
                 "moment": "2.29.4",
                 "moment-timezone": "^0.5.34",
@@ -6452,9 +6453,9 @@
             }
         },
         "node_modules/@wavemaker/variables": {
-            "version": "11.8.0-next.141686",
-            "resolved": "https://registry.npmjs.org/@wavemaker/variables/-/variables-11.8.0-next.141686.tgz",
-            "integrity": "sha512-nfNColsqatYatlben1maah2qHAtWI5KHnIP0qSDYEgt/RHTY/vJn4APy+EjWg6kXgb0WU2aEd/cWXTtI87mHsg==",
+            "version": "11.8.0-next.141689",
+            "resolved": "https://registry.npmjs.org/@wavemaker/variables/-/variables-11.8.0-next.141689.tgz",
+            "integrity": "sha512-qUfz/QsgxrFRfjBOd3XHQKYxdSVOD/KhbYZMWtjHg9KpbbKF+QhAPqF6NNU2U22OKYaZ82E4k+mt36sfg3665w==",
             "dependencies": {
                 "@metrichor/jmespath": "^0.3.1",
                 "he": "^1.2.0",
@@ -9817,6 +9818,12 @@
                 "node": ">=4"
             }
         },
+        "node_modules/cssfontparser": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/cssfontparser/-/cssfontparser-1.2.1.tgz",
+            "integrity": "sha512-6tun4LoZnj7VN6YeegOVb67KBX/7JJsqvj+pv3ZA7F878/eN33AbGa5b/S/wXxS/tcp8nc40xRUrsPlxIyNUPg==",
+            "dev": true
+        },
         "node_modules/cssstyle": {
             "version": "2.3.0",
             "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
@@ -14240,6 +14247,16 @@
                 }
             }
         },
+        "node_modules/jest-canvas-mock": {
+            "version": "2.5.2",
+            "resolved": "https://registry.npmjs.org/jest-canvas-mock/-/jest-canvas-mock-2.5.2.tgz",
+            "integrity": "sha512-vgnpPupjOL6+L5oJXzxTxFrlGEIbHdZqFU+LFNdtLxZ3lRDCl17FlTMM7IatoRQkrcyOTMlDinjUguqmQ6bR2A==",
+            "dev": true,
+            "dependencies": {
+                "cssfontparser": "^1.2.1",
+                "moo-color": "^1.0.2"
+            }
+        },
         "node_modules/jest-changed-files": {
             "version": "29.7.0",
             "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-29.7.0.tgz",
@@ -17471,6 +17488,21 @@
                 "node": "*"
             }
         },
+        "node_modules/moo-color": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/moo-color/-/moo-color-1.0.3.tgz",
+            "integrity": "sha512-i/+ZKXMDf6aqYtBhuOcej71YSlbjT3wCO/4H1j8rPvxDJEifdwgg5MaFyu6iYAT8GBZJg2z0dkgK4YMzvURALQ==",
+            "dev": true,
+            "dependencies": {
+                "color-name": "^1.1.4"
+            }
+        },
+        "node_modules/moo-color/node_modules/color-name": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+            "dev": true
+        },
         "node_modules/morgan": {
             "version": "1.10.0",
             "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz",

package/angular-app/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wavemaker/angular-app",
-    "version": "11.8.0-next.141686",
+    "version": "11.8.0-next.141689",
     "scripts": {
         "ng": "ng",
         "start": "./node_modules/.bin/ng serve",
@@ -46,7 +46,7 @@
         "@metrichor/jmespath": "0.3.1",
         "@wavemaker/focus-trap": "1.0.1",
         "@wavemaker/nvd3": "1.8.11",
-        "@wavemaker/variables": "11.8.0-next.141686",
+        "@wavemaker/variables": "11.8.0-next.141689",
         "@ztree/ztree_v3": "3.5.48",
         "angular-imask": "^7.6.1",
         "angular2-websocket": "0.9.7",
@@ -71,7 +71,7 @@
         "tslib": "2.4.1",
         "x2js": "3.4.4",
         "zone.js": "0.14.7",
-        "@wavemaker/app-ng-runtime": "11.8.0-next.141686"
+        "@wavemaker/app-ng-runtime": "11.8.0-next.141689"
     },
     "devDependencies": {
         "@ampproject/rollup-plugin-closure-compiler": "^0.27.0",
@@ -99,6 +99,7 @@
         "fs": "0.0.1-security",
         "fs-extra": "7.0.1",
         "jest": "^29.7.0",
+        "jest-canvas-mock": "^2.5.2",
         "jest-preset-angular": "^14.1.0",
         "moment": "2.29.4",
         "moment-timezone": "^0.5.34",

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

@@ -2,6 +2,7 @@ import "jest-preset-angular/setup-jest";
 import { ToastrModule } from 'ngx-toastr';
 import { TestBed } from '@angular/core/testing';
 import _ from 'lodash-es';
+import 'jest-canvas-mock';
 
 // Mock global objects if necessary
 global.jQuery = require("jquery");
@@ -10,6 +11,7 @@ global._ = _;
 
 
 global.moment = require("moment");
+
 class IntersectionObserver {
     constructor(callback, options) {
 
@@ -87,3 +89,32 @@ beforeEach(() => {
     },
   });
 });
+
+// jest.setup.js
+Object.defineProperty(global.HTMLMediaElement.prototype, 'load', {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: jest.fn(),
+});
+
+Object.defineProperty(global.HTMLMediaElement.prototype, 'play', {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: jest.fn().mockResolvedValue(),
+});
+
+Object.defineProperty(global.HTMLMediaElement.prototype, 'pause', {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: jest.fn(),
+});
+
+Object.defineProperty(global.HTMLMediaElement.prototype, 'addTextTrack', {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: jest.fn(),
+});

package/build-angular-app.js

@@ -13,9 +13,8 @@
  *  optimizeUIBuild : By default this flag will be true. If it's windows platform we are making the flag to false, it means no optimisation for windows.
  */
 const fs = require('fs');
-const { downloadNPMPackage } = require('./download-packages');
-
 const { executeSyncCmd,  MSG_NG_RUNTIME_LOG, MSG_NG_RUNTIME_SUCCESS } = require('./build-util');
+const os = require("os");
 
 const NPM_PACKAGE_SCOPE = '@wavemaker';
 
@@ -45,24 +44,40 @@ const updateDeployUrl = (args) => {
  * Run the ng build and post build for the project
  */
 const buildAngularApp = (args) => {
+    const HOME_DIR = os.homedir(), APP_NAME = "angular-app";
+    const TARBALL_DOWNLOAD_PATH = (HOME_DIR + '/.wm/node_modules') + '/' + APP_NAME + '/' + args.runtimeUIVersion;
+    const PACKAGE_NAME = NPM_PACKAGE_SCOPE + '/' + APP_NAME + '@' + args.runtimeUIVersion;
+    const TARBALL_NAME = APP_NAME + '-' + args.runtimeUIVersion + '.tgz';
+
+    fs.mkdirSync(TARBALL_DOWNLOAD_PATH, { recursive: true });
+    executeSyncCmd('cd ' + TARBALL_DOWNLOAD_PATH + ` && curl -O $(npm view ${PACKAGE_NAME}  dist.tarball)`, null, `Downloading tarball - ${PACKAGE_NAME} to the location - ${TARBALL_DOWNLOAD_PATH}`);
+    executeSyncCmd('cd ' + TARBALL_DOWNLOAD_PATH + ` && tar -xvf ${TARBALL_NAME}`, null, `Unzipping the tarball - ${TARBALL_NAME}`);
+
     let packageInfo = {
         scope: NPM_PACKAGE_SCOPE,
-        name: 'angular-app',
+        name: APP_NAME,
         version: args.runtimeUIVersion,
-        packageJsonFile: '',
+        packageJsonFile: `${TARBALL_DOWNLOAD_PATH}/package/package.json`,
+        packageJsonLockFile: `${TARBALL_DOWNLOAD_PATH}/package/package-lock.json`,
         successMsg: MSG_NG_RUNTIME_SUCCESS,
         infoMsg: MSG_NG_RUNTIME_LOG
     }
 
     try {
-        // Download angular-app node_modules
-        let pathAngularAppPackage = downloadNPMPackage(packageInfo);
         if (args.optimizeUIBuild) {
+            fs.copyFileSync(TARBALL_DOWNLOAD_PATH + `/package/package.json`, TARBALL_DOWNLOAD_PATH + '/package.json');
+            fs.copyFileSync(TARBALL_DOWNLOAD_PATH + `/package/package-lock.json`, TARBALL_DOWNLOAD_PATH + '/package-lock.json');
+            fs.copyFileSync(TARBALL_DOWNLOAD_PATH + `/package/.npmrc`, TARBALL_DOWNLOAD_PATH + '/.npmrc');
+
+            // Download angular-app node_modules
+            executeSyncCmd('cd ' + TARBALL_DOWNLOAD_PATH + ' && npm install ', null, "Installing app dependencies...");
+
             // Symlink to reuse the existing node_modules
-            fs.symlinkSync(pathAngularAppPackage + `/node_modules`, args.appTarget + '/node_modules', 'dir');
+            fs.symlinkSync(TARBALL_DOWNLOAD_PATH + `/node_modules`, args.appTarget + '/node_modules', 'dir');
         } else {
-            fs.copyFileSync(pathAngularAppPackage + `/node_modules/${packageInfo.scope}/${packageInfo.name}/package.json`, args.appTarget + '/package.json');
-            fs.copyFileSync(pathAngularAppPackage + `/node_modules/${packageInfo.scope}/${packageInfo.name}/package-lock.json`, args.appTarget + '/package-lock.json');
+            fs.copyFileSync(TARBALL_DOWNLOAD_PATH + `/package/package/package.json`, args.appTarget + '/package.json');
+            fs.copyFileSync(TARBALL_DOWNLOAD_PATH + `/package/package-lock.json`, args.appTarget + '/package-lock.json');
+            fs.copyFileSync(TARBALL_DOWNLOAD_PATH + `/package/.npmrc`, args.appTarget + '/.npmrc');
             executeSyncCmd('cd ' + args.appTarget + ` && npm install `, null, MSG_NG_RUNTIME_LOG);
         }
     } catch (err) {

package/dependencies/pipe-provider.cjs.js

@@ -145519,6 +145519,28 @@ let CustomPipeManager$1 = class CustomPipeManager {
         args: [{ providedIn: 'root' }]
     }], null, null); })();
 
+let CustomIconsLoaderService$1 = class CustomIconsLoaderService {
+    constructor() {
+        this.http = inject(HttpClient$1);
+    }
+    load() {
+        this.http.get('./font.config.js', { responseType: 'text' }).subscribe((fontConfig) => {
+            const cssPaths = [], regex = /"csspath":\s*"([^"]+)"/g;
+            let match;
+            while ((match = regex.exec(fontConfig)) !== null) {
+                cssPaths.push(match[1]);
+            }
+            loadStyleSheets$1(cssPaths);
+        }, (error) => { });
+    }
+    static { this.ɵfac = function CustomIconsLoaderService_Factory(t) { return new (t || CustomIconsLoaderService)(); }; }
+    static { this.ɵprov = /*@__PURE__*/ ɵɵdefineInjectable({ token: CustomIconsLoaderService, factory: CustomIconsLoaderService.ɵfac, providedIn: 'root' }); }
+};
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(CustomIconsLoaderService$1, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], null, null); })();
+
 let StatePersistence$1 = class StatePersistence {
     constructor() {
         this.HISTORY_HANDLER = 'replace';
@@ -203725,6 +203747,28 @@ class CustomPipeManager {
         args: [{ providedIn: 'root' }]
     }], null, null); })();
 
+class CustomIconsLoaderService {
+    constructor() {
+        this.http = inject$1(HttpClient);
+    }
+    load() {
+        this.http.get('./font.config.js', { responseType: 'text' }).subscribe((fontConfig) => {
+            const cssPaths = [], regex = /"csspath":\s*"([^"]+)"/g;
+            let match;
+            while ((match = regex.exec(fontConfig)) !== null) {
+                cssPaths.push(match[1]);
+            }
+            loadStyleSheets(cssPaths);
+        }, (error) => { });
+    }
+    static { this.ɵfac = function CustomIconsLoaderService_Factory(t) { return new (t || CustomIconsLoaderService)(); }; }
+    static { this.ɵprov = /*@__PURE__*/ ɵɵdefineInjectable$1({ token: CustomIconsLoaderService, factory: CustomIconsLoaderService.ɵfac, providedIn: 'root' }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata$1(CustomIconsLoaderService, [{
+        type: Injectable$1,
+        args: [{ providedIn: 'root' }]
+    }], null, null); })();
+
 class StatePersistence {
     constructor() {
         this.HISTORY_HANDLER = 'replace';

package/dependencies/transpilation-mobile.cjs.js

@@ -88910,6 +88910,28 @@ class CustomPipeManager {
         args: [{ providedIn: 'root' }]
     }], null, null); })();
 
+class CustomIconsLoaderService {
+    constructor() {
+        this.http = inject(HttpClient);
+    }
+    load() {
+        this.http.get('./font.config.js', { responseType: 'text' }).subscribe((fontConfig) => {
+            const cssPaths = [], regex = /"csspath":\s*"([^"]+)"/g;
+            let match;
+            while ((match = regex.exec(fontConfig)) !== null) {
+                cssPaths.push(match[1]);
+            }
+            loadStyleSheets(cssPaths);
+        }, (error) => { });
+    }
+    static { this.ɵfac = function CustomIconsLoaderService_Factory(t) { return new (t || CustomIconsLoaderService)(); }; }
+    static { this.ɵprov = /*@__PURE__*/ ɵɵdefineInjectable({ token: CustomIconsLoaderService, factory: CustomIconsLoaderService.ɵfac, providedIn: 'root' }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(CustomIconsLoaderService, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], null, null); })();
+
 class StatePersistence {
     constructor() {
         this.HISTORY_HANDLER = 'replace';
@@ -90386,10 +90408,10 @@ register('wm-carousel-template', () => {
         pre: (attrs, shared, parentCarousel) => {
             const carouselRef = parentCarousel.get('carousel_ref');
             return `<div *ngIf="!${carouselRef}.fieldDefs">{{${carouselRef}.nodatamessage}}</div>
-                    <${carouselContentTagName} wmCarouselTemplate  ${getAttrMarkup(attrs)} *ngFor="let item of ${carouselRef}.fieldDefs; let i = index;">
+                    <${carouselContentTagName} wmCarouselTemplate #carouselTemplateRef="carouselTemplateRef" ${getAttrMarkup(attrs)} *ngFor="let item of ${carouselRef}.fieldDefs; let i = index;">
                         <ng-container [ngTemplateOutlet]="carouselTempRef${counter$1}"
                             [ngTemplateOutletContext]="{item:item, index:i}"
-                            [ngTemplateOutletInjector]="${carouselRef}.createCustomInjector('carousel_item_' + i, {item:item, index:i})"></ng-container>
+                            [ngTemplateOutletInjector]="${carouselRef}.createCustomInjector('carousel_item_' + carouselTemplateRef.trackId, {item:item, index:i})"></ng-container>
                     </${carouselContentTagName}>
                     <ng-template #carouselTempRef${counter$1++} let-item="item" let-index="index">`;
         },
@@ -90923,10 +90945,10 @@ register('wm-repeat-template', () => {
             const widgetRef = (parentAccordion && parentAccordion.get('accordion_ref')) || (parentTab && parentTab.get('tabs_ref'));
             if (widgetRef) {
                 return `<div *ngIf="${widgetRef}.fieldDefs && !${widgetRef}.fieldDefs.length">{{${widgetRef}.nodatamessage}}</div>
-                    <${dynamicTemplateTagName} wmRepeatTemplate  ${getAttrMarkup(attrs)} *ngFor="let item of ${widgetRef}.fieldDefs; let i = index;">
+                    <${dynamicTemplateTagName} wmRepeatTemplate #repeatItemRef="repeatItemRef" ${getAttrMarkup(attrs)} *ngFor="let item of ${widgetRef}.fieldDefs; let i = index;">
                         <ng-container [ngTemplateOutlet]="widgetRef${counter}"
                             [ngTemplateOutletContext]="{item:item, index:i}"
-                            [ngTemplateOutletInjector]="${widgetRef}.createCustomInjector('dynamic_widget_'+ i, {item:item, index:i})"></ng-container>
+                            [ngTemplateOutletInjector]="${widgetRef}.createCustomInjector('dynamic_pane_' + repeatItemRef.trackId, {item:item, index:i})"></ng-container>
                     </${dynamicTemplateTagName}>
                     <ng-template #widgetRef${counter++} let-item="item" let-index="index">`;
             }

package/dependencies/transpilation-web.cjs.js

@@ -100101,6 +100101,28 @@ class CustomPipeManager {
         args: [{ providedIn: 'root' }]
     }], null, null); })();
 
+class CustomIconsLoaderService {
+    constructor() {
+        this.http = inject(HttpClient);
+    }
+    load() {
+        this.http.get('./font.config.js', { responseType: 'text' }).subscribe((fontConfig) => {
+            const cssPaths = [], regex = /"csspath":\s*"([^"]+)"/g;
+            let match;
+            while ((match = regex.exec(fontConfig)) !== null) {
+                cssPaths.push(match[1]);
+            }
+            loadStyleSheets(cssPaths);
+        }, (error) => { });
+    }
+    static { this.ɵfac = function CustomIconsLoaderService_Factory(t) { return new (t || CustomIconsLoaderService)(); }; }
+    static { this.ɵprov = /*@__PURE__*/ ɵɵdefineInjectable({ token: CustomIconsLoaderService, factory: CustomIconsLoaderService.ɵfac, providedIn: 'root' }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(CustomIconsLoaderService, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], null, null); })();
+
 class StatePersistence {
     constructor() {
         this.HISTORY_HANDLER = 'replace';
@@ -101577,10 +101599,10 @@ register('wm-carousel-template', () => {
         pre: (attrs, shared, parentCarousel) => {
             const carouselRef = parentCarousel.get('carousel_ref');
             return `<div *ngIf="!${carouselRef}.fieldDefs">{{${carouselRef}.nodatamessage}}</div>
-                    <${carouselContentTagName} wmCarouselTemplate  ${getAttrMarkup(attrs)} *ngFor="let item of ${carouselRef}.fieldDefs; let i = index;">
+                    <${carouselContentTagName} wmCarouselTemplate #carouselTemplateRef="carouselTemplateRef" ${getAttrMarkup(attrs)} *ngFor="let item of ${carouselRef}.fieldDefs; let i = index;">
                         <ng-container [ngTemplateOutlet]="carouselTempRef${counter$1}"
                             [ngTemplateOutletContext]="{item:item, index:i}"
-                            [ngTemplateOutletInjector]="${carouselRef}.createCustomInjector('carousel_item_' + i, {item:item, index:i})"></ng-container>
+                            [ngTemplateOutletInjector]="${carouselRef}.createCustomInjector('carousel_item_' + carouselTemplateRef.trackId, {item:item, index:i})"></ng-container>
                     </${carouselContentTagName}>
                     <ng-template #carouselTempRef${counter$1++} let-item="item" let-index="index">`;
         },
@@ -102114,10 +102136,10 @@ register('wm-repeat-template', () => {
             const widgetRef = (parentAccordion && parentAccordion.get('accordion_ref')) || (parentTab && parentTab.get('tabs_ref'));
             if (widgetRef) {
                 return `<div *ngIf="${widgetRef}.fieldDefs && !${widgetRef}.fieldDefs.length">{{${widgetRef}.nodatamessage}}</div>
-                    <${dynamicTemplateTagName} wmRepeatTemplate  ${getAttrMarkup(attrs)} *ngFor="let item of ${widgetRef}.fieldDefs; let i = index;">
+                    <${dynamicTemplateTagName} wmRepeatTemplate #repeatItemRef="repeatItemRef" ${getAttrMarkup(attrs)} *ngFor="let item of ${widgetRef}.fieldDefs; let i = index;">
                         <ng-container [ngTemplateOutlet]="widgetRef${counter}"
                             [ngTemplateOutletContext]="{item:item, index:i}"
-                            [ngTemplateOutletInjector]="${widgetRef}.createCustomInjector('dynamic_widget_'+ i, {item:item, index:i})"></ng-container>
+                            [ngTemplateOutletInjector]="${widgetRef}.createCustomInjector('dynamic_pane_' + repeatItemRef.trackId, {item:item, index:i})"></ng-container>
                     </${dynamicTemplateTagName}>
                     <ng-template #widgetRef${counter++} let-item="item" let-index="index">`;
             }

package/package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "@wavemaker/angular-codegen",
-    "version": "11.8.0-next.141686",
+    "version": "11.8.0-next.141689",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@wavemaker/angular-codegen",
-            "version": "11.8.0-next.141686",
+            "version": "11.8.0-next.141689",
             "license": "ISC",
             "dependencies": {
                 "cheerio": "^1.0.0-rc.2",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wavemaker/angular-codegen",
-    "version": "11.8.0-next.141686",
+    "version": "11.8.0-next.141689",
     "description": "",
     "main": "index.js",
     "scripts": {