@ctrl/ngx-emoji-mart 9.1.2 → 9.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,7 +4,7 @@ import * as i0 from '@angular/core';
4
4
  import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, PLATFORM_ID, Injectable, Inject, ViewChild, ViewChildren, NgModule } from '@angular/core';
5
5
  import * as i1 from '@ctrl/ngx-emoji-mart/ngx-emoji';
6
6
  import { EmojiComponent, categories as categories$1 } from '@ctrl/ngx-emoji-mart/ngx-emoji';
7
- import { Subject } from 'rxjs';
7
+ import { Subject, fromEvent, takeUntil } from 'rxjs';
8
8
  import * as i2$1 from '@angular/forms';
9
9
  import { FormsModule } from '@angular/forms';
10
10
 
@@ -24,8 +24,8 @@ class AnchorsComponent {
24
24
  index,
25
25
  });
26
26
  }
27
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AnchorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
28
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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: `
27
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: AnchorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
28
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", 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: `
29
29
  <div class="emoji-mart-anchors">
30
30
  <ng-template
31
31
  ngFor
@@ -53,7 +53,7 @@ class AnchorsComponent {
53
53
  </div>
54
54
  `, 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 });
55
55
  }
56
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AnchorsComponent, decorators: [{
56
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: AnchorsComponent, decorators: [{
57
57
  type: Component,
58
58
  args: [{
59
59
  selector: 'emoji-mart-anchors',
@@ -178,10 +178,10 @@ class EmojiFrequentlyService {
178
178
  }
179
179
  return sliced;
180
180
  }
181
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: EmojiFrequentlyService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
182
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: EmojiFrequentlyService, providedIn: 'root' });
181
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: EmojiFrequentlyService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
182
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: EmojiFrequentlyService, providedIn: 'root' });
183
183
  }
184
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: EmojiFrequentlyService, decorators: [{
184
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: EmojiFrequentlyService, decorators: [{
185
185
  type: Injectable,
186
186
  args: [{ providedIn: 'root' }]
187
187
  }], ctorParameters: function () { return [{ type: undefined, decorators: [{
@@ -216,12 +216,12 @@ class CategoryComponent {
216
216
  emojiBackgroundImageFn;
217
217
  emojiImageUrlFn;
218
218
  emojiUseButton;
219
- emojiClick = new EventEmitter();
220
219
  /**
221
220
  * Note: the suffix is added explicitly so we know the event is dispatched outside of the Angular zone.
222
221
  */
223
222
  emojiOverOutsideAngular = new EventEmitter();
224
223
  emojiLeaveOutsideAngular = new EventEmitter();
224
+ emojiClickOutsideAngular = new EventEmitter();
225
225
  container;
226
226
  label;
227
227
  containerStyles = {};
@@ -356,8 +356,8 @@ class CategoryComponent {
356
356
  }
357
357
  return newEmojis;
358
358
  }
359
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: CategoryComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.EmojiService }, { token: EmojiFrequentlyService }], target: i0.ɵɵFactoryTarget.Component });
360
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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: `
359
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: CategoryComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.EmojiService }, { token: EmojiFrequentlyService }], target: i0.ɵɵFactoryTarget.Component });
360
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", 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: { emojiOverOutsideAngular: "emojiOverOutsideAngular", emojiLeaveOutsideAngular: "emojiLeaveOutsideAngular", emojiClickOutsideAngular: "emojiClickOutsideAngular" }, 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: `
361
361
  <section
362
362
  #container
363
363
  class="emoji-mart-category"
@@ -390,7 +390,7 @@ class CategoryComponent {
390
390
  [useButton]="emojiUseButton"
391
391
  (emojiOverOutsideAngular)="emojiOverOutsideAngular.emit($event)"
392
392
  (emojiLeaveOutsideAngular)="emojiLeaveOutsideAngular.emit($event)"
393
- (emojiClick)="emojiClick.emit($event)"
393
+ (emojiClickOutsideAngular)="emojiClickOutsideAngular.emit($event)"
394
394
  ></ngx-emoji>
395
395
  </div>
396
396
  </div>
@@ -434,12 +434,12 @@ class CategoryComponent {
434
434
  [useButton]="emojiUseButton"
435
435
  (emojiOverOutsideAngular)="emojiOverOutsideAngular.emit($event)"
436
436
  (emojiLeaveOutsideAngular)="emojiLeaveOutsideAngular.emit($event)"
437
- (emojiClick)="emojiClick.emit($event)"
437
+ (emojiClickOutsideAngular)="emojiClickOutsideAngular.emit($event)"
438
438
  ></ngx-emoji>
439
439
  </ng-template>
440
- `, 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 });
440
+ `, 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: ["emojiOver", "emojiOverOutsideAngular", "emojiLeave", "emojiLeaveOutsideAngular", "emojiClick", "emojiClickOutsideAngular"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
441
441
  }
442
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: CategoryComponent, decorators: [{
442
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: CategoryComponent, decorators: [{
443
443
  type: Component,
444
444
  args: [{
445
445
  selector: 'emoji-category',
@@ -476,7 +476,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
476
476
  [useButton]="emojiUseButton"
477
477
  (emojiOverOutsideAngular)="emojiOverOutsideAngular.emit($event)"
478
478
  (emojiLeaveOutsideAngular)="emojiLeaveOutsideAngular.emit($event)"
479
- (emojiClick)="emojiClick.emit($event)"
479
+ (emojiClickOutsideAngular)="emojiClickOutsideAngular.emit($event)"
480
480
  ></ngx-emoji>
481
481
  </div>
482
482
  </div>
@@ -520,7 +520,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
520
520
  [useButton]="emojiUseButton"
521
521
  (emojiOverOutsideAngular)="emojiOverOutsideAngular.emit($event)"
522
522
  (emojiLeaveOutsideAngular)="emojiLeaveOutsideAngular.emit($event)"
523
- (emojiClick)="emojiClick.emit($event)"
523
+ (emojiClickOutsideAngular)="emojiClickOutsideAngular.emit($event)"
524
524
  ></ngx-emoji>
525
525
  </ng-template>
526
526
  `,
@@ -575,12 +575,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
575
575
  type: Input
576
576
  }], emojiUseButton: [{
577
577
  type: Input
578
- }], emojiClick: [{
579
- type: Output
580
578
  }], emojiOverOutsideAngular: [{
581
579
  type: Output
582
580
  }], emojiLeaveOutsideAngular: [{
583
581
  type: Output
582
+ }], emojiClickOutsideAngular: [{
583
+ type: Output
584
584
  }], container: [{
585
585
  type: ViewChild,
586
586
  args: ['container', { static: true }]
@@ -783,10 +783,10 @@ class EmojiSearch {
783
783
  addToSearch(emoticons, false);
784
784
  return search.join(',');
785
785
  }
786
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: EmojiSearch, deps: [{ token: i1.EmojiService }], target: i0.ɵɵFactoryTarget.Injectable });
787
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: EmojiSearch, providedIn: 'root' });
786
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: EmojiSearch, deps: [{ token: i1.EmojiService }], target: i0.ɵɵFactoryTarget.Injectable });
787
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: EmojiSearch, providedIn: 'root' });
788
788
  }
789
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: EmojiSearch, decorators: [{
789
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: EmojiSearch, decorators: [{
790
790
  type: Injectable,
791
791
  args: [{ providedIn: 'root' }]
792
792
  }], ctorParameters: function () { return [{ type: i1.EmojiService }]; } });
@@ -826,8 +826,8 @@ class SkinComponent {
826
826
  this.changeSkin.emit(skin);
827
827
  }
828
828
  }
829
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SkinComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
830
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: SkinComponent, isStandalone: true, selector: "emoji-skins", inputs: { skin: "skin", i18n: "i18n" }, outputs: { changeSkin: "changeSkin" }, ngImport: i0, template: `
829
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: SkinComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
830
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: SkinComponent, isStandalone: true, selector: "emoji-skins", inputs: { skin: "skin", i18n: "i18n" }, outputs: { changeSkin: "changeSkin" }, ngImport: i0, template: `
831
831
  <section class="emoji-mart-skin-swatches" [class.opened]="opened">
832
832
  <span
833
833
  *ngFor="let skinTone of skinTones"
@@ -852,7 +852,7 @@ class SkinComponent {
852
852
  </section>
853
853
  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
854
854
  }
855
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SkinComponent, decorators: [{
855
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: SkinComponent, decorators: [{
856
856
  type: Component,
857
857
  args: [{
858
858
  selector: 'emoji-skins',
@@ -932,8 +932,8 @@ class PreviewComponent {
932
932
  this.listedEmoticons = listedEmoticons;
933
933
  this.ref?.detectChanges();
934
934
  }
935
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: PreviewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.EmojiService }], target: i0.ɵɵFactoryTarget.Component });
936
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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: `
935
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: PreviewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.EmojiService }], target: i0.ɵɵFactoryTarget.Component });
936
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", 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: `
937
937
  <div class="emoji-mart-preview" *ngIf="emoji && emojiData">
938
938
  <div class="emoji-mart-preview-emoji">
939
939
  <ngx-emoji
@@ -993,9 +993,9 @@ class PreviewComponent {
993
993
  ></emoji-skins>
994
994
  </div>
995
995
  </div>
996
- `, 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 });
996
+ `, 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: ["emojiOver", "emojiOverOutsideAngular", "emojiLeave", "emojiLeaveOutsideAngular", "emojiClick", "emojiClickOutsideAngular"] }, { kind: "component", type: SkinComponent, selector: "emoji-skins", inputs: ["skin", "i18n"], outputs: ["changeSkin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
997
997
  }
998
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: PreviewComponent, decorators: [{
998
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: PreviewComponent, decorators: [{
999
999
  type: Component,
1000
1000
  args: [{
1001
1001
  selector: 'emoji-preview',
@@ -1093,6 +1093,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
1093
1093
 
1094
1094
  let id = 0;
1095
1095
  class SearchComponent {
1096
+ ngZone;
1096
1097
  emojiSearch;
1097
1098
  maxResults = 75;
1098
1099
  autoFocus = false;
@@ -1103,35 +1104,34 @@ class SearchComponent {
1103
1104
  icons;
1104
1105
  emojisToShowFilter;
1105
1106
  searchResults = new EventEmitter();
1106
- enterKey = new EventEmitter();
1107
+ enterKeyOutsideAngular = new EventEmitter();
1107
1108
  inputRef;
1108
1109
  isSearching = false;
1109
1110
  icon;
1110
1111
  query = '';
1111
1112
  inputId = `emoji-mart-search-${++id}`;
1112
- constructor(emojiSearch) {
1113
+ destroy$ = new Subject();
1114
+ constructor(ngZone, emojiSearch) {
1115
+ this.ngZone = ngZone;
1113
1116
  this.emojiSearch = emojiSearch;
1114
1117
  }
1115
1118
  ngOnInit() {
1116
1119
  this.icon = this.icons.search;
1120
+ this.setupKeyupListener();
1117
1121
  }
1118
1122
  ngAfterViewInit() {
1119
1123
  if (this.autoFocus) {
1120
1124
  this.inputRef.nativeElement.focus();
1121
1125
  }
1122
1126
  }
1127
+ ngOnDestroy() {
1128
+ this.destroy$.next();
1129
+ }
1123
1130
  clear() {
1124
1131
  this.query = '';
1125
1132
  this.handleSearch('');
1126
1133
  this.inputRef.nativeElement.focus();
1127
1134
  }
1128
- handleEnterKey($event) {
1129
- if (!this.query) {
1130
- return;
1131
- }
1132
- this.enterKey.emit($event);
1133
- $event.preventDefault();
1134
- }
1135
1135
  handleSearch(value) {
1136
1136
  if (value === '') {
1137
1137
  this.icon = this.icons.search;
@@ -1147,14 +1147,24 @@ class SearchComponent {
1147
1147
  handleChange() {
1148
1148
  this.handleSearch(this.query);
1149
1149
  }
1150
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SearchComponent, deps: [{ token: EmojiSearch }], target: i0.ɵɵFactoryTarget.Component });
1151
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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: `
1150
+ setupKeyupListener() {
1151
+ this.ngZone.runOutsideAngular(() => fromEvent(this.inputRef.nativeElement, 'keyup')
1152
+ .pipe(takeUntil(this.destroy$))
1153
+ .subscribe($event => {
1154
+ if (!this.query || $event.key !== 'Enter') {
1155
+ return;
1156
+ }
1157
+ this.enterKeyOutsideAngular.emit($event);
1158
+ $event.preventDefault();
1159
+ }));
1160
+ }
1161
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: SearchComponent, deps: [{ token: i0.NgZone }, { token: EmojiSearch }], target: i0.ɵɵFactoryTarget.Component });
1162
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", 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", enterKeyOutsideAngular: "enterKeyOutsideAngular" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, static: true }], ngImport: i0, template: `
1152
1163
  <div class="emoji-mart-search">
1153
1164
  <input
1154
1165
  [id]="inputId"
1155
1166
  #inputRef
1156
1167
  type="search"
1157
- (keyup.enter)="handleEnterKey($event)"
1158
1168
  [placeholder]="i18n.search"
1159
1169
  [autofocus]="autoFocus"
1160
1170
  [(ngModel)]="query"
@@ -1188,7 +1198,7 @@ class SearchComponent {
1188
1198
  </div>
1189
1199
  `, 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"] }] });
1190
1200
  }
1191
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SearchComponent, decorators: [{
1201
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: SearchComponent, decorators: [{
1192
1202
  type: Component,
1193
1203
  args: [{
1194
1204
  selector: 'emoji-search',
@@ -1198,7 +1208,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
1198
1208
  [id]="inputId"
1199
1209
  #inputRef
1200
1210
  type="search"
1201
- (keyup.enter)="handleEnterKey($event)"
1202
1211
  [placeholder]="i18n.search"
1203
1212
  [autofocus]="autoFocus"
1204
1213
  [(ngModel)]="query"
@@ -1235,7 +1244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
1235
1244
  standalone: true,
1236
1245
  imports: [FormsModule],
1237
1246
  }]
1238
- }], ctorParameters: function () { return [{ type: EmojiSearch }]; }, propDecorators: { maxResults: [{
1247
+ }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: EmojiSearch }]; }, propDecorators: { maxResults: [{
1239
1248
  type: Input
1240
1249
  }], autoFocus: [{
1241
1250
  type: Input
@@ -1253,7 +1262,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
1253
1262
  type: Input
1254
1263
  }], searchResults: [{
1255
1264
  type: Output
1256
- }], enterKey: [{
1265
+ }], enterKeyOutsideAngular: [{
1257
1266
  type: Output
1258
1267
  }], inputRef: [{
1259
1268
  type: ViewChild,
@@ -1619,11 +1628,16 @@ class PickerComponent {
1619
1628
  this.handleScroll();
1620
1629
  }
1621
1630
  handleEnterKey($event, emoji) {
1631
+ // Note: the `handleEnterKey` is invoked when the search component dispatches the
1632
+ // `enterKeyOutsideAngular` event or when any emoji is clicked thus `emojiClickOutsideAngular`
1633
+ // event is dispatched. Both events are dispatched outside of the Angular zone to prevent
1634
+ // no-op ticks, basically when users outside of the picker component are not listening
1635
+ // to any of these events.
1622
1636
  if (!emoji) {
1623
1637
  if (this.SEARCH_CATEGORY.emojis !== null && this.SEARCH_CATEGORY.emojis.length) {
1624
1638
  emoji = this.SEARCH_CATEGORY.emojis[0];
1625
1639
  if (emoji) {
1626
- this.emojiSelect.emit({ $event, emoji });
1640
+ dispatchInAngularContextIfObserved(this.emojiSelect, this.ngZone, { $event, emoji });
1627
1641
  }
1628
1642
  else {
1629
1643
  return;
@@ -1635,8 +1649,10 @@ class PickerComponent {
1635
1649
  }
1636
1650
  const component = this.categoryRefs.toArray()[1];
1637
1651
  if (component && this.enableFrequentEmojiSort) {
1638
- component.updateRecentEmojis();
1639
- component.ref.markForCheck();
1652
+ this.ngZone.run(() => {
1653
+ component.updateRecentEmojis();
1654
+ component.ref.markForCheck();
1655
+ });
1640
1656
  }
1641
1657
  }
1642
1658
  handleEmojiOver($event) {
@@ -1665,8 +1681,10 @@ class PickerComponent {
1665
1681
  });
1666
1682
  }
1667
1683
  handleEmojiClick($event) {
1668
- this.emojiClick.emit($event);
1669
- this.emojiSelect.emit($event);
1684
+ // Note: we're getting back into the Angular zone because click events on emojis are handled
1685
+ // outside of the Angular zone.
1686
+ dispatchInAngularContextIfObserved(this.emojiClick, this.ngZone, $event);
1687
+ dispatchInAngularContextIfObserved(this.emojiSelect, this.ngZone, $event);
1670
1688
  this.handleEnterKey($event.$event, $event.emoji);
1671
1689
  }
1672
1690
  handleSkinChange(skin) {
@@ -1686,12 +1704,12 @@ class PickerComponent {
1686
1704
  this.animationFrameRequestId = null;
1687
1705
  }
1688
1706
  }
1689
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: PickerComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: EmojiFrequentlyService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
1690
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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 });
1707
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: PickerComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: EmojiFrequentlyService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
1708
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", 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 (enterKeyOutsideAngular)=\"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 (emojiClickOutsideAngular)=\"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", "enterKeyOutsideAngular"] }, { 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: ["emojiOverOutsideAngular", "emojiLeaveOutsideAngular", "emojiClickOutsideAngular"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1691
1709
  }
1692
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: PickerComponent, decorators: [{
1710
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: PickerComponent, decorators: [{
1693
1711
  type: Component,
1694
- 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" }]
1712
+ 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 (enterKeyOutsideAngular)=\"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 (emojiClickOutsideAngular)=\"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" }]
1695
1713
  }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: EmojiFrequentlyService }, { type: undefined, decorators: [{
1696
1714
  type: Inject,
1697
1715
  args: [PLATFORM_ID]
@@ -1786,6 +1804,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
1786
1804
  }], backgroundImageFn: [{
1787
1805
  type: Input
1788
1806
  }] } });
1807
+ /**
1808
+ * This is only a helper function because the same code is being re-used many times.
1809
+ */
1810
+ function dispatchInAngularContextIfObserved(emitter, ngZone, value) {
1811
+ if (emitter.observed) {
1812
+ ngZone.run(() => emitter.emit(value));
1813
+ }
1814
+ }
1789
1815
 
1790
1816
  const components = [
1791
1817
  PickerComponent,
@@ -1796,8 +1822,8 @@ const components = [
1796
1822
  SkinComponent,
1797
1823
  ];
1798
1824
  class PickerModule {
1799
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: PickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1800
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: PickerModule, imports: [PickerComponent,
1825
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: PickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1826
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.5", ngImport: i0, type: PickerModule, imports: [PickerComponent,
1801
1827
  AnchorsComponent,
1802
1828
  CategoryComponent,
1803
1829
  SearchComponent,
@@ -1808,9 +1834,9 @@ class PickerModule {
1808
1834
  SearchComponent,
1809
1835
  PreviewComponent,
1810
1836
  SkinComponent] });
1811
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: PickerModule, imports: [components] });
1837
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: PickerModule, imports: [components] });
1812
1838
  }
1813
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: PickerModule, decorators: [{
1839
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: PickerModule, decorators: [{
1814
1840
  type: NgModule,
1815
1841
  args: [{
1816
1842
  imports: components,