From d19c21e1e040cc133cce35f776fc5e1cd44f4536 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?=
 <devbariscanyilmaz@gmail.com>
Date: Fri, 12 May 2023 03:06:17 +0300
Subject: [PATCH] document checkbox component

---
 docs/en/UI/Angular/Checkbox-Component.md    |  39 ++++++++++++++++++++
 docs/en/UI/Angular/images/form-checkbox.png | Bin 0 -> 2723 bytes
 2 files changed, 39 insertions(+)
 create mode 100644 docs/en/UI/Angular/Checkbox-Component.md
 create mode 100644 docs/en/UI/Angular/images/form-checkbox.png

diff --git a/docs/en/UI/Angular/Checkbox-Component.md b/docs/en/UI/Angular/Checkbox-Component.md
new file mode 100644
index 0000000000..e33611e471
--- /dev/null
+++ b/docs/en/UI/Angular/Checkbox-Component.md
@@ -0,0 +1,39 @@
+# Checkbox Component
+
+The ABP Checkbox Component is a reusable form input component for checkbox type.
+
+It takes `label`, `labelClass` (default form-check-label), `checkboxId`,`checkboxReadonly`,`checkboxReadonly` (default form-check-input) and `checkboxStyle` as input to customize component. Also, it emits `checkboxBlur` and `checkboxFocus` events when component gain or lose focus.
+
+# Usage
+
+ABP Checkbox component is a part of the `ThemeSharedModule` module. If you've imported that module into your module, you don't need to import it again. If not, first import it as shown below:
+
+```ts
+// my-feature.module.ts
+
+import { ThemeSharedModule } from "@abp/ng.theme.shared";
+import { CheckboxDemoComponent } from "./CheckboxDemoComponent.component";
+
+@NgModule({
+	imports: [
+		ThemeSharedModule,
+		// ...
+	],
+	declarations: [CheckboxDemoComponent],
+	// ...
+})
+export class MyFeatureModule {}
+```
+
+Then, the `abp-checkbox` component can be used. See the example below:
+
+```html
+<div class="form-check">
+	<abp-checkbox label="Yes,I Agree" checkboxId="checkbox-input">
+	</abp-checkbox>
+</div>
+```
+
+See the checkbox input result below:
+
+![abp-form-input](./images/form-checkbox.png)
diff --git a/docs/en/UI/Angular/images/form-checkbox.png b/docs/en/UI/Angular/images/form-checkbox.png
new file mode 100644
index 0000000000000000000000000000000000000000..18d064c474fc889904deed0e1662cfd2685b0fe1
GIT binary patch
literal 2723
zcmcJR_dgp78^vQ2wP(#57qw|?MYMt#MWdHeMQmDol@e`{P-@mFB_UR0U$Yc7LeSK#
zS+z%KV~^;yUhn_#zCV1QbI$VzoX?4enH#bI1%LnmfW_EI|KXLkUZKZGe|38-f<>-`
zD(Imh1W-LBw0RY1J#@`<0f5>R<})X{tIXtY^f(9r;0*pRRP*klVE_P7!&qO}GR$FX
zmJP;bEyA#?lsdwGVFuJRgEh$5DfTTe6722~v3Z;oWs_W9<>>Oz5L+!C&_sRHl>w0s
zQ>=H~!zUd+&Np1Nm!ai`!V(e~iVC63LP^VT?wIJLGakmp_Bn5E*t3jj74pul^cgad
z=<*(MaNIsu3AeNyH)9v4zUY3Js+-bnt{?M10w1Anclt+HHnR&Z?)Kmu*?k&xux=I{
zs<jl{6d(t=DK@`^#-LFk7;hrr=^_mS8sGljE5_@sS30}jzR9p6%e7^_9|PfQlk3pn
z+O-%)M?<<7M*NcAGi&76^((QvKrtFpCI&6|*`J;>n3dvC&63<|25IY+a|&g%zj~>M
z3SwB}AX3#mPrN2w2K??ojNt;=^L8m#JMwXg5SefrXFg}9PYNyPK1BO#xpCUZ7^{kd
zG#QSs{d!9W9xfj!i0E$Hdudt>gjVEZ%}9|$ta;vC2i2q(WJyB5Z0g<sIL)(wSWq;B
zzs+b4o-A_xtuwBRVyc(cmCD!`4|E(eq;5Q|jeO7!JCPaf;va6>spFZHx*;_%9&s9P
zO@~CG&W*z^Iwhm3Q*c#{IdE3XRBa^uxz_BTHSiq_(msc(9U8Ov88ZE>^)Z&)mMGT`
zYbtR4Zi~2#sgRAnJu*zh|I8U)R!`4|5SlGz+!{4PN=1IQ+7-h#6#CH=kZG<v^wFei
zac_l%wOenaXzne;4M%=1x@op$7>WU2-LsjURo-2)910u9L^U)kH)M%)_JW>20j~AD
zSH5idlkKi55fn{jaY2HW);ab<xTux3`!pFU+`k1?!F}|<{d5cSC0uhoZ(}|+sW?#!
z-}-yqwdYctb8sRP=k=wXgqb=3#}s&wGy(#CKeBnUIs(3vf3#=1Pi>l%*&VRVOkURU
zN|vN5Jws$KM+Y=Is{@b81QkPNPU&?CC3RgKZNF-k^WL{$+$_<e!9yBo@^!SBpP5Kh
z5+}S}c~+%EC5BeBx%`c6Z%!0O7h)q+ZNnza5|&za#FRi(32K5JU=&Z1{Mr3Igo&i9
zZdYo{-QIi0+A>1%xA;2w?NaJuP959(31Oy2rT;vbQ_Ju_4elWjV4MAsFP_%4Bz`<X
zj4p1>XwKdFC#0u4H3K=i?=CY|ukx9gppZ{S>TRStW9*~KBzzZl`CfH4MXupA|Bf#o
zi_{oQ1`@ax&N`HOTA()x*$N~7W-cGxtudUrF8It`xOenB)f?C;K41?tiEsJQia$Rj
zzcY0mG>TsC_Voq_VuaB`jAp`YRb!$&y$e_?9Q~2$w@6#&r$?-av(fh&15G4|feNcI
z8}!3XrX^3qq@%mI<z%}D#S*uUJ$767{VLBFZ)MELI)a`ubPr}<cH7WWJc|gA62|rw
z6O{#0c_$JJUAzUgt4Kxk#>0vl%~T7RP{>o)^a+1y^R08B2M9H#%o|@D*kI*tpzAhV
z4<+MZ{``C#Ok4cb)*;LE6ifjY#<r#6)Yd>Vd-;VUvpP9&QT1@dWLhn2iwjupROJe1
zN72XQk>b#_tnOsXBaJo}>F~(DY9Br0iMgSdjfHj1q4tl%fwB1H!dJ&WF4C;iwqn=Q
zs1=?ZHDGE4w85YnVe27!y>uNQwlQLFCTnGb-GS<zvZ5i)+6t3$;xLq6@a=p!KU54N
z@H+Y5B18(J#31Tql~(fdD>89hQYH?ZJVYQiPx_~9?KOL_#f)kT7Kv6k>!Ac1P_Ytk
zz$4tzX<95$`iX+##H0R1aW~+YC2QV^waQy3KQmddDwO_sbH)v)BU#Cu;Zj<sCa$8Y
zz)ZlL4vOsQt)?0Y1cZmGXn`xILP3b$#a}a;Q?{MMVj$aaih1-9FQ{C}n(`vgiOW)O
zXa?1#w+5|@2o-*AL!4nChM%npsX4q7mD?vdHmeiJOC7O~2D73Bvf=jee{J_g2fzHn
zq54eT`6OX}JmE9wI2WuqJ^cmV8G_9s9U)SzUn<^Uc5mlg!BK`(95^&H;7yIUcZsLz
zF{G(%4m<(vcOLQ)Mi|iF{-yb*)~EAVQVAsI<0{My9%}&QAsf^zeW#wXng{vwW%4G`
zRf;Yb4SG9IvGpEK*f?htk$<yUgz3s~_mA;9)~ax3!aI<I409n-g(=nryYFDe1@?#P
ztAsku{*N`-*SSa!#lG^JX`iO(s@3wQkG4fE_9ZSKKKT8oylbkSQo*0emzUaGQeRsK
zTUC>1a3>1&?76IYdIlZre#^jE>ppQ>fOm<0(Sx)ozPM3{{SK{DF`_eJeT44{AH=YM
za_{D$xC7#I5I%jif#bDBZ|C!9rWVbWgLxBcG4{wnq58ckvF+!j(%YNb*-}!wBnr5S
zRH4uPT>2|8!J;pgwZ%`qk5*0X5v~Y3HW=*|bzN(a5y?mzv6A3S&2C|D;R;3w_u@>m
zdBFoxen}d=)Js_>-L{osD+WDGzeVB)p@q?O73KN0ek5O;VU0fnH!csN?$6e)c!FI=
z-P<nKO>AD~vk~R|R*tM6hr(xvIZA8p=fe7>>P=Qu<(o{q{eAPtwKnAC_7cUY0?4gX
z&+i@~#&6^n1Ujc_$J4cRN!gihVr!{Oq+8iDUGM$ir@6L5kWj#wna}#job=fWttmn8
zEanYT{n-dB-mnX~R>s7CY{Pt7hj{Im+)A;C882H=8GEYdWQ>xd6)}am1g>`}7gLqY
zHZA_Num6!Gr^=$*Ab>pO>k9vuUf?nmAT5CBz=}j|7}3dfBugw*8^qs6o5_rNM9X%x
zzr3&htFi<aZ`7IX3O@X)lXM^DZUm59Kn|;m@<{DtCJ)SF{J(8uVLaT}hZ?zLPv2i8
z25*RPutVI+vjtc4XtzOm+=EK|hnlaby8J9zN~HW`NP(w<;4qvQxMQ5m9wI52-B7q0
z2=+ziw8vZ(Yn*kg%1>da&^Bd*X3ZBrx2}hW3?-$VvS=CNf;>iYEM#RKvzuG#tQOq2
z9I>5`{VTUa5g{m-@^@UVk~5er!hrss;QsQZe+?kQb~rT5jeli_#CG`_po6nVqnl^W
z9Xqi83vEj~qMZwvsktM@%iQ#jH%RfKu){T7wX%pepWXO%=4o9_c;CIcj#~W3>5X|V
zlDt`;CbZNuWB;ma``}acr+1=D=m^-k-KVtxv7^}SZN=b*M(rOIY@nWyF^y1izPM)~
zu8yy>QndG?w4!*xNpEJ}4<>1c5T`)Z?YKsF9j2LH^u%vygE&Ay5C_Zu0j9;vHVW^w
UcgBF|)vyE@8<^`?LmZ?31JKPLZ~y=R

literal 0
HcmV?d00001