import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Subject, takeUntil } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "../../services/flow-editor.service";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
function PropertiesPanelComponent_div_6_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 7);
    i0.ɵɵelement(1, "i", 8);
    i0.ɵɵelementStart(2, "p");
    i0.ɵɵtext(3, "Select a step to view its properties");
    i0.ɵɵelementEnd()();
} }
function PropertiesPanelComponent_div_7_div_5_Template(rf, ctx) { if (rf & 1) {
    const _r3 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 9)(1, "label", 27);
    i0.ɵɵtext(2, " Prompt Display Name ");
    i0.ɵɵelementStart(3, "span", 28);
    i0.ɵɵtext(4, "Editable");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(5, "div", 29)(6, "input", 30);
    i0.ɵɵtwoWayListener("ngModelChange", function PropertiesPanelComponent_div_7_div_5_Template_input_ngModelChange_6_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.selectedStep.name, $event) || (ctx_r1.selectedStep.name = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵlistener("blur", function PropertiesPanelComponent_div_7_div_5_Template_input_blur_6_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onStepNameChange(ctx_r1.selectedStep.name)); })("keyup.enter", function PropertiesPanelComponent_div_7_div_5_Template_input_keyup_enter_6_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onStepNameChange(ctx_r1.selectedStep.name)); });
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(6);
    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.selectedStep.name);
} }
function PropertiesPanelComponent_div_7_option_22_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "option", 31);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const option_r4 = ctx.$implicit;
    const i_r5 = ctx.index;
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵclassProp("new-prompt-option", option_r4.value === "new_custom_prompt")("custom-prompt-option", option_r4.value.startsWith("custom_"))("separator-after", i_r5 === 0 && ctx_r1.availableOptions.length > 1);
    i0.ɵɵproperty("value", option_r4.value);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", option_r4.value === "new_custom_prompt" ? "\u2795 " + option_r4.name : option_r4.name, " ");
} }
function PropertiesPanelComponent_div_7_div_24_div_5_input_3_Template(rf, ctx) { if (rf & 1) {
    const _r6 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "input", 41);
    i0.ɵɵlistener("input", function PropertiesPanelComponent_div_7_div_24_div_5_input_3_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r6); const property_r7 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onPropertyChange(property_r7.key, $event.target.value)); });
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const property_r7 = i0.ɵɵnextContext().$implicit;
    const ctx_r1 = i0.ɵɵnextContext(3);
    i0.ɵɵproperty("id", "prop-" + property_r7.key)("placeholder", property_r7.placeholder || "")("value", ctx_r1.getPropertyValue(property_r7.key));
} }
function PropertiesPanelComponent_div_7_div_24_div_5_input_4_Template(rf, ctx) { if (rf & 1) {
    const _r8 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "input", 42);
    i0.ɵɵlistener("input", function PropertiesPanelComponent_div_7_div_24_div_5_input_4_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r8); const property_r7 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onPropertyChange(property_r7.key, +$event.target.value)); });
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const property_r7 = i0.ɵɵnextContext().$implicit;
    const ctx_r1 = i0.ɵɵnextContext(3);
    i0.ɵɵproperty("id", "prop-" + property_r7.key)("min", property_r7.min)("max", property_r7.max)("step", property_r7.step || 1)("placeholder", property_r7.placeholder || "")("value", ctx_r1.getPropertyValue(property_r7.key));
} }
function PropertiesPanelComponent_div_7_div_24_div_5_select_5_option_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "option", 31);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const option_r10 = ctx.$implicit;
    i0.ɵɵproperty("value", option_r10.value);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", option_r10.label, " ");
} }
function PropertiesPanelComponent_div_7_div_24_div_5_select_5_Template(rf, ctx) { if (rf & 1) {
    const _r9 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "select", 43);
    i0.ɵɵlistener("change", function PropertiesPanelComponent_div_7_div_24_div_5_select_5_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(_r9); const property_r7 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onPropertyChange(property_r7.key, $event.target.value)); });
    i0.ɵɵtemplate(1, PropertiesPanelComponent_div_7_div_24_div_5_select_5_option_1_Template, 2, 2, "option", 44);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const property_r7 = i0.ɵɵnextContext().$implicit;
    const ctx_r1 = i0.ɵɵnextContext(3);
    i0.ɵɵproperty("id", "prop-" + property_r7.key)("value", ctx_r1.getPropertyValue(property_r7.key));
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngForOf", property_r7.options);
} }
function PropertiesPanelComponent_div_7_div_24_div_5_div_6_Template(rf, ctx) { if (rf & 1) {
    const _r11 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 45)(1, "textarea", 46);
    i0.ɵɵlistener("input", function PropertiesPanelComponent_div_7_div_24_div_5_div_6_Template_textarea_input_1_listener($event) { i0.ɵɵrestoreView(_r11); const property_r7 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onPropertyChange(property_r7.key, $event.target.value)); });
    i0.ɵɵtext(2, "            ");
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const property_r7 = i0.ɵɵnextContext().$implicit;
    const ctx_r1 = i0.ɵɵnextContext(3);
    i0.ɵɵadvance();
    i0.ɵɵproperty("id", "prop-" + property_r7.key)("placeholder", property_r7.placeholder || "")("rows", property_r7.rows || 3)("value", ctx_r1.getPropertyValue(property_r7.key));
} }
function PropertiesPanelComponent_div_7_div_24_div_5_label_7_Template(rf, ctx) { if (rf & 1) {
    const _r12 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "label", 47)(1, "input", 48);
    i0.ɵɵlistener("change", function PropertiesPanelComponent_div_7_div_24_div_5_label_7_Template_input_change_1_listener($event) { i0.ɵɵrestoreView(_r12); const property_r7 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onPropertyChange(property_r7.key, $event.target.checked)); });
    i0.ɵɵelementEnd();
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const property_r7 = i0.ɵɵnextContext().$implicit;
    const ctx_r1 = i0.ɵɵnextContext(3);
    i0.ɵɵadvance();
    i0.ɵɵproperty("checked", ctx_r1.getPropertyValue(property_r7.key));
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", property_r7.label, " ");
} }
function PropertiesPanelComponent_div_7_div_24_div_5_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 9)(1, "label", 35);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(3, PropertiesPanelComponent_div_7_div_24_div_5_input_3_Template, 1, 3, "input", 36)(4, PropertiesPanelComponent_div_7_div_24_div_5_input_4_Template, 1, 6, "input", 37)(5, PropertiesPanelComponent_div_7_div_24_div_5_select_5_Template, 2, 3, "select", 38)(6, PropertiesPanelComponent_div_7_div_24_div_5_div_6_Template, 3, 4, "div", 39)(7, PropertiesPanelComponent_div_7_div_24_div_5_label_7_Template, 3, 2, "label", 40);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const property_r7 = ctx.$implicit;
    i0.ɵɵadvance();
    i0.ɵɵproperty("for", "prop-" + property_r7.key);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", property_r7.label, " ");
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", property_r7.type === "text");
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", property_r7.type === "number");
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", property_r7.type === "select");
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", property_r7.type === "textarea" || property_r7.type === "json");
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", property_r7.type === "checkbox");
} }
function PropertiesPanelComponent_div_7_div_24_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 32)(1, "h4", 33);
    i0.ɵɵtext(2);
    i0.ɵɵelementStart(3, "span", 28);
    i0.ɵɵtext(4, "All properties are editable");
    i0.ɵɵelementEnd()();
    i0.ɵɵtemplate(5, PropertiesPanelComponent_div_7_div_24_div_5_Template, 8, 7, "div", 34);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    let tmp_2_0;
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" ", ctx_r1.selectedStep.selectedOption.startsWith("custom_") ? "Custom Prompt Configuration" : ((tmp_2_0 = ctx_r1.getSelectedOption()) == null ? null : tmp_2_0.name) + " Properties", " ");
    i0.ɵɵadvance(3);
    i0.ɵɵproperty("ngForOf", ctx_r1.getOptionProperties());
} }
function PropertiesPanelComponent_div_7_div_25_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 7)(1, "p");
    i0.ɵɵtext(2, "No additional properties for this option");
    i0.ɵɵelementEnd()();
} }
function PropertiesPanelComponent_div_7_div_26_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 7)(1, "p");
    i0.ɵɵtext(2, "Select an option above to configure properties");
    i0.ɵɵelementEnd()();
} }
function PropertiesPanelComponent_div_7_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div")(1, "div", 9)(2, "label", 10);
    i0.ɵɵtext(3, "Step Name");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "input", 11);
    i0.ɵɵlistener("input", function PropertiesPanelComponent_div_7_Template_input_input_4_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onStepNameChange($event.target.value)); });
    i0.ɵɵelementEnd()();
    i0.ɵɵtemplate(5, PropertiesPanelComponent_div_7_div_5_Template, 7, 1, "div", 12);
    i0.ɵɵelementStart(6, "div", 9)(7, "label", 13);
    i0.ɵɵtext(8, "Step Type");
    i0.ɵɵelementEnd();
    i0.ɵɵelement(9, "input", 14);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(10, "div", 9)(11, "label", 15);
    i0.ɵɵtext(12, "Step ID");
    i0.ɵɵelementEnd();
    i0.ɵɵelement(13, "input", 16);
    i0.ɵɵelementEnd();
    i0.ɵɵelement(14, "div", 17);
    i0.ɵɵelementStart(15, "div", 9)(16, "label", 18);
    i0.ɵɵtext(17, "Selected Option");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(18, "div", 19)(19, "select", 20);
    i0.ɵɵlistener("change", function PropertiesPanelComponent_div_7_Template_select_change_19_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onStepOptionChange($event.target.value)); });
    i0.ɵɵelementStart(20, "option", 21);
    i0.ɵɵtext(21);
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(22, PropertiesPanelComponent_div_7_option_22_Template, 2, 8, "option", 22);
    i0.ɵɵelementEnd()()();
    i0.ɵɵelement(23, "div", 17);
    i0.ɵɵtemplate(24, PropertiesPanelComponent_div_7_div_24_Template, 6, 2, "div", 23)(25, PropertiesPanelComponent_div_7_div_25_Template, 3, 0, "div", 5)(26, PropertiesPanelComponent_div_7_div_26_Template, 3, 0, "div", 5);
    i0.ɵɵelementStart(27, "div", 24)(28, "div", 25);
    i0.ɵɵelement(29, "i", 26);
    i0.ɵɵtext(30);
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(4);
    i0.ɵɵproperty("value", ctx_r1.selectedStep.name);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", ctx_r1.selectedStep.type === "prompt" && ctx_r1.selectedStep.selectedOption);
    i0.ɵɵadvance(4);
    i0.ɵɵproperty("value", ctx_r1.selectedStep.config.name);
    i0.ɵɵadvance(4);
    i0.ɵɵproperty("value", ctx_r1.selectedStep.id);
    i0.ɵɵadvance(6);
    i0.ɵɵproperty("value", ctx_r1.selectedStep.selectedOption || "");
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1("Select ", ctx_r1.selectedStep.config.name, "...");
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngForOf", ctx_r1.availableOptions);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngIf", ctx_r1.selectedStep.selectedOption && ctx_r1.getOptionProperties().length > 0);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", ctx_r1.selectedStep.selectedOption && ctx_r1.getOptionProperties().length === 0);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", !ctx_r1.selectedStep.selectedOption);
    i0.ɵɵadvance(2);
    i0.ɵɵstyleProp("background-color", ctx_r1.selectedStep.config.color + "20")("color", ctx_r1.selectedStep.config.color);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngClass", ctx_r1.selectedStep.config.icon);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", ctx_r1.selectedStep.config.name, " ");
} }
export class PropertiesPanelComponent {
    constructor(flowEditor, cdr) {
        this.flowEditor = flowEditor;
        this.cdr = cdr;
        this.destroy$ = new Subject();
        this.selectedStep = null;
        this.availableOptions = [];
    }
    ngOnInit() {
        // Subscribe to selected step
        this.flowEditor.selectedNode
            .pipe(takeUntil(this.destroy$))
            .subscribe(step => {
            this.selectedStep = step;
            // Update available options
            this.availableOptions = this.getAvailableOptions();
            // Initialize property values with defaults if they don't exist
            if (this.selectedStep && this.selectedStep.selectedOption) {
                const option = this.getSelectedOption();
                if (option?.properties && !this.selectedStep.propertyValues) {
                    this.selectedStep.propertyValues = {};
                    option.properties.forEach(prop => {
                        if (this.selectedStep && this.selectedStep.propertyValues) {
                            this.selectedStep.propertyValues[prop.key] = prop.defaultValue;
                        }
                    });
                }
            }
            // Force change detection
            this.cdr.detectChanges();
        });
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }
    onStepNameChange(newName) {
        if (this.selectedStep) {
            this.selectedStep.name = newName;
            this.flowEditor.updateNode(this.selectedStep);
        }
    }
    onStepOptionChange(value) {
        if (this.selectedStep) {
            // Handle creating a new custom prompt
            if (value === 'new_custom_prompt') {
                // Generate a unique ID for this custom prompt
                const customId = `custom_${this.selectedStep.id}_${Date.now()}`;
                this.selectedStep.selectedOption = customId;
                // Give it a unique name
                const customNumber = this.getStepCustomPrompts().length + 1;
                this.selectedStep.name = `Custom Prompt ${customNumber}`;
            }
            else {
                this.selectedStep.selectedOption = value;
                // If selecting a predefined prompt, reset the name to match
                const option = this.getSelectedOption();
                if (option && !value.startsWith('custom_')) {
                    this.selectedStep.name = option.name;
                }
            }
            // Initialize property values with defaults when option changes
            const option = this.getSelectedOption();
            if (option?.properties) {
                if (!this.selectedStep.propertyValues) {
                    this.selectedStep.propertyValues = {};
                }
                option.properties.forEach(prop => {
                    if (this.selectedStep && this.selectedStep.propertyValues && !(prop.key in this.selectedStep.propertyValues)) {
                        this.selectedStep.propertyValues[prop.key] = prop.defaultValue;
                    }
                });
            }
            this.flowEditor.updateNode(this.selectedStep);
            // Update available options after changing selection
            this.availableOptions = this.getAvailableOptions();
            // Force change detection
            this.cdr.detectChanges();
        }
    }
    getSelectedOption() {
        if (!this.selectedStep || !this.selectedStep.selectedOption) {
            return undefined;
        }
        return this.selectedStep.config.options.find(opt => opt.value === this.selectedStep.selectedOption);
    }
    getOptionProperties() {
        const option = this.getSelectedOption();
        return option?.properties || [];
    }
    getPropertyValue(key) {
        if (!this.selectedStep?.propertyValues) {
            return '';
        }
        return this.selectedStep.propertyValues[key] || '';
    }
    onPropertyChange(key, value) {
        if (this.selectedStep) {
            if (!this.selectedStep.propertyValues) {
                this.selectedStep.propertyValues = {};
            }
            this.selectedStep.propertyValues[key] = value;
            this.flowEditor.updateNode(this.selectedStep);
        }
    }
    // Get available options
    getAvailableOptions() {
        if (!this.selectedStep)
            return [];
        if (this.selectedStep.type === 'prompt') {
            // Create the "New Custom Prompt" option at the top
            const newPromptOption = {
                id: 'new',
                name: 'Create New Custom Prompt',
                value: 'new_custom_prompt',
                properties: [
                    { key: 'promptText', label: 'Prompt Text', type: 'textarea', rows: 6, placeholder: 'Enter your custom prompt here...' },
                    { key: 'temperature', label: 'Temperature', type: 'number', min: 0, max: 2, step: 0.1, defaultValue: 0.7 },
                    { key: 'maxTokens', label: 'Max Tokens', type: 'number', min: 1, max: 4096, defaultValue: 1024 },
                    { key: 'responseFormat', label: 'Response Format', type: 'select', options: [
                            { value: 'text', label: 'Plain Text' },
                            { value: 'json', label: 'JSON' },
                            { value: 'markdown', label: 'Markdown' },
                            { value: 'code', label: 'Code' }
                        ], defaultValue: 'text' },
                    { key: 'includeContext', label: 'Include Context', type: 'checkbox', defaultValue: true }
                ]
            };
            // Get the predefined options
            const predefinedOptions = this.selectedStep.config.options.filter(opt => opt.value !== 'custom');
            // Check if this step has any custom prompts stored
            const customPrompts = this.getStepCustomPrompts();
            // Return new option at top, then custom prompts, then predefined
            const allOptions = [newPromptOption, ...customPrompts, ...predefinedOptions];
            return allOptions;
        }
        return this.selectedStep.config.options;
    }
    // Get custom prompts for this flow
    getStepCustomPrompts() {
        const customPrompts = [];
        // Get all steps from the flow editor service
        const allSteps = this.flowEditor.getAllSteps();
        // Find all unique custom prompts across all prompt steps
        const customPromptMap = new Map();
        allSteps.forEach(step => {
            if (step.type === 'prompt' && step.selectedOption?.startsWith('custom_')) {
                if (!customPromptMap.has(step.selectedOption)) {
                    const customOption = {
                        id: step.selectedOption,
                        name: step.name || 'Custom Prompt',
                        value: step.selectedOption,
                        properties: [
                            { key: 'promptText', label: 'Prompt Text', type: 'textarea', rows: 6, placeholder: 'Enter your custom prompt here...' },
                            { key: 'temperature', label: 'Temperature', type: 'number', min: 0, max: 2, step: 0.1, defaultValue: 0.7 },
                            { key: 'maxTokens', label: 'Max Tokens', type: 'number', min: 1, max: 4096, defaultValue: 1024 },
                            { key: 'responseFormat', label: 'Response Format', type: 'select', options: [
                                    { value: 'text', label: 'Plain Text' },
                                    { value: 'json', label: 'JSON' },
                                    { value: 'markdown', label: 'Markdown' },
                                    { value: 'code', label: 'Code' }
                                ], defaultValue: 'text' },
                            { key: 'includeContext', label: 'Include Context', type: 'checkbox', defaultValue: true }
                        ]
                    };
                    customPromptMap.set(step.selectedOption, customOption);
                }
            }
        });
        // Convert map to array
        customPrompts.push(...customPromptMap.values());
        return customPrompts;
    }
    static { this.ɵfac = function PropertiesPanelComponent_Factory(t) { return new (t || PropertiesPanelComponent)(i0.ɵɵdirectiveInject(i1.FlowEditorService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PropertiesPanelComponent, selectors: [["app-properties-panel"]], standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 8, vars: 2, consts: [[1, "properties-panel"], [1, "properties-header"], [1, "properties-title"], [1, "fa-solid", "fa-cog"], [1, "properties-content"], ["class", "empty-state", 4, "ngIf"], [4, "ngIf"], [1, "empty-state"], [1, "fa-solid", "fa-info-circle"], [1, "property-field"], ["for", "step-name"], ["id", "step-name", "type", "text", 1, "form-input", 3, "input", "value"], ["class", "property-field", 4, "ngIf"], ["for", "step-type"], ["id", "step-type", "type", "text", "readonly", "", "disabled", "", 1, "form-input", 3, "value"], ["for", "step-id"], ["id", "step-id", "type", "text", "readonly", "", "disabled", "", 1, "form-input", 3, "value"], [1, "divider"], ["for", "step-option"], [1, "option-select-container"], ["id", "step-option", 1, "form-input", 3, "change", "value"], ["value", "", "disabled", ""], [3, "value", "new-prompt-option", "custom-prompt-option", "separator-after", 4, "ngFor", "ngForOf"], ["class", "editable-properties-section", 4, "ngIf"], [1, "step-info"], [1, "info-badge"], [1, "fas", 3, "ngClass"], ["for", "prompt-name"], [1, "edit-indicator"], [1, "editable-field"], ["id", "prompt-name", "type", "text", "placeholder", "Enter prompt name...", 1, "form-input", 3, "ngModelChange", "blur", "keyup.enter", "ngModel"], [3, "value"], [1, "editable-properties-section"], [1, "section-title"], ["class", "property-field", 4, "ngFor", "ngForOf"], [3, "for"], ["type", "text", "class", "form-input", 3, "id", "placeholder", "value", "input", 4, "ngIf"], ["type", "number", "class", "form-input", 3, "id", "min", "max", "step", "placeholder", "value", "input", 4, "ngIf"], ["class", "form-input", 3, "id", "value", "change", 4, "ngIf"], ["class", "textarea-wrapper", 4, "ngIf"], ["class", "checkbox-label", 4, "ngIf"], ["type", "text", 1, "form-input", 3, "input", "id", "placeholder", "value"], ["type", "number", 1, "form-input", 3, "input", "id", "min", "max", "step", "placeholder", "value"], [1, "form-input", 3, "change", "id", "value"], [3, "value", 4, "ngFor", "ngForOf"], [1, "textarea-wrapper"], [1, "form-input", "editable-textarea", 3, "input", "id", "placeholder", "rows", "value"], [1, "checkbox-label"], ["type", "checkbox", 3, "change", "checked"]], template: function PropertiesPanelComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h3", 2);
            i0.ɵɵelement(3, "i", 3);
            i0.ɵɵtext(4, " Properties ");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(5, "div", 4);
            i0.ɵɵtemplate(6, PropertiesPanelComponent_div_6_Template, 4, 0, "div", 5)(7, PropertiesPanelComponent_div_7_Template, 31, 16, "div", 6);
            i0.ɵɵelementEnd()();
        } if (rf & 2) {
            i0.ɵɵadvance(6);
            i0.ɵɵproperty("ngIf", !ctx.selectedStep);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.selectedStep);
        } }, dependencies: [CommonModule, i2.NgClass, i2.NgForOf, i2.NgIf, FormsModule, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgModel], styles: ["[_nghost-%COMP%] {\n      display: block;\n      height: 100%;\n      background: white;\n    }\n    \n    .properties-panel[_ngcontent-%COMP%] {\n      height: 100%;\n      background: white;\n      border-left: 1px solid #D9D9D9;\n      display: flex;\n      flex-direction: column;\n      box-shadow: -1px 0 3px rgba(0, 0, 0, 0.05);\n    }\n    \n    .properties-header[_ngcontent-%COMP%] {\n      padding: 1.5rem;\n      border-bottom: 1px solid #D9D9D9;\n      background: #F4F4F4;\n    }\n    \n    .properties-title[_ngcontent-%COMP%] {\n      font-size: 1.25rem;\n      font-weight: 600;\n      margin: 0;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n    }\n    \n    .properties-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #0076B6;\n    }\n    \n    .properties-content[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow-y: auto;\n      padding: 1rem;\n    }\n    \n    .empty-state[_ngcontent-%COMP%] {\n      text-align: center;\n      color: #AAA;\n      padding: 2rem;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 1rem;\n    }\n    \n    .empty-state[_ngcontent-%COMP%]   .fa-info-circle[_ngcontent-%COMP%] {\n      font-size: 2rem;\n      color: #0076B6;\n    }\n    \n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 0.875rem;\n    }\n    \n    .property-field[_ngcontent-%COMP%] {\n      margin-bottom: 1.5rem;\n    }\n    \n    .property-field[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      display: block;\n      margin-bottom: 0.5rem;\n      font-weight: 600;\n      color: #333;\n      font-size: 0.875rem;\n    }\n    \n    .form-input[_ngcontent-%COMP%] {\n      width: 100%;\n      padding: 0.5rem;\n      border: 1px solid #D9D9D9;\n      border-radius: 4px;\n      font-size: 0.875rem;\n    }\n    \n    .form-input[_ngcontent-%COMP%]:focus {\n      outline: none;\n      border-color: #0076B6;\n    }\n    \n    .form-input[readonly][_ngcontent-%COMP%] {\n      background-color: #F4F4F4;\n      cursor: not-allowed;\n    }"] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PropertiesPanelComponent, [{
        type: Component,
        args: [{ selector: 'app-properties-panel', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"properties-panel\">\n  <div class=\"properties-header\">\n    <h3 class=\"properties-title\">\n      <i class=\"fa-solid fa-cog\"></i> Properties\n    </h3>\n  </div>\n  \n  <div class=\"properties-content\">\n    <!-- Empty State -->\n    <div *ngIf=\"!selectedStep\" class=\"empty-state\">\n      <i class=\"fa-solid fa-info-circle\"></i>\n      <p>Select a step to view its properties</p>\n    </div>\n    \n    <!-- Step Properties -->\n    <div *ngIf=\"selectedStep\">\n      <div class=\"property-field\">\n        <label for=\"step-name\">Step Name</label>\n        <input \n          id=\"step-name\"\n          type=\"text\" \n          [value]=\"selectedStep.name\" \n          (input)=\"onStepNameChange($any($event.target).value)\"\n          class=\"form-input\">\n      </div>\n      \n      <!-- Show editable name for prompts -->\n      <div class=\"property-field\" *ngIf=\"selectedStep.type === 'prompt' && selectedStep.selectedOption\">\n        <label for=\"prompt-name\">\n          Prompt Display Name\n          <span class=\"edit-indicator\">Editable</span>\n        </label>\n        <div class=\"editable-field\">\n          <input \n            id=\"prompt-name\"\n            type=\"text\" \n            [(ngModel)]=\"selectedStep.name\" \n            (blur)=\"onStepNameChange(selectedStep.name)\"\n            (keyup.enter)=\"onStepNameChange(selectedStep.name)\"\n            class=\"form-input\"\n            placeholder=\"Enter prompt name...\">\n        </div>\n      </div>\n      \n      <div class=\"property-field\">\n        <label for=\"step-type\">Step Type</label>\n        <input \n          id=\"step-type\"\n          type=\"text\" \n          [value]=\"selectedStep.config.name\" \n          readonly \n          class=\"form-input\"\n          disabled>\n      </div>\n      \n      <div class=\"property-field\">\n        <label for=\"step-id\">Step ID</label>\n        <input \n          id=\"step-id\"\n          type=\"text\" \n          [value]=\"selectedStep.id\" \n          readonly \n          class=\"form-input\"\n          disabled>\n      </div>\n      \n      <div class=\"divider\"></div>\n      \n      <div class=\"property-field\">\n        <label for=\"step-option\">Selected Option</label>\n        <div class=\"option-select-container\">\n          <select \n            id=\"step-option\"\n            class=\"form-input\"\n            [value]=\"selectedStep.selectedOption || ''\"\n            (change)=\"onStepOptionChange($any($event.target).value)\">\n            <option value=\"\" disabled>Select {{ selectedStep.config.name }}...</option>\n            <option \n              *ngFor=\"let option of availableOptions; let i = index\" \n              [value]=\"option.value\"\n              [class.new-prompt-option]=\"option.value === 'new_custom_prompt'\"\n              [class.custom-prompt-option]=\"option.value.startsWith('custom_')\"\n              [class.separator-after]=\"i === 0 && availableOptions.length > 1\">\n              {{ option.value === 'new_custom_prompt' ? '\u2795 ' + option.name : option.name }}\n            </option>\n          </select>\n        </div>\n      </div>\n      \n      <div class=\"divider\"></div>\n      \n      <!-- Dynamic properties based on selected option -->\n      <div *ngIf=\"selectedStep.selectedOption && getOptionProperties().length > 0\" \n           class=\"editable-properties-section\">\n        <h4 class=\"section-title\">\n          {{ selectedStep.selectedOption.startsWith('custom_') ? 'Custom Prompt Configuration' : getSelectedOption()?.name + ' Properties' }}\n          <span class=\"edit-indicator\">All properties are editable</span>\n        </h4>\n        \n        <div *ngFor=\"let property of getOptionProperties()\" class=\"property-field\">\n          <label [for]=\"'prop-' + property.key\">\n            {{ property.label }}\n          </label>\n          \n          <!-- Text input -->\n          <input \n            *ngIf=\"property.type === 'text'\"\n            [id]=\"'prop-' + property.key\"\n            type=\"text\"\n            [placeholder]=\"property.placeholder || ''\"\n            [value]=\"getPropertyValue(property.key)\"\n            (input)=\"onPropertyChange(property.key, $any($event.target).value)\"\n            class=\"form-input\">\n          \n          <!-- Number input -->\n          <input \n            *ngIf=\"property.type === 'number'\"\n            [id]=\"'prop-' + property.key\"\n            type=\"number\"\n            [min]=\"property.min\"\n            [max]=\"property.max\"\n            [step]=\"property.step || 1\"\n            [placeholder]=\"property.placeholder || ''\"\n            [value]=\"getPropertyValue(property.key)\"\n            (input)=\"onPropertyChange(property.key, +$any($event.target).value)\"\n            class=\"form-input\">\n          \n          <!-- Select dropdown -->\n          <select \n            *ngIf=\"property.type === 'select'\"\n            [id]=\"'prop-' + property.key\"\n            [value]=\"getPropertyValue(property.key)\"\n            (change)=\"onPropertyChange(property.key, $any($event.target).value)\"\n            class=\"form-input\">\n            <option *ngFor=\"let option of property.options\" [value]=\"option.value\">\n              {{ option.label }}\n            </option>\n          </select>\n          \n          <!-- Textarea -->\n          <div *ngIf=\"property.type === 'textarea' || property.type === 'json'\" class=\"textarea-wrapper\">\n            <textarea \n              [id]=\"'prop-' + property.key\"\n              [placeholder]=\"property.placeholder || ''\"\n              [rows]=\"property.rows || 3\"\n              [value]=\"getPropertyValue(property.key)\"\n              (input)=\"onPropertyChange(property.key, $any($event.target).value)\"\n              class=\"form-input editable-textarea\">\n            </textarea>\n          </div>\n          \n          <!-- Checkbox -->\n          <label *ngIf=\"property.type === 'checkbox'\" class=\"checkbox-label\">\n            <input \n              type=\"checkbox\"\n              [checked]=\"getPropertyValue(property.key)\"\n              (change)=\"onPropertyChange(property.key, $any($event.target).checked)\">\n            {{ property.label }}\n          </label>\n        </div>\n      </div>\n      \n      <!-- Message when no option is selected -->\n      <div *ngIf=\"selectedStep.selectedOption && getOptionProperties().length === 0\" class=\"empty-state\">\n        <p>No additional properties for this option</p>\n      </div>\n      \n      <div *ngIf=\"!selectedStep.selectedOption\" class=\"empty-state\">\n        <p>Select an option above to configure properties</p>\n      </div>\n      \n      <div class=\"step-info\">\n        <div class=\"info-badge\" [style.background-color]=\"selectedStep.config.color + '20'\" [style.color]=\"selectedStep.config.color\">\n          <i class=\"fas\" [ngClass]=\"selectedStep.config.icon\"></i>\n          {{ selectedStep.config.name }}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: ["\n    :host {\n      display: block;\n      height: 100%;\n      background: white;\n    }\n    \n    .properties-panel {\n      height: 100%;\n      background: white;\n      border-left: 1px solid #D9D9D9;\n      display: flex;\n      flex-direction: column;\n      box-shadow: -1px 0 3px rgba(0, 0, 0, 0.05);\n    }\n    \n    .properties-header {\n      padding: 1.5rem;\n      border-bottom: 1px solid #D9D9D9;\n      background: #F4F4F4;\n    }\n    \n    .properties-title {\n      font-size: 1.25rem;\n      font-weight: 600;\n      margin: 0;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n    }\n    \n    .properties-title i {\n      color: #0076B6;\n    }\n    \n    .properties-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 1rem;\n    }\n    \n    .empty-state {\n      text-align: center;\n      color: #AAA;\n      padding: 2rem;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 1rem;\n    }\n    \n    .empty-state .fa-info-circle {\n      font-size: 2rem;\n      color: #0076B6;\n    }\n    \n    .empty-state p {\n      margin: 0;\n      font-size: 0.875rem;\n    }\n    \n    .property-field {\n      margin-bottom: 1.5rem;\n    }\n    \n    .property-field label {\n      display: block;\n      margin-bottom: 0.5rem;\n      font-weight: 600;\n      color: #333;\n      font-size: 0.875rem;\n    }\n    \n    .form-input {\n      width: 100%;\n      padding: 0.5rem;\n      border: 1px solid #D9D9D9;\n      border-radius: 4px;\n      font-size: 0.875rem;\n    }\n    \n    .form-input:focus {\n      outline: none;\n      border-color: #0076B6;\n    }\n    \n    .form-input[readonly] {\n      background-color: #F4F4F4;\n      cursor: not-allowed;\n    }\n  "] }]
    }], () => [{ type: i1.FlowEditorService }, { type: i0.ChangeDetectorRef }], null); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PropertiesPanelComponent, { className: "PropertiesPanelComponent", filePath: "src/lib/custom/AIAgents/FlowAgentType/flow-editor-integration/components/properties-panel/properties-panel.component.ts", lineNumber: 106 }); })();
//# sourceMappingURL=properties-panel.component.js.map