Upgrade to lit (not lit-element / lit-html)

src/action-handler-directive.ts

@@ -1,4 +1,5 @@
-import { directive, PropertyPart } from 'lit-html';
+import { noChange } from 'lit';
+import { AttributePart, directive, Directive, DirectiveParameters } from 'lit/directive';
 
 import {
   ActionHandlerDetail,
@@ -194,7 +195,7 @@ const getActionHandler = (): ActionHandler => {
 
 export const actionHandlerBind = (
   element: ActionHandlerElement,
-  options: ActionHandlerOptions,
+  options?: ActionHandlerOptions,
 ): void => {
   const actionhandler: ActionHandler = getActionHandler();
   if (!actionhandler) {
@@ -204,8 +205,13 @@ export const actionHandlerBind = (
 };
 
 export const actionHandler = directive(
-  (options: ActionHandlerOptions = {}) =>
-    (part: PropertyPart): void => {
-      actionHandlerBind(part.committer.element as ActionHandlerElement, options);
-    },
+  class extends Directive {
+    update(part: AttributePart, [options]: DirectiveParameters<this>) {
+      actionHandlerBind(part.element as ActionHandlerElement, options);
+      return noChange;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
+    render(_options?: ActionHandlerOptions) {}
+  },
 );

src/editor.ts

@@ -1,14 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import {
-  LitElement,
-  html,
-  customElement,
-  property,
-  TemplateResult,
-  CSSResult,
-  state,
-  unsafeCSS,
-} from 'lit-element';
+import { LitElement, html, TemplateResult, CSSResultGroup, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators';
+
 import { HomeAssistant, fireEvent, LovelaceCardEditor } from 'custom-card-helpers';
 import { localize } from './localize/localize';
 import type { FrigateCardConfig } from './types';
@@ -96,7 +89,6 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
 
     // You can restrict on domain type
     const cameraEntities = this._getEntities('camera');
-    const binarySensorEntities = this._getEntities('binary_sensor');
 
     const webrtcCameraEntity =
       this._config?.webrtc && (this._config?.webrtc as any).entity
@@ -114,7 +106,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
 
     const menuModes = {
       '': '',
-      'none': localize('menu_mode.none'),
+      none: localize('menu_mode.none'),
       'hidden-top': localize('menu_mode.hidden-top'),
       'hidden-left': localize('menu_mode.hidden-left'),
       'hidden-bottom': localize('menu_mode.hidden-bottom'),
@@ -444,7 +436,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
   }
 
   // Return compiled CSS styles (thus safe to use with unsafeCSS).
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return unsafeCSS(frigate_card_editor_style);
   }
 }

src/frigate-hass-card.ts

@@ -1,20 +1,15 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   LitElement,
-  html,
-  customElement,
-  property,
-  CSSResult,
+  CSSResultGroup,
   TemplateResult,
   PropertyValues,
-  state,
+  html,
   unsafeCSS,
-  query,
-} from 'lit-element';
-
-import { NodePart } from 'lit-html';
-import { until } from 'lit-html/directives/until.js';
-import { classMap } from 'lit-html/directives/class-map.js';
+} from 'lit';
+import { customElement, property, query, state, } from 'lit/decorators';
+import { until } from 'lit/directives/until.js';
+import { classMap } from 'lit/directives/class-map.js';
 
 import {
   HomeAssistant,
@@ -163,7 +158,7 @@ export class FrigateCardMenu extends LitElement {
   }
 
   // Render the menu.
-  protected render(): TemplateResult | void | ((part: NodePart) => Promise<void>) {
+  protected render(): TemplateResult {
     // If the menu is off, or if it's in hidden mode but there's no button to
     // unhide it, just show nothing.
     if (
@@ -206,7 +201,7 @@ export class FrigateCardMenu extends LitElement {
   }
 
   // Return compiled CSS styles (thus safe to use with unsafeCSS).
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return unsafeCSS(frigate_card_menu_style);
   }
 }
@@ -1030,7 +1025,7 @@ export class FrigateCard extends LitElement {
   }
 
   // Return compiled CSS styles (thus safe to use with unsafeCSS).
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return unsafeCSS(frigate_card_style);
   }