@ctrl/ngx-emoji-mart 8.0.0 → 8.2.0

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

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, NgModule } from '@angular/core';
-import * as i2 from '@angular/common';
+import { Injectable, EventEmitter, inject, NgZone, Component, ChangeDetectionStrategy, Input, Output, ViewChild, NgModule } from '@angular/core';
+import { Subject, switchMap, fromEvent, EMPTY, takeUntil } from 'rxjs';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
 const categories = [
@@ -34033,8 +34034,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
         }], ctorParameters: function () { return []; } });
 
 class EmojiComponent {
-    constructor(emojiService) {
-        this.emojiService = emojiService;
+    set button(button) {
+        // Note: `runOutsideAngular` is used to trigger `addEventListener` outside of the Angular zone
+        //       too. See `setupMouseEnterListener`. The `switchMap` will subscribe to `fromEvent` considering
+        //       the context where the factory is called in.
+        this.ngZone.runOutsideAngular(() => this.button$.next(button?.nativeElement));
+    }
+    constructor() {
         this.skin = 1;
         this.set = 'apple';
         this.sheetSize = 64;
@@ -34045,15 +34051,33 @@ class EmojiComponent {
         this.size = 24;
         this.emoji = '';
         this.hideObsolete = false;
+        this.emojiClick = new EventEmitter();
+        /**
+         * 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.emojiClick = new EventEmitter();
+        this.emojiLeaveOutsideAngular = new EventEmitter();
         this.title = undefined;
         this.label = '';
         this.custom = false;
         this.isVisible = true;
         // TODO: replace 4.0.3 w/ dynamic get verison from emoji-datasource in package.json
         this.backgroundImageFn = DEFAULT_BACKGROUNDFN;
+        /**
+         * The subject used to emit whenever view queries are run and `button` or `span` is set/removed.
+         * We use subject to keep the reactive behavior so we don't have to add and remove event listeners manually.
+         */
+        this.button$ = new Subject();
+        this.destroy$ = new Subject();
+        this.ngZone = inject(NgZone);
+        this.emojiService = inject(EmojiService);
+        this.setupMouseListeners();
     }
     ngOnChanges() {
         if (!this.emoji) {
@@ -34126,6 +34150,9 @@ class EmojiComponent {
         }
         return (this.isVisible = true);
     }
+    ngOnDestroy() {
+        this.destroy$.next();
+    }
     getData() {
         return this.emojiService.getData(this.emoji, this.skin, this.set);
     }
@@ -34136,96 +34163,115 @@ class EmojiComponent {
         const emoji = this.getSanitizedData();
         this.emojiClick.emit({ emoji, $event });
     }
-    handleOver($event) {
-        const emoji = this.getSanitizedData();
-        this.emojiOver.emit({ emoji, $event });
-    }
-    handleLeave($event) {
-        const emoji = this.getSanitizedData();
-        this.emojiLeave.emit({ emoji, $event });
+    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, 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
+            //       are listening to `emojiLeave` in their code. For instance:
+            //       `<ngx-emoji (emojiLeave)="..."></ngx-emoji>`.
+            if (this.emojiLeave.observed) {
+                this.ngZone.run(() => this.emojiLeave.emit({ emoji, $event }));
+            }
+        });
     }
 }
-EmojiComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: EmojiComponent, deps: [{ token: EmojiService }], 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", emojiClick: "emojiClick" }, usesOnChanges: true, ngImport: i0, template: `
-    <button
-      *ngIf="useButton && isVisible"
-      type="button"
-      (click)="handleClick($event)"
-      (mouseenter)="handleOver($event)"
-      (mouseleave)="handleLeave($event)"
-      [attr.title]="title"
-      [attr.aria-label]="label"
-      class="emoji-mart-emoji"
-      [class.emoji-mart-emoji-native]="isNative"
-      [class.emoji-mart-emoji-custom]="custom"
-    >
-      <span [ngStyle]="style">
-        <ng-template [ngIf]="isNative">{{ unified }}</ng-template>
-        <ng-content></ng-content>
-      </span>
-    </button>
+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: { 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)"
+        [attr.title]="title"
+        [attr.aria-label]="label"
+        class="emoji-mart-emoji"
+        [class.emoji-mart-emoji-native]="isNative"
+        [class.emoji-mart-emoji-custom]="custom"
+      >
+        <span [ngStyle]="style">
+          <ng-template [ngIf]="isNative">{{ unified }}</ng-template>
+          <ng-content></ng-content>
+        </span>
+      </button>
+    </ng-template>
 
-    <span
-      *ngIf="!useButton && isVisible"
-      (click)="handleClick($event)"
-      (mouseenter)="handleOver($event)"
-      (mouseleave)="handleLeave($event)"
-      [attr.title]="title"
-      [attr.aria-label]="label"
-      class="emoji-mart-emoji"
-      [class.emoji-mart-emoji-native]="isNative"
-      [class.emoji-mart-emoji-custom]="custom"
-    >
-      <span [ngStyle]="style">
-        <ng-template [ngIf]="isNative">{{ unified }}</ng-template>
-        <ng-content></ng-content>
+    <ng-template #spanTpl>
+      <span
+        #button
+        (click)="handleClick($event)"
+        [attr.title]="title"
+        [attr.aria-label]="label"
+        class="emoji-mart-emoji"
+        [class.emoji-mart-emoji-native]="isNative"
+        [class.emoji-mart-emoji-custom]="custom"
+      >
+        <span [ngStyle]="style">
+          <ng-template [ngIf]="isNative">{{ unified }}</ng-template>
+          <ng-content></ng-content>
+        </span>
       </span>
-    </span>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: EmojiComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngx-emoji',
                     template: `
-    <button
-      *ngIf="useButton && isVisible"
-      type="button"
-      (click)="handleClick($event)"
-      (mouseenter)="handleOver($event)"
-      (mouseleave)="handleLeave($event)"
-      [attr.title]="title"
-      [attr.aria-label]="label"
-      class="emoji-mart-emoji"
-      [class.emoji-mart-emoji-native]="isNative"
-      [class.emoji-mart-emoji-custom]="custom"
-    >
-      <span [ngStyle]="style">
-        <ng-template [ngIf]="isNative">{{ unified }}</ng-template>
-        <ng-content></ng-content>
-      </span>
-    </button>
+    <ng-template [ngIf]="isVisible">
+      <button
+        *ngIf="useButton; else spanTpl"
+        #button
+        type="button"
+        (click)="handleClick($event)"
+        [attr.title]="title"
+        [attr.aria-label]="label"
+        class="emoji-mart-emoji"
+        [class.emoji-mart-emoji-native]="isNative"
+        [class.emoji-mart-emoji-custom]="custom"
+      >
+        <span [ngStyle]="style">
+          <ng-template [ngIf]="isNative">{{ unified }}</ng-template>
+          <ng-content></ng-content>
+        </span>
+      </button>
+    </ng-template>
 
-    <span
-      *ngIf="!useButton && isVisible"
-      (click)="handleClick($event)"
-      (mouseenter)="handleOver($event)"
-      (mouseleave)="handleLeave($event)"
-      [attr.title]="title"
-      [attr.aria-label]="label"
-      class="emoji-mart-emoji"
-      [class.emoji-mart-emoji-native]="isNative"
-      [class.emoji-mart-emoji-custom]="custom"
-    >
-      <span [ngStyle]="style">
-        <ng-template [ngIf]="isNative">{{ unified }}</ng-template>
-        <ng-content></ng-content>
+    <ng-template #spanTpl>
+      <span
+        #button
+        (click)="handleClick($event)"
+        [attr.title]="title"
+        [attr.aria-label]="label"
+        class="emoji-mart-emoji"
+        [class.emoji-mart-emoji-native]="isNative"
+        [class.emoji-mart-emoji-custom]="custom"
+      >
+        <span [ngStyle]="style">
+          <ng-template [ngIf]="isNative">{{ unified }}</ng-template>
+          <ng-content></ng-content>
+        </span>
       </span>
-    </span>
+    </ng-template>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     preserveWhitespaces: false,
                 }]
-        }], ctorParameters: function () { return [{ type: EmojiService }]; }, propDecorators: { skin: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { skin: [{
                 type: Input
             }], set: [{
                 type: Input
@@ -34251,16 +34297,23 @@ 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
-            }], emojiClick: [{
+            }], emojiLeaveOutsideAngular: [{
                 type: Output
             }], backgroundImageFn: [{
                 type: Input
             }], imageUrlFn: [{
                 type: Input
+            }], button: [{
+                type: ViewChild,
+                args: ['button', { static: false }]
             }] } });
 
 class EmojiModule {