@bnsights/bbsf-controls 1.0.163 → 1.0.165
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -1
- package/esm2022/lib/Shared/Models/MapAutoCompleteOptions.mjs +3 -1
- package/esm2022/lib/controls/MapAutoComplete/MapAutoComplete.component.mjs +39 -30
- package/fesm2022/bnsights-bbsf-controls.mjs +40 -29
- package/fesm2022/bnsights-bbsf-controls.mjs.map +1 -1
- package/lib/Shared/Models/MapAutoCompleteOptions.d.ts +4 -1
- package/lib/controls/MapAutoComplete/MapAutoComplete.component.d.ts +2 -3
- package/package.json +1 -1
|
@@ -3359,7 +3359,8 @@ class MapAutoCompleteComponent {
|
|
|
3359
3359
|
}
|
|
3360
3360
|
}
|
|
3361
3361
|
var elementHTML = document.getElementById(this.options.name);
|
|
3362
|
-
elementHTML
|
|
3362
|
+
if (elementHTML)
|
|
3363
|
+
elementHTML.value = this.mapAutoCompleteModel.text;
|
|
3363
3364
|
}
|
|
3364
3365
|
showGlobalError() {
|
|
3365
3366
|
this.controlUtility.showGlobalError();
|
|
@@ -3457,6 +3458,8 @@ class MapAutoCompleteComponent {
|
|
|
3457
3458
|
}
|
|
3458
3459
|
}
|
|
3459
3460
|
async getPlaceAutocomplete() {
|
|
3461
|
+
if (this.options.disableNoneAdvancedMapAutoComplete)
|
|
3462
|
+
return;
|
|
3460
3463
|
const { Autocomplete } = await google.maps.importLibrary("places");
|
|
3461
3464
|
const autocomplete = new Autocomplete(this.searchElementRef.nativeElement, {
|
|
3462
3465
|
types: [MapSearchTypes.Address]
|
|
@@ -3521,11 +3524,16 @@ class MapAutoCompleteComponent {
|
|
|
3521
3524
|
async isLocationWithinCity(cityName) {
|
|
3522
3525
|
if (cityName === "Umm Al Quwain")
|
|
3523
3526
|
cityName = "Emirate of Umm Al Quwain";
|
|
3524
|
-
|
|
3525
|
-
|
|
3527
|
+
let latLng = new google.maps.LatLng(this.mapAutoCompleteModel.latitude, this.mapAutoCompleteModel.longitude);
|
|
3528
|
+
if (this.selectedPin) {
|
|
3529
|
+
let location = this.selectedPin.geoLocation;
|
|
3530
|
+
latLng = new google.maps.LatLng(location.lat, location.lng);
|
|
3531
|
+
}
|
|
3532
|
+
else
|
|
3533
|
+
this.onMapClick({ latLng: latLng });
|
|
3526
3534
|
const geocoder = new google.maps.Geocoder();
|
|
3527
3535
|
return new Promise((resolve) => {
|
|
3528
|
-
geocoder.geocode({ location:
|
|
3536
|
+
geocoder.geocode({ location: latLng }, (results, status) => {
|
|
3529
3537
|
if (status === google.maps.GeocoderStatus.OK && results.length > 0) {
|
|
3530
3538
|
const emirateComponent = results[0].address_components.find(component => component.types.includes('administrative_area_level_1'));
|
|
3531
3539
|
if (emirateComponent && emirateComponent.long_name.toLowerCase() === cityName.toLowerCase())
|
|
@@ -3538,48 +3546,50 @@ class MapAutoCompleteComponent {
|
|
|
3538
3546
|
});
|
|
3539
3547
|
});
|
|
3540
3548
|
}
|
|
3541
|
-
async setGeocoder(address, zoom = MapZoomLevel.City) {
|
|
3549
|
+
async setGeocoder(address, administrativeArea, country, zoom = MapZoomLevel.City) {
|
|
3542
3550
|
return new Promise((resolve) => {
|
|
3543
3551
|
const geocoder = new google.maps.Geocoder();
|
|
3544
|
-
|
|
3552
|
+
const geocodeRequest = { address: address };
|
|
3553
|
+
if (administrativeArea && country) {
|
|
3554
|
+
geocodeRequest.componentRestrictions = {
|
|
3555
|
+
country: country,
|
|
3556
|
+
administrativeArea: administrativeArea
|
|
3557
|
+
};
|
|
3558
|
+
}
|
|
3559
|
+
geocoder.geocode(geocodeRequest, (results, status) => {
|
|
3545
3560
|
if (status === google.maps.GeocoderStatus.OK && results.length > 0) {
|
|
3546
|
-
|
|
3547
|
-
const location = actualLocation.geometry.location.toJSON();
|
|
3548
|
-
// Set the map center and marker position
|
|
3561
|
+
const location = results[0].geometry.location.toJSON();
|
|
3549
3562
|
this.mapCenter = location;
|
|
3550
3563
|
this.markerPosition = location;
|
|
3551
3564
|
this.mapAutoCompleteModel.latitude = location.lat;
|
|
3552
3565
|
this.mapAutoCompleteModel.longitude = location.lng;
|
|
3553
|
-
this.mapAutoCompleteModel.text =
|
|
3554
|
-
this.
|
|
3555
|
-
console.log(this.group);
|
|
3566
|
+
this.mapAutoCompleteModel.text = results[0].formatted_address;
|
|
3567
|
+
this.options.value = { ...this.mapAutoCompleteModel };
|
|
3556
3568
|
this.group.controls[this.options.name].setValue(this.mapAutoCompleteModel);
|
|
3557
|
-
|
|
3558
|
-
const point = {
|
|
3559
|
-
lat: location.lat,
|
|
3560
|
-
lng: location.lng,
|
|
3561
|
-
};
|
|
3562
|
-
this.markerPosition = point;
|
|
3563
|
-
// Set the map zoom level
|
|
3569
|
+
this.mapAutoCompleteFormControl.setValue(this.options.value);
|
|
3564
3570
|
this.zoomLevel = zoom;
|
|
3565
3571
|
resolve(true);
|
|
3566
3572
|
}
|
|
3567
|
-
else
|
|
3573
|
+
else
|
|
3568
3574
|
resolve(false);
|
|
3569
|
-
}
|
|
3570
3575
|
});
|
|
3571
3576
|
});
|
|
3572
3577
|
}
|
|
3573
3578
|
setAddress() {
|
|
3574
3579
|
setTimeout(async () => {
|
|
3575
3580
|
if (this.options.address) {
|
|
3576
|
-
let addressFound = await this.setGeocoder.call(this, this.options.address, MapZoomLevel.Building);
|
|
3581
|
+
let addressFound = await this.setGeocoder.call(this, this.options.address, this.options.city, this.options.country, MapZoomLevel.Building);
|
|
3577
3582
|
if (!addressFound && this.options.enableFallbackAddress) {
|
|
3578
|
-
let fallbackAddressFound = await this.setGeocoder.call(this, this.options.city);
|
|
3583
|
+
let fallbackAddressFound = await this.setGeocoder.call(this, this.options.city, this.options.city, this.options.country);
|
|
3579
3584
|
if (!fallbackAddressFound)
|
|
3580
3585
|
this.mapAutoCompleteModel = new MapAutocompleteDTO();
|
|
3581
3586
|
}
|
|
3582
3587
|
}
|
|
3588
|
+
if (this.options.validateLocationWithinCity) {
|
|
3589
|
+
const isLocationWithinCity = await this.isLocationWithinCity(this.options.city);
|
|
3590
|
+
if (!isLocationWithinCity)
|
|
3591
|
+
this.options.isLocationValid = !(this.invalidLocationWithinCity = true);
|
|
3592
|
+
}
|
|
3583
3593
|
}, 500);
|
|
3584
3594
|
}
|
|
3585
3595
|
//#endregion
|
|
@@ -3714,19 +3724,21 @@ class MapAutoCompleteComponent {
|
|
|
3714
3724
|
});
|
|
3715
3725
|
}
|
|
3716
3726
|
async submitSetLocation() {
|
|
3717
|
-
this.invalidLocationWithinCity = false;
|
|
3727
|
+
this.options.isLocationValid = !(this.invalidLocationWithinCity = false);
|
|
3718
3728
|
if (this.options.validateLocationWithinCity && this.options.city) {
|
|
3719
3729
|
const isLocationWithinCity = await this.isLocationWithinCity(this.options.city);
|
|
3720
3730
|
if (!isLocationWithinCity) {
|
|
3721
|
-
this.invalidLocationWithinCity = true;
|
|
3731
|
+
this.options.isLocationValid = !(this.invalidLocationWithinCity = true);
|
|
3722
3732
|
return;
|
|
3723
3733
|
}
|
|
3724
3734
|
}
|
|
3735
|
+
if (!this.selectedPin)
|
|
3736
|
+
return;
|
|
3725
3737
|
this.GermanAddressMapped(this.selectedPin);
|
|
3726
3738
|
this.closeMapModal();
|
|
3727
3739
|
}
|
|
3728
3740
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MapAutoCompleteComponent, deps: [{ token: i0.NgZone }, { token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.BBSFTranslateService }, { token: i3.ControlValidationService }, { token: GlobalSettings }, { token: i5$2.ScriptService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3729
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MapAutoCompleteComponent, selector: "BBSF-MapAutoComplete", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, viewQueries: [{ propertyName: "searchElementRef", first: true, predicate: ["mapSearch"], descendants: true }, { propertyName: "advancedMapModal", first: true, predicate: ["advancedMapModal"], descendants: true }
|
|
3741
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MapAutoCompleteComponent, selector: "BBSF-MapAutoComplete", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, viewQueries: [{ propertyName: "searchElementRef", first: true, predicate: ["mapSearch"], descendants: true }, { propertyName: "advancedMapModal", first: true, predicate: ["advancedMapModal"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"showMap\">\r\n <div class=\"form-group bbsf-control bbsf-maps\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{options.labelExtraClasses}}\">\r\n {{options.labelValue}}\r\n <span *ngIf=\"((options.showAsterisk&&options.isRequired)||(options.isRequired))&&!options.isReadonly\"\r\n class=\"text-danger\">*</span>\r\n </label>\r\n\r\n <!--#region input-->\r\n <div class=\"input-group bbsf-input-container\" *ngIf=\"!options.isReadonly\">\r\n <input class=\"form-control input-icon-o {{options.extraClasses}}\" [value]=\"mapAutoCompleteModel.text\"\r\n [address]=\"mapAutoCompleteModel.text\" value=\"{{mapAutoCompleteModel.text}}\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n [class.is-invalid]=\"mapAutoCompleteFormControl.invalid && mapAutoCompleteFormControl.touched\"\r\n [placeholder]=\"options.placeholder\" [id]=\"options.name\" (keyup)=\"GermanAddressMapped($event)\" #mapSearch />\r\n <button *ngIf=\"options.showAdvancedMap\" class=\"border-0 btn-secondary btn-icon-o\"\r\n ngbTooltip=\"{{translateValue('SetLocation')}}\" type=\"button\" (click)=\"openMapModal()\">\r\n\r\n <span class=\"svg-icon svg-icon-1\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 22C16 18 20 14.4183 20 10C20 5.58172 16.4183 2 12 2C7.58172 2 4 5.58172 4 10C4 14.4183 8 18 12 22Z\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n </button>\r\n </div>\r\n <!-- #endregion -->\r\n\r\n <!-- #region readonly -->\r\n <div *ngIf=\"options.isReadonly\">\r\n <a href=\"{{mapAutoCompleteModel.googleMapsURL}}\" target=\"_blank\">{{mapAutoCompleteModel.text}}</a>\r\n </div>\r\n <!-- #endregion -->\r\n\r\n </div>\r\n\r\n <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(mapAutoCompleteFormControl.invalid && mapAutoCompleteFormControl.touched)\">\r\n {{getErrorValidation(mapAutoCompleteFormControl.errors|keyvalue)}}\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty)\">\r\n {{resetError()}} </div>\r\n\r\n </div>\r\n\r\n <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\" [ngClass]=\"{'bbsf-blur': modalIsOpen}\"\r\n [ngStyle]=\"{'display': modalIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n <div class=\"modal-dialog modal-lg\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h4 class=\"modal-title\">\r\n {{translateValue('SetLocationOnMap')}}\r\n </h4>\r\n <button type=\"button\" class=\"btn-close\" data-dismiss=\"modal\" (click)=\"closeMapModal()\"></button>\r\n </div>\r\n <div class=\"modal-body\">\r\n <input class=\"form-control mt-3 mb-3\" id=\"setLocationSearch\" #setLocationSearch type=\"text\"\r\n placeholder=\"{{translateValue('SetLocation')}}\">\r\n <div class=\"google-map-container\">\r\n <google-map [zoom]=\"zoomLevel\" [center]=\"mapCenter\" [width]=\"null\" [height]=\"null\" #googleMap (mapClick)=\"onMapClick($event)\">\r\n <map-marker [position]=\"markerPosition\" [options]=\"markerOptions\"></map-marker>\r\n </google-map>\r\n </div>\r\n <div class=\"text-danger\" *ngIf=\"(options.validateLocationWithinCity && options.city && invalidLocationWithinCity)\">\r\n {{translateValue('InvalidLocationWithinCity').replace('{0}', options.city)}}\r\n </div>\r\n </div>\r\n <div class=\"modal-footer\">\r\n <button type=\"button\" class=\"btn btn-sm btn-light\" (click)=\"closeMapModal()\">\r\n {{translateValue(\"Cancel\")}}\r\n </button>\r\n <button type=\"button\" class=\"btn btn-sm btn-brand\" (click)=\"submitSetLocation()\">\r\n {{translateValue('Confirm')}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</ng-container>", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i8$2.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i8$2.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged"], exportAs: ["mapMarker"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3730
3742
|
}
|
|
3731
3743
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MapAutoCompleteComponent, decorators: [{
|
|
3732
3744
|
type: Component,
|
|
@@ -3745,9 +3757,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3745
3757
|
}], advancedMapModal: [{
|
|
3746
3758
|
type: ViewChild,
|
|
3747
3759
|
args: ["advancedMapModal", { static: false }]
|
|
3748
|
-
}], setLocationSearch: [{
|
|
3749
|
-
type: ViewChild,
|
|
3750
|
-
args: ["setLocationSearch", { static: false }]
|
|
3751
3760
|
}] } });
|
|
3752
3761
|
|
|
3753
3762
|
// import { Expose, Type } from 'class-transformer';
|
|
@@ -7048,6 +7057,8 @@ class MapAutoCompleteOptions extends ControlOptionsBase {
|
|
|
7048
7057
|
this.showAdvancedMap = false;
|
|
7049
7058
|
this.validateLocationWithinCity = false;
|
|
7050
7059
|
this.enableFallbackAddress = false;
|
|
7060
|
+
this.isLocationValid = true;
|
|
7061
|
+
this.disableNoneAdvancedMapAutoComplete = false;
|
|
7051
7062
|
}
|
|
7052
7063
|
}
|
|
7053
7064
|
|