@ctrl/ngx-emoji-mart 8.1.0 → 9.0.0

package/{fesm2020 → fesm2022}/ctrl-ngx-emoji-mart-ngx-emoji.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
 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';
+import { Subject, switchMap, fromEvent, EMPTY, takeUntil } from 'rxjs';
 
 const categories = [
     {
@@ -33896,10 +33896,10 @@ const COLONS_REGEX = /^(?:\:([^\:]+)\:)(?:\:skin-tone-(\d)\:)?$/;
 const SKINS = ['1F3FA', '1F3FB', '1F3FC', '1F3FD', '1F3FE', '1F3FF'];
 const DEFAULT_BACKGROUNDFN = (set, sheetSize) => `https://unpkg.com/emoji-datasource-${set}@6.0.1/img/${set}/sheets-256/${sheetSize}.png`;
 class EmojiService {
+    uncompressed = false;
+    names = {};
+    emojis = [];
     constructor() {
-        this.uncompressed = false;
-        this.names = {};
-        this.emojis = [];
         if (!this.uncompressed) {
             this.uncompress(emojis);
             this.uncompressed = true;
@@ -34025,57 +34025,66 @@ class EmojiService {
     getSanitizedData(emoji, skin, set) {
         return this.sanitize(this.getData(emoji, skin, set));
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: EmojiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: EmojiService, providedIn: 'root' });
 }
-EmojiService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: EmojiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-EmojiService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: EmojiService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: EmojiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: EmojiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return []; } });
 
 class EmojiComponent {
+    skin = 1;
+    set = 'apple';
+    sheetSize = 64;
+    /** Renders the native unicode emoji */
+    isNative = false;
+    forceSize = false;
+    tooltip = false;
+    size = 24;
+    emoji = '';
+    fallback;
+    hideObsolete = false;
+    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`
+     *       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.
+     */
+    emojiOver = new EventEmitter();
+    emojiOverOutsideAngular = new EventEmitter();
+    /** See comments above, this serves the same purpose. */
+    emojiLeave = new EventEmitter();
+    emojiLeaveOutsideAngular = new EventEmitter();
+    style;
+    title = undefined;
+    label = '';
+    unified;
+    custom = false;
+    isVisible = true;
+    // TODO: replace 4.0.3 w/ dynamic get verison from emoji-datasource in package.json
+    backgroundImageFn = DEFAULT_BACKGROUNDFN;
+    imageUrlFn;
     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));
     }
+    /**
+     * 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.
+     */
+    button$ = new Subject();
+    destroy$ = new Subject();
+    ngZone = inject(NgZone);
+    emojiService = inject(EmojiService);
     constructor() {
-        this.skin = 1;
-        this.set = 'apple';
-        this.sheetSize = 64;
-        /** Renders the native unicode emoji */
-        this.isNative = false;
-        this.forceSize = false;
-        this.tooltip = false;
-        this.size = 24;
-        this.emoji = '';
-        this.hideObsolete = false;
-        this.emojiOver = 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.
-         */
-        this.emojiLeave = new EventEmitter();
-        this.emojiLeaveOutsideAngular = new EventEmitter();
-        this.emojiClick = 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.setupMouseLeaveListener();
+        this.setupMouseListeners();
     }
     ngOnChanges() {
         if (!this.emoji) {
@@ -34161,16 +34170,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
@@ -34181,16 +34195,14 @@ 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: EmojiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", 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: `
     <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 +34220,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"
@@ -34221,8 +34232,9 @@ EmojiComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version
         </span>
       </span>
     </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: [{
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "16.0.0", ngImport: i0, type: EmojiComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngx-emoji',
@@ -34233,7 +34245,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 +34262,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"
@@ -34267,6 +34277,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     preserveWhitespaces: false,
+                    standalone: true,
+                    imports: [CommonModule],
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { skin: [{
                 type: Input
@@ -34294,14 +34306,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: [{
@@ -34312,16 +34326,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
             }] } });
 
 class EmojiModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: EmojiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: EmojiModule, imports: [EmojiComponent], exports: [EmojiComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: EmojiModule, imports: [EmojiComponent] });
 }
-EmojiModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: EmojiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-EmojiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: EmojiModule, declarations: [EmojiComponent], imports: [CommonModule], exports: [EmojiComponent] });
-EmojiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: EmojiModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: EmojiModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: EmojiModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
+                    imports: [EmojiComponent],
                     exports: [EmojiComponent],
-                    declarations: [EmojiComponent],
                 }]
         }] });