import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
import * as i3 from '@angular/cdk/drag-drop';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, effect, Component, HostBinding } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i4 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import { NgmThemeService, ButtonGroupDirective } from '@metad/ocap-angular/core';
import { EditorThemeMap } from '@metad/ocap-angular/formula';
import { isBlank } from '@metad/ocap-core';
import * as i2 from '@ngx-translate/core';
import { TranslateModule } from '@ngx-translate/core';
import * as i5 from 'ngx-monaco-editor';
import { MonacoEditorModule } from 'ngx-monaco-editor';
import { BehaviorSubject } from 'rxjs';

class NgmConfirmCodeEditorComponent {
    constructor() {
        this.themeService = inject(NgmThemeService);
        this.data = inject(DIALOG_DATA);
        this.dialogRef = inject(DialogRef);
        this.isDialogContainer = true;
        this.editor$ = new BehaviorSubject(null);
        this.editorOptions = {
            theme: 'vs',
            language: 'json',
            automaticLayout: true
        };
        this.statement = '';
        effect(() => {
            this.editorOptions = {
                ...this.editorOptions,
                theme: EditorThemeMap[this.themeService.themeClass()]
            };
        });
        this.editorOptions = {
            ...this.editorOptions,
            language: this.data?.language ?? this.editorOptions.language
        };
        this.onReset();
    }
    onReset() {
        this.statement =
            this.editorOptions.language === 'json' ? JSON.stringify(this.data.model || undefined, null, 2) : this.data.model;
    }
    onClear() {
        this.statement = null;
    }
    onApply() {
        this.data?.onApply?.(this.parse());
    }
    onOk() {
        this.dialogRef.close(this.parse());
    }
    onCancel() {
        this.dialogRef.close();
    }
    parse() {
        return this.editorOptions.language === 'json' && this.statement ? parse(this.statement) : this.statement;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmConfirmCodeEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NgmConfirmCodeEditorComponent, isStandalone: true, selector: "ngm-confirm-code-editor", host: { properties: { "class.ngm-dialog-container": "this.isDialogContainer" } }, ngImport: i0, template: "<div class=\"cursor-move\" cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle>\n  <h4 style=\"pointer-events: none;\">\n    {{ 'COMPONENTS.EDITOR.EDIT' | translate: {Default: \"Edit\"} }}\n  </h4>\n</div>\n\n<div class=\"mat-typography flex flex-col\">\n  <ngx-monaco-editor class=\"ngm-confirm__monaco-editor flex-1 h-full\"\n    [options]=\"editorOptions\"\n    [(ngModel)]=\"statement\"\n    (onInit)=\"editor$.next($event)\"\n  />\n</div>\n\n<div class=\"flex justify-between items-center\">\n  <div ngmButtonGroup>\n    <button mat-button (click)=\"onReset()\">\n      {{ 'COMPONENTS.COMMON.RESET' | translate: {Default: 'Reset'} }}\n    </button>\n    <button mat-button (click)=\"onClear()\">\n      {{ 'COMPONENTS.COMMON.CLEAR' | translate: {Default: 'Clear'} }}\n    </button>\n  </div>\n    \n  <div ngmButtonGroup>\n    <button mat-button (click)=\"onCancel()\">\n      {{ 'COMPONENTS.COMMON.CANCEL' | translate: {Default: 'Cancel'} }}\n    </button>\n    <button mat-button color=\"accent\" cdkFocusInitial (click)=\"onApply()\">\n      {{ 'COMPONENTS.COMMON.APPLY' | translate: {Default: 'Apply'} }}\n    </button>\n    <button mat-raised-button color=\"accent\" cdkFocusInitial (click)=\"onOk()\">\n      {{ 'COMPONENTS.COMMON.CONFIRM' | translate: {Default: 'Confirm'} }}\n    </button>\n  </div>\n</div>\n", styles: [".ngm-confirm__monaco-editor{width:calc(100% - 5px);height:400px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MonacoEditorModule }, { kind: "component", type: i5.EditorComponent, selector: "ngx-monaco-editor", inputs: ["options", "model"] }, { kind: "directive", type: ButtonGroupDirective, selector: "[ngmButtonGroup]" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmConfirmCodeEditorComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, imports: [CommonModule, FormsModule, TranslateModule, DragDropModule, MatButtonModule, MonacoEditorModule, ButtonGroupDirective], selector: 'ngm-confirm-code-editor', template: "<div class=\"cursor-move\" cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle>\n  <h4 style=\"pointer-events: none;\">\n    {{ 'COMPONENTS.EDITOR.EDIT' | translate: {Default: \"Edit\"} }}\n  </h4>\n</div>\n\n<div class=\"mat-typography flex flex-col\">\n  <ngx-monaco-editor class=\"ngm-confirm__monaco-editor flex-1 h-full\"\n    [options]=\"editorOptions\"\n    [(ngModel)]=\"statement\"\n    (onInit)=\"editor$.next($event)\"\n  />\n</div>\n\n<div class=\"flex justify-between items-center\">\n  <div ngmButtonGroup>\n    <button mat-button (click)=\"onReset()\">\n      {{ 'COMPONENTS.COMMON.RESET' | translate: {Default: 'Reset'} }}\n    </button>\n    <button mat-button (click)=\"onClear()\">\n      {{ 'COMPONENTS.COMMON.CLEAR' | translate: {Default: 'Clear'} }}\n    </button>\n  </div>\n    \n  <div ngmButtonGroup>\n    <button mat-button (click)=\"onCancel()\">\n      {{ 'COMPONENTS.COMMON.CANCEL' | translate: {Default: 'Cancel'} }}\n    </button>\n    <button mat-button color=\"accent\" cdkFocusInitial (click)=\"onApply()\">\n      {{ 'COMPONENTS.COMMON.APPLY' | translate: {Default: 'Apply'} }}\n    </button>\n    <button mat-raised-button color=\"accent\" cdkFocusInitial (click)=\"onOk()\">\n      {{ 'COMPONENTS.COMMON.CONFIRM' | translate: {Default: 'Confirm'} }}\n    </button>\n  </div>\n</div>\n", styles: [".ngm-confirm__monaco-editor{width:calc(100% - 5px);height:400px}\n"] }]
        }], ctorParameters: () => [], propDecorators: { isDialogContainer: [{
                type: HostBinding,
                args: ['class.ngm-dialog-container']
            }] } });
/**
 */
function parse(value) {
    return isBlank(value) ? null : JSON.parse(value);
}

/**
 * Generated bundle index. Do not edit.
 */

export { NgmConfirmCodeEditorComponent };
//# sourceMappingURL=metad-ocap-angular-editor.mjs.map
