import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
import { IonSearchbar } from '@ionic/angular/standalone';
import { I18nService } from '../../../services/i18n';
import { PresetService } from '../../../services/presets';
import * as i0 from "@angular/core";
/**
 * val-searchbar
 *
 * A search bar component with debounce and event emitters for filtering, focus, and blur.
 * Supports presets for reusable configurations.
 *
 * @example With preset:
 * <val-searchbar preset="default" (filterEvent)="onFilter($event)"></val-searchbar>
 *
 * @example With props:
 * <val-searchbar [props]="{ placeholder: 'Search...', debounce: 300 }"></val-searchbar>
 *
 * @input preset: string - Name of preset to apply
 * @input props: SearchbarMetadata - Configuration for the searchbar
 * @output filterEvent - Emits the search term on input.
 * @output focusEvent - Emits when the searchbar gains focus.
 * @output blurEvent - Emits when the searchbar loses focus.
 */
export class SearchbarComponent {
    constructor() {
        this.presets = inject(PresetService);
        this.i18n = inject(I18nService);
        /**
         * Configuration object. Values here override preset values.
         */
        this.props = {};
        /**
         * Resolved props after merging preset + explicit props.
         */
        this.resolvedProps = {};
        /**
         * Emits the search term on input.
         */
        this.filterEvent = new EventEmitter();
        /**
         * Emits when the searchbar gains focus.
         */
        this.focusEvent = new EventEmitter();
        /**
         * Emits when the searchbar loses focus.
         */
        this.blurEvent = new EventEmitter();
    }
    ngOnInit() {
        this.resolveProps();
    }
    ngOnChanges(changes) {
        if (changes['preset'] || changes['props']) {
            this.resolveProps();
        }
    }
    resolveProps() {
        const presetProps = this.preset
            ? this.presets.get('searchbar', this.preset)
            : {};
        this.resolvedProps = {
            ...presetProps,
            ...this.props,
        };
    }
    /** Get placeholder text */
    getPlaceholder() {
        return this.resolvedProps.placeholder || this.i18n.t('search');
    }
    /** Get cancel button text */
    getCancelText() {
        return this.resolvedProps.cancelText || this.i18n.t('cancel');
    }
    onSearch($event) {
        const searchTerm = $event.detail.value;
        this.filterEvent.emit(searchTerm);
    }
    onFocus() {
        this.focusEvent.emit();
    }
    onBlur() {
        this.blurEvent.emit();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SearchbarComponent, isStandalone: true, selector: "val-searchbar", inputs: { preset: "preset", props: "props" }, outputs: { filterEvent: "filterEvent", focusEvent: "focusEvent", blurEvent: "blurEvent" }, usesOnChanges: true, ngImport: i0, template: `
    <ion-searchbar
      [mode]="resolvedProps.mode || 'ios'"
      [debounce]="resolvedProps.debounce || 500"
      [placeholder]="getPlaceholder()"
      [disabled]="resolvedProps.disabled"
      [showCancelButton]="resolvedProps.showCancelButton || 'focus'"
      [cancelButtonText]="getCancelText()"
      (ionInput)="onSearch($event)"
      (ionBlur)="onBlur()"
      (ionFocus)="onFocus()"
    >
    </ion-searchbar>
  `, 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-searchbar{--cancel-button-color: var(--ion-color-dark);--background: var(--ion-color-light);font-family:var(--ion-default-font),Arial,sans-serif}\n"], dependencies: [{ kind: "component", type: IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchbarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-searchbar', standalone: true, imports: [IonSearchbar], template: `
    <ion-searchbar
      [mode]="resolvedProps.mode || 'ios'"
      [debounce]="resolvedProps.debounce || 500"
      [placeholder]="getPlaceholder()"
      [disabled]="resolvedProps.disabled"
      [showCancelButton]="resolvedProps.showCancelButton || 'focus'"
      [cancelButtonText]="getCancelText()"
      (ionInput)="onSearch($event)"
      (ionBlur)="onBlur()"
      (ionFocus)="onFocus()"
    >
    </ion-searchbar>
  `, 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-searchbar{--cancel-button-color: var(--ion-color-dark);--background: var(--ion-color-light);font-family:var(--ion-default-font),Arial,sans-serif}\n"] }]
        }], propDecorators: { preset: [{
                type: Input
            }], props: [{
                type: Input
            }], filterEvent: [{
                type: Output
            }], focusEvent: [{
                type: Output
            }], blurEvent: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 