// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { when } from '../../../Directives/Directives';
import { Appearance } from '../../../Types/Appearance';
import { CheckType } from '../../../Types/CheckType';
import { Size } from '../../../Types/Size';
// #endregion
/**
 * @public
 */
export function chipElementTemplate(e) {
    return html `
        ${when(!e.disabled && (e.isCheckable || e.closeable), () => 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.disabled && e.isCheckable, () => html `
        <mosaik-ripple part="ripple"
                       .variant="${e.variant}"
                       @connected="${(evt) => evt.target.attach(e)}"></mosaik-ripple>
        `)}
        ${when(e.isCheckable || e.icon, () => html `
        <mosaik-flip part="flip"
                     ?is-flipped="${e.isChecked}"
                     ?disabled="${e.disabled}">
            <slot slot="front"
                  name="icon">
                ${when(e.icon, () => html `
                <mosaik-icon part="icon"
                             .size="${Size.Small}"
                             .appearance="${Appearance.Plain}"
                             .variant="${e.variant}"
                             .data="${e.icon}"
                             ?disabled="${e.disabled}"></mosaik-icon>
                `)}
            </slot>
            <slot slot="back"
                  name="checkmark">
                ${when(e.isCheckable && e.isChecked, () => html `
                <mosaik-checkmark part="checkmark"
                                  .appearance="${Appearance.Plain}"
                                  .variant="${e.variant}"
                                  .type="${CheckType.Hook}"
                                  ?checked="${e.isChecked}"
                                  ?disabled="${e.disabled}"></mosaik-checkmark>
                `)}
            </slot>
        </mosaik-flip>
        `, () => html `
        <slot name="icon">
            ${when(e.icon, () => html `
            <mosaik-icon part="icon"
                         .size="${Size.Small}"
                         .appearance="${Appearance.Plain}"
                         .variant="${e.variant}"
                         .data="${e.icon}"
                         ?disabled="${e.disabled}"></mosaik-icon>
            `)}
        </slot>
        `)}
        <slot name="label">
        ${when(e.label, () => html `
            <mosaik-text part="label"
                         .text="${e.label}"
                         .variant="${e.variant}"
                         .truncate="${true}"
                         ?disabled="${e.disabled}"></mosaik-text>
        `)}
        </slot>
        <slot name="close">
        ${when(e.closeable && !e.disabled, () => html `
            <mosaik-icon part="close"
                         .size="${Size.Small}"
                         .appearance="${Appearance.Plain}"
                         .variant="${e.variant}"
                         .data="${Icons.dismissCircle}"
                         .inline="${true}"
                         ?disabled="${e.disabled}"
                         @click="${(x) => e.onCloseClick(x)}"></mosaik-icon>
        `)}
        </slot>
    `;
}
//# sourceMappingURL=ChipElementTemplate.js.map