import { CommonModule } from '@angular/common';
import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
import { IonButton, IonCol, IonIcon, IonRow } from '@ionic/angular/standalone';
import { NavigationService } from '../../../services/navigation';
import { DividerComponent } from '../../atoms/divider/divider.component';
import { ImageComponent } from '../../atoms/image/image.component';
import { LanguageSelectorComponent } from '../language-selector/language-selector.component';
import { LinksCakeComponent } from '../links-cake/links-cake.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
/**
 * val-footer-links
 *
 * A responsive footer component with two columns of links, social media icons,
 * logo, and optional language selector.
 *
 * @example
 * <val-footer-links
 *   [props]="{
 *     leftLinks: { title: 'Company', links: [...] },
 *     rightLinks: { title: 'Resources', links: [...] },
 *     logo: 'logo.svg',
 *     logoRoute: '/',
 *     socialLinks: [
 *       { icon: 'logo-facebook', url: 'https://facebook.com', name: 'Facebook' }
 *     ]
 *   }"
 * ></val-footer-links>
 *
 * @input props - Footer configuration
 * @output logoClick - Emits when logo is clicked
 */
export class FooterLinksComponent {
    constructor() {
        this.nav = inject(NavigationService);
        /**
         * Emits when the logo is clicked.
         */
        this.logoClick = new EventEmitter();
    }
    /**
     * Default language selector configuration.
     */
    get languageSelectorConfig() {
        if (this.props.languageSelector && typeof this.props.languageSelector === 'object') {
            return this.props.languageSelector;
        }
        return {
            showLabel: false,
            labelConfig: {
                className: '_global',
                key: 'language',
                fallback: 'Idioma',
            },
            showFlags: true,
            color: 'primary',
            size: 'default',
            fill: 'outline',
        };
    }
    /**
     * Handles logo click - navigates if route provided, otherwise emits event.
     */
    onLogoClick() {
        if (this.props.logoRoute) {
            this.nav.navigateByUrl(this.props.logoRoute);
        }
        this.logoClick.emit();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FooterLinksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FooterLinksComponent, isStandalone: true, selector: "val-footer-links", inputs: { props: "props" }, outputs: { logoClick: "logoClick" }, ngImport: i0, template: `
    <div class="footer-links">
      <ion-row>
        <ion-col size="12">
          <val-divider
            *ngIf="props.divider !== false"
            [props]="props.divider || { size: 'small', color: 'medium', fill: 'solid' }"
          />
        </ion-col>
        <ion-col size-xs="12" size-md="6">
          <val-links-cake [props]="props.leftLinks" />
        </ion-col>
        <ion-col size-xs="12" size-md="6">
          <val-links-cake [props]="props.rightLinks" />
        </ion-col>
      </ion-row>

      <ion-row *ngIf="props.languageSelector !== false" style="margin-top: 1rem;">
        <ion-col size="12">
          <val-language-selector [props]="languageSelectorConfig" />
        </ion-col>
      </ion-row>

      <ion-row style="margin-top: 1rem;">
        <ion-col size="12" *ngIf="props.logoCssVariable || props.logo || props.socialLinks?.length">
          <!-- Mobile layout: centered -->
          <div class="mobile-layout">
            <!-- CSS Variable logo (recommended for dark mode) -->
            <span
              *ngIf="props.logoCssVariable"
              class="logo-clickable footer-logo footer-logo--css-var"
              role="img"
              [attr.aria-label]="props.logoAlt || 'Logo'"
              [style.--logo-var]="'var(' + props.logoCssVariable + ')'"
              [style.width]="props.logoWidth || '10rem'"
              [style.height]="props.logoHeight || '3rem'"
              (click)="onLogoClick()"
            ></span>
            <!-- Light mode logo (fallback) -->
            <val-image
              *ngIf="!props.logoCssVariable && props.logo"
              class="logo-clickable footer-logo footer-logo--light"
              [props]="{
                width: 14,
                mode: 'box',
                shaded: false,
                bordered: false,
                size: 'small',
                src: props.logo,
                alt: props.logoAlt || 'Logo',
                limited: false,
                dark: true,
              }"
              (click)="onLogoClick()"
            />
            <!-- Dark mode logo (fallback) -->
            <val-image
              *ngIf="!props.logoCssVariable && props.logo && props.logoDark"
              class="logo-clickable footer-logo footer-logo--dark"
              [props]="{
                width: 14,
                mode: 'box',
                shaded: false,
                bordered: false,
                size: 'small',
                src: props.logoDark,
                alt: props.logoAlt || 'Logo',
                limited: false,
                dark: true,
              }"
              (click)="onLogoClick()"
            />
            <div class="social-links-container" *ngIf="props.socialLinks?.length" style="margin-top: 1rem">
              <ion-button
                *ngFor="let social of props.socialLinks"
                fill="clear"
                size="small"
                [href]="social.url"
                target="_blank"
                rel="noopener"
                class="social-button"
                [attr.aria-label]="social.name"
              >
                <ion-icon [name]="social.icon" slot="icon-only" [color]="props.socialIconColor || 'dark'"></ion-icon>
              </ion-button>
            </div>
          </div>

          <!-- Desktop layout: space-between -->
          <div class="desktop-layout">
            <!-- CSS Variable logo (recommended for dark mode) -->
            <span
              *ngIf="props.logoCssVariable"
              class="logo-clickable footer-logo footer-logo--css-var"
              role="img"
              [attr.aria-label]="props.logoAlt || 'Logo'"
              [style.--logo-var]="'var(' + props.logoCssVariable + ')'"
              [style.width]="props.logoWidth || '12rem'"
              [style.height]="props.logoHeight || '3rem'"
              (click)="onLogoClick()"
            ></span>
            <!-- Light mode logo (fallback) -->
            <val-image
              *ngIf="!props.logoCssVariable && props.logo"
              class="logo-clickable footer-logo footer-logo--light"
              [props]="{
                width: 16,
                mode: 'box',
                shaded: false,
                bordered: false,
                size: 'small',
                src: props.logo,
                alt: props.logoAlt || 'Logo',
                limited: false,
                dark: true,
              }"
              (click)="onLogoClick()"
            />
            <!-- Dark mode logo (fallback) -->
            <val-image
              *ngIf="!props.logoCssVariable && props.logo && props.logoDark"
              class="logo-clickable footer-logo footer-logo--dark"
              [props]="{
                width: 16,
                mode: 'box',
                shaded: false,
                bordered: false,
                size: 'small',
                src: props.logoDark,
                alt: props.logoAlt || 'Logo',
                limited: false,
                dark: true,
              }"
              (click)="onLogoClick()"
            />
            <div class="social-links-container" *ngIf="props.socialLinks?.length">
              <ion-button
                *ngFor="let social of props.socialLinks"
                fill="clear"
                size="small"
                [href]="social.url"
                target="_blank"
                rel="noopener"
                class="social-button"
                [attr.aria-label]="social.name"
              >
                <ion-icon [name]="social.icon" slot="icon-only" [color]="props.socialIconColor || 'dark'"></ion-icon>
              </ion-button>
            </div>
          </div>
        </ion-col>
      </ion-row>
    </div>
  `, isInline: true, styles: [".footer-links .mobile-layout{display:block;text-align:center;padding:8px 0}.footer-links .desktop-layout{display:none;align-items:flex-end;justify-content:space-between;margin-top:16px;padding:8px 0}.footer-links .social-links-container{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px;flex-wrap:wrap}.footer-links .social-button{--color: #666;--color-hover: #333;transition:all .2s ease;min-height:40px;min-width:40px;margin:0}.footer-links .social-button:hover{--color: #333;transform:translateY(-1px)}.footer-links .social-button ion-icon{font-size:1.25rem}.footer-links .logo-clickable{cursor:pointer}.footer-links .footer-logo--css-var{display:block;background-image:var(--logo-var);background-size:contain;background-repeat:no-repeat;background-position:center;transition:opacity .2s ease}.footer-links .footer-logo--css-var:hover{opacity:.8}.footer-links .mobile-layout .footer-logo--css-var{margin-left:auto;margin-right:auto}.footer-links .footer-logo--light{display:block}.footer-links .footer-logo--dark{display:none}.footer-links :host-context(.dark) .footer-logo--light,.footer-links :host-context(.ion-palette-dark) .footer-logo--light,.footer-links :host-context(html.ion-palette-dark) .footer-logo--light,.footer-links :host-context(body.dark) .footer-logo--light,.footer-links :host-context([data-theme=dark]) .footer-logo--light{display:none}.footer-links :host-context(.dark) .footer-logo--dark,.footer-links :host-context(.ion-palette-dark) .footer-logo--dark,.footer-links :host-context(html.ion-palette-dark) .footer-logo--dark,.footer-links :host-context(body.dark) .footer-logo--dark,.footer-links :host-context([data-theme=dark]) .footer-logo--dark{display:block}@media (min-width: 768px){.footer-links .mobile-layout{display:none!important}.footer-links .desktop-layout{display:flex!important}.footer-links .social-links-container{margin-top:0;justify-content:flex-end}}@media (max-width: 767px){.footer-links .mobile-layout{display:block!important}.footer-links .desktop-layout{display:none!important}.footer-links .social-links-container{justify-content:center;margin-bottom:8px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: IonRow, selector: "ion-row" }, { 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: DividerComponent, selector: "val-divider", inputs: ["props"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: LinksCakeComponent, selector: "val-links-cake", inputs: ["props"] }, { 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: FooterLinksComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-footer-links', standalone: true, imports: [
                        CommonModule,
                        IonCol,
                        IonRow,
                        IonButton,
                        IonIcon,
                        DividerComponent,
                        ImageComponent,
                        LinksCakeComponent,
                        LanguageSelectorComponent,
                    ], template: `
    <div class="footer-links">
      <ion-row>
        <ion-col size="12">
          <val-divider
            *ngIf="props.divider !== false"
            [props]="props.divider || { size: 'small', color: 'medium', fill: 'solid' }"
          />
        </ion-col>
        <ion-col size-xs="12" size-md="6">
          <val-links-cake [props]="props.leftLinks" />
        </ion-col>
        <ion-col size-xs="12" size-md="6">
          <val-links-cake [props]="props.rightLinks" />
        </ion-col>
      </ion-row>

      <ion-row *ngIf="props.languageSelector !== false" style="margin-top: 1rem;">
        <ion-col size="12">
          <val-language-selector [props]="languageSelectorConfig" />
        </ion-col>
      </ion-row>

      <ion-row style="margin-top: 1rem;">
        <ion-col size="12" *ngIf="props.logoCssVariable || props.logo || props.socialLinks?.length">
          <!-- Mobile layout: centered -->
          <div class="mobile-layout">
            <!-- CSS Variable logo (recommended for dark mode) -->
            <span
              *ngIf="props.logoCssVariable"
              class="logo-clickable footer-logo footer-logo--css-var"
              role="img"
              [attr.aria-label]="props.logoAlt || 'Logo'"
              [style.--logo-var]="'var(' + props.logoCssVariable + ')'"
              [style.width]="props.logoWidth || '10rem'"
              [style.height]="props.logoHeight || '3rem'"
              (click)="onLogoClick()"
            ></span>
            <!-- Light mode logo (fallback) -->
            <val-image
              *ngIf="!props.logoCssVariable && props.logo"
              class="logo-clickable footer-logo footer-logo--light"
              [props]="{
                width: 14,
                mode: 'box',
                shaded: false,
                bordered: false,
                size: 'small',
                src: props.logo,
                alt: props.logoAlt || 'Logo',
                limited: false,
                dark: true,
              }"
              (click)="onLogoClick()"
            />
            <!-- Dark mode logo (fallback) -->
            <val-image
              *ngIf="!props.logoCssVariable && props.logo && props.logoDark"
              class="logo-clickable footer-logo footer-logo--dark"
              [props]="{
                width: 14,
                mode: 'box',
                shaded: false,
                bordered: false,
                size: 'small',
                src: props.logoDark,
                alt: props.logoAlt || 'Logo',
                limited: false,
                dark: true,
              }"
              (click)="onLogoClick()"
            />
            <div class="social-links-container" *ngIf="props.socialLinks?.length" style="margin-top: 1rem">
              <ion-button
                *ngFor="let social of props.socialLinks"
                fill="clear"
                size="small"
                [href]="social.url"
                target="_blank"
                rel="noopener"
                class="social-button"
                [attr.aria-label]="social.name"
              >
                <ion-icon [name]="social.icon" slot="icon-only" [color]="props.socialIconColor || 'dark'"></ion-icon>
              </ion-button>
            </div>
          </div>

          <!-- Desktop layout: space-between -->
          <div class="desktop-layout">
            <!-- CSS Variable logo (recommended for dark mode) -->
            <span
              *ngIf="props.logoCssVariable"
              class="logo-clickable footer-logo footer-logo--css-var"
              role="img"
              [attr.aria-label]="props.logoAlt || 'Logo'"
              [style.--logo-var]="'var(' + props.logoCssVariable + ')'"
              [style.width]="props.logoWidth || '12rem'"
              [style.height]="props.logoHeight || '3rem'"
              (click)="onLogoClick()"
            ></span>
            <!-- Light mode logo (fallback) -->
            <val-image
              *ngIf="!props.logoCssVariable && props.logo"
              class="logo-clickable footer-logo footer-logo--light"
              [props]="{
                width: 16,
                mode: 'box',
                shaded: false,
                bordered: false,
                size: 'small',
                src: props.logo,
                alt: props.logoAlt || 'Logo',
                limited: false,
                dark: true,
              }"
              (click)="onLogoClick()"
            />
            <!-- Dark mode logo (fallback) -->
            <val-image
              *ngIf="!props.logoCssVariable && props.logo && props.logoDark"
              class="logo-clickable footer-logo footer-logo--dark"
              [props]="{
                width: 16,
                mode: 'box',
                shaded: false,
                bordered: false,
                size: 'small',
                src: props.logoDark,
                alt: props.logoAlt || 'Logo',
                limited: false,
                dark: true,
              }"
              (click)="onLogoClick()"
            />
            <div class="social-links-container" *ngIf="props.socialLinks?.length">
              <ion-button
                *ngFor="let social of props.socialLinks"
                fill="clear"
                size="small"
                [href]="social.url"
                target="_blank"
                rel="noopener"
                class="social-button"
                [attr.aria-label]="social.name"
              >
                <ion-icon [name]="social.icon" slot="icon-only" [color]="props.socialIconColor || 'dark'"></ion-icon>
              </ion-button>
            </div>
          </div>
        </ion-col>
      </ion-row>
    </div>
  `, styles: [".footer-links .mobile-layout{display:block;text-align:center;padding:8px 0}.footer-links .desktop-layout{display:none;align-items:flex-end;justify-content:space-between;margin-top:16px;padding:8px 0}.footer-links .social-links-container{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px;flex-wrap:wrap}.footer-links .social-button{--color: #666;--color-hover: #333;transition:all .2s ease;min-height:40px;min-width:40px;margin:0}.footer-links .social-button:hover{--color: #333;transform:translateY(-1px)}.footer-links .social-button ion-icon{font-size:1.25rem}.footer-links .logo-clickable{cursor:pointer}.footer-links .footer-logo--css-var{display:block;background-image:var(--logo-var);background-size:contain;background-repeat:no-repeat;background-position:center;transition:opacity .2s ease}.footer-links .footer-logo--css-var:hover{opacity:.8}.footer-links .mobile-layout .footer-logo--css-var{margin-left:auto;margin-right:auto}.footer-links .footer-logo--light{display:block}.footer-links .footer-logo--dark{display:none}.footer-links :host-context(.dark) .footer-logo--light,.footer-links :host-context(.ion-palette-dark) .footer-logo--light,.footer-links :host-context(html.ion-palette-dark) .footer-logo--light,.footer-links :host-context(body.dark) .footer-logo--light,.footer-links :host-context([data-theme=dark]) .footer-logo--light{display:none}.footer-links :host-context(.dark) .footer-logo--dark,.footer-links :host-context(.ion-palette-dark) .footer-logo--dark,.footer-links :host-context(html.ion-palette-dark) .footer-logo--dark,.footer-links :host-context(body.dark) .footer-logo--dark,.footer-links :host-context([data-theme=dark]) .footer-logo--dark{display:block}@media (min-width: 768px){.footer-links .mobile-layout{display:none!important}.footer-links .desktop-layout{display:flex!important}.footer-links .social-links-container{margin-top:0;justify-content:flex-end}}@media (max-width: 767px){.footer-links .mobile-layout{display:block!important}.footer-links .desktop-layout{display:none!important}.footer-links .social-links-container{justify-content:center;margin-bottom:8px}}\n"] }]
        }], propDecorators: { props: [{
                type: Input
            }], logoClick: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 