ecabs-components 1.1.81 → 1.1.83

package/fesm2022/ecabs-components.mjs

@@ -952,7 +952,8 @@ class EcabsDigitsOnlyDirective {
         let result = input.replace(new RegExp(`[^${allowed.join('')}]`, 'g'), '');
         if (this.allowHyphen) {
             const isNegative = result.startsWith(this.minus);
-            result = (isNegative ? this.minus : '') + result.split(this.minus).join('');
+            result =
+                (isNegative ? this.minus : '') + result.split(this.minus).join('');
         }
         if (this.decimal) {
             result = this.keepFirstSeparator(result, separator);
@@ -973,7 +974,10 @@ class EcabsDigitsOnlyDirective {
         if (firstHyphen !== -1) {
             body =
                 body.slice(0, firstHyphen + 1) +
-                    body.slice(firstHyphen + 1).split(this.minus).join('');
+                    body
+                        .slice(firstHyphen + 1)
+                        .split(this.minus)
+                        .join('');
         }
         if (this.decimal) {
             body = body
@@ -990,7 +994,10 @@ class EcabsDigitsOnlyDirective {
             return value;
         }
         return (value.slice(0, firstSeparator + 1) +
-            value.slice(firstSeparator + 1).split(separator).join(''));
+            value
+                .slice(firstSeparator + 1)
+                .split(separator)
+                .join(''));
     }
     applyMaxLength(result) {
         const maxLength = this.inputElement.maxLength;
@@ -1040,7 +1047,7 @@ class EcabsDigitsOnlyDirective {
         return /\d/.test(before);
     }
     isPartialRange(value) {
-        return !!this.allowRange && !!this.rangeRegex && this.rangeRegex.test(value);
+        return (!!this.allowRange && !!this.rangeRegex && this.rangeRegex.test(value));
     }
     isPartialNegative(value) {
         if (!this.allowHyphen || !value.startsWith(this.minus)) {
@@ -1210,10 +1217,8 @@ class EcabsInputComponent extends EcabsElementBaseComponent {
         this.updateDisabledState();
         this.trackAutoResize();
     }
-    onChange = () => {
-    };
-    onTouch = () => {
-    };
+    onChange = () => { };
+    onTouch = () => { };
     writeValue(value) {
         this.value = value;
         this.trackAutoResize();
@@ -8185,7 +8190,7 @@ class EcabsPlaceAutocompleteV2Component extends EcabsElementBaseComponent {
     matCustomInput;
     showDeleteItem = false;
     set waypointsHistory(value) {
-        this.waypointsHistory$.next((value ?? []).filter((suggestion) => !!suggestion?.place_id));
+        this.waypointsHistory$.next((value ?? []).filter((suggestion) => !!suggestion?.place_id || !!this.toPlaceFallback(suggestion)));
     }
     showSuffix = false;
     countryCode = 'MT';
@@ -8245,10 +8250,10 @@ class EcabsPlaceAutocompleteV2Component extends EcabsElementBaseComponent {
                 place_name: query,
             });
         });
-        const googleSuggestions$ = combineLatest([
-            this.isFocused$,
-            this.value$.pipe(debounceTime(this.debounceMs), distinctUntilChanged()),
-        ]).pipe(switchMap(([isFocused, value]) => this.autocompleteService && isFocused && value
+        // Keyed on value$ alone so blur/refocus cannot re-fire a billable
+        // prediction request for an unchanged query; focus is read imperatively at
+        // request time so programmatic writeValue never triggers a request either.
+        const googleSuggestions$ = this.value$.pipe(debounceTime(this.debounceMs), distinctUntilChanged(), switchMap((value) => this.autocompleteService && value && this.isFocused$.value
             ? this.getPlacesResults(value)
             : of(this.emptySuggestions)), startWith(this.emptySuggestions));
         this.waypointSuggestions$ = combineLatest([
@@ -8266,10 +8271,8 @@ class EcabsPlaceAutocompleteV2Component extends EcabsElementBaseComponent {
             this.selectedIndex = cappedSuggestions?.length ? 0 : -1;
         }));
     }
-    onChange = () => {
-    };
-    onTouch = () => {
-    };
+    onChange = () => { };
+    onTouch = () => { };
     getPlacesResults(query) {
         return new Observable((observer) => {
             this.autocompleteService.getPlacePredictions({
@@ -8309,13 +8312,55 @@ class EcabsPlaceAutocompleteV2Component extends EcabsElementBaseComponent {
             return;
         }
         const { additional_info, place_id } = suggestion ?? {};
-        if (!place_id) {
+        if (place_id) {
+            this.isResolvingPlace = true;
+            this.value = additional_info;
+            this.isFocused$.next(false);
+            this.resolveByPlaceId(place_id, additional_info);
             return;
         }
-        this.isResolvingPlace = true;
-        this.value = additional_info;
-        this.isFocused$.next(false);
-        this.resolveByPlaceId(place_id, additional_info);
+        const fallbackPlace = this.toPlaceFallback(suggestion);
+        if (fallbackPlace) {
+            console.warn('Waypoint history fallback used: no place_id on suggestion', {
+                suggestion_id: suggestion?.suggestion_id,
+                geo_key: suggestion?.geo_key,
+            });
+            this.value = additional_info;
+            this.isFocused$.next(false);
+            this.placeResult.emit({ place: fallbackPlace, text: additional_info });
+            // Fallback selection can happen before the Google Maps script loads, and
+            // a fresh session token needs the google global.
+            if (this.autocompleteService) {
+                this.resetSessionToken();
+            }
+        }
+    }
+    toLatLng(suggestion) {
+        const { location } = suggestion ?? {};
+        return {
+            lat: Number(location?.latitude ?? location?.lat),
+            lng: Number(location?.longitude ?? location?.lng),
+        };
+    }
+    toPlaceFallback(suggestion) {
+        const { additional_info, locality } = suggestion ?? {};
+        const { lat, lng } = this.toLatLng(suggestion);
+        if (Number.isNaN(lat) ||
+            Number.isNaN(lng) ||
+            !additional_info ||
+            !locality) {
+            return null;
+        }
+        return {
+            // Duck-typed LatLng: history can arrive from the store before the Google
+            // Maps script loads, so this must not touch the google global.
+            geometry: {
+                location: { lat: () => lat, lng: () => lng },
+            },
+            address_components: [
+                { types: ['locality'], long_name: locality, short_name: locality },
+            ],
+        };
     }
     resolveByPlaceId(placeId, text) {
         this.placesService.getDetails({
@@ -8411,7 +8456,7 @@ class EcabsPlaceAutocompleteV2Component extends EcabsElementBaseComponent {
                 useExisting: EcabsPlaceAutocompleteV2Component,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "matCustomInput", first: true, predicate: ["matCustomAutocompleteInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"autocomplete-ui w-full\">\n    <section class=\"form-field__input--wrapper w-full\">\n      <input #matCustomAutocompleteInput\n             cdkOverlayOrigin\n             #trigger=\"cdkOverlayOrigin\"\n             [placeholder]=\"placeholder\"\n             [disabled]=\"disabled\"\n             [(ngModel)]=\"value\"\n             [id]=\"name\"\n             class=\"form-field__input w-full\"\n             autocorrect=\"off\"\n             autocapitalize=\"off\"\n             spellcheck=\"off\"\n             (focus)=\"onFocus()\"\n             (keydown)=\"onKeyDown($event)\"\n             (ngModelChange)=\"onUserInput($event)\"\n             (blur)=\"onBlur()\"\n      />\n      <div *ngIf=\"showSuffix\"\n           class=\"form-field__input--suffix\">\n        <mat-icon *ngIf=\"showDeleteItem\"\n                  class=\"suffix cursor-pointer delete-button\"\n                  (keydown.enter)=\"delete()\"\n                  (click)=\"delete()\">\n          delete\n        </mat-icon>\n        <mat-icon *ngIf=\"!showDeleteItem && value\"\n                  class=\"suffix cursor-pointer\"\n                  (keydown.enter)=\"clear()\"\n                  (click)=\"clear()\">\n          close\n        </mat-icon>\n      </div>\n    </section>\n    <!-- Custom dropdown -->\n    <ng-template cdkConnectedOverlay\n                 [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\n                 [cdkConnectedOverlayFlexibleDimensions]=\"false\"\n                 [cdkConnectedOverlayOrigin]=\"trigger\"\n                 [cdkConnectedOverlayOpen]=\"isFocused$ | async\">\n      <ul class=\"autocomplete-ui__container\">\n        <li *ngFor=\"let suggestion of waypointSuggestions$ | async; let i = index; trackBy: trackBySuggestion\"\n            class=\"autocomplete-ui--item flex items-center justify-between hover:bg-gray-100\"\n            [class.active]=\"i === selectedIndex\"\n            (mousedown)=\"onSelectSuggestion(suggestion)\">\n          <ng-container *ngIf=\"!suggestion?.prediction_term; else purePlaceResultTpl\">\n            <div class=\"w-full truncate\">\n              {{ suggestion?.additional_info }}\n            </div>\n            <mat-icon svgIcon=\"ph-regular:clock-counter\"\n                      class=\"w-5 h-5 text-xl text-gray-400 hover:!text-gray-400\">\n            </mat-icon>\n          </ng-container>\n\n          <ng-template #purePlaceResultTpl>\n            <ul class=\"w-full flex items-center gap-x-1 leading-0 overflow-hidden whitespace-nowrap\">\n              <li>\n                {{ suggestion?.prediction_term?.[0]?.value }}\n              </li>\n              <li *ngIf=\"suggestion?.prediction_term?.[1]?.value\"\n                  class=\"text-xs text-gray-600 truncate\">\n                {{ suggestion?.prediction_term?.[1]?.value | separatorAppend: suggestion?.prediction_term?.[2]?.value }}\n              </li>\n              <li *ngIf=\"suggestion?.prediction_term?.[2]?.value\"\n                  class=\"text-xs text-gray-600 font-semibold truncate\">\n                {{ suggestion?.prediction_term?.[2]?.value }}\n              </li>\n            </ul>\n          </ng-template>\n        </li>\n      </ul>\n    </ng-template>\n  </div>\n</ecabs-element-wrapper>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400)}mat-form-field{margin-bottom:0!important}.delete-button{color:var(--color-error)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SeparatorAppendPipe, name: "separatorAppend" }] });
+        ], viewQueries: [{ propertyName: "matCustomInput", first: true, predicate: ["matCustomAutocompleteInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"autocomplete-ui w-full\">\r\n    <section class=\"form-field__input--wrapper w-full\">\r\n      <input #matCustomAutocompleteInput\r\n             cdkOverlayOrigin\r\n             #trigger=\"cdkOverlayOrigin\"\r\n             [placeholder]=\"placeholder\"\r\n             [disabled]=\"disabled\"\r\n             [(ngModel)]=\"value\"\r\n             [id]=\"name\"\r\n             class=\"form-field__input w-full\"\r\n             autocomplete=\"off\"\r\n             autocorrect=\"off\"\r\n             autocapitalize=\"off\"\r\n             spellcheck=\"off\"\r\n             (focus)=\"onFocus()\"\r\n             (keydown)=\"onKeyDown($event)\"\r\n             (ngModelChange)=\"onUserInput($event)\"\r\n             (blur)=\"onBlur()\"\r\n      />\r\n      <div *ngIf=\"showSuffix\"\r\n           class=\"form-field__input--suffix\">\r\n        <mat-icon *ngIf=\"showDeleteItem\"\r\n                  class=\"suffix cursor-pointer delete-button\"\r\n                  (keydown.enter)=\"delete()\"\r\n                  (click)=\"delete()\">\r\n          delete\r\n        </mat-icon>\r\n        <mat-icon *ngIf=\"!showDeleteItem && value\"\r\n                  class=\"suffix cursor-pointer\"\r\n                  (keydown.enter)=\"clear()\"\r\n                  (click)=\"clear()\">\r\n          close\r\n        </mat-icon>\r\n      </div>\r\n    </section>\r\n    <!-- Custom dropdown -->\r\n    <ng-template cdkConnectedOverlay\r\n                 [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\r\n                 [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n                 [cdkConnectedOverlayOrigin]=\"trigger\"\r\n                 [cdkConnectedOverlayOpen]=\"isFocused$ | async\">\r\n      <ul class=\"autocomplete-ui__container\">\r\n        <li *ngFor=\"let suggestion of waypointSuggestions$ | async; let i = index; trackBy: trackBySuggestion\"\r\n            class=\"autocomplete-ui--item flex items-center justify-between hover:bg-gray-100\"\r\n            [class.active]=\"i === selectedIndex\"\r\n            (mousedown)=\"onSelectSuggestion(suggestion)\">\r\n          <ng-container *ngIf=\"!suggestion?.prediction_term; else purePlaceResultTpl\">\r\n            <div class=\"w-full truncate\">\r\n              {{ suggestion?.additional_info }}\r\n            </div>\r\n            <mat-icon svgIcon=\"ph-regular:clock-counter\"\r\n                      class=\"w-5 h-5 text-xl text-gray-400 hover:!text-gray-400\">\r\n            </mat-icon>\r\n          </ng-container>\r\n\r\n          <ng-template #purePlaceResultTpl>\r\n            <ul class=\"w-full flex items-center gap-x-1 leading-0 overflow-hidden whitespace-nowrap\">\r\n              <li>\r\n                {{ suggestion?.prediction_term?.[0]?.value }}\r\n              </li>\r\n              <li *ngIf=\"suggestion?.prediction_term?.[1]?.value\"\r\n                  class=\"text-xs text-gray-600 truncate\">\r\n                {{ suggestion?.prediction_term?.[1]?.value | separatorAppend: suggestion?.prediction_term?.[2]?.value }}\r\n              </li>\r\n              <li *ngIf=\"suggestion?.prediction_term?.[2]?.value\"\r\n                  class=\"text-xs text-gray-600 font-semibold truncate\">\r\n                {{ suggestion?.prediction_term?.[2]?.value }}\r\n              </li>\r\n            </ul>\r\n          </ng-template>\r\n        </li>\r\n      </ul>\r\n    </ng-template>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400)}mat-form-field{margin-bottom:0!important}.delete-button{color:var(--color-error)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SeparatorAppendPipe, name: "separatorAppend" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsPlaceAutocompleteV2Component, decorators: [{
             type: Component,
@@ -8421,7 +8466,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: EcabsPlaceAutocompleteV2Component,
                             multi: true,
                         },
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"autocomplete-ui w-full\">\n    <section class=\"form-field__input--wrapper w-full\">\n      <input #matCustomAutocompleteInput\n             cdkOverlayOrigin\n             #trigger=\"cdkOverlayOrigin\"\n             [placeholder]=\"placeholder\"\n             [disabled]=\"disabled\"\n             [(ngModel)]=\"value\"\n             [id]=\"name\"\n             class=\"form-field__input w-full\"\n             autocorrect=\"off\"\n             autocapitalize=\"off\"\n             spellcheck=\"off\"\n             (focus)=\"onFocus()\"\n             (keydown)=\"onKeyDown($event)\"\n             (ngModelChange)=\"onUserInput($event)\"\n             (blur)=\"onBlur()\"\n      />\n      <div *ngIf=\"showSuffix\"\n           class=\"form-field__input--suffix\">\n        <mat-icon *ngIf=\"showDeleteItem\"\n                  class=\"suffix cursor-pointer delete-button\"\n                  (keydown.enter)=\"delete()\"\n                  (click)=\"delete()\">\n          delete\n        </mat-icon>\n        <mat-icon *ngIf=\"!showDeleteItem && value\"\n                  class=\"suffix cursor-pointer\"\n                  (keydown.enter)=\"clear()\"\n                  (click)=\"clear()\">\n          close\n        </mat-icon>\n      </div>\n    </section>\n    <!-- Custom dropdown -->\n    <ng-template cdkConnectedOverlay\n                 [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\n                 [cdkConnectedOverlayFlexibleDimensions]=\"false\"\n                 [cdkConnectedOverlayOrigin]=\"trigger\"\n                 [cdkConnectedOverlayOpen]=\"isFocused$ | async\">\n      <ul class=\"autocomplete-ui__container\">\n        <li *ngFor=\"let suggestion of waypointSuggestions$ | async; let i = index; trackBy: trackBySuggestion\"\n            class=\"autocomplete-ui--item flex items-center justify-between hover:bg-gray-100\"\n            [class.active]=\"i === selectedIndex\"\n            (mousedown)=\"onSelectSuggestion(suggestion)\">\n          <ng-container *ngIf=\"!suggestion?.prediction_term; else purePlaceResultTpl\">\n            <div class=\"w-full truncate\">\n              {{ suggestion?.additional_info }}\n            </div>\n            <mat-icon svgIcon=\"ph-regular:clock-counter\"\n                      class=\"w-5 h-5 text-xl text-gray-400 hover:!text-gray-400\">\n            </mat-icon>\n          </ng-container>\n\n          <ng-template #purePlaceResultTpl>\n            <ul class=\"w-full flex items-center gap-x-1 leading-0 overflow-hidden whitespace-nowrap\">\n              <li>\n                {{ suggestion?.prediction_term?.[0]?.value }}\n              </li>\n              <li *ngIf=\"suggestion?.prediction_term?.[1]?.value\"\n                  class=\"text-xs text-gray-600 truncate\">\n                {{ suggestion?.prediction_term?.[1]?.value | separatorAppend: suggestion?.prediction_term?.[2]?.value }}\n              </li>\n              <li *ngIf=\"suggestion?.prediction_term?.[2]?.value\"\n                  class=\"text-xs text-gray-600 font-semibold truncate\">\n                {{ suggestion?.prediction_term?.[2]?.value }}\n              </li>\n            </ul>\n          </ng-template>\n        </li>\n      </ul>\n    </ng-template>\n  </div>\n</ecabs-element-wrapper>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400)}mat-form-field{margin-bottom:0!important}.delete-button{color:var(--color-error)}\n"] }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"autocomplete-ui w-full\">\r\n    <section class=\"form-field__input--wrapper w-full\">\r\n      <input #matCustomAutocompleteInput\r\n             cdkOverlayOrigin\r\n             #trigger=\"cdkOverlayOrigin\"\r\n             [placeholder]=\"placeholder\"\r\n             [disabled]=\"disabled\"\r\n             [(ngModel)]=\"value\"\r\n             [id]=\"name\"\r\n             class=\"form-field__input w-full\"\r\n             autocomplete=\"off\"\r\n             autocorrect=\"off\"\r\n             autocapitalize=\"off\"\r\n             spellcheck=\"off\"\r\n             (focus)=\"onFocus()\"\r\n             (keydown)=\"onKeyDown($event)\"\r\n             (ngModelChange)=\"onUserInput($event)\"\r\n             (blur)=\"onBlur()\"\r\n      />\r\n      <div *ngIf=\"showSuffix\"\r\n           class=\"form-field__input--suffix\">\r\n        <mat-icon *ngIf=\"showDeleteItem\"\r\n                  class=\"suffix cursor-pointer delete-button\"\r\n                  (keydown.enter)=\"delete()\"\r\n                  (click)=\"delete()\">\r\n          delete\r\n        </mat-icon>\r\n        <mat-icon *ngIf=\"!showDeleteItem && value\"\r\n                  class=\"suffix cursor-pointer\"\r\n                  (keydown.enter)=\"clear()\"\r\n                  (click)=\"clear()\">\r\n          close\r\n        </mat-icon>\r\n      </div>\r\n    </section>\r\n    <!-- Custom dropdown -->\r\n    <ng-template cdkConnectedOverlay\r\n                 [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\r\n                 [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n                 [cdkConnectedOverlayOrigin]=\"trigger\"\r\n                 [cdkConnectedOverlayOpen]=\"isFocused$ | async\">\r\n      <ul class=\"autocomplete-ui__container\">\r\n        <li *ngFor=\"let suggestion of waypointSuggestions$ | async; let i = index; trackBy: trackBySuggestion\"\r\n            class=\"autocomplete-ui--item flex items-center justify-between hover:bg-gray-100\"\r\n            [class.active]=\"i === selectedIndex\"\r\n            (mousedown)=\"onSelectSuggestion(suggestion)\">\r\n          <ng-container *ngIf=\"!suggestion?.prediction_term; else purePlaceResultTpl\">\r\n            <div class=\"w-full truncate\">\r\n              {{ suggestion?.additional_info }}\r\n            </div>\r\n            <mat-icon svgIcon=\"ph-regular:clock-counter\"\r\n                      class=\"w-5 h-5 text-xl text-gray-400 hover:!text-gray-400\">\r\n            </mat-icon>\r\n          </ng-container>\r\n\r\n          <ng-template #purePlaceResultTpl>\r\n            <ul class=\"w-full flex items-center gap-x-1 leading-0 overflow-hidden whitespace-nowrap\">\r\n              <li>\r\n                {{ suggestion?.prediction_term?.[0]?.value }}\r\n              </li>\r\n              <li *ngIf=\"suggestion?.prediction_term?.[1]?.value\"\r\n                  class=\"text-xs text-gray-600 truncate\">\r\n                {{ suggestion?.prediction_term?.[1]?.value | separatorAppend: suggestion?.prediction_term?.[2]?.value }}\r\n              </li>\r\n              <li *ngIf=\"suggestion?.prediction_term?.[2]?.value\"\r\n                  class=\"text-xs text-gray-600 font-semibold truncate\">\r\n                {{ suggestion?.prediction_term?.[2]?.value }}\r\n              </li>\r\n            </ul>\r\n          </ng-template>\r\n        </li>\r\n      </ul>\r\n    </ng-template>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400)}mat-form-field{margin-bottom:0!important}.delete-button{color:var(--color-error)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { matCustomInput: [{
                 type: ViewChild,
                 args: ['matCustomAutocompleteInput', { static: false }]