jpush-ui
Version:
极光大数据前端Angular组件（^6.1.0）
80 lines • 8.97 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var animations_1 = require("@angular/animations");
var ModalComponent = /** @class */ (function () {
function ModalComponent() {
// pass
this.isOpenChange = new core_1.EventEmitter();
this.overlayClosable = true;
this._isOpen = false;
}
Object.defineProperty(ModalComponent.prototype, "isOpen", {
get: function () {
return this._isOpen;
},
set: function (open) {
if (this._isOpen === open) {
return;
}
this._isOpen = open;
},
enumerable: true,
configurable: true
});
ModalComponent.prototype.ngOnInit = function () {
// pass
};
ModalComponent.prototype.dismiss = function () {
this.isOpen = false;
this.isOpenChange.emit(false);
};
ModalComponent.prototype.overlayClicked = function () {
if (this.overlayClosable) {
this.dismiss();
}
};
ModalComponent.prototype.stopBubble = function (event) {
event.stopPropagation();
};
ModalComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'jui-modal',
template: "\n\n <div class=\"jui-modal-container\" (click)=\"overlayClicked()\"\n *ngIf=\"isOpen\" [@appear]=\"'in'\">\n <div class=\"modal-locator\">\n <div class=\"main-container\" (click)=\"stopBubble($event)\"\n [ngStyle]=\"boxStyle\">\n <div class=\"modal-inner\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n </div>\n ",
styles: ["\n @font-face {\n font-family: 'iconfont';\n /* project id 290315 */\n src: url(\"//at.alicdn.com/t/font_290315_x4r2fph1yvutbj4i.eot\");\n src: url(\"//at.alicdn.com/t/font_290315_x4r2fph1yvutbj4i.eot?#iefix\") format(\"embedded-opentype\"), url(\"//at.alicdn.com/t/font_290315_x4r2fph1yvutbj4i.woff\") format(\"woff\"), url(\"//at.alicdn.com/t/font_290315_x4r2fph1yvutbj4i.ttf\") format(\"truetype\"), url(\"//at.alicdn.com/t/font_290315_x4r2fph1yvutbj4i.svg#iconfont\") format(\"svg\"); }\n\n .iconfont {\n display: inline-block;\n vertical-align: baseline;\n font-family: \"iconfont\" !important;\n font-style: normal;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale; }\n\n .icon-jui-alert:before {\n content: \"\\e600\"; }\n\n .icon-jui-search:before {\n content: \"\\e630\"; }\n\n .icon-jui-paper3:before {\n content: \"\\e652\"; }\n\n .icon-jui-setting:before {\n content: \"\\e602\"; }\n\n .icon-jui-left2:before {\n content: \"\\e697\"; }\n\n .icon-jui-wrong:before {\n content: \"\\e69a\"; }\n\n .icon-jui-up2:before {\n content: \"\\e6a5\"; }\n\n .icon-jui-down2:before {\n content: \"\\e6a6\"; }\n\n .icon-jui-right2:before {\n content: \"\\e6a7\"; }\n\n .icon-jui-correct2:before {\n content: \"\\e627\"; }\n\n .icon-jui-qq:before {\n content: \"\\e63a\"; }\n\n .icon-jui-email:before {\n content: \"\\e62a\"; }\n\n .icon-jui-edit:before {\n content: \"\\e686\"; }\n\n .icon-jui-download2:before {\n content: \"\\e714\"; }\n\n .icon-jui-speaker:before {\n content: \"\\e85c\"; }\n\n .icon-jui-add:before {\n content: \"\\e609\"; }\n\n .icon-jui-msg:before {\n content: \"\\e613\"; }\n\n .icon-jui-minus:before {\n content: \"\\e601\"; }\n\n .icon-jui-up:before {\n content: \"\\e658\"; }\n\n .icon-jui-letter-open:before {\n content: \"\\e61d\"; }\n\n .icon-jui-down:before {\n content: \"\\ed22\"; }\n\n .icon-jui-info:before {\n content: \"\\e685\"; }\n\n .icon-jui-cross2:before {\n content: \"\\e6b4\"; }\n\n .icon-jui-paper2:before {\n content: \"\\e71e\"; }\n\n .icon-jui-loading:before {\n content: \"\\eee3\"; }\n\n .icon-jui-road-sign:before {\n content: \"\\e604\"; }\n\n .icon-jui-left:before {\n content: \"\\e66a\"; }\n\n .icon-jui-letter:before {\n content: \"\\e605\"; }\n\n .icon-jui-right:before {\n content: \"\\e64d\"; }\n\n .icon-jui-back-top:before {\n content: \"\\e628\"; }\n\n .icon-jui-dropdown:before {\n content: \"\\e75a\"; }\n\n .icon-jui-down3:before {\n content: \"\\e629\"; }\n\n .icon-jui-alarm:before {\n content: \"\\e6c2\"; }\n\n .icon-jui-paper:before {\n content: \"\\e612\"; }\n\n .icon-jui-cross:before {\n content: \"\\e6b0\"; }\n\n .icon-jui-correct:before {\n content: \"\\e6b3\"; }\n\n .icon-jui-up3:before {\n content: \"\\eee4\"; }\n\n .icon-jui-username:before {\n content: \"\\e670\"; }\n\n .icon-jui-password:before {\n content: \"\\e615\"; }\n\n .icon-jui-slideLeft:before {\n content: \"\\e603\"; }\n\n .icon-jui-slideRight:before {\n content: \"\\e641\"; }\n\n /* icon Animate */\n .icon-doTurn {\n -webkit-animation: doTurn 1s infinite linear;\n animation: doTurn 1s infinite linear; }\n\n @-webkit-keyframes doTurn {\n 0% {\n -webkit-transform-origin: 50% 50%;\n -webkit-transform: rotate(0deg); }\n to {\n -webkit-transform-origin: 50% 50%;\n -webkit-transform: rotate(1turn); } }\n\n @keyframes doTurn {\n 0% {\n transform-origin: 50% 50%;\n transform: rotate(0deg); }\n to {\n transform-origin: 50% 50%;\n transform: rotate(1turn); } }\n .jui-modal-container {\n position: fixed;\n z-index: 1100;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n outline: 0;\n color: #292b2c;\n background: rgba(48, 48, 48, 0.8);\n text-align: center;\n transition: opacity .5s; }\n .jui-modal-container .modal-locator {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 100%;\n text-align: center;\n max-height: 90%;\n overflow: hidden;\n display: flex; }\n .jui-modal-container .modal-locator .main-container {\n background: #fff;\n padding: 10px 0;\n display: flex;\n border-radius: 4px;\n box-shadow: -6px 6px 10px #444;\n margin: 0px auto; }\n .jui-modal-container .modal-locator .main-container .modal-inner {\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%; }\n "],
// encapsulation: ViewEncapsulation.None,
animations: [
animations_1.trigger('appear', [
animations_1.state('in', animations_1.style({
transform: 'translateY(0) scale(1)',
opacity: 1
})),
animations_1.transition(':enter', [
animations_1.animate('400ms ease-in', animations_1.keyframes([
animations_1.style({ opacity: 0, transform: 'translateY(-70%) scale(0.2)', offset: 0 }),
animations_1.style({ opacity: 0.5, transform: 'translateY(10%) scale(1.2)', offset: 0.3 }),
animations_1.style({ opacity: 1, transform: 'translateY(0) scale(1)', offset: 1.0 })
]))
]),
animations_1.transition(':leave', [
animations_1.animate('200ms ease-in', animations_1.keyframes([
animations_1.style({ opacity: 1, transform: 'translateY(0) scale(1)', offset: 0 }),
animations_1.style({ opacity: 0, transform: 'scale(1.4)', offset: 1.0 })
]))
]),
]),
]
},] },
];
/** @nocollapse */
ModalComponent.ctorParameters = function () { return []; };
ModalComponent.propDecorators = {
"isOpen": [{ type: core_1.Input },],
"isOpenChange": [{ type: core_1.Output },],
"overlayClosable": [{ type: core_1.Input },],
"boxStyle": [{ type: core_1.Input },],
};
return ModalComponent;
}());
exports.ModalComponent = ModalComponent;
//# sourceMappingURL=modal.component.js.map