From f178443b737dbc7b50853b24cf8ffac3c8e0471c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Halil=20=C4=B0brahim=20Kalkan?= Date: Thu, 3 Aug 2023 10:02:16 +0300 Subject: [PATCH 01/10] Update docs-nav.json --- docs/en/docs-nav.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index c6c07d9a7c..08046fa664 100644 --- a/docs/en/docs-nav.json +++ b/docs/en/docs-nav.json @@ -1522,6 +1522,10 @@ } ] }, + { + "text": "API Documentation", + "path": "{ApiDocumentationUrl}" + }, { "text": "Contribution Guide", "path": "Contribution/Index.md" From 5c066c5b3f6fcbad97149b44d065ae7a9fb1870b Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Fri, 28 Jul 2023 14:59:40 +0300 Subject: [PATCH 02/10] show password directive test and document --- docs/en/UI/Angular/Show-Password-Directive.md | 52 +++++++++++++++ .../Angular/images/showPasswordDirective1.png | Bin 0 -> 3707 bytes .../Angular/images/showPasswordDirective2.png | Bin 0 -> 3932 bytes .../lib/tests/show-password-directive.spec.ts | 59 ++++++++++++++++++ 4 files changed, 111 insertions(+) create mode 100644 docs/en/UI/Angular/Show-Password-Directive.md create mode 100644 docs/en/UI/Angular/images/showPasswordDirective1.png create mode 100644 docs/en/UI/Angular/images/showPasswordDirective2.png create mode 100644 npm/ng-packs/packages/core/src/lib/tests/show-password-directive.spec.ts diff --git a/docs/en/UI/Angular/Show-Password-Directive.md b/docs/en/UI/Angular/Show-Password-Directive.md new file mode 100644 index 0000000000..db54bcdd76 --- /dev/null +++ b/docs/en/UI/Angular/Show-Password-Directive.md @@ -0,0 +1,52 @@ +# Show Password Directive + +In password input, text can be shown easily via changing input type attribute to `text`. To make this even easier, you can use the `ShowPasswordDirective` which has been exposed by the `@abp/ng.core` package. + + +## Getting Started + +In order to use the `ShowPasswordDirective` in an HTML template, the **`CoreModule`** should be imported into your module like this: + +```ts +// ... +import { CoreModule } from '@abp/ng.core'; + +@NgModule({ + //... + imports: [..., CoreModule], +}) +export class MyFeatureModule {} +``` + +## Usage + +The `ShowPasswordDirective` is very easy to use. The directive's selector is **`abpShowPassword`**. By adding the `abpShowPassword` attribute to an input element, you can activate the `ShowPasswordDirective` for the input element. + +See an example usage: + +```ts +@Component({ + selector: 'test-component', + standalone: true, + template: ` +
+ + + icon +
+ ` +}) +export class TestComponent{ + showPassword = false; +} +``` + +The `abpShowPassword` attribute has been added to the `` element. Click icon to activate the `ShowPasswordDirective`. + +See the result: + +![Show Password directive](./images/showPasswordDirective1.png) + +To see password input click icon. + +![Show Password directive](./images/showPasswordDirective2.png) \ No newline at end of file diff --git a/docs/en/UI/Angular/images/showPasswordDirective1.png b/docs/en/UI/Angular/images/showPasswordDirective1.png new file mode 100644 index 0000000000000000000000000000000000000000..7b64be2b5f14c8e8affb7849331f0f5398188193 GIT binary patch literal 3707 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 YNubRLytJp=IDz)l)k46FG%?Tr1J+;SK>z>% literal 0 HcmV?d00001 diff --git a/docs/en/UI/Angular/images/showPasswordDirective2.png b/docs/en/UI/Angular/images/showPasswordDirective2.png new file mode 100644 index 0000000000000000000000000000000000000000..43199ffeaa2b1a813743599a1f74137404254ee0 GIT binary patch literal 3932 zcma)9c{r5c+aIzg+4mt!mWYsb)W|+)rYPB$3`(|;ol(-*X~w=Q5h457cP4u=XzW`m zG)N5D-pBWP|NOr1?{}{2dCqyx@|^qr-1j;6{fW8**So;L%K!p_F2MA)jX@wv7|^~; zM+3ZjGvwDnpo{b{?OXT!vwqE@JPEtm_-*kf;t{K<#)AlHnHH)73MMRNmwXoN`BRSd zjJid*^c_*jD+F7X50*?Z{x&|tx+PTL>je5@AKtn zGBQ$M)L5St=%BwP1k={m7Nv?1JsW0b#{gg2ns@$n@QqAiWrtn&qv&3{$cKry0t|tv ze<#!J674F&hczG_cHecZKa2?Vv9qB&xOIXorJnD}(os#xmi)7IjHA4cLv*~5no^FP zGc5(`N$y9*_p;L%ZM=<+v$MGEKK#!?uP{(j$Lw~l#p;UuavKV95!~ZWmlT6joJlD> z$JNT_Qlrke4 z#)_Yn70TN^TyvmC)^Pk@KXSX~BQOx^mjCC0>|NzR0Yg&e?H6)keas6B6XUK|$es1H z{=daJ<1bd)L#*K^D0g9*9Ue}2H8Tg}=X>`f>W(>BSPp!n+7pqTDe^S%4az0h{@i_j ziRN4|n$pvOa{#rt(nvn9a?;h5HoC9Y7SKXzZDi-UN;|hn!)uFZ^X?TkIHZ$&C8IrcW zR?Nk_`s>2G5Ap2E5#{1fY3=lTy-T}iKO)YIC{qT22E(=Xk5yBI(_=qIcRpx*HN`s@ zgw^PGEj(T4?j^c1$`R}-_v@ceOq1-1OL7~k_u${0l))NZMHKR(zZpeIOP@(@uBY|X zVc}@Lr!z=&3Q||8wTHISPtKmdJDvx2obSb*0W-eG;jy`%L-+0Kq6c0+J&_U;Pf-?E z-(rnkGR8CeA;*ZSCPf1!o(P^m>f98-;8yM|Y?$F8*jiuj)dZ-Hg`w&+`PajNI$e3e zY9DaP)rAHQrQX{JhfY^69$ZTGDpcvq7MeC-O&3x;R=D7Qi4C7Kenc8^w}6)B|J=?@ zUlY_Cd;LI#8=7e;rV>@9WZZNU^uYS3hcs}OUQ2hTg1EbWJmDke*nTR%NFKdDp{q%L zy;v=5!|+K`t5T$yQzY*!I2_0<|-C>kG;c(dcVp z(TqlO0p`9T7PYBDKjUd*PHU5Y?Ld_j)EcHin{~53wNYwU|Ll0j`m;J6XF=T4jYhZT z`rf}Sj_(I&1_T9N03Y9*Rpv=bO!QpUM8vnOxxj-@ets(zuTeSQwVd(T#pR$s|NWwf zT()~b?PP|*He(YHibn`imrdOG;giQhV3BhLQk*Zq=qe;m_y9knGb%Xxn^Fb;b;VdQ(E z3FPY^w5EYng2pI+XyEiv))ZOkupf7q0|Itl&1O7C^3~$QQ{R==?|1l69og4LZADE3 zz9nyGmL+YDME9qDnm49R(@*!~qQ@&$I}M4sB-B4vGw#?^lp+QX>h?AhHNuuHO{?=+ z3uV3J#z*IEm-zpQHw{$MMz#cw$luDQ&rm77-Crn}Qj$FzCmU?843yBt<_uDSDC?EW zNeu9qEXIb;&t}31c14H%>|vWQFV9HZp>?`F-jn{DGy# zlfE&7#9Ytk2z$TGyy}rPzfM32J1^~Z`(%xsrn3|#s06AH)+s^a1BlX@SjH0vLQpW5 zc`V1_ubsZuQzp!Ee#4%`oDF^ymhH)=9JhX~5ctUZV~}N$YK7%-YM#JZ)XDoMvZpxL z9@`W;SdhlMM+hA*LZK^hj`9%Il;u;uj0MF$Bint6VXBL$&|UKNnzVYEWl7Rus@WcU zDe~~kr}TO-g(1l7Y5Av~X9-|KMuG>tb9*HM2S>e0o9U4>i?t11!tdM?*hyty_-UxB zV9gHA)G-)|a+qV7xX~KcoDDK}o!RVkKXEacCs`SP=W6dpVlGbD$xe;P|AuAT-um6m z>%z46?h+vE^Ka8tR2psQf_JDH#PABYI=aQI*JAr68^%?}V6IP?XxU#vn|gP}d�Y zx-=@ZKc@!UqB`SJS~_LXdsHc4kZavv)ya!NHN1YKx6!>ZL-8~2tgiLj$XwO;4d2+Ksk1Ka;xH8ZN3$6e-$NX3jNU>tlZ zQ4zb%Z~F#Oi;t_uFmlS1clM@ox8~DtyNp??q?Cu(Xb)zGy7Z^s^et7LP>40(j182Xjlu#7K|v}%u{U_&hCCOuTzgM(&s4_1Dys#{!414iZG}UF zRtzUsc~Bwr2Tv%xid7ipPLnh_+eL~+d5`xk2Sth5AnE!(hE}yJ!+aT;ZLP6uYij*D zbzLN3D@5sfNarK*@l%u8<)YY0E=vA9q@SeD0C;6`e`|bY+04es{Pt$PDj?TpQoAHP zXy$qVjjqNEx*xE=Xm>@vuh~?0_nhxW{%~$XG=^&x^VRqkiIvN7R?wrg zTzvfy_EjOQFRI&LO2WND!LRfj1XeKBj@k!(CvOurCEpU9JLJE_hfD=qAyAzsIyc0^ z4@3L|TWVLk)(@+Ot-L6{*95L@FA*&?Nbmf`fV;x0N84Rro^t8dk#JgaWlUxwaV%;fdRt0cIzjw`v++JMTNJ4&gZ?)2xP51m8SQ0zHm4)Tx?@- z0(r*{RmS0|)%iX4&dH^HY$4bhpC!NdSN23hRBMzJQjZRIB#sHu%eQD-=1|qZ2G!>e zuLZ}vf)=KGlM*lus(N3Guv5)=>zrJfd8@U2sSm% zKB@rOC=pkc*ftja%s}aUVOoc!?#~nfvXb~~vgW41dv7xPnU~3UX|Yn*hh`ddurcuu z?0ACavM=9b^v=n|URTK8?g9;p4*OufzOD7}+a+uZvA*ryo#!$cL-8U#v6~u_93+pM)@PVZhFKZ?&J1|(k3;aqTJif) zzhlq?Y(8)P8uAn(3JuK_L>c zjJq2d-D*_}tcU$l1>Wa%dN{rM+>Wqk(j~bD8R|G1jnw z`MCDZ@=)!+hCZ(R+0XZYB}6O%R#6?^v1)HWf0l`?81T6Y=mI@<6$%@5_J|p#eM>ps zI0gei1J*AznP~g#y!88)hlExH-%K4&(IGm@;fLbnm$?apyjeuv#aT08qHrpvk3CLO z?bVO3Dlf9ZH8@4`fkg-d?DP0r + + + `, + imports:[ShowPasswordDirective] +}) +class TestComponent { + showPassword:boolean = false +} + +describe('ShowPasswordDirective',()=>{ + let fixture: ComponentFixture;; + let des : DebugElement[]; + let desAll : DebugElement[]; + let bareInput; + + beforeEach(()=>{ + fixture = TestBed.configureTestingModule({ + imports: [ TestComponent ] + }).createComponent(TestComponent) + + fixture.detectChanges(); // initial binding + + // all elements with an attached HighlightDirective + des = fixture.debugElement.queryAll(By.directive(ShowPasswordDirective)); + + // all inputs includes nondirective + desAll = fixture.debugElement.queryAll(By.all()); + + // the input without the ShowPasswordDirective + bareInput = fixture.debugElement.query(By.css('input:not([abpShowPassword])')); + }) + + // color tests + it('should have three input has ShowPasswordDirective elements', () => { + expect(des.length).toBe(3); + }); + + test.each([[0,'text'],[1,'password'],[2,'text'],[3,'password']])('%p. input type must be %p)', (index,inpType) => { + const inputType = desAll[index].nativeElement.type; + expect(inputType).toBe(inpType); + }); + + it('should have three input has ShowPasswordDirective elements', () => { + let input = des[2].nativeElement + expect(input.type).toBe('password') + fixture.componentInstance.showPassword = true + fixture.detectChanges() + expect(input.type).toBe('text') + }); + }); \ No newline at end of file From b61cd17d3167653b0f0a84b9717769bcafffa1f6 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Sun, 30 Jul 2023 23:48:51 +0300 Subject: [PATCH 03/10] capsLock doc and test --- .../src/lib/tests/capsLock.directive.spec.ts | 58 +++++++++++++++++++ .../lib/tests/show-password-directive.spec.ts | 2 +- 2 files changed, 59 insertions(+), 1 deletion(-) create mode 100644 npm/ng-packs/packages/core/src/lib/tests/capsLock.directive.spec.ts diff --git a/npm/ng-packs/packages/core/src/lib/tests/capsLock.directive.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/capsLock.directive.spec.ts new file mode 100644 index 0000000000..17d50ba697 --- /dev/null +++ b/npm/ng-packs/packages/core/src/lib/tests/capsLock.directive.spec.ts @@ -0,0 +1,58 @@ +import { Component, DebugElement } from '@angular/core' +import { ComponentFixture, TestBed } from '@angular/core/testing' +import { TrackCapsLockDirective } from '../directives'; +import { By } from '@angular/platform-browser'; + +@Component({ + standalone:true, + template: ` + + `, + imports:[TrackCapsLockDirective] +}) +class TestComponent { + capsLock:boolean = false +} + +describe('TrackCapsLockDirective',()=>{ + let fixture: ComponentFixture;; + let des : DebugElement[]; + + beforeEach(()=>{ + fixture = TestBed.configureTestingModule({ + imports: [ TestComponent ] + }).createComponent(TestComponent); + + fixture.detectChanges(); + + des = fixture.debugElement.queryAll(By.directive(TrackCapsLockDirective)); + }); + + // tests + test.each(['keydown','keyup'])('is %p works when press capslock and is emit status', (eventName) => { + const event = new KeyboardEvent(eventName, { + key: 'CapsLock', + modifierCapsLock: true + }); + window.dispatchEvent(event); + fixture.detectChanges(); + expect(fixture.componentInstance.capsLock).toBe(true) + }); + + test.each(['keydown','keyup'])('is %p detect the change capslock is emit status', (eventName) => { + const trueEvent = new KeyboardEvent(eventName, { + key: 'CapsLock', + modifierCapsLock: true + }); + window.dispatchEvent(trueEvent); + fixture.detectChanges(); + expect(fixture.componentInstance.capsLock).toBe(true) + const falseEvent = new KeyboardEvent(eventName, { + key: 'CapsLock', + modifierCapsLock: false + }); + window.dispatchEvent(falseEvent); + fixture.detectChanges(); + expect(fixture.componentInstance.capsLock).toBe(false) + }); + }); \ No newline at end of file diff --git a/npm/ng-packs/packages/core/src/lib/tests/show-password-directive.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/show-password-directive.spec.ts index 6b07997bc9..e1e9750995 100644 --- a/npm/ng-packs/packages/core/src/lib/tests/show-password-directive.spec.ts +++ b/npm/ng-packs/packages/core/src/lib/tests/show-password-directive.spec.ts @@ -39,7 +39,7 @@ describe('ShowPasswordDirective',()=>{ bareInput = fixture.debugElement.query(By.css('input:not([abpShowPassword])')); }) - // color tests + // tests it('should have three input has ShowPasswordDirective elements', () => { expect(des.length).toBe(3); }); From 9f10aeb148b89aa86245f9f6b59464661877a2ab Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Sun, 30 Jul 2023 23:49:52 +0300 Subject: [PATCH 04/10] capsLock doc and test --- docs/en/UI/Angular/CapsLock.directive.md | 52 ++++++++++++++++++ .../UI/Angular/images/CapsLockDirective1.png | Bin 0 -> 2224 bytes .../UI/Angular/images/CapsLockDirective2.png | Bin 0 -> 4274 bytes 3 files changed, 52 insertions(+) create mode 100644 docs/en/UI/Angular/CapsLock.directive.md create mode 100644 docs/en/UI/Angular/images/CapsLockDirective1.png create mode 100644 docs/en/UI/Angular/images/CapsLockDirective2.png diff --git a/docs/en/UI/Angular/CapsLock.directive.md b/docs/en/UI/Angular/CapsLock.directive.md new file mode 100644 index 0000000000..4b92d61124 --- /dev/null +++ b/docs/en/UI/Angular/CapsLock.directive.md @@ -0,0 +1,52 @@ +# Show Password Directive + +In password inputs,You may want to show if Caps Lock is on. To make this even easier, you can use the `TrackCapsLockDirective` which has been exposed by the `@abp/ng.core` package. + + +## Getting Started + +In order to use the `TrackCapsLockDirective` in an HTML template, the **`CoreModule`** should be imported into your module like this: + +```ts +// ... +import { CoreModule } from '@abp/ng.core'; + +@NgModule({ + //... + imports: [..., CoreModule], +}) +export class MyFeatureModule {} +``` + +## Usage + +The `TrackCapsLockDirective` is very easy to use. The directive's selector is **`abpCapsLock`**. By adding the `abpCapsLock` event to an element, you can track the status of Caps Lock. U can use this to warn user + +See an example usage: + +```ts +@Component({ + selector: 'test-component', + standalone: true, + template: ` +
+ + + icon +
+ ` +}) +export class TestComponent{ + capsLock = false; +} +``` + +The `abpCapsLock` event has been added to the `` element. Press Caps Lock to activate the `TrackCapsLockDirective`. + +See the result: + +![Show Password directive](./images/CapsLockDirective1.png) + +To see Caps Lock icon press Caps Lock. + +![Show Password directive](./images/CapsLockDirective2.png) \ No newline at end of file diff --git a/docs/en/UI/Angular/images/CapsLockDirective1.png b/docs/en/UI/Angular/images/CapsLockDirective1.png new file mode 100644 index 0000000000000000000000000000000000000000..2f143d755fd2d331beed42c8ce9c361cb8aeaa0b GIT binary patch literal 2224 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 U>BitD2Pwepw$-gl!+XE~7Z`*$lmGw# literal 0 HcmV?d00001 From 4fd8dbc49a32c2ab665e9a28429c5ef530f81049 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sinan=20=C3=96zt=C3=BCrk?= <72804437+Sinan997@users.noreply.github.com> Date: Mon, 31 Jul 2023 10:48:56 +0300 Subject: [PATCH 05/10] Update CapsLock.directive.md --- docs/en/UI/Angular/CapsLock.directive.md | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/docs/en/UI/Angular/CapsLock.directive.md b/docs/en/UI/Angular/CapsLock.directive.md index 4b92d61124..a21057490c 100644 --- a/docs/en/UI/Angular/CapsLock.directive.md +++ b/docs/en/UI/Angular/CapsLock.directive.md @@ -5,15 +5,17 @@ In password inputs,You may want to show if Caps Lock is on. To make this even ea ## Getting Started -In order to use the `TrackCapsLockDirective` in an HTML template, the **`CoreModule`** should be imported into your module like this: +`TrackCapsLockDirective` is standalone. In order to use the `TrackCapsLockDirective` in an HTML template, import it to related module or your standalone component: ```ts -// ... -import { CoreModule } from '@abp/ng.core'; +import { TrackCapsLockDirective } from '@abp/ng.core'; @NgModule({ //... - imports: [..., CoreModule], + imports: [ + ..., + TrackCapsLockDirective + ], }) export class MyFeatureModule {} ``` @@ -25,6 +27,8 @@ The `TrackCapsLockDirective` is very easy to use. The directive's selector is ** See an example usage: ```ts +import { TrackCapsLockDirective } from '@abp/ng.core' + @Component({ selector: 'test-component', standalone: true, @@ -34,7 +38,8 @@ See an example usage: icon - ` + `, + imports: [ TrackCapsLockDirective ] }) export class TestComponent{ capsLock = false; @@ -49,4 +54,4 @@ See the result: To see Caps Lock icon press Caps Lock. -![Show Password directive](./images/CapsLockDirective2.png) \ No newline at end of file +![Show Password directive](./images/CapsLockDirective2.png) From cd5867a3f8bd78fdd3b401384554a4934f04a445 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sinan=20=C3=96zt=C3=BCrk?= <72804437+Sinan997@users.noreply.github.com> Date: Mon, 31 Jul 2023 10:51:53 +0300 Subject: [PATCH 06/10] Update CapsLock.directive.md --- docs/en/UI/Angular/CapsLock.directive.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/en/UI/Angular/CapsLock.directive.md b/docs/en/UI/Angular/CapsLock.directive.md index a21057490c..24bef39cdc 100644 --- a/docs/en/UI/Angular/CapsLock.directive.md +++ b/docs/en/UI/Angular/CapsLock.directive.md @@ -1,6 +1,6 @@ -# Show Password Directive +# Caps Lock Directive -In password inputs,You may want to show if Caps Lock is on. To make this even easier, you can use the `TrackCapsLockDirective` which has been exposed by the `@abp/ng.core` package. +In password inputs, You may want to show if Caps Lock is on. To make this even easier, you can use the `TrackCapsLockDirective` which has been exposed by the `@abp/ng.core` package. ## Getting Started From 00c41f56698e2bdb84b27bc36b2255ea3be0cf50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sinan=20=C3=96zt=C3=BCrk?= <72804437+Sinan997@users.noreply.github.com> Date: Mon, 31 Jul 2023 10:58:53 +0300 Subject: [PATCH 07/10] Update Show-Password-Directive.md --- docs/en/UI/Angular/Show-Password-Directive.md | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/docs/en/UI/Angular/Show-Password-Directive.md b/docs/en/UI/Angular/Show-Password-Directive.md index db54bcdd76..6c3cbe4f45 100644 --- a/docs/en/UI/Angular/Show-Password-Directive.md +++ b/docs/en/UI/Angular/Show-Password-Directive.md @@ -4,16 +4,17 @@ In password input, text can be shown easily via changing input type attribute to ## Getting Started - -In order to use the `ShowPasswordDirective` in an HTML template, the **`CoreModule`** should be imported into your module like this: +`ShowPasswordDirective` is standalone. In order to use the `ShowPasswordDirective` in an HTML template, import it to related module or your standalone component: ```ts -// ... -import { CoreModule } from '@abp/ng.core'; +import { ShowPasswordDirective } from '@abp/ng.core'; @NgModule({ //... - imports: [..., CoreModule], + imports: [ + ..., + ShowPasswordDirective + ], }) export class MyFeatureModule {} ``` @@ -25,6 +26,7 @@ The `ShowPasswordDirective` is very easy to use. The directive's selector is **` See an example usage: ```ts +import { ShowPasswordDirective } from '@abp/ng.core'; @Component({ selector: 'test-component', standalone: true, @@ -34,7 +36,8 @@ See an example usage: icon - ` + `, + imports: [ShowPasswordDirective] }) export class TestComponent{ showPassword = false; @@ -49,4 +52,4 @@ See the result: To see password input click icon. -![Show Password directive](./images/showPasswordDirective2.png) \ No newline at end of file +![Show Password directive](./images/showPasswordDirective2.png) From 1659274d7cfc7d70be56f5f921167aa6d3f760f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sinan=20=C3=96zt=C3=BCrk?= <72804437+Sinan997@users.noreply.github.com> Date: Mon, 31 Jul 2023 11:21:13 +0300 Subject: [PATCH 08/10] Update CapsLock.directive.md --- docs/en/UI/Angular/CapsLock.directive.md | 29 +++++++++++++++++++++--- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/docs/en/UI/Angular/CapsLock.directive.md b/docs/en/UI/Angular/CapsLock.directive.md index 24bef39cdc..1e1021bdd4 100644 --- a/docs/en/UI/Angular/CapsLock.directive.md +++ b/docs/en/UI/Angular/CapsLock.directive.md @@ -7,11 +7,16 @@ In password inputs, You may want to show if Caps Lock is on. To make this even e `TrackCapsLockDirective` is standalone. In order to use the `TrackCapsLockDirective` in an HTML template, import it to related module or your standalone component: +**Importing to NgModule** ```ts import { TrackCapsLockDirective } from '@abp/ng.core'; @NgModule({ //... + declarations: [ + ..., + TestComponent + ], imports: [ ..., TrackCapsLockDirective @@ -22,15 +27,33 @@ export class MyFeatureModule {} ## Usage -The `TrackCapsLockDirective` is very easy to use. The directive's selector is **`abpCapsLock`**. By adding the `abpCapsLock` event to an element, you can track the status of Caps Lock. U can use this to warn user +The `TrackCapsLockDirective` is very easy to use. The directive's selector is **`abpCapsLock`**. By adding the `abpCapsLock` event to an element, you can track the status of Caps Lock. You can use this to warn user. See an example usage: +**NgModule Component usage** +```ts +@Component({ + selector: 'test-component', + template: ` +
+ + + icon +
+ ` +}) +export class TestComponent{ + capsLock = false; +} +``` + +**Standalone Component usage** ```ts import { TrackCapsLockDirective } from '@abp/ng.core' @Component({ - selector: 'test-component', + selector: 'standalone-component', standalone: true, template: `
@@ -41,7 +64,7 @@ import { TrackCapsLockDirective } from '@abp/ng.core' `, imports: [ TrackCapsLockDirective ] }) -export class TestComponent{ +export class StandaloneComponent{ capsLock = false; } ``` From 2372ce0f29cefaada74ec2b1a8eda306f39ecf87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sinan=20=C3=96zt=C3=BCrk?= <72804437+Sinan997@users.noreply.github.com> Date: Mon, 31 Jul 2023 12:22:36 +0300 Subject: [PATCH 09/10] Update Show-Password-Directive.md --- docs/en/UI/Angular/Show-Password-Directive.md | 26 +++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/docs/en/UI/Angular/Show-Password-Directive.md b/docs/en/UI/Angular/Show-Password-Directive.md index 6c3cbe4f45..c19c8073bd 100644 --- a/docs/en/UI/Angular/Show-Password-Directive.md +++ b/docs/en/UI/Angular/Show-Password-Directive.md @@ -6,11 +6,16 @@ In password input, text can be shown easily via changing input type attribute to ## Getting Started `ShowPasswordDirective` is standalone. In order to use the `ShowPasswordDirective` in an HTML template, import it to related module or your standalone component: +**Importing to NgModule** ```ts import { ShowPasswordDirective } from '@abp/ng.core'; @NgModule({ //... + declarations: [ + ..., + TestComponent + ], imports: [ ..., ShowPasswordDirective @@ -25,10 +30,27 @@ The `ShowPasswordDirective` is very easy to use. The directive's selector is **` See an example usage: +**NgModule Component usage** ```ts -import { ShowPasswordDirective } from '@abp/ng.core'; @Component({ selector: 'test-component', + template: ` +
+ + + icon +
+ ` +}) +export class TestComponent{ + showPassword = false; +} +``` +**Standalone Component usage** +```ts +import { ShowPasswordDirective } from '@abp/ng.core'; +@Component({ + selector: 'standalone-component', standalone: true, template: `
@@ -39,7 +61,7 @@ import { ShowPasswordDirective } from '@abp/ng.core'; `, imports: [ShowPasswordDirective] }) -export class TestComponent{ +export class StandaloneComponent{ showPassword = false; } ``` From 65512dd433bc9b0e4e237f8a2736e9677e98f168 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Thu, 3 Aug 2023 09:53:55 +0300 Subject: [PATCH 10/10] update --- docs/en/UI/Angular/CapsLock.directive.md | 6 +++--- .../packages/core/src/lib/tests/capsLock.directive.spec.ts | 1 - .../core/src/lib/tests/show-password-directive.spec.ts | 6 +----- 3 files changed, 4 insertions(+), 9 deletions(-) diff --git a/docs/en/UI/Angular/CapsLock.directive.md b/docs/en/UI/Angular/CapsLock.directive.md index 1e1021bdd4..64a3fc42ca 100644 --- a/docs/en/UI/Angular/CapsLock.directive.md +++ b/docs/en/UI/Angular/CapsLock.directive.md @@ -39,7 +39,7 @@ See an example usage:
- icon + icon
` }) @@ -59,10 +59,10 @@ import { TrackCapsLockDirective } from '@abp/ng.core'
- icon + icon
`, - imports: [ TrackCapsLockDirective ] + imports: [TrackCapsLockDirective] }) export class StandaloneComponent{ capsLock = false; diff --git a/npm/ng-packs/packages/core/src/lib/tests/capsLock.directive.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/capsLock.directive.spec.ts index 17d50ba697..3182dfa2dd 100644 --- a/npm/ng-packs/packages/core/src/lib/tests/capsLock.directive.spec.ts +++ b/npm/ng-packs/packages/core/src/lib/tests/capsLock.directive.spec.ts @@ -28,7 +28,6 @@ describe('TrackCapsLockDirective',()=>{ des = fixture.debugElement.queryAll(By.directive(TrackCapsLockDirective)); }); - // tests test.each(['keydown','keyup'])('is %p works when press capslock and is emit status', (eventName) => { const event = new KeyboardEvent(eventName, { key: 'CapsLock', diff --git a/npm/ng-packs/packages/core/src/lib/tests/show-password-directive.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/show-password-directive.spec.ts index e1e9750995..8babb472c4 100644 --- a/npm/ng-packs/packages/core/src/lib/tests/show-password-directive.spec.ts +++ b/npm/ng-packs/packages/core/src/lib/tests/show-password-directive.spec.ts @@ -27,19 +27,15 @@ describe('ShowPasswordDirective',()=>{ imports: [ TestComponent ] }).createComponent(TestComponent) - fixture.detectChanges(); // initial binding + fixture.detectChanges(); - // all elements with an attached HighlightDirective des = fixture.debugElement.queryAll(By.directive(ShowPasswordDirective)); - // all inputs includes nondirective desAll = fixture.debugElement.queryAll(By.all()); - // the input without the ShowPasswordDirective bareInput = fixture.debugElement.query(By.css('input:not([abpShowPassword])')); }) - // tests it('should have three input has ShowPasswordDirective elements', () => { expect(des.length).toBe(3); });