-
${item.groupName}
+
+ this.showGroupContextMenu(e, item.groupName)}
+ >${item.groupName}
${item.items.map((entry) => this.renderElementItem(entry, section))}
`;
@@ -753,6 +821,7 @@ export class WccSidebar extends DeesElement {
`;
} else {
// Single demo element
+ const icon = this.getElementGroups(item).length > 1 ? 'library_books' : 'featured_video';
return html`
this.showContextMenu(e, section.name, elementName)}
>
-
featured_video
+
${icon}
${this.highlightMatch(elementName)}
`;
@@ -810,6 +879,37 @@ export class WccSidebar extends DeesElement {
return name.toLowerCase().includes(this.searchQuery.toLowerCase());
}
+ private isGroupFilterMatch(groupName: string): boolean {
+ return !!this.searchQuery && groupName.toLowerCase() === this.searchQuery.toLowerCase();
+ }
+
+ private getElementGroups(item: any): string[] {
+ const raw = item?.demoGroups;
+ if (!raw) return [];
+ return Array.isArray(raw) ? raw : [raw];
+ }
+
+ private scrollToGroup(sectionName: string, groupName: string) {
+ // Ensure the section is not collapsed
+ this.collapsedSections.delete(sectionName);
+ // Clear any active search so all groups are visible
+ this.searchQuery = '';
+ this.requestUpdate();
+
+ // After render, scroll to the group element
+ this.updateComplete.then(() => {
+ const groupEl = this.shadowRoot?.querySelector(
+ `.item-group[data-group="${groupName}"]`
+ );
+ if (groupEl) {
+ groupEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ // Brief highlight flash
+ groupEl.classList.add('group-highlight');
+ setTimeout(() => groupEl.classList.remove('group-highlight'), 1500);
+ }
+ });
+ }
+
private highlightMatch(text: string): TemplateResult {
if (!this.searchQuery) return html`${text}`;
const lowerText = text.toLowerCase();