// #region Imports
import { html } from '../../../../Dom/Html';
import { classMap, ifDefined, live, when } from '../../../Directives/Directives';
import { ifNonEmpty } from '../../../Directives/IfNonEmpty';
import { Variant } from '../../../Types/Variant';
// #endregion
/**
 * @public
 */
export function richTextBoxElementTemplate(e) {
    return html `
        ${when(e.showToolbar, () => html `
        <mosaik-richtextbox-toolbox part="toolbox" .editor="${e}"></mosaik-richtextbox-toolbox>
        `)}
        ${when(!e.disabled, () => html `
        <mosaik-focus-ring part="focusRing"
                           .variant="${e.invalid ? Variant.Danger : e.variant}"
                           .visible="${e.isFocused}"
                           .controlled="${'manual'}"
                           @connected="${(evt) => evt.target.attach(e)}"></mosaik-focus-ring>
        `)}
        <div part="prefix"
             ?hidden="${!e.hasSlotContent('prefix')}">
            <slot name="prefix"></slot>
        </div>
        <div part="inner" class="${classMap({ prefix: e.hasPrefix, suffix: e.hasSuffix })}">
            ${when(e.label, () => html `
            <label part="label"
                   for="input"
                   class="${classMap({ floating: e.value || e.isFocused })}">${e.label}</label>
            `)}
            <!-- <textarea part="input"
                      id="input"
                      name="${ifNonEmpty(e.name)}"
                      placeholder="${ifNonEmpty(e.isFocused || !e.label ? e.placeholder : '')}"
                      tabindex="${e.tabIndex}"
                      autocomplete="${ifDefined(e.autocomplete ? 'on' : 'off')}"
                      rows="${e.multilineRows}"
                      spellcheck="${ifDefined(e.spellcheck ? 'true' : 'false')}"
                      aria-invalid="${ifDefined(e.invalid)}"
                      .value="${live(e.value)}"
                      ?readonly="${e.readonly}"
                      ?disabled="${e.disabled}"
                      ?required="${e.required}"
                      ?autofocus="${e.autofocus}"
                      @change="${(x) => e.onChange(x)}"
                      @input="${(x) => e.onInput(x)}"
                      @focus="${(x) => e.onFocus(x)}"
                      @blur="${(x) => e.onBlur(x)}"></textarea> -->
            <div part="input"
                 id="input"
                 class="content"
                 contenteditable="true"
                 role="textbox"
                 spellcheck="true"
                 tabindex="0"
                 style="user-select: text; white-space: pre-wrap; word-break: break-word"
                 @change="${(x) => e.onChange(x)}"
                 @input="${(x) => e.onInput(x)}"
                 @focus="${(x) => e.onFocus(x)}"
                 @blur="${(x) => e.onBlur(x)}"></div>
        </div>
        <div part="suffix"
             ?hidden="${!e.hasSlotContent('suffix')}">
            <slot name="suffix"></slot>
        </div>
    `;
}
//# sourceMappingURL=RichTextBoxElementTemplate.js.map