fundamental-ngx
Version:
SAP Fiori Fundamentals, implemented in Angular
1,365 lines (1,338 loc) • 541 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('popper.js'), require('rxjs'), require('@angular/animations'), require('focus-trap'), require('@angular/core'), require('@angular/common'), require('@angular/forms')) :
typeof define === 'function' && define.amd ? define('fundamental-ngx', ['exports', 'popper.js', 'rxjs', '@angular/animations', 'focus-trap', '@angular/core', '@angular/common', '@angular/forms'], factory) :
(factory((global['fundamental-ngx'] = {}),global.Popper,global.rxjs,global.ng.animations,global.focusTrap,global.ng.core,global.ng.common,global.ng.forms));
}(this, (function (exports,Popper,rxjs,animations,focusTrap,i0,common,forms) { 'use strict';
Popper = Popper && Popper.hasOwnProperty('default') ? Popper['default'] : Popper;
focusTrap = focusTrap && focusTrap.hasOwnProperty('default') ? focusTrap['default'] : focusTrap;
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/*
This abstract class allows the user to set their own custom styles on a Fundamental NGX directive, in addition to the
styles the library needs to add itself.
When library styles were added through the directive's host: {'[class]'} property, any styles the user added would be
overwritten. By extending this class, we instead add library styles to the user's classList rather than replace them.
*/
/**
* @hidden
* @abstract
*/
var AbstractFdNgxClass = /** @class */ (function () {
/** @hidden */
function AbstractFdNgxClass(elementRef) {
this._elementRef = elementRef;
this._setProperties();
}
/** @hidden */
/**
* @hidden
* @param {?} className
* @return {?}
*/
AbstractFdNgxClass.prototype._addClassToElement = /**
* @hidden
* @param {?} className
* @return {?}
*/
function (className) {
var _a;
(_a = (( /** @type {?} */(this._elementRef.nativeElement))).classList).add.apply(_a, __spread(className.split(' ')));
};
/** @hidden */
/**
* @hidden
* @param {?} attribute
* @param {?} value
* @return {?}
*/
AbstractFdNgxClass.prototype._addStyleToElement = /**
* @hidden
* @param {?} attribute
* @param {?} value
* @return {?}
*/
function (attribute, value) {
(( /** @type {?} */(this._elementRef.nativeElement))).style[attribute] = value;
};
/** @hidden */
/**
* @hidden
* @return {?}
*/
AbstractFdNgxClass.prototype.ngOnChanges = /**
* @hidden
* @return {?}
*/
function () {
/** @type {?} */
var classList = (( /** @type {?} */(this._elementRef.nativeElement))).classList;
while (classList.length > 0) {
classList.remove(classList.item(0));
}
if (this.class) {
this._addClassToElement(this.class);
}
this._setProperties();
};
/** @hidden */
/**
* @hidden
* @return {?}
*/
AbstractFdNgxClass.prototype.ngOnInit = /**
* @hidden
* @return {?}
*/
function () {
this._setProperties();
};
AbstractFdNgxClass.propDecorators = {
class: [{ type: i0.Input }]
};
return AbstractFdNgxClass;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Button directive, used to enhance standard HTML buttons.
*
* ```html
* <button fd-button>Button Text</button>
* ```
*/
var ButtonDirective = /** @class */ (function (_super) {
__extends(ButtonDirective, _super);
/** @hidden */
function ButtonDirective(elementRef) {
var _this = _super.call(this, elementRef) || this;
_this.elementRef = elementRef;
return _this;
}
/** @hidden */
// TODO: deprecated, leaving for backwards compatibility
/**
* @hidden
* @return {?}
*/
ButtonDirective.prototype._setProperties =
// TODO: deprecated, leaving for backwards compatibility
/**
* @hidden
* @return {?}
*/
function () {
var _this = this;
this._addClassToElement('fd-button');
if (this.compact) {
this._addClassToElement('fd-button--compact');
}
if (this.glyph) {
this._addClassToElement('sap-icon--' + this.glyph);
}
if (this.fdType) {
this._addClassToElement('fd-button--' + this.fdType);
}
if (this.options) {
if (typeof this.options === 'string') {
this._addClassToElement('fd-button--' + this.options);
}
else if (Array.isArray(this.options)) {
this.options.forEach(( /**
* @param {?} option
* @return {?}
*/function (option) {
if (typeof option === 'string') {
_this._addClassToElement('fd-button--' + option);
}
}));
}
}
};
ButtonDirective.decorators = [
{ type: i0.Directive, args: [{
// TODO to be discussed
// tslint:disable-next-line:directive-selector
selector: '[fd-button]'
},] }
];
/** @nocollapse */
ButtonDirective.ctorParameters = function () {
return [
{ type: i0.ElementRef }
];
};
ButtonDirective.propDecorators = {
compact: [{ type: i0.Input }],
glyph: [{ type: i0.Input }],
fdType: [{ type: i0.Input }],
semantic: [{ type: i0.Input }],
options: [{ type: i0.Input }],
size: [{ type: i0.Input }]
};
return ButtonDirective;
}(AbstractFdNgxClass));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ButtonModule = /** @class */ (function () {
function ButtonModule() {
}
ButtonModule.decorators = [
{ type: i0.NgModule, args: [{
imports: [common.CommonModule],
exports: [ButtonDirective],
declarations: [ButtonDirective]
},] }
];
return ButtonModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @hidden
* The base class for the icon component
* @type {?}
*/
var BASE_ICON_CLASS = 'sap-icon';
/**
* @hidden
* Prefix for icon prop classes
* @type {?}
*/
var PREFIX_ICON_CLASS = BASE_ICON_CLASS + '--';
/**
* The directive that represents an icon.
*
* ```html
* <fd-icon [glyph]="cart-approval" [size]="'l'"></fd-icon>
* ```
*/
var IconDirective = /** @class */ (function (_super) {
__extends(IconDirective, _super);
/** @hidden */
function IconDirective(elementRef) {
var _this = _super.call(this, elementRef) || this;
_this.elementRef = elementRef;
/**
* The size of the icon
* The predefined values for the input size are *xs*, *s*, *l*, and *xl*.
* *size* can accept any other string, for example *xxs*, which will be translated into class *sap-icon--xxs*.
*/
_this.size = '';
return _this;
}
/** @hidden */
/**
* @hidden
* @return {?}
*/
IconDirective.prototype._setProperties = /**
* @hidden
* @return {?}
*/
function () {
if (this.glyph) {
this._addClassToElement(PREFIX_ICON_CLASS + this.glyph);
}
if (this.size) {
this._addClassToElement(PREFIX_ICON_CLASS + this.size);
}
};
IconDirective.decorators = [
{ type: i0.Directive, args: [{
// TODO to be discussed
// tslint:disable-next-line:directive-selector
selector: 'fd-icon',
host: {
role: 'presentation'
}
},] }
];
/** @nocollapse */
IconDirective.ctorParameters = function () {
return [
{ type: i0.ElementRef }
];
};
IconDirective.propDecorators = {
glyph: [{ type: i0.Input }],
size: [{ type: i0.Input }]
};
return IconDirective;
}(AbstractFdNgxClass));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var IconModule = /** @class */ (function () {
function IconModule() {
}
IconModule.decorators = [
{ type: i0.NgModule, args: [{
imports: [common.CommonModule],
exports: [IconDirective],
declarations: [IconDirective]
},] }
];
return IconModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* The parent action bar component.
*
* Child components:
* ```html
* <fd-action-bar-actions>
* <fd-action-bar-back>
* <fd-action-bar-description>
* <fd-action-bar-header>
* ```
*/
var ActionBarComponent = /** @class */ (function () {
function ActionBarComponent() {
}
ActionBarComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'fd-action-bar',
template: "<div class=\"fd-action-bar\">\n <ng-content></ng-content>\n</div>"
}] }
];
return ActionBarComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* The action bar title component.
*
* ```html
* <fd-action-bar>
* <fd-action-bar-header>
* <h1 fd-action-bar-title>Page Title</h1>
* </fd-action-bar-header>
* <fd-action-bar>
* ```
*/
var ActionBarTitleDirective = /** @class */ (function () {
function ActionBarTitleDirective() {
/**
* @hidden
*/
this.fdActionBarTitleClass = true;
}
ActionBarTitleDirective.decorators = [
{ type: i0.Directive, args: [{
// TODO to be discussed
// tslint:disable-next-line:directive-selector
selector: '[fd-action-bar-title]'
},] }
];
ActionBarTitleDirective.propDecorators = {
fdActionBarTitleClass: [{ type: i0.HostBinding, args: ['class.fd-action-bar__title',] }]
};
return ActionBarTitleDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* The action bar description.
*
* ```html
* <fd-action-bar>
* <fd-action-bar-header>
* <fd-action-bar-description>Page Description</fd-action-bar-description>
* </fd-action-bar-header>
* <fd-action-bar>
* ```
*/
var ActionBarDescriptionComponent = /** @class */ (function () {
function ActionBarDescriptionComponent() {
}
ActionBarDescriptionComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'fd-action-bar-description',
template: "<p class=\"fd-action-bar__description\">\n <ng-content></ng-content>\n</p>"
}] }
];
return ActionBarDescriptionComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* The action bar header, which contains the action bar's title and description components.
*
* ```html
* <fd-action-bar>
* <fd-action-bar-header>
* </fd-action-bar-header>
* <fd-action-bar>
* ```
*/
var ActionBarHeaderComponent = /** @class */ (function (_super) {
__extends(ActionBarHeaderComponent, _super);
/** @hidden */
function ActionBarHeaderComponent(elementRef) {
var _this = _super.call(this, elementRef) || this;
_this.elementRef = elementRef;
return _this;
}
/** @hidden */
/**
* @hidden
* @return {?}
*/
ActionBarHeaderComponent.prototype._setProperties = /**
* @hidden
* @return {?}
*/
function () {
this._addClassToElement('fd-action-bar__header');
};
ActionBarHeaderComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'fd-action-bar-header',
template: "<ng-content></ng-content>\n<ng-content select=\"fd-action-bar-description\"></ng-content>\n"
}] }
];
/** @nocollapse */
ActionBarHeaderComponent.ctorParameters = function () {
return [
{ type: i0.ElementRef }
];
};
return ActionBarHeaderComponent;
}(AbstractFdNgxClass));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* This component holds the right-aligned action buttons for the action bar.
*
* ```html
* <fd-action-bar>
* <fd-action-bar-actions>
* <button fd-button [fdType]="'primary'">Cancel</button>
* <button fd-button [fdType]="'main'">Save</button>
* </fd-action-bar-actions>
* <fd-action-bar>
* ```
*/
var ActionBarActionsComponent = /** @class */ (function (_super) {
__extends(ActionBarActionsComponent, _super);
/** @hidden */
function ActionBarActionsComponent(elementRef) {
var _this = _super.call(this, elementRef) || this;
_this.elementRef = elementRef;
return _this;
}
/** @hidden */
/**
* @hidden
* @return {?}
*/
ActionBarActionsComponent.prototype._setProperties = /**
* @hidden
* @return {?}
*/
function () {
this._addClassToElement('fd-action-bar__actions');
};
ActionBarActionsComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'fd-action-bar-actions',
template: "<ng-content></ng-content>\n"
}] }
];
/** @nocollapse */
ActionBarActionsComponent.ctorParameters = function () {
return [
{ type: i0.ElementRef }
];
};
return ActionBarActionsComponent;
}(AbstractFdNgxClass));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* The left-aligned back button for the action bar.
*
* ```html
* <fd-action-bar>
* <fd-action-bar-back>
* <button aria-label="back" fd-button [fdType]="'light'" [compact]="true" [glyph]="'nav-back'"></button>
* </fd-action-bar-back>
* <fd-action-bar>
* ```
*/
var ActionBarBackComponent = /** @class */ (function (_super) {
__extends(ActionBarBackComponent, _super);
/** @hidden */
function ActionBarBackComponent(elementRef) {
var _this = _super.call(this, elementRef) || this;
_this.elementRef = elementRef;
return _this;
}
/** @hidden */
/**
* @hidden
* @return {?}
*/
ActionBarBackComponent.prototype._setProperties = /**
* @hidden
* @return {?}
*/
function () {
this._addClassToElement('fd-action-bar__back');
};
ActionBarBackComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'fd-action-bar-back',
template: "<ng-content></ng-content>"
}] }
];
/** @nocollapse */
ActionBarBackComponent.ctorParameters = function () {
return [
{ type: i0.ElementRef }
];
};
return ActionBarBackComponent;
}(AbstractFdNgxClass));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* The action bar mobile component. This component should wrap all other action bar components, including the <fd-action-bar>.
*
* ```html
* <fd-action-bar-mobile>
* <fd-action-bar>
* </fd-action-bar>
* <fd-action-bar-mobile>
* ```
*/
var ActionBarMobileComponent = /** @class */ (function () {
function ActionBarMobileComponent() {
}
ActionBarMobileComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'fd-action-bar-mobile',
template: "<div style=\"width:319px\">\n <ng-content></ng-content>\n</div>"
}] }
];
return ActionBarMobileComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ActionBarModule = /** @class */ (function () {
function ActionBarModule() {
}
ActionBarModule.decorators = [
{ type: i0.NgModule, args: [{
declarations: [
ActionBarComponent,
ActionBarTitleDirective,
ActionBarDescriptionComponent,
ActionBarHeaderComponent,
ActionBarActionsComponent,
ActionBarBackComponent,
ActionBarMobileComponent
],
imports: [common.CommonModule, ButtonModule, IconModule],
exports: [
ActionBarComponent,
ActionBarTitleDirective,
ActionBarDescriptionComponent,
ActionBarHeaderComponent,
ActionBarActionsComponent,
ActionBarBackComponent,
ActionBarMobileComponent
]
},] }
];
return ActionBarModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var HashService = /** @class */ (function () {
function HashService() {
}
/**
* @return {?}
*/
HashService.prototype.hash = /**
* @return {?}
*/
function () {
return 'FUI' + Math.floor(Math.random() * 1000000);
};
HashService.decorators = [
{ type: i0.Injectable }
];
return HashService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var UtilsModule = /** @class */ (function () {
function UtilsModule() {
}
UtilsModule.decorators = [
{ type: i0.NgModule, args: [{
providers: [HashService]
},] }
];
return UtilsModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Reference to an alert component generated via the AlertService.
* It can be injected into the content component in the same way a service would be injected.
* For a template, add let-alert to your ng-template tag. Now using *alert* in the template refers to this class.
*/
var /**
* Reference to an alert component generated via the AlertService.
* It can be injected into the content component in the same way a service would be injected.
* For a template, add let-alert to your ng-template tag. Now using *alert* in the template refers to this class.
*/ AlertRef = /** @class */ (function () {
function AlertRef() {
this._afterDismissed = new rxjs.Subject();
/**
* Observable that is triggered when the alert is dismissed.
*/
this.afterDismissed = this._afterDismissed.asObservable();
}
/**
* Dismisses the alert.
*
* @param reason Data passed back to the calling component through the AfterDismissed observable.
*/
/**
* Dismisses the alert.
*
* @param {?=} reason Data passed back to the calling component through the AfterDismissed observable.
* @return {?}
*/
AlertRef.prototype.dismiss = /**
* Dismisses the alert.
*
* @param {?=} reason Data passed back to the calling component through the AfterDismissed observable.
* @return {?}
*/
function (reason) {
this._afterDismissed.next(reason);
};
return AlertRef;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var alertFadeNgIf = animations.trigger('fadeAlertNgIf', [
animations.transition(':enter', [
animations.style({
opacity: 0
}),
animations.animate('250ms ease-in-out', animations.style({
opacity: 1
}))
]),
animations.transition(':leave', [
animations.style({
opacity: 1,
marginTop: '*',
paddingTop: '*',
paddingBottom: '*',
height: '*',
overflow: 'hidden'
}),
animations.animate('400ms ease-in-out', animations.style({
opacity: 0,
marginTop: 0,
paddingTop: 0,
paddingBottom: 0,
height: 0,
overflow: 'hidden'
}))
])
]);
/** @type {?} */
var alertContainerNgIf = animations.trigger('alertContainerNgIf', [
animations.transition(':leave', [
animations.style({ opacity: 1 }),
animations.animate('400ms ease-in-out', animations.style({ opacity: 0 }))
])
]);
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* The component that represents an alert. It can be only be used inline.
* If the AlertService is used, this component is auto-generated.
*/
var AlertComponent = /** @class */ (function (_super) {
__extends(AlertComponent, _super);
/** @hidden */
function AlertComponent(hasher, elRef, cdRef, componentFactoryResolver, alertRef) {
var _this = _super.call(this, elRef) || this;
_this.hasher = hasher;
_this.elRef = elRef;
_this.cdRef = cdRef;
_this.componentFactoryResolver = componentFactoryResolver;
_this.alertRef = alertRef;
/**
* Whether the alert is dismissible.
*/
_this.dismissible = true;
/**
* Duration of time *in milliseconds* that the alert will be visible. Set to -1 for indefinite.
*/
_this.duration = 10000;
/**
* Whether the alert should stay open if the mouse is hovering over it.
*/
_this.mousePersist = false;
/**
* Id of the element that labels the alert.
*/
_this.ariaLabelledBy = null;
/**
* Aria label for the alert component element.
*/
_this.ariaLabel = null;
/**
* Aria label for the dismiss button.
*/
_this.dismissLabel = 'Dismiss';
/**
* Event fired when the alert is dismissed.
*/
_this.onDismiss = new i0.EventEmitter();
/**
* @hidden
*/
_this.mouseInAlert = false;
return _this;
}
/** @hidden */
/**
* @hidden
* @return {?}
*/
AlertComponent.prototype.ngOnInit = /**
* @hidden
* @return {?}
*/
function () {
if (!this.id) {
this.id = this.hasher.hash();
}
if (this.alertRef) {
this.open();
}
this._setProperties();
};
/** @hidden */
/**
* @hidden
* @return {?}
*/
AlertComponent.prototype.ngAfterViewInit = /**
* @hidden
* @return {?}
*/
function () {
if (this.childComponentType) {
if (this.childComponentType instanceof i0.Type) {
this.loadFromComponent(this.childComponentType);
}
else if (this.childComponentType instanceof i0.TemplateRef) {
this.loadFromTemplate(this.childComponentType);
}
else {
this.loadFromString(this.childComponentType);
}
this.cdRef.detectChanges();
}
};
/**
* Dismisses the alert. If the alert was generated via the AlertService, it is removed from the DOM.
* Otherwise, it sets the display value to none. Fires the onDismiss event.
*
* @param manualDismiss Set to true to skip the dismiss animation.
* @param reason Data to pass back to the calling component. Only usable if alert is opened using the Service.
*
*/
/**
* Dismisses the alert. If the alert was generated via the AlertService, it is removed from the DOM.
* Otherwise, it sets the display value to none. Fires the onDismiss event.
*
* @param {?=} reason Data to pass back to the calling component. Only usable if alert is opened using the Service.
*
* @param {?=} manualDismiss Set to true to skip the dismiss animation.
* @return {?}
*/
AlertComponent.prototype.dismiss = /**
* Dismisses the alert. If the alert was generated via the AlertService, it is removed from the DOM.
* Otherwise, it sets the display value to none. Fires the onDismiss event.
*
* @param {?=} reason Data to pass back to the calling component. Only usable if alert is opened using the Service.
*
* @param {?=} manualDismiss Set to true to skip the dismiss animation.
* @return {?}
*/
function (reason, manualDismiss) {
if (manualDismiss === void 0) {
manualDismiss = false;
}
if (manualDismiss) {
this.elRef.nativeElement.style.display = 'none';
}
if (this.alertRef) {
this.alertRef.dismiss(reason);
}
else {
this.elRef.nativeElement.style.display = 'none';
}
this.onDismiss.emit();
};
/**
* Opens the alert.
*/
/**
* Opens the alert.
* @return {?}
*/
AlertComponent.prototype.open = /**
* Opens the alert.
* @return {?}
*/
function () {
var _this = this;
if (!this.alertRef) {
if (this.elRef.nativeElement.style.display === 'block') {
return;
}
this.elRef.nativeElement.style.display = 'block';
}
if (this.duration >= 0) {
setTimeout(( /**
* @return {?}
*/function () {
if (_this.mousePersist) {
/** @type {?} */
var wait_1 = ( /**
* @return {?}
*/function () {
if (_this.mouseInAlert === true) {
setTimeout(wait_1, 500);
}
else {
_this.dismiss();
}
});
wait_1();
}
else {
_this.dismiss();
}
}), this.duration);
}
};
/** @hidden */
/**
* @hidden
* @param {?} event
* @return {?}
*/
AlertComponent.prototype.handleAlertMouseEvent = /**
* @hidden
* @param {?} event
* @return {?}
*/
function (event) {
if (event.type === 'mouseenter') {
this.mouseInAlert = true;
}
else if (event.type === 'mouseleave') {
this.mouseInAlert = false;
}
};
/** @hidden */
/**
* @hidden
* @return {?}
*/
AlertComponent.prototype._setProperties = /**
* @hidden
* @return {?}
*/
function () {
this._addClassToElement('fd-alert');
if (this.type) {
this._addClassToElement('fd-alert--' + this.type);
}
};
/**
* @private
* @param {?} template
* @return {?}
*/
AlertComponent.prototype.loadFromTemplate = /**
* @private
* @param {?} template
* @return {?}
*/
function (template) {
/** @type {?} */
var context = {
$implicit: this.alertRef
};
this.componentRef = this.containerRef.createEmbeddedView(template, context);
};
/**
* @private
* @param {?} componentType
* @return {?}
*/
AlertComponent.prototype.loadFromComponent = /**
* @private
* @param {?} componentType
* @return {?}
*/
function (componentType) {
/** @type {?} */
var componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentType);
this.containerRef.clear();
this.componentRef = this.containerRef.createComponent(componentFactory);
};
/**
* @private
* @param {?} contentString
* @return {?}
*/
AlertComponent.prototype.loadFromString = /**
* @private
* @param {?} contentString
* @return {?}
*/
function (contentString) {
this.containerRef.clear();
this.message = contentString;
};
AlertComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'fd-alert',
template: "<button class=\"fd-alert__close\"\n *ngIf=\"dismissible\"\n (click)=\"dismiss(undefined, true)\"\n [attr.aria-controls]=\"id\"\n [attr.aria-label]=\"dismissLabel\">\n</button>\n<ng-container #container>{{message}}</ng-container>\n<ng-content></ng-content>\n",
providers: [HashService],
host: {
'[attr.aria-labelledby]': 'ariaLabelledBy',
'[attr.aria-label]': 'ariaLabel',
'[style.width]': 'width',
'role': 'alert',
'[attr.id]': 'id',
'(mouseenter)': 'handleAlertMouseEvent($event)',
'(mouseleave)': 'handleAlertMouseEvent($event)',
'[@fadeAlertNgIf]': ''
},
animations: [
alertFadeNgIf
],
styles: [":host{display:block}.fd-alert .fd-popover__body{position:fixed;top:auto;left:auto}"]
}] }
];
/** @nocollapse */
AlertComponent.ctorParameters = function () {
return [
{ type: HashService },
{ type: i0.ElementRef },
{ type: i0.ChangeDetectorRef },
{ type: i0.ComponentFactoryResolver },
{ type: AlertRef, decorators: [{ type: i0.Optional }] }
];
};
AlertComponent.propDecorators = {
containerRef: [{ type: i0.ViewChild, args: ['container', { read: i0.ViewContainerRef },] }],
dismissible: [{ type: i0.Input }],
type: [{ type: i0.Input }],
id: [{ type: i0.Input }],
duration: [{ type: i0.Input }],
mousePersist: [{ type: i0.Input }],
ariaLabelledBy: [{ type: i0.Input }],
ariaLabel: [{ type: i0.Input }],
dismissLabel: [{ type: i0.Input }],
width: [{ type: i0.Input }],
message: [{ type: i0.Input }],
onDismiss: [{ type: i0.Output }]
};
return AlertComponent;
}(AbstractFdNgxClass));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AlertContainerComponent = /** @class */ (function () {
function AlertContainerComponent() {
}
AlertContainerComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'fd-alert-container',
template: "",
host: {
'[@alertContainerNgIf]': ''
},
animations: [
alertContainerNgIf
],
styles: ["\n :host {\n position: fixed;\n display: flex;\n flex-direction: column;\n z-index: 5000;\n align-items: center;\n top: 0;\n right: 50%;\n left: 50%;\n }\n "]
}] }
];
return AlertContainerComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Configuration for opening an alert with the AlertService.
*/
var /**
* Configuration for opening an alert with the AlertService.
*/ AlertConfig = /** @class */ (function () {
function AlertConfig() {
/**
* Whether the alert is dismissible.
*/
this.dismissible = true;
/**
* Width of the alert.
*/
this.width = '33vw';
/**
* Duration of time *in milliseconds* that the alert will be visible. Set to -1 for indefinite.
*/
this.duration = 10000;
/**
* Whether the alert should stay open if the mouse is hovering over it.
*/
this.mousePersist = false;
/**
* Id of the element that labels the alert.
*/
this.ariaLabelledBy = null;
/**
* Aria label for the alert component element.
*/
this.ariaLabel = null;
}
return AlertConfig;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AlertInjector = /** @class */ (function () {
function AlertInjector(_parentInjector, _additionalTokens) {
this._parentInjector = _parentInjector;
this._additionalTokens = _additionalTokens;
}
/**
* @param {?} token
* @param {?=} notFoundValue
* @param {?=} flags
* @return {?}
*/
AlertInjector.prototype.get = /**
* @param {?} token
* @param {?=} notFoundValue
* @param {?=} flags
* @return {?}
*/
function (token, notFoundValue, flags) {
/** @type {?} */
var value = this._additionalTokens.get(token);
if (value) {
return value;
}
return this._parentInjector.get(token, notFoundValue);
};
return AlertInjector;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Service used to dynamically generate an alert as an overlay.
*/
var AlertService = /** @class */ (function () {
/** @hidden */
function AlertService(componentFactoryResolver, appRef, injector) {
this.componentFactoryResolver = componentFactoryResolver;
this.appRef = appRef;
this.injector = injector;
this.alerts = [];
}
/**
* Returns true if there are some alerts currently open. False otherwise.
*/
/**
* Returns true if there are some alerts currently open. False otherwise.
* @return {?}
*/
AlertService.prototype.hasOpenAlerts = /**
* Returns true if there are some alerts currently open. False otherwise.
* @return {?}
*/
function () {
return this.alerts && this.alerts.length > 0;
};
/**
* Opens an alert component with a content of type TemplateRef, Component Type or String.
* @param content Content of the alert component.
* @param alertConfig Configuration of the alert component.
*/
/**
* Opens an alert component with a content of type TemplateRef, Component Type or String.
* @param {?} content Content of the alert component.
* @param {?=} alertConfig Configuration of the alert component.
* @return {?}
*/
AlertService.prototype.open = /**
* Opens an alert component with a content of type TemplateRef, Component Type or String.
* @param {?} content Content of the alert component.
* @param {?=} alertConfig Configuration of the alert component.
* @return {?}
*/
function (content, alertConfig) {
var _this = this;
if (alertConfig === void 0) {
alertConfig = new AlertConfig();
}
// If empty or undefined alert array, create container
if (!this.alerts || this.alerts.length === 0) {
this.openAlertContainer();
}
// Ensure default width
if (alertConfig && !alertConfig.width) {
alertConfig.width = '33vw';
}
// Config setup
/** @type {?} */
var configMap = new WeakMap();
/** @type {?} */
var alertRef = new AlertRef();
alertRef.data = (alertConfig ? alertConfig.data : undefined);
configMap.set(AlertRef, alertRef);
// Prepare new component
/** @type {?} */
var componentFactory = this.componentFactoryResolver.resolveComponentFactory(AlertComponent);
/** @type {?} */
var componentRef = componentFactory.create(new AlertInjector(this.injector, configMap));
componentRef.location.nativeElement.style.marginTop = '10px';
this.appRef.attachView(componentRef.hostView);
// Subscription to close alert from ref
/** @type {?} */
var refSub = alertRef.afterDismissed.subscribe(( /**
* @return {?}
*/function () {
_this.destroyAlertComponent(componentRef);
refSub.unsubscribe();
}));
// Prepare component data items
/** @type {?} */
var configObj = Object.assign({}, alertConfig);
Object.keys(configObj).forEach(( /**
* @param {?} key
* @return {?}
*/function (key) {
if (key !== 'data') {
componentRef.instance[key] = configObj[key];
}
}));
componentRef.instance.childComponentType = content;
// Render new component
/** @type {?} */
var domElem = ( /** @type {?} */((( /** @type {?} */(componentRef.hostView))).rootNodes[0]));
this.alertContainerRef.location.nativeElement.appendChild(domElem);
// Log new component
this.alerts.push(componentRef);
return alertRef;
};
/**
* Dismisses all service-opened alerts.
*/
/**
* Dismisses all service-opened alerts.
* @return {?}
*/
AlertService.prototype.dismissAll = /**
* Dismisses all service-opened alerts.
* @return {?}
*/
function () {
var _this = this;
this.alerts.forEach(( /**
* @param {?} ref
* @return {?}
*/function (ref) {
_this.destroyAlertComponent(ref);
}));
};
/**
* @private
* @param {?} alert
* @return {?}
*/
AlertService.prototype.destroyAlertComponent = /**
* @private
* @param {?} alert
* @return {?}
*/
function (alert) {
this.alerts[this.alerts.indexOf(alert)] = null;
this.alerts = this.alerts.filter(( /**
* @param {?} item
* @return {?}
*/function (item) { return item !== null && item !== undefined; }));
this.appRef.detachView(alert.hostView);
alert.destroy();
if (this.alertContainerRef && (!this.alerts || this.alerts.length === 0)) {
this.destroyAlertContainer();
}
};
/**
* @private
* @return {?}
*/
AlertService.prototype.openAlertContainer = /**
* @private
* @return {?}
*/
function () {
/** @type {?} */
var factory = this.componentFactoryResolver.resolveComponentFactory(AlertContainerComponent);
/** @type {?} */
var componentRef = factory.create(this.injector);
this.appRef.attachView(componentRef.hostView);
/** @type {?} */
var domElement = ( /** @type {?} */((( /** @type {?} */(componentRef.hostView))).rootNodes[0]));
document.body.appendChild(domElement);
this.alertContainerRef = componentRef;
};
/**
* @private
* @return {?}
*/
AlertService.prototype.destroyAlertContainer = /**
* @private
* @return {?}
*/
function () {
this.appRef.detachView(this.alertContainerRef.hostView);
this.alertContainerRef.destroy();
this.alertContainerRef = undefined;
};
AlertService.decorators = [
{ type: i0.Injectable }
];
/** @nocollapse */
AlertService.ctorParameters = function () {
return [
{ type: i0.ComponentFactoryResolver },
{ type: i0.ApplicationRef },
{ type: i0.Injector }
];
};
return AlertService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AlertModule = /** @class */ (function () {
function AlertModule() {