fix(theming): fix theming bootstrap dropdown

[Hristo313]

Closes #3810

The conflict seems to come from ngbAccordion/ngbAccordionCollapse interaction with overlay-based components (igx-dialog, dropdowns).
Replacing the accordion with a lightweight local toggle implementation removes the DOM manipulation/collapse behavior that was interfering with dropdown rendering and interaction

[Copilot]

Pull request overview

This PR addresses an interaction issue in the Bootstrap theming sample where ngbAccordion/collapse DOM behavior interferes with overlay-based components (e.g., dropdowns / dialogs). It removes the ng-bootstrap accordion usage and replaces it with a lightweight local toggle approach.

Changes:

• Removed ngbAccordion/collapse imports from the sample component and replaced accordion state with local booleans.
• Updated the template to render the “accordion” content conditionally via @if blocks rather than ng-bootstrap accordion directives.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
src/app/theming/bootstrap/bootstrap-sample.component.ts	Removes ng-bootstrap accordion-related imports and introduces local open/close state for the accordion items.
src/app/theming/bootstrap/bootstrap-sample.component.html	Replaces ngbAccordion markup with Bootstrap accordion classes and local click-to-toggle rendering via @if.

Comments suppressed due to low confidence (3)

src/app/theming/bootstrap/bootstrap-sample.component.html:238

• ml-1 is a Bootstrap 4 utility; this repo depends on Bootstrap 5.3.x, where the equivalent is ms-1. Using ml-1 won’t apply spacing with Bootstrap 5.

This issue also appears on line 264 of the same file.

                            <h5 class="m-0">
                              Balance: <span class="ml-1 primary">$ 3543.51</span>
                            </h5>

src/app/theming/bootstrap/bootstrap-sample.component.html:262

• The accordion toggle button is missing the Bootstrap-recommended a11y attributes. Consider binding aria-expanded to the open state and wiring aria-controls to an id on the corresponding panel so screen readers can understand the expanded/collapsed relationship.

                        <button class="accordion-button collapsed" [class.collapsed]="!mastercardOpen" type="button" (click)="mastercardOpen = !mastercardOpen">
                          <div class="d-flex align-items-center justify-content-between">

src/app/theming/bootstrap/bootstrap-sample.component.html:267

• ml-1 is a Bootstrap 4 utility; this repo depends on Bootstrap 5.3.x, where the equivalent is ms-1. Using ml-1 won’t apply spacing with Bootstrap 5.

                            <h5 class="m-0">
                              Balance:
                              <span class="ml-1 primary">$ 12,354.32</span>
                            </h5>

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.