@ctrl/ngx-emoji-mart
Version:
Customizable Slack-like emoji picker for Angular
1 lines • 109 kB
Source Map (JSON)
{"version":3,"file":"ctrl-ngx-emoji-mart.mjs","sources":["../../src/lib/picker/anchors.component.ts","../../src/lib/picker/emoji-frequently.service.ts","../../src/lib/picker/category.component.ts","../../src/lib/picker/utils/index.ts","../../src/lib/picker/emoji-search.service.ts","../../src/lib/picker/skins.component.ts","../../src/lib/picker/preview.component.ts","../../src/lib/picker/search.component.ts","../../src/lib/picker/svgs/index.ts","../../src/lib/picker/picker.component.ts","../../src/lib/picker/picker.component.html","../../src/lib/picker/picker.module.ts","../../src/lib/picker/ctrl-ngx-emoji-mart.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\n\nimport { EmojiCategory } from '@ctrl/ngx-emoji-mart/ngx-emoji';\n\n@Component({\n selector: 'emoji-mart-anchors',\n template: `\n <div class=\"emoji-mart-anchors\">\n <ng-template\n ngFor\n let-category\n [ngForOf]=\"categories\"\n let-idx=\"index\"\n [ngForTrackBy]=\"trackByFn\"\n >\n <span\n *ngIf=\"category.anchor !== false\"\n [attr.title]=\"i18n.categories[category.id]\"\n (click)=\"this.handleClick($event, idx)\"\n class=\"emoji-mart-anchor\"\n [class.emoji-mart-anchor-selected]=\"category.name === selected\"\n [style.color]=\"category.name === selected ? color : null\"\n >\n <div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\">\n <path [attr.d]=\"icons[category.id]\" />\n </svg>\n </div>\n <span class=\"emoji-mart-anchor-bar\" [style.background-color]=\"color\"></span>\n </span>\n </ng-template>\n </div>\n `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n standalone: true,\n imports: [CommonModule],\n})\nexport class AnchorsComponent {\n @Input() categories: EmojiCategory[] = [];\n @Input() color?: string;\n @Input() selected?: string;\n @Input() i18n: any;\n @Input() icons: { [key: string]: string } = {};\n @Output() anchorClick = new EventEmitter<{ category: EmojiCategory; index: number }>();\n\n trackByFn(idx: number, cat: EmojiCategory) {\n return cat.id;\n }\n\n handleClick($event: Event, index: number) {\n this.anchorClick.emit({\n category: this.categories[index],\n index,\n });\n }\n}\n","import { isPlatformBrowser } from '@angular/common';\nimport { Inject, Injectable, PLATFORM_ID } from '@angular/core';\n\nimport { EmojiData } from '@ctrl/ngx-emoji-mart/ngx-emoji';\n\n@Injectable({ providedIn: 'root' })\nexport class EmojiFrequentlyService {\n NAMESPACE = 'emoji-mart';\n frequently: { [key: string]: number } | null = null;\n defaults: { [key: string]: number } = {};\n initialized = false;\n DEFAULTS = [\n '+1',\n 'grinning',\n 'kissing_heart',\n 'heart_eyes',\n 'laughing',\n 'stuck_out_tongue_winking_eye',\n 'sweat_smile',\n 'joy',\n 'scream',\n 'disappointed',\n 'unamused',\n 'weary',\n 'sob',\n 'sunglasses',\n 'heart',\n 'poop',\n ];\n constructor(@Inject(PLATFORM_ID) private platformId: string) {}\n init() {\n this.frequently = JSON.parse(\n (isPlatformBrowser(this.platformId) &&\n localStorage.getItem(`${this.NAMESPACE}.frequently`)) ||\n 'null',\n );\n this.initialized = true;\n }\n add(emoji: EmojiData) {\n if (!this.initialized) {\n this.init();\n }\n if (!this.frequently) {\n this.frequently = this.defaults;\n }\n if (!this.frequently[emoji.id]) {\n this.frequently[emoji.id] = 0;\n }\n this.frequently[emoji.id] += 1;\n\n if (isPlatformBrowser(this.platformId)) {\n localStorage.setItem(`${this.NAMESPACE}.last`, emoji.id);\n localStorage.setItem(`${this.NAMESPACE}.frequently`, JSON.stringify(this.frequently));\n }\n }\n get(perLine: number, totalLines: number) {\n if (!this.initialized) {\n this.init();\n }\n if (this.frequently === null) {\n this.defaults = {};\n const result = [];\n\n for (let i = 0; i < perLine; i++) {\n this.defaults[this.DEFAULTS[i]] = perLine - i;\n result.push(this.DEFAULTS[i]);\n }\n return result;\n }\n\n const quantity = perLine * totalLines;\n const frequentlyKeys = Object.keys(this.frequently);\n\n const sorted = frequentlyKeys\n .sort((a, b) => this.frequently![a] - this.frequently![b])\n .reverse();\n const sliced = sorted.slice(0, quantity);\n\n const last =\n isPlatformBrowser(this.platformId) && localStorage.getItem(`${this.NAMESPACE}.last`);\n\n if (last && !sliced.includes(last)) {\n sliced.pop();\n sliced.push(last);\n }\n return sliced;\n }\n}\n","import { Emoji, EmojiComponent, EmojiService } from '@ctrl/ngx-emoji-mart/ngx-emoji';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n OnChanges,\n OnInit,\n Output,\n SimpleChanges,\n ViewChild,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { Observable, Subject } from 'rxjs';\n\nimport { EmojiFrequentlyService } from './emoji-frequently.service';\n\n@Component({\n selector: 'emoji-category',\n template: `\n <section\n #container\n class=\"emoji-mart-category\"\n [attr.aria-label]=\"i18n.categories[id]\"\n [class.emoji-mart-no-results]=\"noEmojiToDisplay\"\n [ngStyle]=\"containerStyles\"\n >\n <div class=\"emoji-mart-category-label\" [ngStyle]=\"labelStyles\" [attr.data-name]=\"name\">\n <!-- already labeled by the section aria-label -->\n <span #label [ngStyle]=\"labelSpanStyles\" aria-hidden=\"true\">\n {{ i18n.categories[id] }}\n </span>\n </div>\n\n <div *ngIf=\"virtualize; else normalRenderTemplate\">\n <div *ngIf=\"filteredEmojis$ | async as filteredEmojis\">\n <ngx-emoji\n *ngFor=\"let emoji of filteredEmojis; trackBy: trackById\"\n [emoji]=\"emoji\"\n [size]=\"emojiSize\"\n [skin]=\"emojiSkin\"\n [isNative]=\"emojiIsNative\"\n [set]=\"emojiSet\"\n [sheetSize]=\"emojiSheetSize\"\n [forceSize]=\"emojiForceSize\"\n [tooltip]=\"emojiTooltip\"\n [backgroundImageFn]=\"emojiBackgroundImageFn\"\n [imageUrlFn]=\"emojiImageUrlFn\"\n [hideObsolete]=\"hideObsolete\"\n [useButton]=\"emojiUseButton\"\n (emojiOverOutsideAngular)=\"emojiOverOutsideAngular.emit($event)\"\n (emojiLeaveOutsideAngular)=\"emojiLeaveOutsideAngular.emit($event)\"\n (emojiClickOutsideAngular)=\"emojiClickOutsideAngular.emit($event)\"\n ></ngx-emoji>\n </div>\n </div>\n\n <div *ngIf=\"noEmojiToDisplay\">\n <div>\n <ngx-emoji\n [emoji]=\"notFoundEmoji\"\n [size]=\"38\"\n [skin]=\"emojiSkin\"\n [isNative]=\"emojiIsNative\"\n [set]=\"emojiSet\"\n [sheetSize]=\"emojiSheetSize\"\n [forceSize]=\"emojiForceSize\"\n [tooltip]=\"emojiTooltip\"\n [backgroundImageFn]=\"emojiBackgroundImageFn\"\n [useButton]=\"emojiUseButton\"\n ></ngx-emoji>\n </div>\n\n <div class=\"emoji-mart-no-results-label\">\n {{ i18n.notfound }}\n </div>\n </div>\n </section>\n\n <ng-template #normalRenderTemplate>\n <ngx-emoji\n *ngFor=\"let emoji of emojisToDisplay; trackBy: trackById\"\n [emoji]=\"emoji\"\n [size]=\"emojiSize\"\n [skin]=\"emojiSkin\"\n [isNative]=\"emojiIsNative\"\n [set]=\"emojiSet\"\n [sheetSize]=\"emojiSheetSize\"\n [forceSize]=\"emojiForceSize\"\n [tooltip]=\"emojiTooltip\"\n [backgroundImageFn]=\"emojiBackgroundImageFn\"\n [imageUrlFn]=\"emojiImageUrlFn\"\n [hideObsolete]=\"hideObsolete\"\n [useButton]=\"emojiUseButton\"\n (emojiOverOutsideAngular)=\"emojiOverOutsideAngular.emit($event)\"\n (emojiLeaveOutsideAngular)=\"emojiLeaveOutsideAngular.emit($event)\"\n (emojiClickOutsideAngular)=\"emojiClickOutsideAngular.emit($event)\"\n ></ngx-emoji>\n </ng-template>\n `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n standalone: true,\n imports: [CommonModule, EmojiComponent],\n})\nexport class CategoryComponent implements OnChanges, OnInit, AfterViewInit {\n @Input() emojis: any[] | null = null;\n @Input() hasStickyPosition = true;\n @Input() name = '';\n @Input() perLine = 9;\n @Input() totalFrequentLines = 4;\n @Input() recent: string[] = [];\n @Input() custom: any[] = [];\n @Input() i18n: any;\n @Input() id: any;\n @Input() hideObsolete = true;\n @Input() notFoundEmoji?: string;\n @Input() virtualize = false;\n @Input() virtualizeOffset = 0;\n @Input() emojiIsNative?: Emoji['isNative'];\n @Input() emojiSkin!: Emoji['skin'];\n @Input() emojiSize!: Emoji['size'];\n @Input() emojiSet!: Emoji['set'];\n @Input() emojiSheetSize!: Emoji['sheetSize'];\n @Input() emojiForceSize!: Emoji['forceSize'];\n @Input() emojiTooltip!: Emoji['tooltip'];\n @Input() emojiBackgroundImageFn?: Emoji['backgroundImageFn'];\n @Input() emojiImageUrlFn?: Emoji['imageUrlFn'];\n @Input() emojiUseButton?: boolean;\n\n /**\n * Note: the suffix is added explicitly so we know the event is dispatched outside of the Angular zone.\n */\n @Output() emojiOverOutsideAngular: Emoji['emojiOver'] = new EventEmitter();\n @Output() emojiLeaveOutsideAngular: Emoji['emojiLeave'] = new EventEmitter();\n @Output() emojiClickOutsideAngular: Emoji['emojiClick'] = new EventEmitter();\n\n @ViewChild('container', { static: true }) container!: ElementRef;\n @ViewChild('label', { static: true }) label!: ElementRef;\n containerStyles: any = {};\n emojisToDisplay: any[] = [];\n private filteredEmojisSubject = new Subject<any[] | null | undefined>();\n filteredEmojis$: Observable<any[] | null | undefined> = this.filteredEmojisSubject.asObservable();\n labelStyles: any = {};\n labelSpanStyles: any = {};\n margin = 0;\n minMargin = 0;\n maxMargin = 0;\n top = 0;\n rows = 0;\n\n constructor(\n public ref: ChangeDetectorRef,\n private emojiService: EmojiService,\n private frequently: EmojiFrequentlyService,\n ) {}\n\n ngOnInit() {\n this.updateRecentEmojis();\n this.emojisToDisplay = this.filterEmojis();\n\n if (this.noEmojiToDisplay) {\n this.containerStyles = { display: 'none' };\n }\n\n if (!this.hasStickyPosition) {\n this.labelStyles = { height: 28 };\n // this.labelSpanStyles = { position: 'absolute' };\n }\n }\n\n ngOnChanges(changes: SimpleChanges) {\n if (changes.emojis?.currentValue?.length !== changes.emojis?.previousValue?.length) {\n this.emojisToDisplay = this.filterEmojis();\n this.ngAfterViewInit();\n }\n }\n\n ngAfterViewInit() {\n if (!this.virtualize) {\n return;\n }\n\n const { width } = this.container.nativeElement.getBoundingClientRect();\n\n const perRow = Math.floor(width / (this.emojiSize + 12));\n this.rows = Math.ceil(this.emojisToDisplay.length / perRow);\n\n this.containerStyles = {\n ...this.containerStyles,\n minHeight: `${this.rows * (this.emojiSize + 12) + 28}px`,\n };\n\n this.ref.detectChanges();\n\n this.handleScroll(this.container.nativeElement.parentNode.parentNode.scrollTop);\n }\n\n get noEmojiToDisplay(): boolean {\n return this.emojisToDisplay.length === 0;\n }\n\n memoizeSize() {\n const parent = this.container.nativeElement.parentNode.parentNode;\n const { top, height } = this.container.nativeElement.getBoundingClientRect();\n const parentTop = parent.getBoundingClientRect().top;\n const labelHeight = this.label.nativeElement.getBoundingClientRect().height;\n\n this.top = top - parentTop + parent.scrollTop;\n\n if (height === 0) {\n this.maxMargin = 0;\n } else {\n this.maxMargin = height - labelHeight;\n }\n }\n\n handleScroll(scrollTop: number): boolean {\n let margin = scrollTop - this.top;\n margin = margin < this.minMargin ? this.minMargin : margin;\n margin = margin > this.maxMargin ? this.maxMargin : margin;\n\n if (this.virtualize) {\n const { top, height } = this.container.nativeElement.getBoundingClientRect();\n const parentHeight = this.container.nativeElement.parentNode.parentNode.clientHeight;\n\n if (\n parentHeight + (parentHeight + this.virtualizeOffset) >= top &&\n -height - (parentHeight + this.virtualizeOffset) <= top\n ) {\n this.filteredEmojisSubject.next(this.emojisToDisplay);\n } else {\n this.filteredEmojisSubject.next([]);\n }\n }\n\n if (margin === this.margin) {\n this.ref.detectChanges();\n return false;\n }\n\n if (!this.hasStickyPosition) {\n this.label.nativeElement.style.top = `${margin}px`;\n }\n\n this.margin = margin;\n this.ref.detectChanges();\n return true;\n }\n\n updateRecentEmojis() {\n if (this.name !== 'Recent') {\n return;\n }\n\n let frequentlyUsed = this.recent || this.frequently.get(this.perLine, this.totalFrequentLines);\n if (!frequentlyUsed || !frequentlyUsed.length) {\n frequentlyUsed = this.frequently.get(this.perLine, this.totalFrequentLines);\n }\n if (!frequentlyUsed.length) {\n return;\n }\n this.emojis = frequentlyUsed\n .map(id => {\n const emoji = this.custom.filter((e: any) => e.id === id)[0];\n if (emoji) {\n return emoji;\n }\n\n return id;\n })\n .filter(id => !!this.emojiService.getData(id));\n }\n\n updateDisplay(display: 'none' | 'block') {\n this.containerStyles.display = display;\n this.updateRecentEmojis();\n this.ref.detectChanges();\n }\n\n trackById(index: number, item: any) {\n return item;\n }\n\n private filterEmojis(): any[] {\n const newEmojis = [];\n for (const emoji of this.emojis || []) {\n if (!emoji) {\n continue;\n }\n const data = this.emojiService.getData(emoji);\n if (!data || (data.obsoletedBy && this.hideObsolete) || (!data.unified && !data.custom)) {\n continue;\n }\n newEmojis.push(emoji);\n }\n return newEmojis;\n }\n}\n","function uniq(arr: any[]) {\n return arr.reduce((acc: Array<any>, item: any) => {\n if (!acc.includes(item)) {\n acc.push(item);\n }\n return acc;\n }, []);\n}\n\nexport function intersect(a: any, b: any) {\n const uniqA = uniq(a);\n const uniqB = uniq(b);\n\n return uniqA.filter((item: any) => uniqB.indexOf(item) >= 0);\n}\n\n// https://github.com/sonicdoe/measure-scrollbar\nexport function measureScrollbar() {\n if (typeof document === 'undefined') {\n return 0;\n }\n const div = document.createElement('div');\n\n div.style.width = '100px';\n div.style.height = '100px';\n div.style.overflow = 'scroll';\n div.style.position = 'absolute';\n div.style.top = '-9999px';\n\n document.body.appendChild(div);\n const scrollbarWidth = div.offsetWidth - div.clientWidth;\n document.body.removeChild(div);\n\n return scrollbarWidth;\n}\n","import { Injectable } from '@angular/core';\n\nimport { categories, EmojiData, EmojiService } from '@ctrl/ngx-emoji-mart/ngx-emoji';\nimport { intersect } from './utils';\n\n@Injectable({ providedIn: 'root' })\nexport class EmojiSearch {\n originalPool: any = {};\n index: {\n results?: EmojiData[];\n pool?: { [key: string]: EmojiData };\n [key: string]: any;\n } = {};\n emojisList: any = {};\n emoticonsList: { [key: string]: string } = {};\n emojiSearch: { [key: string]: string } = {};\n\n constructor(private emojiService: EmojiService) {\n for (const emojiData of this.emojiService.emojis) {\n const { shortNames, emoticons } = emojiData;\n const id = shortNames[0];\n\n for (const emoticon of emoticons) {\n if (this.emoticonsList[emoticon]) {\n continue;\n }\n\n this.emoticonsList[emoticon] = id;\n }\n\n this.emojisList[id] = this.emojiService.getSanitizedData(id);\n this.originalPool[id] = emojiData;\n }\n }\n\n addCustomToPool(custom: any, pool: any) {\n for (const emoji of custom) {\n const emojiId = emoji.id || emoji.shortNames[0];\n\n if (emojiId && !pool[emojiId]) {\n pool[emojiId] = this.emojiService.getData(emoji);\n this.emojisList[emojiId] = this.emojiService.getSanitizedData(emoji);\n }\n }\n }\n\n search(\n value: string,\n emojisToShowFilter?: (x: any) => boolean,\n maxResults = 75,\n include: any[] = [],\n exclude: any[] = [],\n custom: any[] = [],\n ): EmojiData[] | null {\n this.addCustomToPool(custom, this.originalPool);\n\n let results: EmojiData[] | undefined;\n let pool = this.originalPool;\n\n if (value.length) {\n if (value === '-' || value === '-1') {\n return [this.emojisList['-1']];\n }\n if (value === '+' || value === '+1') {\n return [this.emojisList['+1']];\n }\n\n let values = value.toLowerCase().split(/[\\s|,|\\-|_]+/);\n let allResults = [];\n\n if (values.length > 2) {\n values = [values[0], values[1]];\n }\n\n if (include.length || exclude.length) {\n pool = {};\n\n for (const category of categories || []) {\n const isIncluded = include && include.length ? include.indexOf(category.id) > -1 : true;\n const isExcluded = exclude && exclude.length ? exclude.indexOf(category.id) > -1 : false;\n\n if (!isIncluded || isExcluded) {\n continue;\n }\n\n for (const emojiId of category.emojis || []) {\n // Need to make sure that pool gets keyed\n // with the correct id, which is why we call emojiService.getData below\n const emoji = this.emojiService.getData(emojiId);\n pool[emoji?.id ?? ''] = emoji;\n }\n }\n\n if (custom.length) {\n const customIsIncluded =\n include && include.length ? include.indexOf('custom') > -1 : true;\n const customIsExcluded =\n exclude && exclude.length ? exclude.indexOf('custom') > -1 : false;\n if (customIsIncluded && !customIsExcluded) {\n this.addCustomToPool(custom, pool);\n }\n }\n }\n\n allResults = values\n .map(v => {\n let aPool = pool;\n let aIndex = this.index;\n let length = 0;\n\n for (let charIndex = 0; charIndex < v.length; charIndex++) {\n const char = v[charIndex];\n length++;\n if (!aIndex[char]) {\n aIndex[char] = {};\n }\n aIndex = aIndex[char];\n\n if (!aIndex.results) {\n const scores: { [key: string]: number } = {};\n\n aIndex.results = [];\n aIndex.pool = {};\n\n for (const id of Object.keys(aPool)) {\n const emoji = aPool[id];\n if (!this.emojiSearch[id]) {\n this.emojiSearch[id] = this.buildSearch(\n emoji.short_names,\n emoji.name,\n emoji.id,\n emoji.keywords,\n emoji.emoticons,\n );\n }\n const query = this.emojiSearch[id];\n const sub = v.substr(0, length);\n const subIndex = query.indexOf(sub);\n\n if (subIndex !== -1) {\n let score = subIndex + 1;\n if (sub === id) {\n score = 0;\n }\n\n aIndex.results.push(this.emojisList[id]);\n aIndex.pool[id] = emoji;\n\n scores[id] = score;\n }\n }\n\n aIndex.results.sort((a, b) => {\n const aScore = scores[a.id];\n const bScore = scores[b.id];\n\n return aScore - bScore;\n });\n }\n\n aPool = aIndex.pool;\n }\n\n return aIndex.results;\n })\n .filter(a => a);\n\n if (allResults.length > 1) {\n results = intersect.apply(null, allResults as any);\n } else if (allResults.length) {\n results = allResults[0];\n } else {\n results = [];\n }\n }\n\n if (results) {\n if (emojisToShowFilter) {\n results = results.filter((result: EmojiData) => {\n if (result && result.id) {\n return emojisToShowFilter(this.emojiService.names[result.id]);\n }\n return false;\n });\n }\n\n if (results && results.length > maxResults) {\n results = results.slice(0, maxResults);\n }\n }\n return results || null;\n }\n\n buildSearch(\n shortNames: string[],\n name: string,\n id: string,\n keywords: string[],\n emoticons: string[],\n ) {\n const search: string[] = [];\n\n const addToSearch = (strings: string | string[], split: boolean) => {\n if (!strings) {\n return;\n }\n\n const arr = Array.isArray(strings) ? strings : [strings];\n\n for (const str of arr) {\n const substrings = split ? str.split(/[-|_|\\s]+/) : [str];\n\n for (let s of substrings) {\n s = s.toLowerCase();\n\n if (!search.includes(s)) {\n search.push(s);\n }\n }\n }\n };\n\n addToSearch(shortNames, true);\n addToSearch(name, true);\n addToSearch(id, true);\n addToSearch(keywords, true);\n addToSearch(emoticons, false);\n\n return search.join(',');\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\n\nimport { Emoji } from '@ctrl/ngx-emoji-mart/ngx-emoji';\n\n@Component({\n selector: 'emoji-skins',\n template: `\n <section class=\"emoji-mart-skin-swatches\" [class.opened]=\"opened\">\n <span\n *ngFor=\"let skinTone of skinTones\"\n class=\"emoji-mart-skin-swatch\"\n [class.selected]=\"skinTone === skin\"\n >\n <span\n (click)=\"handleClick(skinTone)\"\n (keyup.enter)=\"handleClick(skinTone)\"\n (keyup.space)=\"handleClick(skinTone)\"\n class=\"emoji-mart-skin emoji-mart-skin-tone-{{ skinTone }}\"\n role=\"button\"\n [tabIndex]=\"tabIndex(skinTone)\"\n [attr.aria-hidden]=\"!isVisible(skinTone)\"\n [attr.aria-pressed]=\"pressed(skinTone)\"\n [attr.aria-haspopup]=\"!!isSelected(skinTone)\"\n [attr.aria-expanded]=\"expanded(skinTone)\"\n [attr.aria-label]=\"i18n.skintones[skinTone]\"\n [attr.title]=\"i18n.skintones[skinTone]\"\n ></span>\n </span>\n </section>\n `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n standalone: true,\n imports: [CommonModule],\n})\nexport class SkinComponent {\n /** currently selected skin */\n @Input() skin?: Emoji['skin'];\n @Input() i18n: any;\n @Output() changeSkin = new EventEmitter<Emoji['skin']>();\n opened = false;\n skinTones: Emoji['skin'][] = [1, 2, 3, 4, 5, 6];\n\n toggleOpen() {\n this.opened = !this.opened;\n }\n\n isSelected(skinTone: Emoji['skin']): boolean {\n return skinTone === this.skin;\n }\n\n isVisible(skinTone: Emoji['skin']): boolean {\n return this.opened || this.isSelected(skinTone);\n }\n\n pressed(skinTone: Emoji['skin']) {\n return this.opened ? !!this.isSelected(skinTone) : '';\n }\n\n tabIndex(skinTone: Emoji['skin']) {\n return this.isVisible(skinTone) ? '0' : '';\n }\n\n expanded(skinTone: Emoji['skin']) {\n return this.isSelected(skinTone) ? this.opened : '';\n }\n\n handleClick(skin: Emoji['skin']) {\n if (!this.opened) {\n this.opened = true;\n return;\n }\n this.opened = false;\n if (skin !== this.skin) {\n this.changeSkin.emit(skin);\n }\n }\n}\n","import { Emoji, EmojiComponent, EmojiData, EmojiService } from '@ctrl/ngx-emoji-mart/ngx-emoji';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n EventEmitter,\n Input,\n OnChanges,\n Output,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { SkinComponent } from './skins.component';\n\n@Component({\n selector: 'emoji-preview',\n template: `\n <div class=\"emoji-mart-preview\" *ngIf=\"emoji && emojiData\">\n <div class=\"emoji-mart-preview-emoji\">\n <ngx-emoji\n [emoji]=\"emoji\"\n [size]=\"38\"\n [isNative]=\"emojiIsNative\"\n [skin]=\"emojiSkin\"\n [size]=\"emojiSize\"\n [set]=\"emojiSet\"\n [sheetSize]=\"emojiSheetSize\"\n [backgroundImageFn]=\"emojiBackgroundImageFn\"\n [imageUrlFn]=\"emojiImageUrlFn\"\n ></ngx-emoji>\n </div>\n\n <div class=\"emoji-mart-preview-data\">\n <div class=\"emoji-mart-preview-name\">{{ emojiData.name }}</div>\n <div class=\"emoji-mart-preview-shortname\">\n <span\n class=\"emoji-mart-preview-shortname\"\n *ngFor=\"let short_name of emojiData.shortNames\"\n >\n :{{ short_name }}:\n </span>\n </div>\n <div class=\"emoji-mart-preview-emoticons\">\n <span class=\"emoji-mart-preview-emoticon\" *ngFor=\"let emoticon of listedEmoticons\">\n {{ emoticon }}\n </span>\n </div>\n </div>\n </div>\n\n <div class=\"emoji-mart-preview\" [hidden]=\"emoji\">\n <div class=\"emoji-mart-preview-emoji\">\n <ngx-emoji\n *ngIf=\"idleEmoji && idleEmoji.length\"\n [isNative]=\"emojiIsNative\"\n [skin]=\"emojiSkin\"\n [set]=\"emojiSet\"\n [emoji]=\"idleEmoji\"\n [backgroundImageFn]=\"emojiBackgroundImageFn\"\n [size]=\"38\"\n [imageUrlFn]=\"emojiImageUrlFn\"\n ></ngx-emoji>\n </div>\n\n <div class=\"emoji-mart-preview-data\">\n <span class=\"emoji-mart-title-label\">{{ title }}</span>\n </div>\n\n <div class=\"emoji-mart-preview-skins\">\n <emoji-skins\n [skin]=\"emojiSkin\"\n (changeSkin)=\"skinChange.emit($event)\"\n [i18n]=\"i18n\"\n ></emoji-skins>\n </div>\n </div>\n `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n standalone: true,\n imports: [CommonModule, EmojiComponent, SkinComponent],\n})\nexport class PreviewComponent implements OnChanges {\n @Input() title?: string;\n @Input() emoji: any;\n @Input() idleEmoji: any;\n @Input() i18n: any;\n @Input() emojiIsNative?: Emoji['isNative'];\n @Input() emojiSkin?: Emoji['skin'];\n @Input() emojiSize?: Emoji['size'];\n @Input() emojiSet?: Emoji['set'];\n @Input() emojiSheetSize?: Emoji['sheetSize'];\n @Input() emojiBackgroundImageFn?: Emoji['backgroundImageFn'];\n @Input() emojiImageUrlFn?: Emoji['imageUrlFn'];\n @Output() skinChange = new EventEmitter<Emoji['skin']>();\n emojiData: Partial<EmojiData> = {};\n listedEmoticons?: string[];\n\n constructor(public ref: ChangeDetectorRef, private emojiService: EmojiService) {}\n\n ngOnChanges() {\n if (!this.emoji) {\n return;\n }\n this.emojiData = this.emojiService.getData(\n this.emoji,\n this.emojiSkin,\n this.emojiSet,\n ) as EmojiData;\n const knownEmoticons: string[] = [];\n const listedEmoticons: string[] = [];\n const emoitcons = this.emojiData.emoticons || [];\n emoitcons.forEach((emoticon: string) => {\n if (knownEmoticons.indexOf(emoticon.toLowerCase()) >= 0) {\n return;\n }\n knownEmoticons.push(emoticon.toLowerCase());\n listedEmoticons.push(emoticon);\n });\n this.listedEmoticons = listedEmoticons;\n this.ref?.detectChanges();\n }\n}\n","import {\n AfterViewInit,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n NgZone,\n OnDestroy,\n OnInit,\n Output,\n ViewChild,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { EmojiSearch } from './emoji-search.service';\nimport { Subject, fromEvent, takeUntil } from 'rxjs';\n\nlet id = 0;\n\n@Component({\n selector: 'emoji-search',\n template: `\n <div class=\"emoji-mart-search\">\n <input\n [id]=\"inputId\"\n #inputRef\n type=\"search\"\n [placeholder]=\"i18n.search\"\n [autofocus]=\"autoFocus\"\n [(ngModel)]=\"query\"\n (ngModelChange)=\"handleChange()\"\n />\n <!--\n Use a <label> in addition to the placeholder for accessibility, but place it off-screen\n http://www.maxability.co.in/2016/01/placeholder-attribute-and-why-it-is-not-accessible/\n -->\n <label class=\"emoji-mart-sr-only\" [htmlFor]=\"inputId\">\n {{ i18n.search }}\n </label>\n <button\n type=\"button\"\n class=\"emoji-mart-search-icon\"\n (click)=\"clear()\"\n (keyup.enter)=\"clear()\"\n [disabled]=\"!isSearching\"\n [attr.aria-label]=\"i18n.clear\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n width=\"13\"\n height=\"13\"\n opacity=\"0.5\"\n >\n <path [attr.d]=\"icon\" />\n </svg>\n </button>\n </div>\n `,\n preserveWhitespaces: false,\n standalone: true,\n imports: [FormsModule],\n})\nexport class SearchComponent implements AfterViewInit, OnInit, OnDestroy {\n @Input() maxResults = 75;\n @Input() autoFocus = false;\n @Input() i18n: any;\n @Input() include: string[] = [];\n @Input() exclude: string[] = [];\n @Input() custom: any[] = [];\n @Input() icons!: { [key: string]: string };\n @Input() emojisToShowFilter?: (x: any) => boolean;\n @Output() searchResults = new EventEmitter<any[]>();\n @Output() enterKeyOutsideAngular = new EventEmitter<KeyboardEvent>();\n @ViewChild('inputRef', { static: true }) private inputRef!: ElementRef<HTMLInputElement>;\n isSearching = false;\n icon?: string;\n query = '';\n inputId = `emoji-mart-search-${++id}`;\n\n private destroy$ = new Subject<void>();\n\n constructor(private ngZone: NgZone, private emojiSearch: EmojiSearch) {}\n\n ngOnInit() {\n this.icon = this.icons.search;\n this.setupKeyupListener();\n }\n\n ngAfterViewInit() {\n if (this.autoFocus) {\n this.inputRef.nativeElement.focus();\n }\n }\n\n ngOnDestroy(): void {\n this.destroy$.next();\n }\n\n clear() {\n this.query = '';\n this.handleSearch('');\n this.inputRef.nativeElement.focus();\n }\n\n handleSearch(value: string) {\n if (value === '') {\n this.icon = this.icons.search;\n this.isSearching = false;\n } else {\n this.icon = this.icons.delete;\n this.isSearching = true;\n }\n const emojis = this.emojiSearch.search(\n this.query,\n this.emojisToShowFilter,\n this.maxResults,\n this.include,\n this.exclude,\n this.custom,\n ) as any[];\n this.searchResults.emit(emojis);\n }\n\n handleChange() {\n this.handleSearch(this.query);\n }\n\n private setupKeyupListener(): void {\n this.ngZone.runOutsideAngular(() =>\n fromEvent<KeyboardEvent>(this.inputRef.nativeElement, 'keyup')\n .pipe(takeUntil(this.destroy$))\n .subscribe($event => {\n if (!this.query || $event.key !== 'Enter') {\n return;\n }\n this.enterKeyOutsideAngular.emit($event);\n $event.preventDefault();\n }),\n );\n }\n}\n","/* eslint-disable max-len */\nexport const categories: { [key: string]: string } = {\n activity: `M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24m10 11h-5c.3-2.5 1.3-4.8 2-6.1a10 10 0 0 1 3 6.1m-9 0V2a10 10 0 0 1 4.4 1.6A18 18 0 0 0 15 11h-2zm-2 0H9a18 18 0 0 0-2.4-7.4A10 10 0 0 1 11 2.1V11zm0 2v9a10 10 0 0 1-4.4-1.6A18 18 0 0 0 9 13h2zm4 0a18 18 0 0 0 2.4 7.4 10 10 0 0 1-4.4 1.5V13h2zM5 4.9c.7 1.3 1.7 3.6 2 6.1H2a10 10 0 0 1 3-6.1M2 13h5c-.3 2.5-1.3 4.8-2 6.1A10 10 0 0 1 2 13m17 6.1c-.7-1.3-1.7-3.6-2-6.1h5a10 10 0 0 1-3 6.1`,\n\n custom: `M10 1h3v21h-3zm10.186 4l1.5 2.598L3.5 18.098 2 15.5zM2 7.598L3.5 5l18.186 10.5-1.5 2.598z`,\n\n flags: `M0 0l6 24h2L2 0zm21 5h-4l-1-4H4l3 12h3l1 4h13L21 5zM6.6 3h7.8l2 8H8.6l-2-8zm8.8 10l-2.9 1.9-.4-1.9h3.3zm3.6 0l-1.5-6h2l2 8H16l3-2z`,\n\n foods: `M17 5c-1.8 0-2.9.4-3.7 1 .5-1.3 1.8-3 4.7-3a1 1 0 0 0 0-2c-3 0-4.6 1.3-5.5 2.5l-.2.2c-.6-1.9-1.5-3.7-3-3.7C8.5 0 7.7.3 7 1c-2 1.5-1.7 2.9-.5 4C3.6 5.2 0 7.4 0 13c0 4.6 5 11 9 11 2 0 2.4-.5 3-1 .6.5 1 1 3 1 4 0 9-6.4 9-11 0-6-4-8-7-8M8.2 2.5c.7-.5 1-.5 1-.5.4.2 1 1.4 1.4 3-1.6-.6-2.8-1.3-3-1.8l.6-.7M15 22c-1 0-1.2-.1-1.6-.4l-.1-.2a2 2 0 0 0-2.6 0l-.1.2c-.4.3-.5.4-1.6.4-2.8 0-7-5.4-7-9 0-6 4.5-6 5-6 2 0 2.5.4 3.4 1.2l.3.3a2 2 0 0 0 2.6 0l.3-.3c1-.8 1.5-1.2 3.4-1.2.5 0 5 .1 5 6 0 3.6-4.2 9-7 9`,\n\n nature: `M15.5 8a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m-7 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m10.43-8h-.02c-.97 0-2.14.79-3.02 1.5A13.88 13.88 0 0 0 12 .99c-1.28 0-2.62.13-3.87.51C7.24.8 6.07 0 5.09 0h-.02C3.35 0 .07 2.67 0 7.03c-.04 2.47.28 4.23 1.04 5 .26.27.88.69 1.3.9.19 3.17.92 5.23 2.53 6.37.9.64 2.19.95 3.2 1.1-.03.2-.07.4-.07.6 0 1.77 2.35 3 4 3s4-1.23 4-3c0-.2-.04-.4-.07-.59 2.57-.38 5.43-1.87 5.92-7.58.4-.22.89-.57 1.1-.8.77-.76 1.09-2.52 1.05-5C23.93 2.67 20.65 0 18.93 0M3.23 9.13c-.24.29-.84 1.16-.9 1.24A9.67 9.67 0 0 1 2 7.08c.05-3.28 2.48-4.97 3.1-5.03.25.02.72.27 1.26.65A7.95 7.95 0 0 0 4 7.82c-.14.55-.4.86-.79 1.31M12 22c-.9 0-1.95-.7-2-1 0-.65.47-1.24 1-1.6v.6a1 1 0 1 0 2 0v-.6c.52.36 1 .95 1 1.6-.05.3-1.1 1-2 1m3-3.48v.02a4.75 4.75 0 0 0-1.26-1.02c1.09-.52 2.24-1.33 2.24-2.22 0-1.84-1.78-2.2-3.98-2.2s-3.98.36-3.98 2.2c0 .89 1.15 1.7 2.24 2.22A4.8 4.8 0 0 0 9 18.54v-.03a6.1 6.1 0 0 1-2.97-.84c-1.3-.92-1.84-3.04-1.86-6.48l.03-.04c.5-.82 1.49-1.45 1.8-3.1C6 6 7.36 4.42 8.36 3.53c1.01-.35 2.2-.53 3.59-.53 1.45 0 2.68.2 3.73.57 1 .9 2.32 2.46 2.32 4.48.31 1.65 1.3 2.27 1.8 3.1l.1.18c-.06 5.97-1.95 7.01-4.9 7.19m6.63-8.2l-.11-.2a7.59 7.59 0 0 0-.74-.98 3.02 3.02 0 0 1-.79-1.32 7.93 7.93 0 0 0-2.35-5.12c.53-.38 1-.63 1.26-.65.64.07 3.05 1.77 3.1 5.03.02 1.81-.35 3.22-.37 3.24`,\n\n objects: `M12 0a9 9 0 0 0-5 16.5V21s2 3 5 3 5-3 5-3v-4.5A9 9 0 0 0 12 0zm0 2a7 7 0 1 1 0 14 7 7 0 0 1 0-14zM9 17.5a9 9 0 0 0 6 0v.8a7 7 0 0 1-3 .7 7 7 0 0 1-3-.7v-.8zm.2 3a8.9 8.9 0 0 0 2.8.5c1 0 1.9-.2 2.8-.5-.6.7-1.6 1.5-2.8 1.5-1.1 0-2.1-.8-2.8-1.5zm5.5-8.1c-.8 0-1.1-.8-1.5-1.8-.5-1-.7-1.5-1.2-1.5s-.8.5-1.3 1.5c-.4 1-.8 1.8-1.6 1.8h-.3c-.5-.2-.8-.7-1.3-1.8l-.2-1A3 3 0 0 0 7 9a1 1 0 0 1 0-2c1.7 0 2 1.4 2.2 2.1.5-1 1.3-2 2.8-2 1.5 0 2.3 1.1 2.7 2.1.2-.8.6-2.2 2.3-2.2a1 1 0 1 1 0 2c-.2 0-.3.5-.3.7a6.5 6.5 0 0 1-.3 1c-.5 1-.8 1.7-1.7 1.7`,\n\n people: `M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24m0 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20M8 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4m8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4m-.8 8c-.7 1.2-1.8 2-3.3 2-1.5 0-2.7-.8-3.4-2H15m3-2H6a6 6 0 1 0 12 0`,\n\n places: `M6.5 12a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5m0 3c-.3 0-.5-.2-.5-.5s.2-.5.5-.5.5.2.5.5-.2.5-.5.5m11-3a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5m0 3c-.3 0-.5-.2-.5-.5s.2-.5.5-.5.5.2.5.5-.2.5-.5.5m5-5.5l-1-.4-.1-.1h.6c.6 0 1-.4 1-1 0-1-.9-2-2-2h-.6l-.8-1.7A3 3 0 0 0 16.8 2H7.2a3 3 0 0 0-2.8 2.3L3.6 6H3a2 2 0 0 0-2 2c0 .6.4 1 1 1h.6v.1l-1 .4a2 2 0 0 0-1.4 2l.7 7.6a1 1 0 0 0 1 .9H3v1c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2v-1h6v1c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2v-1h1.1a1 1 0 0 0 1-.9l.7-7.5a2 2 0 0 0-1.3-2.1M6.3 4.9c.1-.5.5-.9 1-.9h9.5c.4 0 .8.4 1 .9L19.2 9H4.7l1.6-4.1zM7 21H5v-1h2v1zm12 0h-2v-1h2v1zm2.2-3H2.8l-.7-6.6.9-.4h18l.9.4-.7 6.6z`,\n\n recent: `M13 4h-2v7H9v2h2v2h2v-2h4v-2h-4zm-1-4a12 12 0 1 0 0 24 12 12 0 0 0 0-24m0 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20`,\n\n symbols: `M0 0h11v2H0zm4 11h3V6h4V4H0v2h4zm11.5 6a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5m0-2.99a.5.5 0 0 1 0 .99c-.28 0-.5-.22-.5-.5s.22-.49.5-.49m6 5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5m0 2.99a.5.5 0 0 1-.5-.5.5.5 0 0 1 1 .01.5.5 0 0 1-.5.49m.5-9l-9 9 1.51 1.5 9-9zm-5-2c2.2 0 4-1.12 4-2.5V2s.98-.16 1.5.95C23 4.05 23 6 23 6s1-1.12 1-3.13C24-.02 21 0 21 0h-2v6.35A5.85 5.85 0 0 0 17 6c-2.2 0-4 1.12-4 2.5s1.8 2.5 4 2.5m-6.7 9.48L8.82 18.9a47.54 47.54 0 0 1-1.44 1.13c-.3-.3-.99-1.02-2.04-2.19.9-.83 1.47-1.46 1.72-1.89s.38-.87.38-1.33c0-.6-.27-1.18-.82-1.76-.54-.58-1.33-.87-2.35-.87-1 0-1.79.29-2.34.87-.56.6-.83 1.18-.83 1.79 0 .81.42 1.75 1.25 2.8a6.57 6.57 0 0 0-1.8 1.79 3.46 3.46 0 0 0-.51 1.83c0 .86.3 1.56.92 2.1a3.5 3.5 0 0 0 2.42.83c1.17 0 2.44-.38 3.81-1.14L8.23 24h2.82l-2.09-2.38 1.34-1.14zM3.56 14.1a1.02 1.02 0 0 1 .73-.28c.31 0 .56.08.75.25a.85.85 0 0 1 .28.66c0 .52-.42 1.11-1.26 1.78-.53-.65-.8-1.23-.8-1.74a.9.9 0 0 1 .3-.67m.18 7.9c-.43 0-.78-.12-1.06-.35-.28-.23-.41-.49-.41-.76 0-.6.5-1.3 1.52-2.09a31.23 31.23 0 0 0 2.25 2.44c-.92.5-1.69.76-2.3.76`,\n};\n\nexport const search: { [key: string]: string } = {\n search: `M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z`,\n delete: `M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z`,\n};\n","import { CommonModule, isPlatformBrowser } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n Inject,\n Input,\n NgZone,\n OnDestroy,\n OnInit,\n Output,\n PLATFORM_ID,\n QueryList,\n Renderer2,\n ViewChild,\n ViewChildren,\n} from '@angular/core';\n\nimport {\n categories,\n Emoji,\n EmojiCategory,\n EmojiData,\n EmojiEvent,\n} from '@ctrl/ngx-emoji-mart/ngx-emoji';\nimport { CategoryComponent } from './category.component';\nimport { EmojiFrequentlyService } from './emoji-frequently.service';\nimport { PreviewComponent } from './preview.component';\nimport { SearchComponent } from './search.component';\nimport * as icons from './svgs';\nimport { measureScrollbar } from './utils';\n\nimport { AnchorsComponent } from './anchors.component';\n\nconst I18N: any = {\n search: 'Search',\n emojilist: 'List of emoji',\n notfound: 'No Emoji Found',\n clear: 'Clear',\n categories: {\n search: 'Search Results',\n recent: 'Frequently Used',\n people: 'Smileys & People',\n nature: 'Animals & Nature',\n foods: 'Food & Drink',\n activity: 'Activity',\n places: 'Travel & Places',\n objects: 'Objects',\n symbols: 'Symbols',\n flags: 'Flags',\n custom: 'Custom',\n },\n skintones: {\n 1: 'Default Skin Tone',\n 2: 'Light Skin Tone',\n 3: 'Medium-Light Skin Tone',\n 4: 'Medium Skin Tone',\n 5: 'Medium-Dark Skin Tone',\n 6: 'Dark Skin Tone',\n },\n};\n\n@Component({\n selector: 'emoji-mart',\n templateUrl: './picker.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n standalone: true,\n imports: [CommonModule, AnchorsComponent, SearchComponent, PreviewComponent, CategoryComponent],\n})\nexport class PickerComponent implements OnInit, OnDestroy {\n @Input() perLine = 9;\n @Input() totalFrequentLines = 4;\n @Input() i18n: any = {};\n @Input() style: any = {};\n @Input() title = 'Emoji Mart™';\n @Input() emoji = 'department_store';\n @Input() darkMode = !!(\n typeof matchMedia === 'function' && matchMedia('(prefers-color-scheme: dark)').matches\n );\n @Input() color = '#ae65c5';\n @Input() hideObsolete = true;\n /** all categories shown */\n @Input() categories: EmojiCategory[] = [];\n /** used to temporarily draw categories */\n @Input() activeCategories: EmojiCategory[] = [];\n @Input() set: Emoji['set'] = 'apple';\n @Input() skin: Emoji['skin'] = 1;\n /** Renders the native unicode emoji */\n @Input() isNative: Emoji['isNative'] = false;\n @Input() emojiSize: Emoji['size'] = 24;\n @Input() sheetSize: Emoji['sheetSize'] = 64;\n @Input() emojisToShowFilter?: (x: string) => boolean;\n @Input() showPreview = true;\n @Input() emojiTooltip = false;\n @Input() autoFocus = false;\n @Input() custom: any[] = [];\n @Input() hideRecent = true;\n @Input() imageUrlFn: Emoji['imageUrlFn'];\n @Input() include?: string[];\n @Input() exclude?: string[];\n @Input() notFoundEmoji = 'sleuth_or_spy';\n @Input() categoriesIcons = icons.categories;\n @Input() searchIcons = icons.search;\n @Input() useButton = false;\n @Input() enableFrequentEmojiSort = false;\n @Input() enableSearch = true;\n @Input() showSingleCategory = false;\n @Input() virtualize = false;\n @Input() virtualizeOffset = 0;\n @Input() recent?: string[];\n @Output() emojiClick = new EventEmitter<any>();\n @Output() emojiSelect = new EventEmitter<any>();\n @Output() skinChange = new EventEmitter<Emoji['skin']>();\n @ViewChild('scrollRef', { static: true }) private scrollRef!: ElementRef;\n @ViewChild(PreviewComponent, { static: false }) previewRef?: PreviewComponent;\n @ViewChild(SearchComponent, { static: false }) searchRef?: SearchComponent;\n @ViewChildren(CategoryComponent) categoryRefs!: QueryList<CategoryComponent>;\n scrollHeight = 0;\n clientHeight = 0;\n clientWidth = 0;\n selected?: string;\n nextScroll?: string;\n scrollTop?: number;\n firstRender = true;\n previewEmoji: EmojiData | null = null;\n animationFrameRequestId: number | null = null;\n NAMESPACE = 'emoji-mart';\n measureScrollbar = 0;\n RECENT_CATEGORY: EmojiCategory = {\n id: 'recent',\n name: 'Recent',\n emojis: null,\n };\n SEARCH_CATEGORY: EmojiCategory = {\n id: 'search',\n name: 'Search',\n emojis: null,\n anchor: false,\n };\n CUSTOM_CATEGORY: EmojiCategory = {\n id: 'custom',\n name: 'Custom',\n emojis: [],\n };\n private scrollListener!: () => void;\n\n @Input()\n backgroundImageFn: Emoji['backgroundImageFn'] = (set: string, sheetSize: number) =>\n `https://cdn.jsdelivr.net/npm/emoji-datasource-${set}@14.0.0/img/${set}/sheets-256/${sheetSize}.png`;\n\n constructor(\n private ngZone: NgZone,\n private renderer: Renderer2,\n private ref: ChangeDetectorRef,\n private frequently: EmojiFrequentlyService,\n @Inject(PLATFORM_ID) private platformId: string,\n ) {}\n\n ngOnInit() {\n // measure scroll\n this.measureScrollbar = measureScrollbar();\n\n this.i18n = { ...I18N, ...this.i18n };\n this.i18n.categories = { ...I18N.categories, ...this.i18n.categories };\n this.skin =\n JSON.parse(\n (isPlatformBrowser(this.platformId) && localStorage.getItem(`${this.NAMESPACE}.skin`)) ||\n 'null',\n ) || this.skin;\n\n const allCategories = [...categories];\n\n if (this.custom.length > 0) {\n this.CUSTOM_CATEGORY.emojis = this.custom.map(emoji => {\n return {\n ...emoji,\n // `<Category />` expects emoji to have an `id`.\n id: emoji.shortNames[0],\n custom: true,\n };\n });\n\n allCategories.push(this.CUSTOM_CATEGORY);\n }\n\n if (this.include !== undefined) {\n allCategories.sort((a, b) => {\n if (this.include!.indexOf(a.id) > this.include!.indexOf(b.id)) {\n return 1;\n }\n return -1;\n });\n }\n\n for (const category of allCategories) {\n const isIncluded =\n this.include && this.include.length ? this.include.indexOf(category.id) > -1 : true;\n const isExcluded =\n this.exclude && this.exclude.length ? this.exclude.indexOf(category.id) > -1 : false;\n if (!isIncluded || isExcluded) {\n continue;\n }\n\n if (this.emojisToShowFilter) {\n const newEmojis = [];\n\n const { emojis } = category;\n for (let emojiIndex = 0; emojiIndex < emojis!.length; emojiIndex++) {\n const emoji = emojis![emojiIndex];\n if (this.emojisToShowFilter(emoji)) {\n newEmojis.push(emoji);\n }\n }\n\n if (newEmojis.length) {\n const newCategory = {\n emojis: newEmojis,\n name: category.name,\n id: category.id,\n };\n\n this.categories.push(newCategory);\n }\n } else {\n this.categories.push(category);\n }\n\n this.categoriesIcons = { ...icons.categories, ...this.categoriesIcons };\n this.searchIcons = { ...icons.search, ...this.searchIcons };\n }\n\n const includeRecent =\n this.include && this.include.length\n ? this.include.indexOf(this.RECENT_CATEGORY.id) > -1\n : true;\n const excludeRecent =\n this.exclude && this.exclude.length\n ? this.exclude.indexOf(this.RECENT_CATEGORY.id) > -1\n : false;\n if (includeRecent && !excludeRecent) {\n this.hideRecent = false;\n this.categories.unshift(this.RECENT_CATEGORY);\n }\n\n if (this.categories[0]) {\n this.categories[0].first = true;\n }\n\n this.categories.unshift(this.SEARCH_CATEGORY);\n this.selected = this.categories.filter(category => category.first)[0].name;\n\n // Need to be careful if small number of categories\n const categoriesToLoadFirst = Math.min(this.categories.length, 3);\n this.setActiveCategories(\n (this.activeCategories = this.categories.slice(0, categoriesToLoadFirst)),\n );\n\n // Trim last active category\n const lastActiveCategoryEmojis = this.categories[categoriesToLoadFirst - 1].emojis!.slice();\n this.categories[categoriesToLoadFirst - 1].emojis = lastActiveCategoryEmojis.slice(0, 60);\n\n setTimeout(() => {\n // Restore last category\n this.categories[categoriesToLoadFirst - 1].emojis = lastActiveCategoryEmojis;\n this.setActiveCategories(this.categories);\n // The `setTimeout` will trigger the change detection, but since we're inside\n // the OnPush component we can run change detection locally starting from this\n // component and going down to the children.\n this.ref.detectChanges();\n\n isPlatformBrowser(this.platformId) &&\n this.ngZone.runOutsideAngular(() => {\n // The `updateCategoriesSize` doesn't change properties that are used\n // in templates, thus this is run in the context of the root zone to avoid\n // running change detection.\n requestAnimationFrame(() => {\n this.updateCategoriesSize();\n });\n });\n });\n\n this.ngZone.runOutsideAngular(() => {\n // DOM events that are listened by Angular inside the template trigger change detection\n // and also wrapped into additional functions that call `markForCheck()`. We listen `scroll`\n // in the context of the root zone since it will not trigger change detection each time\n // the `scroll` event is dispatched.\n this.scrollListener = this.renderer.listen(this.scrollRef.nativeElement, 'scroll', () => {\n this.handleScroll();\n });\n });\n }\n\n ngOnDestroy(): void {\n this.scrollListener?.();\n // This is called here because the component might be destroyed\n // but there will still be a `requestAnimationFrame` callback in the queue\n // that calls `detectChanges()` on the `ViewRef`. This will lead to a runtime\n // exception if the `detectChanges()` is called after the `ViewRef` is destroyed.\n this.cancelAnimationFrame();\n }\n\n setActiveCategories(categoriesToMakeActive: Array<EmojiCategory>) {\n if (this.showSingleCategory) {\n this.activeCategories = categoriesToMakeActive.filter(\n x => x.name === this.selected || x === this.SEARCH_CATEGORY,\n );\n } else {\n this.activeCategories = categoriesToMakeActive;\n }\n }\n updateCategoriesSize() {\n this.categoryRefs.forEach(component => component.memoizeSize());\n\n if (this.scrollRef) {\n const target = this.scrollRef.nativeElement;\n this.scrollHeight = target.scrollHeight;\n this.clientHeight = target.clientHeight;\n this.clientWidth = target.clientWidth;\n }\n }\n handleAnchorClick($event: { category: EmojiCategory; index: number }) {\n this.updateCategoriesSize();\n this.selected = $event.category.name;\n this.setActiveCategories(this.categories);\n\n if (this.SEARCH_CATEGORY.emojis) {\n this.handleSearch(null);\n this.searchRef?.clear();\n this.handleAnchorClick($event);\n return;\n }\n\n const component = this.categoryRefs.find(n => n.id === $event.category.id);\n if (component) {\n let { top } = component;\n\n if ($event.category.first) {\n top = 0;\n } else {\n top += 1;\n }\n this.scrollRef.nativeElement.scrollTop = top;\n }\n this.nextScroll = $event.category.name;\n\n // handle component scrolling to load emojis\n for (const category of this.categories) {\n const componentToScroll = this.categoryRefs.find(({ id }) => id === category.id);\n componentToScroll?.handleScroll(this.scrollRef.nativeElement.scrollTop);\n }\n }\n categoryTrack(index: number, item: any) {\n return item.id;\n }\n handleScroll(noSelectionChange = false) {\n if (this.nextScroll) {\n this.selected = this.nextScroll;\n this.nextScroll = undefined;\n this.ref.detectChanges();\n return;\n }\n if (!this.scrollRef) {\n return;\n }\n if (this.showSingleCategory) {\n return;\n }\n\n let activeCategory: EmojiCategory | undefined;\n if (this.SEARCH_CATEGORY.emojis) {\n activeCategory = this.SEA