import { Component, ViewContainerRef, ViewChild } from '@angular/core';
import { Field } from 'ng-formly';
@Component({
  selector: 'formly-checkbox-inline',
  template: `

    <h5 class="form-control-label">{{to.label}}</h5>
    <div *ngFor="let opt of to.options" class="form-check form-check-inline">
      <label class="form-check-label">
        <input [formControl]="formControl" class="form-check-input mr-2" type="checkbox" name="{{key}}" id="{{opt.key}}" value="{{opt.value}}"> {{opt.value}}
      </label>
    </div>
  `,
  styles: [ `
    .form-check-inline {
      margin-top: .45rem;
      margin-bottom: 0rem;
      padding-left: .9rem;
      padding-right: .9rem;
      padding-top: .3rem;
      padding-bottom: .4rem;
      background-color: #e5e5e5;
      border-radius: 5px;
    }
    `]
})
export class FormlyInlineCheckbox extends Field {
  @ViewChild('fieldComponent', {read: ViewContainerRef}) fieldComponent: ViewContainerRef;
}