import { html } from "lit";
import { Directive, PartType, directive } from "lit/directive.js";
class HierarchicalPathDirective extends Directive {
    render(props) {
        const { path, separator = '/', ellipsis = '...', maxLength = 3, emptyPathContent = '', separatorClass = 'mx-0.5', itemClass = 'max-w-max flex-1 truncate', ellipsisClass = '' } = props;
        if (!path.length) return emptyPathContent;
        const ellipsedPath = this.getEllipsedPath(path, maxLength, ellipsis);
        return ellipsedPath.map((value, index)=>html`
        ${index > 0 ? html`<span class=${separatorClass}>${separator}</span>` : ''}
        <span class=${value === ellipsis ? ellipsisClass : itemClass}>
          ${value}
        </span>
      `);
    }
    getEllipsedPath(path, maxLength, ellipsis) {
        if (path.length <= maxLength) return path;
        if (1 === maxLength) return [
            path[0]
        ];
        const firstPart = path.slice(0, 1);
        const lastParts = path.slice(-maxLength + 1);
        return firstPart.concat(ellipsis, ...lastParts);
    }
    constructor(partInfo){
        super(partInfo);
        if (partInfo.type !== PartType.CHILD) throw new Error('hierarchicalPath can only be used in child bindings');
    }
}
const hierarchicalPath = directive(HierarchicalPathDirective);
export { hierarchicalPath };
