@asoftwareworld/form-builder-pro
Version:
ASW Form Builder Pro helps you with rapid development and designed web forms which includes several controls. The key feature of Form Builder is to make your content attractive and effective. We can customize our control at run time and preview the same b
319 lines • 111 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Validators } from '@angular/forms';
import { CSSFrameworkEnum } from '@asoftwareworld/form-builder-pro/api';
import { ObjectUtils } from '@asoftwareworld/form-builder-pro/utils';
import { map, startWith } from 'rxjs/operators';
import { Constants } from '../../constant/constants';
import { Icons } from './../../constant/icons';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "../../service/api.service";
import * as i3 from "@angular/common";
import * as i4 from "@angular/material/autocomplete";
import * as i5 from "@angular/material/core";
import * as i6 from "@angular/material/button";
import * as i7 from "@angular/material/card";
import * as i8 from "@angular/material/input";
import * as i9 from "@angular/material/form-field";
import * as i10 from "@angular/cdk/text-field";
import * as i11 from "@angular/material/progress-bar";
import * as i12 from "@angular/material/radio";
import * as i13 from "@angular/material/select";
import * as i14 from "@angular/material/tabs";
import * as i15 from "@angular/material/tooltip";
import * as i16 from "@angular/material/icon";
import * as i17 from "../../directive/text-editable.directive";
import * as i18 from "@asoftwareworld/form-builder-pro/core";
import * as i19 from "../../pipe/safe-html.pipe";
export class AswApiParams {
formBuilder;
aswApiService;
aswApiParamsForm;
icons = Icons;
openIDBrequest;
indexedDB;
CSSFramework = CSSFrameworkEnum.Material;
newRequest = new EventEmitter();
apiResponse = new EventEmitter();
bodyType = 'none';
responseData;
responseError;
endpointError;
loadingState;
constants = Constants;
filteredHeaderKeys = [];
objectUtils = ObjectUtils;
endpoint = 'Untitled Request';
isEndpointDisabled = true;
constructor(formBuilder, aswApiService) {
this.formBuilder = formBuilder;
this.aswApiService = aswApiService;
this.aswApiParamsForm = this.formBuilder.group({
id: [],
apiUrl: ['', [Validators.required]],
method: ['GET', [Validators.required]],
bodyType: ['none'],
headers: this.initHeaders(),
bodyFormData: this.formBuilder.array([this.createBodyFormData()]),
jsonData: ['']
});
this.endpointError = '';
this.loadingState = false;
}
get headers() {
return this.aswApiParamsForm.get('headers');
}
get bodyFormData() {
return this.aswApiParamsForm.get('bodyFormData');
}
initHeaders() {
const formArray = this.formBuilder.array([this.createHeader()]);
// formArray.push(this.createHeader());
return formArray;
}
ManageHeadersControl(index) {
const arrayControl = this.aswApiParamsForm.get('headers');
const keyValue = arrayControl.at(index).get('key');
if (keyValue) {
this.filteredHeaderKeys[index] = keyValue.valueChanges.pipe(startWith(''), map((value) => (typeof value === 'string' ? value : value.key)), map((name) => (name ? this._filter(name) : this.constants.apiHeaderKeys.slice())));
}
}
createHeader() {
return this.formBuilder.group({
key: [''],
value: ['']
});
}
addNewHeader() {
const controls = this.aswApiParamsForm.controls.headers;
const formGroup = this.createHeader();
controls.push(formGroup);
// Build the account Auto Complete values
this.ManageHeadersControl(controls.length - 1);
}
removeHeader(index) {
const controls = this.aswApiParamsForm.controls.headers;
controls.removeAt(index);
// remove from filteredOptions too.
this.filteredHeaderKeys.splice(index, 1);
this.headers.removeAt(index);
}
createBodyFormData() {
return this.formBuilder.group({
key: [''],
value: [''],
dataType: ['String']
});
}
addNewBodyFormData() {
this.bodyFormData.push(this.createBodyFormData());
}
removeBodyFormData(index) {
this.bodyFormData.removeAt(index);
}
ngOnInit() {
this.ManageHeadersControl(0);
this.aswApiParamsForm.get('apiUrl')?.valueChanges.subscribe((apiUrl) => {
if (!this.endpoint || this.endpoint === 'Untitled Request' || this.endpoint.includes('http')) {
this.endpoint = apiUrl;
this.isEndpointDisabled = apiUrl ? false : true;
}
});
this.aswApiParamsForm.get('bodyType')?.valueChanges.subscribe((type) => {
this.bodyType = type;
});
}
_filter(name) {
const filterValue = name.toLowerCase();
return this.constants.apiHeaderKeys.filter((header) => header.toLowerCase().includes(filterValue));
}
saveWorkspaceRequest() {
const requestObject = {
endpoint: this.endpoint,
apiUrl: this.aswApiParamsForm.value.apiUrl,
method: this.aswApiParamsForm.value.method,
headers: this.constructObject('Headers'),
bodyType: this.bodyType,
body: this.constructObject('Body')
};
const transaction = this.indexedDB.transaction('myWorkspace', 'readwrite');
const myWorkspaceStore = transaction.objectStore('myWorkspace');
if (this.aswApiParamsForm.value.id) {
(requestObject._id = this.aswApiParamsForm.value.id), myWorkspaceStore.put(requestObject);
}
else {
myWorkspaceStore.add(requestObject);
}
this.newRequest.emit();
this.isEndpointDisabled = true;
}
validateUrl(text) {
// tslint:disable-next-line: max-line-length
const urlRegExp = /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/gm;
return urlRegExp.test(text);
}
constructObject(ctx) {
let context;
if (ctx === 'Body') {
context = this.aswApiParamsForm.value.bodyFormData;
}
else if (ctx === 'Headers') {
context = this.aswApiParamsForm.value.headers;
}
let constructedObject = {};
if (this.bodyType === 'form-data' || ctx === 'Headers') {
constructedObject = context.reduce((object, item) => {
if (item.key) {
object[item.key] = item.value;
return object;
}
}, {});
return constructedObject;
}
else if (this.bodyType === 'json-data') {
return JSON.parse(this.aswApiParamsForm.value.jsonData ? this.aswApiParamsForm.value.jsonData : '{}');
}
}
loadWorkspaceRequest(request) {
this.endpoint = request.endpoint;
this.aswApiParamsForm.patchValue({
id: request._id,
apiUrl: request.apiUrl,
method: request.method,
bodyType: request.bodyType,
jsonData: request.bodyType === 'json-data' ? JSON.stringify(request.body, undefined, 4) : ''
});
if (request.headers) {
this.aswApiParamsForm.patchValue({
headers: this.deconstructObject(request.headers, 'Headers')
});
}
if (request.bodyType === 'form-data') {
this.aswApiParamsForm.patchValue({
bodyFormData: this.deconstructObject(request.body, 'Body')
});
}
this.isEndpointDisabled = true;
}
deconstructObject(object, type) {
const objectArray = [];
switch (type) {
case 'Body': {
Object.keys(object).forEach((objKey) => {
const obj = { key: objKey, value: object[objKey] };
objectArray.push(obj);
});
break;
}
case 'Headers': {
Object.keys(object).forEach((objKey) => {
const obj = { key: objKey, value: object[objKey] };
objectArray.push(obj);
});
break;
}
}
return objectArray;
}
onSubmit() {
this.endpointError = '';
this.responseData = '';
this.responseError = '';
if (this.aswApiParamsForm.invalid) {
this.endpointError = 'Endpoint is a Required value';
return;
}
// if (!this.validateUrl(this.aswApiParamsForm)) {
// this.endpointError = 'Please enter a valid URL';
// return;
// }
this.loadingState = true;
switch (this.aswApiParamsForm.value.method) {
case 'GET': {
this.aswApiService.get(this.aswApiParamsForm.value.apiUrl, this.constructObject('Headers')).subscribe({
next: (data) => {
this.setDataResponse(data);
},
error: (error) => {
this.setErrorResponse(error);
}
});
break;
}
case 'POST': {
this.aswApiService.post(this.aswApiParamsForm.value.apiUrl, this.constructObject('Body'), this.constructObject('Headers')).subscribe({
next: (data) => {
this.setDataResponse(data);
},
error: (error) => {
this.setErrorResponse(error);
}
});
break;
}
case 'PUT': {
this.aswApiService.put(this.aswApiParamsForm.value.apiUrl, this.constructObject('Body'), this.constructObject('Headers')).subscribe({
next: (data) => {
this.setDataResponse(data);
},
error: (error) => {
this.setErrorResponse(error);
}
});
break;
}
case 'PATCH': {
this.aswApiService.patch(this.aswApiParamsForm.value.apiUrl, this.constructObject('Body'), this.constructObject('Headers')).subscribe({
next: (data) => {
this.setDataResponse(data);
},
error: (error) => {
this.setErrorResponse(error);
}
});
break;
}
case 'DELETE': {
this.aswApiService.delete(this.aswApiParamsForm.value.apiUrl, this.constructObject('Headers')).subscribe({
next: (data) => {
this.setDataResponse(data);
},
error: (error) => {
this.setErrorResponse(error);
}
});
break;
}
}
}
setDataResponse(data) {
this.loadingState = false;
this.responseData = JSON.stringify(data, undefined, 4);
const apiData = {
responseData: data,
method: this.aswApiParamsForm.value.method,
headers: this.constructObject('Headers'),
body: this.constructObject('Body'),
apiUrl: this.aswApiParamsForm.value.apiUrl
};
this.apiResponse.emit(apiData);
}
setErrorResponse(error) {
this.loadingState = false;
this.responseData = JSON.stringify(error, undefined, 4);
}
onChange(value) {
if (!value) {
this.isEndpointDisabled = true;
this.endpoint = 'Untitled Request';
}
else {
this.isEndpointDisabled = false;
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswApiParams, deps: [{ token: i1.FormBuilder }, { token: i2.AswApiService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: AswApiParams, selector: "asw-api-communicator-params", inputs: { openIDBrequest: "openIDBrequest", indexedDB: "indexedDB", CSSFramework: "CSSFramework" }, outputs: { newRequest: "newRequest", apiResponse: "apiResponse" }, ngImport: i0, template: "<div class=\"asw-p-2\">\r\n <div class=\"asw-row\">\r\n <div class=\"asw-col-md-10\">\r\n <div asw-text-editable\r\n #endpointDiv=\"ngModel\"\r\n (ngModelChange)=\"onChange($event)\"\r\n [(ngModel)]=\"endpoint\">\r\n <strong>{{endpoint}}</strong>\r\n </div>\r\n </div>\r\n <div class=\"asw-col-md-2\" align=\"right\">\r\n <button mat-stroked-button type=\"button\" [disabled]=\"isEndpointDisabled\" (click)=\"saveWorkspaceRequest()\">\r\n {{'FormControl.Save' | aswTranslate}}\r\n </button>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"aswApiParamsForm\" (ngSubmit)=\"onSubmit()\">\r\n <div class=\"asw-row asw-mt-3\">\r\n <ng-container *ngIf=\"CSSFramework === 'material'; else bootstrap\">\r\n <div class=\"asw-col-xl-3 asw-col-lg-3 asw-col-md-3 asw-col-sm-3 asw-col-xs-3\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.Method' | aswTranslate}}</mat-label>\r\n <mat-select formControlName=\"method\" required>\r\n <mat-option *ngFor=\"let method of constants.apiRequestMethods\" [value]=\"method\">\r\n {{ method }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"asw-col-xl-9 asw-col-lg-9 asw-col-md-9 asw-col-sm-9 asw-col-xs-9\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.EnterRequestURL' | aswTranslate}}</mat-label>\r\n <input type=\"url\" \r\n matInput\r\n pattern=\"https?://.+\"\r\n placeholder=\"{{'FormControl.EnterRequestURL' | aswTranslate}}\"\r\n formControlName=\"apiUrl\"\r\n required>\r\n <mat-icon *ngIf=\"aswApiParamsForm.get('apiUrl')?.invalid && (aswApiParamsForm.get('apiUrl')?.dirty || aswApiParamsForm.get('apiUrl')?.touched)\"\r\n class=\"asw-error\" matSuffix>error</mat-icon>\r\n <mat-error *ngFor=\"let validation of constants.accountValidationMessages.apiUrl\">\r\n <ng-container *ngIf=\"aswApiParamsForm.get('apiUrl')?.hasError(validation.type) && (aswApiParamsForm.get('apiUrl')?.dirty || aswApiParamsForm.get('apiUrl')?.touched)\">\r\n {{validation.message | aswTranslate}}\r\n </ng-container>\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n <ng-template #bootstrap>\r\n <div class=\"asw-col-xl-3 asw-col-lg-3 asw-col-md-3 asw-col-sm-3 asw-col-xs-3\">\r\n <div class=\"asw-mb-3\">\r\n <label class=\"asw-input-label\">{{'FormControl.Method' | aswTranslate}}</label>\r\n <select formControlName=\"method\" class=\"asw-select\" required>\r\n <option *ngFor=\"let method of constants.apiRequestMethods\" [value]=\"method\">\r\n {{ method }}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"asw-col-xl-9 asw-col-lg-9 asw-col-md-9 asw-col-sm-9 asw-col-xs-9\">\r\n <div class=\"asw-mb-3\">\r\n <label class=\"asw-input-label asw-invalid-label {{(aswApiParamsForm.get('apiUrl')?.invalid && (aswApiParamsForm.get('apiUrl')?.dirty || aswApiParamsForm.get('apiUrl')?.touched)) ? 'asw-red-color' : ''}}\">{{'FormControl.EnterRequestURL' | aswTranslate}}</label>\r\n <input type=\"url\"\r\n pattern=\"https?://.+\"\r\n class=\"asw-input-control\"\r\n [class.asw-is-invalid]=\"(aswApiParamsForm.get('apiUrl')?.invalid && (aswApiParamsForm.get('apiUrl')?.dirty || aswApiParamsForm.get('apiUrl')?.touched))\"\r\n placeholder=\"{{'FormControl.EnterRequestURL' | aswTranslate}}\"\r\n formControlName=\"apiUrl\"\r\n required>\r\n <div *ngFor=\"let validation of constants.accountValidationMessages.apiUrl\" class=\"invalid-feedback\">\r\n <ng-container *ngIf=\"aswApiParamsForm.get('apiUrl')?.hasError(validation.type) && (aswApiParamsForm.get('apiUrl')?.dirty || aswApiParamsForm.get('apiUrl')?.touched)\">\r\n {{validation.message | aswTranslate}}\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template> \r\n </div>\r\n <section class=\"requestBody\">\r\n <mat-tab-group dynamicHeight mat-stretch-tabs=\"false\">\r\n <mat-tab label=\"{{'FormControl.Headers' | aswTranslate}}\">\r\n <div class=\"asw-row asw-mt-2\">\r\n <div class=\"asw-col-md-12\">\r\n <table class=\"asw-table asw-table-sm asw-table-bordered\">\r\n <thead>\r\n <tr>\r\n <th>{{'FormControl.Key' | aswTranslate}}</th>\r\n <th>{{'FormControl.Value' | aswTranslate}}</th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container formArrayName=\"headers\">\r\n <tr *ngFor=\"let header of headers.controls; let index = index; let last=last;\" \r\n [formGroupName]=\"index\">\r\n <td>\r\n <input class=\"asw-input-control\" formControlName=\"key\" [matAutocomplete]=\"headerKey\">\r\n <mat-autocomplete #headerKey=\"matAutocomplete\">\r\n <mat-option *ngFor=\"let header of filteredHeaderKeys[index] | async\" [value]=\"header\">\r\n {{ header }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n </td>\r\n <td>\r\n <input class=\"asw-input-control\" type=\"text\" formControlName=\"value\">\r\n </td>\r\n <td class=\"asw-text-center\">\r\n <button mat-icon-button *ngIf=\"index != 0\"\r\n type=\"button\" \r\n matTooltip=\"{{'FormControl.Delete' | aswTranslate}}\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"removeHeader(index)\">\r\n <span [innerHTML]=\"icons.delete2 | aswSafeHtml\"></span>\r\n </button>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n <tr>\r\n <td colspan=\"3\">\r\n <button class=\"asw-button asw-button-sm asw-button-primary\"\r\n type=\"button\" \r\n matTooltip=\"{{'FormControl.Add' | aswTranslate}}\" \r\n [matTooltipPosition]=\"'below'\"\r\n (click)=\"addNewHeader()\">\r\n <span class=\"asw-icon asw-me-1\" [innerHTML]=\"icons.add | aswSafeHtml\"></span>\r\n {{'FormControl.AddOption' | aswTranslate}}\r\n </button>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </mat-tab>\r\n <mat-tab label=\"{{'FormControl.Body' | aswTranslate}}\">\r\n <div class=\"asw-row\">\r\n <div class=\"asw-col-md-12 asw-mt-2\">\r\n <section class=\"asw-section\">\r\n <mat-radio-group color=\"primary\"\r\n formControlName=\"bodyType\">\r\n <mat-radio-button class=\"asw-margin\" *ngFor=\"let type of constants.apiBodyType\" \r\n [value]=\"type\">\r\n {{ type }}\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n </section>\r\n </div>\r\n </div>\r\n <div class=\"asw-mt-2\">\r\n <ng-container *ngIf=\"bodyType === 'form-data'\">\r\n <div class=\"asw-row\">\r\n <div class=\"asw-col-md-12\">\r\n <table class=\"asw-table asw-table-sm asw-table-bordered\">\r\n <thead>\r\n <tr>\r\n <th>{{'FormControl.Key' | aswTranslate}}</th>\r\n <th>{{'FormControl.Value' | aswTranslate}}</th>\r\n <th>{{'FormControl.DataType' | aswTranslate}}</th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container formArrayName=\"bodyFormData\">\r\n <tr *ngFor=\"let b of bodyFormData.controls; let index = index; let last=last;\" \r\n [formGroupName]=\"index\">\r\n <td>\r\n <input class=\"asw-input-control\" type=\"text\" formControlName=\"key\">\r\n </td>\r\n <td>\r\n <ng-container *ngIf=\"bodyFormData.controls[index].value.dataType === 'String'\">\r\n <input class=\"asw-input-control\" type=\"text\" formControlName=\"value\">\r\n </ng-container>\r\n <ng-container *ngIf=\"bodyFormData.controls[index].value.dataType === 'Number'\">\r\n <input class=\"asw-input-control\" type=\"text\" formControlName=\"value\"\r\n (keypress)=\"objectUtils.keyPressNumbersWithDecimal($event)\">\r\n </ng-container>\r\n <ng-container *ngIf=\"bodyFormData.controls[index].value.dataType === 'Boolean'\">\r\n <select formControlName=\"value\" class=\"asw-select\">\r\n <option value=\"true\">True</option>\r\n <option value=\"false\">False</option>\r\n </select>\r\n </ng-container>\r\n </td>\r\n <td>\r\n <select formControlName=\"dataType\" class=\"asw-select\">\r\n <option *ngFor=\"let type of constants.dataTypes\" [value]=\"type\">{{type}}</option>\r\n </select>\r\n </td>\r\n <td class=\"asw-text-center\">\r\n <button mat-icon-button *ngIf=\"index != 0\"\r\n type=\"button\" \r\n matTooltip=\"{{'FormControl.Delete' | aswTranslate}}\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"removeBodyFormData(index)\">\r\n <span [innerHTML]=\"icons.delete2 | aswSafeHtml\"></span>\r\n </button>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n <tr>\r\n <td colspan=\"4\">\r\n <button class=\"asw-button asw-button-primary asw-button-sm\"\r\n type=\"button\" \r\n matTooltip=\"{{'FormControl.Add' | aswTranslate}}\" \r\n [matTooltipPosition]=\"'below'\"\r\n (click)=\"addNewBodyFormData()\">\r\n <span class=\"asw-icon asw-me-1\" [innerHTML]=\"icons.add | aswSafeHtml\"></span>\r\n {{'FormControl.AddOption' | aswTranslate}}\r\n </button>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"bodyType === 'json-data'\">\r\n <div class=\"asw-row\">\r\n <div class=\"asw-col-md-12\">\r\n <mat-form-field class=\"asw-width-100\" appearance=\"outline\">\r\n <textarea matInput\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"18\"\r\n cdkAutosizeMaxRows=\"100\"\r\n formControlName=\"jsonData\">\r\n </textarea>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </mat-tab>\r\n </mat-tab-group>\r\n </section>\r\n <button mat-flat-button type=\"submit\" color=\"primary\">\r\n {{'FormControl.SendRequest' | aswTranslate}}\r\n </button>\r\n <div class=\"asw-pt-2\">\r\n <mat-progress-bar *ngIf=\"loadingState\" mode=\"indeterminate\"></mat-progress-bar>\r\n <mat-card class=\"asw-border\" *ngIf=\"responseData || responseError\">\r\n <mat-card-title>{{'FormControl.Response' | aswTranslate}}</mat-card-title>\r\n <mat-card-content class=\"asw-pt-2\">\r\n <pre *ngIf=\"responseData\" style=\"color: green; white-space: pre-wrap;\">{{ responseData }}</pre>\r\n <pre *ngIf=\"responseError\" style=\"color: red; white-space: pre-wrap;\">{{ responseError }}</pre>\r\n </mat-card-content>\r\n </mat-card>\r\n </div>\r\n </form>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i7.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i10.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: i11.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i12.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i12.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i13.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i14.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i14.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i15.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i16.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i17.AswTextEditable, selector: "[asw-text-editable]" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i18.AswTranslatePipe, name: "aswTranslate" }, { kind: "pipe", type: i19.AswSafeHtmlPipe, name: "aswSafeHtml" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswApiParams, decorators: [{
type: Component,
args: [{ selector: 'asw-api-communicator-params', template: "<div class=\"asw-p-2\">\r\n <div class=\"asw-row\">\r\n <div class=\"asw-col-md-10\">\r\n <div asw-text-editable\r\n #endpointDiv=\"ngModel\"\r\n (ngModelChange)=\"onChange($event)\"\r\n [(ngModel)]=\"endpoint\">\r\n <strong>{{endpoint}}</strong>\r\n </div>\r\n </div>\r\n <div class=\"asw-col-md-2\" align=\"right\">\r\n <button mat-stroked-button type=\"button\" [disabled]=\"isEndpointDisabled\" (click)=\"saveWorkspaceRequest()\">\r\n {{'FormControl.Save' | aswTranslate}}\r\n </button>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"aswApiParamsForm\" (ngSubmit)=\"onSubmit()\">\r\n <div class=\"asw-row asw-mt-3\">\r\n <ng-container *ngIf=\"CSSFramework === 'material'; else bootstrap\">\r\n <div class=\"asw-col-xl-3 asw-col-lg-3 asw-col-md-3 asw-col-sm-3 asw-col-xs-3\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.Method' | aswTranslate}}</mat-label>\r\n <mat-select formControlName=\"method\" required>\r\n <mat-option *ngFor=\"let method of constants.apiRequestMethods\" [value]=\"method\">\r\n {{ method }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"asw-col-xl-9 asw-col-lg-9 asw-col-md-9 asw-col-sm-9 asw-col-xs-9\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.EnterRequestURL' | aswTranslate}}</mat-label>\r\n <input type=\"url\" \r\n matInput\r\n pattern=\"https?://.+\"\r\n placeholder=\"{{'FormControl.EnterRequestURL' | aswTranslate}}\"\r\n formControlName=\"apiUrl\"\r\n required>\r\n <mat-icon *ngIf=\"aswApiParamsForm.get('apiUrl')?.invalid && (aswApiParamsForm.get('apiUrl')?.dirty || aswApiParamsForm.get('apiUrl')?.touched)\"\r\n class=\"asw-error\" matSuffix>error</mat-icon>\r\n <mat-error *ngFor=\"let validation of constants.accountValidationMessages.apiUrl\">\r\n <ng-container *ngIf=\"aswApiParamsForm.get('apiUrl')?.hasError(validation.type) && (aswApiParamsForm.get('apiUrl')?.dirty || aswApiParamsForm.get('apiUrl')?.touched)\">\r\n {{validation.message | aswTranslate}}\r\n </ng-container>\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n <ng-template #bootstrap>\r\n <div class=\"asw-col-xl-3 asw-col-lg-3 asw-col-md-3 asw-col-sm-3 asw-col-xs-3\">\r\n <div class=\"asw-mb-3\">\r\n <label class=\"asw-input-label\">{{'FormControl.Method' | aswTranslate}}</label>\r\n <select formControlName=\"method\" class=\"asw-select\" required>\r\n <option *ngFor=\"let method of constants.apiRequestMethods\" [value]=\"method\">\r\n {{ method }}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"asw-col-xl-9 asw-col-lg-9 asw-col-md-9 asw-col-sm-9 asw-col-xs-9\">\r\n <div class=\"asw-mb-3\">\r\n <label class=\"asw-input-label asw-invalid-label {{(aswApiParamsForm.get('apiUrl')?.invalid && (aswApiParamsForm.get('apiUrl')?.dirty || aswApiParamsForm.get('apiUrl')?.touched)) ? 'asw-red-color' : ''}}\">{{'FormControl.EnterRequestURL' | aswTranslate}}</label>\r\n <input type=\"url\"\r\n pattern=\"https?://.+\"\r\n class=\"asw-input-control\"\r\n [class.asw-is-invalid]=\"(aswApiParamsForm.get('apiUrl')?.invalid && (aswApiParamsForm.get('apiUrl')?.dirty || aswApiParamsForm.get('apiUrl')?.touched))\"\r\n placeholder=\"{{'FormControl.EnterRequestURL' | aswTranslate}}\"\r\n formControlName=\"apiUrl\"\r\n required>\r\n <div *ngFor=\"let validation of constants.accountValidationMessages.apiUrl\" class=\"invalid-feedback\">\r\n <ng-container *ngIf=\"aswApiParamsForm.get('apiUrl')?.hasError(validation.type) && (aswApiParamsForm.get('apiUrl')?.dirty || aswApiParamsForm.get('apiUrl')?.touched)\">\r\n {{validation.message | aswTranslate}}\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template> \r\n </div>\r\n <section class=\"requestBody\">\r\n <mat-tab-group dynamicHeight mat-stretch-tabs=\"false\">\r\n <mat-tab label=\"{{'FormControl.Headers' | aswTranslate}}\">\r\n <div class=\"asw-row asw-mt-2\">\r\n <div class=\"asw-col-md-12\">\r\n <table class=\"asw-table asw-table-sm asw-table-bordered\">\r\n <thead>\r\n <tr>\r\n <th>{{'FormControl.Key' | aswTranslate}}</th>\r\n <th>{{'FormControl.Value' | aswTranslate}}</th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container formArrayName=\"headers\">\r\n <tr *ngFor=\"let header of headers.controls; let index = index; let last=last;\" \r\n [formGroupName]=\"index\">\r\n <td>\r\n <input class=\"asw-input-control\" formControlName=\"key\" [matAutocomplete]=\"headerKey\">\r\n <mat-autocomplete #headerKey=\"matAutocomplete\">\r\n <mat-option *ngFor=\"let header of filteredHeaderKeys[index] | async\" [value]=\"header\">\r\n {{ header }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n </td>\r\n <td>\r\n <input class=\"asw-input-control\" type=\"text\" formControlName=\"value\">\r\n </td>\r\n <td class=\"asw-text-center\">\r\n <button mat-icon-button *ngIf=\"index != 0\"\r\n type=\"button\" \r\n matTooltip=\"{{'FormControl.Delete' | aswTranslate}}\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"removeHeader(index)\">\r\n <span [innerHTML]=\"icons.delete2 | aswSafeHtml\"></span>\r\n </button>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n <tr>\r\n <td colspan=\"3\">\r\n <button class=\"asw-button asw-button-sm asw-button-primary\"\r\n type=\"button\" \r\n matTooltip=\"{{'FormControl.Add' | aswTranslate}}\" \r\n [matTooltipPosition]=\"'below'\"\r\n (click)=\"addNewHeader()\">\r\n <span class=\"asw-icon asw-me-1\" [innerHTML]=\"icons.add | aswSafeHtml\"></span>\r\n {{'FormControl.AddOption' | aswTranslate}}\r\n </button>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </mat-tab>\r\n <mat-tab label=\"{{'FormControl.Body' | aswTranslate}}\">\r\n <div class=\"asw-row\">\r\n <div class=\"asw-col-md-12 asw-mt-2\">\r\n <section class=\"asw-section\">\r\n <mat-radio-group color=\"primary\"\r\n formControlName=\"bodyType\">\r\n <mat-radio-button class=\"asw-margin\" *ngFor=\"let type of constants.apiBodyType\" \r\n [value]=\"type\">\r\n {{ type }}\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n </section>\r\n </div>\r\n </div>\r\n <div class=\"asw-mt-2\">\r\n <ng-container *ngIf=\"bodyType === 'form-data'\">\r\n <div class=\"asw-row\">\r\n <div class=\"asw-col-md-12\">\r\n <table class=\"asw-table asw-table-sm asw-table-bordered\">\r\n <thead>\r\n <tr>\r\n <th>{{'FormControl.Key' | aswTranslate}}</th>\r\n <th>{{'FormControl.Value' | aswTranslate}}</th>\r\n <th>{{'FormControl.DataType' | aswTranslate}}</th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container formArrayName=\"bodyFormData\">\r\n <tr *ngFor=\"let b of bodyFormData.controls; let index = index; let last=last;\" \r\n [formGroupName]=\"index\">\r\n <td>\r\n <input class=\"asw-input-control\" type=\"text\" formControlName=\"key\">\r\n </td>\r\n <td>\r\n <ng-container *ngIf=\"bodyFormData.controls[index].value.dataType === 'String'\">\r\n <input class=\"asw-input-control\" type