@blackbaud/skyux
Version:
SKY UX built on Angular 2
39 lines • 3.26 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
var ALERT_TYPE_DEFAULT = 'warning';
var SkyAlertComponent = (function () {
function SkyAlertComponent() {
this.closedChange = new EventEmitter();
}
Object.defineProperty(SkyAlertComponent.prototype, "alertType", {
get: function () {
return this._alertType || ALERT_TYPE_DEFAULT;
},
set: function (value) {
this._alertType = value;
},
enumerable: true,
configurable: true
});
SkyAlertComponent.prototype.close = function () {
this.closed = true;
this.closedChange.emit(true);
};
return SkyAlertComponent;
}());
export { SkyAlertComponent };
SkyAlertComponent.decorators = [
{ type: Component, args: [{
selector: 'sky-alert',
styles: [".sky-alert{padding:10px;margin-bottom:20px;border-left:solid 30px;border-radius:3px;color:#282b31;display:flex;flex-direction:row;align-items:center}.sky-alert /deep/ .sky-alert-content a{color:rgba(40,43,49,0.8);text-decoration:underline}.sky-alert /deep/ .sky-alert-content a:hover{color:#282b31}.sky-alert button{margin-left:auto;width:32px;height:32px}.sky-alert-info{background-color:#81d4f7;border-color:#00b4f1}.sky-alert-info::before{content:\"\\f05a\";font-family:FontAwesome;margin-left:-31px;margin-right:20px;color:#fff}.sky-alert-success{background-color:#b7da9b;border-color:#71bf43}.sky-alert-success::before{content:\"\\f00c\";font-family:FontAwesome;margin-left:-32px;margin-right:19px;color:#fff}.sky-alert-warning{background-color:#ffd597;border-color:#fbb034}.sky-alert-warning::before{content:\"\\f071\";font-family:FontAwesome;margin-left:-32px;margin-right:19px;color:#fff}.sky-alert-danger{background-color:#f7a08f;border-color:#ef4044}.sky-alert-danger::before{content:\"\\f071\";font-family:FontAwesome;margin-left:-32px;margin-right:19px;color:#fff}.sky-alert-close{cursor:pointer;font-weight:bold;line-height:1;margin:0;padding:0;color:#282b31;opacity:0.8;border:none;background-color:transparent;display:none}.sky-alert-close:hover{opacity:1.0}.sky-alert-closeable .sky-alert-close{display:block}\n"],
template: "<div\n class=\"sky-alert\"\n [ngClass]=\"{\n 'sky-alert-info': alertType === 'info',\n 'sky-alert-success': alertType === 'success',\n 'sky-alert-warning': alertType === 'warning',\n 'sky-alert-danger': alertType === 'danger',\n 'sky-alert-closeable': closeable\n }\"\n [hidden]=\"closed\"\n role=\"alert\"\n>\n <div class=\"sky-alert-content\"><ng-content></ng-content></div>\n <button\n type=\"button\"\n class=\"sky-alert-close\"\n (click)=\"close()\"\n [attr.aria-label]=\"'alert_close' | skyResources\"\n [hidden]=\"!closeable\"\n >\n <span aria-hidden=\"true\"><i class=\"fa fa-close\"></i></span>\n </button>\n</div>\n"
},] },
];
/** @nocollapse */
SkyAlertComponent.ctorParameters = function () { return []; };
SkyAlertComponent.propDecorators = {
'alertType': [{ type: Input },],
'closeable': [{ type: Input },],
'closed': [{ type: Input },],
'closedChange': [{ type: Output },],
};
//# sourceMappingURL=alert.component.js.map