@genesislcap/pbc-notify-ui 1.0.0

package/dist/esm/components/foundation-alerts/components/foundation-alerts-form/foundation-alerts-form.styles.js

@@ -0,0 +1,194 @@
+import { css } from '@microsoft/fast-element';
+export const FoundationAlertsFormStyles = css `
+  :host {
+    font-size: 16px;
+    --design-unit-for-select: var(--design-unit);
+    --base-height-multiplier-for-select: var(--base-height-multiplier);
+  }
+
+  .select-fields,
+  foundation-alerts-condition-builder::part(select-fields) {
+    --design-unit: var(--design-unit-for-select);
+    --base-height-multiplier: var(--base-height-multiplier-for-select);
+  }
+
+  zero-tabs::part(tablist) {
+    grid-template-columns: none;
+  }
+
+  /*
+  .tabs {
+    background: none;
+    padding-bottom: calc(var(--design-unit) * 6px);
+  }
+
+  .tabs::part(tablist) {
+    display: flex;
+    background: none;
+    height: auto;
+    padding: calc(var(--design-unit) * 5px) 0 calc(var(--design-unit) * 2px) 0;
+    border-bottom: solid calc(var(--stroke-width) * 1px) var(--neutral-stroke-rest);
+  }
+
+  .tabs .tab {
+    flex: 1;
+    border-radius: 0;
+    border: none;
+    background: transparent;
+    margin: 0;
+    text-align: center;
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--neutral-foreground-rest);
+    box-shadow: none;
+    text-transform: uppercase;
+  }
+
+  .tabs .tab[aria-selected='true'] {
+    color: var(--neutral-color);
+  }
+  */
+
+  h2,
+  fieldset {
+    width: calc(100% - (var(--design-unit) * 5px * 2));
+    margin: 0;
+    padding-left: calc(var(--design-unit) * 5px);
+    padding-right: calc(var(--design-unit) * 5px);
+  }
+
+  h2 {
+    padding-top: calc(var(--design-unit) * 2px);
+    padding-bottom: calc(var(--design-unit) * 2px);
+  }
+
+  fieldset {
+    margin: 0;
+    border: none;
+    padding-top: 0;
+    padding-bottom: 0;
+    font-size: 0;
+    line-height: 0;
+  }
+
+  .text-field::part(root),
+  .segmented-control::part(root) {
+    height: calc(var(--design-unit) * var(--base-height-multiplier) * 1px);
+  }
+
+  .select-fields::part(control) {
+    height: calc(
+      var(--design-unit) * var(--base-height-multiplier) * 1px - calc(var(--stroke-width) * 1px)
+    );
+  }
+
+  .text-field,
+  .segmented-control,
+  .select-fields,
+  .text-area {
+    width: 100%;
+  }
+
+  .text-field::part(root),
+  .select-fields::part(control),
+  .text-area::part(control),
+  .notify-preview .toast {
+    color: var(--neutral-color);
+    box-sizing: border-box;
+    border: solid calc(var(--stroke-width) * 1px) var(--neutral-stroke-rest);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+  }
+
+  h2,
+  legend {
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 1;
+  }
+
+  legend {
+    width: 100%;
+    padding: calc(var(--design-unit) * 4px) 0 calc(var(--design-unit) * 1px) 0;
+    margin: 0;
+    color: var(--neutral-foreground-rest);
+  }
+
+  .segmented-control {
+    margin: 0;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: stretch;
+    line-height: calc(var(--design-unit) * 6px);
+  }
+
+  .segmented-control-item {
+    flex: 1;
+    justify-content: center;
+    border-color: var(--neutral-foreground-rest);
+    color: var(--neutral-foreground-rest);
+  }
+
+  .segmented-control-item[aria-checked='true'] {
+    background: var(--neutral-foreground-rest);
+    color: var(--neutral-layer-2);
+    box-shadow: none;
+    font-weight: 500;
+  }
+
+  .expiration-field {
+    --base-height-multiplier: 12.5;
+  }
+
+  .expiration-field::part(root) {
+    align-items: flex-end;
+  }
+
+  .text-area {
+    line-height: 0;
+  }
+
+  .notify-preview {
+    color: var(--neutral-color);
+    box-sizing: border-box;
+    line-height: 1;
+    font-size: 14px;
+
+    --toast-max-width: calc(100% - 33px);
+    --toast-min-width: calc(100% - 33px);
+  }
+
+  .notify-preview::part(content) {
+    padding: calc(var(--design-unit) * 5px) 0;
+  }
+
+  .notify-preview::part(date) {
+    margin: calc(var(--design-unit) * 3px) 0 0 0;
+  }
+
+  .notify-preview::part(toast) {
+    transition: none;
+    box-shadow: none;
+  }
+
+  .fieldset-bottom .button {
+    width: 100%;
+    color: var(--neutral-color);
+    height: 40px;
+    margin: 16px 0;
+  }
+  
+  zero-tabs {
+    
+  }
+
+  zero-tabs::part(tabpanel) {
+    
+  }
+  
+  zero-tab-panel {
+    
+  }
+
+  .general-panel {
+  }
+`;

package/dist/esm/components/foundation-alerts/components/foundation-alerts-form/foundation-alerts-form.template.js

@@ -0,0 +1,96 @@
+import { sync } from '@genesislcap/foundation-utils';
+import { html, repeat, when, ref } from '@microsoft/fast-element';
+import { getDateStringFormat } from '../../utils';
+export const FoundationAlertsFormTemplate = (prefix = 'zero') => html `
+    <${prefix}-tabs appearance="secondary">
+      <${prefix}-tab slot="tab" appearance="secondary">General</${prefix}-tab>
+      <${prefix}-tab slot="tab" appearance="secondary">Alert Type</${prefix}-tab>
+      <!-- GENERAL -->
+      <${prefix}-tab-panel slot="tabpanel" class="general-panel">
+        <fieldset class="fieldset-condition">
+          <foundation-alerts-condition-builder
+            :prefix=${prefix}
+            @change-state=${(x, c) => x.setCondition(c.event.detail)}
+          >
+          </foundation-alerts-condition-builder>
+        </fieldset>
+        ${when(x => x.displayFrequency, html `
+            <fieldset>
+              <legend>Frequency</legend>
+              <${prefix}-segmented-control class="segmented-control" :value=${x => x.frequencyOptions[0]} name="frequency">
+                ${repeat(x => x.frequencyOptions, html `
+                    <${prefix}-segmented-item
+                      class="segmented-control-item"
+                      @click=${(option, c) => (c.parent.frequencyOption = option)}
+                      value=${(option) => option}
+                    >
+                      ${(option) => option}
+                    </${prefix}-segmented-item>
+                  `)}
+              </${prefix}-segmented-control>
+            </fieldset>
+          `)}
+        <fieldset>
+          <legend>Expiration</legend>
+          <${prefix}-text-field
+            type="datetime-local"
+            class="text-field expiration-field"
+            value=${sync(x => getDateStringFormat(x.expirationDate))}
+          >
+          </${prefix}-text-field>
+        </fieldset>
+        <fieldset>
+          <legend>Alert Name</legend>
+          <${prefix}-text-field class="text-field" :value=${sync(x => x.alertName)}>
+          </${prefix}-text-field>
+        </fieldset>
+        <fieldset>
+          <legend>Alert Description</legend>
+          <${prefix}-text-area
+            class="text-area"
+            :value=${sync(x => x.alertDescription)}
+          >
+          </${prefix}-text-area>
+        </fieldset>
+        <fieldset>
+          <legend>Preview</legend>
+          <${prefix}-toast
+            ${ref('toastPreview')}
+            class='notify-preview'
+            notify=${x => x.alertType}
+          >
+            <div slot="top">${x => x.alertName}</div>
+            <span slot="content">${x => x.alertDescription}</span>
+            <span slot="date">${x => x.expirationDate.toLocaleDateString()}</span>
+          </${prefix}-toast>
+        </fieldset>
+        <fieldset class="fieldset-bottom">
+          <${prefix}-button
+            class="button"
+            appearance="primary-gradient"
+            type="submit"
+            @click=${x => x.handleSubmit()}
+          >
+            ${x => x.submitButtonText}
+          </${prefix}-button>
+        </fieldset>
+      </${prefix}-tab-panel>
+      
+      <!-- ALERT TYPE -->
+      <${prefix}-tab-panel slot="tabpanel">
+        <fieldset>
+          <legend>Alert Type</legend>
+          <${prefix}-select class="select-fields select-value-conditon" part="select-fields" :value=${sync(x => x.alertType)}>
+            ${repeat(x => Array.from(x.mapAlertTypeToSeverityType.keys()), html `
+                <${prefix}-option value="${(x, c) => c.parent.mapAlertTypeToSeverityType.get(x)}">
+                  ${x => x}
+                </${prefix}-option>
+              `)}
+          </${prefix}-select>
+        </fieldset>
+      </${prefix}-tab-panel>
+    </${prefix}-tabs>
+`;
+export const FoundationAlertsFormRenderer = html `
+  ${x => FoundationAlertsFormTemplate(x.prefix)}
+`;

package/dist/esm/components/foundation-alerts/components/foundation-alerts-navigation-button/foundation-alerts-navigation-button.js

@@ -0,0 +1,33 @@
+import { __decorate } from "tslib";
+import { customElement, FASTElement, attr } from '@microsoft/fast-element';
+import { FoundationAlertsNavigationButtonStyles as styles } from './foundation-alerts-navigation-button.styles';
+import { FoundationAlertsConditionBuilderRenderer as template } from './foundation-alerts-navigation-button.template';
+let FoundationAlertsNavigationButton = class FoundationAlertsNavigationButton extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.prefix = 'zero';
+    }
+    handleChangeStateAction() {
+        if (this.current !== 'list') {
+            this.current = 'list';
+            this.$emit('change-state', this.current);
+        }
+        else {
+            this.$emit('close');
+        }
+    }
+};
+__decorate([
+    attr
+], FoundationAlertsNavigationButton.prototype, "current", void 0);
+__decorate([
+    attr
+], FoundationAlertsNavigationButton.prototype, "prefix", void 0);
+FoundationAlertsNavigationButton = __decorate([
+    customElement({
+        name: 'foundation-alerts-navigation-button',
+        template,
+        styles,
+    })
+], FoundationAlertsNavigationButton);
+export { FoundationAlertsNavigationButton };

package/dist/esm/components/foundation-alerts/components/foundation-alerts-navigation-button/foundation-alerts-navigation-button.styles.js

@@ -0,0 +1,27 @@
+import { css } from '@microsoft/fast-element';
+export const FoundationAlertsNavigationButtonStyles = css `
+  .button {
+    padding: calc(var(--design-unit) * 2px);
+    margin: 0;
+    background: none;
+    font-size: var(--type-ramp-base-font-size);
+    line-height: var(--type-ramp-base-line-height);
+  }
+
+  .button::part(icon) {
+    color: var(--neutral-color);
+  }
+
+  .button:hover {
+    background-color: var(--neutral-fill-hover);
+  }
+
+  .button:hover::part(icon) {
+    color: var(--neutral-foreground-rest);
+  }
+
+  .button::part(control) {
+    cursor: pointer;
+    padding: 0;
+  }
+`;

package/dist/esm/components/foundation-alerts/components/foundation-alerts-navigation-button/foundation-alerts-navigation-button.template.js

@@ -0,0 +1,14 @@
+import { html, when } from '@microsoft/fast-element';
+export const FoundationAlertsNavigationButtonTemplate = (prefix = 'zero') => html `
+  <${prefix}-button class="button" @click=${(x) => x.handleChangeStateAction()}>
+    ${when((x) => x.current === 'list', html `
+        <${prefix}-icon name="xmark" part="icon" size="lg"></${prefix}-icon>
+      `)}
+    ${when((x) => x.current !== 'list', html `
+        <${prefix}-icon name="arrow-left" part="icon" size="lg"></${prefix}-icon>
+      `)}
+  </${prefix}-button
+`;
+export const FoundationAlertsConditionBuilderRenderer = html `
+  ${(x) => FoundationAlertsNavigationButtonTemplate(x.prefix)}
+`;

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

@@ -0,0 +1,52 @@
+import { __awaiter } from "tslib";
+import { logger } from '../utils';
+import { FoundationAlertsConditionBuilder } from './foundation-alerts-condition-builder/foundation-alerts-condition-builder';
+import { FoundationAlertsForm } from './foundation-alerts-form/foundation-alerts-form';
+import { FoundationAlertsNavigationButton } from './foundation-alerts-navigation-button/foundation-alerts-navigation-button';
+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.
+ */
+FoundationAlertsForm;
+FoundationAlertsNavigationButton;
+FoundationAlertsConditionBuilder;

package/dist/esm/components/foundation-alerts/index.federated.js

@@ -0,0 +1 @@
+import('./index');

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

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

package/dist/esm/components/foundation-alerts/styles/index.js

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

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

@@ -0,0 +1,198 @@
+import { RapidColorHEX, NeutralRapidColorHEX } from '@genesislcap/foundation-zero';
+import { css } from '@microsoft/fast-element';
+const DEFAULT_DESIGN_UNIT = '4';
+const DEFAULT_STROKE_WIDTH = '1';
+const DEFAULT_BASE_HEIGHT_MULTIPLIER = '10';
+const DEFAULT_CONTROL_CORNER_RADIUS = '4';
+const DEFAULT_NEUTRAL_COLOR = RapidColorHEX.white;
+const DEFAULT_NEUTRAL_FOREGROUND_REST = NeutralRapidColorHEX.grey;
+/**
+ * @public
+ */
+export const FoundationAlertsStyles = css `
+  :host {
+    /*
+    --design-unit: ${DEFAULT_DESIGN_UNIT};
+    --base-height-multiplier: ${DEFAULT_BASE_HEIGHT_MULTIPLIER};
+    --stroke-width: ${DEFAULT_STROKE_WIDTH};
+    --control-corner-radius: ${DEFAULT_CONTROL_CORNER_RADIUS};
+    */
+    --neutral-color: ${DEFAULT_NEUTRAL_COLOR};
+    --neutral-foreground-rest: ${DEFAULT_NEUTRAL_FOREGROUND_REST};
+    --neutral-stroke-rest: ${DEFAULT_NEUTRAL_FOREGROUND_REST};
+  }
+
+  .wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    --available-text-color: ${RapidColorHEX.green};
+    --unavailable-text-color: ${RapidColorHEX.red};
+  }
+
+  header {
+    font-size: 0;
+    justify-content: right;
+    display: flex;
+    padding:
+      calc(var(--design-unit) * 3px)
+      calc(var(--design-unit) * 1px)
+      0
+      calc(var(--design-unit) * 1px);
+  }
+  
+  .wrapper-content {
+    width: 100%;
+    overflow: hidden;
+    flex-grow: 1;
+  }
+
+  .wrapper-content-scroll {
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  foundation-alerts-rule-navigation-button {
+    position: right;
+  }
+
+  .list-header {
+    width: calc(100% - (var(--design-unit) * 5px - var(--design-unit) * 3px));
+    display: flex;
+    align-items: center;
+    padding:
+      calc(var(--design-unit) * 2px)
+      calc(var(--design-unit) * 3px)
+      calc(var(--design-unit) * 2px)
+      calc(var(--design-unit) * 5px);
+  }
+
+  .list-header .main-button {
+    margin: 0;
+    min-width: 25px;
+    min-height: 25px;
+    color: var(--neutral-fill-strong-rest);
+  }
+
+  .list-header .main-button::part(actions-container) {
+    position: relative;
+  }
+
+  .list-header .main-button::part(actions-container),
+  .list-header .main-button::part(actions-opener) {
+    height: 100%;
+  }
+
+  .list-header .main-button::part(actions-opener) {
+    color: var(--neutral-fill-strong-rest);
+    margin: 0;
+  }
+
+  .list-header .main-button::part(control) {
+    height: 100%;
+  }
+
+  .list-header .main-button::part(actions-menu) {
+    top: calc(100% + var(--design-unit) * 1px);
+    right: 0;
+  }
+
+  .title {
+    padding: 0;
+    margin: 0;
+    font-size: calc(var(--design-unit) * 6px);
+    font-weight: 500;
+    color: var(--neutral-color);
+  }
+
+  .main-menu {
+    display: flex;
+    margin-left: auto;
+    gap: calc(var(--design-unit) * 2px);
+  }
+
+  .list,
+  .item-title,
+  .item-bottom {
+    width: 100%;
+  }
+
+  .list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .item {
+    width: calc(100% - (var(--design-unit) * 3px) - (var(--design-unit) * 5px));
+    padding:
+      calc(var(--design-unit) * 4px)
+      calc(var(--design-unit) * 3px)
+      calc(var(--design-unit) * 4px)
+      calc(var(--design-unit) * 5px);
+    border-top: calc(var(--stroke-width) * 1px) solid var(--neutral-fill-hover);
+    color: var(--neutral-color);
+  }
+  
+  .item:hover {
+    background-color: var(--neutral-fill-hover);
+  }
+
+  .item-title {
+    padding: 0;
+    font-size: calc(var(--design-unit) * 5px);
+    font-weight: 700;
+  }
+
+  .item-bottom {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: flex-start;
+    gap: calc(var(--design-unit) * 5px);
+    font-size: calc(var(--design-unit) * 5px);
+  }
+
+  .item-menu {
+    display: flex;
+    margin-left: auto;
+    gap: calc(var(--design-unit) * 5px);
+  }
+
+  .item-menu .button {
+    color: var(--neutral-stroke-active);
+  }
+
+  .item-menu .button:hover {
+    color: var(--neutral-stroke-focus);
+  }
+
+  .item-bottom .button {
+    background: none;
+    margin: 0;
+    min-width: auto;
+  }
+
+  .list-header .button::part(control),
+  .item-bottom .button::part(control) {
+    padding: 0;
+  }
+
+  .status.active {
+    color: var(--available-text-color);
+  }
+
+  .status.inactive {
+    color: var(--unavailable-text-color);
+  }
+
+  .empty {
+    font-size: 12px;
+    padding:
+      calc(var(--design-unit) * 4px)
+      calc(var(--design-unit) * 3px)
+      calc(var(--design-unit) * 4px)
+      calc(var(--design-unit) * 5px);
+    margin: 0;
+  }
+`;

package/dist/esm/components/foundation-alerts/utils/getConditionObject.js

@@ -0,0 +1,24 @@
+import { logger } from './logger';
+// @tood fix after db will be ready
+export function getConditionObject(alertRuleRow) {
+    let conditionMainType;
+    let conditionValueCondition;
+    let conditionValueType;
+    let conditionValue;
+    try {
+        const conditionData = JSON.parse(alertRuleRow['RULE_EXPRESSION']);
+        conditionMainType = conditionData.mainType;
+        conditionValueCondition = conditionData.valueCondition;
+        conditionValueType = conditionData.valueType;
+        conditionValue = conditionData.value;
+    }
+    catch (_a) {
+        logger.debug('conditionData is not valid JSON');
+    }
+    return {
+        conditionMainType,
+        conditionValueCondition,
+        conditionValueType,
+        conditionValue,
+    };
+}

package/dist/esm/components/foundation-alerts/utils/getDateMilliseconds.js

@@ -0,0 +1,5 @@
+export function getDateMilliseconds(dateString) {
+    const [day, month, year] = dateString.split('.').map(Number);
+    const date = new Date(year, month - 1, day);
+    return date.getTime();
+}

package/dist/esm/components/foundation-alerts/utils/getDateStringFormat.js

@@ -0,0 +1,12 @@
+function to2Digits(num) {
+    return num.toString().padStart(2, '0');
+}
+export function getDateStringFormat(date) {
+    const dateObj = new Date(date);
+    const day = to2Digits(dateObj.getDate());
+    const month = to2Digits(dateObj.getMonth() + 1);
+    const year = dateObj.getFullYear();
+    const hours = to2Digits(dateObj.getHours());
+    const minutes = to2Digits(dateObj.getMinutes());
+    return `${[year, month, day].join('-')}T${[hours, minutes].join(':')}`;
+}

package/dist/esm/components/foundation-alerts/utils/index.js

@@ -0,0 +1,4 @@
+export * from './logger';
+export * from './getDateMilliseconds';
+export * from './getConditionObject';
+export * from './getDateStringFormat';

package/dist/esm/components/foundation-alerts/utils/logger.js

@@ -0,0 +1,2 @@
+import { createLogger } from '@genesislcap/foundation-logger';
+export const logger = createLogger('foundation-alerts');