[{"__symbolic":"module","version":4,"metadata":{"ListShowComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dc-list-show","template":"\n    <div>\n      <div class=\"show-box\">\n        <span class=\"show-action-left\" (mouseleave)=\"listActionHout()\" (mouseup)=\"listActionUp('right')\"\n              (mousedown)=\"listActionDown('right')\" (mouseenter)=\"listActionHover('right')\" *ngIf=\"listActionFlag\"></span>\n        <div class=\"show-ul-outer\" #listBoxP>\n          <div class=\"show-ul\" #listBox>\n            <ng-template ngFor let-item [ngForOf]=\"data\" let-i=\"index\">\n              <div class=\"show-item\" [class.no-del]=\"!canDelete\" [title]=\"item[showKey]\" [style.width]=\"itemWidth + 'px'\">\n                {{item[showKey] || item[idKey]}}\n                <span class=\"show-item-del\" title=\"Remove\" *ngIf=\"canDelete\" (click)=\"removeItemEvent(item, i, $event)\"></span>\n              </div>\n            </ng-template>\n          </div>\n        </div>\n        <span class=\"show-action-right\" (mouseleave)=\"listActionHout()\" (mouseup)=\"listActionUp('left')\"\n              (mousedown)=\"listActionDown('left')\" (mouseenter)=\"listActionHover('left')\" *ngIf=\"listActionFlag\"></span>\n      </div>\n    </div>\n  ","styles":["\n      .show-box {\n        display: flex;\n        flex-direction: row;\n        height: 25px;\n      }\n\n      .show-action-left,\n      .show-action-right {\n        flex-shrink: 0;\n        flex-grow: 0;\n        width: 30px;\n        height: 25px;\n        cursor: pointer;\n      }\n\n      .show-action-left {\n        margin-right: 10px;\n        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAALCAYAAACzkJeoAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAHdJREFUGJV1ziEOAjEABMC5SxMMFscvTtSRYO4BBDSfIPcJHBZB8CBrEDwAwSeQWCw5VE1T1s5ms01KSSUTHEIF5rggtgUs8USEjA12uGGWmwFTnLAu9wPOWNVetdji+g8/2GDAt0QYsUePd4k5d3R41BBeWOD4A9jUEkm0prjHAAAAAElFTkSuQmCC) no-repeat center center transparent;\n      }\n\n      .show-action-left:hover {\n        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAALCAYAAACzkJeoAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAHdJREFUGJV1ziEOwkAABMBpc0kNFtdfIOpIMDyAgOYTDR6Nq60g+PIBBA8ghE9UYrGkqDOXY+1sNls4PmVSoQsZqDGgKRNY4YUGIhZoccM8NgNmOGOb7gdcsMm9KrHH9R9+sMMB3xRhwglrvFOMuWOBRw5hxBL9D9PvEXfEIYOZAAAAAElFTkSuQmCC) no-repeat center center transparent;\n      }\n\n      .show-action-right {\n        margin-left: 10px;\n        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAALCAYAAACzkJeoAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAHlJREFUGJVtz6EKwnAUhfHfxqJ1be9hE3yHKcbFRYM+hQ8g+AYD678YBqsGX8JotRiEFYVx2Vc/7jnnZimlM/b4CORoMaCak7DEA+s5CSVuOCCLEgqc0GFRxJ4fG+Tx8s8VTZRfHLHFexr7wg79dADcUeMZX7lgFQWMdzcTKv3OMggAAAAASUVORK5CYII=) no-repeat center center transparent;\n      }\n\n      .show-action-right:hover {\n        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAALCAYAAACzkJeoAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAHpJREFUGJVtzyEKwgAYhuFnY3HV5j1sgnfYxGhcNMwDmD2AsBsInmBBsIp4iUWrZWFgcTB+9taX//u+P3F6XXBAL5CiwgPLOQkrvLGZk7BAixpJlJDhjCvyLPb8KZHGy5Eb9lEOOGKL7zT2gx3u0wHwRIEuvtJgHQX8AHJSEliW6yLRAAAAAElFTkSuQmCC) no-repeat center center transparent;\n      }\n\n      .show-ul-outer {\n        flex: 1;\n        position: relative;\n        overflow: hidden;\n      }\n\n      .show-ul {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        font-size: 14px;\n        position: absolute;\n      }\n\n      .show-item {\n        position: relative;\n        height: 25px;\n        line-height: 22px;\n        color: #333;\n        flex-shrink: 0;\n        flex-grow: 0;\n        background: #fff;\n        text-align: left;\n        padding: 0 20px 0 6px;\n        border: 1px solid #0081cc;\n        margin-right: 20px;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        overflow: hidden;\n        border-radius: 3px;\n      }\n\n      .show-item.no-del {\n        padding: 0 6px;\n      }\n\n      .show-item-del {\n        position: absolute;\n        right: 6px;\n        width: 10px;\n        top: 0;\n        height: 25px;\n        cursor: pointer;\n        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAG1JREFUCJlNzrENwlAMhOGPF6bwGq9nCcIcoUAiFRPQZAuKvCXSIabIIojGEbnG1v2W7w611oYJi79OGEqCOY0NzJi6iFjxRsM3jy9YuoiANcETD7yg7F7dccO4RRxzaThnqU9m9gXDDsjZ4/oD2aAYLP0YveEAAAAASUVORK5CYII=) no-repeat center transparent;\n      }\n    "]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"idKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"canDelete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"removeItemEmit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"listBox":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["listBox"]}]}],"listBoxP":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["listBoxP"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"removeItemEvent":[{"__symbolic":"method"}],"removeItems":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"addItem":[{"__symbolic":"method"}],"addItems":[{"__symbolic":"method"}],"getData":[{"__symbolic":"method"}],"isResetPostion":[{"__symbolic":"method"}],"showLastItem":[{"__symbolic":"method"}],"calcIsShowAction":[{"__symbolic":"method"}],"listActionHout":[{"__symbolic":"method"}],"listActionHover":[{"__symbolic":"method"}],"listActionDown":[{"__symbolic":"method"}],"listActionUp":[{"__symbolic":"method"}],"listUlMove":[{"__symbolic":"method"}]}}}}]