@genesislcap/pbc-notify-ui 1.0.48 → 1.0.49

package/dist/dts/components/foundation-inbox/inbox-base/inbox-base.d.ts

@@ -41,6 +41,7 @@ export declare class FoundationInboxBase extends GenesisElement {
     filterSearchAlertLog(): void;
     reverseOrder(reverse: boolean): void;
     filterSearchSubscribe(): void;
+    clearSearch(): void;
     dismissAlert(alertId: string): void;
     validateResponse(response: any): void;
     dismissAllAlerts(): void;
@@ -48,6 +49,7 @@ export declare class FoundationInboxBase extends GenesisElement {
     playPauseAlert(ruleClicked: Rule): Promise<void>;
     deleteAlert(ruleClicked: Rule): Promise<void>;
     openTemplateSubscription(ruleTemplate: any): Promise<void>;
-    formatDateForMatchCriteria(date: any): any;
+    formatDateStrForMatchCriteria(date: string): string;
+    formatDateForMatchCriteria(date: Date): string;
 }
 //# sourceMappingURL=inbox-base.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"inbox-base.d.ts","sourceRoot":"","sources":["../../../../../src/components/foundation-inbox/inbox-base/inbox-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,+BAA+B,CAAC;AACrD,OAAO,EAEL,UAAU,EAIX,MAAM,kCAAkC,CAAC;AAE1C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,cAAc,EAAc,MAAM,uBAAuB,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAGrE,OAAO,EACL,KAAK,EACL,QAAQ,EACR,6BAA6B,EAC7B,IAAI,EAEJ,YAAY,EACb,MAAM,gBAAgB,CAAC;AAYxB,qBAAa,mBAAoB,SAAQ,cAAc;IAC/C,IAAI,EAAE,IAAI,CAAC;IAEH,YAAY,EAAE,YAAY,CAAC;IACjB,YAAY,EAAE,sBAAsB,CAAC;IAC7D,OAAO,CAAC,iBAAiB,CAAgB;IAC7B,OAAO,CAAC,MAAM,CAAe;IAC7B,YAAY,EAAE,KAAK,EAAE,CAAM;IAE1B,WAAW,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,IAAI,EAAE,CAAM;IACnB,WAAW,EAAE,IAAI,EAAE,CAAM;IAEpB,eAAe,EAAE,eAAe,CAAC;IACtC,SAAS,EAAE,YAAY,EAAE,CAAM;IAC/B,eAAe,EAAE,YAAY,EAAE,CAAM;IAErC,cAAc,EAAE,MAAM,CAAQ;IAC9B,mBAAmB,EAAE,MAAM,CAAQ;IACnC,gBAAgB,EAAE,MAAM,CAAQ;IAChC,eAAe,EAAE,MAAM,CAAQ;IAE/B,eAAe,EAAE,MAAM,CAAQ;IAC/B,mBAAmB,EAAE,6BAA6B,CAAQ;IAC1D,WAAW,EAAE,QAAQ,CAAuB;IAE5C,mBAAmB,EAAE,MAAM,CAAQ;IACnC,iBAAiB,EAAE,MAAM,CAAQ;IAEjC,wBAAwB,EAAE,UAAU,CAAC;IACrC,OAAO,EAAE,OAAO,CAAS;IAE9B,IAAI,EAAE,IAAI,CAAC;IAEZ,iBAAiB;IAiBvB,oBAAoB;IAMd,eAAe,CAAC,QAAQ,EAAE,QAAQ;IA+BxC,aAAa,gBAA2C;IAExD,YAAY,eAAyC;IAErD,gBAAgB,uBAAiD;IAEjE,oBAAoB;IAiDpB,YAAY,CAAC,OAAO,EAAE,OAAO;IAK7B,qBAAqB;IAarB,YAAY,CAAC,OAAO,EAAE,MAAM;IAI5B,gBAAgB,CAAC,QAAQ,KAAA;IASzB,gBAAgB;IA4BhB,SAAS;IAEH,cAAc,CAAC,WAAW,EAAE,IAAI;IAgBhC,WAAW,CAAC,WAAW,EAAE,IAAI;IAO7B,wBAAwB,CAAC,YAAY,EAAE,GAAG;IAYhD,0BAA0B,CAAC,IAAI,KAAA;CAIhC"}
+{"version":3,"file":"inbox-base.d.ts","sourceRoot":"","sources":["../../../../../src/components/foundation-inbox/inbox-base/inbox-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,+BAA+B,CAAC;AACrD,OAAO,EAEL,UAAU,EAIX,MAAM,kCAAkC,CAAC;AAE1C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,cAAc,EAAc,MAAM,uBAAuB,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAGrE,OAAO,EACL,KAAK,EACL,QAAQ,EACR,6BAA6B,EAC7B,IAAI,EAEJ,YAAY,EACb,MAAM,gBAAgB,CAAC;AAYxB,qBAAa,mBAAoB,SAAQ,cAAc;IAC/C,IAAI,EAAE,IAAI,CAAC;IAEH,YAAY,EAAE,YAAY,CAAC;IACjB,YAAY,EAAE,sBAAsB,CAAC;IAC7D,OAAO,CAAC,iBAAiB,CAAgB;IAC7B,OAAO,CAAC,MAAM,CAAe;IAC7B,YAAY,EAAE,KAAK,EAAE,CAAM;IAE1B,WAAW,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,IAAI,EAAE,CAAM;IACnB,WAAW,EAAE,IAAI,EAAE,CAAM;IAEpB,eAAe,EAAE,eAAe,CAAC;IACtC,SAAS,EAAE,YAAY,EAAE,CAAM;IAC/B,eAAe,EAAE,YAAY,EAAE,CAAM;IAErC,cAAc,EAAE,MAAM,CAAQ;IAC9B,mBAAmB,EAAE,MAAM,CAAQ;IACnC,gBAAgB,EAAE,MAAM,CAAQ;IAChC,eAAe,EAAE,MAAM,CAAQ;IAE/B,eAAe,EAAE,MAAM,CAAQ;IAC/B,mBAAmB,EAAE,6BAA6B,CAAQ;IAC1D,WAAW,EAAE,QAAQ,CAAuB;IAE5C,mBAAmB,EAAE,MAAM,CAAQ;IACnC,iBAAiB,EAAE,MAAM,CAAQ;IAEjC,wBAAwB,EAAE,UAAU,CAAC;IACrC,OAAO,EAAE,OAAO,CAAS;IAE9B,IAAI,EAAE,IAAI,CAAC;IAEZ,iBAAiB;IAiBvB,oBAAoB;IAMd,eAAe,CAAC,QAAQ,EAAE,QAAQ;IA+BxC,aAAa,gBAA2C;IAExD,YAAY,eAAyC;IAErD,gBAAgB,uBAAiD;IAEjE,oBAAoB;IA2DpB,YAAY,CAAC,OAAO,EAAE,OAAO;IAO7B,qBAAqB;IAWrB,WAAW;IAaX,YAAY,CAAC,OAAO,EAAE,MAAM;IAI5B,gBAAgB,CAAC,QAAQ,KAAA;IASzB,gBAAgB;IA4BhB,SAAS;IAEH,cAAc,CAAC,WAAW,EAAE,IAAI;IAgBhC,WAAW,CAAC,WAAW,EAAE,IAAI;IAO7B,wBAAwB,CAAC,YAAY,EAAE,GAAG;IAYhD,6BAA6B,CAAC,IAAI,EAAE,MAAM;IAK1C,0BAA0B,CAAC,IAAI,EAAE,IAAI;CAStC"}

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

@@ -1 +1 @@
-{"version":3,"file":"inbox.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation-inbox/inbox.styles.ts"],"names":[],"mappings":"AAyFA,eAAO,MAAM,WAAW,iDA+BvB,CAAC;AAEF,eAAO,MAAM,yBAAyB,iDAkDrC,CAAC;AAEF,eAAO,MAAM,aAAa,iDAYzB,CAAC;AAEF,eAAO,MAAM,SAAS,iDAYrB,CAAC;AAEF,eAAO,MAAM,eAAe,iDA0D3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,iDAwBjC,CAAC"}
+{"version":3,"file":"inbox.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation-inbox/inbox.styles.ts"],"names":[],"mappings":"AA0FA,eAAO,MAAM,WAAW,iDA+BvB,CAAC;AAEF,eAAO,MAAM,yBAAyB,iDAkDrC,CAAC;AAEF,eAAO,MAAM,aAAa,iDAYzB,CAAC;AAEF,eAAO,MAAM,SAAS,iDAYrB,CAAC;AAEF,eAAO,MAAM,eAAe,iDA0D3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,iDAyBjC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"inbox.template.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation-inbox/inbox.template.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAsJ/C;;GAEG;AACH,eAAO,MAAM,uBAAuB,sEAoJnC,CAAC"}
+{"version":3,"file":"inbox.template.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation-inbox/inbox.template.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AA0J/C;;GAEG;AACH,eAAO,MAAM,uBAAuB,sEAoJnC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"inbox.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation-inbox/inbox.utils.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,SAAS,0CAAkE,CAAC;AAEzF,eAAO,MAAM,OAAO,uCAAgE,CAAC;AAErF,eAAO,MAAM,gBAAgB,kCAG5B,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,4JAchD"}
+{"version":3,"file":"inbox.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation-inbox/inbox.utils.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,SAAS,0CAAkE,CAAC;AAEzF,eAAO,MAAM,OAAO,uCAAgE,CAAC;AAErF,eAAO,MAAM,gBAAgB,kCAG5B,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,4JAgBhD"}

package/dist/dts/sandbox.d.ts

@@ -4,6 +4,8 @@ export declare class ReconciliationSandbox extends GenesisElement {
     connect: Connect;
     auth: Auth;
     ready: boolean;
+    rightFlyoutActive: boolean;
     connectedCallback(): Promise<void>;
+    openFlyout(): void;
 }
 //# sourceMappingURL=sandbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sandbox.d.ts","sourceRoot":"","sources":["../../src/sandbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAY,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAsB,cAAc,EAA0B,MAAM,uBAAuB,CAAC;AAEnG,qBA+Ba,qBAAsB,SAAQ,cAAc;IAC9C,OAAO,EAAG,OAAO,CAAC;IACrB,IAAI,EAAG,IAAI,CAAC;IACN,KAAK,UAAS;IAEpB,iBAAiB;CAqBxB"}
+{"version":3,"file":"sandbox.d.ts","sourceRoot":"","sources":["../../src/sandbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAY,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAsB,cAAc,EAA0B,MAAM,uBAAuB,CAAC;AAEnG,qBA6Ca,qBAAsB,SAAQ,cAAc;IAC9C,OAAO,EAAG,OAAO,CAAC;IACrB,IAAI,EAAG,IAAI,CAAC;IACN,KAAK,UAAS;IACd,iBAAiB,UAAS;IAEhC,iBAAiB;IAsBvB,UAAU;CAGX"}

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

@@ -101,10 +101,15 @@ export class FoundationInboxBase extends GenesisElement {
             filterCriteria.withExpression(expressionBuilder('NOTIFY_SEVERITY', this.severitySearchValue, Serialisers.equals));
         }
         if (this.fromDatePickerValue) {
-            filterCriteria.withExpression(expressionBuilder('CREATED_AT', this.formatDateForMatchCriteria(this.fromDatePickerValue), Serialisers.dateIsGreaterEqual));
+            filterCriteria.withExpression(expressionBuilder('CREATED_AT', this.formatDateStrForMatchCriteria(this.fromDatePickerValue), Serialisers.dateIsGreaterEqual));
         }
         if (this.toDatePickerValue) {
-            filterCriteria.withExpression(expressionBuilder('CREATED_AT', this.formatDateForMatchCriteria(this.toDatePickerValue), Serialisers.dateIsLessEqual));
+            filterCriteria.withExpression(expressionBuilder('CREATED_AT', this.formatDateStrForMatchCriteria(this.toDatePickerValue), Serialisers.dateIsLessEqual));
+        }
+        else {
+            // if no toDate is set, then force it to be today
+            const today = new Date();
+            filterCriteria.withExpression(expressionBuilder('CREATED_AT', this.formatDateForMatchCriteria(today), Serialisers.dateIsLessEqual));
         }
         // Refresh the data subscription
         this.inboxService.unsubscribe(this.alertSubscription);
@@ -112,8 +117,10 @@ export class FoundationInboxBase extends GenesisElement {
         this.inboxService.subscribe(this.alertSubscription, this.reverse, filterCriteria.build());
     }
     reverseOrder(reverse) {
-        this.reverse = reverse;
-        this.filterSearchAlertLog();
+        if (this.reverse != reverse) {
+            this.reverse = reverse;
+            this.filterSearchAlertLog();
+        }
     }
     filterSearchSubscribe() {
         if (!this.searchSubscribe) {
@@ -122,6 +129,14 @@ export class FoundationInboxBase extends GenesisElement {
         }
         this.templatesFilter = this.templates.filter((item) => item.NAME.toLowerCase().startsWith(this.searchSubscribe.toLowerCase()));
     }
+    clearSearch() {
+        this.titleSearchValue = '';
+        this.bodySearchValue = '';
+        this.severitySearchValue = undefined;
+        this.fromDatePickerValue = undefined;
+        this.toDatePickerValue = undefined;
+        this.filterSearchAlertLog();
+    }
     // #endregion
     // #region New and History
     dismissAlert(alertId) {
@@ -194,9 +209,17 @@ export class FoundationInboxBase extends GenesisElement {
         });
     }
     // #endregion
+    formatDateStrForMatchCriteria(date) {
+        const dateObj = new Date(date);
+        return this.formatDateForMatchCriteria(dateObj);
+    }
     formatDateForMatchCriteria(date) {
-        const split = date.split('-');
-        return split[0] + split[1] + split[2];
+        const formattedDateString = date.getFullYear() +
+            '' +
+            ('0' + (date.getMonth() + 1)).slice(-2) +
+            '' +
+            ('0' + date.getDate()).slice(-2);
+        return formattedDateString;
     }
 }
 __decorate([

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

@@ -50,8 +50,7 @@ const search = css `
   }
 
   .clear-all {
-    width: 100%;
-    min-width: auto;
+    min-width: 100px;
     margin-right: 10px;
   }
 
@@ -63,10 +62,12 @@ const search = css `
 
   .date-input {
     margin-bottom: 0;
+    max-width: fit-content;
   }
 
   .date-input::part(control) {
-    width: 105px;
+    min-width: 120px;
+    width: 120px;
   }
 
   .sort-button {
@@ -262,6 +263,7 @@ export const FoundationInboxStyles = css `
     display: flex;
     min-height: 0;
     height: 100%;
+    width: 96%;
   }
 
   ${tabs}

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

@@ -11,55 +11,59 @@ const alertsTab = (tab) => html `
     style=${(x) => (x.selectedTab === tab ? '' : 'display: none;')}
   >
     <div class="search">
-      <div style="display:flex; align-items: center;">
-        <label part="label" for="control" class="search-label">
-          <slot>Severity ...</slot>
-        </label>
-        <rapid-select
-          class="select-input"
-          :value=${(x) => x.severitySearchValue}
-          @input=${(x, c) => {
+      <div style="display:flex;align-items:center;justify-content:space-between;">
+        <div style="display: flex; align-items: center;">
+          <label part="label" for="control" class="search-label">
+            <slot>Severity ...</slot>
+          </label>
+          <rapid-select
+            class="select-input"
+            :value=${(x) => x.severitySearchValue}
+            @input=${(x, c) => {
     x.severitySearchValue = c.event.target.value;
     x.filterSearchAlertLog();
 }}
-          autocomplete="off"
-        >
-          <rapid-option value="">--Select--</rapid-option>
-          ${repeat((x) => ALL_SEVERITIES, html `
-              <rapid-option
-                value=${(x) => x.text}
-                style="color: ${(x) => getSeverityColor(x.type)}"
-              >
-                ${(x) => x.text}
-              </rapid-option>
-            `)}
-        </rapid-select>
+            autocomplete="off"
+          >
+            <rapid-option value="">--Select--</rapid-option>
+            ${repeat((x) => ALL_SEVERITIES, html `
+                <rapid-option
+                  value=${(x) => x.text}
+                  style="color: ${(x) => getSeverityColor(x.type)}"
+                >
+                  ${(x) => x.text}
+                </rapid-option>
+              `)}
+          </rapid-select>
+        </div>
 
-        <label part="label" for="control" class="search-label">
-          <slot>From ...</slot>
-        </label>
-        <rapid-text-field
-          class="date-input"
-          type="date"
-          :value=${(x) => x.fromDatePickerValue}
-          @input=${(x, c) => {
+        <div style="display: flex; align-items: center;">
+          <label part="label" for="control" class="search-label">
+            <slot>From ...</slot>
+          </label>
+          <rapid-text-field
+            class="date-input"
+            type="date"
+            :value=${(x) => x.fromDatePickerValue}
+            @input=${(x, c) => {
     x.fromDatePickerValue = c.event.target.value;
     x.filterSearchAlertLog();
 }}
-        ></rapid-text-field>
+          ></rapid-text-field>
 
-        <label part="label" for="control" class="search-label" style="padding-left: 5px">
-          <slot>To ...</slot>
-        </label>
-        <rapid-text-field
-          class="date-input"
-          type="date"
-          :value=${(x) => x.toDatePickerValue}
-          @input=${(x, c) => {
+          <label part="label" for="control" class="search-label" style="padding-left: 5px">
+            <slot>To ...</slot>
+          </label>
+          <rapid-text-field
+            class="date-input"
+            type="date"
+            :value=${(x) => x.toDatePickerValue}
+            @input=${(x, c) => {
     x.toDatePickerValue = c.event.target.value;
     x.filterSearchAlertLog();
 }}
-        ></rapid-text-field>
+          ></rapid-text-field>
+        </div>
       </div>
 
       <rapid-text-field
@@ -84,14 +88,14 @@ const alertsTab = (tab) => html `
         autocomplete="off"
       ></rapid-text-field>
 
-      <div style="display:flex; align-items: center; justify-content: end;">
+      <div style="display:flex; align-items: center; justify-content: flex-end;">
         ${when(() => tab === InboxTab.ALERTS_NEW, html `
             <rapid-button
               class="clear-all"
               appearance="primary"
               @click=${(x) => x.dismissAllAlerts()}
             >
-              Clear All
+              Clear All Alerts
             </rapid-button>
           `)}
         <a

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

@@ -6,17 +6,19 @@ export const getFormattedDate = (dateTimeInMills) => {
     return `${dateTime.toLocaleDateString()} ${dateTime.toLocaleTimeString()}`;
 };
 export function getSeverityColor(severity) {
-    switch (severity.toUpperCase()) {
-        case SEVERITY_INFORMATION:
-            return 'var(--info-color, #11C9FC)';
-        case SEVERITY_CRITICAL:
-            return 'var(--error-color)';
-        case SEVERITY_SERIOUS:
-            return 'var(--serious-notify-color, #F9644D)';
-        case SEVERITY_WARNING:
-            return 'var(--warning-color)';
-        default:
-            console.error('Unexpected severity:', severity);
-            return 'var(--neutral-foreground-rest)';
+    if (severity) {
+        switch (severity.toUpperCase()) {
+            case SEVERITY_INFORMATION:
+                return 'var(--info-color, #11C9FC)';
+            case SEVERITY_CRITICAL:
+                return 'var(--error-color)';
+            case SEVERITY_SERIOUS:
+                return 'var(--serious-notify-color, #F9644D)';
+            case SEVERITY_WARNING:
+                return 'var(--warning-color)';
+            default:
+                console.error('Unexpected severity:', severity);
+                return 'var(--neutral-foreground-rest)';
+        }
     }
 }

package/dist/esm/sandbox.js

@@ -5,6 +5,7 @@ let ReconciliationSandbox = class ReconciliationSandbox extends GenesisElement {
     constructor() {
         super(...arguments);
         this.ready = false;
+        this.rightFlyoutActive = false;
     }
     connectedCallback() {
         const _super = Object.create(null, {
@@ -28,6 +29,9 @@ let ReconciliationSandbox = class ReconciliationSandbox extends GenesisElement {
             });
         });
     }
+    openFlyout() {
+        this.rightFlyoutActive = true;
+    }
 };
 __decorate([
     Connect
@@ -38,12 +42,29 @@ __decorate([
 __decorate([
     observable
 ], ReconciliationSandbox.prototype, "ready", void 0);
+__decorate([
+    observable
+], ReconciliationSandbox.prototype, "rightFlyoutActive", void 0);
 ReconciliationSandbox = __decorate([
     customElement({
         name: 'notify-sandbox',
         template: html `
     ${when((x) => x.ready, html `
         <rapid-design-system-provider>
+          <div
+            style="width:100%; display:flex; justify-content:flex-end; margin-top:10px; margin-bottom:10px;"
+          >
+            <rapid-button @click=${(x) => x.openFlyout()}>
+              Open right positioned flyout
+            </rapid-button>
+            <rapid-flyout
+              :closed="${(x) => !x.rightFlyoutActive}"
+              @closed=${(x) => (x.rightFlyoutActive = false)}
+            >
+              <div slot="title">Alerts Center</div>
+              <foundation-inbox></foundation-inbox>
+            </rapid-flyout>
+          </div>
           <rapid-tabs>
             <rapid-tab slot="dashboard">Dashboard</rapid-tab>
             <rapid-tab slot="inbox">Inbox</rapid-tab>
@@ -62,8 +83,8 @@ ReconciliationSandbox = __decorate([
       `)}
   `,
         styles: css `
-    foundation-inbox {
-      position: absolute;
+    rapid-flyout::part(flyout) {
+      min-width: 800px;
     }
   `,
     })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/pbc-notify-ui",
   "description": "Genesis PBC Notify UI",
-  "version": "1.0.48",
+  "version": "1.0.49",
   "license": "SEE LICENSE IN license.txt",
   "workspaces": [
     "client"