@genesislcap/pbc-reporting-ui 1.0.366 → 1.0.367

package/dist/dts/components/rapid-components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rapid-components.d.ts","sourceRoot":"","sources":["../../../src/components/rapid-components.ts"],"names":[],"mappings":"AAiBA;;GAEG;AACH,eAAO,MAAM,6BAA6B,qBA0BzC,CAAC"}
+{"version":3,"file":"rapid-components.d.ts","sourceRoot":"","sources":["../../../src/components/rapid-components.ts"],"names":[],"mappings":"AAuBA;;GAEG;AACH,eAAO,MAAM,6BAA6B,qBAgCzC,CAAC"}

package/dist/dts/index.d.ts

@@ -1,3 +1,4 @@
 export * from './config';
 export * from './main';
+export * from './sandbox';
 //# sourceMappingURL=index.d.ts.map

package/dist/dts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC"}

package/dist/dts/main/main.d.ts

@@ -23,6 +23,7 @@ export declare class FoundationReporting extends GenesisElement {
     activeReport: any;
     notifications: Notification[];
     datasourceSettings: any;
+    ready: boolean;
     config: ReportingConfig;
     listBox: HTMLElement;
     reportsGrid: List;

package/dist/dts/main/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../src/main/main.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAsB,MAAM,+BAA+B,CAAC;AAC5E,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAiB,cAAc,EAAE,eAAe,EAAc,MAAM,uBAAuB,CAAC;AACnG,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,OAAO,EAAE,YAAY,EAA2B,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD;;;;;;;;;;;GAWG;AACH,qBAKa,mBAAoB,SAAQ,cAAc;IAC5C,OAAO,EAAG,OAAO,CAAC;IACf,MAAM,EAAE,MAAM,EAAE,CAAM;IACtB,YAAY,QAAM;IAClB,YAAY,EAAE,GAAG,CAAM;IACvB,aAAa,EAAE,YAAY,EAAE,CAAM;IACnC,kBAAkB,MAAC;IACd,MAAM,EAAG,eAAe,CAAC;IAEnC,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,EAAG,IAAI,CAAC;IACnB,IAAI,EAAE,IAAI,CAAC;IAEZ,KAAK,CAAC,KAAK,EAAE,eAAe,CAAC,QAAQ,CAAC;IAOtC,iBAAiB,IAAI,OAAO,CAAC,IAAI,CAAC;IAsBjC,MAAM;IAKN,IAAI,CAAC,OAAO,KAAA;IAQN,GAAG,CAAC,OAAO,KAAA;IAQjB,UAAU,CAAC,GAAG,EAAE,MAAM;IAIhB,SAAS,CAAC,YAAY,EAAE,MAAM;CAO5C;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAKa,cAAe,SAAQ,mBAAmB;IACrD;;OAEG;IACG,iBAAiB;IAKvB;;OAEG;cACa,WAAW;CAI5B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAKa,aAAc,SAAQ,mBAAmB;IACpD;;OAEG;IACG,iBAAiB;IAKvB;;OAEG;cACa,WAAW;CAI5B;AAED;;;;;GAKG;AACH,qBAAa,SAAU,SAAQ,aAAa;CAAG"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../src/main/main.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAsB,MAAM,+BAA+B,CAAC;AAC5E,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAiB,cAAc,EAAE,eAAe,EAAc,MAAM,uBAAuB,CAAC;AACnG,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,OAAO,EAAE,YAAY,EAA2B,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD;;;;;;;;;;;GAWG;AACH,qBAKa,mBAAoB,SAAQ,cAAc;IAC5C,OAAO,EAAG,OAAO,CAAC;IACf,MAAM,EAAE,MAAM,EAAE,CAAM;IACtB,YAAY,QAAM;IAClB,YAAY,EAAE,GAAG,CAAM;IACvB,aAAa,EAAE,YAAY,EAAE,CAAM;IACnC,kBAAkB,MAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACV,MAAM,EAAG,eAAe,CAAC;IAEnC,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,EAAG,IAAI,CAAC;IACnB,IAAI,EAAE,IAAI,CAAC;IAEZ,KAAK,CAAC,KAAK,EAAE,eAAe,CAAC,QAAQ,CAAC;IAOtC,iBAAiB,IAAI,OAAO,CAAC,IAAI,CAAC;IAuBjC,MAAM;IAKN,IAAI,CAAC,OAAO,KAAA;IAQN,GAAG,CAAC,OAAO,KAAA;IAQjB,UAAU,CAAC,GAAG,EAAE,MAAM;IAIhB,SAAS,CAAC,YAAY,EAAE,MAAM;CAO5C;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAKa,cAAe,SAAQ,mBAAmB;IACrD;;OAEG;IACG,iBAAiB;IAKvB;;OAEG;cACa,WAAW;CAK5B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAKa,aAAc,SAAQ,mBAAmB;IACpD;;OAEG;IACG,iBAAiB;IAKvB;;OAEG;cACa,WAAW;CAK5B;AAED;;;;;GAKG;AACH,qBAAa,SAAU,SAAQ,aAAa;CAAG"}

package/dist/dts/main/main.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.template.d.ts","sourceRoot":"","sources":["../../../src/main/main.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAQ9E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAgExC,eAAO,MAAM,YAAY,8BAiDxB,CAAC"}
+{"version":3,"file":"main.template.d.ts","sourceRoot":"","sources":["../../../src/main/main.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAQ9E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAgExC,eAAO,MAAM,YAAY,8BAiDrB,CAAC"}

package/dist/dts/sandbox.d.ts

@@ -0,0 +1,9 @@
+import { GenesisElement } from "@genesislcap/web-core";
+import { Auth, Connect } from "@genesislcap/foundation-comms";
+export declare class ReportingSandbox extends GenesisElement {
+    connect: Connect;
+    auth: Auth;
+    ready: boolean;
+    connectedCallback(): Promise<void>;
+}
+//# sourceMappingURL=sandbox.d.ts.map

package/dist/dts/sandbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sandbox.d.ts","sourceRoot":"","sources":["../../src/sandbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAyB,MAAM,uBAAuB,CAAC;AAC5F,OAAO,EAAC,IAAI,EAAY,OAAO,EAAC,MAAM,+BAA+B,CAAC;AAEtE,qBAOa,gBAAiB,SAAQ,cAAc;IACvC,OAAO,EAAG,OAAO,CAAC;IACrB,IAAI,EAAG,IAAI,CAAC;IACN,KAAK,UAAS;IAEpB,iBAAiB;CAe1B"}

package/dist/esm/components/create-edit/create-edit.js

@@ -1,4 +1,4 @@
-import { __awaiter, __decorate } from "tslib";
+import { __decorate } from "tslib";
 import { Connect } from '@genesislcap/foundation-comms';
 import { customElement, GenesisElement, observable } from '@genesislcap/web-core';
 import { ReportingEventListeners } from '../../main/types';
@@ -12,11 +12,11 @@ let CreateEdit = class CreateEdit extends GenesisElement {
         /**
          * Create report save handle
          */
-        this.saveReport = (isEdit, body) => __awaiter(this, void 0, void 0, function* () {
+        this.saveReport = async (isEdit, body) => {
             let notification = null;
             const payload = Object.assign(Object.assign({}, body), { REPORT_COLUMNS: JSON.stringify(body['REPORT_COLUMNS']) });
             const event = isEdit ? 'EVENT_SAVED_REPORTS_UPDATE' : 'EVENT_SAVED_REPORTS_INSERT';
-            const result = yield this.connect.commitEvent(event, {
+            const result = await this.connect.commitEvent(event, {
                 DETAILS: Object.assign(Object.assign({}, payload), (isEdit ? { REPORT_ID: this.report.REPORT_ID } : {})),
                 IGNORE_WARNINGS: true,
                 VALIDATE: false,
@@ -39,7 +39,7 @@ let CreateEdit = class CreateEdit extends GenesisElement {
                 };
             }
             this.$emit(ReportingEventListeners.notify, notification);
-        });
+        };
     }
     /**
      * Trigger parent event listReports that navigates to list reports tab

package/dist/esm/components/list/list.js

@@ -1,4 +1,4 @@
-import { __awaiter, __decorate } from "tslib";
+import { __decorate } from "tslib";
 import { Connect } from '@genesislcap/foundation-comms';
 import { getActionsMenuDef } from '@genesislcap/grid-pro';
 import { customElement, GenesisElement, observable } from '@genesislcap/web-core';
@@ -54,54 +54,47 @@ let List = class List extends GenesisElement {
             },
         }, actionsOpenIcon());
     }
-    connectedCallback() {
-        const _super = Object.create(null, {
-            connectedCallback: { get: () => super.connectedCallback }
-        });
-        return __awaiter(this, void 0, void 0, function* () {
-            _super.connectedCallback.call(this);
-            this.grid.addEventListener('onGridReady', () => {
-                window.addEventListener('resize', () => {
-                    setTimeout(() => {
-                        var _a, _b;
-                        (_b = (_a = this.grid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.sizeColumnsToFit();
-                    });
-                });
-                this.grid.gridApi.addEventListener('firstDataRendered', () => {
+    async connectedCallback() {
+        super.connectedCallback();
+        this.grid.addEventListener('onGridReady', () => {
+            window.addEventListener('resize', () => {
+                setTimeout(() => {
                     var _a, _b;
                     (_b = (_a = this.grid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.sizeColumnsToFit();
                 });
-                this.grid.gridApi.addEventListener('selectionChanged', () => {
-                    this.selectedRows = this.grid.gridApi.getSelectedRows();
-                    this.dispatchEvent(this.slectionEvent);
-                });
+            });
+            this.grid.gridApi.addEventListener('firstDataRendered', () => {
+                var _a, _b;
+                (_b = (_a = this.grid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.sizeColumnsToFit();
+            });
+            this.grid.gridApi.addEventListener('selectionChanged', () => {
+                this.selectedRows = this.grid.gridApi.getSelectedRows();
+                this.dispatchEvent(this.slectionEvent);
             });
         });
     }
-    delete(rowData) {
-        return __awaiter(this, void 0, void 0, function* () {
-            let notification = null;
-            const { REPORT_ID } = rowData;
-            const result = yield this.connect.commitEvent('EVENT_SAVED_REPORTS_DELETE', {
-                DETAILS: { REPORT_ID },
-                IGNORE_WARNINGS: true,
-                VALIDATE: false,
-            });
-            result.MESSAGE_TYPE === 'EVENT_ACK'
-                ? (notification = {
-                    message: `'${rowData.REPORT_NAME}' was deleted`,
-                    title: 'Success:',
-                    type: 'success',
-                    autoClose: true,
-                })
-                : (notification = {
-                    message: `'${rowData.REPORT_NAME}' was not deleted due to the following error "${result.ERROR[0].TEXT}"`,
-                    title: 'Error:',
-                    type: 'warning',
-                    autoClose: true,
-                });
-            this.$emit(ReportingEventListeners.notify, notification);
+    async delete(rowData) {
+        let notification = null;
+        const { REPORT_ID } = rowData;
+        const result = await this.connect.commitEvent('EVENT_SAVED_REPORTS_DELETE', {
+            DETAILS: { REPORT_ID },
+            IGNORE_WARNINGS: true,
+            VALIDATE: false,
         });
+        result.MESSAGE_TYPE === 'EVENT_ACK'
+            ? (notification = {
+                message: `'${rowData.REPORT_NAME}' was deleted`,
+                title: 'Success:',
+                type: 'success',
+                autoClose: true,
+            })
+            : (notification = {
+                message: `'${rowData.REPORT_NAME}' was not deleted due to the following error "${result.ERROR[0].TEXT}"`,
+                title: 'Error:',
+                type: 'warning',
+                autoClose: true,
+            });
+        this.$emit(ReportingEventListeners.notify, notification);
     }
     batchDelete() {
         // service does not accept arrays so have to loop

package/dist/esm/components/preview/preview.js

@@ -1,4 +1,4 @@
-import { __awaiter, __decorate } from "tslib";
+import { __decorate } from "tslib";
 import { Datasource } from '@genesislcap/foundation-comms';
 import { formatDateTimestamp, formatDateTimeTimestamp } from '@genesislcap/foundation-utils';
 import { customElement, GenesisElement, observable, attr } from '@genesislcap/web-core';
@@ -14,15 +14,15 @@ let Preview = class Preview extends GenesisElement {
         /**
          * Fetch data from server and load to grid
          */
-        this.fetchAndLoadToGrid = () => __awaiter(this, void 0, void 0, function* () {
+        this.fetchAndLoadToGrid = async () => {
             // Get the data from the selected dataserver
             // NOTE: Backend field REPORT_DATASOURCE and REPORT_DATA_SOURCE are not consistent in Events and Dataserver
             const resourceName = this.report['REPORT_DATASOURCE'] || this.report['REPORT_DATA_SOURCE'];
-            yield this.datasource.init(Object.assign({ resourceName }, this.datasourceSettings), true);
-            this.data = yield this.datasource.snapshotFiltered();
+            await this.datasource.init(Object.assign({ resourceName }, this.datasourceSettings), true);
+            this.data = await this.datasource.snapshotFiltered();
             // Map data from dataserver to the grid
             this.grid['gridOptions'] = Object.assign(Object.assign({}, getGridOptions()), { columnDefs: getColumns(this.report['REPORT_COLUMNS']), rowData: this.data });
-        });
+        };
         /**
          * Export to csv handle
          */

package/dist/esm/components/rapid-components.js

@@ -1,10 +1,9 @@
-import { __awaiter } from "tslib";
-import { baseComponents, provideDesignSystem, rapidIcon, rapidButton, rapidCard, rapidTabs, rapidTab, rapidTabPanel, rapidTextField, rapidTextArea, rapidRadioGroup, rapidRadio, rapidToast, } from '@genesislcap/rapid-design-system';
+import { baseComponents, provideDesignSystem, rapidIcon, rapidButton, rapidCard, rapidTabs, rapidTab, rapidTabPanel, rapidTextField, rapidTextArea, rapidRadioGroup, rapidRadio, rapidToast, rapidActionsMenu, rapidMenu, rapidMenuItem, rapidDialog, rapidSelect, rapidListboxOption, } from '@genesislcap/rapid-design-system';
 import { rapidGridComponents } from '@genesislcap/rapid-grid-pro';
 /**
  * @public
  */
-export const registerCommonRapidComponents = () => __awaiter(void 0, void 0, void 0, function* () {
+export const registerCommonRapidComponents = async () => {
     /**
      * Register the components the app is using with the system.
      */
@@ -13,9 +12,9 @@ export const registerCommonRapidComponents = () => __awaiter(void 0, void 0, voi
     /**
      * Common across most routes, so batch register these lightweight components upfront.
      */
-    rapidIcon(), rapidButton(), rapidCard(), rapidTabs(), rapidTab(), rapidTabPanel(), rapidTextField(), rapidTextArea(), rapidRadioGroup(), rapidRadio(), rapidToast(), 
+    rapidIcon(), rapidButton(), rapidCard(), rapidDialog(), rapidSelect(), rapidTabs(), rapidListboxOption(), rapidTab(), rapidTabPanel(), rapidTextField(), rapidTextArea(), rapidRadioGroup(), rapidRadio(), rapidToast(), rapidActionsMenu(), rapidMenu(), rapidMenuItem(), 
     /**
      * A re-export of designSystemProvider is missing from the top level index file in rapid
      */
     baseComponents.designSystemProvider(), rapidGridComponents);
-});
+};

package/dist/esm/components/select-fields/select-fields.js

@@ -1,4 +1,4 @@
-import { __awaiter, __decorate } from "tslib";
+import { __decorate } from "tslib";
 import { Connect } from '@genesislcap/foundation-comms';
 import { RapidAgTextRenderer } from '@genesislcap/rapid-grid-pro';
 import { customElement, GenesisElement, observable, attr } from '@genesislcap/web-core';
@@ -30,7 +30,7 @@ let SelectFields = class SelectFields extends GenesisElement {
          * @param value string
          * @param params Object
          */
-        this.onTextFieldChange = (value, params) => __awaiter(this, void 0, void 0, function* () {
+        this.onTextFieldChange = async (value, params) => {
             const newFields = this.selectedFields.map((field) => {
                 let newField = Object.assign({}, field);
                 if (field.name === params.node.data.name) {
@@ -39,7 +39,7 @@ let SelectFields = class SelectFields extends GenesisElement {
                 return newField;
             });
             this.setSelectedFields(newFields);
-        });
+        };
         /**
          * Refresh select field grid data
          */
@@ -91,68 +91,64 @@ let SelectFields = class SelectFields extends GenesisElement {
     /**
      * Loads the allFieldsGrid
      */
-    loadAllFieldsGrid() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.allFieldsGrid.gridOptions = Object.assign(Object.assign({}, FIELD_SELECT_CONFIG.gridOptions), { columnDefs: FIELD_SELECT_CONFIG.colDefs, rowData: [...this.fieldData], onSelectionChanged: () => {
-                    if (this.selectedFields) {
-                        this.selectedFields = getSelectedFields(this.allFieldsGrid, this.selectedFields);
-                        this.setSelectedFields([...this.makeSureFieldValueIsNotLost(this.selectedFields)]);
-                    }
-                    else {
-                        this.setSelectedFields([
-                            ...this.makeSureFieldValueIsNotLost(this.allFieldsGrid.gridApi.getSelectedRows()),
-                        ]);
-                    }
-                }, onFirstDataRendered: () => {
-                    var _a, _b;
-                    (_b = (_a = this.allFieldsGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.sizeColumnsToFit();
-                    this.selectDefaultFields();
-                }, onGridReady: () => {
-                    window.addEventListener('resize', () => {
-                        setTimeout(() => {
-                            var _a, _b;
-                            (_b = (_a = this.allFieldsGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.sizeColumnsToFit();
-                        });
+    async loadAllFieldsGrid() {
+        this.allFieldsGrid.gridOptions = Object.assign(Object.assign({}, FIELD_SELECT_CONFIG.gridOptions), { columnDefs: FIELD_SELECT_CONFIG.colDefs, rowData: [...this.fieldData], onSelectionChanged: () => {
+                if (this.selectedFields) {
+                    this.selectedFields = getSelectedFields(this.allFieldsGrid, this.selectedFields);
+                    this.setSelectedFields([...this.makeSureFieldValueIsNotLost(this.selectedFields)]);
+                }
+                else {
+                    this.setSelectedFields([
+                        ...this.makeSureFieldValueIsNotLost(this.allFieldsGrid.gridApi.getSelectedRows()),
+                    ]);
+                }
+            }, onFirstDataRendered: () => {
+                var _a, _b;
+                (_b = (_a = this.allFieldsGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.sizeColumnsToFit();
+                this.selectDefaultFields();
+            }, onGridReady: () => {
+                window.addEventListener('resize', () => {
+                    setTimeout(() => {
+                        var _a, _b;
+                        (_b = (_a = this.allFieldsGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.sizeColumnsToFit();
                     });
-                } });
-        });
+                });
+            } });
     }
     /**
      * Loads the allFieldsGrid
      */
-    loadSelectedFieldsGrid() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.selectedFieldsGrid.gridOptions = Object.assign(Object.assign({}, SELECTED_FIELDS_CONFIG.gridOptions), { onRowDragEnd: this.refreshSelectFieldGridData, columnDefs: [
-                    ...SELECTED_FIELDS_CONFIG.colDefs,
-                    {
-                        field: 'displayName',
-                        headerName: 'Display name',
-                        cellRenderer: RapidAgTextRenderer,
-                        cellRendererParams: {
-                            accessor: 'displayName',
-                            onChange: this.onTextFieldChange,
-                        },
-                    },
-                    {
-                        rowDrag: true,
-                        width: 60,
-                        sortable: false,
-                        filter: false,
+    async loadSelectedFieldsGrid() {
+        this.selectedFieldsGrid.gridOptions = Object.assign(Object.assign({}, SELECTED_FIELDS_CONFIG.gridOptions), { onRowDragEnd: this.refreshSelectFieldGridData, columnDefs: [
+                ...SELECTED_FIELDS_CONFIG.colDefs,
+                {
+                    field: 'displayName',
+                    headerName: 'Display name',
+                    cellRenderer: RapidAgTextRenderer,
+                    cellRendererParams: {
+                        accessor: 'displayName',
+                        onChange: this.onTextFieldChange,
                     },
-                ], rowData: [], onGridReady: () => {
-                    window.addEventListener('resize', () => {
-                        setTimeout(() => {
-                            var _a, _b;
-                            (_b = (_a = this.selectedFieldsGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.sizeColumnsToFit();
-                        });
+                },
+                {
+                    rowDrag: true,
+                    width: 60,
+                    sortable: false,
+                    filter: false,
+                },
+            ], rowData: [], onGridReady: () => {
+                window.addEventListener('resize', () => {
+                    setTimeout(() => {
+                        var _a, _b;
+                        (_b = (_a = this.selectedFieldsGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.sizeColumnsToFit();
                     });
-                }, onFirstDataRendered: () => {
-                    var _a, _b;
-                    (_b = (_a = this.selectedFieldsGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.sizeColumnsToFit();
-                }, onSelectionChanged: () => {
-                    this.fieldsToRemove = this.selectedFieldsGrid.gridApi.getSelectedRows();
-                } });
-        });
+                });
+            }, onFirstDataRendered: () => {
+                var _a, _b;
+                (_b = (_a = this.selectedFieldsGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.sizeColumnsToFit();
+            }, onSelectionChanged: () => {
+                this.fieldsToRemove = this.selectedFieldsGrid.gridApi.getSelectedRows();
+            } });
     }
     /**
      * Select default fields

package/dist/esm/components/select-filters/select-filters.js

@@ -1,4 +1,4 @@
-import { __awaiter, __decorate } from "tslib";
+import { __decorate } from "tslib";
 import { Connect } from '@genesislcap/foundation-comms';
 import { RapidAgSelectRenderer, RapidAgTextRenderer } from '@genesislcap/rapid-grid-pro';
 import { customElement, GenesisElement, observable } from '@genesislcap/web-core';
@@ -86,25 +86,23 @@ let SelectFilters = class SelectFilters extends GenesisElement {
     /**
      * Loads availableFieldsGrid with data from the field selection step
      */
-    loadAvailableFieldsGrid() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.availableFieldsGrid.gridOptions = Object.assign(Object.assign({}, AVAILABLE_FIELDS_CONFIG.gridOptions), { columnDefs: AVAILABLE_FIELDS_CONFIG.colDefs, rowData: [...this.selectedFields], onGridReady: () => {
-                    window.addEventListener('resize', () => {
-                        setTimeout(() => {
-                            var _a, _b;
-                            (_b = (_a = this.availableFieldsGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.sizeColumnsToFit();
-                        });
+    async loadAvailableFieldsGrid() {
+        this.availableFieldsGrid.gridOptions = Object.assign(Object.assign({}, AVAILABLE_FIELDS_CONFIG.gridOptions), { columnDefs: AVAILABLE_FIELDS_CONFIG.colDefs, rowData: [...this.selectedFields], onGridReady: () => {
+                window.addEventListener('resize', () => {
+                    setTimeout(() => {
+                        var _a, _b;
+                        (_b = (_a = this.availableFieldsGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.sizeColumnsToFit();
                     });
-                }, onFirstDataRendered: () => {
-                    var _a, _b;
-                    (_b = (_a = this.availableFieldsGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.sizeColumnsToFit();
-                    this.selectDefaultFilters();
-                }, onSelectionChanged: () => {
-                    this.setSelectedFilters([
-                        ...this.makeSureFieldValueIsNotLost(this.availableFieldsGrid.gridApi.getSelectedRows()),
-                    ]);
-                } });
-        });
+                });
+            }, onFirstDataRendered: () => {
+                var _a, _b;
+                (_b = (_a = this.availableFieldsGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.sizeColumnsToFit();
+                this.selectDefaultFilters();
+            }, onSelectionChanged: () => {
+                this.setSelectedFilters([
+                    ...this.makeSureFieldValueIsNotLost(this.availableFieldsGrid.gridApi.getSelectedRows()),
+                ]);
+            } });
     }
     /**
      * Loads the selectedFiltersGrid

package/dist/esm/components/wizard/wizard.js

@@ -1,4 +1,4 @@
-import { __awaiter, __decorate, __rest } from "tslib";
+import { __decorate, __rest } from "tslib";
 import { Connect } from '@genesislcap/foundation-comms';
 import { customElement, GenesisElement, observable, volatile } from '@genesislcap/web-core';
 import { ReportingEventListeners } from '../../main/types';
@@ -122,31 +122,29 @@ let Wizard = class Wizard extends GenesisElement {
     /**
      * When report variable changes handle
      */
-    reportChanged(old, newValue) {
+    async reportChanged(old, newValue) {
         var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            this.fieldData = (_a = this.fieldData) === null || _a === void 0 ? void 0 : _a.map((_a) => {
-                var { filter } = _a, fields = __rest(_a, ["filter"]);
-                return fields;
-            });
-            if (Object.keys(newValue).length) {
-                const { REPORT_NAME, REPORT_DESCRIPTION, REPORT_DATASOURCE, REPORT_DATA_SOURCE, REPORT_COLUMNS, } = newValue;
-                this.isEdit = true;
-                this.selectedFields = REPORT_COLUMNS;
-                this.reportName = REPORT_NAME;
-                this.reportDescription = REPORT_DESCRIPTION;
-                this.selectedDatasource = REPORT_DATASOURCE || REPORT_DATA_SOURCE;
-            }
-            else {
-                this.isEdit = false;
-                this.reportName = '';
-                this.reportDescription = '';
-                this.selectedDatasource = null;
-                this.selectedFields = [];
-                this.selectedFilters = [];
-            }
-            this.setActiveTab(0);
+        this.fieldData = (_a = this.fieldData) === null || _a === void 0 ? void 0 : _a.map((_a) => {
+            var { filter } = _a, fields = __rest(_a, ["filter"]);
+            return fields;
         });
+        if (Object.keys(newValue).length) {
+            const { REPORT_NAME, REPORT_DESCRIPTION, REPORT_DATASOURCE, REPORT_DATA_SOURCE, REPORT_COLUMNS, } = newValue;
+            this.isEdit = true;
+            this.selectedFields = REPORT_COLUMNS;
+            this.reportName = REPORT_NAME;
+            this.reportDescription = REPORT_DESCRIPTION;
+            this.selectedDatasource = REPORT_DATASOURCE || REPORT_DATA_SOURCE;
+        }
+        else {
+            this.isEdit = false;
+            this.reportName = '';
+            this.reportDescription = '';
+            this.selectedDatasource = null;
+            this.selectedFields = [];
+            this.selectedFilters = [];
+        }
+        this.setActiveTab(0);
     }
     /**
      * Set selected fields
@@ -158,40 +156,38 @@ let Wizard = class Wizard extends GenesisElement {
     /**
      * When report variable changes handle
      */
-    selectedDatasourceChanged(old, newValue) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // Reset
-            this.selectedFields = [];
-            this.selectedFilters = [];
-            this.fieldData = [];
-            // Prepare field data structure from field metadata response
-            const fieldMetadata = yield this.fetchFieldsFromDatasource();
-            if (this.isEdit && Object.keys(this.report).length) {
-                this.selectedFields = this.report['REPORT_COLUMNS'];
-                const reportDatasource = this.report['REPORT_DATASOURCE'] || this.report['REPORT_DATA_SOURCE'];
-                if (reportDatasource === newValue) {
-                    this.fieldData = fieldMetadata.map(({ FIELD_NAME, TYPE }) => this.selectedFields.find((field) => field.name === FIELD_NAME) || {
+    async selectedDatasourceChanged(old, newValue) {
+        // Reset
+        this.selectedFields = [];
+        this.selectedFilters = [];
+        this.fieldData = [];
+        // Prepare field data structure from field metadata response
+        const fieldMetadata = await this.fetchFieldsFromDatasource();
+        if (this.isEdit && Object.keys(this.report).length) {
+            this.selectedFields = this.report['REPORT_COLUMNS'];
+            const reportDatasource = this.report['REPORT_DATASOURCE'] || this.report['REPORT_DATA_SOURCE'];
+            if (reportDatasource === newValue) {
+                this.fieldData = fieldMetadata.map(({ FIELD_NAME, TYPE }) => this.selectedFields.find((field) => field.name === FIELD_NAME) || {
+                    name: FIELD_NAME,
+                    type: TYPE,
+                    displayName: FIELD_NAME,
+                    selected: false,
+                });
+            }
+        }
+        else {
+            fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.forEach(({ FIELD_NAME, TYPE }) => {
+                this.fieldData = [
+                    ...this.fieldData,
+                    {
                         name: FIELD_NAME,
                         type: TYPE,
                         displayName: FIELD_NAME,
                         selected: false,
-                    });
-                }
-            }
-            else {
-                fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.forEach(({ FIELD_NAME, TYPE }) => {
-                    this.fieldData = [
-                        ...this.fieldData,
-                        {
-                            name: FIELD_NAME,
-                            type: TYPE,
-                            displayName: FIELD_NAME,
-                            selected: false,
-                        },
-                    ];
-                });
-            }
-        });
+                    },
+                ];
+            });
+        }
     }
     /**
      * Make sure to update selected fields when field data changes
@@ -235,32 +231,30 @@ let Wizard = class Wizard extends GenesisElement {
     /**
      * Fetch a list of datasources
      */
-    getDatasources() {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.connect
-                .request('ALL_REPORT_DATASOURCES', {
-                REQUEST: {},
-            })
-                .then((response) => {
-                var _a;
-                (_a = response === null || response === void 0 ? void 0 : response.REPLY) === null || _a === void 0 ? void 0 : _a.forEach(({ DATASOURCE_NAME, RECORD_ID }) => {
-                    this.datasourceOptions = [
-                        ...this.datasourceOptions,
-                        {
-                            id: RECORD_ID,
-                            name: DATASOURCE_NAME,
-                        },
-                    ];
-                });
-            })
-                .catch((err) => {
-                this.$emit(ReportingEventListeners.notify, {
-                    type: 'warning',
-                    title: 'Error:',
-                    message: `There was an error fetching data sources:
+    async getDatasources() {
+        await this.connect
+            .request('ALL_REPORT_DATASOURCES', {
+            REQUEST: {},
+        })
+            .then((response) => {
+            var _a;
+            (_a = response === null || response === void 0 ? void 0 : response.REPLY) === null || _a === void 0 ? void 0 : _a.forEach(({ DATASOURCE_NAME, RECORD_ID }) => {
+                this.datasourceOptions = [
+                    ...this.datasourceOptions,
+                    {
+                        id: RECORD_ID,
+                        name: DATASOURCE_NAME,
+                    },
+                ];
+            });
+        })
+            .catch((err) => {
+            this.$emit(ReportingEventListeners.notify, {
+                type: 'warning',
+                title: 'Error:',
+                message: `There was an error fetching data sources:
           ${(err === null || err === void 0 ? void 0 : err.ERROR) ? err.ERROR : JSON.stringify(err)}
         `,
-                });
             });
         });
     }

package/dist/esm/components/zero-components.js

@@ -1,10 +1,9 @@
-import { __awaiter } from "tslib";
 import { provideDesignSystem, zeroIcon, zeroButton, zeroCard, zeroTabs, zeroTab, zeroTabPanel, zeroTextField, zeroTextArea, zeroRadioGroup, zeroRadio, zeroToast, zeroDesignSystemProvider, } from '@genesislcap/foundation-zero';
 import { zeroGridComponents } from '@genesislcap/foundation-zero-grid-pro';
 /**
  * @public
  */
-export const registerCommonZeroComponents = () => __awaiter(void 0, void 0, void 0, function* () {
+export const registerCommonZeroComponents = async () => {
     /**
      * Register the components the app is using with the system.
      */
@@ -14,4 +13,4 @@ export const registerCommonZeroComponents = () => __awaiter(void 0, void 0, void
      * Common across most routes, so batch register these lightweight components upfront.
      */
     zeroIcon(), zeroButton(), zeroCard(), zeroTabs(), zeroTab(), zeroTabPanel(), zeroTextField(), zeroTextArea(), zeroRadioGroup(), zeroRadio(), zeroToast(), zeroDesignSystemProvider(), zeroGridComponents);
-});
+};

package/dist/esm/config/configure.js

@@ -1,4 +1,3 @@
-import { __awaiter } from "tslib";
 import { DI, GenesisElement, Registration } from '@genesislcap/web-core';
 import { ReportingConfig, defaultReportingConfig } from './config';
 /**
@@ -28,31 +27,29 @@ import { ReportingConfig, defaultReportingConfig } from './config';
  * @param config - A partial ReportingConfig.
  * @public
  */
-export function configure(config) {
-    return __awaiter(this, void 0, void 0, function* () {
-        /**
-         * Merge the configs
-         */
-        const value = Object.assign(Object.assign({}, defaultReportingConfig), config);
-        if (config.templateOptions) {
-            value.templateOptions = Object.assign(Object.assign(Object.assign({}, defaultReportingConfig.templateOptions), { designSystemProvider: 'template' }), config.templateOptions);
-        }
-        /**
-         * Register a new ReportingConfig
-         */
-        DI.getOrCreateDOMContainer().register(Registration.instance(ReportingConfig, value));
-        /**
-         * Lazily reference and define the micro frontend element post config setting.
-         */
-        const { Reporting, MainStyles, MainTemplate } = yield import('../main');
-        const { name, attributes, shadowOptions, elementOptions } = value;
-        return GenesisElement.define(Reporting, {
-            name,
-            template: MainTemplate,
-            styles: MainStyles,
-            attributes,
-            shadowOptions,
-            elementOptions,
-        });
+export async function configure(config) {
+    /**
+     * Merge the configs
+     */
+    const value = Object.assign(Object.assign({}, defaultReportingConfig), config);
+    if (config.templateOptions) {
+        value.templateOptions = Object.assign(Object.assign(Object.assign({}, defaultReportingConfig.templateOptions), { designSystemProvider: 'template' }), config.templateOptions);
+    }
+    /**
+     * Register a new ReportingConfig
+     */
+    DI.getOrCreateDOMContainer().register(Registration.instance(ReportingConfig, value));
+    /**
+     * Lazily reference and define the micro frontend element post config setting.
+     */
+    const { Reporting, MainStyles, MainTemplate } = await import('../main');
+    const { name, attributes, shadowOptions, elementOptions } = value;
+    return GenesisElement.define(Reporting, {
+        name,
+        template: MainTemplate,
+        styles: MainStyles,
+        attributes,
+        shadowOptions,
+        elementOptions,
     });
 }

package/dist/esm/index.js

@@ -1,2 +1,3 @@
 export * from './config';
 export * from './main';
+export * from './sandbox';

package/dist/esm/main/main.js

@@ -1,4 +1,4 @@
-import { __awaiter, __decorate } from "tslib";
+import { __decorate } from "tslib";
 import { Connect, DatasourceDefaults } from '@genesislcap/foundation-comms';
 import { customElement, GenesisElement, observable } from '@genesislcap/web-core';
 import { MainStyles as styles } from './main.styles';
@@ -25,38 +25,32 @@ let FoundationReporting = class FoundationReporting extends GenesisElement {
         this.activeReport = {};
         this.notifications = [];
     }
-    enter(phase) {
+    async enter(phase) {
         var _a, _b, _c, _d;
-        return __awaiter(this, void 0, void 0, function* () {
-            this.datasourceSettings = {
-                maxRows: (_b = (_a = phase.route.settings) === null || _a === void 0 ? void 0 : _a.maxRows) !== null && _b !== void 0 ? _b : DatasourceDefaults.MAX_ROWS_250,
-                maxView: (_d = (_c = phase.route.settings) === null || _c === void 0 ? void 0 : _c.maxView) !== null && _d !== void 0 ? _d : DatasourceDefaults.MAX_VIEW_1000,
-            };
-        });
+        this.datasourceSettings = {
+            maxRows: (_b = (_a = phase.route.settings) === null || _a === void 0 ? void 0 : _a.maxRows) !== null && _b !== void 0 ? _b : DatasourceDefaults.MAX_ROWS_250,
+            maxView: (_d = (_c = phase.route.settings) === null || _c === void 0 ? void 0 : _c.maxView) !== null && _d !== void 0 ? _d : DatasourceDefaults.MAX_VIEW_1000,
+        };
     }
-    connectedCallback() {
-        const _super = Object.create(null, {
-            connectedCallback: { get: () => super.connectedCallback }
+    async connectedCallback() {
+        super.connectedCallback();
+        this.ready = true;
+        console.log('reporting config', this.config);
+        this.reportsGrid.addEventListener('rowSelectionEvent', (e) => {
+            this.selectedRows = e.detail.selectedRows();
+        });
+        this.addEventListener(ReportingEventListeners.notify, (e) => {
+            this.notifications = [...this.notifications, e.detail];
+        });
+        this.addEventListener(ReportingEventListeners.listReports, (e) => {
+            this.setPageTab('list-reports');
+            this.activeReport = {};
+        });
+        this.reportsGrid.addEventListener(ReportingEventListeners.runReport, (e) => {
+            this.run(e.detail);
         });
-        return __awaiter(this, void 0, void 0, function* () {
-            _super.connectedCallback.call(this);
-            console.log('reporting config', this.config);
-            this.reportsGrid.addEventListener('rowSelectionEvent', (e) => {
-                this.selectedRows = e.detail.selectedRows();
-            });
-            this.addEventListener(ReportingEventListeners.notify, (e) => {
-                this.notifications = [...this.notifications, e.detail];
-            });
-            this.addEventListener(ReportingEventListeners.listReports, (e) => {
-                this.setPageTab('list-reports');
-                this.activeReport = {};
-            });
-            this.reportsGrid.addEventListener(ReportingEventListeners.runReport, (e) => {
-                this.run(e.detail);
-            });
-            this.reportsGrid.addEventListener(ReportingEventListeners.editReport, (e) => {
-                this.edit(e.detail);
-            });
+        this.reportsGrid.addEventListener(ReportingEventListeners.editReport, (e) => {
+            this.edit(e.detail);
         });
     }
     // TODO: use const for tab identifiers
@@ -68,23 +62,19 @@ let FoundationReporting = class FoundationReporting extends GenesisElement {
         this.activeReport = Object.assign(Object.assign({}, rowData), { REPORT_COLUMNS: JSON.parse(rowData['REPORT_COLUMNS']) });
         this.setPageTab('create-edit-report');
     }
-    run(rowData) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.activeReport = Object.assign(Object.assign({}, rowData), { REPORT_COLUMNS: JSON.parse(rowData['REPORT_COLUMNS']) });
-            this.setPageTab('run-report');
-        });
+    async run(rowData) {
+        this.activeReport = Object.assign(Object.assign({}, rowData), { REPORT_COLUMNS: JSON.parse(rowData['REPORT_COLUMNS']) });
+        this.setPageTab('run-report');
     }
     setPageTab(tab) {
         this.tabs.activeid = tab;
     }
-    getFields(resourceName) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const temp = yield this.connect.getMetadata(resourceName);
-            for (let i = 0; i < temp.FIELD.length; i += 1) {
-                this.fields.push(temp.FIELD[i].NAME);
-            }
-            this.listBox.hidden = false;
-        });
+    async getFields(resourceName) {
+        const temp = await this.connect.getMetadata(resourceName);
+        for (let i = 0; i < temp.FIELD.length; i += 1) {
+            this.fields.push(temp.FIELD[i].NAME);
+        }
+        this.listBox.hidden = false;
     }
 };
 __decorate([
@@ -105,6 +95,9 @@ __decorate([
 __decorate([
     observable
 ], FoundationReporting.prototype, "datasourceSettings", void 0);
+__decorate([
+    observable
+], FoundationReporting.prototype, "ready", void 0);
 __decorate([
     ReportingConfig
 ], FoundationReporting.prototype, "config", void 0);
@@ -143,23 +136,17 @@ let RapidReporting = class RapidReporting extends FoundationReporting {
     /**
      * @internal
      */
-    connectedCallback() {
-        const _super = Object.create(null, {
-            connectedCallback: { get: () => super.connectedCallback }
-        });
-        return __awaiter(this, void 0, void 0, function* () {
-            _super.connectedCallback.call(this);
-            yield this.loadRemotes();
-        });
+    async connectedCallback() {
+        await this.loadRemotes();
+        await super.connectedCallback();
     }
     /**
      * @internal
      */
-    loadRemotes() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const { registerCommonRapidComponents } = yield import('../components/rapid-components');
-            yield registerCommonRapidComponents();
-        });
+    async loadRemotes() {
+        const { registerCommonRapidComponents } = await import('../components/rapid-components');
+        await registerCommonRapidComponents();
+        this.ready = true;
     }
 };
 RapidReporting = __decorate([
@@ -197,23 +184,17 @@ let ZeroReporting = class ZeroReporting extends FoundationReporting {
     /**
      * @internal
      */
-    connectedCallback() {
-        const _super = Object.create(null, {
-            connectedCallback: { get: () => super.connectedCallback }
-        });
-        return __awaiter(this, void 0, void 0, function* () {
-            _super.connectedCallback.call(this);
-            yield this.loadRemotes();
-        });
+    async connectedCallback() {
+        await this.loadRemotes();
+        await super.connectedCallback();
     }
     /**
      * @internal
      */
-    loadRemotes() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const { registerCommonZeroComponents } = yield import('../components/zero-components');
-            yield registerCommonZeroComponents();
-        });
+    async loadRemotes() {
+        const { registerCommonZeroComponents } = await import('../components/zero-components');
+        await registerCommonZeroComponents();
+        this.ready = true;
     }
 };
 ZeroReporting = __decorate([

package/dist/esm/main/main.template.js

@@ -57,8 +57,8 @@ const header = html `
 `;
 export const MainTemplate = html `
   ${when((x) => x.notifications.length, notificationToast)}
-  <div class="container" data-test-id="reporting-home">
-
+  ${when(x => x.ready, html `
+    <div class="container" data-test-id="reporting-home">
       <${tabsTag} ${ref("tabs")} class="tabs" data-test-id="tabs">
         <span part="start" class="start" slot="start" data-test-id="reporting-tab">Reporting</span>
         <${tabTag} id="list-reports" slot="tab" data-test-id="list-reports-tab">
@@ -96,4 +96,4 @@ export const MainTemplate = html `
       </${tabsTag}>
 
   </div>
-`;
+`)}`;

package/dist/esm/sandbox.js

@@ -0,0 +1,41 @@
+import { __decorate } from "tslib";
+import { customElement, GenesisElement, html, observable, when } from "@genesislcap/web-core";
+import { Auth, AuthType, Connect } from "@genesislcap/foundation-comms";
+let ReportingSandbox = class ReportingSandbox extends GenesisElement {
+    constructor() {
+        super(...arguments);
+        this.ready = false;
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        console.log('Running with following env vars:', {
+            GENX_SANDBOX_DEFAULT_USER,
+            GENX_SANDBOX_DEFAULT_PASSWORD,
+            GENX_SANDBOX_API_HOST
+        });
+        await this.connect.connect(GENX_SANDBOX_API_HOST);
+        await this.auth.login({ username: GENX_SANDBOX_DEFAULT_USER, password: GENX_SANDBOX_DEFAULT_PASSWORD, type: AuthType.BASIC });
+        this.auth.isLoggedIn$.subscribe(isLoggedIn => {
+            this.ready = isLoggedIn;
+        });
+    }
+};
+__decorate([
+    Connect
+], ReportingSandbox.prototype, "connect", void 0);
+__decorate([
+    Auth
+], ReportingSandbox.prototype, "auth", void 0);
+__decorate([
+    observable
+], ReportingSandbox.prototype, "ready", void 0);
+ReportingSandbox = __decorate([
+    customElement({
+        name: 'reporting-sandbox',
+        template: html `${when(x => x.ready, html `
+        <rapid-design-system-provider>
+            <rapid-reporting></rapid-reporting>
+        </rapid-design-system-provider>`)}`,
+    })
+], ReportingSandbox);
+export { ReportingSandbox };

package/index.html

@@ -1,26 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
+  <head>
     <meta charset="utf-8"/>
-    <title>{{htmlWebpackPlugin.options.title}}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-</head>
-<style>
-    html,
-    body {
+    <title>{{htmlWebpackPlugin.options.title}}</title>
+    <style>
+      html,
+      body {
         width: 100%;
         height: 100%;
         padding: 0;
         margin: 0;
-    }
-    :not(:defined) {
+      }
+      :not(:defined) {
         visibility: hidden;
-    }
-</style>
-<body>
-<foundation-reporting></foundation-reporting>
-{{#if insertEntryPoint}}
-<script type="module" src="/src/index.ts"></script>
-{{/if}}
-</body>
+      }
+    </style>
+  </head>
+  <body>
+  <reporting-sandbox></reporting-sandbox>
+    {{#if insertEntryPoint}}
+    <script type="module" src="/src/sandbox.ts"></script>
+    <script type="module" src="/src/index.ts"></script>
+    {{/if}}
+  </body>
 </html>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/pbc-reporting-ui",
   "description": "Genesis PBC Reporting UI",
-  "version": "1.0.366",
+  "version": "1.0.367",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/foundation-reporting.d.ts",
@@ -45,7 +45,7 @@
     "build:webpack:stats": "genx analyze",
     "clean": "rimraf dist tsconfig.tsbuildinfo",
     "circular": "npx madge --extensions ts --circular ./src",
-    "dev": "genx dev -e API_HOST,ENABLE_SSO",
+    "dev": "genx dev",
     "dev:docker": "npm run dev -- --host 0.0.0.0",
     "dev:intellij": "genx dev -e ENABLE_SSO",
     "dev:no-open": "npm run dev -- --no-open",