@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
695 lines (692 loc) • 131 kB
JavaScript
import * as i7$1 from '@angular/cdk/drag-drop';
import { moveItemInArray, transferArrayItem, CdkDropList, DragDropModule } from '@angular/cdk/drag-drop';
import * as i0 from '@angular/core';
import { Inject, Injectable, EventEmitter, Output, Input, Component, ViewChild, APP_INITIALIZER, NgModule } from '@angular/core';
import * as i3$1 from '@asoftwareworld/form-builder-pro/common';
import { Constants, Icons, AswPipeModule, NotificationService } from '@asoftwareworld/form-builder-pro/common';
import { AswJsonPreviewDialog, AswJsonPreviewDialogModule } 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 * as i1 from '@asoftwareworld/form-builder-pro/core';
import { AswTranslateHttpLoader, AswLicense, AswTranslateModule, AswTranslateLoader, WatermarkService } from '@asoftwareworld/form-builder-pro/core';
import * as i2$1 from '@angular/material/dialog';
import { MatDialogModule } from '@angular/material/dialog';
import * as i5 from '@angular/common';
import { DOCUMENT, CommonModule } from '@angular/common';
import * as i6$1 from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i8$1 from '@angular/material/expansion';
import { MatExpansionModule } from '@angular/material/expansion';
import * as i9$1 from '@angular/material/card';
import { MatCardModule } from '@angular/material/card';
import * as i10$1 from '@asoftwareworld/form-builder-pro/form-control/column';
import { AswColumnModule } from '@asoftwareworld/form-builder-pro/form-control/column';
import * as i2 from '@asoftwareworld/form-builder-pro/form-control/autocomplete';
import { AswAutocompleteModule } from '@asoftwareworld/form-builder-pro/form-control/autocomplete';
import * as i3 from '@asoftwareworld/form-builder-pro/form-control/button';
import { AswButtonModule } from '@asoftwareworld/form-builder-pro/form-control/button';
import * as i4 from '@asoftwareworld/form-builder-pro/form-control/checkbox';
import { AswCheckboxModule } from '@asoftwareworld/form-builder-pro/form-control/checkbox';
import * as i5$1 from '@asoftwareworld/form-builder-pro/form-control/datepicker';
import { AswDatepickerModule } from '@asoftwareworld/form-builder-pro/form-control/datepicker';
import * as i6 from '@asoftwareworld/form-builder-pro/form-control/divider';
import { AswDividerModule } from '@asoftwareworld/form-builder-pro/form-control/divider';
import * as i7 from '@asoftwareworld/form-builder-pro/form-control/drawing';
import { AswDrawingModule } from '@asoftwareworld/form-builder-pro/form-control/drawing';
import * as i8 from '@asoftwareworld/form-builder-pro/form-control/gps';
import { AswGpsModule } from '@asoftwareworld/form-builder-pro/form-control/gps';
import * as i9 from '@asoftwareworld/form-builder-pro/form-control/header';
import { AswHeaderModule } from '@asoftwareworld/form-builder-pro/form-control/header';
import * as i10 from '@asoftwareworld/form-builder-pro/form-control/image';
import { AswImageModule } from '@asoftwareworld/form-builder-pro/form-control/image';
import * as i11 from '@asoftwareworld/form-builder-pro/form-control/multi-select';
import { AswMultiSelectModule } from '@asoftwareworld/form-builder-pro/form-control/multi-select';
import * as i12 from '@asoftwareworld/form-builder-pro/form-control/paragraph';
import { AswParagraphModule } from '@asoftwareworld/form-builder-pro/form-control/paragraph';
import * as i13 from '@asoftwareworld/form-builder-pro/form-control/select';
import { AswSelectModule } from '@asoftwareworld/form-builder-pro/form-control/select';
import * as i14 from '@asoftwareworld/form-builder-pro/form-control/signature';
import { AswSignatureModule } from '@asoftwareworld/form-builder-pro/form-control/signature';
import * as i15 from '@asoftwareworld/form-builder-pro/form-control/slide-toggle';
import { AswSlideToggleModule } from '@asoftwareworld/form-builder-pro/form-control/slide-toggle';
import * as i16 from '@asoftwareworld/form-builder-pro/form-control/textfield';
import { AswTextFieldModule } from '@asoftwareworld/form-builder-pro/form-control/textfield';
import * as i17 from '@asoftwareworld/form-builder-pro/form-control/radio-button';
import { AswRadioButtonModule } from '@asoftwareworld/form-builder-pro/form-control/radio-button';
import * as i18 from '@asoftwareworld/form-builder-pro/form-control/qrcode';
import { QrCodeModule } from '@asoftwareworld/form-builder-pro/form-control/qrcode';
import * as i19 from '@asoftwareworld/form-builder-pro/form-control/number';
import { AswNumberModule } from '@asoftwareworld/form-builder-pro/form-control/number';
import * as i20 from '@asoftwareworld/form-builder-pro/form-control/calculation';
import { AswCalculationModule } from '@asoftwareworld/form-builder-pro/form-control/calculation';
import * as i21 from '@asoftwareworld/form-builder-pro/form-control/fileupload';
import { AswFileUploadModule } from '@asoftwareworld/form-builder-pro/form-control/fileupload';
import * as i22 from '@asoftwareworld/form-builder-pro/form-control/tags';
import { AswTagsModule } from '@asoftwareworld/form-builder-pro/form-control/tags';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { MatGridListModule } from '@angular/material/grid-list';
/**
* @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
*/
const SIMPLE_CONTROLS = [
{
id: '',
guid: '',
icon: 'title',
displayName: 'Header',
controlType: 'header',
subtype: 'h1',
style: 'asw-text-start',
label: 'Header'
},
{
id: '',
guid: '',
icon: 'textFields',
displayName: 'Text field',
controlType: 'textfield',
tooltip: 'Enter Text',
value: '',
label: 'Text field',
style: 'outline',
isRequired: false,
isDisabled: false,
maxlength: 50,
minlength: 0
},
{
id: '',
guid: '',
icon: 'shortText',
displayName: 'Text area',
controlType: 'textarea',
tooltip: 'Enter Text',
value: '',
label: 'Text area',
style: 'outline',
isRequired: false,
isDisabled: false,
maxlength: 50,
minlength: 0
},
{
id: '',
guid: '',
icon: 'subject',
displayName: 'Paragraph',
controlType: 'paragraph',
label: 'Paragraph'
},
{
id: '',
guid: '',
icon: 'remove',
displayName: 'Divider',
controlType: 'divider'
},
{
id: '',
guid: '',
icon: 'toggleOn',
displayName: 'Slide Toggle',
controlType: 'slide-toggle',
label: 'Slide me!',
value: false,
color: 'primary',
isRequired: false,
isDisabled: false
},
{
id: '',
guid: '',
icon: 'smartButton',
displayName: 'Button',
controlType: 'button',
tooltip: 'Click button',
label: 'Submit',
type: 'button',
color: 'primary',
style: 'mat-raised-button'
}
];
const CHOICE_CONTROLS = [
{
id: '',
guid: '',
icon: 'corporateFare',
displayName: 'Autocomplete',
controlType: 'autocomplete',
tooltip: 'Select one',
label: 'Autocomplete',
value: '',
style: 'outline',
isRequired: false,
isDisabled: false,
options: [
{ key: 'option-1', value: 'Option 1', isChecked: false },
{ key: 'option-2', value: 'Option 2', isChecked: false },
{ key: 'option-3', value: 'Option 3', isChecked: false }
]
},
{
id: '',
guid: '',
icon: 'factCheck',
displayName: 'Select',
controlType: 'select',
tooltip: 'Select option',
label: 'Select',
style: 'outline',
value: '',
isRequired: false,
isDisabled: false,
options: [
{ key: 'option-1', value: 'Option 1', isChecked: false },
{ key: 'option-2', value: 'Option 2', isChecked: false },
{ key: 'option-3', value: 'Option 3', isChecked: false }
]
},
{
id: '',
guid: '',
icon: 'checklist',
displayName: 'Multi select',
controlType: 'multi-select',
tooltip: 'Select options',
label: 'Multi select',
value: '',
style: 'outline',
isRequired: false,
isDisabled: false,
options: [
{ key: 'option-1', value: 'Option 1', isChecked: false },
{ key: 'option-2', value: 'Option 2', isChecked: false },
{ key: 'option-3', value: 'Option 3', isChecked: false }
]
},
{
id: '',
guid: '',
icon: 'radioButtonChecked',
displayName: 'Radio Button',
controlType: 'radio',
tooltip: 'radio',
label: 'Radio Button',
value: '',
isRequired: false,
isDisabled: false,
labelType: 'text-editor',
options: [
{ key: 'option-1', value: 'Option 1', isChecked: false },
{ key: 'option-2', value: 'Option 2', isChecked: false },
{ key: 'option-3', value: 'Option 3', isChecked: false }
]
},
{
id: '',
guid: '',
icon: 'checkbox',
displayName: 'Checkbox',
controlType: 'checkbox',
tooltip: 'checkbox',
label: 'Checkbox',
isRequired: false,
isDisabled: false,
labelType: 'text-editor',
options: [
{ key: 'option-1', value: 'Option 1', isChecked: false },
{ key: 'option-2', value: 'Option 2', isChecked: false },
{ key: 'option-3', value: 'Option 3', isChecked: false }
]
}
];
const ADVANCED_CONTROLS = [
{
id: '',
guid: '',
icon: 'numbers',
displayName: 'Number',
controlType: 'number',
tooltip: 'Enter Number',
value: '',
label: 'Number',
style: 'outline',
isRequired: false,
isDisabled: false,
maxlength: 50,
minlength: 0
},
{
id: '',
guid: '',
icon: 'rupee',
displayName: 'Currency',
controlType: 'currency',
tooltip: 'Enter currency',
value: '',
currencySymbol: '₹',
label: 'Currency',
style: 'outline',
isRequired: false,
isDisabled: false,
maxlength: 50,
minlength: 0
},
{
id: '',
guid: '',
icon: 'calculate',
displayName: 'Calculation',
controlType: 'calculation',
tooltip: 'Enter calculation',
value: '',
label: 'Calculation',
placeholder: 'Field 1 + Field 2 = ',
style: 'outline',
operations: []
},
{
id: '',
guid: '',
icon: 'email',
displayName: 'Email',
controlType: 'email',
tooltip: 'Enter email',
value: '',
label: 'Email',
style: 'outline',
isRequired: false,
isDisabled: false,
maxlength: 50,
minlength: 0
},
{
id: '',
guid: '',
icon: 'call',
displayName: 'Phone number',
controlType: 'phone-number',
tooltip: 'Enter phone number',
value: '',
label: 'Phone number',
style: 'outline',
isRequired: false,
isDisabled: false,
maxlength: 15,
minlength: 0
},
// {
// id: '',
// guid: '',
// icon: 'tag',
// displayName: 'Tags',
// controlType: 'tags',
// tooltip: 'Select tags',
// label: 'Tags',
// value: [],
// style: 'outline',
// isRequired: false,
// isDisabled: false
// },
{
id: '',
guid: '',
icon: 'link',
displayName: 'Url',
controlType: 'url',
tooltip: 'Enter url',
value: '',
label: 'Url',
style: 'outline',
isRequired: false,
isDisabled: false,
minlength: 0
},
{
id: '',
guid: '',
icon: 'event',
displayName: 'Datepicker',
controlType: 'datepicker',
value: '',
tooltip: 'Choose a date',
label: 'Datepicker',
style: 'outline',
type: 'date',
mode: 'auto',
defaultView: 'month',
yearSelector: true,
twelveHour: true,
isRequired: false,
isDisabled: false,
isDisableWeekendDates: false
},
// {
// id: '',
// guid: '',
// icon: 'dateRange',
// displayName: 'Date Range',
// controlType: 'daterange',
// value: '',
// tooltip: 'Choose a date range',
// label: 'Date Range',
// style: 'outline',
// isRequired: false,
// isDisabled: false,
// isDisableWeekendDates: false
// },
{
id: '',
guid: '',
icon: 'sharedLocation',
displayName: 'GPS',
controlType: 'gps',
label: 'GPS',
tooltip: 'Enter Location',
latitude: '',
longitude: '',
style: 'outline',
value: '',
isRequired: false,
isDisabled: false
},
{
id: '',
guid: '',
icon: 'fileUpload',
displayName: 'File Upload',
controlType: 'fileupload',
label: 'File Upload',
value: [],
minSize: '',
maxSize: '',
fileTypes: 'rar, zip, png, PNG, pdf, jpg, JPG, jpeg, JPEG, doc, docx, gif, pptx, mp4, mov, flv, avi, mp3, xlsx, xls, csv, MOV',
allowMultipleFile: '2',
isRequired: false
}
];
const DIGITAL_CONTROLS = [
{
id: '',
guid: '',
icon: 'image',
displayName: 'Image',
controlType: 'image',
label: 'Image',
class: 'asw-text-start',
imageShape: 'asw-original',
height: 150,
width: 150,
imageUrl: '',
isUploadHide: true
},
{
id: '',
guid: '',
icon: 'gesture',
displayName: 'Signature',
controlType: 'signature',
label: 'Signature',
class: 'asw-text-start',
imageUrl: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv/bAEMABgQFBgUEBgYFBgcHBggKEAoKCQkKFA4PDBAXFBgYFxQWFhodJR8aGyMcFhYgLCAjJicpKikZHy0wLSgwJSgpKP/bAEMBBwcHCggKEwoKEygaFhooKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKP/AABEIATgDUgMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAACP/EABQQAQAAAAAAAAAAAAAAAAAAAAD/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AqkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH//2Q==',
height: '80',
width: '120',
isUploadHide: true
},
{
id: '',
guid: '',
icon: 'draw',
displayName: 'Drawing',
controlType: 'drawing',
label: 'Image',
class: 'asw-text-start',
imageUrl: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv/bAEMABgQFBgUEBgYFBgcHBggKEAoKCQkKFA4PDBAXFBgYFxQWFhodJR8aGyMcFhYgLCAjJicpKikZHy0wLSgwJSgpKP/bAEMBBwcHCggKEwoKEygaFhooKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKP/AABEIATgDUgMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAACP/EABQQAQAAAAAAAAAAAAAAAAAAAAD/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AqkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH//2Q==',
isRequired: false,
height: '200',
width: '600',
isUploadHide: true
},
{
id: '',
guid: '',
icon: 'qrCode',
displayName: 'QR Code',
controlType: 'qr-code',
density: {
errorCorrectionLevel: 'Q',
mode: 'Byte',
typeNumber: 0
},
logoStyle: {
hideBackgroundCircle: true,
logoSize: 0.3,
logoMargin: 0
},
backgroundColor: '#ffffff',
middleShape: {
color: '#000',
type: 'smooth'
},
cornerInnerShape: {
color: '#000',
type: ''
},
cornerOuterShape: {
color: '#000',
type: ''
},
logo: '',
width: 200,
height: 200,
type: 'canvas',
outerMargin: 0,
value: ''
}
];
const LAYOUT_CONTROLS = [
{
id: '',
guid: '',
label: 'Columns',
icon: 'column2',
displayName: '2 Column',
controlType: 'columns',
isColumnHidden: false,
columns: [
{
components: [],
size: 'md',
width: 6
},
{
components: [],
size: 'md',
width: 6
}
]
},
{
id: '',
guid: '',
label: 'Columns',
icon: 'column3',
displayName: '3 Column',
controlType: 'columns',
isColumnHidden: false,
columns: [
{
components: [],
size: 'md',
width: 4
},
{
components: [],
size: 'md',
width: 4
},
{
components: [],
size: 'md',
width: 4
}
]
},
{
id: '',
guid: '',
label: 'Columns',
icon: 'column4',
displayName: '4 Column',
controlType: 'columns',
isColumnHidden: false,
columns: [
{
components: [],
size: 'md',
width: 3
},
{
components: [],
size: 'md',
width: 3
},
{
components: [],
size: 'md',
width: 3
},
{
components: [],
size: 'md',
width: 3
}
]
},
{
id: '',
guid: '',
label: 'Columns',
icon: 'leftSplit',
displayName: 'Left Split',
controlType: 'columns',
isColumnHidden: false,
columns: [
{
components: [],
size: 'md',
width: 8
},
{
components: [],
size: 'md',
width: 4
}
]
},
{
id: '',
guid: '',
label: 'Columns',
icon: 'rightSplit',
displayName: 'Right Split',
controlType: 'columns',
isColumnHidden: false,
columns: [
{
components: [],
size: 'md',
width: 4
},
{
components: [],
size: 'md',
width: 8
}
]
}
];
class DragDropService {
document;
dropLists = [];
currentHoverDropListId;
constructor(document) {
this.document = document;
}
/**
* Register adds a new drop list to the dropList array that is used by each cdkDropList.
*/
register(dropList) {
this.dropLists.push(dropList);
}
/**
* DragMoved determines the correct cdkDropList beneath the mouse pointer.
*/
dragMoved(event) {
const elementFromPoint = this.document.elementFromPoint(event.pointerPosition.x, event.pointerPosition.y);
if (!elementFromPoint) {
this.currentHoverDropListId = undefined;
return;
}
const dropList = elementFromPoint.classList.contains('cdk-drop-list') ? elementFromPoint : elementFromPoint.closest('.cdk-drop-list');
if (!dropList) {
this.currentHoverDropListId = undefined;
return;
}
this.currentHoverDropListId = dropList.id;
}
dragReleased(event) {
this.currentHoverDropListId = undefined;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DragDropService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DragDropService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DragDropService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [{ type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }] });
/**
* @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 AswDragDrop {
control;
formContainer = [];
CSSFramework = CSSFrameworkEnum.Material;
propertyPersonalization = [];
patterns = [];
controlUpdated = new EventEmitter();
controlDeleted = new EventEmitter();
controlDuplicate = new EventEmitter();
controlChange = new EventEmitter();
buttonClick = new EventEmitter();
updatedControl(control) {
this.controlUpdated.emit(control);
}
deleteControl(control) {
this.controlDeleted.emit(control);
}
duplicateControl(control) {
this.controlDuplicate.emit(control);
}
onSelectionChange(control) {
this.controlChange.emit(control);
}
buttonClicked(type) {
this.buttonClick.emit(type);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswDragDrop, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: AswDragDrop, selector: "asw-drag-drop", inputs: { control: "control", formContainer: "formContainer", CSSFramework: "CSSFramework", propertyPersonalization: "propertyPersonalization", patterns: "patterns" }, outputs: { controlUpdated: "controlUpdated", controlDeleted: "controlDeleted", controlDuplicate: "controlDuplicate", controlChange: "controlChange", buttonClick: "buttonClick" }, ngImport: i0, template: "<ng-container *ngIf=\"control as control\">\r\n <ng-container [ngSwitch]=\"control.controlType\">\r\n <ng-container *ngSwitchCase=\"'autocomplete'\">\r\n <asw-autocomplete [control]=\"control\"\r\n [isPreviewTemplate]=\"true\"\r\n [CSSFramework]=\"CSSFramework\"\r\n [formControls]=\"formContainer\"\r\n [propertyPersonalization]=\"propertyPersonalization\"\r\n (autocompleteUpdateEvent)=\"updatedControl($event)\"\r\n (autocompleteDeleteEvent)=\"deleteControl($event)\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-autocomplete>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'tags'\">\r\n <asw-tags [control]=\"control\"\r\n [isPreviewTemplate]=\"true\"\r\n [CSSFramework]=\"CSSFramework\"\r\n [patterns]=\"patterns\"\r\n [propertyPersonalization]=\"propertyPersonalization\"\r\n (tagsUpdateEvent)=\"updatedControl($event)\"\r\n (tagsDeleteEvent)=\"deleteControl($event)\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-tags>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'header'\">\r\n <asw-header [control]=\"control\"\r\n [isPreviewTemplate]=\"true\"\r\n [CSSFramework]=\"CSSFramework\"\r\n [propertyPersonalization]=\"propertyPersonalization\"\r\n (headerUpdateEvent)=\"updatedControl($event)\"\r\n (headerDeleteEvent)=\"deleteControl($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-header>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'qr-code'\">\r\n <asw-qrcode [control]=\"control\"\r\n [isPreviewTemplate]=\"true\"\r\n [CSSFramework]=\"CSSFramework\"\r\n (qrCodeUpdateEvent)=\"updatedControl($event)\"\r\n (qrCodeDeleteEvent)=\"deleteControl($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-qrcode>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'image'\">\r\n <asw-image [control]=\"control\"\r\n [isPreviewTemplate]=\"true\"\r\n [CSSFramework]=\"CSSFramework\"\r\n (imageUpdateEvent)=\"updatedControl($event)\"\r\n (imageDeleteEvent)=\"deleteControl($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-image>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'textfield'\">\r\n <asw-textfield [control]=\"control\"\r\n [isPreviewTemplate]=\"true\"\r\n [CSSFramework]=\"CSSFramework\"\r\n [patterns]=\"patterns\"\r\n [propertyPersonalization]=\"propertyPersonalization\"\r\n (textFieldUpdateEvent)=\"updatedControl($event)\"\r\n (textFieldDeleteEvent)=\"deleteControl($event)\"\r\n (aswModelChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-textfield>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'email'\">\r\n <asw-textfield [control]=\"control\"\r\n [isPreviewTemplate]=\"true\"\r\n [CSSFramework]=\"CSSFramework\"\r\n [patterns]=\"patterns\"\r\n [propertyPersonalization]=\"propertyPersonalization\"\r\n (textFieldUpdateEvent)=\"updatedControl($event)\"\r\n (textFieldDeleteEvent)=\"deleteControl($event)\"\r\n (aswModelChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-textfield>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'url'\">\r\n <asw-textfield [control]=\"control\"\r\n [isPreviewTemplate]=\"true\"\r\n [CSSFramework]=\"CSSFramework\"\r\n [patterns]=\"patterns\"\r\n [propertyPersonalization]=\"propertyPersonalization\"\r\n (textFieldUpdateEvent)=\"updatedControl($event)\"\r\n (textFieldDeleteEvent)=\"deleteControl($event)\"\r\n (aswModelChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-textfield>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'currency'\">\r\n <asw-number [control]=\"control\"\r\n [isPreviewTemplate]=\"true\"\r\n [CSSFramework]=\"CSSFramework\"\r\n [patterns]=\"patterns\"\r\n [formControls]=\"formContainer\"\r\n [propertyPersonalization]=\"propertyPersonalization\"\r\n (numberUpdateEvent)=\"updatedControl($event)\"\r\n (numberDeleteEvent)=\"deleteControl($event)\"\r\n (aswModelChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-number>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'phone-number'\">\r\n <asw-textfield [control]=\"control\"\r\n [isPreviewTemplate]=\"true\"\r\n [patterns]=\"patterns\"\r\n [CSSFramework]=\"CSSFramework\"\r\n [propertyPersonalization]=\"propertyPersonalization\"\r\n (textFieldUpdateEvent)=\"updatedControl($event)\"\r\n (textFieldDeleteEvent)=\"deleteControl($event)\"\r\n (aswModelChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-textfield>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <asw-textfield [control]=\"control\"\r\n [isPreviewTemplate]=\"true\"\r\n [patterns]=\"patterns\"\r\n [CSSFramework]=\"CSSFramework\"\r\n [propertyPersonalization]=\"propertyPersonalization\"\r\n (textFieldUpdateEvent)=\"updatedControl($event)\"\r\n (textFieldDeleteEvent)=\"deleteControl($event)\"\r\n (aswModelChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-textfield>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <asw-number [control]=\"control\"\r\n [isPreviewTemplate]=\"true\"\r\n [patterns]=\"patterns\"\r\n [CSSFramework]=\"CSSFramework\"\r\n [formControls]=\"formContainer\"\r\n [propertyPersonalization]=\"propertyPersonalization\"\r\n (numberUpdateEvent)=\"updatedControl($event)\"\r\n (numberDeleteEvent)=\"deleteControl($event)\"\r\n (aswModelChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-number>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'calculation'\">\r\n <asw-calculation [control]=\"control\"\r\n [formControls]=\"formContainer\"\r\n [CSSFramework]=\"CSSFramework\"\r\n [isPreviewTemplate]=\"true\"\r\n [propertyPersonalization]=\"propertyPersonalization\"\r\n (calculationUpdateEvent)=\"updatedControl($event)\"\r\n (calculationDeleteEvent)=\"deleteControl($event)\"\r\n (aswModelChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-calculation>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'select'\">\r\n <asw-select [control]=\"control\"\r\n [isPreviewTemplate]=\"true\"\r\n [CSSFramework]=\"CSSFramework\"\r\n [formControls]=\"formContainer\"\r\n [propertyPersonalization]=\"propertyPersonalization\"\r\n (selectUpdateEvent)=\"updatedControl($event)\"\r\n (selectDeleteEvent)=\"deleteControl($event)\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-select>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'multi-select'\">\r\n <asw-multi-select [control]=\"control\"\r\n [isPreviewTemplate]=\"true\"\r\n [CSSFramework]=\"CSSFramework\"\r\n [formControls]=\"formContainer\"\r\n [propertyPersonalization]=\"propertyPersonalization\"\r\n (multiSelectUpdateEvent)=\"updatedControl($event)\"\r\n (multiSelectDeleteEvent)=\"deleteControl($event)\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-multi-select>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'radio'\">\r\n <asw-radio-button [control]=\"control\"\r\n [isPreviewTemplate]=\"true\"\r\n [CSSFramework]=\"CSSFramework\"\r\n [formControls]=\"formContainer\"\r\n [propertyPersonalization]=\"propertyPersonalization\"\r\n (radioButtonUpdateEvent)=\"updatedControl($event)\"\r\n (radioButtonDeleteEvent)=\"deleteControl($event)\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-radio-button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <asw-checkbox [control]=\"control\"\r\n [isPreviewTemplate]=\"true\"\r\n [CSSFramework]=\"CSSFramework\"\r\n [formControls]=\"formContainer\"\r\n [propertyPersonalization]=\"propertyPersonalization\"\r\n (checkboxUpdateEvent)=\"updatedControl($event)\"\r\n (checkboxDeleteEvent)=\"deleteControl($event)\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-checkbox>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'datepicker'\">\r\n <asw-datepicker [control]=\"control\"\r\n [isPreviewTemplate]=\"true\"\r\n [CSSFramework]=\"CSSFramework\"\r\n [propertyPersonalization]=\"propertyPersonalization\"\r\n (datepickerUpdateEvent)=\"updatedControl($event)\"\r\n (datepickerDeleteEvent)=\"deleteControl($event)\"\r\n (dateChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-datepicker>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'daterange'\">\r\n <asw-datepicker [control]=\"control\"\r\n [isPreviewTemplate]=\"true\"\r\n [CSSFramework]=\"CSSFramework\"\r\n [propertyPersonalization]=\"propertyPersonalization\"\r\n (datepickerUpdateEvent)=\"updatedControl($event)\"\r\n (datepickerDeleteEvent)=\"deleteControl($event)\"\r\n (dateChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-datepicker>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <asw-button [control]=\"control\"\r\n [isPreviewTemplate]=\"true\"\r\n [CSSFramework]=\"CSSFramework\"\r\n [propertyPersonalization]=\"propertyPersonalization\"\r\n (buttonUpdateEvent)=\"updatedControl($event)\"\r\n (buttonDeleteEvent)=\"deleteControl($event)\"\r\n (buttonClickEvent)=\"buttonClicked($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-button> \r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'paragraph'\">\r\n <asw-paragraph [control]=\"control\"\r\n [isPreviewTemplate]=\"true\"\r\n (paragraphUpdateEvent)=\"updatedControl($event)\"\r\n (paragraphDeleteEvent)=\"deleteControl($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-paragraph>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'divider'\">\r\n <asw-divider [control]=\"control\"\r\n [isPreviewTemplate]=\"true\"\r\n (dividerDeleteEvent)=\"deleteControl($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-divider>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'slide-toggle'\">\r\n <asw-slide-toggle [control]=\"control\"\r\n [isPreviewTemplate]=\"true\"\r\n [CSSFramework]=\"CSSFramework\"\r\n [propertyPersonalization]=\"propertyPersonalization\"\r\n (slidetoggleUpdateEvent)=\"updatedControl($event)\"\r\n (slidetoggleDeleteEvent)=\"deleteControl($event)\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-slide-toggle>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'gps'\">\r\n <asw-gps [control]=\"control\"\r\n [isPreviewTemplate]=\"true\"\r\n [CSSFramework]=\"CSSFramework\"\r\n [propertyPersonalization]=\"propertyPersonalization\"\r\n (gpsUpdateEvent)=\"updatedControl($event)\"\r\n (gpsDeleteEvent)=\"deleteControl($event)\"\r\n (gpsAddressChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-gps>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'signature'\">\r\n <asw-signature [control]=\"control\"\r\n [isPreviewTemplate]=\"true\"\r\n [CSSFramework]=\"CSSFramework\"\r\n (signatureUpdateEvent)=\"updatedControl($event)\"\r\n (signatureDeleteEvent)=\"deleteControl($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-signature>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'drawing'\">\r\n <asw-drawing [control]=\"control\"\r\n [isPreviewTemplate]=\"true\"\r\n [CSSFramework]=\"CSSFramework\"\r\n (drawingUpdateEvent)=\"updatedControl($event)\"\r\n (drawingDeleteEvent)=\"deleteControl($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-drawing>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'fileupload'\">\r\n <asw-fileupload [control]=\"control\"\r\n [isPreviewTemplate]=\"true\"\r\n [CSSFramework]=\"CSSFramework\"\r\n [propertyPersonalization]=\"propertyPersonalization\"\r\n (fileUploadUpdateEvent)=\"updatedControl($event)\"\r\n (fileUploadDeleteEvent)=\"deleteControl($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-fileupload>\r\n </ng-container>\r\n </ng-container>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.AswAutocomplete, selector: "asw-autocomplete", inputs: ["control", "CSSFramework", "isPreviewTemplate", "propertyPersonalization", "formControls"], outputs: ["autocompleteUpdateEvent", "autocompleteDeleteEvent", "selectionChange", "duplicateControl"] }, { kind: "component", type: i3.AswButton, selector: "asw-button", inputs: ["control", "CSSFramework", "isPreviewTemplate", "propertyPersonalization"], outputs: ["buttonClickEvent", "buttonUpdateEvent", "buttonDeleteEvent", "duplicateControl"] }, { kind: "component", type: i4.AswCheckbox, selector: "asw-checkbox", inputs: ["control", "propertyPersonalization", "isPreviewTemplate", "CSSFramework", "formControls"], outputs: ["checkboxUpdateEvent", "checkboxDeleteEvent", "selectionChange", "duplicateControl"] }, { kind: "component", type: i5$1.AswDatepicker, selector: "asw-datepicker", inputs: ["control", "CSSFramework", "isPreviewTemplate", "propertyPersonalization"], outputs: ["datepickerUpdateEvent", "datepickerDeleteEvent", "dateChange", "duplicateControl"] }, { kind: "component", type: i6.AswDivider, selector: "asw-divider", inputs: ["control", "isPreviewTemplate"], outputs: ["dividerDeleteEvent", "duplicateControl"] }, { kind: "component", type: i7.AswDrawing, selector: "asw-drawing", inputs: ["control", "CSSFramework", "isPreviewTemplate"], outputs: ["drawingUpdateEvent", "drawingDeleteEvent", "duplicateControl"] }, { kind: "component", type: i8.AswGps, selector: "asw-gps", inputs: ["control", "CSSFramework", "isPreviewTemplate", "propertyPersonalization"], outputs: ["gpsUpdateEvent", "gpsDeleteEvent", "gpsAddressChange", "duplicateControl"] }, { kind: "component", type: i9.AswHeader, selector: "asw-header", inputs: ["control", "CSSFramework", "isPreviewTemplate", "propertyPersonalization"], outputs: ["headerUpdateEvent", "headerDeleteEvent", "duplicateControl"] }, { kind: "component", type: i10.AswImage, selector: "asw-image", inputs: ["control", "isPreviewTemplate", "CSSFramework"], outputs: ["imageUpdateEvent", "imageDeleteEvent", "duplicateControl"] }, { kind: "component", type: i11.AswMultiSelect, selector: "asw-multi-select", inputs: ["control", "propertyPersonalization", "isPreviewTemplate", "CSSFramework", "formControls"], outputs: ["multiSelectUpdateEvent", "multiSelectDeleteEvent", "selectionChange", "duplicateControl"] }, { kind: "component", type: i12.AswParagraph, selector: "asw-paragraph", inputs: ["control", "isPreviewTemplate"], outputs: ["paragraphUpdateEvent", "paragraphDeleteEvent", "duplicateControl"] }, { kind: "component", type: i13.AswSelect, selector: "asw-select", inputs: ["control", "CSSFramework", "isPreviewTemplate", "propertyPersonalization", "formControls"], outputs: ["selectUpdateEvent", "selectDeleteEvent", "selectionChange", "duplicateControl"] }, { kind: "component", type: i14.AswSignature, selector: "asw-signature", inputs: ["control", "CSSFramework", "isPreviewTemplate"], outputs: ["signatureUpdateEvent", "signatureDeleteEvent", "duplicateControl"] }, { kind: "component", type: i15.AswSlideToggle, selector: "asw-slide-toggle", inputs: ["control", "CSSFramework", "isPreviewTemplate", "propertyPersonalization"], outputs: ["slidetoggleUpdateEvent", "slidetoggleDeleteEvent", "selectionChange", "duplicateControl"] }, { kind: "component", type: i16.AswTextField, selector: "asw-textfield", inputs: ["control", "propertyPersonalization", "isPreviewTemplate", "CSSFramework", "patterns"], outputs: ["textFieldUpdateEvent", "textFieldDeleteEvent", "aswModelChange", "duplicateControl"] }, { kind: "component", type: i17.AswRadioButton, selector: "asw-radio-button", inputs: ["control", "propertyPersonalization", "isPreviewTemplate", "CSSFramework", "formControls"], outputs: ["radioButtonUpdateEvent", "radioButtonDeleteEvent", "selectionChange", "duplicateControl"] }, { kind: "component", type: i18.AswQrCode, selector: "asw-qrcode", inputs: ["control", "CSSFramework", "isPreviewTemplate"], outputs: ["qrCodeUpdateEvent", "qrCodeDeleteEvent", "duplicateControl"] }, { kind: "component", type: i19.AswNumber, selector: "asw-number", inputs: ["control", "formControls", "CSSFramework", "isPreviewTemplate", "propertyPersonalization", "patterns"], outputs: ["numberUpdateEvent", "numberDeleteEvent", "aswModelChange", "duplicateControl"] }, { kind: "component", type: i20.AswCalculation, selector: "asw-calculation", inputs: ["control", "formControls", "CSSFramework", "isPreviewTemplate", "propertyPersonalization"], outputs: ["calculationUpdateEvent", "calculationDeleteEvent", "aswModelChange", "duplicateControl"] }, { kind: "component", type: i21.AswFileUpload, selector: "asw-fileupload", inputs: ["control", "CSSFramework", "isPreviewTemplate", "propertyPersonalization"], outputs: ["fileUploadUpdateEvent", "fileUploadDeleteEvent", "onfileUploadChange", "duplicateControl"] }, { kind: "component", type: i22.AswTags, selector: "asw-tags", inputs: ["control", "propertyPersonaliz