From 22ee8c8d84ce84753710a75e3e3e7a5636f3cde4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?=
 <30300440+bariscanyilmaz@users.noreply.github.com>
Date: Fri, 17 Feb 2023 15:24:50 +0300
Subject: [PATCH] make checkbox custom wrapper

---
 .../checkbox/checkbox.component.html          | 15 +++++++++
 .../checkbox/checkbox.component.scss          |  0
 .../checkbox/checkbox.component.spec.ts       | 22 +++++++++++++
 .../components/checkbox/checkbox.component.ts | 32 +++++++++++++++++++
 4 files changed, 69 insertions(+)
 create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.html
 create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.scss
 create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.spec.ts
 create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts

diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.html
new file mode 100644
index 0000000000..fa5ea40c91
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.spec.ts
new file mode 100644
index 0000000000..8abc252968
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts
new file mode 100644
index 0000000000..1d7435a8a2
--- /dev/null
+++ b/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);
+  }
+
+}