kalidea/kaligraphi

<h1>Select</h1>

<div class="example">
  <article>

    <kal-select
      [kalTheme]="themes"
      [multiple]="isMultiple"
      [(ngModel)]="selection"
      tabindex="1"
      placeholder="Select an item">
      <kal-option
        #optionRef
        *ngFor="let option of options"
        [disabled]="option.disabled">

        <kal-checkbox
          [formControl]="optionRef.formControl"
          *ngIf="hasCheckbox">
        </kal-checkbox>

        OPTION {{ option.value }}
      </kal-option>

    </kal-select>

    <div class="technical-value">
      <div class="technical-value__item">
        <span>selection</span>
        <span>{{ selection | json }}</span>
      </div>
    </div>

  </article>

</div>


<div class="configurator">

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

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

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

  <kal-form-field>
    <kal-select
      tabindex="1"
      label="toggle disabled state"
      placeholder="select option to toggle"
      [formControl]="toggleOptionStateControl">
      <kal-option
        (selectionChange)="toggleOptionByValue($event.value)"
        [value]="option.value"
        *ngFor="let option of options">
        OPTION {{ option.value }}
      </kal-option>

    </kal-select>
  </kal-form-field>


</div>