@memberjunction/ng-dashboards 5.22.0 → 5.24.0

package/dist/Actions/components/explorer/action-toolbar.component.js

@@ -3,27 +3,18 @@ import { Subject } from 'rxjs';
 import { takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 import * as i1 from "../../services/action-explorer-state.service";
-import * as i2 from "@progress/kendo-angular-buttons";
-import * as i3 from "@progress/kendo-angular-inputs";
+import * as i2 from "@memberjunction/ng-ui-components";
 const _forTrack0 = ($index, $item) => $item.value;
 const _forTrack1 = ($index, $item) => $item.field;
-function ActionToolbarComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 29);
-} }
-function ActionToolbarComponent_Conditional_5_ng_template_0_Template(rf, ctx) { if (rf & 1) {
+function ActionToolbarComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 30);
-    i0.ɵɵlistener("click", function ActionToolbarComponent_Conditional_5_ng_template_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.clearSearch()); });
+    i0.ɵɵlistener("click", function ActionToolbarComponent_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.clearSearch()); });
     i0.ɵɵelement(1, "i", 31);
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵproperty("fillMode", "flat")("size", "small");
-} }
-function ActionToolbarComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ActionToolbarComponent_Conditional_5_ng_template_0_Template, 2, 2, "ng-template", 5);
 } }
-function ActionToolbarComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 9);
+function ActionToolbarComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 10);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -31,21 +22,19 @@ function ActionToolbarComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.getActiveFilterCount());
 } }
-function ActionToolbarComponent_Conditional_12_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function ActionToolbarComponent_Conditional_13_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 30);
-    i0.ɵɵlistener("click", function ActionToolbarComponent_Conditional_12_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.StateService.setStatusFilter([])); });
+    i0.ɵɵelementStart(0, "button", 38);
+    i0.ɵɵlistener("click", function ActionToolbarComponent_Conditional_13_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.StateService.setStatusFilter([])); });
     i0.ɵɵtext(1, " Clear ");
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵproperty("fillMode", "flat")("size", "small");
 } }
-function ActionToolbarComponent_Conditional_12_For_8_Template(rf, ctx) { if (rf & 1) {
+function ActionToolbarComponent_Conditional_13_For_8_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "label", 38)(1, "input", 39);
-    i0.ɵɵlistener("change", function ActionToolbarComponent_Conditional_12_For_8_Template_input_change_1_listener() { const status_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleStatus(status_r5.value)); });
+    i0.ɵɵelementStart(0, "label", 39)(1, "input", 40);
+    i0.ɵɵlistener("change", function ActionToolbarComponent_Conditional_13_For_8_Template_input_change_1_listener() { const status_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleStatus(status_r5.value)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(2, "span", 40);
+    i0.ɵɵelement(2, "span", 41);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -59,19 +48,17 @@ function ActionToolbarComponent_Conditional_12_For_8_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", status_r5.label, " ");
 } }
-function ActionToolbarComponent_Conditional_12_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+function ActionToolbarComponent_Conditional_13_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 30);
-    i0.ɵɵlistener("click", function ActionToolbarComponent_Conditional_12_Conditional_13_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.StateService.setTypeFilter([])); });
+    i0.ɵɵelementStart(0, "button", 38);
+    i0.ɵɵlistener("click", function ActionToolbarComponent_Conditional_13_Conditional_13_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.StateService.setTypeFilter([])); });
     i0.ɵɵtext(1, " Clear ");
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵproperty("fillMode", "flat")("size", "small");
 } }
-function ActionToolbarComponent_Conditional_12_For_16_Template(rf, ctx) { if (rf & 1) {
+function ActionToolbarComponent_Conditional_13_For_16_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "label", 38)(1, "input", 39);
-    i0.ɵɵlistener("change", function ActionToolbarComponent_Conditional_12_For_16_Template_input_change_1_listener() { const type_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleType(type_r8.value)); });
+    i0.ɵɵelementStart(0, "label", 39)(1, "input", 40);
+    i0.ɵɵlistener("change", function ActionToolbarComponent_Conditional_13_For_16_Template_input_change_1_listener() { const type_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleType(type_r8.value)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelement(2, "i");
     i0.ɵɵtext(3);
@@ -87,35 +74,32 @@ function ActionToolbarComponent_Conditional_12_For_16_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", type_r8.label, " ");
 } }
-function ActionToolbarComponent_Conditional_12_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+function ActionToolbarComponent_Conditional_13_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 37)(1, "button", 27);
-    i0.ɵɵlistener("click", function ActionToolbarComponent_Conditional_12_Conditional_17_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.clearFilters()); });
+    i0.ɵɵelementStart(0, "div", 37)(1, "button", 42);
+    i0.ɵɵlistener("click", function ActionToolbarComponent_Conditional_13_Conditional_17_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.clearFilters()); });
     i0.ɵɵelement(2, "i", 31);
     i0.ɵɵtext(3, " Clear All Filters ");
     i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("fillMode", "flat")("themeColor", "error");
 } }
-function ActionToolbarComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 10)(1, "div", 32)(2, "div", 33)(3, "span");
+function ActionToolbarComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11)(1, "div", 32)(2, "div", 33)(3, "span");
     i0.ɵɵtext(4, "Status");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, ActionToolbarComponent_Conditional_12_Conditional_5_Template, 2, 2, "button", 34);
+    i0.ɵɵconditionalCreate(5, ActionToolbarComponent_Conditional_13_Conditional_5_Template, 2, 0, "button", 34);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "div", 35);
-    i0.ɵɵrepeaterCreate(7, ActionToolbarComponent_Conditional_12_For_8_Template, 4, 5, "label", 36, _forTrack0);
+    i0.ɵɵrepeaterCreate(7, ActionToolbarComponent_Conditional_13_For_8_Template, 4, 5, "label", 36, _forTrack0);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(9, "div", 32)(10, "div", 33)(11, "span");
     i0.ɵɵtext(12, "Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(13, ActionToolbarComponent_Conditional_12_Conditional_13_Template, 2, 2, "button", 34);
+    i0.ɵɵconditionalCreate(13, ActionToolbarComponent_Conditional_13_Conditional_13_Template, 2, 0, "button", 34);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(14, "div", 35);
-    i0.ɵɵrepeaterCreate(15, ActionToolbarComponent_Conditional_12_For_16_Template, 4, 6, "label", 36, _forTrack0);
+    i0.ɵɵrepeaterCreate(15, ActionToolbarComponent_Conditional_13_For_16_Template, 4, 6, "label", 36, _forTrack0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(17, ActionToolbarComponent_Conditional_12_Conditional_17_Template, 4, 2, "div", 37);
+    i0.ɵɵconditionalCreate(17, ActionToolbarComponent_Conditional_13_Conditional_17_Template, 4, 0, "div", 37);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -130,34 +114,34 @@ function ActionToolbarComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.hasActiveFilters() ? 17 : -1);
 } }
-function ActionToolbarComponent_Conditional_13_For_2_Template(rf, ctx) { if (rf & 1) {
+function ActionToolbarComponent_Conditional_14_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-chip", 42);
-    i0.ɵɵlistener("remove", function ActionToolbarComponent_Conditional_13_For_2_Template_kendo_chip_remove_0_listener() { const status_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleStatus(status_r11)); });
+    i0.ɵɵelementStart(0, "span", 44);
+    i0.ɵɵlistener("click", function ActionToolbarComponent_Conditional_14_For_2_Template_span_click_0_listener() { const status_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleStatus(status_r11)); });
     i0.ɵɵtext(1);
+    i0.ɵɵelement(2, "i", 31);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const status_r11 = ctx.$implicit;
-    i0.ɵɵproperty("removable", true)("size", "small");
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Status: ", status_r11, " ");
 } }
-function ActionToolbarComponent_Conditional_13_For_4_Template(rf, ctx) { if (rf & 1) {
+function ActionToolbarComponent_Conditional_14_For_4_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-chip", 42);
-    i0.ɵɵlistener("remove", function ActionToolbarComponent_Conditional_13_For_4_Template_kendo_chip_remove_0_listener() { const type_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleType(type_r13)); });
+    i0.ɵɵelementStart(0, "span", 44);
+    i0.ɵɵlistener("click", function ActionToolbarComponent_Conditional_14_For_4_Template_span_click_0_listener() { const type_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleType(type_r13)); });
     i0.ɵɵtext(1);
+    i0.ɵɵelement(2, "i", 31);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const type_r13 = ctx.$implicit;
-    i0.ɵɵproperty("removable", true)("size", "small");
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Type: ", type_r13 === "Generated" ? "AI Generated" : type_r13, " ");
 } }
-function ActionToolbarComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 11);
-    i0.ɵɵrepeaterCreate(1, ActionToolbarComponent_Conditional_13_For_2_Template, 2, 3, "kendo-chip", 41, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵrepeaterCreate(3, ActionToolbarComponent_Conditional_13_For_4_Template, 2, 3, "kendo-chip", 41, i0.ɵɵrepeaterTrackByIdentity);
+function ActionToolbarComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵrepeaterCreate(1, ActionToolbarComponent_Conditional_14_For_2_Template, 3, 1, "span", 43, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(3, ActionToolbarComponent_Conditional_14_For_4_Template, 3, 1, "span", 43, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -166,8 +150,8 @@ function ActionToolbarComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r1.Filters.types);
 } }
-function ActionToolbarComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 15);
+function ActionToolbarComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 16);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -175,19 +159,19 @@ function ActionToolbarComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("of ", ctx_r1.TotalCount);
 } }
-function ActionToolbarComponent_Conditional_26_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 46);
+function ActionToolbarComponent_Conditional_27_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 48);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵclassMap(ctx_r1.SortDirection === "asc" ? "fa-solid fa-arrow-up" : "fa-solid fa-arrow-down");
 } }
-function ActionToolbarComponent_Conditional_26_For_2_Template(rf, ctx) { if (rf & 1) {
+function ActionToolbarComponent_Conditional_27_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 44);
-    i0.ɵɵlistener("click", function ActionToolbarComponent_Conditional_26_For_2_Template_button_click_0_listener() { const option_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setSortField(option_r15.field)); });
+    i0.ɵɵelementStart(0, "button", 46);
+    i0.ɵɵlistener("click", function ActionToolbarComponent_Conditional_27_For_2_Template_button_click_0_listener() { const option_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setSortField(option_r15.field)); });
     i0.ɵɵelement(1, "i");
     i0.ɵɵtext(2);
-    i0.ɵɵconditionalCreate(3, ActionToolbarComponent_Conditional_26_For_2_Conditional_3_Template, 1, 2, "i", 45);
+    i0.ɵɵconditionalCreate(3, ActionToolbarComponent_Conditional_27_For_2_Conditional_3_Template, 1, 2, "i", 47);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const option_r15 = ctx.$implicit;
@@ -200,9 +184,9 @@ function ActionToolbarComponent_Conditional_26_For_2_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.SortField === option_r15.field ? 3 : -1);
 } }
-function ActionToolbarComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 17);
-    i0.ɵɵrepeaterCreate(1, ActionToolbarComponent_Conditional_26_For_2_Template, 4, 6, "button", 43, _forTrack1);
+function ActionToolbarComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18);
+    i0.ɵɵrepeaterCreate(1, ActionToolbarComponent_Conditional_27_For_2_Template, 4, 6, "button", 45, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -369,108 +353,103 @@ export class ActionToolbarComponent {
         this.RefreshClick.emit();
     }
     static ɵfac = function ActionToolbarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ActionToolbarComponent)(i0.ɵɵdirectiveInject(i1.ActionExplorerStateService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActionToolbarComponent, selectors: [["mj-action-toolbar"]], inputs: { TotalCount: "TotalCount", FilteredCount: "FilteredCount" }, outputs: { NewActionClick: "NewActionClick", RefreshClick: "RefreshClick" }, standalone: false, decls: 39, vars: 29, consts: [[1, "action-toolbar"], [1, "toolbar-left"], [1, "search-container"], [3, "valueChange", "placeholder", "value"], ["kendoTextBoxPrefixTemplate", ""], ["kendoTextBoxSuffixTemplate", ""], [1, "dropdown-container", 3, "clickOutside"], ["kendoButton", "", 3, "click", "fillMode"], [1, "fa-solid", "fa-filter"], [1, "filter-badge"], [1, "dropdown-menu", "filters-menu"], [1, "active-filters"], [1, "toolbar-right"], [1, "results-count"], [1, "count"], [1, "of-total"], [1, "label"], [1, "dropdown-menu", "sort-menu"], [1, "view-toggle"], ["kendoButton", "", "title", "Card View", 3, "click", "fillMode", "themeColor"], [1, "fa-solid", "fa-grip"], ["kendoButton", "", "title", "List View", 3, "click", "fillMode", "themeColor"], [1, "fa-solid", "fa-list"], ["kendoButton", "", "title", "Compact View", 3, "click", "fillMode", "themeColor"], [1, "fa-solid", "fa-bars"], ["kendoButton", "", "title", "Refresh", 3, "click", "fillMode"], [1, "fa-solid", "fa-refresh"], ["kendoButton", "", 3, "click", "fillMode", "themeColor"], [1, "fa-solid", "fa-plus"], [1, "fa-solid", "fa-search"], ["kendoButton", "", 3, "click", "fillMode", "size"], [1, "fa-solid", "fa-times"], [1, "dropdown-section"], [1, "section-header"], ["kendoButton", "", 3, "fillMode", "size"], [1, "filter-options"], [1, "filter-option", 3, "selected"], [1, "dropdown-footer"], [1, "filter-option"], ["type", "checkbox", 3, "change", "checked"], [1, "status-dot"], [3, "removable", "size"], [3, "remove", "removable", "size"], [1, "sort-option", 3, "selected"], [1, "sort-option", 3, "click"], [1, "direction-icon", 3, "class"], [1, "direction-icon"]], template: function ActionToolbarComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "kendo-textbox", 3);
-            i0.ɵɵlistener("valueChange", function ActionToolbarComponent_Template_kendo_textbox_valueChange_3_listener($event) { return ctx.onSearchInput($event); });
-            i0.ɵɵtemplate(4, ActionToolbarComponent_ng_template_4_Template, 1, 0, "ng-template", 4);
-            i0.ɵɵconditionalCreate(5, ActionToolbarComponent_Conditional_5_Template, 1, 0, null, 5);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActionToolbarComponent, selectors: [["mj-action-toolbar"]], inputs: { TotalCount: "TotalCount", FilteredCount: "FilteredCount" }, outputs: { NewActionClick: "NewActionClick", RefreshClick: "RefreshClick" }, standalone: false, decls: 40, vars: 20, consts: [[1, "action-toolbar"], [1, "toolbar-left"], [1, "search-container"], [1, "search-input-wrapper"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", "placeholder", "Search actions...", 1, "mj-input", 3, "input", "value"], ["mjButton", "", "variant", "flat", "size", "sm", 1, "search-clear"], [1, "dropdown-container", 3, "clickOutside"], ["mjButton", "", "variant", "outline", 3, "click"], [1, "fa-solid", "fa-filter"], [1, "filter-badge"], [1, "dropdown-menu", "filters-menu"], [1, "active-filters"], [1, "toolbar-right"], [1, "results-count"], [1, "count"], [1, "of-total"], [1, "label"], [1, "dropdown-menu", "sort-menu"], [1, "view-toggle"], ["mjButton", "", "title", "Card View", 3, "click", "variant"], [1, "fa-solid", "fa-grip"], ["mjButton", "", "title", "List View", 3, "click", "variant"], [1, "fa-solid", "fa-list"], ["mjButton", "", "title", "Compact View", 3, "click", "variant"], [1, "fa-solid", "fa-bars"], ["mjButton", "", "variant", "flat", "title", "Refresh", 3, "click"], [1, "fa-solid", "fa-refresh"], ["mjButton", "", "variant", "primary", 3, "click"], [1, "fa-solid", "fa-plus"], ["mjButton", "", "variant", "flat", "size", "sm", 1, "search-clear", 3, "click"], [1, "fa-solid", "fa-times"], [1, "dropdown-section"], [1, "section-header"], ["mjButton", "", "variant", "flat", "size", "sm"], [1, "filter-options"], [1, "filter-option", 3, "selected"], [1, "dropdown-footer"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "click"], [1, "filter-option"], ["type", "checkbox", 3, "change", "checked"], [1, "status-dot"], ["mjButton", "", "variant", "danger", 3, "click"], [1, "status-chip", "removable"], [1, "status-chip", "removable", 3, "click"], [1, "sort-option", 3, "selected"], [1, "sort-option", 3, "click"], [1, "direction-icon", 3, "class"], [1, "direction-icon"]], template: function ActionToolbarComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
+            i0.ɵɵelement(4, "i", 4);
+            i0.ɵɵelementStart(5, "input", 5);
+            i0.ɵɵlistener("input", function ActionToolbarComponent_Template_input_input_5_listener($event) { return ctx.onSearchInput($event.target.value); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(6, ActionToolbarComponent_Conditional_6_Template, 2, 0, "button", 6);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(6, "div", 6);
-            i0.ɵɵlistener("clickOutside", function ActionToolbarComponent_Template_div_clickOutside_6_listener() { return ctx.ShowFiltersDropdown = false; });
-            i0.ɵɵelementStart(7, "button", 7);
-            i0.ɵɵlistener("click", function ActionToolbarComponent_Template_button_click_7_listener() { return ctx.toggleFiltersDropdown(); });
-            i0.ɵɵelement(8, "i", 8);
-            i0.ɵɵtext(9, " Filters ");
-            i0.ɵɵconditionalCreate(10, ActionToolbarComponent_Conditional_10_Template, 2, 1, "span", 9);
-            i0.ɵɵelement(11, "i");
+            i0.ɵɵelementStart(7, "div", 7);
+            i0.ɵɵlistener("clickOutside", function ActionToolbarComponent_Template_div_clickOutside_7_listener() { return ctx.ShowFiltersDropdown = false; });
+            i0.ɵɵelementStart(8, "button", 8);
+            i0.ɵɵlistener("click", function ActionToolbarComponent_Template_button_click_8_listener() { return ctx.toggleFiltersDropdown(); });
+            i0.ɵɵelement(9, "i", 9);
+            i0.ɵɵtext(10, " Filters ");
+            i0.ɵɵconditionalCreate(11, ActionToolbarComponent_Conditional_11_Template, 2, 1, "span", 10);
+            i0.ɵɵelement(12, "i");
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(12, ActionToolbarComponent_Conditional_12_Template, 18, 3, "div", 10);
+            i0.ɵɵconditionalCreate(13, ActionToolbarComponent_Conditional_13_Template, 18, 3, "div", 11);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(13, ActionToolbarComponent_Conditional_13_Template, 5, 0, "div", 11);
+            i0.ɵɵconditionalCreate(14, ActionToolbarComponent_Conditional_14_Template, 5, 0, "div", 12);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(14, "div", 12)(15, "div", 13)(16, "span", 14);
-            i0.ɵɵtext(17);
+            i0.ɵɵelementStart(15, "div", 13)(16, "div", 14)(17, "span", 15);
+            i0.ɵɵtext(18);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(18, ActionToolbarComponent_Conditional_18_Template, 2, 1, "span", 15);
-            i0.ɵɵelementStart(19, "span", 16);
-            i0.ɵɵtext(20, "actions");
+            i0.ɵɵconditionalCreate(19, ActionToolbarComponent_Conditional_19_Template, 2, 1, "span", 16);
+            i0.ɵɵelementStart(20, "span", 17);
+            i0.ɵɵtext(21, "actions");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(21, "div", 6);
-            i0.ɵɵlistener("clickOutside", function ActionToolbarComponent_Template_div_clickOutside_21_listener() { return ctx.ShowSortDropdown = false; });
-            i0.ɵɵelementStart(22, "button", 7);
-            i0.ɵɵlistener("click", function ActionToolbarComponent_Template_button_click_22_listener() { return ctx.toggleSortDropdown(); });
-            i0.ɵɵelement(23, "i");
-            i0.ɵɵtext(24);
-            i0.ɵɵelement(25, "i");
+            i0.ɵɵelementStart(22, "div", 7);
+            i0.ɵɵlistener("clickOutside", function ActionToolbarComponent_Template_div_clickOutside_22_listener() { return ctx.ShowSortDropdown = false; });
+            i0.ɵɵelementStart(23, "button", 8);
+            i0.ɵɵlistener("click", function ActionToolbarComponent_Template_button_click_23_listener() { return ctx.toggleSortDropdown(); });
+            i0.ɵɵelement(24, "i");
+            i0.ɵɵtext(25);
+            i0.ɵɵelement(26, "i");
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(26, ActionToolbarComponent_Conditional_26_Template, 3, 0, "div", 17);
+            i0.ɵɵconditionalCreate(27, ActionToolbarComponent_Conditional_27_Template, 3, 0, "div", 18);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(27, "div", 18)(28, "button", 19);
-            i0.ɵɵlistener("click", function ActionToolbarComponent_Template_button_click_28_listener() { return ctx.setViewMode("card"); });
-            i0.ɵɵelement(29, "i", 20);
+            i0.ɵɵelementStart(28, "div", 19)(29, "button", 20);
+            i0.ɵɵlistener("click", function ActionToolbarComponent_Template_button_click_29_listener() { return ctx.setViewMode("card"); });
+            i0.ɵɵelement(30, "i", 21);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(30, "button", 21);
-            i0.ɵɵlistener("click", function ActionToolbarComponent_Template_button_click_30_listener() { return ctx.setViewMode("list"); });
-            i0.ɵɵelement(31, "i", 22);
+            i0.ɵɵelementStart(31, "button", 22);
+            i0.ɵɵlistener("click", function ActionToolbarComponent_Template_button_click_31_listener() { return ctx.setViewMode("list"); });
+            i0.ɵɵelement(32, "i", 23);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(32, "button", 23);
-            i0.ɵɵlistener("click", function ActionToolbarComponent_Template_button_click_32_listener() { return ctx.setViewMode("compact"); });
-            i0.ɵɵelement(33, "i", 24);
+            i0.ɵɵelementStart(33, "button", 24);
+            i0.ɵɵlistener("click", function ActionToolbarComponent_Template_button_click_33_listener() { return ctx.setViewMode("compact"); });
+            i0.ɵɵelement(34, "i", 25);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(34, "button", 25);
-            i0.ɵɵlistener("click", function ActionToolbarComponent_Template_button_click_34_listener() { return ctx.onRefresh(); });
-            i0.ɵɵelement(35, "i", 26);
+            i0.ɵɵelementStart(35, "button", 26);
+            i0.ɵɵlistener("click", function ActionToolbarComponent_Template_button_click_35_listener() { return ctx.onRefresh(); });
+            i0.ɵɵelement(36, "i", 27);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(36, "button", 27);
-            i0.ɵɵlistener("click", function ActionToolbarComponent_Template_button_click_36_listener() { return ctx.onNewAction(); });
-            i0.ɵɵelement(37, "i", 28);
-            i0.ɵɵtext(38, " New Action ");
+            i0.ɵɵelementStart(37, "button", 28);
+            i0.ɵɵlistener("click", function ActionToolbarComponent_Template_button_click_37_listener() { return ctx.onNewAction(); });
+            i0.ɵɵelement(38, "i", 29);
+            i0.ɵɵtext(39, " New Action ");
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("placeholder", "Search actions...")("value", ctx.Filters.searchTerm);
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.Filters.searchTerm ? 5 : -1);
+            i0.ɵɵadvance(5);
+            i0.ɵɵproperty("value", ctx.Filters.searchTerm);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.Filters.searchTerm ? 6 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵclassProp("active", ctx.hasActiveFilters());
-            i0.ɵɵproperty("fillMode", "outline");
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.getActiveFilterCount() > 0 ? 10 : -1);
+            i0.ɵɵconditional(ctx.getActiveFilterCount() > 0 ? 11 : -1);
             i0.ɵɵadvance();
             i0.ɵɵclassMap(ctx.ShowFiltersDropdown ? "fa-solid fa-chevron-up" : "fa-solid fa-chevron-down");
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.ShowFiltersDropdown ? 12 : -1);
+            i0.ɵɵconditional(ctx.ShowFiltersDropdown ? 13 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.hasActiveFilters() ? 13 : -1);
+            i0.ɵɵconditional(ctx.hasActiveFilters() ? 14 : -1);
             i0.ɵɵadvance(4);
             i0.ɵɵtextInterpolate(ctx.FilteredCount);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.FilteredCount !== ctx.TotalCount ? 18 : -1);
-            i0.ɵɵadvance(4);
-            i0.ɵɵproperty("fillMode", "outline");
-            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.FilteredCount !== ctx.TotalCount ? 19 : -1);
+            i0.ɵɵadvance(5);
             i0.ɵɵclassMap(ctx.getSortIcon());
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.getSortLabel(), " ");
             i0.ɵɵadvance();
             i0.ɵɵclassMap(ctx.ShowSortDropdown ? "fa-solid fa-chevron-up" : "fa-solid fa-chevron-down");
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.ShowSortDropdown ? 26 : -1);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("fillMode", ctx.ViewMode === "card" ? "solid" : "outline")("themeColor", ctx.ViewMode === "card" ? "primary" : "base");
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("fillMode", ctx.ViewMode === "list" ? "solid" : "outline")("themeColor", ctx.ViewMode === "list" ? "primary" : "base");
+            i0.ɵɵconditional(ctx.ShowSortDropdown ? 27 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("fillMode", ctx.ViewMode === "compact" ? "solid" : "outline")("themeColor", ctx.ViewMode === "compact" ? "primary" : "base");
+            i0.ɵɵproperty("variant", ctx.ViewMode === "card" ? "primary" : "outline");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("fillMode", "flat");
+            i0.ɵɵproperty("variant", ctx.ViewMode === "list" ? "primary" : "outline");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("fillMode", "solid")("themeColor", "primary");
-        } }, dependencies: [i2.ButtonComponent, i2.ChipComponent, i3.TextBoxComponent, i3.TextBoxSuffixTemplateDirective, i3.TextBoxPrefixTemplateDirective], styles: [".action-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 20px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  gap: 16px;\n  flex-wrap: wrap;\n}\n\n.toolbar-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n  flex-wrap: wrap;\n}\n\n.toolbar-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n\n\n.search-container[_ngcontent-%COMP%] {\n  min-width: 200px;\n  max-width: 320px;\n  flex: 1;\n}\n\n.search-container[_ngcontent-%COMP%]   kendo-textbox[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.search-container[_ngcontent-%COMP%]   i.fa-search[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n}\n\n\n\n.dropdown-container[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.dropdown-container[_ngcontent-%COMP%]    > button[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.dropdown-container[_ngcontent-%COMP%]    > button.active[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.dropdown-container[_ngcontent-%COMP%]    > button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:last-child {\n  font-size: 10px;\n  margin-left: 4px;\n}\n\n.filter-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 6px;\n  border-radius: 10px;\n  min-width: 18px;\n  text-align: center;\n}\n\n\n\n.dropdown-menu[_ngcontent-%COMP%] {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  z-index: 100;\n  min-width: 220px;\n  padding: 8px 0;\n}\n\n.dropdown-menu.sort-menu[_ngcontent-%COMP%] {\n  right: 0;\n  left: auto;\n}\n\n\n\n.dropdown-section[_ngcontent-%COMP%] {\n  padding: 8px 12px;\n}\n\n.dropdown-section[_ngcontent-%COMP%]:not(:last-child) {\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.section-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  color: var(--mj-text-muted);\n  letter-spacing: 0.5px;\n}\n\n.section-header[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  font-size: 11px;\n  padding: 2px 6px;\n}\n\n.filter-options[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.filter-option[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 8px;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background 0.15s ease;\n  font-size: 13px;\n}\n\n.filter-option[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.filter-option.selected[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.filter-option[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  display: none;\n}\n\n.filter-option[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\n  width: 18px;\n  color: var(--mj-text-muted);\n}\n\n.filter-option.selected[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.status-dot[_ngcontent-%COMP%] {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n}\n\n.status-dot[data-status=\"Active\"][_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n}\n\n.status-dot[data-status=\"Pending\"][_ngcontent-%COMP%] {\n  background: var(--mj-status-warning);\n}\n\n.status-dot[data-status=\"Disabled\"][_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n}\n\n.dropdown-footer[_ngcontent-%COMP%] {\n  padding: 8px 12px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.dropdown-footer[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n\n.sort-option[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 8px 12px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: 13px;\n  text-align: left;\n  transition: background 0.15s ease;\n}\n\n.sort-option[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.sort-option.selected[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.sort-option[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child {\n  width: 18px;\n  color: var(--mj-text-muted);\n}\n\n.sort-option.selected[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child {\n  color: var(--mj-brand-primary);\n}\n\n.sort-option[_ngcontent-%COMP%]   .direction-icon[_ngcontent-%COMP%] {\n  margin-left: auto;\n  font-size: 11px;\n}\n\n\n\n.active-filters[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.active-filters[_ngcontent-%COMP%]   kendo-chip[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n.results-count[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: baseline;\n  gap: 4px;\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n.results-count[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  font-size: 14px;\n}\n\n.results-count[_ngcontent-%COMP%]   .of-total[_ngcontent-%COMP%] {\n  opacity: 0.7;\n}\n\n\n\n.view-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.view-toggle[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  border-radius: 0;\n  border: none;\n  min-width: 36px;\n}\n\n.view-toggle[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:not(:last-child) {\n  border-right: 1px solid var(--mj-border-default);\n}\n\n\n\n@media (max-width: 1024px) {\n  .action-toolbar[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .toolbar-left[_ngcontent-%COMP%], \n   .toolbar-right[_ngcontent-%COMP%] {\n    width: 100%;\n    justify-content: flex-start;\n  }\n\n  .search-container[_ngcontent-%COMP%] {\n    max-width: none;\n    flex: 1;\n  }\n}\n\n@media (max-width: 640px) {\n  .toolbar-right[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n  }\n\n  .results-count[_ngcontent-%COMP%] {\n    order: -1;\n    width: 100%;\n  }\n}"], changeDetection: 0 });
+            i0.ɵɵproperty("variant", ctx.ViewMode === "compact" ? "primary" : "outline");
+        } }, dependencies: [i2.MJButtonDirective], styles: [".action-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 20px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  gap: 16px;\n  flex-wrap: wrap;\n}\n\n.toolbar-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n  flex-wrap: wrap;\n}\n\n.toolbar-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n\n\n.search-container[_ngcontent-%COMP%] {\n  min-width: 200px;\n  max-width: 320px;\n  flex: 1;\n}\n\n.search-container[_ngcontent-%COMP%]   i.fa-search[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n}\n\n\n\n.dropdown-container[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.dropdown-container[_ngcontent-%COMP%]    > button[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.dropdown-container[_ngcontent-%COMP%]    > button.active[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.dropdown-container[_ngcontent-%COMP%]    > button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:last-child {\n  font-size: 10px;\n  margin-left: 4px;\n}\n\n.filter-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 6px;\n  border-radius: 10px;\n  min-width: 18px;\n  text-align: center;\n}\n\n\n\n.dropdown-menu[_ngcontent-%COMP%] {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  z-index: 100;\n  min-width: 220px;\n  padding: 8px 0;\n}\n\n.dropdown-menu.sort-menu[_ngcontent-%COMP%] {\n  right: 0;\n  left: auto;\n}\n\n\n\n.dropdown-section[_ngcontent-%COMP%] {\n  padding: 8px 12px;\n}\n\n.dropdown-section[_ngcontent-%COMP%]:not(:last-child) {\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.section-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  color: var(--mj-text-muted);\n  letter-spacing: 0.5px;\n}\n\n.section-header[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  font-size: 11px;\n  padding: 2px 6px;\n}\n\n.filter-options[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.filter-option[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 8px;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background 0.15s ease;\n  font-size: 13px;\n}\n\n.filter-option[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.filter-option.selected[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.filter-option[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  display: none;\n}\n\n.filter-option[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\n  width: 18px;\n  color: var(--mj-text-muted);\n}\n\n.filter-option.selected[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.status-dot[_ngcontent-%COMP%] {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n}\n\n.status-dot[data-status=\"Active\"][_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n}\n\n.status-dot[data-status=\"Pending\"][_ngcontent-%COMP%] {\n  background: var(--mj-status-warning);\n}\n\n.status-dot[data-status=\"Disabled\"][_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n}\n\n.dropdown-footer[_ngcontent-%COMP%] {\n  padding: 8px 12px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.dropdown-footer[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n\n.sort-option[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 8px 12px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: 13px;\n  text-align: left;\n  transition: background 0.15s ease;\n}\n\n.sort-option[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.sort-option.selected[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.sort-option[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child {\n  width: 18px;\n  color: var(--mj-text-muted);\n}\n\n.sort-option.selected[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child {\n  color: var(--mj-brand-primary);\n}\n\n.sort-option[_ngcontent-%COMP%]   .direction-icon[_ngcontent-%COMP%] {\n  margin-left: auto;\n  font-size: 11px;\n}\n\n\n\n.active-filters[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n\n\n.results-count[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: baseline;\n  gap: 4px;\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n.results-count[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  font-size: 14px;\n}\n\n.results-count[_ngcontent-%COMP%]   .of-total[_ngcontent-%COMP%] {\n  opacity: 0.7;\n}\n\n\n\n.view-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.view-toggle[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  border-radius: 0;\n  border: none;\n  min-width: 36px;\n}\n\n.view-toggle[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:not(:last-child) {\n  border-right: 1px solid var(--mj-border-default);\n}\n\n\n\n@media (max-width: 1024px) {\n  .action-toolbar[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .toolbar-left[_ngcontent-%COMP%], \n   .toolbar-right[_ngcontent-%COMP%] {\n    width: 100%;\n    justify-content: flex-start;\n  }\n\n  .search-container[_ngcontent-%COMP%] {\n    max-width: none;\n    flex: 1;\n  }\n}\n\n@media (max-width: 640px) {\n  .toolbar-right[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n  }\n\n  .results-count[_ngcontent-%COMP%] {\n    order: -1;\n    width: 100%;\n  }\n}"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionToolbarComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-action-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"action-toolbar\">\n  <div class=\"toolbar-left\">\n    <!-- Search -->\n    <div class=\"search-container\">\n      <kendo-textbox\n        [placeholder]=\"'Search actions...'\"\n        [value]=\"Filters.searchTerm\"\n        (valueChange)=\"onSearchInput($event)\">\n        <ng-template kendoTextBoxPrefixTemplate>\n          <i class=\"fa-solid fa-search\"></i>\n        </ng-template>\n        @if (Filters.searchTerm) {\n          <ng-template kendoTextBoxSuffixTemplate>\n            <button kendoButton\n              [fillMode]=\"'flat'\"\n              [size]=\"'small'\"\n              (click)=\"clearSearch()\">\n              <i class=\"fa-solid fa-times\"></i>\n            </button>\n          </ng-template>\n        }\n      </kendo-textbox>\n    </div>\n\n    <!-- Filters Dropdown -->\n    <div class=\"dropdown-container\" (clickOutside)=\"ShowFiltersDropdown = false\">\n      <button kendoButton\n        [fillMode]=\"'outline'\"\n        [class.active]=\"hasActiveFilters()\"\n        (click)=\"toggleFiltersDropdown()\">\n        <i class=\"fa-solid fa-filter\"></i>\n        Filters\n        @if (getActiveFilterCount() > 0) {\n          <span class=\"filter-badge\">{{ getActiveFilterCount() }}</span>\n        }\n        <i [class]=\"ShowFiltersDropdown ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n      </button>\n\n      @if (ShowFiltersDropdown) {\n        <div class=\"dropdown-menu filters-menu\">\n          <div class=\"dropdown-section\">\n            <div class=\"section-header\">\n              <span>Status</span>\n              @if (Filters.statuses.length > 0) {\n                <button kendoButton\n                  [fillMode]=\"'flat'\"\n                  [size]=\"'small'\"\n                  (click)=\"StateService.setStatusFilter([])\">\n                  Clear\n                </button>\n              }\n            </div>\n            <div class=\"filter-options\">\n              @for (status of StatusOptions; track status.value) {\n                <label class=\"filter-option\" [class.selected]=\"isStatusSelected(status.value)\">\n                  <input type=\"checkbox\"\n                    [checked]=\"isStatusSelected(status.value)\"\n                    (change)=\"toggleStatus(status.value)\">\n                  <span class=\"status-dot\" [attr.data-status]=\"status.value\"></span>\n                  {{ status.label }}\n                </label>\n              }\n            </div>\n          </div>\n\n          <div class=\"dropdown-section\">\n            <div class=\"section-header\">\n              <span>Type</span>\n              @if (Filters.types.length > 0) {\n                <button kendoButton\n                  [fillMode]=\"'flat'\"\n                  [size]=\"'small'\"\n                  (click)=\"StateService.setTypeFilter([])\">\n                  Clear\n                </button>\n              }\n            </div>\n            <div class=\"filter-options\">\n              @for (type of TypeOptions; track type.value) {\n                <label class=\"filter-option\" [class.selected]=\"isTypeSelected(type.value)\">\n                  <input type=\"checkbox\"\n                    [checked]=\"isTypeSelected(type.value)\"\n                    (change)=\"toggleType(type.value)\">\n                  <i [class]=\"type.icon\"></i>\n                  {{ type.label }}\n                </label>\n              }\n            </div>\n          </div>\n\n          @if (hasActiveFilters()) {\n            <div class=\"dropdown-footer\">\n              <button kendoButton\n                [fillMode]=\"'flat'\"\n                [themeColor]=\"'error'\"\n                (click)=\"clearFilters()\">\n                <i class=\"fa-solid fa-times\"></i>\n                Clear All Filters\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Active Filter Chips -->\n    @if (hasActiveFilters()) {\n      <div class=\"active-filters\">\n        @for (status of Filters.statuses; track status) {\n          <kendo-chip\n            [removable]=\"true\"\n            [size]=\"'small'\"\n            (remove)=\"toggleStatus(status)\">\n            Status: {{ status }}\n          </kendo-chip>\n        }\n        @for (type of Filters.types; track type) {\n          <kendo-chip\n            [removable]=\"true\"\n            [size]=\"'small'\"\n            (remove)=\"toggleType(type)\">\n            Type: {{ type === 'Generated' ? 'AI Generated' : type }}\n          </kendo-chip>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"toolbar-right\">\n    <!-- Results Count -->\n    <div class=\"results-count\">\n      <span class=\"count\">{{ FilteredCount }}</span>\n      @if (FilteredCount !== TotalCount) {\n        <span class=\"of-total\">of {{ TotalCount }}</span>\n      }\n      <span class=\"label\">actions</span>\n    </div>\n\n    <!-- Sort Dropdown -->\n    <div class=\"dropdown-container\" (clickOutside)=\"ShowSortDropdown = false\">\n      <button kendoButton\n        [fillMode]=\"'outline'\"\n        (click)=\"toggleSortDropdown()\">\n        <i [class]=\"getSortIcon()\"></i>\n        {{ getSortLabel() }}\n        <i [class]=\"ShowSortDropdown ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n      </button>\n\n      @if (ShowSortDropdown) {\n        <div class=\"dropdown-menu sort-menu\">\n          @for (option of SortOptions; track option.field) {\n            <button class=\"sort-option\"\n              [class.selected]=\"SortField === option.field\"\n              (click)=\"setSortField(option.field)\">\n              <i [class]=\"option.icon\"></i>\n              {{ option.label }}\n              @if (SortField === option.field) {\n                <i [class]=\"SortDirection === 'asc' ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'\" class=\"direction-icon\"></i>\n              }\n            </button>\n          }\n        </div>\n      }\n    </div>\n\n    <!-- View Mode Toggle -->\n    <div class=\"view-toggle\">\n      <button kendoButton\n        [fillMode]=\"ViewMode === 'card' ? 'solid' : 'outline'\"\n        [themeColor]=\"ViewMode === 'card' ? 'primary' : 'base'\"\n        title=\"Card View\"\n        (click)=\"setViewMode('card')\">\n        <i class=\"fa-solid fa-grip\"></i>\n      </button>\n      <button kendoButton\n        [fillMode]=\"ViewMode === 'list' ? 'solid' : 'outline'\"\n        [themeColor]=\"ViewMode === 'list' ? 'primary' : 'base'\"\n        title=\"List View\"\n        (click)=\"setViewMode('list')\">\n        <i class=\"fa-solid fa-list\"></i>\n      </button>\n      <button kendoButton\n        [fillMode]=\"ViewMode === 'compact' ? 'solid' : 'outline'\"\n        [themeColor]=\"ViewMode === 'compact' ? 'primary' : 'base'\"\n        title=\"Compact View\"\n        (click)=\"setViewMode('compact')\">\n        <i class=\"fa-solid fa-bars\"></i>\n      </button>\n    </div>\n\n    <!-- Refresh Button -->\n    <button kendoButton\n      [fillMode]=\"'flat'\"\n      title=\"Refresh\"\n      (click)=\"onRefresh()\">\n      <i class=\"fa-solid fa-refresh\"></i>\n    </button>\n\n    <!-- New Action Button -->\n    <button kendoButton\n      [fillMode]=\"'solid'\"\n      [themeColor]=\"'primary'\"\n      (click)=\"onNewAction()\">\n      <i class=\"fa-solid fa-plus\"></i>\n      New Action\n    </button>\n  </div>\n</div>\n", styles: [".action-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 20px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  gap: 16px;\n  flex-wrap: wrap;\n}\n\n.toolbar-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n  flex-wrap: wrap;\n}\n\n.toolbar-right {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n/* Search */\n.search-container {\n  min-width: 200px;\n  max-width: 320px;\n  flex: 1;\n}\n\n.search-container kendo-textbox {\n  width: 100%;\n}\n\n.search-container i.fa-search {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n}\n\n/* Dropdown Container */\n.dropdown-container {\n  position: relative;\n}\n\n.dropdown-container > button {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.dropdown-container > button.active {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.dropdown-container > button i:last-child {\n  font-size: 10px;\n  margin-left: 4px;\n}\n\n.filter-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 6px;\n  border-radius: 10px;\n  min-width: 18px;\n  text-align: center;\n}\n\n/* Dropdown Menu */\n.dropdown-menu {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  z-index: 100;\n  min-width: 220px;\n  padding: 8px 0;\n}\n\n.dropdown-menu.sort-menu {\n  right: 0;\n  left: auto;\n}\n\n/* Dropdown Section */\n.dropdown-section {\n  padding: 8px 12px;\n}\n\n.dropdown-section:not(:last-child) {\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.section-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  color: var(--mj-text-muted);\n  letter-spacing: 0.5px;\n}\n\n.section-header button {\n  font-size: 11px;\n  padding: 2px 6px;\n}\n\n.filter-options {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.filter-option {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 8px;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background 0.15s ease;\n  font-size: 13px;\n}\n\n.filter-option:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.filter-option.selected {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.filter-option input[type=\"checkbox\"] {\n  display: none;\n}\n\n.filter-option i {\n  font-size: 13px;\n  width: 18px;\n  color: var(--mj-text-muted);\n}\n\n.filter-option.selected i {\n  color: var(--mj-brand-primary);\n}\n\n.status-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n}\n\n.status-dot[data-status=\"Active\"] {\n  background: var(--mj-status-success);\n}\n\n.status-dot[data-status=\"Pending\"] {\n  background: var(--mj-status-warning);\n}\n\n.status-dot[data-status=\"Disabled\"] {\n  background: var(--mj-status-error);\n}\n\n.dropdown-footer {\n  padding: 8px 12px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.dropdown-footer button {\n  width: 100%;\n}\n\n/* Sort Options */\n.sort-option {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 8px 12px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: 13px;\n  text-align: left;\n  transition: background 0.15s ease;\n}\n\n.sort-option:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.sort-option.selected {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.sort-option i:first-child {\n  width: 18px;\n  color: var(--mj-text-muted);\n}\n\n.sort-option.selected i:first-child {\n  color: var(--mj-brand-primary);\n}\n\n.sort-option .direction-icon {\n  margin-left: auto;\n  font-size: 11px;\n}\n\n/* Active Filters */\n.active-filters {\n  display: flex;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.active-filters kendo-chip {\n  font-size: 12px;\n}\n\n/* Results Count */\n.results-count {\n  display: flex;\n  align-items: baseline;\n  gap: 4px;\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n.results-count .count {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  font-size: 14px;\n}\n\n.results-count .of-total {\n  opacity: 0.7;\n}\n\n/* View Toggle */\n.view-toggle {\n  display: flex;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.view-toggle button {\n  border-radius: 0;\n  border: none;\n  min-width: 36px;\n}\n\n.view-toggle button:not(:last-child) {\n  border-right: 1px solid var(--mj-border-default);\n}\n\n/* Responsive */\n@media (max-width: 1024px) {\n  .action-toolbar {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .toolbar-left,\n  .toolbar-right {\n    width: 100%;\n    justify-content: flex-start;\n  }\n\n  .search-container {\n    max-width: none;\n    flex: 1;\n  }\n}\n\n@media (max-width: 640px) {\n  .toolbar-right {\n    flex-wrap: wrap;\n  }\n\n  .results-count {\n    order: -1;\n    width: 100%;\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-action-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"action-toolbar\">\n  <div class=\"toolbar-left\">\n    <!-- Search -->\n    <div class=\"search-container\">\n      <div class=\"search-input-wrapper\">\n        <i class=\"fa-solid fa-search search-icon\"></i>\n        <input type=\"text\" class=\"mj-input\"\n          placeholder=\"Search actions...\"\n          [value]=\"Filters.searchTerm\"\n          (input)=\"onSearchInput($any($event.target).value)\" />\n        @if (Filters.searchTerm) {\n          <button mjButton variant=\"flat\" size=\"sm\" class=\"search-clear\"\n            (click)=\"clearSearch()\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        }\n      </div>\n    </div>\n\n    <!-- Filters Dropdown -->\n    <div class=\"dropdown-container\" (clickOutside)=\"ShowFiltersDropdown = false\">\n      <button mjButton\n        variant=\"outline\"\n        [class.active]=\"hasActiveFilters()\"\n        (click)=\"toggleFiltersDropdown()\">\n        <i class=\"fa-solid fa-filter\"></i>\n        Filters\n        @if (getActiveFilterCount() > 0) {\n          <span class=\"filter-badge\">{{ getActiveFilterCount() }}</span>\n        }\n        <i [class]=\"ShowFiltersDropdown ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n      </button>\n\n      @if (ShowFiltersDropdown) {\n        <div class=\"dropdown-menu filters-menu\">\n          <div class=\"dropdown-section\">\n            <div class=\"section-header\">\n              <span>Status</span>\n              @if (Filters.statuses.length > 0) {\n                <button mjButton\n                  variant=\"flat\"\n                  size=\"sm\"\n                  (click)=\"StateService.setStatusFilter([])\">\n                  Clear\n                </button>\n              }\n            </div>\n            <div class=\"filter-options\">\n              @for (status of StatusOptions; track status.value) {\n                <label class=\"filter-option\" [class.selected]=\"isStatusSelected(status.value)\">\n                  <input type=\"checkbox\"\n                    [checked]=\"isStatusSelected(status.value)\"\n                    (change)=\"toggleStatus(status.value)\">\n                  <span class=\"status-dot\" [attr.data-status]=\"status.value\"></span>\n                  {{ status.label }}\n                </label>\n              }\n            </div>\n          </div>\n\n          <div class=\"dropdown-section\">\n            <div class=\"section-header\">\n              <span>Type</span>\n              @if (Filters.types.length > 0) {\n                <button mjButton\n                  variant=\"flat\"\n                  size=\"sm\"\n                  (click)=\"StateService.setTypeFilter([])\">\n                  Clear\n                </button>\n              }\n            </div>\n            <div class=\"filter-options\">\n              @for (type of TypeOptions; track type.value) {\n                <label class=\"filter-option\" [class.selected]=\"isTypeSelected(type.value)\">\n                  <input type=\"checkbox\"\n                    [checked]=\"isTypeSelected(type.value)\"\n                    (change)=\"toggleType(type.value)\">\n                  <i [class]=\"type.icon\"></i>\n                  {{ type.label }}\n                </label>\n              }\n            </div>\n          </div>\n\n          @if (hasActiveFilters()) {\n            <div class=\"dropdown-footer\">\n              <button mjButton\n                variant=\"danger\"\n                (click)=\"clearFilters()\">\n                <i class=\"fa-solid fa-times\"></i>\n                Clear All Filters\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Active Filter Chips -->\n    @if (hasActiveFilters()) {\n      <div class=\"active-filters\">\n        @for (status of Filters.statuses; track status) {\n          <span class=\"status-chip removable\" (click)=\"toggleStatus(status)\">\n            Status: {{ status }} <i class=\"fa-solid fa-times\"></i>\n          </span>\n        }\n        @for (type of Filters.types; track type) {\n          <span class=\"status-chip removable\" (click)=\"toggleType(type)\">\n            Type: {{ type === 'Generated' ? 'AI Generated' : type }} <i class=\"fa-solid fa-times\"></i>\n          </span>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"toolbar-right\">\n    <!-- Results Count -->\n    <div class=\"results-count\">\n      <span class=\"count\">{{ FilteredCount }}</span>\n      @if (FilteredCount !== TotalCount) {\n        <span class=\"of-total\">of {{ TotalCount }}</span>\n      }\n      <span class=\"label\">actions</span>\n    </div>\n\n    <!-- Sort Dropdown -->\n    <div class=\"dropdown-container\" (clickOutside)=\"ShowSortDropdown = false\">\n      <button mjButton\n        variant=\"outline\"\n        (click)=\"toggleSortDropdown()\">\n        <i [class]=\"getSortIcon()\"></i>\n        {{ getSortLabel() }}\n        <i [class]=\"ShowSortDropdown ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n      </button>\n\n      @if (ShowSortDropdown) {\n        <div class=\"dropdown-menu sort-menu\">\n          @for (option of SortOptions; track option.field) {\n            <button class=\"sort-option\"\n              [class.selected]=\"SortField === option.field\"\n              (click)=\"setSortField(option.field)\">\n              <i [class]=\"option.icon\"></i>\n              {{ option.label }}\n              @if (SortField === option.field) {\n                <i [class]=\"SortDirection === 'asc' ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'\" class=\"direction-icon\"></i>\n              }\n            </button>\n          }\n        </div>\n      }\n    </div>\n\n    <!-- View Mode Toggle -->\n    <div class=\"view-toggle\">\n      <button mjButton\n        [variant]=\"ViewMode === 'card' ? 'primary' : 'outline'\"\n        title=\"Card View\"\n        (click)=\"setViewMode('card')\">\n        <i class=\"fa-solid fa-grip\"></i>\n      </button>\n      <button mjButton\n        [variant]=\"ViewMode === 'list' ? 'primary' : 'outline'\"\n        title=\"List View\"\n        (click)=\"setViewMode('list')\">\n        <i class=\"fa-solid fa-list\"></i>\n      </button>\n      <button mjButton\n        [variant]=\"ViewMode === 'compact' ? 'primary' : 'outline'\"\n        title=\"Compact View\"\n        (click)=\"setViewMode('compact')\">\n        <i class=\"fa-solid fa-bars\"></i>\n      </button>\n    </div>\n\n    <!-- Refresh Button -->\n    <button mjButton\n      variant=\"flat\"\n      title=\"Refresh\"\n      (click)=\"onRefresh()\">\n      <i class=\"fa-solid fa-refresh\"></i>\n    </button>\n\n    <!-- New Action Button -->\n    <button mjButton\n      variant=\"primary\"\n      (click)=\"onNewAction()\">\n      <i class=\"fa-solid fa-plus\"></i>\n      New Action\n    </button>\n  </div>\n</div>\n", styles: [".action-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 20px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  gap: 16px;\n  flex-wrap: wrap;\n}\n\n.toolbar-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n  flex-wrap: wrap;\n}\n\n.toolbar-right {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n/* Search */\n.search-container {\n  min-width: 200px;\n  max-width: 320px;\n  flex: 1;\n}\n\n.search-container i.fa-search {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n}\n\n/* Dropdown Container */\n.dropdown-container {\n  position: relative;\n}\n\n.dropdown-container > button {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.dropdown-container > button.active {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.dropdown-container > button i:last-child {\n  font-size: 10px;\n  margin-left: 4px;\n}\n\n.filter-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 6px;\n  border-radius: 10px;\n  min-width: 18px;\n  text-align: center;\n}\n\n/* Dropdown Menu */\n.dropdown-menu {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  z-index: 100;\n  min-width: 220px;\n  padding: 8px 0;\n}\n\n.dropdown-menu.sort-menu {\n  right: 0;\n  left: auto;\n}\n\n/* Dropdown Section */\n.dropdown-section {\n  padding: 8px 12px;\n}\n\n.dropdown-section:not(:last-child) {\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.section-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  color: var(--mj-text-muted);\n  letter-spacing: 0.5px;\n}\n\n.section-header button {\n  font-size: 11px;\n  padding: 2px 6px;\n}\n\n.filter-options {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.filter-option {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 8px;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background 0.15s ease;\n  font-size: 13px;\n}\n\n.filter-option:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.filter-option.selected {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.filter-option input[type=\"checkbox\"] {\n  display: none;\n}\n\n.filter-option i {\n  font-size: 13px;\n  width: 18px;\n  color: var(--mj-text-muted);\n}\n\n.filter-option.selected i {\n  color: var(--mj-brand-primary);\n}\n\n.status-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n}\n\n.status-dot[data-status=\"Active\"] {\n  background: var(--mj-status-success);\n}\n\n.status-dot[data-status=\"Pending\"] {\n  background: var(--mj-status-warning);\n}\n\n.status-dot[data-status=\"Disabled\"] {\n  background: var(--mj-status-error);\n}\n\n.dropdown-footer {\n  padding: 8px 12px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.dropdown-footer button {\n  width: 100%;\n}\n\n/* Sort Options */\n.sort-option {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 8px 12px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: 13px;\n  text-align: left;\n  transition: background 0.15s ease;\n}\n\n.sort-option:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.sort-option.selected {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.sort-option i:first-child {\n  width: 18px;\n  color: var(--mj-text-muted);\n}\n\n.sort-option.selected i:first-child {\n  color: var(--mj-brand-primary);\n}\n\n.sort-option .direction-icon {\n  margin-left: auto;\n  font-size: 11px;\n}\n\n/* Active Filters */\n.active-filters {\n  display: flex;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n/* Results Count */\n.results-count {\n  display: flex;\n  align-items: baseline;\n  gap: 4px;\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n.results-count .count {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  font-size: 14px;\n}\n\n.results-count .of-total {\n  opacity: 0.7;\n}\n\n/* View Toggle */\n.view-toggle {\n  display: flex;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.view-toggle button {\n  border-radius: 0;\n  border: none;\n  min-width: 36px;\n}\n\n.view-toggle button:not(:last-child) {\n  border-right: 1px solid var(--mj-border-default);\n}\n\n/* Responsive */\n@media (max-width: 1024px) {\n  .action-toolbar {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .toolbar-left,\n  .toolbar-right {\n    width: 100%;\n    justify-content: flex-start;\n  }\n\n  .search-container {\n    max-width: none;\n    flex: 1;\n  }\n}\n\n@media (max-width: 640px) {\n  .toolbar-right {\n    flex-wrap: wrap;\n  }\n\n  .results-count {\n    order: -1;\n    width: 100%;\n  }\n}\n"] }]
     }], () => [{ type: i1.ActionExplorerStateService }, { type: i0.ChangeDetectorRef }], { TotalCount: [{
             type: Input
         }], FilteredCount: [{