// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
import { Appearance } from '../../../Types/Appearance';
// #endregion
/**
 * The template of the `TileElement`.
 *
 * @public
 */
export function tileElementTemplate(e) {
    return html `
        ${when(!e.disabled, () => html `
        <mosaik-focus-ring part="focusRing"
                           .variant="${e.variant}"
                           .visible="${e.isFocused}"
                           .controlled="${'manual'}"
                           .for="${'button'}"></mosaik-focus-ring>
        `)}
        ${when(!e.disabled && e.appearance !== Appearance.Outline, () => html `
        <mosaik-elevation part="elevation"
                          .weigh="${e.elevation}"
                          @connected="${(evt) => evt.target.attach(e)}"></mosaik-elevation>
        `)}
        <button id="button"
                part="button"
                type="${e.type}">
            ${when(!e.disabled && e.ripple, () => html `
            <mosaik-ripple part="ripple"
                           .variant="${e.variant}"
                           .for="${'button'}"></mosaik-ripple>
            `)}
            <div part="content">
                <slot></slot>
            </div>
        </button>
    `;
}
//# sourceMappingURL=TileElementTemplate.js.map