import { Component, ChangeDetectionStrategy, Inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { MatDialogModule } from '@angular/material/dialog';
import { TitledDialogService, TITLED_DIALOG_DATA } from '@anglr/common/material';
import { FormModelBuilder } from '@anglr/common/forms';
import { CodeEditorDialogComponent, getJson, JsonLanguageModel } from '@anglr/dynamic';
import { extend, isPresent } from '@jscrpt/common';
import { lastValueFrom } from '@jscrpt/common/rxjs';
import { RestParamModel } from './configureRestParameter.model';
import * as i0 from "@angular/core";
import * as i1 from "@anglr/common/material";
import * as i2 from "@anglr/common/forms";
import * as i3 from "@angular/common";
import * as i4 from "@angular/forms";
import * as i5 from "@angular/material/dialog";
/**
 * Component used for displaying configuration of rest parameters
 */
export class ConfigureRestParameterSAComponent {
    //######################### constructor #########################
    constructor(data, dialog, formModelBuilder) {
        this.data = data;
        this.dialog = dialog;
        this.form = formModelBuilder.build(new RestParamModel(data.parameter));
        this.form.valueChanges.subscribe(value => extend(data.parameter, value));
    }
    //######################### protected methods - template bindings #########################
    /**
     * Shows code editor
     */
    async showCodeEditor() {
        const content = isPresent(this.data.parameter.value) ? JSON.stringify(this.data.parameter.value, null, 4) : '';
        const result = await lastValueFrom(this.dialog.open(CodeEditorDialogComponent, {
            title: 'Code editor',
            width: '75vw',
            height: '75vh',
            data: {
                content,
                languageModel: JsonLanguageModel,
            }
        }).afterClosed());
        if (isPresent(result)) {
            this.data.parameter.value = getJson(result.content);
        }
    }
}
ConfigureRestParameterSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ConfigureRestParameterSAComponent, deps: [{ token: TITLED_DIALOG_DATA }, { token: i1.TitledDialogService }, { token: i2.FormModelBuilder }], target: i0.ɵɵFactoryTarget.Component });
ConfigureRestParameterSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: ConfigureRestParameterSAComponent, isStandalone: true, selector: "configure-rest-parameter", providers: [
        FormModelBuilder,
    ], ngImport: i0, template: "<div [formGroup]=\"form\">\n    <div class=\"dynamic-form-group dynamic-margin-bottom-extra-small\">\n        <label class=\"dynamic-control-label dynamic-text-uppercase\">type</label>\n\n        <select class=\"dynamic-form-control\" formControlName=\"type\">\n            <option value=\"BODY\" *ngIf=\"!data.hasBody\">BODY</option>\n            <option value=\"PATH\">PATH</option>\n            <option value=\"QUERY\">QUERY</option>\n            <option value=\"QUERY OBJECT\">QUERY OBJECT</option>\n            <option value=\"HEADER\">HEADER</option>\n        </select>\n    </div>\n\n    <div class=\"dynamic-form-group dynamic-margin-bottom-extra-small\">\n        <label class=\"dynamic-control-label dynamic-text-uppercase\">name</label>\n        <input type=\"text\" class=\"dynamic-form-control\" formControlName=\"name\">\n    </div>\n\n    <div class=\"dynamic-flex-column dynamic-margin-bottom-extra-small\">\n        <button type=\"button\" class=\"dynamic-btn dynamic-btn-primary dynamic-align-self-center\" (click)=\"showCodeEditor()\">\n            <span>value</span>\n        </button>\n    </div>\n\n    <div class=\"dynamic-form-group dynamic-margin-bottom-extra-small\">\n        <label class=\"dynamic-control-label dynamic-text-uppercase\">configurable</label>\n        <input type=\"checkbox\" class=\"dynamic-form-control\" formControlName=\"configurable\">\n    </div>\n</div>\n\n<div class=\"dynamic-flex-row dynamic-flex-end dynamic-action-buttons\">\n    <button type=\"button\" class=\"dynamic-btn dynamic-btn-info dynamic-margin-right-extra-small\" [mat-dialog-close]=\"null\">\n        <span>cancel</span>\n    </button>\n\n    <button type=\"button\" class=\"dynamic-btn dynamic-btn-primary\" [mat-dialog-close]=\"true\">\n        <span>ok</span>\n    </button>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i5.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ConfigureRestParameterSAComponent, decorators: [{
            type: Component,
            args: [{ selector: 'configure-rest-parameter', standalone: true, imports: [
                        CommonModule,
                        ReactiveFormsModule,
                        MatDialogModule,
                    ], providers: [
                        FormModelBuilder,
                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [formGroup]=\"form\">\n    <div class=\"dynamic-form-group dynamic-margin-bottom-extra-small\">\n        <label class=\"dynamic-control-label dynamic-text-uppercase\">type</label>\n\n        <select class=\"dynamic-form-control\" formControlName=\"type\">\n            <option value=\"BODY\" *ngIf=\"!data.hasBody\">BODY</option>\n            <option value=\"PATH\">PATH</option>\n            <option value=\"QUERY\">QUERY</option>\n            <option value=\"QUERY OBJECT\">QUERY OBJECT</option>\n            <option value=\"HEADER\">HEADER</option>\n        </select>\n    </div>\n\n    <div class=\"dynamic-form-group dynamic-margin-bottom-extra-small\">\n        <label class=\"dynamic-control-label dynamic-text-uppercase\">name</label>\n        <input type=\"text\" class=\"dynamic-form-control\" formControlName=\"name\">\n    </div>\n\n    <div class=\"dynamic-flex-column dynamic-margin-bottom-extra-small\">\n        <button type=\"button\" class=\"dynamic-btn dynamic-btn-primary dynamic-align-self-center\" (click)=\"showCodeEditor()\">\n            <span>value</span>\n        </button>\n    </div>\n\n    <div class=\"dynamic-form-group dynamic-margin-bottom-extra-small\">\n        <label class=\"dynamic-control-label dynamic-text-uppercase\">configurable</label>\n        <input type=\"checkbox\" class=\"dynamic-form-control\" formControlName=\"configurable\">\n    </div>\n</div>\n\n<div class=\"dynamic-flex-row dynamic-flex-end dynamic-action-buttons\">\n    <button type=\"button\" class=\"dynamic-btn dynamic-btn-info dynamic-margin-right-extra-small\" [mat-dialog-close]=\"null\">\n        <span>cancel</span>\n    </button>\n\n    <button type=\"button\" class=\"dynamic-btn dynamic-btn-primary\" [mat-dialog-close]=\"true\">\n        <span>ok</span>\n    </button>\n</div>" }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [TITLED_DIALOG_DATA]
                }] }, { type: i1.TitledDialogService }, { type: i2.FormModelBuilder }] });
//# sourceMappingURL=configureRestParameter.component.js.map