How to use the lit-element.customElement function in lit-element

*/

import { classMap } from 'lit-html/directives/class-map';
import { html, property, query, customElement, LitElement } from 'lit-element';
import settings from 'carbon-components/es/globals/js/settings';
import ifNonNull from '../../globals/directives/if-non-null';
import FocusMixin from '../../globals/mixins/focus';
import FormMixin from '../../globals/mixins/form';
import styles from './checkbox.scss';

const { prefix } = settings;

/**
 * Check box.
 */
@customElement(`${prefix}-checkbox`)
class BXCheckbox extends FocusMixin(FormMixin(LitElement)) {
  @query('input')
  protected _checkboxNode!: HTMLInputElement;

  /**
   * Handles `click` event on the `<input>` in the shadow DOM.
   */
  protected _handleChange() {
    const { checked, indeterminate } = this._checkboxNode;
    this.checked = checked;
    this.indeterminate = indeterminate;
  }

  _handleFormdata(event: Event) {
    const { formData } = event as any; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`
    const { checked, disabled, name, value = 'on' } = this;

import { ItemSelectedEvent, NodeServiceData } from "./types";
import { navigate } from "../../../common/navigate";
import { UnsubscribeFunc, HassEvent } from "home-assistant-js-websocket";
import { formatAsPaddedHex } from "./functions";
import { computeStateName } from "../../../common/entity/compute_state_name";

declare global {
  // for fire event
  interface HASSDomEvents {
    "zha-device-removed": {
      device?: ZHADevice;
    };
  }
}

@customElement("zha-device-card")
class ZHADeviceCard extends LitElement {
  @property() public hass!: HomeAssistant;
  @property() public device?: ZHADevice;
  @property({ type: Boolean }) public narrow?: boolean;
  @property({ type: Boolean }) public showHelp?: boolean = false;
  @property({ type: Boolean }) public showActions?: boolean;
  @property({ type: Boolean }) public isJoinPage?: boolean;
  @property() private _serviceData?: NodeServiceData;
  @property() private _areas: AreaRegistryEntry[] = [];
  @property() private _selectedAreaIndex: number = -1;
  @property() private _userGivenName?: string;
  private _unsubAreas?: UnsubscribeFunc;
  private _unsubEntities?: UnsubscribeFunc;

  public disconnectedCallback() {
    super.disconnectedCallback();

import { fireEvent } from "../../../../common/dom/fire_event";
import { configElementStyle } from "./config-elements-style";
import { GaugeCardConfig, SeverityConfig } from "../../cards/types";

const cardConfigStruct = struct({
  type: "string",
  name: "string?",
  entity: "string?",
  unit: "string?",
  min: "number?",
  max: "number?",
  severity: "object?",
  theme: "string?",
});

@customElement("hui-gauge-card-editor")
export class HuiGaugeCardEditor extends LitElement
  implements LovelaceCardEditor {
  @property() public hass?: HomeAssistant;

  @property() private _config?: GaugeCardConfig;

  private _useSeverity?: boolean;

  public setConfig(config: GaugeCardConfig): void {
    config = cardConfigStruct(config);
    this._useSeverity = !!config.severity;
    this._config = config;
  }

  get _name(): string {
    return this._config!.name || "";

import { HomeAssistant } from "../../types";
import { fireEvent } from "../../common/dom/fire_event";
import { configFlowContentStyles } from "./styles";
import {
  DeviceRegistryEntry,
  updateDeviceRegistryEntry,
} from "../../data/device_registry";
import {
  AreaRegistryEntry,
  createAreaRegistryEntry,
} from "../../data/area_registry";
import { DataEntryFlowStepCreateEntry } from "../../data/data_entry_flow";
import { FlowConfig } from "./show-dialog-data-entry-flow";

@customElement("step-flow-create-entry")
class StepFlowCreateEntry extends LitElement {
  public flowConfig!: FlowConfig;

  @property()
  public hass!: HomeAssistant;

  @property()
  public step!: DataEntryFlowStepCreateEntry;

  @property()
  public devices!: DeviceRegistryEntry[];

  @property()
  public areas!: AreaRegistryEntry[];

  protected render(): TemplateResult | void {

* LICENSE file in the root directory of this source tree.
 */

import settings from 'carbon-components/es/globals/js/settings';
import { classMap } from 'lit-html/directives/class-map';
import { html, property, customElement, LitElement } from 'lit-element';
import LOADING_TYPE from './types';
import getLoadingIcon from './loading-icon';
import styles from './loading.scss';

const { prefix } = settings;

/**
 * Spinner indicating loading state.
 */
@customElement(`${prefix}-loading`)
class BXLoading extends LitElement {
  /**
   * The assistive text for the spinner icon. Corresponds to 'assistive-text' attribute.
   */
  @property({ attribute: 'assistive-text' })
  assistiveText = 'Loading';

  /**
   * Spinner type. Corresponds to the attribute with the same name.
   */
  @property()
  type = LOADING_TYPE.REGULAR;

  /**
   * `true` if spinner should stop. Corresponds to the attribute with the same name.
   */

import { ZenRoute } from '@origami/zen';
import { customElement, html, LitElement } from 'lit-element';
import { titleSet } from '../../../../lib/decorators/titleSet';
import { Me } from '../../../../store/state';
import CSS from './page-settings-css';

interface PageSettingsProps {
  me?: Me;
}

export * from './Organization/PageSettingsOrganization';
export * from './SettingsMenu/SettingsMenu';


@customElement('page-settings')
export class PageSettings extends titleSet('Settings')(LitElement) implements PageSettingsProps {
  public static styles = [CSS];

  public me?: Me;
  public base = '/admin/settings';

  public routes: ZenRoute[] = [
    {
      path: '/organization',
      element: 'page-settings-organization'
    },
    {
      path: '/me',
      element: 'page-settings-me'
    }
  ];

LitElement,
  property,
  customElement,
  PropertyValues,
  TemplateResult,
  html,
} from "lit-element";
import { HassEntity } from "home-assistant-js-websocket";

import "./configurator-notification-item";
import "./persistent-notification-item";

import { HomeAssistant } from "../../types";
import { PersistentNotification } from "../../data/persistent_notification";

@customElement("notification-item")
export class HuiNotificationItem extends LitElement {
  @property() public hass?: HomeAssistant;

  @property() public notification?: HassEntity | PersistentNotification;

  protected shouldUpdate(changedProps: PropertyValues): boolean {
    if (!this.hass || !this.notification || changedProps.has("notification")) {
      return true;
    }

    return false;
  }

  protected render(): TemplateResult | void {
    if (!this.hass || !this.notification) {
      return html``;

import {LitElement, html, customElement, property} from "lit-element";
import {MediaFile} from "../../entity/MediaFile";
import {shell} from "electron";
import {RoosterX} from "./RoosterX";
import {IpcService} from "../services/ipc.service";
import * as path from "path";

@customElement("media-file-card")
export class MediaFileCard extends LitElement {

    @property() public mediaFile: MediaFile;

    public createRenderRoot() {
        return this;
    }

    constructor() {
        super();
    }

    public playFile() {
        this.dispatchEvent(new CustomEvent("playMedia", {detail: this.mediaFile}));
    }

import { customElement } from "lit-element";
import {
  DeviceAction,
  localizeDeviceAutomationAction,
} from "../../../../data/device_automation";

import "../../../../components/ha-card";

import { HaDeviceAutomationCard } from "./ha-device-automation-card";

@customElement("ha-device-actions-card")
export class HaDeviceActionsCard extends HaDeviceAutomationCard {
  protected type = "action";
  protected headerKey = "ui.panel.config.devices.automation.actions.caption";

  constructor() {
    super(localizeDeviceAutomationAction);
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "ha-device-actions-card": HaDeviceActionsCard;
  }
}

import { customElement } from "lit-element";
import { ButtonElement, IButtonElementProperties } from "../button/button-element";
import { cssResult } from "../util/css";
import styles from "./fab-button-element.scss";

export interface IFabButtonElementProperties extends IButtonElementProperties {
}

@customElement("fab-button-element")
export class FabButtonElement extends ButtonElement implements IFabButtonElementProperties {
	static styles = [...ButtonElement.styles, cssResult(styles)];
}

declare global {
	interface HTMLElementTagNameMap {
		"fab-button-element": FabButtonElement;
	}
}