// #region Imports
import { html } from '../../../../Dom/Html';
import { repeat } from '../../../Directives/Directives';
import { partMap } from '../../../Directives/part-map/PartMapDirective';
// #endregion
/**
 * The template of the `WheelPickerElement`.
 *
 * @public
 */
export function wheelPickerElementTemplate(e) {
    return html `
        <div part="column"
             role="listbox"
             aria-label="${e.ariaLabel ?? ''}"
             tabindex="0"
             @click="${(x) => e.onItemClick(x)}">
            ${repeat(e.items, (item) => item.value, (item) => html `
            <div part=${partMap({ 'item': true, 'selected': item.value === e.value })}
                 role="option"
                 aria-selected="${item.value === e.value}"
                 data-value="${item.value}">
                ${item.label}
            </div>
            `)}
        </div>
    `;
}
//# sourceMappingURL=WheelPickerElementTemplate.js.map