kalidea/kaligraphi

<h1>Form-field</h1>

<div [class.reverse]="reverse" class="example">


  <kal-form-field [legend]="legend" [kalTheme]="themes" [displayErrors]="displayErrors">
    <kal-input [formControl]="control1"
               [kalTheme]="themes"
               label="Input label"
               required="true">
    </kal-input>
  </kal-form-field>

  <kal-form-field [kalTheme]="themes" [displayErrors]="displayErrors">

    <ng-template kalFormFieldLabel>
      <div style="display: flex; justify-content: space-between; width: 100%">
        <span>Input label with kalFormFieldLabelDirective</span>
        <kal-icon>settings</kal-icon>
      </div>
      &nbsp;<br/>
    </ng-template>

    <kal-input [formControl]="control2"
               [kalTheme]="themes"
               [errorsMessage]="{'email': 'this is not a valid email'}"
               label="Input label"
               required="true">
    </kal-input>
  </kal-form-field>

  <kal-form-field [kalTheme]="themes" [displayErrors]="displayErrors">
    <kal-select [kalTheme]="themes"
                label="Select label"
                placeholder="Select items"
                required
                tabindex="1">
      <kal-option value="1">1</kal-option>
      <kal-option value="2">2</kal-option>
      <kal-option value="3">3</kal-option>
      <kal-option value="4">4</kal-option>
    </kal-select>
  </kal-form-field>
</div>


<div class="configurator">
  <kal-checkbox [(ngModel)]="reverse" label="reverse"></kal-checkbox>

  <kal-checkbox [(ngModel)]="displayErrors" label="show error"></kal-checkbox>

  <kal-form-field>
    <kal-input
      [(ngModel)]="legend"
      label="legend"
    ></kal-input>
  </kal-form-field>
</div>