[{"__symbolic":"module","version":4,"metadata":{"KanbanProductThumbnailViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"anterasoftware-kanban-product-thumbnail-view","template":"<div id=\"photos-videos\" class=\"p-24\">\r\n    <div class=\"period-media\" fxLayout=\"row wrap\">\r\n        <div class=\"media\" *ngFor=\"let product of products\">\r\n            <div class=\"item-no\">\r\n                #{{ product?.productId }}\r\n            </div>\r\n            <mat-checkbox (change)=\"toggleAll($event, 'SINGLE',$event, product)\" [checked]=\"product?.select\">\r\n            </mat-checkbox>\r\n            <!-- <mat-checkbox [(ngModel)]=\"checkboxes[product?.id]\" (ngModelChange)=\"onColumnClicked(product?.id)\"\r\n                (click)=\"$event.stopPropagation()\">\r\n            </mat-checkbox> -->\r\n            <!-- <mat-slide-toggle class=\"auto-update\" (click)=\"$event.stopPropagation()\"></mat-slide-toggle> -->\r\n            <mat-icon\r\n                *ngIf=\"product?.shell == '1'\"\r\n                class=\"auto-update green-600 s-16\"\r\n                (click)=\"autoUpdateToggled($event, product)\"\r\n                matTooltip=\"Auto Update: On\"\r\n                >panorama_fish_eye</mat-icon>\r\n            <mat-icon\r\n                *ngIf=\"product?.shell == '0'\"\r\n                class=\"auto-update green-600 s-16\"\r\n                (click)=\"autoUpdateToggled($event, product)\"\r\n                matTooltip=\"Auto Update: Off\"\r\n                >lens</mat-icon>\r\n            <img (click)=\"goto(product?.id)\" *ngIf=\"product?.MediaContent[0]\" [ngClass]=\"{'wide': product?.MediaContent[0]?.width/product?.MediaContent[0]?.height >1, 'tall': product?.MediaContent[0].width/product?.MediaContent[0]?.height <=1}\" [src]=\"product?.MediaContent[0].url\" title=\"{{product?.MediaContent[0].productId}}\" [default]= \"'assets/images/ecommerce/placeholder-image.png'\">\r\n            <img (click)=\"goto(product?.id)\" class=\"preview\" *ngIf=\"!product?.MediaContent[0]\" [src]=\"'assets/images/ecommerce/placeholder-image.png'\">\r\n            <div class=\"title\" matTooltip=\"{{product?.productName}}\">{{product?.productName}}</div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"text-center p-24\" *ngIf=\"totalCount == 0\">\r\n    There are currently no products in your system.<br>\r\n    Add products to get started.\r\n</div>\r\n\r\n<mat-paginator #paginator\r\n                [length]=\"totalCount\"\r\n                [pageIndex]=\"0\"\r\n                [pageSize]=\"50\"\r\n                (page)=\"paginate($event)\"\r\n                [pageSizeOptions]=\"[10, 20, 50, 100]\"\r\n                [showFirstLastButtons]=\"true\">\r\n</mat-paginator>\r\n\r\n<div class=\"loading\"\r\n    [@animate]=\"{value:'*',params:{opacity:1}}\"\r\n    *ngIf=\"loading\">\r\n    <mat-spinner></mat-spinner>\r\n</div>\r\n","styles":[".mat-table{box-shadow:none;overflow-y:auto;flex:none!important}.mat-table .mat-header-row{background:#fff;width:100%;z-index:1}.mat-table .mat-column-checkbox{flex:0 1 64px}.mat-table .mat-column-checkbox .mat-checkbox-ripple{display:none!important}.mat-table .mat-column-itemNumber{flex:0 1 84px}.mat-table .mat-column-logo{flex:0 1 40px}.mat-table .mat-column-buttons{flex:0 1 80px}.mat-paginator{flex:none}#photos-videos{overflow:auto}#photos-videos .period-media{margin-bottom:16px}#photos-videos .period-media .media{margin:0 16px 16px 0;position:relative;cursor:pointer;height:168px;width:168px;display:flex;justify-content:center;align-items:center;overflow:hidden}#photos-videos .period-media .media img.wide{max-width:100%;max-height:100%;height:auto}#photos-videos .period-media .media img.tall{max-height:65%;max-width:100%;width:auto}#photos-videos .period-media .media .preview{display:block;max-width:105px;max-height:105px}#photos-videos .period-media .media .title{position:absolute;bottom:0;left:0;right:0;z-index:10;padding:0 16px;height:24px;line-height:24px;background:rgba(0,0,0,.54);color:#fff;font-size:12px}#photos-videos .period-media .media .item-no{position:absolute;top:0;left:0;right:0;height:30px;line-height:30px;padding-left:8px;background:rgba(0,0,0,.05);color:#222;font-size:12px;font-weight:700;z-index:10px}#photos-videos .period-media .media mat-checkbox{position:absolute;top:3px;right:4px;z-index:10}#photos-videos .period-media .media .auto-update{position:absolute;top:35px;right:5px;z-index:10;border-radius:50%;color:#fff}.filter-input .mat-option-pseudo-checkbox{display:none}.filter-input .mat-icon-button{position:absolute;top:4px;right:0}.filter-input .mat-icon-button .mat-icon{margin:0}"]}]}],"members":{"products":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"pageSizeOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"totalCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"page":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"selectClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":18,"character":3}}]}],"onColumnClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"onPaginateFire":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"onSortFired":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":3}}]}],"onAutoUpdateToggled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":3}}]}],"onGoto":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"Router","line":29,"character":20}]}],"ngOnInit":[{"__symbolic":"method"}],"paginate":[{"__symbolic":"method"}],"onColumnClicked":[{"__symbolic":"method"}],"toggleAll":[{"__symbolic":"method"}],"onListViewSort":[{"__symbolic":"method"}],"goto":[{"__symbolic":"method"}],"autoUpdateToggled":[{"__symbolic":"method"}]}}}}]