@memberjunction/ng-core-entity-forms 5.22.0 → 5.24.0

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

@@ -1,6 +1,5 @@
-import { OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { OnInit, OnDestroy, ChangeDetectorRef, EventEmitter } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { WindowRef } from '@progress/kendo-angular-dialog';
 import { Subject, BehaviorSubject } from 'rxjs';
 import { MJActionEntity, MJActionCategoryEntity } from '@memberjunction/core-entities';
 import * as i0 from "@angular/core";
@@ -21,7 +20,6 @@ export interface ActionDisplayItem extends MJActionEntity {
  * Features searchable action list, category filtering, and multi-select capability.
  */
 export declare class AddActionDialogComponent implements OnInit, OnDestroy {
-    private dialogRef;
     private cdr;
     agentId: string;
     agentName: string;
@@ -41,7 +39,8 @@ export declare class AddActionDialogComponent implements OnInit, OnDestroy {
     get selectedCount(): number;
     get totalActionCount(): number;
     get filteredCount(): number;
-    constructor(dialogRef: WindowRef, cdr: ChangeDetectorRef);
+    DialogClose: EventEmitter<void>;
+    constructor(cdr: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnDestroy(): void;
     private initializeData;
@@ -60,6 +59,6 @@ export declare class AddActionDialogComponent implements OnInit, OnDestroy {
     cancel(): void;
     addSelectedActions(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AddActionDialogComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AddActionDialogComponent, "mj-add-action-dialog", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AddActionDialogComponent, "mj-add-action-dialog", never, {}, { "DialogClose": "DialogClose"; }, never, never, false, never>;
 }
 //# sourceMappingURL=add-action-dialog.component.d.ts.map

package/dist/lib/custom/AIAgents/add-action-dialog.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"add-action-dialog.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/custom/AIAgents/add-action-dialog.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAa,SAAS,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,eAAe,EAA2E,MAAM,MAAM,CAAC;AAEzH,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;;AAGvF,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,qBAMa,wBAAyB,YAAW,MAAM,EAAE,SAAS;IAuC9D,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,GAAG;IArCb,OAAO,EAAE,MAAM,CAAM;IACrB,SAAS,EAAE,MAAM,CAAM;IACvB,iBAAiB,EAAE,MAAM,EAAE,CAAM;IAGjC,OAAO,CAAC,QAAQ,CAAuB;IAChC,MAAM,4BAAmC;IAGhD,WAAW,uCAAgD;IAC3D,WAAW,4CAAqD;IAChE,gBAAgB,uCAAgD;IAChE,aAAa,sCAA+C;IAC5D,gBAAgB,+BAA+C;IAC/D,UAAU,2BAAuC;IAGjD,aAAa,6BAAuB;IACpC,mBAAmB,0BAAsC;IACzD,SAAS,mCAAgD;IACzD,kBAAkB,cAAqB;IAGvC,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,IAAI,gBAAgB,IAAI,MAAM,CAE7B;IAED,IAAI,aAAa,IAAI,MAAM,CAE1B;gBAGS,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,iBAAiB;IAGhC,QAAQ;IAMR,WAAW;YAKG,cAAc;YAad,wBAAwB;IAmCtC,OAAO,CAAC,iBAAiB;IAgDzB,OAAO,CAAC,eAAe;IAgBvB,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,aAAa;IA0BrB,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,wBAAwB;IAgBhC,cAAc,CAAC,UAAU,EAAE,MAAM;IAIjC,cAAc;IAKd,qBAAqB,CAAC,MAAM,EAAE,iBAAiB;IA4B/C,WAAW;IAIX,aAAa,CAAC,MAAM,EAAE,iBAAiB,GAAG,MAAM;IAsBhD,MAAM;IAKN,kBAAkB;yCAzSP,wBAAwB;2CAAxB,wBAAwB;CAuTpC"}
+{"version":3,"file":"add-action-dialog.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/custom/AIAgents/add-action-dialog.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAU,YAAY,EAAE,MAAM,eAAe,CAAC;AACtG,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,eAAe,EAA2E,MAAM,MAAM,CAAC;AAEzH,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;;AAGvF,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,qBAMa,wBAAyB,YAAW,MAAM,EAAE,SAAS;IAyC9D,OAAO,CAAC,GAAG;IAtCb,OAAO,EAAE,MAAM,CAAM;IACrB,SAAS,EAAE,MAAM,CAAM;IACvB,iBAAiB,EAAE,MAAM,EAAE,CAAM;IAGjC,OAAO,CAAC,QAAQ,CAAuB;IAChC,MAAM,4BAAmC;IAGhD,WAAW,uCAAgD;IAC3D,WAAW,4CAAqD;IAChE,gBAAgB,uCAAgD;IAChE,aAAa,sCAA+C;IAC5D,gBAAgB,+BAA+C;IAC/D,UAAU,2BAAuC;IAGjD,aAAa,6BAAuB;IACpC,mBAAmB,0BAAsC;IACzD,SAAS,mCAAgD;IACzD,kBAAkB,cAAqB;IAGvC,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,IAAI,gBAAgB,IAAI,MAAM,CAE7B;IAED,IAAI,aAAa,IAAI,MAAM,CAE1B;IAES,WAAW,qBAA4B;gBAGvC,GAAG,EAAE,iBAAiB;IAGhC,QAAQ;IAMR,WAAW;YAKG,cAAc;YAad,wBAAwB;IAmCtC,OAAO,CAAC,iBAAiB;IAgDzB,OAAO,CAAC,eAAe;IAgBvB,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,aAAa;IA0BrB,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,wBAAwB;IAgBhC,cAAc,CAAC,UAAU,EAAE,MAAM;IAIjC,cAAc;IAKd,qBAAqB,CAAC,MAAM,EAAE,iBAAiB;IA4B/C,WAAW;IAIX,aAAa,CAAC,MAAM,EAAE,iBAAiB,GAAG,MAAM;IAsBhD,MAAM;IAKN,kBAAkB;yCA1SP,wBAAwB;2CAAxB,wBAAwB;CAwTpC"}

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

@@ -1,19 +1,14 @@
-import { Component } from '@angular/core';
+import { Component, Output, EventEmitter } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { Subject, BehaviorSubject, combineLatest, debounceTime, distinctUntilChanged, takeUntil, startWith } from 'rxjs';
 import { RunView } from '@memberjunction/core';
 import { UUIDsEqual } from '@memberjunction/global';
 import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-dialog";
-import * as i2 from "@angular/forms";
-import * as i3 from "@progress/kendo-angular-inputs";
-import * as i4 from "@progress/kendo-angular-buttons";
-import * as i5 from "@angular/common";
+import * as i1 from "@angular/forms";
+import * as i2 from "@memberjunction/ng-ui-components";
+import * as i3 from "@angular/common";
 const _forTrack0 = ($index, $item) => $item.id;
 const _forTrack1 = ($index, $item) => $item.ID;
-function AddActionDialogComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 27);
-} }
 function AddActionDialogComponent_For_24_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 28);
@@ -38,7 +33,7 @@ function AddActionDialogComponent_For_24_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate(category_r2.count);
 } }
 function AddActionDialogComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18)(1, "div", 31);
+    i0.ɵɵelementStart(0, "div", 19)(1, "div", 31);
     i0.ɵɵelement(2, "i", 32);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "p");
@@ -47,7 +42,7 @@ function AddActionDialogComponent_Conditional_27_Template(rf, ctx) { if (rf & 1)
 } }
 function AddActionDialogComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 19);
+    i0.ɵɵelementStart(0, "div", 20);
     i0.ɵɵelement(1, "i", 33);
     i0.ɵɵelementStart(2, "h3");
     i0.ɵɵtext(3, "No actions found");
@@ -92,7 +87,7 @@ function AddActionDialogComponent_Conditional_31_For_2_Template(rf, ctx) { if (r
     i0.ɵɵelementStart(0, "div", 36);
     i0.ɵɵlistener("click", function AddActionDialogComponent_Conditional_31_For_2_Template_div_click_0_listener() { const action_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleActionSelection(action_r6)); });
     i0.ɵɵelementStart(1, "div", 37);
-    i0.ɵɵelement(2, "i", 7);
+    i0.ɵɵelement(2, "i", 8);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 38)(4, "div", 39);
     i0.ɵɵelement(5, "i");
@@ -128,7 +123,7 @@ function AddActionDialogComponent_Conditional_31_For_2_Template(rf, ctx) { if (r
     i0.ɵɵconditional(ctx_r2.existingActionIds.includes(action_r6.ID) ? 13 : -1);
 } }
 function AddActionDialogComponent_Conditional_31_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵelementStart(0, "div", 21);
     i0.ɵɵrepeaterCreate(1, AddActionDialogComponent_Conditional_31_For_2_Template, 14, 16, "div", 35, _forTrack1);
     i0.ɵɵpipe(3, "async");
     i0.ɵɵelementEnd();
@@ -145,7 +140,7 @@ function AddActionDialogComponent_Conditional_34_For_14_Conditional_13_Template(
 } }
 function AddActionDialogComponent_Conditional_34_For_14_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 59);
-    i0.ɵɵelement(1, "i", 26);
+    i0.ɵɵelement(1, "i", 27);
     i0.ɵɵtext(2, " Available ");
     i0.ɵɵelementEnd();
 } }
@@ -154,7 +149,7 @@ function AddActionDialogComponent_Conditional_34_For_14_Template(rf, ctx) { if (
     i0.ɵɵelementStart(0, "div", 57);
     i0.ɵɵlistener("click", function AddActionDialogComponent_Conditional_34_For_14_Template_div_click_0_listener() { const action_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleActionSelection(action_r8)); });
     i0.ɵɵelementStart(1, "span", 50);
-    i0.ɵɵelement(2, "i", 7);
+    i0.ɵɵelement(2, "i", 8);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "span", 51);
     i0.ɵɵelement(4, "i");
@@ -192,7 +187,7 @@ function AddActionDialogComponent_Conditional_34_For_14_Template(rf, ctx) { if (
     i0.ɵɵconditional(ctx_r2.existingActionIds.includes(action_r8.ID) ? 13 : 14);
 } }
 function AddActionDialogComponent_Conditional_34_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 21)(1, "div", 49);
+    i0.ɵɵelementStart(0, "div", 22)(1, "div", 49);
     i0.ɵɵelement(2, "span", 50);
     i0.ɵɵelementStart(3, "span", 51);
     i0.ɵɵtext(4, "Name");
@@ -218,7 +213,7 @@ function AddActionDialogComponent_Conditional_34_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵrepeater(i0.ɵɵpipeBind1(15, 0, ctx_r2.filteredActions$));
 } }
 function AddActionDialogComponent_Conditional_37_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22)(1, "div", 60);
+    i0.ɵɵelementStart(0, "div", 23)(1, "div", 60);
     i0.ɵɵelement(2, "i", 61);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4);
@@ -243,8 +238,7 @@ export class AddActionDialogComponent {
     get filteredCount() {
         return this.filteredActions$.value.length;
     }
-    constructor(dialogRef, cdr) {
-        this.dialogRef = dialogRef;
+    constructor(cdr) {
         this.cdr = cdr;
         // Input properties set by service
         this.agentId = '';
@@ -265,6 +259,7 @@ export class AddActionDialogComponent {
         this.selectedCategoryId$ = new BehaviorSubject('all');
         this.viewMode$ = new BehaviorSubject('grid');
         this.expandedCategories = new Set();
+        this.DialogClose = new EventEmitter();
     }
     ngOnInit() {
         this.initializeData();
@@ -485,7 +480,7 @@ export class AddActionDialogComponent {
     // === Dialog Actions ===
     cancel() {
         this.result.next([]);
-        this.dialogRef.close();
+        this.DialogClose.emit();
     }
     addSelectedActions() {
         const selectedIds = this.selectedActions$.value;
@@ -496,85 +491,86 @@ export class AddActionDialogComponent {
         // Convert ActionDisplayItem to MJActionEntity by casting (they have the same structure)
         const selectedActions = selectedDisplayItems.map(item => item);
         this.result.next(selectedActions);
-        this.dialogRef.close();
+        this.DialogClose.emit();
     }
-    static { this.ɵfac = function AddActionDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AddActionDialogComponent)(i0.ɵɵdirectiveInject(i1.WindowRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AddActionDialogComponent, selectors: [["mj-add-action-dialog"]], standalone: false, decls: 44, vars: 40, consts: [[1, "add-action-dialog"], [1, "dialog-header"], [1, "search-section"], ["placeholder", "Search actions by name, description, or category...", 1, "search-input", 3, "formControl", "clearButton"], ["kendoTextBoxPrefixTemplate", ""], [1, "header-actions"], ["kendoButton", "", "size", "small", "kendoTooltip", "", 3, "click", "toggleable", "selected", "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"], [1, "empty-state"], [1, "actions-grid"], [1, "actions-list"], [1, "selection-summary"], [1, "dialog-footer"], ["kendoButton", "", "look", "flat", 3, "click"], ["kendoButton", "", "themeColor", "primary", 3, "click", "disabled"], [1, "fa-solid", "fa-plus"], [1, "fa-solid", "fa-search"], [1, "category-item", 3, "click"], [1, "category-name"], [1, "category-count"], [1, "loading-spinner"], [1, "fa-solid", "fa-spinner", "fa-spin", "fa-2x"], [1, "fa-solid", "fa-search-minus"], ["kendoButton", "", 3, "click"], [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, "kendo-textbox", 3);
-            i0.ɵɵtemplate(4, AddActionDialogComponent_ng_template_4_Template, 1, 0, "ng-template", 4);
+    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, 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"], [1, "empty-state"], [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"], [1, "fa-solid", "fa-search-minus"], ["mjButton", "", 3, "click"], [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);
+            i0.ɵɵelement(4, "i", 4)(5, "input", 5);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(5, "div", 5)(6, "button", 6);
-            i0.ɵɵpipe(7, "async");
+            i0.ɵɵelementStart(6, "div", 6)(7, "button", 7);
             i0.ɵɵpipe(8, "async");
-            i0.ɵɵlistener("click", function AddActionDialogComponent_Template_button_click_6_listener() { return ctx.toggleViewMode(); });
-            i0.ɵɵelement(9, "i", 7);
+            i0.ɵɵlistener("click", function AddActionDialogComponent_Template_button_click_7_listener() { return ctx.toggleViewMode(); });
+            i0.ɵɵelement(9, "i", 8);
             i0.ɵɵpipe(10, "async");
             i0.ɵɵpipe(11, "async");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(12, "div", 8)(13, "span", 9);
-            i0.ɵɵelement(14, "i", 10);
+            i0.ɵɵelementStart(12, "div", 9)(13, "span", 10);
+            i0.ɵɵelement(14, "i", 11);
             i0.ɵɵtext(15);
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(16, "div", 11)(17, "div", 12)(18, "div", 13)(19, "h4");
-            i0.ɵɵelement(20, "i", 14);
+            i0.ɵɵelementStart(16, "div", 12)(17, "div", 13)(18, "div", 14)(19, "h4");
+            i0.ɵɵelement(20, "i", 15);
             i0.ɵɵtext(21, " Categories");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(22, "div", 15);
-            i0.ɵɵrepeaterCreate(23, AddActionDialogComponent_For_24_Template, 7, 9, "div", 16, _forTrack0);
+            i0.ɵɵelementStart(22, "div", 16);
+            i0.ɵɵrepeaterCreate(23, AddActionDialogComponent_For_24_Template, 7, 9, "div", 17, _forTrack0);
             i0.ɵɵpipe(25, "async");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(26, "div", 17);
-            i0.ɵɵconditionalCreate(27, AddActionDialogComponent_Conditional_27_Template, 5, 0, "div", 18);
+            i0.ɵɵelementStart(26, "div", 18);
+            i0.ɵɵconditionalCreate(27, AddActionDialogComponent_Conditional_27_Template, 5, 0, "div", 19);
             i0.ɵɵpipe(28, "async");
-            i0.ɵɵconditionalCreate(29, AddActionDialogComponent_Conditional_29_Template, 8, 0, "div", 19);
+            i0.ɵɵconditionalCreate(29, AddActionDialogComponent_Conditional_29_Template, 8, 0, "div", 20);
             i0.ɵɵpipe(30, "async");
-            i0.ɵɵconditionalCreate(31, AddActionDialogComponent_Conditional_31_Template, 4, 2, "div", 20);
+            i0.ɵɵconditionalCreate(31, AddActionDialogComponent_Conditional_31_Template, 4, 2, "div", 21);
             i0.ɵɵpipe(32, "async");
             i0.ɵɵpipe(33, "async");
-            i0.ɵɵconditionalCreate(34, AddActionDialogComponent_Conditional_34_Template, 16, 2, "div", 21);
+            i0.ɵɵconditionalCreate(34, AddActionDialogComponent_Conditional_34_Template, 16, 2, "div", 22);
             i0.ɵɵpipe(35, "async");
             i0.ɵɵpipe(36, "async");
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(37, AddActionDialogComponent_Conditional_37_Template, 5, 2, "div", 22);
-            i0.ɵɵelementStart(38, "div", 23)(39, "button", 24);
+            i0.ɵɵconditionalCreate(37, AddActionDialogComponent_Conditional_37_Template, 5, 2, "div", 23);
+            i0.ɵɵelementStart(38, "div", 24)(39, "button", 25);
             i0.ɵɵlistener("click", function AddActionDialogComponent_Template_button_click_39_listener() { return ctx.cancel(); });
             i0.ɵɵtext(40, " Cancel ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(41, "button", 25);
+            i0.ɵɵelementStart(41, "button", 26);
             i0.ɵɵlistener("click", function AddActionDialogComponent_Template_button_click_41_listener() { return ctx.addSelectedActions(); });
-            i0.ɵɵelement(42, "i", 26);
+            i0.ɵɵelement(42, "i", 27);
             i0.ɵɵtext(43);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("formControl", ctx.searchControl)("clearButton", true);
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("toggleable", true)("selected", i0.ɵɵpipeBind1(7, 18, ctx.viewMode$) === "grid")("title", i0.ɵɵpipeBind1(8, 20, ctx.viewMode$) === "grid" ? "Switch to list view" : "Switch to grid view");
-            i0.ɵɵadvance(3);
-            i0.ɵɵclassProp("fa-th", i0.ɵɵpipeBind1(10, 22, ctx.viewMode$) === "grid")("fa-list", i0.ɵɵpipeBind1(11, 24, ctx.viewMode$) === "list");
+            i0.ɵɵadvance(5);
+            i0.ɵɵproperty("formControl", ctx.searchControl);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("title", i0.ɵɵpipeBind1(8, 15, ctx.viewMode$) === "grid" ? "Switch to list view" : "Switch to grid view");
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("fa-th", i0.ɵɵpipeBind1(10, 17, ctx.viewMode$) === "grid")("fa-list", i0.ɵɵpipeBind1(11, 19, ctx.viewMode$) === "list");
             i0.ɵɵadvance(6);
             i0.ɵɵtextInterpolate2(" ", ctx.filteredCount, " of ", ctx.totalActionCount, " actions ");
             i0.ɵɵadvance(8);
-            i0.ɵɵrepeater(i0.ɵɵpipeBind1(25, 26, ctx.categoryTree$));
+            i0.ɵɵrepeater(i0.ɵɵpipeBind1(25, 21, ctx.categoryTree$));
             i0.ɵɵadvance(4);
-            i0.ɵɵconditional(i0.ɵɵpipeBind1(28, 28, ctx.isLoading$) ? 27 : -1);
+            i0.ɵɵconditional(i0.ɵɵpipeBind1(28, 23, ctx.isLoading$) ? 27 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(!i0.ɵɵpipeBind1(30, 30, ctx.isLoading$) && ctx.filteredCount === 0 ? 29 : -1);
+            i0.ɵɵconditional(!i0.ɵɵpipeBind1(30, 25, ctx.isLoading$) && ctx.filteredCount === 0 ? 29 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(!i0.ɵɵpipeBind1(32, 32, ctx.isLoading$) && i0.ɵɵpipeBind1(33, 34, ctx.viewMode$) === "grid" && ctx.filteredCount > 0 ? 31 : -1);
+            i0.ɵɵconditional(!i0.ɵɵpipeBind1(32, 27, ctx.isLoading$) && i0.ɵɵpipeBind1(33, 29, ctx.viewMode$) === "grid" && ctx.filteredCount > 0 ? 31 : -1);
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(!i0.ɵɵpipeBind1(35, 36, ctx.isLoading$) && i0.ɵɵpipeBind1(36, 38, ctx.viewMode$) === "list" && ctx.filteredCount > 0 ? 34 : -1);
+            i0.ɵɵconditional(!i0.ɵɵpipeBind1(35, 31, ctx.isLoading$) && i0.ɵɵpipeBind1(36, 33, ctx.viewMode$) === "list" && ctx.filteredCount > 0 ? 34 : -1);
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.selectedCount > 0 ? 37 : -1);
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("disabled", ctx.selectedCount === 0);
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate1(" Add Selected (", ctx.selectedCount, ") ");
-        } }, dependencies: [i2.NgControlStatus, i2.FormControlDirective, i3.TextBoxComponent, i3.TextBoxPrefixTemplateDirective, i4.ButtonComponent, i5.AsyncPipe], styles: [".add-action-dialog[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n\n\n[_nghost-%COMP%]     .k-dialog, \n[_nghost-%COMP%]     .k-window {\n  z-index: 10000 !important;\n}\n\n[_nghost-%COMP%]     .k-overlay {\n  z-index: 9999 !important;\n}\n\n\n\n.add-action-dialog[_ngcontent-%COMP%]   .dialog-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .dialog-header[_ngcontent-%COMP%]   .search-section[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .dialog-header[_ngcontent-%COMP%]   .search-section[_ngcontent-%COMP%]   .search-input[_ngcontent-%COMP%] {\n  width: 100%;\n  max-width: 400px;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .dialog-header[_ngcontent-%COMP%]   .header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .dialog-header[_ngcontent-%COMP%]   .header-actions[_ngcontent-%COMP%]   .stats[_ngcontent-%COMP%]   .stat-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .dialog-header[_ngcontent-%COMP%]   .header-actions[_ngcontent-%COMP%]   .stats[_ngcontent-%COMP%]   .stat-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n\n\n.add-action-dialog[_ngcontent-%COMP%]   .dialog-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n}\n\n\n\n.add-action-dialog[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%]   .sidebar-header[_ngcontent-%COMP%] {\n  padding: 1rem;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%]   .sidebar-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0;\n  color: var(--mj-text-secondary);\n  font-size: 1rem;\n  font-weight: 600;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%]   .sidebar-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0.5rem;\n  color: var(--mj-text-muted);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%] {\n  padding: 0.5rem 0;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item.selected[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item.selected[_ngcontent-%COMP%]   .category-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%]   .category-icon[_ngcontent-%COMP%] {\n  width: 16px;\n  text-align: center;\n  margin-right: 0.75rem;\n  color: var(--mj-text-muted);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%]   .category-name[_ngcontent-%COMP%] {\n  flex: 1;\n  font-weight: 500;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%]   .category-count[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item.selected[_ngcontent-%COMP%]   .category-count[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 1.5rem;\n  overflow-y: auto;\n  background: var(--mj-bg-surface);\n}\n\n\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .loading-state[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .loading-state[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%] {\n  margin-bottom: 1rem;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .loading-state[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .loading-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin-top: 1rem;\n  font-size: 1.1rem;\n}\n\n\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 300px;\n  color: var(--mj-text-muted);\n  text-align: center;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 3rem;\n  margin-bottom: 1rem;\n  color: var(--mj-border-default);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 0.5rem 0;\n  color: var(--mj-text-secondary);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 1.5rem 0;\n}\n\n\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 1.5rem;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]: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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card.selected[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card.selected[_ngcontent-%COMP%]   .selection-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card.existing[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card.existing[_ngcontent-%COMP%]:hover {\n  transform: none;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .selection-indicator[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 1rem;\n  right: 1rem;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .selection-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.25rem;\n  color: var(--mj-border-default);\n  transition: color 0.2s ease;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  margin-bottom: 1rem;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .card-header[_ngcontent-%COMP%]   .action-icon[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .card-header[_ngcontent-%COMP%]   .action-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.25rem;\n  color: var(--mj-brand-primary);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .card-header[_ngcontent-%COMP%]   .action-name[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .card-body[_ngcontent-%COMP%]   .action-description[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .card-body[_ngcontent-%COMP%]   .category-badge[_ngcontent-%COMP%], \n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .card-body[_ngcontent-%COMP%]   .type-badge[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .card-body[_ngcontent-%COMP%]   .category-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .card-body[_ngcontent-%COMP%]   .type-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 0.7rem;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .card-body[_ngcontent-%COMP%]   .type-badge[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .existing-overlay[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .existing-overlay[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 2rem;\n  margin-bottom: 0.5rem;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .existing-overlay[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-weight: 600;\n}\n\n\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item.selected[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item.selected[_ngcontent-%COMP%]   .col-select[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item.existing[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  opacity: 0.7;\n  cursor: default;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item.existing[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-default);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item[_ngcontent-%COMP%]   .col-select[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.25rem;\n  color: var(--mj-border-default);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item[_ngcontent-%COMP%]   .col-name[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-weight: 500;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item[_ngcontent-%COMP%]   .col-name[_ngcontent-%COMP%]   .action-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item[_ngcontent-%COMP%]   .col-description[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 0.9rem;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item[_ngcontent-%COMP%]   .status-badge[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item[_ngcontent-%COMP%]   .status-badge.existing[_ngcontent-%COMP%] {\n  background: var(--mj-text-muted);\n  color: var(--mj-text-inverse);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item[_ngcontent-%COMP%]   .status-badge.available[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n\n\n.add-action-dialog[_ngcontent-%COMP%]   .selection-summary[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .selection-summary[_ngcontent-%COMP%]   .summary-content[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .selection-summary[_ngcontent-%COMP%]   .summary-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n\n\n.add-action-dialog[_ngcontent-%COMP%]   .dialog-footer[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .dialog-footer[_ngcontent-%COMP%]   button[kendoButton][_ngcontent-%COMP%] {\n  min-width: 120px;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .dialog-footer[_ngcontent-%COMP%]   button[kendoButton][look=\"primary\"][_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0.5rem;\n}\n\n\n\n@media (max-width: 768px) {\n  .add-action-dialog[_ngcontent-%COMP%]   .dialog-content[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .add-action-dialog[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%] {\n    width: 100%;\n    max-height: 200px;\n  }\n\n  .add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-header[_ngcontent-%COMP%], \n   .add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item[_ngcontent-%COMP%] {\n    grid-template-columns: 40px 1fr 80px;\n    gap: 0.5rem;\n  }\n\n  .add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-header[_ngcontent-%COMP%]   .col-category[_ngcontent-%COMP%], \n   .add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-header[_ngcontent-%COMP%]   .col-type[_ngcontent-%COMP%], \n   .add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-header[_ngcontent-%COMP%]   .col-description[_ngcontent-%COMP%], \n   .add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item[_ngcontent-%COMP%]   .col-category[_ngcontent-%COMP%], \n   .add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item[_ngcontent-%COMP%]   .col-type[_ngcontent-%COMP%], \n   .add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item[_ngcontent-%COMP%]   .col-description[_ngcontent-%COMP%] {\n    display: none;\n  }\n}"] }); }
+        } }, dependencies: [i1.DefaultValueAccessor, i1.NgControlStatus, i1.FormControlDirective, i2.MJButtonDirective, i3.AsyncPipe], styles: [".add-action-dialog[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n\n\n[_nghost-%COMP%]     .k-dialog, \n[_nghost-%COMP%]     .k-window {\n  z-index: 10000 !important;\n}\n\n[_nghost-%COMP%]     .k-overlay {\n  z-index: 9999 !important;\n}\n\n\n\n.add-action-dialog[_ngcontent-%COMP%]   .dialog-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .dialog-header[_ngcontent-%COMP%]   .search-section[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .dialog-header[_ngcontent-%COMP%]   .search-section[_ngcontent-%COMP%]   .search-input[_ngcontent-%COMP%] {\n  width: 100%;\n  max-width: 400px;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .dialog-header[_ngcontent-%COMP%]   .header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .dialog-header[_ngcontent-%COMP%]   .header-actions[_ngcontent-%COMP%]   .stats[_ngcontent-%COMP%]   .stat-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .dialog-header[_ngcontent-%COMP%]   .header-actions[_ngcontent-%COMP%]   .stats[_ngcontent-%COMP%]   .stat-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n\n\n.add-action-dialog[_ngcontent-%COMP%]   .dialog-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n}\n\n\n\n.add-action-dialog[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%]   .sidebar-header[_ngcontent-%COMP%] {\n  padding: 1rem;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%]   .sidebar-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0;\n  color: var(--mj-text-secondary);\n  font-size: 1rem;\n  font-weight: 600;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%]   .sidebar-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0.5rem;\n  color: var(--mj-text-muted);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%] {\n  padding: 0.5rem 0;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item.selected[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item.selected[_ngcontent-%COMP%]   .category-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%]   .category-icon[_ngcontent-%COMP%] {\n  width: 16px;\n  text-align: center;\n  margin-right: 0.75rem;\n  color: var(--mj-text-muted);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%]   .category-name[_ngcontent-%COMP%] {\n  flex: 1;\n  font-weight: 500;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%]   .category-count[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item.selected[_ngcontent-%COMP%]   .category-count[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 1.5rem;\n  overflow-y: auto;\n  background: var(--mj-bg-surface);\n}\n\n\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .loading-state[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .loading-state[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%] {\n  margin-bottom: 1rem;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .loading-state[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .loading-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin-top: 1rem;\n  font-size: 1.1rem;\n}\n\n\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 300px;\n  color: var(--mj-text-muted);\n  text-align: center;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 3rem;\n  margin-bottom: 1rem;\n  color: var(--mj-border-default);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 0.5rem 0;\n  color: var(--mj-text-secondary);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 1.5rem 0;\n}\n\n\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 1.5rem;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]: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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card.selected[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card.selected[_ngcontent-%COMP%]   .selection-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card.existing[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card.existing[_ngcontent-%COMP%]:hover {\n  transform: none;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .selection-indicator[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 1rem;\n  right: 1rem;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .selection-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.25rem;\n  color: var(--mj-border-default);\n  transition: color 0.2s ease;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  margin-bottom: 1rem;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .card-header[_ngcontent-%COMP%]   .action-icon[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .card-header[_ngcontent-%COMP%]   .action-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.25rem;\n  color: var(--mj-brand-primary);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .card-header[_ngcontent-%COMP%]   .action-name[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .card-body[_ngcontent-%COMP%]   .action-description[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .card-body[_ngcontent-%COMP%]   .category-badge[_ngcontent-%COMP%], \n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .card-body[_ngcontent-%COMP%]   .type-badge[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .card-body[_ngcontent-%COMP%]   .category-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .card-body[_ngcontent-%COMP%]   .type-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 0.7rem;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .card-body[_ngcontent-%COMP%]   .type-badge[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .existing-overlay[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .existing-overlay[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 2rem;\n  margin-bottom: 0.5rem;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%]   .action-card[_ngcontent-%COMP%]   .existing-overlay[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-weight: 600;\n}\n\n\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item.selected[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item.selected[_ngcontent-%COMP%]   .col-select[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item.existing[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  opacity: 0.7;\n  cursor: default;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item.existing[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-default);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item[_ngcontent-%COMP%]   .col-select[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.25rem;\n  color: var(--mj-border-default);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item[_ngcontent-%COMP%]   .col-name[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-weight: 500;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item[_ngcontent-%COMP%]   .col-name[_ngcontent-%COMP%]   .action-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item[_ngcontent-%COMP%]   .col-description[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 0.9rem;\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item[_ngcontent-%COMP%]   .status-badge[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item[_ngcontent-%COMP%]   .status-badge.existing[_ngcontent-%COMP%] {\n  background: var(--mj-text-muted);\n  color: var(--mj-text-inverse);\n}\n\n.add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item[_ngcontent-%COMP%]   .status-badge.available[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n\n\n.add-action-dialog[_ngcontent-%COMP%]   .selection-summary[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .selection-summary[_ngcontent-%COMP%]   .summary-content[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .selection-summary[_ngcontent-%COMP%]   .summary-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n\n\n.add-action-dialog[_ngcontent-%COMP%]   .dialog-footer[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .dialog-footer[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  min-width: 120px;\n}\n\n\n\n@media (max-width: 768px) {\n  .add-action-dialog[_ngcontent-%COMP%]   .dialog-content[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .add-action-dialog[_ngcontent-%COMP%]   .category-sidebar[_ngcontent-%COMP%] {\n    width: 100%;\n    max-height: 200px;\n  }\n\n  .add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-header[_ngcontent-%COMP%], \n   .add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item[_ngcontent-%COMP%] {\n    grid-template-columns: 40px 1fr 80px;\n    gap: 0.5rem;\n  }\n\n  .add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-header[_ngcontent-%COMP%]   .col-category[_ngcontent-%COMP%], \n   .add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-header[_ngcontent-%COMP%]   .col-type[_ngcontent-%COMP%], \n   .add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-header[_ngcontent-%COMP%]   .col-description[_ngcontent-%COMP%], \n   .add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item[_ngcontent-%COMP%]   .col-category[_ngcontent-%COMP%], \n   .add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item[_ngcontent-%COMP%]   .col-type[_ngcontent-%COMP%], \n   .add-action-dialog[_ngcontent-%COMP%]   .actions-container[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .list-item[_ngcontent-%COMP%]   .col-description[_ngcontent-%COMP%] {\n    display: none;\n  }\n}"] }); }
 }
 (() => { (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      <kendo-textbox \n        [formControl]=\"searchControl\" \n        placeholder=\"Search actions by name, description, or category...\"\n        class=\"search-input\"\n        [clearButton]=\"true\">\n        <ng-template kendoTextBoxPrefixTemplate>\n          <i class=\"fa-solid fa-search\"></i>\n        </ng-template>\n      </kendo-textbox>\n    </div>\n    \n    <div class=\"header-actions\">\n      <!-- View Toggle -->\n      <button kendoButton \n              [toggleable]=\"true\" \n              [selected]=\"(viewMode$ | async) === 'grid'\"\n              (click)=\"toggleViewMode()\"\n              size=\"small\"\n              kendoTooltip\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        <div class=\"empty-state\">\n          <i class=\"fa-solid fa-search-minus\"></i>\n          <h3>No actions found</h3>\n          <p>Try adjusting your search criteria or selecting a different category</p>\n          <button kendoButton (click)=\"clearSearch()\">Clear Search</button>\n        </div>\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 kendoButton \n            look=\"flat\" \n            (click)=\"cancel()\">\n      Cancel\n    </button>\n    \n    <button kendoButton \n            themeColor=\"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/* Empty State */\n.add-action-dialog .actions-container .empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 300px;\n  color: var(--mj-text-muted);\n  text-align: center;\n}\n\n.add-action-dialog .actions-container .empty-state i {\n  font-size: 3rem;\n  margin-bottom: 1rem;\n  color: var(--mj-border-default);\n}\n\n.add-action-dialog .actions-container .empty-state h3 {\n  margin: 0 0 0.5rem 0;\n  color: var(--mj-text-secondary);\n}\n\n.add-action-dialog .actions-container .empty-state p {\n  margin: 0 0 1.5rem 0;\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[kendoButton] {\n  min-width: 120px;\n}\n\n.add-action-dialog .dialog-footer button[kendoButton][look=\"primary\"] i {\n  margin-right: 0.5rem;\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: i1.WindowRef }, { type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AddActionDialogComponent, { className: "AddActionDialogComponent", filePath: "src/lib/custom/AIAgents/add-action-dialog.component.ts", lineNumber: 33 }); })();
+        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        <div class=\"empty-state\">\n          <i class=\"fa-solid fa-search-minus\"></i>\n          <h3>No actions found</h3>\n          <p>Try adjusting your search criteria or selecting a different category</p>\n          <button mjButton (click)=\"clearSearch()\">Clear Search</button>\n        </div>\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/* Empty State */\n.add-action-dialog .actions-container .empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 300px;\n  color: var(--mj-text-muted);\n  text-align: center;\n}\n\n.add-action-dialog .actions-container .empty-state i {\n  font-size: 3rem;\n  margin-bottom: 1rem;\n  color: var(--mj-border-default);\n}\n\n.add-action-dialog .actions-container .empty-state h3 {\n  margin: 0 0 0.5rem 0;\n  color: var(--mj-text-secondary);\n}\n\n.add-action-dialog .actions-container .empty-state p {\n  margin: 0 0 1.5rem 0;\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
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AddActionDialogComponent, { className: "AddActionDialogComponent", filePath: "src/lib/custom/AIAgents/add-action-dialog.component.ts", lineNumber: 32 }); })();
 //# sourceMappingURL=add-action-dialog.component.js.map