import { html, ref, slotted, when } from '@ni/fast-element';
import { overflow } from '../utilities/directive/overflow';
import { ListOption } from '../list-option';
const isListOption = (n) => {
    return n instanceof ListOption;
};
export const template = html `
<template
    role="group"
    aria-label="${x => x.labelContent}"
    slot="option"
>
    <span ${overflow('hasOverflow')} 
        class="label-display"
        aria-hidden="true"
        title=${x => (x.hasOverflow && x.labelContent ? x.labelContent : null)}
        @click="${(x, c) => x.clickHandler(c.event)}"
    >
        ${when(x => (typeof x.label === 'string'), html `${x => x.label}`)} 
        <slot ${ref('labelSlot')}
            class="label-slot ${x => (typeof x.label === 'string' ? 'hidden' : '')}"
        >
        </slot>
    </span>
    <span class="content" part="content" role="none">
        <slot name="option"
        ${slotted({
    flatten: true,
    filter: (n) => isListOption(n),
    property: 'listOptions'
})}
></slot>
    </span>
</template>
`;
//# sourceMappingURL=template.js.map