@genesislcap/pbc-notify-ui 1.0.22 → 1.0.24

package/dist/esm/components/foundation-notification-dashboard/components/templates/template-dialog/condition-builder/condition-builder.template.js

@@ -1,63 +1,41 @@
 import { sync } from '@genesislcap/foundation-utils';
-import { html, repeat, when } from "@microsoft/fast-element";
+import { html, repeat, when } from '@microsoft/fast-element';
 import { ALL_LOGICAL_OPERATORS } from '../../../../types/logical-operator';
-import { ALL_RIGHT_CRITERIAS, RIGHT_CRITERIA_USER_ENTRY, RIGHT_CRITERIA_VALUE } from '../../../../types/right-criteria';
+import { ALL_RIGHT_CRITERIAS, RIGHT_CRITERIA_USER_ENTRY, RIGHT_CRITERIA_VALUE, } from '../../../../types/right-criteria';
 export const ConditionBuilderTemplate = html `
   <div class="condition-builder">
-    <zero-select
-      :value=${sync(x => x.leftValue)}
-      class="left-value"
-      position="below"
-    >
-      ${repeat(x => x.leftValueItems, html `
-          <zero-option value=${x => JSON.stringify(x)}>${x => x.FIELD_NAME}</zero-option>
+    <zero-select :value=${sync((x) => x.leftValue)} class="left-value">
+      ${repeat((x) => x.leftValueItems, html `
+          <zero-option value=${(x) => JSON.stringify(x)}>${(x) => x.FIELD_NAME}</zero-option>
         `)}
     </zero-select>
 
-    <zero-select
-      class="logical-operator"
-      :value=${sync(x => x.logicalOperator)}
-      position="below"
-    >
-      ${repeat(x => ALL_LOGICAL_OPERATORS, html `
-          <zero-option value=${x => x}>${x => x}</zero-option>
+    <zero-select class="logical-operator" :value=${sync((x) => x.logicalOperator)}>
+      ${repeat((x) => ALL_LOGICAL_OPERATORS, html `
+          <zero-option value=${(x) => x}>${(x) => x}</zero-option>
         `)}
     </zero-select>
-    
-    <zero-select
-      class="right-criteria"
-      :value=${sync(x => x.rightCriteria)}
-      position="below"
-    >
-      ${repeat(x => ALL_RIGHT_CRITERIAS, html `
-          <zero-option value=${x => x}>${x => x}</zero-option>
+
+    <zero-select class="right-criteria" :value=${sync((x) => x.rightCriteria)}>
+      ${repeat((x) => ALL_RIGHT_CRITERIAS, html `
+          <zero-option value=${(x) => x}>${(x) => x}</zero-option>
         `)}
     </zero-select>
 
-    ${when(x => x.rightCriteria === RIGHT_CRITERIA_VALUE, html `
-      <zero-text-field
-        class="right-criteria-value"
-        :value=${sync(x => x.rightValueText)}
-        placeholder="Value"
-      >
-      </zero-text-field>
-    `)}
-    
-    ${when(x => x.rightCriteria === RIGHT_CRITERIA_USER_ENTRY, html `
-      <zero-select
-        class="right-criteria-user-entry"
-        :value=${sync(x => x.rightValueUserEntry)}
-        position="below"
-      >
-        ${x => x.rightValueItemsProperty}
-      </zero-select>
-    `)}
+    ${when((x) => x.rightCriteria === RIGHT_CRITERIA_VALUE, html `
+        <zero-text-field
+          class="right-criteria-value"
+          :value=${sync((x) => x.rightValueText)}
+          placeholder="Value"
+        ></zero-text-field>
+      `)}
+    ${when((x) => x.rightCriteria === RIGHT_CRITERIA_USER_ENTRY, html `
+        <zero-select class="right-criteria-user-entry" :value=${sync((x) => x.rightValueUserEntry)}>
+          ${(x) => x.rightValueItemsProperty}
+        </zero-select>
+      `)}
 
-    <zero-button
-      appearance="icon"
-      class="delete"
-      @click=${x => x.deleteCondition()}
-    >
+    <zero-button appearance="icon" class="delete" @click=${(x) => x.deleteCondition()}>
       <zero-icon name="trash" part="icon"></zero-icon>
     </zero-button>
   </div>

package/dist/esm/components/foundation-notification-dashboard/components/templates/template-dialog/parameter-builder/parameter-builder.js

@@ -1,17 +1,13 @@
 import { __awaiter, __decorate } from "tslib";
-import { FASTElement, attr, customElement, observable } from "@microsoft/fast-element";
-import { ParameterBuilderTemplate as template } from './parameter-builder.template';
+import { FASTElement, attr, customElement, observable } from '@microsoft/fast-element';
+import { PARAM_SOURCE_TYPE_DEFINED_GROUP, PARAM_SOURCE_TYPE_REQ_REP, } from '../../../../types/param-source-type';
 import { ParameterBuilderStyles as styles } from './parameter-builder.styles';
-import { PARAM_SOURCE_TYPE_DEFINED_GROUP, PARAM_SOURCE_TYPE_REQ_REP } from "../../../../types/param-source-type";
+import { ParameterBuilderTemplate as template } from './parameter-builder.template';
 const name = 'parameter-builder';
 let ParameterBuilder = class ParameterBuilder extends FASTElement {
     constructor() {
         super(...arguments);
-        this.reqRepItems = [
-            'REQUEST_1',
-            'REQUEST_2',
-            'REQUEST_3',
-        ];
+        this.reqRepItems = ['REQUEST_1', 'REQUEST_2', 'REQUEST_3'];
     }
     connectedCallback() {
         const _super = Object.create(null, {

package/dist/esm/components/foundation-notification-dashboard/components/templates/template-dialog/parameter-builder/parameter-builder.styles.js

@@ -6,13 +6,13 @@ export const ParameterBuilderStyles = css `
     gap: calc(var(--design-unit) * 2px);
     margin-bottom: calc(var(--design-unit) * 2px);
   }
-  
+
   zero-button {
-    margin: 0px;
+    margin: 0;
   }
-  
+
   .delete {
-    margin: 0px;
+    margin: 0;
     background-color: var(--neutral-layer-1);
   }
 

package/dist/esm/components/foundation-notification-dashboard/components/templates/template-dialog/parameter-builder/parameter-builder.template.js

@@ -1,82 +1,63 @@
 import { sync } from '@genesislcap/foundation-utils';
-import { html, ref, repeat, when } from "@microsoft/fast-element";
-import { ALL_PARAM_SOURCE_TYPES, PARAM_SOURCE_TYPE_DEFINED_GROUP, PARAM_SOURCE_TYPE_REQ_REP, PARAM_SOURCE_TYPE_USER_TEXT } from '../../../../types/param-source-type';
+import { html, ref, repeat, when } from '@microsoft/fast-element';
+import { ALL_PARAM_SOURCE_TYPES, PARAM_SOURCE_TYPE_DEFINED_GROUP, PARAM_SOURCE_TYPE_REQ_REP, PARAM_SOURCE_TYPE_USER_TEXT, } from '../../../../types/param-source-type';
 import { ALL_PARAM_TYPES } from '../../../../types/param-type';
 export const ParameterBuilderTemplate = html `
   <div class="parameter-builder">
     <zero-text-field
       id="param-name"
       placeholder="Name"
-      :value=${sync(x => x.name)}
-    >
-    </zero-text-field>
-    
+      :value=${sync((x) => x.name)}
+    ></zero-text-field>
+
     <zero-text-field
       id="param-label"
       placeholder="Label"
-      :value=${sync(x => x.label)}
-    >
-    </zero-text-field>
+      :value=${sync((x) => x.label)}
+    ></zero-text-field>
 
     <zero-select
       id="param-source-type"
-      :value=${sync(x => x.sourceType)}
+      :value=${sync((x) => x.sourceType)}
       class="param-source-type"
-      position="below"
     >
-      ${repeat(x => ALL_PARAM_SOURCE_TYPES, html `
-          <zero-option value=${x => x}>${x => x}</zero-option>
+      ${repeat((x) => ALL_PARAM_SOURCE_TYPES, html `
+          <zero-option value=${(x) => x}>${(x) => x}</zero-option>
         `)}
     </zero-select>
 
-    ${when(x => x.sourceType === PARAM_SOURCE_TYPE_USER_TEXT, html `
-        <zero-text-field
-          class="param-source"
-          disabled
-        >
-        </zero-text-field>
+    ${when((x) => x.sourceType === PARAM_SOURCE_TYPE_USER_TEXT, html `
+        <zero-text-field class="param-source" disabled></zero-text-field>
       `)}
-
-    ${when(x => x.sourceType === PARAM_SOURCE_TYPE_REQ_REP, html `
+    ${when((x) => x.sourceType === PARAM_SOURCE_TYPE_REQ_REP, html `
         <zero-select
           ${ref('sourceSelect')}
           id="param-source"
-          :value=${sync(x => x.sourceSelected)}
+          :value=${sync((x) => x.sourceSelected)}
           class="param-source"
-          ?disabled=${x => x.sourceType !== PARAM_SOURCE_TYPE_REQ_REP}
+          ?disabled=${(x) => x.sourceType !== PARAM_SOURCE_TYPE_REQ_REP}
         >
-          ${repeat(x => x.reqRepItems, html `
-              <zero-option value=${x => x}>${x => x}</zero-option>
+          ${repeat((x) => x.reqRepItems, html `
+              <zero-option value=${(x) => x}>${(x) => x}</zero-option>
             `)}
         </zero-select>
       `)}
-
-    ${when(x => x.sourceType === PARAM_SOURCE_TYPE_DEFINED_GROUP, html `
+    ${when((x) => x.sourceType === PARAM_SOURCE_TYPE_DEFINED_GROUP, html `
         <zero-text-field
           ${ref('sourceTextField')}
           class="param-source"
           placeholder="item1,item2,item3"
-          :value=${sync(x => x.sourceTyped)}
-        >
-        </zero-text-field>
+          :value=${sync((x) => x.sourceTyped)}
+        ></zero-text-field>
       `)}
-    
-    <zero-select
-      id="param-type"
-      :value=${sync(x => x.type)}
-      class="param-type"
-      position="below"
-    >
-      ${repeat(x => ALL_PARAM_TYPES, html `
-          <zero-option value=${x => x}>${x => x}</zero-option>
+
+    <zero-select id="param-type" :value=${sync((x) => x.type)} class="param-type">
+      ${repeat((x) => ALL_PARAM_TYPES, html `
+          <zero-option value=${(x) => x}>${(x) => x}</zero-option>
         `)}
     </zero-select>
 
-    <zero-button
-      appearance="icon"
-      class="delete"
-      @click=${x => x.deleteParameter()}
-    >
+    <zero-button appearance="icon" class="delete" @click=${(x) => x.deleteParameter()}>
       <zero-icon name="trash" part="icon"></zero-icon>
     </zero-button>
   </div>

package/dist/esm/components/foundation-notification-dashboard/components/templates/template-dialog/template-dialog.js

@@ -10,8 +10,8 @@ import { RIGHT_CRITERIA_USER_ENTRY, RIGHT_CRITERIA_VALUE } from '../../../types/
 import { SEVERITY_INFORMATION } from '../../../types/severity';
 import { TemplateDialogStyles as styles } from './template-dialog.styles';
 import { TemplateDialogTemplate as template } from './template-dialog.template';
-import { TemplateDialogMode } from './template-dialog.types';
-import { createAssignment, createConditions, createEmptyCondition, createEmptyParameter, createParameterDetails, getAssignmentValue, UUIDGenerator } from './template-dialog.utils';
+import { TemplateDialogMode, } from './template-dialog.types';
+import { createAssignment, createConditions, createEmptyCondition, createEmptyParameter, createParameterDetails, getAssignmentValue, UUIDGenerator, } from './template-dialog.utils';
 const name = 'template-dialog';
 let TemplateDialog = class TemplateDialog extends FASTElement {
     constructor() {
@@ -39,24 +39,24 @@ let TemplateDialog = class TemplateDialog extends FASTElement {
                     break;
                 case TemplateDialogMode.EDIT:
                     const ruleTemplate = params.data;
-                    this.ruleTemplateId = ruleTemplate.DYNAMIC_RULE_ID;
+                    this.templateId = ruleTemplate.DYNAMIC_RULE_ID;
                     this.name = ruleTemplate.RULE_NAME;
                     this.description = ruleTemplate.RULE_DESCRIPTION;
                     this.resource = ruleTemplate.RULE_TABLE;
                     this.fields = yield this.systemService.getFields(this.resource);
                     // Parameters
-                    this.parameters = Object.keys(ruleTemplate.PARAMETERS).map(key => {
+                    this.parameters = Object.keys(ruleTemplate.PARAMETERS).map((key) => {
                         return {
                             UUID: UUIDGenerator.createUuid(),
                             PARAM_NAME: ruleTemplate.PARAMETERS[key].PARAM_NAME,
                             PARAM_LABEL: ruleTemplate.PARAMETERS[key].PARAM_LABEL,
                             PARAM_TYPE: ruleTemplate.PARAMETERS[key].PARAM_TYPE,
                             PARAM_SOURCE_TYPE: ruleTemplate.PARAMETERS[key].PARAM_SOURCE_TYPE,
-                            PARAM_SOURCE: ruleTemplate.PARAMETERS[key].PARAM_SOURCE
+                            PARAM_SOURCE: ruleTemplate.PARAMETERS[key].PARAM_SOURCE,
                         };
                     });
                     // Conditions
-                    this.conditions = ruleTemplate.RULE_EXPRESSION.CONDITIONS.map(condition => {
+                    this.conditions = ruleTemplate.RULE_EXPRESSION.CONDITIONS.map((condition) => {
                         var _a, _b;
                         return {
                             ID: UUIDGenerator.createUuid(),
@@ -66,8 +66,9 @@ let TemplateDialog = class TemplateDialog extends FASTElement {
                                 ? RIGHT_CRITERIA_USER_ENTRY
                                 : RIGHT_CRITERIA_VALUE,
                             RIGHT_VALUE: condition.RIGHT.TYPE === EXPRESSION_TYPE_PLACEHOLDER
-                                ? this.parameters.find(parameter => parameter.PARAM_NAME === condition.RIGHT.KEY).UUID
-                                : (_b = condition.RIGHT.VALUE) !== null && _b !== void 0 ? _b : condition.RIGHT.NAME
+                                ? this.parameters.find((parameter) => parameter.PARAM_NAME === condition.RIGHT.KEY)
+                                    .UUID
+                                : (_b = condition.RIGHT.VALUE) !== null && _b !== void 0 ? _b : condition.RIGHT.NAME,
                         };
                     });
                     // Assignments
@@ -87,32 +88,32 @@ let TemplateDialog = class TemplateDialog extends FASTElement {
         });
     }
     get templateDialogTitle() {
-        const mode = this.templateDialogMode === TemplateDialogMode.CREATE
-            ? 'Create'
-            : 'Edit';
+        const mode = this.templateDialogMode === TemplateDialogMode.CREATE ? 'Create' : 'Edit';
         return `${mode} Template`;
     }
     submit() {
-        const template = Object.assign(Object.assign({}, (this.templateDialogMode === TemplateDialogMode.EDIT && { DYNAMIC_RULE_ID: this.ruleTemplateId })), { RULE_NAME: this.name, RULE_DESCRIPTION: this.description, RULE_TABLE: this.resource, RULE_EXPRESSION: {
-                CONDITIONS: createConditions(this.conditions, this.parameters)
+        const ruleTemplate = Object.assign(Object.assign({}, (this.templateDialogMode === TemplateDialogMode.EDIT && {
+            DYNAMIC_RULE_ID: this.templateId,
+        })), { RULE_NAME: this.name, RULE_DESCRIPTION: this.description, RULE_TABLE: this.resource, RULE_EXPRESSION: {
+                CONDITIONS: createConditions(this.conditions, this.parameters),
             }, RAW_RULE_EXPRESSION: null, RESULT_EXPRESSION: {
                 ASSIGNMENTS: [
                     createAssignment('TOPIC', this.topic),
                     createAssignment('HEADER', this.header),
                     createAssignment('BODY', this.message),
-                    createAssignment('NOTIFY_SEVERITY', humanize(this.severity))
-                ]
+                    createAssignment('NOTIFY_SEVERITY', humanize(this.severity)),
+                ],
             }, PARAMETER_DETAILS: createParameterDetails(this.parameters), RULE_EXECUTION_STRATEGY: 'UNLIMITED' });
         switch (this.templateDialogMode) {
             case TemplateDialogMode.CREATE:
-                this.ruleTemplateService
-                    .createRuleTemplate(template)
-                    .then(response => this.validateResponse(response));
+                this.templateService
+                    .createRuleTemplate(ruleTemplate)
+                    .then((response) => this.validateResponse(response));
                 break;
             case TemplateDialogMode.EDIT:
-                this.ruleTemplateService
-                    .editRuleTemplate(template)
-                    .then(response => this.validateResponse(response));
+                this.templateService
+                    .editRuleTemplate(ruleTemplate)
+                    .then((response) => this.validateResponse(response));
                 break;
             default:
                 logger.error('Error on TemplateDialogMode');
@@ -137,7 +138,7 @@ let TemplateDialog = class TemplateDialog extends FASTElement {
     }
     close() {
         this.dialog.close();
-        this.ruleTemplateId = null;
+        this.templateId = null;
         this.name = null;
         this.description = null;
         this.header = null;
@@ -155,13 +156,12 @@ let TemplateDialog = class TemplateDialog extends FASTElement {
     newCondition() {
         this.conditions.push(createEmptyCondition());
     }
-    editCondition(editedCondition) {
-    }
+    editCondition(editedCondition) { }
     deleteCondition(deletedCondition) {
         if (this.conditions.length <= 1) {
             return;
         }
-        this.conditions = this.conditions.filter(condition => condition !== deletedCondition);
+        this.conditions = this.conditions.filter((condition) => condition !== deletedCondition);
     }
     // #endregion
     // #region Parameter
@@ -172,10 +172,10 @@ let TemplateDialog = class TemplateDialog extends FASTElement {
         this.parameters = [...this.parameters];
     }
     deleteParameter(deletedParameter) {
-        if (this.conditions.find(condition => condition.RIGHT_VALUE === deletedParameter.UUID)) {
+        if (this.conditions.find((condition) => condition.RIGHT_VALUE === deletedParameter.UUID)) {
             return;
         }
-        this.parameters = this.parameters.filter(parameter => parameter.UUID !== deletedParameter.UUID);
+        this.parameters = this.parameters.filter((parameter) => parameter.UUID !== deletedParameter.UUID);
     }
     // #endregion
     resourceChanged() {
@@ -187,7 +187,7 @@ let TemplateDialog = class TemplateDialog extends FASTElement {
 };
 __decorate([
     TemplateService
-], TemplateDialog.prototype, "ruleTemplateService", void 0);
+], TemplateDialog.prototype, "templateService", void 0);
 __decorate([
     SystemService
 ], TemplateDialog.prototype, "systemService", void 0);
@@ -196,7 +196,7 @@ __decorate([
 ], TemplateDialog.prototype, "notifyService", void 0);
 __decorate([
     observable
-], TemplateDialog.prototype, "ruleTemplateId", void 0);
+], TemplateDialog.prototype, "templateId", void 0);
 __decorate([
     observable
 ], TemplateDialog.prototype, "name", void 0);

package/dist/esm/components/foundation-notification-dashboard/components/templates/template-dialog/template-dialog.styles.js

@@ -1,31 +1,31 @@
 import { css } from '@microsoft/fast-element';
 const modalWidthPx = 940;
-const header = css `
+const top = css `
   zero-modal::part(top) {
     padding: calc(var(--design-unit) * 4px);
     border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
-    margin: 0px;
+    margin: 0;
   }
 
-  .template-dialog-header-title {
+  .template-dialog-top {
     font-weight: bold;
     align-self: center;
   }
 `;
-const footer = css `
-  .template-dialog-footer {
-    display: flex;
-    padding: 0 calc(var(--design-unit)* 4px) calc(var(--design-unit)* 4px);
+const bottom = css `
+  zero-modal::part(bottom) {
+    padding: calc(var(--design-unit) * 4px);
+    border-top: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    margin: 0;
   }
 
-  .template-dialog-footer .content-row {
-    margin-left: auto;
-    margin-bottom: 0px;
+  .template-dialog-bottom {
+    display: flex;
   }
 `;
 export const TemplateDialogStyles = css `
-  ${header}
-  ${footer}
+  ${top}
+  ${bottom}
 
   zero-modal::part(dialog) {
     padding: 0;
@@ -35,9 +35,10 @@ export const TemplateDialogStyles = css `
 
   .template-dialog-content {
     display: flex;
-    justify-content: center;
     flex-direction: column;
     width: ${String(modalWidthPx)}px;
+    max-height: 500px;
+    overflow-y: scroll;
     gap: calc(var(--design-unit) * 3px);
     padding: calc(var(--design-unit) * 4px);
   }
@@ -56,26 +57,21 @@ export const TemplateDialogStyles = css `
 
   .parameters,
   .conditions {
-    height: 150px;
-    max-height: 200px;
     border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
     border-radius: calc(var(--control-corner-radius) * 1px);
     display: flex;
-    flex-direction: column;
     padding: calc(var(--design-unit) * 2px);
-    flex-direction: column;
-    overflow-y: scroll;
   }
 
   .parameter,
   .condition {
-    gap: 0px;
+    gap: 0;
     flex-direction: column;
-    margin-bottom: 0px;
+    margin-bottom: 0;
   }
 
   zero-button {
-    margin: 0px;
+    margin: 0;
   }
 
   zero-select {
@@ -85,4 +81,16 @@ export const TemplateDialogStyles = css `
   zero-select::part(listbox) {
     max-height: 160px;
   }
+
+  .horizontal {
+    flex-direction: row;
+  }
+
+  .destination {
+    align-self: center;
+  }
+
+  .topic {
+    min-width: revert-layer;
+  }
 `;