@3ddv/software-division-components 1.0.2 → 1.1.0

package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, signal, Component, InjectionToken, inject, Directive, NgModule, booleanAttribute, model, numberAttribute, viewChild, ChangeDetectionStrategy, Renderer2, ElementRef, effect, forwardRef, output, Injectable, ChangeDetectorRef, ViewChild, ApplicationRef, EnvironmentInjector, createComponent, Input, DestroyRef, untracked, ViewEncapsulation, contentChild } from '@angular/core';
+import { input, computed, signal, Component, InjectionToken, inject, Directive, NgModule, booleanAttribute, model, numberAttribute, viewChild, ChangeDetectionStrategy, Renderer2, ElementRef, effect, forwardRef, output, Injectable, ChangeDetectorRef, EventEmitter, Output, ViewChild, ApplicationRef, EnvironmentInjector, createEnvironmentInjector, createComponent, TemplateRef, Input, Inject, DestroyRef, untracked, ViewEncapsulation, contentChild } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormSubmittedEvent, ReactiveFormsModule, NG_VALUE_ACCESSOR, TouchedChangeEvent, PristineChangeEvent, FormsModule, FormControl } from '@angular/forms';
 import { injectDateAdapter, provideDateAdapter, BrnNativeDateAdapter } from '@spartan-ng/brain/date-time';
@@ -9,20 +9,21 @@ import { hlm, injectExposesStateProvider, injectCustomClassSettable, injectExpos
 import { BrnPopover, BrnPopoverTrigger, BrnPopoverContent } from '@spartan-ng/brain/popover';
 import { injectBrnCalendarI18n, BrnCalendar, BrnCalendarHeader, BrnCalendarNextButton, BrnCalendarPreviousButton, BrnCalendarWeekday, BrnCalendarWeek, BrnCalendarCellButton, BrnCalendarCell, BrnCalendarGrid, BrnCalendarMulti } from '@spartan-ng/brain/calendar';
 import { cva } from 'class-variance-authority';
-import { Subject, takeUntil as takeUntil$1, mergeMap, skip, tap, merge, catchError, map, shareReplay, fromEvent, startWith } from 'rxjs';
+import { Subject, takeUntil as takeUntil$1, mergeMap, skip, tap, merge, catchError, of, map, shareReplay, fromEvent, startWith } from 'rxjs';
 import { takeUntil, map as map$1 } from 'rxjs/operators';
 import { injectFlexRenderContext, FlexRenderDirective, flexRenderComponent, createAngularTable, getPaginationRowModel, getCoreRowModel } from '@tanstack/angular-table';
 export { FlexRenderDirective, createAngularTable, flexRenderComponent, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/angular-table';
-import * as i1$3 from '@angular/common';
+import * as i1$1 from '@angular/common';
 import { CommonModule, NgOptimizedImage, DOCUMENT, CurrencyPipe, NgComponentOutlet, DatePipe } from '@angular/common';
-import { createTimeline, animate } from 'animejs';
+import { createTimeline } from 'animejs';
 import { autoUpdate, arrow, computePosition, detectOverflow, inline, hide, autoPlacement, size, flip, shift, offset } from '@floating-ui/dom';
+import { createPopper } from '@popperjs/core';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import * as i1$1 from '@spartan-ng/brain/dialog';
+import * as i1$2 from '@spartan-ng/brain/dialog';
 import { BrnDialog, BrnDialogOverlay, provideBrnDialogDefaultOptions, BrnDialogRef, injectBrnDialogContext, BrnDialogClose, BrnDialogDescription, BrnDialogTitle, BrnDialogService, cssClassesToArray, DEFAULT_BRN_DIALOG_OPTIONS } from '@spartan-ng/brain/dialog';
 import { HttpClient } from '@angular/common/http';
 import { DomSanitizer } from '@angular/platform-browser';
-import * as i1$2 from '@spartan-ng/brain/select';
+import * as i1$3 from '@spartan-ng/brain/select';
 import { BrnSelectGroup, BrnSelectLabel, BrnSelectOption, BrnSelect, BrnSelectTrigger, BrnSelectImports } from '@spartan-ng/brain/select';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 
@@ -875,7 +876,7 @@ function injectHlmDatePickerConfig() {
     return injectedConfig ? injectedConfig : getDefaultConfig$1();
 }
 
-const _c0$b = ["*"];
+const _c0$c = ["*"];
 function HlmDatePicker_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
@@ -971,7 +972,7 @@ class HlmDatePicker {
         this._popoverState.set('closed');
     }
     static ɵfac = function HlmDatePicker_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmDatePicker)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HlmDatePicker, selectors: [["hlm-date-picker"]], hostAttrs: [1, "block"], inputs: { userClass: [1, "class", "userClass"], styleClass: [1, "styleClass"], min: [1, "min"], max: [1, "max"], disabled: [1, "disabled"], date: [1, "date"], autoCloseOnSelect: [1, "autoCloseOnSelect"], formatDate: [1, "formatDate"], transformDate: [1, "transformDate"] }, outputs: { date: "dateChange", changed: "changed" }, features: [i0.ɵɵProvidersFeature([HLM_DATE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideCalendar })])], ngContentSelectors: _c0$b, decls: 7, vars: 5, consts: [["sideOffset", "5", 3, "stateChanged", "state"], ["type", "button", "brnPopoverTrigger", "", 3, "disabled"], [1, "truncate"], ["hlm", "", "size", "sm", "name", "lucideCalendar"], ["hlmPopoverContent", "", "class", "w-auto p-0", 3, "class", 4, "brnPopoverContent"], ["hlmPopoverContent", "", 1, "w-auto", "p-0"], ["calendarClass", "border-0 rounded-none", 3, "dateChange", "date", "min", "max", "disabled"]], template: function HlmDatePicker_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HlmDatePicker, selectors: [["hlm-date-picker"]], hostAttrs: [1, "block"], inputs: { userClass: [1, "class", "userClass"], styleClass: [1, "styleClass"], min: [1, "min"], max: [1, "max"], disabled: [1, "disabled"], date: [1, "date"], autoCloseOnSelect: [1, "autoCloseOnSelect"], formatDate: [1, "formatDate"], transformDate: [1, "transformDate"] }, outputs: { date: "dateChange", changed: "changed" }, features: [i0.ɵɵProvidersFeature([HLM_DATE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideCalendar })])], ngContentSelectors: _c0$c, decls: 7, vars: 5, consts: [["sideOffset", "5", 3, "stateChanged", "state"], ["type", "button", "brnPopoverTrigger", "", 3, "disabled"], [1, "truncate"], ["hlm", "", "size", "sm", "name", "lucideCalendar"], ["hlmPopoverContent", "", "class", "w-auto p-0", 3, "class", 4, "brnPopoverContent"], ["hlmPopoverContent", "", 1, "w-auto", "p-0"], ["calendarClass", "border-0 rounded-none", 3, "dateChange", "date", "min", "max", "disabled"]], template: function HlmDatePicker_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "brn-popover", 0);
             i0.ɵɵlistener("stateChanged", function HlmDatePicker_Template_brn_popover_stateChanged_0_listener($event) { return ctx._popoverState.set($event); });
@@ -1047,7 +1048,7 @@ function injectHlmDatePickerMultiConfig() {
     return injectedConfig ? injectedConfig : getDefaultConfig();
 }
 
-const _c0$a = ["*"];
+const _c0$b = ["*"];
 function HlmDatePickerMulti_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
@@ -1148,7 +1149,7 @@ class HlmDatePickerMulti {
         this._popoverState.set('closed');
     }
     static ɵfac = function HlmDatePickerMulti_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmDatePickerMulti)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HlmDatePickerMulti, selectors: [["hlm-date-picker-multi"]], hostAttrs: [1, "block"], inputs: { userClass: [1, "class", "userClass"], min: [1, "min"], max: [1, "max"], minSelection: [1, "minSelection"], maxSelection: [1, "maxSelection"], disabled: [1, "disabled"], date: [1, "date"], autoCloseOnMaxSelection: [1, "autoCloseOnMaxSelection"], formatDates: [1, "formatDates"], transformDates: [1, "transformDates"] }, outputs: { date: "dateChange", changed: "changed" }, features: [i0.ɵɵProvidersFeature([HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR, provideIcons({ lucideCalendar })])], ngContentSelectors: _c0$a, decls: 7, vars: 5, consts: [["sideOffset", "5", 3, "stateChanged", "state"], ["type", "button", "brnPopoverTrigger", "", 3, "disabled"], ["hlm", "", "size", "sm", "name", "lucideCalendar"], [1, "truncate"], ["hlmPopoverContent", "", "class", "w-auto p-0", 4, "brnPopoverContent"], ["hlmPopoverContent", "", 1, "w-auto", "p-0"], ["calendarClass", "border-0 rounded-none", 3, "dateChange", "date", "min", "max", "minSelection", "maxSelection", "disabled"]], template: function HlmDatePickerMulti_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HlmDatePickerMulti, selectors: [["hlm-date-picker-multi"]], hostAttrs: [1, "block"], inputs: { userClass: [1, "class", "userClass"], min: [1, "min"], max: [1, "max"], minSelection: [1, "minSelection"], maxSelection: [1, "maxSelection"], disabled: [1, "disabled"], date: [1, "date"], autoCloseOnMaxSelection: [1, "autoCloseOnMaxSelection"], formatDates: [1, "formatDates"], transformDates: [1, "transformDates"] }, outputs: { date: "dateChange", changed: "changed" }, features: [i0.ɵɵProvidersFeature([HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR, provideIcons({ lucideCalendar })])], ngContentSelectors: _c0$b, decls: 7, vars: 5, consts: [["sideOffset", "5", 3, "stateChanged", "state"], ["type", "button", "brnPopoverTrigger", "", 3, "disabled"], ["hlm", "", "size", "sm", "name", "lucideCalendar"], [1, "truncate"], ["hlmPopoverContent", "", "class", "w-auto p-0", 4, "brnPopoverContent"], ["hlmPopoverContent", "", 1, "w-auto", "p-0"], ["calendarClass", "border-0 rounded-none", 3, "dateChange", "date", "min", "max", "minSelection", "maxSelection", "disabled"]], template: function HlmDatePickerMulti_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "brn-popover", 0);
             i0.ɵɵlistener("stateChanged", function HlmDatePickerMulti_Template_brn_popover_stateChanged_0_listener($event) { return ctx._popoverState.set($event); });
@@ -2168,7 +2169,7 @@ class RadioComponent {
 
 const SIZES = { xxs: 'xxs', xs: 'xs', sm: 'sm', md: 'md', lg: 'lg', xl: 'xl', '2xl': '2xl' };
 
-const _c0$9 = ["*"];
+const _c0$a = ["*"];
 const BUTTON_VARIANTS = {
     primary: 'primary',
     secondary: 'secondary',
@@ -2436,7 +2437,7 @@ class ButtonComponent {
         }, 600);
     }
     static ɵfac = function ButtonComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ButtonComponent)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ButtonComponent, selectors: [["sdc-button"]], inputs: { theme: [1, "theme"], styleClass: [1, "styleClass"], className: [1, "className"], variant: [1, "variant"], size: [1, "size"], type: [1, "type"], disabled: [1, "disabled"], ripple: [1, "ripple"], debounce: [1, "debounce"] }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur", isDebounced: "isDebounced" }, ngContentSelectors: _c0$9, decls: 2, vars: 4, consts: [["hlmBtn", "", 3, "click", "focus", "blur", "disabled", "type"]], template: function ButtonComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ButtonComponent, selectors: [["sdc-button"]], inputs: { theme: [1, "theme"], styleClass: [1, "styleClass"], className: [1, "className"], variant: [1, "variant"], size: [1, "size"], type: [1, "type"], disabled: [1, "disabled"], ripple: [1, "ripple"], debounce: [1, "debounce"] }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur", isDebounced: "isDebounced" }, ngContentSelectors: _c0$a, decls: 2, vars: 4, consts: [["hlmBtn", "", 3, "click", "focus", "blur", "disabled", "type"]], template: function ButtonComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "button", 0);
             i0.ɵɵlistener("click", function ButtonComponent_Template_button_click_0_listener($event) { ctx.handleClick($event); return ctx.createRipple($event); })("focus", function ButtonComponent_Template_button_focus_0_listener($event) { return ctx.handleFocus($event); })("blur", function ButtonComponent_Template_button_blur_0_listener($event) { return ctx.handleBlur($event); });
@@ -3599,7 +3600,7 @@ class LoaderService {
  * Public API Surface of software-division-components
  */
 
-const _c0$8 = ["pill"];
+const _c0$9 = ["pill"];
 const _c1$3 = ["pillContainer"];
 const _c2$1 = ["container"];
 class MapLoaderComponent {
@@ -3740,7 +3741,7 @@ class MapLoaderComponent {
     }
     static ɵfac = function MapLoaderComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MapLoaderComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MapLoaderComponent, selectors: [["sdc-map-loader"]], viewQuery: function MapLoaderComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuerySignal(ctx.pill, _c0$8, 5);
+            i0.ɵɵviewQuerySignal(ctx.pill, _c0$9, 5);
             i0.ɵɵviewQuerySignal(ctx.pillContainer, _c1$3, 5);
             i0.ɵɵviewQuerySignal(ctx.container, _c2$1, 5);
         } if (rf & 2) {
@@ -3765,113 +3766,53 @@ class MapLoaderComponent {
  * Public API Surface of software-division-components
  */
 
-const _c0$7 = ["neighborsContainer"];
+const _c0$8 = ["neighborsContainer"];
 const _c1$2 = ["currentSection"];
 const _c2 = ["currentSection3d"];
 const _c3 = ["leftSectionNumber"];
 const _c4 = ["rightSectionNumber"];
-function NeighborsComponent_Conditional_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 18, 1);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.leftSection, " ");
-} }
 function NeighborsComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 9);
-    i0.ɵɵlistener("click", function NeighborsComponent_Conditional_2_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.navigateToSection(ctx_r1.sectionData.l)); })("keypress.enter", function NeighborsComponent_Conditional_2_Template_div_keypress_enter_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.navigateToSection(ctx_r1.sectionData.l)); });
-    i0.ɵɵelementStart(1, "div", 10)(2, "i", 11);
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵlistener("click", function NeighborsComponent_Conditional_2_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.navigateToSection(ctx_r1.leftSection)); })("keypress.enter", function NeighborsComponent_Conditional_2_Template_div_keypress_enter_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.navigateToSection(ctx_r1.leftSection)); });
+    i0.ɵɵelementStart(1, "i", 8);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(3, "svg", 12);
-    i0.ɵɵelement(4, "path", 13);
+    i0.ɵɵelementStart(2, "svg", 9);
+    i0.ɵɵelement(3, "path", 10);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(5, "div", 14)(6, "p", 15)(7, "span", 16);
-    i0.ɵɵtext(8);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 17);
-    i0.ɵɵtext(10);
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(11, NeighborsComponent_Conditional_2_Conditional_11_Template, 3, 1, "span", 18);
-    i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵclassMap(ctx_r1.leftSection === "none" ? "pointer-events-none opacity-0" : "");
-    i0.ɵɵadvance(8);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.modeLr() ? "Left Section" : "Section", "\u00A0 ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.modeLr() ? "L.Sec" : "Sec", "\u00A0 ");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.leftSection !== "none" && !ctx_r1.modeLr() ? 11 : -1);
 } }
 function NeighborsComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 7)(1, "span");
-    i0.ɵɵtext(2, " Loading ");
+    i0.ɵɵelementStart(0, "p", 5)(1, "span");
+    i0.ɵɵtext(2, "Loading");
     i0.ɵɵelementEnd()();
 } }
 function NeighborsComponent_Conditional_5_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "h3", 19)(1, "span", 17);
-    i0.ɵɵtext(2, " Section\u00A0 ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 16);
-    i0.ɵɵtext(4, " Sec\u00A0 ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "p", 20, 2);
+    i0.ɵɵelementStart(0, "h3", 11)(1, "span", 12);
+    i0.ɵɵtext(2, "Section ");
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 13, 1);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵclassProp("hidden", ctx_r1.is3d);
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("hidden", ctx_r1.is3d);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("innerHTML", ctx_r1.selectedSection, i0.ɵɵsanitizeHtml);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.section);
 } }
 function NeighborsComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, NeighborsComponent_Conditional_5_Conditional_0_Template, 7, 5, "h3", 19);
+    i0.ɵɵtemplate(0, NeighborsComponent_Conditional_5_Conditional_0_Template, 6, 1, "h3", 11);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵconditional(ctx_r1.selectedSection ? 0 : -1);
-} }
-function NeighborsComponent_Conditional_6_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 18, 3);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.rightSection, " ");
+    i0.ɵɵconditional(ctx_r1.section ? 0 : -1);
 } }
 function NeighborsComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 21);
-    i0.ɵɵlistener("click", function NeighborsComponent_Conditional_6_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.navigateToSection(ctx_r1.sectionData.r)); })("keypress.enter", function NeighborsComponent_Conditional_6_Template_div_keypress_enter_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.navigateToSection(ctx_r1.sectionData.r)); });
-    i0.ɵɵelementStart(1, "div", 10)(2, "i", 11);
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵlistener("click", function NeighborsComponent_Conditional_6_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.navigateToSection(ctx_r1.rightSection)); })("keypress.enter", function NeighborsComponent_Conditional_6_Template_div_keypress_enter_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.navigateToSection(ctx_r1.rightSection)); });
+    i0.ɵɵelementStart(1, "i", 8);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(3, "svg", 12);
-    i0.ɵɵelement(4, "path", 22);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(5, "div", 14)(6, "p", 15)(7, "span", 16);
-    i0.ɵɵtext(8);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 17);
-    i0.ɵɵtext(10);
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(11, NeighborsComponent_Conditional_6_Conditional_11_Template, 3, 1, "span", 18);
+    i0.ɵɵelementStart(2, "svg", 9);
+    i0.ɵɵelement(3, "path", 15);
     i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵclassMap(ctx_r1.rightSection === "none" ? "pointer-events-none opacity-0" : "");
-    i0.ɵɵadvance(8);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.modeLr() ? "Right Section" : "Section", "\u00A0 ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.modeLr() ? "R.Sec" : "Sec", "\u00A0 ");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.rightSection !== "none" && !ctx_r1.modeLr() ? 11 : -1);
 } }
 class NeighborsComponent {
     // VIEWCHILD
@@ -3881,16 +3822,21 @@ class NeighborsComponent {
     leftSectionElement;
     rightSectionElement;
     // SERVICES
-    // private readonly uiconfig: Signal<UiConfiguration> = inject(UiService).uiConfig;
     cdr = inject(ChangeDetectorRef);
-    /**
-     * Additional classes
-     */
+    // REQUIRED INPUTS
+    neighborsData = input.required();
+    currentSectionId = input.required();
+    translateTdcToMmc = input.required();
+    translateMmcToTdc = input.required();
+    hasAvailability = input.required();
+    // OPTIONAL INPUTS
+    isLoading = input(false);
+    showElement = input(true);
+    modeLr = input(false);
     className = input('');
-    /**
-     * The current theme applied to the component.
-     */
     theme = input('theme-sdc');
+    // OUTPUTS
+    sectionChange = new EventEmitter();
     /**
      * Computed class string that combines theme and user classes.
      */
@@ -3901,193 +3847,146 @@ class NeighborsComponent {
             .filter(Boolean)
             .join(' ');
     });
-    // CONFIGURATION
-    // private readonly config: Signal<Neighbor> = computed((): Neighbor => this.uiconfig()['Neighbors']);
-    // public readonly data: Signal<any['data']> = computed((): any['data'] => this.config().data);
-    // public readonly enabled: Signal<boolean> = computed((): boolean => this.config().enabled);
-    // public readonly modeLr: Signal<boolean> = computed((): boolean => this.config().modeLr);
-    modeLr = computed(() => false);
-    //TRANSLATION CONFIG
-    // private readonly translationConfig: Signal<Translation> = computed((): Translation => this.uiconfig()['Translation']);
-    // public readonly translationData: Signal<any['data']> = computed(
-    //   (): Translation['data'] => this.translationConfig().data
-    // );
-    translationEnabled = computed(() => false);
-    // GLOBAL STATE
     // COMPONENT STATE
-    isLoading3d = false;
-    showElement = true;
     subscriptions = [];
-    // SECTION DATA
-    selectedSection = '301';
-    sectionData = { l: '122', r: '124' };
-    // EFFECTS
-    onViewChange = effect(() => {
-        const view = 'seatmap';
-        // const view: any | null = this.view();
-        switch (view) {
-            // Seteamos sección, si está oculto mostramos elemento y comprobamos si el texto seatmap es false para toglearlo.
-            // case AppViews.Seatmap:
-            case 'seatmap': {
-                this.setCurrentSection();
-                if (!this.showElement) {
-                    this.toggleNeighbors(true);
-                }
-                break;
-            }
-            // Seteamos sección en base al viewer3d, si está oculto mostramos elemento y comprobamos si el texto 3d es false para toglearlo.
-            // case AppViews.Pano:
-            case 'pano': {
-                this.setCurrentSection('section');
-                // this.setCurrentSection(this.dvmService.viewer3d.getViewId());
-                if (!this.showElement) {
-                    this.toggleNeighbors(true);
-                }
-                break;
+    // COMPUTED STATE
+    leftSectionId = computed(() => {
+        try {
+            const currentId = this.currentSectionId();
+            if (!currentId)
+                return null;
+            return this.findAvailableNeighbor('prev', currentId);
+        }
+        catch (error) {
+            return null;
+        }
+    });
+    rightSectionId = computed(() => {
+        try {
+            const currentId = this.currentSectionId();
+            if (!currentId)
+                return null;
+            return this.findAvailableNeighbor('next', currentId);
+        }
+        catch (error) {
+            return null;
+        }
+    });
+    currentSectionLabel = computed(() => {
+        try {
+            const currentId = this.currentSectionId();
+            if (!currentId)
+                return 'Loading';
+            // Translate TDC ID to MMC ID for display
+            const mmcId = this.translateTdcToMmc()(currentId);
+            if (!mmcId)
+                return currentId; // Fallback to TDC ID if translation fails
+            // Extract section number from MMC ID (assuming format like "S_31" or similar)
+            return mmcId.replace(/^S_/, '');
+        }
+        catch (error) {
+            return 'Loading';
+        }
+    });
+    leftSectionLabel = computed(() => {
+        try {
+            const leftId = this.leftSectionId();
+            if (!leftId)
+                return null;
+            // Translate TDC ID to MMC ID for display
+            const mmcId = this.translateTdcToMmc()(leftId);
+            if (!mmcId)
+                return leftId; // Fallback to TDC ID if translation fails
+            // Extract section number from MMC ID
+            return mmcId.replace(/^S_/, '');
+        }
+        catch (error) {
+            return null;
+        }
+    });
+    rightSectionLabel = computed(() => {
+        try {
+            const rightId = this.rightSectionId();
+            if (!rightId)
+                return null;
+            // Translate TDC ID to MMC ID for display
+            const mmcId = this.translateTdcToMmc()(rightId);
+            if (!mmcId)
+                return rightId; // Fallback to TDC ID if translation fails
+            // Extract section number from MMC ID
+            return mmcId.replace(/^S_/, '');
+        }
+        catch (error) {
+            return null;
+        }
+    });
+    // NEIGHBOR RESOLUTION ALGORITHM
+    findAvailableNeighbor(type, currentSectionTdcId) {
+        try {
+            const neighborKey = type === 'prev' ? 'l' : 'r';
+            const noNeighborValue = 'none';
+            // 1. Translate TDC → MMC
+            const currentSectionMmcId = this.translateTdcToMmc()(currentSectionTdcId);
+            if (!currentSectionMmcId)
+                return null;
+            // 2. Look up neighbor in data
+            const neighbors = this.neighborsData();
+            const neighbor = neighbors[currentSectionMmcId];
+            const neighborSectionMmcId = neighbor ? neighbor[neighborKey] : noNeighborValue;
+            // 3. Handle 'none' boundary
+            if (neighborSectionMmcId === noNeighborValue) {
+                return null;
             }
-            // changesmorechangesmoar
-            default: {
-                if (this.showElement) {
-                    this.toggleNeighbors(false);
-                    setTimeout(() => this.setCurrentSection(null), 300);
-                }
-                break;
+            // 4. Translate MMC → TDC
+            const neighborSectionTdcId = this.translateMmcToTdc()(neighborSectionMmcId);
+            if (!neighborSectionTdcId)
+                return null;
+            // 5. Check availability
+            if (this.hasAvailability()(neighborSectionTdcId)) {
+                return neighborSectionTdcId;
             }
+            // 6. Recursively find next available (skip unavailable sections)
+            return this.findAvailableNeighbor(type, neighborSectionTdcId);
         }
-    });
+        catch (error) {
+            return null;
+        }
+    }
     // GETTERS
     get leftSection() {
-        return '300';
-        // if (!this.sectionData) return null;
-        // return this.translationEnabled() && this.translationData()[this.sectionData.l]
-        //   ? this.translationData()[this.sectionData.l]
-        //   : this.sectionData.l;
+        return this.leftSectionId();
     }
     get rightSection() {
-        return '302';
-        // return this.translationEnabled() && this.translationData()[this.sectionData.r]
-        //   ? this.translationData()[this.sectionData.r]
-        //   : this.sectionData.r;
+        return this.rightSectionId();
     }
     get section() {
-        return '301';
-        // if (this.view() !== AppViews.Pano) {
-        //   return this.dvmFormatter.transform(this.selectedSection!);
-        // }
-        // return;
-    }
-    get is3d() {
-        return false;
-        // return this.view() === AppViews.Pano;
-    }
-    ngOnInit() {
-        this.initComponent();
+        return this.currentSectionLabel();
     }
     ngOnDestroy() {
         this.subscriptions.forEach((sub) => sub.unsubscribe());
-        this.onViewChange.destroy();
     }
     // METHODS
     navigateToSection(section) {
         if (section === 'none' || !section) {
             return;
-        } // Si no hay sección, no hacemos nada
-        // this.dvmService.loadMap(section).subscribe((): void => {
-        //   this.setCurrentSection(section);
-        // });
-    }
-    setCurrentSection(sectionId) {
-        let section;
-        /**
-         * El parametro sectionId puede ser null o undefined, si no es null, comprobamos
-         * si es undefined. Si es undefined, tomamos el id del mapa actual, si no, lo tomamos del parametro.
-         */
-        // if (sectionId !== null) {
-        //   // section = sectionId !== undefined ? sectionId : this.dvmService.currentMap;
-        // }
-        section = 'section';
-        // const sectionData = section ? this.data()[section] : null;
-        const sectionData = section ? { seats: ['hello'] } : null;
-        // Si ya hay, animamos el cambio de sección
-        if (this.selectedSection && section) {
-            this.animateSectionNumbers(section, sectionData);
-        }
-        // Si no hay, seteamos la sección y los datos
+        }
+        const leftId = this.leftSectionId();
+        const rightId = this.rightSectionId();
+        let direction;
+        if (section === leftId) {
+            direction = 'prev';
+        }
+        else if (section === rightId) {
+            direction = 'next';
+        }
         else {
-            if (section) {
-                const translated = null;
-                // const translated = this.translationEnabled() ? this.translationData()[section] : null;
-                this.selectedSection = translated ? translated : '<span> section </span>';
-                // this.selectedSection = translated ? translated : this.dvmFormatter.transform(section);
-            }
-            else {
-                this.selectedSection = section;
-            }
-            this.sectionData = sectionData;
-        }
-        this.cdr.markForCheck();
-    }
-    setSection(section, is3d = false) {
-        // const translated = this.translationEnabled() ? this.translationData()[section] : null;
-        // if (translated) {
-        //   this.selectedSection = this.translationData()[section];
-        // } else if (!is3d) {
-        //   this.selectedSection = this.dvmFormatter.transform(section);
-        // }
-        this.selectedSection = 'Section';
-        this.cdr.detectChanges();
-    }
-    toggleNeighbors(show) {
-        animate(this.neighborsContainer.nativeElement, {
-            translateY: show ? 0 : 50,
-            opacity: show ? 1 : 0,
-            duration: 300,
-            easing: 'easeInOutQuad',
-            begin: () => {
-                if (show && !this.showElement) {
-                    this.showElement = true;
-                }
-            },
-            complete: () => {
-                if (!show) {
-                    this.showElement = false;
-                }
-            },
-        });
-    }
-    animateSectionNumbers(section, sectionData) {
-        const targets = [
-            this.currentSection?.nativeElement ?? null,
-            this.currentSection3d?.nativeElement ?? null,
-            this.leftSectionElement?.nativeElement ?? null,
-            this.rightSectionElement?.nativeElement ?? null,
-        ].filter(element => element !== null);
-        animate(targets, {
-            duration: 500,
-            filter: ['blur(0px)', 'blur(2px)', 'blur(0px)'],
-            easing: 'easeInOutQuad',
-            update: (animation) => {
-                if (animation.progress >= 50 && this.selectedSection !== section.split('_')[1]) {
-                    this.setSection(section, true);
-                    // this.setSection(section, this.view() === AppViews.Pano);
-                    this.sectionData = sectionData;
-                }
-            },
-        });
-    }
-    initComponent() {
-        //   const viewer3d = this.dvmService.viewer3d;
-        //   viewer3d.waitInitialize().subscribe((): void => {
-        //     this.subscriptions.push(
-        //       viewer3d.getObservable('load_start').subscribe((): boolean => (this.isLoading3d = true)),
-        //       viewer3d.getObservable('load_success').subscribe((): boolean => (this.isLoading3d = false))
-        //     );
-        //   });
-        // }
+            return;
+        }
+        this.sectionChange.emit({ direction, sectionId: section });
     }
     static ɵfac = function NeighborsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || NeighborsComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NeighborsComponent, selectors: [["sdc-neighbors"]], viewQuery: function NeighborsComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$7, 5);
+            i0.ɵɵviewQuery(_c0$8, 5);
             i0.ɵɵviewQuery(_c1$2, 5);
             i0.ɵɵviewQuery(_c2, 5);
             i0.ɵɵviewQuery(_c3, 5);
@@ -4099,28 +3998,28 @@ class NeighborsComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.currentSection3d = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.leftSectionElement = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.rightSectionElement = _t.first);
-        } }, inputs: { className: [1, "className"], theme: [1, "theme"] }, decls: 7, vars: 7, consts: [["neighborsContainer", ""], ["leftSectionNumber", ""], ["currentSection", ""], ["rightSectionNumber", ""], [1, "neighbors-container"], ["tabindex", "0", 1, "neighbor-button-left", "neighbor-button", 3, "class"], [1, "current-section-wrapper"], [1, "current-section-loading"], ["tabindex", "1", 1, "neighbor-button-right", "neighbor-button", 3, "class"], ["tabindex", "0", 1, "neighbor-button-left", "neighbor-button", 3, "click", "keypress.enter"], [1, "neighbor-button-icon-wrapper"], [1, "neighbor-button-icon"], ["fill", "none", "stroke", "currentColor", "stroke-width", "3", "viewBox", "0 0 24 24", "xmlns", "http://www.w3.org/2000/svg"], ["d", "M15.75 19.5 8.25 12l7.5-7.5", "stroke-linecap", "round", "stroke-linejoin", "round"], [1, "neighbor-button-text-wrapper"], [1, "neighbor-button-text"], [1, "prefix", "xs-prefix"], [1, "prefix", "sm-prefix"], [1, "section-number"], [1, "current-section-text"], [3, "innerHTML"], ["tabindex", "1", 1, "neighbor-button-right", "neighbor-button", 3, "click", "keypress.enter"], ["d", "m8.25 4.5 7.5 7.5-7.5 7.5", "stroke-linecap", "round", "stroke-linejoin", "round"]], template: function NeighborsComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 4, 0);
-            i0.ɵɵtemplate(2, NeighborsComponent_Conditional_2_Template, 12, 5, "div", 5);
-            i0.ɵɵelementStart(3, "div", 6);
-            i0.ɵɵtemplate(4, NeighborsComponent_Conditional_4_Template, 3, 0, "p", 7)(5, NeighborsComponent_Conditional_5_Template, 1, 1);
+        } }, inputs: { neighborsData: [1, "neighborsData"], currentSectionId: [1, "currentSectionId"], translateTdcToMmc: [1, "translateTdcToMmc"], translateMmcToTdc: [1, "translateMmcToTdc"], hasAvailability: [1, "hasAvailability"], isLoading: [1, "isLoading"], showElement: [1, "showElement"], modeLr: [1, "modeLr"], className: [1, "className"], theme: [1, "theme"] }, outputs: { sectionChange: "sectionChange" }, decls: 7, vars: 7, consts: [["neighborsContainer", ""], ["currentSection", ""], [1, "neighbors-container"], ["tabindex", "0", 1, "neighbor-button-left", "neighbor-button"], [1, "current-section-wrapper"], [1, "current-section-loading"], ["tabindex", "1", 1, "neighbor-button-right", "neighbor-button"], ["tabindex", "0", 1, "neighbor-button-left", "neighbor-button", 3, "click", "keypress.enter"], [1, "neighbor-button-icon"], ["fill", "none", "stroke", "currentColor", "stroke-width", "2", "viewBox", "0 0 24 24", "xmlns", "http://www.w3.org/2000/svg"], ["d", "M15.75 19.5 8.25 12l7.5-7.5", "stroke-linecap", "round", "stroke-linejoin", "round"], [1, "current-section-text"], [1, "prefix"], [1, "section-number"], ["tabindex", "1", 1, "neighbor-button-right", "neighbor-button", 3, "click", "keypress.enter"], ["d", "m8.25 4.5 7.5 7.5-7.5 7.5", "stroke-linecap", "round", "stroke-linejoin", "round"]], template: function NeighborsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 2, 0);
+            i0.ɵɵtemplate(2, NeighborsComponent_Conditional_2_Template, 4, 0, "div", 3);
+            i0.ɵɵelementStart(3, "div", 4);
+            i0.ɵɵtemplate(4, NeighborsComponent_Conditional_4_Template, 3, 0, "p", 5)(5, NeighborsComponent_Conditional_5_Template, 1, 1);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(6, NeighborsComponent_Conditional_6_Template, 12, 5, "div", 8);
+            i0.ɵɵtemplate(6, NeighborsComponent_Conditional_6_Template, 4, 0, "div", 6);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵclassMap(ctx.computedClass());
-            i0.ɵɵclassProp("hidden", !ctx.showElement);
+            i0.ɵɵclassProp("hidden", !ctx.showElement());
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.leftSection ? 2 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.isLoading3d ? 4 : 5);
+            i0.ɵɵconditional(ctx.isLoading() ? 4 : 5);
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.rightSection ? 6 : -1);
-        } }, styles: [".sdc-neighbors[_ngcontent-%COMP%]{--sdc-neighbors-background-color: var(--color-pure-black);--sdc-neighbors-text-color: var(--color-pure-white);--sdc-neighbors-border-radius: var(--radius-full);--sdc-neighbors-padding-x: var(--space-3);--sdc-neighbors-padding-y: var(--space-2_5);--sdc-neighbors-height: var(--space-6);--sdc-neighbors-max-width: 11rem;--sdc-neighbors-button-width: 4rem;--sdc-neighbors-button-height: var(--space-6);--sdc-neighbors-button-icon-color: var(--color-pure-white);--sdc-neighbors-button-hover-background-color: var(--color-pure-black);--sdc-neighbors-button-text-font-weight: var(--font-semibold);--sdc-neighbors-button-text-font-size: var(--text-xxs);--sdc-neighbors-button-text-transform: uppercase;--sdc-neighbors-prefix-opacity: .7;--sdc-neighbors-current-section-min-width: 6rem;--sdc-neighbors-current-section-loading-font-weight: var(--font-semibold);--sdc-neighbors-current-section-loading-font-size: var(--text-sm);--sdc-neighbors-current-section-text-font-weight: var(--font-semibold);--sdc-neighbors-current-section-text-font-size: var(--text-xxs);--sdc-neighbors-current-section-text-transform: uppercase}.neighbors-container[_ngcontent-%COMP%]{position:relative;display:flex;justify-content:center;align-items:center;background-color:var(--sdc-neighbors-background-color);margin-left:auto;margin-right:auto;padding-left:var(--sdc-neighbors-padding-x);padding-right:var(--sdc-neighbors-padding-x);padding-top:var(--sdc-neighbors-padding-y);padding-bottom:var(--sdc-neighbors-padding-y);border-radius:var(--sdc-neighbors-border-radius);height:var(--sdc-neighbors-height);pointer-events:auto}@media (min-width: 1024px){.neighbors-container[_ngcontent-%COMP%]{max-width:var(--sdc-neighbors-max-width)}}@media (min-width: 1280px){.neighbors-container[_ngcontent-%COMP%]{--sdc-neighbors-max-width: 16rem}}@media (min-width: 1536px){.neighbors-container[_ngcontent-%COMP%]{--sdc-neighbors-max-width: 20rem}}@media (min-width: 640px){.neighbors-container[_ngcontent-%COMP%]{--sdc-neighbors-height: var(--space-8)}}.neighbor-button[_ngcontent-%COMP%]{position:absolute;display:flex;align-items:center;width:var(--sdc-neighbors-button-width);height:var(--sdc-neighbors-button-height);transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;cursor:pointer}@media (min-width: 640px){.neighbor-button[_ngcontent-%COMP%]{--sdc-neighbors-button-width: 124px;--sdc-neighbors-button-height: var(--space-8)}}.neighbor-button-left[_ngcontent-%COMP%]{left:-2.75rem;flex-direction:row-reverse;justify-content:space-between}@media (min-width: 640px){.neighbor-button-left[_ngcontent-%COMP%]{left:-6rem}}.neighbor-button-right[_ngcontent-%COMP%]{right:-2.75rem;flex-direction:row;justify-content:space-between}@media (min-width: 640px){.neighbor-button-right[_ngcontent-%COMP%]{right:-6rem}}.neighbor-button-icon-wrapper[_ngcontent-%COMP%]{display:flex;align-items:center;height:100%;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.neighbor-button[_ngcontent-%COMP%]:hover   .neighbor-button-icon-wrapper[_ngcontent-%COMP%]{background-color:var(--sdc-neighbors-button-hover-background-color)}.neighbor-button-icon[_ngcontent-%COMP%]{display:block;margin-top:auto;margin-bottom:auto;color:var(--sdc-neighbors-button-icon-color)}.neighbor-button-icon[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%]{width:.875rem;height:.875rem}.neighbor-button-text-wrapper[_ngcontent-%COMP%]{display:flex;flex-grow:1;align-items:center;background-color:var(--sdc-neighbors-background-color);opacity:0;height:100%;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.neighbor-button[_ngcontent-%COMP%]:hover   .neighbor-button-text-wrapper[_ngcontent-%COMP%]{opacity:1}.neighbor-button-left[_ngcontent-%COMP%]   .neighbor-button-text-wrapper[_ngcontent-%COMP%]{padding-right:.5rem;padding-left:1.25rem;border-top-left-radius:var(--sdc-neighbors-border-radius);border-bottom-left-radius:var(--sdc-neighbors-border-radius)}.neighbor-button-right[_ngcontent-%COMP%]   .neighbor-button-text-wrapper[_ngcontent-%COMP%]{padding-right:1.25rem;padding-left:.5rem;border-top-right-radius:var(--sdc-neighbors-border-radius);border-bottom-right-radius:var(--sdc-neighbors-border-radius)}.neighbor-button-text[_ngcontent-%COMP%]{font-weight:var(--sdc-neighbors-button-text-font-weight);color:var(--sdc-neighbors-text-color);font-size:var(--sdc-neighbors-button-text-font-size);text-transform:var(--sdc-neighbors-button-text-transform)}.neighbor-button-text[_ngcontent-%COMP%]   .prefix[_ngcontent-%COMP%]{opacity:var(--sdc-neighbors-prefix-opacity);white-space:nowrap}.neighbor-button-text[_ngcontent-%COMP%]   .xs-prefix[_ngcontent-%COMP%]{display:none}@media (min-width: 640px){.neighbor-button-text[_ngcontent-%COMP%]   .xs-prefix[_ngcontent-%COMP%]{display:inline}}.neighbor-button-text[_ngcontent-%COMP%]   .sm-prefix[_ngcontent-%COMP%]{display:inline}@media (min-width: 640px){.neighbor-button-text[_ngcontent-%COMP%]   .sm-prefix[_ngcontent-%COMP%]{display:none}}.neighbor-button-text[_ngcontent-%COMP%]   .section-number[_ngcontent-%COMP%]{white-space:nowrap}.current-section-wrapper[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;margin-left:auto;margin-right:auto;min-width:var(--sdc-neighbors-current-section-min-width);cursor:default}@media (min-width: 640px){.current-section-wrapper[_ngcontent-%COMP%]{--sdc-neighbors-current-section-min-width: 14rem}}.current-section-loading[_ngcontent-%COMP%]{font-weight:var(--sdc-neighbors-current-section-loading-font-weight);color:var(--sdc-neighbors-text-color);font-size:var(--sdc-neighbors-current-section-loading-font-size)}.current-section-text[_ngcontent-%COMP%]{display:flex;font-weight:var(--sdc-neighbors-current-section-text-font-weight);color:var(--sdc-neighbors-text-color);font-size:var(--sdc-neighbors-current-section-text-font-size);text-transform:var(--sdc-neighbors-current-section-text-transform)}.current-section-text[_ngcontent-%COMP%]   .prefix[_ngcontent-%COMP%]{opacity:var(--sdc-neighbors-prefix-opacity)}.current-section-text[_ngcontent-%COMP%]   .sm-prefix[_ngcontent-%COMP%]{display:none}@media (min-width: 640px){.current-section-text[_ngcontent-%COMP%]   .sm-prefix[_ngcontent-%COMP%]{display:block}}.current-section-text[_ngcontent-%COMP%]   .xs-prefix[_ngcontent-%COMP%]{display:block}@media (min-width: 640px){.current-section-text[_ngcontent-%COMP%]   .xs-prefix[_ngcontent-%COMP%]{display:none}}"], changeDetection: 0 });
+        } }, styles: [".sdc-neighbors[_ngcontent-%COMP%]{--sdc-neighbors-background-color: transparent;--sdc-neighbors-text-color: var(--color-pure-black);--sdc-neighbors-border-radius: 1rem;--sdc-neighbors-padding-x: var(--space-3);--sdc-neighbors-padding-y: var(--space-2_5);--sdc-neighbors-height: var(--space-6);--sdc-neighbors-max-width: 25rem;--sdc-neighbors-button-width: 8rem;--sdc-neighbors-button-height: var(--space-6);--sdc-neighbors-button-icon-color: var(--color-pure-black);--sdc-neighbors-button-hover-background-color: #f5f5f5;--sdc-neighbors-button-text-font-weight: var(--font-medium);--sdc-neighbors-button-text-font-size: var(--text-sm);--sdc-neighbors-button-text-transform: none;--sdc-neighbors-prefix-opacity: 1;--sdc-neighbors-current-section-min-width: 6rem;--sdc-neighbors-current-section-loading-font-weight: var(--font-semibold);--sdc-neighbors-current-section-loading-font-size: var(--text-sm);--sdc-neighbors-current-section-text-font-weight: var(--font-semibold);--sdc-neighbors-current-section-text-font-size: var(--text-sm);--sdc-neighbors-current-section-text-transform: none}.neighbors-container[_ngcontent-%COMP%]{position:relative;display:flex;justify-content:center;align-items:center;background-color:var(--sdc-neighbors-background-color);margin-left:auto;margin-right:auto;padding-left:var(--sdc-neighbors-padding-x);padding-right:var(--sdc-neighbors-padding-x);padding-top:var(--sdc-neighbors-padding-y);padding-bottom:var(--sdc-neighbors-padding-y);border-radius:var(--sdc-neighbors-border-radius);height:var(--sdc-neighbors-height);max-width:var(--sdc-neighbors-max-width);pointer-events:auto}@media (min-width: 640px){.neighbors-container[_ngcontent-%COMP%]{--sdc-neighbors-height: var(--space-8)}}.neighbor-button[_ngcontent-%COMP%]{position:relative;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;background-color:#fff;border-radius:50%;transition-property:opacity,background-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;cursor:pointer;box-shadow:0 1px 3px #0000001a}@media (min-width: 640px){.neighbor-button[_ngcontent-%COMP%]{width:3rem;height:3rem}}.neighbor-button-left[_ngcontent-%COMP%]{margin-right:.75rem}.neighbor-button-right[_ngcontent-%COMP%]{margin-left:.75rem}.neighbor-button[_ngcontent-%COMP%]:hover{background-color:var(--sdc-neighbors-button-hover-background-color)}.neighbor-button-icon[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;color:var(--sdc-neighbors-button-icon-color)}.neighbor-button-icon[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%]{width:1rem;height:1rem}.current-section-text[_ngcontent-%COMP%]   .section-number[_ngcontent-%COMP%]{font-weight:var(--font-bold);white-space:nowrap}.current-section-wrapper[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;margin-left:auto;margin-right:auto;min-width:var(--sdc-neighbors-current-section-min-width);background-color:#fff;border-radius:var(--sdc-neighbors-border-radius);padding:.75rem 1rem;cursor:default;box-shadow:0 1px 3px #0000001a}@media (min-width: 640px){.current-section-wrapper[_ngcontent-%COMP%]{--sdc-neighbors-current-section-min-width: 14rem}}.current-section-loading[_ngcontent-%COMP%]{font-weight:var(--sdc-neighbors-current-section-loading-font-weight);color:var(--sdc-neighbors-text-color);font-size:var(--sdc-neighbors-current-section-loading-font-size)}.current-section-text[_ngcontent-%COMP%]{display:flex;font-weight:var(--sdc-neighbors-current-section-text-font-weight);color:var(--sdc-neighbors-text-color);font-size:var(--sdc-neighbors-current-section-text-font-size);text-transform:var(--sdc-neighbors-current-section-text-transform)}.current-section-text[_ngcontent-%COMP%]   .prefix[_ngcontent-%COMP%]{opacity:var(--sdc-neighbors-prefix-opacity);margin-right:.35rem}.current-section-text[_ngcontent-%COMP%]   .sm-prefix[_ngcontent-%COMP%]{display:none}@media (min-width: 640px){.current-section-text[_ngcontent-%COMP%]   .sm-prefix[_ngcontent-%COMP%]{display:block}}.current-section-text[_ngcontent-%COMP%]   .xs-prefix[_ngcontent-%COMP%]{display:block}@media (min-width: 640px){.current-section-text[_ngcontent-%COMP%]   .xs-prefix[_ngcontent-%COMP%]{display:none}}"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NeighborsComponent, [{
         type: Component,
-        args: [{ selector: 'sdc-neighbors', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #neighborsContainer class=\"neighbors-container\" [class]=\"computedClass()\" [class.hidden]=\"!showElement\">\n  <!-- LEFT SECTION BUTTON -->\n  @if (leftSection) {\n    <div\n      class=\"neighbor-button-left neighbor-button\"\n      tabindex=\"0\"\n      [class]=\"leftSection === 'none' ? 'pointer-events-none opacity-0' : ''\"\n      (click)=\"navigateToSection(sectionData!.l)\"\n      (keypress.enter)=\"navigateToSection(sectionData!.l)\">\n      <div class=\"neighbor-button-icon-wrapper\">\n        <i class=\"neighbor-button-icon\">\n          <svg\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"3\"\n            viewBox=\"0 0 24 24\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M15.75 19.5 8.25 12l7.5-7.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </i>\n      </div>\n\n      <div class=\"neighbor-button-text-wrapper\">\n        <p class=\"neighbor-button-text\">\n          <span class=\"prefix xs-prefix\"> {{ modeLr() ? 'Left Section' : 'Section' }}&nbsp; </span>\n          <span class=\"prefix sm-prefix\"> {{ modeLr() ? 'L.Sec' : 'Sec' }}&nbsp; </span>\n\n          @if (leftSection !== 'none' && !modeLr()) {\n            <span #leftSectionNumber class=\"section-number\">\n              {{ leftSection }}\n            </span>\n          }\n        </p>\n      </div>\n    </div>\n  }\n  <div class=\"current-section-wrapper\">\n    @if (isLoading3d) {\n      <p class=\"current-section-loading\">\n        <span> Loading </span>\n      </p>\n    } @else {\n      @if (selectedSection) {\n        <h3 class=\"current-section-text\">\n          <span class=\"prefix sm-prefix\" [class.hidden]=\"is3d\"> Section&nbsp; </span>\n          <span class=\"prefix xs-prefix\" [class.hidden]=\"is3d\"> Sec&nbsp; </span>\n          <p #currentSection [innerHTML]=\"selectedSection\"></p>\n        </h3>\n      }\n    }\n  </div>\n\n  <!-- RIGHT SECTION BUTTON -->\n  @if (rightSection) {\n    <div\n      class=\"neighbor-button-right neighbor-button\"\n      tabindex=\"1\"\n      [class]=\"rightSection === 'none' ? 'pointer-events-none opacity-0' : ''\"\n      (click)=\"navigateToSection(sectionData!.r)\"\n      (keypress.enter)=\"navigateToSection(sectionData!.r)\">\n      <div class=\"neighbor-button-icon-wrapper\">\n        <i class=\"neighbor-button-icon\">\n          <svg\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"3\"\n            viewBox=\"0 0 24 24\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"m8.25 4.5 7.5 7.5-7.5 7.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </i>\n      </div>\n\n      <div class=\"neighbor-button-text-wrapper\">\n        <p class=\"neighbor-button-text\">\n          <span class=\"prefix xs-prefix\"> {{ modeLr() ? 'Right Section' : 'Section' }}&nbsp; </span>\n\n          <span class=\"prefix sm-prefix\"> {{ modeLr() ? 'R.Sec' : 'Sec' }}&nbsp; </span>\n\n          @if (rightSection !== 'none' && !modeLr()) {\n            <span #rightSectionNumber class=\"section-number\">\n              {{ rightSection }}\n            </span>\n          }\n        </p>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".sdc-neighbors{--sdc-neighbors-background-color: var(--color-pure-black);--sdc-neighbors-text-color: var(--color-pure-white);--sdc-neighbors-border-radius: var(--radius-full);--sdc-neighbors-padding-x: var(--space-3);--sdc-neighbors-padding-y: var(--space-2_5);--sdc-neighbors-height: var(--space-6);--sdc-neighbors-max-width: 11rem;--sdc-neighbors-button-width: 4rem;--sdc-neighbors-button-height: var(--space-6);--sdc-neighbors-button-icon-color: var(--color-pure-white);--sdc-neighbors-button-hover-background-color: var(--color-pure-black);--sdc-neighbors-button-text-font-weight: var(--font-semibold);--sdc-neighbors-button-text-font-size: var(--text-xxs);--sdc-neighbors-button-text-transform: uppercase;--sdc-neighbors-prefix-opacity: .7;--sdc-neighbors-current-section-min-width: 6rem;--sdc-neighbors-current-section-loading-font-weight: var(--font-semibold);--sdc-neighbors-current-section-loading-font-size: var(--text-sm);--sdc-neighbors-current-section-text-font-weight: var(--font-semibold);--sdc-neighbors-current-section-text-font-size: var(--text-xxs);--sdc-neighbors-current-section-text-transform: uppercase}.neighbors-container{position:relative;display:flex;justify-content:center;align-items:center;background-color:var(--sdc-neighbors-background-color);margin-left:auto;margin-right:auto;padding-left:var(--sdc-neighbors-padding-x);padding-right:var(--sdc-neighbors-padding-x);padding-top:var(--sdc-neighbors-padding-y);padding-bottom:var(--sdc-neighbors-padding-y);border-radius:var(--sdc-neighbors-border-radius);height:var(--sdc-neighbors-height);pointer-events:auto}@media (min-width: 1024px){.neighbors-container{max-width:var(--sdc-neighbors-max-width)}}@media (min-width: 1280px){.neighbors-container{--sdc-neighbors-max-width: 16rem}}@media (min-width: 1536px){.neighbors-container{--sdc-neighbors-max-width: 20rem}}@media (min-width: 640px){.neighbors-container{--sdc-neighbors-height: var(--space-8)}}.neighbor-button{position:absolute;display:flex;align-items:center;width:var(--sdc-neighbors-button-width);height:var(--sdc-neighbors-button-height);transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;cursor:pointer}@media (min-width: 640px){.neighbor-button{--sdc-neighbors-button-width: 124px;--sdc-neighbors-button-height: var(--space-8)}}.neighbor-button-left{left:-2.75rem;flex-direction:row-reverse;justify-content:space-between}@media (min-width: 640px){.neighbor-button-left{left:-6rem}}.neighbor-button-right{right:-2.75rem;flex-direction:row;justify-content:space-between}@media (min-width: 640px){.neighbor-button-right{right:-6rem}}.neighbor-button-icon-wrapper{display:flex;align-items:center;height:100%;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.neighbor-button:hover .neighbor-button-icon-wrapper{background-color:var(--sdc-neighbors-button-hover-background-color)}.neighbor-button-icon{display:block;margin-top:auto;margin-bottom:auto;color:var(--sdc-neighbors-button-icon-color)}.neighbor-button-icon svg{width:.875rem;height:.875rem}.neighbor-button-text-wrapper{display:flex;flex-grow:1;align-items:center;background-color:var(--sdc-neighbors-background-color);opacity:0;height:100%;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.neighbor-button:hover .neighbor-button-text-wrapper{opacity:1}.neighbor-button-left .neighbor-button-text-wrapper{padding-right:.5rem;padding-left:1.25rem;border-top-left-radius:var(--sdc-neighbors-border-radius);border-bottom-left-radius:var(--sdc-neighbors-border-radius)}.neighbor-button-right .neighbor-button-text-wrapper{padding-right:1.25rem;padding-left:.5rem;border-top-right-radius:var(--sdc-neighbors-border-radius);border-bottom-right-radius:var(--sdc-neighbors-border-radius)}.neighbor-button-text{font-weight:var(--sdc-neighbors-button-text-font-weight);color:var(--sdc-neighbors-text-color);font-size:var(--sdc-neighbors-button-text-font-size);text-transform:var(--sdc-neighbors-button-text-transform)}.neighbor-button-text .prefix{opacity:var(--sdc-neighbors-prefix-opacity);white-space:nowrap}.neighbor-button-text .xs-prefix{display:none}@media (min-width: 640px){.neighbor-button-text .xs-prefix{display:inline}}.neighbor-button-text .sm-prefix{display:inline}@media (min-width: 640px){.neighbor-button-text .sm-prefix{display:none}}.neighbor-button-text .section-number{white-space:nowrap}.current-section-wrapper{display:flex;justify-content:center;align-items:center;margin-left:auto;margin-right:auto;min-width:var(--sdc-neighbors-current-section-min-width);cursor:default}@media (min-width: 640px){.current-section-wrapper{--sdc-neighbors-current-section-min-width: 14rem}}.current-section-loading{font-weight:var(--sdc-neighbors-current-section-loading-font-weight);color:var(--sdc-neighbors-text-color);font-size:var(--sdc-neighbors-current-section-loading-font-size)}.current-section-text{display:flex;font-weight:var(--sdc-neighbors-current-section-text-font-weight);color:var(--sdc-neighbors-text-color);font-size:var(--sdc-neighbors-current-section-text-font-size);text-transform:var(--sdc-neighbors-current-section-text-transform)}.current-section-text .prefix{opacity:var(--sdc-neighbors-prefix-opacity)}.current-section-text .sm-prefix{display:none}@media (min-width: 640px){.current-section-text .sm-prefix{display:block}}.current-section-text .xs-prefix{display:block}@media (min-width: 640px){.current-section-text .xs-prefix{display:none}}\n"] }]
+        args: [{ selector: 'sdc-neighbors', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #neighborsContainer class=\"neighbors-container\" [class]=\"computedClass()\" [class.hidden]=\"!showElement()\">\n  <!-- LEFT SECTION BUTTON -->\n  @if (leftSection) {\n    <div\n      class=\"neighbor-button-left neighbor-button\"\n      tabindex=\"0\"\n      (click)=\"navigateToSection(leftSection!)\"\n      (keypress.enter)=\"navigateToSection(leftSection!)\">\n      <i class=\"neighbor-button-icon\">\n        <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M15.75 19.5 8.25 12l7.5-7.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </i>\n    </div>\n  }\n  <div class=\"current-section-wrapper\">\n    @if (isLoading()) {\n      <p class=\"current-section-loading\">\n        <span>Loading</span>\n      </p>\n    } @else {\n      @if (section) {\n        <h3 class=\"current-section-text\">\n          <span class=\"prefix\">Section </span>\n          <span #currentSection class=\"section-number\">{{ section }}</span>\n        </h3>\n      }\n    }\n  </div>\n\n  <!-- RIGHT SECTION BUTTON -->\n  @if (rightSection) {\n    <div\n      class=\"neighbor-button-right neighbor-button\"\n      tabindex=\"1\"\n      (click)=\"navigateToSection(rightSection!)\"\n      (keypress.enter)=\"navigateToSection(rightSection!)\">\n      <i class=\"neighbor-button-icon\">\n        <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"m8.25 4.5 7.5 7.5-7.5 7.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </i>\n    </div>\n  }\n</div>\n", styles: [".sdc-neighbors{--sdc-neighbors-background-color: transparent;--sdc-neighbors-text-color: var(--color-pure-black);--sdc-neighbors-border-radius: 1rem;--sdc-neighbors-padding-x: var(--space-3);--sdc-neighbors-padding-y: var(--space-2_5);--sdc-neighbors-height: var(--space-6);--sdc-neighbors-max-width: 25rem;--sdc-neighbors-button-width: 8rem;--sdc-neighbors-button-height: var(--space-6);--sdc-neighbors-button-icon-color: var(--color-pure-black);--sdc-neighbors-button-hover-background-color: #f5f5f5;--sdc-neighbors-button-text-font-weight: var(--font-medium);--sdc-neighbors-button-text-font-size: var(--text-sm);--sdc-neighbors-button-text-transform: none;--sdc-neighbors-prefix-opacity: 1;--sdc-neighbors-current-section-min-width: 6rem;--sdc-neighbors-current-section-loading-font-weight: var(--font-semibold);--sdc-neighbors-current-section-loading-font-size: var(--text-sm);--sdc-neighbors-current-section-text-font-weight: var(--font-semibold);--sdc-neighbors-current-section-text-font-size: var(--text-sm);--sdc-neighbors-current-section-text-transform: none}.neighbors-container{position:relative;display:flex;justify-content:center;align-items:center;background-color:var(--sdc-neighbors-background-color);margin-left:auto;margin-right:auto;padding-left:var(--sdc-neighbors-padding-x);padding-right:var(--sdc-neighbors-padding-x);padding-top:var(--sdc-neighbors-padding-y);padding-bottom:var(--sdc-neighbors-padding-y);border-radius:var(--sdc-neighbors-border-radius);height:var(--sdc-neighbors-height);max-width:var(--sdc-neighbors-max-width);pointer-events:auto}@media (min-width: 640px){.neighbors-container{--sdc-neighbors-height: var(--space-8)}}.neighbor-button{position:relative;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;background-color:#fff;border-radius:50%;transition-property:opacity,background-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;cursor:pointer;box-shadow:0 1px 3px #0000001a}@media (min-width: 640px){.neighbor-button{width:3rem;height:3rem}}.neighbor-button-left{margin-right:.75rem}.neighbor-button-right{margin-left:.75rem}.neighbor-button:hover{background-color:var(--sdc-neighbors-button-hover-background-color)}.neighbor-button-icon{display:flex;align-items:center;justify-content:center;color:var(--sdc-neighbors-button-icon-color)}.neighbor-button-icon svg{width:1rem;height:1rem}.current-section-text .section-number{font-weight:var(--font-bold);white-space:nowrap}.current-section-wrapper{display:flex;justify-content:center;align-items:center;margin-left:auto;margin-right:auto;min-width:var(--sdc-neighbors-current-section-min-width);background-color:#fff;border-radius:var(--sdc-neighbors-border-radius);padding:.75rem 1rem;cursor:default;box-shadow:0 1px 3px #0000001a}@media (min-width: 640px){.current-section-wrapper{--sdc-neighbors-current-section-min-width: 14rem}}.current-section-loading{font-weight:var(--sdc-neighbors-current-section-loading-font-weight);color:var(--sdc-neighbors-text-color);font-size:var(--sdc-neighbors-current-section-loading-font-size)}.current-section-text{display:flex;font-weight:var(--sdc-neighbors-current-section-text-font-weight);color:var(--sdc-neighbors-text-color);font-size:var(--sdc-neighbors-current-section-text-font-size);text-transform:var(--sdc-neighbors-current-section-text-transform)}.current-section-text .prefix{opacity:var(--sdc-neighbors-prefix-opacity);margin-right:.35rem}.current-section-text .sm-prefix{display:none}@media (min-width: 640px){.current-section-text .sm-prefix{display:block}}.current-section-text .xs-prefix{display:block}@media (min-width: 640px){.current-section-text .xs-prefix{display:none}}\n"] }]
     }], null, { neighborsContainer: [{
             type: ViewChild,
             args: ['neighborsContainer']
@@ -4136,12 +4035,17 @@ class NeighborsComponent {
         }], rightSectionElement: [{
             type: ViewChild,
             args: ['rightSectionNumber', { static: false }]
+        }], sectionChange: [{
+            type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NeighborsComponent, { className: "NeighborsComponent", filePath: "dvm/neighbors/neighbors.component.ts", lineNumber: 26 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NeighborsComponent, { className: "NeighborsComponent", filePath: "dvm/neighbors/neighbors.component.ts", lineNumber: 34 }); })();
 
 const DVM_FORMATTER = new InjectionToken('DvmFormatter');
 const CONFIGURATION_SERVICE = new InjectionToken('ConfigurationService');
 const DVM_SERVICE = new InjectionToken('DvmService');
+const THUMBNAIL_PROVIDER = new InjectionToken('ThumbnailProvider');
+const POPOVER_POSITIONER = new InjectionToken('PopoverPositioner');
+const POPOVER_MANAGER = new InjectionToken('PopoverManager');
 
 class PopoverService {
     // SERVICES
@@ -4158,6 +4062,35 @@ class PopoverService {
     popoverTimerTimeInMs = 300;
     currentPopoverId = '';
     popoverTimer = null;
+    popoverInstancesWithTimers = new Map();
+    // Default mock providers for when no custom providers are provided
+    defaultMockProviders = [
+        {
+            provide: CONFIGURATION_SERVICE,
+            useValue: {
+                configuration: {
+                    dvmData: {
+                        venueId: 'default-venue',
+                    },
+                },
+            },
+        },
+        {
+            provide: DVM_FORMATTER,
+            useValue: {
+                transform: (value) => value.replace(/-/g, ' ').toUpperCase(),
+            },
+        },
+        {
+            provide: DVM_SERVICE,
+            useValue: {
+                viewer3dService: {
+                    isInitialized: () => true,
+                    getThumbnail: () => of('https://via.placeholder.com/275x124/1a1a1a/ffffff?text=Default+Thumbnail'),
+                },
+            },
+        },
+    ];
     // METHODS
     setTimer() {
         const myId = this.currentPopoverId;
@@ -4176,6 +4109,35 @@ class PopoverService {
             this.popoverTimer = null;
         }
     }
+    /**
+     * Sets a timer for a specific popover instance to auto-hide it after the specified delay.
+     * @param popoverId - The ID of the popover to set timer for
+     * @param delayMs - Delay in milliseconds (optional, defaults to configured delay)
+     */
+    setPopoverTimer(popoverId, delayMs) {
+        this.clearPopoverTimer(popoverId);
+        const delay = delayMs ?? this.popoverTimerTimeInMs;
+        this.popoverTimer = setTimeout(() => {
+            this.destroyPopover(popoverId);
+        }, delay);
+    }
+    /**
+     * Clears the timer for a specific popover instance.
+     * @param popoverId - The ID of the popover to clear timer for
+     */
+    clearPopoverTimer(popoverId) {
+        if (this.popoverTimer !== null) {
+            clearTimeout(this.popoverTimer);
+            this.popoverTimer = null;
+        }
+    }
+    /**
+     * Configures the default timer delay for popovers.
+     * @param delayMs - Delay in milliseconds
+     */
+    setTimerDelay(delayMs) {
+        this.popoverTimerTimeInMs = delayMs;
+    }
     /**
      * Crea un popover y lo añade al DOM, usando un elemento de referencia y contenido HTML o string.
      * Si ya existe un popover con el mismo ID, lo destruye antes de crear uno nuevo.
@@ -4217,6 +4179,71 @@ class PopoverService {
         this.popoverInstances.set(id, instance);
         return instance;
     }
+    /**
+     * Crea un popover que contiene un componente Angular con soporte para proyección de contenido.
+     * Si ya existe un popover con el mismo ID, lo destruye antes de crear uno nuevo.
+     *
+     * @param popoverId   Identificador único del popover.
+     * @param reference   Elemento de referencia para posicionar el popover (HTMLElement, Element, VirtualElement o ElementRef).
+     * @param component   Clase del componente Angular a renderizar dentro del popover.
+     * @param inputs      Propiedades de entrada para el componente.
+     * @param contentProjection Contenido proyectado para los slots del popover.
+     * @param options     Opciones de configuración para el posicionamiento (placement, strategy, middleware, etc).
+     * @returns           Instancia del popover creado, incluyendo la referencia al componente.
+     */
+    createPopoverComponentWithContent(popoverId, reference, component, inputs, contentProjection, options = {}, serviceOptions = {}) {
+        this.clearTimer();
+        // Comprobamos si ya existe una instancia de Popover con el mismo ID
+        this.checkPopoverInstance(popoverId ?? '');
+        this.currentPopoverId = popoverId;
+        const referenceElement = reference instanceof ElementRef ? reference.nativeElement : reference;
+        const popoverElement = this.createPopoverElement();
+        // Create a custom environment injector with the required providers
+        const providers = serviceOptions.providers || this.defaultMockProviders;
+        const customInjector = createEnvironmentInjector(providers, this.envInjector);
+        const componentReference = createComponent(component, {
+            environmentInjector: customInjector,
+            hostElement: popoverElement,
+        });
+        const finalOptions = {
+            placement: options.placement || this.popoverOptions.placement,
+            strategy: options.strategy || this.popoverOptions.strategy,
+            middleware: options.middleware ? this.setMiddlewares(options.middleware) : this.popoverOptions.middleware,
+        };
+        // Añadimos el Popover al DOM
+        this.document.body.append(popoverElement);
+        // Si tiene inputs, los asignamos al componente
+        if (inputs) {
+            for (const [key, value] of Object.entries(inputs)) {
+                componentReference.setInput(key, value);
+            }
+        }
+        // Procesamos la proyección de contenido
+        if (contentProjection) {
+            this.processContentProjection(componentReference, contentProjection);
+        }
+        // Encendemos el detectChanges del componente para que se renderice
+        componentReference.changeDetectorRef.detectChanges();
+        // Añadimos el componente al DOM
+        this.appReference.attachView(componentReference.hostView);
+        // Creamos la instancia del Popover
+        const instance = {
+            id: popoverId,
+            element: popoverElement,
+            reference: referenceElement,
+            componentRef: componentReference,
+            update: async () => this.calculatePosition(instance, finalOptions),
+        };
+        const arrowElement = document.querySelector('#arrow');
+        finalOptions.middleware?.push(arrow({ element: arrowElement }));
+        // Calculamos la posicion del Popover
+        void this.calculatePosition(instance, finalOptions);
+        // Proporcionamos la función de autoUpdate en la propiedad cleanup del Popover
+        instance.cleanup = autoUpdate(referenceElement, popoverElement, () => instance.update());
+        // Añadimos la instancia del Popover al mapa de instancias
+        this.popoverInstances.set(popoverId, instance);
+        return instance;
+    }
     /**
      * Crea un popover que contiene un componente Angular, lo añade al DOM y lo posiciona.
      * Si ya existe un popover con el mismo ID, lo destruye antes de crear uno nuevo.
@@ -4224,18 +4251,22 @@ class PopoverService {
      * @param popoverId   Identificador único del popover.
      * @param reference   Elemento de referencia para posicionar el popover (HTMLElement, Element, VirtualElement o ElementRef).
      * @param component   Clase del componente Angular a renderizar dentro del popover.
+     * @param inputs      Propiedades de entrada para el componente.
      * @param options     Opciones de configuración para el posicionamiento (placement, strategy, middleware, etc).
      * @returns           Instancia del popover creado, incluyendo la referencia al componente.
      */
-    createPopoverComponent(popoverId, reference, component, inputs, options = {}) {
+    createPopoverComponent(popoverId, reference, component, inputs, options = {}, serviceOptions = {}) {
         this.clearTimer();
         // Comprobamos si ya existe una instancia de Popover con el mismo ID
         this.checkPopoverInstance(popoverId ?? '');
         this.currentPopoverId = popoverId;
         const referenceElement = reference instanceof ElementRef ? reference.nativeElement : reference; // Elemento de referencia
         const popoverElement = this.createPopoverElement(); // Elemento Popover
+        // Create a custom environment injector with the required providers
+        const providers = serviceOptions.providers || this.defaultMockProviders;
+        const customInjector = createEnvironmentInjector(providers, this.envInjector);
         const componentReference = createComponent(component, {
-            environmentInjector: this.envInjector,
+            environmentInjector: customInjector,
             hostElement: popoverElement,
         }); // Instancia del componente Popover
         const finalOptions = {
@@ -4369,6 +4400,44 @@ class PopoverService {
             console.error('Error positioning popover', error);
         }
     }
+    /**
+     * Procesa la proyección de contenido para el componente popover.
+     *
+     * @param componentRef Referencia al componente creado
+     * @param contentProjection Contenido a proyectar en los slots
+     */
+    processContentProjection(componentRef, contentProjection) {
+        const componentInstance = componentRef.instance;
+        // Procesamos cada slot de contenido
+        if (contentProjection.thumbnail) {
+            this.setContentProjection(componentInstance, 'hasThumbnailProjection', contentProjection.thumbnail);
+        }
+        if (contentProjection.content) {
+            this.setContentProjection(componentInstance, 'hasContentProjection', contentProjection.content);
+        }
+        if (contentProjection.price) {
+            this.setContentProjection(componentInstance, 'hasPriceProjection', contentProjection.price);
+        }
+    }
+    /**
+     * Establece la proyección de contenido para un slot específico.
+     *
+     * @param componentInstance Instancia del componente
+     * @param projectionFlag Flag que indica si hay proyección
+     * @param content Contenido a proyectar
+     */
+    setContentProjection(componentInstance, projectionFlag, content) {
+        // Marcamos que hay proyección de contenido
+        componentInstance[projectionFlag] = true;
+        // Si es un TemplateRef, lo almacenamos para uso posterior
+        if (content instanceof TemplateRef) {
+            componentInstance[`${projectionFlag}Template`] = content;
+        }
+        else if (typeof content === 'string') {
+            // Si es string, lo almacenamos como HTML
+            componentInstance[`${projectionFlag}Html`] = content;
+        }
+    }
     /**
      * Set Middlewares
      * Método que recibe un objeto de opciones de middleware y devuelve un array de middlewares cargados con sus opciones.
@@ -4468,54 +4537,399 @@ var AppNodes;
     AppNodes["Vip"] = "vip";
 })(AppNodes || (AppNodes = {}));
 
-function PopoverComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "img", 5)(1, "img", 6);
+/**
+ * Base component for popovers that provides timer functionality.
+ * Extend this component to create timer-aware popovers.
+ */
+class BasePopoverComponent {
+    popoverId = '';
+    autoHideDelay = 300; // milliseconds
+    enableAutoHide = true;
+    mouseEnter = new EventEmitter();
+    mouseLeave = new EventEmitter();
+    popoverHidden = new EventEmitter();
+    popoverService = inject(PopoverService);
+    cdr = inject(ChangeDetectorRef);
+    isMouseOver = false;
+    ngOnInit() {
+        if (this.enableAutoHide && this.popoverId) {
+            this.startAutoHideTimer();
+        }
+    }
+    ngOnDestroy() {
+        if (this.popoverId) {
+            this.popoverService.clearPopoverTimer(this.popoverId);
+        }
+    }
+    onMouseEnter(event) {
+        this.isMouseOver = true;
+        this.clearAutoHideTimer();
+        this.mouseEnter.emit(event);
+    }
+    onMouseLeave(event) {
+        this.isMouseOver = false;
+        if (this.enableAutoHide) {
+            this.startAutoHideTimer();
+        }
+        this.mouseLeave.emit(event);
+    }
+    hidePopover() {
+        if (this.popoverId) {
+            this.popoverService.destroyPopover(this.popoverId);
+            this.popoverHidden.emit();
+        }
+    }
+    startAutoHideTimer() {
+        if (this.popoverId && !this.isMouseOver) {
+            this.popoverService.setPopoverTimer(this.popoverId, this.autoHideDelay);
+        }
+    }
+    clearAutoHideTimer() {
+        if (this.popoverId) {
+            this.popoverService.clearPopoverTimer(this.popoverId);
+        }
+    }
+    static ɵfac = function BasePopoverComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BasePopoverComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BasePopoverComponent, selectors: [["ng-component"]], inputs: { popoverId: "popoverId", autoHideDelay: "autoHideDelay", enableAutoHide: "enableAutoHide" }, outputs: { mouseEnter: "mouseEnter", mouseLeave: "mouseLeave", popoverHidden: "popoverHidden" }, decls: 0, vars: 0, template: function BasePopoverComponent_Template(rf, ctx) { }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BasePopoverComponent, [{
+        type: Component,
+        args: [{
+                template: '', // Abstract component
+                changeDetection: ChangeDetectionStrategy.OnPush,
+            }]
+    }], null, { popoverId: [{
+            type: Input
+        }], autoHideDelay: [{
+            type: Input
+        }], enableAutoHide: [{
+            type: Input
+        }], mouseEnter: [{
+            type: Output
+        }], mouseLeave: [{
+            type: Output
+        }], popoverHidden: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BasePopoverComponent, { className: "BasePopoverComponent", filePath: "dvm/popover/base-popover.component.ts", lineNumber: 12 }); })();
+
+function SeatPopoverComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵelement(1, "div", 10);
+    i0.ɵɵelementEnd();
+} }
+function SeatPopoverComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 11);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("alt", "thumbnail-" + ctx_r0.node.id)("ngSrc", ctx_r0.thumbnail);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("alt", "thumbnail-" + ctx_r0.node.id)("ngSrc", ctx_r0.thumbnail);
+    i0.ɵɵstyleProp("background-image", "url(" + ctx_r0.thumbnail + ")");
+} }
+class SeatPopoverComponent extends BasePopoverComponent {
+    data;
+    showLoader = true;
+    thumbnailProvider = inject(THUMBNAIL_PROVIDER, { optional: true });
+    cdr = inject(ChangeDetectorRef);
+    thumbnail;
+    isLoadingThumbnail = true;
+    ngOnInit() {
+        super.ngOnInit(); // Initialize base component timer logic
+        if (this.data.thumbnail) {
+            this.thumbnail = this.data.thumbnail;
+            this.isLoadingThumbnail = false;
+        }
+        else if (this.thumbnailProvider && this.showLoader) {
+            this.loadThumbnail();
+        }
+    }
+    loadThumbnail() {
+        this.thumbnailProvider.getThumbnail(this.data.id).subscribe({
+            next: url => {
+                this.thumbnail = url;
+                this.isLoadingThumbnail = false;
+                this.cdr.markForCheck();
+            },
+            error: () => {
+                this.isLoadingThumbnail = false;
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    get formattedSection() {
+        return this.data.section.includes('_') ? this.data.section.split('_')[1].split('-')[0] : this.data.section;
+    }
+    get formattedSeat() {
+        return this.data.seat.split('-')[2] || this.data.seat;
+    }
+    onEnter(event) {
+        this.onMouseEnter(event);
+    }
+    onLeave(event) {
+        this.onMouseLeave(event);
+    }
+    static ɵfac = /*@__PURE__*/ (() => { let ɵSeatPopoverComponent_BaseFactory; return function SeatPopoverComponent_Factory(__ngFactoryType__) { return (ɵSeatPopoverComponent_BaseFactory || (ɵSeatPopoverComponent_BaseFactory = i0.ɵɵgetInheritedFactory(SeatPopoverComponent)))(__ngFactoryType__ || SeatPopoverComponent); }; })();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SeatPopoverComponent, selectors: [["sdc-seat-popover"]], inputs: { data: "data", showLoader: "showLoader" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 25, vars: 9, consts: [[1, "sdc-seat-popover", 3, "mouseenter", "mouseleave"], [1, "sdc-popover-thumbnail"], [1, "sdc-popover-loader"], [1, "sdc-thumbnail-image", 3, "background-image"], [1, "sdc-popover-content"], [1, "sdc-popover-grid"], [1, "sdc-popover-col-left"], [1, "sdc-popover-label"], [1, "sdc-popover-label-text"], [1, "sdc-popover-col-right"], [1, "sdc-spinner"], [1, "sdc-thumbnail-image"]], template: function SeatPopoverComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵlistener("mouseenter", function SeatPopoverComponent_Template_div_mouseenter_0_listener($event) { return ctx.onEnter($event); })("mouseleave", function SeatPopoverComponent_Template_div_mouseleave_0_listener($event) { return ctx.onLeave($event); });
+            i0.ɵɵelementStart(1, "div", 1);
+            i0.ɵɵtemplate(2, SeatPopoverComponent_Conditional_2_Template, 2, 0, "div", 2)(3, SeatPopoverComponent_Conditional_3_Template, 1, 2, "div", 3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "div", 4)(5, "div", 5)(6, "div", 6)(7, "h5", 7)(8, "span", 8);
+            i0.ɵɵtext(9, "Section:");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(10);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(11, "h5", 7)(12, "span", 8);
+            i0.ɵɵtext(13, "Row:");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(14);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(15, "div", 9)(16, "h5", 7)(17, "span", 8);
+            i0.ɵɵtext(18, "Seat:");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(19);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(20, "h5", 7)(21, "span", 8);
+            i0.ɵɵtext(22, "Price:");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(23);
+            i0.ɵɵpipe(24, "currency");
+            i0.ɵɵelementEnd()()()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.isLoadingThumbnail && ctx.showLoader ? 2 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.thumbnail && !ctx.isLoadingThumbnail ? 3 : -1);
+            i0.ɵɵadvance(7);
+            i0.ɵɵtextInterpolate1(" ", ctx.formattedSection, " ");
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate1(" ", ctx.data.row, " ");
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate1(" ", ctx.formattedSeat, " ");
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(24, 6, ctx.data.price, "USD"), " ");
+        } }, dependencies: [CommonModule, i1$1.CurrencyPipe], styles: ["[_nghost-%COMP%]{display:block}.sdc-seat-popover[_ngcontent-%COMP%]{width:var(--sdc-popover-width, 20rem);height:auto;color:var(--sdc-popover-text-color, #ffffff);background-color:var(--sdc-popover-bg-color, #000000);border-radius:var(--sdc-popover-border-radius, .75rem);overflow:hidden}.sdc-popover-thumbnail[_ngcontent-%COMP%]{width:100%;height:var(--sdc-popover-thumbnail-height, 12rem);position:relative}.sdc-thumbnail-image[_ngcontent-%COMP%]{width:100%;height:100%;background-position:center;background-size:cover;background-repeat:no-repeat}.sdc-popover-loader[_ngcontent-%COMP%]{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.sdc-spinner[_ngcontent-%COMP%]{display:inline-block;width:80px;height:80px}.sdc-spinner[_ngcontent-%COMP%]:after{content:\" \";display:block;width:32px;height:32px;margin:16px 8px 8px 16px;border-radius:50%;border:3px solid var(--sdc-spinner-color, #fff);border-color:var(--sdc-spinner-color, #fff) transparent var(--sdc-spinner-color, #fff) transparent;animation:_ngcontent-%COMP%_sdc-spinner-rotate 1.2s linear infinite}@keyframes _ngcontent-%COMP%_sdc-spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.sdc-popover-content[_ngcontent-%COMP%]{padding:.75rem}.sdc-popover-grid[_ngcontent-%COMP%]{display:flex;gap:1.25rem}.sdc-popover-col-left[_ngcontent-%COMP%]{flex:1}.sdc-popover-col-right[_ngcontent-%COMP%]{flex:1;text-align:right;min-width:max-content}.sdc-popover-label[_ngcontent-%COMP%]{margin:.25rem 0;font-size:var(--sdc-popover-label-font-size, .875rem);line-height:1.25rem;font-weight:var(--sdc-popover-label-font-weight, 700)}.sdc-popover-label-text[_ngcontent-%COMP%]{font-weight:var(--sdc-popover-label-text-font-weight, 400)}"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SeatPopoverComponent, [{
+        type: Component,
+        args: [{ selector: 'sdc-seat-popover', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, CurrencyPipe], template: "<div\n  (mouseenter)=\"onEnter($event)\"\n  (mouseleave)=\"onLeave($event)\"\n  class=\"sdc-seat-popover\">\n  <div class=\"sdc-popover-thumbnail\">\n    @if (isLoadingThumbnail && showLoader) {\n      <div class=\"sdc-popover-loader\">\n        <div class=\"sdc-spinner\"></div>\n      </div>\n    }\n    @if (thumbnail && !isLoadingThumbnail) {\n      <div class=\"sdc-thumbnail-image\" [style.background-image]=\"'url(' + thumbnail + ')'\"></div>\n    }\n  </div>\n\n  <div class=\"sdc-popover-content\">\n    <div class=\"sdc-popover-grid\">\n      <div class=\"sdc-popover-col-left\">\n        <h5 class=\"sdc-popover-label\">\n          <span class=\"sdc-popover-label-text\">Section:</span>\n          {{ formattedSection }}\n        </h5>\n        <h5 class=\"sdc-popover-label\">\n          <span class=\"sdc-popover-label-text\">Row:</span>\n          {{ data.row }}\n        </h5>\n      </div>\n      <div class=\"sdc-popover-col-right\">\n        <h5 class=\"sdc-popover-label\">\n          <span class=\"sdc-popover-label-text\">Seat:</span>\n          {{ formattedSeat }}\n        </h5>\n        <h5 class=\"sdc-popover-label\">\n          <span class=\"sdc-popover-label-text\">Price:</span>\n          {{ data.price | currency: 'USD' }}\n        </h5>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.sdc-seat-popover{width:var(--sdc-popover-width, 20rem);height:auto;color:var(--sdc-popover-text-color, #ffffff);background-color:var(--sdc-popover-bg-color, #000000);border-radius:var(--sdc-popover-border-radius, .75rem);overflow:hidden}.sdc-popover-thumbnail{width:100%;height:var(--sdc-popover-thumbnail-height, 12rem);position:relative}.sdc-thumbnail-image{width:100%;height:100%;background-position:center;background-size:cover;background-repeat:no-repeat}.sdc-popover-loader{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.sdc-spinner{display:inline-block;width:80px;height:80px}.sdc-spinner:after{content:\" \";display:block;width:32px;height:32px;margin:16px 8px 8px 16px;border-radius:50%;border:3px solid var(--sdc-spinner-color, #fff);border-color:var(--sdc-spinner-color, #fff) transparent var(--sdc-spinner-color, #fff) transparent;animation:sdc-spinner-rotate 1.2s linear infinite}@keyframes sdc-spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.sdc-popover-content{padding:.75rem}.sdc-popover-grid{display:flex;gap:1.25rem}.sdc-popover-col-left{flex:1}.sdc-popover-col-right{flex:1;text-align:right;min-width:max-content}.sdc-popover-label{margin:.25rem 0;font-size:var(--sdc-popover-label-font-size, .875rem);line-height:1.25rem;font-weight:var(--sdc-popover-label-font-weight, 700)}.sdc-popover-label-text{font-weight:var(--sdc-popover-label-text-font-weight, 400)}\n"] }]
+    }], null, { data: [{
+            type: Input
+        }], showLoader: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SeatPopoverComponent, { className: "SeatPopoverComponent", filePath: "dvm/popover/seat-popover/seat-popover.component.ts", lineNumber: 24 }); })();
+
+function SectionPopoverComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵelement(1, "div", 13);
+    i0.ɵɵelementEnd();
 } }
-function PopoverComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 2)(1, "div", 7);
-    i0.ɵɵelement(2, "div", 8);
+function SectionPopoverComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵlistener("click", function SectionPopoverComponent_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onLoad3dView()); });
+    i0.ɵɵelementStart(1, "span", 15);
+    i0.ɵɵtext(2, "Click to open view");
     i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("background-image", "url(" + ctx_r1.thumbnail + ")");
 } }
-function PopoverComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "p", 4)(2, "span", 9);
-    i0.ɵɵtext(3, " Row");
+function SectionPopoverComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "h5", 7)(1, "span", 8);
+    i0.ɵɵtext(2, "Price:");
     i0.ɵɵelementEnd();
-    i0.ɵɵtext(4);
-    i0.ɵɵelementStart(5, "span", 9);
-    i0.ɵɵtext(6, "Seat");
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵtext(7);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" $ ", ctx_r1.priceRangeWithFees, " ");
+} }
+function SectionPopoverComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "h5", 7)(1, "span", 8);
+    i0.ɵɵtext(2, "Price:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.row, " \u00A0 ");
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.seat, " ");
+    i0.ɵɵtextInterpolate1(" $ ", ctx_r1.priceRangeDisplay, " ");
 } }
-function PopoverComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelement(1, "div", 10);
-    i0.ɵɵelementStart(2, "div", 11)(3, "p", 12)(4, "span", 13);
-    i0.ɵɵtext(5);
+function SectionPopoverComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 16);
+    i0.ɵɵlistener("click", function SectionPopoverComponent_Conditional_23_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSelectForBA()); });
+    i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
-    i0.ɵɵtext(6);
-    i0.ɵɵpipe(7, "currency");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.prices.length > 1 ? "FROM" : "PRICE", " \u00A0 ");
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(7, 2, ctx_r0.price, "USD"), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.data.isSelectedForBA ? "Deselect" : "Select", " ");
+} }
+function SectionPopoverComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 17);
+    i0.ɵɵlistener("click", function SectionPopoverComponent_Conditional_24_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOpenSeatMap()); });
+    i0.ɵɵtext(1, "Open Seat Map");
+    i0.ɵɵelementEnd();
+} }
+class SectionPopoverComponent extends BasePopoverComponent {
+    data;
+    showLoader = true;
+    showBestAvailable = false;
+    showOpenSeatMap = true;
+    excludeSeatMapSections = ['S_BLCHADA', 'S_Bleacher'];
+    isTicketFeeEnabled = false;
+    load3dView = new EventEmitter();
+    selectForBA = new EventEmitter();
+    openSeatMap = new EventEmitter();
+    thumbnailProvider = inject(THUMBNAIL_PROVIDER, { optional: true });
+    cdr = inject(ChangeDetectorRef);
+    thumbnail;
+    isLoadingThumbnail = true;
+    ngOnInit() {
+        super.ngOnInit(); // Initialize base component timer logic
+        if (this.data.thumbnail) {
+            this.thumbnail = this.data.thumbnail;
+            this.isLoadingThumbnail = false;
+        }
+        else if (this.thumbnailProvider && this.showLoader) {
+            this.loadThumbnail();
+        }
+    }
+    loadThumbnail() {
+        this.thumbnailProvider.getThumbnail(this.data.id).subscribe({
+            next: url => {
+                this.thumbnail = url;
+                this.isLoadingThumbnail = false;
+                this.cdr.markForCheck();
+            },
+            error: () => {
+                this.isLoadingThumbnail = false;
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    get priceRangeDisplay() {
+        const { min, max } = this.data.priceRange;
+        return min === max ? min.toString() : `${min} - ${max}`;
+    }
+    get priceRangeWithFees() {
+        if (this.isTicketFeeEnabled && this.data.priceRangeWithFees) {
+            return this.data.priceRangeWithFees;
+        }
+        return undefined;
+    }
+    get shouldShowSeatMapButton() {
+        return (this.showOpenSeatMap &&
+            !this.excludeSeatMapSections.includes(this.data.section) &&
+            this.data.type !== 'general_admission');
+    }
+    onEnter(event) {
+        this.onMouseEnter(event);
+    }
+    onLeave(event) {
+        this.onMouseLeave(event);
+    }
+    onLoad3dView() {
+        this.load3dView.emit();
+    }
+    onSelectForBA() {
+        this.selectForBA.emit(!this.data.isSelectedForBA);
+    }
+    onOpenSeatMap() {
+        this.openSeatMap.emit();
+    }
+    static ɵfac = /*@__PURE__*/ (() => { let ɵSectionPopoverComponent_BaseFactory; return function SectionPopoverComponent_Factory(__ngFactoryType__) { return (ɵSectionPopoverComponent_BaseFactory || (ɵSectionPopoverComponent_BaseFactory = i0.ɵɵgetInheritedFactory(SectionPopoverComponent)))(__ngFactoryType__ || SectionPopoverComponent); }; })();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SectionPopoverComponent, selectors: [["sdc-section-popover"]], inputs: { data: "data", showLoader: "showLoader", showBestAvailable: "showBestAvailable", showOpenSeatMap: "showOpenSeatMap", excludeSeatMapSections: "excludeSeatMapSections", isTicketFeeEnabled: "isTicketFeeEnabled" }, outputs: { load3dView: "load3dView", selectForBA: "selectForBA", openSeatMap: "openSeatMap" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 25, vars: 8, consts: [[1, "sdc-section-popover", 3, "mouseenter", "mouseleave"], [1, "sdc-popover-thumbnail"], [1, "sdc-popover-loader"], [1, "sdc-thumbnail-image", "sdc-thumbnail-clickable", 3, "background-image"], [1, "sdc-popover-content"], [1, "sdc-popover-grid"], [1, "sdc-popover-col-left"], [1, "sdc-popover-label"], [1, "sdc-popover-label-text"], [1, "sdc-popover-col-right"], [1, "sdc-popover-actions"], [1, "sdc-popover-btn", "sdc-popover-btn-primary", "sdc-popover-btn-mobile-only"], [1, "sdc-popover-btn", "sdc-popover-btn-secondary"], [1, "sdc-spinner"], [1, "sdc-thumbnail-image", "sdc-thumbnail-clickable", 3, "click"], [1, "sdc-thumbnail-overlay-text"], [1, "sdc-popover-btn", "sdc-popover-btn-primary", "sdc-popover-btn-mobile-only", 3, "click"], [1, "sdc-popover-btn", "sdc-popover-btn-secondary", 3, "click"]], template: function SectionPopoverComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵlistener("mouseenter", function SectionPopoverComponent_Template_div_mouseenter_0_listener($event) { return ctx.onEnter($event); })("mouseleave", function SectionPopoverComponent_Template_div_mouseleave_0_listener($event) { return ctx.onLeave($event); });
+            i0.ɵɵelementStart(1, "div", 1);
+            i0.ɵɵtemplate(2, SectionPopoverComponent_Conditional_2_Template, 2, 0, "div", 2)(3, SectionPopoverComponent_Conditional_3_Template, 3, 2, "div", 3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "div", 4)(5, "div", 5)(6, "div", 6)(7, "h5", 7)(8, "span", 8);
+            i0.ɵɵtext(9, "Section:");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(10);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(11, SectionPopoverComponent_Conditional_11_Template, 4, 1, "h5", 7)(12, SectionPopoverComponent_Conditional_12_Template, 4, 1, "h5", 7);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(13, "div", 9)(14, "h5", 7)(15, "span", 8);
+            i0.ɵɵtext(16, "Available Seats:");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(17);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(18, "h5", 7)(19, "span", 8);
+            i0.ɵɵtext(20, "Available ADA Seats:");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(21);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(22, "div", 10);
+            i0.ɵɵtemplate(23, SectionPopoverComponent_Conditional_23_Template, 2, 1, "button", 11)(24, SectionPopoverComponent_Conditional_24_Template, 2, 0, "button", 12);
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.isLoadingThumbnail && ctx.showLoader ? 2 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.thumbnail && !ctx.isLoadingThumbnail ? 3 : -1);
+            i0.ɵɵadvance(7);
+            i0.ɵɵtextInterpolate1(" ", ctx.data.section, " ");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isTicketFeeEnabled && ctx.priceRangeWithFees ? 11 : 12);
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate1(" ", ctx.data.availableQuantity, " ");
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate1(" ", ctx.data.adaQuantity, " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.showBestAvailable ? 23 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.shouldShowSeatMapButton ? 24 : -1);
+        } }, dependencies: [CommonModule], styles: ["[_nghost-%COMP%]{display:block}.sdc-section-popover[_ngcontent-%COMP%]{width:var(--sdc-popover-width, 20rem);height:auto;color:var(--sdc-popover-text-color, #ffffff);background-color:var(--sdc-popover-bg-color, #000000);border-radius:var(--sdc-popover-border-radius, .75rem);overflow:hidden}.sdc-popover-thumbnail[_ngcontent-%COMP%]{width:100%;height:var(--sdc-popover-thumbnail-height, 12rem);position:relative}.sdc-thumbnail-image[_ngcontent-%COMP%]{width:100%;height:100%;background-position:center;background-size:cover;background-repeat:no-repeat}.sdc-thumbnail-clickable[_ngcontent-%COMP%]{cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding:8px}.sdc-thumbnail-overlay-text[_ngcontent-%COMP%]{font-size:var(--sdc-thumbnail-overlay-font-size, 12px);color:var(--sdc-thumbnail-overlay-color, #ffffff);background-color:var(--sdc-thumbnail-overlay-bg, rgba(0, 0, 0, .5));padding:4px 8px;border-radius:4px}.sdc-popover-loader[_ngcontent-%COMP%]{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.sdc-spinner[_ngcontent-%COMP%]{display:inline-block;width:80px;height:80px}.sdc-spinner[_ngcontent-%COMP%]:after{content:\" \";display:block;width:32px;height:32px;margin:16px 8px 8px 24px;border-radius:50%;border:3px solid var(--sdc-spinner-color, #fff);border-color:var(--sdc-spinner-color, #fff) transparent var(--sdc-spinner-color, #fff) transparent;animation:_ngcontent-%COMP%_sdc-spinner-rotate 1.2s linear infinite}@keyframes _ngcontent-%COMP%_sdc-spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.sdc-popover-content[_ngcontent-%COMP%]{padding:.75rem}.sdc-popover-grid[_ngcontent-%COMP%]{display:flex;gap:1.25rem}.sdc-popover-col-left[_ngcontent-%COMP%]{flex:1}.sdc-popover-col-right[_ngcontent-%COMP%]{flex:1;text-align:right;min-width:max-content}.sdc-popover-label[_ngcontent-%COMP%]{margin:.25rem 0;font-size:var(--sdc-popover-label-font-size, .875rem);line-height:1.25rem;font-weight:var(--sdc-popover-label-font-weight, 700)}.sdc-popover-label-text[_ngcontent-%COMP%]{font-weight:var(--sdc-popover-label-text-font-weight, 400)}.sdc-popover-actions[_ngcontent-%COMP%]{padding:.5rem 0;display:flex;justify-content:center;gap:.5rem}.sdc-popover-btn[_ngcontent-%COMP%]{border:none;border-radius:var(--sdc-btn-border-radius, 4px);padding:.5rem 1rem;height:var(--sdc-btn-height, 2.25rem);font-size:var(--sdc-btn-font-size, .75rem);cursor:pointer;transition:transform .15s cubic-bezier(.4,0,.2,1)}.sdc-popover-btn[_ngcontent-%COMP%]:hover:not(:disabled){transform:scale(.95)}.sdc-popover-btn[_ngcontent-%COMP%]:disabled{opacity:.3;cursor:not-allowed}.sdc-popover-btn-primary[_ngcontent-%COMP%]{background-color:var(--sdc-btn-primary-bg, #007bff);color:var(--sdc-btn-primary-color, white);margin-right:.5rem}.sdc-popover-btn-secondary[_ngcontent-%COMP%]{background-color:var(--sdc-btn-secondary-bg, white);color:var(--sdc-btn-secondary-color, #007bff);border:1px solid var(--sdc-btn-secondary-border, #007bff)}.sdc-popover-btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled){color:var(--sdc-btn-secondary-hover-color, #0056b3)}.sdc-popover-btn-mobile-only[_ngcontent-%COMP%]{display:block}@media (min-width: 768px){.sdc-popover-btn-mobile-only[_ngcontent-%COMP%]{display:none}}"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SectionPopoverComponent, [{
+        type: Component,
+        args: [{ selector: 'sdc-section-popover', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<div (mouseenter)=\"onEnter($event)\" (mouseleave)=\"onLeave($event)\" class=\"sdc-section-popover\">\n  <div class=\"sdc-popover-thumbnail\">\n    @if (isLoadingThumbnail && showLoader) {\n      <div class=\"sdc-popover-loader\">\n        <div class=\"sdc-spinner\"></div>\n      </div>\n    }\n    @if (thumbnail && !isLoadingThumbnail) {\n      <div\n        class=\"sdc-thumbnail-image sdc-thumbnail-clickable\"\n        [style.background-image]=\"'url(' + thumbnail + ')'\"\n        (click)=\"onLoad3dView()\">\n        <span class=\"sdc-thumbnail-overlay-text\">Click to open view</span>\n      </div>\n    }\n  </div>\n\n  <div class=\"sdc-popover-content\">\n    <div class=\"sdc-popover-grid\">\n      <div class=\"sdc-popover-col-left\">\n        <h5 class=\"sdc-popover-label\">\n          <span class=\"sdc-popover-label-text\">Section:</span>\n          {{ data.section }}\n        </h5>\n        @if (isTicketFeeEnabled && priceRangeWithFees) {\n          <h5 class=\"sdc-popover-label\">\n            <span class=\"sdc-popover-label-text\">Price:</span> $ {{ priceRangeWithFees }}\n          </h5>\n        } @else {\n          <h5 class=\"sdc-popover-label\">\n            <span class=\"sdc-popover-label-text\">Price:</span> $ {{ priceRangeDisplay }}\n          </h5>\n        }\n      </div>\n      <div class=\"sdc-popover-col-right\">\n        <h5 class=\"sdc-popover-label\">\n          <span class=\"sdc-popover-label-text\">Available Seats:</span>\n          {{ data.availableQuantity }}\n        </h5>\n        <h5 class=\"sdc-popover-label\">\n          <span class=\"sdc-popover-label-text\">Available ADA Seats:</span>\n          {{ data.adaQuantity }}\n        </h5>\n      </div>\n    </div>\n\n    <div class=\"sdc-popover-actions\">\n      @if (showBestAvailable) {\n        <button class=\"sdc-popover-btn sdc-popover-btn-primary sdc-popover-btn-mobile-only\" (click)=\"onSelectForBA()\">\n          {{ data.isSelectedForBA ? 'Deselect' : 'Select' }}\n        </button>\n      }\n      @if (shouldShowSeatMapButton) {\n        <button class=\"sdc-popover-btn sdc-popover-btn-secondary\" (click)=\"onOpenSeatMap()\">Open Seat Map</button>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.sdc-section-popover{width:var(--sdc-popover-width, 20rem);height:auto;color:var(--sdc-popover-text-color, #ffffff);background-color:var(--sdc-popover-bg-color, #000000);border-radius:var(--sdc-popover-border-radius, .75rem);overflow:hidden}.sdc-popover-thumbnail{width:100%;height:var(--sdc-popover-thumbnail-height, 12rem);position:relative}.sdc-thumbnail-image{width:100%;height:100%;background-position:center;background-size:cover;background-repeat:no-repeat}.sdc-thumbnail-clickable{cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding:8px}.sdc-thumbnail-overlay-text{font-size:var(--sdc-thumbnail-overlay-font-size, 12px);color:var(--sdc-thumbnail-overlay-color, #ffffff);background-color:var(--sdc-thumbnail-overlay-bg, rgba(0, 0, 0, .5));padding:4px 8px;border-radius:4px}.sdc-popover-loader{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.sdc-spinner{display:inline-block;width:80px;height:80px}.sdc-spinner:after{content:\" \";display:block;width:32px;height:32px;margin:16px 8px 8px 24px;border-radius:50%;border:3px solid var(--sdc-spinner-color, #fff);border-color:var(--sdc-spinner-color, #fff) transparent var(--sdc-spinner-color, #fff) transparent;animation:sdc-spinner-rotate 1.2s linear infinite}@keyframes sdc-spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.sdc-popover-content{padding:.75rem}.sdc-popover-grid{display:flex;gap:1.25rem}.sdc-popover-col-left{flex:1}.sdc-popover-col-right{flex:1;text-align:right;min-width:max-content}.sdc-popover-label{margin:.25rem 0;font-size:var(--sdc-popover-label-font-size, .875rem);line-height:1.25rem;font-weight:var(--sdc-popover-label-font-weight, 700)}.sdc-popover-label-text{font-weight:var(--sdc-popover-label-text-font-weight, 400)}.sdc-popover-actions{padding:.5rem 0;display:flex;justify-content:center;gap:.5rem}.sdc-popover-btn{border:none;border-radius:var(--sdc-btn-border-radius, 4px);padding:.5rem 1rem;height:var(--sdc-btn-height, 2.25rem);font-size:var(--sdc-btn-font-size, .75rem);cursor:pointer;transition:transform .15s cubic-bezier(.4,0,.2,1)}.sdc-popover-btn:hover:not(:disabled){transform:scale(.95)}.sdc-popover-btn:disabled{opacity:.3;cursor:not-allowed}.sdc-popover-btn-primary{background-color:var(--sdc-btn-primary-bg, #007bff);color:var(--sdc-btn-primary-color, white);margin-right:.5rem}.sdc-popover-btn-secondary{background-color:var(--sdc-btn-secondary-bg, white);color:var(--sdc-btn-secondary-color, #007bff);border:1px solid var(--sdc-btn-secondary-border, #007bff)}.sdc-popover-btn-secondary:hover:not(:disabled){color:var(--sdc-btn-secondary-hover-color, #0056b3)}.sdc-popover-btn-mobile-only{display:block}@media (min-width: 768px){.sdc-popover-btn-mobile-only{display:none}}\n"] }]
+    }], null, { data: [{
+            type: Input
+        }], showLoader: [{
+            type: Input
+        }], showBestAvailable: [{
+            type: Input
+        }], showOpenSeatMap: [{
+            type: Input
+        }], excludeSeatMapSections: [{
+            type: Input
+        }], isTicketFeeEnabled: [{
+            type: Input
+        }], load3dView: [{
+            type: Output
+        }], selectForBA: [{
+            type: Output
+        }], openSeatMap: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SectionPopoverComponent, { className: "SectionPopoverComponent", filePath: "dvm/popover/section-popover/section-popover.component.ts", lineNumber: 24 }); })();
+
+const _c0$7 = () => ["S_BLCHADA", "S_Bleacher"];
+function PopoverComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "sdc-section-popover", 2);
+    i0.ɵɵlistener("mouseEnter", function PopoverComponent_Conditional_0_Template_sdc_section_popover_mouseEnter_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onEnter($event)); })("mouseLeave", function PopoverComponent_Conditional_0_Template_sdc_section_popover_mouseLeave_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onLeave($event)); })("load3dView", function PopoverComponent_Conditional_0_Template_sdc_section_popover_load3dView_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onLoad3dView()); })("selectForBA", function PopoverComponent_Conditional_0_Template_sdc_section_popover_selectForBA_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSelectSectionForBA($event)); })("openSeatMap", function PopoverComponent_Conditional_0_Template_sdc_section_popover_openSeatMap_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOpenSeatMap()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("data", ctx_r1.sectionData)("popoverId", "popover-" + ctx_r1.node.id)("showBestAvailable", true)("showOpenSeatMap", true)("excludeSeatMapSections", i0.ɵɵpureFunction0(5, _c0$7));
+} }
+function PopoverComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "sdc-seat-popover", 3);
+    i0.ɵɵlistener("mouseEnter", function PopoverComponent_Conditional_1_Template_sdc_seat_popover_mouseEnter_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onEnter($event)); })("mouseLeave", function PopoverComponent_Conditional_1_Template_sdc_seat_popover_mouseLeave_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onLeave($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("data", ctx_r1.seatData)("popoverId", "popover-" + ctx_r1.node.id);
 } }
 class PopoverComponent {
     // INPUTS
@@ -4527,19 +4941,25 @@ class PopoverComponent {
      * The current theme applied to the component.
      */
     theme = input('theme-sdc');
+    // OUTPUTS
     /**
-     * Computed class string that combines theme and user classes.
+     * Emitted when the 3D view should be loaded.
      */
-    computedClass = computed(() => {
-        const themeClass = this.theme();
-        return ['sdc-map-popover', themeClass].join(' ');
-    });
+    load3dView = output();
+    /**
+     * Emitted when a section should be selected/deselected for best available.
+     */
+    selectSectionForBA = output();
+    /**
+     * Emitted when the seat map should be opened.
+     */
+    openSeatMap = output();
     // SERVICES
     dvm = inject(DVM_SERVICE);
     cdr = inject(ChangeDetectorRef);
     format = inject(DVM_FORMATTER);
-    popoverService = inject(PopoverService);
     configurationService = inject(CONFIGURATION_SERVICE);
+    popoverService = inject(PopoverService);
     // COMPONENT STATE
     Nodes = AppNodes;
     thumbnail;
@@ -4547,6 +4967,23 @@ class PopoverComponent {
     row;
     seat;
     prices;
+    // Section popover specific properties
+    availableQuantity = 0;
+    adaQuantity = 0;
+    includedSectionForBA = false;
+    // Transformed data for new components
+    get seatData() {
+        if (this.node?.type === AppNodes.Seat) {
+            return this.transformToSeatData();
+        }
+        return null;
+    }
+    get sectionData() {
+        if (this.node?.type === AppNodes.Section || this.node?.type === AppNodes.Ga) {
+            return this.transformToSectionData();
+        }
+        return null;
+    }
     // LC METHODS
     ngOnInit() {
         this.initComponent();
@@ -4565,6 +5002,16 @@ class PopoverComponent {
                 : this.prices[0] // Si lo hay, sacamos el minimo, si no seteamos el primero ( y unico xd )
             : undefined; // No existen precios
     }
+    get priceRange() {
+        if (!this.prices || this.prices.length === 0) {
+            return '';
+        }
+        let priceRange = this.prices[0];
+        if (this.prices.length > 1 && this.prices[0] !== this.prices[1]) {
+            priceRange = `${this.prices[0]} - ${this.prices[1]}`;
+        }
+        return priceRange;
+    }
     // METHODS
     initComponent() {
         this.setTexts();
@@ -4572,8 +5019,8 @@ class PopoverComponent {
         // this.getPrice();
     }
     setTexts() {
-        const nodeId = this.format.transform(this.node.id).split(' ');
-        // const translated = this.translationData()[this.node.id.split('-')[0]];
+        const nodeId = this.format.transform(this.node?.id).split(' ');
+        // const translated = this.translationData()[this.node().id.split('-')[0]];
         this.section = nodeId[0];
         this.row = nodeId[1] ?? null;
         this.seat = nodeId[2] ?? null;
@@ -4582,9 +5029,9 @@ class PopoverComponent {
         const viewer3dService = this.dvm.viewer3dService;
         const options = {
             // eslint-disable-next-line camelcase
-            venue_id: this.configurationService.configuration.dvm.venueId,
+            venue_id: this.configurationService.configuration.dvmData.venueId,
             // eslint-disable-next-line camelcase
-            view_id: this.node.id,
+            view_id: this.node?.id,
         };
         if (!viewer3dService?.isInitialized()) {
             return;
@@ -4594,39 +5041,245 @@ class PopoverComponent {
             this.cdr.markForCheck();
         });
     }
+    // Section popover methods
+    onLoad3dView() {
+        this.load3dView.emit({
+            node: this.node,
+            section: this.section,
+        });
+    }
+    onSelectSectionForBA(selected) {
+        this.includedSectionForBA = selected;
+        this.selectSectionForBA.emit({
+            node: this.node,
+            section: this.section,
+            selected: this.includedSectionForBA,
+        });
+    }
+    onOpenSeatMap() {
+        this.openSeatMap.emit({
+            node: this.node,
+            section: this.section,
+        });
+    }
+    // Data transformation methods
+    transformToSeatData() {
+        const nodeId = this.format.transform(this.node?.id).split(' ');
+        const section = nodeId[0];
+        const row = nodeId[1] ?? '';
+        const seat = nodeId[2] ?? '';
+        return {
+            id: this.node.id,
+            section: section,
+            row: row,
+            seat: seat,
+            price: this.price ? Number.parseFloat(this.price) : 0,
+            thumbnail: this.thumbnail
+        };
+    }
+    transformToSectionData() {
+        const nodeId = this.format.transform(this.node?.id).split(' ');
+        const section = nodeId[0];
+        // Parse price range from existing prices array
+        let priceRange = { min: 0, max: 0 };
+        if (this.prices && this.prices.length > 0) {
+            const minPrice = Number.parseFloat(this.prices[0]);
+            const maxPrice = this.prices.length > 1 ? Number.parseFloat(this.prices[1]) : minPrice;
+            priceRange = { min: minPrice, max: maxPrice };
+        }
+        return {
+            id: this.node.id,
+            section: section,
+            priceRange: priceRange,
+            availableQuantity: this.availableQuantity,
+            adaQuantity: this.adaQuantity,
+            thumbnail: this.thumbnail,
+            type: this.node.type === AppNodes.Ga ? 'general_admission' : 'section',
+            isSelectedForBA: this.includedSectionForBA
+        };
+    }
     static ɵfac = function PopoverComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PopoverComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PopoverComponent, selectors: [["sdc-map-popover"]], inputs: { node: "node", theme: [1, "theme"] }, decls: 9, vars: 6, consts: [[3, "mouseenter", "mouseleave"], ["id", "arrow"], [1, "popover-loader-container"], [1, "popover-content"], [1, "popover-text"], ["height", "124", "id", "pano-view", "priority", "", "width", "275", 1, "popover-thumbnail-desktop", 3, "alt", "ngSrc"], ["height", "78", "id", "mobile-pano-view", "priority", "", "width", "160", 1, "popover-thumbnail-mobile", 3, "alt", "ngSrc"], [1, "popover-loader-spinner-container"], [1, "popover-loader-spinner"], [1, "popover-text-light"], [1, "popover-gradient"], [1, "popover-price-container"], [1, "popover-price-text"], [1, "popover-price-text-light"]], template: function PopoverComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵlistener("mouseenter", function PopoverComponent_Template_div_mouseenter_0_listener($event) { return ctx.onEnter($event); })("mouseleave", function PopoverComponent_Template_div_mouseleave_0_listener($event) { return ctx.onLeave($event); });
-            i0.ɵɵelement(1, "div", 1);
-            i0.ɵɵtemplate(2, PopoverComponent_Conditional_2_Template, 2, 4)(3, PopoverComponent_Conditional_3_Template, 3, 0, "div", 2);
-            i0.ɵɵelementStart(4, "div", 3)(5, "p", 4);
-            i0.ɵɵtext(6);
-            i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(7, PopoverComponent_Conditional_7_Template, 8, 2, "ng-container");
-            i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(8, PopoverComponent_Conditional_8_Template, 8, 5, "ng-container");
-            i0.ɵɵelementEnd();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PopoverComponent, selectors: [["sdc-map-popover"]], inputs: { node: "node", theme: [1, "theme"] }, outputs: { load3dView: "load3dView", selectSectionForBA: "selectSectionForBA", openSeatMap: "openSeatMap" }, decls: 2, vars: 2, consts: [[3, "data", "popoverId", "showBestAvailable", "showOpenSeatMap", "excludeSeatMapSections"], [3, "data", "popoverId"], [3, "mouseEnter", "mouseLeave", "load3dView", "selectForBA", "openSeatMap", "data", "popoverId", "showBestAvailable", "showOpenSeatMap", "excludeSeatMapSections"], [3, "mouseEnter", "mouseLeave", "data", "popoverId"]], template: function PopoverComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, PopoverComponent_Conditional_0_Template, 1, 6, "sdc-section-popover", 0)(1, PopoverComponent_Conditional_1_Template, 1, 2, "sdc-seat-popover", 1);
         } if (rf & 2) {
-            i0.ɵɵclassMap(ctx.computedClass());
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.thumbnail ? 2 : 3);
-            i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate1(" ", ctx.section, " ");
+            i0.ɵɵconditional(ctx.sectionData ? 0 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.node.type === ctx.Nodes.Seat ? 7 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.price ? 8 : -1);
-        } }, dependencies: [CurrencyPipe, NgOptimizedImage], styles: [".sdc-map-popover[_ngcontent-%COMP%]{--sdc-map-popover-background-color: var(--color-pure-black);--sdc-map-popover-border-radius: var(--radius-xl);--sdc-map-popover-width: 150px;--sdc-map-popover-height: 94px;--sdc-map-popover-lg-width: 270px;--sdc-map-popover-lg-height: auto;--sdc-map-popover-thumbnail-desktop-height: 124px;--sdc-map-popover-thumbnail-mobile-height: 66px;--sdc-map-popover-loader-background-color: var(--color-pure-black);--sdc-map-popover-loader-height: 124px;--sdc-map-popover-loader-spinner-border-color: var(--color-neutral-300);--sdc-map-popover-loader-spinner-border-top-color: var(--color-pure-white);--sdc-map-popover-loader-spinner-size: 2rem;--sdc-map-popover-loader-spinner-text-color: var(--color-neutral-200);--sdc-map-popover-content-background-color: var(--color-neutral-800);--sdc-map-popover-content-padding: var(--space-1_5) var(--space-0);--sdc-map-popover-text-color: var(--color-pure-white);--sdc-map-popover-text-size: var(--text-xs);--sdc-map-popover-text-weight: var(--font-semibold);--sdc-map-popover-text-light-weight: var(--font-light);--sdc-map-popover-text-light-opacity: .5;--sdc-map-popover-gradient-from: var(--color-primary-transparent-30);--sdc-map-popover-gradient-via: var(--color-primary);--sdc-map-popover-gradient-to: var(--color-primary-transparent-30);--sdc-map-popover-gradient-height: 2px;--sdc-map-popover-price-container-padding: var(--space-1_5) var(--space-0);--sdc-map-popover-price-text-color: var(--color-pure-white);--sdc-map-popover-price-text-size: var(--text-sm);--sdc-map-popover-price-text-weight: var(--font-semibold);--sdc-map-popover-price-text-light-color: var(--color-primary);--sdc-map-popover-price-text-light-weight: var(--font-light);display:flex;flex-direction:column;overflow:hidden;background-color:var(--sdc-map-popover-background-color);border-radius:var(--sdc-map-popover-border-radius);width:var(--sdc-map-popover-width);height:var(--sdc-map-popover-height)}.popover-thumbnail-desktop[_ngcontent-%COMP%]{display:none}.popover-thumbnail-mobile[_ngcontent-%COMP%]{display:flex;object-fit:cover;pointer-events:auto;height:var(--sdc-map-popover-thumbnail-mobile-height)}.popover-loader-container[_ngcontent-%COMP%]{display:flex;align-items:center;background-color:var(--sdc-map-popover-loader-background-color);height:var(--sdc-map-popover-loader-height)}@media (min-width: 1024px){.sdc-map-popover[_ngcontent-%COMP%]{width:var(--sdc-map-popover-lg-width);height:var(--sdc-map-popover-lg-height)}.popover-thumbnail-desktop[_ngcontent-%COMP%]{display:flex;object-fit:cover;pointer-events:auto;height:var(--sdc-map-popover-thumbnail-desktop-height)}.popover-thumbnail-mobile[_ngcontent-%COMP%]{display:none}}.popover-loader-spinner-container[_ngcontent-%COMP%]{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;width:100%}.popover-loader-spinner[_ngcontent-%COMP%]{position:relative;display:flex;justify-content:center;align-items:center;border:2px solid var(--sdc-map-popover-loader-spinner-border-color);border-top-color:var(--sdc-map-popover-loader-spinner-border-top-color);border-radius:9999px;width:var(--sdc-map-popover-loader-spinner-size);height:var(--sdc-map-popover-loader-spinner-size);color:var(--sdc-map-popover-loader-spinner-text-color);font-size:2.25rem;animation:_ngcontent-%COMP%_spin 1s linear infinite}.popover-content[_ngcontent-%COMP%]{display:flex;flex-direction:column;align-items:center;gap:.25rem;background-color:var(--sdc-map-popover-content-background-color);padding:var(--sdc-map-popover-content-padding)}.popover-text[_ngcontent-%COMP%]{display:block;text-transform:uppercase;color:var(--sdc-map-popover-text-color);font-size:var(--sdc-map-popover-text-size);font-weight:var(--sdc-map-popover-text-weight)}.popover-text-light[_ngcontent-%COMP%]{font-weight:var(--sdc-map-popover-text-light-weight);opacity:var(--sdc-map-popover-text-light-opacity)}.popover-gradient[_ngcontent-%COMP%]{width:100%;background-image:linear-gradient(to right,var(--sdc-map-popover-gradient-from),var(--sdc-map-popover-gradient-via),var(--sdc-map-popover-gradient-to));height:var(--sdc-map-popover-gradient-height)}.popover-price-container[_ngcontent-%COMP%]{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--sdc-map-popover-price-container-padding)}.popover-price-text[_ngcontent-%COMP%]{display:block;text-transform:uppercase;color:var(--sdc-map-popover-price-text-color);font-size:var(--sdc-map-popover-price-text-size);font-weight:var(--sdc-map-popover-price-text-weight)}.popover-price-text-light[_ngcontent-%COMP%]{color:var(--sdc-map-popover-price-text-light-color);font-weight:var(--sdc-map-popover-price-text-light-weight)}@keyframes _ngcontent-%COMP%_spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}"], changeDetection: 0 });
+            i0.ɵɵconditional(ctx.seatData ? 1 : -1);
+        } }, dependencies: [CommonModule, SeatPopoverComponent, SectionPopoverComponent], styles: [".lds-dual-ring[_ngcontent-%COMP%]{display:inline-block;width:80px;height:80px}.lds-dual-ring[_ngcontent-%COMP%]:after{content:\" \";display:block;width:32px;height:32px;margin:16px 8px 8px 16px;border-radius:50%;border:3px solid #fff;border-color:#fff transparent #fff transparent;animation:_ngcontent-%COMP%_lds-dual-ring 1.2s linear infinite}@keyframes _ngcontent-%COMP%_lds-dual-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}h5[_ngcontent-%COMP%]{margin:.25rem 0;font-size:.875rem;line-height:1.25rem}.font-normal[_ngcontent-%COMP%]{font-weight:400}.w-80[_ngcontent-%COMP%]{width:20rem}.h-48[_ngcontent-%COMP%]{height:12rem}.h-auto[_ngcontent-%COMP%]{height:auto}.text-white[_ngcontent-%COMP%]{color:#fff}.bg-black[_ngcontent-%COMP%]{background-color:#000}.rounded-xl[_ngcontent-%COMP%]{border-radius:.75rem}.overflow-hidden[_ngcontent-%COMP%]{overflow:hidden}.w-full[_ngcontent-%COMP%]{width:100%}.h-full[_ngcontent-%COMP%]{height:100%}.bg-center[_ngcontent-%COMP%]{background-position:center}.bg-cover[_ngcontent-%COMP%]{background-size:cover}.bg-no-repeat[_ngcontent-%COMP%]{background-repeat:no-repeat}.flex[_ngcontent-%COMP%]{display:flex}.justify-center[_ngcontent-%COMP%]{justify-content:center}.items-center[_ngcontent-%COMP%]{align-items:center}.px-3[_ngcontent-%COMP%]{padding-left:.75rem;padding-right:.75rem}.py-2[_ngcontent-%COMP%]{padding-top:.5rem;padding-bottom:.5rem}.w-1\\/2[_ngcontent-%COMP%]{width:50%}.mr-5[_ngcontent-%COMP%]{margin-right:1.25rem}.min-w-max[_ngcontent-%COMP%]{min-width:max-content}.text-right[_ngcontent-%COMP%]{text-align:right}.viewer3d-image[_ngcontent-%COMP%]{cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding:8px;font-size:12px}.btn-main[_ngcontent-%COMP%]{background-color:#007bff;color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;cursor:pointer}.btn-white[_ngcontent-%COMP%]{background-color:#fff;color:#007bff;border:1px solid #007bff;border-radius:4px;padding:.5rem 1rem;cursor:pointer}.btn-white[_ngcontent-%COMP%]:hover{color:#0056b3}.tooltip-img[_ngcontent-%COMP%]{background-position:center;background-size:cover;background-repeat:no-repeat}.block[_ngcontent-%COMP%]{display:block}.md\\\\[_ngcontent-%COMP%]:hidden{display:none}@media (min-width: 768px){.md\\\\[_ngcontent-%COMP%]:hidden{display:none}}.text-main[_ngcontent-%COMP%]{color:#007bff}.text-main-accent[_ngcontent-%COMP%]{color:#0056b3}.mr-2[_ngcontent-%COMP%]{margin-right:.5rem}.h-9[_ngcontent-%COMP%]{height:2.25rem}.text-xs[_ngcontent-%COMP%]{font-size:.75rem;line-height:1rem}.disabled\\\\[_ngcontent-%COMP%]:opacity-30:disabled{opacity:.3}.transition-transform[_ngcontent-%COMP%]{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\\\\[_ngcontent-%COMP%]:scale-95:hover{transform:scale(.95)}.disabled\\\\[_ngcontent-%COMP%]:hover\\\\:transform-none:disabled:hover{transform:none}.hover\\\\[_ngcontent-%COMP%]:text-main-accent:hover{color:#0056b3}"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PopoverComponent, [{
         type: Component,
-        args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'sdc-map-popover', imports: [CurrencyPipe, NgOptimizedImage], template: "<div [class]=\"computedClass()\" (mouseenter)=\"onEnter($event)\" (mouseleave)=\"onLeave($event)\">\n  <div id=\"arrow\"></div>\n  <!-- THUMBNAIL -->\n  @if (thumbnail) {\n    <img\n      class=\"popover-thumbnail-desktop\"\n      height=\"124\"\n      id=\"pano-view\"\n      priority\n      width=\"275\"\n      [alt]=\"'thumbnail-' + node.id\"\n      [ngSrc]=\"thumbnail\" />\n    <img\n      class=\"popover-thumbnail-mobile\"\n      height=\"78\"\n      id=\"mobile-pano-view\"\n      priority\n      width=\"160\"\n      [alt]=\"'thumbnail-' + node.id\"\n      [ngSrc]=\"thumbnail\" />\n  } @else {\n    <!-- LOADER -->\n    <div class=\"popover-loader-container\">\n      <div class=\"popover-loader-spinner-container\">\n        <div class=\"popover-loader-spinner\"></div>\n      </div>\n    </div>\n  }\n\n  <!-- CONTENT -->\n  <div class=\"popover-content\">\n    <p class=\"popover-text\">\n      <!-- <span class=\"popover-text-light\">\n        {{ node.id }}\n      </span> -->\n\n      {{ section }}\n    </p>\n\n    @if (node.type === Nodes.Seat) {\n      <ng-container>\n        <p class=\"popover-text\">\n          <span class=\"popover-text-light\"> Row</span>\n\n          {{ row }}\n\n          &nbsp;\n\n          <span class=\"popover-text-light\">Seat</span>\n\n          {{ seat }}\n        </p>\n      </ng-container>\n    }\n  </div>\n\n  <!-- PRICE & BENEFITS -->\n  @if (price) {\n    <ng-container>\n      <!-- GRADIENT -->\n      <div class=\"popover-gradient\"></div>\n\n      <!-- BENEFITS & PRICE -->\n      <div class=\"popover-price-container\">\n        <!-- PRICE -->\n        <p class=\"popover-price-text\">\n          <span class=\"popover-price-text-light\"> {{ prices!.length > 1 ? 'FROM' : 'PRICE' }} &nbsp; </span>\n\n          {{ price | currency: 'USD' }}\n        </p>\n      </div>\n    </ng-container>\n  }\n</div>\n", styles: [".sdc-map-popover{--sdc-map-popover-background-color: var(--color-pure-black);--sdc-map-popover-border-radius: var(--radius-xl);--sdc-map-popover-width: 150px;--sdc-map-popover-height: 94px;--sdc-map-popover-lg-width: 270px;--sdc-map-popover-lg-height: auto;--sdc-map-popover-thumbnail-desktop-height: 124px;--sdc-map-popover-thumbnail-mobile-height: 66px;--sdc-map-popover-loader-background-color: var(--color-pure-black);--sdc-map-popover-loader-height: 124px;--sdc-map-popover-loader-spinner-border-color: var(--color-neutral-300);--sdc-map-popover-loader-spinner-border-top-color: var(--color-pure-white);--sdc-map-popover-loader-spinner-size: 2rem;--sdc-map-popover-loader-spinner-text-color: var(--color-neutral-200);--sdc-map-popover-content-background-color: var(--color-neutral-800);--sdc-map-popover-content-padding: var(--space-1_5) var(--space-0);--sdc-map-popover-text-color: var(--color-pure-white);--sdc-map-popover-text-size: var(--text-xs);--sdc-map-popover-text-weight: var(--font-semibold);--sdc-map-popover-text-light-weight: var(--font-light);--sdc-map-popover-text-light-opacity: .5;--sdc-map-popover-gradient-from: var(--color-primary-transparent-30);--sdc-map-popover-gradient-via: var(--color-primary);--sdc-map-popover-gradient-to: var(--color-primary-transparent-30);--sdc-map-popover-gradient-height: 2px;--sdc-map-popover-price-container-padding: var(--space-1_5) var(--space-0);--sdc-map-popover-price-text-color: var(--color-pure-white);--sdc-map-popover-price-text-size: var(--text-sm);--sdc-map-popover-price-text-weight: var(--font-semibold);--sdc-map-popover-price-text-light-color: var(--color-primary);--sdc-map-popover-price-text-light-weight: var(--font-light);display:flex;flex-direction:column;overflow:hidden;background-color:var(--sdc-map-popover-background-color);border-radius:var(--sdc-map-popover-border-radius);width:var(--sdc-map-popover-width);height:var(--sdc-map-popover-height)}.popover-thumbnail-desktop{display:none}.popover-thumbnail-mobile{display:flex;object-fit:cover;pointer-events:auto;height:var(--sdc-map-popover-thumbnail-mobile-height)}.popover-loader-container{display:flex;align-items:center;background-color:var(--sdc-map-popover-loader-background-color);height:var(--sdc-map-popover-loader-height)}@media (min-width: 1024px){.sdc-map-popover{width:var(--sdc-map-popover-lg-width);height:var(--sdc-map-popover-lg-height)}.popover-thumbnail-desktop{display:flex;object-fit:cover;pointer-events:auto;height:var(--sdc-map-popover-thumbnail-desktop-height)}.popover-thumbnail-mobile{display:none}}.popover-loader-spinner-container{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;width:100%}.popover-loader-spinner{position:relative;display:flex;justify-content:center;align-items:center;border:2px solid var(--sdc-map-popover-loader-spinner-border-color);border-top-color:var(--sdc-map-popover-loader-spinner-border-top-color);border-radius:9999px;width:var(--sdc-map-popover-loader-spinner-size);height:var(--sdc-map-popover-loader-spinner-size);color:var(--sdc-map-popover-loader-spinner-text-color);font-size:2.25rem;animation:spin 1s linear infinite}.popover-content{display:flex;flex-direction:column;align-items:center;gap:.25rem;background-color:var(--sdc-map-popover-content-background-color);padding:var(--sdc-map-popover-content-padding)}.popover-text{display:block;text-transform:uppercase;color:var(--sdc-map-popover-text-color);font-size:var(--sdc-map-popover-text-size);font-weight:var(--sdc-map-popover-text-weight)}.popover-text-light{font-weight:var(--sdc-map-popover-text-light-weight);opacity:var(--sdc-map-popover-text-light-opacity)}.popover-gradient{width:100%;background-image:linear-gradient(to right,var(--sdc-map-popover-gradient-from),var(--sdc-map-popover-gradient-via),var(--sdc-map-popover-gradient-to));height:var(--sdc-map-popover-gradient-height)}.popover-price-container{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--sdc-map-popover-price-container-padding)}.popover-price-text{display:block;text-transform:uppercase;color:var(--sdc-map-popover-price-text-color);font-size:var(--sdc-map-popover-price-text-size);font-weight:var(--sdc-map-popover-price-text-weight)}.popover-price-text-light{color:var(--sdc-map-popover-price-text-light-color);font-weight:var(--sdc-map-popover-price-text-light-weight)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'sdc-map-popover', standalone: true, imports: [CommonModule, SeatPopoverComponent, SectionPopoverComponent], template: "<!-- SECTION POPOVER -->\n@if (sectionData) {\n  <sdc-section-popover\n    [data]=\"sectionData\"\n    [popoverId]=\"'popover-' + node.id\"\n    [showBestAvailable]=\"true\"\n    [showOpenSeatMap]=\"true\"\n    [excludeSeatMapSections]=\"['S_BLCHADA', 'S_Bleacher']\"\n    (mouseEnter)=\"onEnter($event)\"\n    (mouseLeave)=\"onLeave($event)\"\n    (load3dView)=\"onLoad3dView()\"\n    (selectForBA)=\"onSelectSectionForBA($event)\"\n    (openSeatMap)=\"onOpenSeatMap()\">\n  </sdc-section-popover>\n}\n\n<!-- SEAT POPOVER -->\n@if (seatData) {\n  <sdc-seat-popover\n    [data]=\"seatData\"\n    [popoverId]=\"'popover-' + node.id\"\n    (mouseEnter)=\"onEnter($event)\"\n    (mouseLeave)=\"onLeave($event)\">\n  </sdc-seat-popover>\n}\n", styles: [".lds-dual-ring{display:inline-block;width:80px;height:80px}.lds-dual-ring:after{content:\" \";display:block;width:32px;height:32px;margin:16px 8px 8px 16px;border-radius:50%;border:3px solid #fff;border-color:#fff transparent #fff transparent;animation:lds-dual-ring 1.2s linear infinite}@keyframes lds-dual-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}h5{margin:.25rem 0;font-size:.875rem;line-height:1.25rem}.font-normal{font-weight:400}.w-80{width:20rem}.h-48{height:12rem}.h-auto{height:auto}.text-white{color:#fff}.bg-black{background-color:#000}.rounded-xl{border-radius:.75rem}.overflow-hidden{overflow:hidden}.w-full{width:100%}.h-full{height:100%}.bg-center{background-position:center}.bg-cover{background-size:cover}.bg-no-repeat{background-repeat:no-repeat}.flex{display:flex}.justify-center{justify-content:center}.items-center{align-items:center}.px-3{padding-left:.75rem;padding-right:.75rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.w-1\\/2{width:50%}.mr-5{margin-right:1.25rem}.min-w-max{min-width:max-content}.text-right{text-align:right}.viewer3d-image{cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding:8px;font-size:12px}.btn-main{background-color:#007bff;color:#fff;border:none;border-radius:4px;padding:.5rem 1rem;cursor:pointer}.btn-white{background-color:#fff;color:#007bff;border:1px solid #007bff;border-radius:4px;padding:.5rem 1rem;cursor:pointer}.btn-white:hover{color:#0056b3}.tooltip-img{background-position:center;background-size:cover;background-repeat:no-repeat}.block{display:block}.md\\\\:hidden{display:none}@media (min-width: 768px){.md\\\\:hidden{display:none}}.text-main{color:#007bff}.text-main-accent{color:#0056b3}.mr-2{margin-right:.5rem}.h-9{height:2.25rem}.text-xs{font-size:.75rem;line-height:1rem}.disabled\\\\:opacity-30:disabled{opacity:.3}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\\\\:scale-95:hover{transform:scale(.95)}.disabled\\\\:hover\\\\:transform-none:disabled:hover{transform:none}.hover\\\\:text-main-accent:hover{color:#0056b3}\n"] }]
     }], null, { node: [{
-            type: Input,
-            args: [{ required: true }]
+            type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PopoverComponent, { className: "PopoverComponent", filePath: "dvm/popover/popover.component.ts", lineNumber: 33 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PopoverComponent, { className: "PopoverComponent", filePath: "dvm/popover/popover.component.ts", lineNumber: 36 }); })();
+
+/**
+ * Generic popover manager service that handles popover lifecycle and positioning.
+ * This service is DVM-agnostic and delegates positioning logic to IPopoverPositioner.
+ */
+class PopoverManagerService {
+    currentPopoverId = '';
+    tooltip;
+    positioner;
+    constructor(positioner) {
+        this.positioner = positioner;
+    }
+    /**
+     * Shows a popover with the specified configuration.
+     * @param config - Configuration for the popover including component, data, and positioning
+     */
+    showPopover(config) {
+        config.container.clear();
+        this.currentPopoverId = config.nodeId;
+        this.tooltip = config.tooltip;
+        const componentRef = config.container.createComponent(config.component);
+        if (config.componentInputs) {
+            Object.entries(config.componentInputs).forEach(([key, value]) => {
+                componentRef.instance[key] = value;
+            });
+        }
+        if (config.eventHandlers) {
+            Object.entries(config.eventHandlers).forEach(([key, handler]) => {
+                const instance = componentRef.instance;
+                if (instance[key] && typeof instance[key].subscribe === 'function') {
+                    instance[key].subscribe(handler);
+                }
+            });
+        }
+        const placement = this.positioner.calculatePlacement(config.node, config.containerElement);
+        const offset = this.positioner.calculateOffset(config.node);
+        createPopper(config.node, this.tooltip, {
+            placement,
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: {
+                        offset,
+                    },
+                },
+                {
+                    name: 'flip',
+                    options: {
+                        fallbackPlacements: [],
+                    },
+                },
+            ],
+        });
+        this.tooltip.setAttribute('data-show', '');
+    }
+    /**
+     * Hides the popover for the specified node ID.
+     * @param nodeId - The node ID of the popover to hide
+     */
+    hidePopover(nodeId) {
+        if (this.currentPopoverId === nodeId) {
+            this.tooltip?.removeAttribute('data-show');
+        }
+    }
+    /**
+     * Clears all popovers.
+     */
+    clearAll() {
+        this.tooltip?.removeAttribute('data-show');
+        this.currentPopoverId = '';
+    }
+    static ɵfac = function PopoverManagerService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PopoverManagerService)(i0.ɵɵinject(POPOVER_POSITIONER)); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PopoverManagerService, factory: PopoverManagerService.ɵfac });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PopoverManagerService, [{
+        type: Injectable
+    }], () => [{ type: undefined, decorators: [{
+                type: Inject,
+                args: [POPOVER_POSITIONER]
+            }] }], null); })();
+
+/**
+ * DVM-specific positioning service for popovers.
+ * Handles calculation of popover placement and offset based on DVM node properties.
+ */
+class DvmPopoverPositionerService {
+    dvmService;
+    configService;
+    constructor(dvmService, configService) {
+        this.dvmService = dvmService;
+        this.configService = configService;
+    }
+    /**
+     * Calculates the optimal placement for a popover based on node position.
+     * @param node - The MapViewerNode to position relative to
+     * @param container - The container element for positioning reference
+     * @returns The calculated placement ('top' or 'bottom')
+     */
+    calculatePlacement(node, container) {
+        if (!node.aabb) {
+            throw new Error('Node AABB is not defined');
+        }
+        const nodeSceneCenter = [
+            node.aabb[0] + node.aabb[2] / 2,
+            node.aabb[1] + node.aabb[3] / 2,
+        ];
+        const nodeDomCenter = this.dvmService.viewerService.fromSceneToDom(nodeSceneCenter);
+        if (nodeDomCenter[1] > container.offsetHeight / 2) {
+            return 'top';
+        }
+        else {
+            return 'bottom';
+        }
+    }
+    /**
+     * Calculates the offset for popover positioning based on node type and configuration.
+     * @param node - The MapViewerNode to calculate offset for
+     * @returns An array of [x, y] offset values
+     */
+    calculateOffset(node) {
+        if (node.type === 'seat') {
+            return [0, 6];
+        }
+        if (node.type === 'section' || node.type === 'general_admission') {
+            const dvmData = this.configService.configuration.dvmData;
+            const sectionOffsets = dvmData?.sectionOffsets || {};
+            const nodeId = node.id;
+            const nodeOriginalId = node.original_id;
+            const dvmOffset = sectionOffsets[nodeId] ?? sectionOffsets[nodeOriginalId];
+            return dvmOffset ?? [0, 0];
+        }
+        return [0, 0];
+    }
+    static ɵfac = function DvmPopoverPositionerService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DvmPopoverPositionerService)(i0.ɵɵinject(DVM_SERVICE), i0.ɵɵinject(CONFIGURATION_SERVICE)); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: DvmPopoverPositionerService, factory: DvmPopoverPositionerService.ɵfac });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DvmPopoverPositionerService, [{
+        type: Injectable
+    }], () => [{ type: undefined, decorators: [{
+                type: Inject,
+                args: [DVM_SERVICE]
+            }] }, { type: undefined, decorators: [{
+                type: Inject,
+                args: [CONFIGURATION_SERVICE]
+            }] }], null); })();
+
+/**
+ * Abstract base class for transforming data from source format to target popover format.
+ * Apps can extend this class to implement their own data transformation logic.
+ */
+class BasePopoverDataTransformer {
+}
+/**
+ * Abstract base class for transforming seat data to SeatPopoverData format.
+ * Apps should extend this class and implement the transform method with their
+ * specific seat data models.
+ */
+class BaseSeatDataTransformer extends BasePopoverDataTransformer {
+}
+/**
+ * Abstract base class for transforming section data to SectionPopoverData format.
+ * Apps should extend this class and implement the transform method with their
+ * specific section data models.
+ */
+class BaseSectionDataTransformer extends BasePopoverDataTransformer {
+}
 
 /*
  * Public API Surface of software-division-components
@@ -5197,7 +5850,7 @@ class HlmDialogDescription {
     static ɵfac = function HlmDialogDescription_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmDialogDescription)(); };
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmDialogDescription, selectors: [["", "hlmDialogDescription", ""]], hostVars: 2, hostBindings: function HlmDialogDescription_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassMap(ctx._computedClass());
-        } }, inputs: { userClass: [1, "class", "userClass"] }, features: [i0.ɵɵHostDirectivesFeature([i1$1.BrnDialogDescription])] });
+        } }, inputs: { userClass: [1, "class", "userClass"] }, features: [i0.ɵɵHostDirectivesFeature([i1$2.BrnDialogDescription])] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmDialogDescription, [{
         type: Directive,
@@ -5266,7 +5919,7 @@ class HlmDialogTitle {
     static ɵfac = function HlmDialogTitle_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmDialogTitle)(); };
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmDialogTitle, selectors: [["", "hlmDialogTitle", ""]], hostVars: 2, hostBindings: function HlmDialogTitle_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassMap(ctx._computedClass());
-        } }, inputs: { userClass: [1, "class", "userClass"] }, features: [i0.ɵɵHostDirectivesFeature([i1$1.BrnDialogTitle])] });
+        } }, inputs: { userClass: [1, "class", "userClass"] }, features: [i0.ɵɵHostDirectivesFeature([i1$2.BrnDialogTitle])] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmDialogTitle, [{
         type: Directive,
@@ -5529,7 +6182,7 @@ class HlmSelectGroup {
     static ɵfac = function HlmSelectGroup_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSelectGroup)(); };
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSelectGroup, selectors: [["", "hlmSelectGroup", ""], ["hlm-select-group"]], hostVars: 2, hostBindings: function HlmSelectGroup_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassMap(ctx._computedClass());
-        } }, inputs: { userClass: [1, "class", "userClass"] }, features: [i0.ɵɵHostDirectivesFeature([i1$2.BrnSelectGroup])] });
+        } }, inputs: { userClass: [1, "class", "userClass"] }, features: [i0.ɵɵHostDirectivesFeature([i1$3.BrnSelectGroup])] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSelectGroup, [{
         type: Directive,
@@ -5550,7 +6203,7 @@ class HlmSelectLabel {
     static ɵfac = function HlmSelectLabel_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSelectLabel)(); };
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: HlmSelectLabel, selectors: [["", "hlmSelectLabel", ""], ["hlm-select-label"]], hostVars: 2, hostBindings: function HlmSelectLabel_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassMap(ctx._computedClass());
-        } }, inputs: { userClass: [1, "class", "userClass"] }, features: [i0.ɵɵHostDirectivesFeature([i1$2.BrnSelectLabel])] });
+        } }, inputs: { userClass: [1, "class", "userClass"] }, features: [i0.ɵɵHostDirectivesFeature([i1$3.BrnSelectLabel])] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HlmSelectLabel, [{
         type: Directive,
@@ -5574,7 +6227,7 @@ class HlmSelectOption {
     static ɵfac = function HlmSelectOption_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HlmSelectOption)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HlmSelectOption, selectors: [["hlm-option"]], hostVars: 2, hostBindings: function HlmSelectOption_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassMap(ctx._computedClass());
-        } }, inputs: { userClass: [1, "class", "userClass"] }, features: [i0.ɵɵProvidersFeature([provideIcons({ lucideCheck })]), i0.ɵɵHostDirectivesFeature([{ directive: i1$2.BrnSelectOption, inputs: ["disabled", "disabled", "value", "value"] }])], ngContentSelectors: _c0$1, decls: 3, vars: 1, consts: [[1, "absolute", "right-2", "flex", "size-3.5", "items-center", "justify-center"], ["aria-hidden", "true", "hlm", "", "name", "lucideCheck", "size", "sm"]], template: function HlmSelectOption_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { userClass: [1, "class", "userClass"] }, features: [i0.ɵɵProvidersFeature([provideIcons({ lucideCheck })]), i0.ɵɵHostDirectivesFeature([{ directive: i1$3.BrnSelectOption, inputs: ["disabled", "disabled", "value", "value"] }])], ngContentSelectors: _c0$1, decls: 3, vars: 1, consts: [[1, "absolute", "right-2", "flex", "size-3.5", "items-center", "justify-center"], ["aria-hidden", "true", "hlm", "", "name", "lucideCheck", "size", "sm"]], template: function HlmSelectOption_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "span", 0);
             i0.ɵɵtemplate(1, HlmSelectOption_Conditional_1_Template, 1, 0, "ng-icon", 1);
@@ -5834,7 +6487,7 @@ class SelectComponent {
             i0.ɵɵproperty("ngClass", ctx.variantClasses);
             i0.ɵɵadvance();
             i0.ɵɵrepeater(ctx.options());
-        } }, dependencies: [CommonModule, i1$3.NgClass, i1$2.BrnSelect, i1$2.BrnSelectContent, i1$2.BrnSelectValue, HlmSelectContent, HlmSelectTrigger, HlmSelectOption, HlmSelectValue, HlmSelect], styles: [".select-root[_ngcontent-%COMP%]{display:inline-block;width:100%}.select-trigger[_ngcontent-%COMP%]{display:flex;justify-content:space-between;align-items:center;border-radius:25px!important;outline:none;width:100%;overflow:hidden;color:#fff;font-size:.75rem;text-align:center;white-space:nowrap;text-overflow:ellipsis}.select-trigger[_ngcontent-%COMP%]:focus, .select-trigger[_ngcontent-%COMP%]:focus-visible{outline:none;box-shadow:0 0 0 2px var(--accent, var(--ring-accent, #0ea5e9))}.select-trigger--sm[_ngcontent-%COMP%]{display:flex}.select-trigger--lg[_ngcontent-%COMP%]{display:none}@media (min-width: 1024px){.select-trigger--sm[_ngcontent-%COMP%]{display:none;font-weight:500;font-size:.875rem}.select-trigger--lg[_ngcontent-%COMP%]{display:flex;font-weight:500;font-size:.875rem}}.full-width[_ngcontent-%COMP%]{width:100%}"], changeDetection: 0 });
+        } }, dependencies: [CommonModule, i1$1.NgClass, i1$3.BrnSelect, i1$3.BrnSelectContent, i1$3.BrnSelectValue, HlmSelectContent, HlmSelectTrigger, HlmSelectOption, HlmSelectValue, HlmSelect], styles: [".select-root[_ngcontent-%COMP%]{display:inline-block;width:100%}.select-trigger[_ngcontent-%COMP%]{display:flex;justify-content:space-between;align-items:center;border-radius:25px!important;outline:none;width:100%;overflow:hidden;color:#fff;font-size:.75rem;text-align:center;white-space:nowrap;text-overflow:ellipsis}.select-trigger[_ngcontent-%COMP%]:focus, .select-trigger[_ngcontent-%COMP%]:focus-visible{outline:none;box-shadow:0 0 0 2px var(--accent, var(--ring-accent, #0ea5e9))}.select-trigger--sm[_ngcontent-%COMP%]{display:flex}.select-trigger--lg[_ngcontent-%COMP%]{display:none}@media (min-width: 1024px){.select-trigger--sm[_ngcontent-%COMP%]{display:none;font-weight:500;font-size:.875rem}.select-trigger--lg[_ngcontent-%COMP%]{display:flex;font-weight:500;font-size:.875rem}}.full-width[_ngcontent-%COMP%]{width:100%}"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectComponent, [{
         type: Component,
@@ -5941,5 +6594,5 @@ function provideScreenObserver(screens) {
  * Generated bundle index. Do not edit.
  */
 
-export { AddDigitalWalletComponent, BraintreeComponent, ButtonComponent, CONFIGURATION_SERVICE, CartComponent, CartItemComponent, CartItemService, CartService, CheckboxComponent, DVM_FORMATTER, DVM_SERVICE, DatePickerComponent, DialogComponent, HlmDialogService as DialogService, DrawerComponent, DrawerService, InputComponent, LegendComponent, LegendElementsComponent, LoaderComponent, LoaderService, MapLoaderComponent, NeighborsComponent, PopoverComponent, PopoverService, RadioComponent, ScreenObserver, SelectComponent, StepperComponent, SvgIconComponent, TableComponent, TicketInfoItemComponent, TicketInfoItemService, declareGlobalCssVariables, provideScreenObserver, provideSdc };
+export { AddDigitalWalletComponent, BasePopoverComponent, BasePopoverDataTransformer, BaseSeatDataTransformer, BaseSectionDataTransformer, BraintreeComponent, ButtonComponent, CONFIGURATION_SERVICE, CartComponent, CartItemComponent, CartItemService, CartService, CheckboxComponent, DVM_FORMATTER, DVM_SERVICE, DatePickerComponent, DialogComponent, HlmDialogService as DialogService, DrawerComponent, DrawerService, DvmPopoverPositionerService, InputComponent, LegendComponent, LegendElementsComponent, LoaderComponent, LoaderService, MapLoaderComponent, NeighborsComponent, POPOVER_MANAGER, POPOVER_POSITIONER, PopoverComponent, PopoverManagerService, PopoverService, RadioComponent, ScreenObserver, SeatPopoverComponent, SectionPopoverComponent, SelectComponent, StepperComponent, SvgIconComponent, THUMBNAIL_PROVIDER, TableComponent, TicketInfoItemComponent, TicketInfoItemService, declareGlobalCssVariables, provideScreenObserver, provideSdc };
 //# sourceMappingURL=3ddv-software-division-components.mjs.map