@bnsights/bbsf-controls 1.0.162 → 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 -15
- package/fesm2022/bnsights-bbsf-controls.mjs +37 -14
- 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 -2
- 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,10 +3544,17 @@ 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
3559
|
const location = results[0].geometry.location.toJSON();
|
|
3547
3560
|
this.mapCenter = location;
|
|
@@ -3549,25 +3562,32 @@ class MapAutoCompleteComponent {
|
|
|
3549
3562
|
this.mapAutoCompleteModel.latitude = location.lat;
|
|
3550
3563
|
this.mapAutoCompleteModel.longitude = location.lng;
|
|
3551
3564
|
this.mapAutoCompleteModel.text = results[0].formatted_address;
|
|
3565
|
+
this.options.value = { ...this.mapAutoCompleteModel };
|
|
3566
|
+
this.group.controls[this.options.name].setValue(this.mapAutoCompleteModel);
|
|
3567
|
+
this.mapAutoCompleteFormControl.setValue(this.options.value);
|
|
3552
3568
|
this.zoomLevel = zoom;
|
|
3553
3569
|
resolve(true);
|
|
3554
3570
|
}
|
|
3555
|
-
else
|
|
3571
|
+
else
|
|
3556
3572
|
resolve(false);
|
|
3557
|
-
}
|
|
3558
3573
|
});
|
|
3559
3574
|
});
|
|
3560
3575
|
}
|
|
3561
3576
|
setAddress() {
|
|
3562
3577
|
setTimeout(async () => {
|
|
3563
3578
|
if (this.options.address) {
|
|
3564
|
-
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);
|
|
3565
3580
|
if (!addressFound && this.options.enableFallbackAddress) {
|
|
3566
|
-
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);
|
|
3567
3582
|
if (!fallbackAddressFound)
|
|
3568
3583
|
this.mapAutoCompleteModel = new MapAutocompleteDTO();
|
|
3569
3584
|
}
|
|
3570
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
|
+
}
|
|
3571
3591
|
}, 500);
|
|
3572
3592
|
}
|
|
3573
3593
|
//#endregion
|
|
@@ -3702,23 +3722,25 @@ class MapAutoCompleteComponent {
|
|
|
3702
3722
|
});
|
|
3703
3723
|
}
|
|
3704
3724
|
async submitSetLocation() {
|
|
3705
|
-
this.invalidLocationWithinCity = false;
|
|
3725
|
+
this.options.isLocationValid = !(this.invalidLocationWithinCity = false);
|
|
3706
3726
|
if (this.options.validateLocationWithinCity && this.options.city) {
|
|
3707
3727
|
const isLocationWithinCity = await this.isLocationWithinCity(this.options.city);
|
|
3708
3728
|
if (!isLocationWithinCity) {
|
|
3709
|
-
this.invalidLocationWithinCity = true;
|
|
3729
|
+
this.options.isLocationValid = !(this.invalidLocationWithinCity = true);
|
|
3710
3730
|
return;
|
|
3711
3731
|
}
|
|
3712
3732
|
}
|
|
3733
|
+
if (!this.selectedPin)
|
|
3734
|
+
return;
|
|
3713
3735
|
this.GermanAddressMapped(this.selectedPin);
|
|
3714
3736
|
this.closeMapModal();
|
|
3715
3737
|
}
|
|
3716
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 }); }
|
|
3717
|
-
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\" 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 }); }
|
|
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 }); }
|
|
3718
3740
|
}
|
|
3719
3741
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MapAutoCompleteComponent, decorators: [{
|
|
3720
3742
|
type: Component,
|
|
3721
|
-
args: [{ selector: 'BBSF-MapAutoComplete', encapsulation: ViewEncapsulation.None, 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\" 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>" }]
|
|
3743
|
+
args: [{ selector: 'BBSF-MapAutoComplete', encapsulation: ViewEncapsulation.None, 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>" }]
|
|
3722
3744
|
}], ctorParameters: () => [{ type: i0.NgZone }, { type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
|
|
3723
3745
|
type: Optional
|
|
3724
3746
|
}] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.BBSFTranslateService }, { type: i3.ControlValidationService }, { type: GlobalSettings }, { type: i5$2.ScriptService }], propDecorators: { group: [{
|
|
@@ -7033,6 +7055,7 @@ class MapAutoCompleteOptions extends ControlOptionsBase {
|
|
|
7033
7055
|
this.showAdvancedMap = false;
|
|
7034
7056
|
this.validateLocationWithinCity = false;
|
|
7035
7057
|
this.enableFallbackAddress = false;
|
|
7058
|
+
this.isLocationValid = true;
|
|
7036
7059
|
}
|
|
7037
7060
|
}
|
|
7038
7061
|
|