@asoftwareworld/form-builder
Version:
ASW Form Builder 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 befor
395 lines (387 loc) • 47.6 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, Input, HostListener, Component, Inject, EventEmitter, Output, ViewChild, NgModule } from '@angular/core';
import { AswConfirmDialog, AswConfirmDialogModule } from '@asoftwareworld/form-builder/form-control/confirm-dialog';
import { Constants, ObjectUtils } from '@asoftwareworld/form-builder/form-control/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, MatDialogModule } from '@angular/material/dialog';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i4 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import * as i5 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import * as i6 from '@angular/material/select';
import { MatSelectModule } from '@angular/material/select';
import * as i7 from '@angular/material/core';
import * as i8 from '@angular/material/slide-toggle';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import * as i9 from '@angular/material/tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';
import * as i10 from '@angular/material/divider';
import { MatDividerModule } from '@angular/material/divider';
import * as i7$1 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i8$1 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
/**
* @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 AswNumberDirective {
el;
// tslint:disable-next-line:no-input-rename
decimals = 0;
// tslint:disable-next-line:no-input-rename
negative = 0;
checkAllowNegative(value) {
if (this.decimals <= 0) {
return String(value).match(new RegExp(/^-?\d+$/));
}
else {
const regExpString = '^-?\\s*((\\d+(\\.\\d{0,' +
this.decimals +
'})?)|((\\d*(\\.\\d{1,' +
this.decimals +
'}))))\\s*$';
return String(value).match(new RegExp(regExpString));
}
}
check(value) {
if (this.decimals <= 0) {
return String(value).match(new RegExp(/^\d+$/));
}
else {
const regExpString = '^\\s*((\\d+(\\.\\d{0,' +
this.decimals +
'})?)|((\\d*(\\.\\d{1,' +
this.decimals +
'}))))\\s*$';
return String(value).match(new RegExp(regExpString));
}
}
run(oldValue) {
setTimeout(() => {
const currentValue = this.el.nativeElement.value;
const allowNegative = this.negative > 0 ? true : false;
if (allowNegative) {
if (!['', '-'].includes(currentValue) &&
!this.checkAllowNegative(currentValue)) {
this.el.nativeElement.value = oldValue;
}
}
else {
if (currentValue !== '' && !this.check(currentValue)) {
this.el.nativeElement.value = oldValue;
}
}
});
}
constructor(el) {
this.el = el;
}
onKeyDown(event) {
this.run(this.el.nativeElement.value);
}
onPaste(event) {
this.run(this.el.nativeElement.value);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AswNumberDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.11", type: AswNumberDirective, selector: "[aswNumbersOnly]", inputs: { decimals: "decimals", negative: "negative" }, host: { listeners: { "keydown": "onKeyDown($event)", "paste": "onPaste($event)" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AswNumberDirective, decorators: [{
type: Directive,
args: [{
selector: '[aswNumbersOnly]'
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { decimals: [{
type: Input,
args: ['decimals']
}], negative: [{
type: Input,
args: ['negative']
}], onKeyDown: [{
type: HostListener,
args: ['keydown', ['$event']]
}], onPaste: [{
type: HostListener,
args: ['paste', ['$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 AswNumberDialog {
formBuilder;
dialogRef;
control;
decimals = 100;
constants = Constants;
aswEditNumberForm;
status;
objectUtils = ObjectUtils;
disabled;
constructor(formBuilder, dialogRef, control) {
this.formBuilder = formBuilder;
this.dialogRef = dialogRef;
this.control = control;
}
ngOnInit() {
this.validateFormBuilder();
this.editProperty(this.control);
}
validateFormBuilder() {
this.aswEditNumberForm = this.formBuilder.group({
id: ['', [Validators.required]],
tooltip: ['', []],
label: ['', [Validators.required, Validators.minLength(2)]],
value: ['', []],
style: ['', [Validators.required]],
column: [''],
customClass: [''],
maxlength: [''],
minlength: ['', [Validators.required,
Validators.minLength(1), Validators.maxLength(3),
Validators.pattern(this.constants.matchPattern.numberPattern)]],
isRequired: [false],
isDisabled: [false]
});
}
editProperty(control) {
this.aswEditNumberForm.setValue({
id: control.id,
tooltip: control.tooltip,
label: control.label,
customClass: control.customClass ?? '',
value: control.value ?? '',
maxlength: control.maxlength,
minlength: control.minlength,
column: control.column,
style: control.style,
isRequired: control.isRequired,
isDisabled: control.isDisabled ?? false
});
}
onNoClick() {
this.dialogRef.close();
}
onSubmit() {
if (this.aswEditNumberForm.invalid) {
return;
}
this.aswEditNumberForm.value.controlType = this.control.controlType;
this.aswEditNumberForm.value.guid = this.control.guid;
this.dialogRef.close(this.aswEditNumberForm.value);
}
onStatusChange(event) {
this.status = event.checked ? true : false;
}
onChange(event) {
this.disabled = event.checked ? true : false;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AswNumberDialog, 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.11", type: AswNumberDialog, selector: "asw-number-dialog", ngImport: i0, template: "<h4 mat-dialog-title>Edit Property</h4>\r\n<mat-divider></mat-divider>\r\n<form [formGroup]=\"aswEditNumberForm\" (ngSubmit)=\"onSubmit()\">\r\n <mat-dialog-content class=\"mat-typography\">\r\n <div class=\"asw-full-width\"><br>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Unique Id</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"id\"\r\n placeholder=\"Enter Unique Id\"\r\n matTooltip=\"Enter Unique Id\"\r\n formControlName=\"id\" required>\r\n <mat-error class=\"asw-mat-error\" *ngFor=\"let validation of constants.accountValidationMessages.id\">\r\n <ng-container class=\"asw-mat-error\" *ngIf=\"aswEditNumberForm.get('id')?.hasError(validation.type) && (aswEditNumberForm.get('id')?.dirty || aswEditNumberForm.get('id')?.touched)\">\r\n {{validation.message}}\r\n </ng-container>\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Label</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"label\"\r\n placeholder=\"Enter label\"\r\n matTooltip=\"Enter label\"\r\n formControlName=\"label\" required>\r\n <mat-error class=\"asw-mat-error\" *ngFor=\"let validation of constants.accountValidationMessages.label\">\r\n <ng-container class=\"asw-mat-error\" *ngIf=\"aswEditNumberForm.get('label')?.hasError(validation.type) && (aswEditNumberForm.get('label')?.dirty || aswEditNumberForm.get('label')?.touched)\">\r\n {{validation.message}}\r\n </ng-container>\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Custom CSS Class</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"customClass\"\r\n placeholder=\"Custom CSS Class\"\r\n matTooltip=\"Custom CSS Class\"\r\n formControlName=\"customClass\">\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Tooltip</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"tooltip\"\r\n placeholder=\"Enter tooltip\"\r\n matTooltip=\"Enter tooltip\"\r\n formControlName=\"tooltip\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Value</mat-label>\r\n <input matInput type=\"text\" aswNumbersOnly\r\n name=\"value\"\r\n placeholder=\"Enter value\"\r\n [decimals]=\"decimals\"\r\n matTooltip=\"Enter value\"\r\n formControlName=\"value\"> \r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Number Style</mat-label>\r\n <mat-select formControlName=\"style\" matTooltip=\"Select textbox style\">\r\n <mat-option value=\"legacy\">Legacy</mat-option>\r\n <mat-option value=\"standard\">Standard</mat-option>\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 </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Column Size</mat-label>\r\n <mat-select formControlName=\"column\" matTooltip=\"Select column size\">\r\n <mat-option *ngFor=\"let column of constants.columns\" [value]=\"column.value\">\r\n {{column.label}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Min Length</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"minlength\"\r\n placeholder=\"Enter minlength\"\r\n matTooltip=\"Enter minlength\"\r\n maxlength=\"3\"\r\n minlength=\"1\"\r\n pattern=\"^[0-9]*$\"\r\n formControlName=\"minlength\" required>\r\n <mat-error class=\"asw-mat-error\" *ngFor=\"let validation of constants.accountValidationMessages.minlength\">\r\n <ng-container class=\"asw-mat-error\" *ngIf=\"aswEditNumberForm.get('minlength')?.hasError(validation.type)\">\r\n {{validation.message}}\r\n </ng-container>\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Max Length</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"maxlength\"\r\n placeholder=\"Enter maxlength\"\r\n matTooltip=\"Enter maxlength\"\r\n formControlName=\"maxlength\">\r\n </mat-form-field>\r\n </div>\r\n </div> \r\n <div class=\"row\">\r\n <div class=\"col-md-4\">\r\n <mat-slide-toggle color=\"primary\"\r\n #isActive\r\n formControlName=\"isRequired\"\r\n (change)=\"onStatusChange($event)\">\r\n <ng-container *ngIf=\"status; else not\">\r\n NotRequired\r\n </ng-container>\r\n <ng-template #not>\r\n Required\r\n </ng-template>\r\n </mat-slide-toggle>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <mat-slide-toggle color=\"primary\"\r\n #isDisable\r\n formControlName=\"isDisabled\"\r\n (change)=\"onChange($event)\">\r\n <ng-container *ngIf=\"disabled; else enabled\">\r\n Enabled\r\n </ng-container>\r\n <ng-template #enabled>\r\n Disabled\r\n </ng-template>\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n </div>\r\n </mat-dialog-content>\r\n <mat-dialog-actions align=\"end\">\r\n <button type=\"button\"\r\n class=\"btn btn-danger mr-2 me-2 mb-1\"\r\n (click)=\"onNoClick()\">\r\n No\r\n </button>\r\n <button type=\"submit\"\r\n class=\"btn btn-primary mb-1\"\r\n cdkFocusInitial>\r\n Yes\r\n </button>\r\n </mat-dialog-actions>\r\n</form>\r\n\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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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: "directive", type: i4.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: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: "component", type: i8.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: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i10.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: AswNumberDirective, selector: "[aswNumbersOnly]", inputs: ["decimals", "negative"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AswNumberDialog, decorators: [{
type: Component,
args: [{ selector: 'asw-number-dialog', template: "<h4 mat-dialog-title>Edit Property</h4>\r\n<mat-divider></mat-divider>\r\n<form [formGroup]=\"aswEditNumberForm\" (ngSubmit)=\"onSubmit()\">\r\n <mat-dialog-content class=\"mat-typography\">\r\n <div class=\"asw-full-width\"><br>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Unique Id</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"id\"\r\n placeholder=\"Enter Unique Id\"\r\n matTooltip=\"Enter Unique Id\"\r\n formControlName=\"id\" required>\r\n <mat-error class=\"asw-mat-error\" *ngFor=\"let validation of constants.accountValidationMessages.id\">\r\n <ng-container class=\"asw-mat-error\" *ngIf=\"aswEditNumberForm.get('id')?.hasError(validation.type) && (aswEditNumberForm.get('id')?.dirty || aswEditNumberForm.get('id')?.touched)\">\r\n {{validation.message}}\r\n </ng-container>\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Label</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"label\"\r\n placeholder=\"Enter label\"\r\n matTooltip=\"Enter label\"\r\n formControlName=\"label\" required>\r\n <mat-error class=\"asw-mat-error\" *ngFor=\"let validation of constants.accountValidationMessages.label\">\r\n <ng-container class=\"asw-mat-error\" *ngIf=\"aswEditNumberForm.get('label')?.hasError(validation.type) && (aswEditNumberForm.get('label')?.dirty || aswEditNumberForm.get('label')?.touched)\">\r\n {{validation.message}}\r\n </ng-container>\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Custom CSS Class</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"customClass\"\r\n placeholder=\"Custom CSS Class\"\r\n matTooltip=\"Custom CSS Class\"\r\n formControlName=\"customClass\">\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Tooltip</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"tooltip\"\r\n placeholder=\"Enter tooltip\"\r\n matTooltip=\"Enter tooltip\"\r\n formControlName=\"tooltip\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Value</mat-label>\r\n <input matInput type=\"text\" aswNumbersOnly\r\n name=\"value\"\r\n placeholder=\"Enter value\"\r\n [decimals]=\"decimals\"\r\n matTooltip=\"Enter value\"\r\n formControlName=\"value\"> \r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Number Style</mat-label>\r\n <mat-select formControlName=\"style\" matTooltip=\"Select textbox style\">\r\n <mat-option value=\"legacy\">Legacy</mat-option>\r\n <mat-option value=\"standard\">Standard</mat-option>\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 </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Column Size</mat-label>\r\n <mat-select formControlName=\"column\" matTooltip=\"Select column size\">\r\n <mat-option *ngFor=\"let column of constants.columns\" [value]=\"column.value\">\r\n {{column.label}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Min Length</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"minlength\"\r\n placeholder=\"Enter minlength\"\r\n matTooltip=\"Enter minlength\"\r\n maxlength=\"3\"\r\n minlength=\"1\"\r\n pattern=\"^[0-9]*$\"\r\n formControlName=\"minlength\" required>\r\n <mat-error class=\"asw-mat-error\" *ngFor=\"let validation of constants.accountValidationMessages.minlength\">\r\n <ng-container class=\"asw-mat-error\" *ngIf=\"aswEditNumberForm.get('minlength')?.hasError(validation.type)\">\r\n {{validation.message}}\r\n </ng-container>\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Max Length</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"maxlength\"\r\n placeholder=\"Enter maxlength\"\r\n matTooltip=\"Enter maxlength\"\r\n formControlName=\"maxlength\">\r\n </mat-form-field>\r\n </div>\r\n </div> \r\n <div class=\"row\">\r\n <div class=\"col-md-4\">\r\n <mat-slide-toggle color=\"primary\"\r\n #isActive\r\n formControlName=\"isRequired\"\r\n (change)=\"onStatusChange($event)\">\r\n <ng-container *ngIf=\"status; else not\">\r\n NotRequired\r\n </ng-container>\r\n <ng-template #not>\r\n Required\r\n </ng-template>\r\n </mat-slide-toggle>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <mat-slide-toggle color=\"primary\"\r\n #isDisable\r\n formControlName=\"isDisabled\"\r\n (change)=\"onChange($event)\">\r\n <ng-container *ngIf=\"disabled; else enabled\">\r\n Enabled\r\n </ng-container>\r\n <ng-template #enabled>\r\n Disabled\r\n </ng-template>\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n </div>\r\n </mat-dialog-content>\r\n <mat-dialog-actions align=\"end\">\r\n <button type=\"button\"\r\n class=\"btn btn-danger mr-2 me-2 mb-1\"\r\n (click)=\"onNoClick()\">\r\n No\r\n </button>\r\n <button type=\"submit\"\r\n class=\"btn btn-primary mb-1\"\r\n cdkFocusInitial>\r\n Yes\r\n </button>\r\n </mat-dialog-actions>\r\n</form>\r\n\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 AswNumber {
dialog;
constants = Constants;
objectUtils = ObjectUtils;
decimals = 100;
/**
* Number control
*/
control = null;
formControls = [];
/**
* Number control index to help update or delete button from drop area
*/
controlIndex;
isPreviewTemplate = false;
numberUpdateEvent = new EventEmitter();
numberDeleteEvent = new EventEmitter();
aswModelChange = new EventEmitter();
duplicateControl = new EventEmitter();
input;
constructor(dialog) {
this.dialog = dialog;
}
ngOnInit() {
// tslint:disable-next-line:no-bitwise
const id = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
if (this.control) {
this.control.guid = this.control.guid ? this.control.guid : id;
}
}
ngAfterViewInit() {
this.input.valueChanges.subscribe(() => {
this.onChange(this.control ? this.control : null);
});
}
deleteNumberDialog(control, controlIndex) {
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.numberDeleteEvent.emit(controlIndex);
}
});
}
editNumberDialog(control, controlIndex) {
const dialogRef = this.dialog.open(AswNumberDialog, {
disableClose: true,
width: '80%',
minWidth: '70vw',
data: control
});
dialogRef.afterClosed().subscribe(result => {
if (result !== undefined) {
this.numberUpdateEvent.emit({ control: result, index: controlIndex });
}
});
}
onChange(control) {
const calculationControls = this.formControls.filter(x => x.controlType === 'calculation');
calculationControls.forEach(calculation => {
const updateControls = calculation.operations.filter((x) => x.id === control.guid);
updateControls.forEach((y) => {
y.label = control.label;
y.value = control.value;
});
calculation.value = this.objectUtils.calculateValue(calculation.operations);
});
this.aswModelChange.emit(control);
}
duplicateNumberControl(control) {
this.duplicateControl.emit(control);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AswNumber, deps: [{ token: i2.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: AswNumber, selector: "asw-number", inputs: { control: "control", formControls: "formControls", controlIndex: "controlIndex", isPreviewTemplate: "isPreviewTemplate" }, outputs: { numberUpdateEvent: "numberUpdateEvent", numberDeleteEvent: "numberDeleteEvent", aswModelChange: "aswModelChange", duplicateControl: "duplicateControl" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"control as control\">\r\n <mat-form-field [appearance]=\"control.style\" class=\"asw-mat-form-field {{control.customClass}}\">\r\n <mat-label>{{control.label}}</mat-label>\r\n <input matInput type=\"text\" aswNumbersOnly\r\n [id]=\"control.id\"\r\n [placeholder]=\"control.label\"\r\n [(ngModel)]=\"control.value\"\r\n #input=\"ngModel\"\r\n (ngModelChange)=\"onChange(control)\"\r\n [decimals]=\"decimals\"\r\n [matTooltip]=\"control.tooltip\"\r\n [maxlength]=\"control.maxlength\"\r\n [minlength]=\"control.minlength\"\r\n [required]=\"control.isRequired\"\r\n [disabled]=\"control.isDisabled ? true : false\">\r\n <mat-error class=\"asw-mat-error\" *ngIf=\"input.invalid && (input.dirty || input.touched)\">\r\n <mat-error class=\"asw-mat-error\" *ngIf=\"input?.errors?.required\">\r\n {{control.label}} is required\r\n </mat-error>\r\n <mat-error class=\"asw-mat-error\" *ngIf=\"input?.errors?.minlength\">\r\n Sorry, {{control.label}} must be at least {{control.minlength}} characters long.\r\n </mat-error>\r\n </mat-error>\r\n </mat-form-field>\r\n <ng-template [ngIf]=\"isPreviewTemplate\">\r\n <div class=\"row mb-2\">\r\n <div class=\"col-md-12\">\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"Duplicate\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"duplicateNumberControl(control)\">\r\n <mat-icon>content_copy</mat-icon>\r\n </button>\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"Edit\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"editNumberDialog(control, controlIndex)\">\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"Delete\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"deleteNumberDialog(control, controlIndex)\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n </div> \r\n </div>\r\n </ng-template>\r\n</ng-container>", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.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: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: AswNumberDirective, selector: "[aswNumbersOnly]", inputs: ["decimals", "negative"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AswNumber, decorators: [{
type: Component,
args: [{ selector: 'asw-number', template: "<ng-container *ngIf=\"control as control\">\r\n <mat-form-field [appearance]=\"control.style\" class=\"asw-mat-form-field {{control.customClass}}\">\r\n <mat-label>{{control.label}}</mat-label>\r\n <input matInput type=\"text\" aswNumbersOnly\r\n [id]=\"control.id\"\r\n [placeholder]=\"control.label\"\r\n [(ngModel)]=\"control.value\"\r\n #input=\"ngModel\"\r\n (ngModelChange)=\"onChange(control)\"\r\n [decimals]=\"decimals\"\r\n [matTooltip]=\"control.tooltip\"\r\n [maxlength]=\"control.maxlength\"\r\n [minlength]=\"control.minlength\"\r\n [required]=\"control.isRequired\"\r\n [disabled]=\"control.isDisabled ? true : false\">\r\n <mat-error class=\"asw-mat-error\" *ngIf=\"input.invalid && (input.dirty || input.touched)\">\r\n <mat-error class=\"asw-mat-error\" *ngIf=\"input?.errors?.required\">\r\n {{control.label}} is required\r\n </mat-error>\r\n <mat-error class=\"asw-mat-error\" *ngIf=\"input?.errors?.minlength\">\r\n Sorry, {{control.label}} must be at least {{control.minlength}} characters long.\r\n </mat-error>\r\n </mat-error>\r\n </mat-form-field>\r\n <ng-template [ngIf]=\"isPreviewTemplate\">\r\n <div class=\"row mb-2\">\r\n <div class=\"col-md-12\">\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"Duplicate\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"duplicateNumberControl(control)\">\r\n <mat-icon>content_copy</mat-icon>\r\n </button>\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"Edit\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"editNumberDialog(control, controlIndex)\">\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"Delete\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"deleteNumberDialog(control, controlIndex)\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n </div> \r\n </div>\r\n </ng-template>\r\n</ng-container>" }]
}], ctorParameters: () => [{ type: i2.MatDialog }], propDecorators: { control: [{
type: Input
}], formControls: [{
type: Input
}], controlIndex: [{
type: Input
}], isPreviewTemplate: [{
type: Input
}], numberUpdateEvent: [{
type: Output
}], numberDeleteEvent: [{
type: Output
}], aswModelChange: [{
type: Output
}], duplicateControl: [{
type: Output
}], input: [{
type: ViewChild,
args: ['input']
}] } });
/**
* @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 AswNumberModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AswNumberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: AswNumberModule, declarations: [AswNumber,
AswNumberDialog,
AswNumberDirective], imports: [CommonModule,
FormsModule,
ReactiveFormsModule,
MatInputModule,
MatSelectModule,
MatDialogModule,
MatSlideToggleModule,
MatTooltipModule,
MatDividerModule,
MatIconModule,
AswConfirmDialogModule,
MatButtonModule,
MatFormFieldModule], exports: [AswNumber,
AswNumberDialog,
AswNumberDirective] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AswNumberModule, imports: [CommonModule,
FormsModule,
ReactiveFormsModule,
MatInputModule,
MatSelectModule,
MatDialogModule,
MatSlideToggleModule,
MatTooltipModule,
MatDividerModule,
MatIconModule,
AswConfirmDialogModule,
MatButtonModule,
MatFormFieldModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AswNumberModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
MatInputModule,
MatSelectModule,
MatDialogModule,
MatSlideToggleModule,
MatTooltipModule,
MatDividerModule,
MatIconModule,
AswConfirmDialogModule,
MatButtonModule,
MatFormFieldModule
],
declarations: [
AswNumber,
AswNumberDialog,
AswNumberDirective
],
exports: [
AswNumber,
AswNumberDialog,
AswNumberDirective
]
}]
}] });
/**
* @license
* Copyright ASW (A Software World) All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file
*/
/**
* Generated bundle index. Do not edit.
*/
export { AswNumber, AswNumberDialog, AswNumberDirective, AswNumberModule };
//# sourceMappingURL=asoftwareworld-form-builder-form-control-number.mjs.map