@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.
- package/README.md +0 -1
- package/category.component.d.ts +2 -2
- package/esm2022/anchors.component.mjs +3 -3
- package/esm2022/category.component.mjs +12 -12
- package/esm2022/emoji-frequently.service.mjs +3 -3
- package/esm2022/emoji-search.service.mjs +3 -3
- package/esm2022/ngx-emoji/emoji.component.mjs +20 -15
- package/esm2022/ngx-emoji/emoji.module.mjs +4 -4
- package/esm2022/ngx-emoji/emoji.service.mjs +3 -3
- package/esm2022/picker.component.mjs +27 -10
- package/esm2022/picker.module.mjs +4 -4
- package/esm2022/preview.component.mjs +5 -5
- package/esm2022/search.component.mjs +27 -17
- package/esm2022/skins.component.mjs +3 -3
- package/fesm2022/ctrl-ngx-emoji-mart-ngx-emoji.mjs +26 -21
- package/fesm2022/ctrl-ngx-emoji-mart-ngx-emoji.mjs.map +1 -1
- package/fesm2022/ctrl-ngx-emoji-mart.mjs +83 -57
- package/fesm2022/ctrl-ngx-emoji-mart.mjs.map +1 -1
- package/ngx-emoji/emoji.component.d.ts +3 -3
- package/package.json +1 -1
- package/search.component.d.ts +9 -6
@@ -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.
|
28
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.
|
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.
|
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.
|
182
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.
|
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.
|
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.
|
360
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.
|
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
|
-
(
|
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
|
-
(
|
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: ["
|
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.
|
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
|
-
(
|
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
|
-
(
|
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.
|
787
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.
|
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.
|
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.
|
830
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.
|
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.
|
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.
|
936
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.
|
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: ["
|
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.
|
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
|
-
|
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
|
-
|
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
|
-
|
1151
|
-
|
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.
|
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
|
-
}],
|
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.
|
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
|
-
|
1639
|
-
|
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
|
-
|
1669
|
-
|
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.
|
1690
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.
|
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.
|
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 (
|
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.
|
1800
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.
|
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.
|
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.
|
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,
|