/**
 * UpdateBannerComponent
 *
 * Banner que avisa al usuario cuando hay una versión nueva de la app.
 * Consume `AppVersionService` (no toca `SwUpdate` ni `AppConfigService`
 * directamente) y soporta dos modos:
 *
 * - `update-available` — banner descartable: mensaje + botón "Actualizar"
 *   + botón cerrar.
 * - `update-required` — overlay bloqueante no-descartable (hard gate):
 *   mensaje + botón "Actualizar". Sin botón cerrar.
 *
 * Cuando el estado es `up-to-date` (o el usuario descartó el banner opcional)
 * no renderiza nada.
 */
import { CommonModule } from '@angular/common';
import { Component, computed, inject } from '@angular/core';
import { I18nService } from '../../../services/i18n';
import { AppVersionService } from '../../../services/app-version/app-version.service';
import { ButtonComponent } from '../../atoms/button/button.component';
import { IconComponent } from '../../atoms/icon/icon.component';
import { TextComponent } from '../../atoms/text/text.component';
import { UPDATE_BANNER_DEFAULT_CONTENT, UPDATE_BANNER_I18N_NAMESPACE } from './types';
import * as i0 from "@angular/core";
/**
 * val-update-banner
 *
 * Avisa al usuario de una versión nueva. Colócalo una sola vez, alto en el
 * árbol de la app (p.ej. en `app.component` por encima del router outlet)
 * para que sea visible en cualquier ruta.
 *
 * @example
 * ```html
 * <val-update-banner />
 * ```
 */
export class UpdateBannerComponent {
    constructor() {
        this.version = inject(AppVersionService);
        this.i18n = inject(I18nService);
        /**
         * True cuando el banner está en modo obligatorio (hard gate, no descartable).
         */
        this.required = computed(() => this.version.status() === 'update-required');
        /**
         * True cuando el banner debe renderizarse:
         * - siempre que el estado sea `update-required`, o
         * - si es `update-available` y el usuario no lo descartó.
         */
        this.visible = computed(() => {
            const status = this.version.status();
            if (status === 'update-required')
                return true;
            if (status === 'update-available')
                return !this.version.dismissed();
            return false;
        });
        /**
         * Textos resolvidos del banner. Reactivo a idioma y al estado required.
         * Usa el namespace `UpdateBanner` de `I18nService` con fallback embebido.
         */
        this.t = computed(() => {
            this.i18n.lang(); // track para reactividad
            const isRequired = this.required();
            return {
                title: this.tr(isRequired ? 'requiredTitle' : 'availableTitle'),
                message: this.tr(isRequired ? 'requiredMessage' : 'availableMessage'),
                updateAction: this.tr('updateAction'),
                dismissAction: this.tr('dismissAction'),
            };
        });
    }
    /** Aplica la actualización (activa el SW si existe + recarga). */
    onUpdate() {
        void this.version.applyUpdate();
    }
    /** Descarta el banner opcional. No-op en modo obligatorio. */
    onDismiss() {
        this.version.dismiss();
    }
    /**
     * Resuelve una key i18n del namespace `UpdateBanner` con fallback al
     * contenido por defecto embebido (es / en / pt).
     */
    tr(key) {
        const value = this.i18n.t(key, UPDATE_BANNER_I18N_NAMESPACE);
        if (value && !value.startsWith('['))
            return value;
        const lang = this.i18n.lang();
        const pack = UPDATE_BANNER_DEFAULT_CONTENT[lang] ??
            UPDATE_BANNER_DEFAULT_CONTENT.es;
        return pack[key];
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UpdateBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: UpdateBannerComponent, isStandalone: true, selector: "val-update-banner", ngImport: i0, template: `
    @if (visible()) {
      <div
        class="val-update-banner"
        [class.val-update-banner--required]="required()"
        role="alert"
        [attr.aria-live]="required() ? 'assertive' : 'polite'"
      >
        @if (required()) {
          <div class="val-update-banner__backdrop"></div>
        }

        <div class="val-update-banner__panel">
          <div class="val-update-banner__icon">
            <val-icon
              [props]="{
                name: required() ? 'warning-outline' : 'cloud-download-outline',
                size: 'large',
                color: required() ? 'warning' : 'primary',
              }"
            />
          </div>

          <div class="val-update-banner__body">
            <val-text
              [props]="{
                content: t().title,
                size: 'medium',
                bold: true,
                color: 'dark',
              }"
            />
            <val-text
              [props]="{
                content: t().message,
                size: 'small',
                bold: false,
                color: 'medium',
              }"
            />
          </div>

          <div class="val-update-banner__actions">
            <val-button
              [props]="{
                text: t().updateAction,
                color: 'primary',
                fill: 'solid',
                size: 'small',
                state: 'ENABLED',
                type: 'button',
              }"
              (onClick)="onUpdate()"
            />
            @if (!required()) {
              <val-button
                [props]="{
                  text: t().dismissAction,
                  color: 'dark',
                  fill: 'clear',
                  size: 'small',
                  state: 'ENABLED',
                  type: 'button',
                }"
                (onClick)="onDismiss()"
              />
            }
          </div>
        </div>
      </div>
    }
  `, isInline: true, styles: ["@charset \"UTF-8\";:host{display:contents}.val-update-banner{position:fixed;top:0;left:0;right:0;z-index:1100;display:flex;justify-content:center;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px;pointer-events:none}.val-update-banner__backdrop{position:fixed;inset:0;z-index:-1;background:#0000008c;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);pointer-events:auto}.val-update-banner__panel{pointer-events:auto;display:flex;flex-direction:row;align-items:center;gap:12px;width:100%;max-width:640px;padding:12px 16px;background:var(--ion-background-color, #fff);border:1px solid var(--val-border-color, rgba(0, 0, 0, .08));border-radius:var(--val-border-radius, 12px);box-shadow:0 4px 24px #0000001f;animation:val-update-banner-in .25s ease-out}.val-update-banner--required{align-items:center;height:100%}.val-update-banner--required .val-update-banner__panel{flex-direction:column;text-align:center;max-width:420px}.val-update-banner__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--ion-color-primary) 14%,transparent)}.val-update-banner--required .val-update-banner__icon{background:color-mix(in srgb,var(--ion-color-warning) 16%,transparent)}.val-update-banner__body{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}.val-update-banner__actions{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;gap:4px}.val-update-banner--required .val-update-banner__actions{margin-top:8px}@keyframes val-update-banner-in{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 540px){.val-update-banner__panel{flex-direction:column;text-align:center}.val-update-banner__actions{width:100%;justify-content:center}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: IconComponent, selector: "val-icon", inputs: ["props"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UpdateBannerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-update-banner', standalone: true, imports: [CommonModule, TextComponent, ButtonComponent, IconComponent], template: `
    @if (visible()) {
      <div
        class="val-update-banner"
        [class.val-update-banner--required]="required()"
        role="alert"
        [attr.aria-live]="required() ? 'assertive' : 'polite'"
      >
        @if (required()) {
          <div class="val-update-banner__backdrop"></div>
        }

        <div class="val-update-banner__panel">
          <div class="val-update-banner__icon">
            <val-icon
              [props]="{
                name: required() ? 'warning-outline' : 'cloud-download-outline',
                size: 'large',
                color: required() ? 'warning' : 'primary',
              }"
            />
          </div>

          <div class="val-update-banner__body">
            <val-text
              [props]="{
                content: t().title,
                size: 'medium',
                bold: true,
                color: 'dark',
              }"
            />
            <val-text
              [props]="{
                content: t().message,
                size: 'small',
                bold: false,
                color: 'medium',
              }"
            />
          </div>

          <div class="val-update-banner__actions">
            <val-button
              [props]="{
                text: t().updateAction,
                color: 'primary',
                fill: 'solid',
                size: 'small',
                state: 'ENABLED',
                type: 'button',
              }"
              (onClick)="onUpdate()"
            />
            @if (!required()) {
              <val-button
                [props]="{
                  text: t().dismissAction,
                  color: 'dark',
                  fill: 'clear',
                  size: 'small',
                  state: 'ENABLED',
                  type: 'button',
                }"
                (onClick)="onDismiss()"
              />
            }
          </div>
        </div>
      </div>
    }
  `, styles: ["@charset \"UTF-8\";:host{display:contents}.val-update-banner{position:fixed;top:0;left:0;right:0;z-index:1100;display:flex;justify-content:center;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px;pointer-events:none}.val-update-banner__backdrop{position:fixed;inset:0;z-index:-1;background:#0000008c;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);pointer-events:auto}.val-update-banner__panel{pointer-events:auto;display:flex;flex-direction:row;align-items:center;gap:12px;width:100%;max-width:640px;padding:12px 16px;background:var(--ion-background-color, #fff);border:1px solid var(--val-border-color, rgba(0, 0, 0, .08));border-radius:var(--val-border-radius, 12px);box-shadow:0 4px 24px #0000001f;animation:val-update-banner-in .25s ease-out}.val-update-banner--required{align-items:center;height:100%}.val-update-banner--required .val-update-banner__panel{flex-direction:column;text-align:center;max-width:420px}.val-update-banner__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--ion-color-primary) 14%,transparent)}.val-update-banner--required .val-update-banner__icon{background:color-mix(in srgb,var(--ion-color-warning) 16%,transparent)}.val-update-banner__body{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}.val-update-banner__actions{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;gap:4px}.val-update-banner--required .val-update-banner__actions{margin-top:8px}@keyframes val-update-banner-in{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 540px){.val-update-banner__panel{flex-direction:column;text-align:center}.val-update-banner__actions{width:100%;justify-content:center}}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64, 