/**
 * MaintenancePageComponent
 *
 * Página de mantenimiento que se muestra cuando la aplicación está en modo mantenimiento.
 */
import { CommonModule } from '@angular/common';
import { Component, computed, inject, Input } from '@angular/core';
import { IonContent } from '@ionic/angular/standalone';
import { ImageComponent } from '../../atoms/image/image.component';
import { I18nService } from '../../../services/i18n';
import * as i0 from "@angular/core";
/**
 * val-maintenance-page
 *
 * Página completa de mantenimiento con imagen, título y mensaje personalizables.
 * Se integra con i18n para textos por defecto en múltiples idiomas.
 *
 * @example
 * ```html
 * <!-- Uso básico (usa textos por defecto) -->
 * <val-maintenance-page />
 *
 * <!-- Personalizado -->
 * <val-maintenance-page
 *   [props]="{
 *     title: 'En mantenimiento',
 *     message: 'Volvemos pronto',
 *     image: 'assets/maintenance.svg'
 *   }"
 * />
 * ```
 *
 * @example
 * ```typescript
 * // En app.component.ts
 * @Component({
 *   template: \`
 *     @if (appConfig.isMaintenanceMode()) {
 *       <val-maintenance-page />
 *     } @else {
 *       <ion-router-outlet />
 *     }
 *   \`
 * })
 * export class AppComponent {
 *   appConfig = inject(AppConfigService);
 * }
 * ```
 */
export class MaintenancePageComponent {
    constructor() {
        /**
         * Configuración de la página de mantenimiento.
         */
        this.props = {};
        this.i18n = inject(I18nService);
        /**
         * Título de la página (reactivo a cambios de idioma).
         */
        this.title = computed(() => this.props.title || this.i18n.t('maintenanceMode', 'AppConfig'));
        /**
         * Mensaje de la página (reactivo a cambios de idioma).
         */
        this.message = computed(() => this.props.message || this.i18n.t('maintenanceMessage', 'AppConfig'));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MaintenancePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MaintenancePageComponent, isStandalone: true, selector: "val-maintenance-page", inputs: { props: "props" }, ngImport: i0, template: `
    <ion-content class="maintenance-content">
      <div class="maintenance-container">
        <div class="maintenance-icon">
          @if (props.image) {
            <val-image
              [props]="{
                src: props.image,
                alt: 'Maintenance',
                mode: 'box',
                size: 'large',
                shaded: false,
                bordered: false
              }"
            />
          } @else {
            <div class="default-icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
              >
                <path
                  d="M12 6v6l4 2m6-2a10 10 0 11-20 0 10 10 0 0120 0z"
                  stroke="currentColor"
                  stroke-width="2"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </div>
          }
        </div>

        <h1 class="maintenance-title">{{ title() }}</h1>
        <p class="maintenance-message">{{ message() }}</p>
      </div>
    </ion-content>
  `, isInline: true, styles: [".maintenance-content{--background: var(--ion-background-color, #f5f5f5)}.maintenance-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;padding:2rem;text-align:center}.maintenance-icon{margin-bottom:2rem}.maintenance-icon .default-icon{width:120px;height:120px;color:var(--ion-color-primary, #4a1d96);opacity:.8}.maintenance-icon .default-icon svg{width:100%;height:100%}.maintenance-title{font-size:2rem;font-weight:700;color:var(--ion-text-color, #1a1a1a);margin:0 0 1rem}.maintenance-message{font-size:1.125rem;color:var(--ion-color-medium, #666);margin:0;max-width:400px;line-height:1.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MaintenancePageComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-maintenance-page', standalone: true, imports: [CommonModule, IonContent, ImageComponent], template: `
    <ion-content class="maintenance-content">
      <div class="maintenance-container">
        <div class="maintenance-icon">
          @if (props.image) {
            <val-image
              [props]="{
                src: props.image,
                alt: 'Maintenance',
                mode: 'box',
                size: 'large',
                shaded: false,
                bordered: false
              }"
            />
          } @else {
            <div class="default-icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
              >
                <path
                  d="M12 6v6l4 2m6-2a10 10 0 11-20 0 10 10 0 0120 0z"
                  stroke="currentColor"
                  stroke-width="2"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </div>
          }
        </div>

        <h1 class="maintenance-title">{{ title() }}</h1>
        <p class="maintenance-message">{{ message() }}</p>
      </div>
    </ion-content>
  `, styles: [".maintenance-content{--background: var(--ion-background-color, #f5f5f5)}.maintenance-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;padding:2rem;text-align:center}.maintenance-icon{margin-bottom:2rem}.maintenance-icon .default-icon{width:120px;height:120px;color:var(--ion-color-primary, #4a1d96);opacity:.8}.maintenance-icon .default-icon svg{width:100%;height:100%}.maintenance-title{font-size:2rem;font-weight:700;color:var(--ion-text-color, #1a1a1a);margin:0 0 1rem}.maintenance-message{font-size:1.125rem;color:var(--ion-color-medium, #666);margin:0;max-width:400px;line-height:1.6}\n"] }]
        }], propDecorators: { props: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 