import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { trigger, transition, style, animate } from '@angular/animations';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { LogError, CompositeKey } from '@memberjunction/core';
import { UUIDsEqual } from '@memberjunction/global';
import { BaseAngularComponent } from '@memberjunction/ng-base-types';
import * as i0 from "@angular/core";
import * as i1 from "../../services/action-explorer-state.service";
import * as i2 from "@memberjunction/ng-shared";
import * as i3 from "@angular/forms";
import * as i4 from "@memberjunction/ng-ui-components";
const _forTrack0 = ($index, $item) => $item.value;
function NewActionPanelComponent_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "mj-alert", 8);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(ctx_r1.Errors["general"]);
} }
function NewActionPanelComponent_Conditional_0_For_15_Conditional_8_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 29);
} }
function NewActionPanelComponent_Conditional_0_For_15_Template(rf, ctx) { if (rf & 1) {
    const _r3 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 24);
    i0.ɵɵlistener("click", function NewActionPanelComponent_Conditional_0_For_15_Template_button_click_0_listener() { const option_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.selectType(option_r4.value)); });
    i0.ɵɵelementStart(1, "div", 25);
    i0.ɵɵelement(2, "i");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "div", 26)(4, "span", 27);
    i0.ɵɵtext(5);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(6, "span", 28);
    i0.ɵɵtext(7);
    i0.ɵɵelementEnd()();
    i0.ɵɵconditionalCreate(8, NewActionPanelComponent_Conditional_0_For_15_Conditional_8_Template, 1, 0, "i", 29);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const option_r4 = ctx.$implicit;
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵclassProp("selected", ctx_r1.Type === option_r4.value);
    i0.ɵɵadvance(2);
    i0.ɵɵclassMap(option_r4.icon);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(option_r4.label);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(option_r4.description);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.Type === option_r4.value ? 8 : -1);
} }
function NewActionPanelComponent_Conditional_0_Conditional_20_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 15);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(ctx_r1.Errors["name"]);
} }
function NewActionPanelComponent_Conditional_0_Conditional_29_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 15);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(ctx_r1.Errors["category"]);
} }
function NewActionPanelComponent_Conditional_0_Conditional_35_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 30);
    i0.ɵɵtext(1, " Creating... ");
} }
function NewActionPanelComponent_Conditional_0_Conditional_36_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 31);
    i0.ɵɵtext(1, " Create Action ");
} }
function NewActionPanelComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 1);
    i0.ɵɵlistener("click", function NewActionPanelComponent_Conditional_0_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onBackdropClick($event)); });
    i0.ɵɵelementStart(1, "div", 2)(2, "div", 3)(3, "h2");
    i0.ɵɵelement(4, "i", 4);
    i0.ɵɵtext(5, " New Action ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(6, "button", 5);
    i0.ɵɵlistener("click", function NewActionPanelComponent_Conditional_0_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onClose()); });
    i0.ɵɵelement(7, "i", 6);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(8, "div", 7);
    i0.ɵɵconditionalCreate(9, NewActionPanelComponent_Conditional_0_Conditional_9_Template, 2, 1, "mj-alert", 8);
    i0.ɵɵelementStart(10, "div", 9)(11, "label", 10);
    i0.ɵɵtext(12, "Action Type");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(13, "div", 11);
    i0.ɵɵrepeaterCreate(14, NewActionPanelComponent_Conditional_0_For_15_Template, 9, 7, "button", 12, _forTrack0);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(16, "div", 9)(17, "label", 13);
    i0.ɵɵtext(18, " Action Name ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(19, "input", 14);
    i0.ɵɵtwoWayListener("ngModelChange", function NewActionPanelComponent_Conditional_0_Template_input_ngModelChange_19_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.Name, $event) || (ctx_r1.Name = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(20, NewActionPanelComponent_Conditional_0_Conditional_20_Template, 2, 1, "span", 15);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(21, "div", 9)(22, "label", 16);
    i0.ɵɵtext(23, " Description ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(24, "textarea", 17);
    i0.ɵɵtwoWayListener("ngModelChange", function NewActionPanelComponent_Conditional_0_Template_textarea_ngModelChange_24_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.Description, $event) || (ctx_r1.Description = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(25, "div", 9)(26, "label", 18);
    i0.ɵɵtext(27, " Category ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(28, "mj-dropdown", 19);
    i0.ɵɵtwoWayListener("ngModelChange", function NewActionPanelComponent_Conditional_0_Template_mj_dropdown_ngModelChange_28_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.CategoryID, $event) || (ctx_r1.CategoryID = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(29, NewActionPanelComponent_Conditional_0_Conditional_29_Template, 2, 1, "span", 15);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(30, "mj-alert", 20)(31, "p");
    i0.ɵɵtext(32, " After creating the action, you'll be taken to the full action editor where you can configure parameters, code, and other settings. ");
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(33, "div", 21)(34, "button", 22);
    i0.ɵɵlistener("click", function NewActionPanelComponent_Conditional_0_Template_button_click_34_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSave()); });
    i0.ɵɵconditionalCreate(35, NewActionPanelComponent_Conditional_0_Conditional_35_Template, 2, 0)(36, NewActionPanelComponent_Conditional_0_Conditional_36_Template, 2, 0);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(37, "button", 23);
    i0.ɵɵlistener("click", function NewActionPanelComponent_Conditional_0_Template_button_click_37_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onClose()); });
    i0.ɵɵtext(38, " Cancel ");
    i0.ɵɵelementEnd()()()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵproperty("@slideIn", undefined);
    i0.ɵɵadvance(8);
    i0.ɵɵconditional(ctx_r1.Errors["general"] ? 9 : -1);
    i0.ɵɵadvance(5);
    i0.ɵɵrepeater(ctx_r1.TypeOptions);
    i0.ɵɵadvance(5);
    i0.ɵɵclassProp("invalid", ctx_r1.Errors["name"]);
    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.Name);
    i0.ɵɵproperty("maxlength", 425);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.Errors["name"] ? 20 : -1);
    i0.ɵɵadvance(4);
    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.Description);
    i0.ɵɵproperty("rows", 3);
    i0.ɵɵadvance(4);
    i0.ɵɵclassProp("invalid", ctx_r1.Errors["category"]);
    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.CategoryID);
    i0.ɵɵproperty("Data", ctx_r1.getCategoryOptions())("ValuePrimitive", true);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.Errors["category"] ? 29 : -1);
    i0.ɵɵadvance(5);
    i0.ɵɵproperty("disabled", ctx_r1.IsSaving);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.IsSaving ? 35 : 36);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("disabled", ctx_r1.IsSaving);
} }
export class NewActionPanelComponent extends BaseAngularComponent {
    StateService;
    navigationService;
    cdr;
    Categories = [];
    PreselectedCategoryId = null;
    ActionCreated = new EventEmitter();
    Close = new EventEmitter();
    IsOpen = false;
    IsSaving = false;
    // Form fields
    Name = '';
    Description = '';
    CategoryID = null;
    Type = 'Custom';
    // Validation
    Errors = {};
    TypeOptions = [
        {
            value: 'Custom',
            label: 'Custom Action',
            icon: 'fa-solid fa-code',
            description: 'Write your own action code with full control'
        },
        {
            value: 'Generated',
            label: 'AI Generated',
            icon: 'fa-solid fa-robot',
            description: 'Let AI generate the action code from a prompt'
        }
    ];
    destroy$ = new Subject();
    constructor(StateService, navigationService, cdr) {
        super();
        this.StateService = StateService;
        this.navigationService = navigationService;
        this.cdr = cdr;
    }
    ngOnInit() {
        this.StateService.NewActionPanelOpen$.pipe(takeUntil(this.destroy$)).subscribe(isOpen => {
            this.IsOpen = isOpen;
            if (isOpen) {
                this.resetForm();
            }
            this.cdr.markForCheck();
        });
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }
    resetForm() {
        this.Name = '';
        this.Description = '';
        this.CategoryID = this.PreselectedCategoryId || (this.StateService.SelectedCategoryId !== 'all' && this.StateService.SelectedCategoryId !== 'uncategorized'
            ? this.StateService.SelectedCategoryId
            : null);
        this.Type = 'Custom';
        this.Errors = {};
        this.IsSaving = false;
    }
    onClose() {
        this.StateService.closeNewActionPanel();
        this.Close.emit();
    }
    onBackdropClick(event) {
        if (event.target.classList.contains('panel-backdrop')) {
            this.onClose();
        }
    }
    validate() {
        this.Errors = {};
        if (!this.Name || this.Name.trim().length === 0) {
            this.Errors['name'] = 'Action name is required';
        }
        else if (this.Name.trim().length < 3) {
            this.Errors['name'] = 'Action name must be at least 3 characters';
        }
        else if (this.Name.trim().length > 425) {
            this.Errors['name'] = 'Action name must be less than 425 characters';
        }
        if (!this.CategoryID) {
            this.Errors['category'] = 'Please select a category';
        }
        return Object.keys(this.Errors).length === 0;
    }
    async onSave() {
        if (!this.validate()) {
            this.cdr.markForCheck();
            return;
        }
        this.IsSaving = true;
        this.cdr.markForCheck();
        try {
            const md = this.ProviderToUse;
            const action = await md.GetEntityObject('MJ: Actions');
            action.Name = this.Name.trim();
            action.Description = this.Description.trim() || null;
            action.CategoryID = this.CategoryID;
            action.Type = this.Type;
            action.Status = 'Pending'; // New actions start as pending
            const saved = await action.Save();
            if (saved) {
                this.ActionCreated.emit(action);
                this.StateService.closeNewActionPanel();
                // Open the full action record for editing
                const key = new CompositeKey([{ FieldName: 'ID', Value: action.ID }]);
                this.navigationService.OpenEntityRecord('MJ: Actions', key);
            }
            else {
                this.Errors['general'] = 'Failed to save action. Please try again.';
            }
        }
        catch (error) {
            LogError('Failed to create action', undefined, error);
            this.Errors['general'] = 'An error occurred while creating the action.';
        }
        finally {
            this.IsSaving = false;
            this.cdr.markForCheck();
        }
    }
    selectType(type) {
        this.Type = type;
    }
    getCategoryOptions() {
        const options = [];
        // Sort categories by path for easier selection
        const sortedCategories = [...this.Categories].sort((a, b) => this.getCategoryPath(a).localeCompare(this.getCategoryPath(b)));
        sortedCategories.forEach(category => {
            options.push({
                text: this.getCategoryPath(category),
                value: category.ID
            });
        });
        return options;
    }
    getCategoryPath(category) {
        const path = [category.Name];
        let currentParentId = category.ParentID;
        while (currentParentId) {
            const parent = this.Categories.find(c => UUIDsEqual(c.ID, currentParentId));
            if (parent) {
                path.unshift(parent.Name);
                currentParentId = parent.ParentID || null;
            }
            else {
                break;
            }
        }
        return path.join(' / ');
    }
    static ɵfac = function NewActionPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || NewActionPanelComponent)(i0.ɵɵdirectiveInject(i1.ActionExplorerStateService), i0.ɵɵdirectiveInject(i2.NavigationService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NewActionPanelComponent, selectors: [["mj-new-action-panel"]], inputs: { Categories: "Categories", PreselectedCategoryId: "PreselectedCategoryId" }, outputs: { ActionCreated: "ActionCreated", Close: "Close" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [[1, "panel-backdrop"], [1, "panel-backdrop", 3, "click"], [1, "slide-panel"], [1, "panel-header"], [1, "fa-solid", "fa-bolt"], ["mjButton", "", "variant", "flat", 3, "click"], [1, "fa-solid", "fa-times"], [1, "panel-content"], ["Variant", "error"], [1, "form-group"], [1, "form-label", "required"], [1, "type-selector"], [1, "type-option", 3, "selected"], ["for", "actionName", 1, "form-label", "required"], ["type", "text", "id", "actionName", "placeholder", "Enter action name", 1, "mj-input", 3, "ngModelChange", "ngModel", "maxlength"], [1, "error-text"], ["for", "actionDescription", 1, "form-label"], ["id", "actionDescription", "placeholder", "Describe what this action does", 1, "mj-textarea", 3, "ngModelChange", "ngModel", "rows"], ["for", "actionCategory", 1, "form-label", "required"], ["TextField", "text", "ValueField", "value", 3, "ngModelChange", "ngModel", "Data", "ValuePrimitive"], ["Variant", "info", 1, "panel-info-alert"], [1, "panel-footer"], ["mjButton", "", "variant", "primary", 3, "click", "disabled"], ["mjButton", "", "variant", "outline", 3, "click", "disabled"], [1, "type-option", 3, "click"], [1, "type-icon"], [1, "type-info"], [1, "type-label"], [1, "type-description"], [1, "fa-solid", "fa-check", "check-icon"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-check"]], template: function NewActionPanelComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵconditionalCreate(0, NewActionPanelComponent_Conditional_0_Template, 39, 18, "div", 0);
        } if (rf & 2) {
            i0.ɵɵconditional(ctx.IsOpen ? 0 : -1);
        } }, dependencies: [i3.DefaultValueAccessor, i3.NgControlStatus, i3.MaxLengthValidator, i3.NgModel, i4.MJButtonDirective, i4.MJDropdownComponent, i4.MJAlertComponent], styles: [".panel-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 1000;\n  display: flex;\n  justify-content: flex-end;\n}\n\n.slide-panel[_ngcontent-%COMP%] {\n  width: 500px;\n  max-width: 100%;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);\n  display: flex;\n  flex-direction: column;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 20px 24px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.panel-header[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  color: var(--mj-text-primary);\n}\n\n.panel-header[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 24px;\n  overflow-y: auto;\n}\n\n.form-group[_ngcontent-%COMP%] {\n  margin-bottom: 20px;\n}\n\n.form-label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 8px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.form-label.required[_ngcontent-%COMP%]::after {\n  content: ' *';\n  color: var(--mj-status-error);\n}\n\n\n\n.type-selector[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.type-option[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 14px 16px;\n  border: 2px solid var(--mj-border-default);\n  border-radius: 10px;\n  background: var(--mj-bg-surface-card);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  text-align: left;\n}\n\n.type-option[_ngcontent-%COMP%]:hover {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  background: var(--mj-bg-surface-hover);\n}\n\n.type-option.selected[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.type-icon[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\n  height: 44px;\n  border-radius: 10px;\n  background: var(--mj-bg-surface-sunken);\n  flex-shrink: 0;\n}\n\n.type-option.selected[_ngcontent-%COMP%]   .type-icon[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n}\n\n.type-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n  color: var(--mj-text-muted);\n}\n\n.type-option.selected[_ngcontent-%COMP%]   .type-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n}\n\n.type-info[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.type-label[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.type-description[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.check-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 16px;\n}\n\n.error-text[_ngcontent-%COMP%] {\n  display: block;\n  margin-top: 4px;\n  font-size: 12px;\n  color: var(--mj-status-error);\n}\n\n\n\n.panel-info-alert[_ngcontent-%COMP%] {\n  margin-top: 24px;\n}\n\n.panel-info-alert[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  line-height: 1.5;\n}\n\n.panel-footer[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  padding: 16px 24px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-page);\n}\n\n.panel-footer[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n\n\n@media (max-width: 520px) {\n  .slide-panel[_ngcontent-%COMP%] {\n    width: 100%;\n  }\n}"], data: { animation: [
                trigger('slideIn', [
                    transition(':enter', [
                        style({ transform: 'translateX(100%)', opacity: 0 }),
                        animate('250ms ease-out', style({ transform: 'translateX(0)', opacity: 1 }))
                    ]),
                    transition(':leave', [
                        animate('200ms ease-in', style({ transform: 'translateX(100%)', opacity: 0 }))
                    ])
                ])
            ] }, changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NewActionPanelComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'mj-new-action-panel', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                    trigger('slideIn', [
                        transition(':enter', [
                            style({ transform: 'translateX(100%)', opacity: 0 }),
                            animate('250ms ease-out', style({ transform: 'translateX(0)', opacity: 1 }))
                        ]),
                        transition(':leave', [
                            animate('200ms ease-in', style({ transform: 'translateX(100%)', opacity: 0 }))
                        ])
                    ])
                ], template: "@if (IsOpen) {\n  <div class=\"panel-backdrop\" (click)=\"onBackdropClick($event)\">\n    <div class=\"slide-panel\" @slideIn>\n      <div class=\"panel-header\">\n        <h2>\n          <i class=\"fa-solid fa-bolt\"></i>\n          New Action\n        </h2>\n        <button mjButton\n          variant=\"flat\"\n          (click)=\"onClose()\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n\n      <div class=\"panel-content\">\n        @if (Errors['general']) {\n          <mj-alert Variant=\"error\">{{ Errors['general'] }}</mj-alert>\n        }\n\n        <!-- Action Type Selection -->\n        <div class=\"form-group\">\n          <label class=\"form-label required\">Action Type</label>\n          <div class=\"type-selector\">\n            @for (option of TypeOptions; track option.value) {\n              <button class=\"type-option\"\n                [class.selected]=\"Type === option.value\"\n                (click)=\"selectType(option.value)\">\n                <div class=\"type-icon\">\n                  <i [class]=\"option.icon\"></i>\n                </div>\n                <div class=\"type-info\">\n                  <span class=\"type-label\">{{ option.label }}</span>\n                  <span class=\"type-description\">{{ option.description }}</span>\n                </div>\n                @if (Type === option.value) {\n                  <i class=\"fa-solid fa-check check-icon\"></i>\n                }\n              </button>\n            }\n          </div>\n        </div>\n\n        <div class=\"form-group\">\n          <label for=\"actionName\" class=\"form-label required\">\n            Action Name\n          </label>\n          <input type=\"text\" class=\"mj-input\"\n            id=\"actionName\"\n            [(ngModel)]=\"Name\"\n            placeholder=\"Enter action name\"\n            [maxlength]=\"425\"\n            [class.invalid]=\"Errors['name']\" />\n          @if (Errors['name']) {\n            <span class=\"error-text\">{{ Errors['name'] }}</span>\n          }\n        </div>\n\n        <div class=\"form-group\">\n          <label for=\"actionDescription\" class=\"form-label\">\n            Description\n          </label>\n          <textarea class=\"mj-textarea\"\n            id=\"actionDescription\"\n            [(ngModel)]=\"Description\"\n            placeholder=\"Describe what this action does\"\n            [rows]=\"3\"></textarea>\n        </div>\n\n        <div class=\"form-group\">\n          <label for=\"actionCategory\" class=\"form-label required\">\n            Category\n          </label>\n          <mj-dropdown\n            [(ngModel)]=\"CategoryID\"\n            [Data]=\"getCategoryOptions()\"\n            TextField=\"text\"\n            ValueField=\"value\"\n            [ValuePrimitive]=\"true\"\n            [class.invalid]=\"Errors['category']\">\n          </mj-dropdown>\n          @if (Errors['category']) {\n            <span class=\"error-text\">{{ Errors['category'] }}</span>\n          }\n        </div>\n\n        <mj-alert Variant=\"info\" class=\"panel-info-alert\">\n          <p>\n            After creating the action, you'll be taken to the full action editor\n            where you can configure parameters, code, and other settings.\n          </p>\n        </mj-alert>\n      </div>\n\n      <div class=\"panel-footer\">\n        <button mjButton\n          variant=\"primary\"\n          [disabled]=\"IsSaving\"\n          (click)=\"onSave()\">\n          @if (IsSaving) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            Creating...\n          } @else {\n            <i class=\"fa-solid fa-check\"></i>\n            Create Action\n          }\n        </button>\n        <button mjButton\n          variant=\"outline\"\n          [disabled]=\"IsSaving\"\n          (click)=\"onClose()\">\n          Cancel\n        </button>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".panel-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 1000;\n  display: flex;\n  justify-content: flex-end;\n}\n\n.slide-panel {\n  width: 500px;\n  max-width: 100%;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);\n  display: flex;\n  flex-direction: column;\n}\n\n.panel-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 20px 24px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.panel-header h2 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  color: var(--mj-text-primary);\n}\n\n.panel-header h2 i {\n  color: var(--mj-brand-primary);\n}\n\n.panel-content {\n  flex: 1;\n  padding: 24px;\n  overflow-y: auto;\n}\n\n.form-group {\n  margin-bottom: 20px;\n}\n\n.form-label {\n  display: block;\n  margin-bottom: 8px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.form-label.required::after {\n  content: ' *';\n  color: var(--mj-status-error);\n}\n\n/* Type Selector */\n.type-selector {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.type-option {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 14px 16px;\n  border: 2px solid var(--mj-border-default);\n  border-radius: 10px;\n  background: var(--mj-bg-surface-card);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  text-align: left;\n}\n\n.type-option:hover {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  background: var(--mj-bg-surface-hover);\n}\n\n.type-option.selected {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.type-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\n  height: 44px;\n  border-radius: 10px;\n  background: var(--mj-bg-surface-sunken);\n  flex-shrink: 0;\n}\n\n.type-option.selected .type-icon {\n  background: var(--mj-brand-primary);\n}\n\n.type-icon i {\n  font-size: 18px;\n  color: var(--mj-text-muted);\n}\n\n.type-option.selected .type-icon i {\n  color: var(--mj-text-inverse);\n}\n\n.type-info {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.type-label {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.type-description {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.check-icon {\n  color: var(--mj-brand-primary);\n  font-size: 16px;\n}\n\n.error-text {\n  display: block;\n  margin-top: 4px;\n  font-size: 12px;\n  color: var(--mj-status-error);\n}\n\n/* Info alert \u2014 positioning only; box chrome owned by <mj-alert> */\n.panel-info-alert {\n  margin-top: 24px;\n}\n\n.panel-info-alert p {\n  margin: 0;\n  line-height: 1.5;\n}\n\n.panel-footer {\n  display: flex;\n  gap: 12px;\n  padding: 16px 24px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-page);\n}\n\n.panel-footer button {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n/* Mobile */\n@media (max-width: 520px) {\n  .slide-panel {\n    width: 100%;\n  }\n}\n"] }]
    }], () => [{ type: i1.ActionExplorerStateService }, { type: i2.NavigationService }, { type: i0.ChangeDetectorRef }], { Categories: [{
            type: Input
        }], PreselectedCategoryId: [{
            type: Input
        }], ActionCreated: [{
            type: Output
        }], Close: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NewActionPanelComponent, { className: "NewActionPanelComponent", filePath: "src/Actions/components/explorer/new-action-panel.component.ts", lineNumber: 41 }); })();
//# sourceMappingURL=new-action-panel.component.js.map