UNPKG

@duoduo-oba/ng-devui

Version:

DevUI components based on Angular

1 lines 28.6 kB
{"__symbolic":"module","version":4,"metadata":{"ModalModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":20,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":22,"character":4},{"__symbolic":"reference","module":"ng-devui/overlay-container","name":"OverlayContainerModule","line":23,"character":4},{"__symbolic":"reference","module":"ng-devui/button","name":"ButtonModule","line":24,"character":4}],"declarations":[{"__symbolic":"reference","name":"ModalComponent"},{"__symbolic":"reference","name":"ModalContainerComponent"},{"__symbolic":"reference","name":"ModalContainerDirective"},{"__symbolic":"reference","name":"ModalContentDirective"},{"__symbolic":"reference","name":"ModalHeaderComponent"},{"__symbolic":"reference","name":"ModalFooterComponent"},{"__symbolic":"reference","name":"ModalAlertComponent"},{"__symbolic":"reference","name":"MovableDirective"}],"exports":[{"__symbolic":"reference","name":"ModalComponent"},{"__symbolic":"reference","name":"ModalContainerComponent"},{"__symbolic":"reference","name":"ModalHeaderComponent"},{"__symbolic":"reference","name":"ModalFooterComponent"},{"__symbolic":"reference","name":"ModalAlertComponent"},{"__symbolic":"reference","name":"MovableDirective"}],"providers":[{"__symbolic":"reference","name":"ModalService"},{"__symbolic":"reference","name":"DialogService"},{"__symbolic":"reference","module":"ng-devui/window-ref","name":"DocumentRef","line":47,"character":4}],"entryComponents":[{"__symbolic":"reference","name":"ModalComponent"},{"__symbolic":"reference","name":"ModalContainerComponent"},{"__symbolic":"reference","name":"ModalAlertComponent"}]}]}],"members":{}},"ModalService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":10,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":12,"character":48},{"__symbolic":"reference","module":"ng-devui/overlay-container","name":"OverlayContainerRef","line":13,"character":33}]}],"open":[{"__symbolic":"method"}]}},"IModalOptions":{"__symbolic":"interface"},"IDialogOptions":{"__symbolic":"interface"},"ModalHeaderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"d-modal-header","template":"<div class=\"modal-header\">\r\n <button *ngIf=\"showCloseBtn\" type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"close($event)\">\r\n <svg class=\"svg-icon-close\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12px\" height=\"12px\" viewBox=\"0 0 12 12\" version=\"1.1\">\r\n <g id=\"Symbols\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g id=\"图标\" transform=\"translate(-1236.000000, -1286.000000)\" fill-rule=\"nonzero\">\r\n <g id=\"close\" transform=\"translate(1234.000000, 1284.000000)\">\r\n <polygon\r\n id=\"Mask\"\r\n points=\"8 6.58578644 12.2426407 2.34314575 13.6568542 3.75735931 9.41421356 8 13.6568542 12.2426407 12.2426407 13.6568542 8 9.41421356 3.75735931 13.6568542 2.34314575 12.2426407 6.58578644 8 2.34314575 3.75735931 3.75735931 2.34314575\"\r\n />\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n </button>\r\n\r\n <div class=\"standard-title\">\r\n <div *ngIf=\"(dialogtype | lowercase) == 'warning'\" class=\"header-alert-icon\">\r\n <svg\r\n t=\"1523848353321\"\r\n class=\"icon\"\r\n style=\"\"\r\n viewBox=\"0 0 1024 1024\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n p-id=\"2903\"\r\n width=\"16\"\r\n height=\"16\"\r\n >\r\n <defs>\r\n <style type=\"text/css\"></style>\r\n </defs>\r\n <path\r\n d=\"M512 0C229.205333 0 0 229.205333 0 512s229.205333 512 512 512 512-229.205333 512-512S794.794667 0 512 0z m-40.021333 230.997333a39.978667 39.978667 0 1 1 80.042666 0v369.024a39.978667 39.978667 0 1 1-80.042666 0V230.997333zM512 794.026667a44.928 44.928 0 0 1-45.013333-44.970667c0-24.917333 20.096-45.013333 45.013333-45.013333s45.013333 20.096 45.013333 45.013333c0 24.746667-20.096 44.970667-45.013333 44.970667z\"\r\n fill=\"#fecc55\"\r\n p-id=\"2904\"\r\n ></path>\r\n </svg>\r\n </div>\r\n <div *ngIf=\"(dialogtype | lowercase) == 'failed'\" class=\"header-alert-icon\">\r\n <svg\r\n t=\"1523848193850\"\r\n class=\"icon\"\r\n style=\"\"\r\n viewBox=\"0 0 1024 1024\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n p-id=\"2647\"\r\n width=\"16\"\r\n height=\"16\"\r\n >\r\n <defs>\r\n <style type=\"text/css\"></style>\r\n </defs>\r\n <path\r\n d=\"M512 0C229.205333 0 0 229.205333 0 512s229.205333 512 512 512 512-229.205333 512-512S794.794667 0 512 0z m205.312 666.88a36.010667 36.010667 0 0 1-51.029333 50.816L512 562.986667l-154.282667 154.709333a35.84 35.84 0 0 1-50.901333 0.085333 36.010667 36.010667 0 0 1-0.128-50.901333L461.226667 512 306.773333 357.12a36.010667 36.010667 0 0 1 50.986667-50.816L512 461.013333l154.282667-154.794666a36.010667 36.010667 0 0 1 51.029333 50.773333L562.773333 512l154.453334 154.88z\"\r\n fill=\"#F9504B\"\r\n p-id=\"2648\"\r\n ></path>\r\n </svg>\r\n </div>\r\n <div *ngIf=\"(dialogtype | lowercase) == 'sucess' || (dialogtype | lowercase) == 'success'\" class=\"header-alert-icon\">\r\n <svg\r\n t=\"1523848446605\"\r\n class=\"icon\"\r\n style=\"\"\r\n viewBox=\"0 0 1024 1024\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n p-id=\"3058\"\r\n width=\"16\"\r\n height=\"16\"\r\n >\r\n <defs>\r\n <style type=\"text/css\"></style>\r\n </defs>\r\n <path\r\n d=\"M512 0C229.205333 0 0 229.205333 0 512s229.205333 512 512 512 512-229.205333 512-512S794.794667 0 512 0z m260.266667 356.394667l-359.466667 360.704-0.426667 0.426666a35.925333 35.925333 0 0 1-57.6-6.826666l-108.885333-190.378667a35.882667 35.882667 0 0 1 13.397333-49.109333 35.882667 35.882667 0 0 1 49.109334 13.397333l85.418666 149.504 327.466667-328.533333a36.010667 36.010667 0 0 1 51.029333 50.816z\"\r\n fill=\"#41C99F\"\r\n p-id=\"3059\"\r\n ></path>\r\n </svg>\r\n </div>\r\n <div *ngIf=\"(dialogtype | lowercase) == 'info'\" class=\"header-alert-icon\">\r\n <svg\r\n t=\"1523848507870\"\r\n class=\"icon\"\r\n style=\"\"\r\n viewBox=\"0 0 1024 1024\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n p-id=\"3217\"\r\n width=\"16\"\r\n height=\"16\"\r\n >\r\n <defs>\r\n <style type=\"text/css\"></style>\r\n </defs>\r\n <path\r\n d=\"M512 0C229.205333 0 0 229.205333 0 512s229.205333 512 512 512 512-229.205333 512-512S794.794667 0 512 0z m-2.986667 184.490667a35.968 35.968 0 1 1 0 71.978666 35.968 35.968 0 0 1 0-71.978666z m157.184 557.098666a35.968 35.968 0 0 1-36.010666 36.010667H387.84a35.968 35.968 0 1 1 0-72.021333h85.205333V391.552H413.013333a35.968 35.968 0 1 1 0-72.021333h96c19.882667 0 35.968 16.128 35.968 36.010666v350.122667h85.205334c19.925333 0 36.010667 16.085333 36.010666 35.968z\"\r\n fill=\"#797979\"\r\n p-id=\"3218\"\r\n ></path>\r\n </svg>\r\n </div>\r\n <span *ngIf=\"!!title\" [title]=\"title\" class=\"title-text\">{{ title }}</span>\r\n <span *ngIf=\"!!!title && (dialogtype | lowercase) === 'warning'\" class=\"title-text\">提醒</span>\r\n <span *ngIf=\"!!!title && (dialogtype | lowercase) === 'failed'\" class=\"title-text\">错误</span>\r\n <span *ngIf=\"!!!title && ((dialogtype | lowercase) === 'sucess' || (dialogtype | lowercase) == 'success')\" class=\"title-text\"\r\n >成功</span\r\n >\r\n <span *ngIf=\"!!!title && (dialogtype | lowercase) === 'info'\" class=\"title-text\">提示</span>\r\n </div>\r\n</div>\r\n","styles":[".modal-header{padding:10px 20px 0;height:43px}.modal-header .standard-title{color:#252b3a;letter-spacing:0;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}button.close{float:right;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;cursor:pointer;background:0 0;border:0;-webkit-appearance:none}svg.svg-icon-close>g>g{fill:#252b3a}.header-alert-icon{width:16px;height:16px;display:inline-block;vertical-align:middle;margin-right:5px}.title-text{font-size:16px;font-weight:600;vertical-align:middle}button{outline:0;height:30px;width:30px}.close:hover{background:#f2f5fc}.close:hover svg g{fill:#344899}"]}]}],"members":{"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"closeEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":14,"character":3}}]}],"dialogtype":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"showCloseBtn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"close":[{"__symbolic":"method"}]}},"ModalFooterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"d-modal-footer","template":"<div class=\"modal-footer\">\r\n <div>\r\n <d-button\r\n *ngFor=\"let button of buttons\"\r\n [attr.id]=\"button.id\"\r\n (btnClick)=\"button.handler($event)\"\r\n bsStyle=\"{{ button.cssClass }}\"\r\n circled=\"true\"\r\n [width]=\"button.btnwidth\"\r\n [autofocus]=\"button.autofocus\"\r\n >{{ button.text }}\r\n </d-button>\r\n </div>\r\n</div>\r\n","styles":[".modal-footer{height:64px;padding:14px 7px 7px}"]}]}],"members":{"buttons":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}]}},"ModalContentDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":5,"character":1},"arguments":[{"selector":"[dModalContentHost]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":9,"character":41}]}]}},"ModalContainerDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":13,"character":1},"arguments":[{"selector":"[dModalContainerHost]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":9,"character":41}]}]}},"ModalAlertComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"d-modal-alert","template":"<div>\r\n <div class=\"modal-body\">\r\n <div *ngIf=\"!!data.content\">{{ data.content }}</div>\r\n </div>\r\n <div class=\"modal-footer\">\r\n <d-button (btnClick)=\"close($event)\" bsStyle=\"stress\">{{ data.cancelBtnText }} </d-button>\r\n </div>\r\n</div>\r\n"}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"close":[{"__symbolic":"method"}]}},"ModalContainerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"d-modal-container","template":"<div>\r\n <d-modal-header\r\n id=\"d-modal-header\"\r\n [title]=\"title\"\r\n (closeEvent)=\"close($event)\"\r\n [dialogtype]=\"dialogtype\"\r\n [showCloseBtn]=\"showCloseBtn\"\r\n ></d-modal-header>\r\n <div\r\n class=\"modal-body devui-scrollbar\"\r\n [ngClass]=\"{\r\n 'flex-content': dialogtype === 'warning' || dialogtype === 'failed' || dialogtype === 'success' || dialogtype === 'info'\r\n }\"\r\n [ngStyle]=\"{ maxHeight: maxHeight, 'overflow-y': 'auto' }\"\r\n >\r\n <div\r\n [ngClass]=\"{\r\n 'display-flex': dialogtype !== '' && dialogtype !== 'standard'\r\n }\"\r\n >\r\n <div class=\"content\" [style.max-height]=\"maxHeight\" *ngIf=\"!!content && !html\">\r\n {{ content }}\r\n </div>\r\n <div class=\"content\" [style.max-height]=\"maxHeight\" *ngIf=\"!!content && html\" [innerHTML]=\"content\"></div>\r\n <ng-template dModalContentHost></ng-template>\r\n </div>\r\n </div>\r\n\r\n <d-modal-footer [buttons]=\"buttons\"></d-modal-footer>\r\n</div>\r\n","styles":[".modal-body{padding:10px 30px}.display-flex{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;display:-ms-flexbox;-ms-flex-align:center;max-width:100%}.alert-icon{margin-right:10px}div.content{word-break:normal;word-wrap:break-word;width:100%}.alert-icon+div.content{width:'calc(100% - 60px)'}.flex-content ::ng-deep div.content{font-size:14px;word-break:normal;word-wrap:break-word;white-space:pre-wrap}.flex-content{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center}"]}]}],"members":{"maxHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"buttons":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"html":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"onClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"modalContentHost":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":28,"character":3},"arguments":[{"__symbolic":"reference","name":"ModalContentDirective"},{"static":true}]}]}],"dialogtype":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"showCloseBtn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":31,"character":33}]}],"ngOnInit":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}]}},"DialogService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":11,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":15,"character":48},{"__symbolic":"reference","module":"ng-devui/overlay-container","name":"OverlayContainerRef","line":16,"character":43}]}],"open":[{"__symbolic":"method"}]}},"MovableDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[dMovable]"}]}],"members":{"handle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":5}}]}],"moveEl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":14,"character":27}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"onMouseDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":30,"character":5},"arguments":["mousedown",["$event"]]}]}],"onMouseUp":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":40,"character":5},"arguments":["document:mouseup",["$event"]]}]}],"onMouseMove":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":45,"character":5},"arguments":["document:mousemove",["$event"]]}]}],"onTouchStart":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":68,"character":5},"arguments":["touchstart",["$event"]]}]}],"onTouchEnd":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":76,"character":5},"arguments":["document:touchend"]}]}],"onTouchMove":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":81,"character":5},"arguments":["document:touchmove",["$event"]]}]}],"allowDrag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":117,"character":5},"arguments":["dMovable"]}]}]}},"ModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"d-modal","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":12,"character":4},"arguments":["backdropAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":13,"character":6},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":13,"character":20},"arguments":[{"opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":14,"character":6},"arguments":["in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":14,"character":18},"arguments":[{"opacity":0.2}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":15,"character":6},"arguments":["void => in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":15,"character":31},"arguments":["400ms cubic-bezier(0.23, 1, 0.32, 1)"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":16,"character":6},"arguments":["in => void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":16,"character":31},"arguments":["300ms cubic-bezier(0.755, 0.05, 0.855, 0.06)"]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":18,"character":4},"arguments":["modalAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":19,"character":6},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":19,"character":20},"arguments":[{"opacity":0,"transform":"scale(0.9)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":20,"character":6},"arguments":["in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":20,"character":18},"arguments":[{"opacity":1,"transform":"scale(1)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":21,"character":6},"arguments":["void => in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":21,"character":31},"arguments":["400ms cubic-bezier(0.23, 1, 0.32, 1)"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":22,"character":6},"arguments":["in => void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":22,"character":31},"arguments":["300ms cubic-bezier(0.755, 0.05, 0.855, 0.06)"]}]}]]}],"template":"<div class=\"modal-backdrop\" [@backdropAnimation]=\"animateState\"></div>\r\n<div class=\"modal in\" [attr.id]=\"id\" (mousedown)=\"modalMouseDown($event)\" (mouseup)=\"modalMouseUp($event)\" (click)=\"onModalClick($event)\">\r\n <div\r\n class=\"modal-dialog\"\r\n [ngClass]=\"{\r\n 'place-at-top': placement === 'top',\r\n 'place-at-bottom': placement === 'bottom',\r\n 'place-at-center': placement === 'center'\r\n }\"\r\n [ngStyle]=\"{ width: width }\"\r\n [@modalAnimation]=\"animateState\"\r\n (@modalAnimation.done)=\"onAnimationDone($event)\"\r\n tabindex=\"1\"\r\n #dialog\r\n >\r\n <div class=\"modal-content\" [dMovable]=\"draggable\" [handle]=\"draggableHandleEl\" [ngStyle]=\"{ transform: resolveTransformTranslate() }\">\r\n <ng-template dModalContainerHost></ng-template>\r\n </div>\r\n </div>\r\n</div>\r\n","styles":[".modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;outline:0;overflow-y:auto;display:block;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal-dialog{position:relative;width:auto;margin:0 auto}.modal-dialog.place-at-center{margin:auto}.modal-dialog.place-at-top{margin-bottom:auto}.modal-dialog.place-at-bottom{margin-top:auto}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;opacity:.2;background-color:#000}:host ::ng-deep .modal-content{position:relative;border-radius:2px;border:none;background-color:#fff;background-clip:padding-box;outline:0;box-shadow:5px 5px 20px 0 rgba(41,48,64,.2)}:host ::ng-deep .modal-content .modal-body{padding:24px 24px 16px}:host ::ng-deep .modal-content .modal-footer{border-top:none;padding:7px;text-align:center}:host ::ng-deep .modal-content .modal-footer button{margin:5px;padding:5px 20px;width:auto}:host ::ng-deep .modal-content .modal-footer button.pull-left{padding-left:5px;padding-right:5px;position:relative;left:-5px}:host ::ng-deep .modal-content .modal-footer button+button{margin-bottom:16px}:host ::ng-deep .d-btn{display:inline-block;margin-bottom:0;font-weight:400;text-align:center;vertical-align:middle;touch-action:manipulation;cursor:pointer;background-image:none;white-space:nowrap;font-size:14px;line-height:1.42857143;border-radius:2px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:focus{outline:0}"]}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"showAnimate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"backdropCloseable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"beforeHidden":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"placement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"offsetX":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"offsetY":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"bodyScrollable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"modalContainerHost":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":39,"character":3},"arguments":[{"__symbolic":"reference","name":"ModalContainerDirective"},{"static":true}]}]}],"dialogElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":40,"character":3},"arguments":["dialog",{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ng-devui/window-ref","name":"DocumentRef","line":47,"character":35},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":47,"character":66}]}],"ngOnInit":[{"__symbolic":"method"}],"onAnimationDone":[{"__symbolic":"method"}],"onHidden":[{"__symbolic":"method"}],"canHideModel":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"resolveTransformTranslate":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}},"origins":{"ModalModule":"./modal.module","ModalService":"./modal.service","IModalOptions":"./modal.types","IDialogOptions":"./modal.types","ModalHeaderComponent":"./modal-header.component","ModalFooterComponent":"./modal-footer.component","ModalContentDirective":"./modal.directive","ModalContainerDirective":"./modal.directive","ModalAlertComponent":"./modal-alert.component","ModalContainerComponent":"./modal-container.component","DialogService":"./dialog.service","MovableDirective":"./movable.directive","ModalComponent":"./modal.component"},"importAs":"ng-devui/modal"}