@genesislcap/pbc-notify-ui 15.71.0 → 15.72.0

package/dist/custom-elements.json

@@ -505,6 +505,27 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles/scrollbar.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "scrollbarStyles",
+          "default": "css`\n  ::-webkit-scrollbar {\n    width: calc((var(--base-height-multiplier) + var(--design-unit)) * 1px);\n  }\n\n  ::-webkit-scrollbar-track {\n    background: var(--neutral-layer-1);\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background: var(--neutral-fill-rest);\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "scrollbarStyles",
+          "declaration": {
+            "name": "scrollbarStyles",
+            "module": "src/styles/scrollbar.styles.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/utils/eventDetail.ts",
@@ -826,27 +847,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/styles/scrollbar.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "scrollbarStyles",
-          "default": "css`\n  ::-webkit-scrollbar {\n    width: calc((var(--base-height-multiplier) + var(--design-unit)) * 1px);\n  }\n\n  ::-webkit-scrollbar-track {\n    background: var(--neutral-layer-1);\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background: var(--neutral-fill-rest);\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "scrollbarStyles",
-          "declaration": {
-            "name": "scrollbarStyles",
-            "module": "src/styles/scrollbar.styles.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/foundation-inbox/inbox.styles.ts",
@@ -5295,95 +5295,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/foundation-notification-dashboard/styles/condition-builder.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "ConditionBuilderStyles",
-          "default": "css`\n  .condition-builder {\n    display: flex;\n    gap: calc(var(--design-unit) * 2px);\n    align-items: center;\n    margin-bottom: calc(var(--design-unit) * 2px);\n  }\n\n  rapid-button {\n    margin: 0;\n  }\n\n  /* The AND/OR toggle sits on its own row ABOVE the condition it joins,\n     rendered as a pair of small text links rather than buttons - reads like\n     a sentence connector (\"... and ...\") instead of a UI control competing\n     with the row's fields for attention. */\n  .join-toggle-row {\n    display: flex;\n    margin-bottom: calc(var(--design-unit) * 1px);\n  }\n\n  .join-toggle {\n    display: flex;\n    gap: calc(var(--design-unit) * 1.5px);\n  }\n\n  .join-text {\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.02em;\n    color: var(--accent-fill-rest);\n    cursor: pointer;\n    text-decoration: underline dotted;\n    text-underline-offset: 3px;\n    opacity: 40%;\n  }\n\n  .join-text:hover {\n    opacity: 70%;\n  }\n\n  .join-text.active {\n    opacity: 100%;\n    text-decoration: underline solid;\n  }\n\n  .join-text.active:hover {\n    opacity: 100%;\n  }\n\n  .delete {\n    margin: 0;\n    display: flex;\n    justify-content: center;\n    height: calc(var(--design-unit) * 9px);\n  }\n\n  .delete:hover {\n    background-color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 89%);\n  }\n\n  rapid-text-field {\n    width: 100%;\n    margin-bottom: 0;\n  }\n\n  rapid-text-field::part(root) {\n    height: calc(var(--design-unit) * 9px);\n  }\n\n  rapid-select {\n    min-width: auto;\n  }\n\n  rapid-select.left-value::part(control) {\n    width: 250px;\n  }\n\n  rapid-select.logical-operator::part(control) {\n    width: 160px;\n  }\n\n  .logical-operator-null-and-blank {\n    width: 100%;\n  }\n\n  rapid-select.right-criteria::part(control) {\n    width: 135px;\n  }\n\n  rapid-select.right-criteria-user-entry {\n    width: 100%;\n  }\n\n  rapid-select.right-criteria-select {\n    width: 100%;\n    min-width: 0;\n  }\n\n  rapid-select::part(listbox) {\n    max-height: 160px;\n  }\n`"
-        },
-        {
-          "kind": "variable",
-          "name": "ConditionGroupStyles",
-          "default": "css`\n  .condition-group-row {\n    margin-bottom: calc(var(--design-unit) * 2px);\n  }\n\n  /* The AND/OR toggle sits on its own row ABOVE the group it joins - see\n     ConditionBuilderStyles' .join-toggle-row/.join-text for why it's a pair\n     of text links rather than buttons. */\n  .join-toggle-row {\n    display: flex;\n    margin-bottom: calc(var(--design-unit) * 1px);\n  }\n\n  .join-toggle {\n    display: flex;\n    gap: calc(var(--design-unit) * 1.5px);\n  }\n\n  .join-text {\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.02em;\n    color: var(--accent-fill-rest);\n    cursor: pointer;\n    text-decoration: underline dotted;\n    text-underline-offset: 3px;\n    opacity: 40%;\n  }\n\n  .join-text:hover {\n    opacity: 70%;\n  }\n\n  .join-text.active {\n    opacity: 100%;\n    text-decoration: underline solid;\n  }\n\n  .join-text.active:hover {\n    opacity: 100%;\n  }\n\n  /* A full bordered box reads as \"this is one parenthesized unit\" more\n     literally than a left rail - it nests naturally too, a group inside a\n     group just gets a second box drawn inside the first, like actual nested\n     parens would look. */\n  .condition-group-box {\n    flex: 1;\n    min-width: 0;\n    border: calc(var(--design-unit) * 0.5px) solid\n      color-mix(in srgb, var(--accent-fill-rest), transparent 25%);\n    border-radius: calc(var(--design-unit) * 1px);\n    padding: calc(var(--design-unit) * 2px);\n    background-color: color-mix(in srgb, var(--accent-fill-rest), transparent 96%);\n  }\n\n  .condition-group-box > .content-row {\n    display: flex;\n    gap: calc(var(--design-unit) * 2px);\n    align-items: center;\n    margin-top: calc(var(--design-unit) * 1px);\n  }\n\n  .condition-group-box > .content-row rapid-button {\n    font-size: 12px;\n  }\n\n  rule-condition-builder,\n  rule-condition-group,\n  template-condition-builder,\n  template-condition-group {\n    display: block;\n    margin-bottom: calc(var(--design-unit) * 1px);\n  }\n\n  .delete-group {\n    margin: 0;\n    opacity: 60%;\n  }\n\n  .delete-group:hover {\n    opacity: 100%;\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ConditionBuilderStyles",
-          "declaration": {
-            "name": "ConditionBuilderStyles",
-            "module": "src/components/foundation-notification-dashboard/styles/condition-builder.styles.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ConditionGroupStyles",
-          "declaration": {
-            "name": "ConditionGroupStyles",
-            "module": "src/components/foundation-notification-dashboard/styles/condition-builder.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/foundation-notification-dashboard/styles/dynamic-rule.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "DynamicRuleManagementStyles",
-          "default": "css`\n  .container {\n    display: flex;\n    height: 100%;\n    flex-direction: column;\n  }\n\n  .header {\n    display: flex;\n    flex-direction: row-reverse;\n  }\n\n  .grid {\n    height: 100%;\n  }\n`"
-        },
-        {
-          "kind": "variable",
-          "name": "DynamicRuleDialogStyles",
-          "default": "css`\n  ${scrollbarStyles}\n  ${top}\n  ${bottom}\n\n  rapid-modal::part(dialog) {\n    padding: 0;\n    background: var(--neutral-layer-4);\n    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);\n  }\n\n  .dialog-content {\n    display: flex;\n    flex-direction: column;\n    width: ${String(modalWidthPx)}px;\n    max-height: 600px;\n    overflow-y: scroll;\n    gap: calc(var(--design-unit) * 3px);\n    padding: calc(var(--design-unit) * 4px);\n  }\n\n  .content-row {\n    display: flex;\n    gap: calc(var(--design-unit) * 3px);\n  }\n\n  .control {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    gap: calc(var(--design-unit) * 2px);\n  }\n\n  .topic-lock-hint {\n    color: var(--neutral-foreground-hint, var(--neutral-foreground-rest));\n    font-size: var(--type-ramp-minus-1-font-size);\n    line-height: var(--type-ramp-minus-1-line-height);\n  }\n\n  .items {\n    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);\n    border-radius: calc(var(--control-corner-radius) * 1px);\n    display: flex;\n    padding: calc(var(--design-unit) * 2px);\n    flex-direction: column;\n  }\n\n  .item {\n    gap: 0;\n    flex-direction: column;\n    margin-bottom: 0;\n  }\n\n  ${textField}\n  ${select}\n\n  rapid-button {\n    margin: 0;\n  }\n\n  rapid-select {\n    min-width: 0;\n  }\n\n  rapid-select::part(listbox) {\n    max-height: 160px;\n  }\n\n  .horizontal {\n    flex-direction: row;\n  }\n\n  .destination {\n    align-self: center;\n  }\n\n  .topic {\n    min-width: revert-layer;\n  }\n\n  .expression-preview {\n    width: 100%;\n    margin-top: calc(var(--design-unit) * 2px);\n  }\n\n  .expression-preview::part(control) {\n    font-family: var(--body-font, monospace);\n    font-size: 12px;\n    color: var(--neutral-foreground-hint);\n    min-height: calc(var(--design-unit) * 12px);\n    resize: vertical;\n  }\n\n  .alert-sound {\n    display: flex;\n    flex-direction: column;\n    gap: calc(var(--design-unit) * 2px);\n    margin-top: calc(var(--design-unit) * 2px);\n  }\n\n  .alert-sound .file-input {\n    display: none;\n  }\n\n  .alert-sound-row {\n    display: flex;\n    align-items: center;\n    gap: calc(var(--design-unit) * 2px);\n    flex-wrap: wrap;\n    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);\n    border-radius: calc(var(--control-corner-radius) * 1px);\n    padding: calc(var(--design-unit) * 2px);\n  }\n\n  .alert-sound-name {\n    flex: 1;\n    min-width: 120px;\n    color: var(--neutral-foreground-hint);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "DynamicRuleManagementStyles",
-          "declaration": {
-            "name": "DynamicRuleManagementStyles",
-            "module": "src/components/foundation-notification-dashboard/styles/dynamic-rule.styles.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "DynamicRuleDialogStyles",
-          "declaration": {
-            "name": "DynamicRuleDialogStyles",
-            "module": "src/components/foundation-notification-dashboard/styles/dynamic-rule.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/foundation-notification-dashboard/styles/management.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "managementGridStyles",
-          "default": "css`\n  :host {\n    height: 100%;\n  }\n\n  .container {\n    display: flex;\n    height: 100%;\n    flex-direction: column;\n  }\n\n  .header {\n    display: flex;\n  }\n\n  .grid {\n    height: 100%;\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "managementGridStyles",
-          "declaration": {
-            "name": "managementGridStyles",
-            "module": "src/components/foundation-notification-dashboard/styles/management.styles.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/foundation-notification-dashboard/types/expression-type.ts",
@@ -5984,6 +5895,95 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/foundation-notification-dashboard/styles/condition-builder.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "ConditionBuilderStyles",
+          "default": "css`\n  .condition-builder {\n    display: flex;\n    gap: calc(var(--design-unit) * 2px);\n    align-items: center;\n    margin-bottom: calc(var(--design-unit) * 2px);\n  }\n\n  rapid-button {\n    margin: 0;\n  }\n\n  /* The AND/OR toggle sits on its own row ABOVE the condition it joins,\n     rendered as a pair of small text links rather than buttons - reads like\n     a sentence connector (\"... and ...\") instead of a UI control competing\n     with the row's fields for attention. */\n  .join-toggle-row {\n    display: flex;\n    margin-bottom: calc(var(--design-unit) * 1px);\n  }\n\n  .join-toggle {\n    display: flex;\n    gap: calc(var(--design-unit) * 1.5px);\n  }\n\n  .join-text {\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.02em;\n    color: var(--accent-fill-rest);\n    cursor: pointer;\n    text-decoration: underline dotted;\n    text-underline-offset: 3px;\n    opacity: 40%;\n  }\n\n  .join-text:hover {\n    opacity: 70%;\n  }\n\n  .join-text.active {\n    opacity: 100%;\n    text-decoration: underline solid;\n  }\n\n  .join-text.active:hover {\n    opacity: 100%;\n  }\n\n  .delete {\n    margin: 0;\n    display: flex;\n    justify-content: center;\n    height: calc(var(--design-unit) * 9px);\n  }\n\n  .delete:hover {\n    background-color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 89%);\n  }\n\n  rapid-text-field {\n    width: 100%;\n    margin-bottom: 0;\n  }\n\n  rapid-text-field::part(root) {\n    height: calc(var(--design-unit) * 9px);\n  }\n\n  rapid-select {\n    min-width: auto;\n  }\n\n  rapid-select.left-value::part(control) {\n    width: 250px;\n  }\n\n  rapid-select.logical-operator::part(control) {\n    width: 160px;\n  }\n\n  .logical-operator-null-and-blank {\n    width: 100%;\n  }\n\n  rapid-select.right-criteria::part(control) {\n    width: 135px;\n  }\n\n  rapid-select.right-criteria-user-entry {\n    width: 100%;\n  }\n\n  rapid-select.right-criteria-select {\n    width: 100%;\n    min-width: 0;\n  }\n\n  rapid-select::part(listbox) {\n    max-height: 160px;\n  }\n`"
+        },
+        {
+          "kind": "variable",
+          "name": "ConditionGroupStyles",
+          "default": "css`\n  .condition-group-row {\n    margin-bottom: calc(var(--design-unit) * 2px);\n  }\n\n  /* The AND/OR toggle sits on its own row ABOVE the group it joins - see\n     ConditionBuilderStyles' .join-toggle-row/.join-text for why it's a pair\n     of text links rather than buttons. */\n  .join-toggle-row {\n    display: flex;\n    margin-bottom: calc(var(--design-unit) * 1px);\n  }\n\n  .join-toggle {\n    display: flex;\n    gap: calc(var(--design-unit) * 1.5px);\n  }\n\n  .join-text {\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.02em;\n    color: var(--accent-fill-rest);\n    cursor: pointer;\n    text-decoration: underline dotted;\n    text-underline-offset: 3px;\n    opacity: 40%;\n  }\n\n  .join-text:hover {\n    opacity: 70%;\n  }\n\n  .join-text.active {\n    opacity: 100%;\n    text-decoration: underline solid;\n  }\n\n  .join-text.active:hover {\n    opacity: 100%;\n  }\n\n  /* A full bordered box reads as \"this is one parenthesized unit\" more\n     literally than a left rail - it nests naturally too, a group inside a\n     group just gets a second box drawn inside the first, like actual nested\n     parens would look. */\n  .condition-group-box {\n    flex: 1;\n    min-width: 0;\n    border: calc(var(--design-unit) * 0.5px) solid\n      color-mix(in srgb, var(--accent-fill-rest), transparent 25%);\n    border-radius: calc(var(--design-unit) * 1px);\n    padding: calc(var(--design-unit) * 2px);\n    background-color: color-mix(in srgb, var(--accent-fill-rest), transparent 96%);\n  }\n\n  .condition-group-box > .content-row {\n    display: flex;\n    gap: calc(var(--design-unit) * 2px);\n    align-items: center;\n    margin-top: calc(var(--design-unit) * 1px);\n  }\n\n  .condition-group-box > .content-row rapid-button {\n    font-size: 12px;\n  }\n\n  rule-condition-builder,\n  rule-condition-group,\n  template-condition-builder,\n  template-condition-group {\n    display: block;\n    margin-bottom: calc(var(--design-unit) * 1px);\n  }\n\n  .delete-group {\n    margin: 0;\n    opacity: 60%;\n  }\n\n  .delete-group:hover {\n    opacity: 100%;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ConditionBuilderStyles",
+          "declaration": {
+            "name": "ConditionBuilderStyles",
+            "module": "src/components/foundation-notification-dashboard/styles/condition-builder.styles.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ConditionGroupStyles",
+          "declaration": {
+            "name": "ConditionGroupStyles",
+            "module": "src/components/foundation-notification-dashboard/styles/condition-builder.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/foundation-notification-dashboard/styles/dynamic-rule.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "DynamicRuleManagementStyles",
+          "default": "css`\n  .container {\n    display: flex;\n    height: 100%;\n    flex-direction: column;\n  }\n\n  .header {\n    display: flex;\n    flex-direction: row-reverse;\n  }\n\n  .grid {\n    height: 100%;\n  }\n`"
+        },
+        {
+          "kind": "variable",
+          "name": "DynamicRuleDialogStyles",
+          "default": "css`\n  ${scrollbarStyles}\n  ${top}\n  ${bottom}\n\n  rapid-modal::part(dialog) {\n    padding: 0;\n    background: var(--neutral-layer-4);\n    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);\n  }\n\n  .dialog-content {\n    display: flex;\n    flex-direction: column;\n    width: ${String(modalWidthPx)}px;\n    max-height: 600px;\n    overflow-y: scroll;\n    gap: calc(var(--design-unit) * 3px);\n    padding: calc(var(--design-unit) * 4px);\n  }\n\n  .content-row {\n    display: flex;\n    gap: calc(var(--design-unit) * 3px);\n  }\n\n  .control {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    gap: calc(var(--design-unit) * 2px);\n  }\n\n  .topic-lock-hint {\n    color: var(--neutral-foreground-hint, var(--neutral-foreground-rest));\n    font-size: var(--type-ramp-minus-1-font-size);\n    line-height: var(--type-ramp-minus-1-line-height);\n  }\n\n  .items {\n    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);\n    border-radius: calc(var(--control-corner-radius) * 1px);\n    display: flex;\n    padding: calc(var(--design-unit) * 2px);\n    flex-direction: column;\n  }\n\n  .item {\n    gap: 0;\n    flex-direction: column;\n    margin-bottom: 0;\n  }\n\n  ${textField}\n  ${select}\n\n  rapid-button {\n    margin: 0;\n  }\n\n  rapid-select {\n    min-width: 0;\n  }\n\n  rapid-select::part(listbox) {\n    max-height: 160px;\n  }\n\n  .horizontal {\n    flex-direction: row;\n  }\n\n  .destination {\n    align-self: center;\n  }\n\n  .topic {\n    min-width: revert-layer;\n  }\n\n  .expression-preview {\n    width: 100%;\n    margin-top: calc(var(--design-unit) * 2px);\n  }\n\n  .expression-preview::part(control) {\n    font-family: var(--body-font, monospace);\n    font-size: 12px;\n    color: var(--neutral-foreground-hint);\n    min-height: calc(var(--design-unit) * 12px);\n    resize: vertical;\n  }\n\n  .alert-sound {\n    display: flex;\n    flex-direction: column;\n    gap: calc(var(--design-unit) * 2px);\n    margin-top: calc(var(--design-unit) * 2px);\n  }\n\n  .alert-sound .file-input {\n    display: none;\n  }\n\n  .alert-sound-row {\n    display: flex;\n    align-items: center;\n    gap: calc(var(--design-unit) * 2px);\n    flex-wrap: wrap;\n    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);\n    border-radius: calc(var(--control-corner-radius) * 1px);\n    padding: calc(var(--design-unit) * 2px);\n  }\n\n  .alert-sound-name {\n    flex: 1;\n    min-width: 120px;\n    color: var(--neutral-foreground-hint);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DynamicRuleManagementStyles",
+          "declaration": {
+            "name": "DynamicRuleManagementStyles",
+            "module": "src/components/foundation-notification-dashboard/styles/dynamic-rule.styles.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DynamicRuleDialogStyles",
+          "declaration": {
+            "name": "DynamicRuleDialogStyles",
+            "module": "src/components/foundation-notification-dashboard/styles/dynamic-rule.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/foundation-notification-dashboard/styles/management.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "managementGridStyles",
+          "default": "css`\n  :host {\n    height: 100%;\n  }\n\n  .container {\n    display: flex;\n    height: 100%;\n    flex-direction: column;\n  }\n\n  .header {\n    display: flex;\n  }\n\n  .grid {\n    height: 100%;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "managementGridStyles",
+          "declaration": {
+            "name": "managementGridStyles",
+            "module": "src/components/foundation-notification-dashboard/styles/management.styles.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/foundation-inbox/components/foundation-inbox-counter/foundation-inbox-counter.styles.ts",
@@ -8225,238 +8225,28 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/foundation-notification-dashboard/components/routes/tabs/email-distribution-route-management.ts",
+      "path": "src/components/foundation-notification-dashboard/components/rules/rule-dialog/rule-dialog.template.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "EmailDistributionRouteManagement",
-          "superclass": {
-            "name": "GenesisElement",
-            "package": "@genesislcap/web-core"
-          },
-          "tagName": "email-distribution-route-management",
-          "customElement": true
+          "kind": "variable",
+          "name": "RuleDialogTemplate",
+          "default": "html<RuleDialog>`\n  <rapid-modal ${ref('dialog')} class=\"dialog\" :onCloseCallback=${(x) => () => x.close()}>\n    <div slot=\"top\" class=\"dialog-top\">${(x) => x.ruleDialogTitle}</div>\n\n    <div class=\"dialog-content\">\n      <div class=\"content-row\">\n        <div class=\"control\">\n          <rapid-text-field\n            :value=${sync((x) => x.name)}\n            @change=\"${(x) => x.validateRequiredFields()}\"\n            autofocus\n            autocomplete=\"off\"\n            required\n          >\n            Name\n          </rapid-text-field>\n        </div>\n\n        <div class=\"control\">\n          <rapid-text-field\n            :value=${sync((x) => x.description)}\n            @change=\"${(x) => x.validateRequiredFields()}\"\n            autocomplete=\"off\"\n            required\n          >\n            Description\n          </rapid-text-field>\n        </div>\n      </div>\n\n      <div class=\"content-row\">\n        <div class=\"control\">\n          <label>Resource</label>\n          <rapid-select\n            :value=${sync((x) => x.resource)}\n            title=${(x) => x.resource}\n            position=\"below\"\n          >\n            ${repeat(\n              (x) => x.resources,\n              html`\n                <rapid-option value=${(x) => x} title=${(x) => x}>${(x) => x}</rapid-option>\n              `,\n            )}\n          </rapid-select>\n        </div>\n\n        <div class=\"control\">\n          <label>Topic</label>\n          <rapid-combobox\n            autocomplete=\"both\"\n            :value=${sync((x) => x.selectedRouteId)}\n            title=${(x) => x.topic}\n            @change=${(x, c) => x.onTopicRouteChange((c.event.target as HTMLInputElement).value)}\n          >\n            ${repeat(\n              (x) => x.routeTopicOptions,\n              html<NotifyRouteTopic, RuleDialog>`\n                <rapid-option value=${(x) => x.notifyRouteId} title=${(x) => x.topicMatch}>\n                  ${(x) => routeTopicLabel(x)}\n                </rapid-option>\n              `,\n            )}\n          </rapid-combobox>\n        </div>\n\n        <div class=\"control\">\n          <label>Severity</label>\n          <rapid-select :value=${sync((x) => x.severity)}>\n            <options-datasource\n              value-field=\"value\"\n              label-field=\"value\"\n              option-element=\"rapid-option\"\n              :data=${(_) => Object.values(Severity).map((value) => ({ value }))}\n            ></options-datasource>\n          </rapid-select>\n        </div>\n\n        <div class=\"control\">\n          <label>Update Type</label>\n          <rapid-multiselect\n            :selectedOptions=${(x) => x.updateType}\n            @selectionChange=${(x, c) => {\n              x.updateType = (c.event as CustomEvent).detail;\n            }}\n            search=\"false\"\n            all=\"false\"\n          >\n            <multiselect-datasource\n              value-field=\"value\"\n              label-field=\"value\"\n              :data=${() => Object.values(UpdateType).map((value) => ({ value, label: value }))}\n            ></multiselect-datasource>\n          </rapid-multiselect>\n        </div>\n      </div>\n\n      <div class=\"content-row\">\n        <div class=\"control\">\n          <rapid-text-field\n            required\n            :value=${sync((x) => x.header)}\n            @change=\"${(x) => x.validateRequiredFields()}\"\n            autocomplete=\"off\"\n          >\n            Header\n          </rapid-text-field>\n        </div>\n\n        <div class=\"control\">\n          <rapid-text-field\n            required\n            :value=${sync((x) => x.message)}\n            @change=\"${(x) => x.validateRequiredFields()}\"\n            autocomplete=\"off\"\n          >\n            Message\n          </rapid-text-field>\n        </div>\n      </div>\n\n      ${alertSoundAttachmentTemplate}\n\n      <div class=\"control\">\n        <label>Condition(s)</label>\n        <div class=\"items\">\n          <div class=\"content-row item\">\n            ${repeat(\n              (x) => x.conditions,\n              html<ConditionNode, RuleDialog>`\n                ${when(\n                  (x) => isGroup(x),\n                  html<ConditionNode>`\n                    <rule-condition-group\n                      :fields=${(x, c) => c.parent.fields}\n                      :node=${(x) => x}\n                      :isFirst=${(x, c) => c.index === 0}\n                      @edit=${(x, c) => c.parent.editCondition(eventDetail(c))}\n                      @delete=${(x, c) => c.parent.deleteCondition(eventDetail(c))}\n                    ></rule-condition-group>\n                  `,\n                )}\n                ${when(\n                  (x) => !isGroup(x),\n                  html<ConditionNode>`\n                    <rule-condition-builder\n                      :fields=${(x, c) => c.parent.fields}\n                      :condition=${(x) => x}\n                      :isFirst=${(x, c) => c.index === 0}\n                      @edit=${(x, c) => c.parent.editCondition(eventDetail(c))}\n                      @delete=${(x, c) => c.parent.deleteCondition(eventDetail(c))}\n                    ></rule-condition-builder>\n                  `,\n                )}\n              `,\n              { positioning: true },\n            )}\n          </div>\n\n          <div class=\"content-row\">\n            <rapid-button appearance=\"lightweight\" @click=${(x) => x.newCondition()}>\n              + Condition\n            </rapid-button>\n            <rapid-button appearance=\"lightweight\" @click=${(x) => x.newGroup()}>\n              + Group\n            </rapid-button>\n          </div>\n        </div>\n        <rapid-text-area\n          class=\"expression-preview\"\n          readonly\n          :value=${(x) => x.rawExpressionPreview}\n        >\n          Compiled expression\n        </rapid-text-area>\n      </div>\n    </div>\n\n    <div slot=\"bottom\" class=\"dialog-bottom\">\n      <rapid-button\n        appearance=\"primary\"\n        @click=${(x) => x.submit()}\n        ?disabled=${(x) => x.submitDisabled}\n      >\n        Submit\n      </rapid-button>\n    </div>\n  </rapid-modal>\n`"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "EmailDistributionRouteManagement",
-          "declaration": {
-            "name": "EmailDistributionRouteManagement",
-            "module": "src/components/foundation-notification-dashboard/components/routes/tabs/email-distribution-route-management.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "email-distribution-route-management",
+          "name": "RuleDialogTemplate",
           "declaration": {
-            "name": "EmailDistributionRouteManagement",
-            "module": "src/components/foundation-notification-dashboard/components/routes/tabs/email-distribution-route-management.ts"
+            "name": "RuleDialogTemplate",
+            "module": "src/components/foundation-notification-dashboard/components/rules/rule-dialog/rule-dialog.template.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/foundation-notification-dashboard/components/routes/tabs/email-user-route-management.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "EmailUserRouteManagement",
-          "superclass": {
-            "name": "GenesisElement",
-            "package": "@genesislcap/web-core"
-          },
-          "tagName": "email-user-route-management",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "EmailUserRouteManagement",
-          "declaration": {
-            "name": "EmailUserRouteManagement",
-            "module": "src/components/foundation-notification-dashboard/components/routes/tabs/email-user-route-management.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "email-user-route-management",
-          "declaration": {
-            "name": "EmailUserRouteManagement",
-            "module": "src/components/foundation-notification-dashboard/components/routes/tabs/email-user-route-management.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/foundation-notification-dashboard/components/routes/tabs/log-route-management.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LogRouteManagement",
-          "superclass": {
-            "name": "GenesisElement",
-            "package": "@genesislcap/web-core"
-          },
-          "tagName": "log-route-management",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "LogRouteManagement",
-          "declaration": {
-            "name": "LogRouteManagement",
-            "module": "src/components/foundation-notification-dashboard/components/routes/tabs/log-route-management.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "log-route-management",
-          "declaration": {
-            "name": "LogRouteManagement",
-            "module": "src/components/foundation-notification-dashboard/components/routes/tabs/log-route-management.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/foundation-notification-dashboard/components/routes/tabs/ms-teams-route-management.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "MSTeamsRouteManagement",
-          "superclass": {
-            "name": "GenesisElement",
-            "package": "@genesislcap/web-core"
-          },
-          "tagName": "ms-teams-route-management",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "MSTeamsRouteManagement",
-          "declaration": {
-            "name": "MSTeamsRouteManagement",
-            "module": "src/components/foundation-notification-dashboard/components/routes/tabs/ms-teams-route-management.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "ms-teams-route-management",
-          "declaration": {
-            "name": "MSTeamsRouteManagement",
-            "module": "src/components/foundation-notification-dashboard/components/routes/tabs/ms-teams-route-management.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/foundation-notification-dashboard/components/routes/tabs/screen-route-management.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ScreenRouteManagement",
-          "superclass": {
-            "name": "GenesisElement",
-            "package": "@genesislcap/web-core"
-          },
-          "tagName": "screen-route-management",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ScreenRouteManagement",
-          "declaration": {
-            "name": "ScreenRouteManagement",
-            "module": "src/components/foundation-notification-dashboard/components/routes/tabs/screen-route-management.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "screen-route-management",
-          "declaration": {
-            "name": "ScreenRouteManagement",
-            "module": "src/components/foundation-notification-dashboard/components/routes/tabs/screen-route-management.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/foundation-notification-dashboard/components/routes/tabs/slack-route-management.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SlackRouteManagement",
-          "superclass": {
-            "name": "GenesisElement",
-            "package": "@genesislcap/web-core"
-          },
-          "tagName": "slack-route-management",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "SlackRouteManagement",
-          "declaration": {
-            "name": "SlackRouteManagement",
-            "module": "src/components/foundation-notification-dashboard/components/routes/tabs/slack-route-management.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "slack-route-management",
-          "declaration": {
-            "name": "SlackRouteManagement",
-            "module": "src/components/foundation-notification-dashboard/components/routes/tabs/slack-route-management.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/foundation-notification-dashboard/components/rules/rule-dialog/rule-dialog.template.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "RuleDialogTemplate",
-          "default": "html<RuleDialog>`\n  <rapid-modal ${ref('dialog')} class=\"dialog\" :onCloseCallback=${(x) => () => x.close()}>\n    <div slot=\"top\" class=\"dialog-top\">${(x) => x.ruleDialogTitle}</div>\n\n    <div class=\"dialog-content\">\n      <div class=\"content-row\">\n        <div class=\"control\">\n          <rapid-text-field\n            :value=${sync((x) => x.name)}\n            @change=\"${(x) => x.validateRequiredFields()}\"\n            autofocus\n            autocomplete=\"off\"\n            required\n          >\n            Name\n          </rapid-text-field>\n        </div>\n\n        <div class=\"control\">\n          <rapid-text-field\n            :value=${sync((x) => x.description)}\n            @change=\"${(x) => x.validateRequiredFields()}\"\n            autocomplete=\"off\"\n            required\n          >\n            Description\n          </rapid-text-field>\n        </div>\n      </div>\n\n      <div class=\"content-row\">\n        <div class=\"control\">\n          <label>Resource</label>\n          <rapid-select\n            :value=${sync((x) => x.resource)}\n            title=${(x) => x.resource}\n            position=\"below\"\n          >\n            ${repeat(\n              (x) => x.resources,\n              html`\n                <rapid-option value=${(x) => x} title=${(x) => x}>${(x) => x}</rapid-option>\n              `,\n            )}\n          </rapid-select>\n        </div>\n\n        <div class=\"control\">\n          <label>Topic</label>\n          <rapid-combobox\n            autocomplete=\"both\"\n            :value=${sync((x) => x.selectedRouteId)}\n            title=${(x) => x.topic}\n            @change=${(x, c) => x.onTopicRouteChange((c.event.target as HTMLInputElement).value)}\n          >\n            ${repeat(\n              (x) => x.routeTopicOptions,\n              html<NotifyRouteTopic, RuleDialog>`\n                <rapid-option value=${(x) => x.notifyRouteId} title=${(x) => x.topicMatch}>\n                  ${(x) => routeTopicLabel(x)}\n                </rapid-option>\n              `,\n            )}\n          </rapid-combobox>\n        </div>\n\n        <div class=\"control\">\n          <label>Severity</label>\n          <rapid-select :value=${sync((x) => x.severity)}>\n            <options-datasource\n              value-field=\"value\"\n              label-field=\"value\"\n              option-element=\"rapid-option\"\n              :data=${(_) => Object.values(Severity).map((value) => ({ value }))}\n            ></options-datasource>\n          </rapid-select>\n        </div>\n\n        <div class=\"control\">\n          <label>Update Type</label>\n          <rapid-multiselect\n            :selectedOptions=${(x) => x.updateType}\n            @selectionChange=${(x, c) => {\n              x.updateType = (c.event as CustomEvent).detail;\n            }}\n            search=\"false\"\n            all=\"false\"\n          >\n            <multiselect-datasource\n              value-field=\"value\"\n              label-field=\"value\"\n              :data=${() => Object.values(UpdateType).map((value) => ({ value, label: value }))}\n            ></multiselect-datasource>\n          </rapid-multiselect>\n        </div>\n      </div>\n\n      <div class=\"content-row\">\n        <div class=\"control\">\n          <rapid-text-field\n            required\n            :value=${sync((x) => x.header)}\n            @change=\"${(x) => x.validateRequiredFields()}\"\n            autocomplete=\"off\"\n          >\n            Header\n          </rapid-text-field>\n        </div>\n\n        <div class=\"control\">\n          <rapid-text-field\n            required\n            :value=${sync((x) => x.message)}\n            @change=\"${(x) => x.validateRequiredFields()}\"\n            autocomplete=\"off\"\n          >\n            Message\n          </rapid-text-field>\n        </div>\n      </div>\n\n      ${alertSoundAttachmentTemplate}\n\n      <div class=\"control\">\n        <label>Condition(s)</label>\n        <div class=\"items\">\n          <div class=\"content-row item\">\n            ${repeat(\n              (x) => x.conditions,\n              html<ConditionNode, RuleDialog>`\n                ${when(\n                  (x) => isGroup(x),\n                  html<ConditionNode>`\n                    <rule-condition-group\n                      :fields=${(x, c) => c.parent.fields}\n                      :node=${(x) => x}\n                      :isFirst=${(x, c) => c.index === 0}\n                      @edit=${(x, c) => c.parent.editCondition(eventDetail(c))}\n                      @delete=${(x, c) => c.parent.deleteCondition(eventDetail(c))}\n                    ></rule-condition-group>\n                  `,\n                )}\n                ${when(\n                  (x) => !isGroup(x),\n                  html<ConditionNode>`\n                    <rule-condition-builder\n                      :fields=${(x, c) => c.parent.fields}\n                      :condition=${(x) => x}\n                      :isFirst=${(x, c) => c.index === 0}\n                      @edit=${(x, c) => c.parent.editCondition(eventDetail(c))}\n                      @delete=${(x, c) => c.parent.deleteCondition(eventDetail(c))}\n                    ></rule-condition-builder>\n                  `,\n                )}\n              `,\n              { positioning: true },\n            )}\n          </div>\n\n          <div class=\"content-row\">\n            <rapid-button appearance=\"lightweight\" @click=${(x) => x.newCondition()}>\n              + Condition\n            </rapid-button>\n            <rapid-button appearance=\"lightweight\" @click=${(x) => x.newGroup()}>\n              + Group\n            </rapid-button>\n          </div>\n        </div>\n        <rapid-text-area\n          class=\"expression-preview\"\n          readonly\n          :value=${(x) => x.rawExpressionPreview}\n        >\n          Compiled expression\n        </rapid-text-area>\n      </div>\n    </div>\n\n    <div slot=\"bottom\" class=\"dialog-bottom\">\n      <rapid-button\n        appearance=\"primary\"\n        @click=${(x) => x.submit()}\n        ?disabled=${(x) => x.submitDisabled}\n      >\n        Submit\n      </rapid-button>\n    </div>\n  </rapid-modal>\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "RuleDialogTemplate",
-          "declaration": {
-            "name": "RuleDialogTemplate",
-            "module": "src/components/foundation-notification-dashboard/components/rules/rule-dialog/rule-dialog.template.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/foundation-notification-dashboard/components/rules/rule-dialog/rule-dialog.ts",
+      "path": "src/components/foundation-notification-dashboard/components/rules/rule-dialog/rule-dialog.ts",
       "declarations": [
         {
           "kind": "class",
@@ -9097,67 +8887,277 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/foundation-notification-dashboard/components/templates/template-dialog/template-dialog.template.ts",
+      "path": "src/components/foundation-notification-dashboard/components/routes/tabs/email-distribution-route-management.ts",
       "declarations": [
         {
-          "kind": "variable",
-          "name": "TemplateDialogTemplate",
-          "default": "html<TemplateDialog>`\n  <rapid-modal ${ref('dialog')} class=\"dialog\" :onCloseCallback=${(x) => () => x.close()}>\n    <div slot=\"top\" class=\"dialog-top\">${(x) => x.templateDialogTitle}</div>\n\n    <div class=\"dialog-content\">\n      <div class=\"content-row\">\n        <div class=\"control\">\n          <rapid-text-field :value=${sync((x) => x.name)} autofocus>Name</rapid-text-field>\n        </div>\n\n        <div class=\"control\">\n          <rapid-text-field :value=${sync((x) => x.description)}>Description</rapid-text-field>\n        </div>\n      </div>\n\n      <div class=\"content-row\">\n        <div class=\"control\">\n          <label>Resource</label>\n          <rapid-select :value=${sync((x) => x.resource)} position=\"below\">\n            ${repeat(\n              (x) => x.resources,\n              html`\n                <rapid-option value=${(x) => x}>${(x) => x}</rapid-option>\n              `,\n            )}\n          </rapid-select>\n        </div>\n\n        <div class=\"control\">\n          <label>Severity</label>\n          <rapid-select :value=${sync((x) => x.severity)}>\n            <options-datasource\n              value-field=\"value\"\n              label-field=\"value\"\n              option-element=\"rapid-option\"\n              :data=${(_) => Object.values(Severity).map((value) => ({ value }))}\n            ></options-datasource>\n          </rapid-select>\n        </div>\n\n        <div class=\"control\">\n          <label>Update Type</label>\n          <rapid-multiselect\n            :selectedOptions=${(x) => x.updateType}\n            @selectionChange=${(x, c) => {\n              x.updateType = (c.event as CustomEvent).detail;\n            }}\n            search=\"false\"\n            all=\"false\"\n          >\n            <multiselect-datasource\n              value-field=\"value\"\n              label-field=\"value\"\n              :data=${() => Object.values(UpdateType).map((value) => ({ value, label: value }))}\n            ></multiselect-datasource>\n          </rapid-multiselect>\n        </div>\n      </div>\n\n      <div class=\"content-row\">\n        <div class=\"control\">\n          <rapid-text-field :value=${sync((x) => x.header)}>Header</rapid-text-field>\n        </div>\n\n        <div class=\"control\">\n          <rapid-text-field :value=${sync((x) => x.message)}>Message</rapid-text-field>\n        </div>\n      </div>\n\n      <div class=\"control\">\n        <label>Topic(s)</label>\n        ${when(\n          (x) => x.lockBroadcastTopics,\n          html`\n            <span class=\"topic-lock-hint\">\n              Broadcast topics cannot be used after this template was saved with multiple subscriber\n              routes. Delete it and create a new template instead.\n            </span>\n          `,\n        )}\n        ${when(\n          (x) => x.topicOptions.length > 0,\n          html<TemplateDialog>`\n            <rapid-multiselect\n              ${ref('topicsSelect')}\n              class=\"channel-topics\"\n              name=\"topics\"\n              :selectedOptions=${(x) => x.selectedRouteIds}\n              :options=${(x) => x.topicOptions}\n              @selectionChange=${(x, c) => x.onSelectedTopicsChange(c.event)}\n              search=\"true\"\n              all=\"false\"\n            ></rapid-multiselect>\n          `,\n        )}\n      </div>\n\n      <div class=\"control\">\n        <label>Parameter(s)</label>\n        <div class=\"items\">\n          <div class=\"content-row item\">\n            ${repeat(\n              (x) => x.userParameters,\n              html`\n                <parameter-builder\n                  :parameter=${(x) => x}\n                  @edit=${(x, c) => c.parent.editParameter(eventDetail(c))}\n                  @delete=${(x, c) => c.parent.deleteParameter(eventDetail(c))}\n                ></parameter-builder>\n              `,\n            )}\n          </div>\n\n          <div class=\"content-row\">\n            <rapid-button @click=${(x) => x.newParameter()}>+ Parameter</rapid-button>\n          </div>\n        </div>\n      </div>\n\n      ${alertSoundAttachmentTemplate}\n\n      <div class=\"control\">\n        <label>Condition(s)</label>\n        <div class=\"items\">\n          <div class=\"content-row item\">\n            ${repeat(\n              (x) => x.conditions,\n              html<ConditionNode, TemplateDialog>`\n                ${when(\n                  (x) => isGroup(x),\n                  html<ConditionNode>`\n                    <template-condition-group\n                      :fields=${(x, c) => c.parent.fields}\n                      :parameters=${(x, c) => c.parent.userParameters}\n                      :node=${(x) => x}\n                      :isFirst=${(x, c) => c.index === 0}\n                      @edit=${(x, c) => c.parent.editCondition(eventDetail(c))}\n                      @delete=${(x, c) => c.parent.deleteCondition(eventDetail(c))}\n                    ></template-condition-group>\n                  `,\n                )}\n                ${when(\n                  (x) => !isGroup(x),\n                  html<ConditionNode>`\n                    <template-condition-builder\n                      :fields=${(x, c) => c.parent.fields}\n                      :parameters=${(x, c) => c.parent.userParameters}\n                      :condition=${(x) => x}\n                      :isFirst=${(x, c) => c.index === 0}\n                      @edit=${(x, c) => c.parent.editCondition(eventDetail(c))}\n                      @delete=${(x, c) => c.parent.deleteCondition(eventDetail(c))}\n                    ></template-condition-builder>\n                  `,\n                )}\n              `,\n              { positioning: true },\n            )}\n          </div>\n\n          <div class=\"content-row\">\n            <rapid-button appearance=\"lightweight\" @click=${(x) => x.newCondition()}>\n              + Condition\n            </rapid-button>\n            <rapid-button appearance=\"lightweight\" @click=${(x) => x.newGroup()}>\n              + Group\n            </rapid-button>\n          </div>\n        </div>\n        <rapid-text-area\n          class=\"expression-preview\"\n          readonly\n          :value=${(x) => x.rawExpressionPreview}\n        >\n          Compiled expression\n        </rapid-text-area>\n      </div>\n    </div>\n\n    <div slot=\"bottom\" class=\"dialog-bottom\">\n      <rapid-button\n        appearance=\"primary\"\n        @click=${(x) => x.submit()}\n        ?disabled=${(x) => x.validateRequiredFields || x.missingTopic}\n      >\n        Submit\n      </rapid-button>\n    </div>\n  </rapid-modal>\n`"
+          "kind": "class",
+          "description": "",
+          "name": "EmailDistributionRouteManagement",
+          "superclass": {
+            "name": "GenesisElement",
+            "package": "@genesislcap/web-core"
+          },
+          "tagName": "email-distribution-route-management",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "TemplateDialogTemplate",
+          "name": "EmailDistributionRouteManagement",
           "declaration": {
-            "name": "TemplateDialogTemplate",
-            "module": "src/components/foundation-notification-dashboard/components/templates/template-dialog/template-dialog.template.ts"
+            "name": "EmailDistributionRouteManagement",
+            "module": "src/components/foundation-notification-dashboard/components/routes/tabs/email-distribution-route-management.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "email-distribution-route-management",
+          "declaration": {
+            "name": "EmailDistributionRouteManagement",
+            "module": "src/components/foundation-notification-dashboard/components/routes/tabs/email-distribution-route-management.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/foundation-notification-dashboard/components/templates/template-dialog/template-dialog.ts",
+      "path": "src/components/foundation-notification-dashboard/components/routes/tabs/email-user-route-management.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Dialog for creating or editing notification templates.",
-          "name": "TemplateDialog",
-          "members": [
-            {
-              "kind": "field",
-              "name": "templateService",
-              "type": {
-                "text": "TemplateService"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "systemService",
-              "type": {
-                "text": "SystemService"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "notifyService",
-              "type": {
-                "text": "NotifyService"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "ruleService",
-              "type": {
-                "text": "RuleService"
-              },
-              "inheritedFrom": {
-                "name": "AlertSoundAttachmentMixin",
-                "module": "src/components/foundation-notification-dashboard/alert-sound-attachment.ts"
-              }
-            },
-            {
+          "description": "",
+          "name": "EmailUserRouteManagement",
+          "superclass": {
+            "name": "GenesisElement",
+            "package": "@genesislcap/web-core"
+          },
+          "tagName": "email-user-route-management",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "EmailUserRouteManagement",
+          "declaration": {
+            "name": "EmailUserRouteManagement",
+            "module": "src/components/foundation-notification-dashboard/components/routes/tabs/email-user-route-management.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "email-user-route-management",
+          "declaration": {
+            "name": "EmailUserRouteManagement",
+            "module": "src/components/foundation-notification-dashboard/components/routes/tabs/email-user-route-management.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/foundation-notification-dashboard/components/routes/tabs/log-route-management.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LogRouteManagement",
+          "superclass": {
+            "name": "GenesisElement",
+            "package": "@genesislcap/web-core"
+          },
+          "tagName": "log-route-management",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LogRouteManagement",
+          "declaration": {
+            "name": "LogRouteManagement",
+            "module": "src/components/foundation-notification-dashboard/components/routes/tabs/log-route-management.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "log-route-management",
+          "declaration": {
+            "name": "LogRouteManagement",
+            "module": "src/components/foundation-notification-dashboard/components/routes/tabs/log-route-management.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/foundation-notification-dashboard/components/routes/tabs/ms-teams-route-management.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "MSTeamsRouteManagement",
+          "superclass": {
+            "name": "GenesisElement",
+            "package": "@genesislcap/web-core"
+          },
+          "tagName": "ms-teams-route-management",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "MSTeamsRouteManagement",
+          "declaration": {
+            "name": "MSTeamsRouteManagement",
+            "module": "src/components/foundation-notification-dashboard/components/routes/tabs/ms-teams-route-management.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "ms-teams-route-management",
+          "declaration": {
+            "name": "MSTeamsRouteManagement",
+            "module": "src/components/foundation-notification-dashboard/components/routes/tabs/ms-teams-route-management.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/foundation-notification-dashboard/components/routes/tabs/screen-route-management.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ScreenRouteManagement",
+          "superclass": {
+            "name": "GenesisElement",
+            "package": "@genesislcap/web-core"
+          },
+          "tagName": "screen-route-management",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ScreenRouteManagement",
+          "declaration": {
+            "name": "ScreenRouteManagement",
+            "module": "src/components/foundation-notification-dashboard/components/routes/tabs/screen-route-management.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "screen-route-management",
+          "declaration": {
+            "name": "ScreenRouteManagement",
+            "module": "src/components/foundation-notification-dashboard/components/routes/tabs/screen-route-management.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/foundation-notification-dashboard/components/routes/tabs/slack-route-management.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SlackRouteManagement",
+          "superclass": {
+            "name": "GenesisElement",
+            "package": "@genesislcap/web-core"
+          },
+          "tagName": "slack-route-management",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SlackRouteManagement",
+          "declaration": {
+            "name": "SlackRouteManagement",
+            "module": "src/components/foundation-notification-dashboard/components/routes/tabs/slack-route-management.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "slack-route-management",
+          "declaration": {
+            "name": "SlackRouteManagement",
+            "module": "src/components/foundation-notification-dashboard/components/routes/tabs/slack-route-management.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/foundation-notification-dashboard/components/templates/template-dialog/template-dialog.template.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "TemplateDialogTemplate",
+          "default": "html<TemplateDialog>`\n  <rapid-modal ${ref('dialog')} class=\"dialog\" :onCloseCallback=${(x) => () => x.close()}>\n    <div slot=\"top\" class=\"dialog-top\">${(x) => x.templateDialogTitle}</div>\n\n    <div class=\"dialog-content\">\n      <div class=\"content-row\">\n        <div class=\"control\">\n          <rapid-text-field :value=${sync((x) => x.name)} autofocus>Name</rapid-text-field>\n        </div>\n\n        <div class=\"control\">\n          <rapid-text-field :value=${sync((x) => x.description)}>Description</rapid-text-field>\n        </div>\n      </div>\n\n      <div class=\"content-row\">\n        <div class=\"control\">\n          <label>Resource</label>\n          <rapid-select :value=${sync((x) => x.resource)} position=\"below\">\n            ${repeat(\n              (x) => x.resources,\n              html`\n                <rapid-option value=${(x) => x}>${(x) => x}</rapid-option>\n              `,\n            )}\n          </rapid-select>\n        </div>\n\n        <div class=\"control\">\n          <label>Severity</label>\n          <rapid-select :value=${sync((x) => x.severity)}>\n            <options-datasource\n              value-field=\"value\"\n              label-field=\"value\"\n              option-element=\"rapid-option\"\n              :data=${(_) => Object.values(Severity).map((value) => ({ value }))}\n            ></options-datasource>\n          </rapid-select>\n        </div>\n\n        <div class=\"control\">\n          <label>Update Type</label>\n          <rapid-multiselect\n            :selectedOptions=${(x) => x.updateType}\n            @selectionChange=${(x, c) => {\n              x.updateType = (c.event as CustomEvent).detail;\n            }}\n            search=\"false\"\n            all=\"false\"\n          >\n            <multiselect-datasource\n              value-field=\"value\"\n              label-field=\"value\"\n              :data=${() => Object.values(UpdateType).map((value) => ({ value, label: value }))}\n            ></multiselect-datasource>\n          </rapid-multiselect>\n        </div>\n      </div>\n\n      <div class=\"content-row\">\n        <div class=\"control\">\n          <rapid-text-field :value=${sync((x) => x.header)}>Header</rapid-text-field>\n        </div>\n\n        <div class=\"control\">\n          <rapid-text-field :value=${sync((x) => x.message)}>Message</rapid-text-field>\n        </div>\n      </div>\n\n      <div class=\"control\">\n        <label>Topic(s)</label>\n        ${when(\n          (x) => x.lockBroadcastTopics,\n          html`\n            <span class=\"topic-lock-hint\">\n              Broadcast topics cannot be used after this template was saved with multiple subscriber\n              routes. Delete it and create a new template instead.\n            </span>\n          `,\n        )}\n        ${when(\n          (x) => x.topicOptions.length > 0,\n          html<TemplateDialog>`\n            <rapid-multiselect\n              ${ref('topicsSelect')}\n              class=\"channel-topics\"\n              name=\"topics\"\n              :selectedOptions=${(x) => x.selectedRouteIds}\n              :options=${(x) => x.topicOptions}\n              @selectionChange=${(x, c) => x.onSelectedTopicsChange(c.event)}\n              search=\"true\"\n              all=\"false\"\n            ></rapid-multiselect>\n          `,\n        )}\n      </div>\n\n      <div class=\"control\">\n        <label>Parameter(s)</label>\n        <div class=\"items\">\n          <div class=\"content-row item\">\n            ${repeat(\n              (x) => x.userParameters,\n              html`\n                <parameter-builder\n                  :parameter=${(x) => x}\n                  @edit=${(x, c) => c.parent.editParameter(eventDetail(c))}\n                  @delete=${(x, c) => c.parent.deleteParameter(eventDetail(c))}\n                ></parameter-builder>\n              `,\n            )}\n          </div>\n\n          <div class=\"content-row\">\n            <rapid-button @click=${(x) => x.newParameter()}>+ Parameter</rapid-button>\n          </div>\n        </div>\n      </div>\n\n      ${alertSoundAttachmentTemplate}\n\n      <div class=\"control\">\n        <label>Condition(s)</label>\n        <div class=\"items\">\n          <div class=\"content-row item\">\n            ${repeat(\n              (x) => x.conditions,\n              html<ConditionNode, TemplateDialog>`\n                ${when(\n                  (x) => isGroup(x),\n                  html<ConditionNode>`\n                    <template-condition-group\n                      :fields=${(x, c) => c.parent.fields}\n                      :parameters=${(x, c) => c.parent.userParameters}\n                      :node=${(x) => x}\n                      :isFirst=${(x, c) => c.index === 0}\n                      @edit=${(x, c) => c.parent.editCondition(eventDetail(c))}\n                      @delete=${(x, c) => c.parent.deleteCondition(eventDetail(c))}\n                    ></template-condition-group>\n                  `,\n                )}\n                ${when(\n                  (x) => !isGroup(x),\n                  html<ConditionNode>`\n                    <template-condition-builder\n                      :fields=${(x, c) => c.parent.fields}\n                      :parameters=${(x, c) => c.parent.userParameters}\n                      :condition=${(x) => x}\n                      :isFirst=${(x, c) => c.index === 0}\n                      @edit=${(x, c) => c.parent.editCondition(eventDetail(c))}\n                      @delete=${(x, c) => c.parent.deleteCondition(eventDetail(c))}\n                    ></template-condition-builder>\n                  `,\n                )}\n              `,\n              { positioning: true },\n            )}\n          </div>\n\n          <div class=\"content-row\">\n            <rapid-button appearance=\"lightweight\" @click=${(x) => x.newCondition()}>\n              + Condition\n            </rapid-button>\n            <rapid-button appearance=\"lightweight\" @click=${(x) => x.newGroup()}>\n              + Group\n            </rapid-button>\n          </div>\n        </div>\n        <rapid-text-area\n          class=\"expression-preview\"\n          readonly\n          :value=${(x) => x.rawExpressionPreview}\n        >\n          Compiled expression\n        </rapid-text-area>\n      </div>\n    </div>\n\n    <div slot=\"bottom\" class=\"dialog-bottom\">\n      <rapid-button\n        appearance=\"primary\"\n        @click=${(x) => x.submit()}\n        ?disabled=${(x) => x.validateRequiredFields || x.missingTopic}\n      >\n        Submit\n      </rapid-button>\n    </div>\n  </rapid-modal>\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TemplateDialogTemplate",
+          "declaration": {
+            "name": "TemplateDialogTemplate",
+            "module": "src/components/foundation-notification-dashboard/components/templates/template-dialog/template-dialog.template.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/foundation-notification-dashboard/components/templates/template-dialog/template-dialog.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Dialog for creating or editing notification templates.",
+          "name": "TemplateDialog",
+          "members": [
+            {
+              "kind": "field",
+              "name": "templateService",
+              "type": {
+                "text": "TemplateService"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "systemService",
+              "type": {
+                "text": "SystemService"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "notifyService",
+              "type": {
+                "text": "NotifyService"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "ruleService",
+              "type": {
+                "text": "RuleService"
+              },
+              "inheritedFrom": {
+                "name": "AlertSoundAttachmentMixin",
+                "module": "src/components/foundation-notification-dashboard/alert-sound-attachment.ts"
+              }
+            },
+            {
               "kind": "field",
               "name": "dialog",
               "type": {
@@ -10421,242 +10421,28 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/foundation-notification-dashboard/components/templates/template-dialog/parameter-builder/parameter-builder.styles.ts",
+      "path": "src/components/foundation-notification-dashboard/components/templates/template-dialog/template-condition-group/template-condition-group.template.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "ParameterBuilderStyles",
-          "default": "css`\n  .parameter-builder {\n    display: flex;\n    gap: calc(var(--design-unit) * 2px);\n    margin-bottom: calc(var(--design-unit) * 2px);\n  }\n\n  rapid-button {\n    margin: 0;\n  }\n\n  .delete {\n    margin: 0;\n    display: flex;\n    justify-content: center;\n    height: calc(var(--design-unit) * 9px);\n  }\n\n  .delete:hover {\n    background-color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 89%);\n  }\n\n  rapid-text-field {\n    width: 100%;\n    margin-bottom: 0;\n  }\n\n  rapid-text-field::part(root) {\n    height: calc(var(--design-unit) * 9px);\n  }\n\n  rapid-select {\n    min-width: auto;\n  }\n\n  rapid-select.param-type::part(control) {\n    width: 115px;\n  }\n\n  rapid-select.param-source-type::part(control) {\n    width: 160px;\n  }\n\n  rapid-select.param-source::part(control) {\n    width: ${PARAM_SOURCE_WIDTH}px;\n  }\n\n  rapid-text-field.param-source::part(root) {\n    width: calc(${PARAM_SOURCE_WIDTH}px + 2px);\n  }\n\n  rapid-select::part(listbox) {\n    max-height: 160px;\n  }\n`"
+          "name": "TemplateConditionGroupTemplate",
+          "default": "html<TemplateConditionGroup>`\n  ${when(\n    (x) => !x.isFirst,\n    html`\n      <div class=\"join-toggle-row\">\n        <div class=\"join-toggle\">\n          <span\n            class=\"join-text${(x) => classNames(['active', x.joinOperator === 'AND'])}\"\n            @click=${(x) => (x.joinOperator = 'AND')}\n          >\n            AND\n          </span>\n          <span\n            class=\"join-text${(x) => classNames(['active', x.joinOperator === 'OR'])}\"\n            @click=${(x) => (x.joinOperator = 'OR')}\n          >\n            OR\n          </span>\n        </div>\n      </div>\n    `,\n  )}\n  <div class=\"condition-group-row\">\n    <div class=\"condition-group-box\">\n      ${repeat(\n        (x) => x.groupChildren,\n        html<ConditionNode, TemplateConditionGroup>`\n          ${when(\n            (x) => isGroup(x),\n            html<ConditionNode>`\n              <template-condition-group\n                :fields=${(x, c) => c.parent.fields}\n                :parameters=${(x, c) => c.parent.parameters}\n                :node=${(x) => x}\n                :isFirst=${(x, c) => c.index === 0}\n                @edit=${(x, c) => c.parent.editChild(eventDetail(c))}\n                @delete=${(x, c) => c.parent.deleteChild(eventDetail(c))}\n              ></template-condition-group>\n            `,\n          )}\n          ${when(\n            (x) => !isGroup(x),\n            html<ConditionNode>`\n              <template-condition-builder\n                :fields=${(x, c) => c.parent.fields}\n                :parameters=${(x, c) => c.parent.parameters}\n                :condition=${(x) => x}\n                :isFirst=${(x, c) => c.index === 0}\n                @edit=${(x, c) => c.parent.editChild(eventDetail(c))}\n                @delete=${(x, c) => c.parent.deleteChild(eventDetail(c))}\n              ></template-condition-builder>\n            `,\n          )}\n        `,\n        { positioning: true },\n      )}\n\n      <div class=\"content-row\">\n        <rapid-button appearance=\"lightweight\" @click=${(x) => x.newCondition()}>\n          + Condition\n        </rapid-button>\n        <rapid-button appearance=\"lightweight\" @click=${(x) => x.newGroup()}>+ Group</rapid-button>\n        <rapid-button appearance=\"icon\" class=\"delete-group\" @click=${(x) => x.deleteSelf()}>\n          <rapid-icon variant=\"regular\" name=\"trash-alt\" size=\"lg\" part=\"icon\"></rapid-icon>\n        </rapid-button>\n      </div>\n    </div>\n  </div>\n`"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ParameterBuilderStyles",
+          "name": "TemplateConditionGroupTemplate",
           "declaration": {
-            "name": "ParameterBuilderStyles",
-            "module": "src/components/foundation-notification-dashboard/components/templates/template-dialog/parameter-builder/parameter-builder.styles.ts"
+            "name": "TemplateConditionGroupTemplate",
+            "module": "src/components/foundation-notification-dashboard/components/templates/template-dialog/template-condition-group/template-condition-group.template.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/foundation-notification-dashboard/components/templates/template-dialog/parameter-builder/parameter-builder.template.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "ParameterBuilderTemplate",
-          "default": "html<ParameterBuilder>`\n  <div class=\"parameter-builder\">\n    <rapid-text-field\n      id=\"param-name\"\n      placeholder=\"Name\"\n      :value=${sync((x) => x.name)}\n    ></rapid-text-field>\n\n    <rapid-text-field\n      id=\"param-label\"\n      placeholder=\"Label\"\n      :value=${sync((x) => x.label)}\n    ></rapid-text-field>\n\n    <rapid-select\n      id=\"param-source-type\"\n      :value=${sync((x) => x.sourceType)}\n      class=\"param-source-type\"\n    >\n      ${repeat(\n        (x) => ALL_PARAM_SOURCE_TYPES,\n        html`\n          <rapid-option value=${(x) => x}>${(x) => x}</rapid-option>\n        `,\n      )}\n    </rapid-select>\n\n    ${when(\n      (x) => x.sourceType === PARAM_SOURCE_TYPE_USER_TEXT,\n      html<ParameterBuilder>`\n        <rapid-text-field class=\"param-source\" disabled></rapid-text-field>\n      `,\n    )}\n    ${when(\n      (x) => x.sourceType === PARAM_SOURCE_TYPE_REQ_REP,\n      html<ParameterBuilder>`\n        <rapid-select\n          ${ref('sourceSelect')}\n          id=\"param-source\"\n          :value=${sync((x) => x.sourceSelected)}\n          class=\"param-source\"\n          ?disabled=${(x) => x.sourceType !== PARAM_SOURCE_TYPE_REQ_REP}\n        >\n          ${repeat(\n            (x) => x.reqRepItems,\n            html`\n              <rapid-option value=${(x) => x}>${(x) => x}</rapid-option>\n            `,\n          )}\n        </rapid-select>\n      `,\n    )}\n    ${when(\n      (x) => x.sourceType === PARAM_SOURCE_TYPE_DEFINED_GROUP,\n      html<ParameterBuilder>`\n        <rapid-text-field\n          ${ref('sourceTextField')}\n          class=\"param-source\"\n          placeholder=\"item1,item2,item3\"\n          :value=${sync((x) => x.sourceTyped)}\n        ></rapid-text-field>\n      `,\n    )}\n\n    <rapid-select id=\"param-type\" :value=${sync((x) => x.type)} class=\"param-type\">\n      ${repeat(\n        (x) => ALL_PARAM_TYPES,\n        html`\n          <rapid-option value=${(x) => x}>${(x) => x}</rapid-option>\n        `,\n      )}\n    </rapid-select>\n\n    <rapid-button appearance=\"icon\" class=\"delete\" @click=${(x) => x.deleteParameter()}>\n      <rapid-icon\n        style=\"opacity: 0.5\"\n        variant=\"regular\"\n        name=\"trash-alt\"\n        size=\"lg\"\n        part=\"icon\"\n      ></rapid-icon>\n    </rapid-button>\n  </div>\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ParameterBuilderTemplate",
-          "declaration": {
-            "name": "ParameterBuilderTemplate",
-            "module": "src/components/foundation-notification-dashboard/components/templates/template-dialog/parameter-builder/parameter-builder.template.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/foundation-notification-dashboard/components/templates/template-dialog/parameter-builder/parameter-builder.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Parameter builder for notification templates.",
-          "name": "ParameterBuilder",
-          "members": [
-            {
-              "kind": "field",
-              "name": "parameter",
-              "type": {
-                "text": "ParameterBuilderEntity"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "sourceType",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "sourceSelected",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "sourceTyped",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "sourceTextField",
-              "type": {
-                "text": "TextField"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "sourceSelect",
-              "type": {
-                "text": "Select"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "reqRepItems",
-              "type": {
-                "text": "array"
-              },
-              "default": "['REQUEST_1', 'REQUEST_2', 'REQUEST_3']"
-            },
-            {
-              "kind": "method",
-              "name": "deleteParameter"
-            },
-            {
-              "kind": "method",
-              "name": "parameterChanged"
-            },
-            {
-              "kind": "method",
-              "name": "nameChanged"
-            },
-            {
-              "kind": "method",
-              "name": "labelChanged"
-            },
-            {
-              "kind": "method",
-              "name": "typeChanged"
-            },
-            {
-              "kind": "method",
-              "name": "sourceTypeChanged"
-            },
-            {
-              "kind": "method",
-              "name": "sourceSelectedChanged"
-            },
-            {
-              "kind": "method",
-              "name": "sourceTypedChanged"
-            },
-            {
-              "kind": "method",
-              "name": "genericChanged",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "parameterAttribute"
-                },
-                {
-                  "name": "value"
-                }
-              ]
-            }
-          ],
-          "events": [
-            {
-              "description": "Fired when a parameter is deleted. detail: `ParameterBuilderEntity`",
-              "name": "delete"
-            },
-            {
-              "description": "Fired when a parameter is edited. detail: `ParameterBuilderEntity`",
-              "name": "edit"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "parameter",
-              "type": {
-                "text": "ParameterBuilderEntity"
-              },
-              "fieldName": "parameter"
-            }
-          ],
-          "superclass": {
-            "name": "GenesisElement",
-            "package": "@genesislcap/web-core"
-          },
-          "tagName": "parameter-builder",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ParameterBuilder",
-          "declaration": {
-            "name": "ParameterBuilder",
-            "module": "src/components/foundation-notification-dashboard/components/templates/template-dialog/parameter-builder/parameter-builder.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "parameter-builder",
-          "declaration": {
-            "name": "ParameterBuilder",
-            "module": "src/components/foundation-notification-dashboard/components/templates/template-dialog/parameter-builder/parameter-builder.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/foundation-notification-dashboard/components/templates/template-dialog/template-condition-group/template-condition-group.template.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "TemplateConditionGroupTemplate",
-          "default": "html<TemplateConditionGroup>`\n  ${when(\n    (x) => !x.isFirst,\n    html`\n      <div class=\"join-toggle-row\">\n        <div class=\"join-toggle\">\n          <span\n            class=\"join-text${(x) => classNames(['active', x.joinOperator === 'AND'])}\"\n            @click=${(x) => (x.joinOperator = 'AND')}\n          >\n            AND\n          </span>\n          <span\n            class=\"join-text${(x) => classNames(['active', x.joinOperator === 'OR'])}\"\n            @click=${(x) => (x.joinOperator = 'OR')}\n          >\n            OR\n          </span>\n        </div>\n      </div>\n    `,\n  )}\n  <div class=\"condition-group-row\">\n    <div class=\"condition-group-box\">\n      ${repeat(\n        (x) => x.groupChildren,\n        html<ConditionNode, TemplateConditionGroup>`\n          ${when(\n            (x) => isGroup(x),\n            html<ConditionNode>`\n              <template-condition-group\n                :fields=${(x, c) => c.parent.fields}\n                :parameters=${(x, c) => c.parent.parameters}\n                :node=${(x) => x}\n                :isFirst=${(x, c) => c.index === 0}\n                @edit=${(x, c) => c.parent.editChild(eventDetail(c))}\n                @delete=${(x, c) => c.parent.deleteChild(eventDetail(c))}\n              ></template-condition-group>\n            `,\n          )}\n          ${when(\n            (x) => !isGroup(x),\n            html<ConditionNode>`\n              <template-condition-builder\n                :fields=${(x, c) => c.parent.fields}\n                :parameters=${(x, c) => c.parent.parameters}\n                :condition=${(x) => x}\n                :isFirst=${(x, c) => c.index === 0}\n                @edit=${(x, c) => c.parent.editChild(eventDetail(c))}\n                @delete=${(x, c) => c.parent.deleteChild(eventDetail(c))}\n              ></template-condition-builder>\n            `,\n          )}\n        `,\n        { positioning: true },\n      )}\n\n      <div class=\"content-row\">\n        <rapid-button appearance=\"lightweight\" @click=${(x) => x.newCondition()}>\n          + Condition\n        </rapid-button>\n        <rapid-button appearance=\"lightweight\" @click=${(x) => x.newGroup()}>+ Group</rapid-button>\n        <rapid-button appearance=\"icon\" class=\"delete-group\" @click=${(x) => x.deleteSelf()}>\n          <rapid-icon variant=\"regular\" name=\"trash-alt\" size=\"lg\" part=\"icon\"></rapid-icon>\n        </rapid-button>\n      </div>\n    </div>\n  </div>\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "TemplateConditionGroupTemplate",
-          "declaration": {
-            "name": "TemplateConditionGroupTemplate",
-            "module": "src/components/foundation-notification-dashboard/components/templates/template-dialog/template-condition-group/template-condition-group.template.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/foundation-notification-dashboard/components/templates/template-dialog/template-condition-group/template-condition-group.ts",
+      "path": "src/components/foundation-notification-dashboard/components/templates/template-dialog/template-condition-group/template-condition-group.ts",
       "declarations": [
         {
           "kind": "class",
@@ -11074,6 +10860,220 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/foundation-notification-dashboard/components/templates/template-dialog/parameter-builder/parameter-builder.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "ParameterBuilderStyles",
+          "default": "css`\n  .parameter-builder {\n    display: flex;\n    gap: calc(var(--design-unit) * 2px);\n    margin-bottom: calc(var(--design-unit) * 2px);\n  }\n\n  rapid-button {\n    margin: 0;\n  }\n\n  .delete {\n    margin: 0;\n    display: flex;\n    justify-content: center;\n    height: calc(var(--design-unit) * 9px);\n  }\n\n  .delete:hover {\n    background-color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 89%);\n  }\n\n  rapid-text-field {\n    width: 100%;\n    margin-bottom: 0;\n  }\n\n  rapid-text-field::part(root) {\n    height: calc(var(--design-unit) * 9px);\n  }\n\n  rapid-select {\n    min-width: auto;\n  }\n\n  rapid-select.param-type::part(control) {\n    width: 115px;\n  }\n\n  rapid-select.param-source-type::part(control) {\n    width: 160px;\n  }\n\n  rapid-select.param-source::part(control) {\n    width: ${PARAM_SOURCE_WIDTH}px;\n  }\n\n  rapid-text-field.param-source::part(root) {\n    width: calc(${PARAM_SOURCE_WIDTH}px + 2px);\n  }\n\n  rapid-select::part(listbox) {\n    max-height: 160px;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ParameterBuilderStyles",
+          "declaration": {
+            "name": "ParameterBuilderStyles",
+            "module": "src/components/foundation-notification-dashboard/components/templates/template-dialog/parameter-builder/parameter-builder.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/foundation-notification-dashboard/components/templates/template-dialog/parameter-builder/parameter-builder.template.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "ParameterBuilderTemplate",
+          "default": "html<ParameterBuilder>`\n  <div class=\"parameter-builder\">\n    <rapid-text-field\n      id=\"param-name\"\n      placeholder=\"Name\"\n      :value=${sync((x) => x.name)}\n    ></rapid-text-field>\n\n    <rapid-text-field\n      id=\"param-label\"\n      placeholder=\"Label\"\n      :value=${sync((x) => x.label)}\n    ></rapid-text-field>\n\n    <rapid-select\n      id=\"param-source-type\"\n      :value=${sync((x) => x.sourceType)}\n      class=\"param-source-type\"\n    >\n      ${repeat(\n        (x) => ALL_PARAM_SOURCE_TYPES,\n        html`\n          <rapid-option value=${(x) => x}>${(x) => x}</rapid-option>\n        `,\n      )}\n    </rapid-select>\n\n    ${when(\n      (x) => x.sourceType === PARAM_SOURCE_TYPE_USER_TEXT,\n      html<ParameterBuilder>`\n        <rapid-text-field class=\"param-source\" disabled></rapid-text-field>\n      `,\n    )}\n    ${when(\n      (x) => x.sourceType === PARAM_SOURCE_TYPE_REQ_REP,\n      html<ParameterBuilder>`\n        <rapid-select\n          ${ref('sourceSelect')}\n          id=\"param-source\"\n          :value=${sync((x) => x.sourceSelected)}\n          class=\"param-source\"\n          ?disabled=${(x) => x.sourceType !== PARAM_SOURCE_TYPE_REQ_REP}\n        >\n          ${repeat(\n            (x) => x.reqRepItems,\n            html`\n              <rapid-option value=${(x) => x}>${(x) => x}</rapid-option>\n            `,\n          )}\n        </rapid-select>\n      `,\n    )}\n    ${when(\n      (x) => x.sourceType === PARAM_SOURCE_TYPE_DEFINED_GROUP,\n      html<ParameterBuilder>`\n        <rapid-text-field\n          ${ref('sourceTextField')}\n          class=\"param-source\"\n          placeholder=\"item1,item2,item3\"\n          :value=${sync((x) => x.sourceTyped)}\n        ></rapid-text-field>\n      `,\n    )}\n\n    <rapid-select id=\"param-type\" :value=${sync((x) => x.type)} class=\"param-type\">\n      ${repeat(\n        (x) => ALL_PARAM_TYPES,\n        html`\n          <rapid-option value=${(x) => x}>${(x) => x}</rapid-option>\n        `,\n      )}\n    </rapid-select>\n\n    <rapid-button appearance=\"icon\" class=\"delete\" @click=${(x) => x.deleteParameter()}>\n      <rapid-icon\n        style=\"opacity: 0.5\"\n        variant=\"regular\"\n        name=\"trash-alt\"\n        size=\"lg\"\n        part=\"icon\"\n      ></rapid-icon>\n    </rapid-button>\n  </div>\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ParameterBuilderTemplate",
+          "declaration": {
+            "name": "ParameterBuilderTemplate",
+            "module": "src/components/foundation-notification-dashboard/components/templates/template-dialog/parameter-builder/parameter-builder.template.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/foundation-notification-dashboard/components/templates/template-dialog/parameter-builder/parameter-builder.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Parameter builder for notification templates.",
+          "name": "ParameterBuilder",
+          "members": [
+            {
+              "kind": "field",
+              "name": "parameter",
+              "type": {
+                "text": "ParameterBuilderEntity"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "sourceType",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "sourceSelected",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "sourceTyped",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "sourceTextField",
+              "type": {
+                "text": "TextField"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "sourceSelect",
+              "type": {
+                "text": "Select"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "reqRepItems",
+              "type": {
+                "text": "array"
+              },
+              "default": "['REQUEST_1', 'REQUEST_2', 'REQUEST_3']"
+            },
+            {
+              "kind": "method",
+              "name": "deleteParameter"
+            },
+            {
+              "kind": "method",
+              "name": "parameterChanged"
+            },
+            {
+              "kind": "method",
+              "name": "nameChanged"
+            },
+            {
+              "kind": "method",
+              "name": "labelChanged"
+            },
+            {
+              "kind": "method",
+              "name": "typeChanged"
+            },
+            {
+              "kind": "method",
+              "name": "sourceTypeChanged"
+            },
+            {
+              "kind": "method",
+              "name": "sourceSelectedChanged"
+            },
+            {
+              "kind": "method",
+              "name": "sourceTypedChanged"
+            },
+            {
+              "kind": "method",
+              "name": "genericChanged",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "parameterAttribute"
+                },
+                {
+                  "name": "value"
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "description": "Fired when a parameter is deleted. detail: `ParameterBuilderEntity`",
+              "name": "delete"
+            },
+            {
+              "description": "Fired when a parameter is edited. detail: `ParameterBuilderEntity`",
+              "name": "edit"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "parameter",
+              "type": {
+                "text": "ParameterBuilderEntity"
+              },
+              "fieldName": "parameter"
+            }
+          ],
+          "superclass": {
+            "name": "GenesisElement",
+            "package": "@genesislcap/web-core"
+          },
+          "tagName": "parameter-builder",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ParameterBuilder",
+          "declaration": {
+            "name": "ParameterBuilder",
+            "module": "src/components/foundation-notification-dashboard/components/templates/template-dialog/parameter-builder/parameter-builder.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "parameter-builder",
+          "declaration": {
+            "name": "ParameterBuilder",
+            "module": "src/components/foundation-notification-dashboard/components/templates/template-dialog/parameter-builder/parameter-builder.ts"
+          }
+        }
+      ]
     }
   ]
 }