import { html } from "lit";
import { multiClassMap, tw } from "../../../../directives/multi-class-map.js";
import { highlightSearchResult } from "../facet-search/facet-search-utils.js";
const renderFacetValueLabelHighlight = ({ props })=>{
    const classNames = tw({
        'value-label peer-hover:text-error truncate': true,
        'font-bold': props.isSelected || !!props.isExcluded
    });
    return html`<span
    title=${props.displayValue}
    part="value-label"
    class=${multiClassMap(classNames)}
    .innerHTML=${highlightSearchResult(props.displayValue, props.searchQuery)}
  ></span>`;
};
export { renderFacetValueLabelHighlight };
