@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
314 lines (312 loc) • 75.5 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Inject, Component, EventEmitter, Output, Input, ViewChild, NgModule } from '@angular/core';
import { CSSFrameworkEnum } from '@asoftwareworld/form-builder-pro/api';
import * as i14 from '@asoftwareworld/form-builder-pro/common';
import { Constants, Icons, MaterialModule, AswPipeModule } 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 i3 from '@angular/material/dialog';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { startWith, map } from 'rxjs/operators';
import * as i4 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i5 from '@angular/material/autocomplete';
import * as i6 from '@angular/material/core';
import * as i7 from '@angular/material/button';
import * as i8 from '@angular/material/input';
import * as i9 from '@angular/material/form-field';
import * as i10 from '@angular/material/select';
import * as i11 from '@angular/material/slide-toggle';
import * as i12 from '@angular/material/tooltip';
import * as i13 from '@asoftwareworld/form-builder-pro/core';
import { AswTranslateModule } from '@asoftwareworld/form-builder-pro/core';
/**
* @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 GoogleMapService {
autocompleteService;
geoCoder;
searchedAddress = [];
latitude;
longitude;
placesService;
setCurrentLocation() {
this.geoCoder = new google.maps.Geocoder();
this.latitude = 31.67431470650697;
this.longitude = 75.64344802329514;
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition((position) => {
this.latitude = position.coords.latitude ? position.coords.latitude : 31.67431470650697;
this.longitude = position.coords.longitude ? position.coords.longitude : 75.64344802329514;
this.getAddress(this.latitude, this.longitude);
});
}
}
getNearestAddress() {
this.placesService = new google.maps.places.PlacesService(document.createElement('div'));
this.setCurrentLocation();
const nearestAddress = [];
return new Promise((resolve, reject) => {
const userLocation = new google.maps.LatLng(this.latitude, this.longitude);
const request = {
location: userLocation,
radius: 1500,
types: ['establishment'],
rankby: 'distance'
};
this.placesService.nearbySearch(request, (options, status) => {
if (status === google.maps.places.PlacesServiceStatus.OK) {
options.map((element) => {
const address = {
id: element.place_id,
label: element.name + ', ' + element.vicinity,
alias: element.name,
addressName: element.vicinity,
latitude: element.geometry.location.lat(),
longitude: element.geometry.location.lng(),
icon: 'https://maps.gstatic.com/consumer/images/icons/2x/place_grey650.png'
};
nearestAddress.push(address);
});
this.searchedAddress = nearestAddress;
resolve(this.searchedAddress);
}
else {
reject(status);
}
});
}).then();
}
getQueryPredictions(query) {
this.autocompleteService = new google.maps.places.AutocompleteService();
const request = {
input: query
};
let resultAddress = [];
return new Promise((resolve, reject) => {
this.autocompleteService.getQueryPredictions(request, (options, status) => {
if (status === google.maps.places.PlacesServiceStatus.OK && options.length > 0) {
options.map((element) => {
const address = {
id: element.place_id,
label: element.structured_formatting.main_text + ', ' + element.structured_formatting.secondary_text,
alias: element.structured_formatting.main_text,
addressName: element.structured_formatting.secondary_text,
icon: 'https://maps.gstatic.com/consumer/images/icons/2x/place_grey650.png'
};
resultAddress.push(address);
});
this.searchedAddress = resultAddress;
resolve(this.searchedAddress);
}
else if (status === google.maps.places.PlacesServiceStatus.ZERO_RESULTS) {
resultAddress = [];
resolve(resultAddress);
}
});
}).then();
}
getAddress(latitude, longitude) {
this.geoCoder = new google.maps.Geocoder();
this.searchedAddress = [];
return new Promise((resolve, reject) => {
this.geoCoder.geocode({
location: {
lat: latitude,
lng: longitude
}
}, (results, status) => {
if (status === google.maps.GeocoderStatus.OK) {
const element = results[0];
const address = {
id: element.place_id,
label: element.formatted_address,
alias: element.formatted_address,
addressName: element.formatted_address,
icon: 'https://maps.gstatic.com/consumer/images/icons/2x/place_grey650.png',
latitude,
longitude
};
this.searchedAddress.push(address);
resolve(this.searchedAddress);
}
else {
reject(status);
}
});
}).then();
}
getDetails(data) {
let lat;
let lng;
return new Promise((resolve, reject) => {
this.placesService.getDetails({ placeId: data.id, fields: ['geometry', 'icon'] }, (details, status) => {
if (status === google.maps.places.PlacesServiceStatus.OK) {
lat = details.geometry.location.lat();
lng = details.geometry.location.lng();
const address = {
id: data.id,
label: data.label,
alias: data.alias,
addressName: data.addressName,
latitude: lat,
longitude: lng,
icon: data.icon
};
resolve(address);
}
else {
reject(status);
}
});
}).then();
}
isLetter(value) {
const letters = /[a-z A-Z]/g;
if (value && value.match(letters)) {
return false;
}
return true;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: GoogleMapService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: GoogleMapService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: GoogleMapService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
/**
* @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 AswGpsDialog {
formBuilder;
googleMapService;
dialogRef;
data;
constants = Constants;
icons = Icons;
aswEditGpsForm;
status;
disabled;
filteredAddress;
searchedAddress = [];
control;
constructor(formBuilder, googleMapService, dialogRef, data) {
this.formBuilder = formBuilder;
this.googleMapService = googleMapService;
this.dialogRef = dialogRef;
this.data = data;
}
async ngOnInit() {
this.control = this.data.control;
this.validateFormBuilder();
this.searchedAddress = await this.googleMapService.getNearestAddress();
this.editProperty(this.control);
this.aswEditGpsForm
.get('value')
?.valueChanges.pipe(startWith(''), map((address) => address))
.subscribe(async (address) => {
await this.searchAddressFromExitingData(address);
});
}
validateFormBuilder() {
this.aswEditGpsForm = this.formBuilder.group({
id: ['', [Validators.required]],
customClass: [],
tooltip: ['', []],
label: ['', [Validators.required, Validators.minLength(2)]],
latitude: ['', []],
longitude: ['', []],
value: ['', []],
style: ['', [Validators.required]],
isRequired: [false],
isDisabled: [false]
});
}
editProperty(control) {
this.aswEditGpsForm.setValue({
id: control.id,
customClass: control.customClass ?? '',
latitude: control.latitude,
longitude: control.longitude,
value: control.value ?? '',
tooltip: control.tooltip,
label: control.label,
style: control.style,
isRequired: control.isRequired,
isDisabled: control.isDisabled
});
}
onNoClick() {
this.dialogRef.close();
}
onSubmit() {
if (this.aswEditGpsForm.invalid) {
return;
}
this.aswEditGpsForm.value.controlType = this.control.controlType;
this.aswEditGpsForm.value.guid = this.control.guid;
this.dialogRef.close(this.aswEditGpsForm.value);
}
onStatusChange(event) {
this.status = event.checked ? true : false;
if (event.checked === undefined) {
this.status = event.target.checked ? true : false;
}
}
async searchAddressFromExitingData(address) {
const filteredAddress = this.searchedAddress.find((x) => x.label === address);
if (filteredAddress) {
await this.selectedAddress(filteredAddress);
}
else {
await this.getAddressFromGoogleApi(address);
}
}
async selectedAddress(filteredAddress) {
if (!filteredAddress?.latitude && !filteredAddress?.longitude) {
filteredAddress = await this.googleMapService.getDetails(filteredAddress);
}
this.aswEditGpsForm.patchValue({
latitude: filteredAddress.latitude,
longitude: filteredAddress.longitude
});
}
async getAddressFromGoogleApi(address) {
if (address) {
this.searchedAddress = await this.googleMapService.getQueryPredictions(address);
if (this.searchedAddress.length === 0) {
const isValidSearch = this.googleMapService.isLetter(address);
if (isValidSearch) {
const lat = address.split(',')[0].trim();
const lng = address.split(',')[1].trim();
this.searchedAddress = await this.googleMapService.getAddress(Number(lat), Number(lng));
}
else {
this.searchedAddress = [];
this.aswEditGpsForm.get('value')?.setErrors({ searchAddress: true });
}
}
this.filteredAddress = this.searchedAddress;
}
else {
this.filteredAddress = this.searchedAddress;
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswGpsDialog, deps: [{ token: i1.FormBuilder }, { token: GoogleMapService }, { token: i3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: AswGpsDialog, selector: "asw-gps-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]=\"aswEditGpsForm\" (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=\"aswEditGpsForm.get('id')?.hasError(validation.type) && (aswEditGpsForm.get('id')?.dirty || aswEditGpsForm.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=\"aswEditGpsForm.get('label')?.hasError(validation.type) && (aswEditGpsForm.get('label')?.dirty || aswEditGpsForm.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-12\">\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=\"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 class=\"asw-col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.Latitude' | aswTranslate}}</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"latitude\"\r\n placeholder=\"{{'FormControl.Latitude' | aswTranslate}}\"\r\n matTooltip=\"{{'FormControl.Latitude' | aswTranslate}}\"\r\n formControlName=\"latitude\">\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.Longitude' | aswTranslate}}</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"longitude\"\r\n placeholder=\"{{'FormControl.Longitude' | aswTranslate}}\"\r\n matTooltip=\"{{'FormControl.Longitude' | aswTranslate}}\"\r\n formControlName=\"longitude\">\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.SearchLocation' | aswTranslate}}</mat-label>\r\n <input matInput\r\n aria-label=\"location\"\r\n [matAutocomplete]=\"auto\"\r\n formControlName=\"value\">\r\n <mat-autocomplete #auto=\"matAutocomplete\">\r\n <mat-option *ngFor=\"let address of filteredAddress\" [value]=\"address.label\">\r\n <img class=\"example-option-img\" aria-hidden [src]=\"address.icon\" height=\"20\">\r\n <span>{{address.alias}}</span> \r\n <small> {{address.addressName}}</small>\r\n </mat-option>\r\n </mat-autocomplete>\r\n <mat-error *ngFor=\"let validation of constants.accountValidationMessages.searchAddress\">\r\n <ng-container *ngIf=\"aswEditGpsForm.get('value')?.errors?.searchAddress\">\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-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 </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 {{'FormControl.Readonly' | 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-6\">\r\n <div class=\"asw-mb-3\">\r\n <label class=\"asw-input-label asw-invalid-label {{(aswEditGpsForm.get('id')?.invalid && (aswEditGpsForm.get('id')?.dirty || aswEditGpsForm.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]=\"(aswEditGpsForm.get('id')?.invalid && (aswEditGpsForm.get('id')?.dirty || aswEditGpsForm.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=\"aswEditGpsForm.get('id')?.hasError(validation.type) && (aswEditGpsForm.get('id')?.dirty || aswEditGpsForm.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 {{(aswEditGpsForm.get('label')?.invalid && (aswEditGpsForm.get('label')?.dirty || aswEditGpsForm.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]=\"(aswEditGpsForm.get('label')?.invalid && (aswEditGpsForm.get('label')?.dirty || aswEditGpsForm.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=\"aswEditGpsForm.get('label')?.hasError(validation.type) && (aswEditGpsForm.get('label')?.dirty || aswEditGpsForm.get('label')?.touched)\">\r\n {{validation.message | aswTranslate}}\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"!data.propertyPersonalization.includes('customCSSClass')\">\r\n <div class=\"asw-col-md-6\">\r\n <div class=\"asw-mb-3\">\r\n <label class=\"asw-input-label\">{{'FormControl.CustomCSSClass' | aswTranslate}}</label>\r\n <input type=\"text\"\r\n name=\"customClass\"\r\n class=\"asw-input-control\"\r\n matTooltip=\"{{'FormControl.CustomCSSClass' | aswTranslate}}\"\r\n formControlName=\"customClass\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"asw-col-md-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-6\">\r\n <div class=\"asw-mb-3\">\r\n <label class=\"asw-input-label\">{{'FormControl.Latitude' | aswTranslate}}</label>\r\n <input type=\"text\"\r\n name=\"latitude\"\r\n class=\"asw-input-control\"\r\n matTooltip=\"{{'FormControl.Latitude' | aswTranslate}}\"\r\n formControlName=\"latitude\">\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.Longitude' | aswTranslate}}</label>\r\n <input type=\"text\"\r\n name=\"longitude\"\r\n class=\"asw-input-control\"\r\n matTooltip=\"{{'FormControl.Longitude' | aswTranslate}}\"\r\n formControlName=\"longitude\">\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.SearchLocation' | aswTranslate}}</label>\r\n <input class=\"asw-input-control\"\r\n aria-label=\"location\"\r\n [matAutocomplete]=\"auto\"\r\n formControlName=\"value\">\r\n <mat-autocomplete #auto=\"matAutocomplete\">\r\n <mat-option *ngFor=\"let address of filteredAddress\" [value]=\"address.label\">\r\n <img class=\"example-option-img\" aria-hidden [src]=\"address.icon\" height=\"20\">\r\n <span>{{address.alias}}</span> \r\n <small> {{address.addressName}}</small>\r\n </mat-option>\r\n </mat-autocomplete>\r\n <div *ngFor=\"let validation of constants.accountValidationMessages.searchAddress\">\r\n <ng-container *ngIf=\"aswEditGpsForm.get('value')?.errors?.searchAddress\">\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-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 </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\r\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.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: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i8.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: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i10.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: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i12.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i13.AswTranslatePipe, name: "aswTranslate" }, { kind: "pipe", type: i14.AswSafeHtmlPipe, name: "aswSafeHtml" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswGpsDialog, decorators: [{
type: Component,
args: [{ selector: 'asw-gps-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]=\"aswEditGpsForm\" (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=\"aswEditGpsForm.get('id')?.hasError(validation.type) && (aswEditGpsForm.get('id')?.dirty || aswEditGpsForm.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=\"aswEditGpsForm.get('label')?.hasError(validation.type) && (aswEditGpsForm.get('label')?.dirty || aswEditGpsForm.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-12\">\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=\"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 class=\"asw-col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.Latitude' | aswTranslate}}</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"latitude\"\r\n placeholder=\"{{'FormControl.Latitude' | aswTranslate}}\"\r\n matTooltip=\"{{'FormControl.Latitude' | aswTranslate}}\"\r\n formControlName=\"latitude\">\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.Longitude' | aswTranslate}}</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"longitude\"\r\n placeholder=\"{{'FormControl.Longitude' | aswTranslate}}\"\r\n matTooltip=\"{{'FormControl.Longitude' | aswTranslate}}\"\r\n formControlName=\"longitude\">\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.SearchLocation' | aswTranslate}}</mat-label>\r\n <input matInput\r\n aria-label=\"location\"\r\n [matAutocomplete]=\"auto\"\r\n formControlName=\"value\">\r\n <mat-autocomplete #auto=\"matAutocomplete\">\r\n <mat-option *ngFor=\"let address of filteredAddress\" [value]=\"address.label\">\r\n <img class=\"example-option-img\" aria-hidden [src]=\"address.icon\" height=\"20\">\r\n <span>{{address.alias}}</span> \r\n <small> {{address.addressName}}</small>\r\n </mat-option>\r\n </mat-autocomplete>\r\n <mat-error *ngFor=\"let validation of constants.accountValidationMessages.searchAddress\">\r\n <ng-container *ngIf=\"aswEditGpsForm.get('value')?.errors?.searchAddress\">\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-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 </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 {{'FormControl.Readonly' | 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-6\">\r\n <div class=\"asw-mb-3\">\r\n <label class=\"asw-input-label asw-invalid-label {{(aswEditGpsForm.get('id')?.invalid && (aswEditGpsForm.get('id')?.dirty || aswEditGpsForm.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]=\"(aswEditGpsForm.get('id')?.invalid && (aswEditGpsForm.get('id')?.dirty || aswEditGpsForm.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=\"aswEditGpsForm.get('id')?.hasError(validation.type) && (aswEditGpsForm.get('id')?.dirty || aswEditGpsForm.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 {{(aswEditGpsForm.get('label')?.invalid && (aswEditGpsForm.get('label')?.dirty || aswEditGpsForm.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]=\"(aswEditGpsForm.get('label')?.invalid && (aswEditGpsForm.get('label')?.dirty || aswEditGpsForm.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=\"aswEditGpsForm.get('label')?.hasError(validation.type) && (aswEditGpsForm.get('label')?.dirty || aswEditGpsForm.get('label')?.touched)\">\r\n {{validation.message | aswTranslate}}\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"!data.propertyPersonalization.includes('customCSSClass')\">\r\n <div class=\"asw-col-md-6\">\r\n <div class=\"asw-mb-3\">\r\n <label class=\"asw-input-label\">{{'FormControl.CustomCSSClass' | aswTranslate}}</label>\r\n <input type=\"text\"\r\n name=\"customClass\"\r\n class=\"asw-input-control\"\r\n matTooltip=\"{{'FormControl.CustomCSSClass' | aswTranslate}}\"\r\n formControlName=\"customClass\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"asw-col-md-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-6\">\r\n <div class=\"asw-mb-3\">\r\n <label class=\"asw-input-label\">{{'FormControl.Latitude' | aswTranslate}}</label>\r\n <input type=\"text\"\r\n name=\"latitude\"\r\n class=\"asw-input-control\"\r\n matTooltip=\"{{'FormControl.Latitude' | aswTranslate}}\"\r\n formControlName=\"latitude\">\r\n