import*as i18n from"../i18n/i18n.js";import*as UI from"../ui/ui.js";const UIStrings={clearOverview:"Clear overview"},str_=i18n.i18n.registerUIStrings("css_overview/CSSOverviewSidebarPanel.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class CSSOverviewSidebarPanel extends UI.Widget.VBox{static get ITEM_CLASS_NAME(){return"overview-sidebar-panel-item"}static get SELECTED(){return"selected"}constructor(){super(!0),this.registerRequiredCSS("css_overview/cssOverviewSidebarPanel.css",{enableLegacyPatching:!1}),this.contentElement.classList.add("overview-sidebar-panel"),this.contentElement.addEventListener("click",this._onItemClick.bind(this));const e=new UI.Toolbar.ToolbarButton(i18nString(UIStrings.clearOverview),"largeicon-clear");e.addEventListener(UI.Toolbar.ToolbarButton.Events.Click,this._reset,this);const t=this.contentElement.createChild("div","overview-toolbar");new UI.Toolbar.Toolbar("",t).appendToolbarItem(e)}addItem(e,t){const i=this.contentElement.createChild("div",CSSOverviewSidebarPanel.ITEM_CLASS_NAME);i.textContent=e,i.dataset.id=t}_reset(){this.dispatchEventToListeners("Reset")}_deselectAllItems(){this.contentElement.querySelectorAll(`.${CSSOverviewSidebarPanel.ITEM_CLASS_NAME}`).forEach((e=>{e.classList.remove(CSSOverviewSidebarPanel.SELECTED)}))}_onItemClick(e){const t=e.composedPath()[0];if(!t.classList.contains(CSSOverviewSidebarPanel.ITEM_CLASS_NAME))return;const{id:i}=t.dataset;i&&(this.select(i),this.dispatchEventToListeners("ItemSelected",i))}select(e){const t=this.contentElement.querySelector(`[data-id=${CSS.escape(e)}]`);t&&(t.classList.contains(CSSOverviewSidebarPanel.SELECTED)||(this._deselectAllItems(),t.classList.add(CSSOverviewSidebarPanel.SELECTED)))}}