<commit_before>import {
  notEmpty,
  gt,
  or,
  and,
  equal,
  alias
} from '@ember/object/computed';
import { observer, defineProperty, computed } from '@ember/object';
import { scheduleOnce } from '@ember/runloop';
import { assert } from '@ember/debug';
import { typeOf, isBlank } from '@ember/utils';
import { A, isArray } from '@ember/array';
import { getOwner } from '@ember/application';
import layout from 'ember-bootstrap/templates/components/bs-form/element';
import FormGroup from 'ember-bootstrap/components/bs-form/group';

const nonDefaultLayouts = A([
  'checkbox'
]);

/**
 Sub class of `Components.FormGroup` that adds automatic form layout markup and form validation features.

 ### Form layout

 The appropriate Bootstrap markup for the given `formLayout` and `controlType` is automatically generated to easily
 create forms without coding the default Bootstrap form markup by hand:

 ```hbs
 {{#bs-form formLayout="horizontal" onSubmit=(action "submit") as |form|}}
   {{form.element controlType="email" label="Email" placeholder="Email" value=email}}
   {{form.element controlType="password" label="Password" placeholder="Password" value=password}}
   {{form.element controlType="checkbox" label="Remember me" value=rememberMe}}
   {{bs-button defaultText="Submit" type="primary" buttonType="submit"}}
 {{/bs-form}}
 ```

 ### Control types

 The following control types are supported out of the box:

 * Inputs (simple `text`, or any other HTML5 supported input types like `password`, `email` etc.)
 * Checkbox (single)
 * Radio Button (group)
 * Textarea

 #### Radio Buttons

 For a group of mutually exclusive radio buttons to work, you must supply the `options` property with an array of
 options, each of which will be rendered with an appropriate radio button and its label. It can be either a simple array
 of strings or objects. In the latter case, you would have to set `optionLabelPath` to the property, that contains the
 label on these objects.

 ```hbs
 {{#bs-form model=this onSubmit=(action "submit") as |form|}}
   {{form.element label="Gender" options=genderOptions optionLabelPath="title" property="gender"}}
 {{/bs-form}}
 ```

 The default layout for radios is stacked, but Bootstrap's inline layout is also supported using the `inline` property
 of the yielded control component:

 ```hbs
 {{#bs-form model=this onSubmit=(action "submit") as |form|}}
   {{#form.element label="Gender" options=genderOptions property="gender" as |el|}}
     {{el.control inline=true}}
   {{/form.element}}
 {{/bs-form}}
 ```

 #### Custom controls

 Apart from the standard built-in browser controls (see the `controlType` property), you can use any custom control simply
 by invoking the component with a block template. Use whatever control you might want, for example a select-2 component
 (from the [ember-select-2 addon](https://istefo.github.io/ember-select-2)):

 ```hbs
 {{#bs-form model=this onSubmit=(action "submit") as |form|}}
 {{#form.element label="Select-2" property="gender" useIcons=false as |el|}}
 {{select-2 id=el.id content=genderChoices optionLabelPath="label" value=el.value searchEnabled=false}}
 {{/form.element}}
 {{/bs-form}}
 ```
<commit_msg>Add controlType in radio examples<commit_after>import {
  notEmpty,
  gt,
  or,
  and,
  equal,
  alias
} from '@ember/object/computed';
import { observer, defineProperty, computed } from '@ember/object';
import { scheduleOnce } from '@ember/runloop';
import { assert } from '@ember/debug';
import { typeOf, isBlank } from '@ember/utils';
import { A, isArray } from '@ember/array';
import { getOwner } from '@ember/application';
import layout from 'ember-bootstrap/templates/components/bs-form/element';
import FormGroup from 'ember-bootstrap/components/bs-form/group';

const nonDefaultLayouts = A([
  'checkbox'
]);

/**
 Sub class of `Components.FormGroup` that adds automatic form layout markup and form validation features.

 ### Form layout

 The appropriate Bootstrap markup for the given `formLayout` and `controlType` is automatically generated to easily
 create forms without coding the default Bootstrap form markup by hand:

 ```hbs
 {{#bs-form formLayout="horizontal" onSubmit=(action "submit") as |form|}}
   {{form.element controlType="email" label="Email" placeholder="Email" value=email}}
   {{form.element controlType="password" label="Password" placeholder="Password" value=password}}
   {{form.element controlType="checkbox" label="Remember me" value=rememberMe}}
   {{bs-button defaultText="Submit" type="primary" buttonType="submit"}}
 {{/bs-form}}
 ```

 ### Control types

 The following control types are supported out of the box:

 * Inputs (simple `text`, or any other HTML5 supported input types like `password`, `email` etc.)
 * Checkbox (single)
 * Radio Button (group)
 * Textarea

 #### Radio Buttons

 For a group of mutually exclusive radio buttons to work, you must supply the `options` property with an array of
 options, each of which will be rendered with an appropriate radio button and its label. It can be either a simple array
 of strings or objects. In the latter case, you would have to set `optionLabelPath` to the property, that contains the
 label on these objects.

 ```hbs
 {{#bs-form model=this onSubmit=(action "submit") as |form|}}
   {{form.element controlType="radio" label="Gender" options=genderOptions optionLabelPath="title" property="gender"}}
 {{/bs-form}}
 ```

 The default layout for radios is stacked, but Bootstrap's inline layout is also supported using the `inline` property
 of the yielded control component:

 ```hbs
 {{#bs-form model=this onSubmit=(action "submit") as |form|}}
   {{#form.element controlType="radio" label="Gender" options=genderOptions property="gender" as |el|}}
     {{el.control inline=true}}
   {{/form.element}}
 {{/bs-form}}
 ```

 #### Custom controls

 Apart from the standard built-in browser controls (see the `controlType` property), you can use any custom control simply
 by invoking the component with a block template. Use whatever control you might want, for example a select-2 component
 (from the [ember-select-2 addon](https://istefo.github.io/ember-select-2)):

 ```hbs
 {{#bs-form model=this onSubmit=(action "submit") as |form|}}
 {{#form.element label="Select-2" property="gender" useIcons=false as |el|}}
 {{select-2 id=el.id content=genderChoices optionLabelPath="label" value=el.value searchEnabled=false}}
 {{/form.element}}
 {{/bs-form}}
 ```

{'fraction_non_alphanumeric': 0.1294919454770756, 'fraction_numerical': 0.0018587360594795538, 'mean_word_length': 5.097261567516525, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2479666', 'n_tokens_mistral': 1806, 'n_tokens_neox': 1765, 'n_words': 676}