{"__symbolic":"module","version":4,"metadata":{"NgGalleryService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"NgGalleryComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"k-ng-gallery","template":"<!-- <div class=\"wrapper\" #wrapper>\n \n \n    <k-renderer  \n    *ngFor=\"let item of list;let i = index\"\n    [showAnimation]=\"showAnimation\"\n    [index]=\"i\"\n    [currentActiveIndex]=\"activeIndex\"\n    [annotationData]=\"item.annotationData\"\n    [url]=\"item.url\"></k-renderer>\n\n    <k-progress-bar\n    (changeCurrentIndex)=\"changeActiveIndex($event)\"></k-progress-bar>\n</div>  -->\n\n<k-gallery\n#gallery\n[list]=\"list\"\n[showSidebar]=\"showSidebar\"\n[showAnimation]=\"showAnimation\"\n[showToolbar]=\"showToolbar\"\n\n[toggleSidebarTemplate]=\"toggleSidebarTemplate\"\n\n[startIndex]=\"startIndex\"\n[endIndex]=\"endIndex\">\n</k-gallery>\n ","styles":[".wrapper{position:relative;height:100%;overflow:hidden}.content{width:calc(100% - 200px);height:100%}.icon{width:1em;height:1em;vertical-align:-.15em;fill:currentColor;overflow:hidden}"]}]}],"members":{"list":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"showAnimation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"showSidebar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"showToolbar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"startIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"endIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"toggleSidebarTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"gallery":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":27,"character":3},"arguments":["gallery",{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"rerender":[{"__symbolic":"method"}],"changeActiveIndex":[{"__symbolic":"method"}]}},"NgGalleryModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NgGalleryComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}],"imports":[{"__symbolic":"reference","module":"@angular/material/slider","name":"MatSliderModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":14,"character":4},{"__symbolic":"reference","module":"@angular/material/core","name":"MatRippleModule","line":15,"character":4}],"providers":[],"exports":[{"__symbolic":"reference","name":"NgGalleryComponent"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"k-renderer","template":"<div class=\"wrapper\" #wrapper  [class.showAnimation]=\"showAnimation\">\n \n    <canvas #canvas class=\"canvas\"></canvas>\n\n</div> \n","styles":[".wrapper{background:#000;height:100%;width:100%;position:absolute;overflow:hidden}.showAnimation.wrapper{transition:transform .5s ease-in-out}.canvas{position:absolute}"]}]}],"members":{"wrapper":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":12,"character":3},"arguments":["wrapper",{"static":true}]}]}],"canvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":13,"character":3},"arguments":["canvas",{"static":true}]}]}],"showAnimation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"url":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"annotationData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"currentActiveIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"checkShouldRender":[{"__symbolic":"method"}],"setupEventsHandlers":[{"__symbolic":"method"}],"removeEventsHandlers":[{"__symbolic":"method"}],"makeImage":[{"__symbolic":"method"}],"moveCanvas":[{"__symbolic":"method"}],"fitCanvas":[{"__symbolic":"method"}],"resizeCanvas":[{"__symbolic":"method"}],"transformCanvas":[{"__symbolic":"method"}],"fit":[{"__symbolic":"method"}],"setupObjects":[{"__symbolic":"method"}],"addText":[{"__symbolic":"method"}],"addRect":[{"__symbolic":"method"}],"addPolygon":[{"__symbolic":"method"}],"makeTranslateX":[{"__symbolic":"method"}],"zoom":[{"__symbolic":"method"}],"move":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"rerender":[{"__symbolic":"method"}],"notify":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"k-progress-bar","template":"<div class=\"progress-bar-wrapper\">\n    <div class=\"inner\">\n        <div class=\"btns-wrapper\"> \n            <button (click)=\"changeIndex(false,$event)\" class=\"progress-btn\" matRipple>\n                <svg class=\"icon svg-icon\" aria-hidden=\"true\" style=\"font-size: 20px;\" >\n                    <use xlink:href=\"#icon-left\"></use>\n                </svg>\n            </button>\n            <button (click)=\"changeIndex(true,$event)\" class=\"progress-btn\" matRipple>\n     \n                <svg class=\"icon svg-icon\" aria-hidden=\"true\" style=\"font-size: 20px;\">\n                    <use xlink:href=\"#icon-right\"></use>\n                </svg>\n            </button>\n        \n            <button (click)=\"seeTag()\" class=\"progress-btn\" matRipple>\n                <svg class=\"icon svg-icon\" aria-hidden=\"true\" style=\"font-size: 20px;\">\n                    <use xlink:href=\"#icon-hamburger-button\"></use>\n                </svg>\n           \n            </button>\n        </div>\n        <mat-slider\n        [step]=\"1\"\n        [min]=\"startIndex\"\n        [max]=\"endIndex\"\n        [value]=\"activeIndex\"\n        class=\"my-mat-slider\"\n        (change)=\"handleChange($event)\"\n        style=\"width: 500px;\"></mat-slider>\n    </div>\n \n</div>\n","styles":[".progress-bar-wrapper{position:absolute;z-index:10;width:100%;height:40px;bottom:20px;display:flex;align-items:center;justify-content:center}.inner{height:48px;background:#74749e;width:660px;display:flex}.progress-btn{outline:0;border:none;background:0 0;cursor:pointer}.btns-wrapper{display:flex;height:100%;justify-content:space-around;align-items:center;width:140px;flex-shrink:0}.btns-wrapper button{height:40px}"]}]}],"members":{"goNext":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":10,"character":3}}]}],"changeCurrentIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":11,"character":3}}]}],"openDrawer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":3}}]}],"showSidebar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"startIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"endIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"activeIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"toggleSidebarTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"changeIndex":[{"__symbolic":"method"}],"seeTag":[{"__symbolic":"method"}],"handleChange":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"k-gallery","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":7,"character":18},"member":"OnPush"},"template":"\n<div class=\"wrapper\" >\n    <div class=\"content\" #wrapper>\n \n \n        <k-renderer  \n        #renderer\n        *ngFor=\"let item of list;let i = index\"\n        [showAnimation]=\"showAnimation\"\n        [index]=\"i\"\n        [currentActiveIndex]=\"activeIndex\"\n        [annotationData]=\"item.annotationData\"\n        [url]=\"item.url\"></k-renderer>\n        \n        <ng-container *ngIf=\"showToolbar\">\n            <k-progress-bar\n            [startIndex]=\"startIndex\"\n            [endIndex]=\"endIndex\"\n            [activeIndex]=\"activeIndex\"\n            [showSidebar]=\"showSidebar\"\n            [toggleSidebarTemplate]=\"toggleSidebarTemplate\"\n\n            (changeCurrentIndex)=\"handleChangeActiveIndex($event)\"\n            (openDrawer)=\"handleOpenDrawer($event)\"\n            (goNext)=\"changeActiveIndexByDirection($event)\"></k-progress-bar>\n        </ng-container>\n       \n    </div> \n\n\n    <div class=\"drawer\" [class.opened]=\"opened\">\n        <div class=\"annotation-tool\">\n            标注信息\n        </div>\n        <div *ngFor=\"let item of list[activeIndex].annotationData\" class=\"annotation-item\">\n            <div class=\"color-area\" [style.background]=\"item.color\">\n\n            </div>\n            {{item.taginfo}}\n        </div>\n    </div>\n</div>","styles":[".wrapper{width:100%;height:100%;display:flex;overflow:hidden}.content{width:calc(100% - 240px);position:relative;height:100%;flex-grow:1;overflow:hidden}.drawer{transition:width .3s;width:0;overflow:auto}.drawer.opened{width:240px}.annotation-tool{height:44px;display:flex;align-items:center;border-bottom:1px solid #ededf2;margin:0 4px;padding-left:8px;font-family:Source Han Sans SC;font-style:normal;font-weight:400;font-size:14px;line-height:24px;color:#383874}.annotation-item{height:32px;display:flex;align-items:center;border-bottom:1px solid #ededf2;margin:0 4px;padding-left:8px;font-family:Source Han Sans SC;font-style:normal;font-weight:400;font-size:12px;color:#383874}.color-area{display:inline-block;border-radius:8px;width:4px;height:16px;margin:0 8px}"]}]}],"members":{"list":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"showAnimation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"showSidebar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"showToolbar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"startIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"endIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"toggleSidebarTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"renderer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":21,"character":3},"arguments":["renderer"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":36,"character":16}]}],"ngOnInit":[{"__symbolic":"method"}],"update":[{"__symbolic":"method"}],"handleChangeActiveIndex":[{"__symbolic":"method"}],"changeActiveIndexByDirection":[{"__symbolic":"method"}],"handleOpenDrawer":[{"__symbolic":"method"}],"getColor":[{"__symbolic":"method"}]}}},"origins":{"NgGalleryService":"./lib/ng-gallery.service","NgGalleryComponent":"./lib/ng-gallery.component","NgGalleryModule":"./lib/ng-gallery.module","ɵa":"./lib/renderer/renderer.component","ɵb":"./lib/progress-bar/progress-bar.component","ɵc":"./lib/gallery/gallery.component"},"importAs":"ng-gallery"}