) {
+ super.updated(_changedProperties);
+ if (this._open) {
+ if (_changedProperties.has("_open") || _changedProperties.has("_searchText"))
+ this._focusedIndex = 0;
+ const list = this._focusableValues;
+
+ this._focusedIndex = Math.min(this._focusedIndex, Math.max(0, list.length - 1));
+ }
+ }
+
+ private _renderCount(node: TreeNode): TemplateResult | string {
+ return node.count != null ? html`${node.count}` : "";
+ }
+
+ private _renderNode(node: TreeNode, depth: number): TemplateResult {
+ const hasChildren = !!node.children?.length;
+ const expanded = this._isExpanded(node);
+ const checked = this._isChecked(node);
+ const indeterminate = this._isIndeterminate(node);
+ const expandIcon = hasChildren ? (expanded ? "arrow_down" : "arrow_right") : null;
+ const singleMode = !this.isMultiple;
+ const isLeaf = !hasChildren;
+ const singleLeafChecked = singleMode && isLeaf && this._singleValue === node.value;
+ const singleParent = singleMode && hasChildren;
+
+ const rowFocused = this._focusedValue === node.value;
+
+ return html`
+
+
+ {
+ e.stopPropagation();
+ if (hasChildren) this._toggleExpand(node);
+ }}
+ role="button"
+ tabindex=${hasChildren ? 0 : -1}
+ aria-expanded=${hasChildren && expanded}
+ >
+ ${expandIcon
+ ? html``
+ : html``}
+
+ ${singleParent
+ ? html`
+ ${node.label}
+ ${this._renderCount(node)}
+ `
+ : singleMode && isLeaf
+ ? html`
+ ) =>
+ this._setSingleLeafValue(node, e.detail)}
+ >
+ ${node.label}
+
+ ${this._renderCount(node)}
+ `
+ : html`
+ ) =>
+ this._toggleNode(node, e.detail)}
+ >
+ ${node.label}
+
+ ${this._renderCount(node)}
+ `}
+
+ ${hasChildren && expanded
+ ? html`
+
+ ${node.children!.map(child => this._renderNode(child, depth + 1))}
+
+ `
+ : ""}
+
${visible.map(node => this._renderNode(node, 0))}
`;
+ }
+
+ private _renderAutocompleteList(): TemplateResult {
+ return html`
+
+ ${this._autocompleteList.map(
+ ({ node, path }) => html`
+
this._selectAutocompleteItem(node)}
+ >
+ ${this._highlightPath(path, this._searchText)}
+
+ `
+ )}
+
+ ) => this._handleSelectAll(e.detail)}
+ >
+ ${this.selectAllText || msg("Select All", { desc: "bl-select: select all text" })}
+ ${count > 0
+ ? html`${msg(str`(${count} selected)`, { desc: "bl-tree-select: selected count" })}`
+ : ""}
+
+
+ `;
+ }
+
+ private _renderPanelContent(): TemplateResult {
+ if (this._searchText.trim()) {
+ return this._autocompleteList.length > 0
+ ? this._renderAutocompleteList()
+ : html`
+ ${this.searchNotFoundText ??
+ msg("No Result Found", { desc: "bl-tree-select: search no result text" })}
+
`;
+ }
+ return html`${this._renderSelectAllRow()} ${this._renderTree(this.items)}`;
+ }
+
+ render(): TemplateResult {
+ const displayText = this._getDisplayText();
+ const searchPh =
+ this.searchPlaceholder ||
+ this.placeholder ||
+ msg("Search...", { desc: "bl-tree-select: search placeholder" });
+ const inputPlaceholder = this._open ? searchPh : displayText || this.placeholder || undefined;
+
+ return html`
+
+ ${this.label
+ ? html``
+ : ""}
+
+ {
+ if (this._open) e.stopPropagation();
+ }}
+ />
+ ${this.isSearchLoading && this._open
+ ? html``
+ : ""}
+ ${this._hasValue && !this.disabled
+ ? html`
+ {
+ e.stopPropagation();
+ this._clearSelection();
+ }}
+ >
+ `
+ : ""}
+
+
+
+
+ ${this._renderPanelContent()}
+
+
+