/* eslint-disable lit/prefer-static-styles */
// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { when } from '../../../Directives/Directives';
import { Appearance } from '../../../Types/Appearance';
import { Size } from '../../../Types/Size';
// #endregion
/**
 * The template of the `SignaturePadElement`.
 *
 * @public
 */
export function signaturePadElementTemplate(e) {
    return html `
        <style>
            :host {
                width: ${e.width};
                height: ${e.height};
            }
        </style>
        ${when(!e.disabled, () => html `
        <mosaik-focus-ring part="focusRing"
                           .variant="${e.variant}"
                           .visible="${e.isFocused}"
                           .controlled="${'manual'}"
                           @connected="${(evt) => evt.target.attach(e)}"></mosaik-focus-ring>
        `)}
        ${when(e.placeholder.trim() && !e.isFocused && e.isEmpty, () => html `
            <mosaik-text part="placeholder"
                        .text="${e.placeholder}"></mosaik-text>
        `)}
        ${when(!e.disabled && !e.isEmpty && e.isClearable, () => html `
        <mosaik-button part="clear"
                       .appearance="${Appearance.Plain}"
                       .icon="${Icons.clear}"
                       .size="${Size.Small}"
                       .iconSize="${Size.Medium}"
                       @click="${() => e.clear()}"></mosaik-button>
        `)}
        <canvas part="canvas"
                @mousedown="${() => e.isFocused = true}"
                @mouseup="${() => e.isFocused = false}"
                @pointerdown="${() => e.isFocused = true}"
                @pointerup="${() => e.isFocused = false}"></canvas>
    `;
}
//# sourceMappingURL=SignaturePadElementTemplate.js.map