@libs-ui/components-inputs-mention 0.1.1-1

package/fesm2022/libs-ui-components-inputs-mention.mjs

@@ -0,0 +1,1084 @@
+import * as i0 from '@angular/core';
+import { signal, model, viewChild, viewChildren, ChangeDetectionStrategy, Component, inject, ElementRef, input, output, effect, untracked, Directive } from '@angular/core';
+import { LibsUiDynamicComponentService } from '@libs-ui/services-dynamic-component';
+import { deleteUnicode, get, set, isNil, UtilsKeyCodeConstant, uuid } from '@libs-ui/utils';
+import { Subject, fromEvent, takeUntil } from 'rxjs';
+import { tap, takeUntil as takeUntil$1 } from 'rxjs/operators';
+import { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';
+import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const PATTERN_INSERT = '\ufeff';
+const buildTemplate = (value, id, feId) => {
+    return `<span class="libs-ui-components-mention-item" style="font-weight: 600;-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased; color: #7239EA" contenteditable="false" id="${id}" feId="${feId}" value="${value}">${value}</span>&nbsp;`;
+};
+const DEFAULT_CONFIG = {
+    items: [],
+    triggerChar: '@',
+    labelKey: 'email',
+    allowSpace: true,
+    returnTrigger: false,
+    limitSpaceSearchQuery: 3,
+    mentionEventName: 'click',
+    mentionActionByEvent: (item, trigger) => console.log(item, trigger),
+    mentionSelect: (item) => `@${get(item, 'email')}`,
+    mentionFilter: (search, items) => {
+        const searchString = deleteUnicode(search.toLowerCase());
+        return items?.filter((item) => {
+            const name = deleteUnicode(get(item, 'name').toLowerCase());
+            const userName = deleteUnicode(get(item, 'username').toLowerCase());
+            return name.includes(searchString) || userName.includes(searchString);
+        });
+    },
+};
+
+const setValue = (el, value) => {
+    if (isInputOrTextAreaElement(el)) {
+        el.value = value;
+        return;
+    }
+    el.textContent = value;
+};
+const getValue = (el) => {
+    return isInputOrTextAreaElement(el) ? el.value : el.textContent;
+};
+const insertValue = (el, start, end, text, iframe, noRecursion = false) => {
+    if (isTextElement(el)) {
+        const val = getValue(el);
+        text = noRecursion ? PATTERN_INSERT : text;
+        setValue(el, val?.substring(0, start) + text + val?.substring(end, val.length));
+        setCaretPosition(el, start + text.length, iframe);
+        return;
+    }
+    if (noRecursion) {
+        return;
+    }
+    return insertValueToContentEditable(start, end, text);
+};
+const insertValueToContentEditable = (start, end, text) => {
+    if (!window.getSelection) {
+        return;
+    }
+    const sel = window.getSelection();
+    if (!sel || !sel.anchorNode || !sel.getRangeAt || !sel.rangeCount) {
+        return;
+    }
+    let range = sel.getRangeAt(0);
+    const anchorNode = sel.anchorNode;
+    const numberTextBeforeCursor = (getTextBeforeCursor() || '').length;
+    range.setStart(anchorNode, numberTextBeforeCursor - (end - start));
+    range.setEnd(anchorNode, numberTextBeforeCursor);
+    range.deleteContents();
+    // Range.createContextualFragment() would be useful here but is
+    // only relatively recently standardized and is not supported in
+    // some browsers (IE9, for one)
+    const el = document.createElement('SPAN');
+    el.innerHTML = text;
+    const frag = document.createDocumentFragment();
+    let node, lastNode, nodeHandlerEvent;
+    while ((node = el.firstChild)) {
+        if (get(node, 'getAttribute')) {
+            nodeHandlerEvent = node;
+        }
+        lastNode = frag.appendChild(node);
+    }
+    range.insertNode(frag);
+    // Preserve the selection
+    if (lastNode) {
+        range = range.cloneRange();
+        range.setStartAfter(lastNode);
+        range.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(range);
+    }
+    return nodeHandlerEvent;
+};
+const getTextBeforeCursor = () => {
+    const sel = window.getSelection();
+    if (!sel || !sel.anchorNode) {
+        return undefined;
+    }
+    const range = sel.getRangeAt(0);
+    const anchorNode = sel.anchorNode;
+    const rangeNew = document.createRange();
+    rangeNew.selectNodeContents(anchorNode);
+    rangeNew.setEnd(range.startContainer, range.startOffset);
+    const fragNew = rangeNew.cloneContents();
+    const elmPrev = document.createElement('SPAN');
+    elmPrev.appendChild(fragNew);
+    return elmPrev.innerText;
+};
+const isInputOrTextAreaElement = (el) => {
+    return el !== null && (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA');
+};
+const isTextElement = (el) => {
+    return el !== null && (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA' || el.nodeName === '#text');
+};
+const setCaretPosition = (el, pos, iframe) => {
+    if (isInputOrTextAreaElement(el) && el.selectionStart) {
+        el.focus();
+        el.setSelectionRange(pos, pos);
+        return;
+    }
+    const range = getDocument(iframe)?.createRange();
+    range?.setStart(el, pos);
+    range?.collapse(true);
+    const sel = getWindowSelection(iframe);
+    if (!sel) {
+        return;
+    }
+    sel.removeAllRanges();
+    if (range) {
+        sel.addRange(range);
+    }
+};
+const getCaretPosition = (el, iframe) => {
+    if (isInputOrTextAreaElement(el)) {
+        const val = el.value;
+        return val.slice(0, el.selectionStart || undefined).length;
+    }
+    const selObj = getWindowSelection(iframe); //window.getSelection();
+    if (selObj && selObj.rangeCount > 0) {
+        const selRange = selObj.getRangeAt(0);
+        const preCaretRange = selRange.cloneRange();
+        preCaretRange.selectNodeContents(el);
+        preCaretRange.setEnd(selRange.endContainer, selRange.endOffset);
+        const position = preCaretRange.toString().length;
+        return position;
+    }
+    return 0;
+};
+// Based on ment.io functions...
+//
+const getDocument = (iframe) => {
+    if (!iframe) {
+        return document;
+    }
+    return iframe.contentWindow?.document;
+};
+const getWindowSelection = (iframe) => {
+    if (!iframe) {
+        return window.getSelection();
+    }
+    return iframe.contentWindow?.getSelection() || null;
+};
+const getContentEditableCaretCoords = (ctx) => {
+    const markerTextChar = '\ufeff';
+    const markerId = 'sel_' + new Date().getTime() + '_' + Math.random().toString().substring(2);
+    const doc = getDocument(ctx.iframe);
+    const sel = getWindowSelection(ctx.iframe);
+    if (!sel) {
+        return {
+            left: 0,
+            top: 0,
+            bottom: 0,
+        };
+    }
+    const prevRange = sel.getRangeAt(0);
+    // create new range and set postion using prevRange
+    const range = doc.createRange();
+    const anchorNode = sel.anchorNode;
+    range.setStart(anchorNode, prevRange.startOffset);
+    range.setEnd(anchorNode, prevRange.startOffset);
+    range.collapse(false);
+    // Create the marker element containing a single invisible character
+    // using DOM methods and insert it at the position in the range
+    const markerEl = doc.createElement('span');
+    markerEl.id = markerId;
+    markerEl.appendChild(doc.createTextNode(markerTextChar));
+    range.insertNode(markerEl);
+    sel.removeAllRanges();
+    sel.addRange(prevRange);
+    const coordinates = {
+        left: 0,
+        top: markerEl.offsetHeight,
+        bottom: -1,
+    };
+    localToRelativeCoordinates(ctx, markerEl, coordinates);
+    markerEl.parentNode?.removeChild(markerEl);
+    const widthScreen = (ctx.windowParent ? window.parent.innerWidth : window.innerWidth) || document.documentElement.clientWidth || document.body.clientWidth;
+    if (coordinates.left + 315 > widthScreen) {
+        coordinates.left = coordinates.left - 300;
+    }
+    const heightScreen = (ctx.windowParent ? window.parent.innerHeight : window.innerHeight) || document.documentElement.clientHeight || document.body.clientHeight;
+    if (coordinates.top + 190 > heightScreen) {
+        coordinates.bottom = heightScreen - coordinates.top + 15;
+        coordinates.top = -1;
+    }
+    return coordinates;
+};
+const localToRelativeCoordinates = (ctx, element, coordinates) => {
+    let obj = element;
+    let iframe = ctx ? ctx.iframe : null;
+    while (obj) {
+        if (ctx.parent !== null && ctx.parent === obj) {
+            break;
+        }
+        coordinates.left += obj.offsetLeft + obj.clientLeft;
+        coordinates.top += obj.offsetTop + obj.clientTop;
+        obj = obj.offsetParent;
+        if (!obj && iframe) {
+            obj = iframe;
+            iframe = null;
+        }
+    }
+    obj = element;
+    iframe = ctx ? ctx.iframe : null;
+    while ((obj !== getDocument(undefined)?.body || ctx.windowParent) && obj !== null) {
+        if (ctx.parent !== null && ctx.parent === obj) {
+            break;
+        }
+        if (obj.scrollTop && obj.scrollTop > 0) {
+            coordinates.top -= obj.scrollTop;
+        }
+        if (obj.scrollLeft && obj.scrollLeft > 0) {
+            coordinates.left -= obj.scrollLeft;
+        }
+        obj = ctx.windowParent ? obj.offsetParent : obj.parentNode;
+        if (!obj && iframe) {
+            obj = iframe;
+            iframe = null;
+        }
+    }
+};
+const setEndOfContentEditable = (contentEditableElement) => {
+    if (document.createRange) {
+        const range = document.createRange(); //Create a range (a range is a like the selection but invisible)
+        const selection = window.getSelection(); //get the selection object (allows you to change selection)
+        range.selectNodeContents(contentEditableElement); //Select the entire contents of the element with the range
+        range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start
+        selection?.removeAllRanges(); //remove any selections already made
+        selection?.addRange(range); //make the range you have just created the visible selection
+    }
+    return;
+};
+const insertTextAtCaret = (element, text) => {
+    if (window.getSelection) {
+        if (!elementContainsSelection(element)) {
+            setEndOfContentEditable(element);
+            insertTextAtCaret(element, text);
+            return;
+        }
+        const sel = window.getSelection();
+        if (sel?.getRangeAt && sel.rangeCount) {
+            let range = sel.getRangeAt(0);
+            const el = document.createElement('SPAN');
+            range.deleteContents();
+            el.innerHTML = text;
+            const frag = document.createDocumentFragment();
+            let node;
+            let lastNode;
+            while ((node = el.firstChild)) {
+                lastNode = frag.appendChild(node);
+            }
+            range.insertNode(frag);
+            if (lastNode) {
+                range = range.cloneRange();
+                range.setStartAfter(lastNode);
+                range.collapse(true);
+                sel.removeAllRanges();
+                sel.addRange(range);
+            }
+        }
+    }
+};
+const elementContainsSelection = (el) => {
+    if (!window.getSelection) {
+        return false;
+    }
+    const sel = window.getSelection();
+    if (sel && sel.rangeCount > 0) {
+        for (let i = 0; i < sel.rangeCount; ++i) {
+            if (!isOrContains(sel.getRangeAt(i).commonAncestorContainer, el)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    return false;
+};
+const isOrContains = (node, container) => {
+    while (node) {
+        if (node === container) {
+            return true;
+        }
+        if (node.parentNode) {
+            node = node.parentNode;
+        }
+    }
+    return false;
+};
+
+/* From: https://github.com/component/textarea-caret-position */
+// We'll copy the properties below into the mirror div.
+// Note that some browsers, such as Firefox, do not concatenate properties
+// into their shorthand (e.g. padding-top, padding-bottom etc. -> padding),
+// so we have to list every single property explicitly.
+const properties = [
+    'direction', // RTL support
+    'boxSizing',
+    'width', // on Chrome and IE, exclude the scrollbar, so the mirror div wraps exactly as the textarea does
+    'height',
+    'overflowX',
+    'overflowY', // copy the scrollbar for IE
+    'borderTopWidth',
+    'borderRightWidth',
+    'borderBottomWidth',
+    'borderLeftWidth',
+    'borderStyle',
+    'paddingTop',
+    'paddingRight',
+    'paddingBottom',
+    'paddingLeft',
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/font
+    'fontStyle',
+    'fontVariant',
+    'fontWeight',
+    'fontStretch',
+    'fontSize',
+    'fontSizeAdjust',
+    'lineHeight',
+    'fontFamily',
+    'textAlign',
+    'textTransform',
+    'textIndent',
+    'textDecoration', // might not make a difference, but better be safe
+    'letterSpacing',
+    'wordSpacing',
+    'tabSize',
+    'MozTabSize',
+];
+const isBrowser = typeof window !== 'undefined';
+const isFirefox = isBrowser && get(window, 'mozInnerScreenX') !== null;
+const getCaretCoordinates = (element, position) => {
+    if (!isBrowser) {
+        throw new Error('textarea-caret-position#getCaretCoordinates should only be called in a browser');
+    }
+    // The mirror div will replicate the textarea's style
+    const div = document.createElement('div');
+    div.id = 'input-textarea-caret-position-mirror-div';
+    document.body.appendChild(div);
+    const style = div.style;
+    const computed = window.getComputedStyle ? window.getComputedStyle(element) : get(element, 'currentStyle'); // currentStyle for IE < 9
+    const isInput = element.nodeName === 'INPUT';
+    // Default textarea styles
+    style.whiteSpace = 'pre-wrap';
+    if (!isInput) {
+        style.wordBreak = 'break-word';
+    } // only for textarea-s
+    // Position off-screen
+    style.position = 'absolute'; // required to return coordinates properly
+    // Transfer the element's properties to the div
+    properties.forEach((prop) => {
+        if (isInput && prop === 'lineHeight') {
+            // Special case for <input>s because text is rendered centered and line height may be != height
+            if (computed.boxSizing !== 'border-box') {
+                style.lineHeight = computed.height;
+                return;
+            }
+            const height = parseInt(computed.height);
+            const outerHeight = parseInt(computed.paddingTop) + parseInt(computed.paddingBottom) + parseInt(computed.borderTopWidth) + parseInt(computed.borderBottomWidth);
+            const targetHeight = outerHeight + parseInt(computed.lineHeight);
+            if (height > targetHeight) {
+                style.lineHeight = height - outerHeight + 'px';
+                return;
+            }
+            if (height === targetHeight) {
+                style.lineHeight = computed.lineHeight;
+                return;
+            }
+            style.lineHeight = '0';
+            return;
+        }
+        set(style, prop, computed[prop]);
+    });
+    if (!isFirefox) {
+        style.overflow = 'hidden';
+        // Firefox lies about the overflow property for textareas: https://bugzilla.mozilla.org/show_bug.cgi?id=984275
+    }
+    const value = get(element, 'value');
+    if (isFirefox && element.scrollHeight > parseInt(computed.height)) {
+        style.overflowY = 'scroll';
+    }
+    div.textContent = value.substring(0, position);
+    // The second special handling for input type="text" vs textarea:
+    // spaces need to be replaced with non-breaking spaces - http://stackoverflow.com/a/13402035/1269037
+    if (isInput && !isNil(div.textContent)) {
+        div.textContent = div.textContent.replace(/\s/g, '\u00a0');
+    }
+    const span = document.createElement('span');
+    // Wrapping must be replicated *exactly*, including when a long word gets
+    // onto the next line, with whitespace at the end of the line before (#7).
+    // The  *only* reliable way to do that is to copy the *entire* rest of the
+    // textarea's content into the <span> created at the caret position.
+    // For inputs, just '.' would be enough, but no need to bother.
+    span.textContent = value.substring(position) || '.'; // || because a completely empty faux span doesn't render at all
+    div.appendChild(span);
+    const coordinates = {
+        top: span.offsetTop + parseInt(computed['borderTopWidth']),
+        left: span.offsetLeft + parseInt(computed['borderLeftWidth']),
+        height: parseInt(computed['lineHeight']),
+    };
+    document.body.removeChild(div);
+    return coordinates;
+};
+
+class LibsUiComponentsInputsMentionListComponent {
+    // #region PROPERTY
+    items = signal([]);
+    activeIndex = signal(0);
+    hidden = signal(false);
+    styleOff = signal(false);
+    parentHandlerKeyDown = signal(undefined);
+    dropUp = signal(false);
+    coords = signal({ top: 0, left: 0, bottom: 0 });
+    offset = signal(0);
+    nativeParentElement = signal(undefined);
+    onDestroy = new Subject();
+    // #region INPUT
+    labelKey = model('label');
+    zIndex = model(1000);
+    isIframe = model.required();
+    defaultAvatar = model();
+    /* VIEW CHILD */
+    elementEl = viewChild('element');
+    itemsEl = viewChildren('item');
+    ngOnInit() {
+        if (this.isIframe()) {
+            this.initEvent(window.parent, 'wheel');
+            this.initEvent(window.parent, 'resize');
+            return;
+        }
+        this.initEvent(window, 'wheel');
+        this.initEvent(window, 'resize');
+    }
+    /* FUNCTIONS */
+    initEvent(element, eventName) {
+        fromEvent(element, eventName)
+            .pipe(takeUntil(this.onDestroy))
+            .subscribe((event) => {
+            if (eventName === 'resize' || !this.elementEl()?.nativeElement.contains(event.target)) {
+                this.handlerListenClose(event);
+            }
+        });
+    }
+    handlerListenClose(event) {
+        if (event.target !== this.elementEl()?.nativeElement) {
+            this.hidden.set(true);
+        }
+    }
+    // lots of confusion here between relative coordinates and containers
+    position(nativeParentElement, iframe, leftDiv) {
+        this.nativeParentElement.set(nativeParentElement);
+        if (isInputOrTextAreaElement(nativeParentElement)) {
+            // parent elements need to have postition:relative for this to work correctly?
+            this.coords.set(getCaretCoordinates(nativeParentElement, nativeParentElement.selectionStart));
+            this.coords.update((item) => ({
+                ...item,
+                top: nativeParentElement.offsetTop + item.top - nativeParentElement.scrollTop,
+                left: nativeParentElement.offsetLeft + item.left - nativeParentElement.scrollLeft + nativeParentElement.getBoundingClientRect().left,
+            }));
+            // getCretCoordinates() for text/input elements needs an additional offset to position the list correctly
+            this.offset.set(this.getBlockCursorDimensions(nativeParentElement).height);
+            this.positionElement();
+            return;
+        }
+        if (iframe) {
+            const context = { iframe: iframe, parent: window.parent.document.body, windowParent: true };
+            // const rect = iframe.getBoundingClientRect();
+            const caretRelativeToView = getContentEditableCaretCoords(context);
+            const doc = document.documentElement;
+            const scrollLeft = (window.scrollX || doc.scrollLeft) - (doc.clientLeft || 0);
+            this.coords.update((item) => ({
+                ...item,
+                left: caretRelativeToView.left - scrollLeft - (leftDiv || 0),
+                bottom: window.parent.innerHeight - caretRelativeToView.top + 18,
+            }));
+            if (caretRelativeToView.bottom && caretRelativeToView.bottom !== -1) {
+                this.coords.update((item) => ({
+                    ...item,
+                    bottom: caretRelativeToView.bottom,
+                }));
+            }
+            this.positionElement();
+            return;
+        }
+        const doc = document.documentElement;
+        const scrollLeft = (window.scrollX || doc.scrollLeft) - (doc.clientLeft || 0);
+        const scrollTop = (window.scrollX || doc.scrollTop) - (doc.clientTop || 0);
+        // bounding rectangles are relative to view, offsets are relative to container?
+        const caretRelativeToView = getContentEditableCaretCoords({ iframe, parent: null });
+        this.coords.update((item) => ({
+            ...item,
+            top: caretRelativeToView.top - scrollTop + 10,
+            left: caretRelativeToView.left - scrollLeft - (leftDiv || 0),
+            bottom: caretRelativeToView.bottom,
+        }));
+        this.positionElement();
+    }
+    get ActiveItem() {
+        return this.items()[this.activeIndex()];
+    }
+    handlerClick(event, index) {
+        event.stopPropagation();
+        this.activeIndex.set(index);
+        set(event, 'keyCode', UtilsKeyCodeConstant.ENTER);
+        this.parentHandlerKeyDown()?.(event, this.nativeParentElement());
+    }
+    activateNextItem() {
+        this.activeIndex.set(this.items().length - 1 > this.activeIndex() ? this.activeIndex() + 1 : this.activeIndex());
+        this.scrollToActive();
+    }
+    activatePreviousItem() {
+        this.activeIndex.set(this.activeIndex() > 0 ? this.activeIndex() - 1 : this.activeIndex());
+        this.scrollToActive();
+    }
+    positionElement(left = this.coords().left, top = this.coords().top, dropUp = this.dropUp(), bottom = this.coords().bottom || 0) {
+        const el = this.elementEl()?.nativeElement;
+        top += dropUp ? 0 : this.offset(); // top of list is next line
+        el.style.position = 'absolute';
+        el.style.left = left + 'px';
+        el.style.top = bottom !== -1 ? 'auto' : top + 'px';
+        el.style.bottom = bottom === -1 ? 'auto' : bottom + 'px';
+        this.nativeParentElement()?.normalize();
+    }
+    getBlockCursorDimensions(nativeParentElement) {
+        const parentStyles = window.getComputedStyle(nativeParentElement);
+        return {
+            height: parseFloat(parentStyles.lineHeight),
+            width: parseFloat(parentStyles.fontSize),
+        };
+    }
+    handleActiveItem(event, index) {
+        event.stopPropagation();
+        this.activeIndex.set(index);
+    }
+    scrollToActive() {
+        if (!this.itemsEl() || this.itemsEl().length <= this.activeIndex()) {
+            return;
+        }
+        this.itemsEl()[this.activeIndex()].nativeElement.scrollIntoView();
+    }
+    scrollContent() {
+        setTimeout(() => {
+            const element = this.elementEl();
+            if (element && element.nativeElement) {
+                element.nativeElement.scrollTop = 0;
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.onDestroy.next();
+        this.onDestroy.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsMentionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsInputsMentionListComponent, isStandalone: true, selector: "libs_ui-components-inputs-mention-list", inputs: { labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, isIframe: { classPropertyName: "isIframe", publicName: "isIframe", isSignal: true, isRequired: true, transformFunction: null }, defaultAvatar: { classPropertyName: "defaultAvatar", publicName: "defaultAvatar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { labelKey: "labelKeyChange", zIndex: "zIndexChange", isIframe: "isIframeChange", defaultAvatar: "defaultAvatarChange" }, viewQueries: [{ propertyName: "elementEl", first: true, predicate: ["element"], descendants: true, isSignal: true }, { propertyName: "itemsEl", predicate: ["item"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #element\n  class=\"libs-ui-mention-list\"\n  [style.zIndex]=\"zIndex()\"\n  [class.hidden]=\"hidden()\">\n  @for (item of items(); track item) {\n    <div\n      #item\n      class=\"libs-ui-mention-list-item\"\n      [class.libs-ui-mention-list-item-active]=\"$index === activeIndex()\"\n      (mousedown)=\"handlerClick($event, $index)\"\n      (mouseenter)=\"handleActiveItem($event, $index)\">\n      <div class=\"px-[12px] py-[6px] flex items-center\">\n        <libs_ui-components-avatar\n          [size]=\"24\"\n          [linkAvatar]=\"item.avatar\"\n          [linkAvatarError]=\"defaultAvatar()\"\n          [getLastTextAfterSpace]=\"true\"\n          [textAvatar]=\"item.name\"\n          [idGenColor]=\"item.id\" />\n        <libs_ui-components-popover\n          [classInclude]=\"'libs-ui-font-h5r'\"\n          [type]=\"'text'\"\n          [ignoreShowPopover]=\"true\"\n          [config]=\"{ width: 250 }\">\n          <!-- // ta.m \u1EA9n show tooltip v\u00EC ch\u01B0a x\u1EED l\u00FD \u0111c v\u1ECB tr\u00ED -->\n          {{ item.name + ' (' + item.username + ')' }}\n        </libs_ui-components-popover>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".libs-ui-mention-list{position:absolute;top:-999px;left:-9999px;z-index:1202;float:left;width:315px;padding:4px 0;background-color:#fff;border:solid 1px #e6e8ed;border-radius:5px;max-height:190px;overflow:auto;box-shadow:0 2px 10px 1px #3333331a}.libs-ui-mention-list .libs-ui-mention-list-item{background:#fff;cursor:pointer}.libs-ui-mention-list .libs-ui-mention-list-item:hover,.libs-ui-mention-list .libs-ui-mention-list-item-active{background-color:var(--libs-ui-color-light-3, #f4f8ff)}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "classImageInclude", "zIndexPreviewImage", "clickPreviewImage", "idGenColor", "getLastTextAfterSpace", "textAvatar", "textAvatarClassInclude", "containertextAvatarClassInclude"], outputs: ["outAvatarError", "outEventPreviewImage"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsMentionListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-inputs-mention-list', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LibsUiComponentsAvatarComponent, LibsUiComponentsPopoverComponent], template: "<div\n  #element\n  class=\"libs-ui-mention-list\"\n  [style.zIndex]=\"zIndex()\"\n  [class.hidden]=\"hidden()\">\n  @for (item of items(); track item) {\n    <div\n      #item\n      class=\"libs-ui-mention-list-item\"\n      [class.libs-ui-mention-list-item-active]=\"$index === activeIndex()\"\n      (mousedown)=\"handlerClick($event, $index)\"\n      (mouseenter)=\"handleActiveItem($event, $index)\">\n      <div class=\"px-[12px] py-[6px] flex items-center\">\n        <libs_ui-components-avatar\n          [size]=\"24\"\n          [linkAvatar]=\"item.avatar\"\n          [linkAvatarError]=\"defaultAvatar()\"\n          [getLastTextAfterSpace]=\"true\"\n          [textAvatar]=\"item.name\"\n          [idGenColor]=\"item.id\" />\n        <libs_ui-components-popover\n          [classInclude]=\"'libs-ui-font-h5r'\"\n          [type]=\"'text'\"\n          [ignoreShowPopover]=\"true\"\n          [config]=\"{ width: 250 }\">\n          <!-- // ta.m \u1EA9n show tooltip v\u00EC ch\u01B0a x\u1EED l\u00FD \u0111c v\u1ECB tr\u00ED -->\n          {{ item.name + ' (' + item.username + ')' }}\n        </libs_ui-components-popover>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".libs-ui-mention-list{position:absolute;top:-999px;left:-9999px;z-index:1202;float:left;width:315px;padding:4px 0;background-color:#fff;border:solid 1px #e6e8ed;border-radius:5px;max-height:190px;overflow:auto;box-shadow:0 2px 10px 1px #3333331a}.libs-ui-mention-list .libs-ui-mention-list-item{background:#fff;cursor:pointer}.libs-ui-mention-list .libs-ui-mention-list-item:hover,.libs-ui-mention-list .libs-ui-mention-list-item-active{background-color:var(--libs-ui-color-light-3, #f4f8ff)}\n"] }]
+        }] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class LibsUiComponentsInputsMentionDirective {
+    // #region PROPERTY
+    listComponentRef = signal(undefined);
+    nodesInsert = signal(new Set());
+    activeConfig = signal(undefined);
+    triggerChars = signal({});
+    searchString = signal('');
+    startPos = signal(undefined);
+    startNode = signal(undefined);
+    searchList = signal(undefined);
+    searching = signal(false);
+    iframe = signal(undefined);
+    lastKeyCode = signal(undefined);
+    isEditor = signal(false);
+    iframeId = signal(undefined);
+    element = inject(ElementRef);
+    dynamicComponentService = inject(LibsUiDynamicComponentService);
+    onDestroy = new Subject();
+    // #region INPUT
+    timeDelayInit = input(0, { transform: (val) => val ?? 0 });
+    mentionConfig = input();
+    mentionListTemplate = input();
+    // #region OUTPUT
+    outSearchTerm = output();
+    outItemSelected = output();
+    outToggle = output();
+    outInsertMention = output();
+    outFunctionControl = output();
+    constructor() {
+        effect(() => {
+            this.mentionConfig();
+            untracked(() => this.updateConfig());
+        });
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            if (!this.mentionConfig()) {
+                return;
+            }
+            const isContentEditable = this.element.nativeElement.getAttribute('contenteditable');
+            this.isEditor.set(!isContentEditable);
+            const element = !this.isEditor() ? this.element.nativeElement : this.element.nativeElement.querySelector('.ql-editor[contenteditable="true"]');
+            if (element) {
+                element.addEventListener('keydown', (event) => {
+                    this.handlerKeydown.bind(this)(event, element);
+                });
+                element.addEventListener('input', (event) => {
+                    this.handlerInput.bind(this)(event, element);
+                });
+                element.addEventListener('blur', (event) => {
+                    this.handlerBlur.bind(this)(event);
+                });
+                element.addEventListener('click', (event) => {
+                    this.handlerFocus.bind(this)(event, element);
+                });
+            }
+            this.outFunctionControl.emit({
+                addMention: () => {
+                    insertTextAtCaret(element, `${this.mentionConfig()?.triggerChar}`);
+                    setTimeout(() => {
+                        this.handlerKeydown({ key: this.mentionConfig()?.triggerChar, keyCode: UtilsKeyCodeConstant.BACKSPACE, shiftKey: true, inputEvent: true }, element);
+                    }, 500);
+                },
+            });
+        }, this.timeDelayInit());
+    }
+    /* FUNCTIONS */
+    updateConfig() {
+        const mentionConfig = this.mentionConfig();
+        if (!mentionConfig) {
+            return;
+        }
+        this.triggerChars.set({});
+        this.addConfig(mentionConfig);
+        if (mentionConfig.mention) {
+            mentionConfig.mention.forEach((config) => this.addConfig(config));
+        }
+    }
+    addConfig(config) {
+        const defaults = Object.assign({}, DEFAULT_CONFIG);
+        const labelKey = config.labelKey || 'label';
+        config = Object.assign(defaults, config);
+        if (config.items && config.items.length > 0) {
+            if (typeof config.items[0] === 'string') {
+                config.items.forEach((label) => {
+                    const object = {};
+                    object[labelKey] = label;
+                    return object;
+                });
+            }
+            if (labelKey) {
+                // remove items without an labelKey (as it's required to filter the list)
+                config.items = config.items.filter((e) => e[labelKey]);
+                if (!config.disableSort) {
+                    config.items.sort((a, b) => (a[labelKey] || '').localeCompare(b[labelKey] || ''));
+                }
+            }
+        }
+        this.triggerChars.update((item) => ({
+            ...item,
+            [config.triggerChar || '@']: config,
+        }));
+        if (this.activeConfig() && this.activeConfig()?.triggerChar === config.triggerChar) {
+            this.activeConfig.set(config);
+            this.updateSearchList();
+        }
+    }
+    setIframe(iframe) {
+        this.iframe.set(iframe);
+    }
+    stopEvent(event) {
+        if (get(event, 'wasClick')) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+    }
+    handlerBlur(event) {
+        setTimeout(() => {
+            this.stopEvent(event);
+            this.stopSearch();
+        }, 100);
+    }
+    handlerInput(event, nativeElement = this.element.nativeElement) {
+        const data = get(event, 'data');
+        if (this.lastKeyCode() === UtilsKeyCodeConstant.BUFFERED && data) {
+            const keyCode = data.charCodeAt(0);
+            this.handlerKeydown({ keyCode, inputEvent: true }, nativeElement);
+        }
+    }
+    handlerKeydown(event, nativeElement = this.element.nativeElement) {
+        this.lastKeyCode.set(event.keyCode);
+        if (event.isComposing || event.keyCode === UtilsKeyCodeConstant.BUFFERED) {
+            return;
+        }
+        const val = getValue(nativeElement);
+        let pos = getCaretPosition(nativeElement, this.iframe());
+        let charPressed = event.key;
+        if (!this.isEditor()) {
+            if (event.keyCode === UtilsKeyCodeConstant.BACKSPACE) {
+                this.appendEmptyToLastNode(pos, val.length, nativeElement);
+            }
+            setTimeout(() => this.addNodeZeroWidthSpace(nativeElement), 0);
+        }
+        if (!charPressed) {
+            const charCode = event.which || event.keyCode;
+            charPressed = String.fromCharCode(event.which || event.keyCode);
+            if (!event.shiftKey && charCode >= 65 && charCode <= 90) {
+                charPressed = String.fromCharCode(charCode + 32);
+            }
+        }
+        if (event.keyCode === UtilsKeyCodeConstant.ENTER && event.wasClick && pos < (this.startPos() || 0)) {
+            pos = this.startNode().length;
+            setCaretPosition(this.startNode(), pos, this.iframe());
+        }
+        const config = this.triggerChars()[charPressed];
+        if (config) {
+            this.activeConfig.set(config);
+            this.startPos.set(event.inputEvent ? pos - 1 : pos);
+            this.startNode.set(getWindowSelection(this.iframe())?.anchorNode);
+            this.searching.set(true);
+            this.searchString.set('');
+            this.showSearchList(nativeElement);
+            this.updateSearchList();
+            if (config.returnTrigger) {
+                this.outSearchTerm.emit(config.triggerChar);
+            }
+            return;
+        }
+        setTimeout(() => {
+            for (const itemSet of this.nodesInsert()) {
+                if (!nativeElement.contains(itemSet.elementSpan)) {
+                    itemSet.subscription?.unsubscribe();
+                    this.nodesInsert().delete(itemSet);
+                }
+            }
+        });
+        const startPos = this.startPos();
+        if (isNil(startPos) || startPos < 0 || !this.searching()) {
+            return;
+        }
+        const searchList = this.searchList();
+        if (pos <= startPos) {
+            if (searchList) {
+                searchList.hidden.set(true);
+            }
+            return;
+        }
+        if (event.keyCode === UtilsKeyCodeConstant.SHIFT || event.metaKey || event.altKey || event.ctrlKey || pos <= startPos) {
+            return;
+        }
+        if (!this.activeConfig()?.allowSpace && event.keyCode === UtilsKeyCodeConstant.SPACE) {
+            this.startPos.set(-1);
+        }
+        else if (event.keyCode === UtilsKeyCodeConstant.BACKSPACE && pos > 0) {
+            pos--;
+            if (pos === this.startPos()) {
+                this.stopSearch();
+            }
+        }
+        else if (searchList?.hidden()) {
+            if (event.keyCode === UtilsKeyCodeConstant.TAB || event.keyCode === UtilsKeyCodeConstant.ENTER) {
+                this.stopSearch();
+                return;
+            }
+        }
+        else if (!searchList?.hidden() && this.activeConfig()) {
+            if (event.keyCode === UtilsKeyCodeConstant.TAB || event.keyCode === UtilsKeyCodeConstant.ENTER) {
+                this.stopEvent(event);
+                // emit the selected list item
+                this.outItemSelected.emit(searchList?.ActiveItem);
+                // optional function to format the selected item before inserting the text
+                this.insertMention(nativeElement, pos);
+                // fire input event so angular bindings are updated
+                if ('Event' in window) {
+                    // this seems backwards, but fire the event from this elements nativeElement (not the
+                    // one provided that may be in an iframe, as it won't be propogate)
+                    // Create the event using the modern Event constructor
+                    const evt = new Event(this.iframe() ? 'change' : 'input', {
+                        bubbles: true,
+                        cancelable: false,
+                    });
+                    // Dispatch the event on the native element
+                    nativeElement.dispatchEvent(evt);
+                }
+                this.startPos.set(-1);
+                this.stopSearch();
+                return false;
+            }
+            if (event.keyCode === UtilsKeyCodeConstant.ESCAPE) {
+                this.stopEvent(event);
+                this.stopSearch();
+                return false;
+            }
+            if (event.keyCode === UtilsKeyCodeConstant.DOWN_ARROW) {
+                this.stopEvent(event);
+                searchList?.activateNextItem();
+                return false;
+            }
+            if (event.keyCode === UtilsKeyCodeConstant.UP_ARROW) {
+                this.stopEvent(event);
+                searchList?.activatePreviousItem();
+                return false;
+            }
+        }
+        if (charPressed.length !== 1 && event.keyCode !== UtilsKeyCodeConstant.BACKSPACE) {
+            this.stopEvent(event);
+            return false;
+        }
+        if (!this.searching()) {
+            return;
+        }
+        let mention = val.substring((this.startPos() || 0) + 1, pos);
+        if (event.keyCode !== UtilsKeyCodeConstant.BACKSPACE && !event.inputEvent) {
+            mention += charPressed;
+        }
+        const searchString = mention.replace(String.fromCharCode(160), ' ').replace(String.fromCharCode(0), '');
+        this.searchString.set(searchString.trim());
+        const limitSpaceSearchQuery = this.activeConfig()?.limitSpaceSearchQuery;
+        if (limitSpaceSearchQuery && searchString.split(' ').length - 1 > limitSpaceSearchQuery) {
+            this.searchString.set('');
+        }
+        if (this.activeConfig()?.returnTrigger) {
+            const triggerChar = this.searchString() || event.keyCode === UtilsKeyCodeConstant.BACKSPACE ? val.substring(this.startPos(), (this.startPos() || 0) + 1) : '';
+            this.outSearchTerm.emit(triggerChar + this.searchString());
+            this.updateSearchList();
+            return;
+        }
+        this.outSearchTerm.emit(this.searchString());
+        this.updateSearchList();
+    }
+    handlerFocus(e, nativeElement = this.element.nativeElement) {
+        e?.stopPropagation();
+        setTimeout(() => {
+            const node = getWindowSelection(this.iframe())?.anchorNode;
+            if (node?.nodeType !== 3) {
+                this.stopSearch();
+                return;
+            }
+            const textBeforeCursor = getTextBeforeCursor() || '';
+            const triggerChars = Object.keys(this.triggerChars()).map((key) => {
+                return {
+                    key: key,
+                    config: this.triggerChars()[key],
+                    index: textBeforeCursor.lastIndexOf(key),
+                };
+            });
+            const matchingCharacters = triggerChars.reduce((pre, current) => (pre && current && current.index > pre.index ? current : pre));
+            if (matchingCharacters.index < 0) {
+                this.stopSearch();
+                return;
+            }
+            const search = textBeforeCursor?.substring(matchingCharacters.index, textBeforeCursor.length);
+            if (!search) {
+                this.stopSearch();
+                return;
+            }
+            const pos = getCaretPosition(nativeElement, this.iframe());
+            this.activeConfig.set(matchingCharacters.config);
+            this.startPos.set(pos - (textBeforeCursor.length - matchingCharacters.index));
+            this.searchString.set(search.replace(matchingCharacters.key, ''));
+            this.searching.set(true);
+            this.handlerKeydown({ keyCode: ''.charCodeAt(0), inputEvent: false }, nativeElement);
+            const divElement = document.createElement('div');
+            divElement.style.width = 'max-content';
+            divElement.style.position = 'absolute';
+            divElement.innerText = search;
+            document.body.appendChild(divElement);
+            let iframe = undefined;
+            try {
+                iframe = this.mentionConfig()?.iframe ? window.parent.document.getElementById(this.mentionConfig()?.iframe) : undefined;
+            }
+            catch (error) {
+                console.log(error);
+            }
+            const searchList = this.searchList();
+            if (searchList) {
+                searchList.position(nativeElement, iframe, divElement.getBoundingClientRect().width);
+            }
+            divElement.remove();
+            nativeElement.normalize();
+        });
+    }
+    stopSearch() {
+        const searchList = this.searchList();
+        if (searchList && !searchList.hidden()) {
+            searchList.hidden.set(true);
+            this.outToggle.emit(false);
+        }
+        this.activeConfig.set(undefined);
+        this.searching.set(false);
+    }
+    updateSearchList() {
+        const matches = [];
+        const activeConfig = this.activeConfig();
+        const searchString = this.searchString();
+        const searchList = this.searchList();
+        // disabling the search relies on the async operation to do the filtering
+        if (activeConfig && activeConfig.items && !activeConfig.disableSearch && !isNil(searchString) && activeConfig.labelKey && activeConfig.mentionFilter) {
+            matches.push(...activeConfig.mentionFilter(searchString, activeConfig.items));
+        }
+        // update the search list
+        if (!searchList) {
+            return;
+        }
+        searchList.items.set(matches);
+        searchList.hidden.set(!matches.length);
+        searchList.activeIndex.set(0);
+        searchList.scrollContent();
+        this.outToggle.emit(matches.length ? true : false);
+    }
+    showSearchList(nativeElement) {
+        let iframe = undefined;
+        const mentionConfig = this.mentionConfig();
+        try {
+            iframe = mentionConfig?.iframe ? window.parent.document.getElementById(mentionConfig?.iframe) : undefined;
+        }
+        catch (error) {
+            console.log(error);
+        }
+        if (!mentionConfig) {
+            return;
+        }
+        this.outToggle.emit(true);
+        let firstTime = false;
+        if (!this.listComponentRef()) {
+            firstTime = true;
+            this.listComponentRef.set(this.dynamicComponentService.resolveComponentFactory(LibsUiComponentsInputsMentionListComponent));
+            this.searchList.set(this.listComponentRef()?.instance);
+        }
+        this.searchList()?.labelKey.set(this.activeConfig()?.labelKey || '');
+        this.searchList()?.styleOff.set(this.mentionConfig()?.disableStyle || false);
+        this.searchList()?.activeIndex.set(0);
+        this.searchList()?.zIndex.set(this.mentionConfig()?.zIndex || 2500);
+        this.searchList()?.isIframe.set(iframe ? true : false);
+        this.searchList()?.parentHandlerKeyDown.set(this.handlerKeydown.bind(this));
+        this.searchList()?.position(nativeElement, iframe);
+        if (firstTime && this.listComponentRef()) {
+            this.iframeId.set(this.dynamicComponentService.addToBody(this.listComponentRef(), iframe ? true : false));
+        }
+    }
+    destroyListSearch() {
+        this.dynamicComponentService.remove(this.listComponentRef, this.iframeId());
+        this.listComponentRef.set(undefined);
+    }
+    appendEmptyToLastNode(position, length, nativeElement = this.element.nativeElement) {
+        const empty = document.createTextNode('\u00A0');
+        const selection = getWindowSelection(this.iframe());
+        const anchorNode = selection?.anchorNode;
+        if (this.isEditor()) {
+            const parentNode = anchorNode?.parentNode;
+            if (parentNode && parentNode.getAttribute && parentNode.getAttribute('id')) {
+                if (!parentNode.nextSibling || !parentNode.nextSibling.textContent?.length) {
+                    parentNode?.parentNode?.insertBefore(empty, parentNode.nextSibling);
+                }
+                const range = document.createRange();
+                const sel = window.getSelection();
+                range.setStart(parentNode.nextSibling, 0);
+                range.collapse(true);
+                sel?.removeAllRanges();
+                sel?.addRange(range);
+            }
+            return;
+        }
+        let preNode = null;
+        const anchorOffset = selection?.anchorOffset;
+        if (!anchorNode || !anchorOffset) {
+            return;
+        }
+        if (anchorNode.nodeName.toLowerCase() !== '#text') {
+            nativeElement.appendChild(empty);
+            return;
+        }
+        for (let i = 0; i < nativeElement.childNodes.length; i++) {
+            const node = nativeElement.childNodes[i];
+            if (anchorNode.nodeType === 3 && anchorNode === node && preNode && preNode.getAttribute && preNode.getAttribute('id') && (!anchorNode.textContent?.length || anchorNode.textContent.length === 1) && position === length) {
+                nativeElement.appendChild(empty);
+                break;
+            }
+            preNode = node;
+        }
+    }
+    addNodeZeroWidthSpace(nativeElement = this.element.nativeElement) {
+        const empty = document.createTextNode('\u200b');
+        let preNode = null;
+        for (let i = 0; i < nativeElement.childNodes.length; i++) {
+            const node = nativeElement.childNodes[i];
+            if (preNode && preNode.getAttribute && preNode.getAttribute('id') && node && node.getAttribute && node.getAttribute('id')) {
+                nativeElement.insertBefore(empty, preNode.nextSibling);
+            }
+            preNode = node;
+        }
+    }
+    insertMention(nativeElement, pos) {
+        const activeConfig = this.activeConfig();
+        if (!activeConfig) {
+            return;
+        }
+        const searchList = this.searchList();
+        let text = '';
+        const feId = uuid();
+        const id = searchList?.ActiveItem.id || uuid();
+        const itemActive = searchList?.ActiveItem;
+        const { triggerChar, mentionEventName, mentionActionByEvent } = activeConfig;
+        if (activeConfig.mentionSelect) {
+            text = activeConfig.mentionSelect(searchList?.ActiveItem, activeConfig.triggerChar);
+        }
+        if (!this.isEditor()) {
+            let span = document.createElement('TEXTAREA');
+            span.innerText = text;
+            text = span.innerHTML;
+            span.remove();
+            text = buildTemplate(text, id, feId);
+            span = insertValue(nativeElement, this.startPos() || 0, pos, text, this.iframe());
+            if (span) {
+                const data = {
+                    elementSpan: span,
+                    subscription: undefined,
+                    item: itemActive,
+                    triggerChar: triggerChar,
+                    manualAdd: true,
+                };
+                this.nodesInsert().add(data);
+                if (mentionEventName) {
+                    data.subscription = fromEvent(span, mentionEventName)
+                        .pipe(tap((e) => e.stopPropagation()), takeUntil$1(this.onDestroy))
+                        .subscribe(() => {
+                        if (mentionActionByEvent) {
+                            mentionActionByEvent(itemActive, triggerChar);
+                        }
+                    });
+                }
+            }
+        }
+        else {
+            this.outInsertMention.emit({ data: { id, value: text, feId }, lengthKey: pos - (this.startPos() || 0) });
+        }
+    }
+    ngOnDestroy() {
+        this.destroyListSearch();
+        this.onDestroy.next();
+        this.onDestroy.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsMentionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: LibsUiComponentsInputsMentionDirective, isStandalone: true, selector: "[LibsUiComponentsInputsMentionDirective]", inputs: { timeDelayInit: { classPropertyName: "timeDelayInit", publicName: "timeDelayInit", isSignal: true, isRequired: false, transformFunction: null }, mentionConfig: { classPropertyName: "mentionConfig", publicName: "mentionConfig", isSignal: true, isRequired: false, transformFunction: null }, mentionListTemplate: { classPropertyName: "mentionListTemplate", publicName: "mentionListTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outSearchTerm: "outSearchTerm", outItemSelected: "outItemSelected", outToggle: "outToggle", outInsertMention: "outInsertMention", outFunctionControl: "outFunctionControl" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsMentionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[LibsUiComponentsInputsMentionDirective]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibsUiComponentsInputsMentionDirective };
+//# sourceMappingURL=libs-ui-components-inputs-mention.mjs.map