@wavemaker/app-ng-runtime 12.0.0-next.44005 → 12.0.0-next.45002

app-ng-runtime/core/types/types.d.ts

@@ -1,7 +1,8 @@
 export declare enum ComponentType {
     PAGE = 0,
     PREFAB = 1,
-    PARTIAL = 2
+    PARTIAL = 2,
+    WIDGET = 3
 }
 export declare class IDataSource {
     execute: (operation: Operation, options?: any) => boolean | string | Promise<any>;
@@ -196,4 +197,7 @@ export declare abstract class DynamicComponentRefProvider {
 export declare abstract class PartialRefProvider {
     abstract getComponentFactoryRef(partialName: string, componentType: ComponentType, options?: any): Promise<any>;
 }
+export declare abstract class CustomWidgetRefProvider {
+    abstract getComponentFactoryRef(customWidgetName: string, componentType: ComponentType, options?: any): Promise<any>;
+}
 export {};

app-ng-runtime/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wavemaker/app-ng-runtime",
-    "version": "12.0.0-next.44005",
+    "version": "12.0.0-next.45002",
     "description": "All modules required for a wavemaker application.",
     "main": "index.js",
     "scripts": {

app-ng-runtime/runtime/base/bundles/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/router'), require('@angular/common'), require('@wm/core'), require('@wm/security'), require('@wm/variables'), require('@wm/components/page'), require('rxjs'), require('@wm/components/base'), require('tslib'), require('@wm/components/prefab'), require('@angular/common/http'), require('@angular/platform-browser'), require('@angular/forms'), require('ngx-toastr'), require('@wm/components/dialogs'), require('@wm/components/dialogs/confirm-dialog'), require('@wm/components/dialogs/design-dialog'), require('@wm/mobile/runtime'), require('@wm/http'), require('@wm/oAuth'), require('ngx-bootstrap/chronos'), require('ngx-bootstrap/datepicker'), require('ngx-bootstrap/utils'), require('@wm/components/dialogs/alert-dialog'), require('rxjs/operators'), require('@wm/transpiler'), require('@wm/build-task'), require('@wm/components/page/footer'), require('@wm/components/page/header'), require('@wm/components/page/left-panel'), require('@wm/components/page/right-panel'), require('@wm/components/page/top-nav'), require('@wm/components/basic'), require('@wm/components/basic/progress'), require('@wm/components/basic/rich-text-editor'), require('@wm/components/basic/search'), require('@wm/components/basic/tree'), require('@wm/components/input/calendar'), require('@wm/components/input/chips'), require('@wm/components/input/color-picker'), require('@wm/components/input/currency'), require('@wm/components/input/epoch'), require('@wm/components/input/file-upload'), require('@wm/components/input'), require('@wm/components/input/rating'), require('@wm/components/input/slider'), require('@wm/components/data/card'), require('@wm/components/data/form'), require('@wm/components/data/list'), require('@wm/components/data/live-table'), require('@wm/components/data/pagination'), require('@wm/components/data/table'), require('@wm/components/chart'), require('@wm/components/containers/accordion'), require('@wm/components/containers/linear-layout'), require('@wm/components/containers/layout-grid'), require('@wm/components/containers/panel'), require('@wm/components/containers/tabs'), require('@wm/components/containers/tile'), require('@wm/components/containers/wizard'), require('@wm/components/dialogs/iframe-dialog'), require('@wm/components/dialogs/login-dialog'), require('@wm/components/dialogs/partial-dialog'), require('@wm/components/navigation/breadcrumb'), require('@wm/components/navigation/menu'), require('@wm/components/navigation/navbar'), require('@wm/components/navigation/popover'), require('@wm/components/advanced/carousel'), require('@wm/components/advanced/login'), require('@wm/components/advanced/marquee'), require('ngx-bootstrap/timepicker'), require('ngx-bootstrap/dropdown'), require('ngx-bootstrap/pagination'), require('ngx-bootstrap/typeahead'), require('ngx-bootstrap/progressbar'), require('ngx-bootstrap/carousel'), require('ngx-bootstrap/popover'), require('ng-circle-progress'), require('ngx-bootstrap/tooltip')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/router', '@angular/common', '@wm/core', '@wm/security', '@wm/variables', '@wm/components/page', 'rxjs', '@wm/components/base', 'tslib', '@wm/components/prefab', '@angular/common/http', '@angular/platform-browser', '@angular/forms', 'ngx-toastr', '@wm/components/dialogs', '@wm/components/dialogs/confirm-dialog', '@wm/components/dialogs/design-dialog', '@wm/mobile/runtime', '@wm/http', '@wm/oAuth', 'ngx-bootstrap/chronos', 'ngx-bootstrap/datepicker', 'ngx-bootstrap/utils', '@wm/components/dialogs/alert-dialog', 'rxjs/operators', '@wm/transpiler', '@wm/build-task', '@wm/components/page/footer', '@wm/components/page/header', '@wm/components/page/left-panel', '@wm/components/page/right-panel', '@wm/components/page/top-nav', '@wm/components/basic', '@wm/components/basic/progress', '@wm/components/basic/rich-text-editor', '@wm/components/basic/search', '@wm/components/basic/tree', '@wm/components/input/calendar', '@wm/components/input/chips', '@wm/components/input/color-picker', '@wm/components/input/currency', '@wm/components/input/epoch', '@wm/components/input/file-upload', '@wm/components/input', '@wm/components/input/rating', '@wm/components/input/slider', '@wm/components/data/card', '@wm/components/data/form', '@wm/components/data/list', '@wm/components/data/live-table', '@wm/components/data/pagination', '@wm/components/data/table', '@wm/components/chart', '@wm/components/containers/accordion', '@wm/components/containers/linear-layout', '@wm/components/containers/layout-grid', '@wm/components/containers/panel', '@wm/components/containers/tabs', '@wm/components/containers/tile', '@wm/components/containers/wizard', '@wm/components/dialogs/iframe-dialog', '@wm/components/dialogs/login-dialog', '@wm/components/dialogs/partial-dialog', '@wm/components/navigation/breadcrumb', '@wm/components/navigation/menu', '@wm/components/navigation/navbar', '@wm/components/navigation/popover', '@wm/components/advanced/carousel', '@wm/components/advanced/login', '@wm/components/advanced/marquee', 'ngx-bootstrap/timepicker', 'ngx-bootstrap/dropdown', 'ngx-bootstrap/pagination', 'ngx-bootstrap/typeahead', 'ngx-bootstrap/progressbar', 'ngx-bootstrap/carousel', 'ngx-bootstrap/popover', 'ng-circle-progress', 'ngx-bootstrap/tooltip'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.runtime = global.wm.runtime || {}, global.wm.runtime.base = {}), global.ng.core, global.ng.router, global.ng.common, global.wm.core, global.wm.security, global.wm.variables, global.wm.components.page, global.rxjs, global.wm.components.base, global.tslib, global.wm.components.prefab, global.ng.common.http, global.ng.platformBrowser, global.ng.forms, global.ngxToastr, global.wm.components.dialogs, global.wm.components.dialogs.confirmdialog, global.wm.components.dialogs.designdialog, global.wm.mobile.runtime, global.wm.http, global.wm.oAuth, global.chronos, global.datepicker, global.utils, global.wm.components.dialogs.alertdialog, global.rxjs.operators, global.wm.transpiler, global.wm.buildTask, global.wm.components.page.footer, global.wm.components.page.header, global.wm.components.page.leftpanel, global.wm.components.page.rightpanel, global.wm.components.page.topnav, global.wm.components.basic, global.wm.components.basic.progress, global.wm.components.basic.richtexteditor, global.wm.components.basic.search, global.wm.components.basic.tree, global.wm.components.input.calendar, global.wm.components.input.chips, global.wm.components.input.colorpicker, global.wm.components.input.currency, global.wm.components.input.epoch, global.wm.components.input.fileupload, global.wm.components.input, global.wm.components.input.rating, global.wm.components.input.slider, global.wm.components.data.card, global.wm.components.data.form, global.wm.components.data.list, global.wm.components.data.livetable, global.wm.components.data.pagination, global.wm.components.data.table, global.wm.components.chart, global.wm.components.containers.accordion, global.wm.components.containers.linearlayout, global.wm.components.containers.layoutgrid, global.wm.components.containers.panel, global.wm.components.containers.tabs, global.wm.components.containers.tile, global.wm.components.containers.wizard, global.wm.components.dialogs.iframedialog, global.wm.components.dialogs.logindialog, global.wm.components.dialogs.partialdialog, global.wm.components.navigation.breadcrumb, global.wm.components.navigation.menu, global.wm.components.navigation.navbar, global.wm.components.navigation.popover, global.wm.components.advanced.carousel, global.wm.components.advanced.login, global.wm.components.advanced.marquee, global.timepicker, global.dropdown, global.pagination, global.typeahead, global.progressbar, global.carousel, global.popover, global.ngCircleProgress, global.tooltip));
-})(this, (function (exports, i0, i1$1, i1$2, i1, i2, i4, page, rxjs, i3, tslib, i2$3, i1$5, i1$4, forms, i1$3, dialogs, i9, i10, i1$6, http, i2$2, chronos, i2$1, utils, i11, operators, transpiler, buildTask, footer, header, leftPanel, rightPanel, topNav, basic, progress, richTextEditor, search, tree, calendar, chips, colorPicker, currency, epoch, fileUpload, input, rating, slider, card, form, list, liveTable, pagination$1, table, chart, accordion, linearLayout, layoutGrid, panel, tabs, tile, wizard, iframeDialog, loginDialog, partialDialog, breadcrumb, menu, navbar, popover$1, carousel$1, login, marquee, timepicker, dropdown, pagination, typeahead, progressbar, carousel, popover, ngCircleProgress, tooltip) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/router'), require('@angular/common'), require('@wm/core'), require('@wm/security'), require('@wm/variables'), require('@wm/components/page'), require('rxjs'), require('@wm/components/base'), require('tslib'), require('@wm/components/prefab'), require('@angular/common/http'), require('@angular/platform-browser'), require('@angular/forms'), require('ngx-toastr'), require('@wm/components/dialogs'), require('@wm/components/dialogs/confirm-dialog'), require('@wm/components/dialogs/design-dialog'), require('@wm/mobile/runtime'), require('@wm/http'), require('@wm/oAuth'), require('ngx-bootstrap/chronos'), require('ngx-bootstrap/datepicker'), require('ngx-bootstrap/utils'), require('@wm/components/dialogs/alert-dialog'), require('rxjs/operators'), require('@wm/transpiler'), require('@wm/build-task'), require('@wm/components/page/footer'), require('@wm/components/page/header'), require('@wm/components/page/left-panel'), require('@wm/components/page/right-panel'), require('@wm/components/page/top-nav'), require('@wm/components/basic'), require('@wm/components/basic/progress'), require('@wm/components/basic/rich-text-editor'), require('@wm/components/basic/search'), require('@wm/components/basic/tree'), require('@wm/components/input/calendar'), require('@wm/components/input/chips'), require('@wm/components/input/color-picker'), require('@wm/components/input/currency'), require('@wm/components/input/epoch'), require('@wm/components/input/file-upload'), require('@wm/components/input'), require('@wm/components/input/rating'), require('@wm/components/input/slider'), require('@wm/components/data/card'), require('@wm/components/data/form'), require('@wm/components/data/list'), require('@wm/components/data/live-table'), require('@wm/components/data/pagination'), require('@wm/components/data/table'), require('@wm/components/chart'), require('@wm/components/containers/accordion'), require('@wm/components/containers/linear-layout'), require('@wm/components/containers/layout-grid'), require('@wm/components/containers/panel'), require('@wm/components/containers/tabs'), require('@wm/components/containers/tile'), require('@wm/components/containers/wizard'), require('@wm/components/dialogs/iframe-dialog'), require('@wm/components/dialogs/login-dialog'), require('@wm/components/dialogs/partial-dialog'), require('@wm/components/navigation/breadcrumb'), require('@wm/components/navigation/menu'), require('@wm/components/navigation/navbar'), require('@wm/components/navigation/popover'), require('@wm/components/advanced/carousel'), require('@wm/components/advanced/login'), require('@wm/components/advanced/marquee'), require('@wm/components/advanced/custom'), require('ngx-bootstrap/timepicker'), require('ngx-bootstrap/dropdown'), require('ngx-bootstrap/pagination'), require('ngx-bootstrap/typeahead'), require('ngx-bootstrap/progressbar'), require('ngx-bootstrap/carousel'), require('ngx-bootstrap/popover'), require('ng-circle-progress'), require('ngx-bootstrap/tooltip')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/router', '@angular/common', '@wm/core', '@wm/security', '@wm/variables', '@wm/components/page', 'rxjs', '@wm/components/base', 'tslib', '@wm/components/prefab', '@angular/common/http', '@angular/platform-browser', '@angular/forms', 'ngx-toastr', '@wm/components/dialogs', '@wm/components/dialogs/confirm-dialog', '@wm/components/dialogs/design-dialog', '@wm/mobile/runtime', '@wm/http', '@wm/oAuth', 'ngx-bootstrap/chronos', 'ngx-bootstrap/datepicker', 'ngx-bootstrap/utils', '@wm/components/dialogs/alert-dialog', 'rxjs/operators', '@wm/transpiler', '@wm/build-task', '@wm/components/page/footer', '@wm/components/page/header', '@wm/components/page/left-panel', '@wm/components/page/right-panel', '@wm/components/page/top-nav', '@wm/components/basic', '@wm/components/basic/progress', '@wm/components/basic/rich-text-editor', '@wm/components/basic/search', '@wm/components/basic/tree', '@wm/components/input/calendar', '@wm/components/input/chips', '@wm/components/input/color-picker', '@wm/components/input/currency', '@wm/components/input/epoch', '@wm/components/input/file-upload', '@wm/components/input', '@wm/components/input/rating', '@wm/components/input/slider', '@wm/components/data/card', '@wm/components/data/form', '@wm/components/data/list', '@wm/components/data/live-table', '@wm/components/data/pagination', '@wm/components/data/table', '@wm/components/chart', '@wm/components/containers/accordion', '@wm/components/containers/linear-layout', '@wm/components/containers/layout-grid', '@wm/components/containers/panel', '@wm/components/containers/tabs', '@wm/components/containers/tile', '@wm/components/containers/wizard', '@wm/components/dialogs/iframe-dialog', '@wm/components/dialogs/login-dialog', '@wm/components/dialogs/partial-dialog', '@wm/components/navigation/breadcrumb', '@wm/components/navigation/menu', '@wm/components/navigation/navbar', '@wm/components/navigation/popover', '@wm/components/advanced/carousel', '@wm/components/advanced/login', '@wm/components/advanced/marquee', '@wm/components/advanced/custom', 'ngx-bootstrap/timepicker', 'ngx-bootstrap/dropdown', 'ngx-bootstrap/pagination', 'ngx-bootstrap/typeahead', 'ngx-bootstrap/progressbar', 'ngx-bootstrap/carousel', 'ngx-bootstrap/popover', 'ng-circle-progress', 'ngx-bootstrap/tooltip'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.runtime = global.wm.runtime || {}, global.wm.runtime.base = {}), global.ng.core, global.ng.router, global.ng.common, global.wm.core, global.wm.security, global.wm.variables, global.wm.components.page, global.rxjs, global.wm.components.base, global.tslib, global.wm.components.prefab, global.ng.common.http, global.ng.platformBrowser, global.ng.forms, global.ngxToastr, global.wm.components.dialogs, global.wm.components.dialogs.confirmdialog, global.wm.components.dialogs.designdialog, global.wm.mobile.runtime, global.wm.http, global.wm.oAuth, global.chronos, global.datepicker, global.utils, global.wm.components.dialogs.alertdialog, global.rxjs.operators, global.wm.transpiler, global.wm.buildTask, global.wm.components.page.footer, global.wm.components.page.header, global.wm.components.page.leftpanel, global.wm.components.page.rightpanel, global.wm.components.page.topnav, global.wm.components.basic, global.wm.components.basic.progress, global.wm.components.basic.richtexteditor, global.wm.components.basic.search, global.wm.components.basic.tree, global.wm.components.input.calendar, global.wm.components.input.chips, global.wm.components.input.colorpicker, global.wm.components.input.currency, global.wm.components.input.epoch, global.wm.components.input.fileupload, global.wm.components.input, global.wm.components.input.rating, global.wm.components.input.slider, global.wm.components.data.card, global.wm.components.data.form, global.wm.components.data.list, global.wm.components.data.livetable, global.wm.components.data.pagination, global.wm.components.data.table, global.wm.components.chart, global.wm.components.containers.accordion, global.wm.components.containers.linearlayout, global.wm.components.containers.layoutgrid, global.wm.components.containers.panel, global.wm.components.containers.tabs, global.wm.components.containers.tile, global.wm.components.containers.wizard, global.wm.components.dialogs.iframedialog, global.wm.components.dialogs.logindialog, global.wm.components.dialogs.partialdialog, global.wm.components.navigation.breadcrumb, global.wm.components.navigation.menu, global.wm.components.navigation.navbar, global.wm.components.navigation.popover, global.wm.components.advanced.carousel, global.wm.components.advanced.login, global.wm.components.advanced.marquee, global.wm.components.advanced.custom, global.timepicker, global.dropdown, global.pagination, global.typeahead, global.progressbar, global.carousel, global.popover, global.ngCircleProgress, global.tooltip));
+})(this, (function (exports, i0, i1$1, i1$2, i1, i2, i4, page, rxjs, i3, tslib, i2$3, i1$5, i1$4, forms, i1$3, dialogs, i9, i10, i1$6, http, i2$2, chronos, i2$1, utils, i11, operators, transpiler, buildTask, footer, header, leftPanel, rightPanel, topNav, basic, progress, richTextEditor, search, tree, calendar, chips, colorPicker, currency, epoch, fileUpload, input, rating, slider, card, form, list, liveTable, pagination$1, table, chart, accordion, linearLayout, layoutGrid, panel, tabs, tile, wizard, iframeDialog, loginDialog, partialDialog, breadcrumb, menu, navbar, popover$1, carousel$1, login, marquee, custom, timepicker, dropdown, pagination, typeahead, progressbar, carousel, popover, ngCircleProgress, tooltip) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -44,6 +44,7 @@
       ComponentType[ComponentType["PAGE"] = 0] = "PAGE";
       ComponentType[ComponentType["PREFAB"] = 1] = "PREFAB";
       ComponentType[ComponentType["PARTIAL"] = 2] = "PARTIAL";
+      ComponentType[ComponentType["WIDGET"] = 3] = "WIDGET";
   })(exports.ComponentType || (exports.ComponentType = {}));
   class ComponentRefProvider {
       clearComponentFactoryRefCache() { }
@@ -1383,6 +1384,250 @@
               args: ['window:beforeunload']
           }] }); })();
 
+  // export const commonPartialWidgets = {};
+  class BaseCustomWidgetComponent extends FragmentMonitor {
+      constructor() {
+          super(...arguments);
+          this.BaseWidget = {};
+          this.compileContent = false;
+          this.destroy$ = new rxjs.Subject();
+          this.viewInit$ = new rxjs.Subject();
+          this.invokeEvent = (eventName) => {
+              this.events[eventName]();
+          };
+      }
+      getContainerWidgetInjector() {
+          return this.containerWidget.inj || this.containerWidget.injector;
+      }
+      init() {
+          let resolveFn;
+          const promise = new Promise((res) => resolveFn = res);
+          this.App = this.injector ? this.injector.get(i1.App) : i0.inject(i1.App);
+          //making the code compatible in both the JIT and AOT modes
+          this.containerWidget = this.injector ? this.injector.get(i3.WidgetRef) : i0.inject(i3.WidgetRef);
+          this.i18nService = this.injector ? this.injector.get(i1.AbstractI18nService) : i0.inject(i1.AbstractI18nService);
+          this.scriptLoaderService = this.injector ? this.injector.get(i1.ScriptLoaderService) : i0.inject(i1.ScriptLoaderService);
+          this.Viewport = this.injector ? this.injector.get(i1.Viewport) : i0.inject(i1.Viewport);
+          // this.viewContainerRef = this.getContainerWidgetInjector().get(ViewContainerRef);
+          // Replacing this.getContainerWidgetInjector().view.component as viewParent
+          // this.viewParent = (this.viewContainerRef as any).parentInjector._lView[8];
+          this.viewParent = this.containerWidget.viewParent;
+          if (this.viewParent.registerFragment) {
+              this.viewParent.registerFragment();
+          }
+          // register functions for binding evaluation
+          this.registerExpressions();
+          this.initUserScript();
+          this.registerProps(resolveFn);
+          // Using promise to make sure the props are registered in the container widget before registering events, Otherwise no events will be registered
+          promise.then(() => this.registerEvents());
+          this.registerWidgets();
+          this.initVariables();
+          this.activePageName = this.App.activePageName; // Todo: remove this
+          this.registerPageParams();
+          this.defineI18nProps();
+          this.viewInit$.subscribe(i1.noop, i1.noop, () => {
+              this.pageParams = this.containerWidget.props;
+          });
+          if (this.spa) {
+              this.pageDirective = this.injector ? this.injector.get(page.SpaPageDirective) : i0.inject(page.SpaPageDirective);
+          }
+          else {
+              this.pageDirective = this.injector ? this.injector.get(page.PageDirective) : i0.inject(page.PageDirective);
+          }
+          if (this.pageDirective) {
+              this.registerDestroyListener(this.pageDirective.subscribe('attach', data => this.ngOnAttach(data.refreshData)));
+              this.registerDestroyListener(this.pageDirective.subscribe('detach', () => this.ngOnDetach()));
+          }
+          super.init();
+      }
+      registerWidgets() {
+          // common partial widgets should be accessible from page
+          this.Widgets = Object.create(commonPartialWidgets);
+          // expose current page widgets on app
+          this.App.Widgets = Object.create(this.Widgets);
+      }
+      registerBaseWidget() {
+          for (let widget in this.Widgets) {
+              let widgetInstance = this.Widgets[widget];
+              if (widgetInstance.widget.$attrs.has('base-widget')) {
+                  this.BaseWidget = widgetInstance;
+                  break;
+              }
+          }
+      }
+      registerEvents() {
+          this.events = {};
+          this.containerWidget.eventHandlers.forEach((callback, key) => {
+              this.events[key] = (...args) => {
+                  this.containerWidget.invokeEventCallback(key, { $event: args[0], $data: args[1] });
+              };
+          });
+      }
+      registerDestroyListener(fn) {
+          this.destroy$.subscribe(i1.noop, i1.noop, () => fn());
+      }
+      registerChangeListeners() {
+          this.containerWidget.registerPropertyChangeListener(this.onPropertyChange);
+          this.containerWidget.registerStyleChangeListener(this.onPropertyChange);
+      }
+      initUserScript() {
+          try {
+              // partials inside prefab should have access to Prefab properties and events
+              if (this.viewParent.prefabName) {
+                  // for partial within partial within prefabs, just assign the parent partial's prefab object
+                  if (this.viewParent.Prefab) {
+                      this.Prefab = this.viewParent.Prefab;
+                  }
+                  else {
+                      this.Prefab = this.viewParent;
+                  }
+              }
+              this.evalUserScript(this, this.App, this.injector ? this.injector.get(i1.UtilsService) : i0.inject(i1.UtilsService));
+          }
+          catch (e) {
+              console.error(`Error in evaluating partial (${this.customWidgetName}) script\n`, e);
+          }
+      }
+      initVariables() {
+          const variablesService = this.injector ? this.injector.get(i4.VariablesService) : i0.inject(i4.VariablesService);
+          // get variables and actions instances for the page
+          const variableCollection = variablesService.register(this.customWidgetName, this.getVariables(), this);
+          // create namespace for Variables nad Actions on page/partial, which inherits the Variables and Actions from App instance
+          this.Variables = Object.create(this.App.Variables);
+          this.Actions = Object.create(this.App.Actions);
+          this.containerWidget.Variables = this.Variables;
+          this.containerWidget.Actions = this.Actions;
+          // assign all the page variables to the pageInstance
+          Object.entries(variableCollection.Variables).forEach(([name, variable]) => this.Variables[name] = variable);
+          Object.entries(variableCollection.Actions).forEach(([name, action]) => this.Actions[name] = action);
+          this.viewInit$.subscribe(i1.noop, i1.noop, () => {
+              // TEMP: triggering watchers so variables watching over params are updated
+              i1.$invokeWatchers(true, true);
+              variableCollection.callback(variableCollection.Variables).catch(i1.noop);
+              variableCollection.callback(variableCollection.Actions);
+          });
+      }
+      /**
+       * function to register bind expressions generated in this partial instance
+       * getExpressions function is defined in the generated page.comp.ts file
+       * @param expressions, map of bind expression vs generated function
+       */
+      registerExpressions() {
+          const expressions = this.getExpressions();
+          _.each(expressions, (fn, expr) => {
+              i1.registerFnByExpr(expr, fn[0], fn[1]);
+          });
+      }
+      registerPageParams() {
+          this.pageParams = this.containerWidget.props;
+      }
+      defineI18nProps() {
+          this.appLocale = this.i18nService.getAppLocale();
+      }
+      invokeOnReady() {
+          let params;
+          if (this.containerWidget.userComponentParams) {
+              params = this.containerWidget.userComponentParams;
+          }
+          this.onReady(params);
+          if (this.viewParent.resolveFragment) {
+              this.viewParent.resolveFragment();
+          }
+      }
+      loadScripts() {
+          // return new Promise<void>((resolve) => {
+          //     const scriptsRequired = this.partialDirective.$element.attr('scripts-to-load');
+          //     if (scriptsRequired) {
+          //         this.scriptLoaderService
+          //             .load(...scriptsRequired.split(','))
+          //             .then(resolve);
+          //     } else {
+          //         resolve();
+          //     }
+          // });
+      }
+      registerProps(resolveFn) {
+          window['resourceCache'].get(`./custom-widgets/${this.customWidgetName}/page.min.json`).then(({ config }) => {
+              if (config) {
+                  Object.entries((config.properties || {})).forEach(([key, prop]) => {
+                      let expr;
+                      const value = _.trim(prop.value);
+                      if (_.startsWith(value, 'bind:')) {
+                          expr = value.replace('bind:', '');
+                      }
+                      Object.defineProperty(this, key, {
+                          get: () => this.containerWidget[key],
+                          set: nv => this.containerWidget.widget[key] = nv
+                      });
+                      if (expr) {
+                          //[Todo-CSP]: expr will be generated with prefab.comp.expr.ts
+                          this.registerDestroyListener(i1.$watch(expr, this, {}, nv => this.containerWidget.widget[key] = nv));
+                      }
+                  });
+              }
+              this.containerWidget.setProps(config, resolveFn);
+              // Reassigning the proxy handler for prefab inbound properties as we
+              // will get them only after the prefab config call.
+              if (i1.isIE()) {
+                  this.containerWidget.widget = this.containerWidget.createProxy();
+              }
+          });
+      }
+      mute() {
+          const m = o => { o && o.mute && o.mute(); };
+          _.each(this.Widgets, m);
+          _.each(this.Variables, m);
+          _.each(this.Actions, m);
+      }
+      unmute() {
+          const um = o => { o && o.unmute && o.unmute(); };
+          _.each(this.Widgets, um);
+          _.each(this.Variables, um);
+          _.each(this.Actions, um);
+      }
+      // ngOnInit() {
+      //     this.init();
+      // }
+      ngAfterViewInit() {
+          // this.loadScripts().then(() => {
+          //     this.compileContent = true;
+          //     setTimeout(() => {
+          //         this.viewInit$.complete();
+          //         this.fragmentsLoaded$.subscribe(noop, noop, () => this.invokeOnReady());
+          //     }, 100);
+          // });
+          this.registerChangeListeners();
+          this.registerBaseWidget();
+          this.invokeOnReady();
+      }
+      ngOnDestroy() {
+          this.destroy$.complete();
+      }
+      ngOnAttach(refreshData) {
+          this.unmute();
+          if (refreshData) {
+              const refresh = v => { v && v.startUpdate && v.invoke && v.invoke(); };
+              _.each(this.Variables, refresh);
+              _.each(this.Actions, refresh);
+          }
+          _.each(this.Widgets, w => w && w.ngOnAttach && w.ngOnAttach());
+      }
+      ngOnDetach() {
+          this.mute();
+          _.each(this.Widgets, w => w && w.ngOnDetach && w.ngOnDetach());
+      }
+      // user overrides this
+      onPropertyChange() { }
+      onReady(params) {
+      }
+      static { this.ɵfac = /*@__PURE__*/ function () { let ɵBaseCustomWidgetComponent_BaseFactory; return function BaseCustomWidgetComponent_Factory(t) { return (ɵBaseCustomWidgetComponent_BaseFactory || (ɵBaseCustomWidgetComponent_BaseFactory = i0__namespace.ɵɵgetInheritedFactory(BaseCustomWidgetComponent)))(t || BaseCustomWidgetComponent); }; }(); }
+      static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: BaseCustomWidgetComponent, features: [i0__namespace.ɵɵInheritDefinitionFeature] }); }
+  }
+  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(BaseCustomWidgetComponent, [{
+          type: i0.Directive
+      }], null, null); })();
+
   class BasePrefabComponent extends FragmentMonitor {
       constructor() {
           super(...arguments);
@@ -4647,6 +4892,7 @@
       carousel$1.CarouselModule,
       login.LoginModule,
       marquee.MarqueeModule,
+      custom.CustomModule,
       page.PageModule,
       footer.FooterModule,
       header.HeaderModule,
@@ -4841,6 +5087,7 @@
               carousel$1.CarouselModule,
               login.LoginModule,
               marquee.MarqueeModule,
+              custom.CustomModule,
               page.PageModule,
               footer.FooterModule,
               header.HeaderModule,
@@ -4971,6 +5218,7 @@
           carousel$1.CarouselModule,
           login.LoginModule,
           marquee.MarqueeModule,
+          custom.CustomModule,
           page.PageModule,
           footer.FooterModule,
           header.HeaderModule,
@@ -5055,6 +5303,7 @@
           carousel$1.CarouselModule,
           login.LoginModule,
           marquee.MarqueeModule,
+          custom.CustomModule,
           page.PageModule,
           footer.FooterModule,
           header.HeaderModule,
@@ -5152,6 +5401,7 @@
   exports.AppVariablesProvider = AppVariablesProvider;
   exports.AppVariablesResolve = AppVariablesResolve;
   exports.AuthGuard = AuthGuard;
+  exports.BaseCustomWidgetComponent = BaseCustomWidgetComponent;
   exports.BaseLayoutComponent = BaseLayoutComponent;
   exports.BasePageComponent = BasePageComponent;
   exports.BasePartialComponent = BasePartialComponent;

app-ng-runtime/runtime/base/components/base-custom-widget.component.d.ts

@@ -0,0 +1,71 @@
+import { AfterViewInit, Injector, OnDestroy } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Subject } from 'rxjs';
+import { AbstractI18nService, AbstractNavigationService, App, Viewport, ScriptLoaderService } from '@wm/core';
+import { PageDirective, SpaPageDirective } from '@wm/components/page';
+import { PrefabDirective } from '@wm/components/prefab';
+import { FragmentMonitor } from '../util/fragment-monitor';
+import { AppManagerService } from '../services/app.manager.service';
+import * as i0 from "@angular/core";
+export declare abstract class BaseCustomWidgetComponent extends FragmentMonitor implements AfterViewInit, OnDestroy {
+    Widgets: any;
+    BaseWidget: any;
+    Variables: any;
+    Actions: any;
+    App: App;
+    injector: Injector;
+    customWidgetName: string;
+    activePageName: string;
+    route: ActivatedRoute;
+    appManager: AppManagerService;
+    navigationService: AbstractNavigationService;
+    router: Router;
+    pageParams: any;
+    containerWidget: any;
+    i18nService: AbstractI18nService;
+    appLocale: any;
+    pageDirective: PageDirective | SpaPageDirective;
+    Prefab: PrefabDirective;
+    scriptLoaderService: ScriptLoaderService;
+    Viewport: Viewport;
+    compileContent: boolean;
+    spa: boolean;
+    events: any;
+    destroy$: Subject<unknown>;
+    viewInit$: Subject<unknown>;
+    private viewParent;
+    abstract evalUserScript(prefabContext: any, appContext: any, utils: any): any;
+    abstract getVariables(): any;
+    abstract getExpressions(): any;
+    getContainerWidgetInjector(): any;
+    init(): void;
+    registerWidgets(): void;
+    registerBaseWidget(): void;
+    invokeEvent: (eventName: string) => void;
+    registerEvents(): void;
+    registerDestroyListener(fn: Function): void;
+    registerChangeListeners(): void;
+    initUserScript(): void;
+    initVariables(): void;
+    /**
+     * function to register bind expressions generated in this partial instance
+     * getExpressions function is defined in the generated page.comp.ts file
+     * @param expressions, map of bind expression vs generated function
+     */
+    registerExpressions(): void;
+    registerPageParams(): void;
+    defineI18nProps(): void;
+    invokeOnReady(): void;
+    private loadScripts;
+    registerProps(resolveFn: Function): void;
+    mute(): void;
+    unmute(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    ngOnAttach(refreshData: any): void;
+    ngOnDetach(): void;
+    onPropertyChange(): void;
+    onReady(params?: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseCustomWidgetComponent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseCustomWidgetComponent, never, never, {}, {}, never, never, false, never>;
+}