make checkbox custom wrapper

npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.html

@@ -0,0 +1,15 @@
+<div class="mb-3">
+  <label class="form-check-label" *ngIf="label" [ngClass]="labelClass" [for]="checkboxId" > {{label | abpLocalization}} </label>
+  <input
+    class="form-check-input"  
+    type="checkbox"
+    [(ngModel)]="value"
+    [id]="checkboxId"  
+    [readonly]="checkboxReadonly"
+    [ngClass]="checkboxClass" 
+    [ngStyle]="checkboxStyle" 
+    [formControl]="formControl"
+    (blur)="onBlur.next()"
+    (focus)="onFocus.next()" 
+    >
+</div>

npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CheckboxComponent } from './checkbox.component';
+
+describe('CheckboxComponent', () => {
+  let component: CheckboxComponent;
+  let fixture: ComponentFixture<CheckboxComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CheckboxComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CheckboxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts

@@ -0,0 +1,32 @@
+import { AbstractNgModelComponent } from '@abp/ng.core';
+import { Component, EventEmitter, forwardRef, Injector, Input, Output } from '@angular/core';
+import { CheckboxControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'abp-checkbox',
+  templateUrl: './checkbox.component.html',
+  styleUrls: ['./checkbox.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CheckboxComponent),
+      multi: true,
+    },
+  ]
+})
+export class CheckboxComponent extends AbstractNgModelComponent {
+
+  @Input() label: string;
+  @Input() checkboxId!: string;
+  @Input() formControl!: string;
+  @Input() checkboxStyle: string = '';
+  @Input() checkboxClass: string = '';
+  @Input() checkboxReadonly: boolean = false;
+  @Output() onBlur = new EventEmitter<void>();
+  @Output() onFocus = new EventEmitter<void>();
+  
+  constructor(injector: Injector) {
+    super(injector);
+  }
+
+}