@asoftwareworld/form-builder-pro/fesm2022/asoftwareworld-form-builder-pro-form-control-shared.mjs.map

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

{"version":3,"file":"asoftwareworld-form-builder-pro-form-control-shared.mjs","sources":["../../src/components/form-control/shared/digital/digital-dialog.ts","../../src/components/form-control/shared/digital/digital-dialog.html","../../src/components/form-control/shared/multi-select/multi-select-dialog.ts","../../src/components/form-control/shared/multi-select/multi-select-dialog.html","../../src/components/form-control/shared/single-select/single-select-dialog.ts","../../src/components/form-control/shared/single-select/single-select-dialog.html","../../src/components/form-control/shared/text/text-dialog.ts","../../src/components/form-control/shared/text/text-dialog.html","../../src/components/form-control/shared/shared-dialog.module.ts","../../src/components/form-control/shared/public_api.ts","../../src/components/form-control/shared/asoftwareworld-form-builder-pro-form-control-shared.ts"],"sourcesContent":["/**\n * @license\n * Copyright ASW (A Software World) All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file\n */\n\nimport { Component, Inject, OnInit } from '@angular/core';\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\nimport { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';\nimport { Constants, Icons } from '@asoftwareworld/form-builder-pro/common';\nimport { ObjectUtils } from '@asoftwareworld/form-builder-pro/utils';\n\n@Component({\n    selector: 'asw-digital-dialog',\n    templateUrl: './digital-dialog.html'\n})\nexport class AswDigitalDialog implements OnInit {\n    constants: any = Constants;\n    aswDigitalForm!: FormGroup;\n    objectUtils = ObjectUtils;\n    icons = Icons;\n    status = true;\n    control: any;\n\n    constructor(\n        private formBuilder: FormBuilder,\n        public dialogRef: MatDialogRef<AswDigitalDialog>,\n        @Inject(MAT_DIALOG_DATA) public data: any\n    ) {}\n\n    ngOnInit(): void {\n        this.control = this.data.control;\n        this.validateFormBuilder();\n        this.editProperty(this.control);\n    }\n\n    validateFormBuilder(): void {\n        this.aswDigitalForm = this.formBuilder.group({\n            label: [],\n            class: [],\n            imageUrl: [],\n            height: ['', [Validators.max(600), Validators.min(0)]],\n            width: ['', [Validators.max(600), Validators.min(0)]],\n            isUploadHide: [true]\n        });\n    }\n\n    editProperty(control: any): void {\n        this.aswDigitalForm.setValue({\n            label: control.label,\n            class: control.class,\n            imageUrl: control.imageUrl,\n            width: control.width,\n            height: control.height,\n            isUploadHide: control.isUploadHide ?? true\n        });\n    }\n\n    onNoClick(): void {\n        this.dialogRef.close();\n    }\n\n    onSubmit(): void {\n        if (this.aswDigitalForm.invalid) {\n            return;\n        }\n        this.aswDigitalForm.value.controlType = this.control.controlType;\n        this.aswDigitalForm.value.id = this.control.id;\n        this.aswDigitalForm.value.guid = this.control.guid;\n        this.dialogRef.close(this.aswDigitalForm.value);\n    }\n\n    onChange(event: any): void {\n        this.status = event.checked ? true : false;\n        if (event.checked === undefined) {\n            this.status = event.target.checked ? true : false;\n        }\n    }\n}\n","<div class=\"asw-dialog-header\">\r\n    <div class=\"asw-edit-row-dialog\">\r\n        <div class=\"asw-dialog-header clearfix\">\r\n            <div class=\"asw-dialog-about\">\r\n                <h1 mat-dialog-title class=\"asw-m-0\">{{'FormControl.Edit' | aswTranslate}} {{control.label | aswTranslate}}</h1>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <button mat-icon-button (click)=\"onNoClick()\" aria-label=\"Close dialog\" class=\"asw-mt-2 asw-me-2\">\r\n        <div [innerHTML]=\"icons.close | aswSafeHtml\"></div>\r\n    </button>\r\n</div>\r\n<form [formGroup]=\"aswDigitalForm\" (ngSubmit)=\"onSubmit()\">\r\n    <div mat-dialog-content class=\"mat-typography\">\r\n        <div class=\"asw-row\">\r\n            <ng-container *ngIf=\"data.CSSFramework === 'material'; else bootstrap\">\r\n                <div class=\"asw-col-md-12\">\r\n                    <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n                        <mat-label>{{'FormControl.Label' | aswTranslate}}</mat-label>\r\n                        <input matInput type=\"text\"\r\n                            name=\"label\"\r\n                            placeholder=\"{{'FormControl.Label' | aswTranslate}}\"\r\n                            matTooltip=\"{{'FormControl.Label' | aswTranslate}}\"\r\n                            formControlName=\"label\">\r\n                    </mat-form-field>\r\n                </div>\r\n                <div class=\"asw-col-md-6\">\r\n                    <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n                        <mat-label>{{'FormControl.Width' | aswTranslate}}</mat-label>\r\n                        <input matInput type=\"number\"\r\n                            name=\"width\"\r\n                            min=\"0\" \r\n                            max=\"600\"\r\n                            placeholder=\"{{'FormControl.Width' | aswTranslate}}\"\r\n                            (keypress)=\"objectUtils.keyPressNumbersWithDecimal($event)\"\r\n                            matTooltip=\"{{'FormControl.Width' | aswTranslate}}\"\r\n                            formControlName=\"width\">\r\n                        <mat-error *ngFor=\"let validation of constants.accountValidationMessages.width\">\r\n                            <ng-container *ngIf=\"aswDigitalForm.get('width')?.hasError(validation.type) && (aswDigitalForm.get('width')?.dirty || aswDigitalForm.get('width')?.touched)\">\r\n                                {{validation.message | aswTranslate}}\r\n                            </ng-container>\r\n                        </mat-error>\r\n                    </mat-form-field>\r\n                </div>\r\n                <div class=\"asw-col-md-6\">\r\n                    <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n                        <mat-label>{{'FormControl.Height' | aswTranslate}}</mat-label>\r\n                        <input matInput type=\"number\"\r\n                            name=\"height\"\r\n                            min=\"0\" \r\n                            max=\"600\"\r\n                            placeholder=\"{{'FormControl.Height' | aswTranslate}}\"\r\n                            (keypress)=\"objectUtils.keyPressNumbersWithDecimal($event)\"\r\n                            matTooltip=\"{{'FormControl.Height' | aswTranslate}}\"\r\n                            formControlName=\"height\">\r\n                        <mat-error *ngFor=\"let validation of constants.accountValidationMessages.height\">\r\n                            <ng-container *ngIf=\"aswDigitalForm.get('height')?.hasError(validation.type) && (aswDigitalForm.get('height')?.dirty || aswDigitalForm.get('height')?.touched)\">\r\n                                {{validation.message | aswTranslate}}\r\n                            </ng-container>\r\n                        </mat-error>\r\n                    </mat-form-field>\r\n                </div>\r\n                <div class=\"asw-col-md-12\">\r\n                    <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n                        <mat-label>{{'FormControl.Imageurl' | aswTranslate}}</mat-label>\r\n                        <input matInput type=\"text\"\r\n                            name=\"label\"\r\n                            placeholder=\"Enter image url\"\r\n                            matTooltip=\"Enter label\"\r\n                            formControlName=\"imageUrl\">\r\n                    </mat-form-field>\r\n                </div>\r\n                <div class=\"asw-col-md-6\">\r\n                    <div class=\"asw-mb-3\">\r\n                        {{'FormControl.Style' | aswTranslate}}: \r\n                        <mat-button-toggle-group formControlName=\"class\" name=\"fontStyle\" aria-label=\"Font Style\">\r\n                            <mat-button-toggle value=\"asw-text-start\" aria-label=\"Text align left\">\r\n                                <span [innerHTML]=\"icons.justifyLeft | aswSafeHtml\"></span>\r\n                            </mat-button-toggle>\r\n                            <mat-button-toggle value=\"asw-text-center\" aria-label=\"Text align center\">\r\n                                <span [innerHTML]=\"icons.justifyCenter | aswSafeHtml\"></span>\r\n                            </mat-button-toggle>\r\n                            <mat-button-toggle value=\"asw-text-end\" aria-label=\"Text align right\">\r\n                                <span [innerHTML]=\"icons.justifyRight | aswSafeHtml\"></span>\r\n                            </mat-button-toggle>\r\n                        </mat-button-toggle-group>\r\n                    </div>\r\n                </div>            \r\n                <div class=\"asw-col-md-6\">\r\n                    <mat-slide-toggle color=\"primary\"\r\n                        #isUploadHide\r\n                        formControlName=\"isUploadHide\"\r\n                        (change)=\"onChange($event)\">\r\n                        {{(status ? 'FormControl.UploadHide' : 'FormControl.UploadShow') | aswTranslate}}\r\n                    </mat-slide-toggle>\r\n                </div>\r\n            </ng-container>\r\n            <ng-template #bootstrap>\r\n                <div class=\"asw-col-md-12\">\r\n                    <div class=\"asw-mb-3\">\r\n                        <label class=\"asw-input-label\">{{'FormControl.Label' | aswTranslate}}</label>\r\n                        <input type=\"text\"\r\n                            name=\"label\"\r\n                            class=\"asw-input-control\"\r\n                            matTooltip=\"{{'FormControl.Label' | aswTranslate}}\"\r\n                            formControlName=\"label\">\r\n                    </div>\r\n                </div>\r\n                <div class=\"asw-col-md-6\">\r\n                    <div class=\"asw-mb-3\">\r\n                        <label class=\"asw-input-label asw-invalid-label {{(aswDigitalForm.get('width')?.invalid && (aswDigitalForm.get('width')?.dirty || aswDigitalForm.get('width')?.touched)) ? 'asw-red-color' : ''}}\">{{'FormControl.Width' | aswTranslate}}</label>\r\n                        <input type=\"number\"\r\n                            name=\"width\"\r\n                            min=\"0\" \r\n                            max=\"600\"\r\n                            class=\"asw-input-control\"\r\n                            [class.asw-is-invalid]=\"(aswDigitalForm.get('width')?.invalid && (aswDigitalForm.get('width')?.dirty || aswDigitalForm.get('width')?.touched))\"\r\n                            (keypress)=\"objectUtils.keyPressNumbersWithDecimal($event)\"\r\n                            matTooltip=\"{{'FormControl.Width' | aswTranslate}}\"\r\n                            formControlName=\"width\">\r\n                        <div *ngFor=\"let validation of constants.accountValidationMessages.width\" class=\"invalid-feedback\">\r\n                            <ng-container *ngIf=\"aswDigitalForm.get('width')?.hasError(validation.type) && (aswDigitalForm.get('width')?.dirty || aswDigitalForm.get('width')?.touched)\">\r\n                                {{validation.message | aswTranslate}}\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"asw-col-md-6\">\r\n                    <div class=\"asw-mb-3\">\r\n                        <label class=\"asw-input-label asw-invalid-label {{(aswDigitalForm.get('height')?.invalid && (aswDigitalForm.get('height')?.dirty || aswDigitalForm.get('height')?.touched)) ? 'asw-red-color' : ''}}\">{{'FormControl.Height' | aswTranslate}}</label>\r\n                        <input type=\"number\"\r\n                            name=\"height\"\r\n                            min=\"0\" \r\n                            max=\"600\"\r\n                            class=\"asw-input-control\"\r\n                            [class.asw-is-invalid]=\"(aswDigitalForm.get('height')?.invalid && (aswDigitalForm.get('height')?.dirty || aswDigitalForm.get('height')?.touched))\"\r\n                            (keypress)=\"objectUtils.keyPressNumbersWithDecimal($event)\"\r\n                            matTooltip=\"{{'FormControl.Height' | aswTranslate}}\"\r\n                            formControlName=\"height\">\r\n                        <div *ngFor=\"let validation of constants.accountValidationMessages.height\" class=\"invalid-feedback\">\r\n                            <ng-container *ngIf=\"aswDigitalForm.get('height')?.hasError(validation.type) && (aswDigitalForm.get('height')?.dirty || aswDigitalForm.get('height')?.touched)\">\r\n                                {{validation.message | aswTranslate}}\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"asw-col-md-12\">\r\n                    <div class=\"asw-mb-3\">\r\n                        <label class=\"asw-input-label\">{{'FormControl.Imageurl' | aswTranslate}}</label>\r\n                        <input type=\"text\"\r\n                            name=\"label\"\r\n                            class=\"asw-input-control\"\r\n                            matTooltip=\"Enter label\"\r\n                            formControlName=\"imageUrl\">\r\n                    </div>\r\n                </div>\r\n                <div class=\"asw-col-md-6\">\r\n                    <div class=\"asw-mb-3\">\r\n                        {{'FormControl.Style' | aswTranslate}}: \r\n                        <mat-button-toggle-group formControlName=\"class\" name=\"fontStyle\" aria-label=\"Font Style\">\r\n                            <mat-button-toggle value=\"asw-text-start\" aria-label=\"Text align left\">\r\n                                <span [innerHTML]=\"icons.justifyLeft | aswSafeHtml\"></span>\r\n                            </mat-button-toggle>\r\n                            <mat-button-toggle value=\"asw-text-center\" aria-label=\"Text align center\">\r\n                                <span [innerHTML]=\"icons.justifyCenter | aswSafeHtml\"></span>\r\n                            </mat-button-toggle>\r\n                            <mat-button-toggle value=\"asw-text-end\" aria-label=\"Text align right\">\r\n                                <span [innerHTML]=\"icons.justifyRight | aswSafeHtml\"></span>\r\n                            </mat-button-toggle>\r\n                        </mat-button-toggle-group>\r\n                    </div>\r\n                </div>            \r\n                <div class=\"asw-col-md-6\">\r\n                    <div class=\"asw-mb-3\">\r\n                        <div class=\"asw-form-check asw-form-switch\">\r\n                            <input class=\"asw-form-check-input\" \r\n                                type=\"checkbox\"\r\n                                id=\"isUploadHide\" \r\n                                #isUploadHide\r\n                                formControlName=\"isUploadHide\"\r\n                                (change)=\"onChange($event)\">\r\n                            <label class=\"asw-form-check-label\" for=\"isUploadHide\">\r\n                                {{(status ? 'FormControl.UploadHide' : 'FormControl.UploadShow') | aswTranslate}}\r\n                            </label>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n        </div>\r\n    </div>\r\n    <div mat-dialog-actions align=\"end\">\r\n        <button type=\"button\"\r\n                class=\"asw-button asw-button-danger asw-mb-1 asw-me-2\"\r\n                (click)=\"onNoClick()\">\r\n            {{'FormControl.No' | aswTranslate}}\r\n        </button>\r\n        <button type=\"submit\"\r\n                class=\"asw-button asw-button-primary asw-mb-1\"\r\n                cdkFocusInitial>\r\n            {{'FormControl.Yes' | aswTranslate}}\r\n        </button>\r\n    </div>\r\n</form>\r\n","/**\n * @license\n * Copyright ASW (A Software World) All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file\n */\n\nimport { Component, Inject, OnInit } from '@angular/core';\nimport { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';\nimport { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';\nimport { Constants, Icons } from '@asoftwareworld/form-builder-pro/common';\n\n@Component({\n    selector: 'asw-multi-select-dialog',\n    templateUrl: './multi-select-dialog.html'\n})\nexport class AswMultiSelectDialog implements OnInit {\n    constants: any = Constants;\n    aswEditMultiselectForm: FormGroup;\n    status!: boolean;\n    icons = Icons;\n    control: any;\n    labelType = 'label';\n\n    constructor(\n        private formBuilder: FormBuilder,\n        public dialogRef: MatDialogRef<AswMultiSelectDialog>,\n        @Inject(MAT_DIALOG_DATA) public data: any\n    ) {\n        this.aswEditMultiselectForm = this.formBuilder.group({\n            id: ['', [Validators.required]],\n            customClass: [],\n            tooltip: [''],\n            label: ['', [Validators.required, Validators.minLength(2)]],\n            style: [''],\n            options: this.formBuilder.array([this.createOption()]),\n            isRequired: [false],\n            isDisabled: [false],\n            labelType: ['label'],\n            apiUrl: [''],\n            body: [],\n            method: [],\n            headers: []\n        });\n    }\n\n    ngOnInit(): void {\n        this.control = this.data.control;\n        this.setValue(this.control);\n    }\n\n    get options(): FormArray {\n        return this.aswEditMultiselectForm.get('options') as FormArray;\n    }\n\n    createOption(): FormGroup {\n        return this.formBuilder.group({\n            key: ['', [Validators.required, Validators.minLength(1), Validators.maxLength(50)]],\n            value: ['', [Validators.required, Validators.minLength(1), Validators.maxLength(999)]],\n            isChecked: [false],\n            hideControl: []\n        });\n    }\n\n    addNewOption(): void {\n        this.options.push(this.createOption());\n    }\n\n    onNoClick(): void {\n        this.dialogRef.close();\n    }\n\n    removeOption(index: number): void {\n        this.options.removeAt(index);\n    }\n\n    onSubmit(): void {\n        if (this.aswEditMultiselectForm.invalid) {\n            return;\n        }\n        const value: string[] = [];\n        this.aswEditMultiselectForm.value.options.forEach((element: any, index: number) => {\n            if (typeof element.hideControl === 'string') {\n                element.hideControl = this.control.options[index].hideControl;\n            }\n            if (element.isChecked) {\n                value.push(element.key);\n            }\n        });\n        this.aswEditMultiselectForm.value.value = value;\n        this.aswEditMultiselectForm.value.controlType = this.control.controlType;\n        this.aswEditMultiselectForm.value.guid = this.control.guid;\n        this.dialogRef.close(this.aswEditMultiselectForm.value);\n    }\n\n    setValue(control: any): void {\n        this.aswEditMultiselectForm.patchValue({\n            id: control.id,\n            customClass: control.customClass ?? '',\n            tooltip: control.tooltip,\n            label: control.label,\n            style: control.style,\n            isRequired: control.isRequired,\n            value: control.value ?? '',\n            isDisabled: control.isDisabled,\n            labelType: control.labelType ?? '',\n            apiUrl: control.apiUrl ?? '',\n            method: control.method ?? '',\n            headers: control.headers ?? '',\n            body: control.body ?? {}\n        });\n        this.labelType = control.labelType ? control.labelType : 'label';\n        // Populate options array\n        const optionsArray = this.aswEditMultiselectForm.get('options') as FormArray;\n        optionsArray.clear(); // Clear existing options\n\n        control.options.forEach((option) => {\n            optionsArray.push(\n                this.formBuilder.group({\n                    key: [option.key, [Validators.required, Validators.minLength(1), Validators.maxLength(50)]],\n                    value: [option.value, [Validators.required, Validators.minLength(1), Validators.maxLength(999)]],\n                    isChecked: [option.isChecked || false],\n                    hideControl: [option.hideControl ? option.hideControl.label : option.hideControl || []]\n                })\n            );\n        });\n        // const optionFormGroup = control.options.map((option: any) => this.formBuilder.group(option));\n        // const optionFormArray = this.formBuilder.array(optionFormGroup);\n        // this.aswEditMultiselectForm.setControl('options', optionFormArray);\n    }\n\n    onLabelTypeChange(item: any): void {\n        if (item.value) {\n            this.labelType = item.value;\n        } else {\n            this.labelType = item.target.value;\n        }\n    }\n\n    onStatusChange(event: any): void {\n        this.status = event.checked ? true : false;\n        if (event.checked === undefined) {\n            this.status = event.target.checked ? true : false;\n        }\n    }\n\n    onKey(event: any, index: number): void {\n        let isError = false;\n        this.options.controls.filter((element, elementIndex) => {\n            if (element.value.key === event.target.value && index !== elementIndex) {\n                isError = true;\n            }\n        });\n        if (isError) {\n            this.options.controls[index].get('key')?.setErrors({ unique: true });\n        }\n    }\n\n    getApiData(data: any): void {\n        this.control.body = data.body;\n        this.control.headers = data.headers;\n        this.control.method = data.method;\n        this.control.apiUrl = data.apiUrl;\n        if (data.responseData?.value) {\n            this.control.options = data.responseData.value;\n            this.setValue(this.control);\n        } else {\n            this.control.options = data.responseData;\n            this.setValue(this.control);\n        }\n    }\n\n    onControlChange(event: any, selectControl: any): void {\n        this.data.allControls.forEach((control: any) => {\n            if (event.target.value === control.label) {\n                selectControl.value.hideControl = control;\n            }\n        });\n    }\n}\n","<div class=\"asw-dialog-header\">\r\n    <div class=\"asw-edit-row-dialog\">\r\n        <div class=\"asw-dialog-header clearfix\">\r\n            <div class=\"asw-dialog-about\">\r\n                <h1 mat-dialog-title class=\"asw-m-0\">{{'FormControl.Edit' | aswTranslate}} {{(control.controlType != 'checkbox' ? control.label : 'Checkbox') | aswTranslate}}</h1>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <button mat-icon-button (click)=\"onNoClick()\" aria-label=\"Close dialog\" class=\"asw-mt-2 asw-me-2\">\r\n        <div [innerHTML]=\"icons.close | aswSafeHtml\"></div>\r\n    </button>\r\n</div>\r\n<form [formGroup]=\"aswEditMultiselectForm\" (ngSubmit)=\"onSubmit()\">\r\n    <div mat-dialog-content class=\"mat-typography\">\r\n        <mat-tab-group dynamicHeight mat-stretch-tabs=\"false\">\r\n            <mat-tab label=\"{{'FormControl.Properties' | aswTranslate}}\">\r\n                <div class=\"asw-row asw-px-2 asw-py-3\">\r\n                    <ng-container *ngIf=\"data.CSSFramework === 'material'; else bootstrap\">\r\n                        <ng-container *ngIf=\"control.labelType !== undefined\">\r\n                            <div class=\"asw-col-md-12\">\r\n                                <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n                                    <mat-label>{{'FormControl.LabelType' | aswTranslate}}</mat-label>\r\n                                    <mat-select formControlName=\"labelType\" matTooltip=\"{{'FormControl.SelectLabelType' | aswTranslate}}\" \r\n                                        (selectionChange)=\"onLabelTypeChange($event)\">\r\n                                        <mat-option value=\"label\">Simple Label</mat-option>\r\n                                        <mat-option value=\"text-editor\">Text Editor</mat-option>\r\n                                    </mat-select>\r\n                                </mat-form-field>\r\n                            </div>\r\n                        </ng-container>\r\n                        <div class=\"{{control.controlType != 'checkbox' ? 'asw-col-md-6' : 'asw-col-md-12'}}\">\r\n                            <ng-container *ngIf=\"labelType === 'label'; else aswEditor\">\r\n                                <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n                                    <mat-label>{{'FormControl.Label' | aswTranslate}}</mat-label>\r\n                                    <input matInput type=\"text\"\r\n                                        placeholder=\"{{'FormControl.Label' | aswTranslate}}\"\r\n                                        matTooltip=\"{{'FormControl.Label' | aswTranslate}}\"\r\n                                        formControlName=\"label\" required>\r\n                                    <mat-icon *ngIf=\"aswEditMultiselectForm.get('Label')?.invalid && (aswEditMultiselectForm.get('Label')?.dirty || aswEditMultiselectForm.get('Label')?.touched)\"\r\n                                        class=\"asw-error\" matSuffix>error</mat-icon>\r\n                                    <mat-error *ngFor=\"let validation of constants.accountValidationMessages.label\">\r\n                                        <ng-container *ngIf=\"aswEditMultiselectForm.get('label')?.hasError(validation.type) && (aswEditMultiselectForm.get('label')?.dirty || aswEditMultiselectForm.get('label')?.touched)\">\r\n                                            {{validation.message | aswTranslate}}\r\n                                        </ng-container>\r\n                                    </mat-error>\r\n                                </mat-form-field>\r\n                            </ng-container>\r\n                            <ng-template #aswEditor>\r\n                                <asw-editor autofocus=\"true\" id=\"asw-editor\" formControlName=\"label\" [config]=\"constants.aswEditorConfig\"></asw-editor>\r\n                                <ng-container *ngFor=\"let validation of constants.accountValidationMessages.label\">\r\n                                    <mat-error *ngIf=\"aswEditMultiselectForm.get('label')?.hasError(validation.type) && (aswEditMultiselectForm.get('label')?.dirty || aswEditMultiselectForm.get('label')?.touched)\">\r\n                                        {{validation.message | aswTranslate}}\r\n                                    </mat-error>\r\n                                </ng-container>\r\n                            </ng-template>\r\n                        </div>\r\n                        <ng-container *ngIf=\"!data.propertyPersonalization.includes('customCSSClass')\">\r\n                            <div class=\"asw-col-md-6\">\r\n                                <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n                                    <mat-label>{{'FormControl.UniqueId' | aswTranslate}}</mat-label>\r\n                                    <input matInput type=\"text\"\r\n                                        name=\"id\"\r\n                                        placeholder=\"{{'FormControl.UniqueId' | aswTranslate}}\"\r\n                                        matTooltip=\"{{'FormControl.UniqueId' | aswTranslate}}\"\r\n                                        formControlName=\"id\" required>\r\n                                    <mat-icon *ngIf=\"aswEditMultiselectForm.get('id')?.invalid && (aswEditMultiselectForm.get('id')?.dirty || aswEditMultiselectForm.get('id')?.touched)\"\r\n                                        class=\"asw-error\" matSuffix>error</mat-icon>\r\n                                    <mat-error *ngFor=\"let validation of constants.accountValidationMessages.id\">\r\n                                        <ng-container *ngIf=\"aswEditMultiselectForm.get('id')?.hasError(validation.type) && (aswEditMultiselectForm.get('id')?.dirty || aswEditMultiselectForm.get('id')?.touched)\">\r\n                                            {{validation.message | aswTranslate}}\r\n                                        </ng-container>\r\n                                    </mat-error>\r\n                                </mat-form-field>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"!data.propertyPersonalization.includes('customCSSClass')\">\r\n                            <div class=\"asw-col-md-6\">\r\n                                <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n                                    <mat-label>{{'FormControl.CustomCSSClass' | aswTranslate}}</mat-label>\r\n                                    <input matInput type=\"text\"\r\n                                        name=\"customClass\"\r\n                                        placeholder=\"{{'FormControl.CustomCSSClass' | aswTranslate}}\"\r\n                                        matTooltip=\"{{'FormControl.CustomCSSClass' | aswTranslate}}\"\r\n                                        formControlName=\"customClass\">\r\n                                </mat-form-field>\r\n                            </div>\r\n                        </ng-container>\r\n                        <div class=\"{{control.controlType != 'checkbox' ? 'asw-col-md-6' : 'asw-col-md-12'}}\">\r\n                            <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n                                <mat-label>{{'FormControl.Tooltip' | aswTranslate}}</mat-label>\r\n                                <input matInput type=\"text\"\r\n                                    placeholder=\"{{'FormControl.Tooltip' | aswTranslate}}\"\r\n                                    matTooltip=\"{{'FormControl.Tooltip' | aswTranslate}}\"\r\n                                    formControlName=\"tooltip\">\r\n                            </mat-form-field>\r\n                        </div>\r\n                        <div class=\"asw-col-md-12\" *ngIf=\"control.controlType != 'checkbox'\">\r\n                            <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n                                <mat-label>{{'FormControl.Style' | aswTranslate}}</mat-label>\r\n                                <mat-select formControlName=\"style\" matTooltip=\"{{'FormControl.Style' | aswTranslate}}\">\r\n                                    <mat-option value=\"fill\">Fill</mat-option>\r\n                                    <mat-option value=\"outline\">Outline</mat-option>                    \r\n                                </mat-select>\r\n                            </mat-form-field>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-template #bootstrap>\r\n                        <ng-container *ngIf=\"control.labelType !== undefined\">\r\n                            <div class=\"asw-mb-3\">\r\n                                <label class=\"asw-input-label\">{{'FormControl.LabelType' | aswTranslate}}</label>\r\n                                <select formControlName=\"labelType\" class=\"asw-select\" matTooltip=\"{{'FormControl.SelectLabelType' | aswTranslate}}\"\r\n                                    (change)=\"onLabelTypeChange($event)\">\r\n                                    <option value=\"label\">Simple Label</option>\r\n                                    <option value=\"text-editor\">Text Editor</option>\r\n                                </select>\r\n                            </div>\r\n                        </ng-container>\r\n                        <div class=\"asw-col-md-12\">\r\n                            <ng-container *ngIf=\"labelType === 'label'; else aswEditor\">\r\n                                <div class=\"asw-mb-3\">\r\n                                    <label class=\"asw-input-label asw-invalid-label {{(aswEditMultiselectForm.get('label')?.invalid && (aswEditMultiselectForm.get('label')?.dirty || aswEditMultiselectForm.get('label')?.touched)) ? 'asw-red-color' : ''}}\">{{'FormControl.Label' | aswTranslate}}</label>\r\n                                    <input type=\"text\"\r\n                                        class=\"asw-input-control\"\r\n                                        [class.asw-is-invalid]=\"(aswEditMultiselectForm.get('label')?.invalid && (aswEditMultiselectForm.get('label')?.dirty || aswEditMultiselectForm.get('label')?.touched))\"\r\n                                        matTooltip=\"{{'FormControl.Label' | aswTranslate}}\"\r\n                                        formControlName=\"label\" required>\r\n                                    <div *ngFor=\"let validation of constants.accountValidationMessages.label\" class=\"invalid-feedback\">\r\n                                        <ng-container *ngIf=\"aswEditMultiselectForm.get('label')?.hasError(validation.type) && (aswEditMultiselectForm.get('label')?.dirty || aswEditMultiselectForm.get('label')?.touched)\">\r\n                                            {{validation.message | aswTranslate}}\r\n                                        </ng-container>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                            <ng-template #aswEditor>\r\n                                <asw-editor autofocus=\"true\" id=\"asw-editor\" formControlName=\"label\" [config]=\"constants.aswEditorConfig\"></asw-editor>\r\n                                <ng-container *ngFor=\"let validation of constants.accountValidationMessages.label\" class=\"invalid-feedback\">\r\n                                    <div *ngIf=\"aswEditMultiselectForm.get('label')?.hasError(validation.type) && (aswEditMultiselectForm.get('label')?.dirty || aswEditMultiselectForm.get('label')?.touched)\">\r\n                                        {{validation.message | aswTranslate}}\r\n                                    </div>\r\n                                </ng-container>\r\n                            </ng-template>\r\n                        </div>\r\n                        <ng-container *ngIf=\"!data.propertyPersonalization.includes('uniqueId')\">\r\n                            <div class=\"asw-col-md-6\">\r\n                                <div class=\"asw-mb-3\">\r\n                                    <label class=\"asw-input-label asw-invalid-label {{(aswEditMultiselectForm.get('id')?.invalid && (aswEditMultiselectForm.get('id')?.dirty || aswEditMultiselectForm.get('id')?.touched)) ? 'asw-red-color' : ''}}\">{{'FormControl.UniqueId' | aswTranslate}}</label>\r\n                                    <input type=\"text\"\r\n                                        name=\"id\"\r\n                                        class=\"asw-input-control\"\r\n                                        [class.asw-is-invalid]=\"(aswEditMultiselectForm.get('id')?.invalid && (aswEditMultiselectForm.get('id')?.dirty || aswEditMultiselectForm.get('id')?.touched))\"\r\n                                        matTooltip=\"{{'FormControl.UniqueId' | aswTranslate}}\"\r\n                                        formControlName=\"id\" required>\r\n                                    <div *ngFor=\"let validation of constants.accountValidationMessages.id\" class=\"invalid-feedback\">\r\n                                        <ng-container *ngIf=\"aswEditMultiselectForm.get('id')?.hasError(validation.type) && (aswEditMultiselectForm.get('id')?.dirty || aswEditMultiselectForm.get('id')?.touched)\">\r\n                                            {{validation.message | aswTranslate}}\r\n                                        </ng-container>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"!data.propertyPersonalization.includes('customCSSClass')\">\r\n                            <div class=\"asw-col-md-6\">\r\n                                <div class=\"asw-mb-3\">\r\n                                    <label class=\"asw-input-label\">{{'FormControl.CustomCSSClass' | aswTranslate}}</label>\r\n                                    <input type=\"text\"\r\n                                        name=\"customClass\"\r\n                                        class=\"asw-input-control\"\r\n                                        matTooltip=\"{{'FormControl.CustomCSSClass' | aswTranslate}}\"\r\n                                        formControlName=\"customClass\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                        <div class=\"asw-col-md-12\">\r\n                            <div class=\"asw-mb-3\">\r\n                                <label class=\"asw-input-label\">{{'FormControl.Tooltip' | aswTranslate}}</label>\r\n                                <input type=\"text\"\r\n                                    class=\"asw-input-control\"\r\n                                    matTooltip=\"{{'FormControl.Tooltip' | aswTranslate}}\"\r\n                                    formControlName=\"tooltip\">\r\n                            </div>\r\n                        </div>\r\n                    </ng-template>\r\n                    <div class=\"asw-col-md-12\">\r\n                        <table class=\"asw-table asw-table-sm asw-table-bordered\">\r\n                            <thead>\r\n                                <tr>\r\n                                    <th></th>\r\n                                    <th>{{'FormControl.Key' | aswTranslate}}</th>\r\n                                    <th>{{'FormControl.Value' | aswTranslate}}</th>\r\n                                    <th>\r\n                                        {{'FormControl.hideControl' | aswTranslate}}\r\n                                        <span [innerHTML]=\"icons.info | aswSafeHtml\" matTooltip=\"{{'FormControl.hideControlInfo' | aswTranslate}}\"></span>\r\n                                    </th>\r\n                                    <th></th>\r\n                                </tr>\r\n                            </thead>\r\n                            <tbody>\r\n                                <ng-container formArrayName=\"options\">\r\n                                    <tr *ngFor=\"let option of options.controls; let index = index; let last=last;\" \r\n                                    [formGroupName]=\"index\">\r\n                                        <td class=\"asw-text-center\">\r\n                                            <mat-checkbox color=\"primary\" formControlName=\"isChecked\"></mat-checkbox>\r\n                                        </td>\r\n                                        <td>\r\n                                            <input type=\"text\"\r\n                                                placeholder=\"{{'FormControl.OptionKey' | aswTranslate}} {{index+1}}\"\r\n                                                class=\"asw-input-control\"\r\n                                                formControlName=\"key\"\r\n                                                matTooltip=\"{{'FormControl.OptionKey' | aswTranslate}} {{index+1}}\"\r\n                                                minlength=\"1\"\r\n                                                maxlength=\"50\"\r\n                                                (keyup)=\"onKey($event, index)\"\r\n                                                pattern=\"^[a-zA-Z0-9_\\-]{1,50}$\"\r\n                                                [class.asw-is-invalid]=\"options.controls[index].get('key')?.invalid && (options.controls[index].get('key')?.dirty || options.controls[index].get('key')?.touched)\"\r\n                                                required>\r\n                                            <ng-container *ngFor=\"let validation of constants.accountValidationMessages.key\">\r\n                                                <mat-error *ngIf=\"options.controls[index].get('key')?.hasError(validation.type) && (options.controls[index].get('key')?.dirty || options.controls[index].get('key')?.touched || options.controls[index].get('key')?.errors?.unique)\">\r\n                                                    {{validation.message | aswTranslate}}\r\n                                                </mat-error>\r\n                                            </ng-container>\r\n                                        </td>\r\n                                        <td>\r\n                                            <input type=\"text\"\r\n                                                placeholder=\"{{'FormControl.OptionValue' | aswTranslate}} {{index+1}}\"\r\n                                                formControlName=\"value\"\r\n                                                class=\"asw-input-control\"\r\n                                                matTooltip=\"{{'FormControl.OptionValue' | aswTranslate}} {{index+1}}\"\r\n                                                minlength=\"1\"\r\n                                                maxlength=\"999\"\r\n                                                [class.asw-is-invalid]=\"options.controls[index].get('value')?.invalid && (options.controls[index].get('value')?.dirty || options.controls[index].get('value')?.touched)\"\r\n                                                required>\r\n                                            <ng-container *ngFor=\"let validation of constants.accountValidationMessages.value\">\r\n                                                <mat-error *ngIf=\"options.controls[index].get('value')?.hasError(validation.type) && (options.controls[index].get('value')?.dirty || options.controls[index].get('value')?.touched)\">\r\n                                                    {{validation.message | aswTranslate}}\r\n                                                </mat-error>\r\n                                            </ng-container>\r\n                                        </td>\r\n                                        <td>\r\n                                            <!-- <input class=\"asw-input-control\" formControlName=\"hideControl\" [matAutocomplete]=\"headerKey\">\r\n                                            <mat-autocomplete #headerKey=\"matAutocomplete\">\r\n                                                @for(control of filteredControlKeys[index] | async; track control) {\r\n                                                    <mat-option [value]=\"control\">\r\n                                                        {{ control.label }}\r\n                                                    </mat-option>\r\n                                                }\r\n                                            </mat-autocomplete> -->\r\n                                            <select formControlName=\"hideControl\"\r\n                                                (change)=\"onControlChange($event, option)\"\r\n                                                matTooltip=\"{{'FormControl.hideControl' | aswTranslate}} {{index+1}}\" \r\n                                                class=\"asw-select\">\r\n                                                <option *ngFor=\"let control of data.allControls\" [value]=\"control.label\">\r\n                                                    {{control.label}}\r\n                                                </option>\r\n                                            </select>\r\n                                            <!-- <mat-form-field appearance=\"outline\">\r\n                                                <mat-select formControlName=\"hideControl\" multiple>\r\n                                                  @for (control of data.allControls; track control) {\r\n                                                    <mat-option [value]=\"control\">{{control.label}}</mat-option>\r\n                                                  }\r\n                                                </mat-select>\r\n                                            </mat-form-field> -->\r\n                                            <!-- <input type=\"text\"\r\n                                                placeholder=\"{{'FormControl.OptionValue' | aswTranslate}} {{index+1}}\"\r\n                                                formControlName=\"value\"\r\n                                                class=\"asw-input-control\"\r\n                                                matTooltip=\"{{'FormControl.OptionValue' | aswTranslate}} {{index+1}}\"\r\n                                                minlength=\"1\"\r\n                                                maxlength=\"999\"\r\n                                                [class.asw-is-invalid]=\"options.controls[index].get('value')?.invalid && (options.controls[index].get('value')?.dirty || options.controls[index].get('value')?.touched)\"\r\n                                                > -->\r\n                                        </td>\r\n                                        <td class=\"asw-text-center\">                                                \r\n                                            <button mat-icon-button *ngIf=\"index != 0\"\r\n                                                    type=\"button\" \r\n                                                    matTooltip=\"{{'FormControl.Delete' | aswTranslate}}\" \r\n                                                    [matTooltipPosition]=\"'below'\" \r\n                                                    (click)=\"removeOption(index)\">\r\n                                                <span [innerHTML]=\"icons.delete2 | aswSafeHtml\"></span>\r\n                                            </button>\r\n                                        </td>\r\n                                    </tr>\r\n                                </ng-container>\r\n                                <tr>\r\n                                    <td colspan=\"4\">\r\n                                        <button class=\"asw-button asw-button-sm asw-button-primary\"\r\n                                                type=\"button\" \r\n                                                matTooltip=\"{{'FormControl.Add' | aswTranslate}}\" \r\n                                                [matTooltipPosition]=\"'below'\"\r\n                                                (click)=\"addNewOption()\">\r\n                                            <span class=\"asw-icon asw-me-1\" [innerHTML]=\"icons.add | aswSafeHtml\"></span>\r\n                                            {{'FormControl.AddOption' | aswTranslate}}\r\n                                        </button>\r\n                                    </td>\r\n                                </tr>\r\n                            </tbody>\r\n                        </table>\r\n                    </div>\r\n                    <ng-container *ngIf=\"data.CSSFramework === 'material'; else bootstrap1\">\r\n                        <div class=\"asw-col-md-3\">\r\n                            <mat-slide-toggle color=\"primary\"\r\n                                    #isActive\r\n                                    formControlName=\"isRequired\"\r\n                                    (change)=\"onStatusChange($event)\">\r\n                                    {{(status ? 'FormControl.Required' : 'FormControl.NotRequired') | aswTranslate}}\r\n                            </mat-slide-toggle>\r\n                        </div>\r\n                        <div class=\"asw-col-md-3\">\r\n                            <mat-slide-toggle color=\"primary\"\r\n                                    #isDisable\r\n                                    formControlName=\"isDisabled\">\r\n                                    {{'FormControl.Readonly' | aswTranslate}}\r\n                            </mat-slide-toggle>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-template #bootstrap1>\r\n                        <div class=\"asw-col-md-2\">\r\n                            <div class=\"asw-mb-3\">\r\n                                <div class=\"asw-form-check asw-form-switch\">\r\n                                    <input class=\"asw-form-check-input\" \r\n                                        type=\"checkbox\" \r\n                                        #isActive\r\n                                        id=\"isActive\" \r\n                                        formControlName=\"isRequired\"\r\n                                        (change)=\"onStatusChange($event)\">\r\n                                    <label class=\"asw-form-check-label\" for=\"isActive\">\r\n                                        {{(status ? 'FormContro