/**
 * @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 { MatDialog } from '@angular/material/dialog';
import { Constants, Icons, NotificationService } from '@asoftwareworld/form-builder-pro/common';
import { AswTranslateService } from '@asoftwareworld/form-builder-pro/core';
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 { DragDropService } from './drag-drop.service';
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;
    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) {
        this.aswModelChange.emit(control);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", 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: "16.2.2", 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 *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-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:white;font-size:14px}.asw-child-list{max-width:100%;border:dotted 3px #999;min-height:150px;display:block;background:white}.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:white;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"], 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"], 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: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i8.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i8.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { 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: "16.2.2", 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.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 *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-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:white;font-size:14px}.asw-child-list{max-width:100%;border:dotted 3px #999;min-height:150px;display:block;background:white}.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:white;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"] }]
        }], ctorParameters: function () { return [{ type: i1.AswTranslateService }, { type: i2.MatDialog }, { type: i3.NotificationService }, { type: i4.DragDropService }]; }, propDecorators: { currentLanguage: [{
                type: Input
            }], uploadData: [{
                type: Input
            }], isShowPreviewButton: [{
                type: Input
            }], isShowJsonDataButton: [{
                type: Input
            }], isShowPublishButton: [{
                type: Input
            }], cssFramework: [{
                type: Input
            }], controlPersonalization: [{
                type: Input
            }], propertyPersonalization: [{
                type: Input
            }], controlCollectionName: [{
                type: Input
            }], patterns: [{
                type: Input
            }], previewClick: [{
                type: Output
            }], publishClick: [{
                type: Output
            }], buttonClick: [{
                type: Output
            }], aswModelChange: [{
                type: Output
            }], dropList: [{
                type: ViewChild,
                args: [CdkDropList]
            }] } });
//# sourceMappingURL=data:application/json;base64, 