@ctrl/ngx-emoji-mart 6.0.1 → 6.1.0

package/esm2020/picker.module.mjs

@@ -0,0 +1,49 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { EmojiModule } from '@ctrl/ngx-emoji-mart/ngx-emoji';
+import { AnchorsComponent } from './anchors.component';
+import { CategoryComponent } from './category.component';
+import { PickerComponent } from './picker.component';
+import { PreviewComponent } from './preview.component';
+import { SearchComponent } from './search.component';
+import { SkinComponent } from './skins.component';
+import * as i0 from "@angular/core";
+export class PickerModule {
+}
+PickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PickerModule, declarations: [PickerComponent,
+        AnchorsComponent,
+        CategoryComponent,
+        SearchComponent,
+        PreviewComponent,
+        SkinComponent], imports: [CommonModule, FormsModule, EmojiModule], exports: [PickerComponent,
+        AnchorsComponent,
+        CategoryComponent,
+        SearchComponent,
+        PreviewComponent,
+        SkinComponent] });
+PickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PickerModule, imports: [[CommonModule, FormsModule, EmojiModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FormsModule, EmojiModule],
+                    exports: [
+                        PickerComponent,
+                        AnchorsComponent,
+                        CategoryComponent,
+                        SearchComponent,
+                        PreviewComponent,
+                        SkinComponent,
+                    ],
+                    declarations: [
+                        PickerComponent,
+                        AnchorsComponent,
+                        CategoryComponent,
+                        SearchComponent,
+                        PreviewComponent,
+                        SkinComponent,
+                    ],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGlja2VyLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvcGlja2VyL3BpY2tlci5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRTdDLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUM3RCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUN2RCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUN6RCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDckQsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDdkQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3JELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQzs7QUFxQmxELE1BQU0sT0FBTyxZQUFZOzt5R0FBWixZQUFZOzBHQUFaLFlBQVksaUJBUnJCLGVBQWU7UUFDZixnQkFBZ0I7UUFDaEIsaUJBQWlCO1FBQ2pCLGVBQWU7UUFDZixnQkFBZ0I7UUFDaEIsYUFBYSxhQWZMLFlBQVksRUFBRSxXQUFXLEVBQUUsV0FBVyxhQUU5QyxlQUFlO1FBQ2YsZ0JBQWdCO1FBQ2hCLGlCQUFpQjtRQUNqQixlQUFlO1FBQ2YsZ0JBQWdCO1FBQ2hCLGFBQWE7MEdBV0osWUFBWSxZQWxCZCxDQUFDLFlBQVksRUFBRSxXQUFXLEVBQUUsV0FBVyxDQUFDOzJGQWtCdEMsWUFBWTtrQkFuQnhCLFFBQVE7bUJBQUM7b0JBQ1IsT0FBTyxFQUFFLENBQUMsWUFBWSxFQUFFLFdBQVcsRUFBRSxXQUFXLENBQUM7b0JBQ2pELE9BQU8sRUFBRTt3QkFDUCxlQUFlO3dCQUNmLGdCQUFnQjt3QkFDaEIsaUJBQWlCO3dCQUNqQixlQUFlO3dCQUNmLGdCQUFnQjt3QkFDaEIsYUFBYTtxQkFDZDtvQkFDRCxZQUFZLEVBQUU7d0JBQ1osZUFBZTt3QkFDZixnQkFBZ0I7d0JBQ2hCLGlCQUFpQjt3QkFDakIsZUFBZTt3QkFDZixnQkFBZ0I7d0JBQ2hCLGFBQWE7cUJBQ2Q7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5pbXBvcnQgeyBFbW9qaU1vZHVsZSB9IGZyb20gJ0BjdHJsL25neC1lbW9qaS1tYXJ0L25neC1lbW9qaSc7XG5pbXBvcnQgeyBBbmNob3JzQ29tcG9uZW50IH0gZnJvbSAnLi9hbmNob3JzLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBDYXRlZ29yeUNvbXBvbmVudCB9IGZyb20gJy4vY2F0ZWdvcnkuY29tcG9uZW50JztcbmltcG9ydCB7IFBpY2tlckNvbXBvbmVudCB9IGZyb20gJy4vcGlja2VyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBQcmV2aWV3Q29tcG9uZW50IH0gZnJvbSAnLi9wcmV2aWV3LmNvbXBvbmVudCc7XG5pbXBvcnQgeyBTZWFyY2hDb21wb25lbnQgfSBmcm9tICcuL3NlYXJjaC5jb21wb25lbnQnO1xuaW1wb3J0IHsgU2tpbkNvbXBvbmVudCB9IGZyb20gJy4vc2tpbnMuY29tcG9uZW50JztcblxuQE5nTW9kdWxlKHtcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgRm9ybXNNb2R1bGUsIEVtb2ppTW9kdWxlXSxcbiAgZXhwb3J0czogW1xuICAgIFBpY2tlckNvbXBvbmVudCxcbiAgICBBbmNob3JzQ29tcG9uZW50LFxuICAgIENhdGVnb3J5Q29tcG9uZW50LFxuICAgIFNlYXJjaENvbXBvbmVudCxcbiAgICBQcmV2aWV3Q29tcG9uZW50LFxuICAgIFNraW5Db21wb25lbnQsXG4gIF0sXG4gIGRlY2xhcmF0aW9uczogW1xuICAgIFBpY2tlckNvbXBvbmVudCxcbiAgICBBbmNob3JzQ29tcG9uZW50LFxuICAgIENhdGVnb3J5Q29tcG9uZW50LFxuICAgIFNlYXJjaENvbXBvbmVudCxcbiAgICBQcmV2aWV3Q29tcG9uZW50LFxuICAgIFNraW5Db21wb25lbnQsXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIFBpY2tlck1vZHVsZSB7fVxuIl19

package/esm2020/preview.component.mjs

@@ -0,0 +1,181 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@ctrl/ngx-emoji-mart/ngx-emoji";
+import * as i2 from "./skins.component";
+import * as i3 from "@angular/common";
+export class PreviewComponent {
+    constructor(ref, emojiService) {
+        this.ref = ref;
+        this.emojiService = emojiService;
+        this.skinChange = new EventEmitter();
+        this.emojiData = {};
+    }
+    ngOnChanges() {
+        if (!this.emoji) {
+            return;
+        }
+        this.emojiData = this.emojiService.getData(this.emoji, this.emojiSkin, this.emojiSet);
+        const knownEmoticons = [];
+        const listedEmoticons = [];
+        const emoitcons = this.emojiData.emoticons || [];
+        emoitcons.forEach((emoticon) => {
+            if (knownEmoticons.indexOf(emoticon.toLowerCase()) >= 0) {
+                return;
+            }
+            knownEmoticons.push(emoticon.toLowerCase());
+            listedEmoticons.push(emoticon);
+        });
+        this.listedEmoticons = listedEmoticons;
+        this.ref?.detectChanges();
+    }
+}
+PreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PreviewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.EmojiService }], target: i0.ɵɵFactoryTarget.Component });
+PreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: PreviewComponent, selector: "emoji-preview", inputs: { title: "title", emoji: "emoji", idleEmoji: "idleEmoji", i18n: "i18n", emojiIsNative: "emojiIsNative", emojiSkin: "emojiSkin", emojiSize: "emojiSize", emojiSet: "emojiSet", emojiSheetSize: "emojiSheetSize", emojiBackgroundImageFn: "emojiBackgroundImageFn", emojiImageUrlFn: "emojiImageUrlFn" }, outputs: { skinChange: "skinChange" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="emoji-mart-preview" *ngIf="emoji && emojiData">
+      <div class="emoji-mart-preview-emoji">
+        <ngx-emoji
+          [emoji]="emoji"
+          [size]="38"
+          [isNative]="emojiIsNative"
+          [skin]="emojiSkin"
+          [size]="emojiSize"
+          [set]="emojiSet"
+          [sheetSize]="emojiSheetSize"
+          [backgroundImageFn]="emojiBackgroundImageFn"
+          [imageUrlFn]="emojiImageUrlFn"
+        ></ngx-emoji>
+      </div>
+
+      <div class="emoji-mart-preview-data">
+        <div class="emoji-mart-preview-name">{{ emojiData.name }}</div>
+        <div class="emoji-mart-preview-shortname">
+          <span
+            class="emoji-mart-preview-shortname"
+            *ngFor="let short_name of emojiData.shortNames"
+          >
+            :{{ short_name }}:
+          </span>
+        </div>
+        <div class="emoji-mart-preview-emoticons">
+          <span class="emoji-mart-preview-emoticon" *ngFor="let emoticon of listedEmoticons">
+            {{ emoticon }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="emoji-mart-preview" *ngIf="!emoji">
+      <div class="emoji-mart-preview-emoji">
+        <ngx-emoji
+          *ngIf="idleEmoji && idleEmoji.length"
+          [isNative]="emojiIsNative"
+          [skin]="emojiSkin"
+          [set]="emojiSet"
+          [emoji]="idleEmoji"
+          [backgroundImageFn]="emojiBackgroundImageFn"
+          [size]="38"
+          [imageUrlFn]="emojiImageUrlFn"
+        ></ngx-emoji>
+      </div>
+
+      <div class="emoji-mart-preview-data">
+        <span class="emoji-mart-title-label">{{ title }}</span>
+      </div>
+
+      <div class="emoji-mart-preview-skins">
+        <emoji-skins [skin]="emojiSkin" (changeSkin)="skinChange.emit($event)" [i18n]="i18n">
+        </emoji-skins>
+      </div>
+    </div>
+  `, isInline: true, components: [{ type: i1.EmojiComponent, selector: "ngx-emoji", inputs: ["skin", "set", "sheetSize", "isNative", "forceSize", "tooltip", "size", "emoji", "fallback", "hideObsolete", "sheetRows", "sheetColumns", "useButton", "backgroundImageFn", "imageUrlFn"], outputs: ["emojiOver", "emojiLeave", "emojiClick"] }, { type: i2.SkinComponent, selector: "emoji-skins", inputs: ["skin", "i18n"], outputs: ["changeSkin"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PreviewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'emoji-preview',
+                    template: `
+    <div class="emoji-mart-preview" *ngIf="emoji && emojiData">
+      <div class="emoji-mart-preview-emoji">
+        <ngx-emoji
+          [emoji]="emoji"
+          [size]="38"
+          [isNative]="emojiIsNative"
+          [skin]="emojiSkin"
+          [size]="emojiSize"
+          [set]="emojiSet"
+          [sheetSize]="emojiSheetSize"
+          [backgroundImageFn]="emojiBackgroundImageFn"
+          [imageUrlFn]="emojiImageUrlFn"
+        ></ngx-emoji>
+      </div>
+
+      <div class="emoji-mart-preview-data">
+        <div class="emoji-mart-preview-name">{{ emojiData.name }}</div>
+        <div class="emoji-mart-preview-shortname">
+          <span
+            class="emoji-mart-preview-shortname"
+            *ngFor="let short_name of emojiData.shortNames"
+          >
+            :{{ short_name }}:
+          </span>
+        </div>
+        <div class="emoji-mart-preview-emoticons">
+          <span class="emoji-mart-preview-emoticon" *ngFor="let emoticon of listedEmoticons">
+            {{ emoticon }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="emoji-mart-preview" *ngIf="!emoji">
+      <div class="emoji-mart-preview-emoji">
+        <ngx-emoji
+          *ngIf="idleEmoji && idleEmoji.length"
+          [isNative]="emojiIsNative"
+          [skin]="emojiSkin"
+          [set]="emojiSet"
+          [emoji]="idleEmoji"
+          [backgroundImageFn]="emojiBackgroundImageFn"
+          [size]="38"
+          [imageUrlFn]="emojiImageUrlFn"
+        ></ngx-emoji>
+      </div>
+
+      <div class="emoji-mart-preview-data">
+        <span class="emoji-mart-title-label">{{ title }}</span>
+      </div>
+
+      <div class="emoji-mart-preview-skins">
+        <emoji-skins [skin]="emojiSkin" (changeSkin)="skinChange.emit($event)" [i18n]="i18n">
+        </emoji-skins>
+      </div>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.EmojiService }]; }, propDecorators: { title: [{
+                type: Input
+            }], emoji: [{
+                type: Input
+            }], idleEmoji: [{
+                type: Input
+            }], i18n: [{
+                type: Input
+            }], emojiIsNative: [{
+                type: Input
+            }], emojiSkin: [{
+                type: Input
+            }], emojiSize: [{
+                type: Input
+            }], emojiSet: [{
+                type: Input
+            }], emojiSheetSize: [{
+                type: Input
+            }], emojiBackgroundImageFn: [{
+                type: Input
+            }], emojiImageUrlFn: [{
+                type: Input
+            }], skinChange: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJldmlldy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL3BpY2tlci9wcmV2aWV3LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQ0wsdUJBQXVCLEVBRXZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUVMLE1BQU0sRUFDUCxNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFrRXZCLE1BQU0sT0FBTyxnQkFBZ0I7SUFnQjNCLFlBQW1CLEdBQXNCLEVBQVUsWUFBMEI7UUFBMUQsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUFBVSxpQkFBWSxHQUFaLFlBQVksQ0FBYztRQUpuRSxlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQWlCLENBQUM7UUFDekQsY0FBUyxHQUF1QixFQUFFLENBQUM7SUFHNkMsQ0FBQztJQUVqRixXQUFXO1FBQ1QsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUU7WUFDZixPQUFPO1NBQ1I7UUFDRCxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsT0FBTyxDQUN4QyxJQUFJLENBQUMsS0FBSyxFQUNWLElBQUksQ0FBQyxTQUFTLEVBQ2QsSUFBSSxDQUFDLFFBQVEsQ0FDRCxDQUFDO1FBQ2YsTUFBTSxjQUFjLEdBQWEsRUFBRSxDQUFDO1FBQ3BDLE1BQU0sZUFBZSxHQUFhLEVBQUUsQ0FBQztRQUNyQyxNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLFNBQVMsSUFBSSxFQUFFLENBQUM7UUFDakQsU0FBUyxDQUFDLE9BQU8sQ0FBQyxDQUFDLFFBQWdCLEVBQUUsRUFBRTtZQUNyQyxJQUFJLGNBQWMsQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLFdBQVcsRUFBRSxDQUFDLElBQUksQ0FBQyxFQUFFO2dCQUN2RCxPQUFPO2FBQ1I7WUFDRCxjQUFjLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLEVBQUUsQ0FBQyxDQUFDO1lBQzVDLGVBQWUsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDakMsQ0FBQyxDQUFDLENBQUM7UUFDSCxJQUFJLENBQUMsZUFBZSxHQUFHLGVBQWUsQ0FBQztRQUN2QyxJQUFJLENBQUMsR0FBRyxFQUFFLGFBQWEsRUFBRSxDQUFDO0lBQzVCLENBQUM7OzZHQXZDVSxnQkFBZ0I7aUdBQWhCLGdCQUFnQixpYUE3RGpCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0F5RFQ7MkZBSVUsZ0JBQWdCO2tCQS9ENUIsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsZUFBZTtvQkFDekIsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0F5RFQ7b0JBQ0QsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07b0JBQy9DLG1CQUFtQixFQUFFLEtBQUs7aUJBQzNCO21JQUVVLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csYUFBYTtzQkFBckIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLO2dCQUNHLHNCQUFzQjtzQkFBOUIsS0FBSztnQkFDRyxlQUFlO3NCQUF2QixLQUFLO2dCQUNJLFVBQVU7c0JBQW5CLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBFbW9qaSwgRW1vamlEYXRhLCBFbW9qaVNlcnZpY2UgfSBmcm9tICdAY3RybC9uZ3gtZW1vamktbWFydC9uZ3gtZW1vamknO1xuaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE9uQ2hhbmdlcyxcbiAgT3V0cHV0XG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2Vtb2ppLXByZXZpZXcnLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXYgY2xhc3M9XCJlbW9qaS1tYXJ0LXByZXZpZXdcIiAqbmdJZj1cImVtb2ppICYmIGVtb2ppRGF0YVwiPlxuICAgICAgPGRpdiBjbGFzcz1cImVtb2ppLW1hcnQtcHJldmlldy1lbW9qaVwiPlxuICAgICAgICA8bmd4LWVtb2ppXG4gICAgICAgICAgW2Vtb2ppXT1cImVtb2ppXCJcbiAgICAgICAgICBbc2l6ZV09XCIzOFwiXG4gICAgICAgICAgW2lzTmF0aXZlXT1cImVtb2ppSXNOYXRpdmVcIlxuICAgICAgICAgIFtza2luXT1cImVtb2ppU2tpblwiXG4gICAgICAgICAgW3NpemVdPVwiZW1vamlTaXplXCJcbiAgICAgICAgICBbc2V0XT1cImVtb2ppU2V0XCJcbiAgICAgICAgICBbc2hlZXRTaXplXT1cImVtb2ppU2hlZXRTaXplXCJcbiAgICAgICAgICBbYmFja2dyb3VuZEltYWdlRm5dPVwiZW1vamlCYWNrZ3JvdW5kSW1hZ2VGblwiXG4gICAgICAgICAgW2ltYWdlVXJsRm5dPVwiZW1vamlJbWFnZVVybEZuXCJcbiAgICAgICAgPjwvbmd4LWVtb2ppPlxuICAgICAgPC9kaXY+XG5cbiAgICAgIDxkaXYgY2xhc3M9XCJlbW9qaS1tYXJ0LXByZXZpZXctZGF0YVwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZW1vamktbWFydC1wcmV2aWV3LW5hbWVcIj57eyBlbW9qaURhdGEubmFtZSB9fTwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZW1vamktbWFydC1wcmV2aWV3LXNob3J0bmFtZVwiPlxuICAgICAgICAgIDxzcGFuXG4gICAgICAgICAgICBjbGFzcz1cImVtb2ppLW1hcnQtcHJldmlldy1zaG9ydG5hbWVcIlxuICAgICAgICAgICAgKm5nRm9yPVwibGV0IHNob3J0X25hbWUgb2YgZW1vamlEYXRhLnNob3J0TmFtZXNcIlxuICAgICAgICAgID5cbiAgICAgICAgICAgIDp7eyBzaG9ydF9uYW1lIH19OlxuICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJlbW9qaS1tYXJ0LXByZXZpZXctZW1vdGljb25zXCI+XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJlbW9qaS1tYXJ0LXByZXZpZXctZW1vdGljb25cIiAqbmdGb3I9XCJsZXQgZW1vdGljb24gb2YgbGlzdGVkRW1vdGljb25zXCI+XG4gICAgICAgICAgICB7eyBlbW90aWNvbiB9fVxuICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cblxuICAgIDxkaXYgY2xhc3M9XCJlbW9qaS1tYXJ0LXByZXZpZXdcIiAqbmdJZj1cIiFlbW9qaVwiPlxuICAgICAgPGRpdiBjbGFzcz1cImVtb2ppLW1hcnQtcHJldmlldy1lbW9qaVwiPlxuICAgICAgICA8bmd4LWVtb2ppXG4gICAgICAgICAgKm5nSWY9XCJpZGxlRW1vamkgJiYgaWRsZUVtb2ppLmxlbmd0aFwiXG4gICAgICAgICAgW2lzTmF0aXZlXT1cImVtb2ppSXNOYXRpdmVcIlxuICAgICAgICAgIFtza2luXT1cImVtb2ppU2tpblwiXG4gICAgICAgICAgW3NldF09XCJlbW9qaVNldFwiXG4gICAgICAgICAgW2Vtb2ppXT1cImlkbGVFbW9qaVwiXG4gICAgICAgICAgW2JhY2tncm91bmRJbWFnZUZuXT1cImVtb2ppQmFja2dyb3VuZEltYWdlRm5cIlxuICAgICAgICAgIFtzaXplXT1cIjM4XCJcbiAgICAgICAgICBbaW1hZ2VVcmxGbl09XCJlbW9qaUltYWdlVXJsRm5cIlxuICAgICAgICA+PC9uZ3gtZW1vamk+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPGRpdiBjbGFzcz1cImVtb2ppLW1hcnQtcHJldmlldy1kYXRhXCI+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwiZW1vamktbWFydC10aXRsZS1sYWJlbFwiPnt7IHRpdGxlIH19PC9zcGFuPlxuICAgICAgPC9kaXY+XG5cbiAgICAgIDxkaXYgY2xhc3M9XCJlbW9qaS1tYXJ0LXByZXZpZXctc2tpbnNcIj5cbiAgICAgICAgPGVtb2ppLXNraW5zIFtza2luXT1cImVtb2ppU2tpblwiIChjaGFuZ2VTa2luKT1cInNraW5DaGFuZ2UuZW1pdCgkZXZlbnQpXCIgW2kxOG5dPVwiaTE4blwiPlxuICAgICAgICA8L2Vtb2ppLXNraW5zPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIGAsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBwcmVzZXJ2ZVdoaXRlc3BhY2VzOiBmYWxzZSxcbn0pXG5leHBvcnQgY2xhc3MgUHJldmlld0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIEBJbnB1dCgpIHRpdGxlPzogc3RyaW5nO1xuICBASW5wdXQoKSBlbW9qaTogYW55O1xuICBASW5wdXQoKSBpZGxlRW1vamk6IGFueTtcbiAgQElucHV0KCkgaTE4bjogYW55O1xuICBASW5wdXQoKSBlbW9qaUlzTmF0aXZlPzogRW1vamlbJ2lzTmF0aXZlJ107XG4gIEBJbnB1dCgpIGVtb2ppU2tpbj86IEVtb2ppWydza2luJ107XG4gIEBJbnB1dCgpIGVtb2ppU2l6ZT86IEVtb2ppWydzaXplJ107XG4gIEBJbnB1dCgpIGVtb2ppU2V0PzogRW1vamlbJ3NldCddO1xuICBASW5wdXQoKSBlbW9qaVNoZWV0U2l6ZT86IEVtb2ppWydzaGVldFNpemUnXTtcbiAgQElucHV0KCkgZW1vamlCYWNrZ3JvdW5kSW1hZ2VGbj86IEVtb2ppWydiYWNrZ3JvdW5kSW1hZ2VGbiddO1xuICBASW5wdXQoKSBlbW9qaUltYWdlVXJsRm4/OiBFbW9qaVsnaW1hZ2VVcmxGbiddO1xuICBAT3V0cHV0KCkgc2tpbkNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8RW1vamlbJ3NraW4nXT4oKTtcbiAgZW1vamlEYXRhOiBQYXJ0aWFsPEVtb2ppRGF0YT4gPSB7fTtcbiAgbGlzdGVkRW1vdGljb25zPzogc3RyaW5nW107XG5cbiAgY29uc3RydWN0b3IocHVibGljIHJlZjogQ2hhbmdlRGV0ZWN0b3JSZWYsIHByaXZhdGUgZW1vamlTZXJ2aWNlOiBFbW9qaVNlcnZpY2UpIHt9XG5cbiAgbmdPbkNoYW5nZXMoKSB7XG4gICAgaWYgKCF0aGlzLmVtb2ppKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHRoaXMuZW1vamlEYXRhID0gdGhpcy5lbW9qaVNlcnZpY2UuZ2V0RGF0YShcbiAgICAgIHRoaXMuZW1vamksXG4gICAgICB0aGlzLmVtb2ppU2tpbixcbiAgICAgIHRoaXMuZW1vamlTZXQsXG4gICAgKSBhcyBFbW9qaURhdGE7XG4gICAgY29uc3Qga25vd25FbW90aWNvbnM6IHN0cmluZ1tdID0gW107XG4gICAgY29uc3QgbGlzdGVkRW1vdGljb25zOiBzdHJpbmdbXSA9IFtdO1xuICAgIGNvbnN0IGVtb2l0Y29ucyA9IHRoaXMuZW1vamlEYXRhLmVtb3RpY29ucyB8fCBbXTtcbiAgICBlbW9pdGNvbnMuZm9yRWFjaCgoZW1vdGljb246IHN0cmluZykgPT4ge1xuICAgICAgaWYgKGtub3duRW1vdGljb25zLmluZGV4T2YoZW1vdGljb24udG9Mb3dlckNhc2UoKSkgPj0gMCkge1xuICAgICAgICByZXR1cm47XG4gICAgICB9XG4gICAgICBrbm93bkVtb3RpY29ucy5wdXNoKGVtb3RpY29uLnRvTG93ZXJDYXNlKCkpO1xuICAgICAgbGlzdGVkRW1vdGljb25zLnB1c2goZW1vdGljb24pO1xuICAgIH0pO1xuICAgIHRoaXMubGlzdGVkRW1vdGljb25zID0gbGlzdGVkRW1vdGljb25zO1xuICAgIHRoaXMucmVmPy5kZXRlY3RDaGFuZ2VzKCk7XG4gIH1cbn1cbiJdfQ==

package/esm2020/search.component.mjs

@@ -0,0 +1,165 @@
+import { Component, EventEmitter, Input, Output, ViewChild, } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "./emoji-search.service";
+import * as i2 from "@angular/forms";
+let id = 0;
+export class SearchComponent {
+    constructor(emojiSearch) {
+        this.emojiSearch = emojiSearch;
+        this.maxResults = 75;
+        this.autoFocus = false;
+        this.include = [];
+        this.exclude = [];
+        this.custom = [];
+        this.searchResults = new EventEmitter();
+        this.enterKey = new EventEmitter();
+        this.isSearching = false;
+        this.query = '';
+        this.inputId = `emoji-mart-search-${++id}`;
+    }
+    ngOnInit() {
+        this.icon = this.icons.search;
+    }
+    ngAfterViewInit() {
+        if (this.autoFocus) {
+            this.inputRef.nativeElement.focus();
+        }
+    }
+    clear() {
+        this.query = '';
+        this.handleSearch('');
+        this.inputRef.nativeElement.focus();
+    }
+    handleEnterKey($event) {
+        if (!this.query) {
+            return;
+        }
+        this.enterKey.emit($event);
+        $event.preventDefault();
+    }
+    handleSearch(value) {
+        if (value === '') {
+            this.icon = this.icons.search;
+            this.isSearching = false;
+        }
+        else {
+            this.icon = this.icons.delete;
+            this.isSearching = true;
+        }
+        const emojis = this.emojiSearch.search(this.query, this.emojisToShowFilter, this.maxResults, this.include, this.exclude, this.custom);
+        this.searchResults.emit(emojis);
+    }
+    handleChange() {
+        this.handleSearch(this.query);
+    }
+}
+SearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SearchComponent, deps: [{ token: i1.EmojiSearch }], target: i0.ɵɵFactoryTarget.Component });
+SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SearchComponent, selector: "emoji-search", inputs: { maxResults: "maxResults", autoFocus: "autoFocus", i18n: "i18n", include: "include", exclude: "exclude", custom: "custom", icons: "icons", emojisToShowFilter: "emojisToShowFilter" }, outputs: { searchResults: "searchResults", enterKey: "enterKey" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, static: true }], ngImport: i0, template: `
+    <div class="emoji-mart-search">
+      <input
+        [id]="inputId"
+        #inputRef
+        type="search"
+        (keyup.enter)="handleEnterKey($event)"
+        [placeholder]="i18n.search"
+        [autofocus]="autoFocus"
+        [(ngModel)]="query"
+        (ngModelChange)="handleChange()"
+      />
+      <!--
+      Use a <label> in addition to the placeholder for accessibility, but place it off-screen
+      http://www.maxability.co.in/2016/01/placeholder-attribute-and-why-it-is-not-accessible/
+      -->
+      <label class="emoji-mart-sr-only" [htmlFor]="inputId">
+        {{ i18n.search }}
+      </label>
+      <button
+        type="button"
+        class="emoji-mart-search-icon"
+        (click)="clear()"
+        (keyup.enter)="clear()"
+        [disabled]="!isSearching"
+        [attr.aria-label]="i18n.clear"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          width="13"
+          height="13"
+          opacity="0.5"
+        >
+          <path [attr.d]="icon" />
+        </svg>
+      </button>
+    </div>
+  `, isInline: true, directives: [{ type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SearchComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'emoji-search',
+                    template: `
+    <div class="emoji-mart-search">
+      <input
+        [id]="inputId"
+        #inputRef
+        type="search"
+        (keyup.enter)="handleEnterKey($event)"
+        [placeholder]="i18n.search"
+        [autofocus]="autoFocus"
+        [(ngModel)]="query"
+        (ngModelChange)="handleChange()"
+      />
+      <!--
+      Use a <label> in addition to the placeholder for accessibility, but place it off-screen
+      http://www.maxability.co.in/2016/01/placeholder-attribute-and-why-it-is-not-accessible/
+      -->
+      <label class="emoji-mart-sr-only" [htmlFor]="inputId">
+        {{ i18n.search }}
+      </label>
+      <button
+        type="button"
+        class="emoji-mart-search-icon"
+        (click)="clear()"
+        (keyup.enter)="clear()"
+        [disabled]="!isSearching"
+        [attr.aria-label]="i18n.clear"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          width="13"
+          height="13"
+          opacity="0.5"
+        >
+          <path [attr.d]="icon" />
+        </svg>
+      </button>
+    </div>
+  `,
+                    preserveWhitespaces: false,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.EmojiSearch }]; }, propDecorators: { maxResults: [{
+                type: Input
+            }], autoFocus: [{
+                type: Input
+            }], i18n: [{
+                type: Input
+            }], include: [{
+                type: Input
+            }], exclude: [{
+                type: Input
+            }], custom: [{
+                type: Input
+            }], icons: [{
+                type: Input
+            }], emojisToShowFilter: [{
+                type: Input
+            }], searchResults: [{
+                type: Output
+            }], enterKey: [{
+                type: Output
+            }], inputRef: [{
+                type: ViewChild,
+                args: ['inputRef', { static: true }]
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvcGlja2VyL3NlYXJjaC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUVMLFNBQVMsRUFFVCxZQUFZLEVBQ1osS0FBSyxFQUVMLE1BQU0sRUFDTixTQUFTLEdBQ1YsTUFBTSxlQUFlLENBQUM7Ozs7QUFJdkIsSUFBSSxFQUFFLEdBQUcsQ0FBQyxDQUFDO0FBNkNYLE1BQU0sT0FBTyxlQUFlO0lBaUIxQixZQUFvQixXQUF3QjtRQUF4QixnQkFBVyxHQUFYLFdBQVcsQ0FBYTtRQWhCbkMsZUFBVSxHQUFHLEVBQUUsQ0FBQztRQUNoQixjQUFTLEdBQUcsS0FBSyxDQUFDO1FBRWxCLFlBQU8sR0FBYSxFQUFFLENBQUM7UUFDdkIsWUFBTyxHQUFhLEVBQUUsQ0FBQztRQUN2QixXQUFNLEdBQVUsRUFBRSxDQUFDO1FBR2xCLGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQVMsQ0FBQztRQUMxQyxhQUFRLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUU3QyxnQkFBVyxHQUFHLEtBQUssQ0FBQztRQUVwQixVQUFLLEdBQUcsRUFBRSxDQUFDO1FBQ1gsWUFBTyxHQUFHLHFCQUFxQixFQUFFLEVBQUUsRUFBRSxDQUFDO0lBRVMsQ0FBQztJQUVoRCxRQUFRO1FBQ04sSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQztJQUNoQyxDQUFDO0lBQ0QsZUFBZTtRQUNiLElBQUksSUFBSSxDQUFDLFNBQVMsRUFBRTtZQUNsQixJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxLQUFLLEVBQUUsQ0FBQztTQUNyQztJQUNILENBQUM7SUFDRCxLQUFLO1FBQ0gsSUFBSSxDQUFDLEtBQUssR0FBRyxFQUFFLENBQUM7UUFDaEIsSUFBSSxDQUFDLFlBQVksQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUN0QixJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUN0QyxDQUFDO0lBQ0QsY0FBYyxDQUFDLE1BQWE7UUFDMUIsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUU7WUFDZixPQUFPO1NBQ1I7UUFDRCxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUMzQixNQUFNLENBQUMsY0FBYyxFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUNELFlBQVksQ0FBQyxLQUFhO1FBQ3hCLElBQUksS0FBSyxLQUFLLEVBQUUsRUFBRTtZQUNoQixJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDO1lBQzlCLElBQUksQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFDO1NBQzFCO2FBQU07WUFDTCxJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDO1lBQzlCLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDO1NBQ3pCO1FBQ0QsTUFBTSxNQUFNLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxNQUFNLENBQ3BDLElBQUksQ0FBQyxLQUFLLEVBQ1YsSUFBSSxDQUFDLGtCQUFrQixFQUN2QixJQUFJLENBQUMsVUFBVSxFQUNmLElBQUksQ0FBQyxPQUFPLEVBQ1osSUFBSSxDQUFDLE9BQU8sRUFDWixJQUFJLENBQUMsTUFBTSxDQUNILENBQUM7UUFDWCxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUNsQyxDQUFDO0lBQ0QsWUFBWTtRQUNWLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2hDLENBQUM7OzRHQTNEVSxlQUFlO2dHQUFmLGVBQWUsMmFBekNoQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FzQ1Q7MkZBR1UsZUFBZTtrQkEzQzNCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGNBQWM7b0JBQ3hCLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FzQ1Q7b0JBQ0QsbUJBQW1CLEVBQUUsS0FBSztpQkFDM0I7a0dBRVUsVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csa0JBQWtCO3NCQUExQixLQUFLO2dCQUNJLGFBQWE7c0JBQXRCLE1BQU07Z0JBQ0csUUFBUTtzQkFBakIsTUFBTTtnQkFDMEMsUUFBUTtzQkFBeEQsU0FBUzt1QkFBQyxVQUFVLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQWZ0ZXJWaWV3SW5pdCxcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPbkluaXQsXG4gIE91dHB1dCxcbiAgVmlld0NoaWxkLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgRW1vamlTZWFyY2ggfSBmcm9tICcuL2Vtb2ppLXNlYXJjaC5zZXJ2aWNlJztcblxubGV0IGlkID0gMDtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZW1vamktc2VhcmNoJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2IGNsYXNzPVwiZW1vamktbWFydC1zZWFyY2hcIj5cbiAgICAgIDxpbnB1dFxuICAgICAgICBbaWRdPVwiaW5wdXRJZFwiXG4gICAgICAgICNpbnB1dFJlZlxuICAgICAgICB0eXBlPVwic2VhcmNoXCJcbiAgICAgICAgKGtleXVwLmVudGVyKT1cImhhbmRsZUVudGVyS2V5KCRldmVudClcIlxuICAgICAgICBbcGxhY2Vob2xkZXJdPVwiaTE4bi5zZWFyY2hcIlxuICAgICAgICBbYXV0b2ZvY3VzXT1cImF1dG9Gb2N1c1wiXG4gICAgICAgIFsobmdNb2RlbCldPVwicXVlcnlcIlxuICAgICAgICAobmdNb2RlbENoYW5nZSk9XCJoYW5kbGVDaGFuZ2UoKVwiXG4gICAgICAvPlxuICAgICAgPCEtLVxuICAgICAgVXNlIGEgPGxhYmVsPiBpbiBhZGRpdGlvbiB0byB0aGUgcGxhY2Vob2xkZXIgZm9yIGFjY2Vzc2liaWxpdHksIGJ1dCBwbGFjZSBpdCBvZmYtc2NyZWVuXG4gICAgICBodHRwOi8vd3d3Lm1heGFiaWxpdHkuY28uaW4vMjAxNi8wMS9wbGFjZWhvbGRlci1hdHRyaWJ1dGUtYW5kLXdoeS1pdC1pcy1ub3QtYWNjZXNzaWJsZS9cbiAgICAgIC0tPlxuICAgICAgPGxhYmVsIGNsYXNzPVwiZW1vamktbWFydC1zci1vbmx5XCIgW2h0bWxGb3JdPVwiaW5wdXRJZFwiPlxuICAgICAgICB7eyBpMThuLnNlYXJjaCB9fVxuICAgICAgPC9sYWJlbD5cbiAgICAgIDxidXR0b25cbiAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgIGNsYXNzPVwiZW1vamktbWFydC1zZWFyY2gtaWNvblwiXG4gICAgICAgIChjbGljayk9XCJjbGVhcigpXCJcbiAgICAgICAgKGtleXVwLmVudGVyKT1cImNsZWFyKClcIlxuICAgICAgICBbZGlzYWJsZWRdPVwiIWlzU2VhcmNoaW5nXCJcbiAgICAgICAgW2F0dHIuYXJpYS1sYWJlbF09XCJpMThuLmNsZWFyXCJcbiAgICAgID5cbiAgICAgICAgPHN2Z1xuICAgICAgICAgIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIlxuICAgICAgICAgIHZpZXdCb3g9XCIwIDAgMjAgMjBcIlxuICAgICAgICAgIHdpZHRoPVwiMTNcIlxuICAgICAgICAgIGhlaWdodD1cIjEzXCJcbiAgICAgICAgICBvcGFjaXR5PVwiMC41XCJcbiAgICAgICAgPlxuICAgICAgICAgIDxwYXRoIFthdHRyLmRdPVwiaWNvblwiIC8+XG4gICAgICAgIDwvc3ZnPlxuICAgICAgPC9idXR0b24+XG4gICAgPC9kaXY+XG4gIGAsXG4gIHByZXNlcnZlV2hpdGVzcGFjZXM6IGZhbHNlLFxufSlcbmV4cG9ydCBjbGFzcyBTZWFyY2hDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0LCBPbkluaXQge1xuICBASW5wdXQoKSBtYXhSZXN1bHRzID0gNzU7XG4gIEBJbnB1dCgpIGF1dG9Gb2N1cyA9IGZhbHNlO1xuICBASW5wdXQoKSBpMThuOiBhbnk7XG4gIEBJbnB1dCgpIGluY2x1ZGU6IHN0cmluZ1tdID0gW107XG4gIEBJbnB1dCgpIGV4Y2x1ZGU6IHN0cmluZ1tdID0gW107XG4gIEBJbnB1dCgpIGN1c3RvbTogYW55W10gPSBbXTtcbiAgQElucHV0KCkgaWNvbnMhOiB7IFtrZXk6IHN0cmluZ106IHN0cmluZyB9O1xuICBASW5wdXQoKSBlbW9qaXNUb1Nob3dGaWx0ZXI/OiAoeDogYW55KSA9PiBib29sZWFuO1xuICBAT3V0cHV0KCkgc2VhcmNoUmVzdWx0cyA9IG5ldyBFdmVudEVtaXR0ZXI8YW55W10+KCk7XG4gIEBPdXRwdXQoKSBlbnRlcktleSA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICBAVmlld0NoaWxkKCdpbnB1dFJlZicsIHsgc3RhdGljOiB0cnVlIH0pIHByaXZhdGUgaW5wdXRSZWYhOiBFbGVtZW50UmVmO1xuICBpc1NlYXJjaGluZyA9IGZhbHNlO1xuICBpY29uPzogc3RyaW5nO1xuICBxdWVyeSA9ICcnO1xuICBpbnB1dElkID0gYGVtb2ppLW1hcnQtc2VhcmNoLSR7KytpZH1gO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZW1vamlTZWFyY2g6IEVtb2ppU2VhcmNoKSB7fVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMuaWNvbiA9IHRoaXMuaWNvbnMuc2VhcmNoO1xuICB9XG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcbiAgICBpZiAodGhpcy5hdXRvRm9jdXMpIHtcbiAgICAgIHRoaXMuaW5wdXRSZWYubmF0aXZlRWxlbWVudC5mb2N1cygpO1xuICAgIH1cbiAgfVxuICBjbGVhcigpIHtcbiAgICB0aGlzLnF1ZXJ5ID0gJyc7XG4gICAgdGhpcy5oYW5kbGVTZWFyY2goJycpO1xuICAgIHRoaXMuaW5wdXRSZWYubmF0aXZlRWxlbWVudC5mb2N1cygpO1xuICB9XG4gIGhhbmRsZUVudGVyS2V5KCRldmVudDogRXZlbnQpIHtcbiAgICBpZiAoIXRoaXMucXVlcnkpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy5lbnRlcktleS5lbWl0KCRldmVudCk7XG4gICAgJGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gIH1cbiAgaGFuZGxlU2VhcmNoKHZhbHVlOiBzdHJpbmcpIHtcbiAgICBpZiAodmFsdWUgPT09ICcnKSB7XG4gICAgICB0aGlzLmljb24gPSB0aGlzLmljb25zLnNlYXJjaDtcbiAgICAgIHRoaXMuaXNTZWFyY2hpbmcgPSBmYWxzZTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5pY29uID0gdGhpcy5pY29ucy5kZWxldGU7XG4gICAgICB0aGlzLmlzU2VhcmNoaW5nID0gdHJ1ZTtcbiAgICB9XG4gICAgY29uc3QgZW1vamlzID0gdGhpcy5lbW9qaVNlYXJjaC5zZWFyY2goXG4gICAgICB0aGlzLnF1ZXJ5LFxuICAgICAgdGhpcy5lbW9qaXNUb1Nob3dGaWx0ZXIsXG4gICAgICB0aGlzLm1heFJlc3VsdHMsXG4gICAgICB0aGlzLmluY2x1ZGUsXG4gICAgICB0aGlzLmV4Y2x1ZGUsXG4gICAgICB0aGlzLmN1c3RvbSxcbiAgICApIGFzIGFueVtdO1xuICAgIHRoaXMuc2VhcmNoUmVzdWx0cy5lbWl0KGVtb2ppcyk7XG4gIH1cbiAgaGFuZGxlQ2hhbmdlKCkge1xuICAgIHRoaXMuaGFuZGxlU2VhcmNoKHRoaXMucXVlcnkpO1xuICB9XG59XG4iXX0=

package/esm2020/skins.component.mjs

@@ -0,0 +1,108 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class SkinComponent {
+    constructor() {
+        this.changeSkin = new EventEmitter();
+        this.opened = false;
+        this.skinTones = [1, 2, 3, 4, 5, 6];
+    }
+    toggleOpen() {
+        this.opened = !this.opened;
+    }
+    isSelected(skinTone) {
+        return skinTone === this.skin;
+    }
+    isVisible(skinTone) {
+        return this.opened || this.isSelected(skinTone);
+    }
+    pressed(skinTone) {
+        return this.opened ? !!this.isSelected(skinTone) : '';
+    }
+    tabIndex(skinTone) {
+        return this.isVisible(skinTone) ? '0' : '';
+    }
+    expanded(skinTone) {
+        return this.isSelected(skinTone) ? this.opened : '';
+    }
+    handleClick(skin) {
+        if (!this.opened) {
+            this.opened = true;
+            return;
+        }
+        this.opened = false;
+        if (skin !== this.skin) {
+            this.changeSkin.emit(skin);
+        }
+    }
+}
+SkinComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SkinComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkinComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SkinComponent, selector: "emoji-skins", inputs: { skin: "skin", i18n: "i18n" }, outputs: { changeSkin: "changeSkin" }, ngImport: i0, template: `
+    <section
+      class="emoji-mart-skin-swatches"
+      [class.opened]="opened"
+    >
+      <span
+        *ngFor="let skinTone of skinTones"
+        class="emoji-mart-skin-swatch"
+        [class.selected]="skinTone === skin"
+      >
+        <span
+          (click)="handleClick(skinTone)"
+          (keyup.enter)="handleClick(skinTone)"
+          (keyup.space)="handleClick(skinTone)"
+          class="emoji-mart-skin emoji-mart-skin-tone-{{ skinTone }}"
+          role="button"
+          [tabIndex]="tabIndex(skinTone)"
+          [attr.aria-hidden]="!isVisible(skinTone)"
+          [attr.aria-pressed]="pressed(skinTone)"
+          [attr.aria-haspopup]="!!isSelected(skinTone)"
+          [attr.aria-expanded]="expanded(skinTone)"
+          [attr.aria-label]="i18n.skintones[skinTone]"
+          [title]="i18n.skintones[skinTone]"
+        ></span>
+      </span>
+    </section>
+  `, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SkinComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'emoji-skins',
+                    template: `
+    <section
+      class="emoji-mart-skin-swatches"
+      [class.opened]="opened"
+    >
+      <span
+        *ngFor="let skinTone of skinTones"
+        class="emoji-mart-skin-swatch"
+        [class.selected]="skinTone === skin"
+      >
+        <span
+          (click)="handleClick(skinTone)"
+          (keyup.enter)="handleClick(skinTone)"
+          (keyup.space)="handleClick(skinTone)"
+          class="emoji-mart-skin emoji-mart-skin-tone-{{ skinTone }}"
+          role="button"
+          [tabIndex]="tabIndex(skinTone)"
+          [attr.aria-hidden]="!isVisible(skinTone)"
+          [attr.aria-pressed]="pressed(skinTone)"
+          [attr.aria-haspopup]="!!isSelected(skinTone)"
+          [attr.aria-expanded]="expanded(skinTone)"
+          [attr.aria-label]="i18n.skintones[skinTone]"
+          [title]="i18n.skintones[skinTone]"
+        ></span>
+      </span>
+    </section>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                }]
+        }], propDecorators: { skin: [{
+                type: Input
+            }], i18n: [{
+                type: Input
+            }], changeSkin: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tpbnMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9waWNrZXIvc2tpbnMuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDOzs7QUFvQ3ZCLE1BQU0sT0FBTyxhQUFhO0lBaEMxQjtRQW9DWSxlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQWlCLENBQUM7UUFDekQsV0FBTSxHQUFHLEtBQUssQ0FBQztRQUNmLGNBQVMsR0FBb0IsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDO0tBb0NqRDtJQWxDQyxVQUFVO1FBQ1IsSUFBSSxDQUFDLE1BQU0sR0FBRyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUM7SUFDN0IsQ0FBQztJQUVELFVBQVUsQ0FBQyxRQUF1QjtRQUNoQyxPQUFPLFFBQVEsS0FBSyxJQUFJLENBQUMsSUFBSSxDQUFDO0lBQ2hDLENBQUM7SUFFRCxTQUFTLENBQUMsUUFBdUI7UUFDL0IsT0FBTyxJQUFJLENBQUMsTUFBTSxJQUFJLElBQUksQ0FBQyxVQUFVLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDbEQsQ0FBQztJQUVELE9BQU8sQ0FBQyxRQUF1QjtRQUM3QixPQUFPLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7SUFDeEQsQ0FBQztJQUVELFFBQVEsQ0FBQyxRQUF1QjtRQUM5QixPQUFPLElBQUksQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO0lBQzdDLENBQUM7SUFFRCxRQUFRLENBQUMsUUFBdUI7UUFDOUIsT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7SUFDdEQsQ0FBQztJQUVELFdBQVcsQ0FBQyxJQUFtQjtRQUM3QixJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRTtZQUNoQixJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQztZQUNuQixPQUFPO1NBQ1I7UUFDRCxJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztRQUNwQixJQUFJLElBQUksS0FBSyxJQUFJLENBQUMsSUFBSSxFQUFFO1lBQ3RCLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1NBQzVCO0lBQ0gsQ0FBQzs7MEdBekNVLGFBQWE7OEZBQWIsYUFBYSxrSUE5QmQ7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBMEJUOzJGQUlVLGFBQWE7a0JBaEN6QixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxhQUFhO29CQUN2QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBMEJUO29CQUNELGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO29CQUMvQyxtQkFBbUIsRUFBRSxLQUFLO2lCQUMzQjs4QkFHVSxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNJLFVBQVU7c0JBQW5CLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPdXRwdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBFbW9qaSB9IGZyb20gJ0BjdHJsL25neC1lbW9qaS1tYXJ0L25neC1lbW9qaSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2Vtb2ppLXNraW5zJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8c2VjdGlvblxuICAgICAgY2xhc3M9XCJlbW9qaS1tYXJ0LXNraW4tc3dhdGNoZXNcIlxuICAgICAgW2NsYXNzLm9wZW5lZF09XCJvcGVuZWRcIlxuICAgID5cbiAgICAgIDxzcGFuXG4gICAgICAgICpuZ0Zvcj1cImxldCBza2luVG9uZSBvZiBza2luVG9uZXNcIlxuICAgICAgICBjbGFzcz1cImVtb2ppLW1hcnQtc2tpbi1zd2F0Y2hcIlxuICAgICAgICBbY2xhc3Muc2VsZWN0ZWRdPVwic2tpblRvbmUgPT09IHNraW5cIlxuICAgICAgPlxuICAgICAgICA8c3BhblxuICAgICAgICAgIChjbGljayk9XCJoYW5kbGVDbGljayhza2luVG9uZSlcIlxuICAgICAgICAgIChrZXl1cC5lbnRlcik9XCJoYW5kbGVDbGljayhza2luVG9uZSlcIlxuICAgICAgICAgIChrZXl1cC5zcGFjZSk9XCJoYW5kbGVDbGljayhza2luVG9uZSlcIlxuICAgICAgICAgIGNsYXNzPVwiZW1vamktbWFydC1za2luIGVtb2ppLW1hcnQtc2tpbi10b25lLXt7IHNraW5Ub25lIH19XCJcbiAgICAgICAgICByb2xlPVwiYnV0dG9uXCJcbiAgICAgICAgICBbdGFiSW5kZXhdPVwidGFiSW5kZXgoc2tpblRvbmUpXCJcbiAgICAgICAgICBbYXR0ci5hcmlhLWhpZGRlbl09XCIhaXNWaXNpYmxlKHNraW5Ub25lKVwiXG4gICAgICAgICAgW2F0dHIuYXJpYS1wcmVzc2VkXT1cInByZXNzZWQoc2tpblRvbmUpXCJcbiAgICAgICAgICBbYXR0ci5hcmlhLWhhc3BvcHVwXT1cIiEhaXNTZWxlY3RlZChza2luVG9uZSlcIlxuICAgICAgICAgIFthdHRyLmFyaWEtZXhwYW5kZWRdPVwiZXhwYW5kZWQoc2tpblRvbmUpXCJcbiAgICAgICAgICBbYXR0ci5hcmlhLWxhYmVsXT1cImkxOG4uc2tpbnRvbmVzW3NraW5Ub25lXVwiXG4gICAgICAgICAgW3RpdGxlXT1cImkxOG4uc2tpbnRvbmVzW3NraW5Ub25lXVwiXG4gICAgICAgID48L3NwYW4+XG4gICAgICA8L3NwYW4+XG4gICAgPC9zZWN0aW9uPlxuICBgLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG59KVxuZXhwb3J0IGNsYXNzIFNraW5Db21wb25lbnQge1xuICAvKiogY3VycmVudGx5IHNlbGVjdGVkIHNraW4gKi9cbiAgQElucHV0KCkgc2tpbj86IEVtb2ppWydza2luJ107XG4gIEBJbnB1dCgpIGkxOG46IGFueTtcbiAgQE91dHB1dCgpIGNoYW5nZVNraW4gPSBuZXcgRXZlbnRFbWl0dGVyPEVtb2ppWydza2luJ10+KCk7XG4gIG9wZW5lZCA9IGZhbHNlO1xuICBza2luVG9uZXM6IEVtb2ppWydza2luJ11bXSA9IFsxLCAyLCAzLCA0LCA1LCA2XTtcblxuICB0b2dnbGVPcGVuKCkge1xuICAgIHRoaXMub3BlbmVkID0gIXRoaXMub3BlbmVkO1xuICB9XG5cbiAgaXNTZWxlY3RlZChza2luVG9uZTogRW1vamlbJ3NraW4nXSk6IGJvb2xlYW4ge1xuICAgIHJldHVybiBza2luVG9uZSA9PT0gdGhpcy5za2luO1xuICB9XG5cbiAgaXNWaXNpYmxlKHNraW5Ub25lOiBFbW9qaVsnc2tpbiddKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMub3BlbmVkIHx8IHRoaXMuaXNTZWxlY3RlZChza2luVG9uZSk7XG4gIH1cblxuICBwcmVzc2VkKHNraW5Ub25lOiBFbW9qaVsnc2tpbiddKSB7XG4gICAgcmV0dXJuIHRoaXMub3BlbmVkID8gISF0aGlzLmlzU2VsZWN0ZWQoc2tpblRvbmUpIDogJyc7XG4gIH1cblxuICB0YWJJbmRleChza2luVG9uZTogRW1vamlbJ3NraW4nXSkge1xuICAgIHJldHVybiB0aGlzLmlzVmlzaWJsZShza2luVG9uZSkgPyAnMCcgOiAnJztcbiAgfVxuXG4gIGV4cGFuZGVkKHNraW5Ub25lOiBFbW9qaVsnc2tpbiddKSB7XG4gICAgcmV0dXJuIHRoaXMuaXNTZWxlY3RlZChza2luVG9uZSkgPyB0aGlzLm9wZW5lZCA6ICcnO1xuICB9XG5cbiAgaGFuZGxlQ2xpY2soc2tpbjogRW1vamlbJ3NraW4nXSkge1xuICAgIGlmICghdGhpcy5vcGVuZWQpIHtcbiAgICAgIHRoaXMub3BlbmVkID0gdHJ1ZTtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy5vcGVuZWQgPSBmYWxzZTtcbiAgICBpZiAoc2tpbiAhPT0gdGhpcy5za2luKSB7XG4gICAgICB0aGlzLmNoYW5nZVNraW4uZW1pdChza2luKTtcbiAgICB9XG4gIH1cbn1cbiJdfQ==