npm - @genesislcap/pbc-notify-ui - Versions diffs - 1.0.0 → 1.0.1 - Mend

@genesislcap/pbc-notify-ui 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/dts/components/foundation-inbox/components/foundation-inbox-counter/foundation-inbox-counter.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"foundation-inbox-counter.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/foundation-inbox/components/foundation-inbox-counter/foundation-inbox-counter.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,4BAA4B,~~iDAkBxC~~,CAAC"}
1	+ {"version":3,"file":"foundation-inbox-counter.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/foundation-inbox/components/foundation-inbox-counter/foundation-inbox-counter.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,4BAA4B,iDAyBxC,CAAC"}

package/dist/dts/components/foundation-inbox/inbox.d.ts CHANGED Viewed

@@ -1,11 +1,11 @@
 import { Connect } from '@genesislcap/foundation-comms';
+import { Flyout, Tabs } from '@genesislcap/foundation-zero';
 import { FASTElement } from '@microsoft/fast-element';
-import { InboxTab } from './inbox.template';
-import { RuleTemplate, Rule, NotificationRuleTemplateReply, Alert } from './inbox.types';
-import { Tabs } from '@genesislcap/foundation-zero';
+import { AlertServiceInterface } from '../../services/alert.service';
 import { RuleTemplateServiceInterface } from '../../services/rule-template.service';
 import { RuleServiceInterface } from '../../services/rule.service';
-import { AlertServiceInterface } from '../../services/alert.service';
+import { InboxTab } from './inbox.template';
+import { Alert, NotificationRuleTemplateReply, Rule, RuleTemplate } from './inbox.types';
 /**
  * Foundation inbox component for displaying notifies list.
  * Allow searching, filtering and deleting notifies
@@ -29,18 +29,18 @@ export declare class FoundationInbox extends FASTElement {
     tabs: Tabs;
     private flyoutNotifier;
     private flyoutHandler;
-    private flyout;
+    flyout: Flyout;
+    flyoutClosed: boolean;
     ruleTemplateSelected: NotificationRuleTemplateReply;
     subscribeToAlertComponent: any;
     connectedCallback(): Promise<void>;
-    private handleInboxStatus;
-    disconnectedCallback(): void;
+    open(): Promise<void>;
+    close(): void;
     alertsChanged: () => Alert[];
     rulesChanged: () => Rule[];
     templatesChanged: () => RuleTemplate[];
     private searchAlertLogChanged;
     private searchSubscribeChanged;
-    close(): void;
     openAlertSubscription(ruleTemplate: any): Promise<void>;
     cleanSubscriptionFields(): void;
     checkActiveTab(inboxTab: InboxTab): "" | "display: none;";

package/dist/dts/components/foundation-inbox/inbox.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"inbox.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation-inbox/inbox.ts"],"names":[],"mappings":"~~AACA~~,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,~~EAA6B~~,~~WAAW~~,~~EAA4C~~,MAAM,~~yBAAyB~~,CAAC;~~AAG3H~~,OAAO,EAAE,~~QAAQ~~,~~EAAuC~~,MAAM,~~kBAAkB~~,CAAC;~~AACjF~~,OAAO,~~EAAc~~,~~YAAY~~,EAAE,~~IAAI~~,~~EAAE~~,~~6BAA6B~~,~~EAAE~~,~~KAAK~~,EAAE,MAAM,~~eAAe~~,CAAC;~~AACrG~~,OAAO,~~EAAU~~,~~IAAI~~,EAAE,MAAM,~~8BAA8B~~,CAAC;~~AAC5D~~,OAAO,~~EAAuB~~,~~4BAA4B~~,~~EAAE~~,MAAM,~~sCAAsC~~,CAAC;~~AACzG~~,OAAO,~~EAAe~~,~~oBAAoB~~,EAAE,~~MAAM,~~6BAA6B,~~CAAC;AAGhF~~,~~OAAO~~,~~EAAgB~~,~~qBAAqB~~,EAAE,MAAM,~~8BAA8B~~,CAAC;~~AAEnF~~;;;;GAIG;AACH,qBAKa,eAAgB,SAAQ,WAAW;IAErC,OAAO,EAAE,OAAO,CAAC;IAEZ,YAAY,EAAE,qBAAqB,CAAC;IAC7B,mBAAmB,EAAE,4BAA4B,CAAC;IAC1D,WAAW,EAAE,oBAAoB,CAAC;IAEnC,MAAM,EAAE,KAAK,EAAE,CAAM;IACrB,YAAY,EAAE,KAAK,EAAE,CAAM;IAE3B,KAAK,EAAE,IAAI,EAAE,CAAM;IACnB,WAAW,EAAE,IAAI,EAAE,CAAM;IAEzB,SAAS,EAAE,YAAY,EAAE,CAAM;IAC/B,eAAe,EAAE,YAAY,EAAE,CAAM;IAErC,KAAK,EAAE,OAAO,CAAS;IAEvB,cAAc,EAAE,MAAM,CAAM;IAC5B,eAAe,EAAE,MAAM,CAAM;IAEzC,OAAO,CAAC,gBAAgB,CAAM;IAEvB,IAAI,EAAE,IAAI,CAAC;IAElB,OAAO,CAAC,cAAc,CAAW;IACjC,OAAO,CAAC,aAAa,CAAa;~~IAEtB~~,~~OAAO~~,~~CAAC~~,MAAM,CAAC;~~IAEf~~,oBAAoB,EAAE,6BAA6B,CAAQ;IAC3D,yBAAyB,EAAE,GAAG,CAAM;IAE1C,iBAAiB;~~IAQvB~~,~~OAAO,CAAC,iBAAiB~~;~~IAwBzB~~,~~oBAAoB~~;~~IAIpB~~,aAAa,gBAAyC;IAEtD,YAAY,eAAuC;IAEnD,gBAAgB,uBAA+C;YAEjD,qBAAqB;YAUrB,sBAAsB;~~IAUpC~~,~~KAAK;IAIC,~~qBAAqB,CAAC,YAAY,EAAE,GAAG;IAoB7C,uBAAuB;IAMvB,cAAc,CAAC,QAAQ,EAAE,QAAQ;IAM3B,eAAe,CAAC,QAAQ,EAAE,QAAQ;IAsBxC,SAAS;IAGH,cAAc,CAAC,WAAW,KAAA;IAgB1B,WAAW,CAAC,WAAW,KAAA;IAK7B,aAAa,CAAC,SAAS,KAAA,EAAE,UAAU,KAAA;IAI7B,cAAc;IASpB,iBAAiB,CAAC,OAAO,EAAE,MAAM;IAIjC;;;;OAIG;IACG,WAAW;CAIlB"}
1	+ {"version":3,"file":"inbox.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation-inbox/inbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAmD,MAAM,yBAAyB,CAAC;AACvG,OAAO,EAAgB,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACnF,OAAO,EAAuB,4BAA4B,EAAE,MAAM,sCAAsC,CAAC;AACzG,OAAO,EAAe,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAIhF,OAAO,EAAE,QAAQ,EAAuC,MAAM,kBAAkB,CAAC;AACjF,OAAO,EAAE,KAAK,EAAE,6BAA6B,EAAE,IAAI,EAAc,YAAY,EAAE,MAAM,eAAe,CAAC;AAIrG;;;;GAIG;AACH,qBAKa,eAAgB,SAAQ,WAAW;IAErC,OAAO,EAAE,OAAO,CAAC;IAEZ,YAAY,EAAE,qBAAqB,CAAC;IAC7B,mBAAmB,EAAE,4BAA4B,CAAC;IAC1D,WAAW,EAAE,oBAAoB,CAAC;IAEnC,MAAM,EAAE,KAAK,EAAE,CAAM;IACrB,YAAY,EAAE,KAAK,EAAE,CAAM;IAE3B,KAAK,EAAE,IAAI,EAAE,CAAM;IACnB,WAAW,EAAE,IAAI,EAAE,CAAM;IAEzB,SAAS,EAAE,YAAY,EAAE,CAAM;IAC/B,eAAe,EAAE,YAAY,EAAE,CAAM;IAErC,KAAK,EAAE,OAAO,CAAS;IAEvB,cAAc,EAAE,MAAM,CAAM;IAC5B,eAAe,EAAE,MAAM,CAAM;IAEzC,OAAO,CAAC,gBAAgB,CAAM;IAEvB,IAAI,EAAE,IAAI,CAAC;IAElB,OAAO,CAAC,cAAc,CAAW;IACjC,OAAO,CAAC,aAAa,CAAa;IAE3B,MAAM,EAAE,MAAM,CAAC;IACH,YAAY,EAAE,OAAO,CAAQ;IAEpC,oBAAoB,EAAE,6BAA6B,CAAQ;IAC3D,yBAAyB,EAAE,GAAG,CAAM;IAE1C,iBAAiB;IAOV,IAAI;IAOV,KAAK;IAMZ,aAAa,gBAAyC;IAEtD,YAAY,eAAuC;IAEnD,gBAAgB,uBAA+C;YAEjD,qBAAqB;YAUrB,sBAAsB;IAU9B,qBAAqB,CAAC,YAAY,EAAE,GAAG;IAoB7C,uBAAuB;IAMvB,cAAc,CAAC,QAAQ,EAAE,QAAQ;IAM3B,eAAe,CAAC,QAAQ,EAAE,QAAQ;IAsBxC,SAAS;IAGH,cAAc,CAAC,WAAW,KAAA;IAgB1B,WAAW,CAAC,WAAW,KAAA;IAK7B,aAAa,CAAC,SAAS,KAAA,EAAE,UAAU,KAAA;IAI7B,cAAc;IASpB,iBAAiB,CAAC,OAAO,EAAE,MAAM;IAIjC;;;;OAIG;IACG,WAAW;CAIlB"}

package/dist/dts/components/foundation-inbox/inbox.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"inbox.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation-inbox/inbox.styles.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,WAAW,~~iDAkUvB~~,CAAC"}
1	+ {"version":3,"file":"inbox.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation-inbox/inbox.styles.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,WAAW,iDA4UvB,CAAC"}

package/dist/dts/components/foundation-inbox/inbox.template.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"inbox.template.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation-inbox/inbox.template.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAG1C,oBAAY,QAAQ;IAClB,QAAQ,IAAA;IACR,QAAQ,IAAA;IACR,SAAS,IAAA;CACV;AAED;;GAEG;AACH,eAAO,MAAM,uBAAuB,~~sEA+LnC~~,CAAC"}
1	+ {"version":3,"file":"inbox.template.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation-inbox/inbox.template.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAG1C,oBAAY,QAAQ;IAClB,QAAQ,IAAA;IACR,QAAQ,IAAA;IACR,SAAS,IAAA;CACV;AAED;;GAEG;AACH,eAAO,MAAM,uBAAuB,sEAmMnC,CAAC"}

package/dist/dts/components/foundation-notification-dashboard/components/template-dialog/template-dialog.d.ts CHANGED Viewed

@@ -41,7 +41,7 @@ export declare class TemplateDialog extends FASTElement {
         NAME: any;
         VALUE?: undefined;
     };
-    getLeftType(condition: ConditionBuilderEntity): "FIELD" | "STRING" | "NUMBER";
+    getLeftType(condition: ConditionBuilderEntity): "FIELD" | "NUMBER" | "STRING";
     getRightExpression(condition: ConditionBuilderEntity): {
         TYPE: string;
         KEY: string;

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

@@ -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 CHANGED Viewed

@@ -1,16 +1,16 @@
 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 { InboxStyles as styles } from './inbox.styles';
-import { InboxTab, FoundationInboxTemplate as template } from './inbox.template';
-import { RuleStatus } from './inbox.types';
+import { FASTElement, customElement, observable } from '@microsoft/fast-element';
+import { AlertService } from '../../services/alert.service';
 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 * as Components from '../index';
+import { InboxStyles as styles } from './inbox.styles';
+import { InboxTab, FoundationInboxTemplate as template } from './inbox.template';
+import { RuleStatus } from './inbox.types';
 import { EMPTY_HTML, 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
@@ -29,6 +29,7 @@ let FoundationInbox = class FoundationInbox extends FASTElement {
         this.searchAlertLog = '';
         this.searchSubscribe = '';
         this.parameterDetails = {};
+        this.flyoutClosed = true;
         this.ruleTemplateSelected = null;
         this.subscribeToAlertComponent = '';
         this.alertsChanged = () => this.alertsFilter = this.alerts;
@@ -44,34 +45,18 @@ 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();
+    open() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.rules = yield this.ruleService.getRules();
+            this.templates = yield this.ruleTemplateService.getRuleTemplates();
+            this.flyoutClosed = false;
+        });
+    }
+    close() {
+        this.cleanSubscriptionFields();
+        this.flyout.closeFlyout();
     }
     searchAlertLogChanged() {
         return __awaiter(this, void 0, void 0, function* () {
@@ -89,9 +74,6 @@ let FoundationInbox = class FoundationInbox extends FASTElement {
             this.templatesFilter = this.templates.filter(item => item.NAME.toLowerCase().startsWith(this.searchSubscribe.toLowerCase()));
         });
     }
-    close() {
-        this.$emit('close');
-    }
     openAlertSubscription(ruleTemplate) {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.ruleTemplateSelected) {
@@ -234,7 +216,7 @@ __decorate([
 ], FoundationInbox.prototype, "searchSubscribe", void 0);
 __decorate([
     observable
-], FoundationInbox.prototype, "flyout", void 0);
+], FoundationInbox.prototype, "flyoutClosed", void 0);
 __decorate([
     observable
 ], FoundationInbox.prototype, "ruleTemplateSelected", void 0);

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

@@ -3,7 +3,17 @@ 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%;
+  }
+  .inbox {
     width: 100%;
     height: 100%;
     background: var(--neutral-layer-4);

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

@@ -11,176 +11,180 @@ export var InboxTab;
  * @public
  */
 export const FoundationInboxTemplate = html `
-  <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>
-    </zero-button>
-  </div>
+  <zero-flyout ${ref('flyout')} position="right" @closed=${(x) => (x.flyoutClosed = true)} :closed=${(x) => x.flyoutClosed} displayHeader=${false}>
+    <div class="inbox">
+      <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>
+        </zero-button>
+      </div>
-  <div class="inbox-content">
-    <zero-tabs
-      ${(ref('tabs'))}
-      appearance="secondary"
-      activeid=${x => InboxTab.AlertLog}
-    >
-      <zero-tab
-        slot="alert-log-tab"
-        id=${x => InboxTab.AlertLog}
-        @click=${x => x.inboxTabChanged(InboxTab.AlertLog)}
-        appearance="secondary"
-      >
-        Alert Log
-      </zero-tab>
-      <zero-tab
-        slot="my-alerts-tab"
-        id=${x => InboxTab.MyAlerts}
-        @click=${x => x.inboxTabChanged(InboxTab.MyAlerts)}
-        appearance="secondary"
-      >
-        My Alerts
-      </zero-tab>
-      <zero-tab
-        slot="subscribe-tab"
-        id=${x => InboxTab.Subscribe}
-        @click=${x => x.inboxTabChanged(InboxTab.Subscribe)}
-        appearance="secondary"
-      >
-        Subscribe
-      </zero-tab>
-      <zero-tab-panel
-        slot="alert-log-tab"
-        class="alert-log-tab-panel"
-        id=${x => InboxTab.AlertLog}
-        style=${x => x.checkActiveTab(InboxTab.AlertLog)}
-      >
-        <div class="search">
-          <zero-text-field
-            class="search-input"
-            :value=${sync((x) => x.searchAlertLog)}
-            placeholder="Search Alerts..."
-            autocomplete="off"
+      <div class="inbox-content">
+        <zero-tabs
+          ${(ref('tabs'))}
+          appearance="secondary"
+          activeid=${x => InboxTab.AlertLog}
+        >
+          <zero-tab
+            slot="alert-log-tab"
+            id=${x => InboxTab.AlertLog}
+            @click=${x => x.inboxTabChanged(InboxTab.AlertLog)}
+            appearance="secondary"
           >
-          </zero-text-field>
-        </div>
-        <div class="alert-log-tab-content">
-          ${repeat(x => x.alertsFilter, html `
-              <div class="toast" id=${(x) => x.ALERT_ID}>
-                <div class="toast-severity" style="background-color: ${(x) => getSeverityColor(x.NOTIFY_SEVERITY)}"></div>
-                <div class="toast-content">
-                  <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>
+            Alert Log
+          </zero-tab>
+          <zero-tab
+            slot="my-alerts-tab"
+            id=${x => InboxTab.MyAlerts}
+            @click=${x => x.inboxTabChanged(InboxTab.MyAlerts)}
+            appearance="secondary"
+          >
+            My Alerts
+          </zero-tab>
+          <zero-tab
+            slot="subscribe-tab"
+            id=${x => InboxTab.Subscribe}
+            @click=${x => x.inboxTabChanged(InboxTab.Subscribe)}
+            appearance="secondary"
+          >
+            Subscribe
+          </zero-tab>
+          <zero-tab-panel
+            slot="alert-log-tab"
+            class="alert-log-tab-panel"
+            id=${x => InboxTab.AlertLog}
+            style=${x => x.checkActiveTab(InboxTab.AlertLog)}
+          >
+            <div class="search">
+              <zero-text-field
+                class="search-input"
+                :value=${sync((x) => x.searchAlertLog)}
+                placeholder="Search Alerts..."
+                autocomplete="off"
+              >
+              </zero-text-field>
+            </div>
+            <div class="alert-log-tab-content">
+              ${repeat(x => x.alertsFilter, html `
+                  <div class="toast" id=${(x) => x.ALERT_ID}>
+                    <div class="toast-severity" style="background-color: ${(x) => getSeverityColor(x.NOTIFY_SEVERITY)}"></div>
+                    <div class="toast-content">
+                      <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>
+                      </div>
+                    </div>
+                    <div class="toast-delete" @click=${(x, c) => c.parent.deleteNotifyAlert(x.ALERT_ID)}>
+                      <zero-icon name="xmark" variant="solid" size="lg"><zero-icon>
+                    </div>
                   </div>
-                </div>
-                <div class="toast-delete" @click=${(x, c) => c.parent.deleteNotifyAlert(x.ALERT_ID)}>
-                  <zero-icon name="xmark" variant="solid" size="lg"><zero-icon>
-                </div>
-              </div>
-            `)}
-        </div>
-      </zero-tab-panel>
+                `)}
+            </div>
+          </zero-tab-panel>
-      <zero-tab-panel
-        slot="my-alerts-tab"
-        class="my-alerts-tab-panel"
-        id=${x => InboxTab.MyAlerts}
-        style=${x => x.checkActiveTab(InboxTab.MyAlerts)}
-      >
-        <div class="my-alerts-tab-content">
-          ${repeat((x) => x.rulesFilter, 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-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)}}>
-                      <zero-icon name="gear"></zero-icon>
-                    </span>
-                    -->
-                    <span class="rule-action-enable-disable" @click=${(x, c) => c.parent.playPauseAlert(x)}>
-                      <zero-icon name=${x => getIcon(x.RULE_STATUS)}></zero-icon>
-                    </span>
-                    <span class="rule-action-delete" @click=${(x, c) => c.parent.deleteAlert(x)}>
-                      <zero-icon name="trash"></zero-icon>
-                    </span>
+          <zero-tab-panel
+            slot="my-alerts-tab"
+            class="my-alerts-tab-panel"
+            id=${x => InboxTab.MyAlerts}
+            style=${x => x.checkActiveTab(InboxTab.MyAlerts)}
+          >
+            <div class="my-alerts-tab-content">
+              ${repeat((x) => x.rulesFilter, 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-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)}}>
+                          <zero-icon name="gear"></zero-icon>
+                        </span>
+                        -->
+                        <span class="rule-action-enable-disable" @click=${(x, c) => c.parent.playPauseAlert(x)}>
+                          <zero-icon name=${x => getIcon(x.RULE_STATUS)}></zero-icon>
+                        </span>
+                        <span class="rule-action-delete" @click=${(x, c) => c.parent.deleteAlert(x)}>
+                          <zero-icon name="trash"></zero-icon>
+                        </span>
+                      </div>
+                    </div>
                   </div>
-                </div>
-              </div>
-            `)}
-        </div>
-      </zero-tab-panel>
+                `)}
+            </div>
+          </zero-tab-panel>
-      <zero-tab-panel
-        slot="subscribe-tab"
-        class="subscribe-tab-panel"
-        id=${x => InboxTab.Subscribe}
-        style=${x => x.checkActiveTab(InboxTab.Subscribe)}
-      >
-        <div class="search">
-          <zero-text-field
-            class="search-input"
-            :value=${sync(x => x.searchSubscribe)}
-            placeholder="Search Templates..."
-            autocomplete="off"
+          <zero-tab-panel
+            slot="subscribe-tab"
+            class="subscribe-tab-panel"
+            id=${x => InboxTab.Subscribe}
+            style=${x => x.checkActiveTab(InboxTab.Subscribe)}
           >
-          </zero-text-field>
-        </div>
-        <div
-          class="subscribe-tab-content"
-        >
-          ${repeat((x) => x.templatesFilter, html `
-              <div
-                class="rule-template"
-                @click=${(x, c) => c.parent.openAlertSubscription(x)}
-                id=${(x) => x.ID}
+            <div class="search">
+              <zero-text-field
+                class="search-input"
+                :value=${sync(x => x.searchSubscribe)}
+                placeholder="Search Templates..."
+                autocomplete="off"
               >
-                <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>
-            `)}
-        </div>
-        ${when(x => x.ruleTemplateSelected, html `
-            <div class="subscribe-to-alert">
-              <div class="subscribe-to-alert-header">
-                Subscribe to <span style="font-weight: bold;">${x => { var _a; return (_a = x.templates.filter(template => template.ID === x.ruleTemplateSelected.DYNAMIC_RULE_ID)[0]) === null || _a === void 0 ? void 0 : _a.NAME; }}</span>
-              </div>
-              ${when(x => Object.values(x.ruleTemplateSelected.PARAMETERS).length === 0, html `
-                  <p style="padding-left: 10px;">The selected template doesn't have parameters.</p>
-                `)}
-              ${when(x => Object.values(x.ruleTemplateSelected.PARAMETERS).length > 0, html `
-                  <div class="subscribe-to-alert-content">
-                    ${x => x.subscribeToAlertComponent}
+              </zero-text-field>
+            </div>
+            <div
+              class="subscribe-tab-content"
+            >
+              ${repeat((x) => x.templatesFilter, html `
+                  <div
+                    class="rule-template"
+                    @click=${(x, c) => c.parent.openAlertSubscription(x)}
+                    id=${(x) => x.ID}
+                  >
+                    <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>
                 `)}
-              <div class="subscribe-to-alert-footer">
-                <zero-button
-                  class="subscribe"
-                  @click=${x => x.subscribeAlert()}
-                  appearance="primary-gradient"
-                >
-                  Subscribe
-                </zero-button>
-              </div>
             </div>
-          `)}
-      </zero-tab-panel>
-    </zero-tabs>
-  </div>
+            ${when(x => x.ruleTemplateSelected, html `
+                <div class="subscribe-to-alert">
+                  <div class="subscribe-to-alert-header">
+                    Subscribe to <span style="font-weight: bold;">${x => { var _a; return (_a = x.templates.filter(template => template.ID === x.ruleTemplateSelected.DYNAMIC_RULE_ID)[0]) === null || _a === void 0 ? void 0 : _a.NAME; }}</span>
+                  </div>
+                  ${when(x => Object.values(x.ruleTemplateSelected.PARAMETERS).length === 0, html `
+                      <p style="padding-left: 10px;">The selected template doesn't have parameters.</p>
+                    `)}
+                  ${when(x => Object.values(x.ruleTemplateSelected.PARAMETERS).length > 0, html `
+                      <div class="subscribe-to-alert-content">
+                        ${x => x.subscribeToAlertComponent}
+                      </div>
+                    `)}
+                  <div class="subscribe-to-alert-footer">
+                    <zero-button
+                      class="subscribe"
+                      @click=${x => x.subscribeAlert()}
+                      appearance="primary-gradient"
+                    >
+                      Subscribe
+                    </zero-button>
+                  </div>
+                </div>
+              `)}
+          </zero-tab-panel>
+        </zero-tabs>
+      </div>
+    </div>
+  </zero-flyout>
 `;

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/pbc-notify-ui",
   "description": "Genesis PBC Notify UI",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/foundation-notify.d.ts",