import { CommonModule } from '@angular/common';
import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
import { IonButton, IonButtons, IonIcon, IonMenuButton, IonText, IonTitle, IonToolbar, } from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { chevronBackOutline } from 'ionicons/icons';
import { NavigationService } from '../../../services/navigation/navigation.service';
import { AvatarComponent } from '../../atoms/avatar/avatar.component';
import { ImageComponent } from '../../atoms/image/image.component';
import { UserAvatarComponent } from '../../atoms/user-avatar/user-avatar.component';
import { LanguageSelectorComponent } from '../../molecules/language-selector/language-selector.component';
import { ToolbarActionType } from '../../types';
import * as i0 from "@angular/core";
import * as i1 from "../../../services/icons.service";
import * as i2 from "@angular/common";
/**
 * ToolbarComponent
 *
 * Componente de barra de herramientas reutilizable para encabezados y pies de página.
 * Permite acciones, botón de retroceso, menú y personalización de colores y título.
 *
 * @example
 * <val-toolbar [props]="{ title: 'Mi App', withBack: true, actions: [...] }" (onClick)="handleToolbarAction($event)"></val-toolbar>
 *
 * @input props {ToolbarMetadata} - Metadatos de la barra de herramientas.
 * @output onClick - Emite el token de la acción clicada.
 */
export class ToolbarComponent {
    constructor(icon) {
        this._lspInput = { ls: null, color: null };
        this._lspCache = null;
        /**
         * Evento emitido al hacer click en una acción o botón de la barra.
         */
        this.onClick = new EventEmitter();
        this.actionTypes = ToolbarActionType;
        this.nav = inject(NavigationService);
        addIcons({ chevronBackOutline });
    }
    ngOnInit() { }
    /**
     * Emite el token de la acción clicada.
     * @param token Token de la acción
     */
    clickHandler(token) {
        this.onClick.emit(token);
    }
    goBack() {
        this.nav.back();
    }
    /**
     * Determina si hay acciones a la derecha.
     */
    someInRight() {
        return !!this.props.actions.find(x => x.position === 'right');
    }
    /**
     * Determina si hay acciones a la izquierda.
     */
    someInLeft() {
        return !!this.props.actions.find(x => x.position === 'left');
    }
    /**
     * Devuelve las acciones de la derecha.
     */
    rightActions() {
        return this.props.actions.filter(x => x.position === 'right');
    }
    /**
     * Devuelve las acciones de la izquierda.
     */
    leftActions() {
        return this.props.actions.filter(x => x.position === 'left');
    }
    /**
     * Language selector props — memoized to avoid new object reference on every CD cycle.
     */
    get languageSelectorProps() {
        const ls = this.props.languageSelector;
        const color = this.props.textColor;
        if (this._lspCache !== null && this._lspInput.ls === ls && this._lspInput.color === color) {
            return this._lspCache;
        }
        this._lspInput = { ls, color };
        this._lspCache = { mode: 'icon', color: color || 'dark', ...ls };
        return this._lspCache;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ToolbarComponent, isStandalone: true, selector: "val-toolbar", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
    <ion-toolbar [color]="props.color" [class.background]="props.color === 'background'">
      <ng-container *ngIf="props.withBack">
        <ion-buttons class="left-buttons" slot="start" *ngIf="props.withBack">
          <ion-button fill="clear" (click)="goBack()" [color]="props.textColor" style="margin-left: 8px;">
            <ion-icon name="chevron-back-outline" [slot]="props.backText ? 'start' : 'icon-only'"></ion-icon>
            <ion-text *ngIf="props.backText">{{ props.backText }}</ion-text>
          </ion-button>
        </ion-buttons>
      </ng-container>
      <ng-container *ngIf="props.withActions">
        <ion-buttons slot="end" *ngIf="someInRight() || props.withMenu || props.languageSelector">
          <ng-container *ngFor="let action of rightActions()">
            <ion-button *ngIf="action.type === actionTypes.ICON" (click)="clickHandler(action.token)">
              <ion-icon slot="icon-only" [name]="action.description" [color]="props.textColor"></ion-icon>
            </ion-button>
            <val-user-avatar
              *ngIf="action.type === actionTypes.AVATAR"
              [props]="{
                user: action.user,
                avatarUrl: action.description,
                size: action.avatarSize ?? 'small',
              }"
              (onClick)="clickHandler(action.token)"
            ></val-user-avatar>
            <val-image
              *ngIf="action.type === actionTypes.IMAGE"
              [props]="action.image"
              (click)="clickHandler(action.token)"
            ></val-image>
            <ion-button
              [color]="props.textColor"
              *ngIf="action.type === actionTypes.BUTTON"
              (click)="clickHandler(action.token)"
              >{{ action.description }}</ion-button
            >
          </ng-container>
          @if (props.languageSelector) {
            <val-language-selector [props]="languageSelectorProps"></val-language-selector>
          }
          @if (props.withMenu) {
            <ion-menu-button color="dark"></ion-menu-button>
          }
        </ion-buttons>
        <ion-buttons slot="start" *ngIf="someInLeft()" style="padding-left: 4px;">
          <ng-container *ngFor="let action of leftActions()">
            <ion-button *ngIf="action.type === actionTypes.ICON" (click)="clickHandler(action.token)">
              <ion-icon slot="icon-only" [name]="action.description" [color]="props.textColor"></ion-icon>
            </ion-button>
            <val-user-avatar
              *ngIf="action.type === actionTypes.AVATAR"
              [props]="{
                user: action.user,
                avatarUrl: action.description,
                size: action.avatarSize ?? 'small',
              }"
              (onClick)="clickHandler(action.token)"
            ></val-user-avatar>
            <val-image
              *ngIf="action.type === actionTypes.IMAGE"
              [props]="action.image"
              (click)="clickHandler(action.token)"
            ></val-image>
            <ion-button *ngIf="action.type === actionTypes.BUTTON" (click)="clickHandler(action.token)">{{
              action.description
            }}</ion-button>
          </ng-container>
        </ion-buttons>
      </ng-container>
      <ion-title *ngIf="props.title" [color]="props.textColor">{{ props.title }}</ion-title>
      <!-- experimental -->
      <ng-content select="[toolbar-bottom]"></ng-content>
    </ion-toolbar>
  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-button{font-family:var(--ion-default-font),Arial,sans-serif}.left-buttons{margin-left:-1rem}.background{background:var(--ion-background-color)}\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"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: UserAvatarComponent, selector: "val-user-avatar", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: IonMenuButton, selector: "ion-menu-button", inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] }, { kind: "component", type: LanguageSelectorComponent, selector: "val-language-selector", inputs: ["props"], outputs: ["languageChange"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolbarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-toolbar', standalone: true, imports: [
                        CommonModule,
                        IonToolbar,
                        IonButtons,
                        IonButton,
                        IonIcon,
                        IonText,
                        IonTitle,
                        AvatarComponent,
                        ImageComponent,
                        UserAvatarComponent,
                        IonMenuButton,
                        LanguageSelectorComponent,
                    ], template: `
    <ion-toolbar [color]="props.color" [class.background]="props.color === 'background'">
      <ng-container *ngIf="props.withBack">
        <ion-buttons class="left-buttons" slot="start" *ngIf="props.withBack">
          <ion-button fill="clear" (click)="goBack()" [color]="props.textColor" style="margin-left: 8px;">
            <ion-icon name="chevron-back-outline" [slot]="props.backText ? 'start' : 'icon-only'"></ion-icon>
            <ion-text *ngIf="props.backText">{{ props.backText }}</ion-text>
          </ion-button>
        </ion-buttons>
      </ng-container>
      <ng-container *ngIf="props.withActions">
        <ion-buttons slot="end" *ngIf="someInRight() || props.withMenu || props.languageSelector">
          <ng-container *ngFor="let action of rightActions()">
            <ion-button *ngIf="action.type === actionTypes.ICON" (click)="clickHandler(action.token)">
              <ion-icon slot="icon-only" [name]="action.description" [color]="props.textColor"></ion-icon>
            </ion-button>
            <val-user-avatar
              *ngIf="action.type === actionTypes.AVATAR"
              [props]="{
                user: action.user,
                avatarUrl: action.description,
                size: action.avatarSize ?? 'small',
              }"
              (onClick)="clickHandler(action.token)"
            ></val-user-avatar>
            <val-image
              *ngIf="action.type === actionTypes.IMAGE"
              [props]="action.image"
              (click)="clickHandler(action.token)"
            ></val-image>
            <ion-button
              [color]="props.textColor"
              *ngIf="action.type === actionTypes.BUTTON"
              (click)="clickHandler(action.token)"
              >{{ action.description }}</ion-button
            >
          </ng-container>
          @if (props.languageSelector) {
            <val-language-selector [props]="languageSelectorProps"></val-language-selector>
          }
          @if (props.withMenu) {
            <ion-menu-button color="dark"></ion-menu-button>
          }
        </ion-buttons>
        <ion-buttons slot="start" *ngIf="someInLeft()" style="padding-left: 4px;">
          <ng-container *ngFor="let action of leftActions()">
            <ion-button *ngIf="action.type === actionTypes.ICON" (click)="clickHandler(action.token)">
              <ion-icon slot="icon-only" [name]="action.description" [color]="props.textColor"></ion-icon>
            </ion-button>
            <val-user-avatar
              *ngIf="action.type === actionTypes.AVATAR"
              [props]="{
                user: action.user,
                avatarUrl: action.description,
                size: action.avatarSize ?? 'small',
              }"
              (onClick)="clickHandler(action.token)"
            ></val-user-avatar>
            <val-image
              *ngIf="action.type === actionTypes.IMAGE"
              [props]="action.image"
              (click)="clickHandler(action.token)"
            ></val-image>
            <ion-button *ngIf="action.type === actionTypes.BUTTON" (click)="clickHandler(action.token)">{{
              action.description
            }}</ion-button>
          </ng-container>
        </ion-buttons>
      </ng-container>
      <ion-title *ngIf="props.title" [color]="props.textColor">{{ props.title }}</ion-title>
      <!-- experimental -->
      <ng-content select="[toolbar-bottom]"></ng-content>
    </ion-toolbar>
  `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-button{font-family:var(--ion-default-font),Arial,sans-serif}.left-buttons{margin-left:-1rem}.background{background:var(--ion-background-color)}\n"] }]
        }], ctorParameters: () => [{ type: i1.IconService }], propDecorators: { props: [{
                type: Input
            }], onClick: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 