@memberjunction/ng-core-entity-forms 6.2.0-edge.0 → 6.2.0-edge.2

package/dist/lib/custom/AIAgents/add-action-dialog.component.js

@@ -55,7 +55,7 @@ function AddActionDialogComponent_Conditional_31_For_2_Conditional_11_Template(r
 } if (rf & 2) {
     const action_r6 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", action_r6.categoryName, " ");
+    i0.ɵɵtextInterpolate1(" ", action_r6.CategoryName, " ");
 } }
 function AddActionDialogComponent_Conditional_31_For_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 43);
@@ -98,9 +98,9 @@ function AddActionDialogComponent_Conditional_31_For_2_Template(rf, ctx) { if (r
 } if (rf & 2) {
     const action_r6 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("selected", action_r6.selected)("existing", ctx_r2.existingActionIds.includes(action_r6.ID));
+    i0.ɵɵclassProp("selected", action_r6.Selected)("existing", ctx_r2.existingActionIds.includes(action_r6.ID));
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("fa-check-circle", action_r6.selected)("fa-circle", !action_r6.selected);
+    i0.ɵɵclassProp("fa-check-circle", action_r6.Selected)("fa-circle", !action_r6.Selected);
     i0.ɵɵadvance(3);
     i0.ɵɵclassMap(i0.ɵɵinterpolate1("fa-solid ", ctx_r2.getActionIcon(action_r6)));
     i0.ɵɵadvance(2);
@@ -108,7 +108,7 @@ function AddActionDialogComponent_Conditional_31_For_2_Template(rf, ctx) { if (r
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(action_r6.Description || "No description available");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(action_r6.categoryName ? 11 : -1);
+    i0.ɵɵconditional(action_r6.CategoryName ? 11 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(action_r6.Type ? 12 : -1);
     i0.ɵɵadvance();
@@ -162,15 +162,15 @@ function AddActionDialogComponent_Conditional_34_For_14_Template(rf, ctx) { if (
 } if (rf & 2) {
     const action_r8 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("selected", action_r8.selected)("existing", ctx_r2.existingActionIds.includes(action_r8.ID));
+    i0.ɵɵclassProp("selected", action_r8.Selected)("existing", ctx_r2.existingActionIds.includes(action_r8.ID));
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("fa-check-circle", action_r8.selected)("fa-circle", !action_r8.selected);
+    i0.ɵɵclassProp("fa-check-circle", action_r8.Selected)("fa-circle", !action_r8.Selected);
     i0.ɵɵadvance(2);
     i0.ɵɵclassMap(i0.ɵɵinterpolate1("fa-solid ", ctx_r2.getActionIcon(action_r8), " action-icon"));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", action_r8.Name, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(action_r8.categoryName || "-");
+    i0.ɵɵtextInterpolate(action_r8.CategoryName || "-");
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(action_r8.Type || "-");
     i0.ɵɵadvance(2);
@@ -220,38 +220,162 @@ function AddActionDialogComponent_Conditional_37_Template(rf, ctx) { if (rf & 1)
  * Features searchable action list, category filtering, and multi-select capability.
  */
 export class AddActionDialogComponent extends BaseAngularComponent {
+    /** @deprecated Use {@link AgentId}. */
+    get agentId() {
+        return this.AgentId;
+    }
+    /** @deprecated Use {@link AgentId}. */
+    set agentId(value) {
+        this.AgentId = value;
+    }
+    /** @deprecated Use {@link AgentName}. */
+    get agentName() {
+        return this.AgentName;
+    }
+    /** @deprecated Use {@link AgentName}. */
+    set agentName(value) {
+        this.AgentName = value;
+    }
+    /** @deprecated Use {@link ExistingActionIds}. */
+    get existingActionIds() {
+        return this.ExistingActionIds;
+    }
+    /** @deprecated Use {@link ExistingActionIds}. */
+    set existingActionIds(value) {
+        this.ExistingActionIds = value;
+    }
+    /** @deprecated Use {@link Result}. */
+    get result() {
+        return this.Result;
+    }
+    /** @deprecated Use {@link Result}. */
+    set result(value) {
+        this.Result = value;
+    }
+    /** @deprecated Use {@link AllActions$}. */
+    get allActions$() {
+        return this.AllActions$;
+    }
+    /** @deprecated Use {@link AllActions$}. */
+    set allActions$(value) {
+        this.AllActions$ = value;
+    }
+    /** @deprecated Use {@link Categories$}. */
+    get categories$() {
+        return this.Categories$;
+    }
+    /** @deprecated Use {@link Categories$}. */
+    set categories$(value) {
+        this.Categories$ = value;
+    }
+    /** @deprecated Use {@link FilteredActions$}. */
+    get filteredActions$() {
+        return this.FilteredActions$;
+    }
+    /** @deprecated Use {@link FilteredActions$}. */
+    set filteredActions$(value) {
+        this.FilteredActions$ = value;
+    }
+    /** @deprecated Use {@link CategoryTree$}. */
+    get categoryTree$() {
+        return this.CategoryTree$;
+    }
+    /** @deprecated Use {@link CategoryTree$}. */
+    set categoryTree$(value) {
+        this.CategoryTree$ = value;
+    }
+    /** @deprecated Use {@link SelectedActions$}. */
+    get selectedActions$() {
+        return this.SelectedActions$;
+    }
+    /** @deprecated Use {@link SelectedActions$}. */
+    set selectedActions$(value) {
+        this.SelectedActions$ = value;
+    }
+    /** @deprecated Use {@link IsLoading$}. */
+    get isLoading$() {
+        return this.IsLoading$;
+    }
+    /** @deprecated Use {@link IsLoading$}. */
+    set isLoading$(value) {
+        this.IsLoading$ = value;
+    }
+    /** @deprecated Use {@link SearchControl}. */
+    get searchControl() {
+        return this.SearchControl;
+    }
+    /** @deprecated Use {@link SearchControl}. */
+    set searchControl(value) {
+        this.SearchControl = value;
+    }
+    /** @deprecated Use {@link SelectedCategoryId$}. */
+    get selectedCategoryId$() {
+        return this.SelectedCategoryId$;
+    }
+    /** @deprecated Use {@link SelectedCategoryId$}. */
+    set selectedCategoryId$(value) {
+        this.SelectedCategoryId$ = value;
+    }
+    /** @deprecated Use {@link ViewMode$}. */
+    get viewMode$() {
+        return this.ViewMode$;
+    }
+    /** @deprecated Use {@link ViewMode$}. */
+    set viewMode$(value) {
+        this.ViewMode$ = value;
+    }
+    /** @deprecated Use {@link ExpandedCategories}. */
+    get expandedCategories() {
+        return this.ExpandedCategories;
+    }
+    /** @deprecated Use {@link ExpandedCategories}. */
+    set expandedCategories(value) {
+        this.ExpandedCategories = value;
+    }
     // Computed values
+    get SelectedCount() {
+        return this.SelectedActions$.value.size;
+    }
+    /** @deprecated Use {@link SelectedCount}. */
     get selectedCount() {
-        return this.selectedActions$.value.size;
+        return this.SelectedCount;
+    }
+    get TotalActionCount() {
+        return this.AllActions$.value.length;
     }
+    /** @deprecated Use {@link TotalActionCount}. */
     get totalActionCount() {
-        return this.allActions$.value.length;
+        return this.TotalActionCount;
+    }
+    get FilteredCount() {
+        return this.FilteredActions$.value.length;
     }
+    /** @deprecated Use {@link FilteredCount}. */
     get filteredCount() {
-        return this.filteredActions$.value.length;
+        return this.FilteredCount;
     }
     constructor(cdr) {
         super();
         this.cdr = cdr;
         // Input properties set by service
-        this.agentId = '';
-        this.agentName = '';
-        this.existingActionIds = [];
+        this.AgentId = '';
+        this.AgentName = '';
+        this.ExistingActionIds = [];
         // Reactive state management
         this.destroy$ = new Subject();
-        this.result = new Subject();
+        this.Result = new Subject();
         // Data streams
-        this.allActions$ = new BehaviorSubject([]);
-        this.categories$ = new BehaviorSubject([]);
-        this.filteredActions$ = new BehaviorSubject([]);
-        this.categoryTree$ = new BehaviorSubject([]);
-        this.selectedActions$ = new BehaviorSubject(new Set());
-        this.isLoading$ = new BehaviorSubject(false);
+        this.AllActions$ = new BehaviorSubject([]);
+        this.Categories$ = new BehaviorSubject([]);
+        this.FilteredActions$ = new BehaviorSubject([]);
+        this.CategoryTree$ = new BehaviorSubject([]);
+        this.SelectedActions$ = new BehaviorSubject(new Set());
+        this.IsLoading$ = new BehaviorSubject(false);
         // UI state
-        this.searchControl = new FormControl('');
-        this.selectedCategoryId$ = new BehaviorSubject('all');
-        this.viewMode$ = new BehaviorSubject('grid');
-        this.expandedCategories = new Set();
+        this.SearchControl = new FormControl('');
+        this.SelectedCategoryId$ = new BehaviorSubject('all');
+        this.ViewMode$ = new BehaviorSubject('grid');
+        this.ExpandedCategories = new Set();
         this.DialogClose = new EventEmitter();
     }
     ngOnInit() {
@@ -264,7 +388,7 @@ export class AddActionDialogComponent extends BaseAngularComponent {
         this.destroy$.complete();
     }
     async initializeData() {
-        this.isLoading$.next(true);
+        this.IsLoading$.next(true);
         try {
             await this.loadActionsAndCategories();
             this.buildCategoryTree();
@@ -273,7 +397,7 @@ export class AddActionDialogComponent extends BaseAngularComponent {
             console.error('Error loading dialog data:', error);
         }
         finally {
-            this.isLoading$.next(false);
+            this.IsLoading$.next(false);
         }
     }
     async loadActionsAndCategories() {
@@ -297,22 +421,22 @@ export class AddActionDialogComponent extends BaseAngularComponent {
         if (actionsResult.Success) {
             const actions = (actionsResult.Results || []).map(action => ({
                 ...action.GetAll(),
-                selected: false,
-                categoryName: action.Category || 'Uncategorized'
+                Selected: false,
+                CategoryName: action.Category || 'Uncategorized'
             }));
-            this.allActions$.next(actions);
+            this.AllActions$.next(actions);
         }
         if (categoriesResult.Success) {
-            this.categories$.next(categoriesResult.Results || []);
+            this.Categories$.next(categoriesResult.Results || []);
         }
     }
     buildCategoryTree() {
-        const actions = this.allActions$.value;
-        const categories = this.categories$.value;
+        const actions = this.AllActions$.value;
+        const categories = this.Categories$.value;
         // Count actions per category
         const categoryCounts = new Map();
         actions.forEach(action => {
-            const categoryName = action.categoryName || 'Uncategorized';
+            const categoryName = action.CategoryName || 'Uncategorized';
             categoryCounts.set(categoryName, (categoryCounts.get(categoryName) || 0) + 1);
         });
         // Build tree nodes
@@ -346,7 +470,7 @@ export class AddActionDialogComponent extends BaseAngularComponent {
                 icon: 'fa-question-circle'
             });
         }
-        this.categoryTree$.next(treeNodes);
+        this.CategoryTree$.next(treeNodes);
     }
     getCategoryIcon(categoryName) {
         const iconMap = {
@@ -365,10 +489,10 @@ export class AddActionDialogComponent extends BaseAngularComponent {
     }
     setupFiltering() {
         combineLatest([
-            this.allActions$,
-            this.searchControl.valueChanges.pipe(debounceTime(300), distinctUntilChanged(), startWith('') // Emit initial empty value
+            this.AllActions$,
+            this.SearchControl.valueChanges.pipe(debounceTime(300), distinctUntilChanged(), startWith('') // Emit initial empty value
             ),
-            this.selectedCategoryId$
+            this.SelectedCategoryId$
         ]).pipe(takeUntil(this.destroy$)).subscribe(([actions, searchTerm, categoryId]) => {
             this.filterActions(actions, searchTerm || '', categoryId);
         });
@@ -382,7 +506,7 @@ export class AddActionDialogComponent extends BaseAngularComponent {
             }
             else {
                 const categoryName = this.getCategoryNameById(categoryId);
-                filtered = filtered.filter(action => action.categoryName === categoryName);
+                filtered = filtered.filter(action => action.CategoryName === categoryName);
             }
         }
         // Search filter
@@ -390,66 +514,82 @@ export class AddActionDialogComponent extends BaseAngularComponent {
             const term = searchTerm.toLowerCase();
             filtered = filtered.filter(action => action.Name.toLowerCase().includes(term) ||
                 (action.Description && action.Description.toLowerCase().includes(term)) ||
-                (action.categoryName && action.categoryName.toLowerCase().includes(term)));
+                (action.CategoryName && action.CategoryName.toLowerCase().includes(term)));
         }
-        this.filteredActions$.next(filtered);
+        this.FilteredActions$.next(filtered);
     }
     getCategoryNameById(categoryId) {
-        const category = this.categories$.value.find(c => UUIDsEqual(c.ID, categoryId));
+        const category = this.Categories$.value.find(c => UUIDsEqual(c.ID, categoryId));
         return category?.Name || '';
     }
     preselectExistingActions() {
-        if (this.existingActionIds.length > 0) {
-            const selected = new Set(this.existingActionIds);
-            this.selectedActions$.next(selected);
+        if (this.ExistingActionIds.length > 0) {
+            const selected = new Set(this.ExistingActionIds);
+            this.SelectedActions$.next(selected);
             // Update action selection state
-            const actions = this.allActions$.value;
+            const actions = this.AllActions$.value;
             actions.forEach(action => {
-                action.selected = selected.has(action.ID);
+                action.Selected = selected.has(action.ID);
             });
-            this.allActions$.next(actions);
+            this.AllActions$.next(actions);
         }
     }
     // === UI Event Handlers ===
+    SelectCategory(categoryId) {
+        this.SelectedCategoryId$.next(categoryId);
+    }
+    /** @deprecated Use {@link SelectCategory}. */
     selectCategory(categoryId) {
-        this.selectedCategoryId$.next(categoryId);
+        return this.SelectCategory(categoryId);
+    }
+    ToggleViewMode() {
+        const currentMode = this.ViewMode$.value;
+        this.ViewMode$.next(currentMode === 'grid' ? 'list' : 'grid');
     }
+    /** @deprecated Use {@link ToggleViewMode}. */
     toggleViewMode() {
-        const currentMode = this.viewMode$.value;
-        this.viewMode$.next(currentMode === 'grid' ? 'list' : 'grid');
+        return this.ToggleViewMode();
     }
-    toggleActionSelection(action) {
-        const selected = this.selectedActions$.value;
-        const actions = this.allActions$.value;
+    ToggleActionSelection(action) {
+        const selected = this.SelectedActions$.value;
+        const actions = this.AllActions$.value;
         // Find the action and toggle its selection
         const actionToUpdate = actions.find(a => UUIDsEqual(a.ID, action.ID));
         if (actionToUpdate) {
-            actionToUpdate.selected = !actionToUpdate.selected;
-            if (actionToUpdate.selected) {
+            actionToUpdate.Selected = !actionToUpdate.Selected;
+            if (actionToUpdate.Selected) {
                 selected.add(action.ID);
             }
             else {
                 selected.delete(action.ID);
             }
-            this.selectedActions$.next(new Set(selected));
-            this.allActions$.next(actions);
+            this.SelectedActions$.next(new Set(selected));
+            this.AllActions$.next(actions);
             // Update filtered actions to reflect selection state
-            const filtered = this.filteredActions$.value;
+            const filtered = this.FilteredActions$.value;
             const filteredAction = filtered.find(a => UUIDsEqual(a.ID, action.ID));
             if (filteredAction) {
-                filteredAction.selected = actionToUpdate.selected;
-                this.filteredActions$.next(filtered);
+                filteredAction.Selected = actionToUpdate.Selected;
+                this.FilteredActions$.next(filtered);
             }
         }
     }
+    /** @deprecated Use {@link ToggleActionSelection}. */
+    toggleActionSelection(action) {
+        return this.ToggleActionSelection(action);
+    }
     // Backs the no-results empty-state "Clear Filters" CTA: resets every dimension
     // the list narrows on — search AND the category filter — so the CTA actually
     // returns results instead of appearing to do nothing.
+    ClearSearch() {
+        this.SearchControl.reset();
+        this.SelectedCategoryId$.next('all');
+    }
+    /** @deprecated Use {@link ClearSearch}. */
     clearSearch() {
-        this.searchControl.reset();
-        this.selectedCategoryId$.next('all');
+        return this.ClearSearch();
     }
-    getActionIcon(action) {
+    GetActionIcon(action) {
         // Return custom icon if set
         if (action.IconClass) {
             return action.IconClass;
@@ -474,22 +614,30 @@ export class AddActionDialogComponent extends BaseAngularComponent {
             return 'fa-plug';
         return 'fa-bolt'; // Default action icon
     }
+    /** @deprecated Use {@link GetActionIcon}. */
+    getActionIcon(action) {
+        return this.GetActionIcon(action);
+    }
     // === Dialog Actions ===
     cancel() {
-        this.result.next([]);
+        this.Result.next([]);
         this.DialogClose.emit();
     }
-    addSelectedActions() {
-        const selectedIds = this.selectedActions$.value;
-        const allActions = this.allActions$.value;
+    AddSelectedActions() {
+        const selectedIds = this.SelectedActions$.value;
+        const allActions = this.AllActions$.value;
         // Get the selected action display items (excluding existing ones)
         const selectedDisplayItems = allActions
-            .filter(action => selectedIds.has(action.ID) && !this.existingActionIds.some(id => UUIDsEqual(id, action.ID)));
+            .filter(action => selectedIds.has(action.ID) && !this.ExistingActionIds.some(id => UUIDsEqual(id, action.ID)));
         // Convert ActionDisplayItem to MJActionEntity by casting (they have the same structure)
         const selectedActions = selectedDisplayItems.map(item => item);
-        this.result.next(selectedActions);
+        this.Result.next(selectedActions);
         this.DialogClose.emit();
     }
+    /** @deprecated Use {@link AddSelectedActions}. */
+    addSelectedActions() {
+        return this.AddSelectedActions();
+    }
     static { this.ɵfac = function AddActionDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AddActionDialogComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AddActionDialogComponent, selectors: [["mj-add-action-dialog"]], outputs: { DialogClose: "DialogClose" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 44, vars: 35, consts: [[1, "add-action-dialog"], [1, "dialog-header"], [1, "search-section"], [1, "search-input-wrapper"], [1, "fa-solid", "fa-search", "search-prefix-icon"], ["placeholder", "Search actions by name, description, or category...", 1, "mj-input", "search-input", 3, "formControl"], [1, "header-actions"], ["mjButton", "", "variant", "flat", 3, "click", "title"], [1, "fa-solid"], [1, "stats"], [1, "stat-item"], [1, "fa-solid", "fa-bolt"], [1, "dialog-content"], [1, "category-sidebar"], [1, "sidebar-header"], [1, "fa-solid", "fa-folder-tree"], [1, "category-list"], [1, "category-item", 3, "selected"], [1, "actions-container"], [1, "loading-state"], ["Variant", "no-results", "Title", "No actions found", "Message", "Try adjusting your search criteria or selecting a different category", "ActionText", "Clear Filters", "ActionVariant", "flat", "Size", "compact"], [1, "actions-grid"], [1, "actions-list"], [1, "selection-summary"], [1, "dialog-footer"], ["mjButton", "", "variant", "flat", 3, "click"], ["mjButton", "", "variant", "primary", 3, "click", "disabled"], [1, "fa-solid", "fa-plus"], [1, "category-item", 3, "click"], [1, "category-name"], [1, "category-count"], [1, "loading-spinner"], [1, "fa-solid", "fa-spinner", "fa-spin", "fa-2x"], ["Variant", "no-results", "Title", "No actions found", "Message", "Try adjusting your search criteria or selecting a different category", "ActionText", "Clear Filters", "ActionVariant", "flat", "Size", "compact", 3, "Action"], [1, "action-card", 3, "selected", "existing"], [1, "action-card", 3, "click"], [1, "selection-indicator"], [1, "card-header"], [1, "action-icon"], [1, "action-name"], [1, "card-body"], [1, "action-description"], [1, "category-badge"], [1, "type-badge"], [1, "existing-overlay"], [1, "fa-solid", "fa-folder"], [1, "fa-solid", "fa-tag"], [1, "fa-solid", "fa-check"], [1, "list-header"], [1, "col-select"], [1, "col-name"], [1, "col-category"], [1, "col-type"], [1, "col-description"], [1, "col-status"], [1, "list-item", 3, "selected", "existing"], [1, "list-item", 3, "click"], [1, "status-badge", "existing"], [1, "status-badge", "available"], [1, "summary-content"], [1, "fa-solid", "fa-check-circle"]], template: function AddActionDialogComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
@@ -565,7 +713,7 @@ export class AddActionDialogComponent extends BaseAngularComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AddActionDialogComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-add-action-dialog', template: "<!-- Add Action Dialog -->\n<div class=\"add-action-dialog\">\n  \n  <!-- Dialog Header -->\n  <div class=\"dialog-header\">\n    <div class=\"search-section\">\n      <div class=\"search-input-wrapper\">\n        <i class=\"fa-solid fa-search search-prefix-icon\"></i>\n        <input\n          class=\"mj-input search-input\"\n          [formControl]=\"searchControl\"\n          placeholder=\"Search actions by name, description, or category...\">\n      </div>\n    </div>\n    \n    <div class=\"header-actions\">\n      <!-- View Toggle -->\n      <button mjButton\n              variant=\"flat\"\n              (click)=\"toggleViewMode()\"\n              [title]=\"(viewMode$ | async) === 'grid' ? 'Switch to list view' : 'Switch to grid view'\">\n        <i class=\"fa-solid\"\n           [class.fa-th]=\"(viewMode$ | async) === 'grid'\"\n           [class.fa-list]=\"(viewMode$ | async) === 'list'\"></i>\n      </button>\n      \n      <!-- Stats -->\n      <div class=\"stats\">\n        <span class=\"stat-item\">\n          <i class=\"fa-solid fa-bolt\"></i>\n          {{ filteredCount }} of {{ totalActionCount }} actions\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Main Content -->\n  <div class=\"dialog-content\">\n    \n    <!-- Category Sidebar -->\n    <div class=\"category-sidebar\">\n      <div class=\"sidebar-header\">\n        <h4><i class=\"fa-solid fa-folder-tree\"></i> Categories</h4>\n      </div>\n      \n      <div class=\"category-list\">\n        @for (category of categoryTree$ | async; track category.id) {\n          <div class=\"category-item\" \n               [class.selected]=\"(selectedCategoryId$ | async) === category.id\"\n               (click)=\"selectCategory(category.id)\">\n            <i class=\"fa-solid {{ category.icon }} category-icon\"></i>\n            <span class=\"category-name\">{{ category.name }}</span>\n            <span class=\"category-count\">{{ category.count }}</span>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Actions Display -->\n    <div class=\"actions-container\">\n      \n      <!-- Loading State -->\n      @if (isLoading$ | async) {\n        <div class=\"loading-state\">\n          <div class=\"loading-spinner\">\n            <i class=\"fa-solid fa-spinner fa-spin fa-2x\"></i>\n          </div>\n          <p>Loading actions...</p>\n        </div>\n      }\n\n      <!-- Empty State -->\n      @if (!(isLoading$ | async) && filteredCount === 0) {\n        <mj-empty-state\n          Variant=\"no-results\"\n          Title=\"No actions found\"\n          Message=\"Try adjusting your search criteria or selecting a different category\"\n          ActionText=\"Clear Filters\"\n          ActionVariant=\"flat\"\n          (Action)=\"clearSearch()\"\n          Size=\"compact\" />\n      }\n\n      <!-- Grid View -->\n      @if (!(isLoading$ | async) && (viewMode$ | async) === 'grid' && filteredCount > 0) {\n        <div class=\"actions-grid\">\n          @for (action of filteredActions$ | async; track action.ID) {\n            <div class=\"action-card\" \n                 [class.selected]=\"action.selected\"\n                 [class.existing]=\"existingActionIds.includes(action.ID)\"\n                 (click)=\"toggleActionSelection(action)\">\n              \n              <!-- Selection Indicator -->\n              <div class=\"selection-indicator\">\n                <i class=\"fa-solid\" \n                   [class.fa-check-circle]=\"action.selected\" \n                   [class.fa-circle]=\"!action.selected\"></i>\n              </div>\n              \n              <!-- Card Content -->\n              <div class=\"card-header\">\n                <div class=\"action-icon\">\n                  <i class=\"fa-solid {{ getActionIcon(action) }}\"></i>\n                </div>\n                <h3 class=\"action-name\">{{ action.Name }}</h3>\n              </div>\n              \n              <div class=\"card-body\">\n                <p class=\"action-description\">{{ action.Description || 'No description available' }}</p>\n                \n                @if (action.categoryName) {\n                  <div class=\"category-badge\">\n                    <i class=\"fa-solid fa-folder\"></i>\n                    {{ action.categoryName }}\n                  </div>\n                }\n                \n                @if (action.Type) {\n                  <div class=\"type-badge\">\n                    <i class=\"fa-solid fa-tag\"></i>\n                    {{ action.Type }}\n                  </div>\n                }\n              </div>\n              \n              <!-- Existing Action Overlay -->\n              @if (existingActionIds.includes(action.ID)) {\n                <div class=\"existing-overlay\">\n                  <i class=\"fa-solid fa-check\"></i>\n                  <span>Already Added</span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n\n      <!-- List View -->\n      @if (!(isLoading$ | async) && (viewMode$ | async) === 'list' && filteredCount > 0) {\n        <div class=\"actions-list\">\n          \n          <!-- List Header -->\n          <div class=\"list-header\">\n            <span class=\"col-select\"></span>\n            <span class=\"col-name\">Name</span>\n            <span class=\"col-category\">Category</span>\n            <span class=\"col-type\">Type</span>\n            <span class=\"col-description\">Description</span>\n            <span class=\"col-status\">Status</span>\n          </div>\n          \n          <!-- List Items -->\n          @for (action of filteredActions$ | async; track action.ID) {\n            <div class=\"list-item\" \n                 [class.selected]=\"action.selected\"\n                 [class.existing]=\"existingActionIds.includes(action.ID)\"\n                 (click)=\"toggleActionSelection(action)\">\n              \n              <span class=\"col-select\">\n                <i class=\"fa-solid\" \n                   [class.fa-check-circle]=\"action.selected\" \n                   [class.fa-circle]=\"!action.selected\"></i>\n              </span>\n              \n              <span class=\"col-name\">\n                <i class=\"fa-solid {{ getActionIcon(action) }} action-icon\"></i>\n                {{ action.Name }}\n              </span>\n              \n              <span class=\"col-category\">{{ action.categoryName || '-' }}</span>\n              <span class=\"col-type\">{{ action.Type || '-' }}</span>\n              <span class=\"col-description\">{{ action.Description || '-' }}</span>\n              \n              <span class=\"col-status\">\n                @if (existingActionIds.includes(action.ID)) {\n                  <span class=\"status-badge existing\">\n                    <i class=\"fa-solid fa-check\"></i>\n                    Added\n                  </span>\n                } @else {\n                  <span class=\"status-badge available\">\n                    <i class=\"fa-solid fa-plus\"></i>\n                    Available\n                  </span>\n                }\n              </span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Selected Actions Summary -->\n  @if (selectedCount > 0) {\n    <div class=\"selection-summary\">\n      <div class=\"summary-content\">\n        <i class=\"fa-solid fa-check-circle\"></i>\n        <span>{{ selectedCount }} action{{ selectedCount === 1 ? '' : 's' }} selected</span>\n      </div>\n    </div>\n  }\n\n  <!-- Dialog Footer -->\n  <div class=\"dialog-footer\">\n    <button mjButton\n            variant=\"flat\"\n            (click)=\"cancel()\">\n      Cancel\n    </button>\n\n    <button mjButton\n            variant=\"primary\"\n            [disabled]=\"selectedCount === 0\"\n            (click)=\"addSelectedActions()\">\n      <i class=\"fa-solid fa-plus\"></i>\n      Add Selected ({{ selectedCount }})\n    </button>\n  </div>\n</div>", styles: [".add-action-dialog {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n/* Ensure dialog appears above banner and other elements */\n:host ::ng-deep .k-dialog,\n:host ::ng-deep .k-window {\n  z-index: 10000 !important;\n}\n\n:host ::ng-deep .k-overlay {\n  z-index: 9999 !important;\n}\n\n/* === Dialog Header === */\n.add-action-dialog .dialog-header {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem 1.5rem;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n}\n\n.add-action-dialog .dialog-header .search-section {\n  flex: 1;\n}\n\n.add-action-dialog .dialog-header .search-section .search-input {\n  width: 100%;\n  max-width: 400px;\n}\n\n.add-action-dialog .dialog-header .header-actions {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n.add-action-dialog .dialog-header .header-actions .stats .stat-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  color: var(--mj-text-muted);\n  font-size: 0.9rem;\n}\n\n.add-action-dialog .dialog-header .header-actions .stats .stat-item i {\n  color: var(--mj-status-success);\n}\n\n/* === Main Content === */\n.add-action-dialog .dialog-content {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n}\n\n/* === Category Sidebar === */\n.add-action-dialog .category-sidebar {\n  width: 250px;\n  background: var(--mj-bg-surface-card);\n  border-right: 1px solid var(--mj-border-default);\n  overflow-y: auto;\n}\n\n.add-action-dialog .category-sidebar .sidebar-header {\n  padding: 1rem;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.add-action-dialog .category-sidebar .sidebar-header h4 {\n  margin: 0;\n  color: var(--mj-text-secondary);\n  font-size: 1rem;\n  font-weight: 600;\n}\n\n.add-action-dialog .category-sidebar .sidebar-header h4 i {\n  margin-right: 0.5rem;\n  color: var(--mj-text-muted);\n}\n\n.add-action-dialog .category-sidebar .category-list {\n  padding: 0.5rem 0;\n}\n\n.add-action-dialog .category-sidebar .category-list .category-item {\n  display: flex;\n  align-items: center;\n  padding: 0.75rem 1rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border-left: 3px solid transparent;\n}\n\n.add-action-dialog .category-sidebar .category-list .category-item:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.add-action-dialog .category-sidebar .category-list .category-item.selected {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-left-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.add-action-dialog .category-sidebar .category-list .category-item.selected .category-icon {\n  color: var(--mj-brand-primary);\n}\n\n.add-action-dialog .category-sidebar .category-list .category-item .category-icon {\n  width: 16px;\n  text-align: center;\n  margin-right: 0.75rem;\n  color: var(--mj-text-muted);\n}\n\n.add-action-dialog .category-sidebar .category-list .category-item .category-name {\n  flex: 1;\n  font-weight: 500;\n}\n\n.add-action-dialog .category-sidebar .category-list .category-item .category-count {\n  background: var(--mj-border-default);\n  color: var(--mj-text-secondary);\n  padding: 0.25rem 0.5rem;\n  border-radius: 12px;\n  font-size: 0.8rem;\n  font-weight: 600;\n  min-width: 24px;\n  text-align: center;\n}\n\n.add-action-dialog .category-sidebar .category-list .category-item.selected .category-count {\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n/* === Actions Container === */\n.add-action-dialog .actions-container {\n  flex: 1;\n  padding: 1.5rem;\n  overflow-y: auto;\n  background: var(--mj-bg-surface);\n}\n\n/* Loading State */\n.add-action-dialog .actions-container .loading-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 200px;\n  color: var(--mj-text-muted);\n}\n\n.add-action-dialog .actions-container .loading-state .loading-spinner {\n  margin-bottom: 1rem;\n}\n\n.add-action-dialog .actions-container .loading-state .loading-spinner i {\n  color: var(--mj-brand-primary);\n}\n\n.add-action-dialog .actions-container .loading-state p {\n  margin-top: 1rem;\n  font-size: 1.1rem;\n}\n\n/* === Grid View === */\n.add-action-dialog .actions-container .actions-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 1.5rem;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card {\n  position: relative;\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  border-radius: 8px;\n  padding: 1.5rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  transform: translateY(-2px);\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card.selected {\n  border-color: var(--mj-status-success);\n  background: color-mix(in srgb, var(--mj-status-success) 4%, var(--mj-bg-surface));\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-status-success) 15%, transparent);\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card.selected .selection-indicator i {\n  color: var(--mj-status-success);\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card.existing {\n  border-color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-card);\n  cursor: default;\n  opacity: 0.7;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card.existing:hover {\n  transform: none;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .selection-indicator {\n  position: absolute;\n  top: 1rem;\n  right: 1rem;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .selection-indicator i {\n  font-size: 1.25rem;\n  color: var(--mj-border-default);\n  transition: color 0.2s ease;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .card-header {\n  display: flex;\n  align-items: center;\n  margin-bottom: 1rem;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .card-header .action-icon {\n  width: 40px;\n  height: 40px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 1rem;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .card-header .action-icon i {\n  font-size: 1.25rem;\n  color: var(--mj-brand-primary);\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .card-header .action-name {\n  margin: 0;\n  font-size: 1.1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  line-height: 1.2;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .card-body .action-description {\n  margin: 0 0 1rem 0;\n  color: var(--mj-text-muted);\n  line-height: 1.4;\n  font-size: 0.9rem;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .card-body .category-badge,\n.add-action-dialog .actions-container .actions-grid .action-card .card-body .type-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  padding: 0.25rem 0.5rem;\n  border-radius: 4px;\n  font-size: 0.8rem;\n  font-weight: 500;\n  margin-right: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .card-body .category-badge i,\n.add-action-dialog .actions-container .actions-grid .action-card .card-body .type-badge i {\n  font-size: 0.7rem;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .card-body .type-badge {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .existing-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-text-muted) 90%, transparent);\n  color: var(--mj-text-inverse);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .existing-overlay i {\n  font-size: 2rem;\n  margin-bottom: 0.5rem;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .existing-overlay span {\n  font-weight: 600;\n}\n\n/* === List View === */\n.add-action-dialog .actions-container .actions-list .list-header {\n  display: grid;\n  grid-template-columns: 40px 1fr 150px 100px 2fr 120px;\n  gap: 1rem;\n  padding: 1rem;\n  background: var(--mj-bg-surface-card);\n  border-radius: 6px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin-bottom: 0.5rem;\n  font-size: 0.9rem;\n}\n\n.add-action-dialog .actions-container .actions-list .list-item {\n  display: grid;\n  grid-template-columns: 40px 1fr 150px 100px 2fr 120px;\n  gap: 1rem;\n  padding: 1rem;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  margin-bottom: 0.5rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  align-items: center;\n}\n\n.add-action-dialog .actions-container .actions-list .list-item:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n}\n\n.add-action-dialog .actions-container .actions-list .list-item.selected {\n  background: color-mix(in srgb, var(--mj-status-success) 4%, var(--mj-bg-surface));\n  border-color: var(--mj-status-success);\n}\n\n.add-action-dialog .actions-container .actions-list .list-item.selected .col-select i {\n  color: var(--mj-status-success);\n}\n\n.add-action-dialog .actions-container .actions-list .list-item.existing {\n  background: var(--mj-bg-surface-card);\n  opacity: 0.7;\n  cursor: default;\n}\n\n.add-action-dialog .actions-container .actions-list .list-item.existing:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-default);\n}\n\n.add-action-dialog .actions-container .actions-list .list-item .col-select i {\n  font-size: 1.25rem;\n  color: var(--mj-border-default);\n}\n\n.add-action-dialog .actions-container .actions-list .list-item .col-name {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-weight: 500;\n}\n\n.add-action-dialog .actions-container .actions-list .list-item .col-name .action-icon {\n  color: var(--mj-brand-primary);\n}\n\n.add-action-dialog .actions-container .actions-list .list-item .col-description {\n  color: var(--mj-text-muted);\n  font-size: 0.9rem;\n}\n\n.add-action-dialog .actions-container .actions-list .list-item .status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  padding: 0.25rem 0.5rem;\n  border-radius: 4px;\n  font-size: 0.8rem;\n  font-weight: 500;\n}\n\n.add-action-dialog .actions-container .actions-list .list-item .status-badge.existing {\n  background: var(--mj-text-muted);\n  color: var(--mj-text-inverse);\n}\n\n.add-action-dialog .actions-container .actions-list .list-item .status-badge.available {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n/* === Selection Summary === */\n.add-action-dialog .selection-summary {\n  padding: 1rem 1.5rem;\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  border-top: 1px solid color-mix(in srgb, var(--mj-status-success) 25%, var(--mj-bg-surface));\n}\n\n.add-action-dialog .selection-summary .summary-content {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  color: var(--mj-status-success);\n  font-weight: 500;\n}\n\n.add-action-dialog .selection-summary .summary-content i {\n  color: var(--mj-status-success);\n}\n\n/* === Dialog Footer === */\n.add-action-dialog .dialog-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 1rem;\n  padding: 1rem 1.5rem;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n}\n\n.add-action-dialog .dialog-footer button {\n  min-width: 120px;\n}\n\n/* === Responsive Design === */\n@media (max-width: 768px) {\n  .add-action-dialog .dialog-content {\n    flex-direction: column;\n  }\n\n  .add-action-dialog .category-sidebar {\n    width: 100%;\n    max-height: 200px;\n  }\n\n  .add-action-dialog .actions-container .actions-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .add-action-dialog .actions-container .actions-list .list-header,\n  .add-action-dialog .actions-container .actions-list .list-item {\n    grid-template-columns: 40px 1fr 80px;\n    gap: 0.5rem;\n  }\n\n  .add-action-dialog .actions-container .actions-list .list-header .col-category,\n  .add-action-dialog .actions-container .actions-list .list-header .col-type,\n  .add-action-dialog .actions-container .actions-list .list-header .col-description,\n  .add-action-dialog .actions-container .actions-list .list-item .col-category,\n  .add-action-dialog .actions-container .actions-list .list-item .col-type,\n  .add-action-dialog .actions-container .actions-list .list-item .col-description {\n    display: none;\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-add-action-dialog', template: "<!-- Add Action Dialog -->\n<div class=\"add-action-dialog\">\n  \n  <!-- Dialog Header -->\n  <div class=\"dialog-header\">\n    <div class=\"search-section\">\n      <div class=\"search-input-wrapper\">\n        <i class=\"fa-solid fa-search search-prefix-icon\"></i>\n        <input\n          class=\"mj-input search-input\"\n          [formControl]=\"searchControl\"\n          placeholder=\"Search actions by name, description, or category...\">\n      </div>\n    </div>\n    \n    <div class=\"header-actions\">\n      <!-- View Toggle -->\n      <button mjButton\n              variant=\"flat\"\n              (click)=\"toggleViewMode()\"\n              [title]=\"(viewMode$ | async) === 'grid' ? 'Switch to list view' : 'Switch to grid view'\">\n        <i class=\"fa-solid\"\n           [class.fa-th]=\"(viewMode$ | async) === 'grid'\"\n           [class.fa-list]=\"(viewMode$ | async) === 'list'\"></i>\n      </button>\n      \n      <!-- Stats -->\n      <div class=\"stats\">\n        <span class=\"stat-item\">\n          <i class=\"fa-solid fa-bolt\"></i>\n          {{ filteredCount }} of {{ totalActionCount }} actions\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Main Content -->\n  <div class=\"dialog-content\">\n    \n    <!-- Category Sidebar -->\n    <div class=\"category-sidebar\">\n      <div class=\"sidebar-header\">\n        <h4><i class=\"fa-solid fa-folder-tree\"></i> Categories</h4>\n      </div>\n      \n      <div class=\"category-list\">\n        @for (category of categoryTree$ | async; track category.id) {\n          <div class=\"category-item\" \n               [class.selected]=\"(selectedCategoryId$ | async) === category.id\"\n               (click)=\"selectCategory(category.id)\">\n            <i class=\"fa-solid {{ category.icon }} category-icon\"></i>\n            <span class=\"category-name\">{{ category.name }}</span>\n            <span class=\"category-count\">{{ category.count }}</span>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Actions Display -->\n    <div class=\"actions-container\">\n      \n      <!-- Loading State -->\n      @if (isLoading$ | async) {\n        <div class=\"loading-state\">\n          <div class=\"loading-spinner\">\n            <i class=\"fa-solid fa-spinner fa-spin fa-2x\"></i>\n          </div>\n          <p>Loading actions...</p>\n        </div>\n      }\n\n      <!-- Empty State -->\n      @if (!(isLoading$ | async) && filteredCount === 0) {\n        <mj-empty-state\n          Variant=\"no-results\"\n          Title=\"No actions found\"\n          Message=\"Try adjusting your search criteria or selecting a different category\"\n          ActionText=\"Clear Filters\"\n          ActionVariant=\"flat\"\n          (Action)=\"clearSearch()\"\n          Size=\"compact\" />\n      }\n\n      <!-- Grid View -->\n      @if (!(isLoading$ | async) && (viewMode$ | async) === 'grid' && filteredCount > 0) {\n        <div class=\"actions-grid\">\n          @for (action of filteredActions$ | async; track action.ID) {\n            <div class=\"action-card\" \n                 [class.selected]=\"action.Selected\"\n                 [class.existing]=\"existingActionIds.includes(action.ID)\"\n                 (click)=\"toggleActionSelection(action)\">\n              \n              <!-- Selection Indicator -->\n              <div class=\"selection-indicator\">\n                <i class=\"fa-solid\" \n                   [class.fa-check-circle]=\"action.Selected\" \n                   [class.fa-circle]=\"!action.Selected\"></i>\n              </div>\n              \n              <!-- Card Content -->\n              <div class=\"card-header\">\n                <div class=\"action-icon\">\n                  <i class=\"fa-solid {{ getActionIcon(action) }}\"></i>\n                </div>\n                <h3 class=\"action-name\">{{ action.Name }}</h3>\n              </div>\n              \n              <div class=\"card-body\">\n                <p class=\"action-description\">{{ action.Description || 'No description available' }}</p>\n                \n                @if (action.CategoryName) {\n                  <div class=\"category-badge\">\n                    <i class=\"fa-solid fa-folder\"></i>\n                    {{ action.CategoryName }}\n                  </div>\n                }\n                \n                @if (action.Type) {\n                  <div class=\"type-badge\">\n                    <i class=\"fa-solid fa-tag\"></i>\n                    {{ action.Type }}\n                  </div>\n                }\n              </div>\n              \n              <!-- Existing Action Overlay -->\n              @if (existingActionIds.includes(action.ID)) {\n                <div class=\"existing-overlay\">\n                  <i class=\"fa-solid fa-check\"></i>\n                  <span>Already Added</span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n\n      <!-- List View -->\n      @if (!(isLoading$ | async) && (viewMode$ | async) === 'list' && filteredCount > 0) {\n        <div class=\"actions-list\">\n          \n          <!-- List Header -->\n          <div class=\"list-header\">\n            <span class=\"col-select\"></span>\n            <span class=\"col-name\">Name</span>\n            <span class=\"col-category\">Category</span>\n            <span class=\"col-type\">Type</span>\n            <span class=\"col-description\">Description</span>\n            <span class=\"col-status\">Status</span>\n          </div>\n          \n          <!-- List Items -->\n          @for (action of filteredActions$ | async; track action.ID) {\n            <div class=\"list-item\" \n                 [class.selected]=\"action.Selected\"\n                 [class.existing]=\"existingActionIds.includes(action.ID)\"\n                 (click)=\"toggleActionSelection(action)\">\n              \n              <span class=\"col-select\">\n                <i class=\"fa-solid\" \n                   [class.fa-check-circle]=\"action.Selected\" \n                   [class.fa-circle]=\"!action.Selected\"></i>\n              </span>\n              \n              <span class=\"col-name\">\n                <i class=\"fa-solid {{ getActionIcon(action) }} action-icon\"></i>\n                {{ action.Name }}\n              </span>\n              \n              <span class=\"col-category\">{{ action.CategoryName || '-' }}</span>\n              <span class=\"col-type\">{{ action.Type || '-' }}</span>\n              <span class=\"col-description\">{{ action.Description || '-' }}</span>\n              \n              <span class=\"col-status\">\n                @if (existingActionIds.includes(action.ID)) {\n                  <span class=\"status-badge existing\">\n                    <i class=\"fa-solid fa-check\"></i>\n                    Added\n                  </span>\n                } @else {\n                  <span class=\"status-badge available\">\n                    <i class=\"fa-solid fa-plus\"></i>\n                    Available\n                  </span>\n                }\n              </span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Selected Actions Summary -->\n  @if (selectedCount > 0) {\n    <div class=\"selection-summary\">\n      <div class=\"summary-content\">\n        <i class=\"fa-solid fa-check-circle\"></i>\n        <span>{{ selectedCount }} action{{ selectedCount === 1 ? '' : 's' }} selected</span>\n      </div>\n    </div>\n  }\n\n  <!-- Dialog Footer -->\n  <div class=\"dialog-footer\">\n    <button mjButton\n            variant=\"flat\"\n            (click)=\"cancel()\">\n      Cancel\n    </button>\n\n    <button mjButton\n            variant=\"primary\"\n            [disabled]=\"selectedCount === 0\"\n            (click)=\"addSelectedActions()\">\n      <i class=\"fa-solid fa-plus\"></i>\n      Add Selected ({{ selectedCount }})\n    </button>\n  </div>\n</div>", styles: [".add-action-dialog {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n/* Ensure dialog appears above banner and other elements */\n:host ::ng-deep .k-dialog,\n:host ::ng-deep .k-window {\n  z-index: 10000 !important;\n}\n\n:host ::ng-deep .k-overlay {\n  z-index: 9999 !important;\n}\n\n/* === Dialog Header === */\n.add-action-dialog .dialog-header {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem 1.5rem;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n}\n\n.add-action-dialog .dialog-header .search-section {\n  flex: 1;\n}\n\n.add-action-dialog .dialog-header .search-section .search-input {\n  width: 100%;\n  max-width: 400px;\n}\n\n.add-action-dialog .dialog-header .header-actions {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n.add-action-dialog .dialog-header .header-actions .stats .stat-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  color: var(--mj-text-muted);\n  font-size: 0.9rem;\n}\n\n.add-action-dialog .dialog-header .header-actions .stats .stat-item i {\n  color: var(--mj-status-success);\n}\n\n/* === Main Content === */\n.add-action-dialog .dialog-content {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n}\n\n/* === Category Sidebar === */\n.add-action-dialog .category-sidebar {\n  width: 250px;\n  background: var(--mj-bg-surface-card);\n  border-right: 1px solid var(--mj-border-default);\n  overflow-y: auto;\n}\n\n.add-action-dialog .category-sidebar .sidebar-header {\n  padding: 1rem;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.add-action-dialog .category-sidebar .sidebar-header h4 {\n  margin: 0;\n  color: var(--mj-text-secondary);\n  font-size: 1rem;\n  font-weight: 600;\n}\n\n.add-action-dialog .category-sidebar .sidebar-header h4 i {\n  margin-right: 0.5rem;\n  color: var(--mj-text-muted);\n}\n\n.add-action-dialog .category-sidebar .category-list {\n  padding: 0.5rem 0;\n}\n\n.add-action-dialog .category-sidebar .category-list .category-item {\n  display: flex;\n  align-items: center;\n  padding: 0.75rem 1rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border-left: 3px solid transparent;\n}\n\n.add-action-dialog .category-sidebar .category-list .category-item:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.add-action-dialog .category-sidebar .category-list .category-item.selected {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-left-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.add-action-dialog .category-sidebar .category-list .category-item.selected .category-icon {\n  color: var(--mj-brand-primary);\n}\n\n.add-action-dialog .category-sidebar .category-list .category-item .category-icon {\n  width: 16px;\n  text-align: center;\n  margin-right: 0.75rem;\n  color: var(--mj-text-muted);\n}\n\n.add-action-dialog .category-sidebar .category-list .category-item .category-name {\n  flex: 1;\n  font-weight: 500;\n}\n\n.add-action-dialog .category-sidebar .category-list .category-item .category-count {\n  background: var(--mj-border-default);\n  color: var(--mj-text-secondary);\n  padding: 0.25rem 0.5rem;\n  border-radius: 12px;\n  font-size: 0.8rem;\n  font-weight: 600;\n  min-width: 24px;\n  text-align: center;\n}\n\n.add-action-dialog .category-sidebar .category-list .category-item.selected .category-count {\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n/* === Actions Container === */\n.add-action-dialog .actions-container {\n  flex: 1;\n  padding: 1.5rem;\n  overflow-y: auto;\n  background: var(--mj-bg-surface);\n}\n\n/* Loading State */\n.add-action-dialog .actions-container .loading-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 200px;\n  color: var(--mj-text-muted);\n}\n\n.add-action-dialog .actions-container .loading-state .loading-spinner {\n  margin-bottom: 1rem;\n}\n\n.add-action-dialog .actions-container .loading-state .loading-spinner i {\n  color: var(--mj-brand-primary);\n}\n\n.add-action-dialog .actions-container .loading-state p {\n  margin-top: 1rem;\n  font-size: 1.1rem;\n}\n\n/* === Grid View === */\n.add-action-dialog .actions-container .actions-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 1.5rem;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card {\n  position: relative;\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  border-radius: 8px;\n  padding: 1.5rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  transform: translateY(-2px);\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card.selected {\n  border-color: var(--mj-status-success);\n  background: color-mix(in srgb, var(--mj-status-success) 4%, var(--mj-bg-surface));\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-status-success) 15%, transparent);\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card.selected .selection-indicator i {\n  color: var(--mj-status-success);\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card.existing {\n  border-color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-card);\n  cursor: default;\n  opacity: 0.7;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card.existing:hover {\n  transform: none;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .selection-indicator {\n  position: absolute;\n  top: 1rem;\n  right: 1rem;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .selection-indicator i {\n  font-size: 1.25rem;\n  color: var(--mj-border-default);\n  transition: color 0.2s ease;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .card-header {\n  display: flex;\n  align-items: center;\n  margin-bottom: 1rem;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .card-header .action-icon {\n  width: 40px;\n  height: 40px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 1rem;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .card-header .action-icon i {\n  font-size: 1.25rem;\n  color: var(--mj-brand-primary);\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .card-header .action-name {\n  margin: 0;\n  font-size: 1.1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  line-height: 1.2;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .card-body .action-description {\n  margin: 0 0 1rem 0;\n  color: var(--mj-text-muted);\n  line-height: 1.4;\n  font-size: 0.9rem;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .card-body .category-badge,\n.add-action-dialog .actions-container .actions-grid .action-card .card-body .type-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  padding: 0.25rem 0.5rem;\n  border-radius: 4px;\n  font-size: 0.8rem;\n  font-weight: 500;\n  margin-right: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .card-body .category-badge i,\n.add-action-dialog .actions-container .actions-grid .action-card .card-body .type-badge i {\n  font-size: 0.7rem;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .card-body .type-badge {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .existing-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-text-muted) 90%, transparent);\n  color: var(--mj-text-inverse);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .existing-overlay i {\n  font-size: 2rem;\n  margin-bottom: 0.5rem;\n}\n\n.add-action-dialog .actions-container .actions-grid .action-card .existing-overlay span {\n  font-weight: 600;\n}\n\n/* === List View === */\n.add-action-dialog .actions-container .actions-list .list-header {\n  display: grid;\n  grid-template-columns: 40px 1fr 150px 100px 2fr 120px;\n  gap: 1rem;\n  padding: 1rem;\n  background: var(--mj-bg-surface-card);\n  border-radius: 6px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin-bottom: 0.5rem;\n  font-size: 0.9rem;\n}\n\n.add-action-dialog .actions-container .actions-list .list-item {\n  display: grid;\n  grid-template-columns: 40px 1fr 150px 100px 2fr 120px;\n  gap: 1rem;\n  padding: 1rem;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  margin-bottom: 0.5rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  align-items: center;\n}\n\n.add-action-dialog .actions-container .actions-list .list-item:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n}\n\n.add-action-dialog .actions-container .actions-list .list-item.selected {\n  background: color-mix(in srgb, var(--mj-status-success) 4%, var(--mj-bg-surface));\n  border-color: var(--mj-status-success);\n}\n\n.add-action-dialog .actions-container .actions-list .list-item.selected .col-select i {\n  color: var(--mj-status-success);\n}\n\n.add-action-dialog .actions-container .actions-list .list-item.existing {\n  background: var(--mj-bg-surface-card);\n  opacity: 0.7;\n  cursor: default;\n}\n\n.add-action-dialog .actions-container .actions-list .list-item.existing:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-default);\n}\n\n.add-action-dialog .actions-container .actions-list .list-item .col-select i {\n  font-size: 1.25rem;\n  color: var(--mj-border-default);\n}\n\n.add-action-dialog .actions-container .actions-list .list-item .col-name {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-weight: 500;\n}\n\n.add-action-dialog .actions-container .actions-list .list-item .col-name .action-icon {\n  color: var(--mj-brand-primary);\n}\n\n.add-action-dialog .actions-container .actions-list .list-item .col-description {\n  color: var(--mj-text-muted);\n  font-size: 0.9rem;\n}\n\n.add-action-dialog .actions-container .actions-list .list-item .status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  padding: 0.25rem 0.5rem;\n  border-radius: 4px;\n  font-size: 0.8rem;\n  font-weight: 500;\n}\n\n.add-action-dialog .actions-container .actions-list .list-item .status-badge.existing {\n  background: var(--mj-text-muted);\n  color: var(--mj-text-inverse);\n}\n\n.add-action-dialog .actions-container .actions-list .list-item .status-badge.available {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n/* === Selection Summary === */\n.add-action-dialog .selection-summary {\n  padding: 1rem 1.5rem;\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  border-top: 1px solid color-mix(in srgb, var(--mj-status-success) 25%, var(--mj-bg-surface));\n}\n\n.add-action-dialog .selection-summary .summary-content {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  color: var(--mj-status-success);\n  font-weight: 500;\n}\n\n.add-action-dialog .selection-summary .summary-content i {\n  color: var(--mj-status-success);\n}\n\n/* === Dialog Footer === */\n.add-action-dialog .dialog-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 1rem;\n  padding: 1rem 1.5rem;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n}\n\n.add-action-dialog .dialog-footer button {\n  min-width: 120px;\n}\n\n/* === Responsive Design === */\n@media (max-width: 768px) {\n  .add-action-dialog .dialog-content {\n    flex-direction: column;\n  }\n\n  .add-action-dialog .category-sidebar {\n    width: 100%;\n    max-height: 200px;\n  }\n\n  .add-action-dialog .actions-container .actions-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .add-action-dialog .actions-container .actions-list .list-header,\n  .add-action-dialog .actions-container .actions-list .list-item {\n    grid-template-columns: 40px 1fr 80px;\n    gap: 0.5rem;\n  }\n\n  .add-action-dialog .actions-container .actions-list .list-header .col-category,\n  .add-action-dialog .actions-container .actions-list .list-header .col-type,\n  .add-action-dialog .actions-container .actions-list .list-header .col-description,\n  .add-action-dialog .actions-container .actions-list .list-item .col-category,\n  .add-action-dialog .actions-container .actions-list .list-item .col-type,\n  .add-action-dialog .actions-container .actions-list .list-item .col-description {\n    display: none;\n  }\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], { DialogClose: [{
             type: Output
         }] }); })();