@genesislcap/pbc-notify-ui 1.0.0 → 1.0.1-prerelease-prerelease

package/dist/dts/components/foundation-notification-dashboard/management/rule-template-management.d.ts

@@ -1,11 +1,11 @@
 import { FASTElement } from '@microsoft/fast-element';
 import { RuleTemplateServiceInterface } from '../../../services/rule-template.service';
+import { TemplateDialog } from '../components/template-dialog/template-dialog';
 export declare class RuleTemplateManagement extends FASTElement {
     ruleTemplateService: RuleTemplateServiceInterface;
-    templateDialogMode: any;
-    ruleTemplateData: any;
-    openTemplateModal(ruleTemplate?: any): Promise<void>;
-    closeTemplateModal(): void;
-    deleteTemplate(ruleTemplate: any): void;
+    templateDialog: TemplateDialog;
+    openTemplateDialog(): void;
+    editTemplate(row: any): Promise<void>;
+    deleteTemplate(row: any): void;
 }
 //# sourceMappingURL=rule-template-management.d.ts.map

package/dist/dts/components/foundation-notification-dashboard/management/rule-template-management.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rule-template-management.d.ts","sourceRoot":"","sources":["../../../../../src/components/foundation-notification-dashboard/management/rule-template-management.ts"],"names":[],"mappings":"AACA,OAAO,EAAsB,WAAW,EAAkC,MAAM,yBAAyB,CAAC;AAC1G,OAAO,EAAuB,4BAA4B,EAAE,MAAM,yCAAyC,CAAC;AA2C5G,qBA0Ca,sBAAuB,SAAQ,WAAW;IAEhC,mBAAmB,EAAE,4BAA4B,CAAC;IAE3D,kBAAkB,MAAQ;IAC1B,gBAAgB,MAAQ;IAE9B,iBAAiB,CAAC,YAAY,CAAC,KAAA;IAarC,kBAAkB;IAKlB,cAAc,CAAC,YAAY,KAAA;CAG5B"}
+{"version":3,"file":"rule-template-management.d.ts","sourceRoot":"","sources":["../../../../../src/components/foundation-notification-dashboard/management/rule-template-management.ts"],"names":[],"mappings":"AACA,OAAO,EAAsB,WAAW,EAAuC,MAAM,yBAAyB,CAAC;AAC/G,OAAO,EAAuB,4BAA4B,EAAE,MAAM,yCAAyC,CAAC;AAK5G,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAuD/E,qBAkCa,sBAAuB,SAAQ,WAAW;IAEhC,mBAAmB,EAAE,4BAA4B,CAAC;IACvE,cAAc,EAAE,cAAc,CAAC;IAE/B,kBAAkB;IAIZ,YAAY,CAAC,GAAG,KAAA;IAKtB,cAAc,CAAC,GAAG,KAAA;CAmBnB"}

package/dist/dts/components/foundation-notification-dashboard/management/screen-route-management.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screen-route-management.d.ts","sourceRoot":"","sources":["../../../../../src/components/foundation-notification-dashboard/management/screen-route-management.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,WAAW,EAAQ,MAAM,yBAAyB,CAAC;AAG3E,qBAYa,qBAAsB,SAAQ,WAAW;CAAG"}
+{"version":3,"file":"screen-route-management.d.ts","sourceRoot":"","sources":["../../../../../src/components/foundation-notification-dashboard/management/screen-route-management.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,WAAW,EAAQ,MAAM,yBAAyB,CAAC;AAG3E,qBAaa,qBAAsB,SAAQ,WAAW;CAAG"}

package/dist/dts/components/foundation-notification-dashboard/notification-dashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification-dashboard.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation-notification-dashboard/notification-dashboard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA6B,MAAM,yBAAyB,CAAC;AAKjF;;GAEG;AACH,qBAKa,+BAAgC,SAAQ,WAAW;IAElD,KAAK,EAAE,OAAO,CAAS;IAE7B,iBAAiB;IAKvB;;;;OAIG;IACG,WAAW;CAIlB"}
+{"version":3,"file":"notification-dashboard.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation-notification-dashboard/notification-dashboard.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAA6B,MAAM,yBAAyB,CAAC;AAMjF;;GAEG;AACH,qBAKa,+BAAgC,SAAQ,WAAW;IAElD,KAAK,EAAE,OAAO,CAAS;IAE7B,iBAAiB;IAKvB;;;;OAIG;IACG,WAAW;CAIlB"}

package/dist/dts/components/foundation-notification-dashboard/types/severity.d.ts

@@ -1,7 +1,7 @@
 export declare const SEVERITY_INFORMATION = "INFORMATION";
-export declare const SEVERITY_WARNING = "WARNING";
 export declare const SEVERITY_CRITICAL = "CRITICAL";
 export declare const SEVERITY_SERIOUS = "SERIOUS";
-export declare const ALL_SEVERITIES: readonly ["INFORMATION", "WARNING", "CRITICAL", "SERIOUS"];
+export declare const SEVERITY_WARNING = "WARNING";
+export declare const ALL_SEVERITIES: readonly ["INFORMATION", "CRITICAL", "SERIOUS", "WARNING"];
 export type Severity = (typeof ALL_SEVERITIES)[number];
 //# sourceMappingURL=severity.d.ts.map

package/dist/dts/components/foundation-notification-dashboard/types/severity.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"severity.d.ts","sourceRoot":"","sources":["../../../../../src/components/foundation-notification-dashboard/types/severity.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,gBAAgB,CAAC;AAClD,eAAO,MAAM,gBAAgB,YAAY,CAAC;AAC1C,eAAO,MAAM,iBAAiB,aAAa,CAAC;AAC5C,eAAO,MAAM,gBAAgB,YAAY,CAAC;AAE1C,eAAO,MAAM,cAAc,4DAKjB,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC"}
+{"version":3,"file":"severity.d.ts","sourceRoot":"","sources":["../../../../../src/components/foundation-notification-dashboard/types/severity.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,gBAAgB,CAAC;AAClD,eAAO,MAAM,iBAAiB,aAAa,CAAC;AAC5C,eAAO,MAAM,gBAAgB,YAAY,CAAC;AAC1C,eAAO,MAAM,gBAAgB,YAAY,CAAC;AAE1C,eAAO,MAAM,cAAc,4DAKjB,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC"}

package/dist/dts/services/alert.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.service.d.ts","sourceRoot":"","sources":["../../../src/services/alert.service.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,qBAAqB;IACpC,SAAS,QAAG;IACZ,kBAAkB,CAAC,OAAO,EAAE,MAAM,OAAE;CACrC;AA0BD,eAAO,MAAM,YAAY,6EAExB,CAAC"}
+{"version":3,"file":"alert.service.d.ts","sourceRoot":"","sources":["../../../src/services/alert.service.ts"],"names":[],"mappings":"AASA,MAAM,WAAW,qBAAqB;IACpC,SAAS,QAAG;IACZ,kBAAkB,CAAC,OAAO,EAAE,MAAM,OAAE;CACrC;AA4BD,eAAO,MAAM,YAAY,6EAExB,CAAC"}

package/dist/dts/services/notify.service.d.ts

@@ -1,5 +1,5 @@
 export interface NotifyServiceInterface {
-    getNotifyRouteTopics(): Promise<string[]>;
+    getNotifyRouteTopics(): any;
 }
 export declare const NotifyService: import("@microsoft/fast-foundation").InterfaceSymbol<NotifyServiceInterface>;
 //# sourceMappingURL=notify.service.d.ts.map

package/dist/dts/services/notify.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notify.service.d.ts","sourceRoot":"","sources":["../../../src/services/notify.service.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,sBAAsB;IACrC,oBAAoB,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;CAC3C;AAgBD,eAAO,MAAM,aAAa,8EAEzB,CAAC"}
+{"version":3,"file":"notify.service.d.ts","sourceRoot":"","sources":["../../../src/services/notify.service.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,sBAAsB;IACrC,oBAAoB,QAAG;CACxB;AAoBD,eAAO,MAAM,aAAa,8EAEzB,CAAC"}

package/dist/dts/services/rule-template.service.d.ts

@@ -2,6 +2,8 @@ import { RuleTemplateEntity } from '../components/foundation-notification-dashbo
 export interface RuleTemplateServiceInterface {
     createRuleTemplate(ruleTemplate: RuleTemplateEntity): Promise<any>;
     editRuleTemplate(ruleTemplate: RuleTemplateEntity): Promise<any>;
+    getResources(): Promise<string[]>;
+    getFields(resource: string): Promise<any>;
     getRuleTemplates(): any;
     getRuleTemplateDetails(dynamicRuleId: string): any;
     deleteRuleTemplate(dynamicRuleId: string): any;

package/dist/dts/services/rule-template.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rule-template.service.d.ts","sourceRoot":"","sources":["../../../src/services/rule-template.service.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kGAAkG,CAAC;AAEtI,MAAM,WAAW,4BAA4B;IAC3C,kBAAkB,CAAC,YAAY,EAAE,kBAAkB,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;IACnE,gBAAgB,CAAC,YAAY,EAAE,kBAAkB,GAAG,OAAO,CAAC,GAAG,CAAC,CAAA;IAChE,gBAAgB,QAAG;IACnB,sBAAsB,CAAC,aAAa,EAAE,MAAM,OAAE;IAC9C,kBAAkB,CAAC,aAAa,EAAE,MAAM,OAAE;CAC3C;AA4DD,eAAO,MAAM,mBAAmB,oFAE/B,CAAC"}
+{"version":3,"file":"rule-template.service.d.ts","sourceRoot":"","sources":["../../../src/services/rule-template.service.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kGAAkG,CAAC;AAEtI,MAAM,WAAW,4BAA4B;IAC3C,kBAAkB,CAAC,YAAY,EAAE,kBAAkB,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;IACnE,gBAAgB,CAAC,YAAY,EAAE,kBAAkB,GAAG,OAAO,CAAC,GAAG,CAAC,CAAA;IAChE,YAAY,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IAClC,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;IAC1C,gBAAgB,QAAG;IACnB,sBAAsB,CAAC,aAAa,EAAE,MAAM,OAAE;IAC9C,kBAAkB,CAAC,aAAa,EAAE,MAAM,OAAE;CAC3C;AA0FD,eAAO,MAAM,mBAAmB,oFAE/B,CAAC"}

package/dist/esm/components/components.js

@@ -2,7 +2,6 @@ import { __awaiter } from "tslib";
 import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
 import { logger } from '../utils';
 import { FoundationInboxCounter } from './foundation-inbox/components/foundation-inbox-counter/foundation-inbox-counter';
-import { FoundationInboxToast } from './foundation-inbox/components/foundation-inbox-toast/foundation-inbox-toast';
 import { ConditionBuilder } from './foundation-notification-dashboard/components/condition-builder/condition-builder';
 import { ParameterBuilder } from './foundation-notification-dashboard/components/parameter-builder/parameter-builder';
 import { RuleDialog } from './foundation-notification-dashboard/components/rule-dialog';
@@ -18,7 +17,6 @@ import { RuleTemplateManagement } from './foundation-notification-dashboard/mana
 import { ScreenRouteManagement } from './foundation-notification-dashboard/management/screen-route-management';
 // Components
 FoundationInboxCounter;
-FoundationInboxToast;
 TemplateDialog;
 ConditionBuilder;
 RuleDialog;

package/dist/esm/components/foundation-inbox/components/components.js

@@ -1,8 +1,7 @@
 import { __awaiter } from "tslib";
 import { FoundationInbox } from '../inbox';
-import { logger } from '../utils';
+import { logger } from '../../../utils';
 import { FoundationInboxCounter } from './foundation-inbox-counter/foundation-inbox-counter';
-import { FoundationInboxToast } from './foundation-inbox-toast/foundation-inbox-toast';
 var ResourceType;
 (function (ResourceType) {
     ResourceType["LOCAL"] = "LOCAL";
@@ -48,5 +47,4 @@ export function loadRemotes() {
  * Perhaps we keep these MFs style free, ie. they need to get wrapped to have style applied. Keeping it simple for now.
  */
 FoundationInboxCounter;
-FoundationInboxToast;
 FoundationInbox;

package/dist/esm/components/foundation-inbox/components/foundation-inbox-counter/foundation-inbox-counter.js

@@ -2,7 +2,6 @@ import { __awaiter, __decorate } from "tslib";
 import { observable, customElement, FASTElement } from '@microsoft/fast-element';
 import { FoundationInboxCounterStyles } from './foundation-inbox-counter.styles';
 import { FoundationInboxCounterTemplate } from './foundation-inbox-counter.template';
-import { FoundationInboxService } from '../../services/foundation-inbox.service';
 let FoundationInboxCounter = class FoundationInboxCounter extends FASTElement {
     constructor() {
         super(...arguments);
@@ -14,23 +13,15 @@ let FoundationInboxCounter = class FoundationInboxCounter extends FASTElement {
         });
         return __awaiter(this, void 0, void 0, function* () {
             _super.connectedCallback.call(this);
-            this.subscriptionHandler = ({ store }) => {
-                this.value = store.notifies.length;
-            };
-            this.foundationInboxService.subscribe(this.subscriptionHandler);
         });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this.foundationInboxService.unsubscribe(this.subscriptionHandler);
     }
 };
 __decorate([
     observable
 ], FoundationInboxCounter.prototype, "value", void 0);
-__decorate([
-    FoundationInboxService
-], FoundationInboxCounter.prototype, "foundationInboxService", void 0);
 FoundationInboxCounter = __decorate([
     customElement({
         name: 'foundation-inbox-counter',

package/dist/esm/components/foundation-inbox/components/foundation-inbox-counter/foundation-inbox-counter.styles.js

@@ -1,6 +1,13 @@
 import { css } from '@microsoft/fast-element';
 const BACKGROUND_COLOR = '#EF5547';
 export const FoundationInboxCounterStyles = css `
+  :host {
+    position: relative;
+    top: 4px;
+    right: 8px;
+    pointer-events: none;
+  }
+
   div {
     display: inline-block;
     min-width: 16px;

package/dist/esm/components/foundation-inbox/inbox.js

@@ -1,16 +1,14 @@
 import { __awaiter, __decorate } from "tslib";
 import * as Components from '../index';
-import { Connect } from '@genesislcap/foundation-comms';
-import { observable, customElement, FASTElement, Observable } from '@microsoft/fast-element';
-import { logger } from './utils';
+import { observable, customElement, FASTElement } from '@microsoft/fast-element';
 import { InboxStyles as styles } from './inbox.styles';
 import { InboxTab, FoundationInboxTemplate as template } from './inbox.template';
-import { RuleStatus } from './inbox.types';
 import { RuleTemplateService } from '../../services/rule-template.service';
 import { RuleService } from '../../services/rule.service';
 import { PARAM_SOURCE_TYPE_DEFINED_GROUP } from '../foundation-notification-dashboard/types/param-source-type';
-import { EMPTY_HTML, createSubscribeComponent } from './inbox.utils';
+import { EMPTY_HTML, createParametersOperatorMap, createSubscribeComponent } from './inbox.utils';
 import { AlertService } from '../../services/alert.service';
+import { logger } from '../../utils';
 /**
  * Foundation inbox component for displaying notifies list.
  * Allow searching, filtering and deleting notifies
@@ -19,21 +17,28 @@ import { AlertService } from '../../services/alert.service';
 let FoundationInbox = class FoundationInbox extends FASTElement {
     constructor() {
         super(...arguments);
+        this.ready = false;
         this.alerts = [];
         this.alertsFilter = [];
+        this.searchAlertLog = '';
         this.rules = [];
         this.rulesFilter = [];
         this.templates = [];
         this.templatesFilter = [];
-        this.ready = false;
-        this.searchAlertLog = '';
         this.searchSubscribe = '';
-        this.parameterDetails = {};
+        this.parametersDetails = {};
         this.ruleTemplateSelected = null;
-        this.subscribeToAlertComponent = '';
+        this.subscribeToAlertComponent = EMPTY_HTML;
+        this.subscribeDisabled = false;
+        this.flyoutClosed = true;
+        // #endregion
+        // #region Changed Events
         this.alertsChanged = () => this.alertsFilter = this.alerts;
         this.rulesChanged = () => this.rulesFilter = this.rules;
         this.templatesChanged = () => this.templatesFilter = this.templates;
+        this.verifySubscribe = () => this.subscribeDisabled = !Object.values(this.parametersDetails).every(x => x !== '');
+        this.searchAlertLogChanged = () => this.search(this.searchAlertLog, 'alerts', 'alertsFilter', 'HEADER');
+        this.searchSubscribeChanged = () => this.search(this.searchSubscribe, 'templates', 'templatesFilter', 'NAME');
     }
     connectedCallback() {
         const _super = Object.create(null, {
@@ -44,79 +49,21 @@ let FoundationInbox = class FoundationInbox extends FASTElement {
             this.alerts = yield this.alertService.getAlerts();
             this.rules = yield this.ruleService.getRules();
             this.templates = yield this.ruleTemplateService.getRuleTemplates();
-            this.handleInboxStatus();
-        });
-    }
-    handleInboxStatus() {
-        this.flyout = this.parentNode;
-        if (!this.flyout) {
-            return;
-        }
-        const _this = this; // Use this constant to call methods and attributes of inbox.ts
-        this.flyoutHandler = {
-            handleChange(source, splices) {
-                return __awaiter(this, void 0, void 0, function* () {
-                    if (!source.closed) {
-                        console.log('Inbox Opened');
-                        _this.rules = yield _this.ruleService.getRules();
-                        _this.templates = yield _this.ruleTemplateService.getRuleTemplates();
-                    }
-                    else {
-                        console.log('Inbox Closed');
-                        _this.cleanSubscriptionFields();
-                    }
-                });
-            },
-        };
-        Observable.getNotifier(this.flyout).subscribe(this.flyoutHandler, 'closed');
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-    }
-    searchAlertLogChanged() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.searchAlertLog) {
-                this.alertsFilter = this.alerts;
-            }
-            this.alertsFilter = this.alerts.filter(item => item.HEADER.toLowerCase().startsWith(this.searchAlertLog.toLowerCase()));
         });
     }
-    searchSubscribeChanged() {
+    open() {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!this.searchSubscribe) {
-                this.templatesFilter = this.templates;
-            }
-            this.templatesFilter = this.templates.filter(item => item.NAME.toLowerCase().startsWith(this.searchSubscribe.toLowerCase()));
+            this.alerts = yield this.alertService.getAlerts();
+            this.rules = yield this.ruleService.getRules();
+            this.templates = yield this.ruleTemplateService.getRuleTemplates();
+            this.flyoutClosed = false;
         });
     }
     close() {
-        this.$emit('close');
-    }
-    openAlertSubscription(ruleTemplate) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.ruleTemplateSelected) {
-                // Close
-                this.cleanSubscriptionFields();
-                return;
-            }
-            // Open
-            this.ruleTemplateSelected = yield this.ruleTemplateService.getRuleTemplateDetails(ruleTemplate.ID);
-            const parameters = this.ruleTemplateSelected.PARAMETERS;
-            this.subscribeToAlertComponent = createSubscribeComponent(parameters);
-            Object.keys(parameters).forEach(key => {
-                const parameter = parameters[key];
-                if (parameter.PARAM_SOURCE_TYPE === PARAM_SOURCE_TYPE_DEFINED_GROUP) {
-                    // Attribute 1st group value for select fields
-                    this.parameterDetails[parameter.PARAM_NAME] = parameter.PARAM_SOURCE.split(',')[0];
-                }
-            });
-        });
-    }
-    cleanSubscriptionFields() {
-        this.ruleTemplateSelected = null;
-        this.parameterDetails = {};
-        this.subscribeToAlertComponent = EMPTY_HTML;
+        this.cleanSubscriptionFields();
+        this.flyout.closeFlyout();
     }
+    // #region Tabs
     checkActiveTab(inboxTab) {
         return this.tabs.activeid === inboxTab.toString()
             ? ''
@@ -125,11 +72,10 @@ let FoundationInbox = class FoundationInbox extends FASTElement {
     inboxTabChanged(inboxTab) {
         return __awaiter(this, void 0, void 0, function* () {
             logger.log('inboxTab Changed:', InboxTab[inboxTab.toString()]);
-            this.ruleTemplateSelected = null;
-            this.subscribeToAlertComponent = '';
+            this.cleanSubscriptionFields();
             switch (inboxTab) {
                 case InboxTab.AlertLog:
-                    // TODO:
+                    this.alerts = yield this.alertService.getAlerts();
                     break;
                 case InboxTab.MyAlerts:
                     this.rules = yield this.ruleService.getRules();
@@ -143,16 +89,32 @@ let FoundationInbox = class FoundationInbox extends FASTElement {
             }
         });
     }
+    search(search, elements, elementsFilter, attribute) {
+        if (!search) {
+            this[elementsFilter] = this[elements];
+            return;
+        }
+        this[elementsFilter] = this[elements].filter(item => item[attribute].toLowerCase().startsWith(search.toLowerCase()));
+    }
+    // #endregion
+    // #region Alert Log
+    // TODO:
+    deleteNotifyAlert(alertId) {
+        return __awaiter(this, void 0, void 0, function* () {
+        });
+    }
+    // #endregion
+    // #region My Alerts
     // TODO:
     editAlert() {
     }
     playPauseAlert(ruleClicked) {
         return __awaiter(this, void 0, void 0, function* () {
             switch (ruleClicked.RULE_STATUS) {
-                case RuleStatus.ENABLED:
+                case 'ENABLED':
                     yield this.ruleService.disableRule(ruleClicked.ID);
                     break;
-                case RuleStatus.DISABLED:
+                case 'DISABLED':
                     yield this.ruleService.enableRule(ruleClicked.ID);
                     break;
                 default:
@@ -168,19 +130,47 @@ let FoundationInbox = class FoundationInbox extends FASTElement {
             this.rules = yield this.ruleService.getRules();
         });
     }
+    // #endregion
+    // #region Subscribe
+    openAlertSubscription(ruleTemplate) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.ruleTemplateSelected) {
+                // Close
+                this.cleanSubscriptionFields();
+                return;
+            }
+            // Open
+            this.ruleTemplateSelected = yield this.ruleTemplateService.getRuleTemplateDetails(ruleTemplate.ID);
+            const parameters = this.ruleTemplateSelected.PARAMETERS;
+            Object.keys(parameters).forEach(key => {
+                const parameter = parameters[key];
+                if (parameter.PARAM_SOURCE_TYPE === PARAM_SOURCE_TYPE_DEFINED_GROUP) {
+                    // Attribute 1st group value for select fields
+                    this.parametersDetails[parameter.PARAM_NAME] = parameter.PARAM_SOURCE.split(',')[0];
+                }
+                this.parametersDetails[parameter.PARAM_NAME] = '';
+            });
+            this.subscribeToAlertComponent = createSubscribeComponent(parameters, createParametersOperatorMap(this.ruleTemplateSelected.RULE_EXPRESSION.CONDITIONS));
+            this.verifySubscribe();
+        });
+    }
     parameterEdit(parameter, valueTyped) {
-        this.parameterDetails[parameter.PARAM_NAME] = valueTyped;
+        this.parametersDetails[parameter.PARAM_NAME] = valueTyped;
+        this.verifySubscribe();
     }
     subscribeAlert() {
         return __awaiter(this, void 0, void 0, function* () {
-            yield this.ruleService.subscribeRule(this.ruleTemplateSelected.DYNAMIC_RULE_ID, this.parameterDetails);
-            this.parameterDetails = {};
-            this.ruleTemplateSelected = null;
+            yield this.ruleService.subscribeRule(this.ruleTemplateSelected.DYNAMIC_RULE_ID, this.parametersDetails);
+            this.cleanSubscriptionFields();
         });
     }
-    deleteNotifyAlert(alertId) {
-        this.alertService.dismissNotifyAlert(alertId);
+    cleanSubscriptionFields() {
+        this.ruleTemplateSelected = null;
+        this.parametersDetails = {};
+        this.subscribeToAlertComponent = EMPTY_HTML;
+        this.subscribeDisabled = false;
     }
+    // #endregion
     /**
      * Load remote components
      * @remarks With regards to module federation
@@ -194,29 +184,32 @@ let FoundationInbox = class FoundationInbox extends FASTElement {
     }
 };
 __decorate([
-    Connect
-], FoundationInbox.prototype, "connect", void 0);
+    observable
+], FoundationInbox.prototype, "ready", void 0);
 __decorate([
     AlertService
 ], FoundationInbox.prototype, "alertService", void 0);
-__decorate([
-    RuleTemplateService
-], FoundationInbox.prototype, "ruleTemplateService", void 0);
-__decorate([
-    RuleService
-], FoundationInbox.prototype, "ruleService", void 0);
 __decorate([
     observable
 ], FoundationInbox.prototype, "alerts", void 0);
 __decorate([
     observable
 ], FoundationInbox.prototype, "alertsFilter", void 0);
+__decorate([
+    observable
+], FoundationInbox.prototype, "searchAlertLog", void 0);
+__decorate([
+    RuleService
+], FoundationInbox.prototype, "ruleService", void 0);
 __decorate([
     observable
 ], FoundationInbox.prototype, "rules", void 0);
 __decorate([
     observable
 ], FoundationInbox.prototype, "rulesFilter", void 0);
+__decorate([
+    RuleTemplateService
+], FoundationInbox.prototype, "ruleTemplateService", void 0);
 __decorate([
     observable
 ], FoundationInbox.prototype, "templates", void 0);
@@ -225,22 +218,22 @@ __decorate([
 ], FoundationInbox.prototype, "templatesFilter", void 0);
 __decorate([
     observable
-], FoundationInbox.prototype, "ready", void 0);
+], FoundationInbox.prototype, "searchSubscribe", void 0);
 __decorate([
     observable
-], FoundationInbox.prototype, "searchAlertLog", void 0);
+], FoundationInbox.prototype, "ruleTemplateSelected", void 0);
 __decorate([
     observable
-], FoundationInbox.prototype, "searchSubscribe", void 0);
+], FoundationInbox.prototype, "subscribeToAlertComponent", void 0);
 __decorate([
     observable
-], FoundationInbox.prototype, "flyout", void 0);
+], FoundationInbox.prototype, "subscribeDisabled", void 0);
 __decorate([
     observable
-], FoundationInbox.prototype, "ruleTemplateSelected", void 0);
+], FoundationInbox.prototype, "flyout", void 0);
 __decorate([
     observable
-], FoundationInbox.prototype, "subscribeToAlertComponent", void 0);
+], FoundationInbox.prototype, "flyoutClosed", void 0);
 FoundationInbox = __decorate([
     customElement({
         name: 'foundation-inbox',

package/dist/esm/components/foundation-inbox/inbox.styles.js

@@ -3,7 +3,19 @@ import { css } from '@microsoft/fast-element';
  * @public
  */
 export const InboxStyles = css `
-  :host {
+  zero-flyout::part(flyout) {
+    width: 30%;
+    min-width: 320px;
+    padding: 0;
+  }
+
+  zero-flyout::part(content) {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .inbox {
     width: 100%;
     height: 100%;
     background: var(--neutral-layer-4);
@@ -225,7 +237,7 @@ export const InboxStyles = css `
     cursor: default;
   }
 
-  .rule-status-date-actions {
+  .rule-status-actions {
     display: flex;
     flex-direction: row;
     gap: 8px;
@@ -236,7 +248,7 @@ export const InboxStyles = css `
     background-color: #2e3034;
   }
 
-  .rule:hover > .rule-status-date-actions > .rule-actions {
+  .rule:hover > .rule-status-actions > .rule-actions {
     visibility: visible;
   }
 

package/dist/esm/components/foundation-inbox/inbox.template.js

@@ -1,6 +1,6 @@
 import { sync } from '@genesislcap/foundation-utils';
 import { html, ref, repeat, when } from '@microsoft/fast-element';
-import { getIcon, getSeverityColor, getStatus } from './inbox.utils';
+import { getFormattedDate, getIcon, getSeverityColor, getStatus } from './inbox.utils';
 export var InboxTab;
 (function (InboxTab) {
     InboxTab[InboxTab["AlertLog"] = 0] = "AlertLog";
@@ -11,13 +11,13 @@ export var InboxTab;
  * @public
  */
 export const FoundationInboxTemplate = html `
+  <zero-flyout ${ref('flyout')} position="right" @closed=${(x) => (x.flyoutClosed = true)} :closed=${(x) => x.flyoutClosed} displayHeader=${false}>
   <div class="inbox-header">
     <div class="inbox-header-title">
       Alerts
     </div>
     <zero-button
       class="inbox-header-close"
-      appearance="primary-gradient"
       @click=${x => x.close()}
     >
       <zero-icon part="icon" name="xmark" size="xl"></zero-icon>
@@ -78,7 +78,7 @@ export const FoundationInboxTemplate = html `
                   <span class="toast-header">${(x) => x.HEADER}</span>
                   <span class="toast-message">${(x) => x.MESSAGE}</span>
                   <div class="toast-bottom" slot="bottom">
-                    <span class="toast-date" slot="date">${(x) => x.CREATED_AT}</span>
+                    <span class="toast-date" slot="date">${(x) => getFormattedDate(x.CREATED_AT)}</span>
                   </div>
                 </div>
                 <div class="toast-delete" @click=${(x, c) => c.parent.deleteNotifyAlert(x.ALERT_ID)}>
@@ -100,11 +100,11 @@ export const FoundationInboxTemplate = html `
               <div class="rule">
                 <div class="rule-name">${x => x.NAME}</div>
                 <div class="rule-expression">${x => x.RULE_EXPRESSION}</div>
-                <div class="rule-status-date-actions">
+                <div class="rule-datetime">${(x, c) => getFormattedDate(x.DATETIME)}</div>
+                <div class="rule-status-actions">
                   <div class="rule-status ${x => getStatus(x.RULE_STATUS).toLowerCase()}">
                     ${(x, c) => getStatus(x.RULE_STATUS)}
                   </div>
-                  <!-- <div class="rule-datetime">${(x, c) => c.parent.getFormattedDate(x.TIMESTAMP)}</div> -->
                   <div class="rule-actions">
                     <!--
                     <span class="rule-action-edit" @click=${(x, c) => c.parent.editAlert(x)}}>
@@ -150,9 +150,7 @@ export const FoundationInboxTemplate = html `
               >
                 <div class="rule-template-name">${x => x.NAME}</div>
                 <div class="rule-template-description">${x => x.DESCRIPTION}</div>
-                <!--
-                <div class="rule-template-datetime">${(x, c) => c.parent.getFormattedDate(x.TIMESTAMP)}</div>
-                -->
+                <div class="rule-template-datetime">${(x, c) => getFormattedDate(x.DATETIME)}</div>
               </div>
             `)}
         </div>
@@ -173,7 +171,7 @@ export const FoundationInboxTemplate = html `
                 <zero-button
                   class="subscribe"
                   @click=${x => x.subscribeAlert()}
-                  appearance="primary-gradient"
+                  ?disabled=${x => x.subscribeDisabled}
                 >
                   Subscribe
                 </zero-button>
@@ -183,4 +181,5 @@ export const FoundationInboxTemplate = html `
       </zero-tab-panel>
     </zero-tabs>
   </div>
+  </zero-flyout>
 `;

package/dist/esm/components/foundation-inbox/inbox.types.js

@@ -1,9 +1 @@
-export var NotifyResourceNames;
-(function (NotifyResourceNames) {
-    NotifyResourceNames["ALL_RECORDS"] = "ALL_NOTIFY_ALERT_RECORDS";
-})(NotifyResourceNames || (NotifyResourceNames = {}));
-export var RuleStatus;
-(function (RuleStatus) {
-    RuleStatus["ENABLED"] = "ENABLED";
-    RuleStatus["DISABLED"] = "DISABLED";
-})(RuleStatus || (RuleStatus = {}));
+export {};