import { NgFor, NgIf } from '@angular/common';
import { Component, EventEmitter, Input, Output, computed, signal } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatChipsModule } from '@angular/material/chips';
import { MatTooltipModule } from '@angular/material/tooltip';
import { NgmHighlightDirective } from '@metad/ocap-angular/common';
import { TranslateModule } from '@ngx-translate/core';
import * as i0 from "@angular/core";
import * as i1 from "@ngx-translate/core";
import * as i2 from "@angular/forms";
import * as i3 from "@angular/material/tooltip";
import * as i4 from "@angular/material/autocomplete";
import * as i5 from "@angular/material/core";
export class NgmCopilotInputComponent {
    constructor() {
        this.#suggests = signal([]);
        this.ask = new EventEmitter();
        this.answering = signal(false);
        this.suggesting = signal(false);
        this.error = '';
        this.promptControl = new FormControl('');
        this.formGroup = new FormGroup({ prompt: this.promptControl });
        this.search = toSignal(this.promptControl.valueChanges, { initialValue: null });
        this.filteredSuggests = computed(() => {
            if (this.#suggests()) {
                const search = this.search()?.toLowerCase();
                return search ? this.#suggests().filter((item) => item.toLowerCase().includes(search)) : this.#suggests().slice();
            }
            return [];
        });
    }
    get suggests() {
        return this.#suggests();
    }
    set suggests(value) {
        this.#suggests.set(value);
    }
    #suggests;
    /**
     * Add an ask prompt
     *
     * @param event
     */
    async add(event) {
        // Prompt value
        const value = (event.value || '').trim();
        // Clear the input value
        event.chipInput.clear();
        this.promptControl.setValue(null);
        if (value) {
            //   await this.askCopilot(value)
        }
    }
    selected(event) {
        // this.promptInput.nativeElement.value = event.option.viewValue
        this.promptControl.setValue(event.option.viewValue);
    }
    onSubmit() {
        this.promptControl.setValue(null);
        this.ask.emit({ prompt: this.promptControl.value });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: NgmCopilotInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: NgmCopilotInputComponent, isStandalone: true, selector: "ngm-copilot-input", inputs: { suggests: "suggests" }, outputs: { ask: "ask" }, ngImport: i0, template: "<div class=\"relative flex-1 w-full rounded-lg p-[2px] from-rose-400 via-fuchsia-500 to-indigo-500\"\n  [class.bg-gradient-to-r]=\"true\"\n  [class.ngm-background-animate]=\"answering()\"\n  >\n  <form class=\"flex rounded-md px-2 py-1 overflow-hidden bg-white dark:bg-bluegray-700\" [formGroup]=\"formGroup\"\n    (ngSubmit)=\"onSubmit()\"\n  >\n    <div class=\"px-2 left-0 flex items-center\">\n      <span class=\"font-notoColorEmoji\">\uD83E\uDD16</span>\n    </div>\n    <input #promptInput type=\"text\" id=\"simple-search\" class=\"border-none outline-none text-gray-900 text-sm block w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500\"\n      placeholder=\" {{'Ngm.Copilot.Ask' | translate: { Default: 'Ask' } }}...\" required\n      matInput\n      [matAutocomplete]=\"auto\"\n      formControlName=\"prompt\"\n    >\n    @if(error) {\n      <div class=\"whitespace-nowrap text-ellipsis overflow-hidden text-red-400\"\n        [matTooltip]=\"error\"\n      >\n        {{error}}\n      </div>\n    }\n  </form>\n</div>\n\n<mat-autocomplete #auto=\"matAutocomplete\" class=\"pac-insight__autocomplete ngm-autocomplete-panel ngm-density__cosy\"\n  hideSingleSelectionIndicator\n  (optionSelected)=\"selected($event)\" >\n  @for (prompt of filteredSuggests(); track prompt) {\n    <mat-option [value]=\"prompt\" (click)=\"$event.stopPropagation();$event.preventDefault();\">\n      <span [ngmHighlight]=\"search()\" [content]=\"prompt\"></span>\n    </mat-option>\n  }\n</mat-autocomplete>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.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: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.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"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: NgmCopilotInputComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'ngm-copilot-input', imports: [NgIf, NgFor, TranslateModule, ReactiveFormsModule, MatTooltipModule, MatChipsModule, MatAutocompleteModule, NgmHighlightDirective], template: "<div class=\"relative flex-1 w-full rounded-lg p-[2px] from-rose-400 via-fuchsia-500 to-indigo-500\"\n  [class.bg-gradient-to-r]=\"true\"\n  [class.ngm-background-animate]=\"answering()\"\n  >\n  <form class=\"flex rounded-md px-2 py-1 overflow-hidden bg-white dark:bg-bluegray-700\" [formGroup]=\"formGroup\"\n    (ngSubmit)=\"onSubmit()\"\n  >\n    <div class=\"px-2 left-0 flex items-center\">\n      <span class=\"font-notoColorEmoji\">\uD83E\uDD16</span>\n    </div>\n    <input #promptInput type=\"text\" id=\"simple-search\" class=\"border-none outline-none text-gray-900 text-sm block w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500\"\n      placeholder=\" {{'Ngm.Copilot.Ask' | translate: { Default: 'Ask' } }}...\" required\n      matInput\n      [matAutocomplete]=\"auto\"\n      formControlName=\"prompt\"\n    >\n    @if(error) {\n      <div class=\"whitespace-nowrap text-ellipsis overflow-hidden text-red-400\"\n        [matTooltip]=\"error\"\n      >\n        {{error}}\n      </div>\n    }\n  </form>\n</div>\n\n<mat-autocomplete #auto=\"matAutocomplete\" class=\"pac-insight__autocomplete ngm-autocomplete-panel ngm-density__cosy\"\n  hideSingleSelectionIndicator\n  (optionSelected)=\"selected($event)\" >\n  @for (prompt of filteredSuggests(); track prompt) {\n    <mat-option [value]=\"prompt\" (click)=\"$event.stopPropagation();$event.preventDefault();\">\n      <span [ngmHighlight]=\"search()\" [content]=\"prompt\"></span>\n    </mat-option>\n  }\n</mat-autocomplete>", styles: [":host{display:block}\n"] }]
        }], propDecorators: { suggests: [{
                type: Input
            }], ask: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 