[{"__symbolic":"module","version":4,"metadata":{"CanDraw":{"__symbolic":"interface"},"DrawComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"drawer","template":"\n    <div *ngIf=\"mark === undefined ? true : mark\" class=\"draw-back\"></div>\n    <div class=\"draw-container\" [style.top]=\"top\" [style.height]=\"calcHeight()\" [ngClass]=\"{'show':show}\"\n         [style.width]=\"width ? width : '66%'\">\n      <div *ngIf=\"title\" class=\"dc-draw-header\">\n        <div class=\"dc-draw-title\"><img *ngIf=\"iconCls\" class=\"draw-img\" [src]=\"iconCls\"/>{{title}}</div>\n        <div class=\"dc-draw-close\" (click)=\"onHidden()\"></div>\n      </div>\n      <div class=\"dc-draw-content\" [style.overflow]=\"getOverFlow()\" [style.padding]=\"padding? padding : '20px'\">\n        <ng-template #componentContainer></ng-template>\n      </div>\n    </div>\n  ","styles":["\n      .draw-back {\n        position: fixed;\n        width: 100%;\n        height: 100%;\n        opacity: 0.2;\n        background: #000;\n        z-index: 1002;\n      }\n\n      .draw-container {\n        opacity: 1;\n        width: 66%;\n        position: fixed;\n        height: 100vh;\n        right: 0;\n        max-width: 0;\n        transition: max-width 0.5s ease-in, color 0.3s ease-out;\n        box-shadow: -2px 0px 15px 0px #888888;\n        background: #fcfcfc;\n        overflow-x: hidden;\n        overflow-y: auto;\n        z-index: 1003;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .dc-draw-header {\n        /*box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, .1);*/\n        padding: 0 20px;\n        font-size: 18px;\n        font-weight: bold;\n        height: 50px;\n        line-height: 50px;\n        flex-grow: 0;\n        flex-shrink: 0;\n        position: relative;\n        border-bottom: solid 1px #ccc;\n      }\n\n      .draw-img {\n        margin: 0 5px 4px 0;\n      }\n\n      .dc-draw-title {\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n        width: calc(100% - 46px);\n      }\n\n      .dc-draw-close {\n        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfCAMAAAAocOYLAAAATlBMVEUAAAAAAAAAAAAAAAAAAACcnJzw8PDk5OT+/v7W1tb+/v78/Pz4+Pj29vb09PTm5ub9/f3R0dGVlZX////x8fF9fX1mZmZ/f3/5+fmJiYmRqov8AAAAE3RSTlMABgkOES6kevRd+ufSw7+F8lgpV5JIPgAAAOBJREFUKM+lk+kSgyAMhAsRj3obz/d/0UYUVoszdKb7Qxm+TSaE8PpdSiktkt8z1USJiEgsT9RkTcVcNZkJHEKHlL3SQRx33Od8Ud5bA3DGX8ouBkUFBypI+XDTycY6OjSu8umMVi483fG2jCdett2QknLhdneaxWDxPNnFmUBRyzAAc0sHT2qGAZjrg+ukZG+YJo+5TPTB3wwDML/jHPld5bZI5Ed9Z+UjDDW58wGjDzifNsDumOgP+muxNaC/Z4I8vJ9cwiP3G58PGIr7fBXBAJrrfBrgyHxH3kfkff2vD54SI6E1SleBAAAAAElFTkSuQmCC) no-repeat center;\n        width: 31px;\n        height: 31px;\n        position: absolute;\n        right: 15px;\n        top: 10px;\n        cursor: pointer;\n      }\n\n      .draw-container.show {\n        max-width: 100%;\n      }\n\n      .dc-draw-content {\n        flex: 1;\n        height: 100px;\n      }\n\n      ::-webkit-scrollbar {\n        width: 8px;\n        height: 8px;\n      }\n\n      ::-webkit-scrollbar-track,\n      ::-webkit-scrollbar-thumb {\n        border-radius: 999px;\n        border: 0 solid transparent;\n      }\n\n      ::-webkit-scrollbar-thumb {\n        min-height: 20px;\n        max-height: 100px;\n        box-shadow: 0 0 0 5px rgba(201, 201, 201, 1) inset;\n      }\n\n      ::-webkit-scrollbar-corner {\n        background: transparent;\n      }\n    "]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"handler":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"padding":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"iconCls":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"mark":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hiddenScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"top":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["componentContainer",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"Router"},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Injector"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef"}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click",["$event"]]}]}],"calcHeight":[{"__symbolic":"method"}],"closeComponent":[{"__symbolic":"method"}],"getOverFlow":[{"__symbolic":"method"}],"onHidden":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"isScrollY":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}}}}]