Restructure

src-angular/app/core/directives/checkbox.directive.ts

@@ -0,0 +1,38 @@
+import { AfterViewInit, Directive, ElementRef, EventEmitter, Output } from '@angular/core'
+
+@Directive({
+	selector: '[appCheckbox]',
+})
+export class CheckboxDirective implements AfterViewInit {
+	@Output() checked = new EventEmitter<boolean>()
+
+	_isChecked = false
+
+	constructor(private checkbox: ElementRef) { }
+
+	ngAfterViewInit() {
+		$(this.checkbox.nativeElement).checkbox({
+			onChecked: () => {
+				this.checked.emit(true)
+				this._isChecked = true
+			},
+			onUnchecked: () => {
+				this.checked.emit(false)
+				this._isChecked = false
+			},
+		})
+	}
+
+	check(isChecked: boolean) {
+		this._isChecked = isChecked
+		if (isChecked) {
+			$(this.checkbox.nativeElement).checkbox('check')
+		} else {
+			$(this.checkbox.nativeElement).checkbox('uncheck')
+		}
+	}
+
+	get isChecked() {
+		return this._isChecked
+	}
+}

src-angular/app/core/directives/progress-bar.directive.ts

@@ -0,0 +1,29 @@
+import { Directive, ElementRef, Input } from '@angular/core'
+
+import * as _ from 'lodash'
+
+@Directive({
+	selector: '[appProgressBar]',
+})
+export class ProgressBarDirective {
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	private _$progressBar: any
+
+	progress: (percent: number) => void
+
+	@Input() set percent(percent: number) {
+		this.progress(percent)
+	}
+
+	constructor(private element: ElementRef) {
+		this.progress = _.throttle((percent: number) => this.$progressBar.progress('set').percent(percent), 100)
+	}
+
+	private get $progressBar() {
+		if (!this._$progressBar) {
+			this._$progressBar = $(this.element.nativeElement)
+		}
+		return this._$progressBar
+	}
+}