@libs-ui/components-inputs-mention 0.2.306 → 0.2.307-0

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

@@ -33,12 +33,12 @@ const DEFAULT_CONFIG = {
     mentionSelect: (item) => `@${get(item, 'email')}`,
     mentionFilter: (search, items) => {
         const searchString = deleteUnicode(search.toLowerCase());
-        return items?.filter(item => {
+        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) => {
@@ -81,7 +81,7 @@ const insertValueToContentEditable = (start, end, text) => {
     // 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");
+    const el = document.createElement('SPAN');
     el.innerHTML = text;
     const frag = document.createDocumentFragment();
     let node, lastNode, nodeHandlerEvent;
@@ -113,7 +113,7 @@ const getTextBeforeCursor = () => {
     rangeNew.selectNodeContents(anchorNode);
     rangeNew.setEnd(range.startContainer, range.startOffset);
     const fragNew = rangeNew.cloneContents();
-    const elmPrev = document.createElement("SPAN");
+    const elmPrev = document.createElement('SPAN');
     elmPrev.appendChild(fragNew);
     return elmPrev.innerText;
 };
@@ -140,7 +140,6 @@ const setCaretPosition = (el, pos, iframe) => {
     if (range) {
         sel.addRange(range);
     }
-    ;
 };
 const getCaretPosition = (el, iframe) => {
     if (isInputOrTextAreaElement(el)) {
@@ -181,7 +180,7 @@ const getContentEditableCaretCoords = (ctx) => {
         return {
             left: 0,
             top: 0,
-            bottom: 0
+            bottom: 0,
         };
     }
     const prevRange = sel.getRangeAt(0);
@@ -202,7 +201,7 @@ const getContentEditableCaretCoords = (ctx) => {
     const coordinates = {
         left: 0,
         top: markerEl.offsetHeight,
-        bottom: -1
+        bottom: -1,
     };
     localToRelativeCoordinates(ctx, markerEl, coordinates);
     markerEl.parentNode?.removeChild(markerEl);
@@ -272,7 +271,7 @@ const insertTextAtCaret = (element, text) => {
         const sel = window.getSelection();
         if (sel?.getRangeAt && sel.rangeCount) {
             let range = sel.getRangeAt(0);
-            const el = document.createElement("SPAN");
+            const el = document.createElement('SPAN');
             range.deleteContents();
             el.innerHTML = text;
             const frag = document.createDocumentFragment();
@@ -356,10 +355,10 @@ const properties = [
     'letterSpacing',
     'wordSpacing',
     'tabSize',
-    'MozTabSize'
+    'MozTabSize',
 ];
-const isBrowser = (typeof window !== 'undefined');
-const isFirefox = (isBrowser && get(window, 'mozInnerScreenX') !== null);
+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');
@@ -379,10 +378,10 @@ const getCaretCoordinates = (element, position) => {
     // Position off-screen
     style.position = 'absolute'; // required to return coordinates properly
     // Transfer the element's properties to the div
-    properties.forEach(prop => {
+    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") {
+            if (computed.boxSizing !== 'border-box') {
                 style.lineHeight = computed.height;
                 return;
             }
@@ -390,7 +389,7 @@ const getCaretCoordinates = (element, position) => {
             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";
+                style.lineHeight = height - outerHeight + 'px';
                 return;
             }
             if (height === targetHeight) {
@@ -427,7 +426,7 @@ const getCaretCoordinates = (element, position) => {
     const coordinates = {
         top: span.offsetTop + parseInt(computed['borderTopWidth']),
         left: span.offsetLeft + parseInt(computed['borderLeftWidth']),
-        height: parseInt(computed['lineHeight'])
+        height: parseInt(computed['lineHeight']),
     };
     document.body.removeChild(div);
     return coordinates;
@@ -464,7 +463,9 @@ class LibsUiComponentsInputsMentionListComponent {
     }
     /* FUNCTIONS */
     initEvent(element, eventName) {
-        fromEvent(element, eventName).pipe(takeUntil(this.onDestroy)).subscribe((event) => {
+        fromEvent(element, eventName)
+            .pipe(takeUntil(this.onDestroy))
+            .subscribe((event) => {
             if (eventName === 'resize' || !this.elementEl()?.nativeElement.contains(event.target)) {
                 this.handlerListenClose(event);
             }
@@ -481,10 +482,10 @@ class LibsUiComponentsInputsMentionListComponent {
         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 => ({
+            this.coords.update((item) => ({
                 ...item,
                 top: nativeParentElement.offsetTop + item.top - nativeParentElement.scrollTop,
-                left: nativeParentElement.offsetLeft + item.left - nativeParentElement.scrollLeft + nativeParentElement.getBoundingClientRect().left
+                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);
@@ -497,15 +498,15 @@ class LibsUiComponentsInputsMentionListComponent {
             const caretRelativeToView = getContentEditableCaretCoords(context);
             const doc = document.documentElement;
             const scrollLeft = (window.scrollX || doc.scrollLeft) - (doc.clientLeft || 0);
-            this.coords.update(item => ({
+            this.coords.update((item) => ({
                 ...item,
                 left: caretRelativeToView.left - scrollLeft - (leftDiv || 0),
-                bottom: window.parent.innerHeight - caretRelativeToView.top + 18
+                bottom: window.parent.innerHeight - caretRelativeToView.top + 18,
             }));
             if (caretRelativeToView.bottom && caretRelativeToView.bottom !== -1) {
-                this.coords.update(item => ({
+                this.coords.update((item) => ({
                     ...item,
-                    bottom: caretRelativeToView.bottom
+                    bottom: caretRelativeToView.bottom,
                 }));
             }
             this.positionElement();
@@ -516,11 +517,11 @@ class LibsUiComponentsInputsMentionListComponent {
         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 => ({
+        this.coords.update((item) => ({
             ...item,
             top: caretRelativeToView.top - scrollTop + 10,
             left: caretRelativeToView.left - scrollLeft - (leftDiv || 0),
-            bottom: caretRelativeToView.bottom
+            bottom: caretRelativeToView.bottom,
         }));
         this.positionElement();
     }
@@ -544,7 +545,7 @@ class LibsUiComponentsInputsMentionListComponent {
     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.position = 'absolute';
         el.style.left = left + 'px';
         el.style.top = bottom !== -1 ? 'auto' : top + 'px';
         el.style.bottom = bottom === -1 ? 'auto' : bottom + 'px';
@@ -554,7 +555,7 @@ class LibsUiComponentsInputsMentionListComponent {
         const parentStyles = window.getComputedStyle(nativeParentElement);
         return {
             height: parseFloat(parentStyles.lineHeight),
-            width: parseFloat(parentStyles.fontSize)
+            width: parseFloat(parentStyles.fontSize),
         };
     }
     handleActiveItem(event, index) {
@@ -562,7 +563,7 @@ class LibsUiComponentsInputsMentionListComponent {
         this.activeIndex.set(index);
     }
     scrollToActive() {
-        if (!this.itemsEl() || (this.itemsEl().length <= this.activeIndex())) {
+        if (!this.itemsEl() || this.itemsEl().length <= this.activeIndex()) {
             return;
         }
         this.itemsEl()[this.activeIndex()].nativeElement.scrollIntoView();
@@ -580,14 +581,11 @@ class LibsUiComponentsInputsMentionListComponent {
         this.onDestroy.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsMentionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 #element\n  class=\"libs-ui-mention-list\"\n  [style.zIndex]=\"zIndex()\"\n  [class.hidden]=\"hidden()\">\n  @for (item of items(); track item) {\n    <div #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 [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 [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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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.13", 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 #element\n  class=\"libs-ui-mention-list\"\n  [style.zIndex]=\"zIndex()\"\n  [class.hidden]=\"hidden()\">\n  @for (item of items(); track item) {\n    <div #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 [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 [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"] }]
+            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 */
@@ -610,7 +608,7 @@ class LibsUiComponentsInputsMentionDirective {
     dynamicComponentService = inject(LibsUiDynamicComponentService);
     onDestroy = new Subject();
     // #region INPUT
-    timeDelayInit = input(0, { transform: val => val ?? 0 });
+    timeDelayInit = input(0, { transform: (val) => val ?? 0 });
     mentionConfig = input();
     mentionListTemplate = input();
     // #region OUTPUT
@@ -653,7 +651,7 @@ class LibsUiComponentsInputsMentionDirective {
                     setTimeout(() => {
                         this.handlerKeydown({ key: this.mentionConfig()?.triggerChar, keyCode: KEY_BACKSPACE, shiftKey: true, inputEvent: true }, element);
                     }, 500);
-                }
+                },
             });
         }, this.timeDelayInit());
     }
@@ -666,7 +664,7 @@ class LibsUiComponentsInputsMentionDirective {
         this.triggerChars.set({});
         this.addConfig(mentionConfig);
         if (mentionConfig.mention) {
-            mentionConfig.mention.forEach(config => this.addConfig(config));
+            mentionConfig.mention.forEach((config) => this.addConfig(config));
         }
     }
     addConfig(config) {
@@ -683,15 +681,15 @@ class LibsUiComponentsInputsMentionDirective {
             }
             if (labelKey) {
                 // remove items without an labelKey (as it's required to filter the list)
-                config.items = config.items.filter(e => e[labelKey]);
+                config.items = config.items.filter((e) => e[labelKey]);
                 if (!config.disableSort) {
-                    config.items.sort((a, b) => (a[labelKey] || '').localeCompare((b[labelKey] || '')));
+                    config.items.sort((a, b) => (a[labelKey] || '').localeCompare(b[labelKey] || ''));
                 }
             }
         }
-        this.triggerChars.update(item => ({
+        this.triggerChars.update((item) => ({
             ...item,
-            [config.triggerChar || '@']: config
+            [config.triggerChar || '@']: config,
         }));
         if (this.activeConfig() && this.activeConfig()?.triggerChar === config.triggerChar) {
             this.activeConfig.set(config);
@@ -739,7 +737,7 @@ class LibsUiComponentsInputsMentionDirective {
         if (!charPressed) {
             const charCode = event.which || event.keyCode;
             charPressed = String.fromCharCode(event.which || event.keyCode);
-            if (!event.shiftKey && (charCode >= 65 && charCode <= 90)) {
+            if (!event.shiftKey && charCode >= 65 && charCode <= 90) {
                 charPressed = String.fromCharCode(charCode + 32);
             }
         }
@@ -806,13 +804,13 @@ class LibsUiComponentsInputsMentionDirective {
                 // 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) {
+                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", {
+                    const evt = new Event(this.iframe() ? 'change' : 'input', {
                         bubbles: true,
-                        cancelable: false
+                        cancelable: false,
                     });
                     // Dispatch the event on the native element
                     nativeElement.dispatchEvent(evt);
@@ -851,11 +849,11 @@ class LibsUiComponentsInputsMentionDirective {
         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) {
+        if (limitSpaceSearchQuery && searchString.split(' ').length - 1 > limitSpaceSearchQuery) {
             this.searchString.set('');
         }
         if (this.activeConfig()?.returnTrigger) {
-            const triggerChar = (this.searchString() || event.keyCode === KEY_BACKSPACE) ? val.substring(this.startPos(), (this.startPos() || 0) + 1) : '';
+            const triggerChar = this.searchString() || event.keyCode === KEY_BACKSPACE ? val.substring(this.startPos(), (this.startPos() || 0) + 1) : '';
             this.outSearchTerm.emit(triggerChar + this.searchString());
             this.updateSearchList();
             return;
@@ -876,10 +874,10 @@ class LibsUiComponentsInputsMentionDirective {
                 return {
                     key: key,
                     config: this.triggerChars()[key],
-                    index: textBeforeCursor.lastIndexOf(key)
+                    index: textBeforeCursor.lastIndexOf(key),
                 };
             });
-            const matchingCharacters = triggerChars.reduce((pre, current) => pre && current && current.index > pre.index ? current : pre);
+            const matchingCharacters = triggerChars.reduce((pre, current) => (pre && current && current.index > pre.index ? current : pre));
             if (matchingCharacters.index < 0) {
                 this.stopSearch();
                 return;
@@ -895,7 +893,7 @@ class LibsUiComponentsInputsMentionDirective {
             this.searchString.set(search.replace(matchingCharacters.key, ''));
             this.searching.set(true);
             this.handlerKeydown({ keyCode: ''.charCodeAt(0), inputEvent: false }, nativeElement);
-            const divElement = document.createElement("div");
+            const divElement = document.createElement('div');
             divElement.style.width = 'max-content';
             divElement.style.position = 'absolute';
             divElement.innerText = search;
@@ -1052,11 +1050,13 @@ class LibsUiComponentsInputsMentionDirective {
                     subscription: undefined,
                     item: itemActive,
                     triggerChar: triggerChar,
-                    manualAdd: true
+                    manualAdd: true,
                 };
                 this.nodesInsert().add(data);
                 if (mentionEventName) {
-                    data.subscription = fromEvent(span, mentionEventName).pipe(tap(e => e.stopPropagation()), takeUntil$1(this.onDestroy)).subscribe(() => {
+                    data.subscription = fromEvent(span, mentionEventName)
+                        .pipe(tap((e) => e.stopPropagation()), takeUntil$1(this.onDestroy))
+                        .subscribe(() => {
                         if (mentionActionByEvent) {
                             mentionActionByEvent(itemActive, triggerChar);
                         }
@@ -1081,7 +1081,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: '[LibsUiComponentsInputsMentionDirective]',
-                    standalone: true
+                    standalone: true,
                 }]
         }], ctorParameters: () => [] });