[input-group]: scope theme styles

package.json

@@ -123,7 +123,7 @@
     "ig-typedoc-theme": "^6.0.0",
     "igniteui-dockmanager": "^1.16.1",
     "igniteui-sassdoc-theme": "^1.2.3",
-    "igniteui-webcomponents": "5.3.0",
+    "igniteui-webcomponents": "5.4.0",
     "jasmine": "^5.6.0",
     "jasmine-core": "^5.6.0",
     "karma": "^6.4.4",

projects/igniteui-angular/src/lib/combo/combo.component.html

@@ -18,7 +18,7 @@
         <ng-content select="igx-suffix"></ng-content>
     </ng-container>
     @if (displayValue) {
-        <igx-suffix [attr.aria-label]="resourceStrings.igx_combo_clearItems_placeholder" class="igx-combo__clear-button"
+        <igx-suffix [attr.aria-label]="resourceStrings.igx_combo_clearItems_placeholder" class="igx-input-group__clear-button igx-combo__clear-button"
             (click)="handleClearItems($event)">
             @if (clearIconTemplate) {
                 <ng-container *ngTemplateOutlet="clearIconTemplate"></ng-container>
@@ -28,7 +28,7 @@
             }
         </igx-suffix>
     }
-    <igx-suffix class="igx-combo__toggle-button">
+    <igx-suffix class="igx-input-group__toggle-button">
         @if (toggleIconTemplate) {
             <ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: collapsed}"></ng-container>
         }
@@ -41,72 +41,77 @@
     [labelledBy]="ariaLabelledBy || label?.id || placeholder || ''"
     [width]="itemsWidth || '100%'" (opening)="handleOpening($event)" (closing)="handleClosing($event)"
     (opened)="handleOpened()" (closed)="handleClosed()">
-    @if (displaySearchInput) {
-        <div class="igx-combo__search">
-            <igx-input-group type="line">
-                <input igxInput #searchInput name="searchInput" autocomplete="off" type="text"
-                    [(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)"
-                    (keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [attr.placeholder]="getSearchPlaceholderText()"
-                    aria-autocomplete="list" role="searchbox" aria-label="search"/>
-                @if (showSearchCaseIcon) {
-                    <igx-suffix (click)="toggleCaseSensitive()">
-                        <span [ngClass]="filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'">
+
+    <div class="igx-combo">
+        @if (displaySearchInput) {
+            <div class="igx-combo__search">
+                <igx-input-group type="line">
+                    <input igxInput #searchInput name="searchInput" autocomplete="off" type="text"
+                           [(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)"
+                           (keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [attr.placeholder]="getSearchPlaceholderText()"
+                           aria-autocomplete="list" role="searchbox" aria-label="search"/>
+                    @if (showSearchCaseIcon) {
+                        <igx-suffix
+                            class="igx-input-group__case-icon igx-combo__case-icon"
+                            [ngClass]="{ 'igx-combo__case-icon--active': filteringOptions.caseSensitive }"
+                            (click)="toggleCaseSensitive()"
+                        >
                             <igx-icon
-                                family="default"
-                                name="case_sensitive"
-                                [active]="filteringOptions.caseSensitive">
+                                    family="default"
+                                    name="case_sensitive"
+                                    [active]="filteringOptions.caseSensitive">
                             </igx-icon>
-                        </span>
-                    </igx-suffix>
-                }
-            </igx-input-group>
-        </div>
-    }
-    <ng-container *ngTemplateOutlet="headerTemplate">
-    </ng-container>
-    <div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'"
-        [style.maxHeight.rem]="itemsMaxHeightInRem" [igxDropDownItemNavigation]="dropdown" (focus)="dropdown.onFocus()"
-        [tabindex]="dropdown.collapsed ? -1 : 0" [attr.id]="dropdown.id" aria-multiselectable="true"
-        [attr.aria-activedescendant]="activeDescendant">
-        <igx-combo-item [itemHeight]="itemHeight" *igxFor="let item of data
+                        </igx-suffix>
+                    }
+                </igx-input-group>
+            </div>
+        }
+        <ng-container *ngTemplateOutlet="headerTemplate">
+        </ng-container>
+        <div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'"
+             [style.maxHeight.rem]="itemsMaxHeightInRem" [igxDropDownItemNavigation]="dropdown" (focus)="dropdown.onFocus()"
+             [tabindex]="dropdown.collapsed ? -1 : 0" [attr.id]="dropdown.id" aria-multiselectable="true"
+             [attr.aria-activedescendant]="activeDescendant">
+            <igx-combo-item [itemHeight]="itemHeight" *igxFor="let item of data
             | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction:disableFiltering
             | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;
             index as rowIndex; initialChunkSize: 10; containerSize: itemsMaxHeight || containerSize; itemSize: itemHeight || itemSize, scrollOrientation: 'vertical';"
-            [value]="item" [isHeader]="item?.isHeader" [index]="rowIndex" [role]="item?.isHeader? 'group' : 'option'">
-            @if (item?.isHeader) {
-                <ng-container
-                    *ngTemplateOutlet="headerItemTemplate ? headerItemTemplate : headerItemBase;
+                            [value]="item" [isHeader]="item?.isHeader" [index]="rowIndex" [role]="item?.isHeader? 'group' : 'option'">
+                @if (item?.isHeader) {
+                    <ng-container
+                            *ngTemplateOutlet="headerItemTemplate ? headerItemTemplate : headerItemBase;
                     context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}">
-                </ng-container>
-            }
-            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->
-            @if (!item?.isHeader) {
-                <ng-container #listItem
-                    *ngTemplateOutlet="template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};">
-                </ng-container>
-            }
-        </igx-combo-item>
-    </div>
-    @if (filteredData.length === 0 || isAddButtonVisible()) {
-        <div class="igx-combo__add">
-            @if (filteredData.length === 0) {
-                <div class="igx-combo__empty">
-                    <ng-container *ngTemplateOutlet="emptyTemplate ? emptyTemplate : empty">
                     </ng-container>
-                </div>
-            }
-            @if (isAddButtonVisible()) {
-                <igx-combo-add-item [itemHeight]="itemHeight"
-                    [tabindex]="dropdown.collapsed ? -1 : customValueFlag ? 1 : -1" class="igx-combo__add-item" role="button"
-                    [attr.aria-label]="resourceStrings.igx_combo_addCustomValues_placeholder" [index]="virtualScrollContainer.igxForOf.length">
-                    <ng-container *ngTemplateOutlet="addItemTemplate ? addItemTemplate : addItemDefault">
+                }
+                <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->
+                @if (!item?.isHeader) {
+                    <ng-container #listItem
+                                  *ngTemplateOutlet="template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};">
                     </ng-container>
-                </igx-combo-add-item>
-            }
+                }
+            </igx-combo-item>
         </div>
-    }
-    <ng-container *ngTemplateOutlet="footerTemplate">
-    </ng-container>
+        @if (filteredData.length === 0 || isAddButtonVisible()) {
+            <div class="igx-combo__add">
+                @if (filteredData.length === 0) {
+                    <div class="igx-combo__empty">
+                        <ng-container *ngTemplateOutlet="emptyTemplate ? emptyTemplate : empty">
+                        </ng-container>
+                    </div>
+                }
+                @if (isAddButtonVisible()) {
+                    <igx-combo-add-item [itemHeight]="itemHeight"
+                                        [tabindex]="dropdown.collapsed ? -1 : customValueFlag ? 1 : -1" class="igx-combo__add-item" role="button"
+                                        [attr.aria-label]="resourceStrings.igx_combo_addCustomValues_placeholder" [index]="virtualScrollContainer.igxForOf.length">
+                        <ng-container *ngTemplateOutlet="addItemTemplate ? addItemTemplate : addItemDefault">
+                        </ng-container>
+                    </igx-combo-add-item>
+                }
+            </div>
+        }
+        <ng-container *ngTemplateOutlet="footerTemplate">
+        </ng-container>
+    </div>
 </igx-combo-drop-down>
 <ng-template #complex let-display let-data="data" let-key="displayKey">
     {{display[key]}}

projects/igniteui-angular/src/lib/combo/combo.component.scss

@@ -0,0 +1,4 @@
+@use 'themes/base';
+@use 'themes/shared';
+@use 'themes/light';
+@use 'themes/dark';

projects/igniteui-angular/src/lib/combo/combo.component.ts

@@ -96,6 +96,7 @@ const diffInSets = (set1: Set<any>, set2: Set<any>): any[] => {
 @Component({
     selector: 'igx-combo',
     templateUrl: 'combo.component.html',
+    styleUrl: 'combo.component.css',
     encapsulation: ViewEncapsulation.None,
     providers: [
         IgxComboAPIService,