import { Component, EventEmitter, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@progress/kendo-angular-buttons";
import * as i3 from "@memberjunction/ng-code-editor";
function TextImportDialogComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 4);
    i0.ɵɵelement(1, "i", 9);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" ", ctx_r0.errorMessage, " ");
} }
export class TextImportDialogComponent {
    importSpec = new EventEmitter();
    cancelDialog = new EventEmitter();
    componentJson = '';
    errorMessage = '';
    import() {
        this.errorMessage = '';
        if (!this.componentJson.trim()) {
            this.errorMessage = 'Please enter a component specification';
            return;
        }
        try {
            const spec = JSON.parse(this.componentJson);
            // Validate required fields
            if (!spec.name || !spec.code) {
                this.errorMessage = 'Invalid specification: missing required fields (name and code)';
                return;
            }
            // Emit the parsed spec
            this.importSpec.emit(spec);
        }
        catch (error) {
            this.errorMessage = 'Invalid JSON format. Please check your syntax.';
        }
    }
    cancel() {
        this.cancelDialog.emit();
    }
    static ɵfac = function TextImportDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TextImportDialogComponent)(); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TextImportDialogComponent, selectors: [["app-text-import-dialog"]], outputs: { importSpec: "importSpec", cancelDialog: "cancelDialog" }, standalone: false, decls: 15, vars: 10, consts: [[1, "text-import-dialog-content"], [1, "dialog-header"], [1, "editor-container"], [2, "height", "400px", 3, "ngModelChange", "ngModel", "language", "autoFocus", "indentWithTab", "readonly", "placeholder"], [1, "error-message"], [1, "dialog-actions"], ["kendoButton", "", 3, "click", "themeColor"], ["kendoButton", "", 3, "click", "themeColor", "disabled"], [1, "fa-solid", "fa-file-import"], [1, "fa-solid", "fa-exclamation-triangle"]], template: function TextImportDialogComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h3");
            i0.ɵɵtext(3, "Import Component from Text");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(4, "p");
            i0.ɵɵtext(5, "Paste or type your component specification JSON below:");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(6, "div", 2)(7, "mj-code-editor", 3);
            i0.ɵɵtwoWayListener("ngModelChange", function TextImportDialogComponent_Template_mj_code_editor_ngModelChange_7_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.componentJson, $event) || (ctx.componentJson = $event); return $event; });
            i0.ɵɵelementEnd()();
            i0.ɵɵconditionalCreate(8, TextImportDialogComponent_Conditional_8_Template, 3, 1, "div", 4);
            i0.ɵɵelementStart(9, "div", 5)(10, "button", 6);
            i0.ɵɵlistener("click", function TextImportDialogComponent_Template_button_click_10_listener() { return ctx.cancel(); });
            i0.ɵɵtext(11, " Cancel ");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(12, "button", 7);
            i0.ɵɵlistener("click", function TextImportDialogComponent_Template_button_click_12_listener() { return ctx.import(); });
            i0.ɵɵelement(13, "i", 8);
            i0.ɵɵtext(14, " Import ");
            i0.ɵɵelementEnd()()();
        } if (rf & 2) {
            i0.ɵɵadvance(7);
            i0.ɵɵtwoWayProperty("ngModel", ctx.componentJson);
            i0.ɵɵproperty("language", "json")("autoFocus", true)("indentWithTab", true)("readonly", false)("placeholder", "Paste your component specification JSON here...");
            i0.ɵɵadvance();
            i0.ɵɵconditional(ctx.errorMessage ? 8 : -1);
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("themeColor", "base");
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("themeColor", "primary")("disabled", !ctx.componentJson);
        } }, dependencies: [i1.NgControlStatus, i1.NgModel, i2.ButtonComponent, i3.CodeEditorComponent], styles: [".text-import-dialog-content[_ngcontent-%COMP%] {\n      padding: 20px;\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    .dialog-header[_ngcontent-%COMP%] {\n      margin-bottom: 15px;\n    }\n\n    .dialog-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      margin: 0 0 10px 0;\n      color: var(--mj-text-primary);\n    }\n\n    .dialog-header[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      color: var(--mj-text-secondary);\n      font-size: 14px;\n    }\n\n    .editor-container[_ngcontent-%COMP%] {\n      flex: 1;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 4px;\n      overflow: hidden;\n      margin-bottom: 15px;\n    }\n\n    .error-message[_ngcontent-%COMP%] {\n      background-color: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      border: 1px solid var(--mj-status-error);\n      color: var(--mj-status-error);\n      padding: 10px;\n      border-radius: 4px;\n      margin-bottom: 15px;\n      font-size: 14px;\n    }\n\n    .error-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      margin-right: 8px;\n    }\n\n    .dialog-actions[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: flex-end;\n      gap: 10px;\n      padding-top: 15px;\n      border-top: 1px solid var(--mj-border-default);\n    }"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TextImportDialogComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'app-text-import-dialog', template: `
    <div class="text-import-dialog-content">
      <div class="dialog-header">
        <h3>Import Component from Text</h3>
        <p>Paste or type your component specification JSON below:</p>
      </div>
      
      <div class="editor-container">
        <mj-code-editor
          [(ngModel)]="componentJson"
          [language]="'json'"
          [autoFocus]="true"
          [indentWithTab]="true"
          [readonly]="false"
          [placeholder]="'Paste your component specification JSON here...'"
          style="height: 400px;">
        </mj-code-editor>
      </div>
      
      @if (errorMessage) {
        <div class="error-message">
          <i class="fa-solid fa-exclamation-triangle"></i>
          {{ errorMessage }}
        </div>
      }
      
      <div class="dialog-actions">
        <button kendoButton (click)="cancel()" [themeColor]="'base'">
          Cancel
        </button>
        <button kendoButton (click)="import()" [themeColor]="'primary'" [disabled]="!componentJson">
          <i class="fa-solid fa-file-import"></i> Import
        </button>
      </div>
    </div>
  `, styles: ["\n    .text-import-dialog-content {\n      padding: 20px;\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    .dialog-header {\n      margin-bottom: 15px;\n    }\n\n    .dialog-header h3 {\n      margin: 0 0 10px 0;\n      color: var(--mj-text-primary);\n    }\n\n    .dialog-header p {\n      margin: 0;\n      color: var(--mj-text-secondary);\n      font-size: 14px;\n    }\n\n    .editor-container {\n      flex: 1;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 4px;\n      overflow: hidden;\n      margin-bottom: 15px;\n    }\n\n    .error-message {\n      background-color: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      border: 1px solid var(--mj-status-error);\n      color: var(--mj-status-error);\n      padding: 10px;\n      border-radius: 4px;\n      margin-bottom: 15px;\n      font-size: 14px;\n    }\n\n    .error-message i {\n      margin-right: 8px;\n    }\n\n    .dialog-actions {\n      display: flex;\n      justify-content: flex-end;\n      gap: 10px;\n      padding-top: 15px;\n      border-top: 1px solid var(--mj-border-default);\n    }\n  "] }]
    }], null, { importSpec: [{
            type: Output
        }], cancelDialog: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TextImportDialogComponent, { className: "TextImportDialogComponent", filePath: "src/ComponentStudio/components/text-import-dialog.component.ts", lineNumber: 97 }); })();
//# sourceMappingURL=text-import-dialog.component.js.map