@ctrl/ngx-emoji-mart 5.1.2 → 6.1.1

package/README.md

@@ -8,16 +8,7 @@
 
 **DEMO**: https://ngx-emoji-mart.vercel.app
 
-This project is a port of [emoji-mart](https://github.com/missive/emoji-mart) by missive
-
-- [Installation](#installation)
-- [Components](#components)
-  - [Picker](#picker)
-  - [Emoji](#emoji)
-- [Custom emojis](#custom-emojis)
-- [Headless search](#headless-search)
-- [Storage](#storage)
-- [Features](#features)
+This project is a port of [emoji-mart](https://github.com/missive/emoji-mart) by missive.
 
 ## Installation
 
@@ -29,12 +20,13 @@ npm install @ctrl/ngx-emoji-mart
 
 Latest version available for each version of Angular
 
-| @ctrl/ngx-emoji-mart | Angular |
-| -------------------- | ------- |
-| 0.17.0               | 6.x 7.x |
-| 1.0.6                | 8.x     |
-| 3.1.0                | 9.x     |
-| current              | >= 10.x |
+| @ctrl/ngx-emoji-mart | Angular   |
+| -------------------- | --------- |
+| 0.17.0               | 6.x 7.x   |
+| 1.0.6                | 8.x       |
+| 3.1.0                | 9.x       |
+| 5.1.2                | 10.x 11.x |
+| current              | >= 12.x   |
 
 ## Components
 
@@ -109,7 +101,7 @@ use component
 | **useButton**               | `false`                   | Uses button elements for emoji instead of spans                                                                                                                                          |
 | **enableFrequentEmojiSort** | `false`                   | Enables re-sorting of emoji on click                                                                                                                                                     |
 | **virtualize**              | `false`                   | Enables experimental virtualized rendering to render only emoji categories in view                                                                                                       |
-| **virtualizeOffset**        | `0`                       | use with virtualize option to add or subtract the amount of pixels used to determine whether or not render the category          |
+| **virtualizeOffset**        | `0`                       | use with virtualize option to add or subtract the amount of pixels used to determine whether or not render the category                                                                  |
 
 #### I18n
 
@@ -214,7 +206,7 @@ import { EmojiModule } from '@ctrl/ngx-emoji-mart/ngx-emoji';
 ```
 
 | Prop                                         | Required | Default                   | Description                                                                                                      |
-| -------------------------------------------- | :------: | ------------------------- | ---------------------------------------------------------------------------------------------------------------- | --- |
+| -------------------------------------------- | :------: | ------------------------- | ------------------------------------------------------------------------------ |
 | **emoji**                                    |    ✓     |                           | Either a string or an `emoji` object                                                                             |
 | **size**                                     |    ✓     |                           | The emoji width and height.                                                                                      |
 | **isNative**                                 |          | `false`                   | Renders the native unicode emoji                                                                                 |
@@ -264,7 +256,7 @@ const customEmojis = [
     text: '',
     emoticons: [],
     keywords: ['test', 'flag'],
-    spriteUrl: 'https://unpkg.com/emoji-datasource-twitter@6.0.0/img/twitter/sheets-256/64.png',
+    spriteUrl: 'https://unpkg.com/emoji-datasource-twitter@6.0.1/img/twitter/sheets-256/64.png',
     sheet_x: 1,
     sheet_y: 1,
     size: 64,

package/anchors.component.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '@angular/core';
 import { EmojiCategory } from '@ctrl/ngx-emoji-mart/ngx-emoji';
+import * as i0 from "@angular/core";
 export declare class AnchorsComponent {
     categories: EmojiCategory[];
     color?: string;
@@ -14,4 +15,6 @@ export declare class AnchorsComponent {
     }>;
     trackByFn(idx: number, cat: EmojiCategory): string;
     handleClick($event: Event, index: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AnchorsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AnchorsComponent, "emoji-mart-anchors", never, { "categories": "categories"; "color": "color"; "selected": "selected"; "i18n": "i18n"; "icons": "icons"; }, { "anchorClick": "anchorClick"; }, never, never>;
 }

package/category.component.d.ts

@@ -2,11 +2,12 @@ import { Emoji, EmojiService } from '@ctrl/ngx-emoji-mart/ngx-emoji';
 import { AfterViewInit, ChangeDetectorRef, ElementRef, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { Observable } from 'rxjs';
 import { EmojiFrequentlyService } from './emoji-frequently.service';
+import * as i0 from "@angular/core";
 export declare class CategoryComponent implements OnChanges, OnInit, AfterViewInit {
     ref: ChangeDetectorRef;
     private emojiService;
     private frequently;
-    emojis?: any[] | null;
+    emojis: any[] | null;
     hasStickyPosition: boolean;
     name: string;
     perLine: number;
@@ -35,6 +36,7 @@ export declare class CategoryComponent implements OnChanges, OnInit, AfterViewIn
     container: ElementRef;
     label: ElementRef;
     containerStyles: any;
+    emojisToDisplay: any[];
     private filteredEmojisSubject;
     filteredEmojis$: Observable<any[] | null | undefined>;
     labelStyles: any;
@@ -48,10 +50,13 @@ export declare class CategoryComponent implements OnChanges, OnInit, AfterViewIn
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
+    get noEmojiToDisplay(): boolean;
     memoizeSize(): void;
     handleScroll(scrollTop: number): boolean;
-    getEmojis(): any[];
+    updateRecentEmojis(): void;
     updateDisplay(display: 'none' | 'block'): void;
     trackById(index: number, item: any): any;
     private filterEmojis;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CategoryComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CategoryComponent, "emoji-category", never, { "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"; }, { "emojiOver": "emojiOver"; "emojiLeave": "emojiLeave"; "emojiClick": "emojiClick"; }, never, never>;
 }

package/ctrl-ngx-emoji-mart.d.ts

@@ -1,4 +1,5 @@
 /**
  * Generated bundle index. Do not edit.
  */
+/// <amd-module name="@ctrl/ngx-emoji-mart" />
 export * from './public_api';

package/emoji-frequently.service.d.ts

@@ -1,4 +1,5 @@
 import { EmojiData } from '@ctrl/ngx-emoji-mart/ngx-emoji';
+import * as i0 from "@angular/core";
 export declare class EmojiFrequentlyService {
     private platformId;
     NAMESPACE: string;
@@ -14,4 +15,6 @@ export declare class EmojiFrequentlyService {
     init(): void;
     add(emoji: EmojiData): void;
     get(perLine: number, totalLines: number): any[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<EmojiFrequentlyService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<EmojiFrequentlyService>;
 }

package/emoji-search.service.d.ts

@@ -1,4 +1,5 @@
 import { EmojiData, EmojiService } from '@ctrl/ngx-emoji-mart/ngx-emoji';
+import * as i0 from "@angular/core";
 export declare class EmojiSearch {
     private emojiService;
     originalPool: any;
@@ -20,4 +21,6 @@ export declare class EmojiSearch {
     addCustomToPool(custom: any, pool: any): void;
     search(value: string, emojisToShowFilter?: (x: any) => boolean, maxResults?: number, include?: any[], exclude?: any[], custom?: any[]): EmojiData[] | null;
     buildSearch(shortNames: string[], name: string, id: string, keywords: string[], emoticons: string[]): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EmojiSearch, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<EmojiSearch>;
 }

package/esm2020/anchors.component.mjs

@@ -0,0 +1,83 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class AnchorsComponent {
+    constructor() {
+        this.categories = [];
+        this.icons = {};
+        this.anchorClick = new EventEmitter();
+    }
+    trackByFn(idx, cat) {
+        return cat.id;
+    }
+    handleClick($event, index) {
+        this.anchorClick.emit({
+            category: this.categories[index],
+            index,
+        });
+    }
+}
+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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.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
+        *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,
+                }]
+        }], propDecorators: { categories: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], i18n: [{
+                type: Input
+            }], icons: [{
+                type: Input
+            }], anchorClick: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5jaG9ycy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL3BpY2tlci9hbmNob3JzLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQzs7O0FBOEJ2QixNQUFNLE9BQU8sZ0JBQWdCO0lBMUI3QjtRQTJCVyxlQUFVLEdBQW9CLEVBQUUsQ0FBQztRQUlqQyxVQUFLLEdBQThCLEVBQUUsQ0FBQztRQUNyQyxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUE4QyxDQUFDO0tBV3hGO0lBVEMsU0FBUyxDQUFDLEdBQVcsRUFBRSxHQUFrQjtRQUN2QyxPQUFPLEdBQUcsQ0FBQyxFQUFFLENBQUM7SUFDaEIsQ0FBQztJQUNELFdBQVcsQ0FBQyxNQUFhLEVBQUUsS0FBYTtRQUN0QyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQztZQUNwQixRQUFRLEVBQUUsSUFBSSxDQUFDLFVBQVUsQ0FBQyxLQUFLLENBQUM7WUFDaEMsS0FBSztTQUNOLENBQUMsQ0FBQztJQUNMLENBQUM7OzZHQWhCVSxnQkFBZ0I7aUdBQWhCLGdCQUFnQiw2TUF4QmpCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQW9CVDsyRkFJVSxnQkFBZ0I7a0JBMUI1QixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxvQkFBb0I7b0JBQzlCLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FvQlQ7b0JBQ0QsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07b0JBQy9DLG1CQUFtQixFQUFFLEtBQUs7aUJBQzNCOzhCQUVVLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDSSxXQUFXO3NCQUFwQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT3V0cHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgRW1vamlDYXRlZ29yeSB9IGZyb20gJ0BjdHJsL25neC1lbW9qaS1tYXJ0L25neC1lbW9qaSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2Vtb2ppLW1hcnQtYW5jaG9ycycsXG4gIHRlbXBsYXRlOiBgXG4gIDxkaXYgY2xhc3M9XCJlbW9qaS1tYXJ0LWFuY2hvcnNcIj5cbiAgICA8bmctdGVtcGxhdGUgbmdGb3IgbGV0LWNhdGVnb3J5IFtuZ0Zvck9mXT1cImNhdGVnb3JpZXNcIiBsZXQtaWR4PVwiaW5kZXhcIiBbbmdGb3JUcmFja0J5XT1cInRyYWNrQnlGblwiPlxuICAgICAgPHNwYW5cbiAgICAgICAgKm5nSWY9XCJjYXRlZ29yeS5hbmNob3IgIT09IGZhbHNlXCJcbiAgICAgICAgW2F0dHIudGl0bGVdPVwiaTE4bi5jYXRlZ29yaWVzW2NhdGVnb3J5LmlkXVwiXG4gICAgICAgIChjbGljayk9XCJ0aGlzLmhhbmRsZUNsaWNrKCRldmVudCwgaWR4KVwiXG4gICAgICAgIGNsYXNzPVwiZW1vamktbWFydC1hbmNob3JcIlxuICAgICAgICBbY2xhc3MuZW1vamktbWFydC1hbmNob3Itc2VsZWN0ZWRdPVwiY2F0ZWdvcnkubmFtZSA9PT0gc2VsZWN0ZWRcIlxuICAgICAgICBbc3R5bGUuY29sb3JdPVwiY2F0ZWdvcnkubmFtZSA9PT0gc2VsZWN0ZWQgPyBjb2xvciA6IG51bGxcIlxuICAgICAgPlxuICAgICAgICA8ZGl2PlxuICAgICAgICAgIDxzdmcgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiIHZpZXdCb3g9XCIwIDAgMjQgMjRcIiB3aWR0aD1cIjI0XCIgaGVpZ2h0PVwiMjRcIj5cbiAgICAgICAgICAgIDxwYXRoIFthdHRyLmRdPVwiaWNvbnNbY2F0ZWdvcnkuaWRdXCIgLz5cbiAgICAgICAgICA8L3N2Zz5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwiZW1vamktbWFydC1hbmNob3ItYmFyXCIgW3N0eWxlLmJhY2tncm91bmQtY29sb3JdPVwiY29sb3JcIj48L3NwYW4+XG4gICAgICA8L3NwYW4+XG4gICAgPC9uZy10ZW1wbGF0ZT5cbiAgPC9kaXY+XG4gIGAsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBwcmVzZXJ2ZVdoaXRlc3BhY2VzOiBmYWxzZSxcbn0pXG5leHBvcnQgY2xhc3MgQW5jaG9yc0NvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGNhdGVnb3JpZXM6IEVtb2ppQ2F0ZWdvcnlbXSA9IFtdO1xuICBASW5wdXQoKSBjb2xvcj86IHN0cmluZztcbiAgQElucHV0KCkgc2VsZWN0ZWQ/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIGkxOG46IGFueTtcbiAgQElucHV0KCkgaWNvbnM6IHsgW2tleTogc3RyaW5nXTogc3RyaW5nIH0gPSB7fTtcbiAgQE91dHB1dCgpIGFuY2hvckNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcjx7IGNhdGVnb3J5OiBFbW9qaUNhdGVnb3J5LCBpbmRleDogbnVtYmVyIH0+KCk7XG5cbiAgdHJhY2tCeUZuKGlkeDogbnVtYmVyLCBjYXQ6IEVtb2ppQ2F0ZWdvcnkpIHtcbiAgICByZXR1cm4gY2F0LmlkO1xuICB9XG4gIGhhbmRsZUNsaWNrKCRldmVudDogRXZlbnQsIGluZGV4OiBudW1iZXIpIHtcbiAgICB0aGlzLmFuY2hvckNsaWNrLmVtaXQoe1xuICAgICAgY2F0ZWdvcnk6IHRoaXMuY2F0ZWdvcmllc1tpbmRleF0sXG4gICAgICBpbmRleCxcbiAgICB9KTtcbiAgfVxufVxuIl19