import { Component, EventEmitter, Output } from '@angular/core';
import { CommonModule } from '@angular/common';
import { STEP_CONFIGS } from '../../models/step.model';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
function ToolbarComponent_button_9_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 11);
    i0.ɵɵlistener("dragstart", function ToolbarComponent_button_9_Template_button_dragstart_0_listener($event) { const stepType_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDragStart($event, stepType_r2.key)); })("dragend", function ToolbarComponent_button_9_Template_button_dragend_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDragEnd($event)); });
    i0.ɵɵelement(1, "i", 12);
    i0.ɵɵelementStart(2, "span");
    i0.ɵɵtext(3);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const stepType_r2 = ctx.$implicit;
    i0.ɵɵstyleProp("border-color", stepType_r2.config.color)("background-color", stepType_r2.config.color + "10");
    i0.ɵɵadvance();
    i0.ɵɵstyleProp("color", stepType_r2.config.color);
    i0.ɵɵproperty("ngClass", stepType_r2.config.icon);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(stepType_r2.config.name);
} }
export class ToolbarComponent {
    constructor() {
        this.runFlow = new EventEmitter();
        this.stepTypes = Object.entries(STEP_CONFIGS).map(([key, config]) => ({
            key: key,
            config
        }));
    }
    onDragStart(event, type) {
        const element = event.target;
        element.classList.add('dragging');
        event.dataTransfer.effectAllowed = 'copy';
        event.dataTransfer.setData('text/plain', `step:${type}`);
        event.dataTransfer.setData('stepType', type);
    }
    onDragEnd(event) {
        const element = event.target;
        element.classList.remove('dragging');
    }
    onRunFlow() {
        this.runFlow.emit();
    }
    static { this.ɵfac = function ToolbarComponent_Factory(t) { return new (t || ToolbarComponent)(); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ToolbarComponent, selectors: [["app-toolbar"]], outputs: { runFlow: "runFlow" }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 18, vars: 1, consts: [[1, "toolbar"], [1, "toolbar-header"], [1, "toolbar-title"], [1, "fas", "fa-toolbox"], [1, "toolbar-section"], [1, "section-title"], [1, "steps-grid"], ["class", "toolbar-item step-item", "draggable", "true", 3, "border-color", "background-color", "dragstart", "dragend", 4, "ngFor", "ngForOf"], [1, "action-buttons"], ["title", "Run the current flow", 1, "action-button", "run-button", 3, "click"], [1, "fas", "fa-play"], ["draggable", "true", 1, "toolbar-item", "step-item", 3, "dragstart", "dragend"], [1, "fas", 3, "ngClass"]], template: function ToolbarComponent_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, " Steps ");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(5, "div", 4)(6, "h4", 5);
            i0.ɵɵtext(7, "Drag to add steps");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(8, "div", 6);
            i0.ɵɵtemplate(9, ToolbarComponent_button_9_Template, 4, 8, "button", 7);
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(10, "div", 4)(11, "h4", 5);
            i0.ɵɵtext(12, "Flow Actions");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(13, "div", 8)(14, "button", 9);
            i0.ɵɵlistener("click", function ToolbarComponent_Template_button_click_14_listener() { return ctx.onRunFlow(); });
            i0.ɵɵelement(15, "i", 10);
            i0.ɵɵelementStart(16, "span");
            i0.ɵɵtext(17, "Run Flow");
            i0.ɵɵelementEnd()()()()();
        } if (rf & 2) {
            i0.ɵɵadvance(9);
            i0.ɵɵproperty("ngForOf", ctx.stepTypes);
        } }, dependencies: [CommonModule, i1.NgClass, i1.NgForOf], styles: [".toolbar[_ngcontent-%COMP%] {\n  height: 100%;\n  background: var(--white-color);\n  border-right: 1px solid var(--gray-700);\n  overflow-y: auto;\n  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.05);\n}\n\n.toolbar-header[_ngcontent-%COMP%] {\n  padding: 1.5rem;\n  border-bottom: 1px solid var(--gray-700);\n  background: var(--gray-600);\n}\n\n.toolbar-title[_ngcontent-%COMP%] {\n  font-size: 1.25rem;\n  font-weight: 600;\n  margin: 0;\n  color: var(--gray-900);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  \n  i {\n    color: var(--mj-blue);\n  }\n}\n\n.toolbar-section[_ngcontent-%COMP%] {\n  padding: 1rem;\n}\n\n.section-title[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--gray-800);\n  text-transform: uppercase;\n  margin: 0 0 1rem 0;\n}\n\n.steps-grid[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.toolbar-item[_ngcontent-%COMP%] {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1rem;\n  border: 2px solid var(--gray-700);\n  background: var(--white-color);\n  border-radius: 0.5rem;\n  cursor: move;\n  transition: all var(--transition-time);\n  font-size: 0.875rem;\n  text-align: left;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  \n  &:hover {\n    transform: translateX(4px);\n    box-shadow: var(--shadow);\n  }\n  \n  &.dragging {\n    opacity: 0.5;\n  }\n  \n  &.step-item {\n    border-width: 2px;\n    font-weight: 500;\n  }\n  \n  i {\n    font-size: 1rem;\n  }\n}\n\n.divider[_ngcontent-%COMP%] {\n  height: 1px;\n  background: #e9ecef;\n  margin: 0 1rem;\n}\n\n.action-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin-top: 0.5rem;\n}\n\n.action-button[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1rem;\n  border: 1px solid var(--gray-700);\n  background: var(--white-color);\n  border-radius: var(--border-radius);\n  cursor: pointer;\n  font-size: 0.875rem;\n  font-weight: 500;\n  transition: all var(--transition-time);\n  \n  &:hover {\n    background: var(--gray-600);\n    border-color: var(--gray-800);\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n  }\n  \n  &.run-button {\n    background: var(--mj-blue);\n    color: white;\n    border-color: var(--mj-blue);\n    \n    &:hover {\n      background: #005a8b;\n      border-color: #005a8b;\n    }\n    \n    i {\n      font-size: 1rem;\n    }\n  }\n}"] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToolbarComponent, [{
        type: Component,
        args: [{ selector: 'app-toolbar', standalone: true, imports: [CommonModule], template: "<div class=\"toolbar\">\n  <div class=\"toolbar-header\">\n    <h3 class=\"toolbar-title\">\n      <i class=\"fas fa-toolbox\"></i> Steps\n    </h3>\n  </div>\n  \n  <div class=\"toolbar-section\">\n    <h4 class=\"section-title\">Drag to add steps</h4>\n    <div class=\"steps-grid\">\n      <button \n        *ngFor=\"let stepType of stepTypes\"\n        class=\"toolbar-item step-item\"\n        [style.border-color]=\"stepType.config.color\"\n        [style.background-color]=\"stepType.config.color + '10'\"\n        draggable=\"true\"\n        (dragstart)=\"onDragStart($event, stepType.key)\"\n        (dragend)=\"onDragEnd($event)\">\n        <i class=\"fas\" [ngClass]=\"stepType.config.icon\" [style.color]=\"stepType.config.color\"></i>\n        <span>{{ stepType.config.name }}</span>\n      </button>\n    </div>\n  </div>\n  \n  <div class=\"toolbar-section\">\n    <h4 class=\"section-title\">Flow Actions</h4>\n    <div class=\"action-buttons\">\n      <button \n        class=\"action-button run-button\"\n        (click)=\"onRunFlow()\"\n        title=\"Run the current flow\">\n        <i class=\"fas fa-play\"></i>\n        <span>Run Flow</span>\n      </button>\n    </div>\n  </div>\n</div>", styles: [".toolbar {\n  height: 100%;\n  background: var(--white-color);\n  border-right: 1px solid var(--gray-700);\n  overflow-y: auto;\n  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.05);\n}\n\n.toolbar-header {\n  padding: 1.5rem;\n  border-bottom: 1px solid var(--gray-700);\n  background: var(--gray-600);\n}\n\n.toolbar-title {\n  font-size: 1.25rem;\n  font-weight: 600;\n  margin: 0;\n  color: var(--gray-900);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  \n  i {\n    color: var(--mj-blue);\n  }\n}\n\n.toolbar-section {\n  padding: 1rem;\n}\n\n.section-title {\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--gray-800);\n  text-transform: uppercase;\n  margin: 0 0 1rem 0;\n}\n\n.steps-grid {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.toolbar-item {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1rem;\n  border: 2px solid var(--gray-700);\n  background: var(--white-color);\n  border-radius: 0.5rem;\n  cursor: move;\n  transition: all var(--transition-time);\n  font-size: 0.875rem;\n  text-align: left;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  \n  &:hover {\n    transform: translateX(4px);\n    box-shadow: var(--shadow);\n  }\n  \n  &.dragging {\n    opacity: 0.5;\n  }\n  \n  &.step-item {\n    border-width: 2px;\n    font-weight: 500;\n  }\n  \n  i {\n    font-size: 1rem;\n  }\n}\n\n.divider {\n  height: 1px;\n  background: #e9ecef;\n  margin: 0 1rem;\n}\n\n.action-buttons {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin-top: 0.5rem;\n}\n\n.action-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1rem;\n  border: 1px solid var(--gray-700);\n  background: var(--white-color);\n  border-radius: var(--border-radius);\n  cursor: pointer;\n  font-size: 0.875rem;\n  font-weight: 500;\n  transition: all var(--transition-time);\n  \n  &:hover {\n    background: var(--gray-600);\n    border-color: var(--gray-800);\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n  }\n  \n  &.run-button {\n    background: var(--mj-blue);\n    color: white;\n    border-color: var(--mj-blue);\n    \n    &:hover {\n      background: #005a8b;\n      border-color: #005a8b;\n    }\n    \n    i {\n      font-size: 1rem;\n    }\n  }\n}\n\n"] }]
    }], () => [], { runFlow: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ToolbarComponent, { className: "ToolbarComponent", filePath: "src/lib/custom/AIAgents/FlowAgentType/flow-editor-integration/components/toolbar/toolbar.component.ts", lineNumber: 12 }); })();
//# sourceMappingURL=toolbar.component.js.map