Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular into coverage-extras

Author: Konstantin Dinev

CHANGELOG.md

@@ -8,6 +8,7 @@ All notable changes for each version of this project will be documented in this
 
 - `IgxCombo`, `IgxSimpleCombo`
     - Introduced the `selectionChanged` event for both components. The event is not cancelable and is emitted after the selection is committed and the component state is updated.
+    - Added `disableClear` input that allows hiding the clear button even when items are selected. Defaults to `false`.
 
 ## 21.1.3
 

package-lock.json

@@ -143,6 +143,7 @@
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "^2.0.3",
     "karma-jasmine": "~5.1.0",
+    "karma-jasmine-spec-tags": "^2.0.0",
     "karma-junit-reporter": "^2.0.1",
     "karma-parallel": "^0.3.1",
     "karma-spec-reporter": "^0.0.36",

package.json

@@ -164,6 +164,17 @@ You can disable combo using the following code:
 
 <div class="divider--half"></div>
 
+### Disable Clear
+You can hide the clear button using the following code:
+
+```html
+<igx-combo [disableClear]="true"></igx-combo>
+```
+
+When set to `true`, the clear button is not rendered even when items are selected.
+
+<div class="divider--half"></div>
+
 ### Grouping
 Defining a combo's groupKey option will group the items, according to that key.
 
@@ -320,7 +331,8 @@ When igxCombo is opened, allow custom values are enabled and add item button is
 | `searchPlaceholder `  | defines the placeholder text for search input     | string                      |
 | `collapsed`           | gets drop down state                              | boolean                     |
 | `disabled`            | defines whether the control is active or not      | boolean                     |
-| `ariaLabelledBy`      | defines label ID related to combo                 | boolean                     |
+| `disableClear`        | defines whether the clear button is rendered      | boolean                     |
+| `ariaLabelledBy`      | defines label ID related to combo                 | string                      |
 | `type`                | Combo style. - "line", "box", "border", "search"  | string                      |
 | `valid`               | gets if control is valid, when used in a form     | boolean                     |
 | `overlaySettings`     | gets/sets the custom overlay settings that control how the drop-down list displays | OverlaySettings |

projects/igniteui-angular/combo/README.md

@@ -456,6 +456,22 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
     @Input({ transform: booleanAttribute })
     public disabled = false;
 
+    /**
+     * Disables the clear button. The default is `false`.
+     *
+     * ```typescript
+     * // get
+     * let myComboDisableClear = this.combo.disableClear;
+     * ```
+     *
+     * ```html
+     * <!--set-->
+     * <igx-combo [disableClear]="true"></igx-combo>
+     * ```
+     */
+    @Input({ transform: booleanAttribute })
+    public disableClear = false;
+
     /**
      * Sets the visual combo type.
      * The allowed values are `line`, `box`, `border` and `search`. The default is `box`.

projects/igniteui-angular/combo/src/combo/combo.common.ts

@@ -18,7 +18,7 @@
     <ng-container ngProjectAs="igx-suffix">
         <ng-content select="igx-suffix,[igxSuffix]"></ng-content>
     </ng-container>
-    @if (displayValue) {
+    @if (displayValue && !disableClear) {
         <igx-suffix [attr.aria-label]="resourceStrings.igx_combo_clearItems_placeholder" class="igx-combo__clear-button"
             (click)="handleClearItems($event)">
             @if (clearIconTemplate) {

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

@@ -2228,6 +2228,25 @@ describe('igxCombo', () => {
                 fixture.detectChanges();
                 expect(fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_CLEARBUTTON}`)).length).toBeFalsy();
             });
+            it('should default disableClear to false', () => {
+                expect(combo.disableClear).toBe(false);
+            });
+            it('should hide the clear button when disableClear is true and items are selected', () => {
+                combo.select(['Maryland']);
+                fixture.detectChanges();
+                // Verify the clear button is visible before setting disableClear
+                expect(fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_CLEARBUTTON}`)).length).toBe(1);
+
+                combo.disableClear = true;
+                fixture.detectChanges();
+                expect(fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_CLEARBUTTON}`)).length).toBe(0);
+            });
+            it('should show the clear button when disableClear is false (default) and items are selected', () => {
+                combo.select(['Maryland']);
+                fixture.detectChanges();
+                expect(combo.disableClear).toBe(false);
+                expect(fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_CLEARBUTTON}`)).length).toBe(1);
+            });
             it('should select/deselect item on check/uncheck', () => {
                 const dropdown = combo.dropdown;
                 spyOn(combo.selectionChanging, 'emit').and.callThrough();

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

@@ -150,6 +150,17 @@ You can disable the combo using the following code:
 
 <div class="divider--half"></div>
 
+### Disable Clear
+You can hide the clear button using the following code:
+
+```html
+<igx-simple-combo [disableClear]="true"></igx-simple-combo>
+```
+
+When set to `true`, the clear button is not rendered even when a value is selected.
+
+<div class="divider--half"></div>
+
 ### Grouping
 Defining a combo's groupKey option will group the items, according to that key.
 
@@ -292,7 +303,8 @@ When the combo is opened, allow custom values are enabled and add item button is
 | `placeholder `          | Defines the "empty value" text.                    | `string`                      |
 | `collapsed`             | Gets the dropdown state.                              | `boolean`                     |
 | `disabled`              | Defines whether the control is active or not.      | `boolean`                     |
-| `ariaLabelledBy`        | Defines label ID related to combo.                 | `boolean`                     |
+| `disableClear`          | Defines whether the clear button is rendered.      | `boolean`                     |
+| `ariaLabelledBy`        | Defines label ID related to combo.                 | `string`                      |
 | `valid`                 | gets if control is valid, when used in a form.     | `boolean`                     |
 | `overlaySettings`       | Controls how the dropdown is displayed.            | `OverlaySettings`            |
 | `selected`              | Get current selection state.                       | `Array<any>`                |

projects/igniteui-angular/simple-combo/README.md

@@ -25,7 +25,7 @@
         <ng-content select="igx-suffix,[igxSuffix]"></ng-content>
     </ng-container>
 
-    @if (hasSelectedItem) {
+    @if (hasSelectedItem && !disableClear) {
         <igx-suffix [attr.aria-label]="resourceStrings.igx_combo_clearItems_placeholder" class="igx-combo__clear-button"
             (click)="handleClear($event)">
             @if (clearIconTemplate) {

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

@@ -1799,6 +1799,26 @@ describe('IgxSimpleCombo', () => {
             expect(clearButton).toBeNull();
         });
 
+        it('should default disableClear to false', () => {
+            expect(combo.disableClear).toBe(false);
+        });
+        it('should hide the clear button when disableClear is true and an item is selected', () => {
+            combo.select('Wisconsin');
+            fixture.detectChanges();
+            // Verify the clear button is visible before setting disableClear
+            expect(fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_CLEARBUTTON}`)).length).toBe(1);
+
+            combo.disableClear = true;
+            fixture.detectChanges();
+            expect(fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_CLEARBUTTON}`)).length).toBe(0);
+        });
+        it('should show the clear button when disableClear is false (default) and an item is selected', () => {
+            combo.select('Wisconsin');
+            fixture.detectChanges();
+            expect(combo.disableClear).toBe(false);
+            expect(fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_CLEARBUTTON}`)).length).toBe(1);
+        });
+
         it('should open the combo to the top when there is no space to open to the bottom', fakeAsync(() => {
             fixture = TestBed.createComponent(IgxBottomPositionSimpleComboComponent);
             fixture.detectChanges();