From 753a35dd11021ac1ea6f159f4cc877ebbf307b24 Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Tue, 19 May 2026 15:06:47 +0300
Subject: [PATCH] fix(theming): fix theming bootstrap dropdown

---
 .../bootstrap/bootstrap-sample.component.html | 82 +++++++++----------
 .../bootstrap/bootstrap-sample.component.ts   |  6 +-
 2 files changed, 41 insertions(+), 47 deletions(-)

diff --git a/src/app/theming/bootstrap/bootstrap-sample.component.html b/src/app/theming/bootstrap/bootstrap-sample.component.html
index db3cc5c8ea..5e4ad2bbba 100644
--- a/src/app/theming/bootstrap/bootstrap-sample.component.html
+++ b/src/app/theming/bootstrap/bootstrap-sample.component.html
@@ -227,13 +227,11 @@ <h5 igxCardHeaderSubtitle>$ 42,646.43</h5>
                   </div>
                 </div>
                 <div class="sample-column">
-                  <div ngbAccordion>
-                    <div ngbAccordionItem>
-                      <h2 ngbAccordionHeader class="m-0">
-                        <button ngbAccordionButton>
-                          <div
-                            class="d-flex align-items-center justify-content-between"
-                            >
+                  <div class="accordion">
+                    <div class="accordion-item">
+                      <h2 class="accordion-header m-0">
+                        <button class="accordion-button collapsed" [class.collapsed]="!visaOpen" type="button" (click)="visaOpen = !visaOpen">
+                          <div class="d-flex align-items-center justify-content-between">
                             <h5 class="m-0">Visa Gold</h5>
                             <h5 class="m-0">
                               Balance: <span class="ml-1 primary">$ 3543.51</span>
@@ -241,31 +239,27 @@ <h5 class="m-0">
                           </div>
                         </button>
                       </h2>
-                      <div ngbAccordionCollapse>
-                        <div ngbAccordionBody>
-                          <ng-template>
-                            <igx-list>
-                              @for (contact of contacts; track contact) {
-                                <igx-list-item>
-                                  <span igxListLineTitle>{{ contact.name }}</span>
-                                  <span igxListAction>{{ contact.amount }}</span>
-                                </igx-list-item>
-                              }
-                            </igx-list>
-                            <button igxButton="contained" class="mt-3">
-                              Show more
-                            </button>
-                          </ng-template>
+                      @if (visaOpen) {
+                        <div class="accordion-collapse accordion-body">
+                          <igx-list>
+                            @for (contact of contacts; track contact) {
+                              <igx-list-item>
+                                <span igxListLineTitle>{{ contact.name }}</span>
+                                <span igxListAction>{{ contact.amount }}</span>
+                              </igx-list-item>
+                            }
+                          </igx-list>
+                          <button igxButton="contained" class="mt-3">
+                            Show more
+                          </button>
                         </div>
-                      </div>
+                      }
                     </div>
 
-                    <div ngbAccordionItem>
-                      <h2 ngbAccordionHeader class="m-0">
-                        <button ngbAccordionButton>
-                          <div
-                            class="d-flex align-items-center justify-content-between"
-                            >
+                    <div class="accordion-item">
+                      <h2 class="accordion-header m-0">
+                        <button class="accordion-button collapsed" [class.collapsed]="!mastercardOpen" type="button" (click)="mastercardOpen = !mastercardOpen">
+                          <div class="d-flex align-items-center justify-content-between">
                             <h5 class="m-0">Mastercard</h5>
                             <h5 class="m-0">
                               Balance:
@@ -274,23 +268,21 @@ <h5 class="m-0">
                           </div>
                         </button>
                       </h2>
-                      <div ngbAccordionCollapse>
-                        <div ngbAccordionBody>
-                          <ng-template>
-                            <igx-list>
-                              @for (contact of contacts; track contact) {
-                                <igx-list-item>
-                                  <span igxListLineTitle>{{ contact.name }}</span>
-                                  <span igxListAction>{{ contact.amount }}</span>
-                                </igx-list-item>
-                              }
-                            </igx-list>
-                            <button igxButton="contained" class="mt-3">
-                              Show more
-                            </button>
-                          </ng-template>
+                      @if (mastercardOpen) {
+                        <div class="accordion-collapse accordion-body">
+                          <igx-list>
+                            @for (contact of contacts; track contact) {
+                              <igx-list-item>
+                                <span igxListLineTitle>{{ contact.name }}</span>
+                                <span igxListAction>{{ contact.amount }}</span>
+                              </igx-list-item>
+                            }
+                          </igx-list>
+                          <button igxButton="contained" class="mt-3">
+                            Show more
+                          </button>
                         </div>
-                      </div>
+                      }
                     </div>
                   </div>
                 </div>
diff --git a/src/app/theming/bootstrap/bootstrap-sample.component.ts b/src/app/theming/bootstrap/bootstrap-sample.component.ts
index 5a7c73bfea..38b46a395f 100644
--- a/src/app/theming/bootstrap/bootstrap-sample.component.ts
+++ b/src/app/theming/bootstrap/bootstrap-sample.component.ts
@@ -7,13 +7,13 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
 import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective } from 'igniteui-angular/card';
 import { IgxSuffixDirective } from 'igniteui-angular/input-group';
 import { IgxListActionDirective, IgxListComponent, IgxListItemComponent, IgxListLineTitleDirective } from 'igniteui-angular/list';
-import { NgbDropdown, NgbDropdownToggle, NgbDropdownMenu, NgbDropdownItem, NgbRating, NgbAccordionDirective, NgbAccordionItem, NgbAccordionHeader, NgbAccordionToggle, NgbAccordionButton, NgbCollapse, NgbAccordionCollapse, NgbAccordionBody } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDropdown, NgbDropdownToggle, NgbDropdownMenu, NgbDropdownItem, NgbRating } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
     selector: 'app-bootstrap-sample',
     styleUrls: ['./bootstrap-sample.component.scss'],
     templateUrl: './bootstrap-sample.component.html',
-    imports: [IgxButtonDirective, NgbDropdown, NgbDropdownToggle, NgbDropdownMenu, NgbDropdownItem, IgxAvatarComponent, IgxIconButtonDirective, IgxIconComponent, IgxLayoutDirective, IgxCardComponent, IgxFlexDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, NgbRating, IgxCardActionsComponent, IgxDialogComponent, IgxDialogActionsDirective, IgxSuffixDirective, IgxOverlayOutletDirective, NgbAccordionDirective, NgbAccordionItem, NgbAccordionHeader, NgbAccordionToggle, NgbAccordionButton, NgbCollapse, NgbAccordionCollapse, NgbAccordionBody, IgxListComponent, IgxListItemComponent, IgxListLineTitleDirective, IgxListActionDirective]
+    imports: [IgxButtonDirective, NgbDropdown, NgbDropdownToggle, NgbDropdownMenu, NgbDropdownItem, IgxAvatarComponent, IgxIconButtonDirective, IgxIconComponent, IgxLayoutDirective, IgxCardComponent, IgxFlexDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, NgbRating, IgxCardActionsComponent, IgxDialogComponent, IgxDialogActionsDirective, IgxSuffixDirective, IgxOverlayOutletDirective, IgxListComponent, IgxListItemComponent, IgxListLineTitleDirective, IgxListActionDirective]
 })
 
 export class BootstrapComponent implements OnInit{
@@ -28,6 +28,8 @@ export class BootstrapComponent implements OnInit{
     public themesClass = 'light';
 
     public horizontal = true;
+    public visaOpen = false;
+    public mastercardOpen = false;
 
     public contacts = [
         {