@ctrl/ngx-emoji-mart 5.1.2 → 6.1.1

package/fesm2015/{ctrl-ngx-emoji-mart.js → ctrl-ngx-emoji-mart.mjs}

@@ -1,7 +1,11 @@
-import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ɵɵdefineInjectable, ɵɵinject, PLATFORM_ID, Injectable, Inject, ChangeDetectorRef, ViewChild, NgZone, Renderer2, ViewChildren, NgModule } from '@angular/core';
-import { EmojiService, categories as categories$1, EmojiModule } from '@ctrl/ngx-emoji-mart/ngx-emoji';
-import { Subject } from 'rxjs';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, PLATFORM_ID, Injectable, Inject, ViewChild, ViewChildren, NgModule } from '@angular/core';
+import * as i3 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 * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 
 class AnchorsComponent {
@@ -20,10 +24,33 @@ class AnchorsComponent {
         });
     }
 }
-AnchorsComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'emoji-mart-anchors',
-                template: `
+AnchorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AnchorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AnchorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", 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"
+      >
+        <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, directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", 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
@@ -44,18 +71,22 @@ AnchorsComponent.decorators = [
     </ng-template>
   </div>
   `,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                preserveWhitespaces: false
-            },] }
-];
-AnchorsComponent.propDecorators = {
-    categories: [{ type: Input }],
-    color: [{ type: Input }],
-    selected: [{ type: Input }],
-    i18n: [{ type: Input }],
-    icons: [{ type: Input }],
-    anchorClick: [{ type: Output }]
-};
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                }]
+        }], propDecorators: { categories: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], i18n: [{
+                type: Input
+            }], icons: [{
+                type: Input
+            }], anchorClick: [{
+                type: Output
+            }] } });
 
 class EmojiFrequentlyService {
     constructor(platformId) {
@@ -132,19 +163,24 @@ class EmojiFrequentlyService {
         return sliced;
     }
 }
-EmojiFrequentlyService.ɵprov = ɵɵdefineInjectable({ factory: function EmojiFrequentlyService_Factory() { return new EmojiFrequentlyService(ɵɵinject(PLATFORM_ID)); }, token: EmojiFrequentlyService, providedIn: "root" });
-EmojiFrequentlyService.decorators = [
-    { type: Injectable, args: [{ providedIn: 'root' },] }
-];
-EmojiFrequentlyService.ctorParameters = () => [
-    { type: String, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] }
-];
+EmojiFrequentlyService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: EmojiFrequentlyService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+EmojiFrequentlyService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: EmojiFrequentlyService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: EmojiFrequentlyService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [PLATFORM_ID]
+                    }] }];
+    } });
 
 class CategoryComponent {
     constructor(ref, emojiService, frequently) {
         this.ref = ref;
         this.emojiService = emojiService;
         this.frequently = frequently;
+        this.emojis = null;
         this.hasStickyPosition = true;
         this.name = '';
         this.perLine = 9;
@@ -158,6 +194,7 @@ class CategoryComponent {
         this.emojiLeave = new EventEmitter();
         this.emojiClick = new EventEmitter();
         this.containerStyles = {};
+        this.emojisToDisplay = [];
         this.filteredEmojisSubject = new Subject();
         this.filteredEmojis$ = this.filteredEmojisSubject.asObservable();
         this.labelStyles = {};
@@ -169,8 +206,9 @@ class CategoryComponent {
         this.rows = 0;
     }
     ngOnInit() {
-        this.emojis = this.getEmojis();
-        if (!this.emojis) {
+        this.updateRecentEmojis();
+        this.emojisToDisplay = this.filterEmojis();
+        if (this.noEmojiToDisplay) {
             this.containerStyles = { display: 'none' };
         }
         if (!this.hasStickyPosition) {
@@ -181,22 +219,25 @@ class CategoryComponent {
     ngOnChanges(changes) {
         var _a, _b, _c, _d;
         if (((_b = (_a = changes.emojis) === null || _a === void 0 ? void 0 : _a.currentValue) === null || _b === void 0 ? void 0 : _b.length) !== ((_d = (_c = changes.emojis) === null || _c === void 0 ? void 0 : _c.previousValue) === null || _d === void 0 ? void 0 : _d.length)) {
+            this.emojisToDisplay = this.filterEmojis();
             this.ngAfterViewInit();
         }
     }
     ngAfterViewInit() {
-        var _a, _b;
-        if (!this.virtualize || !((_a = this.emojis) === null || _a === void 0 ? void 0 : _a.length)) {
+        var _a;
+        if (!this.virtualize) {
             return;
         }
-        this.emojis = this.filterEmojis();
         const { width } = this.container.nativeElement.getBoundingClientRect();
         const perRow = Math.floor(width / (this.emojiSize + 12));
-        this.rows = Math.ceil(this.emojis.length / perRow);
+        this.rows = Math.ceil(this.emojisToDisplay.length / perRow);
         this.containerStyles = Object.assign(Object.assign({}, this.containerStyles), { minHeight: `${this.rows * (this.emojiSize + 12) + 28}px` });
-        (_b = this.ref) === null || _b === void 0 ? void 0 : _b.detectChanges();
+        (_a = this.ref) === null || _a === void 0 ? void 0 : _a.detectChanges();
         this.handleScroll(this.container.nativeElement.parentNode.parentNode.scrollTop);
     }
+    get noEmojiToDisplay() {
+        return this.emojisToDisplay.length === 0;
+    }
     memoizeSize() {
         const parent = this.container.nativeElement.parentNode.parentNode;
         const { top, height } = this.container.nativeElement.getBoundingClientRect();
@@ -218,7 +259,7 @@ class CategoryComponent {
             const { top, height } = this.container.nativeElement.getBoundingClientRect();
             const parentHeight = this.container.nativeElement.parentNode.parentNode.clientHeight;
             if (parentHeight + (parentHeight + this.virtualizeOffset) >= top && -height - (parentHeight + this.virtualizeOffset) <= top) {
-                this.filteredEmojisSubject.next(this.emojis);
+                this.filteredEmojisSubject.next(this.emojisToDisplay);
             }
             else {
                 this.filteredEmojisSubject.next([]);
@@ -235,35 +276,30 @@ class CategoryComponent {
         this.ref.detectChanges();
         return true;
     }
-    getEmojis() {
-        if (this.name === 'Recent') {
-            let frequentlyUsed = this.recent || this.frequently.get(this.perLine, this.totalFrequentLines);
-            if (!frequentlyUsed || !frequentlyUsed.length) {
-                frequentlyUsed = this.frequently.get(this.perLine, this.totalFrequentLines);
-            }
-            if (frequentlyUsed.length) {
-                this.emojis = frequentlyUsed
-                    .map(id => {
-                    const emoji = this.custom.filter((e) => e.id === id)[0];
-                    if (emoji) {
-                        return emoji;
-                    }
-                    return id;
-                })
-                    .filter(id => !!this.emojiService.getData(id));
-            }
-            if ((!this.emojis || this.emojis.length === 0) && frequentlyUsed.length > 0) {
-                return null;
-            }
+    updateRecentEmojis() {
+        if (this.name !== 'Recent') {
+            return;
+        }
+        let frequentlyUsed = this.recent || this.frequently.get(this.perLine, this.totalFrequentLines);
+        if (!frequentlyUsed || !frequentlyUsed.length) {
+            frequentlyUsed = this.frequently.get(this.perLine, this.totalFrequentLines);
         }
-        if (this.emojis) {
-            this.emojis = this.emojis.slice(0);
+        if (!frequentlyUsed.length) {
+            return;
         }
-        return this.emojis;
+        this.emojis = frequentlyUsed
+            .map(id => {
+            const emoji = this.custom.filter((e) => e.id === id)[0];
+            if (emoji) {
+                return emoji;
+            }
+            return id;
+        })
+            .filter(id => !!this.emojiService.getData(id));
     }
     updateDisplay(display) {
         this.containerStyles.display = display;
-        this.getEmojis();
+        this.updateRecentEmojis();
         this.ref.detectChanges();
     }
     trackById(index, item) {
@@ -284,15 +320,13 @@ class CategoryComponent {
         return newEmojis;
     }
 }
-CategoryComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'emoji-category',
-                template: `
+CategoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: CategoryComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.EmojiService }, { token: EmojiFrequentlyService }], target: i0.ɵɵFactoryTarget.Component });
+CategoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", 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: { emojiOver: "emojiOver", emojiLeave: "emojiLeave", emojiClick: "emojiClick" }, 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"
       [attr.aria-label]="i18n.categories[id]"
-      [class.emoji-mart-no-results]="emojis && !emojis.length"
+      [class.emoji-mart-no-results]="noEmojiToDisplay"
       [ngStyle]="containerStyles"
     >
       <div class="emoji-mart-category-label" [ngStyle]="labelStyles" [attr.data-name]="name">
@@ -327,11 +361,11 @@ CategoryComponent.decorators = [
         </div>
       </div>
 
-      <div *ngIf="emojis && !emojis.length">
+      <div *ngIf="noEmojiToDisplay">
         <div>
           <ngx-emoji
             [emoji]="notFoundEmoji"
-            size="38"
+            [size]="38"
             [skin]="emojiSkin"
             [isNative]="emojiIsNative"
             [set]="emojiSet"
@@ -350,9 +384,8 @@ CategoryComponent.decorators = [
     </section>
 
     <ng-template #normalRenderTemplate>
-      <div *ngIf="emojis">
         <ngx-emoji
-          *ngFor="let emoji of emojis; trackBy: trackById"
+          *ngFor="let emoji of emojisToDisplay; trackBy: trackById"
           [emoji]="emoji"
           [size]="emojiSize"
           [skin]="emojiSkin"
@@ -369,48 +402,157 @@ CategoryComponent.decorators = [
           (emojiLeave)="emojiLeave.emit($event)"
           (emojiClick)="emojiClick.emit($event)"
         ></ngx-emoji>
+    </ng-template>
+  `, isInline: true, components: [{ type: i1.EmojiComponent, selector: "ngx-emoji", inputs: ["skin", "set", "sheetSize", "isNative", "forceSize", "tooltip", "size", "emoji", "fallback", "hideObsolete", "sheetRows", "sheetColumns", "useButton", "backgroundImageFn", "imageUrlFn"], outputs: ["emojiOver", "emojiLeave", "emojiClick"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: CategoryComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'emoji-category',
+                    template: `
+    <section
+      #container
+      class="emoji-mart-category"
+      [attr.aria-label]="i18n.categories[id]"
+      [class.emoji-mart-no-results]="noEmojiToDisplay"
+      [ngStyle]="containerStyles"
+    >
+      <div class="emoji-mart-category-label" [ngStyle]="labelStyles" [attr.data-name]="name">
+        <!-- already labeled by the section aria-label -->
+        <span #label [ngStyle]="labelSpanStyles" aria-hidden="true">
+          {{ i18n.categories[id] }}
+        </span>
+      </div>
+
+      <div
+        *ngIf="virtualize; else normalRenderTemplate"
+      >
+        <div *ngIf="filteredEmojis$ | async as filteredEmojis">
+          <ngx-emoji
+            *ngFor="let emoji of filteredEmojis; trackBy: trackById"
+            [emoji]="emoji"
+            [size]="emojiSize"
+            [skin]="emojiSkin"
+            [isNative]="emojiIsNative"
+            [set]="emojiSet"
+            [sheetSize]="emojiSheetSize"
+            [forceSize]="emojiForceSize"
+            [tooltip]="emojiTooltip"
+            [backgroundImageFn]="emojiBackgroundImageFn"
+            [imageUrlFn]="emojiImageUrlFn"
+            [hideObsolete]="hideObsolete"
+            [useButton]="emojiUseButton"
+            (emojiOver)="emojiOver.emit($event)"
+            (emojiLeave)="emojiLeave.emit($event)"
+            (emojiClick)="emojiClick.emit($event)"
+          ></ngx-emoji>
+        </div>
+      </div>
+
+      <div *ngIf="noEmojiToDisplay">
+        <div>
+          <ngx-emoji
+            [emoji]="notFoundEmoji"
+            [size]="38"
+            [skin]="emojiSkin"
+            [isNative]="emojiIsNative"
+            [set]="emojiSet"
+            [sheetSize]="emojiSheetSize"
+            [forceSize]="emojiForceSize"
+            [tooltip]="emojiTooltip"
+            [backgroundImageFn]="emojiBackgroundImageFn"
+            [useButton]="emojiUseButton"
+          ></ngx-emoji>
+        </div>
+
+        <div class="emoji-mart-no-results-label">
+          {{ i18n.notfound }}
+        </div>
       </div>
+    </section>
+
+    <ng-template #normalRenderTemplate>
+        <ngx-emoji
+          *ngFor="let emoji of emojisToDisplay; trackBy: trackById"
+          [emoji]="emoji"
+          [size]="emojiSize"
+          [skin]="emojiSkin"
+          [isNative]="emojiIsNative"
+          [set]="emojiSet"
+          [sheetSize]="emojiSheetSize"
+          [forceSize]="emojiForceSize"
+          [tooltip]="emojiTooltip"
+          [backgroundImageFn]="emojiBackgroundImageFn"
+          [imageUrlFn]="emojiImageUrlFn"
+          [hideObsolete]="hideObsolete"
+          [useButton]="emojiUseButton"
+          (emojiOver)="emojiOver.emit($event)"
+          (emojiLeave)="emojiLeave.emit($event)"
+          (emojiClick)="emojiClick.emit($event)"
+        ></ngx-emoji>
     </ng-template>
   `,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                preserveWhitespaces: false
-            },] }
-];
-CategoryComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: EmojiService },
-    { type: EmojiFrequentlyService }
-];
-CategoryComponent.propDecorators = {
-    emojis: [{ type: Input }],
-    hasStickyPosition: [{ type: Input }],
-    name: [{ type: Input }],
-    perLine: [{ type: Input }],
-    totalFrequentLines: [{ type: Input }],
-    recent: [{ type: Input }],
-    custom: [{ type: Input }],
-    i18n: [{ type: Input }],
-    id: [{ type: Input }],
-    hideObsolete: [{ type: Input }],
-    notFoundEmoji: [{ type: Input }],
-    virtualize: [{ type: Input }],
-    virtualizeOffset: [{ type: Input }],
-    emojiIsNative: [{ type: Input }],
-    emojiSkin: [{ type: Input }],
-    emojiSize: [{ type: Input }],
-    emojiSet: [{ type: Input }],
-    emojiSheetSize: [{ type: Input }],
-    emojiForceSize: [{ type: Input }],
-    emojiTooltip: [{ type: Input }],
-    emojiBackgroundImageFn: [{ type: Input }],
-    emojiImageUrlFn: [{ type: Input }],
-    emojiUseButton: [{ type: Input }],
-    emojiOver: [{ type: Output }],
-    emojiLeave: [{ type: Output }],
-    emojiClick: [{ type: Output }],
-    container: [{ type: ViewChild, args: ['container', { static: true },] }],
-    label: [{ type: ViewChild, args: ['label', { static: true },] }]
-};
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.EmojiService }, { type: EmojiFrequentlyService }]; }, propDecorators: { emojis: [{
+                type: Input
+            }], hasStickyPosition: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], perLine: [{
+                type: Input
+            }], totalFrequentLines: [{
+                type: Input
+            }], recent: [{
+                type: Input
+            }], custom: [{
+                type: Input
+            }], i18n: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], hideObsolete: [{
+                type: Input
+            }], notFoundEmoji: [{
+                type: Input
+            }], virtualize: [{
+                type: Input
+            }], virtualizeOffset: [{
+                type: Input
+            }], emojiIsNative: [{
+                type: Input
+            }], emojiSkin: [{
+                type: Input
+            }], emojiSize: [{
+                type: Input
+            }], emojiSet: [{
+                type: Input
+            }], emojiSheetSize: [{
+                type: Input
+            }], emojiForceSize: [{
+                type: Input
+            }], emojiTooltip: [{
+                type: Input
+            }], emojiBackgroundImageFn: [{
+                type: Input
+            }], emojiImageUrlFn: [{
+                type: Input
+            }], emojiUseButton: [{
+                type: Input
+            }], emojiOver: [{
+                type: Output
+            }], emojiLeave: [{
+                type: Output
+            }], emojiClick: [{
+                type: Output
+            }], container: [{
+                type: ViewChild,
+                args: ['container', { static: true }]
+            }], label: [{
+                type: ViewChild,
+                args: ['label', { static: true }]
+            }] } });
 
 function uniq(arr) {
     return arr.reduce((acc, item) => {
@@ -517,7 +659,7 @@ class EmojiSearch {
                 let aPool = pool;
                 let aIndex = this.index;
                 let length = 0;
-                // tslint:disable-next-line: prefer-for-of
+                // eslint-disable-next-line @typescript-eslint/prefer-for-of
                 for (let charIndex = 0; charIndex < v.length; charIndex++) {
                     const char = v[charIndex];
                     length++;
@@ -608,13 +750,117 @@ class EmojiSearch {
         return search.join(',');
     }
 }
-EmojiSearch.ɵprov = ɵɵdefineInjectable({ factory: function EmojiSearch_Factory() { return new EmojiSearch(ɵɵinject(EmojiService)); }, token: EmojiSearch, providedIn: "root" });
-EmojiSearch.decorators = [
-    { type: Injectable, args: [{ providedIn: 'root' },] }
-];
-EmojiSearch.ctorParameters = () => [
-    { type: EmojiService }
-];
+EmojiSearch.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: EmojiSearch, deps: [{ token: i1.EmojiService }], target: i0.ɵɵFactoryTarget.Injectable });
+EmojiSearch.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: EmojiSearch, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", 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];
+    }
+    toggleOpen() {
+        this.opened = !this.opened;
+    }
+    isSelected(skinTone) {
+        return skinTone === this.skin;
+    }
+    isVisible(skinTone) {
+        return this.opened || this.isSelected(skinTone);
+    }
+    pressed(skinTone) {
+        return this.opened ? !!this.isSelected(skinTone) : '';
+    }
+    tabIndex(skinTone) {
+        return this.isVisible(skinTone) ? '0' : '';
+    }
+    expanded(skinTone) {
+        return this.isSelected(skinTone) ? this.opened : '';
+    }
+    handleClick(skin) {
+        if (!this.opened) {
+            this.opened = true;
+            return;
+        }
+        this.opened = false;
+        if (skin !== this.skin) {
+            this.changeSkin.emit(skin);
+        }
+    }
+}
+SkinComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SkinComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkinComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", 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"
+    >
+      <span
+        *ngFor="let skinTone of skinTones"
+        class="emoji-mart-skin-swatch"
+        [class.selected]="skinTone === skin"
+      >
+        <span
+          (click)="handleClick(skinTone)"
+          (keyup.enter)="handleClick(skinTone)"
+          (keyup.space)="handleClick(skinTone)"
+          class="emoji-mart-skin emoji-mart-skin-tone-{{ skinTone }}"
+          role="button"
+          [tabIndex]="tabIndex(skinTone)"
+          [attr.aria-hidden]="!isVisible(skinTone)"
+          [attr.aria-pressed]="pressed(skinTone)"
+          [attr.aria-haspopup]="!!isSelected(skinTone)"
+          [attr.aria-expanded]="expanded(skinTone)"
+          [attr.aria-label]="i18n.skintones[skinTone]"
+          [title]="i18n.skintones[skinTone]"
+        ></span>
+      </span>
+    </section>
+  `, isInline: true, directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SkinComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'emoji-skins',
+                    template: `
+    <section
+      class="emoji-mart-skin-swatches"
+      [class.opened]="opened"
+    >
+      <span
+        *ngFor="let skinTone of skinTones"
+        class="emoji-mart-skin-swatch"
+        [class.selected]="skinTone === skin"
+      >
+        <span
+          (click)="handleClick(skinTone)"
+          (keyup.enter)="handleClick(skinTone)"
+          (keyup.space)="handleClick(skinTone)"
+          class="emoji-mart-skin emoji-mart-skin-tone-{{ skinTone }}"
+          role="button"
+          [tabIndex]="tabIndex(skinTone)"
+          [attr.aria-hidden]="!isVisible(skinTone)"
+          [attr.aria-pressed]="pressed(skinTone)"
+          [attr.aria-haspopup]="!!isSelected(skinTone)"
+          [attr.aria-expanded]="expanded(skinTone)"
+          [attr.aria-label]="i18n.skintones[skinTone]"
+          [title]="i18n.skintones[skinTone]"
+        ></span>
+      </span>
+    </section>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                }]
+        }], propDecorators: { skin: [{
+                type: Input
+            }], i18n: [{
+                type: Input
+            }], changeSkin: [{
+                type: Output
+            }] } });
 
 class PreviewComponent {
     constructor(ref, emojiService) {
@@ -643,10 +889,73 @@ class PreviewComponent {
         (_a = this.ref) === null || _a === void 0 ? void 0 : _a.detectChanges();
     }
 }
-PreviewComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'emoji-preview',
-                template: `
+PreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: PreviewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.EmojiService }], target: i0.ɵɵFactoryTarget.Component });
+PreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", 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: `
+    <div class="emoji-mart-preview" *ngIf="emoji && emojiData">
+      <div class="emoji-mart-preview-emoji">
+        <ngx-emoji
+          [emoji]="emoji"
+          [size]="38"
+          [isNative]="emojiIsNative"
+          [skin]="emojiSkin"
+          [size]="emojiSize"
+          [set]="emojiSet"
+          [sheetSize]="emojiSheetSize"
+          [backgroundImageFn]="emojiBackgroundImageFn"
+          [imageUrlFn]="emojiImageUrlFn"
+        ></ngx-emoji>
+      </div>
+
+      <div class="emoji-mart-preview-data">
+        <div class="emoji-mart-preview-name">{{ emojiData.name }}</div>
+        <div class="emoji-mart-preview-shortname">
+          <span
+            class="emoji-mart-preview-shortname"
+            *ngFor="let short_name of emojiData.shortNames"
+          >
+            :{{ short_name }}:
+          </span>
+        </div>
+        <div class="emoji-mart-preview-emoticons">
+          <span class="emoji-mart-preview-emoticon" *ngFor="let emoticon of listedEmoticons">
+            {{ emoticon }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="emoji-mart-preview" [hidden]="emoji">
+      <div class="emoji-mart-preview-emoji">
+        <ngx-emoji
+          *ngIf="idleEmoji && idleEmoji.length"
+          [isNative]="emojiIsNative"
+          [skin]="emojiSkin"
+          [set]="emojiSet"
+          [emoji]="idleEmoji"
+          [backgroundImageFn]="emojiBackgroundImageFn"
+          [size]="38"
+          [imageUrlFn]="emojiImageUrlFn"
+        ></ngx-emoji>
+      </div>
+
+      <div class="emoji-mart-preview-data">
+        <span class="emoji-mart-title-label">{{ title }}</span>
+      </div>
+
+      <div class="emoji-mart-preview-skins">
+        <emoji-skins
+          [skin]="emojiSkin"
+          (changeSkin)="skinChange.emit($event)"
+          [i18n]="i18n"
+        ></emoji-skins>
+      </div>
+    </div>
+  `, isInline: true, components: [{ type: i1.EmojiComponent, selector: "ngx-emoji", inputs: ["skin", "set", "sheetSize", "isNative", "forceSize", "tooltip", "size", "emoji", "fallback", "hideObsolete", "sheetRows", "sheetColumns", "useButton", "backgroundImageFn", "imageUrlFn"], outputs: ["emojiOver", "emojiLeave", "emojiClick"] }, { type: SkinComponent, selector: "emoji-skins", inputs: ["skin", "i18n"], outputs: ["changeSkin"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: PreviewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'emoji-preview',
+                    template: `
     <div class="emoji-mart-preview" *ngIf="emoji && emojiData">
       <div class="emoji-mart-preview-emoji">
         <ngx-emoji
@@ -680,7 +989,7 @@ PreviewComponent.decorators = [
       </div>
     </div>
 
-    <div class="emoji-mart-preview" *ngIf="!emoji">
+    <div class="emoji-mart-preview" [hidden]="emoji">
       <div class="emoji-mart-preview-emoji">
         <ngx-emoji
           *ngIf="idleEmoji && idleEmoji.length"
@@ -699,33 +1008,42 @@ PreviewComponent.decorators = [
       </div>
 
       <div class="emoji-mart-preview-skins">
-        <emoji-skins [skin]="emojiSkin" (changeSkin)="skinChange.emit($event)" [i18n]="i18n">
-        </emoji-skins>
+        <emoji-skins
+          [skin]="emojiSkin"
+          (changeSkin)="skinChange.emit($event)"
+          [i18n]="i18n"
+        ></emoji-skins>
       </div>
     </div>
   `,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                preserveWhitespaces: false
-            },] }
-];
-PreviewComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: EmojiService }
-];
-PreviewComponent.propDecorators = {
-    title: [{ type: Input }],
-    emoji: [{ type: Input }],
-    idleEmoji: [{ type: Input }],
-    i18n: [{ type: Input }],
-    emojiIsNative: [{ type: Input }],
-    emojiSkin: [{ type: Input }],
-    emojiSize: [{ type: Input }],
-    emojiSet: [{ type: Input }],
-    emojiSheetSize: [{ type: Input }],
-    emojiBackgroundImageFn: [{ type: Input }],
-    emojiImageUrlFn: [{ type: Input }],
-    skinChange: [{ type: Output }]
-};
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.EmojiService }]; }, propDecorators: { title: [{
+                type: Input
+            }], emoji: [{
+                type: Input
+            }], idleEmoji: [{
+                type: Input
+            }], i18n: [{
+                type: Input
+            }], emojiIsNative: [{
+                type: Input
+            }], emojiSkin: [{
+                type: Input
+            }], emojiSize: [{
+                type: Input
+            }], emojiSet: [{
+                type: Input
+            }], emojiSheetSize: [{
+                type: Input
+            }], emojiBackgroundImageFn: [{
+                type: Input
+            }], emojiImageUrlFn: [{
+                type: Input
+            }], skinChange: [{
+                type: Output
+            }] } });
 
 let id = 0;
 class SearchComponent {
@@ -778,10 +1096,51 @@ class SearchComponent {
         this.handleSearch(this.query);
     }
 }
-SearchComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'emoji-search',
-                template: `
+SearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SearchComponent, deps: [{ token: EmojiSearch }], target: i0.ɵɵFactoryTarget.Component });
+SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", 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: `
+    <div class="emoji-mart-search">
+      <input
+        [id]="inputId"
+        #inputRef
+        type="search"
+        (keyup.enter)="handleEnterKey($event)"
+        [placeholder]="i18n.search"
+        [autofocus]="autoFocus"
+        [(ngModel)]="query"
+        (ngModelChange)="handleChange()"
+      />
+      <!--
+      Use a <label> in addition to the placeholder for accessibility, but place it off-screen
+      http://www.maxability.co.in/2016/01/placeholder-attribute-and-why-it-is-not-accessible/
+      -->
+      <label class="emoji-mart-sr-only" [htmlFor]="inputId">
+        {{ i18n.search }}
+      </label>
+      <button
+        type="button"
+        class="emoji-mart-search-icon"
+        (click)="clear()"
+        (keyup.enter)="clear()"
+        [disabled]="!isSearching"
+        [attr.aria-label]="i18n.clear"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          width="13"
+          height="13"
+          opacity="0.5"
+        >
+          <path [attr.d]="icon" />
+        </svg>
+      </button>
+    </div>
+  `, isInline: true, directives: [{ type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SearchComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'emoji-search',
+                    template: `
     <div class="emoji-mart-search">
       <input
         [id]="inputId"
@@ -820,27 +1179,34 @@ SearchComponent.decorators = [
       </button>
     </div>
   `,
-                preserveWhitespaces: false
-            },] }
-];
-SearchComponent.ctorParameters = () => [
-    { type: EmojiSearch }
-];
-SearchComponent.propDecorators = {
-    maxResults: [{ type: Input }],
-    autoFocus: [{ type: Input }],
-    i18n: [{ type: Input }],
-    include: [{ type: Input }],
-    exclude: [{ type: Input }],
-    custom: [{ type: Input }],
-    icons: [{ type: Input }],
-    emojisToShowFilter: [{ type: Input }],
-    searchResults: [{ type: Output }],
-    enterKey: [{ type: Output }],
-    inputRef: [{ type: ViewChild, args: ['inputRef', { static: true },] }]
-};
+                    preserveWhitespaces: false,
+                }]
+        }], ctorParameters: function () { return [{ type: EmojiSearch }]; }, propDecorators: { maxResults: [{
+                type: Input
+            }], autoFocus: [{
+                type: Input
+            }], i18n: [{
+                type: Input
+            }], include: [{
+                type: Input
+            }], exclude: [{
+                type: Input
+            }], custom: [{
+                type: Input
+            }], icons: [{
+                type: Input
+            }], emojisToShowFilter: [{
+                type: Input
+            }], searchResults: [{
+                type: Output
+            }], enterKey: [{
+                type: Output
+            }], inputRef: [{
+                type: ViewChild,
+                args: ['inputRef', { static: true }]
+            }] } });
 
-/* tslint:disable max-line-length */
+/* eslint-disable  max-len */
 const categories = {
     activity: `M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24m10 11h-5c.3-2.5 1.3-4.8 2-6.1a10 10 0 0 1 3 6.1m-9 0V2a10 10 0 0 1 4.4 1.6A18 18 0 0 0 15 11h-2zm-2 0H9a18 18 0 0 0-2.4-7.4A10 10 0 0 1 11 2.1V11zm0 2v9a10 10 0 0 1-4.4-1.6A18 18 0 0 0 9 13h2zm4 0a18 18 0 0 0 2.4 7.4 10 10 0 0 1-4.4 1.5V13h2zM5 4.9c.7 1.3 1.7 3.6 2 6.1H2a10 10 0 0 1 3-6.1M2 13h5c-.3 2.5-1.3 4.8-2 6.1A10 10 0 0 1 2 13m17 6.1c-.7-1.3-1.7-3.6-2-6.1h5a10 10 0 0 1-3 6.1`,
     custom: `M10 1h3v21h-3zm10.186 4l1.5 2.598L3.5 18.098 2 15.5zM2 7.598L3.5 5l18.186 10.5-1.5 2.598z`,
@@ -951,7 +1317,7 @@ class PickerComponent {
             name: 'Custom',
             emojis: [],
         };
-        this.backgroundImageFn = (set, sheetSize) => `https://unpkg.com/emoji-datasource-${this.set}@6.0.0/img/${this.set}/sheets-256/${this.sheetSize}.png`;
+        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
@@ -987,7 +1353,7 @@ class PickerComponent {
             if (this.emojisToShowFilter) {
                 const newEmojis = [];
                 const { emojis } = category;
-                // tslint:disable-next-line: prefer-for-of
+                // 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)) {
@@ -1038,7 +1404,7 @@ class PickerComponent {
             // the OnPush component we can run change detection locally starting from this
             // component and going down to the children.
             this.ref.detectChanges();
-            // tslint:disable-next-line: no-unused-expression
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
             isPlatformBrowser(this.platformId) &&
                 this.ngZone.runOutsideAngular(() => {
                     // The `updateCategoriesSize` doesn't change properties that are used
@@ -1060,7 +1426,8 @@ class PickerComponent {
         });
     }
     ngOnDestroy() {
-        this.scrollListener();
+        var _a;
+        (_a = this.scrollListener) === null || _a === void 0 ? void 0 : _a.call(this);
         // This is called here because the component might be destroyed
         // but there will still be a `requestAnimationFrame` callback in the queue
         // that calls `detectChanges()` on the `ViewRef`. This will lead to a runtime
@@ -1196,7 +1563,7 @@ class PickerComponent {
         }
         const component = this.categoryRefs.toArray()[1];
         if (component && this.enableFrequentEmojiSort) {
-            component.getEmojis();
+            component.updateRecentEmojis();
             component.ref.markForCheck();
         }
     }
@@ -1247,169 +1614,149 @@ class PickerComponent {
         }
     }
 }
-PickerComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'emoji-mart',
-                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      (emojiOver)=\"handleEmojiOver($event)\"\n      (emojiLeave)=\"handleEmojiLeave()\"\n      (emojiClick)=\"handleEmojiClick($event)\"\n    ></emoji-category>\n  </section>\n  <div class=\"emoji-mart-bar\" *ngIf=\"showPreview\">\n    <emoji-preview\n      [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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                preserveWhitespaces: false
-            },] }
-];
-PickerComponent.ctorParameters = () => [
-    { type: NgZone },
-    { type: Renderer2 },
-    { type: ChangeDetectorRef },
-    { type: EmojiFrequentlyService },
-    { type: String, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] }
-];
-PickerComponent.propDecorators = {
-    perLine: [{ type: Input }],
-    totalFrequentLines: [{ type: Input }],
-    i18n: [{ type: Input }],
-    style: [{ type: Input }],
-    title: [{ type: Input }],
-    emoji: [{ type: Input }],
-    darkMode: [{ type: Input }],
-    color: [{ type: Input }],
-    hideObsolete: [{ type: Input }],
-    categories: [{ type: Input }],
-    activeCategories: [{ type: Input }],
-    set: [{ type: Input }],
-    skin: [{ type: Input }],
-    isNative: [{ type: Input }],
-    emojiSize: [{ type: Input }],
-    sheetSize: [{ type: Input }],
-    emojisToShowFilter: [{ type: Input }],
-    showPreview: [{ type: Input }],
-    emojiTooltip: [{ type: Input }],
-    autoFocus: [{ type: Input }],
-    custom: [{ type: Input }],
-    hideRecent: [{ type: Input }],
-    imageUrlFn: [{ type: Input }],
-    include: [{ type: Input }],
-    exclude: [{ type: Input }],
-    notFoundEmoji: [{ type: Input }],
-    categoriesIcons: [{ type: Input }],
-    searchIcons: [{ type: Input }],
-    useButton: [{ type: Input }],
-    enableFrequentEmojiSort: [{ type: Input }],
-    enableSearch: [{ type: Input }],
-    showSingleCategory: [{ type: Input }],
-    virtualize: [{ type: Input }],
-    virtualizeOffset: [{ type: Input }],
-    recent: [{ type: Input }],
-    emojiClick: [{ type: Output }],
-    emojiSelect: [{ type: Output }],
-    skinChange: [{ type: Output }],
-    scrollRef: [{ type: ViewChild, args: ['scrollRef', { static: true },] }],
-    previewRef: [{ type: ViewChild, args: [PreviewComponent, { static: false },] }],
-    searchRef: [{ type: ViewChild, args: [SearchComponent, { static: false },] }],
-    categoryRefs: [{ type: ViewChildren, args: [CategoryComponent,] }],
-    backgroundImageFn: [{ type: Input }]
-};
-
-class SkinComponent {
-    constructor() {
-        this.changeSkin = new EventEmitter();
-        this.opened = false;
-        this.skinTones = [1, 2, 3, 4, 5, 6];
-    }
-    toggleOpen() {
-        this.opened = !this.opened;
-    }
-    isSelected(skinTone) {
-        return skinTone === this.skin;
-    }
-    isVisible(skinTone) {
-        return this.opened || this.isSelected(skinTone);
-    }
-    pressed(skinTone) {
-        return this.opened ? !!this.isSelected(skinTone) : '';
-    }
-    tabIndex(skinTone) {
-        return this.isVisible(skinTone) ? '0' : '';
-    }
-    expanded(skinTone) {
-        return this.isSelected(skinTone) ? this.opened : '';
-    }
-    handleClick(skin) {
-        if (!this.opened) {
-            this.opened = true;
-            return;
-        }
-        this.opened = false;
-        if (skin !== this.skin) {
-            this.changeSkin.emit(skin);
-        }
-    }
-}
-SkinComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'emoji-skins',
-                template: `
-    <section
-      class="emoji-mart-skin-swatches"
-      [class.opened]="opened"
-    >
-      <span
-        *ngFor="let skinTone of skinTones"
-        class="emoji-mart-skin-swatch"
-        [class.selected]="skinTone === skin"
-      >
-        <span
-          (click)="this.handleClick(skinTone)"
-          (keyup.enter)="handleClick(skinTone)"
-          (keyup.space)="handleClick(skinTone)"
-          class="emoji-mart-skin emoji-mart-skin-tone-{{ skinTone }}"
-          role="button"
-          [tabIndex]="tabIndex(skinTone)"
-          [attr.aria-hidden]="!isVisible(skinTone)"
-          [attr.aria-pressed]="pressed(skinTone)"
-          [attr.aria-haspopup]="!!isSelected(skinTone)"
-          [attr.aria-expanded]="expanded(skinTone)"
-          [attr.aria-label]="i18n.skintones[skinTone]"
-          [title]="i18n.skintones[skinTone]"
-        ></span>
-      </span>
-    </section>
-  `,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                preserveWhitespaces: false
-            },] }
-];
-SkinComponent.propDecorators = {
-    skin: [{ type: Input }],
-    i18n: [{ type: Input }],
-    changeSkin: [{ type: Output }]
-};
+PickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", 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: "12.0.0", version: "13.0.1", 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      (emojiOver)=\"handleEmojiOver($event)\"\n      (emojiLeave)=\"handleEmojiLeave()\"\n      (emojiClick)=\"handleEmojiClick($event)\"\n    ></emoji-category>\n  </section>\n  <div class=\"emoji-mart-bar\" *ngIf=\"showPreview\">\n    <emoji-preview\n      [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", components: [{ type: AnchorsComponent, selector: "emoji-mart-anchors", inputs: ["categories", "color", "selected", "i18n", "icons"], outputs: ["anchorClick"] }, { type: SearchComponent, selector: "emoji-search", inputs: ["maxResults", "autoFocus", "i18n", "include", "exclude", "custom", "icons", "emojisToShowFilter"], outputs: ["searchResults", "enterKey"] }, { 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: ["emojiOver", "emojiLeave", "emojiClick"] }, { type: PreviewComponent, selector: "emoji-preview", inputs: ["title", "emoji", "idleEmoji", "i18n", "emojiIsNative", "emojiSkin", "emojiSize", "emojiSet", "emojiSheetSize", "emojiBackgroundImageFn", "emojiImageUrlFn"], outputs: ["skinChange"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", 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      (emojiOver)=\"handleEmojiOver($event)\"\n      (emojiLeave)=\"handleEmojiLeave()\"\n      (emojiClick)=\"handleEmojiClick($event)\"\n    ></emoji-category>\n  </section>\n  <div class=\"emoji-mart-bar\" *ngIf=\"showPreview\">\n    <emoji-preview\n      [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]
+                    }] }];
+    }, propDecorators: { perLine: [{
+                type: Input
+            }], totalFrequentLines: [{
+                type: Input
+            }], i18n: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], emoji: [{
+                type: Input
+            }], darkMode: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], hideObsolete: [{
+                type: Input
+            }], categories: [{
+                type: Input
+            }], activeCategories: [{
+                type: Input
+            }], set: [{
+                type: Input
+            }], skin: [{
+                type: Input
+            }], isNative: [{
+                type: Input
+            }], emojiSize: [{
+                type: Input
+            }], sheetSize: [{
+                type: Input
+            }], emojisToShowFilter: [{
+                type: Input
+            }], showPreview: [{
+                type: Input
+            }], emojiTooltip: [{
+                type: Input
+            }], autoFocus: [{
+                type: Input
+            }], custom: [{
+                type: Input
+            }], hideRecent: [{
+                type: Input
+            }], imageUrlFn: [{
+                type: Input
+            }], include: [{
+                type: Input
+            }], exclude: [{
+                type: Input
+            }], notFoundEmoji: [{
+                type: Input
+            }], categoriesIcons: [{
+                type: Input
+            }], searchIcons: [{
+                type: Input
+            }], useButton: [{
+                type: Input
+            }], enableFrequentEmojiSort: [{
+                type: Input
+            }], enableSearch: [{
+                type: Input
+            }], showSingleCategory: [{
+                type: Input
+            }], virtualize: [{
+                type: Input
+            }], virtualizeOffset: [{
+                type: Input
+            }], recent: [{
+                type: Input
+            }], emojiClick: [{
+                type: Output
+            }], emojiSelect: [{
+                type: Output
+            }], skinChange: [{
+                type: Output
+            }], scrollRef: [{
+                type: ViewChild,
+                args: ['scrollRef', { static: true }]
+            }], previewRef: [{
+                type: ViewChild,
+                args: [PreviewComponent, { static: false }]
+            }], searchRef: [{
+                type: ViewChild,
+                args: [SearchComponent, { static: false }]
+            }], categoryRefs: [{
+                type: ViewChildren,
+                args: [CategoryComponent]
+            }], backgroundImageFn: [{
+                type: Input
+            }] } });
 
 class PickerModule {
 }
-PickerModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, FormsModule, EmojiModule],
-                exports: [
-                    PickerComponent,
-                    AnchorsComponent,
-                    CategoryComponent,
-                    SearchComponent,
-                    PreviewComponent,
-                    SkinComponent,
-                ],
-                declarations: [
-                    PickerComponent,
-                    AnchorsComponent,
-                    CategoryComponent,
-                    SearchComponent,
-                    PreviewComponent,
-                    SkinComponent,
-                ],
-            },] }
-];
+PickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: PickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", 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: "13.0.1", ngImport: i0, type: PickerModule, imports: [[CommonModule, FormsModule, EmojiModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", 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,
+                    ],
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
 export { AnchorsComponent, CategoryComponent, EmojiFrequentlyService, EmojiSearch, PickerComponent, PickerModule, PreviewComponent, SearchComponent, SkinComponent };
-//# sourceMappingURL=ctrl-ngx-emoji-mart.js.map
+//# sourceMappingURL=ctrl-ngx-emoji-mart.mjs.map