[{"__symbolic":"module","version":4,"metadata":{"ContactListViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"anterasoftware-contact-list-view","template":"<table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onListViewSort($event)\" class=\"mat-elevation-z8\" [ngClass]=\"{'fixedHeader': displayActionsBar}\" style=\"width:100%\">\r\n\r\n    <ng-container matColumnDef=\"select\">\r\n      <th mat-header-cell  *matHeaderCellDef class=\"select-container width-120 padding-right-8\">\r\n        <div fxLayout=\"row\" fxLayoutGap=\"4px\">\r\n          <mat-checkbox (change)=\"toggleAll('SELECT_ALL_TOGGLE')\" [checked]=\"selectAll\" > </mat-checkbox>\r\n          <div class=\"arrow-down\" [matMenuTriggerFor]=\"selectAllMenu\"> </div>\r\n        </div>\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <mat-checkbox  (change)=\"toggleAll('SINGLE',$event, element)\" [checked]=\"element?.select\"> </mat-checkbox>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"title\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'title' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'title')\" *matCellDef=\"let element\" [matTooltip]=\"element?.title\"><p class=\"text-truncate\"> {{element?.title}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"contactName\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'contactName' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'contactName')\" *matCellDef=\"let element\"  [matTooltip]=\"element?.contactName\"><p class=\"text-truncate\"> {{element?.contactName}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"email\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'email' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'email')\" *matCellDef=\"let element\" [matTooltip]=\"element?.email\"><p class=\"text-truncate\"> {{element?.email}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"accountName\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'accountName' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'accountName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.accountName\"><p class=\"text-truncate\"> {{element?.accountName}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"salesRep\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'salesRep' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'salesRep')\" *matCellDef=\"let element\" [matTooltip]=\"element?.salesRep\"><p class=\"text-truncate\"> {{element?.salesRep}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"phone\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'phone' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'phone')\" *matCellDef=\"let element\" [matTooltip]=\"element?.phone\"><p class=\"text-truncate\"> {{element?.phone}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"dateCreated\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'dateCreated' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'dateCreated')\" *matCellDef=\"let element\" [matTooltip]=\"element?.dateCreated\"><p class=\"text-truncate\"> {{ getDateFormat(element?.dateCreated) }} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"dateModified\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'dateModified' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'dateModified')\" *matCellDef=\"let element\" [matTooltip]=\"element?.dateModified\"><p class=\"text-truncate\"> {{ getDateFormat(element?.dateModified) }} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"dateRelated\">\r\n        <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'dateRelated' | orderColumnNameMapper : page : mappingFields }}</th>\r\n        <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'dateRelated')\" *matCellDef=\"let element\" [matTooltip]=\"element?.dateRelated\"><p class=\"text-truncate\"> {{ getDateFormat(element?.dateRelated) }} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"csrName\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'csrName' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'csrName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.csrName\"><p class=\"text-truncate\"> {{element?.csrName}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"city\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'city' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'city')\" *matCellDef=\"let element\" [matTooltip]=\"element?.city\"><p class=\"text-truncate\"> {{element?.city}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"department\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'department' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'department')\" *matCellDef=\"let element\" [matTooltip]=\"element?.department\"><p class=\"text-truncate\"> {{element?.department}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"state\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'state' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'state')\" *matCellDef=\"let element\" [matTooltip]=\"element?.state\"><p class=\"text-truncate\"> {{element?.state}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"productionManagerName\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'productionManagerName' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'productionManagerName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.productionManagerName\"><p class=\"text-truncate\"> {{element?.productionManagerName}} </p></td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"salesManagerName\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'salesManagerName' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'salesManagerName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.salesManagerName\"><p class=\"text-truncate\"> {{element?.salesManagerName}} </p></td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"commissionGroupName\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'commissionGroupName' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'commissionGroupName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.commissionGroupName\"><p class=\"text-truncate\"> {{element?.commissionGroupName}} </p></td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"leadSource\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'leadSource' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'leadSource')\" *matCellDef=\"let element\" [matTooltip]=\"element?.leadSource\"><p class=\"text-truncate\"> {{element?.leadSource}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"accountType\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'accountType' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'accountType')\" *matCellDef=\"let element\" [matTooltip]=\"element?.accountType\"><p class=\"text-truncate\"> {{element?.accountType}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"partnerType\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'partnerType' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'partnerType')\" *matCellDef=\"let element\" [matTooltip]=\"element?.partnerType\"><p class=\"text-truncate\"> {{element?.partnerType}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"site\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'site' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'site')\" *matCellDef=\"let element\" [matTooltip]=\"element?.site\"><p class=\"text-truncate\"> {{element?.site}} </p></td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky:true\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n  </table>\r\n  <mat-paginator [length]=\"tableLength\" [pageIndex]=\"0\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"paginationList\" [showFirstLastButtons]=\"true\" (page)=\"paginate($event)\"></mat-paginator>\r\n\r\n\r\n  <mat-menu #selectAllMenu=\"matMenu\">\r\n    <button mat-menu-item (click)=\"toggleAll('FIRST_50')\"> Select This Page ({{ tableLength < pageSize ? tableLength : pageSize }} ) </button>\r\n    <button mat-menu-item (click)=\"toggleAll('SELECT_ALL')\"> Select All ({{tableLength}}) </button>\r\n    <button mat-menu-item (click)=\"toggleAll('DESELECT_ALL')\"> Deselect All </button>\r\n  </mat-menu>\r\n","styles":[".mat-table{table-layout:fixed;width:100%}th.mat-header-cell{background-color:#fafafa;text-align:left;min-height:42px;max-width:200px;background-color:#2e75b6!important;color:#fff}td.mat-cell :not(:first-child){text-align:left;max-width:150px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-left:5px}td.mat-cell:first-of-type,td.mat-footer-cell:first-of-type,th.mat-header-cell:first-of-type{padding-left:24px!important}.center{text-align:left}tr.mat-header-row{height:40px}.pointer{cursor:pointer}.header-cell{padding-top:8px;padding-bottom:8px;font-size:14px;font-weight:400;flex-wrap:wrap}.total-price{text-align:right!important}.link{color:#2196f3;text-decoration:underline}.arrow-down{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #fff;position:relative;top:8px;cursor:pointer}.total-width{width:100%;text-align:right!important}p{margin:0}.tasks-done{color:#8b0000;position:relative;right:3px}.tasks-done,.tasks-total{text-decoration:underline;font-size:16px}.tasks-total{color:#4d5d66}.total-header{display:flex;justify-content:flex-end;font-size:14px;font-weight:400;flex-wrap:wrap;padding-left:10px}::ng-deep .mat-sort-header-arrow{color:#fff}::ng-deep .select-container .mat-checkbox .mat-checkbox-frame{border-color:#fff}.activities-font{font-size:16px}.slash{font-size:22px;position:relative;bottom:3px}.favorite{top:0!important}::ng-deep .mat-cell .mat-icon{position:relative;top:16px;font-size:30px}.comment-number{position:link;cursor:pointer;color:#fff;position:relative;bottom:16px;left:6px}.comment-position{left:10px!important}.color-red-500{color:#f44336}.color-orange-500{color:#ff9800}.color-blue-500{color:#2196f3}.color-pink-500{color:#e91e63}.color-purple{color:#9c27b0}.width-60{width:60px}.width-90{width:90px}.width-120{width:120px}.width-150{width:150px}.padding-right-8{padding-right:8px}.paddding-left-4{padding-left:4px}.text-align-right{text-align:right}.artwork-image-wide{height:auto;max-height:40px;max-width:40px}.text-truncate{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}::ng-deep th.mat-header-cell,td.mat-cell,td.mat-footer-cell{width:150px;padding-left:6px}"]}]}],"members":{"sort":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":14,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/sort","name":"MatSort","line":14,"character":13}]}]}],"listDataSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"displayedColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"pageSizeOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"tableLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"page":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"displayActionsBar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"paginationList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"selectClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":3}}]}],"onColumnClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":3}}]}],"onPaginateFire":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":27,"character":3}}]}],"onSortFired":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":28,"character":3}}]}],"mappingFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"appendColumns":[{"__symbolic":"method"}],"toggleAll":[{"__symbolic":"method"}],"onColumnClicked":[{"__symbolic":"method"}],"paginate":[{"__symbolic":"method"}],"onListViewSort":[{"__symbolic":"method"}],"getDateFormat":[{"__symbolic":"method"}]}}}}]