@ctrl/ngx-emoji-mart 9.1.2 → 9.2.0

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

@@ -34048,7 +34048,6 @@ class EmojiComponent {
     sheetRows;
     sheetColumns;
     useButton;
-    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`
@@ -34060,6 +34059,8 @@ class EmojiComponent {
     /** See comments above, this serves the same purpose. */
     emojiLeave = new EventEmitter();
     emojiLeaveOutsideAngular = new EventEmitter();
+    emojiClick = new EventEmitter();
+    emojiClickOutsideAngular = new EventEmitter();
     style;
     title = undefined;
     label = '';
@@ -34166,14 +34167,20 @@ class EmojiComponent {
     getSanitizedData() {
         return this.emojiService.getSanitizedData(this.emoji, this.skin, this.set);
     }
-    handleClick($event) {
-        const emoji = this.getSanitizedData();
-        this.emojiClick.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$('click').subscribe($event => {
+            const emoji = this.getSanitizedData();
+            this.emojiClickOutsideAngular.emit({ emoji, $event });
+            // Note: this is done for backwards compatibility. We run change detection if developers
+            //       are listening to `emojiClick` in their code. For instance:
+            //       `<ngx-emoji (emojiClick)="..."></ngx-emoji>`.
+            if (this.emojiClick.observed) {
+                this.ngZone.run(() => this.emojiClick.emit({ emoji, $event }));
+            }
+        });
         eventListener$('mouseenter').subscribe($event => {
             const emoji = this.getSanitizedData();
             this.emojiOverOutsideAngular.emit({ emoji, $event });
@@ -34196,13 +34203,12 @@ class EmojiComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: EmojiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: EmojiComponent, isStandalone: true, 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: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: EmojiComponent, isStandalone: true, 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", emojiOverOutsideAngular: "emojiOverOutsideAngular", emojiLeave: "emojiLeave", emojiLeaveOutsideAngular: "emojiLeaveOutsideAngular", emojiClick: "emojiClick", emojiClickOutsideAngular: "emojiClickOutsideAngular" }, 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"
@@ -34219,7 +34225,6 @@ class EmojiComponent {
     <ng-template #spanTpl>
       <span
         #button
-        (click)="handleClick($event)"
         [attr.title]="title"
         [attr.aria-label]="label"
         class="emoji-mart-emoji"
@@ -34244,7 +34249,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
         *ngIf="useButton; else spanTpl"
         #button
         type="button"
-        (click)="handleClick($event)"
         [attr.title]="title"
         [attr.aria-label]="label"
         class="emoji-mart-emoji"
@@ -34261,7 +34265,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
     <ng-template #spanTpl>
       <span
         #button
-        (click)="handleClick($event)"
         [attr.title]="title"
         [attr.aria-label]="label"
         class="emoji-mart-emoji"
@@ -34306,8 +34309,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 type: Input
             }], useButton: [{
                 type: Input
-            }], emojiClick: [{
-                type: Output
             }], emojiOver: [{
                 type: Output
             }], emojiOverOutsideAngular: [{
@@ -34316,6 +34317,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 type: Output
             }], emojiLeaveOutsideAngular: [{
                 type: Output
+            }], emojiClick: [{
+                type: Output
+            }], emojiClickOutsideAngular: [{
+                type: Output
             }], backgroundImageFn: [{
                 type: Input
             }], imageUrlFn: [{