kalidea/kaligraphi

<h1>Autocomplete</h1>

<section class="example">
  <article>
    <kal-form-field>
      <kal-input
        label="autocomplete"
        [formControl]="control"
        [kalAutocomplete]="dataSource"
        [kalAutocompleteLoading]="loading"
        [kalClearOnPick]="clearOnPick"
        (kalAutocompleteSelected)="choicePicked($event)"
        [kalTheme]="themes"
        [clearable]="true"></kal-input>
    </kal-form-field>
    <div class="technical-value">
      <div class="technical-value__item">
        <span>selected </span>
        <span>{{ result | json }}</span>
      </div>
    </div>
  </article>

</section>

<div class="configurator">

  <kal-form-field>
    <kal-select placeholder="themes" multiple="true" [(ngModel)]="themes" label="themes">
      <kal-option value="">none</kal-option>
      <kal-option value="reverse">reverse</kal-option>
    </kal-select>
  </kal-form-field>

  <kal-form-field>
    <kal-checkbox
      [(ngModel)]="clearOnPick"
      label="clearOnPick"
    ></kal-checkbox>
  </kal-form-field>

  <kal-form-field>
    <kal-checkbox
      [(ngModel)]="loading"
      label="Toggle loading"
    ></kal-checkbox>
  </kal-form-field>

  <kal-form-field>
    <kal-select [ngModel]="emperors" (ngModelChange)="updateEmperors()" label="Type" multiple>
      <kal-option [value]="emp" *ngFor="let emp of emperorsList">{{ emp }}</kal-option>
    </kal-select>
  </kal-form-field>


</div>