// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
// #endregion
/**
 * The template of the `DropdownElement`.
 *
 * @public
 */
export function dropdownElementTemplate(e) {
    return html `
        <div part="anchor"
             id="${e._anchorId}">
            <slot name="anchor"
                  @slotchange="${(event) => e.onAnchorSlotChange(event)}"></slot>
        </div>
        <div part="panel"
             id="${e._panelId}"
             popover="manual"
             role="${e.popupRole || ''}"
             aria-label="${e.popupRole ? '' : ''}">
            ${when(e.isVisible, () => html `
                <slot name="panel"
                      @slotchange="${(event) => e.onPanelSlotChange(event)}"></slot>
            `)}
        </div>
    `;
}
//# sourceMappingURL=DropdownElementTemplate.js.map