import { html } from 'lit';
import '../md/icons/ui-icon.js';
import '../md/icon-button/ui-icon-button.js';
/**
 * Renders a help icon with a button that can be used to trigger help functionality.
 * The help system lives outside the application and renders the help content in a node controlled
 * by the help system.
 *
 * @param category The category of the help content, which determines where to look for the help content.
 * @param id The identifier for the specific help content within the category.
 * @returns The template result containing the help icon button.
 */
export function renderHelp(category, id) {
    const handleClick = (event) => {
        const button = event.currentTarget;
        const { category, id } = button.dataset;
        if (!category || !id) {
            return;
        }
        const detail = {
            category,
            id,
            target: button,
        };
        button.dispatchEvent(new CustomEvent('request-help', {
            bubbles: true,
            composed: true,
            detail,
        }));
    };
    return html `<span class="help"
    ><ui-icon-button type="button" data-category="${category}" data-id="${id}" @click="${handleClick}"
      ><ui-icon>help</ui-icon></ui-icon-button
    ></span
  >`;
}
//# sourceMappingURL=render.js.map