@genesislcap/pbc-reporting-ui 1.0.1

package/dist/dts/utils/getFiltersByType.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getFiltersByType.d.ts","sourceRoot":"","sources":["../../../src/utils/getFiltersByType.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAAiB,EAO5C,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,iBAAiB,EAG7C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAAiB,EAQ5C,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,iBAAiB,EAM1C,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,MAAM,GAAG,iBAAiB,EAAE,CAmB5E;AAED,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAmBlE"}

package/dist/dts/utils/getSelectedFields.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Updates selectedFields based on checked and unchecked fields
+ */
+export declare const getSelectedFields: (allFields: any, selectedFields: any) => any[];
+//# sourceMappingURL=getSelectedFields.d.ts.map

package/dist/dts/utils/getSelectedFields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getSelectedFields.d.ts","sourceRoot":"","sources":["../../../src/utils/getSelectedFields.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,iBAAiB,gDAY7B,CAAC"}

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

@@ -0,0 +1,5 @@
+export * from './filterObjectArray';
+export * from './getFiltersByType';
+export * from './getSelectedFields';
+export * from './logger';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC"}

package/dist/dts/utils/logger.d.ts

@@ -0,0 +1,2 @@
+export declare const logger: import("@genesislcap/foundation-logger").Logger;
+//# sourceMappingURL=logger.d.ts.map

package/dist/dts/utils/logger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../../src/utils/logger.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,iDAAuC,CAAC"}

package/dist/esm/assets/images/index.js

@@ -0,0 +1,60 @@
+export const tickIcon = (slot = 'start') => `
+  <svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="8px" height="8px" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <mask fill="white" id="clip71">
+        <path d="M 7.902293826332949 0.88531102710076  C 8.029418727016619 0.7318189595164379  8.032943724262715 0.4786004073434318  7.910168820180608 0.3196942814888426  C 7.7873939160985035 0.16078815563425342  7.584819074360098 0.15638190907663363  7.457694173676427 0.3098505391792663  C 7.455031675756503 0.3130614741707234  7.452406677807284 0.31634272160724874  7.449819179828765 0.3196942814888426  L 2.236067003072654 6.8369079399156725  L 0.5423058263235732 4.719706468979322  C 0.41518092563990183 4.566237838876688  0.212606083901497 4.570644085434308  0.08983117981939077 4.729550211288897  C -0.029943726606463585 4.884565715183035  -0.029943726606463585 5.130307710697101  0.08983117981939077 5.285323214591238  L 2.009829679820563 7.6853213395927025  C 2.134798332188803 7.841485280089625  2.337354423941856 7.841485280089625  2.4623043263247455 7.6853213395927025  L 7.902293826332949 0.88531102710076  Z " fill-rule="evenodd" />
+      </mask>
+    </defs>
+    <g transform="matrix(1 0 0 1 -23 -68 )">
+      <path d="M 7.902293826332949 0.88531102710076  C 8.029418727016619 0.7318189595164379  8.032943724262715 0.4786004073434318  7.910168820180608 0.3196942814888426  C 7.7873939160985035 0.16078815563425342  7.584819074360098 0.15638190907663363  7.457694173676427 0.3098505391792663  C 7.455031675756503 0.3130614741707234  7.452406677807284 0.31634272160724874  7.449819179828765 0.3196942814888426  L 2.236067003072654 6.8369079399156725  L 0.5423058263235732 4.719706468979322  C 0.41518092563990183 4.566237838876688  0.212606083901497 4.570644085434308  0.08983117981939077 4.729550211288897  C -0.029943726606463585 4.884565715183035  -0.029943726606463585 5.130307710697101  0.08983117981939077 5.285323214591238  L 2.009829679820563 7.6853213395927025  C 2.134798332188803 7.841485280089625  2.337354423941856 7.841485280089625  2.4623043263247455 7.6853213395927025  L 7.902293826332949 0.88531102710076  Z " fill-rule="nonzero" fill="#141414" stroke="none" transform="matrix(1 0 0 1 23 68 )" />
+      <path d="M 7.902293826332949 0.88531102710076  C 8.029418727016619 0.7318189595164379  8.032943724262715 0.4786004073434318  7.910168820180608 0.3196942814888426  C 7.7873939160985035 0.16078815563425342  7.584819074360098 0.15638190907663363  7.457694173676427 0.3098505391792663  C 7.455031675756503 0.3130614741707234  7.452406677807284 0.31634272160724874  7.449819179828765 0.3196942814888426  L 2.236067003072654 6.8369079399156725  L 0.5423058263235732 4.719706468979322  C 0.41518092563990183 4.566237838876688  0.212606083901497 4.570644085434308  0.08983117981939077 4.729550211288897  C -0.029943726606463585 4.884565715183035  -0.029943726606463585 5.130307710697101  0.08983117981939077 5.285323214591238  L 2.009829679820563 7.6853213395927025  C 2.134798332188803 7.841485280089625  2.337354423941856 7.841485280089625  2.4623043263247455 7.6853213395927025  L 7.902293826332949 0.88531102710076  Z " stroke-width="6" stroke="#141414" fill="none" transform="matrix(1 0 0 1 23 68 )" mask="url(#clip71)" />
+    </g>
+  </svg>
+`;
+export const downloadIcon = (slot = 'start') => `
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+    <path d="M480 352h-133.5l-45.25 45.25C289.2 409.3 273.1 416 256 416s-33.16-6.656-45.25-18.75L165.5 352H32c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h448c17.67 0 32-14.33 32-32v-96C512 366.3 497.7 352 480 352zM432 456c-13.2 0-24-10.8-24-24c0-13.2 10.8-24 24-24s24 10.8 24 24C456 445.2 445.2 456 432 456zM233.4 374.6C239.6 380.9 247.8 384 256 384s16.38-3.125 22.62-9.375l128-128c12.49-12.5 12.49-32.75 0-45.25c-12.5-12.5-32.76-12.5-45.25 0L288 274.8V32c0-17.67-14.33-32-32-32C238.3 0 224 14.33 224 32v242.8L150.6 201.4c-12.49-12.5-32.75-12.5-45.25 0c-12.49 12.5-12.49 32.75 0 45.25L233.4 374.6z"/>
+  </svg>
+`;
+export const savedReportsIcon = (slot = 'start') => `
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+    <path d="M256 0v128h128L256 0zM224 128L224 0H48C21.49 0 0 21.49 0 48v416C0 490.5 21.49 512 48 512h288c26.51 0 48-21.49 48-48V160h-127.1C238.3 160 224 145.7 224 128z"/>
+  </svg>
+`;
+export const deleteIcon = (slot = 'start') => `
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+    <path d="M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM31.1 128H416V448C416 483.3 387.3 512 352 512H95.1C60.65 512 31.1 483.3 31.1 448V128zM111.1 208V432C111.1 440.8 119.2 448 127.1 448C136.8 448 143.1 440.8 143.1 432V208C143.1 199.2 136.8 192 127.1 192C119.2 192 111.1 199.2 111.1 208zM207.1 208V432C207.1 440.8 215.2 448 223.1 448C232.8 448 240 440.8 240 432V208C240 199.2 232.8 192 223.1 192C215.2 192 207.1 199.2 207.1 208zM304 208V432C304 440.8 311.2 448 320 448C328.8 448 336 440.8 336 432V208C336 199.2 328.8 192 320 192C311.2 192 304 199.2 304 208z"/>
+  </svg>
+`;
+export const chevronRightIcon = (slot = 'start') => `
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+    <path d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z"/>
+  </svg>
+`;
+export const chevronLeftIcon = (slot = 'start') => `
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+    <path d="M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z"/>
+  </svg>
+`;
+export const runIcon = (slot = 'start') => `
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+    <path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z"/>
+  </svg>
+`;
+export const addIcon = (slot = 'start') => `
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+    <path d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/>
+  </svg>
+`;
+export const editIcon = (slot = 'start') => `
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path d="M490.3 40.4C512.2 62.27 512.2 97.73 490.3 119.6L460.3 149.7L362.3 51.72L392.4 21.66C414.3-.2135 449.7-.2135 471.6 21.66L490.3 40.4zM172.4 241.7L339.7 74.34L437.7 172.3L270.3 339.6C264.2 345.8 256.7 350.4 248.4 353.2L159.6 382.8C150.1 385.6 141.5 383.4 135 376.1C128.6 370.5 126.4 361 129.2 352.4L158.8 263.6C161.6 255.3 166.2 247.8 172.4 241.7V241.7zM192 63.1C209.7 63.1 224 78.33 224 95.1C224 113.7 209.7 127.1 192 127.1H96C78.33 127.1 64 142.3 64 159.1V416C64 433.7 78.33 448 96 448H352C369.7 448 384 433.7 384 416V319.1C384 302.3 398.3 287.1 416 287.1C433.7 287.1 448 302.3 448 319.1V416C448 469 405 512 352 512H96C42.98 512 0 469 0 416V159.1C0 106.1 42.98 63.1 96 63.1H192z"/>
+  </svg>
+`;
+export const actionsOpenIcon = (slot = 'start') => `
+  <svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="5px" height="16px" xmlns="http://www.w3.org/2000/svg">
+    <g transform="matrix(1 0 0 1 -10 -5 )">
+      <path d="M 0 2.3225806451612905  C 0 3.606451612903226  1.1180555555555556 4.645161290322581  2.5 4.645161290322581  C 3.881944444444445 4.645161290322581  5 3.606451612903226  5 2.3225806451612905  C 5 1.038709677419355  3.881944444444445 0  2.5 0  C 1.1180555555555551 0  0 1.038709677419355  0 2.3225806451612905  Z M 1.1111111111111112 2.3225806451612905  C 1.1111111111111112 1.6096774193548389  1.732638888888889 1.032258064516129  2.5 1.032258064516129  C 3.267361111111111 1.032258064516129  3.888888888888889 1.6096774193548387  3.888888888888889 2.3225806451612905  C 3.888888888888889 3.0354838709677416  3.267361111111111 3.6129032258064515  2.5 3.6129032258064515  C 1.732638888888889 3.6129032258064515  1.1111111111111112 3.0354838709677416  1.1111111111111112 2.3225806451612905  Z M 5 8  C 5 6.716129032258064  3.881944444444445 5.67741935483871  2.5 5.67741935483871  C 1.1180555555555556 5.67741935483871  0 6.716129032258064  0 8  C 0 9.283870967741937  1.1180555555555556 10.32258064516129  2.5 10.32258064516129  C 3.881944444444445 10.32258064516129  5 9.283870967741937  5 8  Z M 3.888888888888889 8  C 3.888888888888889 8.712903225806452  3.267361111111111 9.290322580645162  2.5 9.290322580645162  C 1.732638888888889 9.290322580645162  1.1111111111111112 8.712903225806452  1.1111111111111112 8  C 1.1111111111111112 7.2870967741935475  1.732638888888889 6.709677419354839  2.5 6.709677419354839  C 3.267361111111111 6.709677419354839  3.888888888888889 7.287096774193548  3.888888888888889 8  Z M 5 13.67741935483871  C 5 12.393548387096773  3.881944444444445 11.35483870967742  2.5 11.35483870967742  C 1.1180555555555556 11.35483870967742  0 12.393548387096773  0 13.67741935483871  C 0 14.961290322580645  1.1180555555555556 16  2.5 16  C 3.881944444444445 16  5 14.961290322580645  5 13.67741935483871  Z M 3.888888888888889 13.67741935483871  C 3.888888888888889 14.390322580645162  3.267361111111111 14.96774193548387  2.5 14.96774193548387  C 1.732638888888889 14.96774193548387  1.1111111111111112 14.390322580645162  1.1111111111111112 13.67741935483871  C 1.1111111111111112 12.964516129032257  1.732638888888889 12.387096774193548  2.5 12.387096774193548  C 3.267361111111111 12.387096774193548  3.888888888888889 12.964516129032257  3.888888888888889 13.67741935483871  Z " fill-rule="nonzero" fill="inherit" stroke="none" transform="matrix(1 0 0 1 10 5 )" />
+    </g>
+  </svg>
+`;

package/dist/esm/components/components.js

@@ -0,0 +1,51 @@
+import { __awaiter } from "tslib";
+import { FASTRouter } from '@microsoft/fast-router';
+import { CreateEdit } from './create-edit';
+import { List } from './list';
+import { Preview } from './preview';
+import { SelectFields } from './select-fields';
+import { SelectFilters } from './select-filters';
+import { Wizard } from './wizard';
+var ResourceType;
+(function (ResourceType) {
+    ResourceType["LOCAL"] = "LOCAL";
+    ResourceType["REMOTE"] = "REMOTE";
+})(ResourceType || (ResourceType = {}));
+/**
+ * TODO: Think about sharing import functions across micro frontends.
+ */
+function loadZeroFallback() {
+    return import(
+    /* webpackMode: "lazy" */
+    '@genesislcap/foundation-zero');
+}
+/**
+ * Granular
+ */
+function loadZeroDesignSystem() {
+    return __awaiter(this, void 0, void 0, function* () {
+        return yield loadZeroFallback();
+    });
+}
+export function loadRemotes(options) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const { registerZeroDesignSystem } = yield loadZeroDesignSystem();
+        return {
+            ZeroDesignSystem: registerZeroDesignSystem(),
+        };
+    });
+}
+/**
+ * Ensure tree shaking doesn't remove these
+ * Perhaps we keep these MFs style free, ie. they need to get wrapped to have style applied. Keeping it simple for now.
+ */
+FASTRouter;
+/**
+ * Load custom components for reporting
+ */
+CreateEdit;
+List;
+Preview;
+SelectFields;
+SelectFilters;
+Wizard;

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

@@ -0,0 +1,70 @@
+import { __awaiter, __decorate } from "tslib";
+import { Connect } from '@genesislcap/foundation-comms';
+import { customElement, FASTElement, observable } from '@microsoft/fast-element';
+import { ReportingEventListeners } from '../../routes/reporting-home/types';
+import { CreateEditStyles as styles } from './create-edit.styles';
+import { CreateEditTemplate as template } from './create-edit.template';
+const name = 'reporting-create-edit';
+let CreateEdit = class CreateEdit extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.report = {};
+        /**
+         * Create report save handle
+         */
+        this.saveReport = (isEdit, body) => __awaiter(this, void 0, void 0, function* () {
+            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, {
+                DETAILS: Object.assign(Object.assign({}, payload), (isEdit ? { REPORT_ID: this.report.REPORT_ID } : {})),
+                IGNORE_WARNINGS: true,
+                VALIDATE: false,
+            });
+            if (result.MESSAGE_TYPE === 'EVENT_ACK') {
+                notification = {
+                    message: `'${body.REPORT_NAME}' was added`,
+                    title: 'Success:',
+                    type: 'success',
+                    autoClose: true,
+                };
+                this.navigateToListReports();
+            }
+            else {
+                notification = {
+                    message: `'${body.REPORT_NAME}' was not added due to the following error "${result.ERROR[0].TEXT}"`,
+                    title: 'Error:',
+                    type: 'warning',
+                    autoClose: true,
+                };
+            }
+            this.$emit(ReportingEventListeners.notify, notification);
+        });
+    }
+    /**
+     * Trigger parent event listReports that navigates to list reports tab
+     */
+    navigateToListReports() {
+        this.$emit(ReportingEventListeners.listReports, {});
+    }
+};
+__decorate([
+    Connect
+], CreateEdit.prototype, "connect", void 0);
+__decorate([
+    observable
+], CreateEdit.prototype, "id", void 0);
+__decorate([
+    observable
+], CreateEdit.prototype, "report", void 0);
+__decorate([
+    observable
+], CreateEdit.prototype, "datasourceSettings", void 0);
+CreateEdit = __decorate([
+    customElement({
+        name,
+        template,
+        styles,
+    })
+], CreateEdit);
+export { CreateEdit };

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

@@ -0,0 +1,18 @@
+import { neutralForegroundRest } from '@microsoft/fast-components';
+import { css } from '@microsoft/fast-element';
+import { ColorHEX } from '../../styles';
+const { blackPearl } = ColorHEX;
+export const CreateEditStyles = css `
+  .create-edit {
+    width: 100%;
+    height: 98%;
+    margin: 0;
+    padding: 0;
+    color: ${neutralForegroundRest};
+  }
+
+  .container {
+    max-width: 1737px;
+    margin: 0 auto;
+  }
+`;

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

@@ -0,0 +1,13 @@
+import { html } from '@microsoft/fast-element';
+export const CreateEditTemplate = html `
+  <div class="create-edit page" data-test-id="create-edit-page">
+    <div class="container create-edit page">
+      <reporting-wizard
+        :report=${(x) => x.report}
+        :saveReport=${(x) => x.saveReport}
+        :datasourceSettings=${(x) => x.datasourceSettings}
+        data-test-id="reporting-wizard"
+      />
+    </div>
+  </div>
+`;

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

@@ -0,0 +1,3 @@
+export * from './create-edit';
+export * from './create-edit.styles';
+export * from './create-edit.template';

package/dist/esm/components/index.js

@@ -0,0 +1 @@
+export * from './components';

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

@@ -0,0 +1,105 @@
+import { formatDateTimestamp } from '@genesislcap/foundation-utils';
+import { ColorHEX } from '../../styles';
+export var REPORT_FIELDS;
+(function (REPORT_FIELDS) {
+    REPORT_FIELDS["REPORT_ID"] = "REPORT_ID";
+    REPORT_FIELDS["REPORT_NAME"] = "REPORT_NAME";
+    REPORT_FIELDS["REPORT_DESCRIPTION"] = "REPORT_DESCRIPTION";
+    REPORT_FIELDS["REPORT_DATASOURCE"] = "REPORT_DATASOURCE";
+    REPORT_FIELDS["REPORT_COLUMNS"] = "REPORT_COLUMNS";
+    REPORT_FIELDS["CREATED_BY"] = "CREATED_BY";
+    REPORT_FIELDS["REPORT_CREATED_ON"] = "REPORT_CREATED_ON";
+    REPORT_FIELDS["OPTIONS"] = "OPTIONS";
+})(REPORT_FIELDS || (REPORT_FIELDS = {}));
+export function REPORT_COLUMN_DEFS(context) {
+    let retval = [];
+    retval = [
+        {
+            checkboxSelection: true,
+            filter: false,
+            headerCheckboxSelection: true,
+            sortable: false,
+            width: 60,
+            cellStyle: { display: 'flex' },
+        },
+        { field: REPORT_FIELDS.REPORT_ID, hide: true },
+        { field: REPORT_FIELDS.REPORT_COLUMNS, hide: true },
+        {
+            field: REPORT_FIELDS.REPORT_NAME,
+            headerName: 'Report Name',
+            cellStyle: {
+                display: 'flex',
+                justifyContent: 'flex-start',
+                alignItems: 'center',
+                textAlign: 'left',
+                color: ColorHEX.lightBlue,
+            },
+            cellRendererSelector: (params) => {
+                return {
+                    component: 'action',
+                    params: {
+                        actionClick: () => { var _a; return context.runReport((_a = params === null || params === void 0 ? void 0 : params.node) === null || _a === void 0 ? void 0 : _a.data); },
+                        actionName: params === null || params === void 0 ? void 0 : params.value,
+                        appearance: 'lightweight',
+                    },
+                };
+            },
+        },
+        { field: REPORT_FIELDS.REPORT_DESCRIPTION, headerName: 'Description', width: 400 },
+        { field: REPORT_FIELDS.REPORT_DATASOURCE, headerName: 'Datasource' },
+        { field: REPORT_FIELDS.CREATED_BY, headerName: 'Author' },
+        {
+            field: REPORT_FIELDS.REPORT_CREATED_ON,
+            headerName: 'Created date',
+            filter: 'agDateColumnFilter',
+            filterParams: {
+                comparator: (filterLocalDateAtMidnight, cellValue) => {
+                    if (!cellValue)
+                        return -1;
+                    const cellValueTime = new Date(cellValue).setHours(0, 0, 0, 0);
+                    const filterValueTime = filterLocalDateAtMidnight.getTime();
+                    if (cellValueTime === filterValueTime) {
+                        return 0;
+                    }
+                    if (cellValueTime < filterValueTime) {
+                        return -1;
+                    }
+                    if (cellValueTime > filterValueTime) {
+                        return 1;
+                    }
+                },
+                buttons: ['reset', 'apply'],
+                closeOnApply: true,
+                closeOnClear: true,
+                suppressAndOrCondition: true,
+                browserDatePicker: true,
+                filterOptions: ['equals', 'lessThan', 'greaterThan'],
+            },
+            valueFormatter: (rowData) => formatDateTimestamp(rowData.data.REPORT_CREATED_ON),
+        },
+        {
+            width: 100,
+            headerName: 'Actions',
+            filter: false,
+            resizable: false,
+            sortable: false,
+            cellStyle: {
+                display: 'flex',
+                justifyContent: 'flex-end',
+                alignItems: 'center',
+            },
+            cellRendererSelector: (params) => {
+                return {
+                    component: 'action',
+                    params: {
+                        actionClick: () => { var _a; return context.runReport((_a = params === null || params === void 0 ? void 0 : params.node) === null || _a === void 0 ? void 0 : _a.data); },
+                        actionName: 'Run',
+                        appearance: 'primary-gradient',
+                    },
+                };
+            },
+        },
+    ];
+    return retval;
+}
+export function SELECTED_COLUMN_DEFS(context) { }

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

@@ -0,0 +1,3 @@
+export * from './list';
+export * from './list.styles';
+export * from './list.template';

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

@@ -0,0 +1,127 @@
+import { __awaiter, __decorate } from "tslib";
+import { Connect } from '@genesislcap/foundation-comms';
+import { getActionsMenuDef } from '@genesislcap/foundation-zero-grid-pro';
+import { customElement, FASTElement, observable } from '@microsoft/fast-element';
+import { actionsOpenIcon } from '../../assets/images';
+import { ReportingEventListeners } from '../../routes/reporting-home/types';
+import { ColorHEX } from '../../styles';
+import { ListStyles as styles } from './list.styles';
+import { ListTemplate as template } from './list.template';
+const name = 'reporting-list';
+let List = class List extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.userInteractedRow = {};
+        this.selectedRows = [];
+        this.slectionEvent = new CustomEvent('rowSelectionEvent', {
+            detail: { selectedRows: () => this.selectedRows },
+        });
+        this.runReport = (data) => {
+            this.$emit(ReportingEventListeners.runReport, data);
+        };
+        this.actionsMenuSlottedConfig = getActionsMenuDef([
+            {
+                name: 'Edit',
+                callback: (rowData) => {
+                    this.$emit(ReportingEventListeners.editReport, rowData);
+                },
+            },
+            {
+                name: 'Run',
+                callback: (rowData) => {
+                    this.runReport(rowData);
+                },
+            },
+            {
+                name: 'Delete',
+                callback: (rowData) => {
+                    this.delete(rowData);
+                },
+                color: ColorHEX.orange,
+            },
+        ], {
+            width: 60,
+            headerName: '',
+            filter: false,
+            sortable: false,
+            resizable: false,
+            suppressMenu: true,
+            cellStyle: {
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                overflow: 'visible',
+            },
+        }, 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', () => {
+                    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);
+        });
+    }
+    batchDelete() {
+        // service does not accept arrays so have to loop
+        this.selectedRows.forEach((rowData) => this.delete(rowData));
+    }
+};
+__decorate([
+    Connect
+], List.prototype, "connect", void 0);
+__decorate([
+    observable
+], List.prototype, "userInteractedRow", void 0);
+__decorate([
+    observable
+], List.prototype, "selectedRows", void 0);
+List = __decorate([
+    customElement({
+        name,
+        template,
+        styles,
+    })
+], List);
+export { List };

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

@@ -0,0 +1,28 @@
+import { neutralForegroundRest } from '@microsoft/fast-components';
+import { css } from '@microsoft/fast-element';
+import { ColorHEX } from '../../styles';
+const { dark } = ColorHEX;
+export const ListStyles = css `
+  :host {
+    display: block;
+    width: 100%;
+    height: 100%;
+
+    --design-unit: 3.5;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    color: ${neutralForegroundRest};
+    background-color: ${dark};
+  }
+
+  .saved-reports-grid {
+    padding: 10px;
+    width: 100%;
+    height: 80%;
+  }
+`;

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

@@ -0,0 +1,25 @@
+import { html, repeat, ref } from '@microsoft/fast-element';
+import { REPORT_COLUMN_DEFS } from './columns';
+// TODO: provide gridoptions in class
+export const ListTemplate = html `
+  <zero-grid-pro
+    ${ref('grid')}
+    data-test-id="report-grid"
+    only-template-col-defs
+    rowSelection="multiple"
+    suppressRowClickSelection
+    suppressRowTransform
+  >
+    <grid-pro-genesis-datasource resource-name="ALL_SAVED_REPORTS"></grid-pro-genesis-datasource>
+    ${repeat((x) => REPORT_COLUMN_DEFS(x), html `
+        <grid-pro-column
+          data-test-id="report-grid-column"
+          :definition="${(x) => x}"
+        ></grid-pro-column>
+      `)}
+    <grid-pro-column
+      data-test-id="report-grid-actions-column"
+      :definition=${(x) => x.actionsMenuSlottedConfig}
+    ></grid-pro-column>
+  </zero-grid-pro>
+`;

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

@@ -0,0 +1,21 @@
+import { formatDateTimestamp, formatDateTimeTimestamp } from '@genesislcap/foundation-utils';
+import { defaultCellConfig } from '../../constants/grid-config';
+export const getColumns = (columns) => [
+    ...columns.map(({ name, displayName, type }) => {
+        return {
+            field: name,
+            headerName: displayName,
+            filter: 'agTextColumnFilter',
+            valueFormatter: type === 'DATE'
+                ? (rowData) => formatDateTimestamp(rowData.data[name])
+                : type === 'DATETIME'
+                    ? (rowData) => formatDateTimeTimestamp(rowData.data[name])
+                    : '',
+        };
+    }),
+];
+export const getGridOptions = () => {
+    return {
+        defaultColDef: Object.assign(Object.assign({}, defaultCellConfig), { filter: true, floatingFilter: false, sortable: false, suppressMenu: false, resizable: false }),
+    };
+};

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

@@ -0,0 +1,3 @@
+export * from './preview';
+export * from './preview.styles';
+export * from './preview.template';