@asoftwareworld/form-builder-pro/fesm2022/asoftwareworld-form-builder-pro-preview-template.mjs

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

import * as i0 from '@angular/core';
import { EventEmitter, ViewChild, Output, Input, Component, APP_INITIALIZER, NgModule } from '@angular/core';
import * as i2 from '@asoftwareworld/form-builder-pro/common';
import { Constants, NotificationService } from '@asoftwareworld/form-builder-pro/common';
import { ObjectUtils } from '@asoftwareworld/form-builder-pro/utils';
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
import { CSSFrameworkEnum } from '@asoftwareworld/form-builder-pro/api';
import * as i1 from '@asoftwareworld/form-builder-pro/core';
import { AswLicense, WatermarkService } from '@asoftwareworld/form-builder-pro/core';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i4 from '@asoftwareworld/form-builder-pro/form-control/autocomplete';
import { AswAutocompleteModule } from '@asoftwareworld/form-builder-pro/form-control/autocomplete';
import * as i5 from '@asoftwareworld/form-builder-pro/form-control/button';
import { AswButtonModule } from '@asoftwareworld/form-builder-pro/form-control/button';
import * as i6 from '@asoftwareworld/form-builder-pro/form-control/checkbox';
import { AswCheckboxModule } from '@asoftwareworld/form-builder-pro/form-control/checkbox';
import * as i7 from '@asoftwareworld/form-builder-pro/form-control/datepicker';
import { AswDatepickerModule } from '@asoftwareworld/form-builder-pro/form-control/datepicker';
import * as i8 from '@asoftwareworld/form-builder-pro/form-control/divider';
import { AswDividerModule } from '@asoftwareworld/form-builder-pro/form-control/divider';
import * as i9 from '@asoftwareworld/form-builder-pro/form-control/drawing';
import { AswDrawingModule } from '@asoftwareworld/form-builder-pro/form-control/drawing';
import * as i10 from '@asoftwareworld/form-builder-pro/form-control/gps';
import { AswGpsModule } from '@asoftwareworld/form-builder-pro/form-control/gps';
import * as i11 from '@asoftwareworld/form-builder-pro/form-control/header';
import { AswHeaderModule } from '@asoftwareworld/form-builder-pro/form-control/header';
import * as i12 from '@asoftwareworld/form-builder-pro/form-control/image';
import { AswImageModule } from '@asoftwareworld/form-builder-pro/form-control/image';
import * as i13 from '@asoftwareworld/form-builder-pro/form-control/multi-select';
import { AswMultiSelectModule } from '@asoftwareworld/form-builder-pro/form-control/multi-select';
import * as i14 from '@asoftwareworld/form-builder-pro/form-control/paragraph';
import { AswParagraphModule } from '@asoftwareworld/form-builder-pro/form-control/paragraph';
import * as i15 from '@asoftwareworld/form-builder-pro/form-control/select';
import { AswSelectModule } from '@asoftwareworld/form-builder-pro/form-control/select';
import * as i16 from '@asoftwareworld/form-builder-pro/form-control/signature';
import { AswSignatureModule } from '@asoftwareworld/form-builder-pro/form-control/signature';
import * as i17 from '@asoftwareworld/form-builder-pro/form-control/slide-toggle';
import { AswSlideToggleModule } from '@asoftwareworld/form-builder-pro/form-control/slide-toggle';
import * as i18 from '@asoftwareworld/form-builder-pro/form-control/textfield';
import { AswTextFieldModule } from '@asoftwareworld/form-builder-pro/form-control/textfield';
import * as i19 from '@asoftwareworld/form-builder-pro/form-control/radio-button';
import { AswRadioButtonModule } from '@asoftwareworld/form-builder-pro/form-control/radio-button';
import * as i20 from '@angular/material/card';
import { MatCardModule } from '@angular/material/card';
import * as i21 from '@asoftwareworld/form-builder-pro/form-control/qrcode';
import { QrCodeModule } from '@asoftwareworld/form-builder-pro/form-control/qrcode';
import * as i22 from '@asoftwareworld/form-builder-pro/form-control/number';
import { AswNumberModule } from '@asoftwareworld/form-builder-pro/form-control/number';
import * as i23 from '@asoftwareworld/form-builder-pro/form-control/calculation';
import { AswCalculationModule } from '@asoftwareworld/form-builder-pro/form-control/calculation';
import * as i24 from '@asoftwareworld/form-builder-pro/form-control/fileupload';
import { AswFileUploadModule } from '@asoftwareworld/form-builder-pro/form-control/fileupload';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatSnackBarModule } from '@angular/material/snack-bar';

/**
 * @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 AswPreviewTemplate {
    translate;
    notificationService;
    constants = Constants;
    formContainer = [];
    currentLanguage = 'en';
    cssFramework = CSSFrameworkEnum.Material;
    buttonClick = new EventEmitter();
    aswModelChange = new EventEmitter();
    printPdf;
    constructor(translate, notificationService) {
        this.translate = translate;
        this.notificationService = notificationService;
    }
    ngOnInit() {
        this.translate.use(this.currentLanguage);
    }
    updatedControl(control) {
        this.updateControlFromContainer(control);
    }
    updateControlFromContainer(draggedItem) {
        this.formContainer.filter((control, index) => {
            if (control.guid === draggedItem.guid) {
                this.formContainer.splice(index, 1, draggedItem);
            }
            else {
                this.updateChildControl(control, draggedItem);
            }
        });
    }
    updateChildControl(control, draggedItem) {
        control.columns?.forEach((column) => {
            column.components.forEach((component, childIndex) => {
                if (component.guid === draggedItem.guid) {
                    column.components.splice(childIndex, 1, draggedItem);
                }
                if (component.controlType === 'columns') {
                    this.updateChildControl(component, draggedItem);
                }
            });
        });
    }
    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) {
        this.aswModelChange.emit(control);
    }
    async makePdf() {
        const pdf = new jsPDF('p', 'mm', 'a4');
        html2canvas(this.printPdf.nativeElement, { scale: 1 }).then((canvas) => {
            const imgData = canvas.toDataURL('image/png');
            const imgWidth = 210;
            const pageHeight = 295;
            const imgHeight = (canvas.height * imgWidth) / canvas.width;
            let heightLeft = imgHeight;
            let position = 0;
            pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
            heightLeft -= pageHeight;
            while (heightLeft >= 0) {
                position = heightLeft - imgHeight;
                pdf.addPage();
                pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
                heightLeft -= pageHeight;
            }
            window.open(pdf.output('bloburl'));
        });
        // const htmlElement = this.printPdf.nativeElement;
        // const width = htmlElement.clientWidth;
        // const height = htmlElement.clientHeight;
        // // debugger
        // // const pdf = new jsPDF({ unit: 'in', format: 'a0', orientation: 'portrait' });
        // // pdf.html(htmlElement, {
        // //     html2canvas: {
        // //         scale: 0.3, //this was my solution, you have to adjust to your size
        // //         width: 1000 //for some reason width does nothing
        // //     },
        // //     callback: (doc: any) => {
        // //         window.open(doc.output("bloburl"));
        // //     }
        // // });
        // html2canvas(htmlElement).then(canvas => {
        //     // Few necessary setting options
        //     const imgWidth = 208;
        //     const pageHeight = 295;
        //     const imgHeight = canvas.height * imgWidth / canvas.width;
        //     const heightLeft = imgHeight;
        //     const contentDataURL = canvas.toDataURL('image/png');
        //     const pdf = new jsPDF('p', 'mm', 'a4'); // A4 size page of PDF
        //     const position = 0;
        //     pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
        //     window.open(pdf.output('bloburl')) // Generated PDF
        // });
        // var ratio = width / height;
        // html2canvas(htmlElement)
        //     .then((successRef: any) => {
        //         var doc = new jsPDF('p', 'pt', 'a4');
        //         var img = successRef.toDataURL('image/png');
        //         // Add image Canvas to PDF
        //         const bufferX = 5;
        //         const bufferY = 5;
        //         const imgProps = (<any>doc).getImageProperties(img);
        //         const pdfWidth = doc.internal.pageSize.getWidth() - 2 * bufferX;
        //         const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
        //         doc.addImage(
        //             img,
        //             'PNG',
        //             bufferX,
        //             bufferY,
        //             pdfWidth,
        //             pdfHeight,
        //             undefined,
        //             'FAST'
        //         );
        //         return doc;
        //     })
        //     .then((doc: any) => {
        //         window.open(doc.output('bloburl'));
        //     });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswPreviewTemplate, deps: [{ token: i1.AswTranslateService }, { token: i2.NotificationService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: AswPreviewTemplate, selector: "asw-preview-template", inputs: { formContainer: "formContainer", currentLanguage: "currentLanguage", cssFramework: "cssFramework" }, outputs: { buttonClick: "buttonClick", aswModelChange: "aswModelChange" }, viewQueries: [{ propertyName: "printPdf", first: true, predicate: ["printPdf"], descendants: true }], ngImport: i0, template: "<!-- <div class=\"asw-row\">\r\n    <div class=\"asw-col-md-12 text-right\">\r\n        <button mat-raised-button \r\n                type=\"button\"\r\n                class=\"asw-button asw-button-secondary asw-button-sm float-end mb-2\" (click)=\"makePdf()\">Download Pdf\r\n        </button>                \r\n    </div>\r\n</div> -->\r\n<div class=\"asw-row\" #printPdf>\r\n    <div class=\"asw-col-md-12\">\r\n        <mat-card>\r\n            <mat-card-content>\r\n                <ng-container *ngFor=\"let control of formContainer\">\r\n                    <ng-container *ngTemplateOutlet=\"childContainer, context:{control:control}\"></ng-container>\r\n                </ng-container>\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                            <ng-container *ngSwitchCase=\"'autocomplete'\">\r\n                                <asw-autocomplete \r\n                                    [control]=\"control\"\r\n                                    [CSSFramework]=\"cssFramework\"\r\n                                    (selectionChange)=\"onSelectionChange($event)\">\r\n                                </asw-autocomplete>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'header'\">\r\n                                <asw-header [control]=\"control\" [CSSFramework]=\"cssFramework\">\r\n                                </asw-header>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'qr-code'\">\r\n                                <asw-qrcode [control]=\"control\" [CSSFramework]=\"cssFramework\">\r\n                                </asw-qrcode>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'image'\">\r\n                                <asw-image [control]=\"control\"\r\n                                    [CSSFramework]=\"cssFramework\"\r\n                                    (imageUpdateEvent)=\"updatedControl($event)\">\r\n                                </asw-image>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'textfield'\">\r\n                                <asw-textfield [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (aswModelChange)=\"onSelectionChange($event)\">\r\n                                </asw-textfield>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'email'\">\r\n                                <asw-textfield [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (aswModelChange)=\"onSelectionChange($event)\">\r\n                                </asw-textfield>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'url'\">\r\n                                <asw-textfield [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (aswModelChange)=\"onSelectionChange($event)\">\r\n                                </asw-textfield>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'phone-number'\">\r\n                                <asw-textfield [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (aswModelChange)=\"onSelectionChange($event)\">\r\n                                </asw-textfield>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'currency'\">\r\n                                <asw-number [control]=\"control\"\r\n                                    [formControls]=\"formContainer\"\r\n                                    [CSSFramework]=\"cssFramework\"\r\n                                    (aswModelChange)=\"onSelectionChange($event)\">\r\n                                </asw-number>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'textarea'\">\r\n                                <asw-textfield [control]=\"control\"\r\n                                    [CSSFramework]=\"cssFramework\"\r\n                                    (aswModelChange)=\"onSelectionChange($event)\">\r\n                                </asw-textfield>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'number'\">\r\n                                <asw-number [control]=\"control\"\r\n                                    [formControls]=\"formContainer\"\r\n                                    [CSSFramework]=\"cssFramework\"\r\n                                    (aswModelChange)=\"onSelectionChange($event)\">\r\n                                </asw-number>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'calculation'\">\r\n                                <asw-calculation [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (aswModelChange)=\"onSelectionChange($event)\">\r\n                                </asw-calculation>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'select'\">\r\n                                <asw-select [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (selectionChange)=\"onSelectionChange($event)\">\r\n                                </asw-select>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'multi-select'\">\r\n                                <asw-multi-select [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (selectionChange)=\"onSelectionChange($event)\">\r\n                                </asw-multi-select>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'radio'\">\r\n                                <asw-radio-button [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (selectionChange)=\"onSelectionChange($event)\">\r\n                                </asw-radio-button>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                                <asw-checkbox [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (selectionChange)=\"onSelectionChange($event)\">\r\n                                </asw-checkbox>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'datepicker'\">\r\n                                <asw-datepicker [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (dateChange)=\"onSelectionChange($event)\">\r\n                                </asw-datepicker>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'daterange'\">\r\n                                <asw-datepicker [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (dateChange)=\"onSelectionChange($event)\">\r\n                                </asw-datepicker>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'button'\">\r\n                                <asw-button [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (buttonClickEvent)=\"buttonClicked($event)\">\r\n                                </asw-button>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'paragraph'\">\r\n                                <asw-paragraph [control]=\"control\">\r\n                                </asw-paragraph>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'divider'\">\r\n                                <asw-divider [control]=\"control\">\r\n                                </asw-divider>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'slide-toggle'\">\r\n                                <asw-slide-toggle [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (selectionChange)=\"onSelectionChange($event)\">\r\n                                </asw-slide-toggle>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'gps'\">\r\n                                <asw-gps [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (gpsAddressChange)=\"onSelectionChange($event)\">\r\n                                </asw-gps>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'signature'\">\r\n                                <asw-signature [control]=\"control\" [CSSFramework]=\"cssFramework\">\r\n                                </asw-signature>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'drawing'\">\r\n                                <asw-drawing [control]=\"control\" [CSSFramework]=\"cssFramework\">\r\n                                </asw-drawing>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'fileupload'\">\r\n                                <asw-fileupload [control]=\"control\" [CSSFramework]=\"cssFramework\">\r\n                                </asw-fileupload>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #layout>\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                                        <ng-container *ngFor=\"let component of column.components\">\r\n                                            <ng-container *ngTemplateOutlet=\"childContainer, context:{control:component}\"></ng-container>\r\n                                        </ng-container>\r\n                                    </div>\r\n                                </div>\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>", 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: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4.AswAutocomplete, selector: "asw-autocomplete", inputs: ["control", "CSSFramework", "isPreviewTemplate", "propertyPersonalization", "formControls"], outputs: ["autocompleteUpdateEvent", "autocompleteDeleteEvent", "selectionChange", "duplicateControl"] }, { kind: "component", type: i5.AswButton, selector: "asw-button", inputs: ["control", "CSSFramework", "isPreviewTemplate", "propertyPersonalization"], outputs: ["buttonClickEvent", "buttonUpdateEvent", "buttonDeleteEvent", "duplicateControl"] }, { kind: "component", type: i6.AswCheckbox, selector: "asw-checkbox", inputs: ["control", "propertyPersonalization", "isPreviewTemplate", "CSSFramework", "formControls"], outputs: ["checkboxUpdateEvent", "checkboxDeleteEvent", "selectionChange", "duplicateControl"] }, { kind: "component", type: i7.AswDatepicker, selector: "asw-datepicker", inputs: ["control", "CSSFramework", "isPreviewTemplate", "propertyPersonalization"], outputs: ["datepickerUpdateEvent", "datepickerDeleteEvent", "dateChange", "duplicateControl"] }, { kind: "component", type: i8.AswDivider, selector: "asw-divider", inputs: ["control", "isPreviewTemplate"], outputs: ["dividerDeleteEvent", "duplicateControl"] }, { kind: "component", type: i9.AswDrawing, selector: "asw-drawing", inputs: ["control", "CSSFramework", "isPreviewTemplate"], outputs: ["drawingUpdateEvent", "drawingDeleteEvent", "duplicateControl"] }, { kind: "component", type: i10.AswGps, selector: "asw-gps", inputs: ["control", "CSSFramework", "isPreviewTemplate", "propertyPersonalization"], outputs: ["gpsUpdateEvent", "gpsDeleteEvent", "gpsAddressChange", "duplicateControl"] }, { kind: "component", type: i11.AswHeader, selector: "asw-header", inputs: ["control", "CSSFramework", "isPreviewTemplate", "propertyPersonalization"], outputs: ["headerUpdateEvent", "headerDeleteEvent", "duplicateControl"] }, { kind: "component", type: i12.AswImage, selector: "asw-image", inputs: ["control", "isPreviewTemplate", "CSSFramework"], outputs: ["imageUpdateEvent", "imageDeleteEvent", "duplicateControl"] }, { kind: "component", type: i13.AswMultiSelect, selector: "asw-multi-select", inputs: ["control", "propertyPersonalization", "isPreviewTemplate", "CSSFramework", "formControls"], outputs: ["multiSelectUpdateEvent", "multiSelectDeleteEvent", "selectionChange", "duplicateControl"] }, { kind: "component", type: i14.AswParagraph, selector: "asw-paragraph", inputs: ["control", "isPreviewTemplate"], outputs: ["paragraphUpdateEvent", "paragraphDeleteEvent", "duplicateControl"] }, { kind: "component", type: i15.AswSelect, selector: "asw-select", inputs: ["control", "CSSFramework", "isPreviewTemplate", "propertyPersonalization", "formControls"], outputs: ["selectUpdateEvent", "selectDeleteEvent", "selectionChange", "duplicateControl"] }, { kind: "component", type: i16.AswSignature, selector: "asw-signature", inputs: ["control", "CSSFramework", "isPreviewTemplate"], outputs: ["signatureUpdateEvent", "signatureDeleteEvent", "duplicateControl"] }, { kind: "component", type: i17.AswSlideToggle, selector: "asw-slide-toggle", inputs: ["control", "CSSFramework", "isPreviewTemplate", "propertyPersonalization"], outputs: ["slidetoggleUpdateEvent", "slidetoggleDeleteEvent", "selectionChange", "duplicateControl"] }, { kind: "component", type: i18.AswTextField, selector: "asw-textfield", inputs: ["control", "propertyPersonalization", "isPreviewTemplate", "CSSFramework", "patterns"], outputs: ["textFieldUpdateEvent", "textFieldDeleteEvent", "aswModelChange", "duplicateControl"] }, { kind: "component", type: i19.AswRadioButton, selector: "asw-radio-button", inputs: ["control", "propertyPersonalization", "isPreviewTemplate", "CSSFramework", "formControls"], outputs: ["radioButtonUpdateEvent", "radioButtonDeleteEvent", "selectionChange", "duplicateControl"] }, { kind: "component", type: i20.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i20.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i21.AswQrCode, selector: "asw-qrcode", inputs: ["control", "CSSFramework", "isPreviewTemplate"], outputs: ["qrCodeUpdateEvent", "qrCodeDeleteEvent", "duplicateControl"] }, { kind: "component", type: i22.AswNumber, selector: "asw-number", inputs: ["control", "formControls", "CSSFramework", "isPreviewTemplate", "propertyPersonalization", "patterns"], outputs: ["numberUpdateEvent", "numberDeleteEvent", "aswModelChange", "duplicateControl"] }, { kind: "component", type: i23.AswCalculation, selector: "asw-calculation", inputs: ["control", "formControls", "CSSFramework", "isPreviewTemplate", "propertyPersonalization"], outputs: ["calculationUpdateEvent", "calculationDeleteEvent", "aswModelChange", "duplicateControl"] }, { kind: "component", type: i24.AswFileUpload, selector: "asw-fileupload", inputs: ["control", "CSSFramework", "isPreviewTemplate", "propertyPersonalization"], outputs: ["fileUploadUpdateEvent", "fileUploadDeleteEvent", "onfileUploadChange", "duplicateControl"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswPreviewTemplate, decorators: [{
            type: Component,
            args: [{ selector: 'asw-preview-template', template: "<!-- <div class=\"asw-row\">\r\n    <div class=\"asw-col-md-12 text-right\">\r\n        <button mat-raised-button \r\n                type=\"button\"\r\n                class=\"asw-button asw-button-secondary asw-button-sm float-end mb-2\" (click)=\"makePdf()\">Download Pdf\r\n        </button>                \r\n    </div>\r\n</div> -->\r\n<div class=\"asw-row\" #printPdf>\r\n    <div class=\"asw-col-md-12\">\r\n        <mat-card>\r\n            <mat-card-content>\r\n                <ng-container *ngFor=\"let control of formContainer\">\r\n                    <ng-container *ngTemplateOutlet=\"childContainer, context:{control:control}\"></ng-container>\r\n                </ng-container>\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                            <ng-container *ngSwitchCase=\"'autocomplete'\">\r\n                                <asw-autocomplete \r\n                                    [control]=\"control\"\r\n                                    [CSSFramework]=\"cssFramework\"\r\n                                    (selectionChange)=\"onSelectionChange($event)\">\r\n                                </asw-autocomplete>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'header'\">\r\n                                <asw-header [control]=\"control\" [CSSFramework]=\"cssFramework\">\r\n                                </asw-header>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'qr-code'\">\r\n                                <asw-qrcode [control]=\"control\" [CSSFramework]=\"cssFramework\">\r\n                                </asw-qrcode>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'image'\">\r\n                                <asw-image [control]=\"control\"\r\n                                    [CSSFramework]=\"cssFramework\"\r\n                                    (imageUpdateEvent)=\"updatedControl($event)\">\r\n                                </asw-image>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'textfield'\">\r\n                                <asw-textfield [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (aswModelChange)=\"onSelectionChange($event)\">\r\n                                </asw-textfield>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'email'\">\r\n                                <asw-textfield [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (aswModelChange)=\"onSelectionChange($event)\">\r\n                                </asw-textfield>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'url'\">\r\n                                <asw-textfield [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (aswModelChange)=\"onSelectionChange($event)\">\r\n                                </asw-textfield>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'phone-number'\">\r\n                                <asw-textfield [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (aswModelChange)=\"onSelectionChange($event)\">\r\n                                </asw-textfield>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'currency'\">\r\n                                <asw-number [control]=\"control\"\r\n                                    [formControls]=\"formContainer\"\r\n                                    [CSSFramework]=\"cssFramework\"\r\n                                    (aswModelChange)=\"onSelectionChange($event)\">\r\n                                </asw-number>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'textarea'\">\r\n                                <asw-textfield [control]=\"control\"\r\n                                    [CSSFramework]=\"cssFramework\"\r\n                                    (aswModelChange)=\"onSelectionChange($event)\">\r\n                                </asw-textfield>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'number'\">\r\n                                <asw-number [control]=\"control\"\r\n                                    [formControls]=\"formContainer\"\r\n                                    [CSSFramework]=\"cssFramework\"\r\n                                    (aswModelChange)=\"onSelectionChange($event)\">\r\n                                </asw-number>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'calculation'\">\r\n                                <asw-calculation [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (aswModelChange)=\"onSelectionChange($event)\">\r\n                                </asw-calculation>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'select'\">\r\n                                <asw-select [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (selectionChange)=\"onSelectionChange($event)\">\r\n                                </asw-select>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'multi-select'\">\r\n                                <asw-multi-select [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (selectionChange)=\"onSelectionChange($event)\">\r\n                                </asw-multi-select>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'radio'\">\r\n                                <asw-radio-button [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (selectionChange)=\"onSelectionChange($event)\">\r\n                                </asw-radio-button>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                                <asw-checkbox [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (selectionChange)=\"onSelectionChange($event)\">\r\n                                </asw-checkbox>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'datepicker'\">\r\n                                <asw-datepicker [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (dateChange)=\"onSelectionChange($event)\">\r\n                                </asw-datepicker>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'daterange'\">\r\n                                <asw-datepicker [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (dateChange)=\"onSelectionChange($event)\">\r\n                                </asw-datepicker>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'button'\">\r\n                                <asw-button [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (buttonClickEvent)=\"buttonClicked($event)\">\r\n                                </asw-button>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'paragraph'\">\r\n                                <asw-paragraph [control]=\"control\">\r\n                                </asw-paragraph>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'divider'\">\r\n                                <asw-divider [control]=\"control\">\r\n                                </asw-divider>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'slide-toggle'\">\r\n                                <asw-slide-toggle [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (selectionChange)=\"onSelectionChange($event)\">\r\n                                </asw-slide-toggle>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'gps'\">\r\n                                <asw-gps [control]=\"control\" [CSSFramework]=\"cssFramework\"\r\n                                    (gpsAddressChange)=\"onSelectionChange($event)\">\r\n                                </asw-gps>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'signature'\">\r\n                                <asw-signature [control]=\"control\" [CSSFramework]=\"cssFramework\">\r\n                                </asw-signature>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'drawing'\">\r\n                                <asw-drawing [control]=\"control\" [CSSFramework]=\"cssFramework\">\r\n                                </asw-drawing>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'fileupload'\">\r\n                                <asw-fileupload [control]=\"control\" [CSSFramework]=\"cssFramework\">\r\n                                </asw-fileupload>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #layout>\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                                        <ng-container *ngFor=\"let component of column.components\">\r\n                                            <ng-container *ngTemplateOutlet=\"childContainer, context:{control:component}\"></ng-container>\r\n                                        </ng-container>\r\n                                    </div>\r\n                                </div>\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>" }]
        }], ctorParameters: () => [{ type: i1.AswTranslateService }, { type: i2.NotificationService }], propDecorators: { formContainer: [{
                type: Input
            }], currentLanguage: [{
                type: Input
            }], cssFramework: [{
                type: Input
            }], buttonClick: [{
                type: Output
            }], aswModelChange: [{
                type: Output
            }], printPdf: [{
                type: ViewChild,
                args: ['printPdf']
            }] } });

/**
 * @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
 */
function initializeLicense() {
    return () => {
        AswLicense.validateLicense();
        return Promise.resolve();
    };
}
class AswPreviewTemplateModule {
    watermarkService;
    constructor(watermarkService) {
        this.watermarkService = watermarkService;
        // Call the showWatermark method when the module is loaded
        const isValid = AswLicense.isDisplayWatermark();
        if (isValid) {
            this.watermarkService.showWatermark();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswPreviewTemplateModule, deps: [{ token: i1.WatermarkService }], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: AswPreviewTemplateModule, declarations: [AswPreviewTemplate], imports: [CommonModule,
            FormsModule,
            ReactiveFormsModule,
            AswAutocompleteModule,
            AswButtonModule,
            AswCheckboxModule,
            AswDatepickerModule,
            AswDividerModule,
            AswDrawingModule,
            AswGpsModule,
            AswHeaderModule,
            AswImageModule,
            AswMultiSelectModule,
            AswParagraphModule,
            AswSelectModule,
            AswSignatureModule,
            AswSlideToggleModule,
            AswTextFieldModule,
            AswRadioButtonModule,
            MatSnackBarModule,
            MatCardModule,
            QrCodeModule,
            AswNumberModule,
            AswCalculationModule,
            AswFileUploadModule], exports: [AswPreviewTemplate] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswPreviewTemplateModule, providers: [
            NotificationService,
            {
                provide: APP_INITIALIZER,
                useFactory: initializeLicense,
                multi: true
            },
            WatermarkService,
            provideHttpClient(withInterceptorsFromDi())
        ], imports: [CommonModule,
            FormsModule,
            ReactiveFormsModule,
            AswAutocompleteModule,
            AswButtonModule,
            AswCheckboxModule,
            AswDatepickerModule,
            AswDividerModule,
            AswDrawingModule,
            AswGpsModule,
            AswHeaderModule,
            AswImageModule,
            AswMultiSelectModule,
            AswParagraphModule,
            AswSelectModule,
            AswSignatureModule,
            AswSlideToggleModule,
            AswTextFieldModule,
            AswRadioButtonModule,
            MatSnackBarModule,
            MatCardModule,
            QrCodeModule,
            AswNumberModule,
            AswCalculationModule,
            AswFileUploadModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswPreviewTemplateModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [AswPreviewTemplate],
                    exports: [AswPreviewTemplate],
                    imports: [
                        CommonModule,
                        FormsModule,
                        ReactiveFormsModule,
                        AswAutocompleteModule,
                        AswButtonModule,
                        AswCheckboxModule,
                        AswDatepickerModule,
                        AswDividerModule,
                        AswDrawingModule,
                        AswGpsModule,
                        AswHeaderModule,
                        AswImageModule,
                        AswMultiSelectModule,
                        AswParagraphModule,
                        AswSelectModule,
                        AswSignatureModule,
                        AswSlideToggleModule,
                        AswTextFieldModule,
                        AswRadioButtonModule,
                        MatSnackBarModule,
                        MatCardModule,
                        QrCodeModule,
                        AswNumberModule,
                        AswCalculationModule,
                        AswFileUploadModule
                    ],
                    providers: [
                        NotificationService,
                        {
                            provide: APP_INITIALIZER,
                            useFactory: initializeLicense,
                            multi: true
                        },
                        WatermarkService,
                        provideHttpClient(withInterceptorsFromDi())
                    ]
                }]
        }], ctorParameters: () => [{ type: i1.WatermarkService }] });

/**
 * @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 { AswPreviewTemplate, AswPreviewTemplateModule, initializeLicense };
//# sourceMappingURL=asoftwareworld-form-builder-pro-preview-template.mjs.map