@asoftwareworld/form-builder-pro
Version:
ASW Form Builder Pro helps you with rapid development and designed web forms which includes several controls. The key feature of Form Builder is to make your content attractive and effective. We can customize our control at run time and preview the same b
267 lines (265 loc) • 261 kB
JavaScript
import * as i0 from '@angular/core';
import { Inject, Component, NgModule } from '@angular/core';
import * as i1 from '@angular/forms';
import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i2 from '@angular/material/dialog';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import * as i14 from '@asoftwareworld/form-builder-pro/common';
import { Constants, Icons, MaterialModule, AswCommunicatorApiModule, AswPipeModule, AswDirectiveModule } from '@asoftwareworld/form-builder-pro/common';
import { ObjectUtils } from '@asoftwareworld/form-builder-pro/utils';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i5 from '@angular/material/button';
import * as i5$1 from '@angular/material/button-toggle';
import * as i6 from '@angular/material/input';
import * as i8 from '@angular/material/form-field';
import * as i10 from '@angular/material/slide-toggle';
import * as i12 from '@angular/material/tooltip';
import * as i16 from '@asoftwareworld/form-builder-pro/core';
import { AswTranslateModule } from '@asoftwareworld/form-builder-pro/core';
import * as i4 from '@angular/material/core';
import * as i6$1 from '@angular/material/checkbox';
import * as i9 from '@angular/material/select';
import * as i11 from '@angular/material/tabs';
import * as i13 from '@angular/material/icon';
import * as i15 from '@asoftwareworld/form-builder-pro/editor';
import { AswEditorModule } from '@asoftwareworld/form-builder-pro/editor';
import * as i8$1 from '@angular/material/radio';
import { ENTER, COMMA } from '@angular/cdk/keycodes';
import { startWith, map } from 'rxjs';
import * as i4$1 from '@angular/material/autocomplete';
import * as i13$1 from '@angular/material/chips';
/**
* @license
* Copyright ASW (A Software World) All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file
*/
class AswDigitalDialog {
formBuilder;
dialogRef;
data;
constants = Constants;
aswDigitalForm;
objectUtils = ObjectUtils;
icons = Icons;
status = true;
control;
constructor(formBuilder, dialogRef, data) {
this.formBuilder = formBuilder;
this.dialogRef = dialogRef;
this.data = data;
}
ngOnInit() {
this.control = this.data.control;
this.validateFormBuilder();
this.editProperty(this.control);
}
validateFormBuilder() {
this.aswDigitalForm = this.formBuilder.group({
label: [],
class: [],
imageUrl: [],
height: ['', [Validators.max(600), Validators.min(0)]],
width: ['', [Validators.max(600), Validators.min(0)]],
isUploadHide: [true]
});
}
editProperty(control) {
this.aswDigitalForm.setValue({
label: control.label,
class: control.class,
imageUrl: control.imageUrl,
width: control.width,
height: control.height,
isUploadHide: control.isUploadHide ?? true
});
}
onNoClick() {
this.dialogRef.close();
}
onSubmit() {
if (this.aswDigitalForm.invalid) {
return;
}
this.aswDigitalForm.value.controlType = this.control.controlType;
this.aswDigitalForm.value.id = this.control.id;
this.aswDigitalForm.value.guid = this.control.guid;
this.dialogRef.close(this.aswDigitalForm.value);
}
onChange(event) {
this.status = event.checked ? true : false;
if (event.checked === undefined) {
this.status = event.target.checked ? true : false;
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswDigitalDialog, deps: [{ token: i1.FormBuilder }, { token: i2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: AswDigitalDialog, selector: "asw-digital-dialog", ngImport: i0, template: "<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", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i5$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i10.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i12.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i16.AswTranslatePipe, name: "aswTranslate" }, { kind: "pipe", type: i14.AswSafeHtmlPipe, name: "aswSafeHtml" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswDigitalDialog, decorators: [{
type: Component,
args: [{ selector: 'asw-digital-dialog', template: "<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" }]
}], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.MatDialogRef }, { type: undefined, decorators: [{
type: Inject,
args: [MAT_DIALOG_DATA]
}] }] });
/**
* @license
* Copyright ASW (A Software World) All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file
*/
class AswMultiSelectDialog {
formBuilder;
dialogRef;
data;
constants = Constants;
aswEditMultiselectForm;
status;
icons = Icons;
control;
labelType = 'label';
constructor(formBuilder, dialogRef, data) {
this.formBuilder = formBuilder;
this.dialogRef = dialogRef;
this.data = data;
this.aswEditMultiselectForm = this.formBuilder.group({
id: ['', [Validators.required]],
customClass: [],
tooltip: [''],
label: ['', [Validators.required, Validators.minLength(2)]],
style: [''],
options: this.formBuilder.array([this.createOption()]),
isRequired: [false],
isDisabled: [false],
labelType: ['label'],
apiUrl: [''],
body: [],
method: [],
headers: []
});
}
ngOnInit() {
this.control = this.data.control;
this.setValue(this.control);
}
get options() {
return this.aswEditMultiselectForm.get('options');
}
createOption() {
return this.formBuilder.group({
key: ['', [Validators.required, Validators.minLength(1), Validators.maxLength(50)]],
value: ['', [Validators.required, Validators.minLength(1), Validators.maxLength(999)]],
isChecked: [false],
hideControl: []
});
}
addNewOption() {
this.options.push(this.createOption());
}
onNoClick() {
this.dialogRef.close();
}
removeOption(index) {
this.options.removeAt(index);
}
onSubmit() {
if (this.aswEditMultiselectForm.invalid) {
return;
}
const value = [];
this.aswEditMultiselectForm.value.options.forEach((element, index) => {
if (typeof element.hideControl === 'string') {
element.hideControl = this.control.options[index].hideControl;
}
if (element.isChecked) {
value.push(element.key);
}
});
this.aswEditMultiselectForm.value.value = value;
this.aswEditMultiselectForm.value.controlType = this.control.controlType;
this.aswEditMultiselectForm.value.guid = this.control.guid;
this.dialogRef.close(this.aswEditMultiselectForm.value);
}
setValue(control) {
this.aswEditMultiselectForm.patchValue({
id: control.id,
customClass: control.customClass ?? '',
tooltip: control.tooltip,
label: control.label,
style: control.style,
isRequired: control.isRequired,
value: control.value ?? '',
isDisabled: control.isDisabled,
labelType: control.labelType ?? '',
apiUrl: control.apiUrl ?? '',
method: control.method ?? '',
headers: control.headers ?? '',
body: control.body ?? {}
});
this.labelType = control.labelType ? control.labelType : 'label';
// Populate options array
const optionsArray = this.aswEditMultiselectForm.get('options');
optionsArray.clear(); // Clear existing options
control.options.forEach((option) => {
optionsArray.push(this.formBuilder.group({
key: [option.key, [Validators.required, Validators.minLength(1), Validators.maxLength(50)]],
value: [option.value, [Validators.required, Validators.minLength(1), Validators.maxLength(999)]],
isChecked: [option.isChecked || false],
hideControl: [option.hideControl ? option.hideControl.label : option.hideControl || []]
}));
});
// const optionFormGroup = control.options.map((option: any) => this.formBuilder.group(option));
// const optionFormArray = this.formBuilder.array(optionFormGroup);
// this.aswEditMultiselectForm.setControl('options', optionFormArray);
}
onLabelTypeChange(item) {
if (item.value) {
this.labelType = item.value;
}
else {
this.labelType = item.target.value;
}
}
onStatusChange(event) {
this.status = event.checked ? true : false;
if (event.checked === undefined) {
this.status = event.target.checked ? true : false;
}
}
onKey(event, index) {
let isError = false;
this.options.controls.filter((element, elementIndex) => {
if (element.value.key === event.target.value && index !== elementIndex) {
isError = true;
}
});
if (isError) {
this.options.controls[index].get('key')?.setErrors({ unique: true });
}
}
getApiData(data) {
this.control.body = data.body;
this.control.headers = data.headers;
this.control.method = data.method;
this.control.apiUrl = data.apiUrl;
if (data.responseData?.value) {
this.control.options = data.responseData.value;
this.setValue(this.control);
}
else {
this.control.options = data.responseData;
this.setValue(this.control);
}
}
onControlChange(event, selectControl) {
this.data.allControls.forEach((control) => {
if (event.target.value === control.label) {
selectControl.value.hideControl = control;
}
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswMultiSelectDialog, deps: [{ token: i1.FormBuilder }, { token: i2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: AswMultiSelectDialog, selector: "asw-multi-select-dialog", ngImport: i0, template: "<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