@genesislcap/pbc-notify-ui 1.0.0

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

@@ -0,0 +1,52 @@
+import { __awaiter } from "tslib";
+import { FoundationInbox } from '../inbox';
+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";
+    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* () {
+        let type = ResourceType.REMOTE;
+        try {
+            // @ts-ignore
+            return yield import('foundationZero/ZeroDesignSystem');
+        }
+        catch (e) {
+            type = ResourceType.LOCAL;
+            return yield loadZeroFallback();
+        }
+        finally {
+            logger.debug(`Using '${type}' version of foundationZero/ZeroDesignSystem`);
+        }
+    });
+}
+export function loadRemotes() {
+    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.
+ */
+FoundationInboxCounter;
+FoundationInboxToast;
+FoundationInbox;

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

@@ -0,0 +1,41 @@
+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);
+        this.value = 0;
+    }
+    connectedCallback() {
+        const _super = Object.create(null, {
+            connectedCallback: { get: () => super.connectedCallback }
+        });
+        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',
+        template: FoundationInboxCounterTemplate,
+        styles: FoundationInboxCounterStyles,
+    })
+], FoundationInboxCounter);
+export { FoundationInboxCounter };

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

@@ -0,0 +1,21 @@
+import { css } from '@microsoft/fast-element';
+const BACKGROUND_COLOR = '#EF5547';
+export const FoundationInboxCounterStyles = css `
+  div {
+    display: inline-block;
+    min-width: 16px;
+    height: 16px;
+    border-radius: 9px;
+    text-align: center;
+    color: #fff;
+    line-height: 16px;
+    font-size: 9px;
+    font-weight: 700;
+    background: ${BACKGROUND_COLOR};
+    pointer-events: none;
+  }
+
+  .hidden {
+    visibility: hidden;
+  }
+`;

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

@@ -0,0 +1,7 @@
+import { html } from '@microsoft/fast-element';
+const MAX_NUMBER_TO_DISPLAY = 99;
+export const FoundationInboxCounterTemplate = html `
+  <div class="${x => x.value < 1 && 'hidden'}">
+    ${(x) => (x.value > MAX_NUMBER_TO_DISPLAY ? `${MAX_NUMBER_TO_DISPLAY}+` : x.value)}
+  </div>
+`;

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

@@ -0,0 +1,42 @@
+import { __awaiter, __decorate } from "tslib";
+import { Connect } from '@genesislcap/foundation-comms';
+import { Toast, zeroToastTemplate } from '@genesislcap/foundation-zero';
+import { customElement } from '@microsoft/fast-element';
+import { FoundationInboxToastStyles } from './foundation-inbox-toast.styles';
+let FoundationInboxToast = class FoundationInboxToast extends Toast {
+    connectedCallback() {
+        const _super = Object.create(null, {
+            connectedCallback: { get: () => super.connectedCallback }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            _super.connectedCallback.call(this);
+            this.addEventListener('remove-toast', this.close);
+        });
+    }
+    close() {
+        super.close();
+        this.removeMessage(this.id);
+    }
+    removeMessage(ALERT_ID) {
+        this.connect.commitEvent('EVENT_DISMISS_NOTIFY_ALERT', {
+            DETAILS: {
+                ALERT_ID,
+            },
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('remove-toast', this.close);
+    }
+};
+__decorate([
+    Connect
+], FoundationInboxToast.prototype, "connect", void 0);
+FoundationInboxToast = __decorate([
+    customElement({
+        name: 'foundation-inbox-toast',
+        template: zeroToastTemplate,
+        styles: FoundationInboxToastStyles,
+    })
+], FoundationInboxToast);
+export { FoundationInboxToast };

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

@@ -0,0 +1,25 @@
+import { zeroToastStyles } from '@genesislcap/foundation-zero';
+import { css } from '@microsoft/fast-element';
+export const FoundationInboxToastStyles = css `
+  ${zeroToastStyles}
+
+  .toast {
+    --toast-min-width: none;
+    --toast-max-width: none;
+
+    width: calc(100% - (2 * var(--design-unit) * 5px));
+    background: transparent;
+    box-shadow: none;
+    margin: 0;
+    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 5px);
+    border: none;
+  }
+
+  .toast .close-icon {
+    display: none;
+  }
+
+  .toast .bottom {
+    width: 100%;
+  }
+`;

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

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

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

@@ -0,0 +1,27 @@
+const MESSAGE_TYPE_INFORMATION = 'Information';
+const MESSAGE_TYPE_WARNING = 'Warning';
+const MESSAGE_TYPE_SERIOUS = 'Serious';
+const MESSAGE_TYPE_CRITICAL = 'Critical';
+export const ALL_MESSAGE_TYPES = [
+    MESSAGE_TYPE_INFORMATION,
+    MESSAGE_TYPE_WARNING,
+    MESSAGE_TYPE_SERIOUS,
+    MESSAGE_TYPE_CRITICAL,
+];
+export const SEVERITY_TYPE_DEFAULT = 'default';
+const SEVERITY_TYPE_WARNING = 'warning';
+const SEVERITY_TYPE_SERIOUS = 'serious';
+const SEVERITY_TYPE_CRITICAL = 'critical';
+export const ALL_SEVERITIES_TYPES = [
+    SEVERITY_TYPE_DEFAULT,
+    SEVERITY_TYPE_WARNING,
+    SEVERITY_TYPE_SERIOUS,
+    SEVERITY_TYPE_CRITICAL,
+];
+export const MAP_MESSAGE_TYPE_TO_SEVERITY_TYPE = new Map([
+    [MESSAGE_TYPE_INFORMATION, SEVERITY_TYPE_DEFAULT],
+    [MESSAGE_TYPE_WARNING, SEVERITY_TYPE_WARNING],
+    [MESSAGE_TYPE_SERIOUS, SEVERITY_TYPE_SERIOUS],
+    [MESSAGE_TYPE_CRITICAL, SEVERITY_TYPE_CRITICAL],
+]);
+export const DEBOUNCED_SEARCH_TIME = 500;

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

@@ -0,0 +1,251 @@
+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 { 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 { AlertService } from '../../services/alert.service';
+/**
+ * Foundation inbox component for displaying notifies list.
+ * Allow searching, filtering and deleting notifies
+ * @beta
+ */
+let FoundationInbox = class FoundationInbox extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.alerts = [];
+        this.alertsFilter = [];
+        this.rules = [];
+        this.rulesFilter = [];
+        this.templates = [];
+        this.templatesFilter = [];
+        this.ready = false;
+        this.searchAlertLog = '';
+        this.searchSubscribe = '';
+        this.parameterDetails = {};
+        this.ruleTemplateSelected = null;
+        this.subscribeToAlertComponent = '';
+        this.alertsChanged = () => this.alertsFilter = this.alerts;
+        this.rulesChanged = () => this.rulesFilter = this.rules;
+        this.templatesChanged = () => this.templatesFilter = this.templates;
+    }
+    connectedCallback() {
+        const _super = Object.create(null, {
+            connectedCallback: { get: () => super.connectedCallback }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            _super.connectedCallback.call(this);
+            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() {
+        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()));
+        });
+    }
+    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;
+    }
+    checkActiveTab(inboxTab) {
+        return this.tabs.activeid === inboxTab.toString()
+            ? ''
+            : 'display: none;';
+    }
+    inboxTabChanged(inboxTab) {
+        return __awaiter(this, void 0, void 0, function* () {
+            logger.log('inboxTab Changed:', InboxTab[inboxTab.toString()]);
+            this.ruleTemplateSelected = null;
+            this.subscribeToAlertComponent = '';
+            switch (inboxTab) {
+                case InboxTab.AlertLog:
+                    // TODO:
+                    break;
+                case InboxTab.MyAlerts:
+                    this.rules = yield this.ruleService.getRules();
+                    break;
+                case InboxTab.Subscribe:
+                    this.templates = yield this.ruleTemplateService.getRuleTemplates();
+                    break;
+                default:
+                    logger.error('Unexpected inboxTab:', inboxTab);
+                    break;
+            }
+        });
+    }
+    // TODO:
+    editAlert() {
+    }
+    playPauseAlert(ruleClicked) {
+        return __awaiter(this, void 0, void 0, function* () {
+            switch (ruleClicked.RULE_STATUS) {
+                case RuleStatus.ENABLED:
+                    yield this.ruleService.disableRule(ruleClicked.ID);
+                    break;
+                case RuleStatus.DISABLED:
+                    yield this.ruleService.enableRule(ruleClicked.ID);
+                    break;
+                default:
+                    logger.error('Unexpected ruleStatus:', ruleClicked.RULE_STATUS);
+                    break;
+            }
+            this.rules = yield this.ruleService.getRules();
+        });
+    }
+    deleteAlert(ruleClicked) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.ruleService.unsubscribeRule(ruleClicked.ID);
+            this.rules = yield this.ruleService.getRules();
+        });
+    }
+    parameterEdit(parameter, valueTyped) {
+        this.parameterDetails[parameter.PARAM_NAME] = valueTyped;
+    }
+    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;
+        });
+    }
+    deleteNotifyAlert(alertId) {
+        this.alertService.dismissNotifyAlert(alertId);
+    }
+    /**
+     * Load remote components
+     * @remarks With regards to module federation
+     * @internal
+     */
+    loadRemotes() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const remoteComponents = yield Components.loadRemotes();
+            this.ready = true;
+        });
+    }
+};
+__decorate([
+    Connect
+], FoundationInbox.prototype, "connect", 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, "rules", void 0);
+__decorate([
+    observable
+], FoundationInbox.prototype, "rulesFilter", void 0);
+__decorate([
+    observable
+], FoundationInbox.prototype, "templates", void 0);
+__decorate([
+    observable
+], FoundationInbox.prototype, "templatesFilter", void 0);
+__decorate([
+    observable
+], FoundationInbox.prototype, "ready", void 0);
+__decorate([
+    observable
+], FoundationInbox.prototype, "searchAlertLog", void 0);
+__decorate([
+    observable
+], FoundationInbox.prototype, "searchSubscribe", void 0);
+__decorate([
+    observable
+], FoundationInbox.prototype, "flyout", void 0);
+__decorate([
+    observable
+], FoundationInbox.prototype, "ruleTemplateSelected", void 0);
+__decorate([
+    observable
+], FoundationInbox.prototype, "subscribeToAlertComponent", void 0);
+FoundationInbox = __decorate([
+    customElement({
+        name: 'foundation-inbox',
+        template,
+        styles,
+    })
+], FoundationInbox);
+export { FoundationInbox };