@openexo/design-system
Version:
OpenExO design system
120 lines • 8.35 kB
JavaScript
/**
* @fileoverview added by tsickle
* Generated from: lib/alert/alert.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Output, Input, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
/** @enum {string} */
const TypeAlertEnum = {
info: "info",
success: "success",
warning: "warning",
danger: "danger",
};
export class AlertComponent {
/**
* @param {?} sanitizer
*/
constructor(sanitizer) {
this.sanitizer = sanitizer;
/**
* Type of alert to show. By default is info type
*/
this.typeAlert = TypeAlertEnum.info;
/**
* Indicates if the alert can be closed.
*/
this.isCloseable = false;
/**
* Emit an event when the user click on a button with action
*/
this.sendAction = new EventEmitter();
this.showMessage = true;
this.typeAlertEnum = TypeAlertEnum;
}
/**
* @return {?}
*/
ngOnInit() {
if (this.isCloseable && !this.closeButtonText) {
console.error('If the button is closable you need indicates the text for the button in small resolutions');
}
this.message = (/** @type {?} */ (this.sanitizer.bypassSecurityTrustHtml(this.message)));
}
/**
* Action to hide the alert
* @return {?}
*/
onClose() {
this.showMessage = false;
}
/**
* @return {?}
*/
onAction() {
this.sendAction.emit();
}
}
AlertComponent.decorators = [
{ type: Component, args: [{
selector: 'exo-alert',
template: "<div *ngIf=\"showMessage\" class=\"alert__container {{typeAlert}}\">\n <div class=\"body-2 alert__description\">\n <ng-container [ngSwitch]=\"typeAlert\">\n <mat-icon *ngSwitchCase=\"typeAlertEnum.info\" class=\"icon_type\">info</mat-icon>\n <mat-icon *ngSwitchCase=\"typeAlertEnum.success\" class=\"icon_type\" >check_circle</mat-icon>\n <mat-icon *ngSwitchCase=\"typeAlertEnum.warning\" class=\"icon_type\">warning</mat-icon>\n <mat-icon *ngSwitchCase=\"typeAlertEnum.danger\" class=\"icon_type\">cancel</mat-icon>\n </ng-container>\n <div [innerHtml]=\"message\"></div>\n </div>\n <button class=\"alert__action-button push-left-xs\" *ngIf=\"actionButtonText\" mat-button color=\"primary\" (click)=\"onAction()\">{{actionButtonText}}</button>\n <ng-container *ngIf=\"isCloseable\">\n <mat-icon (click)=\"onClose()\" class=\"push-left-xs pointer alert__close-icon\">close</mat-icon>\n <button class=\"alert__action-button close push-left-xxs\" mat-button color=\"primary\" (click)=\"onClose()\">{{closeButtonText}}</button>\n </ng-container>\n</div>\n\n",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [""]
}] }
];
/** @nocollapse */
AlertComponent.ctorParameters = () => [
{ type: DomSanitizer }
];
AlertComponent.propDecorators = {
typeAlert: [{ type: Input }],
message: [{ type: Input }],
isCloseable: [{ type: Input }],
closeButtonText: [{ type: Input }],
actionButtonText: [{ type: Input }],
sendAction: [{ type: Output }]
};
if (false) {
/**
* Type of alert to show. By default is info type
* @type {?}
*/
AlertComponent.prototype.typeAlert;
/**
* Message to show inside of alert.
* @type {?}
*/
AlertComponent.prototype.message;
/**
* Indicates if the alert can be closed.
* @type {?}
*/
AlertComponent.prototype.isCloseable;
/**
* Text for the button Close
* @type {?}
*/
AlertComponent.prototype.closeButtonText;
/**
* Text for the button with action
* @type {?}
*/
AlertComponent.prototype.actionButtonText;
/**
* Emit an event when the user click on a button with action
* @type {?}
*/
AlertComponent.prototype.sendAction;
/** @type {?} */
AlertComponent.prototype.showMessage;
/** @type {?} */
AlertComponent.prototype.typeAlertEnum;
/**
* @type {?}
* @private
*/
AlertComponent.prototype.sanitizer;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxlcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQG9wZW5leG8vZGVzaWduLXN5c3RlbS8iLCJzb3VyY2VzIjpbImxpYi9hbGVydC9hbGVydC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLE1BQU0sRUFBRSxLQUFLLEVBQUUsWUFBWSxFQUFFLHVCQUF1QixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3hHLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQzs7QUFFekQsTUFBSyxhQUFhO0lBQ2hCLElBQUksUUFBUztJQUNiLE9BQU8sV0FBWTtJQUNuQixPQUFPLFdBQVk7SUFDbkIsTUFBTSxVQUFXO0VBQ2xCO0FBU0QsTUFBTSxPQUFPLGNBQWM7Ozs7SUFtQ3pCLFlBQ1UsU0FBdUI7UUFBdkIsY0FBUyxHQUFULFNBQVMsQ0FBYzs7OztRQS9CeEIsY0FBUyxHQUFHLGFBQWEsQ0FBQyxJQUFJLENBQUM7Ozs7UUFVL0IsZ0JBQVcsR0FBRyxLQUFLLENBQUM7Ozs7UUFlbkIsZUFBVSxHQUFzQixJQUFJLFlBQVksRUFBRSxDQUFDO1FBRTdELGdCQUFXLEdBQUcsSUFBSSxDQUFDO1FBQ25CLGtCQUFhLEdBQUcsYUFBYSxDQUFDO0lBSTFCLENBQUM7Ozs7SUFFTCxRQUFRO1FBQ04sSUFBSSxJQUFJLENBQUMsV0FBVyxJQUFJLENBQUMsSUFBSSxDQUFDLGVBQWUsRUFBRTtZQUM3QyxPQUFPLENBQUMsS0FBSyxDQUFDLDJGQUEyRixDQUFDLENBQUM7U0FDNUc7UUFDRCxJQUFJLENBQUMsT0FBTyxHQUFHLG1CQUFRLElBQUksQ0FBQyxTQUFTLENBQUMsdUJBQXVCLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxFQUFBLENBQUM7SUFDOUUsQ0FBQzs7Ozs7SUFLRCxPQUFPO1FBQ0wsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUM7SUFDM0IsQ0FBQzs7OztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3pCLENBQUM7OztZQTlERixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLFdBQVc7Z0JBQ3JCLGtsQ0FBcUM7Z0JBRXJDLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNOzthQUNoRDs7OztZQWRRLFlBQVk7Ozt3QkFxQmxCLEtBQUs7c0JBS0wsS0FBSzswQkFLTCxLQUFLOzhCQUtMLEtBQUs7K0JBS0wsS0FBSzt5QkFLTCxNQUFNOzs7Ozs7O0lBekJQLG1DQUF3Qzs7Ozs7SUFLeEMsaUNBQXlCOzs7OztJQUt6QixxQ0FBNkI7Ozs7O0lBSzdCLHlDQUFpQzs7Ozs7SUFLakMsMENBQWtDOzs7OztJQUtsQyxvQ0FBNkQ7O0lBRTdELHFDQUFtQjs7SUFDbkIsdUNBQThCOzs7OztJQUc1QixtQ0FBK0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgT3V0cHV0LCBJbnB1dCwgRXZlbnRFbWl0dGVyLCBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRG9tU2FuaXRpemVyIH0gZnJvbSAnQGFuZ3VsYXIvcGxhdGZvcm0tYnJvd3Nlcic7XG5cbmVudW0gVHlwZUFsZXJ0RW51bSB7XG4gIGluZm8gPSAnaW5mbycsXG4gIHN1Y2Nlc3MgPSAnc3VjY2VzcycsXG4gIHdhcm5pbmcgPSAnd2FybmluZycsXG4gIGRhbmdlciA9ICdkYW5nZXInLFxufVxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdleG8tYWxlcnQnLFxuICB0ZW1wbGF0ZVVybDogJy4vYWxlcnQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9hbGVydC5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5cbmV4cG9ydCBjbGFzcyBBbGVydENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgLyoqXG4gICAqIFR5cGUgb2YgYWxlcnQgdG8gc2hvdy4gQnkgZGVmYXVsdCBpcyBpbmZvIHR5cGVcbiAgICovXG4gIEBJbnB1dCgpIHR5cGVBbGVydCA9IFR5cGVBbGVydEVudW0uaW5mbztcblxuICAvKipcbiAgICogTWVzc2FnZSB0byBzaG93IGluc2lkZSBvZiBhbGVydC5cbiAgICovXG4gIEBJbnB1dCgpIG1lc3NhZ2U6IHN0cmluZztcblxuICAvKipcbiAgICogSW5kaWNhdGVzIGlmIHRoZSBhbGVydCBjYW4gYmUgY2xvc2VkLlxuICAgKi9cbiAgQElucHV0KCkgaXNDbG9zZWFibGUgPSBmYWxzZTtcblxuICAvKipcbiAgICogVGV4dCBmb3IgdGhlIGJ1dHRvbiBDbG9zZVxuICAgKi9cbiAgQElucHV0KCkgY2xvc2VCdXR0b25UZXh0OiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIFRleHQgZm9yIHRoZSBidXR0b24gd2l0aCBhY3Rpb25cbiAgICovXG4gIEBJbnB1dCgpIGFjdGlvbkJ1dHRvblRleHQ6IHN0cmluZztcblxuICAvKipcbiAgICogRW1pdCBhbiBldmVudCB3aGVuIHRoZSB1c2VyIGNsaWNrIG9uIGEgYnV0dG9uIHdpdGggYWN0aW9uXG4gICAqL1xuICBAT3V0cHV0KCkgc2VuZEFjdGlvbjogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgc2hvd01lc3NhZ2UgPSB0cnVlO1xuICB0eXBlQWxlcnRFbnVtID0gVHlwZUFsZXJ0RW51bTtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIHNhbml0aXplcjogRG9tU2FuaXRpemVyLFxuICApIHsgfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIGlmICh0aGlzLmlzQ2xvc2VhYmxlICYmICF0aGlzLmNsb3NlQnV0dG9uVGV4dCkge1xuICAgICAgY29uc29sZS5lcnJvcignSWYgdGhlIGJ1dHRvbiBpcyBjbG9zYWJsZSB5b3UgbmVlZCBpbmRpY2F0ZXMgdGhlIHRleHQgZm9yIHRoZSBidXR0b24gaW4gc21hbGwgcmVzb2x1dGlvbnMnKTtcbiAgICB9XG4gICAgdGhpcy5tZXNzYWdlID0gPHN0cmluZz50aGlzLnNhbml0aXplci5ieXBhc3NTZWN1cml0eVRydXN0SHRtbCh0aGlzLm1lc3NhZ2UpO1xuICB9XG5cbiAgLyoqXG4gICAqIEFjdGlvbiB0byBoaWRlIHRoZSBhbGVydFxuICAgKi9cbiAgb25DbG9zZSgpIHtcbiAgICB0aGlzLnNob3dNZXNzYWdlID0gZmFsc2U7XG4gIH1cblxuICBvbkFjdGlvbigpIHtcbiAgICB0aGlzLnNlbmRBY3Rpb24uZW1pdCgpO1xuICB9XG59XG4iXX0=