<commit_before>{{page-toolbar pageTitle="Autocomplete" isDemo=true isWIP=true}}

{{#doc-content}}

  {{#paper-card}}
  {{#paper-card-content}}
    <h2>Basic Usage</h2>
    <blockquote>Use <code>\{{paper-autocomplete}}</code> to search for matches from local or remote data sources.</blockquote>

    {{! BEGIN-SNIPPET autocomplete.basic-usage }}
    {{#paper-autocomplete
      disabled=firstDisabled
      onCreate=(action "addCountry")
      options=items
      allowClear=true
      searchText=(readonly countrySearchText)
      onSearchTextChange=(action (mut countrySearchText))
      selected=selectedCountry
      search=(if simulateQuery (action "searchCountries"))
      searchField="name"
      labelPath="name"
      placeholder="Select a Country..."
      loadingMessage="Searching countries..."
      noMatchesMessage="Oops this country doesn't exist. Create a new country?"
      onSelectionChange=(action (mut selectedCountry)) as |country select|}}
      {{paper-autocomplete-highlight
        label=country.name
        searchText=select.searchText
        flags="i"}}
    {{/paper-autocomplete}}
    {{! END-SNIPPET }}

    <p>
      {{#if selectedCountry}}
        Selected country is {{selectedCountry.name}} ({{selectedCountry.code}})
      {{else}}
          Nothing selected...
      {{/if}}
      <br>
        Search text is {{countrySearch}}
    </p>
    {{#paper-checkbox
      value=firstDisabled
      onChange=(action (mut firstDisabled))}}
      Disable input
    {{/paper-checkbox}}
    {{#paper-checkbox
      value=simulateQuery
      onChange=(action (mut simulateQuery))}}
      Simulate query
    {{/paper-checkbox}}
    {{#paper-checkbox
      value=disableCache
      onChange=(action (mut disableCache))}}
      Disable Cache
    {{/paper-checkbox}}

    <h3>Template</h3>
    {{code-snippet name="autocomplete.basic-usage.hbs"}}

  {{/paper-card-content}}
  {{/paper-card}}

  {{#paper-card}}
  {{#paper-card-content}}
    <h2>Block Custom template</h2>
    <blockquote>Use <code>\{{paper-autocomplete}}</code> with custom templates to show styled autocomplete results.</blockquote>

    {{!-- searchText=(readonly templateSeachText) --}}

    {{! BEGIN-SNIPPET autocomplete.block-custom-template }}
    {{#paper-autocomplete
      placeholder="Type e.g. ember, paper, one, two etc."
      options=arrayOfItems
      selected=selectedItem
      onSelectionChange=(action (mut selectedItem))
      as |item term|}}
      <span class="item-title">
        {{paper-icon "star"}}
        <span>
          {{paper-autocomplete-highlight searchText=term.searchText flags="i" label=item}}
        </span>
      </span>
      {{else}}
      Whoops! could not find!
    {{/paper-autocomplete}}
    {{! END-SNIPPET }}

    <p>
      Selected: {{if selectedItem selectedItem "None"}}
    </p>

    <h3>Template</h3>
    {{code-snippet name="autocomplete.block-custom-template.hbs"}}
  {{/paper-card-content}}
  {{/paper-card}}

  {{#paper-card}}
  {{#paper-card-content}}
    <h2>Floating Label</h2>
    <blockquote>The following example demonstrates floating labels being used as a normal form element.</blockquote>
    <div class="layout-row">
      {{! BEGIN-SNIPPET autocomplete.floating-label }}
      {{paper-input label="Name" value=name onChange=(action (mut name)) class="flex"}}
        {{#paper-autocomplete
          disabled=(readonly disabled2)
          triggerClass="flex"
          options=items
          selected=selectedCountry2
          search=(if simulateQuery2 (action "searchCountries"))
          searchField="name"
          labelPath="name"
          label="Select a Country..."
          loadingMessage="Searching countries..."
          noMatchesMessage="Oops this country doesn't exist."
          onSelectionChange=(action (mut selectedCountry2)) as |country select|}}
          {{paper-autocomplete-highlight
            label=country.name
            searchText=select.searchText
            flags="i"}}
      {{/paper-autocomplete}}
      {{! END-SNIPPET }}
    </div>
    <p>
      {{#if selectedCountry2}}
        Selected country is {{selectedCountry2.name}} ({{selectedCountry2.code}})
      {{else}}
        Nothing is selected.
      {{/if}}
    </p>
    {{#paper-checkbox
      value=disabled2
      onChange=(action (mut disabled2))}}
      Disable input
    {{/paper-checkbox}}
    {{#paper-checkbox
      value=simulateQuery2
      onChange=(action (mut simulateQuery2))}}
      Simulate query
    {{/paper-checkbox}}
    {{#paper-checkbox
      value=disableCache2
      onChange=(action (mut disableCache2))}}
      Disable Cache
    {{/paper-checkbox}}

    <h3>Template</h3>
    {{code-snippet name="autocomplete.floating-label.hbs"}}

  {{/paper-card-content}}
  {{/paper-card}}

{{/doc-content}}
<commit_msg>some doc cleanup<commit_after>{{page-toolbar pageTitle="Autocomplete" isDemo=true isWIP=true}}

{{#doc-content}}

  {{#paper-card}}
  {{#paper-card-content}}
    <h2>Basic Usage</h2>
    <blockquote>Use <code>\{{paper-autocomplete}}</code> to search for matches from local or remote data sources.</blockquote>

    {{! BEGIN-SNIPPET autocomplete.basic-usage }}
    {{#paper-autocomplete
      disabled=firstDisabled
      onCreate=(action "addCountry")
      options=items
      allowClear=true
      searchText=(readonly countrySearchText)
      onSearchTextChange=(action (mut countrySearchText))
      selected=selectedCountry
      search=(if simulateQuery (action "searchCountries"))
      searchField="name"
      labelPath="name"
      placeholder="Select a Country..."
      loadingMessage="Searching countries..."
      noMatchesMessage="Oops this country doesn't exist. Create a new country?"
      onSelectionChange=(action (mut selectedCountry)) as |country autocomplete|}}
      {{paper-autocomplete-highlight
        label=country.name
        searchText=autocomplete.searchText
        flags="i"}}
    {{/paper-autocomplete}}
    {{! END-SNIPPET }}

    <p>
      {{#if selectedCountry}}
        Selected country is {{selectedCountry.name}} ({{selectedCountry.code}})
      {{else}}
          Nothing selected...
      {{/if}}
    </p>
    {{#paper-checkbox
      value=firstDisabled
      onChange=(action (mut firstDisabled))}}
      Disable input
    {{/paper-checkbox}}
    {{#paper-checkbox
      value=simulateQuery
      onChange=(action (mut simulateQuery))}}
      Simulate query
    {{/paper-checkbox}}

    <h3>Template</h3>
    {{code-snippet name="autocomplete.basic-usage.hbs"}}

  {{/paper-card-content}}
  {{/paper-card}}

  {{#paper-card}}
  {{#paper-card-content}}
    <h2>Block Custom template</h2>
    <blockquote>Use <code>\{{paper-autocomplete}}</code> with custom templates to show styled autocomplete results.</blockquote>

    {{!-- searchText=(readonly templateSeachText) --}}

    {{! BEGIN-SNIPPET autocomplete.block-custom-template }}
    {{#paper-autocomplete
      placeholder="Type e.g. ember, paper, one, two etc."
      options=arrayOfItems
      selected=selectedItem
      onSelectionChange=(action (mut selectedItem))
      as |item term|}}
      <span class="item-title">
        {{paper-icon "star"}}
        <span>
          {{paper-autocomplete-highlight searchText=term.searchText flags="i" label=item}}
        </span>
      </span>
      {{else}}
      Whoops! could not find!
    {{/paper-autocomplete}}
    {{! END-SNIPPET }}

    <p>
      Selected: {{if selectedItem selectedItem "None"}}
    </p>

    <h3>Template</h3>
    {{code-snippet name="autocomplete.block-custom-template.hbs"}}
  {{/paper-card-content}}
  {{/paper-card}}

  {{#paper-card}}
  {{#paper-card-content}}
    <h2>Floating Label</h2>
    <blockquote>The following example demonstrates floating labels being used as a normal form element.</blockquote>
    <div class="layout-row">
      {{! BEGIN-SNIPPET autocomplete.floating-label }}
      {{paper-input label="Name" value=name onChange=(action (mut name)) class="flex"}}
        {{#paper-autocomplete
          disabled=(readonly disabled2)
          triggerClass="flex"
          options=items
          selected=selectedCountry2
          search=(if simulateQuery2 (action "searchCountries"))
          searchField="name"
          labelPath="name"
          label="Select a Country..."
          loadingMessage="Searching countries..."
          noMatchesMessage="Oops this country doesn't exist."
          onSelectionChange=(action (mut selectedCountry2)) as |country select|}}
          {{paper-autocomplete-highlight
            label=country.name
            searchText=select.searchText
            flags="i"}}
      {{/paper-autocomplete}}
      {{! END-SNIPPET }}
    </div>
    <p>
      {{#if selectedCountry2}}
        Selected country is {{selectedCountry2.name}} ({{selectedCountry2.code}})
      {{else}}
        Nothing is selected.
      {{/if}}
    </p>
    {{#paper-checkbox
      value=disabled2
      onChange=(action (mut disabled2))}}
      Disable input
    {{/paper-checkbox}}
    {{#paper-checkbox
      value=simulateQuery2
      onChange=(action (mut simulateQuery2))}}
      Simulate query
    {{/paper-checkbox}}

    <h3>Template</h3>
    {{code-snippet name="autocomplete.floating-label.hbs"}}

  {{/paper-card-content}}
  {{/paper-card}}

{{/doc-content}}

{'fraction_non_alphanumeric': 0.14635725849973016, 'fraction_numerical': 0.005180787911494874, 'mean_word_length': 2.8705096073517127, 'pattern_counts': {'":': 0, '<': 72, '<?xml version=': 0, '>': 72, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2394805', 'n_tokens_mistral': 2785, 'n_tokens_neox': 2666, 'n_words': 553}