@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
356 lines (351 loc) • 52.3 kB
JavaScript
import * as i0 from '@angular/core';
import { Inject, Component, EventEmitter, HostListener, Output, HostBinding, Directive, Input, APP_INITIALIZER, NgModule } from '@angular/core';
import { CSSFrameworkEnum } from '@asoftwareworld/form-builder-pro/api';
import * as i2$1 from '@asoftwareworld/form-builder-pro/common';
import { Constants, Icons, MaterialModule, AswPipeModule, NotificationService } from '@asoftwareworld/form-builder-pro/common';
import { AswConfirmDialog, AswConfirmDialogModule } from '@asoftwareworld/form-builder-pro/form-control/confirm-dialog';
import { ObjectUtils } from '@asoftwareworld/form-builder-pro/utils';
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 i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i4 from '@angular/material/button';
import * as i5 from '@angular/material/input';
import * as i6 from '@angular/material/form-field';
import * as i7 from '@angular/material/tooltip';
import * as i8 from '@asoftwareworld/form-builder-pro/core';
import { AswLicense, AswTranslateModule, WatermarkService } from '@asoftwareworld/form-builder-pro/core';
import * as i5$1 from '@angular/material/progress-bar';
/**
* @license
* Copyright ASW (A Software World) All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file
*/
class AswFileUploadDialog {
formBuilder;
dialogRef;
data;
constants = Constants;
icons = Icons;
aswFileUploadForm;
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.aswFileUploadForm = this.formBuilder.group({
id: ['', [Validators.required]],
label: ['', [Validators.required, Validators.minLength(2)]],
minSize: [],
maxSize: [],
allowMultipleFile: [],
fileTypes: [],
isRequired: [false]
});
}
editProperty(control) {
this.aswFileUploadForm.setValue({
id: control.id,
label: control.label,
minSize: control.minSize,
maxSize: control.maxSize,
allowMultipleFile: control.allowMultipleFile,
fileTypes: control.fileTypes,
isRequired: control.isRequired
});
}
onNoClick() {
this.dialogRef.close();
}
onSubmit() {
if (this.aswFileUploadForm.invalid) {
return;
}
this.aswFileUploadForm.value.controlType = this.control.controlType;
this.aswFileUploadForm.value.guid = this.control.guid;
this.aswFileUploadForm.value.value = this.control.value;
this.dialogRef.close(this.aswFileUploadForm.value);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswFileUploadDialog, 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: AswFileUploadDialog, selector: "asw-fileupload-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]=\"aswFileUploadForm\" (ngSubmit)=\"onSubmit()\">\r\n <mat-dialog-content class=\"mat-typography\">\r\n <div class=\"asw-row\">\r\n <ng-container *ngIf=\"data.CSSFramework === 'material'; else bootstrap\">\r\n <ng-container *ngIf=\"!data.propertyPersonalization.includes('uniqueId')\">\r\n <div class=\"asw-col-md-12\">\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-error *ngFor=\"let validation of constants.accountValidationMessages.id\">\r\n <ng-container *ngIf=\"aswFileUploadForm.get('id')?.hasError(validation.type) && (aswFileUploadForm.get('id')?.dirty || aswFileUploadForm.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 <div class=\"asw-col-md-6\">\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\" required>\r\n <mat-error *ngFor=\"let validation of constants.accountValidationMessages.label\">\r\n <ng-container *ngIf=\"aswFileUploadForm.get('label')?.hasError(validation.type) && (aswFileUploadForm.get('label')?.dirty || aswFileUploadForm.get('label')?.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.AllowMultipleFile' | aswTranslate}}</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"allowMultipleFile\"\r\n placeholder=\"{{'FormControl.AllowMultipleFile' | aswTranslate}}\"\r\n matTooltip=\"{{'FormControl.AllowMultipleFile' | aswTranslate}}\"\r\n formControlName=\"allowMultipleFile\">\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.MinSize' | aswTranslate}}</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"minSize\"\r\n placeholder=\"{{'FormControl.MinSize' | aswTranslate}}\"\r\n matTooltip=\"{{'FormControl.MinSize' | aswTranslate}}\"\r\n formControlName=\"minSize\">\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.MaxSize' | aswTranslate}}</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"maxSize\"\r\n placeholder=\"{{'FormControl.MaxSize' | aswTranslate}}\"\r\n matTooltip=\"{{'FormControl.MaxSize' | aswTranslate}}\"\r\n formControlName=\"maxSize\">\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.FileTypes' | aswTranslate}}</mat-label>\r\n <textarea matInput type=\"text\"\r\n name=\"fileTypes\"\r\n placeholder=\"{{'FormControl.FileTypes' | aswTranslate}}\"\r\n matTooltip=\"{{'FormControl.FileTypes' | aswTranslate}}\"\r\n formControlName=\"fileTypes\">\r\n </textarea>\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n <ng-template #bootstrap>\r\n <ng-container *ngIf=\"!data.propertyPersonalization.includes('uniqueId')\">\r\n <div class=\"asw-col-md-12\">\r\n <div class=\"asw-mb-3\">\r\n <label class=\"asw-input-label asw-invalid-label {{(aswFileUploadForm.get('id')?.invalid && (aswFileUploadForm.get('id')?.dirty || aswFileUploadForm.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]=\"(aswFileUploadForm.get('id')?.invalid && (aswFileUploadForm.get('id')?.dirty || aswFileUploadForm.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=\"aswFileUploadForm.get('id')?.hasError(validation.type) && (aswFileUploadForm.get('id')?.dirty || aswFileUploadForm.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 <div class=\"asw-col-md-6\">\r\n <div class=\"asw-mb-3\">\r\n <label class=\"asw-input-label asw-invalid-label {{(aswFileUploadForm.get('label')?.invalid && (aswFileUploadForm.get('label')?.dirty || aswFileUploadForm.get('label')?.touched)) ? 'asw-red-color' : ''}}\">{{'FormControl.Label' | aswTranslate}}</label>\r\n <input type=\"text\"\r\n name=\"label\"\r\n class=\"asw-input-control\"\r\n [class.asw-is-invalid]=\"(aswFileUploadForm.get('label')?.invalid && (aswFileUploadForm.get('label')?.dirty || aswFileUploadForm.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=\"aswFileUploadForm.get('label')?.hasError(validation.type) && (aswFileUploadForm.get('label')?.dirty || aswFileUploadForm.get('label')?.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\">{{'FormControl.AllowMultipleFile' | aswTranslate}}</label>\r\n <input type=\"text\"\r\n name=\"allowMultipleFile\"\r\n class=\"asw-input-control\"\r\n matTooltip=\"{{'FormControl.AllowMultipleFile' | aswTranslate}}\"\r\n formControlName=\"allowMultipleFile\">\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\">{{'FormControl.MinSize' | aswTranslate}}</label>\r\n <input type=\"text\"\r\n name=\"minSize\"\r\n class=\"asw-input-control\"\r\n matTooltip=\"{{'FormControl.MinSize' | aswTranslate}}\"\r\n formControlName=\"minSize\">\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\">{{'FormControl.MaxSize' | aswTranslate}}</label>\r\n <input type=\"text\"\r\n name=\"maxSize\"\r\n class=\"asw-input-control\"\r\n matTooltip=\"{{'FormControl.MaxSize' | aswTranslate}}\"\r\n formControlName=\"maxSize\">\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.FileTypes' | aswTranslate}}</label>\r\n <textarea type=\"text\"\r\n name=\"fileTypes\"\r\n class=\"asw-input-control\"\r\n matTooltip=\"{{'FormControl.FileTypes' | aswTranslate}}\"\r\n formControlName=\"fileTypes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </mat-dialog-content>\r\n <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 </mat-dialog-actions>\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { 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: i5.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: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i8.AswTranslatePipe, name: "aswTranslate" }, { kind: "pipe", type: i2$1.AswSafeHtmlPipe, name: "aswSafeHtml" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswFileUploadDialog, decorators: [{
type: Component,
args: [{ selector: 'asw-fileupload-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]=\"aswFileUploadForm\" (ngSubmit)=\"onSubmit()\">\r\n <mat-dialog-content class=\"mat-typography\">\r\n <div class=\"asw-row\">\r\n <ng-container *ngIf=\"data.CSSFramework === 'material'; else bootstrap\">\r\n <ng-container *ngIf=\"!data.propertyPersonalization.includes('uniqueId')\">\r\n <div class=\"asw-col-md-12\">\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-error *ngFor=\"let validation of constants.accountValidationMessages.id\">\r\n <ng-container *ngIf=\"aswFileUploadForm.get('id')?.hasError(validation.type) && (aswFileUploadForm.get('id')?.dirty || aswFileUploadForm.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 <div class=\"asw-col-md-6\">\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\" required>\r\n <mat-error *ngFor=\"let validation of constants.accountValidationMessages.label\">\r\n <ng-container *ngIf=\"aswFileUploadForm.get('label')?.hasError(validation.type) && (aswFileUploadForm.get('label')?.dirty || aswFileUploadForm.get('label')?.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.AllowMultipleFile' | aswTranslate}}</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"allowMultipleFile\"\r\n placeholder=\"{{'FormControl.AllowMultipleFile' | aswTranslate}}\"\r\n matTooltip=\"{{'FormControl.AllowMultipleFile' | aswTranslate}}\"\r\n formControlName=\"allowMultipleFile\">\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.MinSize' | aswTranslate}}</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"minSize\"\r\n placeholder=\"{{'FormControl.MinSize' | aswTranslate}}\"\r\n matTooltip=\"{{'FormControl.MinSize' | aswTranslate}}\"\r\n formControlName=\"minSize\">\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.MaxSize' | aswTranslate}}</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"maxSize\"\r\n placeholder=\"{{'FormControl.MaxSize' | aswTranslate}}\"\r\n matTooltip=\"{{'FormControl.MaxSize' | aswTranslate}}\"\r\n formControlName=\"maxSize\">\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.FileTypes' | aswTranslate}}</mat-label>\r\n <textarea matInput type=\"text\"\r\n name=\"fileTypes\"\r\n placeholder=\"{{'FormControl.FileTypes' | aswTranslate}}\"\r\n matTooltip=\"{{'FormControl.FileTypes' | aswTranslate}}\"\r\n formControlName=\"fileTypes\">\r\n </textarea>\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n <ng-template #bootstrap>\r\n <ng-container *ngIf=\"!data.propertyPersonalization.includes('uniqueId')\">\r\n <div class=\"asw-col-md-12\">\r\n <div class=\"asw-mb-3\">\r\n <label class=\"asw-input-label asw-invalid-label {{(aswFileUploadForm.get('id')?.invalid && (aswFileUploadForm.get('id')?.dirty || aswFileUploadForm.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]=\"(aswFileUploadForm.get('id')?.invalid && (aswFileUploadForm.get('id')?.dirty || aswFileUploadForm.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=\"aswFileUploadForm.get('id')?.hasError(validation.type) && (aswFileUploadForm.get('id')?.dirty || aswFileUploadForm.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 <div class=\"asw-col-md-6\">\r\n <div class=\"asw-mb-3\">\r\n <label class=\"asw-input-label asw-invalid-label {{(aswFileUploadForm.get('label')?.invalid && (aswFileUploadForm.get('label')?.dirty || aswFileUploadForm.get('label')?.touched)) ? 'asw-red-color' : ''}}\">{{'FormControl.Label' | aswTranslate}}</label>\r\n <input type=\"text\"\r\n name=\"label\"\r\n class=\"asw-input-control\"\r\n [class.asw-is-invalid]=\"(aswFileUploadForm.get('label')?.invalid && (aswFileUploadForm.get('label')?.dirty || aswFileUploadForm.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=\"aswFileUploadForm.get('label')?.hasError(validation.type) && (aswFileUploadForm.get('label')?.dirty || aswFileUploadForm.get('label')?.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\">{{'FormControl.AllowMultipleFile' | aswTranslate}}</label>\r\n <input type=\"text\"\r\n name=\"allowMultipleFile\"\r\n class=\"asw-input-control\"\r\n matTooltip=\"{{'FormControl.AllowMultipleFile' | aswTranslate}}\"\r\n formControlName=\"allowMultipleFile\">\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\">{{'FormControl.MinSize' | aswTranslate}}</label>\r\n <input type=\"text\"\r\n name=\"minSize\"\r\n class=\"asw-input-control\"\r\n matTooltip=\"{{'FormControl.MinSize' | aswTranslate}}\"\r\n formControlName=\"minSize\">\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\">{{'FormControl.MaxSize' | aswTranslate}}</label>\r\n <input type=\"text\"\r\n name=\"maxSize\"\r\n class=\"asw-input-control\"\r\n matTooltip=\"{{'FormControl.MaxSize' | aswTranslate}}\"\r\n formControlName=\"maxSize\">\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.FileTypes' | aswTranslate}}</label>\r\n <textarea type=\"text\"\r\n name=\"fileTypes\"\r\n class=\"asw-input-control\"\r\n matTooltip=\"{{'FormControl.FileTypes' | aswTranslate}}\"\r\n formControlName=\"fileTypes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </mat-dialog-content>\r\n <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 </mat-dialog-actions>\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 AswDragAndDropDirective {
fileOver = false;
fileDropped = new EventEmitter();
// Dragover listener
onDragOver(evt) {
evt.preventDefault();
evt.stopPropagation();
this.fileOver = true;
}
// Dragleave listener
onDragLeave(evt) {
evt.preventDefault();
evt.stopPropagation();
this.fileOver = false;
}
// Drop listener
ondrop(evt) {
evt.preventDefault();
evt.stopPropagation();
this.fileOver = false;
const files = evt.dataTransfer.files;
if (files.length > 0) {
this.fileDropped.emit(files);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswDragAndDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: AswDragAndDropDirective, selector: "[aswDragAndDrop]", outputs: { fileDropped: "fileDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "ondrop($event)" }, properties: { "class.fileover": "this.fileOver" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswDragAndDropDirective, decorators: [{
type: Directive,
args: [{
selector: '[aswDragAndDrop]'
}]
}], propDecorators: { fileOver: [{
type: HostBinding,
args: ['class.fileover']
}], fileDropped: [{
type: Output
}], onDragOver: [{
type: HostListener,
args: ['dragover', ['$event']]
}], onDragLeave: [{
type: HostListener,
args: ['dragleave', ['$event']]
}], ondrop: [{
type: HostListener,
args: ['drop', ['$event']]
}] } });
/**
* @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 AswFileUpload {
dialog;
notificationService;
constants = Constants;
icons = Icons;
control;
CSSFramework = CSSFrameworkEnum.Material;
isPreviewTemplate = false;
propertyPersonalization = [];
fileUploadUpdateEvent = new EventEmitter();
fileUploadDeleteEvent = new EventEmitter();
onfileUploadChange = new EventEmitter();
duplicateControl = new EventEmitter();
constructor(dialog, notificationService) {
this.dialog = dialog;
this.notificationService = notificationService;
}
/**
* on file drop handler
*/
onFileDropped(event) {
this.validateFileList(event);
}
/**
* handle file from browsing
*/
fileBrowseHandler(event) {
this.validateFileList(event.target?.files);
}
/**
* Delete file from files list
* @param index (File index)
*/
deleteFile(index) {
this.control.value.splice(index, 1);
this.onfileUploadChange.emit();
}
/**
* Simulate the upload process
*/
uploadFilesSimulator(index) {
setTimeout(() => {
if (index === this.control.value.length) {
return;
}
else {
const progressInterval = setInterval(() => {
if (this.control.value[index].progress === 100) {
clearInterval(progressInterval);
this.uploadFilesSimulator(index + 1);
}
else {
this.control.value[index].progress += 5;
}
}, 200);
}
}, 1000);
}
/**
* Convert Files list to normal array list
* @param files (Files List)
*/
prepareFilesList(files) {
for (const item of files) {
item.progress = 0;
this.control.value.push(item);
this.onfileUploadChange.emit(item);
}
this.uploadFilesSimulator(0);
}
validateFileList(files) {
if (!ObjectUtils.missingOrEmpty(this.control.allowMultipleFile)) {
const fileCount = files.length + this.control.value.length;
if (!(fileCount <= Number(this.control.allowMultipleFile))) {
this.notificationService.openNotification('Only ' + this.control.allowMultipleFile + ' files are allowed to upload.', 'Close');
return;
}
}
const fileTypes = this.control.fileTypes.split(',');
for (const item of files) {
if (!ObjectUtils.missingOrEmpty(this.control.fileTypes)) {
const extension = item.name.split('.')[1];
if (!fileTypes.find((x) => x.trim() === extension)) {
this.notificationService.openNotification(item.name + ' has invalid extension. Only ' + this.control.fileTypes + ' are allowed.', 'Close');
return;
}
}
if (!ObjectUtils.missingOrEmpty(this.control.minSize)) {
const minFileSize = Number(this.control.minSize) * 1000;
if (item.size <= minFileSize) {
this.notificationService.openNotification(item.name + ' is too small, minimum file size is ' + this.control.minSize + 'KB.', 'Close');
return;
}
}
if (!ObjectUtils.missingOrEmpty(this.control.maxSize)) {
const maxFileSize = Number(this.control.maxSize) * 1000;
if (item.size >= maxFileSize) {
this.notificationService.openNotification(item.name + ' is too large, maximum file size is ' + this.control.maxSize + 'KB.', 'Close');
return;
}
}
}
this.prepareFilesList(files);
}
/**
* format bytes
* @param bytes (File size in bytes)
* @param decimals (Decimals point)
*/
formatBytes(bytes, decimals) {
if (bytes === 0) {
return '0 Bytes';
}
const k = 1024;
const dm = decimals <= 0 ? 0 : decimals || 2;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
editFileUploadDialog(control) {
const dialogRef = this.dialog.open(AswFileUploadDialog, {
width: '50%',
disableClose: true,
data: { control, CSSFramework: this.CSSFramework, propertyPersonalization: this.propertyPersonalization }
});
dialogRef.afterClosed().subscribe((result) => {
if (result !== undefined) {
this.fileUploadUpdateEvent.emit(result);
}
});
}
deleteFileUploadDialog(control) {
const dialogRef = this.dialog.open(AswConfirmDialog, {
width: '350px',
data: { name: control.controlType, message: this.constants.messages.waringMessage }
});
dialogRef.afterClosed().subscribe((result) => {
if (result !== undefined) {
this.fileUploadDeleteEvent.emit(control);
}
});
}
duplicateFileUploadControl(control) {
this.duplicateControl.emit(control);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswFileUpload, deps: [{ token: i2.MatDialog }, { token: i2$1.NotificationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: AswFileUpload, selector: "asw-fileupload", inputs: { control: "control", CSSFramework: "CSSFramework", isPreviewTemplate: "isPreviewTemplate", propertyPersonalization: "propertyPersonalization" }, outputs: { fileUploadUpdateEvent: "fileUploadUpdateEvent", fileUploadDeleteEvent: "fileUploadDeleteEvent", onfileUploadChange: "onfileUploadChange", duplicateControl: "duplicateControl" }, ngImport: i0, template: "<div class=\"asw-upload-container\" aswDragAndDrop (fileDropped)=\"onFileDropped($event)\">\r\n\t<div class=\"asw-drop-area\">\r\n\t\t<input type=\"file\" #fileDropRef id=\"fileDropRef\" multiple (change)=\"fileBrowseHandler($event)\" />\r\n\t\t<span>\r\n\t\t\t{{'Drag and drop files here or' | aswTranslate}}\r\n\t\t\t<a href=\"javascript:void(0);\" for=\"fileDropRef\"><u>{{'Browse' | aswTranslate}}</u></a>\r\n\t\t</span>\r\n\t</div>\r\n</div>\r\n<ul class=\"asw-file-lists\">\r\n\t<li class=\"asw-single-list\" *ngFor=\"let file of control.value; let i = index\">\r\n\t\t<span class=\"asw-file-name\" [ngStyle]=\"{'color':file?.progress === 100 ? 'green' : '' }\">{{ file?.name }}</span>\r\n\t\t<span class=\"asw-file-size\" style=\"display: inline-block;\">{{ formatBytes(file?.size, undefined) }}</span>\r\n\t\t<span class=\"asw-delete-svg\" (click)=\"deleteFile(i)\" [innerHTML]=\"icons.delete2 | aswSafeHtml\"></span>\r\n\t\t<ng-container *ngIf=\"file?.progress < 100\">\r\n\t\t\t<mat-progress-bar mode=\"determinate\" [value]=\"file?.progress\"></mat-progress-bar>\r\n\t\t</ng-container>\r\n\t</li>\r\n</ul>\r\n<div class=\"asw-row\" *ngIf=\"isPreviewTemplate\">\r\n <div class=\"asw-col-md-12\" align=\"right\">\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"{{'FormControl.Duplicate' | aswTranslate}}\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"duplicateFileUploadControl(control)\">\r\n <div [innerHTML]=\"icons.contentCopy | aswSafeHtml\"></div>\r\n </button>\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"{{'FormControl.Edit' | aswTranslate}}\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"editFileUploadDialog(control)\">\r\n <div [innerHTML]=\"icons.edit | aswSafeHtml\"></div>\r\n </button>\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"{{'FormControl.Delete' | aswTranslate}}\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"deleteFileUploadDialog(control)\">\r\n <div [innerHTML]=\"icons.delete2 | aswSafeHtml\"></div>\r\n </button>\r\n </div>\r\n</div>", styles: [".asw-upload-container{text-align:center;position:relative;margin:auto;min-width:245px}.asw-upload-container .asw-drop-area{min-height:50px;margin:10px 0;position:relative;font-size:14px}.asw-upload-container .asw-drop-area span{padding:3% 30%;display:inherit;border:dashed 1px #c3c3cc}.asw-upload-container .asw-drop-area input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;top:0;left:0;cursor:pointer}.fileover{animation:shake 1s;animation-iteration-count:infinite}.asw-file-lists{list-style:none;width:100%;padding-left:0}.asw-file-lists li.asw-single-list{border:1px solid #d3d3d3;padding:0 6px;margin-top:10px;position:relative;background:#0000000a}.asw-file-lists .asw-file-name{padding:8px 6px 8px 0;width:46%;display:inline-block;position:relative}.asw-file-lists .asw-file-size{padding:8px 6px 8px 0;width:25%;display:inline-block;position:relative}.asw-file-lists .asw-delete-svg{cursor:pointer;padding:6px;position:absolute;right:0}@keyframes shake{0%{transform:translate(1px,1px) rotate(0)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0)}to{transform:translate(1px,-2px) rotate(-1deg)}}\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: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: AswDragAndDropDirective, selector: "[aswDragAndDrop]", outputs: ["fileDropped"] }, { kind: "pipe", type: i8.AswTranslatePipe, name: "aswTranslate" }, { kind: "pipe", type: i2$1.AswSafeHtmlPipe, name: "aswSafeHtml" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswFileUpload, decorators: [{
type: Component,
args: [{ selector: 'asw-fileupload', template: "<div class=\"asw-upload-container\" aswDragAndDrop (fileDropped)=\"onFileDropped($event)\">\r\n\t<div class=\"asw-drop-area\">\r\n\t\t<input type=\"file\" #fileDropRef id=\"fileDropRef\" multiple (change)=\"fileBrowseHandler($event)\" />\r\n\t\t<span>\r\n\t\t\t{{'Drag and drop files here or' | aswTranslate}}\r\n\t\t\t<a href=\"javascript:void(0);\" for=\"fileDropRef\"><u>{{'Browse' | aswTranslate}}</u></a>\r\n\t\t</span>\r\n\t</div>\r\n</div>\r\n<ul class=\"asw-file-lists\">\r\n\t<li class=\"asw-single-list\" *ngFor=\"let file of control.value; let i = index\">\r\n\t\t<span class=\"asw-file-name\" [ngStyle]=\"{'color':file?.progress === 100 ? 'green' : '' }\">{{ file?.name }}</span>\r\n\t\t<span class=\"asw-file-size\" style=\"display: inline-block;\">{{ formatBytes(file?.size, undefined) }}</span>\r\n\t\t<span class=\"asw-delete-svg\" (click)=\"deleteFile(i)\" [innerHTML]=\"icons.delete2 | aswSafeHtml\"></span>\r\n\t\t<ng-container *ngIf=\"file?.progress < 100\">\r\n\t\t\t<mat-progress-bar mode=\"determinate\" [value]=\"file?.progress\"></mat-progress-bar>\r\n\t\t</ng-container>\r\n\t</li>\r\n</ul>\r\n<div class=\"asw-row\" *ngIf=\"isPreviewTemplate\">\r\n <div class=\"asw-col-md-12\" align=\"right\">\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"{{'FormControl.Duplicate' | aswTranslate}}\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"duplicateFileUploadControl(control)\">\r\n <div [innerHTML]=\"icons.contentCopy | aswSafeHtml\"></div>\r\n </button>\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"{{'FormControl.Edit' | aswTranslate}}\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"editFileUploadDialog(control)\">\r\n <div [innerHTML]=\"icons.edit | aswSafeHtml\"></div>\r\n </button>\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"{{'FormControl.Delete' | aswTranslate}}\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"deleteFileUploadDialog(control)\">\r\n <div [innerHTML]=\"icons.delete2 | aswSafeHtml\"></div>\r\n </button>\r\n </div>\r\n</div>", styles: [".asw-upload-container{text-align:center;position:relative;margin:auto;min-width:245px}.asw-upload-container .asw-drop-area{min-height:50px;margin:10px 0;position:relative;font-size:14px}.asw-upload-container .asw-drop-area span{padding:3% 30%;display:inherit;border:dashed 1px #c3c3cc}.asw-upload-container .asw-drop-area input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;top:0;left:0;cursor:pointer}.fileover{animation:shake 1s;animation-iteration-count:infinite}.asw-file-lists{list-style:none;width:100%;padding-left:0}.asw-file-lists li.asw-single-list{border:1px solid #d3d3d3;padding:0 6px;margin-top:10px;position:relative;background:#0000000a}.asw-file-lists .asw-file-name{padding:8px 6px 8px 0;width:46%;display:inline-block;position:relative}.asw-file-lists .asw-file-size{padding:8px 6px 8px 0;width:25%;display:inline-block;position:relative}.asw-file-lists .asw-delete-svg{cursor:pointer;padding:6px;position:absolute;right:0}@keyframes shake{0%{transform:translate(1px,1px) rotate(0)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0)}to{transform:translate(1px,-2px) rotate(-1deg)}}\n"] }]
}], ctorParameters: () => [{ type: i2.MatDialog }, { type: i2$1.NotificationService }], propDecorators: { control: [{
type: Input
}], CSSFramework: [{
type: Input
}], isPreviewTemplate: [{
type: Input
}], propertyPersonalization: [{
type: Input
}], fileUploadUpdateEvent: [{
type: Output
}], fileUploadDeleteEvent: [{
type: Output
}], onfileUploadChange: [{
type: Output
}], duplicateControl: [{
type: Output
}] } });
/**
* @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
*/
/**
* @license
* Copyright ASW (A Software World) All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file
*/
function initializeLicense() {
return () => {
AswLicense.validateLicense();
return Promise.resolve();
};
}
class AswFileUploadModule {
watermarkService;
constructor(watermarkService) {
this.watermarkService = watermarkService;
// Call the showWatermark method when the module is loaded
const isValid = AswLicense.isDisplayWatermark();
if (isValid) {
this.watermarkService.showWatermark();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswFileUploadModule, deps: [{ token: i8.WatermarkService }], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngI