import { CommonModule } from '@angular/common';
import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
import { RouterLink } from '@angular/router';
import { IonButton, IonIcon, IonSpinner, IonText } from '@ionic/angular/standalone';
import { PresetService } from '../../../services/presets';
import { ActionType, ComponentStates } from '../../types';
import * as i0 from "@angular/core";
import * as i1 from "../../../services/download.service";
import * as i2 from "../../../services/icons.service";
import * as i3 from "../../../services/navigation";
import * as i4 from "@angular/common";
/**
 * val-button
 *
 * A customizable button supporting icons, loading state, navigation, and presets.
 *
 * @example With preset (recommended with i18n):
 * <val-button preset="primary-action" [props]="{ text: 'Submit' | t }"></val-button>
 *
 * @example Static text:
 * <val-button [props]="{
 *   text: 'Save',
 *   color: 'primary',
 *   type: 'button',
 *   state: 'ENABLED',
 *   icon: { name: 'save', slot: 'start' }
 * }" (onClick)="handler()"></val-button>
 *
 * @input preset: string - Name of preset to apply (e.g., 'primary-action', 'danger')
 * @input props: ButtonMetadata - Configuration for the button (overrides preset values)
 * @output onClick - Emits when the button is clicked
 */
export class ButtonComponent {
    constructor(download, _icon, navigation) {
        this.download = download;
        this.navigation = navigation;
        this.states = ComponentStates;
        this.presets = inject(PresetService);
        /**
         * The text to display on the button.
         */
        this.displayText = '';
        /**
         * Button configuration. Values here override preset values.
         * When using presets, only partial props are needed (preset provides defaults).
         */
        this.props = {};
        /**
         * Resolved props after merging preset + explicit props.
         * Preset values are overridden by explicit props.
         */
        this.resolvedProps = {};
        /**
         * Event emitted when the button is clicked.
         */
        this.onClick = new EventEmitter();
    }
    ngOnInit() {
        this.resolveProps();
        this.setupDisplayText();
    }
    ngOnChanges(changes) {
        if (changes['preset'] || changes['props']) {
            this.resolveProps();
            this.setupDisplayText();
        }
    }
    /**
     * Merge preset configuration with explicit props.
     * Explicit props take precedence over preset values.
     */
    resolveProps() {
        const presetProps = this.preset ? this.presets.get('button', this.preset) : {};
        // Merge: preset defaults < explicit props
        this.resolvedProps = {
            ...presetProps,
            ...this.props,
        };
    }
    /**
     * Set up the text content based on the resolved props configuration.
     */
    setupDisplayText() {
        if (this.resolvedProps.text) {
            if (this.resolvedProps.contentInterpolation) {
                this.displayText = this.interpolateContent(this.resolvedProps.text, this.resolvedProps.contentInterpolation);
            }
            else {
                this.displayText = this.resolvedProps.text;
            }
        }
        else if (this.resolvedProps.contentFallback) {
            // Backwards compatibility: use fallback if text is not provided
            this.displayText = this.resolvedProps.contentFallback;
        }
        else {
            this.displayText = '';
        }
    }
    /**
     * Interpolate placeholders in content with provided values.
     * Supports {{placeholder}} format.
     */
    interpolateContent(content, values) {
        return content.replace(/\{\{(\w+)\}\}/g, (match, key) => {
            return values[key] !== undefined ? String(values[key]) : match;
        });
    }
    clickHandler() {
        if (this.resolvedProps.state === this.states.DISABLED) {
            return;
        }
        if (this.resolvedProps.actionType === ActionType.APP_NAVIGATION) {
            this.navigation.navigateByUrl(this.resolvedProps.link);
        }
        if (this.resolvedProps.download) {
            this.download.downloadLinkFromBrowser(this.resolvedProps.download);
        }
        if (this.resolvedProps.handler) {
            this.resolvedProps.handler(this.resolvedProps.ref);
        }
        this.onClick.emit(this.resolvedProps.token);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, deps: [{ token: i1.DownloadService }, { token: i2.IconService }, { token: i3.NavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ButtonComponent, isStandalone: true, selector: "val-button", inputs: { preset: "preset", props: "props" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: `
    <ion-button
      [attr.data-testid]="resolvedProps.token"
      [type]="resolvedProps.type"
      [color]="resolvedProps.color"
      [expand]="resolvedProps.expand"
      [fill]="resolvedProps.fill"
      [size]="resolvedProps.size"
      [href]="resolvedProps.href"
      [routerLink]="resolvedProps.routerLink ?? null"
      [target]="resolvedProps.target"
      [shape]="resolvedProps.shape"
      (click)="clickHandler()"
      [disabled]="resolvedProps.state === states.DISABLED"
      [ngClass]="resolvedProps.size ? [resolvedProps.size] : []"
    >
      <ion-icon *ngIf="resolvedProps.icon" [slot]="resolvedProps.icon.slot" [name]="resolvedProps.icon.name"></ion-icon>
      <ion-spinner *ngIf="resolvedProps.state === states.WORKING" name="circular"></ion-spinner>
      <ion-text *ngIf="resolvedProps.state !== states.WORKING">{{ displayText }}</ion-text>
    </ion-button>
  `, 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;min-width:6.25rem;margin:0}ion-button.small{--padding-bottom: 12px;--padding-end: 14px;--padding-start: 14px;--padding-top: 12px}ion-button.button-clear{padding:0;margin:0}ion-button ion-spinner{--color: currentColor}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-button', standalone: true, imports: [CommonModule, RouterLink, IonButton, IonIcon, IonSpinner, IonText], template: `
    <ion-button
      [attr.data-testid]="resolvedProps.token"
      [type]="resolvedProps.type"
      [color]="resolvedProps.color"
      [expand]="resolvedProps.expand"
      [fill]="resolvedProps.fill"
      [size]="resolvedProps.size"
      [href]="resolvedProps.href"
      [routerLink]="resolvedProps.routerLink ?? null"
      [target]="resolvedProps.target"
      [shape]="resolvedProps.shape"
      (click)="clickHandler()"
      [disabled]="resolvedProps.state === states.DISABLED"
      [ngClass]="resolvedProps.size ? [resolvedProps.size] : []"
    >
      <ion-icon *ngIf="resolvedProps.icon" [slot]="resolvedProps.icon.slot" [name]="resolvedProps.icon.name"></ion-icon>
      <ion-spinner *ngIf="resolvedProps.state === states.WORKING" name="circular"></ion-spinner>
      <ion-text *ngIf="resolvedProps.state !== states.WORKING">{{ displayText }}</ion-text>
    </ion-button>
  `, 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;min-width:6.25rem;margin:0}ion-button.small{--padding-bottom: 12px;--padding-end: 14px;--padding-start: 14px;--padding-top: 12px}ion-button.button-clear{padding:0;margin:0}ion-button ion-spinner{--color: currentColor}\n"] }]
        }], ctorParameters: () => [{ type: i1.DownloadService }, { type: i2.IconService }, { type: i3.NavigationService }], propDecorators: { preset: [{
                type: Input
            }], props: [{
                type: Input
            }], onClick: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 