feat(maps): refreshed floor plans, expo-hall segment, and location pins

src/app/floor-plan-modal/floor-plan-modal.component.html

@@ -18,9 +18,19 @@
     [draggableImage]="false"
     [limitZoom]="'original image size'"
     backgroundColor="#ffffff">
-    <img
-      [src]="imageSrc"
-      [alt]="altText || title"
-      decoding="async" />
+    <div class="floor-plan-canvas">
+      <img
+        [src]="imageSrc"
+        [alt]="altText || title"
+        decoding="async" />
+      <div *ngIf="hasPin"
+           class="floor-plan-pin"
+           [style.left.%]="pinXPct"
+           [style.top.%]="pinYPct"
+           [attr.aria-label]="pinLabel || 'Location'">
+        <span class="floor-plan-pin-pulse"></span>
+        <span class="floor-plan-pin-dot"></span>
+      </div>
+    </div>
   </pinch-zoom>
 </ion-content>

src/app/floor-plan-modal/floor-plan-modal.component.scss

@@ -8,10 +8,60 @@
   background: #ffffff;
 }
 
-.floor-plan-zoom img {
+.floor-plan-canvas {
+  position: relative;
+  width: 100%;
+  display: block;
+}
+
+.floor-plan-canvas img {
   width: 100%;
   height: auto;
   display: block;
   -webkit-user-drag: none;
   user-select: none;
 }
+
+.floor-plan-pin {
+  position: absolute;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.floor-plan-pin-dot,
+.floor-plan-pin-pulse {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.floor-plan-pin-dot {
+  width: 10px;
+  height: 10px;
+  background: #DD04D2;
+  border: 1.5px solid #ffffff;
+  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.45);
+}
+
+.floor-plan-pin-pulse {
+  width: 10px;
+  height: 10px;
+  background: #DD04D2;
+  opacity: 0.5;
+  animation: floor-plan-pin-pulse 1.8s ease-out infinite;
+}
+
+@keyframes floor-plan-pin-pulse {
+  0% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0.45;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(3);
+    opacity: 0;
+  }
+}

src/app/floor-plan-modal/floor-plan-modal.component.ts

@@ -10,10 +10,17 @@ export class FloorPlanModalComponent {
   @Input() title!: string;
   @Input() imageSrc!: string;
   @Input() altText?: string;
+  @Input() pinXPct?: number;
+  @Input() pinYPct?: number;
+  @Input() pinLabel?: string;
 
   constructor(private modalCtrl: ModalController) {}
 
   close() {
     this.modalCtrl.dismiss();
   }
+
+  get hasPin(): boolean {
+    return this.pinXPct != null && this.pinYPct != null;
+  }
 }

src/app/floor-plan-modal/floor-plan-modal.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { PinchZoomModule } from '@ciag/ngx-pinch-zoom';
+
+import { FloorPlanModalComponent } from './floor-plan-modal.component';
+
+@NgModule({
+  imports: [CommonModule, IonicModule, PinchZoomModule],
+  declarations: [FloorPlanModalComponent],
+  exports: [FloorPlanModalComponent],
+})
+export class FloorPlanModalModule {}

src/app/location-map/location-map.component.html

@@ -0,0 +1,24 @@
+<button
+  type="button"
+  class="location-map"
+  (click)="openFull()"
+  [attr.aria-label]="'Show ' + label + ' on the ' + floorTitle + ' floor plan'">
+  <div class="location-map-thumb">
+    <img [src]="thumbSrc" [alt]="floorTitle + ' floor plan'" decoding="async" />
+    <span class="location-map-pin"
+          [style.left.%]="pinXPct"
+          [style.top.%]="pinYPct"
+          aria-hidden="true">
+      <span class="location-map-pin-pulse"></span>
+      <span class="location-map-pin-dot"></span>
+    </span>
+    <div class="location-map-zoom-hint" aria-hidden="true">
+      <ion-icon name="expand-outline"></ion-icon>
+    </div>
+  </div>
+  <div class="location-map-meta">
+    <div class="location-map-label">{{ label }}</div>
+    <div class="location-map-sublabel" *ngIf="sublabel">{{ sublabel }}</div>
+    <div class="location-map-floor">{{ floorTitle }}</div>
+  </div>
+</button>

src/app/location-map/location-map.component.scss

@@ -0,0 +1,123 @@
+.location-map {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background: var(--ion-card-background, #ffffff);
+  border: 1px solid var(--ion-color-step-150, rgba(0, 0, 0, 0.08));
+  border-radius: 14px;
+  padding: 0;
+  margin: 0;
+  text-align: left;
+  cursor: pointer;
+  overflow: hidden;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.location-map:active {
+  transform: scale(0.985);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.location-map-thumb {
+  position: relative;
+  flex: 0 0 144px;
+  width: 144px;
+  background: #ffffff;
+  border-right: 1px solid var(--ion-color-step-150, rgba(0, 0, 0, 0.08));
+  overflow: hidden;
+  font-size: 0;
+}
+
+.location-map-thumb img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.location-map-pin {
+  position: absolute;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.location-map-pin-dot,
+.location-map-pin-pulse {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.location-map-pin-dot {
+  width: 8px;
+  height: 8px;
+  background: #DD04D2;
+  border: 1.5px solid #ffffff;
+  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.4);
+}
+
+.location-map-pin-pulse {
+  width: 8px;
+  height: 8px;
+  background: #DD04D2;
+  opacity: 0.55;
+  animation: location-map-pin-pulse 1.8s ease-out infinite;
+}
+
+@keyframes location-map-pin-pulse {
+  0% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0.5;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(2.6);
+    opacity: 0;
+  }
+}
+
+.location-map-zoom-hint {
+  position: absolute;
+  bottom: 6px;
+  right: 6px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.55);
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+
+.location-map-meta {
+  flex: 1 1 auto;
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+}
+
+.location-map-label {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--ion-text-color, #1a1a1a);
+  line-height: 1.25;
+}
+
+.location-map-sublabel {
+  font-size: 13px;
+  color: var(--ion-color-step-650, #555);
+  margin-top: 2px;
+}
+
+.location-map-floor {
+  font-size: 12px;
+  color: var(--ion-color-medium, #92949c);
+  margin-top: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}

src/app/location-map/location-map.component.ts

@@ -0,0 +1,36 @@
+import { Component, Input } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+
+import { FloorPlanModalComponent } from '../floor-plan-modal/floor-plan-modal.component';
+
+@Component({
+  selector: 'app-location-map',
+  templateUrl: './location-map.component.html',
+  styleUrls: ['./location-map.component.scss'],
+})
+export class LocationMapComponent {
+  @Input() label!: string;
+  @Input() sublabel?: string;
+  @Input() floorTitle!: string;
+  @Input() thumbSrc!: string;
+  @Input() fullSrc!: string;
+  @Input() pinXPct!: number;
+  @Input() pinYPct!: number;
+
+  constructor(private modalCtrl: ModalController) {}
+
+  async openFull() {
+    const modal = await this.modalCtrl.create({
+      component: FloorPlanModalComponent,
+      componentProps: {
+        title: this.floorTitle,
+        imageSrc: this.fullSrc,
+        altText: `${this.floorTitle} floor plan with ${this.label} highlighted`,
+        pinXPct: this.pinXPct,
+        pinYPct: this.pinYPct,
+        pinLabel: this.label,
+      },
+    });
+    await modal.present();
+  }
+}

src/app/location-map/location-map.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+
+import { FloorPlanModalModule } from '../floor-plan-modal/floor-plan-modal.module';
+
+import { LocationMapComponent } from './location-map.component';
+
+@NgModule({
+  imports: [CommonModule, IonicModule, FloorPlanModalModule],
+  declarations: [LocationMapComponent],
+  exports: [LocationMapComponent],
+})
+export class LocationMapModule {}