import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, Input, Output, TemplateRef, forwardRef, input, signal } from '@angular/core';
import { toObservable } from '@angular/core/rxjs-interop';
import { FormControl, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatInputModule } from '@angular/material/input';
import { TranslateModule } from '@ngx-translate/core';
import { map, startWith, switchMap } from 'rxjs';
import { NgmOptionContent } from './option-content';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "@angular/material/input";
import * as i4 from "@angular/material/form-field";
import * as i5 from "@angular/material/autocomplete";
import * as i6 from "@angular/material/core";
export class NgmInputComponent {
    constructor() {
        this.defaultValue = null;
        this.valueKey = 'value';
        this.options = input();
        this.disabled = input(false);
        this._disabled = signal(false);
        this.blur = new EventEmitter();
        /**
         * Template provided in the tab content that will be used if present, used to enable lazy-loading
         */
        this._explicitContent = undefined;
        this._value = signal(null);
        this.searchControl = new FormControl();
        this.options$ = toObservable(this.options).pipe(switchMap((options) => this.searchControl.valueChanges.pipe(startWith(''), map((text) => {
            text = typeof text === 'string' ? text?.trim().toLowerCase() : text;
            if (text && options) {
                const terms = text.split(' ').filter((t) => !!t);
                return options.filter((option) => {
                    const str = `${option.caption || option.label || ''}${option[this.valueKey]}`;
                    return terms.every((term) => str?.toLowerCase().includes(term));
                });
            }
            return options;
        }))));
    }
    get value() {
        return this._value();
    }
    set value(value) {
        this._value.set(value);
    }
    writeValue(obj) {
        this.value = obj ?? this.defaultValue;
    }
    registerOnChange(fn) {
        this._onChange = fn;
    }
    registerOnTouched(fn) {
        this._onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this._disabled.set(isDisabled);
    }
    onChange(event) {
        this.searchControl.setValue(event);
        this.value = event;
        this._onChange(this.value);
    }
    onOptionSelected(event) {
        this.searchControl.setValue(null);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: NgmInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: NgmInputComponent, isStandalone: true, selector: "ngm-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: false, isRequired: false, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                multi: true,
                useExisting: forwardRef(() => NgmInputComponent)
            }
        ], queries: [{ propertyName: "_explicitContent", first: true, predicate: NgmOptionContent, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "@if (label) {\n  <label class=\"ngm-input-label shrink-0\" [title]=\"label\">\n    {{ label }}\n  </label>\n}\n\n<div class=\"relative\">\n    <input matInput class=\"ngm-input-element ngm-w-full\"\n        [type]=\"type || 'text'\"\n        [value]=\"defaultValue\"\n        [placeholder]=\"placeholder\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"onChange($event)\"\n        [disabled]=\"disabled() || _disabled()\"\n        [matAutocomplete]=\"auto\"\n        (blur)=\"blur.emit($event)\"\n    >\n\n    <div class=\"absolute right-0 top-0 h-full flex items-center\">\n        <ng-content select=\"[ngmSuffix]\"></ng-content>\n    </div>\n</div>\n\n<mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" class=\"ngm-autocomplete-panel ngm-density__compact\"\n  (optionSelected)=\"onOptionSelected($event)\"\n>\n    <mat-option *ngFor=\"let option of options$ | async\" [value]=\"option[valueKey]\">\n        <!-- If there is a label template, use it. -->\n        <ng-template [ngIf]=\"_explicitContent\" [ngIfElse]=\"optionTextLabel\">\n            <ng-container *ngTemplateOutlet=\"_explicitContent; context: {$implicit: option, value: option.value, caption: option.caption, key: option.key}\"></ng-container>\n        </ng-template>\n    \n        <!-- If there is not a label template, fall back to the text label. -->\n        <ng-template #optionTextLabel>{{option.caption || option.label || option[valueKey]}}</ng-template>\n    </mat-option>\n</mat-autocomplete>\n\n<mat-error class=\"text-xs h-4\">\n  <ng-content select=\"[ngmError]\"></ng-content>\n</mat-error>", styles: [":host{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}.mat-mdc-form-field-error{display:inline-flex;color:var(--mat-form-field-error-text-color)}\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: "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"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: NgmInputComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, TranslateModule, MatInputModule, MatAutocompleteModule], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngm-input', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            multi: true,
                            useExisting: forwardRef(() => NgmInputComponent)
                        }
                    ], template: "@if (label) {\n  <label class=\"ngm-input-label shrink-0\" [title]=\"label\">\n    {{ label }}\n  </label>\n}\n\n<div class=\"relative\">\n    <input matInput class=\"ngm-input-element ngm-w-full\"\n        [type]=\"type || 'text'\"\n        [value]=\"defaultValue\"\n        [placeholder]=\"placeholder\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"onChange($event)\"\n        [disabled]=\"disabled() || _disabled()\"\n        [matAutocomplete]=\"auto\"\n        (blur)=\"blur.emit($event)\"\n    >\n\n    <div class=\"absolute right-0 top-0 h-full flex items-center\">\n        <ng-content select=\"[ngmSuffix]\"></ng-content>\n    </div>\n</div>\n\n<mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" class=\"ngm-autocomplete-panel ngm-density__compact\"\n  (optionSelected)=\"onOptionSelected($event)\"\n>\n    <mat-option *ngFor=\"let option of options$ | async\" [value]=\"option[valueKey]\">\n        <!-- If there is a label template, use it. -->\n        <ng-template [ngIf]=\"_explicitContent\" [ngIfElse]=\"optionTextLabel\">\n            <ng-container *ngTemplateOutlet=\"_explicitContent; context: {$implicit: option, value: option.value, caption: option.caption, key: option.key}\"></ng-container>\n        </ng-template>\n    \n        <!-- If there is not a label template, fall back to the text label. -->\n        <ng-template #optionTextLabel>{{option.caption || option.label || option[valueKey]}}</ng-template>\n    </mat-option>\n</mat-autocomplete>\n\n<mat-error class=\"text-xs h-4\">\n  <ng-content select=\"[ngmError]\"></ng-content>\n</mat-error>", styles: [":host{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}.mat-mdc-form-field-error{display:inline-flex;color:var(--mat-form-field-error-text-color)}\n"] }]
        }], propDecorators: { label: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], type: [{
                type: Input
            }], defaultValue: [{
                type: Input
            }], valueKey: [{
                type: Input
            }], blur: [{
                type: Output
            }], 
        // We need an initializer here to avoid a TS error. The value will be set in `ngAfterViewInit`.
        _explicitContent: [{
                type: ContentChild,
                args: [NgmOptionContent, { read: TemplateRef, static: true }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 