@memberjunction/ng-dashboards 5.38.0 → 5.39.0

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

@@ -13,74 +13,52 @@ import * as i1 from "@memberjunction/ng-shared";
 import * as i2 from "@memberjunction/ng-shared-generic";
 import * as i3 from "@memberjunction/ng-ui-components";
 import * as i4 from "@angular/common";
-function CommunicationTemplatesResourceComponent_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-filter-chip", 10);
-    i0.ɵɵlistener("Clicked", function CommunicationTemplatesResourceComponent_Conditional_8_For_2_Template_mj_filter_chip_Clicked_0_listener() { const cat_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onCategoryFilter(cat_r4)); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const cat_r4 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("Label", cat_r4)("Count", ctx_r1.getCategoryCount(cat_r4))("Active", ctx_r1.categoryFilter === cat_r4);
-} }
-function CommunicationTemplatesResourceComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-filter-chip", 8);
-    i0.ɵɵlistener("Clicked", function CommunicationTemplatesResourceComponent_Conditional_8_Template_mj_filter_chip_Clicked_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCategoryFilter("")); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(1, CommunicationTemplatesResourceComponent_Conditional_8_For_2_Template, 1, 3, "mj-filter-chip", 9, i0.ɵɵrepeaterTrackByIdentity);
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("Count", ctx_r1.allTemplates.length)("Active", ctx_r1.categoryFilter === "");
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.categories);
-} }
-function CommunicationTemplatesResourceComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 6);
+function CommunicationTemplatesResourceComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9);
     i0.ɵɵelement(1, "mj-loading", 11);
     i0.ɵɵelementEnd();
 } }
-function CommunicationTemplatesResourceComponent_Conditional_11_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+function CommunicationTemplatesResourceComponent_Conditional_13_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 21);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const card_r6 = i0.ɵɵnextContext().$implicit;
+    const card_r2 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", card_r6.Entity.Description, " ");
+    i0.ɵɵtextInterpolate1(" ", card_r2.Entity.Description, " ");
 } }
-function CommunicationTemplatesResourceComponent_Conditional_11_For_2_For_13_Template(rf, ctx) { if (rf & 1) {
+function CommunicationTemplatesResourceComponent_Conditional_13_For_2_For_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 24);
     i0.ɵɵelement(1, "i");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ct_r7 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ct_r4 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.getContentTypeIcon(ct_r7));
+    i0.ɵɵclassMap(ctx_r2.getContentTypeIcon(ct_r4));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ct_r7, " ");
+    i0.ɵɵtextInterpolate1(" ", ct_r4, " ");
 } }
-function CommunicationTemplatesResourceComponent_Conditional_11_For_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+function CommunicationTemplatesResourceComponent_Conditional_13_For_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 25);
     i0.ɵɵtext(1, " No content ");
     i0.ɵɵelementEnd();
 } }
-function CommunicationTemplatesResourceComponent_Conditional_11_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+function CommunicationTemplatesResourceComponent_Conditional_13_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 26);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "date");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const card_r6 = i0.ɵɵnextContext().$implicit;
+    const card_r2 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" Updated ", i0.ɵɵpipeBind2(2, 1, card_r6.LastUpdated, "mediumDate"), " ");
+    i0.ɵɵtextInterpolate1(" Updated ", i0.ɵɵpipeBind2(2, 1, card_r2.LastUpdated, "mediumDate"), " ");
 } }
-function CommunicationTemplatesResourceComponent_Conditional_11_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
+function CommunicationTemplatesResourceComponent_Conditional_13_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 14);
-    i0.ɵɵlistener("click", function CommunicationTemplatesResourceComponent_Conditional_11_For_2_Template_div_click_0_listener() { const card_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openTemplate(card_r6.Entity)); });
+    i0.ɵɵlistener("click", function CommunicationTemplatesResourceComponent_Conditional_13_For_2_Template_div_click_0_listener() { const card_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openTemplate(card_r2.Entity)); });
     i0.ɵɵelementStart(1, "div", 15)(2, "div", 16);
     i0.ɵɵelement(3, "i", 17);
     i0.ɵɵelementEnd();
@@ -90,46 +68,46 @@ function CommunicationTemplatesResourceComponent_Conditional_11_For_2_Template(r
     i0.ɵɵelementStart(7, "div", 20);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(9, CommunicationTemplatesResourceComponent_Conditional_11_For_2_Conditional_9_Template, 2, 1, "div", 21);
+    i0.ɵɵconditionalCreate(9, CommunicationTemplatesResourceComponent_Conditional_13_For_2_Conditional_9_Template, 2, 1, "div", 21);
     i0.ɵɵelementStart(10, "div", 22)(11, "div", 23);
-    i0.ɵɵrepeaterCreate(12, CommunicationTemplatesResourceComponent_Conditional_11_For_2_For_13_Template, 3, 3, "span", 24, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵconditionalCreate(14, CommunicationTemplatesResourceComponent_Conditional_11_For_2_Conditional_14_Template, 2, 0, "span", 25);
+    i0.ɵɵrepeaterCreate(12, CommunicationTemplatesResourceComponent_Conditional_13_For_2_For_13_Template, 3, 3, "span", 24, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵconditionalCreate(14, CommunicationTemplatesResourceComponent_Conditional_13_For_2_Conditional_14_Template, 2, 0, "span", 25);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(15, CommunicationTemplatesResourceComponent_Conditional_11_For_2_Conditional_15_Template, 3, 4, "div", 26);
+    i0.ɵɵconditionalCreate(15, CommunicationTemplatesResourceComponent_Conditional_13_For_2_Conditional_15_Template, 3, 4, "div", 26);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const card_r6 = ctx.$implicit;
+    const card_r2 = ctx.$implicit;
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(card_r6.Entity.Name);
+    i0.ɵɵtextInterpolate(card_r2.Entity.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(card_r6.CategoryName);
+    i0.ɵɵtextInterpolate(card_r2.CategoryName);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(card_r6.Entity.Description ? 9 : -1);
+    i0.ɵɵconditional(card_r2.Entity.Description ? 9 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(card_r6.ContentTypes);
+    i0.ɵɵrepeater(card_r2.ContentTypes);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(card_r6.ContentTypes.length === 0 ? 14 : -1);
+    i0.ɵɵconditional(card_r2.ContentTypes.length === 0 ? 14 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(card_r6.LastUpdated ? 15 : -1);
+    i0.ɵɵconditional(card_r2.LastUpdated ? 15 : -1);
 } }
-function CommunicationTemplatesResourceComponent_Conditional_11_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function CommunicationTemplatesResourceComponent_Conditional_13_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 13);
     i0.ɵɵelement(1, "i", 17);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No templates found matching your criteria");
     i0.ɵɵelementEnd()();
 } }
-function CommunicationTemplatesResourceComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 7);
-    i0.ɵɵrepeaterCreate(1, CommunicationTemplatesResourceComponent_Conditional_11_For_2_Template, 16, 5, "div", 12, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵconditionalCreate(3, CommunicationTemplatesResourceComponent_Conditional_11_Conditional_3_Template, 4, 0, "div", 13);
+function CommunicationTemplatesResourceComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10);
+    i0.ɵɵrepeaterCreate(1, CommunicationTemplatesResourceComponent_Conditional_13_For_2_Template, 16, 5, "div", 12, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵconditionalCreate(3, CommunicationTemplatesResourceComponent_Conditional_13_Conditional_3_Template, 4, 0, "div", 13);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.filteredTemplates);
+    i0.ɵɵrepeater(ctx_r2.filteredTemplates);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.filteredTemplates.length === 0 ? 3 : -1);
+    i0.ɵɵconditional(ctx_r2.filteredTemplates.length === 0 ? 3 : -1);
 } }
 let CommunicationTemplatesResourceComponent = class CommunicationTemplatesResourceComponent extends BaseResourceComponent {
     cdr;
@@ -211,6 +189,30 @@ let CommunicationTemplatesResourceComponent = class CommunicationTemplatesResour
         this.categoryFilter = category;
         this.applyFilter();
     }
+    // -- Concise chrome: Category lives behind the one Filter popover ---------
+    get filterFields() {
+        return [{
+                key: 'category',
+                type: 'chips',
+                label: 'Category',
+                chipOptions: [
+                    { text: 'All', value: '' },
+                    ...this.categories.map(c => ({ text: c, value: c })),
+                ],
+            }];
+    }
+    get filterValues() {
+        return { category: this.categoryFilter };
+    }
+    get ActiveFilterCount() {
+        return this.categoryFilter ? 1 : 0;
+    }
+    onFilterValuesChange(values) {
+        this.onCategoryFilter(values['category'] ?? '');
+    }
+    resetFilters() {
+        this.onCategoryFilter('');
+    }
     applyFilter() {
         let filtered = this.allTemplates;
         if (this.categoryFilter) {
@@ -249,26 +251,32 @@ let CommunicationTemplatesResourceComponent = class CommunicationTemplatesResour
         return 'fa-solid fa-file-lines';
     }
     static ɵfac = function CommunicationTemplatesResourceComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CommunicationTemplatesResourceComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.NavigationService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CommunicationTemplatesResourceComponent, selectors: [["mj-communication-templates-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 12, vars: 2, consts: [["Title", "Templates", "Icon", "fa-solid fa-file-lines", "Subtitle", "Manage reusable message templates"], ["actions", ""], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-plus"], ["toolbar", ""], ["Placeholder", "Search templates...", 3, "ValueChange"], [1, "loading-state"], [1, "templates-grid"], ["Label", "All", 3, "Clicked", "Count", "Active"], [3, "Label", "Count", "Active"], [3, "Clicked", "Label", "Count", "Active"], ["text", "Loading templates..."], [1, "template-card"], [1, "empty-state"], [1, "template-card", 3, "click"], [1, "template-card-header"], [1, "template-icon"], [1, "fa-solid", "fa-file-lines"], [1, "template-title-area"], [1, "template-name"], [1, "template-category"], [1, "template-description"], [1, "template-meta"], [1, "template-content-types"], [1, "content-type-chip"], [1, "content-type-chip", "empty"], [1, "template-updated"]], template: function CommunicationTemplatesResourceComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CommunicationTemplatesResourceComponent, selectors: [["mj-communication-templates-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 14, vars: 5, consts: [["Title", "Templates", "Icon", "fa-solid fa-file-lines", "Subtitle", "Manage reusable message templates"], ["actions", ""], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "action-btn-label"], ["toolbar", ""], ["Placeholder", "Search templates...", 3, "ValueChange"], [3, "ClearAllRequested", "ActiveCount", "ShowClearAll"], [3, "ValuesChange", "Reset", "Fields", "Values"], [1, "loading-state"], [1, "templates-grid"], ["text", "Loading templates..."], [1, "template-card"], [1, "empty-state"], [1, "template-card", 3, "click"], [1, "template-card-header"], [1, "template-icon"], [1, "fa-solid", "fa-file-lines"], [1, "template-title-area"], [1, "template-name"], [1, "template-category"], [1, "template-description"], [1, "template-meta"], [1, "template-content-types"], [1, "content-type-chip"], [1, "content-type-chip", "empty"], [1, "template-updated"]], template: function CommunicationTemplatesResourceComponent_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 CommunicationTemplatesResourceComponent_Template_button_click_3_listener() { return ctx.addNewTemplate(); });
             i0.ɵɵelement(4, "i", 3);
-            i0.ɵɵtext(5, " New Template ");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(6, "div", 4)(7, "mj-page-search", 5);
-            i0.ɵɵlistener("ValueChange", function CommunicationTemplatesResourceComponent_Template_mj_page_search_ValueChange_7_listener($event) { return ctx.onSearchValue($event); });
+            i0.ɵɵelementStart(5, "span", 4);
+            i0.ɵɵtext(6, "New Template");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(7, "div", 5)(8, "mj-page-search", 6);
+            i0.ɵɵlistener("ValueChange", function CommunicationTemplatesResourceComponent_Template_mj_page_search_ValueChange_8_listener($event) { return ctx.onSearchValue($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(8, CommunicationTemplatesResourceComponent_Conditional_8_Template, 3, 2);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(9, "mj-page-body");
-            i0.ɵɵconditionalCreate(10, CommunicationTemplatesResourceComponent_Conditional_10_Template, 2, 0, "div", 6)(11, CommunicationTemplatesResourceComponent_Conditional_11_Template, 4, 1, "div", 7);
+            i0.ɵɵelementStart(9, "mj-filter-popover", 7);
+            i0.ɵɵlistener("ClearAllRequested", function CommunicationTemplatesResourceComponent_Template_mj_filter_popover_ClearAllRequested_9_listener() { return ctx.resetFilters(); });
+            i0.ɵɵelementStart(10, "mj-filter-panel", 8);
+            i0.ɵɵlistener("ValuesChange", function CommunicationTemplatesResourceComponent_Template_mj_filter_panel_ValuesChange_10_listener($event) { return ctx.onFilterValuesChange($event); })("Reset", function CommunicationTemplatesResourceComponent_Template_mj_filter_panel_Reset_10_listener() { return ctx.resetFilters(); });
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(11, "mj-page-body");
+            i0.ɵɵconditionalCreate(12, CommunicationTemplatesResourceComponent_Conditional_12_Template, 2, 0, "div", 9)(13, CommunicationTemplatesResourceComponent_Conditional_13_Template, 4, 1, "div", 10);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵadvance(8);
-            i0.ɵɵconditional(!ctx.isLoading ? 8 : -1);
+            i0.ɵɵadvance(9);
+            i0.ɵɵproperty("ActiveCount", ctx.ActiveFilterCount)("ShowClearAll", ctx.ActiveFilterCount > 0);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Fields", ctx.filterFields)("Values", ctx.filterValues);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.isLoading ? 10 : 11);
-        } }, dependencies: [i2.LoadingComponent, i3.MJButtonDirective, i3.MJPageHeaderComponent, i3.MJPageLayoutComponent, i3.MJPageBodyComponent, i3.MJPageSearchComponent, i3.MJFilterChipComponent, i4.DatePipe], styles: [".loading-state[_ngcontent-%COMP%] {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 80px 0;\n    }\n\n    \n\n    .templates-grid[_ngcontent-%COMP%] {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n        gap: 16px;\n    }\n\n    .template-card[_ngcontent-%COMP%] {\n        background: var(--mj-bg-surface-card);\n        border: 1px solid var(--mj-border-default);\n        border-radius: 12px;\n        padding: 20px;\n        cursor: pointer;\n        transition: all 0.15s ease;\n    }\n    .template-card[_ngcontent-%COMP%]:hover {\n        box-shadow: 0 2px 8px var(--mj-shadow-md);\n        border-color: var(--mj-border-strong);\n    }\n\n    .template-card-header[_ngcontent-%COMP%] {\n        display: flex;\n        align-items: center;\n        gap: 14px;\n        margin-bottom: 12px;\n    }\n    .template-icon[_ngcontent-%COMP%] {\n        width: 40px; height: 40px;\n        border-radius: 8px;\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .template-title-area[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n    .template-name[_ngcontent-%COMP%] {\n        font-size: 14px; font-weight: 700;\n        color: var(--mj-text-primary);\n        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n    }\n    .template-category[_ngcontent-%COMP%] {\n        font-size: 11px;\n        color: var(--mj-text-muted);\n        margin-top: 2px;\n    }\n\n    .template-description[_ngcontent-%COMP%] {\n        font-size: 12px;\n        color: var(--mj-text-muted);\n        line-height: 1.5;\n        margin-bottom: 12px;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n    }\n\n    .template-meta[_ngcontent-%COMP%] {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n    .template-content-types[_ngcontent-%COMP%] {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 6px;\n    }\n    .content-type-chip[_ngcontent-%COMP%] {\n        display: inline-flex; align-items: center;\n        gap: 4px; padding: 3px 8px;\n        border-radius: 10px; font-size: 10px; font-weight: 500;\n        background: var(--mj-bg-surface);\n        color: var(--mj-text-muted);\n    }\n    .content-type-chip.empty[_ngcontent-%COMP%] {\n        font-style: italic;\n    }\n    .template-updated[_ngcontent-%COMP%] {\n        font-size: 10px;\n        color: var(--mj-text-muted);\n        white-space: nowrap;\n    }\n\n    \n\n    .empty-state[_ngcontent-%COMP%] {\n        grid-column: 1 / -1;\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 64px 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.isLoading ? 12 : 13);
+        } }, dependencies: [i2.LoadingComponent, i3.MJButtonDirective, i3.MJPageHeaderComponent, i3.MJPageLayoutComponent, i3.MJPageBodyComponent, i3.MJPageSearchComponent, i3.MJFilterPopoverComponent, i3.MJFilterPanelComponent, i4.DatePipe], styles: [".loading-state[_ngcontent-%COMP%] {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 80px 0;\n    }\n\n    \n\n    .templates-grid[_ngcontent-%COMP%] {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n        gap: 16px;\n    }\n\n    .template-card[_ngcontent-%COMP%] {\n        background: var(--mj-bg-surface-card);\n        border: 1px solid var(--mj-border-default);\n        border-radius: 12px;\n        padding: 20px;\n        cursor: pointer;\n        transition: all 0.15s ease;\n    }\n    .template-card[_ngcontent-%COMP%]:hover {\n        box-shadow: 0 2px 8px var(--mj-shadow-md);\n        border-color: var(--mj-border-strong);\n    }\n\n    .template-card-header[_ngcontent-%COMP%] {\n        display: flex;\n        align-items: center;\n        gap: 14px;\n        margin-bottom: 12px;\n    }\n    .template-icon[_ngcontent-%COMP%] {\n        width: 40px; height: 40px;\n        border-radius: 8px;\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .template-title-area[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n    .template-name[_ngcontent-%COMP%] {\n        font-size: 14px; font-weight: 700;\n        color: var(--mj-text-primary);\n        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n    }\n    .template-category[_ngcontent-%COMP%] {\n        font-size: 11px;\n        color: var(--mj-text-muted);\n        margin-top: 2px;\n    }\n\n    .template-description[_ngcontent-%COMP%] {\n        font-size: 12px;\n        color: var(--mj-text-muted);\n        line-height: 1.5;\n        margin-bottom: 12px;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n    }\n\n    .template-meta[_ngcontent-%COMP%] {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n    .template-content-types[_ngcontent-%COMP%] {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 6px;\n    }\n    .content-type-chip[_ngcontent-%COMP%] {\n        display: inline-flex; align-items: center;\n        gap: 4px; padding: 3px 8px;\n        border-radius: 10px; font-size: 10px; font-weight: 500;\n        background: var(--mj-bg-surface);\n        color: var(--mj-text-muted);\n    }\n    .content-type-chip.empty[_ngcontent-%COMP%] {\n        font-style: italic;\n    }\n    .template-updated[_ngcontent-%COMP%] {\n        font-size: 10px;\n        color: var(--mj-text-muted);\n        white-space: nowrap;\n    }\n\n    \n\n    .empty-state[_ngcontent-%COMP%] {\n        grid-column: 1 / -1;\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 64px 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; }"] });
 };
 CommunicationTemplatesResourceComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'CommunicationTemplatesResource')
@@ -281,7 +289,7 @@ export { CommunicationTemplatesResourceComponent };
       <mj-page-header Title="Templates" Icon="fa-solid fa-file-lines" Subtitle="Manage reusable message templates">
         <div actions>
           <button mjButton variant="primary" size="sm" (click)="addNewTemplate()">
-            <i class="fa-solid fa-plus"></i> New Template
+            <i class="fa-solid fa-plus"></i> <span class="action-btn-label">New Template</span>
           </button>
         </div>
         <div toolbar>
@@ -289,22 +297,17 @@ export { CommunicationTemplatesResourceComponent };
             Placeholder="Search templates..."
             (ValueChange)="onSearchValue($event)">
           </mj-page-search>
-          @if (!isLoading) {
-            <mj-filter-chip
-              Label="All"
-              [Count]="allTemplates.length"
-              [Active]="categoryFilter === ''"
-              (Clicked)="onCategoryFilter('')">
-            </mj-filter-chip>
-            @for (cat of categories; track cat) {
-              <mj-filter-chip
-                [Label]="cat"
-                [Count]="getCategoryCount(cat)"
-                [Active]="categoryFilter === cat"
-                (Clicked)="onCategoryFilter(cat)">
-              </mj-filter-chip>
-            }
-          }
+          <mj-filter-popover
+            [ActiveCount]="ActiveFilterCount"
+            [ShowClearAll]="ActiveFilterCount > 0"
+            (ClearAllRequested)="resetFilters()">
+            <mj-filter-panel
+              [Fields]="filterFields"
+              [Values]="filterValues"
+              (ValuesChange)="onFilterValuesChange($event)"
+              (Reset)="resetFilters()">
+            </mj-filter-panel>
+          </mj-filter-popover>
         </div>
       </mj-page-header>
 
@@ -364,5 +367,5 @@ export { CommunicationTemplatesResourceComponent };
     </mj-page-layout>
     `, styles: ["\n    .loading-state {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 80px 0;\n    }\n\n    /* GRID */\n    .templates-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n        gap: 16px;\n    }\n\n    .template-card {\n        background: var(--mj-bg-surface-card);\n        border: 1px solid var(--mj-border-default);\n        border-radius: 12px;\n        padding: 20px;\n        cursor: pointer;\n        transition: all 0.15s ease;\n    }\n    .template-card:hover {\n        box-shadow: 0 2px 8px var(--mj-shadow-md);\n        border-color: var(--mj-border-strong);\n    }\n\n    .template-card-header {\n        display: flex;\n        align-items: center;\n        gap: 14px;\n        margin-bottom: 12px;\n    }\n    .template-icon {\n        width: 40px; height: 40px;\n        border-radius: 8px;\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .template-title-area { flex: 1; min-width: 0; }\n    .template-name {\n        font-size: 14px; font-weight: 700;\n        color: var(--mj-text-primary);\n        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n    }\n    .template-category {\n        font-size: 11px;\n        color: var(--mj-text-muted);\n        margin-top: 2px;\n    }\n\n    .template-description {\n        font-size: 12px;\n        color: var(--mj-text-muted);\n        line-height: 1.5;\n        margin-bottom: 12px;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n    }\n\n    .template-meta {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n    .template-content-types {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 6px;\n    }\n    .content-type-chip {\n        display: inline-flex; align-items: center;\n        gap: 4px; padding: 3px 8px;\n        border-radius: 10px; font-size: 10px; font-weight: 500;\n        background: var(--mj-bg-surface);\n        color: var(--mj-text-muted);\n    }\n    .content-type-chip.empty {\n        font-style: italic;\n    }\n    .template-updated {\n        font-size: 10px;\n        color: var(--mj-text-muted);\n        white-space: nowrap;\n    }\n\n    /* EMPTY STATE */\n    .empty-state {\n        grid-column: 1 / -1;\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 64px 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 }, { type: i1.NavigationService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationTemplatesResourceComponent, { className: "CommunicationTemplatesResourceComponent", filePath: "src/Communication/communication-templates-resource.component.ts", lineNumber: 206 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationTemplatesResourceComponent, { className: "CommunicationTemplatesResourceComponent", filePath: "src/Communication/communication-templates-resource.component.ts", lineNumber: 202 }); })();
 //# sourceMappingURL=communication-templates-resource.component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"communication-templates-resource.component.js","sourceRoot":"","sources":["../../src/Communication/communication-templates-resource.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';\nimport { ResourceData, MJTemplateEntity, MJTemplateContentEntity } from '@memberjunction/core-entities';\nimport { RegisterClass , UUIDsEqual } from '@memberjunction/global';\nimport { BaseResourceComponent, NavigationService } from '@memberjunction/ng-shared';\nimport { Metadata, RunView, CompositeKey } from '@memberjunction/core';\n\ninterface TemplateCardData {\n    Entity: MJTemplateEntity;\n    ContentTypes: string[];\n    LastUpdated: Date | null;\n    CategoryName: string;\n}\n@RegisterClass(BaseResourceComponent, 'CommunicationTemplatesResource')\n@Component({\n  standalone: false,\n    selector: 'mj-communication-templates-resource',\n    template: `\n    <mj-page-layout>\n      <mj-page-header Title=\"Templates\" Icon=\"fa-solid fa-file-lines\" Subtitle=\"Manage reusable message templates\">\n        <div actions>\n          <button mjButton variant=\"primary\" size=\"sm\" (click)=\"addNewTemplate()\">\n            <i class=\"fa-solid fa-plus\"></i> New Template\n          </button>\n        </div>\n        <div toolbar>\n          <mj-page-search\n            Placeholder=\"Search templates...\"\n            (ValueChange)=\"onSearchValue($event)\">\n          </mj-page-search>\n          @if (!isLoading) {\n            <mj-filter-chip\n              Label=\"All\"\n              [Count]=\"allTemplates.length\"\n              [Active]=\"categoryFilter === ''\"\n              (Clicked)=\"onCategoryFilter('')\">\n            </mj-filter-chip>\n            @for (cat of categories; track cat) {\n              <mj-filter-chip\n                [Label]=\"cat\"\n                [Count]=\"getCategoryCount(cat)\"\n                [Active]=\"categoryFilter === cat\"\n                (Clicked)=\"onCategoryFilter(cat)\">\n              </mj-filter-chip>\n            }\n          }\n        </div>\n      </mj-page-header>\n\n      <mj-page-body>\n        @if (isLoading) {\n          <div class=\"loading-state\">\n            <mj-loading text=\"Loading templates...\"></mj-loading>\n          </div>\n        } @else {\n          <div class=\"templates-grid\">\n            @for (card of filteredTemplates; track card) {\n              <div class=\"template-card\" (click)=\"openTemplate(card.Entity)\">\n                <div class=\"template-card-header\">\n                  <div class=\"template-icon\">\n                    <i class=\"fa-solid fa-file-lines\"></i>\n                  </div>\n                  <div class=\"template-title-area\">\n                    <div class=\"template-name\">{{card.Entity.Name}}</div>\n                    <div class=\"template-category\">{{card.CategoryName}}</div>\n                  </div>\n                </div>\n                @if (card.Entity.Description) {\n                  <div class=\"template-description\">\n                    {{card.Entity.Description}}\n                  </div>\n                }\n                <div class=\"template-meta\">\n                  <div class=\"template-content-types\">\n                    @for (ct of card.ContentTypes; track ct) {\n                      <span class=\"content-type-chip\">\n                        <i [class]=\"getContentTypeIcon(ct)\"></i> {{ct}}\n                      </span>\n                    }\n                    @if (card.ContentTypes.length === 0) {\n                      <span class=\"content-type-chip empty\">\n                        No content\n                      </span>\n                    }\n                  </div>\n                  @if (card.LastUpdated) {\n                    <div class=\"template-updated\">\n                      Updated {{card.LastUpdated | date:'mediumDate'}}\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n            @if (filteredTemplates.length === 0) {\n              <div class=\"empty-state\">\n                <i class=\"fa-solid fa-file-lines\"></i>\n                <p>No templates found matching your criteria</p>\n              </div>\n            }\n          </div>\n        }\n      </mj-page-body>\n    </mj-page-layout>\n    `,\n    styles: [`\n    .loading-state {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 80px 0;\n    }\n\n    /* GRID */\n    .templates-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n        gap: 16px;\n    }\n\n    .template-card {\n        background: var(--mj-bg-surface-card);\n        border: 1px solid var(--mj-border-default);\n        border-radius: 12px;\n        padding: 20px;\n        cursor: pointer;\n        transition: all 0.15s ease;\n    }\n    .template-card:hover {\n        box-shadow: 0 2px 8px var(--mj-shadow-md);\n        border-color: var(--mj-border-strong);\n    }\n\n    .template-card-header {\n        display: flex;\n        align-items: center;\n        gap: 14px;\n        margin-bottom: 12px;\n    }\n    .template-icon {\n        width: 40px; height: 40px;\n        border-radius: 8px;\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .template-title-area { flex: 1; min-width: 0; }\n    .template-name {\n        font-size: 14px; font-weight: 700;\n        color: var(--mj-text-primary);\n        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n    }\n    .template-category {\n        font-size: 11px;\n        color: var(--mj-text-muted);\n        margin-top: 2px;\n    }\n\n    .template-description {\n        font-size: 12px;\n        color: var(--mj-text-muted);\n        line-height: 1.5;\n        margin-bottom: 12px;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n    }\n\n    .template-meta {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n    .template-content-types {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 6px;\n    }\n    .content-type-chip {\n        display: inline-flex; align-items: center;\n        gap: 4px; padding: 3px 8px;\n        border-radius: 10px; font-size: 10px; font-weight: 500;\n        background: var(--mj-bg-surface);\n        color: var(--mj-text-muted);\n    }\n    .content-type-chip.empty {\n        font-style: italic;\n    }\n    .template-updated {\n        font-size: 10px;\n        color: var(--mj-text-muted);\n        white-space: nowrap;\n    }\n\n    /* EMPTY STATE */\n    .empty-state {\n        grid-column: 1 / -1;\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 64px 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 CommunicationTemplatesResourceComponent extends BaseResourceComponent implements OnInit, OnDestroy {\n    public allTemplates: TemplateCardData[] = [];\n    public filteredTemplates: TemplateCardData[] = [];\n    public categories: string[] = [];\n    public categoryFilter = '';\n    public isLoading = false;\n    private searchTerm = '';\n\n    constructor(private cdr: ChangeDetectorRef, private navService: NavigationService) {\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 [templatesResult, contentsResult] = await Promise.all([\n                rv.RunView<MJTemplateEntity>({\n                    EntityName: 'MJ: Templates',\n                    OrderBy: 'Name ASC',\n                    ResultType: 'entity_object'\n                }),\n                rv.RunView<MJTemplateContentEntity>({\n                    EntityName: 'MJ: Template Contents',\n                    ResultType: 'entity_object'\n                })\n            ]);\n\n            if (templatesResult.Success) {\n                const contents = contentsResult.Success ? contentsResult.Results : [];\n                this.allTemplates = templatesResult.Results.map(t => this.buildTemplateCard(t, contents));\n                this.categories = this.extractCategories(this.allTemplates);\n                this.applyFilter();\n            }\n        } catch (error) {\n            console.error('Error loading templates:', error);\n        } finally {\n            this.isLoading = false;\n            this.cdr.detectChanges();\n        }\n    }\n\n    private buildTemplateCard(template: MJTemplateEntity, allContents: MJTemplateContentEntity[]): TemplateCardData {\n        const templateContents = allContents.filter(c => UUIDsEqual(c.TemplateID, template.ID));\n        const contentTypes = [...new Set(templateContents.map(c => c.TypeID ? 'Content' : 'Text'))];\n        const category = template.Category || 'Uncategorized';\n        const lastUpdated = template.Get('__mj_UpdatedAt') as Date | null;\n\n        return {\n            Entity: template,\n            ContentTypes: contentTypes.length > 0 ? contentTypes : [],\n            LastUpdated: lastUpdated,\n            CategoryName: category\n        };\n    }\n\n    private extractCategories(cards: TemplateCardData[]): string[] {\n        const cats = new Set(cards.map(c => c.CategoryName));\n        return Array.from(cats).sort();\n    }\n\n    public getCategoryCount(category: string): number {\n        return this.allTemplates.filter(t => t.CategoryName === category).length;\n    }\n\n    public onSearchValue(value: string): void {\n        this.searchTerm = (value ?? '').toLowerCase();\n        this.applyFilter();\n    }\n\n    public onCategoryFilter(category: string): void {\n        this.categoryFilter = category;\n        this.applyFilter();\n    }\n\n    private applyFilter(): void {\n        let filtered = this.allTemplates;\n\n        if (this.categoryFilter) {\n            filtered = filtered.filter(t => t.CategoryName === this.categoryFilter);\n        }\n\n        if (this.searchTerm) {\n            filtered = filtered.filter(t =>\n                t.Entity.Name?.toLowerCase().includes(this.searchTerm) ||\n                t.Entity.Description?.toLowerCase().includes(this.searchTerm) ||\n                t.CategoryName.toLowerCase().includes(this.searchTerm)\n            );\n        }\n\n        this.filteredTemplates = filtered;\n        this.cdr.detectChanges();\n    }\n\n    public openTemplate(template: MJTemplateEntity): void {\n        const pk = new CompositeKey();\n        pk.LoadFromEntityInfoAndRecord(this.ProviderToUse.Entities.find(e => e.Name === 'MJ: Templates')!, template);\n        this.navService.OpenEntityRecord('MJ: Templates', pk);\n    }\n\n    public addNewTemplate(): void {\n        this.navService.OpenEntityRecord('MJ: Templates', new CompositeKey());\n    }\n\n    public getContentTypeIcon(type: string): string {\n        const t = type.toLowerCase();\n        if (t.includes('html')) return 'fa-solid fa-code';\n        if (t.includes('text') || t.includes('plain')) return 'fa-solid fa-align-left';\n        if (t.includes('sms')) return 'fa-solid fa-comment-sms';\n        return 'fa-solid fa-file';\n    }\n\n    async GetResourceDisplayName(data: ResourceData): Promise<string> {\n        return 'Templates';\n    }\n\n    async GetResourceIconClass(data: ResourceData): Promise<string> {\n        return 'fa-solid fa-file-lines';\n    }\n}\n"]}
+{"version":3,"file":"communication-templates-resource.component.js","sourceRoot":"","sources":["../../src/Communication/communication-templates-resource.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';\nimport { ResourceData, MJTemplateEntity, MJTemplateContentEntity } from '@memberjunction/core-entities';\nimport { RegisterClass , UUIDsEqual } from '@memberjunction/global';\nimport { BaseResourceComponent, NavigationService } from '@memberjunction/ng-shared';\nimport { Metadata, RunView, CompositeKey } from '@memberjunction/core';\nimport { FilterFieldConfig } from '@memberjunction/ng-ui-components';\n\ninterface TemplateCardData {\n    Entity: MJTemplateEntity;\n    ContentTypes: string[];\n    LastUpdated: Date | null;\n    CategoryName: string;\n}\n@RegisterClass(BaseResourceComponent, 'CommunicationTemplatesResource')\n@Component({\n  standalone: false,\n    selector: 'mj-communication-templates-resource',\n    template: `\n    <mj-page-layout>\n      <mj-page-header Title=\"Templates\" Icon=\"fa-solid fa-file-lines\" Subtitle=\"Manage reusable message templates\">\n        <div actions>\n          <button mjButton variant=\"primary\" size=\"sm\" (click)=\"addNewTemplate()\">\n            <i class=\"fa-solid fa-plus\"></i> <span class=\"action-btn-label\">New Template</span>\n          </button>\n        </div>\n        <div toolbar>\n          <mj-page-search\n            Placeholder=\"Search templates...\"\n            (ValueChange)=\"onSearchValue($event)\">\n          </mj-page-search>\n          <mj-filter-popover\n            [ActiveCount]=\"ActiveFilterCount\"\n            [ShowClearAll]=\"ActiveFilterCount > 0\"\n            (ClearAllRequested)=\"resetFilters()\">\n            <mj-filter-panel\n              [Fields]=\"filterFields\"\n              [Values]=\"filterValues\"\n              (ValuesChange)=\"onFilterValuesChange($event)\"\n              (Reset)=\"resetFilters()\">\n            </mj-filter-panel>\n          </mj-filter-popover>\n        </div>\n      </mj-page-header>\n\n      <mj-page-body>\n        @if (isLoading) {\n          <div class=\"loading-state\">\n            <mj-loading text=\"Loading templates...\"></mj-loading>\n          </div>\n        } @else {\n          <div class=\"templates-grid\">\n            @for (card of filteredTemplates; track card) {\n              <div class=\"template-card\" (click)=\"openTemplate(card.Entity)\">\n                <div class=\"template-card-header\">\n                  <div class=\"template-icon\">\n                    <i class=\"fa-solid fa-file-lines\"></i>\n                  </div>\n                  <div class=\"template-title-area\">\n                    <div class=\"template-name\">{{card.Entity.Name}}</div>\n                    <div class=\"template-category\">{{card.CategoryName}}</div>\n                  </div>\n                </div>\n                @if (card.Entity.Description) {\n                  <div class=\"template-description\">\n                    {{card.Entity.Description}}\n                  </div>\n                }\n                <div class=\"template-meta\">\n                  <div class=\"template-content-types\">\n                    @for (ct of card.ContentTypes; track ct) {\n                      <span class=\"content-type-chip\">\n                        <i [class]=\"getContentTypeIcon(ct)\"></i> {{ct}}\n                      </span>\n                    }\n                    @if (card.ContentTypes.length === 0) {\n                      <span class=\"content-type-chip empty\">\n                        No content\n                      </span>\n                    }\n                  </div>\n                  @if (card.LastUpdated) {\n                    <div class=\"template-updated\">\n                      Updated {{card.LastUpdated | date:'mediumDate'}}\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n            @if (filteredTemplates.length === 0) {\n              <div class=\"empty-state\">\n                <i class=\"fa-solid fa-file-lines\"></i>\n                <p>No templates found matching your criteria</p>\n              </div>\n            }\n          </div>\n        }\n      </mj-page-body>\n    </mj-page-layout>\n    `,\n    styles: [`\n    .loading-state {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 80px 0;\n    }\n\n    /* GRID */\n    .templates-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n        gap: 16px;\n    }\n\n    .template-card {\n        background: var(--mj-bg-surface-card);\n        border: 1px solid var(--mj-border-default);\n        border-radius: 12px;\n        padding: 20px;\n        cursor: pointer;\n        transition: all 0.15s ease;\n    }\n    .template-card:hover {\n        box-shadow: 0 2px 8px var(--mj-shadow-md);\n        border-color: var(--mj-border-strong);\n    }\n\n    .template-card-header {\n        display: flex;\n        align-items: center;\n        gap: 14px;\n        margin-bottom: 12px;\n    }\n    .template-icon {\n        width: 40px; height: 40px;\n        border-radius: 8px;\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .template-title-area { flex: 1; min-width: 0; }\n    .template-name {\n        font-size: 14px; font-weight: 700;\n        color: var(--mj-text-primary);\n        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n    }\n    .template-category {\n        font-size: 11px;\n        color: var(--mj-text-muted);\n        margin-top: 2px;\n    }\n\n    .template-description {\n        font-size: 12px;\n        color: var(--mj-text-muted);\n        line-height: 1.5;\n        margin-bottom: 12px;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n    }\n\n    .template-meta {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n    .template-content-types {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 6px;\n    }\n    .content-type-chip {\n        display: inline-flex; align-items: center;\n        gap: 4px; padding: 3px 8px;\n        border-radius: 10px; font-size: 10px; font-weight: 500;\n        background: var(--mj-bg-surface);\n        color: var(--mj-text-muted);\n    }\n    .content-type-chip.empty {\n        font-style: italic;\n    }\n    .template-updated {\n        font-size: 10px;\n        color: var(--mj-text-muted);\n        white-space: nowrap;\n    }\n\n    /* EMPTY STATE */\n    .empty-state {\n        grid-column: 1 / -1;\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 64px 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 CommunicationTemplatesResourceComponent extends BaseResourceComponent implements OnInit, OnDestroy {\n    public allTemplates: TemplateCardData[] = [];\n    public filteredTemplates: TemplateCardData[] = [];\n    public categories: string[] = [];\n    public categoryFilter = '';\n    public isLoading = false;\n    private searchTerm = '';\n\n    constructor(private cdr: ChangeDetectorRef, private navService: NavigationService) {\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 [templatesResult, contentsResult] = await Promise.all([\n                rv.RunView<MJTemplateEntity>({\n                    EntityName: 'MJ: Templates',\n                    OrderBy: 'Name ASC',\n                    ResultType: 'entity_object'\n                }),\n                rv.RunView<MJTemplateContentEntity>({\n                    EntityName: 'MJ: Template Contents',\n                    ResultType: 'entity_object'\n                })\n            ]);\n\n            if (templatesResult.Success) {\n                const contents = contentsResult.Success ? contentsResult.Results : [];\n                this.allTemplates = templatesResult.Results.map(t => this.buildTemplateCard(t, contents));\n                this.categories = this.extractCategories(this.allTemplates);\n                this.applyFilter();\n            }\n        } catch (error) {\n            console.error('Error loading templates:', error);\n        } finally {\n            this.isLoading = false;\n            this.cdr.detectChanges();\n        }\n    }\n\n    private buildTemplateCard(template: MJTemplateEntity, allContents: MJTemplateContentEntity[]): TemplateCardData {\n        const templateContents = allContents.filter(c => UUIDsEqual(c.TemplateID, template.ID));\n        const contentTypes = [...new Set(templateContents.map(c => c.TypeID ? 'Content' : 'Text'))];\n        const category = template.Category || 'Uncategorized';\n        const lastUpdated = template.Get('__mj_UpdatedAt') as Date | null;\n\n        return {\n            Entity: template,\n            ContentTypes: contentTypes.length > 0 ? contentTypes : [],\n            LastUpdated: lastUpdated,\n            CategoryName: category\n        };\n    }\n\n    private extractCategories(cards: TemplateCardData[]): string[] {\n        const cats = new Set(cards.map(c => c.CategoryName));\n        return Array.from(cats).sort();\n    }\n\n    public getCategoryCount(category: string): number {\n        return this.allTemplates.filter(t => t.CategoryName === category).length;\n    }\n\n    public onSearchValue(value: string): void {\n        this.searchTerm = (value ?? '').toLowerCase();\n        this.applyFilter();\n    }\n\n    public onCategoryFilter(category: string): void {\n        this.categoryFilter = category;\n        this.applyFilter();\n    }\n\n    // -- Concise chrome: Category lives behind the one Filter popover ---------\n\n    public get filterFields(): FilterFieldConfig[] {\n        return [{\n            key: 'category',\n            type: 'chips',\n            label: 'Category',\n            chipOptions: [\n                { text: 'All', value: '' },\n                ...this.categories.map(c => ({ text: c, value: c })),\n            ],\n        }];\n    }\n\n    public get filterValues(): Record<string, unknown> {\n        return { category: this.categoryFilter };\n    }\n\n    public get ActiveFilterCount(): number {\n        return this.categoryFilter ? 1 : 0;\n    }\n\n    public onFilterValuesChange(values: Record<string, unknown>): void {\n        this.onCategoryFilter((values['category'] as string) ?? '');\n    }\n\n    public resetFilters(): void {\n        this.onCategoryFilter('');\n    }\n\n    private applyFilter(): void {\n        let filtered = this.allTemplates;\n\n        if (this.categoryFilter) {\n            filtered = filtered.filter(t => t.CategoryName === this.categoryFilter);\n        }\n\n        if (this.searchTerm) {\n            filtered = filtered.filter(t =>\n                t.Entity.Name?.toLowerCase().includes(this.searchTerm) ||\n                t.Entity.Description?.toLowerCase().includes(this.searchTerm) ||\n                t.CategoryName.toLowerCase().includes(this.searchTerm)\n            );\n        }\n\n        this.filteredTemplates = filtered;\n        this.cdr.detectChanges();\n    }\n\n    public openTemplate(template: MJTemplateEntity): void {\n        const pk = new CompositeKey();\n        pk.LoadFromEntityInfoAndRecord(this.ProviderToUse.Entities.find(e => e.Name === 'MJ: Templates')!, template);\n        this.navService.OpenEntityRecord('MJ: Templates', pk);\n    }\n\n    public addNewTemplate(): void {\n        this.navService.OpenEntityRecord('MJ: Templates', new CompositeKey());\n    }\n\n    public getContentTypeIcon(type: string): string {\n        const t = type.toLowerCase();\n        if (t.includes('html')) return 'fa-solid fa-code';\n        if (t.includes('text') || t.includes('plain')) return 'fa-solid fa-align-left';\n        if (t.includes('sms')) return 'fa-solid fa-comment-sms';\n        return 'fa-solid fa-file';\n    }\n\n    async GetResourceDisplayName(data: ResourceData): Promise<string> {\n        return 'Templates';\n    }\n\n    async GetResourceIconClass(data: ResourceData): Promise<string> {\n        return 'fa-solid fa-file-lines';\n    }\n}\n"]}