lit#html TypeScript Examples

render() {
    return html`
      <div class="opc-footer__container">
        <div class="opc-footer__section">
          <a href="#">How One Platform works?</a>
        </div>
        <div class="opc-footer__section">
          <div><a href="/get-started/docs">Docs</a></div>
          <div><a href="/get-started/blog">Blogs</a></div>
          <div><a href="/contact-us">Contact Us</a></div>
        </div>
        <div class="opc-footer__section">
          <span class="opc-footer__copyright"> © 2021 RedHat Inc. </span>
        </div>
      </div>
    `;
  }

render() {
    return html`
      <link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly/patternfly.css" crossorigin="anonymous">
      <div class="pf-c-form">
        <div class="pf-c-form__group">
          <div class="pf-c-form__group-label">
            <label class="pf-c-form__label" for="vertical-align-labels-form-name">
              <span class="pf-c-form__label-text">Add Comment</span>
            </label>
          </div>
          <div class="pf-c-form__group-control">
            <textarea class="pf-c-form-control"
              type="text"
              aria-label="textarea example"
              placeholder="${ this.placeholder }"
              @input="${(e: HTMLElementEventMap | any) => this.commentText = e.target.value}"></textarea>
          </div>
        </div>
        <div class="pf-c-form__actions pf-l-flex pf-m-justify-content-flex-end">
          <button class="pf-c-button pf-m-secondary" type="reset"
            @click="${this._resetCommentInput}"
            style="--pf-c-button--m-secondary--Color: #000; --pf-c-button--after--BorderColor: transparent;">
            Cancel
          </button>
          <button class="pf-c-button pf-m-primary"
            ?disabled="${!this.commentText.length}"
            @click="${(e: HTMLElementEventMap) => this._commentButtonClicked()}">Comment</button>
        </div>
      </div>
    `;
  }

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}`;
  }

render(): TemplateResult | void {
    const className: string = this.controls ? 'main controls' : 'main';
    const animationClass: string = this.controls ? 'animation controls' : 'animation';
    return html`
      <div id="animation-container" class=${className} lang="en" role="img">
        <div id="animation" class=${animationClass} style="background:${this.background};">
          ${this.currentState === PlayerState.Error
            ? html`
                <div class="error">⚠️</div>
              `
            : undefined}
        </div>
        ${this.controls ? this.renderControls() : undefined}
      </div>
    `;
  }

render() {
    return html`
      <!-- <div data-popper-arrow></div> -->
      <starboard-ensure-parent-fits></starboard-ensure-parent-fits>
      <div class="inner">
        <nav class="sidebar">
          <h6 class="dropdown-header">Select Cell Type</h6>
          ${getAvailableCellTypes().map((ct) => {
            const ctString = typeof ct.cellType === "string" ? ct.cellType : ct.cellType[0];
            return html`
              <button
                @click=${() => this.onClickCellType(ctString)}
                title="${ctString}"
                class="dropdown-item ${ctString === this.currentHighlight ? " active" : ""}"
              >
                ${ct.name}
              </button>
            `;
          })}
        </nav>
        <div class="content">${this.currentCellCreationInterface.render()}</div>
      </div>
    `;
  }

ErrorMessage = ({ title, children }: ErrorMessageProps) => html`
  <div class="error-background">
    <div class="error-container">
      <span class="error-title"
        ><span class="error-badge">Error</span>${title}</span
      >
      <span class="error-description">${children}</span>
    </div>
  </div>
`

render() {
    return html`
      <div class="ngm-floating-window-header drag-handle">
        ${i18next.t('cam_configuration_header')}
        <div class="ngm-close-icon" @click=${() => this.dispatchEvent(new CustomEvent('close'))}></div>
      </div>
      <div class="ngm-cam-container">
        ${this.configurations.map(c => html`
          <div>
            <div class=${c.iconClass()} title=${i18next.t('cam_lock')} @click=${c.lock}></div>
            <div class="ngm-cam-conf-slider">
              <div>
                <label>${c.label()}</label>
                <label>${c.getValueLabel()}</label>
              </div>
              <input type="range" class="ngm-slider" style=${styleMap(c.style())}
                     min=${c.minValue}
                     max=${c.maxValue}
                     step=${c.step}
                     .value=${c.getValue()}
                     @input=${c.onChange}/>
            </div>
          </div>`)}
        <div>
          <div class="ngm-cam-icon ${classMap({'ngm-active-icon': this.lockType === 'move'})}"
               @click=${() => this.toggleLock('move')}></div>
          <ngm-cam-coordinates .coordinates=${this.coordinates}></ngm-cam-coordinates>
        </div>
      </div>
      ${dragArea}
    `;
  }

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>
    `;
  }

/**
   * change month in calendar mode
   *
   */
  handleMonthChange(i) {
    this.selectedMonth = this.selectedMonth.add(i, 'month');
    this.monthToGet = this.selectedMonth.format('M');
    this.eventSummary = html` `;
    this.refreshCalEvents = true;
  }

render() {
    return html`
      <div class="opc-loader__container" ?hidden=${this.hidden}>
        <span class="opc-loader">L &nbsp; ading</span>
      </div>
    `;
  }

render() {
    return html` <header class="opc-nav">
      <div class="opc-nav-container">
        <div class="opc-nav-logo-container">
          <slot name="opc-nav-logo"></slot>
        </div>
        <slot></slot>
        <slot name="opc-nav-search"> </slot>
        <div class="opc-nav-menu-container">
          <nav class="opc-nav-menu">
            <slot name="opc-nav-menu-links">
              <ul>
                ${this.links.map(
                  ({ name, href }) =>
                    html` <li><a href="${href}">${name}</a></li> `
                )}
              </ul>
            </slot>
          </nav>
          <div class="opc-nav-btn-container">
            <slot name="opc-nav-btn">
              <button
                @click="${() => this._handleButtonClick('notification')}"
                ?active=${this.activeButton === 'notification'}
              >
                <img
                  src="${notificationIcon}"
                  alt="icons"
                  width="20px"
                  height="20px"
                />
              </button>
              <button
                @click="${() => this._handleButtonClick('menu')}"
                ?active=${this.activeButton === 'menu'}
              >
                <img
                  src="${gridIcon}"
                  alt="icons"
                  width="20px"
                  height="20px"
                  type="menu"
                />
              </button>
            </slot>
          </div>
        </div>
      </div>
    </header>`;
  }

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>
    `;
  }