kalidea/kaligraphi

<h1>Radio</h1>

<div class="example" [class.reverse]="hasReverseTheme">
  <article>
    <kal-radio-group [formControl]="control"
                     [labelPosition]="labelPosition"
                     [kalTheme]="themes"
                     [disabled]="disabled"
                     (valueChanges)="displayValue($event)">
      <kal-radio value="test1" [kalTheme]="themes">test1</kal-radio>
      <kal-radio value="test2" [kalTheme]="themes">test2</kal-radio>
      <kal-radio value="test3" [kalTheme]="themes">test3</kal-radio>
      <kal-radio value="test4" [kalTheme]="themes">test4</kal-radio>
    </kal-radio-group>
    <div class="technical-value">
      <div class="technical-value__item">
        <span>The value of the form control</span>
        <span>{{ control.value }}</span>
      </div>
      <div class="technical-value__item">
        <span>The id of the selected radio button</span>
        <span>{{ id }}</span>
      </div>
    </div>
  </article>
</div>

<div class="configurator">
  <kal-form-field>
    <kal-select label="label position" [(ngModel)]="labelPosition">
      <kal-option value="after">after</kal-option>
      <kal-option value="before">before</kal-option>
    </kal-select>
  </kal-form-field>

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

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

  <kal-form-field>
    <kal-select label="edit value" (valueChanges)="changeRadioValueWithControl($event)">
      <kal-option value="test1">test1</kal-option>
      <kal-option value="test2">test2</kal-option>
      <kal-option value="test3">test3</kal-option>
      <kal-option value="test4">test4</kal-option>
    </kal-select>
  </kal-form-field>
</div>