@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
135 lines (134 loc) • 99.5 kB
JavaScript
import * as i0 from '@angular/core';
import { Inject, Component, EventEmitter, Output, Input, NgModule } from '@angular/core';
import { CSSFrameworkEnum } from '@asoftwareworld/form-builder-pro/api';
import * as i13 from '@asoftwareworld/form-builder-pro/common';
import { Constants, Icons, AswMomentDatetimeModule, MaterialModule, AswPipeModule, ASW_DATETIME_FORMATS } from '@asoftwareworld/form-builder-pro/common';
import { AswConfirmDialog, AswConfirmDialogModule } from '@asoftwareworld/form-builder-pro/form-control/confirm-dialog';
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 i2$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i4 from '@angular/material/core';
import * as i5 from '@angular/material/button';
import * as i6 from '@angular/material/datepicker';
import * as i7 from '@angular/material/input';
import * as i8 from '@angular/material/form-field';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
import * as i9 from '@angular/material/select';
import * as i10 from '@angular/material/slide-toggle';
import * as i11 from '@angular/material/tooltip';
import * as i12 from '@asoftwareworld/form-builder-pro/core';
import { AswTranslateModule } from '@asoftwareworld/form-builder-pro/core';
import * as i8$1 from '@asoftwareworld/form-builder-pro/datetimepicker';
import { AswDatetimepickerModule } from '@asoftwareworld/form-builder-pro/datetimepicker';
/**
* @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 AswDatepickerDialog {
formBuilder;
dialogRef;
data;
constants = Constants;
icons = Icons;
aswDatepickerForm;
status;
disabled;
isDisableWeekendDates = false;
control;
isMinMaxEnabled = true;
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.aswDatepickerForm = this.formBuilder.group({
id: ['', [Validators.required]],
customClass: [],
tooltip: [''],
minDate: [''],
maxDate: [''],
label: ['', [Validators.required, Validators.minLength(2)]],
value: [''],
type: ['date'],
mode: ['auto'],
defaultView: ['month'],
style: ['', [Validators.required]],
isRequired: [false],
isDisabled: [false],
isDisableWeekendDates: [false],
yearSelector: [true],
twelveHour: [false]
});
}
editProperty(control) {
if (control.type === 'time') {
this.isMinMaxEnabled = false;
}
this.aswDatepickerForm.setValue({
id: control.id,
customClass: control.customClass ?? '',
minDate: control.minDate ?? '',
maxDate: control.maxDate ?? '',
tooltip: control.tooltip,
label: control.label,
value: control.value ?? '',
style: control.style,
type: control.type,
mode: control.mode,
defaultView: control.defaultView,
isRequired: control.isRequired,
isDisabled: control.isDisabled,
isDisableWeekendDates: control.isDisableWeekendDates,
twelveHour: control.twelveHour,
yearSelector: control.yearSelector
});
}
onNoClick() {
this.dialogRef.close();
}
onSubmit() {
this.aswDatepickerForm.value.controlType = this.control.controlType;
this.aswDatepickerForm.value.guid = this.control.guid;
this.dialogRef.close(this.aswDatepickerForm.value);
}
onStatusChange(event) {
this.status = event.checked ? true : false;
}
onChange(event) {
this.disabled = event.checked ? true : false;
if (event.checked === undefined) {
this.status = event.target.checked ? true : false;
}
}
onChangeWeekendDateFilter(event) {
this.isDisableWeekendDates = event.checked ? true : false;
if (event.checked === undefined) {
this.status = event.target.checked ? true : false;
}
}
onTypeChange(event) {
if (event.value) {
this.isMinMaxEnabled = event.value === 'time' ? false : true;
}
else {
this.isMinMaxEnabled = event.target.value === 'time' ? false : true;
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswDatepickerDialog, 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: AswDatepickerDialog, selector: "asw-datepicker-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]=\"aswDatepickerForm\" (ngSubmit)=\"onSubmit()\">\r\n <mat-dialog-content class=\"mat-typography\">\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=\"!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=\"aswDatepickerForm.get('id')?.hasError(validation.type) && (aswDatepickerForm.get('id')?.dirty || aswDatepickerForm.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 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=\"aswDatepickerForm.get('label')?.hasError(validation.type) && (aswDatepickerForm.get('label')?.dirty || aswDatepickerForm.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.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 <ng-container *ngIf=\"!data.propertyPersonalization.includes('customCSSClass')\">\r\n <div class=\"asw-col-md-12\">\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=\"asw-col-md-4\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.Type' | aswTranslate}}</mat-label>\r\n <mat-select formControlName=\"type\" \r\n matTooltip=\"{{'FormControl.SelectType' | aswTranslate}}\" \r\n (selectionChange)=\"onTypeChange($event)\">\r\n <mat-option value=\"date\">Date</mat-option>\r\n <mat-option value=\"time\">Time</mat-option>\r\n <mat-option value=\"datetime\">Datetime</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"asw-col-md-4\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.Mode' | aswTranslate}}</mat-label>\r\n <mat-select formControlName=\"mode\" matTooltip=\"{{'FormControl.SelectMode' | aswTranslate}}\">\r\n <mat-option value=\"auto\">Auto</mat-option>\r\n <mat-option value=\"portrait\">Portrait</mat-option>\r\n <mat-option value=\"landscape\">Landscape</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"asw-col-md-4\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.DefaultView' | aswTranslate}}</mat-label>\r\n <mat-select formControlName=\"defaultView\" matTooltip=\"{{'FormControl.SelectDefaultView' | aswTranslate}}\">\r\n <mat-option value=\"clock\">Clock</mat-option>\r\n <mat-option value=\"month\">Month</mat-option>\r\n <mat-option value=\"year\">Year</mat-option>\r\n <mat-option value=\"multi-year\">Multi Year</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <ng-container *ngIf=\"isMinMaxEnabled\">\r\n <div class=\"asw-col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.MinDate' | aswTranslate}}</mat-label>\r\n <input matInput name=\"minDate\" placeholder=\"{{'FormControl.MinDate' | aswTranslate}}\" \r\n matTooltip=\"{{'FormControl.MinDate' | aswTranslate}}\"\r\n formControlName=\"minDate\" [matDatepicker]=\"minDate\">\r\n <mat-datepicker-toggle matSuffix [for]=\"minDate\"></mat-datepicker-toggle>\r\n <mat-datepicker #minDate></mat-datepicker>\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.MaxDate' | aswTranslate}}</mat-label>\r\n <input matInput name=\"maxDate\" placeholder=\"{{'FormControl.MaxDate' | aswTranslate}}\" \r\n matTooltip=\"{{'FormControl.MaxDate' | aswTranslate}}\"\r\n formControlName=\"maxDate\" [matDatepicker]=\"maxDate\">\r\n <mat-datepicker-toggle matSuffix [for]=\"maxDate\"></mat-datepicker-toggle>\r\n <mat-datepicker #maxDate></mat-datepicker>\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.Value' | aswTranslate}}</mat-label>\r\n <input matInput name=\"value\" placeholder=\"{{'FormControl.Value' | aswTranslate}}\" \r\n matTooltip=\"{{'FormControl.Value' | aswTranslate}}\"\r\n formControlName=\"value\" [matDatepicker]=\"picker\">\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\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.Style' | aswTranslate}}</mat-label>\r\n <mat-select formControlName=\"style\" matTooltip=\"{{'FormControl.SelectStyle' | aswTranslate}}\">\r\n <mat-option value=\"fill\">Fill</mat-option>\r\n <mat-option value=\"outline\">Outline</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"asw-col-md-4\">\r\n <mat-slide-toggle color=\"primary\"\r\n #isActive\r\n formControlName=\"isRequired\"\r\n (change)=\"onStatusChange($event)\">\r\n {{(status ? 'FormControl.Required' : 'FormControl.NotRequired') | aswTranslate}}\r\n \r\n </mat-slide-toggle>\r\n </div>\r\n <div class=\"asw-col-md-4\">\r\n <mat-slide-toggle color=\"primary\"\r\n #isDisable\r\n formControlName=\"isDisabled\"\r\n (change)=\"onChange($event)\">\r\n {{(disabled ? 'FormControl.Disabled' : 'FormControl.Enabled') | aswTranslate}}\r\n </mat-slide-toggle>\r\n </div>\r\n <div class=\"asw-col-md-4\">\r\n <mat-slide-toggle color=\"primary\"\r\n #isDisableWeekendDates\r\n formControlName=\"isDisableWeekendDates\"\r\n (change)=\"onChangeWeekendDateFilter($event)\">\r\n {{(isDisableWeekendDates ? 'FormControl.DisabledWeekend' : 'FormControl.EnabledWeekend') | aswTranslate}}\r\n </mat-slide-toggle>\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 {{(aswDatepickerForm.get('id')?.invalid && (aswDatepickerForm.get('id')?.dirty || aswDatepickerForm.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]=\"(aswDatepickerForm.get('id')?.invalid && (aswDatepickerForm.get('id')?.dirty || aswDatepickerForm.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=\"aswDatepickerForm.get('id')?.hasError(validation.type) && (aswDatepickerForm.get('id')?.dirty || aswDatepickerForm.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 {{(aswDatepickerForm.get('label')?.invalid && (aswDatepickerForm.get('label')?.dirty || aswDatepickerForm.get('label')?.touched)) ? 'asw-red-color' : ''}}\">{{'FormControl.Label' | aswTranslate}}</label>\r\n <input type=\"text\"\r\n class=\"asw-input-control\"\r\n [class.asw-is-invalid]=\"(aswDatepickerForm.get('label')?.invalid && (aswDatepickerForm.get('label')?.dirty || aswDatepickerForm.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=\"aswDatepickerForm.get('label')?.hasError(validation.type) && (aswDatepickerForm.get('label')?.dirty || aswDatepickerForm.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.Tooltip' | aswTranslate}}</label>\r\n <input type=\"text\"\r\n class=\"asw-input-control\"\r\n matTooltip=\"{{'FormControl.Tooltip' | aswTranslate}}\"\r\n formControlName=\"tooltip\">\r\n </div>\r\n </div>\r\n <div class=\"asw-col-md-12\">\r\n <div class=\"asw-mb-3\">\r\n <label class=\"asw-input-label\">{{'FormControl.Value' | aswTranslate}}</label>\r\n <input matInput name=\"value\" class=\"asw-input-control\"\r\n matTooltip=\"{{'FormControl.Value' | aswTranslate}}\"\r\n formControlName=\"value\" [matDatepicker]=\"picker\">\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\" class=\"asw-date-picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </div>\r\n </div>\r\n <div class=\"asw-col-md-4\">\r\n <div class=\"asw-mb-3\">\r\n <label class=\"asw-input-label\">{{'FormControl.Type' | aswTranslate}}</label>\r\n <select formControlName=\"type\" class=\"asw-select\" matNativeControl\r\n matTooltip=\"{{'FormControl.SelectType' | aswTranslate}}\" \r\n (change)=\"onTypeChange($event)\">\r\n <option value=\"date\">Date</option>\r\n <option value=\"time\">Time</option>\r\n <option value=\"datetime\">Datetime</option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"asw-col-md-4\">\r\n <div class=\"asw-mb-3\">\r\n <label class=\"asw-input-label\">{{'FormControl.Mode' | aswTranslate}}</label>\r\n <select formControlName=\"mode\" class=\"asw-select\" matNativeControl matTooltip=\"{{'FormControl.SelectMode' | aswTranslate}}\">\r\n <option value=\"auto\">Auto</option>\r\n <option value=\"portrait\">Portrait</option>\r\n <option value=\"landscape\">Landscape</option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"asw-col-md-4\">\r\n <div class=\"asw-mb-3\">\r\n <label class=\"asw-input-label\">{{'FormControl.Type' | aswTranslate}}</label>\r\n <select formControlName=\"defaultView\" class=\"asw-select\" matNativeControl matTooltip=\"{{'FormControl.SelectDefaultView' | aswTranslate}}\">\r\n <option value=\"clock\">Clock</option>\r\n <option value=\"month\">Month</option>\r\n <option value=\"year\">Year</option>\r\n <option value=\"multi-year\">Multi Year</option>\r\n </select>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"isMinMaxEnabled\">\r\n <div class=\"asw-col-md-6\">\r\n <div class=\"asw-mb-3\">\r\n <label class=\"asw-input-label\">{{'FormControl.MinDate' | aswTranslate}}</label>\r\n <input name=\"minDate\" class=\"asw-input-control\"\r\n matTooltip=\"{{'FormControl.MinDate' | aswTranslate}}\"\r\n formControlName=\"minDate\" [matDatepicker]=\"minDate\">\r\n <mat-datepicker-toggle matSuffix [for]=\"minDate\" class=\"asw-date-picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #minDate></mat-datepicker>\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.MaxDate' | aswTranslate}}</label>\r\n <input name=\"maxDate\" class=\"asw-input-control\"\r\n matTooltip=\"{{'FormControl.MaxDate' | aswTranslate}}\"\r\n formControlName=\"maxDate\" [matDatepicker]=\"maxDate\">\r\n <mat-datepicker-toggle matSuffix [for]=\"maxDate\" class=\"asw-date-picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #maxDate></mat-datepicker>\r\n </div>\r\n </div>\r\n </ng-container> \r\n <ng-container *ngIf=\"!data.propertyPersonalization.includes('customCSSClass')\">\r\n <div class=\"asw-col-md-12\">\r\n <div class=\"asw-mb-3\">\r\n <label class=\"asw-input-label\">{{'FormControl.CustomCSSClass' | aswTranslate}}</label>\r\n <input type=\"text\"\r\n name=\"customClass\"\r\n class=\"asw-input-control\"\r\n matTooltip=\"{{'FormControl.CustomCSSClass' | aswTranslate}}\"\r\n formControlName=\"customClass\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"asw-col-md-4\">\r\n <div class=\"asw-mb-3\">\r\n <div class=\"asw-form-check asw-form-switch\">\r\n <input class=\"asw-form-check-input\" \r\n type=\"checkbox\" \r\n #isActive\r\n id=\"isActive\" \r\n formControlName=\"isRequired\"\r\n (change)=\"onStatusChange($event)\">\r\n <label class=\"asw-form-check-label\" for=\"isActive\">\r\n {{(status ? 'FormControl.Required' : 'FormControl.NotRequired') | aswTranslate}}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"asw-col-md-4\">\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=\"isDisable\" \r\n #isDisable\r\n formControlName=\"isDisabled\"\r\n (change)=\"onStatusChange($event)\">\r\n <label class=\"asw-form-check-label\" for=\"isDisable\">\r\n {{'FormControl.Readonly' | aswTranslate}}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"asw-col-md-4\">\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=\"isDisableWeekendDates\" \r\n #isDisableWeekendDates\r\n formControlName=\"isDisableWeekendDates\"\r\n (change)=\"onChangeWeekendDateFilter($event)\">\r\n <label class=\"asw-form-check-label\" for=\"isDisableWeekendDates\">\r\n {{(isDisableWeekendDates ? 'FormControl.DisabledWeekend' : 'FormControl.EnabledWeekend') | aswTranslate}}\r\n </label>\r\n </div>\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\" class=\"asw-button asw-button-danger asw-mb-1 asw-me-2\" (click)=\"onNoClick()\">\r\n {{'FormControl.No' | aswTranslate}}\r\n </button>\r\n <button type=\"submit\" class=\"asw-button asw-button-primary asw-mb-1\" cdkFocusInitial>\r\n {{'FormControl.Yes' | aswTranslate}}\r\n </button>\r\n </mat-dialog-actions>\r\n</form>", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { 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: i7.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: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i9.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: 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: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i12.AswTranslatePipe, name: "aswTranslate" }, { kind: "pipe", type: i13.AswSafeHtmlPipe, name: "aswSafeHtml" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswDatepickerDialog, decorators: [{
type: Component,
args: [{ selector: 'asw-datepicker-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]=\"aswDatepickerForm\" (ngSubmit)=\"onSubmit()\">\r\n <mat-dialog-content class=\"mat-typography\">\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=\"!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=\"aswDatepickerForm.get('id')?.hasError(validation.type) && (aswDatepickerForm.get('id')?.dirty || aswDatepickerForm.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 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=\"aswDatepickerForm.get('label')?.hasError(validation.type) && (aswDatepickerForm.get('label')?.dirty || aswDatepickerForm.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.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 <ng-container *ngIf=\"!data.propertyPersonalization.includes('customCSSClass')\">\r\n <div class=\"asw-col-md-12\">\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=\"asw-col-md-4\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.Type' | aswTranslate}}</mat-label>\r\n <mat-select formControlName=\"type\" \r\n matTooltip=\"{{'FormControl.SelectType' | aswTranslate}}\" \r\n (selectionChange)=\"onTypeChange($event)\">\r\n <mat-option value=\"date\">Date</mat-option>\r\n <mat-option value=\"time\">Time</mat-option>\r\n <mat-option value=\"datetime\">Datetime</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"asw-col-md-4\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.Mode' | aswTranslate}}</mat-label>\r\n <mat-select formControlName=\"mode\" matTooltip=\"{{'FormControl.SelectMode' | aswTranslate}}\">\r\n <mat-option value=\"auto\">Auto</mat-option>\r\n <mat-option value=\"portrait\">Portrait</mat-option>\r\n <mat-option value=\"landscape\">Landscape</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"asw-col-md-4\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.DefaultView' | aswTranslate}}</mat-label>\r\n <mat-select formControlName=\"defaultView\" matTooltip=\"{{'FormControl.SelectDefaultView' | aswTranslate}}\">\r\n <mat-option value=\"clock\">Clock</mat-option>\r\n <mat-option value=\"month\">Month</mat-option>\r\n <mat-option value=\"year\">Year</mat-option>\r\n <mat-option value=\"multi-year\">Multi Year</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <ng-container *ngIf=\"isMinMaxEnabled\">\r\n <div class=\"asw-col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.MinDate' | aswTranslate}}</mat-label>\r\n <input matInput name=\"minDate\" placeholder=\"{{'FormControl.MinDate' | aswTranslate}}\" \r\n matTooltip=\"{{'FormControl.MinDate' | aswTranslate}}\"\r\n formControlName=\"minDate\" [matDatepicker]=\"minDate\">\r\n <mat-datepicker-toggle matSuffix [for]=\"minDate\"></mat-datepicker-toggle>\r\n <mat-datepicker #minDate></mat-datepicker>\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.MaxDate' | aswTranslate}}</mat-label>\r\n <input matInput name=\"maxDate\" placeholder=\"{{'FormControl.MaxDate' | aswTranslate}}\" \r\n matTooltip=\"{{'FormControl.MaxDate' | aswTranslate}}\"\r\n formControlName=\"maxDate\" [matDatepicker]=\"maxDate\">\r\n <mat-datepicker-toggle matSuffix [for]=\"maxDate\"></mat-datepicker-toggle>\r\n <mat-datepicker #maxDate></mat-datepicker>\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.Value' | aswTranslate}}</mat-label>\r\n <input matInput name=\"value\" placeholder=\"{{'FormControl.Value' | aswTranslate}}\" \r\n matTooltip=\"{{'FormControl.Value' | aswTranslate}}\"\r\n formControlName=\"value\" [matDatepicker]=\"picker\">\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\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.Style' | aswTranslate}}</mat-label>\r\n <mat-select formControlName=\"style\" matTooltip=\"{{'FormControl.SelectStyle' | aswTranslate}}\">\r\n <mat-option value=\"fill\">Fill</mat-option>\r\n <mat-option value=\"outline\">Outline</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"asw-col-md-4\">\r\n <mat-slide-toggle color=\"primary\"\r\n #isActive\r\n formControlName=\"isRequired\"\r\n (change)=\"onStatusChange($event)\">\r\n {{(status ? 'FormControl.Required' : 'FormControl.NotRequired') | aswTranslate}}\r\n \r\n </mat-slide-toggle>\r\n </div>\r\n <div class=\"asw-col-md-4\">\r\n <mat-slide-toggle color=\"primary\"\r\n #isDisable\r\n formControlName=\"isDisabled\"\r\n (change)=\"onChange($event)\">\r\n {{(disabled ? 'FormControl.Disabled' : 'FormControl.Enabled') | aswTranslate}}\r\n </mat-slide-toggle>\r\n </div>\r\n <div class=\"asw-col-md-4\">\r\n <mat-slide-toggle color=\"primary\"\r\n #isDisableWeekendDates\r\n formControlName=\"isDisableWeekendDates\"\r\n (change)=\"onChangeWeekendDateFilter($event)\">\r\n {{(isDisableWeekendDates ? 'FormControl.DisabledWeekend' : 'FormControl.EnabledWeekend') | aswTranslate}}\r\n </mat-slide-toggle>\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 {{(aswDatepickerForm.get('id')?.invalid && (aswDatepickerForm.get('id')?.dirty || aswDatepickerForm.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]=\"(aswDatepickerForm.get('id')?.invalid && (aswDatepickerForm.get('id')?.dirty || aswDatepickerForm.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=\"aswDatepickerForm.get('id')?.hasError(validation.type) && (aswDatepickerForm.get('id')?.dirty || aswDatepickerForm.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 {{(aswDatepickerForm.get('label')?.invalid && (aswDatepickerForm.get('label')?.dirty || aswDatepickerForm.get('label')?.touched)) ? 'asw-red-color' : ''}}\">{{'FormControl.Label' | aswTranslate}}</label>\r\n <input type=\"text\"\r\n class=\"asw-input-control\"\r\n [class.asw-is-invalid]=\"(aswDatepickerForm.get('label')?.invalid && (aswDatepickerForm.get('label')?.dirty || aswDatepickerForm.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=\"aswDatepickerForm.get('label')?.hasError(validation.type) && (aswDatepickerForm.get('label')?.dirty || aswDatepickerForm.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.Tooltip' | aswTranslate}}</label>\r\n <input type=\"text\"\r\n class=\"asw-input-control\"\r\n matTooltip=\"{{'FormControl.Tooltip' | aswTranslate}}\"\r\n formControlName=\"tooltip\">\r\n </div>\r\n </div>\r\n <div class=\"asw-col-md-12\">\r\n <div class=\"asw-mb-3\">\r\n <label class=\"asw-input-label\">{{'FormControl.Value' | aswTranslate}}</label>\r\n <input matInput name=\"value\" class=\"asw-input-control\"\r\n matTooltip=\"{{'FormControl.Value' | aswTranslate}}\"\r\n formControlName=\"value\" [matDatepicker]=\"picker\">\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\" class=\"asw-date-picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </div>\r\n </div>\r\n <div class=\"asw-col-md-4\">\r\n <div class=\"asw-mb-3\">\r\n