client/src/app/shared/forms/peertube-checkbox.component.ts

   1 import { AfterContentInit, ChangeDetectorRef, Component, ContentChildren, forwardRef, Input, QueryList, TemplateRef } from '@angular/core'
   2 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
   3 import { PeerTubeTemplateDirective } from '@app/shared/angular/peertube-template.directive'
   4
   5 @Component({
   6   selector: 'my-peertube-checkbox',
   7   styleUrls: [ './peertube-checkbox.component.scss' ],
   8   templateUrl: './peertube-checkbox.component.html',
   9   providers: [
  10     {
  11       provide: NG_VALUE_ACCESSOR,
  12       useExisting: forwardRef(() => PeertubeCheckboxComponent),
  13       multi: true
  14     }
  15   ]
  16 })
  17 export class PeertubeCheckboxComponent implements ControlValueAccessor, AfterContentInit {
  18   @Input() checked = false
  19   @Input() inputName: string
  20   @Input() labelText: string
  21   @Input() labelInnerHTML: string
  22   @Input() helpPlacement = 'top auto'
  23   @Input() disabled = false
  24
  25   @ContentChildren(PeerTubeTemplateDirective) templates: QueryList<PeerTubeTemplateDirective<'label' | 'help'>>
  26
  27   // FIXME: https://github.com/angular/angular/issues/10816#issuecomment-307567836
  28   @Input() onPushWorkaround = false
  29
  30   labelTemplate: TemplateRef<any>
  31   helpTemplate: TemplateRef<any>
  32
  33   constructor (private cdr: ChangeDetectorRef) { }
  34
  35   ngAfterContentInit () {
  36     {
  37       const t = this.templates.find(t => t.name === 'label')
  38       if (t) this.labelTemplate = t.template
  39     }
  40
  41     {
  42       const t = this.templates.find(t => t.name === 'help')
  43       if (t) this.helpTemplate = t.template
  44     }
  45   }
  46
  47   propagateChange = (_: any) => { /* empty */ }
  48
  49   writeValue (checked: boolean) {
  50     this.checked = checked
  51
  52     if (this.onPushWorkaround) {
  53       this.cdr.markForCheck()
  54     }
  55   }
  56
  57   registerOnChange (fn: (_: any) => void) {
  58     this.propagateChange = fn
  59   }
  60
  61   registerOnTouched () {
  62     // Unused
  63   }
  64
  65   onModelChange () {
  66     this.propagateChange(this.checked)
  67   }
  68
  69   setDisabledState (isDisabled: boolean) {
  70     this.disabled = isDisabled
  71   }
  72 }