@3ddv/software-division-components 1.4.3 → 1.4.10

package/src/dvm/popover/popover.stories.ts

@@ -1,873 +0,0 @@
-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'],
-  },
-};