feat(ld-sidenav): emit event after navigation (after transition ends)

src/liquid/components/ld-sidenav/ld-sidenav-slider/ld-sidenav-slider.tsx

@@ -38,13 +38,16 @@ export class LdSidenavSlider {
   @State() activeSubnavs: HTMLLdSidenavSubnavElement[] = []
   @State() isFirstLevelHidden = false
 
-  /**
-   * Emitted on navigation (before transition ends).
-   */
+  /** Emitted on navigation (before transition ends). */
   @Event() ldSidenavSliderChange: EventEmitter<
     { id: string; label: string } | undefined
   >
 
+  /** Emitted after navigation (after transition ends). */
+  @Event() ldSidenavSliderChanged: EventEmitter<
+    { id: string; label: string } | undefined
+  >
+
   private navigateToSubnav() {
     // Make current subnav and all ancestor subnavs active.
     let parentSubnav: HTMLLdSidenavSubnavElement
@@ -141,17 +144,20 @@ export class LdSidenavSlider {
     }
   }
 
-  private emitChange() {
+  private emitChange(afterTransition = false) {
     const activeSubnav = this.activeSubnavs[this.activeSubnavs.length - 1]
+    const toEmit = afterTransition
+      ? this.ldSidenavSliderChanged
+      : this.ldSidenavSliderChange
     if (activeSubnav) {
       const parentSubnav =
         this.activeSubnavs[this.activeSubnavs.length - 2] || this.el
-      this.ldSidenavSliderChange.emit({
+      toEmit.emit({
         id: activeSubnav.id,
         label: parentSubnav.label,
       })
     } else if (!this.currentSubnav) {
-      this.ldSidenavSliderChange.emit()
+      toEmit.emit()
     }
   }
 
@@ -213,6 +219,7 @@ export class LdSidenavSlider {
     this.updateAncestor()
     this.updateFirstLevelHidden()
     this.scrollInactiveToTop()
+    this.emitChange(true)
   }
 
   private toggleVisibilityOnHidableContent = (visible: boolean) => {

src/liquid/components/ld-sidenav/ld-sidenav-slider/readme.md

@@ -30,9 +30,10 @@ Please refer to the [`ld-sidenav` documentation](components/ld-sidenav/#ld-siden
 
 ## Events
 
-| Event                   | Description                                     | Type                                          |
-| ----------------------- | ----------------------------------------------- | --------------------------------------------- |
-| `ldSidenavSliderChange` | Emitted on navigation (before transition ends). | `CustomEvent<{ id: string; label: string; }>` |
+| Event                    | Description                                       | Type                                          |
+| ------------------------ | ------------------------------------------------- | --------------------------------------------- |
+| `ldSidenavSliderChange`  | Emitted on navigation (before transition ends).   | `CustomEvent<{ id: string; label: string; }>` |
+| `ldSidenavSliderChanged` | Emitted after navigation (after transition ends). | `CustomEvent<{ id: string; label: string; }>` |
 
 
 ## Methods

src/liquid/components/ld-sidenav/test/ld-sidenav.spec.ts

@@ -727,6 +727,11 @@ describe('ld-sidenav', () => {
       html: getSidenavWithSubnavigation(),
     })
     const ldSidenav = page.body.querySelector('ld-sidenav')
+    const changeHandler = jest.fn()
+    const changedHandler = jest.fn()
+    ldSidenav.addEventListener('ldSidenavSliderChange', changeHandler)
+    ldSidenav.addEventListener('ldSidenavSliderChanged', changedHandler)
+
     mockFocus(ldSidenav)
     await page.waitForChanges()
     expect(ldSidenav.classList.contains('ld-sidenav--has-active-subnav')).toBe(
@@ -742,6 +747,9 @@ describe('ld-sidenav', () => {
       ldSidenavBackButton.classList.contains('ld-sidenav-back--is-back')
     ).toBe(false)
 
+    expect(changeHandler).not.toHaveBeenCalled()
+    expect(changedHandler).not.toHaveBeenCalled()
+
     const ldSidenavNavitemArtInt =
       ldSidenav.querySelector<HTMLLdSidenavNavitemElement>(
         'ld-sidenav-slider > ld-sidenav-navitem:nth-child(4)'
@@ -757,10 +765,17 @@ describe('ld-sidenav', () => {
         .classList.contains('ld-sidenav-subnav--active')
     ).toBe(true)
 
+    expect(changeHandler).toHaveBeenCalledTimes(1)
+    expect(changedHandler).not.toHaveBeenCalled()
+
     expect(ldSidenavBack.textContent.trim()).toBe('Outline of Computer Science')
     expect(
       ldSidenavBackButton.classList.contains('ld-sidenav-back--is-back')
     ).toBe(true)
+
+    await transitionEnd(page, ldSidenav.querySelector('ld-sidenav-slider'))
+    expect(changeHandler).toHaveBeenCalledTimes(1)
+    expect(changedHandler).toHaveBeenCalledTimes(1)
   })
 
   it('expands on slide', async () => {