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   @Input() recommended = false
  25
  26   @ContentChildren(PeerTubeTemplateDirective) templates: QueryList<PeerTubeTemplateDirective<'label' | 'help'>>
  27
  28   // FIXME: https://github.com/angular/angular/issues/10816#issuecomment-307567836
  29   @Input() onPushWorkaround = false
  30
  31   labelTemplate: TemplateRef<any>
  32   helpTemplate: TemplateRef<any>
  33
  34   constructor (private cdr: ChangeDetectorRef) { }
  35
  36   ngAfterContentInit () {
  37     {
  38       const t = this.templates.find(t => t.name === 'label')
  39       if (t) this.labelTemplate = t.template
  40     }
  41
  42     {
  43       const t = this.templates.find(t => t.name === 'help')
  44       if (t) this.helpTemplate = t.template
  45     }
  46   }
  47
  48   propagateChange = (_: any) => { /* empty */ }
  49
  50   writeValue (checked: boolean) {
  51     this.checked = checked
  52
  53     if (this.onPushWorkaround) {
  54       this.cdr.markForCheck()
  55     }
  56   }
  57
  58   registerOnChange (fn: (_: any) => void) {
  59     this.propagateChange = fn
  60   }
  61
  62   registerOnTouched () {
  63     // Unused
  64   }
  65
  66   onModelChange () {
  67     this.propagateChange(this.checked)
  68   }
  69
  70   setDisabledState (isDisabled: boolean) {
  71     this.disabled = isDisabled
  72   }
  73 }