chromium/chrome/browser/resources/webui_gallery/demos/cr_input/cr_input_demo.html.ts

// Copyright 2024 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import {html} from '//resources/lit/v3_0/lit.rollup.js';

import type {CrInputDemoElement} from './cr_input_demo.js';

export function getHtml(this: CrInputDemoElement) {
  return html`
<h1>cr-input</h1>
<h2>Default "filled" inputs with built-in labels</h2>
<div class="demos">
  <cr-input
      class="no-error"
      type="text"
      label="Standard input"
      placeholder="Placeholder text"
      .value="${this.textValue_}"
      @value-changed="${this.onTextValueChanged_}">
  </cr-input>

  <cr-input
      class="no-error"
      type="search"
      placeholder="Search a query"
      .value="${this.searchValue_}"
      @value-changed="${this.onSearchValueChanged_}">
    <div slot="inline-prefix" class="cr-icon icon-search" alt=""></div>
    <cr-icon-button class="icon-cancel"
        ?hidden="${!this.searchValue_}" slot="inline-suffix"
        @click="${this.onClearSearchClick_}"
        title="Clear search">
    </cr-icon-button>
  </cr-input>

  <cr-input
      class="no-error"
      label="Email address"
      type="text"
      placeholder="username"
      .value="${this.emailValue_}"
      @value-changed="${this.onEmailValueChanged_}">
    <div slot="inline-suffix" class="domain-name">@chromium.org</div>
  </cr-input>

  <cr-input
      id="numberInput"
      label="Number input"
      type="number"
      min="5"
      max="200"
      placeholder="A number between 5 and 200"
      error-message="Number needs to be between 5 and 200"
      .value="${this.numberValue_}"
      @value-changed="${this.onNumberValueChanged_}">
    <cr-button slot="suffix" @click="${this.onValidateClick_}">
      Validate
    </cr-button>
  </cr-input>

  <cr-input
      label="Auto-validating pin"
      type="password"
      placeholder="Enter a pin of 4 digits"
      pattern="[0-9]{4}"
      error-message="Pin must be 4 digits"
      .value="${this.pinValue_}" @value-changed="${this.onPinValueChanged_}"
      auto-validate>
  </cr-input>

  <cr-input
      class="no-error"
      type="text"
      label="Disabled input"
      disabled
      value="The value cannot be changed">
  </cr-input>

  <cr-input
      class="no-error"
      type="text"
      label="Readonly input"
      readonly
      value="The value cannot be changed">
  </cr-input>

  <cr-textarea
      type="text"
      label="Textarea"
      .value="${this.textareaValue_}"
      @value-changed="${this.onTextareaValueChanged_}">
  </cr-textarea>

  <div>
    <div>Text input value: ${this.textValue_}</div>
    <div>Search input value: ${this.searchValue_}</div>
    <div>Email input value: ${this.emailValue_}</div>
    <div>Number input value: ${this.numberValue_}</div>
    <div>Pin input value: ${this.pinValue_}</div>
    <div>Textarea value: ${this.textareaValue_}</div>
  </div>
</div>

<h2>"Stroked" inputs without built-in labels</h2>
<div class="demos">
  <cr-input class="stroked no-error"
      type="text" placeholder="Insert text here" aria-label="Some label">
  </cr-input>

  <cr-input required auto-validate invalid class="stroked"
      type="text" placeholder="Required field" aria-label="Some label">
  </cr-input>

  <div class="row center">
    <label aria-hidden="true">Some visible external label</label>
    <cr-input class="stroked no-error"
        type="text" placeholder="Insert text here" aria-label="Some label">
    </cr-input>
  </div>
</div>`;
}