@ctrl/ngx-emoji-mart 8.1.0 → 8.2.0

package/fesm2020/ctrl-ngx-emoji-mart-ngx-emoji.mjs

@@ -34051,16 +34051,18 @@ class EmojiComponent {
         this.size = 24;
         this.emoji = '';
         this.hideObsolete = false;
-        this.emojiOver = new EventEmitter();
+        this.emojiClick = new EventEmitter();
         /**
-         * Note: `emojiLeave` and `emojiLeaveOutsideAngular` are dispatched on the same event, but for different
-         *       purposes. The `emojiLeaveOutsideAngular` would be set up in category component so we don't care
-         *       about zone context the callback is being called in. The `emojiLeave` is for backwards compatibility
-         *       if anyone is listening to this event explicitly in their code.
+         * Note: `emojiOver` and `emojiOverOutsideAngular` are dispatched on the same event (`mouseenter`), but
+         *       for different purposes. The `emojiOverOutsideAngular` event is listened only in `emoji-category`
+         *       component and the category component doesn't care about zone context the callback is being called in.
+         *       The `emojiOver` is for backwards compatibility if anyone is listening to this event explicitly in their code.
          */
+        this.emojiOver = new EventEmitter();
+        this.emojiOverOutsideAngular = new EventEmitter();
+        /** See comments above, this serves the same purpose. */
         this.emojiLeave = new EventEmitter();
         this.emojiLeaveOutsideAngular = new EventEmitter();
-        this.emojiClick = new EventEmitter();
         this.title = undefined;
         this.label = '';
         this.custom = false;
@@ -34075,7 +34077,7 @@ class EmojiComponent {
         this.destroy$ = new Subject();
         this.ngZone = inject(NgZone);
         this.emojiService = inject(EmojiService);
-        this.setupMouseLeaveListener();
+        this.setupMouseListeners();
     }
     ngOnChanges() {
         if (!this.emoji) {
@@ -34161,16 +34163,21 @@ class EmojiComponent {
         const emoji = this.getSanitizedData();
         this.emojiClick.emit({ emoji, $event });
     }
-    handleOver($event) {
-        const emoji = this.getSanitizedData();
-        this.emojiOver.emit({ emoji, $event });
-    }
-    setupMouseLeaveListener() {
-        this.button$
-            .pipe(
+    setupMouseListeners() {
+        const eventListener$ = (eventName) => this.button$.pipe(
         // Note: `EMPTY` is used to remove event listener once the DOM node is removed.
-        switchMap(button => (button ? fromEvent(button, 'mouseleave') : EMPTY)), takeUntil(this.destroy$))
-            .subscribe($event => {
+        switchMap(button => (button ? fromEvent(button, eventName) : EMPTY)), takeUntil(this.destroy$));
+        eventListener$('mouseenter').subscribe($event => {
+            const emoji = this.getSanitizedData();
+            this.emojiOverOutsideAngular.emit({ emoji, $event });
+            // Note: this is done for backwards compatibility. We run change detection if developers
+            //       are listening to `emojiOver` in their code. For instance:
+            //       `<ngx-emoji (emojiOver)="..."></ngx-emoji>`.
+            if (this.emojiOver.observed) {
+                this.ngZone.run(() => this.emojiOver.emit({ emoji, $event }));
+            }
+        });
+        eventListener$('mouseleave').subscribe($event => {
             const emoji = this.getSanitizedData();
             this.emojiLeaveOutsideAngular.emit({ emoji, $event });
             // Note: this is done for backwards compatibility. We run change detection if developers
@@ -34183,14 +34190,13 @@ class EmojiComponent {
     }
 }
 EmojiComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: EmojiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EmojiComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: EmojiComponent, selector: "ngx-emoji", inputs: { skin: "skin", set: "set", sheetSize: "sheetSize", isNative: "isNative", forceSize: "forceSize", tooltip: "tooltip", size: "size", emoji: "emoji", fallback: "fallback", hideObsolete: "hideObsolete", sheetRows: "sheetRows", sheetColumns: "sheetColumns", useButton: "useButton", backgroundImageFn: "backgroundImageFn", imageUrlFn: "imageUrlFn" }, outputs: { emojiOver: "emojiOver", emojiLeave: "emojiLeave", emojiLeaveOutsideAngular: "emojiLeaveOutsideAngular", emojiClick: "emojiClick" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+EmojiComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: EmojiComponent, selector: "ngx-emoji", inputs: { skin: "skin", set: "set", sheetSize: "sheetSize", isNative: "isNative", forceSize: "forceSize", tooltip: "tooltip", size: "size", emoji: "emoji", fallback: "fallback", hideObsolete: "hideObsolete", sheetRows: "sheetRows", sheetColumns: "sheetColumns", useButton: "useButton", backgroundImageFn: "backgroundImageFn", imageUrlFn: "imageUrlFn" }, outputs: { emojiClick: "emojiClick", emojiOver: "emojiOver", emojiOverOutsideAngular: "emojiOverOutsideAngular", emojiLeave: "emojiLeave", emojiLeaveOutsideAngular: "emojiLeaveOutsideAngular" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <ng-template [ngIf]="isVisible">
       <button
         *ngIf="useButton; else spanTpl"
         #button
         type="button"
         (click)="handleClick($event)"
-        (mouseenter)="handleOver($event)"
         [attr.title]="title"
         [attr.aria-label]="label"
         class="emoji-mart-emoji"
@@ -34208,7 +34214,6 @@ EmojiComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version
       <span
         #button
         (click)="handleClick($event)"
-        (mouseenter)="handleOver($event)"
         [attr.title]="title"
         [attr.aria-label]="label"
         class="emoji-mart-emoji"
@@ -34233,7 +34238,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
         #button
         type="button"
         (click)="handleClick($event)"
-        (mouseenter)="handleOver($event)"
         [attr.title]="title"
         [attr.aria-label]="label"
         class="emoji-mart-emoji"
@@ -34251,7 +34255,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
       <span
         #button
         (click)="handleClick($event)"
-        (mouseenter)="handleOver($event)"
         [attr.title]="title"
         [attr.aria-label]="label"
         class="emoji-mart-emoji"
@@ -34294,14 +34297,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                 type: Input
             }], useButton: [{
                 type: Input
+            }], emojiClick: [{
+                type: Output
             }], emojiOver: [{
                 type: Output
+            }], emojiOverOutsideAngular: [{
+                type: Output
             }], emojiLeave: [{
                 type: Output
             }], emojiLeaveOutsideAngular: [{
                 type: Output
-            }], emojiClick: [{
-                type: Output
             }], backgroundImageFn: [{
                 type: Input
             }], imageUrlFn: [{