fundamental-ngx
Version:
SAP Fiori Fundamentals, implemented in Angular
1,579 lines (1,547 loc) • 468 kB
JavaScript
import Popper from 'popper.js';
import { Subject, fromEvent } from 'rxjs';
import { animate, style, transition, trigger } from '@angular/animations';
import focusTrap from 'focus-trap';
import { __extends, __spread } from 'tslib';
import { Input, Directive, ElementRef, NgModule, Component, HostBinding, Injectable, ChangeDetectorRef, ViewChild, ComponentFactoryResolver, Type, ViewContainerRef, TemplateRef, Optional, Output, EventEmitter, ApplicationRef, Injector, Inject, LOCALE_ID, HostListener, ContentChild, Pipe, forwardRef, ContentChildren, ViewChildren, Renderer2, defineInjectable, inject } from '@angular/core';
import { CommonModule, FormStyle, getLocaleDayNames, getLocaleMonthNames, TranslationWidth } from '@angular/common';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
/**
* @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: 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: Directive, args: [{
// TODO to be discussed
// tslint:disable-next-line:directive-selector
selector: '[fd-button]'
},] }
];
/** @nocollapse */
ButtonDirective.ctorParameters = function () { return [
{ type: ElementRef }
]; };
ButtonDirective.propDecorators = {
compact: [{ type: Input }],
glyph: [{ type: Input }],
fdType: [{ type: Input }],
semantic: [{ type: Input }],
options: [{ type: Input }],
size: [{ type: 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: NgModule, args: [{
imports: [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: Directive, args: [{
// TODO to be discussed
// tslint:disable-next-line:directive-selector
selector: 'fd-icon',
host: {
role: 'presentation'
}
},] }
];
/** @nocollapse */
IconDirective.ctorParameters = function () { return [
{ type: ElementRef }
]; };
IconDirective.propDecorators = {
glyph: [{ type: Input }],
size: [{ type: 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: NgModule, args: [{
imports: [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: 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: Directive, args: [{
// TODO to be discussed
// tslint:disable-next-line:directive-selector
selector: '[fd-action-bar-title]'
},] }
];
ActionBarTitleDirective.propDecorators = {
fdActionBarTitleClass: [{ type: 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: 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: 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: 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: Component, args: [{
selector: 'fd-action-bar-actions',
template: "<ng-content></ng-content>\n"
}] }
];
/** @nocollapse */
ActionBarActionsComponent.ctorParameters = function () { return [
{ type: 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: Component, args: [{
selector: 'fd-action-bar-back',
template: "<ng-content></ng-content>"
}] }
];
/** @nocollapse */
ActionBarBackComponent.ctorParameters = function () { return [
{ type: 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: 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: NgModule, args: [{
declarations: [
ActionBarComponent,
ActionBarTitleDirective,
ActionBarDescriptionComponent,
ActionBarHeaderComponent,
ActionBarActionsComponent,
ActionBarBackComponent,
ActionBarMobileComponent
],
imports: [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: 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: 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 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 = trigger('fadeAlertNgIf', [
transition(':enter', [
style({
opacity: 0
}),
animate('250ms ease-in-out', style({
opacity: 1
}))
]),
transition(':leave', [
style({
opacity: 1,
marginTop: '*',
paddingTop: '*',
paddingBottom: '*',
height: '*',
overflow: 'hidden'
}),
animate('400ms ease-in-out', style({
opacity: 0,
marginTop: 0,
paddingTop: 0,
paddingBottom: 0,
height: 0,
overflow: 'hidden'
}))
])
]);
/** @type {?} */
var alertContainerNgIf = trigger('alertContainerNgIf', [
transition(':leave', [
style({ opacity: 1 }),
animate('400ms ease-in-out', 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 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 Type) {
this.loadFromComponent(this.childComponentType);
}
else if (this.childComponentType instanceof 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: 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: ElementRef },
{ type: ChangeDetectorRef },
{ type: ComponentFactoryResolver },
{ type: AlertRef, decorators: [{ type: Optional }] }
]; };
AlertComponent.propDecorators = {
containerRef: [{ type: ViewChild, args: ['container', { read: ViewContainerRef },] }],
dismissible: [{ type: Input }],
type: [{ type: Input }],
id: [{ type: Input }],
duration: [{ type: Input }],
mousePersist: [{ type: Input }],
ariaLabelledBy: [{ type: Input }],
ariaLabel: [{ type: Input }],
dismissLabel: [{ type: Input }],
width: [{ type: Input }],
message: [{ type: Input }],
onDismiss: [{ type: 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: 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: Injectable }
];
/** @nocollapse */
AlertService.ctorParameters = function () { return [
{ type: ComponentFactoryResolver },
{ type: ApplicationRef },
{ type: Injector }
]; };
return AlertService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AlertModule = /** @class */ (function () {
function AlertModule() {
}
AlertModule.decorators = [
{ type: NgModule, args: [{
declarations: [AlertComponent, AlertContainerComponent],
imports: [CommonModule, IconModule, UtilsModule],
exports: [AlertComponent, AlertContainerComponent],
entryComponents: [AlertContainerComponent, AlertComponent],
providers: [AlertService]
},] }
];
return AlertModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Badge component, used to indicate status.
* Colors, generally in combination with text, are used to easily highlight the state of an object.
*/
var BadgeComponent = /** @class */ (function (_super) {
__extends(BadgeComponent, _super);
/** @hidden */
function BadgeComponent(elementRef) {
return _super.call(this, elementRef) || this;
}
/** @hidden */
/**
* @hidden
* @return {?}
*/
BadgeComponent.prototype._setProperties = /**
* @hidden
* @return {?}
*/
function () {
this._addClassToElement('fd-badge');
if (this.status) {
this._addClassToElement('fd-badge--' + this.status);
}
if (this.modifier) {
this._addClassToElement('fd-badge--' + this.modifier);
}
};
BadgeComponent.decorators = [
{ type: Component, args: [{
selector: 'fd-badge',
template: "<span><ng-content></ng-content></span>\n"
}] }
];
/** @nocollapse */
BadgeComponent.ctorParameters = function () { return [
{ type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] }
]; };
BadgeComponent.propDecorators = {
status: [{ type: Input }],
modifier: [{ type: Input }]
};
return BadgeComponent;
}(AbstractFdNgxClass));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Badge component, used to indicate status.
* Colors, generally in combination with text, are used to easily highlight the state of an object.
*/
var LabelComponent = /** @class */ (function (_super) {
__extends(LabelComponent, _super);
/** @hidden */
function LabelComponent(elementRef) {
var _this = _super.call(this, elementRef) || this;
/**
* Color coded status for the label. Options are 'success', 'warning', and 'error'. Leave empty for default label.
*/
_this.status = '';
/**
* When set to 'true', the type of the label is 'Status Indicator Label'. Leave empty for default type.
*/
_this.isStatusLabel = false;
/**
* Built-in status icon. Options include 'available', 'away', 'busy', and 'offline'.
*/
_this.statusIcon = '';
/**
* The icon used with the status indicator. See the icon page for the list of icons.
*/
_this.icon = '';
return _this;
}
/** @hidden */
/**
* @hidden
* @return {?}
*/
LabelComponent.prototype._setProperties = /**
* @hidden
* @return {?}
*/
function () {
if (this.isStatusLabel) {
this._addClassToElement('fd-status-label');
if (this.status) {
this._addClassToElement('fd-status-label--' + this.status);
}
if (this.statusIcon) {
this._addClassToElement('fd-status-label--' + this.statusIcon);
}
if (this.icon) {
this._addClassToElement('sap-icon--' + this.icon);
}
}
else {
this._addClassToElement('fd-label');
if (this.status) {
this._addClassToElement('fd-label--' + this.status);
}
}
};
LabelComponent.decorators = [
{ type: Component, args: [{
selector: 'fd-label',
template: "<span><ng-content></ng-content></span>\n"
}] }
];
/** @nocollapse */
LabelComponent.ctorParameters = function () { return [
{ type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] }
]; };
LabelComponent.propDecorators = {
status: [{ type: Input }],
isStatusLabel: [{ type: Input }],
statusIcon: [{ type: Input }],
icon: [{ type: Input }]
};
return LabelComponent;
}(AbstractFdNgxClass));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var BadgeLabelModule = /** @class */ (function () {
function BadgeLabelModule() {
}
BadgeLabelModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
exports: [BadgeComponent, LabelComponent],
declarations: [BadgeComponent, LabelComponent]
},] }
];
return BadgeLabelModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Breadcrumb parent wrapper directive. Must have breadcrumb item child directives.
*
* ```html
* <fd-breadcrumb>
* <fd-breadcrumb-item>
* <a fd-breadcrumb-link [routerLink]="'#'">Breadcrumb Link</a>
* </fd-breadcrumb-item>
* </fd-breadcrumb>
* ```
*/
var BreadcrumbDirective = /** @class */ (function () {
function BreadcrumbDirective() {
}
BreadcrumbDirective.decorators = [
{ type: Directive, args: [{
// TODO to be discussed
// tslint:disable-next-line:directive-selector
selector: 'fd-breadcrumb',
host: {
class: 'fd-breadcrumb'
}
},] }
];
return BreadcrumbDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Breadcrumb item directive. Must have child breadcrumb link directives.
*
* ```html
* <fd-breadcrumb-item>
* <a fd-breadcrumb-link [routerLink]="'#'">Breadcrumb Link</a>
* </fd-breadcrumb-item>
* ```
*/
var BreadcrumbItemDirective = /** @class */ (function () {
function BreadcrumbItemDirective() {
}
BreadcrumbItemDirective.decorators = [
{ type: Directive, args: [{
// TODO to be discussed
// tslint:disable-next-line:directive-selector
selector: 'fd-breadcrumb-item',
host: {
class: 'fd-breadcrumb__item'
}
},] }
];
return BreadcrumbItemDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Breadcrumb link directive. Use Angular router options (such as 'routerLink' and 'queryParams') with this directive.
*
* ```html
* <a fd-breadcrumb-link [routerLink]="'some-url'" [queryParams]="'params'">Breadcrumb Link</a>
* ```
*/
var BreadcrumbLinkDirective = /** @class */ (function () {
function BreadcrumbLinkDirective() {
}
BreadcrumbLinkDirective.decorators = [
{ type: Directive, args: [{
// TODO to be discussed
// tslint:disable-next-line:directive-selector
selector: '[fd-breadcrumb-link]',
host: {
class: 'fd-breadcrumb__link'
}
},] }
];
return BreadcrumbLinkDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var BreadcrumbModule = /** @class */ (function () {
function BreadcrumbModule() {
}
BreadcrumbModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
exports: [BreadcrumbDirective, BreadcrumbItemDirective, BreadcrumbLinkDirective],
declarations: [BreadcrumbDirective, BreadcrumbItemDirective, BreadcrumbLinkDirective]
},] }
];
return BreadcrumbModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Container for grouped buttons.
*
* ```html
* <fd-button-group>
* <button fd-button-grouped>Button</button>
* </fd-button-group>
* ```
*/
var ButtonGroupComponent = /** @class */ (function () {
function ButtonGroupComponent() {
/**
* @hidden
*/