How to use lit-element - 10 common examples

ClearSvg,
  AttachFileSvg,
} from '@axa-ch/materials/icons';

// icon isolated from others, because it's a component specific icon
import { FileUploadGroupSvg } from './icons';

import defineOnce from '../../../utils/define-once';
import { applyDefaults } from '../../../utils/with-react';
import styles from './index.scss';
import compressImage from './utils/imageCompressor';

const ADD_ICON = svg([AddSvg]);
const ATTACH_FILE_ICON = svg([AttachFileSvg]);
const DELETE_FOREVER_ICON = svg([DeleteForeverSvg]);
const CLEAR_ICON = svg([ClearSvg]);
const FILE_UPLOAD_GROUP_ICON = svg([FileUploadGroupSvg]);

const ACCEPTED_FILE_TYPES = 'image/jpg, image/jpeg, application/pdf, image/png';
const NOT_IMAGE_FILE_TYPES = ACCEPTED_FILE_TYPES.split(', ').filter(
  type => type.indexOf('image') === -1
);

export const getBytesFromKilobyte = kilobyte => 1024 * kilobyte;

class AXAFileUpload extends LitElement {
  static get tagName() {
    return 'axa-file-upload';
  }

  static get styles() {
    return css`

AttachFileSvg,
} from '@axa-ch/materials/icons';

// icon isolated from others, because it's a component specific icon
import { FileUploadGroupSvg } from './icons';

import defineOnce from '../../../utils/define-once';
import { applyDefaults } from '../../../utils/with-react';
import styles from './index.scss';
import compressImage from './utils/imageCompressor';

const ADD_ICON = svg([AddSvg]);
const ATTACH_FILE_ICON = svg([AttachFileSvg]);
const DELETE_FOREVER_ICON = svg([DeleteForeverSvg]);
const CLEAR_ICON = svg([ClearSvg]);
const FILE_UPLOAD_GROUP_ICON = svg([FileUploadGroupSvg]);

const ACCEPTED_FILE_TYPES = 'image/jpg, image/jpeg, application/pdf, image/png';
const NOT_IMAGE_FILE_TYPES = ACCEPTED_FILE_TYPES.split(', ').filter(
  type => type.indexOf('image') === -1
);

export const getBytesFromKilobyte = kilobyte => 1024 * kilobyte;

class AXAFileUpload extends LitElement {
  static get tagName() {
    return 'axa-file-upload';
  }

  static get styles() {
    return css`
      ${unsafeCSS(styles)}

*/

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();

} from "lit-element";
import "../ha-icon";
import { computeStateDomain } from "../../common/entity/compute_state_domain";
import { stateIcon } from "../../common/entity/state_icon";
import { HassEntity } from "home-assistant-js-websocket";
// Not duplicate, this is for typing.
// tslint:disable-next-line
import { HaIcon } from "../ha-icon";
import { HomeAssistant } from "../../types";

class StateBadge extends LitElement {
  public hass?: HomeAssistant;
  @property() public stateObj?: HassEntity;
  @property() public overrideIcon?: string;
  @property() public overrideImage?: string;
  @query("ha-icon") private _icon!: HaIcon;

  protected render(): TemplateResult | void {
    const stateObj = this.stateObj;

    if (!stateObj) {
      return html``;
    }

    return html`
      
    `;

import {MDCTabAdapter} from '@material/tab/adapter';
import MDCTabFoundation from '@material/tab/foundation';
import {html, property, query} from 'lit-element';
import {classMap} from 'lit-html/directives/class-map';

import {style} from './mwc-tab-css';

// used for generating unique id for each tab
let tabIdCounter = 0;

export class TabBase extends BaseElement {
  protected mdcFoundation!: MDCTabFoundation;

  protected readonly mdcFoundationClass = MDCTabFoundation;

  @query('.mdc-tab') protected mdcRoot!: HTMLElement;

  @query('mwc-tab-indicator') protected tabIndicator!: TabIndicator;

  @property() label = '';

  @property() icon = '';

  @property({type: Boolean}) isFadingIndicator = false;

  @property({type: Boolean}) minWidth = false;

  @property({type: Boolean}) isMinWidthIndicator = false;

  @property({type: Boolean, reflect: true, attribute: 'active'})
  get active(): boolean {
    return this._active;

import { DOCS_URL } from "../../constants";
import "../../elements/footer/footer-element";
import { getMainScrollContainer } from "../../main-scroll-target";
import { sharedStyles } from "../../style/shared";

import styles from "./elements-page.scss";
import { COMPONENTS_ROUTES, IRouteData } from "./elements-routes";

@customElement("elements-page")
export default class ElementsPage extends LitElement {

	static styles = [sharedStyles, cssResult(styles)];
	private currentRoute?: IRoute;

	@query("#router") protected $routerContainer: HTMLDivElement;
	@query("#router-slot") protected $routerSlot: RouterSlot;
	@property({type: Boolean, reflect: true, attribute: "popover-visible"}) isPopoverVisible = false;

	firstUpdated (props: PropertyValues) {
		super.firstUpdated(props);

		this.$routerSlot.add(COMPONENTS_ROUTES);

		this.$routerSlot.addEventListener(RouterSlotEventKind.ChangeState, (e: ChangeStateEvent) => {
			this.currentRoute = this.$routerSlot.match!.route;
			getMainScrollContainer().scrollTo({top: 0, left: 0});
			this.requestUpdate().then();

			// Register that the parent has finished routing
			if (!this.hasAttribute("routed")) {
				this.setAttribute("routed", "");
			}

duration?: number;
  dismissable?: boolean;
}

export interface ToastActionParams {
  action: () => void;
  text: string;
}

class NotificationManager extends LitElement {
  @property() public hass!: HomeAssistant;

  @property() private _action?: ToastActionParams;
  @property() private _noCancelOnOutsideClick: boolean = false;

  @query("ha-toast") private _toast!: HaToast;

  public async showDialog({
    message,
    action,
    duration,
    dismissable,
  }: ShowToastParams) {
    let toast = this._toast;
    // Can happen on initial load
    if (!toast) {
      await this.updateComplete;
      toast = this._toast;
    }
    toast.setAttribute("dir", computeRTL(this.hass) ? "rtl" : "ltr");
    this._action = action || undefined;
    this._noCancelOnOutsideClick =

// TODO fix that stuff
/* eslint-disable import/no-extraneous-dependencies */
import '@axa-ch/icon';
import { LitElement, html, css, unsafeCSS } from 'lit-element';
import { classMap } from 'lit-html/directives/class-map';
import linkCSS from './index.scss';
import defineOnce from '../../../utils/define-once';
import { applyDefaults } from '../../../utils/with-react';

class AXALink extends LitElement {
  static tagName = 'axa-link';
  static styles = css`
    ${unsafeCSS(linkCSS)}
  `;

  static get properties() {
    return {
      href: { type: String },
      variant: { type: String },
      icon: { type: String },
      external: { type: Boolean },
      onClick: { type: Function },
    };
  }

  constructor() {
    super();
    applyDefaults(this);
  }

// tslint:enable:max-line-length
  ];

  @property({ type: Number, reflect: true })
  public firstDayOfWeek: number = 0;

  @property({ type: Boolean, reflect: true })
  public showWeekNumber: boolean = false;

  @property({ type: String, reflect: true })
  public weekNumberType: WeekNumberType = 'first-4-day-week';

  @property({ type: Boolean, reflect: true })
  public landscape: boolean = false;

  @property({ type: String, reflect: true })
  public get startView() {
    return this._startView!;
  }
  public set startView(val: StartView) {
    /**
     * NOTE: Defaults to `START_VIEW.CALENDAR` when `val` is falsy.
     */
    const defaultVal: StartView = !val ? 'calendar' : val;

    /**
     * NOTE: No-op when `val` is not falsy and not valid accepted values.
     */
    if (defaultVal !== 'calendar' && defaultVal !== 'yearList') return;

    const oldVal = this._startView;