<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideModals()"></my-global-icon>
</div>
<div class="modal-body">
- <table class="table-emoji" *ngFor="let emojiMarkup of emojiMarkupList | keyvalue">
- <tr>
- <td>
- <span>{{ emojiMarkup.value }}</span>
- </td>
- <td>
- <code>:{{ emojiMarkup.key }}:</code>
- </td>
- </tr>
- </table>
+ <div class="emoji-flex">
+ <div class="emoji-flex-item" *ngFor="let emojiMarkup of emojiMarkupList">
+ {{ emojiMarkup[0] }} <code>:{{ emojiMarkup[1] }}:</code>
+ </div>
+ </div>
</div>
</ng-template>
}
get emojiMarkupList () {
- const emojiMarkup = require('markdown-it-emoji/lib/data/light.json')
+ const emojiMarkupObjectList = require('markdown-it-emoji/lib/data/light.json')
+
+ // Populate emoji-markup-list from object to array to avoid keys alphabetical order
+ const emojiMarkupArrayList = []
+ for (const emojiMarkupName in emojiMarkupObjectList) {
+ if (emojiMarkupName) {
+ const emoji = emojiMarkupObjectList[emojiMarkupName]
+ emojiMarkupArrayList.push([emoji, emojiMarkupName])
+ }
+ }
- return emojiMarkup
+ return emojiMarkupArrayList
}
ngOnInit () {
openEmojiModal (event: any) {
event.preventDefault()
- this.modalService.open(this.emojiModal, { backdrop: true })
+ this.modalService.open(this.emojiModal, { backdrop: true, size: 'lg' })
}
hideModals () {