@bpost/bp-address-auto-complete-by-component 1.1.15 → 1.1.17

package/fesm2020/bpost-bp-address-auto-complete-by-component.mjs

@@ -240,7 +240,7 @@ class HttpService {
         let headers = new HttpHeaders();
         // Attention !
         // Need to reassign as the 'set' is returning a clone of the headera object !!!
-        headers = headers.set('x-api-key', /*'bBkvimXYnAaEEKMyGqoWO2XiaZCQyqUi7VReYzPJ'*/ this.apiKey);
+        headers = headers.set('x-api-key', this.apiKey);
         return headers;
     }
     get(url, options) {
@@ -857,6 +857,7 @@ class LocalityComponent {
         this.clearInputEventEmitter = new EventEmitter();
         this.prefillEventEmitter = new EventEmitter();
         this.numberOfExceptionsEmitter = new EventEmitter();
+        this.searchText = '';
         this.validationMessageCode = null;
         this.validationMessageOptions = null;
         this.prefilling = false;
@@ -870,7 +871,7 @@ class LocalityComponent {
         });
     }
     ngOnInit() {
-        this.searchText = '';
+        this.searchText;
         // instance properties
         this.addressIsValidated = false;
         this.suggestionValidationMessage = '';
@@ -1315,8 +1316,8 @@ class LocalityComponent {
             }
             const suggestionLocality = this.transformMunicipalityInLowercaseAndWithoutDiacritics(sugAddress.localityName);
             const suggestionMunicipality = this.transformMunicipalityInLowercaseAndWithoutDiacritics(sugAddress.municipalityName);
-            if (suggestionLocality === this.prefillData.prefillMunicipalityName
-                || suggestionMunicipality === this.prefillData.prefillMunicipalityName) {
+            if (suggestionLocality.startsWith(this.prefillData.prefillMunicipalityName)
+                || suggestionMunicipality.startsWith(this.prefillData.prefillMunicipalityName)) {
                 if (this.prefillData.prefillMunicipalityAndLocalityPerfectMatchFound === true) {
                     if (this.showDebugMessageToConsole) {
                         console.log('LOCALITY - PREFILL - skipping suggestion:', suggestion);
@@ -1329,8 +1330,8 @@ class LocalityComponent {
                 this.prefillData.prefillMunicipalityPerfectMatchFound = true;
                 this.prefillData.prefillMunicipalityPerfectMatchSuggestion = suggestion;
                 this.searchText = sugAddress.postalCode + ' ' + sugAddress.localityName;
-                this.prefillData.prefillMunicipalityAndLocalityPerfectMatchFound = (suggestionLocality === this.prefillData.prefillMunicipalityName
-                    && suggestionMunicipality === this.prefillData.prefillMunicipalityName) ? true : false;
+                this.prefillData.prefillMunicipalityAndLocalityPerfectMatchFound = (suggestionLocality.startsWith(this.prefillData.prefillMunicipalityName)
+                    && suggestionMunicipality.startsWith(this.prefillData.prefillMunicipalityName)) ? true : false;
                 if (this.prefillData.prefillMunicipalityAndLocalityPerfectMatchFound === true) {
                     if (this.showDebugMessageToConsole) {
                         console.log('LOCALITY - PREFILL - Perfect match - Municipality & location:', suggestion);
@@ -1396,6 +1397,9 @@ class LocalityComponent {
         }
         if (emit) {
             this.clearInputEventEmitter.emit(/*'LOCALITY'*/ InputNameType.LOCALITY);
+            this.clearInputEventEmitter.emit(/*'STREET'*/ InputNameType.STREET);
+            this.clearInputEventEmitter.emit(/*'STREET_NUMBER'*/ InputNameType.STREET_NUMBER);
+            this.clearInputEventEmitter.emit(/*'BOX_NUMBER'*/ InputNameType.BOX_NUMBER);
         }
     }
     clearSearchText() {
@@ -1472,6 +1476,25 @@ class LocalityComponent {
             this.setSearchTextBasedOnArrowSelection(this.selectedIndex, this.selectedIndex + 1);
         }
     }
+    checkKeyUP(event) {
+        switch (event.which) {
+            case 8:
+                if (this.searchText.length > 0) {
+                    this.clearInputEventEmitter.emit('PARTIAL_CLEAR_LOCALITY');
+                }
+                else {
+                    this.clearInputEventEmitter.emit('LOCALITY');
+                    // this.clearInputEventEmitter.emit('STREET');
+                    // this.clearInputEventEmitter.emit('STREET_NUMBER');
+                    // this.clearInputEventEmitter.emit('BOX_NUMBER');
+                    //  this.clearInput(true);
+                }
+                break;
+            default:
+                this.clearTypeAhead();
+                break;
+        }
+    }
     checkKeyDown(event) {
         switch (event.which) {
             // down key, increment selectedIndex
@@ -1574,10 +1597,10 @@ class LocalityComponent {
     }
 }
 LocalityComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: LocalityComponent, deps: [{ token: AddressService }, { token: LocaleService }, { token: i3.TranslateService }, { token: UnicodeService }], target: i0.ɵɵFactoryTarget.Component });
-LocalityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: LocalityComponent, selector: "bp-locality", inputs: { labelResourceKey: "labelResourceKey", messageOption: "messageOption", maxSuggesionCount: "maxSuggesionCount", visibleSuggestionCount: "visibleSuggestionCount", sortCriteria: "sortCriteria", baseUrl: "baseUrl", inputText: "inputText", prefillData: "prefillData", showDebugMessageToConsole: "showDebugMessageToConsole", inputLang: "inputLang", isReadonly: "isReadonly", allowNoValidation: "allowNoValidation", validatedByBackend: "validatedByBackend", numberOfExceptions: "numberOfExceptions" }, outputs: { messageChanged: "messageChanged", addressChanged: "addressChanged", focusEvent: "focusEvent", blurEvent: "blurEvent", textChangeEvent: "textChangeEvent", clearInputEventEmitter: "clearInputEventEmitter", prefillEventEmitter: "prefillEventEmitter", numberOfExceptionsEmitter: "numberOfExceptionsEmitter" }, viewQueries: [{ propertyName: "localitySearchInput", first: true, predicate: ["localitySearchInput"], descendants: true }, { propertyName: "localityList", first: true, predicate: ["localityList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span *ngIf=\"labelResourceKey\">{{ labelResourceKey | translate}}</span>\n<div class=\"bpaac-dropdown\">\n    <div class=\"bpaac-search-bar\">\n        <div class=\"bpaac-input-width\">\n        \n            <input type=\"text\" #localitySearchInput class=\"bpaac-input\" \n                [readonly]=\"isReadonly\"\n                (keydown)=\"checkKeyDown($event)\" (input)=\"onInputChange()\"\n                [style.color]=\" getTextColor() \"\n                [(ngModel)]=\"searchText\" id=\"localityInputField\" [attr.placeholder]=\"placeHolderText\" autocomplete=\"off\"\n                (blur)=\"onBlur($event)\" (focus)=\"onFocus()\" (click)=\"onInputClick()\"/>\n            <div id=\"bpaac-clear-locality-button\" \n                 *ngIf=\"mayShowClearButton()\"\n                 (click)=\"clearInput(true)\" class=\"bpaac-clear\">\n            </div>\n        </div>\n        <!--<div ng-transclude></div>-->\n        <input id=\"bpaac-locality-typeahead\" type=\"text\" disabled autocomplete=\"off\" [(ngModel)]=\"bpTypeAhead\" />\n    </div>\n    <div [hidden]=\"collapseDropdown\" class=\"bpaac-dropdown-menu-container\" *ngIf=\"suggestions && suggestions.length>0\">\n        <div #localityList [appVisibleSuggestion]=\"visibleSuggestionCount\" id=\"bpaac-locality-dropdown\" \n            class=\"bpaac-dropdown-menu\">\n            <ul role=\"listbox\" id=\"bpaac-locality-suggestionsList\" class=\"list-unstyled\">\n                <li role=\"option\" \n                    *ngFor=\"let option of suggestions; let idx = index\" \n                    [ngClass]=\"{'active':(selectedIndex==idx)}\" (mousedown)=\"clickSuggestion($event, option)\"\n                    (mouseenter)=\"selectedIndex=idx\" (mouseleave)=\"selectedIndex=-1\">\n                    <span *ngIf=\"option\" [innerHtml]=\"option.string | highlightSuggestion : wordList\"></span> \n                    <span *ngIf=\"messageOption === 'P' && option.messages\"> ({{option.municipalityName}})</span><br />\n                    <ng-container *ngIf=\"messageOption === 'Y'\">\n                        <span *ngFor=\"let message of option.messages\" \n                          class=\"bpaac-suggestion-message\"\n                          [innerHtml]=\"message.translatedMessage\"></span> \n                    </ng-container>\n                </li>\n            </ul>\n        </div>\n    </div>\n</div>", styles: [""], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleSuggestionDirective, selector: "[appVisibleSuggestion]", inputs: ["appVisibleSuggestion"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i3.TranslatePipe, "highlightSuggestion": HighlightSuggestionPipe } });
+LocalityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: LocalityComponent, selector: "bp-locality", inputs: { labelResourceKey: "labelResourceKey", messageOption: "messageOption", maxSuggesionCount: "maxSuggesionCount", visibleSuggestionCount: "visibleSuggestionCount", sortCriteria: "sortCriteria", baseUrl: "baseUrl", inputText: "inputText", prefillData: "prefillData", showDebugMessageToConsole: "showDebugMessageToConsole", inputLang: "inputLang", isReadonly: "isReadonly", allowNoValidation: "allowNoValidation", validatedByBackend: "validatedByBackend", numberOfExceptions: "numberOfExceptions" }, outputs: { messageChanged: "messageChanged", addressChanged: "addressChanged", focusEvent: "focusEvent", blurEvent: "blurEvent", textChangeEvent: "textChangeEvent", clearInputEventEmitter: "clearInputEventEmitter", prefillEventEmitter: "prefillEventEmitter", numberOfExceptionsEmitter: "numberOfExceptionsEmitter" }, viewQueries: [{ propertyName: "localitySearchInput", first: true, predicate: ["localitySearchInput"], descendants: true }, { propertyName: "localityList", first: true, predicate: ["localityList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span *ngIf=\"labelResourceKey\">{{ labelResourceKey | translate}}</span>\n<div class=\"bpaac-dropdown\">\n    <div class=\"bpaac-search-bar\">\n        <div class=\"bpaac-input-width\">\n        \n            <input type=\"text\" #localitySearchInput class=\"bpaac-input\" \n                [readonly]=\"isReadonly\"\n                (keyup) = (checkKeyUP($event))\n                (keydown)=\"checkKeyDown($event)\" (input)=\"onInputChange()\"\n                [style.color]=\" getTextColor() \"\n                [(ngModel)]=\"searchText\" id=\"localityInputField\" [attr.placeholder]=\"placeHolderText\" autocomplete=\"off\"\n                (blur)=\"onBlur($event)\" (focus)=\"onFocus()\" (click)=\"onInputClick()\"/>\n            <div id=\"bpaac-clear-locality-button\" \n                 *ngIf=\"mayShowClearButton()\"\n                 (click)=\"clearInput(true)\" class=\"bpaac-clear\">\n            </div>\n        </div>\n        <!--<div ng-transclude></div>-->\n        <input id=\"bpaac-locality-typeahead\" type=\"text\" disabled autocomplete=\"off\" [(ngModel)]=\"bpTypeAhead\" />\n    </div>\n    <div [hidden]=\"collapseDropdown\" class=\"bpaac-dropdown-menu-container\" *ngIf=\"suggestions && suggestions.length>0\">\n        <div #localityList [appVisibleSuggestion]=\"visibleSuggestionCount\" id=\"bpaac-locality-dropdown\" \n            class=\"bpaac-dropdown-menu\">\n            <ul role=\"listbox\" id=\"bpaac-locality-suggestionsList\" class=\"list-unstyled\">\n                <li role=\"option\" \n                    *ngFor=\"let option of suggestions; let idx = index\" \n                    [ngClass]=\"{'active':(selectedIndex==idx)}\" (mousedown)=\"clickSuggestion($event, option)\"\n                    (mouseenter)=\"selectedIndex=idx\" (mouseleave)=\"selectedIndex=-1\">\n                    <span *ngIf=\"option\" [innerHtml]=\"option.string | highlightSuggestion : wordList\"></span> \n                    <span *ngIf=\"messageOption === 'P' && option.messages\"> ({{option.municipalityName}})</span><br />\n                    <ng-container *ngIf=\"messageOption === 'Y'\">\n                        <span *ngFor=\"let message of option.messages\" \n                          class=\"bpaac-suggestion-message\"\n                          [innerHtml]=\"message.translatedMessage\"></span> \n                    </ng-container>\n                </li>\n            </ul>\n        </div>\n    </div>\n</div>", styles: [""], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleSuggestionDirective, selector: "[appVisibleSuggestion]", inputs: ["appVisibleSuggestion"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i3.TranslatePipe, "highlightSuggestion": HighlightSuggestionPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: LocalityComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bp-locality', template: "<span *ngIf=\"labelResourceKey\">{{ labelResourceKey | translate}}</span>\n<div class=\"bpaac-dropdown\">\n    <div class=\"bpaac-search-bar\">\n        <div class=\"bpaac-input-width\">\n        \n            <input type=\"text\" #localitySearchInput class=\"bpaac-input\" \n                [readonly]=\"isReadonly\"\n                (keydown)=\"checkKeyDown($event)\" (input)=\"onInputChange()\"\n                [style.color]=\" getTextColor() \"\n                [(ngModel)]=\"searchText\" id=\"localityInputField\" [attr.placeholder]=\"placeHolderText\" autocomplete=\"off\"\n                (blur)=\"onBlur($event)\" (focus)=\"onFocus()\" (click)=\"onInputClick()\"/>\n            <div id=\"bpaac-clear-locality-button\" \n                 *ngIf=\"mayShowClearButton()\"\n                 (click)=\"clearInput(true)\" class=\"bpaac-clear\">\n            </div>\n        </div>\n        <!--<div ng-transclude></div>-->\n        <input id=\"bpaac-locality-typeahead\" type=\"text\" disabled autocomplete=\"off\" [(ngModel)]=\"bpTypeAhead\" />\n    </div>\n    <div [hidden]=\"collapseDropdown\" class=\"bpaac-dropdown-menu-container\" *ngIf=\"suggestions && suggestions.length>0\">\n        <div #localityList [appVisibleSuggestion]=\"visibleSuggestionCount\" id=\"bpaac-locality-dropdown\" \n            class=\"bpaac-dropdown-menu\">\n            <ul role=\"listbox\" id=\"bpaac-locality-suggestionsList\" class=\"list-unstyled\">\n                <li role=\"option\" \n                    *ngFor=\"let option of suggestions; let idx = index\" \n                    [ngClass]=\"{'active':(selectedIndex==idx)}\" (mousedown)=\"clickSuggestion($event, option)\"\n                    (mouseenter)=\"selectedIndex=idx\" (mouseleave)=\"selectedIndex=-1\">\n                    <span *ngIf=\"option\" [innerHtml]=\"option.string | highlightSuggestion : wordList\"></span> \n                    <span *ngIf=\"messageOption === 'P' && option.messages\"> ({{option.municipalityName}})</span><br />\n                    <ng-container *ngIf=\"messageOption === 'Y'\">\n                        <span *ngFor=\"let message of option.messages\" \n                          class=\"bpaac-suggestion-message\"\n                          [innerHtml]=\"message.translatedMessage\"></span> \n                    </ng-container>\n                </li>\n            </ul>\n        </div>\n    </div>\n</div>", styles: [""] }]
+            args: [{ selector: 'bp-locality', template: "<span *ngIf=\"labelResourceKey\">{{ labelResourceKey | translate}}</span>\n<div class=\"bpaac-dropdown\">\n    <div class=\"bpaac-search-bar\">\n        <div class=\"bpaac-input-width\">\n        \n            <input type=\"text\" #localitySearchInput class=\"bpaac-input\" \n                [readonly]=\"isReadonly\"\n                (keyup) = (checkKeyUP($event))\n                (keydown)=\"checkKeyDown($event)\" (input)=\"onInputChange()\"\n                [style.color]=\" getTextColor() \"\n                [(ngModel)]=\"searchText\" id=\"localityInputField\" [attr.placeholder]=\"placeHolderText\" autocomplete=\"off\"\n                (blur)=\"onBlur($event)\" (focus)=\"onFocus()\" (click)=\"onInputClick()\"/>\n            <div id=\"bpaac-clear-locality-button\" \n                 *ngIf=\"mayShowClearButton()\"\n                 (click)=\"clearInput(true)\" class=\"bpaac-clear\">\n            </div>\n        </div>\n        <!--<div ng-transclude></div>-->\n        <input id=\"bpaac-locality-typeahead\" type=\"text\" disabled autocomplete=\"off\" [(ngModel)]=\"bpTypeAhead\" />\n    </div>\n    <div [hidden]=\"collapseDropdown\" class=\"bpaac-dropdown-menu-container\" *ngIf=\"suggestions && suggestions.length>0\">\n        <div #localityList [appVisibleSuggestion]=\"visibleSuggestionCount\" id=\"bpaac-locality-dropdown\" \n            class=\"bpaac-dropdown-menu\">\n            <ul role=\"listbox\" id=\"bpaac-locality-suggestionsList\" class=\"list-unstyled\">\n                <li role=\"option\" \n                    *ngFor=\"let option of suggestions; let idx = index\" \n                    [ngClass]=\"{'active':(selectedIndex==idx)}\" (mousedown)=\"clickSuggestion($event, option)\"\n                    (mouseenter)=\"selectedIndex=idx\" (mouseleave)=\"selectedIndex=-1\">\n                    <span *ngIf=\"option\" [innerHtml]=\"option.string | highlightSuggestion : wordList\"></span> \n                    <span *ngIf=\"messageOption === 'P' && option.messages\"> ({{option.municipalityName}})</span><br />\n                    <ng-container *ngIf=\"messageOption === 'Y'\">\n                        <span *ngFor=\"let message of option.messages\" \n                          class=\"bpaac-suggestion-message\"\n                          [innerHtml]=\"message.translatedMessage\"></span> \n                    </ng-container>\n                </li>\n            </ul>\n        </div>\n    </div>\n</div>", styles: [""] }]
         }], ctorParameters: function () { return [{ type: AddressService }, { type: LocaleService }, { type: i3.TranslateService }, { type: UnicodeService }]; }, propDecorators: { localitySearchInput: [{
                 type: ViewChild,
                 args: ['localitySearchInput', { static: false }]
@@ -1776,6 +1799,16 @@ class StreetComponent {
         }
         return result;
     }
+    isCrossLanguageMunicipalityMatch(suggestionMunicipality, prefillMunicipality) {
+        if (!suggestionMunicipality || !prefillMunicipality) {
+            return false;
+        }
+        const suggestionLower = suggestionMunicipality.toLowerCase();
+        const prefillLower = prefillMunicipality.toLowerCase();
+        if (suggestionLower === prefillLower) {
+            return true;
+        }
+    }
     onClearInputEvent(event, focus) {
         this.clearInput(focus);
     }
@@ -2050,30 +2083,46 @@ class StreetComponent {
         if (this.showDebugMessageToConsole) {
             console.log('street - checking suggestion for perfect match', this.prefillData, suggestion);
         }
-        const sugAddress = suggestion.address;
-        // if (sugAddress.streetName === this.prefillData.parameters.streetName )
-        const suggestionLocality = this.transformStreetNameInLowercaseAndWithoutDiacritics(sugAddress.localityName);
-        const suggestionMunicipality = this.transformStreetNameInLowercaseAndWithoutDiacritics(sugAddress.municipalityName);
-        if (suggestionLocality === this.prefillData.prefillMunicipalityName
-            || suggestionMunicipality === this.prefillData.prefillMunicipalityName) {
-            const suggestionStreetName = this.transformStreetNameInLowercaseAndWithoutDiacritics(sugAddress.streetName);
-            // console.log('comparing street names', suggestionStreetName, this.prefillData.prefillStreetName);
-            if (suggestionStreetName === this.prefillData.prefillStreetName) {
-                this.prefillData.prefillStreetPerfectMatchFound = true;
-                this.prefillData.prefillStreetPerfectMatchSuggestion = suggestion;
-                this.searchText = sugAddress.streetName;
-            }
-            if (this.prefillData.prefillStreetPerfectMatchFound === true) {
-                if (this.showDebugMessageToConsole) {
-                    console.log('STREET - PREFILL - Perfect match - street:', suggestion);
-                }
-            }
-            else {
-                if (this.showDebugMessageToConsole) {
-                    console.log('STREET - PREFILL - NO Perfect match:', suggestion);
+        const streetNamesAllLanguage = [];
+        const languageTypes = ['address', 'french', 'dutch', 'german'];
+        for (const type of languageTypes) {
+            if (suggestion[type]) {
+                streetNamesAllLanguage.push({
+                    type: type,
+                    streetName: suggestion[type].streetName,
+                    municipalityName: suggestion[type].municipalityName,
+                    localityName: suggestion[type].localityName
+                });
+            }
+        }
+        for (const lang of streetNamesAllLanguage) {
+            console.log('----------------Language data--------------------:', lang);
+            if (!lang.streetName || !lang.municipalityName) {
+                continue;
+            }
+            const suggestionStreetName = this.transformStreetNameInLowercaseAndWithoutDiacritics(lang.streetName);
+            const suggestionMunicipalityName = this.transformStreetNameInLowercaseAndWithoutDiacritics(lang.municipalityName);
+            const suggestionLocalityName = lang.localityName ? this.transformStreetNameInLowercaseAndWithoutDiacritics(lang.localityName) : '';
+            const municipalityMatches = suggestionMunicipalityName === this.prefillData.prefillMunicipalityName ||
+                suggestionLocalityName === this.prefillData.prefillMunicipalityName ||
+                this.isCrossLanguageMunicipalityMatch(suggestionMunicipalityName, this.prefillData.prefillMunicipalityName) ||
+                this.isCrossLanguageMunicipalityMatch(suggestionLocalityName, this.prefillData.prefillMunicipalityName);
+            console.log('Municipality matches:', municipalityMatches);
+            if (municipalityMatches) {
+                if (suggestionStreetName === this.prefillData.prefillStreetName) {
+                    this.prefillData.prefillStreetPerfectMatchFound = true;
+                    this.prefillData.prefillStreetPerfectMatchSuggestion = suggestion;
+                    this.searchText = lang.streetName;
+                    if (this.showDebugMessageToConsole) {
+                        console.log('STREET - PREFILL - Perfect match found with lang:', lang.type, suggestion);
+                    }
+                    return;
                 }
             }
         }
+        if (this.showDebugMessageToConsole) {
+            console.log('STREET - PREFILL - NO Perfect match found:', suggestion);
+        }
     }
     onInputChange(source) {
         // console.log('street onInputChange : source ', source);
@@ -2239,6 +2288,24 @@ class StreetComponent {
                 break;
         }
     }
+    checkKeyUP(event) {
+        switch (event.which) {
+            case 8:
+                if (this.searchText.length > 0) {
+                    this.clearInputEventEmitter.emit('PARTIAL_CLEAR_STREET');
+                }
+                else {
+                    this.clearInputEventEmitter.emit('STREET');
+                    // this.clearInputEventEmitter.emit('STREET_NUMBER');
+                    // this.clearInputEventEmitter.emit('BOX_NUMBER');
+                    //  this.clearInput(true);
+                }
+                break;
+            default:
+                this.clearTypeAhead();
+                break;
+        }
+    }
     clearWidget() {
         this.addressIsValidated = false;
         this.clearSearchText();
@@ -2293,6 +2360,7 @@ class StreetComponent {
     }
     clearInput(focus, emit = true) {
         // console.warn('street clearInput called ...', focus, emit);
+        // console.log(this.selectedAddress,"selectedadreess");
         this.clearWidget();
         this.resetArrowSelectedIndex();
         this.previousIndex = -1;
@@ -2306,6 +2374,8 @@ class StreetComponent {
         }
         if (emit) {
             this.clearInputEventEmitter.emit(/*'STREET'*/ InputNameType.STREET);
+            //  this.clearInputEventEmitter.emit(/*'STREET_NUMBER'*/ InputNameType.STREET_NUMBER);
+            //  this.clearInputEventEmitter.emit(/*'BOX_NUMBER'*/ InputNameType.BOX_NUMBER);
         }
     }
     clearSuggestions() {
@@ -2359,10 +2429,10 @@ class StreetComponent {
     }
 }
 StreetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: StreetComponent, deps: [{ token: AddressService }, { token: LocaleService }, { token: i3.TranslateService }, { token: UnicodeService }], target: i0.ɵɵFactoryTarget.Component });
-StreetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: StreetComponent, selector: "bp-street", inputs: { labelResourceKey: "labelResourceKey", maxSuggesionCount: "maxSuggesionCount", visibleSuggesionCount: "visibleSuggesionCount", sortCriteria: "sortCriteria", baseUrl: "baseUrl", addressParams: "addressParams", prefillData: "prefillData", showDebugMessageToConsole: "showDebugMessageToConsole", postalCode: "postalCode", locality: "locality", inputText: "inputText", messageOption: "messageOption", allowNoValidation: "allowNoValidation", validatedByBackend: "validatedByBackend", numberOfExceptions: "numberOfExceptions", inputLang: "inputLang", isReadonly: "isReadonly" }, outputs: { messageChanged: "messageChanged", addressChanged: "addressChanged", focusEvent: "focusEvent", blurEvent: "blurEvent", textChangeEvent: "textChangeEvent", clearInputEventEmitter: "clearInputEventEmitter", prefillEventEmitter: "prefillEventEmitter", numberOfExceptionsEmitter: "numberOfExceptionsEmitter" }, viewQueries: [{ propertyName: "streetSearchInput", first: true, predicate: ["streetSearchInput"], descendants: true }, { propertyName: "streetList", first: true, predicate: ["streetList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span *ngIf=\"labelResourceKey\">{{ labelResourceKey | translate}}</span>\n<div class=\"bpaac-dropdown\">\n    <div class=\"bpaac-search-bar\">\n        <div class=\"bpaac-input-width\">\n                <!-- [disabled]=\"isDisabled()\" -->\n            <input type=\"text\" #streetSearchInput class=\"bpaac-input\" \n                    [readonly]=\"isReadonly\"\n                    [style.background-color]=\"!isParamsComplete() ? 'lightgrey' : ''\" \n                    [style.color]=\" getTextColor() \"\n                    [disabled]=\"(validatedByBackend && (!locality || locality.trim().length === 0)) \n                            || (!validatedByBackend && ((!postalCode || postalCode.trim().length === 0) && (!locality || locality.trim().length === 0)))\" (keydown)=\"checkKeyDown($event)\" \n                    (input)=\"onInputChange()\" (click)=\"onInputClick()\"\n                    [(ngModel)]=\"searchText\" id=\"streetInputField\" [attr.placeholder]=\"placeHolderText\" autocomplete=\"off\"\n                    (blur)=\"onBlur($event)\" (focus)=\"onFocus()\" />\n            <div id=\"bpaac-clear-street-button\" *ngIf=\"mayShowClearButton()\" (click)=\"clearInput(true)\" class=\"bpaac-clear\">\n            </div>\n        </div>\n        <!--<div ng-transclude></div>-->\n        <input id=\"bpaac-street-typeahead\" type=\"text\" disabled autocomplete=\"off\" [(ngModel)]=\"bpTypeAhead\" />\n    </div>\n    <div [hidden]=\"collapseDropdown\" class=\"bpaac-dropdown-menu-container\" *ngIf=\"suggestions && suggestions.length>0\">\n        <div #streetList [appVisibleSuggestion]=\"visibleSuggesionCount\" id=\"bpaac-street-dropdown\" class=\"bpaac-dropdown-menu\">\n            <ul role=\"listbox\" id=\"bpaac-street-suggestionsList\" class=\"list-unstyled\">\n                <li role=\"option\" *ngFor=\"let option of suggestions; let idx = index\" [ngClass]=\"{'active':(selectedIndex==idx)}\" (mousedown)=\"clickSuggestion($event, option)\"\n                (mouseenter)=\"selectedIndex=idx\" (mouseleave)=\"selectedIndex=-1\">\n                    <span *ngIf=\"option\" [innerHtml]=\"option.string | highlightSuggestion : wordList\"></span>\n                </li>\n            </ul>\n        </div>\n    </div>\n</div>\n", styles: [""], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleSuggestionDirective, selector: "[appVisibleSuggestion]", inputs: ["appVisibleSuggestion"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i3.TranslatePipe, "highlightSuggestion": HighlightSuggestionPipe } });
+StreetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: StreetComponent, selector: "bp-street", inputs: { labelResourceKey: "labelResourceKey", maxSuggesionCount: "maxSuggesionCount", visibleSuggesionCount: "visibleSuggesionCount", sortCriteria: "sortCriteria", baseUrl: "baseUrl", addressParams: "addressParams", prefillData: "prefillData", showDebugMessageToConsole: "showDebugMessageToConsole", postalCode: "postalCode", locality: "locality", inputText: "inputText", messageOption: "messageOption", allowNoValidation: "allowNoValidation", validatedByBackend: "validatedByBackend", numberOfExceptions: "numberOfExceptions", inputLang: "inputLang", isReadonly: "isReadonly" }, outputs: { messageChanged: "messageChanged", addressChanged: "addressChanged", focusEvent: "focusEvent", blurEvent: "blurEvent", textChangeEvent: "textChangeEvent", clearInputEventEmitter: "clearInputEventEmitter", prefillEventEmitter: "prefillEventEmitter", numberOfExceptionsEmitter: "numberOfExceptionsEmitter" }, viewQueries: [{ propertyName: "streetSearchInput", first: true, predicate: ["streetSearchInput"], descendants: true }, { propertyName: "streetList", first: true, predicate: ["streetList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span *ngIf=\"labelResourceKey\">{{ labelResourceKey | translate}}</span>\n<div class=\"bpaac-dropdown\">\n    <div class=\"bpaac-search-bar\">\n        <div class=\"bpaac-input-width\">\n                <!-- [disabled]=\"isDisabled()\" -->\n            <input type=\"text\" #streetSearchInput class=\"bpaac-input\" \n                    [readonly]=\"isReadonly\"\n                     (keyup) = (checkKeyUP($event))\n                    [style.background-color]=\"!isParamsComplete() ? 'lightgrey' : ''\" \n                    [style.color]=\" getTextColor() \"\n                    [disabled]=\"(validatedByBackend && (!locality || locality.trim().length === 0)) \n                            || (!validatedByBackend && ((!postalCode || postalCode.trim().length === 0) && (!locality || locality.trim().length === 0)))\" (keydown)=\"checkKeyDown($event)\" \n                    (input)=\"onInputChange()\" (click)=\"onInputClick()\"\n                    [(ngModel)]=\"searchText\" id=\"streetInputField\" [attr.placeholder]=\"placeHolderText\" autocomplete=\"off\"\n                    (blur)=\"onBlur($event)\" (focus)=\"onFocus()\" />\n            <div id=\"bpaac-clear-street-button\" *ngIf=\"mayShowClearButton()\" (click)=\"clearInput(true)\" class=\"bpaac-clear\">\n            </div>\n        </div>\n        <!--<div ng-transclude></div>-->\n        <input id=\"bpaac-street-typeahead\" type=\"text\" disabled autocomplete=\"off\" [(ngModel)]=\"bpTypeAhead\" />\n    </div>\n    <div [hidden]=\"collapseDropdown\" class=\"bpaac-dropdown-menu-container\" *ngIf=\"suggestions && suggestions.length>0\">\n        <div #streetList [appVisibleSuggestion]=\"visibleSuggesionCount\" id=\"bpaac-street-dropdown\" class=\"bpaac-dropdown-menu\">\n            <ul role=\"listbox\" id=\"bpaac-street-suggestionsList\" class=\"list-unstyled\">\n                <li role=\"option\" *ngFor=\"let option of suggestions; let idx = index\" [ngClass]=\"{'active':(selectedIndex==idx)}\" (mousedown)=\"clickSuggestion($event, option)\"\n                (mouseenter)=\"selectedIndex=idx\" (mouseleave)=\"selectedIndex=-1\">\n                    <span *ngIf=\"option\" [innerHtml]=\"option.string | highlightSuggestion : wordList\"></span>\n                </li>\n            </ul>\n        </div>\n    </div>\n</div>\n", styles: [""], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleSuggestionDirective, selector: "[appVisibleSuggestion]", inputs: ["appVisibleSuggestion"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i3.TranslatePipe, "highlightSuggestion": HighlightSuggestionPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: StreetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bp-street', template: "<span *ngIf=\"labelResourceKey\">{{ labelResourceKey | translate}}</span>\n<div class=\"bpaac-dropdown\">\n    <div class=\"bpaac-search-bar\">\n        <div class=\"bpaac-input-width\">\n                <!-- [disabled]=\"isDisabled()\" -->\n            <input type=\"text\" #streetSearchInput class=\"bpaac-input\" \n                    [readonly]=\"isReadonly\"\n                    [style.background-color]=\"!isParamsComplete() ? 'lightgrey' : ''\" \n                    [style.color]=\" getTextColor() \"\n                    [disabled]=\"(validatedByBackend && (!locality || locality.trim().length === 0)) \n                            || (!validatedByBackend && ((!postalCode || postalCode.trim().length === 0) && (!locality || locality.trim().length === 0)))\" (keydown)=\"checkKeyDown($event)\" \n                    (input)=\"onInputChange()\" (click)=\"onInputClick()\"\n                    [(ngModel)]=\"searchText\" id=\"streetInputField\" [attr.placeholder]=\"placeHolderText\" autocomplete=\"off\"\n                    (blur)=\"onBlur($event)\" (focus)=\"onFocus()\" />\n            <div id=\"bpaac-clear-street-button\" *ngIf=\"mayShowClearButton()\" (click)=\"clearInput(true)\" class=\"bpaac-clear\">\n            </div>\n        </div>\n        <!--<div ng-transclude></div>-->\n        <input id=\"bpaac-street-typeahead\" type=\"text\" disabled autocomplete=\"off\" [(ngModel)]=\"bpTypeAhead\" />\n    </div>\n    <div [hidden]=\"collapseDropdown\" class=\"bpaac-dropdown-menu-container\" *ngIf=\"suggestions && suggestions.length>0\">\n        <div #streetList [appVisibleSuggestion]=\"visibleSuggesionCount\" id=\"bpaac-street-dropdown\" class=\"bpaac-dropdown-menu\">\n            <ul role=\"listbox\" id=\"bpaac-street-suggestionsList\" class=\"list-unstyled\">\n                <li role=\"option\" *ngFor=\"let option of suggestions; let idx = index\" [ngClass]=\"{'active':(selectedIndex==idx)}\" (mousedown)=\"clickSuggestion($event, option)\"\n                (mouseenter)=\"selectedIndex=idx\" (mouseleave)=\"selectedIndex=-1\">\n                    <span *ngIf=\"option\" [innerHtml]=\"option.string | highlightSuggestion : wordList\"></span>\n                </li>\n            </ul>\n        </div>\n    </div>\n</div>\n", styles: [""] }]
+            args: [{ selector: 'bp-street', template: "<span *ngIf=\"labelResourceKey\">{{ labelResourceKey | translate}}</span>\n<div class=\"bpaac-dropdown\">\n    <div class=\"bpaac-search-bar\">\n        <div class=\"bpaac-input-width\">\n                <!-- [disabled]=\"isDisabled()\" -->\n            <input type=\"text\" #streetSearchInput class=\"bpaac-input\" \n                    [readonly]=\"isReadonly\"\n                     (keyup) = (checkKeyUP($event))\n                    [style.background-color]=\"!isParamsComplete() ? 'lightgrey' : ''\" \n                    [style.color]=\" getTextColor() \"\n                    [disabled]=\"(validatedByBackend && (!locality || locality.trim().length === 0)) \n                            || (!validatedByBackend && ((!postalCode || postalCode.trim().length === 0) && (!locality || locality.trim().length === 0)))\" (keydown)=\"checkKeyDown($event)\" \n                    (input)=\"onInputChange()\" (click)=\"onInputClick()\"\n                    [(ngModel)]=\"searchText\" id=\"streetInputField\" [attr.placeholder]=\"placeHolderText\" autocomplete=\"off\"\n                    (blur)=\"onBlur($event)\" (focus)=\"onFocus()\" />\n            <div id=\"bpaac-clear-street-button\" *ngIf=\"mayShowClearButton()\" (click)=\"clearInput(true)\" class=\"bpaac-clear\">\n            </div>\n        </div>\n        <!--<div ng-transclude></div>-->\n        <input id=\"bpaac-street-typeahead\" type=\"text\" disabled autocomplete=\"off\" [(ngModel)]=\"bpTypeAhead\" />\n    </div>\n    <div [hidden]=\"collapseDropdown\" class=\"bpaac-dropdown-menu-container\" *ngIf=\"suggestions && suggestions.length>0\">\n        <div #streetList [appVisibleSuggestion]=\"visibleSuggesionCount\" id=\"bpaac-street-dropdown\" class=\"bpaac-dropdown-menu\">\n            <ul role=\"listbox\" id=\"bpaac-street-suggestionsList\" class=\"list-unstyled\">\n                <li role=\"option\" *ngFor=\"let option of suggestions; let idx = index\" [ngClass]=\"{'active':(selectedIndex==idx)}\" (mousedown)=\"clickSuggestion($event, option)\"\n                (mouseenter)=\"selectedIndex=idx\" (mouseleave)=\"selectedIndex=-1\">\n                    <span *ngIf=\"option\" [innerHtml]=\"option.string | highlightSuggestion : wordList\"></span>\n                </li>\n            </ul>\n        </div>\n    </div>\n</div>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: AddressService }, { type: LocaleService }, { type: i3.TranslateService }, { type: UnicodeService }]; }, propDecorators: { streetSearchInput: [{
                 type: ViewChild,
                 args: ['streetSearchInput', { static: false }]
@@ -3272,6 +3342,23 @@ class StreetNumberComponent {
                 break;
         }
     }
+    checkKeyUP(event) {
+        switch (event.which) {
+            case 8:
+                if (this.searchText.length > 0) {
+                    this.clearInputEventEmitter.emit('PARTIAL_CLEAR_STREET_NUMBER');
+                }
+                else {
+                    this.clearInputEventEmitter.emit('STREET_NUMBER');
+                    // this.clearInputEventEmitter.emit('BOX_NUMBER');
+                    //  this.onClearStreetNumberInput(true);
+                }
+                break;
+            default:
+                this.clearTypeAhead();
+                break;
+        }
+    }
     clearWidget() {
         if (this.showDebugMessageToConsole) {
             console.log('street number:: clearWidget');
@@ -3344,6 +3431,7 @@ class StreetNumberComponent {
         // this.addressChanged.emit(null);
         if (emit) {
             this.clearInputEventEmitter.emit(/*'STREET_NUMBER'*/ InputNameType.STREET_NUMBER);
+            //  this.clearInputEventEmitter.emit(/*'BOX_NUMBER'*/ InputNameType.BOX_NUMBER);
         }
     }
     /*
@@ -3408,10 +3496,10 @@ class StreetNumberComponent {
     }
 }
 StreetNumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: StreetNumberComponent, deps: [{ token: AddressService }, { token: LocaleService }, { token: i3.TranslateService }, { token: UnicodeService }], target: i0.ɵɵFactoryTarget.Component });
-StreetNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: StreetNumberComponent, selector: "bp-street-number", inputs: { prefillData: "prefillData", showDebugMessageToConsole: "showDebugMessageToConsole", labelResourceKey: "labelResourceKey", maxSuggesionCount: "maxSuggesionCount", visibleSuggesionCount: "visibleSuggesionCount", sortCriteria: "sortCriteria", baseUrl: "baseUrl", addressParams: "addressParams", postalCode: "postalCode", locality: "locality", streetName: "streetName", notInListAllowed: "notInListAllowed", selectedAddress: "selectedAddress", allowNoValidation: "allowNoValidation", validatedByBackend: "validatedByBackend", numberOfExceptions: "numberOfExceptions", inputLang: "inputLang", messageOption: "messageOption", inputText: "inputText", isReadonly: "isReadonly", suggestionLevel: "suggestionLevel" }, outputs: { messageChanged: "messageChanged", addressChanged: "addressChanged", focusEvent: "focusEvent", blurEvent: "blurEvent", textChangeEvent: "textChangeEvent", emptyResponseEvent: "emptyResponseEvent", clearInputEventEmitter: "clearInputEventEmitter", prefillEventEmitter: "prefillEventEmitter", streetNumberChanged: "streetNumberChanged", numberOfExceptionsEmitter: "numberOfExceptionsEmitter" }, viewQueries: [{ propertyName: "streetNumberSearchInput", first: true, predicate: ["streetNumberSearchInput"], descendants: true }, { propertyName: "streetNumberList", first: true, predicate: ["streetNumberList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span *ngIf=\"labelResourceKey\">{{ labelResourceKey | translate}}</span>\n<div class=\"bpaac-dropdown\">\n    <div class=\"bpaac-search-bar\">\n        <div class=\"bpaac-input-width\">\n                <!-- [disabled]=\"isDisabled()\" -->\n            <input type=\"text\" #streetNumberSearchInput class=\"bpaac-input\" \n                [readonly]=\"isReadonly\"\n                [style.background-color]=\"!isParamsComplete() ? 'lightgrey' : ''\" \n                [style.color]=\" getTextColor() \"\n                [disabled]=\"!streetName || streetName.trim().length === 0\" (keydown)=\"checkKeyDown($event)\" \n                (input)=\"onInputChange()\" (click)=\"onInputClick()\"\n                [(ngModel)]=\"searchText\" id=\"streetNumberInputField\" \n                [attr.title]=\"placeHolderText\" \n                [attr.placeholder]=\"placeHolderText\" autocomplete=\"off\"\n                (blur)=\"onBlur($event)\" (focus)=\"onFocus()\" />\n            <div id=\"bpaac-clear-streetNb-button\" *ngIf=\"mayShowClearButton()\" \n                (click)=\"onClearStreetNumberInput(true)\" class=\"bpaac-clear\">\n            </div>\n        </div>\n        <!--<div ng-transclude></div>-->\n        <input id=\"bpaac-streetNb-typeahead\" type=\"text\" disabled autocomplete=\"off\" [(ngModel)]=\"bpTypeAhead\" />\n <!--        <span>addressIsComplete: {{ addressIsComplete }}. </span>\n        <span>addressIsValidated: {{ addressIsValidated }}. </span> -->\n        <span *ngIf=\"addressIsComplete\" class=\"streetNbChekmark\"><span class=\"checkmark\"></span></span>\n    </div>\n    <div [hidden]=\"collapseDropdown\" class=\"bpaac-dropdown-menu-container\" \n        *ngIf=\"(suggestionLevel===SuggestionLevelType.StreetNumber || suggestionLevel===SuggestionLevelType.StreetAndBoxNumber) && suggestions && suggestions.length>0\">\n        <div #streetNumberList [appVisibleSuggestion]=\"visibleSuggesionCount\" \n            id=\"bpaac-streetnumber-dropdown\" class=\"bpaac-dropdown-menu\">\n            <ul role=\"listbox\" id=\"bpaac-streetNb-suggestionsList\" class=\"list-unstyled\">\n                <li role=\"option\" *ngFor=\"let option of suggestions; let idx = index\" [ngClass]=\"{'active':(selectedIndex==idx)}\" (mousedown)=\"clickSuggestion($event, option)\"\n                (mouseenter)=\"selectedIndex=idx\" (mouseleave)=\"selectedIndex=-1\">\n                    <span *ngIf=\"option\" [innerHtml]=\"option['not-in-list'] ? emptyResponseText : option.string | highlightSuggestion : wordList\"></span>\n                </li>\n            </ul>\n        </div>\n    </div>\n</div>", styles: [""], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleSuggestionDirective, selector: "[appVisibleSuggestion]", inputs: ["appVisibleSuggestion"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i3.TranslatePipe, "highlightSuggestion": HighlightSuggestionPipe } });
+StreetNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: StreetNumberComponent, selector: "bp-street-number", inputs: { prefillData: "prefillData", showDebugMessageToConsole: "showDebugMessageToConsole", labelResourceKey: "labelResourceKey", maxSuggesionCount: "maxSuggesionCount", visibleSuggesionCount: "visibleSuggesionCount", sortCriteria: "sortCriteria", baseUrl: "baseUrl", addressParams: "addressParams", postalCode: "postalCode", locality: "locality", streetName: "streetName", notInListAllowed: "notInListAllowed", selectedAddress: "selectedAddress", allowNoValidation: "allowNoValidation", validatedByBackend: "validatedByBackend", numberOfExceptions: "numberOfExceptions", inputLang: "inputLang", messageOption: "messageOption", inputText: "inputText", isReadonly: "isReadonly", suggestionLevel: "suggestionLevel" }, outputs: { messageChanged: "messageChanged", addressChanged: "addressChanged", focusEvent: "focusEvent", blurEvent: "blurEvent", textChangeEvent: "textChangeEvent", emptyResponseEvent: "emptyResponseEvent", clearInputEventEmitter: "clearInputEventEmitter", prefillEventEmitter: "prefillEventEmitter", streetNumberChanged: "streetNumberChanged", numberOfExceptionsEmitter: "numberOfExceptionsEmitter" }, viewQueries: [{ propertyName: "streetNumberSearchInput", first: true, predicate: ["streetNumberSearchInput"], descendants: true }, { propertyName: "streetNumberList", first: true, predicate: ["streetNumberList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span *ngIf=\"labelResourceKey\">{{ labelResourceKey | translate}}</span>\n<div class=\"bpaac-dropdown\">\n    <div class=\"bpaac-search-bar\">\n        <div class=\"bpaac-input-width\">\n                <!-- [disabled]=\"isDisabled()\" -->\n            <input type=\"text\" #streetNumberSearchInput class=\"bpaac-input\" \n                [readonly]=\"isReadonly\"\n                 (keyup) = (checkKeyUP($event))\n                [style.background-color]=\"!isParamsComplete() ? 'lightgrey' : ''\" \n                [style.color]=\" getTextColor() \"\n                [disabled]=\"!streetName || streetName.trim().length === 0\" (keydown)=\"checkKeyDown($event)\" \n                (input)=\"onInputChange()\" (click)=\"onInputClick()\"\n                [(ngModel)]=\"searchText\" id=\"streetNumberInputField\" \n                [attr.title]=\"placeHolderText\" \n                [attr.placeholder]=\"placeHolderText\" autocomplete=\"off\"\n                (blur)=\"onBlur($event)\" (focus)=\"onFocus()\" />\n            <div id=\"bpaac-clear-streetNb-button\" *ngIf=\"mayShowClearButton()\" \n                (click)=\"onClearStreetNumberInput(true)\" class=\"bpaac-clear\">\n            </div>\n        </div>\n        <!--<div ng-transclude></div>-->\n        <input id=\"bpaac-streetNb-typeahead\" type=\"text\" disabled autocomplete=\"off\" [(ngModel)]=\"bpTypeAhead\" />\n <!--        <span>addressIsComplete: {{ addressIsComplete }}. </span>\n        <span>addressIsValidated: {{ addressIsValidated }}. </span> -->\n        <span *ngIf=\"addressIsComplete\" class=\"streetNbChekmark\"><span class=\"checkmark\"></span></span>\n    </div>\n    <div [hidden]=\"collapseDropdown\" class=\"bpaac-dropdown-menu-container\" \n        *ngIf=\"(suggestionLevel===SuggestionLevelType.StreetNumber || suggestionLevel===SuggestionLevelType.StreetAndBoxNumber) && suggestions && suggestions.length>0\">\n        <div #streetNumberList [appVisibleSuggestion]=\"visibleSuggesionCount\" \n            id=\"bpaac-streetnumber-dropdown\" class=\"bpaac-dropdown-menu\">\n            <ul role=\"listbox\" id=\"bpaac-streetNb-suggestionsList\" class=\"list-unstyled\">\n                <li role=\"option\" *ngFor=\"let option of suggestions; let idx = index\" [ngClass]=\"{'active':(selectedIndex==idx)}\" (mousedown)=\"clickSuggestion($event, option)\"\n                (mouseenter)=\"selectedIndex=idx\" (mouseleave)=\"selectedIndex=-1\">\n                    <span *ngIf=\"option\" [innerHtml]=\"option['not-in-list'] ? emptyResponseText : option.string | highlightSuggestion : wordList\"></span>\n                </li>\n            </ul>\n        </div>\n    </div>\n</div>", styles: [""], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleSuggestionDirective, selector: "[appVisibleSuggestion]", inputs: ["appVisibleSuggestion"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i3.TranslatePipe, "highlightSuggestion": HighlightSuggestionPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: StreetNumberComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bp-street-number', template: "<span *ngIf=\"labelResourceKey\">{{ labelResourceKey | translate}}</span>\n<div class=\"bpaac-dropdown\">\n    <div class=\"bpaac-search-bar\">\n        <div class=\"bpaac-input-width\">\n                <!-- [disabled]=\"isDisabled()\" -->\n            <input type=\"text\" #streetNumberSearchInput class=\"bpaac-input\" \n                [readonly]=\"isReadonly\"\n                [style.background-color]=\"!isParamsComplete() ? 'lightgrey' : ''\" \n                [style.color]=\" getTextColor() \"\n                [disabled]=\"!streetName || streetName.trim().length === 0\" (keydown)=\"checkKeyDown($event)\" \n                (input)=\"onInputChange()\" (click)=\"onInputClick()\"\n                [(ngModel)]=\"searchText\" id=\"streetNumberInputField\" \n                [attr.title]=\"placeHolderText\" \n                [attr.placeholder]=\"placeHolderText\" autocomplete=\"off\"\n                (blur)=\"onBlur($event)\" (focus)=\"onFocus()\" />\n            <div id=\"bpaac-clear-streetNb-button\" *ngIf=\"mayShowClearButton()\" \n                (click)=\"onClearStreetNumberInput(true)\" class=\"bpaac-clear\">\n            </div>\n        </div>\n        <!--<div ng-transclude></div>-->\n        <input id=\"bpaac-streetNb-typeahead\" type=\"text\" disabled autocomplete=\"off\" [(ngModel)]=\"bpTypeAhead\" />\n <!--        <span>addressIsComplete: {{ addressIsComplete }}. </span>\n        <span>addressIsValidated: {{ addressIsValidated }}. </span> -->\n        <span *ngIf=\"addressIsComplete\" class=\"streetNbChekmark\"><span class=\"checkmark\"></span></span>\n    </div>\n    <div [hidden]=\"collapseDropdown\" class=\"bpaac-dropdown-menu-container\" \n        *ngIf=\"(suggestionLevel===SuggestionLevelType.StreetNumber || suggestionLevel===SuggestionLevelType.StreetAndBoxNumber) && suggestions && suggestions.length>0\">\n        <div #streetNumberList [appVisibleSuggestion]=\"visibleSuggesionCount\" \n            id=\"bpaac-streetnumber-dropdown\" class=\"bpaac-dropdown-menu\">\n            <ul role=\"listbox\" id=\"bpaac-streetNb-suggestionsList\" class=\"list-unstyled\">\n                <li role=\"option\" *ngFor=\"let option of suggestions; let idx = index\" [ngClass]=\"{'active':(selectedIndex==idx)}\" (mousedown)=\"clickSuggestion($event, option)\"\n                (mouseenter)=\"selectedIndex=idx\" (mouseleave)=\"selectedIndex=-1\">\n                    <span *ngIf=\"option\" [innerHtml]=\"option['not-in-list'] ? emptyResponseText : option.string | highlightSuggestion : wordList\"></span>\n                </li>\n            </ul>\n        </div>\n    </div>\n</div>", styles: [""] }]
+            args: [{ selector: 'bp-street-number', template: "<span *ngIf=\"labelResourceKey\">{{ labelResourceKey | translate}}</span>\n<div class=\"bpaac-dropdown\">\n    <div class=\"bpaac-search-bar\">\n        <div class=\"bpaac-input-width\">\n                <!-- [disabled]=\"isDisabled()\" -->\n            <input type=\"text\" #streetNumberSearchInput class=\"bpaac-input\" \n                [readonly]=\"isReadonly\"\n                 (keyup) = (checkKeyUP($event))\n                [style.background-color]=\"!isParamsComplete() ? 'lightgrey' : ''\" \n                [style.color]=\" getTextColor() \"\n                [disabled]=\"!streetName || streetName.trim().length === 0\" (keydown)=\"checkKeyDown($event)\" \n                (input)=\"onInputChange()\" (click)=\"onInputClick()\"\n                [(ngModel)]=\"searchText\" id=\"streetNumberInputField\" \n                [attr.title]=\"placeHolderText\" \n                [attr.placeholder]=\"placeHolderText\" autocomplete=\"off\"\n                (blur)=\"onBlur($event)\" (focus)=\"onFocus()\" />\n            <div id=\"bpaac-clear-streetNb-button\" *ngIf=\"mayShowClearButton()\" \n                (click)=\"onClearStreetNumberInput(true)\" class=\"bpaac-clear\">\n            </div>\n        </div>\n        <!--<div ng-transclude></div>-->\n        <input id=\"bpaac-streetNb-typeahead\" type=\"text\" disabled autocomplete=\"off\" [(ngModel)]=\"bpTypeAhead\" />\n <!--        <span>addressIsComplete: {{ addressIsComplete }}. </span>\n        <span>addressIsValidated: {{ addressIsValidated }}. </span> -->\n        <span *ngIf=\"addressIsComplete\" class=\"streetNbChekmark\"><span class=\"checkmark\"></span></span>\n    </div>\n    <div [hidden]=\"collapseDropdown\" class=\"bpaac-dropdown-menu-container\" \n        *ngIf=\"(suggestionLevel===SuggestionLevelType.StreetNumber || suggestionLevel===SuggestionLevelType.StreetAndBoxNumber) && suggestions && suggestions.length>0\">\n        <div #streetNumberList [appVisibleSuggestion]=\"visibleSuggesionCount\" \n            id=\"bpaac-streetnumber-dropdown\" class=\"bpaac-dropdown-menu\">\n            <ul role=\"listbox\" id=\"bpaac-streetNb-suggestionsList\" class=\"list-unstyled\">\n                <li role=\"option\" *ngFor=\"let option of suggestions; let idx = index\" [ngClass]=\"{'active':(selectedIndex==idx)}\" (mousedown)=\"clickSuggestion($event, option)\"\n                (mouseenter)=\"selectedIndex=idx\" (mouseleave)=\"selectedIndex=-1\">\n                    <span *ngIf=\"option\" [innerHtml]=\"option['not-in-list'] ? emptyResponseText : option.string | highlightSuggestion : wordList\"></span>\n                </li>\n            </ul>\n        </div>\n    </div>\n</div>", styles: [""] }]
         }], ctorParameters: function () { return [{ type: AddressService }, { type: LocaleService }, { type: i3.TranslateService }, { type: UnicodeService }]; }, propDecorators: { streetNumberSearchInput: [{
                 type: ViewChild,
                 args: ['streetNumberSearchInput', { static: false }]
@@ -4241,6 +4329,21 @@ class BoxNumberComponent {
                 break;
         }
     }
+    checkKeyUP(event) {
+        switch (event.which) {
+            case 8:
+                if (this.searchText.length > 0) {
+                    this.clearInputEventEmitter.emit('PARTIAL_CLEAR_BOX_NUMBER');
+                }
+                else {
+                    this.clearInputEventEmitter.emit('BOX_NUMBER');
+                }
+                break;
+            default:
+                this.clearTypeAhead();
+                break;
+        }
+    }
     clearWidget() {
         this.addressIsValidated = false;
         this.clearSearchText();
@@ -4354,10 +4457,10 @@ class BoxNumberComponent {
     }
 }
 BoxNumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BoxNumberComponent, deps: [{ token: AddressService }, { token: LocaleService }, { token: i3.TranslateService }, { token: UnicodeService }], target: i0.ɵɵFactoryTarget.Component });
-BoxNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: BoxNumberComponent, selector: "bp-box-number", inputs: { prefillData: "prefillData", showDebugMessageToConsole: "showDebugMessageToConsole", labelResourceKey: "labelResourceKey", maxSuggesionCount: "maxSuggesionCount", visibleSuggesionCount: "visibleSuggesionCount", sortCriteria: "sortCriteria", baseUrl: "baseUrl", addressParams: "addressParams", postalCode: "postalCode", locality: "locality", streetName: "streetName", streetNumber: "streetNumber", selectedAddress: "selectedAddress", notInListAllowed: "notInListAllowed", allowNoValidation: "allowNoValidation", validatedByBackend: "validatedByBackend", numberOfExceptions: "numberOfExceptions", inputLang: "inputLang", messageOption: "messageOption", isReadonly: "isReadonly", suggestionLevel: "suggestionLevel" }, outputs: { messageChanged: "messageChanged", addressChanged: "addressChanged", focusEvent: "focusEvent", blurEvent: "blurEvent", textChangeEvent: "textChangeEvent", emptyResponseEvent: "emptyResponseEvent", clearInputEventEmitter: "clearInputEventEmitter", prefillEventEmitter: "prefillEventEmitter", boxNumberChanged: "boxNumberChanged", numberOfExceptionsEmitter: "numberOfExceptionsEmitter" }, viewQueries: [{ propertyName: "boxNumberSearchInput", first: true, predicate: ["boxNumberSearchInput"], descendants: true }, { propertyName: "boxNumberList", first: true, predicate: ["boxNumberList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span *ngIf=\"labelResourceKey\">{{ labelResourceKey | translate}}</span>\n<div class=\"bpaac-dropdown\">\n    <div class=\"bpaac-search-bar\">\n        <div class=\"bpaac-input-width\">\n                <!-- [disabled]=\"isDisabled()\" -->\n            <input type=\"text\" #boxNumberSearchInput class=\"bpaac-input\" \n                [readonly]=\"isReadonly\"\n                [style.background-color]=\"!isParamsComplete() ? 'lightgrey' : ''\" \n                [style.color]=\" getTextColor() \"\n                [disabled]=\"!streetNumber || streetNumber.trim().length === 0\" (keydown)=\"checkKeyDown($event)\" \n                (input)=\"onInputChange()\" (click)=\"onInputClick()\"\n                [(ngModel)]=\"searchText\" id=\"boxNumberInputField\" [attr.title]=\"placeHolderText\" [attr.placeholder]=\"placeHolderText\" autocomplete=\"off\"\n                (blur)=\"onBlur($event)\" (focus)=\"onFocus()\" />\n            <div id=\"bpaac-clear-boxNb-button\" *ngIf=\"mayShowClearButton()\" (click)=\"clearInput(true)\" class=\"bpaac-clear\">\n            </div>\n        </div>\n        <!--<div ng-transclude></div>-->\n        <input id=\"bpaac-boxNb-typeahead\" type=\"text\" disabled autocomplete=\"off\" [(ngModel)]=\"bpTypeAhead\" />\n        <span *ngIf=\"addressIsValidated\" class=\"boxNbChekmark\"><span class=\"checkmark\"></span></span>\n    </div>\n    <div [hidden]=\"collapseDropdown\" class=\"bpaac-dropdown-menu-container\" \n        *ngIf=\"suggestionLevel===SuggestionLevelType.StreetAndBoxNumber &&  suggestions && suggestions.length>0\">\n        <div #boxNumberList [appVisibleSuggestion]=\"visibleSuggesionCount\" id=\"bpaac-box-dropdown\" class=\"bpaac-dropdown-menu\">\n            <ul role=\"listbox\" id=\"bpaac-boxNb-suggestionsList\" class=\"list-unstyled\">\n                <li role=\"option\" *ngFor=\"let option of suggestions; let idx = index\" [ngClass]=\"{'active':(selectedIndex==idx)}\" \n                (mousedown)=\"clickSuggestion($event, option)\"\n                (mouseenter)=\"selectedIndex=idx\" (mouseleave)=\"selectedIndex=-1\">\n                    <span *ngIf=\"option\" [innerHtml]=\"option['not-in-list'] ? emptyResponseText : option.string | highlightSuggestion : wordList\"></span>\n                </li>\n            </ul>\n        </div>\n    </div>\n</div>\n", styles: [""], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleSuggestionDirective, selector: "[appVisibleSuggestion]", inputs: ["appVisibleSuggestion"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i3.TranslatePipe, "highlightSuggestion": HighlightSuggestionPipe } });
+BoxNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: BoxNumberComponent, selector: "bp-box-number", inputs: { prefillData: "prefillData", showDebugMessageToConsole: "showDebugMessageToConsole", labelResourceKey: "labelResourceKey", maxSuggesionCount: "maxSuggesionCount", visibleSuggesionCount: "visibleSuggesionCount", sortCriteria: "sortCriteria", baseUrl: "baseUrl", addressParams: "addressParams", postalCode: "postalCode", locality: "locality", streetName: "streetName", streetNumber: "streetNumber", selectedAddress: "selectedAddress", notInListAllowed: "notInListAllowed", allowNoValidation: "allowNoValidation", validatedByBackend: "validatedByBackend", numberOfExceptions: "numberOfExceptions", inputLang: "inputLang", messageOption: "messageOption", isReadonly: "isReadonly", suggestionLevel: "suggestionLevel" }, outputs: { messageChanged: "messageChanged", addressChanged: "addressChanged", focusEvent: "focusEvent", blurEvent: "blurEvent", textChangeEvent: "textChangeEvent", emptyResponseEvent: "emptyResponseEvent", clearInputEventEmitter: "clearInputEventEmitter", prefillEventEmitter: "prefillEventEmitter", boxNumberChanged: "boxNumberChanged", numberOfExceptionsEmitter: "numberOfExceptionsEmitter" }, viewQueries: [{ propertyName: "boxNumberSearchInput", first: true, predicate: ["boxNumberSearchInput"], descendants: true }, { propertyName: "boxNumberList", first: true, predicate: ["boxNumberList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span *ngIf=\"labelResourceKey\">{{ labelResourceKey | translate}}</span>\n<div class=\"bpaac-dropdown\">\n    <div class=\"bpaac-search-bar\">\n        <div class=\"bpaac-input-width\">\n                <!-- [disabled]=\"isDisabled()\" -->\n            <input type=\"text\" #boxNumberSearchInput class=\"bpaac-input\" \n                [readonly]=\"isReadonly\"\n                 (keyup) = (checkKeyUP($event))\n                [style.background-color]=\"!isParamsComplete() ? 'lightgrey' : ''\" \n                [style.color]=\" getTextColor() \"\n                [disabled]=\"!streetNumber || streetNumber.trim().length === 0\" (keydown)=\"checkKeyDown($event)\" \n                (input)=\"onInputChange()\" (click)=\"onInputClick()\"\n                [(ngModel)]=\"searchText\" id=\"boxNumberInputField\" [attr.title]=\"placeHolderText\" [attr.placeholder]=\"placeHolderText\" autocomplete=\"off\"\n                (blur)=\"onBlur($event)\" (focus)=\"onFocus()\" />\n            <div id=\"bpaac-clear-boxNb-button\" *ngIf=\"mayShowClearButton()\" (click)=\"clearInput(true)\" class=\"bpaac-clear\">\n            </div>\n        </div>\n        <!--<div ng-transclude></div>-->\n        <input id=\"bpaac-boxNb-typeahead\" type=\"text\" disabled autocomplete=\"off\" [(ngModel)]=\"bpTypeAhead\" />\n        <span *ngIf=\"addressIsValidated\" class=\"boxNbChekmark\"><span class=\"checkmark\"></span></span>\n    </div>\n    <div [hidden]=\"collapseDropdown\" class=\"bpaac-dropdown-menu-container\" \n        *ngIf=\"suggestionLevel===SuggestionLevelType.StreetAndBoxNumber &&  suggestions && suggestions.length>0\">\n        <div #boxNumberList [appVisibleSuggestion]=\"visibleSuggesionCount\" id=\"bpaac-box-dropdown\" class=\"bpaac-dropdown-menu\">\n            <ul role=\"listbox\" id=\"bpaac-boxNb-suggestionsList\" class=\"list-unstyled\">\n                <li role=\"option\" *ngFor=\"let option of suggestions; let idx = index\" [ngClass]=\"{'active':(selectedIndex==idx)}\" \n                (mousedown)=\"clickSuggestion($event, option)\"\n                (mouseenter)=\"selectedIndex=idx\" (mouseleave)=\"selectedIndex=-1\">\n                    <span *ngIf=\"option\" [innerHtml]=\"option['not-in-list'] ? emptyResponseText : option.string | highlightSuggestion : wordList\"></span>\n                </li>\n            </ul>\n        </div>\n    </div>\n</div>\n", styles: [""], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: VisibleSuggestionDirective, selector: "[appVisibleSuggestion]", inputs: ["appVisibleSuggestion"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i3.TranslatePipe, "highlightSuggestion": HighlightSuggestionPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BoxNumberComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bp-box-number', template: "<span *ngIf=\"labelResourceKey\">{{ labelResourceKey | translate}}</span>\n<div class=\"bpaac-dropdown\">\n    <div class=\"bpaac-search-bar\">\n        <div class=\"bpaac-input-width\">\n                <!-- [disabled]=\"isDisabled()\" -->\n            <input type=\"text\" #boxNumberSearchInput class=\"bpaac-input\" \n                [readonly]=\"isReadonly\"\n                [style.background-color]=\"!isParamsComplete() ? 'lightgrey' : ''\" \n                [style.color]=\" getTextColor() \"\n                [disabled]=\"!streetNumber || streetNumber.trim().length === 0\" (keydown)=\"checkKeyDown($event)\" \n                (input)=\"onInputChange()\" (click)=\"onInputClick()\"\n                [(ngModel)]=\"searchText\" id=\"boxNumberInputField\" [attr.title]=\"placeHolderText\" [attr.placeholder]=\"placeHolderText\" autocomplete=\"off\"\n                (blur)=\"onBlur($event)\" (focus)=\"onFocus()\" />\n            <div id=\"bpaac-clear-boxNb-button\" *ngIf=\"mayShowClearButton()\" (click)=\"clearInput(true)\" class=\"bpaac-clear\">\n            </div>\n        </div>\n        <!--<div ng-transclude></div>-->\n        <input id=\"bpaac-boxNb-typeahead\" type=\"text\" disabled autocomplete=\"off\" [(ngModel)]=\"bpTypeAhead\" />\n        <span *ngIf=\"addressIsValidated\" class=\"boxNbChekmark\"><span class=\"checkmark\"></span></span>\n    </div>\n    <div [hidden]=\"collapseDropdown\" class=\"bpaac-dropdown-menu-container\" \n        *ngIf=\"suggestionLevel===SuggestionLevelType.StreetAndBoxNumber &&  suggestions && suggestions.length>0\">\n        <div #boxNumberList [appVisibleSuggestion]=\"visibleSuggesionCount\" id=\"bpaac-box-dropdown\" class=\"bpaac-dropdown-menu\">\n            <ul role=\"listbox\" id=\"bpaac-boxNb-suggestionsList\" class=\"list-unstyled\">\n                <li role=\"option\" *ngFor=\"let option of suggestions; let idx = index\" [ngClass]=\"{'active':(selectedIndex==idx)}\" \n                (mousedown)=\"clickSuggestion($event, option)\"\n                (mouseenter)=\"selectedIndex=idx\" (mouseleave)=\"selectedIndex=-1\">\n                    <span *ngIf=\"option\" [innerHtml]=\"option['not-in-list'] ? emptyResponseText : option.string | highlightSuggestion : wordList\"></span>\n                </li>\n            </ul>\n        </div>\n    </div>\n</div>\n", styles: [""] }]
+            args: [{ selector: 'bp-box-number', template: "<span *ngIf=\"labelResourceKey\">{{ labelResourceKey | translate}}</span>\n<div class=\"bpaac-dropdown\">\n    <div class=\"bpaac-search-bar\">\n        <div class=\"bpaac-input-width\">\n                <!-- [disabled]=\"isDisabled()\" -->\n            <input type=\"text\" #boxNumberSearchInput class=\"bpaac-input\" \n                [readonly]=\"isReadonly\"\n                 (keyup) = (checkKeyUP($event))\n                [style.background-color]=\"!isParamsComplete() ? 'lightgrey' : ''\" \n                [style.color]=\" getTextColor() \"\n                [disabled]=\"!streetNumber || streetNumber.trim().length === 0\" (keydown)=\"checkKeyDown($event)\" \n                (input)=\"onInputChange()\" (click)=\"onInputClick()\"\n                [(ngModel)]=\"searchText\" id=\"boxNumberInputField\" [attr.title]=\"placeHolderText\" [attr.placeholder]=\"placeHolderText\" autocomplete=\"off\"\n                (blur)=\"onBlur($event)\" (focus)=\"onFocus()\" />\n            <div id=\"bpaac-clear-boxNb-button\" *ngIf=\"mayShowClearButton()\" (click)=\"clearInput(true)\" class=\"bpaac-clear\">\n            </div>\n        </div>\n        <!--<div ng-transclude></div>-->\n        <input id=\"bpaac-boxNb-typeahead\" type=\"text\" disabled autocomplete=\"off\" [(ngModel)]=\"bpTypeAhead\" />\n        <span *ngIf=\"addressIsValidated\" class=\"boxNbChekmark\"><span class=\"checkmark\"></span></span>\n    </div>\n    <div [hidden]=\"collapseDropdown\" class=\"bpaac-dropdown-menu-container\" \n        *ngIf=\"suggestionLevel===SuggestionLevelType.StreetAndBoxNumber &&  suggestions && suggestions.length>0\">\n        <div #boxNumberList [appVisibleSuggestion]=\"visibleSuggesionCount\" id=\"bpaac-box-dropdown\" class=\"bpaac-dropdown-menu\">\n            <ul role=\"listbox\" id=\"bpaac-boxNb-suggestionsList\" class=\"list-unstyled\">\n                <li role=\"option\" *ngFor=\"let option of suggestions; let idx = index\" [ngClass]=\"{'active':(selectedIndex==idx)}\" \n                (mousedown)=\"clickSuggestion($event, option)\"\n                (mouseenter)=\"selectedIndex=idx\" (mouseleave)=\"selectedIndex=-1\">\n                    <span *ngIf=\"option\" [innerHtml]=\"option['not-in-list'] ? emptyResponseText : option.string | highlightSuggestion : wordList\"></span>\n                </li>\n            </ul>\n        </div>\n    </div>\n</div>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: AddressService }, { type: LocaleService }, { type: i3.TranslateService }, { type: UnicodeService }]; }, propDecorators: { boxNumberSearchInput: [{
                 type: ViewChild,
                 args: ['boxNumberSearchInput', { static: false }]
@@ -4483,7 +4586,7 @@ class LibAddressAutocompleteByComponentComponent {
         this.httpService = httpService;
         this.selectedLanguage = null;
         this.baseUrl = "https://api.mailops.bpost.cloud/roa-info/externalMailingAddressProofingRest/autocomplete/";
-        this.defaultApiKey = 'cyRkKOD73O1DOdgcDLLnsaOiDh6OyOkt3BBT5JU1';
+        this.defaultApiKey = '';
         this.usedLocalityUrl = this.baseUrl + 'locality';
         this.usedStreetUrl = this.baseUrl + 'street';
         this.usedStreetNumberUrl = this.baseUrl + 'streetNumber';
@@ -5125,23 +5228,76 @@ class LibAddressAutocompleteByComponentComponent {
     resetLocality(event) {
         this.postalCode = '';
         this.locality = '';
+        const street = this.selectedAddress?.hasOwnProperty('streetName');
+        const house = this.selectedAddress?.hasOwnProperty('houseNumber');
+        const box = this.selectedAddress?.hasOwnProperty('boxNumber');
         this.quitPrefillMode();
-        this.onClearInputEventEmitter(InputNameType.STREET);
+        if (event) {
+            if (street == true) {
+                this.onClearInputEventEmitter(InputNameType.STREET);
+            }
+            if (house == true) {
+                this.onClearInputEventEmitter(InputNameType.STREET_NUMBER);
+            }
+            if (box == true) {
+                this.onClearInputEventEmitter(InputNameType.BOX_NUMBER);
+            }
+        }
+        if (!event) {
+            if (street == true) {
+                this.onClearInputEventEmitter(InputNameType.STREET);
+            }
+            if (house == true) {
+                this.onClearInputEventEmitter(InputNameType.STREET_NUMBER);
+            }
+            if (box == true) {
+                this.onClearInputEventEmitter(InputNameType.BOX_NUMBER);
+            }
+        }
         this.setAddress(null, 4);
     }
     resetStreet(event) {
         this.street = '';
+        const house = this.selectedAddress?.hasOwnProperty('houseNumber');
+        const box = this.selectedAddress?.hasOwnProperty('boxNumber');
         this.quitPrefillMode();
-        this.onClearInputEventEmitter(InputNameType.STREET_NUMBER);
+        if (event) {
+            if (house == true) {
+                this.onClearInputEventEmitter(InputNameType.STREET_NUMBER);
+            }
+            // this.onClearInputEventEmitter(InputNameType.STREET_NUMBER);
+            if (box == true) {
+                this.onClearInputEventEmitter(InputNameType.BOX_NUMBER);
+            }
+            // this.onClearInputEventEmitter(InputNameType.BOX_NUMBER);
+        }
+        if (!event) {
+            if (house == true) {
+                this.onClearInputEventEmitter(InputNameType.STREET_NUMBER);
+            }
+            // this.onClearInputEventEmitter(InputNameType.STREET_NUMBER);
+            if (box == true) {
+                this.onClearInputEventEmitter(InputNameType.BOX_NUMBER);
+            }
+            // this.onClearInputEventEmitter(InputNameType.BOX_NUMBER);
+        }
         this.autocompleteStreetNb.addressIsComplete = false;
         this.autocompleteStreetNb.streetName = '';
         this.setAddress(null, 3);
     }
     resetStreetNumber(event, resetAddress = false) {
-        // console.log('reset street numner!', event, resetAddress);
+        //  console.log('reset street numner!', event);
+        const box = this.selectedAddress?.hasOwnProperty('boxNumber');
         this.streetNumber = '';
         this.quitPrefillMode();
-        this.onClearInputEventEmitter(InputNameType.BOX_NUMBER);
+        if (event) {
+            if (box == true) {
+                this.onClearInputEventEmitter(InputNameType.BOX_NUMBER);
+            }
+        }
+        if (!event && box == true) {
+            this.onClearInputEventEmitter(InputNameType.BOX_NUMBER);
+        }
         this.autocompleteBoxNb.addressIsComplete = false;
         this.autocompleteBoxNb.streetNumber = '';
         this.setAddress(null, 2);
@@ -5155,13 +5311,13 @@ class LibAddressAutocompleteByComponentComponent {
         // console.log('reset street numner!', event, resetAddress);
         this.boxNumber = '';
         this.quitPrefillMode();
+        // this.onClearInputEventEmitter(InputNameType.BOX_NUMBER);
         this.autocompleteBoxNb.addressIsComplete = false;
-        // this.autocompleteBoxNb.boxNumber = ''
+        this.autocompleteBoxNb.boxNumber = '';
         this.setAddress(null, 1);
-        if (!event) {
-            this.clearInputEventEmitter.emit('CLEAR_BOX_NUMBER');
-        }
-        // this.onClearInputEventEmitter(InputNameType.BOX_NUMBER);
+        // if(!event){
+        //   this.clearInputEventEmitter.emit('CLEAR_BOX_NUMBER')
+        // }
         // $$ 7 this.setAddress(null, 1); // $$ ?????
         /*
         if (resetAddress === true) {
@@ -5706,6 +5862,26 @@ class LibAddressAutocompleteByComponentComponent {
                     this.setAddress(address, ADDRESSLEVEL.STREET_NUMBER);
                     // this.quitPrefillMode();
                 }
+                else {
+                    this.updatePostalCodeLocality(address);
+                    this.updateStreetName(address);
+                    this.updateStreetNumber(address);
+                    this.streetAddress = address;
+                    this.streetNumberAddress = address;
+                    if (address.hasOwnProperty('isComplete') && address.isComplete === true) {
+                        this.autocompleteStreetNb.addressIsComplete = true;
+                        if (addressIsNotInList) {
+                            this.autocompleteBoxNb.streetNumber = address.houseNumber;
+                        }
+                        else {
+                            this.autocompleteBoxNb.streetNumber = '';
+                        }
+                    }
+                    else {
+                        this.autocompleteBoxNb.streetNumber = address.houseNumber;
+                    }
+                    this.autocompleteBoxNb.searchText = '';
+                }
                 /*
                 const boxNumber = this.prefillData.parameters.boxNumber;
                 if ( ! addressIsNotInList && (boxNumber === null || boxNumber === undefined || boxNumber === '') )