@bnsights/bbsf-controls 1.0.163 → 1.0.164
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 +2 -1
- package/esm2022/lib/controls/MapAutoComplete/MapAutoComplete.component.mjs +37 -30
- package/fesm2022/bnsights-bbsf-controls.mjs +37 -29
- package/fesm2022/bnsights-bbsf-controls.mjs.map +1 -1
- package/lib/Shared/Models/MapAutoCompleteOptions.d.ts +3 -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();
|
|
@@ -3521,11 +3522,16 @@ class MapAutoCompleteComponent {
|
|
|
3521
3522
|
async isLocationWithinCity(cityName) {
|
|
3522
3523
|
if (cityName === "Umm Al Quwain")
|
|
3523
3524
|
cityName = "Emirate of Umm Al Quwain";
|
|
3524
|
-
|
|
3525
|
-
|
|
3525
|
+
let latLng = new google.maps.LatLng(this.mapAutoCompleteModel.latitude, this.mapAutoCompleteModel.longitude);
|
|
3526
|
+
if (this.selectedPin) {
|
|
3527
|
+
let location = this.selectedPin.geoLocation;
|
|
3528
|
+
latLng = new google.maps.LatLng(location.lat, location.lng);
|
|
3529
|
+
}
|
|
3530
|
+
else
|
|
3531
|
+
this.onMapClick({ latLng: latLng });
|
|
3526
3532
|
const geocoder = new google.maps.Geocoder();
|
|
3527
3533
|
return new Promise((resolve) => {
|
|
3528
|
-
geocoder.geocode({ location:
|
|
3534
|
+
geocoder.geocode({ location: latLng }, (results, status) => {
|
|
3529
3535
|
if (status === google.maps.GeocoderStatus.OK && results.length > 0) {
|
|
3530
3536
|
const emirateComponent = results[0].address_components.find(component => component.types.includes('administrative_area_level_1'));
|
|
3531
3537
|
if (emirateComponent && emirateComponent.long_name.toLowerCase() === cityName.toLowerCase())
|
|
@@ -3538,48 +3544,50 @@ class MapAutoCompleteComponent {
|
|
|
3538
3544
|
});
|
|
3539
3545
|
});
|
|
3540
3546
|
}
|
|
3541
|
-
async setGeocoder(address, zoom = MapZoomLevel.City) {
|
|
3547
|
+
async setGeocoder(address, administrativeArea, country, zoom = MapZoomLevel.City) {
|
|
3542
3548
|
return new Promise((resolve) => {
|
|
3543
3549
|
const geocoder = new google.maps.Geocoder();
|
|
3544
|
-
|
|
3550
|
+
const geocodeRequest = { address: address };
|
|
3551
|
+
if (administrativeArea && country) {
|
|
3552
|
+
geocodeRequest.componentRestrictions = {
|
|
3553
|
+
country: country,
|
|
3554
|
+
administrativeArea: administrativeArea
|
|
3555
|
+
};
|
|
3556
|
+
}
|
|
3557
|
+
geocoder.geocode(geocodeRequest, (results, status) => {
|
|
3545
3558
|
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
|
|
3559
|
+
const location = results[0].geometry.location.toJSON();
|
|
3549
3560
|
this.mapCenter = location;
|
|
3550
3561
|
this.markerPosition = location;
|
|
3551
3562
|
this.mapAutoCompleteModel.latitude = location.lat;
|
|
3552
3563
|
this.mapAutoCompleteModel.longitude = location.lng;
|
|
3553
|
-
this.mapAutoCompleteModel.text =
|
|
3554
|
-
this.
|
|
3555
|
-
console.log(this.group);
|
|
3564
|
+
this.mapAutoCompleteModel.text = results[0].formatted_address;
|
|
3565
|
+
this.options.value = { ...this.mapAutoCompleteModel };
|
|
3556
3566
|
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
|
|
3567
|
+
this.mapAutoCompleteFormControl.setValue(this.options.value);
|
|
3564
3568
|
this.zoomLevel = zoom;
|
|
3565
3569
|
resolve(true);
|
|
3566
3570
|
}
|
|
3567
|
-
else
|
|
3571
|
+
else
|
|
3568
3572
|
resolve(false);
|
|
3569
|
-
}
|
|
3570
3573
|
});
|
|
3571
3574
|
});
|
|
3572
3575
|
}
|
|
3573
3576
|
setAddress() {
|
|
3574
3577
|
setTimeout(async () => {
|
|
3575
3578
|
if (this.options.address) {
|
|
3576
|
-
let addressFound = await this.setGeocoder.call(this, this.options.address, MapZoomLevel.Building);
|
|
3579
|
+
let addressFound = await this.setGeocoder.call(this, this.options.address, this.options.city, this.options.country, MapZoomLevel.Building);
|
|
3577
3580
|
if (!addressFound && this.options.enableFallbackAddress) {
|
|
3578
|
-
let fallbackAddressFound = await this.setGeocoder.call(this, this.options.city);
|
|
3581
|
+
let fallbackAddressFound = await this.setGeocoder.call(this, this.options.city, this.options.city, this.options.country);
|
|
3579
3582
|
if (!fallbackAddressFound)
|
|
3580
3583
|
this.mapAutoCompleteModel = new MapAutocompleteDTO();
|
|
3581
3584
|
}
|
|
3582
3585
|
}
|
|
3586
|
+
if (this.options.validateLocationWithinCity) {
|
|
3587
|
+
const isLocationWithinCity = await this.isLocationWithinCity(this.options.city);
|
|
3588
|
+
if (!isLocationWithinCity)
|
|
3589
|
+
this.options.isLocationValid = !(this.invalidLocationWithinCity = true);
|
|
3590
|
+
}
|
|
3583
3591
|
}, 500);
|
|
3584
3592
|
}
|
|
3585
3593
|
//#endregion
|
|
@@ -3714,19 +3722,21 @@ class MapAutoCompleteComponent {
|
|
|
3714
3722
|
});
|
|
3715
3723
|
}
|
|
3716
3724
|
async submitSetLocation() {
|
|
3717
|
-
this.invalidLocationWithinCity = false;
|
|
3725
|
+
this.options.isLocationValid = !(this.invalidLocationWithinCity = false);
|
|
3718
3726
|
if (this.options.validateLocationWithinCity && this.options.city) {
|
|
3719
3727
|
const isLocationWithinCity = await this.isLocationWithinCity(this.options.city);
|
|
3720
3728
|
if (!isLocationWithinCity) {
|
|
3721
|
-
this.invalidLocationWithinCity = true;
|
|
3729
|
+
this.options.isLocationValid = !(this.invalidLocationWithinCity = true);
|
|
3722
3730
|
return;
|
|
3723
3731
|
}
|
|
3724
3732
|
}
|
|
3733
|
+
if (!this.selectedPin)
|
|
3734
|
+
return;
|
|
3725
3735
|
this.GermanAddressMapped(this.selectedPin);
|
|
3726
3736
|
this.closeMapModal();
|
|
3727
3737
|
}
|
|
3728
3738
|
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 }
|
|
3739
|
+
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
3740
|
}
|
|
3731
3741
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MapAutoCompleteComponent, decorators: [{
|
|
3732
3742
|
type: Component,
|
|
@@ -3745,9 +3755,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3745
3755
|
}], advancedMapModal: [{
|
|
3746
3756
|
type: ViewChild,
|
|
3747
3757
|
args: ["advancedMapModal", { static: false }]
|
|
3748
|
-
}], setLocationSearch: [{
|
|
3749
|
-
type: ViewChild,
|
|
3750
|
-
args: ["setLocationSearch", { static: false }]
|
|
3751
3758
|
}] } });
|
|
3752
3759
|
|
|
3753
3760
|
// import { Expose, Type } from 'class-transformer';
|
|
@@ -7048,6 +7055,7 @@ class MapAutoCompleteOptions extends ControlOptionsBase {
|
|
|
7048
7055
|
this.showAdvancedMap = false;
|
|
7049
7056
|
this.validateLocationWithinCity = false;
|
|
7050
7057
|
this.enableFallbackAddress = false;
|
|
7058
|
+
this.isLocationValid = true;
|
|
7051
7059
|
}
|
|
7052
7060
|
}
|
|
7053
7061
|
|