All files / src/app/shared/formly/wrappers/horizontal-checkbox-wrapper horizontal-checkbox-wrapper.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
2x
 
 
 
 
 
 
2x
 
 
 
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FieldWrapper } from '@ngx-formly/core';
 
/**
 * Wrapper that works with checkboxes and radio buttons.
 *
 * @props **label** - the label to be displayed
 * @props **labelClass** - the css class to be applied to the ``<label>`` tag. Will use default value if not provided.
 * @props **fieldClass** - the css class to be applied to a div around the ``#fieldComponent`` template. Will use default value if not provided.
 * @props **tooltip** - tooltip information that will be passed to the ``<ish-tooltip>`` component.
 *  Refer to the component documentation for more info.
 *
 * @usageNotes
 * Because of the unique nature of checkbox and radio button fields, the standard horizontal and validation wrappers can't be used.
 * Instead, this wrapper handles both presentation and validation of the fields :
 * * It will apply styling and provide error messages according to the error state.
 * * It will show  a label if desired and supply the necessary bootstrap classes (``form-check`` & ``form-check-label``)
 * * It will apply different classes depending on whether the field type is a checkbox or radio button
 * * It handles the display of tooltips via the ``<ish-tooltip>`` component
 */
@Component({
  selector: 'ish-horizontal-checkbox-wrapper',
  templateUrl: './horizontal-checkbox-wrapper.component.html',
  changeDetection: ChangeDetectionStrategy.Default,
})
export class HorizontalCheckboxWrapperComponent extends FieldWrapper {
  dprops = {
    labelClass: '',
    fieldClass: 'col-md-8',
    titleClass: 'col-md-4',
    noTitleClass: 'offset-md-4',
  };
  get keyString() {
    return this.field.key as string;
  }
}