import { ChangeDetectionStrategy, Component, DestroyRef, EventEmitter, Input, Output, forwardRef, inject, } from '@angular/core';
import { FormGenericComponent } from '../../services/form-generic.abstract';
import { FormErrorComponent } from '../error/error.component';
import { LabelComponent } from '../label/label.component';
import { AsyncPipe, NgClass } from '@angular/common';
import { IconComponent } from '../../components/atoms/icon/icon.component';
import { OptionComponent } from '../option/option.component';
import { provideControlContainer, provideValueAccessor } from '../utils/form.util';
import { InputComponent } from '../input/input.component';
import { BehaviorSubject, Subject, debounceTime } from 'rxjs';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
export class AutocompleteComponent extends FormGenericComponent {
    constructor(formGroupDirective) {
        super(formGroupDirective);
        this.destroyRef = inject(DestroyRef);
        this.key = '';
        this.options = [];
        this.label = '';
        this.icon = '';
        this.helper = '';
        this.placeholder = '';
        this.value = '';
        this.inputValue = '';
        this.iconPosition = 'left';
        this.disposition = 'vertical';
        this.fullSize = true;
        this.multiple = false;
        this.showError = false;
        this.typed = new EventEmitter();
        this.selected = new EventEmitter();
        this.focusOut$ = new Subject();
        this.inputValue$ = new BehaviorSubject('');
        this.focusOut$.pipe(takeUntilDestroyed(this.destroyRef), debounceTime(150)).subscribe(() => {
            this.options = [];
            this.triggerTouched();
            this.triggerMarkCheck();
        });
    }
    input(value) {
        if (!value)
            this.options = [];
        if (this.value && !this.multiple) {
            this.setValue(null);
            this.inputValue$.next('');
            return;
        }
        if (this.multiple) {
            this.inputValue$.next(value);
        }
        this.typed.emit(value);
    }
    setValue(value, propagate = true) {
        this.value = value;
        if (propagate) {
            this.triggerChange(value);
            this.selected.emit(value);
        }
        if (value) {
            const selectedOption = this.options.find(option => option.key === value);
            if (!this.multiple)
                this.inputValue$.next(selectedOption ? selectedOption.label : this.placeholder);
            else {
                const currentWords = this.inputValue$.getValue().split(' ');
                // replacing the last word with the current 'label' value
                currentWords[currentWords.length - 1] = selectedOption ? selectedOption.label : this.placeholder;
                this.inputValue$.next(currentWords.join(' '));
            }
        }
    }
    writeValue(value) {
        this.triggerMarkCheck();
        this.setValue(value, false);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i1.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: AutocompleteComponent, isStandalone: true, selector: "ct-autocomplete", inputs: { formControlName: "formControlName", key: "key", options: "options", label: "label", icon: "icon", helper: "helper", placeholder: "placeholder", value: "value", inputValue: "inputValue", iconPosition: "iconPosition", disposition: "disposition", fullSize: "fullSize", multiple: "multiple", showError: "showError" }, outputs: { typed: "typed", selected: "selected" }, providers: [provideValueAccessor(forwardRef(() => AutocompleteComponent))], usesInheritance: true, ngImport: i0, template: "<div class=\"flex gap-1 font-primary\" [class.flex-col]=\"disposition === 'vertical'\">\n  @if (label) {\n    <ct-form-label\n      [text]=\"label\"\n      [hasError]=\"hasErrors(formControl)\"\n      [showError]=\"showError\"\n      [formControlName]=\"formControlName\" />\n  }\n  <div class=\"flex flex-col\" [class.w-full]=\"fullSize\" [class.w-fit]=\"!fullSize\">\n    <ct-input\n      key=\"autocomplete\"\n      [canDelete]=\"true\"\n      [helper]=\"helper\"\n      [value]=\"inputValue$ | async\"\n      [placeholder]=\"placeholder\"\n      (typed)=\"input($event)\"\n      (focusout)=\"focusOut$.next($event)\" />\n    @if (options && options.length > 0) {\n      <div class=\"relative flex flex-col\">\n        <div\n          [class.w-full]=\"fullSize\"\n          [class.w-fit]=\"!fullSize\"\n          class=\"absolute top-0.5 z-10 flex max-h-72 flex-col overflow-y-auto rounded-md border border-neutral-400 bg-surface text-on-surface shadow-lg dark:bg-surface-dark dark:text-on-surface-dark\">\n          @for (option of options; track option) {\n            <ct-option (click)=\"setValue(option.key)\" [label]=\"option.label\" [icon]=\"option.icon!\" />\n          }\n        </div>\n      </div>\n    }\n  </div>\n  @if (formControl) {\n    <ct-form-alert\n      [hasErrors]=\"hasErrors(formControl)\"\n      [helper]=\"helper\"\n      [errors]=\"formControl.errors ?? {}\"\n      size=\"xs\" />\n  }\n</div>\n", dependencies: [{ kind: "component", type: FormErrorComponent, selector: "ct-form-alert", inputs: ["errors", "size", "hasErrors", "fullSize", "helper", "errorMessages"] }, { kind: "component", type: LabelComponent, selector: "ct-form-label", inputs: ["text", "type", "formControlName", "hasError", "showError"] }, { kind: "component", type: OptionComponent, selector: "ct-option", inputs: ["label", "icon"] }, { kind: "component", type: InputComponent, selector: "ct-input", inputs: ["formControlName", "key", "type", "value", "label", "icon", "helper", "placeholder", "symbol", "canDelete", "fullSize", "showError", "min", "max", "iconPosition", "disposition"], outputs: ["typed"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], viewProviders: [provideControlContainer()], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: AutocompleteComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-autocomplete', standalone: true, imports: [IconComponent, FormErrorComponent, LabelComponent, OptionComponent, InputComponent, NgClass, AsyncPipe], providers: [provideValueAccessor(forwardRef(() => AutocompleteComponent))], viewProviders: [provideControlContainer()], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex gap-1 font-primary\" [class.flex-col]=\"disposition === 'vertical'\">\n  @if (label) {\n    <ct-form-label\n      [text]=\"label\"\n      [hasError]=\"hasErrors(formControl)\"\n      [showError]=\"showError\"\n      [formControlName]=\"formControlName\" />\n  }\n  <div class=\"flex flex-col\" [class.w-full]=\"fullSize\" [class.w-fit]=\"!fullSize\">\n    <ct-input\n      key=\"autocomplete\"\n      [canDelete]=\"true\"\n      [helper]=\"helper\"\n      [value]=\"inputValue$ | async\"\n      [placeholder]=\"placeholder\"\n      (typed)=\"input($event)\"\n      (focusout)=\"focusOut$.next($event)\" />\n    @if (options && options.length > 0) {\n      <div class=\"relative flex flex-col\">\n        <div\n          [class.w-full]=\"fullSize\"\n          [class.w-fit]=\"!fullSize\"\n          class=\"absolute top-0.5 z-10 flex max-h-72 flex-col overflow-y-auto rounded-md border border-neutral-400 bg-surface text-on-surface shadow-lg dark:bg-surface-dark dark:text-on-surface-dark\">\n          @for (option of options; track option) {\n            <ct-option (click)=\"setValue(option.key)\" [label]=\"option.label\" [icon]=\"option.icon!\" />\n          }\n        </div>\n      </div>\n    }\n  </div>\n  @if (formControl) {\n    <ct-form-alert\n      [hasErrors]=\"hasErrors(formControl)\"\n      [helper]=\"helper\"\n      [errors]=\"formControl.errors ?? {}\"\n      size=\"xs\" />\n  }\n</div>\n" }]
        }], ctorParameters: () => [{ type: i1.FormGroupDirective }], propDecorators: { formControlName: [{
                type: Input
            }], key: [{
                type: Input,
                args: [{ required: true }]
            }], options: [{
                type: Input,
                args: [{ required: true }]
            }], label: [{
                type: Input
            }], icon: [{
                type: Input
            }], helper: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], value: [{
                type: Input
            }], inputValue: [{
                type: Input
            }], iconPosition: [{
                type: Input
            }], disposition: [{
                type: Input
            }], fullSize: [{
                type: Input
            }], multiple: [{
                type: Input
            }], showError: [{
                type: Input
            }], typed: [{
                type: Output
            }], selected: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64,[encoded data, 12248 characters]