import { CommonModule } from '@angular/common';
import { Component, computed, inject, Input } from '@angular/core';
import { IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonMenu, IonMenuToggle, IonToolbar, MenuController, } from '@ionic/angular/standalone';
import { ImageComponent } from '../../atoms/image/image.component';
import { ButtonComponent } from '../../atoms/button/button.component';
import { I18nService } from '../../../services/i18n';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
/**
 * val-menu
 *
 * A side menu component using Ionic IonMenu with customizable logo,
 * close button, and content projection for menu items.
 *
 * @example
 * <val-menu
 *   [props]="{
 *     id: 'main-menu',
 *     contentId: 'main-content',
 *     side: 'start',
 *     type: 'overlay',
 *     swipe: true,
 *     showCloseButton: true
 *   }"
 * >
 *   <val-links-accordion [props]="menuLinks"></val-links-accordion>
 * </val-menu>
 *
 * <ion-router-outlet id="main-content"></ion-router-outlet>
 *
 * @input props - Menu configuration
 */
export class MenuComponent {
    constructor() {
        this.menuCtrl = inject(MenuController);
        this.i18n = inject(I18nService);
        /**
         * Menu configuration.
         */
        this.props = {
            side: 'start',
            type: 'overlay',
            swipe: true,
        };
        /**
         * Close button text - reactive to language changes.
         */
        this.closeButtonText = computed(() => {
            this.i18n.lang(); // Track language changes
            return this.props.closeButtonText || this.i18n.t('close');
        });
    }
    /**
     * Closes the menu.
     */
    async closeMenu() {
        await this.menuCtrl.close(this.props.id);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MenuComponent, isStandalone: true, selector: "val-menu", inputs: { props: "props" }, ngImport: i0, template: `
    <ion-menu
      [menuId]="props.id"
      [contentId]="props.contentId"
      [type]="props.type || 'overlay'"
      [side]="props.side || 'start'"
      [swipeGesture]="props.swipe !== false"
    >
      <ion-header [class.ion-no-border]="true">
        <ion-toolbar>
          <ion-buttons slot="start" style="padding-left: .5rem;">
            <val-image
              *ngIf="props.logo"
              [props]="props.logo"
            />
            <val-image
              *ngIf="!props.logo"
              [props]="{
                src: '--main-logo-mini',
                alt: 'menu logo',
                mode: 'box',
                shaded: false,
                bordered: false,
                size: 'small',
                limited: false,
                width: 2,
                flex: true
              }"
            />
          </ion-buttons>

          <ion-buttons slot="end">
            <ion-menu-toggle>
              <ion-button>
                <ion-icon color="dark" slot="icon-only" name="close-outline"></ion-icon>
              </ion-button>
            </ion-menu-toggle>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ng-content></ng-content>
      </ion-content>
      @if (props.showCloseButton) {
        <val-button
          class="menu-close-button"
          [props]="{
            text: closeButtonText(),
            color: 'dark',
            size: 'default',
            type: 'button',
            state: 'ENABLED',
            fill: 'outline',
            shape: 'round',
            icon: {
              name: 'close-outline',
              slot: 'start'
            }
          }"
          (onClick)="closeMenu()"
        />
      }
    </ion-menu>
  `, isInline: true, styles: ["ion-menu{--min-width: 75%;--background: var(--ion-color-light)}@media (min-width: 768px){ion-menu{--min-width: 40%}}ion-menu ion-header{background:var(--ion-color-light)}ion-menu ion-content{--background: var(--ion-color-light)}.menu-close-button{display:block;text-align:center;padding:1rem .5rem;background:var(--ion-color-light)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonMenu, selector: "ion-menu", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { 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: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { 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: MenuComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-menu', standalone: true, imports: [
                        CommonModule,
                        IonMenu,
                        IonButtons,
                        IonMenuToggle,
                        IonButton,
                        IonIcon,
                        IonHeader,
                        IonToolbar,
                        IonContent,
                        ImageComponent,
                        ButtonComponent,
                    ], template: `
    <ion-menu
      [menuId]="props.id"
      [contentId]="props.contentId"
      [type]="props.type || 'overlay'"
      [side]="props.side || 'start'"
      [swipeGesture]="props.swipe !== false"
    >
      <ion-header [class.ion-no-border]="true">
        <ion-toolbar>
          <ion-buttons slot="start" style="padding-left: .5rem;">
            <val-image
              *ngIf="props.logo"
              [props]="props.logo"
            />
            <val-image
              *ngIf="!props.logo"
              [props]="{
                src: '--main-logo-mini',
                alt: 'menu logo',
                mode: 'box',
                shaded: false,
                bordered: false,
                size: 'small',
                limited: false,
                width: 2,
                flex: true
              }"
            />
          </ion-buttons>

          <ion-buttons slot="end">
            <ion-menu-toggle>
              <ion-button>
                <ion-icon color="dark" slot="icon-only" name="close-outline"></ion-icon>
              </ion-button>
            </ion-menu-toggle>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ng-content></ng-content>
      </ion-content>
      @if (props.showCloseButton) {
        <val-button
          class="menu-close-button"
          [props]="{
            text: closeButtonText(),
            color: 'dark',
            size: 'default',
            type: 'button',
            state: 'ENABLED',
            fill: 'outline',
            shape: 'round',
            icon: {
              name: 'close-outline',
              slot: 'start'
            }
          }"
          (onClick)="closeMenu()"
        />
      }
    </ion-menu>
  `, styles: ["ion-menu{--min-width: 75%;--background: var(--ion-color-light)}@media (min-width: 768px){ion-menu{--min-width: 40%}}ion-menu ion-header{background:var(--ion-color-light)}ion-menu ion-content{--background: var(--ion-color-light)}.menu-close-button{display:block;text-align:center;padding:1rem .5rem;background:var(--ion-color-light)}\n"] }]
        }], propDecorators: { props: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 