feat(banner): add expanded input property to the banner

CHANGELOG.md

@@ -1,6 +1,10 @@
 # Ignite UI for Angular Change Log
 
 All notable changes for each version of this project will be documented in this file.
+## 19.1.0
+### New Features
+- `IgxBanner`
+    - Introduced a new `expanded` input property, enabling dynamic control over the banner's state. This property allows the banner to be programmatically set as expanded (visible) or collapsed (hidden) both initially and during runtime.
 
 ## 19.0.0
 ### General
@@ -50,6 +54,7 @@ All notable changes for each version of this project will be documented in this
 - `IgxGridState`
     -  When possible the state directive nows reuses the column that already exists on the grid when restoring the state, instead of creating new column instances every time. This removes the need to set any complex objects manually back on the column on `columnInit`. The only instance where this is still necessary is when the column (or its children in case of column groups) have no `field` property so there's no way to uniquely identify the matching column.
     - Added support for persisting Multi-Row Layout.
+
 ### Themes
 - **Breaking Change** `Palettes`
     - All palette colors have been migrated to the [CSS relative colors syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors). This means that color consumed as CSS variables no longer need to be wrapped in an `hsl` function. 

projects/igniteui-angular/src/lib/banner/banner.component.spec.ts

@@ -33,7 +33,8 @@ describe('igxBanner', () => {
                 IgxBannerOneButtonComponent,
                 IgxBannerSampleComponent,
                 IgxBannerCustomTemplateComponent,
-                SimpleBannerEventsComponent
+                SimpleBannerEventsComponent,
+                IgxBannerInitializedOpenComponent
             ]
         }).compileComponents();
     }));
@@ -395,6 +396,36 @@ describe('igxBanner', () => {
             expect(banner.closing.emit).toHaveBeenCalledTimes(2);
             expect(banner.closed.emit).toHaveBeenCalledTimes(1);
         }));
+
+        it('Should toggle banner state when expanded property changes', fakeAsync(() => {
+            const fixture = TestBed.createComponent(IgxBannerInitializedOpenComponent);
+            fixture.detectChanges();
+            const banner = fixture.componentInstance.banner;
+
+            banner.expanded = false;
+            tick();
+            fixture.detectChanges();
+
+            expect(banner.expanded).toBeFalse();
+
+            banner.expanded = true;
+            tick();
+            fixture.detectChanges();
+            expect(banner.expanded).toBeTrue();
+            expect(banner.elementRef.nativeElement.style.display).toEqual('block');
+
+            banner.expanded = false;
+            tick();
+            fixture.detectChanges();
+            expect(banner.expanded).toBeFalse();
+            expect(banner.elementRef.nativeElement.style.display).toEqual('');
+
+            banner.expanded = true;
+            tick();
+            fixture.detectChanges();
+            expect(banner.expanded).toBeTrue();
+            expect(banner.elementRef.nativeElement.style.display).toEqual('block');
+        }));
     });
 
     describe('Rendering tests: ', () => {
@@ -485,6 +516,16 @@ describe('igxBanner', () => {
             expect(panel.attributes.getNamedItem('role').nodeValue).toEqual('status');
             expect(panel.attributes.getNamedItem('aria-live').nodeValue).toEqual('polite');
         }));
+
+        it('Should initialize banner as open when expanded is set to true', fakeAsync(() => {
+            const fixture = TestBed.createComponent(IgxBannerInitializedOpenComponent);
+            fixture.detectChanges();
+            const banner = fixture.componentInstance.banner;
+
+            expect(banner.expanded).toBeTrue();
+            expect(banner.elementRef.nativeElement.style.display).toEqual('block');
+            expect(banner.elementRef.nativeElement.querySelector('.' + CSS_CLASS_BANNER)).not.toBeNull();
+        }));
     });
 
     const getBaseClassElements = <T>(fixture: ComponentFixture<T>) => {
@@ -601,3 +642,19 @@ export class SimpleBannerEventsComponent {
         event.cancel = this.cancelFlag;
     }
 }
+
+@Component({
+    template: `
+        <div>
+            <igx-banner [expanded]="true">
+                Banner initialized as open.
+            </igx-banner>
+        </div>
+    `,
+    standalone: true,
+    imports: [IgxBannerComponent]
+})
+export class IgxBannerInitializedOpenComponent {
+    @ViewChild(IgxBannerComponent, { static: true })
+    public banner: IgxBannerComponent;
+}

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

@@ -157,14 +157,52 @@ export class IgxBannerComponent implements IToggleView {
     public get resourceStrings(): IBannerResourceStrings {
         return this._resourceStrings;
     }
+
     /**
-     * Gets whether banner is collapsed
+     * Gets/Sets whether the banner is expanded (visible) or collapsed (hidden).
+     * Defaults to `false`.
+     * Setting to `true` opens the banner, while `false` closes it.
+     *
+     * @example
+     * // Expand the banner
+     * banner.expanded = true;
+     *
+     * @example
+     * // Collapse the banner
+     * banner.expanded = false;
+     *
+     * @example
+     * // Check if the banner is expanded
+     * const isExpanded = banner.expanded;
+     */
+    @Input()
+    public get expanded(): boolean {
+        return this._expanded;
+    }
+
+    public set expanded(value: boolean) {
+        if (value === this._expanded) {
+            return;
+        }
+
+        this._expanded = value;
+        this._isProgrammaticExpanded = true;
+
+        if (value) {
+            this._expansionPanel.open();
+        } else {
+            this._expansionPanel.close();
+        }
+    }
+
+    /**
+     * Gets whether the banner is collapsed.
      *
      * ```typescript
      * const isCollapsed: boolean = banner.collapsed;
      * ```
-     */
-    public get collapsed() {
+    */
+    public get collapsed(): boolean {
         return this._expansionPanel.collapsed;
     }
 
@@ -195,6 +233,8 @@ export class IgxBannerComponent implements IToggleView {
     @ContentChild(IgxBannerActionsDirective)
     private _bannerActionTemplate: IgxBannerActionsDirective;
 
+    private _expanded: boolean = false;
+    private _isProgrammaticExpanded = false;
     private _bannerEvent: BannerEventArgs;
     private _animationSettings: ToggleAnimationSettings;
     private _resourceStrings = getCurrentResourceStrings(BannerResourceStringsEN);
@@ -216,7 +256,7 @@ export class IgxBannerComponent implements IToggleView {
      * ```
      */
     public open(event?: Event) {
-        this._bannerEvent = { owner: this, event};
+        this._bannerEvent = { owner: this, event };
         const openingArgs: BannerCancelEventArgs = {
             owner: this,
             event,
@@ -227,6 +267,8 @@ export class IgxBannerComponent implements IToggleView {
             return;
         }
         this._expansionPanel.open(event);
+        this._expanded = true;
+        this._isProgrammaticExpanded = false;
     }
 
     /**
@@ -255,6 +297,8 @@ export class IgxBannerComponent implements IToggleView {
             return;
         }
         this._expansionPanel.close(event);
+        this._expanded = false;
+        this._isProgrammaticExpanded = false;
     }
 
     /**
@@ -281,11 +325,17 @@ export class IgxBannerComponent implements IToggleView {
 
     /** @hidden */
     public onExpansionPanelOpen() {
+        if (this._isProgrammaticExpanded) {
+            return;
+        }
         this.opened.emit(this._bannerEvent);
     }
 
     /** @hidden */
     public onExpansionPanelClose() {
+        if (this._isProgrammaticExpanded) {
+            return;
+        }
         this.closed.emit(this._bannerEvent);
     }
 }