import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, Input, Output, TemplateRef, booleanAttribute, 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 { NgmDensityDirective } from '@metad/ocap-angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { map, startWith, switchMap } from 'rxjs';
import { NgmOptionContent } from './option-content';
import { NgmHighlightDirective } from '../directives';
import * as i0 from "@angular/core";
import * as i1 from "@metad/ocap-angular/core";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "@angular/material/input";
import * as i5 from "@angular/material/form-field";
import * as i6 from "@angular/material/autocomplete";
import * as i7 from "@angular/material/core";
export class NgmInputComponent {
    constructor() {
        this.label = input();
        this.placeholder = input();
        this.type = input(null);
        this.defaultValue = null;
        this.valueKey = 'value';
        this.displayDensity = input();
        this.options = input();
        this.disabled = input(false, {
            transform: booleanAttribute
        });
        this._disabled = signal(false);
        this.simple = input(false, {
            transform: booleanAttribute
        });
        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);
    }
    get highlight() {
        return this.searchControl.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.12", ngImport: i0, type: NgmInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NgmInputComponent, isStandalone: true, selector: "ngm-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, 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 }, displayDensity: { classPropertyName: "displayDensity", publicName: "displayDensity", isSignal: true, 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 }, simple: { classPropertyName: "simple", publicName: "simple", 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 }], hostDirectives: [{ directive: i1.NgmDensityDirective, inputs: ["small", "small", "large", "large"] }], 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\"\n  [class]=\"(displayDensity() === 'compact' ? 'ngm-density__compact' : '') + ' ' + (displayDensity() === 'cosy' ? 'ngm-density__cosy' : '')\"\n  (optionSelected)=\"onOptionSelected($event)\"\n>\n  @for (option of options$ | async; track option.key) {\n    <mat-option [value]=\"option[valueKey]\">\n      @if (_explicitContent) {\n        <ng-container *ngTemplateOutlet=\"_explicitContent; context: {$implicit: option, value: option.value, caption: option.caption, key: option.key}\"></ng-container>\n      } @else {\n        <span [ngmHighlight]=\"highlight\" [content]=\"option.caption || option.label || option[valueKey]\"></span>\n      }\n    </mat-option>\n  }\n</mat-autocomplete>\n\n@if (!simple()) {\n  <mat-error class=\"text-xs h-4\">\n    <ng-content select=\"[ngmError]\"></ng-content>\n  </mat-error>\n}", 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: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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: i4.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: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6.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: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: NgmHighlightDirective, selector: "[ngmHighlight]", inputs: ["ngmHighlight", "content", "caseSensitive", "customClasses"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmInputComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, TranslateModule, MatInputModule, MatAutocompleteModule, NgmHighlightDirective], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngm-input', hostDirectives: [
                        {
                            directive: NgmDensityDirective,
                            inputs: ['small', 'large'],
                        }
                    ], 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\"\n  [class]=\"(displayDensity() === 'compact' ? 'ngm-density__compact' : '') + ' ' + (displayDensity() === 'cosy' ? 'ngm-density__cosy' : '')\"\n  (optionSelected)=\"onOptionSelected($event)\"\n>\n  @for (option of options$ | async; track option.key) {\n    <mat-option [value]=\"option[valueKey]\">\n      @if (_explicitContent) {\n        <ng-container *ngTemplateOutlet=\"_explicitContent; context: {$implicit: option, value: option.value, caption: option.caption, key: option.key}\"></ng-container>\n      } @else {\n        <span [ngmHighlight]=\"highlight\" [content]=\"option.caption || option.label || option[valueKey]\"></span>\n      }\n    </mat-option>\n  }\n</mat-autocomplete>\n\n@if (!simple()) {\n  <mat-error class=\"text-xs h-4\">\n    <ng-content select=\"[ngmError]\"></ng-content>\n  </mat-error>\n}", 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: { 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, 