import { Component, ElementRef, QueryList, ViewChildren } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "ng-devui/loading";
export class MentionComponent {
    constructor() {
        this.suggestions = [];
        this.activeIndex = -1;
        this.loading = false;
        this.value = '';
        this.mentionNotFoundContent = '';
    }
    get focusItemElement() {
        const itemArr = this.items?.toArray();
        if (itemArr && itemArr[this.activeIndex]) {
            return itemArr[this.activeIndex].nativeElement;
        }
        return null;
    }
    selectSuggestion(suggestion) {
        if (this.trigger) {
            this.trigger.selectSuggestion(suggestion);
        }
    }
    scrollToFocusItem() {
        if (this.focusItemElement) {
            this.focusItemElement.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
        }
    }
}
MentionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MentionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
MentionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: MentionComponent, selector: "d-mention", viewQueries: [{ propertyName: "items", predicate: ["items"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ul class=\"devui-mention-dropdown\" dLoading [showLoading]=\"loading\" [ngClass]=\"{ 'devui-mention-overlay-top': position === 'top' }\">\n  <li\n    #items\n    class=\"devui-mention-dropdown-item\"\n    *ngFor=\"let suggestion of suggestions; let i = index\"\n    [class.focus]=\"i === activeIndex\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"selectSuggestion(suggestion)\"\n  >\n    <ng-container *ngIf=\"mentionItemTemplate; else defaultSuggestion\">\n      <ng-container [ngTemplateOutlet]=\"mentionItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: suggestion }\"></ng-container>\n    </ng-container>\n    <ng-template #defaultSuggestion>{{ suggestion }}</ng-template>\n  </li>\n  <li class=\"devui-mention-dropdown-notfound devui-mention-dropdown-item\" *ngIf=\"suggestions.length === 0\">\n    <span *ngIf=\"!loading\">{{ mentionNotFoundContent }}</span>\n  </li>\n</ul>\n", styles: [".devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}.devui-mention-dropdown{position:absolute;color:#252b3a;color:var(--devui-text, #252b3a);z-index:1052;z-index:var(--devui-z-index-dropdown, 1052);min-width:120px;max-height:250px;overflow-x:hidden;overflow-y:auto;border-radius:2px;border-radius:var(--devui-border-radius, 2px);background-color:#fff;background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:0 1px 4px #252b3a1a;box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1));margin-top:16px;box-sizing:border-box;outline:none}.devui-mention-dropdown.devui-mention-overlay-top{transform:translateY(-100%);margin-top:-8px}.devui-mention-dropdown .devui-mention-dropdown-notfound{min-height:34px;line-height:1.5;color:#252b3a;color:var(--devui-text, #252b3a);font-size:12px;font-size:var(--devui-font-size, 12px);padding:8px 12px;border:0}.devui-mention-dropdown .devui-mention-dropdown-item{font-size:12px;font-size:var(--devui-font-size, 12px);display:block;min-height:34px;line-height:1.5;width:100%;padding:8px 12px;clear:both;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border:0;color:#252b3a;color:var(--devui-text, #252b3a);cursor:pointer}.devui-mention-dropdown .devui-mention-dropdown-item:hover{color:#252b3a;color:var(--devui-list-item-hover-text, #252b3a);background-color:#f2f2f3;background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.devui-mention-dropdown .devui-mention-dropdown-item.focus{color:#252b3a;color:var(--devui-list-item-active-text, #252b3a);background-color:#f2f5fc;background-color:var(--devui-list-item-active-bg, #f2f5fc)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: i2.LoadingDirective, selector: "[dLoading]", inputs: ["message", "backdrop", "loadingTemplateRef", "positionType", "view", "showLoading", "loading", "zIndex", "loadingStyle"], exportAs: ["dLoading"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MentionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-mention', template: "<ul class=\"devui-mention-dropdown\" dLoading [showLoading]=\"loading\" [ngClass]=\"{ 'devui-mention-overlay-top': position === 'top' }\">\n  <li\n    #items\n    class=\"devui-mention-dropdown-item\"\n    *ngFor=\"let suggestion of suggestions; let i = index\"\n    [class.focus]=\"i === activeIndex\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"selectSuggestion(suggestion)\"\n  >\n    <ng-container *ngIf=\"mentionItemTemplate; else defaultSuggestion\">\n      <ng-container [ngTemplateOutlet]=\"mentionItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: suggestion }\"></ng-container>\n    </ng-container>\n    <ng-template #defaultSuggestion>{{ suggestion }}</ng-template>\n  </li>\n  <li class=\"devui-mention-dropdown-notfound devui-mention-dropdown-item\" *ngIf=\"suggestions.length === 0\">\n    <span *ngIf=\"!loading\">{{ mentionNotFoundContent }}</span>\n  </li>\n</ul>\n", styles: [".devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}.devui-mention-dropdown{position:absolute;color:#252b3a;color:var(--devui-text, #252b3a);z-index:1052;z-index:var(--devui-z-index-dropdown, 1052);min-width:120px;max-height:250px;overflow-x:hidden;overflow-y:auto;border-radius:2px;border-radius:var(--devui-border-radius, 2px);background-color:#fff;background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:0 1px 4px #252b3a1a;box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1));margin-top:16px;box-sizing:border-box;outline:none}.devui-mention-dropdown.devui-mention-overlay-top{transform:translateY(-100%);margin-top:-8px}.devui-mention-dropdown .devui-mention-dropdown-notfound{min-height:34px;line-height:1.5;color:#252b3a;color:var(--devui-text, #252b3a);font-size:12px;font-size:var(--devui-font-size, 12px);padding:8px 12px;border:0}.devui-mention-dropdown .devui-mention-dropdown-item{font-size:12px;font-size:var(--devui-font-size, 12px);display:block;min-height:34px;line-height:1.5;width:100%;padding:8px 12px;clear:both;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border:0;color:#252b3a;color:var(--devui-text, #252b3a);cursor:pointer}.devui-mention-dropdown .devui-mention-dropdown-item:hover{color:#252b3a;color:var(--devui-list-item-hover-text, #252b3a);background-color:#f2f2f3;background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.devui-mention-dropdown .devui-mention-dropdown-item.focus{color:#252b3a;color:var(--devui-list-item-active-text, #252b3a);background-color:#f2f5fc;background-color:var(--devui-list-item-active-bg, #f2f5fc)}\n"] }]
        }], propDecorators: { items: [{
                type: ViewChildren,
                args: ['items', { read: ElementRef }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 