@3ddv/software-division-components 2.0.9 → 2.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/3ddv-software-division-components-dvm-map-loader.mjs +47 -27
- package/fesm2022/3ddv-software-division-components-dvm-map-loader.mjs.map +1 -1
- package/fesm2022/3ddv-software-division-components-dvm-neighbors.mjs +3 -3
- package/fesm2022/3ddv-software-division-components-dvm-neighbors.mjs.map +1 -1
- package/fesm2022/3ddv-software-division-components-dvm-popover.mjs +15 -6
- package/fesm2022/3ddv-software-division-components-dvm-popover.mjs.map +1 -1
- package/fesm2022/3ddv-software-division-components-generic-add-digital-wallet.mjs +13 -5
- package/fesm2022/3ddv-software-division-components-generic-add-digital-wallet.mjs.map +1 -1
- package/fesm2022/3ddv-software-division-components-generic-braintree.mjs +66 -6
- package/fesm2022/3ddv-software-division-components-generic-braintree.mjs.map +1 -1
- package/fesm2022/3ddv-software-division-components-generic-icon.mjs +2 -1
- package/fesm2022/3ddv-software-division-components-generic-icon.mjs.map +1 -1
- package/package.json +1 -1
- package/styles.css +1 -1
- package/types/3ddv-software-division-components-dvm-map-loader.d.ts +4 -2
- package/types/3ddv-software-division-components-dvm-popover.d.ts +5 -2
- package/types/3ddv-software-division-components-generic-add-digital-wallet.d.ts +3 -2
- package/types/3ddv-software-division-components-generic-braintree.d.ts +22 -3
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
import { NgOptimizedImage, NgClass, CommonModule } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { input, viewChild, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { input, viewChild, effect, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
4
4
|
import { createTimeline } from 'animejs';
|
|
5
5
|
import { mergeMap, skip, tap, merge, catchError } from 'rxjs';
|
|
6
6
|
|
|
7
7
|
class MapLoaderComponent {
|
|
8
8
|
// INPUTS
|
|
9
|
-
viewerService = input
|
|
9
|
+
viewerService = input(...(ngDevMode ? [undefined, { debugName: "viewerService" }] : []));
|
|
10
10
|
logo = input.required(...(ngDevMode ? [{ debugName: "logo" }] : []));
|
|
11
11
|
color = input('255 165 0', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
12
12
|
duration = input(500, ...(ngDevMode ? [{ debugName: "duration" }] : []));
|
|
13
13
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
14
|
+
isLoading = input(null, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
|
|
14
15
|
// SIGNALS
|
|
15
16
|
pill = viewChild('pill', ...(ngDevMode ? [{ debugName: "pill" }] : []));
|
|
16
17
|
pillContainer = viewChild('pillContainer', ...(ngDevMode ? [{ debugName: "pillContainer" }] : []));
|
|
@@ -19,6 +20,20 @@ class MapLoaderComponent {
|
|
|
19
20
|
isFirstLoad = true;
|
|
20
21
|
varName = '--ripple-color';
|
|
21
22
|
handlers = [];
|
|
23
|
+
_isLoading = effect(() => {
|
|
24
|
+
// If we use the service instead of the external loading state, do not execute
|
|
25
|
+
if (this.isLoading() == null) {
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
28
|
+
// Here we start with the loader hidden by default
|
|
29
|
+
this.container().nativeElement.classList.add('hidden');
|
|
30
|
+
if (this.isLoading() === true) {
|
|
31
|
+
this.showLoader();
|
|
32
|
+
}
|
|
33
|
+
else if (this.isLoading() === false) {
|
|
34
|
+
this.hideLoader();
|
|
35
|
+
}
|
|
36
|
+
}, ...(ngDevMode ? [{ debugName: "_isLoading" }] : []));
|
|
22
37
|
// GETTERS
|
|
23
38
|
/**
|
|
24
39
|
* Retorna la variable CSS para el color del ripple.
|
|
@@ -105,29 +120,34 @@ class MapLoaderComponent {
|
|
|
105
120
|
* para futuras ocasiones y delegamos en los handlers start y success para mostrar u ocultar el loader respectivamente.
|
|
106
121
|
*/
|
|
107
122
|
initComponent() {
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
const
|
|
113
|
-
.
|
|
114
|
-
.pipe(
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
123
|
+
if (this.isLoading() !== null) {
|
|
124
|
+
return;
|
|
125
|
+
}
|
|
126
|
+
if (typeof this.viewerService() !== 'undefined') {
|
|
127
|
+
const subscription = this.viewerService()
|
|
128
|
+
.waitInitialize()
|
|
129
|
+
.pipe(mergeMap(() => {
|
|
130
|
+
// when initialized, we listen to both load_start and load_success
|
|
131
|
+
const loadStart$ = this.viewerService()
|
|
132
|
+
.getObservable('load_start')
|
|
133
|
+
.pipe(skip(1), // skip first emission
|
|
134
|
+
tap(() => this.showLoader()));
|
|
135
|
+
const loadSuccess$ = this.viewerService()
|
|
136
|
+
.getObservable('load_success')
|
|
137
|
+
.pipe(tap(() => {
|
|
138
|
+
if (this.isFirstLoad) {
|
|
139
|
+
this.isFirstLoad = false;
|
|
140
|
+
}
|
|
141
|
+
}), tap(() => this.handleLoadSuccess()));
|
|
142
|
+
// merge both into one stream
|
|
143
|
+
return merge(loadStart$, loadSuccess$);
|
|
144
|
+
}), catchError((error) => {
|
|
145
|
+
console.error('viewer init error', error);
|
|
146
|
+
return []; // swallow error or return EMPTY
|
|
147
|
+
}))
|
|
148
|
+
.subscribe();
|
|
149
|
+
this.handlers.push(subscription);
|
|
150
|
+
}
|
|
131
151
|
}
|
|
132
152
|
formatRgb(rgbString, wrapped = true) {
|
|
133
153
|
return wrapped ? 'rgb(' + rgbString.split(' ').join(', ') + ')' : rgbString.split(' ').join(', ');
|
|
@@ -142,12 +162,12 @@ class MapLoaderComponent {
|
|
|
142
162
|
}
|
|
143
163
|
}
|
|
144
164
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MapLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
145
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.4", type: MapLoaderComponent, isStandalone: true, selector: "sdc-map-loader", inputs: { viewerService: { classPropertyName: "viewerService", publicName: "viewerService", isSignal: true, isRequired:
|
|
165
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.4", type: MapLoaderComponent, isStandalone: true, selector: "sdc-map-loader", inputs: { viewerService: { classPropertyName: "viewerService", publicName: "viewerService", isSignal: true, isRequired: false, transformFunction: null }, logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "pill", first: true, predicate: ["pill"], descendants: true, isSignal: true }, { propertyName: "pillContainer", first: true, predicate: ["pillContainer"], descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #container class=\"container\" [style]=\"ripple\">\n <!-- Container -->\n <div #pillContainer class=\"pill-container\">\n <!-- PILL -->\n <div #pill class=\"pill ripple-animation\">\n <!-- LOGO -->\n <img\n [ngClass]=\"size() === 'sm' ? 'block' : 'hidden'\"\n alt=\"Club logo loader\"\n height=\"70\"\n priority\n width=\"50\"\n [ngSrc]=\"logo()\" />\n <img\n [ngClass]=\"size() === 'md' ? 'block' : 'hidden'\"\n alt=\"Club logo loader\"\n height=\"90\"\n priority\n width=\"70\"\n [ngSrc]=\"logo()\" />\n </div>\n </div>\n</div>\n", styles: [".ripple-animation{animation:ripple 1s linear infinite}@-webkit-keyframes ripple{0%{box-shadow:0 4px 10px rgba(var(--ripple-color),.1),0 0 rgba(var(--ripple-color),.1),0 0 0 5px rgba(var(--ripple-color),.1),0 0 0 10px rgba(var(--ripple-color),.1),0 0 0 20px rgba(var(--ripple-color),.1),0 0 0 30px rgba(var(--ripple-color),.1),0 0 0 40px rgba(var(--ripple-color),.1)}to{box-shadow:0 4px 10px rgba(var(--ripple-color),.1),0 0 0 5px rgba(var(--ripple-color),.1),0 0 0 10px rgba(var(--ripple-color),.1),0 0 0 20px rgba(var(--ripple-color),.1),0 0 0 30px rgba(var(--ripple-color),.1),0 0 0 40px rgba(var(--ripple-color),.1),0 0 0 50px rgba(var(--ripple-color),0)}}@keyframes ripple{0%{box-shadow:0 4px 10px rgba(var(--ripple-color),.1),0 0 rgba(var(--ripple-color),.1),0 0 0 5px rgba(var(--ripple-color),.1),0 0 0 10px rgba(var(--ripple-color),.1),0 0 0 20px rgba(var(--ripple-color),.1)}to{box-shadow:0 4px 10px rgba(var(--ripple-color),.1),0 0 0 5px rgba(var(--ripple-color),.1),0 0 0 10px rgba(var(--ripple-color),.1),0 0 0 20px rgba(var(--ripple-color),.1),0 0 0 30px rgba(var(--ripple-color),0)}}.container{position:relative;height:100%;width:100%;max-width:100%;overflow:visible}.pill-container{position:absolute;z-index:20;display:flex;align-items:center;justify-content:center;height:100%;width:100%}.pill{display:flex;align-items:center;justify-content:center;width:8rem;height:8rem;border-radius:50%;background-color:#111827e6}@media(min-width:1024px){.pill{width:12rem;height:12rem}}@media(min-width:1920px){.pill{width:13.5rem;height:13.5rem}}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
146
166
|
}
|
|
147
167
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MapLoaderComponent, decorators: [{
|
|
148
168
|
type: Component,
|
|
149
169
|
args: [{ selector: 'sdc-map-loader', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgOptimizedImage, NgClass, CommonModule], template: "<div #container class=\"container\" [style]=\"ripple\">\n <!-- Container -->\n <div #pillContainer class=\"pill-container\">\n <!-- PILL -->\n <div #pill class=\"pill ripple-animation\">\n <!-- LOGO -->\n <img\n [ngClass]=\"size() === 'sm' ? 'block' : 'hidden'\"\n alt=\"Club logo loader\"\n height=\"70\"\n priority\n width=\"50\"\n [ngSrc]=\"logo()\" />\n <img\n [ngClass]=\"size() === 'md' ? 'block' : 'hidden'\"\n alt=\"Club logo loader\"\n height=\"90\"\n priority\n width=\"70\"\n [ngSrc]=\"logo()\" />\n </div>\n </div>\n</div>\n", styles: [".ripple-animation{animation:ripple 1s linear infinite}@-webkit-keyframes ripple{0%{box-shadow:0 4px 10px rgba(var(--ripple-color),.1),0 0 rgba(var(--ripple-color),.1),0 0 0 5px rgba(var(--ripple-color),.1),0 0 0 10px rgba(var(--ripple-color),.1),0 0 0 20px rgba(var(--ripple-color),.1),0 0 0 30px rgba(var(--ripple-color),.1),0 0 0 40px rgba(var(--ripple-color),.1)}to{box-shadow:0 4px 10px rgba(var(--ripple-color),.1),0 0 0 5px rgba(var(--ripple-color),.1),0 0 0 10px rgba(var(--ripple-color),.1),0 0 0 20px rgba(var(--ripple-color),.1),0 0 0 30px rgba(var(--ripple-color),.1),0 0 0 40px rgba(var(--ripple-color),.1),0 0 0 50px rgba(var(--ripple-color),0)}}@keyframes ripple{0%{box-shadow:0 4px 10px rgba(var(--ripple-color),.1),0 0 rgba(var(--ripple-color),.1),0 0 0 5px rgba(var(--ripple-color),.1),0 0 0 10px rgba(var(--ripple-color),.1),0 0 0 20px rgba(var(--ripple-color),.1)}to{box-shadow:0 4px 10px rgba(var(--ripple-color),.1),0 0 0 5px rgba(var(--ripple-color),.1),0 0 0 10px rgba(var(--ripple-color),.1),0 0 0 20px rgba(var(--ripple-color),.1),0 0 0 30px rgba(var(--ripple-color),0)}}.container{position:relative;height:100%;width:100%;max-width:100%;overflow:visible}.pill-container{position:absolute;z-index:20;display:flex;align-items:center;justify-content:center;height:100%;width:100%}.pill{display:flex;align-items:center;justify-content:center;width:8rem;height:8rem;border-radius:50%;background-color:#111827e6}@media(min-width:1024px){.pill{width:12rem;height:12rem}}@media(min-width:1920px){.pill{width:13.5rem;height:13.5rem}}\n"] }]
|
|
150
|
-
}], propDecorators: { viewerService: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewerService", required:
|
|
170
|
+
}], propDecorators: { viewerService: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewerService", required: false }] }], logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], pill: [{ type: i0.ViewChild, args: ['pill', { isSignal: true }] }], pillContainer: [{ type: i0.ViewChild, args: ['pillContainer', { isSignal: true }] }], container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }] } });
|
|
151
171
|
|
|
152
172
|
/*
|
|
153
173
|
* Public API Surface of software-division-components
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"3ddv-software-division-components-dvm-map-loader.mjs","sources":["../../dvm/map-loader/map-loader.component.ts","../../dvm/map-loader/map-loader.component.html","../../dvm/map-loader/public-api.ts","../../dvm/map-loader/3ddv-software-division-components-dvm-map-loader.ts"],"sourcesContent":["import { CommonModule, NgClass, NgOptimizedImage } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, ElementRef, input, OnDestroy, OnInit, viewChild } from '@angular/core';\nimport { createTimeline } from 'animejs';\nimport { catchError, merge, mergeMap, Observable, skip, Subscription, tap } from 'rxjs';\n\n@Component({\n selector: 'sdc-map-loader',\n templateUrl: './map-loader.component.html',\n styleUrl: './map-loader.component.css',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [NgOptimizedImage, NgClass, CommonModule],\n})\nexport class MapLoaderComponent implements OnInit, OnDestroy {\n // INPUTS\n public viewerService = input.required<{\n waitInitialize: () => Observable<any>;\n getObservable: (value: 'load_success' | 'load_start') => Observable<any>;\n }>();\n public logo = input.required<string>();\n public color = input<string>('255 165 0');\n public duration = input<number>(500);\n public size = input<'sm' | 'md'>('md');\n\n // SIGNALS\n public pill = viewChild<ElementRef>('pill');\n public pillContainer = viewChild<ElementRef>('pillContainer');\n public container = viewChild<ElementRef>('container');\n\n // CLASS PROPERTIES\n private isFirstLoad = true;\n private varName = '--ripple-color';\n private readonly handlers: Subscription[] = [];\n\n // GETTERS\n /**\n * Retorna la variable CSS para el color del ripple.\n * Necesitamos setear la variable css --ripple-color con el color accent de la configuración.\n * Como este valor originalmente viene sin comas para ser usado en Tailwind, debemos reemplazar los espacios por comas.\n * Finalmente retornamos el valor y lo implementamos en el div contenedor del ripple para ser usado por el scss.\n */\n public get ripple(): string {\n const rgb = this.formatRgb(this.color(), false);\n\n return `${this.varName}:${rgb};`;\n }\n\n // LC METHODS\n public ngOnInit(): void {\n this.initComponent();\n }\n\n public ngOnDestroy(): void {\n this.destroyComponent();\n }\n\n // CLASS METHODS\n\n /**\n * Muestra el loader.\n * Mediante una animación de animejs, mostramos el loader.\n * Al comenzar, verificará si el contenedor tiene la clase hidden y la removerá si es así.\n */\n private showLoader(): void {\n const pill = this.pill();\n const container = this.container();\n const pillContainer = this.pillContainer();\n\n if (!container || !pill || !pillContainer) {\n return console.error('Loader could not be loaded');\n }\n\n const containerClasses: string = container.nativeElement.classList.value;\n\n if (containerClasses.includes('hidden')) {\n container.nativeElement.classList.remove('hidden');\n }\n\n createTimeline({\n duration: this.duration,\n })\n .add(pillContainer.nativeElement, {\n opacity: [0, 1],\n duration: 100,\n })\n .add(\n pill.nativeElement,\n {\n scale: [0, 1],\n opacity: [0, 1],\n },\n '+=10'\n );\n }\n\n /**\n * Oculta el loader.\n * Cuando termina aplica la clase hidden al contenedor para ocultarlo.\n */\n private hideLoader(): void {\n const pill = this.pill();\n const container = this.container();\n const pillContainer = this.pillContainer();\n\n if (!container || !pill || !pillContainer) {\n return console.error('Loader could not be hidden');\n }\n createTimeline({\n delay: 400,\n duration: this.duration,\n playbackEase: 'outQuad',\n onComplete: () => container.nativeElement.classList.add('hidden'),\n })\n .add(pill.nativeElement, {\n opacity: [1, 0],\n scale: [1, 0],\n })\n .add(pillContainer.nativeElement, {\n opacity: [1, 0],\n });\n }\n\n private handleLoadSuccess(): void {\n if (this.isFirstLoad) {\n this.hideLoader();\n return;\n }\n\n setTimeout(() => this.hideLoader(), this.duration());\n }\n\n /**\n * Inicializa el componente y sus handlers.\n * Haciendo uso de waitInitialize, esperamos a que el mapa se inicialice para poder suscribirnos a los eventos de carga del mapa.\n * Excepto en la carga inicial del mapa y para evitar superponer animaciones, skipeamos la primera carga y esperamos a que el mapa se recargue\n * para futuras ocasiones y delegamos en los handlers start y success para mostrar u ocultar el loader respectivamente.\n */\n private initComponent(): void {\n const subscription = this.viewerService()\n .waitInitialize()\n .pipe(\n mergeMap(() => {\n // when initialized, we listen to both load_start and load_success\n const loadStart$ = this.viewerService()\n .getObservable('load_start')\n .pipe(\n skip(1), // skip first emission\n tap(() => this.showLoader())\n );\n\n const loadSuccess$ = this.viewerService()\n .getObservable('load_success')\n .pipe(\n tap(() => {\n if (this.isFirstLoad) {\n this.isFirstLoad = false;\n }\n }),\n tap(() => this.handleLoadSuccess())\n );\n\n // merge both into one stream\n return merge(loadStart$, loadSuccess$);\n }),\n catchError((error: unknown) => {\n console.error('viewer init error', error);\n return []; // swallow error or return EMPTY\n })\n )\n .subscribe();\n\n this.handlers.push(subscription);\n }\n\n private formatRgb(rgbString: string, wrapped = true): string {\n return wrapped ? 'rgb(' + rgbString.split(' ').join(', ') + ')' : rgbString.split(' ').join(', ');\n }\n\n /**\n * Destruye el componente y sus handlers.\n * Recorre el array de handlers y se desuscribe de cada uno de ellos.\n */\n private destroyComponent(): void {\n for (const h of this.handlers) {\n h.unsubscribe();\n }\n }\n}\n","<div #container class=\"container\" [style]=\"ripple\">\n <!-- Container -->\n <div #pillContainer class=\"pill-container\">\n <!-- PILL -->\n <div #pill class=\"pill ripple-animation\">\n <!-- LOGO -->\n <img\n [ngClass]=\"size() === 'sm' ? 'block' : 'hidden'\"\n alt=\"Club logo loader\"\n height=\"70\"\n priority\n width=\"50\"\n [ngSrc]=\"logo()\" />\n <img\n [ngClass]=\"size() === 'md' ? 'block' : 'hidden'\"\n alt=\"Club logo loader\"\n height=\"90\"\n priority\n width=\"70\"\n [ngSrc]=\"logo()\" />\n </div>\n </div>\n</div>\n","/*\n * Public API Surface of software-division-components\n */\n\nexport * from './map-loader.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MAYa,kBAAkB,CAAA;;AAEtB,IAAA,aAAa,GAAG,KAAK,CAAC,QAAQ,wDAGjC;AACG,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,+CAAU;AAC/B,IAAA,KAAK,GAAG,KAAK,CAAS,WAAW,iDAAC;AAClC,IAAA,QAAQ,GAAG,KAAK,CAAS,GAAG,oDAAC;AAC7B,IAAA,IAAI,GAAG,KAAK,CAAc,IAAI,gDAAC;;AAG/B,IAAA,IAAI,GAAG,SAAS,CAAa,MAAM,gDAAC;AACpC,IAAA,aAAa,GAAG,SAAS,CAAa,eAAe,yDAAC;AACtD,IAAA,SAAS,GAAG,SAAS,CAAa,WAAW,qDAAC;;IAG7C,WAAW,GAAG,IAAI;IAClB,OAAO,GAAG,gBAAgB;IACjB,QAAQ,GAAmB,EAAE;;AAG9C;;;;;AAKG;AACH,IAAA,IAAW,MAAM,GAAA;AACf,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,KAAK,CAAC;AAE/C,QAAA,OAAO,GAAG,IAAI,CAAC,OAAO,CAAA,CAAA,EAAI,GAAG,GAAG;IAClC;;IAGO,QAAQ,GAAA;QACb,IAAI,CAAC,aAAa,EAAE;IACtB;IAEO,WAAW,GAAA;QAChB,IAAI,CAAC,gBAAgB,EAAE;IACzB;;AAIA;;;;AAIG;IACK,UAAU,GAAA;AAChB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;AACxB,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE;AAClC,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE;QAE1C,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;AACzC,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC,4BAA4B,CAAC;QACpD;QAEA,MAAM,gBAAgB,GAAW,SAAS,CAAC,aAAa,CAAC,SAAS,CAAC,KAAK;AAExE,QAAA,IAAI,gBAAgB,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;YACvC,SAAS,CAAC,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC;QACpD;AAEA,QAAA,cAAc,CAAC;YACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;AACE,aAAA,GAAG,CAAC,aAAa,CAAC,aAAa,EAAE;AAChC,YAAA,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACf,YAAA,QAAQ,EAAE,GAAG;SACd;AACA,aAAA,GAAG,CACF,IAAI,CAAC,aAAa,EAClB;AACE,YAAA,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACb,YAAA,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;SAChB,EACD,MAAM,CACP;IACL;AAEA;;;AAGG;IACK,UAAU,GAAA;AAChB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;AACxB,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE;AAClC,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE;QAE1C,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;AACzC,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC,4BAA4B,CAAC;QACpD;AACA,QAAA,cAAc,CAAC;AACb,YAAA,KAAK,EAAE,GAAG;YACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,YAAA,YAAY,EAAE,SAAS;AACvB,YAAA,UAAU,EAAE,MAAM,SAAS,CAAC,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC;SAClE;AACE,aAAA,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE;AACvB,YAAA,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACf,YAAA,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;SACd;AACA,aAAA,GAAG,CAAC,aAAa,CAAC,aAAa,EAAE;AAChC,YAAA,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AAChB,SAAA,CAAC;IACN;IAEQ,iBAAiB,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,UAAU,EAAE;YACjB;QACF;AAEA,QAAA,UAAU,CAAC,MAAM,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;IACtD;AAEA;;;;;AAKG;IACK,aAAa,GAAA;AACnB,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa;AACpC,aAAA,cAAc;AACd,aAAA,IAAI,CACH,QAAQ,CAAC,MAAK;;AAEZ,YAAA,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa;iBAClC,aAAa,CAAC,YAAY;AAC1B,iBAAA,IAAI,CACH,IAAI,CAAC,CAAC,CAAC;YACP,GAAG,CAAC,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC,CAC7B;AAEH,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa;iBACpC,aAAa,CAAC,cAAc;AAC5B,iBAAA,IAAI,CACH,GAAG,CAAC,MAAK;AACP,gBAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,oBAAA,IAAI,CAAC,WAAW,GAAG,KAAK;gBAC1B;AACF,YAAA,CAAC,CAAC,EACF,GAAG,CAAC,MAAM,IAAI,CAAC,iBAAiB,EAAE,CAAC,CACpC;;AAGH,YAAA,OAAO,KAAK,CAAC,UAAU,EAAE,YAAY,CAAC;AACxC,QAAA,CAAC,CAAC,EACF,UAAU,CAAC,CAAC,KAAc,KAAI;AAC5B,YAAA,OAAO,CAAC,KAAK,CAAC,mBAAmB,EAAE,KAAK,CAAC;YACzC,OAAO,EAAE,CAAC;AACZ,QAAA,CAAC,CAAC;AAEH,aAAA,SAAS,EAAE;AAEd,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC;IAClC;AAEQ,IAAA,SAAS,CAAC,SAAiB,EAAE,OAAO,GAAG,IAAI,EAAA;AACjD,QAAA,OAAO,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACnG;AAEA;;;AAGG;IACK,gBAAgB,GAAA;AACtB,QAAA,KAAK,MAAM,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE;YAC7B,CAAC,CAAC,WAAW,EAAE;QACjB;IACF;uGA7KW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,+gCCZ/B,yoBAuBA,EAAA,MAAA,EAAA,CAAA,khDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDbY,gBAAgB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,UAAA,EAAA,cAAA,EAAA,wBAAA,EAAA,MAAA,EAAA,aAAA,EAAA,mBAAA,EAAA,KAAA,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,mFAAE,YAAY,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAEtC,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAP9B,SAAS;+BACE,gBAAgB,EAAA,eAAA,EAGT,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,gBAAgB,EAAE,OAAO,EAAE,YAAY,CAAC,EAAA,QAAA,EAAA,yoBAAA,EAAA,MAAA,EAAA,CAAA,khDAAA,CAAA,EAAA;ohBAcd,MAAM,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,CACG,eAAe,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,CACnB,WAAW,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AE1BtD;;AAEG;;ACFH;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"3ddv-software-division-components-dvm-map-loader.mjs","sources":["../../dvm/map-loader/map-loader.component.ts","../../dvm/map-loader/map-loader.component.html","../../dvm/map-loader/public-api.ts","../../dvm/map-loader/3ddv-software-division-components-dvm-map-loader.ts"],"sourcesContent":["import { CommonModule, NgClass, NgOptimizedImage } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n effect,\n ElementRef,\n input,\n OnDestroy,\n OnInit,\n viewChild,\n} from '@angular/core';\nimport { createTimeline } from 'animejs';\nimport { catchError, merge, mergeMap, Observable, skip, Subscription, tap } from 'rxjs';\n\n@Component({\n selector: 'sdc-map-loader',\n templateUrl: './map-loader.component.html',\n styleUrl: './map-loader.component.css',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [NgOptimizedImage, NgClass, CommonModule],\n})\nexport class MapLoaderComponent implements OnInit, OnDestroy {\n // INPUTS\n public viewerService = input<{\n waitInitialize: () => Observable<any>;\n getObservable: (value: 'load_success' | 'load_start') => Observable<any>;\n }>();\n\n public logo = input.required<string>();\n public color = input<string>('255 165 0');\n public duration = input<number>(500);\n public size = input<'sm' | 'md'>('md');\n public isLoading = input<boolean | null>(null);\n\n // SIGNALS\n public pill = viewChild<ElementRef>('pill');\n public pillContainer = viewChild<ElementRef>('pillContainer');\n public container = viewChild<ElementRef>('container');\n\n // CLASS PROPERTIES\n private isFirstLoad = true;\n private varName = '--ripple-color';\n private readonly handlers: Subscription[] = [];\n\n private _isLoading = effect(() => {\n // If we use the service instead of the external loading state, do not execute\n if (this.isLoading() == null) {\n return;\n }\n // Here we start with the loader hidden by default\n this.container()!.nativeElement.classList.add('hidden');\n\n if (this.isLoading() === true) {\n this.showLoader();\n } else if (this.isLoading() === false) {\n this.hideLoader();\n }\n });\n\n // GETTERS\n /**\n * Retorna la variable CSS para el color del ripple.\n * Necesitamos setear la variable css --ripple-color con el color accent de la configuración.\n * Como este valor originalmente viene sin comas para ser usado en Tailwind, debemos reemplazar los espacios por comas.\n * Finalmente retornamos el valor y lo implementamos en el div contenedor del ripple para ser usado por el scss.\n */\n public get ripple(): string {\n const rgb = this.formatRgb(this.color(), false);\n\n return `${this.varName}:${rgb};`;\n }\n\n // LC METHODS\n public ngOnInit(): void {\n this.initComponent();\n }\n\n public ngOnDestroy(): void {\n this.destroyComponent();\n }\n\n // CLASS METHODS\n\n /**\n * Muestra el loader.\n * Mediante una animación de animejs, mostramos el loader.\n * Al comenzar, verificará si el contenedor tiene la clase hidden y la removerá si es así.\n */\n private showLoader(): void {\n const pill = this.pill();\n const container = this.container();\n const pillContainer = this.pillContainer();\n\n if (!container || !pill || !pillContainer) {\n return console.error('Loader could not be loaded');\n }\n\n const containerClasses: string = container.nativeElement.classList.value;\n\n if (containerClasses.includes('hidden')) {\n container.nativeElement.classList.remove('hidden');\n }\n\n createTimeline({\n duration: this.duration,\n })\n .add(pillContainer.nativeElement, {\n opacity: [0, 1],\n duration: 100,\n })\n .add(\n pill.nativeElement,\n {\n scale: [0, 1],\n opacity: [0, 1],\n },\n '+=10'\n );\n }\n\n /**\n * Oculta el loader.\n * Cuando termina aplica la clase hidden al contenedor para ocultarlo.\n */\n private hideLoader(): void {\n const pill = this.pill();\n const container = this.container();\n const pillContainer = this.pillContainer();\n\n if (!container || !pill || !pillContainer) {\n return console.error('Loader could not be hidden');\n }\n createTimeline({\n delay: 400,\n duration: this.duration,\n playbackEase: 'outQuad',\n onComplete: () => container.nativeElement.classList.add('hidden'),\n })\n .add(pill.nativeElement, {\n opacity: [1, 0],\n scale: [1, 0],\n })\n .add(pillContainer.nativeElement, {\n opacity: [1, 0],\n });\n }\n\n private handleLoadSuccess(): void {\n if (this.isFirstLoad) {\n this.hideLoader();\n return;\n }\n\n setTimeout(() => this.hideLoader(), this.duration());\n }\n\n /**\n * Inicializa el componente y sus handlers.\n * Haciendo uso de waitInitialize, esperamos a que el mapa se inicialice para poder suscribirnos a los eventos de carga del mapa.\n * Excepto en la carga inicial del mapa y para evitar superponer animaciones, skipeamos la primera carga y esperamos a que el mapa se recargue\n * para futuras ocasiones y delegamos en los handlers start y success para mostrar u ocultar el loader respectivamente.\n */\n private initComponent(): void {\n if (this.isLoading() !== null) {\n return;\n }\n\n if (typeof this.viewerService() !== 'undefined') {\n const subscription = this.viewerService()!\n .waitInitialize()\n .pipe(\n mergeMap(() => {\n // when initialized, we listen to both load_start and load_success\n const loadStart$ = this.viewerService()!\n .getObservable('load_start')\n .pipe(\n skip(1), // skip first emission\n tap(() => this.showLoader())\n );\n\n const loadSuccess$ = this.viewerService()!\n .getObservable('load_success')\n .pipe(\n tap(() => {\n if (this.isFirstLoad) {\n this.isFirstLoad = false;\n }\n }),\n tap(() => this.handleLoadSuccess())\n );\n\n // merge both into one stream\n return merge(loadStart$, loadSuccess$);\n }),\n catchError((error: unknown) => {\n console.error('viewer init error', error);\n return []; // swallow error or return EMPTY\n })\n )\n .subscribe();\n this.handlers.push(subscription);\n }\n }\n\n private formatRgb(rgbString: string, wrapped = true): string {\n return wrapped ? 'rgb(' + rgbString.split(' ').join(', ') + ')' : rgbString.split(' ').join(', ');\n }\n\n /**\n * Destruye el componente y sus handlers.\n * Recorre el array de handlers y se desuscribe de cada uno de ellos.\n */\n private destroyComponent(): void {\n for (const h of this.handlers) {\n h.unsubscribe();\n }\n }\n}\n","<div #container class=\"container\" [style]=\"ripple\">\n <!-- Container -->\n <div #pillContainer class=\"pill-container\">\n <!-- PILL -->\n <div #pill class=\"pill ripple-animation\">\n <!-- LOGO -->\n <img\n [ngClass]=\"size() === 'sm' ? 'block' : 'hidden'\"\n alt=\"Club logo loader\"\n height=\"70\"\n priority\n width=\"50\"\n [ngSrc]=\"logo()\" />\n <img\n [ngClass]=\"size() === 'md' ? 'block' : 'hidden'\"\n alt=\"Club logo loader\"\n height=\"90\"\n priority\n width=\"70\"\n [ngSrc]=\"logo()\" />\n </div>\n </div>\n</div>\n","/*\n * Public API Surface of software-division-components\n */\n\nexport * from './map-loader.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -8,7 +8,7 @@ class NeighborsComponent {
|
|
|
8
8
|
currentSection3d;
|
|
9
9
|
leftSectionElement;
|
|
10
10
|
rightSectionElement;
|
|
11
|
-
// SERVICES
|
|
11
|
+
// SERVICES changes
|
|
12
12
|
cdr = inject(ChangeDetectorRef);
|
|
13
13
|
// REQUIRED INPUTS
|
|
14
14
|
neighborsData = input.required(...(ngDevMode ? [{ debugName: "neighborsData" }] : []));
|
|
@@ -172,11 +172,11 @@ class NeighborsComponent {
|
|
|
172
172
|
this.sectionChange.emit({ direction, sectionId: section });
|
|
173
173
|
}
|
|
174
174
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NeighborsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
175
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: NeighborsComponent, isStandalone: true, selector: "sdc-neighbors", inputs: { neighborsData: { classPropertyName: "neighborsData", publicName: "neighborsData", isSignal: true, isRequired: true, transformFunction: null }, currentSectionId: { classPropertyName: "currentSectionId", publicName: "currentSectionId", isSignal: true, isRequired: true, transformFunction: null }, translateTdcToMmc: { classPropertyName: "translateTdcToMmc", publicName: "translateTdcToMmc", isSignal: true, isRequired: true, transformFunction: null }, translateMmcToTdc: { classPropertyName: "translateMmcToTdc", publicName: "translateMmcToTdc", isSignal: true, isRequired: true, transformFunction: null }, hasAvailability: { classPropertyName: "hasAvailability", publicName: "hasAvailability", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, showElement: { classPropertyName: "showElement", publicName: "showElement", isSignal: true, isRequired: false, transformFunction: null }, modeLr: { classPropertyName: "modeLr", publicName: "modeLr", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sectionChange: "sectionChange" }, viewQueries: [{ propertyName: "neighborsContainer", first: true, predicate: ["neighborsContainer"], descendants: true }, { propertyName: "currentSection", first: true, predicate: ["currentSection"], descendants: true }, { propertyName: "currentSection3d", first: true, predicate: ["currentSection3d"], descendants: true }, { propertyName: "leftSectionElement", first: true, predicate: ["leftSectionNumber"], descendants: true }, { propertyName: "rightSectionElement", first: true, predicate: ["rightSectionNumber"], descendants: true }], ngImport: i0, 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 <
|
|
175
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: NeighborsComponent, isStandalone: true, selector: "sdc-neighbors", inputs: { neighborsData: { classPropertyName: "neighborsData", publicName: "neighborsData", isSignal: true, isRequired: true, transformFunction: null }, currentSectionId: { classPropertyName: "currentSectionId", publicName: "currentSectionId", isSignal: true, isRequired: true, transformFunction: null }, translateTdcToMmc: { classPropertyName: "translateTdcToMmc", publicName: "translateTdcToMmc", isSignal: true, isRequired: true, transformFunction: null }, translateMmcToTdc: { classPropertyName: "translateMmcToTdc", publicName: "translateMmcToTdc", isSignal: true, isRequired: true, transformFunction: null }, hasAvailability: { classPropertyName: "hasAvailability", publicName: "hasAvailability", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, showElement: { classPropertyName: "showElement", publicName: "showElement", isSignal: true, isRequired: false, transformFunction: null }, modeLr: { classPropertyName: "modeLr", publicName: "modeLr", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sectionChange: "sectionChange" }, viewQueries: [{ propertyName: "neighborsContainer", first: true, predicate: ["neighborsContainer"], descendants: true }, { propertyName: "currentSection", first: true, predicate: ["currentSection"], descendants: true }, { propertyName: "currentSection3d", first: true, predicate: ["currentSection3d"], descendants: true }, { propertyName: "leftSectionElement", first: true, predicate: ["leftSectionNumber"], descendants: true }, { propertyName: "rightSectionElement", first: true, predicate: ["rightSectionNumber"], descendants: true }], ngImport: i0, 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 [class.is-none]=\"leftSection === 'none'\"\n tabindex=\"0\"\n (click)=\"navigateToSection(leftSection!)\"\n (keypress.enter)=\"navigateToSection(leftSection!)\">\n <!-- ARROW ICON -->\n <div class=\"neighbor-button-icon\">\n <i>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"3\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5 8.25 12l7.5-7.5\" />\n </svg>\n </i>\n </div>\n\n <!-- SECTION LABEL -->\n <div class=\"neighbor-button-label\">\n <p>\n <span class=\"prefix\"> {{ modeLr() ? 'Left Section' : 'Section' }} </span>\n @if (leftSection !== 'none' && !modeLr()) {\n <span #leftSectionNumber class=\"section-number\">\n {{ leftSectionLabel() }}\n </span>\n }\n </p>\n </div>\n </div>\n }\n\n <!-- CURRENT SECTION TEXT -->\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 [class.is-none]=\"rightSection === 'none'\"\n tabindex=\"1\"\n (click)=\"navigateToSection(rightSection!)\"\n (keypress.enter)=\"navigateToSection(rightSection!)\">\n <!-- ARROW ICON -->\n <div class=\"neighbor-button-icon\">\n <i>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"3\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m8.25 4.5 7.5 7.5-7.5 7.5\" />\n </svg>\n </i>\n </div>\n\n <!-- SECTION LABEL -->\n <div class=\"neighbor-button-label\">\n <p>\n <span class=\"prefix\"> {{ modeLr() ? 'Right Section' : 'Section' }} </span>\n @if (rightSection !== 'none' && !modeLr()) {\n <span #rightSectionNumber class=\"section-number\">\n {{ rightSectionLabel() }}\n </span>\n }\n </p>\n </div>\n </div>\n }\n</div>\n", styles: [".sdc-neighbors{--sdc-neighbors-background-color: rgba(0, 0, 0, .85);--sdc-neighbors-text-color: #ffffff;--sdc-neighbors-border-radius: 9999px;--sdc-neighbors-padding-x: .75rem;--sdc-neighbors-padding-y: .625rem;--sdc-neighbors-height: 2rem;--sdc-neighbors-max-width: 10rem;--sdc-neighbors-button-width: 75px;--sdc-neighbors-button-height: 2rem;--sdc-neighbors-button-offset: -31%;--sdc-neighbors-button-icon-color: #ffffff;--sdc-neighbors-button-hover-background-color: rgba(0, 0, 0, .85);--sdc-neighbors-button-text-font-weight: 600;--sdc-neighbors-button-text-font-size: .625rem;--sdc-neighbors-button-text-transform: uppercase;--sdc-neighbors-prefix-opacity: .7;--sdc-neighbors-current-section-loading-font-weight: 600;--sdc-neighbors-current-section-loading-font-size: .75rem;--sdc-neighbors-current-section-text-font-weight: 600;--sdc-neighbors-current-section-text-font-size: .625rem;--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);max-width:var(--sdc-neighbors-max-width);pointer-events:auto}.neighbor-button{position:absolute;width:var(--sdc-neighbors-button-width);height:var(--sdc-neighbors-button-height);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:opacity .15s cubic-bezier(.4,0,.2,1)}.neighbor-button-left{left:var(--sdc-neighbors-button-offset);flex-direction:row-reverse}.neighbor-button-right{right:var(--sdc-neighbors-button-offset);flex-direction:row}.neighbor-button.is-none{opacity:0;pointer-events:none}.neighbor-button-icon{display:flex;align-items:center;height:100%;transition:background-color .15s cubic-bezier(.4,0,.2,1)}.neighbor-button:hover .neighbor-button-icon{background-color:var(--sdc-neighbors-button-hover-background-color)}.neighbor-button-icon i{display:block;color:var(--sdc-neighbors-button-icon-color);margin-top:auto;margin-bottom:auto}.neighbor-button-icon svg{width:.875rem;height:.875rem}.neighbor-button-label{opacity:0;transition:opacity .15s cubic-bezier(.4,0,.2,1);display:flex;flex-grow:1;height:100%;align-items:center;background-color:var(--sdc-neighbors-button-hover-background-color)}.neighbor-button:hover .neighbor-button-label{opacity:1}.neighbor-button-left .neighbor-button-label{padding-left:1.25rem;padding-right:.5rem;border-top-left-radius:9999px;border-bottom-left-radius:9999px}.neighbor-button-right .neighbor-button-label{padding-left:.5rem;padding-right:1.25rem;border-top-right-radius:9999px;border-bottom-right-radius:9999px}.neighbor-button-label p{color:var(--sdc-neighbors-text-color);font-size:var(--sdc-neighbors-button-text-font-size);font-weight:var(--sdc-neighbors-button-text-font-weight);text-transform:var(--sdc-neighbors-button-text-transform)}.neighbor-button-label .prefix{opacity:var(--sdc-neighbors-prefix-opacity);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(var(--sdc-neighbors-button-width) - 1.875rem)}.neighbor-button-label .section-number{white-space:nowrap}.current-section-wrapper{display:block;margin-left:auto;margin-right:auto;cursor:default;min-width:0;overflow:hidden}.current-section-loading{font-weight:var(--sdc-neighbors-current-section-loading-font-weight);font-size:var(--sdc-neighbors-current-section-loading-font-size);color:var(--sdc-neighbors-text-color)}.current-section-text{display:flex;font-weight:var(--sdc-neighbors-current-section-text-font-weight);font-size:var(--sdc-neighbors-current-section-text-font-size);color:var(--sdc-neighbors-text-color);text-transform:var(--sdc-neighbors-current-section-text-transform);overflow:hidden;min-width:0}.current-section-text .prefix{opacity:var(--sdc-neighbors-prefix-opacity);flex-shrink:0;white-space:nowrap}.current-section-text .section-number{display:inline-block;max-width:3rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:640px){.current-section-text .prefix,.neighbor-button-label .prefix{display:none}.neighbors-container{max-width:7.5rem}.current-section-text .section-number{max-width:2.5rem}.neighbor-button{width:60px}}@media(max-width:420px){.neighbors-container{max-width:6rem}.current-section-text .section-number{max-width:2rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
176
176
|
}
|
|
177
177
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NeighborsComponent, decorators: [{
|
|
178
178
|
type: Component,
|
|
179
|
-
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 <
|
|
179
|
+
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 [class.is-none]=\"leftSection === 'none'\"\n tabindex=\"0\"\n (click)=\"navigateToSection(leftSection!)\"\n (keypress.enter)=\"navigateToSection(leftSection!)\">\n <!-- ARROW ICON -->\n <div class=\"neighbor-button-icon\">\n <i>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"3\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5 8.25 12l7.5-7.5\" />\n </svg>\n </i>\n </div>\n\n <!-- SECTION LABEL -->\n <div class=\"neighbor-button-label\">\n <p>\n <span class=\"prefix\"> {{ modeLr() ? 'Left Section' : 'Section' }} </span>\n @if (leftSection !== 'none' && !modeLr()) {\n <span #leftSectionNumber class=\"section-number\">\n {{ leftSectionLabel() }}\n </span>\n }\n </p>\n </div>\n </div>\n }\n\n <!-- CURRENT SECTION TEXT -->\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 [class.is-none]=\"rightSection === 'none'\"\n tabindex=\"1\"\n (click)=\"navigateToSection(rightSection!)\"\n (keypress.enter)=\"navigateToSection(rightSection!)\">\n <!-- ARROW ICON -->\n <div class=\"neighbor-button-icon\">\n <i>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"3\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m8.25 4.5 7.5 7.5-7.5 7.5\" />\n </svg>\n </i>\n </div>\n\n <!-- SECTION LABEL -->\n <div class=\"neighbor-button-label\">\n <p>\n <span class=\"prefix\"> {{ modeLr() ? 'Right Section' : 'Section' }} </span>\n @if (rightSection !== 'none' && !modeLr()) {\n <span #rightSectionNumber class=\"section-number\">\n {{ rightSectionLabel() }}\n </span>\n }\n </p>\n </div>\n </div>\n }\n</div>\n", styles: [".sdc-neighbors{--sdc-neighbors-background-color: rgba(0, 0, 0, .85);--sdc-neighbors-text-color: #ffffff;--sdc-neighbors-border-radius: 9999px;--sdc-neighbors-padding-x: .75rem;--sdc-neighbors-padding-y: .625rem;--sdc-neighbors-height: 2rem;--sdc-neighbors-max-width: 10rem;--sdc-neighbors-button-width: 75px;--sdc-neighbors-button-height: 2rem;--sdc-neighbors-button-offset: -31%;--sdc-neighbors-button-icon-color: #ffffff;--sdc-neighbors-button-hover-background-color: rgba(0, 0, 0, .85);--sdc-neighbors-button-text-font-weight: 600;--sdc-neighbors-button-text-font-size: .625rem;--sdc-neighbors-button-text-transform: uppercase;--sdc-neighbors-prefix-opacity: .7;--sdc-neighbors-current-section-loading-font-weight: 600;--sdc-neighbors-current-section-loading-font-size: .75rem;--sdc-neighbors-current-section-text-font-weight: 600;--sdc-neighbors-current-section-text-font-size: .625rem;--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);max-width:var(--sdc-neighbors-max-width);pointer-events:auto}.neighbor-button{position:absolute;width:var(--sdc-neighbors-button-width);height:var(--sdc-neighbors-button-height);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:opacity .15s cubic-bezier(.4,0,.2,1)}.neighbor-button-left{left:var(--sdc-neighbors-button-offset);flex-direction:row-reverse}.neighbor-button-right{right:var(--sdc-neighbors-button-offset);flex-direction:row}.neighbor-button.is-none{opacity:0;pointer-events:none}.neighbor-button-icon{display:flex;align-items:center;height:100%;transition:background-color .15s cubic-bezier(.4,0,.2,1)}.neighbor-button:hover .neighbor-button-icon{background-color:var(--sdc-neighbors-button-hover-background-color)}.neighbor-button-icon i{display:block;color:var(--sdc-neighbors-button-icon-color);margin-top:auto;margin-bottom:auto}.neighbor-button-icon svg{width:.875rem;height:.875rem}.neighbor-button-label{opacity:0;transition:opacity .15s cubic-bezier(.4,0,.2,1);display:flex;flex-grow:1;height:100%;align-items:center;background-color:var(--sdc-neighbors-button-hover-background-color)}.neighbor-button:hover .neighbor-button-label{opacity:1}.neighbor-button-left .neighbor-button-label{padding-left:1.25rem;padding-right:.5rem;border-top-left-radius:9999px;border-bottom-left-radius:9999px}.neighbor-button-right .neighbor-button-label{padding-left:.5rem;padding-right:1.25rem;border-top-right-radius:9999px;border-bottom-right-radius:9999px}.neighbor-button-label p{color:var(--sdc-neighbors-text-color);font-size:var(--sdc-neighbors-button-text-font-size);font-weight:var(--sdc-neighbors-button-text-font-weight);text-transform:var(--sdc-neighbors-button-text-transform)}.neighbor-button-label .prefix{opacity:var(--sdc-neighbors-prefix-opacity);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(var(--sdc-neighbors-button-width) - 1.875rem)}.neighbor-button-label .section-number{white-space:nowrap}.current-section-wrapper{display:block;margin-left:auto;margin-right:auto;cursor:default;min-width:0;overflow:hidden}.current-section-loading{font-weight:var(--sdc-neighbors-current-section-loading-font-weight);font-size:var(--sdc-neighbors-current-section-loading-font-size);color:var(--sdc-neighbors-text-color)}.current-section-text{display:flex;font-weight:var(--sdc-neighbors-current-section-text-font-weight);font-size:var(--sdc-neighbors-current-section-text-font-size);color:var(--sdc-neighbors-text-color);text-transform:var(--sdc-neighbors-current-section-text-transform);overflow:hidden;min-width:0}.current-section-text .prefix{opacity:var(--sdc-neighbors-prefix-opacity);flex-shrink:0;white-space:nowrap}.current-section-text .section-number{display:inline-block;max-width:3rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:640px){.current-section-text .prefix,.neighbor-button-label .prefix{display:none}.neighbors-container{max-width:7.5rem}.current-section-text .section-number{max-width:2.5rem}.neighbor-button{width:60px}}@media(max-width:420px){.neighbors-container{max-width:6rem}.current-section-text .section-number{max-width:2rem}}\n"] }]
|
|
180
180
|
}], propDecorators: { neighborsContainer: [{
|
|
181
181
|
type: ViewChild,
|
|
182
182
|
args: ['neighborsContainer']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"3ddv-software-division-components-dvm-neighbors.mjs","sources":["../../dvm/neighbors/neighbors.component.ts","../../dvm/neighbors/neighbors.component.html","../../dvm/neighbors/3ddv-software-division-components-dvm-neighbors.ts"],"sourcesContent":["import { ThemeClass } from '@3ddv/software-division-components/shared';\r\nimport {\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n Component,\r\n computed,\r\n ElementRef,\r\n EventEmitter,\r\n inject,\r\n input,\r\n OnDestroy,\r\n Output,\r\n ViewChild,\r\n} from '@angular/core';\r\nimport { Subscription } from 'rxjs';\r\nimport { Direction, HasAvailabilityFn, NeighborsData, SectionChangeEvent, TranslateSectionIdFn } from './types';\r\n\r\n@Component({\r\n selector: 'sdc-neighbors',\r\n standalone: true,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n templateUrl: './neighbors.component.html',\r\n styleUrl: './neighbors.component.css',\r\n})\r\nexport class NeighborsComponent implements OnDestroy {\r\n // VIEWCHILD\r\n @ViewChild('neighborsContainer')\r\n public readonly neighborsContainer!: ElementRef<HTMLDivElement>;\r\n\r\n @ViewChild('currentSection', { static: false })\r\n public readonly currentSection!: ElementRef<HTMLSpanElement>;\r\n\r\n @ViewChild('currentSection3d', { static: false })\r\n public readonly currentSection3d!: ElementRef<HTMLSpanElement>;\r\n\r\n @ViewChild('leftSectionNumber', { static: false })\r\n public readonly leftSectionElement!: ElementRef<HTMLSpanElement>;\r\n\r\n @ViewChild('rightSectionNumber', { static: false })\r\n public readonly rightSectionElement!: ElementRef<HTMLSpanElement>;\r\n\r\n // SERVICES\r\n private readonly cdr: ChangeDetectorRef = inject(ChangeDetectorRef);\r\n\r\n // REQUIRED INPUTS\r\n public readonly neighborsData = input.required<NeighborsData>();\r\n public readonly currentSectionId = input.required<string | null>();\r\n public readonly translateTdcToMmc = input.required<TranslateSectionIdFn>();\r\n public readonly translateMmcToTdc = input.required<TranslateSectionIdFn>();\r\n public readonly hasAvailability = input.required<HasAvailabilityFn>();\r\n\r\n // OPTIONAL INPUTS\r\n public readonly isLoading = input<boolean>(false);\r\n public readonly showElement = input<boolean>(true);\r\n public readonly modeLr = input<boolean>(false);\r\n public readonly className = input<string>('');\r\n public readonly theme = input<ThemeClass>('theme-sdc');\r\n\r\n // OUTPUTS\r\n @Output() sectionChange = new EventEmitter<SectionChangeEvent>();\r\n\r\n /**\r\n * Computed class string that combines theme and user classes.\r\n */\r\n protected readonly computedClass = computed(() => {\r\n const themeClass = this.theme();\r\n const className = this.className();\r\n return Array.from(new Set(['sdc-neighbors', themeClass, className]))\r\n .filter(Boolean)\r\n .join(' ');\r\n });\r\n\r\n // COMPONENT STATE\r\n private readonly subscriptions: Subscription[] = [];\r\n\r\n // COMPUTED STATE\r\n protected readonly leftSectionId = computed(() => {\r\n try {\r\n const currentId = this.currentSectionId();\r\n if (!currentId) return null;\r\n return this.findAvailableNeighbor('prev', currentId);\r\n } catch (error) {\r\n return null;\r\n }\r\n });\r\n\r\n protected readonly rightSectionId = computed(() => {\r\n try {\r\n const currentId = this.currentSectionId();\r\n if (!currentId) return null;\r\n return this.findAvailableNeighbor('next', currentId);\r\n } catch (error) {\r\n return null;\r\n }\r\n });\r\n\r\n protected readonly currentSectionLabel = computed(() => {\r\n try {\r\n const currentId = this.currentSectionId();\r\n if (!currentId) return 'Loading';\r\n\r\n // Translate TDC ID to MMC ID for display\r\n const mmcId = this.translateTdcToMmc()(currentId);\r\n if (!mmcId) return currentId; // Fallback to TDC ID if translation fails\r\n\r\n // Extract section number from MMC ID (assuming format like \"S_31\" or similar)\r\n return mmcId.replace(/^S_/, '');\r\n } catch (error) {\r\n return 'Loading';\r\n }\r\n });\r\n\r\n protected readonly leftSectionLabel = computed(() => {\r\n try {\r\n const leftId = this.leftSectionId();\r\n if (!leftId) return null;\r\n\r\n // Translate TDC ID to MMC ID for display\r\n const mmcId = this.translateTdcToMmc()(leftId);\r\n if (!mmcId) return leftId; // Fallback to TDC ID if translation fails\r\n\r\n // Extract section number from MMC ID\r\n return mmcId.replace(/^S_/, '');\r\n } catch (error) {\r\n return null;\r\n }\r\n });\r\n\r\n protected readonly rightSectionLabel = computed(() => {\r\n try {\r\n const rightId = this.rightSectionId();\r\n if (!rightId) return null;\r\n\r\n // Translate TDC ID to MMC ID for display\r\n const mmcId = this.translateTdcToMmc()(rightId);\r\n if (!mmcId) return rightId; // Fallback to TDC ID if translation fails\r\n\r\n // Extract section number from MMC ID\r\n return mmcId.replace(/^S_/, '');\r\n } catch (error) {\r\n return null;\r\n }\r\n });\r\n\r\n // NEIGHBOR RESOLUTION ALGORITHM\r\n private findAvailableNeighbor(type: Direction, currentSectionTdcId: string): string | null {\r\n try {\r\n const neighborKey = type === 'prev' ? 'l' : 'r';\r\n const noNeighborValue = 'none';\r\n\r\n // 1. Translate TDC → MMC\r\n const currentSectionMmcId = this.translateTdcToMmc()(currentSectionTdcId);\r\n if (!currentSectionMmcId) return null;\r\n\r\n // 2. Look up neighbor in data\r\n const neighbors = this.neighborsData();\r\n const neighbor = neighbors[currentSectionMmcId];\r\n const neighborSectionMmcId = neighbor ? neighbor[neighborKey] : noNeighborValue;\r\n\r\n // 3. Handle 'none' boundary\r\n if (neighborSectionMmcId === noNeighborValue) {\r\n return null;\r\n }\r\n\r\n // 4. Translate MMC → TDC\r\n const neighborSectionTdcId = this.translateMmcToTdc()(neighborSectionMmcId);\r\n if (!neighborSectionTdcId) return null;\r\n\r\n // 5. Check availability\r\n if (this.hasAvailability()(neighborSectionTdcId)) {\r\n return neighborSectionTdcId;\r\n }\r\n\r\n // 6. Recursively find next available (skip unavailable sections)\r\n return this.findAvailableNeighbor(type, neighborSectionTdcId);\r\n } catch (error) {\r\n return null;\r\n }\r\n }\r\n\r\n // GETTERS\r\n public get leftSection(): string | null {\r\n return this.leftSectionId();\r\n }\r\n\r\n public get rightSection(): string | null {\r\n return this.rightSectionId();\r\n }\r\n\r\n public get section(): string | null {\r\n return this.currentSectionLabel();\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.subscriptions.forEach((sub: Subscription): void => sub.unsubscribe());\r\n }\r\n\r\n // METHODS\r\n public navigateToSection(section: string): void {\r\n if (section === 'none' || !section) {\r\n return;\r\n }\r\n\r\n const leftId = this.leftSectionId();\r\n const rightId = this.rightSectionId();\r\n\r\n let direction: Direction;\r\n if (section === leftId) {\r\n direction = 'prev';\r\n } else if (section === rightId) {\r\n direction = 'next';\r\n } else {\r\n return;\r\n }\r\n\r\n this.sectionChange.emit({ direction, sectionId: section });\r\n }\r\n}\r\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"3ddv-software-division-components-dvm-neighbors.mjs","sources":["../../dvm/neighbors/neighbors.component.ts","../../dvm/neighbors/neighbors.component.html","../../dvm/neighbors/3ddv-software-division-components-dvm-neighbors.ts"],"sourcesContent":["import { ThemeClass } from '@3ddv/software-division-components/shared';\r\nimport {\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n Component,\r\n computed,\r\n ElementRef,\r\n EventEmitter,\r\n inject,\r\n input,\r\n OnDestroy,\r\n Output,\r\n ViewChild,\r\n} from '@angular/core';\r\nimport { Subscription } from 'rxjs';\r\nimport { Direction, HasAvailabilityFn, NeighborsData, SectionChangeEvent, TranslateSectionIdFn } from './types';\r\n\r\n@Component({\r\n selector: 'sdc-neighbors',\r\n standalone: true,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n templateUrl: './neighbors.component.html',\r\n styleUrl: './neighbors.component.css',\r\n})\r\nexport class NeighborsComponent implements OnDestroy {\r\n // VIEWCHILD\r\n @ViewChild('neighborsContainer')\r\n public readonly neighborsContainer!: ElementRef<HTMLDivElement>;\r\n\r\n @ViewChild('currentSection', { static: false })\r\n public readonly currentSection!: ElementRef<HTMLSpanElement>;\r\n\r\n @ViewChild('currentSection3d', { static: false })\r\n public readonly currentSection3d!: ElementRef<HTMLSpanElement>;\r\n\r\n @ViewChild('leftSectionNumber', { static: false })\r\n public readonly leftSectionElement!: ElementRef<HTMLSpanElement>;\r\n\r\n @ViewChild('rightSectionNumber', { static: false })\r\n public readonly rightSectionElement!: ElementRef<HTMLSpanElement>;\r\n\r\n // SERVICES changes\r\n private readonly cdr: ChangeDetectorRef = inject(ChangeDetectorRef);\r\n\r\n // REQUIRED INPUTS\r\n public readonly neighborsData = input.required<NeighborsData>();\r\n public readonly currentSectionId = input.required<string | null>();\r\n public readonly translateTdcToMmc = input.required<TranslateSectionIdFn>();\r\n public readonly translateMmcToTdc = input.required<TranslateSectionIdFn>();\r\n public readonly hasAvailability = input.required<HasAvailabilityFn>();\r\n\r\n // OPTIONAL INPUTS\r\n public readonly isLoading = input<boolean>(false);\r\n public readonly showElement = input<boolean>(true);\r\n public readonly modeLr = input<boolean>(false);\r\n public readonly className = input<string>('');\r\n public readonly theme = input<ThemeClass>('theme-sdc');\r\n\r\n // OUTPUTS\r\n @Output() sectionChange = new EventEmitter<SectionChangeEvent>();\r\n\r\n /**\r\n * Computed class string that combines theme and user classes.\r\n */\r\n protected readonly computedClass = computed(() => {\r\n const themeClass = this.theme();\r\n const className = this.className();\r\n return Array.from(new Set(['sdc-neighbors', themeClass, className]))\r\n .filter(Boolean)\r\n .join(' ');\r\n });\r\n\r\n // COMPONENT STATE\r\n private readonly subscriptions: Subscription[] = [];\r\n\r\n // COMPUTED STATE\r\n protected readonly leftSectionId = computed(() => {\r\n try {\r\n const currentId = this.currentSectionId();\r\n if (!currentId) return null;\r\n return this.findAvailableNeighbor('prev', currentId);\r\n } catch (error) {\r\n return null;\r\n }\r\n });\r\n\r\n protected readonly rightSectionId = computed(() => {\r\n try {\r\n const currentId = this.currentSectionId();\r\n if (!currentId) return null;\r\n return this.findAvailableNeighbor('next', currentId);\r\n } catch (error) {\r\n return null;\r\n }\r\n });\r\n\r\n protected readonly currentSectionLabel = computed(() => {\r\n try {\r\n const currentId = this.currentSectionId();\r\n if (!currentId) return 'Loading';\r\n\r\n // Translate TDC ID to MMC ID for display\r\n const mmcId = this.translateTdcToMmc()(currentId);\r\n if (!mmcId) return currentId; // Fallback to TDC ID if translation fails\r\n\r\n // Extract section number from MMC ID (assuming format like \"S_31\" or similar)\r\n return mmcId.replace(/^S_/, '');\r\n } catch (error) {\r\n return 'Loading';\r\n }\r\n });\r\n\r\n protected readonly leftSectionLabel = computed(() => {\r\n try {\r\n const leftId = this.leftSectionId();\r\n if (!leftId) return null;\r\n\r\n // Translate TDC ID to MMC ID for display\r\n const mmcId = this.translateTdcToMmc()(leftId);\r\n if (!mmcId) return leftId; // Fallback to TDC ID if translation fails\r\n\r\n // Extract section number from MMC ID\r\n return mmcId.replace(/^S_/, '');\r\n } catch (error) {\r\n return null;\r\n }\r\n });\r\n\r\n protected readonly rightSectionLabel = computed(() => {\r\n try {\r\n const rightId = this.rightSectionId();\r\n if (!rightId) return null;\r\n\r\n // Translate TDC ID to MMC ID for display\r\n const mmcId = this.translateTdcToMmc()(rightId);\r\n if (!mmcId) return rightId; // Fallback to TDC ID if translation fails\r\n\r\n // Extract section number from MMC ID\r\n return mmcId.replace(/^S_/, '');\r\n } catch (error) {\r\n return null;\r\n }\r\n });\r\n\r\n // NEIGHBOR RESOLUTION ALGORITHM\r\n private findAvailableNeighbor(type: Direction, currentSectionTdcId: string): string | null {\r\n try {\r\n const neighborKey = type === 'prev' ? 'l' : 'r';\r\n const noNeighborValue = 'none';\r\n\r\n // 1. Translate TDC → MMC\r\n const currentSectionMmcId = this.translateTdcToMmc()(currentSectionTdcId);\r\n if (!currentSectionMmcId) return null;\r\n\r\n // 2. Look up neighbor in data\r\n const neighbors = this.neighborsData();\r\n const neighbor = neighbors[currentSectionMmcId];\r\n const neighborSectionMmcId = neighbor ? neighbor[neighborKey] : noNeighborValue;\r\n\r\n // 3. Handle 'none' boundary\r\n if (neighborSectionMmcId === noNeighborValue) {\r\n return null;\r\n }\r\n\r\n // 4. Translate MMC → TDC\r\n const neighborSectionTdcId = this.translateMmcToTdc()(neighborSectionMmcId);\r\n if (!neighborSectionTdcId) return null;\r\n\r\n // 5. Check availability\r\n if (this.hasAvailability()(neighborSectionTdcId)) {\r\n return neighborSectionTdcId;\r\n }\r\n\r\n // 6. Recursively find next available (skip unavailable sections)\r\n return this.findAvailableNeighbor(type, neighborSectionTdcId);\r\n } catch (error) {\r\n return null;\r\n }\r\n }\r\n\r\n // GETTERS\r\n public get leftSection(): string | null {\r\n return this.leftSectionId();\r\n }\r\n\r\n public get rightSection(): string | null {\r\n return this.rightSectionId();\r\n }\r\n\r\n public get section(): string | null {\r\n return this.currentSectionLabel();\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.subscriptions.forEach((sub: Subscription): void => sub.unsubscribe());\r\n }\r\n\r\n // METHODS\r\n public navigateToSection(section: string): void {\r\n if (section === 'none' || !section) {\r\n return;\r\n }\r\n\r\n const leftId = this.leftSectionId();\r\n const rightId = this.rightSectionId();\r\n\r\n let direction: Direction;\r\n if (section === leftId) {\r\n direction = 'prev';\r\n } else if (section === rightId) {\r\n direction = 'next';\r\n } else {\r\n return;\r\n }\r\n\r\n this.sectionChange.emit({ direction, sectionId: section });\r\n }\r\n}\r\n","<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 [class.is-none]=\"leftSection === 'none'\"\n tabindex=\"0\"\n (click)=\"navigateToSection(leftSection!)\"\n (keypress.enter)=\"navigateToSection(leftSection!)\">\n <!-- ARROW ICON -->\n <div class=\"neighbor-button-icon\">\n <i>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"3\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5 8.25 12l7.5-7.5\" />\n </svg>\n </i>\n </div>\n\n <!-- SECTION LABEL -->\n <div class=\"neighbor-button-label\">\n <p>\n <span class=\"prefix\"> {{ modeLr() ? 'Left Section' : 'Section' }} </span>\n @if (leftSection !== 'none' && !modeLr()) {\n <span #leftSectionNumber class=\"section-number\">\n {{ leftSectionLabel() }}\n </span>\n }\n </p>\n </div>\n </div>\n }\n\n <!-- CURRENT SECTION TEXT -->\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 [class.is-none]=\"rightSection === 'none'\"\n tabindex=\"1\"\n (click)=\"navigateToSection(rightSection!)\"\n (keypress.enter)=\"navigateToSection(rightSection!)\">\n <!-- ARROW ICON -->\n <div class=\"neighbor-button-icon\">\n <i>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"3\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m8.25 4.5 7.5 7.5-7.5 7.5\" />\n </svg>\n </i>\n </div>\n\n <!-- SECTION LABEL -->\n <div class=\"neighbor-button-label\">\n <p>\n <span class=\"prefix\"> {{ modeLr() ? 'Right Section' : 'Section' }} </span>\n @if (rightSection !== 'none' && !modeLr()) {\n <span #rightSectionNumber class=\"section-number\">\n {{ rightSectionLabel() }}\n </span>\n }\n </p>\n </div>\n </div>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -572,6 +572,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
|
|
|
572
572
|
class SeatPopoverComponent extends BasePopoverComponent {
|
|
573
573
|
data;
|
|
574
574
|
showLoader = true;
|
|
575
|
+
load3dView = new EventEmitter();
|
|
575
576
|
thumbnailProvider = inject(THUMBNAIL_PROVIDER, { optional: true });
|
|
576
577
|
cdr = inject(ChangeDetectorRef);
|
|
577
578
|
thumbnail;
|
|
@@ -611,16 +612,21 @@ class SeatPopoverComponent extends BasePopoverComponent {
|
|
|
611
612
|
onLeave(event) {
|
|
612
613
|
this.onMouseLeave(event);
|
|
613
614
|
}
|
|
615
|
+
onLoad3dView() {
|
|
616
|
+
this.load3dView.emit();
|
|
617
|
+
}
|
|
614
618
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SeatPopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
615
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: SeatPopoverComponent, isStandalone: true, selector: "sdc-seat-popover", inputs: { data: "data", showLoader: "showLoader" }, usesInheritance: true, ngImport: i0, template: "<div
|
|
619
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: SeatPopoverComponent, isStandalone: true, selector: "sdc-seat-popover", inputs: { data: "data", showLoader: "showLoader" }, outputs: { load3dView: "load3dView" }, usesInheritance: true, ngImport: i0, template: "<div (mouseenter)=\"onEnter($event)\" (mouseleave)=\"onLeave($event)\" 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\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 {{ 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)}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
616
620
|
}
|
|
617
621
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SeatPopoverComponent, decorators: [{
|
|
618
622
|
type: Component,
|
|
619
|
-
args: [{ selector: 'sdc-seat-popover', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, CurrencyPipe], template: "<div
|
|
623
|
+
args: [{ selector: 'sdc-seat-popover', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, CurrencyPipe], template: "<div (mouseenter)=\"onEnter($event)\" (mouseleave)=\"onLeave($event)\" 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\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 {{ 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)}.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}\n"] }]
|
|
620
624
|
}], propDecorators: { data: [{
|
|
621
625
|
type: Input
|
|
622
626
|
}], showLoader: [{
|
|
623
627
|
type: Input
|
|
628
|
+
}], load3dView: [{
|
|
629
|
+
type: Output
|
|
624
630
|
}] } });
|
|
625
631
|
|
|
626
632
|
class SectionPopoverComponent extends BasePopoverComponent {
|
|
@@ -630,6 +636,7 @@ class SectionPopoverComponent extends BasePopoverComponent {
|
|
|
630
636
|
showOpenSeatMap = true;
|
|
631
637
|
excludeSeatMapSections = ['S_BLCHADA', 'S_Bleacher'];
|
|
632
638
|
isTicketFeeEnabled = false;
|
|
639
|
+
isAdaEnabled = true;
|
|
633
640
|
load3dView = new EventEmitter();
|
|
634
641
|
selectForBA = new EventEmitter();
|
|
635
642
|
openSeatMap = new EventEmitter();
|
|
@@ -638,7 +645,7 @@ class SectionPopoverComponent extends BasePopoverComponent {
|
|
|
638
645
|
thumbnail;
|
|
639
646
|
isLoadingThumbnail = true;
|
|
640
647
|
ngOnInit() {
|
|
641
|
-
super.ngOnInit(); // Initialize
|
|
648
|
+
super.ngOnInit(); // Initialize basse component timer logic
|
|
642
649
|
if (this.data.thumbnail) {
|
|
643
650
|
this.thumbnail = this.data.thumbnail;
|
|
644
651
|
this.isLoadingThumbnail = false;
|
|
@@ -691,11 +698,11 @@ class SectionPopoverComponent extends BasePopoverComponent {
|
|
|
691
698
|
this.openSeatMap.emit();
|
|
692
699
|
}
|
|
693
700
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SectionPopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
694
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: SectionPopoverComponent, isStandalone: true, selector: "sdc-section-popover", inputs: { data: "data", showLoader: "showLoader", showBestAvailable: "showBestAvailable", showOpenSeatMap: "showOpenSeatMap", excludeSeatMapSections: "excludeSeatMapSections", isTicketFeeEnabled: "isTicketFeeEnabled" }, outputs: { load3dView: "load3dView", selectForBA: "selectForBA", openSeatMap: "openSeatMap" }, usesInheritance: true, ngImport: i0, 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
|
|
701
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: SectionPopoverComponent, isStandalone: true, selector: "sdc-section-popover", inputs: { data: "data", showLoader: "showLoader", showBestAvailable: "showBestAvailable", showOpenSeatMap: "showOpenSeatMap", excludeSeatMapSections: "excludeSeatMapSections", isTicketFeeEnabled: "isTicketFeeEnabled", isAdaEnabled: "isAdaEnabled" }, outputs: { load3dView: "load3dView", selectForBA: "selectForBA", openSeatMap: "openSeatMap" }, usesInheritance: true, ngImport: i0, 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 @if (isAdaEnabled) {\n <h5 class=\"sdc-popover-label\">\n <span class=\"sdc-popover-label-text\">Available ADA Seats:</span>\n {{ data.adaQuantity }}\n </h5>\n }\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);display:flex;flex-wrap:wrap;column-gap:5px}.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"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
695
702
|
}
|
|
696
703
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SectionPopoverComponent, decorators: [{
|
|
697
704
|
type: Component,
|
|
698
|
-
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
|
|
705
|
+
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 @if (isAdaEnabled) {\n <h5 class=\"sdc-popover-label\">\n <span class=\"sdc-popover-label-text\">Available ADA Seats:</span>\n {{ data.adaQuantity }}\n </h5>\n }\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);display:flex;flex-wrap:wrap;column-gap:5px}.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"] }]
|
|
699
706
|
}], propDecorators: { data: [{
|
|
700
707
|
type: Input
|
|
701
708
|
}], showLoader: [{
|
|
@@ -708,6 +715,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
|
|
|
708
715
|
type: Input
|
|
709
716
|
}], isTicketFeeEnabled: [{
|
|
710
717
|
type: Input
|
|
718
|
+
}], isAdaEnabled: [{
|
|
719
|
+
type: Input
|
|
711
720
|
}], load3dView: [{
|
|
712
721
|
type: Output
|
|
713
722
|
}], selectForBA: [{
|
|
@@ -893,7 +902,7 @@ class PopoverComponent {
|
|
|
893
902
|
};
|
|
894
903
|
}
|
|
895
904
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
896
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: PopoverComponent, isStandalone: true, selector: "sdc-map-popover", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: false, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { load3dView: "load3dView", selectSectionForBA: "selectSectionForBA", openSeatMap: "openSeatMap" }, ngImport: i0, template: "<!-- SECTION POPOVER -->\n@if (sectionData) {\n <sdc-section-popover\n [data]=\"sectionData\"\n id=\"pano-view\"\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 id=\"pano-view\"\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SeatPopoverComponent, selector: "sdc-seat-popover", inputs: ["data", "showLoader"] }, { kind: "component", type: SectionPopoverComponent, selector: "sdc-section-popover", inputs: ["data", "showLoader", "showBestAvailable", "showOpenSeatMap", "excludeSeatMapSections", "isTicketFeeEnabled"], outputs: ["load3dView", "selectForBA", "openSeatMap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
905
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: PopoverComponent, isStandalone: true, selector: "sdc-map-popover", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: false, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { load3dView: "load3dView", selectSectionForBA: "selectSectionForBA", openSeatMap: "openSeatMap" }, ngImport: i0, template: "<!-- SECTION POPOVER -->\n@if (sectionData) {\n <sdc-section-popover\n [data]=\"sectionData\"\n id=\"pano-view\"\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 id=\"pano-view\"\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SeatPopoverComponent, selector: "sdc-seat-popover", inputs: ["data", "showLoader"], outputs: ["load3dView"] }, { kind: "component", type: SectionPopoverComponent, selector: "sdc-section-popover", inputs: ["data", "showLoader", "showBestAvailable", "showOpenSeatMap", "excludeSeatMapSections", "isTicketFeeEnabled", "isAdaEnabled"], outputs: ["load3dView", "selectForBA", "openSeatMap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
897
906
|
}
|
|
898
907
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
899
908
|
type: Component,
|