import { CommonModule } from '@angular/common';
import { Component, computed, EventEmitter, inject, Input, Output } from '@angular/core';
import { NavController } from '@ionic/angular';
import { IonCol, IonGrid, IonHeader, IonRow, IonTitle, IonToolbar } from '@ionic/angular/standalone';
import { ExpandableTextComponent } from '../../molecules/expandable-text/expandable-text.component';
import { ButtonComponent } from '../../atoms/button/button.component';
import { I18nService } from '../../../services/i18n';
import * as i0 from "@angular/core";
/**
 * val-page-template
 *
 * A page template component with title, expandable description,
 * content projection, and optional back navigation button.
 *
 * @example
 * <val-page-template
 *   [props]="{
 *     pageTitle: 'Getting Started',
 *     pageDescription: 'Learn how to use our components...',
 *     showBackButton: true
 *   }"
 * >
 *   <div extra-description>
 *     <p>Additional info here</p>
 *   </div>
 *
 *   <!-- Main content -->
 *   <my-content></my-content>
 *
 *   <div extra-footer>
 *     <p>Footer content</p>
 *   </div>
 * </val-page-template>
 *
 * @input props - Page template configuration
 * @output onBack - Emits when back button is clicked
 */
export class PageTemplateComponent {
    constructor() {
        this.nav = inject(NavController);
        this.i18n = inject(I18nService);
        /**
         * Page template configuration.
         */
        this.props = {};
        /**
         * Emits when the back button is clicked.
         */
        this.onBack = new EventEmitter();
        /**
         * Back button text - reactive to language changes.
         */
        this.backButtonText = computed(() => {
            this.i18n.lang(); // Track language changes
            return this.props.backButtonText || this.i18n.t('back');
        });
    }
    /**
     * Handles back navigation.
     */
    handleBack() {
        this.onBack.emit();
        this.nav.back();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PageTemplateComponent, isStandalone: true, selector: "val-page-template", inputs: { props: "props" }, outputs: { onBack: "onBack" }, ngImport: i0, template: `
    @if (props.pageTitle) {
      <ion-header [class.ion-no-border]="true">
        <ion-toolbar style="--background: transparent; --padding-start: 0; --padding-end: 0;">
          <ion-title class="page-title" size="large" style="--padding-start: 0; --padding-end: 0; padding: 0;">{{ props.pageTitle }}</ion-title>
        </ion-toolbar>
      </ion-header>
    }
    <ion-grid>
      <ion-row class="ion-justify-content-center description-row">
        <ion-col size="12" size-md="10" size-lg="8">
          @if (props.pageDescription) {
            <div class="description-container">
              <val-expandable-text
                [props]="{
                  limit: props.descriptionLimit || 180,
                  content: props.pageDescription,
                  color: props.descriptionColor || 'dark',
                }"
              />
            </div>
          }
          <ng-content select="[extra-description]"></ng-content>
        </ion-col>
      </ion-row>
      <ng-content></ng-content>
      <ng-content select="[extra-footer]"></ng-content>
      @if (props.showBackButton) {
        <ion-row class="ion-justify-content-center back-row">
          <ion-col size="12" size-md="10" size-lg="8">
            <val-button
              class="back-button"
              [props]="{
                text: backButtonText(),
                color: 'dark',
                size: 'small',
                type: 'button',
                state: 'ENABLED',
                fill: 'outline',
                shape: 'round',
                icon: {
                  name: 'arrow-back-outline',
                  slot: 'start'
                }
              }"
              (onClick)="handleBack()"
            />
          </ion-col>
        </ion-row>
      }
    </ion-grid>
  `, isInline: true, styles: [".page-title{font-size:1.6rem;font-weight:800}@media (min-width: 768px){.page-title{font-size:2rem}}.description-row{margin-bottom:16px}.description-container{margin-top:1rem}.back-row{margin-bottom:16px}.back-button{display:block;margin:1rem 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: ExpandableTextComponent, selector: "val-expandable-text", inputs: ["props"] }, { kind: "component", type: IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: IonRow, selector: "ion-row" }, { kind: "component", type: IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageTemplateComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-page-template', standalone: true, imports: [
                        CommonModule,
                        IonHeader,
                        IonToolbar,
                        IonTitle,
                        ExpandableTextComponent,
                        IonGrid,
                        IonRow,
                        IonCol,
                        ButtonComponent,
                    ], template: `
    @if (props.pageTitle) {
      <ion-header [class.ion-no-border]="true">
        <ion-toolbar style="--background: transparent; --padding-start: 0; --padding-end: 0;">
          <ion-title class="page-title" size="large" style="--padding-start: 0; --padding-end: 0; padding: 0;">{{ props.pageTitle }}</ion-title>
        </ion-toolbar>
      </ion-header>
    }
    <ion-grid>
      <ion-row class="ion-justify-content-center description-row">
        <ion-col size="12" size-md="10" size-lg="8">
          @if (props.pageDescription) {
            <div class="description-container">
              <val-expandable-text
                [props]="{
                  limit: props.descriptionLimit || 180,
                  content: props.pageDescription,
                  color: props.descriptionColor || 'dark',
                }"
              />
            </div>
          }
          <ng-content select="[extra-description]"></ng-content>
        </ion-col>
      </ion-row>
      <ng-content></ng-content>
      <ng-content select="[extra-footer]"></ng-content>
      @if (props.showBackButton) {
        <ion-row class="ion-justify-content-center back-row">
          <ion-col size="12" size-md="10" size-lg="8">
            <val-button
              class="back-button"
              [props]="{
                text: backButtonText(),
                color: 'dark',
                size: 'small',
                type: 'button',
                state: 'ENABLED',
                fill: 'outline',
                shape: 'round',
                icon: {
                  name: 'arrow-back-outline',
                  slot: 'start'
                }
              }"
              (onClick)="handleBack()"
            />
          </ion-col>
        </ion-row>
      }
    </ion-grid>
  `, styles: [".page-title{font-size:1.6rem;font-weight:800}@media (min-width: 768px){.page-title{font-size:2rem}}.description-row{margin-bottom:16px}.description-container{margin-top:1rem}.back-row{margin-bottom:16px}.back-button{display:block;margin:1rem 0}\n"] }]
        }], propDecorators: { props: [{
                type: Input
            }], onBack: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 