// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { live, when } from '../../../Directives/Directives';
import { Appearance } from '../../../Types/Appearance';
// #endregion
/**
 * The template of the {@link ChatInputElement}.
 *
 * @public
 */
export function chatInputElementTemplate(e) {
    return html `
        ${when(!e.disabled, () => html `
        <mosaik-focus-ring part="focusRing"
                           .variant="${e.variant}"
                           .controlled="${'manual'}"
                           @connected="${(evt) => evt.target.attach(e)}"></mosaik-focus-ring>
        `)}
        <mosaik-chat-input-attachment-list part="attachments"
                                           .files="${e.value.files}"
                                           .appearance="${e.appearance}"
                                           .variant="${e.variant}"
                                           .disabled="${e.disabled}"
                                           .dir="${e.dir}"
                                           @chatAttachmentAdded="${(evt) => e.onAttachmentAdded(evt.detail)}"
                                           @chatAttachmentRemoved="${(evt) => e.onAttachmentRemoved(evt.detail)}"></mosaik-chat-input-attachment-list>
        <mosaik-textbox part="textBox"
                        .dir="${e.dir}"
                        .placeholder="${e.placeholder}"
                        .multiline="${true}"
                        .value="${live(e.value.message)}"
                        .appearance="${Appearance.Plain}"
                        .variant="${e.variant}"
                        @input="${(x) => e.onInput(x)}"
                        @keyup="${(x) => e.onKeyup(x)}"></mosaik-textbox>

        <div part="tools">
            <div part="begin">
                <slot name="tools"></slot>
            </div>
            <div part="end">
                <mosaik-button .dir="${e.dir}"
                               .appearance="${Appearance.Plain}"
                               .icon="${Icons.send}"
                               @click="${() => e.send(e.value.message, e.value.files)}"></mosaik-button>
            </div>
        </div>
    `;
}
//# sourceMappingURL=ChatInputElementTemplate.js.map