@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
334 lines • 113 kB
JavaScript
/**
* @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
*/
import { CdkDropList, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { Constants, Icons } from '@asoftwareworld/form-builder-pro/common';
import { AswJsonPreviewDialog } from '@asoftwareworld/form-builder-pro/form-control/json-preview-dialog';
import { ObjectUtils } from '@asoftwareworld/form-builder-pro/utils';
import { CSSFrameworkEnum } from '@asoftwareworld/form-builder-pro/api';
import { ADVANCED_CONTROLS, CHOICE_CONTROLS, DIGITAL_CONTROLS, LAYOUT_CONTROLS, SIMPLE_CONTROLS } from './default-controls';
import * as i0 from "@angular/core";
import * as i1 from "@asoftwareworld/form-builder-pro/core";
import * as i2 from "@angular/material/dialog";
import * as i3 from "@asoftwareworld/form-builder-pro/common";
import * as i4 from "./drag-drop.service";
import * as i5 from "@angular/common";
import * as i6 from "@angular/forms";
import * as i7 from "@angular/cdk/drag-drop";
import * as i8 from "@angular/material/expansion";
import * as i9 from "@angular/material/card";
import * as i10 from "@asoftwareworld/form-builder-pro/form-control/column";
import * as i11 from "./drag-drop/drag-drop";
export class AswFormBuilder {
translate;
dialog;
notificationService;
dragDropService;
step = 0;
constants = Constants;
// Control list
simpleControls = [];
choiceControls = [];
advancedControls = [];
digitalControls = [];
layoutControls = [];
controls = [];
// drop items
formContainer = [];
icons = Icons;
currentLanguage = 'en';
uploadData = [];
isShowPreviewButton = true;
isShowJsonDataButton = true;
isShowPublishButton = true;
cssFramework = CSSFrameworkEnum.Material;
controlPersonalization = [];
propertyPersonalization = [];
controlCollectionName = '';
patterns = [];
previewClick = new EventEmitter();
publishClick = new EventEmitter();
buttonClick = new EventEmitter();
aswModelChange = new EventEmitter();
dropList;
selectedControlId = '';
allowDropPredicate = (drag, drop) => {
return this.isDropAllowed(drag, drop);
};
constructor(translate, dialog, notificationService, dragDropService) {
this.translate = translate;
this.dialog = dialog;
this.notificationService = notificationService;
this.dragDropService = dragDropService;
}
ngOnInit() {
this.translate.setDefaultLang('en');
this.translate.use(this.currentLanguage);
this.getControlConfig();
}
getControlConfig() {
this.simpleControls = this.excludeControl(SIMPLE_CONTROLS);
this.choiceControls = this.excludeControl(CHOICE_CONTROLS);
this.advancedControls = this.excludeControl(ADVANCED_CONTROLS);
this.digitalControls = this.excludeControl(DIGITAL_CONTROLS);
this.layoutControls = this.excludeControl(LAYOUT_CONTROLS);
if (!this.isNullOrEmptyOrWhitespace(this.controlCollectionName)) {
this.setSingleControlCollection(this.simpleControls);
this.setSingleControlCollection(this.choiceControls);
this.setSingleControlCollection(this.advancedControls);
this.setSingleControlCollection(this.digitalControls);
this.setSingleControlCollection(this.layoutControls);
}
}
setSingleControlCollection(controlCollections) {
controlCollections.forEach((x) => {
this.controls.push(x);
});
}
isNullOrEmptyOrWhitespace(str) {
// Check if the string is null or undefined
if (str === null || str === undefined) {
return true;
}
// Trim the string to remove leading and trailing whitespace, then check if it's empty
if (str.trim() === '') {
return true;
}
// If none of the above conditions are met, the string is not null, undefined, empty, or whitespace
return false;
}
excludeControl(controls) {
if (this.controlPersonalization.length === 0)
return controls;
return controls.filter((control) => !this.controlPersonalization.includes(control.controlType));
}
ngAfterViewInit() {
if (this.dropList) {
this.dragDropService.register(this.dropList);
}
}
setStep(index) {
this.step = index;
}
changeLanguage() {
this.translate.use(this.currentLanguage);
}
ngOnChanges() {
this.controls = [];
if (this.uploadData.length) {
this.formContainer = this.uploadData;
}
this.getControlConfig();
}
/**
* Drops a draggable item inside a drop container.
*/
dropped(event) {
const draggedItem = event.item.data;
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
}
else {
const previousContainerData = JSON.parse(JSON.stringify(event.previousContainer.data));
if (draggedItem) {
this.addRemoveControlFromContainer(draggedItem);
}
this.setGuidId(previousContainerData, event.previousIndex);
transferArrayItem(previousContainerData, event.container.data, event.previousIndex, event.currentIndex);
}
}
/**
* Set id and guid for newly dropped control.
* @param previousContainer list of control
* @param index control index
*/
setGuidId(previousContainer, index) {
let droppedControl = previousContainer[index];
droppedControl = ObjectUtils.generateUUID(droppedControl);
}
addRemoveControlFromContainer(draggedItem, controlAction = 'delete') {
this.formContainer.filter((control, index) => {
if (control.guid === draggedItem.guid) {
switch (controlAction) {
case 'delete':
this.formContainer.splice(index, 1);
break;
case 'update':
this.formContainer.splice(index, 1, draggedItem);
break;
case 'duplicate':
this.formContainer.push(this.resetDuplicateControl(draggedItem));
break;
}
}
else {
this.removedChildControl(control, draggedItem, controlAction);
}
});
}
removedChildControl(control, draggedItem, controlAction) {
control.columns?.forEach((column) => {
column.components.forEach((component, childIndex) => {
if (component.guid === draggedItem.guid) {
switch (controlAction) {
case 'delete':
column.components.splice(childIndex, 1);
break;
case 'update':
column.components.splice(childIndex, 1, draggedItem);
break;
case 'duplicate':
column.components.push(this.resetDuplicateControl(draggedItem));
break;
}
}
if (component.controlType === 'columns') {
this.removedChildControl(component, draggedItem, controlAction);
}
});
});
}
/**
* Reset the id, guid, and value of the duplicated control.
* @param duplicateControl duplicated control
* @returns Refreshed control
*/
resetDuplicateControl(duplicateControl) {
const id = ObjectUtils.UUID();
duplicateControl.id = id;
duplicateControl.guid = id;
if (duplicateControl.controlType === 'fileupload') {
duplicateControl.value = [];
}
else if (duplicateControl.controlType !== 'qr-code') {
duplicateControl.value = duplicateControl.controlType === 'slide-toggle' ? false : '';
}
return duplicateControl;
}
/**
* Cdk material is not able to determine the correct drop list. If there is a wrong drop list selected by cdk,
* we just disallow the drop by returning false. In that case, cdk automatically selects the next possible
* cdkDropList which is the correct.
*/
isDropAllowed(drag, drop) {
if (this.dragDropService.currentHoverDropListId == null) {
return true;
}
return drop.id === this.dragDropService.currentHoverDropListId;
}
/**
* Whenever a cdkDrag is moved, dragMoved determines the correct cdkDropList.
*/
dragMoved(event) {
this.dragDropService.dragMoved(event);
}
/**
* Whenever a cdkDrag is released, reset the determined cdkDropList
*/
dragReleased(event) {
this.dragDropService.dragReleased(event);
}
/**
* Update control from the container
* @param control data need to be update
*/
updatedControl(control) {
this.addRemoveControlFromContainer(control, 'update');
}
/**
* Delete control from the container
* @param control data need to be delete
*/
deleteControl(control) {
this.addRemoveControlFromContainer(control);
}
/**
* Duplicate control from the container
* @param control data need to be duplicate
*/
duplicateControl(control) {
const duplicatedControl = JSON.parse(JSON.stringify(control));
this.addRemoveControlFromContainer(duplicatedControl, 'duplicate');
}
previewTemplate() {
this.previewClick.emit(this.formContainer);
}
previewJsonData() {
const dialogRef = this.dialog.open(AswJsonPreviewDialog, {
disableClose: true,
width: '744px',
data: this.formContainer
});
dialogRef.afterClosed();
}
publishTemplate() {
this.publishClick.emit(this.formContainer);
}
/**
* Validate each control based on type and IsRequired.
* @param type Submit | Reset
*/
buttonClicked(type) {
if (type === 'reset') {
this.formContainer = ObjectUtils.resetForm(this.formContainer);
}
else {
const data = ObjectUtils.validateForm(this.formContainer);
if (!data.isFormValid) {
this.notificationService.openNotification('Please fill in the following required fields.' + ' \n \n' + data.labels.join(', '), 'Close');
}
else {
this.buttonClick.emit(this.formContainer);
}
}
}
onSelectionChange(control) {
if (control.controlType === 'select' || control.controlType === 'radio' || control.controlType === 'autocomplete') {
control.options.forEach((option) => {
if (control.value === option.key) {
if (option.hideControl) {
const data = option.hideControl;
data.isColumnHidden = true;
this.addRemoveControlFromContainer(data, 'update');
}
}
else {
if (option.hideControl) {
const data = option.hideControl;
data.isColumnHidden = false;
this.addRemoveControlFromContainer(data, 'update');
}
}
});
}
if (control.controlType === 'checkbox' || control.controlType === 'multi-select') {
control.options.forEach((option) => {
if (control.value.includes(option.key)) {
if (option.hideControl) {
const data = option.hideControl;
data.isColumnHidden = true;
this.addRemoveControlFromContainer(data, 'update');
}
}
else {
if (option.hideControl) {
const data = option.hideControl;
data.isColumnHidden = false;
this.addRemoveControlFromContainer(data, 'update');
}
}
});
}
this.aswModelChange.emit(control);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswFormBuilder, deps: [{ token: i1.AswTranslateService }, { token: i2.MatDialog }, { token: i3.NotificationService }, { token: i4.DragDropService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: AswFormBuilder, selector: "asw-form-builder", inputs: { currentLanguage: "currentLanguage", uploadData: "uploadData", isShowPreviewButton: "isShowPreviewButton", isShowJsonDataButton: "isShowJsonDataButton", isShowPublishButton: "isShowPublishButton", cssFramework: "cssFramework", controlPersonalization: "controlPersonalization", propertyPersonalization: "propertyPersonalization", controlCollectionName: "controlCollectionName", patterns: "patterns" }, outputs: { previewClick: "previewClick", publishClick: "publishClick", buttonClick: "buttonClick", aswModelChange: "aswModelChange" }, viewQueries: [{ propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"asw-row\">\r\n <div class=\"asw-col-md-12\" align=\"right\">\r\n <select [(ngModel)]=\"currentLanguage\" (change)=\"changeLanguage()\" class=\"asw-select-sm asw-mb-2 asw-me-1\">\r\n <option *ngFor=\"let lang of constants.languages\" \r\n [value]=\"lang.key\" [selected]=\"lang.key === translate.currentLang\">\r\n {{ lang.value }}\r\n </option>\r\n </select>\r\n <button type=\"button\" *ngIf=\"isShowPreviewButton\"\r\n class=\"asw-button asw-button-primary asw-button-sm asw-mb-2 asw-me-1\"\r\n (click)=\"previewTemplate()\">\r\n {{'FormBuilder.Preview' | aswTranslate}}\r\n </button>\r\n <button type=\"button\" *ngIf=\"isShowJsonDataButton\"\r\n class=\"asw-button asw-button-secondary asw-button-sm asw-mb-2 asw-me-1\"\r\n (click)=\"previewJsonData()\">\r\n {{'FormBuilder.JsonData' | aswTranslate}}\r\n </button>\r\n <button class=\"asw-button asw-button-success asw-button-sm asw-mb-2 asw-me-1\"\r\n type=\"button\" *ngIf=\"isShowPublishButton\"\r\n (click)=\"publishTemplate()\">\r\n {{'FormBuilder.Publish' | aswTranslate}}\r\n </button>\r\n </div>\r\n</div>\r\n<div class=\"asw-row\" cdkDropListGroup>\r\n <div class=\"asw-col-md-3\">\r\n <div class=\"asw-sticky-top\">\r\n <mat-accordion>\r\n <ng-container *ngIf=\"isNullOrEmptyOrWhitespace(this.controlCollectionName); else customAccordion\">\r\n <mat-expansion-panel *ngIf=\"simpleControls.length > 0\" [expanded]=\"step === 0\" (opened)=\"setStep(0)\" hideToggle>\r\n <mat-expansion-panel-header class=\"asw-expansion-panel-header\">\r\n <mat-panel-title>\r\n {{'FormBuilder.BasicControls' | aswTranslate}}\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div cdkDropList\r\n [cdkDropListData]=\"simpleControls\"\r\n [cdkDropListConnectedTo]=\"dragDropService.dropLists\"\r\n [cdkDropListEnterPredicate]=\"allowDropPredicate\"\r\n cdkDropListSortingDisabled>\r\n <div class=\"asw-row\">\r\n <ng-container *ngFor=\"let item of simpleControls\">\r\n <div class=\"asw-col-md-12\">\r\n <div class=\"asw-alert asw-d-flex asw-alert-primary align-items-center\"\r\n cdkDrag\r\n (cdkDragMoved)=\"dragMoved($event)\"\r\n (cdkDragReleased)=\"dragReleased($event)\">\r\n <div class=\"asw-icon asw-me-1\" [innerHTML]=\"icons[item.icon] | aswSafeHtml\"></div>\r\n {{item.displayName | aswTranslate}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </mat-expansion-panel>\r\n <mat-expansion-panel *ngIf=\"choiceControls.length > 0\" [expanded]=\"step === 1\" (opened)=\"setStep(1)\" hideToggle>\r\n <mat-expansion-panel-header class=\"asw-expansion-panel-header\">\r\n <mat-panel-title>\r\n {{'FormBuilder.ChoiceControls' | aswTranslate}}\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div cdkDropList\r\n [cdkDropListData]=\"choiceControls\"\r\n cdkDropListSortingDisabled\r\n [cdkDropListConnectedTo]=\"dragDropService.dropLists\"\r\n [cdkDropListEnterPredicate]=\"allowDropPredicate\">\r\n <div class=\"asw-row\">\r\n <ng-container *ngFor=\"let item of choiceControls\">\r\n <div class=\"asw-col-md-12\">\r\n <div class=\"asw-alert asw-d-flex asw-alert-primary align-items-center\"\r\n cdkDrag\r\n (cdkDragMoved)=\"dragMoved($event)\"\r\n (cdkDragReleased)=\"dragReleased($event)\">\r\n <div class=\"asw-icon asw-me-1\" [innerHTML]=\"icons[item.icon] | aswSafeHtml\"></div>\r\n {{item.displayName | aswTranslate}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </mat-expansion-panel>\r\n <mat-expansion-panel *ngIf=\"advancedControls.length > 0\" [expanded]=\"step === 2\" (opened)=\"setStep(2)\" hideToggle>\r\n <mat-expansion-panel-header class=\"asw-expansion-panel-header\">\r\n <mat-panel-title>\r\n {{'FormBuilder.AdvancedControls' | aswTranslate}}\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div cdkDropList\r\n [cdkDropListData]=\"advancedControls\"\r\n cdkDropListSortingDisabled\r\n [cdkDropListConnectedTo]=\"dragDropService.dropLists\"\r\n [cdkDropListEnterPredicate]=\"allowDropPredicate\">\r\n <div class=\"asw-row\">\r\n <ng-container *ngFor=\"let item of advancedControls\">\r\n <div class=\"asw-col-md-12\">\r\n <div class=\"asw-alert asw-d-flex asw-alert-primary align-items-center\"\r\n cdkDrag\r\n (cdkDragMoved)=\"dragMoved($event)\"\r\n (cdkDragReleased)=\"dragReleased($event)\">\r\n <div class=\"asw-icon asw-me-1\" [innerHTML]=\"icons[item.icon] | aswSafeHtml\"></div>\r\n {{item.displayName | aswTranslate}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </mat-expansion-panel>\r\n <mat-expansion-panel *ngIf=\"digitalControls.length > 0\" [expanded]=\"step === 3\" (opened)=\"setStep(3)\" hideToggle>\r\n <mat-expansion-panel-header class=\"asw-expansion-panel-header\">\r\n <mat-panel-title>\r\n {{'FormBuilder.DigitalControls' | aswTranslate}}\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div cdkDropList\r\n [cdkDropListData]=\"digitalControls\"\r\n cdkDropListSortingDisabled\r\n [cdkDropListConnectedTo]=\"dragDropService.dropLists\"\r\n [cdkDropListEnterPredicate]=\"allowDropPredicate\">\r\n <div class=\"asw-row\">\r\n <ng-container *ngFor=\"let item of digitalControls\">\r\n <div class=\"asw-col-md-12\">\r\n <div class=\"asw-alert asw-d-flex asw-alert-primary align-items-center\"\r\n cdkDrag\r\n (cdkDragMoved)=\"dragMoved($event)\"\r\n (cdkDragReleased)=\"dragReleased($event)\">\r\n <div class=\"asw-icon asw-me-1\" [innerHTML]=\"icons[item.icon] | aswSafeHtml\"></div>\r\n {{item.displayName | aswTranslate}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </mat-expansion-panel>\r\n <mat-expansion-panel *ngIf=\"layoutControls.length > 0\" [expanded]=\"step === 4\" (opened)=\"setStep(4)\" hideToggle>\r\n <mat-expansion-panel-header class=\"asw-expansion-panel-header\">\r\n <mat-panel-title>\r\n {{'FormBuilder.LayoutControls' | aswTranslate}}\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div cdkDropList\r\n [cdkDropListData]=\"layoutControls\"\r\n cdkDropListSortingDisabled\r\n [cdkDropListConnectedTo]=\"dragDropService.dropLists\"\r\n [cdkDropListEnterPredicate]=\"allowDropPredicate\">\r\n <div class=\"asw-row\">\r\n <ng-container *ngFor=\"let item of layoutControls\">\r\n <div class=\"asw-col-md-12\">\r\n <div class=\"asw-alert asw-d-flex asw-alert-primary align-items-center\"\r\n cdkDrag\r\n (cdkDragMoved)=\"dragMoved($event)\"\r\n (cdkDragReleased)=\"dragReleased($event)\">\r\n <div class=\"asw-icon asw-me-1\" [innerHTML]=\"icons[item.icon] | aswSafeHtml\"></div>\r\n {{item.displayName | aswTranslate}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </mat-expansion-panel>\r\n </ng-container>\r\n <ng-template #customAccordion>\r\n <mat-expansion-panel [expanded]=\"step === 0\" (opened)=\"setStep(0)\" hideToggle>\r\n <mat-expansion-panel-header class=\"asw-expansion-panel-header\">\r\n <mat-panel-title>\r\n {{controlCollectionName | aswTranslate}}\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div cdkDropList\r\n [cdkDropListData]=\"controls\"\r\n [cdkDropListConnectedTo]=\"dragDropService.dropLists\"\r\n [cdkDropListEnterPredicate]=\"allowDropPredicate\"\r\n cdkDropListSortingDisabled>\r\n <div class=\"asw-row\">\r\n <ng-container *ngFor=\"let item of controls\">\r\n <div class=\"asw-col-md-12\">\r\n <div class=\"asw-alert asw-d-flex asw-alert-primary align-items-center\"\r\n cdkDrag\r\n (cdkDragMoved)=\"dragMoved($event)\"\r\n (cdkDragReleased)=\"dragReleased($event)\">\r\n <div class=\"asw-icon asw-me-1\" [innerHTML]=\"icons[item.icon] | aswSafeHtml\"></div>\r\n {{item.displayName | aswTranslate}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </mat-expansion-panel>\r\n </ng-template>\r\n </mat-accordion>\r\n </div>\r\n </div>\r\n <div class=\"asw-col-md-9\">\r\n <mat-card>\r\n <h2 class=\"asw-card-header asw-text-center asw-alert-info\" *ngIf=\"formContainer.length === 0\">{{'FormBuilder.DragAndDrop' | aswTranslate}}</h2>\r\n <mat-card-content>\r\n <div cdkDropList\r\n class=\"asw-list\"\r\n id=\"asw-main-drop-area\"\r\n [cdkDropListData]=\"formContainer\"\r\n [cdkDropListConnectedTo]=\"dragDropService.dropLists\"\r\n [cdkDropListEnterPredicate]=\"allowDropPredicate\"\r\n (cdkDropListDropped)=\"dropped($event)\">\r\n <div *ngFor=\"let control of formContainer\"\r\n cdkDrag\r\n class=\"asw-box\"\r\n [cdkDragData]=\"control\"\r\n (cdkDragMoved)=\"dragMoved($event)\"\r\n (cdkDragReleased)=\"dragReleased($event)\">\r\n <div class=\"asw-placeholder\" *cdkDragPlaceholder></div>\r\n <ng-container *ngTemplateOutlet=\"childContainer, context:{control:control}\"></ng-container>\r\n </div>\r\n </div>\r\n <ng-template #childContainer let-control=\"control\">\r\n <ng-container [ngSwitch]=\"control.controlType\">\r\n <ng-container *ngIf=\"!control.columns; else layout\">\r\n <asw-drag-drop [control]=\"control\"\r\n [formContainer]=\"formContainer\"\r\n [CSSFramework]=\"cssFramework\"\r\n [patterns]=\"patterns\"\r\n [propertyPersonalization]=\"propertyPersonalization\"\r\n (controlUpdated)=\"updatedControl($event)\"\r\n (controlDeleted)=\"deleteControl($event)\"\r\n (controlDuplicate)=\"duplicateControl($event)\"\r\n (buttonClick)=\"buttonClicked($event)\"\r\n (controlChange)=\"onSelectionChange($event)\">\r\n </asw-drag-drop>\r\n </ng-container>\r\n <ng-template #layout>\r\n <ng-container *ngIf=\"!control.isColumnHidden\">\r\n <ng-container *ngSwitchCase=\"'columns'\">\r\n <div class=\"asw-row\">\r\n <div class=\"asw-col-{{column.size}}-{{column.width}}\" *ngFor=\"let column of control.columns\">\r\n <h2 class=\"asw-card-header asw-text-center alert-info asw-alert-info\" *ngIf=\"column.components.length === 0\">{{'FormBuilder.DragAndDrop' | aswTranslate}}</h2>\r\n <div cdkDropList\r\n class=\"asw-child-list\"\r\n [cdkDropListData]=\"column.components\"\r\n [cdkDropListConnectedTo]=\"dragDropService.dropLists\"\r\n [cdkDropListEnterPredicate]=\"allowDropPredicate\"\r\n (cdkDropListDropped)=\"dropped($event)\">\r\n <div *ngFor=\"let component of column.components\"\r\n cdkDrag\r\n class=\"asw-child-box\"\r\n [cdkDragData]=\"component\"\r\n (cdkDragMoved)=\"dragMoved($event)\"\r\n (cdkDragReleased)=\"dragReleased($event)\">\r\n <div class=\"asw-placeholder\" *cdkDragPlaceholder></div>\r\n <ng-container *ngTemplateOutlet=\"childContainer, context:{control:component}\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <asw-column [control]=\"control\"\r\n (controlUpdated)=\"updatedControl($event)\"\r\n (controlDeleted)=\"deleteControl($event)\"\r\n (controlDuplicate)=\"duplicateControl($event)\">\r\n </asw-column>\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-template>\r\n </mat-card-content>\r\n </mat-card>\r\n </div>\r\n</div>", styles: ["h2{margin:0}.asw-list{min-height:550px;border-radius:4px}.asw-box{padding:7px 0;color:#000000de;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.asw-child-list{max-width:100%;border:dotted 3px #999;min-height:150px;display:block;background:#fff}.asw-child-list:hover{cursor:move;border:dotted 3px rgba(0,0,0,.87)}.asw-child-box{padding:20px 10px;color:#000000de;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.asw-expansion-panel-header{background-color:#00000008!important;border-bottom:1px solid rgba(0,0,0,.125);font-weight:450;height:48px;border-radius:initial}:host ::ng-deep .mat-expansion-panel-body{padding:16px 24px!important}.asw-alert{padding:.4rem!important;margin-bottom:.4rem!important}.asw-alert-primary{color:#fff!important;background-color:#2780e3!important;border-color:#2780e3!important;cursor:move}.asw-card-header{padding:.5rem 1rem;margin-bottom:0;background-color:#00000008;border-bottom:1px solid rgba(0,0,0,.125)}.asw-alert-info{color:#502c61!important;background-color:#ebddf1!important;border-color:#e2cfec!important}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.asw-list.cdk-drop-list-dragging .asw-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.asw-child-list.cdk-drop-list-dragging .asw-child-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i8.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i8.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i8.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i8.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i9.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i9.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i10.AswColumn, selector: "asw-column", inputs: ["control"], outputs: ["controlUpdated", "controlDeleted", "controlDuplicate"] }, { kind: "component", type: i11.AswDragDrop, selector: "asw-drag-drop", inputs: ["control", "formContainer", "CSSFramework", "propertyPersonalization", "patterns"], outputs: ["controlUpdated", "controlDeleted", "controlDuplicate", "controlChange", "buttonClick"] }, { kind: "pipe", type: i1.AswTranslatePipe, name: "aswTranslate" }, { kind: "pipe", type: i3.AswSafeHtmlPipe, name: "aswSafeHtml" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswFormBuilder, decorators: [{
type: Component,
args: [{ selector: 'asw-form-builder', template: "<div class=\"asw-row\">\r\n <div class=\"asw-col-md-12\" align=\"right\">\r\n <select [(ngModel)]=\"currentLanguage\" (change)=\"changeLanguage()\" class=\"asw-select-sm asw-mb-2 asw-me-1\">\r\n <option *ngFor=\"let lang of constants.languages\" \r\n [value]=\"lang.key\" [selected]=\"lang.key === translate.currentLang\">\r\n {{ lang.value }}\r\n </option>\r\n </select>\r\n <button type=\"button\" *ngIf=\"isShowPreviewButton\"\r\n class=\"asw-button asw-button-primary asw-button-sm asw-mb-2 asw-me-1\"\r\n (click)=\"previewTemplate()\">\r\n {{'FormBuilder.Preview' | aswTranslate}}\r\n </button>\r\n <button type=\"button\" *ngIf=\"isShowJsonDataButton\"\r\n class=\"asw-button asw-button-secondary asw-button-sm asw-mb-2 asw-me-1\"\r\n (click)=\"previewJsonData()\">\r\n {{'FormBuilder.JsonData' | aswTranslate}}\r\n </button>\r\n <button class=\"asw-button asw-button-success asw-button-sm asw-mb-2 asw-me-1\"\r\n type=\"button\" *ngIf=\"isShowPublishButton\"\r\n (click)=\"publishTemplate()\">\r\n {{'FormBuilder.Publish' | aswTranslate}}\r\n </button>\r\n </div>\r\n</div>\r\n<div class=\"asw-row\" cdkDropListGroup>\r\n <div class=\"asw-col-md-3\">\r\n <div class=\"asw-sticky-top\">\r\n <mat-accordion>\r\n <ng-container *ngIf=\"isNullOrEmptyOrWhitespace(this.controlCollectionName); else customAccordion\">\r\n <mat-expansion-panel *ngIf=\"simpleControls.length > 0\" [expanded]=\"step === 0\" (opened)=\"setStep(0)\" hideToggle>\r\n <mat-expansion-panel-header class=\"asw-expansion-panel-header\">\r\n <mat-panel-title>\r\n {{'FormBuilder.BasicControls' | aswTranslate}}\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div cdkDropList\r\n [cdkDropListData]=\"simpleControls\"\r\n [cdkDropListConnectedTo]=\"dragDropService.dropLists\"\r\n [cdkDropListEnterPredicate]=\"allowDropPredicate\"\r\n cdkDropListSortingDisabled>\r\n <div class=\"asw-row\">\r\n <ng-container *ngFor=\"let item of simpleControls\">\r\n <div class=\"asw-col-md-12\">\r\n <div class=\"asw-alert asw-d-flex asw-alert-primary align-items-center\"\r\n cdkDrag\r\n (cdkDragMoved)=\"dragMoved($event)\"\r\n (cdkDragReleased)=\"dragReleased($event)\">\r\n <div class=\"asw-icon asw-me-1\" [innerHTML]=\"icons[item.icon] | aswSafeHtml\"></div>\r\n {{item.displayName | aswTranslate}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </mat-expansion-panel>\r\n <mat-expansion-panel *ngIf=\"choiceControls.length > 0\" [expanded]=\"step === 1\" (opened)=\"setStep(1)\" hideToggle>\r\n <mat-expansion-panel-header class=\"asw-expansion-panel-header\">\r\n <mat-panel-title>\r\n {{'FormBuilder.ChoiceControls' | aswTranslate}}\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div cdkDropList\r\n [cdkDropListData]=\"choiceControls\"\r\n cdkDropListSortingDisabled\r\n [cdkDropListConnectedTo]=\"dragDropService.dropLists\"\r\n [cdkDropListEnterPredicate]=\"allowDropPredicate\">\r\n <div class=\"asw-row\">\r\n <ng-container *ngFor=\"let item of choiceControls\">\r\n <div class=\"asw-col-md-12\">\r\n <div class=\"asw-alert asw-d-flex asw-alert-primary align-items-center\"\r\n cdkDrag\r\n (cdkDragMoved)=\"dragMoved($event)\"\r\n (cdkDragReleased)=\"dragReleased($event)\">\r\n <div class=\"asw-icon asw-me-1\" [innerHTML]=\"icons[item.icon] | aswSafeHtml\"></div>\r\n {{item.displayName | aswTranslate}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </mat-expansion-panel>\r\n <mat-expansion-panel *ngIf=\"advancedControls.length > 0\" [expanded]=\"step === 2\" (opened)=\"setStep(2)\" hideToggle>\r\n <mat-expansion-panel-header class=\"asw-expansion-panel-header\">\r\n <mat-panel-title>\r\n {{'FormBuilder.AdvancedControls' | aswTranslate}}\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div cdkDropList\r\n [cdkDropListData]=\"advancedControls\"\r\n cdkDropListSortingDisabled\r\n [cdkDropListConnectedTo]=\"dragDropService.dropLists\"\r\n [cdkDropListEnterPredicate]=\"allowDropPredicate\">\r\n <div class=\"asw-row\">\r\n <ng-container *ngFor=\"let item of advancedControls\">\r\n <div class=\"asw-col-md-12\">\r\n <div class=\"asw-alert asw-d-flex asw-alert-primary align-items-center\"\r\n cdkDrag\r\n (cdkDragMoved)=\"dragMoved($event)\"\r\n (cdkDragReleased)=\"dragReleased($event)\">\r\n <div class=\"asw-icon asw-me-1\" [innerHTML]=\"icons[item.icon] | aswSafeHtml\"></div>\r\n {{item.displayName | aswTranslate}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </mat-expansion-panel>\r\n <mat-expansion-panel *ngIf=\"digitalControls.length > 0\" [expanded]=\"step === 3\" (opened)=\"setStep(3)\" hideToggle>\r\n <mat-expansion-panel-header class=\"asw-expansion-panel-header\">\r\n <mat-panel-title>\r\n {{'FormBuilder.DigitalControls' | aswTranslate}}\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div cdkDropList\r\n [cdkDropListData]=\"digitalControls\"\r\n cdkDropListSortingDisabled\r\n [cdkDropListConnectedTo]=\"dragDropService.dropLists\"\r\n [cdkDropListEnterPredicate]=\"allowDropPredicate\">\r\n <div class=\"asw-row\">\r\n <ng-container *ngFor=\"let item of digitalControls\">\r\n <div class=\"asw-col-md-12\">\r\n <div class=\"asw-alert asw-d-flex asw-alert-primary align-items-center\"\r\n cdkDrag\r\n (cdkDragMoved)=\"dragMoved($event)\"\r\n (cdkDragReleased)=\"dragReleased($event)\">\r\n <div class=\"asw-icon asw-me-1\" [innerHTML]=\"icons[item.icon] | aswSafeHtml\"></div>\r\n {{item.displayName | aswTranslate}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </mat-expansion-panel>\r\n <mat-expansion-panel *ngIf=\"layoutControls.length > 0\" [expanded]=\"step === 4\" (opened)=\"setStep(4)\" hideToggle>\r\n <mat-expansion-panel-header class=\"asw-expansion-panel-header\">\r\n <mat-panel-title>\r\n {{'FormBuilder.LayoutControls' | aswTranslate}}\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div cdkDropList\r\n [cdkDropListData]=\"layoutControls\"\r\n cdkDropListSortingDisabled\r\n [cdkDropListConnectedTo]=\"dragDropService.dropLists\"\r\n [cdkDropListEnterPredicate]=\"allowDropPredicate\">\r\n <div class=\"asw-row\">\r\n <ng-container *ngFor=\"let item of layoutControls\">\r\n <div class=\"asw-col-md-12\">\r\n <div class=\"asw-alert asw-d-flex asw-alert-primary align-items-center\"\r\n cdkDrag\r\n (cdkDragMoved)=\"dragMoved($event)\"\r\n (cdkDragReleased)=\"dragReleased($event)\">\r\n <div class=\"asw-icon asw-me-1\" [innerHTML]=\"icons[item.icon] | aswSafeHtml\"></div>\r\n {{item.displayName | aswTranslate}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </mat-expansion-panel>\r\n </ng-container>\r\n <ng-template #customAccordion>\r\n <mat-expansion-panel [expanded]=\"step === 0\" (opened)=\"setStep(0)\" hideToggle>\r\n <mat-expansion-panel-header class=\"asw-expansion-panel-header\">\r\n <mat-panel-title>\r\n {{controlCollectionName | aswTranslate}}\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div cdkDropList\r\n [cdkDropListData]=\"controls\"\r\n [cdkDropListConnectedTo]=\"dragDropService.dropLists\"\r\n [cdkDropListEnterPredicate]=\"allowDropPredicate\"\r\n cdkDropListSortingDisabled>\r\n <div class=\"asw-row\">\r\n <ng-container *ngFor=\"let item of controls\">\r\n <div class=\"asw-col-md-12\">\r\n <div class=\"asw-alert asw-d-flex asw-alert-primary align-items-center\"\r\n cdkDrag\r\n (cdkDragMoved)=\"dragMoved($event)\"\r\n (cdkDragReleased)=\"dragReleased($event)\">\r\n <div class=\"asw-icon asw-me-1\" [innerHTML]=\"icons[item.icon] | aswSafeHtml\"></div>\r\n {{item.displayN