@memberjunction/ng-action-gallery 2.55.0

package/dist/lib/action-gallery.component.js

@@ -0,0 +1,817 @@
+import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Subject, BehaviorSubject, combineLatest, debounceTime, distinctUntilChanged, takeUntil } from 'rxjs';
+import { RunView } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+import * as i3 from "@progress/kendo-angular-buttons";
+import * as i4 from "@progress/kendo-angular-inputs";
+import * as i5 from "@progress/kendo-angular-indicators";
+import * as i6 from "@progress/kendo-angular-tooltip";
+const _c0 = ["searchInput"];
+function ActionGalleryComponent_div_1_ng_template_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 22);
+} }
+function ActionGalleryComponent_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 10)(1, "div", 11)(2, "div", 12)(3, "kendo-textbox", 13, 0);
+    i0.ɵɵtemplate(5, ActionGalleryComponent_div_1_ng_template_5_Template, 1, 0, "ng-template", 14);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 15)(7, "div", 16)(8, "button", 17);
+    i0.ɵɵpipe(9, "async");
+    i0.ɵɵpipe(10, "async");
+    i0.ɵɵlistener("click", function ActionGalleryComponent_div_1_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleViewMode()); });
+    i0.ɵɵelement(11, "i", 18);
+    i0.ɵɵpipe(12, "async");
+    i0.ɵɵpipe(13, "async");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(14, "div", 19)(15, "span", 20);
+    i0.ɵɵelement(16, "i", 21);
+    i0.ɵɵtext(17);
+    i0.ɵɵpipe(18, "async");
+    i0.ɵɵelementEnd()()()()();
+} if (rf & 2) {
+    let tmp_9_0;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("formControl", ctx_r1.searchControl)("clearButton", true);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("toggleable", true)("selected", i0.ɵɵpipeBind1(9, 11, ctx_r1.viewMode$) === "grid")("title", i0.ɵɵpipeBind1(10, 13, ctx_r1.viewMode$) === "grid" ? "Switch to list view" : "Switch to grid view");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("fa-th", i0.ɵɵpipeBind1(12, 15, ctx_r1.viewMode$) === "grid")("fa-list", i0.ɵɵpipeBind1(13, 17, ctx_r1.viewMode$) === "list");
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate2(" ", (tmp_9_0 = i0.ɵɵpipeBind1(18, 19, ctx_r1.filteredActions$)) == null ? null : tmp_9_0.length, " of ", ctx_r1.totalActions, " actions ");
+} }
+function ActionGalleryComponent_div_3_ng_container_2_i_9_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "i", 32);
+    i0.ɵɵlistener("click", function ActionGalleryComponent_div_3_ng_container_2_i_9_Template_i_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const category_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.toggleCategoryExpanded(category_r4.id); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const category_r4 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("expanded", ctx_r1.expandedCategories.has(category_r4.id));
+} }
+function ActionGalleryComponent_div_3_ng_container_2_div_10_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 35);
+    i0.ɵɵpipe(1, "async");
+    i0.ɵɵlistener("click", function ActionGalleryComponent_div_3_ng_container_2_div_10_div_1_Template_div_click_0_listener($event) { const subCategory_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); ctx_r1.selectCategory(subCategory_r7.id); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 27);
+    i0.ɵɵelement(3, "i");
+    i0.ɵɵelementStart(4, "span", 28);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 29);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const subCategory_r7 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("selected", i0.ɵɵpipeBind1(1, 7, ctx_r1.selectedCategory$) === subCategory_r7.id);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassMapInterpolate1("fa-solid ", subCategory_r7.icon, " category-icon");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(subCategory_r7.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(subCategory_r7.count);
+} }
+function ActionGalleryComponent_div_3_ng_container_2_div_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 33);
+    i0.ɵɵtemplate(1, ActionGalleryComponent_div_3_ng_container_2_div_10_div_1_Template, 8, 9, "div", 34);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const category_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", category_r4.children);
+} }
+function ActionGalleryComponent_div_3_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 26);
+    i0.ɵɵpipe(2, "async");
+    i0.ɵɵlistener("click", function ActionGalleryComponent_div_3_ng_container_2_Template_div_click_1_listener() { const category_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.selectCategory(category_r4.id)); });
+    i0.ɵɵelementStart(3, "div", 27);
+    i0.ɵɵelement(4, "i");
+    i0.ɵɵelementStart(5, "span", 28);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 29);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(9, ActionGalleryComponent_div_3_ng_container_2_i_9_Template, 1, 2, "i", 30);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(10, ActionGalleryComponent_div_3_ng_container_2_div_10_Template, 2, 1, "div", 31);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const category_r4 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("selected", i0.ɵɵpipeBind1(2, 11, ctx_r1.selectedCategory$) === category_r4.id)("has-children", category_r4.children && category_r4.children.length > 0);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassMapInterpolate1("fa-solid ", category_r4.icon, " category-icon");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(category_r4.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(category_r4.count);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", category_r4.children && category_r4.children.length > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", category_r4.children && ctx_r1.expandedCategories.has(category_r4.id));
+} }
+function ActionGalleryComponent_div_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23)(1, "div", 24);
+    i0.ɵɵtemplate(2, ActionGalleryComponent_div_3_ng_container_2_Template, 11, 13, "ng-container", 25);
+    i0.ɵɵpipe(3, "async");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(3, 1, ctx_r1.categoryTree$));
+} }
+function ActionGalleryComponent_div_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 36);
+    i0.ɵɵelement(1, "kendo-loader", 37);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "Loading actions...");
+    i0.ɵɵelementEnd()();
+} }
+function ActionGalleryComponent_div_7_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 38);
+    i0.ɵɵelement(1, "i", 39);
+    i0.ɵɵelementStart(2, "h3");
+    i0.ɵɵtext(3, "No actions found");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5, "Try adjusting your search criteria or selecting a different category");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 40);
+    i0.ɵɵlistener("click", function ActionGalleryComponent_div_7_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.clearSearch()); });
+    i0.ɵɵtext(7, "Clear Search");
+    i0.ɵɵelementEnd()();
+} }
+function ActionGalleryComponent_div_10_div_1_span_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 59);
+    i0.ɵɵelement(1, "i", 60);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const action_r10 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", action_r10.Category, " ");
+} }
+function ActionGalleryComponent_div_10_div_1_button_10_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 61);
+    i0.ɵɵlistener("click", function ActionGalleryComponent_div_10_div_1_button_10_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r11); const action_r10 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.testAction(action_r10, $event)); });
+    i0.ɵɵelementEnd();
+} }
+function ActionGalleryComponent_div_10_div_1_span_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 62);
+    i0.ɵɵelement(1, "i", 63);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const action_r10 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", (action_r10.parameters == null ? null : action_r10.parameters.length) || 0, " params ");
+} }
+function ActionGalleryComponent_div_10_div_1_span_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 62);
+    i0.ɵɵelement(1, "i", 64);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const action_r10 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", (action_r10.resultCodes == null ? null : action_r10.resultCodes.length) || 0, " results ");
+} }
+function ActionGalleryComponent_div_10_div_1_span_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 62);
+    i0.ɵɵelement(1, "i", 65);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const action_r10 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", action_r10.Type, " ");
+} }
+function ActionGalleryComponent_div_10_div_1_div_19_div_1_div_5_span_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 75);
+    i0.ɵɵtext(1, "Required");
+    i0.ɵɵelementEnd();
+} }
+function ActionGalleryComponent_div_10_div_1_div_19_div_1_div_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 71)(1, "span", 72);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 73);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(5, ActionGalleryComponent_div_10_div_1_div_19_div_1_div_5_span_5_Template, 2, 0, "span", 74);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const param_r12 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(param_r12.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(param_r12.Type);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", param_r12.IsRequired);
+} }
+function ActionGalleryComponent_div_10_div_1_div_19_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 68)(1, "h4");
+    i0.ɵɵelement(2, "i", 63);
+    i0.ɵɵtext(3, " Parameters ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 69);
+    i0.ɵɵtemplate(5, ActionGalleryComponent_div_10_div_1_div_19_div_1_div_5_Template, 6, 3, "div", 70);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const action_r10 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("ngForOf", action_r10.parameters);
+} }
+function ActionGalleryComponent_div_10_div_1_div_19_div_2_div_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 78)(1, "span", 79);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 80);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const code_r13 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(code_r13.ResultCode);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(code_r13.Description);
+} }
+function ActionGalleryComponent_div_10_div_1_div_19_div_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 68)(1, "h4");
+    i0.ɵɵelement(2, "i", 64);
+    i0.ɵɵtext(3, " Result Codes ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 76);
+    i0.ɵɵtemplate(5, ActionGalleryComponent_div_10_div_1_div_19_div_2_div_5_Template, 5, 2, "div", 77);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const action_r10 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("ngForOf", action_r10.resultCodes);
+} }
+function ActionGalleryComponent_div_10_div_1_div_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 66);
+    i0.ɵɵtemplate(1, ActionGalleryComponent_div_10_div_1_div_19_div_1_Template, 6, 1, "div", 67)(2, ActionGalleryComponent_div_10_div_1_div_19_div_2_Template, 6, 1, "div", 67);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const action_r10 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", action_r10.parameters && action_r10.parameters.length > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", action_r10.resultCodes && action_r10.resultCodes.length > 0);
+} }
+function ActionGalleryComponent_div_10_div_1_div_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 81);
+    i0.ɵɵelement(1, "i", 18);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const action_r10 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-check-circle", action_r10.selected)("fa-circle", !action_r10.selected);
+} }
+function ActionGalleryComponent_div_10_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 43);
+    i0.ɵɵlistener("mouseenter", function ActionGalleryComponent_div_10_div_1_Template_div_mouseenter_0_listener() { const action_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.hoveredAction = action_r10.ID); })("mouseleave", function ActionGalleryComponent_div_10_div_1_Template_div_mouseleave_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.hoveredAction = null); })("click", function ActionGalleryComponent_div_10_div_1_Template_div_click_0_listener() { const action_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleActionSelection(action_r10)); });
+    i0.ɵɵelementStart(1, "div", 44);
+    i0.ɵɵlistener("click", function ActionGalleryComponent_div_10_div_1_Template_div_click_1_listener($event) { const action_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.toggleActionExpanded(action_r10); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 45);
+    i0.ɵɵelement(3, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 46)(5, "h3", 47);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 48);
+    i0.ɵɵtemplate(8, ActionGalleryComponent_div_10_div_1_span_8_Template, 3, 1, "span", 49);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 50);
+    i0.ɵɵtemplate(10, ActionGalleryComponent_div_10_div_1_button_10_Template, 1, 0, "button", 51);
+    i0.ɵɵelement(11, "i", 52);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "div", 53)(13, "p", 54);
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "div", 55);
+    i0.ɵɵtemplate(16, ActionGalleryComponent_div_10_div_1_span_16_Template, 3, 1, "span", 56)(17, ActionGalleryComponent_div_10_div_1_span_17_Template, 3, 1, "span", 56)(18, ActionGalleryComponent_div_10_div_1_span_18_Template, 3, 1, "span", 56);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(19, ActionGalleryComponent_div_10_div_1_div_19_Template, 3, 2, "div", 57)(20, ActionGalleryComponent_div_10_div_1_div_20_Template, 2, 4, "div", 58);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const action_r10 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("expanded", action_r10.expanded)("selected", action_r10.selected)("animate", ctx_r1.animateCards)("hover", ctx_r1.hoveredAction === action_r10.ID);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassMapInterpolate1("fa-solid ", ctx_r1.getActionIcon(action_r10), "");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(action_r10.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", action_r10.Category);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.config.enableQuickTest);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-chevron-down", !action_r10.expanded)("fa-chevron-up", action_r10.expanded);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(action_r10.Description || "No description available");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", action_r10.parameters == null ? null : action_r10.parameters.length);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", action_r10.resultCodes == null ? null : action_r10.resultCodes.length);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", action_r10.Type);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", action_r10.expanded);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.config.selectionMode);
+} }
+function ActionGalleryComponent_div_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41);
+    i0.ɵɵtemplate(1, ActionGalleryComponent_div_10_div_1_Template, 21, 24, "div", 42);
+    i0.ɵɵpipe(2, "async");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("grid-template-columns", "repeat(" + (ctx_r1.config.gridColumns || 3) + ", 1fr)");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(2, 3, ctx_r1.filteredActions$));
+} }
+function ActionGalleryComponent_div_15_div_12_button_11_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 61);
+    i0.ɵɵlistener("click", function ActionGalleryComponent_div_15_div_12_button_11_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r16); const action_r15 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.testAction(action_r15, $event)); });
+    i0.ɵɵelementEnd();
+} }
+function ActionGalleryComponent_div_15_div_12_div_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 81);
+    i0.ɵɵelement(1, "i", 18);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const action_r15 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-check-circle", action_r15.selected)("fa-circle", !action_r15.selected);
+} }
+function ActionGalleryComponent_div_15_div_12_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 90);
+    i0.ɵɵlistener("click", function ActionGalleryComponent_div_15_div_12_Template_div_click_0_listener() { const action_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleActionSelection(action_r15)); });
+    i0.ɵɵelementStart(1, "span", 84);
+    i0.ɵɵelement(2, "i");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 85);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 86);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "span", 87);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "span", 88);
+    i0.ɵɵtemplate(11, ActionGalleryComponent_div_15_div_12_button_11_Template, 1, 0, "button", 51);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(12, ActionGalleryComponent_div_15_div_12_div_12_Template, 2, 4, "div", 58);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const action_r15 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("selected", action_r15.selected);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMapInterpolate1("fa-solid ", ctx_r1.getActionIcon(action_r15), " action-icon");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", action_r15.Name, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(action_r15.Category || "-");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(action_r15.Type || "-");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate((action_r15.parameters == null ? null : action_r15.parameters.length) || 0);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.config.enableQuickTest);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.config.selectionMode);
+} }
+function ActionGalleryComponent_div_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 82)(1, "div", 83)(2, "span", 84);
+    i0.ɵɵtext(3, "Name");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 85);
+    i0.ɵɵtext(5, "Category");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 86);
+    i0.ɵɵtext(7, "Type");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "span", 87);
+    i0.ɵɵtext(9, "Parameters");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "span", 88);
+    i0.ɵɵtext(11, "Actions");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(12, ActionGalleryComponent_div_15_div_12_Template, 13, 11, "div", 89);
+    i0.ɵɵpipe(13, "async");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(12);
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(13, 1, ctx_r1.filteredActions$));
+} }
+export class ActionGalleryComponent {
+    constructor() {
+        this.config = {
+            selectionMode: false,
+            multiSelect: false,
+            showCategories: true,
+            showSearch: true,
+            defaultView: 'grid',
+            gridColumns: 3,
+            enableQuickTest: true,
+            theme: 'light'
+        };
+        this.preSelectedActions = [];
+        this.actionSelected = new EventEmitter();
+        this.actionsSelected = new EventEmitter();
+        this.actionTestRequested = new EventEmitter();
+        // State management
+        this.destroy$ = new Subject();
+        this.actions$ = new BehaviorSubject([]);
+        this.categories$ = new BehaviorSubject([]);
+        this.filteredActions$ = new BehaviorSubject([]);
+        this.categoryTree$ = new BehaviorSubject([]);
+        this.selectedCategory$ = new BehaviorSubject('all');
+        this.viewMode$ = new BehaviorSubject('grid');
+        this.isLoading$ = new BehaviorSubject(false);
+        this.selectedActions$ = new BehaviorSubject(new Set());
+        // Form controls
+        this.searchControl = new FormControl('');
+        // UI state
+        this.expandedCategories = new Set();
+        this.hoveredAction = null;
+        this.animateCards = false;
+        // Statistics
+        this.totalActions = 0;
+        this.categoryCounts = new Map();
+    }
+    ngOnInit() {
+        // Set initial view mode
+        this.viewMode$.next(this.config.defaultView || 'grid');
+        // Load data
+        this.loadData();
+        // Set up filtering
+        combineLatest([
+            this.actions$,
+            this.searchControl.valueChanges.pipe(debounceTime(300), distinctUntilChanged()),
+            this.selectedCategory$
+        ]).pipe(takeUntil(this.destroy$)).subscribe(([actions, searchTerm, category]) => {
+            this.filterActions(actions, searchTerm || '', category);
+        });
+        // Initialize with pre-selected actions
+        if (this.preSelectedActions.length > 0) {
+            this.selectedActions$.next(new Set(this.preSelectedActions));
+        }
+        // Enable animations after initial load
+        setTimeout(() => {
+            this.animateCards = true;
+        }, 100);
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    async loadData() {
+        this.isLoading$.next(true);
+        try {
+            const rv = new RunView();
+            // Load actions and categories in parallel
+            const [actionsResult, categoriesResult] = await rv.RunViews([
+                {
+                    EntityName: 'Actions',
+                    ResultType: 'entity_object',
+                    OrderBy: 'Category, Name',
+                    MaxRows: 5000
+                },
+                {
+                    EntityName: 'Action Categories',
+                    ResultType: 'entity_object',
+                    OrderBy: 'Name',
+                    MaxRows: 1000
+                }
+            ]);
+            if (actionsResult.Success && categoriesResult.Success) {
+                const actions = actionsResult.Results || [];
+                const categories = categoriesResult.Results || [];
+                // Process actions
+                const actionsWithDetails = actions.map(action => ({
+                    ...action,
+                    expanded: false,
+                    selected: this.preSelectedActions.includes(action.ID)
+                }));
+                this.actions$.next(actionsWithDetails);
+                this.totalActions = actions.length;
+                // Process categories
+                this.categories$.next(categories);
+                this.buildCategoryTree(categories, actions);
+                // Initial filter
+                this.filterActions(actionsWithDetails, '', 'all');
+            }
+        }
+        catch (error) {
+            console.error('Error loading gallery data:', error);
+        }
+        finally {
+            this.isLoading$.next(false);
+        }
+    }
+    buildCategoryTree(categories, actions) {
+        // Count actions per category
+        this.categoryCounts.clear();
+        actions.forEach(action => {
+            const count = this.categoryCounts.get(action.Category || 'Uncategorized') || 0;
+            this.categoryCounts.set(action.Category || 'Uncategorized', count + 1);
+        });
+        // Build tree structure
+        const nodeMap = new Map();
+        const rootNodes = [];
+        // Create nodes
+        categories.forEach(cat => {
+            const node = {
+                id: cat.ID,
+                name: cat.Name,
+                parent: cat.ParentID || undefined,
+                children: [],
+                count: this.categoryCounts.get(cat.Name) || 0,
+                icon: this.getCategoryIcon(cat.Name)
+            };
+            nodeMap.set(cat.ID, node);
+        });
+        // Build hierarchy
+        nodeMap.forEach(node => {
+            if (node.parent && nodeMap.has(node.parent)) {
+                const parent = nodeMap.get(node.parent);
+                parent.children.push(node);
+                // Accumulate counts up the tree
+                parent.count = (parent.count || 0) + (node.count || 0);
+            }
+            else {
+                rootNodes.push(node);
+            }
+        });
+        // Add "All" category at the top
+        const allNode = {
+            id: 'all',
+            name: 'All Actions',
+            count: this.totalActions,
+            icon: 'fa-th'
+        };
+        // Add "Uncategorized" if needed
+        const uncategorizedCount = this.categoryCounts.get('Uncategorized') || 0;
+        if (uncategorizedCount > 0) {
+            const uncategorizedNode = {
+                id: 'uncategorized',
+                name: 'Uncategorized',
+                count: uncategorizedCount,
+                icon: 'fa-question-circle'
+            };
+            rootNodes.push(uncategorizedNode);
+        }
+        this.categoryTree$.next([allNode, ...rootNodes]);
+    }
+    getCategoryIcon(categoryName) {
+        const iconMap = {
+            'Data': 'fa-database',
+            'Communication': 'fa-envelope',
+            'Integration': 'fa-plug',
+            'Security': 'fa-shield',
+            'Workflow': 'fa-project-diagram',
+            'AI': 'fa-brain',
+            'Files': 'fa-file',
+            'Utilities': 'fa-tools',
+            'System': 'fa-cog',
+            'Analytics': 'fa-chart-line'
+        };
+        return iconMap[categoryName] || 'fa-folder';
+    }
+    filterActions(actions, searchTerm, category) {
+        let filtered = [...actions];
+        // Category filter
+        if (category && category !== 'all') {
+            if (category === 'uncategorized') {
+                filtered = filtered.filter(a => !a.Category);
+            }
+            else {
+                const categoryName = this.getCategoryName(category);
+                filtered = filtered.filter(a => a.Category === categoryName);
+            }
+        }
+        // Search filter
+        if (searchTerm) {
+            const term = searchTerm.toLowerCase();
+            filtered = filtered.filter(action => action.Name.toLowerCase().includes(term) ||
+                action.Description?.toLowerCase().includes(term) ||
+                action.Category?.toLowerCase().includes(term));
+        }
+        this.filteredActions$.next(filtered);
+    }
+    getCategoryName(categoryId) {
+        const category = this.categories$.value.find(c => c.ID === categoryId);
+        return category?.Name || '';
+    }
+    selectCategory(categoryId) {
+        this.selectedCategory$.next(categoryId);
+    }
+    toggleCategoryExpanded(categoryId) {
+        if (this.expandedCategories.has(categoryId)) {
+            this.expandedCategories.delete(categoryId);
+        }
+        else {
+            this.expandedCategories.add(categoryId);
+        }
+    }
+    toggleViewMode() {
+        const currentMode = this.viewMode$.value;
+        this.viewMode$.next(currentMode === 'grid' ? 'list' : 'grid');
+    }
+    async toggleActionExpanded(action) {
+        action.expanded = !action.expanded;
+        // Load details if expanding and not already loaded
+        if (action.expanded && !action.parameters) {
+            await this.loadActionDetails(action);
+        }
+    }
+    async loadActionDetails(action) {
+        const rv = new RunView();
+        try {
+            const [paramsResult, resultCodesResult] = await rv.RunViews([
+                {
+                    EntityName: 'Action Params',
+                    ExtraFilter: `ActionID='${action.ID}'`,
+                    OrderBy: 'Sequence',
+                    ResultType: 'entity_object',
+                    MaxRows: 100
+                },
+                {
+                    EntityName: 'Action Result Codes',
+                    ExtraFilter: `ActionID='${action.ID}'`,
+                    OrderBy: 'ResultCode',
+                    ResultType: 'entity_object',
+                    MaxRows: 100
+                }
+            ]);
+            if (paramsResult.Success) {
+                action.parameters = paramsResult.Results || [];
+            }
+            if (resultCodesResult.Success) {
+                action.resultCodes = resultCodesResult.Results || [];
+            }
+        }
+        catch (error) {
+            console.error('Error loading action details:', error);
+        }
+    }
+    toggleActionSelection(action) {
+        if (!this.config.selectionMode)
+            return;
+        const selected = this.selectedActions$.value;
+        if (!this.config.multiSelect) {
+            // Single select mode
+            selected.clear();
+            if (!action.selected) {
+                selected.add(action.ID);
+                action.selected = true;
+                this.actionSelected.emit(action);
+            }
+        }
+        else {
+            // Multi-select mode
+            if (action.selected) {
+                selected.delete(action.ID);
+                action.selected = false;
+            }
+            else {
+                selected.add(action.ID);
+                action.selected = true;
+            }
+        }
+        this.selectedActions$.next(new Set(selected));
+        if (this.config.multiSelect) {
+            const selectedActions = this.actions$.value.filter(a => selected.has(a.ID));
+            this.actionsSelected.emit(selectedActions);
+        }
+    }
+    testAction(action, event) {
+        event.stopPropagation();
+        if (this.config.enableQuickTest) {
+            // TODO: Implement test harness integration
+            console.log('Test action:', action.Name);
+        }
+        this.actionTestRequested.emit(action);
+    }
+    clearSearch() {
+        this.searchControl.reset();
+        if (this.searchInput) {
+            this.searchInput.nativeElement.focus();
+        }
+    }
+    getSelectedActions() {
+        const selected = this.selectedActions$.value;
+        return this.actions$.value.filter(a => selected.has(a.ID));
+    }
+    getActionIcon(action) {
+        const typeIcons = {
+            'Create': 'fa-plus-circle',
+            'Update': 'fa-edit',
+            'Delete': 'fa-trash',
+            'Query': 'fa-search',
+            'Process': 'fa-cogs',
+            'Email': 'fa-envelope',
+            'Report': 'fa-file-alt',
+            'Export': 'fa-file-export',
+            'Import': 'fa-file-import',
+            'API': 'fa-plug',
+            'Script': 'fa-code'
+        };
+        for (const [key, icon] of Object.entries(typeIcons)) {
+            if (action.Name.toLowerCase().includes(key.toLowerCase()) ||
+                action.Type?.toLowerCase().includes(key.toLowerCase())) {
+                return icon;
+            }
+        }
+        return 'fa-bolt';
+    }
+    static { this.ɵfac = function ActionGalleryComponent_Factory(t) { return new (t || ActionGalleryComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActionGalleryComponent, selectors: [["mj-action-gallery"]], viewQuery: function ActionGalleryComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchInput = _t.first);
+        } }, inputs: { config: "config", preSelectedActions: "preSelectedActions" }, outputs: { actionSelected: "actionSelected", actionsSelected: "actionsSelected", actionTestRequested: "actionTestRequested" }, decls: 20, vars: 34, consts: [["searchInput", ""], [1, "action-gallery"], ["class", "gallery-header", 4, "ngIf"], [1, "gallery-content"], ["class", "category-sidebar", 4, "ngIf"], [1, "actions-container"], ["class", "loading-state", 4, "ngIf"], ["class", "empty-state", 4, "ngIf"], ["class", "actions-grid", 3, "grid-template-columns", 4, "ngIf"], ["class", "actions-list", 4, "ngIf"], [1, "gallery-header"], [1, "header-content"], [1, "search-section"], ["placeholder", "Search actions by name, description, or category...", 1, "search-input", 3, "formControl", "clearButton"], ["kendoTextBoxPrefixTemplate", ""], [1, "header-actions"], [1, "view-toggle"], ["kendoButton", "", "size", "small", "kendoTooltip", "", 3, "click", "toggleable", "selected", "title"], [1, "fa-solid"], [1, "stats"], [1, "stat-item"], [1, "fa-solid", "fa-bolt"], [1, "fa-solid", "fa-search"], [1, "category-sidebar"], [1, "category-tree"], [4, "ngFor", "ngForOf"], [1, "category-item", 3, "click"], [1, "category-header"], [1, "category-name"], [1, "category-count"], ["class", "fa-solid fa-chevron-right expand-icon", 3, "expanded", "click", 4, "ngIf"], ["class", "sub-categories", 4, "ngIf"], [1, "fa-solid", "fa-chevron-right", "expand-icon", 3, "click"], [1, "sub-categories"], ["class", "category-item sub-category", 3, "selected", "click", 4, "ngFor", "ngForOf"], [1, "category-item", "sub-category", 3, "click"], [1, "loading-state"], ["size", "large"], [1, "empty-state"], [1, "fa-solid", "fa-search-minus"], ["kendoButton", "", 3, "click"], [1, "actions-grid"], ["class", "action-card", 3, "expanded", "selected", "animate", "hover", "mouseenter", "mouseleave", "click", 4, "ngFor", "ngForOf"], [1, "action-card", 3, "mouseenter", "mouseleave", "click"], [1, "card-header", 3, "click"], [1, "action-icon"], [1, "action-info"], [1, "action-name"], [1, "action-meta"], ["class", "category-badge", 4, "ngIf"], [1, "card-actions"], ["kendoButton", "", "look", "flat", "size", "small", "icon", "play", "kendoTooltip", "", "title", "Test this action", 3, "click", 4, "ngIf"], [1, "fa-solid", "expand-indicator"], [1, "card-body"], [1, "action-description"], [1, "action-stats"], ["class", "stat", 4, "ngIf"], ["class", "card-details", 4, "ngIf"], ["class", "selection-indicator", 4, "ngIf"], [1, "category-badge"], [1, "fa-solid", "fa-folder"], ["kendoButton", "", "look", "flat", "size", "small", "icon", "play", "kendoTooltip", "", "title", "Test this action", 3, "click"], [1, "stat"], [1, "fa-solid", "fa-sliders"], [1, "fa-solid", "fa-code-branch"], [1, "fa-solid", "fa-tag"], [1, "card-details"], ["class", "detail-section", 4, "ngIf"], [1, "detail-section"], [1, "parameters-list"], ["class", "parameter-item", 4, "ngFor", "ngForOf"], [1, "parameter-item"], [1, "param-name"], [1, "param-type"], ["class", "param-required", 4, "ngIf"], [1, "param-required"], [1, "result-codes-list"], ["class", "result-code-item", 4, "ngFor", "ngForOf"], [1, "result-code-item"], [1, "code-value"], [1, "code-desc"], [1, "selection-indicator"], [1, "actions-list"], [1, "list-header"], [1, "col-name"], [1, "col-category"], [1, "col-type"], [1, "col-params"], [1, "col-actions"], ["class", "list-item", 3, "selected", "click", 4, "ngFor", "ngForOf"], [1, "list-item", 3, "click"]], template: function ActionGalleryComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 1);
+            i0.ɵɵtemplate(1, ActionGalleryComponent_div_1_Template, 19, 21, "div", 2);
+            i0.ɵɵelementStart(2, "div", 3);
+            i0.ɵɵtemplate(3, ActionGalleryComponent_div_3_Template, 4, 3, "div", 4);
+            i0.ɵɵelementStart(4, "div", 5);
+            i0.ɵɵtemplate(5, ActionGalleryComponent_div_5_Template, 4, 0, "div", 6);
+            i0.ɵɵpipe(6, "async");
+            i0.ɵɵtemplate(7, ActionGalleryComponent_div_7_Template, 8, 0, "div", 7);
+            i0.ɵɵpipe(8, "async");
+            i0.ɵɵpipe(9, "async");
+            i0.ɵɵtemplate(10, ActionGalleryComponent_div_10_Template, 3, 5, "div", 8);
+            i0.ɵɵpipe(11, "async");
+            i0.ɵɵpipe(12, "async");
+            i0.ɵɵpipe(13, "async");
+            i0.ɵɵpipe(14, "async");
+            i0.ɵɵtemplate(15, ActionGalleryComponent_div_15_Template, 14, 3, "div", 9);
+            i0.ɵɵpipe(16, "async");
+            i0.ɵɵpipe(17, "async");
+            i0.ɵɵpipe(18, "async");
+            i0.ɵɵpipe(19, "async");
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            let tmp_6_0;
+            i0.ɵɵclassProp("dark-theme", ctx.config.theme === "dark")("selection-mode", ctx.config.selectionMode);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.config.showSearch);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("no-categories", !ctx.config.showCategories);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.config.showCategories);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(6, 12, ctx.isLoading$));
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", !i0.ɵɵpipeBind1(8, 14, ctx.isLoading$) && ((tmp_6_0 = i0.ɵɵpipeBind1(9, 16, ctx.filteredActions$)) == null ? null : tmp_6_0.length) === 0);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngIf", !i0.ɵɵpipeBind1(11, 18, ctx.isLoading$) && i0.ɵɵpipeBind1(12, 20, ctx.viewMode$) === "grid" && i0.ɵɵpipeBind1(13, 22, ctx.filteredActions$) && i0.ɵɵpipeBind1(14, 24, ctx.filteredActions$).length > 0);
+            i0.ɵɵadvance(5);
+            i0.ɵɵproperty("ngIf", !i0.ɵɵpipeBind1(16, 26, ctx.isLoading$) && i0.ɵɵpipeBind1(17, 28, ctx.viewMode$) === "list" && i0.ɵɵpipeBind1(18, 30, ctx.filteredActions$) && i0.ɵɵpipeBind1(19, 32, ctx.filteredActions$).length > 0);
+        } }, dependencies: [i1.NgForOf, i1.NgIf, i2.NgControlStatus, i2.FormControlDirective, i3.ButtonComponent, i4.TextBoxComponent, i4.TextBoxPrefixTemplateDirective, i5.LoaderComponent, i6.TooltipDirective, i1.AsyncPipe], styles: ["@import '@progress/kendo-theme-default/scss/all';\n\n//[_ngcontent-%COMP%]   Variables\n$primary-color[_ngcontent-%COMP%]:   #3b82f6[_ngcontent-%COMP%];\n$secondary-color[_ngcontent-%COMP%]:   #8b5cf6[_ngcontent-%COMP%];\n$success-color[_ngcontent-%COMP%]:   #10b981[_ngcontent-%COMP%];\n$warning-color[_ngcontent-%COMP%]:   #f59e0b[_ngcontent-%COMP%];\n$error-color[_ngcontent-%COMP%]:   #ef4444[_ngcontent-%COMP%];\n$dark-bg[_ngcontent-%COMP%]:   #1e293b[_ngcontent-%COMP%];\n$light-bg[_ngcontent-%COMP%]:   #f8fafc[_ngcontent-%COMP%];\n$card-shadow[_ngcontent-%COMP%]:   0[_ngcontent-%COMP%]   1px[_ngcontent-%COMP%]   3px[_ngcontent-%COMP%]   0[_ngcontent-%COMP%]   rgba(0[_ngcontent-%COMP%], 0[_ngcontent-%COMP%], 0[_ngcontent-%COMP%], 0.1)[_ngcontent-%COMP%], 0[_ngcontent-%COMP%]   1px[_ngcontent-%COMP%]   2px[_ngcontent-%COMP%]   0[_ngcontent-%COMP%]   rgba(0[_ngcontent-%COMP%], 0[_ngcontent-%COMP%], 0[_ngcontent-%COMP%], 0.06)[_ngcontent-%COMP%];\n$card-hover-shadow[_ngcontent-%COMP%]:   0[_ngcontent-%COMP%]   10px[_ngcontent-%COMP%]   15px[_ngcontent-%COMP%]   -3px[_ngcontent-%COMP%]   rgba(0[_ngcontent-%COMP%], 0[_ngcontent-%COMP%], 0[_ngcontent-%COMP%], 0.1)[_ngcontent-%COMP%], 0[_ngcontent-%COMP%]   4px[_ngcontent-%COMP%]   6px[_ngcontent-%COMP%]   -2px[_ngcontent-%COMP%]   rgba(0[_ngcontent-%COMP%], 0[_ngcontent-%COMP%], 0[_ngcontent-%COMP%], 0.05)[_ngcontent-%COMP%];\n$border-radius[_ngcontent-%COMP%]:   12px[_ngcontent-%COMP%];\n$transition-speed[_ngcontent-%COMP%]:   0.3s[_ngcontent-%COMP%];\n\n//[_ngcontent-%COMP%]   Animations\n@keyframes[_ngcontent-%COMP%]   fadeIn[_ngcontent-%COMP%] {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes _ngcontent-%COMP%_scaleIn {\n  from {\n    transform: scale(0.95);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n@keyframes _ngcontent-%COMP%_shimmer {\n  0% {\n    background-position: -1000px 0;\n  }\n  100% {\n    background-position: 1000px 0;\n  }\n}\n\n.action-gallery[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  \n  &.dark-theme {\n    background: $dark-bg;\n    color: #f1f5f9;\n    \n    .gallery-header {\n      background: #0f172a;\n      border-bottom-color: #334155;\n    }\n    \n    .category-sidebar {\n      background: #0f172a;\n      border-right-color: #334155;\n    }\n    \n    .action-card {\n      background: #1e293b;\n      border-color: #334155;\n      \n      &:hover {\n        background: #253449;\n      }\n    }\n    \n    .search-input .k-textbox {\n      background: #1e293b;\n      border-color: #334155;\n      color: #f1f5f9;\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Gallery[_ngcontent-%COMP%]   Header\n.gallery-header[_ngcontent-%COMP%] {\n  background: white;\n  border-bottom: 1px solid #e5e7eb;\n  padding: 1rem 1.5rem;\n  \n  .header-content {\n    display: flex;\n    align-items: center;\n    gap: 1.5rem;\n  }\n  \n  .search-section {\n    flex: 1;\n    \n    .search-input {\n      width: 100%;\n      \n      .k-textbox {\n        padding-left: 2.5rem;\n        border-radius: 8px;\n        height: 40px;\n        transition: all $transition-speed ease;\n        \n        &:focus {\n          border-color: $primary-color;\n          box-shadow: 0 0 0 3px rgba($primary-color, 0.1);\n        }\n      }\n      \n      .fa-search {\n        position: absolute;\n        left: 1rem;\n        color: #94a3b8;\n      }\n    }\n  }\n  \n  .header-actions {\n    display: flex;\n    align-items: center;\n    gap: 1.5rem;\n    \n    .view-toggle {\n      .k-button {\n        border-radius: 6px;\n      }\n    }\n    \n    .stats {\n      .stat-item {\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        color: #64748b;\n        font-size: 0.875rem;\n        \n        i {\n          color: $primary-color;\n        }\n      }\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Main[_ngcontent-%COMP%]   Content\n.gallery-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  overflow: hidden;\n  \n  &.no-categories {\n    .actions-container {\n      margin-left: 0;\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Category[_ngcontent-%COMP%]   Sidebar\n.category-sidebar[_ngcontent-%COMP%] {\n  width: 280px;\n  background: $light-bg;\n  border-right: 1px solid #e5e7eb;\n  overflow-y: auto;\n  padding: 1rem;\n  \n  .category-tree {\n    .category-item {\n      margin-bottom: 0.25rem;\n      cursor: pointer;\n      transition: all $transition-speed ease;\n      \n      &:hover {\n        .category-header {\n          background: rgba($primary-color, 0.05);\n        }\n      }\n      \n      &.selected {\n        .category-header {\n          background: rgba($primary-color, 0.1);\n          color: $primary-color;\n          font-weight: 500;\n        }\n      }\n      \n      .category-header {\n        display: flex;\n        align-items: center;\n        padding: 0.75rem 1rem;\n        border-radius: 8px;\n        transition: all $transition-speed ease;\n        \n        .category-icon {\n          width: 20px;\n          margin-right: 0.75rem;\n          color: #64748b;\n        }\n        \n        .category-name {\n          flex: 1;\n        }\n        \n        .category-count {\n          font-size: 0.875rem;\n          color: #94a3b8;\n          background: rgba(0, 0, 0, 0.05);\n          padding: 0.125rem 0.5rem;\n          border-radius: 12px;\n          margin-right: 0.5rem;\n        }\n        \n        .expand-icon {\n          color: #94a3b8;\n          transition: transform $transition-speed ease;\n          \n          &.expanded {\n            transform: rotate(90deg);\n          }\n        }\n      }\n      \n      &.sub-category {\n        .category-header {\n          padding-left: 2.5rem;\n          font-size: 0.875rem;\n        }\n      }\n    }\n    \n    .sub-categories {\n      animation: fadeIn $transition-speed ease;\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Actions[_ngcontent-%COMP%]   Container\n.actions-container[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 1.5rem;\n  overflow-y: auto;\n  background: white;\n}\n\n//[_ngcontent-%COMP%]   Loading[_ngcontent-%COMP%]   State\n.loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: #64748b;\n  \n  p {\n    margin-top: 1rem;\n    font-size: 1.125rem;\n  }\n}\n\n//[_ngcontent-%COMP%]   Empty[_ngcontent-%COMP%]   State\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  text-align: center;\n  color: #64748b;\n  \n  i {\n    font-size: 4rem;\n    color: #cbd5e1;\n    margin-bottom: 1rem;\n  }\n  \n  h3 {\n    font-size: 1.5rem;\n    font-weight: 600;\n    margin-bottom: 0.5rem;\n    color: #475569;\n  }\n  \n  p {\n    margin-bottom: 1.5rem;\n  }\n  \n  .k-button {\n    border-radius: 8px;\n  }\n}\n\n//[_ngcontent-%COMP%]   Grid[_ngcontent-%COMP%]   View\n.actions-grid[_ngcontent-%COMP%] {\n  display: grid;\n  gap: 1.5rem;\n  grid-auto-rows: min-content;\n  \n  .action-card {\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: $border-radius;\n    overflow: hidden;\n    transition: all $transition-speed ease;\n    cursor: pointer;\n    position: relative;\n    \n    &.animate {\n      animation: _ngcontent-%COMP%_scaleIn 0.4s ease-out;\n      animation-fill-mode: both;\n      \n      @for $i from 1 through 20 {\n        &:nth-child(#{$i}) {\n          animation-delay: #{$i * 0.05}s;\n        }\n      }\n    }\n    \n    &:hover {\n      transform: translateY(-4px);\n      box-shadow: $card-hover-shadow;\n      border-color: $primary-color;\n    }\n    \n    &.selected {\n      border-color: $primary-color;\n      box-shadow: 0 0 0 3px rgba($primary-color, 0.1);\n      \n      .selection-indicator {\n        color: $primary-color;\n      }\n    }\n    \n    .card-header {\n      padding: 1.25rem;\n      display: flex;\n      align-items: flex-start;\n      gap: 1rem;\n      cursor: pointer;\n      \n      .action-icon {\n        width: 48px;\n        height: 48px;\n        border-radius: 10px;\n        background: linear-gradient(135deg, $primary-color, $secondary-color);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: white;\n        font-size: 1.5rem;\n        flex-shrink: 0;\n      }\n      \n      .action-info {\n        flex: 1;\n        min-width: 0;\n        \n        .action-name {\n          font-size: 1.125rem;\n          font-weight: 600;\n          margin: 0 0 0.5rem 0;\n          line-height: 1.2;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          display: -webkit-box;\n          -webkit-line-clamp: 2;\n          -webkit-box-orient: vertical;\n        }\n        \n        .action-meta {\n          display: flex;\n          gap: 0.5rem;\n          flex-wrap: wrap;\n          \n          .category-badge {\n            display: inline-flex;\n            align-items: center;\n            gap: 0.25rem;\n            font-size: 0.75rem;\n            padding: 0.25rem 0.75rem;\n            background: rgba($primary-color, 0.1);\n            color: $primary-color;\n            border-radius: 16px;\n            font-weight: 500;\n            \n            i {\n              font-size: 0.625rem;\n            }\n          }\n        }\n      }\n      \n      .card-actions {\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        \n        .k-button {\n          opacity: 0;\n          transition: opacity $transition-speed ease;\n        }\n        \n        .expand-indicator {\n          color: #94a3b8;\n          transition: transform $transition-speed ease;\n        }\n      }\n    }\n    \n    &:hover .card-header .card-actions .k-button {\n      opacity: 1;\n    }\n    \n    .card-body {\n      padding: 0 1.25rem 1.25rem;\n      \n      .action-description {\n        font-size: 0.875rem;\n        color: #64748b;\n        line-height: 1.5;\n        margin-bottom: 1rem;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 3;\n        -webkit-box-orient: vertical;\n      }\n      \n      .action-stats {\n        display: flex;\n        gap: 1rem;\n        flex-wrap: wrap;\n        \n        .stat {\n          display: flex;\n          align-items: center;\n          gap: 0.375rem;\n          font-size: 0.75rem;\n          color: #94a3b8;\n          \n          i {\n            font-size: 0.75rem;\n          }\n        }\n      }\n    }\n    \n    .card-details {\n      border-top: 1px solid #e5e7eb;\n      padding: 1.25rem;\n      animation: fadeIn $transition-speed ease;\n      \n      .detail-section {\n        margin-bottom: 1.25rem;\n        \n        &:last-child {\n          margin-bottom: 0;\n        }\n        \n        h4 {\n          display: flex;\n          align-items: center;\n          gap: 0.5rem;\n          font-size: 0.875rem;\n          font-weight: 600;\n          margin-bottom: 0.75rem;\n          color: #475569;\n          \n          i {\n            color: $primary-color;\n          }\n        }\n        \n        .parameters-list {\n          .parameter-item {\n            display: flex;\n            align-items: center;\n            gap: 0.5rem;\n            padding: 0.375rem 0;\n            font-size: 0.8125rem;\n            \n            .param-name {\n              font-weight: 500;\n              color: #64748b;\n            }\n            \n            .param-type {\n              font-size: 0.75rem;\n              color: #94a3b8;\n              background: rgba(0, 0, 0, 0.05);\n              padding: 0.125rem 0.5rem;\n              border-radius: 4px;\n            }\n            \n            .param-required {\n              font-size: 0.625rem;\n              color: $warning-color;\n              text-transform: uppercase;\n              font-weight: 600;\n            }\n          }\n        }\n        \n        .result-codes-list {\n          .result-code-item {\n            display: flex;\n            align-items: baseline;\n            gap: 0.5rem;\n            padding: 0.375rem 0;\n            font-size: 0.8125rem;\n            \n            .code-value {\n              font-weight: 600;\n              color: $primary-color;\n              font-family: monospace;\n              min-width: 60px;\n            }\n            \n            .code-desc {\n              color: #64748b;\n              font-size: 0.75rem;\n            }\n          }\n        }\n      }\n    }\n    \n    .selection-indicator {\n      position: absolute;\n      top: 1rem;\n      right: 1rem;\n      font-size: 1.25rem;\n      color: #cbd5e1;\n      transition: all $transition-speed ease;\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   List[_ngcontent-%COMP%]   View\n.actions-list[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #e5e7eb;\n  border-radius: $border-radius;\n  overflow: hidden;\n  \n  .list-header {\n    display: grid;\n    grid-template-columns: 1fr 200px 120px 100px 100px;\n    padding: 1rem 1.5rem;\n    background: $light-bg;\n    font-weight: 600;\n    font-size: 0.875rem;\n    color: #64748b;\n    border-bottom: 1px solid #e5e7eb;\n  }\n  \n  .list-item {\n    display: grid;\n    grid-template-columns: 1fr 200px 120px 100px 100px;\n    padding: 1rem 1.5rem;\n    border-bottom: 1px solid #f1f5f9;\n    align-items: center;\n    cursor: pointer;\n    transition: all $transition-speed ease;\n    position: relative;\n    \n    &:hover {\n      background: $light-bg;\n    }\n    \n    &.selected {\n      background: rgba($primary-color, 0.05);\n      \n      .selection-indicator {\n        color: $primary-color;\n      }\n    }\n    \n    .col-name {\n      display: flex;\n      align-items: center;\n      gap: 0.75rem;\n      font-weight: 500;\n      \n      .action-icon {\n        color: $primary-color;\n      }\n    }\n    \n    .col-category,\n    .col-type,\n    .col-params {\n      color: #64748b;\n      font-size: 0.875rem;\n    }\n    \n    .col-actions {\n      display: flex;\n      justify-content: flex-end;\n    }\n    \n    .selection-indicator {\n      position: absolute;\n      left: 0.5rem;\n      font-size: 1rem;\n      color: #cbd5e1;\n      transition: all $transition-speed ease;\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Selection[_ngcontent-%COMP%]   Mode[_ngcontent-%COMP%]   Adjustments\n.action-gallery.selection-mode[_ngcontent-%COMP%] {\n  .actions-grid .action-card,\n  .actions-list .list-item {\n    padding-left: 2.5rem;\n  }\n}"] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionGalleryComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-action-gallery', template: "<div class=\"action-gallery\" [class.dark-theme]=\"config.theme === 'dark'\" [class.selection-mode]=\"config.selectionMode\">\n  <!-- Gallery Header -->\n  <div class=\"gallery-header\" *ngIf=\"config.showSearch\">\n    <div class=\"header-content\">\n      <div class=\"search-section\">\n        <kendo-textbox \n          #searchInput\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        <div class=\"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\" [class.fa-th]=\"(viewMode$ | async) === 'grid'\" [class.fa-list]=\"(viewMode$ | async) === 'list'\"></i>\n          </button>\n        </div>\n        <div class=\"stats\">\n          <span class=\"stat-item\">\n            <i class=\"fa-solid fa-bolt\"></i>\n            {{ (filteredActions$ | async)?.length }} of {{ totalActions }} actions\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Main Content -->\n  <div class=\"gallery-content\" [class.no-categories]=\"!config.showCategories\">\n    <!-- Category Sidebar -->\n    <div class=\"category-sidebar\" *ngIf=\"config.showCategories\">\n      <div class=\"category-tree\">\n        <ng-container *ngFor=\"let category of categoryTree$ | async\">\n          <div class=\"category-item\" \n               [class.selected]=\"(selectedCategory$ | async) === category.id\"\n               [class.has-children]=\"category.children && category.children.length > 0\"\n               (click)=\"selectCategory(category.id)\">\n            \n            <div class=\"category-header\">\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              <i class=\"fa-solid fa-chevron-right expand-icon\" \n                 *ngIf=\"category.children && category.children.length > 0\"\n                 [class.expanded]=\"expandedCategories.has(category.id)\"\n                 (click)=\"toggleCategoryExpanded(category.id); $event.stopPropagation()\"></i>\n            </div>\n            \n            <!-- Sub-categories -->\n            <div class=\"sub-categories\" *ngIf=\"category.children && expandedCategories.has(category.id)\">\n              <div class=\"category-item sub-category\" \n                   *ngFor=\"let subCategory of category.children\"\n                   [class.selected]=\"(selectedCategory$ | async) === subCategory.id\"\n                   (click)=\"selectCategory(subCategory.id); $event.stopPropagation()\">\n                <div class=\"category-header\">\n                  <i class=\"fa-solid {{ subCategory.icon }} category-icon\"></i>\n                  <span class=\"category-name\">{{ subCategory.name }}</span>\n                  <span class=\"category-count\">{{ subCategory.count }}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Actions Display -->\n    <div class=\"actions-container\">\n      <!-- Loading State -->\n      <div class=\"loading-state\" *ngIf=\"isLoading$ | async\">\n        <kendo-loader size=\"large\"></kendo-loader>\n        <p>Loading actions...</p>\n      </div>\n\n      <!-- Empty State -->\n      <div class=\"empty-state\" *ngIf=\"!(isLoading$ | async) && (filteredActions$ | async)?.length === 0\">\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      <!-- Grid View -->\n      <div class=\"actions-grid\" \n           *ngIf=\"!(isLoading$ | async) && (viewMode$ | async) === 'grid' && (filteredActions$ | async) && (filteredActions$ | async)!.length > 0\"\n           [style.grid-template-columns]=\"'repeat(' + (config.gridColumns || 3) + ', 1fr)'\">\n        \n        <div class=\"action-card\" \n             *ngFor=\"let action of filteredActions$ | async\"\n             [class.expanded]=\"action.expanded\"\n             [class.selected]=\"action.selected\"\n             [class.animate]=\"animateCards\"\n             [class.hover]=\"hoveredAction === action.ID\"\n             (mouseenter)=\"hoveredAction = action.ID\"\n             (mouseleave)=\"hoveredAction = null\"\n             (click)=\"toggleActionSelection(action)\">\n          \n          <!-- Card Header -->\n          <div class=\"card-header\" (click)=\"toggleActionExpanded(action); $event.stopPropagation()\">\n            <div class=\"action-icon\">\n              <i class=\"fa-solid {{ getActionIcon(action) }}\"></i>\n            </div>\n            <div class=\"action-info\">\n              <h3 class=\"action-name\">{{ action.Name }}</h3>\n              <div class=\"action-meta\">\n                <span class=\"category-badge\" *ngIf=\"action.Category\">\n                  <i class=\"fa-solid fa-folder\"></i>\n                  {{ action.Category }}\n                </span>\n              </div>\n            </div>\n            <div class=\"card-actions\">\n              <button kendoButton \n                      look=\"flat\" \n                      size=\"small\"\n                      icon=\"play\"\n                      (click)=\"testAction(action, $event)\"\n                      *ngIf=\"config.enableQuickTest\"\n                      kendoTooltip\n                      title=\"Test this action\">\n              </button>\n              <i class=\"fa-solid expand-indicator\"\n                 [class.fa-chevron-down]=\"!action.expanded\"\n                 [class.fa-chevron-up]=\"action.expanded\"></i>\n            </div>\n          </div>\n          \n          <!-- Card Body -->\n          <div class=\"card-body\">\n            <p class=\"action-description\">{{ action.Description || 'No description available' }}</p>\n            \n            <!-- Quick Stats -->\n            <div class=\"action-stats\">\n              <span class=\"stat\" *ngIf=\"action.parameters?.length\">\n                <i class=\"fa-solid fa-sliders\"></i>\n                {{ action.parameters?.length || 0 }} params\n              </span>\n              <span class=\"stat\" *ngIf=\"action.resultCodes?.length\">\n                <i class=\"fa-solid fa-code-branch\"></i>\n                {{ action.resultCodes?.length || 0 }} results\n              </span>\n              <span class=\"stat\" *ngIf=\"action.Type\">\n                <i class=\"fa-solid fa-tag\"></i>\n                {{ action.Type }}\n              </span>\n            </div>\n          </div>\n          \n          <!-- Expanded Details -->\n          <div class=\"card-details\" *ngIf=\"action.expanded\">\n            <!-- Parameters -->\n            <div class=\"detail-section\" *ngIf=\"action.parameters && action.parameters.length > 0\">\n              <h4>\n                <i class=\"fa-solid fa-sliders\"></i>\n                Parameters\n              </h4>\n              <div class=\"parameters-list\">\n                <div class=\"parameter-item\" *ngFor=\"let param of action.parameters\">\n                  <span class=\"param-name\">{{ param.Name }}</span>\n                  <span class=\"param-type\">{{ param.Type }}</span>\n                  <span class=\"param-required\" *ngIf=\"param.IsRequired\">Required</span>\n                </div>\n              </div>\n            </div>\n            \n            <!-- Result Codes -->\n            <div class=\"detail-section\" *ngIf=\"action.resultCodes && action.resultCodes.length > 0\">\n              <h4>\n                <i class=\"fa-solid fa-code-branch\"></i>\n                Result Codes\n              </h4>\n              <div class=\"result-codes-list\">\n                <div class=\"result-code-item\" *ngFor=\"let code of action.resultCodes\">\n                  <span class=\"code-value\">{{ code.ResultCode }}</span>\n                  <span class=\"code-desc\">{{ code.Description }}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n          \n          <!-- Selection Indicator -->\n          <div class=\"selection-indicator\" *ngIf=\"config.selectionMode\">\n            <i class=\"fa-solid\" [class.fa-check-circle]=\"action.selected\" [class.fa-circle]=\"!action.selected\"></i>\n          </div>\n        </div>\n      </div>\n\n      <!-- List View -->\n      <div class=\"actions-list\" \n           *ngIf=\"!(isLoading$ | async) && (viewMode$ | async) === 'list' && (filteredActions$ | async) && (filteredActions$ | async)!.length > 0\">\n        \n        <div class=\"list-header\">\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-params\">Parameters</span>\n          <span class=\"col-actions\">Actions</span>\n        </div>\n        \n        <div class=\"list-item\" \n             *ngFor=\"let action of filteredActions$ | async\"\n             [class.selected]=\"action.selected\"\n             (click)=\"toggleActionSelection(action)\">\n          \n          <span class=\"col-name\">\n            <i class=\"fa-solid {{ getActionIcon(action) }} action-icon\"></i>\n            {{ action.Name }}\n          </span>\n          <span class=\"col-category\">{{ action.Category || '-' }}</span>\n          <span class=\"col-type\">{{ action.Type || '-' }}</span>\n          <span class=\"col-params\">{{ action.parameters?.length || 0 }}</span>\n          <span class=\"col-actions\">\n            <button kendoButton \n                    look=\"flat\" \n                    size=\"small\"\n                    icon=\"play\"\n                    (click)=\"testAction(action, $event)\"\n                    *ngIf=\"config.enableQuickTest\"\n                    kendoTooltip\n                    title=\"Test this action\">\n            </button>\n          </span>\n          \n          <!-- Selection Indicator -->\n          <div class=\"selection-indicator\" *ngIf=\"config.selectionMode\">\n            <i class=\"fa-solid\" [class.fa-check-circle]=\"action.selected\" [class.fa-circle]=\"!action.selected\"></i>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: ["@import '@progress/kendo-theme-default/scss/all';\n\n// Variables\n$primary-color: #3b82f6;\n$secondary-color: #8b5cf6;\n$success-color: #10b981;\n$warning-color: #f59e0b;\n$error-color: #ef4444;\n$dark-bg: #1e293b;\n$light-bg: #f8fafc;\n$card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n$card-hover-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n$border-radius: 12px;\n$transition-speed: 0.3s;\n\n// Animations\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes scaleIn {\n  from {\n    transform: scale(0.95);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n@keyframes shimmer {\n  0% {\n    background-position: -1000px 0;\n  }\n  100% {\n    background-position: 1000px 0;\n  }\n}\n\n.action-gallery {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  \n  &.dark-theme {\n    background: $dark-bg;\n    color: #f1f5f9;\n    \n    .gallery-header {\n      background: #0f172a;\n      border-bottom-color: #334155;\n    }\n    \n    .category-sidebar {\n      background: #0f172a;\n      border-right-color: #334155;\n    }\n    \n    .action-card {\n      background: #1e293b;\n      border-color: #334155;\n      \n      &:hover {\n        background: #253449;\n      }\n    }\n    \n    .search-input .k-textbox {\n      background: #1e293b;\n      border-color: #334155;\n      color: #f1f5f9;\n    }\n  }\n}\n\n// Gallery Header\n.gallery-header {\n  background: white;\n  border-bottom: 1px solid #e5e7eb;\n  padding: 1rem 1.5rem;\n  \n  .header-content {\n    display: flex;\n    align-items: center;\n    gap: 1.5rem;\n  }\n  \n  .search-section {\n    flex: 1;\n    \n    .search-input {\n      width: 100%;\n      \n      .k-textbox {\n        padding-left: 2.5rem;\n        border-radius: 8px;\n        height: 40px;\n        transition: all $transition-speed ease;\n        \n        &:focus {\n          border-color: $primary-color;\n          box-shadow: 0 0 0 3px rgba($primary-color, 0.1);\n        }\n      }\n      \n      .fa-search {\n        position: absolute;\n        left: 1rem;\n        color: #94a3b8;\n      }\n    }\n  }\n  \n  .header-actions {\n    display: flex;\n    align-items: center;\n    gap: 1.5rem;\n    \n    .view-toggle {\n      .k-button {\n        border-radius: 6px;\n      }\n    }\n    \n    .stats {\n      .stat-item {\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        color: #64748b;\n        font-size: 0.875rem;\n        \n        i {\n          color: $primary-color;\n        }\n      }\n    }\n  }\n}\n\n// Main Content\n.gallery-content {\n  flex: 1;\n  display: flex;\n  overflow: hidden;\n  \n  &.no-categories {\n    .actions-container {\n      margin-left: 0;\n    }\n  }\n}\n\n// Category Sidebar\n.category-sidebar {\n  width: 280px;\n  background: $light-bg;\n  border-right: 1px solid #e5e7eb;\n  overflow-y: auto;\n  padding: 1rem;\n  \n  .category-tree {\n    .category-item {\n      margin-bottom: 0.25rem;\n      cursor: pointer;\n      transition: all $transition-speed ease;\n      \n      &:hover {\n        .category-header {\n          background: rgba($primary-color, 0.05);\n        }\n      }\n      \n      &.selected {\n        .category-header {\n          background: rgba($primary-color, 0.1);\n          color: $primary-color;\n          font-weight: 500;\n        }\n      }\n      \n      .category-header {\n        display: flex;\n        align-items: center;\n        padding: 0.75rem 1rem;\n        border-radius: 8px;\n        transition: all $transition-speed ease;\n        \n        .category-icon {\n          width: 20px;\n          margin-right: 0.75rem;\n          color: #64748b;\n        }\n        \n        .category-name {\n          flex: 1;\n        }\n        \n        .category-count {\n          font-size: 0.875rem;\n          color: #94a3b8;\n          background: rgba(0, 0, 0, 0.05);\n          padding: 0.125rem 0.5rem;\n          border-radius: 12px;\n          margin-right: 0.5rem;\n        }\n        \n        .expand-icon {\n          color: #94a3b8;\n          transition: transform $transition-speed ease;\n          \n          &.expanded {\n            transform: rotate(90deg);\n          }\n        }\n      }\n      \n      &.sub-category {\n        .category-header {\n          padding-left: 2.5rem;\n          font-size: 0.875rem;\n        }\n      }\n    }\n    \n    .sub-categories {\n      animation: fadeIn $transition-speed ease;\n    }\n  }\n}\n\n// Actions Container\n.actions-container {\n  flex: 1;\n  padding: 1.5rem;\n  overflow-y: auto;\n  background: white;\n}\n\n// Loading State\n.loading-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: #64748b;\n  \n  p {\n    margin-top: 1rem;\n    font-size: 1.125rem;\n  }\n}\n\n// Empty State\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  text-align: center;\n  color: #64748b;\n  \n  i {\n    font-size: 4rem;\n    color: #cbd5e1;\n    margin-bottom: 1rem;\n  }\n  \n  h3 {\n    font-size: 1.5rem;\n    font-weight: 600;\n    margin-bottom: 0.5rem;\n    color: #475569;\n  }\n  \n  p {\n    margin-bottom: 1.5rem;\n  }\n  \n  .k-button {\n    border-radius: 8px;\n  }\n}\n\n// Grid View\n.actions-grid {\n  display: grid;\n  gap: 1.5rem;\n  grid-auto-rows: min-content;\n  \n  .action-card {\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: $border-radius;\n    overflow: hidden;\n    transition: all $transition-speed ease;\n    cursor: pointer;\n    position: relative;\n    \n    &.animate {\n      animation: scaleIn 0.4s ease-out;\n      animation-fill-mode: both;\n      \n      @for $i from 1 through 20 {\n        &:nth-child(#{$i}) {\n          animation-delay: #{$i * 0.05}s;\n        }\n      }\n    }\n    \n    &:hover {\n      transform: translateY(-4px);\n      box-shadow: $card-hover-shadow;\n      border-color: $primary-color;\n    }\n    \n    &.selected {\n      border-color: $primary-color;\n      box-shadow: 0 0 0 3px rgba($primary-color, 0.1);\n      \n      .selection-indicator {\n        color: $primary-color;\n      }\n    }\n    \n    .card-header {\n      padding: 1.25rem;\n      display: flex;\n      align-items: flex-start;\n      gap: 1rem;\n      cursor: pointer;\n      \n      .action-icon {\n        width: 48px;\n        height: 48px;\n        border-radius: 10px;\n        background: linear-gradient(135deg, $primary-color, $secondary-color);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: white;\n        font-size: 1.5rem;\n        flex-shrink: 0;\n      }\n      \n      .action-info {\n        flex: 1;\n        min-width: 0;\n        \n        .action-name {\n          font-size: 1.125rem;\n          font-weight: 600;\n          margin: 0 0 0.5rem 0;\n          line-height: 1.2;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          display: -webkit-box;\n          -webkit-line-clamp: 2;\n          -webkit-box-orient: vertical;\n        }\n        \n        .action-meta {\n          display: flex;\n          gap: 0.5rem;\n          flex-wrap: wrap;\n          \n          .category-badge {\n            display: inline-flex;\n            align-items: center;\n            gap: 0.25rem;\n            font-size: 0.75rem;\n            padding: 0.25rem 0.75rem;\n            background: rgba($primary-color, 0.1);\n            color: $primary-color;\n            border-radius: 16px;\n            font-weight: 500;\n            \n            i {\n              font-size: 0.625rem;\n            }\n          }\n        }\n      }\n      \n      .card-actions {\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        \n        .k-button {\n          opacity: 0;\n          transition: opacity $transition-speed ease;\n        }\n        \n        .expand-indicator {\n          color: #94a3b8;\n          transition: transform $transition-speed ease;\n        }\n      }\n    }\n    \n    &:hover .card-header .card-actions .k-button {\n      opacity: 1;\n    }\n    \n    .card-body {\n      padding: 0 1.25rem 1.25rem;\n      \n      .action-description {\n        font-size: 0.875rem;\n        color: #64748b;\n        line-height: 1.5;\n        margin-bottom: 1rem;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 3;\n        -webkit-box-orient: vertical;\n      }\n      \n      .action-stats {\n        display: flex;\n        gap: 1rem;\n        flex-wrap: wrap;\n        \n        .stat {\n          display: flex;\n          align-items: center;\n          gap: 0.375rem;\n          font-size: 0.75rem;\n          color: #94a3b8;\n          \n          i {\n            font-size: 0.75rem;\n          }\n        }\n      }\n    }\n    \n    .card-details {\n      border-top: 1px solid #e5e7eb;\n      padding: 1.25rem;\n      animation: fadeIn $transition-speed ease;\n      \n      .detail-section {\n        margin-bottom: 1.25rem;\n        \n        &:last-child {\n          margin-bottom: 0;\n        }\n        \n        h4 {\n          display: flex;\n          align-items: center;\n          gap: 0.5rem;\n          font-size: 0.875rem;\n          font-weight: 600;\n          margin-bottom: 0.75rem;\n          color: #475569;\n          \n          i {\n            color: $primary-color;\n          }\n        }\n        \n        .parameters-list {\n          .parameter-item {\n            display: flex;\n            align-items: center;\n            gap: 0.5rem;\n            padding: 0.375rem 0;\n            font-size: 0.8125rem;\n            \n            .param-name {\n              font-weight: 500;\n              color: #64748b;\n            }\n            \n            .param-type {\n              font-size: 0.75rem;\n              color: #94a3b8;\n              background: rgba(0, 0, 0, 0.05);\n              padding: 0.125rem 0.5rem;\n              border-radius: 4px;\n            }\n            \n            .param-required {\n              font-size: 0.625rem;\n              color: $warning-color;\n              text-transform: uppercase;\n              font-weight: 600;\n            }\n          }\n        }\n        \n        .result-codes-list {\n          .result-code-item {\n            display: flex;\n            align-items: baseline;\n            gap: 0.5rem;\n            padding: 0.375rem 0;\n            font-size: 0.8125rem;\n            \n            .code-value {\n              font-weight: 600;\n              color: $primary-color;\n              font-family: monospace;\n              min-width: 60px;\n            }\n            \n            .code-desc {\n              color: #64748b;\n              font-size: 0.75rem;\n            }\n          }\n        }\n      }\n    }\n    \n    .selection-indicator {\n      position: absolute;\n      top: 1rem;\n      right: 1rem;\n      font-size: 1.25rem;\n      color: #cbd5e1;\n      transition: all $transition-speed ease;\n    }\n  }\n}\n\n// List View\n.actions-list {\n  background: white;\n  border: 1px solid #e5e7eb;\n  border-radius: $border-radius;\n  overflow: hidden;\n  \n  .list-header {\n    display: grid;\n    grid-template-columns: 1fr 200px 120px 100px 100px;\n    padding: 1rem 1.5rem;\n    background: $light-bg;\n    font-weight: 600;\n    font-size: 0.875rem;\n    color: #64748b;\n    border-bottom: 1px solid #e5e7eb;\n  }\n  \n  .list-item {\n    display: grid;\n    grid-template-columns: 1fr 200px 120px 100px 100px;\n    padding: 1rem 1.5rem;\n    border-bottom: 1px solid #f1f5f9;\n    align-items: center;\n    cursor: pointer;\n    transition: all $transition-speed ease;\n    position: relative;\n    \n    &:hover {\n      background: $light-bg;\n    }\n    \n    &.selected {\n      background: rgba($primary-color, 0.05);\n      \n      .selection-indicator {\n        color: $primary-color;\n      }\n    }\n    \n    .col-name {\n      display: flex;\n      align-items: center;\n      gap: 0.75rem;\n      font-weight: 500;\n      \n      .action-icon {\n        color: $primary-color;\n      }\n    }\n    \n    .col-category,\n    .col-type,\n    .col-params {\n      color: #64748b;\n      font-size: 0.875rem;\n    }\n    \n    .col-actions {\n      display: flex;\n      justify-content: flex-end;\n    }\n    \n    .selection-indicator {\n      position: absolute;\n      left: 0.5rem;\n      font-size: 1rem;\n      color: #cbd5e1;\n      transition: all $transition-speed ease;\n    }\n  }\n}\n\n// Selection Mode Adjustments\n.action-gallery.selection-mode {\n  .actions-grid .action-card,\n  .actions-list .list-item {\n    padding-left: 2.5rem;\n  }\n}"] }]
+    }], () => [], { config: [{
+            type: Input
+        }], preSelectedActions: [{
+            type: Input
+        }], actionSelected: [{
+            type: Output
+        }], actionsSelected: [{
+            type: Output
+        }], actionTestRequested: [{
+            type: Output
+        }], searchInput: [{
+            type: ViewChild,
+            args: ['searchInput', { static: false }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionGalleryComponent, { className: "ActionGalleryComponent", filePath: "lib/action-gallery.component.ts", lineNumber: 39 }); })();
+//# sourceMappingURL=action-gallery.component.js.map