refactor: update to ionic v6

src/app/modules/map/item/map-item.component.html

@@ -1,9 +1,19 @@
 <ion-card class="compact">
   <ion-card-header>
     <stapps-data-list-item
-      [item]="item"
-      (click)="showMore()"
+      [item]="$any(item)"
+      id="show-more"
     ></stapps-data-list-item>
+    <ion-modal
+      trigger="show-more"
+      [presentingElement]="routerOutlet.nativeEl"
+      swipeToClose="true"
+    >
+      <ng-template>
+        <app-map-single-modal [item]="item" style="height: 100%">
+        </app-map-single-modal>
+      </ng-template>
+    </ion-modal>
     <stapps-skeleton-list-item *ngIf="!item"></stapps-skeleton-list-item>
   </ion-card-header>
   <ion-card-content>
@@ -12,15 +22,27 @@
         <ion-col size="7">
           <ion-note>
             <span *ngIf="item.address as address">
-              <span *ngIf="item.inPlace">{{ item.inPlace.name }},</span>
+              <span *ngIf="$any(item).inPlace"
+                >{{ $any(item).inPlace.name }},</span
+              >
               {{ address.streetAddress }}, {{ address.addressLocality }}
             </span>
           </ion-note>
         </ion-col>
         <ion-col size="5">
-          <ion-button size="small" (click)="showMore()"
+          <ion-button size="small" id="show-more-button"
             >More&nbsp;<ion-icon name="information-circle"></ion-icon
           ></ion-button>
+          <ion-modal
+            trigger="show-more-button"
+            swipeToClose="true"
+            [presentingElement]="routerOutlet.nativeEl"
+          >
+            <ng-template>
+              <app-map-single-modal [item]="item" style="height: 100%">
+              </app-map-single-modal>
+            </ng-template>
+          </ion-modal>
         </ion-col>
       </ion-row>
     </ion-grid>