ng-devui
Version:
DevUI components based on Angular
40 lines • 14.2 kB
JavaScript
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' });
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MentionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 <ng-template\n *ngIf=\"mentionHeaderTemplate\"\n [ngTemplateOutlet]=\"mentionHeaderTemplate\"\n [ngTemplateOutletContext]=\"{ activeIndex: activeIndex, loading: loading }\"\n ></ng-template>\n <li\n #items\n *ngFor=\"let suggestion of suggestions; let i = index\"\n class=\"devui-mention-dropdown-item\"\n [class.focus]=\"i === activeIndex\"\n (click)=\"selectSuggestion(suggestion)\"\n (mousedown)=\"$event.preventDefault()\"\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:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-mention-dropdown{position:absolute;color:var(--devui-text, #191919);z-index:var(--devui-z-index-dropdown, 1052);min-width:120px;max-height:250px;overflow-x:hidden;overflow-y:auto;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-length-base, 0 1px 6px 0) var(--devui-light-shadow, rgba(0, 0, 0, .08));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:var(--devui-text, #191919);font-size:var(--devui-font-size, 12px);padding:8px 12px;border:0}.devui-mention-dropdown .devui-mention-dropdown-item{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:var(--devui-text, #191919);cursor:pointer}.devui-mention-dropdown .devui-mention-dropdown-item:hover{color:var(--devui-list-item-hover-text, #000000);background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.devui-mention-dropdown .devui-mention-dropdown-item.focus{color:var(--devui-list-item-active-text, #000000);background-color:var(--devui-list-item-active-bg, #cedefd)}\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: ["backdrop", "message", "positionType", "showLoading", "view", "zIndex", "loading", "loadingStyle", "loadingTemplateRef"], exportAs: ["dLoading"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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 <ng-template\n *ngIf=\"mentionHeaderTemplate\"\n [ngTemplateOutlet]=\"mentionHeaderTemplate\"\n [ngTemplateOutletContext]=\"{ activeIndex: activeIndex, loading: loading }\"\n ></ng-template>\n <li\n #items\n *ngFor=\"let suggestion of suggestions; let i = index\"\n class=\"devui-mention-dropdown-item\"\n [class.focus]=\"i === activeIndex\"\n (click)=\"selectSuggestion(suggestion)\"\n (mousedown)=\"$event.preventDefault()\"\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:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-mention-dropdown{position:absolute;color:var(--devui-text, #191919);z-index:var(--devui-z-index-dropdown, 1052);min-width:120px;max-height:250px;overflow-x:hidden;overflow-y:auto;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-length-base, 0 1px 6px 0) var(--devui-light-shadow, rgba(0, 0, 0, .08));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:var(--devui-text, #191919);font-size:var(--devui-font-size, 12px);padding:8px 12px;border:0}.devui-mention-dropdown .devui-mention-dropdown-item{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:var(--devui-text, #191919);cursor:pointer}.devui-mention-dropdown .devui-mention-dropdown-item:hover{color:var(--devui-list-item-hover-text, #000000);background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.devui-mention-dropdown .devui-mention-dropdown-item.focus{color:var(--devui-list-item-active-text, #000000);background-color:var(--devui-list-item-active-bg, #cedefd)}\n"] }]
}], propDecorators: { items: [{
type: ViewChildren,
args: ['items', { read: ElementRef }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudGlvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9kZXZ1aS9tZW50aW9uL21lbnRpb24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vZGV2dWkvbWVudGlvbi9tZW50aW9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFNBQVMsRUFBZSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFTNUYsTUFBTSxPQUFPLGdCQUFnQjtJQUw3QjtRQU9FLGdCQUFXLEdBQUcsRUFBRSxDQUFDO1FBQ2pCLGdCQUFXLEdBQUcsQ0FBQyxDQUFDLENBQUM7UUFDakIsWUFBTyxHQUFHLEtBQUssQ0FBQztRQUNoQixVQUFLLEdBQUcsRUFBRSxDQUFDO1FBQ1gsMkJBQXNCLEdBQUcsRUFBRSxDQUFDO0tBeUI3QjtJQW5CQyxJQUFZLGdCQUFnQjtRQUMxQixNQUFNLE9BQU8sR0FBRyxJQUFJLENBQUMsS0FBSyxFQUFFLE9BQU8sRUFBRSxDQUFDO1FBQ3RDLElBQUksT0FBTyxJQUFJLE9BQU8sQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLEVBQUUsQ0FBQztZQUN6QyxPQUFPLE9BQU8sQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUMsYUFBYSxDQUFDO1FBQ2pELENBQUM7UUFDRCxPQUFPLElBQUksQ0FBQztJQUNkLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxVQUFVO1FBQ3pCLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO1lBQ2pCLElBQUksQ0FBQyxPQUFPLENBQUMsZ0JBQWdCLENBQUMsVUFBVSxDQUFDLENBQUM7UUFDNUMsQ0FBQztJQUNILENBQUM7SUFFRCxpQkFBaUI7UUFDZixJQUFJLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO1lBQzFCLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxjQUFjLENBQUMsRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxDQUFDLENBQUM7UUFDbkcsQ0FBQztJQUNILENBQUM7K0dBOUJVLGdCQUFnQjttR0FBaEIsZ0JBQWdCLCtHQUNJLFVBQVUsNkJDVjNDLHFsQ0F1QkE7OzRGRGRhLGdCQUFnQjtrQkFMNUIsU0FBUzsrQkFDRSxXQUFXOzhCQUt3QixLQUFLO3NCQUFqRCxZQUFZO3VCQUFDLE9BQU8sRUFBRSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIFF1ZXJ5TGlzdCwgVGVtcGxhdGVSZWYsIFZpZXdDaGlsZHJlbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTWVudGlvbkRpcmVjdGl2ZSB9IGZyb20gJy4vbWVudGlvbi5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgTWVudGlvblBvc2l0aW9uVHlwZSB9IGZyb20gJy4vbWVudGlvbi50eXBlcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2QtbWVudGlvbicsXG4gIHRlbXBsYXRlVXJsOiAnLi9tZW50aW9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbWVudGlvbi5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBNZW50aW9uQ29tcG9uZW50IHtcbiAgQFZpZXdDaGlsZHJlbignaXRlbXMnLCB7IHJlYWQ6IEVsZW1lbnRSZWYgfSkgaXRlbXMhOiBRdWVyeUxpc3Q8RWxlbWVudFJlZj47XG4gIHN1Z2dlc3Rpb25zID0gW107XG4gIGFjdGl2ZUluZGV4ID0gLTE7XG4gIGxvYWRpbmcgPSBmYWxzZTtcbiAgdmFsdWUgPSAnJztcbiAgbWVudGlvbk5vdEZvdW5kQ29udGVudCA9ICcnO1xuICBtZW50aW9uSGVhZGVyVGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT47XG4gIG1lbnRpb25JdGVtVGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT47XG4gIHRyaWdnZXI6IE1lbnRpb25EaXJlY3RpdmU7XG4gIHBvc2l0aW9uOiBNZW50aW9uUG9zaXRpb25UeXBlO1xuXG4gIHByaXZhdGUgZ2V0IGZvY3VzSXRlbUVsZW1lbnQoKTogSFRNTEVsZW1lbnQgfCBudWxsIHtcbiAgICBjb25zdCBpdGVtQXJyID0gdGhpcy5pdGVtcz8udG9BcnJheSgpO1xuICAgIGlmIChpdGVtQXJyICYmIGl0ZW1BcnJbdGhpcy5hY3RpdmVJbmRleF0pIHtcbiAgICAgIHJldHVybiBpdGVtQXJyW3RoaXMuYWN0aXZlSW5kZXhdLm5hdGl2ZUVsZW1lbnQ7XG4gICAgfVxuICAgIHJldHVybiBudWxsO1xuICB9XG5cbiAgc2VsZWN0U3VnZ2VzdGlvbihzdWdnZXN0aW9uKSB7XG4gICAgaWYgKHRoaXMudHJpZ2dlcikge1xuICAgICAgdGhpcy50cmlnZ2VyLnNlbGVjdFN1Z2dlc3Rpb24oc3VnZ2VzdGlvbik7XG4gICAgfVxuICB9XG5cbiAgc2Nyb2xsVG9Gb2N1c0l0ZW0oKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuZm9jdXNJdGVtRWxlbWVudCkge1xuICAgICAgdGhpcy5mb2N1c0l0ZW1FbGVtZW50LnNjcm9sbEludG9WaWV3KHsgYmVoYXZpb3I6ICdzbW9vdGgnLCBibG9jazogJ2NlbnRlcicsIGlubGluZTogJ25lYXJlc3QnIH0pO1xuICAgIH1cbiAgfVxufVxuIiwiPHVsIGNsYXNzPVwiZGV2dWktbWVudGlvbi1kcm9wZG93blwiIGRMb2FkaW5nIFtzaG93TG9hZGluZ109XCJsb2FkaW5nXCIgW25nQ2xhc3NdPVwieyAnZGV2dWktbWVudGlvbi1vdmVybGF5LXRvcCc6IHBvc2l0aW9uID09PSAndG9wJyB9XCI+XG4gIDxuZy10ZW1wbGF0ZVxuICAgICpuZ0lmPVwibWVudGlvbkhlYWRlclRlbXBsYXRlXCJcbiAgICBbbmdUZW1wbGF0ZU91dGxldF09XCJtZW50aW9uSGVhZGVyVGVtcGxhdGVcIlxuICAgIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7IGFjdGl2ZUluZGV4OiBhY3RpdmVJbmRleCwgbG9hZGluZzogbG9hZGluZyB9XCJcbiAgPjwvbmctdGVtcGxhdGU+XG4gIDxsaVxuICAgICNpdGVtc1xuICAgICpuZ0Zvcj1cImxldCBzdWdnZXN0aW9uIG9mIHN1Z2dlc3Rpb25zOyBsZXQgaSA9IGluZGV4XCJcbiAgICBjbGFzcz1cImRldnVpLW1lbnRpb24tZHJvcGRvd24taXRlbVwiXG4gICAgW2NsYXNzLmZvY3VzXT1cImkgPT09IGFjdGl2ZUluZGV4XCJcbiAgICAoY2xpY2spPVwic2VsZWN0U3VnZ2VzdGlvbihzdWdnZXN0aW9uKVwiXG4gICAgKG1vdXNlZG93bik9XCIkZXZlbnQucHJldmVudERlZmF1bHQoKVwiXG4gID5cbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwibWVudGlvbkl0ZW1UZW1wbGF0ZTsgZWxzZSBkZWZhdWx0U3VnZ2VzdGlvblwiPlxuICAgICAgPG5nLWNvbnRhaW5lciBbbmdUZW1wbGF0ZU91dGxldF09XCJtZW50aW9uSXRlbVRlbXBsYXRlXCIgW25nVGVtcGxhdGVPdXRsZXRDb250ZXh0XT1cInsgJGltcGxpY2l0OiBzdWdnZXN0aW9uIH1cIj48L25nLWNvbnRhaW5lcj5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8bmctdGVtcGxhdGUgI2RlZmF1bHRTdWdnZXN0aW9uPnt7IHN1Z2dlc3Rpb24gfX08L25nLXRlbXBsYXRlPlxuICA8L2xpPlxuICA8bGkgY2xhc3M9XCJkZXZ1aS1tZW50aW9uLWRyb3Bkb3duLW5vdGZvdW5kIGRldnVpLW1lbnRpb24tZHJvcGRvd24taXRlbVwiICpuZ0lmPVwic3VnZ2VzdGlvbnMubGVuZ3RoID09PSAwXCI+XG4gICAgPHNwYW4gKm5nSWY9XCIhbG9hZGluZ1wiPnt7IG1lbnRpb25Ob3RGb3VuZENvbnRlbnQgfX08L3NwYW4+XG4gIDwvbGk+XG48L3VsPlxuIl19