lit#TemplateResult TypeScript Examples

private getControls(): TemplateResult {
    const icon = this.isCurrentlyRunning ? "bi bi-hourglass" : "bi bi-play-circle";
    const tooltip = this.isCurrentlyRunning ? "Cell is running" : "Run Cell";
    const runButton: ControlButton = {
      icon,
      tooltip,
      callback: (_evt) => this.runtime.controls.runCell({ id: this.cell.id }),
    };
    return cellControlsTemplate({ buttons: [runButton] });
  }

/**
   * Render Header (title and icon on top of card)
   */

  private renderHeader(): TemplateResult {
    return html`
      <div class="header">
        <div class="name" style="color:${this.getColor(this.header.title)};">${this.getVisibility(this.header.title) ? this.renderTitle() : html`<span>&nbsp;</span>`}</div>
        <div class="icon" style="color:${this.getColor(this.header.icon)};">${this.getVisibility(this.header.icon) ? this.renderIcon() : html`<span>&nbsp;</span>`}</div>
      </div>
    `;
  }

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

    return html`
      <ha-card tabindex="0" .label=${`Compass: ${this.header.label}`} class="flex compass-card" @click=${(e) => this.handlePopup(e)}>
        ${this.getVisibility(this.header.title) || this.getVisibility(this.header.icon) ? this.renderHeader() : ''}
        <div class="content">
          <div class="compass">${this.svgCompass(this.compass.north.offset)}</div>
          <div class="indicator-sensors">${this.renderDirections()}</div>
          <div class="value-sensors">${this.renderValues()}</div>
        </div>
      </ha-card>
    `;
  }

getLayerTemplate(layer: LayerTreeNode): TemplateResult {
    return html`
      <div class="ngm-checkbox ${layer.displayed ? 'active' : ''}"
          @click=${() => {
            this.dispatchEvent(new CustomEvent('layerclick', {
              detail: {
                layer
              }
            }));
          }}>
        <input type="checkbox" .checked=${!!layer.visible}>
        <span class="ngm-checkbox-icon"></span>
        <label class=${layer.displayed ? 'displayed' : ''}>
          <i class=${layer.restricted ? 'lock icon' : ''}></i>${i18next.t(layer.label)}
        </label>
      </div>
    `;
  }

getCategoryTemplate(category: LayerTreeNode, level: string): TemplateResult {
    // if it is a restricted layer, the user must be logged in to see it
    const content = category.children?.filter(
      node => !(node.restricted && (!this.userGroups.includes(node.restricted)))
      ).map(node => this.getCategoryOrLayerTemplate(node, 'second-level'));

    return html`
      <div class="ui accordion">
        <div class="title ${level}">
          <div class="ngm-dropdown-icon"></div>
          <label>${i18next.t(category.label)}</label>
        </div>
        <div class="content">
          ${content}
        </div>
      </div>
    `;
  }

/**
   * Render Directions (abbreviation/degrees inside compass)
   */

  private renderDirections(): TemplateResult[] {
    const divs: TemplateResult[] = [];
    let index = 0;

    this.indicatorSensors.forEach((indicator) => {
      if (this.getVisibility(indicator.state_abbreviation) || this.getVisibility(indicator.state_value)) {
        divs.push(html`<div class="sensor-${index}">
          <span class="abbr" style="color: ${this.getColor(indicator.state_abbreviation)};"
            >${this.getVisibility(indicator.state_abbreviation) ? this.computeIndicator(indicator).abbreviation : ''}</span
          >
          <span class="value" style="color: ${this.getColor(indicator.state_value)};"
            >${this.getVisibility(indicator.state_value) ? this.computeIndicator(indicator).degrees.toFixed(indicator.decimals) : ''}</span
          >
          <span class="measurement" style="color: ${this.getColor(indicator.state_units)};">${this.getVisibility(indicator.state_units) ? indicator.units : ''}</span>
        </div>`);
        index++;
      }
    });
    return divs;
  }

/**
   * Render Values
   */

  private renderValues(): TemplateResult[] {
    const divs: TemplateResult[] = [];
    let index = 0;
    this.valueSensors.forEach((value) => {
      if (this.getVisibility(value.state_value)) {
        divs.push(html`<div class="sensor-${index}">
          <span class="value" style="color: ${this.getColor(value.state_value)};">${this.getVisibility(value.state_value) ? this.getValue(value).value : ''}</span>
          <span class="measurement" style="color: ${this.getColor(value.state_units)};">${this.getVisibility(value.state_units) ? value.units : ''}</span>
        </div>`);
        index++;
      }
    });
    return divs;
  }

export function renderIcon(
  icon: IconTemplate,
  opts: { width?: number; height?: number; title?: string } = {}
): TemplateResult | string {
  if (typeof icon === "string") {
    // font-based icon (e.g. bootstrap icon)
    const size = Math.max(opts.height || 0, opts.width || 0);
    const style = size ? `font-size: ${size}px` : undefined;
    return html`<span class="${icon}" style="${ifDefined(style)}" title=${ifDefined(opts.title)}></span>`;
  }
  return icon(opts);
}

private getControls(): TemplateResult {
    let editOrRunButton: ControlButton;

    if (this.editMode === "code") {
      editOrRunButton = {
        icon: "bi bi-type",
        tooltip: "Edit as rich text",
        callback: () => {
          setTimeout(() => this.editor && this.editor.focus());
          this.enterEditMode("wysiwyg");
        },
      };
    } else if (this.editMode === "wysiwyg") {
      editOrRunButton = {
        icon: "bi bi-code-slash",
        tooltip: "Edit markdown source directly",
        callback: () => {
          setTimeout(() => this.editor && this.editor.focus());
          this.enterEditMode("code");
        },
      };
    } else {
      editOrRunButton = {
        icon: "bi-pencil-square",
        tooltip: "Edit Markdown",
        callback: () => {
          this.enterEditMode(DEFAULT_EDIT_MODE);
          setTimeout(() => this.editor && this.editor.focus());
        },
      };
    }

    return cellControlsTemplate({ buttons: [editOrRunButton] });
  }

private getControls(): TemplateResult {
    let editOrRunButton: ControlButton;
    if (this.isInEditMode) {
      editOrRunButton = {
        icon: "bi bi-play-circle",
        tooltip: "Render LaTeX",
        callback: (_evt) => this.runtime.controls.runCell({ id: this.cell.id }),
      };
    } else {
      editOrRunButton = {
        icon: "bi bi-pencil-square",
        tooltip: "Edit LaTeX",
        callback: () => this.enterEditMode(),
      };
    }

    return cellControlsTemplate({ buttons: [editOrRunButton] });
  }

private getControls(): TemplateResult {
    const icon = this.isCurrentlyRunning ? "bi bi-hourglass" : "bi bi-play-circle";
    const tooltip = this.isCurrentlyRunning ? "Cell is running" : "Run Cell";
    const runButton: ControlButton = {
      icon,
      tooltip,
      callback: (_evt) => this.runtime.controls.runCell({ id: this.cell.id }),
    };
    return cellControlsTemplate({ buttons: [runButton] });
  }

private getControls(): TemplateResult {
    const icon = "bi bi-play-circle";
    const tooltip = "Run Cell";
    const runButton: ControlButton = {
      icon,
      tooltip,
      callback: (_evt) => this.runtime.controls.runCell({ id: this.cell.id }),
    };
    return cellControlsTemplate({ buttons: [runButton] });
  }

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

    // The climate more-info has ha-switch and paper-dropdown-menu elements that are lazy loaded unless explicitly done here
    this._helpers.importMoreInfoControl('climate');

    const entityDomains = ['sensor', 'sun', 'input_number', 'input_text'];
    const entities = Object.keys(this.hass.states)
      .filter((eid) => entityDomains.includes(eid.substr(0, eid.indexOf('.'))))
      .sort();
    const optionalEntities = ['', ...entities];

    return html`
      <div class="card-config">
        ${this.getEditorInput('editor.name', 'editor.optional', 'header.title.value', this._name)}
        ${this.getEditorDropDown('editor.primary entity description', 'editor.required', 'indicator_sensors[0].sensor', this._entity, entities)}
        ${this.getEditorDropDown('editor.secondary entity description', 'editor.optional', 'value_sensors[0].sensor', this._secondary_entity, optionalEntities)}
        ${this.getEditorDropDown('editor.indicator', 'editor.optional', 'indicator_sensors[0].indicator.type', this._compass_indicator, INDICATORS)}
        ${this.getEditorDropDown('editor.language description', 'editor.optional', 'language', this._compass_language, COMPASS_LANGUAGES)}
        ${this.getEditorInput('editor.offset description', 'editor.optional', 'compass.north.offset', this._direction_offset)}
        ${this.getEditorSwitch('directions.north', 'compass.north.show', this._compass_show_north)}
      </div>
    `;
  }

private getEditorDropDown(label: string, required: string, key: string, value: string, list): TemplateResult {
    return html` <paper-dropdown-menu class="editor-entity-select" label="${localize(label)} (${localize(required)})" @value-changed=${this._valueChanged} .configValue=${key}>
      <paper-listbox slot="dropdown-content" .selected=${list.indexOf(value)}>
        ${list.map((listItem) => {
          return html` <paper-item>${listItem}</paper-item> `;
        })}
      </paper-listbox>
    </paper-dropdown-menu>`;
  }

/**
   * Render function for Generating Arrows (CSS Only)
   * @param direction One of three Options: none, right, left
   * @param index To detect which side the item is on and adapt the direction accordingly
   */
  private _render_arrow(direction: ArrowStates, index: number, color?: string): TemplateResult {
    const a = this._config.animation;
    const b = `${direction}-${index}`;
    if (direction == 'none') {
      return html` <div class="blank"></div> `;
    } else {
      return html`
        <svg width="57" height="18" class="arrow">
          <defs>
            <polygon id="arrow-right-${index}" points="0 0, 0 16, 16 8" fill="${color}" />
            <polygon id="arrow-left-${index}" points="16 0, 16 16, 0 8" fill="${color}" />
            <g id="slide-${index}" class="arrow-color">
              <use href="#arrow-${b}" x="-36" />
              <use href="#arrow-${b}" x="-12" />
              <use href="#arrow-${b}" x="12" />
              <use href="#arrow-${b}" x="36" />
            </g>
            <g id="flash-${index}" fill="red">
              <use href="#arrow-${b}" x="0" style="animation-delay: ${direction == 'right' ? 0 : 2}s;" id="a-flash" />
              <use href="#arrow-${b}" x="20" style="animation-delay: 1s;" id="a-flash" />
              <use href="#arrow-${b}" x="40" style="animation-delay: ${direction == 'right' ? 2 : 0}s;" id="a-flash" />
            </g>
            <g id="none-${index}" class="arrow-color">
              <use href="#arrow-${b}" x="0" />
              <use href="#arrow-${b}" x="20" />
              <use href="#arrow-${b}" x="40" />
            </g>
          </defs>
          <use href="#${a}-${index}" id="a-${a}-${direction}" />
        </svg>
      `;
    }
  }

private getEditorSwitch(label: string, key: string, value: boolean): TemplateResult {
    return html`
        <ha-formfield
          .label=${`${localize('editor.toggle')} ${localize(label)}  ${localize('editor.indicator')} ${value ? localize('common.off') : localize('common.on')}`}>
          <ha-switch
            .checked=${value !== false}
            .configValue=${key}
            @change=${this._valueChanged}
            ></ha-switch>
        </ha-formfield>
      </div>`;
  }

/**
   * Card Editor
   * -----------
   * The Following is needed to implement the Card editor inside of the editor
   * <hui-card-element-editor
   *    .hass=${this.hass}
   *    .value=${card}
   *    .lovelace=${getLovelace()}
   *    @config-changed=${this._centerChanged}
   *  ></hui-card-element-editor>
   */

  //@query('hui-card-element-editor')
  //private _cardEditorEl?;

  private _cardEditor(): TemplateResult {
    //const card = this._subElementEditor?.element;
    return html`
      Sadly you cannot edit cards from the visual editor yet.
      <p />
      Check out the
      <a target="_blank" rel="noopener noreferrer" href="https://github.com/JonahKr/power-distribution-card#cards-"
        >Readme</a
      >
      to check out the latest and best way to add it.
    `;
  }

private _renderSubElementEditor(): TemplateResult {
    const subel: TemplateResult[] = [
      html`<div class="header">
        <div class="back-title">
          <mwc-icon-button @click=${this._goBack}>
            <ha-icon icon="mdi:arrow-left"></ha-icon>
          </mwc-icon-button>
        </div>
      </div>`,
    ];
    switch (this._subElementEditor?.type) {
      case 'entity':
        subel.push(this._entityEditor());
        break;
      case 'bars':
        subel.push(this._barEditor());
        break;
      case 'card':
        subel.push(this._cardEditor());
        break;
    }
    return html`${subel}`;
  }

private addToastToList(newToast: TemplateResult<1>) {
    render(newToast, this.toastContainer, {
      renderBefore: this.toastContainer.firstChild,
    });
    const toasts = [
      ...this.toastContainer.querySelectorAll("opc-toast"),
    ] as OpcToast[];
    toasts.slice(5).map((toast) => (toast.toastRef as any).open());
  }

protected render(): TemplateResult | void {
    if (!this.hass) return html``;
    if (this._subElementEditor) return this._renderSubElementEditor();
    return html`
      <div class="card-config">
        <ha-textfield
          label="${localize('editor.settings.title')} (${localize('editor.optional')})"
          .value=${this._config?.title || ''}
          .configValue=${'title'}
          @input=${this._valueChanged}
        ></ha-textfield>
        <ha-select
          naturalMenuWidth
          fixedMenuPosition
          label="${localize('editor.settings.animation')}"
          .configValue=${'animation'}
          .value=${this._config?.animation || 'flash'}
          @selected=${this._valueChanged}
          @closed=${(ev) => ev.stopPropagation()}
        >
          ${animation.map((val) => html`<mwc-list-item .value=${val}>${val}</mwc-list-item>`)}
        </ha-select>
        <br />
        <div class="entity row">
          <ha-select
            label="${localize('editor.settings.center')}"
            .configValue=${'type'}
            @selected=${this._centerChanged}
            @closed=${(ev) => ev.stopPropagation()}
            .value=${this._config?.center?.type || 'none'}
          >
            ${center.map((val) => html`<mwc-list-item .value=${val}>${val}</mwc-list-item>`)}
          </ha-select>
          ${this._config?.center?.type == 'bars' || this._config?.center?.type == 'card'
            ? html`<ha-icon-button
                class="edit-icon"
                .value=${this._config?.center?.type}
                .path=${mdiPencil}
                @click="${this._editCenter}"
              ></ha-icon-button>`
            : ''}
        </div>
        <br />
        ${this._renderEntitiesEditor()}
      </div>
    `;
  }

private getEditorInput(label: string, required: string, key: string, value: string | number): TemplateResult {
    return html`<paper-input label="${localize(label)} (${localize(required)})" .value=${value} .configValue=${key} @value-changed=${this._valueChanged}></paper-input>`;
  }

protected render(): TemplateResult | void {
    if (this.firstrun) {
      console.info(
        `%c atomic-calendar-revive %c ${localize('common.version')}: ${CARD_VERSION} `,
        'color: white; background: #484848; font-weight: 700;',
        'color: white; background: #cc5500; font-weight: 700;',
      );
      this.language =
        typeof this._config.language != 'undefined' ? this._config.language! : this.hass.locale ? this.hass.locale.language.toLowerCase() : this.hass.language.toLowerCase();

      dayjs.locale(this.language);

      let timeFormat = typeof this._config.hoursFormat != 'undefined' ? this._config.hoursFormat : (this.hass.locale?.time_format == '12' || this.hass.locale?.time_format == '24') ? formatTime(this.hass.locale) : dayjs().localeData().longDateFormat('LT');
      dayjs.updateLocale(this.language, {
        weekStart: this._config.firstDayOfWeek!,
        formats: {
          LT: timeFormat,
          LTS: 'HH:mm:ss',
          L: 'DD/MM/YYYY',
          LL: 'D MMMM YYYY',
          LLL: 'MMM D YYYY HH:mm',
          LLLL: 'dddd, D MMMM YYYY HH:mm',
        },
      });

      this.selectedMonth = dayjs();
      this.monthToGet = dayjs().format('MM');
    }
    if (!this._config || !this.hass) {
      return html``;
    }
    this.updateCard();

    return html`
			<ha-card class="cal-card" style="--card-height: ${this._config.cardHeight}">
				${this._config.name || this._config.showDate || (this.showLoader && this._config.showLoader)
        ? html` <div class="header">
							${this._config.name
            ? html`<div class="headerName" @click="${() => this.handleToggle()}">${this._config.name}</div>`
            : ''}
							${this.showLoader && this._config.showLoader ? html`<div class="loader"></div>` : ''}
							${this._config.showDate ? html`<div class="headerDate">${getDate(this._config)}</div>` : ''}
					  </div>`
        : ''}

				<div class="cal-eventContainer" style="padding-top: 4px;">${this.content}</div>
			</ha-card>`;
  }

errorMessage: TemplateResult;

eventSummary: TemplateResult | void | TemplateResult<1>[];

private renderIcon(): TemplateResult {
    return html`<ha-icon .icon=${this.header.icon.value}></ha-icon>`;
  }

private renderTitle(): TemplateResult {
    return html`<span>${this.header.title.value} </span>`;
  }

@property({type: Function}) optionsTemplate: ((geom: NgmGeometry, active: boolean) => TemplateResult) | undefined;

getCategoryOrLayerTemplate(node: LayerTreeNode, level: string): TemplateResult {
    if (node.children) {
      return this.getCategoryTemplate(node, level);
    }
    return this.getLayerTemplate(node);
  }

render(): TemplateResult {
		throw new Error("component render method not implemented")
	}