import { Component } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../services/component-studio-state.service";
import * as i2 from "@angular/forms";
import * as i3 from "@memberjunction/ng-code-editor";
import * as i4 from "@memberjunction/ng-ui-components";
function SpecEditorComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 6)(1, "button", 10);
    i0.ɵɵlistener("click", function SpecEditorComponent_Conditional_9_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ApplyChanges()); });
    i0.ɵɵelement(2, "i", 11);
    i0.ɵɵtext(3, " Apply ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "button", 12);
    i0.ɵɵlistener("click", function SpecEditorComponent_Conditional_9_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CancelChanges()); });
    i0.ɵɵtext(5, " Cancel ");
    i0.ɵɵelementEnd()();
} }
function SpecEditorComponent_Conditional_11_For_11_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "option", 18);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const t_r4 = ctx.$implicit;
    i0.ɵɵproperty("value", t_r4);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(t_r4);
} }
function SpecEditorComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
    const _r3 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 8)(1, "div", 13)(2, "div", 14)(3, "label", 15);
    i0.ɵɵtext(4, "Name");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "input", 16);
    i0.ɵɵtwoWayListener("ngModelChange", function SpecEditorComponent_Conditional_11_Template_input_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.FormModel.name, $event) || (ctx_r1.FormModel.name = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵlistener("ngModelChange", function SpecEditorComponent_Conditional_11_Template_input_ngModelChange_5_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnFormChanged()); });
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(6, "div", 14)(7, "label", 15);
    i0.ɵɵtext(8, "Type");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(9, "select", 17);
    i0.ɵɵtwoWayListener("ngModelChange", function SpecEditorComponent_Conditional_11_Template_select_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.FormModel.type, $event) || (ctx_r1.FormModel.type = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵlistener("ngModelChange", function SpecEditorComponent_Conditional_11_Template_select_ngModelChange_9_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnFormChanged()); });
    i0.ɵɵrepeaterCreate(10, SpecEditorComponent_Conditional_11_For_11_Template, 2, 2, "option", 18, i0.ɵɵrepeaterTrackByIdentity);
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(12, "div", 14)(13, "label", 15);
    i0.ɵɵtext(14, "Title");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(15, "input", 16);
    i0.ɵɵtwoWayListener("ngModelChange", function SpecEditorComponent_Conditional_11_Template_input_ngModelChange_15_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.FormModel.title, $event) || (ctx_r1.FormModel.title = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵlistener("ngModelChange", function SpecEditorComponent_Conditional_11_Template_input_ngModelChange_15_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnFormChanged()); });
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(16, "div", 14)(17, "label", 15);
    i0.ɵɵtext(18, "Description");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(19, "textarea", 19);
    i0.ɵɵtwoWayListener("ngModelChange", function SpecEditorComponent_Conditional_11_Template_textarea_ngModelChange_19_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.FormModel.description, $event) || (ctx_r1.FormModel.description = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵlistener("ngModelChange", function SpecEditorComponent_Conditional_11_Template_textarea_ngModelChange_19_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnFormChanged()); });
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(20, "div", 13)(21, "div", 14)(22, "label", 15);
    i0.ɵɵtext(23, "Location");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(24, "select", 17);
    i0.ɵɵtwoWayListener("ngModelChange", function SpecEditorComponent_Conditional_11_Template_select_ngModelChange_24_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.FormModel.location, $event) || (ctx_r1.FormModel.location = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵlistener("ngModelChange", function SpecEditorComponent_Conditional_11_Template_select_ngModelChange_24_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnFormChanged()); });
    i0.ɵɵelementStart(25, "option", 20);
    i0.ɵɵtext(26, "embedded");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(27, "option", 21);
    i0.ɵɵtext(28, "standalone");
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(29, "div", 14)(30, "label", 15);
    i0.ɵɵtext(31, "Example Usage");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(32, "input", 22);
    i0.ɵɵtwoWayListener("ngModelChange", function SpecEditorComponent_Conditional_11_Template_input_ngModelChange_32_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.FormModel.exampleUsage, $event) || (ctx_r1.FormModel.exampleUsage = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵlistener("ngModelChange", function SpecEditorComponent_Conditional_11_Template_input_ngModelChange_32_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnFormChanged()); });
    i0.ɵɵelementEnd()()()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(5);
    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.FormModel.name);
    i0.ɵɵadvance(4);
    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.FormModel.type);
    i0.ɵɵadvance();
    i0.ɵɵrepeater(ctx_r1.ComponentTypes);
    i0.ɵɵadvance(5);
    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.FormModel.title);
    i0.ɵɵadvance(4);
    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.FormModel.description);
    i0.ɵɵadvance(5);
    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.FormModel.location);
    i0.ɵɵadvance(8);
    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.FormModel.exampleUsage);
} }
function SpecEditorComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
    const _r5 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 9)(1, "mj-code-editor", 23);
    i0.ɵɵtwoWayListener("ngModelChange", function SpecEditorComponent_Conditional_12_Template_mj_code_editor_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.State.EditableSpec, $event) || (ctx_r1.State.EditableSpec = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵlistener("ngModelChange", function SpecEditorComponent_Conditional_12_Template_mj_code_editor_ngModelChange_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnJsonChanged()); });
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.State.EditableSpec);
    i0.ɵɵproperty("language", "json")("indentWithTab", true);
} }
const COMPONENT_TYPES = [
    'Report', 'Dashboard', 'Form', 'Chart', 'Table', 'Widget', 'Navigation', 'Search', 'Utility'
];
export class SpecEditorComponent {
    State;
    cdr;
    Mode = 'form';
    FormModel = { name: '', title: '', description: '', type: '', location: '', exampleUsage: '' };
    ComponentTypes = COMPONENT_TYPES;
    stateChangedSub = null;
    constructor(State, cdr) {
        this.State = State;
        this.cdr = cdr;
    }
    ngOnInit() {
        this.syncSpecToForm();
        this.stateChangedSub = this.State.StateChanged.subscribe(() => {
            if (this.Mode === 'form' && !this.State.IsEditingSpec) {
                this.syncSpecToForm();
            }
            this.cdr.detectChanges();
        });
    }
    ngOnDestroy() {
        if (this.stateChangedSub) {
            this.stateChangedSub.unsubscribe();
            this.stateChangedSub = null;
        }
    }
    SetMode(mode) {
        if (mode === 'form') {
            this.syncSpecToForm();
        }
        else {
            this.syncFormToSpec();
        }
        this.Mode = mode;
    }
    OnFormChanged() {
        this.syncFormToSpec();
        this.State.IsEditingSpec = true;
    }
    OnJsonChanged() {
        this.State.IsEditingSpec = true;
    }
    ApplyChanges() {
        if (this.Mode === 'form') {
            this.syncFormToSpec();
        }
        this.State.ApplySpecChanges();
    }
    CancelChanges() {
        this.State.InitializeEditors();
        this.syncSpecToForm();
        this.cdr.detectChanges();
    }
    syncSpecToForm() {
        try {
            const spec = JSON.parse(this.State.EditableSpec);
            this.FormModel = {
                name: spec.name || '',
                title: spec.title || '',
                description: spec.description || '',
                type: spec.type || '',
                location: spec.location || '',
                exampleUsage: spec.exampleUsage || ''
            };
        }
        catch {
            // If JSON is invalid, keep current form values
        }
    }
    syncFormToSpec() {
        try {
            const spec = JSON.parse(this.State.EditableSpec);
            spec.name = this.FormModel.name;
            spec.title = this.FormModel.title;
            spec.description = this.FormModel.description;
            spec.type = this.FormModel.type;
            spec.location = this.FormModel.location;
            spec.exampleUsage = this.FormModel.exampleUsage;
            this.State.EditableSpec = JSON.stringify(spec, null, 2);
        }
        catch {
            // If JSON is invalid, skip sync
        }
    }
    static ɵfac = function SpecEditorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SpecEditorComponent)(i0.ɵɵdirectiveInject(i1.ComponentStudioStateService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SpecEditorComponent, selectors: [["mj-spec-editor"]], standalone: false, decls: 13, vars: 6, consts: [[1, "spec-editor"], [1, "editor-header"], [1, "mode-toggle"], [1, "mode-btn", 3, "click"], [1, "fa-solid", "fa-wpforms"], [1, "fa-solid", "fa-code"], [1, "action-buttons"], [1, "editor-body"], [1, "form-mode"], [1, "json-mode"], ["mjButton", "", "variant", "primary", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-check"], ["mjButton", "", 1, "action-btn", 3, "click"], [1, "form-row"], [1, "form-field"], [1, "form-label"], [1, "form-input", 3, "ngModelChange", "ngModel"], [1, "form-select", 3, "ngModelChange", "ngModel"], [3, "value"], ["rows", "3", 1, "form-textarea", 3, "ngModelChange", "ngModel"], ["value", "embedded"], ["value", "standalone"], ["placeholder", "Optional", 1, "form-input", 3, "ngModelChange", "ngModel"], [3, "ngModelChange", "ngModel", "language", "indentWithTab"]], template: function SpecEditorComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "button", 3);
            i0.ɵɵlistener("click", function SpecEditorComponent_Template_button_click_3_listener() { return ctx.SetMode("form"); });
            i0.ɵɵelement(4, "i", 4);
            i0.ɵɵtext(5, " Form ");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(6, "button", 3);
            i0.ɵɵlistener("click", function SpecEditorComponent_Template_button_click_6_listener() { return ctx.SetMode("json"); });
            i0.ɵɵelement(7, "i", 5);
            i0.ɵɵtext(8, " JSON ");
            i0.ɵɵelementEnd()();
            i0.ɵɵconditionalCreate(9, SpecEditorComponent_Conditional_9_Template, 6, 0, "div", 6);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(10, "div", 7);
            i0.ɵɵconditionalCreate(11, SpecEditorComponent_Conditional_11_Template, 33, 6, "div", 8)(12, SpecEditorComponent_Conditional_12_Template, 2, 3, "div", 9);
            i0.ɵɵelementEnd()();
        } if (rf & 2) {
            i0.ɵɵadvance(3);
            i0.ɵɵclassProp("active", ctx.Mode === "form");
            i0.ɵɵadvance(3);
            i0.ɵɵclassProp("active", ctx.Mode === "json");
            i0.ɵɵadvance(3);
            i0.ɵɵconditional(ctx.State.IsEditingSpec ? 9 : -1);
            i0.ɵɵadvance(2);
            i0.ɵɵconditional(ctx.Mode === "form" ? 11 : 12);
        } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.CodeEditorComponent, i4.MJButtonDirective], styles: [".spec-editor[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    .editor-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 8px 12px;\n      border-bottom: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface);\n      flex-shrink: 0;\n    }\n\n    .mode-toggle[_ngcontent-%COMP%] {\n      display: inline-flex;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .mode-btn[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 4px 12px;\n      border: none;\n      background: transparent;\n      color: var(--mj-text-secondary);\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s ease;\n      font-family: inherit;\n    }\n\n    .mode-btn[_ngcontent-%COMP%]:not(:last-child) {\n      border-right: 1px solid var(--mj-border-default);\n    }\n\n    .mode-btn[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .mode-btn.active[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .mode-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 11px;\n    }\n\n    .action-buttons[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 6px;\n    }\n\n    .action-btn[_ngcontent-%COMP%] {\n      font-size: 12px;\n    }\n\n    .editor-body[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: auto;\n    }\n\n    .form-mode[_ngcontent-%COMP%] {\n      padding: 16px;\n      display: flex;\n      flex-direction: column;\n      gap: 14px;\n    }\n\n    .form-field[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      flex: 1;\n    }\n\n    .form-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--mj-text-secondary);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .form-input[_ngcontent-%COMP%] {\n      padding: 8px 12px;\n      border: 1px solid var(--mj-border-strong);\n      border-radius: 6px;\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-primary);\n      font-size: 13px;\n      font-family: inherit;\n      outline: none;\n      transition: border-color 0.15s ease;\n    }\n\n    .form-input[_ngcontent-%COMP%]:focus {\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    }\n\n    .form-textarea[_ngcontent-%COMP%] {\n      padding: 8px 12px;\n      border: 1px solid var(--mj-border-strong);\n      border-radius: 6px;\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-primary);\n      font-size: 13px;\n      font-family: inherit;\n      resize: vertical;\n      min-height: 60px;\n      outline: none;\n      transition: border-color 0.15s ease;\n    }\n\n    .form-textarea[_ngcontent-%COMP%]:focus {\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    }\n\n    .form-select[_ngcontent-%COMP%] {\n      padding: 8px 12px;\n      border: 1px solid var(--mj-border-strong);\n      border-radius: 6px;\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-primary);\n      font-size: 13px;\n      font-family: inherit;\n      outline: none;\n      cursor: pointer;\n      transition: border-color 0.15s ease;\n    }\n\n    .form-select[_ngcontent-%COMP%]:focus {\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    }\n\n    .form-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 12px;\n    }\n\n    .json-mode[_ngcontent-%COMP%] {\n      height: 100%;\n    }\n\n    .json-mode[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n      display: block;\n      height: 100%;\n    }"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SpecEditorComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'mj-spec-editor', template: `
    <div class="spec-editor">
      <div class="editor-header">
        <div class="mode-toggle">
          <button class="mode-btn" [class.active]="Mode === 'form'" (click)="SetMode('form')">
            <i class="fa-solid fa-wpforms"></i> Form
          </button>
          <button class="mode-btn" [class.active]="Mode === 'json'" (click)="SetMode('json')">
            <i class="fa-solid fa-code"></i> JSON
          </button>
        </div>
        @if (State.IsEditingSpec) {
          <div class="action-buttons">
            <button mjButton variant="primary" (click)="ApplyChanges()" class="action-btn">
              <i class="fa-solid fa-check"></i> Apply
            </button>
            <button mjButton (click)="CancelChanges()" class="action-btn">
              Cancel
            </button>
          </div>
        }
      </div>

      <div class="editor-body">
        @if (Mode === 'form') {
          <div class="form-mode">
            <div class="form-row">
              <div class="form-field">
                <label class="form-label">Name</label>
                <input class="form-input" [(ngModel)]="FormModel.name" (ngModelChange)="OnFormChanged()" />
              </div>
              <div class="form-field">
                <label class="form-label">Type</label>
                <select class="form-select" [(ngModel)]="FormModel.type" (ngModelChange)="OnFormChanged()">
                  @for (t of ComponentTypes; track t) {
                    <option [value]="t">{{ t }}</option>
                  }
                </select>
              </div>
            </div>
            <div class="form-field">
              <label class="form-label">Title</label>
              <input class="form-input" [(ngModel)]="FormModel.title" (ngModelChange)="OnFormChanged()" />
            </div>
            <div class="form-field">
              <label class="form-label">Description</label>
              <textarea class="form-textarea" [(ngModel)]="FormModel.description" (ngModelChange)="OnFormChanged()" rows="3"></textarea>
            </div>
            <div class="form-row">
              <div class="form-field">
                <label class="form-label">Location</label>
                <select class="form-select" [(ngModel)]="FormModel.location" (ngModelChange)="OnFormChanged()">
                  <option value="embedded">embedded</option>
                  <option value="standalone">standalone</option>
                </select>
              </div>
              <div class="form-field">
                <label class="form-label">Example Usage</label>
                <input class="form-input" [(ngModel)]="FormModel.exampleUsage" (ngModelChange)="OnFormChanged()" placeholder="Optional" />
              </div>
            </div>
          </div>
        } @else {
          <div class="json-mode">
            <mj-code-editor
              [(ngModel)]="State.EditableSpec"
              [language]="'json'"
              [indentWithTab]="true"
              (ngModelChange)="OnJsonChanged()">
            </mj-code-editor>
          </div>
        }
      </div>
    </div>
  `, styles: ["\n    .spec-editor {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    .editor-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 8px 12px;\n      border-bottom: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface);\n      flex-shrink: 0;\n    }\n\n    .mode-toggle {\n      display: inline-flex;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .mode-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 4px 12px;\n      border: none;\n      background: transparent;\n      color: var(--mj-text-secondary);\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s ease;\n      font-family: inherit;\n    }\n\n    .mode-btn:not(:last-child) {\n      border-right: 1px solid var(--mj-border-default);\n    }\n\n    .mode-btn:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .mode-btn.active {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .mode-btn i {\n      font-size: 11px;\n    }\n\n    .action-buttons {\n      display: flex;\n      gap: 6px;\n    }\n\n    .action-btn {\n      font-size: 12px;\n    }\n\n    .editor-body {\n      flex: 1;\n      overflow: auto;\n    }\n\n    .form-mode {\n      padding: 16px;\n      display: flex;\n      flex-direction: column;\n      gap: 14px;\n    }\n\n    .form-field {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      flex: 1;\n    }\n\n    .form-label {\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--mj-text-secondary);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .form-input {\n      padding: 8px 12px;\n      border: 1px solid var(--mj-border-strong);\n      border-radius: 6px;\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-primary);\n      font-size: 13px;\n      font-family: inherit;\n      outline: none;\n      transition: border-color 0.15s ease;\n    }\n\n    .form-input:focus {\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    }\n\n    .form-textarea {\n      padding: 8px 12px;\n      border: 1px solid var(--mj-border-strong);\n      border-radius: 6px;\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-primary);\n      font-size: 13px;\n      font-family: inherit;\n      resize: vertical;\n      min-height: 60px;\n      outline: none;\n      transition: border-color 0.15s ease;\n    }\n\n    .form-textarea:focus {\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    }\n\n    .form-select {\n      padding: 8px 12px;\n      border: 1px solid var(--mj-border-strong);\n      border-radius: 6px;\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-primary);\n      font-size: 13px;\n      font-family: inherit;\n      outline: none;\n      cursor: pointer;\n      transition: border-color 0.15s ease;\n    }\n\n    .form-select:focus {\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    }\n\n    .form-row {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 12px;\n    }\n\n    .json-mode {\n      height: 100%;\n    }\n\n    .json-mode mj-code-editor {\n      display: block;\n      height: 100%;\n    }\n  "] }]
    }], () => [{ type: i1.ComponentStudioStateService }, { type: i0.ChangeDetectorRef }], null); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SpecEditorComponent, { className: "SpecEditorComponent", filePath: "src/ComponentStudio/components/editors/spec-editor.component.ts", lineNumber: 260 }); })();
//# sourceMappingURL=spec-editor.component.js.map