import { html, ref, slotted, when } from '@ni/fast-element';
import { endSlotTemplate, startSlotTemplate } from '@ni/fast-foundation';
import { overflow } from '../utilities/directive/overflow';
import { buttonTag } from '../button';
import { iconTimesTag } from '../icons/times';
import { ButtonAppearance } from '../button/types';
export const template = (context, definition) => html `
    ${startSlotTemplate(context, definition)}
    <span
        class="content"
        part="content"
        ${overflow('hasOverflow')}
        title=${x => (x.hasOverflow && x.elementTextContent
    ? x.elementTextContent
    : null)}
    >
        <slot
            ${ref('contentSlot')}
            ${slotted({ property: 'content' })}
        ></slot>
    </span>
    ${when(x => x.removable && !x.disabled, html `
        <${buttonTag}
            class="remove-button"
            content-hidden
            appearance="${ButtonAppearance.ghost}"
            tabindex="${x => x.tabIndex}"
            @click="${x => x.handleRemoveClick()}"
        >
            <${iconTimesTag} slot="start"></${iconTimesTag}>
            ${x => x.removeButtonContent}
        </${buttonTag}>
    `)}
    ${endSlotTemplate(context, definition)}
`;
//# sourceMappingURL=template.js.map