npm - @3ddv/software-division-components - Versions diffs - 2.0.14 → 2.1.0 - Mend

@3ddv/software-division-components 2.0.14 → 2.1.0

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.

Files changed (39) hide show

package/fesm2022/3ddv-software-division-components-dvm-map-loader.mjs CHANGED Viewed

@@ -1,4 +1,4 @@
-import { NgOptimizedImage, NgClass, CommonModule } from '@angular/common';
+import { NgOptimizedImage, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { input, viewChild, effect, ChangeDetectionStrategy, Component } from '@angular/core';
 import { createTimeline } from 'animejs';
@@ -26,7 +26,11 @@ class MapLoaderComponent {
             return;
         }
         // Here we start with the loader hidden by default
-        this.container().nativeElement.classList.add('hidden');
+        const el = this.container();
+        if (!el) {
+            return;
+        }
+        el.nativeElement.classList.add('hidden');
         if (this.isLoading() === true) {
             this.showLoader();
         }
@@ -46,7 +50,7 @@ class MapLoaderComponent {
         return `${this.varName}:${rgb};`;
     }
     // LC METHODS
-    ngOnInit() {
+    ngAfterViewInit() {
         this.initComponent();
     }
     ngOnDestroy() {
@@ -89,14 +93,27 @@ class MapLoaderComponent {
         const pill = this.pill();
         const container = this.container();
         const pillContainer = this.pillContainer();
+        const finishHide = () => {
+            container?.nativeElement.classList.add('hidden');
+        };
         if (!container || !pill || !pillContainer) {
+            finishHide();
             return console.error('Loader could not be hidden');
         }
+        const delayMs = 400;
+        const durationMs = this.duration();
+        const fallbackMs = delayMs + durationMs + 150;
+        const fallbackId = window.setTimeout(() => {
+            finishHide();
+        }, fallbackMs);
+        const clearFallbackAndFinish = () => {
+            window.clearTimeout(fallbackId);
+            finishHide();
+        };
         createTimeline({
-            delay: 400,
-            duration: this.duration,
-            playbackEase: 'outQuad',
-            onComplete: () => container.nativeElement.classList.add('hidden'),
+            delay: delayMs,
+            duration: durationMs,
+            onComplete: clearFallbackAndFinish,
         })
             .add(pill.nativeElement, {
             opacity: [1, 0],
@@ -162,11 +179,11 @@ class MapLoaderComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MapLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.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: do not use Tailwind hidden/block here \u2014 host apps may not emit those utilities for SDC templates -->\n      @if (size() === 'sm') {\n        <img\n          alt=\"Club logo loader\"\n          height=\"70\"\n          priority\n          width=\"50\"\n          [ngSrc]=\"logo()\" />\n      } @else {\n        <img\n          alt=\"Club logo loader\"\n          height=\"90\"\n          priority\n          width=\"70\"\n          [ngSrc]=\"logo()\" />\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box;pointer-events:none}:host:has(.container:not(.hidden)){pointer-events:auto}.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;display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:100%;width:100%;min-height:100%;max-width:100%;overflow:visible}.pill-container{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%}.pill{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:13rem;height:13rem;padding:1.25rem;border-radius:50%;background-color:#111827e6}@media(min-width:1600px){.pill{width:16rem;height:16rem}}@keyframes sdc-map-loader-logo-pulse{0%,to{opacity:.4}50%{opacity:1}}.pill img{display:block;width:auto;max-width:100%;height:8rem;animation:sdc-map-loader-logo-pulse 1.5s ease-in-out infinite;animation-delay:1s}@media(min-width:1600px){.pill img{height:11rem}}\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: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MapLoaderComponent, decorators: [{
             type: Component,
-            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"] }]
+            args: [{ selector: 'sdc-map-loader', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgOptimizedImage, 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: do not use Tailwind hidden/block here \u2014 host apps may not emit those utilities for SDC templates -->\n      @if (size() === 'sm') {\n        <img\n          alt=\"Club logo loader\"\n          height=\"70\"\n          priority\n          width=\"50\"\n          [ngSrc]=\"logo()\" />\n      } @else {\n        <img\n          alt=\"Club logo loader\"\n          height=\"90\"\n          priority\n          width=\"70\"\n          [ngSrc]=\"logo()\" />\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box;pointer-events:none}:host:has(.container:not(.hidden)){pointer-events:auto}.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;display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:100%;width:100%;min-height:100%;max-width:100%;overflow:visible}.pill-container{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%}.pill{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:13rem;height:13rem;padding:1.25rem;border-radius:50%;background-color:#111827e6}@media(min-width:1600px){.pill{width:16rem;height:16rem}}@keyframes sdc-map-loader-logo-pulse{0%,to{opacity:.4}50%{opacity:1}}.pill img{display:block;width:auto;max-width:100%;height:8rem;animation:sdc-map-loader-logo-pulse 1.5s ease-in-out infinite;animation-delay:1s}@media(min-width:1600px){.pill img{height:11rem}}\n"] }]
         }], 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 }] }] } });
 /*

package/fesm2022/3ddv-software-division-components-dvm-map-loader.mjs.map CHANGED Viewed

	@@ -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 {\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 loader\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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"}
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, NgOptimizedImage } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n effect,\n ElementRef,\n input,\n OnDestroy,\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, CommonModule],\n})\nexport class MapLoaderComponent implements AfterViewInit, 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 loader\n if (this.isLoading() == null) {\n return;\n }\n // Here we start with the loader hidden by default\n const el = this.container();\n if (!el) {\n return;\n }\n el.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 ngAfterViewInit(): 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 const finishHide = (): void => {\n container?.nativeElement.classList.add('hidden');\n };\n\n if (!container \|\| !pill \|\| !pillContainer) {\n finishHide();\n return console.error('Loader could not be hidden');\n }\n\n const delayMs = 400;\n const durationMs = this.duration();\n const fallbackMs = delayMs + durationMs + 150;\n\n const fallbackId = window.setTimeout(() => {\n finishHide();\n }, fallbackMs);\n\n const clearFallbackAndFinish = (): void => {\n window.clearTimeout(fallbackId);\n finishHide();\n };\n\n createTimeline({\n delay: delayMs,\n duration: durationMs,\n onComplete: clearFallbackAndFinish,\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: do not use Tailwind hidden/block here — host apps may not emit those utilities for SDC templates -->\n @if (size() === 'sm') {\n <img\n alt=\"Club logo loader\"\n height=\"70\"\n priority\n width=\"50\"\n [ngSrc]=\"logo()\" />\n } @else {\n <img\n alt=\"Club logo loader\"\n height=\"90\"\n priority\n width=\"70\"\n [ngSrc]=\"logo()\" />\n }\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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"}

package/fesm2022/3ddv-software-division-components-dvm-neighbors.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, input, EventEmitter, computed, Output, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, EventEmitter, computed, signal, Output, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
 class NeighborsComponent {
     // VIEWCHILD
@@ -8,13 +8,10 @@ class NeighborsComponent {
     currentSection3d;
     leftSectionElement;
     rightSectionElement;
-    // SERVICES changes
-    cdr = inject(ChangeDetectorRef);
     // REQUIRED INPUTS
-    neighborsData = input.required(...(ngDevMode ? [{ debugName: "neighborsData" }] : []));
+    translate = input((id) => id, ...(ngDevMode ? [{ debugName: "translate" }] : []));
+    dvmService = input.required(...(ngDevMode ? [{ debugName: "dvmService" }] : []));
     currentSectionId = input.required(...(ngDevMode ? [{ debugName: "currentSectionId" }] : []));
-    translateTdcToMmc = input.required(...(ngDevMode ? [{ debugName: "translateTdcToMmc" }] : []));
-    translateMmcToTdc = input.required(...(ngDevMode ? [{ debugName: "translateMmcToTdc" }] : []));
     hasAvailability = input.required(...(ngDevMode ? [{ debugName: "hasAvailability" }] : []));
     // OPTIONAL INPUTS
     isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
@@ -36,6 +33,8 @@ class NeighborsComponent {
     }, ...(ngDevMode ? [{ debugName: "computedClass" }] : []));
     // COMPONENT STATE
     subscriptions = [];
+    relatedMaps = signal({}, ...(ngDevMode ? [{ debugName: "relatedMaps" }] : []));
+    fetchingIds = new Set();
     // COMPUTED STATE
     leftSectionId = computed(() => {
         try {
@@ -64,12 +63,7 @@ class NeighborsComponent {
             const currentId = this.currentSectionId();
             if (!currentId)
                 return 'Loading';
-            // Translate TDC ID to MMC ID for display
-            const mmcId = this.translateTdcToMmc()(currentId);
-            if (!mmcId)
-                return currentId; // Fallback to TDC ID if translation fails
-            // Extract section number from MMC ID (assuming format like "S_31" or similar)
-            return mmcId.replace(/^S_/, '');
+            return this.translate()(currentId) || currentId;
         }
         catch (error) {
             return 'Loading';
@@ -80,12 +74,7 @@ class NeighborsComponent {
             const leftId = this.leftSectionId();
             if (!leftId)
                 return null;
-            // Translate TDC ID to MMC ID for display
-            const mmcId = this.translateTdcToMmc()(leftId);
-            if (!mmcId)
-                return leftId; // Fallback to TDC ID if translation fails
-            // Extract section number from MMC ID
-            return mmcId.replace(/^S_/, '');
+            return this.translate()(leftId) || leftId;
         }
         catch (error) {
             return null;
@@ -96,12 +85,7 @@ class NeighborsComponent {
             const rightId = this.rightSectionId();
             if (!rightId)
                 return null;
-            // Translate TDC ID to MMC ID for display
-            const mmcId = this.translateTdcToMmc()(rightId);
-            if (!mmcId)
-                return rightId; // Fallback to TDC ID if translation fails
-            // Extract section number from MMC ID
-            return mmcId.replace(/^S_/, '');
+            return this.translate()(rightId) || rightId;
         }
         catch (error) {
             return null;
@@ -112,33 +96,48 @@ class NeighborsComponent {
         try {
             const neighborKey = type === 'prev' ? 'l' : 'r';
             const noNeighborValue = 'none';
-            // 1. Translate TDC → MMC
-            const currentSectionMmcId = this.translateTdcToMmc()(currentSectionTdcId);
-            if (!currentSectionMmcId)
-                return null;
-            // 2. Look up neighbor in data
-            const neighbors = this.neighborsData();
-            const neighbor = neighbors[currentSectionMmcId];
-            const neighborSectionMmcId = neighbor ? neighbor[neighborKey] : noNeighborValue;
-            // 3. Handle 'none' boundary
-            if (neighborSectionMmcId === noNeighborValue) {
+            const neighbor = this.relatedMaps()[currentSectionTdcId] ?? null;
+            if (!neighbor) {
+                this.fetchSection(currentSectionTdcId);
                 return null;
             }
-            // 4. Translate MMC → TDC
-            const neighborSectionTdcId = this.translateMmcToTdc()(neighborSectionMmcId);
-            if (!neighborSectionTdcId)
+            const neighborSectionTdcId = neighbor[neighborKey] ?? noNeighborValue;
+            // Handle 'none' boundary
+            if (!neighborSectionTdcId || neighborSectionTdcId === noNeighborValue) {
                 return null;
-            // 5. Check availability
+            }
+            // Skip general admission sections — not navigable as neighbors
+            if (neighborSectionTdcId.includes('general_admission')) {
+                return this.findAvailableNeighbor(type, neighborSectionTdcId);
+            }
+            // Check availability using TDC ID
             if (this.hasAvailability()(neighborSectionTdcId)) {
                 return neighborSectionTdcId;
             }
-            // 6. Recursively find next available (skip unavailable sections)
+            // Recursively find next available (skip unavailable sections)
             return this.findAvailableNeighbor(type, neighborSectionTdcId);
         }
         catch (error) {
             return null;
         }
     }
+    fetchSection(sectionId) {
+        if (this.relatedMaps()[sectionId] || this.fetchingIds.has(sectionId)) {
+            return;
+        }
+        this.fetchingIds.add(sectionId);
+        void this.dvmService().getRelatedMapsForSection(sectionId).then(related => {
+            this.fetchingIds.delete(sectionId);
+            if (!related)
+                return;
+            const entry = {};
+            if (related['left']?.map_id)
+                entry.l = related['left'].map_id;
+            if (related['right']?.map_id)
+                entry.r = related['right'].map_id;
+            this.relatedMaps.update(prev => ({ ...prev, [sectionId]: entry }));
+        });
+    }
     // GETTERS
     get leftSection() {
         return this.leftSectionId();
@@ -172,11 +171,11 @@ class NeighborsComponent {
         this.sectionChange.emit({ direction, sectionId: section });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NeighborsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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' }}&nbsp; </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&nbsp;</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' }}&nbsp; </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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: NeighborsComponent, isStandalone: true, selector: "sdc-neighbors", inputs: { translate: { classPropertyName: "translate", publicName: "translate", isSignal: true, isRequired: false, transformFunction: null }, dvmService: { classPropertyName: "dvmService", publicName: "dvmService", isSignal: true, isRequired: true, transformFunction: null }, currentSectionId: { classPropertyName: "currentSectionId", publicName: "currentSectionId", 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' }}&nbsp; </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&nbsp;</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' }}&nbsp; </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-layout-gap: .5rem;--sdc-neighbors-tooltip-background: #ffffff;--sdc-neighbors-current-pill-background: #ffffff;--sdc-neighbors-current-pill-radius: 1rem;--sdc-neighbors-current-pill-height: 2.5rem;--sdc-neighbors-current-pill-padding-x: 3rem;--sdc-neighbors-chip-border: 1px solid rgb(0 0 0 / .06);--sdc-neighbors-chip-shadow: 0 1px 3px 0 rgb(0 0 0 / .1);--sdc-neighbors-chip-shadow-hover: 0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .06);--sdc-neighbors-tooltip-shadow: 0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .06);--sdc-neighbors-background-color: transparent;--sdc-neighbors-text-color: #000000;--sdc-neighbors-border-radius: 9999px;--sdc-neighbors-padding-x: 0;--sdc-neighbors-padding-y: 0;--sdc-neighbors-height: auto;--sdc-neighbors-max-width: none;--sdc-neighbors-button-width: 2.25rem;--sdc-neighbors-button-height: 2.25rem;--sdc-neighbors-button-offset: auto;--sdc-neighbors-button-icon-color: #000000;--sdc-neighbors-button-hover-background-color: rgb(243 244 246);--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: .875rem;--sdc-neighbors-current-section-text-font-weight: 600;--sdc-neighbors-current-section-text-font-size: .875rem;--sdc-neighbors-current-section-text-transform: none}.neighbors-container.hidden{display:none}.neighbors-container{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;gap:var(--sdc-neighbors-layout-gap);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:0;min-height:var(--sdc-neighbors-height);height:auto;max-width:var(--sdc-neighbors-max-width);pointer-events:auto}.neighbor-button{position:relative;display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:auto;height:auto;cursor:pointer;transition:opacity .15s cubic-bezier(.4,0,.2,1)}.neighbor-button-left,.neighbor-button-right{left:auto;right:auto}.neighbor-button.is-none{opacity:0;pointer-events:none;visibility:hidden;width:0;height:0;min-width:0;overflow:hidden}.neighbor-button:focus-visible{outline:2px solid rgb(59 130 246);outline-offset:2px;border-radius:9999px}.neighbor-button-icon{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:var(--sdc-neighbors-button-width);height:var(--sdc-neighbors-button-height);min-width:var(--sdc-neighbors-button-width);min-height:var(--sdc-neighbors-button-height);flex-shrink:0;border-radius:var(--sdc-neighbors-border-radius);background-color:var(--sdc-neighbors-tooltip-background);border:var(--sdc-neighbors-chip-border);box-shadow:var(--sdc-neighbors-chip-shadow);transition:background-color .15s cubic-bezier(.4,0,.2,1),box-shadow .15s ease,transform .15s ease}.neighbor-button:hover .neighbor-button-icon{background-color:var(--sdc-neighbors-button-hover-background-color);box-shadow:var(--sdc-neighbors-chip-shadow-hover)}.neighbor-button:active .neighbor-button-icon{transform:scale(.97);box-shadow:var(--sdc-neighbors-chip-shadow)}.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{position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%);z-index:20;opacity:0;pointer-events:none;transition:opacity .15s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;flex-grow:0;height:auto;padding:.375rem .625rem;border-radius:.375rem;background-color:var(--sdc-neighbors-tooltip-background);border:var(--sdc-neighbors-chip-border);box-shadow:var(--sdc-neighbors-tooltip-shadow);max-width:min(200px,70vw)}.neighbor-button:hover .neighbor-button-label{opacity:1}.neighbor-button-left .neighbor-button-label,.neighbor-button-right .neighbor-button-label{padding-left:.625rem;padding-right:.625rem;border-radius:.375rem}.neighbor-button-label p{margin:0;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);display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;text-align:center;line-height:1.25}.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) * 4)}.neighbor-button-label .section-number{white-space:nowrap}.current-section-wrapper{box-sizing:border-box;display:flex;align-items:center;justify-content:center;margin-left:auto;margin-right:auto;cursor:default;min-width:0;max-width:12rem;height:var(--sdc-neighbors-current-pill-height);min-height:var(--sdc-neighbors-current-pill-height);max-height:var(--sdc-neighbors-current-pill-height);padding-left:var(--sdc-neighbors-current-pill-padding-x);padding-right:var(--sdc-neighbors-current-pill-padding-x);padding-top:0;padding-bottom:0;border-radius:var(--sdc-neighbors-current-pill-radius);border:var(--sdc-neighbors-chip-border);background-color:var(--sdc-neighbors-current-pill-background);box-shadow:var(--sdc-neighbors-chip-shadow);overflow:hidden}.current-section-loading{margin:0;font-weight:var(--sdc-neighbors-current-section-loading-font-weight);font-size:var(--sdc-neighbors-current-section-loading-font-size);line-height:1.25;color:var(--sdc-neighbors-text-color)}.current-section-text{margin:0;display:flex;align-items:center;justify-content:center;font-weight:var(--sdc-neighbors-current-section-text-font-weight);font-size:var(--sdc-neighbors-current-section-text-font-size);line-height:1.25;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;font-weight:400}.current-section-text .section-number{display:inline-block;min-width:0;max-width:8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:640px){.sdc-neighbors{--sdc-neighbors-layout-gap: .375rem;--sdc-neighbors-button-width: 2rem;--sdc-neighbors-button-height: 2rem;--sdc-neighbors-current-pill-height: 2rem;--sdc-neighbors-current-pill-padding-x: 1.125rem}.current-section-text .prefix,.neighbor-button-label .prefix{display:none}.current-section-wrapper{max-width:9rem}.current-section-text .section-number{max-width:5rem}.neighbor-button-icon svg{width:.75rem;height:.75rem}}@media(max-width:420px){.current-section-wrapper{max-width:7rem}.current-section-text .section-number{max-width:4rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NeighborsComponent, decorators: [{
             type: Component,
-            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' }}&nbsp; </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&nbsp;</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' }}&nbsp; </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"] }]
+            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' }}&nbsp; </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&nbsp;</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' }}&nbsp; </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-layout-gap: .5rem;--sdc-neighbors-tooltip-background: #ffffff;--sdc-neighbors-current-pill-background: #ffffff;--sdc-neighbors-current-pill-radius: 1rem;--sdc-neighbors-current-pill-height: 2.5rem;--sdc-neighbors-current-pill-padding-x: 3rem;--sdc-neighbors-chip-border: 1px solid rgb(0 0 0 / .06);--sdc-neighbors-chip-shadow: 0 1px 3px 0 rgb(0 0 0 / .1);--sdc-neighbors-chip-shadow-hover: 0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .06);--sdc-neighbors-tooltip-shadow: 0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .06);--sdc-neighbors-background-color: transparent;--sdc-neighbors-text-color: #000000;--sdc-neighbors-border-radius: 9999px;--sdc-neighbors-padding-x: 0;--sdc-neighbors-padding-y: 0;--sdc-neighbors-height: auto;--sdc-neighbors-max-width: none;--sdc-neighbors-button-width: 2.25rem;--sdc-neighbors-button-height: 2.25rem;--sdc-neighbors-button-offset: auto;--sdc-neighbors-button-icon-color: #000000;--sdc-neighbors-button-hover-background-color: rgb(243 244 246);--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: .875rem;--sdc-neighbors-current-section-text-font-weight: 600;--sdc-neighbors-current-section-text-font-size: .875rem;--sdc-neighbors-current-section-text-transform: none}.neighbors-container.hidden{display:none}.neighbors-container{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;gap:var(--sdc-neighbors-layout-gap);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:0;min-height:var(--sdc-neighbors-height);height:auto;max-width:var(--sdc-neighbors-max-width);pointer-events:auto}.neighbor-button{position:relative;display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:auto;height:auto;cursor:pointer;transition:opacity .15s cubic-bezier(.4,0,.2,1)}.neighbor-button-left,.neighbor-button-right{left:auto;right:auto}.neighbor-button.is-none{opacity:0;pointer-events:none;visibility:hidden;width:0;height:0;min-width:0;overflow:hidden}.neighbor-button:focus-visible{outline:2px solid rgb(59 130 246);outline-offset:2px;border-radius:9999px}.neighbor-button-icon{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:var(--sdc-neighbors-button-width);height:var(--sdc-neighbors-button-height);min-width:var(--sdc-neighbors-button-width);min-height:var(--sdc-neighbors-button-height);flex-shrink:0;border-radius:var(--sdc-neighbors-border-radius);background-color:var(--sdc-neighbors-tooltip-background);border:var(--sdc-neighbors-chip-border);box-shadow:var(--sdc-neighbors-chip-shadow);transition:background-color .15s cubic-bezier(.4,0,.2,1),box-shadow .15s ease,transform .15s ease}.neighbor-button:hover .neighbor-button-icon{background-color:var(--sdc-neighbors-button-hover-background-color);box-shadow:var(--sdc-neighbors-chip-shadow-hover)}.neighbor-button:active .neighbor-button-icon{transform:scale(.97);box-shadow:var(--sdc-neighbors-chip-shadow)}.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{position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%);z-index:20;opacity:0;pointer-events:none;transition:opacity .15s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;flex-grow:0;height:auto;padding:.375rem .625rem;border-radius:.375rem;background-color:var(--sdc-neighbors-tooltip-background);border:var(--sdc-neighbors-chip-border);box-shadow:var(--sdc-neighbors-tooltip-shadow);max-width:min(200px,70vw)}.neighbor-button:hover .neighbor-button-label{opacity:1}.neighbor-button-left .neighbor-button-label,.neighbor-button-right .neighbor-button-label{padding-left:.625rem;padding-right:.625rem;border-radius:.375rem}.neighbor-button-label p{margin:0;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);display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;text-align:center;line-height:1.25}.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) * 4)}.neighbor-button-label .section-number{white-space:nowrap}.current-section-wrapper{box-sizing:border-box;display:flex;align-items:center;justify-content:center;margin-left:auto;margin-right:auto;cursor:default;min-width:0;max-width:12rem;height:var(--sdc-neighbors-current-pill-height);min-height:var(--sdc-neighbors-current-pill-height);max-height:var(--sdc-neighbors-current-pill-height);padding-left:var(--sdc-neighbors-current-pill-padding-x);padding-right:var(--sdc-neighbors-current-pill-padding-x);padding-top:0;padding-bottom:0;border-radius:var(--sdc-neighbors-current-pill-radius);border:var(--sdc-neighbors-chip-border);background-color:var(--sdc-neighbors-current-pill-background);box-shadow:var(--sdc-neighbors-chip-shadow);overflow:hidden}.current-section-loading{margin:0;font-weight:var(--sdc-neighbors-current-section-loading-font-weight);font-size:var(--sdc-neighbors-current-section-loading-font-size);line-height:1.25;color:var(--sdc-neighbors-text-color)}.current-section-text{margin:0;display:flex;align-items:center;justify-content:center;font-weight:var(--sdc-neighbors-current-section-text-font-weight);font-size:var(--sdc-neighbors-current-section-text-font-size);line-height:1.25;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;font-weight:400}.current-section-text .section-number{display:inline-block;min-width:0;max-width:8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:640px){.sdc-neighbors{--sdc-neighbors-layout-gap: .375rem;--sdc-neighbors-button-width: 2rem;--sdc-neighbors-button-height: 2rem;--sdc-neighbors-current-pill-height: 2rem;--sdc-neighbors-current-pill-padding-x: 1.125rem}.current-section-text .prefix,.neighbor-button-label .prefix{display:none}.current-section-wrapper{max-width:9rem}.current-section-text .section-number{max-width:5rem}.neighbor-button-icon svg{width:.75rem;height:.75rem}}@media(max-width:420px){.current-section-wrapper{max-width:7rem}.current-section-text .section-number{max-width:4rem}}\n"] }]
         }], propDecorators: { neighborsContainer: [{
                 type: ViewChild,
                 args: ['neighborsContainer']
@@ -192,7 +191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
             }], rightSectionElement: [{
                 type: ViewChild,
                 args: ['rightSectionNumber', { static: false }]
-            }], neighborsData: [{ type: i0.Input, args: [{ isSignal: true, alias: "neighborsData", required: true }] }], currentSectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSectionId", required: true }] }], translateTdcToMmc: [{ type: i0.Input, args: [{ isSignal: true, alias: "translateTdcToMmc", required: true }] }], translateMmcToTdc: [{ type: i0.Input, args: [{ isSignal: true, alias: "translateMmcToTdc", required: true }] }], hasAvailability: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasAvailability", required: true }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], showElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "showElement", required: false }] }], modeLr: [{ type: i0.Input, args: [{ isSignal: true, alias: "modeLr", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], sectionChange: [{
+            }], translate: [{ type: i0.Input, args: [{ isSignal: true, alias: "translate", required: false }] }], dvmService: [{ type: i0.Input, args: [{ isSignal: true, alias: "dvmService", required: true }] }], currentSectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSectionId", required: true }] }], hasAvailability: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasAvailability", required: true }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], showElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "showElement", required: false }] }], modeLr: [{ type: i0.Input, args: [{ isSignal: true, alias: "modeLr", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], sectionChange: [{
                 type: Output
             }] } });

package/fesm2022/3ddv-software-division-components-dvm-neighbors.mjs.map CHANGED Viewed

	@@ -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 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":";;;MAwBa,kBAAkB,CAAA;;AAGb,IAAA,kBAAkB;AAGlB,IAAA,cAAc;AAGd,IAAA,gBAAgB;AAGhB,IAAA,kBAAkB;AAGlB,IAAA,mBAAmB;;AAGlB,IAAA,GAAG,GAAsB,MAAM,CAAC,iBAAiB,CAAC;;AAGnD,IAAA,aAAa,GAAG,KAAK,CAAC,QAAQ,wDAAiB;AAC/C,IAAA,gBAAgB,GAAG,KAAK,CAAC,QAAQ,2DAAiB;AAClD,IAAA,iBAAiB,GAAG,KAAK,CAAC,QAAQ,4DAAwB;AAC1D,IAAA,iBAAiB,GAAG,KAAK,CAAC,QAAQ,4DAAwB;AAC1D,IAAA,eAAe,GAAG,KAAK,CAAC,QAAQ,0DAAqB;;AAGrD,IAAA,SAAS,GAAG,KAAK,CAAU,KAAK,qDAAC;AACjC,IAAA,WAAW,GAAG,KAAK,CAAU,IAAI,uDAAC;AAClC,IAAA,MAAM,GAAG,KAAK,CAAU,KAAK,kDAAC;AAC9B,IAAA,SAAS,GAAG,KAAK,CAAS,EAAE,qDAAC;AAC7B,IAAA,KAAK,GAAG,KAAK,CAAa,WAAW,iDAAC;;AAG5C,IAAA,aAAa,GAAG,IAAI,YAAY,EAAsB;AAEhE;;AAEG;AACgB,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAK;AAC/C,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,EAAE;AAC/B,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE;AAClC,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,eAAe,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC;aAChE,MAAM,CAAC,OAAO;aACd,IAAI,CAAC,GAAG,CAAC;AACd,IAAA,CAAC,yDAAC;;IAGe,aAAa,GAAmB,EAAE;;AAGhC,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAK;AAC/C,QAAA,IAAI;AACF,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,EAAE;AACzC,YAAA,IAAI,CAAC,SAAS;AAAE,gBAAA,OAAO,IAAI;YAC3B,OAAO,IAAI,CAAC,qBAAqB,CAAC,MAAM,EAAE,SAAS,CAAC;QACtD;QAAE,OAAO,KAAK,EAAE;AACd,YAAA,OAAO,IAAI;QACb;AACF,IAAA,CAAC,yDAAC;AAEiB,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAK;AAChD,QAAA,IAAI;AACF,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,EAAE;AACzC,YAAA,IAAI,CAAC,SAAS;AAAE,gBAAA,OAAO,IAAI;YAC3B,OAAO,IAAI,CAAC,qBAAqB,CAAC,MAAM,EAAE,SAAS,CAAC;QACtD;QAAE,OAAO,KAAK,EAAE;AACd,YAAA,OAAO,IAAI;QACb;AACF,IAAA,CAAC,0DAAC;AAEiB,IAAA,mBAAmB,GAAG,QAAQ,CAAC,MAAK;AACrD,QAAA,IAAI;AACF,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,EAAE;AACzC,YAAA,IAAI,CAAC,SAAS;AAAE,gBAAA,OAAO,SAAS;;YAGhC,MAAM,KAAK,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC,SAAS,CAAC;AACjD,YAAA,IAAI,CAAC,KAAK;gBAAE,OAAO,SAAS,CAAC;;YAG7B,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;QACjC;QAAE,OAAO,KAAK,EAAE;AACd,YAAA,OAAO,SAAS;QAClB;AACF,IAAA,CAAC,+DAAC;AAEiB,IAAA,gBAAgB,GAAG,QAAQ,CAAC,MAAK;AAClD,QAAA,IAAI;AACF,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,EAAE;AACnC,YAAA,IAAI,CAAC,MAAM;AAAE,gBAAA,OAAO,IAAI;;YAGxB,MAAM,KAAK,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC,MAAM,CAAC;AAC9C,YAAA,IAAI,CAAC,KAAK;gBAAE,OAAO,MAAM,CAAC;;YAG1B,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;QACjC;QAAE,OAAO,KAAK,EAAE;AACd,YAAA,OAAO,IAAI;QACb;AACF,IAAA,CAAC,4DAAC;AAEiB,IAAA,iBAAiB,GAAG,QAAQ,CAAC,MAAK;AACnD,QAAA,IAAI;AACF,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,cAAc,EAAE;AACrC,YAAA,IAAI,CAAC,OAAO;AAAE,gBAAA,OAAO,IAAI;;YAGzB,MAAM,KAAK,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC,OAAO,CAAC;AAC/C,YAAA,IAAI,CAAC,KAAK;gBAAE,OAAO,OAAO,CAAC;;YAG3B,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;QACjC;QAAE,OAAO,KAAK,EAAE;AACd,YAAA,OAAO,IAAI;QACb;AACF,IAAA,CAAC,6DAAC;;IAGM,qBAAqB,CAAC,IAAe,EAAE,mBAA2B,EAAA;AACxE,QAAA,IAAI;AACF,YAAA,MAAM,WAAW,GAAG,IAAI,KAAK,MAAM,GAAG,GAAG,GAAG,GAAG;YAC/C,MAAM,eAAe,GAAG,MAAM;;YAG9B,MAAM,mBAAmB,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC,mBAAmB,CAAC;AACzE,YAAA,IAAI,CAAC,mBAAmB;AAAE,gBAAA,OAAO,IAAI;;AAGrC,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE;AACtC,YAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,mBAAmB,CAAC;AAC/C,YAAA,MAAM,oBAAoB,GAAG,QAAQ,GAAG,QAAQ,CAAC,WAAW,CAAC,GAAG,eAAe;;AAG/E,YAAA,IAAI,oBAAoB,KAAK,eAAe,EAAE;AAC5C,gBAAA,OAAO,IAAI;YACb;;YAGA,MAAM,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC,oBAAoB,CAAC;AAC3E,YAAA,IAAI,CAAC,oBAAoB;AAAE,gBAAA,OAAO,IAAI;;YAGtC,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC,oBAAoB,CAAC,EAAE;AAChD,gBAAA,OAAO,oBAAoB;YAC7B;;YAGA,OAAO,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,oBAAoB,CAAC;QAC/D;QAAE,OAAO,KAAK,EAAE;AACd,YAAA,OAAO,IAAI;QACb;IACF;;AAGA,IAAA,IAAW,WAAW,GAAA;AACpB,QAAA,OAAO,IAAI,CAAC,aAAa,EAAE;IAC7B;AAEA,IAAA,IAAW,YAAY,GAAA;AACrB,QAAA,OAAO,IAAI,CAAC,cAAc,EAAE;IAC9B;AAEA,IAAA,IAAW,OAAO,GAAA;AAChB,QAAA,OAAO,IAAI,CAAC,mBAAmB,EAAE;IACnC;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,GAAiB,KAAW,GAAG,CAAC,WAAW,EAAE,CAAC;IAC5E;;AAGO,IAAA,iBAAiB,CAAC,OAAe,EAAA;AACtC,QAAA,IAAI,OAAO,KAAK,MAAM,IAAI,CAAC,OAAO,EAAE;YAClC;QACF;AAEA,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,EAAE;AACnC,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,cAAc,EAAE;AAErC,QAAA,IAAI,SAAoB;AACxB,QAAA,IAAI,OAAO,KAAK,MAAM,EAAE;YACtB,SAAS,GAAG,MAAM;QACpB;AAAO,aAAA,IAAI,OAAO,KAAK,OAAO,EAAE;YAC9B,SAAS,GAAG,MAAM;QACpB;aAAO;YACL;QACF;AAEA,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;IAC5D;uGAhMW,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,mhECxB/B,y1FAyFA,EAAA,MAAA,EAAA,CAAA,q9IAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDjEa,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAP9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,EAAA,UAAA,EACb,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,y1FAAA,EAAA,MAAA,EAAA,CAAA,q9IAAA,CAAA,EAAA;;sBAM9C,SAAS;uBAAC,oBAAoB;;sBAG9B,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,gBAAgB,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;;sBAG7C,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,kBAAkB,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;;sBAG/C,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,mBAAmB,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;;sBAGhD,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,oBAAoB,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;;sBAqBjD;;;AE3DH;;AAEG;;;;"}
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';\nimport {\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n EventEmitter,\n input,\n OnDestroy,\n Output,\n signal,\n ViewChild,\n} from '@angular/core';\nimport { Subscription } from 'rxjs';\nimport { Direction, HasAvailabilityFn, NeighborsDvmService, SectionChangeEvent, TranslateSectionIdFn } from './types';\n\n@Component({\n selector: 'sdc-neighbors',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './neighbors.component.html',\n styleUrl: './neighbors.component.css',\n})\nexport class NeighborsComponent implements OnDestroy {\n // VIEWCHILD\n @ViewChild('neighborsContainer')\n public readonly neighborsContainer!: ElementRef<HTMLDivElement>;\n\n @ViewChild('currentSection', { static: false })\n public readonly currentSection!: ElementRef<HTMLSpanElement>;\n\n @ViewChild('currentSection3d', { static: false })\n public readonly currentSection3d!: ElementRef<HTMLSpanElement>;\n\n @ViewChild('leftSectionNumber', { static: false })\n public readonly leftSectionElement!: ElementRef<HTMLSpanElement>;\n\n @ViewChild('rightSectionNumber', { static: false })\n public readonly rightSectionElement!: ElementRef<HTMLSpanElement>;\n\n // REQUIRED INPUTS\n public readonly translate = input<TranslateSectionIdFn>((id: string) => id);\n public readonly dvmService = input.required<NeighborsDvmService>();\n public readonly currentSectionId = input.required<string \| null>();\n public readonly hasAvailability = input.required<HasAvailabilityFn>();\n\n // OPTIONAL INPUTS\n public readonly isLoading = input<boolean>(false);\n public readonly showElement = input<boolean>(true);\n public readonly modeLr = input<boolean>(false);\n public readonly className = input<string>('');\n public readonly theme = input<ThemeClass>('theme-sdc');\n\n // OUTPUTS\n @Output() sectionChange = new EventEmitter<SectionChangeEvent>();\n\n /*\n Computed class string that combines theme and user classes.\n /\n protected readonly computedClass = computed(() => {\n const themeClass = this.theme();\n const className = this.className();\n return Array.from(new Set(['sdc-neighbors', themeClass, className]))\n .filter(Boolean)\n .join(' ');\n });\n\n // COMPONENT STATE\n private readonly subscriptions: Subscription[] = [];\n private readonly relatedMaps = signal<Record<string, { l?: string; r?: string }>>({});\n private readonly fetchingIds = new Set<string>();\n\n // COMPUTED STATE\n protected readonly leftSectionId = computed(() => {\n try {\n const currentId = this.currentSectionId();\n if (!currentId) return null;\n return this.findAvailableNeighbor('prev', currentId);\n } catch (error) {\n return null;\n }\n });\n\n protected readonly rightSectionId = computed(() => {\n try {\n const currentId = this.currentSectionId();\n if (!currentId) return null;\n return this.findAvailableNeighbor('next', currentId);\n } catch (error) {\n return null;\n }\n });\n\n protected readonly currentSectionLabel = computed(() => {\n try {\n const currentId = this.currentSectionId();\n if (!currentId) return 'Loading';\n return this.translate()(currentId) \|\| currentId;\n } catch (error) {\n return 'Loading';\n }\n });\n\n protected readonly leftSectionLabel = computed(() => {\n try {\n const leftId = this.leftSectionId();\n if (!leftId) return null;\n return this.translate()(leftId) \|\| leftId;\n } catch (error) {\n return null;\n }\n });\n\n protected readonly rightSectionLabel = computed(() => {\n try {\n const rightId = this.rightSectionId();\n if (!rightId) return null;\n return this.translate()(rightId) \|\| rightId;\n } catch (error) {\n return null;\n }\n });\n\n // NEIGHBOR RESOLUTION ALGORITHM\n private findAvailableNeighbor(type: Direction, currentSectionTdcId: string): string \| null {\n try {\n const neighborKey = type === 'prev' ? 'l' : 'r';\n const noNeighborValue = 'none';\n\n const neighbor = this.relatedMaps()[currentSectionTdcId] ?? null;\n\n if (!neighbor) {\n this.fetchSection(currentSectionTdcId);\n return null;\n }\n\n const neighborSectionTdcId = neighbor[neighborKey] ?? noNeighborValue;\n\n // Handle 'none' boundary\n if (!neighborSectionTdcId \|\| neighborSectionTdcId === noNeighborValue) {\n return null;\n }\n\n // Skip general admission sections — not navigable as neighbors\n if (neighborSectionTdcId.includes('general_admission')) {\n return this.findAvailableNeighbor(type, neighborSectionTdcId);\n }\n\n // Check availability using TDC ID\n if (this.hasAvailability()(neighborSectionTdcId)) {\n return neighborSectionTdcId;\n }\n\n // Recursively find next available (skip unavailable sections)\n return this.findAvailableNeighbor(type, neighborSectionTdcId);\n } catch (error) {\n return null;\n }\n }\n\n private fetchSection(sectionId: string): void {\n if (this.relatedMaps()[sectionId] \|\| this.fetchingIds.has(sectionId)) {\n return;\n }\n this.fetchingIds.add(sectionId);\n void this.dvmService().getRelatedMapsForSection(sectionId).then(related => {\n this.fetchingIds.delete(sectionId);\n if (!related) return;\n const entry: { l?: string; r?: string } = {};\n if (related['left']?.map_id) entry.l = related['left'].map_id;\n if (related['right']?.map_id) entry.r = related['right'].map_id;\n this.relatedMaps.update(prev => ({ ...prev, [sectionId]: entry }));\n });\n }\n\n // GETTERS\n public get leftSection(): string \| null {\n return this.leftSectionId();\n }\n\n public get rightSection(): string \| null {\n return this.rightSectionId();\n }\n\n public get section(): string \| null {\n return this.currentSectionLabel();\n }\n\n ngOnDestroy(): void {\n this.subscriptions.forEach((sub: Subscription): void => sub.unsubscribe());\n }\n\n // METHODS\n public navigateToSection(section: string): void {\n if (section === 'none' \|\| !section) {\n return;\n }\n\n const leftId = this.leftSectionId();\n const rightId = this.rightSectionId();\n\n let direction: Direction;\n if (section === leftId) {\n direction = 'prev';\n } else if (section === rightId) {\n direction = 'next';\n } else {\n return;\n }\n\n this.sectionChange.emit({ direction, sectionId: section });\n }\n}\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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"}

package/fesm2022/3ddv-software-division-components-dvm-popover.mjs CHANGED Viewed

@@ -839,7 +839,8 @@ class PopoverComponent {
         if (!viewer3dService?.isInitialized()) {
             return;
         }
-        viewer3dService.getThumbnail(options, true).subscribe((thumbnailUrl) => {
+        // @ts-ignore
+        void viewer3dService.getThumbnail(options, true).then((thumbnailUrl) => {
             this.thumbnail = thumbnailUrl;
             this.cdr.markForCheck();
         });