@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
195 lines (187 loc) • 17.6 kB
JavaScript
import * as i0 from '@angular/core';
import { Inject, Component, EventEmitter, Output, Input, NgModule } from '@angular/core';
import * as i7 from '@asoftwareworld/form-builder-pro/common';
import { Constants, Icons, MaterialModule, AswPipeModule } from '@asoftwareworld/form-builder-pro/common';
import { AswConfirmDialog, AswConfirmDialogModule } from '@asoftwareworld/form-builder-pro/form-control/confirm-dialog';
import * as i1 from '@angular/forms';
import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i2 from '@angular/material/dialog';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i4 from '@angular/material/button';
import * as i5 from '@angular/material/form-field';
import * as i6 from '@asoftwareworld/form-builder-pro/editor';
import { AswEditorModule } from '@asoftwareworld/form-builder-pro/editor';
import * as i8 from '@asoftwareworld/form-builder-pro/core';
import { AswTranslateModule } from '@asoftwareworld/form-builder-pro/core';
import * as i4$1 from '@angular/material/tooltip';
/**
* @license
* Copyright ASW (A Software World) All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file
*/
class AswParagraphDialog {
formBuilder;
dialogRef;
control;
constants = Constants;
icons = Icons;
aswParagraphForm;
status;
constructor(formBuilder, dialogRef, control) {
this.formBuilder = formBuilder;
this.dialogRef = dialogRef;
this.control = control;
}
ngOnInit() {
this.validateFormBuilder();
this.editProperty(this.control);
}
validateFormBuilder() {
this.aswParagraphForm = this.formBuilder.group({
label: ['', [Validators.required, Validators.minLength(2)]]
});
}
editProperty(control) {
this.aswParagraphForm.setValue({
label: control.label
});
}
onNoClick() {
this.dialogRef.close();
}
onSubmit() {
if (this.aswParagraphForm.invalid) {
return;
}
this.aswParagraphForm.value.controlType = this.control.controlType;
this.aswParagraphForm.value.id = this.control.id;
this.aswParagraphForm.value.guid = this.control.guid;
this.dialogRef.close(this.aswParagraphForm.value);
}
onChange(event) {
if (event.checked) {
this.status = true;
}
else {
this.status = false;
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswParagraphDialog, deps: [{ token: i1.FormBuilder }, { token: i2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: AswParagraphDialog, selector: "asw-paragraph-dialog", ngImport: i0, template: "<div class=\"asw-dialog-header\">\r\n <div class=\"asw-edit-row-dialog\">\r\n <div class=\"asw-dialog-header clearfix\">\r\n <div class=\"asw-dialog-about\">\r\n <h1 mat-dialog-title class=\"asw-m-0\">{{'FormControl.Edit' | aswTranslate}} {{control.label | aswTranslate}}</h1>\r\n </div>\r\n </div>\r\n </div>\r\n <button mat-icon-button (click)=\"onNoClick()\" aria-label=\"Close dialog\" class=\"asw-mt-2 asw-me-2\">\r\n <div [innerHTML]=\"icons.close | aswSafeHtml\"></div>\r\n </button>\r\n</div>\r\n<form [formGroup]=\"aswParagraphForm\" (ngSubmit)=\"onSubmit()\">\r\n <mat-dialog-content class=\"mat-typography\">\r\n <div class=\"asw-row\">\r\n <div class=\"asw-col-md-12\">\r\n <asw-editor autofocus=\"true\" id=\"asw-editor\" formControlName=\"label\" [config]=\"constants.aswEditorConfig\"></asw-editor>\r\n <ng-container *ngFor=\"let validation of constants.accountValidationMessages.label\">\r\n <mat-error *ngIf=\"aswParagraphForm.get('label')?.hasError(validation.type) && (aswParagraphForm.get('label')?.dirty || aswParagraphForm.get('label')?.touched)\">\r\n {{validation.message | aswTranslate}}\r\n </mat-error>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </mat-dialog-content>\r\n <mat-dialog-actions align=\"end\">\r\n <button type=\"button\"\r\n class=\"asw-button asw-button-danger asw-me-2 asw-mb-1\"\r\n (click)=\"onNoClick()\">\r\n {{'FormControl.No' | aswTranslate}}\r\n </button>\r\n <button type=\"submit\"\r\n class=\"asw-button asw-button-primary asw-mb-1\"\r\n cdkFocusInitial>\r\n {{'FormControl.Yes' | aswTranslate}}\r\n </button>\r\n </mat-dialog-actions>\r\n</form>\r\n\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i6.AswEditor, selector: "asw-editor", inputs: ["id", "config", "placeholder", "tabIndex"], outputs: ["html", "viewMode", "blur", "focus"] }, { kind: "pipe", type: i7.AswSafeHtmlPipe, name: "aswSafeHtml" }, { kind: "pipe", type: i8.AswTranslatePipe, name: "aswTranslate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswParagraphDialog, decorators: [{
type: Component,
args: [{ selector: 'asw-paragraph-dialog', template: "<div class=\"asw-dialog-header\">\r\n <div class=\"asw-edit-row-dialog\">\r\n <div class=\"asw-dialog-header clearfix\">\r\n <div class=\"asw-dialog-about\">\r\n <h1 mat-dialog-title class=\"asw-m-0\">{{'FormControl.Edit' | aswTranslate}} {{control.label | aswTranslate}}</h1>\r\n </div>\r\n </div>\r\n </div>\r\n <button mat-icon-button (click)=\"onNoClick()\" aria-label=\"Close dialog\" class=\"asw-mt-2 asw-me-2\">\r\n <div [innerHTML]=\"icons.close | aswSafeHtml\"></div>\r\n </button>\r\n</div>\r\n<form [formGroup]=\"aswParagraphForm\" (ngSubmit)=\"onSubmit()\">\r\n <mat-dialog-content class=\"mat-typography\">\r\n <div class=\"asw-row\">\r\n <div class=\"asw-col-md-12\">\r\n <asw-editor autofocus=\"true\" id=\"asw-editor\" formControlName=\"label\" [config]=\"constants.aswEditorConfig\"></asw-editor>\r\n <ng-container *ngFor=\"let validation of constants.accountValidationMessages.label\">\r\n <mat-error *ngIf=\"aswParagraphForm.get('label')?.hasError(validation.type) && (aswParagraphForm.get('label')?.dirty || aswParagraphForm.get('label')?.touched)\">\r\n {{validation.message | aswTranslate}}\r\n </mat-error>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </mat-dialog-content>\r\n <mat-dialog-actions align=\"end\">\r\n <button type=\"button\"\r\n class=\"asw-button asw-button-danger asw-me-2 asw-mb-1\"\r\n (click)=\"onNoClick()\">\r\n {{'FormControl.No' | aswTranslate}}\r\n </button>\r\n <button type=\"submit\"\r\n class=\"asw-button asw-button-primary asw-mb-1\"\r\n cdkFocusInitial>\r\n {{'FormControl.Yes' | aswTranslate}}\r\n </button>\r\n </mat-dialog-actions>\r\n</form>\r\n\r\n" }]
}], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.MatDialogRef }, { type: undefined, decorators: [{
type: Inject,
args: [MAT_DIALOG_DATA]
}] }] });
/**
* @license
* Copyright ASW (A Software World) All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file
*/
class AswParagraph {
dialog;
constants = Constants;
icons = Icons;
/**
* Paragraph control
*/
control = null;
isPreviewTemplate = false;
paragraphUpdateEvent = new EventEmitter();
paragraphDeleteEvent = new EventEmitter();
duplicateControl = new EventEmitter();
constructor(dialog) {
this.dialog = dialog;
}
deleteParagraphDialog(control) {
const dialogRef = this.dialog.open(AswConfirmDialog, {
width: '350px',
data: { name: control.controlType, message: this.constants.messages.waringMessage }
});
dialogRef.afterClosed().subscribe((result) => {
if (result !== undefined) {
this.paragraphDeleteEvent.emit(control);
}
});
}
editParagraphDialog(control) {
const dialogRef = this.dialog.open(AswParagraphDialog, {
width: '80%',
minWidth: '70vw',
disableClose: true,
data: control
});
dialogRef.afterClosed().subscribe((result) => {
if (result !== undefined) {
this.paragraphUpdateEvent.emit(result);
}
});
}
duplicateParagraphControl(control) {
this.duplicateControl.emit(control);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswParagraph, deps: [{ token: i2.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: AswParagraph, selector: "asw-paragraph", inputs: { control: "control", isPreviewTemplate: "isPreviewTemplate" }, outputs: { paragraphUpdateEvent: "paragraphUpdateEvent", paragraphDeleteEvent: "paragraphDeleteEvent", duplicateControl: "duplicateControl" }, ngImport: i0, template: "<ng-container *ngIf=\"control as control\">\r\n <div [innerHTML]=\"(control.label | aswTranslate) | aswSafeHtml\"></div>\r\n <div class=\"row\" *ngIf=\"isPreviewTemplate\">\r\n <div class=\"col-md-12\" align=\"right\">\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"{{'FormControl.Duplicate' | aswTranslate}}\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"duplicateParagraphControl(control)\">\r\n <div [innerHTML]=\"icons.contentCopy | aswSafeHtml\"></div>\r\n </button>\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"{{'FormControl.Edit' | aswTranslate}}\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"editParagraphDialog(control)\">\r\n <div [innerHTML]=\"icons.edit | aswSafeHtml\"></div>\r\n </button>\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"{{'FormControl.Delete' | aswTranslate}}\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"deleteParagraphDialog(control)\">\r\n <div [innerHTML]=\"icons.delete2 | aswSafeHtml\"></div>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i7.AswSafeHtmlPipe, name: "aswSafeHtml" }, { kind: "pipe", type: i8.AswTranslatePipe, name: "aswTranslate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswParagraph, decorators: [{
type: Component,
args: [{ selector: 'asw-paragraph', template: "<ng-container *ngIf=\"control as control\">\r\n <div [innerHTML]=\"(control.label | aswTranslate) | aswSafeHtml\"></div>\r\n <div class=\"row\" *ngIf=\"isPreviewTemplate\">\r\n <div class=\"col-md-12\" align=\"right\">\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"{{'FormControl.Duplicate' | aswTranslate}}\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"duplicateParagraphControl(control)\">\r\n <div [innerHTML]=\"icons.contentCopy | aswSafeHtml\"></div>\r\n </button>\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"{{'FormControl.Edit' | aswTranslate}}\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"editParagraphDialog(control)\">\r\n <div [innerHTML]=\"icons.edit | aswSafeHtml\"></div>\r\n </button>\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"{{'FormControl.Delete' | aswTranslate}}\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"deleteParagraphDialog(control)\">\r\n <div [innerHTML]=\"icons.delete2 | aswSafeHtml\"></div>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-container>\r\n" }]
}], ctorParameters: () => [{ type: i2.MatDialog }], propDecorators: { control: [{
type: Input
}], isPreviewTemplate: [{
type: Input
}], paragraphUpdateEvent: [{
type: Output
}], paragraphDeleteEvent: [{
type: Output
}], duplicateControl: [{
type: Output
}] } });
/**
* @license
* Copyright ASW (A Software World) All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file
*/
/**
* @license
* Copyright ASW (A Software World) All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file
*/
class AswParagraphModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswParagraphModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: AswParagraphModule, declarations: [AswParagraph, AswParagraphDialog], imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule, AswConfirmDialogModule, AswEditorModule, AswPipeModule, AswTranslateModule], exports: [AswParagraph, AswParagraphDialog] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswParagraphModule, imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule, AswConfirmDialogModule, AswEditorModule, AswPipeModule, AswTranslateModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswParagraphModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule, AswConfirmDialogModule, AswEditorModule, AswPipeModule, AswTranslateModule],
declarations: [AswParagraph, AswParagraphDialog],
exports: [AswParagraph, AswParagraphDialog]
}]
}] });
/**
* @license
* Copyright ASW (A Software World) All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file
*/
/**
* Generated bundle index. Do not edit.
*/
export { AswParagraph, AswParagraphDialog, AswParagraphModule };
//# sourceMappingURL=asoftwareworld-form-builder-pro-form-control-paragraph.mjs.map