igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
348 lines (341 loc) • 15.2 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, inject, ElementRef, EventEmitter, ContentChild, ViewChild, HostBinding, Input, Output, Component, NgModule } from '@angular/core';
import { IgxIconComponent } from 'igniteui-angular/icon';
import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
import { getCurrentResourceStrings, BannerResourceStringsEN } from 'igniteui-angular/core';
import { IgxExpansionPanelComponent, IgxExpansionPanelBodyComponent } from 'igniteui-angular/expansion-panel';
class IgxBannerActionsDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBannerActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxBannerActionsDirective, isStandalone: true, selector: "igx-banner-actions", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBannerActionsDirective, decorators: [{
type: Directive,
args: [{
selector: 'igx-banner-actions',
standalone: true
}]
}] });
/**
* **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>
* ```
*/
class IgxBannerComponent {
constructor() {
this.elementRef = inject(ElementRef);
/**
* Fires after the banner shows up
* ```typescript
* public handleOpened(event) {
* ...
* }
* ```
* ```html
* <igx-banner (opened)="handleOpened($event)"></igx-banner>
* ```
*/
this.opened = new EventEmitter();
/**
* Fires before the banner shows up
* ```typescript
* public handleOpening(event) {
* ...
* }
* ```
* ```html
* <igx-banner (opening)="handleOpening($event)"></igx-banner>
* ```
*/
this.opening = new EventEmitter();
/**
* Fires after the banner hides
* ```typescript
* public handleClosed(event) {
* ...
* }
* ```
* ```html
* <igx-banner (closed)="handleClosed($event)"></igx-banner>
* ```
*/
this.closed = new EventEmitter();
/**
* Fires before the banner hides
* ```typescript
* public handleClosing(event) {
* ...
* }
* ```
* ```html
* <igx-banner (closing)="handleClosing($event)"></igx-banner>
* ```
*/
this.closing = new EventEmitter();
this.cssClass = 'igx-banner-host';
this._expanded = false;
this._shouldFireEvent = false;
this._resourceStrings = getCurrentResourceStrings(BannerResourceStringsEN);
}
/** @hidden */
get useDefaultTemplate() {
return !this._bannerActionTemplate;
}
/**
* 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) {
this._animationSettings = settings;
}
/**
* Get the animation settings used by the banner open/close methods
* ```typescript
* let currentAnimations: ToggleAnimationSettings = banner.animationSettings
* ```
*/
get animationSettings() {
return this._animationSettings ? this._animationSettings : this._expansionPanel.animationSettings;
}
/**
* Gets/Sets the resource strings.
*
* @remarks
* By default it uses EN resources.
*/
set resourceStrings(value) {
this._resourceStrings = Object.assign({}, this._resourceStrings, value);
}
get resourceStrings() {
return this._resourceStrings;
}
/**
* 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() {
return this._expanded;
}
set expanded(value) {
if (value === this._expanded) {
return;
}
this._expanded = value;
this._shouldFireEvent = true;
if (value) {
this._expansionPanel.open();
}
else {
this._expansionPanel.close();
}
}
/**
* Gets whether the banner is collapsed.
*
* ```typescript
* const isCollapsed: boolean = banner.collapsed;
* ```
*/
get collapsed() {
return this._expansionPanel.collapsed;
}
/**
* Returns the native element of the banner component
* ```typescript
* const myBannerElement: HTMLElement = banner.element;
* ```
*/
get element() {
return this.elementRef.nativeElement;
}
/**
* @hidden
*/
get displayStyle() {
return this.collapsed ? '' : 'block';
}
/**
* Opens the banner
*
* ```typescript
* myBanner.open();
* ```
*
* ```html
* <igx-banner #banner>
* ...
* </igx-banner>
* <button type="button" (click)="banner.open()">Open Banner</button>
* ```
*/
open(event) {
this._bannerEvent = { owner: this, event };
const openingArgs = {
owner: this,
event,
cancel: false
};
this.opening.emit(openingArgs);
if (openingArgs.cancel) {
return;
}
this._expansionPanel.open(event);
this._expanded = true;
this._shouldFireEvent = false;
}
/**
* Closes the banner
*
* ```typescript
* myBanner.close();
* ```
*
* ```html
* <igx-banner #banner>
* ...
* </igx-banner>
* <button type="button" (click)="banner.close()">Close Banner</button>
* ```
*/
close(event) {
this._bannerEvent = { owner: this, event };
const closingArgs = {
owner: this,
event,
cancel: false
};
this.closing.emit(closingArgs);
if (closingArgs.cancel) {
return;
}
this._expansionPanel.close(event);
this._expanded = false;
this._shouldFireEvent = false;
}
/**
* Toggles the banner
*
* ```typescript
* myBanner.toggle();
* ```
*
* ```html
* <igx-banner #banner>
* ...
* </igx-banner>
* <button type="button" (click)="banner.toggle()">Toggle Banner</button>
* ```
*/
toggle(event) {
if (this.collapsed) {
this.open(event);
}
else {
this.close(event);
}
}
/** @hidden */
onExpansionPanelOpen() {
if (this._shouldFireEvent) {
return;
}
this.opened.emit(this._bannerEvent);
}
/** @hidden */
onExpansionPanelClose() {
if (this._shouldFireEvent) {
return;
}
this.closed.emit(this._bannerEvent);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxBannerComponent, isStandalone: true, selector: "igx-banner", inputs: { animationSettings: "animationSettings", resourceStrings: "resourceStrings", expanded: "expanded" }, outputs: { opened: "opened", opening: "opening", closed: "closed", closing: "closing" }, host: { properties: { "class": "this.cssClass", "style.display": "this.displayStyle" } }, queries: [{ propertyName: "bannerIcon", first: true, predicate: IgxIconComponent, descendants: true }, { propertyName: "_bannerActionTemplate", first: true, predicate: IgxBannerActionsDirective, descendants: true }], viewQueries: [{ propertyName: "_expansionPanel", first: true, predicate: ["expansionPanel"], descendants: true, static: true }], ngImport: i0, template: "<igx-expansion-panel #expansionPanel [animationSettings]=\"animationSettings\" (contentCollapsed)=\"onExpansionPanelClose()\" (contentExpanded)=\"onExpansionPanelOpen()\"\n [collapsed]=\"collapsed\" role=\"status\" aria-live=\"polite\" [attr.aria-hidden]=\"collapsed\">\n <igx-expansion-panel-body>\n <div class=\"igx-banner\">\n <div class=\"igx-banner__message\">\n @if (bannerIcon) {\n <div class=\"igx-banner__illustration\">\n <ng-content select=\"igx-icon\"></ng-content>\n </div>\n }\n <span class=\"igx-banner__text\">\n <ng-content></ng-content>\n </span>\n </div>\n <div class=\"igx-banner__actions\">\n @if (useDefaultTemplate) {\n <button type=\"button\" igxButton=\"flat\" igxRipple (click)=\"close()\">\n {{ resourceStrings.igx_banner_button_dismiss }}\n </button>\n } @else {\n <ng-content select=\"igx-banner-actions\"></ng-content>\n }\n </div>\n </div>\n </igx-expansion-panel-body>\n</igx-expansion-panel>\n", dependencies: [{ kind: "component", type: IgxExpansionPanelComponent, selector: "igx-expansion-panel", inputs: ["animationSettings", "id", "collapsed"], outputs: ["collapsedChange", "contentCollapsing", "contentCollapsed", "contentExpanding", "contentExpanded"] }, { kind: "component", type: IgxExpansionPanelBodyComponent, selector: "igx-expansion-panel-body", inputs: ["role", "label", "labelledBy"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBannerComponent, decorators: [{
type: Component,
args: [{ selector: 'igx-banner', imports: [IgxExpansionPanelComponent, IgxExpansionPanelBodyComponent, IgxButtonDirective, IgxRippleDirective], template: "<igx-expansion-panel #expansionPanel [animationSettings]=\"animationSettings\" (contentCollapsed)=\"onExpansionPanelClose()\" (contentExpanded)=\"onExpansionPanelOpen()\"\n [collapsed]=\"collapsed\" role=\"status\" aria-live=\"polite\" [attr.aria-hidden]=\"collapsed\">\n <igx-expansion-panel-body>\n <div class=\"igx-banner\">\n <div class=\"igx-banner__message\">\n @if (bannerIcon) {\n <div class=\"igx-banner__illustration\">\n <ng-content select=\"igx-icon\"></ng-content>\n </div>\n }\n <span class=\"igx-banner__text\">\n <ng-content></ng-content>\n </span>\n </div>\n <div class=\"igx-banner__actions\">\n @if (useDefaultTemplate) {\n <button type=\"button\" igxButton=\"flat\" igxRipple (click)=\"close()\">\n {{ resourceStrings.igx_banner_button_dismiss }}\n </button>\n } @else {\n <ng-content select=\"igx-banner-actions\"></ng-content>\n }\n </div>\n </div>\n </igx-expansion-panel-body>\n</igx-expansion-panel>\n" }]
}], propDecorators: { bannerIcon: [{
type: ContentChild,
args: [IgxIconComponent]
}], opened: [{
type: Output
}], opening: [{
type: Output
}], closed: [{
type: Output
}], closing: [{
type: Output
}], animationSettings: [{
type: Input
}], resourceStrings: [{
type: Input
}], expanded: [{
type: Input
}], cssClass: [{
type: HostBinding,
args: ['class']
}], displayStyle: [{
type: HostBinding,
args: ['style.display']
}], _expansionPanel: [{
type: ViewChild,
args: ['expansionPanel', { static: true }]
}], _bannerActionTemplate: [{
type: ContentChild,
args: [IgxBannerActionsDirective]
}] } });
/* Banner directives collection for ease-of-use import in standalone components scenario */
const IGX_BANNER_DIRECTIVES = [
IgxBannerComponent,
IgxBannerActionsDirective
];
/**
* @hidden
* IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
*/
class IgxBannerModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBannerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxBannerModule, imports: [IgxBannerComponent, IgxBannerActionsDirective], exports: [IgxBannerComponent, IgxBannerActionsDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBannerModule, imports: [IgxBannerComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBannerModule, decorators: [{
type: NgModule,
args: [{
imports: [...IGX_BANNER_DIRECTIVES],
exports: [...IGX_BANNER_DIRECTIVES]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { IGX_BANNER_DIRECTIVES, IgxBannerActionsDirective, IgxBannerComponent, IgxBannerModule };
//# sourceMappingURL=igniteui-angular-banner.mjs.map