@3ddv/software-division-components 1.4.1 → 1.4.2

package/projects/software-division-components/src/dvm/popover/popover.stories.ts

@@ -0,0 +1,873 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { applicationConfig, moduleMetadata } from '@storybook/angular';
+import { provideHttpClient } from '@angular/common/http';
+import { of } from 'rxjs';
+import { PopoverComponent } from './popover.component';
+import { PopoverService, type PopoverContentProjection } from './popover.service';
+import { AppNodes, SeatPopoverData, SectionPopoverData, IThumbnailProvider } from './types';
+import { Component, inject, input, signal } from '@angular/core';
+import { CONFIGURATION_SERVICE, DVM_FORMATTER, DVM_SERVICE, THUMBNAIL_PROVIDER } from './popover.config';
+import type { IConfigurationService, IDvmFormatter, IDvmService } from './popover.config';
+import type { MapViewerNode } from '@3ddv/dvm-internal';
+import { SeatPopoverComponent } from './seat-popover/seat-popover.component';
+import { SectionPopoverComponent } from './section-popover/section-popover.component';
+
+// Mock services
+const mockConfigurationService: IConfigurationService = {
+  configuration: {
+    dvmData: {
+      venueId: 'venue-123',
+    },
+  },
+};
+
+const mockDvmFormatter: IDvmFormatter = {
+  transform: (value: string) => {
+    // Simulate formatting logic - split by dashes and spaces
+    return value ? value.replace(/-/g, ' ').toUpperCase() : '';
+  },
+};
+
+const mockViewer3dService = {
+  isInitialized: () => true,
+  getThumbnail: () => of('https://via.placeholder.com/275x124/1a1a1a/ffffff?text=Thumbnail'),
+};
+
+const mockDvmService: IDvmService = {
+  viewer3dService: mockViewer3dService as any,
+  viewerService: mockViewer3dService as any,
+};
+
+const mockThumbnailProvider: IThumbnailProvider = {
+  getThumbnail: (nodeId: string) => of(`https://via.placeholder.com/275x124/1a1a1a/ffffff?text=Thumbnail+${nodeId}`),
+};
+
+// Mock node data
+const createMockNode = (id: string, type: AppNodes): MapViewerNode =>
+  ({
+    id,
+    type,
+    // Add other required properties as needed
+  }) as MapViewerNode;
+
+// Wrapper component for service injection
+@Component({
+  selector: 'storybook-wrapper',
+  template: `
+    <div
+      style="padding: 2rem; background: #f5f5f5; min-height: 400px; display: flex; align-items: center; justify-content: center; position: relative;">
+      <div style="text-align: center;">
+        <p style="margin-bottom: 1rem; color: #666;">
+          Click the button to create a popover with service-based content projection
+        </p>
+        <button
+          (click)="createPopoverWithContent()"
+          style="background: #007bff; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer;">
+          Create Service Popover
+        </button>
+      </div>
+    </div>
+  `,
+  standalone: true,
+  imports: [],
+})
+class StorybookWrapperComponent {
+  private readonly popoverService = inject(PopoverService);
+
+  createPopoverWithContent(): void {
+    const referenceElement = document.createElement('div');
+    referenceElement.style.position = 'absolute';
+    referenceElement.style.top = '50%';
+    referenceElement.style.left = '50%';
+    referenceElement.style.width = '20px';
+    referenceElement.style.height = '20px';
+    referenceElement.style.background = 'red';
+    document.body.appendChild(referenceElement);
+
+    const contentProjection: PopoverContentProjection = {
+      thumbnail:
+        '<div style="width: 100%; height: 124px; background: linear-gradient(45deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">SERVICE THUMBNAIL</div>',
+      content:
+        '<div style="text-align: center; padding: 0.5rem;"><h4 style="color: #fff; margin: 0 0 0.5rem 0; font-size: 0.875rem;">SERVICE CONTENT</h4><p style="color: #ccc; margin: 0; font-size: 0.75rem;">Created via PopoverService</p></div>',
+      price:
+        '<div style="text-align: center; padding: 0.5rem;"><span style="color: #f39c12; font-size: 0.75rem; font-weight: bold;">SERVICE PRICE</span><div style="color: #fff; font-size: 1rem; font-weight: bold;">$199.99</div></div>',
+    };
+
+    const mockNode = createMockNode('section-service-row-3-seat-20', AppNodes.Seat);
+
+    // Use the same providers as defined in the story decorators
+    const customProviders = [
+      { provide: CONFIGURATION_SERVICE, useValue: mockConfigurationService },
+      { provide: DVM_FORMATTER, useValue: mockDvmFormatter },
+      { provide: DVM_SERVICE, useValue: mockDvmService },
+    ];
+
+    const popoverInstance = this.popoverService.createPopoverComponentWithContent(
+      'service-popover',
+      referenceElement,
+      PopoverComponent,
+      { node: mockNode }, // Wrap mockNode with signal()
+      contentProjection,
+      {}, // default options
+      { providers: customProviders }
+    );
+
+    // Clean up after 5 seconds
+    setTimeout(() => {
+      this.popoverService.destroyPopover('service-popover');
+      document.body.removeChild(referenceElement);
+    }, 5000);
+  }
+}
+
+const meta: Meta<PopoverComponent> = {
+  title: 'Dvm/Popover',
+  component: PopoverComponent,
+  id: 'Popover',
+  decorators: [
+    moduleMetadata({
+      imports: [PopoverComponent, StorybookWrapperComponent],
+      providers: [
+        { provide: CONFIGURATION_SERVICE, useValue: mockConfigurationService },
+        { provide: DVM_FORMATTER, useValue: mockDvmFormatter },
+        { provide: DVM_SERVICE, useValue: mockDvmService },
+      ],
+    }),
+    applicationConfig({
+      providers: [provideHttpClient()],
+    }),
+  ],
+  argTypes: {
+    node: {
+      control: 'object',
+      description: 'The node to attach the popover to',
+      table: {
+        type: { summary: 'MapViewerNode' },
+      },
+    },
+    theme: {
+      control: 'select',
+      options: ['theme-sdc', 'theme-backoffice'],
+      description: 'Theme class to apply to the popover component',
+      table: {
+        type: { summary: 'ThemeClass' },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A popover component for displaying venue map information with thumbnails, seat details, and pricing.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<PopoverComponent>;
+
+export const Default: Story = {
+  args: {
+    node: createMockNode('section-a-1-15', AppNodes.Seat),
+    theme: 'theme-sdc',
+  },
+  render: args => ({
+    props: {
+      ...args,
+      onLoad3dView: (event: { node: any; section: string }) => {
+        console.log('3D View requested:', event);
+        alert(`Loading 3D view for section: ${event.section}`);
+      },
+      onSelectSectionForBA: (event: { node: any; section: string; selected: boolean }) => {
+        console.log('Section selection changed:', event);
+        alert(`Section ${event.section} ${event.selected ? 'selected' : 'deselected'} for best available`);
+      },
+      onOpenSeatMap: (event: { node: any; section: string }) => {
+        console.log('Seat map requested:', event);
+        alert(`Opening seat map for section: ${event.section}`);
+      },
+    },
+    template: `
+      <div style="padding: 2rem; background: #f5f5f5; min-height: 400px; display: flex; align-items: center; justify-content: center;">
+        <sdc-map-popover
+          [node]="node"
+          [theme]="theme"
+          (load3dView)="onLoad3dView($event)"
+          (selectSectionForBA)="onSelectSectionForBA($event)"
+          (openSeatMap)="onOpenSeatMap($event)">
+        </sdc-map-popover>
+      </div>
+    `,
+  }),
+};
+
+export const SectionNode: Story = {
+  args: {
+    node: createMockNode('section-b', AppNodes.Section),
+    theme: 'theme-sdc',
+  },
+  render: args => ({
+    props: {
+      ...args,
+      onLoad3dView: (event: { node: any; section: string }) => {
+        console.log('3D View requested:', event);
+        alert(`Loading 3D view for section: ${event.section}`);
+      },
+      onSelectSectionForBA: (event: { node: any; section: string; selected: boolean }) => {
+        console.log('Section selection changed:', event);
+        alert(`Section ${event.section} ${event.selected ? 'selected' : 'deselected'} for best available`);
+      },
+      onOpenSeatMap: (event: { node: any; section: string }) => {
+        console.log('Seat map requested:', event);
+        alert(`Opening seat map for section: ${event.section}`);
+      },
+    },
+    template: `
+      <div style="padding: 2rem; background: #f5f5f5; min-height: 400px; display: flex; align-items: center; justify-content: center;">
+        <sdc-map-popover
+          [node]="node"
+          [theme]="theme"
+          (load3dView)="onLoad3dView($event)"
+          (selectSectionForBA)="onSelectSectionForBA($event)"
+          (openSeatMap)="onOpenSeatMap($event)">
+        </sdc-map-popover>
+      </div>
+    `,
+  }),
+};
+
+export const RowNode: Story = {
+  args: {
+    node: createMockNode('section-c-row-5', AppNodes.Row),
+    theme: 'theme-sdc',
+  },
+  render: args => ({
+    props: args,
+    template: `
+      <div style="padding: 2rem; background: #f5f5f5; min-height: 400px; display: flex; align-items: center; justify-content: center;">
+        <sdc-map-popover
+          [node]="node"
+          [theme]="theme">
+        </sdc-map-popover>
+      </div>
+    `,
+  }),
+};
+
+export const SeatNode: Story = {
+  args: {
+    node: createMockNode('section-d-row-3-seat-12', AppNodes.Seat),
+    theme: 'theme-sdc',
+  },
+  render: args => ({
+    props: args,
+    template: `
+      <div style="padding: 2rem; background: #f5f5f5; min-height: 400px; display: flex; align-items: center; justify-content: center;">
+        <sdc-map-popover
+          [node]="node"
+          [theme]="theme">
+        </sdc-map-popover>
+      </div>
+    `,
+  }),
+};
+
+export const VIPNode: Story = {
+  args: {
+    node: createMockNode('vip-lounge-1-5', AppNodes.Vip),
+    theme: 'theme-sdc',
+  },
+  render: args => ({
+    props: args,
+    template: `
+      <div style="padding: 2rem; background: #f5f5f5; min-height: 400px; display: flex; align-items: center; justify-content: center;">
+        <sdc-map-popover
+          [node]="node"
+          [theme]="theme">
+        </sdc-map-popover>
+      </div>
+    `,
+  }),
+};
+
+export const GeneralAdmissionNode: Story = {
+  args: {
+    node: createMockNode('ga-floor-1', AppNodes.Ga),
+    theme: 'theme-sdc',
+  },
+  render: args => ({
+    props: args,
+    template: `
+      <div style="padding: 2rem; background: #f5f5f5; min-height: 400px; display: flex; align-items: center; justify-content: center;">
+        <sdc-map-popover
+          [node]="node"
+          [theme]="theme">
+        </sdc-map-popover>
+      </div>
+    `,
+  }),
+};
+
+export const LoadingState: Story = {
+  args: {
+    node: createMockNode('section-e-row-2-seat-8', AppNodes.Seat),
+    theme: 'theme-sdc',
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [PopoverComponent],
+      providers: [
+        { provide: CONFIGURATION_SERVICE, useValue: mockConfigurationService },
+        { provide: DVM_FORMATTER, useValue: mockDvmFormatter },
+        {
+          provide: DVM_SERVICE,
+          useValue: {
+            viewer3dService: {
+              isInitialized: () => false,
+              getThumbnail: () => of(''),
+            },
+          },
+        },
+      ],
+    }),
+    applicationConfig({
+      providers: [provideHttpClient()],
+    }),
+  ],
+  render: args => ({
+    props: args,
+    template: `
+      <div style="padding: 2rem; background: #f5f5f5; min-height: 400px; display: flex; align-items: center; justify-content: center;">
+        <sdc-map-popover
+          [node]="node"
+          [theme]="theme">
+        </sdc-map-popover>
+      </div>
+    `,
+  }),
+};
+
+export const WithPrice: Story = {
+  args: {
+    node: createMockNode('section-f-row-1-seat-25', AppNodes.Seat),
+    theme: 'theme-sdc',
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [PopoverComponent],
+      providers: [
+        { provide: CONFIGURATION_SERVICE, useValue: mockConfigurationService },
+        { provide: DVM_FORMATTER, useValue: mockDvmFormatter },
+        {
+          provide: DVM_SERVICE,
+          useValue: {
+            viewer3dService: {
+              isInitialized: () => true,
+              getThumbnail: () => of('https://via.placeholder.com/275x124/1a1a1a/ffffff?text=Premium+Seat'),
+            },
+          },
+        },
+      ],
+    }),
+    applicationConfig({
+      providers: [provideHttpClient()],
+    }),
+  ],
+  render: args => ({
+    props: args,
+    template: `
+      <div style="padding: 2rem; background: #f5f5f5; min-height: 400px; display: flex; align-items: center; justify-content: center;">
+        <sdc-map-popover
+          [node]="node"
+          [theme]="theme">
+        </sdc-map-popover>
+      </div>
+    `,
+  }),
+};
+
+export const BackofficeTheme: Story = {
+  args: {
+    node: createMockNode('section-g-row-4-seat-10', AppNodes.Seat),
+    theme: 'theme-backoffice',
+  },
+  render: args => ({
+    props: args,
+    template: `
+      <div style="padding: 2rem; background: #f5f5f5; min-height: 400px; display: flex; align-items: center; justify-content: center;">
+        <sdc-map-popover
+          [node]="node"
+          [theme]="theme">
+        </sdc-map-popover>
+      </div>
+    `,
+  }),
+};
+
+export const AllNodeTypes: Story = {
+  args: {
+    theme: 'theme-sdc',
+  },
+  render: args => ({
+    props: {
+      ...args,
+      sectionNode: createMockNode('section-a', AppNodes.Section),
+      rowNode: createMockNode('section-b-row-3', AppNodes.Row),
+      seatNode: createMockNode('section-c-row-2-seat-15', AppNodes.Seat),
+      vipNode: createMockNode('vip-premium-1-8', AppNodes.Vip),
+      gaNode: createMockNode('ga-standing-1', AppNodes.Ga),
+    },
+    template: `
+      <div style="padding: 2rem; background: #f5f5f5; min-height: 600px;">
+        <h3 style="margin-bottom: 2rem; text-align: center;">All Node Types</h3>
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; justify-items: center;">
+          <div style="text-align: center;">
+            <h4 style="margin-bottom: 1rem;">Section</h4>
+            <sdc-map-popover [node]="sectionNode" [theme]="theme"></sdc-map-popover>
+          </div>
+          <div style="text-align: center;">
+            <h4 style="margin-bottom: 1rem;">Row</h4>
+            <sdc-map-popover [node]="rowNode" [theme]="theme"></sdc-map-popover>
+          </div>
+          <div style="text-align: center;">
+            <h4 style="margin-bottom: 1rem;">Seat</h4>
+            <sdc-map-popover [node]="seatNode" [theme]="theme"></sdc-map-popover>
+          </div>
+          <div style="text-align: center;">
+            <h4 style="margin-bottom: 1rem;">VIP</h4>
+            <sdc-map-popover [node]="vipNode" [theme]="theme"></sdc-map-popover>
+          </div>
+          <div style="text-align: center;">
+            <h4 style="margin-bottom: 1rem;">General Admission</h4>
+            <sdc-map-popover [node]="gaNode" [theme]="theme"></sdc-map-popover>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const Interactive: Story = {
+  args: {
+    node: createMockNode('section-h-row-5-seat-20', AppNodes.Seat),
+    theme: 'theme-sdc',
+  },
+  render: args => ({
+    props: args,
+    template: `
+      <div style="padding: 2rem; background: #f5f5f5; min-height: 400px; display: flex; align-items: center; justify-content: center;">
+        <div style="text-align: center;">
+          <p style="margin-bottom: 1rem; color: #666;">Hover over the popover to see interaction effects</p>
+          <sdc-map-popover
+            [node]="node"
+            [theme]="theme"
+            (mouseenter)="onEnter($event)"
+            (mouseleave)="onLeave($event)">
+          </sdc-map-popover>
+        </div>
+      </div>
+    `,
+    methods: {
+      onEnter: (event: MouseEvent) => {
+        console.log('Mouse entered popover', event);
+      },
+      onLeave: (event: MouseEvent) => {
+        console.log('Mouse left popover', event);
+      },
+    },
+  }),
+};
+
+export const CustomContent: Story = {
+  args: {
+    node: createMockNode('section-i-row-3-seat-15', AppNodes.Seat),
+    theme: 'theme-sdc',
+  },
+  render: args => ({
+    props: args,
+    template: `
+      <div style="padding: 2rem; background: #f5f5f5; min-height: 400px; display: flex; align-items: center; justify-content: center;">
+        <sdc-map-popover [node]="node" [theme]="theme">
+          <div slot="content" style="text-align: center; padding: 0.5rem;">
+            <h4 style="color: #fff; margin: 0 0 0.5rem 0; font-size: 0.875rem;">PREMIUM SEAT</h4>
+            <p style="color: #ccc; margin: 0; font-size: 0.75rem;">VIP Experience</p>
+            <div style="margin-top: 0.5rem;">
+              <span style="background: #f39c12; color: #000; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: bold;">EXCLUSIVE</span>
+            </div>
+          </div>
+        </sdc-map-popover>
+      </div>
+    `,
+  }),
+};
+
+export const CustomThumbnail: Story = {
+  args: {
+    node: createMockNode('section-j-row-2-seat-8', AppNodes.Seat),
+    theme: 'theme-sdc',
+  },
+  render: args => ({
+    props: args,
+    template: `
+      <div style="padding: 2rem; background: #f5f5f5; min-height: 400px; display: flex; align-items: center; justify-content: center;">
+        <sdc-map-popover [node]="node" [theme]="theme">
+          <div slot="thumbnail" style="width: 100%; height: 124px; background: linear-gradient(45deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 1.2rem;">
+            CUSTOM VIEW
+          </div>
+        </sdc-map-popover>
+      </div>
+    `,
+  }),
+};
+
+export const CustomPrice: Story = {
+  args: {
+    node: createMockNode('section-k-row-4-seat-12', AppNodes.Seat),
+    theme: 'theme-sdc',
+  },
+  render: args => ({
+    props: args,
+    template: `
+      <div style="padding: 2rem; background: #f5f5f5; min-height: 400px; display: flex; align-items: center; justify-content: center;">
+        <sdc-map-popover [node]="node" [theme]="theme">
+          <div slot="price" style="text-align: center; padding: 0.5rem;">
+            <div style="display: flex; flex-direction: column; gap: 0.25rem;">
+              <span style="color: #f39c12; font-size: 0.75rem; font-weight: bold;">SPECIAL OFFER</span>
+              <span style="color: #fff; font-size: 1rem; font-weight: bold;">$99.99</span>
+              <span style="color: #ccc; font-size: 0.625rem; text-decoration: line-through;">$149.99</span>
+            </div>
+          </div>
+        </sdc-map-popover>
+      </div>
+    `,
+  }),
+};
+
+export const FullyCustom: Story = {
+  args: {
+    node: createMockNode('section-l-row-1-seat-5', AppNodes.Seat),
+    theme: 'theme-sdc',
+  },
+  render: args => ({
+    props: args,
+    template: `
+      <div style="padding: 2rem; background: #f5f5f5; min-height: 400px; display: flex; align-items: center; justify-content: center;">
+        <sdc-map-popover [node]="node" [theme]="theme">
+          <div slot="thumbnail" style="width: 100%; height: 124px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 1.1rem; position: relative;">
+            <div style="position: absolute; top: 0.5rem; right: 0.5rem; background: #e74c3c; color: white; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.625rem; font-weight: bold;">HOT</div>
+            PREMIUM VIEW
+          </div>
+          <div slot="content" style="text-align: center; padding: 0.75rem;">
+            <h3 style="color: #f39c12; margin: 0 0 0.5rem 0; font-size: 1rem; font-weight: bold;">VIP SECTION</h3>
+            <p style="color: #ecf0f1; margin: 0.25rem 0; font-size: 0.875rem;">Row A • Seat 5</p>
+            <div style="margin: 0.5rem 0;">
+              <span style="background: #3498db; color: #fff; padding: 0.125rem 0.375rem; border-radius: 12px; font-size: 0.625rem; font-weight: 500; margin: 0 0.125rem;">VIP Access</span>
+              <span style="background: #e74c3c; color: #fff; padding: 0.125rem 0.375rem; border-radius: 12px; font-size: 0.625rem; font-weight: 500; margin: 0 0.125rem;">Premium View</span>
+            </div>
+          </div>
+          <div slot="price" style="text-align: center; padding: 0.75rem;">
+            <div style="display: flex; flex-direction: column; gap: 0.25rem;">
+              <span style="color: #f39c12; font-size: 0.75rem; font-weight: bold;">EXCLUSIVE PRICING</span>
+              <span style="color: #fff; font-size: 1.25rem; font-weight: bold;">$299.99</span>
+              <span style="color: #95a5a6; font-size: 0.625rem;">All amenities included</span>
+            </div>
+          </div>
+        </sdc-map-popover>
+      </div>
+    `,
+  }),
+};
+
+export const ContentProjectionExamples: Story = {
+  args: {
+    theme: 'theme-sdc',
+  },
+  render: args => ({
+    props: {
+      ...args,
+      defaultNode: createMockNode('section-default-row-1-seat-1', AppNodes.Seat),
+      customContentNode: createMockNode('section-content-row-2-seat-2', AppNodes.Seat),
+      customThumbnailNode: createMockNode('section-thumbnail-row-3-seat-3', AppNodes.Seat),
+      customPriceNode: createMockNode('section-price-row-4-seat-4', AppNodes.Seat),
+      fullyCustomNode: createMockNode('section-custom-row-5-seat-5', AppNodes.Seat),
+    },
+    template: `
+      <div style="padding: 2rem; background: #f5f5f5; min-height: 600px;">
+        <h3 style="margin-bottom: 2rem; text-align: center;">Content Projection Examples</h3>
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; justify-items: center;">
+          <div style="text-align: center;">
+            <h4 style="margin-bottom: 1rem;">Default</h4>
+            <sdc-map-popover [node]="defaultNode" [theme]="theme"></sdc-map-popover>
+          </div>
+          <div style="text-align: center;">
+            <h4 style="margin-bottom: 1rem;">Custom Content</h4>
+            <sdc-map-popover [node]="customContentNode" [theme]="theme">
+              <div slot="content" style="text-align: center; padding: 0.5rem;">
+                <h4 style="color: #fff; margin: 0 0 0.5rem 0; font-size: 0.875rem;">CUSTOM</h4>
+                <p style="color: #ccc; margin: 0; font-size: 0.75rem;">Custom Content</p>
+              </div>
+            </sdc-map-popover>
+          </div>
+          <div style="text-align: center;">
+            <h4 style="margin-bottom: 1rem;">Custom Thumbnail</h4>
+            <sdc-map-popover [node]="customThumbnailNode" [theme]="theme">
+              <div slot="thumbnail" style="width: 100%; height: 124px; background: linear-gradient(45deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">
+                CUSTOM
+              </div>
+            </sdc-map-popover>
+          </div>
+          <div style="text-align: center;">
+            <h4 style="margin-bottom: 1rem;">Custom Price</h4>
+            <sdc-map-popover [node]="customPriceNode" [theme]="theme">
+              <div slot="price" style="text-align: center; padding: 0.5rem;">
+                <span style="color: #f39c12; font-size: 0.75rem; font-weight: bold;">SPECIAL</span>
+                <div style="color: #fff; font-size: 1rem; font-weight: bold;">$199.99</div>
+              </div>
+            </sdc-map-popover>
+          </div>
+          <div style="text-align: center;">
+            <h4 style="margin-bottom: 1rem;">Fully Custom</h4>
+            <sdc-map-popover [node]="fullyCustomNode" [theme]="theme">
+              <div slot="thumbnail" style="width: 100%; height: 124px; background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">
+                PREMIUM
+              </div>
+              <div slot="content" style="text-align: center; padding: 0.5rem;">
+                <h4 style="color: #f39c12; margin: 0; font-size: 0.875rem;">VIP EXPERIENCE</h4>
+              </div>
+              <div slot="price" style="text-align: center; padding: 0.5rem;">
+                <span style="color: #fff; font-size: 1rem; font-weight: bold;">$399.99</span>
+              </div>
+            </sdc-map-popover>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const ServiceContentProjection: Story = {
+  args: {},
+  decorators: [
+    moduleMetadata({
+      imports: [StorybookWrapperComponent],
+      providers: [
+        { provide: CONFIGURATION_SERVICE, useValue: mockConfigurationService },
+        { provide: DVM_FORMATTER, useValue: mockDvmFormatter },
+        { provide: DVM_SERVICE, useValue: mockDvmService },
+        PopoverService,
+      ],
+    }),
+    applicationConfig({
+      providers: [provideHttpClient()],
+    }),
+  ],
+  render: () => ({
+    template: `<storybook-wrapper></storybook-wrapper>`,
+  }),
+};
+
+// Seat Popover Stories
+export const seatPopoverMeta: Meta<SeatPopoverComponent> = {
+  title: 'DVM/Popover/Seat Popover',
+  component: SeatPopoverComponent,
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [SeatPopoverComponent],
+      providers: [{ provide: THUMBNAIL_PROVIDER, useValue: mockThumbnailProvider }],
+    }),
+  ],
+  argTypes: {
+    data: {
+      control: 'object',
+      description: 'Seat popover data',
+    },
+    showLoader: {
+      control: 'boolean',
+      description: 'Whether to show loading spinner',
+    },
+    mouseEnter: {
+      action: 'mouseEnter',
+      description: 'Mouse enter event',
+    },
+    mouseLeave: {
+      action: 'mouseLeave',
+      description: 'Mouse leave event',
+    },
+  },
+};
+type SeatPopoverStory = StoryObj<SeatPopoverComponent>;
+
+export const SeatPopoverDefault: SeatPopoverStory = {
+  args: {
+    data: {
+      id: 'seat-123',
+      section: 'S_Section_A',
+      row: '10',
+      seat: 'S_Section_A-10-15',
+      price: 75.0,
+      thumbnail: 'https://via.placeholder.com/275x124/1a1a1a/ffffff?text=Seat+Thumbnail',
+    },
+    showLoader: true,
+  },
+};
+
+export const SeatPopoverWithoutThumbnail: SeatPopoverStory = {
+  args: {
+    data: {
+      id: 'seat-456',
+      section: 'S_Section_B',
+      row: '5',
+      seat: 'S_Section_B-5-8',
+      price: 95.0,
+    },
+    showLoader: true,
+  },
+};
+
+export const SeatPopoverNoLoader: SeatPopoverStory = {
+  args: {
+    data: {
+      id: 'seat-789',
+      section: 'S_Section_C',
+      row: '12',
+      seat: 'S_Section_C-12-20',
+      price: 65.0,
+    },
+    showLoader: false,
+  },
+};
+
+// Section Popover Stories
+export const sectionPopoverMeta: Meta<SectionPopoverComponent> = {
+  title: 'DVM/Popover/Section Popover',
+  component: SectionPopoverComponent,
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [SectionPopoverComponent],
+      providers: [{ provide: THUMBNAIL_PROVIDER, useValue: mockThumbnailProvider }],
+    }),
+  ],
+  argTypes: {
+    data: {
+      control: 'object',
+      description: 'Section popover data',
+    },
+    showLoader: {
+      control: 'boolean',
+      description: 'Whether to show loading spinner',
+    },
+    showBestAvailable: {
+      control: 'boolean',
+      description: 'Whether to show Best Available button',
+    },
+    showOpenSeatMap: {
+      control: 'boolean',
+      description: 'Whether to show Open Seat Map button',
+    },
+    excludeSeatMapSections: {
+      control: 'object',
+      description: 'Sections to exclude from seat map button',
+    },
+    mouseEnter: {
+      action: 'mouseEnter',
+      description: 'Mouse enter event',
+    },
+    mouseLeave: {
+      action: 'mouseLeave',
+      description: 'Mouse leave event',
+    },
+    load3dView: {
+      action: 'load3dView',
+      description: 'Load 3D view event',
+    },
+    selectForBA: {
+      action: 'selectForBA',
+      description: 'Select for Best Available event',
+    },
+    openSeatMap: {
+      action: 'openSeatMap',
+      description: 'Open seat map event',
+    },
+  },
+};
+
+type SectionPopoverStory = StoryObj<SectionPopoverComponent>;
+
+export const SectionPopoverDefault: SectionPopoverStory = {
+  args: {
+    data: {
+      id: 'section-123',
+      section: 'Section A',
+      priceRange: { min: 75, max: 95 },
+      availableQuantity: 25,
+      adaQuantity: 3,
+      thumbnail: 'https://via.placeholder.com/275x124/1a1a1a/ffffff?text=Section+Thumbnail',
+      type: 'section',
+      isSelectedForBA: false,
+    },
+    showLoader: true,
+    showBestAvailable: true,
+    showOpenSeatMap: true,
+    excludeSeatMapSections: ['S_BLCHADA', 'S_Bleacher'],
+  },
+};
+
+export const SectionPopoverWithBA: SectionPopoverStory = {
+  args: {
+    data: {
+      id: 'section-456',
+      section: 'Section B',
+      priceRange: { min: 85, max: 85 },
+      availableQuantity: 15,
+      adaQuantity: 2,
+      type: 'section',
+      isSelectedForBA: true,
+    },
+    showLoader: true,
+    showBestAvailable: true,
+    showOpenSeatMap: true,
+  },
+};
+
+export const SectionPopoverGeneralAdmission: SectionPopoverStory = {
+  args: {
+    data: {
+      id: 'section-ga',
+      section: 'S_Bleacher',
+      priceRange: { min: 45, max: 45 },
+      availableQuantity: 100,
+      adaQuantity: 10,
+      type: 'general_admission',
+      isSelectedForBA: false,
+    },
+    showLoader: true,
+    showBestAvailable: true,
+    showOpenSeatMap: false,
+  },
+};
+
+export const SectionPopoverExcludedSection: SectionPopoverStory = {
+  args: {
+    data: {
+      id: 'section-excluded',
+      section: 'S_BLCHADA',
+      priceRange: { min: 35, max: 35 },
+      availableQuantity: 50,
+      adaQuantity: 5,
+      type: 'section',
+      isSelectedForBA: false,
+    },
+    showLoader: true,
+    showBestAvailable: true,
+    showOpenSeatMap: true,
+    excludeSeatMapSections: ['S_BLCHADA', 'S_Bleacher'],
+  },
+};