@ctrl/ngx-emoji-mart 8.2.0 → 9.0.0

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

@@ -1,19 +1,20 @@
+import * as i2 from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, PLATFORM_ID, Injectable, Inject, ViewChild, ViewChildren, NgModule } from '@angular/core';
-import * as i2 from '@angular/common';
-import { isPlatformBrowser, CommonModule } from '@angular/common';
-import { Subject } from 'rxjs';
 import * as i1 from '@ctrl/ngx-emoji-mart/ngx-emoji';
-import { categories as categories$1, EmojiModule } from '@ctrl/ngx-emoji-mart/ngx-emoji';
+import { EmojiComponent, categories as categories$1 } from '@ctrl/ngx-emoji-mart/ngx-emoji';
+import { Subject } from 'rxjs';
 import * as i2$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 
 class AnchorsComponent {
-    constructor() {
-        this.categories = [];
-        this.icons = {};
-        this.anchorClick = new EventEmitter();
-    }
+    categories = [];
+    color;
+    selected;
+    i18n;
+    icons = {};
+    anchorClick = new EventEmitter();
     trackByFn(idx, cat) {
         return cat.id;
     }
@@ -23,56 +24,70 @@ class AnchorsComponent {
             index,
         });
     }
-}
-AnchorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: AnchorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AnchorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: AnchorsComponent, selector: "emoji-mart-anchors", inputs: { categories: "categories", color: "color", selected: "selected", i18n: "i18n", icons: "icons" }, outputs: { anchorClick: "anchorClick" }, ngImport: i0, template: `
-  <div class="emoji-mart-anchors">
-    <ng-template ngFor let-category [ngForOf]="categories" let-idx="index" [ngForTrackBy]="trackByFn">
-      <span
-        *ngIf="category.anchor !== false"
-        [attr.title]="i18n.categories[category.id]"
-        (click)="this.handleClick($event, idx)"
-        class="emoji-mart-anchor"
-        [class.emoji-mart-anchor-selected]="category.name === selected"
-        [style.color]="category.name === selected ? color : null"
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AnchorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AnchorsComponent, isStandalone: true, selector: "emoji-mart-anchors", inputs: { categories: "categories", color: "color", selected: "selected", i18n: "i18n", icons: "icons" }, outputs: { anchorClick: "anchorClick" }, ngImport: i0, template: `
+    <div class="emoji-mart-anchors">
+      <ng-template
+        ngFor
+        let-category
+        [ngForOf]="categories"
+        let-idx="index"
+        [ngForTrackBy]="trackByFn"
       >
-        <div>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-            <path [attr.d]="icons[category.id]" />
-          </svg>
-        </div>
-        <span class="emoji-mart-anchor-bar" [style.background-color]="color"></span>
-      </span>
-    </ng-template>
-  </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: AnchorsComponent, decorators: [{
+        <span
+          *ngIf="category.anchor !== false"
+          [attr.title]="i18n.categories[category.id]"
+          (click)="this.handleClick($event, idx)"
+          class="emoji-mart-anchor"
+          [class.emoji-mart-anchor-selected]="category.name === selected"
+          [style.color]="category.name === selected ? color : null"
+        >
+          <div>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+              <path [attr.d]="icons[category.id]" />
+            </svg>
+          </div>
+          <span class="emoji-mart-anchor-bar" [style.background-color]="color"></span>
+        </span>
+      </ng-template>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AnchorsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'emoji-mart-anchors',
                     template: `
-  <div class="emoji-mart-anchors">
-    <ng-template ngFor let-category [ngForOf]="categories" let-idx="index" [ngForTrackBy]="trackByFn">
-      <span
-        *ngIf="category.anchor !== false"
-        [attr.title]="i18n.categories[category.id]"
-        (click)="this.handleClick($event, idx)"
-        class="emoji-mart-anchor"
-        [class.emoji-mart-anchor-selected]="category.name === selected"
-        [style.color]="category.name === selected ? color : null"
+    <div class="emoji-mart-anchors">
+      <ng-template
+        ngFor
+        let-category
+        [ngForOf]="categories"
+        let-idx="index"
+        [ngForTrackBy]="trackByFn"
       >
-        <div>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-            <path [attr.d]="icons[category.id]" />
-          </svg>
-        </div>
-        <span class="emoji-mart-anchor-bar" [style.background-color]="color"></span>
-      </span>
-    </ng-template>
-  </div>
+        <span
+          *ngIf="category.anchor !== false"
+          [attr.title]="i18n.categories[category.id]"
+          (click)="this.handleClick($event, idx)"
+          class="emoji-mart-anchor"
+          [class.emoji-mart-anchor-selected]="category.name === selected"
+          [style.color]="category.name === selected ? color : null"
+        >
+          <div>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+              <path [attr.d]="icons[category.id]" />
+            </svg>
+          </div>
+          <span class="emoji-mart-anchor-bar" [style.background-color]="color"></span>
+        </span>
+      </ng-template>
+    </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     preserveWhitespaces: false,
+                    standalone: true,
+                    imports: [CommonModule],
                 }]
         }], propDecorators: { categories: [{
                 type: Input
@@ -89,30 +104,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
             }] } });
 
 class EmojiFrequentlyService {
+    platformId;
+    NAMESPACE = 'emoji-mart';
+    frequently = null;
+    defaults = {};
+    initialized = false;
+    DEFAULTS = [
+        '+1',
+        'grinning',
+        'kissing_heart',
+        'heart_eyes',
+        'laughing',
+        'stuck_out_tongue_winking_eye',
+        'sweat_smile',
+        'joy',
+        'scream',
+        'disappointed',
+        'unamused',
+        'weary',
+        'sob',
+        'sunglasses',
+        'heart',
+        'poop',
+    ];
     constructor(platformId) {
         this.platformId = platformId;
-        this.NAMESPACE = 'emoji-mart';
-        this.frequently = null;
-        this.defaults = {};
-        this.initialized = false;
-        this.DEFAULTS = [
-            '+1',
-            'grinning',
-            'kissing_heart',
-            'heart_eyes',
-            'laughing',
-            'stuck_out_tongue_winking_eye',
-            'sweat_smile',
-            'joy',
-            'scream',
-            'disappointed',
-            'unamused',
-            'weary',
-            'sob',
-            'sunglasses',
-            'heart',
-            'poop',
-        ];
     }
     init() {
         this.frequently = JSON.parse((isPlatformBrowser(this.platformId) &&
@@ -162,10 +178,10 @@ class EmojiFrequentlyService {
         }
         return sliced;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: EmojiFrequentlyService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: EmojiFrequentlyService, providedIn: 'root' });
 }
-EmojiFrequentlyService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: EmojiFrequentlyService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
-EmojiFrequentlyService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: EmojiFrequentlyService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: EmojiFrequentlyService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: EmojiFrequentlyService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
@@ -174,37 +190,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                 }] }]; } });
 
 class CategoryComponent {
+    ref;
+    emojiService;
+    frequently;
+    emojis = null;
+    hasStickyPosition = true;
+    name = '';
+    perLine = 9;
+    totalFrequentLines = 4;
+    recent = [];
+    custom = [];
+    i18n;
+    id;
+    hideObsolete = true;
+    notFoundEmoji;
+    virtualize = false;
+    virtualizeOffset = 0;
+    emojiIsNative;
+    emojiSkin;
+    emojiSize;
+    emojiSet;
+    emojiSheetSize;
+    emojiForceSize;
+    emojiTooltip;
+    emojiBackgroundImageFn;
+    emojiImageUrlFn;
+    emojiUseButton;
+    emojiClick = new EventEmitter();
+    /**
+     * Note: the suffix is added explicitly so we know the event is dispatched outside of the Angular zone.
+     */
+    emojiOverOutsideAngular = new EventEmitter();
+    emojiLeaveOutsideAngular = new EventEmitter();
+    container;
+    label;
+    containerStyles = {};
+    emojisToDisplay = [];
+    filteredEmojisSubject = new Subject();
+    filteredEmojis$ = this.filteredEmojisSubject.asObservable();
+    labelStyles = {};
+    labelSpanStyles = {};
+    margin = 0;
+    minMargin = 0;
+    maxMargin = 0;
+    top = 0;
+    rows = 0;
     constructor(ref, emojiService, frequently) {
         this.ref = ref;
         this.emojiService = emojiService;
         this.frequently = frequently;
-        this.emojis = null;
-        this.hasStickyPosition = true;
-        this.name = '';
-        this.perLine = 9;
-        this.totalFrequentLines = 4;
-        this.recent = [];
-        this.custom = [];
-        this.hideObsolete = true;
-        this.virtualize = false;
-        this.virtualizeOffset = 0;
-        this.emojiClick = new EventEmitter();
-        /**
-         * Note: the suffix is added explicitly so we know the event is dispatched outside of the Angular zone.
-         */
-        this.emojiOverOutsideAngular = new EventEmitter();
-        this.emojiLeaveOutsideAngular = new EventEmitter();
-        this.containerStyles = {};
-        this.emojisToDisplay = [];
-        this.filteredEmojisSubject = new Subject();
-        this.filteredEmojis$ = this.filteredEmojisSubject.asObservable();
-        this.labelStyles = {};
-        this.labelSpanStyles = {};
-        this.margin = 0;
-        this.minMargin = 0;
-        this.maxMargin = 0;
-        this.top = 0;
-        this.rows = 0;
     }
     ngOnInit() {
         this.updateRecentEmojis();
@@ -322,9 +356,8 @@ class CategoryComponent {
         }
         return newEmojis;
     }
-}
-CategoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: CategoryComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.EmojiService }, { token: EmojiFrequentlyService }], target: i0.ɵɵFactoryTarget.Component });
-CategoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: CategoryComponent, selector: "emoji-category", inputs: { emojis: "emojis", hasStickyPosition: "hasStickyPosition", name: "name", perLine: "perLine", totalFrequentLines: "totalFrequentLines", recent: "recent", custom: "custom", i18n: "i18n", id: "id", hideObsolete: "hideObsolete", notFoundEmoji: "notFoundEmoji", virtualize: "virtualize", virtualizeOffset: "virtualizeOffset", emojiIsNative: "emojiIsNative", emojiSkin: "emojiSkin", emojiSize: "emojiSize", emojiSet: "emojiSet", emojiSheetSize: "emojiSheetSize", emojiForceSize: "emojiForceSize", emojiTooltip: "emojiTooltip", emojiBackgroundImageFn: "emojiBackgroundImageFn", emojiImageUrlFn: "emojiImageUrlFn", emojiUseButton: "emojiUseButton" }, outputs: { emojiClick: "emojiClick", emojiOverOutsideAngular: "emojiOverOutsideAngular", emojiLeaveOutsideAngular: "emojiLeaveOutsideAngular" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "label", first: true, predicate: ["label"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CategoryComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.EmojiService }, { token: EmojiFrequentlyService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: CategoryComponent, isStandalone: true, selector: "emoji-category", inputs: { emojis: "emojis", hasStickyPosition: "hasStickyPosition", name: "name", perLine: "perLine", totalFrequentLines: "totalFrequentLines", recent: "recent", custom: "custom", i18n: "i18n", id: "id", hideObsolete: "hideObsolete", notFoundEmoji: "notFoundEmoji", virtualize: "virtualize", virtualizeOffset: "virtualizeOffset", emojiIsNative: "emojiIsNative", emojiSkin: "emojiSkin", emojiSize: "emojiSize", emojiSet: "emojiSet", emojiSheetSize: "emojiSheetSize", emojiForceSize: "emojiForceSize", emojiTooltip: "emojiTooltip", emojiBackgroundImageFn: "emojiBackgroundImageFn", emojiImageUrlFn: "emojiImageUrlFn", emojiUseButton: "emojiUseButton" }, outputs: { emojiClick: "emojiClick", emojiOverOutsideAngular: "emojiOverOutsideAngular", emojiLeaveOutsideAngular: "emojiLeaveOutsideAngular" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "label", first: true, predicate: ["label"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <section
       #container
       class="emoji-mart-category"
@@ -404,8 +437,9 @@ CategoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
         (emojiClick)="emojiClick.emit($event)"
       ></ngx-emoji>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.EmojiComponent, selector: "ngx-emoji", inputs: ["skin", "set", "sheetSize", "isNative", "forceSize", "tooltip", "size", "emoji", "fallback", "hideObsolete", "sheetRows", "sheetColumns", "useButton", "backgroundImageFn", "imageUrlFn"], outputs: ["emojiClick", "emojiOver", "emojiOverOutsideAngular", "emojiLeave", "emojiLeaveOutsideAngular"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: CategoryComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "component", type: EmojiComponent, selector: "ngx-emoji", inputs: ["skin", "set", "sheetSize", "isNative", "forceSize", "tooltip", "size", "emoji", "fallback", "hideObsolete", "sheetRows", "sheetColumns", "useButton", "backgroundImageFn", "imageUrlFn"], outputs: ["emojiClick", "emojiOver", "emojiOverOutsideAngular", "emojiLeave", "emojiLeaveOutsideAngular"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CategoryComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'emoji-category',
@@ -492,6 +526,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     preserveWhitespaces: false,
+                    standalone: true,
+                    imports: [CommonModule, EmojiComponent],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.EmojiService }, { type: EmojiFrequentlyService }]; }, propDecorators: { emojis: [{
                 type: Input
@@ -584,13 +620,14 @@ function measureScrollbar() {
 }
 
 class EmojiSearch {
+    emojiService;
+    originalPool = {};
+    index = {};
+    emojisList = {};
+    emoticonsList = {};
+    emojiSearch = {};
     constructor(emojiService) {
         this.emojiService = emojiService;
-        this.originalPool = {};
-        this.index = {};
-        this.emojisList = {};
-        this.emoticonsList = {};
-        this.emojiSearch = {};
         for (const emojiData of this.emojiService.emojis) {
             const { shortNames, emoticons } = emojiData;
             const id = shortNames[0];
@@ -657,7 +694,6 @@ class EmojiSearch {
                 let aPool = pool;
                 let aIndex = this.index;
                 let length = 0;
-                // eslint-disable-next-line @typescript-eslint/prefer-for-of
                 for (let charIndex = 0; charIndex < v.length; charIndex++) {
                     const char = v[charIndex];
                     length++;
@@ -747,20 +783,21 @@ class EmojiSearch {
         addToSearch(emoticons, false);
         return search.join(',');
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: EmojiSearch, deps: [{ token: i1.EmojiService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: EmojiSearch, providedIn: 'root' });
 }
-EmojiSearch.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: EmojiSearch, deps: [{ token: i1.EmojiService }], target: i0.ɵɵFactoryTarget.Injectable });
-EmojiSearch.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: EmojiSearch, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: EmojiSearch, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: EmojiSearch, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i1.EmojiService }]; } });
 
 class SkinComponent {
-    constructor() {
-        this.changeSkin = new EventEmitter();
-        this.opened = false;
-        this.skinTones = [1, 2, 3, 4, 5, 6];
-    }
+    /** currently selected skin */
+    skin;
+    i18n;
+    changeSkin = new EventEmitter();
+    opened = false;
+    skinTones = [1, 2, 3, 4, 5, 6];
     toggleOpen() {
         this.opened = !this.opened;
     }
@@ -789,13 +826,9 @@ class SkinComponent {
             this.changeSkin.emit(skin);
         }
     }
-}
-SkinComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SkinComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkinComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: SkinComponent, selector: "emoji-skins", inputs: { skin: "skin", i18n: "i18n" }, outputs: { changeSkin: "changeSkin" }, ngImport: i0, template: `
-    <section
-      class="emoji-mart-skin-swatches"
-      [class.opened]="opened"
-    >
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SkinComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SkinComponent, isStandalone: true, selector: "emoji-skins", inputs: { skin: "skin", i18n: "i18n" }, outputs: { changeSkin: "changeSkin" }, ngImport: i0, template: `
+    <section class="emoji-mart-skin-swatches" [class.opened]="opened">
       <span
         *ngFor="let skinTone of skinTones"
         class="emoji-mart-skin-swatch"
@@ -817,16 +850,14 @@ SkinComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
         ></span>
       </span>
     </section>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SkinComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SkinComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'emoji-skins',
                     template: `
-    <section
-      class="emoji-mart-skin-swatches"
-      [class.opened]="opened"
-    >
+    <section class="emoji-mart-skin-swatches" [class.opened]="opened">
       <span
         *ngFor="let skinTone of skinTones"
         class="emoji-mart-skin-swatch"
@@ -851,6 +882,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     preserveWhitespaces: false,
+                    standalone: true,
+                    imports: [CommonModule],
                 }]
         }], propDecorators: { skin: [{
                 type: Input
@@ -861,11 +894,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
             }] } });
 
 class PreviewComponent {
+    ref;
+    emojiService;
+    title;
+    emoji;
+    idleEmoji;
+    i18n;
+    emojiIsNative;
+    emojiSkin;
+    emojiSize;
+    emojiSet;
+    emojiSheetSize;
+    emojiBackgroundImageFn;
+    emojiImageUrlFn;
+    skinChange = new EventEmitter();
+    emojiData = {};
+    listedEmoticons;
     constructor(ref, emojiService) {
         this.ref = ref;
         this.emojiService = emojiService;
-        this.skinChange = new EventEmitter();
-        this.emojiData = {};
     }
     ngOnChanges() {
         if (!this.emoji) {
@@ -885,9 +932,8 @@ class PreviewComponent {
         this.listedEmoticons = listedEmoticons;
         this.ref?.detectChanges();
     }
-}
-PreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: PreviewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.EmojiService }], target: i0.ɵɵFactoryTarget.Component });
-PreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: PreviewComponent, selector: "emoji-preview", inputs: { title: "title", emoji: "emoji", idleEmoji: "idleEmoji", i18n: "i18n", emojiIsNative: "emojiIsNative", emojiSkin: "emojiSkin", emojiSize: "emojiSize", emojiSet: "emojiSet", emojiSheetSize: "emojiSheetSize", emojiBackgroundImageFn: "emojiBackgroundImageFn", emojiImageUrlFn: "emojiImageUrlFn" }, outputs: { skinChange: "skinChange" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: PreviewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.EmojiService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: PreviewComponent, isStandalone: true, selector: "emoji-preview", inputs: { title: "title", emoji: "emoji", idleEmoji: "idleEmoji", i18n: "i18n", emojiIsNative: "emojiIsNative", emojiSkin: "emojiSkin", emojiSize: "emojiSize", emojiSet: "emojiSet", emojiSheetSize: "emojiSheetSize", emojiBackgroundImageFn: "emojiBackgroundImageFn", emojiImageUrlFn: "emojiImageUrlFn" }, outputs: { skinChange: "skinChange" }, usesOnChanges: true, ngImport: i0, template: `
     <div class="emoji-mart-preview" *ngIf="emoji && emojiData">
       <div class="emoji-mart-preview-emoji">
         <ngx-emoji
@@ -947,8 +993,9 @@ PreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
         ></emoji-skins>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.EmojiComponent, selector: "ngx-emoji", inputs: ["skin", "set", "sheetSize", "isNative", "forceSize", "tooltip", "size", "emoji", "fallback", "hideObsolete", "sheetRows", "sheetColumns", "useButton", "backgroundImageFn", "imageUrlFn"], outputs: ["emojiClick", "emojiOver", "emojiOverOutsideAngular", "emojiLeave", "emojiLeaveOutsideAngular"] }, { kind: "component", type: SkinComponent, selector: "emoji-skins", inputs: ["skin", "i18n"], outputs: ["changeSkin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: PreviewComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EmojiComponent, selector: "ngx-emoji", inputs: ["skin", "set", "sheetSize", "isNative", "forceSize", "tooltip", "size", "emoji", "fallback", "hideObsolete", "sheetRows", "sheetColumns", "useButton", "backgroundImageFn", "imageUrlFn"], outputs: ["emojiClick", "emojiOver", "emojiOverOutsideAngular", "emojiLeave", "emojiLeaveOutsideAngular"] }, { kind: "component", type: SkinComponent, selector: "emoji-skins", inputs: ["skin", "i18n"], outputs: ["changeSkin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: PreviewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'emoji-preview',
@@ -1015,6 +1062,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     preserveWhitespaces: false,
+                    standalone: true,
+                    imports: [CommonModule, EmojiComponent, SkinComponent],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.EmojiService }]; }, propDecorators: { title: [{
                 type: Input
@@ -1044,18 +1093,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 
 let id = 0;
 class SearchComponent {
+    emojiSearch;
+    maxResults = 75;
+    autoFocus = false;
+    i18n;
+    include = [];
+    exclude = [];
+    custom = [];
+    icons;
+    emojisToShowFilter;
+    searchResults = new EventEmitter();
+    enterKey = new EventEmitter();
+    inputRef;
+    isSearching = false;
+    icon;
+    query = '';
+    inputId = `emoji-mart-search-${++id}`;
     constructor(emojiSearch) {
         this.emojiSearch = emojiSearch;
-        this.maxResults = 75;
-        this.autoFocus = false;
-        this.include = [];
-        this.exclude = [];
-        this.custom = [];
-        this.searchResults = new EventEmitter();
-        this.enterKey = new EventEmitter();
-        this.isSearching = false;
-        this.query = '';
-        this.inputId = `emoji-mart-search-${++id}`;
     }
     ngOnInit() {
         this.icon = this.icons.search;
@@ -1092,9 +1147,8 @@ class SearchComponent {
     handleChange() {
         this.handleSearch(this.query);
     }
-}
-SearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SearchComponent, deps: [{ token: EmojiSearch }], target: i0.ɵɵFactoryTarget.Component });
-SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: SearchComponent, selector: "emoji-search", inputs: { maxResults: "maxResults", autoFocus: "autoFocus", i18n: "i18n", include: "include", exclude: "exclude", custom: "custom", icons: "icons", emojisToShowFilter: "emojisToShowFilter" }, outputs: { searchResults: "searchResults", enterKey: "enterKey" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, static: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SearchComponent, deps: [{ token: EmojiSearch }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SearchComponent, isStandalone: true, selector: "emoji-search", inputs: { maxResults: "maxResults", autoFocus: "autoFocus", i18n: "i18n", include: "include", exclude: "exclude", custom: "custom", icons: "icons", emojisToShowFilter: "emojisToShowFilter" }, outputs: { searchResults: "searchResults", enterKey: "enterKey" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, static: true }], ngImport: i0, template: `
     <div class="emoji-mart-search">
       <input
         [id]="inputId"
@@ -1132,8 +1186,9 @@ SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
         </svg>
       </button>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SearchComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SearchComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'emoji-search',
@@ -1177,6 +1232,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
     </div>
   `,
                     preserveWhitespaces: false,
+                    standalone: true,
+                    imports: [FormsModule],
                 }]
         }], ctorParameters: function () { return [{ type: EmojiSearch }]; }, propDecorators: { maxResults: [{
                 type: Input
@@ -1249,73 +1306,91 @@ const I18N = {
     },
 };
 class PickerComponent {
+    ngZone;
+    renderer;
+    ref;
+    frequently;
+    platformId;
+    perLine = 9;
+    totalFrequentLines = 4;
+    i18n = {};
+    style = {};
+    title = 'Emoji Mart™';
+    emoji = 'department_store';
+    darkMode = !!(typeof matchMedia === 'function' && matchMedia('(prefers-color-scheme: dark)').matches);
+    color = '#ae65c5';
+    hideObsolete = true;
+    /** all categories shown */
+    categories = [];
+    /** used to temporarily draw categories */
+    activeCategories = [];
+    set = 'apple';
+    skin = 1;
+    /** Renders the native unicode emoji */
+    isNative = false;
+    emojiSize = 24;
+    sheetSize = 64;
+    emojisToShowFilter;
+    showPreview = true;
+    emojiTooltip = false;
+    autoFocus = false;
+    custom = [];
+    hideRecent = true;
+    imageUrlFn;
+    include;
+    exclude;
+    notFoundEmoji = 'sleuth_or_spy';
+    categoriesIcons = categories;
+    searchIcons = search;
+    useButton = false;
+    enableFrequentEmojiSort = false;
+    enableSearch = true;
+    showSingleCategory = false;
+    virtualize = false;
+    virtualizeOffset = 0;
+    recent;
+    emojiClick = new EventEmitter();
+    emojiSelect = new EventEmitter();
+    skinChange = new EventEmitter();
+    scrollRef;
+    previewRef;
+    searchRef;
+    categoryRefs;
+    scrollHeight = 0;
+    clientHeight = 0;
+    clientWidth = 0;
+    selected;
+    nextScroll;
+    scrollTop;
+    firstRender = true;
+    previewEmoji = null;
+    animationFrameRequestId = null;
+    NAMESPACE = 'emoji-mart';
+    measureScrollbar = 0;
+    RECENT_CATEGORY = {
+        id: 'recent',
+        name: 'Recent',
+        emojis: null,
+    };
+    SEARCH_CATEGORY = {
+        id: 'search',
+        name: 'Search',
+        emojis: null,
+        anchor: false,
+    };
+    CUSTOM_CATEGORY = {
+        id: 'custom',
+        name: 'Custom',
+        emojis: [],
+    };
+    scrollListener;
+    backgroundImageFn = (set, sheetSize) => `https://unpkg.com/emoji-datasource-${this.set}@6.0.1/img/${this.set}/sheets-256/${this.sheetSize}.png`;
     constructor(ngZone, renderer, ref, frequently, platformId) {
         this.ngZone = ngZone;
         this.renderer = renderer;
         this.ref = ref;
         this.frequently = frequently;
         this.platformId = platformId;
-        this.perLine = 9;
-        this.totalFrequentLines = 4;
-        this.i18n = {};
-        this.style = {};
-        this.title = 'Emoji Mart™';
-        this.emoji = 'department_store';
-        this.darkMode = !!(typeof matchMedia === 'function' && matchMedia('(prefers-color-scheme: dark)').matches);
-        this.color = '#ae65c5';
-        this.hideObsolete = true;
-        /** all categories shown */
-        this.categories = [];
-        /** used to temporarily draw categories */
-        this.activeCategories = [];
-        this.set = 'apple';
-        this.skin = 1;
-        /** Renders the native unicode emoji */
-        this.isNative = false;
-        this.emojiSize = 24;
-        this.sheetSize = 64;
-        this.showPreview = true;
-        this.emojiTooltip = false;
-        this.autoFocus = false;
-        this.custom = [];
-        this.hideRecent = true;
-        this.notFoundEmoji = 'sleuth_or_spy';
-        this.categoriesIcons = categories;
-        this.searchIcons = search;
-        this.useButton = false;
-        this.enableFrequentEmojiSort = false;
-        this.enableSearch = true;
-        this.showSingleCategory = false;
-        this.virtualize = false;
-        this.virtualizeOffset = 0;
-        this.emojiClick = new EventEmitter();
-        this.emojiSelect = new EventEmitter();
-        this.skinChange = new EventEmitter();
-        this.scrollHeight = 0;
-        this.clientHeight = 0;
-        this.clientWidth = 0;
-        this.firstRender = true;
-        this.previewEmoji = null;
-        this.animationFrameRequestId = null;
-        this.NAMESPACE = 'emoji-mart';
-        this.measureScrollbar = 0;
-        this.RECENT_CATEGORY = {
-            id: 'recent',
-            name: 'Recent',
-            emojis: null,
-        };
-        this.SEARCH_CATEGORY = {
-            id: 'search',
-            name: 'Search',
-            emojis: null,
-            anchor: false,
-        };
-        this.CUSTOM_CATEGORY = {
-            id: 'custom',
-            name: 'Custom',
-            emojis: [],
-        };
-        this.backgroundImageFn = (set, sheetSize) => `https://unpkg.com/emoji-datasource-${this.set}@6.0.1/img/${this.set}/sheets-256/${this.sheetSize}.png`;
     }
     ngOnInit() {
         // measure scroll
@@ -1354,7 +1429,6 @@ class PickerComponent {
             if (this.emojisToShowFilter) {
                 const newEmojis = [];
                 const { emojis } = category;
-                // eslint-disable-next-line @typescript-eslint/prefer-for-of
                 for (let emojiIndex = 0; emojiIndex < emojis.length; emojiIndex++) {
                     const emoji = emojis[emojiIndex];
                     if (this.emojisToShowFilter(emoji)) {
@@ -1405,7 +1479,6 @@ class PickerComponent {
             // the OnPush component we can run change detection locally starting from this
             // component and going down to the children.
             this.ref.detectChanges();
-            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
             isPlatformBrowser(this.platformId) &&
                 this.ngZone.runOutsideAngular(() => {
                     // The `updateCategoriesSize` doesn't change properties that are used
@@ -1613,12 +1686,12 @@ class PickerComponent {
             this.animationFrameRequestId = null;
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: PickerComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: EmojiFrequentlyService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: PickerComponent, isStandalone: true, selector: "emoji-mart", inputs: { perLine: "perLine", totalFrequentLines: "totalFrequentLines", i18n: "i18n", style: "style", title: "title", emoji: "emoji", darkMode: "darkMode", color: "color", hideObsolete: "hideObsolete", categories: "categories", activeCategories: "activeCategories", set: "set", skin: "skin", isNative: "isNative", emojiSize: "emojiSize", sheetSize: "sheetSize", emojisToShowFilter: "emojisToShowFilter", showPreview: "showPreview", emojiTooltip: "emojiTooltip", autoFocus: "autoFocus", custom: "custom", hideRecent: "hideRecent", imageUrlFn: "imageUrlFn", include: "include", exclude: "exclude", notFoundEmoji: "notFoundEmoji", categoriesIcons: "categoriesIcons", searchIcons: "searchIcons", useButton: "useButton", enableFrequentEmojiSort: "enableFrequentEmojiSort", enableSearch: "enableSearch", showSingleCategory: "showSingleCategory", virtualize: "virtualize", virtualizeOffset: "virtualizeOffset", recent: "recent", backgroundImageFn: "backgroundImageFn" }, outputs: { emojiClick: "emojiClick", emojiSelect: "emojiSelect", skinChange: "skinChange" }, viewQueries: [{ propertyName: "scrollRef", first: true, predicate: ["scrollRef"], descendants: true, static: true }, { propertyName: "previewRef", first: true, predicate: PreviewComponent, descendants: true }, { propertyName: "searchRef", first: true, predicate: SearchComponent, descendants: true }, { propertyName: "categoryRefs", predicate: CategoryComponent, descendants: true }], ngImport: i0, template: "<section\n  class=\"emoji-mart {{ darkMode ? 'emoji-mart-dark' : '' }}\"\n  [style.width]=\"getWidth()\"\n  [ngStyle]=\"style\"\n>\n  <div class=\"emoji-mart-bar\">\n    <emoji-mart-anchors\n      [categories]=\"categories\"\n      (anchorClick)=\"handleAnchorClick($event)\"\n      [color]=\"color\"\n      [selected]=\"selected\"\n      [i18n]=\"i18n\"\n      [icons]=\"categoriesIcons\"\n    ></emoji-mart-anchors>\n  </div>\n  <emoji-search\n    *ngIf=\"enableSearch\"\n    [i18n]=\"i18n\"\n    (searchResults)=\"handleSearch($event)\"\n    (enterKey)=\"handleEnterKey($event)\"\n    [include]=\"include\"\n    [exclude]=\"exclude\"\n    [custom]=\"custom\"\n    [autoFocus]=\"autoFocus\"\n    [icons]=\"searchIcons\"\n    [emojisToShowFilter]=\"emojisToShowFilter\"\n  ></emoji-search>\n  <section #scrollRef class=\"emoji-mart-scroll\" [attr.aria-label]=\"i18n.emojilist\">\n    <emoji-category\n      *ngFor=\"let category of activeCategories; let idx = index; trackBy: categoryTrack\"\n      [id]=\"category.id\"\n      [name]=\"category.name\"\n      [emojis]=\"category.emojis\"\n      [perLine]=\"perLine\"\n      [totalFrequentLines]=\"totalFrequentLines\"\n      [hasStickyPosition]=\"isNative\"\n      [i18n]=\"i18n\"\n      [hideObsolete]=\"hideObsolete\"\n      [notFoundEmoji]=\"notFoundEmoji\"\n      [custom]=\"category.id === RECENT_CATEGORY.id ? CUSTOM_CATEGORY.emojis : undefined\"\n      [recent]=\"category.id === RECENT_CATEGORY.id ? recent : undefined\"\n      [virtualize]=\"virtualize\"\n      [virtualizeOffset]=\"virtualizeOffset\"\n      [emojiIsNative]=\"isNative\"\n      [emojiSkin]=\"skin\"\n      [emojiSize]=\"emojiSize\"\n      [emojiSet]=\"set\"\n      [emojiSheetSize]=\"sheetSize\"\n      [emojiForceSize]=\"isNative\"\n      [emojiTooltip]=\"emojiTooltip\"\n      [emojiBackgroundImageFn]=\"backgroundImageFn\"\n      [emojiImageUrlFn]=\"imageUrlFn\"\n      [emojiUseButton]=\"useButton\"\n      (emojiOverOutsideAngular)=\"handleEmojiOver($event)\"\n      (emojiLeaveOutsideAngular)=\"handleEmojiLeave()\"\n      (emojiClick)=\"handleEmojiClick($event)\"\n    ></emoji-category>\n  </section>\n  <div class=\"emoji-mart-bar\" *ngIf=\"showPreview\">\n    <emoji-preview\n      [attr.title]=\"title\"\n      [emoji]=\"previewEmoji\"\n      [idleEmoji]=\"emoji\"\n      [emojiIsNative]=\"isNative\"\n      [emojiSize]=\"38\"\n      [emojiSkin]=\"skin\"\n      [emojiSet]=\"set\"\n      [i18n]=\"i18n\"\n      [emojiSheetSize]=\"sheetSize\"\n      [emojiBackgroundImageFn]=\"backgroundImageFn\"\n      [emojiImageUrlFn]=\"imageUrlFn\"\n      (skinChange)=\"handleSkinChange($event)\"\n    ></emoji-preview>\n  </div>\n</section>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AnchorsComponent, selector: "emoji-mart-anchors", inputs: ["categories", "color", "selected", "i18n", "icons"], outputs: ["anchorClick"] }, { kind: "component", type: SearchComponent, selector: "emoji-search", inputs: ["maxResults", "autoFocus", "i18n", "include", "exclude", "custom", "icons", "emojisToShowFilter"], outputs: ["searchResults", "enterKey"] }, { kind: "component", type: PreviewComponent, selector: "emoji-preview", inputs: ["title", "emoji", "idleEmoji", "i18n", "emojiIsNative", "emojiSkin", "emojiSize", "emojiSet", "emojiSheetSize", "emojiBackgroundImageFn", "emojiImageUrlFn"], outputs: ["skinChange"] }, { kind: "component", type: CategoryComponent, selector: "emoji-category", inputs: ["emojis", "hasStickyPosition", "name", "perLine", "totalFrequentLines", "recent", "custom", "i18n", "id", "hideObsolete", "notFoundEmoji", "virtualize", "virtualizeOffset", "emojiIsNative", "emojiSkin", "emojiSize", "emojiSet", "emojiSheetSize", "emojiForceSize", "emojiTooltip", "emojiBackgroundImageFn", "emojiImageUrlFn", "emojiUseButton"], outputs: ["emojiClick", "emojiOverOutsideAngular", "emojiLeaveOutsideAngular"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-PickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: PickerComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: EmojiFrequentlyService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
-PickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: PickerComponent, selector: "emoji-mart", inputs: { perLine: "perLine", totalFrequentLines: "totalFrequentLines", i18n: "i18n", style: "style", title: "title", emoji: "emoji", darkMode: "darkMode", color: "color", hideObsolete: "hideObsolete", categories: "categories", activeCategories: "activeCategories", set: "set", skin: "skin", isNative: "isNative", emojiSize: "emojiSize", sheetSize: "sheetSize", emojisToShowFilter: "emojisToShowFilter", showPreview: "showPreview", emojiTooltip: "emojiTooltip", autoFocus: "autoFocus", custom: "custom", hideRecent: "hideRecent", imageUrlFn: "imageUrlFn", include: "include", exclude: "exclude", notFoundEmoji: "notFoundEmoji", categoriesIcons: "categoriesIcons", searchIcons: "searchIcons", useButton: "useButton", enableFrequentEmojiSort: "enableFrequentEmojiSort", enableSearch: "enableSearch", showSingleCategory: "showSingleCategory", virtualize: "virtualize", virtualizeOffset: "virtualizeOffset", recent: "recent", backgroundImageFn: "backgroundImageFn" }, outputs: { emojiClick: "emojiClick", emojiSelect: "emojiSelect", skinChange: "skinChange" }, viewQueries: [{ propertyName: "scrollRef", first: true, predicate: ["scrollRef"], descendants: true, static: true }, { propertyName: "previewRef", first: true, predicate: PreviewComponent, descendants: true }, { propertyName: "searchRef", first: true, predicate: SearchComponent, descendants: true }, { propertyName: "categoryRefs", predicate: CategoryComponent, descendants: true }], ngImport: i0, template: "<section\n  class=\"emoji-mart {{ darkMode ? 'emoji-mart-dark' : '' }}\"\n  [style.width]=\"getWidth()\"\n  [ngStyle]=\"style\"\n>\n  <div class=\"emoji-mart-bar\">\n    <emoji-mart-anchors\n      [categories]=\"categories\"\n      (anchorClick)=\"handleAnchorClick($event)\"\n      [color]=\"color\"\n      [selected]=\"selected\"\n      [i18n]=\"i18n\"\n      [icons]=\"categoriesIcons\"\n    ></emoji-mart-anchors>\n  </div>\n  <emoji-search\n    *ngIf=\"enableSearch\"\n    [i18n]=\"i18n\"\n    (searchResults)=\"handleSearch($event)\"\n    (enterKey)=\"handleEnterKey($event)\"\n    [include]=\"include\"\n    [exclude]=\"exclude\"\n    [custom]=\"custom\"\n    [autoFocus]=\"autoFocus\"\n    [icons]=\"searchIcons\"\n    [emojisToShowFilter]=\"emojisToShowFilter\"\n  ></emoji-search>\n  <section #scrollRef class=\"emoji-mart-scroll\" [attr.aria-label]=\"i18n.emojilist\">\n    <emoji-category\n      *ngFor=\"let category of activeCategories; let idx = index; trackBy: categoryTrack\"\n      [id]=\"category.id\"\n      [name]=\"category.name\"\n      [emojis]=\"category.emojis\"\n      [perLine]=\"perLine\"\n      [totalFrequentLines]=\"totalFrequentLines\"\n      [hasStickyPosition]=\"isNative\"\n      [i18n]=\"i18n\"\n      [hideObsolete]=\"hideObsolete\"\n      [notFoundEmoji]=\"notFoundEmoji\"\n      [custom]=\"category.id === RECENT_CATEGORY.id ? CUSTOM_CATEGORY.emojis : undefined\"\n      [recent]=\"category.id === RECENT_CATEGORY.id ? recent : undefined\"\n      [virtualize]=\"virtualize\"\n      [virtualizeOffset]=\"virtualizeOffset\"\n      [emojiIsNative]=\"isNative\"\n      [emojiSkin]=\"skin\"\n      [emojiSize]=\"emojiSize\"\n      [emojiSet]=\"set\"\n      [emojiSheetSize]=\"sheetSize\"\n      [emojiForceSize]=\"isNative\"\n      [emojiTooltip]=\"emojiTooltip\"\n      [emojiBackgroundImageFn]=\"backgroundImageFn\"\n      [emojiImageUrlFn]=\"imageUrlFn\"\n      [emojiUseButton]=\"useButton\"\n      (emojiOverOutsideAngular)=\"handleEmojiOver($event)\"\n      (emojiLeaveOutsideAngular)=\"handleEmojiLeave()\"\n      (emojiClick)=\"handleEmojiClick($event)\"\n    ></emoji-category>\n  </section>\n  <div class=\"emoji-mart-bar\" *ngIf=\"showPreview\">\n    <emoji-preview\n      [attr.title]=\"title\"\n      [emoji]=\"previewEmoji\"\n      [idleEmoji]=\"emoji\"\n      [emojiIsNative]=\"isNative\"\n      [emojiSize]=\"38\"\n      [emojiSkin]=\"skin\"\n      [emojiSet]=\"set\"\n      [i18n]=\"i18n\"\n      [emojiSheetSize]=\"sheetSize\"\n      [emojiBackgroundImageFn]=\"backgroundImageFn\"\n      [emojiImageUrlFn]=\"imageUrlFn\"\n      (skinChange)=\"handleSkinChange($event)\"\n    ></emoji-preview>\n  </div>\n</section>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AnchorsComponent, selector: "emoji-mart-anchors", inputs: ["categories", "color", "selected", "i18n", "icons"], outputs: ["anchorClick"] }, { kind: "component", type: CategoryComponent, selector: "emoji-category", inputs: ["emojis", "hasStickyPosition", "name", "perLine", "totalFrequentLines", "recent", "custom", "i18n", "id", "hideObsolete", "notFoundEmoji", "virtualize", "virtualizeOffset", "emojiIsNative", "emojiSkin", "emojiSize", "emojiSet", "emojiSheetSize", "emojiForceSize", "emojiTooltip", "emojiBackgroundImageFn", "emojiImageUrlFn", "emojiUseButton"], outputs: ["emojiClick", "emojiOverOutsideAngular", "emojiLeaveOutsideAngular"] }, { kind: "component", type: SearchComponent, selector: "emoji-search", inputs: ["maxResults", "autoFocus", "i18n", "include", "exclude", "custom", "icons", "emojisToShowFilter"], outputs: ["searchResults", "enterKey"] }, { kind: "component", type: PreviewComponent, selector: "emoji-preview", inputs: ["title", "emoji", "idleEmoji", "i18n", "emojiIsNative", "emojiSkin", "emojiSize", "emojiSet", "emojiSheetSize", "emojiBackgroundImageFn", "emojiImageUrlFn"], outputs: ["skinChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: PickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: PickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'emoji-mart', changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, template: "<section\n  class=\"emoji-mart {{ darkMode ? 'emoji-mart-dark' : '' }}\"\n  [style.width]=\"getWidth()\"\n  [ngStyle]=\"style\"\n>\n  <div class=\"emoji-mart-bar\">\n    <emoji-mart-anchors\n      [categories]=\"categories\"\n      (anchorClick)=\"handleAnchorClick($event)\"\n      [color]=\"color\"\n      [selected]=\"selected\"\n      [i18n]=\"i18n\"\n      [icons]=\"categoriesIcons\"\n    ></emoji-mart-anchors>\n  </div>\n  <emoji-search\n    *ngIf=\"enableSearch\"\n    [i18n]=\"i18n\"\n    (searchResults)=\"handleSearch($event)\"\n    (enterKey)=\"handleEnterKey($event)\"\n    [include]=\"include\"\n    [exclude]=\"exclude\"\n    [custom]=\"custom\"\n    [autoFocus]=\"autoFocus\"\n    [icons]=\"searchIcons\"\n    [emojisToShowFilter]=\"emojisToShowFilter\"\n  ></emoji-search>\n  <section #scrollRef class=\"emoji-mart-scroll\" [attr.aria-label]=\"i18n.emojilist\">\n    <emoji-category\n      *ngFor=\"let category of activeCategories; let idx = index; trackBy: categoryTrack\"\n      [id]=\"category.id\"\n      [name]=\"category.name\"\n      [emojis]=\"category.emojis\"\n      [perLine]=\"perLine\"\n      [totalFrequentLines]=\"totalFrequentLines\"\n      [hasStickyPosition]=\"isNative\"\n      [i18n]=\"i18n\"\n      [hideObsolete]=\"hideObsolete\"\n      [notFoundEmoji]=\"notFoundEmoji\"\n      [custom]=\"category.id === RECENT_CATEGORY.id ? CUSTOM_CATEGORY.emojis : undefined\"\n      [recent]=\"category.id === RECENT_CATEGORY.id ? recent : undefined\"\n      [virtualize]=\"virtualize\"\n      [virtualizeOffset]=\"virtualizeOffset\"\n      [emojiIsNative]=\"isNative\"\n      [emojiSkin]=\"skin\"\n      [emojiSize]=\"emojiSize\"\n      [emojiSet]=\"set\"\n      [emojiSheetSize]=\"sheetSize\"\n      [emojiForceSize]=\"isNative\"\n      [emojiTooltip]=\"emojiTooltip\"\n      [emojiBackgroundImageFn]=\"backgroundImageFn\"\n      [emojiImageUrlFn]=\"imageUrlFn\"\n      [emojiUseButton]=\"useButton\"\n      (emojiOverOutsideAngular)=\"handleEmojiOver($event)\"\n      (emojiLeaveOutsideAngular)=\"handleEmojiLeave()\"\n      (emojiClick)=\"handleEmojiClick($event)\"\n    ></emoji-category>\n  </section>\n  <div class=\"emoji-mart-bar\" *ngIf=\"showPreview\">\n    <emoji-preview\n      [attr.title]=\"title\"\n      [emoji]=\"previewEmoji\"\n      [idleEmoji]=\"emoji\"\n      [emojiIsNative]=\"isNative\"\n      [emojiSize]=\"38\"\n      [emojiSkin]=\"skin\"\n      [emojiSet]=\"set\"\n      [i18n]=\"i18n\"\n      [emojiSheetSize]=\"sheetSize\"\n      [emojiBackgroundImageFn]=\"backgroundImageFn\"\n      [emojiImageUrlFn]=\"imageUrlFn\"\n      (skinChange)=\"handleSkinChange($event)\"\n    ></emoji-preview>\n  </div>\n</section>\n" }]
+            args: [{ selector: 'emoji-mart', changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, standalone: true, imports: [CommonModule, AnchorsComponent, SearchComponent, PreviewComponent, CategoryComponent], template: "<section\n  class=\"emoji-mart {{ darkMode ? 'emoji-mart-dark' : '' }}\"\n  [style.width]=\"getWidth()\"\n  [ngStyle]=\"style\"\n>\n  <div class=\"emoji-mart-bar\">\n    <emoji-mart-anchors\n      [categories]=\"categories\"\n      (anchorClick)=\"handleAnchorClick($event)\"\n      [color]=\"color\"\n      [selected]=\"selected\"\n      [i18n]=\"i18n\"\n      [icons]=\"categoriesIcons\"\n    ></emoji-mart-anchors>\n  </div>\n  <emoji-search\n    *ngIf=\"enableSearch\"\n    [i18n]=\"i18n\"\n    (searchResults)=\"handleSearch($event)\"\n    (enterKey)=\"handleEnterKey($event)\"\n    [include]=\"include\"\n    [exclude]=\"exclude\"\n    [custom]=\"custom\"\n    [autoFocus]=\"autoFocus\"\n    [icons]=\"searchIcons\"\n    [emojisToShowFilter]=\"emojisToShowFilter\"\n  ></emoji-search>\n  <section #scrollRef class=\"emoji-mart-scroll\" [attr.aria-label]=\"i18n.emojilist\">\n    <emoji-category\n      *ngFor=\"let category of activeCategories; let idx = index; trackBy: categoryTrack\"\n      [id]=\"category.id\"\n      [name]=\"category.name\"\n      [emojis]=\"category.emojis\"\n      [perLine]=\"perLine\"\n      [totalFrequentLines]=\"totalFrequentLines\"\n      [hasStickyPosition]=\"isNative\"\n      [i18n]=\"i18n\"\n      [hideObsolete]=\"hideObsolete\"\n      [notFoundEmoji]=\"notFoundEmoji\"\n      [custom]=\"category.id === RECENT_CATEGORY.id ? CUSTOM_CATEGORY.emojis : undefined\"\n      [recent]=\"category.id === RECENT_CATEGORY.id ? recent : undefined\"\n      [virtualize]=\"virtualize\"\n      [virtualizeOffset]=\"virtualizeOffset\"\n      [emojiIsNative]=\"isNative\"\n      [emojiSkin]=\"skin\"\n      [emojiSize]=\"emojiSize\"\n      [emojiSet]=\"set\"\n      [emojiSheetSize]=\"sheetSize\"\n      [emojiForceSize]=\"isNative\"\n      [emojiTooltip]=\"emojiTooltip\"\n      [emojiBackgroundImageFn]=\"backgroundImageFn\"\n      [emojiImageUrlFn]=\"imageUrlFn\"\n      [emojiUseButton]=\"useButton\"\n      (emojiOverOutsideAngular)=\"handleEmojiOver($event)\"\n      (emojiLeaveOutsideAngular)=\"handleEmojiLeave()\"\n      (emojiClick)=\"handleEmojiClick($event)\"\n    ></emoji-category>\n  </section>\n  <div class=\"emoji-mart-bar\" *ngIf=\"showPreview\">\n    <emoji-preview\n      [attr.title]=\"title\"\n      [emoji]=\"previewEmoji\"\n      [idleEmoji]=\"emoji\"\n      [emojiIsNative]=\"isNative\"\n      [emojiSize]=\"38\"\n      [emojiSkin]=\"skin\"\n      [emojiSet]=\"set\"\n      [i18n]=\"i18n\"\n      [emojiSheetSize]=\"sheetSize\"\n      [emojiBackgroundImageFn]=\"backgroundImageFn\"\n      [emojiImageUrlFn]=\"imageUrlFn\"\n      (skinChange)=\"handleSkinChange($event)\"\n    ></emoji-preview>\n  </div>\n</section>\n" }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: EmojiFrequentlyService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -1714,41 +1787,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                 type: Input
             }] } });
 
+const components = [
+    PickerComponent,
+    AnchorsComponent,
+    CategoryComponent,
+    SearchComponent,
+    PreviewComponent,
+    SkinComponent,
+];
 class PickerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: PickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: PickerModule, imports: [PickerComponent,
+            AnchorsComponent,
+            CategoryComponent,
+            SearchComponent,
+            PreviewComponent,
+            SkinComponent], exports: [PickerComponent,
+            AnchorsComponent,
+            CategoryComponent,
+            SearchComponent,
+            PreviewComponent,
+            SkinComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: PickerModule, imports: [components] });
 }
-PickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: PickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: PickerModule, declarations: [PickerComponent,
-        AnchorsComponent,
-        CategoryComponent,
-        SearchComponent,
-        PreviewComponent,
-        SkinComponent], imports: [CommonModule, FormsModule, EmojiModule], exports: [PickerComponent,
-        AnchorsComponent,
-        CategoryComponent,
-        SearchComponent,
-        PreviewComponent,
-        SkinComponent] });
-PickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: PickerModule, imports: [CommonModule, FormsModule, EmojiModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: PickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: PickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, FormsModule, EmojiModule],
-                    exports: [
-                        PickerComponent,
-                        AnchorsComponent,
-                        CategoryComponent,
-                        SearchComponent,
-                        PreviewComponent,
-                        SkinComponent,
-                    ],
-                    declarations: [
-                        PickerComponent,
-                        AnchorsComponent,
-                        CategoryComponent,
-                        SearchComponent,
-                        PreviewComponent,
-                        SkinComponent,
-                    ],
+                    imports: components,
+                    exports: components,
                 }]
         }] });