Cannot read properties of undefined (reading 'reduce')

Describe the bug

There is a bug in the stepper.ts where the panelsCompleted are fired before the @ContentChildren panels are initialized,
because the listeners are set in OnInit rather than AfterContentInit.

To fix it, you can either move the listeners there, or make the setPanelsWithFormErrors null/undefined safe for missing panels.

ng-clarity/projects/angular/src/accordion/stepper/stepper.ts

Line 89 in 8595a17

    
           const panelsWithErrors = this.panels.reduce((panels, p) => (p.formGroup.invalid ? [...panels, p.id] : panels), []);

StackTrace:

TypeError: Cannot read properties of undefined (reading 'reduce')
    at ClrStepper.setPanelsWithFormErrors (clr-angular.mjs:1240:46)
    at Object.next (clr-angular.mjs:1235:22)
    at ConsumerObserver.next (Subscriber.js:91:33)
    at SafeSubscriber._next (Subscriber.js:60:26)
    at SafeSubscriber.next (Subscriber.js:31:18)
    at distinctUntilChanged.js:14:28
    at OperatorSubscriber._next (OperatorSubscriber.js:13:21)
    at OperatorSubscriber.next (Subscriber.js:31:18)
    at map.js:7:24
    at OperatorSubscriber._next (OperatorSubscriber.js:13:21)

How to reproduce

We have a complex case in our business project and tried to make a simple StackBlitz, but unfortunately,
we couldn't get the timing properly, so that the Observable fires before the panels are initialized.
Internal Reference: 6463

Expected behavior

No undefined error is thrown.

Versions

Clarity version:

❌ v16.3.0 (we upgraded from 3.16.0 and didn't had the issue [afaik])
✔️ v16.3.3+

Framework version: Angular 16.2.12/14

Device:

Type: Lenovoo ThinkPad
OS: Windows 10
Browser: Edge 123.0.2420.97/Chrome