@xosue-utils/services 0.1.0

package/fesm2022/xosue-utils-services.mjs

@@ -0,0 +1,1657 @@
+import * as i0 from '@angular/core';
+import { PLATFORM_ID, Inject, Injectable, input, booleanAttribute, computed, Component, InjectionToken, inject, ChangeDetectorRef, HostListener, ViewChild, Input, ChangeDetectionStrategy, SimpleChange, signal } from '@angular/core';
+import * as i2 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import { Subject, BehaviorSubject } from 'rxjs';
+import { trigger, transition, style, animate } from '@angular/animations';
+import { LucideDynamicIcon } from '@lucide/angular';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { DomSanitizer } from '@angular/platform-browser';
+import * as i3 from '@angular/router';
+import { RouterModule, Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
+
+class AlertService {
+    platformId;
+    alertSubject = new Subject();
+    alert$ = this.alertSubject.asObservable();
+    idCounter = 0;
+    isBrowser;
+    constructor(platformId) {
+        this.platformId = platformId;
+        this.isBrowser = isPlatformBrowser(this.platformId);
+    }
+    showAlert(message) {
+        if (!this.isBrowser)
+            return Promise.resolve(false);
+        return new Promise((resolve) => {
+            const alert = {
+                id: ++this.idCounter,
+                message,
+                mode: 'normal',
+                resolve,
+            };
+            this.alertSubject.next(alert);
+        });
+    }
+    showConfirm(message, options) {
+        if (!this.isBrowser)
+            return Promise.resolve(false);
+        return new Promise((resolve) => {
+            const alert = {
+                id: ++this.idCounter,
+                message,
+                mode: 'actions',
+                resolve,
+                onAcceptClick: options?.onAcceptClick,
+            };
+            this.alertSubject.next(alert);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AlertService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AlertService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AlertService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }] });
+
+/**
+ * Icono Lucide.
+ *
+ * HTML:
+ *   <lucide-icon name="star"></lucide-icon>
+ *   <lucide-icon name="heart" filled></lucide-icon>  // relleno + trazo
+ *
+ * SASS — variables CSS (heredan del padre):
+ *   --lucide-stroke: var(--primary)
+ *   --lucide-fill: var(--accent)
+ *   --lucide-stroke-width: 2
+ */
+class LucideIconComponent {
+    name = input.required();
+    size = input(undefined);
+    spin = input(false, { transform: booleanAttribute });
+    /** Activa relleno (--lucide-fill); el trazo se conserva. */
+    filled = input(false, { transform: booleanAttribute });
+    dimStyle = computed(() => {
+        const s = this.size();
+        if (s === undefined || s === null || s === '')
+            return null;
+        if (typeof s === 'number') {
+            return { width: `${s}px`, height: `${s}px` };
+        }
+        const trimmed = String(s).trim();
+        if (/^\d+(\.\d+)?$/.test(trimmed)) {
+            return { width: `${trimmed}px`, height: `${trimmed}px` };
+        }
+        return { width: trimmed, height: trimmed };
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: LucideIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.11", type: LucideIconComponent, isStandalone: true, selector: "lucide-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, spin: { classPropertyName: "spin", publicName: "spin", isSignal: true, isRequired: false, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.lucide-icon--filled": "filled()", "attr.filled": "filled() ? \"\" : null" } }, ngImport: i0, template: `
+    <svg
+      class="lucide-svg inline-block shrink-0 align-middle"
+      [class.lucide-svg--filled]="filled()"
+      [class.animate-spin]="spin()"
+      [style.width]="dimStyle()?.width"
+      [style.height]="dimStyle()?.height"
+      [lucideIcon]="name()"
+      aria-hidden="true"
+    />
+  `, isInline: true, dependencies: [{ kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: LucideIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lucide-icon',
+                    standalone: true,
+                    imports: [LucideDynamicIcon],
+                    host: {
+                        '[class.lucide-icon--filled]': 'filled()',
+                        '[attr.filled]': 'filled() ? "" : null',
+                    },
+                    template: `
+    <svg
+      class="lucide-svg inline-block shrink-0 align-middle"
+      [class.lucide-svg--filled]="filled()"
+      [class.animate-spin]="spin()"
+      [style.width]="dimStyle()?.width"
+      [style.height]="dimStyle()?.height"
+      [lucideIcon]="name()"
+      aria-hidden="true"
+    />
+  `,
+                }]
+        }] });
+
+const XOSUE_UTILS_SERVICES_DEFAULTS = {
+    alertAcceptLabel: 'Aceptar',
+    alertCancelLabel: 'Cancelar',
+    loadingDefaultMessage: 'Cargando',
+    sessionRegisterPath: '/auth/register',
+    sessionLoginPath: '/auth/login',
+    sessionRegisterLabel: 'Registrarse',
+    sessionLoginLabel: 'Iniciar Sesión',
+    toastSoundUrl: '/sounds/toast.mp3',
+    toastErrorSoundUrl: '/sounds/error-toast.mp3',
+    toastSuccessGifUrl: '/gifs/success-toast.gif',
+    toastDurationsMs: {
+        success: 1000,
+        info: 1000,
+        warning: 5000,
+        error: 5000,
+    },
+    mediaFileNameFallback: 'Archivo',
+    browserNotificationIconUrl: '/favicon.ico',
+    browserNotificationSoundUrl: '/sounds/toast.mp3',
+    browserNotificationPermissionPrompt: '¿Permitir notificaciones del navegador para avisarte cuando no estés en la pestaña?',
+};
+const XOSUE_UTILS_SERVICES_CONFIG = new InjectionToken('XOSUE_UTILS_SERVICES_CONFIG', {
+    providedIn: 'root',
+    factory: () => ({ ...XOSUE_UTILS_SERVICES_DEFAULTS }),
+});
+function resolveXosueUtilsServicesConfig(config) {
+    return {
+        ...XOSUE_UTILS_SERVICES_DEFAULTS,
+        ...config,
+        toastDurationsMs: {
+            ...XOSUE_UTILS_SERVICES_DEFAULTS.toastDurationsMs,
+            ...config?.toastDurationsMs,
+        },
+    };
+}
+/**
+ * Provide overlay services configuration in the host app.
+ *
+ * ```ts
+ * providers: [
+ *   provideXosueUtilsServices({
+ *     sessionLoginPath: '/login',
+ *     toastSoundUrl: '/assets/sounds/toast.mp3',
+ *   }),
+ * ]
+ * ```
+ */
+function provideXosueUtilsServices(config) {
+    return [
+        {
+            provide: XOSUE_UTILS_SERVICES_CONFIG,
+            useValue: resolveXosueUtilsServicesConfig(config),
+        },
+    ];
+}
+
+class AlertServiceComponent {
+    alertService;
+    alerts = [];
+    config = inject(XOSUE_UTILS_SERVICES_CONFIG);
+    constructor(alertService) {
+        this.alertService = alertService;
+    }
+    ngOnInit() {
+        this.alertService.alert$.subscribe((alert) => {
+            this.alerts.push(alert);
+        });
+    }
+    removeAlert(id) {
+        this.alerts = this.alerts.filter((a) => a.id !== id);
+    }
+    accept(alert) {
+        try {
+            alert.onAcceptClick?.();
+        }
+        catch {
+            /* ignore */
+        }
+        alert.resolve(true);
+        this.removeAlert(alert.id);
+    }
+    cancel(alert) {
+        alert.resolve(false);
+        this.removeAlert(alert.id);
+    }
+    trackById(_index, item) {
+        return item.id;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AlertServiceComponent, deps: [{ token: AlertService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: AlertServiceComponent, isStandalone: true, selector: "alert-service", ngImport: i0, template: "<div class=\"AlertOverlay\" *ngIf=\"alerts.length > 0\">\r\n  <div\r\n    class=\"Alert\"\r\n    *ngFor=\"let alert of alerts; trackBy: trackById\"\r\n    [@alertAnimation]\r\n  >\r\n    <div class=\"AlertContent\">\r\n      <div class=\"AlertIcon\">\r\n        <lucide-icon name=\"circle-alert\"></lucide-icon>\r\n      </div>\r\n      <div class=\"AlertMessage\">\r\n        {{ alert.message }}\r\n      </div>\r\n      <div class=\"AlertActions\">\r\n        <button\r\n          *ngIf=\"alert.mode === 'normal'\"\r\n          type=\"button\"\r\n          class=\"AlertButton AcceptButton\"\r\n          (click)=\"accept(alert)\"\r\n        >\r\n          {{ config.alertAcceptLabel }}\r\n        </button>\r\n        <ng-container *ngIf=\"alert.mode === 'actions'\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"AlertButton CancelButton\"\r\n            (click)=\"cancel(alert)\"\r\n          >\r\n            {{ config.alertCancelLabel }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"AlertButton AcceptButton\"\r\n            (click)=\"accept(alert)\"\r\n          >\r\n            {{ config.alertAcceptLabel }}\r\n          </button>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".AlertOverlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:color-mix(in srgb,var(--text-base) 50%,transparent);display:flex;align-items:center;justify-content:center;z-index:10000;pointer-events:auto;padding:12px}.Alert{background-color:var(--surface);border-radius:var(--radius-lg);box-shadow:0 10px 25px color-mix(in srgb,var(--text-base) 20%,transparent);max-width:400px;width:100%;margin:12px;pointer-events:auto}.AlertContent{padding:12px;display:flex;flex-direction:column;gap:8px}.AlertIcon{display:flex;justify-content:center}.AlertIcon lucide-icon{--lucide-stroke: var(--icon-muted);font-size:2rem}.AlertIcon lucide-icon .lucide-svg{width:2rem;height:2rem}.AlertMessage{text-align:center;font-size:1rem;color:var(--text-1, var(--text-base));line-height:1.5}.AlertActions{display:flex;gap:4px;justify-content:flex-end;margin-top:4px}.AlertButton{padding:8px 16px;border:none;border-radius:var(--radius-md);font-size:.875rem;font-weight:500;cursor:pointer}.AcceptButton{background-color:var(--primary);color:var(--text-inverted)}.CancelButton{background-color:var(--bg, var(--surface-secondary, var(--surface-2)));color:var(--text-base)}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+            trigger('alertAnimation', [
+                transition(':enter', [
+                    style({ opacity: 0, transform: 'scale(0.9)' }),
+                    animate('200ms ease-out', style({ opacity: 1, transform: 'scale(1)' })),
+                ]),
+                transition(':leave', [
+                    animate('200ms ease-in', style({ opacity: 0, transform: 'scale(0.9)' })),
+                ]),
+            ]),
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AlertServiceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'alert-service', standalone: true, imports: [LucideIconComponent, CommonModule], animations: [
+                        trigger('alertAnimation', [
+                            transition(':enter', [
+                                style({ opacity: 0, transform: 'scale(0.9)' }),
+                                animate('200ms ease-out', style({ opacity: 1, transform: 'scale(1)' })),
+                            ]),
+                            transition(':leave', [
+                                animate('200ms ease-in', style({ opacity: 0, transform: 'scale(0.9)' })),
+                            ]),
+                        ]),
+                    ], template: "<div class=\"AlertOverlay\" *ngIf=\"alerts.length > 0\">\r\n  <div\r\n    class=\"Alert\"\r\n    *ngFor=\"let alert of alerts; trackBy: trackById\"\r\n    [@alertAnimation]\r\n  >\r\n    <div class=\"AlertContent\">\r\n      <div class=\"AlertIcon\">\r\n        <lucide-icon name=\"circle-alert\"></lucide-icon>\r\n      </div>\r\n      <div class=\"AlertMessage\">\r\n        {{ alert.message }}\r\n      </div>\r\n      <div class=\"AlertActions\">\r\n        <button\r\n          *ngIf=\"alert.mode === 'normal'\"\r\n          type=\"button\"\r\n          class=\"AlertButton AcceptButton\"\r\n          (click)=\"accept(alert)\"\r\n        >\r\n          {{ config.alertAcceptLabel }}\r\n        </button>\r\n        <ng-container *ngIf=\"alert.mode === 'actions'\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"AlertButton CancelButton\"\r\n            (click)=\"cancel(alert)\"\r\n          >\r\n            {{ config.alertCancelLabel }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"AlertButton AcceptButton\"\r\n            (click)=\"accept(alert)\"\r\n          >\r\n            {{ config.alertAcceptLabel }}\r\n          </button>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".AlertOverlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:color-mix(in srgb,var(--text-base) 50%,transparent);display:flex;align-items:center;justify-content:center;z-index:10000;pointer-events:auto;padding:12px}.Alert{background-color:var(--surface);border-radius:var(--radius-lg);box-shadow:0 10px 25px color-mix(in srgb,var(--text-base) 20%,transparent);max-width:400px;width:100%;margin:12px;pointer-events:auto}.AlertContent{padding:12px;display:flex;flex-direction:column;gap:8px}.AlertIcon{display:flex;justify-content:center}.AlertIcon lucide-icon{--lucide-stroke: var(--icon-muted);font-size:2rem}.AlertIcon lucide-icon .lucide-svg{width:2rem;height:2rem}.AlertMessage{text-align:center;font-size:1rem;color:var(--text-1, var(--text-base));line-height:1.5}.AlertActions{display:flex;gap:4px;justify-content:flex-end;margin-top:4px}.AlertButton{padding:8px 16px;border:none;border-radius:var(--radius-md);font-size:.875rem;font-weight:500;cursor:pointer}.AcceptButton{background-color:var(--primary);color:var(--text-inverted)}.CancelButton{background-color:var(--bg, var(--surface-secondary, var(--surface-2)));color:var(--text-base)}\n"] }]
+        }], ctorParameters: () => [{ type: AlertService }] });
+
+class ToastService {
+    platformId;
+    ngZone;
+    toastSubject = new Subject();
+    toast$ = this.toastSubject.asObservable();
+    idCounter = 0;
+    isBrowser;
+    config = inject(XOSUE_UTILS_SERVICES_CONFIG);
+    constructor(platformId, ngZone) {
+        this.platformId = platformId;
+        this.ngZone = ngZone;
+        this.isBrowser = isPlatformBrowser(this.platformId);
+    }
+    showToast(type, message) {
+        if (!this.isBrowser)
+            return;
+        const toast = { id: ++this.idCounter, type, message };
+        this.toastSubject.next(toast);
+        this.ngZone.runOutsideAngular(() => this.playSound(type));
+    }
+    playSound(type) {
+        if (type === 'info')
+            return;
+        try {
+            const src = type === 'error' ? this.config.toastErrorSoundUrl : this.config.toastSoundUrl;
+            const audio = new Audio(src);
+            void audio.play().catch(() => { });
+        }
+        catch {
+            /* ignore */
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ToastService, deps: [{ token: PLATFORM_ID }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: i0.NgZone }] });
+
+class ToastServiceComponent {
+    toastService;
+    toasts = [];
+    config = inject(XOSUE_UTILS_SERVICES_CONFIG);
+    constructor(toastService) {
+        this.toastService = toastService;
+    }
+    ngOnInit() {
+        this.toastService.toast$.subscribe((toast) => {
+            this.toasts.push(toast);
+            const durationMs = this.config.toastDurationsMs[toast.type] ?? 5000;
+            setTimeout(() => this.removeToast(toast.id), durationMs);
+        });
+    }
+    successGifSrc(toast) {
+        const base = this.config.toastSuccessGifUrl;
+        const sep = base.includes('?') ? '&' : '?';
+        return `${base}${sep}t=${toast.id}`;
+    }
+    removeToast(id) {
+        this.toasts = this.toasts.filter((t) => t.id !== id);
+    }
+    trackById(_index, item) {
+        return item.id;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ToastServiceComponent, deps: [{ token: ToastService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: ToastServiceComponent, isStandalone: true, selector: "toast-service", ngImport: i0, template: "<div class=\"ToastOverlay\">\r\n  <div class=\"ToastContainer\">\r\n    <div\r\n      class=\"Toast\"\r\n      *ngFor=\"let toast of toasts; trackBy: trackById\"\r\n      [@toastAnimation]\r\n      [ngClass]=\"toast.type\"\r\n      (click)=\"removeToast(toast.id)\"\r\n    >\r\n      <div class=\"Icon\" [ngSwitch]=\"toast.type\">\r\n        <lucide-icon name=\"info\" *ngSwitchCase=\"'info'\"></lucide-icon>\r\n        <lucide-icon name=\"circle-check\" *ngSwitchCase=\"'success'\"></lucide-icon>\r\n        <lucide-icon name=\"circle-alert\" *ngSwitchCase=\"'error'\"></lucide-icon>\r\n        <lucide-icon name=\"triangle-alert\" *ngSwitchCase=\"'warning'\"></lucide-icon>\r\n        <lucide-icon name=\"bell\" *ngSwitchDefault></lucide-icon>\r\n      </div>\r\n\r\n      <div class=\"Text\">\r\n        {{ toast.message }}\r\n      </div>\r\n\r\n      <img\r\n        *ngIf=\"toast.type === 'success' && config.toastSuccessGifUrl\"\r\n        class=\"SuccessToastGif\"\r\n        [attr.src]=\"successGifSrc(toast)\"\r\n        alt=\"\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ToastOverlay{position:fixed;top:0;left:0;width:100%;pointer-events:none;z-index:9999}.ToastContainer{display:flex;width:calc(100% - 20px);max-width:500px;flex-direction:column;gap:8px;margin:0 auto;padding:16px;pointer-events:none;align-items:center}.Toast{padding:12px;border:1px solid;border-radius:var(--radius-lg);cursor:pointer;font-weight:400;display:flex;gap:8px;pointer-events:auto;position:relative;overflow:visible}.SuccessToastGif{position:absolute;right:-5px;bottom:0;transform:translate(40%,10px);width:72px;height:72px;object-fit:contain;pointer-events:none}.Toast.success{background:var(--success-bg);color:var(--success-text);border-color:var(--success-border)}.Toast.warning{background:var(--warning-bg);color:var(--warning-text);border-color:var(--warning-border)}.Toast.error{background:var(--error-bg);color:var(--error-text);border-color:var(--error-border)}.Toast.info{background:var(--info-bg);color:var(--info-text);border-color:var(--info-border)}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }], animations: [
+            trigger('toastAnimation', [
+                transition(':enter', [
+                    style({ opacity: 0, transform: 'translateY(-20px)' }),
+                    animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
+                ]),
+                transition(':leave', [
+                    animate('300ms ease-in', style({ opacity: 0, transform: 'translateY(-20px)' })),
+                ]),
+            ]),
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ToastServiceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'toast-service', standalone: true, imports: [LucideIconComponent, CommonModule], animations: [
+                        trigger('toastAnimation', [
+                            transition(':enter', [
+                                style({ opacity: 0, transform: 'translateY(-20px)' }),
+                                animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
+                            ]),
+                            transition(':leave', [
+                                animate('300ms ease-in', style({ opacity: 0, transform: 'translateY(-20px)' })),
+                            ]),
+                        ]),
+                    ], template: "<div class=\"ToastOverlay\">\r\n  <div class=\"ToastContainer\">\r\n    <div\r\n      class=\"Toast\"\r\n      *ngFor=\"let toast of toasts; trackBy: trackById\"\r\n      [@toastAnimation]\r\n      [ngClass]=\"toast.type\"\r\n      (click)=\"removeToast(toast.id)\"\r\n    >\r\n      <div class=\"Icon\" [ngSwitch]=\"toast.type\">\r\n        <lucide-icon name=\"info\" *ngSwitchCase=\"'info'\"></lucide-icon>\r\n        <lucide-icon name=\"circle-check\" *ngSwitchCase=\"'success'\"></lucide-icon>\r\n        <lucide-icon name=\"circle-alert\" *ngSwitchCase=\"'error'\"></lucide-icon>\r\n        <lucide-icon name=\"triangle-alert\" *ngSwitchCase=\"'warning'\"></lucide-icon>\r\n        <lucide-icon name=\"bell\" *ngSwitchDefault></lucide-icon>\r\n      </div>\r\n\r\n      <div class=\"Text\">\r\n        {{ toast.message }}\r\n      </div>\r\n\r\n      <img\r\n        *ngIf=\"toast.type === 'success' && config.toastSuccessGifUrl\"\r\n        class=\"SuccessToastGif\"\r\n        [attr.src]=\"successGifSrc(toast)\"\r\n        alt=\"\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ToastOverlay{position:fixed;top:0;left:0;width:100%;pointer-events:none;z-index:9999}.ToastContainer{display:flex;width:calc(100% - 20px);max-width:500px;flex-direction:column;gap:8px;margin:0 auto;padding:16px;pointer-events:none;align-items:center}.Toast{padding:12px;border:1px solid;border-radius:var(--radius-lg);cursor:pointer;font-weight:400;display:flex;gap:8px;pointer-events:auto;position:relative;overflow:visible}.SuccessToastGif{position:absolute;right:-5px;bottom:0;transform:translate(40%,10px);width:72px;height:72px;object-fit:contain;pointer-events:none}.Toast.success{background:var(--success-bg);color:var(--success-text);border-color:var(--success-border)}.Toast.warning{background:var(--warning-bg);color:var(--warning-text);border-color:var(--warning-border)}.Toast.error{background:var(--error-bg);color:var(--error-text);border-color:var(--error-border)}.Toast.info{background:var(--info-bg);color:var(--info-text);border-color:var(--info-border)}\n"] }]
+        }], ctorParameters: () => [{ type: ToastService }] });
+
+class ContextMenuService {
+    platformId;
+    requestSubject = new Subject();
+    request$ = this.requestSubject.asObservable();
+    closeSubject = new Subject();
+    close$ = this.closeSubject.asObservable();
+    idCounter = 0;
+    isBrowser;
+    constructor(platformId) {
+        this.platformId = platformId;
+        this.isBrowser = isPlatformBrowser(this.platformId);
+    }
+    /** Menú contextual en el punto del clic. Solo uno activo a la vez. */
+    openMenu(event, options, menuOptions) {
+        if (!this.isBrowser || options.length === 0) {
+            return Promise.resolve(null);
+        }
+        if (event instanceof MouseEvent && menuOptions?.preventDefault !== false) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        const { x, y } = this.pointFromEvent(event);
+        return new Promise((resolve) => {
+            const request = {
+                id: ++this.idCounter,
+                kind: 'menu',
+                x,
+                y,
+                title: menuOptions?.title,
+                options,
+                resolve,
+            };
+            this.requestSubject.next(request);
+        });
+    }
+    /** Globo informativo en el punto del clic. */
+    openInfo(event, info) {
+        if (!this.isBrowser)
+            return Promise.resolve();
+        const { x, y } = this.pointFromEvent(event);
+        return new Promise((resolve) => {
+            const request = {
+                id: ++this.idCounter,
+                kind: 'info',
+                x,
+                y,
+                info,
+                resolve,
+            };
+            this.requestSubject.next(request);
+        });
+    }
+    /** Cierra el menú contextual activo desde código. */
+    close() {
+        if (!this.isBrowser)
+            return;
+        this.closeSubject.next();
+    }
+    pointFromEvent(event) {
+        if ('clientX' in event && 'clientY' in event) {
+            return { x: event.clientX, y: event.clientY };
+        }
+        return { x: 0, y: 0 };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ContextMenuService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ContextMenuService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ContextMenuService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }] });
+
+class ContextMenuServiceComponent {
+    contextMenuService;
+    platformId;
+    static VIEWPORT_EDGE_INSET = 5;
+    static ANCHOR_OFFSET = 8;
+    cdr = inject(ChangeDetectorRef);
+    panelRef;
+    active = null;
+    position = { x: 0, y: 0 };
+    panelVisible = false;
+    anchor = { x: 0, y: 0 };
+    /** Timestamp hasta el cual ignoramos cierres (evita que el gesto de apertura cierre el menú). */
+    ignoreOutsideUntil = 0;
+    sub;
+    closeSub;
+    scrollListener = () => {
+        if (this.active)
+            this.dismissCurrent(null);
+    };
+    outsidePointerListener = (event) => {
+        this.handleOutsideEvent(event);
+    };
+    outsideContextMenuListener = (event) => {
+        this.handleOutsideEvent(event);
+    };
+    constructor(contextMenuService, platformId) {
+        this.contextMenuService = contextMenuService;
+        this.platformId = platformId;
+    }
+    ngOnInit() {
+        this.sub = this.contextMenuService.request$.subscribe((request) => {
+            this.dismissCurrent(null);
+            this.active = request;
+            this.anchor = { x: request.x, y: request.y };
+            this.position = {
+                x: request.x + ContextMenuServiceComponent.ANCHOR_OFFSET,
+                y: request.y + ContextMenuServiceComponent.ANCHOR_OFFSET,
+            };
+            this.panelVisible = true;
+            // Ignorar el mismo gesto de apertura y el click sintético post-contextmenu.
+            this.ignoreOutsideUntil = performance.now() + 180;
+            this.cdr.detectChanges();
+            this.applyClampedPosition();
+        });
+        this.closeSub = this.contextMenuService.close$.subscribe(() => {
+            this.dismissCurrent(null);
+        });
+        if (isPlatformBrowser(this.platformId)) {
+            document.addEventListener('scroll', this.scrollListener, true);
+            // Captura: no depende de que el click burbujee hasta document.
+            document.addEventListener('pointerdown', this.outsidePointerListener, true);
+            document.addEventListener('contextmenu', this.outsideContextMenuListener, true);
+        }
+    }
+    ngOnDestroy() {
+        this.dismissCurrent(null);
+        this.sub?.unsubscribe();
+        this.closeSub?.unsubscribe();
+        if (isPlatformBrowser(this.platformId)) {
+            document.removeEventListener('scroll', this.scrollListener, true);
+            document.removeEventListener('pointerdown', this.outsidePointerListener, true);
+            document.removeEventListener('contextmenu', this.outsideContextMenuListener, true);
+        }
+    }
+    onWindowResize() {
+        if (this.active && this.panelVisible) {
+            this.applyClampedPosition();
+        }
+    }
+    onEscape(event) {
+        if (event.key === 'Escape' && this.active) {
+            this.dismissCurrent(null);
+        }
+    }
+    selectOption(option) {
+        if (!this.active || this.active.kind !== 'menu' || option.disabled)
+            return;
+        const request = this.active;
+        this.clearMenu();
+        this.cdr.detectChanges();
+        request.resolve(option);
+    }
+    handleOutsideEvent(event) {
+        if (!this.active)
+            return;
+        if (performance.now() < this.ignoreOutsideUntil)
+            return;
+        const target = event.target;
+        const panel = this.panelRef?.nativeElement;
+        if (panel && target && panel.contains(target))
+            return;
+        this.dismissCurrent(null);
+    }
+    dismissCurrent(value) {
+        if (!this.active)
+            return;
+        const request = this.active;
+        this.clearMenu();
+        this.cdr.detectChanges();
+        if (request.kind === 'menu') {
+            request.resolve(value);
+        }
+        else {
+            request.resolve();
+        }
+    }
+    clearMenu() {
+        this.active = null;
+        this.panelVisible = false;
+        this.ignoreOutsideUntil = 0;
+    }
+    applyClampedPosition() {
+        const panel = this.panelRef?.nativeElement;
+        if (!panel)
+            return;
+        const inset = ContextMenuServiceComponent.VIEWPORT_EDGE_INSET;
+        const gap = ContextMenuServiceComponent.ANCHOR_OFFSET;
+        const viewportW = document.documentElement.clientWidth;
+        const viewportH = document.documentElement.clientHeight;
+        const w = panel.offsetWidth || 220;
+        const h = panel.offsetHeight || 120;
+        const minX = inset;
+        const maxX = Math.max(inset, viewportW - inset - w);
+        const minY = inset;
+        const maxY = Math.max(inset, viewportH - inset - h);
+        let x = this.anchor.x + gap;
+        let y = this.anchor.y + gap;
+        if (x > maxX) {
+            x = this.anchor.x - w - gap;
+        }
+        if (y > maxY) {
+            y = this.anchor.y - h - gap;
+        }
+        this.position = {
+            x: Math.max(minX, Math.min(x, maxX)),
+            y: Math.max(minY, Math.min(y, maxY)),
+        };
+        this.cdr.detectChanges();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ContextMenuServiceComponent, deps: [{ token: ContextMenuService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: ContextMenuServiceComponent, isStandalone: true, selector: "context-menu-service", host: { listeners: { "window:resize": "onWindowResize()", "document:keydown": "onEscape($event)" } }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "@if (active) {\r\n  <div class=\"ContextMenuOverlay\" aria-hidden=\"true\">\r\n    <div\r\n      #panel\r\n      class=\"ContextMenuPanel\"\r\n      [class.ContextMenuPanel--visible]=\"panelVisible\"\r\n      [class.ContextMenuPanel--menu]=\"active.kind === 'menu'\"\r\n      [class.ContextMenuPanel--info]=\"active.kind === 'info'\"\r\n      [style.left.px]=\"position.x\"\r\n      [style.top.px]=\"position.y\"\r\n      role=\"menu\"\r\n      [attr.aria-label]=\"active.kind === 'info' ? active.info.title : (active.title || 'Opciones')\"\r\n      [attr.aria-hidden]=\"!panelVisible\"\r\n      (contextmenu)=\"$event.preventDefault()\"\r\n    >\r\n      @if (active.kind === 'menu') {\r\n        @if (active.title) {\r\n          <p class=\"ContextMenuMenuTitle\">{{ active.title }}</p>\r\n        }\r\n        @for (option of active.options; track $index) {\r\n          @if (option.separatorBefore) {\r\n            <div class=\"ContextMenuMenuSep\" aria-hidden=\"true\"></div>\r\n          }\r\n          <button\r\n            type=\"button\"\r\n            class=\"ContextMenuMenuItem\"\r\n            [class.ContextMenuMenuItem--danger]=\"option.danger\"\r\n            [class.ContextMenuMenuItem--disabled]=\"option.disabled\"\r\n            [disabled]=\"option.disabled\"\r\n            role=\"menuitem\"\r\n            (click)=\"selectOption(option)\"\r\n          >\r\n            <lucide-icon [name]=\"option.icon\" [size]=\"14\"></lucide-icon>\r\n            <span>{{ option.name }}</span>\r\n          </button>\r\n        }\r\n      } @else {\r\n        <div class=\"ContextMenuInfo\">\r\n          <div class=\"ContextMenuInfoHeader\">\r\n            <lucide-icon [name]=\"active.info.icon\" [size]=\"18\"></lucide-icon>\r\n            <strong>{{ active.info.title }}</strong>\r\n          </div>\r\n          <p class=\"ContextMenuInfoBody\">{{ active.info.info }}</p>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".ContextMenuOverlay{position:fixed;inset:5px;pointer-events:none;z-index:10001}.ContextMenuPanel{position:fixed;pointer-events:none;visibility:hidden;opacity:0;min-width:10rem;max-width:min(18rem,100vw - 10px);max-height:calc(100vh - 10px);overflow-x:hidden;overflow-y:auto;background-color:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 8px 24px var(--shadow-color);transition:opacity .1s ease-out}.ContextMenuPanel--visible{visibility:visible;opacity:1;pointer-events:auto}.ContextMenuPanel--menu{min-width:220px;max-width:min(280px,100vw - 16px);padding:4px;border-radius:12px;border:1px solid var(--border);background:var(--surface);box-shadow:0 12px 40px var(--shadow-color),0 0 0 .5px var(--border);display:flex;flex-direction:column;gap:2px;animation:cupertino-menu-in .1s ease-out}.ContextMenuMenuTitle{margin:0;padding:4px 8px 2px;font-size:.7rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ContextMenuMenuSep{height:1px;margin:2px 4px;background:var(--surface-2, var(--border))}.ContextMenuMenuItem{display:flex;align-items:center;gap:8px;width:100%;padding:4px 8px;border:none;border-radius:8px;background:transparent;color:var(--text-base);font:inherit;font-size:.875rem;text-align:left;cursor:pointer}.ContextMenuMenuItem lucide-icon{flex-shrink:0;--lucide-stroke: var(--icon-base)}.ContextMenuMenuItem:hover,.ContextMenuMenuItem:focus-visible{outline:none;background:var(--info-bg, var(--primary-soft, var(--surface-2)))}.ContextMenuMenuItem--danger{color:var(--error-text)}.ContextMenuMenuItem--danger lucide-icon{--lucide-stroke: var(--error-text)}.ContextMenuMenuItem--danger:hover,.ContextMenuMenuItem--danger:focus-visible{background:var(--error-bg)}.ContextMenuMenuItem--disabled,.ContextMenuMenuItem:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ContextMenuPanel--info{padding:0}.ContextMenuInfo{padding:12px;display:flex;flex-direction:column;gap:8px}.ContextMenuInfoHeader{display:flex;align-items:center;gap:8px;color:var(--text-base)}.ContextMenuInfoHeader strong{font-size:.9rem;font-weight:600}.ContextMenuInfoHeader lucide-icon{flex-shrink:0;--lucide-stroke: var(--primary)}.ContextMenuInfoBody{margin:0;font-size:.82rem;line-height:1.45;color:var(--text-label)}@keyframes cupertino-menu-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ContextMenuServiceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'context-menu-service', standalone: true, imports: [CommonModule, LucideIconComponent], template: "@if (active) {\r\n  <div class=\"ContextMenuOverlay\" aria-hidden=\"true\">\r\n    <div\r\n      #panel\r\n      class=\"ContextMenuPanel\"\r\n      [class.ContextMenuPanel--visible]=\"panelVisible\"\r\n      [class.ContextMenuPanel--menu]=\"active.kind === 'menu'\"\r\n      [class.ContextMenuPanel--info]=\"active.kind === 'info'\"\r\n      [style.left.px]=\"position.x\"\r\n      [style.top.px]=\"position.y\"\r\n      role=\"menu\"\r\n      [attr.aria-label]=\"active.kind === 'info' ? active.info.title : (active.title || 'Opciones')\"\r\n      [attr.aria-hidden]=\"!panelVisible\"\r\n      (contextmenu)=\"$event.preventDefault()\"\r\n    >\r\n      @if (active.kind === 'menu') {\r\n        @if (active.title) {\r\n          <p class=\"ContextMenuMenuTitle\">{{ active.title }}</p>\r\n        }\r\n        @for (option of active.options; track $index) {\r\n          @if (option.separatorBefore) {\r\n            <div class=\"ContextMenuMenuSep\" aria-hidden=\"true\"></div>\r\n          }\r\n          <button\r\n            type=\"button\"\r\n            class=\"ContextMenuMenuItem\"\r\n            [class.ContextMenuMenuItem--danger]=\"option.danger\"\r\n            [class.ContextMenuMenuItem--disabled]=\"option.disabled\"\r\n            [disabled]=\"option.disabled\"\r\n            role=\"menuitem\"\r\n            (click)=\"selectOption(option)\"\r\n          >\r\n            <lucide-icon [name]=\"option.icon\" [size]=\"14\"></lucide-icon>\r\n            <span>{{ option.name }}</span>\r\n          </button>\r\n        }\r\n      } @else {\r\n        <div class=\"ContextMenuInfo\">\r\n          <div class=\"ContextMenuInfoHeader\">\r\n            <lucide-icon [name]=\"active.info.icon\" [size]=\"18\"></lucide-icon>\r\n            <strong>{{ active.info.title }}</strong>\r\n          </div>\r\n          <p class=\"ContextMenuInfoBody\">{{ active.info.info }}</p>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".ContextMenuOverlay{position:fixed;inset:5px;pointer-events:none;z-index:10001}.ContextMenuPanel{position:fixed;pointer-events:none;visibility:hidden;opacity:0;min-width:10rem;max-width:min(18rem,100vw - 10px);max-height:calc(100vh - 10px);overflow-x:hidden;overflow-y:auto;background-color:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 8px 24px var(--shadow-color);transition:opacity .1s ease-out}.ContextMenuPanel--visible{visibility:visible;opacity:1;pointer-events:auto}.ContextMenuPanel--menu{min-width:220px;max-width:min(280px,100vw - 16px);padding:4px;border-radius:12px;border:1px solid var(--border);background:var(--surface);box-shadow:0 12px 40px var(--shadow-color),0 0 0 .5px var(--border);display:flex;flex-direction:column;gap:2px;animation:cupertino-menu-in .1s ease-out}.ContextMenuMenuTitle{margin:0;padding:4px 8px 2px;font-size:.7rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ContextMenuMenuSep{height:1px;margin:2px 4px;background:var(--surface-2, var(--border))}.ContextMenuMenuItem{display:flex;align-items:center;gap:8px;width:100%;padding:4px 8px;border:none;border-radius:8px;background:transparent;color:var(--text-base);font:inherit;font-size:.875rem;text-align:left;cursor:pointer}.ContextMenuMenuItem lucide-icon{flex-shrink:0;--lucide-stroke: var(--icon-base)}.ContextMenuMenuItem:hover,.ContextMenuMenuItem:focus-visible{outline:none;background:var(--info-bg, var(--primary-soft, var(--surface-2)))}.ContextMenuMenuItem--danger{color:var(--error-text)}.ContextMenuMenuItem--danger lucide-icon{--lucide-stroke: var(--error-text)}.ContextMenuMenuItem--danger:hover,.ContextMenuMenuItem--danger:focus-visible{background:var(--error-bg)}.ContextMenuMenuItem--disabled,.ContextMenuMenuItem:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ContextMenuPanel--info{padding:0}.ContextMenuInfo{padding:12px;display:flex;flex-direction:column;gap:8px}.ContextMenuInfoHeader{display:flex;align-items:center;gap:8px;color:var(--text-base)}.ContextMenuInfoHeader strong{font-size:.9rem;font-weight:600}.ContextMenuInfoHeader lucide-icon{flex-shrink:0;--lucide-stroke: var(--primary)}.ContextMenuInfoBody{margin:0;font-size:.82rem;line-height:1.45;color:var(--text-label)}@keyframes cupertino-menu-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}\n"] }]
+        }], ctorParameters: () => [{ type: ContextMenuService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }], propDecorators: { panelRef: [{
+                type: ViewChild,
+                args: ['panel']
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+class FieldHelpTooltipComponent {
+    contextMenuService = inject(ContextMenuService);
+    text = '';
+    title = 'Información del campo';
+    showHelp(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        void this.contextMenuService.openInfo(event, {
+            icon: 'info',
+            title: this.title,
+            info: this.text,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FieldHelpTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: FieldHelpTooltipComponent, isStandalone: true, selector: "field-help-tooltip", inputs: { text: "text", title: "title" }, ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  class=\"HelpButton\"\r\n  (click)=\"showHelp($event)\"\r\n  aria-label=\"Informaci\u00F3n del campo\"\r\n>\r\n  <lucide-icon name=\"info\"></lucide-icon>\r\n</button>\r\n", styles: [":host{display:inline-flex;flex-shrink:0}.HelpButton{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:none;border-radius:50%;background:transparent;color:var(--text-muted);cursor:pointer}.HelpButton lucide-icon{width:15px;height:15px}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FieldHelpTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'field-help-tooltip', standalone: true, imports: [LucideIconComponent], template: "<button\r\n  type=\"button\"\r\n  class=\"HelpButton\"\r\n  (click)=\"showHelp($event)\"\r\n  aria-label=\"Informaci\u00F3n del campo\"\r\n>\r\n  <lucide-icon name=\"info\"></lucide-icon>\r\n</button>\r\n", styles: [":host{display:inline-flex;flex-shrink:0}.HelpButton{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:none;border-radius:50%;background:transparent;color:var(--text-muted);cursor:pointer}.HelpButton lucide-icon{width:15px;height:15px}\n"] }]
+        }], propDecorators: { text: [{
+                type: Input,
+                args: [{ required: true }]
+            }], title: [{
+                type: Input
+            }] } });
+
+class MediaViewerService {
+    config = inject(XOSUE_UTILS_SERVICES_CONFIG);
+    closedState = () => ({
+        open: false,
+        mode: 'image',
+        type: undefined,
+        url: null,
+        urlSafe: null,
+        downloadUrl: null,
+        fileName: this.config.mediaFileNameFallback,
+        downloadContext: null,
+        autoDetectType: true,
+    });
+    state = new BehaviorSubject(this.closedState());
+    state$ = this.state.asObservable();
+    onDownloadRequestedCallback = null;
+    /**
+     * Opens the viewer with already-resolved URLs.
+     * Host is responsible for CDN/crypto resolution before calling `open()`.
+     */
+    open(params) {
+        const { onDownloadRequested, type, downloadContext, autoDetectType, fileName, ...rest } = params;
+        this.onDownloadRequestedCallback = onDownloadRequested ?? null;
+        this.state.next({
+            open: true,
+            type: type ?? null,
+            downloadContext: downloadContext ?? null,
+            autoDetectType: autoDetectType ?? true,
+            mode: rest.mode,
+            url: rest.url,
+            urlSafe: rest.urlSafe,
+            downloadUrl: rest.downloadUrl,
+            fileName: fileName?.trim() || this.config.mediaFileNameFallback,
+        });
+    }
+    close() {
+        this.onDownloadRequestedCallback = null;
+        this.state.next(this.closedState());
+    }
+    handleDownloadRequested(context) {
+        this.onDownloadRequestedCallback?.(context);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MediaViewerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MediaViewerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MediaViewerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/** Resoluciones usadas en el visor (referencia para otros componentes). */
+const IMAGE_MULTIRES_WIDTHS = [150, 400, 800];
+/**
+ * Visor de imagen: una sola carga del original, sin progresividad (sin versión pequeña previa).
+ */
+class ImageViewerComponent {
+    cdr;
+    src = null;
+    ready = false;
+    loadError = false;
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    ngOnChanges(changes) {
+        if (changes['src']) {
+            this.ready = false;
+            this.loadError = false;
+            this.cdr.markForCheck();
+        }
+    }
+    onLoad() {
+        this.ready = true;
+        this.cdr.markForCheck();
+    }
+    onError() {
+        this.loadError = true;
+        this.cdr.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ImageViewerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: ImageViewerComponent, isStandalone: true, selector: "app-image-viewer", inputs: { src: "src" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ImageViewer\" *ngIf=\"src\">\r\n  <div class=\"RainbowLoader\" *ngIf=\"!ready && !loadError\"></div>\r\n  <img\r\n    *ngIf=\"src\"\r\n    class=\"Layer\"\r\n    [class.visible]=\"ready\"\r\n    [src]=\"src\"\r\n    [alt]=\"\"\r\n    decoding=\"async\"\r\n    (load)=\"onLoad()\"\r\n    (error)=\"onError()\"\r\n  />\r\n  <div *ngIf=\"loadError\" class=\"FallbackNote\">\r\n    <span>Error al cargar la imagen</span>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%;min-height:120px;filter:none;background:var(--media-viewer-body-bg, var(--surface-inverse, var(--text-base)))}.ImageViewer{position:relative;width:100%;height:100%;min-height:120px;overflow:hidden;background:var(--media-viewer-body-bg, var(--surface-inverse, var(--text-base)))}.RainbowLoader{position:absolute;inset:0;background:color-mix(in srgb,var(--primary) 35%,var(--surface-2));animation:rainbowShift 1.2s ease infinite alternate}@keyframes rainbowShift{0%{opacity:.55}to{opacity:1}}.Layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;filter:none;transform:none;image-rendering:pixelated;image-rendering:crisp-edges;transition-property:opacity;transition-duration:.4s;transition-timing-function:ease;pointer-events:none}.Layer.visible{opacity:1}.FallbackNote{position:absolute;bottom:0;left:0;right:0;padding:4px 8px;background:color-mix(in srgb,var(--text-base) 50%,transparent);color:var(--text-inverted);font-size:.8rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ImageViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-image-viewer', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ImageViewer\" *ngIf=\"src\">\r\n  <div class=\"RainbowLoader\" *ngIf=\"!ready && !loadError\"></div>\r\n  <img\r\n    *ngIf=\"src\"\r\n    class=\"Layer\"\r\n    [class.visible]=\"ready\"\r\n    [src]=\"src\"\r\n    [alt]=\"\"\r\n    decoding=\"async\"\r\n    (load)=\"onLoad()\"\r\n    (error)=\"onError()\"\r\n  />\r\n  <div *ngIf=\"loadError\" class=\"FallbackNote\">\r\n    <span>Error al cargar la imagen</span>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%;min-height:120px;filter:none;background:var(--media-viewer-body-bg, var(--surface-inverse, var(--text-base)))}.ImageViewer{position:relative;width:100%;height:100%;min-height:120px;overflow:hidden;background:var(--media-viewer-body-bg, var(--surface-inverse, var(--text-base)))}.RainbowLoader{position:absolute;inset:0;background:color-mix(in srgb,var(--primary) 35%,var(--surface-2));animation:rainbowShift 1.2s ease infinite alternate}@keyframes rainbowShift{0%{opacity:.55}to{opacity:1}}.Layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;filter:none;transform:none;image-rendering:pixelated;image-rendering:crisp-edges;transition-property:opacity;transition-duration:.4s;transition-timing-function:ease;pointer-events:none}.Layer.visible{opacity:1}.FallbackNote{position:absolute;bottom:0;left:0;right:0;padding:4px 8px;background:color-mix(in srgb,var(--text-base) 50%,transparent);color:var(--text-inverted);font-size:.8rem;text-align:center}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { src: [{
+                type: Input
+            }] } });
+
+/**
+ * Lightweight native video player (no hls.js).
+ * HLS (.m3u8) relies on browser Safari support; other browsers may need host-side remux.
+ */
+class VideoPlayerComponent {
+    cdr;
+    src = null;
+    /** Informational; native player only. */
+    videoFormat = null;
+    loadError = false;
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    ngOnChanges(changes) {
+        if (changes['src']) {
+            this.loadError = false;
+            this.cdr.markForCheck();
+        }
+    }
+    onError() {
+        this.loadError = true;
+        this.cdr.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: VideoPlayerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: VideoPlayerComponent, isStandalone: true, selector: "app-video-player", inputs: { src: "src", videoFormat: "videoFormat" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"VideoPlayer\" *ngIf=\"src\">\r\n  <video\r\n    class=\"VideoPlayerEl\"\r\n    [src]=\"src\"\r\n    controls\r\n    playsinline\r\n    (error)=\"onError()\"\r\n  ></video>\r\n  <p *ngIf=\"loadError\" class=\"VideoPlayerError\">No se pudo reproducir el video.</p>\r\n  <p *ngIf=\"videoFormat === 'hls'\" class=\"VideoPlayerHint\">\r\n    HLS: requiere soporte nativo del navegador.\r\n  </p>\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%}.VideoPlayer{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px}.VideoPlayerEl{width:100%;height:100%;max-height:100%;object-fit:contain;background:var(--media-viewer-body-bg, var(--surface-inverse, var(--text-base)))}.VideoPlayerError,.VideoPlayerHint{margin:0;font-size:.85rem;color:var(--text-inverted);text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: VideoPlayerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-video-player', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"VideoPlayer\" *ngIf=\"src\">\r\n  <video\r\n    class=\"VideoPlayerEl\"\r\n    [src]=\"src\"\r\n    controls\r\n    playsinline\r\n    (error)=\"onError()\"\r\n  ></video>\r\n  <p *ngIf=\"loadError\" class=\"VideoPlayerError\">No se pudo reproducir el video.</p>\r\n  <p *ngIf=\"videoFormat === 'hls'\" class=\"VideoPlayerHint\">\r\n    HLS: requiere soporte nativo del navegador.\r\n  </p>\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%}.VideoPlayer{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px}.VideoPlayerEl{width:100%;height:100%;max-height:100%;object-fit:contain;background:var(--media-viewer-body-bg, var(--surface-inverse, var(--text-base)))}.VideoPlayerError,.VideoPlayerHint{margin:0;font-size:.85rem;color:var(--text-inverted);text-align:center}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { src: [{
+                type: Input
+            }], videoFormat: [{
+                type: Input
+            }] } });
+
+/** Lightweight native audio player (no wavesurfer / hls.js). */
+class AudioPlayerComponent {
+    cdr;
+    src = null;
+    name = null;
+    loadError = false;
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    ngOnChanges(changes) {
+        if (changes['src']) {
+            this.loadError = false;
+            this.cdr.markForCheck();
+        }
+    }
+    onError() {
+        this.loadError = true;
+        this.cdr.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AudioPlayerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: AudioPlayerComponent, isStandalone: true, selector: "app-audio-player", inputs: { src: "src", name: "name" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"AudioPlayer\" *ngIf=\"src\">\r\n  <p *ngIf=\"name\" class=\"AudioPlayerName\">{{ name }}</p>\r\n  <audio class=\"AudioPlayerEl\" [src]=\"src\" controls (error)=\"onError()\"></audio>\r\n  <p *ngIf=\"loadError\" class=\"AudioPlayerError\">No se pudo reproducir el audio.</p>\r\n</div>\r\n", styles: [":host{display:block;width:100%}.AudioPlayer{display:flex;flex-direction:column;gap:8px;align-items:stretch;padding:12px;background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border)}.AudioPlayerName{margin:0;font-size:.9rem;font-weight:600;color:var(--text-base);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.AudioPlayerEl{width:100%}.AudioPlayerError{margin:0;font-size:.85rem;color:var(--error-text)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AudioPlayerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-audio-player', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"AudioPlayer\" *ngIf=\"src\">\r\n  <p *ngIf=\"name\" class=\"AudioPlayerName\">{{ name }}</p>\r\n  <audio class=\"AudioPlayerEl\" [src]=\"src\" controls (error)=\"onError()\"></audio>\r\n  <p *ngIf=\"loadError\" class=\"AudioPlayerError\">No se pudo reproducir el audio.</p>\r\n</div>\r\n", styles: [":host{display:block;width:100%}.AudioPlayer{display:flex;flex-direction:column;gap:8px;align-items:stretch;padding:12px;background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border)}.AudioPlayerName{margin:0;font-size:.9rem;font-weight:600;color:var(--text-base);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.AudioPlayerEl{width:100%}.AudioPlayerError{margin:0;font-size:.85rem;color:var(--error-text)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { src: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }] } });
+
+const DOCUMENT_LOAD_TIMEOUT_MS = 10000;
+const VIEWER_DIFF_KEYS = ['open', 'mode', 'type', 'url', 'urlSafe', 'autoDetectType'];
+/**
+ * Host singleton media viewer.
+ * Expects already-resolved public URLs from the host (no crypto / CDN decrypt).
+ */
+class MediaViewerServiceComponent {
+    platformId = inject(PLATFORM_ID);
+    viewer = inject(MediaViewerService);
+    config = inject(XOSUE_UTILS_SERVICES_CONFIG);
+    cdr = inject(ChangeDetectorRef);
+    sanitizer = inject(DomSanitizer);
+    _prevVm = null;
+    open = false;
+    mode = 'image';
+    type = undefined;
+    url = null;
+    urlSafe = null;
+    autoDetectType = true;
+    downloadUrl = null;
+    fileName = 'Archivo';
+    downloadContext = null;
+    detectedMode = null;
+    detectingOrLoading = false;
+    detectError = false;
+    documentBlobUrl = null;
+    documentRenderFailed = false;
+    resolvedMediaUrl = null;
+    blobUrlsToRevoke = [];
+    documentLoadTimeout = null;
+    cachedDocumentUrlRaw = null;
+    cachedDocumentUrlSafe = null;
+    constructor() {
+        this.viewer.state$.pipe(takeUntilDestroyed()).subscribe((vm) => {
+            const changes = this.diffViewerState(this._prevVm, vm);
+            this.applyVmFields(vm);
+            this._prevVm = vm;
+            this.onViewerInputsChanged(changes);
+        });
+    }
+    diffViewerState(prev, curr) {
+        const out = {};
+        for (const k of VIEWER_DIFF_KEYS) {
+            const p = prev?.[k];
+            const c = curr[k];
+            if (p !== c) {
+                out[k] = new SimpleChange(p, c, prev === null);
+            }
+        }
+        return out;
+    }
+    applyVmFields(vm) {
+        this.open = vm.open;
+        this.mode = vm.mode;
+        this.type = vm.type;
+        this.url = vm.url;
+        this.urlSafe = vm.urlSafe;
+        this.autoDetectType = vm.autoDetectType;
+        this.downloadUrl = vm.downloadUrl;
+        this.fileName = vm.fileName || this.config.mediaFileNameFallback;
+        this.downloadContext = vm.downloadContext;
+    }
+    get effectiveMode() {
+        return this.detectedMode ?? this.mode;
+    }
+    get videoPlayerFormat() {
+        const u = (this.mediaSrc ?? '').trim().toLowerCase();
+        return u.includes('.m3u8') ? 'hls' : null;
+    }
+    get typeLabel() {
+        if (this.detectingOrLoading && !this.detectedMode)
+            return 'Cargando...';
+        const labels = {
+            image: 'Imagen',
+            video: 'Video',
+            audio: 'Audio',
+            document: 'Documento',
+            download: 'Archivo',
+        };
+        return labels[this.effectiveMode] ?? this.config.mediaFileNameFallback;
+    }
+    get loadingMessage() {
+        if (!this.detectedMode)
+            return 'Detectando tipo...';
+        const labels = {
+            image: 'Imagen',
+            video: 'Video',
+            audio: 'Audio',
+            document: 'Documento',
+            download: 'Archivo',
+        };
+        const name = labels[this.detectedMode] ?? 'archivo';
+        return `Cargando ${name.toLowerCase()}...`;
+    }
+    get mediaSrc() {
+        if (this.resolvedMediaUrl)
+            return this.resolvedMediaUrl;
+        return this.url;
+    }
+    get documentUrlSafe() {
+        if (this.urlSafe)
+            return this.urlSafe;
+        const url = this.documentBlobUrl ?? this.url ?? null;
+        if (!url || this.effectiveMode !== 'document') {
+            this.cachedDocumentUrlRaw = null;
+            this.cachedDocumentUrlSafe = null;
+            return null;
+        }
+        if (this.cachedDocumentUrlRaw === url && this.cachedDocumentUrlSafe) {
+            return this.cachedDocumentUrlSafe;
+        }
+        this.cachedDocumentUrlRaw = url;
+        this.cachedDocumentUrlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(url);
+        return this.cachedDocumentUrlSafe;
+    }
+    onViewerInputsChanged(changes) {
+        const docRelevant = (changes['open'] ??
+            changes['mode'] ??
+            changes['type'] ??
+            changes['url'] ??
+            changes['urlSafe'] ??
+            changes['autoDetectType']) != null;
+        if (!docRelevant)
+            return;
+        if (changes['url'] ?? changes['urlSafe']) {
+            this.documentBlobUrl = null;
+            this.cachedDocumentUrlRaw = null;
+            this.cachedDocumentUrlSafe = null;
+        }
+        if (!this.open || !this.url) {
+            this.documentBlobUrl = null;
+            this.cachedDocumentUrlRaw = null;
+            this.cachedDocumentUrlSafe = null;
+            this.revokeBlobUrls();
+            this.resolvedMediaUrl = null;
+            this.detectedMode = null;
+            this.detectingOrLoading = false;
+            this.detectError = false;
+        }
+        if (this.open && this.url) {
+            const hasExplicitType = this.type != null && this.type !== undefined;
+            if (hasExplicitType) {
+                this.detectedMode = this.type;
+                this.detectError = false;
+                this.detectingOrLoading = false;
+                this.resolvedMediaUrl = this.url;
+                if (this.type === 'document') {
+                    void this.fetchAsBlob(this.url).then((blobUrl) => {
+                        if (blobUrl) {
+                            this.documentBlobUrl = blobUrl;
+                            this.blobUrlsToRevoke.push(blobUrl);
+                        }
+                        this.cdr.markForCheck();
+                    });
+                }
+                this.cdr.markForCheck();
+            }
+            else if (this.autoDetectType) {
+                this.detectAndLoadFromUrl(this.url);
+            }
+            else {
+                this.detectedMode = this.mode;
+                this.resolvedMediaUrl = this.url;
+                this.detectingOrLoading = false;
+                this.cdr.markForCheck();
+            }
+        }
+        else {
+            this.resolvedMediaUrl = null;
+        }
+        this.clearDocumentLoadTimeout();
+        if (this.open &&
+            this.effectiveMode === 'document' &&
+            (this.documentBlobUrl || this.url || this.urlSafe)) {
+            this.documentRenderFailed = false;
+            this.documentLoadTimeout = setTimeout(() => {
+                this.documentLoadTimeout = null;
+                this.documentRenderFailed = true;
+                this.cdr.markForCheck();
+            }, DOCUMENT_LOAD_TIMEOUT_MS);
+        }
+        else {
+            this.documentRenderFailed = false;
+        }
+        this.cdr.markForCheck();
+    }
+    ngOnDestroy() {
+        this.clearDocumentLoadTimeout();
+        this.revokeBlobUrls();
+    }
+    detectAndLoadFromUrl(url) {
+        this.revokeBlobUrls();
+        this.resolvedMediaUrl = null;
+        this.documentBlobUrl = null;
+        this.detectedMode = null;
+        this.detectError = false;
+        this.detectingOrLoading = true;
+        this.cdr.markForCheck();
+        this.fetchContentType(url)
+            .then((contentType) => this.detectModeFromContentType(url, contentType))
+            .then((mode) => {
+            this.detectedMode = mode;
+            this.cdr.markForCheck();
+            if (mode === 'image' || mode === 'document') {
+                return this.fetchAsBlob(url).then((blobUrl) => {
+                    if (mode === 'image')
+                        this.resolvedMediaUrl = blobUrl ?? url;
+                    else
+                        this.documentBlobUrl = blobUrl;
+                    if (blobUrl)
+                        this.blobUrlsToRevoke.push(blobUrl);
+                    this.detectingOrLoading = false;
+                    this.cdr.markForCheck();
+                });
+            }
+            this.resolvedMediaUrl = url;
+            this.detectingOrLoading = false;
+            this.cdr.markForCheck();
+            return undefined;
+        })
+            .catch(() => {
+            this.detectError = true;
+            this.detectingOrLoading = false;
+            this.detectedMode = this.mode;
+            this.resolvedMediaUrl = url;
+            this.cdr.markForCheck();
+        });
+    }
+    fetchContentType(url) {
+        const readCt = (r) => (r.headers.get('content-type') ?? '').trim();
+        const tryHead = () => fetch(url, { method: 'HEAD', mode: 'cors' }).then((r) => {
+            if (!r.ok)
+                return '';
+            return readCt(r);
+        });
+        const tryGetRange = () => fetch(url, {
+            method: 'GET',
+            mode: 'cors',
+            headers: { Range: 'bytes=0-0' },
+        }).then((r) => {
+            if (!(r.ok || r.status === 206))
+                return '';
+            return readCt(r);
+        });
+        return tryHead()
+            .then((ct) => ct || tryGetRange())
+            .catch(() => tryGetRange())
+            .catch(() => '');
+    }
+    urlPathname(absUrl) {
+        try {
+            const base = typeof window !== 'undefined' && window.location?.origin
+                ? window.location.origin
+                : 'https://invalid.local';
+            return new URL(absUrl, base).pathname;
+        }
+        catch {
+            return absUrl.split(/[?#]/)[0];
+        }
+    }
+    pathnameExtensionFromUrl(absUrl) {
+        const path = this.urlPathname(absUrl);
+        const base = path.split('/').pop() ?? '';
+        const dot = base.lastIndexOf('.');
+        return dot > 0 ? base.slice(dot + 1).toLowerCase() : '';
+    }
+    detectModeFromUrlPathOnly(absUrl) {
+        const pathLower = this.urlPathname(absUrl).toLowerCase();
+        if (pathLower.endsWith('.m3u8') || pathLower.includes('/master.m3u8')) {
+            return 'video';
+        }
+        const ext = this.pathnameExtensionFromUrl(absUrl);
+        if (['webp', 'jpg', 'jpeg', 'png', 'gif', 'avif', 'bmp', 'svg'].includes(ext))
+            return 'image';
+        if (['webm', 'mp4', 'ogg', 'ogv', 'mov', 'm4v', 'mkv'].includes(ext))
+            return 'video';
+        if (['mp3', 'wav', 'oga', 'm4a', 'aac', 'flac', 'opus'].includes(ext))
+            return 'audio';
+        if (['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'odt', 'ods', 'odp'].includes(ext)) {
+            return 'document';
+        }
+        return null;
+    }
+    detectModeFromContentType(url, contentType) {
+        const type = (contentType.split(';')[0] ?? '').trim().toLowerCase();
+        const fromPath = this.detectModeFromUrlPathOnly(url);
+        if (type.startsWith('image/'))
+            return 'image';
+        if (type.startsWith('video/'))
+            return 'video';
+        if (type.startsWith('audio/'))
+            return 'audio';
+        if (type === 'application/pdf' || type.includes('pdf'))
+            return 'document';
+        if (type.includes('document') ||
+            type.includes('msword') ||
+            type.includes('excel') ||
+            type.includes('powerpoint') ||
+            type.includes('officedocument') ||
+            type.includes('opendocument')) {
+            return 'document';
+        }
+        if (fromPath)
+            return fromPath;
+        return 'download';
+    }
+    fetchAsBlob(url) {
+        return fetch(url, { mode: 'cors' })
+            .then((r) => {
+            if (!r.ok)
+                throw new Error('Fetch failed');
+            return r.blob();
+        })
+            .then((blob) => URL.createObjectURL(blob))
+            .catch(() => null);
+    }
+    revokeBlobUrls() {
+        const toRevoke = [...this.blobUrlsToRevoke];
+        this.blobUrlsToRevoke = [];
+        if (this.resolvedMediaUrl && toRevoke.includes(this.resolvedMediaUrl)) {
+            this.resolvedMediaUrl = null;
+        }
+        this.documentBlobUrl = null;
+        for (const u of toRevoke) {
+            try {
+                URL.revokeObjectURL(u);
+            }
+            catch {
+                /* ignore */
+            }
+        }
+    }
+    clearDocumentLoadTimeout() {
+        if (this.documentLoadTimeout != null) {
+            clearTimeout(this.documentLoadTimeout);
+            this.documentLoadTimeout = null;
+        }
+    }
+    onDocumentIframeLoad() {
+        this.clearDocumentLoadTimeout();
+        this.cdr.markForCheck();
+    }
+    onBackdropClick() {
+        this.viewer.close();
+    }
+    onContentClick(event) {
+        event.stopPropagation();
+    }
+    close() {
+        this.viewer.close();
+    }
+    triggerDownload() {
+        const url = this.downloadUrl ?? this.url;
+        if (url && typeof url === 'string' && url.trim().startsWith('http')) {
+            if (isPlatformBrowser(this.platformId)) {
+                window.open(url.trim(), '_blank');
+            }
+        }
+        else if (this.downloadContext != null) {
+            this.viewer.handleDownloadRequested(this.downloadContext);
+        }
+        this.cdr.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MediaViewerServiceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: MediaViewerServiceComponent, isStandalone: true, selector: "media-viewer-service", ngImport: i0, template: "<div class=\"GeneralViewerBackdrop\" *ngIf=\"open\" (click)=\"onBackdropClick()\">\r\n  <div class=\"GeneralViewerContent\" (click)=\"onContentClick($event)\">\r\n    <div class=\"GeneralViewerHeader\">\r\n      <span class=\"GeneralViewerTypeLabel\">{{ typeLabel }}</span>\r\n      <button type=\"button\" class=\"GeneralViewerClose\" (click)=\"close()\" aria-label=\"Cerrar\">\r\n        <lucide-icon name=\"x\"></lucide-icon>\r\n      </button>\r\n    </div>\r\n    <div class=\"GeneralViewerBody\" [class.GeneralViewerBody--document]=\"effectiveMode === 'document'\">\r\n      <div *ngIf=\"detectingOrLoading\" class=\"GeneralViewerNoContent\">\r\n        <lucide-icon name=\"loader-circle\" [spin]=\"true\"></lucide-icon>\r\n        <p>{{ loadingMessage }}</p>\r\n        <button type=\"button\" class=\"GeneralViewerBtnClose\" (click)=\"close()\">Cerrar</button>\r\n      </div>\r\n\r\n      <div *ngIf=\"!detectingOrLoading && detectError && !resolvedMediaUrl && effectiveMode === 'download'\" class=\"GeneralViewerNoContent\">\r\n        <lucide-icon name=\"triangle-alert\"></lucide-icon>\r\n        <p>No se pudo detectar el tipo de archivo.</p>\r\n        <p class=\"GeneralViewerFileName\">{{ fileName }}</p>\r\n        <button *ngIf=\"url\" type=\"button\" class=\"GeneralViewerBtnDownload\" (click)=\"triggerDownload()\">Descargar</button>\r\n        <button type=\"button\" class=\"GeneralViewerBtnClose\" (click)=\"close()\">Cerrar</button>\r\n      </div>\r\n\r\n      <app-image-viewer\r\n        *ngIf=\"!detectingOrLoading && effectiveMode === 'image' && mediaSrc\"\r\n        [src]=\"mediaSrc\"\r\n      ></app-image-viewer>\r\n\r\n      <app-video-player\r\n        *ngIf=\"!detectingOrLoading && effectiveMode === 'video' && mediaSrc\"\r\n        [src]=\"mediaSrc\"\r\n        [videoFormat]=\"videoPlayerFormat\"\r\n      ></app-video-player>\r\n\r\n      <app-audio-player\r\n        *ngIf=\"!detectingOrLoading && effectiveMode === 'audio' && mediaSrc\"\r\n        [src]=\"mediaSrc\"\r\n        [name]=\"fileName\"\r\n      ></app-audio-player>\r\n\r\n      <div *ngIf=\"!detectingOrLoading && effectiveMode === 'document' && documentUrlSafe && !documentRenderFailed\" class=\"GeneralViewerDocument\">\r\n        <iframe\r\n          [src]=\"documentUrlSafe\"\r\n          frameborder=\"0\"\r\n          class=\"GeneralViewerIframe\"\r\n          [attr.title]=\"fileName\"\r\n          (load)=\"onDocumentIframeLoad()\"\r\n        ></iframe>\r\n      </div>\r\n\r\n      <div *ngIf=\"!detectingOrLoading && effectiveMode === 'document' && documentRenderFailed\" class=\"GeneralViewerDownload\">\r\n        <p class=\"GeneralViewerDownloadMessage\">\r\n          No se pudo mostrar el documento. Puede descargarlo con el bot\u00F3n o cerrar.\r\n        </p>\r\n        <p class=\"GeneralViewerDownloadFileName\">{{ fileName }}</p>\r\n        <button *ngIf=\"downloadUrl || url || downloadContext\" type=\"button\" class=\"GeneralViewerBtnDownload\" (click)=\"triggerDownload()\">\r\n          Descargar\r\n        </button>\r\n        <button type=\"button\" class=\"GeneralViewerBtnClose\" (click)=\"close()\">\r\n          Listo, Cerrar\r\n        </button>\r\n      </div>\r\n\r\n      <div *ngIf=\"!detectingOrLoading && effectiveMode === 'download' && !detectError\" class=\"GeneralViewerDownload\">\r\n        <p class=\"GeneralViewerDownloadMessage\">\r\n          {{ (downloadUrl || url || downloadContext) ? 'Este archivo no se puede previsualizar. Puede descargarlo con el bot\u00F3n o cerrar.' : 'No se pudo cargar la URL del archivo.' }}\r\n        </p>\r\n        <p class=\"GeneralViewerDownloadFileName\">{{ fileName }}</p>\r\n        <button *ngIf=\"downloadUrl || url || downloadContext\" type=\"button\" class=\"GeneralViewerBtnDownload\" (click)=\"triggerDownload()\">\r\n          Descargar\r\n        </button>\r\n        <button type=\"button\" class=\"GeneralViewerBtnClose\" (click)=\"close()\">\r\n          Listo, Cerrar\r\n        </button>\r\n      </div>\r\n\r\n      <div *ngIf=\"!detectingOrLoading && open && effectiveMode === 'document' && !documentUrlSafe && !documentRenderFailed\" class=\"GeneralViewerNoContent\">\r\n        <lucide-icon name=\"loader-circle\" [spin]=\"true\"></lucide-icon>\r\n        <p>Cargando documento...</p>\r\n        <p class=\"GeneralViewerFileName\">{{ fileName }}</p>\r\n        <button type=\"button\" class=\"GeneralViewerBtnClose\" (click)=\"close()\">Cerrar</button>\r\n      </div>\r\n\r\n      <div *ngIf=\"!detectingOrLoading && open && effectiveMode !== 'download' && effectiveMode !== 'document' && !mediaSrc && !documentUrlSafe\" class=\"GeneralViewerNoContent\">\r\n        <lucide-icon name=\"file\"></lucide-icon>\r\n        <p>No se pudo cargar el archivo</p>\r\n        <p class=\"GeneralViewerFileName\">{{ fileName }}</p>\r\n        <button type=\"button\" class=\"GeneralViewerBtnClose\" (click)=\"close()\">Listo, Cerrar</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".GeneralViewerBackdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:color-mix(in srgb,var(--text-base) 50%,transparent);display:flex;align-items:center;justify-content:center;z-index:2000;padding:0;overflow:hidden}.GeneralViewerContent{position:relative;background-color:var(--media-viewer-bg, var(--surface-inverse, var(--text-base)));width:100%;height:100%;max-width:100vw;max-height:100vh;display:flex;flex-direction:column;overflow:hidden}.GeneralViewerHeader{position:absolute;top:0;left:0;z-index:1;width:100%;height:48px;display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:linear-gradient(to bottom,color-mix(in srgb,var(--text-base) 60%,transparent),transparent)}.GeneralViewerTypeLabel{margin-right:12px;padding:4px 8px;border-radius:var(--radius-md);font-size:.875rem;font-weight:600;color:var(--text-inverted);background-color:color-mix(in srgb,var(--text-base) 40%,transparent)}.GeneralViewerFileName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:12px;padding:4px 8px;border-radius:var(--radius-md);font-size:.875rem;color:var(--text-inverted);max-width:70%;background-color:color-mix(in srgb,var(--text-base) 40%,transparent)}.GeneralViewerClose{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;cursor:pointer;font-size:1.25rem;color:var(--text-inverted);background-color:color-mix(in srgb,var(--text-base) 40%,transparent);flex-shrink:0}.GeneralViewerClose:hover{background-color:color-mix(in srgb,var(--text-inverted) 15%,transparent)}.GeneralViewerBody{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;overflow-y:auto;min-height:0;background-color:var(--media-viewer-body-bg, var(--surface-inverse, var(--text-base)))}.GeneralViewerBody.GeneralViewerBody--document{padding-top:48px;align-items:flex-start;justify-content:center}.GeneralViewerBody app-image-viewer,.GeneralViewerBody app-video-player{width:100%;height:100%;min-height:200px}.GeneralViewerBody app-audio-player{width:100%;max-width:560px;padding:16px}.GeneralViewerNoContent,.GeneralViewerDownload{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;color:var(--text-inverted);text-align:center}.GeneralViewerDocument{width:100%;height:100%;min-height:0}.GeneralViewerIframe{width:100%;height:100%;border:none;background:var(--surface)}.GeneralViewerDownloadMessage,.GeneralViewerDownloadFileName{margin:0;color:var(--text-inverted)}.GeneralViewerBtnDownload,.GeneralViewerBtnClose{padding:8px 16px;border:none;border-radius:var(--radius-md);font-size:.875rem;font-weight:500;cursor:pointer}.GeneralViewerBtnDownload{background-color:var(--primary);color:var(--text-inverted)}.GeneralViewerBtnClose{background-color:color-mix(in srgb,var(--text-inverted) 20%,transparent);color:var(--text-inverted)}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ImageViewerComponent, selector: "app-image-viewer", inputs: ["src"] }, { kind: "component", type: VideoPlayerComponent, selector: "app-video-player", inputs: ["src", "videoFormat"] }, { kind: "component", type: AudioPlayerComponent, selector: "app-audio-player", inputs: ["src", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MediaViewerServiceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'media-viewer-service', standalone: true, imports: [
+                        LucideIconComponent,
+                        CommonModule,
+                        ImageViewerComponent,
+                        VideoPlayerComponent,
+                        AudioPlayerComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"GeneralViewerBackdrop\" *ngIf=\"open\" (click)=\"onBackdropClick()\">\r\n  <div class=\"GeneralViewerContent\" (click)=\"onContentClick($event)\">\r\n    <div class=\"GeneralViewerHeader\">\r\n      <span class=\"GeneralViewerTypeLabel\">{{ typeLabel }}</span>\r\n      <button type=\"button\" class=\"GeneralViewerClose\" (click)=\"close()\" aria-label=\"Cerrar\">\r\n        <lucide-icon name=\"x\"></lucide-icon>\r\n      </button>\r\n    </div>\r\n    <div class=\"GeneralViewerBody\" [class.GeneralViewerBody--document]=\"effectiveMode === 'document'\">\r\n      <div *ngIf=\"detectingOrLoading\" class=\"GeneralViewerNoContent\">\r\n        <lucide-icon name=\"loader-circle\" [spin]=\"true\"></lucide-icon>\r\n        <p>{{ loadingMessage }}</p>\r\n        <button type=\"button\" class=\"GeneralViewerBtnClose\" (click)=\"close()\">Cerrar</button>\r\n      </div>\r\n\r\n      <div *ngIf=\"!detectingOrLoading && detectError && !resolvedMediaUrl && effectiveMode === 'download'\" class=\"GeneralViewerNoContent\">\r\n        <lucide-icon name=\"triangle-alert\"></lucide-icon>\r\n        <p>No se pudo detectar el tipo de archivo.</p>\r\n        <p class=\"GeneralViewerFileName\">{{ fileName }}</p>\r\n        <button *ngIf=\"url\" type=\"button\" class=\"GeneralViewerBtnDownload\" (click)=\"triggerDownload()\">Descargar</button>\r\n        <button type=\"button\" class=\"GeneralViewerBtnClose\" (click)=\"close()\">Cerrar</button>\r\n      </div>\r\n\r\n      <app-image-viewer\r\n        *ngIf=\"!detectingOrLoading && effectiveMode === 'image' && mediaSrc\"\r\n        [src]=\"mediaSrc\"\r\n      ></app-image-viewer>\r\n\r\n      <app-video-player\r\n        *ngIf=\"!detectingOrLoading && effectiveMode === 'video' && mediaSrc\"\r\n        [src]=\"mediaSrc\"\r\n        [videoFormat]=\"videoPlayerFormat\"\r\n      ></app-video-player>\r\n\r\n      <app-audio-player\r\n        *ngIf=\"!detectingOrLoading && effectiveMode === 'audio' && mediaSrc\"\r\n        [src]=\"mediaSrc\"\r\n        [name]=\"fileName\"\r\n      ></app-audio-player>\r\n\r\n      <div *ngIf=\"!detectingOrLoading && effectiveMode === 'document' && documentUrlSafe && !documentRenderFailed\" class=\"GeneralViewerDocument\">\r\n        <iframe\r\n          [src]=\"documentUrlSafe\"\r\n          frameborder=\"0\"\r\n          class=\"GeneralViewerIframe\"\r\n          [attr.title]=\"fileName\"\r\n          (load)=\"onDocumentIframeLoad()\"\r\n        ></iframe>\r\n      </div>\r\n\r\n      <div *ngIf=\"!detectingOrLoading && effectiveMode === 'document' && documentRenderFailed\" class=\"GeneralViewerDownload\">\r\n        <p class=\"GeneralViewerDownloadMessage\">\r\n          No se pudo mostrar el documento. Puede descargarlo con el bot\u00F3n o cerrar.\r\n        </p>\r\n        <p class=\"GeneralViewerDownloadFileName\">{{ fileName }}</p>\r\n        <button *ngIf=\"downloadUrl || url || downloadContext\" type=\"button\" class=\"GeneralViewerBtnDownload\" (click)=\"triggerDownload()\">\r\n          Descargar\r\n        </button>\r\n        <button type=\"button\" class=\"GeneralViewerBtnClose\" (click)=\"close()\">\r\n          Listo, Cerrar\r\n        </button>\r\n      </div>\r\n\r\n      <div *ngIf=\"!detectingOrLoading && effectiveMode === 'download' && !detectError\" class=\"GeneralViewerDownload\">\r\n        <p class=\"GeneralViewerDownloadMessage\">\r\n          {{ (downloadUrl || url || downloadContext) ? 'Este archivo no se puede previsualizar. Puede descargarlo con el bot\u00F3n o cerrar.' : 'No se pudo cargar la URL del archivo.' }}\r\n        </p>\r\n        <p class=\"GeneralViewerDownloadFileName\">{{ fileName }}</p>\r\n        <button *ngIf=\"downloadUrl || url || downloadContext\" type=\"button\" class=\"GeneralViewerBtnDownload\" (click)=\"triggerDownload()\">\r\n          Descargar\r\n        </button>\r\n        <button type=\"button\" class=\"GeneralViewerBtnClose\" (click)=\"close()\">\r\n          Listo, Cerrar\r\n        </button>\r\n      </div>\r\n\r\n      <div *ngIf=\"!detectingOrLoading && open && effectiveMode === 'document' && !documentUrlSafe && !documentRenderFailed\" class=\"GeneralViewerNoContent\">\r\n        <lucide-icon name=\"loader-circle\" [spin]=\"true\"></lucide-icon>\r\n        <p>Cargando documento...</p>\r\n        <p class=\"GeneralViewerFileName\">{{ fileName }}</p>\r\n        <button type=\"button\" class=\"GeneralViewerBtnClose\" (click)=\"close()\">Cerrar</button>\r\n      </div>\r\n\r\n      <div *ngIf=\"!detectingOrLoading && open && effectiveMode !== 'download' && effectiveMode !== 'document' && !mediaSrc && !documentUrlSafe\" class=\"GeneralViewerNoContent\">\r\n        <lucide-icon name=\"file\"></lucide-icon>\r\n        <p>No se pudo cargar el archivo</p>\r\n        <p class=\"GeneralViewerFileName\">{{ fileName }}</p>\r\n        <button type=\"button\" class=\"GeneralViewerBtnClose\" (click)=\"close()\">Listo, Cerrar</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".GeneralViewerBackdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:color-mix(in srgb,var(--text-base) 50%,transparent);display:flex;align-items:center;justify-content:center;z-index:2000;padding:0;overflow:hidden}.GeneralViewerContent{position:relative;background-color:var(--media-viewer-bg, var(--surface-inverse, var(--text-base)));width:100%;height:100%;max-width:100vw;max-height:100vh;display:flex;flex-direction:column;overflow:hidden}.GeneralViewerHeader{position:absolute;top:0;left:0;z-index:1;width:100%;height:48px;display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:linear-gradient(to bottom,color-mix(in srgb,var(--text-base) 60%,transparent),transparent)}.GeneralViewerTypeLabel{margin-right:12px;padding:4px 8px;border-radius:var(--radius-md);font-size:.875rem;font-weight:600;color:var(--text-inverted);background-color:color-mix(in srgb,var(--text-base) 40%,transparent)}.GeneralViewerFileName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:12px;padding:4px 8px;border-radius:var(--radius-md);font-size:.875rem;color:var(--text-inverted);max-width:70%;background-color:color-mix(in srgb,var(--text-base) 40%,transparent)}.GeneralViewerClose{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;cursor:pointer;font-size:1.25rem;color:var(--text-inverted);background-color:color-mix(in srgb,var(--text-base) 40%,transparent);flex-shrink:0}.GeneralViewerClose:hover{background-color:color-mix(in srgb,var(--text-inverted) 15%,transparent)}.GeneralViewerBody{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;overflow-y:auto;min-height:0;background-color:var(--media-viewer-body-bg, var(--surface-inverse, var(--text-base)))}.GeneralViewerBody.GeneralViewerBody--document{padding-top:48px;align-items:flex-start;justify-content:center}.GeneralViewerBody app-image-viewer,.GeneralViewerBody app-video-player{width:100%;height:100%;min-height:200px}.GeneralViewerBody app-audio-player{width:100%;max-width:560px;padding:16px}.GeneralViewerNoContent,.GeneralViewerDownload{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;color:var(--text-inverted);text-align:center}.GeneralViewerDocument{width:100%;height:100%;min-height:0}.GeneralViewerIframe{width:100%;height:100%;border:none;background:var(--surface)}.GeneralViewerDownloadMessage,.GeneralViewerDownloadFileName{margin:0;color:var(--text-inverted)}.GeneralViewerBtnDownload,.GeneralViewerBtnClose{padding:8px 16px;border:none;border-radius:var(--radius-md);font-size:.875rem;font-weight:500;cursor:pointer}.GeneralViewerBtnDownload{background-color:var(--primary);color:var(--text-inverted)}.GeneralViewerBtnClose{background-color:color-mix(in srgb,var(--text-inverted) 20%,transparent);color:var(--text-inverted)}\n"] }]
+        }], ctorParameters: () => [] });
+
+class SessionRequestService {
+    platformId;
+    sessionRequestSubject = new Subject();
+    sessionRequest$ = this.sessionRequestSubject.asObservable();
+    idCounter = 0;
+    isBrowser;
+    constructor(platformId) {
+        this.platformId = platformId;
+        this.isBrowser = isPlatformBrowser(this.platformId);
+    }
+    /**
+     * Muestra un overlay solicitando sesión.
+     * @param lucideIcon Nombre del icono Lucide en kebab-case (ej: shopping-cart).
+     */
+    showSessionRequest(lucideIcon, message) {
+        if (!this.isBrowser)
+            return;
+        const sessionRequest = {
+            id: ++this.idCounter,
+            lucideIcon,
+            message,
+        };
+        this.sessionRequestSubject.next(sessionRequest);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SessionRequestService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SessionRequestService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SessionRequestService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }] });
+
+class SessionRequestServiceComponent {
+    sessionRequestService;
+    sessionRequests = [];
+    config = inject(XOSUE_UTILS_SERVICES_CONFIG);
+    constructor(sessionRequestService) {
+        this.sessionRequestService = sessionRequestService;
+    }
+    ngOnInit() {
+        this.sessionRequestService.sessionRequest$.subscribe((sessionRequest) => {
+            this.sessionRequests.push(sessionRequest);
+        });
+    }
+    closeSessionRequest(id) {
+        this.sessionRequests = this.sessionRequests.filter((sr) => sr.id !== id);
+    }
+    trackById(_index, item) {
+        return item.id;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SessionRequestServiceComponent, deps: [{ token: SessionRequestService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: SessionRequestServiceComponent, isStandalone: true, selector: "session-request-service", ngImport: i0, template: "<div class=\"SessionRequestOverlay\" *ngIf=\"sessionRequests.length > 0\">\r\n  <div\r\n    class=\"SessionRequest\"\r\n    *ngFor=\"let sessionRequest of sessionRequests; trackBy: trackById\"\r\n    [@sessionRequestAnimation]\r\n  >\r\n    <button\r\n      type=\"button\"\r\n      class=\"CloseButton\"\r\n      (click)=\"closeSessionRequest(sessionRequest.id)\"\r\n      title=\"Cerrar\"\r\n    >\r\n      <lucide-icon name=\"x\"></lucide-icon>\r\n    </button>\r\n    <div class=\"SessionRequestContent\">\r\n      <div class=\"SessionRequestIcon\">\r\n        <lucide-icon [name]=\"sessionRequest.lucideIcon\"></lucide-icon>\r\n      </div>\r\n      <div class=\"SessionRequestMessage\">\r\n        {{ sessionRequest.message }}\r\n      </div>\r\n      <div class=\"SessionRequestActions\">\r\n        <a\r\n          class=\"SessionRequestButton RegisterButton\"\r\n          [routerLink]=\"config.sessionRegisterPath\"\r\n          (click)=\"closeSessionRequest(sessionRequest.id)\"\r\n        >\r\n          <lucide-icon name=\"user-plus\"></lucide-icon>\r\n          {{ config.sessionRegisterLabel }}\r\n        </a>\r\n        <a\r\n          class=\"SessionRequestButton LoginButton\"\r\n          [routerLink]=\"config.sessionLoginPath\"\r\n          (click)=\"closeSessionRequest(sessionRequest.id)\"\r\n        >\r\n          <lucide-icon name=\"log-in\"></lucide-icon>\r\n          {{ config.sessionLoginLabel }}\r\n        </a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".SessionRequestOverlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:color-mix(in srgb,var(--text-base) 50%,transparent);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;pointer-events:auto;padding:4px}.SessionRequest{position:relative;background-color:var(--surface);border-radius:var(--radius-xl, var(--radius-lg));max-width:450px;width:100%;margin:12px;pointer-events:auto}.CloseButton{position:absolute;top:4px;right:4px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;border-radius:50%;cursor:pointer;color:var(--text-muted);z-index:10}.CloseButton lucide-icon .lucide-svg{width:1.3rem;height:1.3rem}.SessionRequestContent{padding:12px;display:flex;flex-direction:column;gap:8px;align-items:center}.SessionRequestIcon{display:flex;justify-content:center;margin-top:12px}.SessionRequestIcon lucide-icon{--lucide-stroke: var(--primary)}.SessionRequestIcon lucide-icon .lucide-svg{width:2.5rem;height:2.5rem}.SessionRequestMessage{text-align:center;color:var(--text-base)}.SessionRequestActions{display:flex;gap:4px;width:100%;margin-top:8px}.SessionRequestButton{flex:1;padding:8px 16px;border:none;border-radius:var(--radius-lg);font-size:.9375rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}.SessionRequestButton lucide-icon .lucide-svg{width:1rem;height:1rem}.LoginButton{background-color:var(--primary);color:var(--text-inverted)}.RegisterButton{background-color:var(--surface-secondary, var(--surface-2));color:var(--text-base)}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], animations: [
+            trigger('sessionRequestAnimation', [
+                transition(':enter', [
+                    style({ opacity: 0, transform: 'scale(0.9)' }),
+                    animate('200ms ease-out', style({ opacity: 1, transform: 'scale(1)' })),
+                ]),
+                transition(':leave', [
+                    animate('200ms ease-in', style({ opacity: 0, transform: 'scale(0.9)' })),
+                ]),
+            ]),
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SessionRequestServiceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'session-request-service', standalone: true, imports: [LucideIconComponent, CommonModule, RouterModule], animations: [
+                        trigger('sessionRequestAnimation', [
+                            transition(':enter', [
+                                style({ opacity: 0, transform: 'scale(0.9)' }),
+                                animate('200ms ease-out', style({ opacity: 1, transform: 'scale(1)' })),
+                            ]),
+                            transition(':leave', [
+                                animate('200ms ease-in', style({ opacity: 0, transform: 'scale(0.9)' })),
+                            ]),
+                        ]),
+                    ], template: "<div class=\"SessionRequestOverlay\" *ngIf=\"sessionRequests.length > 0\">\r\n  <div\r\n    class=\"SessionRequest\"\r\n    *ngFor=\"let sessionRequest of sessionRequests; trackBy: trackById\"\r\n    [@sessionRequestAnimation]\r\n  >\r\n    <button\r\n      type=\"button\"\r\n      class=\"CloseButton\"\r\n      (click)=\"closeSessionRequest(sessionRequest.id)\"\r\n      title=\"Cerrar\"\r\n    >\r\n      <lucide-icon name=\"x\"></lucide-icon>\r\n    </button>\r\n    <div class=\"SessionRequestContent\">\r\n      <div class=\"SessionRequestIcon\">\r\n        <lucide-icon [name]=\"sessionRequest.lucideIcon\"></lucide-icon>\r\n      </div>\r\n      <div class=\"SessionRequestMessage\">\r\n        {{ sessionRequest.message }}\r\n      </div>\r\n      <div class=\"SessionRequestActions\">\r\n        <a\r\n          class=\"SessionRequestButton RegisterButton\"\r\n          [routerLink]=\"config.sessionRegisterPath\"\r\n          (click)=\"closeSessionRequest(sessionRequest.id)\"\r\n        >\r\n          <lucide-icon name=\"user-plus\"></lucide-icon>\r\n          {{ config.sessionRegisterLabel }}\r\n        </a>\r\n        <a\r\n          class=\"SessionRequestButton LoginButton\"\r\n          [routerLink]=\"config.sessionLoginPath\"\r\n          (click)=\"closeSessionRequest(sessionRequest.id)\"\r\n        >\r\n          <lucide-icon name=\"log-in\"></lucide-icon>\r\n          {{ config.sessionLoginLabel }}\r\n        </a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".SessionRequestOverlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:color-mix(in srgb,var(--text-base) 50%,transparent);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;pointer-events:auto;padding:4px}.SessionRequest{position:relative;background-color:var(--surface);border-radius:var(--radius-xl, var(--radius-lg));max-width:450px;width:100%;margin:12px;pointer-events:auto}.CloseButton{position:absolute;top:4px;right:4px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;border-radius:50%;cursor:pointer;color:var(--text-muted);z-index:10}.CloseButton lucide-icon .lucide-svg{width:1.3rem;height:1.3rem}.SessionRequestContent{padding:12px;display:flex;flex-direction:column;gap:8px;align-items:center}.SessionRequestIcon{display:flex;justify-content:center;margin-top:12px}.SessionRequestIcon lucide-icon{--lucide-stroke: var(--primary)}.SessionRequestIcon lucide-icon .lucide-svg{width:2.5rem;height:2.5rem}.SessionRequestMessage{text-align:center;color:var(--text-base)}.SessionRequestActions{display:flex;gap:4px;width:100%;margin-top:8px}.SessionRequestButton{flex:1;padding:8px 16px;border:none;border-radius:var(--radius-lg);font-size:.9375rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}.SessionRequestButton lucide-icon .lucide-svg{width:1rem;height:1rem}.LoginButton{background-color:var(--primary);color:var(--text-inverted)}.RegisterButton{background-color:var(--surface-secondary, var(--surface-2));color:var(--text-base)}\n"] }]
+        }], ctorParameters: () => [{ type: SessionRequestService }] });
+
+/**
+ * Capa global de carga: un mismo backdrop desde el primer `push` hasta el último `pop`.
+ * Varios procesos concurrentes se listan con su mensaje.
+ */
+class GlobalLoadingService {
+    config = inject(XOSUE_UTILS_SERVICES_CONFIG);
+    get defaultMessage() {
+        return this.config.loadingDefaultMessage;
+    }
+    seq = 0;
+    processes$ = new BehaviorSubject([]);
+    get snapshot() {
+        return this.processes$.getValue();
+    }
+    processes = this.processes$.asObservable();
+    push(message) {
+        const id = `gl-${++this.seq}`;
+        const msg = message != null && String(message).trim() !== ''
+            ? String(message).trim()
+            : this.defaultMessage;
+        const next = [...this.processes$.getValue(), { id, message: msg }];
+        this.processes$.next(next);
+        return id;
+    }
+    setMessage(id, message) {
+        const msg = String(message).trim() || this.defaultMessage;
+        const cur = this.processes$.getValue();
+        const idx = cur.findIndex((p) => p.id === id);
+        if (idx < 0)
+            return;
+        const next = [...cur];
+        next[idx] = { ...next[idx], message: msg };
+        this.processes$.next(next);
+    }
+    pop(id) {
+        const cur = this.processes$.getValue();
+        const next = cur.filter((p) => p.id !== id);
+        if (next.length === cur.length)
+            return;
+        this.processes$.next(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: GlobalLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: GlobalLoadingService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: GlobalLoadingService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class GlobalLoadingServiceComponent {
+    globalLoading;
+    processes = [];
+    sub;
+    constructor(globalLoading) {
+        this.globalLoading = globalLoading;
+    }
+    ngOnInit() {
+        this.sub = this.globalLoading.processes.subscribe((list) => {
+            this.processes = list;
+        });
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    trackById(_index, item) {
+        return item.id;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: GlobalLoadingServiceComponent, deps: [{ token: GlobalLoadingService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: GlobalLoadingServiceComponent, isStandalone: true, selector: "global-loading-service", ngImport: i0, template: "<div\r\n  *ngIf=\"processes.length > 0\"\r\n  class=\"GlobalLoadingOverlay\"\r\n  aria-live=\"polite\"\r\n  aria-busy=\"true\"\r\n  role=\"alertdialog\"\r\n  aria-modal=\"true\"\r\n>\r\n  <div class=\"GlobalLoadingCard\">\r\n    <div class=\"GlobalLoadingSpinner\" aria-hidden=\"true\"></div>\r\n    <ul class=\"GlobalLoadingList\">\r\n      <li *ngFor=\"let p of processes; trackBy: trackById\" class=\"GlobalLoadingItem\">\r\n        {{ p.message }}\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n", styles: [".GlobalLoadingOverlay{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:16px;background-color:color-mix(in srgb,var(--text-base) 45%,transparent);backdrop-filter:blur(5px);pointer-events:auto}.GlobalLoadingCard{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:420px;width:100%;padding:16px;background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:0 12px 40px color-mix(in srgb,var(--text-base) 15%,transparent)}.GlobalLoadingSpinner{width:48px;height:48px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:GlobalLoadingSpin .75s linear infinite}.GlobalLoadingList{list-style:none;margin:0;padding:0;width:100%;text-align:center}.GlobalLoadingItem{font-size:.95rem;font-weight:500;color:var(--text-primary, var(--text-base));line-height:1.45}.GlobalLoadingItem+.GlobalLoadingItem{margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}@keyframes GlobalLoadingSpin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: GlobalLoadingServiceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'global-loading-service', standalone: true, imports: [CommonModule], template: "<div\r\n  *ngIf=\"processes.length > 0\"\r\n  class=\"GlobalLoadingOverlay\"\r\n  aria-live=\"polite\"\r\n  aria-busy=\"true\"\r\n  role=\"alertdialog\"\r\n  aria-modal=\"true\"\r\n>\r\n  <div class=\"GlobalLoadingCard\">\r\n    <div class=\"GlobalLoadingSpinner\" aria-hidden=\"true\"></div>\r\n    <ul class=\"GlobalLoadingList\">\r\n      <li *ngFor=\"let p of processes; trackBy: trackById\" class=\"GlobalLoadingItem\">\r\n        {{ p.message }}\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n", styles: [".GlobalLoadingOverlay{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:16px;background-color:color-mix(in srgb,var(--text-base) 45%,transparent);backdrop-filter:blur(5px);pointer-events:auto}.GlobalLoadingCard{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:420px;width:100%;padding:16px;background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:0 12px 40px color-mix(in srgb,var(--text-base) 15%,transparent)}.GlobalLoadingSpinner{width:48px;height:48px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:GlobalLoadingSpin .75s linear infinite}.GlobalLoadingList{list-style:none;margin:0;padding:0;width:100%;text-align:center}.GlobalLoadingItem{font-size:.95rem;font-weight:500;color:var(--text-primary, var(--text-base));line-height:1.45}.GlobalLoadingItem+.GlobalLoadingItem{margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}@keyframes GlobalLoadingSpin{to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: () => [{ type: GlobalLoadingService }] });
+
+const SHOW_DELAY_MS = 120;
+const COMPLETE_HIDE_MS = 320;
+const PROGRESS_TICK_MS = 180;
+const MAX_SIMULATED_PROGRESS = 92;
+class NavigationLoadingService {
+    router = inject(Router);
+    platformId = inject(PLATFORM_ID);
+    /** Barra visible (solo tras superar el delay en navegaciones lentas). */
+    active = signal(false);
+    /** Progreso 0–100 para la barra. */
+    progress = signal(0);
+    routerBound = false;
+    navigationGeneration = 0;
+    showDelayTimer = null;
+    progressTimer = null;
+    hideTimer = null;
+    /** Llamar una vez desde el host (evita suscribirse en el constructor). */
+    bindToRouter() {
+        if (this.routerBound || !isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        this.routerBound = true;
+        this.router.events.subscribe((event) => {
+            if (event instanceof NavigationStart) {
+                this.onNavigationStart();
+                return;
+            }
+            if (event instanceof NavigationEnd ||
+                event instanceof NavigationCancel ||
+                event instanceof NavigationError) {
+                this.onNavigationEnd();
+            }
+        });
+    }
+    onNavigationStart() {
+        this.navigationGeneration += 1;
+        const generation = this.navigationGeneration;
+        this.clearHideTimer();
+        this.clearProgressTimer();
+        this.clearShowDelayTimer();
+        this.showDelayTimer = setTimeout(() => {
+            if (generation !== this.navigationGeneration) {
+                return;
+            }
+            this.active.set(true);
+            this.progress.set(12);
+            this.startProgressSimulation(generation);
+        }, SHOW_DELAY_MS);
+    }
+    onNavigationEnd() {
+        this.navigationGeneration += 1;
+        const generation = this.navigationGeneration;
+        this.clearShowDelayTimer();
+        this.clearProgressTimer();
+        if (!this.active()) {
+            this.progress.set(0);
+            return;
+        }
+        this.progress.set(100);
+        this.clearHideTimer();
+        this.hideTimer = setTimeout(() => {
+            if (generation !== this.navigationGeneration) {
+                return;
+            }
+            this.active.set(false);
+            this.progress.set(0);
+        }, COMPLETE_HIDE_MS);
+    }
+    startProgressSimulation(generation) {
+        this.clearProgressTimer();
+        this.progressTimer = setInterval(() => {
+            if (generation !== this.navigationGeneration) {
+                return;
+            }
+            const current = this.progress();
+            if (current >= MAX_SIMULATED_PROGRESS) {
+                return;
+            }
+            const step = current < 40 ? 14 : current < 70 ? 8 : 4;
+            this.progress.set(Math.min(MAX_SIMULATED_PROGRESS, current + step));
+        }, PROGRESS_TICK_MS);
+    }
+    clearShowDelayTimer() {
+        if (this.showDelayTimer !== null) {
+            clearTimeout(this.showDelayTimer);
+            this.showDelayTimer = null;
+        }
+    }
+    clearProgressTimer() {
+        if (this.progressTimer !== null) {
+            clearInterval(this.progressTimer);
+            this.progressTimer = null;
+        }
+    }
+    clearHideTimer() {
+        if (this.hideTimer !== null) {
+            clearTimeout(this.hideTimer);
+            this.hideTimer = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NavigationLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NavigationLoadingService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NavigationLoadingService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class NavigationLoadingServiceComponent {
+    navLoading = inject(NavigationLoadingService);
+    ngOnInit() {
+        this.navLoading.bindToRouter();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NavigationLoadingServiceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: NavigationLoadingServiceComponent, isStandalone: true, selector: "navigation-loading-service", ngImport: i0, template: "@if (navLoading.active()) {\n  <div\n    class=\"NavigationLoadingBackdrop\"\n    role=\"status\"\n    aria-live=\"polite\"\n    aria-busy=\"true\"\n    aria-label=\"Navegando\"\n  >\n    <div class=\"NavigationLoadingCard\">\n      <div class=\"NavigationLoadingIconWrap\" aria-hidden=\"true\">\n        <lucide-icon name=\"loader-circle\" [spin]=\"true\"></lucide-icon>\n      </div>\n      <div class=\"NavigationLoadingCopy\">\n        <p class=\"NavigationLoadingTitle\">Navegando...</p>\n        <p class=\"NavigationLoadingHint\">Preparando la vista</p>\n      </div>\n      <div class=\"NavigationLoadingProgressTrack\" aria-hidden=\"true\">\n        <div class=\"NavigationLoadingProgressFill\" [style.width.%]=\"navLoading.progress()\"></div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.NavigationLoadingBackdrop{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:16px;background-color:color-mix(in srgb,var(--text-base) 45%,transparent);backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%);pointer-events:auto;animation:NavigationBackdropIn .22s ease-out}.NavigationLoadingCard{display:flex;flex-direction:column;align-items:center;width:min(100%,280px);padding:24px 20px 16px;background-color:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 20px 50px color-mix(in srgb,var(--text-base) 18%,transparent);animation:NavigationCardIn .28s cubic-bezier(.22,1,.36,1);overflow:hidden}.NavigationLoadingIconWrap{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:4px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border)}.NavigationLoadingIconWrap lucide-icon .lucide-svg{width:1.75rem;height:1.75rem;color:var(--primary)}.NavigationLoadingCopy{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;width:100%}.NavigationLoadingTitle{margin:0;font-size:1rem;font-weight:600;letter-spacing:-.01em;color:var(--text-base)}.NavigationLoadingHint{margin:0;font-size:.8125rem;font-weight:400;color:var(--text-muted)}.NavigationLoadingProgressTrack{width:100%;height:3px;margin-top:16px;border-radius:999px;overflow:hidden;background-color:var(--surface-2)}.NavigationLoadingProgressFill{height:100%;width:0;border-radius:inherit;background:var(--primary);transition:width .25s ease-out}@keyframes NavigationBackdropIn{0%{opacity:0}to{opacity:1}}@keyframes NavigationCardIn{0%{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NavigationLoadingServiceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'navigation-loading-service', standalone: true, imports: [LucideIconComponent], template: "@if (navLoading.active()) {\n  <div\n    class=\"NavigationLoadingBackdrop\"\n    role=\"status\"\n    aria-live=\"polite\"\n    aria-busy=\"true\"\n    aria-label=\"Navegando\"\n  >\n    <div class=\"NavigationLoadingCard\">\n      <div class=\"NavigationLoadingIconWrap\" aria-hidden=\"true\">\n        <lucide-icon name=\"loader-circle\" [spin]=\"true\"></lucide-icon>\n      </div>\n      <div class=\"NavigationLoadingCopy\">\n        <p class=\"NavigationLoadingTitle\">Navegando...</p>\n        <p class=\"NavigationLoadingHint\">Preparando la vista</p>\n      </div>\n      <div class=\"NavigationLoadingProgressTrack\" aria-hidden=\"true\">\n        <div class=\"NavigationLoadingProgressFill\" [style.width.%]=\"navLoading.progress()\"></div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.NavigationLoadingBackdrop{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:16px;background-color:color-mix(in srgb,var(--text-base) 45%,transparent);backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%);pointer-events:auto;animation:NavigationBackdropIn .22s ease-out}.NavigationLoadingCard{display:flex;flex-direction:column;align-items:center;width:min(100%,280px);padding:24px 20px 16px;background-color:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 20px 50px color-mix(in srgb,var(--text-base) 18%,transparent);animation:NavigationCardIn .28s cubic-bezier(.22,1,.36,1);overflow:hidden}.NavigationLoadingIconWrap{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:4px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border)}.NavigationLoadingIconWrap lucide-icon .lucide-svg{width:1.75rem;height:1.75rem;color:var(--primary)}.NavigationLoadingCopy{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;width:100%}.NavigationLoadingTitle{margin:0;font-size:1rem;font-weight:600;letter-spacing:-.01em;color:var(--text-base)}.NavigationLoadingHint{margin:0;font-size:.8125rem;font-weight:400;color:var(--text-muted)}.NavigationLoadingProgressTrack{width:100%;height:3px;margin-top:16px;border-radius:999px;overflow:hidden;background-color:var(--surface-2)}.NavigationLoadingProgressFill{height:100%;width:0;border-radius:inherit;background:var(--primary);transition:width .25s ease-out}@keyframes NavigationBackdropIn{0%{opacity:0}to{opacity:1}}@keyframes NavigationCardIn{0%{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"] }]
+        }] });
+
+class AiAutofillOverlayService {
+    seq = 0;
+    state$ = new BehaviorSubject(null);
+    state = this.state$.asObservable();
+    get snapshot() {
+        return this.state$.getValue();
+    }
+    start(title = 'Autocompletando con IA...') {
+        const id = `ai-${++this.seq}`;
+        this.state$.next({
+            id,
+            title: String(title).trim() || 'Autocompletando con IA...',
+            logs: [],
+            startedAt: Date.now(),
+        });
+        return id;
+    }
+    log(id, line) {
+        const cur = this.state$.getValue();
+        if (!cur || cur.id !== id)
+            return;
+        const msg = String(line ?? '').trim();
+        if (!msg)
+            return;
+        this.state$.next({ ...cur, logs: [...cur.logs, msg] });
+    }
+    replaceLogs(id, logs) {
+        const cur = this.state$.getValue();
+        if (!cur || cur.id !== id)
+            return;
+        this.state$.next({ ...cur, logs: Array.isArray(logs) ? logs.map((x) => String(x)) : [] });
+    }
+    end(id) {
+        const cur = this.state$.getValue();
+        if (!cur || cur.id !== id)
+            return;
+        this.state$.next(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AiAutofillOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AiAutofillOverlayService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AiAutofillOverlayService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class AiAutofillOverlayServiceComponent {
+    aiOverlay;
+    state = null;
+    sub;
+    constructor(aiOverlay) {
+        this.aiOverlay = aiOverlay;
+    }
+    ngOnInit() {
+        this.sub = this.aiOverlay.state.subscribe((s) => {
+            this.state = s;
+        });
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AiAutofillOverlayServiceComponent, deps: [{ token: AiAutofillOverlayService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: AiAutofillOverlayServiceComponent, isStandalone: true, selector: "ai-autofill-overlay-service", ngImport: i0, template: "<div\r\n  *ngIf=\"state\"\r\n  class=\"AiAutofillOverlay\"\r\n  aria-live=\"polite\"\r\n  aria-busy=\"true\"\r\n  role=\"alertdialog\"\r\n  aria-modal=\"true\"\r\n>\r\n  <div class=\"AiAutofillCard\">\r\n    <div class=\"AiAutofillHeader\">\r\n      <div class=\"AiAutofillSpinner\" aria-hidden=\"true\"></div>\r\n      <div class=\"AiAutofillTitle\">{{ state.title }}</div>\r\n    </div>\r\n\r\n    <div class=\"AiAutofillLogs\" aria-label=\"Logs de IA en tiempo real\">\r\n      <pre class=\"AiAutofillPre\">{{ state.logs.join('\\n') }}</pre>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".AiAutofillOverlay{position:fixed;inset:0;z-index:10060;display:flex;align-items:center;justify-content:center;padding:16px;background-color:color-mix(in srgb,var(--text-base) 55%,transparent);backdrop-filter:blur(6px);pointer-events:auto}.AiAutofillCard{display:flex;flex-direction:column;gap:8px;width:min(920px,100vw - 32px);max-height:min(78vh,720px);padding:16px;background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:0 12px 40px color-mix(in srgb,var(--text-base) 18%,transparent)}.AiAutofillHeader{display:flex;align-items:center;gap:8px}.AiAutofillTitle{font-size:1rem;font-weight:700;color:var(--text-primary, var(--text-base))}.AiAutofillSpinner{width:22px;height:22px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:AiAutofillSpin .75s linear infinite}.AiAutofillLogs{flex:1;overflow:auto;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--surface-2)}.AiAutofillPre{margin:0;padding:8px 12px;font-size:.85rem;line-height:1.4;color:var(--text-primary, var(--text-base));white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}@keyframes AiAutofillSpin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AiAutofillOverlayServiceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ai-autofill-overlay-service', standalone: true, imports: [CommonModule], template: "<div\r\n  *ngIf=\"state\"\r\n  class=\"AiAutofillOverlay\"\r\n  aria-live=\"polite\"\r\n  aria-busy=\"true\"\r\n  role=\"alertdialog\"\r\n  aria-modal=\"true\"\r\n>\r\n  <div class=\"AiAutofillCard\">\r\n    <div class=\"AiAutofillHeader\">\r\n      <div class=\"AiAutofillSpinner\" aria-hidden=\"true\"></div>\r\n      <div class=\"AiAutofillTitle\">{{ state.title }}</div>\r\n    </div>\r\n\r\n    <div class=\"AiAutofillLogs\" aria-label=\"Logs de IA en tiempo real\">\r\n      <pre class=\"AiAutofillPre\">{{ state.logs.join('\\n') }}</pre>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".AiAutofillOverlay{position:fixed;inset:0;z-index:10060;display:flex;align-items:center;justify-content:center;padding:16px;background-color:color-mix(in srgb,var(--text-base) 55%,transparent);backdrop-filter:blur(6px);pointer-events:auto}.AiAutofillCard{display:flex;flex-direction:column;gap:8px;width:min(920px,100vw - 32px);max-height:min(78vh,720px);padding:16px;background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:0 12px 40px color-mix(in srgb,var(--text-base) 18%,transparent)}.AiAutofillHeader{display:flex;align-items:center;gap:8px}.AiAutofillTitle{font-size:1rem;font-weight:700;color:var(--text-primary, var(--text-base))}.AiAutofillSpinner{width:22px;height:22px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:AiAutofillSpin .75s linear infinite}.AiAutofillLogs{flex:1;overflow:auto;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--surface-2)}.AiAutofillPre{margin:0;padding:8px 12px;font-size:.85rem;line-height:1.4;color:var(--text-primary, var(--text-base));white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}@keyframes AiAutofillSpin{to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: () => [{ type: AiAutofillOverlayService }] });
+
+/**
+ * Thin wrapper around the Web Notifications API.
+ * Host-agnostic: no chat/app coupling. Optional AlertService for permission prompt.
+ */
+class BrowserNotificationService {
+    isBrowser;
+    config = inject(XOSUE_UTILS_SERVICES_CONFIG);
+    alert = inject(AlertService, { optional: true });
+    permissionRequestInFlight = null;
+    pendingQueue = [];
+    tracked = new Map();
+    constructor(platformId) {
+        this.isBrowser = isPlatformBrowser(platformId);
+    }
+    get isSupported() {
+        return this.isBrowser && typeof Notification !== 'undefined';
+    }
+    get permission() {
+        if (!this.isSupported)
+            return 'denied';
+        return Notification.permission;
+    }
+    get canShow() {
+        return this.isSupported && this.permission === 'granted';
+    }
+    queuePending(payload) {
+        this.pendingQueue.push(payload);
+        if (this.pendingQueue.length > 8) {
+            this.pendingQueue.shift();
+        }
+    }
+    /** Call from a user gesture (click) so the browser allows requestPermission. */
+    beginPermissionRequest() {
+        if (!this.isSupported || Notification.permission !== 'default')
+            return;
+        if (!this.permissionRequestInFlight) {
+            this.permissionRequestInFlight = Notification.requestPermission().catch(() => 'denied');
+        }
+    }
+    async completePermissionRequest() {
+        if (!this.isSupported)
+            return false;
+        if (Notification.permission === 'granted')
+            return true;
+        if (Notification.permission === 'denied')
+            return false;
+        if (!this.permissionRequestInFlight)
+            return false;
+        const perm = await this.permissionRequestInFlight;
+        return perm === 'granted';
+    }
+    /**
+     * Optional UX helper: confirm via AlertService then request permission on Accept click.
+     * Returns whether permission was granted.
+     */
+    async requestPermissionWithPrompt(promptMessage) {
+        if (!this.isSupported)
+            return false;
+        if (this.permission === 'granted')
+            return true;
+        if (this.permission === 'denied')
+            return false;
+        if (!this.alert) {
+            this.beginPermissionRequest();
+            return this.completePermissionRequest();
+        }
+        const accepted = await this.alert.showConfirm(promptMessage ?? this.config.browserNotificationPermissionPrompt, { onAcceptClick: () => this.beginPermissionRequest() });
+        if (!accepted)
+            return false;
+        return this.completePermissionRequest();
+    }
+    drainPendingQueue() {
+        const batch = [...this.pendingQueue];
+        this.pendingQueue.length = 0;
+        let shown = 0;
+        for (const payload of batch) {
+            if (this.show(payload))
+                shown += 1;
+        }
+        return shown;
+    }
+    showOrQueue(payload) {
+        if (!this.isSupported)
+            return false;
+        if (this.canShow)
+            return this.show(payload);
+        if (Notification.permission === 'denied')
+            return false;
+        this.queuePending(payload);
+        return false;
+    }
+    show(payload) {
+        if (!this.canShow)
+            return false;
+        try {
+            const icon = this.resolveIconUrl();
+            const notification = new Notification(payload.title, {
+                body: payload.body,
+                tag: payload.tag,
+                icon,
+                badge: icon,
+                requireInteraction: false,
+                silent: false,
+                data: payload.data,
+            });
+            this.tracked.set(payload.tag, notification);
+            notification.onclose = () => this.tracked.delete(payload.tag);
+            notification.onclick = (ev) => {
+                ev.preventDefault();
+                try {
+                    window.focus();
+                }
+                catch {
+                    /* ignore */
+                }
+                payload.onClick?.();
+                notification.close();
+            };
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    closeByTag(tag) {
+        const n = this.tracked.get(tag);
+        if (n) {
+            try {
+                n.close();
+            }
+            catch {
+                /* ignore */
+            }
+            this.tracked.delete(tag);
+        }
+    }
+    playSound() {
+        if (!this.isBrowser || !this.canShow)
+            return;
+        try {
+            const audio = new Audio(this.config.browserNotificationSoundUrl);
+            audio.volume = 0.45;
+            void audio.play().catch(() => { });
+        }
+        catch {
+            /* ignore */
+        }
+    }
+    resolveIconUrl() {
+        if (!this.isBrowser)
+            return undefined;
+        try {
+            return new URL(this.config.browserNotificationIconUrl, window.location.origin).href;
+        }
+        catch {
+            return this.config.browserNotificationIconUrl;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BrowserNotificationService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BrowserNotificationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BrowserNotificationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }] });
+
+/*
+ * Public API Surface of @xosue-utils/services
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AiAutofillOverlayService, AiAutofillOverlayServiceComponent, AlertService, AlertServiceComponent, AudioPlayerComponent, BrowserNotificationService, ContextMenuService, ContextMenuServiceComponent, FieldHelpTooltipComponent, GlobalLoadingService, GlobalLoadingServiceComponent, ImageViewerComponent, LucideIconComponent, MediaViewerService, MediaViewerServiceComponent, NavigationLoadingService, NavigationLoadingServiceComponent, SessionRequestService, SessionRequestServiceComponent, ToastService, ToastServiceComponent, VideoPlayerComponent, XOSUE_UTILS_SERVICES_CONFIG, XOSUE_UTILS_SERVICES_DEFAULTS, provideXosueUtilsServices, resolveXosueUtilsServicesConfig };
+//# sourceMappingURL=xosue-utils-services.mjs.map