npm - @3ddv/software-division-components - Versions diffs - 2.0.10 → 2.0.12 - Mend

@3ddv/software-division-components 2.0.10 → 2.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

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

@@ -1,16 +1,17 @@
 import { NgOptimizedImage, NgClass, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, viewChild, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, viewChild, effect, ChangeDetectionStrategy, Component } from '@angular/core';
 import { createTimeline } from 'animejs';
 import { mergeMap, skip, tap, merge, catchError } from 'rxjs';
 class MapLoaderComponent {
     // INPUTS
-    viewerService = input.required(...(ngDevMode ? [{ debugName: "viewerService" }] : []));
+    viewerService = input(...(ngDevMode ? [undefined, { debugName: "viewerService" }] : []));
     logo = input.required(...(ngDevMode ? [{ debugName: "logo" }] : []));
     color = input('255 165 0', ...(ngDevMode ? [{ debugName: "color" }] : []));
     duration = input(500, ...(ngDevMode ? [{ debugName: "duration" }] : []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    isLoading = input(null, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
     // SIGNALS
     pill = viewChild('pill', ...(ngDevMode ? [{ debugName: "pill" }] : []));
     pillContainer = viewChild('pillContainer', ...(ngDevMode ? [{ debugName: "pillContainer" }] : []));
@@ -19,6 +20,20 @@ class MapLoaderComponent {
     isFirstLoad = true;
     varName = '--ripple-color';
     handlers = [];
+    _isLoading = effect(() => {
+        // If we use the service instead of the external loading state, do not execute
+        if (this.isLoading() == null) {
+            return;
+        }
+        // Here we start with the loader hidden by default
+        this.container().nativeElement.classList.add('hidden');
+        if (this.isLoading() === true) {
+            this.showLoader();
+        }
+        else if (this.isLoading() === false) {
+            this.hideLoader();
+        }
+    }, ...(ngDevMode ? [{ debugName: "_isLoading" }] : []));
     // GETTERS
     /**
      * Retorna la variable CSS para el color del ripple.
@@ -105,29 +120,34 @@ class MapLoaderComponent {
      * para futuras ocasiones y delegamos en los handlers start y success para mostrar u ocultar el loader respectivamente.
      */
     initComponent() {
-        const subscription = this.viewerService()
-            .waitInitialize()
-            .pipe(mergeMap(() => {
-            // when initialized, we listen to both load_start and load_success
-            const loadStart$ = this.viewerService()
-                .getObservable('load_start')
-                .pipe(skip(1), // skip first emission
-            tap(() => this.showLoader()));
-            const loadSuccess$ = this.viewerService()
-                .getObservable('load_success')
-                .pipe(tap(() => {
-                if (this.isFirstLoad) {
-                    this.isFirstLoad = false;
-                }
-            }), tap(() => this.handleLoadSuccess()));
-            // merge both into one stream
-            return merge(loadStart$, loadSuccess$);
-        }), catchError((error) => {
-            console.error('viewer init error', error);
-            return []; // swallow error or return EMPTY
-        }))
-            .subscribe();
-        this.handlers.push(subscription);
+        if (this.isLoading() !== null) {
+            return;
+        }
+        if (typeof this.viewerService() !== 'undefined') {
+            const subscription = this.viewerService()
+                .waitInitialize()
+                .pipe(mergeMap(() => {
+                // when initialized, we listen to both load_start and load_success
+                const loadStart$ = this.viewerService()
+                    .getObservable('load_start')
+                    .pipe(skip(1), // skip first emission
+                tap(() => this.showLoader()));
+                const loadSuccess$ = this.viewerService()
+                    .getObservable('load_success')
+                    .pipe(tap(() => {
+                    if (this.isFirstLoad) {
+                        this.isFirstLoad = false;
+                    }
+                }), tap(() => this.handleLoadSuccess()));
+                // merge both into one stream
+                return merge(loadStart$, loadSuccess$);
+            }), catchError((error) => {
+                console.error('viewer init error', error);
+                return []; // swallow error or return EMPTY
+            }))
+                .subscribe();
+            this.handlers.push(subscription);
+        }
     }
     formatRgb(rgbString, wrapped = true) {
         return wrapped ? 'rgb(' + rgbString.split(' ').join(', ') + ')' : rgbString.split(' ').join(', ');
@@ -142,12 +162,12 @@ 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: true, 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 } }, 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.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 });
 }
 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"] }]
-        }], propDecorators: { viewerService: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewerService", required: true }] }], 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 }] }], pill: [{ type: i0.ViewChild, args: ['pill', { isSignal: true }] }], pillContainer: [{ type: i0.ViewChild, args: ['pillContainer', { isSignal: true }] }], container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }] } });
+        }], 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 }] }] } });
 /*
  * Public API Surface of software-division-components

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 { ChangeDetectionStrategy, Component, ElementRef, input, OnDestroy, OnInit, viewChild } from '@angular/core';\nimport { createTimeline } from 'animejs';\nimport { catchError, merge, mergeMap, Observable, skip, Subscription, tap } from 'rxjs';\n\n@Component({\n selector: 'sdc-map-loader',\n templateUrl: './map-loader.component.html',\n styleUrl: './map-loader.component.css',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [NgOptimizedImage, NgClass, CommonModule],\n})\nexport class MapLoaderComponent implements OnInit, OnDestroy {\n // INPUTS\n public viewerService = input.required<{\n waitInitialize: () => Observable<any>;\n getObservable: (value: 'load_success' \| 'load_start') => Observable<any>;\n }>();\n public logo = input.required<string>();\n public color = input<string>('255 165 0');\n public duration = input<number>(500);\n public size = input<'sm' \| 'md'>('md');\n\n // SIGNALS\n public pill = viewChild<ElementRef>('pill');\n public pillContainer = viewChild<ElementRef>('pillContainer');\n public container = viewChild<ElementRef>('container');\n\n // CLASS PROPERTIES\n private isFirstLoad = true;\n private varName = '--ripple-color';\n private readonly handlers: Subscription[] = [];\n\n // GETTERS\n /*\n Retorna la variable CSS para el color del ripple.\n * Necesitamos setear la variable css --ripple-color con el color accent de la configuración.\n * Como este valor originalmente viene sin comas para ser usado en Tailwind, debemos reemplazar los espacios por comas.\n * Finalmente retornamos el valor y lo implementamos en el div contenedor del ripple para ser usado por el scss.\n /\n public get ripple(): string {\n const rgb = this.formatRgb(this.color(), false);\n\n return `${this.varName}:${rgb};`;\n }\n\n // LC METHODS\n public ngOnInit(): void {\n this.initComponent();\n }\n\n public ngOnDestroy(): void {\n this.destroyComponent();\n }\n\n // CLASS METHODS\n\n /\n Muestra el loader.\n * Mediante una animación de animejs, mostramos el loader.\n * Al comenzar, verificará si el contenedor tiene la clase hidden y la removerá si es así.\n /\n private showLoader(): void {\n const pill = this.pill();\n const container = this.container();\n const pillContainer = this.pillContainer();\n\n if (!container \|\| !pill \|\| !pillContainer) {\n return console.error('Loader could not be loaded');\n }\n\n const containerClasses: string = container.nativeElement.classList.value;\n\n if (containerClasses.includes('hidden')) {\n container.nativeElement.classList.remove('hidden');\n }\n\n createTimeline({\n duration: this.duration,\n })\n .add(pillContainer.nativeElement, {\n opacity: [0, 1],\n duration: 100,\n })\n .add(\n pill.nativeElement,\n {\n scale: [0, 1],\n opacity: [0, 1],\n },\n '+=10'\n );\n }\n\n /\n Oculta el loader.\n * Cuando termina aplica la clase hidden al contenedor para ocultarlo.\n /\n private hideLoader(): void {\n const pill = this.pill();\n const container = this.container();\n const pillContainer = this.pillContainer();\n\n if (!container \|\| !pill \|\| !pillContainer) {\n return console.error('Loader could not be hidden');\n }\n createTimeline({\n delay: 400,\n duration: this.duration,\n playbackEase: 'outQuad',\n onComplete: () => container.nativeElement.classList.add('hidden'),\n })\n .add(pill.nativeElement, {\n opacity: [1, 0],\n scale: [1, 0],\n })\n .add(pillContainer.nativeElement, {\n opacity: [1, 0],\n });\n }\n\n private handleLoadSuccess(): void {\n if (this.isFirstLoad) {\n this.hideLoader();\n return;\n }\n\n setTimeout(() => this.hideLoader(), this.duration());\n }\n\n /\n Inicializa el componente y sus handlers.\n * Haciendo uso de waitInitialize, esperamos a que el mapa se inicialice para poder suscribirnos a los eventos de carga del mapa.\n * Excepto en la carga inicial del mapa y para evitar superponer animaciones, skipeamos la primera carga y esperamos a que el mapa se recargue\n * para futuras ocasiones y delegamos en los handlers start y success para mostrar u ocultar el loader respectivamente.\n /\n private initComponent(): void {\n const subscription = this.viewerService()\n .waitInitialize()\n .pipe(\n mergeMap(() => {\n // when initialized, we listen to both load_start and load_success\n const loadStart$ = this.viewerService()\n .getObservable('load_start')\n .pipe(\n skip(1), // skip first emission\n tap(() => this.showLoader())\n );\n\n const loadSuccess$ = this.viewerService()\n .getObservable('load_success')\n .pipe(\n tap(() => {\n if (this.isFirstLoad) {\n this.isFirstLoad = false;\n }\n }),\n tap(() => this.handleLoadSuccess())\n );\n\n // merge both into one stream\n return merge(loadStart$, loadSuccess$);\n }),\n catchError((error: unknown) => {\n console.error('viewer init error', error);\n return []; // swallow error or return EMPTY\n })\n )\n .subscribe();\n\n this.handlers.push(subscription);\n }\n\n private formatRgb(rgbString: string, wrapped = true): string {\n return wrapped ? 'rgb(' + rgbString.split(' ').join(', ') + ')' : rgbString.split(' ').join(', ');\n }\n\n /\n Destruye el componente y sus handlers.\n * Recorre el array de handlers y se desuscribe de cada uno de ellos.\n /\n private destroyComponent(): void {\n for (const h of this.handlers) {\n h.unsubscribe();\n }\n }\n}\n","<div #container class=\"container\" [style]=\"ripple\">\n <!-- Container -->\n <div #pillContainer class=\"pill-container\">\n <!-- PILL -->\n <div #pill class=\"pill ripple-animation\">\n <!-- LOGO -->\n <img\n [ngClass]=\"size() === 'sm' ? 'block' : 'hidden'\"\n alt=\"Club logo loader\"\n height=\"70\"\n priority\n width=\"50\"\n [ngSrc]=\"logo()\" />\n <img\n [ngClass]=\"size() === 'md' ? 'block' : 'hidden'\"\n alt=\"Club logo loader\"\n height=\"90\"\n priority\n width=\"70\"\n [ngSrc]=\"logo()\" />\n </div>\n </div>\n</div>\n","/\n * Public API Surface of software-division-components\n /\n\nexport from './map-loader.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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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, NgClass, NgOptimizedImage } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n effect,\n ElementRef,\n input,\n OnDestroy,\n OnInit,\n viewChild,\n} from '@angular/core';\nimport { createTimeline } from 'animejs';\nimport { catchError, merge, mergeMap, Observable, skip, Subscription, tap } from 'rxjs';\n\n@Component({\n selector: 'sdc-map-loader',\n templateUrl: './map-loader.component.html',\n styleUrl: './map-loader.component.css',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [NgOptimizedImage, NgClass, CommonModule],\n})\nexport class MapLoaderComponent implements OnInit, OnDestroy {\n // INPUTS\n public viewerService = input<{\n waitInitialize: () => Observable<any>;\n getObservable: (value: 'load_success' \| 'load_start') => Observable<any>;\n }>();\n\n public logo = input.required<string>();\n public color = input<string>('255 165 0');\n public duration = input<number>(500);\n public size = input<'sm' \| 'md'>('md');\n public isLoading = input<boolean \| null>(null);\n\n // SIGNALS\n public pill = viewChild<ElementRef>('pill');\n public pillContainer = viewChild<ElementRef>('pillContainer');\n public container = viewChild<ElementRef>('container');\n\n // CLASS PROPERTIES\n private isFirstLoad = true;\n private varName = '--ripple-color';\n private readonly handlers: Subscription[] = [];\n\n private _isLoading = effect(() => {\n // If we use the service instead of the external loading state, do not execute\n if (this.isLoading() == null) {\n return;\n }\n // Here we start with the loader hidden by default\n this.container()!.nativeElement.classList.add('hidden');\n\n if (this.isLoading() === true) {\n this.showLoader();\n } else if (this.isLoading() === false) {\n this.hideLoader();\n }\n });\n\n // GETTERS\n /*\n Retorna la variable CSS para el color del ripple.\n * Necesitamos setear la variable css --ripple-color con el color accent de la configuración.\n * Como este valor originalmente viene sin comas para ser usado en Tailwind, debemos reemplazar los espacios por comas.\n * Finalmente retornamos el valor y lo implementamos en el div contenedor del ripple para ser usado por el scss.\n /\n public get ripple(): string {\n const rgb = this.formatRgb(this.color(), false);\n\n return `${this.varName}:${rgb};`;\n }\n\n // LC METHODS\n public ngOnInit(): void {\n this.initComponent();\n }\n\n public ngOnDestroy(): void {\n this.destroyComponent();\n }\n\n // CLASS METHODS\n\n /\n Muestra el loader.\n * Mediante una animación de animejs, mostramos el loader.\n * Al comenzar, verificará si el contenedor tiene la clase hidden y la removerá si es así.\n /\n private showLoader(): void {\n const pill = this.pill();\n const container = this.container();\n const pillContainer = this.pillContainer();\n\n if (!container \|\| !pill \|\| !pillContainer) {\n return console.error('Loader could not be loaded');\n }\n\n const containerClasses: string = container.nativeElement.classList.value;\n\n if (containerClasses.includes('hidden')) {\n container.nativeElement.classList.remove('hidden');\n }\n\n createTimeline({\n duration: this.duration,\n })\n .add(pillContainer.nativeElement, {\n opacity: [0, 1],\n duration: 100,\n })\n .add(\n pill.nativeElement,\n {\n scale: [0, 1],\n opacity: [0, 1],\n },\n '+=10'\n );\n }\n\n /\n Oculta el loader.\n * Cuando termina aplica la clase hidden al contenedor para ocultarlo.\n /\n private hideLoader(): void {\n const pill = this.pill();\n const container = this.container();\n const pillContainer = this.pillContainer();\n\n if (!container \|\| !pill \|\| !pillContainer) {\n return console.error('Loader could not be hidden');\n }\n createTimeline({\n delay: 400,\n duration: this.duration,\n playbackEase: 'outQuad',\n onComplete: () => container.nativeElement.classList.add('hidden'),\n })\n .add(pill.nativeElement, {\n opacity: [1, 0],\n scale: [1, 0],\n })\n .add(pillContainer.nativeElement, {\n opacity: [1, 0],\n });\n }\n\n private handleLoadSuccess(): void {\n if (this.isFirstLoad) {\n this.hideLoader();\n return;\n }\n\n setTimeout(() => this.hideLoader(), this.duration());\n }\n\n /\n Inicializa el componente y sus handlers.\n * Haciendo uso de waitInitialize, esperamos a que el mapa se inicialice para poder suscribirnos a los eventos de carga del mapa.\n * Excepto en la carga inicial del mapa y para evitar superponer animaciones, skipeamos la primera carga y esperamos a que el mapa se recargue\n * para futuras ocasiones y delegamos en los handlers start y success para mostrar u ocultar el loader respectivamente.\n /\n private initComponent(): void {\n if (this.isLoading() !== null) {\n return;\n }\n\n if (typeof this.viewerService() !== 'undefined') {\n const subscription = this.viewerService()!\n .waitInitialize()\n .pipe(\n mergeMap(() => {\n // when initialized, we listen to both load_start and load_success\n const loadStart$ = this.viewerService()!\n .getObservable('load_start')\n .pipe(\n skip(1), // skip first emission\n tap(() => this.showLoader())\n );\n\n const loadSuccess$ = this.viewerService()!\n .getObservable('load_success')\n .pipe(\n tap(() => {\n if (this.isFirstLoad) {\n this.isFirstLoad = false;\n }\n }),\n tap(() => this.handleLoadSuccess())\n );\n\n // merge both into one stream\n return merge(loadStart$, loadSuccess$);\n }),\n catchError((error: unknown) => {\n console.error('viewer init error', error);\n return []; // swallow error or return EMPTY\n })\n )\n .subscribe();\n this.handlers.push(subscription);\n }\n }\n\n private formatRgb(rgbString: string, wrapped = true): string {\n return wrapped ? 'rgb(' + rgbString.split(' ').join(', ') + ')' : rgbString.split(' ').join(', ');\n }\n\n /\n Destruye el componente y sus handlers.\n * Recorre el array de handlers y se desuscribe de cada uno de ellos.\n /\n private destroyComponent(): void {\n for (const h of this.handlers) {\n h.unsubscribe();\n }\n }\n}\n","<div #container class=\"container\" [style]=\"ripple\">\n <!-- Container -->\n <div #pillContainer class=\"pill-container\">\n <!-- PILL -->\n <div #pill class=\"pill ripple-animation\">\n <!-- LOGO -->\n <img\n [ngClass]=\"size() === 'sm' ? 'block' : 'hidden'\"\n alt=\"Club logo loader\"\n height=\"70\"\n priority\n width=\"50\"\n [ngSrc]=\"logo()\" />\n <img\n [ngClass]=\"size() === 'md' ? 'block' : 'hidden'\"\n alt=\"Club logo loader\"\n height=\"90\"\n priority\n width=\"70\"\n [ngSrc]=\"logo()\" />\n </div>\n </div>\n</div>\n","/\n * Public API Surface of software-division-components\n /\n\nexport from './map-loader.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -8,7 +8,7 @@ class NeighborsComponent {
     currentSection3d;
     leftSectionElement;
     rightSectionElement;
-    // SERVICES
+    // SERVICES changes
     cdr = inject(ChangeDetectorRef);
     // REQUIRED INPUTS
     neighborsData = input.required(...(ngDevMode ? [{ debugName: "neighborsData" }] : []));

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\r\n private readonly cdr: ChangeDetectorRef = inject(ChangeDetectorRef);\r\n\r\n // REQUIRED INPUTS\r\n public readonly neighborsData = input.required<NeighborsData>();\r\n public readonly currentSectionId = input.required<string \| null>();\r\n public readonly translateTdcToMmc = input.required<TranslateSectionIdFn>();\r\n public readonly translateMmcToTdc = input.required<TranslateSectionIdFn>();\r\n public readonly hasAvailability = input.required<HasAvailabilityFn>();\r\n\r\n // OPTIONAL INPUTS\r\n public readonly isLoading = input<boolean>(false);\r\n public readonly showElement = input<boolean>(true);\r\n public readonly modeLr = input<boolean>(false);\r\n public readonly className = input<string>('');\r\n public readonly theme = input<ThemeClass>('theme-sdc');\r\n\r\n // OUTPUTS\r\n @Output() sectionChange = new EventEmitter<SectionChangeEvent>();\r\n\r\n /*\r\n Computed class string that combines theme and user classes.\r\n /\r\n protected readonly computedClass = computed(() => {\r\n const themeClass = this.theme();\r\n const className = this.className();\r\n return Array.from(new Set(['sdc-neighbors', themeClass, className]))\r\n .filter(Boolean)\r\n .join(' ');\r\n });\r\n\r\n // COMPONENT STATE\r\n private readonly subscriptions: Subscription[] = [];\r\n\r\n // COMPUTED STATE\r\n protected readonly leftSectionId = computed(() => {\r\n try {\r\n const currentId = this.currentSectionId();\r\n if (!currentId) return null;\r\n return this.findAvailableNeighbor('prev', currentId);\r\n } catch (error) {\r\n return null;\r\n }\r\n });\r\n\r\n protected readonly rightSectionId = computed(() => {\r\n try {\r\n const currentId = this.currentSectionId();\r\n if (!currentId) return null;\r\n return this.findAvailableNeighbor('next', currentId);\r\n } catch (error) {\r\n return null;\r\n }\r\n });\r\n\r\n protected readonly currentSectionLabel = computed(() => {\r\n try {\r\n const currentId = this.currentSectionId();\r\n if (!currentId) return 'Loading';\r\n\r\n // Translate TDC ID to MMC ID for display\r\n const mmcId = this.translateTdcToMmc()(currentId);\r\n if (!mmcId) return currentId; // Fallback to TDC ID if translation fails\r\n\r\n // Extract section number from MMC ID (assuming format like \"S_31\" or similar)\r\n return mmcId.replace(/^S_/, '');\r\n } catch (error) {\r\n return 'Loading';\r\n }\r\n });\r\n\r\n protected readonly leftSectionLabel = computed(() => {\r\n try {\r\n const leftId = this.leftSectionId();\r\n if (!leftId) return null;\r\n\r\n // Translate TDC ID to MMC ID for display\r\n const mmcId = this.translateTdcToMmc()(leftId);\r\n if (!mmcId) return leftId; // Fallback to TDC ID if translation fails\r\n\r\n // Extract section number from MMC ID\r\n return mmcId.replace(/^S_/, '');\r\n } catch (error) {\r\n return null;\r\n }\r\n });\r\n\r\n protected readonly rightSectionLabel = computed(() => {\r\n try {\r\n const rightId = this.rightSectionId();\r\n if (!rightId) return null;\r\n\r\n // Translate TDC ID to MMC ID for display\r\n const mmcId = this.translateTdcToMmc()(rightId);\r\n if (!mmcId) return rightId; // Fallback to TDC ID if translation fails\r\n\r\n // Extract section number from MMC ID\r\n return mmcId.replace(/^S_/, '');\r\n } catch (error) {\r\n return null;\r\n }\r\n });\r\n\r\n // NEIGHBOR RESOLUTION ALGORITHM\r\n private findAvailableNeighbor(type: Direction, currentSectionTdcId: string): string \| null {\r\n try {\r\n const neighborKey = type === 'prev' ? 'l' : 'r';\r\n const noNeighborValue = 'none';\r\n\r\n // 1. Translate TDC → MMC\r\n const currentSectionMmcId = this.translateTdcToMmc()(currentSectionTdcId);\r\n if (!currentSectionMmcId) return null;\r\n\r\n // 2. Look up neighbor in data\r\n const neighbors = this.neighborsData();\r\n const neighbor = neighbors[currentSectionMmcId];\r\n const neighborSectionMmcId = neighbor ? neighbor[neighborKey] : noNeighborValue;\r\n\r\n // 3. Handle 'none' boundary\r\n if (neighborSectionMmcId === noNeighborValue) {\r\n return null;\r\n }\r\n\r\n // 4. Translate MMC → TDC\r\n const neighborSectionTdcId = this.translateMmcToTdc()(neighborSectionMmcId);\r\n if (!neighborSectionTdcId) return null;\r\n\r\n // 5. Check availability\r\n if (this.hasAvailability()(neighborSectionTdcId)) {\r\n return neighborSectionTdcId;\r\n }\r\n\r\n // 6. Recursively find next available (skip unavailable sections)\r\n return this.findAvailableNeighbor(type, neighborSectionTdcId);\r\n } catch (error) {\r\n return null;\r\n }\r\n }\r\n\r\n // GETTERS\r\n public get leftSection(): string \| null {\r\n return this.leftSectionId();\r\n }\r\n\r\n public get rightSection(): string \| null {\r\n return this.rightSectionId();\r\n }\r\n\r\n public get section(): string \| null {\r\n return this.currentSectionLabel();\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.subscriptions.forEach((sub: Subscription): void => sub.unsubscribe());\r\n }\r\n\r\n // METHODS\r\n public navigateToSection(section: string): void {\r\n if (section === 'none' \|\| !section) {\r\n return;\r\n }\r\n\r\n const leftId = this.leftSectionId();\r\n const rightId = this.rightSectionId();\r\n\r\n let direction: Direction;\r\n if (section === leftId) {\r\n direction = 'prev';\r\n } else if (section === rightId) {\r\n direction = 'next';\r\n } else {\r\n return;\r\n }\r\n\r\n this.sectionChange.emit({ direction, sectionId: section });\r\n }\r\n}\r\n","<div #neighborsContainer class=\"neighbors-container\" [class]=\"computedClass()\" [class.hidden]=\"!showElement()\">\n <!-- LEFT SECTION BUTTON -->\n @if (leftSection) {\n <div\n class=\"neighbor-button-left neighbor-button\"\n [class.is-none]=\"leftSection === 'none'\"\n tabindex=\"0\"\n (click)=\"navigateToSection(leftSection!)\"\n (keypress.enter)=\"navigateToSection(leftSection!)\">\n <!-- ARROW ICON -->\n <div class=\"neighbor-button-icon\">\n <i>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"3\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5 8.25 12l7.5-7.5\" />\n </svg>\n </i>\n </div>\n\n <!-- SECTION LABEL -->\n <div class=\"neighbor-button-label\">\n <p>\n <span class=\"prefix\"> {{ modeLr() ? 'Left Section' : 'Section' }}  </span>\n @if (leftSection !== 'none' && !modeLr()) {\n <span #leftSectionNumber class=\"section-number\">\n {{ leftSectionLabel() }}\n </span>\n }\n </p>\n </div>\n </div>\n }\n\n <!-- CURRENT SECTION TEXT -->\n <div class=\"current-section-wrapper\">\n @if (isLoading()) {\n <p class=\"current-section-loading\">\n <span>Loading</span>\n </p>\n } @else {\n @if (section) {\n <h3 class=\"current-section-text\">\n <span class=\"prefix\">Section </span>\n <span #currentSection class=\"section-number\">{{ section }}</span>\n </h3>\n }\n }\n </div>\n\n <!-- RIGHT SECTION BUTTON -->\n @if (rightSection) {\n <div\n class=\"neighbor-button-right neighbor-button\"\n [class.is-none]=\"rightSection === 'none'\"\n tabindex=\"1\"\n (click)=\"navigateToSection(rightSection!)\"\n (keypress.enter)=\"navigateToSection(rightSection!)\">\n <!-- ARROW ICON -->\n <div class=\"neighbor-button-icon\">\n <i>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"3\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m8.25 4.5 7.5 7.5-7.5 7.5\" />\n </svg>\n </i>\n </div>\n\n <!-- SECTION LABEL -->\n <div class=\"neighbor-button-label\">\n <p>\n <span class=\"prefix\"> {{ modeLr() ? 'Right Section' : 'Section' }}  </span>\n @if (rightSection !== 'none' && !modeLr()) {\n <span #rightSectionNumber class=\"section-number\">\n {{ rightSectionLabel() }}\n </span>\n }\n </p>\n </div>\n </div>\n }\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"3ddv-software-division-components-dvm-neighbors.mjs","sources":["../../dvm/neighbors/neighbors.component.ts","../../dvm/neighbors/neighbors.component.html","../../dvm/neighbors/3ddv-software-division-components-dvm-neighbors.ts"],"sourcesContent":["import { ThemeClass } from '@3ddv/software-division-components/shared';\r\nimport {\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n Component,\r\n computed,\r\n ElementRef,\r\n EventEmitter,\r\n inject,\r\n input,\r\n OnDestroy,\r\n Output,\r\n ViewChild,\r\n} from '@angular/core';\r\nimport { Subscription } from 'rxjs';\r\nimport { Direction, HasAvailabilityFn, NeighborsData, SectionChangeEvent, TranslateSectionIdFn } from './types';\r\n\r\n@Component({\r\n selector: 'sdc-neighbors',\r\n standalone: true,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n templateUrl: './neighbors.component.html',\r\n styleUrl: './neighbors.component.css',\r\n})\r\nexport class NeighborsComponent implements OnDestroy {\r\n // VIEWCHILD\r\n @ViewChild('neighborsContainer')\r\n public readonly neighborsContainer!: ElementRef<HTMLDivElement>;\r\n\r\n @ViewChild('currentSection', { static: false })\r\n public readonly currentSection!: ElementRef<HTMLSpanElement>;\r\n\r\n @ViewChild('currentSection3d', { static: false })\r\n public readonly currentSection3d!: ElementRef<HTMLSpanElement>;\r\n\r\n @ViewChild('leftSectionNumber', { static: false })\r\n public readonly leftSectionElement!: ElementRef<HTMLSpanElement>;\r\n\r\n @ViewChild('rightSectionNumber', { static: false })\r\n public readonly rightSectionElement!: ElementRef<HTMLSpanElement>;\r\n\r\n // SERVICES changes\r\n private readonly cdr: ChangeDetectorRef = inject(ChangeDetectorRef);\r\n\r\n // REQUIRED INPUTS\r\n public readonly neighborsData = input.required<NeighborsData>();\r\n public readonly currentSectionId = input.required<string \| null>();\r\n public readonly translateTdcToMmc = input.required<TranslateSectionIdFn>();\r\n public readonly translateMmcToTdc = input.required<TranslateSectionIdFn>();\r\n public readonly hasAvailability = input.required<HasAvailabilityFn>();\r\n\r\n // OPTIONAL INPUTS\r\n public readonly isLoading = input<boolean>(false);\r\n public readonly showElement = input<boolean>(true);\r\n public readonly modeLr = input<boolean>(false);\r\n public readonly className = input<string>('');\r\n public readonly theme = input<ThemeClass>('theme-sdc');\r\n\r\n // OUTPUTS\r\n @Output() sectionChange = new EventEmitter<SectionChangeEvent>();\r\n\r\n /*\r\n Computed class string that combines theme and user classes.\r\n /\r\n protected readonly computedClass = computed(() => {\r\n const themeClass = this.theme();\r\n const className = this.className();\r\n return Array.from(new Set(['sdc-neighbors', themeClass, className]))\r\n .filter(Boolean)\r\n .join(' ');\r\n });\r\n\r\n // COMPONENT STATE\r\n private readonly subscriptions: Subscription[] = [];\r\n\r\n // COMPUTED STATE\r\n protected readonly leftSectionId = computed(() => {\r\n try {\r\n const currentId = this.currentSectionId();\r\n if (!currentId) return null;\r\n return this.findAvailableNeighbor('prev', currentId);\r\n } catch (error) {\r\n return null;\r\n }\r\n });\r\n\r\n protected readonly rightSectionId = computed(() => {\r\n try {\r\n const currentId = this.currentSectionId();\r\n if (!currentId) return null;\r\n return this.findAvailableNeighbor('next', currentId);\r\n } catch (error) {\r\n return null;\r\n }\r\n });\r\n\r\n protected readonly currentSectionLabel = computed(() => {\r\n try {\r\n const currentId = this.currentSectionId();\r\n if (!currentId) return 'Loading';\r\n\r\n // Translate TDC ID to MMC ID for display\r\n const mmcId = this.translateTdcToMmc()(currentId);\r\n if (!mmcId) return currentId; // Fallback to TDC ID if translation fails\r\n\r\n // Extract section number from MMC ID (assuming format like \"S_31\" or similar)\r\n return mmcId.replace(/^S_/, '');\r\n } catch (error) {\r\n return 'Loading';\r\n }\r\n });\r\n\r\n protected readonly leftSectionLabel = computed(() => {\r\n try {\r\n const leftId = this.leftSectionId();\r\n if (!leftId) return null;\r\n\r\n // Translate TDC ID to MMC ID for display\r\n const mmcId = this.translateTdcToMmc()(leftId);\r\n if (!mmcId) return leftId; // Fallback to TDC ID if translation fails\r\n\r\n // Extract section number from MMC ID\r\n return mmcId.replace(/^S_/, '');\r\n } catch (error) {\r\n return null;\r\n }\r\n });\r\n\r\n protected readonly rightSectionLabel = computed(() => {\r\n try {\r\n const rightId = this.rightSectionId();\r\n if (!rightId) return null;\r\n\r\n // Translate TDC ID to MMC ID for display\r\n const mmcId = this.translateTdcToMmc()(rightId);\r\n if (!mmcId) return rightId; // Fallback to TDC ID if translation fails\r\n\r\n // Extract section number from MMC ID\r\n return mmcId.replace(/^S_/, '');\r\n } catch (error) {\r\n return null;\r\n }\r\n });\r\n\r\n // NEIGHBOR RESOLUTION ALGORITHM\r\n private findAvailableNeighbor(type: Direction, currentSectionTdcId: string): string \| null {\r\n try {\r\n const neighborKey = type === 'prev' ? 'l' : 'r';\r\n const noNeighborValue = 'none';\r\n\r\n // 1. Translate TDC → MMC\r\n const currentSectionMmcId = this.translateTdcToMmc()(currentSectionTdcId);\r\n if (!currentSectionMmcId) return null;\r\n\r\n // 2. Look up neighbor in data\r\n const neighbors = this.neighborsData();\r\n const neighbor = neighbors[currentSectionMmcId];\r\n const neighborSectionMmcId = neighbor ? neighbor[neighborKey] : noNeighborValue;\r\n\r\n // 3. Handle 'none' boundary\r\n if (neighborSectionMmcId === noNeighborValue) {\r\n return null;\r\n }\r\n\r\n // 4. Translate MMC → TDC\r\n const neighborSectionTdcId = this.translateMmcToTdc()(neighborSectionMmcId);\r\n if (!neighborSectionTdcId) return null;\r\n\r\n // 5. Check availability\r\n if (this.hasAvailability()(neighborSectionTdcId)) {\r\n return neighborSectionTdcId;\r\n }\r\n\r\n // 6. Recursively find next available (skip unavailable sections)\r\n return this.findAvailableNeighbor(type, neighborSectionTdcId);\r\n } catch (error) {\r\n return null;\r\n }\r\n }\r\n\r\n // GETTERS\r\n public get leftSection(): string \| null {\r\n return this.leftSectionId();\r\n }\r\n\r\n public get rightSection(): string \| null {\r\n return this.rightSectionId();\r\n }\r\n\r\n public get section(): string \| null {\r\n return this.currentSectionLabel();\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.subscriptions.forEach((sub: Subscription): void => sub.unsubscribe());\r\n }\r\n\r\n // METHODS\r\n public navigateToSection(section: string): void {\r\n if (section === 'none' \|\| !section) {\r\n return;\r\n }\r\n\r\n const leftId = this.leftSectionId();\r\n const rightId = this.rightSectionId();\r\n\r\n let direction: Direction;\r\n if (section === leftId) {\r\n direction = 'prev';\r\n } else if (section === rightId) {\r\n direction = 'next';\r\n } else {\r\n return;\r\n }\r\n\r\n this.sectionChange.emit({ direction, sectionId: section });\r\n }\r\n}\r\n","<div #neighborsContainer class=\"neighbors-container\" [class]=\"computedClass()\" [class.hidden]=\"!showElement()\">\n <!-- LEFT SECTION BUTTON -->\n @if (leftSection) {\n <div\n class=\"neighbor-button-left neighbor-button\"\n [class.is-none]=\"leftSection === 'none'\"\n tabindex=\"0\"\n (click)=\"navigateToSection(leftSection!)\"\n (keypress.enter)=\"navigateToSection(leftSection!)\">\n <!-- ARROW ICON -->\n <div class=\"neighbor-button-icon\">\n <i>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"3\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5 8.25 12l7.5-7.5\" />\n </svg>\n </i>\n </div>\n\n <!-- SECTION LABEL -->\n <div class=\"neighbor-button-label\">\n <p>\n <span class=\"prefix\"> {{ modeLr() ? 'Left Section' : 'Section' }}  </span>\n @if (leftSection !== 'none' && !modeLr()) {\n <span #leftSectionNumber class=\"section-number\">\n {{ leftSectionLabel() }}\n </span>\n }\n </p>\n </div>\n </div>\n }\n\n <!-- CURRENT SECTION TEXT -->\n <div class=\"current-section-wrapper\">\n @if (isLoading()) {\n <p class=\"current-section-loading\">\n <span>Loading</span>\n </p>\n } @else {\n @if (section) {\n <h3 class=\"current-section-text\">\n <span class=\"prefix\">Section </span>\n <span #currentSection class=\"section-number\">{{ section }}</span>\n </h3>\n }\n }\n </div>\n\n <!-- RIGHT SECTION BUTTON -->\n @if (rightSection) {\n <div\n class=\"neighbor-button-right neighbor-button\"\n [class.is-none]=\"rightSection === 'none'\"\n tabindex=\"1\"\n (click)=\"navigateToSection(rightSection!)\"\n (keypress.enter)=\"navigateToSection(rightSection!)\">\n <!-- ARROW ICON -->\n <div class=\"neighbor-button-icon\">\n <i>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"3\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m8.25 4.5 7.5 7.5-7.5 7.5\" />\n </svg>\n </i>\n </div>\n\n <!-- SECTION LABEL -->\n <div class=\"neighbor-button-label\">\n <p>\n <span class=\"prefix\"> {{ modeLr() ? 'Right Section' : 'Section' }}  </span>\n @if (rightSection !== 'none' && !modeLr()) {\n <span #rightSectionNumber class=\"section-number\">\n {{ rightSectionLabel() }}\n </span>\n }\n </p>\n </div>\n </div>\n }\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/3ddv-software-division-components-generic-add-digital-wallet.mjs CHANGED Viewed

@@ -1,4 +1,5 @@
-import { BraintreeComponent } from '@3ddv/software-division-components/generic/braintree';
+import { BraintreeTrigger, BraintreeComponent } from '@3ddv/software-division-components/generic/braintree';
+import { ButtonComponent } from '@3ddv/software-division-components/generic/button';
 import * as i0 from '@angular/core';
 import { input, output, inject, DestroyRef, ChangeDetectionStrategy, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -17,24 +18,31 @@ class AddDigitalWalletComponent {
     useDefaultCard = output();
     // STATE
     useDefaultCardCtrl = new FormControl(false);
+    trigger = new BraintreeTrigger();
     destroyRef = inject(DestroyRef);
     ngOnInit() {
         this.useDefaultCardCtrl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
             this.useDefaultCard.emit(!!value);
         });
     }
-    onDigitalWalletSubmitted(data) {
-        this.braintreePayload.emit(data);
+    async onSaveCard() {
+        try {
+            const payload = await this.trigger.requestPayment();
+            this.braintreePayload.emit(payload);
+        }
+        catch {
+            // braintree component logs errors internally
+        }
     }
     onCancel() {
         this.cancelClick.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AddDigitalWalletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: AddDigitalWalletComponent, isStandalone: true, selector: "sdc-add-digital-wallet", inputs: { token: { classPropertyName: "token", publicName: "token", isSignal: true, isRequired: true, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, showCancelButton: { classPropertyName: "showCancelButton", publicName: "showCancelButton", isSignal: true, isRequired: false, transformFunction: null }, showIsDefaultCardCheckbox: { classPropertyName: "showIsDefaultCardCheckbox", publicName: "showIsDefaultCardCheckbox", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { braintreePayload: "braintreePayload", cancelClick: "cancelClick", useDefaultCard: "useDefaultCard" }, ngImport: i0, template: "<div class=\"sdc-digital-wallet theme-sdc\" id=\"add-patron-card-modal\">\n  <div class=\"sdc-digital-wallet__inner\">\n    <h2 class=\"sdc-digital-wallet__title\">ADD YOUR CARD</h2>\n\n    <sdc-braintree\n      class=\"sdc-digital-wallet__braintree\"\n      [isDigitalWalletPayment]=\"true\"\n      [token]=\"token()\"\n      (onSubmit)=\"onDigitalWalletSubmitted($event)\">\n      <div>\n        @if (showIsDefaultCardCheckbox()) {\n          <label\n            id=\"braintree-use-default-card-checkbox\"\n            class=\"flex justify-center py-4 sdc-digital-wallet__default-card\">\n            <input type=\"checkbox\" [formControl]=\"useDefaultCardCtrl\" />\n            Make this my default card\n          </label>\n        }\n\n        @if (errorMessage()) {\n          <p class=\"sdc-digital-wallet__error\">\n            {{ errorMessage() || 'Something bad happened' }}\n          </p>\n        }\n\n        <div class=\"flex justify-center gap-4 pt-4\">\n          @if (showCancelButton()) {\n            <button\n              class=\"disabled:opacity-30 mr-3 md:mr-6 disabled:hover:transform-none hover:scale-95 transition-transform sdc-digital-wallet__cancel btn-main-reverse\"\n              id=\"braintree-cancel-button\"\n              type=\"button\"\n              (click)=\"onCancel()\">\n              Cancel\n            </button>\n          }\n          <button\n            class=\"disabled:opacity-30 disabled:hover:transform-none hover:scale-95 transition-transform sdc-digital-wallet__submit btn-main\"\n            id=\"braintree-save-button\"\n            type=\"button\">\n            Save Card\n          </button>\n        </div>\n      </div>\n    </sdc-braintree>\n  </div>\n</div>\n", styles: [".sdc-digital-wallet{--sdc-digital-wallet-max-width: 32rem;--sdc-digital-wallet-padding: var(--space-2) var(--space-0);--sdc-digital-wallet-title-size: var(--text-lg);--sdc-digital-wallet-title-weight: var(--font-bold);--sdc-digital-wallet-title-leading: var(--leading-tight);--sdc-digital-wallet-braintree-max-h: 24rem;--sdc-digital-wallet-braintree-overflow: auto;--sdc-digital-wallet-submit-radius: var(--radius-3xl);--sdc-digital-wallet-submit-text-size: var(--text-base);--sdc-digital-wallet-submit-text-weight: var(--font-bold);--sdc-digital-wallet-submit-text-color: var(--color-secondary-active);--sdc-digital-wallet-error-size: 1rem;--sdc-digital-wallet-error-color: var(--color-danger);position:relative;overflow:hidden;width:100%;max-width:var(--sdc-digital-wallet-max-width);padding:var(--sdc-digital-wallet-padding);margin:0 auto}.sdc-digital-wallet__inner{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;overflow-y:auto}.sdc-digital-wallet__title{font-size:var(--sdc-digital-wallet-title-size);font-weight:var(--sdc-digital-wallet-title-weight);line-height:var(--sdc-digital-wallet-title-leading)}.sdc-digital-wallet__braintree{max-height:var(--sdc-digital-wallet-braintree-max-h);overflow-y:var(--sdc-digital-wallet-braintree-overflow)}.sdc-digital-wallet__submit{border-radius:var(--sdc-digital-wallet-submit-radius);font-size:var(--sdc-digital-wallet-submit-text-size);font-weight:var(--sdc-digital-wallet-submit-text-weight);color:hsl(var(--sdc-digital-wallet-submit-text-color));white-space:nowrap;cursor:pointer;outline:0}.sdc-digital-wallet__default-card{display:flex;align-items:center;gap:.5rem;margin-top:1rem}.sdc-digital-wallet__error{font-size:var(--sdc-digital-wallet-error-size);color:hsl(var(--sdc-digital-wallet-error-color))}@media(min-width:1024px){.sdc-digital-wallet{--sdc-digital-wallet-padding: var(--space-6) var(--space-6);--sdc-digital-wallet-title-size: var(--text-xl);--sdc-digital-wallet-braintree-max-h: none}}\n"], dependencies: [{ kind: "component", type: BraintreeComponent, selector: "sdc-braintree", inputs: ["token", "isDigitalWalletPayment"], outputs: ["onSubmit"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: AddDigitalWalletComponent, isStandalone: true, selector: "sdc-add-digital-wallet", inputs: { token: { classPropertyName: "token", publicName: "token", isSignal: true, isRequired: true, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, showCancelButton: { classPropertyName: "showCancelButton", publicName: "showCancelButton", isSignal: true, isRequired: false, transformFunction: null }, showIsDefaultCardCheckbox: { classPropertyName: "showIsDefaultCardCheckbox", publicName: "showIsDefaultCardCheckbox", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { braintreePayload: "braintreePayload", cancelClick: "cancelClick", useDefaultCard: "useDefaultCard" }, ngImport: i0, template: "<div class=\"sdc-digital-wallet theme-sdc\" id=\"add-patron-card-modal\">\n  <div class=\"sdc-digital-wallet__inner\">\n    <h2 class=\"sdc-digital-wallet__title\">ADD YOUR CARD</h2>\n\n    <sdc-braintree\n      class=\"sdc-digital-wallet__braintree\"\n      [isDigitalWalletPayment]=\"true\"\n      [token]=\"token()\"\n      [trigger]=\"trigger\">\n      <div>\n        @if (showIsDefaultCardCheckbox()) {\n          <label\n            id=\"braintree-use-default-card-checkbox\"\n            class=\"flex justify-center py-4 sdc-digital-wallet__default-card\">\n            <input type=\"checkbox\" class=\"sdc-digital-wallet__checkbox\" [formControl]=\"useDefaultCardCtrl\" />\n            Make this my default card\n          </label>\n        }\n\n        @if (errorMessage()) {\n          <p class=\"sdc-digital-wallet__error\">\n            {{ errorMessage() }}\n          </p>\n        }\n\n        <div class=\"flex justify-center gap-4 pt-4\">\n          @if (showCancelButton()) {\n            <sdc-button\n              className=\"sdc-digital-wallet__cancel\"\n              id=\"braintree-cancel-button\"\n              variant=\"outline\"\n              (onClick)=\"onCancel()\">\n              Cancel\n            </sdc-button>\n          }\n          <sdc-button\n            className=\"sdc-digital-wallet__submit\"\n            id=\"braintree-save-button\"\n            variant=\"accent\"\n            (onClick)=\"onSaveCard()\">\n            Save Card\n          </sdc-button>\n        </div>\n      </div>\n    </sdc-braintree>\n  </div>\n</div>\n", styles: [".sdc-digital-wallet{--sdc-digital-wallet-max-width: 32rem;--sdc-digital-wallet-padding: var(--space-2) var(--space-0);--sdc-digital-wallet-title-size: var(--text-lg);--sdc-digital-wallet-title-weight: var(--font-bold);--sdc-digital-wallet-title-leading: var(--leading-tight);--sdc-digital-wallet-braintree-max-h: 24rem;--sdc-digital-wallet-braintree-overflow: auto;--sdc-digital-wallet-submit-radius: var(--radius-3xl);--sdc-digital-wallet-submit-text-size: var(--text-base);--sdc-digital-wallet-submit-text-weight: var(--font-bold);--sdc-digital-wallet-submit-text-color: var(--color-white);--sdc-digital-wallet-submit-bg-color: var(--color-accent);--sdc-digital-wallet-error-size: 1rem;--sdc-digital-wallet-error-color: var(--color-danger);position:relative;overflow:hidden;width:100%;max-width:var(--sdc-digital-wallet-max-width);padding:var(--sdc-digital-wallet-padding);margin:0 auto}.sdc-digital-wallet__inner{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;overflow-y:auto}.sdc-digital-wallet__title{font-size:var(--sdc-digital-wallet-title-size);font-weight:var(--sdc-digital-wallet-title-weight);line-height:var(--sdc-digital-wallet-title-leading)}.sdc-digital-wallet__braintree{max-height:var(--sdc-digital-wallet-braintree-max-h);overflow-y:var(--sdc-digital-wallet-braintree-overflow)}.sdc-digital-wallet__submit{border-radius:var(--sdc-digital-wallet-submit-radius);font-size:var(--sdc-digital-wallet-submit-text-size);font-weight:var(--sdc-digital-wallet-submit-text-weight);color:hsl(var(--sdc-digital-wallet-submit-text-color));background-color:hsl(var(--sdc-digital-wallet-submit-bg-color));white-space:nowrap;cursor:pointer;outline:0}.sdc-digital-wallet__checkbox{padding:.125rem;width:1rem;height:1rem;accent-color:var(--color-accent)}.sdc-digital-wallet__default-card{display:flex;align-items:center;gap:.5rem;margin-top:1rem}.sdc-digital-wallet__error{font-size:var(--sdc-digital-wallet-error-size);color:hsl(var(--sdc-digital-wallet-error-color))}@media(min-width:1024px){.sdc-digital-wallet{--sdc-digital-wallet-padding: var(--space-6) var(--space-6);--sdc-digital-wallet-title-size: var(--text-xl);--sdc-digital-wallet-braintree-max-h: none}}\n"], dependencies: [{ kind: "component", type: BraintreeComponent, selector: "sdc-braintree", inputs: ["token", "isDigitalWalletPayment", "trigger"], outputs: ["onSubmit"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "sdc-button", inputs: ["theme", "styleClass", "className", "variant", "size", "type", "disabled", "ripple", "debounce"], outputs: ["onClick", "onFocus", "onBlur", "isDebounced"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AddDigitalWalletComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'sdc-add-digital-wallet', changeDetection: ChangeDetectionStrategy.OnPush, imports: [BraintreeComponent, ReactiveFormsModule], template: "<div class=\"sdc-digital-wallet theme-sdc\" id=\"add-patron-card-modal\">\n  <div class=\"sdc-digital-wallet__inner\">\n    <h2 class=\"sdc-digital-wallet__title\">ADD YOUR CARD</h2>\n\n    <sdc-braintree\n      class=\"sdc-digital-wallet__braintree\"\n      [isDigitalWalletPayment]=\"true\"\n      [token]=\"token()\"\n      (onSubmit)=\"onDigitalWalletSubmitted($event)\">\n      <div>\n        @if (showIsDefaultCardCheckbox()) {\n          <label\n            id=\"braintree-use-default-card-checkbox\"\n            class=\"flex justify-center py-4 sdc-digital-wallet__default-card\">\n            <input type=\"checkbox\" [formControl]=\"useDefaultCardCtrl\" />\n            Make this my default card\n          </label>\n        }\n\n        @if (errorMessage()) {\n          <p class=\"sdc-digital-wallet__error\">\n            {{ errorMessage() || 'Something bad happened' }}\n          </p>\n        }\n\n        <div class=\"flex justify-center gap-4 pt-4\">\n          @if (showCancelButton()) {\n            <button\n              class=\"disabled:opacity-30 mr-3 md:mr-6 disabled:hover:transform-none hover:scale-95 transition-transform sdc-digital-wallet__cancel btn-main-reverse\"\n              id=\"braintree-cancel-button\"\n              type=\"button\"\n              (click)=\"onCancel()\">\n              Cancel\n            </button>\n          }\n          <button\n            class=\"disabled:opacity-30 disabled:hover:transform-none hover:scale-95 transition-transform sdc-digital-wallet__submit btn-main\"\n            id=\"braintree-save-button\"\n            type=\"button\">\n            Save Card\n          </button>\n        </div>\n      </div>\n    </sdc-braintree>\n  </div>\n</div>\n", styles: [".sdc-digital-wallet{--sdc-digital-wallet-max-width: 32rem;--sdc-digital-wallet-padding: var(--space-2) var(--space-0);--sdc-digital-wallet-title-size: var(--text-lg);--sdc-digital-wallet-title-weight: var(--font-bold);--sdc-digital-wallet-title-leading: var(--leading-tight);--sdc-digital-wallet-braintree-max-h: 24rem;--sdc-digital-wallet-braintree-overflow: auto;--sdc-digital-wallet-submit-radius: var(--radius-3xl);--sdc-digital-wallet-submit-text-size: var(--text-base);--sdc-digital-wallet-submit-text-weight: var(--font-bold);--sdc-digital-wallet-submit-text-color: var(--color-secondary-active);--sdc-digital-wallet-error-size: 1rem;--sdc-digital-wallet-error-color: var(--color-danger);position:relative;overflow:hidden;width:100%;max-width:var(--sdc-digital-wallet-max-width);padding:var(--sdc-digital-wallet-padding);margin:0 auto}.sdc-digital-wallet__inner{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;overflow-y:auto}.sdc-digital-wallet__title{font-size:var(--sdc-digital-wallet-title-size);font-weight:var(--sdc-digital-wallet-title-weight);line-height:var(--sdc-digital-wallet-title-leading)}.sdc-digital-wallet__braintree{max-height:var(--sdc-digital-wallet-braintree-max-h);overflow-y:var(--sdc-digital-wallet-braintree-overflow)}.sdc-digital-wallet__submit{border-radius:var(--sdc-digital-wallet-submit-radius);font-size:var(--sdc-digital-wallet-submit-text-size);font-weight:var(--sdc-digital-wallet-submit-text-weight);color:hsl(var(--sdc-digital-wallet-submit-text-color));white-space:nowrap;cursor:pointer;outline:0}.sdc-digital-wallet__default-card{display:flex;align-items:center;gap:.5rem;margin-top:1rem}.sdc-digital-wallet__error{font-size:var(--sdc-digital-wallet-error-size);color:hsl(var(--sdc-digital-wallet-error-color))}@media(min-width:1024px){.sdc-digital-wallet{--sdc-digital-wallet-padding: var(--space-6) var(--space-6);--sdc-digital-wallet-title-size: var(--text-xl);--sdc-digital-wallet-braintree-max-h: none}}\n"] }]
+            args: [{ standalone: true, selector: 'sdc-add-digital-wallet', changeDetection: ChangeDetectionStrategy.OnPush, imports: [BraintreeComponent, ReactiveFormsModule, ButtonComponent], template: "<div class=\"sdc-digital-wallet theme-sdc\" id=\"add-patron-card-modal\">\n  <div class=\"sdc-digital-wallet__inner\">\n    <h2 class=\"sdc-digital-wallet__title\">ADD YOUR CARD</h2>\n\n    <sdc-braintree\n      class=\"sdc-digital-wallet__braintree\"\n      [isDigitalWalletPayment]=\"true\"\n      [token]=\"token()\"\n      [trigger]=\"trigger\">\n      <div>\n        @if (showIsDefaultCardCheckbox()) {\n          <label\n            id=\"braintree-use-default-card-checkbox\"\n            class=\"flex justify-center py-4 sdc-digital-wallet__default-card\">\n            <input type=\"checkbox\" class=\"sdc-digital-wallet__checkbox\" [formControl]=\"useDefaultCardCtrl\" />\n            Make this my default card\n          </label>\n        }\n\n        @if (errorMessage()) {\n          <p class=\"sdc-digital-wallet__error\">\n            {{ errorMessage() }}\n          </p>\n        }\n\n        <div class=\"flex justify-center gap-4 pt-4\">\n          @if (showCancelButton()) {\n            <sdc-button\n              className=\"sdc-digital-wallet__cancel\"\n              id=\"braintree-cancel-button\"\n              variant=\"outline\"\n              (onClick)=\"onCancel()\">\n              Cancel\n            </sdc-button>\n          }\n          <sdc-button\n            className=\"sdc-digital-wallet__submit\"\n            id=\"braintree-save-button\"\n            variant=\"accent\"\n            (onClick)=\"onSaveCard()\">\n            Save Card\n          </sdc-button>\n        </div>\n      </div>\n    </sdc-braintree>\n  </div>\n</div>\n", styles: [".sdc-digital-wallet{--sdc-digital-wallet-max-width: 32rem;--sdc-digital-wallet-padding: var(--space-2) var(--space-0);--sdc-digital-wallet-title-size: var(--text-lg);--sdc-digital-wallet-title-weight: var(--font-bold);--sdc-digital-wallet-title-leading: var(--leading-tight);--sdc-digital-wallet-braintree-max-h: 24rem;--sdc-digital-wallet-braintree-overflow: auto;--sdc-digital-wallet-submit-radius: var(--radius-3xl);--sdc-digital-wallet-submit-text-size: var(--text-base);--sdc-digital-wallet-submit-text-weight: var(--font-bold);--sdc-digital-wallet-submit-text-color: var(--color-white);--sdc-digital-wallet-submit-bg-color: var(--color-accent);--sdc-digital-wallet-error-size: 1rem;--sdc-digital-wallet-error-color: var(--color-danger);position:relative;overflow:hidden;width:100%;max-width:var(--sdc-digital-wallet-max-width);padding:var(--sdc-digital-wallet-padding);margin:0 auto}.sdc-digital-wallet__inner{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;overflow-y:auto}.sdc-digital-wallet__title{font-size:var(--sdc-digital-wallet-title-size);font-weight:var(--sdc-digital-wallet-title-weight);line-height:var(--sdc-digital-wallet-title-leading)}.sdc-digital-wallet__braintree{max-height:var(--sdc-digital-wallet-braintree-max-h);overflow-y:var(--sdc-digital-wallet-braintree-overflow)}.sdc-digital-wallet__submit{border-radius:var(--sdc-digital-wallet-submit-radius);font-size:var(--sdc-digital-wallet-submit-text-size);font-weight:var(--sdc-digital-wallet-submit-text-weight);color:hsl(var(--sdc-digital-wallet-submit-text-color));background-color:hsl(var(--sdc-digital-wallet-submit-bg-color));white-space:nowrap;cursor:pointer;outline:0}.sdc-digital-wallet__checkbox{padding:.125rem;width:1rem;height:1rem;accent-color:var(--color-accent)}.sdc-digital-wallet__default-card{display:flex;align-items:center;gap:.5rem;margin-top:1rem}.sdc-digital-wallet__error{font-size:var(--sdc-digital-wallet-error-size);color:hsl(var(--sdc-digital-wallet-error-color))}@media(min-width:1024px){.sdc-digital-wallet{--sdc-digital-wallet-padding: var(--space-6) var(--space-6);--sdc-digital-wallet-title-size: var(--text-xl);--sdc-digital-wallet-braintree-max-h: none}}\n"] }]
         }], propDecorators: { token: [{ type: i0.Input, args: [{ isSignal: true, alias: "token", required: true }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], showCancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancelButton", required: false }] }], showIsDefaultCardCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIsDefaultCardCheckbox", required: false }] }], braintreePayload: [{ type: i0.Output, args: ["braintreePayload"] }], cancelClick: [{ type: i0.Output, args: ["cancelClick"] }], useDefaultCard: [{ type: i0.Output, args: ["useDefaultCard"] }] } });
 /**

package/fesm2022/3ddv-software-division-components-generic-add-digital-wallet.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"3ddv-software-division-components-generic-add-digital-wallet.mjs","sources":["../../generic/add-digital-wallet/add-digital-wallet.component.ts","../../generic/add-digital-wallet/add-digital-wallet.component.html","../../generic/add-digital-wallet/3ddv-software-division-components-generic-add-digital-wallet.ts"],"sourcesContent":["import { BraintreeComponent, BraintreePayload } from '@3ddv/software-division-components/generic/braintree';\nimport { ChangeDetectionStrategy, Component, DestroyRef, OnInit, inject, input, output } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\n\n@Component({\n standalone: true,\n selector: 'sdc-add-digital-wallet',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [BraintreeComponent, ReactiveFormsModule],\n templateUrl: './add-digital-wallet.component.html',\n styleUrls: ['./add-digital-wallet.component.css'],\n})\nexport class AddDigitalWalletComponent implements OnInit {\n // INPUTS\n public token = input.required<string>();\n public errorMessage = input<string \| null>(null);\n public showCancelButton = input<boolean>(false);\n public showIsDefaultCardCheckbox = input<boolean>(false);\n\n // OUTPUTS\n public readonly braintreePayload = output<BraintreePayload>();\n public readonly cancelClick = output<void>();\n public readonly useDefaultCard = output<boolean>();\n\n // STATE\n public useDefaultCardCtrl = new FormControl(false);\n private readonly destroyRef = inject(DestroyRef);\n\n public ngOnInit(): void {\n this.useDefaultCardCtrl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {\n this.useDefaultCard.emit(!!value);\n });\n }\n\n public ~~onDigitalWalletSubmitted~~(~~data: BraintreePayload~~): void {\n this.braintreePayload.emit(~~data~~);\n }\n\n public onCancel() {\n this.cancelClick.emit();\n }\n}\n","<div class=\"sdc-digital-wallet theme-sdc\" id=\"add-patron-card-modal\">\n <div class=\"sdc-digital-wallet__inner\">\n <h2 class=\"sdc-digital-wallet__title\">ADD YOUR CARD</h2>\n\n <sdc-braintree\n class=\"sdc-digital-wallet__braintree\"\n [isDigitalWalletPayment]=\"true\"\n [token]=\"token()\"\n ~~(onSubmit)~~=\"~~onDigitalWalletSubmitted($event)~~\">\n <div>\n @if (showIsDefaultCardCheckbox()) {\n <label\n id=\"braintree-use-default-card-checkbox\"\n class=\"flex justify-center py-4 sdc-digital-wallet__default-card\">\n <input type=\"checkbox\" [formControl]=\"useDefaultCardCtrl\" />\n Make this my default card\n </label>\n }\n\n @if (errorMessage()) {\n <p class=\"sdc-digital-wallet__error\">\n {{ errorMessage() ~~\|\| 'Something bad happened'~~ }}\n </p>\n }\n\n <div class=\"flex justify-center gap-4 pt-4\">\n @if (showCancelButton()) {\n <button\n ~~class~~=\"~~disabled:opacity-30 mr-3 md:mr-6 disabled:hover:transform-none hover:scale-95 transition-transform~~ sdc-digital-wallet__cancel ~~btn-main-reverse~~\"\n id=\"braintree-cancel-button\"\n ~~type~~=\"~~button~~\"\n (~~click~~)=\"onCancel()\">\n Cancel\n </button>\n }\n <button\n ~~class~~=\"~~disabled:opacity-30 disabled:hover:transform-none hover:scale-95 transition-transform~~ sdc-digital-wallet__submit ~~btn-main~~\"\n id=\"braintree-save-button\"\n ~~type~~=\"~~button~~\">\n Save Card\n </button>\n </div>\n </div>\n </sdc-braintree>\n </div>\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"~~;;;;;;;MAaa~~,yBAAyB,CAAA;;AAE7B,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,gDAAU;AAChC,IAAA,YAAY,GAAG,KAAK,CAAgB,IAAI,wDAAC;AACzC,IAAA,gBAAgB,GAAG,KAAK,CAAU,KAAK,4DAAC;AACxC,IAAA,yBAAyB,GAAG,KAAK,CAAU,KAAK,qEAAC;;IAGxC,gBAAgB,GAAG,MAAM,EAAoB;IAC7C,WAAW,GAAG,MAAM,EAAQ;IAC5B,cAAc,GAAG,MAAM,EAAW;;AAG3C,IAAA,kBAAkB,GAAG,IAAI,WAAW,CAAC,KAAK,CAAC;~~AACjC~~,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;IAEzC,QAAQ,GAAA;AACb,QAAA,IAAI,CAAC,kBAAkB,CAAC,YAAY,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,IAAG;YAC/F,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;AACnC,QAAA,CAAC,CAAC;IACJ;AAEO,IAAA,~~wBAAwB~~,CAAC,~~IAAsB~~,~~EAAA~~;~~AACpD~~,~~QAAA~~,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,~~IAAI~~,CAAC;~~IAClC~~;IAEO,QAAQ,GAAA;AACb,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;IACzB;~~uGA5BW~~,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAzB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,yBAAyB,~~EAAA~~,~~YAAA~~,EAAA,~~IAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,~~MAAA,EAAA,~~EAAA~~,~~KAAA~~,~~EAAA~~,EAAA,~~iBAAA~~,EAAA,~~OAAA~~,EAAA,~~UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,~~IAAA,EAAA,~~UAAA~~,EAAA,IAAA,~~EAAA~~,~~iBAAA~~,EAAA,~~IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,~~QAAA,EAAA,~~IAAA~~,EAAA,~~UAAA~~,EAAA,~~KAAA~~,~~EAAA~~,~~iBAAA,~~EAAA,~~IAAA~~,EAAA,~~EAAA~~,~~gBAAA~~,EAAA,~~EAAA~~,~~iBAAA,~~EAAA,~~kBAAA~~,~~EAAA,~~UAAA,~~EAAA~~,~~kBAAA,~~EAAA,~~QAAA,~~EAAA,~~IAAA,~~EAAA,~~UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,~~IAAA,EAAA,~~EAAA,yBAAA,EAAA,EAAA,iBAAA,EAAA,2BAAA,EAAA,~~UAAA,EAAA,~~2BAAA,EAAA,QAAA,EAAA,~~IAAA,~~EAAA~~,~~UAAA~~,~~EAAA~~,~~KAAA~~,EAAA,~~iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,~~QAAA,EAAA,~~EAAA~~,EAAA,~~QAAA,ECbtC,4rDA8CA,EAAA,~~MAAA,EAAA,CAAA~~,+8DAAA~~,~~CAAA~~,EAAA,YAAA,EAAA,~~CAAA,EAAA,IAAA,EAAA,~~WAAA,EAAA,~~IAAA~~,~~EDrCY,kBAAkB,6HAAE,mBAAmB,~~EAAA,~~EAAA~~,EAAA,~~IAAA~~,EAAA,~~WAAA~~,EAAA,~~IAAA,EAAA,EAAA,CAAA,4BAAA,EAAA,~~QAAA,EAAA,~~uGAAA~~,~~EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,~~CAAA,~~eAAA,~~EAAA,~~QAAA~~,EAAA,~~2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,~~CAAA,~~oBAAA~~,EAAA,~~QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,~~SAAA,~~CAAA,~~EAAA,~~OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,~~QAAA,EAAA,~~CAAA~~,~~QAAA,~~CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;~~2FAItC~~,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBARrC,SAAS;~~iCACI~~,IAAI,EAAA,QAAA,EACN,wBAAwB,EAAA,eAAA,EACjB,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,EAAA,QAAA,EAAA,~~4rDAAA~~,EAAA,MAAA,EAAA,CAAA~~,+8DAAA~~,CAAA,EAAA;;;~~AETpD~~;;AAEG;;;;"}
1	+ {"version":3,"file":"3ddv-software-division-components-generic-add-digital-wallet.mjs","sources":["../../generic/add-digital-wallet/add-digital-wallet.component.ts","../../generic/add-digital-wallet/add-digital-wallet.component.html","../../generic/add-digital-wallet/3ddv-software-division-components-generic-add-digital-wallet.ts"],"sourcesContent":["import { BraintreeComponent, BraintreePayload, BraintreeTrigger } from '@3ddv/software-division-components/generic/braintree';\nimport { ButtonComponent } from '@3ddv/software-division-components/generic/button';\nimport { ChangeDetectionStrategy, Component, DestroyRef, OnInit, inject, input, output } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\n\n@Component({\n standalone: true,\n selector: 'sdc-add-digital-wallet',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [BraintreeComponent, ReactiveFormsModule, ButtonComponent],\n templateUrl: './add-digital-wallet.component.html',\n styleUrls: ['./add-digital-wallet.component.css'],\n})\nexport class AddDigitalWalletComponent implements OnInit {\n // INPUTS\n public token = input.required<string>();\n public errorMessage = input<string \| null>(null);\n public showCancelButton = input<boolean>(false);\n public showIsDefaultCardCheckbox = input<boolean>(false);\n\n // OUTPUTS\n public readonly braintreePayload = output<BraintreePayload>();\n public readonly cancelClick = output<void>();\n public readonly useDefaultCard = output<boolean>();\n\n // STATE\n public useDefaultCardCtrl = new FormControl(false);\n public readonly trigger = new BraintreeTrigger();\n private readonly destroyRef = inject(DestroyRef);\n\n public ngOnInit(): void {\n this.useDefaultCardCtrl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {\n this.useDefaultCard.emit(!!value);\n });\n }\n\n public async onSaveCard(): Promise<void> {\n try {\n const payload = await this.trigger.requestPayment();\n this.braintreePayload.emit(payload);\n } catch {\n // braintree component logs errors internally\n }\n }\n\n public onCancel(): void {\n this.cancelClick.emit();\n }\n}\n","<div class=\"sdc-digital-wallet theme-sdc\" id=\"add-patron-card-modal\">\n <div class=\"sdc-digital-wallet__inner\">\n <h2 class=\"sdc-digital-wallet__title\">ADD YOUR CARD</h2>\n\n <sdc-braintree\n class=\"sdc-digital-wallet__braintree\"\n [isDigitalWalletPayment]=\"true\"\n [token]=\"token()\"\n [trigger]=\"trigger\">\n <div>\n @if (showIsDefaultCardCheckbox()) {\n <label\n id=\"braintree-use-default-card-checkbox\"\n class=\"flex justify-center py-4 sdc-digital-wallet__default-card\">\n <input type=\"checkbox\" class=\"sdc-digital-wallet__checkbox\" [formControl]=\"useDefaultCardCtrl\" />\n Make this my default card\n </label>\n }\n\n @if (errorMessage()) {\n <p class=\"sdc-digital-wallet__error\">\n {{ errorMessage() }}\n </p>\n }\n\n <div class=\"flex justify-center gap-4 pt-4\">\n @if (showCancelButton()) {\n <sdc-button\n className=\"sdc-digital-wallet__cancel\"\n id=\"braintree-cancel-button\"\n variant=\"outline\"\n (onClick)=\"onCancel()\">\n Cancel\n </sdc-button>\n }\n <sdc-button\n className=\"sdc-digital-wallet__submit\"\n id=\"braintree-save-button\"\n variant=\"accent\"\n (onClick)=\"onSaveCard()\">\n Save Card\n </sdc-button>\n </div>\n </div>\n </sdc-braintree>\n </div>\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;;MAca,yBAAyB,CAAA;;AAE7B,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,gDAAU;AAChC,IAAA,YAAY,GAAG,KAAK,CAAgB,IAAI,wDAAC;AACzC,IAAA,gBAAgB,GAAG,KAAK,CAAU,KAAK,4DAAC;AACxC,IAAA,yBAAyB,GAAG,KAAK,CAAU,KAAK,qEAAC;;IAGxC,gBAAgB,GAAG,MAAM,EAAoB;IAC7C,WAAW,GAAG,MAAM,EAAQ;IAC5B,cAAc,GAAG,MAAM,EAAW;;AAG3C,IAAA,kBAAkB,GAAG,IAAI,WAAW,CAAC,KAAK,CAAC;AAClC,IAAA,OAAO,GAAG,IAAI,gBAAgB,EAAE;AAC/B,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;IAEzC,QAAQ,GAAA;AACb,QAAA,IAAI,CAAC,kBAAkB,CAAC,YAAY,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,IAAG;YAC/F,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;AACnC,QAAA,CAAC,CAAC;IACJ;AAEO,IAAA,MAAM,UAAU,GAAA;AACrB,QAAA,IAAI;YACF,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE;AACnD,YAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC;QACrC;AAAE,QAAA,MAAM;;QAER;IACF;IAEO,QAAQ,GAAA;AACb,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;IACzB;uGAlCW,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAzB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,yBAAyB,gyBCdtC,miDA+CA,EAAA,MAAA,EAAA,CAAA,oqEAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDrCY,kBAAkB,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,wBAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,mBAAmB,2eAAE,eAAe,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,YAAA,EAAA,WAAA,EAAA,SAAA,EAAA,MAAA,EAAA,MAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,SAAA,EAAA,QAAA,EAAA,aAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAIvD,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBARrC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,EAAA,QAAA,EACN,wBAAwB,EAAA,eAAA,EACjB,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,eAAe,CAAC,EAAA,QAAA,EAAA,miDAAA,EAAA,MAAA,EAAA,CAAA,oqEAAA,CAAA,EAAA;;;AEVrE;;AAEG;;;;"}

package/fesm2022/3ddv-software-division-components-generic-braintree.mjs CHANGED Viewed

@@ -1,10 +1,39 @@
-import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { viewChild, ElementRef, input, output, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { signal, viewChild, ElementRef, input, output, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+/** Pass an instance to BraintreeComponent's [trigger] input. Call fire() to request payment. */
+class BraintreeTrigger {
+    _count = signal(0, ...(ngDevMode ? [{ debugName: "_count" }] : []));
+    signal = this._count.asReadonly();
+    _resolve = null;
+    _reject = null;
+    /** Triggers the drop-in UI to request a payment method. Resolves with the payload on success, rejects on error. */
+    requestPayment() {
+        return new Promise((resolve, reject) => {
+            this._resolve = resolve;
+            this._reject = reject;
+            this._count.update(c => c + 1);
+        });
+    }
+    /** @internal Called by BraintreeComponent when payment succeeds */
+    settle(payload) {
+        this._resolve?.(payload);
+        this._resolve = null;
+        this._reject = null;
+    }
+    /** @internal Called by BraintreeComponent when payment fails */
+    fail(err) {
+        this._reject?.(err);
+        this._resolve = null;
+        this._reject = null;
+    }
+}
 /**
  * Braintree Drop‑in component that auto‑wires clicks
  * on the first projected element and errors if more than one.
+ * It also accepts a BraintreeTrigger to get the nonce without a projected element.
  * Recreates the drop‑in UI whenever isDigitalWalletPayment changes,
  * ensuring the container is empty before initialization.
  */
@@ -16,21 +45,40 @@ class BraintreeComponent {
     token = input.required(...(ngDevMode ? [{ debugName: "token" }] : []));
     /** Toggle to require cardholder name */
     isDigitalWalletPayment = input(false, ...(ngDevMode ? [{ debugName: "isDigitalWalletPayment" }] : []));
+    /** BraintreeTrigger instance — call trigger.fire() from anywhere to request payment */
+    trigger = input(...(ngDevMode ? [undefined, { debugName: "trigger" }] : []));
     /** Emits when a payment payload is ready */
     onSubmit = output();
     /** Holds the Drop‑in instance */
     dropinInstance;
     constructor(elRef) {
         this.elRef = elRef;
+        // Call requestPayment whenever trigger.fire() increments the counter
+        effect(() => {
+            const t = this.trigger();
+            if (!t)
+                return;
+            const count = t.signal();
+            if (count > 0) {
+                this.requestPayment();
+            }
+        });
         // Re-initialize drop‑in UI on config change
         effect(() => {
             const requireName = this.isDigitalWalletPayment();
             this.teardownDropin();
             this.initializeDropin(requireName);
         });
-        // Attach click handler to the single projected element
+        // Attach click handler to the single projected element (only when no trigger is provided)
         effect(onCleanup => {
+            if (this.trigger())
+                return;
             const projectedEls = Array.from(this.elRef.nativeElement.children).filter(el => el.id !== 'braintree-container');
+            // No projected elements, quit from trying to append event to button
+            if (projectedEls.length === 0) {
+                return;
+            }
+            // More than one button projected, problematic scenario, quit with an error.
             if (projectedEls.length > 1) {
                 throw new Error(`sdc-braintree: only one projected element allowed, found ${projectedEls.length}`);
             }
@@ -83,10 +131,22 @@ class BraintreeComponent {
         this.dropinInstance.requestPaymentMethod((err, payload) => {
             if (err) {
                 console.error('sdc-braintree payment error:', err);
+                this.trigger()?.fail(err);
+                this.focusContainer();
                 return;
             }
             this.onSubmit.emit(payload);
+            this.trigger()?.settle(payload);
+        });
+    }
+    /** Scrolls the drop-in container into view and focuses it — called on payment error to redirect user attention. */
+    focusContainer() {
+        const container = this.braintreeContainer()?.nativeElement;
+        container?.scrollIntoView({
+            behavior: 'smooth', // animated
+            block: 'center', // keeps form fully visible mid-viewport
         });
+        container?.focus({ preventScroll: true /* avoid jump-fighting the smooth scroll above */ });
     }
     /** Tears down the drop-in instance if present */
     teardownDropin() {
@@ -96,7 +156,7 @@ class BraintreeComponent {
         this.dropinInstance = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: BraintreeComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.4", type: BraintreeComponent, isStandalone: true, selector: "sdc-braintree", inputs: { token: { classPropertyName: "token", publicName: "token", isSignal: true, isRequired: true, transformFunction: null }, isDigitalWalletPayment: { classPropertyName: "isDigitalWalletPayment", publicName: "isDigitalWalletPayment", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit" }, viewQueries: [{ propertyName: "braintreeContainer", first: true, predicate: ["braintreeContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.4", type: BraintreeComponent, isStandalone: true, selector: "sdc-braintree", inputs: { token: { classPropertyName: "token", publicName: "token", isSignal: true, isRequired: true, transformFunction: null }, isDigitalWalletPayment: { classPropertyName: "isDigitalWalletPayment", publicName: "isDigitalWalletPayment", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit" }, viewQueries: [{ propertyName: "braintreeContainer", first: true, predicate: ["braintreeContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
     <div #braintreeContainer id="braintree-container"></div>
     <ng-content></ng-content>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -113,7 +173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
     <ng-content></ng-content>
   `,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { braintreeContainer: [{ type: i0.ViewChild, args: ['braintreeContainer', { ...{ read: (ElementRef) }, isSignal: true }] }], token: [{ type: i0.Input, args: [{ isSignal: true, alias: "token", required: true }] }], isDigitalWalletPayment: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDigitalWalletPayment", required: false }] }], onSubmit: [{ type: i0.Output, args: ["onSubmit"] }] } });
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { braintreeContainer: [{ type: i0.ViewChild, args: ['braintreeContainer', { ...{ read: (ElementRef) }, isSignal: true }] }], token: [{ type: i0.Input, args: [{ isSignal: true, alias: "token", required: true }] }], isDigitalWalletPayment: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDigitalWalletPayment", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], onSubmit: [{ type: i0.Output, args: ["onSubmit"] }] } });
 /*
  * Public API Surface of software-division-components
@@ -123,5 +183,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
-export { BraintreeComponent };
+export { BraintreeComponent, BraintreeTrigger };
 //# sourceMappingURL=3ddv-software-division-components-generic-braintree.mjs.map

package/fesm2022/3ddv-software-division-components-generic-braintree.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"3ddv-software-division-components-generic-braintree.mjs","sources":["../../generic/braintree/braintree.component.ts","../../generic/braintree/public-api.ts","../../generic/braintree/3ddv-software-division-components-generic-braintree.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n effect,\n ElementRef,\n input,\n OnDestroy,\n output,\n viewChild,\n} from '@angular/core';\nimport { BraintreePayload } from './types';\n\ndeclare let braintree: any;\n\n/*\n Braintree Drop‑in component that auto‑wires clicks\n * on the first projected element and errors if more than one.\n * Recreates the drop‑in UI whenever isDigitalWalletPayment changes,\n * ensuring the container is empty before initialization.\n /\n@Component({\n standalone: true,\n selector: 'sdc-braintree',\n imports: [CommonModule],\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n <div #braintreeContainer id=\"braintree-container\"></div>\n <ng-content></ng-content>\n `,\n})\nexport class BraintreeComponent implements OnDestroy {\n /* Braintree element reference /\n public braintreeContainer = viewChild('braintreeContainer', { read: ElementRef<HTMLElement> });\n\n /* Braintree client token input /\n public readonly token = input.required<string>();\n\n /* Toggle to require cardholder name /\n public readonly isDigitalWalletPayment = input<boolean>(false);\n\n /* Emits when a payment payload is ready /\n public readonly onSubmit = output<BraintreePayload>();\n\n /* Holds the Drop‑in instance /\n private dropinInstance: any;\n\n constructor(private readonly elRef: ElementRef) {\n // Re-initialize drop‑in UI on config change\n effect(() => {\n const requireName = this.isDigitalWalletPayment();\n this.teardownDropin();\n this.initializeDropin(requireName);\n });\n\n // Attach click handler to the single projected element\n effect(onCleanup => {\n const projectedEls = Array.from((this.elRef.nativeElement as HTMLElement).children).filter(\n el => el.id !== 'braintree-container'\n );\n if (projectedEls.length > 1) {\n throw new Error(`sdc-braintree: only one projected element allowed, found ${projectedEls.length}`);\n }\n if (projectedEls.length === 1) {\n const btn = projectedEls[0] as HTMLElement;\n const handler = () => this.requestPayment();\n btn.addEventListener('click', handler);\n onCleanup(() => btn.removeEventListener('click', handler));\n }\n });\n }\n\n ngOnDestroy(): void {\n this.teardownDropin();\n }\n\n /* Clears previous drop-in UI and recreates it /\n private initializeDropin(requireName: boolean): void {\n if (this.dropinInstance) return;\n const container = this.braintreeContainer()?.nativeElement as HTMLElement;\n\n if (!container) {\n console.error('sdc-braintree: missing container element');\n return;\n }\n\n const cardOptions = requireName\n ? {\n card: { cardholderName: { required: requireName } },\n number: { supportedCardBrand: ['visa', 'mastercard', 'diners-club', 'discover', 'american-express'] },\n }\n : undefined;\n\n setTimeout(() => {\n braintree.dropin.create(\n {\n authorization: this.token(),\n container: container,\n ...cardOptions,\n },\n (err: any, instance: any) => {\n if (err) {\n console.error('Braintree init error:', err);\n return;\n }\n this.dropinInstance = instance;\n }\n );\n }, 0);\n }\n\n /* Requests payment method and emits payload /\n private requestPayment(): void {\n if (!this.dropinInstance) {\n console.warn('sdc-braintree: drop‑in not ready');\n return;\n }\n this.dropinInstance.requestPaymentMethod((err: any, payload: BraintreePayload) => {\n if (err) {\n console.error('sdc-braintree payment error:', err);\n return;\n }\n this.onSubmit.emit(payload);\n });\n }\n\n /* Tears down the drop-in instance if present /\n private teardownDropin(): void {\n if (this.dropinInstance?.teardown) {\n this.dropinInstance.teardown();\n }\n this.dropinInstance = null;\n }\n}\n","/\n * Public API Surface of software-division-components\n /\n\nexport from './braintree.component';\nexport * from './types';\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-generic-braintree.mjs","sources":["../../generic/braintree/braintree-trigger.ts","../../generic/braintree/braintree.component.ts","../../generic/braintree/public-api.ts","../../generic/braintree/3ddv-software-division-components-generic-braintree.ts"],"sourcesContent":["import { signal } from '@angular/core';\nimport { BraintreePayload } from './types';\n\n/** Pass an instance to BraintreeComponent's [trigger] input. Call fire() to request payment. /\nexport class BraintreeTrigger {\n private readonly _count = signal(0);\n public readonly signal = this._count.asReadonly();\n\n private _resolve: ((payload: BraintreePayload) => void) \| null = null;\n private _reject: ((err: any) => void) \| null = null;\n\n /* Triggers the drop-in UI to request a payment method. Resolves with the payload on success, rejects on error. /\n public requestPayment(): Promise<BraintreePayload> {\n return new Promise((resolve, reject) => {\n this._resolve = resolve;\n this._reject = reject;\n this._count.update(c => c + 1);\n });\n }\n\n /* @internal Called by BraintreeComponent when payment succeeds /\n public settle(payload: BraintreePayload): void {\n this._resolve?.(payload);\n this._resolve = null;\n this._reject = null;\n }\n\n /* @internal Called by BraintreeComponent when payment fails /\n public fail(err: any): void {\n this._reject?.(err);\n this._resolve = null;\n this._reject = null;\n }\n}\n","import { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n effect,\n ElementRef,\n input,\n OnDestroy,\n output,\n viewChild,\n} from '@angular/core';\nimport { BraintreeTrigger } from './braintree-trigger';\nimport { BraintreePayload } from './types';\n\ndeclare let braintree: any;\n\n/\n Braintree Drop‑in component that auto‑wires clicks\n * on the first projected element and errors if more than one.\n * It also accepts a BraintreeTrigger to get the nonce without a projected element.\n * Recreates the drop‑in UI whenever isDigitalWalletPayment changes,\n * ensuring the container is empty before initialization.\n /\n@Component({\n standalone: true,\n selector: 'sdc-braintree',\n imports: [CommonModule],\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n <div #braintreeContainer id=\"braintree-container\"></div>\n <ng-content></ng-content>\n `,\n})\nexport class BraintreeComponent implements OnDestroy {\n /* Braintree element reference /\n public braintreeContainer = viewChild('braintreeContainer', { read: ElementRef<HTMLElement> });\n\n /* Braintree client token input /\n public readonly token = input.required<string>();\n\n /* Toggle to require cardholder name /\n public readonly isDigitalWalletPayment = input<boolean>(false);\n\n /* BraintreeTrigger instance — call trigger.fire() from anywhere to request payment /\n public readonly trigger = input<BraintreeTrigger>();\n\n /* Emits when a payment payload is ready /\n public readonly onSubmit = output<BraintreePayload>();\n\n /* Holds the Drop‑in instance /\n private dropinInstance: any;\n\n constructor(private readonly elRef: ElementRef) {\n // Call requestPayment whenever trigger.fire() increments the counter\n effect(() => {\n const t = this.trigger();\n if (!t) return;\n\n const count = t.signal();\n if (count > 0) {\n this.requestPayment();\n }\n });\n\n // Re-initialize drop‑in UI on config change\n effect(() => {\n const requireName = this.isDigitalWalletPayment();\n this.teardownDropin();\n this.initializeDropin(requireName);\n });\n\n // Attach click handler to the single projected element (only when no trigger is provided)\n effect(onCleanup => {\n if (this.trigger()) return;\n\n const projectedEls = Array.from((this.elRef.nativeElement as HTMLElement).children).filter(\n el => el.id !== 'braintree-container'\n );\n\n // No projected elements, quit from trying to append event to button\n if (projectedEls.length === 0) {\n return;\n }\n\n // More than one button projected, problematic scenario, quit with an error.\n if (projectedEls.length > 1) {\n throw new Error(`sdc-braintree: only one projected element allowed, found ${projectedEls.length}`);\n }\n\n if (projectedEls.length === 1) {\n const btn = projectedEls[0] as HTMLElement;\n const handler = () => this.requestPayment();\n btn.addEventListener('click', handler);\n onCleanup(() => btn.removeEventListener('click', handler));\n }\n });\n }\n\n ngOnDestroy(): void {\n this.teardownDropin();\n }\n\n /* Clears previous drop-in UI and recreates it /\n private initializeDropin(requireName: boolean): void {\n if (this.dropinInstance) return;\n const container = this.braintreeContainer()?.nativeElement as HTMLElement;\n\n if (!container) {\n console.error('sdc-braintree: missing container element');\n return;\n }\n\n const cardOptions = requireName\n ? {\n card: { cardholderName: { required: requireName } },\n number: { supportedCardBrand: ['visa', 'mastercard', 'diners-club', 'discover', 'american-express'] },\n }\n : undefined;\n\n setTimeout(() => {\n braintree.dropin.create(\n {\n authorization: this.token(),\n container: container,\n ...cardOptions,\n },\n (err: any, instance: any) => {\n if (err) {\n console.error('Braintree init error:', err);\n return;\n }\n this.dropinInstance = instance;\n }\n );\n }, 0);\n }\n\n /* Requests payment method and emits payload /\n public requestPayment(): void {\n if (!this.dropinInstance) {\n console.warn('sdc-braintree: drop‑in not ready');\n return;\n }\n\n this.dropinInstance.requestPaymentMethod((err: any, payload: BraintreePayload) => {\n if (err) {\n console.error('sdc-braintree payment error:', err);\n this.trigger()?.fail(err);\n this.focusContainer();\n return;\n }\n this.onSubmit.emit(payload);\n this.trigger()?.settle(payload);\n });\n }\n\n /* Scrolls the drop-in container into view and focuses it — called on payment error to redirect user attention. /\n private focusContainer(): void {\n const container = this.braintreeContainer()?.nativeElement;\n container?.scrollIntoView({\n behavior: 'smooth', // animated\n block: 'center', // keeps form fully visible mid-viewport\n });\n container?.focus({ preventScroll: true / avoid jump-fighting the smooth scroll above / });\n }\n\n /* Tears down the drop-in instance if present /\n private teardownDropin(): void {\n if (this.dropinInstance?.teardown) {\n this.dropinInstance.teardown();\n }\n\n this.dropinInstance = null;\n }\n}\n","/\n * Public API Surface of software-division-components\n /\n\nexport from './braintree-trigger';\nexport * from './braintree.component';\nexport * from './types';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@3ddv/software-division-components",
-  "version": "2.0.10",
+  "version": "2.0.12",
   "main": "./fesm2022/3ddv-software-division-components.mjs",
   "module": "fesm2022/3ddv-software-division-components.mjs",
   "typings": "types/3ddv-software-division-components.d.ts",

package/styles.css CHANGED Viewed

@@ -1,2 +1,2 @@
-/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-600:oklch(57.7% .245 27.325);--color-green-600:oklch(62.7% .194 149.214);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-gray-600:oklch(44.6% .03 256.802);--color-neutral-50:oklch(98.5% 0 0);--color-neutral-100:oklch(97% 0 0);--color-neutral-200:oklch(92.2% 0 0);--color-neutral-300:oklch(87% 0 0);--color-neutral-400:oklch(70.8% 0 0);--color-neutral-500:oklch(55.6% 0 0);--color-neutral-600:oklch(43.9% 0 0);--color-neutral-700:oklch(37.1% 0 0);--color-neutral-800:oklch(26.9% 0 0);--color-neutral-900:oklch(20.5% 0 0);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-lg:32rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-2xl:1.5rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-extrabold:800;--tracking-tight:-.025em;--leading-tight:1.25;--leading-normal:1.5;--leading-relaxed:1.625;--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) + 4px);--radius-2xl:1rem;--radius-3xl:1.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-primary:var(--primary);--color-secondary:var(--secondary);--color-accent:var(--accent)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.-top-12{top:calc(var(--spacing) * -12)}.top-0{top:calc(var(--spacing) * 0)}.top-1\/2{top:50%}.top-4{top:calc(var(--spacing) * 4)}.-right-12{right:calc(var(--spacing) * -12)}.right-1{right:calc(var(--spacing) * 1)}.right-2{right:calc(var(--spacing) * 2)}.right-4{right:calc(var(--spacing) * 4)}.-bottom-12{bottom:calc(var(--spacing) * -12)}.-left-12{left:calc(var(--spacing) * -12)}.left-1{left:calc(var(--spacing) * 1)}.left-1\/2{left:50%}.z-50{z-index:50}.z-\[2\]{z-index:2}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.container{margin-inline:auto;padding-inline:2rem}.-mt-4{margin-top:calc(var(--spacing) * -4)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mr-3{margin-right:calc(var(--spacing) * 3)}.-ml-1{margin-left:calc(var(--spacing) * -1)}.-ml-4{margin-left:calc(var(--spacing) * -4)}.ml-2{margin-left:calc(var(--spacing) * 2)}.line-clamp-1{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.size-3\.5{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-24{height:calc(var(--spacing) * 24)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-72{width:calc(var(--spacing) * 72)}.w-\[280px\]{width:280px}.w-auto{width:auto}.w-full{width:100%}.max-w-lg{max-width:var(--container-lg)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-\[8rem\]{min-width:8rem}.flex-1{flex:1}.flex-none{flex:none}.flex-shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow-0{flex-grow:0}.basis-full{flex-basis:100%}.caption-bottom{caption-side:bottom}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.rotate-90{rotate:90deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-default{cursor:default}.resize{resize:both}.resize-none{resize:none}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-4{gap:calc(var(--spacing) * 4)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-x-1>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-none{border-radius:0}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-8{border-style:var(--tw-border-style);border-width:8px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-blue-500{border-color:var(--color-blue-500)}.border-border{border-color:var(--border)}.border-destructive{border-color:var(--destructive)}.border-input{border-color:var(--input)}.bg-background{background-color:var(--background)}.bg-black{background-color:var(--color-black)}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab, red, red)){.bg-black\/50{background-color:color-mix(in oklab, var(--color-black) 50%, transparent)}}.bg-blue-500{background-color:var(--color-blue-500)}.bg-destructive{background-color:var(--destructive)}.bg-muted\/50{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/50{background-color:color-mix(in oklab, var(--muted) 50%, transparent)}}.bg-popover{background-color:var(--popover)}.bg-primary{background-color:var(--primary)}.bg-secondary{background-color:var(--secondary)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-4{padding-block:calc(var(--spacing) * 4)}.pt-1{padding-top:calc(var(--spacing) * 1)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pr-8{padding-right:calc(var(--spacing) * 8)}.pl-1{padding-left:calc(var(--spacing) * 1)}.pl-2{padding-left:calc(var(--spacing) * 2)}.pl-4{padding-left:calc(var(--spacing) * 4)}.text-center{text-align:center}.text-left{text-align:left}.align-middle{vertical-align:middle}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[0\.8rem\]{font-size:.8rem}.leading-none{--tw-leading:1;line-height:1}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-black{color:var(--color-black)}.text-blue-500{color:var(--color-blue-500)}.text-destructive{color:var(--destructive)}.text-foreground{color:var(--foreground)}.text-gray-600{color:var(--color-gray-600)}.text-green-600{color:var(--color-green-600)}.text-muted-foreground{color:var(--muted-foreground)}.text-popover-foreground{color:var(--popover-foreground)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-red-600{color:var(--color-red-600)}.text-secondary-foreground{color:var(--secondary-foreground)}.text-white{color:var(--color-white)}.capitalize{text-transform:capitalize}.italic{font-style:italic}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.opacity-50{opacity:.5}.opacity-70{opacity:.7}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-offset-background{--tw-ring-offset-color:var(--background)}.outline-hidden{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.outline-hidden{outline-offset:2px;outline:2px solid #0000}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-accent{outline-color:var(--accent)}.outline-white{outline-color:var(--color-white)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[color\,box-shadow\]{transition-property:color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.\[animation-duration\:200\]{animation-duration:200}.focus-within\:relative:focus-within{position:relative}.focus-within\:z-20:focus-within{z-index:20}@media (hover:hover){.hover\:scale-95:hover{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:bg-accent:hover{background-color:var(--accent)}.hover\:bg-blue-600:hover{background-color:var(--color-blue-600)}.hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab, var(--destructive) 90%, transparent)}}.hover\:bg-muted\/50:hover{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/50:hover{background-color:color-mix(in oklab, var(--muted) 50%, transparent)}}.hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--primary) 90%, transparent)}}.hover\:bg-secondary\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab, var(--secondary) 80%, transparent)}}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-100:hover{opacity:1}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-accent:focus{--tw-ring-color:var(--accent)}.focus\:ring-ring:focus{--tw-ring-color:var(--ring)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:border-ring:focus-visible{border-color:var(--ring)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-\[3px\]:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:color-mix(in oklab, var(--destructive) 20%, transparent)}}.focus-visible\:ring-ring:focus-visible,.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:color-mix(in oklab, var(--ring) 50%, transparent)}}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-30:disabled{opacity:.3}.disabled\:opacity-50:disabled{opacity:.5}@media (hover:hover){.disabled\:hover\:transform-none:disabled:hover{transform:none}}.has-\[\>ng-icon\]\:px-2\.5:has(>ng-icon){padding-inline:calc(var(--spacing) * 2.5)}.has-\[\>ng-icon\]\:px-3:has(>ng-icon){padding-inline:calc(var(--spacing) * 3)}.has-\[\>ng-icon\]\:px-4:has(>ng-icon){padding-inline:calc(var(--spacing) * 4)}.aria-invalid\:border-destructive[aria-invalid=true]{border-color:var(--destructive)}.aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:color-mix(in oklab, var(--destructive) 20%, transparent)}}.aria-selected\:opacity-100[aria-selected=true]{opacity:1}.data-\[active\]\:bg-accent[data-active]{background-color:var(--accent)}.data-\[active\]\:text-white[data-active]{color:var(--color-white)}.data-\[disabled\]\:pointer-events-none[data-disabled]{pointer-events:none}.data-\[disabled\]\:text-muted-foreground[data-disabled]{color:var(--muted-foreground)}.data-\[disabled\]\:opacity-50[data-disabled]{opacity:.5}.data-\[outside\]\:text-muted-foreground[data-outside]{color:var(--muted-foreground)}.data-\[outside\]\:opacity-50[data-outside]{opacity:.5}.data-\[outside\]\:aria-selected\:bg-accent\/50[data-outside][aria-selected=true]{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.data-\[outside\]\:aria-selected\:bg-accent\/50[data-outside][aria-selected=true]{background-color:color-mix(in oklab, var(--accent) 50%, transparent)}}.data-\[outside\]\:aria-selected\:text-muted-foreground[data-outside][aria-selected=true]{color:var(--muted-foreground)}.data-\[outside\]\:aria-selected\:opacity-30[data-outside][aria-selected=true]{opacity:.3}.data-\[selected\]\:bg-accent[data-selected]{background-color:var(--accent)}.data-\[selected\]\:bg-primary[data-selected]{background-color:var(--primary)}.data-\[selected\]\:text-primary-foreground[data-selected]{color:var(--primary-foreground)}.first\:data-\[selected\]\:rounded-l-md:first-child[data-selected]{border-top-left-radius:calc(var(--radius) - 2px);border-bottom-left-radius:calc(var(--radius) - 2px)}.last\:data-\[selected\]\:rounded-r-md:last-child[data-selected]{border-top-right-radius:calc(var(--radius) - 2px);border-bottom-right-radius:calc(var(--radius) - 2px)}@media (hover:hover){.data-\[selected\]\:hover\:bg-primary[data-selected]:hover{background-color:var(--primary)}.data-\[selected\]\:hover\:text-primary-foreground[data-selected]:hover{color:var(--primary-foreground)}}.data-\[selected\]\:focus\:bg-primary[data-selected]:focus{background-color:var(--primary)}.data-\[selected\]\:focus\:text-primary-foreground[data-selected]:focus{color:var(--primary-foreground)}.data-\[selected\]\:data-\[outside\]\:bg-accent\/50[data-selected][data-outside]{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.data-\[selected\]\:data-\[outside\]\:bg-accent\/50[data-selected][data-outside]{background-color:color-mix(in oklab, var(--accent) 50%, transparent)}}.data-\[side\=bottom\]\:top-\[2px\][data-side=bottom]{top:2px}.data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom]{--tw-enter-translate-y:-.5rem}.data-\[side\=left\]\:slide-in-from-right-2[data-side=left]{--tw-enter-translate-x:.5rem}.data-\[side\=right\]\:slide-in-from-left-2[data-side=right]{--tw-enter-translate-x:-.5rem}.data-\[side\=top\]\:bottom-\[2px\][data-side=top]{bottom:2px}.data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top]{--tw-enter-translate-y:.5rem}.data-\[size\=default\]\:h-9[data-size=default]{height:calc(var(--spacing) * 9)}.data-\[size\=sm\]\:h-6[data-size=sm]{height:calc(var(--spacing) * 6)}.data-\[state\=closed\]\:animate-out[data-state=closed]{--tw-exit-opacity:initial;--tw-exit-scale:initial;--tw-exit-rotate:initial;--tw-exit-translate-x:initial;--tw-exit-translate-y:initial;animation-name:exit;animation-duration:.15s}.data-\[state\=closed\]\:fade-out-0[data-state=closed]{--tw-exit-opacity:0}.data-\[state\=closed\]\:slide-out-to-top-\[2\%\][data-state=closed]{--tw-exit-translate-y:-2%}.data-\[state\=closed\]\:zoom-out-95[data-state=closed]{--tw-exit-scale:.95}.data-\[state\=open\]\:bg-accent[data-state=open]{background-color:var(--accent)}.data-\[state\=open\]\:text-muted-foreground[data-state=open]{color:var(--muted-foreground)}.data-\[state\=open\]\:animate-in[data-state=open]{--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial;animation-name:enter;animation-duration:.15s}.data-\[state\=open\]\:fade-in-0[data-state=open]{--tw-enter-opacity:0}.data-\[state\=open\]\:slide-in-from-top-\[2\%\][data-state=open]{--tw-enter-translate-y:-2%}.data-\[state\=open\]\:zoom-in-95[data-state=open]{--tw-enter-scale:.95}.data-\[state\=selected\]\:bg-muted[data-state=selected]{background-color:var(--muted)}.data-\[today\]\:bg-accent[data-today]{background-color:var(--accent)}.data-\[today\]\:text-accent-foreground[data-today]{color:var(--accent-foreground)}@media (min-width:40rem){.sm\:flex-row{flex-direction:row}.sm\:justify-end{justify-content:flex-end}:where(.sm\:space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)))}.sm\:text-left{text-align:left}}@media (min-width:48rem){.md\:mr-6{margin-right:calc(var(--spacing) * 6)}.md\:w-full{width:100%}}@media (min-width:64rem){.lg\:block{display:block}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.lg\:font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}}@media (prefers-color-scheme:dark){.dark\:border-input{border-color:var(--input)}.dark\:bg-destructive\/60{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.dark\:bg-destructive\/60{background-color:color-mix(in oklab, var(--destructive) 60%, transparent)}}.dark\:bg-input\/30{background-color:var(--input)}@supports (color:color-mix(in lab, red, red)){.dark\:bg-input\/30{background-color:color-mix(in oklab, var(--input) 30%, transparent)}}@media (hover:hover){.dark\:hover\:bg-accent\/50:hover{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-accent\/50:hover{background-color:color-mix(in oklab, var(--accent) 50%, transparent)}}.dark\:hover\:bg-input\/50:hover{background-color:var(--input)}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-input\/50:hover{background-color:color-mix(in oklab, var(--input) 50%, transparent)}}.dark\:hover\:text-accent-foreground:hover{color:var(--accent-foreground)}}.dark\:focus-visible\:ring-destructive\/40:focus-visible{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.dark\:focus-visible\:ring-destructive\/40:focus-visible{--tw-ring-color:color-mix(in oklab, var(--destructive) 40%, transparent)}}.dark\:aria-invalid\:ring-destructive\/40[aria-invalid=true]{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.dark\:aria-invalid\:ring-destructive\/40[aria-invalid=true]{--tw-ring-color:color-mix(in oklab, var(--destructive) 40%, transparent)}}}.\[\&_ng-icon\]\:pointer-events-none ng-icon{pointer-events:none}.\[\&_ng-icon\]\:shrink-0 ng-icon{flex-shrink:0}.\[\&_tr\]\:border-b tr{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.\[\&_tr\:last-child\]\:border-0 tr:last-child{border-style:var(--tw-border-style);border-width:0}.\[\&\.ng-invalid\.ng-touched\]\:border-destructive.ng-invalid.ng-touched{border-color:var(--destructive)}.\[\&\.ng-invalid\.ng-touched\]\:text-destructive.ng-invalid.ng-touched{color:var(--destructive)}.\[\&\.ng-invalid\.ng-touched\]\:focus-visible\:ring-destructive\/20.ng-invalid.ng-touched:focus-visible{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.\[\&\.ng-invalid\.ng-touched\]\:focus-visible\:ring-destructive\/20.ng-invalid.ng-touched:focus-visible{--tw-ring-color:color-mix(in oklab, var(--destructive) 20%, transparent)}}@media (prefers-color-scheme:dark){.dark\:\[\&\.ng-invalid\.ng-touched\]\:focus-visible\:ring-destructive\/40.ng-invalid.ng-touched:focus-visible{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.dark\:\[\&\.ng-invalid\.ng-touched\]\:focus-visible\:ring-destructive\/40.ng-invalid.ng-touched:focus-visible{--tw-ring-color:color-mix(in oklab, var(--destructive) 40%, transparent)}}}.\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md:has([aria-selected].day-range-end){border-top-right-radius:calc(var(--radius) - 2px);border-bottom-right-radius:calc(var(--radius) - 2px)}.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]){padding-right:calc(var(--spacing) * 0)}:is(.\*\:\[span\]\:last\:flex>*):is(span):last-child{display:flex}:is(.\*\:\[span\]\:last\:items-center>*):is(span):last-child{align-items:center}:is(.\*\:\[span\]\:last\:gap-2>*):is(span):last-child{gap:calc(var(--spacing) * 2)}.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox]{--tw-translate-y:2px;translate:var(--tw-translate-x) var(--tw-translate-y)}.\[\&\>ng-icon\]\:pointer-events-none>ng-icon{pointer-events:none}.\[\&\>ng-icon\]\:size-4>ng-icon{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&\>ng-icon\]\:shrink-0>ng-icon{flex-shrink:0}.\[\&\>ng-icon\]\:text-muted-foreground>ng-icon{color:var(--muted-foreground)}.\[\&\>ng-icon\]\:text-white>ng-icon{color:var(--color-white)}.\[\&\>tr\]\:last\:border-b-0>tr:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;width:100%;height:100%;top:0;left:0}.cdk-overlay-container{z-index:1000;position:fixed}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{z-index:1000;display:flex;position:absolute}.cdk-overlay-pane{pointer-events:auto;box-sizing:border-box;z-index:1000;max-width:100%;max-height:100%;display:flex;position:absolute}.cdk-overlay-backdrop{pointer-events:auto;-webkit-tap-highlight-color:#0000;opacity:0;touch-action:manipulation;z-index:1000;transition:opacity .4s cubic-bezier(.25,.8,.25,1);position:absolute;inset:0}@media (prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media (forced-colors:active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{visibility:hidden;opacity:1;transition:visibility 1ms linear,opacity 1ms linear}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{z-index:1000;flex-direction:column;min-width:1px;min-height:1px;display:flex;position:absolute}.cdk-global-scrollblock{width:100%;position:fixed;overflow-y:scroll}.cdk-overlay-popover{pointer-events:none;white-space:normal;color:inherit;background:0 0;border:none;outline:0;width:100%;height:100%;padding:0;text-decoration:none;position:fixed;inset:0 auto auto 0;overflow:visible}.cdk-overlay-popover::backdrop{display:none}.cdk-overlay-popover .cdk-overlay-backdrop{z-index:auto;position:fixed}@keyframes indeterminate{0%{transform:translate(-100%)scaleX(.5)}to{transform:translate(100%)scaleX(.5)}}:root{--font-primary:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-secondary:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--text-xxs:.625rem;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--font-light:300;--font-regular:400;--font-medium:500;--font-semibold:600;--font-bold:700;--leading-tight:1.25;--leading-normal:1.5;--leading-relaxed:1.625;--space-0:0;--space-px:1px;--space-0_5:.125rem;--space-1:.25rem;--space-1_5:.375rem;--space-2:.5rem;--space-2_5:.625rem;--space-3:.75rem;--space-3_5:.875rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-7:1.75rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--radius-none:0;--radius-sm:.125rem;--radius-default:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--radius-full:9999px;--border-0:0;--border-default:1px;--border-2:2px;--border-3:3px;--border-4:4px;--border-6:6px;--border-8:8px;--color-neutral-50:#f8fafc;--color-neutral-100:#f1f5f9;--color-neutral-200:#e1e7ef;--color-neutral-250:#dedede;--color-neutral-300:#cbd2dc;--color-neutral-400:#97a3b4;--color-neutral-500:#61748f;--color-neutral-600:#435670;--color-neutral-650:#373a53;--color-neutral-700:#324258;--color-neutral-800:#1d283a;--color-neutral-900:#0f1729;--color-pure-white:#fff;--color-pure-black:#000;--color-pure-gray:gray;--color-primary:#ff820d;--color-primary-hover:#e06c00;--color-primary-active:#b85900;--color-primary-50:#fff7f0;--color-primary-100:#ffe7d1;--color-primary-200:#ffd5ad;--color-secondary:#0f2b5e;--color-secondary-hover:#14387b;--color-secondary-active:#19469a;--color-secondary-50:#f2f6fd;--color-secondary-100:#e0e9fa;--color-secondary-200:#c6d7f6;--color-alternative:#0da2e7;--color-alternative-hover:#0788c0;--color-alternative-active:#0369a0;--color-alternative-50:#f0f9ff;--color-alternative-100:#e1f3fe;--color-success:#36d399;--color-success-hover:#10b77f;--color-success-active:#059467;--color-success-50:#edfdf5;--color-success-100:#d1fae5;--color-warning:#fbbd23;--color-warning-hover:#db7706;--color-warning-active:#ad5700;--color-warning-50:#fffbeb;--color-warning-100:#fef3c8;--color-danger:#dc2828;--color-danger-hover:#b51c1c;--color-danger-active:#891010;--color-danger-50:#fef1f1;--color-danger-100:#fee1e1;--font-sans:"Geist Sans", sans-serif;--background:var(--color-pure-white);--foreground:var(--color-neutral-600);--card:var(--color-pure-white);--card-foreground:var(--color-neutral-600);--popover:var(--color-pure-white);--popover-foreground:var(--color-neutral-600);--primary:var(--color-primary);--primary-foreground:var(--color-pure-white);--secondary:var(--color-neutral-100);--secondary-foreground:var(--color-neutral-600);--muted:var(--color-neutral-50);--muted-foreground:var(--color-neutral-500);--accent:var(--color-primary-200);--accent-foreground:var(--color-neutral-700);--destructive:var(--color-danger);--destructive-foreground:var(--color-pure-white);--border:var(--color-neutral-200);--input:var(--color-neutral-200);--ring:var(--color-primary);--radius:var(--radius-lg);color-scheme:light}@media (max-width:1024px){.cdk-overlay-pane:has(>hlm-select-content),.cdk-overlay-pane:has(>hlm-select-content.full-width){width:100%!important;left:0!important;right:0!important}}:root{--p-button-primary-color:white!important;--p-button-primary-contrast-color:white!important;--p-button-primary-hover-color:white!important}.sdc-datepicker{--sdc-datepicker-label-color:var(--color-neutral-700);--sdc-datepicker-label-size:var(--text-base);--sdc-datepicker-label-weight:var(--font-semibold);--sdc-datepicker-label-gap:var(--space-6);--sdc-datepicker-label-width:auto;--sdc-datepicker-input-width:100%;--sdc-datepicker-input-background:var(--color-pure-white);--sdc-datepicker-input-border-color:var(--color-neutral-300);--sdc-datepicker-input-border-width:var(--border-default);--sdc-datepicker-input-border-radius:var(--radius-full);--sdc-datepicker-input-padding-vertical:var(--space-2);--sdc-datepicker-input-padding-horizontal:var(--space-3);--sdc-datepicker-input-text-color:var(--color-neutral-900);--sdc-datepicker-input-text-size:var(--text-base);--sdc-datepicker-input-text-weight:var(--font-medium);--sdc-datepicker-input-border-hover:var(--color-neutral-500);--sdc-datepicker-input-focus-ring-width:var(--border-default);--sdc-datepicker-input-focus-ring-color:var(--color-primary);--sdc-datepicker-input-focus-ring-offset:var(--border-2);--sdc-datepicker-placeholder-color:var(--color-neutral-500);--sdc-datepicker-placeholder-size:var(--text-sm);--sdc-datepicker-placeholder-weight:var(--font-medium);--sdc-datepicker-hint-color:var(--color-neutral-600);--sdc-datepicker-hint-size:var(--text-xs);--sdc-datepicker-error-color:var(--color-danger);--sdc-datepicker-error-size:var(--text-xs);--sdc-datepicker-calendar-background:var(--color-pure-white);--sdc-datepicker-calendar-border-color:var(--color-neutral-200);--sdc-datepicker-calendar-border-width:var(--border-default);--sdc-datepicker-calendar-border-radius:var(--radius-lg);--sdc-datepicker-calendar-shadow:0 1px 3px #00000014;--sdc-datepicker-calendar-padding:var(--space-4);--sdc-datepicker-month-year-text-color:var(--color-neutral-900);--sdc-datepicker-month-year-text-size:var(--text-base);--sdc-datepicker-month-year-text-weight:var(--font-semibold);--sdc-datepicker-month-year-hover-text-color:var(--color-neutral-900);--sdc-datepicker-month-year-padding:var(--space-2);--sdc-datepicker-month-year-button-background:var(--color-pure-white);--sdc-datepicker-month-year-button-text-color-hover:var(--color-pure-white);--sdc-datepicker-month-year-button-background-hover:var(--color-neutral-900);--sdc-datepicker-day-button-disabled-background:transparent;--sdc-datepicker-day-button-disabled-text-color:var(--color-neutral-300);--sdc-datepicker-day-button-background:transparent;--sdc-datepicker-day-button-text-color:var(--color-neutral-900);--sdc-datepicker-day-button-text-size:var(--text-sm);--sdc-datepicker-day-button-text-weight:var(--font-semibold);--sdc-datepicker-day-button-border-radius:var(--radius-md);--sdc-datepicker-day-button-padding:var(--space-2);--sdc-datepicker-day-button-hover-background:var(--color-secondary);--sdc-datepicker-day-button-hover-text-color:var(--color-pure-white)}.component-container{gap:var(--sdc-datepicker-label-gap);width:var(--sdc-datepicker-input-width);flex-direction:column;display:flex}.component-container hlm-date-picker{width:var(--sdc-datepicker-input-width)}.sdc-datepicker-label{font-weight:var(--sdc-datepicker-label-weight);font-size:var(--sdc-datepicker-label-size);color:hsl(var(--sdc-datepicker-label-color));width:var(--sdc-datepicker-label-width);padding-left:var(--sdc-datepicker-input-padding-horizontal);line-height:1.25rem;display:block}.component-container:has(.sdc-datepicker-label.left){flex-direction:row;align-items:center;padding-left:0}.sdc-datepicker button[brnpopovertrigger]{width:var(--sdc-datepicker-input-width);background:var(--sdc-datepicker-input-background);border:var(--sdc-datepicker-input-border-width) solid hsl(var(--sdc-datepicker-input-border-color));border-radius:var(--sdc-datepicker-input-border-radius);padding:var(--sdc-datepicker-input-padding-vertical) var(--sdc-datepicker-input-padding-horizontal);color:hsl(var(--sdc-datepicker-input-text-color));font-size:var(--sdc-datepicker-input-text-size);font-weight:var(--sdc-datepicker-input-text-weight);cursor:pointer;outline:none}.sdc-datepicker-placeholder{color:hsl(var(--sdc-datepicker-placeholder-color));font-size:var(--sdc-datepicker-placeholder-size);font-weight:var(--sdc-datepicker-placeholder-weight)}.sdc-datepicker button[brnpopovertrigger]:hover:not(:disabled){border-color:hsl(var(--sdc-datepicker-input-border-hover))}.sdc-datepicker button[brnpopovertrigger][data-state=open]{outline:var(--sdc-datepicker-input-focus-ring-width) solid hsl(var(--sdc-datepicker-input-focus-ring-color));outline-offset:var(--sdc-datepicker-input-focus-ring-offset)}.sdc-datepicker button[brnpopovertrigger]:disabled{opacity:.6;cursor:not-allowed;background:hsl(var(--color-neutral-100))}.sdc-datepicker-error{color:hsl(var(--sdc-datepicker-error-color));font-size:var(--sdc-datepicker-error-size);line-height:1rem}.sdc-datepicker-hint{color:hsl(var(--sdc-datepicker-hint-color));font-size:var(--sdc-datepicker-hint-size);line-height:1rem}.sdc-datepicker div[brncalendar]{background:hsl(var(--sdc-datepicker-calendar-background));border:var(--sdc-datepicker-calendar-border-width) solid hsl(var(--sdc-datepicker-calendar-border-color));border-radius:var(--sdc-datepicker-calendar-border-radius);box-shadow:var(--sdc-datepicker-calendar-shadow);padding:var(--sdc-datepicker-calendar-padding)}.sdc-datepicker div[brncalendarheader]{color:hsl(var(--sdc-datepicker-month-year-text-color));font-size:var(--sdc-datepicker-month-year-text-size);font-weight:var(--sdc-datepicker-month-year-text-weight);padding:var(--sdc-datepicker-month-year-padding)}.sdc-datepicker button[brncalendarpreviousbutton],.sdc-datepicker button[brncalendarnextbutton]{cursor:pointer;color:hsl(var(--sdc-datepicker-month-year-text-color));background:hsl(var(--sdc-datepicker-month-year-button-background));transition:all .2s}.sdc-datepicker button[brncalendarpreviousbutton]:disabled,.sdc-datepicker button[brncalendarnextbutton]:disabled{opacity:.6;cursor:not-allowed;color:hsl(var(--color-neutral-100))}.sdc-datepicker button[brncalendarpreviousbutton]:hover:not(:disabled),.sdc-datepicker button[brncalendarnextbutton]:hover:not(:disabled){color:hsl(var(--sdc-datepicker-month-year-button-text-color-hover));background:hsl(var(--sdc-datepicker-month-year-button-background-hover))}.sdc-datepicker button[brncalendarcellbutton]{background:hsl(var(--sdc-datepicker-day-button-background));color:hsl(var(--sdc-datepicker-day-button-text-color));font-size:var(--sdc-datepicker-day-button-text-size);font-weight:var(--sdc-datepicker-day-button-text-weight);border-radius:var(--sdc-datepicker-day-button-border-radius);padding:var(--sdc-datepicker-day-button-padding);cursor:pointer;transition:all .2s}.sdc-datepicker button[brncalendarcellbutton]:hover:not(:disabled){background-color:hsl(var(--sdc-datepicker-day-button-hover-background));color:hsl(var(--sdc-datepicker-day-button-hover-text-color))}.sdc-datepicker button[brncalendarcellbutton]:disabled{background-color:hsl(var(--sdc-datepicker-day-button-disabled-background));color:hsl(var(--sdc-datepicker-day-button-disabled-text-color));cursor:not-allowed}.variant-primary.sdc-datepicker{--sdc-datepicker-day-button-hover-background:var(--color-primary)}.variant-secondary.sdc-datepicker{--sdc-datepicker-day-button-hover-background:var(--color-secondary)}.variant-alternative.sdc-datepicker{--sdc-datepicker-day-button-hover-background:var(--color-alternative)}.variant-success.sdc-datepicker{--sdc-datepicker-day-button-hover-background:var(--color-success)}.variant-warning.sdc-datepicker{--sdc-datepicker-day-button-hover-background:var(--color-warning)}.variant-danger.sdc-datepicker{--sdc-datepicker-day-button-hover-background:var(--color-danger)}.radius-default.sdc-datepicker{--sdc-datepicker-input-border-radius:var(--radius-default);--sdc-datepicker-day-button-border-radius:var(--radius-default)}.radius-sm.sdc-datepicker{--sdc-datepicker-input-border-radius:var(--radius-sm);--sdc-datepicker-day-button-border-radius:var(--radius-sm)}.radius-md.sdc-datepicker{--sdc-datepicker-input-border-radius:var(--radius-md);--sdc-datepicker-day-button-border-radius:var(--radius-md)}.radius-lg.sdc-datepicker{--sdc-datepicker-input-border-radius:var(--radius-lg);--sdc-datepicker-day-button-border-radius:var(--radius-lg)}.radius-xl.sdc-datepicker{--sdc-datepicker-input-border-radius:var(--radius-xl);--sdc-datepicker-day-button-border-radius:var(--radius-xl)}.dialog-overlay-margin{margin:0 1rem}.sdc-ripple{background-color:var(--sdc-button-ripple-color);pointer-events:none;border-radius:50%;animation:.6s linear ripple-animation;position:absolute;transform:scale(0)}@keyframes ripple-animation{to{opacity:0;transform:scale(4)}}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0), var(--tw-enter-translate-y,0), 0) scale3d(var(--tw-enter-scale,1), var(--tw-enter-scale,1), var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0), var(--tw-exit-translate-y,0), 0) scale3d(var(--tw-exit-scale,1), var(--tw-exit-scale,1), var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}

package/types/3ddv-software-division-components-dvm-map-loader.d.ts CHANGED Viewed

@@ -6,17 +6,19 @@ declare class MapLoaderComponent implements OnInit, OnDestroy {
     viewerService: _angular_core.InputSignal<{
         waitInitialize: () => Observable<any>;
         getObservable: (value: "load_success" | "load_start") => Observable<any>;
-    }>;
+    } | undefined>;
     logo: _angular_core.InputSignal<string>;
     color: _angular_core.InputSignal<string>;
     duration: _angular_core.InputSignal<number>;
     size: _angular_core.InputSignal<"sm" | "md">;
+    isLoading: _angular_core.InputSignal<boolean | null>;
     pill: _angular_core.Signal<ElementRef<any> | undefined>;
     pillContainer: _angular_core.Signal<ElementRef<any> | undefined>;
     container: _angular_core.Signal<ElementRef<any> | undefined>;
     private isFirstLoad;
     private varName;
     private readonly handlers;
+    private _isLoading;
     /**
      * Retorna la variable CSS para el color del ripple.
      * Necesitamos setear la variable css --ripple-color con el color accent de la configuración.
@@ -52,7 +54,7 @@ declare class MapLoaderComponent implements OnInit, OnDestroy {
      */
     private destroyComponent;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MapLoaderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MapLoaderComponent, "sdc-map-loader", never, { "viewerService": { "alias": "viewerService"; "required": true; "isSignal": true; }; "logo": { "alias": "logo"; "required": true; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "duration": { "alias": "duration"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MapLoaderComponent, "sdc-map-loader", never, { "viewerService": { "alias": "viewerService"; "required": false; "isSignal": true; }; "logo": { "alias": "logo"; "required": true; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "duration": { "alias": "duration"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 export { MapLoaderComponent };

package/types/3ddv-software-division-components-generic-add-digital-wallet.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { OnInit } from '@angular/core';
-import { BraintreePayload } from '@3ddv/software-division-components/generic/braintree';
+import { BraintreePayload, BraintreeTrigger } from '@3ddv/software-division-components/generic/braintree';
 import { FormControl } from '@angular/forms';
 declare class AddDigitalWalletComponent implements OnInit {
@@ -12,9 +12,10 @@ declare class AddDigitalWalletComponent implements OnInit {
     readonly cancelClick: _angular_core.OutputEmitterRef<void>;
     readonly useDefaultCard: _angular_core.OutputEmitterRef<boolean>;
     useDefaultCardCtrl: FormControl<boolean | null>;
+    readonly trigger: BraintreeTrigger;
     private readonly destroyRef;
     ngOnInit(): void;
-    onDigitalWalletSubmitted(data: BraintreePayload): void;
+    onSaveCard(): Promise<void>;
     onCancel(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AddDigitalWalletComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AddDigitalWalletComponent, "sdc-add-digital-wallet", never, { "token": { "alias": "token"; "required": true; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "showCancelButton": { "alias": "showCancelButton"; "required": false; "isSignal": true; }; "showIsDefaultCardCheckbox": { "alias": "showIsDefaultCardCheckbox"; "required": false; "isSignal": true; }; }, { "braintreePayload": "braintreePayload"; "cancelClick": "cancelClick"; "useDefaultCard": "useDefaultCard"; }, never, never, true, never>;

package/types/3ddv-software-division-components-generic-braintree.d.ts CHANGED Viewed

@@ -28,9 +28,24 @@ interface BraintreeBinData {
     countryOfIssuance: string;
 }
+/** Pass an instance to BraintreeComponent's [trigger] input. Call fire() to request payment. */
+declare class BraintreeTrigger {
+    private readonly _count;
+    readonly signal: _angular_core.Signal<number>;
+    private _resolve;
+    private _reject;
+    /** Triggers the drop-in UI to request a payment method. Resolves with the payload on success, rejects on error. */
+    requestPayment(): Promise<BraintreePayload>;
+    /** @internal Called by BraintreeComponent when payment succeeds */
+    settle(payload: BraintreePayload): void;
+    /** @internal Called by BraintreeComponent when payment fails */
+    fail(err: any): void;
+}
 /**
  * Braintree Drop‑in component that auto‑wires clicks
  * on the first projected element and errors if more than one.
+ * It also accepts a BraintreeTrigger to get the nonce without a projected element.
  * Recreates the drop‑in UI whenever isDigitalWalletPayment changes,
  * ensuring the container is empty before initialization.
  */
@@ -42,6 +57,8 @@ declare class BraintreeComponent implements OnDestroy {
     readonly token: _angular_core.InputSignal<string>;
     /** Toggle to require cardholder name */
     readonly isDigitalWalletPayment: _angular_core.InputSignal<boolean>;
+    /** BraintreeTrigger instance — call trigger.fire() from anywhere to request payment */
+    readonly trigger: _angular_core.InputSignal<BraintreeTrigger | undefined>;
     /** Emits when a payment payload is ready */
     readonly onSubmit: _angular_core.OutputEmitterRef<BraintreePayload>;
     /** Holds the Drop‑in instance */
@@ -51,12 +68,14 @@ declare class BraintreeComponent implements OnDestroy {
     /** Clears previous drop-in UI and recreates it */
     private initializeDropin;
     /** Requests payment method and emits payload */
-    private requestPayment;
+    requestPayment(): void;
+    /** Scrolls the drop-in container into view and focuses it — called on payment error to redirect user attention. */
+    private focusContainer;
     /** Tears down the drop-in instance if present */
     private teardownDropin;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BraintreeComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BraintreeComponent, "sdc-braintree", never, { "token": { "alias": "token"; "required": true; "isSignal": true; }; "isDigitalWalletPayment": { "alias": "isDigitalWalletPayment"; "required": false; "isSignal": true; }; }, { "onSubmit": "onSubmit"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BraintreeComponent, "sdc-braintree", never, { "token": { "alias": "token"; "required": true; "isSignal": true; }; "isDigitalWalletPayment": { "alias": "isDigitalWalletPayment"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; }, { "onSubmit": "onSubmit"; }, never, ["*"], true, never>;
 }
-export { BraintreeComponent };
+export { BraintreeComponent, BraintreeTrigger };
 export type { BraintreeBinData, BraintreeDetails, BraintreePayload };