lit-element#html TypeScript Examples

renderAirQualities = (hass: HomeAssistant, airquality: AirQuality, border: boolean) => {
  let pm25 = undefined !== airquality.pm25 && undefined !== hass.states[airquality.pm25]
    ? _renderAirQuality(numFormat(hass.states[airquality.pm25].state), hass.states[airquality.pm25].attributes, 'pm25') : undefined ;
  let pm10 = undefined !== airquality.pm10 && undefined !== hass.states[airquality.pm10]
    ? _renderAirQuality(numFormat(hass.states[airquality.pm10].state), hass.states[airquality.pm10].attributes, 'pm10') : undefined ;
  let o3 = undefined !== airquality.o3 && undefined !== hass.states[airquality.o3]
    ? _renderAirQuality(numFormat(hass.states[airquality.o3].state), hass.states[airquality.o3].attributes, 'o3') : undefined ;
  let no2 = undefined !== airquality.no2 && undefined !== hass.states[airquality.no2]
    ? _renderAirQuality(numFormat(hass.states[airquality.no2].state), hass.states[airquality.no2].attributes, 'no2') : undefined ;
  let co = undefined !== airquality.co && undefined !== hass.states[airquality.co]
    ? _renderAirQuality(numFormat(hass.states[airquality.co].state), hass.states[airquality.co].attributes, 'co') : undefined ;
  let so2 = undefined !== airquality.so2 && undefined !== hass.states[airquality.so2]
    ? _renderAirQuality(numFormat(hass.states[airquality.so2].state), hass.states[airquality.so2].attributes, 'so2') : undefined ;
  let epa_aqi = undefined !== airquality.epa_aqi && undefined !== hass.states[airquality.epa_aqi]
    ? _renderAirQuality(numFormat(hass.states[airquality.epa_aqi].state), hass.states[airquality.epa_aqi].attributes, 'aqi') : undefined ;
  let epa_health_concern = undefined !== airquality.epa_health_concern && undefined !== hass.states[airquality.epa_health_concern]
    ? _renderAirQuality(hass.states[airquality.epa_health_concern].state, hass.states[airquality.epa_health_concern].attributes, 'aqi') : undefined ;

  return html`
    <ul class="variations ${border ? "spacer" : ""}">
        ${epa_aqi ? epa_aqi : ""}${epa_health_concern ? epa_health_concern : ""}
        ${pm25 ? pm25 : ""}${pm10 ? pm10 : ""}${o3 ? o3 : ""}${no2 ? no2 : ""}${co ? co : ""}${so2 ? so2 : ""}
    </ul>
  `;
}

private showError(): TemplateResult {
    return html`
        <ha-card>
          <div class="preview not-available">
            <div class="metadata">
              <div class="not-available">
                ${localize('error.not_available')}
              </div>
            <div>
          </div>
        </ha-card>
      `;
  }

render() {
    return html`<sl-checkbox
      ?required=${this.required}
      ?disabled=${this.disabled}
      ?checked=${this.data}
      ?indeterminate=${this.data == null}
      @sl-change=${this._handleChange}
      >${this.label}</sl-checkbox
    >`;
  }

render() {
    return html`
    <slot @click="${this.goToTop}" class="${this.toggleButton}">
      <button class="rh-text" tabindex="0">
        <svg xmlns='http://www.w3.org/2000/svg' width='20px' height='20px' viewBox='0 0 512 512'>
          <title>ionicons-v5-a</title>
          <polyline points='112 244 256 100 400 244' style='fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px'/>
            <line x1='256' y1='120' x2='256' y2='412' style='fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px'/>
        </svg>
          Go to top
      </button>
   </slot>`;
  }

render(){
    return html`
    ${this.label
          ? html`<label part="label" class="label">${this.label}</label>`
          : null}
    <div>
    ${this.getInputs()}
    </div>
    `
  }

private renderLoginButton(): TemplateResult {
        return html`
            <div class="dropdown" @focusout="${this.dropdownFocusOut}">
                <button class="signin-btn" part="signInButton" ?disabled=${this.disabled} @click="${this.signInClicked}">
                    ${this.signInButtonText}
                </button>
                <div class="menu ${this.menuOpened ? "open" : ""} ${this.menuPlacement === "end" ? "align-end" : ""}" part="dropdownMenu">
					${this.renderListButtons()}
                </div>
            </div>
        `;
    }

_renderAirQuality = (state: string, attributes: HassEntityAttributeBase, icon: string) => {

  return(state ? html`
    <li>
      <svg viewBox="0 0 24 15" width="24" height="15" xmlns="http://www.w3.org/2000/svg">
        <style>.small {font: 8px sans-serif;}</style>
        <text x="0" y="14" class="small">${icon}</text>
      </svg>${state} ${attributes.unit_of_measurement ? attributes.unit_of_measurement : ""}
    </li>    
  ` : "") ;
}

getInputs() {
    const allDurations: any = {
      year: this.year, month: this.month, week: this.week,day: this.day, hour: this.hour, minute: this.minute, second: this.second
    }
    const durationKeys = Object.keys(allDurations)
    const toRender =  durationKeys.every(a=>allDurations[a]===false) ? durationKeys : durationKeys
    .filter(a=>allDurations[a])

    return toRender.map(a=>html`<sl-input
    .disabled=${this.disabled}
      id=${a}
      type="number"
      ?required=${this.required}
      help-text=${this.formatDuration(a)}
      .value=${this._state[a] || ''}
      @sl-input=${(e: CustomEvent)=>this.handleInput(a,e)}
      ></sl-input>`)
  }

_renderForecast = (entity_low: number, entity_unit_low: string,
                         entity_high: number, entity_unit_high: string) => {
  if (undefined == entity_low && undefined == entity_high) {
    return html``;
  } else if (undefined == entity_low) {
    return html`
            <div class="highTemp">
              <b>${entity_high}</b> ${entity_unit_high}
            </div>   
      `;
  } else if (undefined == entity_high) {
    return html`
            <div class="lowTemp">
              ${entity_low} ${entity_unit_low}
            </div>  
      `;
  } else {
    return html`
            <div class="highTemp">
              ${entity_low} ${entity_unit_low} / <b>${entity_high} ${entity_unit_high}</b>
            </div>
      `;
  }
}

private renderActivityButtons(config: HarmonyCardConfig, hubPowerState: string, currentActivity: string) {
        if (typeof config.hide_activities !== 'undefined' && config.hide_activities) {
            return html``;
        }
        const iconClass = config.show_activities_icons ? 'activities-icons' : '';
        return html`
        <div class="activities ${iconClass}">
            ${this.renderActivityButton(hubPowerState === 'off', 'turn_off', 'off', config.show_activities_icons, 'mdi:power')}
            ${config.activities.map(
              activity => html`
                ${this.renderActivityButton(
                currentActivity === activity.name,
                activity.name,
                activity.name,
                config.show_activities_icons,
                activity.icon,
              )}
              `,
            )}
        </div>
    `;
    }

private _itemRenderer = (key: string): TemplateResult => {
    if (!this._cards) {
      return html``;
    }

    return html`
      ${this._cards[key]}
    `;
  };

private _renderState() {
    const relativeState = this._getRelativeState(this.entity);
    const stateIcon = relativeState === 'under' ? 'heat' : relativeState === 'above' ? 'cool' : 'default';
    const currentTemperature = this.entity!.attributes.current_temperature;
    return html`
      <mwc-button
        dense
        class="state-${relativeState}"
        @action=${this._handleAction}
        .actionHandler=${actionHandler({
          hasHold: hasAction(this.config!.hold_action),
          hasDoubleTap: hasAction(this.config!.double_tap_action),
          repeat: this.config!.hold_action ? this.config!.hold_action.repeat : undefined,
        })}
      >
        <ha-icon icon="${this._getIcon(stateIcon)}"></ha-icon>
        ${this._toDisplayTemperature(currentTemperature)}
      </mwc-button>
    `;
  }

export function createIconSet(name: string, icons: any) {
    icons = html([icons] as any);

    return class extends IconsetSVG {
        public constructor() {
            super();
            this.name = name;
        }

        protected renderDefaultContent(): TemplateResult {
            return icons;
        }
    }
}

renderPresets(): TemplateResult {
    const presets = this.config.presets || [];

    return html`
        <div class="presets">
          ${presets.map(item => html`
            <paper-button @click="${() => this.handlePreset(item.target)}">
              ${item.label} - ${item.target} cm
            </paper-button>`)} 
        </div>
      `;
  }

private _renderEnd({ temperature: targetTemperature } = this._values) {
    const upDown = this.shouldRenderUpDown();
    const step_size = this.config!.step_size || DEFAULT_STEP_SIZE;
    return upDown
      ? html`
          <div class="actions flex-box">
            ${this._renderTemperatureChangeButton(+step_size)}
            <mwc-button dense @click="${() => this._showEntityMoreInfo()}">
              <span class="${this._updating ? 'updating' : ''}">
                ${this._toDisplayTemperature(targetTemperature)}
              </span>
            </mwc-button>
            ${this._renderTemperatureChangeButton(-step_size)}
          </div>
        `
      : '';
  }

_getDirectionArrow() {
    if (this.variant === 'compact') {
      return {
        left: html`
          <span class="timeline__arrow timeline__arrow--left" @click="${() => {this._scrollHandler('left')}}">
            <div class="timeline__arrow--shape">
            </div>
          </span>`,
          right: html`
          <span class="timeline__arrow timeline__arrow--right" @click="${() => this._scrollHandler('right')}">
            <div class="timeline__arrow--shape">
            </div>
          </span>`,
      }
    }
    return {
      left: '',
      right: ''
    };
  }

render() {
    return html`
      <h2>About Me</h2>
      <p>
        Suspendisse mollis lobortis lacus, et venenatis nibh sagittis ac. Morbi
        interdum purus diam, vitae pharetra tellus auctor sagittis. Proin
        pellentesque diam a mauris euismod condimentum. Nullam eros ante,
        pretium eget euismod ut, molestie sed nunc. Nullam ut lorem tempus,
        convallis dui ac, congue dolor. Maecenas rutrum magna ac ullamcorper
        fermentum. Nunc porttitor sem at augue ornare, nec interdum ex laoreet.
        Ut vitae mattis urna. In elementum odio a diam iaculis, vel molestie
        diam gravida. Sed in urna nec nibh feugiat fermentum ac vitae dolor. Sed
        porta enim ut orci egestas, vitae gravida mauris scelerisque. Duis
        convallis tincidunt vehicula.
      </p>
    `;
  }

renderSummary = (hass: HomeAssistant, currentCfg: Current, name: string, iconsConfig: IconsConfig, terms: ITerms) => {
  let temperature, feels_like ;
  let sun = currentCfg.sun && hass.states[currentCfg.sun] ? hass.states[currentCfg.sun].state : undefined ;
  let moon = currentCfg.moon_phase && hass.states[currentCfg.moon_phase]
    ? hass.states[currentCfg.moon_phase].state : undefined ;
  let moonIcon = moon ? getMoonIcon( moon ) : undefined ;
  let current_conditions = currentCfg.current_conditions && hass.states[currentCfg.current_conditions]
    ? hass.states[currentCfg.current_conditions].state : "Na" ;

  if( currentCfg.temperature && hass.states[currentCfg.temperature] ) {
    // if(getUnit(hass, "temperature") == "°F")
    //   temperature = Math.round(parseFloat(hass.states[currentCfg.temperature].state)) ;
    // else temperature = numFormat(hass.states[currentCfg.temperature].state) ;
    temperature = numFormat(hass.states[currentCfg.temperature].state) ;
  } else {
    temperature = "Na" ;
  }

  if( currentCfg.feels_like && hass.states[currentCfg.feels_like] ) {
    // if( hass.states[currentCfg.feels_like].attributes.unit_of_measurement == "F" )
    //   feels_like = Math.round(parseFloat(hass.states[currentCfg.feels_like].state)) ;
    // else feels_like = parseFloat(hass.states[currentCfg.feels_like].state) ;
    feels_like = numFormat(hass.states[currentCfg.feels_like].state) ;
  } else feels_like = "Na" ;

  return html`
      <div class="current">
        <span class="icon bigger" style="background: none,
            url('${getWeatherIcon(current_conditions.toLowerCase(), iconsConfig, sun)}') no-repeat ; 
            background-size: contain;">${current_conditions}</span>
        ${name ? html`<span class="title"> ${name} </span>` : ""}
        ${moon ? html`<span class="moon"> ${moonIcon} <span style="font-size: 70%">${translate(moon, terms.words)}</span></spa>` : ""}
        ${temperature !== "Na" ? html`
          <span class="temp">${temperature}</span>
          <span class="tempc"> ${getUnit(hass,"temperature")}</span>
        ` : ""}
      </div>
      ${feels_like !== "Na" ? html`
        <ul class="variations polles" style="border: 0;margin-top: 4px;">
          <li><ha-icon icon="none"></ha-icon><span class="unit"></span></li>
          <li>
            <ha-icon icon="${hass.states[currentCfg.feels_like].attributes.icon}"></ha-icon>${translate('Feels Like', terms.words)} ${feels_like}
            <span class="unit"> ${getUnit(hass,"temperature")}</span>
          </li>
        </ul>      
      ` : ""}
   `;
}

protected render(): TemplateResult | void {
    if (!this.config.entity) {
      return this.showError();
    }
    const stateObj = this.stateObj;
    const selected = stateObj.state;
    this.options = stateObj.attributes.options;
    const style = this.config.max_options === 0 ? '' : `max-height: ${(this.config.max_options || 5) * 48 + 16}px`;
    return html`
      <ha-card aria-label=${`Select list card: ${this.config.entity}`}>
        ${this.config.title && this.config.title.length
          ? html`
              <div
                class="card-header ${this.config.show_toggle ? 'pointer' : ''}"
                @click=${this.toggle}
                ?open=${this.open}
              >
                <div class="name">
                  ${this.config.icon && this.config.icon.length
                    ? html`
                        <ha-icon class="icon" .icon="${this.config.icon}"></ha-icon>
                      `
                    : ''}
                  ${this.config.title}
                </div>
                ${this.config.show_toggle
                  ? html`
                      <ha-icon class="pointer" .icon="${this.open ? 'mdi:chevron-up' : 'mdi:chevron-down'}"></ha-icon>
                    `
                  : ''}
              </div>
            `
          : ''}
        <paper-listbox
          id="list"
          @iron-select=${this.selectedOptionChanged}
          .selected=${this.options.indexOf(selected)}
          style="${style}"
          ?open=${this.open}
        >
          ${this.options.map(option => {
            if (this.config.truncate) {
              return html`
                <paper-item title="${option}"><div class="truncate-item">${option}</div></paper-item>
              `;
            }
            return html`
              <paper-item>${option}</paper-item>
            `;
          })}
        </paper-listbox>
      </ha-card>
    `;
  }

protected render(): TemplateResult {
    return html`
      ${this.lovelace.editMode
        ? html`
            <div class="toolbar">
              <mwc-button @click=${this._saveView} raised>Save Layout</mwc-button>
            </div>
          `
        : ''}
      <div id="badges" style=${this.badges.length > 0 ? 'display: block' : 'display: none'}>
        ${this.badges.map(
          badge =>
            html`
              ${badge}
            `,
        )}
      </div>
      <lit-grid-layout
        rowHeight="40"
        .containerPadding=${[8, 8]}
        .margin=${[8, 8]}
        .resizeHandle=${RESIZE_HANDLE}
        .itemRenderer=${this._itemRenderer}
        .layout=${this._layout}
        .columns=${this._columns}
        .dragHandle=${'.overlay'}
        .dragDisabled=${!this.lovelace?.editMode}
        .resizeDisabled=${!this.lovelace?.editMode}
        @item-changed=${this._saveLayout}
      ></lit-grid-layout>
      ${this.lovelace?.editMode
        ? html`
            <mwc-fab
              class=${classMap({
                rtl: computeRTL(this.hass!),
              })}
              .title=${this.hass!.localize('ui.panel.lovelace.editor.edit_card.add')}
              @click=${this._addCard}
            >
              <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
            </mwc-fab>
          `
        : ''}
    `;
  }

render() {
    return html`<h1>Hello from LitElement!</h1>`;
  }

render() {
    return html` <slot></slot> `;
  }

render() {
    return html`
      <slot></slot>
    `;
  }

render() {
    return html`
      <p>Hello world</p>
    `;
  }

/**Function to get results from an external source */
  async getResults(): Promise<TemplateResult | TemplateResult[]> {
    if (this._debouncing) {
      return this._loadingResults;
    }

    if (this.mock.length) {
      return this.mock.map(
        r => html`<sl-menu-item value=${r} .label=${r}>${r}</sl-menu-item>`
      );
    }

    if (!this.searchTerm) {
      return [];
    }
    try {
      const axios = this.axios ? this.axios : this._parentAxios;
      const result = await this.plugin.search({
        maxHits: this._maxHits,
        searchString: this.searchTerm,
        axios,
        constraint: this._constraint,
      });
      const results = result.map(
        r =>
          html`
            <sl-menu-item
              value=${r.value}
              .label=${r.label}
              .terminology=${this.terminology}
            >
              ${r.star
                ? html`<sl-icon slot="suffix" name="star"></sl-icon>`
                : null}
              ${r.label}
            </sl-menu-item>
          `
      );
      if (results?.length === 0) {
        return html`<sl-menu-item disabled>No results</sl-menu-item>`;
      }
      return this._maxHits === results.length
        ? [...results, this._viewMore]
        : results;
    } catch (e) {
      console.error(e);
      return html`
        <sl-menu-item disabled>
          <sl-icon name="exclamation-triangle" slot="prefix"></sl-icon>
          An unexpected error occured
        </sl-menu-item>
      `;
    }
  }

render() {
    if (this.currentStepIndex < 0) {
      console.warn(`OPC-TIMELINE: The current-step-index attribute is set to ${this.currentStepIndex}, the active state will not be visible`);
    }
    return html`
    <style>
      .compact .timeline-steps {
        overflow: hidden;
      }
      .compact .timeline-steps::before {
        width: ${this.stepWidth}px;
      }
      .compact .timeline-steps .timeline-steps__step {
        flex: 0 0 180px;
      }
    </style>
    <div class="timeline ${this.variant === 'compact' ? 'compact' : ''}">
        ${this._getDirectionArrow().left}
        <ul id="timeline-steps" class="timeline-steps">
          ${this.steps.map((step, index) => {
            if (step) {
              return html`
              <li
                class="timeline-steps__step
                ${this.currentStepIndex === index ? 'active' : ''}"
                @click="${() => {this._eventEmitter(index, step)}}">
                  ${step}
              </li>`;
            } else {
              return html`
                <li 
                  class="timeline-steps__step 
                  ${this.currentStepIndex === index ? 'active' : ''}"
                  @click="${() => {this._eventEmitter(index, null)}}">
                </li>`;
            }
          })}
        </ul>
        ${this._getDirectionArrow().right}
      </div>
      <div class="timeline-label">
        <slot name="start-label"></slot>
        <slot name="end-label"></slot>
      </div>
      <div>
        <slot name="timeline-details"></slot>
      </div>
    `;
  }

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

    if (!this.entity) {
      return html`
        <ha-card>
          <div class="warning">${localize('common.config.not-available')}</div>
        </ha-card>
      `;
    }

    return html`
      <ha-card
        class="${this._computeClasses()}"
        tabindex="0"
        aria-label="${`MiniThermostat: ${this.config.entity}`}"
        .header="${this.config!.name}"
      >
        <div class="flex-box">
          <div class="state">
            ${this._renderState()}
          </div>
          <div class="container-middle">
            ${this._renderMiddle()}
          </div>
          ${this._renderEnd()}
        </div>
      </ha-card>
    `;
  }

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

        // TODO Check for stateObj or other necessary things and render a warning if missing
        if (this._config.show_warning) {
            return html`
        <ha-card>
          <div class="warning">${localize('common.show_warning')}</div>
        </ha-card>
      `;
        }

        var hubState = this.hass.states[this._config.entity];

        var hubPowerState = hubState.state;
        var currentActivity = hubState.attributes.current_activity;

        var currentActivityConfig = this._config.activities.find(activity => activity.name === currentActivity);
        var currentDevice = currentActivityConfig?.device;

        var buttonConfig = this.computeButtonConfig(this._config, currentActivityConfig);

        return html`
      <ha-card
        style=${this.computeStyles()}
        .header=${this._config.name}
        @action=${this._handleAction}
        .actionHandler=${actionHandler({
            hasHold: hasAction(this._config.hold_action),
            hasDoubleClick: hasAction(this._config.double_tap_action),
        })}
        tabindex="0"
        aria-label=${`Harmony: ${this._config.entity}`}
      >
        <div class="card-content">
            ${this.renderActivityButtons(this._config, hubPowerState, currentActivity)}

            ${this.renderVolumeControls(this.hass, this._config, buttonConfig, currentActivityConfig)}

            ${this.renderKeyPad(this._config, buttonConfig, currentActivityConfig, currentDevice)}

            <div class="play-pause">
                ${this.renderIconButton(buttonConfig['skip_back'], currentDevice)}
                ${this.renderIconButton(buttonConfig['play'], currentDevice)}
                ${this.renderIconButton(buttonConfig['pause'], currentDevice)}
                ${this.renderIconButton(buttonConfig['skip_forward'], currentDevice)}
            </div>

            <div class="remote">
                ${this.renderIconButton(buttonConfig['dpad_left'], currentDevice, { 'grid-column': '1', 'grid-row': '2' })}
                ${this.renderIconButton(buttonConfig['dpad_right'], currentDevice, { 'grid-column': '3', 'grid-row': '2' })}
                ${this.renderIconButton(buttonConfig['dpad_up'], currentDevice, { 'grid-column': '2', 'grid-row': '1' })}
                ${this.renderIconButton(buttonConfig['dpad_down'], currentDevice, { 'grid-column': '2', 'grid-row': '3' })}
                ${this.renderIconButton(buttonConfig['dpad_center'], currentDevice, { 'grid-column': '2', 'grid-row': '2' })}        
            </div>        

            <div class="xbox-buttons">
                ${this.renderIconButton(buttonConfig['xbox'], currentDevice, { 'grid-column': '1', 'grid-row': '2' })}
                ${this.renderIconButton(buttonConfig['back'], currentDevice, { 'grid-column': '2', 'grid-row': '2' })}
                ${this.renderIconButton(buttonConfig['a'], currentDevice, { 'grid-column': '4', 'grid-row': '2' })}
                ${this.renderIconButton(buttonConfig['b'], currentDevice, { 'grid-column': '5', 'grid-row': '2' })}
                ${this.renderIconButton(buttonConfig['x'], currentDevice, { 'grid-column': '6', 'grid-row': '2' })}        
                ${this.renderIconButton(buttonConfig['y'], currentDevice, { 'grid-column': '7', 'grid-row': '2' })}        
            </div>
        </div>
      </ha-card>
    `;
    }

render() {
    return html`
      <h2>Admin</h2>
      <p>Welcome ${this.username}</p>
      <p>Only for authorized users</p>
      <p>Go to <a href="${router.urlForPath('/about')}">About</a></p>
    `;
  }