import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, EventEmitter, } from '@angular/core';
import { EuimLabelModule } from '../atoms/euim-label';
import { IonicModule } from '@ionic/angular';
import * as i0 from "@angular/core";
import * as i1 from "@ionic/angular";
export class EuimSearchBarComponent {
    constructor() {
        this.hasSlotStart = false;
        this.hasSlotEnd = false;
        this.inputEvent = new EventEmitter();
        this.changeEvent = new EventEmitter();
        this.focusEvent = new EventEmitter();
        this.cancelEvent = new EventEmitter();
        this.clearEvent = new EventEmitter();
    }
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    onInput(event) {
        const value = event.detail.value;
        this.inputEvent.emit(value);
    }
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    onChange(event) {
        const value = event.detail.value;
        this.changeEvent.emit(value);
    }
    onFocus() {
        this.focusEvent.emit();
    }
    onCancel() {
        this.cancelEvent.emit();
    }
    onClear() {
        this.clearEvent.emit();
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EuimSearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EuimSearchBarComponent, isStandalone: true, selector: "euim-search-bar", inputs: { hasSlotStart: "hasSlotStart", hasSlotEnd: "hasSlotEnd" }, outputs: { inputEvent: "inputEvent", changeEvent: "changeEvent", focusEvent: "focusEvent", cancelEvent: "cancelEvent", clearEvent: "clearEvent" }, ngImport: i0, template: "<div class=\"euim-search-bar__wrapper\">\n  <ion-searchbar [class.custom-searchbar]=\"hasSlotStart\" [attr.show-clear-button]=\"hasSlotEnd ? 'never' : 'always'\" placeholder=\"Search\" (ionInput)=\"onInput($event)\"\n    (ionChange)=\"onChange($event)\" (ionFocus)=\"onFocus()\" (ionCancel)=\"onCancel()\" (ionClear)=\"onClear()\">\n    @if (!hasSlotStart) {\n    <ng-container>\n      <ion-icon name=\"search\"></ion-icon>\n    </ng-container> }\n  </ion-searchbar>\n\n  <div class=\"slotStart\" [style.display]=\"hasSlotStart ? 'block' : 'none'\">\n    <ng-content select=\"[slotStart]\"></ng-content>\n  </div>\n\n  <div class=\"slotEnd\" [style.display]=\"hasSlotEnd ? 'block' : 'none'\">\n    <ng-content select=\"[slotEnd]\"></ng-content>\n  </div>\n</div>", styles: [".euim-search-bar__wrapper{position:relative;margin-inline-start:var(--eui-s-m)}.custom-searchbar{--icon-color: transparent;width:100%}.slotStart,.slotEnd{position:absolute;top:50%;transform:translateY(-50%);color:var(--eui-c-neutral);cursor:pointer}.slotStart{inset-inline-start:var(--eui-s-m)}.slotStart ion-icon{margin-inline-start:var(--eui-s-xs);width:var(--eui-is-m);height:var(--eui-is-m);display:flex;align-items:center}.slotEnd{right:var(--eui-s-m)}.slotEnd ion-icon{margin-inline-end:var(--eui-s-m);width:var(--eui-is-m);height:var(--eui-is-m);display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: EuimLabelModule }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EuimSearchBarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'euim-search-bar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [EuimLabelModule, IonicModule], template: "<div class=\"euim-search-bar__wrapper\">\n  <ion-searchbar [class.custom-searchbar]=\"hasSlotStart\" [attr.show-clear-button]=\"hasSlotEnd ? 'never' : 'always'\" placeholder=\"Search\" (ionInput)=\"onInput($event)\"\n    (ionChange)=\"onChange($event)\" (ionFocus)=\"onFocus()\" (ionCancel)=\"onCancel()\" (ionClear)=\"onClear()\">\n    @if (!hasSlotStart) {\n    <ng-container>\n      <ion-icon name=\"search\"></ion-icon>\n    </ng-container> }\n  </ion-searchbar>\n\n  <div class=\"slotStart\" [style.display]=\"hasSlotStart ? 'block' : 'none'\">\n    <ng-content select=\"[slotStart]\"></ng-content>\n  </div>\n\n  <div class=\"slotEnd\" [style.display]=\"hasSlotEnd ? 'block' : 'none'\">\n    <ng-content select=\"[slotEnd]\"></ng-content>\n  </div>\n</div>", styles: [".euim-search-bar__wrapper{position:relative;margin-inline-start:var(--eui-s-m)}.custom-searchbar{--icon-color: transparent;width:100%}.slotStart,.slotEnd{position:absolute;top:50%;transform:translateY(-50%);color:var(--eui-c-neutral);cursor:pointer}.slotStart{inset-inline-start:var(--eui-s-m)}.slotStart ion-icon{margin-inline-start:var(--eui-s-xs);width:var(--eui-is-m);height:var(--eui-is-m);display:flex;align-items:center}.slotEnd{right:var(--eui-s-m)}.slotEnd ion-icon{margin-inline-end:var(--eui-s-m);width:var(--eui-is-m);height:var(--eui-is-m);display:flex;align-items:center}\n"] }]
        }], propDecorators: { hasSlotStart: [{
                type: Input
            }], hasSlotEnd: [{
                type: Input
            }], inputEvent: [{
                type: Output
            }], changeEvent: [{
                type: Output
            }], focusEvent: [{
                type: Output
            }], cancelEvent: [{
                type: Output
            }], clearEvent: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 