// #region Imports
import { html } from '../../../../../Dom/Html';
import { repeat } from '../../../../Directives/Directives';
import { Icons } from '../../../../../Resources/Icons';
// #endregion
/**
 * The template of the `ReactionChatToolElement`.
 *
 * @public
 */
export function reactionChatToolElementTemplate(e) {
    return html `
        <mosaik-dropdown-button .dir="${e.dir}"
                                .appearance="${'plain'}"
                                .disabled="${e.disabled}"
                                .icon="${Icons.emoji}"
                                .caretVisible="${false}"
                                .dropDownPlacement="${'top-start'}">
            <mosaik-menu .dir="${e.dir}">
                ${repeat(e.reactions, (reaction) => reaction.unicode, (reaction) => html `
                <mosaik-menu-item .dir="${e.dir}"
                                  @click="${(x) => e.execute(x.target.toEmoji())}">
                    <mosaik-emoji part="emoji"
                                  slot="icon"
                                  .dir="${e.dir}"
                                  .unicode="${reaction.unicode}"
                                  .size="${'small'}"></mosaik-emoji>
                </mosaik-menu-item>
                `)}
            </mosaik-menu>
        </mosaik-dropdown-button>
    `;
}
//# sourceMappingURL=ReactionChatToolElementTemplate.js.map