@memberjunction/ng-dashboards 5.34.1 → 5.35.0

package/dist/Communication/communication-runs-resource.component.js

@@ -10,9 +10,10 @@ import { BaseResourceComponent } from '@memberjunction/ng-shared';
 import { RunView } from '@memberjunction/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
-function CommunicationRunsResourceComponent_For_29_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+import * as i2 from "@memberjunction/ng-ui-components";
+function CommunicationRunsResourceComponent_For_26_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵelement(1, "i", 26);
+    i0.ɵɵelement(1, "i", 23);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "date");
     i0.ɵɵelementEnd();
@@ -21,8 +22,8 @@ function CommunicationRunsResourceComponent_For_29_Conditional_16_Template(rf, c
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 1, run_r1.EndedAt, "shortTime"));
 } }
-function CommunicationRunsResourceComponent_For_29_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25);
+function CommunicationRunsResourceComponent_For_26_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -30,27 +31,27 @@ function CommunicationRunsResourceComponent_For_29_Conditional_17_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", run_r1.Comments, " ");
 } }
-function CommunicationRunsResourceComponent_For_29_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵelement(1, "div", 17);
-    i0.ɵɵelementStart(2, "div", 18)(3, "div", 19)(4, "span", 20);
+function CommunicationRunsResourceComponent_For_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵelement(1, "div", 14);
+    i0.ɵɵelementStart(2, "div", 15)(3, "div", 16)(4, "span", 17);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 21);
+    i0.ɵɵelementStart(6, "span", 18);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 22)(9, "span");
-    i0.ɵɵelement(10, "i", 23);
+    i0.ɵɵelementStart(8, "div", 19)(9, "span");
+    i0.ɵɵelement(10, "i", 20);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(12, "span");
-    i0.ɵɵelement(13, "i", 24);
+    i0.ɵɵelement(13, "i", 21);
     i0.ɵɵtext(14);
     i0.ɵɵpipe(15, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(16, CommunicationRunsResourceComponent_For_29_Conditional_16_Template, 4, 4, "span");
+    i0.ɵɵconditionalCreate(16, CommunicationRunsResourceComponent_For_26_Conditional_16_Template, 4, 4, "span");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(17, CommunicationRunsResourceComponent_For_29_Conditional_17_Template, 2, 1, "div", 25);
+    i0.ɵɵconditionalCreate(17, CommunicationRunsResourceComponent_For_26_Conditional_17_Template, 2, 1, "div", 22);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const run_r1 = ctx.$implicit;
@@ -72,9 +73,9 @@ function CommunicationRunsResourceComponent_For_29_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵconditional(run_r1.Comments ? 17 : -1);
 } }
-function CommunicationRunsResourceComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 16);
-    i0.ɵɵelement(1, "i", 3);
+function CommunicationRunsResourceComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13);
+    i0.ɵɵelement(1, "i", 24);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No communication runs found");
     i0.ɵɵelementEnd()();
@@ -178,42 +179,40 @@ let CommunicationRunsResourceComponent = class CommunicationRunsResourceComponen
         return 'fa-solid fa-play-circle';
     }
     static ɵfac = function CommunicationRunsResourceComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CommunicationRunsResourceComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CommunicationRunsResourceComponent, selectors: [["mj-communication-runs-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 31, vars: 6, consts: [[1, "runs-wrapper"], [1, "card"], [1, "card-header"], [1, "fa-solid", "fa-play-circle"], [1, "header-actions"], [1, "tb-btn", 3, "click"], [1, "fa-solid", "fa-rotate"], [1, "card-body", "no-padding"], [1, "runs-summary"], [1, "run-stat-card", "info"], [1, "run-stat-value"], [1, "run-stat-label"], [1, "run-stat-card", "success"], [1, "run-stat-card", "neutral"], [1, "run-timeline"], [1, "run-entry"], [1, "empty-state"], [1, "run-timeline-dot", 3, "ngClass"], [1, "run-entry-content"], [1, "run-entry-header"], [1, "run-entry-title"], [1, "run-status-badge", 3, "ngClass"], [1, "run-entry-meta"], [1, "fa-solid", "fa-user"], [1, "fa-solid", "fa-clock"], [1, "run-entry-comments"], [1, "fa-solid", "fa-flag-checkered"]], template: function CommunicationRunsResourceComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h3");
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CommunicationRunsResourceComponent, selectors: [["mj-communication-runs-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 28, vars: 7, consts: [["Title", "Runs", "Icon", "fa-solid fa-play-circle", "Subtitle", "Bulk communication run history"], ["actions", ""], ["mjButton", "", "variant", "secondary", "size", "sm", "title", "Refresh", 3, "click", "disabled"], [1, "fa-solid", "fa-rotate"], [1, "card"], [1, "runs-summary"], [1, "run-stat-card", "info"], [1, "run-stat-value"], [1, "run-stat-label"], [1, "run-stat-card", "success"], [1, "run-stat-card", "neutral"], [1, "run-timeline"], [1, "run-entry"], [1, "empty-state"], [1, "run-timeline-dot", 3, "ngClass"], [1, "run-entry-content"], [1, "run-entry-header"], [1, "run-entry-title"], [1, "run-status-badge", 3, "ngClass"], [1, "run-entry-meta"], [1, "fa-solid", "fa-user"], [1, "fa-solid", "fa-clock"], [1, "run-entry-comments"], [1, "fa-solid", "fa-flag-checkered"], [1, "fa-solid", "fa-play-circle"]], template: function CommunicationRunsResourceComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 0)(2, "div", 1)(3, "button", 2);
+            i0.ɵɵlistener("click", function CommunicationRunsResourceComponent_Template_button_click_3_listener() { return ctx.loadData(); });
             i0.ɵɵelement(4, "i", 3);
-            i0.ɵɵtext(5, " Bulk Communication Runs");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "div", 4)(7, "button", 5);
-            i0.ɵɵlistener("click", function CommunicationRunsResourceComponent_Template_button_click_7_listener() { return ctx.loadData(); });
-            i0.ɵɵelement(8, "i", 6);
-            i0.ɵɵtext(9, " Refresh ");
+            i0.ɵɵtext(5, " Refresh ");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(10, "div", 7)(11, "div", 8)(12, "div", 9)(13, "div", 10);
-            i0.ɵɵtext(14);
+            i0.ɵɵelementStart(6, "mj-page-body")(7, "div", 4)(8, "div", 5)(9, "div", 6)(10, "div", 7);
+            i0.ɵɵtext(11);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(15, "div", 11);
-            i0.ɵɵtext(16, "Active Runs");
+            i0.ɵɵelementStart(12, "div", 8);
+            i0.ɵɵtext(13, "Active Runs");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(17, "div", 12)(18, "div", 10);
-            i0.ɵɵtext(19);
+            i0.ɵɵelementStart(14, "div", 9)(15, "div", 7);
+            i0.ɵɵtext(16);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(20, "div", 11);
-            i0.ɵɵtext(21, "Completed (24h)");
+            i0.ɵɵelementStart(17, "div", 8);
+            i0.ɵɵtext(18, "Completed (24h)");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(22, "div", 13)(23, "div", 10);
-            i0.ɵɵtext(24);
+            i0.ɵɵelementStart(19, "div", 10)(20, "div", 7);
+            i0.ɵɵtext(21);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(25, "div", 11);
-            i0.ɵɵtext(26, "Success Rate");
+            i0.ɵɵelementStart(22, "div", 8);
+            i0.ɵɵtext(23, "Success Rate");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(27, "div", 14);
-            i0.ɵɵrepeaterCreate(28, CommunicationRunsResourceComponent_For_29_Template, 18, 11, "div", 15, i0.ɵɵrepeaterTrackByIdentity);
-            i0.ɵɵconditionalCreate(30, CommunicationRunsResourceComponent_Conditional_30_Template, 4, 0, "div", 16);
+            i0.ɵɵelementStart(24, "div", 11);
+            i0.ɵɵrepeaterCreate(25, CommunicationRunsResourceComponent_For_26_Template, 18, 11, "div", 12, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵconditionalCreate(27, CommunicationRunsResourceComponent_Conditional_27_Template, 4, 0, "div", 13);
             i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
-            i0.ɵɵadvance(8);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("disabled", ctx.isLoading);
+            i0.ɵɵadvance();
             i0.ɵɵclassProp("spinning", ctx.isLoading);
-            i0.ɵɵadvance(6);
+            i0.ɵɵadvance(7);
             i0.ɵɵtextInterpolate(ctx.summary.active);
             i0.ɵɵadvance(5);
             i0.ɵɵtextInterpolate(ctx.summary.completed);
@@ -222,8 +221,8 @@ let CommunicationRunsResourceComponent = class CommunicationRunsResourceComponen
             i0.ɵɵadvance(4);
             i0.ɵɵrepeater(ctx.runs);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.runs.length === 0 && !ctx.isLoading ? 30 : -1);
-        } }, dependencies: [i1.NgClass, i1.DatePipe], styles: [".runs-wrapper[_ngcontent-%COMP%] {\n        height: 100%;\n        padding: 24px;\n        overflow-y: auto;\n        background: var(--mj-bg-surface);\n    }\n    .card[_ngcontent-%COMP%] {\n        background: var(--mj-bg-surface-card);\n        border: 1px solid var(--mj-border-default);\n        border-radius: 12px;\n        overflow: hidden;\n    }\n    .card-header[_ngcontent-%COMP%] {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 16px 20px 12px;\n        border-bottom: 1px solid var(--mj-border-default);\n    }\n    .card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n        font-size: 13px; font-weight: 700;\n        color: var(--mj-text-primary);\n        display: flex; align-items: center; gap: 8px;\n        margin: 0;\n    }\n    .card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n        color: var(--mj-text-muted); font-size: 12px;\n    }\n    .header-actions[_ngcontent-%COMP%] { display: flex; gap: 8px; }\n\n    .tb-btn[_ngcontent-%COMP%] {\n        display: inline-flex; align-items: center;\n        gap: 6px; padding: 6px 12px;\n        border: 1px solid var(--mj-border-default);\n        border-radius: 4px;\n        background: var(--mj-bg-surface-card);\n        color: var(--mj-text-secondary);\n        font-size: 12px; font-weight: 500;\n        cursor: pointer; transition: all 0.15s ease;\n        font-family: inherit;\n    }\n    .tb-btn[_ngcontent-%COMP%]:hover {\n        background: var(--mj-bg-surface-sunken);\n        border-color: var(--mj-border-strong);\n        color: var(--mj-text-primary);\n    }\n    .tb-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 12px; }\n\n    @keyframes _ngcontent-%COMP%_spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n    .spinning[_ngcontent-%COMP%] { animation: _ngcontent-%COMP%_spin 1s linear infinite; }\n\n    .card-body.no-padding[_ngcontent-%COMP%] { padding: 0; }\n\n    \n\n    .runs-summary[_ngcontent-%COMP%] {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 16px;\n        padding: 20px;\n    }\n    .run-stat-card[_ngcontent-%COMP%] {\n        border-radius: 12px;\n        padding: 16px 20px;\n        text-align: center;\n    }\n    .run-stat-card.info[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    }\n    .run-stat-card.success[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    }\n    .run-stat-card.neutral[_ngcontent-%COMP%] {\n        background: var(--mj-bg-surface-sunken);\n        border: 1px solid var(--mj-border-default);\n    }\n\n    .run-stat-value[_ngcontent-%COMP%] {\n        font-size: 24px; font-weight: 800;\n        color: var(--mj-text-primary);\n    }\n    .run-stat-card.info[_ngcontent-%COMP%]   .run-stat-value[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n    .run-stat-card.success[_ngcontent-%COMP%]   .run-stat-value[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n\n    .run-stat-label[_ngcontent-%COMP%] {\n        font-size: 11px; font-weight: 600;\n        text-transform: uppercase; letter-spacing: 0.5px;\n        color: var(--mj-text-muted);\n        margin-top: 2px;\n    }\n\n    \n\n    .run-timeline[_ngcontent-%COMP%] { padding: 8px 20px 20px; }\n    .run-entry[_ngcontent-%COMP%] {\n        display: flex; gap: 16px;\n        padding: 16px 0;\n        border-bottom: 1px solid var(--mj-border-default);\n        align-items: flex-start;\n    }\n    .run-entry[_ngcontent-%COMP%]:last-child { border-bottom: none; }\n\n    .run-timeline-dot[_ngcontent-%COMP%] {\n        width: 12px; height: 12px;\n        border-radius: 50%;\n        margin-top: 4px; flex-shrink: 0;\n    }\n    .run-timeline-dot.complete[_ngcontent-%COMP%] { background: var(--mj-status-success); }\n    .run-timeline-dot.failed[_ngcontent-%COMP%] { background: var(--mj-status-error); }\n    .run-timeline-dot.in-progress[_ngcontent-%COMP%] {\n        background: var(--mj-brand-primary);\n        animation: _ngcontent-%COMP%_pulse-dot 1.5s ease-in-out infinite;\n    }\n    .run-timeline-dot.pending[_ngcontent-%COMP%] { background: var(--mj-status-warning); }\n\n    @keyframes _ngcontent-%COMP%_pulse-dot {\n        0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-brand-primary) 40%, transparent); }\n        50% { box-shadow: 0 0 0 6px transparent; }\n    }\n\n    .run-entry-content[_ngcontent-%COMP%] { flex: 1; }\n    .run-entry-header[_ngcontent-%COMP%] {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n    .run-entry-title[_ngcontent-%COMP%] {\n        font-size: 13px; font-weight: 600;\n        color: var(--mj-text-primary);\n    }\n    .run-status-badge[_ngcontent-%COMP%] {\n        font-size: 10px; font-weight: 700;\n        text-transform: uppercase; letter-spacing: 0.3px;\n        padding: 3px 8px;\n        border-radius: 4px;\n    }\n    .run-status-badge.complete[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n        border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    }\n    .run-status-badge.failed[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n        border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n    }\n    .run-status-badge.pending[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-warning);\n        border: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n    }\n    .run-status-badge.in-progress[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n        border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    }\n\n    .run-entry-meta[_ngcontent-%COMP%] {\n        font-size: 11px;\n        color: var(--mj-text-muted);\n        margin-top: 4px;\n        display: flex; align-items: center; gap: 12px;\n    }\n    .run-entry-meta[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n        display: flex; align-items: center; gap: 4px;\n    }\n    .run-entry-meta[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 10px; }\n\n    .run-entry-comments[_ngcontent-%COMP%] {\n        font-size: 12px;\n        color: var(--mj-text-muted);\n        margin-top: 6px;\n        font-style: italic;\n    }\n\n    \n\n    .empty-state[_ngcontent-%COMP%] {\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 48px 0; color: var(--mj-text-muted);\n    }\n    .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 2rem; margin-bottom: 12px; opacity: 0.5; }\n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] { margin: 0; font-size: 13px; }"] });
+            i0.ɵɵconditional(ctx.runs.length === 0 && !ctx.isLoading ? 27 : -1);
+        } }, dependencies: [i1.NgClass, i2.MJButtonDirective, i2.MJPageHeaderComponent, i2.MJPageLayoutComponent, i2.MJPageBodyComponent, i1.DatePipe], styles: [".card[_ngcontent-%COMP%] {\n        background: var(--mj-bg-surface-card);\n        border: 1px solid var(--mj-border-default);\n        border-radius: 12px;\n        overflow: hidden;\n        padding: 16px 0 0;\n    }\n    @keyframes _ngcontent-%COMP%_spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n    .spinning[_ngcontent-%COMP%] { animation: _ngcontent-%COMP%_spin 1s linear infinite; }\n\n    \n\n    .runs-summary[_ngcontent-%COMP%] {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 16px;\n        padding: 20px;\n    }\n    .run-stat-card[_ngcontent-%COMP%] {\n        border-radius: 12px;\n        padding: 16px 20px;\n        text-align: center;\n    }\n    .run-stat-card.info[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    }\n    .run-stat-card.success[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    }\n    .run-stat-card.neutral[_ngcontent-%COMP%] {\n        background: var(--mj-bg-surface-sunken);\n        border: 1px solid var(--mj-border-default);\n    }\n\n    .run-stat-value[_ngcontent-%COMP%] {\n        font-size: 24px; font-weight: 800;\n        color: var(--mj-text-primary);\n    }\n    .run-stat-card.info[_ngcontent-%COMP%]   .run-stat-value[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n    .run-stat-card.success[_ngcontent-%COMP%]   .run-stat-value[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n\n    .run-stat-label[_ngcontent-%COMP%] {\n        font-size: 11px; font-weight: 600;\n        text-transform: uppercase; letter-spacing: 0.5px;\n        color: var(--mj-text-muted);\n        margin-top: 2px;\n    }\n\n    \n\n    .run-timeline[_ngcontent-%COMP%] { padding: 8px 20px 20px; }\n    .run-entry[_ngcontent-%COMP%] {\n        display: flex; gap: 16px;\n        padding: 16px 0;\n        border-bottom: 1px solid var(--mj-border-default);\n        align-items: flex-start;\n    }\n    .run-entry[_ngcontent-%COMP%]:last-child { border-bottom: none; }\n\n    .run-timeline-dot[_ngcontent-%COMP%] {\n        width: 12px; height: 12px;\n        border-radius: 50%;\n        margin-top: 4px; flex-shrink: 0;\n    }\n    .run-timeline-dot.complete[_ngcontent-%COMP%] { background: var(--mj-status-success); }\n    .run-timeline-dot.failed[_ngcontent-%COMP%] { background: var(--mj-status-error); }\n    .run-timeline-dot.in-progress[_ngcontent-%COMP%] {\n        background: var(--mj-brand-primary);\n        animation: _ngcontent-%COMP%_pulse-dot 1.5s ease-in-out infinite;\n    }\n    .run-timeline-dot.pending[_ngcontent-%COMP%] { background: var(--mj-status-warning); }\n\n    @keyframes _ngcontent-%COMP%_pulse-dot {\n        0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-brand-primary) 40%, transparent); }\n        50% { box-shadow: 0 0 0 6px transparent; }\n    }\n\n    .run-entry-content[_ngcontent-%COMP%] { flex: 1; }\n    .run-entry-header[_ngcontent-%COMP%] {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n    .run-entry-title[_ngcontent-%COMP%] {\n        font-size: 13px; font-weight: 600;\n        color: var(--mj-text-primary);\n    }\n    .run-status-badge[_ngcontent-%COMP%] {\n        font-size: 10px; font-weight: 700;\n        text-transform: uppercase; letter-spacing: 0.3px;\n        padding: 3px 8px;\n        border-radius: 4px;\n    }\n    .run-status-badge.complete[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n        border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    }\n    .run-status-badge.failed[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n        border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n    }\n    .run-status-badge.pending[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-warning);\n        border: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n    }\n    .run-status-badge.in-progress[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n        border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    }\n\n    .run-entry-meta[_ngcontent-%COMP%] {\n        font-size: 11px;\n        color: var(--mj-text-muted);\n        margin-top: 4px;\n        display: flex; align-items: center; gap: 12px;\n    }\n    .run-entry-meta[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n        display: flex; align-items: center; gap: 4px;\n    }\n    .run-entry-meta[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 10px; }\n\n    .run-entry-comments[_ngcontent-%COMP%] {\n        font-size: 12px;\n        color: var(--mj-text-muted);\n        margin-top: 6px;\n        font-style: italic;\n    }\n\n    \n\n    .empty-state[_ngcontent-%COMP%] {\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 48px 0; color: var(--mj-text-muted);\n    }\n    .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 2rem; margin-bottom: 12px; opacity: 0.5; }\n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] { margin: 0; font-size: 13px; }"] });
 };
 CommunicationRunsResourceComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'CommunicationRunsResource')
@@ -232,17 +231,20 @@ export { CommunicationRunsResourceComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CommunicationRunsResourceComponent, [{
         type: Component,
         args: [{ standalone: false, selector: 'mj-communication-runs-resource', template: `
-    <div class="runs-wrapper">
-      <div class="card">
-        <div class="card-header">
-          <h3><i class="fa-solid fa-play-circle"></i> Bulk Communication Runs</h3>
-          <div class="header-actions">
-            <button class="tb-btn" (click)="loadData()">
-              <i class="fa-solid fa-rotate" [class.spinning]="isLoading"></i> Refresh
-            </button>
-          </div>
+    <mj-page-layout>
+      <mj-page-header
+        Title="Runs"
+        Icon="fa-solid fa-play-circle"
+        Subtitle="Bulk communication run history">
+        <div actions>
+          <button mjButton variant="secondary" size="sm" (click)="loadData()" [disabled]="isLoading" title="Refresh">
+            <i class="fa-solid fa-rotate" [class.spinning]="isLoading"></i> Refresh
+          </button>
         </div>
-        <div class="card-body no-padding">
+      </mj-page-header>
+
+      <mj-page-body>
+        <div class="card">
           <!-- SUMMARY STATS -->
           <div class="runs-summary">
             <div class="run-stat-card info">
@@ -295,9 +297,9 @@ export { CommunicationRunsResourceComponent };
             }
           </div>
         </div>
-      </div>
-    </div>
-    `, styles: ["\n    .runs-wrapper {\n        height: 100%;\n        padding: 24px;\n        overflow-y: auto;\n        background: var(--mj-bg-surface);\n    }\n    .card {\n        background: var(--mj-bg-surface-card);\n        border: 1px solid var(--mj-border-default);\n        border-radius: 12px;\n        overflow: hidden;\n    }\n    .card-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 16px 20px 12px;\n        border-bottom: 1px solid var(--mj-border-default);\n    }\n    .card-header h3 {\n        font-size: 13px; font-weight: 700;\n        color: var(--mj-text-primary);\n        display: flex; align-items: center; gap: 8px;\n        margin: 0;\n    }\n    .card-header h3 i {\n        color: var(--mj-text-muted); font-size: 12px;\n    }\n    .header-actions { display: flex; gap: 8px; }\n\n    .tb-btn {\n        display: inline-flex; align-items: center;\n        gap: 6px; padding: 6px 12px;\n        border: 1px solid var(--mj-border-default);\n        border-radius: 4px;\n        background: var(--mj-bg-surface-card);\n        color: var(--mj-text-secondary);\n        font-size: 12px; font-weight: 500;\n        cursor: pointer; transition: all 0.15s ease;\n        font-family: inherit;\n    }\n    .tb-btn:hover {\n        background: var(--mj-bg-surface-sunken);\n        border-color: var(--mj-border-strong);\n        color: var(--mj-text-primary);\n    }\n    .tb-btn i { font-size: 12px; }\n\n    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n    .spinning { animation: spin 1s linear infinite; }\n\n    .card-body.no-padding { padding: 0; }\n\n    /* SUMMARY */\n    .runs-summary {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 16px;\n        padding: 20px;\n    }\n    .run-stat-card {\n        border-radius: 12px;\n        padding: 16px 20px;\n        text-align: center;\n    }\n    .run-stat-card.info {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    }\n    .run-stat-card.success {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    }\n    .run-stat-card.neutral {\n        background: var(--mj-bg-surface-sunken);\n        border: 1px solid var(--mj-border-default);\n    }\n\n    .run-stat-value {\n        font-size: 24px; font-weight: 800;\n        color: var(--mj-text-primary);\n    }\n    .run-stat-card.info .run-stat-value { color: var(--mj-brand-primary); }\n    .run-stat-card.success .run-stat-value { color: var(--mj-status-success); }\n\n    .run-stat-label {\n        font-size: 11px; font-weight: 600;\n        text-transform: uppercase; letter-spacing: 0.5px;\n        color: var(--mj-text-muted);\n        margin-top: 2px;\n    }\n\n    /* TIMELINE */\n    .run-timeline { padding: 8px 20px 20px; }\n    .run-entry {\n        display: flex; gap: 16px;\n        padding: 16px 0;\n        border-bottom: 1px solid var(--mj-border-default);\n        align-items: flex-start;\n    }\n    .run-entry:last-child { border-bottom: none; }\n\n    .run-timeline-dot {\n        width: 12px; height: 12px;\n        border-radius: 50%;\n        margin-top: 4px; flex-shrink: 0;\n    }\n    .run-timeline-dot.complete { background: var(--mj-status-success); }\n    .run-timeline-dot.failed { background: var(--mj-status-error); }\n    .run-timeline-dot.in-progress {\n        background: var(--mj-brand-primary);\n        animation: pulse-dot 1.5s ease-in-out infinite;\n    }\n    .run-timeline-dot.pending { background: var(--mj-status-warning); }\n\n    @keyframes pulse-dot {\n        0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-brand-primary) 40%, transparent); }\n        50% { box-shadow: 0 0 0 6px transparent; }\n    }\n\n    .run-entry-content { flex: 1; }\n    .run-entry-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n    .run-entry-title {\n        font-size: 13px; font-weight: 600;\n        color: var(--mj-text-primary);\n    }\n    .run-status-badge {\n        font-size: 10px; font-weight: 700;\n        text-transform: uppercase; letter-spacing: 0.3px;\n        padding: 3px 8px;\n        border-radius: 4px;\n    }\n    .run-status-badge.complete {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n        border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    }\n    .run-status-badge.failed {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n        border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n    }\n    .run-status-badge.pending {\n        background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-warning);\n        border: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n    }\n    .run-status-badge.in-progress {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n        border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    }\n\n    .run-entry-meta {\n        font-size: 11px;\n        color: var(--mj-text-muted);\n        margin-top: 4px;\n        display: flex; align-items: center; gap: 12px;\n    }\n    .run-entry-meta span {\n        display: flex; align-items: center; gap: 4px;\n    }\n    .run-entry-meta i { font-size: 10px; }\n\n    .run-entry-comments {\n        font-size: 12px;\n        color: var(--mj-text-muted);\n        margin-top: 6px;\n        font-style: italic;\n    }\n\n    /* EMPTY STATE */\n    .empty-state {\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 48px 0; color: var(--mj-text-muted);\n    }\n    .empty-state i { font-size: 2rem; margin-bottom: 12px; opacity: 0.5; }\n    .empty-state p { margin: 0; font-size: 13px; }\n  "] }]
+      </mj-page-body>
+    </mj-page-layout>
+    `, styles: ["\n    .card {\n        background: var(--mj-bg-surface-card);\n        border: 1px solid var(--mj-border-default);\n        border-radius: 12px;\n        overflow: hidden;\n        padding: 16px 0 0;\n    }\n    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n    .spinning { animation: spin 1s linear infinite; }\n\n    /* SUMMARY */\n    .runs-summary {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 16px;\n        padding: 20px;\n    }\n    .run-stat-card {\n        border-radius: 12px;\n        padding: 16px 20px;\n        text-align: center;\n    }\n    .run-stat-card.info {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    }\n    .run-stat-card.success {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    }\n    .run-stat-card.neutral {\n        background: var(--mj-bg-surface-sunken);\n        border: 1px solid var(--mj-border-default);\n    }\n\n    .run-stat-value {\n        font-size: 24px; font-weight: 800;\n        color: var(--mj-text-primary);\n    }\n    .run-stat-card.info .run-stat-value { color: var(--mj-brand-primary); }\n    .run-stat-card.success .run-stat-value { color: var(--mj-status-success); }\n\n    .run-stat-label {\n        font-size: 11px; font-weight: 600;\n        text-transform: uppercase; letter-spacing: 0.5px;\n        color: var(--mj-text-muted);\n        margin-top: 2px;\n    }\n\n    /* TIMELINE */\n    .run-timeline { padding: 8px 20px 20px; }\n    .run-entry {\n        display: flex; gap: 16px;\n        padding: 16px 0;\n        border-bottom: 1px solid var(--mj-border-default);\n        align-items: flex-start;\n    }\n    .run-entry:last-child { border-bottom: none; }\n\n    .run-timeline-dot {\n        width: 12px; height: 12px;\n        border-radius: 50%;\n        margin-top: 4px; flex-shrink: 0;\n    }\n    .run-timeline-dot.complete { background: var(--mj-status-success); }\n    .run-timeline-dot.failed { background: var(--mj-status-error); }\n    .run-timeline-dot.in-progress {\n        background: var(--mj-brand-primary);\n        animation: pulse-dot 1.5s ease-in-out infinite;\n    }\n    .run-timeline-dot.pending { background: var(--mj-status-warning); }\n\n    @keyframes pulse-dot {\n        0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-brand-primary) 40%, transparent); }\n        50% { box-shadow: 0 0 0 6px transparent; }\n    }\n\n    .run-entry-content { flex: 1; }\n    .run-entry-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n    .run-entry-title {\n        font-size: 13px; font-weight: 600;\n        color: var(--mj-text-primary);\n    }\n    .run-status-badge {\n        font-size: 10px; font-weight: 700;\n        text-transform: uppercase; letter-spacing: 0.3px;\n        padding: 3px 8px;\n        border-radius: 4px;\n    }\n    .run-status-badge.complete {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n        border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    }\n    .run-status-badge.failed {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n        border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n    }\n    .run-status-badge.pending {\n        background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-warning);\n        border: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n    }\n    .run-status-badge.in-progress {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n        border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    }\n\n    .run-entry-meta {\n        font-size: 11px;\n        color: var(--mj-text-muted);\n        margin-top: 4px;\n        display: flex; align-items: center; gap: 12px;\n    }\n    .run-entry-meta span {\n        display: flex; align-items: center; gap: 4px;\n    }\n    .run-entry-meta i { font-size: 10px; }\n\n    .run-entry-comments {\n        font-size: 12px;\n        color: var(--mj-text-muted);\n        margin-top: 6px;\n        font-style: italic;\n    }\n\n    /* EMPTY STATE */\n    .empty-state {\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 48px 0; color: var(--mj-text-muted);\n    }\n    .empty-state i { font-size: 2rem; margin-bottom: 12px; opacity: 0.5; }\n    .empty-state p { margin: 0; font-size: 13px; }\n  "] }]
     }], () => [{ type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationRunsResourceComponent, { className: "CommunicationRunsResourceComponent", filePath: "src/Communication/communication-runs-resource.component.ts", lineNumber: 263 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationRunsResourceComponent, { className: "CommunicationRunsResourceComponent", filePath: "src/Communication/communication-runs-resource.component.ts", lineNumber: 223 }); })();
 //# sourceMappingURL=communication-runs-resource.component.js.map

package/dist/Communication/communication-runs-resource.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"communication-runs-resource.component.js","sourceRoot":"","sources":["../../src/Communication/communication-runs-resource.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';\nimport { ResourceData, MJCommunicationRunEntity } from '@memberjunction/core-entities';\nimport { RegisterClass } from '@memberjunction/global';\nimport { BaseResourceComponent } from '@memberjunction/ng-shared';\nimport { RunView } from '@memberjunction/core';\n@RegisterClass(BaseResourceComponent, 'CommunicationRunsResource')\n@Component({\n  standalone: false,\n    selector: 'mj-communication-runs-resource',\n    template: `\n    <div class=\"runs-wrapper\">\n      <div class=\"card\">\n        <div class=\"card-header\">\n          <h3><i class=\"fa-solid fa-play-circle\"></i> Bulk Communication Runs</h3>\n          <div class=\"header-actions\">\n            <button class=\"tb-btn\" (click)=\"loadData()\">\n              <i class=\"fa-solid fa-rotate\" [class.spinning]=\"isLoading\"></i> Refresh\n            </button>\n          </div>\n        </div>\n        <div class=\"card-body no-padding\">\n          <!-- SUMMARY STATS -->\n          <div class=\"runs-summary\">\n            <div class=\"run-stat-card info\">\n              <div class=\"run-stat-value\">{{summary.active}}</div>\n              <div class=\"run-stat-label\">Active Runs</div>\n            </div>\n            <div class=\"run-stat-card success\">\n              <div class=\"run-stat-value\">{{summary.completed}}</div>\n              <div class=\"run-stat-label\">Completed (24h)</div>\n            </div>\n            <div class=\"run-stat-card neutral\">\n              <div class=\"run-stat-value\">{{summary.successRate}}%</div>\n              <div class=\"run-stat-label\">Success Rate</div>\n            </div>\n          </div>\n    \n          <!-- TIMELINE -->\n          <div class=\"run-timeline\">\n            @for (run of runs; track run) {\n              <div class=\"run-entry\">\n                <div class=\"run-timeline-dot\" [ngClass]=\"getRunDotClass(run.Status)\"></div>\n                <div class=\"run-entry-content\">\n                  <div class=\"run-entry-header\">\n                    <span class=\"run-entry-title\">Run #{{run.ID.substring(0, 8)}}</span>\n                    <span class=\"run-status-badge\" [ngClass]=\"getStatusClass(run.Status)\">\n                      {{run.Status}}\n                    </span>\n                  </div>\n                  <div class=\"run-entry-meta\">\n                    <span><i class=\"fa-solid fa-user\"></i> {{run.User || 'System'}}</span>\n                    <span><i class=\"fa-solid fa-clock\"></i> {{run.StartedAt | date:'medium'}}</span>\n                    @if (run.EndedAt) {\n                      <span><i class=\"fa-solid fa-flag-checkered\"></i> {{run.EndedAt | date:'shortTime'}}</span>\n                    }\n                  </div>\n                  @if (run.Comments) {\n                    <div class=\"run-entry-comments\">\n                      {{run.Comments}}\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n    \n            @if (runs.length === 0 && !isLoading) {\n              <div class=\"empty-state\">\n                <i class=\"fa-solid fa-play-circle\"></i>\n                <p>No communication runs found</p>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    `,\n    styles: [`\n    .runs-wrapper {\n        height: 100%;\n        padding: 24px;\n        overflow-y: auto;\n        background: var(--mj-bg-surface);\n    }\n    .card {\n        background: var(--mj-bg-surface-card);\n        border: 1px solid var(--mj-border-default);\n        border-radius: 12px;\n        overflow: hidden;\n    }\n    .card-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 16px 20px 12px;\n        border-bottom: 1px solid var(--mj-border-default);\n    }\n    .card-header h3 {\n        font-size: 13px; font-weight: 700;\n        color: var(--mj-text-primary);\n        display: flex; align-items: center; gap: 8px;\n        margin: 0;\n    }\n    .card-header h3 i {\n        color: var(--mj-text-muted); font-size: 12px;\n    }\n    .header-actions { display: flex; gap: 8px; }\n\n    .tb-btn {\n        display: inline-flex; align-items: center;\n        gap: 6px; padding: 6px 12px;\n        border: 1px solid var(--mj-border-default);\n        border-radius: 4px;\n        background: var(--mj-bg-surface-card);\n        color: var(--mj-text-secondary);\n        font-size: 12px; font-weight: 500;\n        cursor: pointer; transition: all 0.15s ease;\n        font-family: inherit;\n    }\n    .tb-btn:hover {\n        background: var(--mj-bg-surface-sunken);\n        border-color: var(--mj-border-strong);\n        color: var(--mj-text-primary);\n    }\n    .tb-btn i { font-size: 12px; }\n\n    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n    .spinning { animation: spin 1s linear infinite; }\n\n    .card-body.no-padding { padding: 0; }\n\n    /* SUMMARY */\n    .runs-summary {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 16px;\n        padding: 20px;\n    }\n    .run-stat-card {\n        border-radius: 12px;\n        padding: 16px 20px;\n        text-align: center;\n    }\n    .run-stat-card.info {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    }\n    .run-stat-card.success {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    }\n    .run-stat-card.neutral {\n        background: var(--mj-bg-surface-sunken);\n        border: 1px solid var(--mj-border-default);\n    }\n\n    .run-stat-value {\n        font-size: 24px; font-weight: 800;\n        color: var(--mj-text-primary);\n    }\n    .run-stat-card.info .run-stat-value { color: var(--mj-brand-primary); }\n    .run-stat-card.success .run-stat-value { color: var(--mj-status-success); }\n\n    .run-stat-label {\n        font-size: 11px; font-weight: 600;\n        text-transform: uppercase; letter-spacing: 0.5px;\n        color: var(--mj-text-muted);\n        margin-top: 2px;\n    }\n\n    /* TIMELINE */\n    .run-timeline { padding: 8px 20px 20px; }\n    .run-entry {\n        display: flex; gap: 16px;\n        padding: 16px 0;\n        border-bottom: 1px solid var(--mj-border-default);\n        align-items: flex-start;\n    }\n    .run-entry:last-child { border-bottom: none; }\n\n    .run-timeline-dot {\n        width: 12px; height: 12px;\n        border-radius: 50%;\n        margin-top: 4px; flex-shrink: 0;\n    }\n    .run-timeline-dot.complete { background: var(--mj-status-success); }\n    .run-timeline-dot.failed { background: var(--mj-status-error); }\n    .run-timeline-dot.in-progress {\n        background: var(--mj-brand-primary);\n        animation: pulse-dot 1.5s ease-in-out infinite;\n    }\n    .run-timeline-dot.pending { background: var(--mj-status-warning); }\n\n    @keyframes pulse-dot {\n        0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-brand-primary) 40%, transparent); }\n        50% { box-shadow: 0 0 0 6px transparent; }\n    }\n\n    .run-entry-content { flex: 1; }\n    .run-entry-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n    .run-entry-title {\n        font-size: 13px; font-weight: 600;\n        color: var(--mj-text-primary);\n    }\n    .run-status-badge {\n        font-size: 10px; font-weight: 700;\n        text-transform: uppercase; letter-spacing: 0.3px;\n        padding: 3px 8px;\n        border-radius: 4px;\n    }\n    .run-status-badge.complete {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n        border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    }\n    .run-status-badge.failed {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n        border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n    }\n    .run-status-badge.pending {\n        background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-warning);\n        border: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n    }\n    .run-status-badge.in-progress {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n        border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    }\n\n    .run-entry-meta {\n        font-size: 11px;\n        color: var(--mj-text-muted);\n        margin-top: 4px;\n        display: flex; align-items: center; gap: 12px;\n    }\n    .run-entry-meta span {\n        display: flex; align-items: center; gap: 4px;\n    }\n    .run-entry-meta i { font-size: 10px; }\n\n    .run-entry-comments {\n        font-size: 12px;\n        color: var(--mj-text-muted);\n        margin-top: 6px;\n        font-style: italic;\n    }\n\n    /* EMPTY STATE */\n    .empty-state {\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 48px 0; color: var(--mj-text-muted);\n    }\n    .empty-state i { font-size: 2rem; margin-bottom: 12px; opacity: 0.5; }\n    .empty-state p { margin: 0; font-size: 13px; }\n  `]\n})\nexport class CommunicationRunsResourceComponent extends BaseResourceComponent implements OnInit, OnDestroy {\n    public runs: MJCommunicationRunEntity[] = [];\n    public isLoading = false;\n    public summary = {\n        active: 0,\n        completed: 0,\n        successRate: 0\n    };\n\n    constructor(private cdr: ChangeDetectorRef) {\n        super();\n    }\n\n    async ngOnInit(): Promise<void> {\n        super.ngOnInit();\n        await this.loadData();\n        this.NotifyLoadComplete();\n    }\n\n    ngOnDestroy(): void {\n        super.ngOnDestroy();\n    }\n\n    public async loadData(): Promise<void> {\n        try {\n            this.isLoading = true;\n            this.cdr.detectChanges();\n\n            const rv = RunView.FromMetadataProvider(this.ProviderToUse);\n            const yesterday = new Date();\n            yesterday.setDate(yesterday.getDate() - 1);\n            const yesterdayIso = yesterday.toISOString();\n\n            const [runsResult, activeResult, completedResult, failedResult] = await Promise.all([\n                rv.RunView<MJCommunicationRunEntity>({\n                    EntityName: 'MJ: Communication Runs',\n                    OrderBy: 'StartedAt DESC',\n                    MaxRows: 50,\n                    ResultType: 'entity_object'\n                }),\n                rv.RunView({\n                    EntityName: 'MJ: Communication Runs',\n                    ExtraFilter: `Status = 'In-Progress'`,\n                    ResultType: 'count_only'\n                }),\n                rv.RunView({\n                    EntityName: 'MJ: Communication Runs',\n                    ExtraFilter: `EndedAt >= '${yesterdayIso}' AND Status = 'Complete'`,\n                    ResultType: 'count_only'\n                }),\n                rv.RunView({\n                    EntityName: 'MJ: Communication Runs',\n                    ExtraFilter: `EndedAt >= '${yesterdayIso}' AND Status = 'Failed'`,\n                    ResultType: 'count_only'\n                })\n            ]);\n\n            if (runsResult.Success) {\n                this.runs = runsResult.Results;\n            }\n\n            if (activeResult.Success) this.summary.active = activeResult.TotalRowCount;\n            if (completedResult.Success) this.summary.completed = completedResult.TotalRowCount;\n\n            const totalCompleted = this.summary.completed + (failedResult.Success ? failedResult.TotalRowCount : 0);\n            this.summary.successRate = totalCompleted > 0\n                ? Math.round((this.summary.completed / totalCompleted) * 100)\n                : 100;\n\n        } catch (error) {\n            console.error('Error loading runs:', error);\n        } finally {\n            this.isLoading = false;\n            this.cdr.detectChanges();\n        }\n    }\n\n    public getRunDotClass(status: string): string {\n        const s = (status || '').toLowerCase();\n        if (s === 'complete') return 'complete';\n        if (s === 'failed') return 'failed';\n        if (s === 'in-progress') return 'in-progress';\n        return 'pending';\n    }\n\n    public getStatusClass(status: string): string {\n        const s = (status || '').toLowerCase();\n        if (s === 'complete') return 'complete';\n        if (s === 'failed') return 'failed';\n        if (s === 'in-progress') return 'in-progress';\n        return 'pending';\n    }\n\n    async GetResourceDisplayName(data: ResourceData): Promise<string> {\n        return 'Bulk Runs';\n    }\n\n    async GetResourceIconClass(data: ResourceData): Promise<string> {\n        return 'fa-solid fa-play-circle';\n    }\n}\n"]}
+{"version":3,"file":"communication-runs-resource.component.js","sourceRoot":"","sources":["../../src/Communication/communication-runs-resource.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';\nimport { ResourceData, MJCommunicationRunEntity } from '@memberjunction/core-entities';\nimport { RegisterClass } from '@memberjunction/global';\nimport { BaseResourceComponent } from '@memberjunction/ng-shared';\nimport { RunView } from '@memberjunction/core';\n@RegisterClass(BaseResourceComponent, 'CommunicationRunsResource')\n@Component({\n  standalone: false,\n    selector: 'mj-communication-runs-resource',\n    template: `\n    <mj-page-layout>\n      <mj-page-header\n        Title=\"Runs\"\n        Icon=\"fa-solid fa-play-circle\"\n        Subtitle=\"Bulk communication run history\">\n        <div actions>\n          <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"loadData()\" [disabled]=\"isLoading\" title=\"Refresh\">\n            <i class=\"fa-solid fa-rotate\" [class.spinning]=\"isLoading\"></i> Refresh\n          </button>\n        </div>\n      </mj-page-header>\n\n      <mj-page-body>\n        <div class=\"card\">\n          <!-- SUMMARY STATS -->\n          <div class=\"runs-summary\">\n            <div class=\"run-stat-card info\">\n              <div class=\"run-stat-value\">{{summary.active}}</div>\n              <div class=\"run-stat-label\">Active Runs</div>\n            </div>\n            <div class=\"run-stat-card success\">\n              <div class=\"run-stat-value\">{{summary.completed}}</div>\n              <div class=\"run-stat-label\">Completed (24h)</div>\n            </div>\n            <div class=\"run-stat-card neutral\">\n              <div class=\"run-stat-value\">{{summary.successRate}}%</div>\n              <div class=\"run-stat-label\">Success Rate</div>\n            </div>\n          </div>\n    \n          <!-- TIMELINE -->\n          <div class=\"run-timeline\">\n            @for (run of runs; track run) {\n              <div class=\"run-entry\">\n                <div class=\"run-timeline-dot\" [ngClass]=\"getRunDotClass(run.Status)\"></div>\n                <div class=\"run-entry-content\">\n                  <div class=\"run-entry-header\">\n                    <span class=\"run-entry-title\">Run #{{run.ID.substring(0, 8)}}</span>\n                    <span class=\"run-status-badge\" [ngClass]=\"getStatusClass(run.Status)\">\n                      {{run.Status}}\n                    </span>\n                  </div>\n                  <div class=\"run-entry-meta\">\n                    <span><i class=\"fa-solid fa-user\"></i> {{run.User || 'System'}}</span>\n                    <span><i class=\"fa-solid fa-clock\"></i> {{run.StartedAt | date:'medium'}}</span>\n                    @if (run.EndedAt) {\n                      <span><i class=\"fa-solid fa-flag-checkered\"></i> {{run.EndedAt | date:'shortTime'}}</span>\n                    }\n                  </div>\n                  @if (run.Comments) {\n                    <div class=\"run-entry-comments\">\n                      {{run.Comments}}\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n    \n            @if (runs.length === 0 && !isLoading) {\n              <div class=\"empty-state\">\n                <i class=\"fa-solid fa-play-circle\"></i>\n                <p>No communication runs found</p>\n              </div>\n            }\n          </div>\n        </div>\n      </mj-page-body>\n    </mj-page-layout>\n    `,\n    styles: [`\n    .card {\n        background: var(--mj-bg-surface-card);\n        border: 1px solid var(--mj-border-default);\n        border-radius: 12px;\n        overflow: hidden;\n        padding: 16px 0 0;\n    }\n    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n    .spinning { animation: spin 1s linear infinite; }\n\n    /* SUMMARY */\n    .runs-summary {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 16px;\n        padding: 20px;\n    }\n    .run-stat-card {\n        border-radius: 12px;\n        padding: 16px 20px;\n        text-align: center;\n    }\n    .run-stat-card.info {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    }\n    .run-stat-card.success {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    }\n    .run-stat-card.neutral {\n        background: var(--mj-bg-surface-sunken);\n        border: 1px solid var(--mj-border-default);\n    }\n\n    .run-stat-value {\n        font-size: 24px; font-weight: 800;\n        color: var(--mj-text-primary);\n    }\n    .run-stat-card.info .run-stat-value { color: var(--mj-brand-primary); }\n    .run-stat-card.success .run-stat-value { color: var(--mj-status-success); }\n\n    .run-stat-label {\n        font-size: 11px; font-weight: 600;\n        text-transform: uppercase; letter-spacing: 0.5px;\n        color: var(--mj-text-muted);\n        margin-top: 2px;\n    }\n\n    /* TIMELINE */\n    .run-timeline { padding: 8px 20px 20px; }\n    .run-entry {\n        display: flex; gap: 16px;\n        padding: 16px 0;\n        border-bottom: 1px solid var(--mj-border-default);\n        align-items: flex-start;\n    }\n    .run-entry:last-child { border-bottom: none; }\n\n    .run-timeline-dot {\n        width: 12px; height: 12px;\n        border-radius: 50%;\n        margin-top: 4px; flex-shrink: 0;\n    }\n    .run-timeline-dot.complete { background: var(--mj-status-success); }\n    .run-timeline-dot.failed { background: var(--mj-status-error); }\n    .run-timeline-dot.in-progress {\n        background: var(--mj-brand-primary);\n        animation: pulse-dot 1.5s ease-in-out infinite;\n    }\n    .run-timeline-dot.pending { background: var(--mj-status-warning); }\n\n    @keyframes pulse-dot {\n        0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-brand-primary) 40%, transparent); }\n        50% { box-shadow: 0 0 0 6px transparent; }\n    }\n\n    .run-entry-content { flex: 1; }\n    .run-entry-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n    .run-entry-title {\n        font-size: 13px; font-weight: 600;\n        color: var(--mj-text-primary);\n    }\n    .run-status-badge {\n        font-size: 10px; font-weight: 700;\n        text-transform: uppercase; letter-spacing: 0.3px;\n        padding: 3px 8px;\n        border-radius: 4px;\n    }\n    .run-status-badge.complete {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n        border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    }\n    .run-status-badge.failed {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n        border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n    }\n    .run-status-badge.pending {\n        background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-warning);\n        border: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n    }\n    .run-status-badge.in-progress {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n        border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    }\n\n    .run-entry-meta {\n        font-size: 11px;\n        color: var(--mj-text-muted);\n        margin-top: 4px;\n        display: flex; align-items: center; gap: 12px;\n    }\n    .run-entry-meta span {\n        display: flex; align-items: center; gap: 4px;\n    }\n    .run-entry-meta i { font-size: 10px; }\n\n    .run-entry-comments {\n        font-size: 12px;\n        color: var(--mj-text-muted);\n        margin-top: 6px;\n        font-style: italic;\n    }\n\n    /* EMPTY STATE */\n    .empty-state {\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 48px 0; color: var(--mj-text-muted);\n    }\n    .empty-state i { font-size: 2rem; margin-bottom: 12px; opacity: 0.5; }\n    .empty-state p { margin: 0; font-size: 13px; }\n  `]\n})\nexport class CommunicationRunsResourceComponent extends BaseResourceComponent implements OnInit, OnDestroy {\n    public runs: MJCommunicationRunEntity[] = [];\n    public isLoading = false;\n    public summary = {\n        active: 0,\n        completed: 0,\n        successRate: 0\n    };\n\n    constructor(private cdr: ChangeDetectorRef) {\n        super();\n    }\n\n    async ngOnInit(): Promise<void> {\n        super.ngOnInit();\n        await this.loadData();\n        this.NotifyLoadComplete();\n    }\n\n    ngOnDestroy(): void {\n        super.ngOnDestroy();\n    }\n\n    public async loadData(): Promise<void> {\n        try {\n            this.isLoading = true;\n            this.cdr.detectChanges();\n\n            const rv = RunView.FromMetadataProvider(this.ProviderToUse);\n            const yesterday = new Date();\n            yesterday.setDate(yesterday.getDate() - 1);\n            const yesterdayIso = yesterday.toISOString();\n\n            const [runsResult, activeResult, completedResult, failedResult] = await Promise.all([\n                rv.RunView<MJCommunicationRunEntity>({\n                    EntityName: 'MJ: Communication Runs',\n                    OrderBy: 'StartedAt DESC',\n                    MaxRows: 50,\n                    ResultType: 'entity_object'\n                }),\n                rv.RunView({\n                    EntityName: 'MJ: Communication Runs',\n                    ExtraFilter: `Status = 'In-Progress'`,\n                    ResultType: 'count_only'\n                }),\n                rv.RunView({\n                    EntityName: 'MJ: Communication Runs',\n                    ExtraFilter: `EndedAt >= '${yesterdayIso}' AND Status = 'Complete'`,\n                    ResultType: 'count_only'\n                }),\n                rv.RunView({\n                    EntityName: 'MJ: Communication Runs',\n                    ExtraFilter: `EndedAt >= '${yesterdayIso}' AND Status = 'Failed'`,\n                    ResultType: 'count_only'\n                })\n            ]);\n\n            if (runsResult.Success) {\n                this.runs = runsResult.Results;\n            }\n\n            if (activeResult.Success) this.summary.active = activeResult.TotalRowCount;\n            if (completedResult.Success) this.summary.completed = completedResult.TotalRowCount;\n\n            const totalCompleted = this.summary.completed + (failedResult.Success ? failedResult.TotalRowCount : 0);\n            this.summary.successRate = totalCompleted > 0\n                ? Math.round((this.summary.completed / totalCompleted) * 100)\n                : 100;\n\n        } catch (error) {\n            console.error('Error loading runs:', error);\n        } finally {\n            this.isLoading = false;\n            this.cdr.detectChanges();\n        }\n    }\n\n    public getRunDotClass(status: string): string {\n        const s = (status || '').toLowerCase();\n        if (s === 'complete') return 'complete';\n        if (s === 'failed') return 'failed';\n        if (s === 'in-progress') return 'in-progress';\n        return 'pending';\n    }\n\n    public getStatusClass(status: string): string {\n        const s = (status || '').toLowerCase();\n        if (s === 'complete') return 'complete';\n        if (s === 'failed') return 'failed';\n        if (s === 'in-progress') return 'in-progress';\n        return 'pending';\n    }\n\n    async GetResourceDisplayName(data: ResourceData): Promise<string> {\n        return 'Bulk Runs';\n    }\n\n    async GetResourceIconClass(data: ResourceData): Promise<string> {\n        return 'fa-solid fa-play-circle';\n    }\n}\n"]}

package/dist/Communication/communication-templates-resource.component.d.ts

@@ -24,7 +24,7 @@ export declare class CommunicationTemplatesResourceComponent extends BaseResourc
     private buildTemplateCard;
     private extractCategories;
     getCategoryCount(category: string): number;
-    onSearch(event: Event): void;
+    onSearchValue(value: string): void;
     onCategoryFilter(category: string): void;
     private applyFilter;
     openTemplate(template: MJTemplateEntity): void;

package/dist/Communication/communication-templates-resource.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"communication-templates-resource.component.d.ts","sourceRoot":"","sources":["../../src/Communication/communication-templates-resource.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAA2B,MAAM,+BAA+B,CAAC;AAExG,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;;AAGrF,UAAU,gBAAgB;IACtB,MAAM,EAAE,gBAAgB,CAAC;IACzB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,WAAW,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;CACxB;AACD,qBA0Sa,uCAAwC,SAAQ,qBAAsB,YAAW,MAAM,EAAE,SAAS;IAQ/F,OAAO,CAAC,GAAG;IAAqB,OAAO,CAAC,UAAU;IAPvD,YAAY,EAAE,gBAAgB,EAAE,CAAM;IACtC,iBAAiB,EAAE,gBAAgB,EAAE,CAAM;IAC3C,UAAU,EAAE,MAAM,EAAE,CAAM;IAC1B,cAAc,SAAM;IACpB,SAAS,UAAS;IACzB,OAAO,CAAC,UAAU,CAAM;gBAEJ,GAAG,EAAE,iBAAiB,EAAU,UAAU,EAAE,iBAAiB;IAI3E,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAM/B,WAAW,IAAI,IAAI;IAIN,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAgCtC,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,iBAAiB;IAKlB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAI1C,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAK5B,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAK/C,OAAO,CAAC,WAAW;IAmBZ,YAAY,CAAC,QAAQ,EAAE,gBAAgB,GAAG,IAAI;IAM9C,cAAc,IAAI,IAAI;IAItB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAQzC,sBAAsB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;IAI3D,oBAAoB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;yCAhItD,uCAAuC;2CAAvC,uCAAuC;CAmInD"}
+{"version":3,"file":"communication-templates-resource.component.d.ts","sourceRoot":"","sources":["../../src/Communication/communication-templates-resource.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAA2B,MAAM,+BAA+B,CAAC;AAExG,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;;AAGrF,UAAU,gBAAgB;IACtB,MAAM,EAAE,gBAAgB,CAAC;IACzB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,WAAW,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;CACxB;AACD,qBAiMa,uCAAwC,SAAQ,qBAAsB,YAAW,MAAM,EAAE,SAAS;IAQ/F,OAAO,CAAC,GAAG;IAAqB,OAAO,CAAC,UAAU;IAPvD,YAAY,EAAE,gBAAgB,EAAE,CAAM;IACtC,iBAAiB,EAAE,gBAAgB,EAAE,CAAM;IAC3C,UAAU,EAAE,MAAM,EAAE,CAAM;IAC1B,cAAc,SAAM;IACpB,SAAS,UAAS;IACzB,OAAO,CAAC,UAAU,CAAM;gBAEJ,GAAG,EAAE,iBAAiB,EAAU,UAAU,EAAE,iBAAiB;IAI3E,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAM/B,WAAW,IAAI,IAAI;IAIN,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAgCtC,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,iBAAiB;IAKlB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAI1C,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKlC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAK/C,OAAO,CAAC,WAAW;IAmBZ,YAAY,CAAC,QAAQ,EAAE,gBAAgB,GAAG,IAAI;IAM9C,cAAc,IAAI,IAAI;IAItB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAQzC,sBAAsB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;IAI3D,oBAAoB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;yCAhItD,uCAAuC;2CAAvC,uCAAuC;CAmInD"}