/*!
 * KoliBri - The accessible HTML-Standard
 */
import { h } from "@stencil/core";
import clsx from "../../utils/clsx";
const CustomSuggestionsOptionFc = ({ disabled, index, ref, selected, onClick, onMouseOver, onFocus, onKeyDown, option, searchTerm, }) => {
    const highlightSearchTerm = (text, searchTerm) => {
        if (!(searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.trim()))
            return text;
        const regex = new RegExp(`(${searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
        const parts = text.split(regex);
        return parts.map((part, partIndex) => (partIndex % 2 === 1 ? h("mark", null, part) : part));
    };
    return (h("li", { id: `option-${index}`, key: `-${index}`, ref: ref, "data-index": index, tabIndex: -1, role: "option", "aria-selected": selected ? 'true' : undefined, "aria-disabled": disabled ? 'true' : undefined, onClick: onClick, onMouseOver: onMouseOver, onFocus: onFocus, class: clsx('kol-custom-suggestions-option', { 'kol-custom-suggestions-option--disabled': disabled }), onKeyDown: onKeyDown }, h("span", null, highlightSearchTerm(String(option), searchTerm || ''))));
};
export default CustomSuggestionsOptionFc;
//# sourceMappingURL=CustomSuggestionsOption.js.map
