igniteui-angular/types/igniteui-angular-banner.d.ts

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

import * as i0 from '@angular/core';
import { ElementRef, EventEmitter } from '@angular/core';
import { IgxIconComponent } from 'igniteui-angular/icon';
import { IBaseEventArgs, CancelableEventArgs, IToggleView, IBannerResourceStrings } from 'igniteui-angular/core';
import { ToggleAnimationSettings } from 'igniteui-angular/expansion-panel';

interface BannerEventArgs extends IBaseEventArgs {
    event?: Event;
}
interface BannerCancelEventArgs extends BannerEventArgs, CancelableEventArgs {
}
/**
 * **Ignite UI for Angular Banner** -
 * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/banner.html)
 *
 * The Ignite UI Banner provides a highly template-able and easy to use banner that can be shown in your application.
 *
 * Usage:
 *
 * ```html
 * <igx-banner #banner>
 *   Our privacy settings have changed.
 *  <igx-banner-actions>
 *      <button type="button" igxButton="contained">Read More</button>
 *      <button type="button" igxButton="contained">Accept and Continue</button>
 *  </igx-banner-actions>
 * </igx-banner>
 * ```
 */
declare class IgxBannerComponent implements IToggleView {
    elementRef: ElementRef<HTMLElement>;
    /**
     * @hidden
     */
    bannerIcon: IgxIconComponent;
    /**
     * Fires after the banner shows up
     * ```typescript
     * public handleOpened(event) {
     *  ...
     * }
     * ```
     * ```html
     * <igx-banner (opened)="handleOpened($event)"></igx-banner>
     * ```
     */
    opened: EventEmitter<BannerEventArgs>;
    /**
     * Fires before the banner shows up
     * ```typescript
     * public handleOpening(event) {
     *  ...
     * }
     * ```
     * ```html
     * <igx-banner (opening)="handleOpening($event)"></igx-banner>
     * ```
     */
    opening: EventEmitter<BannerCancelEventArgs>;
    /**
     * Fires after the banner hides
     * ```typescript
     * public handleClosed(event) {
     *  ...
     * }
     * ```
     * ```html
     * <igx-banner (closed)="handleClosed($event)"></igx-banner>
     * ```
     */
    closed: EventEmitter<BannerEventArgs>;
    /**
     * Fires before the banner hides
     * ```typescript
     * public handleClosing(event) {
     *  ...
     * }
     * ```
     * ```html
     * <igx-banner (closing)="handleClosing($event)"></igx-banner>
     * ```
     */
    closing: EventEmitter<BannerCancelEventArgs>;
    /** @hidden */
    get useDefaultTemplate(): boolean;
    /**
     * Set the animation settings used by the banner open/close methods
     * ```typescript
     * import { slideInLeft, slideOutRight } from 'igniteui-angular';
     * ...
     * banner.animationSettings: ToggleAnimationSettings = { openAnimation: slideInLeft, closeAnimation: slideOutRight };
     * ```
     */
    set animationSettings(settings: ToggleAnimationSettings);
    /**
     * Get the animation settings used by the banner open/close methods
     * ```typescript
     * let currentAnimations: ToggleAnimationSettings = banner.animationSettings
     * ```
     */
    get animationSettings(): ToggleAnimationSettings;
    /**
     * Gets/Sets the resource strings.
     *
     * @remarks
     * By default it uses EN resources.
     */
    set resourceStrings(value: IBannerResourceStrings);
    get resourceStrings(): IBannerResourceStrings;
    /**
     * 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;
     */
    get expanded(): boolean;
    set expanded(value: boolean);
    /**
     * Gets whether the banner is collapsed.
     *
     * ```typescript
     * const isCollapsed: boolean = banner.collapsed;
     * ```
     */
    get collapsed(): boolean;
    /**
     * Returns the native element of the banner component
     * ```typescript
     *  const myBannerElement: HTMLElement = banner.element;
     * ```
     */
    get element(): HTMLElement;
    cssClass: string;
    /**
     * @hidden
     */
    get displayStyle(): string;
    private _expansionPanel;
    private _bannerActionTemplate;
    private _expanded;
    private _shouldFireEvent;
    private _bannerEvent;
    private _animationSettings;
    private _resourceStrings;
    /**
     * Opens the banner
     *
     * ```typescript
     *  myBanner.open();
     * ```
     *
     * ```html
     * <igx-banner #banner>
     * ...
     * </igx-banner>
     * <button type="button" (click)="banner.open()">Open Banner</button>
     * ```
     */
    open(event?: Event): void;
    /**
     * Closes the banner
     *
     * ```typescript
     *  myBanner.close();
     * ```
     *
     * ```html
     * <igx-banner #banner>
     * ...
     * </igx-banner>
     * <button type="button" (click)="banner.close()">Close Banner</button>
     * ```
     */
    close(event?: Event): void;
    /**
     * Toggles the banner
     *
     * ```typescript
     *  myBanner.toggle();
     * ```
     *
     * ```html
     * <igx-banner #banner>
     * ...
     * </igx-banner>
     * <button type="button" (click)="banner.toggle()">Toggle Banner</button>
     * ```
     */
    toggle(event?: Event): void;
    /** @hidden */
    onExpansionPanelOpen(): void;
    /** @hidden */
    onExpansionPanelClose(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<IgxBannerComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<IgxBannerComponent, "igx-banner", never, { "animationSettings": { "alias": "animationSettings"; "required": false; }; "resourceStrings": { "alias": "resourceStrings"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; }, { "opened": "opened"; "opening": "opening"; "closed": "closed"; "closing": "closing"; }, ["bannerIcon", "_bannerActionTemplate"], ["igx-icon", "*", "igx-banner-actions"], true, never>;
}

declare class IgxBannerActionsDirective {
    static ɵfac: i0.ɵɵFactoryDeclaration<IgxBannerActionsDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<IgxBannerActionsDirective, "igx-banner-actions", never, {}, {}, never, never, true, never>;
}

declare const IGX_BANNER_DIRECTIVES: readonly [typeof IgxBannerComponent, typeof IgxBannerActionsDirective];

/**
 * @hidden
 * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
 */
declare class IgxBannerModule {
    static ɵfac: i0.ɵɵFactoryDeclaration<IgxBannerModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<IgxBannerModule, never, [typeof IgxBannerComponent, typeof IgxBannerActionsDirective], [typeof IgxBannerComponent, typeof IgxBannerActionsDirective]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<IgxBannerModule>;
}

export { IGX_BANNER_DIRECTIVES, IgxBannerActionsDirective, IgxBannerComponent, IgxBannerModule };
export type { BannerCancelEventArgs, BannerEventArgs };