import { CommonModule } from '@angular/common';
import { Component, HostBinding, Input, forwardRef, signal } from '@angular/core';
import { FormControl, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { DisplayDensity } from '@metad/ocap-angular/core';
import { TranslateModule } from '@ngx-translate/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@ngx-translate/core";
import * as i3 from "@angular/material/input";
export class NgmSearchComponent {
    constructor() {
        this.displayDensity$ = signal(null);
    }
    get displayDensity() {
        return this.displayDensity$();
    }
    set displayDensity(value) {
        this.displayDensity$.set(DisplayDensity[value]);
    }
    get hasValue() {
        return this._value !== null && this._value !== undefined && this._value !== '';
    }
    writeValue(obj) {
        this._value = obj;
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
        isDisabled ? this.formControl?.disable({ emitEvent: false }) : this.formControl?.enable({ emitEvent: false });
    }
    onValueChange(value) {
        this.formControl?.setValue(value);
        this.onChange?.(value);
    }
    clear() {
        this.onValueChange('');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NgmSearchComponent, isStandalone: true, selector: "ngm-search", inputs: { formControl: "formControl", disabled: "disabled", displayDensity: "displayDensity" }, host: { properties: { "class.ngm-search__has-value": "this.hasValue" }, classAttribute: "ngm-search" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                multi: true,
                useExisting: forwardRef(() => NgmSearchComponent)
            }
        ], ngImport: i0, template: "<span role=\"img\" aria-label=\"search\" class=\"ngm-search__icon absolute inset-y-0 left-0 flex items-center pointer-events-none\">\n  <svg viewBox=\"64 64 896 896\" focusable=\"false\" class=\"\" data-icon=\"search\" width=\"1em\" height=\"1em\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z\"></path>\n  </svg>\n</span>\n<input matInput class=\"ngm-search__input outline-none bg-transparent\"\n       placeholder=\"{{ 'Ngm.Common.Search' | translate: {Default: 'Search'} }}\" type=\"text\"\n       [(ngModel)]=\"_value\"\n       [ngModelOptions]=\"{standalone: true}\"\n       [disabled]=\"disabled\"\n       (ngModelChange)=\"onValueChange($event)\"\n       />\n\n@if (_value) {\n  <div class=\"absolute right-2 top-1/2 -mt-2.5 shrink-0 flex items-center justify-center w-5 h-5 rounded-md cursor-pointer group/clear hover:bg-hover-bg\"\n    (click)=\"clear()\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"w-3.5 h-3.5 text-gray-400 group-hover/clear:text-gray-600 dark:group-hover/clear:text-gray-200\" >\n      <path id=\"Solid\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00008 0.666016C3.94999 0.666016 0.666748 3.94926 0.666748 7.99935C0.666748 12.0494 3.94999 15.3327 8.00008 15.3327C12.0502 15.3327 15.3334 12.0494 15.3334 7.99935C15.3334 3.94926 12.0502 0.666016 8.00008 0.666016ZM10.4715 5.52794C10.7318 5.78829 10.7318 6.2104 10.4715 6.47075L8.94289 7.99935L10.4715 9.52794C10.7318 9.78829 10.7318 10.2104 10.4715 10.4708C10.2111 10.7311 9.78903 10.7311 9.52868 10.4708L8.00008 8.94216L6.47149 10.4708C6.21114 10.7311 5.78903 10.7311 5.52868 10.4708C5.26833 10.2104 5.26833 9.78829 5.52868 9.52794L7.05727 7.99935L5.52868 6.47075C5.26833 6.2104 5.26833 5.78829 5.52868 5.52794C5.78903 5.26759 6.21114 5.26759 6.47149 5.52794L8.00008 7.05654L9.52868 5.52794C9.78903 5.26759 10.2111 5.26759 10.4715 5.52794Z\" fill=\"currentColor\"></path>\n    </svg>\n  </div>\n}", styles: [":host{position:relative;display:block}:host .ngm-search__icon{position:absolute;left:10px;top:0;bottom:0;display:flex;align-items:center}.ngm-search__input{width:100%;font-size:.875rem;line-height:1.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmSearchComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, TranslateModule, MatInputModule], selector: 'ngm-search', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            multi: true,
                            useExisting: forwardRef(() => NgmSearchComponent)
                        }
                    ], host: {
                        class: 'ngm-search'
                    }, template: "<span role=\"img\" aria-label=\"search\" class=\"ngm-search__icon absolute inset-y-0 left-0 flex items-center pointer-events-none\">\n  <svg viewBox=\"64 64 896 896\" focusable=\"false\" class=\"\" data-icon=\"search\" width=\"1em\" height=\"1em\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z\"></path>\n  </svg>\n</span>\n<input matInput class=\"ngm-search__input outline-none bg-transparent\"\n       placeholder=\"{{ 'Ngm.Common.Search' | translate: {Default: 'Search'} }}\" type=\"text\"\n       [(ngModel)]=\"_value\"\n       [ngModelOptions]=\"{standalone: true}\"\n       [disabled]=\"disabled\"\n       (ngModelChange)=\"onValueChange($event)\"\n       />\n\n@if (_value) {\n  <div class=\"absolute right-2 top-1/2 -mt-2.5 shrink-0 flex items-center justify-center w-5 h-5 rounded-md cursor-pointer group/clear hover:bg-hover-bg\"\n    (click)=\"clear()\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"w-3.5 h-3.5 text-gray-400 group-hover/clear:text-gray-600 dark:group-hover/clear:text-gray-200\" >\n      <path id=\"Solid\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00008 0.666016C3.94999 0.666016 0.666748 3.94926 0.666748 7.99935C0.666748 12.0494 3.94999 15.3327 8.00008 15.3327C12.0502 15.3327 15.3334 12.0494 15.3334 7.99935C15.3334 3.94926 12.0502 0.666016 8.00008 0.666016ZM10.4715 5.52794C10.7318 5.78829 10.7318 6.2104 10.4715 6.47075L8.94289 7.99935L10.4715 9.52794C10.7318 9.78829 10.7318 10.2104 10.4715 10.4708C10.2111 10.7311 9.78903 10.7311 9.52868 10.4708L8.00008 8.94216L6.47149 10.4708C6.21114 10.7311 5.78903 10.7311 5.52868 10.4708C5.26833 10.2104 5.26833 9.78829 5.52868 9.52794L7.05727 7.99935L5.52868 6.47075C5.26833 6.2104 5.26833 5.78829 5.52868 5.52794C5.78903 5.26759 6.21114 5.26759 6.47149 5.52794L8.00008 7.05654L9.52868 5.52794C9.78903 5.26759 10.2111 5.26759 10.4715 5.52794Z\" fill=\"currentColor\"></path>\n    </svg>\n  </div>\n}", styles: [":host{position:relative;display:block}:host .ngm-search__icon{position:absolute;left:10px;top:0;bottom:0;display:flex;align-items:center}.ngm-search__input{width:100%;font-size:.875rem;line-height:1.25rem}\n"] }]
        }], propDecorators: { formControl: [{
                type: Input
            }], disabled: [{
                type: Input
            }], displayDensity: [{
                type: Input
            }], hasValue: [{
                type: HostBinding,
                args: ['class.ngm-search__has-value']
            }] } });
//# sourceMappingURL=data:application/json;base64, 