fix(nav-toggle): fixing the nav toggle and close directives targets

CHANGELOG.md

@@ -27,6 +27,8 @@ All notable changes for each version of this project will be documented in this
     - Touch pans no longer leave slides partially moved or visible behind the current slide, for example when a pan is cancelled, reversed past the first or last slide of a non-looping carousel, released as a tap, or interrupted by removing slides or changing `gesturesSupport` or `vertical`.
     - Panning a carousel without slides no longer throws an error, and panning a carousel with a single slide no longer moves the slide against itself.
     - A slide activated through its `active` property now animates in the direction of its position, or in its own `direction` when one is set.
+- `IgxNavigationToggleDirective`, `IgxNavigationCloseDirective`
+    - The `igxNavToggle` and `igxNavClose` inputs are now public, so they can be set in applications compiled with `strictInputAccessModifiers`. Previously the inputs were private and setting them failed the template type check.
 - `IgxStepperComponent`
     - When the steps are rendered with `@for`, no `ExpressionChangedAfterItHasBeenCheckedError` is thrown on init in development mode, and the active step and the step indicators are rendered on init in `OnPush` hosts.
     - `activeChange` is no longer emitted twice for the step activated on init, or for steps bound to `[active]="false"` that were not active. It is now emitted for the steps whose collapse animation is interrupted by changing `orientation`, `verticalAnimationType` or `horizontalAnimationType`.

projects/igniteui-angular/core/src/core/navigation/directives.ts

@@ -15,7 +15,15 @@ import { IgxNavigationService } from './nav.service';
     standalone: true
 })
 export class IgxNavigationToggleDirective {
-    @Input('igxNavToggle') private target: any;
+    /**
+     * The ID of the target registered in the navigation service, which is toggled on click.
+     *
+     * @example
+     * ```html
+     * <button type="button" igxNavToggle="navDrawer">Toggle</button>
+     * ```
+     */
+    @Input('igxNavToggle') public target: any;
 
     public state: IgxNavigationService;
 
@@ -45,7 +53,15 @@ export class IgxNavigationToggleDirective {
     standalone: true
 })
 export class IgxNavigationCloseDirective {
-    @Input('igxNavClose') private target: any;
+    /**
+     * The ID of the target registered in the navigation service, which is closed on click.
+     *
+     * @example
+     * ```html
+     * <button type="button" igxNavClose="navDrawer">Close</button>
+     * ```
+     */
+    @Input('igxNavClose') public target: any;
 
     public state: IgxNavigationService;
 

projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.spec.ts

@@ -5,7 +5,7 @@ import { By } from '@angular/platform-browser';
 import { nextFrame } from '../../../test-utils/ui-interactions.spec';
 import { advance, useFakeClock } from '../../../test-utils/helper-utils.spec';
 import { IgxNavigationDrawerComponent } from './navigation-drawer.component';
-import { IgxNavigationService } from 'igniteui-angular/core';
+import { IgxNavigationCloseDirective, IgxNavigationService, IgxNavigationToggleDirective } from 'igniteui-angular/core';
 import { IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective } from './navigation-drawer.directives';
 import { IgxNavbarComponent } from 'igniteui-angular/navbar';
 import { IgxFlexDirective, IgxLayoutDirective } from 'igniteui-angular/directives';
@@ -148,6 +148,35 @@ describe('Navigation Drawer', () => {
         expect(drawer.isOpen).toBeFalsy();
     });
 
+    it('should open and close through the igxNavToggle and igxNavClose directives', async () => {
+        const fixture = TestBed.createComponent(TestNavDirectivesComponent);
+        fixture.detectChanges();
+        const drawer = fixture.componentInstance.navDrawer;
+        const toggleButton: HTMLElement = fixture.nativeElement.querySelector('#toggle');
+        const closeButton: HTMLElement = fixture.nativeElement.querySelector('#close');
+        expect(drawer.isOpen).toBeFalsy();
+
+        toggleButton.click();
+        expect(drawer.isOpen).toBeTruthy();
+        toggleButton.click();
+        expect(drawer.isOpen).toBeFalsy();
+
+        toggleButton.click();
+        expect(drawer.isOpen).toBeTruthy();
+        closeButton.click();
+        expect(drawer.isOpen).toBeFalsy();
+        closeButton.click(); // should do nothing
+        expect(drawer.isOpen).toBeFalsy();
+
+        // a target that is not registered in the navigation service is ignored
+        expect(() => fixture.nativeElement.querySelector('#toggleMissing').click()).not.toThrow();
+        expect(drawer.isOpen).toBeFalsy();
+
+        toggleButton.click();
+        expect(() => fixture.nativeElement.querySelector('#closeMissing').click()).not.toThrow();
+        expect(drawer.isOpen).toBeTruthy();
+    });
+
     it('async API calls should emit events', async () => {
         await TestBed.compileComponents();
         const fixture = TestBed.createComponent(TestComponentDIComponent);
@@ -873,6 +902,24 @@ class TestComponentDIComponent {
     public drawerWidth: string | number;
 }
 
+@Component({
+    providers: [IgxNavigationService],
+    selector: 'igx-test-cmp-nav-directives',
+    template: `
+        <igx-nav-drawer id="testNav"></igx-nav-drawer>
+        <button type="button" id="toggle" igxNavToggle="testNav">Toggle</button>
+        <button type="button" id="close" igxNavClose="testNav">Close</button>
+        <button type="button" id="toggleMissing" igxNavToggle="missing">Toggle missing</button>
+        <button type="button" id="closeMissing" igxNavClose="missing">Close missing</button>
+    `,
+    changeDetection: ChangeDetectionStrategy.Eager,
+    imports: [IgxNavigationDrawerComponent, IgxNavigationToggleDirective, IgxNavigationCloseDirective]
+})
+class TestNavDirectivesComponent {
+    @ViewChild(IgxNavigationDrawerComponent, { static: true })
+    public navDrawer: IgxNavigationDrawerComponent;
+}
+
 @Component({
     selector: 'igx-test-cmp-pin',
     providers: [IgxNavigationService],