@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
437 lines (434 loc) • 54.6 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, Inject, EventEmitter, ViewChild, Input, Output, NgModule } from '@angular/core';
import { AswConfirmDialog, AswConfirmDialogModule } from '@asoftwareworld/form-builder/form-control/confirm-dialog';
import { Constants } from '@asoftwareworld/form-builder/form-control/core';
import * as i1 from '@angular/forms';
import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i3 from '@angular/material/dialog';
import { MAT_DIALOG_DATA, MatDialogModule } 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/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/input';
import { MatInputModule } from '@angular/material/input';
import * as i9 from '@angular/material/tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';
import * as i10 from '@angular/material/autocomplete';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import * as i11 from '@angular/material/slide-toggle';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import * as i8$1 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i9$1 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider';
/**
* @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.11", ngImport: i0, type: GoogleMapService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: GoogleMapService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", 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;
control;
constants = Constants;
aswEditGpsForm;
status;
disabled;
filteredAddress;
searchedAddress = [];
constructor(formBuilder, googleMapService, dialogRef, control) {
this.formBuilder = formBuilder;
this.googleMapService = googleMapService;
this.dialogRef = dialogRef;
this.control = control;
}
async ngOnInit() {
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]],
column: [''],
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,
column: control.column,
style: control.style,
isRequired: control.isRequired,
isDisabled: control.isDisabled ?? false
});
}
onNoClick() {
this.dialogRef.close();
}
onSubmit() {
if (this.aswEditGpsForm.invalid) {
return;
}
this.aswEditGpsForm.value.controlType = this.control.controlType;
this.dialogRef.close(this.aswEditGpsForm.value);
}
onStatusChange(event) {
this.status = event.checked ? true : false;
}
onChange(event) {
this.disabled = event.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.11", 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.11", type: AswGpsDialog, selector: "asw-gps-dialog", ngImport: i0, template: "<h4 mat-dialog-title>Edit Property</h4>\r\n<form [formGroup]=\"aswEditGpsForm\" (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=\"aswEditGpsForm.get('id')?.hasError(validation.type) && (aswEditGpsForm.get('id')?.dirty || aswEditGpsForm.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 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=\"aswEditGpsForm.get('label')?.hasError(validation.type) && (aswEditGpsForm.get('label')?.dirty || aswEditGpsForm.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 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>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 class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Textbox 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-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Latitude</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"latitude\"\r\n placeholder=\"Enter latitude\"\r\n matTooltip=\"Enter latitude\"\r\n formControlName=\"latitude\">\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>Longitude</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"longitude\"\r\n placeholder=\"Enter longitude\"\r\n matTooltip=\"Enter longitude\"\r\n formControlName=\"longitude\">\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>Search Location</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 class=\"asw-mat-error\" *ngFor=\"let validation of constants.accountValidationMessages.searchAddress\">\r\n <ng-container class=\"asw-mat-error\" *ngIf=\"aswEditGpsForm.get('value')?.errors?.searchAddress\">\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-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 mb-1 me-2\"\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: 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.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.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: 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: "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: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i10.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: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AswGpsDialog, decorators: [{
type: Component,
args: [{ selector: 'asw-gps-dialog', template: "<h4 mat-dialog-title>Edit Property</h4>\r\n<form [formGroup]=\"aswEditGpsForm\" (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=\"aswEditGpsForm.get('id')?.hasError(validation.type) && (aswEditGpsForm.get('id')?.dirty || aswEditGpsForm.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 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=\"aswEditGpsForm.get('label')?.hasError(validation.type) && (aswEditGpsForm.get('label')?.dirty || aswEditGpsForm.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 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>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 class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Textbox 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-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Latitude</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"latitude\"\r\n placeholder=\"Enter latitude\"\r\n matTooltip=\"Enter latitude\"\r\n formControlName=\"latitude\">\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>Longitude</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"longitude\"\r\n placeholder=\"Enter longitude\"\r\n matTooltip=\"Enter longitude\"\r\n formControlName=\"longitude\">\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>Search Location</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 class=\"asw-mat-error\" *ngFor=\"let validation of constants.accountValidationMessages.searchAddress\">\r\n <ng-container class=\"asw-mat-error\" *ngIf=\"aswEditGpsForm.get('value')?.errors?.searchAddress\">\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-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 mb-1 me-2\"\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: GoogleMapService }, { type: i3.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 AswGps {
dialog;
googleMapService;
searchedAddress = [];
filteredAddress;
constants = Constants;
gpsForm;
/**
* Button control
*/
control = null;
/**
* Button control index to help update or delete gps from drop area
*/
controlIndex;
isPreviewTemplate = false;
gpsUpdateEvent = new EventEmitter();
gpsDeleteEvent = new EventEmitter();
gpsAddressChange = new EventEmitter();
duplicateControl = new EventEmitter();
constructor(dialog, googleMapService) {
this.dialog = dialog;
this.googleMapService = googleMapService;
}
async ngOnInit() {
if (this.control?.latitude && this.control.longitude && !this.control.value) {
const searchedAddress = await this.googleMapService.getAddress(Number(this.control?.latitude), Number(this.control.longitude));
this.control.value = searchedAddress[0].label;
}
this.searchedAddress = await this.googleMapService.getNearestAddress();
this.filteredAddress = this.searchedAddress;
}
/**
* Delete gps control based on control index
* @param control gps control items
* @param controlIndex gps control index
*/
deleteGpsDialog(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.gpsDeleteEvent.emit(controlIndex);
}
});
}
editGpsDialog(control, controlIndex) {
const dialogRef = this.dialog.open(AswGpsDialog, {
disableClose: true,
width: '60%',
data: control
});
dialogRef.afterClosed().subscribe(result => {
if (result !== undefined) {
this.gpsUpdateEvent.emit({ control: result, index: controlIndex });
}
});
}
async onChange(address, control) {
const filteredAddress = this.searchedAddress.find(x => x.label === address);
if (filteredAddress) {
await this.selectedAddress(filteredAddress);
}
else {
await this.getAddressFromGoogleApi(address);
}
this.gpsAddressChange.emit(control);
}
async selectedAddress(filteredAddress) {
if (!filteredAddress?.latitude && !filteredAddress?.longitude) {
filteredAddress = await this.googleMapService.getDetails(filteredAddress);
}
if (this.control) {
this.control.latitude = filteredAddress.latitude;
this.control.longitude = filteredAddress.longitude;
this.control.value = filteredAddress.label;
}
}
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.gpsForm.control.setErrors({ searchAddress: true });
}
}
this.filteredAddress = this.searchedAddress;
}
else {
this.filteredAddress = this.searchedAddress;
}
}
duplicateGpsControl(control) {
this.duplicateControl.emit(control);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AswGps, deps: [{ token: i3.MatDialog }, { token: GoogleMapService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: AswGps, selector: "asw-gps", inputs: { control: "control", controlIndex: "controlIndex", isPreviewTemplate: "isPreviewTemplate" }, outputs: { gpsUpdateEvent: "gpsUpdateEvent", gpsDeleteEvent: "gpsDeleteEvent", gpsAddressChange: "gpsAddressChange", duplicateControl: "duplicateControl" }, viewQueries: [{ propertyName: "gpsForm", 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\r\n [id]=\"control.id\"\r\n [placeholder]=\"control.label\"\r\n [matAutocomplete]=\"auto\"\r\n [(ngModel)]=\"control.value\"\r\n #input=\"ngModel\"\r\n (ngModelChange)=\"onChange($event, control)\"\r\n [matTooltip]=\"control.tooltip\"\r\n [required]=\"control.isRequired\"\r\n [disabled]=\"control.isDisabled ? true : false\">\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 class=\"asw-mat-error\" *ngIf=\"input.invalid && (input.dirty || input.touched)\">\r\n <ng-container class=\"asw-mat-error\" *ngIf=\"input?.errors?.required\">\r\n {{control.label}} is required\r\n </ng-container>\r\n <ng-container class=\"asw-mat-error\" *ngIf=\"input?.errors?.searchAddress\">\r\n Sorry, {{control.value}} did not found.\r\n </ng-container>\r\n </mat-error>\r\n </mat-form-field>\r\n <div class=\"row\" *ngIf=\"isPreviewTemplate\">\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)=\"duplicateGpsControl(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)=\"editGpsDialog(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)=\"deleteGpsDialog(control, controlIndex)\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-container>", 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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i10.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: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AswGps, decorators: [{
type: Component,
args: [{ selector: 'asw-gps', 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\r\n [id]=\"control.id\"\r\n [placeholder]=\"control.label\"\r\n [matAutocomplete]=\"auto\"\r\n [(ngModel)]=\"control.value\"\r\n #input=\"ngModel\"\r\n (ngModelChange)=\"onChange($event, control)\"\r\n [matTooltip]=\"control.tooltip\"\r\n [required]=\"control.isRequired\"\r\n [disabled]=\"control.isDisabled ? true : false\">\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 class=\"asw-mat-error\" *ngIf=\"input.invalid && (input.dirty || input.touched)\">\r\n <ng-container class=\"asw-mat-error\" *ngIf=\"input?.errors?.required\">\r\n {{control.label}} is required\r\n </ng-container>\r\n <ng-container class=\"asw-mat-error\" *ngIf=\"input?.errors?.searchAddress\">\r\n Sorry, {{control.value}} did not found.\r\n </ng-container>\r\n </mat-error>\r\n </mat-form-field>\r\n <div class=\"row\" *ngIf=\"isPreviewTemplate\">\r\n <div class=\"col-md-12\">\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"Duplicate\" \r\n