Use ha-checkbox instead of hacs-checkbox (#510)

hacs · Nov 6, 2021 · 53690fc · 53690fc
1 parent b146840
commit 53690fc
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 101 deletions.
diff --git a/src/components/dialogs/hacs-add-repository-dialog.ts b/src/components/dialogs/hacs-add-repository-dialog.ts
@@ -110,6 +110,7 @@ export class HacsAddRepositoryDialog extends HacsDialogBase {
       >
         <div class="searchandfilter">
           <search-input
+            .hass=${this.hass}
             no-label-float
             .label=${this.hacs.localize("search.placeholder")}
             .filter=${this._searchInput || ""}
@@ -347,6 +348,7 @@ export class HacsAddRepositoryDialog extends HacsDialogBase {
 
         hacs-filter {
           width: 100%;
+          margin-left: -32px;
         }
         div[secondary] {
           width: 88%;

diff --git a/src/components/hacs-checkbox.ts b/src/components/hacs-checkbox.ts
diff --git a/src/components/hacs-filter.ts b/src/components/hacs-filter.ts
@@ -1,38 +1,41 @@
+import "../../homeassistant-frontend/src/components/ha-checkbox";
+import "../../homeassistant-frontend/src/components/ha-formfield";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { Filter } from "../data/common";
 import { Hacs } from "../data/hacs";
 import { HacsStyles } from "../styles/hacs-common-style";
-import "./hacs-checkbox";
 
 @customElement("hacs-filter")
 export class HacsFilter extends LitElement {
-  @property({ attribute: false }) public filters: Filter[];
-  @property({ attribute: false }) public hacs: Hacs;
+  @property({ attribute: false }) public filters?: Filter[];
 
-  protected async firstUpdated() {
-    this.addEventListener("checkbox-change", (e) => this._filterClick(e));
-  }
+  @property({ attribute: false }) public hacs!: Hacs;
 
   protected render(): TemplateResult | void {
     return html`
       <div class="filter">
         ${this.filters?.map(
           (filter) => html`
-            <hacs-checkbox
+            <ha-formfield
               class="checkbox"
               .label=${this.hacs.localize(`common.${filter.id}`) || filter.value}
-              .id=${filter.id}
-              .checked=${filter.checked || false}
-            />
-            </hacs-checkbox>`
+            >
+              <ha-checkbox
+                .checked=${filter.checked || false}
+                .id=${filter.id}
+                @click=${this._filterClick}
+              >
+              </ha-checkbox>
+            </ha-formfield>
+          `
         )}
       </div>
     `;
   }
 
   private _filterClick(ev): void {
-    const filter = ev.detail;
+    const filter = ev.currentTarget;
     this.dispatchEvent(
       new CustomEvent("filter-change", {
         detail: {

diff --git a/src/panels/hacs-store-panel.ts b/src/panels/hacs-store-panel.ts
@@ -183,6 +183,7 @@ export class HacsStorePanel extends LitElement {
             <div slot="header">
               <slot name="header">
                 <search-input
+                  .hass=${this.hass}
                   class="header"
                   no-label-float
                   .label=${this.hacs.localize("search.installed")}
@@ -194,6 +195,7 @@ export class HacsStorePanel extends LitElement {
           `
         : html`<div class="search">
             <search-input
+              .hass=${this.hass}
               no-label-float
               .label=${newRepositories.length === 0
                 ? this.hacs.localize("search.installed")